Initial Commit

frontend/src/core/units/UnitsContext.tsx

@@ -0,0 +1,117 @@
+/**
+ * @ai-summary React context for unit system preferences
+ * @ai-context Provides unit preferences and conversion functions throughout the app
+ */
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { UnitSystem, UnitPreferences } from './units.types';
+import {
+  formatDistanceBySystem,
+  formatVolumeBySystem,
+  formatFuelEfficiencyBySystem,
+  formatPriceBySystem,
+  convertDistanceBySystem,
+  convertVolumeBySystem,
+  convertFuelEfficiencyBySystem,
+  getDistanceUnit,
+  getVolumeUnit,
+  getFuelEfficiencyUnit
+} from './units.utils';
+
+interface UnitsContextType {
+  unitSystem: UnitSystem;
+  setUnitSystem: (system: UnitSystem) => void;
+  preferences: UnitPreferences;
+  
+  // Conversion functions
+  convertDistance: (miles: number) => number;
+  convertVolume: (gallons: number) => number;
+  convertFuelEfficiency: (mpg: number) => number;
+  
+  // Formatting functions
+  formatDistance: (miles: number, precision?: number) => string;
+  formatVolume: (gallons: number, precision?: number) => string;
+  formatFuelEfficiency: (mpg: number, precision?: number) => string;
+  formatPrice: (pricePerGallon: number, currency?: string, precision?: number) => string;
+}
+
+const UnitsContext = createContext<UnitsContextType | undefined>(undefined);
+
+interface UnitsProviderProps {
+  children: ReactNode;
+  initialSystem?: UnitSystem;
+}
+
+export const UnitsProvider: React.FC<UnitsProviderProps> = ({ 
+  children, 
+  initialSystem = 'imperial' 
+}) => {
+  const [unitSystem, setUnitSystem] = useState<UnitSystem>(initialSystem);
+  
+  // Load unit preference from localStorage on mount
+  useEffect(() => {
+    const stored = localStorage.getItem('motovaultpro-unit-system');
+    if (stored === 'imperial' || stored === 'metric') {
+      setUnitSystem(stored);
+    }
+  }, []);
+  
+  // Save unit preference to localStorage when changed
+  const handleSetUnitSystem = (system: UnitSystem) => {
+    setUnitSystem(system);
+    localStorage.setItem('motovaultpro-unit-system', system);
+  };
+  
+  // Generate preferences object based on current system
+  const preferences: UnitPreferences = {
+    system: unitSystem,
+    distance: getDistanceUnit(unitSystem),
+    volume: getVolumeUnit(unitSystem),
+    fuelEfficiency: getFuelEfficiencyUnit(unitSystem),
+  };
+  
+  // Conversion functions using current unit system
+  const convertDistance = (miles: number) => convertDistanceBySystem(miles, unitSystem);
+  const convertVolume = (gallons: number) => convertVolumeBySystem(gallons, unitSystem);
+  const convertFuelEfficiency = (mpg: number) => convertFuelEfficiencyBySystem(mpg, unitSystem);
+  
+  // Formatting functions using current unit system
+  const formatDistance = (miles: number, precision?: number) => 
+    formatDistanceBySystem(miles, unitSystem, precision);
+  
+  const formatVolume = (gallons: number, precision?: number) => 
+    formatVolumeBySystem(gallons, unitSystem, precision);
+    
+  const formatFuelEfficiency = (mpg: number, precision?: number) => 
+    formatFuelEfficiencyBySystem(mpg, unitSystem, precision);
+    
+  const formatPrice = (pricePerGallon: number, currency?: string, precision?: number) => 
+    formatPriceBySystem(pricePerGallon, unitSystem, currency, precision);
+
+  const value: UnitsContextType = {
+    unitSystem,
+    setUnitSystem: handleSetUnitSystem,
+    preferences,
+    convertDistance,
+    convertVolume,
+    convertFuelEfficiency,
+    formatDistance,
+    formatVolume,
+    formatFuelEfficiency,
+    formatPrice,
+  };
+
+  return (
+    <UnitsContext.Provider value={value}>
+      {children}
+    </UnitsContext.Provider>
+  );
+};
+
+export const useUnits = (): UnitsContextType => {
+  const context = useContext(UnitsContext);
+  if (context === undefined) {
+    throw new Error('useUnits must be used within a UnitsProvider');
+  }
+  return context;
+};

frontend/src/core/units/units.types.ts

@@ -0,0 +1,24 @@
+/**
+ * @ai-summary Type definitions for unit system support
+ * @ai-context Frontend types for Imperial/Metric unit preferences
+ */
+
+export type UnitSystem = 'imperial' | 'metric';
+export type DistanceUnit = 'miles' | 'km';
+export type VolumeUnit = 'gallons' | 'liters';
+export type FuelEfficiencyUnit = 'mpg' | 'l100km';
+
+export interface UnitPreferences {
+  system: UnitSystem;
+  distance: DistanceUnit;
+  volume: VolumeUnit;
+  fuelEfficiency: FuelEfficiencyUnit;
+}
+
+export interface UserPreferences {
+  id: string;
+  userId: string;
+  unitSystem: UnitSystem;
+  createdAt: string;
+  updatedAt: string;
+}

frontend/src/core/units/units.utils.ts

@@ -0,0 +1,194 @@
+/**
+ * @ai-summary Frontend unit conversion utilities
+ * @ai-context Mirror of backend unit conversion functions for frontend use
+ */
+
+import { UnitSystem, DistanceUnit, VolumeUnit, FuelEfficiencyUnit } from './units.types';
+
+// Conversion constants
+const MILES_TO_KM = 1.60934;
+const KM_TO_MILES = 0.621371;
+const GALLONS_TO_LITERS = 3.78541;
+const LITERS_TO_GALLONS = 0.264172;
+const MPG_TO_L100KM_FACTOR = 235.214;
+
+// Distance Conversions
+export function convertDistance(value: number, fromUnit: DistanceUnit, toUnit: DistanceUnit): number {
+  if (fromUnit === toUnit) return value;
+  
+  if (fromUnit === 'miles' && toUnit === 'km') {
+    return value * MILES_TO_KM;
+  }
+  
+  if (fromUnit === 'km' && toUnit === 'miles') {
+    return value * KM_TO_MILES;
+  }
+  
+  return value;
+}
+
+export function convertDistanceBySystem(miles: number, toSystem: UnitSystem): number {
+  if (toSystem === 'metric') {
+    return convertDistance(miles, 'miles', 'km');
+  }
+  return miles;
+}
+
+// Volume Conversions
+export function convertVolume(value: number, fromUnit: VolumeUnit, toUnit: VolumeUnit): number {
+  if (fromUnit === toUnit) return value;
+  
+  if (fromUnit === 'gallons' && toUnit === 'liters') {
+    return value * GALLONS_TO_LITERS;
+  }
+  
+  if (fromUnit === 'liters' && toUnit === 'gallons') {
+    return value * LITERS_TO_GALLONS;
+  }
+  
+  return value;
+}
+
+export function convertVolumeBySystem(gallons: number, toSystem: UnitSystem): number {
+  if (toSystem === 'metric') {
+    return convertVolume(gallons, 'gallons', 'liters');
+  }
+  return gallons;
+}
+
+// Fuel Efficiency Conversions
+export function convertFuelEfficiency(value: number, fromUnit: FuelEfficiencyUnit, toUnit: FuelEfficiencyUnit): number {
+  if (fromUnit === toUnit) return value;
+  
+  if (fromUnit === 'mpg' && toUnit === 'l100km') {
+    return value === 0 ? 0 : MPG_TO_L100KM_FACTOR / value;
+  }
+  
+  if (fromUnit === 'l100km' && toUnit === 'mpg') {
+    return value === 0 ? 0 : MPG_TO_L100KM_FACTOR / value;
+  }
+  
+  return value;
+}
+
+export function convertFuelEfficiencyBySystem(mpg: number, toSystem: UnitSystem): number {
+  if (toSystem === 'metric') {
+    return convertFuelEfficiency(mpg, 'mpg', 'l100km');
+  }
+  return mpg;
+}
+
+// Display Formatting Functions
+export function formatDistance(value: number, unit: DistanceUnit, precision = 1): string {
+  if (typeof value !== 'number' || isNaN(value)) {
+    return unit === 'miles' ? '0 miles' : '0 km';
+  }
+  
+  const rounded = parseFloat(value.toFixed(precision));
+  
+  if (unit === 'miles') {
+    return `${rounded.toLocaleString()} miles`;
+  } else {
+    return `${rounded.toLocaleString()} km`;
+  }
+}
+
+export function formatVolume(value: number, unit: VolumeUnit, precision = 2): string {
+  if (typeof value !== 'number' || isNaN(value)) {
+    return unit === 'gallons' ? '0 gal' : '0 L';
+  }
+  
+  const rounded = parseFloat(value.toFixed(precision));
+  
+  if (unit === 'gallons') {
+    return `${rounded} gal`;
+  } else {
+    return `${rounded} L`;
+  }
+}
+
+export function formatFuelEfficiency(value: number, unit: FuelEfficiencyUnit, precision = 1): string {
+  if (typeof value !== 'number' || isNaN(value)) {
+    return unit === 'mpg' ? '0 MPG' : '0 L/100km';
+  }
+  
+  const rounded = parseFloat(value.toFixed(precision));
+  
+  if (unit === 'mpg') {
+    return `${rounded} MPG`;
+  } else {
+    return `${rounded} L/100km`;
+  }
+}
+
+export function formatPrice(value: number, unit: VolumeUnit, currency = 'USD', precision = 3): string {
+  if (typeof value !== 'number' || isNaN(value)) {
+    const formatter = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency,
+      minimumFractionDigits: precision,
+      maximumFractionDigits: precision,
+    });
+    return unit === 'gallons' ? `${formatter.format(0)}/gal` : `${formatter.format(0)}/L`;
+  }
+  
+  const rounded = parseFloat(value.toFixed(precision));
+  const formatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: precision,
+    maximumFractionDigits: precision,
+  });
+  
+  if (unit === 'gallons') {
+    return `${formatter.format(rounded)}/gal`;
+  } else {
+    return `${formatter.format(rounded)}/L`;
+  }
+}
+
+// System-based formatting (convenience functions)
+export function formatDistanceBySystem(miles: number, system: UnitSystem, precision = 1): string {
+  if (system === 'metric') {
+    const km = convertDistanceBySystem(miles, system);
+    return formatDistance(km, 'km', precision);
+  }
+  return formatDistance(miles, 'miles', precision);
+}
+
+export function formatVolumeBySystem(gallons: number, system: UnitSystem, precision = 2): string {
+  if (system === 'metric') {
+    const liters = convertVolumeBySystem(gallons, system);
+    return formatVolume(liters, 'liters', precision);
+  }
+  return formatVolume(gallons, 'gallons', precision);
+}
+
+export function formatFuelEfficiencyBySystem(mpg: number, system: UnitSystem, precision = 1): string {
+  if (system === 'metric') {
+    const l100km = convertFuelEfficiencyBySystem(mpg, system);
+    return formatFuelEfficiency(l100km, 'l100km', precision);
+  }
+  return formatFuelEfficiency(mpg, 'mpg', precision);
+}
+
+export function formatPriceBySystem(pricePerGallon: number, system: UnitSystem, currency = 'USD', precision = 3): string {
+  if (system === 'metric') {
+    const pricePerLiter = pricePerGallon * LITERS_TO_GALLONS;
+    return formatPrice(pricePerLiter, 'liters', currency, precision);
+  }
+  return formatPrice(pricePerGallon, 'gallons', currency, precision);
+}
+
+// Unit system helpers
+export function getDistanceUnit(system: UnitSystem): DistanceUnit {
+  return system === 'metric' ? 'km' : 'miles';
+}
+
+export function getVolumeUnit(system: UnitSystem): VolumeUnit {
+  return system === 'metric' ? 'liters' : 'gallons';
+}
+
+export function getFuelEfficiencyUnit(system: UnitSystem): FuelEfficiencyUnit {
+  return system === 'metric' ? 'l100km' : 'mpg';
+}