Fix admin page counts

src/pages/Admin.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useCallback } from 'react';
+import { useRef, useEffect, useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Shield, Users, FileText, Flag, AlertCircle } from 'lucide-react';
 import { useUserRole } from '@/hooks/useUserRole';
@@ -10,6 +10,7 @@ import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/Mod
 import { ReportsQueue } from '@/components/moderation/ReportsQueue';
 import { UserManagement } from '@/components/admin/UserManagement';
 import { AdminHeader } from '@/components/layout/AdminHeader';
+import { supabase } from '@/integrations/supabase/client';
 
 export default function Admin() {
   const { user, loading: authLoading } = useAuth();
@@ -17,9 +18,52 @@ export default function Admin() {
   const navigate = useNavigate();
   const moderationQueueRef = useRef<ModerationQueueRef>(null);
   
+  // State for dashboard stats
+  const [stats, setStats] = useState({
+    pendingSubmissions: 0,
+    openReports: 0,
+    flaggedContent: 0,
+    loading: true,
+  });
+
+  const fetchStats = useCallback(async () => {
+    try {
+      setStats(prev => ({ ...prev, loading: true }));
+      
+      // Fetch pending submissions count
+      const { count: pendingCount } = await supabase
+        .from('content_submissions')
+        .select('*', { count: 'exact', head: true })
+        .eq('status', 'pending');
+
+      // Fetch open reports count
+      const { count: reportsCount } = await supabase
+        .from('reports')
+        .select('*', { count: 'exact', head: true })
+        .eq('status', 'pending');
+
+      // Fetch flagged content count (reviews)
+      const { count: flaggedCount } = await supabase
+        .from('reviews')
+        .select('*', { count: 'exact', head: true })
+        .eq('moderation_status', 'flagged');
+
+      setStats({
+        pendingSubmissions: pendingCount || 0,
+        openReports: reportsCount || 0,
+        flaggedContent: flaggedCount || 0,
+        loading: false,
+      });
+    } catch (error) {
+      console.error('Error fetching admin stats:', error);
+      setStats(prev => ({ ...prev, loading: false }));
+    }
+  }, []);
+
   const handleRefresh = useCallback(() => {
     moderationQueueRef.current?.refresh();
-  }, []);
+    fetchStats(); // Also refresh stats
+  }, [fetchStats]);
 
   useEffect(() => {
     if (!authLoading && !roleLoading) {
@@ -32,8 +76,11 @@ export default function Admin() {
         navigate('/');
         return;
       }
+      
+      // Fetch stats when user is authenticated and authorized
+      fetchStats();
     }
-  }, [user, authLoading, roleLoading, isModerator, navigate]);
+  }, [user, authLoading, roleLoading, isModerator, navigate, fetchStats]);
 
   if (authLoading || roleLoading) {
     return (
@@ -69,7 +116,13 @@ export default function Admin() {
             <FileText className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">--</div>
+            <div className="text-2xl font-bold">
+              {stats.loading ? (
+                <span className="animate-pulse">--</span>
+              ) : (
+                stats.pendingSubmissions
+              )}
+            </div>
             <p className="text-xs text-muted-foreground">
               Content submissions awaiting moderation
             </p>
@@ -82,7 +135,13 @@ export default function Admin() {
             <Flag className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">--</div>
+            <div className="text-2xl font-bold">
+              {stats.loading ? (
+                <span className="animate-pulse">--</span>
+              ) : (
+                stats.openReports
+              )}
+            </div>
             <p className="text-xs text-muted-foreground">
               User reports to review
             </p>
@@ -95,7 +154,13 @@ export default function Admin() {
             <AlertCircle className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">--</div>
+            <div className="text-2xl font-bold">
+              {stats.loading ? (
+                <span className="animate-pulse">--</span>
+              ) : (
+                stats.flaggedContent
+              )}
+            </div>
             <p className="text-xs text-muted-foreground">
               Auto-flagged items
             </p>