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

resources/js/Pages/Inventory/StockQuery/Index.tsx

@@ -20,7 +20,7 @@ import {
     TableHeader,
     TableRow,
 } from "@/Components/ui/table";
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
@@ -77,31 +77,31 @@ interface Props {
     categories: { id: number; name: string }[];
 }
 
-// 狀態 Badge
-const statusConfig: Record<
-    string,
-    { label: string; className: string }
-> = {
-    normal: {
-        label: "正常",
-        className: "bg-green-100 text-green-800 border-green-200",
-    },
-    negative: {
-        label: "負庫存",
-        className: "bg-red-100 text-red-800 border-red-200",
-    },
-    low_stock: {
-        label: "低庫存",
-        className: "bg-amber-100 text-amber-800 border-amber-200",
-    },
-    expiring: {
-        label: "即將過期",
-        className: "bg-yellow-100 text-yellow-800 border-yellow-200",
-    },
-    expired: {
-        label: "已過期",
-        className: "bg-red-100 text-red-800 border-red-200",
-    },
+// 狀態與樣式映射
+const getStatusVariant = (status: string): StatusVariant => {
+    switch (status) {
+        case 'negative':
+        case 'expired':
+            return 'destructive';
+        case 'low_stock':
+        case 'expiring':
+            return 'warning';
+        case 'normal':
+            return 'success';
+        default:
+            return 'neutral';
+    }
+};
+
+const getStatusLabel = (status: string): string => {
+    switch (status) {
+        case 'normal': return "正常";
+        case 'negative': return "負庫存";
+        case 'low_stock': return "低庫存";
+        case 'expiring': return "即將過期";
+        case 'expired': return "已過期";
+        default: return status;
+    }
 };
 
 // 狀態篩選選項
@@ -512,25 +512,14 @@ export default function StockQueryIndex({
                                         <TableCell className="text-center">
                                             <div className="flex flex-wrap items-center justify-center gap-1">
                                                 {item.statuses.map(
-                                                    (status) => {
-                                                        const config =
-                                                            statusConfig[
-                                                            status
-                                                            ];
-                                                        if (!config)
-                                                            return null;
-                                                        return (
-                                                            <Badge
-                                                                key={status}
-                                                                variant="outline"
-                                                                className={
-                                                                    config.className
-                                                                }
-                                                            >
-                                                                {config.label}
-                                                            </Badge>
-                                                        );
-                                                    }
+                                                    (status) => (
+                                                        <StatusBadge
+                                                            key={status}
+                                                            variant={getStatusVariant(status)}
+                                                        >
+                                                            {getStatusLabel(status)}
+                                                        </StatusBadge>
+                                                    )
                                                 )}
                                             </div>
                                         </TableCell>