117 lines
3.6 KiB
TypeScript
117 lines
3.6 KiB
TypeScript
/**
|
|
* 驗收頁面 - Mobile-first RWD
|
|
*/
|
|
|
|
import { ArrowLeft } from "lucide-react";
|
|
import { Button } from "./ui/button";
|
|
import { InspectionOrderInfo } from "./inspection/InspectionOrderInfo";
|
|
import { InspectionTable } from "./inspection/InspectionTable";
|
|
import { InspectionAmountSummary } from "./inspection/InspectionAmountSummary";
|
|
import { InspectionAutoActions } from "./inspection/InspectionAutoActions";
|
|
import { InspectionActionBar } from "./inspection/InspectionActionBar";
|
|
import { StatusProgressBar } from "./purchase-order/StatusProgressBar";
|
|
import type { PurchaseOrder, PurchaseOrderItem } from "../types/purchase-order";
|
|
import { useInspection } from "../hooks/useInspection";
|
|
|
|
interface InspectionPageProps {
|
|
order?: PurchaseOrder;
|
|
onComplete: (orderId: string, items: PurchaseOrderItem[]) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export default function InspectionPage({
|
|
order,
|
|
onComplete,
|
|
onCancel,
|
|
}: InspectionPageProps) {
|
|
const {
|
|
inspectionItems,
|
|
statistics,
|
|
updateReceivedQuantity,
|
|
updateIssueNote,
|
|
} = useInspection({ order });
|
|
|
|
const handleComplete = () => {
|
|
if (!order) return;
|
|
|
|
// 更新商品數量（使用實際收到的數量）
|
|
const updatedItems: PurchaseOrderItem[] = inspectionItems.map((item) => ({
|
|
productId: item.productId,
|
|
productName: item.productName,
|
|
quantity: item.receivedQuantity,
|
|
unit: item.unit,
|
|
unitPrice: item.unitPrice,
|
|
previousPrice: item.previousPrice,
|
|
subtotal: item.receivedQuantity * item.unitPrice,
|
|
}));
|
|
|
|
onComplete(order.id, updatedItems);
|
|
};
|
|
|
|
if (!order) {
|
|
return (
|
|
<div className="p-4 md:p-6">
|
|
<div className="text-center text-muted-foreground">未找到採購單資訊</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const hasIssues = statistics.shortageItems > 0;
|
|
const actualAmount = inspectionItems.reduce(
|
|
(sum, item) => sum + item.receivedQuantity * item.unitPrice,
|
|
0
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background pb-24 md:pb-0">
|
|
{/* Header */}
|
|
<div className="sticky top-0 z-20 bg-background border-b-2 border-border p-4 md:p-6">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* 返回按鈕 - 手機版和桌面版都顯示 */}
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onCancel}
|
|
className="gap-2 button-outlined-primary"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
<span className="hidden sm:inline">返回</span>
|
|
</Button>
|
|
</div>
|
|
<div>
|
|
<h1>驗收與收貨</h1>
|
|
<p className="body-sm text-muted-foreground mt-1">
|
|
請確認實際收貨數量
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="max-w-6xl mx-auto px-4 md:px-6 py-6 space-y-6">
|
|
{/* Level 1: 訂單資訊卡片 */}
|
|
<InspectionOrderInfo order={order} hasIssues={hasIssues} />
|
|
|
|
{/* Level 2: 商品驗收 */}
|
|
<InspectionTable
|
|
items={inspectionItems}
|
|
onReceivedQuantityChange={updateReceivedQuantity}
|
|
onIssueNoteChange={updateIssueNote}
|
|
/>
|
|
|
|
{/* Level 3: 金額統計 */}
|
|
<InspectionAmountSummary
|
|
originalAmount={order.totalAmount}
|
|
actualAmount={actualAmount}
|
|
/>
|
|
|
|
{/* Level 4: 驗收後自動執行（收合狀態） */}
|
|
<InspectionAutoActions />
|
|
|
|
{/* 操作按鈕 */}
|
|
<InspectionActionBar onCancel={onCancel} onComplete={handleComplete} />
|
|
</div>
|
|
</div>
|
|
);
|
|
} |