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

resources/js/Pages/ShippingOrder/Show.tsx

@@ -2,7 +2,7 @@ import { ArrowLeft, Package, Info, CheckCircle2, AlertCircle, Trash2, Edit } fro
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, Link, router } from "@inertiajs/react";
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge } from "@/Components/shared/StatusBadge";
 import { toast } from "sonner";
 import ActivityLog from "@/Components/ActivityLog/ActivityLog";
 
@@ -31,16 +31,16 @@ export default function ShippingOrderShow({ order, activities = [] }: Props) {
     };
 
     const getStatusBadge = (status: string) => {
-        switch (status) {
-            case 'draft':
-                return <Badge variant="secondary" className="px-3 py-1">草稿</Badge>;
-            case 'completed':
-                return <Badge className="bg-green-100 text-green-800 px-3 py-1">已完成</Badge>;
-            case 'cancelled':
-                return <Badge variant="destructive" className="px-3 py-1">已取消</Badge>;
-            default:
-                return <Badge>{status}</Badge>;
-        }
+        const statusConfig: Record<string, { variant: "neutral" | "success" | "destructive", label: string }> = {
+            draft: { variant: 'neutral', label: '草稿' },
+            completed: { variant: 'success', label: '已完成' },
+            cancelled: { variant: 'destructive', label: '已取消' },
+        };
+
+        const config = statusConfig[status];
+        if (!config) return <StatusBadge variant="neutral">{status}</StatusBadge>;
+
+        return <StatusBadge variant={config.variant}>{config.label}</StatusBadge>;
     };
 
     return (
@@ -130,7 +130,7 @@ export default function ShippingOrderShow({ order, activities = [] }: Props) {
                                 <h2 className="text-lg font-bold flex items-center gap-2">
                                     <Package className="h-5 w-5 text-primary-main" /> 出貨品項清單
                                 </h2>
-                                <Badge variant="outline">{order.items.length} 個品項</Badge>
+                                <StatusBadge variant="neutral">{order.items.length} 個品項</StatusBadge>
                             </div>
                             <div className="overflow-x-auto">
                                 <table className="w-full text-sm">
@@ -151,7 +151,7 @@ export default function ShippingOrderShow({ order, activities = [] }: Props) {
                                                     <div className="text-xs text-gray-500 font-mono">{item.product_code}</div>
                                                 </td>
                                                 <td className="px-6 py-4">
-                                                    <Badge variant="outline" className="font-mono">{item.batch_number || 'N/A'}</Badge>
+                                                    <StatusBadge variant="neutral" className="font-mono">{item.batch_number || 'N/A'}</StatusBadge>
                                                 </td>
                                                 <td className="px-6 py-4 text-right">
                                                     <span className="font-medium text-gray-900">{parseFloat(item.quantity).toLocaleString()}</span>