feat: Implement comprehensive change display

src/lib/submissionChangeDetection.ts

@@ -15,12 +15,22 @@ export interface ImageChange {
   newId?: string;
 }
 
+export interface PhotoChange {
+  type: 'added' | 'edited' | 'deleted';
+  photoUrl: string;
+  title?: string;
+  caption?: string;
+  oldCaption?: string;
+  newCaption?: string;
+}
+
 export interface ChangesSummary {
   action: 'create' | 'edit' | 'delete';
   entityType: string;
   entityName?: string;
   fieldChanges: FieldChange[];
   imageChanges: ImageChange[];
+  photoChanges: PhotoChange[];
   hasLocationChange: boolean;
   totalChanges: number;
 }
@@ -120,8 +130,9 @@ export function detectChanges(item: { item_data?: any; original_data?: any; item
     entityName,
     fieldChanges,
     imageChanges,
+    photoChanges: [], // Will be populated by component with submissionId
     hasLocationChange,
-    totalChanges: fieldChanges.length + imageChanges.length,
+    totalChanges: fieldChanges.length + imageChanges.length + (hasLocationChange ? 1 : 0)
   };
 }
 
@@ -217,10 +228,48 @@ export function formatFieldName(field: string): string {
 export function formatFieldValue(value: any): string {
   if (value === null || value === undefined) return 'None';
   if (typeof value === 'boolean') return value ? 'Yes' : 'No';
-  if (typeof value === 'object') {
-    if (Array.isArray(value)) return `${value.length} items`;
-    return JSON.stringify(value, null, 2);
+  
+  // Handle dates
+  if (value instanceof Date || (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}/.test(value))) {
+    try {
+      const date = new Date(value);
+      return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+    } catch {
+      return String(value);
+    }
   }
+  
+  // Handle arrays - show actual items
+  if (Array.isArray(value)) {
+    if (value.length === 0) return 'None';
+    if (value.length <= 3) return value.map(v => String(v)).join(', ');
+    return `${value.slice(0, 3).map(v => String(v)).join(', ')}... +${value.length - 3} more`;
+  }
+  
+  // Handle objects - create readable summary
+  if (typeof value === 'object') {
+    // Location object
+    if (value.city || value.state_province || value.country) {
+      const parts = [value.city, value.state_province, value.country].filter(Boolean);
+      return parts.join(', ');
+    }
+    
+    // Generic object - show key-value pairs
+    const entries = Object.entries(value).slice(0, 3);
+    if (entries.length === 0) return 'Empty';
+    return entries.map(([k, v]) => `${k}: ${v}`).join(', ');
+  }
+  
+  // Handle URLs
+  if (typeof value === 'string' && value.startsWith('http')) {
+    try {
+      const url = new URL(value);
+      return url.hostname + (url.pathname !== '/' ? url.pathname.slice(0, 30) : '');
+    } catch {
+      return value;
+    }
+  }
+  
   if (typeof value === 'number') return value.toLocaleString();
   return String(value);
 }