feat: Enhance moderation queue

src/components/moderation/ModerationQueue.tsx

@@ -3,6 +3,7 @@ import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileT
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -10,6 +11,7 @@ import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { useUserRole } from '@/hooks/useUserRole';
 import { format } from 'date-fns';
+import { PhotoModal } from './PhotoModal';
 
 interface ModerationItem {
   id: string;
@@ -22,7 +24,10 @@ interface ModerationItem {
   user_profile?: {
     username: string;
     display_name?: string;
+    avatar_url?: string;
   };
+  entity_name?: string;
+  park_name?: string;
 }
 
 type EntityFilter = 'all' | 'reviews' | 'submissions' | 'photos';
@@ -39,6 +44,9 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   const [notes, setNotes] = useState<Record<string, string>>({});
   const [activeEntityFilter, setActiveEntityFilter] = useState<EntityFilter>('all');
   const [activeStatusFilter, setActiveStatusFilter] = useState<StatusFilter>('pending');
+  const [photoModalOpen, setPhotoModalOpen] = useState(false);
+  const [selectedPhotos, setSelectedPhotos] = useState<any[]>([]);
+  const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(0);
   const { toast } = useToast();
   const { isAdmin, isSuperuser } = useUserRole();
 
@@ -83,7 +91,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
           submissionStatuses = ['pending'];
       }
 
-      // Fetch reviews
+      // Fetch reviews with entity data
       let reviews = [];
       if ((entityFilter === 'all' || entityFilter === 'reviews') && reviewStatuses.length > 0) {
         const { data: reviewsData, error: reviewsError } = await supabase
@@ -96,7 +104,18 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
             created_at,
             user_id,
             moderation_status,
-            photos
+            photos,
+            park_id,
+            ride_id,
+            parks:park_id (
+              name
+            ),
+            rides:ride_id (
+              name,
+              parks:park_id (
+                name
+              )
+            )
           `)
           .in('moderation_status', reviewStatuses)
           .order('created_at', { ascending: false });
@@ -105,7 +124,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
         reviews = reviewsData || [];
       }
 
-      // Fetch content submissions
+      // Fetch content submissions with entity data
       let submissions = [];
       if ((entityFilter === 'all' || entityFilter === 'submissions' || entityFilter === 'photos') && submissionStatuses.length > 0) {
         let query = supabase
@@ -131,7 +150,47 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
           .order('created_at', { ascending: false });
 
         if (submissionsError) throw submissionsError;
-        submissions = submissionsData || [];
+        
+        // Get entity data for photo submissions
+        let submissionsWithEntities = submissionsData || [];
+        for (const submission of submissionsWithEntities) {
+          if (submission.submission_type === 'photo' && submission.content && typeof submission.content === 'object') {
+            const contentObj = submission.content as any;
+            const context = contentObj.content?.context;
+            const rideId = contentObj.content?.ride_id;
+            const parkId = contentObj.content?.park_id;
+            
+            if (context === 'ride' && rideId) {
+              const { data: rideData } = await supabase
+                .from('rides')
+                .select(`
+                  name,
+                  parks:park_id (
+                    name
+                  )
+                `)
+                .eq('id', rideId)
+                .single();
+              
+              if (rideData) {
+                (submission as any).entity_name = rideData.name;
+                (submission as any).park_name = rideData.parks?.name;
+              }
+            } else if (context === 'park' && parkId) {
+              const { data: parkData } = await supabase
+                .from('parks')
+                .select('name')
+                .eq('id', parkId)
+                .single();
+              
+              if (parkData) {
+                (submission as any).entity_name = parkData.name;
+              }
+            }
+          }
+        }
+        
+        submissions = submissionsWithEntities;
       }
 
       // Get unique user IDs to fetch profiles
@@ -140,25 +199,39 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
         ...submissions.map(s => s.user_id)
       ];
       
-      // Fetch profiles for all users
+      // Fetch profiles for all users with avatars
       const { data: profiles } = await supabase
         .from('profiles')
-        .select('user_id, username, display_name')
+        .select('user_id, username, display_name, avatar_url')
         .in('user_id', userIds);
 
       const profileMap = new Map(profiles?.map(p => [p.user_id, p]) || []);
 
       // Combine and format items
       const formattedItems: ModerationItem[] = [
-        ...reviews.map(review => ({
+        ...reviews.map(review => {
-          id: review.id,
+          let entity_name = '';
-          type: 'review' as const,
+          let park_name = '';
-          content: review,
+          
-          created_at: review.created_at,
+          if ((review as any).rides) {
-          user_id: review.user_id,
+            entity_name = (review as any).rides.name;
-          status: review.moderation_status,
+            park_name = (review as any).rides.parks?.name;
-          user_profile: profileMap.get(review.user_id),
+          } else if ((review as any).parks) {
-        })),
+            entity_name = (review as any).parks.name;
+          }
+          
+          return {
+            id: review.id,
+            type: 'review' as const,
+            content: review,
+            created_at: review.created_at,
+            user_id: review.user_id,
+            status: review.moderation_status,
+            user_profile: profileMap.get(review.user_id),
+            entity_name,
+            park_name,
+          };
+        }),
         ...submissions.map(submission => ({
           id: submission.id,
           type: 'content_submission' as const,
@@ -168,6 +241,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
           status: submission.status,
           submission_type: submission.submission_type,
           user_profile: profileMap.get(submission.user_id),
+          entity_name: (submission as any).entity_name,
+          park_name: (submission as any).park_name,
         })),
       ];
 
@@ -524,16 +599,23 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
               </div>
               
               {item.user_profile && (
-                <div className="flex items-center gap-2 text-sm">
+                <div className="flex items-center gap-3 text-sm">
-                  <User className="w-4 h-4 text-muted-foreground" />
+                  <Avatar className="h-8 w-8">
-                  <span className="font-medium">
+                    <AvatarImage src={item.user_profile.avatar_url} />
-                    {item.user_profile.display_name || item.user_profile.username}
+                    <AvatarFallback>
-                  </span>
+                      {(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()}
-                  {item.user_profile.display_name && (
+                    </AvatarFallback>
-                    <span className="text-muted-foreground">
+                  </Avatar>
-                      @{item.user_profile.username}
+                  <div>
+                    <span className="font-medium">
+                      {item.user_profile.display_name || item.user_profile.username}
                     </span>
-                  )}
+                    {item.user_profile.display_name && (
+                      <span className="text-muted-foreground block text-xs">
+                        @{item.user_profile.username}
+                      </span>
+                    )}
+                  </div>
                 </div>
               )}
             </CardHeader>
@@ -556,19 +638,28 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                         <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">
+                            <div key={index} className="relative cursor-pointer" onClick={() => {
+                              setSelectedPhotos(item.content.photos.map((p: any, i: number) => ({
+                                id: `${item.id}-${i}`,
+                                url: p.url,
+                                filename: `Review photo ${i + 1}`,
+                                caption: p.caption
+                              })));
+                              setSelectedPhotoIndex(index);
+                              setPhotoModalOpen(true);
+                            }}>
                               <img
                                 src={photo.url}
                                 alt={`Review photo ${index + 1}`}
-                                className="w-full h-20 object-cover rounded border bg-muted/30"
+                                className="w-full h-20 object-cover rounded border bg-muted/30 hover:opacity-80 transition-opacity"
                                 onError={(e) => {
                                   console.error('Failed to load review photo:', photo.url);
                                   (e.target as HTMLImageElement).style.display = 'none';
                                 }}
                                 onLoad={() => console.log('Review photo loaded:', photo.url)}
                               />
-                              <div className="absolute inset-0 flex items-center justify-center bg-muted/80 text-xs text-muted-foreground opacity-0 hover:opacity-100 transition-opacity">
+                              <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white text-xs opacity-0 hover:opacity-100 transition-opacity rounded">
-                                Photo {index + 1}
+                                <Eye className="w-4 h-4" />
                               </div>
                             </div>
                           ))}
@@ -604,11 +695,20 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                         <div className="text-sm font-medium">Photos ({item.content.content.photos.length}):</div>
                         {item.content.content.photos.map((photo: any, index: number) => (
                           <div key={index} className="border rounded-lg p-3 space-y-2">
-                            <div className="relative min-h-[100px] bg-muted/30 rounded border overflow-hidden">
+                            <div className="relative min-h-[100px] bg-muted/30 rounded border overflow-hidden cursor-pointer" onClick={() => {
+                              setSelectedPhotos(item.content.content.photos.map((p: any, i: number) => ({
+                                id: `${item.id}-${i}`,
+                                url: p.url,
+                                filename: p.filename,
+                                caption: p.caption
+                              })));
+                              setSelectedPhotoIndex(index);
+                              setPhotoModalOpen(true);
+                            }}>
                               <img
                                 src={photo.url}
                                 alt={`Photo ${index + 1}: ${photo.filename}`}
-                                className="w-full max-h-64 object-contain rounded"
+                                className="w-full max-h-64 object-contain rounded hover:opacity-80 transition-opacity"
                                 onError={(e) => {
                                   console.error('Failed to load photo submission:', photo);
                                   const target = e.target as HTMLImageElement;
@@ -625,6 +725,9 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                                 }}
                                 onLoad={() => console.log('Photo submission loaded:', photo.url)}
                               />
+                              <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity rounded">
+                                <Eye className="w-5 h-5" />
+                              </div>
                             </div>
                             <div className="space-y-1 text-xs text-muted-foreground">
                               <div className="flex justify-between">
@@ -666,16 +769,16 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                           <span className="font-medium">Context:</span>
                           <span className="capitalize">{item.content.content.context}</span>
                         </div>
-                        {item.content.content.ride_id && (
+                        {item.entity_name && (
                           <div className="flex justify-between">
-                            <span className="font-medium">Ride ID:</span>
+                            <span className="font-medium">{item.content.content.context === 'ride' ? 'Ride:' : 'Park:'}</span>
-                            <span className="font-mono">{item.content.content.ride_id}</span>
+                            <span className="font-medium text-foreground">{item.entity_name}</span>
                           </div>
                         )}
-                        {item.content.content.park_id && (
+                        {item.park_name && item.content.content.context === 'ride' && (
                           <div className="flex justify-between">
-                            <span className="font-medium">Park ID:</span>
+                            <span className="font-medium">Park:</span>
-                            <span className="font-mono">{item.content.content.park_id}</span>
+                            <span className="font-medium text-foreground">{item.park_name}</span>
                           </div>
                         )}
                       </div>
@@ -865,6 +968,14 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
 
       {/* Queue Content */}
       <QueueContent />
+      
+      {/* Photo Modal */}
+      <PhotoModal
+        photos={selectedPhotos}
+        initialIndex={selectedPhotoIndex}
+        isOpen={photoModalOpen}
+        onClose={() => setPhotoModalOpen(false)}
+      />
     </div>
   );
 });

src/components/moderation/PhotoModal.tsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+interface PhotoModalProps {
+  photos: Array<{
+    id: string;
+    url: string;
+    filename?: string;
+    caption?: string;
+  }>;
+  initialIndex: number;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModalProps) {
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const currentPhoto = photos[currentIndex];
+
+  const goToPrevious = () => {
+    setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
+  };
+
+  const goToNext = () => {
+    setCurrentIndex((prev) => (prev < photos.length - 1 ? prev + 1 : 0));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowLeft') goToPrevious();
+    if (e.key === 'ArrowRight') goToNext();
+    if (e.key === 'Escape') onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-7xl w-full max-h-[90vh] p-0">
+        <div className="relative bg-black rounded-lg overflow-hidden" onKeyDown={handleKeyDown} tabIndex={0}>
+          {/* Header */}
+          <div className="absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent p-4">
+            <div className="flex items-center justify-between text-white">
+              <div>
+                <h3 className="font-medium">
+                  {currentPhoto?.filename || `Photo ${currentIndex + 1}`}
+                </h3>
+                {photos.length > 1 && (
+                  <p className="text-sm text-white/70">
+                    {currentIndex + 1} of {photos.length}
+                  </p>
+                )}
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onClose}
+                className="text-white hover:bg-white/10"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Image */}
+          <div className="flex items-center justify-center min-h-[400px] max-h-[80vh]">
+            <img
+              src={currentPhoto?.url}
+              alt={currentPhoto?.caption || `Photo ${currentIndex + 1}`}
+              className="max-w-full max-h-full object-contain"
+              loading="lazy"
+            />
+          </div>
+
+          {/* Navigation */}
+          {photos.length > 1 && (
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={goToPrevious}
+                className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10"
+              >
+                <ChevronLeft className="h-6 w-6" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={goToNext}
+                className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10"
+              >
+                <ChevronRight className="h-6 w-6" />
+              </Button>
+            </>
+          )}
+
+          {/* Caption */}
+          {currentPhoto?.caption && (
+            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+              <p className="text-white text-sm">{currentPhoto.caption}</p>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}