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,22 +4,42 @@ import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
import { Target, TrendingUp, Calendar, Zap, ArrowRight, BookOpen, CheckCircle2 } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
const STATS = [
const DEMO_STATS = [
{ label: "Avg. Accuracy", value: "85%", delta: "+6%", positive: true },
{ label: "Days Active", value: "7 / 7", delta: "Perfect week", positive: true },
{ label: "Questions Solved", value: "214", delta: "+38 vs last week", positive: true },
{ label: "Topics Covered", value: "12", delta: "3 remaining", positive: false },
]
const SYLLABUS_PROGRESS = [
const ZERO_STATS = [
{ label: "Avg. Accuracy", value: "0%", delta: "Baseline", positive: true },
{ label: "Days Active", value: "0 / 7", delta: "Day 1 Active", positive: true },
{ label: "Questions Solved", value: "0", delta: "0 vs last week", positive: true },
{ label: "Topics Covered", value: "0", delta: "0 completed", positive: false },
]
const DEMO_SYLLABUS_PROGRESS = [
{ subject: "Physics", completed: 42, total: 60, percentage: 70, color: "bg-blue-500", text: "text-blue-500" },
{ subject: "Chemistry", completed: 35, total: 55, percentage: 63, color: "bg-amber-500", text: "text-amber-500" },
{ subject: "Mathematics", completed: 50, total: 65, percentage: 76, color: "bg-purple-500", text: "text-purple-500" },
{ subject: "Biology", completed: 20, total: 40, percentage: 50, color: "bg-emerald-500", text: "text-emerald-500" },
]
const ZERO_SYLLABUS_PROGRESS = [
{ subject: "Physics", completed: 0, total: 60, percentage: 0, color: "bg-blue-500", text: "text-blue-500" },
{ subject: "Chemistry", completed: 0, total: 55, percentage: 0, color: "bg-amber-500", text: "text-amber-500" },
{ subject: "Mathematics", completed: 0, total: 65, percentage: 0, color: "bg-purple-500", text: "text-purple-500" },
{ subject: "Biology", completed: 0, total: 40, percentage: 0, color: "bg-emerald-500", text: "text-emerald-500" },
]
export default function WeeklyProgressPage() {
const { userId } = useActiveUser()
const isDemo = isDemoUser(userId)
const stats = isDemo ? DEMO_STATS : ZERO_STATS
const syllabusProgress = isDemo ? DEMO_SYLLABUS_PROGRESS : ZERO_SYLLABUS_PROGRESS
return (
<div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 animate-in fade-in duration-500 min-h-screen">
{/* Page Header */}
@@ -46,7 +66,7 @@ export default function WeeklyProgressPage() {
{/* KPI Stats Row */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
{STATS.map((stat) => (
{stats.map((stat) => (
<Card key={stat.label} className="bg-secondary/20 border-border/60 rounded-2xl">
<CardContent className="p-4">
<p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-1">{stat.label}</p>
@@ -80,7 +100,7 @@ export default function WeeklyProgressPage() {
</h2>
<Card className="bg-secondary/10 border-border/60 rounded-2xl">
<CardContent className="p-5 space-y-4">
{SYLLABUS_PROGRESS.map((item) => (
{syllabusProgress.map((item) => (
<div key={item.subject} className="space-y-1.5">
<div className="flex items-center justify-between text-sm">
<span className="font-bold">{item.subject}</span>
@@ -107,10 +127,14 @@ export default function WeeklyProgressPage() {
<h3 className="text-sm font-black uppercase tracking-wider text-[#00F0FF]">Weekly Goals</h3>
<div className="space-y-2">
<div className="flex items-start gap-2 p-2 rounded-lg bg-white/5">
<CheckCircle2 size={16} className="text-green-400 mt-0.5 shrink-0" />
{isDemo ? (
<CheckCircle2 size={16} className="text-green-400 mt-0.5 shrink-0" />
) : (
<div className="w-4 h-4 rounded-full border-2 border-muted-foreground mt-0.5 shrink-0" />
)}
<div>
<div className="text-xs font-bold">Complete 200 Questions</div>
<div className="text-[10px] text-muted-foreground">Goal Met (214/200)</div>
<div className="text-[10px] text-muted-foreground">{isDemo ? "Goal Met (214/200)" : "Pending (0/200)"}</div>
</div>
</div>
<div className="flex items-start gap-2 p-2 rounded-lg bg-white/5 opacity-70">