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

resources/js/Components/Product/ProductTable.tsx

@@ -7,7 +7,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 { Pencil, Trash2, ArrowUpDown, ArrowUp, ArrowDown, Eye } from "lucide-react";
 import {
   Tooltip,
@@ -122,15 +122,15 @@ export default function ProductTable({
                     <div className="flex flex-col">
                       <div className="flex items-center gap-2">
                         <span className="font-medium text-grey-0">{product.name}</span>
-                        {product.brand && <Badge variant="secondary" className="text-[10px] h-4 px-1 bg-gray-100 text-gray-500 border-none">{product.brand}</Badge>}
+                        {product.brand && <StatusBadge variant="neutral" className="text-[10px] h-4 px-1">{product.brand}</StatusBadge>}
                       </div>
                       <span className="text-xs text-gray-400 font-mono">代號: {product.code}</span>
                     </div>
                   </TableCell>
                   <TableCell>
-                    <Badge variant="outline">
+                    <StatusBadge variant="neutral">
                       {product.category?.name || '-'}
-                    </Badge>
+                    </StatusBadge>
                   </TableCell>
                   <TableCell>{product.baseUnit?.name || '-'}</TableCell>
                   <TableCell>
@@ -163,9 +163,9 @@ export default function ProductTable({
                   </TableCell>
                   <TableCell className="text-center">
                     {product.is_active ? (
-                      <Badge className="bg-green-100 text-green-700 hover:bg-green-100 border-none">啟用</Badge>
+                      <StatusBadge variant="success">啟用</StatusBadge>
                     ) : (
-                      <Badge variant="secondary" className="bg-gray-100 text-gray-500 hover:bg-gray-100 border-none">停用</Badge>
+                      <StatusBadge variant="neutral">停用</StatusBadge>
                     )}
                   </TableCell>
                   <TableCell className="text-center">