feat: complete comprehensive zero-state metrics across all dashboard pages for new accounts
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user