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/components/AI/ReadinessGauge.tsx

@@ -4,16 +4,19 @@ import { useEffect, useState } from "react"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
 import { Activity, RefreshCw } from "lucide-react"
 
-const USER_ID = "b0e17378-864d-439e-8806-708dc48a891b"
+import { useActiveUser } from "@/hooks/useActiveUser"
 
 export function ReadinessGauge() {
   const [data, setData] = useState<any>(null)
   const [loading, setLoading] = useState(true)
+  const { userId, loading: userLoading } = useActiveUser();
 
   useEffect(() => {
+    if (userLoading || !userId) return;
+
     async function fetchReadiness() {
       try {
-        const res = await fetch(`http://localhost:8000/api/ai-coach/readiness/${USER_ID}`)
+        const res = await fetch(`/api/ai-coach/readiness/${userId}`)
         if (!res.ok) throw new Error("Failed to fetch")
         const json = await res.json()
         setData(json)
@@ -34,7 +37,7 @@ export function ReadinessGauge() {
       }
     }
     fetchReadiness()
-  }, [])
+  }, [userId, userLoading])
 
   if (loading) {
     return (