Fix submission display issues

src/components/moderation/ModerationQueue.tsx

@@ -1518,20 +1518,39 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                            item.submission_type === 'operator' || 
                            item.submission_type === 'property_owner' ||
                            item.submission_type === 'park' ||
-                           item.submission_type === 'ride') ? (
+                           item.submission_type === 'ride' ||
+                           item.submission_type === 'ride_model' ||
+                           item.submission_type === 'photo_delete' ||
+                           item.submission_type === 'photo_edit') ? (
                       <SubmissionItemsList 
                         submissionId={item.id}
                         view="detailed"
                         showImages={true}
                       />
                     ) : (
-                      <div>
-                        <div className="text-sm text-muted-foreground mb-2">
-                          Type: {item.submission_type}
+                      <div className="rounded-md border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950 p-4">
+                        <div className="flex items-center gap-2 mb-2">
+                          <AlertTriangle className="h-4 w-4 text-amber-600" />
+                          <span className="font-medium text-amber-900 dark:text-amber-100">
+                            Unknown Submission Type
+                          </span>
                         </div>
-                        <pre className="text-sm whitespace-pre-wrap">
-                          {JSON.stringify(item.content, null, 2)}
-                        </pre>
+                        <div className="text-sm text-amber-800 dark:text-amber-200 mb-2">
+                          Type: <code className="bg-amber-100 dark:bg-amber-900 px-1 py-0.5 rounded">{item.submission_type}</code>
+                        </div>
+                        {item.content?.action && (
+                          <div className="text-sm text-amber-800 dark:text-amber-200 mb-2">
+                            Action: <span className="font-medium capitalize">{item.content.action}</span>
+                          </div>
+                        )}
+                        <details className="text-sm">
+                          <summary className="cursor-pointer text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100">
+                            View raw data (for developers)
+                          </summary>
+                          <pre className="mt-2 text-xs whitespace-pre-wrap bg-amber-100 dark:bg-amber-900 p-2 rounded overflow-x-auto">
+                            {JSON.stringify(item.content, null, 2)}
+                          </pre>
+                        </details>
                       </div>
                     )}
                   </div>

src/components/moderation/PhotoComparison.tsx

@@ -118,6 +118,9 @@ interface PhotoDeletionPreviewProps {
     url: string;
     title?: string;
     caption?: string;
+    entity_type?: string;
+    entity_name?: string;
+    deletion_reason?: string;
   };
   compact?: boolean;
 }
@@ -147,12 +150,20 @@ export function PhotoDeletionPreview({ photo, compact = false }: PhotoDeletionPr
           loading="lazy"
         />
         
-        {(photo.title || photo.caption) && (
-          <div className="flex-1 text-sm">
-            {photo.title && <div className="font-medium">{photo.title}</div>}
-            {photo.caption && <div className="text-muted-foreground">{photo.caption}</div>}
-          </div>
-        )}
+        <div className="flex-1 text-sm space-y-2">
+          {photo.title && <div className="font-medium">{photo.title}</div>}
+          {photo.caption && <div className="text-muted-foreground">{photo.caption}</div>}
+          {photo.entity_type && photo.entity_name && (
+            <div className="text-xs text-muted-foreground">
+              From: <span className="capitalize">{photo.entity_type}</span> - {photo.entity_name}
+            </div>
+          )}
+          {photo.deletion_reason && (
+            <div className="text-xs p-2 bg-destructive/5 rounded border border-destructive/20">
+              <span className="font-medium">Reason:</span> {photo.deletion_reason}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

src/components/moderation/SubmissionChangesDisplay.tsx

@@ -54,11 +54,14 @@ export function SubmissionChangesDisplay({
     switch (item.item_type) {
       case 'park': return <Building2 className={iconClass} />;
       case 'ride': return <Train className={iconClass} />;
+      case 'ride_model': return <Train className={iconClass} />;
       case 'manufacturer':
       case 'operator':
       case 'property_owner':
       case 'designer': return <Building className={iconClass} />;
-      case 'photo': return <ImageIcon className={iconClass} />;
+      case 'photo': 
+      case 'photo_edit':
+      case 'photo_delete': return <ImageIcon className={iconClass} />;
       default: return <MapPin className={iconClass} />;
     }
   };

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);
 }