feat: Implement encounter list with filtering and navigation components.

app/components/content/encounter/list.vue

@@ -10,6 +10,9 @@ import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confi
 import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
 import { useSidebar } from '~/components/pub/ui/sidebar/utils'
 
+// Constants
+import { paymentTypes } from '~/lib/constants.vclaim'
+
 // App libs
 import { getServicePosition } from '~/lib/roles' // previously getPositionAs
 
@@ -19,6 +22,7 @@ import {
   remove as removeEncounter,
   cancel as cancelEncounter,
 } from '~/services/encounter.service'
+import { getValueLabelList as getUnits } from '~/services/unit.service'
 
 // Handlers
 import { uploadAttachmentCustom } from '~/handlers/supporting-document.handler'
@@ -64,6 +68,12 @@ const isFilterFormDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const isRecordCancelOpen = ref(false)
 const uploadFile = ref<any>(null)
+const payments = ref<any>([])
+const units = ref<any>([])
+const visits = ref([
+  { label: 'Rujukan Internal', value: 'ri' },
+  { label: 'SEP Rujukan', value: 'sr' },
+])
 
 // Headers
 const hreaderPrep: CH.Config = {
@@ -80,31 +90,6 @@ if (!props.canCreate) {
   delete hreaderPrep.addNav
 }
 
-// Filters
-const filter = ref<{
-  installation: {
-    msg: {
-      placeholder: string
-    }
-    items: {
-      value: string
-      label: string
-      code: string
-    }[]
-  }
-  schema: any
-  initialValues?: Partial<any>
-  errors?: any
-}>({
-  installation: {
-    msg: {
-      placeholder: 'Pilih',
-    },
-    items: [],
-  },
-  schema: {},
-})
-
 // Recrod reactivities
 provide('activeServicePosition', activeServicePosition)
 provide('rec_id', recId)
@@ -153,8 +138,13 @@ watch([recSepId, recSepMenu, recSepSubMenu], (value) => {
   }
 })
 
-onMounted(() => {
+onMounted(async () => {
   getPatientList()
+  units.value = await getUnits({}, true)
+  payments.value = Object.keys(paymentTypes).map((item) => ({
+    value: item.toString(),
+    label: paymentTypes[item],
+  })) as any
 })
 
 /////// Functions
@@ -350,6 +340,7 @@ function handleRemoveConfirmation() {
     <FilterNav
       :active-positon="activeServicePosition"
       @apply="handleFilterApply"
+      @click="() => (isFilterFormDialogOpen = true)"
       @onExportPdf="() => {}"
       @onExportExcel="() => {}"
       @nExportCsv="() => {}"
@@ -364,11 +355,15 @@ function handleRemoveConfirmation() {
   <!-- Filter -->
   <Dialog
     v-model:open="isFilterFormDialogOpen"
-    title="Filter"
+    title="Filter Data"
     size="lg"
     prevent-outside
   >
-    <FilterForm v-bind="filter" />
+    <FilterForm
+      :payments="payments"
+      :units="units"
+      :visits="visits"
+    />
   </Dialog>
 
   <!-- Batal -->