feat: complete comprehensive zero-state metrics across all dashboard pages for new accounts

src/app/dashboard/streaks/page.tsx

@@ -1,13 +1,40 @@
 "use client"
 
+import { useState, useEffect } from "react"
 import { Card, CardContent } from "@/components/ui/card"
 import { Flame, Gift, Star, Trophy, Target, ArrowRight, CheckCircle2 } from "lucide-react"
-import { useActiveUser } from "@/hooks/useActiveUser"
+import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
 
 export default function StreaksPage() {
   const { user } = useActiveUser()
+  const isDemo = isDemoUser(user?.id)
   const currentStreak = user?.streak_count ?? 1
-  const bestStreak = Math.max(currentStreak, user?.longest_streak ?? 1)
+  const bestStreak = isDemo ? (user?.longest_streak ?? 45) : Math.max(currentStreak, user?.longest_streak ?? 1)
+  const [streakPoints, setStreakPoints] = useState(0)
+
+  useEffect(() => {
+    if (!user?.id) return
+    if (isDemo) {
+      setStreakPoints(currentStreak * 50)
+      return
+    }
+    async function loadStats() {
+      try {
+        const res = await fetch(`/api/users/${user?.id}/stats`)
+        if (res.ok) {
+          const stats = await res.json()
+          if (!stats.is_new_user) {
+            setStreakPoints(currentStreak * 50)
+          } else {
+            setStreakPoints(0)
+          }
+        }
+      } catch {
+        setStreakPoints(0)
+      }
+    }
+    loadStats()
+  }, [user?.id, isDemo, currentStreak])
 
   const rewards = [
     { streak: 7, title: "Consistent Learner", reward: "1 Free Premium DPP", unlocked: currentStreak >= 7 },
@@ -39,7 +66,11 @@ export default function StreaksPage() {
             <Flame size={64} className="text-orange-500 mb-4 animate-pulse" />
             <h2 className="text-6xl font-black text-foreground mb-2">{currentStreak} <span className="text-2xl text-muted-foreground">Days</span></h2>
             <p className="text-sm font-bold text-orange-500">CURRENT STREAK</p>
-            <p className="text-xs text-muted-foreground mt-4 max-w-xs">Complete a Daily Practice Problem (DPP) or CBT Exam every day to keep your streak alive.</p>
+            <p className="text-xs text-muted-foreground mt-4 max-w-xs">
+              {streakPoints === 0
+                ? "Complete your first Daily Practice Problem (DPP) or CBT Exam today to start earning streak points."
+                : "Complete a Daily Practice Problem (DPP) or CBT Exam every day to keep your streak alive."}
+            </p>
           </CardContent>
         </Card>
 
@@ -57,7 +88,10 @@ export default function StreaksPage() {
                 </div>
                 <div>
                   <p className="text-sm text-muted-foreground mb-1">Total Streak Points Earned</p>
-                  <p className="text-3xl font-bold text-[#00F0FF]">{(currentStreak * 50).toLocaleString()}</p>
+                  <p className="text-3xl font-bold text-[#00F0FF]">{streakPoints.toLocaleString()}</p>
+                  {streakPoints === 0 && (
+                    <p className="text-xs text-muted-foreground mt-1">Take a test to activate consistency bonus points</p>
+                  )}
                 </div>
               </div>
             </div>