|  |  | 
 |  |  |     const record = useRecordContext(); | 
 |  |  |     if (!record) return null; | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  |     const getDirectionDesc = (direction) => { | 
 |  |  |         switch (direction) { | 
 |  |  |             case 0: | 
 |  |  |                 return translate('page.route.enums.direction.unordered'); | 
 |  |  |             case 1: | 
 |  |  |                 return translate('page.route.enums.direction.forward'); | 
 |  |  |             case 2: | 
 |  |  |                 return translate('page.route.enums.direction.reverse'); | 
 |  |  |             default: | 
 |  |  |                 return ''; | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |             <Card sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: 'auto' }}> | 
 |  |  | 
 |  |  |                     <Grid container spacing={2}> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.route.uuid"  | 
 |  |  |                                 title="table.field.route.uuid" | 
 |  |  |                                 property={record.uuid} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.route.name"  | 
 |  |  |                                 title="table.field.route.name" | 
 |  |  |                                 property={record.name} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.route.startCode"  | 
 |  |  |                                 title="table.field.route.startCode" | 
 |  |  |                                 property={record.startCode$} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.route.endCode"  | 
 |  |  |                                 title="table.field.route.endCode" | 
 |  |  |                                 property={record.endCode$} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.route.codeArr"  | 
 |  |  |                                 title="table.field.route.codeArr" | 
 |  |  |                                 property={record.codeArr} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.route.codeDataArr"  | 
 |  |  |                                 title="table.field.route.codeDataArr" | 
 |  |  |                                 property={record.codeDataArr} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.route.direction"  | 
 |  |  |                                 property={record.direction$} | 
 |  |  |                                 title="table.field.route.direction" | 
 |  |  |                                 property={getDirectionDesc(record.direction)} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |  |