naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ectasy663
2026-09-13 22:17:40 +05:30
parent d9bd142e6a
commit afab06d33c
22 changed files with 771 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/dashboard/ai-coach/readiness/page.tsx
View File

@@ -5,8 +5,9 @@ import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Gauge, TrendingUp, Target, Award, ShieldAlert, CheckCircle2, BookOpen, Zap, BarChart2, Clock } from "lucide-react"
import Link from "next/link"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
const SCORE_HISTORY = [
const DEMO_SCORE_HISTORY = [
{ week: "Wk 1", score: 54 },
{ week: "Wk 2", score: 60 },
{ week: "Wk 3", score: 63 },
@@ -15,8 +16,20 @@ const SCORE_HISTORY = [
{ week: "Wk 6", score: 78 },
]
const ZERO_SCORE_HISTORY = [
{ week: "Wk 1", score: 0 },
{ week: "Wk 2", score: 0 },
{ week: "Wk 3", score: 0 },
{ week: "Wk 4", score: 0 },
{ week: "Wk 5", score: 0 },
{ week: "Wk 6", score: 0 },
]
export default function ReadinessPage() {
const maxScore = Math.max(...SCORE_HISTORY.map(d => d.score))
const { userId } = useActiveUser()
const isDemo = isDemoUser(userId)
const scoreHistory = isDemo ? DEMO_SCORE_HISTORY : ZERO_SCORE_HISTORY
const maxScore = Math.max(1, ...scoreHistory.map(d => d.score))
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">
@@ -43,16 +56,16 @@ export default function ReadinessPage() {
{/* KPI Strip */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[
{ label: "Overall Score", value: "72 / 100", trend: "+5 this week", trendUp: true, icon: <Gauge size={20} className="text-[#00F0FF]" /> },
{ label: "Accuracy Rate", value: "88%", trend: "+3% vs last week", trendUp: true, icon: <Target size={20} className="text-amber-400" /> },
{ label: "Avg Speed / Q", value: "45 sec", trend: "↓ Needs work", trendUp: false, icon: <Clock size={20} className="text-red-400" /> },
{ label: "Syllabus Covered", value: "64%", trend: "+8% this month", trendUp: true, icon: <BookOpen size={20} className="text-emerald-400" /> },
{ label: "Overall Score", value: isDemo ? "72 / 100" : "0 / 100", trend: isDemo ? "+5 this week" : "Baseline", trendUp: true, icon: <Gauge size={20} className="text-[#00F0FF]" /> },
{ label: "Accuracy Rate", value: isDemo ? "88%" : "0%", trend: isDemo ? "+3% vs last week" : "0 attempts", trendUp: isDemo, icon: <Target size={20} className="text-amber-400" /> },
{ label: "Avg Speed / Q", value: isDemo ? "45 sec" : "-- sec", trend: isDemo ? "↓ Needs work" : "Not tested", trendUp: false, icon: <Clock size={20} className="text-red-400" /> },
{ label: "Syllabus Covered", value: isDemo ? "64%" : "0%", trend: isDemo ? "+8% this month" : "Day 1", trendUp: true, icon: <BookOpen size={20} className="text-emerald-400" /> },
].map((kpi) => (
<Card key={kpi.label} className="border-border/60 bg-secondary/10 rounded-2xl hover:border-[#00F0FF]/30 transition-colors">
<CardContent className="p-5">
<div className="flex items-center justify-between mb-3">
{kpi.icon}
<span className={`text-xs font-bold px-2 py-0.5 rounded-full ${kpi.trendUp ? "bg-green-500/10 text-green-400" : "bg-red-500/10 text-red-400"}`}>
<span className={`text-xs font-bold px-2 py-0.5 rounded-full ${kpi.trendUp ? "bg-green-500/10 text-green-400" : "bg-white/5 text-muted-foreground"}`}>
{kpi.trend}
</span>
</div>
@@ -70,7 +83,9 @@ export default function ReadinessPage() {
<div className="flex items-center gap-2 mb-5">
<Award className="text-amber-400" size={22} />
<h2 className="text-xl font-extrabold tracking-tight">Composite Readiness Index</h2>
<span className="ml-auto text-xs font-bold text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-2.5 py-1 rounded-full">Updated Daily</span>
<span className="ml-auto text-xs font-bold text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-2.5 py-1 rounded-full">
{isDemo ? "Updated Daily" : "Day 1 Initializing"}
</span>
</div>
<ReadinessGauge />
</Card>
@@ -83,9 +98,9 @@ export default function ReadinessPage() {
</div>
<div className="space-y-4">
{[
{ subject: "Biology / Maths", score: 82, color: "bg-[#00F0FF]", status: "High Readiness", statusColor: "text-[#00F0FF]" },
{ subject: "Chemistry", score: 74, color: "bg-amber-400", status: "Moderate Readiness", statusColor: "text-amber-400" },
{ subject: "Physics", score: 61, color: "bg-red-400", status: "Needs Intensive Drill", statusColor: "text-red-400" },
{ subject: "Biology / Maths", score: isDemo ? 82 : 0, color: "bg-[#00F0FF]", status: isDemo ? "High Readiness" : "Not Started", statusColor: isDemo ? "text-[#00F0FF]" : "text-muted-foreground" },
{ subject: "Chemistry", score: isDemo ? 74 : 0, color: "bg-amber-400", status: isDemo ? "Moderate Readiness" : "Not Started", statusColor: isDemo ? "text-amber-400" : "text-muted-foreground" },
{ subject: "Physics", score: isDemo ? 61 : 0, color: "bg-red-400", status: isDemo ? "Needs Intensive Drill" : "Not Started", statusColor: isDemo ? "text-red-400" : "text-muted-foreground" },
].map((sub) => (
<div key={sub.subject} className="space-y-2">
<div className="flex justify-between items-center">
@@ -107,12 +122,18 @@ export default function ReadinessPage() {
<h3 className="text-lg font-extrabold tracking-tight">6-Week Readiness Trend</h3>
</div>
<div className="flex items-end gap-3 h-28">
{SCORE_HISTORY.map((d, i) => (
{scoreHistory.map((d, i) => (
<div key={d.week} className="flex flex-col items-center gap-1 flex-1">
<span className="text-xs font-black text-muted-foreground">{d.score}</span>
<div
className={`w-full rounded-t-md transition-all duration-700 ${i === SCORE_HISTORY.length - 1 ? "bg-gradient-to-t from-[#00F0FF]/60 to-[#00F0FF]" : "bg-gradient-to-t from-white/10 to-white/25"}`}
style={{ height: `${(d.score / maxScore) * 80}px` }}
className={`w-full rounded-t-md transition-all duration-700 ${
!isDemo
? "bg-white/5 border border-white/10"
: i === scoreHistory.length - 1
? "bg-gradient-to-t from-[#00F0FF]/60 to-[#00F0FF]"
: "bg-gradient-to-t from-white/10 to-white/25"
}`}
style={{ height: isDemo ? `${(d.score / maxScore) * 80}px` : "4px" }}
/>
<span className="text-xs text-muted-foreground font-semibold">{d.week}</span>
</div>
@@ -130,19 +151,19 @@ export default function ReadinessPage() {
<ul className="space-y-3.5 text-sm font-semibold text-muted-foreground">
<li className="flex items-start gap-2.5">
<CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
<span>Complete 2 full-length mock tests this week to boost consistency score.</span>
<span>{isDemo ? "Complete 2 full-length mock tests this week to boost consistency score." : "Complete your first diagnostic test to calculate your initial readiness baseline."}</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
<span>Clear 15 pending errors in your Physics queue to gain ~4 readiness points.</span>
<span>{isDemo ? "Clear 15 pending errors in your Physics queue to gain ~4 readiness points." : "Attempt daily DPPs to populate your question error log."}</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
<span>Maintain a 7+ day streak — consistency adds 6% to your readiness index.</span>
<span>Maintain daily streak — consistency adds directly to your readiness algorithm.</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
<span>Reduce avg time-per-question below 40s with daily timed DPP sessions.</span>
<span>Target under 45s per question in timed test series practice.</span>
</li>
</ul>
</Card>