add show page for /country route

src/App.tsx

@@ -16,7 +16,7 @@ import {Register} from './pages/register'
 import {ForgotPassword} from './pages/forgotPassword'
 import {authProvider} from './authProvider'
 
-import {CountryList, CountryCreate, CountryEdit} from './pages/country'
+import {CountryList, CountryCreate, CountryEdit, CountryShow} from './pages/country'
 import {CityList, CityCreate, CityEdit} from './pages/city'
 import {CarrierList, CarrierCreate, CarrierEdit} from './pages/carrier'
 import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media'
@@ -48,6 +48,7 @@ function App() {
                     list: '/country',
                     create: '/country/create',
                     edit: '/country/edit/:id',
+                    show: '/country/show/:id',
                     meta: {
                       canDelete: true,
                       label: 'Страны',
@@ -173,6 +174,7 @@ function App() {
                       <Route index element={<CountryList />} />
                       <Route path="create" element={<CountryCreate />} />
                       <Route path="edit/:name" element={<CountryEdit />} />
+                      <Route path="show/:id" element={<CountryShow />} />
                     </Route>
 
                     <Route path="/city">

src/pages/country/index.ts

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

src/pages/country/list.tsx

@@ -1,5 +1,5 @@
 import {DataGrid, type GridColDef} from '@mui/x-data-grid'
-import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
+import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
 import React from 'react'
 
 export const CountryList = () => {
@@ -28,14 +28,15 @@ export const CountryList = () => {
         headerName: 'Actions',
         align: 'right',
         headerAlign: 'center',
-        minWidth: 100,
+        minWidth: 120,
         sortable: false,
         display: 'flex',
         renderCell: function render({row}) {
           return (
             <>
-              <EditButton hideText recordItemId={row.name} />
-              <DeleteButton hideText recordItemId={row.name} />
+              <EditButton hideText recordItemId={row.code} />
+              <ShowButton hideText recordItemId={row.code} />
+              <DeleteButton hideText recordItemId={row.code} />
             </>
           )
         },

src/pages/country/show.tsx

@@ -0,0 +1,30 @@
+import {Stack, Typography} from '@mui/material'
+import {useShow} from '@refinedev/core'
+import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+
+export const CountryShow = () => {
+  const {query} = useShow({})
+  const {data, isLoading} = query
+
+  const record = data?.data
+
+  const fields = [
+    {label: 'Code', data: 'code'},
+    {label: 'Name', data: 'name'},
+  ]
+
+  return (
+    <Show isLoading={isLoading}>
+      <Stack gap={4}>
+        {fields.map(({label, data}) => (
+          <Stack key={data} gap={1}>
+            <Typography variant="body1" fontWeight="bold">
+              {label}
+            </Typography>
+            <TextField value={record?.[data]} />
+          </Stack>
+        ))}
+      </Stack>
+    </Show>
+  )
+}