Clarify preview usage scope

src/components/moderation/SubmissionItemsList.tsx

@@ -2,10 +2,14 @@ import { useState, useEffect, memo } from 'react';
 import { supabase } from '@/lib/supabaseClient';
 import { SubmissionChangesDisplay } from './SubmissionChangesDisplay';
 import { PhotoSubmissionDisplay } from './PhotoSubmissionDisplay';
+import { RichParkDisplay } from './displays/RichParkDisplay';
+import { RichRideDisplay } from './displays/RichRideDisplay';
+import { RichCompanyDisplay } from './displays/RichCompanyDisplay';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { AlertCircle, Loader2 } from 'lucide-react';
 import type { SubmissionItemData } from '@/types/submissions';
+import type { ParkSubmissionData, RideSubmissionData, CompanySubmissionData } from '@/types/submission-data';
 import { logger } from '@/lib/logger';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { ModerationErrorBoundary } from '@/components/error/ModerationErrorBoundary';
@@ -170,9 +174,66 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
     );
   }
 
+  // Render item with appropriate display component
+  const renderItem = (item: SubmissionItemData) => {
+    // SubmissionItemData from submissions.ts has item_data property
+    const entityData = item.item_data;
+    const actionType = item.action_type || 'create';
+    
+    // Use summary view for compact display
+    if (view === 'summary') {
+      return (
+        <SubmissionChangesDisplay 
+          item={item}
+          view={view}
+          showImages={showImages}
+          submissionId={submissionId}
+        />
+      );
+    }
+    
+    // Use rich displays for detailed view
+    if (item.item_type === 'park' && entityData) {
+      return (
+        <RichParkDisplay
+          data={entityData as unknown as ParkSubmissionData}
+          actionType={actionType}
+        />
+      );
+    }
+    
+    if (item.item_type === 'ride' && entityData) {
+      return (
+        <RichRideDisplay
+          data={entityData as unknown as RideSubmissionData}
+          actionType={actionType}
+        />
+      );
+    }
+    
+    if ((['manufacturer', 'operator', 'designer', 'property_owner'] as const).some(type => type === item.item_type) && entityData) {
+      return (
+        <RichCompanyDisplay
+          data={entityData as unknown as CompanySubmissionData}
+          actionType={actionType}
+        />
+      );
+    }
+    
+    // Fallback to SubmissionChangesDisplay
+    return (
+      <SubmissionChangesDisplay 
+        item={item}
+        view={view}
+        showImages={showImages}
+        submissionId={submissionId}
+      />
+    );
+  };
+
   return (
     <ModerationErrorBoundary submissionId={submissionId}>
-      <div className="flex flex-col gap-3">
+      <div className={view === 'summary' ? 'flex flex-col gap-3' : 'flex flex-col gap-6'}>
         {refreshing && (
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
             <Loader2 className="h-3 w-3 animate-spin" />
@@ -183,12 +244,7 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({
         {/* Show regular submission items */}
         {items.map((item) => (
           <div key={item.id} className={view === 'summary' ? 'border-l-2 border-primary/20 pl-3' : ''}>
-            <SubmissionChangesDisplay 
-              item={item}
-              view={view}
-              showImages={showImages}
-              submissionId={submissionId}
-            />
+            {renderItem(item)}
           </div>
         ))}
 

src/components/moderation/displays/RichCompanyDisplay.tsx

@@ -0,0 +1,175 @@
+import { Building, MapPin, Calendar, Globe, ExternalLink, AlertCircle } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+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) => {
+    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?.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 ? (
+                <>
+                  <span className="font-medium">{new Date(data.founded_date).toLocaleDateString()}</span>
+                  {data.founded_date_precision && data.founded_date_precision !== 'day' && (
+                    <span className="text-xs text-muted-foreground ml-1">({data.founded_date_precision})</span>
+                  )}
+                </>
+              ) : (
+                <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.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</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</div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/moderation/displays/RichParkDisplay.tsx

@@ -0,0 +1,252 @@
+import { Building2, MapPin, Calendar, Globe, ExternalLink, Users, AlertCircle } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+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(() => {
+    const fetchRelatedData = async () => {
+      // Fetch location
+      if (data.location_id) {
+        const { data: locationData } = await supabase
+          .from('locations')
+          .select('*')
+          .eq('id', data.location_id)
+          .single();
+        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.operator_id, data.property_owner_id]);
+  
+  const getStatusColor = (status: string) => {
+    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.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.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">
+        {/* 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>{' '}
+                  <span className="font-medium">{new Date(data.opening_date).toLocaleDateString()}</span>
+                  {data.opening_date_precision && data.opening_date_precision !== 'day' && (
+                    <span className="text-xs text-muted-foreground ml-1">({data.opening_date_precision})</span>
+                  )}
+                </div>
+              )}
+              {data.closing_date && (
+                <div>
+                  <span className="text-muted-foreground">Closed:</span>{' '}
+                  <span className="font-medium">{new Date(data.closing_date).toLocaleDateString()}</span>
+                  {data.closing_date_precision && data.closing_date_precision !== 'day' && (
+                    <span className="text-xs text-muted-foreground ml-1">({data.closing_date_precision})</span>
+                  )}
+                </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</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</div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/moderation/displays/RichRideDisplay.tsx

@@ -0,0 +1,340 @@
+import { Train, Gauge, Ruler, Zap, Calendar, Building, User, ExternalLink, AlertCircle, TrendingUp } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+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);
+  
+  useEffect(() => {
+    const fetchRelatedData = async () => {
+      // Fetch park
+      if (data.park_id) {
+        const { data: parkData } = await supabase
+          .from('parks')
+          .select('name')
+          .eq('id', data.park_id)
+          .single();
+        setPark(parkData?.name || null);
+      }
+      
+      // Fetch manufacturer
+      if (data.manufacturer_id) {
+        const { data: mfgData } = await supabase
+          .from('companies')
+          .select('name')
+          .eq('id', data.manufacturer_id)
+          .single();
+        setManufacturer(mfgData?.name || null);
+      }
+      
+      // Fetch designer
+      if (data.designer_id) {
+        const { data: designerData } = await supabase
+          .from('companies')
+          .select('name')
+          .eq('id', data.designer_id)
+          .single();
+        setDesigner(designerData?.name || null);
+      }
+      
+      // Fetch model
+      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) => {
+    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';
+    }
+  };
+  
+  // Format metrics for display
+  const heightDisplay = data.max_height_meters 
+    ? `${data.max_height_meters.toFixed(1)} m`
+    : null;
+  const speedDisplay = data.max_speed_kmh 
+    ? `${data.max_speed_kmh.toFixed(1)} km/h`
+    : null;
+  const lengthDisplay = data.length_meters 
+    ? `${data.length_meters.toFixed(1)} m`
+    : null;
+  const dropDisplay = data.drop_height_meters 
+    ? `${data.drop_height_meters.toFixed(1)} m`
+    : null;
+  
+  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>
+      
+      {/* Statistics Grid */}
+      {(heightDisplay || speedDisplay || lengthDisplay || dropDisplay || data.duration_seconds || data.inversions) && (
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+          {heightDisplay && (
+            <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>
+          )}
+          
+          {speedDisplay && (
+            <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>
+          )}
+          
+          {lengthDisplay && (
+            <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>
+          )}
+          
+          {dropDisplay && (
+            <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>
+          )}
+          
+          {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>
+      )}
+      
+      {/* Companies */}
+      {(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>{' '}
+                <span className="font-medium">{new Date(data.opening_date).toLocaleDateString()}</span>
+                {data.opening_date_precision && data.opening_date_precision !== 'day' && (
+                  <span className="text-xs text-muted-foreground ml-1">({data.opening_date_precision})</span>
+                )}
+              </div>
+            )}
+            {data.closing_date && (
+              <div>
+                <span className="text-muted-foreground">Closed:</span>{' '}
+                <span className="font-medium">{new Date(data.closing_date).toLocaleDateString()}</span>
+                {data.closing_date_precision && data.closing_date_precision !== 'day' && (
+                  <span className="text-xs text-muted-foreground ml-1">({data.closing_date_precision})</span>
+                )}
+              </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>
+      )}
+      
+      {/* 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 
+          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-32 object-cover rounded border"
+                />
+                <div className="text-xs text-center text-muted-foreground">Banner</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</div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}