| New file | 
|  |  |  | 
|---|
|  |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
|---|
|  |  |  | import { Box, Card, CardContent, Grid, Typography, Tooltip } from '@mui/material'; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | useTranslate, | 
|---|
|  |  |  | useRecordContext, | 
|---|
|  |  |  | } from 'react-admin'; | 
|---|
|  |  |  | import PanelTypography from "../components/PanelTypography"; | 
|---|
|  |  |  | import * as Common from '@/utils/common' | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const StockItemPanel = () => { | 
|---|
|  |  |  | const record = useRecordContext(); | 
|---|
|  |  |  | if (!record) return null; | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <> | 
|---|
|  |  |  | <Card sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: 'auto' }}> | 
|---|
|  |  |  | <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.stockItem.id'))}: {record.id} | 
|---|
|  |  |  | </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.stockItem.stockId" | 
|---|
|  |  |  | property={record.stockId} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.stockCode" | 
|---|
|  |  |  | property={record.stockCode} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.sourceItemId" | 
|---|
|  |  |  | property={record.sourceItemId} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.matnrId" | 
|---|
|  |  |  | property={record.matnrId} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.matnrCode" | 
|---|
|  |  |  | property={record.matnrCode} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.maktx" | 
|---|
|  |  |  | property={record.maktx} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.anfme" | 
|---|
|  |  |  | property={record.anfme} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.stockUnit" | 
|---|
|  |  |  | property={record.stockUnit} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.workQty" | 
|---|
|  |  |  | property={record.workQty} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.purQty" | 
|---|
|  |  |  | property={record.purQty} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.purUnit" | 
|---|
|  |  |  | property={record.purUnit} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.qty" | 
|---|
|  |  |  | property={record.qty} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.splrCode" | 
|---|
|  |  |  | property={record.splrCode} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.batch" | 
|---|
|  |  |  | property={record.batch} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.splrBatch" | 
|---|
|  |  |  | property={record.splrBatch} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.splrName" | 
|---|
|  |  |  | property={record.splrName} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.trackCode" | 
|---|
|  |  |  | property={record.trackCode} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.barcode" | 
|---|
|  |  |  | property={record.barcode} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.prodTime" | 
|---|
|  |  |  | property={record.prodTime} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={6}> | 
|---|
|  |  |  | <PanelTypography | 
|---|
|  |  |  | title="table.field.stockItem.packName" | 
|---|
|  |  |  | property={record.packName} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </CardContent> | 
|---|
|  |  |  | </Card > | 
|---|
|  |  |  | </> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default StockItemPanel; | 
|---|