first commit
This commit is contained in:
@@ -0,0 +1,334 @@
|
||||
/**
|
||||
* 查看採購單詳情頁面
|
||||
*/
|
||||
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { STATUS_CONFIG, PAYMENT_METHODS, INVOICE_TYPES } from "../constants/purchase-order";
|
||||
import { StatusProgressBar } from "./purchase-order/StatusProgressBar";
|
||||
import { Breadcrumb } from "./shared/Breadcrumb";
|
||||
import { StatusBadge } from "./shared/StatusBadge";
|
||||
import { CopyButton } from "./shared/CopyButton";
|
||||
import type { PurchaseOrder } from "../types/purchase-order";
|
||||
import { formatCurrency } from "../utils/purchase-order";
|
||||
|
||||
interface ViewPurchaseOrderPageProps {
|
||||
order: PurchaseOrder;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export default function ViewPurchaseOrderPage({
|
||||
order,
|
||||
onBack,
|
||||
}: ViewPurchaseOrderPageProps) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: "採購管理" },
|
||||
{ label: "管理採購單" },
|
||||
{ label: "查看採購單", active: true },
|
||||
]}
|
||||
/>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onBack}
|
||||
className="gap-2 button-outlined-primary"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
返回列表
|
||||
</Button>
|
||||
<h1>查看採購單</h1>
|
||||
</div>
|
||||
<StatusBadge status={order.status} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 狀態流程條 */}
|
||||
{order.status !== "draft" && order.status !== "rejected" && (
|
||||
<div className="mb-6">
|
||||
<StatusProgressBar currentStatus={order.status} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* 審核資訊卡片（如果有審核資訊） */}
|
||||
{order.reviewInfo && (
|
||||
<div
|
||||
className={`rounded-lg border-2 p-6 ${
|
||||
order.status === "rejected"
|
||||
? "bg-red-50 border-red-200"
|
||||
: "bg-green-50 border-green-200"
|
||||
}`}
|
||||
>
|
||||
<h2 className="mb-4">
|
||||
{order.status === "rejected" ? "退回資訊" : "審核資訊"}
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
審核人
|
||||
</label>
|
||||
<span>{order.reviewInfo.reviewedBy}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
審核時間
|
||||
</label>
|
||||
<span>{order.reviewInfo.reviewedAt}</span>
|
||||
</div>
|
||||
{order.reviewInfo.rejectionReason && (
|
||||
<div className="md:col-span-2">
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
退回原因
|
||||
</label>
|
||||
<p className="text-sm bg-white p-4 rounded-lg border-2 border-red-300">
|
||||
{order.reviewInfo.rejectionReason}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 付款資訊卡片（如果有付款資訊） */}
|
||||
{order.paymentInfo && (
|
||||
<div className="rounded-lg border-2 p-6 bg-blue-50 border-blue-200">
|
||||
<h2 className="mb-4">付款資訊</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
付款方式
|
||||
</label>
|
||||
<span>{PAYMENT_METHODS[order.paymentInfo.paymentMethod]}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
付款日期
|
||||
</label>
|
||||
<span>{order.paymentInfo.paymentDate}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
實際付款金額
|
||||
</label>
|
||||
<span className="font-medium">
|
||||
${order.paymentInfo.actualAmount.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
付款人
|
||||
</label>
|
||||
<span>{order.paymentInfo.paidBy}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
付款記錄時間
|
||||
</label>
|
||||
<span>{order.paymentInfo.paidAt}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 發票資訊（如果有） */}
|
||||
{order.paymentInfo.hasInvoice && order.paymentInfo.invoice && (
|
||||
<div className="mt-6 pt-6 border-t-2 border-blue-300">
|
||||
<h3 className="font-medium mb-4">發票資訊</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
發票號碼
|
||||
</label>
|
||||
<span className="font-mono">
|
||||
{order.paymentInfo.invoice.invoiceNumber}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
發票類型
|
||||
</label>
|
||||
<span>
|
||||
{INVOICE_TYPES[order.paymentInfo.invoice.invoiceType]}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
發票金額
|
||||
</label>
|
||||
<span className="font-medium">
|
||||
${order.paymentInfo.invoice.invoiceAmount.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
發票日期
|
||||
</label>
|
||||
<span>{order.paymentInfo.invoice.invoiceDate}</span>
|
||||
</div>
|
||||
{order.paymentInfo.invoice.invoiceType === "triplicate" && (
|
||||
<>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
公司抬頭
|
||||
</label>
|
||||
<span>{order.paymentInfo.invoice.companyName}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
統一編號
|
||||
</label>
|
||||
<span className="font-mono">
|
||||
{order.paymentInfo.invoice.taxId}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 基本資訊卡片 */}
|
||||
<div className="bg-card rounded-lg border-2 border-border p-6">
|
||||
<h2 className="mb-4">基本資訊</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* 採購單編號 */}
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
採購單編號
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono">{order.poNumber}</span>
|
||||
<CopyButton text={order.poNumber} label="複製採購單編號" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 廠商 */}
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
廠商
|
||||
</label>
|
||||
<span>{order.supplierName}</span>
|
||||
</div>
|
||||
|
||||
{/* 申請單位 */}
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
申請單位
|
||||
</label>
|
||||
<span>{order.requesterName}</span>
|
||||
</div>
|
||||
|
||||
{/* 申請人 */}
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
申請人
|
||||
</label>
|
||||
<span>{order.createdBy}</span>
|
||||
</div>
|
||||
|
||||
{/* 建立日期 */}
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
建立日期
|
||||
</label>
|
||||
<span>{order.createdAt}</span>
|
||||
</div>
|
||||
|
||||
{/* 預計到貨日 */}
|
||||
<div>
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
預計到貨日
|
||||
</label>
|
||||
<span>{order.expectedDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 備註（如果有） */}
|
||||
{order.notes && (
|
||||
<div className="mt-6">
|
||||
<label className="text-sm text-muted-foreground mb-2 block">
|
||||
備註
|
||||
</label>
|
||||
<p className="text-sm bg-muted p-4 rounded-lg">{order.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 採購項目卡片 */}
|
||||
<div className="bg-card rounded-lg border-2 border-border p-6">
|
||||
<h2 className="mb-4">採購項目</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b-2 border-border">
|
||||
<th className="text-left py-3 px-2 text-sm text-muted-foreground">
|
||||
品項名稱
|
||||
</th>
|
||||
<th className="text-right py-3 px-2 text-sm text-muted-foreground">
|
||||
數量
|
||||
</th>
|
||||
<th className="text-right py-3 px-2 text-sm text-muted-foreground">
|
||||
單位
|
||||
</th>
|
||||
<th className="text-right py-3 px-2 text-sm text-muted-foreground">
|
||||
單價
|
||||
</th>
|
||||
<th className="text-right py-3 px-2 text-sm text-muted-foreground">
|
||||
小計
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{order.items.map((item, index) => (
|
||||
<tr key={index} className="border-b border-border">
|
||||
<td className="py-4 px-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{item.productName}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{item.productId}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-right py-4 px-2">{item.quantity}</td>
|
||||
<td className="text-right py-4 px-2">{item.unit}</td>
|
||||
<td className="text-right py-4 px-2">
|
||||
<div className="flex flex-col items-end">
|
||||
<span>{formatCurrency(item.unitPrice)}</span>
|
||||
{item.previousPrice &&
|
||||
item.previousPrice !== item.unitPrice && (
|
||||
<span className="text-xs text-muted-foreground line-through">
|
||||
{formatCurrency(item.previousPrice)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-right py-4 px-2 font-medium">
|
||||
{formatCurrency(item.subtotal)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="border-t-2 border-border">
|
||||
<td colSpan={4} className="text-right py-4 px-2 font-medium">
|
||||
總金額
|
||||
</td>
|
||||
<td className="text-right py-4 px-2 font-bold text-lg">
|
||||
{formatCurrency(order.totalAmount)}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user