feat: 統一進貨單 UI、修復庫存異動紀錄與廠商詳情顯示報錯

resources/js/Components/PurchaseOrder/PurchaseOrderStatusBadge.tsx

@@ -4,6 +4,7 @@
 
 import { Badge } from "@/Components/ui/badge";
 import { PurchaseOrderStatus } from "@/types/purchase-order";
+import { STATUS_CONFIG } from "@/constants/purchase-order";
 
 interface PurchaseOrderStatusBadgeProps {
     status: PurchaseOrderStatus;
@@ -14,35 +15,12 @@ export default function PurchaseOrderStatusBadge({
     status,
     className,
 }: PurchaseOrderStatusBadgeProps) {
-    const getStatusConfig = (status: PurchaseOrderStatus) => {
-        switch (status) {
-            case "draft":
-                return { label: "草稿", className: "bg-gray-100 text-gray-700 border-gray-200" };
-            case "pending":
-                return { label: "待審核", className: "bg-blue-100 text-blue-700 border-blue-200" };
-            case "processing":
-                return { label: "處理中", className: "bg-yellow-100 text-yellow-700 border-yellow-200" };
-            case "shipping":
-                return { label: "運送中", className: "bg-purple-100 text-purple-700 border-purple-200" };
-            case "confirming":
-                return { label: "待確認", className: "bg-orange-100 text-orange-700 border-orange-200" };
-            case "completed":
-                return { label: "已完成", className: "bg-green-100 text-green-700 border-green-200" };
-            case "cancelled":
-                return { label: "已取消", className: "bg-red-100 text-red-700 border-red-200" };
-            case "partial":
-                return { label: "部分進貨", className: "bg-blue-50 text-blue-600 border-blue-100" };
-            default:
-                return { label: "未知", className: "bg-gray-100 text-gray-700 border-gray-200" };
-        }
-    };
-
-    const config = getStatusConfig(status);
+    const config = STATUS_CONFIG[status] || { label: "未知", variant: "outline" };
 
     return (
         <Badge
-            variant="outline"
-            className={`${config.className} ${className} font-medium px-2.5 py-0.5 rounded-full`}
+            variant={config.variant}
+            className={`${className} font-medium px-2.5 py-0.5 rounded-full`}
         >
             {config.label}
         </Badge>

resources/js/Components/PurchaseOrder/StatusProgressBar.tsx

@@ -10,13 +10,13 @@ interface StatusProgressBarProps {
 }
 
 // 流程步驟定義
-const FLOW_STEPS: { key: PurchaseOrderStatus | "approved"; label: string }[] = [
+const FLOW_STEPS: { key: PurchaseOrderStatus; label: string }[] = [
     { key: "draft", label: "草稿" },
-    { key: "pending", label: "待審核" },
-    { key: "processing", label: "處理中" },
-    { key: "shipping", label: "運送中" },
-    { key: "confirming", label: "待確認" },
-    { key: "completed", label: "已完成" },
+    { key: "pending", label: "簽核中" },
+    { key: "approved", label: "已核准" },
+    { key: "partial", label: "部分收貨" },
+    { key: "completed", label: "全數收貨" },
+    { key: "closed", label: "已結案" },
 ];
 
 export function StatusProgressBar({ currentStatus }: StatusProgressBarProps) {
@@ -82,7 +82,7 @@ export function StatusProgressBar({ currentStatus }: StatusProgressBarProps) {
                                                 : "text-gray-400"
                                             }`}
                                     >
-                                        {isRejectedAtThisStep ? "已取消" : step.label}
+                                        {isRejectedAtThisStep ? "已作廢" : step.label}
                                     </p>
                                 </div>
                             </div>