[2] add show page for other routes

src/App.tsx

@@ -21,10 +21,10 @@ import {CityList, CityCreate, CityEdit, CityShow} from './pages/city'
 import {CarrierList, CarrierCreate, CarrierEdit, CarrierShow} from './pages/carrier'
 import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media'
 import {ArticleList, ArticleCreate, ArticleEdit, ArticleShow} from './pages/article'
-import {SightList, SightCreate, SightEdit} from './pages/sight'
+import {SightList, SightCreate, SightEdit, SightShow} from './pages/sight'
-import {StationList, StationCreate, StationEdit} from './pages/station'
+import {StationList, StationCreate, StationEdit, StationShow} from './pages/station'
-import {VehicleList, VehicleCreate, VehicleEdit} from './pages/vehicle'
+import {VehicleList, VehicleCreate, VehicleEdit, VehicleShow} from './pages/vehicle'
-import {RouteList, RouteCreate, RouteEdit} from './pages/route'
+import {RouteList, RouteCreate, RouteEdit, RouteShow} from './pages/route'
 
 import {CountryIcon, CityIcon, CarrierIcon, MediaIcon, ArticleIcon, SightIcon, StationIcon, VehicleIcon, RouteIcon} from './components/ui/Icons'
 import {BACKEND_URL} from './lib/constants'
@@ -109,6 +109,7 @@ function App() {
                     list: '/sight',
                     create: '/sight/create',
                     edit: '/sight/edit/:id',
+                    show: '/sight/show/:id',
                     // добавить SHOW для sight->article (https://wn.krbl.ru/sight/2/article)
                     meta: {
                       canDelete: true,
@@ -121,6 +122,7 @@ function App() {
                     list: '/station',
                     create: '/station/create',
                     edit: '/station/edit/:id',
+                    show: '/station/show/:id',
                     // добавить SHOW для station->sight (https://wn.krbl.ru/station/2/sight)
                     meta: {
                       canDelete: true,
@@ -133,6 +135,7 @@ function App() {
                     list: '/vehicle',
                     create: '/vehicle/create',
                     edit: '/vehicle/edit/:id',
+                    show: '/vehicle/show/:id',
                     // добавить SHOW для vehicle->routes (https://wn.krbl.ru/vehicle/routes?id=1)
                     meta: {
                       canDelete: true,
@@ -145,6 +148,7 @@ function App() {
                     list: '/route',
                     create: '/route/create',
                     edit: '/route/edit/:id',
+                    show: '/route/show/:id',
                     // добавить SHOW для route->station (https://wn.krbl.ru/route/station)
                     // добавить SHOW для route->vehicle (https://wn.krbl.ru/route/vehicle)
                     meta: {
@@ -212,24 +216,28 @@ function App() {
                       <Route index element={<SightList />} />
                       <Route path="create" element={<SightCreate />} />
                       <Route path="edit/:id" element={<SightEdit />} />
+                      <Route path="show/:id" element={<SightShow />} />
                     </Route>
 
                     <Route path="/station">
                       <Route index element={<StationList />} />
                       <Route path="create" element={<StationCreate />} />
                       <Route path="edit/:id" element={<StationEdit />} />
+                      <Route path="show/:id" element={<StationShow />} />
                     </Route>
 
                     <Route path="/vehicle">
                       <Route index element={<VehicleList />} />
                       <Route path="create" element={<VehicleCreate />} />
                       <Route path="edit/:id" element={<VehicleEdit />} />
+                      <Route path="show/:id" element={<VehicleShow />} />
                     </Route>
 
                     <Route path="/route">
                       <Route index element={<RouteList />} />
                       <Route path="create" element={<RouteCreate />} />
                       <Route path="edit/:id" element={<RouteEdit />} />
+                      <Route path="show/:id" element={<RouteShow />} />
                     </Route>
 
                     <Route path="*" element={<ErrorComponent />} />

src/pages/route/index.ts

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

src/pages/route/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 RouteList = () => {
@@ -50,13 +50,14 @@ export const RouteList = () => {
         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/route/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 RouteShow = () => {
+  const {query} = useShow({})
+  const {data, isLoading} = query
+
+  const record = data?.data
+
+  const fields = [
+    {label: 'ID', data: 'id'},
+    {label: 'Carrier ID', data: 'carrier_id'},
+    {label: 'Route Number', data: 'route_number'},
+    {label: 'Route Direction', data: 'route_direction'},
+  ]
+
+  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/sight/index.ts

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

src/pages/sight/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 SightList = () => {
@@ -60,13 +60,14 @@ export const SightList = () => {
         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/sight/show.tsx

@@ -0,0 +1,33 @@
+import {Stack, Typography} from '@mui/material'
+import {useShow} from '@refinedev/core'
+import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+
+export const SightShow = () => {
+  const {query} = useShow({})
+  const {data, isLoading} = query
+
+  const record = data?.data
+
+  const fields = [
+    {label: 'ID', data: 'id'},
+    {label: 'Name', data: 'name'},
+    {label: 'Latitude', data: 'latitude'},
+    {label: 'Longitude', data: 'longitude'},
+    {label: 'City ID', data: 'city_id'},
+  ]
+
+  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/station/index.ts

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

src/pages/station/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 StationList = () => {
@@ -59,13 +59,14 @@ export const StationList = () => {
         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/station/show.tsx

@@ -0,0 +1,33 @@
+import {Stack, Typography} from '@mui/material'
+import {useShow} from '@refinedev/core'
+import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+
+export const StationShow = () => {
+  const {query} = useShow({})
+  const {data, isLoading} = query
+
+  const record = data?.data
+
+  const fields = [
+    {label: 'ID', data: 'id'},
+    {label: 'Name', data: 'name'},
+    {label: 'Latitude', data: 'latitude'},
+    {label: 'Longitude', data: 'longitude'},
+    {label: 'Description', data: 'description'},
+  ]
+
+  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/vehicle/index.ts

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

src/pages/vehicle/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 VehicleList = () => {
@@ -49,13 +49,14 @@ export const VehicleList = () => {
         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/vehicle/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 VehicleShow = () => {
+  const {query} = useShow({})
+  const {data, isLoading} = query
+
+  const record = data?.data
+
+  const fields = [
+    {label: 'ID', data: 'id'},
+    {label: 'Tail Number', data: 'tail_number'},
+    {label: 'Type', data: 'type'},
+    {label: 'City_id', data: 'city_id'},
+  ]
+
+  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>
+  )
+}