Fix trigger dependency issue

src/components/moderation/QueueItem.tsx

@@ -11,6 +11,7 @@ import { normalizePhotoData } from '@/lib/photoHelpers';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { AlertTriangle } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { SubmissionItemsList } from './SubmissionItemsList';
 import { getSubmissionTypeLabel } from '@/lib/moderation/entities';
 import { QueueItemHeader } from './renderers/QueueItemHeader';
@@ -21,6 +22,7 @@ import { QueueItemContext } from './renderers/QueueItemContext';
 import { QueueItemActions } from './renderers/QueueItemActions';
 import { SubmissionMetadataPanel } from './SubmissionMetadataPanel';
 import { AuditTrailViewer } from './AuditTrailViewer';
+import { RawDataViewer } from './RawDataViewer';
 
 interface QueueItemProps {
   item: ModerationItem;
@@ -76,6 +78,7 @@ export const QueueItem = memo(({
 }: QueueItemProps) => {
   const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
   const [isClaiming, setIsClaiming] = useState(false);
+  const [showRawData, setShowRawData] = useState(false);
   
   // Fetch relational photo data for photo submissions
   const { photos: photoItems, loading: photosLoading } = usePhotoSubmissionItems(
@@ -141,6 +144,7 @@ export const QueueItem = memo(({
           currentLockSubmissionId={currentLockSubmissionId}
           validationResult={validationResult}
           onValidationChange={handleValidationChange}
+          onViewRawData={() => setShowRawData(true)}
         />
       </CardHeader>
       
@@ -343,6 +347,19 @@ export const QueueItem = memo(({
           onClaim={handleClaim}
         />
       </CardContent>
+      
+      {/* Raw Data Modal */}
+      <Dialog open={showRawData} onOpenChange={setShowRawData}>
+        <DialogContent className="max-w-4xl max-h-[90vh]">
+          <DialogHeader>
+            <DialogTitle>Technical Details - Complete Submission Data</DialogTitle>
+          </DialogHeader>
+          <RawDataViewer 
+            data={item} 
+            title={`Submission ${item.id.slice(0, 8)}`}
+          />
+        </DialogContent>
+      </Dialog>
     </Card>
   );
 }, (prevProps, nextProps) => {

src/components/moderation/RawDataViewer.tsx

@@ -0,0 +1,224 @@
+import { useState, useMemo } from 'react';
+import { Copy, Download, ChevronRight, ChevronDown, Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Input } from '@/components/ui/input';
+import { toast } from 'sonner';
+
+interface RawDataViewerProps {
+  data: any;
+  title?: string;
+}
+
+export function RawDataViewer({ data, title = 'Raw Data' }: RawDataViewerProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set(['root']));
+  const [copiedPath, setCopiedPath] = useState<string | null>(null);
+
+  const jsonString = useMemo(() => JSON.stringify(data, null, 2), [data]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(jsonString);
+      toast.success('Copied to clipboard');
+    } catch (error) {
+      toast.error('Failed to copy');
+    }
+  };
+
+  const handleDownload = () => {
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${title.toLowerCase().replace(/\s+/g, '-')}-${Date.now()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    toast.success('Download started');
+  };
+
+  const togglePath = (path: string) => {
+    const newExpanded = new Set(expandedPaths);
+    if (newExpanded.has(path)) {
+      newExpanded.delete(path);
+    } else {
+      newExpanded.add(path);
+    }
+    setExpandedPaths(newExpanded);
+  };
+
+  const handleCopyValue = async (value: any, path: string) => {
+    try {
+      const valueString = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+      await navigator.clipboard.writeText(valueString);
+      setCopiedPath(path);
+      setTimeout(() => setCopiedPath(null), 2000);
+      toast.success('Value copied');
+    } catch (error) {
+      toast.error('Failed to copy');
+    }
+  };
+
+  const renderValue = (value: any, key: string, path: string, depth: number = 0): JSX.Element => {
+    const isExpanded = expandedPaths.has(path);
+    const indent = depth * 20;
+
+    // Filter by search query
+    if (searchQuery && !JSON.stringify({ [key]: value }).toLowerCase().includes(searchQuery.toLowerCase())) {
+      return <></>;
+    }
+
+    if (value === null) {
+      return (
+        <div className="flex items-center gap-2 py-1" style={{ paddingLeft: `${indent}px` }}>
+          <span className="text-sm font-mono text-muted-foreground">{key}:</span>
+          <span className="text-sm font-mono text-muted-foreground italic">null</span>
+        </div>
+      );
+    }
+
+    if (typeof value === 'boolean') {
+      return (
+        <div className="flex items-center gap-2 py-1" style={{ paddingLeft: `${indent}px` }}>
+          <span className="text-sm font-mono text-muted-foreground">{key}:</span>
+          <span className={`text-sm font-mono ${value ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+            {value.toString()}
+          </span>
+        </div>
+      );
+    }
+
+    if (typeof value === 'number') {
+      return (
+        <div className="flex items-center gap-2 py-1" style={{ paddingLeft: `${indent}px` }}>
+          <span className="text-sm font-mono text-muted-foreground">{key}:</span>
+          <span className="text-sm font-mono text-purple-600 dark:text-purple-400">{value}</span>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-4 w-4 opacity-0 group-hover:opacity-100"
+            onClick={() => handleCopyValue(value, path)}
+          >
+            {copiedPath === path ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+          </Button>
+        </div>
+      );
+    }
+
+    if (typeof value === 'string') {
+      const isUrl = value.startsWith('http://') || value.startsWith('https://');
+      const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(value);
+      const isDate = !isNaN(Date.parse(value)) && value.includes('-');
+
+      return (
+        <div className="flex items-center gap-2 py-1 group" style={{ paddingLeft: `${indent}px` }}>
+          <span className="text-sm font-mono text-muted-foreground">{key}:</span>
+          {isUrl ? (
+            <a href={value} target="_blank" rel="noopener noreferrer" className="text-sm font-mono text-blue-600 dark:text-blue-400 hover:underline">
+              "{value}"
+            </a>
+          ) : (
+            <span className={`text-sm font-mono ${isUuid ? 'text-orange-600 dark:text-orange-400' : isDate ? 'text-cyan-600 dark:text-cyan-400' : 'text-green-600 dark:text-green-400'}`}>
+              "{value}"
+            </span>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-4 w-4 opacity-0 group-hover:opacity-100"
+            onClick={() => handleCopyValue(value, path)}
+          >
+            {copiedPath === path ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+          </Button>
+        </div>
+      );
+    }
+
+    if (Array.isArray(value)) {
+      return (
+        <div className="py-1" style={{ paddingLeft: `${indent}px` }}>
+          <div
+            className="flex items-center gap-2 cursor-pointer hover:bg-muted/50 rounded px-2 py-1 -ml-2"
+            onClick={() => togglePath(path)}
+          >
+            {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+            <span className="text-sm font-mono text-muted-foreground">{key}:</span>
+            <Badge variant="outline" className="text-xs">Array[{value.length}]</Badge>
+          </div>
+          {isExpanded && (
+            <div className="ml-4 border-l border-muted-foreground/20 pl-2">
+              {value.map((item, index) => renderValue(item, `[${index}]`, `${path}.${index}`, depth + 1))}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    if (typeof value === 'object') {
+      const keys = Object.keys(value);
+      return (
+        <div className="py-1" style={{ paddingLeft: `${indent}px` }}>
+          <div
+            className="flex items-center gap-2 cursor-pointer hover:bg-muted/50 rounded px-2 py-1 -ml-2"
+            onClick={() => togglePath(path)}
+          >
+            {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+            <span className="text-sm font-mono text-muted-foreground">{key}:</span>
+            <Badge variant="outline" className="text-xs">Object ({keys.length} keys)</Badge>
+          </div>
+          {isExpanded && (
+            <div className="ml-4 border-l border-muted-foreground/20 pl-2">
+              {keys.map((k) => renderValue(value[k], k, `${path}.${k}`, depth + 1))}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return <></>;
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between gap-3">
+        <h3 className="text-lg font-semibold">{title}</h3>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={handleCopy}>
+            <Copy className="h-4 w-4 mr-2" />
+            Copy
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleDownload}>
+            <Download className="h-4 w-4 mr-2" />
+            Download
+          </Button>
+        </div>
+      </div>
+
+      {/* Search */}
+      <Input
+        placeholder="Search in JSON..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        className="max-w-sm"
+      />
+
+      {/* JSON Tree */}
+      <ScrollArea className="h-[600px] w-full rounded-md border bg-muted/30 p-4">
+        <div className="font-mono text-sm">
+          {Object.keys(data).map((key) => renderValue(data[key], key, `root.${key}`, 0))}
+        </div>
+      </ScrollArea>
+
+      {/* Stats */}
+      <div className="flex items-center gap-4 text-xs text-muted-foreground">
+        <span>Keys: {Object.keys(data).length}</span>
+        <span>Size: {(jsonString.length / 1024).toFixed(2)} KB</span>
+        <span>Lines: {jsonString.split('\n').length}</span>
+      </div>
+    </div>
+  );
+}

src/components/moderation/SubmissionItemsList.tsx

@@ -5,13 +5,14 @@ import { PhotoSubmissionDisplay } from './PhotoSubmissionDisplay';
 import { RichParkDisplay } from './displays/RichParkDisplay';
 import { RichRideDisplay } from './displays/RichRideDisplay';
 import { RichCompanyDisplay } from './displays/RichCompanyDisplay';
+import { RichRideModelDisplay } from './displays/RichRideModelDisplay';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { AlertCircle, Loader2 } from 'lucide-react';
 import { format } from 'date-fns';
 import type { SubmissionItemData } from '@/types/submissions';
-import type { ParkSubmissionData, RideSubmissionData, CompanySubmissionData } from '@/types/submission-data';
+import type { ParkSubmissionData, RideSubmissionData, CompanySubmissionData, RideModelSubmissionData } from '@/types/submission-data';
 import { logger } from '@/lib/logger';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { ModerationErrorBoundary } from '@/components/error/ModerationErrorBoundary';
@@ -109,6 +110,15 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
                 entityData = data as any;
                 break;
               }
+              case 'ride_model': {
+                const { data } = await supabase
+                  .from('ride_model_submissions')
+                  .select('*')
+                  .eq('id', item.item_data_id)
+                  .maybeSingle();
+                entityData = data as any;
+                break;
+              }
               default:
                 entityData = null;
             }
@@ -267,6 +277,18 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
       );
     }
     
+    if (item.item_type === 'ride_model' && entityData) {
+      return (
+        <>
+          {itemMetadata}
+          <RichRideModelDisplay
+            data={entityData as unknown as RideModelSubmissionData}
+            actionType={actionType}
+          />
+        </>
+      );
+    }
+    
     // Fallback to SubmissionChangesDisplay
     return (
       <>

src/components/moderation/displays/RichCompanyDisplay.tsx

@@ -142,11 +142,21 @@ export function RichCompanyDisplay({ data, actionType, showAllFields = true }: R
       )}
       
       {/* Images Preview */}
-      {(data.banner_image_url || data.card_image_url) && (
+      {(data.logo_url || data.banner_image_url || data.card_image_url) && (
         <div className="space-y-2">
           <Separator />
           <div className="text-sm font-semibold">Images</div>
           <div className="grid grid-cols-2 gap-2">
+            {data.logo_url && (
+              <div className="space-y-1">
+                <img 
+                  src={data.logo_url} 
+                  alt="Logo" 
+                  className="w-full h-24 object-contain bg-muted rounded border p-2"
+                />
+                <div className="text-xs text-center text-muted-foreground">Logo</div>
+              </div>
+            )}
             {data.banner_image_url && (
               <div className="space-y-1">
                 <img 
@@ -154,7 +164,12 @@ export function RichCompanyDisplay({ data, actionType, showAllFields = true }: R
                   alt="Banner" 
                   className="w-full h-24 object-cover rounded border"
                 />
-                <div className="text-xs text-center text-muted-foreground">Banner</div>
+                <div className="text-xs text-center text-muted-foreground">
+                  Banner
+                  {data.banner_image_id && (
+                    <span className="block font-mono text-[10px] mt-0.5">ID: {data.banner_image_id.slice(0, 8)}...</span>
+                  )}
+                </div>
               </div>
             )}
             {data.card_image_url && (
@@ -164,7 +179,12 @@ export function RichCompanyDisplay({ data, actionType, showAllFields = true }: R
                   alt="Card" 
                   className="w-full h-24 object-cover rounded border"
                 />
-                <div className="text-xs text-center text-muted-foreground">Card</div>
+                <div className="text-xs text-center text-muted-foreground">
+                  Card
+                  {data.card_image_id && (
+                    <span className="block font-mono text-[10px] mt-0.5">ID: {data.card_image_id.slice(0, 8)}...</span>
+                  )}
+                </div>
               </div>
             )}
           </div>

src/components/moderation/displays/RichParkDisplay.tsx

@@ -111,6 +111,30 @@ export function RichParkDisplay({ data, actionType, showAllFields = true }: Rich
       
       {/* Key Information Grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {/* Contact Information */}
+        {(data.phone || data.email) && (
+          <div className="bg-muted/50 rounded-lg p-3">
+            <div className="flex items-center gap-2 mb-2">
+              <Globe className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">Contact</span>
+            </div>
+            <div className="text-sm space-y-1 ml-6">
+              {data.phone && (
+                <div>
+                  <span className="text-muted-foreground">Phone:</span>{' '}
+                  <a href={`tel:${data.phone}`} className="font-medium hover:underline">{data.phone}</a>
+                </div>
+              )}
+              {data.email && (
+                <div>
+                  <span className="text-muted-foreground">Email:</span>{' '}
+                  <a href={`mailto:${data.email}`} className="font-medium hover:underline">{data.email}</a>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        
         {/* Dates */}
         {(data.opening_date || data.closing_date) && (
           <div className="bg-muted/50 rounded-lg p-3">
@@ -231,7 +255,12 @@ export function RichParkDisplay({ data, actionType, showAllFields = true }: Rich
                   alt="Banner" 
                   className="w-full h-24 object-cover rounded border"
                 />
-                <div className="text-xs text-center text-muted-foreground">Banner</div>
+                <div className="text-xs text-center text-muted-foreground">
+                  Banner
+                  {data.banner_image_id && (
+                    <span className="block font-mono text-[10px] mt-0.5">ID: {data.banner_image_id.slice(0, 8)}...</span>
+                  )}
+                </div>
               </div>
             )}
             {data.card_image_url && (
@@ -241,7 +270,12 @@ export function RichParkDisplay({ data, actionType, showAllFields = true }: Rich
                   alt="Card" 
                   className="w-full h-24 object-cover rounded border"
                 />
-                <div className="text-xs text-center text-muted-foreground">Card</div>
+                <div className="text-xs text-center text-muted-foreground">
+                  Card
+                  {data.card_image_id && (
+                    <span className="block font-mono text-[10px] mt-0.5">ID: {data.card_image_id.slice(0, 8)}...</span>
+                  )}
+                </div>
               </div>
             )}
           </div>

src/components/moderation/displays/RichRideDisplay.tsx

@@ -1,6 +1,8 @@
-import { Train, Gauge, Ruler, Zap, Calendar, Building, User, ExternalLink, AlertCircle, TrendingUp } from 'lucide-react';
+import { Train, Gauge, Ruler, Zap, Calendar, Building, User, ExternalLink, AlertCircle, TrendingUp, Droplets, Sparkles, RotateCw, Baby, Navigation } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { ChevronDown, ChevronRight } from 'lucide-react';
 import type { RideSubmissionData } from '@/types/submission-data';
 import { useEffect, useState } from 'react';
 import { supabase } from '@/lib/supabaseClient';
@@ -16,10 +18,11 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
   const [manufacturer, setManufacturer] = useState<string | null>(null);
   const [designer, setDesigner] = useState<string | null>(null);
   const [model, setModel] = useState<string | null>(null);
+  const [showCategorySpecific, setShowCategorySpecific] = useState(false);
+  const [showTechnical, setShowTechnical] = useState(false);
   
   useEffect(() => {
     const fetchRelatedData = async () => {
-      // Fetch park
       if (data.park_id) {
         const { data: parkData } = await supabase
           .from('parks')
@@ -29,7 +32,6 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
         setPark(parkData?.name || null);
       }
       
-      // Fetch manufacturer
       if (data.manufacturer_id) {
         const { data: mfgData } = await supabase
           .from('companies')
@@ -39,7 +41,6 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
         setManufacturer(mfgData?.name || null);
       }
       
-      // Fetch designer
       if (data.designer_id) {
         const { data: designerData } = await supabase
           .from('companies')
@@ -49,7 +50,6 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
         setDesigner(designerData?.name || null);
       }
       
-      // Fetch model
       if (data.ride_model_id) {
         const { data: modelData } = await supabase
           .from('ride_models')
@@ -73,19 +73,15 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
     }
   };
   
-  // Format metrics for display
+  // Determine which category-specific section to show
-  const heightDisplay = data.max_height_meters 
+  const category = data.category?.toLowerCase();
-    ? `${data.max_height_meters.toFixed(1)} m`
+  const hasWaterFields = category === 'water_ride' && (data.water_depth_cm || data.splash_height_meters || data.wetness_level || data.flume_type || data.boat_capacity);
-    : null;
+  const hasDarkRideFields = category === 'dark_ride' && (data.theme_name || data.story_description || data.show_duration_seconds || data.animatronics_count || data.projection_type || data.ride_system || data.scenes_count);
-  const speedDisplay = data.max_speed_kmh 
+  const hasFlatRideFields = category === 'flat_ride' && (data.rotation_type || data.motion_pattern || data.platform_count || data.swing_angle_degrees || data.rotation_speed_rpm || data.arm_length_meters || data.max_height_reached_meters);
-    ? `${data.max_speed_kmh.toFixed(1)} km/h`
+  const hasKiddieFields = category === 'kiddie_ride' && (data.min_age || data.max_age || data.educational_theme || data.character_theme);
-    : null;
+  const hasTransportFields = category === 'transport_ride' && (data.transport_type || data.route_length_meters || data.stations_count || data.vehicle_capacity || data.vehicles_count || data.round_trip_duration_seconds);
-  const lengthDisplay = data.length_meters 
+  
-    ? `${data.length_meters.toFixed(1)} m`
+  const hasTechnicalFields = data.track_material || data.support_material || data.propulsion_method || data.coaster_type || data.seating_type || data.intensity_level;
-    : null;
-  const dropDisplay = data.drop_height_meters 
-    ? `${data.drop_height_meters.toFixed(1)} m`
-    : null;
   
   return (
     <div className="space-y-4">
@@ -124,46 +120,46 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
         </div>
       </div>
       
-      {/* Statistics Grid */}
+      {/* Primary Statistics Grid */}
-      {(heightDisplay || speedDisplay || lengthDisplay || dropDisplay || data.duration_seconds || data.inversions) && (
+      {(data.max_height_meters || data.max_speed_kmh || data.length_meters || data.drop_height_meters || data.duration_seconds || data.inversions !== null) && (
         <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-          {heightDisplay && (
+          {data.max_height_meters && (
             <div className="bg-muted/50 rounded-lg p-3">
               <div className="flex items-center gap-2 mb-1">
                 <TrendingUp className="h-4 w-4 text-blue-500" />
                 <span className="text-xs text-muted-foreground">Height</span>
               </div>
-              <div className="text-lg font-bold">{heightDisplay}</div>
+              <div className="text-lg font-bold">{data.max_height_meters.toFixed(1)} m</div>
             </div>
           )}
           
-          {speedDisplay && (
+          {data.max_speed_kmh && (
             <div className="bg-muted/50 rounded-lg p-3">
               <div className="flex items-center gap-2 mb-1">
                 <Zap className="h-4 w-4 text-yellow-500" />
                 <span className="text-xs text-muted-foreground">Speed</span>
               </div>
-              <div className="text-lg font-bold">{speedDisplay}</div>
+              <div className="text-lg font-bold">{data.max_speed_kmh.toFixed(1)} km/h</div>
             </div>
           )}
           
-          {lengthDisplay && (
+          {data.length_meters && (
             <div className="bg-muted/50 rounded-lg p-3">
               <div className="flex items-center gap-2 mb-1">
                 <Ruler className="h-4 w-4 text-green-500" />
                 <span className="text-xs text-muted-foreground">Length</span>
               </div>
-              <div className="text-lg font-bold">{lengthDisplay}</div>
+              <div className="text-lg font-bold">{data.length_meters.toFixed(1)} m</div>
             </div>
           )}
           
-          {dropDisplay && (
+          {data.drop_height_meters && (
             <div className="bg-muted/50 rounded-lg p-3">
               <div className="flex items-center gap-2 mb-1">
                 <TrendingUp className="h-4 w-4 text-purple-500" />
                 <span className="text-xs text-muted-foreground">Drop</span>
               </div>
-              <div className="text-lg font-bold">{dropDisplay}</div>
+              <div className="text-lg font-bold">{data.drop_height_meters.toFixed(1)} m</div>
             </div>
           )}
           
@@ -189,7 +185,379 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
         </div>
       )}
       
-      {/* Companies */}
+      {/* Requirements & Capacity */}
+      {(data.height_requirement || data.age_requirement || data.capacity_per_hour || data.max_g_force) && (
+        <div className="bg-muted/50 rounded-lg p-4">
+          <div className="text-sm font-semibold mb-3">Requirements & Capacity</div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+            {data.height_requirement && (
+              <div>
+                <span className="text-muted-foreground block text-xs mb-1">Height Requirement</span>
+                <span className="font-medium">{data.height_requirement} cm</span>
+              </div>
+            )}
+            {data.age_requirement && (
+              <div>
+                <span className="text-muted-foreground block text-xs mb-1">Min Age</span>
+                <span className="font-medium">{data.age_requirement}+</span>
+              </div>
+            )}
+            {data.capacity_per_hour && (
+              <div>
+                <span className="text-muted-foreground block text-xs mb-1">Capacity/Hour</span>
+                <span className="font-medium">{data.capacity_per_hour}</span>
+              </div>
+            )}
+            {data.max_g_force && (
+              <div>
+                <span className="text-muted-foreground block text-xs mb-1">Max G-Force</span>
+                <span className="font-medium">{data.max_g_force}g</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      
+      {/* Technical Details (Collapsible) */}
+      {hasTechnicalFields && (
+        <Collapsible open={showTechnical} onOpenChange={setShowTechnical}>
+          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
+            {showTechnical ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+            <Building className="h-4 w-4" />
+            <span>Technical Specifications</span>
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent className="mt-3">
+            <div className="bg-muted/50 rounded-lg p-4 space-y-3">
+              {data.track_material && data.track_material.length > 0 && (
+                <div>
+                  <span className="text-sm text-muted-foreground block mb-1.5">Track Material</span>
+                  <div className="flex flex-wrap gap-1.5">
+                    {data.track_material.map((material, i) => (
+                      <Badge key={i} variant="outline" className="text-xs">
+                        {material.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+              
+              {data.support_material && data.support_material.length > 0 && (
+                <div>
+                  <span className="text-sm text-muted-foreground block mb-1.5">Support Material</span>
+                  <div className="flex flex-wrap gap-1.5">
+                    {data.support_material.map((material, i) => (
+                      <Badge key={i} variant="outline" className="text-xs">
+                        {material.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+              
+              {data.propulsion_method && data.propulsion_method.length > 0 && (
+                <div>
+                  <span className="text-sm text-muted-foreground block mb-1.5">Propulsion Method</span>
+                  <div className="flex flex-wrap gap-1.5">
+                    {data.propulsion_method.map((method, i) => (
+                      <Badge key={i} variant="outline" className="text-xs">
+                        {method.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+              
+              <div className="grid grid-cols-2 gap-3 text-sm pt-2">
+                {data.coaster_type && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Coaster Type</span>
+                    <span className="font-medium">{data.coaster_type.replace(/_/g, ' ')}</span>
+                  </div>
+                )}
+                {data.seating_type && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Seating Type</span>
+                    <span className="font-medium">{data.seating_type.replace(/_/g, ' ')}</span>
+                  </div>
+                )}
+                {data.intensity_level && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Intensity Level</span>
+                    <Badge variant="secondary">{data.intensity_level.replace(/_/g, ' ').toUpperCase()}</Badge>
+                  </div>
+                )}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+      
+      {/* Water Ride Fields */}
+      {hasWaterFields && (
+        <Collapsible open={showCategorySpecific} onOpenChange={setShowCategorySpecific}>
+          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
+            {showCategorySpecific ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+            <Droplets className="h-4 w-4 text-blue-500" />
+            <span>Water Ride Specifications</span>
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent className="mt-3">
+            <div className="bg-blue-50 dark:bg-blue-950/30 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
+              <div className="grid grid-cols-2 gap-3 text-sm">
+                {data.water_depth_cm && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Water Depth</span>
+                    <span className="font-medium">{data.water_depth_cm} cm</span>
+                  </div>
+                )}
+                {data.splash_height_meters && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Splash Height</span>
+                    <span className="font-medium">{data.splash_height_meters.toFixed(1)} m</span>
+                  </div>
+                )}
+                {data.wetness_level && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Wetness Level</span>
+                    <Badge variant="secondary">{data.wetness_level.toUpperCase()}</Badge>
+                  </div>
+                )}
+                {data.flume_type && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Flume Type</span>
+                    <span className="font-medium">{data.flume_type.replace(/_/g, ' ')}</span>
+                  </div>
+                )}
+                {data.boat_capacity && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Boat Capacity</span>
+                    <span className="font-medium">{data.boat_capacity} riders</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+      
+      {/* Dark Ride Fields */}
+      {hasDarkRideFields && (
+        <Collapsible open={showCategorySpecific} onOpenChange={setShowCategorySpecific}>
+          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
+            {showCategorySpecific ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+            <Sparkles className="h-4 w-4 text-purple-500" />
+            <span>Dark Ride Details</span>
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent className="mt-3">
+            <div className="bg-purple-50 dark:bg-purple-950/30 rounded-lg p-4 border border-purple-200 dark:border-purple-800 space-y-3">
+              {data.theme_name && (
+                <div>
+                  <span className="text-sm text-muted-foreground block mb-1">Theme Name</span>
+                  <span className="font-medium">{data.theme_name}</span>
+                </div>
+              )}
+              {data.story_description && (
+                <div>
+                  <span className="text-sm text-muted-foreground block mb-1">Story Description</span>
+                  <p className="text-sm text-foreground">{data.story_description}</p>
+                </div>
+              )}
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm pt-2">
+                {data.show_duration_seconds && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Show Duration</span>
+                    <span className="font-medium">{Math.floor(data.show_duration_seconds / 60)}:{(data.show_duration_seconds % 60).toString().padStart(2, '0')}</span>
+                  </div>
+                )}
+                {data.animatronics_count && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Animatronics</span>
+                    <span className="font-medium">{data.animatronics_count}</span>
+                  </div>
+                )}
+                {data.scenes_count && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Scenes</span>
+                    <span className="font-medium">{data.scenes_count}</span>
+                  </div>
+                )}
+                {data.projection_type && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Projection Type</span>
+                    <span className="font-medium">{data.projection_type.replace(/_/g, ' ')}</span>
+                  </div>
+                )}
+                {data.ride_system && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Ride System</span>
+                    <span className="font-medium">{data.ride_system.replace(/_/g, ' ')}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+      
+      {/* Flat Ride Fields */}
+      {hasFlatRideFields && (
+        <Collapsible open={showCategorySpecific} onOpenChange={setShowCategorySpecific}>
+          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
+            {showCategorySpecific ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+            <RotateCw className="h-4 w-4 text-orange-500" />
+            <span>Flat Ride Specifications</span>
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent className="mt-3">
+            <div className="bg-orange-50 dark:bg-orange-950/30 rounded-lg p-4 border border-orange-200 dark:border-orange-800">
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
+                {data.rotation_type && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Rotation Type</span>
+                    <span className="font-medium">{data.rotation_type.replace(/_/g, ' ')}</span>
+                  </div>
+                )}
+                {data.motion_pattern && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Motion Pattern</span>
+                    <span className="font-medium">{data.motion_pattern.replace(/_/g, ' ')}</span>
+                  </div>
+                )}
+                {data.platform_count && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Platforms</span>
+                    <span className="font-medium">{data.platform_count}</span>
+                  </div>
+                )}
+                {data.swing_angle_degrees && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Swing Angle</span>
+                    <span className="font-medium">{data.swing_angle_degrees}°</span>
+                  </div>
+                )}
+                {data.rotation_speed_rpm && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Rotation Speed</span>
+                    <span className="font-medium">{data.rotation_speed_rpm} RPM</span>
+                  </div>
+                )}
+                {data.arm_length_meters && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Arm Length</span>
+                    <span className="font-medium">{data.arm_length_meters.toFixed(1)} m</span>
+                  </div>
+                )}
+                {data.max_height_reached_meters && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Max Height Reached</span>
+                    <span className="font-medium">{data.max_height_reached_meters.toFixed(1)} m</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+      
+      {/* Kiddie Ride Fields */}
+      {hasKiddieFields && (
+        <Collapsible open={showCategorySpecific} onOpenChange={setShowCategorySpecific}>
+          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
+            {showCategorySpecific ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+            <Baby className="h-4 w-4 text-pink-500" />
+            <span>Kiddie Ride Details</span>
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent className="mt-3">
+            <div className="bg-pink-50 dark:bg-pink-950/30 rounded-lg p-4 border border-pink-200 dark:border-pink-800">
+              <div className="grid grid-cols-2 gap-3 text-sm">
+                {data.min_age && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Min Age</span>
+                    <span className="font-medium">{data.min_age}</span>
+                  </div>
+                )}
+                {data.max_age && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Max Age</span>
+                    <span className="font-medium">{data.max_age}</span>
+                  </div>
+                )}
+                {data.educational_theme && (
+                  <div className="col-span-2">
+                    <span className="text-muted-foreground block text-xs mb-1">Educational Theme</span>
+                    <span className="font-medium">{data.educational_theme}</span>
+                  </div>
+                )}
+                {data.character_theme && (
+                  <div className="col-span-2">
+                    <span className="text-muted-foreground block text-xs mb-1">Character Theme</span>
+                    <span className="font-medium">{data.character_theme}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+      
+      {/* Transport Ride Fields */}
+      {hasTransportFields && (
+        <Collapsible open={showCategorySpecific} onOpenChange={setShowCategorySpecific}>
+          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
+            {showCategorySpecific ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+            <Navigation className="h-4 w-4 text-teal-500" />
+            <span>Transport Ride Specifications</span>
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent className="mt-3">
+            <div className="bg-teal-50 dark:bg-teal-950/30 rounded-lg p-4 border border-teal-200 dark:border-teal-800">
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
+                {data.transport_type && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Transport Type</span>
+                    <span className="font-medium">{data.transport_type.replace(/_/g, ' ')}</span>
+                  </div>
+                )}
+                {data.route_length_meters && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Route Length</span>
+                    <span className="font-medium">{data.route_length_meters.toFixed(0)} m</span>
+                  </div>
+                )}
+                {data.stations_count && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Stations</span>
+                    <span className="font-medium">{data.stations_count}</span>
+                  </div>
+                )}
+                {data.vehicle_capacity && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Vehicle Capacity</span>
+                    <span className="font-medium">{data.vehicle_capacity}</span>
+                  </div>
+                )}
+                {data.vehicles_count && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Total Vehicles</span>
+                    <span className="font-medium">{data.vehicles_count}</span>
+                  </div>
+                )}
+                {data.round_trip_duration_seconds && (
+                  <div>
+                    <span className="text-muted-foreground block text-xs mb-1">Round Trip</span>
+                    <span className="font-medium">{Math.floor(data.round_trip_duration_seconds / 60)}:{(data.round_trip_duration_seconds % 60).toString().padStart(2, '0')}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+      
+      {/* Companies & Model */}
       {(manufacturer || designer || model) && (
         <div className="bg-muted/50 rounded-lg p-4">
           <div className="flex items-center gap-2 mb-2">
@@ -259,27 +627,6 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
         </div>
       )}
       
-      {/* Additional Details */}
-      {(data.capacity_per_hour || data.max_g_force || data.height_requirement || data.age_requirement) && (
-        <div className="bg-muted/50 rounded-lg p-4">
-          <div className="text-sm font-semibold mb-2">Additional Details</div>
-          <div className="grid grid-cols-2 gap-2 text-sm ml-2">
-            {data.capacity_per_hour && (
-              <div><span className="text-muted-foreground">Capacity/Hour:</span> <span className="font-medium">{data.capacity_per_hour}</span></div>
-            )}
-            {data.max_g_force && (
-              <div><span className="text-muted-foreground">Max G-Force:</span> <span className="font-medium">{data.max_g_force}g</span></div>
-            )}
-            {data.height_requirement && (
-              <div><span className="text-muted-foreground">Height Req:</span> <span className="font-medium">{data.height_requirement} cm</span></div>
-            )}
-            {data.age_requirement && (
-              <div><span className="text-muted-foreground">Age Req:</span> <span className="font-medium">{data.age_requirement}+</span></div>
-            )}
-          </div>
-        </div>
-      )}
-      
       {/* Source */}
       {data.source_url && (
         <a 
@@ -307,7 +654,7 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
       )}
       
       {/* Images Preview */}
-      {(data.banner_image_url || data.card_image_url) && (
+      {(data.banner_image_url || data.card_image_url || data.image_url) && (
         <div className="space-y-2">
           <Separator />
           <div className="text-sm font-semibold">Images</div>
@@ -319,7 +666,12 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
                   alt="Banner" 
                   className="w-full h-32 object-cover rounded border"
                 />
-                <div className="text-xs text-center text-muted-foreground">Banner</div>
+                <div className="text-xs text-center text-muted-foreground">
+                  Banner
+                  {data.banner_image_id && (
+                    <span className="block font-mono text-[10px] mt-0.5">ID: {data.banner_image_id.slice(0, 8)}...</span>
+                  )}
+                </div>
               </div>
             )}
             {data.card_image_url && (
@@ -329,7 +681,22 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
                   alt="Card" 
                   className="w-full h-32 object-cover rounded border"
                 />
-                <div className="text-xs text-center text-muted-foreground">Card</div>
+                <div className="text-xs text-center text-muted-foreground">
+                  Card
+                  {data.card_image_id && (
+                    <span className="block font-mono text-[10px] mt-0.5">ID: {data.card_image_id.slice(0, 8)}...</span>
+                  )}
+                </div>
+              </div>
+            )}
+            {data.image_url && !data.banner_image_url && !data.card_image_url && (
+              <div className="space-y-1">
+                <img 
+                  src={data.image_url} 
+                  alt="Ride" 
+                  className="w-full h-32 object-cover rounded border"
+                />
+                <div className="text-xs text-center text-muted-foreground">Legacy Image</div>
               </div>
             )}
           </div>

src/components/moderation/displays/RichRideModelDisplay.tsx

@@ -0,0 +1,156 @@
+import { Package, Building, Calendar, ExternalLink, AlertCircle } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import type { RideModelSubmissionData } from '@/types/submission-data';
+import { useEffect, useState } from 'react';
+import { supabase } from '@/lib/supabaseClient';
+
+interface RichRideModelDisplayProps {
+  data: RideModelSubmissionData;
+  actionType: 'create' | 'edit' | 'delete';
+  showAllFields?: boolean;
+}
+
+export function RichRideModelDisplay({ data, actionType, showAllFields = true }: RichRideModelDisplayProps) {
+  const [manufacturer, setManufacturer] = useState<string | null>(null);
+  
+  useEffect(() => {
+    const fetchManufacturer = async () => {
+      if (data.manufacturer_id) {
+        const { data: mfgData } = await supabase
+          .from('companies')
+          .select('name')
+          .eq('id', data.manufacturer_id)
+          .single();
+        setManufacturer(mfgData?.name || null);
+      }
+    };
+    
+    fetchManufacturer();
+  }, [data.manufacturer_id]);
+  
+  return (
+    <div className="space-y-4">
+      {/* Header Section */}
+      <div className="flex items-start gap-3">
+        <div className="p-2 rounded-lg bg-primary/10 text-primary">
+          <Package className="h-5 w-5" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-xl font-bold text-foreground truncate">{data.name}</h3>
+          {manufacturer && (
+            <div className="text-sm text-muted-foreground mt-0.5">by {manufacturer}</div>
+          )}
+          <div className="flex items-center gap-2 mt-1 flex-wrap">
+            <Badge variant="secondary" className="text-xs">
+              {data.category?.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+            </Badge>
+            {data.ride_type && (
+              <Badge variant="outline" className="text-xs">
+                {data.ride_type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+              </Badge>
+            )}
+            {actionType === 'create' && (
+              <Badge className="bg-green-600 text-white text-xs">New Model</Badge>
+            )}
+            {actionType === 'edit' && (
+              <Badge className="bg-amber-600 text-white text-xs">Edit</Badge>
+            )}
+            {actionType === 'delete' && (
+              <Badge variant="destructive" className="text-xs">Delete</Badge>
+            )}
+          </div>
+        </div>
+      </div>
+      
+      {/* Manufacturer */}
+      {manufacturer && (
+        <div className="bg-muted/50 rounded-lg p-3">
+          <div className="flex items-center gap-2 mb-2">
+            <Building className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold">Manufacturer</span>
+          </div>
+          <div className="text-sm font-medium ml-6">
+            {manufacturer}
+          </div>
+        </div>
+      )}
+      
+      {/* Description */}
+      {data.description && (
+        <div className="bg-muted/50 rounded-lg p-4">
+          <div className="text-sm font-semibold mb-2">Description</div>
+          <div className="text-sm text-muted-foreground leading-relaxed">
+            {data.description}
+          </div>
+        </div>
+      )}
+      
+      {/* Source */}
+      {data.source_url && (
+        <a 
+          href={data.source_url} 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:underline"
+        >
+          Source
+          <ExternalLink className="h-3 w-3" />
+        </a>
+      )}
+      
+      {/* Submission Notes */}
+      {data.submission_notes && (
+        <div className="bg-amber-50 dark:bg-amber-950 rounded-lg p-3 border border-amber-200 dark:border-amber-800">
+          <div className="flex items-center gap-2 mb-1">
+            <AlertCircle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+            <span className="text-sm font-semibold text-amber-900 dark:text-amber-100">Submitter Notes</span>
+          </div>
+          <div className="text-sm text-amber-800 dark:text-amber-200 ml-6">
+            {data.submission_notes}
+          </div>
+        </div>
+      )}
+      
+      {/* Images Preview */}
+      {(data.banner_image_url || data.card_image_url) && (
+        <div className="space-y-2">
+          <Separator />
+          <div className="text-sm font-semibold">Images</div>
+          <div className="grid grid-cols-2 gap-2">
+            {data.banner_image_url && (
+              <div className="space-y-1">
+                <img 
+                  src={data.banner_image_url} 
+                  alt="Banner" 
+                  className="w-full h-24 object-cover rounded border"
+                />
+                <div className="text-xs text-center text-muted-foreground">
+                  Banner
+                  {data.banner_image_id && (
+                    <span className="block font-mono text-[10px] mt-0.5">ID: {data.banner_image_id.slice(0, 8)}...</span>
+                  )}
+                </div>
+              </div>
+            )}
+            {data.card_image_url && (
+              <div className="space-y-1">
+                <img 
+                  src={data.card_image_url} 
+                  alt="Card" 
+                  className="w-full h-24 object-cover rounded border"
+                />
+                <div className="text-xs text-center text-muted-foreground">
+                  Card
+                  {data.card_image_id && (
+                    <span className="block font-mono text-[10px] mt-0.5">ID: {data.card_image_id.slice(0, 8)}...</span>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/moderation/renderers/QueueItemHeader.tsx

@@ -1,6 +1,7 @@
 import { memo, useCallback } from 'react';
-import { MessageSquare, Image, FileText, Calendar, Edit, Lock, AlertCircle } from 'lucide-react';
+import { MessageSquare, Image, FileText, Calendar, Edit, Lock, AlertCircle, Code2 } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { UserAvatar } from '@/components/ui/user-avatar';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { ValidationSummary } from '../ValidationSummary';
@@ -16,6 +17,7 @@ interface QueueItemHeaderProps {
   currentLockSubmissionId?: string;
   validationResult: ValidationResult | null;
   onValidationChange: (result: ValidationResult) => void;
+  onViewRawData?: () => void;
 }
 
 const getStatusBadgeVariant = (status: string): "default" | "secondary" | "destructive" | "outline" => {
@@ -36,7 +38,8 @@ export const QueueItemHeader = memo(({
   isLockedByOther,
   currentLockSubmissionId,
   validationResult,
-  onValidationChange
+  onValidationChange,
+  onViewRawData
 }: QueueItemHeaderProps) => {
   const handleValidationChange = useCallback((result: ValidationResult) => {
     onValidationChange(result);
@@ -45,7 +48,7 @@ export const QueueItemHeader = memo(({
   return (
     <>
       <div className={`flex gap-3 ${isMobile ? 'flex-col' : 'items-center justify-between'}`}>
-        <div className="flex items-center gap-2 flex-wrap">
+        <div className="flex items-center gap-2 flex-wrap flex-1">
           <Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
             {item.type === 'review' ? (
               <>
@@ -114,18 +117,40 @@ export const QueueItemHeader = memo(({
             />
           )}
         </div>
-        <Tooltip>
+        
-          <TooltipTrigger asChild>
+        <div className="flex items-center gap-2">
-            <div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
+          {onViewRawData && (
-              <Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
+            <Tooltip>
-              {format(new Date(item.created_at), isMobile ? 'MMM d, HH:mm:ss' : 'MMM d, yyyy HH:mm:ss.SSS')}
+              <TooltipTrigger asChild>
-            </div>
+                <Button
-          </TooltipTrigger>
+                  variant="ghost"
-          <TooltipContent>
+                  size="sm"
-            <p className="text-xs">Full timestamp:</p>
+                  onClick={onViewRawData}
-            <p className="font-mono">{item.created_at}</p>
+                  className="h-8"
-          </TooltipContent>
+                >
-        </Tooltip>
+                  <Code2 className="h-4 w-4" />
+                  {!isMobile && <span className="ml-2">Raw Data</span>}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>View complete JSON data</p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+          
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
+                <Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
+                {format(new Date(item.created_at), isMobile ? 'MMM d, HH:mm:ss' : 'MMM d, yyyy HH:mm:ss.SSS')}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className="text-xs">Full timestamp:</p>
+              <p className="font-mono">{item.created_at}</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
       </div>
       
       {item.user_profile && (

supabase/migrations/20251104015548_c737afe7-657c-4169-a5f6-5782881625da.sql

@@ -0,0 +1,55 @@
+-- Fix update_content_submissions_updated_at trigger to work with relational data model
+-- Removes reference to non-existent NEW.content column
+-- Uses CASCADE to handle dependent triggers on other tables
+
+DROP TRIGGER IF EXISTS update_content_submissions_updated_at ON public.content_submissions;
+DROP TRIGGER IF EXISTS update_timeline_event_submissions_updated_at ON public.timeline_event_submissions;
+DROP FUNCTION IF EXISTS public.update_content_submissions_updated_at() CASCADE;
+
+CREATE OR REPLACE FUNCTION public.update_content_submissions_updated_at()
+RETURNS TRIGGER AS $$
+BEGIN
+  -- Only update updated_at if actual content has changed
+  -- Ignore changes to: updated_at, assigned_to, assigned_at, locked_until, priority, review_count, first_reviewed_at, resolved_at, submitted_at
+  IF (
+    NEW.status IS DISTINCT FROM OLD.status OR
+    NEW.reviewer_id IS DISTINCT FROM OLD.reviewer_id OR
+    NEW.reviewer_notes IS DISTINCT FROM OLD.reviewer_notes OR
+    NEW.escalated IS DISTINCT FROM OLD.escalated OR
+    NEW.escalation_reason IS DISTINCT FROM OLD.escalation_reason OR
+    NEW.approval_mode IS DISTINCT FROM OLD.approval_mode OR
+    NEW.user_id IS DISTINCT FROM OLD.user_id OR
+    NEW.submission_type IS DISTINCT FROM OLD.submission_type OR
+    NEW.escalated_by IS DISTINCT FROM OLD.escalated_by OR
+    NEW.escalated_at IS DISTINCT FROM OLD.escalated_at OR
+    NEW.original_submission_id IS DISTINCT FROM OLD.original_submission_id
+  ) THEN
+    NEW.updated_at = NOW();
+  ELSE
+    -- Keep the old updated_at timestamp if only metadata changed
+    NEW.updated_at = OLD.updated_at;
+  END IF;
+  
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+-- Recreate trigger for content_submissions
+CREATE TRIGGER update_content_submissions_updated_at
+  BEFORE UPDATE ON public.content_submissions
+  FOR EACH ROW
+  EXECUTE FUNCTION public.update_content_submissions_updated_at();
+
+-- Recreate trigger for timeline_event_submissions (if this table exists)
+DO $$
+BEGIN
+  IF EXISTS (SELECT 1 FROM information_schema.tables WHERE table_schema = 'public' AND table_name = 'timeline_event_submissions') THEN
+    EXECUTE 'CREATE TRIGGER update_timeline_event_submissions_updated_at
+      BEFORE UPDATE ON public.timeline_event_submissions
+      FOR EACH ROW
+      EXECUTE FUNCTION public.update_content_submissions_updated_at()';
+  END IF;
+END $$;
+
+COMMENT ON FUNCTION public.update_content_submissions_updated_at() IS 
+  'Trigger function to update updated_at timestamp only when meaningful fields change, not just metadata like lock status or priority. Fixed to work with relational data model without JSONB content column.';