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

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}