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

resources/js/Components/Warehouse/Inventory/InventoryTable.tsx

@@ -5,7 +5,7 @@
 
 import { useState, useEffect } from "react";
 
-import { AlertTriangle, Trash2, Eye, ChevronDown, ChevronRight, CheckCircle, Package } from "lucide-react";
+import { Trash2, Eye, ChevronDown, ChevronRight, Package, AlertTriangle } from "lucide-react";
 import {
     Table,
     TableBody,
@@ -15,7 +15,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 {
     Collapsible,
     CollapsibleContent,
@@ -98,25 +98,22 @@ export default function InventoryTable({
 
     // 獲取狀態徽章
     const getStatusBadge = (status: string) => {
-        switch (status) {
-            case "正常":
-                return (
-                    <Badge className="bg-green-100 text-green-700 border-green-300">
-                        <CheckCircle className="mr-1 h-3 w-3" />
-                        正常
-                    </Badge>
-                );
-
-            case "低於":
-                return (
-                    <Badge className="bg-red-100 text-red-700 border-red-300">
-                        <AlertTriangle className="mr-1 h-3 w-3" />
-                        低於
-                    </Badge>
-                );
-            default:
-                return null;
+        if (status === '正常') {
+            return (
+                <StatusBadge variant="success">
+                    正常
+                </StatusBadge>
+            );
         }
+
+        if (status === '低於') {
+            return (
+                <StatusBadge variant="destructive">
+                    低於
+                </StatusBadge>
+            );
+        }
+        return null;
     };
 
     return (
@@ -168,10 +165,9 @@ export default function InventoryTable({
                                                 {isVending ? '' : (hasInventory ? `${group.batches.length} 個批號` : '無庫存')}
                                             </span>
                                             {group.batches.some(b => b.expiryDate && new Date(b.expiryDate) < new Date()) && (
-                                                <Badge className="bg-red-50 text-red-600 border-red-200">
-                                                    <AlertTriangle className="mr-1 h-3 w-3" />
+                                                <StatusBadge variant="destructive">
                                                     含過期項目
-                                                </Badge>
+                                                </StatusBadge>
                                             )}
                                         </div>
                                         <div className="flex items-center gap-4">
@@ -199,9 +195,9 @@ export default function InventoryTable({
                                                     </div>
                                                 </>
                                             ) : (
-                                                <Badge variant="outline" className="text-gray-500">
+                                                <StatusBadge variant="neutral">
                                                     未設定
-                                                </Badge>
+                                                </StatusBadge>
                                             )}
                                             {onViewProduct && (
                                                 <Button