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

src/components/AI/StudyTimeOptimizationCard.tsx

@@ -0,0 +1,74 @@
+"use client"
+import { Card, CardContent } from "@/components/ui/card"
+import { Flame, Star } from "lucide-react"
+import { useState } from "react"
+import Link from "next/link"
+
+const SLOTS = [
+  { label: "6 AM", h: 30, peak: false },
+  { label: "9 AM", h: 50, peak: false },
+  { label: "12 PM", h: 65, peak: false },
+  { label: "3 PM", h: 100, peak: true },
+  { label: "6 PM", h: 80, peak: false },
+  { label: "9 PM", h: 60, peak: false },
+  { label: "12 AM", h: 38, peak: false },
+]
+
+export function StudyTimeOptimizationCard() {
+  const [hovered, setHovered] = useState<number | null>(null)
+
+  return (
+    <div>
+      <div className="flex justify-between items-center pb-3">
+        <h2 className="text-base font-bold text-primary flex items-center gap-2">
+          📈 Study Time Optimization
+        </h2>
+        <Link href="/dashboard/ai-coach/strategy" 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)] group hover:border-[#00F0FF]/30 transition-colors">
+        <CardContent className="p-4">
+          {/* Peak window badge */}
+          <div className="flex items-center gap-2 mb-4">
+            <Star size={13} className="fill-yellow-500 text-yellow-500" />
+            <span className="text-xs font-bold text-yellow-500">Peak Productivity:</span>
+            <span className="text-xs font-semibold text-foreground bg-yellow-500/10 border border-yellow-500/20 px-2 py-0.5 rounded-full">
+              2 PM – 5 PM
+            </span>
+          </div>
+
+          {/* Bar chart */}
+          <div className="flex items-end gap-1.5 h-20 px-1 mb-6">
+            {SLOTS.map((slot, i) => (
+              <div
+                key={slot.label}
+                className="flex-1 flex flex-col items-center gap-0.5 cursor-pointer"
+                onMouseEnter={() => setHovered(i)}
+                onMouseLeave={() => setHovered(null)}
+              >
+                <div
+                  className={`w-full rounded-t-md transition-all duration-300 ${
+                    slot.peak
+                      ? "bg-gradient-to-t from-yellow-600/60 to-yellow-400 shadow-[0_0_10px_rgba(234,179,8,0.4)]"
+                      : hovered === i
+                      ? "bg-gradient-to-t from-[#00F0FF]/50 to-[#00F0FF]"
+                      : "bg-gradient-to-t from-[#00F0FF]/20 to-[#00F0FF]/60"
+                  }`}
+                  style={{ height: `${slot.h}%` }}
+                />
+                <span className="text-[8px] text-muted-foreground font-medium whitespace-nowrap mt-1">
+                  {slot.label}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-1 px-3 py-2.5 bg-yellow-500/10 border border-yellow-500/20 rounded-md text-xs text-yellow-500 font-medium flex items-center gap-2">
+            <Flame size={16} className="fill-yellow-500 shrink-0" />
+            You perform best 2 PM – 5 PM. Schedule your hardest mock tests in this window.
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+