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

@@ -4,14 +4,25 @@ import { ExamStrategyCard } from "@/components/AI/ExamStrategyCard"
import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard"
import { Card, CardContent } from "@/components/ui/card"
import { Zap, Clock, Target, Lightbulb, CheckCircle2, AlertTriangle, TrendingUp } from "lucide-react"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
const NEG_MARKING_DATA = [
const DEMO_NEG_MARKING_DATA = [
{ subject: "Physics", attempts: 30, negMarks: 12, accuracy: 60 },
{ subject: "Chemistry", attempts: 35, negMarks: 7, accuracy: 80 },
{ subject: "Maths", attempts: 28, negMarks: 10, accuracy: 64 },
{ subject: "Maths / Biology", attempts: 28, negMarks: 10, accuracy: 64 },
]
const ZERO_NEG_MARKING_DATA = [
{ subject: "Physics", attempts: 0, negMarks: 0, accuracy: 0 },
{ subject: "Chemistry", attempts: 0, negMarks: 0, accuracy: 0 },
{ subject: "Maths / Biology", attempts: 0, negMarks: 0, accuracy: 0 },
]
export default function StrategyPage() {
const { userId } = useActiveUser()
const isDemo = isDemoUser(userId)
const negMarkingData = isDemo ? DEMO_NEG_MARKING_DATA : ZERO_NEG_MARKING_DATA
return (
<div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto animate-in fade-in duration-500 min-h-screen">
{/* Page Header */}
@@ -37,10 +48,10 @@ export default function StrategyPage() {
{/* KPI Strip */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[
{ label: "Time Per Question", value: "45 sec", note: "Target: 38 sec", icon: <Clock size={18} className="text-red-400" />, color: "border-red-400/20 bg-red-400/5" },
{ label: "Negative Marks Lost", value: "−29", note: "Last mock test", icon: <AlertTriangle size={18} className="text-amber-400" />, color: "border-amber-400/20 bg-amber-400/5" },
{ label: "Attempted Questions", value: "93 / 120", note: "+7 vs last test", icon: <Target size={18} className="text-[#00F0FF]" />, color: "border-[#00F0FF]/20 bg-[#00F0FF]/5" },
{ label: "Score Yield", value: "214", note: "Predicted score", icon: <TrendingUp size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
{ label: "Time Per Question", value: isDemo ? "45 sec" : "-- sec", note: isDemo ? "Target: 38 sec" : "Not calibrated", icon: <Clock size={18} className="text-red-400" />, color: "border-red-400/20 bg-red-400/5" },
{ label: "Negative Marks Lost", value: isDemo ? "−29" : "0", note: isDemo ? "Last mock test" : "0 negative marks", icon: <AlertTriangle size={18} className="text-amber-400" />, color: "border-amber-400/20 bg-amber-400/5" },
{ label: "Attempted Questions", value: isDemo ? "93 / 120" : "0 / 120", note: isDemo ? "+7 vs last test" : "0 attempted", icon: <Target size={18} className="text-[#00F0FF]" />, color: "border-[#00F0FF]/20 bg-[#00F0FF]/5" },
{ label: "Score Yield", value: isDemo ? "214" : "0", note: isDemo ? "Predicted score" : "Baseline", icon: <TrendingUp size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
].map((kpi) => (
<Card key={kpi.label} className={`rounded-2xl border ${kpi.color} hover:scale-[1.02] transition-transform`}>
<CardContent className="p-5 flex flex-col gap-2">
@@ -77,10 +88,12 @@ export default function StrategyPage() {
<div className="flex items-center gap-2 mb-5">
<AlertTriangle size={20} className="text-amber-400" />
<h3 className="text-lg font-extrabold tracking-tight">Negative Marking Analysis</h3>
<span className="ml-auto text-xs text-muted-foreground font-semibold">Last Mock Test · Aug 1</span>
<span className="ml-auto text-xs text-muted-foreground font-semibold">
{isDemo ? "Last Mock Test · Aug 1" : "Day 1 Initializing"}
</span>
</div>
<div className="space-y-4">
{NEG_MARKING_DATA.map((row) => (
{negMarkingData.map((row) => (
<div key={row.subject} className="grid grid-cols-4 gap-4 items-center p-3 rounded-xl bg-white/5 border border-border/40">
<div className="font-black text-sm">{row.subject}</div>
<div className="text-center">
@@ -88,17 +101,19 @@ export default function StrategyPage() {
<div className="text-[11px] text-muted-foreground font-semibold">Attempted</div>
</div>
<div className="text-center">
<div className="text-sm font-black text-red-400">−{row.negMarks}</div>
<div className="text-sm font-black text-red-400">{row.negMarks === 0 ? "0" : `−${row.negMarks}`}</div>
<div className="text-[11px] text-muted-foreground font-semibold">Neg. Marks</div>
</div>
<div>
<div className="flex justify-between text-xs font-bold mb-1">
<span className="text-muted-foreground">Accuracy</span>
<span className={row.accuracy >= 75 ? "text-green-400" : row.accuracy >= 60 ? "text-amber-400" : "text-red-400"}>{row.accuracy}%</span>
<span className={row.accuracy >= 75 ? "text-green-400" : row.accuracy >= 60 ? "text-amber-400" : row.accuracy === 0 ? "text-muted-foreground" : "text-red-400"}>
{row.accuracy}%
</span>
</div>
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
<div
className={`h-full rounded-full ${row.accuracy >= 75 ? "bg-green-400" : row.accuracy >= 60 ? "bg-amber-400" : "bg-red-400"}`}
className={`h-full rounded-full ${row.accuracy >= 75 ? "bg-green-400" : row.accuracy >= 60 ? "bg-amber-400" : isDemo ? "bg-red-400" : "bg-white/10"}`}
style={{ width: `${row.accuracy}%` }}
/>
</div>
@@ -107,7 +122,11 @@ export default function StrategyPage() {
))}
</div>
<p className="text-xs text-muted-foreground mt-4 font-medium pl-1">
<span className="font-black text-amber-400">Insight:</span> You&apos;re losing ~29 marks to wrong answers. Switching to &quot;skip and revisit&quot; for uncertain Physics questions could recover 15–20 marks.
<span className="font-black text-amber-400">Insight:</span> {isDemo ? (
<>You&apos;re losing ~29 marks to wrong answers. Switching to &quot;skip and revisit&quot; for uncertain Physics questions could recover 15–20 marks.</>
) : (
<>Complete your first mock test or timed DPP to calculate your negative marking profile and fine-tune your subject pacing.</>
)}
</p>
</Card>