style(production): 統一生產模組操作圖示 UI、權限控制與 AlertDialog

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

@@ -14,6 +14,18 @@ import { Input } from "@/Components/ui/input";
 import { Label } from "@/Components/ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
 import { Badge } from "@/Components/ui/badge";
+import { Can } from "@/Components/Permission/Can";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/Components/ui/alert-dialog";
 
 interface Recipe {
     id: number;
@@ -207,6 +219,7 @@ export default function RecipeIndex({ recipes, filters }: Props) {
                                         </TableCell>
                                         <TableCell className="text-center">
                                             <div className="flex items-center justify-center gap-2">
+                                                <Can permission="recipes.edit">
                                                     <Link href={route('recipes.edit', recipe.id)}>
                                                         <Button
                                                             variant="outline"
@@ -217,15 +230,39 @@ export default function RecipeIndex({ recipes, filters }: Props) {
                                                             <Pencil className="h-4 w-4" />
                                                         </Button>
                                                     </Link>
+                                                </Can>
+
+                                                <Can permission="recipes.delete">
+                                                    <AlertDialog>
+                                                        <AlertDialogTrigger asChild>
                                                             <Button
-                                                    variant="ghost"
+                                                                variant="outline"
                                                                 size="sm"
-                                                    onClick={() => handleDelete(recipe.id)}
+                                                                className="button-outlined-error"
-                                                    className="text-red-500 hover:text-red-700 hover:bg-red-50"
                                                                 title="刪除"
                                                             >
                                                                 <Trash2 className="h-4 w-4" />
                                                             </Button>
+                                                        </AlertDialogTrigger>
+                                                        <AlertDialogContent>
+                                                            <AlertDialogHeader>
+                                                                <AlertDialogTitle>確認刪除</AlertDialogTitle>
+                                                                <AlertDialogDescription>
+                                                                    確定要刪除配方「{recipe.name}」嗎？此操作無法復原。
+                                                                </AlertDialogDescription>
+                                                            </AlertDialogHeader>
+                                                            <AlertDialogFooter>
+                                                                <AlertDialogCancel>取消</AlertDialogCancel>
+                                                                <AlertDialogAction
+                                                                    onClick={() => handleDelete(recipe.id)}
+                                                                    className="bg-red-600 hover:bg-red-700"
+                                                                >
+                                                                    刪除
+                                                                </AlertDialogAction>
+                                                            </AlertDialogFooter>
+                                                        </AlertDialogContent>
+                                                    </AlertDialog>
+                                                </Can>
                                             </div>
                                         </TableCell>
                                     </TableRow>