first commit, i i have no idea what i have done

management-ui/src/customcompometns/DeleteDeviceDialog.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '@/components/ui/alert-dialog'
+import { defineProps, defineEmits, type PropType } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean as PropType<boolean>,
+    required: true,
+  },
+})
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: boolean): void
+  (e: 'confirm'): void
+}>()
+</script>
+
+<template>
+  <AlertDialog
+    :open="props.modelValue"
+    @openChange="(v: boolean) => emit('update:modelValue', v)"
+  >
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete the device and all user connections.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction
+          @click="() => { emit('confirm'); emit('update:modelValue', false) }"
+        >  Delete
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>