feat(sep): implement table history

app/components/content/sep/entry.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 
+// Components
+import AppListHistoryDialog from '~/components/app/sep/list-history-dialog.vue'
+
 // Types
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import type { PatientEntity } from '~/models/patient'
+import type { SepHistoryData } from '~/components/app/sep/list-cfg.history'
 
 // Services
 import { getPatientDetail, getPatients } from '~/services/patient.service'
@@ -14,6 +18,7 @@ import { getList as getDoctorList } from '~/services/vclaim-doctor.service'
 import { getList as getDiagnoseReferralList } from '~/services/vclaim-diagnose-referral.service'
 import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
 import { getList as getMonitoringHistoryList } from '~/services/vclaim-monitoring-history.service'
+import { get } from '@vueuse/core'
 
 const openPatient = ref(false)
 const openLetter = ref(false)
@@ -21,6 +26,7 @@ const openHistory = ref(false)
 const selectedPatient = ref('')
 const selectedPatientObject = ref<PatientEntity | null>(null)
 const selectedLetter = ref('SK22334442')
+const histories = ref<Array<SepHistoryData>>([])
 
 // patients used by AppSepTableSearchPatient (will be filled from API)
 const patients = ref<Array<{ id: string; identity: string; number: string; bpjs: string; name: string }>>([])
@@ -60,7 +66,7 @@ function mapPaginationMetaToRow(meta: any) {
   }
 }
 
-async function fetchPatients(params: any = { 'page-size': 10 }) {
+async function getPatientsList(params: any = { 'page-size': 10 }) {
   try {
     isPatientsLoading.value = true
     patients.value = []
@@ -81,6 +87,40 @@ async function fetchPatients(params: any = { 'page-size': 10 }) {
   }
 }
 
+async function getPatientCurrent(id: string) {
+  isPatientsLoading.value = true
+  selectedPatientObject.value = null
+  try {
+    const result = await getPatientDetail(Number(id))
+    if (result && result.success && result.body && result.body.data) {
+      const patient = result.body.data || null
+      selectedPatientObject.value = patient
+    }
+  } catch (err) {
+    console.error('Failed to fetch patient:', err)
+  }
+  isPatientsLoading.value = false
+}
+
+async function getMonitoringHistoryMappers() {
+  histories.value = []
+  const result = await getMonitoringHistoryList({ nop: '0002078925513', tglawal: '2025-07-20', tglakhir: '2025-10-10' })
+  if (result && result.success && result.body) {
+    const historiesRaw = result.body?.response?.histori || []
+    if (!historiesRaw) return
+    historiesRaw.forEach((result: any) => {
+      histories.value.push({
+        sepNumber: result.noSep,
+        sepDate: result.tglSep,
+        referralNumber: result.noRujukan,
+        diagnosis: result.diagnosa,
+        serviceType: !result.jnsPelayanan ? '-' : result.jnsPelayanan === '1' ? 'Rawat Jalan' : 'Rawat Inap',
+        careClass: result.kelasRawat,
+      })
+    })
+  }
+}
+
 const letters = [
   {
     noSurat: 'SK22334442',
@@ -102,40 +142,8 @@ const letters = [
   },
 ]
 
-const histories = [
-  {
-    no_sep: 'SP23311224',
-    tgl_sep: '12 Agustus 2025',
-    no_rujukan: '123444',
-    diagnosis: 'C34.9 – Karsinoma Paru',
-    pelayanan: 'Rawat Jalan',
-    kelas: 'Kelas II',
-  },
-  {
-    no_sep: 'SP23455667',
-    tgl_sep: '11 Agustus 2025',
-    no_rujukan: '2331221',
-    diagnosis: 'K35 – Apendisitis akut',
-    pelayanan: 'Rawat Jalan',
-    kelas: 'Kelas II',
-  },
-]
-
 function handleSavePatient() {
-  const getPatient = async () => {
-    isPatientsLoading.value = true
-    try {
-      const result = await getPatientDetail(Number(selectedPatient.value))
-      if (result && result.success && result.body && result.body.data) {
-        const patient = result.body.data || null
-        selectedPatientObject.value = patient
-      }
-    } catch (err) {
-      console.error('Failed to fetch patient:', err)
-    }
-    isPatientsLoading.value = false
-  }
-  getPatient()
+  getPatientCurrent(selectedPatient.value)
 }
 
 function handleSaveLetter() {
@@ -145,7 +153,7 @@ function handleSaveLetter() {
 function handleEvent(value: string) {
   if (value === 'search-patient') {
     // fetch patients from API then open the dialog
-    fetchPatients({ 'page-size': 10, includes: 'person' }).then(() => {
+    getPatientsList({ 'page-size': 10, includes: 'person' }).then(() => {
       openPatient.value = true
     })
     return
@@ -155,6 +163,10 @@ function handleEvent(value: string) {
     return
   }
   if (value === 'history-sep') {
+    // fetch history sep from API then open the dialog
+    getMonitoringHistoryMappers().then((value) => {
+      console.log('value:', value)
+    })
     openHistory.value = true
     return
   }
@@ -173,7 +185,11 @@ onMounted(() => {
   getDistrictList({ city: '0187' }).then((value) => {
     console.log('value:', value)
   })
-  getDoctorList({ 'jenis-pelayanan': 1, 'tgl-pelayanan': new Date().toISOString().substring(0, 19), 'kode-spesialis': 0 }).then((value) => {
+  getDoctorList({
+    'jenis-pelayanan': 1,
+    'tgl-pelayanan': new Date().toISOString().substring(0, 19),
+    'kode-spesialis': 0,
+  }).then((value) => {
     console.log('value:', value)
   })
   getDiagnoseReferralList().then((value) => {
@@ -198,7 +214,6 @@ onMounted(() => {
     SEP
   </div>
   <AppSepEntryForm
-    :is-loading="isPatientsLoading"
     :patient="selectedPatientObject"
     @event="handleEvent"
   />
@@ -207,7 +222,7 @@ onMounted(() => {
     v-model:selected="selectedPatient"
     :patients="patients"
     :pagination-meta="paginationMeta"
-    @fetch="(value) => fetchPatients({ ...value, 'page-size': 10, includes: 'person' })"
+    @fetch="(value) => getPatientsList({ ...value, 'page-size': 10, includes: 'person' })"
     @save="handleSavePatient"
   />
   <AppSepTableSearchLetter
@@ -216,7 +231,7 @@ onMounted(() => {
     :letters="letters"
     @save="handleSaveLetter"
   />
-  <AppSepTableHistorySep
+  <AppListHistoryDialog
     v-model:open="openHistory"
     :histories="histories"
   />