From 2fc67ebf393c5bb9cbf3b91f7649dce2700d1175 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 6 Oct 2025 17:59:34 +0000
Subject: [PATCH] Fix submission display issues

---
 src/components/admin/SystemActivityLog.tsx | 84 ++++++++++++++++++++++
 src/lib/systemActivityService.ts           | 54 ++++++++++++--
 2 files changed, 132 insertions(+), 6 deletions(-)

diff --git a/src/components/admin/SystemActivityLog.tsx b/src/components/admin/SystemActivityLog.tsx
index e5176a62..37a10c33 100644
--- a/src/components/admin/SystemActivityLog.tsx
+++ b/src/components/admin/SystemActivityLog.tsx
@@ -182,6 +182,90 @@ export const SystemActivityLog = forwardRef<SystemActivityLogRef, SystemActivity
         case 'submission_review': {
           const details = activity.details as SubmissionReviewDetails;
           const statusColor = details.status === 'approved' ? 'bg-green-500/10 text-green-500' : 'bg-red-500/10 text-red-500';
+          
+          // Special handling for photo deletion submissions
+          if (details.submission_type === 'photo_delete' && details.photo_url) {
+            return (
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-sm flex-wrap">
+                  <Badge className={statusColor}>
+                    {details.status}
+                  </Badge>
+                  <Trash2 className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-muted-foreground">Photo deletion</span>
+                  {details.entity_type && (
+                    <span className="text-muted-foreground">
+                      from {details.entity_type}
+                    </span>
+                  )}
+                </div>
+                
+                <div className="flex gap-3 items-start">
+                  <img 
+                    src={details.photo_url} 
+                    alt={details.photo_title || details.photo_caption || 'Deleted photo'}
+                    className="w-20 h-20 object-cover rounded border"
+                  />
+                  <div className="flex-1 space-y-1">
+                    {details.photo_title && (
+                      <p className="text-sm font-medium">{details.photo_title}</p>
+                    )}
+                    {details.photo_caption && (
+                      <p className="text-sm text-muted-foreground">{details.photo_caption}</p>
+                    )}
+                    {details.deletion_reason && (
+                      <div className="flex items-start gap-2 mt-2 p-2 bg-muted rounded text-sm">
+                        <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
+                        <span className="text-muted-foreground">
+                          <strong>Reason:</strong> {details.deletion_reason}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          }
+
+          // Special handling for photo additions
+          if (details.submission_type === 'photo' && details.photo_url) {
+            return (
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-sm flex-wrap">
+                  <Badge className={statusColor}>
+                    {details.status}
+                  </Badge>
+                  <ImageIcon className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-muted-foreground">Photo submission</span>
+                  {details.entity_type && (
+                    <span className="text-muted-foreground">
+                      to {details.entity_type}
+                    </span>
+                  )}
+                </div>
+                
+                {isExpanded && (
+                  <div className="flex gap-3 items-start">
+                    <img 
+                      src={details.photo_url} 
+                      alt={details.photo_title || details.photo_caption || 'Photo'}
+                      className="w-20 h-20 object-cover rounded border"
+                    />
+                    <div className="flex-1 space-y-1">
+                      {details.photo_title && (
+                        <p className="text-sm font-medium">{details.photo_title}</p>
+                      )}
+                      {details.photo_caption && (
+                        <p className="text-sm text-muted-foreground">{details.photo_caption}</p>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          }
+
+          // Generic submission display
           return (
             <div className="space-y-2">
               <div className="flex items-center gap-2 text-sm">
diff --git a/src/lib/systemActivityService.ts b/src/lib/systemActivityService.ts
index 630e6a76..afeeed01 100644
--- a/src/lib/systemActivityService.ts
+++ b/src/lib/systemActivityService.ts
@@ -36,6 +36,13 @@ export interface SubmissionReviewDetails {
   submission_type: string;
   status: string;
   entity_name?: string;
+  // Photo-specific fields
+  photo_url?: string;
+  photo_caption?: string;
+  photo_title?: string;
+  entity_type?: string;
+  entity_id?: string;
+  deletion_reason?: string;
 }
 
 export interface ReportResolutionDetails {
@@ -158,20 +165,55 @@ export async function fetchSystemActivities(
     .limit(limit);
 
   if (!submissionsError && submissions) {
+    // Fetch submission_items for photo submissions to get detailed info
+    const submissionIds = submissions.map(s => s.id);
+    const { data: submissionItems } = await supabase
+      .from('submission_items')
+      .select('submission_id, item_type, item_data')
+      .in('submission_id', submissionIds)
+      .in('item_type', ['photo', 'photo_delete', 'photo_edit']);
+
+    const itemsMap = new Map(submissionItems?.map(item => [item.submission_id, item]) || []);
+
     for (const submission of submissions) {
       const contentData = submission.content as any;
+      const submissionItem = itemsMap.get(submission.id);
+      const itemData = submissionItem?.item_data as any;
+
+      // Build base details
+      const details: SubmissionReviewDetails = {
+        submission_id: submission.id,
+        submission_type: submission.submission_type,
+        status: submission.status,
+        entity_name: contentData?.name,
+      };
+
+      // Enrich with photo-specific data for photo submissions
+      if (submissionItem && itemData) {
+        if (submissionItem.item_type === 'photo_delete') {
+          details.photo_url = itemData.cloudflare_image_url;
+          details.photo_caption = itemData.caption;
+          details.photo_title = itemData.title;
+          details.entity_type = itemData.entity_type;
+          details.entity_id = itemData.entity_id;
+          details.deletion_reason = itemData.reason;
+        } else if (submissionItem.item_type === 'photo') {
+          // Photo additions
+          details.photo_url = itemData.cloudflare_image_url;
+          details.photo_caption = itemData.caption;
+          details.photo_title = itemData.title;
+          details.entity_type = itemData.entity_type;
+          details.entity_id = itemData.entity_id;
+        }
+      }
+
       activities.push({
         id: submission.id,
         type: 'submission_review',
         timestamp: submission.reviewed_at!,
         actor_id: submission.reviewer_id,
         action: `${submission.status} ${submission.submission_type} submission`,
-        details: {
-          submission_id: submission.id,
-          submission_type: submission.submission_type,
-          status: submission.status,
-          entity_name: contentData?.name,
-        } as SubmissionReviewDetails,
+        details,
       });
     }
   }