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,47 +28,88 @@ 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
-      const { data: reviews, error: reviewsError } = await supabase
-        .from('reviews')
-        .select(`
-          id,
-          title,
-          content,
-          rating,
-          created_at,
-          user_id,
-          moderation_status
-        `)
-        .in('moderation_status', ['pending', 'flagged'])
-        .order('created_at', { ascending: true });
+      setLoading(true);
+      
+      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'];
+      }
 
-      if (reviewsError) throw reviewsError;
+      // Fetch reviews
+      let reviews = [];
+      if (reviewStatuses.length > 0) {
+        const { data: reviewsData, error: reviewsError } = await supabase
+          .from('reviews')
+          .select(`
+            id,
+            title,
+            content,
+            rating,
+            created_at,
+            user_id,
+            moderation_status
+          `)
+          .in('moderation_status', reviewStatuses)
+          .order('created_at', { ascending: false });
 
-      // Fetch pending content submissions
-      const { data: submissions, error: submissionsError } = await supabase
-        .from('content_submissions')
-        .select(`
-          id,
-          content,
-          submission_type,
-          created_at,
-          user_id,
-          status
-        `)
-        .eq('status', 'pending')
-        .order('created_at', { ascending: true });
+        if (reviewsError) throw reviewsError;
+        reviews = reviewsData || [];
+      }
 
-      if (submissionsError) throw submissionsError;
+      // Fetch content submissions
+      let submissions = [];
+      if (submissionStatuses.length > 0) {
+        const { data: submissionsData, error: submissionsError } = await supabase
+          .from('content_submissions')
+          .select(`
+            id,
+            content,
+            submission_type,
+            created_at,
+            user_id,
+            status
+          `)
+          .in('status', submissionStatuses)
+          .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),
-        ...(submissions || []).map(s => s.user_id)
+        ...reviews.map(r => r.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
-      formattedItems.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+      // Sort by creation date (newest first for better UX)
+      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
-      setItems(prev => prev.filter(i => i.id !== item.id));
+      // 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,120 +219,194 @@ export function ModerationQueue() {
     }
   };
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center p-8">
-        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
-      </div>
-    );
-  }
+  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';
+    }
+  };
 
-  if (items.length === 0) {
-    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>
-        <p className="text-muted-foreground">
-          No pending items require moderation at this time.
-        </p>
-      </div>
-    );
-  }
+  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.';
+    }
+  };
 
-  return (
-    <div className="space-y-6">
-      {items.map((item) => (
-        <Card key={item.id} className="border-l-4 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'}>
-                  {item.type === 'review' ? 'Review' : 'Submission'}
-                </Badge>
-                {item.status === 'flagged' && (
-                  <Badge variant="destructive">Flagged</Badge>
-                )}
-              </div>
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <Calendar className="w-4 h-4" />
-                {format(new Date(item.created_at), 'MMM d, yyyy HH:mm')}
-              </div>
-            </div>
-            
-            {item.user_profile && (
-              <div className="flex items-center gap-2 text-sm">
-                <User className="w-4 h-4 text-muted-foreground" />
-                <span className="font-medium">
-                  {item.user_profile.display_name || item.user_profile.username}
-                </span>
-                {item.user_profile.display_name && (
-                  <span className="text-muted-foreground">
-                    @{item.user_profile.username}
-                  </span>
-                )}
-              </div>
-            )}
-          </CardHeader>
-          
-          <CardContent className="space-y-4">
-            <div className="bg-muted/50 p-4 rounded-lg">
-              {item.type === 'review' ? (
-                <div>
-                  {item.content.title && (
-                    <h4 className="font-semibold mb-2">{item.content.title}</h4>
-                  )}
-                  {item.content.content && (
-                    <p className="text-sm mb-2">{item.content.content}</p>
-                  )}
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <span>Rating: {item.content.rating}/5</span>
-                  </div>
+  const QueueContent = () => {
+    if (loading) {
+      return (
+        <div className="flex items-center justify-center p-8">
+          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+        </div>
+      );
+    }
+
+    if (items.length === 0) {
+      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">No items found</h3>
+          <p className="text-muted-foreground">
+            {getEmptyStateMessage(activeFilter)}
+          </p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-6">
+        {items.map((item) => (
+          <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={getStatusBadgeVariant(item.status)}>
+                    {item.type === 'review' ? 'Review' : 'Submission'}
+                  </Badge>
+                  <Badge variant={getStatusBadgeVariant(item.status)}>
+                    {item.status.charAt(0).toUpperCase() + item.status.slice(1)}
+                  </Badge>
                 </div>
-              ) : (
-                <div>
-                  <div className="text-sm text-muted-foreground mb-2">
-                    Type: {item.content.submission_type}
-                  </div>
-                  <pre className="text-sm whitespace-pre-wrap">
-                    {JSON.stringify(item.content.content, null, 2)}
-                  </pre>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Calendar className="w-4 h-4" />
+                  {format(new Date(item.created_at), 'MMM d, yyyy HH:mm')}
+                </div>
+              </div>
+              
+              {item.user_profile && (
+                <div className="flex items-center gap-2 text-sm">
+                  <User className="w-4 h-4 text-muted-foreground" />
+                  <span className="font-medium">
+                    {item.user_profile.display_name || item.user_profile.username}
+                  </span>
+                  {item.user_profile.display_name && (
+                    <span className="text-muted-foreground">
+                      @{item.user_profile.username}
+                    </span>
+                  )}
                 </div>
               )}
-            </div>
+            </CardHeader>
             
-            <div className="space-y-2">
-              <Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
-              <Textarea
-                id={`notes-${item.id}`}
-                placeholder="Add notes about your moderation decision..."
-                value={notes[item.id] || ''}
-                onChange={(e) => setNotes(prev => ({ ...prev, [item.id]: e.target.value }))}
-                rows={2}
-              />
-            </div>
-            
-            <div className="flex gap-2 pt-2">
-              <Button
-                onClick={() => handleModerationAction(item, 'approved', notes[item.id])}
-                disabled={actionLoading === item.id}
-                className="flex-1"
-              >
-                <CheckCircle className="w-4 h-4 mr-2" />
-                Approve
-              </Button>
-              <Button
-                variant="destructive"
-                onClick={() => handleModerationAction(item, 'rejected', notes[item.id])}
-                disabled={actionLoading === item.id}
-                className="flex-1"
-              >
-                <XCircle className="w-4 h-4 mr-2" />
-                Reject
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
+            <CardContent className="space-y-4">
+              <div className="bg-muted/50 p-4 rounded-lg">
+                {item.type === 'review' ? (
+                  <div>
+                    {item.content.title && (
+                      <h4 className="font-semibold mb-2">{item.content.title}</h4>
+                    )}
+                    {item.content.content && (
+                      <p className="text-sm mb-2">{item.content.content}</p>
+                    )}
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <span>Rating: {item.content.rating}/5</span>
+                    </div>
+                  </div>
+                ) : (
+                  <div>
+                    <div className="text-sm text-muted-foreground mb-2">
+                      Type: {item.content.submission_type}
+                    </div>
+                    <pre className="text-sm whitespace-pre-wrap">
+                      {JSON.stringify(item.content.content, null, 2)}
+                    </pre>
+                  </div>
+                )}
+              </div>
+              
+              {(item.status === 'pending' || item.status === 'flagged') && (
+                <>
+                  <div className="space-y-2">
+                    <Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
+                    <Textarea
+                      id={`notes-${item.id}`}
+                      placeholder="Add notes about your moderation decision..."
+                      value={notes[item.id] || ''}
+                      onChange={(e) => setNotes(prev => ({ ...prev, [item.id]: e.target.value }))}
+                      rows={2}
+                    />
+                  </div>
+                  
+                  <div className="flex gap-2 pt-2">
+                    <Button
+                      onClick={() => handleModerationAction(item, 'approved', notes[item.id])}
+                      disabled={actionLoading === item.id}
+                      className="flex-1"
+                    >
+                      <CheckCircle className="w-4 h-4 mr-2" />
+                      Approve
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      onClick={() => handleModerationAction(item, 'rejected', notes[item.id])}
+                      disabled={actionLoading === item.id}
+                      className="flex-1"
+                    >
+                      <XCircle className="w-4 h-4 mr-2" />
+                      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>
   );
 }