feat: complete pragativeer v2 frontend and backend, docker setup, and cbt engine

src/components/AI/MistakeHeatmap.tsx

@@ -0,0 +1,80 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Flame, Info } from "lucide-react"
+
+const HEATMAP_DATA = [
+  { topic: "Rotational Dynamics", attempts: [80, 90, 40, 20, 10] }, // 10 is critical error rate
+  { topic: "Electromagnetism", attempts: [30, 25, 20, 15, 10] },
+  { topic: "Thermodynamics", attempts: [5, 10, 5, 2, 0] },
+  { topic: "Optics", attempts: [60, 50, 45, 60, 55] },
+  { topic: "Modern Physics", attempts: [10, 5, 2, 0, 0] }
+];
+
+export function MistakeHeatmap() {
+  const getColor = (errorRate: number) => {
+    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
+  };
+
+  return (
+    <Card className="border-border bg-background shadow-sm h-full flex flex-col">
+      <CardHeader className="pb-4">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-xl flex items-center gap-2">
+            <Flame className="text-orange-500" /> Mistake Heatmap
+          </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>
+      </CardHeader>
+      <CardContent className="flex-1">
+        <div className="overflow-x-auto">
+          <div className="min-w-[400px]">
+            {/* Header row */}
+            <div className="flex mb-2">
+              <div className="w-40 shrink-0 text-xs font-bold text-muted-foreground uppercase tracking-wider">Topic</div>
+              <div className="flex-1 flex justify-between text-xs font-bold text-muted-foreground uppercase tracking-wider text-center">
+                <span>T-4</span>
+                <span>T-3</span>
+                <span>T-2</span>
+                <span>T-1</span>
+                <span>Latest</span>
+              </div>
+            </div>
+            
+            {/* Data rows */}
+            <div className="space-y-3">
+              {HEATMAP_DATA.map((row, idx) => (
+                <div key={idx} className="flex items-center group">
+                  <div className="w-40 shrink-0 text-sm font-medium truncate pr-2 group-hover:text-primary transition-colors">
+                    {row.topic}
+                  </div>
+                  <div className="flex-1 flex justify-between gap-1">
+                    {row.attempts.map((errRate, i) => (
+                      <div 
+                        key={i} 
+                        className={`flex-1 h-8 rounded-md border transition-all duration-300 group-hover:scale-105 flex items-center justify-center cursor-help relative ${getColor(errRate)}`}
+                        title={`Error Rate: ${errRate}%`}
+                      >
+                        <span className="opacity-0 group-hover:opacity-100 text-[10px] font-bold text-foreground absolute">{errRate}%</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        
+        {/* Legend */}
+        <div className="mt-6 flex items-center justify-center gap-4 text-xs font-medium 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-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>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}