Implement realtime queue fix

src/hooks/useAdminSettings.ts

@@ -150,6 +150,12 @@ export function useAdminSettings() {
     return getSettingValue('notifications.recipients', []);
   };
 
+  const getUseRealtimeQueue = (): boolean => {
+    const value = getSettingValue('system.use_realtime_queue', 'true');
+    const cleanValue = typeof value === 'string' ? value.replace(/"/g, '') : value;
+    return cleanValue === 'true' || cleanValue === true;
+  };
+
   return {
     settings,
     isLoading,
@@ -172,5 +178,6 @@ export function useAdminSettings() {
     getAdminPanelPollInterval,
     getAutoRefreshStrategy,
     getPreserveInteractionState,
+    getUseRealtimeQueue,
   };
 }

src/hooks/useModerationQueue.ts

@@ -80,11 +80,9 @@ export const useModerationQueue = () => {
     }
   }, [user]);
 
-  // Fetch stats on mount and periodically
+  // Fetch stats on mount only (realtime updates handled by useModerationStats)
   useEffect(() => {
     fetchStats();
-    const interval = setInterval(fetchStats, 30000); // Every 30 seconds
-    return () => clearInterval(interval);
   }, [fetchStats]);
 
   // Start countdown timer for lock expiry

src/hooks/useModerationStats.ts

@@ -12,6 +12,7 @@ interface UseModerationStatsOptions {
   enabled?: boolean;
   pollingEnabled?: boolean;
   pollingInterval?: number;
+  realtimeEnabled?: boolean;
 }
 
 export const useModerationStats = (options: UseModerationStatsOptions = {}) => {
@@ -19,7 +20,8 @@ export const useModerationStats = (options: UseModerationStatsOptions = {}) => {
     onStatsChange, 
     enabled = true, 
     pollingEnabled = true,
-    pollingInterval = 30000 // Default 30 seconds
+    pollingInterval = 60000, // Reduced to 60 seconds
+    realtimeEnabled = true
   } = options;
   
   const [stats, setStats] = useState<ModerationStats>({
@@ -91,9 +93,31 @@ export const useModerationStats = (options: UseModerationStatsOptions = {}) => {
     }
   }, [enabled, fetchStats]);
 
-  // Polling
+  // Realtime subscription for instant stat updates
   useEffect(() => {
-    if (!enabled || !pollingEnabled || isInitialLoad) return;
+    if (!enabled || !realtimeEnabled) return;
+
+    const channel = supabase
+      .channel('moderation-stats-realtime')
+      .on('postgres_changes', { event: '*', schema: 'public', table: 'content_submissions' }, () => {
+        fetchStats(true); // Silent refresh
+      })
+      .on('postgres_changes', { event: '*', schema: 'public', table: 'reports' }, () => {
+        fetchStats(true);
+      })
+      .on('postgres_changes', { event: '*', schema: 'public', table: 'reviews' }, () => {
+        fetchStats(true);
+      })
+      .subscribe();
+
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [enabled, realtimeEnabled, fetchStats]);
+
+  // Polling (fallback when realtime is disabled)
+  useEffect(() => {
+    if (!enabled || !pollingEnabled || realtimeEnabled || isInitialLoad) return;
 
     const interval = setInterval(() => {
       fetchStats(true); // Silent refresh
@@ -102,7 +126,7 @@ export const useModerationStats = (options: UseModerationStatsOptions = {}) => {
     return () => {
       clearInterval(interval);
     };
-  }, [enabled, pollingEnabled, pollingInterval, fetchStats, isInitialLoad]);
+  }, [enabled, pollingEnabled, realtimeEnabled, pollingInterval, fetchStats, isInitialLoad]);
 
   return { 
     stats,