Merge branch 'dev' into feat/things-munaja

app/components/content/control-letter/list.vue

@@ -143,7 +143,7 @@ watch([recId, recAction, timestamp], () => {
       break
 
     case ActionEvents.showEdit:
-      if(pagePermission.canUpdate){
+      if(pagePermission.canUpdate){ 
         navigateTo({
           name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
           params: { id: encounterId, "control_letter_id": recId.value },
@@ -186,7 +186,7 @@ watch([recId, recAction, timestamp], () => {
         @click="isHistoryDialogOpen = true">
         <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Program Nasional</Button>
     </div>
-
+    
     <AppControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
     <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
@@ -212,7 +212,7 @@ watch([recId, recAction, timestamp], () => {
         </div>
       </template>
     </RecordConfirmation>
-
+    
       <HistoryDialog
         v-model:is-modal-open="isHistoryDialogOpen"
         :data="historyData.data.value"

app/components/content/encounter/list.vue

@@ -13,7 +13,11 @@ import { useSidebar } from '~/components/pub/ui/sidebar/utils'
 import { getServicePosition } from '~/lib/roles' // previously getPositionAs
 
 // Services
-import { getList as getEncounterList, remove as removeEncounter, cancel as cancelEncounter } from '~/services/encounter.service'
+import {
+  getList as getEncounterList,
+  remove as removeEncounter,
+  cancel as cancelEncounter,
+} from '~/services/encounter.service'
 
 // Apps
 import Content from '~/components/app/encounter/list.vue'
@@ -40,6 +44,7 @@ const { getActiveRole } = useUserStore()
 // Main data
 const data = ref([])
 const dataFiltered = ref([])
+const filterParams = ref<any>({})
 const activeServicePosition = ref(getServicePosition(getActiveRole()))
 const isLoading = reactive<DataTableLoader>({
   summary: false,
@@ -99,27 +104,30 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-watch(getActiveRole, (role? : string) => {
+watch(getActiveRole, (role?: string) => {
   activeServicePosition.value = getServicePosition(role)
 })
 
-watch(() => recAction.value, () => {
-  const basePath = `/${props.classCode}/encounter`
-  if (recAction.value === ActionEvents.showConfirmDelete) {
-    isRecordConfirmationOpen.value = true
-  } else if (recAction.value === ActionEvents.showCancel) {
-    isRecordCancelOpen.value = true
-  } else if (recAction.value === ActionEvents.showDetail) {
-    navigateTo(`${basePath}/${recId.value}/detail`)
-  } else if (recAction.value === ActionEvents.showEdit) {
-    navigateTo(`${basePath}/${recId.value}/edit`)
-  } else if (recAction.value === ActionEvents.showProcess) {
-    navigateTo(`${basePath}/${recId.value}/process`)
-  } else if (recAction.value === ActionEvents.showConfirmDelete) {
-    isRecordConfirmationOpen.value = true
-  }
-  recAction.value = '' // reset
-})
+watch(
+  () => recAction.value,
+  () => {
+    const basePath = `/${props.classCode}/encounter`
+    if (recAction.value === ActionEvents.showConfirmDelete) {
+      isRecordConfirmationOpen.value = true
+    } else if (recAction.value === ActionEvents.showCancel) {
+      isRecordCancelOpen.value = true
+    } else if (recAction.value === ActionEvents.showDetail) {
+      navigateTo(`${basePath}/${recId.value}/detail`)
+    } else if (recAction.value === ActionEvents.showEdit) {
+      navigateTo(`${basePath}/${recId.value}/edit`)
+    } else if (recAction.value === ActionEvents.showProcess) {
+      navigateTo(`${basePath}/${recId.value}/process`)
+    } else if (recAction.value === ActionEvents.showConfirmDelete) {
+      isRecordConfirmationOpen.value = true
+    }
+    recAction.value = '' // reset
+  },
+)
 
 onMounted(() => {
   getPatientList()
@@ -128,13 +136,16 @@ onMounted(() => {
 /////// Functions
 async function getPatientList() {
   isLoading.isTableLoading = true
+  const includesParams =
+    'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,Responsible_Doctor,Responsible_Doctor-employee,Responsible_Doctor-employee-person'
+  data.value = []
   try {
-    const params: any = { includes: 'patient,patient-person' }
+    const params: any = { includes: includesParams, ...filterParams.value }
     if (props.classCode) {
-      params['class-code'] = props.classCode
+      params.class_code = props.classCode
     }
     if (props.subClassCode) {
-      params['sub-class-code'] = props.subClassCode
+      params.sub_class_code = props.subClassCode
     }
     const result = await getEncounterList(params)
     if (result.success) {
@@ -148,6 +159,15 @@ async function getPatientList() {
   }
 }
 
+function handleFilterApply(filters: { personName: string; startDate: string; endDate: string }) {
+  filterParams.value = {
+    'person-name': filters.personName,
+    'start-date': filters.startDate,
+    'end-date': filters.endDate,
+  }
+  getPatientList()
+}
+
 // Handle confirmation result
 async function handleConfirmCancel(record: any, action: string) {
   if (action === 'deactivate' && record?.id) {
@@ -243,7 +263,7 @@ function handleRemoveConfirmation() {
   <CH.ContentHeader v-bind="hreaderPrep">
     <FilterNav
       :active-positon="activeServicePosition"
-      @onFilterClick="() => isFilterFormDialogOpen = true"
+      @apply="handleFilterApply"
       @onExportPdf="() => {}"
       @onExportExcel="() => {}"
       @nExportCsv="() => {}"
@@ -259,7 +279,7 @@ function handleRemoveConfirmation() {
     size="lg"
     prevent-outside
   >
-    <FilterForm v-bind="filter"  />
+    <FilterForm v-bind="filter" />
   </Dialog>
 
   <!-- Batal -->

app/components/content/encounter/process-bu.vue

@@ -26,6 +26,7 @@ import DocUploadList from '~/components/content/document-upload/list.vue'
 import GeneralConsentList from '~/components/content/general-consent/entry.vue'
 import ResumeList from '~/components/content/resume/list.vue'
 import ControlLetterList from '~/components/content/control-letter/list.vue'
+import VaccineDataList from '~/components/content/vaccine-data/list.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -96,6 +97,7 @@ const tabs: TabItem[] = [
     component: DocUploadList,
     props: { encounter: data },
   },
+  { value: 'vaccine-data', label: 'Data Vaksin', component: VaccineDataList, props: { encounter: data } },
 ]
 </script>
 

app/components/content/encounter/process.vue

@@ -214,4 +214,4 @@ async function getData() {
       @change-menu="activeMenu = $event"
     />
   </div>
-</template>
+</template>

app/components/content/prb/bpjs-list.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+// #region Imports
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { getList, remove } from '~/services/prb.service'
+import { toast } from '~/components/pub/ui/toast'
+import type { Encounter } from '~/models/encounter'
+import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
+import type { Prb } from '~/models/prb'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+// #endregion
+
+// #region State
+const props = withDefaults(defineProps<{
+  encounter?: Encounter
+  isBpjs?: boolean
+}>(), {
+  isBpjs: false,
+})
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: '', }),
+  entityName: 'prb',
+})
+const prbHistory = usePaginatedList({
+  fetchFn: (params) => getList({ ...params }),
+  entityName: 'prb-history',
+})
+const dummy = [
+  {
+    "id": 1,
+    "date": new Date().toISOString(),
+    "name1": "Dr. Smith",
+    "name2": "Maria S.",
+    "name3": "Project Alpha",
+    "name4": "Completed",
+    "name5": 95.5
+  },
+]
+
+const isHistoryDialogOpen = ref(false)
+const isDocPreviewDialogOpen = ref(false)
+const isFilterDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+const isRequirementsMet = ref(true)
+const Prb = ref<Prb | null>(null)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const timestamp = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Program Rujuk Balik",
+  icon: 'i-lucide-history',
+}
+if(true){
+  headerPrep.addNav = {
+    label: "Program Rujuk Balik",
+    onClick: () => navigateTo({
+        name: 'integration-bpjs-prb-add',
+      }),
+  };
+}
+headerPrep.components = [
+  {
+    component: defineAsyncComponent(() => import('~/components/app/prb/_common/btn-history.vue')),
+    props: {  }
+  },
+];
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    isFilterDialogOpen.value = true
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getListData()
+})
+// #endregion
+
+// #region Functions
+async function getListData() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching Data:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+async function handleConfirmDelete(record: any, action: string) {
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await remove(record.id)
+      if (result.success) {
+        toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
+        await fetchData()
+      } else {
+        toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
+      }
+    } catch (error) {
+      toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+function handleFiltering() {
+  isFilterDialogOpen.value = false
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('timestamp', timestamp)
+provide('table_data_loader', isLoading)
+provide('isHistoryDialogOpen', isHistoryDialogOpen)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction, timestamp], () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      navigateTo({
+        name: 'integration-bpjs-prb-prb_id-edit',
+        params: { id: encounterId, "prb_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showPrint:
+      isDocPreviewDialogOpen.value = true      
+      break
+
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <WarningAlert v-if="!isRequirementsMet"
+    class="mb-5"
+    text="Syarat pembuatan PRB belum terpenuhi"
+    :description="[
+      'Lanjutan Penatalaksanaan Pasien harus terisi Dirujuk Eksternal',
+      'Jenis Pembayaran pasien harus JKN'
+    ]" />
+
+  <div v-else>
+    <Header :prep="headerPrep" />
+
+    <Filter
+      :prep="headerPrep"
+      :ref-search-nav="refSearchNav"
+      :enable-export="false"
+    />
+
+    <AppPrbList :is-bpjs="true" :data="dummy" />
+
+    <Dialog v-model:open="isHistoryDialogOpen" title="History" size="full">
+      <AppPrbHistoryList
+        :data="dummy"
+        :pagination-meta="prbHistory.paginationMeta"
+        @page-change="prbHistory.handlePageChange" />
+    </Dialog>
+
+    <Dialog v-model:open="isFilterDialogOpen" title="Filter" size="lg">
+      <AppPrbCommonFilter @submit="handleFiltering" />
+    </Dialog>
+
+    <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
+      <DocPreviewDialog :link="`https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf`" />
+    </Dialog>
+
+    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p>
+            <strong>ID:</strong>
+            {{ record?.id }}
+          </p>
+          <p v-if="record?.firstName">
+            <strong>Nama:</strong>
+            {{ record.firstName }}
+          </p>
+          <p v-if="record?.code">
+            <strong>Kode:</strong>
+            {{ record.cellphone }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>

app/components/content/prb/detail.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { withBase } from '~/models/_base'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import type { Patient } from '~/models/patient'
+import type { Person } from '~/models/person'
+import { getDetail } from '~/services/prb.service'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import type { Prb } from '~/models/prb'
+
+// #region Props & Emits
+const props = defineProps<{
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const PrbId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
+const Prb = ref<Prb | null>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Program Rujuk Balik',
+  icon: 'i-lucide-newspaper',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+// onMounted(async () => {
+//   const result = await getDetail(controlLetterId, {
+//     includes: "unit,specialist,subspecialist,doctor-employee-person",
+//   })
+//   if (result.success) {
+//     controlLetter.value = result.body?.data
+//   }
+// })
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+// #endregion region
+
+// #region Utilities & event handlers
+function handleAction() {
+  goBack()
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <Header :prep="headerPrep" :ref-search-nav="headerPrep.refSearchNav" />
+  <AppPrbDetail :instance="Prb" @click="handleAction" />
+</template>

app/components/content/prb/entry.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { Patient, genPatientProps } from '~/models/patient'
+import type { ExposedForm } from '~/types/form'
+import type { PatientBase } from '~/models/patient'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { uploadAttachment } from '~/services/patient.service'
+import { getDetail, update } from '~/services/prb.service'
+import type { Prb } from '~/models/prb'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+
+import { toast } from '~/components/pub/ui/toast'
+import { withBase } from '~/models/_base'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { PrbSchema } from '~/schemas/prb.schema'
+import { formatDateYyyyMmDd } from '~/lib/date'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { getList, remove } from '~/services/prb.service'
+import { handleActionEdit } from '~/handlers/prb.handler'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { formatDateToDatetimeLocal } from '~/lib/utils'
+
+// #region Props & Emits
+const props = withDefaults(defineProps<{
+  callbackUrl?: string
+  isBpjs?: boolean
+}>(), {
+  isBpjs: false,
+})
+
+// form related state
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
+  entityName: 'prb',
+})
+// #endregion
+
+// #region State & Computed
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const PrbId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
+
+const inputForm = ref<ExposedForm<any> | null>(null)
+const Prb = ref({})
+const isConfirmationOpen = ref(false)
+const selectedOperativeAction = ref<any>(null)
+
+const isSepDialogOpen = ref(false)
+provide("isSepDialogOpen", isSepDialogOpen);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(PrbId)
+  if (result.success) {
+    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
+    Prb.value = responseData
+    inputForm.value?.setValues(responseData)
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const response = await handleActionEdit(
+    PrbId,
+    await composeFormData(),
+    () => { },
+    () => { },
+    toast,
+  )
+  goBack()
+}
+
+async function composeFormData(): Promise<Prb> {
+  const [input,] = await Promise.all([
+    inputForm.value?.validate(),
+  ])
+
+  const results = [input]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = input?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+
+const initialValues = {
+  a1: "",
+  a2: formatDateToDatetimeLocal(new Date()),
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Update Program Rujuk Balik</div>
+  <AppPrbEntry
+    ref="inputForm"
+    :schema="PrbSchema"
+    :initial-values="initialValues"
+    :is-bpjs="isBpjs"
+  />
+  
+  <div class="my-2 flex justify-end py-2">
+    <Action :enable-draft="false" @click="handleActionClick" />
+  </div>
+
+  <Confirmation
+    v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd"
+  />
+</template>
+
+<style scoped>
+/* component style */
+</style>

app/components/content/prb/list.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+// #region Imports
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { getList, remove } from '~/services/prb.service'
+import { toast } from '~/components/pub/ui/toast'
+import type { Encounter } from '~/models/encounter'
+import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
+import type { Prb } from '~/models/prb'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+// #endregion
+
+// #region State
+const props = withDefaults(defineProps<{
+  encounter?: Encounter
+  isBpjs?: boolean
+}>(), {
+  isBpjs: false,
+})
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: '', }),
+  entityName: 'prb',
+})
+const prbHistory = usePaginatedList({
+  fetchFn: (params) => getList({ ...params }),
+  entityName: 'prb-history',
+})
+const dummy = [
+  {
+    "id": 1,
+    "date": new Date().toISOString(),
+    "name1": "Dr. Smith",
+    "name2": "Maria S.",
+    "name3": "Project Alpha",
+    "name4": "Completed",
+    "name5": 95.5
+  },
+]
+
+const isHistoryDialogOpen = ref(false)
+const isDocPreviewDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+const isRequirementsMet = ref(true)
+const Prb = ref<Prb | null>(null)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const timestamp = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Program Rujuk Balik",
+  icon: 'i-lucide-history',
+}
+if(true){
+  headerPrep.addNav = {
+    label: "Program Rujuk Balik",
+    onClick: () => navigateTo({
+        name: 'rehab-encounter-id-prb-add',
+        params: { id: encounterId },
+      }),
+  };
+}
+headerPrep.components = [
+  {
+    component: defineAsyncComponent(() => import('~/components/app/prb/_common/btn-history.vue')),
+    props: {  }
+  },
+];
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getListData()
+})
+// #endregion
+
+// #region Functions
+async function getListData() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching Data:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+async function handleConfirmDelete(record: any, action: string) {
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await remove(record.id)
+      if (result.success) {
+        toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
+        await fetchData()
+      } else {
+        toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
+      }
+    } catch (error) {
+      toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('timestamp', timestamp)
+provide('table_data_loader', isLoading)
+provide('isHistoryDialogOpen', isHistoryDialogOpen)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction, timestamp], () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      navigateTo({
+        name: 'rehab-encounter-id-prb-prb_id-edit',
+        params: { id: encounterId, "prb_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showPrint:
+      isDocPreviewDialogOpen.value = true      
+      break
+
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <WarningAlert v-if="!isRequirementsMet"
+    class="mb-5"
+    text="Syarat pembuatan PRB belum terpenuhi"
+    :description="[
+      'Lanjutan Penatalaksanaan Pasien harus terisi Dirujuk Eksternal',
+      'Jenis Pembayaran pasien harus JKN'
+    ]" />
+
+  <div v-else>
+    <Header :prep="headerPrep" />
+
+    <AppPrbDetail :instance="Prb" />
+    <h1 class="font-semibold text-lg mb-2">Obat</h1>
+    <AppPrbList :is-bpjs="isBpjs" :data="dummy" />
+
+    <Dialog v-model:open="isHistoryDialogOpen" title="History" size="full">
+      <AppPrbHistoryList        
+        :data="dummy"
+        :pagination-meta="prbHistory.paginationMeta"
+        @page-change="prbHistory.handlePageChange" />
+    </Dialog>
+
+    <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
+      <DocPreviewDialog :link="`https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf`" />
+    </Dialog>
+
+    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p>
+            <strong>ID:</strong>
+            {{ record?.id }}
+          </p>
+          <p v-if="record?.firstName">
+            <strong>Nama:</strong>
+            {{ record.firstName }}
+          </p>
+          <p v-if="record?.code">
+            <strong>Kode:</strong>
+            {{ record.cellphone }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>

app/components/content/vaccine-data/detail.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { withBase } from '~/models/_base'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import type { Patient } from '~/models/patient'
+import type { Person } from '~/models/person'
+import { getDetail } from '~/services/vaccine-data.service'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import type { VaccineData } from '~/models/vaccine-data'
+
+// #region Props & Emits
+const props = defineProps<{
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const VaccineDataId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
+const VaccineData = ref<VaccineData | null>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Data Vaksin',
+  icon: 'i-lucide-newspaper',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+// onMounted(async () => {
+//   const result = await getDetail(controlLetterId, {
+//     includes: "unit,specialist,subspecialist,doctor-employee-person",
+//   })
+//   if (result.success) {
+//     controlLetter.value = result.body?.data
+//   }
+// })
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+// #endregion region
+
+// #region Utilities & event handlers
+function handleAction() {
+  goBack()
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <Header :prep="headerPrep" :ref-search-nav="headerPrep.refSearchNav" />
+  <AppVaccineDataDetail :instance="VaccineData" @click="handleAction" />
+</template>

app/components/content/vaccine-data/entry.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { Patient, genPatientProps } from '~/models/patient'
+import type { ExposedForm } from '~/types/form'
+import type { PatientBase } from '~/models/patient'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { uploadAttachment } from '~/services/patient.service'
+import { getDetail, update } from '~/services/vaccine-data.service'
+import type { VaccineData } from '~/models/vaccine-data'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
+
+import { toast } from '~/components/pub/ui/toast'
+import { withBase } from '~/models/_base'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { VaccineDataSchema } from '~/schemas/vaccine-data.schema'
+import { formatDateYyyyMmDd } from '~/lib/date'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { getList, remove } from '~/services/vaccine-data.service'
+import { handleActionEdit, handleActionSave } from '~/handlers/vaccine-data.handler'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { formatDateToDatetimeLocal } from '~/lib/utils'
+
+// #region Props & Emits
+const props = withDefaults(defineProps<{
+  callbackUrl?: string
+  isBpjs?: boolean
+}>(), {
+  isBpjs: false,
+})
+
+// form related state
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
+  entityName: 'vaccine-data',
+})
+// #endregion
+
+// #region State & Computed
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const VaccineDataId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
+
+const inputForm = ref<ExposedForm<any> | null>(null)
+const VaccineData = ref({})
+const isConfirmationOpen = ref(false)
+const selectedOperativeAction = ref<any>(null)
+
+const isSepDialogOpen = ref(false)
+provide("isSepDialogOpen", isSepDialogOpen);
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(VaccineDataId)
+  if (result.success) {
+    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
+    VaccineData.value = responseData
+    inputForm.value?.setValues(responseData)
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const response = await handleActionSave(
+    await composeFormData(),
+    () => { },
+    () => { },
+    toast,
+  )
+  goBack()
+}
+
+async function composeFormData(): Promise<VaccineData> {
+  const [input,] = await Promise.all([
+    inputForm.value?.validate(),
+  ])
+
+  const results = [input]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = input?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+
+const initialValues = {
+  a1: "",
+  a2: formatDateToDatetimeLocal(new Date()),
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Update Data Vaksin</div>
+  <AppVaccineDataEntry
+    ref="inputForm"
+    :schema="VaccineDataSchema"
+    :initial-values="initialValues"
+    :is-bpjs="isBpjs"
+  />
+  
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="handleActionClick" />
+  </div>
+
+  <Confirmation
+    v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd"
+  />
+</template>
+
+<style scoped>
+/* component style */
+</style>

app/components/content/vaccine-data/list.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+// #region Imports
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { getList, remove } from '~/services/vaccine-data.service'
+import { toast } from '~/components/pub/ui/toast'
+import type { Encounter } from '~/models/encounter'
+import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import type { VaccineData } from '~/models/vaccine-data'
+import { medicalRoles } from '~/const/common/role'
+// #endregion
+
+// #region State
+const props = withDefaults(defineProps<{
+  encounter?: Encounter
+  isBpjs?: boolean
+}>(), {
+  isBpjs: false,
+})
+const route = useRoute()
+const {user} = useUserStore()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: '', }),
+  entityName: 'vaccine-data',
+})
+const dummy = [
+  {
+    "id": 1,
+    "date": new Date().toISOString(),
+    "name1": "Dr. Smith",
+    "name2": 1,
+  },
+]
+
+const isHistoryDialogOpen = ref(false)
+const isDocPreviewDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+const isRequirementsMet = ref(true)
+const vaccineData = ref<VaccineData | null>(null)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const timestamp = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Data Vaksin",
+  icon: 'i-lucide-syringe',
+}
+if(user.activeRole === 'emp|doc' || user.activeRole === 'system') {
+  headerPrep.addNav = {
+    label: "Data Vaksin",
+    onClick: () => navigateTo({
+        name: 'rehab-encounter-id-vaccine-data-add',
+        params: { id: encounterId },
+      }),
+  };
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getListData()
+})
+// #endregion
+
+// #region Functions
+async function getListData() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching Data:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+async function handleConfirmDelete(record: any, action: string) {
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await remove(record.id)
+      if (result.success) {
+        toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
+        await fetchData()
+      } else {
+        toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
+      }
+    } catch (error) {
+      toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('timestamp', timestamp)
+provide('table_data_loader', isLoading)
+provide('isHistoryDialogOpen', isHistoryDialogOpen)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction, timestamp], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo({
+        name: 'rehab-encounter-id-vaccine-data-vaccine_data_id',
+        params: { id: encounterId, "vaccine_data_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <Header :prep="headerPrep" />
+
+    <AppVaccineDataList
+      :data="dummy"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange" />
+
+    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p>
+            <strong>ID:</strong>
+            {{ record?.id }}
+          </p>
+          <p v-if="record?.name">
+            <strong>Nama:</strong>
+            {{ record.name }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>