Fix image URLs and add lightbox

src/components/moderation/EntityEditPreview.tsx

@@ -3,6 +3,7 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
 import { supabase } from '@/integrations/supabase/client';
 import { Image as ImageIcon } from 'lucide-react';
+import { PhotoModal } from './PhotoModal';
 
 interface EntityEditPreviewProps {
   submissionId: string;
@@ -32,6 +33,8 @@ export const EntityEditPreview = ({ submissionId, entityType, entityName }: Enti
   const [changedFields, setChangedFields] = useState<string[]>([]);
   const [bannerImageUrl, setBannerImageUrl] = useState<string | null>(null);
   const [cardImageUrl, setCardImageUrl] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
 
   useEffect(() => {
     fetchSubmissionItems();
@@ -118,6 +121,23 @@ export const EntityEditPreview = ({ submissionId, entityType, entityName }: Enti
     );
   }
 
+  // Build photos array for modal
+  const photos = [];
+  if (bannerImageUrl) {
+    photos.push({
+      id: 'banner',
+      url: `${bannerImageUrl}/public`,
+      caption: 'New Banner Image'
+    });
+  }
+  if (cardImageUrl) {
+    photos.push({
+      id: 'card',
+      url: `${cardImageUrl}/public`,
+      caption: 'New Card Image'
+    });
+  }
+
   return (
     <div className="space-y-3">
       <div className="flex items-center gap-2 flex-wrap">
@@ -152,10 +172,13 @@ export const EntityEditPreview = ({ submissionId, entityType, entityName }: Enti
           </div>
           <div className="grid grid-cols-2 gap-2">
             {bannerImageUrl && (
-              <Card className="overflow-hidden">
+              <Card className="overflow-hidden cursor-pointer hover:ring-2 hover:ring-primary transition-all" onClick={() => {
+                setSelectedImageIndex(0);
+                setIsModalOpen(true);
+              }}>
                 <CardContent className="p-2">
                   <img 
-                    src={`${bannerImageUrl}/thumbnail`} 
+                    src={`${bannerImageUrl}/public`} 
                     alt="New banner" 
                     className="w-full h-24 object-cover rounded"
                   />
@@ -166,10 +189,13 @@ export const EntityEditPreview = ({ submissionId, entityType, entityName }: Enti
               </Card>
             )}
             {cardImageUrl && (
-              <Card className="overflow-hidden">
+              <Card className="overflow-hidden cursor-pointer hover:ring-2 hover:ring-primary transition-all" onClick={() => {
+                setSelectedImageIndex(bannerImageUrl ? 1 : 0);
+                setIsModalOpen(true);
+              }}>
                 <CardContent className="p-2">
                   <img 
-                    src={`${cardImageUrl}/thumbnail`} 
+                    src={`${cardImageUrl}/public`} 
                     alt="New card" 
                     className="w-full h-24 object-cover rounded"
                   />
@@ -186,6 +212,13 @@ export const EntityEditPreview = ({ submissionId, entityType, entityName }: Enti
       <div className="text-xs text-muted-foreground italic">
         Click "Review Items" for full details
       </div>
+
+      <PhotoModal
+        photos={photos}
+        initialIndex={selectedImageIndex}
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+      />
     </div>
   );
 };