生產工單BOM以及批號完善
This commit is contained in:
@@ -86,6 +86,15 @@ const fieldLabels: Record<string, string> = {
|
||||
quantity: '數量',
|
||||
safety_stock: '安全庫存',
|
||||
location: '儲位',
|
||||
// Inventory fields
|
||||
batch_number: '批號',
|
||||
box_number: '箱號',
|
||||
origin_country: '來源國家',
|
||||
arrival_date: '入庫日期',
|
||||
expiry_date: '有效期限',
|
||||
source_purchase_order_id: '來源採購單',
|
||||
quality_status: '品質狀態',
|
||||
quality_remark: '品質備註',
|
||||
// Purchase Order fields
|
||||
po_number: '採購單號',
|
||||
vendor_id: '廠商',
|
||||
@@ -118,6 +127,13 @@ const statusMap: Record<string, string> = {
|
||||
completed: '已完成',
|
||||
};
|
||||
|
||||
// Inventory Quality Status Map
|
||||
const qualityStatusMap: Record<string, string> = {
|
||||
normal: '正常',
|
||||
frozen: '凍結',
|
||||
rejected: '瑕疵/拒收',
|
||||
};
|
||||
|
||||
export default function ActivityDetailDialog({ open, onOpenChange, activity }: Props) {
|
||||
if (!activity) return null;
|
||||
|
||||
@@ -193,8 +209,13 @@ export default function ActivityDetailDialog({ open, onOpenChange, activity }: P
|
||||
return statusMap[value];
|
||||
}
|
||||
|
||||
// Handle Inventory Quality Status
|
||||
if (key === 'quality_status' && typeof value === 'string' && qualityStatusMap[value]) {
|
||||
return qualityStatusMap[value];
|
||||
}
|
||||
|
||||
// Handle Date Fields (YYYY-MM-DD)
|
||||
if ((key === 'expected_delivery_date' || key === 'invoice_date') && typeof value === 'string') {
|
||||
if ((key === 'expected_delivery_date' || key === 'invoice_date' || key === 'arrival_date' || key === 'expiry_date') && typeof value === 'string') {
|
||||
// Take only the date part (YYYY-MM-DD)
|
||||
return value.split('T')[0].split(' ')[0];
|
||||
}
|
||||
|
||||
@@ -0,0 +1,170 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/Components/ui/dialog";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/Components/ui/select";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
|
||||
interface BatchAdjustmentModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: (data: {
|
||||
operation: "add" | "subtract" | "set";
|
||||
quantity: number;
|
||||
reason: string;
|
||||
}) => void;
|
||||
batch?: {
|
||||
id: string;
|
||||
batchNumber: string;
|
||||
currentQuantity: number;
|
||||
productName: string;
|
||||
};
|
||||
processing?: boolean;
|
||||
}
|
||||
|
||||
export default function BatchAdjustmentModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
batch,
|
||||
processing = false,
|
||||
}: BatchAdjustmentModalProps) {
|
||||
const [operation, setOperation] = useState<"add" | "subtract" | "set">("add");
|
||||
const [quantity, setQuantity] = useState<string>("");
|
||||
const [reason, setReason] = useState<string>("手動調整庫存");
|
||||
|
||||
// 當開啟時重置
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setOperation("add");
|
||||
setQuantity("");
|
||||
setReason("手動調整庫存");
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const handleConfirm = () => {
|
||||
const numQty = parseFloat(quantity);
|
||||
if (isNaN(numQty) || numQty <= 0 && operation !== "set") {
|
||||
return;
|
||||
}
|
||||
|
||||
onConfirm({
|
||||
operation,
|
||||
quantity: numQty,
|
||||
reason,
|
||||
});
|
||||
};
|
||||
|
||||
const previewQuantity = () => {
|
||||
if (!batch) return 0;
|
||||
const numQty = parseFloat(quantity) || 0;
|
||||
if (operation === "add") return batch.currentQuantity + numQty;
|
||||
if (operation === "subtract") return Math.max(0, batch.currentQuantity - numQty);
|
||||
if (operation === "set") return numQty;
|
||||
return batch.currentQuantity;
|
||||
};
|
||||
|
||||
if (!batch) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
庫存調整 - {batch.productName}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="bg-gray-50 p-3 rounded-md border text-sm space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">批號：</span>
|
||||
<span className="font-mono font-medium">{batch.batchNumber || "-"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">當前數量：</span>
|
||||
<span className="font-medium text-primary-main">{batch.currentQuantity}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>調整方式</Label>
|
||||
<Select
|
||||
value={operation}
|
||||
onValueChange={(value: any) => setOperation(value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="選擇調整方式" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="add">增加 (+)</SelectItem>
|
||||
<SelectItem value="subtract">扣除 (-)</SelectItem>
|
||||
<SelectItem value="set">設定為固定值 (=)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="adj-qty">數量</Label>
|
||||
<Input
|
||||
id="adj-qty"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(e.target.value)}
|
||||
placeholder="請輸入數量"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="adj-reason">調整原因</Label>
|
||||
<Input
|
||||
id="adj-reason"
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
placeholder="例：手動盤點修正"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-2 p-3 bg-primary/5 rounded-md border border-primary/20 text-sm">
|
||||
<AlertCircle className="h-4 w-4 text-primary-main" />
|
||||
<span>
|
||||
調整後預計數量：
|
||||
<span className="font-bold text-primary-main ml-1">
|
||||
{previewQuantity()}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} disabled={processing}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleConfirm}
|
||||
disabled={processing || !quantity || parseFloat(quantity) < 0}
|
||||
className="button-filled-primary"
|
||||
>
|
||||
確認調整
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +1,10 @@
|
||||
/**
|
||||
* 庫存表格元件 (扁平化列表版)
|
||||
* 顯示庫存項目列表，不進行折疊分組
|
||||
* 庫存表格元件 (Warehouse 版本)
|
||||
* 顯示庫存項目列表（依商品分組並支援折疊）
|
||||
*/
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import {
|
||||
AlertTriangle,
|
||||
Trash2,
|
||||
Eye,
|
||||
CheckCircle,
|
||||
Package,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { AlertTriangle, Edit, Trash2, Eye, ChevronDown, ChevronRight, CheckCircle, Package } from "lucide-react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -24,149 +15,87 @@ import {
|
||||
} 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 {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
} from "@/Components/ui/collapsible";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/Components/ui/tooltip";
|
||||
import { GroupedInventory } from "@/types/warehouse";
|
||||
import { formatDate } from "@/utils/format";
|
||||
import { Can } from "@/Components/Permission/Can";
|
||||
import BatchAdjustmentModal from "./BatchAdjustmentModal";
|
||||
|
||||
interface InventoryTableProps {
|
||||
inventories: WarehouseInventory[];
|
||||
inventories: GroupedInventory[];
|
||||
onView: (id: string) => void;
|
||||
onDelete: (id: string) => void;
|
||||
onAdjust: (batchId: string, data: { operation: string; quantity: number; reason: string }) => void;
|
||||
onViewProduct?: (productId: string) => void;
|
||||
}
|
||||
|
||||
type SortField = "productName" | "quantity" | "lastInboundDate" | "lastOutboundDate" | "safetyStock" | "status";
|
||||
type SortDirection = "asc" | "desc" | null;
|
||||
|
||||
export default function InventoryTable({
|
||||
inventories,
|
||||
onView,
|
||||
onDelete,
|
||||
onAdjust,
|
||||
onViewProduct,
|
||||
}: InventoryTableProps) {
|
||||
const [sortField, setSortField] = useState<SortField | null>("status");
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>("asc"); // "asc" for status means Priority High (Low Stock) first
|
||||
// 每個商品的展開/折疊狀態
|
||||
const [expandedProducts, setExpandedProducts] = useState<Set<string>>(new Set());
|
||||
|
||||
// 處理排序
|
||||
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" />;
|
||||
};
|
||||
// 調整彈窗狀態
|
||||
const [adjustmentTarget, setAdjustmentTarget] = useState<{
|
||||
id: string;
|
||||
batchNumber: string;
|
||||
currentQuantity: number;
|
||||
productName: string;
|
||||
} | null>(null);
|
||||
|
||||
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 sortedInventories = [...inventories].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 = (quantity: number, safetyStock: number) => {
|
||||
const status = getSafetyStockStatus(quantity, safetyStock);
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "正常":
|
||||
return (
|
||||
<Badge className="bg-green-100 text-green-700 border-green-300 hover:bg-green-100">
|
||||
<Badge className="bg-green-100 text-green-700 border-green-300">
|
||||
<CheckCircle className="mr-1 h-3 w-3" />
|
||||
正常
|
||||
</Badge>
|
||||
);
|
||||
case "接近": // 數量 <= 安全庫存 * 1.2
|
||||
|
||||
case "低於":
|
||||
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">
|
||||
<Badge className="bg-red-100 text-red-700 border-red-300">
|
||||
<AlertTriangle className="mr-1 h-3 w-3" />
|
||||
低於
|
||||
</Badge>
|
||||
@@ -177,127 +106,201 @@ export default function InventoryTable({
|
||||
};
|
||||
|
||||
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">
|
||||
商品資訊 <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">
|
||||
庫存數量 <SortIcon field="quantity" />
|
||||
</button>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="w-[12%]">
|
||||
<button onClick={() => handleSort("lastInboundDate")} className="flex items-center hover:text-gray-900">
|
||||
最新入庫 <SortIcon field="lastInboundDate" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="w-[12%]">
|
||||
<button onClick={() => handleSort("lastOutboundDate")} className="flex items-center hover:text-gray-900">
|
||||
最新出庫 <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">
|
||||
安全庫存 <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">
|
||||
狀態 <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>
|
||||
<TooltipProvider>
|
||||
<div className="space-y-4 p-4">
|
||||
{sortedInventories.map((group) => {
|
||||
const totalQuantity = group.totalQuantity;
|
||||
|
||||
// 使用後端提供的狀態
|
||||
const status = group.status;
|
||||
|
||||
const isLowStock = status === "低於";
|
||||
const isExpanded = expandedProducts.has(group.productId);
|
||||
const hasInventory = group.batches.length > 0;
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
key={group.productId}
|
||||
open={isExpanded}
|
||||
onOpenChange={() => toggleProduct(group.productId)}
|
||||
>
|
||||
<div className="border rounded-lg overflow-hidden">
|
||||
{/* 商品標題 - 可點擊折疊 */}
|
||||
<div
|
||||
onClick={() => toggleProduct(group.productId)}
|
||||
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.batches.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.safetyStock !== null ? (
|
||||
<>
|
||||
<div className="text-sm">
|
||||
<span className="text-gray-600">
|
||||
安全庫存：<span className="font-medium text-gray-900">{group.safetyStock} 個</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
{status && getStatusBadge(status)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-gray-500">
|
||||
未設定
|
||||
</Badge>
|
||||
)}
|
||||
{onViewProduct && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onViewProduct(group.productId);
|
||||
}}
|
||||
className="button-outlined-primary"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
{/* 商品表格 - 可折疊內容 */}
|
||||
<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.batches.map((batch, index) => {
|
||||
return (
|
||||
<TableRow key={batch.id}>
|
||||
<TableCell className="text-grey-2">{index + 1}</TableCell>
|
||||
<TableCell>{batch.batchNumber || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<span>{batch.quantity}</span>
|
||||
</TableCell>
|
||||
<TableCell>{batch.batchNumber || "-"}</TableCell>
|
||||
<TableCell>
|
||||
{batch.expiryDate ? formatDate(batch.expiryDate) : "-"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{batch.lastInboundDate ? formatDate(batch.lastInboundDate) : "-"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{batch.lastOutboundDate ? formatDate(batch.lastOutboundDate) : "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onView(batch.id)}
|
||||
className="button-outlined-primary"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Can permission="inventory.adjust">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setAdjustmentTarget({
|
||||
id: batch.id,
|
||||
batchNumber: batch.batchNumber,
|
||||
currentQuantity: batch.quantity,
|
||||
productName: group.productName
|
||||
})}
|
||||
className="button-outlined-primary"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
</Can>
|
||||
<Can permission="inventory.delete">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="inline-block">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onDelete(batch.id)}
|
||||
className={batch.quantity > 0 ? "opacity-50 cursor-not-allowed border-gray-200 text-gray-400 hover:bg-transparent" : "button-outlined-error"}
|
||||
disabled={batch.quantity > 0}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="text-xs">{batch.quantity > 0 ? "庫存須為 0 才可刪除" : "刪除"}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</Can>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* 最新入庫 */}
|
||||
<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>
|
||||
<Can permission="inventory.delete">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onDelete(item.id)}
|
||||
title="刪除"
|
||||
className="button-outlined-error"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</Can>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<BatchAdjustmentModal
|
||||
isOpen={!!adjustmentTarget}
|
||||
onClose={() => setAdjustmentTarget(null)}
|
||||
batch={adjustmentTarget || undefined}
|
||||
onConfirm={(data) => {
|
||||
if (adjustmentTarget) {
|
||||
onAdjust(adjustmentTarget.id, data);
|
||||
setAdjustmentTarget(null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,13 +8,15 @@ export interface Transaction {
|
||||
reason: string | null;
|
||||
userName: string;
|
||||
actualTime: string;
|
||||
batchNumber?: string; // 商品層級查詢時顯示批號
|
||||
}
|
||||
|
||||
interface TransactionTableProps {
|
||||
transactions: Transaction[];
|
||||
showBatchNumber?: boolean; // 是否顯示批號欄位
|
||||
}
|
||||
|
||||
export default function TransactionTable({ transactions }: TransactionTableProps) {
|
||||
export default function TransactionTable({ transactions, showBatchNumber = false }: TransactionTableProps) {
|
||||
if (transactions.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
@@ -23,6 +25,9 @@ export default function TransactionTable({ transactions }: TransactionTableProps
|
||||
);
|
||||
}
|
||||
|
||||
// 自動偵測是否需要顯示批號（如果任一筆記錄有 batchNumber）
|
||||
const shouldShowBatchNumber = showBatchNumber || transactions.some(tx => tx.batchNumber);
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm text-left">
|
||||
@@ -30,6 +35,7 @@ export default function TransactionTable({ transactions }: TransactionTableProps
|
||||
<tr>
|
||||
<th className="px-4 py-3 w-[50px]">#</th>
|
||||
<th className="px-4 py-3">時間</th>
|
||||
{shouldShowBatchNumber && <th className="px-4 py-3">批號</th>}
|
||||
<th className="px-4 py-3">類型</th>
|
||||
<th className="px-4 py-3 text-right">變動數量</th>
|
||||
<th className="px-4 py-3 text-right">結餘</th>
|
||||
@@ -42,6 +48,9 @@ export default function TransactionTable({ transactions }: TransactionTableProps
|
||||
<tr key={tx.id} className="border-b hover:bg-gray-50">
|
||||
<td className="px-4 py-3 text-center text-gray-500 font-medium">{index + 1}</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap">{tx.actualTime}</td>
|
||||
{shouldShowBatchNumber && (
|
||||
<td className="px-4 py-3 font-mono text-sm text-gray-600">{tx.batchNumber || '-'}</td>
|
||||
)}
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-1 rounded-full text-xs ${tx.quantity > 0
|
||||
? 'bg-green-100 text-green-800'
|
||||
|
||||
Reference in New Issue
Block a user