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

37
src/components/AI/MistakeHeatmap.tsx
View File

@@ -1,6 +1,9 @@
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Flame, Info } from "lucide-react"
import { Flame, Info, CheckCircle2 } from "lucide-react"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
const HEATMAP_DATA = [
{ topic: "Rotational Dynamics", attempts: [80, 90, 40, 20, 10] }, // 10 is critical error rate
@@ -10,14 +13,26 @@ const HEATMAP_DATA = [
{ topic: "Modern Physics", attempts: [10, 5, 2, 0, 0] }
];
const ZERO_HEATMAP_DATA = [
{ topic: "Physics (Core Mechanics)", attempts: [0, 0, 0, 0, 0] },
{ topic: "Chemistry (Physical & Organic)", attempts: [0, 0, 0, 0, 0] },
{ topic: "Mathematics / Biology", attempts: [0, 0, 0, 0, 0] },
];
export function MistakeHeatmap() {
const { userId } = useActiveUser();
const isDemo = isDemoUser(userId);
const getColor = (errorRate: number) => {
if (errorRate === 0) return 'bg-white/5 border-white/10 text-muted-foreground';
if (errorRate >= 50) return 'bg-red-500/80 border-red-500 shadow-[0_0_10px_-2px_rgba(239,68,68,0.5)]'; // Critical
if (errorRate >= 30) return 'bg-amber-500/60 border-amber-500'; // Warning
if (errorRate >= 10) return 'bg-yellow-500/30 border-yellow-500/50'; // Moderate
return 'bg-green-500/20 border-green-500/30'; // Good
};
const rows = isDemo ? HEATMAP_DATA : ZERO_HEATMAP_DATA;
return (
<Card className="border-border bg-background shadow-sm h-full min-h-[540px] flex flex-col justify-between">
<CardHeader className="pb-4">
@@ -28,7 +43,9 @@ export function MistakeHeatmap() {
</CardTitle>
<Info size={16} className="text-muted-foreground" />
</div>
<p className="text-sm text-muted-foreground">Topic-wise error rate across last 5 tests.</p>
<p className="text-sm text-muted-foreground">
{isDemo ? "Topic-wise error rate across last 5 tests." : "Topic-wise error rate across your recent test sessions."}
</p>
</CardHeader>
<CardContent className="flex-1 p-4 md:p-6 flex flex-col justify-between">
<div className="w-full">
@@ -46,7 +63,7 @@ export function MistakeHeatmap() {
{/* Data rows */}
<div className="space-y-3">
{HEATMAP_DATA.map((row, idx) => (
{rows.map((row, idx) => (
<div key={idx} className="flex items-center group">
<div className="w-32 sm:w-36 md:w-40 shrink-0 text-xs sm:text-sm md:text-base font-bold truncate pr-2 group-hover:text-primary transition-colors" title={row.topic}>
{row.topic}
@@ -65,11 +82,22 @@ export function MistakeHeatmap() {
</div>
))}
</div>
{!isDemo && (
<div className="mt-6 p-4 rounded-xl bg-secondary/30 border border-border/50 text-center space-y-1">
<div className="flex items-center justify-center gap-1.5 text-xs font-bold text-green-400">
<CheckCircle2 size={14} /> Clean Slate · 0 Errors Recorded
</div>
<p className="text-[11px] text-muted-foreground">
As you attempt DPPs and CBT mock tests, questions you get wrong will automatically be tracked and heatmapped here.
</p>
</div>
)}
</div>
{/* Legend */}
<div className="mt-6 pt-4 border-t border-border/50 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs font-bold text-muted-foreground">
<div className="flex items-center gap-1.5"><div className="size-3 rounded-sm bg-green-500/20 border border-green-500/30"></div> {"< 10%"}</div>
<div className="flex items-center gap-1.5"><div className="size-3 rounded-sm bg-green-500/20 border border-green-500/30"></div> {"0-10% (Optimal)"}</div>
<div className="flex items-center gap-1.5"><div className="size-3 rounded-sm bg-yellow-500/30 border border-yellow-500/50"></div> {"10-30%"}</div>
<div className="flex items-center gap-1.5"><div className="size-3 rounded-sm bg-amber-500/60 border border-amber-500"></div> {"30-50%"}</div>
<div className="flex items-center gap-1.5"><div className="size-3 rounded-sm bg-red-500/80 border border-red-500"></div> {"> 50%"}</div>
@@ -78,3 +106,4 @@ export function MistakeHeatmap() {
</Card>
)
}