Fix submission display issues

src/lib/submissionChangeDetection.ts

@@ -30,6 +30,9 @@ export interface PhotoChange {
     newCaption?: string;
     oldTitle?: string;
     newTitle?: string;
+    entity_type?: string;
+    entity_name?: string;
+    deletion_reason?: string;
   };
 }
 
@@ -51,8 +54,8 @@ async function detectPhotoChanges(submissionId: string): Promise<PhotoChange[]>
   const changes: PhotoChange[] = [];
   
   try {
-    // Fetch photo submission with items - use array query to avoid 406 errors
-    const { data: photoSubmissions, error } = await supabase
+    // First check for photo submission items (photo additions)
+    const { data: photoSubmissions, error: photoError } = await supabase
       .from('photo_submissions')
       .select(`
         *,
@@ -60,23 +63,61 @@ async function detectPhotoChanges(submissionId: string): Promise<PhotoChange[]>
       `)
       .eq('submission_id', submissionId);
 
-    if (error) {
-      console.error('Error fetching photo submissions:', error);
-      return changes;
+    if (photoError) {
+      console.error('Error fetching photo submissions:', photoError);
+    } else {
+      const photoSubmission = photoSubmissions?.[0];
+      if (photoSubmission?.items && photoSubmission.items.length > 0) {
+        changes.push({
+          type: 'added',
+          photos: photoSubmission.items.map((item: any) => ({
+            url: item.cloudflare_image_url,
+            title: item.title,
+            caption: item.caption
+          }))
+        });
+      }
     }
 
-    const photoSubmission = photoSubmissions?.[0];
-    if (photoSubmission?.items && photoSubmission.items.length > 0) {
-      // For now, treat all photos as additions
-      // TODO: Implement edit/delete detection by comparing with existing entity photos
-      changes.push({
-        type: 'added',
-        photos: photoSubmission.items.map((item: any) => ({
-          url: item.cloudflare_image_url,
-          title: item.title,
-          caption: item.caption
-        }))
-      });
+    // Check for photo edits and deletions in submission_items
+    const { data: submissionItems, error: itemsError } = await supabase
+      .from('submission_items')
+      .select('*')
+      .eq('submission_id', submissionId)
+      .in('item_type', ['photo_edit', 'photo_delete']);
+
+    if (itemsError) {
+      console.error('Error fetching submission items for photos:', itemsError);
+    } else if (submissionItems && submissionItems.length > 0) {
+      for (const item of submissionItems) {
+        const itemData = item.item_data as Record<string, any>;
+        const originalData = item.original_data as Record<string, any> | null;
+        
+        if (item.item_type === 'photo_delete' && itemData) {
+          changes.push({
+            type: 'deleted',
+            photo: {
+              url: itemData.photo_url || itemData.cloudflare_image_url || '',
+              title: itemData.title,
+              caption: itemData.caption,
+              entity_type: itemData.entity_type,
+              entity_name: itemData.entity_name,
+              deletion_reason: itemData.deletion_reason
+            }
+          });
+        } else if (item.item_type === 'photo_edit' && itemData && originalData) {
+          changes.push({
+            type: 'edited',
+            photo: {
+              url: itemData.photo_url || itemData.cloudflare_image_url || '',
+              title: itemData.title,
+              caption: itemData.caption,
+              oldTitle: originalData.title,
+              oldCaption: originalData.caption
+            }
+          });
+        }
+      }
     }
   } catch (err) {
     console.error('Error detecting photo changes:', err);
@@ -420,6 +461,14 @@ export function formatFieldValue(value: any): string {
     }
   }
   
+  // Handle enum-like strings (snake_case or kebab-case) - capitalize and replace separators
+  if (typeof value === 'string' && (value.includes('_') || value.includes('-'))) {
+    return value
+      .split(/[_-]/)
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ');
+  }
+  
   if (typeof value === 'number') return value.toLocaleString();
   return String(value);
 }