301 lines
13 KiB
TypeScript
301 lines
13 KiB
TypeScript
|
/**
|
|||
|
|
* 庫存表格元件 (扁平化列表版)
|
|||
|
|
* 顯示庫存項目列表，不進行折疊分組
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { useState, useMemo } from "react";
|
|||
|
|
import {
|
|||
|
|
AlertTriangle,
|
|||
|
|
Trash2,
|
|||
|
|
Eye,
|
|||
|
|
CheckCircle,
|
|||
|
|
Package,
|
|||
|
|
ArrowUpDown,
|
|||
|
|
ArrowUp,
|
|||
|
|
ArrowDown
|
|||
|
|
} 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 { WarehouseInventory } from "@/types/warehouse";
|
|||
|
|
import { getSafetyStockStatus } from "@/utils/inventory";
|
|||
|
|
import { formatDate } from "@/utils/format";
|
|||
|
|
|
|||
|
|
interface InventoryTableProps {
|
|||
|
|
inventories: WarehouseInventory[];
|
|||
|
|
onView: (id: string) => void;
|
|||
|
|
onDelete: (id: string) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type SortField = "productName" | "quantity" | "lastInboundDate" | "lastOutboundDate" | "safetyStock" | "status";
|
|||
|
|
type SortDirection = "asc" | "desc" | null;
|
|||
|
|
|
|||
|
|
export default function InventoryTable({
|
|||
|
|
inventories,
|
|||
|
|
onView,
|
|||
|
|
onDelete,
|
|||
|
|
}: InventoryTableProps) {
|
|||
|
|
const [sortField, setSortField] = useState<SortField | null>("status");
|
|||
|
|
const [sortDirection, setSortDirection] = useState<SortDirection>("asc"); // "asc" for status means Priority High (Low Stock) first
|
|||
|
|
|
|||
|
|
// 處理排序
|
|||
|
|
const handleSort = (field: SortField) => {
|
|||
|
|
if (sortField === field) {
|
|||
|
|
if (sortDirection === "asc") {
|
|||
|
|
setSortDirection("desc");
|
|||
|
|
} else if (sortDirection === "desc") {
|
|||
|
|
setSortDirection(null);
|
|||
|
|
setSortField(null);
|
|||
|
|
} else {
|
|||
|
|
setSortDirection("asc");
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
setSortField(field);
|
|||
|
|
setSortDirection("asc");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 排序後的列表
|
|||
|
|
const sortedInventories = useMemo(() => {
|
|||
|
|
if (!sortField || !sortDirection) {
|
|||
|
|
return inventories;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return [...inventories].sort((a, b) => {
|
|||
|
|
let aValue: string | number;
|
|||
|
|
let bValue: string | number;
|
|||
|
|
|
|||
|
|
// Status Priority map for sorting: Low > Near > Normal
|
|||
|
|
const statusPriority: Record<string, number> = {
|
|||
|
|
"低於": 1,
|
|||
|
|
"接近": 2,
|
|||
|
|
"正常": 3
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
switch (sortField) {
|
|||
|
|
case "productName":
|
|||
|
|
aValue = a.productName;
|
|||
|
|
bValue = b.productName;
|
|||
|
|
break;
|
|||
|
|
case "quantity":
|
|||
|
|
aValue = a.quantity;
|
|||
|
|
bValue = b.quantity;
|
|||
|
|
break;
|
|||
|
|
case "lastInboundDate":
|
|||
|
|
aValue = a.lastInboundDate || "";
|
|||
|
|
bValue = b.lastInboundDate || "";
|
|||
|
|
break;
|
|||
|
|
case "lastOutboundDate":
|
|||
|
|
aValue = a.lastOutboundDate || "";
|
|||
|
|
bValue = b.lastOutboundDate || "";
|
|||
|
|
break;
|
|||
|
|
case "safetyStock":
|
|||
|
|
aValue = a.safetyStock ?? -1; // null as -1 or Infinity depending on desired order
|
|||
|
|
bValue = b.safetyStock ?? -1;
|
|||
|
|
break;
|
|||
|
|
case "status":
|
|||
|
|
const aStatus = (a.safetyStock !== null && a.safetyStock !== undefined) ? getSafetyStockStatus(a.quantity, a.safetyStock) : "正常";
|
|||
|
|
const bStatus = (b.safetyStock !== null && b.safetyStock !== undefined) ? getSafetyStockStatus(b.quantity, b.safetyStock) : "正常";
|
|||
|
|
aValue = statusPriority[aStatus] || 3;
|
|||
|
|
bValue = statusPriority[bStatus] || 3;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
return 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (typeof aValue === "string" && typeof bValue === "string") {
|
|||
|
|
return sortDirection === "asc"
|
|||
|
|
? aValue.localeCompare(bValue, "zh-TW")
|
|||
|
|
: bValue.localeCompare(aValue, "zh-TW");
|
|||
|
|
} else {
|
|||
|
|
return sortDirection === "asc"
|
|||
|
|
? (aValue as number) - (bValue as number)
|
|||
|
|
: (bValue as number) - (aValue as number);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, [inventories, sortField, sortDirection]);
|
|||
|
|
|
|||
|
|
const SortIcon = ({ field }: { field: SortField }) => {
|
|||
|
|
if (sortField !== field) {
|
|||
|
|
return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
|
|||
|
|
}
|
|||
|
|
if (sortDirection === "asc") {
|
|||
|
|
return <ArrowUp className="h-4 w-4 text-primary ml-1" />;
|
|||
|
|
}
|
|||
|
|
if (sortDirection === "desc") {
|
|||
|
|
return <ArrowDown className="h-4 w-4 text-primary ml-1" />;
|
|||
|
|
}
|
|||
|
|
return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (inventories.length === 0) {
|
|||
|
|
return (
|
|||
|
|
<div className="text-center py-12 text-gray-400">
|
|||
|
|
<Package className="h-12 w-12 mx-auto mb-4 opacity-20" />
|
|||
|
|
<p>無符合條件的品項</p>
|
|||
|
|
<p className="text-sm mt-1">請調整搜尋或篩選條件</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 獲取狀態徽章
|
|||
|
|
const getStatusBadge = (quantity: number, safetyStock: number) => {
|
|||
|
|
const status = getSafetyStockStatus(quantity, safetyStock);
|
|||
|
|
switch (status) {
|
|||
|
|
case "正常":
|
|||
|
|
return (
|
|||
|
|
<Badge className="bg-green-100 text-green-700 border-green-300 hover:bg-green-100">
|
|||
|
|
<CheckCircle className="mr-1 h-3 w-3" />
|
|||
|
|
正常
|
|||
|
|
</Badge>
|
|||
|
|
);
|
|||
|
|
case "接近": // 數量 <= 安全庫存 * 1.2
|
|||
|
|
return (
|
|||
|
|
<Badge className="bg-yellow-100 text-yellow-700 border-yellow-300 hover:bg-yellow-100">
|
|||
|
|
<AlertTriangle className="mr-1 h-3 w-3" />
|
|||
|
|
接近
|
|||
|
|
</Badge>
|
|||
|
|
);
|
|||
|
|
case "低於": // 數量 < 安全庫存
|
|||
|
|
return (
|
|||
|
|
<Badge className="bg-orange-100 text-orange-700 border-orange-300 hover:bg-orange-100">
|
|||
|
|
<AlertTriangle className="mr-1 h-3 w-3" />
|
|||
|
|
低於
|
|||
|
|
</Badge>
|
|||
|
|
);
|
|||
|
|
default:
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="overflow-x-auto">
|
|||
|
|
<Table>
|
|||
|
|
<TableHeader>
|
|||
|
|
<TableRow className="bg-gray-50/50">
|
|||
|
|
<TableHead className="w-[50px] text-center">#</TableHead>
|
|||
|
|
<TableHead className="w-[25%]">
|
|||
|
|
<button onClick={() => handleSort("productName")} className="flex items-center hover:text-gray-900 font-semibold">
|
|||
|
|
商品資訊 <SortIcon field="productName" />
|
|||
|
|
</button>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="w-[10%] text-right">
|
|||
|
|
<div className="flex justify-end">
|
|||
|
|
<button onClick={() => handleSort("quantity")} className="flex items-center hover:text-gray-900 font-semibold">
|
|||
|
|
庫存數量 <SortIcon field="quantity" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="w-[12%]">
|
|||
|
|
<button onClick={() => handleSort("lastInboundDate")} className="flex items-center hover:text-gray-900 font-semibold">
|
|||
|
|
最新入庫 <SortIcon field="lastInboundDate" />
|
|||
|
|
</button>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="w-[12%]">
|
|||
|
|
<button onClick={() => handleSort("lastOutboundDate")} className="flex items-center hover:text-gray-900 font-semibold">
|
|||
|
|
最新出庫 <SortIcon field="lastOutboundDate" />
|
|||
|
|
</button>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="w-[10%] text-right">
|
|||
|
|
<div className="flex justify-end">
|
|||
|
|
<button onClick={() => handleSort("safetyStock")} className="flex items-center hover:text-gray-900 font-semibold">
|
|||
|
|
安全庫存 <SortIcon field="safetyStock" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="w-[10%] text-center">
|
|||
|
|
<div className="flex justify-center">
|
|||
|
|
<button onClick={() => handleSort("status")} className="flex items-center hover:text-gray-900 font-semibold">
|
|||
|
|
狀態 <SortIcon field="status" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="w-[10%] text-center">操作</TableHead>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{sortedInventories.map((item, index) => (
|
|||
|
|
<TableRow key={item.id}>
|
|||
|
|
<TableCell className="text-gray-500 font-medium text-center">
|
|||
|
|
{index + 1}
|
|||
|
|
</TableCell>
|
|||
|
|
{/* 商品資訊 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<div className="flex flex-col">
|
|||
|
|
<div className="font-medium text-gray-900">{item.productName}</div>
|
|||
|
|
<div className="text-xs text-gray-500">{item.productCode}</div>
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 庫存數量 */}
|
|||
|
|
<TableCell className="text-right">
|
|||
|
|
<span className="font-medium text-gray-900">{item.quantity}</span>
|
|||
|
|
<span className="text-xs text-gray-500 ml-1">{item.unit}</span>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 最新入庫 */}
|
|||
|
|
<TableCell className="text-gray-600">
|
|||
|
|
{item.lastInboundDate ? formatDate(item.lastInboundDate) : "-"}
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 最新出庫 */}
|
|||
|
|
<TableCell className="text-gray-600">
|
|||
|
|
{item.lastOutboundDate ? formatDate(item.lastOutboundDate) : "-"}
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 安全庫存 */}
|
|||
|
|
<TableCell className="text-right">
|
|||
|
|
{item.safetyStock !== null && item.safetyStock >= 0 ? (
|
|||
|
|
<span className="font-medium text-gray-900">
|
|||
|
|
{item.safetyStock} <span className="text-xs text-gray-500 font-normal">{item.unit}</span>
|
|||
|
|
</span>
|
|||
|
|
) : (
|
|||
|
|
<span className="text-gray-400 text-xs">未設定</span>
|
|||
|
|
)}
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 狀態 */}
|
|||
|
|
<TableCell className="text-center">
|
|||
|
|
{(item.safetyStock !== null && item.safetyStock !== undefined) ? getStatusBadge(item.quantity, item.safetyStock) : (
|
|||
|
|
<Badge variant="outline" className="text-gray-400 border-dashed">正常</Badge>
|
|||
|
|
)}
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 操作 */}
|
|||
|
|
<TableCell className="text-center">
|
|||
|
|
<div className="flex justify-center gap-2">
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={() => onView(item.id)}
|
|||
|
|
title="查看庫存流水帳"
|
|||
|
|
className="button-outlined-primary"
|
|||
|
|
>
|
|||
|
|
<Eye className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={() => onDelete(item.id)}
|
|||
|
|
title="刪除"
|
|||
|
|
className="button-outlined-error"
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|