init /city route

src/App.tsx

@@ -2,7 +2,7 @@ import {Refine, Authenticated} from '@refinedev/core'
 import {DevtoolsPanel, DevtoolsProvider} from '@refinedev/devtools'
 import {RefineKbar, RefineKbarProvider} from '@refinedev/kbar'
 
-import {AuthPage, ErrorComponent, useNotificationProvider, RefineSnackbarProvider, ThemedLayoutV2} from '@refinedev/mui'
+import {ErrorComponent, useNotificationProvider, RefineSnackbarProvider, ThemedLayoutV2} from '@refinedev/mui'
 
 import dataProvider from '@refinedev/simple-rest'
 import CssBaseline from '@mui/material/CssBaseline'
@@ -20,6 +20,7 @@ import {authProvider} from './authProvider'
 // import {CategoryList, CategoryCreate, CategoryEdit, CategoryShow} from './pages/categories'
 
 import {CountryList, CountryCreate, CountryEdit} from './pages/country'
+import {CityList, CityCreate, CityEdit} from './pages/city'
 
 function App() {
   return (
@@ -66,6 +67,15 @@ function App() {
                       canDelete: true,
                     },
                   },
+                  {
+                    name: 'city',
+                    list: '/city',
+                    create: '/city/create',
+                    edit: '/city/edit/:id',
+                    meta: {
+                      canDelete: true,
+                    },
+                  },
                 ]}
                 options={{
                   syncWithLocation: true,
@@ -104,6 +114,12 @@ function App() {
                       <Route path="edit/:name" element={<CountryEdit />} />
                     </Route>
 
+                    <Route path="/city">
+                      <Route index element={<CityList />} />
+                      <Route path="create" element={<CityCreate />} />
+                      <Route path="edit/:id" element={<CityEdit />} />
+                    </Route>
+
                     <Route path="*" element={<ErrorComponent />} />
                   </Route>
                   <Route

src/pages/city/create.tsx

@@ -0,0 +1,60 @@
+import {Autocomplete, Box, TextField} from '@mui/material'
+import {Create, useAutocomplete} from '@refinedev/mui'
+import {useForm} from '@refinedev/react-hook-form'
+import {Controller} from 'react-hook-form'
+
+export const CityCreate = () => {
+  const {
+    saveButtonProps,
+    refineCore: {formLoading},
+    register,
+    control,
+    formState: {errors},
+  } = useForm({})
+
+  const {autocompleteProps: countryAutocompleteProps} = useAutocomplete({
+    resource: 'country',
+  })
+
+  return (
+    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
+      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+        <Controller
+          control={control}
+          name="country_code"
+          rules={{required: 'This field is required'}}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...countryAutocompleteProps}
+              {...field}
+              onChange={(_, value) => {
+                field.onChange(value?.code || '')
+              }}
+              getOptionLabel={(item) => {
+                return item?.code || ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.code === value?.code
+              }}
+              renderInput={(params) => <TextField {...params} label="Country Code" margin="normal" variant="outlined" error={!!errors.country_code} helperText={(errors as any)?.country_code?.message} required />}
+            />
+          )}
+        />
+        <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"
+        />
+      </Box>
+    </Create>
+  )
+}

src/pages/city/edit.tsx

@@ -0,0 +1,45 @@
+import {Box, TextField} from '@mui/material'
+import {Edit} from '@refinedev/mui'
+import {useForm} from '@refinedev/react-hook-form'
+
+export const CityEdit = () => {
+  const {
+    saveButtonProps,
+    register,
+    formState: {errors},
+  } = useForm({})
+
+  return (
+    <Edit saveButtonProps={saveButtonProps}>
+      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+        <TextField
+          {...register('country_code', {
+            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={'Country code'}
+          name="country_code"
+        />
+
+        <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"
+        />
+      </Box>
+    </Edit>
+  )
+}

src/pages/city/index.ts

@@ -0,0 +1,3 @@
+export * from './create'
+export * from './edit'
+export * from './list'

src/pages/city/list.tsx

@@ -0,0 +1,59 @@
+import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
+import React from 'react'
+
+export const CityList = () => {
+  const {dataGridProps} = useDataGrid({})
+
+  const columns = React.useMemo<GridColDef[]>(
+    () => [
+      {
+        field: 'id',
+        headerName: 'ID',
+        type: 'number',
+        minWidth: 50,
+        align: 'left',
+        headerAlign: 'left',
+      },
+      {
+        field: 'country_code',
+        headerName: 'Country Code',
+        type: 'string',
+        minWidth: 150,
+        align: 'left',
+        headerAlign: 'left',
+      },
+      {
+        field: 'name',
+        headerName: 'City Name',
+        type: 'string',
+        minWidth: 150,
+        flex: 1,
+      },
+      {
+        field: 'actions',
+        headerName: 'Actions',
+        align: 'right',
+        headerAlign: 'center',
+        minWidth: 120,
+        sortable: false,
+        display: 'flex',
+        renderCell: function render({row}) {
+          return (
+            <>
+              <EditButton hideText recordItemId={row.id} />
+              <DeleteButton hideText recordItemId={row.id} />
+            </>
+          )
+        },
+      },
+    ],
+    [],
+  )
+
+  return (
+    <List>
+      <DataGrid {...dataGridProps} columns={columns} />
+    </List>
+  )
+}