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()}