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

src/app/dashboard/community/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react"
 import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
 import { MessageSquare, ThumbsUp, ChevronUp, Search, Image as ImageIcon, CheckCircle, Lock, X, Send } from "lucide-react"
-import { useActiveUser } from "@/hooks/useActiveUser"
+import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
 
 interface Doubt {
   id: string
@@ -22,7 +22,8 @@ interface Doubt {
 
 export default function CommunityPage() {
   const { user, hasAccessTo, loading } = useActiveUser()
-  const currentUserName = user?.name || "Neha Verma"
+  const isDemo = isDemoUser(user?.id)
+  const currentUserName = user?.name || (isDemo ? "Neha Verma" : "Student")
   const currentUserInitials = currentUserName.substring(0, 2).toUpperCase()
   const [activeFilter, setActiveFilter] = useState<'all' | 'my-doubts' | 'solved' | 'unsolved'>('all')
   const [searchQuery, setSearchQuery] = useState('')
@@ -58,7 +59,7 @@ export default function CommunityPage() {
       isSolved: false,
       hasModeratorReply: false
     },
-    {
+    ...(isDemo ? [{
       id: "3",
       author: currentUserName,
       avatar: currentUserInitials,
@@ -71,7 +72,7 @@ export default function CommunityPage() {
       replies: 8,
       isSolved: true,
       hasModeratorReply: true
-    }
+    }] : [])
   ]
 
   const filteredDoubts = mockDoubts.filter(d => {
@@ -244,9 +245,16 @@ export default function CommunityPage() {
           </Card>
         ))}
         {filteredDoubts.length === 0 && (
-          <div className="text-center py-12 text-muted-foreground">
-            <MessageSquare size={48} className="mx-auto mb-4 opacity-20" />
-            <p className="font-medium">No doubts found matching your criteria.</p>
+          <div className="text-center py-12 text-muted-foreground bg-secondary/10 border border-dashed border-border rounded-2xl p-6">
+            <MessageSquare size={48} className="mx-auto mb-3 opacity-30 text-[#00F0FF]" />
+            <p className="font-bold text-foreground mb-1">
+              {activeFilter === 'my-doubts' ? "No Doubts Asked Yet" : "No doubts found matching your criteria."}
+            </p>
+            <p className="text-xs text-muted-foreground max-w-sm mx-auto">
+              {activeFilter === 'my-doubts'
+                ? "You haven't asked any doubts yet. Click 'Ask a Doubt' above to get answers from mentors and peers."
+                : "Try selecting another filter or clearing your search query."}
+            </p>
           </div>
         )}
       </div>