diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index a7f09284..bd87844e 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -11,6 +11,10 @@ import {
   DropdownMenuItem,
 } from '~/components/pub/ui/dropdown-menu'
 import AppSepList from '~/components/app/sep/list.vue'
+import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, getLocalTimeZone } from '@internationalized/date'
+import type { Ref } from 'vue'
 
 // Icons
 import { X, Check } from 'lucide-vue-next'
@@ -21,14 +25,21 @@ import type { VclaimSepData } from '~/models/vclaim'
 // Libraries
 import { getFormatDateId } from '~/lib/date'
 
+// Constants
+import { serviceTypes } from '~/lib/constants.vclaim'
+
 // Services
 import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
 
 const search = ref('')
 
 const today = new Date()
-const dateSelection = ref<[Date, Date]>([today, today])
+// DateRange (radix) selection using CalendarDate
+const initCalDate = (d: Date) => new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
+const dateSelection = ref({ start: initCalDate(today), end: initCalDate(today) }) as Ref<DateRange>
 const dateRange = ref(`${getFormatDateId(today)} - ${getFormatDateId(today)}`)
+const serviceType = ref('2')
+const serviceTypesList = ref<any[]>([])
 const open = ref(false)
 
 const sepData = ref({
@@ -97,10 +108,10 @@ async function getMonitoringVisitMappers() {
   isLoading.dataListLoading = true
   data.value = []
 
-  const dateFirst = (dateSelection.value && dateSelection.value[0]) ? dateSelection.value[0] : new Date()
+  const dateFirst = dateSelection.value && dateSelection.value.start ? dateSelection.value.start.toDate(getLocalTimeZone()) : new Date()
   const result = await geMonitoringVisitList({
     date: dateFirst.toISOString().substring(0, 10),
-    serviceType: 1,
+    serviceType: serviceType.value,
   })
 
   if (result && result.success && result.body) {
@@ -145,7 +156,7 @@ async function getSepList() {
   await getMonitoringVisitMappers()
 }
 
-function exportCsv() {  
+function exportCsv() {
   console.log('Ekspor CSV dipilih')
   // tambahkan logic untuk generate CSV
 }
@@ -169,22 +180,37 @@ watch(
   },
 )
 
-onMounted(() => {
-  getSepList()
-})
-
 // When date selection changes, update display and re-fetch
 watch(
   () => dateSelection.value,
   (val) => {
     if (!val) return
-    const [start, end] = val
-    dateRange.value = `${getFormatDateId(start)} - ${getFormatDateId(end)}`
+    const startCal = val.start
+    const endCal = val.end
+    const s = startCal ? startCal.toDate(getLocalTimeZone()) : today
+    const e = endCal ? endCal.toDate(getLocalTimeZone()) : today
+    dateRange.value = `${getFormatDateId(s)} - ${getFormatDateId(e)}`
     getSepList()
   },
   { deep: true },
 )
 
+// Refetch when serviceType filter changes
+watch(
+  () => serviceType.value,
+  () => {
+    getSepList()
+  },
+)
+
+onMounted(() => {
+  serviceTypesList.value = Object.keys(serviceTypes).map((item) => ({
+    value: item.toString(),
+    label: serviceTypes[item],
+  })) as any
+  getSepList()
+})
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
@@ -203,6 +229,17 @@ provide('table_data_loader', isLoading)
         class="w-72"
       />
 
+      <!-- Filter -->
+      <div class="w-72">
+        <Select
+          id="serviceType"
+          icon-name="i-lucide-chevron-down"
+          v-model="serviceType"
+          :items="serviceTypesList"
+          placeholder="Pilih Pelayanan"
+        />
+      </div>
+
       <!-- Date Range -->
       <Popover>
         <PopoverTrigger as-child>
@@ -218,7 +255,7 @@ provide('table_data_loader', isLoading)
           </Button>
         </PopoverTrigger>
         <PopoverContent class="p-2">
-          <Calendar mode="range" />
+          <RangeCalendar v-model="dateSelection" />
         </PopoverContent>
       </Popover>
 
@@ -244,11 +281,11 @@ provide('table_data_loader', isLoading)
     </div>
 
     <div class="mt-4">
-        <AppSepList
-          v-if="!isLoading.dataListLoading"
-          :data="data"
-          @update:modelValue="onRowSelected"
-        />
+      <AppSepList
+        v-if="!isLoading.dataListLoading"
+        :data="data"
+        @update:modelValue="onRowSelected"
+      />
     </div>
 
     <!-- Pagination -->
diff --git a/app/services/vclaim-monitoring-visit.service.ts b/app/services/vclaim-monitoring-visit.service.ts
index 0c5da64e..4f6a7ebb 100644
--- a/app/services/vclaim-monitoring-visit.service.ts
+++ b/app/services/vclaim-monitoring-visit.service.ts
@@ -39,7 +39,7 @@ const dummyResponse = {
   },
 }
 
-export async function getList(params: any = null) {
+export async function getList(params: any = null, isDummy: boolean = false) {
   try {
     let url = path
     if (params?.date && params.serviceType) {
@@ -52,7 +52,7 @@ export async function getList(params: any = null) {
     const resp = await base.getList(url, params, name)
     
     // Jika success false, return dummy response
-    if (!resp.success || !resp.body?.response) {
+    if (isDummy && (!resp.success || !resp.body?.response)) {
       return {
         success: true,
         body: dummyResponse,