/** * 查看進貨單詳情頁面 */ import { ArrowLeft, Package } from "lucide-react"; import { Button } from "@/Components/ui/button"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Head, Link, usePage, useForm } from "@inertiajs/react"; import { useState } from "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 { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/Components/ui/alert-dialog"; import { formatCurrency, formatDate, formatDateTime } from "@/utils/format"; import { PageProps } from "@/types/global"; import { toast } from "sonner"; // ... (省略中間介面定義) 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 = { standard: "標準採購進貨", miscellaneous: "雜項入庫", other: "其他入庫", }; const breadcrumbs = [ { label: "庫存管理", href: "#" }, { label: "進貨單管理", href: route("goods-receipts.index") }, { label: `單據詳情 (#${receipt.code})` }, ]; return (
{/* Header */}

查看進貨單

單號：{receipt.code}
{/* 基本資訊卡片 */}

基本資訊

進貨單編號
{receipt.code}
入庫類型 {typeMap[receipt.type] || receipt.type}
倉庫 {receipt.warehouse?.name || "-"}
供應商 {receipt.vendor?.name || "-"}
進貨日期 {formatDate(receipt.received_date)}
建立時間 {formatDateTime(receipt.created_at)}
{receipt.remark && (
備註

{receipt.remark}

)}
{/* 品項清單卡片 */}

進貨品項清單

# 商品名稱 進貨數量 單位 單價 小計 批號 效期 {receipt.items.length === 0 ? ( 無品項資料 ) : ( receipt.items.map((item, index) => ( {index + 1}
{item.product.name} {item.product.code}
{Number(item.quantity_received).toLocaleString()} {item.product.baseUnit?.name || "個"} {formatCurrency(Number(item.unit_price))} {formatCurrency(Number(item.total_amount))} {item.batch_number || "-"} {item.expiry_date ? formatDate(item.expiry_date) : "-"} )) )}
{/* 總計 */}
總計金額 {formatCurrency(receipt.items_sum_total_amount)}
); } function GoodsReceiptActions({ receipt }: { receipt: GoodsReceipt }) { const { auth } = usePage().props; const permissions = auth.user?.permissions || []; const roles = auth.user?.roles || []; const isSuperAdmin = roles.includes('super-admin'); // 權限判斷 const canView = isSuperAdmin || permissions.includes('goods_receipts.view'); const canEdit = isSuperAdmin || permissions.includes('goods_receipts.update'); const canDelete = isSuperAdmin || permissions.includes('goods_receipts.delete'); const canSubmit = canEdit || canView; // 對話框狀態 const [dialogType, setDialogType] = useState<"submit" | "delete" | null>(null); const { post, delete: destroy, processing } = useForm({}); const handleAction = () => { if (!dialogType) return; const options = { onSuccess: () => { toast.success('操作成功'); setDialogType(null); }, onError: (errors: any) => toast.error(errors.error || '操作失敗') }; switch (dialogType) { case "submit": post(route('goods-receipts.submit', receipt.id), options); break; case "delete": destroy(route('goods-receipts.destroy', receipt.id), options); break; } }; return (
{receipt.status === 'draft' && canDelete && ( )} {receipt.status === 'draft' && canSubmit && ( )} {/* 統一確認對話框 */} !open && setDialogType(null)}> {dialogType === "submit" && "確認點收"} {dialogType === "delete" && "刪除進貨單"} {dialogType === "submit" && "確定已點收無誤嗎？送出後將會更新庫存、關聯單據數量，並自動產生應付帳款，且無法再次退回。"} {dialogType === "delete" && `將刪除進貨單「${receipt.code}」。注意：此操作無法復原。`} 取消
); }