Fix submission display and change detection

src/components/moderation/ModerationQueue.tsx

@@ -1447,10 +1447,15 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                            item.submission_type === 'property_owner' ||
                            item.submission_type === 'park' ||
                            item.submission_type === 'ride') ? (
-                      <SubmissionItemsList 
+                      <SubmissionChangesDisplay
+                        item={{
+                          item_data: item.content.content || item.content,
+                          original_data: item.content.content?.original_data || item.content.original_data,
+                          item_type: item.submission_type
+                        }}
                         submissionId={item.id}
                         view="summary"
-                        showImages={true}
+                        showImages={false}
                       />
                     ) : (
                       <div>

src/components/moderation/SubmissionChangesDisplay.tsx

@@ -9,7 +9,7 @@ import type { SubmissionItemWithDeps } from '@/lib/submissionItemsService';
 import { Building2, Train, MapPin, Building, User, ImageIcon, Trash2, Edit, Plus, AlertTriangle } from 'lucide-react';
 
 interface SubmissionChangesDisplayProps {
-  item: SubmissionItemData | SubmissionItemWithDeps;
+  item: SubmissionItemData | SubmissionItemWithDeps | { item_data?: any; original_data?: any; item_type: string };
   view?: 'summary' | 'detailed';
   showImages?: boolean;
   submissionId?: string;

src/lib/submissionChangeDetection.ts

@@ -231,6 +231,26 @@ function isEqual(a: any, b: any): boolean {
   return false;
 }
 
+/**
+ * Normalizes image data structures to extract IDs consistently
+ */
+function getImageIds(data: any): { banner?: string; card?: string } {
+  const result: { banner?: string; card?: string } = {};
+  
+  // Handle flat structure (original_data from DB)
+  if (data.banner_image_id) result.banner = data.banner_image_id;
+  if (data.card_image_id) result.card = data.card_image_id;
+  
+  // Handle nested structure (item_data from form)
+  if (data.images?.uploaded) {
+    const uploaded = data.images.uploaded;
+    if (uploaded[0]?.id) result.banner = uploaded[0].id;
+    if (uploaded[1]?.id) result.card = uploaded[1].id;
+  }
+  
+  return result;
+}
+
 /**
  * Detects changes in banner/card images
  */
@@ -239,27 +259,29 @@ function detectImageChanges(
   itemData: any,
   imageChanges: ImageChange[]
 ): void {
+  // Normalize both data structures before comparing
+  const oldIds = getImageIds(originalData);
+  const newIds = getImageIds(itemData);
+  
   // Check banner image
-  if (originalData.banner_image_id !== itemData.banner_image_id ||
-      originalData.banner_image_url !== itemData.banner_image_url) {
+  if (oldIds.banner !== newIds.banner) {
     imageChanges.push({
       type: 'banner',
       oldUrl: originalData.banner_image_url,
-      newUrl: itemData.banner_image_url,
-      oldId: originalData.banner_image_id,
-      newId: itemData.banner_image_id,
+      newUrl: itemData.banner_image_url || itemData.images?.uploaded?.[0]?.url,
+      oldId: oldIds.banner,
+      newId: newIds.banner,
     });
   }
 
   // Check card image
-  if (originalData.card_image_id !== itemData.card_image_id ||
-      originalData.card_image_url !== itemData.card_image_url) {
+  if (oldIds.card !== newIds.card) {
     imageChanges.push({
       type: 'card',
       oldUrl: originalData.card_image_url,
-      newUrl: itemData.card_image_url,
-      oldId: originalData.card_image_id,
-      newId: itemData.card_image_id,
+      newUrl: itemData.card_image_url || itemData.images?.uploaded?.[1]?.url,
+      oldId: oldIds.card,
+      newId: newIds.card,
     });
   }
 }