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 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | 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 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 1x 1x 1x 1x 1x 1x 8x 8x 9x 5x 5x 3x 3x 9x 1x 1x 1x 1x 1x 1x 2x 2x 9x 9x 5x 5x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x | /**
* @file LowStockTable.tsx
* @module pages/analytics/blocks/low-stock
*
* @description
* Low stock items table for a selected supplier.
* Shows item name, current qty, minimum threshold, deficit, and status.
* Query is disabled when no supplierId is provided (React Query `enabled` flag).
*
* @remarks
* - Data source: `GET /api/analytics/low-stock-items?supplierId=...&from=...&to=...`
* - Compounds deficit = max(0, minimum - current) and sorts by severity
* - Shows max N items; displays count if limited
* - Responsive with sticky header and horizontal scroll on small screens
*
* @i18n
* Uses 'analytics' namespace for all translation keys
*/
import type { JSX } from 'react';
import {
Box,
Typography,
Skeleton,
Table,
TableContainer,
Paper,
} from '@mui/material';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { getLowStockItems, type LowStockRow } from '../../../../api/analytics';
import { useSettings } from '../../../../hooks/useSettings';
import { LowStockTableHeader } from './LowStockTableHeader';
import { LowStockTableRows } from './LowStockTableRows';
import type { LowStockTableProps, LowStockRowWithDeficit } from './LowStockTable.types';
import { narrowParams } from './LowStockTable.types';
/**
* Low stock table component
* Displays items at/below minimum quantity for a supplier with deficit metrics
*
* @example
* ```tsx
* <LowStockTable supplierId="sup-123" from="2025-06-01" to="2025-09-15" limit={12} />
* ```
*/
export default function LowStockTable(props: LowStockTableProps): JSX.Element {
const { supplierId, from, to, limit = 12 } = props;
const { t } = useTranslation(['analytics', 'common']);
const { userPreferences } = useSettings();
// Gate query by supplierId (enabled flag prevents hook calls)
const enabled = Boolean(supplierId);
// Fetch low stock items with supplier and date filtering
const q = useQuery<LowStockRow[], Error>({
queryKey: ['analytics', 'lowStock', supplierId, from ?? null, to ?? null],
queryFn: () => getLowStockItems(supplierId, narrowParams({ from, to })),
enabled,
staleTime: 60_000,
});
// Supplier not selected: show hint
if (!enabled) {
return (
<Box sx={{ height: 220, display: 'grid', placeItems: 'center', color: 'text.secondary' }}>
{t('analytics:selectSupplier', 'Select a supplier to see low stock')}
</Box>
);
}
// Loading: show skeleton
if (q.isLoading) {
return <Skeleton variant="rounded" height={220} />;
}
// Error: show message
if (q.isError) {
return (
<Box sx={{ height: 220, display: 'grid', placeItems: 'center', color: 'text.secondary' }}>
{t('common:error', 'Error')}
</Box>
);
}
// Compute deficits and sort by severity (highest first)
const rows: LowStockRowWithDeficit[] = (q.data ?? [])
.map((r) => ({
...r,
deficit: Math.max(0, (r.minimumQuantity ?? 0) - (r.quantity ?? 0)),
}))
// Keep only truly low stock items (deficit > 0 or quantity <= minimum)
.filter((r) => r.deficit > 0 || (r.quantity ?? 0) <= (r.minimumQuantity ?? 0))
.sort((a, b) => b.deficit - a.deficit);
// Apply limit if specified
const visible = limit > 0 ? rows.slice(0, limit) : rows;
// No low stock items: show message
if (visible.length === 0) {
return (
<Box sx={{ height: 220, display: 'grid', placeItems: 'center', color: 'text.secondary' }}>
{t('analytics:lowStock.noneForSupplier', 'No items below minimum for this supplier')}
</Box>
);
}
return (
<TableContainer
component={Paper}
variant="outlined"
sx={{
maxHeight: 360,
overflowX: 'auto',
pr: 1,
}}
>
<Table
size="small"
stickyHeader
sx={{
minWidth: 640,
tableLayout: 'fixed',
}}
>
<LowStockTableHeader />
<LowStockTableRows rows={visible} numberFormat={userPreferences.numberFormat} />
</Table>
{/* Show count if results are limited */}
{limit > 0 && rows.length > limit && (
<Box sx={{ p: 1.5, color: 'text.secondary' }}>
<Typography variant="caption">
{t('analytics:lowStock.shownNOfM', 'Showing {{n}} of {{m}} items', {
n: visible.length,
m: rows.length,
})}
</Typography>
</Box>
)}
</TableContainer>
);
}
|