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>
   );
 }

src/components/upload/PhotoSubmissionUpload.tsx

@@ -0,0 +1,217 @@
+import { useState } from 'react';
+import { Upload, X, Camera } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { useToast } from '@/hooks/use-toast';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/hooks/useAuth';
+
+interface PhotoSubmissionUploadProps {
+  onSubmissionComplete?: () => void;
+  parkId?: string;
+  rideId?: string;
+}
+
+export function PhotoSubmissionUpload({ onSubmissionComplete, parkId, rideId }: PhotoSubmissionUploadProps) {
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [caption, setCaption] = useState('');
+  const [title, setTitle] = useState('');
+  const { toast } = useToast();
+  const { user } = useAuth();
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    const imageFiles = files.filter(file => file.type.startsWith('image/'));
+    
+    if (imageFiles.length !== files.length) {
+      toast({
+        title: "Invalid Files",
+        description: "Only image files are allowed",
+        variant: "destructive",
+      });
+    }
+    
+    setSelectedFiles(prev => [...prev, ...imageFiles].slice(0, 5)); // Max 5 files
+  };
+
+  const removeFile = (index: number) => {
+    setSelectedFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async () => {
+    if (!user) {
+      toast({
+        title: "Authentication Required",
+        description: "Please log in to submit photos",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (selectedFiles.length === 0) {
+      toast({
+        title: "No Files Selected",
+        description: "Please select at least one image to submit",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setUploading(true);
+    try {
+      // Upload files to a temporary location or process them for moderation
+      const photoSubmissions = await Promise.all(
+        selectedFiles.map(async (file, index) => {
+          // Create a blob URL for preview
+          const url = URL.createObjectURL(file);
+          
+          return {
+            filename: file.name,
+            size: file.size,
+            type: file.type,
+            url, // In a real implementation, you'd upload to storage first
+            caption: index === 0 ? caption : '', // Only first image gets the caption
+          };
+        })
+      );
+
+      // Submit to content_submissions table
+      const { error } = await supabase
+        .from('content_submissions')
+        .insert({
+          user_id: user.id,
+          submission_type: 'photo',
+          content: {
+            photos: photoSubmissions,
+            title: title.trim() || undefined,
+            caption: caption.trim() || undefined,
+            park_id: parkId,
+            ride_id: rideId,
+            context: parkId ? 'park' : rideId ? 'ride' : 'general',
+          },
+          status: 'pending',
+        });
+
+      if (error) throw error;
+
+      toast({
+        title: "Photos Submitted",
+        description: "Your photos have been submitted for moderation review",
+      });
+
+      // Reset form
+      setSelectedFiles([]);
+      setCaption('');
+      setTitle('');
+      onSubmissionComplete?.();
+
+    } catch (error) {
+      console.error('Error submitting photos:', error);
+      toast({
+        title: "Submission Failed",
+        description: "Failed to submit photos. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent className="p-6 space-y-4">
+        <div className="flex items-center gap-2 mb-4">
+          <Camera className="w-5 h-5" />
+          <h3 className="text-lg font-semibold">Submit Photos</h3>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="photo-title">Title (optional)</Label>
+            <Input
+              id="photo-title"
+              placeholder="Give your photo submission a title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              maxLength={100}
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="photo-caption">Caption (optional)</Label>
+            <Textarea
+              id="photo-caption"
+              placeholder="Add a caption to describe your photos"
+              value={caption}
+              onChange={(e) => setCaption(e.target.value)}
+              rows={3}
+              maxLength={500}
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="photo-upload">Select Photos</Label>
+            <div className="mt-2">
+              <input
+                id="photo-upload"
+                type="file"
+                accept="image/*"
+                multiple
+                onChange={handleFileSelect}
+                className="hidden"
+              />
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => document.getElementById('photo-upload')?.click()}
+                className="w-full"
+                disabled={selectedFiles.length >= 5}
+              >
+                <Upload className="w-4 h-4 mr-2" />
+                Choose Photos {selectedFiles.length > 0 && `(${selectedFiles.length}/5)`}
+              </Button>
+            </div>
+          </div>
+
+          {selectedFiles.length > 0 && (
+            <div className="space-y-3">
+              <Label>Selected Photos:</Label>
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+                {selectedFiles.map((file, index) => (
+                  <div key={index} className="relative">
+                    <img
+                      src={URL.createObjectURL(file)}
+                      alt={`Preview ${index + 1}`}
+                      className="w-full h-24 object-cover rounded border"
+                    />
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      size="sm"
+                      className="absolute -top-2 -right-2 h-6 w-6 rounded-full p-0"
+                      onClick={() => removeFile(index)}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <Button
+            onClick={handleSubmit}
+            disabled={uploading || selectedFiles.length === 0}
+            className="w-full"
+          >
+            {uploading ? 'Submitting...' : 'Submit Photos for Review'}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}