feat(satusehat): implement query schema and improve data table

- Add schema.query.ts for query validation with zod
- Move constants to const.ts for better organization
- Refactor list.vue to use new query schema and constants
- Add empty state handling to data-table.vue

app/components/flow/satusehat/const.ts

@@ -0,0 +1,97 @@
+import type { ServiceStatus } from '~/components/pub/base/service-status/type'
+import type { Summary } from '~/components/pub/base/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import { CircleCheckBig, CircleDashed, CircleX, Send } from 'lucide-vue-next'
+
+export const tabs = [
+  {
+    value: 'all',
+    label: 'Semua Resource',
+  },
+  {
+    value: 'patient',
+    label: 'Patient',
+  },
+  {
+    value: 'encounter',
+    label: 'Encounter',
+  },
+  {
+    value: 'observation',
+    label: 'Observation',
+  },
+]
+
+export const actions = [
+  {
+    value: 'export',
+    label: 'Ekspor',
+    icon: 'i-lucide-download',
+  },
+]
+
+// Status filter options
+export const statusOptions = [
+  { value: '0', label: 'Failed' },
+  { value: '1', label: 'Pending' },
+  { value: '2', label: 'Success' },
+]
+export const summaryData: Summary[] = [
+  {
+    title: 'Resource Terkirim',
+    icon: Send,
+    metric: 1245,
+    trend: 0,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Sync Success',
+    icon: CircleCheckBig,
+    metric: '97%',
+    trend: 0,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Pending Queue',
+    icon: CircleDashed,
+    metric: 32,
+    trend: 0,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Failed Items',
+    icon: CircleX,
+    metric: 10,
+    trend: 0,
+    timeframe: 'daily',
+  },
+]
+
+// SATUSEHAT Service integration
+export const service = reactive<ServiceStatus>({
+  serviceName: 'SATUSEHAT',
+  serviceDesc: 'SATUSEHAT - FHIR R4 Compliant',
+  sessionActive: false,
+  status: 'connecting',
+  isSkeleton: false,
+})
+
+export const headerPrep: HeaderPrep = {
+  title: 'SATUSEHAT Integration',
+  icon: 'i-lucide-box',
+  addNav: {
+    label: 'Kirim Resource',
+    icon: 'i-lucide-send',
+    // onClick: () => navigateTo('/patient/add'),
+  },
+}
+
+export const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+  },
+  onClear: () => {
+  },
+}

app/components/flow/satusehat/list.vue

@@ -1,32 +1,27 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type';
-import type { ServiceStatus } from '~/components/pub/base/service-status/type'
-import type { Summary } from '~/components/pub/base/summary-card/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import { useUrlSearchParams } from '@vueuse/core'
-import { CircleCheckBig, CircleDashed, CircleX, Ellipsis, Search, Send } from 'lucide-vue-next'
-import Header from '~/components/pub/custom-ui/nav-header/header.vue';
+import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { actions, headerPrep, refSearchNav, service, summaryData, tabs } from './const'
+import { defaultQuery, querySchema, tabSwitcher } from './schema.query'
 
 // State management
 const data = ref([])
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
 const isLoading = reactive<DataTableLoader>({
   satusehatConn: true,
   isTableLoading: false,
 })
-
-const params = useUrlSearchParams('history', {
-  initialValue: {
-    search: '',
-    status: '',
-    resource_type: 'all',
-    date_from: '',
-    date_to: '',
-    page: 1,
-    limit: 10,
-  },
+const queryParams = useUrlSearchParams('history', {
+  initialValue: defaultQuery,
   removeFalsyValues: true,
 })
-
+const params = computed(() => {
+  const result = querySchema.safeParse(queryParams)
+  return result.data
+})
 // Pagination state
 const pagination = ref({
   total: 0,
@@ -41,22 +36,18 @@ const pagination = ref({
 async function fetchData() {
   try {
     isLoading.isTableLoading = true
-    const response: any = await $fetch('/api/v1/satusehat/list', {
-      method: 'POST',
-      body: {
-        status: params.status !== '' ? Number(params.status) : undefined,
-        resource_type: params.resource_type,
-        date_from: params.date_from,
-        date_to: params.date_to,
-        search: params.search,
-        page: params.page,
-        limit: params.limit,
-      },
+    const response = await xfetch('/api/v1/satusehat/list', 'POST', {
+      resource_type: params.value?.resource_type,
+      date_from: params.value?.date_from,
+      date_to: params.value?.date_to,
+      search: params.value?.q,
+      page: params.value?.page,
+      limit: params.value?.limit,
     })
 
     if (response.success) {
-      data.value = response.data
-      pagination.value = response.meta
+      data.value = response.body.data
+      pagination.value = response.body.meta
     }
   } catch (error) {
     console.error('Error fetching data:', error)
@@ -65,79 +56,6 @@ async function fetchData() {
   }
 }
 
-// Debounced search function
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (val: string) => {
-  },
-  onClear: () => {
-  },
-}
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-function onResourceTypeChange(resourceType: string) {
-  params.resource_type = resourceType
-  params.page = 1
-  fetchData()
-}
-
-const headerPrep: HeaderPrep = {
-  title: 'SATUSEHAT Integration',
-  icon: 'i-lucide-box',
-  addNav: {
-    label: 'Kirim Resource',
-    icon: 'i-lucide-send',
-    // onClick: () => navigateTo('/patient/add'),
-  },
-}
-
-// SATUSEHAT Service integration
-const service = reactive<ServiceStatus>({
-  serviceName: 'SATUSEHAT',
-  serviceDesc: 'SATUSEHAT - FHIR R4 Compliant',
-  sessionActive: false,
-  status: 'connecting',
-  isSkeleton: false,
-})
-
-// Initial/default data structure
-const summaryData: Summary[] = [
-  {
-    title: 'Resource Terkirim',
-    icon: Send,
-    metric: 1245,
-    trend: 0,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Sync Success',
-    icon: CircleCheckBig,
-    metric: '97%',
-    trend: 0,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Pending Queue',
-    icon: CircleDashed,
-    metric: 32,
-    trend: 0,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Failed Items',
-    icon: CircleX,
-    metric: 10,
-    trend: 0,
-    timeframe: 'daily',
-  },
-]
-
 async function callSatuSehat() {
   try {
     await new Promise((resolve) => setTimeout(resolve, 500))
@@ -150,65 +68,42 @@ async function callSatuSehat() {
   }
 }
 
-// Watch for tab changes
-watch(() => params.resource_type, (newType) => {
-  onResourceTypeChange(newType)
-})
-
+// Initialize params from URL on mount
 onMounted(async () => {
   await callSatuSehat()
   await fetchData()
 })
 
+// Watch for url param changed state and trigger refetch
+watch(params, () => {
+  fetchData()
+})
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-const tabs = [
-  {
-    value: 'all',
-    label: 'Semua Resource',
-  },
-  {
-    value: 'patient',
-    label: 'Patient',
-  },
-  {
-    value: 'encounter',
-    label: 'Encounter',
-  },
-  {
-    value: 'observation',
-    label: 'Observation',
-  },
-]
-
-// Status filter options
-const statusOptions = [
-  { value: '0', label: 'Failed' },
-  { value: '1', label: 'Pending' },
-  { value: '2', label: 'Success' },
-]
-const actions = [
-  {
-    value: 'export',
-    label: 'Ekspor',
-    icon: 'i-lucide-download',
-  },
-]
-
-// Sync activeTabFilter with filters.resource_type
+// Sync active tab filter with queryparams
+// fallback and default to `all` filter
 const activeTabFilter = computed({
-  get: () => params.resource_type,
+  get: () => {
+    const result = tabSwitcher.parse(queryParams.resource_type)
+    return result
+  },
   set: (value) => {
-    params.resource_type = value
+    queryParams.resource_type = value
+    queryParams.q = ''
+    queryParams.page = 1
+    queryParams.limit = 10
+    queryParams.date_from = ''
+    queryParams.date_to = ''
   },
 })
 </script>
 
 <template>
-  <Header :prep="headerPrep" />
+  <Header :prep="headerPrep" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
     <PubBaseServiceStatus v-bind="service" />
     <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
@@ -231,7 +126,7 @@ const activeTabFilter = computed({
 
             <Dialog>
               <DialogTrigger>
-                <Input id="search" v-model="params.search" type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
+                <Input type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
               </DialogTrigger>
               <DialogContent>
                 <DialogHeader class="border-b-1">
@@ -312,10 +207,10 @@ const activeTabFilter = computed({
                 dari {{ pagination.total }} data
               </div>
               <div class="flex gap-2">
-                <Button v-if="pagination.has_prev" variant="outline" size="sm" @click="params.page--; fetchData()">
+                <Button v-if="pagination.has_prev" variant="outline" size="sm" @click="queryParams.page--">
                   Sebelumnya
                 </Button>
-                <Button v-if="pagination.has_next" variant="outline" size="sm" @click="params.page++; fetchData()">
+                <Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
                   Selanjutnya
                 </Button>
               </div>

app/components/flow/satusehat/schema.query.ts

@@ -0,0 +1,23 @@
+import * as z from 'zod'
+
+const resourceTabEnum = z.enum(['all', 'patient', 'encounter', 'observation'])
+
+export const tabSwitcher = resourceTabEnum.default('all').catch('all')
+export const querySchema = z.object({
+  q: z.string().min(3).optional().catch(''),
+  resource_type: tabSwitcher,
+  date_from: z.string().optional().catch(''),
+  date_to: z.string().optional().catch(''),
+  page: z.coerce.number().int().min(1).default(1).catch(1),
+  limit: z.coerce.number().int().min(1).max(20).default(10).catch(10),
+})
+
+export const defaultQuery = {
+  q: '',
+  status: '',
+  resource_type: 'all',
+  date_from: '',
+  date_to: '',
+  page: 1,
+  limit: 10,
+}

app/components/pub/base/data-table/data-table.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
 import type { DataTableLoader } from './type'
+import { Info } from 'lucide-vue-next'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
+
 defineProps<{
   rows: unknown[]
   cols: any[]
@@ -33,6 +35,16 @@ const loader = inject('table_data_loader') as DataTableLoader
         </TableCell>
       </TableRow>
     </TableBody>
+    <TableBody v-if="rows.length === 0 && !loader.isTableLoading">
+      <TableRow>
+        <TableCell colspan="100%" class="text-center">
+          <div class="flex items-center justify-center">
+            <Info class="size-5 text-muted-foreground" />
+            <span class="ml-2">No data available</span>
+          </div>
+        </TableCell>
+      </TableRow>
+    </TableBody>
     <TableBody v-else>
       <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">