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

67
src/app/dashboard/ai-coach/heatmap/page.tsx
View File

@@ -1,11 +1,12 @@
"use client"
import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
import { Flame, AlertTriangle, TrendingDown, BookOpen, ArrowRight, BarChart2, Target } from "lucide-react"
import { Flame, AlertTriangle, TrendingDown, BookOpen, ArrowRight, BarChart2, Target, CheckCircle2 } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
const CRITICAL_TOPICS = [
const DEMO_CRITICAL_TOPICS = [
{ name: "Rotational Dynamics", rate: "80%", rateNum: 80, subject: "Physics" },
{ name: "Optics", rate: "60%", rateNum: 60, subject: "Physics" },
{ name: "Electromagnetism", rate: "30%", rateNum: 30, subject: "Physics" },
@@ -13,14 +14,26 @@ const CRITICAL_TOPICS = [
{ name: "Thermodynamics", rate: "25%", rateNum: 25, subject: "Physics" },
]
const SUMMARY_STATS = [
const DEMO_SUMMARY_STATS = [
{ label: "Total Errors (Last 5 Tests)", value: "87", icon: <AlertTriangle size={18} className="text-red-400" />, color: "border-red-400/20 bg-red-400/5" },
{ label: "Critical Topics", value: "4", icon: <Flame size={18} className="text-orange-400" />, color: "border-orange-400/20 bg-orange-400/5" },
{ label: "Improving Topics", value: "3", icon: <TrendingDown size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
{ label: "Avg Error Rate", value: "38%", icon: <Target size={18} className="text-amber-400" />, color: "border-amber-400/20 bg-amber-400/5" },
]
const ZERO_SUMMARY_STATS = [
{ label: "Total Errors (Last 5 Tests)", value: "0", icon: <AlertTriangle size={18} className="text-muted-foreground" />, color: "border-white/10 bg-white/5" },
{ label: "Critical Topics", value: "0", icon: <Flame size={18} className="text-muted-foreground" />, color: "border-white/10 bg-white/5" },
{ label: "Improving Topics", value: "0", icon: <TrendingDown size={18} className="text-muted-foreground" />, color: "border-white/10 bg-white/5" },
{ label: "Avg Error Rate", value: "0%", icon: <Target size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
]
export default function HeatmapPage() {
const { userId } = useActiveUser()
const isDemo = isDemoUser(userId)
const summaryStats = isDemo ? DEMO_SUMMARY_STATS : ZERO_SUMMARY_STATS
const criticalTopics = isDemo ? DEMO_CRITICAL_TOPICS : []
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 */}
@@ -45,7 +58,7 @@ export default function HeatmapPage() {
{/* KPI Strip */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{SUMMARY_STATS.map((kpi) => (
{summaryStats.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">
{kpi.icon}
@@ -96,25 +109,35 @@ export default function HeatmapPage() {
<BarChart2 size={15} className="text-red-400" /> Priority Topics by Error Rate
</h3>
<div className="space-y-3">
{CRITICAL_TOPICS.map((t) => (
<div key={t.name}>
<div className="flex items-center justify-between mb-1">
<div>
<p className="text-xs font-bold leading-tight">{t.name}</p>
<p className="text-[11px] text-muted-foreground">{t.subject}</p>
</div>
<span className={`text-xs font-black px-2 py-0.5 rounded-md ${t.rateNum >= 50 ? "text-red-400 bg-red-400/10" : t.rateNum >= 30 ? "text-amber-400 bg-amber-400/10" : "text-yellow-400 bg-yellow-400/10"}`}>
{t.rate}
</span>
</div>
<div className="h-1.5 w-full bg-secondary rounded-full overflow-hidden">
<div
className={`h-full rounded-full ${t.rateNum >= 50 ? "bg-red-500" : t.rateNum >= 30 ? "bg-amber-500" : "bg-yellow-500"}`}
style={{ width: `${t.rateNum}%` }}
/>
</div>
{criticalTopics.length === 0 ? (
<div className="p-5 rounded-xl bg-white/5 border border-border/40 text-center space-y-1.5">
<CheckCircle2 size={24} className="mx-auto text-green-400 opacity-80" />
<p className="text-xs font-bold text-foreground">Clean Error Log</p>
<p className="text-[11px] text-muted-foreground">
No mistake hotspots detected yet. Practice questions to see priority areas here.
</p>
</div>
))}
) : (
criticalTopics.map((t) => (
<div key={t.name}>
<div className="flex items-center justify-between mb-1">
<div>
<p className="text-xs font-bold leading-tight">{t.name}</p>
<p className="text-[11px] text-muted-foreground">{t.subject}</p>
</div>
<span className={`text-xs font-black px-2 py-0.5 rounded-md ${t.rateNum >= 50 ? "text-red-400 bg-red-400/10" : t.rateNum >= 30 ? "text-amber-400 bg-amber-400/10" : "text-yellow-400 bg-yellow-400/10"}`}>
{t.rate}
</span>
</div>
<div className="h-1.5 w-full bg-secondary rounded-full overflow-hidden">
<div
className={`h-full rounded-full ${t.rateNum >= 50 ? "bg-red-500" : t.rateNum >= 30 ? "bg-amber-500" : "bg-yellow-500"}`}
style={{ width: `${t.rateNum}%` }}
/>
</div>
</div>
))
)}
</div>
</CardContent>
</Card>