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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 6x 6x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x | /**
* @file LowStockStatusCell.tsx
* @description
* Renders the status column cell for a low stock item with color-coded chip.
* Handles critical/warning/ok states with theme colors.
*/
import { Chip } from '@mui/material';
import { useTranslation } from 'react-i18next';
import type { LowStockStatus } from './LowStockTable.types';
/**
* Props for LowStockStatusCell
*/
export interface LowStockStatusCellProps {
deficit: number;
}
/**
* Determine status level based on deficit
* @internal
*/
function getStatus(deficit: number): LowStockStatus {
if (deficit >= 5) return 'critical';
if (deficit > 0) return 'warning';
return 'ok';
}
/**
* Status cell component for low stock table
* @param deficit - The stock deficit amount
* @returns Chip component with appropriate color and label
*/
export function LowStockStatusCell({ deficit }: LowStockStatusCellProps) {
const { t } = useTranslation(['analytics']);
const status = getStatus(deficit);
const colorMap: Record<LowStockStatus, 'error' | 'warning' | 'success'> = {
critical: 'error',
warning: 'warning',
ok: 'success',
};
const labelMap: Record<LowStockStatus, string> = {
critical: t('analytics:lowStock.status.critical', 'Critical'),
warning: t('analytics:lowStock.status.warning', 'Warning'),
ok: t('analytics:lowStock.status.ok', 'OK'),
};
return <Chip size="small" color={colorMap[status]} label={labelMap[status]} />;
}
|