feat: Start implementing Phase 1

src/components/moderation/AuditTrailViewer.tsx

@@ -0,0 +1,173 @@
+import { useState, useEffect } from 'react';
+import { ChevronDown, ChevronRight, History, Eye, Lock, Unlock, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Skeleton } from '@/components/ui/skeleton';
+import { format } from 'date-fns';
+import { supabase } from '@/lib/supabaseClient';
+import { handleError } from '@/lib/errorHandler';
+
+interface AuditLogEntry {
+  id: string;
+  action: string;
+  moderator_id: string;
+  submission_id: string | null;
+  previous_status: string | null;
+  new_status: string | null;
+  notes: string | null;
+  created_at: string;
+  is_test_data: boolean | null;
+}
+
+interface AuditTrailViewerProps {
+  submissionId: string;
+}
+
+export function AuditTrailViewer({ submissionId }: AuditTrailViewerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [auditLogs, setAuditLogs] = useState<AuditLogEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && auditLogs.length === 0) {
+      fetchAuditLogs();
+    }
+  }, [isOpen, submissionId]);
+
+  const fetchAuditLogs = async () => {
+    try {
+      setLoading(true);
+      
+      const { data, error } = await supabase
+        .from('moderation_audit_log')
+        .select('*')
+        .eq('submission_id', submissionId)
+        .order('created_at', { ascending: false });
+
+      if (error) throw error;
+      setAuditLogs(data || []);
+    } catch (error) {
+      handleError(error, {
+        action: 'Fetch Audit Trail',
+        metadata: { submissionId }
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getActionIcon = (action: string) => {
+    switch (action) {
+      case 'viewed':
+        return <Eye className="h-4 w-4" />;
+      case 'claimed':
+      case 'locked':
+        return <Lock className="h-4 w-4" />;
+      case 'released':
+      case 'unlocked':
+        return <Unlock className="h-4 w-4" />;
+      case 'approved':
+        return <CheckCircle className="h-4 w-4" />;
+      case 'rejected':
+        return <XCircle className="h-4 w-4" />;
+      case 'escalated':
+        return <AlertCircle className="h-4 w-4" />;
+      default:
+        return <History className="h-4 w-4" />;
+    }
+  };
+
+  const getActionColor = (action: string) => {
+    switch (action) {
+      case 'approved':
+        return 'text-green-600 dark:text-green-400';
+      case 'rejected':
+        return 'text-red-600 dark:text-red-400';
+      case 'escalated':
+        return 'text-orange-600 dark:text-orange-400';
+      case 'claimed':
+      case 'locked':
+        return 'text-blue-600 dark:text-blue-400';
+      default:
+        return 'text-muted-foreground';
+    }
+  };
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
+        {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        <History className="h-4 w-4" />
+        <span>Audit Trail</span>
+        {auditLogs.length > 0 && (
+          <Badge variant="outline" className="ml-auto">
+            {auditLogs.length} action{auditLogs.length !== 1 ? 's' : ''}
+          </Badge>
+        )}
+      </CollapsibleTrigger>
+      
+      <CollapsibleContent className="mt-3">
+        <div className="bg-card rounded-lg border">
+          {loading ? (
+            <div className="p-4 space-y-3">
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+            </div>
+          ) : auditLogs.length === 0 ? (
+            <div className="p-4 text-sm text-muted-foreground text-center">
+              No audit trail entries found
+            </div>
+          ) : (
+            <div className="divide-y">
+              {auditLogs.map((entry) => (
+                <div key={entry.id} className="p-3 hover:bg-muted/50 transition-colors">
+                  <div className="flex items-start gap-3">
+                    <div className={`mt-0.5 ${getActionColor(entry.action)}`}>
+                      {getActionIcon(entry.action)}
+                    </div>
+                    
+                    <div className="flex-1 space-y-1">
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="text-sm font-medium capitalize">
+                          {entry.action.replace('_', ' ')}
+                        </span>
+                        <span className="text-xs text-muted-foreground font-mono">
+                          {format(new Date(entry.created_at), 'MMM d, HH:mm:ss')}
+                        </span>
+                      </div>
+                      
+                      {(entry.previous_status || entry.new_status) && (
+                        <div className="flex items-center gap-2 text-xs">
+                          {entry.previous_status && (
+                            <Badge variant="outline" className="capitalize">
+                              {entry.previous_status}
+                            </Badge>
+                          )}
+                          {entry.previous_status && entry.new_status && (
+                            <span className="text-muted-foreground">→</span>
+                          )}
+                          {entry.new_status && (
+                            <Badge variant="default" className="capitalize">
+                              {entry.new_status}
+                            </Badge>
+                          )}
+                        </div>
+                      )}
+                      
+                      {entry.notes && (
+                        <p className="text-xs text-muted-foreground bg-muted/50 p-2 rounded mt-2">
+                          {entry.notes}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

src/components/moderation/QueueItem.tsx

@@ -19,6 +19,8 @@ import { PhotoSubmissionDisplay } from './renderers/PhotoSubmissionDisplay';
 import { EntitySubmissionDisplay } from './renderers/EntitySubmissionDisplay';
 import { QueueItemContext } from './renderers/QueueItemContext';
 import { QueueItemActions } from './renderers/QueueItemActions';
+import { SubmissionMetadataPanel } from './SubmissionMetadataPanel';
+import { AuditTrailViewer } from './AuditTrailViewer';
 
 interface QueueItemProps {
   item: ModerationItem;
@@ -309,6 +311,14 @@ export const QueueItem = memo(({
           )}
         </div>
         
+        {/* Metadata and Audit Trail */}
+        {item.type === 'content_submission' && (
+          <div className="mt-6 space-y-4">
+            <SubmissionMetadataPanel item={item} />
+            <AuditTrailViewer submissionId={item.id} />
+          </div>
+        )}
+        
         <QueueItemActions
           item={item}
           isMobile={isMobile}

src/components/moderation/SubmissionItemsList.tsx

@@ -2,10 +2,16 @@ 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 { Badge } from '@/components/ui/badge';
 import { AlertCircle, Loader2 } from 'lucide-react';
+import { format } from 'date-fns';
 import type { SubmissionItemData } from '@/types/submissions';
+import type { ParkSubmissionData, RideSubmissionData, CompanySubmissionData } from '@/types/submission-data';
 import { logger } from '@/lib/logger';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { ModerationErrorBoundary } from '@/components/error/ModerationErrorBoundary';
@@ -170,9 +176,114 @@ 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';
+    
+    // Show item metadata (order_index, depends_on, timestamps, test data flag)
+    const itemMetadata = (
+      <div className="flex flex-wrap items-center gap-2 mb-2 text-xs text-muted-foreground">
+        <Badge variant="outline" className="font-mono">
+          #{item.order_index ?? 0}
+        </Badge>
+        
+        {item.depends_on && (
+          <Badge variant="outline" className="text-xs">
+            Depends on: {item.depends_on.slice(0, 8)}...
+          </Badge>
+        )}
+        
+        {(item as any).is_test_data && (
+          <Badge variant="outline" className="bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300">
+            Test Data
+          </Badge>
+        )}
+        
+        {item.created_at && (
+          <span className="font-mono">
+            Created: {format(new Date(item.created_at), 'MMM d, HH:mm:ss')}
+          </span>
+        )}
+        
+        {item.updated_at && item.updated_at !== item.created_at && (
+          <span className="font-mono">
+            Updated: {format(new Date(item.updated_at), 'MMM d, HH:mm:ss')}
+          </span>
+        )}
+      </div>
+    );
+    
+    // Use summary view for compact display
+    if (view === 'summary') {
+      return (
+        <>
+          {itemMetadata}
+          <SubmissionChangesDisplay 
+            item={item}
+            view={view}
+            showImages={showImages}
+            submissionId={submissionId}
+          />
+        </>
+      );
+    }
+    
+    // Use rich displays for detailed view
+    if (item.item_type === 'park' && entityData) {
+      return (
+        <>
+          {itemMetadata}
+          <RichParkDisplay
+            data={entityData as unknown as ParkSubmissionData}
+            actionType={actionType}
+          />
+        </>
+      );
+    }
+    
+    if (item.item_type === 'ride' && entityData) {
+      return (
+        <>
+          {itemMetadata}
+          <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 (
+        <>
+          {itemMetadata}
+          <RichCompanyDisplay
+            data={entityData as unknown as CompanySubmissionData}
+            actionType={actionType}
+          />
+        </>
+      );
+    }
+    
+    // Fallback to SubmissionChangesDisplay
+    return (
+      <>
+        {itemMetadata}
+        <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 +294,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 
+            {renderItem(item)}
-              item={item}
-              view={view}
-              showImages={showImages}
-              submissionId={submissionId}
-            />
           </div>
         ))}
 

src/components/moderation/SubmissionMetadataPanel.tsx

@@ -0,0 +1,214 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronRight, Flag, Clock, Edit2, Link2, TestTube } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { format } from 'date-fns';
+import type { ModerationItem } from '@/types/moderation';
+import { UserAvatar } from '@/components/ui/user-avatar';
+
+interface SubmissionMetadataPanelProps {
+  item: ModerationItem;
+}
+
+export function SubmissionMetadataPanel({ item }: SubmissionMetadataPanelProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Extract metadata from content_submissions
+  const metadata = {
+    // Workflow
+    approval_mode: (item as any).approval_mode || 'full',
+    escalated: item.escalated || false,
+    escalation_reason: (item as any).escalation_reason,
+    escalated_by: (item as any).escalated_by,
+    escalated_at: (item as any).escalated_at,
+    
+    // Review Tracking
+    first_reviewed_at: (item as any).first_reviewed_at,
+    review_count: (item as any).review_count || 0,
+    resolved_at: (item as any).resolved_at,
+    
+    // Modification Tracking
+    last_modified_at: (item as any).last_modified_at,
+    last_modified_by: (item as any).last_modified_by,
+    
+    // Relationships
+    original_submission_id: (item as any).original_submission_id,
+    
+    // Flags
+    is_test_data: (item as any).is_test_data || false,
+  };
+
+  const hasMetadata = metadata.escalated || 
+    metadata.review_count > 0 || 
+    metadata.last_modified_at || 
+    metadata.original_submission_id ||
+    metadata.is_test_data;
+
+  if (!hasMetadata) return null;
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors w-full">
+        {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        <span>Submission Metadata</span>
+        <Badge variant="outline" className="ml-auto">
+          {metadata.review_count} review{metadata.review_count !== 1 ? 's' : ''}
+        </Badge>
+      </CollapsibleTrigger>
+      
+      <CollapsibleContent className="mt-3">
+        <div className="bg-card rounded-lg border divide-y">
+          {/* Workflow Section */}
+          {(metadata.escalated || metadata.approval_mode !== 'full') && (
+            <div className="p-4 space-y-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <Flag className="h-4 w-4" />
+                Workflow
+              </div>
+              
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between items-start">
+                  <span className="text-muted-foreground">Approval Mode:</span>
+                  <Badge variant={metadata.approval_mode === 'full' ? 'default' : 'outline'}>
+                    {metadata.approval_mode === 'full' ? 'Full Approval' : 'Partial Approval'}
+                  </Badge>
+                </div>
+                
+                {metadata.escalated && (
+                  <>
+                    <div className="flex justify-between items-start">
+                      <span className="text-muted-foreground">Escalated:</span>
+                      <Badge variant="destructive">Yes</Badge>
+                    </div>
+                    
+                    {metadata.escalation_reason && (
+                      <div className="flex flex-col gap-1">
+                        <span className="text-muted-foreground">Reason:</span>
+                        <p className="text-foreground bg-muted/50 p-2 rounded text-xs">
+                          {metadata.escalation_reason}
+                        </p>
+                      </div>
+                    )}
+                    
+                    {metadata.escalated_at && (
+                      <div className="flex justify-between items-start">
+                        <span className="text-muted-foreground">Escalated At:</span>
+                        <span className="font-mono text-xs">
+                          {format(new Date(metadata.escalated_at), 'MMM d, yyyy HH:mm:ss')}
+                        </span>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+          
+          {/* Review Tracking Section */}
+          {(metadata.first_reviewed_at || metadata.resolved_at || metadata.review_count > 0) && (
+            <div className="p-4 space-y-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <Clock className="h-4 w-4" />
+                Review Tracking
+              </div>
+              
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between items-start">
+                  <span className="text-muted-foreground">Review Count:</span>
+                  <Badge variant="outline">{metadata.review_count}</Badge>
+                </div>
+                
+                {metadata.first_reviewed_at && (
+                  <div className="flex justify-between items-start">
+                    <span className="text-muted-foreground">First Reviewed:</span>
+                    <span className="font-mono text-xs">
+                      {format(new Date(metadata.first_reviewed_at), 'MMM d, yyyy HH:mm:ss')}
+                    </span>
+                  </div>
+                )}
+                
+                {metadata.resolved_at && (
+                  <div className="flex justify-between items-start">
+                    <span className="text-muted-foreground">Resolved At:</span>
+                    <span className="font-mono text-xs">
+                      {format(new Date(metadata.resolved_at), 'MMM d, yyyy HH:mm:ss')}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          
+          {/* Modification Tracking Section */}
+          {(metadata.last_modified_at || metadata.last_modified_by) && (
+            <div className="p-4 space-y-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <Edit2 className="h-4 w-4" />
+                Modification Tracking
+              </div>
+              
+              <div className="space-y-2 text-sm">
+                {metadata.last_modified_at && (
+                  <div className="flex justify-between items-start">
+                    <span className="text-muted-foreground">Last Modified:</span>
+                    <span className="font-mono text-xs">
+                      {format(new Date(metadata.last_modified_at), 'MMM d, yyyy HH:mm:ss')}
+                    </span>
+                  </div>
+                )}
+                
+                {metadata.last_modified_by && (
+                  <div className="flex justify-between items-start">
+                    <span className="text-muted-foreground">Modified By:</span>
+                    <Badge variant="secondary">Moderator</Badge>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          
+          {/* Relationships Section */}
+          {metadata.original_submission_id && (
+            <div className="p-4 space-y-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <Link2 className="h-4 w-4" />
+                Relationships
+              </div>
+              
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between items-start">
+                  <span className="text-muted-foreground">Resubmission of:</span>
+                  <a 
+                    href={`#${metadata.original_submission_id}`}
+                    className="font-mono text-xs text-primary hover:underline"
+                  >
+                    {metadata.original_submission_id.slice(0, 8)}...
+                  </a>
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {/* Flags Section */}
+          {metadata.is_test_data && (
+            <div className="p-4 space-y-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                <TestTube className="h-4 w-4" />
+                Flags
+              </div>
+              
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between items-start">
+                  <span className="text-muted-foreground">Test Data:</span>
+                  <Badge variant="outline" className="bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300">
+                    Yes
+                  </Badge>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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>
+  );
+}