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

resources/js/Components/Warehouse/SafetyStock/AddSafetyStockDialog.tsx

@@ -18,7 +18,7 @@ import { Label } from "@/Components/ui/label";
 import { Checkbox } from "@/Components/ui/checkbox";
 import { SafetyStockSetting, Product } from "@/types/warehouse";
 import { toast } from "sonner";
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge } from "@/Components/shared/StatusBadge";
 
 interface AddSafetyStockDialogProps {
     open: boolean;
@@ -193,7 +193,7 @@ export default function AddSafetyStockDialog({
                                                 <div className="flex-1">
                                                     <div className="font-medium">{product.name}</div>
                                                 </div>
-                                                <Badge variant="outline">{product.type}</Badge>
+                                                <StatusBadge variant="neutral">{product.type}</StatusBadge>
                                             </div>
                                         );
                                     })}
@@ -223,7 +223,7 @@ export default function AddSafetyStockDialog({
                                             <div className="flex items-center justify-between">
                                                 <div className="flex items-center gap-2">
                                                     <span className="font-medium">{product.name}</span>
-                                                    <Badge variant="outline">{product.type}</Badge>
+                                                    <StatusBadge variant="neutral">{product.type}</StatusBadge>
                                                 </div>
                                             </div>
                                             <div className="flex items-center gap-2">

resources/js/Components/Warehouse/SafetyStock/SafetyStockList.tsx

@@ -2,7 +2,7 @@
  * 安全庫存設定列表
  */
 
-import { Trash2, Pencil, CheckCircle, Package, AlertTriangle } from "lucide-react";
+import { Trash2, Pencil, Package } from "lucide-react";
 import {
     Table,
     TableBody,
@@ -12,7 +12,7 @@ import {
     TableRow,
 } from "@/Components/ui/table";
 import { Button } from "@/Components/ui/button";
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge } from "@/Components/shared/StatusBadge";
 import { SafetyStockSetting, WarehouseInventory } from "@/types/warehouse";
 import { calculateProductTotalStock, getSafetyStockStatus } from "@/utils/inventory";
 import { Can } from "@/Components/Permission/Can";
@@ -57,38 +57,35 @@ export default function SafetyStockList({
         // 如果是自動帶入的品項且尚未存檔，顯示「未設定」
         if (isNew) {
             return (
-                <Badge variant="outline" className="text-gray-400 border-gray-200 font-normal">
+                <StatusBadge variant="neutral" className="border-gray-200 font-normal text-gray-400">
                     未設定
-                </Badge>
+                </StatusBadge>
             );
         }
 
         const status = getSafetyStockStatus(quantity, safetyStock);
-        switch (status) {
-            case "正常":
-                return (
-                    <Badge className="bg-green-100 text-green-700 border-green-300 hover:bg-green-100">
-                        <CheckCircle className="mr-1 h-3 w-3" />
-                        正常
-                    </Badge>
-                );
-            case "接近": // 數量 <= 安全庫存 * 1.2
-                return (
-                    <Badge className="bg-yellow-100 text-yellow-700 border-yellow-300 hover:bg-yellow-100">
-                        <AlertTriangle className="mr-1 h-3 w-3" />
-                        接近
-                    </Badge>
-                );
-            case "低於": // 數量 < 安全庫存
-                return (
-                    <Badge className="bg-orange-100 text-orange-700 border-orange-300 hover:bg-orange-100">
-                        <AlertTriangle className="mr-1 h-3 w-3" />
-                        低於
-                    </Badge>
-                );
-            default:
-                return null;
+        if (status === '正常') {
+            return (
+                <StatusBadge variant="success">
+                    正常
+                </StatusBadge>
+            );
         }
+        if (status === '接近') { // 數量 <= 安全庫存 * 1.2
+            return (
+                <StatusBadge variant="warning">
+                    接近
+                </StatusBadge>
+            );
+        }
+        if (status === '低於') { // 數量 < 安全庫存
+            return (
+                <StatusBadge variant="destructive">
+                    低於
+                </StatusBadge>
+            );
+        }
+        return null;
     };
 
     return (
@@ -118,9 +115,9 @@ export default function SafetyStockList({
                                     {setting.productName}
                                 </TableCell>
                                 <TableCell>
-                                    <Badge variant="outline" className="font-normal">
+                                    <StatusBadge variant="neutral">
                                         {setting.productType}
-                                    </Badge>
+                                    </StatusBadge>
                                 </TableCell>
                                 <TableCell className="text-right font-semibold">
                                     {setting.safetyStock} {setting.unit || '個'}