feat: add deletion confirmation dialogs to admin actions

Adds alert dialog confirmations before deleting items across admin menus:
- Roles
- Teams
- Users
- Templates
- SLA policies
- OIDC providers
- Business hours
- Status
- Inboxes
- Automation rules

frontend/src/components/admin/automation/RuleList.vue

@@ -23,7 +23,7 @@
             <DropdownMenuItem @click="navigateToEditRule(rule.id)">
               <span>Edit</span>
             </DropdownMenuItem>
-            <DropdownMenuItem @click="$emit('delete-rule', rule.id)">
+            <DropdownMenuItem @click="() => (alertOpen = true)">
               <span>Delete</span>
             </DropdownMenuItem>
             <DropdownMenuItem @click="$emit('toggle-rule', rule.id)" v-if="rule.enabled">
@@ -36,27 +36,52 @@
         </DropdownMenu>
       </div>
     </div>
-    <p class="text-sm-muted">
-      {{ rule.description }}
-    </p>
+    <p class="text-sm-muted">{{ rule.description }}</p>
   </div>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Rule</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the automation rule.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { EllipsisVertical } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import { Badge } from '@/components/ui/badge'
 
 const router = useRouter()
-defineEmits(['delete-rule', 'toggle-rule'])
+const alertOpen = ref(false)
+const emit = defineEmits(['delete-rule', 'toggle-rule'])
 
-defineProps({
+const props = defineProps({
   rule: {
     type: Object,
     required: true
@@ -66,4 +91,9 @@ defineProps({
 const navigateToEditRule = (id) => {
   router.push({ path: `/admin/automations/${id}/edit` })
 }
+
+const handleDelete = () => {
+  emit('delete-rule', props.rule.id)
+  alertOpen.value = false
+}
 </script>

frontend/src/components/admin/business_hours/dataTableDropdown.vue

@@ -1,11 +1,52 @@
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="w-8 h-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <MoreHorizontal class="w-4 h-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="edit(props.role.id)">Edit</DropdownMenuItem>
+      <DropdownMenuItem @click="() => (alertOpen = true)">Delete</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Business Hours</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the business hours.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+
 <script setup>
+import { ref } from 'vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import api from '@/api'
@@ -14,39 +55,27 @@ import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 
 const router = useRouter()
 const emit = useEmitter()
+const alertOpen = ref(false)
+
 const props = defineProps({
-    role: {
-        type: Object,
-        required: true,
-        default: () => ({
-            id: ''
-        })
-    }
+  role: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: ''
+    })
+  }
 })
 
-function edit (id) {
-    router.push({ name: 'edit-business-hours', params: { id } })
+function edit(id) {
+  router.push({ name: 'edit-business-hours', params: { id } })
 }
 
-async function deleteBusinessHours (id) {
-    await api.deleteBusinessHours(id)
-    emit.emit(EMITTER_EVENTS.REFRESH_LIST, {
-        model: 'business_hours'
-    })
+async function handleDelete() {
+  await api.deleteBusinessHours(props.role.id)
+  alertOpen.value = false
+  emit.emit(EMITTER_EVENTS.REFRESH_LIST, {
+    model: 'business_hours'
+  })
 }
 </script>
-
-<template>
-    <DropdownMenu>
-        <DropdownMenuTrigger as-child>
-            <Button variant="ghost" class="w-8 h-8 p-0">
-                <span class="sr-only">Open menu</span>
-                <MoreHorizontal class="w-4 h-4" />
-            </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-            <DropdownMenuItem @click="edit(props.role.id)"> Edit </DropdownMenuItem>
-            <DropdownMenuItem @click="deleteBusinessHours(props.role.id)"> Delete </DropdownMenuItem>
-        </DropdownMenuContent>
-    </DropdownMenu>
-</template>

frontend/src/components/admin/conversation/macros/dataTableDropdown.vue

@@ -8,12 +8,28 @@
     </DropdownMenuTrigger>
     <DropdownMenuContent>
       <DropdownMenuItem @click="editMacro">Edit</DropdownMenuItem>
-      <DropdownMenuItem @click="deleteMacro">Delete</DropdownMenuItem>
+      <DropdownMenuItem @click="() => (isDeleteOpen = true)">Delete</DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
+
+  <AlertDialog :open="isDeleteOpen" @update:open="isDeleteOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Macro</AlertDialogTitle>
+        <AlertDialogDescription>
+          Are you sure you want to delete this macro? This action cannot be undone.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
   DropdownMenu,
@@ -21,8 +37,17 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
-import '@vueup/vue-quill/dist/vue-quill.snow.css'
 import { useEmitter } from '@/composables/useEmitter'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useRouter } from 'vue-router'
@@ -30,6 +55,8 @@ import api from '@/api/index.js'
 
 const router = useRouter()
 const emit = useEmitter()
+const isDeleteOpen = ref(false)
+
 const props = defineProps({
   macro: {
     type: Object,
@@ -37,11 +64,10 @@ const props = defineProps({
   }
 })
 
-const deleteMacro = async () => {
+const handleDelete = async () => {
   await api.deleteMacro(props.macro.id)
-  emit.emit(EMITTER_EVENTS.REFRESH_LIST, {
-    model: 'macros'
-  })
+  isDeleteOpen.value = false
+  emit.emit(EMITTER_EVENTS.REFRESH_LIST, { model: 'macros' })
 }
 
 const editMacro = () => {

frontend/src/components/admin/conversation/status/dataTableDropdown.vue

@@ -9,26 +9,47 @@
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DialogTrigger as-child>
-          <DropdownMenuItem> Edit </DropdownMenuItem>
+          <DropdownMenuItem>Edit</DropdownMenuItem>
         </DialogTrigger>
-        <DropdownMenuItem @click="deleteStatus"
-          v-if="CONVERSATION_DEFAULT_STATUSES_LIST.includes(props.status.name) === false"> Delete </DropdownMenuItem>
+        <DropdownMenuItem
+          @click="() => (alertOpen = true)"
+          v-if="!CONVERSATION_DEFAULT_STATUSES_LIST.includes(props.status.name)"
+        >
+          Delete
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
     <DialogContent class="sm:max-w-[425px]">
       <DialogHeader>
         <DialogTitle>Edit status</DialogTitle>
-        <DialogDescription> Change the status name. Click save when you're done. </DialogDescription>
+        <DialogDescription>
+          Change the status name. Click save when you're done.
+        </DialogDescription>
       </DialogHeader>
       <StatusForm @submit.prevent="onSubmit">
         <template #footer>
           <DialogFooter class="mt-10">
-            <Button type="submit"> Save changes </Button>
+            <Button type="submit">Save changes</Button>
           </DialogFooter>
         </template>
       </StatusForm>
     </DialogContent>
   </Dialog>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Status</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the status.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
 </template>
 
 <script setup>
@@ -40,6 +61,16 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
@@ -61,12 +92,13 @@ import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import api from '@/api/index.js'
 
 const dialogOpen = ref(false)
+const alertOpen = ref(false)
 const emit = useEmitter()
 
 const props = defineProps({
   status: {
     type: Object,
-    required: true,
+    required: true
   }
 })
 
@@ -80,18 +112,17 @@ const onSubmit = form.handleSubmit(async (values) => {
   emitRefreshStatusList()
 })
 
-const deleteStatus = async () => {
+const handleDelete = async () => {
   try {
     await api.deleteStatus(props.status.id)
+    alertOpen.value = false
+    emitRefreshStatusList()
   } catch (error) {
     emit.emit(EMITTER_EVENTS.SHOW_TOAST, {
       title: 'Error',
       variant: 'destructive',
       description: handleHTTPError(error).message
     })
-  } finally {
-    dialogOpen.value = false
-    emitRefreshStatusList()
   }
 }
 
@@ -101,7 +132,6 @@ const emitRefreshStatusList = () => {
   })
 }
 
-// Watch for changes in initialValues and update the form.
 watch(
   () => props.status,
   (newValues) => {

frontend/src/components/admin/conversation/tags/dataTableDropdown.vue

@@ -11,7 +11,7 @@
         <DialogTrigger as-child>
           <DropdownMenuItem> Edit </DropdownMenuItem>
         </DialogTrigger>
-        <DropdownMenuItem @click="deleteTag"> Delete </DropdownMenuItem>
+        <DropdownMenuItem @click="openAlertDialog"> Delete </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
     <DialogContent class="sm:max-w-[425px]">
@@ -28,6 +28,21 @@
       </TagsForm>
     </DialogContent>
   </Dialog>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently the tag.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="deleteTag">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
 </template>
 
 <script setup>
@@ -52,12 +67,23 @@ import {
   DialogTitle,
   DialogTrigger
 } from '@/components/ui/dialog'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import { useEmitter } from '@/composables/useEmitter'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import TagsForm from './TagsForm.vue'
 import api from '@/api/index.js'
 
 const dialogOpen = ref(false)
+const alertOpen = ref(false)
 const emit = useEmitter()
 
 const props = defineProps({
@@ -81,6 +107,10 @@ const onSubmit = form.handleSubmit(async (values) => {
   emitRefreshTagsList()
 })
 
+const openAlertDialog = () => {
+  alertOpen.value = true
+}
+
 const deleteTag = async () => {
   await api.deleteTag(props.tag.id)
   dialogOpen.value = false

frontend/src/components/admin/conversation/tags/formSchema.js

@@ -5,7 +5,7 @@ export const formSchema = z.object({
     .string({
       required_error: 'Tag name is required.'
     })
-    .min(1, {
-      message: 'Tag name must be at least 1 character.'
+    .min(3, {
+      message: 'Tag name must be at least 3 characters.'
     })
 })

frontend/src/components/admin/inbox/InboxDataTableDropDown.vue

@@ -1,4 +1,39 @@
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="w-8 h-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <MoreHorizontal class="w-4 h-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="editInbox(props.inbox.id)">Edit</DropdownMenuItem>
+      <DropdownMenuItem @click="() => (alertOpen = true)">Delete</DropdownMenuItem>
+      <DropdownMenuItem @click="toggleInbox(props.inbox.id)" v-if="props.inbox.enabled">
+        Disable
+      </DropdownMenuItem>
+      <DropdownMenuItem @click="toggleInbox(props.inbox.id)" v-else>Enable</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Inbox</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the inbox.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+
 <script setup>
+import { ref } from 'vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
   DropdownMenu,
@@ -6,8 +41,19 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 
+const alertOpen = ref(false)
 const props = defineProps({
   inbox: {
     type: Object,
@@ -21,30 +67,12 @@ function editInbox(id) {
   emit('editInbox', id)
 }
 
-function deleteInbox(id) {
-  emit('deleteInbox', id)
+function handleDelete() {
+  emit('deleteInbox', props.inbox.id)
+  alertOpen.value = false
 }
 
 function toggleInbox(id) {
   emit('toggleInbox', id)
 }
 </script>
-
-<template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
-      <Button variant="ghost" class="w-8 h-8 p-0">
-        <span class="sr-only">Open menu</span>
-        <MoreHorizontal class="w-4 h-4" />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuItem @click="editInbox(props.inbox.id)"> Edit </DropdownMenuItem>
-      <DropdownMenuItem @click="deleteInbox(props.inbox.id)"> Delete </DropdownMenuItem>
-      <DropdownMenuItem @click="toggleInbox(props.inbox.id)" v-if="props.inbox.enabled">
-        Disable
-      </DropdownMenuItem>
-      <DropdownMenuItem @click="toggleInbox(props.inbox.id)" v-else> Enable </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</template>

frontend/src/components/admin/oidc/dataTableDropdown.vue

@@ -1,4 +1,36 @@
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="w-8 h-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <MoreHorizontal class="w-4 h-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="edit(props.role.id)">Edit</DropdownMenuItem>
+      <DropdownMenuItem @click="() => (alertOpen = true)">Delete</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete OIDC Provider</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the OIDC provider
+          configuration.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+
 <script setup>
+import { ref } from 'vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
   DropdownMenu,
@@ -6,6 +38,16 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import api from '@/api'
@@ -14,6 +56,8 @@ import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 
 const router = useRouter()
 const emit = useEmitter()
+const alertOpen = ref(false)
+
 const props = defineProps({
   role: {
     type: Object,
@@ -24,29 +68,15 @@ const props = defineProps({
   }
 })
 
-function edit (id) {
+function edit(id) {
   router.push({ path: `/admin/oidc/${id}/edit` })
 }
 
-async function deleteOIDC (id) {
-  await api.deleteOIDC(id)
+async function handleDelete() {
+  await api.deleteOIDC(props.role.id)
+  alertOpen.value = false
   emit.emit(EMITTER_EVENTS.REFRESH_LIST, {
     model: 'oidc'
   })
 }
 </script>
-
-<template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
-      <Button variant="ghost" class="w-8 h-8 p-0">
-        <span class="sr-only">Open menu</span>
-        <MoreHorizontal class="w-4 h-4" />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuItem @click="edit(props.role.id)"> Edit </DropdownMenuItem>
-      <DropdownMenuItem @click="deleteOIDC(props.role.id)"> Delete </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</template>

frontend/src/components/admin/sla/dataTableDropdown.vue

@@ -1,11 +1,52 @@
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="w-8 h-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <MoreHorizontal class="w-4 h-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="edit(props.role.id)">Edit</DropdownMenuItem>
+      <DropdownMenuItem @click="() => (alertOpen = true)">Delete</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete SLA</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the SLA policy.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+
 <script setup>
+import { ref } from 'vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import api from '@/api'
@@ -14,39 +55,27 @@ import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 
 const router = useRouter()
 const emit = useEmitter()
+const alertOpen = ref(false)
+
 const props = defineProps({
-    role: {
-        type: Object,
-        required: true,
-        default: () => ({
-            id: ''
-        })
-    }
+  role: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: ''
+    })
+  }
 })
 
-function edit (id) {
-    router.push({ path: `/admin/sla/${id}/edit` })
+function edit(id) {
+  router.push({ path: `/admin/sla/${id}/edit` })
 }
 
-async function deleteSLA (id) {
-    await api.deleteSLA(id)
-    emit.emit(EMITTER_EVENTS.REFRESH_LIST, {
-        model: 'sla'
-    })
+async function handleDelete() {
+  await api.deleteSLA(props.role.id)
+  alertOpen.value = false
+  emit.emit(EMITTER_EVENTS.REFRESH_LIST, {
+    model: 'sla'
+  })
 }
 </script>
-
-<template>
-    <DropdownMenu>
-        <DropdownMenuTrigger as-child>
-            <Button variant="ghost" class="w-8 h-8 p-0">
-                <span class="sr-only">Open menu</span>
-                <MoreHorizontal class="w-4 h-4" />
-            </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-            <DropdownMenuItem @click="edit(props.role.id)"> Edit </DropdownMenuItem>
-            <DropdownMenuItem @click="deleteSLA(props.role.id)"> Delete </DropdownMenuItem>
-        </DropdownMenuContent>
-    </DropdownMenu>
-</template>

frontend/src/components/admin/team/roles/dataTableDropdown.vue

@@ -1,4 +1,40 @@
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="w-8 h-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <MoreHorizontal class="w-4 h-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="editRole(props.role.id)">Edit</DropdownMenuItem>
+      <DropdownMenuItem
+        @click="() => (alertOpen = true)"
+        v-if="Roles.includes(props.role.name) === false"
+      >
+        Delete
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Role</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the role.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+
 <script setup>
+import { ref } from 'vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
   DropdownMenu,
@@ -6,6 +42,16 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import { useEmitter } from '@/composables/useEmitter'
@@ -14,8 +60,10 @@ import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { Roles } from '@/constants/user'
 import api from '@/api'
 
+const alertOpen = ref(false)
 const emit = useEmitter()
 const router = useRouter()
+
 const props = defineProps({
   role: {
     type: Object,
@@ -26,13 +74,14 @@ const props = defineProps({
   }
 })
 
-function editRole (id) {
+function editRole(id) {
   router.push({ path: `/admin/teams/roles/${id}/edit` })
 }
 
-async function deleteRole (id) {
+async function handleDelete() {
   try {
-    await api.deleteRole(id)
+    await api.deleteRole(props.role.id)
+    alertOpen.value = false
     emitRefreshTeamList()
   } catch (error) {
     emit.emit(EMITTER_EVENTS.SHOW_TOAST, {
@@ -49,19 +98,3 @@ const emitRefreshTeamList = () => {
   })
 }
 </script>
-
-<template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
-      <Button variant="ghost" class="w-8 h-8 p-0">
-        <span class="sr-only">Open menu</span>
-        <MoreHorizontal class="w-4 h-4" />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuItem @click="editRole(props.role.id)"> Edit </DropdownMenuItem>
-      <DropdownMenuItem @click="deleteRole(props.role.id)" v-if="Roles.includes(props.role.name) === false">
-        Delete </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</template>

frontend/src/components/admin/team/teams/TeamDataTableDropdown.vue

@@ -1,4 +1,35 @@
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="w-8 h-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <MoreHorizontal class="w-4 h-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="editTeam(props.team.id)">Edit</DropdownMenuItem>
+      <DropdownMenuItem @click="() => (alertOpen = true)">Delete</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Team</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the team.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+
 <script setup>
+import { ref } from 'vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
   DropdownMenu,
@@ -6,6 +37,16 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import { useEmitter } from '@/composables/useEmitter'
@@ -13,8 +54,10 @@ import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { handleHTTPError } from '@/utils/http'
 import api from '@/api'
 
+const alertOpen = ref(false)
 const router = useRouter()
 const emit = useEmitter()
+
 const props = defineProps({
   team: {
     type: Object,
@@ -25,13 +68,14 @@ const props = defineProps({
   }
 })
 
-function editTeam (id) {
+function editTeam(id) {
   router.push({ path: `/admin/teams/teams/${id}/edit` })
 }
 
-async function deleteTeam (id) {
+async function handleDelete() {
   try {
-    await api.deleteTeam(id)
+    await api.deleteTeam(props.team.id)
+    alertOpen.value = false
     emitRefreshTeamList()
   } catch (error) {
     emit.emit(EMITTER_EVENTS.SHOW_TOAST, {
@@ -48,18 +92,3 @@ const emitRefreshTeamList = () => {
   })
 }
 </script>
-
-<template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
-      <Button variant="ghost" class="w-8 h-8 p-0">
-        <span class="sr-only">Open menu</span>
-        <MoreHorizontal class="w-4 h-4" />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuItem @click="editTeam(props.team.id)"> Edit </DropdownMenuItem>
-      <DropdownMenuItem @click="deleteTeam(props.team.id)"> Delete </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</template>

frontend/src/components/admin/team/users/dataTableDropdown.vue

@@ -1,4 +1,35 @@
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="w-8 h-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <MoreHorizontal class="w-4 h-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="editUser(props.user.id)">Edit</DropdownMenuItem>
+      <DropdownMenuItem @click="() => (alertOpen = true)">Delete</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete User</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the user.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+
 <script setup>
+import { ref } from 'vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
   DropdownMenu,
@@ -6,6 +37,16 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import { useEmitter } from '@/composables/useEmitter'
@@ -13,6 +54,7 @@ import { handleHTTPError } from '@/utils/http'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import api from '@/api'
 
+const alertOpen = ref(false)
 const emit = useEmitter()
 const router = useRouter()
 
@@ -26,13 +68,14 @@ const props = defineProps({
   }
 })
 
-function editUser (id) {
+function editUser(id) {
   router.push({ path: `/admin/teams/users/${id}/edit` })
 }
 
-async function deleteUser (id) {
+async function handleDelete() {
   try {
-    await api.deleteUser(id)
+    await api.deleteUser(props.user.id)
+    alertOpen.value = false
     emitRefreshUserList()
   } catch (error) {
     emit.emit(EMITTER_EVENTS.SHOW_TOAST, {
@@ -49,18 +92,3 @@ const emitRefreshUserList = () => {
   })
 }
 </script>
-
-<template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
-      <Button variant="ghost" class="w-8 h-8 p-0">
-        <span class="sr-only">Open menu</span>
-        <MoreHorizontal class="w-4 h-4" />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuItem @click="editUser(props.user.id)"> Edit </DropdownMenuItem>
-      <DropdownMenuItem @click="deleteUser(props.user.id)"> Delete </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</template>

frontend/src/components/admin/templates/dataTableDropdown.vue

@@ -1,4 +1,40 @@
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="w-8 h-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <MoreHorizontal class="w-4 h-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="editTemplate(props.template.id)">Edit</DropdownMenuItem>
+      <DropdownMenuItem
+        @click="() => (alertOpen = true)"
+        v-if="props.template.type !== 'email_notification'"
+      >
+        Delete
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Template</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the template.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+
 <script setup>
+import { ref } from 'vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
   DropdownMenu,
@@ -6,6 +42,16 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
 import { useEmitter } from '@/composables/useEmitter'
@@ -15,6 +61,8 @@ import api from '@/api'
 
 const router = useRouter()
 const emitter = useEmitter()
+const alertOpen = ref(false)
+
 const props = defineProps({
   template: {
     type: Object,
@@ -29,9 +77,10 @@ const editTemplate = (id) => {
   router.push({ path: `/admin/templates/${id}/edit` })
 }
 
-const deleteTemplate = async (id) => {
+const handleDelete = async () => {
   try {
-    await api.deleteTemplate(id)
+    await api.deleteTemplate(props.template.id)
+    alertOpen.value = false
     emitter.emit(EMITTER_EVENTS.REFRESH_LIST, {
       model: 'templates'
     })
@@ -44,22 +93,3 @@ const deleteTemplate = async (id) => {
   }
 }
 </script>
-
-<template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
-      <Button variant="ghost" class="w-8 h-8 p-0">
-        <span class="sr-only">Open menu</span>
-        <MoreHorizontal class="w-4 h-4" />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuItem @click="editTemplate(props.template.id)"> Edit </DropdownMenuItem>
-      <DropdownMenuItem
-        @click="deleteTemplate(props.template.id)" v-if="props.template.type !== 'email_notification'"
-      >
-         Delete
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</template>