init /sight route

src/pages/sight/edit.tsx

@@ -0,0 +1,87 @@
+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'
+
+export const SightEdit = () => {
+  const {
+    saveButtonProps,
+    register,
+    control,
+    formState: {errors},
+  } = useForm({})
+
+  const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
+    resource: 'city',
+  })
+
+  return (
+    <Edit saveButtonProps={saveButtonProps}>
+      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+        <TextField
+          {...register('name', {
+            required: 'This field is required',
+          })}
+          error={!!(errors as any)?.title}
+          helperText={(errors as any)?.title?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="text"
+          label={'Name'}
+          name="name"
+        />
+        <TextField
+          {...register('latitude', {
+            required: 'This field is required',
+            valueAsNumber: true,
+          })}
+          error={!!(errors as any)?.title}
+          helperText={(errors as any)?.title?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="number"
+          label={'Latitude'}
+          name="latitude"
+        />
+        <TextField
+          {...register('longitude', {
+            required: 'This field is required',
+            valueAsNumber: true,
+          })}
+          error={!!(errors as any)?.title}
+          helperText={(errors as any)?.title?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="number"
+          label={'Longitude'}
+          name="longitude"
+        />
+        <Controller
+          control={control}
+          name="city_id"
+          rules={{required: 'This field is required'}}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...cityAutocompleteProps}
+              value={cityAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.id || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.name : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              renderInput={(params) => <TextField {...params} label="Select City" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
+            />
+          )}
+        />
+      </Box>
+    </Edit>
+  )
+}