Refactor: Implement site-wide unit conversion

src/components/moderation/ModerationQueue.tsx

@@ -18,6 +18,7 @@ import { useRealtimeSubmissions } from '@/hooks/useRealtimeSubmissions';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { EntityEditPreview } from './EntityEditPreview';
 import { RealtimeConnectionStatus } from './RealtimeConnectionStatus';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
 
 interface ModerationItem {
   id: string;
@@ -1469,13 +1470,17 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                               {item.content.ride?.max_speed_kmh && (
                                 <div>
                                   <span className="font-medium">Max Speed: </span>
-                                  <span className="text-muted-foreground">{item.content.ride.max_speed_kmh} km/h</span>
+                                  <span className="text-muted-foreground">
+                                    <MeasurementDisplay value={item.content.ride.max_speed_kmh} type="speed" className="inline" />
+                                  </span>
                                 </div>
                               )}
                               {item.content.ride?.max_height_meters && (
                                 <div>
                                   <span className="font-medium">Max Height: </span>
-                                  <span className="text-muted-foreground">{item.content.ride.max_height_meters} m</span>
+                                  <span className="text-muted-foreground">
+                                    <MeasurementDisplay value={item.content.ride.max_height_meters} type="height" className="inline" />
+                                  </span>
                                 </div>
                               )}
                             </div>

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

src/components/search/EnhancedSearchResults.tsx

@@ -5,6 +5,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Star, MapPin, Zap, Factory, Clock, Users, Calendar, Ruler, Gauge, Building } from 'lucide-react';
 import { SearchResult } from '@/hooks/useSearch';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
 
 interface EnhancedSearchResultsProps {
   results: SearchResult[];
@@ -94,13 +95,13 @@ export function EnhancedSearchResults({ results, loading, hasMore, onLoadMore }:
         {rideData?.max_height_meters && (
           <div className="flex items-center gap-1 text-xs text-muted-foreground">
             <Ruler className="w-3 h-3" />
-            <span>{rideData.max_height_meters}m</span>
+            <MeasurementDisplay value={rideData.max_height_meters} type="height" className="inline" />
           </div>
         )}
         {rideData?.max_speed_kmh && (
           <div className="flex items-center gap-1 text-xs text-muted-foreground">
             <Gauge className="w-3 h-3" />
-            <span>{rideData.max_speed_kmh} km/h</span>
+            <MeasurementDisplay value={rideData.max_speed_kmh} type="speed" className="inline" />
           </div>
         )}
         {rideData?.intensity_level && (