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

resources/js/Pages/Dashboard.tsx

@@ -16,7 +16,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";
 
 interface AbnormalItem {
@@ -103,6 +103,21 @@ export default function Dashboard({ stats, abnormalItems }: Props) {
         },
     ];
 
+    const getStatusVariant = (status: string): StatusVariant => {
+        switch (status) {
+            case 'negative': return 'destructive';
+            case 'low_stock': return 'warning';
+            case 'expiring': return 'warning';
+            case 'expired': return 'destructive';
+            default: return 'neutral';
+        }
+    };
+
+    const getStatusLabel = (status: string): string => {
+        const config = statusConfig[status];
+        return config ? config.label : status;
+    };
+
     return (
         <AuthenticatedLayout
             breadcrumbs={[
@@ -227,25 +242,14 @@ export default function Dashboard({ stats, abnormalItems }: Props) {
                                         <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>