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

resources/js/Components/Inventory/GoodsReceiptStatusBadge.tsx

@@ -0,0 +1,46 @@
+import { Badge } from "@/Components/ui/badge";
+
+export type GoodsReceiptStatus = 'processing' | 'completed' | 'cancelled';
+
+export const GOODS_RECEIPT_STATUS_CONFIG: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" }> = {
+    processing: { label: "處理中", variant: "warning" },
+    completed: { label: "已完成", variant: "success" },
+    cancelled: { label: "已取消", variant: "destructive" },
+};
+
+interface GoodsReceiptStatusBadgeProps {
+    status: string;
+    className?: string;
+}
+
+export default function GoodsReceiptStatusBadge({
+    status,
+    className,
+}: GoodsReceiptStatusBadgeProps) {
+    const config = GOODS_RECEIPT_STATUS_CONFIG[status] || { label: "未知", variant: "outline" };
+
+    // Apply custom styling based on variant mapping if not using standard badge variants
+    let badgeClass = "";
+    switch (config.variant) {
+        case "success":
+            badgeClass = "bg-green-100 text-green-800 hover:bg-green-200 border-green-200";
+            break;
+        case "warning":
+            badgeClass = "bg-yellow-100 text-yellow-800 hover:bg-yellow-200 border-yellow-200";
+            break;
+        case "destructive":
+            badgeClass = "bg-red-100 text-red-800 hover:bg-red-200 border-red-200";
+            break;
+        default:
+            badgeClass = "bg-gray-100 text-gray-800 hover:bg-gray-200 border-gray-200";
+    }
+
+    return (
+        <Badge
+            variant="outline"
+            className={`${className} font-medium px-2.5 py-0.5 rounded-full border ${badgeClass}`}
+        >
+            {config.label}
+        </Badge>
+    );
+}