feat(satusehat): add search component, card summary and date picker

- Implement search component with lucide-vue-next icon
- Create card summary component for displaying summary data
- Add date picker component with range selection functionality
- Update list configuration and styling
- Reorganize package.json structure

app/components/flow/satusehat/list.vue

@@ -2,7 +2,7 @@
 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, Send } from 'lucide-vue-next'
+import { CircleCheckBig, CircleDashed, CircleX, Download, Ellipsis, ListFilter, Search, Send } from 'lucide-vue-next'
 
 const data = ref([
   {
@@ -38,6 +38,39 @@ const data = ref([
     updated_at: '2025-03-11',
     fhir_id: 'ENC-001236',
   },
+  {
+    id: 'RSC001',
+    resource_type: 'Encounter',
+    patient: {
+      name: 'Ahmad Wepe',
+      mrn: 'RM001234',
+    },
+    status: 2,
+    updated_at: '2025-03-12',
+    fhir_id: 'ENC-00123',
+  },
+  {
+    id: 'RSC001',
+    resource_type: 'Encounter',
+    patient: {
+      name: 'Ahmad Wepe',
+      mrn: 'RM001234',
+    },
+    status: 2,
+    updated_at: '2025-03-12',
+    fhir_id: 'ENC-00123',
+  },
+  {
+    id: 'RSC001',
+    resource_type: 'Encounter',
+    patient: {
+      name: 'Ahmad Wepe',
+      mrn: 'RM001234',
+    },
+    status: 2,
+    updated_at: '2025-03-12',
+    fhir_id: 'ENC-00123',
+  },
 ])
 
 const refSearchNav: RefSearchNav = {
@@ -131,20 +164,91 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+
+const listTitle = 'FHIR Resource'
+
+const tabs = [
+  {
+    value: 'all',
+    label: 'Semua Resource',
+  },
+  {
+    value: 'patient',
+    label: 'Patient',
+  },
+  {
+    value: 'encounter',
+    label: 'Encounter',
+  },
+  {
+    value: 'observation',
+    label: 'Observation',
+  },
+]
+
+const form = [
+  {
+    value: 'search',
+    label: 'Cari pasien'
+  },
+  {
+    value: 'date-picker',
+    label: 'Filter berdasarkan tanggal',
+  },
+]
+const actions = [
+  {
+    value: 'filter',
+    label: 'Filter',
+    icon: 'i-lucide-list-filter',
+  },
+  {
+    value: 'export',
+    label: 'Ekspor',
+    icon: 'i-lucide-download',
+
+  },
+]
+
+const activeTabFilter = ref('all')
 </script>
 
 <template>
   <PubNavHeaderPrep :prep="headerPrep" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+  <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
     <PubBaseServiceStatus v-bind="service" />
-    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-      <template v-if="isLoading.satusehatConn">
-        <PubBaseSummaryCard v-for="n in 4" :key="n" is-skeleton :stat="summaryData[n]" />
-      </template>
-      <template v-else>
-        <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
-      </template>
-    </div>
-    <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
+    <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn" :summary-data="summaryData" />
+  </div>
+  <div class="rounded-md border p-4">
+    <h2 class="text-md font-semibold py-2">FHIR Resource</h2>
+    <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"
+            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 />
+          <div class="relative w-full max-w-sm">
+            <Input id="search" type="text" placeholder="Cari pasien..." class="pl-7 h-9" />
+            <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" />
+        </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" />
+            <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
+          </div>
+        </TabsContent>
+      </div>
+    </Tabs>
   </div>
 </template>