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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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,7 +272,8 @@ export const MaintenanceRecordForm: React.FC = () => {
 
           <form onSubmit={handleSubmit(onSubmit)}>
             <Grid container spacing={2}>
-              {/* Vehicle Selection */}
+              {/* Vehicle Selection (hidden when vehicleId prop is provided) */}
+              {!vehicleId && (
                 <Grid item xs={12}>
                   <Controller
                     name="vehicle_id"
@@ -294,6 +304,7 @@ export const MaintenanceRecordForm: React.FC = () => {
                     )}
                   />
                 </Grid>
+              )}
 
               {/* Category Selection */}
               <Grid item xs={12}>

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,7 +207,8 @@ export const MaintenanceScheduleForm: React.FC = () => {
         <CardContent>
           <form onSubmit={handleSubmit(onSubmit)}>
             <Grid container spacing={2}>
-              {/* Vehicle Selection */}
+              {/* Vehicle Selection (hidden when vehicleId prop is provided) */}
+              {!vehicleId && (
                 <Grid item xs={12}>
                   <Controller
                     name="vehicle_id"
@@ -229,6 +239,7 @@ export const MaintenanceScheduleForm: React.FC = () => {
                   )}
                 />
               </Grid>
+              )}
 
               {/* Category Selection */}
               <Grid item xs={12}>

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>

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 */}