259 lines
12 KiB
TypeScript
259 lines
12 KiB
TypeScript
|
/**
|
||
|
|
* 進貨單列表表格
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { useState, useMemo } from "react";
|
||
|
|
import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
|
||
|
|
import {
|
||
|
|
Table,
|
||
|
|
TableBody,
|
||
|
|
TableCell,
|
||
|
|
TableHead,
|
||
|
|
TableHeader,
|
||
|
|
TableRow,
|
||
|
|
} from "@/Components/ui/table";
|
||
|
|
import GoodsReceiptActions, { GoodsReceipt } from "./GoodsReceiptActions";
|
||
|
|
import GoodsReceiptStatusBadge from "./GoodsReceiptStatusBadge";
|
||
|
|
import CopyButton from "@/Components/shared/CopyButton";
|
||
|
|
import { formatCurrency, formatDate } from "@/utils/format";
|
||
|
|
|
||
|
|
interface GoodsReceiptTableProps {
|
||
|
|
receipts: GoodsReceipt[];
|
||
|
|
}
|
||
|
|
|
||
|
|
type SortField = "code" | "type" | "warehouse_name" | "vendor_name" | "received_date" | "total_amount" | "status";
|
||
|
|
type SortDirection = "asc" | "desc" | null;
|
||
|
|
|
||
|
|
export default function GoodsReceiptTable({
|
||
|
|
receipts,
|
||
|
|
}: GoodsReceiptTableProps) {
|
||
|
|
const [sortField, setSortField] = useState<SortField | null>(null);
|
||
|
|
const [sortDirection, setSortDirection] = useState<SortDirection>(null);
|
||
|
|
|
||
|
|
// 處理排序
|
||
|
|
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 typeMap: Record<string, string> = {
|
||
|
|
standard: "標準採購",
|
||
|
|
miscellaneous: "雜項入庫",
|
||
|
|
other: "其他入庫",
|
||
|
|
};
|
||
|
|
|
||
|
|
// 排序後的進貨單列表
|
||
|
|
const sortedReceipts = useMemo(() => {
|
||
|
|
if (!sortField || !sortDirection) {
|
||
|
|
return receipts;
|
||
|
|
}
|
||
|
|
|
||
|
|
return [...receipts].sort((a, b) => {
|
||
|
|
let aValue: string | number;
|
||
|
|
let bValue: string | number;
|
||
|
|
|
||
|
|
switch (sortField) {
|
||
|
|
case "code":
|
||
|
|
aValue = a.code;
|
||
|
|
bValue = b.code;
|
||
|
|
break;
|
||
|
|
case "type":
|
||
|
|
aValue = typeMap[a.status] || a.status; // status here might actually refer to type in existing code logic? Let's use a.type if it exists.
|
||
|
|
// Checking if 'type' is in receipt - based on implementation plan we want it.
|
||
|
|
// Currently GoodsReceipt model HAS type.
|
||
|
|
// @ts-ignore
|
||
|
|
aValue = typeMap[a.type] || a.type || "";
|
||
|
|
// @ts-ignore
|
||
|
|
bValue = typeMap[b.type] || b.type || "";
|
||
|
|
break;
|
||
|
|
case "warehouse_name":
|
||
|
|
aValue = a.warehouse?.name || "";
|
||
|
|
bValue = b.warehouse?.name || "";
|
||
|
|
break;
|
||
|
|
case "vendor_name":
|
||
|
|
aValue = a.vendor?.name || "";
|
||
|
|
bValue = b.vendor?.name || "";
|
||
|
|
break;
|
||
|
|
case "received_date":
|
||
|
|
aValue = a.received_date;
|
||
|
|
bValue = b.received_date;
|
||
|
|
break;
|
||
|
|
case "total_amount":
|
||
|
|
aValue = a.items_sum_total_amount || 0;
|
||
|
|
bValue = b.items_sum_total_amount || 0;
|
||
|
|
break;
|
||
|
|
case "status":
|
||
|
|
aValue = a.status;
|
||
|
|
bValue = b.status;
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, [receipts, sortField, sortDirection]);
|
||
|
|
|
||
|
|
const SortIcon = ({ field }: { field: SortField }) => {
|
||
|
|
if (sortField !== field) {
|
||
|
|
return <ArrowUpDown className="h-4 w-4 text-muted-foreground" />;
|
||
|
|
}
|
||
|
|
if (sortDirection === "asc") {
|
||
|
|
return <ArrowUp className="h-4 w-4 text-primary" />;
|
||
|
|
}
|
||
|
|
if (sortDirection === "desc") {
|
||
|
|
return <ArrowDown className="h-4 w-4 text-primary" />;
|
||
|
|
}
|
||
|
|
return <ArrowUpDown className="h-4 w-4 text-muted-foreground" />;
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-white rounded-lg border shadow-sm overflow-hidden mt-6">
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow className="bg-gray-50/50">
|
||
|
|
<TableHead className="w-[50px] text-center">#</TableHead>
|
||
|
|
<TableHead className="w-[180px]">
|
||
|
|
<button
|
||
|
|
onClick={() => handleSort("code")}
|
||
|
|
className="flex items-center gap-2 hover:text-foreground transition-colors"
|
||
|
|
>
|
||
|
|
進貨單編號
|
||
|
|
<SortIcon field="code" />
|
||
|
|
</button>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="w-[120px]">
|
||
|
|
<button
|
||
|
|
onClick={() => handleSort("type")}
|
||
|
|
className="flex items-center gap-2 hover:text-foreground transition-colors"
|
||
|
|
>
|
||
|
|
入庫類型
|
||
|
|
<SortIcon field="type" />
|
||
|
|
</button>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="w-[180px]">
|
||
|
|
<button
|
||
|
|
onClick={() => handleSort("warehouse_name")}
|
||
|
|
className="flex items-center gap-2 hover:text-foreground transition-colors"
|
||
|
|
>
|
||
|
|
入庫倉庫
|
||
|
|
<SortIcon field="warehouse_name" />
|
||
|
|
</button>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="w-[180px]">
|
||
|
|
<button
|
||
|
|
onClick={() => handleSort("vendor_name")}
|
||
|
|
className="flex items-center gap-2 hover:text-foreground transition-colors"
|
||
|
|
>
|
||
|
|
供應商
|
||
|
|
<SortIcon field="vendor_name" />
|
||
|
|
</button>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="w-[150px]">
|
||
|
|
<button
|
||
|
|
onClick={() => handleSort("received_date")}
|
||
|
|
className="flex items-center gap-2 hover:text-foreground transition-colors"
|
||
|
|
>
|
||
|
|
進貨日期
|
||
|
|
<SortIcon field="received_date" />
|
||
|
|
</button>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="w-[140px] text-right">
|
||
|
|
<button
|
||
|
|
onClick={() => handleSort("total_amount")}
|
||
|
|
className="flex items-center gap-2 ml-auto hover:text-foreground transition-colors"
|
||
|
|
>
|
||
|
|
總金額
|
||
|
|
<SortIcon field="total_amount" />
|
||
|
|
</button>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="w-[120px] text-center">
|
||
|
|
<button
|
||
|
|
onClick={() => handleSort("status")}
|
||
|
|
className="flex items-center gap-2 mx-auto hover:text-foreground transition-colors"
|
||
|
|
>
|
||
|
|
狀態
|
||
|
|
<SortIcon field="status" />
|
||
|
|
</button>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="text-center">操作</TableHead>
|
||
|
|
</TableRow>
|
||
|
|
</TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{sortedReceipts.length === 0 ? (
|
||
|
|
<TableRow>
|
||
|
|
<TableCell colSpan={9} className="text-center text-muted-foreground py-12">
|
||
|
|
尚無進貨單
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
) : (
|
||
|
|
sortedReceipts.map((receipt, index) => (
|
||
|
|
<TableRow key={receipt.id}>
|
||
|
|
<TableCell className="text-gray-500 font-medium text-center">
|
||
|
|
{index + 1}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<div className="flex items-center gap-1.5">
|
||
|
|
<span className="font-mono text-sm font-medium">{receipt.code}</span>
|
||
|
|
<CopyButton text={receipt.code} label="複製單號" />
|
||
|
|
</div>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<span className="text-sm">
|
||
|
|
{/* @ts-ignore */}
|
||
|
|
{typeMap[receipt.type] || receipt.type || "-"}
|
||
|
|
</span>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<div className="text-sm font-medium text-gray-900">
|
||
|
|
{receipt.warehouse?.name || "-"}
|
||
|
|
</div>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<span className="text-sm text-gray-700">{receipt.vendor?.name || "-"}</span>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<span className="text-sm text-gray-500">{formatDate(receipt.received_date)}</span>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-right">
|
||
|
|
<span className="font-semibold text-gray-900">
|
||
|
|
{formatCurrency(receipt.items_sum_total_amount)}
|
||
|
|
</span>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-center">
|
||
|
|
<GoodsReceiptStatusBadge status={receipt.status} />
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-center">
|
||
|
|
<GoodsReceiptActions receipt={receipt} />
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|