feat: Implement multi-level moderation filtering and photo submissions

src/components/moderation/ModerationQueue.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { CheckCircle, XCircle, Eye, Calendar, User, Filter } from 'lucide-react';
+import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileText, Image } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
@@ -17,21 +17,26 @@ interface ModerationItem {
   created_at: string;
   user_id: string;
   status: string;
+  submission_type?: string;
   user_profile?: {
     username: string;
     display_name?: string;
   };
 }
 
+type EntityFilter = 'all' | 'reviews' | 'submissions' | 'photos';
+type StatusFilter = 'all' | 'pending' | 'flagged' | 'approved' | 'rejected';
+
 export function ModerationQueue() {
   const [items, setItems] = useState<ModerationItem[]>([]);
   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 [activeEntityFilter, setActiveEntityFilter] = useState<EntityFilter>('all');
+  const [activeStatusFilter, setActiveStatusFilter] = useState<StatusFilter>('pending');
   const { toast } = useToast();
 
-  const fetchItems = async (filter: string = 'pending') => {
+  const fetchItems = async (entityFilter: EntityFilter = 'all', statusFilter: StatusFilter = 'pending') => {
     try {
       setLoading(true);
       
@@ -39,7 +44,7 @@ export function ModerationQueue() {
       let submissionStatuses: string[] = [];
       
       // Define status filters
-      switch (filter) {
+      switch (statusFilter) {
         case 'all':
           reviewStatuses = ['pending', 'flagged', 'approved', 'rejected'];
           submissionStatuses = ['pending', 'approved', 'rejected'];
@@ -67,7 +72,7 @@ export function ModerationQueue() {
 
       // Fetch reviews
       let reviews = [];
-      if (reviewStatuses.length > 0) {
+      if ((entityFilter === 'all' || entityFilter === 'reviews') && reviewStatuses.length > 0) {
         const { data: reviewsData, error: reviewsError } = await supabase
           .from('reviews')
           .select(`
@@ -77,7 +82,8 @@ export function ModerationQueue() {
             rating,
             created_at,
             user_id,
-            moderation_status
+            moderation_status,
+            photos
           `)
           .in('moderation_status', reviewStatuses)
           .order('created_at', { ascending: false });
@@ -88,8 +94,8 @@ export function ModerationQueue() {
 
       // Fetch content submissions
       let submissions = [];
-      if (submissionStatuses.length > 0) {
-        const { data: submissionsData, error: submissionsError } = await supabase
+      if ((entityFilter === 'all' || entityFilter === 'submissions' || entityFilter === 'photos') && submissionStatuses.length > 0) {
+        let query = supabase
           .from('content_submissions')
           .select(`
             id,
@@ -99,7 +105,16 @@ export function ModerationQueue() {
             user_id,
             status
           `)
-          .in('status', submissionStatuses)
+          .in('status', submissionStatuses);
+
+        // Filter by submission type for photos
+        if (entityFilter === 'photos') {
+          query = query.eq('submission_type', 'photo');
+        } else if (entityFilter === 'submissions') {
+          query = query.neq('submission_type', 'photo');
+        }
+
+        const { data: submissionsData, error: submissionsError } = await query
           .order('created_at', { ascending: false });
 
         if (submissionsError) throw submissionsError;
@@ -138,6 +153,7 @@ export function ModerationQueue() {
           created_at: submission.created_at,
           user_id: submission.user_id,
           status: submission.status,
+          submission_type: submission.submission_type,
           user_profile: profileMap.get(submission.user_id),
         })),
       ];
@@ -159,8 +175,8 @@ export function ModerationQueue() {
   };
 
   useEffect(() => {
-    fetchItems(activeFilter);
-  }, [activeFilter]);
+    fetchItems(activeEntityFilter, activeStatusFilter);
+  }, [activeEntityFilter, activeStatusFilter]);
 
   const handleModerationAction = async (
     item: ModerationItem,
@@ -194,11 +210,11 @@ export function ModerationQueue() {
       });
 
       // Remove item from queue if it's no longer in the active filter
-      if (activeFilter === 'pending' || activeFilter === 'flagged') {
+      if (activeStatusFilter === 'pending' || activeStatusFilter === 'flagged') {
         setItems(prev => prev.filter(i => i.id !== item.id));
       } else {
         // Refresh the queue to show updated status
-        fetchItems(activeFilter);
+        fetchItems(activeEntityFilter, activeStatusFilter);
       }
       
       // Clear notes
@@ -234,20 +250,24 @@ export function ModerationQueue() {
     }
   };
 
-  const getEmptyStateMessage = (filter: string) => {
-    switch (filter) {
+  const getEmptyStateMessage = (entityFilter: EntityFilter, statusFilter: StatusFilter) => {
+    const entityLabel = entityFilter === 'all' ? 'items' : 
+                       entityFilter === 'reviews' ? 'reviews' :
+                       entityFilter === 'photos' ? 'photos' : 'submissions';
+    
+    switch (statusFilter) {
       case 'pending':
-        return 'No pending items require moderation at this time.';
+        return `No pending ${entityLabel} require moderation at this time.`;
       case 'flagged':
-        return 'No flagged content found.';
+        return `No flagged ${entityLabel} found.`;
       case 'approved':
-        return 'No approved content found.';
+        return `No approved ${entityLabel} found.`;
       case 'rejected':
-        return 'No rejected content found.';
+        return `No rejected ${entityLabel} found.`;
       case 'all':
-        return 'No moderation items found.';
+        return `No ${entityLabel} found.`;
       default:
-        return 'No items found for the selected filter.';
+        return `No ${entityLabel} found for the selected filter.`;
     }
   };
 
@@ -266,7 +286,7 @@ export function ModerationQueue() {
           <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)}
+            {getEmptyStateMessage(activeEntityFilter, activeStatusFilter)}
           </p>
         </div>
       );
@@ -285,7 +305,22 @@ export function ModerationQueue() {
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
                   <Badge variant={getStatusBadgeVariant(item.status)}>
-                    {item.type === 'review' ? 'Review' : 'Submission'}
+                    {item.type === 'review' ? (
+                      <>
+                        <MessageSquare className="w-3 h-3 mr-1" />
+                        Review
+                      </>
+                    ) : item.submission_type === 'photo' ? (
+                      <>
+                        <Image className="w-3 h-3 mr-1" />
+                        Photo
+                      </>
+                    ) : (
+                      <>
+                        <FileText className="w-3 h-3 mr-1" />
+                        Submission
+                      </>
+                    )}
                   </Badge>
                   <Badge variant={getStatusBadgeVariant(item.status)}>
                     {item.status.charAt(0).toUpperCase() + item.status.slice(1)}
@@ -325,6 +360,47 @@ export function ModerationQueue() {
                     <div className="flex items-center gap-2 text-sm text-muted-foreground">
                       <span>Rating: {item.content.rating}/5</span>
                     </div>
+                    {item.content.photos && item.content.photos.length > 0 && (
+                      <div className="mt-3">
+                        <div className="text-sm font-medium mb-2">Attached Photos:</div>
+                        <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+                          {item.content.photos.map((photo: any, index: number) => (
+                            <div key={index} className="relative">
+                              <img
+                                src={photo.url}
+                                alt={`Review photo ${index + 1}`}
+                                className="w-full h-20 object-cover rounded border"
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ) : item.submission_type === 'photo' ? (
+                  <div>
+                    <div className="text-sm text-muted-foreground mb-2">
+                      Photo Submission
+                    </div>
+                    {item.content.content?.url && (
+                      <div className="mb-3">
+                        <img
+                          src={item.content.content.url}
+                          alt="Submitted photo"
+                          className="max-w-full h-auto max-h-64 rounded border"
+                        />
+                      </div>
+                    )}
+                    {item.content.content?.caption && (
+                      <div className="mb-2">
+                        <div className="text-sm font-medium mb-1">Caption:</div>
+                        <p className="text-sm">{item.content.content.caption}</p>
+                      </div>
+                    )}
+                    <div className="text-xs text-muted-foreground">
+                      <div>Filename: {item.content.content?.filename || 'Unknown'}</div>
+                      <div>Size: {item.content.content?.size ? `${Math.round(item.content.content.size / 1024)} KB` : 'Unknown'}</div>
+                    </div>
                   </div>
                 ) : (
                   <div>
@@ -380,33 +456,56 @@ export function ModerationQueue() {
   };
 
   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>
+    <div className="space-y-4">
+      {/* Entity Type Filter */}
+      <Tabs value={activeEntityFilter} onValueChange={(value) => setActiveEntityFilter(value as EntityFilter)}>
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="all" className="flex items-center gap-2">
+            <Filter className="w-4 h-4" />
+            All
+          </TabsTrigger>
+          <TabsTrigger value="reviews" className="flex items-center gap-2">
+            <MessageSquare className="w-4 h-4" />
+            Reviews
+          </TabsTrigger>
+          <TabsTrigger value="submissions" className="flex items-center gap-2">
+            <FileText className="w-4 h-4" />
+            Submissions
+          </TabsTrigger>
+          <TabsTrigger value="photos" className="flex items-center gap-2">
+            <Image className="w-4 h-4" />
+            Photos
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
 
-      <TabsContent value={activeFilter}>
-        <QueueContent />
-      </TabsContent>
-    </Tabs>
+      {/* Status Filter */}
+      <Tabs value={activeStatusFilter} onValueChange={(value) => setActiveStatusFilter(value as StatusFilter)}>
+        <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>
+      </Tabs>
+
+      <QueueContent />
+    </div>
   );
 }