failes reason show

src/views/AssetsView.vue

@@ -7,8 +7,14 @@ import Button from 'primevue/button'
 import Skeleton from 'primevue/skeleton'
 import Dialog from 'primevue/dialog'
 import Paginator from 'primevue/paginator'
+import ConfirmDialog from 'primevue/confirmdialog'
+import { useConfirm } from "primevue/useconfirm"
+import Toast from 'primevue/toast'
+import { useToast } from "primevue/usetoast"
 
 const router = useRouter()
+const confirm = useConfirm()
+const toast = useToast()
 const assets = ref<Asset[]>([])
 const loading = ref(true)
 const activeFilter = ref('all')
@@ -57,6 +63,30 @@ const paginatedAssets = computed(() => {
     return assets.value
 })
 
+
+
+const confirmDelete = (asset: Asset) => {
+    confirm.require({
+        message: 'Do you want to delete this asset?',
+        header: 'Delete Confirmation',
+        icon: 'pi pi-info-circle',
+        rejectLabel: 'Cancel',
+        acceptLabel: 'Delete',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await dataService.deleteAsset(asset.id)
+                toast.add({ severity: 'success', summary: 'Confirmed', detail: 'Asset deleted', life: 3000 })
+                loadAssets()
+            } catch (e) {
+                console.error('Failed to delete asset', e)
+                toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to delete asset', life: 3000 })
+            }
+        }
+    })
+}
+
 const onPage = (event: any) => {
     first.value = event.first
     rows.value = event.rows
@@ -183,6 +213,11 @@ const handleLogout = () => {
                                 class="absolute top-2.5 right-2.5 bg-black/60 backdrop-blur-sm px-3 py-1 rounded-full text-xs uppercase font-semibold text-white z-10">
                                 {{ asset.type }}
                             </div>
+                            <div @click.stop="confirmDelete(asset)"
+                                class="absolute top-2.5 left-2.5 w-8 h-8 rounded-full bg-black/60 backdrop-blur-sm flex items-center justify-center cursor-pointer hover:bg-red-500/80 transition-all z-10 group/delete">
+                                <i
+                                    class="pi pi-trash text-white text-xs group-hover/delete:scale-110 transition-transform"></i>
+                            </div>
                         </div>
 
                         <!-- Asset Info -->
@@ -238,6 +273,8 @@ const handleLogout = () => {
                 </div>
             </div>
         </Dialog>
+        <ConfirmDialog></ConfirmDialog>
+        <Toast />
     </div>
 </template>