Almost ready

frontend/src/features/maintenance/components/SubtypeCheckboxGroup.tsx

@@ -1,10 +1,10 @@
 /**
- * @ai-summary Reusable checkbox group for maintenance subtype selection
- * @ai-context Responsive grid layout with proper mobile touch targets
+ * @ai-summary Multi-select dropdown for maintenance subtype selection
+ * @ai-context Material-UI Autocomplete with proper mobile touch targets
  */
 
 import React from 'react';
-import { FormGroup, FormControlLabel, Checkbox, Box } from '@mui/material';
+import { Autocomplete, TextField, Chip } from '@mui/material';
 import { MaintenanceCategory, getSubtypesForCategory } from '../types/maintenance.types';
 
 interface SubtypeCheckboxGroupProps {
@@ -20,52 +20,44 @@ export const SubtypeCheckboxGroup: React.FC<SubtypeCheckboxGroupProps> = ({
 }) => {
   const availableSubtypes = getSubtypesForCategory(category);
 
-  const handleToggle = (subtype: string) => {
-    const newSelected = selected.includes(subtype)
-      ? selected.filter((s) => s !== subtype)
-      : [...selected, subtype];
-    onChange(newSelected);
-  };
-
   return (
-    <Box
-      sx={{
-        display: 'grid',
-        gridTemplateColumns: {
-          xs: '1fr',
-          sm: 'repeat(2, 1fr)',
-          md: 'repeat(3, 1fr)',
-        },
-        gap: 1,
-      }}
-    >
-      <FormGroup>
-        {availableSubtypes.map((subtype) => (
-          <FormControlLabel
-            key={subtype}
-            control={
-              <Checkbox
-                checked={selected.includes(subtype)}
-                onChange={() => handleToggle(subtype)}
-                sx={{
-                  minWidth: 44,
-                  minHeight: 44,
-                  '& .MuiSvgIcon-root': {
-                    fontSize: 24,
-                  },
-                }}
-              />
-            }
-            label={subtype}
+    <Autocomplete
+      multiple
+      options={Array.from(availableSubtypes)}
+      value={selected}
+      onChange={(_, newValue) => onChange(newValue)}
+      disableCloseOnSelect
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="Select Subtypes"
+          placeholder={selected.length === 0 ? 'Choose one or more...' : ''}
+          sx={{
+            '& .MuiOutlinedInput-root': {
+              minHeight: 56,
+            },
+          }}
+        />
+      )}
+      renderTags={(value, getTagProps) =>
+        value.map((option, index) => (
+          <Chip
+            label={option}
+            {...getTagProps({ index })}
+            key={option}
             sx={{
-              minHeight: 44,
-              '& .MuiFormControlLabel-label': {
-                fontSize: { xs: 14, sm: 16 },
-              },
+              height: 32,
+              fontSize: { xs: 13, sm: 14 },
             }}
           />
-        ))}
-      </FormGroup>
-    </Box>
+        ))
+      }
+      sx={{
+        '& .MuiAutocomplete-option': {
+          minHeight: 44,
+          fontSize: { xs: 14, sm: 16 },
+        },
+      }}
+    />
   );
 };

frontend/src/features/maintenance/pages/MaintenancePage.tsx

@@ -86,14 +86,14 @@ export const MaintenancePage: React.FC = () => {
 
   return (
     <FormSuspense>
-      <Grid container spacing={2}>
-        {/* Left Column: Form */}
-        <Grid item xs={12} md={6}>
+      <Grid container spacing={3}>
+        {/* Top: Form */}
+        <Grid item xs={12}>
           <MaintenanceRecordForm />
         </Grid>
 
-        {/* Right Column: Records List */}
-        <Grid item xs={12} md={6}>
+        {/* Bottom: Records List */}
+        <Grid item xs={12}>
           <Typography variant="h6" gutterBottom>
             Recent Maintenance Records
           </Typography>