Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 3x 3x | import React from 'react';
import { useTranslation } from 'react-i18next';
import { type StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
import {
DataTable,
Table,
TableBody,
TableContainer,
TableHead,
TableHeader,
TableRow,
TableCell,
DataTableSkeleton,
Button,
} from '@carbon/react';
import styles from './stock-operation-items-form-step.scc.scss';
import { ArrowLeft } from '@carbon/react/icons';
const formatDate = (date: Date | string | null) => {
if (!date) return ' ';
const d = new Date(date);
const day = String(d.getDate()).padStart(2, '0');
const month = String(d.getMonth() + 1).padStart(2, '0');
const year = d.getFullYear();
return `${month}/${day}/${year}`;
};
interface ReceivedItemsProps {
stockOperation?: StockOperationDTO;
onPrevious?: () => void;
}
const ReceivedItems: React.FC<ReceivedItemsProps> = ({ stockOperation, onPrevious }) => {
const { t } = useTranslation();
const headers = [
{ key: 'item', header: t('item', 'Item') },
{ key: 'requested', header: t('requested', 'Requested') },
{ key: 'batch', header: t('batch', 'Batch No') },
{ key: 'expiry', header: t('expiry', 'Expiry') },
{ key: 'qtySent', header: t('quantitySent', 'Quantity Sent') },
{ key: 'qtyReceived', header: t('quantityReceived', 'Quantity Received') },
{
key: 'qtyUoM',
header: t('quantityUoM', 'Quantity Unit of Measurement(UoM)'),
},
];
const rows =
stockOperation?.stockOperationItems?.map((item) => ({
id: item.uuid,
item: item.stockItemName,
requested: item.quantityRequested || ' ',
batch: item.batchNo,
expiry: formatDate(item.expiration),
qtySent: item.quantity || ' ',
qtyReceived: item.quantityReceived || ' ',
qtyUoM: item.quantityReceivedPackagingUOMName,
})) || [];
if (!stockOperation) {
return <DataTableSkeleton role="progressbar" />;
}
const headerTitle = t('receivedItems', 'Received Items');
return (
<div style={{ margin: '10px' }}>
<div className={styles.tableContainer}>
<div className={styles.heading}>
<h4>{headerTitle}</h4>
</div>
<DataTable rows={rows} headers={headers}>
{({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
<TableContainer>
<Table {...getTableProps()}>
<TableHead>
<TableRow>
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header })} key={header.key}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow {...getRowProps({ row })} key={row.id}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>{cell.value}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</DataTable>
<div className={styles.btnSet}>
{typeof onPrevious === 'function' && (
<Button
data-testid="previous-btn"
hasIconOnly
iconDescription={t('previousButton', 'Previous')}
kind="secondary"
onClick={onPrevious}
renderIcon={ArrowLeft}
/>
)}
</div>
</div>
</div>
);
};
export default ReceivedItems;
|