From 3c939f9ce4a7cd8c90f11e78148d02b2ff6b8894 Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdras@renan.dev>
Date: Sat, 13 Dec 2025 23:05:04 -0300
Subject: [PATCH] =?UTF-8?q?ui:=20substitui=20confirm()=20por=20Dialog=20na?=
 =?UTF-8?q?=20exclus=C3=A3o=20de=20template?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Melhora UX da exclusão de templates de checklist usando
modal estilizado ao invés do alert nativo do navegador.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../settings/checklist-templates-manager.tsx  | 37 +++++++++++++++----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/settings/checklist-templates-manager.tsx b/src/components/settings/checklist-templates-manager.tsx
index 7ae3c07..f8d5af4 100644
--- a/src/components/settings/checklist-templates-manager.tsx
+++ b/src/components/settings/checklist-templates-manager.tsx
@@ -13,7 +13,7 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Checkbox } from "@/components/ui/checkbox"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
@@ -254,6 +254,8 @@ export function ChecklistTemplatesManager() {
   const [includeArchived, setIncludeArchived] = useState(false)
   const [editorOpen, setEditorOpen] = useState(false)
   const [editing, setEditing] = useState<ChecklistTemplateRow | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<ChecklistTemplateRow | null>(null)
+  const [deleting, setDeleting] = useState(false)
 
   const templates = useQuery(
     api.checklistTemplates.list,
@@ -304,19 +306,21 @@ export function ChecklistTemplatesManager() {
     }
   }
 
-  const handleDelete = async (tpl: ChecklistTemplateRow) => {
-    if (!viewerId) return
-    const ok = confirm(`Excluir o template "${tpl.name}"? Esta ação não pode ser desfeita.`)
-    if (!ok) return
+  const handleDeleteConfirm = async () => {
+    if (!viewerId || !deleteTarget) return
+    setDeleting(true)
     try {
       await removeTemplate({
         tenantId,
         actorId: viewerId,
-        templateId: tpl.id,
+        templateId: deleteTarget.id,
       })
       toast.success("Template excluído.")
+      setDeleteTarget(null)
     } catch (error) {
       toast.error(error instanceof Error ? error.message : "Falha ao excluir template.")
+    } finally {
+      setDeleting(false)
     }
   }
 
@@ -394,7 +398,7 @@ export function ChecklistTemplatesManager() {
                         variant="ghost"
                         size="sm"
                         className="text-slate-500 hover:bg-red-50 hover:text-red-700"
-                        onClick={() => handleDelete(tpl)}
+                        onClick={() => setDeleteTarget(tpl)}
                         title="Excluir template"
                       >
                         <Trash2 className="size-4" />
@@ -414,6 +418,25 @@ export function ChecklistTemplatesManager() {
         template={editing}
         companies={companyOptions}
       />
+
+      <Dialog open={Boolean(deleteTarget)} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Excluir template</DialogTitle>
+            <DialogDescription>
+              Tem certeza que deseja excluir o template <strong>&quot;{deleteTarget?.name}&quot;</strong>? Esta ação não pode ser desfeita.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button type="button" variant="outline" onClick={() => setDeleteTarget(null)} disabled={deleting}>
+              Cancelar
+            </Button>
+            <Button type="button" variant="destructive" onClick={handleDeleteConfirm} disabled={deleting}>
+              {deleting ? "Excluindo..." : "Excluir"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }