feat: Implement tabbed dashboard layout

src/components/moderation/RecentActivity.tsx

@@ -0,0 +1,176 @@
+import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/hooks/useAuth';
+import { useToast } from '@/hooks/use-toast';
+import { ActivityCard } from './ActivityCard';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Activity as ActivityIcon } from 'lucide-react';
+
+interface ActivityItem {
+  id: string;
+  type: 'submission' | 'report' | 'review';
+  action: 'approved' | 'rejected' | 'reviewed' | 'dismissed' | 'flagged';
+  entity_type?: string;
+  entity_name?: string;
+  timestamp: string;
+  moderator_id?: string;
+  moderator?: {
+    username: string;
+    display_name?: string;
+    avatar_url?: string;
+  };
+}
+
+export interface RecentActivityRef {
+  refresh: () => void;
+}
+
+export const RecentActivity = forwardRef<RecentActivityRef>((props, ref) => {
+  const [activities, setActivities] = useState<ActivityItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { user } = useAuth();
+  const { toast } = useToast();
+
+  useImperativeHandle(ref, () => ({
+    refresh: fetchRecentActivity
+  }));
+
+  const fetchRecentActivity = async () => {
+    if (!user) return;
+
+    try {
+      setLoading(true);
+
+      // Fetch recent approved/rejected submissions
+      const { data: submissions, error: submissionsError } = await supabase
+        .from('content_submissions')
+        .select('id, status, reviewed_at, reviewer_id, submission_type')
+        .in('status', ['approved', 'rejected'])
+        .not('reviewed_at', 'is', null)
+        .order('reviewed_at', { ascending: false })
+        .limit(15);
+
+      if (submissionsError) throw submissionsError;
+
+      // Fetch recent report resolutions
+      const { data: reports, error: reportsError } = await supabase
+        .from('reports')
+        .select('id, status, reviewed_at, reviewed_by, reported_entity_type')
+        .in('status', ['reviewed', 'dismissed'])
+        .not('reviewed_at', 'is', null)
+        .order('reviewed_at', { ascending: false })
+        .limit(15);
+
+      if (reportsError) throw reportsError;
+
+      // Fetch recent review moderations
+      const { data: reviews, error: reviewsError } = await supabase
+        .from('reviews')
+        .select('id, moderation_status, moderated_at, moderated_by, park_id, ride_id')
+        .in('moderation_status', ['approved', 'rejected', 'flagged'])
+        .not('moderated_at', 'is', null)
+        .order('moderated_at', { ascending: false })
+        .limit(15);
+
+      if (reviewsError) throw reviewsError;
+
+      // Get unique moderator IDs
+      const moderatorIds = [
+        ...(submissions?.map(s => s.reviewer_id).filter(Boolean) || []),
+        ...(reports?.map(r => r.reviewed_by).filter(Boolean) || []),
+        ...(reviews?.map(r => r.moderated_by).filter(Boolean) || []),
+      ].filter((id, index, arr) => id && arr.indexOf(id) === index);
+
+      // Fetch moderator profiles
+      const { data: profiles } = await supabase
+        .from('profiles')
+        .select('user_id, username, display_name, avatar_url')
+        .in('user_id', moderatorIds);
+
+      const profileMap = new Map(profiles?.map(p => [p.user_id, p]) || []);
+
+      // Combine all activities
+      const allActivities: ActivityItem[] = [
+        ...(submissions?.map(s => ({
+          id: s.id,
+          type: 'submission' as const,
+          action: s.status as 'approved' | 'rejected',
+          entity_type: s.submission_type,
+          timestamp: s.reviewed_at!,
+          moderator_id: s.reviewer_id,
+          moderator: s.reviewer_id ? profileMap.get(s.reviewer_id) : undefined,
+        })) || []),
+        ...(reports?.map(r => ({
+          id: r.id,
+          type: 'report' as const,
+          action: r.status as 'reviewed' | 'dismissed',
+          entity_type: r.reported_entity_type,
+          timestamp: r.reviewed_at!,
+          moderator_id: r.reviewed_by,
+          moderator: r.reviewed_by ? profileMap.get(r.reviewed_by) : undefined,
+        })) || []),
+        ...(reviews?.map(r => ({
+          id: r.id,
+          type: 'review' as const,
+          action: r.moderation_status as 'approved' | 'rejected' | 'flagged',
+          timestamp: r.moderated_at!,
+          moderator_id: r.moderated_by,
+          moderator: r.moderated_by ? profileMap.get(r.moderated_by) : undefined,
+        })) || []),
+      ];
+
+      // Sort by timestamp (newest first)
+      allActivities.sort((a, b) => 
+        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+      );
+
+      setActivities(allActivities.slice(0, 20)); // Keep top 20 most recent
+    } catch (error: any) {
+      console.error('Error fetching recent activity:', error);
+      toast({
+        title: "Error",
+        description: "Failed to load recent activity",
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRecentActivity();
+  }, [user]);
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-24 w-full" />
+      </div>
+    );
+  }
+
+  if (activities.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <ActivityIcon className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+        <h3 className="text-xl font-semibold mb-2">No Recent Activity</h3>
+        <p className="text-muted-foreground">
+          Moderation activity will appear here once actions are taken.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {activities.map((activity) => (
+        <ActivityCard key={`${activity.type}-${activity.id}`} activity={activity} />
+      ))}
+    </div>
+  );
+});
+
+RecentActivity.displayName = 'RecentActivity';