From f03cd420ef6484ef6d896c0d2c3c7beca34f3e19 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Fri, 13 Feb 2026 19:53:13 -0600
Subject: [PATCH] chore: add Maintenance page title and remove duplicate
 vehicle dropdown (refs #169)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/MaintenanceRecordForm.tsx      | 75 +++++++++++--------
 .../components/MaintenanceScheduleForm.tsx    | 63 +++++++++-------
 .../mobile/MaintenanceMobileScreen.tsx        |  4 +-
 .../maintenance/pages/MaintenancePage.tsx     |  7 +-
 4 files changed, 87 insertions(+), 62 deletions(-)

diff --git a/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx b/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx
index cd2d699..f1baa68 100644
--- a/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx
+++ b/frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx
@@ -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}>
diff --git a/frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx b/frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx
index f9ccc98..3996d8d 100644
--- a/frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx
+++ b/frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx
@@ -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}>
diff --git a/frontend/src/features/maintenance/mobile/MaintenanceMobileScreen.tsx b/frontend/src/features/maintenance/mobile/MaintenanceMobileScreen.tsx
index 5bc618c..a4c8b27 100644
--- a/frontend/src/features/maintenance/mobile/MaintenanceMobileScreen.tsx
+++ b/frontend/src/features/maintenance/mobile/MaintenanceMobileScreen.tsx
@@ -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>
diff --git a/frontend/src/features/maintenance/pages/MaintenancePage.tsx b/frontend/src/features/maintenance/pages/MaintenancePage.tsx
index ca513e7..9272ed4 100644
--- a/frontend/src/features/maintenance/pages/MaintenancePage.tsx
+++ b/frontend/src/features/maintenance/pages/MaintenancePage.tsx
@@ -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 */}