Refactor: Implement site-wide unit conversion

src/components/rides/CoasterStatistics.tsx

@@ -1,16 +1,44 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { RideCoasterStat } from "@/types/database";
 import { TrendingUp } from "lucide-react";
+import { useUnitPreferences } from "@/hooks/useUnitPreferences";
+import { convertValueFromMetric, detectUnitType, getMetricUnit } from "@/lib/units";
 
 interface CoasterStatisticsProps {
   statistics?: RideCoasterStat[];
 }
 
 export const CoasterStatistics = ({ statistics }: CoasterStatisticsProps) => {
+  const { preferences } = useUnitPreferences();
+  
   if (!statistics || statistics.length === 0) {
     return null;
   }
 
+  const getDisplayValue = (stat: RideCoasterStat) => {
+    if (!stat.unit) {
+      return stat.stat_value.toLocaleString();
+    }
+
+    const unitType = detectUnitType(stat.unit);
+    if (unitType === 'unknown') {
+      return `${stat.stat_value.toLocaleString()} ${stat.unit}`;
+    }
+
+    const metricUnit = getMetricUnit(stat.unit);
+    const convertedValue = convertValueFromMetric(
+      stat.stat_value,
+      stat.unit,
+      metricUnit
+    );
+    
+    const targetUnit = preferences.measurement_system === 'metric' 
+      ? metricUnit 
+      : stat.unit;
+      
+    return `${convertedValue.toLocaleString()} ${targetUnit}`;
+  };
+
   // Group stats by category
   const groupedStats = statistics.reduce((acc, stat) => {
     const category = stat.category || 'General';
@@ -53,8 +81,7 @@ export const CoasterStatistics = ({ statistics }: CoasterStatisticsProps) => {
                         )}
                       </div>
                       <span className="text-sm font-semibold">
-                        {stat.stat_value.toLocaleString()}
-                        {stat.unit && ` ${stat.unit}`}
+                        {getDisplayValue(stat)}
                       </span>
                     </div>
                   ))}

src/components/rides/RideHighlights.tsx

@@ -1,11 +1,12 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Zap, TrendingUp, Award, Sparkles } from 'lucide-react';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
 
 interface RideHighlight {
   icon: React.ReactNode;
   label: string;
-  value: string;
+  value: React.ReactNode;
 }
 
 interface RideHighlightsProps {
@@ -20,7 +21,7 @@ export function RideHighlights({ ride }: RideHighlightsProps) {
     highlights.push({
       icon: <Zap className="w-5 h-5 text-amber-500" />,
       label: 'High Speed',
-      value: `${ride.max_speed_kmh} km/h`
+      value: <MeasurementDisplay value={ride.max_speed_kmh} type="speed" className="inline" />
     });
   }
 
@@ -29,7 +30,7 @@ export function RideHighlights({ ride }: RideHighlightsProps) {
     highlights.push({
       icon: <TrendingUp className="w-5 h-5 text-blue-500" />,
       label: 'Tall Structure',
-      value: `${ride.max_height_meters}m high`
+      value: <MeasurementDisplay value={ride.max_height_meters} type="height" className="inline" />
     });
   }
 

src/components/rides/TechnicalSpecifications.tsx

@@ -1,16 +1,51 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { RideTechnicalSpec } from "@/types/database";
 import { Wrench } from "lucide-react";
+import { useUnitPreferences } from "@/hooks/useUnitPreferences";
+import { convertValueFromMetric, detectUnitType, getMetricUnit } from "@/lib/units";
 
 interface TechnicalSpecificationsProps {
   specifications?: RideTechnicalSpec[];
 }
 
 export const TechnicalSpecifications = ({ specifications }: TechnicalSpecificationsProps) => {
+  const { preferences } = useUnitPreferences();
+  
   if (!specifications || specifications.length === 0) {
     return null;
   }
 
+  const getDisplayValue = (spec: RideTechnicalSpec) => {
+    // If no unit, return as-is
+    if (!spec.unit) {
+      return spec.spec_value;
+    }
+
+    const unitType = detectUnitType(spec.unit);
+    if (unitType === 'unknown') {
+      return `${spec.spec_value} ${spec.unit}`;
+    }
+
+    const metricUnit = getMetricUnit(spec.unit);
+    const numericValue = parseFloat(spec.spec_value);
+    
+    if (isNaN(numericValue)) {
+      return spec.spec_value;
+    }
+
+    const convertedValue = convertValueFromMetric(
+      numericValue,
+      spec.unit,
+      metricUnit
+    );
+    
+    const targetUnit = preferences.measurement_system === 'metric' 
+      ? metricUnit 
+      : spec.unit;
+      
+    return `${convertedValue.toLocaleString()} ${targetUnit}`;
+  };
+
   // Group specs by category
   const groupedSpecs = specifications.reduce((acc, spec) => {
     const category = spec.category || 'General';
@@ -46,8 +81,7 @@ export const TechnicalSpecifications = ({ specifications }: TechnicalSpecificati
                     >
                       <span className="text-sm font-medium">{spec.spec_name}</span>
                       <span className="text-sm text-muted-foreground">
-                        {spec.spec_value}
-                        {spec.unit && ` ${spec.unit}`}
+                        {getDisplayValue(spec)}
                       </span>
                     </div>
                   ))}