|  |  | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |             <Card sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: 'auto' }}> | 
 |  |  |             <Card > | 
 |  |  |                 <CardContent> | 
 |  |  |                     <Grid container spacing={2}> | 
 |  |  |                         <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between' }}> | 
 |  |  |                             <Typography variant="h6" gutterBottom align="left" sx={{ | 
 |  |  |                                 maxWidth: { xs: '100px', sm: '180px', md: '260px', lg: '360px' }, | 
 |  |  |                                 whiteSpace: 'nowrap', | 
 |  |  |                                 overflow: 'hidden', | 
 |  |  |                                 textOverflow: 'ellipsis', | 
 |  |  |                             }}> | 
 |  |  |                                 {Common.camelToPascalWithSpaces(translate('table.field.locAreaMatRela.areaId'))}: {record.areaId} | 
 |  |  |                             </Typography> | 
 |  |  |                             {/*  inherit, primary, secondary, textPrimary, textSecondary, error */} | 
 |  |  |                             <Typography variant="h6" gutterBottom align="right" > | 
 |  |  |                                 ID: {record.id} | 
 |  |  |                             </Typography> | 
 |  |  |                         </Grid> | 
 |  |  |                     </Grid> | 
 |  |  |                     <Grid container spacing={2}> | 
 |  |  |                         <Grid item xs={12} container alignContent="flex-end"> | 
 |  |  |                             <Typography variant="caption" color="textSecondary" sx={{ wordWrap: 'break-word', wordBreak: 'break-all' }}> | 
 |  |  |                                 {Common.camelToPascalWithSpaces(translate('common.field.memo'))}:{record.memo} | 
 |  |  |                             </Typography> | 
 |  |  |                         </Grid> | 
 |  |  |                     </Grid> | 
 |  |  |                     <Box height={20}> </Box> | 
 |  |  |                     <Grid container spacing={2}> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.locAreaMatRela.areaId" | 
 |  |  |                                 property={record.areaId} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.locAreaMatRela.code" | 
 |  |  |                                 property={record.code} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.locAreaMatRela.matnrId" | 
 |  |  |                                 property={record.matnrId} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.locAreaMatRela.groupId" | 
 |  |  |                                 property={record.groupId} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.locAreaMatRela.locTypeId" | 
 |  |  |                                 property={record.locTypeId} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                         <Grid item xs={6}> | 
 |  |  |                             <PanelTypography | 
 |  |  |                                 title="table.field.locAreaMatRela.locId" | 
 |  |  |                                 property={record.locId} | 
 |  |  |                             /> | 
 |  |  |                         </Grid> | 
 |  |  |                     <Grid container spacing={2}>1</Grid> | 
 |  |  |                     <Grid container spacing={2}>1</Grid> | 
 |  |  |                     <Grid container spacing={2}>1</Grid> | 
 |  |  |  | 
 |  |  |                     </Grid> | 
 |  |  |                 </CardContent> | 
 |  |  |                 </CardContent > | 
 |  |  |             </Card > | 
 |  |  |         </> | 
 |  |  |     ); |