feat: setup admin JSON generation and pdf viewer for free plan DPPs

src/app/dashboard/ai-coach/cbt-dpp/[id]/page.tsx

@@ -0,0 +1,289 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { BrainCircuit, Clock, CheckCircle2, AlertTriangle, ArrowLeft, ArrowRight, ShieldAlert, Sparkles, Send } from "lucide-react"
+import Link from "next/link"
+import { useActiveUser } from "@/hooks/useActiveUser"
+import { useRouter } from "next/navigation"
+
+export default function AIComCBTDPPPage() {
+  const { user, hasAccessTo, loading } = useActiveUser()
+  const router = useRouter()
+
+  const [activeQuestion, setActiveQuestion] = useState(0)
+  const [selectedAnswers, setSelectedAnswers] = useState<Record<number, string>>({})
+  const [timeLeft, setTimeLeft] = useState(1800) // 30 minutes
+  const [submitted, setSubmitted] = useState(false)
+
+  // Mock AI CBT DPP questions
+  const sampleQuestions = [
+    {
+      id: 1,
+      subject: "Physics",
+      topic: "Rotational Dynamics & Torque",
+      question: "A uniform disc of mass M and radius R rotates about an axis passing through its center and perpendicular to its plane. Its moment of inertia about a tangent parallel to its plane is:",
+      options: ["(1/2) M R²", "(5/4) M R²", "(3/2) M R²", "(7/4) M R²"],
+      correct: 1,
+      explanation: "Using parallel axis theorem: I_tangent = I_cm + M R^2 = (1/4 M R^2) + M R^2 = 5/4 M R^2."
+    },
+    {
+      id: 2,
+      subject: "Chemistry",
+      topic: "Chemical Equilibrium & Kp/Kc",
+      question: "For the reaction N2(g) + 3H2(g) ⇌ 2NH3(g), the value of Kp / Kc at temperature T Kelvin is given by:",
+      options: ["(RT)⁻²", "(RT)⁻¹", "(RT)", "(RT)²"],
+      correct: 0,
+      explanation: "Δn_g = 2 - (1 + 3) = -2. Therefore, Kp = Kc (RT)^(-2), so Kp / Kc = (RT)^(-2)."
+    },
+    {
+      id: 3,
+      subject: "Biology / Maths",
+      topic: "Calculus / Cell Biology",
+      question: "Which organelle is responsible for the synthesis of lipids and steroidal hormones in eukaryotic cells?",
+      options: ["Rough Endoplasmic Reticulum", "Smooth Endoplasmic Reticulum", "Golgi Apparatus", "Lysosome"],
+      correct: 1,
+      explanation: "Smooth Endoplasmic Reticulum (SER) is the primary site for synthesis of lipids and steroid hormones."
+    },
+    {
+      id: 4,
+      subject: "Physics",
+      topic: "Electrostatics & Potential",
+      question: "Two point charges +q and -q are placed at distance 2a. The electric potential at the midpoint of the line joining them is:",
+      options: ["Zero", "q / (4πε₀a)", "2q / (4πε₀a)", "Infinity"],
+      correct: 0,
+      explanation: "V_total = V_+q + V_-q = (q / 4πε₀a) + (-q / 4πε₀a) = 0."
+    },
+    {
+      id: 5,
+      subject: "Chemistry",
+      topic: "Organic Mechanism & Nucleophiles",
+      question: "Which of the following undergoes SN1 reaction at the fastest rate?",
+      options: ["Methyl chloride", "Ethyl chloride", "Isopropyl chloride", "Tert-butyl chloride"],
+      correct: 3,
+      explanation: "SN1 rate depends on carbocation stability. Tert-butyl carbocation (3°) is the most stable."
+    }
+  ]
+
+  useEffect(() => {
+    if (submitted || timeLeft <= 0) return
+    const timer = setInterval(() => {
+      setTimeLeft(prev => Math.max(0, prev - 1))
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [submitted, timeLeft])
+
+  const formatTime = (secs: number) => {
+    const m = Math.floor(secs / 60)
+    const s = secs % 60
+    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+  }
+
+  const handleOptionSelect = (qIdx: number, optIdx: number) => {
+    if (submitted) return
+    setSelectedAnswers(prev => ({ ...prev, [qIdx]: String.fromCharCode(65 + optIdx) }))
+  }
+
+  const calculateScore = () => {
+    let score = 0
+    sampleQuestions.forEach((q, idx) => {
+      const selected = selectedAnswers[idx]
+      if (selected) {
+        const selectedOptIdx = selected.charCodeAt(0) - 65
+        if (selectedOptIdx === q.correct) score += 4
+        else score -= 1
+      }
+    })
+    return score
+  }
+
+  if (loading) {
+    return <div className="p-8 text-center text-muted-foreground">Loading AI Coach CBT Engine...</div>
+  }
+
+  return (
+    <div className="p-6 md:p-8 space-y-6 max-w-6xl mx-auto min-h-screen animate-in fade-in duration-500">
+      {/* Top Header */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-secondary/20 border border-border p-6 rounded-3xl backdrop-blur-xl">
+        <div className="flex items-center gap-4">
+          <Link href="/dashboard/dpp">
+            <Button variant="outline" size="icon" className="rounded-xl border-border hover:bg-secondary">
+              <ArrowLeft size={18} />
+            </Button>
+          </Link>
+          <div>
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-xs font-black uppercase tracking-widest text-[#00F0FF] bg-[#00F0FF]/10 px-2.5 py-0.5 rounded-full border border-[#00F0FF]/30">
+                AI CBT DPP Simulator
+              </span>
+              <span className="text-xs font-bold text-muted-foreground">• {user?.target_exam?.replace("_", " ") || "JEE/NEET"}</span>
+            </div>
+            <h1 className="text-2xl font-black tracking-tight">Interactive Target DPP #14</h1>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 px-4 py-2 bg-background border border-border rounded-2xl font-mono text-lg font-bold text-[#00F0FF] shadow-inner">
+            <Clock size={18} className="text-[#00F0FF] animate-pulse" />
+            {formatTime(timeLeft)}
+          </div>
+          {!submitted ? (
+            <Button 
+              onClick={() => setSubmitted(true)}
+              className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold px-6 rounded-xl shadow-[0_0_15px_rgba(0,240,255,0.2)]"
+            >
+              Submit Test <Send size={16} className="ml-2" />
+            </Button>
+          ) : (
+            <Button 
+              onClick={() => { setSubmitted(false); setSelectedAnswers({}); setTimeLeft(1800); setActiveQuestion(0) }}
+              variant="outline"
+              className="font-bold rounded-xl border-border"
+            >
+              Retake CBT DPP
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {submitted && (
+        <Card className="border-emerald-500/30 bg-emerald-500/10 p-6 rounded-3xl space-y-4 animate-in zoom-in-95">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <CheckCircle2 size={32} className="text-emerald-400" />
+              <div>
+                <h3 className="text-xl font-black text-emerald-400">CBT DPP Completed!</h3>
+                <p className="text-xs text-muted-foreground">Your performance analysis has been evaluated by the AI Evaluator.</p>
+              </div>
+            </div>
+            <div className="text-right">
+              <span className="text-3xl font-black text-emerald-400">{calculateScore()} / 20</span>
+              <p className="text-xs text-muted-foreground font-bold">Total Marks</p>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Main CBT Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        {/* Question Area */}
+        <div className="lg:col-span-3">
+          <Card className="border-border bg-background/80 backdrop-blur-xl p-6 rounded-3xl shadow-xl space-y-6">
+            <div className="flex justify-between items-center border-b border-border pb-4">
+              <span className="text-sm font-bold text-[#00F0FF] uppercase tracking-wider">
+                Question {activeQuestion + 1} of {sampleQuestions.length}
+              </span>
+              <span className="text-xs font-bold bg-secondary px-3 py-1 rounded-full text-muted-foreground">
+                {sampleQuestions[activeQuestion].topic}
+              </span>
+            </div>
+
+            <div className="space-y-4">
+              <p className="text-lg font-bold leading-relaxed text-foreground">
+                {sampleQuestions[activeQuestion].question}
+              </p>
+
+              <div className="space-y-3 pt-2">
+                {sampleQuestions[activeQuestion].options.map((opt, optIdx) => {
+                  const letter = String.fromCharCode(65 + optIdx)
+                  const isSelected = selectedAnswers[activeQuestion] === letter
+                  const isCorrect = sampleQuestions[activeQuestion].correct === optIdx
+
+                  let btnStyle = "border-border bg-secondary/20 hover:border-primary/50 text-foreground"
+                  if (isSelected) {
+                    btnStyle = "border-[#00F0FF] bg-[#00F0FF]/15 text-[#00F0FF] font-bold shadow-[0_0_12px_rgba(0,240,255,0.15)]"
+                  }
+                  if (submitted) {
+                    if (isCorrect) btnStyle = "border-emerald-500 bg-emerald-500/20 text-emerald-400 font-bold"
+                    else if (isSelected && !isCorrect) btnStyle = "border-red-500 bg-red-500/20 text-red-400 font-bold"
+                  }
+
+                  return (
+                    <div
+                      key={optIdx}
+                      onClick={() => handleOptionSelect(activeQuestion, optIdx)}
+                      className={`flex items-center gap-4 p-4 rounded-2xl border cursor-pointer transition-all ${btnStyle}`}
+                    >
+                      <span className="w-8 h-8 rounded-xl bg-background/80 border border-border flex items-center justify-center font-bold text-sm shrink-0">
+                        {letter}
+                      </span>
+                      <span className="text-base font-medium flex-1">{opt}</span>
+                      {submitted && isCorrect && <CheckCircle2 size={20} className="text-emerald-400" />}
+                    </div>
+                  )
+                })}
+              </div>
+
+              {submitted && (
+                <div className="mt-6 p-4 rounded-2xl bg-[#00F0FF]/10 border border-[#00F0FF]/30 text-sm text-[#00F0FF] space-y-1 animate-in fade-in">
+                  <span className="font-extrabold uppercase text-xs tracking-wider block">AI Solution & Explanation:</span>
+                  <p>{sampleQuestions[activeQuestion].explanation}</p>
+                </div>
+              )}
+            </div>
+
+            {/* Navigation buttons */}
+            <div className="flex justify-between items-center pt-4 border-t border-border">
+              <Button
+                variant="outline"
+                disabled={activeQuestion === 0}
+                onClick={() => setActiveQuestion(prev => Math.max(0, prev - 1))}
+                className="rounded-xl font-bold border-border"
+              >
+                <ArrowLeft size={16} className="mr-2" /> Previous
+              </Button>
+              <Button
+                disabled={activeQuestion === sampleQuestions.length - 1}
+                onClick={() => setActiveQuestion(prev => Math.min(sampleQuestions.length - 1, prev + 1))}
+                className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold rounded-xl"
+              >
+                Next Question <ArrowRight size={16} className="ml-2" />
+              </Button>
+            </div>
+          </Card>
+        </div>
+
+        {/* Question Palette Sidebar */}
+        <div className="space-y-4">
+          <Card className="border-border bg-background/80 backdrop-blur-xl p-5 rounded-3xl shadow-xl space-y-4">
+            <h3 className="text-sm font-bold uppercase tracking-wider text-muted-foreground">Question Palette</h3>
+            <div className="grid grid-cols-5 gap-2">
+              {sampleQuestions.map((q, idx) => {
+                const isAns = !!selectedAnswers[idx]
+                const isCurr = activeQuestion === idx
+                return (
+                  <button
+                    key={q.id}
+                    onClick={() => setActiveQuestion(idx)}
+                    className={`h-10 rounded-xl text-xs font-extrabold transition-all border ${
+                      isCurr 
+                        ? "border-[#00F0FF] bg-[#00F0FF] text-black ring-2 ring-[#00F0FF]/50" 
+                        : isAns 
+                        ? "bg-[#00F0FF]/20 border-[#00F0FF]/40 text-[#00F0FF]" 
+                        : "bg-secondary/40 border-border text-muted-foreground hover:border-primary"
+                    }`}
+                  >
+                    {idx + 1}
+                  </button>
+                )
+              })}
+            </div>
+
+            <div className="pt-4 border-t border-border space-y-2 text-xs font-semibold text-muted-foreground">
+              <div className="flex items-center gap-2">
+                <span className="w-3 h-3 rounded-md bg-[#00F0FF]" /> Current Question
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="w-3 h-3 rounded-md bg-[#00F0FF]/20 border border-[#00F0FF]/40" /> Answered
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="w-3 h-3 rounded-md bg-secondary/40 border border-border" /> Unattempted
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/dashboard/ai-coach/cbt-dpp/page.tsx

@@ -0,0 +1,302 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { BrainCircuit, Play, CheckCircle2, Download, Filter, Lock, FileText, Eye, ShieldAlert, X, Sparkles } from "lucide-react"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { useActiveUser } from "@/hooks/useActiveUser"
+
+export default function PrepPilotAIPage() {
+  const { user, userId } = useActiveUser()
+  const [dpps, setDpps] = useState<any[]>([])
+  const [attempts, setAttempts] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+  const [dateFilter, setDateFilter] = useState("")
+  const [selectedPdfDpp, setSelectedPdfDpp] = useState<any | null>(null)
+
+  useEffect(() => {
+    async function fetchDpps() {
+      if (!user) return; // Wait for user to be available
+
+      try {
+        const pattern = user.target_exam || "JEE_Main";
+        // Also fetch from the correct Next.js proxied route instead of localhost:8000
+        const res = await fetch(`/api/tests?type=DPS&exam_pattern=${pattern}`);
+        if (res.ok) {
+          const data = await res.json()
+          setDpps(data)
+        }
+        
+        if (userId) {
+          const attemptsRes = await fetch(`/api/users/${userId}/attempts`);
+          if (attemptsRes.ok) {
+            const attemptsData = await attemptsRes.json();
+            setAttempts(attemptsData);
+          }
+        }
+      } catch (err) {
+        console.error("Failed to fetch DPPs", err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchDpps()
+  }, [user])
+
+  const getDifficultyColor = (diff: string) => {
+    switch(diff) {
+      case 'Easy': return 'text-emerald-500 bg-emerald-500/10 border-emerald-500/20';
+      case 'Medium': return 'text-amber-500 bg-amber-500/10 border-amber-500/20';
+      case 'Hard': return 'text-destructive bg-destructive/10 border-destructive/20';
+      default: return 'text-primary bg-primary/10 border-primary/20';
+    }
+  }
+
+  const attemptsByTest = attempts.reduce((acc, curr) => {
+    // Isolate analytics to first attempt only - ignore retakes
+    if (curr.is_retake) return acc;
+
+    if (!acc[curr.source_id] || acc[curr.source_id].score < curr.score) {
+      acc[curr.source_id] = curr;
+    }
+    return acc;
+  }, {} as Record<string, any>);
+
+  const filteredDpps = dpps.filter(dpp => {
+    if (dateFilter) {
+      if (!dpp.scheduled_date) return false;
+      const scheduledDate = new Date(dpp.scheduled_date).toISOString().split('T')[0];
+      if (scheduledDate !== dateFilter) return false;
+    }
+    return true;
+  });
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString("en-US", { year: 'numeric', month: 'short', day: 'numeric' });
+  }
+
+  const getPdfUrl = (title: string) => {
+    const t = title.toLowerCase();
+    if (t.includes('phys')) return '/dpps/dps-phy-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
+    if (t.includes('chem')) return '/dpps/dps-che-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
+    if (t.includes('math')) return '/dpps/dps-mth-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
+    if (t.includes('bio')) return '/dpps/dps-bio-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
+    // Default fallback
+    return '/dpps/dps-phy-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
+  };
+
+  return (
+    <div className="p-8 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-5xl mx-auto">
+      <div className="flex flex-col md:flex-row md:items-center justify-between p-8 bg-gradient-to-r from-secondary/50 to-background border border-border rounded-2xl shadow-sm gap-6">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight mb-2">PrepPilot AI <span className="text-[#00F0FF] text-xl">&</span> CBT Simulator</h1>
+          <p className="text-muted-foreground font-medium max-w-xl">
+            Select an interactive Target DPP to launch the AI-powered CBT examination simulator.
+          </p>
+        </div>
+      </div>
+
+      <div className="flex flex-col sm:flex-row justify-between items-center gap-4 border-b border-border pb-6">
+        <div className="flex items-center gap-2">
+          <input
+            type="date"
+            value={dateFilter}
+            onChange={(e) => setDateFilter(e.target.value)}
+            className="px-3 py-1.5 bg-background border border-border rounded-lg text-xs font-bold focus:ring-2 focus:ring-[#00F0FF] outline-none text-muted-foreground mr-2"
+          />
+          <span className="text-sm font-bold text-muted-foreground mr-2"><Filter size={16} className="inline mr-1"/> Difficulty:</span>
+          {['Mixed', 'Easy', 'Medium', 'Hard'].map((diff) => (
+            <button key={diff} className={`px-3 py-1.5 rounded-lg text-xs font-bold border transition-colors ${diff === 'Mixed' ? 'bg-primary text-primary-foreground border-primary' : 'bg-background text-muted-foreground border-border hover:border-primary/50'}`}>
+              {diff}
+            </button>
+          ))}
+          <div className="flex items-center gap-1 ml-2 text-xs text-muted-foreground bg-secondary/50 px-2 py-1 rounded-md">
+            <Lock size={12}/> Pro
+          </div>
+        </div>
+        <Button variant="outline" className="gap-2 rounded-xl text-sm font-bold">
+          <Download size={16} /> Export as PDF <span className="ml-1 text-[10px] uppercase tracking-wider bg-primary/10 text-primary px-1.5 py-0.5 rounded-md">Pro</span>
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {loading ? (
+          <div className="col-span-2 text-center py-12 text-muted-foreground">Loading AI-generated DPPs...</div>
+        ) : filteredDpps.length === 0 ? (
+          <div className="col-span-2 text-center py-12 text-muted-foreground border border-dashed rounded-xl">No DPPs available for the selected criteria.</div>
+        ) : filteredDpps.map((dpp, i) => {
+          // Calculate total questions dynamically from sections
+          let count = 0;
+          if (dpp.sections) {
+             Object.values(dpp.sections).forEach((s: any) => { count += (s.questions?.length || 0) });
+          }
+          
+          const attempt = attemptsByTest[dpp.id];
+          const isAttempted = !!attempt;
+          
+          // Date logic
+          const now = new Date();
+          const scheduledTime = dpp.scheduled_date ? new Date(dpp.scheduled_date) : now;
+          const endTime = dpp.end_date ? new Date(dpp.end_date) : null;
+          const isUpcoming = scheduledTime > now;
+          const isExpired = endTime ? now > endTime : false;
+
+          return (
+          <Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[#00F0FF]/50 bg-background'}`}>
+            <CardContent className="p-6 flex items-center justify-between">
+              <div className="flex gap-4">
+                <div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}>
+                  {isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[#00F0FF] transition-colors flex items-center justify-center"></div>}
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF]">
+                      {user?.target_exam?.replace("_", " ") || "JEE/NEET"}
+                    </span>
+                    <span className="text-muted-foreground text-xs font-bold">•</span>
+                    <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">{dpp.difficulty} Level</span>
+                    {isUpcoming ? (
+                      <>
+                        <span className="text-muted-foreground text-xs font-bold">•</span>
+                        <span className="text-[10px] font-bold uppercase text-yellow-500 bg-yellow-500/10 px-1.5 py-0.5 rounded">Upcoming</span>
+                      </>
+                    ) : isExpired ? (
+                      <>
+                        <span className="text-muted-foreground text-xs font-bold">•</span>
+                        <span className="text-[10px] font-bold uppercase text-muted-foreground bg-secondary px-1.5 py-0.5 rounded">Expired</span>
+                      </>
+                    ) : null}
+                  </div>
+                  <h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors flex items-center gap-2">
+                    {dpp.title}
+                    <span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
+                      {dpp.difficulty}
+                    </span>
+                  </h3>
+                  <div className="text-sm text-muted-foreground mt-2 font-medium">
+                    {count} Questions • {dpp.total_time} mins
+                    {dpp.scheduled_date && (
+                      <span className="ml-2 border-l border-border pl-2">
+                        {isUpcoming ? `Available on ${formatDate(dpp.scheduled_date)}` : isExpired ? `Expired on ${formatDate(dpp.end_date!)}` : 'Available Now'}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-col sm:flex-row gap-2 shrink-0">
+                {isUpcoming ? (
+                  <Button disabled variant="outline" size="sm" className="font-bold">Starts Soon</Button>
+                ) : isExpired && !isAttempted ? (
+                  <Button disabled variant="outline" size="sm" className="font-bold bg-secondary/50">Expired</Button>
+                ) : isAttempted ? (
+                  <>
+                    <Link href={user?.tier === "Free" ? "#" : `/cbt/${dpp.id}/result`}>
+                      <Button onClick={() => user?.tier === "Free" && setSelectedPdfDpp(dpp)} variant="outline" size="sm" className="font-bold border-border">Result</Button>
+                    </Link>
+                    {!isExpired && (
+                      <Link href={user?.tier === "Free" ? "#" : `/dashboard/ai-coach/cbt-dpp/${dpp.id}`}>
+                        <Button onClick={() => user?.tier === "Free" && setSelectedPdfDpp(dpp)} variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20">
+                          {user?.tier === "Free" ? "Read PDF" : "Retake CBT"}
+                        </Button>
+                      </Link>
+                    )}
+                  </>
+                ) : (
+                  user?.tier === "Free" ? (
+                    <Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" className="rounded-xl bg-primary/10 text-primary hover:bg-primary/20 font-bold gap-2 text-xs">
+                      <Eye size={14} /> Open PDF
+                    </Button>
+                  ) : (
+                    <Link href={`/dashboard/ai-coach/cbt-dpp/${dpp.id}`}>
+                      <Button variant="secondary" size="sm" className="rounded-xl bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold gap-2 text-xs shadow-[0_0_12px_rgba(0,240,255,0.2)]">
+                        <Play size={14} className="fill-black" /> Launch CBT DPP
+                      </Button>
+                    </Link>
+                  )
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        )})}
+      </div>
+
+      {/* ── PROTECTED PDF READER MODAL (FREE TIER) ── */}
+      {selectedPdfDpp && (
+        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex items-center justify-center p-4 animate-in fade-in duration-300">
+          <div className="bg-background border border-border rounded-3xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden shadow-2xl">
+            {/* Modal Header */}
+            <div className="p-5 border-b border-border bg-secondary/30 flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="p-2.5 bg-primary/10 rounded-xl border border-primary/20 text-primary">
+                  <FileText size={22} />
+                </div>
+                <div>
+                  <h3 className="font-black text-lg flex items-center gap-2">
+                    {selectedPdfDpp.title}
+                    <span className="text-[10px] bg-yellow-500/10 text-yellow-500 border border-yellow-500/20 px-2 py-0.5 rounded-full uppercase tracking-wider font-extrabold">
+                      Protected In-App PDF View
+                    </span>
+                  </h3>
+                  <p className="text-xs text-muted-foreground font-medium">
+                    {selectedPdfDpp.difficulty} Level • {user?.target_exam?.replace("_", " ") || "JEE/NEET"} Practice Sheet
+                  </p>
+                </div>
+              </div>
+              <Button 
+                onClick={() => setSelectedPdfDpp(null)}
+                variant="outline" 
+                size="icon" 
+                className="rounded-full border-border hover:bg-secondary"
+              >
+                <X size={18} />
+              </Button>
+            </div>
+
+            {/* Security Notice Banner */}
+            <div className="bg-amber-500/10 border-b border-amber-500/20 px-6 py-2.5 flex items-center justify-between text-xs text-amber-400 font-bold">
+              <span className="flex items-center gap-2">
+                <ShieldAlert size={16} /> Read-Only Mode (Free Tier) — Downloads, text copying, and sharing are restricted.
+              </span>
+              <Link href="/upgrade">
+                <Button size="sm" className="bg-amber-500 text-black hover:bg-amber-400 font-extrabold h-7 text-[11px] rounded-lg">
+                  Upgrade for Interactive CBT Mode →
+                </Button>
+              </Link>
+            </div>
+
+            {/* Protected PDF Document Sheet Content (select-none) */}
+            <div 
+              onContextMenu={(e) => e.preventDefault()}
+              className="flex-1 w-full h-full min-h-[60vh] select-none bg-[#525659]"
+            >
+              <embed 
+                src={getPdfUrl(selectedPdfDpp.title)} 
+                type="application/pdf" 
+                className="w-full h-full rounded-b-lg"
+              />
+            </div>
+
+            {/* Modal Footer */}
+            <div className="p-4 border-t border-border bg-secondary/30 flex items-center justify-between">
+              <span className="text-xs text-muted-foreground font-medium">
+                📄 PragatiVeer Protected PDF Reader v2.0
+              </span>
+              <div className="flex gap-3">
+                <Button onClick={() => setSelectedPdfDpp(null)} variant="outline" className="rounded-xl font-bold">
+                  Close PDF Reader
+                </Button>
+                <Link href="/upgrade">
+                  <Button className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold rounded-xl shadow-[0_0_15px_rgba(0,240,255,0.2)]">
+                    <Sparkles size={16} className="mr-2" /> Upgrade to AI Coach for Interactive CBT
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/app/dashboard/ai-coach/college-predictor/page.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { CollegePredictorCard } from "@/components/AI/CollegePredictorCard"
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { GraduationCap, ArrowLeft, Building2, MapPin, Award, CheckCircle2 } from "lucide-react"
+import Link from "next/link"
+
+export default function CollegePredictorPage() {
+  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">
+      {/* Navigation 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">
+          <GraduationCap className="text-[#00F0FF]" size={36} />
+          AI College & Cutoff Predictor
+        </h1>
+        <p className="text-muted-foreground text-base md:text-lg mt-1 font-medium max-w-3xl">
+          Discover your probable target medical & engineering colleges based on current mock exam scores and historical cutoffs.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-8">
+          <Card className="p-8 bg-secondary/10 border-border/60 rounded-3xl">
+            <h2 className="text-2xl font-extrabold tracking-tight mb-6 flex items-center gap-2">
+              <Building2 className="text-[#00F0FF]" size={24} /> Target College Analytics
+            </h2>
+            <CollegePredictorCard />
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          <Card className="p-6 bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/30 rounded-3xl space-y-4">
+            <h3 className="text-xl font-black tracking-tight text-[#00F0FF] flex items-center gap-2">
+              <Award size={20} /> Cutoff Modeling Parameters
+            </h3>
+            <ul className="space-y-3 text-sm font-medium text-muted-foreground">
+              <li className="flex items-start gap-2">
+                <CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
+                <span>Includes 100,000+ candidate rank trends across 2021-2025 rounds.</span>
+              </li>
+              <li className="flex items-start gap-2">
+                <CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
+                <span>Supports All India Quota (AIQ) & State Quota adjustments.</span>
+              </li>
+              <li className="flex items-start gap-2">
+                <CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
+                <span>Simulates category reservation cutoffs (General, OBC, SC, ST, EWS).</span>
+              </li>
+            </ul>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/dashboard/ai-coach/heatmap/page.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
+import { ArrowLeft, Flame } from "lucide-react"
+import Link from "next/link"
+
+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">
+      <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>
+
+      <div className="max-w-4xl mx-auto">
+        <MistakeHeatmap />
+      </div>
+    </div>
+  )
+}

src/app/dashboard/ai-coach/mistakes/page.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
+import { MistakeReviewCard, MistakePayload } from "@/components/AI/MistakeReviewCard"
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { BrainCircuit, RefreshCw, CheckCircle2, ArrowLeft, Flame, Sparkles, AlertTriangle } from "lucide-react"
+import { useActiveUser } from "@/hooks/useActiveUser"
+import Link from "next/link"
+
+export default function MistakeTrackingPage() {
+  const [mistakes, setMistakes] = useState<MistakePayload[]>([])
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const { userId, loading: userLoading } = useActiveUser()
+
+  const fetchMistakes = async () => {
+    if (!userId) return
+    setLoading(true)
+    try {
+      const res = await fetch(`/api/mistakes/today?user_id=${userId}`)
+      if (!res.ok) throw new Error("Failed to fetch")
+      const data = await res.json()
+      setMistakes(data)
+    } catch (error) {
+      console.error(error)
+      setMistakes([])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!userLoading && userId) {
+      fetchMistakes()
+    }
+  }, [userId, userLoading])
+
+  const submitReview = async (mistakeId: string, selectedAnswer: string) => {
+    const res = await fetch("/api/mistakes/review", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ mistake_id: mistakeId, selected_answer: selectedAnswer })
+    })
+    if (!res.ok) throw new Error("Failed to submit review")
+    return await res.json()
+  }
+
+  const handleNext = () => {
+    if (currentIndex < mistakes.length - 1) {
+      setCurrentIndex(prev => prev + 1)
+    } else {
+      setCurrentIndex(mistakes.length)
+    }
+  }
+
+  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">
+      {/* Navigation Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-border/50 pb-6">
+        <div>
+          <h1 className="text-3xl md:text-5xl font-black tracking-tight flex items-center gap-3">
+            <BrainCircuit className="text-[#00F0FF]" size={36} />
+            AI Mistake Vault & SM-2 Engine
+          </h1>
+          <p className="text-muted-foreground text-base md:text-lg mt-1 font-medium">
+            Review logged errors, practice spaced-repetition cards, and observe subject heatmap trends.
+          </p>
+        </div>
+        <div className="flex items-center gap-3 shrink-0">
+          <div className="bg-[#00F0FF]/10 text-[#00F0FF] border border-[#00F0FF]/30 px-4 py-2 rounded-2xl font-bold text-sm flex items-center gap-2">
+            <Sparkles size={16} /> SM-2 Adaptive Algorithm Active
+          </div>
+        </div>
+      </div>
+
+      {/* Main Review Workspace */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-6">
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-extrabold tracking-tight flex items-center gap-2">
+              <Flame className="text-amber-500" size={24} /> Today's Active Review Queue
+            </h2>
+            <span className="text-sm font-bold text-[#00F0FF] bg-[#00F0FF]/10 px-4 py-1.5 rounded-full border border-[#00F0FF]/20">
+              {currentIndex < mistakes.length ? `Question ${currentIndex + 1} of ${mistakes.length}` : "Completed"}
+            </span>
+          </div>
+
+          {loading ? (
+            <Card className="p-16 flex items-center justify-center border-dashed">
+              <RefreshCw className="animate-spin text-[#00F0FF] mr-3" size={24} />
+              <span className="text-lg font-bold">Loading your active error queue...</span>
+            </Card>
+          ) : mistakes.length === 0 ? (
+            <Card className="p-16 text-center border-dashed bg-secondary/10 rounded-3xl">
+              <CheckCircle2 size={56} className="mx-auto text-green-400 mb-4 opacity-80" />
+              <h3 className="text-2xl font-extrabold mb-2">Zero Mistakes Pending!</h3>
+              <p className="text-muted-foreground text-base max-w-md mx-auto mb-6">
+                All scheduled errors have been reviewed. Solve more mock tests to automatically surface weak questions here.
+              </p>
+              <Button onClick={() => window.location.reload()} variant="outline" className="rounded-xl font-bold">
+                Refresh Queue
+              </Button>
+            </Card>
+          ) : currentIndex < mistakes.length ? (
+            <MistakeReviewCard
+              data={mistakes[currentIndex]}
+              onNext={handleNext}
+              onSubmitReview={submitReview}
+            />
+          ) : (
+            <Card className="p-16 text-center border-dashed bg-[#00F0FF]/5 border-[#00F0FF]/30 rounded-3xl">
+              <BrainCircuit size={56} className="mx-auto text-[#00F0FF] mb-4" />
+              <h3 className="text-2xl font-extrabold mb-2 text-[#00F0FF]">Review Session Mastered 🎉</h3>
+              <p className="text-muted-foreground text-base max-w-md mx-auto mb-6">
+                Fantastic focus! Your memory decay intervals have been updated in the database.
+              </p>
+              <Button onClick={() => window.location.reload()} className="bg-[#00F0FF] text-black font-bold rounded-xl px-6">
+                Check Additional Pending Queues
+              </Button>
+            </Card>
+          )}
+        </div>
+
+        {/* Heatmap & Info Column */}
+        <div className="space-y-6">
+          <MistakeHeatmap />
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/dashboard/ai-coach/page.tsx

@@ -5,16 +5,33 @@ import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
 import { StudyPlanCard } from "@/components/AI/StudyPlanCard"
 import { ReadinessGauge } from "@/components/AI/ReadinessGauge"
 import { CollegePredictorCard } from "@/components/AI/CollegePredictorCard"
+import { ExamStrategyCard } from "@/components/AI/ExamStrategyCard"
+import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard"
 import { TutorChat } from "@/components/AI/TutorChat"
 import { ReferralCard } from "@/components/AI/ReferralCard"
 import { ProgressShare } from "@/components/AI/ProgressShare"
 import { MistakeReviewCard, MistakePayload } from "@/components/AI/MistakeReviewCard"
+import { DailyChallengeBanner } from "@/components/AI/DailyChallengeBanner"
+import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
-import { BrainCircuit, BookOpen, Calculator, Target, RefreshCw, CheckCircle2, Lock } from "lucide-react"
+import { BrainCircuit, RefreshCw, CheckCircle2, Flame, Trophy, Target, Zap, BookOpen, Bot, FileText } from "lucide-react"
 import { useActiveUser } from "@/hooks/useActiveUser"
 import Link from "next/link"
 
+
+// Days until NEET 2026 (May 3, 2026)
+function getDaysToExam(exam: string) {
+  const targets: Record<string, Date> = {
+    "NEET":         new Date("2026-05-03"),
+    "JEE_Main":     new Date("2026-01-22"),
+    "JEE_Advanced": new Date("2026-05-24"),
+  }
+  const t = targets[exam] || targets["NEET"]
+  const diff = Math.ceil((t.getTime() - Date.now()) / 86400000)
+  return diff > 0 ? diff : 0
+}
+
 export default function AICoachDashboard() {
   const [mistakes, setMistakes] = useState<MistakePayload[]>([])
   const [currentIndex, setCurrentIndex] = useState(0)
@@ -32,7 +49,6 @@ export default function AICoachDashboard() {
       setMistakes(data)
     } catch (error) {
       console.error(error)
-      // If backend fails, fallback to empty array
       setMistakes([])
     } finally {
       setLoading(false)
@@ -51,7 +67,6 @@ export default function AICoachDashboard() {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ mistake_id: mistakeId, selected_answer: selectedAnswer })
     })
-    
     if (!res.ok) throw new Error("Failed to submit review")
     return await res.json()
   }
@@ -60,13 +75,19 @@ export default function AICoachDashboard() {
     if (currentIndex < mistakes.length - 1) {
       setCurrentIndex(prev => prev + 1)
     } else {
-      // Session finished
-      setCurrentIndex(mistakes.length) // Push out of bounds to trigger complete state
+      setCurrentIndex(mistakes.length)
     }
   }
 
   if (userLoading) {
-    return <div className="p-8 text-center text-muted-foreground animate-pulse">Loading AI Coach...</div>
+    return (
+      <div className="h-screen flex items-center justify-center">
+        <div className="flex flex-col items-center gap-3 text-muted-foreground">
+          <BrainCircuit size={32} className="animate-pulse text-[#00F0FF]" />
+          <span className="text-sm font-medium">Loading AI Coach...</span>
+        </div>
+      </div>
+    )
   }
 
   if (!hasAccessTo("ai-mistake-tracking")) {
@@ -78,7 +99,7 @@ export default function AICoachDashboard() {
         <div className="space-y-4">
           <h1 className="text-4xl font-extrabold tracking-tight">AI Coach Workspace</h1>
           <p className="text-muted-foreground text-lg max-w-xl mx-auto leading-relaxed">
-            Mistake tracking, Spaced Repetition (SM-2), AI Tutor Chats, and Readiness scores are premium features reserved for **AI Coach** subscribers.
+            Mistake tracking, Spaced Repetition (SM-2), AI Tutor Chats, and Readiness scores are premium features reserved for <strong>AI Coach</strong> subscribers.
           </p>
         </div>
         <div className="pt-4">
@@ -92,81 +113,113 @@ export default function AICoachDashboard() {
     )
   }
 
+  const daysLeft = getDaysToExam(user?.target_exam || "NEET")
+  const physicsErrors = mistakes.filter(m => m.question.subject === "Physics").length
+  const chemErrors = mistakes.filter(m => m.question.subject === "Chemistry").length
+  const mathErrors = mistakes.filter(m => m.question.subject === "Maths" || m.question.subject === "Mathematics").length
+
   return (
-    <div className="p-8 max-w-6xl mx-auto space-y-10 animate-in fade-in duration-500">
-      <header className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight flex items-center gap-3">
-            <BrainCircuit className="text-primary" size={32}/> AI Coach
-          </h1>
-          <p className="text-muted-foreground mt-1 font-medium">Your personalized SM-2 spaced repetition and analytics engine.</p>
-        </div>
-      </header>
+    <div className="p-6 max-w-6xl mx-auto space-y-8 animate-in fade-in duration-500">
 
-      {/* Summary Metrics */}
-      <section className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <Card className="border-border shadow-sm">
-          <CardContent className="p-5 flex items-center gap-4">
-            <div className="p-3 bg-secondary rounded-xl text-primary"><Calculator size={20}/></div>
-            <div>
-              <p className="text-sm font-bold text-muted-foreground uppercase tracking-wider">Physics Errors</p>
-              <h3 className="text-2xl font-bold">{mistakes.filter(m => m.question.subject === 'Physics').length}</h3>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="border-border shadow-sm">
-          <CardContent className="p-5 flex items-center gap-4">
-            <div className="p-3 bg-secondary rounded-xl text-emerald-500"><BookOpen size={20}/></div>
-            <div>
-              <p className="text-sm font-bold text-muted-foreground uppercase tracking-wider">Chemistry Errors</p>
-              <h3 className="text-2xl font-bold">{mistakes.filter(m => m.question.subject === 'Chemistry').length}</h3>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="border-border shadow-sm">
-          <CardContent className="p-5 flex items-center gap-4">
-            <div className="p-3 bg-secondary rounded-xl text-blue-500"><Target size={20}/></div>
-            <div>
-              <p className="text-sm font-bold text-muted-foreground uppercase tracking-wider">Maths Errors</p>
-              <h3 className="text-2xl font-bold">{mistakes.filter(m => m.question.subject === 'Maths').length}</h3>
-            </div>
-          </CardContent>
-        </Card>
+      {/* ── METRICS BAR ── */}
+      <div className="flex flex-wrap items-center justify-end gap-2 pt-2">
+        <div className="inline-flex items-center gap-1.5 bg-yellow-500/10 text-yellow-500 px-3 py-1.5 rounded-xl text-xs font-bold border border-yellow-500/20">
+          <Flame size={14} className="fill-yellow-500" />
+          {user?.streak_count || 0}-Day Streak
+        </div>
+        <div className="inline-flex items-center gap-1.5 bg-red-500/10 text-red-400 px-3 py-1.5 rounded-xl text-xs font-bold border border-red-500/20">
+          <Target size={13} />
+          {daysLeft} days to {user?.target_exam?.replace("_", " ") || "Exam"}
+        </div>
+        <div className="inline-flex items-center gap-1.5 bg-purple-500/10 text-purple-400 px-3 py-1.5 rounded-xl text-xs font-bold border border-purple-500/20">
+          <Trophy size={13} />
+          AI Coach
+        </div>
+      </div>
+
+      {/* ── DAILY CHALLENGE BANNER ── */}
+      <DailyChallengeBanner />
+
+      {/* ── QUICK STATS ── */}
+      <section className="grid grid-cols-2 md:grid-cols-5 gap-4">
+        {[
+          { label: "Questions Solved", value: "1,247", color: "text-[#00F0FF]", bg: "bg-[#00F0FF]/5", border: "border-[#00F0FF]/20", icon: <FileText size={32} /> },
+          { label: "Overall Accuracy", value: "74%", color: "text-amber-500", bg: "bg-amber-500/5", border: "border-amber-500/20", icon: <Target size={32} /> },
+          { label: "Current Streak", value: `${user?.streak_count || 0} d`, color: "text-yellow-400", bg: "bg-yellow-400/5", border: "border-yellow-400/20", icon: <Flame size={32} className="fill-yellow-400" /> },
+          { label: "Mistakes Mastered", value: 38, color: "text-green-400", bg: "bg-green-400/5", border: "border-green-400/20", icon: <CheckCircle2 size={32} /> },
+          { label: "AI Sessions", value: 124, color: "text-purple-400", bg: "bg-purple-400/5", border: "border-purple-400/20", icon: <Bot size={32} /> },
+        ].map((stat) => (
+          <Card key={stat.label} className={`border ${stat.border} ${stat.bg} backdrop-blur-sm shadow-sm hover:shadow-[0_0_20px_rgba(0,240,255,0.2)] transition-all duration-300 transform hover:-translate-y-1 rounded-2xl`}>
+            <CardContent className="p-6 flex flex-col items-center justify-center text-center">
+              <div className="text-3xl mb-2 filter drop-shadow-md">{stat.icon}</div>
+              <div className={`text-4xl font-black ${stat.color} leading-none tracking-tight mb-2 filter drop-shadow-sm`}>{stat.value}</div>
+              <div className="text-xs font-extrabold text-muted-foreground uppercase tracking-wider">{stat.label}</div>
+            </CardContent>
+          </Card>
+        ))}
       </section>
 
-      {/* Predictive Intelligence */}
-      <section className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
-        <ReadinessGauge />
-        <CollegePredictorCard />
+      {/* ── PREDICTIVE INTELLIGENCE ROW ── */}
+      <section className="mt-10">
+        <div className="flex items-center justify-between gap-3 mb-6">
+          <div className="flex items-center gap-2 text-base md:text-lg font-black uppercase tracking-widest text-[#00F0FF]">
+            <Zap size={20} />
+            Predictive Intelligence & Strategy
+          </div>
+          <div className="flex items-center gap-3">
+            <Link href="/dashboard/ai-coach/readiness" className="text-xs font-bold text-[#00F0FF] hover:underline flex items-center gap-1">
+              Full Analytics →
+            </Link>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <ReadinessGauge />
+          <CollegePredictorCard />
+          <ExamStrategyCard />
+          <StudyTimeOptimizationCard />
+        </div>
       </section>
 
-      {/* Mistake Review Workspace */}
-      <section>
-        <div className="flex items-center justify-between mb-5">
-          <h2 className="text-xl font-semibold tracking-tight">Daily Mistake Review Queue</h2>
-          <span className="text-sm font-bold text-muted-foreground bg-secondary px-3 py-1 rounded-full">
-            {currentIndex < mistakes.length ? `${currentIndex + 1} / ${mistakes.length}` : "Finished"}
-          </span>
+      {/* ── MISTAKE REVIEW WORKSPACE ── */}
+      <section className="mt-12">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2.5 bg-[#00F0FF]/10 rounded-xl border border-[#00F0FF]/20">
+              <BrainCircuit size={24} className="text-[#00F0FF]" />
+            </div>
+            <div>
+              <h2 className="text-2xl md:text-3xl font-black tracking-tight">Daily Mistake Review Queue</h2>
+              <p className="text-sm text-muted-foreground font-medium">SM-2 Spaced Repetition Flashcard Engine</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <Link href="/dashboard/ai-coach/mistakes" className="hidden sm:inline-flex text-xs font-extrabold text-[#00F0FF] bg-[#00F0FF]/10 px-4 py-2 rounded-xl border border-[#00F0FF]/30 hover:bg-[#00F0FF] hover:text-black transition-all">
+              Open Full Mistake Vault Page →
+            </Link>
+            <span className="text-sm font-extrabold text-[#00F0FF] bg-[#00F0FF]/10 px-4 py-1.5 rounded-full border border-[#00F0FF]/30 shadow-[0_0_10px_rgba(0,240,255,0.15)]">
+              {currentIndex < mistakes.length ? `${currentIndex + 1} / ${mistakes.length}` : "Finished"}
+            </span>
+          </div>
         </div>
-        
+
         {loading ? (
           <Card className="p-12 flex items-center justify-center border-dashed">
             <RefreshCw className="animate-spin text-muted-foreground mr-3" /> Loading queue...
           </Card>
         ) : mistakes.length === 0 ? (
-          <Card className="p-12 text-center border-dashed bg-secondary/20">
+          <Card className="p-12 text-center border-dashed bg-secondary/20 rounded-3xl">
             <CheckCircle2 size={48} className="mx-auto text-green-500 mb-4 opacity-50" />
             <h3 className="text-xl font-bold mb-2">You're all caught up!</h3>
             <p className="text-muted-foreground">No mistakes scheduled for review today. Go take a test!</p>
           </Card>
         ) : currentIndex < mistakes.length ? (
-          <MistakeReviewCard 
-            data={mistakes[currentIndex]} 
+          <MistakeReviewCard
+            data={mistakes[currentIndex]}
             onNext={handleNext}
             onSubmitReview={submitReview}
           />
         ) : (
-          <Card className="p-12 text-center border-dashed bg-primary/5 border-primary/20">
+          <Card className="p-12 text-center border-dashed bg-primary/5 border-primary/20 rounded-3xl">
             <BrainCircuit size={48} className="mx-auto text-primary mb-4 opacity-80" />
             <h3 className="text-xl font-bold mb-2 text-primary">Session Complete</h3>
             <p className="text-muted-foreground mb-6">Great job clearing your error queue! The SM-2 engine has scheduled your next reviews.</p>
@@ -175,23 +228,57 @@ export default function AICoachDashboard() {
         )}
       </section>
 
-      {/* Heatmap & Timeline */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8 pt-8 border-t border-border">
-        <section>
+      {/* ── HEATMAP / STUDY PLAN / WEEKLY REPORT ── */}
+      <section className="grid grid-cols-1 lg:grid-cols-2 gap-8 pt-10 border-t border-border">
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-2 text-base font-extrabold">
+              <BookOpen size={18} className="text-[#00F0FF]" /> Study Plan
+            </div>
+            <Link href="/dashboard/ai-coach/study-plan" className="text-xs font-bold text-[#00F0FF] hover:underline">
+              Full Schedule →
+            </Link>
+          </div>
           <StudyPlanCard />
-        </section>
-        <section>
+        </div>
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-2 text-base font-extrabold">
+              <Flame size={18} className="text-yellow-500" /> Mistake Heatmap
+            </div>
+            <Link href="/dashboard/ai-coach/mistakes" className="text-xs font-bold text-[#00F0FF] hover:underline">
+              Heatmap Vault →
+            </Link>
+          </div>
           <MistakeHeatmap />
-        </section>
-      </div>
+        </div>
+      </section>
 
-      {/* Tutor Chat Workspace */}
       <section className="pt-8 border-t border-border">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2 text-base font-extrabold">
+            <Target size={18} className="text-[#00F0FF]" /> Weekly Progress Overview
+          </div>
+          <Link href="/dashboard/ai-coach/study-plan" className="text-xs font-bold text-[#00F0FF] hover:underline">
+            View Details →
+          </Link>
+        </div>
+        <WeeklyProgressReport />
+      </section>
+
+      {/* ── TUTOR CHAT ── */}
+      <section className="pt-8 border-t border-border">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-2xl font-extrabold tracking-tight">24/7 AI Tutor Chat Assistant</h2>
+          <Link href="/dashboard/ai-coach/tutor" className="text-xs font-extrabold text-[#00F0FF] bg-[#00F0FF]/10 px-3.5 py-1.5 rounded-xl border border-[#00F0FF]/30 hover:bg-[#00F0FF] hover:text-black transition-all">
+            Full Desk Mode →
+          </Link>
+        </div>
         <TutorChat />
       </section>
 
-      {/* Growth & Sharing Hub */}
-      <section className="grid grid-cols-1 lg:grid-cols-2 gap-8 pt-8 border-t border-border mt-8">
+      {/* ── GROWTH HUB ── */}
+      <section className="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-6 border-t border-border">
         <ReferralCard />
         <ProgressShare />
       </section>
@@ -199,3 +286,4 @@ export default function AICoachDashboard() {
     </div>
   )
 }
+

src/app/dashboard/ai-coach/readiness/page.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import { ReadinessGauge } from "@/components/AI/ReadinessGauge"
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Gauge, ArrowLeft, Target, Award, ShieldAlert, CheckCircle2 } from "lucide-react"
+import Link from "next/link"
+
+export default function ReadinessPage() {
+  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">
+      {/* Navigation 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">
+          <Gauge className="text-[#00F0FF]" size={36} />
+          Exam Readiness Analytics
+        </h1>
+        <p className="text-muted-foreground text-base md:text-lg mt-1 font-medium max-w-3xl">
+          Real-time algorithmic prediction of your readiness percentage for JEE & NEET based on speed, accuracy, and test history.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-8">
+          <Card className="p-8 bg-secondary/10 border-border/60 rounded-3xl">
+            <h2 className="text-2xl font-extrabold tracking-tight mb-6 flex items-center gap-2">
+              <Award className="text-amber-400" size={24} /> Overall Readiness Index
+            </h2>
+            <ReadinessGauge />
+          </Card>
+
+          {/* Subject Confidence Breakdown */}
+          <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl space-y-6">
+            <h3 className="text-xl font-extrabold tracking-tight">Subject Confidence Matrix</h3>
+            <div className="space-y-4">
+              {[
+                { subject: "Biology / Maths", score: 82, color: "bg-[#00F0FF]", status: "High Readiness" },
+                { subject: "Chemistry", score: 74, color: "bg-amber-400", status: "Moderate Readiness" },
+                { subject: "Physics", score: 61, color: "bg-red-400", status: "Needs Intensive Drill" },
+              ].map((sub) => (
+                <div key={sub.subject} className="space-y-2">
+                  <div className="flex justify-between items-center text-sm font-bold">
+                    <span>{sub.subject}</span>
+                    <span className="text-muted-foreground">{sub.score}% • {sub.status}</span>
+                  </div>
+                  <div className="h-3 w-full bg-secondary rounded-full overflow-hidden">
+                    <div className={`h-full ${sub.color}`} style={{ width: `${sub.score}%` }} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          <Card className="p-6 bg-gradient-to-br from-amber-500/10 via-secondary/20 to-background border border-amber-500/30 rounded-3xl space-y-4">
+            <h3 className="text-xl font-black tracking-tight text-amber-400 flex items-center gap-2">
+              <ShieldAlert size={20} /> Readiness Boosters
+            </h3>
+            <ul className="space-y-3 text-sm font-medium text-muted-foreground">
+              <li className="flex items-start gap-2">
+                <CheckCircle2 size={16} className="text-amber-400 shrink-0 mt-0.5" />
+                <span>Complete 2 Full-Length Mock Tests this week.</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 Physics error queue.</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 study streak.</span>
+              </li>
+            </ul>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/dashboard/ai-coach/strategy/page.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { ExamStrategyCard } from "@/components/AI/ExamStrategyCard"
+import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard"
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Zap, ArrowLeft, Clock, Target, Lightbulb, CheckCircle2 } from "lucide-react"
+import Link from "next/link"
+
+export default function StrategyPage() {
+  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">
+      {/* Navigation 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">
+          <Zap className="text-[#00F0FF]" size={36} />
+          Exam Strategy & Time Optimization
+        </h1>
+        <p className="text-muted-foreground text-base md:text-lg mt-1 font-medium max-w-3xl">
+          Master time allocation per question, eliminate negative marking traps, and fine-tune your subject sequence for maximum score yield.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
+          <h2 className="text-2xl font-extrabold tracking-tight mb-4 flex items-center gap-2">
+            <Target className="text-[#00F0FF]" size={24} /> Exam Day Time Strategy
+          </h2>
+          <ExamStrategyCard />
+        </Card>
+
+        <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
+          <h2 className="text-2xl font-extrabold tracking-tight mb-4 flex items-center gap-2">
+            <Clock className="text-amber-400" size={24} /> Study Time Optimization
+          </h2>
+          <StudyTimeOptimizationCard />
+        </Card>
+      </div>
+    </div>
+  )
+}

src/app/dashboard/ai-coach/study-plan/page.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { StudyPlanCard } from "@/components/AI/StudyPlanCard"
+import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Calendar, ArrowLeft, BookOpen, Clock, Target, CheckCircle2 } from "lucide-react"
+import Link from "next/link"
+
+export default function StudyPlanPage() {
+  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">
+      {/* Navigation 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">
+          <Calendar className="text-[#00F0FF]" size={36} />
+          Personalized Daily & Weekly Study Plan
+        </h1>
+        <p className="text-muted-foreground text-base md:text-lg mt-1 font-medium max-w-3xl">
+          AI-generated task schedule dynamically tailored to fix your weak areas and maintain optimal syllabus coverage.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-8">
+          <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
+            <h2 className="text-2xl font-extrabold tracking-tight mb-4 flex items-center gap-2">
+              <Clock className="text-[#00F0FF]" size={24} /> Today's Action Plan
+            </h2>
+            <StudyPlanCard />
+          </Card>
+
+          <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
+            <h2 className="text-2xl font-extrabold tracking-tight mb-4 flex items-center gap-2">
+              <Target className="text-emerald-400" size={24} /> Weekly Syllabus Target
+            </h2>
+            <WeeklyProgressReport />
+          </Card>
+        </div>
+
+        {/* Sidebar Info */}
+        <div className="space-y-6">
+          <Card className="p-6 bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/30 rounded-3xl space-y-4">
+            <h3 className="text-xl font-black tracking-tight text-[#00F0FF] flex items-center gap-2">
+              <BookOpen size={20} /> AI Scheduler Rules
+            </h3>
+            <ul className="space-y-3 text-sm font-medium text-muted-foreground">
+              <li className="flex items-start gap-2">
+                <CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
+                <span><strong>High-Yield Prioritization:</strong> Focuses extra time on topics with heavy exam weightage.</span>
+              </li>
+              <li className="flex items-start gap-2">
+                <CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
+                <span><strong>Error Interleaving:</strong> Integrates recent incorrect questions directly into study blocks.</span>
+              </li>
+              <li className="flex items-start gap-2">
+                <CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
+                <span><strong>Burnout Prevention:</strong> Recommends 10-minute micro-breaks between intensive problem sets.</span>
+              </li>
+            </ul>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/dashboard/ai-coach/time-optimization/page.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard"
+import { ArrowLeft, Clock } from "lucide-react"
+import Link from "next/link"
+
+export default function TimeOptimizationPage() {
+  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">
+      <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">
+          <Clock className="text-[#00F0FF]" size={36} />
+          Study Time Optimization
+        </h1>
+        <p className="text-muted-foreground text-base md:text-lg mt-1 font-medium max-w-3xl">
+          Detailed metrics on your productive hours and stamina blocks.
+        </p>
+      </div>
+
+      <div className="max-w-4xl mx-auto">
+        <StudyTimeOptimizationCard />
+      </div>
+    </div>
+  )
+}

src/app/dashboard/ai-coach/tutor/page.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { TutorChat } from "@/components/AI/TutorChat"
+
+export default function TutorChatPage() {
+  return (
+    <div className="h-[calc(100vh-80px)] w-full flex flex-col p-4 md:p-6 animate-in fade-in duration-500">
+      <div className="flex-1 rounded-3xl overflow-hidden border border-border/50 shadow-xl bg-background">
+        <TutorChat />
+      </div>
+    </div>
+  )
+}

src/app/dashboard/ai-coach/weekly-progress/page.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
+import { ArrowLeft, Target } from "lucide-react"
+import Link from "next/link"
+
+export default function WeeklyProgressPage() {
+  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">
+      <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">
+          <Target className="text-[#00F0FF]" size={36} />
+          Weekly Progress Overview
+        </h1>
+        <p className="text-muted-foreground text-base md:text-lg mt-1 font-medium max-w-3xl">
+          Track your syllabus completion goals and weekly milestones.
+        </p>
+      </div>
+
+      <div className="max-w-4xl mx-auto">
+        <WeeklyProgressReport />
+      </div>
+    </div>
+  )
+}