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

chore: add Maintenance page title and remove duplicate vehicle dropdown (refs #169)

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-02-13 19:53:13 -06:00
parent e4be744643
commit f03cd420ef
4 changed files with 87 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx
View File

@@ -63,7 +63,11 @@ const schema = z.object({
type FormData = z.infer<typeof schema>; type FormData = z.infer<typeof schema>;
export const MaintenanceRecordForm: React.FC = () => { interface MaintenanceRecordFormProps {
vehicleId?: string;
}
export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ vehicleId }) => {
const { data: vehicles, isLoading: isLoadingVehicles } = useVehicles(); const { data: vehicles, isLoading: isLoadingVehicles } = useVehicles();
const { createRecord, isRecordMutating } = useMaintenanceRecords(); const { createRecord, isRecordMutating } = useMaintenanceRecords();
const [selectedCategory, setSelectedCategory] = useState<MaintenanceCategory | null>(null); const [selectedCategory, setSelectedCategory] = useState<MaintenanceCategory | null>(null);
@@ -102,7 +106,7 @@ export const MaintenanceRecordForm: React.FC = () => {
resolver: zodResolver(schema), resolver: zodResolver(schema),
mode: 'onChange', mode: 'onChange',
defaultValues: { defaultValues: {
vehicle_id: '', vehicle_id: vehicleId || '',
category: undefined as any, category: undefined as any,
subtypes: [], subtypes: [],
date: new Date().toISOString().split('T')[0], date: new Date().toISOString().split('T')[0],
@@ -113,6 +117,11 @@ export const MaintenanceRecordForm: React.FC = () => {
}, },
}); });
// Sync vehicle_id when parent prop changes
useEffect(() => {
if (vehicleId) setValue('vehicle_id', vehicleId);
}, [vehicleId, setValue]);
// Watch category changes to reset subtypes // Watch category changes to reset subtypes
const watchedCategory = watch('category'); const watchedCategory = watch('category');
useEffect(() => { useEffect(() => {
@@ -263,37 +272,39 @@ export const MaintenanceRecordForm: React.FC = () => {
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<Grid container spacing={2}> <Grid container spacing={2}>
{/* Vehicle Selection */} {/* Vehicle Selection (hidden when vehicleId prop is provided) */}
<Grid item xs={12}> {!vehicleId && (
<Controller <Grid item xs={12}>
name="vehicle_id" <Controller
control={control} name="vehicle_id"
render={({ field }) => ( control={control}
<FormControl fullWidth error={!!errors.vehicle_id}> render={({ field }) => (
<InputLabel id="vehicle-select-label">Vehicle *</InputLabel> <FormControl fullWidth error={!!errors.vehicle_id}>
<Select <InputLabel id="vehicle-select-label">Vehicle *</InputLabel>
{...field} <Select
labelId="vehicle-select-label" {...field}
label="Vehicle *" labelId="vehicle-select-label"
sx={{ minHeight: 56 }} label="Vehicle *"
> sx={{ minHeight: 56 }}
{vehicles && vehicles.length > 0 ? ( >
vehicles.map((vehicle) => ( {vehicles && vehicles.length > 0 ? (
<MenuItem key={vehicle.id} value={vehicle.id}> vehicles.map((vehicle) => (
{getVehicleSubtitle(vehicle) || 'Unknown Vehicle'} <MenuItem key={vehicle.id} value={vehicle.id}>
</MenuItem> {getVehicleSubtitle(vehicle) || 'Unknown Vehicle'}
)) </MenuItem>
) : ( ))
<MenuItem disabled>No vehicles available</MenuItem> ) : (
<MenuItem disabled>No vehicles available</MenuItem>
)}
</Select>
{errors.vehicle_id && (
<FormHelperText>{errors.vehicle_id.message}</FormHelperText>
)} )}
</Select> </FormControl>
{errors.vehicle_id && ( )}
<FormHelperText>{errors.vehicle_id.message}</FormHelperText> />
)} </Grid>
</FormControl> )}
)}
/>
</Grid>
{/* Category Selection */} {/* Category Selection */}
<Grid item xs={12}> <Grid item xs={12}>

63
frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx
View File

@@ -98,7 +98,11 @@ const REMINDER_OPTIONS = [
{ value: '60', label: '60 days' }, { value: '60', label: '60 days' },
]; ];
export const MaintenanceScheduleForm: React.FC = () => { interface MaintenanceScheduleFormProps {
vehicleId?: string;
}
export const MaintenanceScheduleForm: React.FC<MaintenanceScheduleFormProps> = ({ vehicleId }) => {
const { data: vehicles, isLoading: isLoadingVehicles } = useVehicles(); const { data: vehicles, isLoading: isLoadingVehicles } = useVehicles();
const { createSchedule, isScheduleMutating } = useMaintenanceRecords(); const { createSchedule, isScheduleMutating } = useMaintenanceRecords();
const [selectedCategory, setSelectedCategory] = useState<MaintenanceCategory | null>(null); const [selectedCategory, setSelectedCategory] = useState<MaintenanceCategory | null>(null);
@@ -114,7 +118,7 @@ export const MaintenanceScheduleForm: React.FC = () => {
resolver: zodResolver(schema), resolver: zodResolver(schema),
mode: 'onChange', mode: 'onChange',
defaultValues: { defaultValues: {
vehicle_id: '', vehicle_id: vehicleId || '',
category: undefined as any, category: undefined as any,
subtypes: [], subtypes: [],
schedule_type: 'interval' as ScheduleType, schedule_type: 'interval' as ScheduleType,
@@ -128,6 +132,11 @@ export const MaintenanceScheduleForm: React.FC = () => {
}, },
}); });
// Sync vehicle_id when parent prop changes
useEffect(() => {
if (vehicleId) setValue('vehicle_id', vehicleId);
}, [vehicleId, setValue]);
// Watch category and schedule type changes // Watch category and schedule type changes
const watchedCategory = watch('category'); const watchedCategory = watch('category');
const watchedScheduleType = watch('schedule_type'); const watchedScheduleType = watch('schedule_type');
@@ -198,30 +207,31 @@ export const MaintenanceScheduleForm: React.FC = () => {
<CardContent> <CardContent>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<Grid container spacing={2}> <Grid container spacing={2}>
{/* Vehicle Selection */} {/* Vehicle Selection (hidden when vehicleId prop is provided) */}
<Grid item xs={12}> {!vehicleId && (
<Controller <Grid item xs={12}>
name="vehicle_id" <Controller
control={control} name="vehicle_id"
render={({ field }) => ( control={control}
<FormControl fullWidth error={!!errors.vehicle_id}> render={({ field }) => (
<InputLabel id="vehicle-select-label">Vehicle *</InputLabel> <FormControl fullWidth error={!!errors.vehicle_id}>
<Select <InputLabel id="vehicle-select-label">Vehicle *</InputLabel>
{...field} <Select
labelId="vehicle-select-label" {...field}
label="Vehicle *" labelId="vehicle-select-label"
sx={{ minHeight: 56 }} label="Vehicle *"
> sx={{ minHeight: 56 }}
{vehicles && vehicles.length > 0 ? ( >
vehicles.map((vehicle) => ( {vehicles && vehicles.length > 0 ? (
<MenuItem key={vehicle.id} value={vehicle.id}> vehicles.map((vehicle) => (
{getVehicleSubtitle(vehicle) || 'Unknown Vehicle'} <MenuItem key={vehicle.id} value={vehicle.id}>
</MenuItem> {getVehicleSubtitle(vehicle) || 'Unknown Vehicle'}
)) </MenuItem>
) : ( ))
<MenuItem disabled>No vehicles available</MenuItem> ) : (
)} <MenuItem disabled>No vehicles available</MenuItem>
</Select> )}
</Select>
{errors.vehicle_id && ( {errors.vehicle_id && (
<FormHelperText>{errors.vehicle_id.message}</FormHelperText> <FormHelperText>{errors.vehicle_id.message}</FormHelperText>
)} )}
@@ -229,6 +239,7 @@ export const MaintenanceScheduleForm: React.FC = () => {
)} )}
/> />
</Grid> </Grid>
)}
{/* Category Selection */} {/* Category Selection */}
<Grid item xs={12}> <Grid item xs={12}>

4
frontend/src/features/maintenance/mobile/MaintenanceMobileScreen.tsx
View File

@@ -199,9 +199,9 @@ export const MaintenanceMobileScreen: React.FC = () => {
{activeTab === 'records' ? 'New Maintenance Record' : 'New Maintenance Schedule'} {activeTab === 'records' ? 'New Maintenance Record' : 'New Maintenance Schedule'}
</h3> </h3>
{activeTab === 'records' ? ( {activeTab === 'records' ? (
<MaintenanceRecordForm /> <MaintenanceRecordForm vehicleId={selectedVehicleId} />
) : ( ) : (
<MaintenanceScheduleForm /> <MaintenanceScheduleForm vehicleId={selectedVehicleId} />
)} )}
</div> </div>
</GlassCard> </GlassCard>

7
frontend/src/features/maintenance/pages/MaintenancePage.tsx
View File

@@ -142,6 +142,9 @@ export const MaintenancePage: React.FC = () => {
return ( return (
<FormSuspense> <FormSuspense>
{/* Page Title */}
<Typography variant="h5" sx={{ fontWeight: 600, mb: 3 }}>Maintenance</Typography>
{/* Vehicle Selector */} {/* Vehicle Selector */}
<Box sx={{ mb: 3 }}> <Box sx={{ mb: 3 }}>
<FormControl fullWidth> <FormControl fullWidth>
@@ -182,7 +185,7 @@ export const MaintenancePage: React.FC = () => {
<Grid container spacing={3}> <Grid container spacing={3}>
{/* Top: Form */} {/* Top: Form */}
<Grid item xs={12}> <Grid item xs={12}>
<MaintenanceRecordForm /> <MaintenanceRecordForm vehicleId={selectedVehicleId} />
</Grid> </Grid>
{/* Bottom: Records List */} {/* Bottom: Records List */}
@@ -203,7 +206,7 @@ export const MaintenancePage: React.FC = () => {
<Grid container spacing={3}> <Grid container spacing={3}>
{/* Top: Form */} {/* Top: Form */}
<Grid item xs={12}> <Grid item xs={12}>
<MaintenanceScheduleForm /> <MaintenanceScheduleForm vehicleId={selectedVehicleId} />
</Grid> </Grid>
{/* Bottom: Schedules List */} {/* Bottom: Schedules List */}