Refactor code structure and remove redundant changes

src-old/components/moderation/displays/RichCompanyDisplay.tsx

@@ -0,0 +1,197 @@
+import { Building, MapPin, Calendar, Globe, ExternalLink, AlertCircle } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { FlexibleDateDisplay } from '@/components/ui/flexible-date-display';
+import type { DatePrecision } from '@/components/ui/flexible-date-input';
+import type { CompanySubmissionData } from '@/types/submission-data';
+
+interface RichCompanyDisplayProps {
+  data: CompanySubmissionData;
+  actionType: 'create' | 'edit' | 'delete';
+  showAllFields?: boolean;
+}
+
+export function RichCompanyDisplay({ data, actionType, showAllFields = true }: RichCompanyDisplayProps) {
+  const getCompanyTypeColor = (type: string | undefined) => {
+    if (!type) return 'bg-gray-500';
+    switch (type.toLowerCase()) {
+      case 'manufacturer': return 'bg-blue-500';
+      case 'operator': return 'bg-green-500';
+      case 'designer': return 'bg-purple-500';
+      case 'property_owner': return 'bg-orange-500';
+      default: return 'bg-gray-500';
+    }
+  };
+  
+  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">
+          <Building 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>
+          <div className="flex items-center gap-2 mt-1 flex-wrap">
+            <Badge className={`${getCompanyTypeColor(data.company_type)} text-white text-xs`}>
+              {(data.company_type || 'Unknown')?.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+            </Badge>
+            {data.person_type && (
+              <Badge variant="outline" className="text-xs">
+                {data.person_type.replace(/\b\w/g, l => l.toUpperCase())}
+              </Badge>
+            )}
+            {actionType === 'create' && (
+              <Badge className="bg-green-600 text-white text-xs">New Company</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>
+      
+      {/* Key Information */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {/* Founded Date */}
+        {(data.founded_date || data.founded_year) && (
+          <div className="bg-muted/50 rounded-lg p-3">
+            <div className="flex items-center gap-2 mb-2">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">Founded</span>
+            </div>
+            <div className="text-sm ml-6">
+              {data.founded_date ? (
+                <FlexibleDateDisplay 
+                  date={data.founded_date} 
+                  precision={(data.founded_date_precision as DatePrecision) || 'day'} 
+                  className="font-medium"
+                />
+              ) : (
+                <span className="font-medium">{data.founded_year}</span>
+              )}
+            </div>
+          </div>
+        )}
+        
+        {/* Location */}
+        {data.headquarters_location && (
+          <div className="bg-muted/50 rounded-lg p-3">
+            <div className="flex items-center gap-2 mb-2">
+              <MapPin className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">Headquarters</span>
+            </div>
+            <div className="text-sm font-medium ml-6">
+              {data.headquarters_location}
+            </div>
+          </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>
+      )}
+      
+      {/* Website & Source */}
+      {(data.website_url || data.source_url) && (
+        <div className="flex items-center gap-3 flex-wrap">
+          {data.website_url && (
+            <a 
+              href={data.website_url} 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+            >
+              <Globe className="h-3.5 w-3.5" />
+              Official Website
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          )}
+          {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>
+          )}
+        </div>
+      )}
+      
+      {/* 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.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 
+                  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-old/components/moderation/displays/RichParkDisplay.tsx

@@ -0,0 +1,305 @@
+import { Building2, MapPin, Calendar, Globe, ExternalLink, Users, AlertCircle } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { FlexibleDateDisplay } from '@/components/ui/flexible-date-display';
+import type { DatePrecision } from '@/components/ui/flexible-date-input';
+import type { ParkSubmissionData } from '@/types/submission-data';
+import { useEffect, useState } from 'react';
+import { supabase } from '@/lib/supabaseClient';
+
+interface RichParkDisplayProps {
+  data: ParkSubmissionData;
+  actionType: 'create' | 'edit' | 'delete';
+  showAllFields?: boolean;
+}
+
+export function RichParkDisplay({ data, actionType, showAllFields = true }: RichParkDisplayProps) {
+  const [location, setLocation] = useState<any>(null);
+  const [operator, setOperator] = useState<string | null>(null);
+  const [propertyOwner, setPropertyOwner] = useState<string | null>(null);
+  
+  useEffect(() => {
+    // Guard against null/undefined data
+    if (!data) return;
+    
+    const fetchRelatedData = async () => {
+      // Fetch location if location_id exists (for edits)
+      if (data.location_id) {
+        const { data: locationData } = await supabase
+          .from('locations')
+          .select('*')
+          .eq('id', data.location_id)
+          .single();
+        setLocation(locationData);
+      } 
+      // Otherwise fetch from park_submission_locations (for new submissions)
+      else if (data.id) {
+        const { data: locationData } = await supabase
+          .from('park_submission_locations')
+          .select('*')
+          .eq('park_submission_id', data.id)
+          .maybeSingle();
+        setLocation(locationData);
+      }
+      
+      // Fetch operator
+      if (data.operator_id) {
+        const { data: operatorData } = await supabase
+          .from('companies')
+          .select('name')
+          .eq('id', data.operator_id)
+          .single();
+        setOperator(operatorData?.name || null);
+      }
+      
+      // Fetch property owner
+      if (data.property_owner_id) {
+        const { data: ownerData } = await supabase
+          .from('companies')
+          .select('name')
+          .eq('id', data.property_owner_id)
+          .single();
+        setPropertyOwner(ownerData?.name || null);
+      }
+    };
+    
+    fetchRelatedData();
+  }, [data.location_id, data.id, data.operator_id, data.property_owner_id]);
+  
+  const getStatusColor = (status: string | undefined) => {
+    if (!status) return 'bg-gray-500';
+    switch (status.toLowerCase()) {
+      case 'operating': return 'bg-green-500';
+      case 'closed': return 'bg-red-500';
+      case 'under_construction': return 'bg-blue-500';
+      case 'planned': return 'bg-purple-500';
+      default: return 'bg-gray-500';
+    }
+  };
+  
+  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">
+          <Building2 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>
+          <div className="flex items-center gap-2 mt-1 flex-wrap">
+            <Badge variant="secondary" className="text-xs">
+              {data.park_type?.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+            </Badge>
+            <Badge className={`${getStatusColor(data.status)} text-white text-xs`}>
+              {data.status?.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+            </Badge>
+            {actionType === 'create' && (
+              <Badge className="bg-green-600 text-white text-xs">New Park</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>
+      
+      {/* Location Section */}
+      {location && (
+        <div className="bg-muted/50 rounded-lg p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <MapPin className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold text-foreground">Location</span>
+          </div>
+          <div className="text-sm space-y-1 ml-6">
+            {location.street_address && <div><span className="text-muted-foreground">Street:</span> <span className="font-medium">{location.street_address}</span></div>}
+            {location.city && <div><span className="text-muted-foreground">City:</span> <span className="font-medium">{location.city}</span></div>}
+            {location.state_province && <div><span className="text-muted-foreground">State/Province:</span> <span className="font-medium">{location.state_province}</span></div>}
+            {location.country && <div><span className="text-muted-foreground">Country:</span> <span className="font-medium">{location.country}</span></div>}
+            {location.postal_code && <div><span className="text-muted-foreground">Postal Code:</span> <span className="font-medium">{location.postal_code}</span></div>}
+            {location.formatted_address && (
+              <div className="text-xs text-muted-foreground mt-2">{location.formatted_address}</div>
+            )}
+          </div>
+        </div>
+      )}
+      
+      {/* 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">
+            <div className="flex items-center gap-2 mb-2">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">Dates</span>
+            </div>
+            <div className="text-sm space-y-1 ml-6">
+              {data.opening_date && (
+                <div>
+                  <span className="text-muted-foreground">Opened:</span>{' '}
+                  <FlexibleDateDisplay 
+                    date={data.opening_date} 
+                    precision={(data.opening_date_precision as DatePrecision) || 'day'} 
+                    className="font-medium"
+                  />
+                </div>
+              )}
+              {data.closing_date && (
+                <div>
+                  <span className="text-muted-foreground">Closed:</span>{' '}
+                  <FlexibleDateDisplay 
+                    date={data.closing_date} 
+                    precision={(data.closing_date_precision as DatePrecision) || 'day'} 
+                    className="font-medium"
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        
+        {/* Companies */}
+        {(operator || propertyOwner) && (
+          <div className="bg-muted/50 rounded-lg p-3">
+            <div className="flex items-center gap-2 mb-2">
+              <Users className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-semibold">Companies</span>
+            </div>
+            <div className="text-sm space-y-1 ml-6">
+              {operator && (
+                <div>
+                  <span className="text-muted-foreground">Operator:</span>{' '}
+                  <span className="font-medium">{operator}</span>
+                </div>
+              )}
+              {propertyOwner && (
+                <div>
+                  <span className="text-muted-foreground">Owner:</span>{' '}
+                  <span className="font-medium">{propertyOwner}</span>
+                </div>
+              )}
+            </div>
+          </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>
+      )}
+      
+      {/* Website & Source */}
+      {(data.website_url || data.source_url) && (
+        <div className="flex items-center gap-3 flex-wrap">
+          {data.website_url && (
+            <a 
+              href={data.website_url} 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+            >
+              <Globe className="h-3.5 w-3.5" />
+              Official Website
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          )}
+          {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>
+          )}
+        </div>
+      )}
+      
+      {/* 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-old/components/moderation/displays/RichRideDisplay.tsx

@@ -0,0 +1,715 @@
+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 { FlexibleDateDisplay } from '@/components/ui/flexible-date-display';
+import type { DatePrecision } from '@/components/ui/flexible-date-input';
+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';
+
+interface RichRideDisplayProps {
+  data: RideSubmissionData;
+  actionType: 'create' | 'edit' | 'delete';
+  showAllFields?: boolean;
+}
+
+export function RichRideDisplay({ data, actionType, showAllFields = true }: RichRideDisplayProps) {
+  const [park, setPark] = useState<string | null>(null);
+  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(() => {
+    // Guard against null/undefined data
+    if (!data) return;
+    
+    const fetchRelatedData = async () => {
+      if (data.park_id) {
+        const { data: parkData } = await supabase
+          .from('parks')
+          .select('name')
+          .eq('id', data.park_id)
+          .single();
+        setPark(parkData?.name || null);
+      }
+      
+      if (data.manufacturer_id) {
+        const { data: mfgData } = await supabase
+          .from('companies')
+          .select('name')
+          .eq('id', data.manufacturer_id)
+          .single();
+        setManufacturer(mfgData?.name || null);
+      }
+      
+      if (data.designer_id) {
+        const { data: designerData } = await supabase
+          .from('companies')
+          .select('name')
+          .eq('id', data.designer_id)
+          .single();
+        setDesigner(designerData?.name || null);
+      }
+      
+      if (data.ride_model_id) {
+        const { data: modelData } = await supabase
+          .from('ride_models')
+          .select('name')
+          .eq('id', data.ride_model_id)
+          .single();
+        setModel(modelData?.name || null);
+      }
+    };
+    
+    fetchRelatedData();
+  }, [data.park_id, data.manufacturer_id, data.designer_id, data.ride_model_id]);
+  
+  const getStatusColor = (status: string | undefined) => {
+    if (!status) return 'bg-gray-500';
+    switch (status.toLowerCase()) {
+      case 'operating': return 'bg-green-500';
+      case 'closed': return 'bg-red-500';
+      case 'under_construction': return 'bg-blue-500';
+      case 'sbno': return 'bg-orange-500';
+      default: return 'bg-gray-500';
+    }
+  };
+  
+  // Determine which category-specific section to show
+  const category = data.category?.toLowerCase();
+  const hasWaterFields = category === 'water_ride' && (data.water_depth_cm || data.splash_height_meters || data.wetness_level || data.flume_type || data.boat_capacity);
+  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 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);
+  const hasKiddieFields = category === 'kiddie_ride' && (data.min_age || data.max_age || data.educational_theme || data.character_theme);
+  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 hasTechnicalFields = data.track_material || data.support_material || data.propulsion_method || data.coaster_type || data.seating_type || data.intensity_level;
+  
+  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">
+          <Train 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>
+          {park && (
+            <div className="text-sm text-muted-foreground mt-0.5">at {park}</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_sub_type && (
+              <Badge variant="outline" className="text-xs">
+                {data.ride_sub_type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+              </Badge>
+            )}
+            <Badge className={`${getStatusColor(data.status)} text-white text-xs`}>
+              {data.status?.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+            </Badge>
+            {actionType === 'create' && (
+              <Badge className="bg-green-600 text-white text-xs">New Ride</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>
+      
+      {/* Primary Statistics Grid */}
+      {(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">
+          {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">{data.max_height_meters.toFixed(1)} m</div>
+            </div>
+          )}
+          
+          {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">{data.max_speed_kmh.toFixed(1)} km/h</div>
+            </div>
+          )}
+          
+          {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">{data.length_meters.toFixed(1)} m</div>
+            </div>
+          )}
+          
+          {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">{data.drop_height_meters.toFixed(1)} m</div>
+            </div>
+          )}
+          
+          {data.duration_seconds && (
+            <div className="bg-muted/50 rounded-lg p-3">
+              <div className="flex items-center gap-2 mb-1">
+                <Gauge className="h-4 w-4 text-orange-500" />
+                <span className="text-xs text-muted-foreground">Duration</span>
+              </div>
+              <div className="text-lg font-bold">{Math.floor(data.duration_seconds / 60)}:{(data.duration_seconds % 60).toString().padStart(2, '0')}</div>
+            </div>
+          )}
+          
+          {data.inversions !== null && data.inversions !== undefined && (
+            <div className="bg-muted/50 rounded-lg p-3">
+              <div className="flex items-center gap-2 mb-1">
+                <Train className="h-4 w-4 text-red-500" />
+                <span className="text-xs text-muted-foreground">Inversions</span>
+              </div>
+              <div className="text-lg font-bold">{data.inversions}</div>
+            </div>
+          )}
+        </div>
+      )}
+      
+      {/* 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">
+            <Building className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold">Companies & Model</span>
+          </div>
+          <div className="text-sm space-y-1 ml-6">
+            {manufacturer && (
+              <div>
+                <span className="text-muted-foreground">Manufacturer:</span>{' '}
+                <span className="font-medium">{manufacturer}</span>
+              </div>
+            )}
+            {designer && (
+              <div>
+                <span className="text-muted-foreground">Designer:</span>{' '}
+                <span className="font-medium">{designer}</span>
+              </div>
+            )}
+            {model && (
+              <div>
+                <span className="text-muted-foreground">Model:</span>{' '}
+                <span className="font-medium">{model}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      
+      {/* Dates */}
+      {(data.opening_date || data.closing_date) && (
+        <div className="bg-muted/50 rounded-lg p-3">
+          <div className="flex items-center gap-2 mb-2">
+            <Calendar className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-semibold">Dates</span>
+          </div>
+          <div className="text-sm space-y-1 ml-6">
+            {data.opening_date && (
+              <div>
+                <span className="text-muted-foreground">Opened:</span>{' '}
+                <FlexibleDateDisplay 
+                  date={data.opening_date} 
+                  precision={(data.opening_date_precision as DatePrecision) || 'day'} 
+                  className="font-medium"
+                />
+              </div>
+            )}
+            {data.closing_date && (
+              <div>
+                <span className="text-muted-foreground">Closed:</span>{' '}
+                <FlexibleDateDisplay 
+                  date={data.closing_date} 
+                  precision={(data.closing_date_precision as DatePrecision) || 'day'} 
+                  className="font-medium"
+                />
+              </div>
+            )}
+          </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 || data.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-32 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-32 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>
+            )}
+            {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>
+        </div>
+      )}
+    </div>
+  );
+}

src-old/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-old/components/moderation/displays/RichTimelineEventDisplay.tsx

@@ -0,0 +1,266 @@
+import { Calendar, Tag, ArrowRight, MapPin, Building2, Clock } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { FlexibleDateDisplay } from '@/components/ui/flexible-date-display';
+import type { TimelineSubmissionData } from '@/types/timeline';
+import { useEffect, useState } from 'react';
+import { supabase } from '@/lib/supabaseClient';
+
+interface RichTimelineEventDisplayProps {
+  data: TimelineSubmissionData;
+  actionType: 'create' | 'edit' | 'delete';
+}
+
+export function RichTimelineEventDisplay({ data, actionType }: RichTimelineEventDisplayProps) {
+  const [entityName, setEntityName] = useState<string | null>(null);
+  const [parkContext, setParkContext] = useState<string | null>(null);
+  const [fromEntity, setFromEntity] = useState<string | null>(null);
+  const [toEntity, setToEntity] = useState<string | null>(null);
+  const [fromLocation, setFromLocation] = useState<any>(null);
+  const [toLocation, setToLocation] = useState<any>(null);
+  
+  useEffect(() => {
+    if (!data) return;
+    
+    const fetchRelatedData = async () => {
+      // Fetch the main entity this timeline event is for
+      if (data.entity_id && data.entity_type) {
+        if (data.entity_type === 'park') {
+          const { data: park } = await supabase
+            .from('parks')
+            .select('name')
+            .eq('id', data.entity_id)
+            .single();
+          setEntityName(park?.name || null);
+        } else if (data.entity_type === 'ride') {
+          const { data: ride } = await supabase
+            .from('rides')
+            .select('name, park:parks(name)')
+            .eq('id', data.entity_id)
+            .single();
+          setEntityName(ride?.name || null);
+          setParkContext((ride?.park as any)?.name || null);
+        }
+      }
+      
+      // Fetch from/to entities for relational changes
+      if (data.from_entity_id) {
+        const { data: entity } = await supabase
+          .from('companies')
+          .select('name')
+          .eq('id', data.from_entity_id)
+          .single();
+        setFromEntity(entity?.name || null);
+      }
+      
+      if (data.to_entity_id) {
+        const { data: entity } = await supabase
+          .from('companies')
+          .select('name')
+          .eq('id', data.to_entity_id)
+          .single();
+        setToEntity(entity?.name || null);
+      }
+      
+      // Fetch from/to locations for location changes
+      if (data.from_location_id) {
+        const { data: loc } = await supabase
+          .from('locations')
+          .select('*')
+          .eq('id', data.from_location_id)
+          .single();
+        setFromLocation(loc);
+      }
+      
+      if (data.to_location_id) {
+        const { data: loc } = await supabase
+          .from('locations')
+          .select('*')
+          .eq('id', data.to_location_id)
+          .single();
+        setToLocation(loc);
+      }
+    };
+    
+    fetchRelatedData();
+  }, [data.entity_id, data.entity_type, data.from_entity_id, data.to_entity_id, data.from_location_id, data.to_location_id]);
+  
+  const formatEventType = (type: string) => {
+    return type.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
+  };
+  
+  const getEventTypeColor = (type: string) => {
+    switch (type) {
+      case 'opening': return 'bg-green-600';
+      case 'closure': return 'bg-red-600';
+      case 'reopening': return 'bg-blue-600';
+      case 'renovation': return 'bg-purple-600';
+      case 'expansion': return 'bg-indigo-600';
+      case 'acquisition': return 'bg-amber-600';
+      case 'name_change': return 'bg-cyan-600';
+      case 'operator_change':
+      case 'owner_change': return 'bg-orange-600';
+      case 'location_change': return 'bg-pink-600';
+      case 'status_change': return 'bg-yellow-600';
+      case 'milestone': return 'bg-emerald-600';
+      default: return 'bg-gray-600';
+    }
+  };
+  
+  const getPrecisionIcon = (precision: string) => {
+    switch (precision) {
+      case 'day': return '📅';
+      case 'month': return '📆';
+      case 'year': return '🗓️';
+      default: return '📅';
+    }
+  };
+  
+  const formatLocation = (loc: any) => {
+    if (!loc) return null;
+    const parts = [loc.city, loc.state_province, loc.country].filter(Boolean);
+    return parts.join(', ');
+  };
+  
+  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">
+          <Calendar className="h-5 w-5" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-xl font-bold text-foreground">{data.title}</h3>
+          <div className="flex items-center gap-2 mt-1 flex-wrap">
+            <Badge className={`${getEventTypeColor(data.event_type)} text-white text-xs`}>
+              {formatEventType(data.event_type)}
+            </Badge>
+            {actionType === 'create' && (
+              <Badge className="bg-green-600 text-white text-xs">New Event</Badge>
+            )}
+            {actionType === 'edit' && (
+              <Badge className="bg-amber-600 text-white text-xs">Edit Event</Badge>
+            )}
+            {actionType === 'delete' && (
+              <Badge variant="destructive" className="text-xs">Delete Event</Badge>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* Entity Context Section */}
+      <div className="grid gap-3">
+        <div className="flex items-center gap-2 text-sm">
+          <Tag className="h-4 w-4 text-muted-foreground" />
+          <span className="font-medium">Event For:</span>
+          <span className="text-foreground">
+            {entityName || 'Loading...'} 
+            <Badge variant="outline" className="ml-2 text-xs">
+              {data.entity_type}
+            </Badge>
+          </span>
+        </div>
+        
+        {parkContext && (
+          <div className="flex items-center gap-2 text-sm">
+            <Building2 className="h-4 w-4 text-muted-foreground" />
+            <span className="font-medium">Park:</span>
+            <span className="text-foreground">{parkContext}</span>
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      {/* Event Date Section */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2 text-sm">
+          <Clock className="h-4 w-4 text-muted-foreground" />
+          <span className="font-medium">Event Date:</span>
+        </div>
+        <div className="flex items-center gap-3 pl-6">
+          <span className="text-2xl">{getPrecisionIcon(data.event_date_precision)}</span>
+          <div>
+            <div className="text-lg font-semibold">
+              <FlexibleDateDisplay 
+                date={data.event_date} 
+                precision={data.event_date_precision}
+              />
+            </div>
+            <div className="text-xs text-muted-foreground">
+              Precision: {data.event_date_precision}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Change Details Section */}
+      {(data.from_value || data.to_value || fromEntity || toEntity) && (
+        <>
+          <Separator />
+          <div className="space-y-2">
+            <div className="text-sm font-medium">Change Details:</div>
+            <div className="flex items-center gap-3 pl-6">
+              <div className="flex-1 p-3 rounded-lg bg-muted/50">
+                <div className="text-xs text-muted-foreground mb-1">From</div>
+                <div className="font-medium">
+                  {fromEntity || data.from_value || '—'}
+                </div>
+              </div>
+              <ArrowRight className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+              <div className="flex-1 p-3 rounded-lg bg-muted/50">
+                <div className="text-xs text-muted-foreground mb-1">To</div>
+                <div className="font-medium">
+                  {toEntity || data.to_value || '—'}
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Location Change Section */}
+      {(fromLocation || toLocation) && (
+        <>
+          <Separator />
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-sm font-medium">
+              <MapPin className="h-4 w-4" />
+              Location Change:
+            </div>
+            <div className="flex items-center gap-3 pl-6">
+              <div className="flex-1 p-3 rounded-lg bg-muted/50">
+                <div className="text-xs text-muted-foreground mb-1">From</div>
+                <div className="font-medium">
+                  {formatLocation(fromLocation) || '—'}
+                </div>
+              </div>
+              <ArrowRight className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+              <div className="flex-1 p-3 rounded-lg bg-muted/50">
+                <div className="text-xs text-muted-foreground mb-1">To</div>
+                <div className="font-medium">
+                  {formatLocation(toLocation) || '—'}
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Description Section */}
+      {data.description && (
+        <>
+          <Separator />
+          <div className="space-y-2">
+            <div className="text-sm font-medium">Description:</div>
+            <p className="text-sm text-muted-foreground pl-6 leading-relaxed">
+              {data.description}
+            </p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}