add show page for other routes

src/pages/city/index.ts

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

src/pages/city/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 CityList = () => {
@@ -42,6 +42,7 @@ export const CityList = () => {
           return (
             <>
               <EditButton hideText recordItemId={row.id} />
+              <ShowButton hideText recordItemId={row.id} />
               <DeleteButton hideText recordItemId={row.id} />
             </>
           )

src/pages/city/show.tsx

@@ -0,0 +1,31 @@
+import {Stack, Typography} from '@mui/material'
+import {useShow} from '@refinedev/core'
+import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+
+export const CityShow = () => {
+  const {query} = useShow({})
+  const {data, isLoading} = query
+
+  const record = data?.data
+
+  const fields = [
+    {label: 'ID', data: 'id'},
+    {label: 'City Name', data: 'name'},
+    {label: 'Country Code', data: 'country_code'},
+  ]
+
+  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>
+  )
+}