feat: Display photo submission details

This commit is contained in:
gpt-engineer-app[bot]
2025-09-28 23:17:29 +00:00
parent aad7e8d14c
commit 737ea20f47

View File

@@ -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>