From 9b3bc388add030c818567da59b588f7757d0b6ee Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 00:59:26 +0000
Subject: [PATCH] feat: Display photos in submissions

---
 src/components/moderation/ModerationQueue.tsx | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index 58ca12c0..a266bfc6 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -548,7 +548,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                     <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 && (
+                     {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">
@@ -557,8 +557,16 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                               <img
                                 src={photo.url}
                                 alt={`Review photo ${index + 1}`}
-                                className="w-full h-20 object-cover rounded border"
+                                className="w-full h-20 object-cover rounded border bg-muted/30"
+                                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">
+                                Photo {index + 1}
+                              </div>
                             </div>
                           ))}
                         </div>
@@ -587,18 +595,39 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                       </div>
                     )}
                     
-                    {/* Photos */}
+                     {/* Photos */}
                     {item.content.photos && item.content.photos.length > 0 ? (
                       <div className="space-y-4">
                         <div className="text-sm font-medium">Photos ({item.content.photos.length}):</div>
                         {item.content.photos.map((photo: any, index: number) => (
                           <div key={index} className="border rounded-lg p-3 space-y-2">
-                            <img
-                              src={photo.url}
-                              alt={`Photo ${index + 1}: ${photo.filename}`}
-                              className="w-full max-h-64 object-contain rounded border bg-muted/30"
-                            />
+                            <div className="relative min-h-[100px] bg-muted/30 rounded border overflow-hidden">
+                              <img
+                                src={photo.url}
+                                alt={`Photo ${index + 1}: ${photo.filename}`}
+                                className="w-full max-h-64 object-contain rounded"
+                                onError={(e) => {
+                                  console.error('Failed to load photo submission:', photo);
+                                  const target = e.target as HTMLImageElement;
+                                  target.style.display = 'none';
+                                  const parent = target.parentElement;
+                                  if (parent) {
+                                    parent.innerHTML = `
+                                      <div class="absolute inset-0 flex flex-col items-center justify-center text-destructive text-xs">
+                                        <div>⚠️ Image failed to load</div>
+                                        <div class="mt-1 font-mono text-xs break-all px-2">${photo.url}</div>
+                                      </div>
+                                    `;
+                                  }
+                                }}
+                                onLoad={() => console.log('Photo submission loaded:', photo.url)}
+                              />
+                            </div>
                             <div className="space-y-1 text-xs text-muted-foreground">
+                              <div className="flex justify-between">
+                                <span className="font-medium">URL:</span>
+                                <span className="font-mono text-xs break-all">{photo.url}</span>
+                              </div>
                               <div className="flex justify-between">
                                 <span className="font-medium">Filename:</span>
                                 <span>{photo.filename || 'Unknown'}</span>