add alert

apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/columns.tsx

@@ -13,6 +13,17 @@ import { toast } from 'sonner'
 
 import { Abbr } from '@/components/abbr'
 import { useDataTable } from '@/components/data-table/data-table'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@repo/ui/components/ui/alert-dialog'
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { Button } from '@repo/ui/components/ui/button'
 import {
@@ -139,26 +150,48 @@ function UnlinkMenuItem({ userId }: { userId: string }) {
   const { orgid } = useParams()
   const { table } = useDataTable<User>()
 
+  const unlink = async (e) => {
+    e.preventDefault()
+    set(true)
+
+    const r = await fetch(`/~/api/orgs/${orgid}/users/${userId}`, {
+      method: 'DELETE'
+    })
+
+    if (r.ok) {
+      toast.info('O colaborador foi desvinculado')
+      // @ts-ignore
+      table.options.meta?.removeRow?.(userId)
+    }
+  }
+
   return (
-    <DropdownMenuItem
-      variant="destructive"
-      disabled={loading}
-      onClick={async (e) => {
-        e.preventDefault()
-        set(true)
-
-        const r = await fetch(`/~/api/orgs/${orgid}/users/${userId}`, {
-          method: 'DELETE'
-        })
-
-        if (r.ok) {
-          toast.info('O colaborador foi desvinculado')
-          // @ts-ignore
-          table.options.meta?.removeRow?.(userId)
-        }
-      }}
-    >
-      {loading ? <Spinner /> : <UserRoundMinusIcon />} Desvincular
-    </DropdownMenuItem>
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <DropdownMenuItem
+          variant="destructive"
+          onSelect={(e) => e.preventDefault()}
+        >
+          <UserRoundMinusIcon /> Desvincular
+        </DropdownMenuItem>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Tem certeza absoluta?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Esta ação não pode ser desfeita. Isso removerá permanentemente o
+            vínculo deste colaborador.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="*:cursor-pointer">
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction asChild>
+            <Button onClick={unlink} disabled={loading} variant="destructive">
+              {loading ? <Spinner /> : null} Continuar
+            </Button>
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }