Refactor: Implement site-wide unit conversion

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