chore: Secure routes with auth middleware, update text and fix minor bugs
This commit is contained in:
@@ -1,24 +1,156 @@
|
||||
"use client"
|
||||
|
||||
import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
|
||||
import { ArrowLeft, Flame } from "lucide-react"
|
||||
import { Flame, AlertTriangle, TrendingDown, BookOpen, ArrowRight, BarChart2, Target } from "lucide-react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import Link from "next/link"
|
||||
|
||||
const 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" },
|
||||
{ name: "GOC — Reaction Mechanisms", rate: "55%", rateNum: 55, subject: "Chemistry" },
|
||||
{ name: "Thermodynamics", rate: "25%", rateNum: 25, subject: "Physics" },
|
||||
]
|
||||
|
||||
const 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" },
|
||||
]
|
||||
|
||||
export default function HeatmapPage() {
|
||||
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 */}
|
||||
<div className="border-b border-border/50 pb-6">
|
||||
<h1 className="text-3xl md:text-5xl font-black tracking-tight flex items-center gap-3">
|
||||
<Flame className="text-yellow-500" size={36} />
|
||||
Mistake Heatmap Vault
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-base md:text-lg mt-1 font-medium max-w-3xl">
|
||||
Visual representation of your error density across subjects and topics.
|
||||
</p>
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
|
||||
<span className="p-2.5 rounded-xl bg-amber-500/10 border border-amber-500/20">
|
||||
<Flame className="text-amber-500" size={28} />
|
||||
</span>
|
||||
Mistake Heatmap Vault
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
|
||||
Visual density map of your errors across subjects and topics — pinpoint your weakest areas instantly.
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-amber-500 bg-amber-500/10 border border-amber-500/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
|
||||
<AlertTriangle size={12} /> Error Density Analysis
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<MistakeHeatmap />
|
||||
{/* KPI Strip */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{SUMMARY_STATS.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}
|
||||
<div className="text-2xl font-black">{kpi.value}</div>
|
||||
<div className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">{kpi.label}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Legend / Guidance Row */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: "Critical (> 50%)", color: "bg-red-500/20 border-red-500/30 text-red-400", dot: "bg-red-500", desc: "Immediate revision needed" },
|
||||
{ label: "Warning (30–50%)", color: "bg-amber-500/20 border-amber-500/30 text-amber-400", dot: "bg-amber-500", desc: "Focus on these next" },
|
||||
{ label: "Moderate (10–30%)", color: "bg-yellow-500/20 border-yellow-500/30 text-yellow-400", dot: "bg-yellow-500", desc: "Review periodically" },
|
||||
{ label: "Good (< 10%)", color: "bg-green-500/20 border-green-500/30 text-green-400", dot: "bg-green-500", desc: "Mostly understood" },
|
||||
].map((item) => (
|
||||
<Card key={item.label} className={`rounded-2xl border ${item.color.split(" ").slice(0, 2).join(" ")}`}>
|
||||
<CardContent className="p-4">
|
||||
<div className={`inline-flex items-center gap-1.5 text-xs font-black uppercase tracking-wider mb-1 ${item.color.split(" ")[2]}`}>
|
||||
<span className={`w-2.5 h-2.5 rounded-sm ${item.dot}`} />
|
||||
{item.label}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground font-medium">{item.desc}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Main 2-col layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Heatmap — takes 2/3 */}
|
||||
<div className="lg:col-span-2 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
|
||||
<TrendingDown size={16} className="text-red-400" />
|
||||
Topic Error Rate — Last 5 Tests
|
||||
</div>
|
||||
<MistakeHeatmap />
|
||||
</div>
|
||||
|
||||
{/* Side panel */}
|
||||
<div className="space-y-6">
|
||||
{/* Error frequency chart */}
|
||||
<Card className="bg-secondary/10 border-border/60 rounded-2xl">
|
||||
<CardContent className="p-5 space-y-4">
|
||||
<h3 className="text-sm font-black uppercase tracking-wider text-foreground flex items-center gap-2">
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Action card */}
|
||||
<Card className="bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/20 rounded-2xl">
|
||||
<CardContent className="p-5 space-y-3">
|
||||
<h3 className="text-sm font-black uppercase tracking-wider text-[#00F0FF]">What To Do Next</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ label: "Start Mistake Review Session", href: "/dashboard/ai-coach/mistakes" },
|
||||
{ label: "Take a Physics DPP", href: "/dashboard/ai-coach/cbt-dpp" },
|
||||
{ label: "Check Exam Readiness Score", href: "/dashboard/ai-coach/readiness" },
|
||||
].map((link) => (
|
||||
<Link key={link.href} href={link.href}
|
||||
className="flex items-center justify-between text-sm font-bold text-muted-foreground hover:text-foreground py-2 border-b border-border/30 last:border-0 transition-colors group">
|
||||
{link.label}
|
||||
<ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Tip */}
|
||||
<Card className="bg-secondary/20 border-border/40 rounded-2xl">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<BookOpen size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
|
||||
<p className="text-xs text-muted-foreground font-medium">
|
||||
<span className="font-black text-foreground">Pro Tip:</span> Focus the next 3 days entirely on Rotational Dynamics — it alone is worth 8–12 marks in JEE and shows an 80% error rate across your last 5 tests.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user