feat: Implement encounter list management with search, date range filtering, and record actions.

app/components/app/encounter/filter-nav.vue

@@ -18,25 +18,13 @@ const props = defineProps<{
   onExportCsv?: () => void
 }>()
 
-// function emitSearchNavClick() {
-//   props.refSearchNav?.onClick()
-// }
-//
-// function onInput(event: Event) {
-//   props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
-// }
-//
-// function btnClick() {
-//   props.prep?.addNav?.onClick?.()
-// }
+const emit = defineEmits<{
+  apply: [filters: { personName: string; startDate: string; endDate: string }]
+}>()
 
 const searchQuery = ref('')
 const isRoleRegistration = props.activePositon === 'registration'
 const isRoleMedical = props.activePositon === 'medical'
-const dateRange = ref<{ from: Date | null; to: Date | null }>({
-  from: new Date(),
-  to: new Date(),
-})
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'medium',
@@ -49,31 +37,47 @@ const todayCalendar = new CalendarDate(today.getFullYear(), today.getMonth() + 1
 // Get date 1 month ago
 const oneMonthAgo = new Date(today)
 oneMonthAgo.setMonth(today.getMonth() - 1)
-const oneMonthAgoCalendar = new CalendarDate(oneMonthAgo.getFullYear(), oneMonthAgo.getMonth() + 1, oneMonthAgo.getDate())
+const oneMonthAgoCalendar = new CalendarDate(
+  oneMonthAgo.getFullYear(),
+  oneMonthAgo.getMonth() + 1,
+  oneMonthAgo.getDate(),
+)
 
 const value = ref({
   start: oneMonthAgoCalendar,
   end: todayCalendar,
 }) as Ref<DateRange>
 
-// function onFilterClick() {
-//   console.log('Search:', searchQuery.value)
-//   console.log('Date Range:', dateRange.value)
-//   props.refSearchNav?.onClick()
-// }
+function onFilterClick() {
+  const startDate = value.value.start ? value.value.start.toString() : ''
+  const endDate = value.value.end ? value.value.end.toString() : startDate
+
+  emit('apply', {
+    personName: searchQuery.value,
+    startDate,
+    endDate,
+  })
+}
 </script>
 
 <template>
   <div class="relative w-64">
     <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
-    <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
+    <Input
+      v-model="searchQuery"
+      type="text"
+      placeholder="Cari Nama /No.RM"
+      class="pl-9"
+    />
   </div>
 
   <Popover>
     <PopoverTrigger as-child>
       <Button
         variant="outline"
-        :class="cn('min-w-[240px] max-w-[320px] justify-start text-left font-normal', !value && 'text-muted-foreground')"
+        :class="
+          cn('min-w-[240px] max-w-[320px] justify-start text-left font-normal', !value && 'text-muted-foreground')
+        "
       >
         <CalendarIcon class="mr-2 h-4 w-4" />
         <template v-if="value.start">
@@ -86,7 +90,7 @@ const value = ref({
             {{ df.format(value.start.toDate(getLocalTimeZone())) }}
           </template>
         </template>
-        <template v-else> Pick a date </template>
+        <template v-else>Pick a date</template>
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0">
@@ -99,28 +103,32 @@ const value = ref({
     </PopoverContent>
   </Popover>
 
-  <Button variant="outline" class="border-orange-500 text-orange-600 hover:bg-orange-50" @click="onFilterClick">
+  <Button
+    variant="outline"
+    class="border-orange-500 text-orange-600 hover:bg-orange-50"
+    @click="onFilterClick"
+  >
     <FilterIcon class="mr-2 size-4" />
     Filter
   </Button>
 
   <DropdownMenu v-show="props.enableExport && (isRoleRegistration || isRoleMedical)">
     <DropdownMenuTrigger as-child>
-      <Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
-        <Icon name="i-lucide-download" class="h-4 w-4" />
+      <Button
+        variant="outline"
+        class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50"
+      >
+        <Icon
+          name="i-lucide-download"
+          class="h-4 w-4"
+        />
         Ekspor
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent>
-      <DropdownMenuItem @click="onExportPdf">
-        Ekspor PDF
-      </DropdownMenuItem>
-      <DropdownMenuItem @click="onExportCsv">
-        Ekspor CSV
-      </DropdownMenuItem>
-      <DropdownMenuItem @click="onExportExcel">
-        Ekspor Excel
-      </DropdownMenuItem>
+      <DropdownMenuItem @click="onExportPdf">Ekspor PDF</DropdownMenuItem>
+      <DropdownMenuItem @click="onExportCsv">Ekspor CSV</DropdownMenuItem>
+      <DropdownMenuItem @click="onExportExcel">Ekspor Excel</DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
 </template>

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/handlers/encounter-entry.handler.ts

@@ -519,7 +519,7 @@ export function useEncounterEntry(props: {
 
       const payload: any = {
         patient_id: patientId,
-        appointment_doctor_code: formValues.doctorId || null,
+        appointment_doctor_code: formValues.doctorCode || null,
         class_code: props.classCode || '',
         subClass_code: props.subClassCode || '',
         infra_id: formValues.infra_id ?? null,