Refactor moderation queue tabs

src/components/moderation/ModerationQueue.tsx

@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react';
-import { CheckCircle, XCircle, Eye, Calendar, User } from 'lucide-react';
+import { CheckCircle, XCircle, Eye, Calendar, User, Filter } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { format } from 'date-fns';
@@ -27,12 +28,47 @@ export function ModerationQueue() {
   const [loading, setLoading] = useState(true);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
   const [notes, setNotes] = useState<Record<string, string>>({});
+  const [activeFilter, setActiveFilter] = useState<string>('pending');
   const { toast } = useToast();
 
-  const fetchItems = async () => {
+  const fetchItems = async (filter: string = 'pending') => {
     try {
-      // Fetch pending reviews with profile data
+      setLoading(true);
-      const { data: reviews, error: reviewsError } = await supabase
+      
+      let reviewStatuses: string[] = [];
+      let submissionStatuses: string[] = [];
+      
+      // Define status filters
+      switch (filter) {
+        case 'all':
+          reviewStatuses = ['pending', 'flagged', 'approved', 'rejected'];
+          submissionStatuses = ['pending', 'approved', 'rejected'];
+          break;
+        case 'pending':
+          reviewStatuses = ['pending'];
+          submissionStatuses = ['pending'];
+          break;
+        case 'flagged':
+          reviewStatuses = ['flagged'];
+          submissionStatuses = []; // Content submissions don't have flagged status
+          break;
+        case 'approved':
+          reviewStatuses = ['approved'];
+          submissionStatuses = ['approved'];
+          break;
+        case 'rejected':
+          reviewStatuses = ['rejected'];
+          submissionStatuses = ['rejected'];
+          break;
+        default:
+          reviewStatuses = ['pending', 'flagged'];
+          submissionStatuses = ['pending'];
+      }
+
+      // Fetch reviews
+      let reviews = [];
+      if (reviewStatuses.length > 0) {
+        const { data: reviewsData, error: reviewsError } = await supabase
           .from('reviews')
           .select(`
             id,
@@ -43,13 +79,17 @@ export function ModerationQueue() {
             user_id,
             moderation_status
           `)
-        .in('moderation_status', ['pending', 'flagged'])
+          .in('moderation_status', reviewStatuses)
-        .order('created_at', { ascending: true });
+          .order('created_at', { ascending: false });
 
         if (reviewsError) throw reviewsError;
+        reviews = reviewsData || [];
+      }
 
-      // Fetch pending content submissions
+      // Fetch content submissions
-      const { data: submissions, error: submissionsError } = await supabase
+      let submissions = [];
+      if (submissionStatuses.length > 0) {
+        const { data: submissionsData, error: submissionsError } = await supabase
           .from('content_submissions')
           .select(`
             id,
@@ -59,15 +99,17 @@ export function ModerationQueue() {
             user_id,
             status
           `)
-        .eq('status', 'pending')
+          .in('status', submissionStatuses)
-        .order('created_at', { ascending: true });
+          .order('created_at', { ascending: false });
 
         if (submissionsError) throw submissionsError;
+        submissions = submissionsData || [];
+      }
 
       // Get unique user IDs to fetch profiles
       const userIds = [
-        ...(reviews || []).map(r => r.user_id),
+        ...reviews.map(r => r.user_id),
-        ...(submissions || []).map(s => s.user_id)
+        ...submissions.map(s => s.user_id)
       ];
       
       // Fetch profiles for all users
@@ -80,7 +122,7 @@ export function ModerationQueue() {
 
       // Combine and format items
       const formattedItems: ModerationItem[] = [
-        ...(reviews || []).map(review => ({
+        ...reviews.map(review => ({
           id: review.id,
           type: 'review' as const,
           content: review,
@@ -89,7 +131,7 @@ export function ModerationQueue() {
           status: review.moderation_status,
           user_profile: profileMap.get(review.user_id),
         })),
-        ...(submissions || []).map(submission => ({
+        ...submissions.map(submission => ({
           id: submission.id,
           type: 'content_submission' as const,
           content: submission,
@@ -100,8 +142,8 @@ export function ModerationQueue() {
         })),
       ];
 
-      // Sort by creation date
+      // Sort by creation date (newest first for better UX)
-      formattedItems.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+      formattedItems.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
 
       setItems(formattedItems);
     } catch (error) {
@@ -117,8 +159,8 @@ export function ModerationQueue() {
   };
 
   useEffect(() => {
-    fetchItems();
+    fetchItems(activeFilter);
-  }, []);
+  }, [activeFilter]);
 
   const handleModerationAction = async (
     item: ModerationItem,
@@ -151,8 +193,13 @@ export function ModerationQueue() {
         description: `The ${item.type} has been ${action}`,
       });
 
-      // Remove item from queue
+      // Remove item from queue if it's no longer in the active filter
+      if (activeFilter === 'pending' || activeFilter === 'flagged') {
         setItems(prev => prev.filter(i => i.id !== item.id));
+      } else {
+        // Refresh the queue to show updated status
+        fetchItems(activeFilter);
+      }
       
       // Clear notes
       setNotes(prev => {
@@ -172,6 +219,39 @@ export function ModerationQueue() {
     }
   };
 
+  const getStatusBadgeVariant = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return 'secondary';
+      case 'flagged':
+        return 'destructive';
+      case 'approved':
+        return 'default';
+      case 'rejected':
+        return 'outline';
+      default:
+        return 'secondary';
+    }
+  };
+
+  const getEmptyStateMessage = (filter: string) => {
+    switch (filter) {
+      case 'pending':
+        return 'No pending items require moderation at this time.';
+      case 'flagged':
+        return 'No flagged content found.';
+      case 'approved':
+        return 'No approved content found.';
+      case 'rejected':
+        return 'No rejected content found.';
+      case 'all':
+        return 'No moderation items found.';
+      default:
+        return 'No items found for the selected filter.';
+    }
+  };
+
+  const QueueContent = () => {
     if (loading) {
       return (
         <div className="flex items-center justify-center p-8">
@@ -184,9 +264,9 @@ export function ModerationQueue() {
       return (
         <div className="text-center py-8">
           <CheckCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
-        <h3 className="text-lg font-semibold mb-2">Queue is empty</h3>
+          <h3 className="text-lg font-semibold mb-2">No items found</h3>
           <p className="text-muted-foreground">
-          No pending items require moderation at this time.
+            {getEmptyStateMessage(activeFilter)}
           </p>
         </div>
       );
@@ -195,16 +275,21 @@ export function ModerationQueue() {
     return (
       <div className="space-y-6">
         {items.map((item) => (
-        <Card key={item.id} className="border-l-4 border-l-amber-500">
+          <Card key={item.id} className={`border-l-4 ${
+            item.status === 'flagged' ? 'border-l-red-500' :
+            item.status === 'approved' ? 'border-l-green-500' :
+            item.status === 'rejected' ? 'border-l-red-400' :
+            'border-l-amber-500'
+          }`}>
             <CardHeader className="pb-4">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
-                <Badge variant={item.status === 'flagged' ? 'destructive' : 'secondary'}>
+                  <Badge variant={getStatusBadgeVariant(item.status)}>
                     {item.type === 'review' ? 'Review' : 'Submission'}
                   </Badge>
-                {item.status === 'flagged' && (
+                  <Badge variant={getStatusBadgeVariant(item.status)}>
-                  <Badge variant="destructive">Flagged</Badge>
+                    {item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-                )}
+                  </Badge>
                 </div>
                 <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Calendar className="w-4 h-4" />
@@ -253,6 +338,8 @@ export function ModerationQueue() {
                 )}
               </div>
               
+              {(item.status === 'pending' || item.status === 'flagged') && (
+                <>
                   <div className="space-y-2">
                     <Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
                     <Textarea
@@ -283,9 +370,43 @@ export function ModerationQueue() {
                       Reject
                     </Button>
                   </div>
+                </>
+              )}
             </CardContent>
           </Card>
         ))}
       </div>
     );
+  };
+
+  return (
+    <Tabs value={activeFilter} onValueChange={setActiveFilter} className="space-y-4">
+      <TabsList className="grid w-full grid-cols-5">
+        <TabsTrigger value="all" className="flex items-center gap-2">
+          <Filter className="w-4 h-4" />
+          All
+        </TabsTrigger>
+        <TabsTrigger value="pending" className="flex items-center gap-2">
+          <Eye className="w-4 h-4" />
+          Pending
+        </TabsTrigger>
+        <TabsTrigger value="flagged" className="flex items-center gap-2">
+          <XCircle className="w-4 h-4" />
+          Flagged
+        </TabsTrigger>
+        <TabsTrigger value="approved" className="flex items-center gap-2">
+          <CheckCircle className="w-4 h-4" />
+          Approved
+        </TabsTrigger>
+        <TabsTrigger value="rejected" className="flex items-center gap-2">
+          <XCircle className="w-4 h-4" />
+          Rejected
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value={activeFilter}>
+        <QueueContent />
+      </TabsContent>
+    </Tabs>
+  );
 }