Refactor code structure and remove redundant changes

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