diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index 22597f22..2bfccd49 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -9,9 +9,17 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '~/components/pub/ui/dropdown-menu'
+import { X, Check } from 'lucide-vue-next'
 
 const search = ref('')
 const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
+const open = ref(false)
+
+const sepData = {
+  no_sep: 'SP23311224',
+  kartu: '001234',
+  nama: 'Kenzie',
+}
 
 interface SepData {
   tgl_sep: string
@@ -136,6 +144,20 @@ function exportExcel() {
   // tambahkan logic untuk generate Excel
 }
 
+function handleDelete() {
+  console.log('Data dihapus:', sepData)
+  open.value = false
+}
+
+watch(
+  () => recAction.value,
+  () => {
+    if (recAction.value === 'showConfirmDel') {
+      open.value = true
+    }
+  },
+)
+
 onMounted(() => {
   getSepList()
 })
@@ -150,7 +172,7 @@ provide('table_data_loader', isLoading)
   <div class="rounded-md border p-4">
     <Header :prep="{ ...headerPrep }" />
     <!-- Filter Bar -->
-    <div class="my-2 flex items-center gap-2">
+    <div class="my-2 flex flex-wrap items-center gap-2">
       <!-- Search -->
       <Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
 
@@ -194,5 +216,35 @@ provide('table_data_loader', isLoading)
         <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
       </div>
     </template>
+
+    <!-- Trigger button -->
+    <Dialog v-model:open="open">
+      <DialogTrigger as-child></DialogTrigger>
+
+      <DialogContent class="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Hapus SEP</DialogTitle>
+        </DialogHeader>
+
+        <DialogDescription class="text-gray-700">
+          Apakah anda yakin ingin menghapus SEP dengan data:
+        </DialogDescription>
+
+        <div class="mt-4 space-y-2 text-sm">
+          <p>No. SEP : {{ sepData.no_sep }}</p>
+          <p>No. Kartu BPJS : {{ sepData.kartu }}</p>
+          <p>Nama Pasien : {{ sepData.nama }}</p>
+        </div>
+
+        <DialogFooter class="mt-6 flex justify-end gap-3">
+          <Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="open = false">
+            <X class="mr-1 h-4 w-4" /> Tidak
+          </Button>
+          <Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleDelete">
+            <Check class="mr-1 h-4 w-4" /> Ya
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>