Refactor system log to own page

src/App.tsx

@@ -37,6 +37,7 @@ import Admin from "./pages/Admin";
 import AdminDashboard from "./pages/AdminDashboard";
 import AdminModeration from "./pages/AdminModeration";
 import AdminReports from "./pages/AdminReports";
+import AdminSystemLog from "./pages/AdminSystemLog";
 import AdminUsers from "./pages/AdminUsers";
 import AdminSettings from "./pages/AdminSettings";
 
@@ -78,6 +79,7 @@ function AppContent() {
                 <Route path="/admin" element={<AdminDashboard />} />
                 <Route path="/admin/moderation" element={<AdminModeration />} />
                 <Route path="/admin/reports" element={<AdminReports />} />
+                <Route path="/admin/system-log" element={<AdminSystemLog />} />
                 <Route path="/admin/users" element={<AdminUsers />} />
                 <Route path="/admin/settings" element={<AdminSettings />} />
                 <Route path="/terms" element={<Terms />} />

src/components/layout/AdminSidebar.tsx

@@ -1,4 +1,4 @@
-import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft } from 'lucide-react';
+import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft, ScrollText } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useUserRole } from '@/hooks/useUserRole';
 import {
@@ -37,6 +37,11 @@ export function AdminSidebar() {
       url: '/admin/reports',
       icon: Flag,
     },
+    {
+      title: 'System Log',
+      url: '/admin/system-log',
+      icon: ScrollText,
+    },
     {
       title: 'Users',
       url: '/admin/users',

src/pages/AdminDashboard.tsx

@@ -1,6 +1,6 @@
 import { useRef, useEffect, useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { FileText, Flag, AlertCircle, Activity, ShieldAlert, ScrollText } from 'lucide-react';
+import { FileText, Flag, AlertCircle, Activity, ShieldAlert } from 'lucide-react';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
 import { Card, CardContent } from '@/components/ui/card';
@@ -10,7 +10,6 @@ import { AdminLayout } from '@/components/layout/AdminLayout';
 import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
 import { ReportsQueue } from '@/components/moderation/ReportsQueue';
 import { RecentActivity } from '@/components/moderation/RecentActivity';
-import { SystemActivityLog, SystemActivityLogRef } from '@/components/admin/SystemActivityLog';
 import { useModerationStats } from '@/hooks/useModerationStats';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
 import { supabase } from '@/integrations/supabase/client';
@@ -27,7 +26,6 @@ export default function AdminDashboard() {
   const moderationQueueRef = useRef<ModerationQueueRef>(null);
   const reportsQueueRef = useRef<any>(null);
   const recentActivityRef = useRef<any>(null);
-  const systemLogRef = useRef<SystemActivityLogRef>(null);
   
   const { 
     getAdminPanelRefreshMode, 
@@ -77,9 +75,6 @@ export default function AdminDashboard() {
       case 'activity':
         recentActivityRef.current?.refresh();
         break;
-      case 'system-log':
-        systemLogRef.current?.refresh();
-        break;
     }
     
     setTimeout(() => setIsRefreshing(false), 500);
@@ -228,7 +223,7 @@ export default function AdminDashboard() {
         </div>
 
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-4 h-auto p-1">
+          <TabsList className="grid w-full grid-cols-3 h-auto p-1">
             <TabsTrigger value="moderation" className="flex items-center gap-2 py-3">
               <FileText className="w-4 h-4" />
               <span className="hidden sm:inline">Moderation Queue</span>
@@ -254,11 +249,6 @@ export default function AdminDashboard() {
               <span className="hidden sm:inline">Recent Activity</span>
               <span className="sm:hidden">Activity</span>
             </TabsTrigger>
-            <TabsTrigger value="system-log" className="flex items-center gap-2 py-3">
-              <ScrollText className="w-4 h-4" />
-              <span className="hidden sm:inline">System Log</span>
-              <span className="sm:hidden">Log</span>
-            </TabsTrigger>
           </TabsList>
 
           <TabsContent value="moderation" className="mt-6">
@@ -272,10 +262,6 @@ export default function AdminDashboard() {
           <TabsContent value="activity" className="mt-6">
             <RecentActivity ref={recentActivityRef} />
           </TabsContent>
-
-          <TabsContent value="system-log" className="mt-6">
-            <SystemActivityLog ref={systemLogRef} limit={50} />
-          </TabsContent>
         </Tabs>
       </div>
     </AdminLayout>

src/pages/AdminSystemLog.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@/hooks/useAuth';
+import { useUserRole } from '@/hooks/useUserRole';
+import { AdminLayout } from '@/components/layout/AdminLayout';
+import { SystemActivityLog } from '@/components/admin/SystemActivityLog';
+
+export default function AdminSystemLog() {
+  const { user, loading: authLoading } = useAuth();
+  const { isModerator, loading: roleLoading } = useUserRole();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!authLoading && !roleLoading) {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+      
+      if (!isModerator()) {
+        navigate('/');
+        return;
+      }
+    }
+  }, [user, authLoading, roleLoading, navigate, isModerator]);
+
+  if (authLoading || roleLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading system log...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user || !isModerator()) {
+    return null;
+  }
+
+  return (
+    <AdminLayout>
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">System Activity Log</h1>
+          <p className="text-muted-foreground mt-1">
+            Complete audit trail of all system changes and administrative actions
+          </p>
+        </div>
+
+        <SystemActivityLog limit={100} showFilters={true} />
+      </div>
+    </AdminLayout>
+  );
+}