feat: Implement tabbed dashboard layout

src/pages/AdminDashboard.tsx

@@ -1,10 +1,15 @@
 import { useRef, useEffect, useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { FileText, Flag, AlertCircle } from 'lucide-react';
+import { FileText, Flag, AlertCircle, Activity } from 'lucide-react';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
 import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 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 { useModerationStats } from '@/hooks/useModerationStats';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
 
@@ -13,6 +18,11 @@ export default function AdminDashboard() {
   const { isModerator, loading: roleLoading } = useUserRole();
   const navigate = useNavigate();
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [activeTab, setActiveTab] = useState('moderation');
+  
+  const moderationQueueRef = useRef<ModerationQueueRef>(null);
+  const reportsQueueRef = useRef<any>(null);
+  const recentActivityRef = useRef<any>(null);
   
   const { 
     getAdminPanelRefreshMode, 
@@ -31,8 +41,36 @@ export default function AdminDashboard() {
   const handleRefresh = useCallback(async () => {
     setIsRefreshing(true);
     await refreshStats();
+    
+    // Refresh active tab's content
+    switch (activeTab) {
+      case 'moderation':
+        moderationQueueRef.current?.refresh();
+        break;
+      case 'reports':
+        reportsQueueRef.current?.refresh();
+        break;
+      case 'activity':
+        recentActivityRef.current?.refresh();
+        break;
+    }
+    
     setTimeout(() => setIsRefreshing(false), 500);
-  }, [refreshStats]);
+  }, [refreshStats, activeTab]);
+
+  const handleStatCardClick = (cardType: 'submissions' | 'reports' | 'flagged') => {
+    switch (cardType) {
+      case 'submissions':
+        setActiveTab('moderation');
+        break;
+      case 'reports':
+        setActiveTab('reports');
+        break;
+      case 'flagged':
+        setActiveTab('moderation');
+        break;
+    }
+  };
 
   useEffect(() => {
     if (!authLoading && !roleLoading) {
@@ -71,21 +109,21 @@ export default function AdminDashboard() {
       value: stats.pendingSubmissions,
       icon: FileText,
       color: 'amber',
-      link: '/admin/moderation',
+      type: 'submissions' as const,
     },
     {
       label: 'Open Reports',
       value: stats.openReports,
       icon: Flag,
       color: 'red',
-      link: '/admin/reports',
+      type: 'reports' as const,
     },
     {
       label: 'Flagged Content',
       value: stats.flaggedContent,
       icon: AlertCircle,
       color: 'orange',
-      link: '/admin/moderation',
+      type: 'flagged' as const,
     },
   ];
 
@@ -101,7 +139,7 @@ export default function AdminDashboard() {
         <div>
           <h1 className="text-2xl font-bold tracking-tight">Admin Dashboard</h1>
           <p className="text-muted-foreground mt-1">
-            Overview of moderation activity and pending items
+            Central hub for all moderation activity
           </p>
         </div>
 
@@ -131,7 +169,7 @@ export default function AdminDashboard() {
               <Card
                 key={card.label}
                 className={`${colors.card} transition-colors cursor-pointer`}
-                onClick={() => navigate(card.link)}
+                onClick={() => handleStatCardClick(card.type)}
               >
                 <CardContent className="flex items-center justify-between p-6">
                   <div className="flex items-center gap-4">
@@ -150,6 +188,48 @@ 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">
+            <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>
+              <span className="sm:hidden">Queue</span>
+              {stats.pendingSubmissions > 0 && (
+                <Badge variant="secondary" className="ml-1 bg-amber-500/20 text-amber-700 dark:text-amber-300">
+                  {stats.pendingSubmissions}
+                </Badge>
+              )}
+            </TabsTrigger>
+            <TabsTrigger value="reports" className="flex items-center gap-2 py-3">
+              <Flag className="w-4 h-4" />
+              <span className="hidden sm:inline">Reports</span>
+              <span className="sm:hidden">Reports</span>
+              {stats.openReports > 0 && (
+                <Badge variant="secondary" className="ml-1 bg-red-500/20 text-red-700 dark:text-red-300">
+                  {stats.openReports}
+                </Badge>
+              )}
+            </TabsTrigger>
+            <TabsTrigger value="activity" className="flex items-center gap-2 py-3">
+              <Activity className="w-4 h-4" />
+              <span className="hidden sm:inline">Recent Activity</span>
+              <span className="sm:hidden">Activity</span>
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="moderation" className="mt-6">
+            <ModerationQueue ref={moderationQueueRef} />
+          </TabsContent>
+
+          <TabsContent value="reports" className="mt-6">
+            <ReportsQueue ref={reportsQueueRef} />
+          </TabsContent>
+
+          <TabsContent value="activity" className="mt-6">
+            <RecentActivity ref={recentActivityRef} />
+          </TabsContent>
+        </Tabs>
       </div>
     </AdminLayout>
   );