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 = {
+const sepData = ref({
-  no_sep: 'SP23311224',
+  sepNumber: '',
-  kartu: '001234',
+  cardNumber: '',
-  nama: 'Kenzie',
+  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
+        <AppSepList
-        v-if="!isLoading.dataListLoading"
+          v-if="!isLoading.dataListLoading"
-        :data="data"
+          :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. SEP : {{ sepData.sepNumber }}</p>
-          <p>No. Kartu BPJS : {{ sepData.kartu }}</p>
+          <p>No. Kartu BPJS : {{ sepData.cardNumber }}</p>
-          <p>Nama Pasien : {{ sepData.nama }}</p>
+          <p>Nama Pasien : {{ sepData.patientName }}</p>
         </div>
 
         <DialogFooter class="mt-6 flex justify-end gap-3">

app/lib/date.ts

@@ -1,44 +1,67 @@
+const monthsInId = [
+  'Januari',
+  'Februari',
+  'Maret',
+  'April',
+  'Mei',
+  'Juni',
+  'Juli',
+  'Agustus',
+  'September',
+  'Oktober',
+  'November',
+  'Desember',
+]
+
 export function getAge(dateString: string, comparedDate?: string): { idFormat: string; extFormat: string } {
-	const birthDate = new Date(dateString);
+  const birthDate = new Date(dateString)
-	const today = new Date();
+  const today = new Date()
 
-	if (comparedDate) {
+  if (comparedDate) {
-		const comparedDateObj = new Date(comparedDate);
+    const comparedDateObj = new Date(comparedDate)
-		today.setFullYear(comparedDateObj.getFullYear());
+    today.setFullYear(comparedDateObj.getFullYear())
-		today.setMonth(comparedDateObj.getMonth());
+    today.setMonth(comparedDateObj.getMonth())
-		today.setDate(comparedDateObj.getDate());
+    today.setDate(comparedDateObj.getDate())
-	}
+  }
 
-	// Format the date part
+  // Format the date part
-	const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
+  const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' }
-	const idFormat = birthDate.toLocaleDateString('id-ID', options);
+  const idFormat = birthDate.toLocaleDateString('id-ID', options)
 
-	// Calculate age
+  // Calculate age
-	let years = today.getFullYear() - birthDate.getFullYear();
+  let years = today.getFullYear() - birthDate.getFullYear()
-	let months = today.getMonth() - birthDate.getMonth();
+  let months = today.getMonth() - birthDate.getMonth()
-	let days = today.getDate() - birthDate.getDate();
+  let days = today.getDate() - birthDate.getDate()
 
-	if (months < 0 || (months === 0 && days < 0)) {
+  if (months < 0 || (months === 0 && days < 0)) {
-		years--;
+    years--
-		months += 12;
+    months += 12
-	}
+  }
 
-	if (days < 0) {
+  if (days < 0) {
-		const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
+    const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0)
-		days += prevMonth.getDate();
+    days += prevMonth.getDate()
-		months--;
+    months--
-	}
+  }
 
-	// Format the age part
+  // Format the age part
-	let extFormat = '';
+  let extFormat = ''
-	if ([years, months, days].filter(Boolean).join(' ')) {
+  if ([years, months, days].filter(Boolean).join(' ')) {
-		extFormat = `${years} Tahun ${months} Bulan ${days} Hari`;
+    extFormat = `${years} Tahun ${months} Bulan ${days} Hari`
-	} else {
+  } else {
-		extFormat = '0';
+    extFormat = '0'
-	}
+  }
 
-	return {
+  return {
-		idFormat,
+    idFormat,
-		extFormat
+    extFormat,
-	};
+  }
+}
+
+// Date selection: default to today - today
+export function getFormatDateId(date: Date) {
+  const dd = String(date.getDate()).padStart(2, '0')
+  const mm = monthsInId[date.getMonth()]
+  const yyyy = date.getFullYear()
+  return `${dd} ${mm} ${yyyy}`
 }

app/services/vclaim-sep.service.ts

@@ -32,7 +32,7 @@ export function makeSepData(
     noKartu: data.cardNumber || '',
     tglSep: data.sepDate,
     ppkPelayanan: data.fromClinic || '',
-    jnsPelayanan: data.admissionType ? String(data.admissionType) : '1',
+    jnsPelayanan: data.serviceType ? String(data.serviceType) : '2',
     noMR: data.medicalRecordNumber || '',
     catatan: data.note || '',
     diagAwal: data.initialDiagnosis || '',