finalize sight, station, route, vehicle routes

src/pages/vehicle/edit.tsx

@@ -1,17 +1,23 @@
-import {Autocomplete, Box, TextField, FormControl, InputLabel, Select, MenuItem, Typography} from '@mui/material'
+import {Autocomplete, Box, TextField} from '@mui/material'
 import {Edit, useAutocomplete} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
 import {Controller} from 'react-hook-form'
 
 import {VEHICLE_TYPES} from '../../lib/constants'
 
+type VehicleFormValues = {
+  tail_number: number
+  type: number
+  city_id: number
+}
+
 export const VehicleEdit = () => {
   const {
     saveButtonProps,
     register,
     control,
     formState: {errors},
-  } = useForm({})
+  } = useForm<VehicleFormValues>({})
 
   const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
     resource: 'city',
@@ -31,33 +37,34 @@ export const VehicleEdit = () => {
           fullWidth
           InputLabelProps={{shrink: true}}
           type="number"
-          label="Номер рейса"
+          label="Бортовой номер"
           name="tail_number"
         />
 
-        <FormControl fullWidth margin="normal" error={!!errors.type}>
-          <InputLabel id="vehicle-type-label">Выберите тип</InputLabel>
-          <Select
-            labelId="vehicle-type-label"
-            label="Выберите тип"
-            {...register('type', {
-              required: 'Это поле является обязательным',
-              valueAsNumber: true,
-            })}
-            defaultValue=""
-          >
-            {VEHICLE_TYPES.map((option) => (
-              <MenuItem key={option.value} value={option.value}>
-                {option.label}
-              </MenuItem>
-            ))}
-          </Select>
-          {errors.type && (
-            <Typography variant="caption" color="error">
-              {!!(errors as any)?.message}
-            </Typography>
+        <Controller
+          control={control}
+          name="type"
+          rules={{
+            required: 'Это поле является обязательным',
+          }}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              options={VEHICLE_TYPES}
+              value={VEHICLE_TYPES.find((option) => option.value === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.value || null)
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.label : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.value === value?.value
+              }}
+              renderInput={(params) => <TextField {...params} label="Выберите тип" margin="normal" variant="outlined" error={!!errors.type} helperText={(errors as any)?.type?.message} required />}
+            />
           )}
-        </FormControl>
+        />
 
         <Controller
           control={control}