feat: complete comprehensive zero-state metrics across all dashboard pages for new accounts

This commit is contained in:
2026-09-13 22:17:40 +05:30
parent d9bd142e6a
commit afab06d33c
22 changed files with 771 additions and 299 deletions

View File

@@ -3,28 +3,52 @@
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { LineChart as LineChartIcon, Activity, BrainCircuit } from "lucide-react"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, Cell } from 'recharts'
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
const DEMO_TREND_DATA = [
{ name: 'Week 1', score: 120 },
{ name: 'Week 2', score: 135 },
{ name: 'Week 3', score: 130 },
{ name: 'Week 4', score: 145 },
{ name: 'Week 5', score: 160 },
{ name: 'Week 6', score: 185 },
]
const ZERO_TREND_DATA = [
{ name: 'Week 1', score: 0 },
{ name: 'Week 2', score: 0 },
{ name: 'Week 3', score: 0 },
{ name: 'Week 4', score: 0 },
{ name: 'Week 5', score: 0 },
{ name: 'Week 6', score: 0 },
]
const DEMO_HEATMAP_DATA = [
{ topic: 'Kinematics', accuracy: 95 },
{ topic: 'Optics', accuracy: 72 },
{ topic: 'Thermodynamics', accuracy: 45 },
{ topic: 'Calculus', accuracy: 38 },
{ topic: 'Organic Chem', accuracy: 88 },
{ topic: 'Inorganic', accuracy: 65 },
]
const ZERO_HEATMAP_DATA = [
{ topic: 'Kinematics', accuracy: 0 },
{ topic: 'Optics', accuracy: 0 },
{ topic: 'Thermodynamics', accuracy: 0 },
{ topic: 'Calculus', accuracy: 0 },
{ topic: 'Organic Chem', accuracy: 0 },
{ topic: 'Inorganic', accuracy: 0 },
]
export default function AnalyticsPage() {
const trendData = [
{ name: 'Week 1', score: 120 },
{ name: 'Week 2', score: 135 },
{ name: 'Week 3', score: 130 },
{ name: 'Week 4', score: 145 },
{ name: 'Week 5', score: 160 },
{ name: 'Week 6', score: 185 },
]
// For heatmap-like visualization (using a barchart with different colors)
const heatmapData = [
{ topic: 'Kinematics', accuracy: 95 },
{ topic: 'Optics', accuracy: 72 },
{ topic: 'Thermodynamics', accuracy: 45 },
{ topic: 'Calculus', accuracy: 38 },
{ topic: 'Organic Chem', accuracy: 88 },
{ topic: 'Inorganic', accuracy: 65 },
]
const { userId } = useActiveUser()
const isDemo = isDemoUser(userId)
const trendData = isDemo ? DEMO_TREND_DATA : ZERO_TREND_DATA
const heatmapData = isDemo ? DEMO_HEATMAP_DATA : ZERO_HEATMAP_DATA
const getColor = (accuracy: number) => {
if (accuracy === 0) return '#374151' // neutral gray
if (accuracy >= 80) return '#10b981' // emerald-500
if (accuracy >= 60) return '#f59e0b' // amber-500
return '#ef4444' // red-500
@@ -50,7 +74,9 @@ export default function AnalyticsPage() {
<Card className="col-span-1 lg:col-span-2 border-border shadow-sm bg-background">
<CardHeader>
<CardTitle className="flex items-center gap-2"><LineChartIcon className="text-[#00F0FF]" size={20} /> Projected Score Trajectory</CardTitle>
<CardDescription>Your mock scores over the last 6 months projected towards the final exam.</CardDescription>
<CardDescription>
{isDemo ? "Your mock scores over the last 6 months projected towards the final exam." : "Your mock test trajectory will plot here as you complete tests."}
</CardDescription>
</CardHeader>
<CardContent className="h-[350px] mt-4">
<ResponsiveContainer width="100%" height="100%">
@@ -75,7 +101,11 @@ export default function AnalyticsPage() {
</CardHeader>
<CardContent>
<p className="text-sm text-foreground/80 leading-relaxed font-medium">
Our models detect a consistent <strong>14% accuracy drop</strong> in physics questions involving Calculus. We are adjusting your upcoming DPPs to focus heavily on integration applications in kinematics.
{isDemo ? (
<>Our models detect a consistent <strong>14% accuracy drop</strong> in physics questions involving Calculus. We are adjusting your upcoming DPPs to focus heavily on integration applications in kinematics.</>
) : (
<>Complete your first diagnostic test or DPP to unlock personalized AI diagnoses and focus area recommendations. Our neural models will begin analyzing your accuracy curves as soon as you attempt questions.</>
)}
</p>
</CardContent>
</Card>