add show page for other routes

src/App.tsx

@@ -17,10 +17,10 @@ import {ForgotPassword} from './pages/forgotPassword'
 import {authProvider} from './authProvider'
 
 import {CountryList, CountryCreate, CountryEdit, CountryShow} from './pages/country'
-import {CityList, CityCreate, CityEdit} from './pages/city'
+import {CityList, CityCreate, CityEdit, CityShow} from './pages/city'
-import {CarrierList, CarrierCreate, CarrierEdit} from './pages/carrier'
+import {CarrierList, CarrierCreate, CarrierEdit, CarrierShow} from './pages/carrier'
 import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media'
-import {ArticleList, ArticleCreate, ArticleEdit} from './pages/article'
+import {ArticleList, ArticleCreate, ArticleEdit, ArticleShow} from './pages/article'
 import {SightList, SightCreate, SightEdit} from './pages/sight'
 import {StationList, StationCreate, StationEdit} from './pages/station'
 import {VehicleList, VehicleCreate, VehicleEdit} from './pages/vehicle'
@@ -60,6 +60,7 @@ function App() {
                     list: '/city',
                     create: '/city/create',
                     edit: '/city/edit/:id',
+                    show: '/city/show/:id',
                     meta: {
                       canDelete: true,
                       label: 'Города',
@@ -71,6 +72,7 @@ function App() {
                     list: '/carrier',
                     create: '/carrier/create',
                     edit: '/carrier/edit/:id',
+                    show: '/carrier/show/:id',
                     meta: {
                       canDelete: true,
                       label: 'Перевозчики',
@@ -94,6 +96,7 @@ function App() {
                     list: '/article',
                     create: '/article/create',
                     edit: '/article/edit/:id',
+                    show: '/article/show/:id',
                     // добавить SHOW для article->media (https://wn.krbl.ru/article/2/media)
                     meta: {
                       canDelete: true,
@@ -181,12 +184,14 @@ function App() {
                       <Route index element={<CityList />} />
                       <Route path="create" element={<CityCreate />} />
                       <Route path="edit/:id" element={<CityEdit />} />
+                      <Route path="show/:id" element={<CityShow />} />
                     </Route>
 
                     <Route path="/carrier">
                       <Route index element={<CarrierList />} />
                       <Route path="create" element={<CarrierCreate />} />
                       <Route path="edit/:id" element={<CarrierEdit />} />
+                      <Route path="show/:id" element={<CarrierShow />} />
                     </Route>
 
                     <Route path="/media">
@@ -200,6 +205,7 @@ function App() {
                       <Route index element={<ArticleList />} />
                       <Route path="create" element={<ArticleCreate />} />
                       <Route path="edit/:id" element={<ArticleEdit />} />
+                      <Route path="show/:id" element={<ArticleShow />} />
                     </Route>
 
                     <Route path="/sight">

src/pages/article/index.ts

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

src/pages/article/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 ArticleList = () => {
@@ -41,13 +41,14 @@ export const ArticleList = () => {
         headerName: 'Actions',
         align: 'right',
         headerAlign: 'center',
-        minWidth: 100,
+        minWidth: 120,
         sortable: false,
         display: 'flex',
         renderCell: function render({row}) {
           return (
             <>
               <EditButton hideText recordItemId={row.id} />
+              <ShowButton hideText recordItemId={row.id} />
               <DeleteButton hideText recordItemId={row.id} />
             </>
           )

src/pages/article/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 ArticleShow = () => {
+  const {query} = useShow({})
+  const {data, isLoading} = query
+
+  const record = data?.data
+
+  const fields = [
+    {label: 'ID', data: 'id'},
+    {label: 'Heading', data: 'heading'},
+    {label: 'Body', data: 'body'},
+  ]
+
+  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>
+  )
+}

src/pages/carrier/index.ts

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

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

src/pages/carrier/show.tsx

@@ -0,0 +1,32 @@
+import {Stack, Typography} from '@mui/material'
+import {useShow} from '@refinedev/core'
+import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+
+export const CarrierShow = () => {
+  const {query} = useShow({})
+  const {data, isLoading} = query
+
+  const record = data?.data
+
+  const fields = [
+    {label: 'ID', data: 'id'},
+    {label: 'City ID', data: 'city_id'},
+    {label: 'Full Name', data: 'full_name'},
+    {label: 'Short Name', data: 'short_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>
+  )
+}

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