53 lines
2.3 KiB
TypeScript
53 lines
2.3 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
|
|
import type { LowStockItem } from '../../api/dashboardApi';
|
|
import { formatQuantity } from '../../utils/formatters';
|
|
import { Card } from '../ui/Card';
|
|
import { EmptyState } from '../ui/EmptyState';
|
|
|
|
type LowStockTableProps = {
|
|
items: LowStockItem[];
|
|
};
|
|
|
|
export function LowStockTable({ items }: LowStockTableProps) {
|
|
return (
|
|
<Card className="border-amber-200 p-4">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<h2 className="text-base font-semibold text-slate-900">Низкие остатки</h2>
|
|
<Link to="/warehouse/stock-balances" className="text-sm font-medium text-slate-600 hover:text-slate-950">
|
|
Остатки
|
|
</Link>
|
|
</div>
|
|
|
|
{items.length === 0 ? (
|
|
<EmptyState title="Низких остатков нет" description="Текущие остатки выше порога панели управления." />
|
|
) : (
|
|
<div className="mt-4 overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-slate-200 text-sm">
|
|
<thead className="bg-slate-100">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left font-semibold text-slate-700">Склад</th>
|
|
<th className="px-4 py-3 text-left font-semibold text-slate-700">Товар</th>
|
|
<th className="px-4 py-3 text-right font-semibold text-slate-700">Количество</th>
|
|
<th className="px-4 py-3 text-right font-semibold text-slate-700">Порог</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
{items.map((item) => (
|
|
<tr key={`${item.warehouseId}-${item.productId}`} className="bg-amber-50/40">
|
|
<td className="px-4 py-3 text-slate-700">{item.warehouseCode} / {item.warehouseName}</td>
|
|
<td className="px-4 py-3 text-slate-700">{item.productSku} / {item.productName}</td>
|
|
<td className="px-4 py-3 text-right text-slate-700">
|
|
{formatQuantity(item.quantityOnHand)} {item.unit}
|
|
</td>
|
|
<td className="px-4 py-3 text-right text-slate-700">{formatQuantity(item.threshold)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|