From 046e0a028b8d5bfb95ab6e14e27ac58636f8aa0c Mon Sep 17 00:00:00 2001
From: sky121113 <sky121113@gmail.com>
Date: Tue, 27 Jan 2026 10:09:43 +0800
Subject: [PATCH] =?UTF-8?q?style(production):=20=E7=B5=B1=E4=B8=80?=
 =?UTF-8?q?=E7=94=9F=E7=94=A2=E6=A8=A1=E7=B5=84=E6=93=8D=E4=BD=9C=E5=9C=96?=
 =?UTF-8?q?=E7=A4=BA=20UI=E3=80=81=E6=AC=8A=E9=99=90=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E8=88=87=20AlertDialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/Pages/Production/Recipe/Index.tsx      | 75 ++++++++++++++-----
 1 file changed, 56 insertions(+), 19 deletions(-)

diff --git a/resources/js/Pages/Production/Recipe/Index.tsx b/resources/js/Pages/Production/Recipe/Index.tsx
index db0a79f..e5c27dd 100644
--- a/resources/js/Pages/Production/Recipe/Index.tsx
+++ b/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,25 +219,50 @@ export default function RecipeIndex({ recipes, filters }: Props) {
                                         </TableCell>
                                         <TableCell className="text-center">
                                             <div className="flex items-center justify-center gap-2">
-                                                <Link href={route('recipes.edit', recipe.id)}>
-                                                    <Button
-                                                        variant="outline"
-                                                        size="sm"
-                                                        className="button-outlined-primary"
-                                                        title="編輯"
-                                                    >
-                                                        <Pencil className="h-4 w-4" />
-                                                    </Button>
-                                                </Link>
-                                                <Button
-                                                    variant="ghost"
-                                                    size="sm"
-                                                    onClick={() => handleDelete(recipe.id)}
-                                                    className="text-red-500 hover:text-red-700 hover:bg-red-50"
-                                                    title="刪除"
-                                                >
-                                                    <Trash2 className="h-4 w-4" />
-                                                </Button>
+                                                <Can permission="recipes.edit">
+                                                    <Link href={route('recipes.edit', recipe.id)}>
+                                                        <Button
+                                                            variant="outline"
+                                                            size="sm"
+                                                            className="button-outlined-primary"
+                                                            title="編輯"
+                                                        >
+                                                            <Pencil className="h-4 w-4" />
+                                                        </Button>
+                                                    </Link>
+                                                </Can>
+
+                                                <Can permission="recipes.delete">
+                                                    <AlertDialog>
+                                                        <AlertDialogTrigger asChild>
+                                                            <Button
+                                                                variant="outline"
+                                                                size="sm"
+                                                                className="button-outlined-error"
+                                                                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>