2025-12-30 15:03:19 +08:00
|
|
|
|
import { Head, Link } from "@inertiajs/react";
|
|
|
|
|
|
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
|
|
|
|
|
import { Button } from "@/Components/ui/button";
|
2026-01-13 17:00:58 +08:00
|
|
|
|
import { ArrowLeft, History } from "lucide-react";
|
2025-12-30 15:03:19 +08:00
|
|
|
|
import { Warehouse } from "@/types/warehouse";
|
|
|
|
|
|
import TransactionTable, { Transaction } from "@/Components/Warehouse/Inventory/TransactionTable";
|
2026-01-07 13:06:49 +08:00
|
|
|
|
import { getInventoryBreadcrumbs } from "@/utils/breadcrumb";
|
2025-12-30 15:03:19 +08:00
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
|
warehouse: Warehouse;
|
|
|
|
|
|
inventory: {
|
|
|
|
|
|
id: string;
|
|
|
|
|
|
productName: string;
|
|
|
|
|
|
productCode: string;
|
|
|
|
|
|
quantity: number;
|
|
|
|
|
|
};
|
|
|
|
|
|
transactions: Transaction[];
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default function InventoryHistory({ warehouse, inventory, transactions }: Props) {
|
|
|
|
|
|
return (
|
2026-01-07 13:06:49 +08:00
|
|
|
|
<AuthenticatedLayout breadcrumbs={getInventoryBreadcrumbs(warehouse.id, warehouse.name, "庫存變動紀錄")}>
|
2025-12-30 15:03:19 +08:00
|
|
|
|
<Head title={`庫存異動紀錄 - ${inventory.productName}`} />
|
2026-01-13 17:00:58 +08:00
|
|
|
|
<div className="container mx-auto p-6 max-w-7xl">
|
2025-12-30 15:03:19 +08:00
|
|
|
|
{/* Header */}
|
|
|
|
|
|
<div className="mb-6">
|
|
|
|
|
|
<Link href={`/warehouses/${warehouse.id}/inventory`}>
|
|
|
|
|
|
<Button
|
|
|
|
|
|
variant="outline"
|
|
|
|
|
|
className="gap-2 button-outlined-primary mb-6"
|
|
|
|
|
|
>
|
|
|
|
|
|
<ArrowLeft className="h-4 w-4" />
|
|
|
|
|
|
返回庫存管理
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
|
|
<div className="flex items-center justify-between">
|
|
|
|
|
|
<div>
|
2026-01-13 17:00:58 +08:00
|
|
|
|
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
2026-01-16 14:36:24 +08:00
|
|
|
|
<History className="h-6 w-6 text-primary-main" />
|
2026-01-13 17:00:58 +08:00
|
|
|
|
庫存異動紀錄
|
|
|
|
|
|
</h1>
|
|
|
|
|
|
<p className="text-gray-500 mt-1">
|
2025-12-30 15:03:19 +08:00
|
|
|
|
商品：<span className="font-medium text-gray-900">{inventory.productName}</span>
|
|
|
|
|
|
{inventory.productCode && <span className="text-gray-500 ml-2">({inventory.productCode})</span>}
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* Content */}
|
|
|
|
|
|
<div className="bg-white rounded-lg shadow-sm border p-6">
|
|
|
|
|
|
<div className="flex justify-between items-center mb-4 border-b pb-4">
|
|
|
|
|
|
<h3 className="font-medium text-lg">異動流水帳</h3>
|
|
|
|
|
|
<div className="text-sm text-gray-500">
|
|
|
|
|
|
目前庫存：<span className="font-medium text-gray-900">{inventory.quantity}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<TransactionTable transactions={transactions} />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</AuthenticatedLayout>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
