244 lines
9.2 KiB
TypeScript
244 lines
9.2 KiB
TypeScript
/**
|
||
* 庫存表格元件
|
||
* 顯示庫存項目列表（依商品分類並支援折疊）
|
||
*/
|
||
|
||
import { useState } from "react";
|
||
import { AlertTriangle, Edit, ChevronDown, ChevronRight, CheckCircle, Package } from "lucide-react";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/Components/ui/table";
|
||
import { Button } from "@/Components/ui/button";
|
||
import { Badge } from "@/Components/ui/badge";
|
||
import {
|
||
Collapsible,
|
||
CollapsibleContent,
|
||
CollapsibleTrigger,
|
||
} from "@/Components/ui/collapsible";
|
||
import { WarehouseInventory, SafetyStockSetting } from "@/types/warehouse";
|
||
import { calculateProductTotalStock, getSafetyStockStatus } from "@/utils/inventory";
|
||
import { formatDate } from "@/utils/format";
|
||
|
||
export type InventoryItemWithId = WarehouseInventory & { inventoryId: string };
|
||
|
||
// 商品群組型別（包含有庫存和沒庫存的情況）
|
||
export interface ProductGroup {
|
||
productId: string;
|
||
productName: string;
|
||
items: InventoryItemWithId[]; // 可能是空陣列（沒有庫存）
|
||
safetySetting?: SafetyStockSetting;
|
||
}
|
||
|
||
interface InventoryTableProps {
|
||
productGroups: ProductGroup[];
|
||
onEdit: (inventoryId: string) => void;
|
||
}
|
||
|
||
export default function InventoryTable({
|
||
productGroups,
|
||
onEdit,
|
||
}: InventoryTableProps) {
|
||
// 每個商品的展開/折疊狀態
|
||
const [expandedProducts, setExpandedProducts] = useState<Set<string>>(new Set());
|
||
|
||
if (productGroups.length === 0) {
|
||
return (
|
||
<div className="text-center py-12 text-gray-400">
|
||
<p>無符合條件的品項</p>
|
||
<p className="text-sm mt-1">請調整搜尋或篩選條件</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 按商品名稱排序
|
||
const sortedProductGroups = [...productGroups].sort((a, b) =>
|
||
a.productName.localeCompare(b.productName, "zh-TW")
|
||
);
|
||
|
||
const toggleProduct = (productId: string) => {
|
||
setExpandedProducts((prev) => {
|
||
const newSet = new Set(prev);
|
||
if (newSet.has(productId)) {
|
||
newSet.delete(productId);
|
||
} else {
|
||
newSet.add(productId);
|
||
}
|
||
return newSet;
|
||
});
|
||
};
|
||
|
||
// 獲取狀態徽章
|
||
const getStatusBadge = (status: string) => {
|
||
switch (status) {
|
||
case "正常":
|
||
return (
|
||
<Badge className="bg-green-100 text-green-700 border-green-300">
|
||
<CheckCircle className="mr-1 h-3 w-3" />
|
||
正常
|
||
</Badge>
|
||
);
|
||
case "接近":
|
||
return (
|
||
<Badge className="bg-yellow-100 text-yellow-700 border-yellow-300">
|
||
<AlertTriangle className="mr-1 h-3 w-3" />
|
||
接近
|
||
</Badge>
|
||
);
|
||
case "低於":
|
||
return (
|
||
<Badge className="bg-red-100 text-red-700 border-red-300">
|
||
<AlertTriangle className="mr-1 h-3 w-3" />
|
||
低於
|
||
</Badge>
|
||
);
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-4 p-4">
|
||
{sortedProductGroups.map((group) => {
|
||
const totalQuantity = group.items.reduce(
|
||
(sum, item) => sum + item.quantity,
|
||
0
|
||
);
|
||
|
||
// 計算安全庫存狀態
|
||
const status = group.safetySetting
|
||
? getSafetyStockStatus(totalQuantity, group.safetySetting.safetyStock)
|
||
: null;
|
||
|
||
const isLowStock = status === "低於";
|
||
const isExpanded = expandedProducts.has(group.productId);
|
||
const hasInventory = group.items.length > 0;
|
||
|
||
return (
|
||
<Collapsible
|
||
key={group.productId}
|
||
open={isExpanded}
|
||
onOpenChange={() => toggleProduct(group.productId)}
|
||
>
|
||
<div className="border rounded-lg overflow-hidden">
|
||
{/* 商品標題 - 可點擊折疊 */}
|
||
<CollapsibleTrigger asChild>
|
||
<div
|
||
className={`px-4 py-3 border-b cursor-pointer hover:bg-gray-100 transition-colors ${
|
||
isLowStock ? "bg-red-50" : "bg-gray-50"
|
||
}`}
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
{/* 折疊圖示 */}
|
||
{isExpanded ? (
|
||
<ChevronDown className="h-5 w-5 text-gray-600" />
|
||
) : (
|
||
<ChevronRight className="h-5 w-5 text-gray-600" />
|
||
)}
|
||
<h3 className="font-semibold text-gray-900">{group.productName}</h3>
|
||
<span className="text-sm text-gray-500">
|
||
{hasInventory ? `${group.items.length} 個批號` : '無庫存'}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<div className="text-sm">
|
||
<span className="text-gray-600">
|
||
總庫存：<span className={`font-medium ${isLowStock ? "text-red-600" : "text-gray-900"}`}>{totalQuantity} 個</span>
|
||
</span>
|
||
</div>
|
||
{group.safetySetting && (
|
||
<>
|
||
<div className="text-sm">
|
||
<span className="text-gray-600">
|
||
安全庫存：<span className="font-medium text-gray-900">{group.safetySetting.safetyStock} 個</span>
|
||
</span>
|
||
</div>
|
||
<div>
|
||
{status && getStatusBadge(status)}
|
||
</div>
|
||
</>
|
||
)}
|
||
{!group.safetySetting && (
|
||
<Badge variant="outline" className="text-gray-500">
|
||
未設定
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CollapsibleTrigger>
|
||
|
||
{/* 商品表格 - 可折疊內容 */}
|
||
<CollapsibleContent>
|
||
{hasInventory ? (
|
||
<div className="overflow-x-auto">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead className="w-[5%]">#</TableHead>
|
||
<TableHead className="w-[12%]">批號</TableHead>
|
||
<TableHead className="w-[12%]">庫存數量</TableHead>
|
||
<TableHead className="w-[15%]">進貨編號</TableHead>
|
||
<TableHead className="w-[14%]">保存期限</TableHead>
|
||
<TableHead className="w-[14%]">最新入庫</TableHead>
|
||
<TableHead className="w-[14%]">最新出庫</TableHead>
|
||
<TableHead className="w-[8%] text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{group.items.map((item, index) => {
|
||
return (
|
||
<TableRow key={item.inventoryId}>
|
||
<TableCell className="text-grey-2">{index + 1}</TableCell>
|
||
<TableCell>{item.batchNumber || "-"}</TableCell>
|
||
<TableCell>
|
||
<span>{item.quantity}</span>
|
||
</TableCell>
|
||
<TableCell>{item.batchNumber || "-"}</TableCell>
|
||
<TableCell>
|
||
{item.expiryDate ? formatDate(item.expiryDate) : "-"}
|
||
</TableCell>
|
||
<TableCell>
|
||
{item.lastInboundDate ? formatDate(item.lastInboundDate) : "-"}
|
||
</TableCell>
|
||
<TableCell>
|
||
{item.lastOutboundDate ? formatDate(item.lastOutboundDate) : "-"}
|
||
</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => onEdit(item.inventoryId)}
|
||
className="hover:bg-primary/10 hover:text-primary"
|
||
>
|
||
<Edit className="h-4 w-4 mr-1" />
|
||
編輯
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
);
|
||
})}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
) : (
|
||
<div className="px-4 py-8 text-center text-gray-400 bg-gray-50">
|
||
<Package className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
||
<p className="text-sm">此商品尚無庫存批號</p>
|
||
<p className="text-xs mt-1">請點擊「新增庫存」進行入庫</p>
|
||
</div>
|
||
)}
|
||
</CollapsibleContent>
|
||
</div>
|
||
</Collapsible>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
} |