refactor: move list sep logic to handlers

app/components/content/sep/list.vue

@@ -1,10 +1,5 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-
 // Components
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import {
   DropdownMenu,
@@ -14,213 +9,44 @@ import {
 } 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 { toast } from "~/components/pub/ui/toast"
 
 // Icons
 import { X, Check } from 'lucide-vue-next'
 
-// Types
-import type { VclaimSepData } from '~/models/vclaim'
-
 // Libraries
-import { getFormatDateId } from '~/lib/date'
+import useIntegrationSepList from '~/handlers/integration-sep-list.handler'
-import { downloadCsv, downloadXls } from '~/lib/download'
 
-// Constants
+// use handler to provide state and functions
-import { serviceTypes } from '~/lib/constants.vclaim'
+const {
+  recId,
+  recAction,
+  recItem,
+  data,
+  dateSelection,
+  dateRange,
+  serviceType,
+  serviceTypesList,
+  search,
+  open,
+  sepData,
+  headerPrep,
+  paginationMeta,
+  isLoading,
+  getSepList,
+  setServiceTypes,
+  setDateRange,
+  handleExportCsv,
+  handleExportExcel,
+  handleRowSelected,
+  handlePageChange,
+  handleRemove,
+} = useIntegrationSepList()
 
-// Services
+// expose provides so component can also use provide/inject if needed
-import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
+provide('rec_id', recId)
-import { remove as removeSepData, makeSepDataForRemove } from "~/services/vclaim-sep.service"
+provide('rec_action', recAction)
-
+provide('rec_item', recItem)
-const userStore = useUserStore()
+provide('table_data_loader', isLoading)
-const today = new Date()
-// DateRange (radix) selection using CalendarDate
-const initCalDate = (d: Date) => new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
-const search = ref('')
-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({
-  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>({
-  recordCount: 0,
-  page: 1,
-  pageSize: 10,
-  totalPage: 5,
-  hasNext: false,
-  hasPrev: false,
-})
-
-function handlePageChange(page: number) {
-  console.log('pageChange', page)
-}
-
-const data = ref<VclaimSepData[]>([])
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const headerPrep: HeaderPrep = {
-  title: 'Daftar SEP Prosedur',
-  icon: 'i-lucide-panel-bottom',
-  addNav: {
-    label: 'Tambah',
-    onClick: () => {
-      navigateTo('/integration/bpjs/sep/add')
-    },
-  },
-}
-
-function getDateFilter() {
-  let dateFilter = '';
-  const isTimeLocal = true
-  const dateFirst = dateSelection.value && dateSelection.value.start ? dateSelection.value.start.toDate(getLocalTimeZone()) : new Date()
-  if (isTimeLocal && dateSelection.value && dateSelection.value.end) {
-    const { year, month, day } = dateSelection.value.end
-    dateFilter = `${year}-${month}-${day}`
-  } else {
-    dateFilter = dateFirst.toISOString().substring(0, 10)
-  }
-  return dateFilter
-}
-
-async function getMonitoringVisitMappers() {
-  isLoading.dataListLoading = true
-  data.value = []
-  const dateFilter = getDateFilter()
-  const result = await geMonitoringVisitList({
-    date: dateFilter || '',
-    serviceType: serviceType.value,
-  })
-
-  if (result && result.success && result.body) {
-    const visitsRaw = result.body?.response?.sep || []
-
-    if (!visitsRaw) {
-      isLoading.dataListLoading = false
-      return
-    }
-
-    visitsRaw.forEach((result: any) => {
-      // Format pelayanan: "R.Inap" -> "Rawat Inap", "1" -> "Rawat Jalan", dll
-      let serviceType = result.jnsPelayanan || '-'
-      if (serviceType === 'R.Inap') {
-        serviceType = 'Rawat Inap'
-      } else if (serviceType === '1' || serviceType === 'R.Jalan') {
-        serviceType = 'Rawat Jalan'
-      }
-
-      data.value.push({
-        letterDate: result.tglSep || '-',
-        letterNumber: result.noSep || '-',
-        serviceType: serviceType,
-        flow: '-',
-        medicalRecordNumber: '-',
-        patientName: result.nama || '-',
-        cardNumber: result.noKartu || '-',
-        controlLetterNumber: result.noRujukan || '-',
-        controlLetterDate: result.tglPlgSep || '-',
-        clinicDestination: result.poli || '-',
-        attendingDoctor: '-',
-        diagnosis: result.diagnosa || '-',
-        careClass: result.kelasRawat || '-',
-      })
-    })
-  }
-
-  isLoading.dataListLoading = false
-}
-
-async function getSepList() {
-  await getMonitoringVisitMappers()
-}
-
-function exportCsv() {
-  if (!data.value || data.value.length === 0) {
-    toast({ title: 'Kosong', description: 'Tidak ada data untuk diekspor', variant: 'destructive' })
-    return
-  }
-
-  // build headers from first row keys and use data as array of objects
-  const headers = Object.keys(data.value[0] || {})
-  const filename = `file-sep-${getFormatDateId(today)}.csv`
-  downloadCsv(headers, data.value, filename)
-}
-
-async function exportExcel() {
-  if (!data.value || data.value.length === 0) {
-    toast({ title: 'Kosong', description: 'Tidak ada data untuk diekspor', variant: 'destructive' })
-    return
-  }
-
-  try {
-    const headers = Object.keys(data.value[0] || {})
-    const filename = `file-sep-${getFormatDateId(today)}.xlsx`
-    await downloadXls(headers, data.value, filename, 'SEP Data')
-  } catch (err: any) {
-    console.error('exportExcel error', err)
-    toast({ title: 'Gagal', description: err?.message || 'Gagal mengekspor data ke Excel', variant: 'destructive' })
-  }
-}
-
-async function handleRemove() {
-  try {
-    const result = await removeSepData(makeSepDataForRemove({ ...sepData.value, userName: userStore.user?.user_name }))
-    // Prefer explicit backend message if available
-    const backendMessage = result?.body?.message || result?.message || null
-    const backendStatus = result?.body?.status || result?.status || null
-
-    if (backendMessage === 'success' || (backendStatus === 'error' && backendMessage === 'Decrypt failed: illegal base64 data at input byte 16')) {
-      await getSepList()
-      toast({ title: 'Berhasil', description: backendMessage || 'Data berhasil dihapus', variant: 'default' })
-    } else {
-      toast({ title: 'Gagal', description: backendMessage || 'Gagal menghapus data', variant: 'destructive' })
-    }
-  } catch (err: any) {
-    // handle unexpected errors
-    console.error('handleRemove error', err)
-    toast({ title: 'Gagal', description: err?.message || 'Terjadi kesalahan saat menghapus data', variant: 'destructive' })
-  } finally {
-    open.value = false
-  }
-}
 
 watch(
   () => recAction.value,
@@ -231,22 +57,15 @@ watch(
   },
 )
 
-// When date selection changes, update display and re-fetch
 watch(
   () => dateSelection.value,
   (val) => {
     if (!val) return
-    const startCal = val.start
+    setDateRange()
-    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,
   () => {
@@ -255,17 +74,9 @@ watch(
 )
 
 onMounted(() => {
-  serviceTypesList.value = Object.keys(serviceTypes).map((item) => ({
+  setServiceTypes()
-    value: item.toString(),
-    label: serviceTypes[item],
-  })) as any
   getSepList()
 })
-
-provide('rec_id', recId)
-provide('rec_action', recAction)
-provide('rec_item', recItem)
-provide('table_data_loader', isLoading)
 </script>
 
 <template>
@@ -305,14 +116,14 @@ provide('table_data_loader', isLoading)
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent class="w-40">
-          <DropdownMenuItem @click="exportCsv">Ekspor CSV</DropdownMenuItem>
+          <DropdownMenuItem @click="handleExportCsv">Ekspor CSV</DropdownMenuItem>
-          <DropdownMenuItem @click="exportExcel">Ekspor Excel</DropdownMenuItem>
+          <DropdownMenuItem @click="handleExportExcel">Ekspor Excel</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
 
     <div class="mt-4">
-      <AppSepList v-if="!isLoading.dataListLoading" :data="data" @update:modelValue="onRowSelected" />
+      <AppSepList v-if="!isLoading.dataListLoading" :data="data" @update:modelValue="handleRowSelected" />
     </div>
 
     <!-- Pagination -->

app/handlers/integration-sep-list.handler.ts

@@ -0,0 +1,283 @@
+import { ref, reactive, watch } from 'vue'
+// Components
+import { toast } from '~/components/pub/ui/toast'
+// Types
+import type { Ref as VueRef } from 'vue'
+import type { DateRange } from 'radix-vue'
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import type { VclaimSepData } from '~/models/vclaim'
+// Libraries
+import { CalendarDate, getLocalTimeZone } from '@internationalized/date'
+import { getFormatDateId } from '~/lib/date'
+import { downloadCsv, downloadXls } from '~/lib/download'
+import { serviceTypes } from '~/lib/constants.vclaim'
+import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
+import { remove as removeSepData, makeSepDataForRemove } from '~/services/vclaim-sep.service'
+
+const headerKeys = [
+  'letterDate',
+  'letterNumber',
+  'serviceType',
+  'flow',
+  'medicalRecordNumber',
+  'patientName',
+  'cardNumber',
+  'controlLetterNumber',
+  'controlLetterDate',
+  'clinicDestination',
+  'attendingDoctor',
+  'diagnosis',
+  'careClass',
+]
+
+const headerLabels = [
+  'Tanggal SEP',
+  'No. SEP',
+  'Jenis Pelayanan',
+  'Alur',
+  'No. Rekam Medis',
+  'Nama Pasien',
+  'No. Kartu BPJS',
+  'No. Surat Kontrol',
+  'Tgl Surat Kontrol',
+  'Poli Tujuan',
+  'Dokter Penanggung Jawab',
+  'Diagnosa',
+  'Kelas Perawatan',
+]
+
+export function useIntegrationSepList() {
+  const userStore = useUserStore()
+  const today = new Date()
+  const initCalDate = (d: Date) => new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
+
+  const recId = ref<number>(0)
+  const recAction = ref<string>('')
+  const recItem = ref<any>(null)
+
+  const data = ref<VclaimSepData[]>([])
+  const dateSelection = ref({ start: initCalDate(today), end: initCalDate(today) }) as VueRef<DateRange>
+  const dateRange = ref(`${getFormatDateId(today)} - ${getFormatDateId(today)}`)
+  const serviceType = ref('2')
+  const serviceTypesList = ref<any[]>([])
+  const search = ref('')
+  const open = ref(false)
+  
+  const sepData = ref({
+    sepNumber: '',
+    cardNumber: '',
+    patientName: '',
+  })
+  
+  const refSearchNav: RefSearchNav = {
+    onClick: () => {},
+    onInput: (_val: string) => {},
+    onClear: () => {},
+  }
+
+  const headerPrep: HeaderPrep = {
+    title: 'Daftar SEP Prosedur',
+    icon: 'i-lucide-panel-bottom',
+    addNav: {
+      label: 'Tambah',
+      onClick: () => {
+        navigateTo('/integration/bpjs/sep/add')
+      },
+    },
+  }
+  
+  const paginationMeta = reactive<PaginationMeta>({
+    recordCount: 0,
+    page: 1,
+    pageSize: 10,
+    totalPage: 5,
+    hasNext: false,
+    hasPrev: false,
+  })
+  
+  const isLoading = reactive<DataTableLoader>({
+    isTableLoading: false,
+  })
+
+  const getDateFilter = () => {
+    let dateFilter = ''
+    const isTimeLocal = true
+    const dateFirst =
+      dateSelection.value && dateSelection.value.start
+        ? dateSelection.value.start.toDate(getLocalTimeZone())
+        : new Date()
+    if (isTimeLocal && dateSelection.value && dateSelection.value.end) {
+      const { year, month, day } = dateSelection.value.end
+      dateFilter = `${year}-${month}-${day}`
+    } else {
+      dateFilter = dateFirst.toISOString().substring(0, 10)
+    }
+    return dateFilter
+  }
+
+  const getMonitoringVisitMappers = async () => {
+    isLoading.dataListLoading = true
+    data.value = []
+    const dateFilter = getDateFilter()
+    const result = await geMonitoringVisitList({
+      date: dateFilter || '',
+      serviceType: serviceType.value,
+    })
+
+    if (result && result.success && result.body) {
+      const visitsRaw = result.body?.response?.sep || []
+      if (!visitsRaw) {
+        isLoading.dataListLoading = false
+        return
+      }
+      visitsRaw.forEach((result: any) => {
+        let st = result.jnsPelayanan || '-'
+        if (st === 'R.Inap') st = 'Rawat Inap'
+        else if (st === '1' || st === 'R.Jalan') st = 'Rawat Jalan'
+
+        data.value.push({
+          letterDate: result.tglSep || '-',
+          letterNumber: result.noSep || '-',
+          serviceType: st,
+          flow: '-',
+          medicalRecordNumber: '-',
+          patientName: result.nama || '-',
+          cardNumber: result.noKartu || '-',
+          controlLetterNumber: result.noRujukan || '-',
+          controlLetterDate: result.tglPlgSep || '-',
+          clinicDestination: result.poli || '-',
+          attendingDoctor: '-',
+          diagnosis: result.diagnosa || '-',
+          careClass: result.kelasRawat || '-',
+        })
+      })
+    }
+
+    isLoading.dataListLoading = false
+  }
+
+  const getSepList = async () => {
+    await getMonitoringVisitMappers()
+  }
+
+  const setServiceTypes = () => {
+    serviceTypesList.value = Object.keys(serviceTypes).map((item) => ({
+      value: item.toString(),
+      label: serviceTypes[item],
+    })) as any
+  }
+
+  const setDateRange = () => {
+    const startCal = dateSelection.value.start
+    const endCal = dateSelection.value.end
+    const s = startCal ? startCal.toDate(getLocalTimeZone()) : today
+    const e = endCal ? endCal.toDate(getLocalTimeZone()) : today
+    dateRange.value = `${getFormatDateId(s)} - ${getFormatDateId(e)}`
+  }
+
+  const handleExportCsv = () => {
+    if (!data.value || data.value.length === 0) {
+      toast({ title: 'Kosong', description: 'Tidak ada data untuk diekspor', variant: 'destructive' })
+      return
+    }
+
+    const yyyy = today.getFullYear()
+    const mm = String(today.getMonth() + 1).padStart(2, '0')
+    const dd = String(today.getDate()).padStart(2, '0')
+    const dateStr = `${yyyy}-${mm}-${dd}`
+    const filename = `file-sep-${dateStr}.csv`
+    downloadCsv(headerKeys, headerLabels, data.value, filename, ',', true)
+  }
+
+  const handleExportExcel = async () => {
+    if (!data.value || data.value.length === 0) {
+      toast({ title: 'Kosong', description: 'Tidak ada data untuk diekspor', variant: 'destructive' })
+      return
+    }
+
+    const yyyy = today.getFullYear()
+    const mm = String(today.getMonth() + 1).padStart(2, '0')
+    const dd = String(today.getDate()).padStart(2, '0')
+    const dateStr = `${yyyy}-${mm}-${dd}`
+    const filename = `file-sep-${dateStr}.xlsx`
+    try {
+      await downloadXls(headerKeys, headerLabels, data.value, filename, 'SEP Data')
+    } catch (err: any) {
+      console.error('exportExcel error', err)
+      toast({ title: 'Gagal', description: err?.message || 'Gagal mengekspor data ke Excel', variant: 'destructive' })
+    }
+  }
+
+  const handleRowSelected = (row: any) => {
+    if (!row) return
+    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 handlePageChange = (page: number) => {
+    // kept for compatibility
+    console.log('pageChange', page)
+  }
+
+  const handleRemove = async () => {
+    try {
+      const result = await removeSepData(
+        makeSepDataForRemove({ ...sepData.value, userName: userStore.user?.user_name }),
+      )
+      const backendMessage = result?.body?.message || result?.message || null
+      const backendStatus = result?.body?.status || result?.status || null
+
+      if (
+        backendMessage === 'success' ||
+        (backendStatus === 'error' && backendMessage === 'Decrypt failed: illegal base64 data at input byte 16')
+      ) {
+        await getSepList()
+        toast({ title: 'Berhasil', description: backendMessage || 'Data berhasil dihapus', variant: 'default' })
+      } else {
+        toast({ title: 'Gagal', description: backendMessage || 'Gagal menghapus data', variant: 'destructive' })
+      }
+    } catch (err: any) {
+      console.error('handleRemove error', err)
+      toast({
+        title: 'Gagal',
+        description: err?.message || 'Terjadi kesalahan saat menghapus data',
+        variant: 'destructive',
+      })
+    } finally {
+      open.value = false
+    }
+  }
+
+  return {
+    recId,
+    recAction,
+    recItem,
+    data,
+    dateSelection,
+    dateRange,
+    serviceType,
+    serviceTypesList,
+    search,
+    open,
+    sepData,
+    headerPrep,
+    refSearchNav,
+    paginationMeta,
+    isLoading,
+    getSepList,
+    setServiceTypes,
+    setDateRange,
+    handleExportCsv,
+    handleExportExcel,
+    handleRowSelected,
+    handlePageChange,
+    handleRemove,
+  }
+}
+
+export default useIntegrationSepList

app/lib/download.ts

@@ -16,6 +16,7 @@
  */
 export function downloadCsv(
   headers: string[] | null,
+  headerLabels: string[],
   data: Array<Record<string, any> | any[]>,
   filename = 'data.csv',
   delimiter = ',',
@@ -66,7 +67,7 @@ export function downloadCsv(
     return Object.values(row).map(escape).join(delimiter)
   })
 
-  const headerRow = _headers ? _headers.join(delimiter) : null
+  const headerRow = headerLabels ? headerLabels.join(delimiter) : _headers ? _headers.join(delimiter) : null
   const csvString = (addBOM ? '\uFEFF' : '') + [headerRow, ...rows].filter(Boolean).join('\r\n')
 
   const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' })
@@ -95,6 +96,7 @@ export function downloadCsv(
  */
 export async function downloadXls(
   headers: string[] | null,
+  headerLabels: string[],
   data: Array<Record<string, any> | any[]>,
   filename = 'data.xlsx',
   sheetName = 'Sheet1',
@@ -136,8 +138,10 @@ export async function downloadXls(
     return Object.values(row)
   })
 
-  // Combine headers and rows for sheet
+  // Combine headers/labels and rows for sheet
-  const sheetData = _headers ? [_headers, ...rows] : rows
+  // If caller provided headerLabels (as display labels), prefer them.
+  const sheetHeader = headerLabels ? headerLabels : _headers ? _headers : null
+  const sheetData = sheetHeader ? [sheetHeader, ...rows] : rows
 
   // Create worksheet and workbook
   const ws = utils.aoa_to_sheet(sheetData)