fix: refactors date range handling to use a formatted, reactive approach

app/components/app/sep/entry-form.vue

@@ -180,6 +180,9 @@ onMounted(() => {
   if (!isService.value) {
     serviceType.value = '2'
   }
+  if (!admissionType.value) {
+    admissionType.value = '1'
+  }
 })
 </script>
 

app/components/app/sep/list.vue

@@ -11,7 +11,8 @@ const props = defineProps<{
 
 <template>
   <PubMyUiDataTable
-    v-bind="config"
     :rows="props.data"
+    v-bind="config"
+    v-on="$attrs"
   />
 </template>

app/components/content/sep/list.vue

@@ -18,17 +18,33 @@ import { X, Check } from 'lucide-vue-next'
 // Types
 import type { VclaimSepData } from '~/models/vclaim'
 
+// Libraries
+import { getFormatDateId } from '~/lib/date'
+
 // Services
 import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
 
 const search = ref('')
-const dateRange = ref('12 Agustus 2025 - 31 Agustus 2025')
+
+const today = new Date()
+const dateSelection = ref<[Date, Date]>([today, today])
+const dateRange = ref(`${getFormatDateId(today)} - ${getFormatDateId(today)}`)
 const open = ref(false)
 
-const sepData = {
-  no_sep: 'SP23311224',
-  kartu: '001234',
-  nama: 'Kenzie',
+const sepData = ref({
+  sepNumber: '',
+  cardNumber: '',
+  patientName: '',
+})
+
+function onRowSelected(row: any) {
+  if (!row) return
+  // map possible property names from API / table rows
+  sepData.value.sepNumber = row.letterNumber || ''
+  sepData.value.cardNumber = row.cardNumber || ''
+  sepData.value.patientName = row.patientName || ''
+  recItem.value = row
+  recId.value = (row && (row.id || row.recId)) || 0
 }
 
 const paginationMeta = reactive<PaginationMeta>({
@@ -81,7 +97,7 @@ async function getMonitoringVisitMappers() {
   isLoading.dataListLoading = true
   data.value = []
 
-  const dateFirst = new Date()
+  const dateFirst = (dateSelection.value && dateSelection.value[0]) ? dateSelection.value[0] : new Date()
   const result = await geMonitoringVisitList({
     date: dateFirst.toISOString().substring(0, 10),
     serviceType: 1,
@@ -157,6 +173,18 @@ 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)}`
+    getSepList()
+  },
+  { deep: true },
+)
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
@@ -216,10 +244,11 @@ provide('table_data_loader', isLoading)
     </div>
 
     <div class="mt-4">
-      <AppSepList
-        v-if="!isLoading.dataListLoading"
-        :data="data"
-      />
+        <AppSepList
+          v-if="!isLoading.dataListLoading"
+          :data="data"
+          @update:modelValue="onRowSelected"
+        />
     </div>
 
     <!-- Pagination -->
@@ -244,9 +273,9 @@ provide('table_data_loader', isLoading)
         <DialogDescription class="text-gray-700">Apakah anda yakin ingin menghapus SEP dengan data:</DialogDescription>
 
         <div class="mt-4 space-y-2 text-sm">
-          <p>No. SEP : {{ sepData.no_sep }}</p>
-          <p>No. Kartu BPJS : {{ sepData.kartu }}</p>
-          <p>Nama Pasien : {{ sepData.nama }}</p>
+          <p>No. SEP : {{ sepData.sepNumber }}</p>
+          <p>No. Kartu BPJS : {{ sepData.cardNumber }}</p>
+          <p>Nama Pasien : {{ sepData.patientName }}</p>
         </div>
 
         <DialogFooter class="mt-6 flex justify-end gap-3">