feat(satusehat-mock): implement API Mock integration with filtering and pagination

- Add new API endpoint for fetching SatuSehat data with filtering capabilities
- Implement client-side data fetching with status, resource type, date range and search filters
- Add pagination support with server-side pagination handling
- Improve UI with loading states and pagination controls

app/components/flow/satusehat/list.vue

@@ -2,86 +2,80 @@
 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/nav/types'
-import { CircleCheckBig, CircleDashed, CircleX, Download, Ellipsis, ListFilter, Search, Send } from 'lucide-vue-next'
+import { CircleCheckBig, CircleDashed, CircleX, Ellipsis, Search, Send } from 'lucide-vue-next'
 
-const data = ref([
+// State management
-  {
+const data = ref([])
-    id: 'RSC001',
+const isLoading = reactive({
-    resource_type: 'Encounter',
+  satusehatConn: true,
-    patient: {
+  dataList: false,
-      name: 'Ahmad Wepe',
+})
-      mrn: 'RM001234',
+
-    },
+// Filter states
-    status: 2,
+const filters = reactive({
-    updated_at: '2025-03-12',
+  search: '',
-    fhir_id: 'ENC-00123',
+  status: '',
-  },
+  resource_type: 'all',
-  {
+  date_from: '',
-    id: 'RSC002',
+  date_to: '',
-    resource_type: 'Encounter',
+  page: 1,
-    patient: {
+  limit: 10,
-      name: 'Siti Aminah',
+})
-      mrn: 'RM001235',
+
-    },
+// Pagination state
-    status: 1,
+const pagination = ref({
-    updated_at: '2025-03-10',
+  total: 0,
-    fhir_id: 'ENC-001235',
+  page: 1,
-  },
+  limit: 10,
-  {
+  total_pages: 0,
-    id: 'RSC003',
+  has_next: false,
-    resource_type: 'Encounter',
+  has_prev: false,
-    patient: {
+})
-      name: 'Budi Antono',
+
-      mrn: 'RM001236',
+// API function to fetch data
-    },
+async function fetchData() {
-    status: 0,
+  try {
-    updated_at: '2025-03-11',
+    isLoading.dataList = true
-    fhir_id: 'ENC-001236',
+    const response: any = await $fetch('/api/v1/satusehat/list', {
-  },
+      method: 'POST',
-  {
+      body: {
-    id: 'RSC001',
+        status: filters.status !== '' ? Number(filters.status) : undefined,
-    resource_type: 'Encounter',
+        resource_type: filters.resource_type,
-    patient: {
+        date_from: filters.date_from,
-      name: 'Ahmad Wepe',
+        date_to: filters.date_to,
-      mrn: 'RM001234',
+        search: filters.search,
-    },
+        page: filters.page,
-    status: 2,
+        limit: filters.limit,
-    updated_at: '2025-03-12',
+      },
-    fhir_id: 'ENC-00123',
+    })
-  },
+
-  {
+    if (response.success) {
-    id: 'RSC001',
+      data.value = response.data
-    resource_type: 'Encounter',
+      pagination.value = response.meta
-    patient: {
+    }
-      name: 'Ahmad Wepe',
+  } catch (error) {
-      mrn: 'RM001234',
+    console.error('Error fetching data:', error)
-    },
+  } finally {
-    status: 2,
+    isLoading.dataList = false
-    updated_at: '2025-03-12',
+  }
-    fhir_id: 'ENC-00123',
+}
-  },
+
-  {
+// Debounced search function
-    id: 'RSC001',
+const debouncedFetchData = useDebounceFn(fetchData, 500)
-    resource_type: 'Encounter',
-    patient: {
-      name: 'Ahmad Wepe',
-      mrn: 'RM001234',
-    },
-    status: 2,
-    updated_at: '2025-03-12',
-    fhir_id: 'ENC-00123',
-  },
-])
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
     // open filter modal
   },
-  onInput: (_val: string) => {
+  onInput: (val: string) => {
-    // filter patient list
+    filters.search = val
+    filters.page = 1
+    debouncedFetchData()
   },
   onClear: () => {
-    // clear url param
+    filters.search = ''
+    filters.page = 1
+    fetchData()
   },
 }
 
@@ -89,10 +83,25 @@ const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-// Loading state management
+// Filter change handlers
-const isLoading = reactive({
+function onStatusChange(status: string) {
-  satusehatConn: true,
+  filters.status = status
-})
+  filters.page = 1
+  fetchData()
+}
+
+function onResourceTypeChange(resourceType: string) {
+  filters.resource_type = resourceType
+  filters.page = 1
+  fetchData()
+}
+
+function onDateRangeChange(dateFrom: string, dateTo: string) {
+  filters.date_from = dateFrom
+  filters.date_to = dateTo
+  filters.page = 1
+  fetchData()
+}
 
 const headerPrep: HeaderPrep = {
   title: 'SATUSEHAT Integration',
@@ -157,16 +166,20 @@ async function callSatuSehat() {
   }
 }
 
-onMounted(() => {
+// Watch for tab changes
-  callSatuSehat()
+watch(() => filters.resource_type, (newType) => {
+  onResourceTypeChange(newType)
+})
+
+onMounted(async () => {
+  await callSatuSehat()
+  await fetchData()
 })
 
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 
-const listTitle = 'FHIR Resource'
-
 const tabs = [
   {
     value: 'all',
@@ -186,15 +199,12 @@ const tabs = [
   },
 ]
 
-const form = [
+// Status filter options
-  {
+const statusOptions = [
-    value: 'search',
+  { value: '', label: 'Semua Status' },
-    label: 'Cari pasien'
+  { value: '0', label: 'Failed' },
-  },
+  { value: '1', label: 'Pending' },
-  {
+  { value: '2', label: 'Success' },
-    value: 'date-picker',
-    label: 'Filter berdasarkan tanggal',
-  },
 ]
 const actions = [
   {
@@ -210,7 +220,13 @@ const actions = [
   },
 ]
 
-const activeTabFilter = ref('all')
+// Sync activeTabFilter with filters.resource_type
+const activeTabFilter = computed({
+  get: () => filters.resource_type,
+  set: (value) => {
+    filters.resource_type = value
+  },
+})
 </script>
 
 <template>
@@ -224,28 +240,87 @@ const activeTabFilter = ref('all')
     <Tabs v-model="activeTabFilter">
       <div class="scrollbar-hide overflow-x-auto flex gap-2 justify-between">
         <TabsList>
-          <TabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value"
+          <TabsTrigger
-            class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700">
+            v-for="tab in tabs"
+            :key="tab.value"
+            :value="tab.value"
+            class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700"
+          >
             {{ tab.label }}
           </TabsTrigger>
         </TabsList>
         <div class="flex gap-2 items-center">
-          <AppSatusehatPicker />
+          <!-- Status Filter -->
+          <Select v-model="filters.status" @update:model-value="onStatusChange">
+            <SelectTrigger class="w-40 h-9">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="option in statusOptions" :key="option.value" :value="option.value">
+                {{ option.label }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          <!-- Date Range Picker -->
+          <AppSatusehatPicker @date-change="onDateRangeChange" />
+
+          <!-- Search Input -->
           <div class="relative w-full max-w-sm">
-            <Input id="search" type="text" placeholder="Cari pasien..." class="pl-7 h-9" />
+            <Input
+              id="search"
+              v-model="filters.search"
+              type="text"
+              placeholder="Cari pasien..."
+              class="pl-7 h-9"
+              @input="refSearchNav.onInput(filters.search)"
+            />
             <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
               <Search class="size-4 text-muted-foreground" />
             </span>
           </div>
-          <AppSatusehatButtonAction v-for="action in actions" :key="action.value" :icon="action.icon"
+
-            :text="action.label" />
+          <!-- Action Buttons -->
+          <AppSatusehatButtonAction
+            v-for="action in actions"
+            :key="action.value"
+            :icon="action.icon"
+            :text="action.label"
+          />
         </div>
       </div>
       <div class="mt-4">
         <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
           <div class="rounded-md border p-4">
-            <Ellipsis v-if="isLoading.satusehatConn" class="size-6 animate-pulse text-muted-foreground mx-auto" />
+            <Ellipsis v-if="isLoading.satusehatConn || isLoading.dataList" class="size-6 animate-pulse text-muted-foreground mx-auto" />
-            <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
+            <AppSatusehatList v-if="!isLoading.satusehatConn && !isLoading.dataList" :data="data" />
+
+            <!-- Pagination -->
+            <div v-if="!isLoading.satusehatConn && !isLoading.dataList && pagination.total > 0" class="mt-4 flex justify-between items-center">
+              <div class="text-sm text-muted-foreground">
+                Menampilkan {{ ((pagination.page - 1) * pagination.limit) + 1 }} -
+                {{ Math.min(pagination.page * pagination.limit, pagination.total) }}
+                dari {{ pagination.total }} data
+              </div>
+              <div class="flex gap-2">
+                <Button
+                  v-if="pagination.has_prev"
+                  variant="outline"
+                  size="sm"
+                  @click="filters.page--; fetchData()"
+                >
+                  Sebelumnya
+                </Button>
+                <Button
+                  v-if="pagination.has_next"
+                  variant="outline"
+                  size="sm"
+                  @click="filters.page++; fetchData()"
+                >
+                  Selanjutnya
+                </Button>
+              </div>
+            </div>
           </div>
         </TabsContent>
       </div>

server/api/v1/satusehat/list.post.ts

@@ -0,0 +1,171 @@
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+  
+  // Mock data lengkap
+  const mockData = [
+    {
+      id: 'RSC001',
+      resource_type: 'Encounter',
+      patient: {
+        name: 'Ahmad Wepe',
+        mrn: 'RM001234',
+      },
+      status: 2, // 0: failed, 1: pending, 2: success
+      updated_at: '2025-01-15',
+      fhir_id: 'ENC-00123',
+    },
+    {
+      id: 'RSC002',
+      resource_type: 'Patient',
+      patient: {
+        name: 'Siti Aminah',
+        mrn: 'RM001235',
+      },
+      status: 1,
+      updated_at: '2025-01-10',
+      fhir_id: 'PAT-001235',
+    },
+    {
+      id: 'RSC003',
+      resource_type: 'Observation',
+      patient: {
+        name: 'Budi Antono',
+        mrn: 'RM001236',
+      },
+      status: 0,
+      updated_at: '2025-01-11',
+      fhir_id: 'OBS-001236',
+    },
+    {
+      id: 'RSC004',
+      resource_type: 'Encounter',
+      patient: {
+        name: 'Maria Sari',
+        mrn: 'RM001237',
+      },
+      status: 2,
+      updated_at: '2025-01-12',
+      fhir_id: 'ENC-001237',
+    },
+    {
+      id: 'RSC005',
+      resource_type: 'Patient',
+      patient: {
+        name: 'Joko Widodo',
+        mrn: 'RM001238',
+      },
+      status: 1,
+      updated_at: '2025-01-13',
+      fhir_id: 'PAT-001238',
+    },
+    {
+      id: 'RSC006',
+      resource_type: 'Observation',
+      patient: {
+        name: 'Dewi Sartika',
+        mrn: 'RM001239',
+      },
+      status: 2,
+      updated_at: '2025-01-14',
+      fhir_id: 'OBS-001239',
+    },
+    {
+      id: 'RSC007',
+      resource_type: 'Encounter',
+      patient: {
+        name: 'Rudi Hartono',
+        mrn: 'RM001240',
+      },
+      status: 0,
+      updated_at: '2025-01-16',
+      fhir_id: 'ENC-001240',
+    },
+    {
+      id: 'RSC008',
+      resource_type: 'Patient',
+      patient: {
+        name: 'Sri Mulyani',
+        mrn: 'RM001241',
+      },
+      status: 2,
+      updated_at: '2025-01-17',
+      fhir_id: 'PAT-001241',
+    }
+  ]
+
+  // Ekstrak parameter filter dari request body
+  const {
+    status,
+    resource_type,
+    date_from,
+    date_to,
+    search,
+    page = 1,
+    limit = 10
+  } = body
+
+  let filteredData = [...mockData]
+
+  // Filter berdasarkan status
+  if (status !== undefined && status !== null && status !== '') {
+    filteredData = filteredData.filter(item => item.status === Number(status))
+  }
+
+  // Filter berdasarkan resource_type (transaction type)
+  if (resource_type && resource_type !== 'all') {
+    filteredData = filteredData.filter(item => 
+      item.resource_type.toLowerCase() === resource_type.toLowerCase()
+    )
+  }
+
+  // Filter berdasarkan rentang tanggal
+  if (date_from) {
+    filteredData = filteredData.filter(item => 
+      new Date(item.updated_at) >= new Date(date_from)
+    )
+  }
+
+  if (date_to) {
+    filteredData = filteredData.filter(item => 
+      new Date(item.updated_at) <= new Date(date_to)
+    )
+  }
+
+  // Filter berdasarkan pencarian nama pasien atau MRN
+  if (search) {
+    filteredData = filteredData.filter(item => 
+      item.patient.name.toLowerCase().includes(search.toLowerCase()) ||
+      item.patient.mrn.toLowerCase().includes(search.toLowerCase()) ||
+      item.fhir_id.toLowerCase().includes(search.toLowerCase())
+    )
+  }
+
+  // Pagination
+  const totalItems = filteredData.length
+  const totalPages = Math.ceil(totalItems / limit)
+  const offset = (page - 1) * limit
+  const paginatedData = filteredData.slice(offset, offset + limit)
+
+  // Simulasi delay untuk loading state
+  await new Promise(resolve => setTimeout(resolve, 300))
+
+  return {
+    success: true,
+    data: paginatedData,
+    meta: {
+      total: totalItems,
+      page: Number(page),
+      limit: Number(limit),
+      total_pages: totalPages,
+      has_next: page < totalPages,
+      has_prev: page > 1
+    },
+    filters: {
+      status,
+      resource_type,
+      date_from,
+      date_to,
+      search
+    }
+  }
+})