feat(encounter): provide cancel of encounter

app/components/content/encounter/list.vue

@@ -14,7 +14,7 @@ import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types
 import { ActionEvents } from '~/components/pub/my-ui/data/types'
 
 // Services
-import { getList as getEncounterList, remove as removeEncounter } from '~/services/encounter.service'
+import { getList as getEncounterList, remove as removeEncounter, cancel as cancelEncounter } from '~/services/encounter.service'
 
 // UI
 import { toast } from '~/components/pub/ui/toast'
@@ -35,6 +35,7 @@ const recAction = ref<string>('')
 const recItem = ref<any>(null)
 const isFormEntryDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
+const isRecordCancelOpen = ref(false)
 
 const hreaderPrep: HeaderPrep = {
   title: 'Kunjungan',
@@ -114,6 +115,43 @@ async function getPatientList() {
   }
 }
 
+// Handle confirmation result
+async function handleConfirmCancel(record: any, action: string) {
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await cancelEncounter(record.id)
+      if (result.success) {
+        toast({
+          title: 'Berhasil',
+          description: 'Kunjungan berhasil dibatalkan',
+          variant: 'default',
+        })
+        await getPatientList() // Refresh list
+      } else {
+        const errorMessage = result.body?.message || 'Gagal membatalkan kunjungan'
+        toast({
+          title: 'Gagal',
+          description: errorMessage,
+          variant: 'destructive',
+        })
+      }
+    } catch (error: any) {
+      console.error('Error cancellation encounter:', error)
+      toast({
+        title: 'Gagal',
+        description: error?.message || 'Gagal membatalkan kunjungan',
+        variant: 'destructive',
+      })
+    } finally {
+      // Reset state
+      recId.value = 0
+      recAction.value = ''
+      recItem.value = null
+      isRecordCancelOpen.value = false
+    }
+  }
+}
+
 // Handle confirmation result
 async function handleConfirmDelete(record: any, action: string) {
   if (action === 'delete' && record?.id) {
@@ -152,6 +190,14 @@ async function handleConfirmDelete(record: any, action: string) {
 }
 
 function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+  isRecordCancelOpen.value = false
+}
+
+function handleRemoveConfirmation() {
   // Reset record state when cancelled
   recId.value = 0
   recAction.value = ''
@@ -166,16 +212,21 @@ watch(
       isRecordConfirmationOpen.value = true
       return
     }
+
+    if (recAction.value === ActionEvents.showCancel) {
+      isRecordCancelOpen.value = true
+      return
+    }
     
     const basePath = getBasePath()
     
     if (props.type === 'encounter') {
       if (recAction.value === 'showDetail') {
-        navigateTo(`${basePath}/${recId.value}/detail`)
+        navigateTo(`${basePath}/${recId.value}/process`)
       } else if (recAction.value === 'showEdit') {
         navigateTo(`${basePath}/${recId.value}/edit`)
-      } else if (recAction.value === 'showProcess') {
-        navigateTo(`${basePath}/${recId.value}/process`)
+      } else if (recAction.value === 'showPrint') {
+        console.log('print')
       } else {
         // handle other actions
       }
@@ -234,12 +285,34 @@ onMounted(() => {
   </Dialog>
 
   <!-- Record Confirmation Modal -->
+   <RecordConfirmation
+    v-model:open="isRecordCancelOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="handleConfirmCancel"
+    @cancel="handleCancelConfirmation"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>Apakah anda yakin ingin membatalkan kunjungan pasien berikut?</p>
+        <p v-if="record?.patient?.person?.name">
+          <strong>Nama:</strong>
+          {{ record.patient.person.name }}
+        </p>
+        <p v-if="record?.medical_record_number">
+          <strong>No RM:</strong>
+          {{ record.medical_record_number }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+
   <RecordConfirmation
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
     @confirm="handleConfirmDelete"
-    @cancel="handleCancelConfirmation"
+    @cancel="handleRemoveConfirmation"
   >
     <template #default="{ record }">
       <div class="text-sm">