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

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 || '個'}