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

chore: UX design audit cleanup and receipt flow improvements #186

Merged
egullickson merged 25 commits from issue-162-ux-design-audit-cleanup into main 2026-02-14 03:50:23 +00:00
Conversation 0 Commits 25 Files Changed 51 +87 -62
4 changed files with 87 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f03cd420ef - Show all commits

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

@@ -63,7 +63,11 @@ const schema = z.object({
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 { createRecord, isRecordMutating } = useMaintenanceRecords();
const [selectedCategory, setSelectedCategory] = useState<MaintenanceCategory | null>(null);
@@ -102,7 +106,7 @@ export const MaintenanceRecordForm: React.FC = () => {
resolver: zodResolver(schema),
mode: 'onChange',
defaultValues: {
vehicle_id: '',
vehicle_id: vehicleId || '',
category: undefined as any,
subtypes: [],
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
const watchedCategory = watch('category');
useEffect(() => {
@@ -263,37 +272,39 @@ export const MaintenanceRecordForm: React.FC = () => {
<form onSubmit={handleSubmit(onSubmit)}>
<Grid container spacing={2}>
{/* Vehicle Selection */}
<Grid item xs={12}>
<Controller
name="vehicle_id"
control={control}
render={({ field }) => (
<FormControl fullWidth error={!!errors.vehicle_id}>
<InputLabel id="vehicle-select-label">Vehicle *</InputLabel>
<Select
{...field}
labelId="vehicle-select-label"
label="Vehicle *"
sx={{ minHeight: 56 }}
>
{vehicles && vehicles.length > 0 ? (
vehicles.map((vehicle) => (
<MenuItem key={vehicle.id} value={vehicle.id}>
{getVehicleSubtitle(vehicle) || 'Unknown Vehicle'}
</MenuItem>
))
) : (
<MenuItem disabled>No vehicles available</MenuItem>
{/* Vehicle Selection (hidden when vehicleId prop is provided) */}
{!vehicleId && (
<Grid item xs={12}>
<Controller
name="vehicle_id"
control={control}
render={({ field }) => (
<FormControl fullWidth error={!!errors.vehicle_id}>
<InputLabel id="vehicle-select-label">Vehicle *</InputLabel>
<Select
{...field}
labelId="vehicle-select-label"
label="Vehicle *"
sx={{ minHeight: 56 }}
>
{vehicles && vehicles.length > 0 ? (
vehicles.map((vehicle) => (
<MenuItem key={vehicle.id} value={vehicle.id}>
{getVehicleSubtitle(vehicle) || 'Unknown Vehicle'}
</MenuItem>
))
) : (
<MenuItem disabled>No vehicles available</MenuItem>
)}
</Select>
{errors.vehicle_id && (
<FormHelperText>{errors.vehicle_id.message}</FormHelperText>
)}
</Select>
{errors.vehicle_id && (
<FormHelperText>{errors.vehicle_id.message}</FormHelperText>
)}
</FormControl>
)}
/>
</Grid>
</FormControl>
)}
/>
</Grid>
)}
{/* Category Selection */}
<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' },
];
export const MaintenanceScheduleForm: React.FC = () => {
interface MaintenanceScheduleFormProps {
vehicleId?: string;
}
export const MaintenanceScheduleForm: React.FC<MaintenanceScheduleFormProps> = ({ vehicleId }) => {
const { data: vehicles, isLoading: isLoadingVehicles } = useVehicles();
const { createSchedule, isScheduleMutating } = useMaintenanceRecords();
const [selectedCategory, setSelectedCategory] = useState<MaintenanceCategory | null>(null);
@@ -114,7 +118,7 @@ export const MaintenanceScheduleForm: React.FC = () => {
resolver: zodResolver(schema),
mode: 'onChange',
defaultValues: {
vehicle_id: '',
vehicle_id: vehicleId || '',
category: undefined as any,
subtypes: [],
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
const watchedCategory = watch('category');
const watchedScheduleType = watch('schedule_type');
@@ -198,30 +207,31 @@ export const MaintenanceScheduleForm: React.FC = () => {
<CardContent>
<form onSubmit={handleSubmit(onSubmit)}>
<Grid container spacing={2}>
{/* Vehicle Selection */}
<Grid item xs={12}>
<Controller
name="vehicle_id"
control={control}
render={({ field }) => (
<FormControl fullWidth error={!!errors.vehicle_id}>
<InputLabel id="vehicle-select-label">Vehicle *</InputLabel>
<Select
{...field}
labelId="vehicle-select-label"
label="Vehicle *"
sx={{ minHeight: 56 }}
>
{vehicles && vehicles.length > 0 ? (
vehicles.map((vehicle) => (
<MenuItem key={vehicle.id} value={vehicle.id}>
{getVehicleSubtitle(vehicle) || 'Unknown Vehicle'}
</MenuItem>
))
) : (
<MenuItem disabled>No vehicles available</MenuItem>
)}
</Select>
{/* Vehicle Selection (hidden when vehicleId prop is provided) */}
{!vehicleId && (
<Grid item xs={12}>
<Controller
name="vehicle_id"
control={control}
render={({ field }) => (
<FormControl fullWidth error={!!errors.vehicle_id}>
<InputLabel id="vehicle-select-label">Vehicle *</InputLabel>
<Select
{...field}
labelId="vehicle-select-label"
label="Vehicle *"
sx={{ minHeight: 56 }}
>
{vehicles && vehicles.length > 0 ? (
vehicles.map((vehicle) => (
<MenuItem key={vehicle.id} value={vehicle.id}>
{getVehicleSubtitle(vehicle) || 'Unknown Vehicle'}
</MenuItem>
))
) : (
<MenuItem disabled>No vehicles available</MenuItem>
)}
</Select>
{errors.vehicle_id && (
<FormHelperText>{errors.vehicle_id.message}</FormHelperText>
)}
@@ -229,6 +239,7 @@ export const MaintenanceScheduleForm: React.FC = () => {
)}
/>
</Grid>
)}
{/* Category Selection */}
<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'}
</h3>
{activeTab === 'records' ? (
<MaintenanceRecordForm />
<MaintenanceRecordForm vehicleId={selectedVehicleId} />
) : (
<MaintenanceScheduleForm />
<MaintenanceScheduleForm vehicleId={selectedVehicleId} />
)}
</div>
</GlassCard>

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

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