feat: 完成進貨單自動拋轉應付帳款流程與AP介面優化

1. 新增 AccountPayable (應付帳款) 模組，包含 Migration、Model、Service 與 Controller 2. 修改 GoodsReceipt (進貨單) 流程，在確認進貨時自動產生對應的應付帳款單 (AP-YYYYMMDD-XX) 3. 實作應付帳款詳細頁面 (Show.tsx)，包含發票登記與標記付款功能 4. 修正應付帳款 Show 頁面的排版，將發票資訊套用標準的綠色背景區塊，並調整按鈕位置 5. 更新相關的 Service Provider 與 Routes
2026-02-24 16:46:55 +08:00
parent aaa93a921e
commit 455f945296
33 changed files with 1708 additions and 186 deletions
--- a/resources/js/Pages/Inventory/GoodsReceipt/Index.tsx
+++ b/resources/js/Pages/Inventory/GoodsReceipt/Index.tsx
@@ -106,8 +106,8 @@ export default function GoodsReceiptIndex({ receipts, filters, warehouses }: Pro

    const statusOptions = [
        { label: '全部狀態', value: 'all' },
+        { label: '草稿', value: 'draft' },
        { label: '已完成', value: 'completed' },
-        { label: '處理中', value: 'processing' },
    ];

    const warehouseOptions = [
--- a/resources/js/Pages/Inventory/GoodsReceipt/Show.tsx
+++ b/resources/js/Pages/Inventory/GoodsReceipt/Show.tsx
@@ -5,7 +5,8 @@
 import { ArrowLeft, Package } from "lucide-react";
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
-import { Head, Link } from "@inertiajs/react";
+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 {
@@ -16,8 +17,20 @@ import {
    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 { getShowBreadcrumbs } from "@/utils/breadcrumb";
+import { PageProps } from "@/types/global";
+import { toast } from "sonner";
+
+// ... (省略中間介面定義)

 interface GoodsReceiptItem {
    id: number;
@@ -66,34 +79,43 @@ export default function ViewGoodsReceiptPage({ receipt }: Props) {
        other: "其他入庫",
    };

+    const breadcrumbs = [
+        { label: "庫存管理", href: "#" },
+        { label: "進貨單管理", href: route("goods-receipts.index") },
+        { label: `單據詳情 (#${receipt.code})` },
+    ];
+
    return (
-        <AuthenticatedLayout breadcrumbs={getShowBreadcrumbs("goodsReceipts", `詳情 (#${receipt.code})`)}>
+        <AuthenticatedLayout breadcrumbs={breadcrumbs}>
            <Head title={`進貨單詳情 - ${receipt.code}`} />
            <div className="container mx-auto p-6 max-w-7xl">
                {/* Header */}
                <div className="mb-6">
-                    <Link href="/goods-receipts">
+                    <Link href={route("goods-receipts.index")}>
                        <Button
                            variant="outline"
-                            className="gap-2 button-outlined-primary mb-6"
+                            className="gap-2 button-outlined-primary"
                        >
                            <ArrowLeft className="h-4 w-4" />
                            返回進貨單列表
                        </Button>
                    </Link>
+                </div>

-                    <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">
+                <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>
+                        <div className="flex items-center gap-2 mt-1">
                            <GoodsReceiptStatusBadge status={receipt.status} />
+                            <span className="text-gray-500 text-sm">單號：{receipt.code}</span>
                        </div>
                    </div>
+                    <div className="flex items-center gap-3">
+                        <GoodsReceiptActions receipt={receipt} />
+                    </div>
                </div>

                <div className="grid grid-cols-1 gap-8">
@@ -219,3 +241,95 @@ export default function ViewGoodsReceiptPage({ receipt }: Props) {
        </AuthenticatedLayout>
    );
 }
+
+function GoodsReceiptActions({ receipt }: { receipt: GoodsReceipt }) {
+    const { auth } = usePage<PageProps>().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 (
+        <div className="flex items-center gap-2">
+            {receipt.status === 'draft' && canDelete && (
+                <Button
+                    onClick={() => setDialogType("delete")}
+                    variant="outline"
+                    className="button-outlined-error border-red-600 text-red-600 hover:bg-red-50"
+                    disabled={processing}
+                >
+                    刪除
+                </Button>
+            )}
+
+            {receipt.status === 'draft' && canSubmit && (
+                <Button
+                    onClick={() => setDialogType("submit")}
+                    className="button-filled-primary shadow-primary/20"
+                    disabled={processing}
+                >
+                    確認點收
+                </Button>
+            )}
+
+            {/* 統一確認對話框 */}
+            <AlertDialog open={dialogType !== null} onOpenChange={(open) => !open && setDialogType(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>
+                            {dialogType === "submit" && "確認點收"}
+                            {dialogType === "delete" && "刪除進貨單"}
+                        </AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {dialogType === "submit" && "確定已點收無誤嗎？送出後將會更新庫存、關聯單據數量，並自動產生應付帳款，且無法再次退回。"}
+                            {dialogType === "delete" && `將刪除進貨單「${receipt.code}」。注意：此操作無法復原。`}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+
+                    <AlertDialogFooter>
+                        <AlertDialogCancel disabled={processing}>取消</AlertDialogCancel>
+                        <Button
+                            onClick={handleAction}
+                            disabled={processing}
+                            className={dialogType === "delete" ? "button-filled-error" : "button-filled-primary"}
+                        >
+                            {processing ? "處理中..." : "確定"}
+                        </Button>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    );
+}