feat(satusehat): add patient list components and integration

- Implement badge components for patient and status display
- Create list component with configurable table columns
- Add entry form for new patient registration
- Integrate with existing SatuSehat service flow

app/components/flow/satusehat/list.vue

@@ -4,6 +4,42 @@ import type { Summary } from '~/components/pub/base/summary-card.type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
 import { CircleCheckBig, CircleDashed, CircleX, Send } from 'lucide-vue-next'
 
+const data = ref([
+  {
+    id: 'RSC001',
+    resource_type: 'Encounter',
+    patient: {
+      name: 'Ahmad Wepe',
+      mrn: 'RM001234',
+    },
+    status: 2,
+    updated_at: '2025-03-12',
+    fhir_id: 'ENC-00123',
+  },
+  {
+    id: 'RSC002',
+    resource_type: 'Encounter',
+    patient: {
+      name: 'Siti Aminah',
+      mrn: 'RM001235',
+    },
+    status: 1,
+    updated_at: '2025-03-10',
+    fhir_id: 'ENC-001235',
+  },
+  {
+    id: 'RSC003',
+    resource_type: 'Encounter',
+    patient: {
+      name: 'Budi Antono',
+      mrn: 'RM001236',
+    },
+    status: 0,
+    updated_at: '2025-03-11',
+    fhir_id: 'ENC-001236',
+  },
+])
+
 const refSearchNav: RefSearchNav = {
   onClick: () => {
     // open filter modal
@@ -16,12 +52,16 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
 // Loading state management
 const isLoading = reactive({
   satusehatConn: true,
 })
 
-const hreaderPrep: HeaderPrep = {
+const headerPrep: HeaderPrep = {
   title: 'SATUSEHAT Integration',
   icon: 'i-lucide-box',
   addNav: {
@@ -74,7 +114,7 @@ const summaryData: Summary[] = [
 
 async function callSatuSehat() {
   try {
-    await new Promise((resolve) => setTimeout(resolve, 3000))
+    await new Promise((resolve) => setTimeout(resolve, 500))
     service.status = 'connected'
     // service.status = 'error'
     service.sessionActive = true
@@ -87,10 +127,14 @@ async function callSatuSehat() {
 onMounted(() => {
   callSatuSehat()
 })
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="hreaderPrep" :ref-search-nav="refSearchNav" />
+  <PubNavHeaderPrep :prep="headerPrep" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <PubBaseServiceStatus v-bind="service" />
     <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
@@ -101,5 +145,6 @@ onMounted(() => {
         <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </template>
     </div>
+    <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
   </div>
 </template>