egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: before admin stations removal

Browse Source
This commit is contained in:
Eric Gullickson
2025-12-24 17:20:11 -06:00
parent 96ee43ea94
commit 8ef6b3d853
32 changed files with 1258 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
frontend/src/core/units/UnitsContext.tsx
View File

@@ -1,9 +1,9 @@
/**
* @ai-summary React context for unit system preferences
* @ai-context Provides unit preferences and conversion functions throughout the app
* @ai-summary React context for unit system preferences with backend sync
* @ai-context Provides unit preferences, conversion functions, and currency symbol throughout the app
*/
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
import { UnitSystem, UnitPreferences } from './units.types';
import { safeStorage } from '../utils/safe-storage';
import {
@@ -18,22 +18,27 @@ import {
getVolumeUnit,
getFuelEfficiencyUnit
} from './units.utils';
import { usePreferences, useUpdatePreferences } from '../../features/settings/hooks/usePreferences';
import { useAuth0 } from '@auth0/auth0-react';
interface UnitsContextType {
unitSystem: UnitSystem;
setUnitSystem: (system: UnitSystem) => void;
preferences: UnitPreferences;
currencySymbol: string;
currencyCode: string;
isLoading: boolean;
// 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;
formatPrice: (pricePerGallon: number, precision?: number) => string;
}
const UnitsContext = createContext<UnitsContextType | undefined>(undefined);
@@ -43,34 +48,78 @@ interface UnitsProviderProps {
initialSystem?: UnitSystem;
}
export const UnitsProvider: React.FC<UnitsProviderProps> = ({
children,
initialSystem = 'imperial'
}) => {
const [unitSystem, setUnitSystem] = useState<UnitSystem>(initialSystem);
// Load unit preference from storage on mount
useEffect(() => {
try {
const stored = safeStorage.getItem('motovaultpro-unit-system');
if (stored === 'imperial' || stored === 'metric') {
setUnitSystem(stored);
}
} catch (error) {
console.warn('[Units] Failed to load unit system preference:', error);
}
}, []);
// Currency symbol mapping
const getCurrencySymbol = (system: UnitSystem): string => {
return system === 'metric' ? '\u20AC' : '$'; // EUR or USD
};
// Save unit preference to storage when changed
const handleSetUnitSystem = (system: UnitSystem) => {
setUnitSystem(system);
const getCurrencyCode = (system: UnitSystem): string => {
return system === 'metric' ? 'EUR' : 'USD';
};
export const UnitsProvider: React.FC<UnitsProviderProps> = ({
children,
initialSystem = 'imperial'
}) => {
const [unitSystem, setUnitSystemState] = useState<UnitSystem>(initialSystem);
const [hasInitialized, setHasInitialized] = useState(false);
const { isAuthenticated } = useAuth0();
const { data: backendPreferences, isLoading: preferencesLoading } = usePreferences();
const updatePreferencesMutation = useUpdatePreferences();
// Load unit preference from localStorage on mount (fallback)
useEffect(() => {
if (!hasInitialized) {
try {
const stored = safeStorage.getItem('motovaultpro-unit-system');
if (stored === 'imperial' || stored === 'metric') {
setUnitSystemState(stored);
}
} catch (error) {
console.warn('[Units] Failed to load unit system preference from storage:', error);
}
}
}, [hasInitialized]);
// Sync with backend preferences when they load (takes priority over localStorage)
useEffect(() => {
if (backendPreferences?.unitSystem && !hasInitialized) {
setUnitSystemState(backendPreferences.unitSystem);
// Also update localStorage to keep them in sync
try {
safeStorage.setItem('motovaultpro-unit-system', backendPreferences.unitSystem);
} catch (error) {
console.warn('[Units] Failed to sync unit system to storage:', error);
}
setHasInitialized(true);
}
}, [backendPreferences, hasInitialized]);
// Mark as initialized when not authenticated (localStorage is the source of truth)
useEffect(() => {
if (!isAuthenticated && !hasInitialized) {
setHasInitialized(true);
}
}, [isAuthenticated, hasInitialized]);
// Handle unit system change with backend sync
const handleSetUnitSystem = useCallback((system: UnitSystem) => {
setUnitSystemState(system);
// Always save to localStorage (offline fallback)
try {
safeStorage.setItem('motovaultpro-unit-system', system);
} catch (error) {
console.warn('[Units] Failed to save unit system preference:', error);
}
};
// Sync to backend if authenticated
if (isAuthenticated) {
updatePreferencesMutation.mutate({ unitSystem: system });
}
}, [isAuthenticated, updatePreferencesMutation]);
// Generate preferences object based on current system
const preferences: UnitPreferences = {
system: unitSystem,
@@ -78,29 +127,36 @@ export const UnitsProvider: React.FC<UnitsProviderProps> = ({
volume: getVolumeUnit(unitSystem),
fuelEfficiency: getFuelEfficiencyUnit(unitSystem),
};
// Currency based on unit system
const currencySymbol = getCurrencySymbol(unitSystem);
const currencyCode = getCurrencyCode(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);
const convertDistance = useCallback((miles: number) => convertDistanceBySystem(miles, unitSystem), [unitSystem]);
const convertVolume = useCallback((gallons: number) => convertVolumeBySystem(gallons, unitSystem), [unitSystem]);
const convertFuelEfficiency = useCallback((mpg: number) => convertFuelEfficiencyBySystem(mpg, unitSystem), [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 formatDistance = useCallback((miles: number, precision?: number) =>
formatDistanceBySystem(miles, unitSystem, precision), [unitSystem]);
const formatVolume = useCallback((gallons: number, precision?: number) =>
formatVolumeBySystem(gallons, unitSystem, precision), [unitSystem]);
const formatFuelEfficiency = useCallback((mpg: number, precision?: number) =>
formatFuelEfficiencyBySystem(mpg, unitSystem, precision), [unitSystem]);
const formatPrice = useCallback((pricePerGallon: number, precision?: number) =>
formatPriceBySystem(pricePerGallon, unitSystem, currencyCode, precision), [unitSystem, currencyCode]);
const value: UnitsContextType = {
unitSystem,
setUnitSystem: handleSetUnitSystem,
preferences,
currencySymbol,
currencyCode,
isLoading: preferencesLoading && isAuthenticated,
convertDistance,
convertVolume,
convertFuelEfficiency,
@@ -123,4 +179,4 @@ export const useUnits = (): UnitsContextType => {
throw new Error('useUnits must be used within a UnitsProvider');
}
return context;
};
};

2
frontend/src/core/units/units.types.ts
View File

@@ -6,7 +6,7 @@
export type UnitSystem = 'imperial' | 'metric';
export type DistanceUnit = 'miles' | 'km';
export type VolumeUnit = 'gallons' | 'liters';
export type FuelEfficiencyUnit = 'mpg' | 'kml';
export type FuelEfficiencyUnit = 'mpg' | 'l100km';
export interface UnitPreferences {
system: UnitSystem;

35
frontend/src/core/units/units.utils.ts
View File

@@ -10,9 +10,8 @@ const MILES_TO_KM = 1.60934;
const KM_TO_MILES = 0.621371;
const GALLONS_TO_LITERS = 3.78541;
const LITERS_TO_GALLONS = 0.264172;
// For km/L conversion
const MPG_TO_KML = 1.60934 / 3.78541; // ≈ 0.425144
const KML_TO_MPG = 3.78541 / 1.60934; // ≈ 2.352145
// For L/100km conversion (inverse relationship: lower L/100km = better efficiency)
const MPG_TO_L100KM_FACTOR = 235.214;
// Distance Conversions
export function convertDistance(value: number, fromUnit: DistanceUnit, toUnit: DistanceUnit): number {
@@ -58,24 +57,24 @@ export function convertVolumeBySystem(gallons: number, toSystem: UnitSystem): nu
return gallons;
}
// Fuel Efficiency Conversions
// Fuel Efficiency Conversions (L/100km is inverse: lower = better)
export function convertFuelEfficiency(value: number, fromUnit: FuelEfficiencyUnit, toUnit: FuelEfficiencyUnit): number {
if (fromUnit === toUnit) return value;
if (fromUnit === 'mpg' && toUnit === 'kml') {
return value * MPG_TO_KML;
if (fromUnit === 'mpg' && toUnit === 'l100km') {
return value === 0 ? 0 : MPG_TO_L100KM_FACTOR / value;
}
if (fromUnit === 'kml' && toUnit === 'mpg') {
return value * KML_TO_MPG;
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', 'kml');
return convertFuelEfficiency(mpg, 'mpg', 'l100km');
}
return mpg;
}
@@ -111,15 +110,15 @@ export function formatVolume(value: number, unit: VolumeUnit, precision = 2): st
export function formatFuelEfficiency(value: number, unit: FuelEfficiencyUnit, precision = 1): string {
if (typeof value !== 'number' || isNaN(value)) {
return unit === 'mpg' ? '0 MPG' : '0 km/L';
return unit === 'mpg' ? '0 MPG' : '0 L/100km';
}
const rounded = parseFloat(value.toFixed(precision));
if (unit === 'mpg') {
return `${rounded} MPG`;
} else {
return `${rounded} km/L`;
return `${rounded} L/100km`;
}
}
@@ -168,8 +167,8 @@ export function formatVolumeBySystem(gallons: number, system: UnitSystem, precis
export function formatFuelEfficiencyBySystem(mpg: number, system: UnitSystem, precision = 1): string {
if (system === 'metric') {
const kml = convertFuelEfficiencyBySystem(mpg, system);
return formatFuelEfficiency(kml, 'kml', precision);
const l100km = convertFuelEfficiencyBySystem(mpg, system);
return formatFuelEfficiency(l100km, 'l100km', precision);
}
return formatFuelEfficiency(mpg, 'mpg', precision);
}
@@ -192,5 +191,5 @@ export function getVolumeUnit(system: UnitSystem): VolumeUnit {
}
export function getFuelEfficiencyUnit(system: UnitSystem): FuelEfficiencyUnit {
return system === 'metric' ? 'kml' : 'mpg';
return system === 'metric' ? 'l100km' : 'mpg';
}