70 lines
3.2 KiB
TypeScript
70 lines
3.2 KiB
TypeScript
import { Head, Link } from "@inertiajs/react";
|
||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||
import { Button } from "@/Components/ui/button";
|
||
import { ArrowLeft, History } from "lucide-react";
|
||
import { Warehouse } from "@/types/warehouse";
|
||
import TransactionTable, { Transaction } from "@/Components/Warehouse/Inventory/TransactionTable";
|
||
import { getInventoryBreadcrumbs } from "@/utils/breadcrumb";
|
||
|
||
interface Props {
|
||
warehouse: Warehouse;
|
||
inventory: {
|
||
id: string;
|
||
productName: string;
|
||
productCode: string;
|
||
batchNumber?: string;
|
||
quantity: number;
|
||
};
|
||
transactions: Transaction[];
|
||
}
|
||
|
||
export default function InventoryHistory({ warehouse, inventory, transactions }: Props) {
|
||
return (
|
||
<AuthenticatedLayout breadcrumbs={getInventoryBreadcrumbs(warehouse.id, warehouse.name, "庫存變動紀錄")}>
|
||
<Head title={`庫存異動紀錄 - ${inventory.productName}`} />
|
||
<div className="container mx-auto p-6 max-w-7xl">
|
||
{/* 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>
|
||
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
||
<History className="h-6 w-6 text-primary-main" />
|
||
庫存異動紀錄
|
||
</h1>
|
||
<p className="text-gray-500 mt-1 flex gap-4 items-center">
|
||
<span>商品：<span className="font-medium text-gray-900">{inventory.productName}</span></span>
|
||
{inventory.productCode && <span className="text-gray-500">({inventory.productCode})</span>}
|
||
{inventory.batchNumber && (
|
||
<span>批號：<span className="font-medium text-primary-main bg-primary-main/10 px-2 py-0.5 rounded border border-primary-main/20">{inventory.batchNumber}</span></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>
|
||
);
|
||
}
|