feat: 統一進貨單 UI、修復庫存異動紀錄與廠商詳情顯示報錯
This commit is contained in:
221
resources/js/Pages/Inventory/GoodsReceipt/Show.tsx
Normal file
221
resources/js/Pages/Inventory/GoodsReceipt/Show.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
/**
|
||||
* 查看進貨單詳情頁面
|
||||
*/
|
||||
|
||||
import { ArrowLeft, Package } from "lucide-react";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||||
import { Head, Link } from "@inertiajs/react";
|
||||
import GoodsReceiptStatusBadge from "@/Components/Inventory/GoodsReceiptStatusBadge";
|
||||
import CopyButton from "@/Components/shared/CopyButton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/Components/ui/table";
|
||||
import { formatCurrency, formatDate, formatDateTime } from "@/utils/format";
|
||||
import { getShowBreadcrumbs } from "@/utils/breadcrumb";
|
||||
|
||||
interface GoodsReceiptItem {
|
||||
id: number;
|
||||
product_id: number;
|
||||
product: {
|
||||
id: number;
|
||||
name: string;
|
||||
code: string;
|
||||
baseUnit?: {
|
||||
name: string;
|
||||
};
|
||||
};
|
||||
quantity_received: string | number;
|
||||
unit_price: string | number;
|
||||
total_amount: string | number;
|
||||
batch_number?: string;
|
||||
expiry_date?: string;
|
||||
}
|
||||
|
||||
interface GoodsReceipt {
|
||||
id: number;
|
||||
code: string;
|
||||
type: string;
|
||||
received_date: string;
|
||||
status: string;
|
||||
remark?: string;
|
||||
warehouse?: {
|
||||
name: string;
|
||||
};
|
||||
vendor?: {
|
||||
name: string;
|
||||
};
|
||||
items: GoodsReceiptItem[];
|
||||
items_sum_total_amount: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
receipt: GoodsReceipt;
|
||||
}
|
||||
|
||||
export default function ViewGoodsReceiptPage({ receipt }: Props) {
|
||||
const typeMap: Record<string, string> = {
|
||||
standard: "標準採購進貨",
|
||||
miscellaneous: "雜項入庫",
|
||||
other: "其他入庫",
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthenticatedLayout breadcrumbs={getShowBreadcrumbs("goodsReceipts", `詳情 (#${receipt.code})`)}>
|
||||
<Head title={`進貨單詳情 - ${receipt.code}`} />
|
||||
<div className="container mx-auto p-6 max-w-7xl">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<Link href="/goods-receipts">
|
||||
<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 mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
||||
<Package className="h-6 w-6 text-primary-main" />
|
||||
查看進貨單
|
||||
</h1>
|
||||
<p className="text-gray-500 mt-1">單號：{receipt.code}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<GoodsReceiptStatusBadge status={receipt.status} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8">
|
||||
{/* 基本資訊卡片 */}
|
||||
<div className="bg-white rounded-lg border shadow-sm p-6">
|
||||
<h2 className="text-lg font-bold text-gray-900 mb-6 border-b pb-4">基本資訊</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
|
||||
<div>
|
||||
<span className="text-sm text-gray-500 block mb-1">進貨單編號</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-mono font-medium text-gray-900">{receipt.code}</span>
|
||||
<CopyButton text={receipt.code} label="複製單號" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-gray-500 block mb-1">入庫類型</span>
|
||||
<span className="font-medium text-gray-900">{typeMap[receipt.type] || receipt.type}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-gray-500 block mb-1">倉庫</span>
|
||||
<span className="font-medium text-gray-900">{receipt.warehouse?.name || "-"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-gray-500 block mb-1">供應商</span>
|
||||
<span className="font-medium text-gray-900">{receipt.vendor?.name || "-"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-gray-500 block mb-1">進貨日期</span>
|
||||
<span className="font-medium text-gray-900">{formatDate(receipt.received_date)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-gray-500 block mb-1">建立時間</span>
|
||||
<span className="font-medium text-gray-900">{formatDateTime(receipt.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{receipt.remark && (
|
||||
<div className="mt-8 pt-6 border-t border-gray-100">
|
||||
<span className="text-sm text-gray-500 block mb-2">備註</span>
|
||||
<p className="text-sm text-gray-700 bg-gray-50 p-4 rounded-lg leading-relaxed">
|
||||
{receipt.remark}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 品項清單卡片 */}
|
||||
<div className="bg-white rounded-lg border shadow-sm overflow-hidden">
|
||||
<div className="p-6 border-b border-gray-100">
|
||||
<h2 className="text-lg font-bold text-gray-900">進貨品項清單</h2>
|
||||
</div>
|
||||
<div className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50/50">
|
||||
<TableHead className="w-[80px] text-center">#</TableHead>
|
||||
<TableHead>商品名稱</TableHead>
|
||||
<TableHead className="text-right">進貨數量</TableHead>
|
||||
<TableHead className="text-center">單位</TableHead>
|
||||
<TableHead className="text-right">單價</TableHead>
|
||||
<TableHead className="text-right">小計</TableHead>
|
||||
<TableHead>批號</TableHead>
|
||||
<TableHead>效期</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{receipt.items.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="h-24 text-center text-gray-500">
|
||||
無品項資料
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
receipt.items.map((item, index) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell className="text-center text-gray-500">{index + 1}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium text-gray-900">{item.product.name}</span>
|
||||
<span className="text-xs text-gray-500 font-mono">{item.product.code}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-medium">
|
||||
{Number(item.quantity_received).toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{item.product.baseUnit?.name || "個"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatCurrency(Number(item.unit_price))}
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-bold text-primary">
|
||||
{formatCurrency(Number(item.total_amount))}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm font-mono">{item.batch_number || "-"}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm">{item.expiry_date ? formatDate(item.expiry_date) : "-"}</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 總計 */}
|
||||
<div className="p-6 border-t border-gray-100 flex justify-end">
|
||||
<div className="w-full max-w-xs bg-gray-50/50 px-6 py-4 rounded-xl border border-gray-100 flex flex-col gap-3">
|
||||
<div className="flex justify-between items-end w-full">
|
||||
<span className="text-sm text-gray-500 font-medium mb-1">總計金額</span>
|
||||
<span className="text-2xl font-black text-primary">
|
||||
{formatCurrency(receipt.items_sum_total_amount)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user