feat: Implement collapsible sidebar navigation

src/pages/AdminDashboard.tsx

@@ -0,0 +1,116 @@
+import { useRef, useCallback } from 'react';
+import { RefreshCw, FileText, Flag, AlertCircle } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { useModerationStats } from '@/hooks/useModerationStats';
+import { useAdminSettings } from '@/hooks/useAdminSettings';
+import { useAuth } from '@/hooks/useAuth';
+import { useUserRole } from '@/hooks/useUserRole';
+
+export default function AdminDashboard() {
+  const { user, loading: authLoading } = useAuth();
+  const { isModerator, loading: roleLoading } = useUserRole();
+  
+  // Get admin settings for polling configuration
+  const { 
+    getAdminPanelRefreshMode, 
+    getAdminPanelPollInterval,
+  } = useAdminSettings();
+  
+  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(() => {
+    refreshStats();
+  }, [refreshStats]);
+
+  return (
+    <AdminLayout onRefresh={handleRefresh}>
+      <div className="container mx-auto px-6 py-8 max-w-7xl">
+        {/* Refresh status indicator */}
+        <div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
+          <RefreshCw className="w-3 h-3" />
+          {refreshMode === 'auto' ? (
+            <span>Auto-refresh: every {pollInterval / 1000}s</span>
+          ) : (
+            <span>Manual refresh</span>
+          )}
+          {lastUpdated && (
+            <span>• {lastUpdated.toLocaleTimeString()}</span>
+          )}
+        </div>
+
+        {/* Stats Overview */}
+        <div>
+          <h1 className="text-2xl font-bold mb-6">Dashboard Overview</h1>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Card className="border-border/50 hover:border-border/80 transition-colors">
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 rounded-lg bg-amber-500/10">
+                      <FileText className="h-5 w-5 text-amber-700 dark:text-amber-300" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-muted-foreground">Pending</p>
+                      <p className="text-xs text-muted-foreground/80">Submissions</p>
+                    </div>
+                  </div>
+                  <div className="text-4xl font-bold text-amber-700 dark:text-amber-300">
+                    {stats.pendingSubmissions}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+            
+            <Card className="border-border/50 hover:border-border/80 transition-colors">
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 rounded-lg bg-red-500/10">
+                      <Flag className="h-5 w-5 text-red-700 dark:text-red-300" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-muted-foreground">Open</p>
+                      <p className="text-xs text-muted-foreground/80">Reports</p>
+                    </div>
+                  </div>
+                  <div className="text-4xl font-bold text-red-700 dark:text-red-300">
+                    {stats.openReports}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+            
+            <Card className="border-border/50 hover:border-border/80 transition-colors">
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 rounded-lg bg-orange-500/10">
+                      <AlertCircle className="h-5 w-5 text-orange-700 dark:text-orange-300" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-muted-foreground">Flagged</p>
+                      <p className="text-xs text-muted-foreground/80">Content</p>
+                    </div>
+                  </div>
+                  <div className="text-4xl font-bold text-orange-700 dark:text-orange-300">
+                    {stats.flaggedContent}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}

src/pages/AdminModeration.tsx

@@ -0,0 +1,22 @@
+import { useRef, useCallback } from 'react';
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
+
+export default function AdminModeration() {
+  const moderationQueueRef = useRef<ModerationQueueRef>(null);
+
+  const handleRefresh = useCallback(() => {
+    moderationQueueRef.current?.refresh();
+  }, []);
+
+  return (
+    <AdminLayout onRefresh={handleRefresh}>
+      <div className="container mx-auto px-6 py-8 max-w-7xl">
+        <div>
+          <h1 className="text-2xl font-bold mb-6">Moderation Queue</h1>
+          <ModerationQueue ref={moderationQueueRef} />
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}

src/pages/AdminReports.tsx

@@ -0,0 +1,22 @@
+import { useRef, useCallback } from 'react';
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
+
+export default function AdminReports() {
+  const reportsQueueRef = useRef<ReportsQueueRef>(null);
+
+  const handleRefresh = useCallback(() => {
+    reportsQueueRef.current?.refresh();
+  }, []);
+
+  return (
+    <AdminLayout onRefresh={handleRefresh}>
+      <div className="container mx-auto px-6 py-8 max-w-7xl">
+        <div>
+          <h1 className="text-2xl font-bold mb-6">Reports Queue</h1>
+          <ReportsQueue ref={reportsQueueRef} />
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}

src/pages/AdminSettings.tsx

@@ -7,7 +7,7 @@ import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
-import { AdminHeader } from '@/components/layout/AdminHeader';
+import { AdminLayout } from '@/components/layout/AdminLayout';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
@@ -28,20 +28,18 @@ export default function AdminSettings() {
 
   if (roleLoading || isLoading) {
     return (
-      <>
-        <AdminHeader />
+      <AdminLayout>
         <div className="flex items-center justify-center min-h-screen">
           <Loader2 className="w-8 h-8 animate-spin" />
         </div>
-      </>
+      </AdminLayout>
     );
   }
 
   if (!user || !isSuperuser()) {
     return (
-      <>
-        <AdminHeader />
-        <div className="container mx-auto px-4 py-8">
+      <AdminLayout>
+        <div className="container mx-auto px-6 py-8">
           <div className="text-center space-y-4">
             <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
             <p className="text-muted-foreground">You don't have permission to access admin settings.</p>
@@ -52,15 +50,14 @@ export default function AdminSettings() {
             )}
           </div>
         </div>
-      </>
+      </AdminLayout>
     );
   }
 
   if (!settings || settings.length === 0) {
     return (
-      <>
-        <AdminHeader />
-        <div className="container mx-auto px-4 py-8">
+      <AdminLayout>
+        <div className="container mx-auto px-6 py-8">
           <div className="text-center space-y-4">
             <h1 className="text-2xl font-bold mb-4">No Settings Found</h1>
             <p className="text-muted-foreground">
@@ -73,7 +70,7 @@ export default function AdminSettings() {
             )}
           </div>
         </div>
-      </>
+      </AdminLayout>
     );
   }
 
@@ -431,11 +428,10 @@ export default function AdminSettings() {
   };
 
   return (
-    <>
-      <AdminHeader />
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
+    <AdminLayout>
+      <div className="container mx-auto px-6 py-8 max-w-6xl">
         <div className="mb-8">
-          <h1 className="text-3xl font-bold mb-2">Admin Settings</h1>
+          <h1 className="text-2xl font-bold mb-2">Admin Settings</h1>
           <p className="text-muted-foreground">
             Configure system-wide settings and preferences with easy-to-use controls
           </p>
@@ -598,6 +594,6 @@ export default function AdminSettings() {
           </TabsContent>
         </Tabs>
       </div>
-    </>
+    </AdminLayout>
   );
 }

src/pages/AdminUsers.tsx

@@ -0,0 +1,15 @@
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { UserManagement } from '@/components/admin/UserManagement';
+
+export default function AdminUsers() {
+  return (
+    <AdminLayout>
+      <div className="container mx-auto px-6 py-8 max-w-7xl">
+        <div>
+          <h1 className="text-2xl font-bold mb-6">User Management</h1>
+          <UserManagement />
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}