Implement active user tiers, class-based Tailwind theme switcher, 3-tiled static dashboard layout, Minio object storage integration, school & state settings database sync, and streak wishes onboarding modal

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

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { useEffect, useState } from "react"
 import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
@@ -11,20 +11,22 @@ import { ProgressShare } from "@/components/AI/ProgressShare"
 import { MistakeReviewCard, MistakePayload } from "@/components/AI/MistakeReviewCard"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
-import { BrainCircuit, BookOpen, Calculator, Target, RefreshCw, CheckCircle2 } from "lucide-react"
-
-// Hardcode mock UUID for demo fetching
-const USER_ID = "b0e17378-864d-439e-8806-708dc48a891b"
+import { BrainCircuit, BookOpen, Calculator, Target, RefreshCw, CheckCircle2, Lock } from "lucide-react"
+import { useActiveUser } from "@/hooks/useActiveUser"
+import Link from "next/link"
 
 export default function AICoachDashboard() {
   const [mistakes, setMistakes] = useState<MistakePayload[]>([])
   const [currentIndex, setCurrentIndex] = useState(0)
   const [loading, setLoading] = useState(true)
 
+  const { userId, user, hasAccessTo, loading: userLoading } = useActiveUser();
+
   const fetchMistakes = async () => {
+    if (!userId) return
     setLoading(true)
     try {
-      const res = await fetch(`http://localhost:8000/api/mistakes/today?user_id=${USER_ID}`)
+      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)
@@ -38,11 +40,13 @@ export default function AICoachDashboard() {
   }
 
   useEffect(() => {
-    fetchMistakes()
-  }, [])
+    if (!userLoading && userId) {
+      fetchMistakes()
+    }
+  }, [userId, userLoading])
 
   const submitReview = async (mistakeId: string, selectedAnswer: string) => {
-    const res = await fetch("http://localhost:8000/api/mistakes/review", {
+    const res = await fetch("/api/mistakes/review", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ mistake_id: mistakeId, selected_answer: selectedAnswer })
@@ -61,6 +65,33 @@ export default function AICoachDashboard() {
     }
   }
 
+  if (userLoading) {
+    return <div className="p-8 text-center text-muted-foreground animate-pulse">Loading AI Coach...</div>
+  }
+
+  if (!hasAccessTo("ai-mistake-tracking")) {
+    return (
+      <div className="max-w-3xl mx-auto text-center py-20 px-8 space-y-8 animate-in fade-in duration-500">
+        <div className="size-20 rounded-full bg-[#00F0FF]/10 flex items-center justify-center mx-auto text-[#00F0FF] border border-[#00F0FF]/20 shadow-[0_0_20px_rgba(0,240,255,0.1)]">
+          <BrainCircuit size={40} />
+        </div>
+        <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.
+          </p>
+        </div>
+        <div className="pt-4">
+          <Link href="/upgrade">
+            <Button size="lg" className="rounded-xl px-8 font-bold bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 shadow-[0_0_25px_-5px_#00F0FF]">
+              Upgrade to AI Coach Plan
+            </Button>
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
   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">