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

resources/js/Components/ProductionOrder/ProductionOrderStatusBadge.tsx

@@ -1,8 +1,4 @@
-/**
- * 生產工單狀態標籤組件
- */
-
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge";
 import { ProductionOrderStatus, STATUS_CONFIG } from "@/constants/production-order";
 
 interface ProductionOrderStatusBadgeProps {
@@ -16,31 +12,31 @@ export default function ProductionOrderStatusBadge({
 }: ProductionOrderStatusBadgeProps) {
     const config = STATUS_CONFIG[status] || { label: "未知", variant: "outline" };
 
-    const getStatusStyles = (status: string) => {
+    const getVariant = (status: string): StatusVariant => {
         switch (status) {
             case 'draft':
-                return 'bg-gray-100 text-gray-600 border-gray-200';
+                return 'neutral';
             case 'pending':
-                return 'bg-blue-50 text-blue-600 border-blue-200';
+                return 'warning';
             case 'approved':
-                return 'bg-primary text-primary-foreground border-transparent';
+                return 'success';
             case 'in_progress':
-                return 'bg-amber-50 text-amber-600 border-amber-200';
+                return 'info';
             case 'completed':
-                return 'bg-primary text-primary-foreground border-transparent transition-all shadow-sm';
+                return 'success';
             case 'cancelled':
-                return 'bg-destructive text-destructive-foreground border-transparent';
+                return 'destructive';
             default:
-                return 'bg-gray-50 text-gray-500 border-gray-200';
+                return 'neutral';
         }
     };
 
     return (
-        <Badge
-            variant="outline"
-            className={`${className} ${getStatusStyles(status)} font-bold px-2.5 py-0.5 rounded-full border shadow-none`}
+        <StatusBadge
+            variant={getVariant(status)}
+            className={className}
         >
             {config.label}
-        </Badge>
+        </StatusBadge>
     );
 }