Refactor: Implement Phase 3A technical data migration

src/components/rides/CoasterStatistics.tsx

@@ -0,0 +1,68 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { RideCoasterStat } from "@/types/database";
+import { TrendingUp } from "lucide-react";
+
+interface CoasterStatisticsProps {
+  statistics?: RideCoasterStat[];
+}
+
+export const CoasterStatistics = ({ statistics }: CoasterStatisticsProps) => {
+  if (!statistics || statistics.length === 0) {
+    return null;
+  }
+
+  // Group stats by category
+  const groupedStats = statistics.reduce((acc, stat) => {
+    const category = stat.category || 'General';
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(stat);
+    return acc;
+  }, {} as Record<string, RideCoasterStat[]>);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <TrendingUp className="h-5 w-5" />
+          Coaster Statistics
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {Object.entries(groupedStats).map(([category, stats]) => (
+            <div key={category}>
+              <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
+                {category}
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {stats
+                  .sort((a, b) => a.display_order - b.display_order)
+                  .map((stat) => (
+                    <div
+                      key={stat.id}
+                      className="flex justify-between items-center p-3 rounded-lg bg-muted/50"
+                    >
+                      <div className="flex flex-col">
+                        <span className="text-sm font-medium">{stat.stat_name}</span>
+                        {stat.description && (
+                          <span className="text-xs text-muted-foreground">
+                            {stat.description}
+                          </span>
+                        )}
+                      </div>
+                      <span className="text-sm font-semibold">
+                        {stat.stat_value.toLocaleString()}
+                        {stat.unit && ` ${stat.unit}`}
+                      </span>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

src/components/rides/FormerNames.tsx

@@ -1,6 +1,8 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { History } from 'lucide-react';
+import { RideNameHistory } from '@/types/database';
+import { format } from 'date-fns';
 
 interface FormerName {
   name: string;
@@ -9,14 +11,41 @@ interface FormerName {
 }
 
 interface FormerNamesProps {
-  formerNames: FormerName[];
+  formerNames?: FormerName[];
+  nameHistory?: RideNameHistory[]; // New relational data
   currentName: string;
 }
 
-export function FormerNames({ formerNames, currentName }: FormerNamesProps) {
-  if (!formerNames || formerNames.length === 0) {
+export function FormerNames({ formerNames, nameHistory, currentName }: FormerNamesProps) {
+  // Use new relational data if available, fallback to legacy JSON
+  const names = nameHistory || formerNames;
+  
+  if (!names || names.length === 0) {
     return null;
   }
+  
+  // Normalize data structure
+  const normalizedNames = names.map((item) => {
+    if ('former_name' in item) {
+      // New relational format (RideNameHistory)
+      return {
+        name: item.former_name,
+        date_changed: item.date_changed,
+        reason: item.reason,
+        from_year: item.from_year,
+        to_year: item.to_year,
+        order: item.order_index,
+      };
+    } else {
+      // Legacy JSON format (FormerName)
+      return {
+        name: item.name,
+        from_year: item.from_year,
+        to_year: item.to_year,
+        order: 0,
+      };
+    }
+  }).sort((a, b) => a.order - b.order);
 
   return (
     <Card>
@@ -37,21 +66,29 @@ export function FormerNames({ formerNames, currentName }: FormerNamesProps) {
             <Badge variant="default">Current</Badge>
           </div>
 
-          {formerNames.map((former, index) => (
+          {normalizedNames.map((former, index) => (
             <div key={index} className="flex items-start gap-3">
               <div className="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-muted-foreground" />
               <div className="flex-1">
                 <div className="font-medium">{former.name}</div>
-                {(former.from_year || former.to_year) && (
-                  <div className="text-sm text-muted-foreground">
-                    {former.from_year && former.to_year 
-                      ? `${former.from_year} - ${former.to_year}`
-                      : former.from_year 
-                      ? `Since ${former.from_year}`
-                      : `Until ${former.to_year}`
-                    }
-                  </div>
-                )}
+                <div className="text-sm text-muted-foreground space-y-1">
+                  {(former.from_year || former.to_year) && (
+                    <div>
+                      {former.from_year && former.to_year 
+                        ? `${former.from_year} - ${former.to_year}`
+                        : former.from_year 
+                        ? `Since ${former.from_year}`
+                        : `Until ${former.to_year}`
+                      }
+                    </div>
+                  )}
+                  {former.date_changed && (
+                    <div>Changed: {format(new Date(former.date_changed), 'MMM d, yyyy')}</div>
+                  )}
+                  {former.reason && (
+                    <div className="italic">{former.reason}</div>
+                  )}
+                </div>
               </div>
               <Badge variant="outline">Former</Badge>
             </div>

src/components/rides/TechnicalSpecifications.tsx

@@ -0,0 +1,61 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { RideTechnicalSpec } from "@/types/database";
+import { Wrench } from "lucide-react";
+
+interface TechnicalSpecificationsProps {
+  specifications?: RideTechnicalSpec[];
+}
+
+export const TechnicalSpecifications = ({ specifications }: TechnicalSpecificationsProps) => {
+  if (!specifications || specifications.length === 0) {
+    return null;
+  }
+
+  // Group specs by category
+  const groupedSpecs = specifications.reduce((acc, spec) => {
+    const category = spec.category || 'General';
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(spec);
+    return acc;
+  }, {} as Record<string, RideTechnicalSpec[]>);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Wrench className="h-5 w-5" />
+          Technical Specifications
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {Object.entries(groupedSpecs).map(([category, specs]) => (
+            <div key={category}>
+              <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
+                {category}
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {specs
+                  .sort((a, b) => a.display_order - b.display_order)
+                  .map((spec) => (
+                    <div
+                      key={spec.id}
+                      className="flex justify-between items-center p-3 rounded-lg bg-muted/50"
+                    >
+                      <span className="text-sm font-medium">{spec.spec_name}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {spec.spec_value}
+                        {spec.unit && ` ${spec.unit}`}
+                      </span>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};