init /country route

src/App.tsx

@@ -1,4 +1,4 @@
-import {Refine, GitHubBanner, WelcomePage, Authenticated} from '@refinedev/core'
+import {Refine, Authenticated} from '@refinedev/core'
 import {DevtoolsPanel, DevtoolsProvider} from '@refinedev/devtools'
 import {RefineKbar, RefineKbarProvider} from '@refinedev/kbar'
 
@@ -9,8 +9,6 @@ import CssBaseline from '@mui/material/CssBaseline'
 import GlobalStyles from '@mui/material/GlobalStyles'
 import {BrowserRouter, Route, Routes, Outlet} from 'react-router'
 import routerBindings, {NavigateToResource, CatchAllNavigate, UnsavedChangesNotifier, DocumentTitleHandler} from '@refinedev/react-router'
-import {BlogPostList, BlogPostCreate, BlogPostEdit, BlogPostShow} from './pages/blog-posts'
-import {CategoryList, CategoryCreate, CategoryEdit, CategoryShow} from './pages/categories'
 import {ColorModeContextProvider} from './contexts/color-mode'
 import {Header} from './components/header'
 import {Login} from './pages/login'
@@ -18,10 +16,14 @@ import {Register} from './pages/register'
 import {ForgotPassword} from './pages/forgotPassword'
 import {authProvider} from './authProvider'
 
+// import {BlogPostList, BlogPostCreate, BlogPostEdit, BlogPostShow} from './pages/blog-posts'
+// import {CategoryList, CategoryCreate, CategoryEdit, CategoryShow} from './pages/categories'
+
+import {CountryList, CountryCreate, CountryEdit} from './pages/country'
+
 function App() {
   return (
     <BrowserRouter>
-      <GitHubBanner />
       <RefineKbarProvider>
         <ColorModeContextProvider>
           <CssBaseline />
@@ -29,27 +31,37 @@ function App() {
           <RefineSnackbarProvider>
             <DevtoolsProvider>
               <Refine
-                dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
+                dataProvider={dataProvider('https://wn.krbl.ru')} // https://api.fake-rest.refine.dev
                 notificationProvider={useNotificationProvider}
                 routerProvider={routerBindings}
                 authProvider={authProvider}
                 resources={[
+                  // {
+                  //   name: 'blog_posts',
+                  //   list: '/blog-posts',
+                  //   create: '/blog-posts/create',
+                  //   edit: '/blog-posts/edit/:id',
+                  //   show: '/blog-posts/show/:id',
+                  //   meta: {
+                  //     canDelete: true,
+                  //   },
+                  // },
+                  // {
+                  //   name: 'categories',
+                  //   list: '/categories',
+                  //   create: '/categories/create',
+                  //   edit: '/categories/edit/:id',
+                  //   show: '/categories/show/:id',
+                  //   meta: {
+                  //     canDelete: true,
+                  //   },
+                  // },
+
                   {
-                    name: 'blog_posts',
+                    name: 'country',
-                    list: '/blog-posts',
+                    list: '/country',
-                    create: '/blog-posts/create',
+                    create: '/country/create',
-                    edit: '/blog-posts/edit/:id',
+                    edit: '/country/edit/:id',
-                    show: '/blog-posts/show/:id',
-                    meta: {
-                      canDelete: true,
-                    },
-                  },
-                  {
-                    name: 'categories',
-                    list: '/categories',
-                    create: '/categories/create',
-                    edit: '/categories/edit/:id',
-                    show: '/categories/show/:id',
                     meta: {
                       canDelete: true,
                     },
@@ -72,8 +84,8 @@ function App() {
                       </Authenticated>
                     }
                   >
-                    <Route index element={<NavigateToResource resource="blog_posts" />} />
+                    <Route index element={<NavigateToResource resource="country" />} />
-                    <Route path="/blog-posts">
+                    {/* <Route path="/blog-posts">
                       <Route index element={<BlogPostList />} />
                       <Route path="create" element={<BlogPostCreate />} />
                       <Route path="edit/:id" element={<BlogPostEdit />} />
@@ -84,7 +96,14 @@ function App() {
                       <Route path="create" element={<CategoryCreate />} />
                       <Route path="edit/:id" element={<CategoryEdit />} />
                       <Route path="show/:id" element={<CategoryShow />} />
+                    </Route> */}
+
+                    <Route path="/country">
+                      <Route index element={<CountryList />} />
+                      <Route path="create" element={<CountryCreate />} />
+                      <Route path="edit/:name" element={<CountryEdit />} />
                     </Route>
+
                     <Route path="*" element={<ErrorComponent />} />
                   </Route>
                   <Route

src/pages/country/create.tsx

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

src/pages/country/edit.tsx

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

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

src/pages/country/list.tsx

@@ -0,0 +1,52 @@
+import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
+import React from 'react'
+
+export const CountryList = () => {
+  const {dataGridProps} = useDataGrid({})
+
+  const columns = React.useMemo<GridColDef[]>(
+    () => [
+      {
+        field: 'code',
+        headerName: 'Code',
+        type: 'string',
+        minWidth: 100,
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+      },
+      {
+        field: 'name',
+        headerName: 'Name',
+        type: 'string',
+        minWidth: 100,
+        flex: 1,
+      },
+      {
+        field: 'actions',
+        headerName: 'Actions',
+        align: 'right',
+        headerAlign: 'center',
+        minWidth: 100,
+        sortable: false,
+        display: 'flex',
+        renderCell: function render({row}) {
+          return (
+            <>
+              <EditButton hideText recordItemId={row.name} />
+              <DeleteButton hideText recordItemId={row.name} />
+            </>
+          )
+        },
+      },
+    ],
+    [],
+  )
+
+  return (
+    <List>
+      <DataGrid {...dataGridProps} columns={columns} getRowId={(row: any) => row.code} />
+    </List>
+  )
+}