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

resources/js/Pages/Production/Recipe/Components/RecipeDetailModal.tsx

@@ -12,7 +12,7 @@ import {
     TableHeader,
     TableRow,
 } from "@/Components/ui/table";
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge } from "@/Components/shared/StatusBadge";
 import { Loader2, Package, Calendar, Clock, BookOpen } from "lucide-react";
 
 interface RecipeDetailModalProps {
@@ -34,9 +34,9 @@ export function RecipeDetailModal({ isOpen, onClose, recipe, isLoading }: Recipe
                             配方明細
                         </DialogTitle>
                         {recipe && (
-                            <Badge variant={recipe.is_active ? "default" : "secondary"} className="text-xs font-normal">
+                            <StatusBadge variant={recipe.is_active ? "success" : "neutral"} className="text-xs font-normal">
                                 {recipe.is_active ? "啟用中" : "已停用"}
-                            </Badge>
+                            </StatusBadge>
                         )}
                     </div>
 

resources/js/Pages/Production/Recipe/Index.tsx

@@ -13,7 +13,7 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { Input } from "@/Components/ui/input";
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge } from "@/Components/shared/StatusBadge";
 import { Can } from "@/Components/Permission/Can";
 import { RecipeDetailModal } from "./Components/RecipeDetailModal";
 import axios from 'axios';
@@ -231,9 +231,11 @@ export default function RecipeIndex({ recipes, filters }: Props) {
                                             {recipe.yield_quantity}
                                         </TableCell>
                                         <TableCell className="text-center">
-                                            <Badge variant={recipe.is_active ? "default" : "secondary"}>
-                                                {recipe.is_active ? "啟用" : "停用"}
-                                            </Badge>
+                                            {recipe.is_active ? (
+                                                <StatusBadge variant="success">啟用</StatusBadge>
+                                            ) : (
+                                                <StatusBadge variant="neutral">停用</StatusBadge>
+                                            )}
                                         </TableCell>
                                         <TableCell className="text-gray-500 text-sm">
                                             {new Date(recipe.updated_at).toLocaleDateString()}

resources/js/Pages/Production/Show.tsx

@@ -10,7 +10,7 @@ import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, Link, useForm, router } from "@inertiajs/react";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge } from "@/Components/shared/StatusBadge";
 import ProductionOrderStatusBadge from '@/Components/ProductionOrder/ProductionOrderStatusBadge';
 import { ProductionStatusProgressBar } from '@/Components/ProductionOrder/ProductionStatusProgressBar';
 import { PRODUCTION_ORDER_STATUS, ProductionOrderStatus } from '@/constants/production-order';
@@ -348,9 +348,9 @@ export default function ProductionShow({ productionOrder, warehouses, auth }: Pr
                             <Link2 className="h-5 w-5 text-primary-main" />
                             原料耗用與追溯
                         </h2>
-                        <Badge variant="outline" className="text-grey-3 font-medium">
+                        <StatusBadge variant="neutral" className="text-grey-3 font-medium">
                             共 {productionOrder.items.length} 項物料
-                        </Badge>
+                        </StatusBadge>
                     </div>
 
                     {productionOrder.items.length === 0 ? (