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

src/components/AI/WeeklyProgressReport.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { TrendingUp, TrendingDown, Brain, Zap } from "lucide-react"
+import { Card, CardContent } from "@/components/ui/card"
+import Link from "next/link"
+
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+const BAR_HEIGHTS = [55, 70, 45, 90, 80, 60, 75] // % heights
+const ACCURACY = [82, 78, 91, 88, 85, 79, 93]
+
+export function WeeklyProgressReport() {
+  const avgAccuracy = Math.round(ACCURACY.reduce((a, b) => a + b, 0) / ACCURACY.length)
+  const trend = ACCURACY[ACCURACY.length - 1] - ACCURACY[0]
+  const maxBar = Math.max(...BAR_HEIGHTS)
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex justify-between items-center pb-3">
+        <h2 className="text-base font-bold text-primary flex items-center gap-2">
+          📊 This Week at a Glance
+        </h2>
+        <Link href="/dashboard/ai-coach/study-plan" className="text-xs text-[#00F0FF] font-semibold hover:underline transition-colors">
+          Expand View ↗
+        </Link>
+      </div>
+
+      <Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 flex flex-col group hover:border-[#00F0FF]/30 transition-colors">
+        <CardContent className="p-4 flex flex-col h-full gap-4">
+          {/* Summary chips */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <div className="flex items-center gap-1.5 text-xs font-bold px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 border border-green-500/20">
+              <TrendingUp size={12} />
+              {avgAccuracy}% avg accuracy
+            </div>
+            <div className={`flex items-center gap-1.5 text-xs font-bold px-2.5 py-1 rounded-full border ${trend >= 0 ? "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20" : "bg-red-500/10 text-red-500 border-red-500/20"}`}>
+              {trend >= 0 ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
+              {trend >= 0 ? "+" : ""}{trend}% vs Mon
+            </div>
+            <div className="flex items-center gap-1.5 text-xs font-bold px-2.5 py-1 rounded-full bg-yellow-500/10 text-yellow-500 border border-yellow-500/20">
+              <Zap size={12} />
+              7/7 days active
+            </div>
+          </div>
+
+          {/* Bar Chart */}
+          <div className="flex items-end gap-2 h-24 flex-1">
+            {DAYS.map((day, i) => (
+              <div key={day} className="flex flex-col items-center gap-1 flex-1">
+                <div className="relative w-full flex items-end justify-center" style={{ height: "80px" }}>
+                  <div
+                    className={`w-full rounded-t-md transition-all duration-700 ${
+                      i === 6
+                        ? "bg-gradient-to-t from-[#00F0FF]/60 to-[#00F0FF]"
+                        : "bg-gradient-to-t from-white/10 to-white/20"
+                    }`}
+                    style={{ height: `${(BAR_HEIGHTS[i] / maxBar) * 80}px` }}
+                    title={`${ACCURACY[i]}% accuracy`}
+                  />
+                </div>
+                <span className="text-[9px] text-muted-foreground font-semibold">{day}</span>
+              </div>
+            ))}
+          </div>
+
+          {/* AI insight */}
+          <div className="px-3 py-2.5 bg-[#00F0FF]/10 border border-[#00F0FF]/20 rounded-md text-xs text-[#00F0FF] font-medium flex items-start gap-3">
+            <Brain size={16} className="shrink-0 mt-0.5" />
+            <div className="flex flex-col gap-1.5">
+              <span><strong className="text-white">You keep making sign errors in Thermodynamics.</strong> In your last 3 attempts, you've used the wrong sign for work done (W = -PΔV). Review the First Law of Thermodynamics — we've queued 3 practice questions for tomorrow.</span>
+              <span className="text-[#00F0FF]/80">💡 <strong className="text-white">Tip:</strong> You perform best between 7-9 PM. Schedule difficult topics then.</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}