mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
sky121113
2025-12-30 15:03:19 +08:00
commit c735c36009
902 changed files with 83591 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
resources/js/Components/Warehouse/Inventory/InventoryTable.tsx Normal file
View File

@@ -0,0 +1,300 @@
/**
* 庫存表格元件 (扁平化列表版)
* 顯示庫存項目列表，不進行折疊分組
*/
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>
);
}