feat: Implement system activity log (Phases 1-3)

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 } from 'lucide-react';
+import { FileText, Flag, AlertCircle, Activity, ShieldAlert, ScrollText } from 'lucide-react';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
 import { Card, CardContent } from '@/components/ui/card';
@@ -10,6 +10,7 @@ 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';
@@ -26,6 +27,7 @@ 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, 
@@ -75,6 +77,9 @@ export default function AdminDashboard() {
       case 'activity':
         recentActivityRef.current?.refresh();
         break;
+      case 'system-log':
+        systemLogRef.current?.refresh();
+        break;
     }
     
     setTimeout(() => setIsRefreshing(false), 500);
@@ -223,7 +228,7 @@ export default function AdminDashboard() {
         </div>
 
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-3 h-auto p-1">
+          <TabsList className="grid w-full grid-cols-4 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>
@@ -249,6 +254,11 @@ 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">
@@ -262,6 +272,10 @@ 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>