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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 21x 18x 21x 4x 4x 4x 4x 4x 4x 7x 7x 7x 3x 4x 2x 2x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 4x 4x 4x 4x | /**
* @file LowStockTableRows.tsx
* @description
* Body rows component for low stock table.
* Renders individual items with formatting and status indicators.
*/
import { TableBody, TableRow, TableCell } from '@mui/material';
import { useTheme as useMuiTheme } from '@mui/material/styles';
import { useCallback } from 'react';
import { formatNumber } from '../../../../utils/formatters';
import { LowStockStatusCell } from './LowStockStatusCell';
import type { LowStockRowWithDeficit } from './LowStockTable.types';
/**
* Props for LowStockTableRows
*/
export interface LowStockTableRowsProps {
rows: LowStockRowWithDeficit[];
numberFormat: 'DE' | 'EN_US';
}
/**
* Table body component rendering low stock items
* @param rows - Processed rows with computed deficits
* @param numberFormat - Number formatting preference
*/
export function LowStockTableRows({ rows, numberFormat }: LowStockTableRowsProps) {
const muiTheme = useMuiTheme();
// Format quantity/minimum/deficit with user preferences
const formatQty = useCallback(
(value: number | undefined | null): string => {
if (typeof value !== 'number' || Number.isNaN(value)) return formatNumber(0, numberFormat, 0);
return formatNumber(value, numberFormat, 0);
},
[numberFormat]
);
return (
<TableBody>
{rows.map((row) => {
const critical = row.deficit >= 5;
const warning = row.deficit > 0 && row.deficit < 5;
const deficitColor = critical
? muiTheme.palette.error.main
: warning
? muiTheme.palette.warning.main
: muiTheme.palette.text.primary;
return (
<TableRow key={row.itemName}>
<TableCell
component="th"
scope="row"
sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
>
{row.itemName}
</TableCell>
<TableCell align="right">{formatQty(row.quantity)}</TableCell>
<TableCell align="right">{formatQty(row.minimumQuantity)}</TableCell>
<TableCell align="right" sx={{ fontWeight: 600, color: deficitColor }}>
{formatQty(row.deficit)}
</TableCell>
<TableCell align="left" sx={{ whiteSpace: 'nowrap' }}>
<LowStockStatusCell deficit={row.deficit} />
</TableCell>
</TableRow>
);
})}
</TableBody>
);
}
|