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

2
frontend/src/features/admin/hooks/useCatalog.ts
View File

@@ -350,7 +350,7 @@ export const useImportApply = () => {
onSuccess: (result) => {
queryClient.invalidateQueries({ queryKey: ['catalogSearch'] });
toast.success(
`Import completed: ${result.created} created, ${result.updated} updated, ${result.deleted} deleted`
`Import completed: ${result.created} created, ${result.updated} updated`
);
},
onError: (error: ApiError) => {

3
frontend/src/features/admin/mobile/AdminCatalogMobileScreen.tsx
View File

@@ -462,9 +462,6 @@ export const AdminCatalogMobileScreen: React.FC = () => {
<div className="bg-blue-100 text-blue-800 px-3 py-2 rounded-lg">
<strong>{importPreview.toUpdate.length}</strong> to update
</div>
<div className="bg-red-100 text-red-800 px-3 py-2 rounded-lg">
<strong>{importPreview.toDelete.length}</strong> to delete
</div>
</div>
{/* Errors */}

3
frontend/src/features/admin/types/admin.types.ts
View File

@@ -181,7 +181,6 @@ export interface CatalogSearchResponse {
// Catalog import types
export interface ImportRow {
action: 'add' | 'update' | 'delete';
year: number;
make: string;
model: string;
@@ -199,7 +198,6 @@ export interface ImportPreviewResult {
previewId: string;
toCreate: ImportRow[];
toUpdate: ImportRow[];
toDelete: ImportRow[];
errors: ImportError[];
valid: boolean;
}
@@ -207,7 +205,6 @@ export interface ImportPreviewResult {
export interface ImportApplyResult {
created: number;
updated: number;
deleted: number;
errors: ImportError[];
}

10
frontend/src/features/fuel-logs/components/CostCalculator.tsx
View File

@@ -1,15 +1,15 @@
import React from 'react';
import { Card, CardContent, Typography, Box, Chip } from '@mui/material';
import { UnitSystem } from '../types/fuel-logs.types';
import { useUnits } from '../../../core/units/UnitsContext';
interface Props {
fuelUnits?: number;
costPerUnit?: number;
calculatedCost: number;
unitSystem?: UnitSystem;
}
export const CostCalculator: React.FC<Props> = ({ fuelUnits, costPerUnit, calculatedCost, unitSystem = 'imperial' }) => {
export const CostCalculator: React.FC<Props> = ({ fuelUnits, costPerUnit, calculatedCost }) => {
const { unitSystem, currencySymbol } = useUnits();
const unitLabel = unitSystem === 'imperial' ? 'gallons' : 'liters';
// Ensure we have valid numbers
@@ -30,8 +30,8 @@ export const CostCalculator: React.FC<Props> = ({ fuelUnits, costPerUnit, calcul
<Chip label="Real-time" size="small" color="primary" variant="outlined" />
</Box>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="body2">{safeUnits.toFixed(3)} {unitLabel} × ${safeCostPerUnit.toFixed(3)}</Typography>
<Typography variant="h6" color="primary.main" fontWeight={700}>${safeCost.toFixed(2)}</Typography>
<Typography variant="body2">{safeUnits.toFixed(3)} {unitLabel} x {currencySymbol}{safeCostPerUnit.toFixed(3)}</Typography>
<Typography variant="h6" color="primary.main" fontWeight={700}>{currencySymbol}{safeCost.toFixed(2)}</Typography>
</Box>
</CardContent>
</Card>

4
frontend/src/features/fuel-logs/components/DistanceInput.tsx
View File

@@ -12,8 +12,8 @@ interface Props {
}
export const DistanceInput: React.FC<Props> = ({ type, value, onChange, unitSystem = 'imperial', error, disabled }) => {
const units = unitSystem === 'imperial' ? 'miles' : 'kilometers';
const label = type === 'odometer' ? `Odometer (${units})` : `Trip Distance (${units})`;
const units = unitSystem === 'imperial' ? 'miles' : 'km';
const label = type === 'odometer' ? 'Odometer' : 'Trip Distance';
return (
<Box>
<TextField

6
frontend/src/features/fuel-logs/components/FuelLogForm.tsx
View File

@@ -157,7 +157,7 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
)} />
</Grid>
{/* Row 2: Date/Time | MPG/km/L */}
{/* Row 2: Date/Time | MPG/L/100km */}
<Grid item xs={12} sm={6}>
<Controller name="dateTime" control={control} render={({ field }) => (
<DateTimePicker
@@ -182,7 +182,7 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
</Grid>
<Grid item xs={12} sm={6}>
<TextField
label={`${userSettings?.unitSystem === 'metric' ? 'km/L' : 'MPG'}`}
label={`${userSettings?.unitSystem === 'metric' ? 'L/100km' : 'MPG'}`}
value={calculatedEfficiency > 0 ? calculatedEfficiency.toFixed(3) : ''}
fullWidth
InputProps={{
@@ -283,7 +283,7 @@ const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial
)} />
</Grid>
<Grid item xs={12}>
<CostCalculator fuelUnits={fuelUnits} costPerUnit={costPerUnit} calculatedCost={calculatedCost} unitSystem={userSettings?.unitSystem} />
<CostCalculator fuelUnits={fuelUnits} costPerUnit={costPerUnit} calculatedCost={calculatedCost} />
</Grid>
<Grid item xs={12}>
<Controller name="locationData" control={control} render={({ field }) => (

10
frontend/src/features/fuel-logs/components/FuelLogsList.tsx
View File

@@ -31,7 +31,7 @@ interface FuelLogsListProps {
export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDelete }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const { unitSystem, convertDistance, convertVolume } = useUnits();
const { unitSystem, convertDistance, convertVolume, currencySymbol } = useUnits();
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [logToDelete, setLogToDelete] = useState<FuelLogResponse | null>(null);
const [isDeleting, setIsDeleting] = useState(false);
@@ -145,7 +145,7 @@ export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDele
if (unitSystem === 'metric') {
const km = convertDistance(miles);
const liters = convertVolume(gallons);
if (liters > 0) localEffLabel = `${(km / liters).toFixed(1)} km/L`;
if (km > 0) localEffLabel = `${((liters / km) * 100).toFixed(1)} L/100km`;
} else {
localEffLabel = `${(miles / gallons).toFixed(1)} MPG`;
}
@@ -173,8 +173,8 @@ export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDele
gap: isMobile ? 0.5 : 1
}}>
<ListItemText
primary={`${dateText} – $${totalCost}`}
secondary={`${fuelUnits} @ $${costPerUnit} • ${distanceText}`}
primary={`${dateText} \u2013 ${currencySymbol}${totalCost}`}
secondary={`${fuelUnits} @ ${currencySymbol}${costPerUnit} \u2022 ${distanceText}`}
sx={{ flex: 1, minWidth: 0 }}
/>
{(log.efficiency && typeof log.efficiency === 'number' && !isNaN(log.efficiency) && log.efficiencyLabel) || localEffLabel ? (
@@ -262,7 +262,7 @@ export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDele
</Typography>
{logToDelete && (
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
{new Date(logToDelete.dateTime).toLocaleString()} - ${logToDelete.totalCost.toFixed(2)}
{new Date(logToDelete.dateTime).toLocaleString()} - {currencySymbol}{logToDelete.totalCost.toFixed(2)}
</Typography>
)}
</DialogContent>

4
frontend/src/features/fuel-logs/components/FuelStatsCard.tsx
View File

@@ -4,7 +4,7 @@ import { FuelLogResponse } from '../types/fuel-logs.types';
import { useUnits } from '../../../core/units/UnitsContext';
export const FuelStatsCard: React.FC<{ logs?: FuelLogResponse[] }> = ({ logs }) => {
const { unitSystem } = useUnits();
const { unitSystem, currencySymbol } = useUnits();
const stats = useMemo(() => {
if (!logs || logs.length === 0) return { count: 0, totalUnits: 0, totalCost: 0 };
@@ -37,7 +37,7 @@ export const FuelStatsCard: React.FC<{ logs?: FuelLogResponse[] }> = ({ logs })
</Grid>
<Grid item xs={4}>
<Typography variant="overline" color="text.secondary">Total Cost</Typography>
<Typography variant="h6">${(typeof stats.totalCost === 'number' && !isNaN(stats.totalCost) ? stats.totalCost : 0).toFixed(2)}</Typography>
<Typography variant="h6">{currencySymbol}{(typeof stats.totalCost === 'number' && !isNaN(stats.totalCost) ? stats.totalCost : 0).toFixed(2)}</Typography>
</Grid>
</Grid>
</CardContent>

2
frontend/src/features/fuel-logs/components/UnitSystemDisplay.tsx
View File

@@ -4,7 +4,7 @@ import { UnitSystem } from '../types/fuel-logs.types';
export const UnitSystemDisplay: React.FC<{ unitSystem?: UnitSystem; showLabel?: string }> = ({ unitSystem, showLabel }) => {
if (!unitSystem) return null;
const label = unitSystem === 'imperial' ? 'Imperial (miles, gallons, MPG)' : 'Metric (km, liters, km/L)';
const label = unitSystem === 'imperial' ? 'Imperial (miles, gallons, MPG)' : 'Metric (km, liters, L/100km)';
return (
<Typography variant="caption" color="text.secondary">
{showLabel ? `${showLabel} ` : ''}{label}

13
frontend/src/features/settings/api/preferences.api.ts Normal file
View File

@@ -0,0 +1,13 @@
/**
* @ai-summary API client for user preferences endpoints
* @ai-context Handles unit system, currency, and timezone preferences sync
*/
import { apiClient } from '../../../core/api/client';
import { UserPreferences, UpdatePreferencesRequest } from '../types/preferences.types';
export const preferencesApi = {
getPreferences: () => apiClient.get<UserPreferences>('/user/preferences'),
updatePreferences: (data: UpdatePreferencesRequest) =>
apiClient.put<UserPreferences>('/user/preferences', data),
};

61
frontend/src/features/settings/hooks/usePreferences.ts Normal file
View File

@@ -0,0 +1,61 @@
/**
* @ai-summary React hooks for user preferences management
* @ai-context Handles unit system, currency, and timezone preference sync with backend
*/
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useAuth0 } from '@auth0/auth0-react';
import { preferencesApi } from '../api/preferences.api';
import { UpdatePreferencesRequest } from '../types/preferences.types';
import toast from 'react-hot-toast';
interface ApiError {
response?: {
data?: {
error?: string;
message?: string;
};
};
message?: string;
}
export const usePreferences = () => {
const { isAuthenticated, isLoading } = useAuth0();
return useQuery({
queryKey: ['user-preferences'],
queryFn: async () => {
const response = await preferencesApi.getPreferences();
return response.data;
},
enabled: isAuthenticated && !isLoading,
staleTime: 5 * 60 * 1000, // 5 minutes
gcTime: 10 * 60 * 1000, // 10 minutes cache time
retry: (failureCount, error: any) => {
// Retry 401s a few times (auth token might be refreshing)
if (error?.response?.status === 401 && failureCount < 3) {
return true;
}
return false;
},
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
refetchOnWindowFocus: false,
refetchOnMount: false,
});
};
export const useUpdatePreferences = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (data: UpdatePreferencesRequest) => preferencesApi.updatePreferences(data),
onSuccess: (response) => {
queryClient.setQueryData(['user-preferences'], response.data);
// Don't show toast for unit system changes - context handles UI feedback
},
onError: (error: ApiError) => {
const message = error.response?.data?.message || error.response?.data?.error || 'Failed to update preferences';
toast.error(message);
},
});
};

15
frontend/src/features/settings/hooks/useSettings.ts
View File

@@ -1,5 +1,6 @@
import { useState, useEffect } from 'react';
import { useSettingsPersistence, SettingsState } from './useSettingsPersistence';
import { useUnits } from '../../../core/units/UnitsContext';
const defaultSettings: SettingsState = {
darkMode: false,
@@ -13,10 +14,12 @@ const defaultSettings: SettingsState = {
export const useSettings = () => {
const { loadSettings, saveSettings } = useSettingsPersistence();
const { unitSystem: contextUnitSystem, setUnitSystem: setContextUnitSystem } = useUnits();
const [settings, setSettings] = useState<SettingsState>(defaultSettings);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// Load settings from localStorage on mount
useEffect(() => {
try {
setIsLoading(true);
@@ -33,6 +36,13 @@ export const useSettings = () => {
}
}, [loadSettings]);
// Sync unitSystem from context (which may load from backend)
useEffect(() => {
if (contextUnitSystem && contextUnitSystem !== settings.unitSystem) {
setSettings(prev => ({ ...prev, unitSystem: contextUnitSystem }));
}
}, [contextUnitSystem, settings.unitSystem]);
const updateSetting = <K extends keyof SettingsState>(
key: K,
value: SettingsState[K]
@@ -42,6 +52,11 @@ export const useSettings = () => {
const newSettings = { ...settings, [key]: value };
setSettings(newSettings);
saveSettings(newSettings);
// Sync unitSystem changes to context (which syncs to backend)
if (key === 'unitSystem' && typeof value === 'string') {
setContextUnitSystem(value as 'imperial' | 'metric');
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to save settings');
}

2
frontend/src/features/settings/mobile/MobileSettingsScreen.tsx
View File

@@ -367,7 +367,7 @@ export const MobileSettingsScreen: React.FC = () => {
<div>
<p className="font-medium text-slate-800">Unit System</p>
<p className="text-sm text-slate-500">
Currently using {settings.unitSystem === 'imperial' ? 'Miles & Gallons' : 'Kilometers & Liters'}
Currently using {settings.unitSystem === 'imperial' ? 'Miles, Gallons, MPG, USD' : 'Km, Liters, L/100km, EUR'}
</p>
</div>
<button

22
frontend/src/features/settings/types/preferences.types.ts Normal file
View File

@@ -0,0 +1,22 @@
/**
* @ai-summary Type definitions for user preferences
* @ai-context Types for unit system, currency, and timezone preferences
*/
import { UnitSystem } from '../../../core/units/units.types';
export interface UserPreferences {
id: string;
userId: string;
unitSystem: UnitSystem;
currencyCode: string;
timeZone: string;
createdAt: string;
updatedAt: string;
}
export interface UpdatePreferencesRequest {
unitSystem?: UnitSystem;
currencyCode?: string;
timeZone?: string;
}