Add admin panel refresh settings

src/hooks/useModerationStats.ts

@@ -0,0 +1,101 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+
+interface ModerationStats {
+  pendingSubmissions: number;
+  openReports: number;
+  flaggedContent: number;
+}
+
+interface UseModerationStatsOptions {
+  onStatsChange?: (stats: ModerationStats) => void;
+  enabled?: boolean;
+  pollingEnabled?: boolean;
+  pollingInterval?: number;
+}
+
+export const useModerationStats = (options: UseModerationStatsOptions = {}) => {
+  const { 
+    onStatsChange, 
+    enabled = true, 
+    pollingEnabled = true,
+    pollingInterval = 30000 // Default 30 seconds
+  } = options;
+  
+  const [stats, setStats] = useState<ModerationStats>({
+    pendingSubmissions: 0,
+    openReports: 0,
+    flaggedContent: 0,
+  });
+  
+  const [isLoading, setIsLoading] = useState(true);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+  const onStatsChangeRef = useRef(onStatsChange);
+  
+  // Update ref when callback changes
+  useEffect(() => {
+    onStatsChangeRef.current = onStatsChange;
+  }, [onStatsChange]);
+
+  const fetchStats = useCallback(async () => {
+    if (!enabled) return;
+    
+    try {
+      setIsLoading(true);
+      
+      const [submissionsResult, reportsResult, reviewsResult] = await Promise.all([
+        supabase
+          .from('content_submissions')
+          .select('id', { count: 'exact', head: true })
+          .eq('status', 'pending'),
+        supabase
+          .from('reports')
+          .select('id', { count: 'exact', head: true })
+          .eq('status', 'pending'),
+        supabase
+          .from('reviews')
+          .select('id', { count: 'exact', head: true })
+          .eq('moderation_status', 'flagged'),
+      ]);
+
+      const newStats = {
+        pendingSubmissions: submissionsResult.count || 0,
+        openReports: reportsResult.count || 0,
+        flaggedContent: reviewsResult.count || 0,
+      };
+
+      setStats(newStats);
+      setLastUpdated(new Date());
+      onStatsChangeRef.current?.(newStats);
+    } catch (error) {
+      console.error('Error fetching moderation stats:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enabled]);
+
+  // Initial fetch
+  useEffect(() => {
+    if (enabled) {
+      fetchStats();
+    }
+  }, [enabled, fetchStats]);
+
+  // Polling
+  useEffect(() => {
+    if (!enabled || !pollingEnabled) return;
+
+    const interval = setInterval(fetchStats, pollingInterval);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [enabled, pollingEnabled, pollingInterval, fetchStats]);
+
+  return { 
+    stats, 
+    refresh: fetchStats, 
+    isLoading,
+    lastUpdated 
+  };
+};