From 737ea20f479f01f5984bf9aa85c8c41c8fa0f083 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 28 Sep 2025 23:17:29 +0000
Subject: [PATCH] feat: Display photo submission details

---
 src/components/moderation/ModerationQueue.tsx | 87 ++++++++++++++++---
 1 file changed, 73 insertions(+), 14 deletions(-)

diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index 8feca222..8f12ac34 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -379,28 +379,87 @@ export function ModerationQueue() {
                   </div>
                 ) : item.submission_type === 'photo' ? (
                   <div>
-                    <div className="text-sm text-muted-foreground mb-2">
+                    <div className="text-sm text-muted-foreground mb-3">
                       Photo Submission
                     </div>
-                    {item.content.content?.url && (
+                    
+                    {/* Submission Title */}
+                    {item.content.title && (
                       <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 className="text-sm font-medium mb-1">Title:</div>
+                        <p className="text-sm">{item.content.title}</p>
                       </div>
                     )}
-                    {item.content.content?.caption && (
-                      <div className="mb-2">
+                    
+                    {/* Submission Caption */}
+                    {item.content.caption && (
+                      <div className="mb-3">
                         <div className="text-sm font-medium mb-1">Caption:</div>
-                        <p className="text-sm">{item.content.content.caption}</p>
+                        <p className="text-sm">{item.content.caption}</p>
+                      </div>
+                    )}
+                    
+                    {/* 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="space-y-1 text-xs text-muted-foreground">
+                              <div className="flex justify-between">
+                                <span className="font-medium">Filename:</span>
+                                <span>{photo.filename || 'Unknown'}</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span className="font-medium">Size:</span>
+                                <span>{photo.size ? `${Math.round(photo.size / 1024)} KB` : 'Unknown'}</span>
+                              </div>
+                              <div className="flex justify-between">
+                                <span className="font-medium">Type:</span>
+                                <span>{photo.type || 'Unknown'}</span>
+                              </div>
+                              {photo.caption && (
+                                <div className="pt-1">
+                                  <div className="font-medium">Caption:</div>
+                                  <div className="text-sm text-foreground mt-1">{photo.caption}</div>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="text-sm text-muted-foreground">
+                        No photos found in submission
+                      </div>
+                    )}
+                    
+                    {/* Context Information */}
+                    {item.content.context && (
+                      <div className="mt-3 pt-3 border-t text-xs text-muted-foreground">
+                        <div className="flex justify-between">
+                          <span className="font-medium">Context:</span>
+                          <span className="capitalize">{item.content.context}</span>
+                        </div>
+                        {item.content.ride_id && (
+                          <div className="flex justify-between">
+                            <span className="font-medium">Ride ID:</span>
+                            <span className="font-mono">{item.content.ride_id}</span>
+                          </div>
+                        )}
+                        {item.content.park_id && (
+                          <div className="flex justify-between">
+                            <span className="font-medium">Park ID:</span>
+                            <span className="font-mono">{item.content.park_id}</span>
+                          </div>
+                        )}
                       </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>