UI優化: 全系統狀態標籤 (StatusBadge) 統一化重構完成 (Phase 3 & 4)

resources/js/Components/Inventory/GoodsReceiptStatusBadge.tsx

@@ -1,9 +1,9 @@
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge";
 
 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" },
+export const GOODS_RECEIPT_STATUS_CONFIG: Record<string, { label: string; variant: StatusVariant }> = {
+    processing: { label: "處理中", variant: "info" },
     completed: { label: "已完成", variant: "success" },
     cancelled: { label: "已取消", variant: "destructive" },
 };
@@ -19,28 +19,9 @@ export default function GoodsReceiptStatusBadge({
 }: 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}`}
-        >
+        <StatusBadge variant={config.variant} className={className}>
             {config.label}
-        </Badge>
+        </StatusBadge>
     );
 }