add show page for /country route

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>
+  )
+}