Add admin panel refresh settings

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') ||