Initial Commit
This commit is contained in:
Eric Gullickson
161
frontend/src/features/fuel-logs/components/FuelLogForm.tsx
Normal file
161
frontend/src/features/fuel-logs/components/FuelLogForm.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Grid, Card, CardHeader, CardContent, TextField, Switch, FormControlLabel, Box, Button, CircularProgress } from '@mui/material';
|
||||
import { VehicleSelector } from './VehicleSelector';
|
||||
import { DistanceInput } from './DistanceInput';
|
||||
import { FuelTypeSelector } from './FuelTypeSelector';
|
||||
import { UnitSystemDisplay } from './UnitSystemDisplay';
|
||||
import { LocationInput } from './LocationInput';
|
||||
import { CostCalculator } from './CostCalculator';
|
||||
import { useFuelLogs } from '../hooks/useFuelLogs';
|
||||
import { useUserSettings } from '../hooks/useUserSettings';
|
||||
import { CreateFuelLogRequest, FuelType } from '../types/fuel-logs.types';
|
||||
|
||||
const schema = z.object({
|
||||
vehicleId: z.string().uuid(),
|
||||
dateTime: z.string().min(1),
|
||||
odometerReading: z.coerce.number().positive().optional(),
|
||||
tripDistance: z.coerce.number().positive().optional(),
|
||||
fuelType: z.nativeEnum(FuelType),
|
||||
fuelGrade: z.union([z.string(), z.null()]).optional(),
|
||||
fuelUnits: z.coerce.number().positive(),
|
||||
costPerUnit: z.coerce.number().positive(),
|
||||
locationData: z.any().optional(),
|
||||
notes: z.string().max(500).optional(),
|
||||
}).refine((d) => (d.odometerReading && d.odometerReading > 0) || (d.tripDistance && d.tripDistance > 0), {
|
||||
message: 'Either odometer reading or trip distance is required'
|
||||
}).refine((d) => !(d.odometerReading && d.tripDistance), {
|
||||
message: 'Cannot specify both odometer reading and trip distance'
|
||||
});
|
||||
|
||||
export const FuelLogForm: React.FC<{ onSuccess?: () => void; initial?: Partial<CreateFuelLogRequest> }> = ({ onSuccess, initial }) => {
|
||||
const { userSettings } = useUserSettings();
|
||||
const { createFuelLog, isLoading } = useFuelLogs();
|
||||
const [useOdometer, setUseOdometer] = useState(false);
|
||||
|
||||
const { control, handleSubmit, watch, setValue, formState: { errors, isValid } } = useForm<CreateFuelLogRequest>({
|
||||
resolver: zodResolver(schema),
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
dateTime: new Date().toISOString().slice(0, 16),
|
||||
fuelType: FuelType.GASOLINE,
|
||||
...initial
|
||||
} as any
|
||||
});
|
||||
|
||||
const watched = watch(['fuelUnits', 'costPerUnit']);
|
||||
const [fuelUnitsRaw, costPerUnitRaw] = watched as [string | number | undefined, string | number | undefined];
|
||||
|
||||
// Convert to numbers for calculation
|
||||
const fuelUnits = typeof fuelUnitsRaw === 'string' ? parseFloat(fuelUnitsRaw) : fuelUnitsRaw;
|
||||
const costPerUnit = typeof costPerUnitRaw === 'string' ? parseFloat(costPerUnitRaw) : costPerUnitRaw;
|
||||
|
||||
const calculatedCost = useMemo(() => {
|
||||
const units = fuelUnits && !isNaN(fuelUnits) ? fuelUnits : 0;
|
||||
const cost = costPerUnit && !isNaN(costPerUnit) ? costPerUnit : 0;
|
||||
return units > 0 && cost > 0 ? units * cost : 0;
|
||||
}, [fuelUnits, costPerUnit]);
|
||||
|
||||
const onSubmit = async (data: CreateFuelLogRequest) => {
|
||||
const payload: CreateFuelLogRequest = {
|
||||
...data,
|
||||
odometerReading: useOdometer ? data.odometerReading : undefined,
|
||||
tripDistance: useOdometer ? undefined : data.tripDistance,
|
||||
};
|
||||
await createFuelLog(payload);
|
||||
onSuccess?.();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (useOdometer) setValue('tripDistance', undefined as any);
|
||||
else setValue('odometerReading', undefined as any);
|
||||
}, [useOdometer, setValue]);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader title="Add Fuel Log" subheader={<UnitSystemDisplay unitSystem={userSettings?.unitSystem} showLabel="Displaying in" />} />
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Controller name="vehicleId" control={control} render={({ field }) => (
|
||||
<VehicleSelector value={field.value} onChange={field.onChange} error={errors.vehicleId?.message} required />
|
||||
)} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Controller name="dateTime" control={control} render={({ field }) => (
|
||||
<TextField {...field} label="Date & Time" type="datetime-local" fullWidth error={!!errors.dateTime} helperText={errors.dateTime?.message} InputLabelProps={{ shrink: true }} />
|
||||
)} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormControlLabel control={<Switch checked={useOdometer} onChange={(e) => setUseOdometer(e.target.checked)} />} label={`Use ${useOdometer ? 'Odometer' : 'Trip Distance'}`} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Controller name={useOdometer ? 'odometerReading' : 'tripDistance'} control={control} render={({ field }) => (
|
||||
<DistanceInput type={useOdometer ? 'odometer' : 'trip'} value={field.value as any} onChange={field.onChange as any} unitSystem={userSettings?.unitSystem} error={useOdometer ? (errors.odometerReading?.message as any) : (errors.tripDistance?.message as any)} />
|
||||
)} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Controller name="fuelType" control={control} render={({ field: fuelTypeField }) => (
|
||||
<Controller name="fuelGrade" control={control} render={({ field: fuelGradeField }) => (
|
||||
<FuelTypeSelector fuelType={fuelTypeField.value} fuelGrade={fuelGradeField.value as any} onFuelTypeChange={fuelTypeField.onChange} onFuelGradeChange={fuelGradeField.onChange as any} error={(errors.fuelType?.message as any) || (errors.fuelGrade?.message as any)} />
|
||||
)} />
|
||||
)} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Controller name="fuelUnits" control={control} render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
value={field.value ?? ''}
|
||||
onChange={(e) => field.onChange(e.target.value)}
|
||||
label={`Fuel Amount (${userSettings?.unitSystem === 'imperial' ? 'gallons' : 'liters'})`}
|
||||
type="number"
|
||||
inputProps={{ step: 0.001, min: 0.001 }}
|
||||
fullWidth
|
||||
error={!!errors.fuelUnits}
|
||||
helperText={errors.fuelUnits?.message}
|
||||
/>
|
||||
)} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Controller name="costPerUnit" control={control} render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
value={field.value ?? ''}
|
||||
onChange={(e) => field.onChange(e.target.value)}
|
||||
label={`Cost Per ${userSettings?.unitSystem === 'imperial' ? 'Gallon' : 'Liter'}`}
|
||||
type="number"
|
||||
inputProps={{ step: 0.001, min: 0.001 }}
|
||||
fullWidth
|
||||
error={!!errors.costPerUnit}
|
||||
helperText={errors.costPerUnit?.message}
|
||||
/>
|
||||
)} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<CostCalculator fuelUnits={fuelUnits} costPerUnit={costPerUnit} calculatedCost={calculatedCost} unitSystem={userSettings?.unitSystem} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Controller name="locationData" control={control} render={({ field }) => (
|
||||
<LocationInput value={field.value as any} onChange={field.onChange as any} placeholder="Station location (optional)" />
|
||||
)} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Controller name="notes" control={control} render={({ field }) => (
|
||||
<TextField {...field} label="Notes (optional)" multiline rows={3} fullWidth error={!!errors.notes} helperText={errors.notes?.message} />
|
||||
)} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Box display="flex" gap={2} justifyContent="flex-end">
|
||||
<Button type="submit" variant="contained" disabled={!isValid || isLoading} startIcon={isLoading ? <CircularProgress size={18} /> : undefined}>Add Fuel Log</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user