init /route route

src/pages/route/create.tsx

@@ -0,0 +1,59 @@
+import {Box, TextField, FormControlLabel, Checkbox} from '@mui/material'
+import {Create} from '@refinedev/mui'
+import {useForm} from '@refinedev/react-hook-form'
+import {Controller} from 'react-hook-form'
+
+export const RouteCreate = () => {
+  const {
+    saveButtonProps,
+    refineCore: {formLoading},
+    register,
+    control,
+    formState: {errors},
+  } = useForm({
+    refineCoreProps: {
+      resource: 'route/',
+    },
+  })
+
+  return (
+    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
+      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+        <TextField
+          {...register('carrier_id', {
+            required: 'This field is required',
+            valueAsNumber: true,
+          })}
+          error={!!(errors as any)?.carrier_id}
+          helperText={(errors as any)?.carrier_id?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="number"
+          label={'Carrier ID'}
+          name="carrier_id"
+        />
+        <TextField
+          {...register('route_number', {
+            required: 'This field is required',
+            setValueAs: (value) => String(value),
+          })}
+          error={!!(errors as any)?.route_number}
+          helperText={(errors as any)?.route_number?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="text"
+          label={'Route Number'}
+          name="route_number"
+        />
+        <Controller
+          name="route_direction" // boolean
+          control={control}
+          defaultValue={false}
+          render={({field}: {field: any}) => <FormControlLabel control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />} label="Route Direction" />}
+        />
+      </Box>
+    </Create>
+  )
+}

src/pages/route/edit.tsx

@@ -0,0 +1,54 @@
+import {Box, TextField, FormControlLabel, Checkbox} from '@mui/material'
+import {Edit} from '@refinedev/mui'
+import {useForm} from '@refinedev/react-hook-form'
+import {Controller} from 'react-hook-form'
+
+export const RouteEdit = () => {
+  const {
+    saveButtonProps,
+    register,
+    control,
+    formState: {errors},
+  } = useForm({})
+
+  return (
+    <Edit saveButtonProps={saveButtonProps}>
+      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+        <TextField
+          {...register('carrier_id', {
+            required: 'This field is required',
+            valueAsNumber: true,
+          })}
+          error={!!(errors as any)?.carrier_id}
+          helperText={(errors as any)?.carrier_id?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="number"
+          label={'Carrier ID'}
+          name="carrier_id"
+        />
+        <TextField
+          {...register('route_number', {
+            required: 'This field is required',
+            setValueAs: (value) => String(value),
+          })}
+          error={!!(errors as any)?.route_number}
+          helperText={(errors as any)?.route_number?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="text"
+          label={'Route Number'}
+          name="route_number"
+        />
+        <Controller
+          name="route_direction" // boolean
+          control={control}
+          defaultValue={false}
+          render={({field}: {field: any}) => <FormControlLabel control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />} label="Route Direction" />}
+        />
+      </Box>
+    </Edit>
+  )
+}

src/pages/route/index.ts

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

src/pages/route/list.tsx

@@ -0,0 +1,74 @@
+import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
+import React from 'react'
+
+export const RouteList = () => {
+  const {dataGridProps} = useDataGrid({
+    resource: 'route/',
+  })
+
+  const columns = React.useMemo<GridColDef[]>(
+    () => [
+      {
+        field: 'id',
+        headerName: 'ID',
+        type: 'number',
+        minWidth: 70,
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+      },
+      {
+        field: 'carrier_id',
+        headerName: 'Carrier ID',
+        type: 'number',
+        minWidth: 70,
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+      },
+      {
+        field: 'route_number',
+        headerName: 'Route Number',
+        type: 'string',
+        minWidth: 150,
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+      },
+      {
+        field: 'route_direction',
+        headerName: 'Route Direction',
+        type: 'boolean',
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+        flex: 1,
+      },
+      {
+        field: 'actions',
+        headerName: 'Actions',
+        align: 'right',
+        headerAlign: 'center',
+        minWidth: 100,
+        sortable: false,
+        display: 'flex',
+        renderCell: function render({row}) {
+          return (
+            <>
+              <EditButton hideText recordItemId={row.id} />
+              <DeleteButton hideText recordItemId={row.id} />
+            </>
+          )
+        },
+      },
+    ],
+    [],
+  )
+
+  return (
+    <List>
+      <DataGrid {...dataGridProps} columns={columns} getRowId={(row: any) => row.id} />
+    </List>
+  )
+}