33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
/**
|
|
* 庫存統計資訊元件
|
|
*/
|
|
|
|
interface InventoryStatsProps {
|
|
totalItems: number;
|
|
totalQuantity: number;
|
|
lowStockItems: number;
|
|
}
|
|
|
|
export default function InventoryStats({
|
|
totalItems,
|
|
totalQuantity,
|
|
lowStockItems,
|
|
}: InventoryStatsProps) {
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="bg-white p-4 rounded-lg border shadow-sm">
|
|
<p className="text-sm text-gray-500">在庫品項</p>
|
|
<p className="text-2xl font-bold">{totalItems} 項</p>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg border shadow-sm">
|
|
<p className="text-sm text-gray-500">在庫總量</p>
|
|
<p className="text-2xl font-bold">{totalQuantity.toLocaleString()} 個</p>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg border shadow-sm">
|
|
<p className="text-sm text-gray-500 font-medium text-red-600">低庫存告警</p>
|
|
<p className="text-2xl font-bold text-red-600">{lowStockItems} 項</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|