Add admin panel refresh settings

src/hooks/useAdminSettings.ts

@@ -115,6 +115,17 @@ export function useAdminSettings() {
     return value === true || value === 'true';
   };
 
+  const getAdminPanelRefreshMode = () => {
+    const value = getSettingValue('system.admin_panel_refresh_mode', 'auto');
+    // Remove quotes if they exist (JSON string stored in DB)
+    return typeof value === 'string' ? value.replace(/"/g, '') : value;
+  };
+
+  const getAdminPanelPollInterval = () => {
+    const value = getSettingValue('system.admin_panel_poll_interval', 30);
+    return parseInt(value?.toString() || '30') * 1000; // Convert to milliseconds
+  };
+
   return {
     settings,
     isLoading,
@@ -132,5 +143,7 @@ export function useAdminSettings() {
     getReportThreshold,
     getAuditRetentionDays,
     getAutoCleanupEnabled,
+    getAdminPanelRefreshMode,
+    getAdminPanelPollInterval,
   };
 }

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 
+  };
+};

src/pages/Admin.tsx

@@ -1,6 +1,6 @@
-import { useRef, useEffect, useCallback, useState } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Shield, Users, FileText, Flag, AlertCircle } from 'lucide-react';
+import { Shield, Users, FileText, Flag, AlertCircle, RefreshCw } from 'lucide-react';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
 import { useIsMobile } from '@/hooks/use-mobile';
@@ -11,8 +11,8 @@ 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';
-import { useRealtimeModerationStats } from '@/hooks/useRealtimeModerationStats';
+import { useModerationStats } from '@/hooks/useModerationStats';
+import { useAdminSettings } from '@/hooks/useAdminSettings';
 
 export default function Admin() {
   const isMobile = useIsMobile();
@@ -21,24 +21,27 @@ export default function Admin() {
   const navigate = useNavigate();
   const moderationQueueRef = useRef<ModerationQueueRef>(null);
   
-  // Use realtime stats hook for live updates
-  const { stats: realtimeStats, refresh: refreshStats } = useRealtimeModerationStats({
-    onStatsChange: (newStats) => {
-      console.log('Stats updated in real-time:', newStats);
-    },
-    enabled: !!user && !authLoading && !roleLoading && isModerator(),
-  });
+  // Get admin settings for polling configuration
+  const { 
+    getAdminPanelRefreshMode, 
+    getAdminPanelPollInterval,
+    isLoading: settingsLoading 
+  } = useAdminSettings();
   
-  const [isFetching, setIsFetching] = useState(false);
-
-  const fetchStats = useCallback(async () => {
-    refreshStats();
-  }, [refreshStats]);
+  const refreshMode = getAdminPanelRefreshMode();
+  const pollInterval = getAdminPanelPollInterval();
+  
+  // Use stats hook with configurable polling
+  const { stats, refresh: refreshStats, lastUpdated } = useModerationStats({
+    enabled: !!user && !authLoading && !roleLoading && isModerator(),
+    pollingEnabled: refreshMode === 'auto',
+    pollingInterval: pollInterval,
+  });
 
   const handleRefresh = useCallback(() => {
     moderationQueueRef.current?.refresh();
-    fetchStats(); // Also refresh stats
-  }, []);
+    refreshStats();
+  }, [refreshStats]);
 
   useEffect(() => {
     if (!authLoading && !roleLoading) {
@@ -75,42 +78,62 @@ export default function Admin() {
     <>
       <AdminHeader onRefresh={handleRefresh} />
       <div className="container mx-auto px-4 py-8">
-      <div className="grid grid-cols-3 gap-3 md:gap-6 mb-8">
-        <Card>
-          <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
-            <FileText className="h-4 w-4 text-muted-foreground mb-2" />
-            <CardTitle className="text-sm font-medium">Pending Submissions</CardTitle>
-          </CardHeader>
-          <CardContent className="text-center">
-            <div className="text-2xl font-bold">
-              {realtimeStats.pendingSubmissions}
-            </div>
-          </CardContent>
-        </Card>
-        
-        <Card>
-          <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
-            <Flag className="h-4 w-4 text-muted-foreground mb-2" />
-            <CardTitle className="text-sm font-medium">Open Reports</CardTitle>
-          </CardHeader>
-          <CardContent className="text-center">
-            <div className="text-2xl font-bold">
-              {realtimeStats.openReports}
-            </div>
-          </CardContent>
-        </Card>
-        
-        <Card>
-          <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
-            <AlertCircle className="h-4 w-4 text-muted-foreground mb-2" />
-            <CardTitle className="text-sm font-medium">Flagged Content</CardTitle>
-          </CardHeader>
-          <CardContent className="text-center">
-            <div className="text-2xl font-bold">
-              {realtimeStats.flaggedContent}
-            </div>
-          </CardContent>
-        </Card>
+      <div className="space-y-4 mb-8">
+        {/* Refresh status indicator */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <RefreshCw className="w-4 h-4" />
+            {refreshMode === 'auto' ? (
+              <span>Auto-refresh: every {pollInterval / 1000}s</span>
+            ) : (
+              <span>Manual refresh only</span>
+            )}
+            {lastUpdated && (
+              <span className="text-xs">
+                • Last updated: {lastUpdated.toLocaleTimeString()}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Stats cards */}
+        <div className="grid grid-cols-3 gap-3 md:gap-6">
+          <Card>
+            <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
+              <FileText className="h-4 w-4 text-muted-foreground mb-2" />
+              <CardTitle className="text-sm font-medium">Pending Submissions</CardTitle>
+            </CardHeader>
+            <CardContent className="text-center">
+              <div className="text-2xl font-bold">
+                {stats.pendingSubmissions}
+              </div>
+            </CardContent>
+          </Card>
+          
+          <Card>
+            <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
+              <Flag className="h-4 w-4 text-muted-foreground mb-2" />
+              <CardTitle className="text-sm font-medium">Open Reports</CardTitle>
+            </CardHeader>
+            <CardContent className="text-center">
+              <div className="text-2xl font-bold">
+                {stats.openReports}
+              </div>
+            </CardContent>
+          </Card>
+          
+          <Card>
+            <CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
+              <AlertCircle className="h-4 w-4 text-muted-foreground mb-2" />
+              <CardTitle className="text-sm font-medium">Flagged Content</CardTitle>
+            </CardHeader>
+            <CardContent className="text-center">
+              <div className="text-2xl font-bold">
+                {stats.flaggedContent}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
       </div>
 
       {/* Content Moderation Section */}

src/pages/AdminSettings.tsx

@@ -251,6 +251,79 @@ export default function AdminSettings() {
       );
     }
 
+    // Admin panel refresh mode setting
+    if (setting.setting_key === 'system.admin_panel_refresh_mode') {
+      return (
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Settings className="w-4 h-4 text-blue-500" />
+              <Label className="text-base font-medium">Admin Panel Refresh Mode</Label>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Choose how the admin panel statistics refresh
+            </p>
+            <div className="flex items-center gap-4">
+              <Select 
+                value={typeof localValue === 'string' ? localValue.replace(/"/g, '') : localValue} 
+                onValueChange={(value) => {
+                  setLocalValue(value);
+                  updateSetting(setting.setting_key, JSON.stringify(value));
+                }}
+              >
+                <SelectTrigger className="w-48">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="manual">Manual Only</SelectItem>
+                  <SelectItem value="auto">Auto-refresh</SelectItem>
+                </SelectContent>
+              </Select>
+              <Badge variant="outline">
+                Current: {(typeof localValue === 'string' ? localValue.replace(/"/g, '') : localValue) === 'auto' ? 'Auto-refresh' : 'Manual'}
+              </Badge>
+            </div>
+          </div>
+        </Card>
+      );
+    }
+
+    // Admin panel poll interval setting
+    if (setting.setting_key === 'system.admin_panel_poll_interval') {
+      return (
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Clock className="w-4 h-4 text-green-500" />
+              <Label className="text-base font-medium">Auto-refresh Interval</Label>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              How often to automatically refresh admin panel statistics (when auto-refresh is enabled)
+            </p>
+            <div className="flex items-center gap-4">
+              <Select value={localValue?.toString()} onValueChange={(value) => {
+                const numValue = parseInt(value);
+                setLocalValue(numValue);
+                updateSetting(setting.setting_key, numValue);
+              }}>
+                <SelectTrigger className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="10">10 seconds</SelectItem>
+                  <SelectItem value="30">30 seconds</SelectItem>
+                  <SelectItem value="60">1 minute</SelectItem>
+                  <SelectItem value="120">2 minutes</SelectItem>
+                  <SelectItem value="300">5 minutes</SelectItem>
+                </SelectContent>
+              </Select>
+              <Badge variant="outline">Current: {localValue}s</Badge>
+            </div>
+          </div>
+        </Card>
+      );
+    }
+
     // Boolean/switch settings
     if (setting.setting_key.includes('email_alerts') || 
         setting.setting_key.includes('require_approval') || 

supabase/migrations/20251003183557_e9441757-d553-4301-951c-cc21cdb7a231.sql

@@ -0,0 +1,6 @@
+-- Add admin settings for panel refresh configuration
+INSERT INTO public.admin_settings (setting_key, setting_value, category, description)
+VALUES 
+  ('system.admin_panel_refresh_mode', '"auto"', 'system', 'Admin panel refresh mode: manual or auto'),
+  ('system.admin_panel_poll_interval', '30', 'system', 'Admin panel auto-refresh interval in seconds (10-300)')
+ON CONFLICT (setting_key) DO NOTHING;