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 */}