From b1cb24cae31d6e1b4c602718ceba01730319607c Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 19 Aug 2025 11:01:28 +0700
Subject: [PATCH 01/15] feat(satusehat): add integration pages and components

Add new SatuSehat integration feature including:
- Page components for list, add, edit, and detail views
- Service status component and type definitions
- Summary card component updates for string metrics
- RBAC permissions configuration for SatuSehat routes
---
 app/components/flow/satusehat/list.vue        | 107 ++++++++++++++++++
 .../pub/base/service-status.type.ts           |   7 ++
 app/components/pub/base/service-status.vue    |  68 +++++++++++
 app/components/pub/base/summary-card.type.ts  |   2 +-
 app/components/pub/base/summary-card.vue      |   8 +-
 app/lib/page-permission.ts                    |   8 ++
 .../(features)/satusehat/[id]/detail.vue      |   9 ++
 app/pages/(features)/satusehat/[id]/edit.vue  |   9 ++
 app/pages/(features)/satusehat/add.vue        |  40 +++++++
 app/pages/(features)/satusehat/index.vue      |  39 +++++++
 10 files changed, 291 insertions(+), 6 deletions(-)
 create mode 100644 app/components/flow/satusehat/list.vue
 create mode 100644 app/components/pub/base/service-status.type.ts
 create mode 100644 app/components/pub/base/service-status.vue
 create mode 100644 app/pages/(features)/satusehat/[id]/detail.vue
 create mode 100644 app/pages/(features)/satusehat/[id]/edit.vue
 create mode 100644 app/pages/(features)/satusehat/add.vue
 create mode 100644 app/pages/(features)/satusehat/index.vue

diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
new file mode 100644
index 00000000..c1634333
--- /dev/null
+++ b/app/components/flow/satusehat/list.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+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'
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive({
+  satusehatConn: false,
+})
+
+const hreaderPrep: 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 {
+    isLoading.satusehatConn = true
+
+    await new Promise((resolve) => setTimeout(resolve, 3000))
+    service.status = 'connected'
+    // service.status = 'error'
+    service.sessionActive = true
+    // service.sessionActive = false
+  } finally {
+    isLoading.satusehatConn = false
+  }
+}
+
+onMounted(() => {
+  callSatuSehat()
+})
+</script>
+
+<template>
+  <PubNavHeaderPrep :prep="hreaderPrep" :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">
+      <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>
+  </div>
+</template>
diff --git a/app/components/pub/base/service-status.type.ts b/app/components/pub/base/service-status.type.ts
new file mode 100644
index 00000000..f3d15cd0
--- /dev/null
+++ b/app/components/pub/base/service-status.type.ts
@@ -0,0 +1,7 @@
+export interface ServiceStatus {
+  serviceName: string
+  serviceDesc: string
+  sessionActive: boolean
+  status: 'connected' | 'connecting' | 'error' | 'disconnected'
+  isSkeleton?: boolean
+}
diff --git a/app/components/pub/base/service-status.vue b/app/components/pub/base/service-status.vue
new file mode 100644
index 00000000..853e0469
--- /dev/null
+++ b/app/components/pub/base/service-status.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { ServiceStatus } from './service-status.type'
+import { Loader2 } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<ServiceStatus>()
+
+const tokenStatus = computed((): string => {
+  return props.sessionActive ? 'Valid' : 'Invalid'
+})
+</script>
+
+<template>
+  <Card v-if="props.isSkeleton" class="py-6">
+    <div class="flex gap-4 justify-between px-6">
+      <div class="flex gap-2 items-center">
+        <span class="bg-gray-100">
+          <Skeleton class="bg-gray-100 w-6 h-6 sm:w-8 sm:h-8" />
+        </span>
+        <div>
+          <Skeleton class="w-64 h-8 bg-gray-100 text-xs md:text-sm text-muted-foreground" />
+        </div>
+      </div>
+      <div class="text-right flex flex-col items-end">
+        <Skeleton class="w-32 h-2 bg-gray-100 text-xs md:text-md text-muted-foreground" />
+        <Skeleton class="w-32 h-3 bg-gray-100 text-xs md:text-md font-bold" />
+      </div>
+    </div>
+  </Card>
+  <Card v-else class="py-6">
+    <div class="flex gap-4 justify-between px-6">
+      <div class="flex gap-2 items-center">
+        <span
+        :class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
+          { 'bg-red-500': props.status === 'error' },
+          { 'bg-blue-500': props.status !== 'error' },
+        )"
+        >
+          <Icon v-if="props.status === 'error'" name="i-lucide-cable" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
+          <Icon v-else name="i-lucide-bring-to-front" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
+        </span>
+        <div>
+          <p v-if="props.status === 'connected'" class="text-xs md:text-md font-bold">Koneksi {{ props.serviceName }}
+            Aktif</p>
+          <p v-if="props.status === 'connecting'" class="flex flex-row text-xs md:text-md font-bold">Menghubungkan ke API {{
+            props.serviceName }}
+            <Loader2 class="ml-2 h-4 w-4 animate-spin" />
+          </p>
+          <p v-if="props.status === 'error'" class="text-xs md:text-md font-bold">Koneksi ke API {{ props.serviceName
+          }}
+            Gagal</p>
+          <p v-if="props.status === 'connected'" class="text-xs md:text-sm text-muted-foreground">Koneksi Terhubung ke
+            API {{ props.serviceDesc }}
+          </p>
+        </div>
+      </div>
+      <div class="text-right flex flex-col items-end">
+        <p class="text-xs md:text-md text-muted-foreground">Session Token</p>
+        <p
+        :class="cn('text-xs md:text-md font-bold',
+          { 'text-blue-500': props.sessionActive },
+          { 'text-red-500': !props.sessionActive },
+        )"
+        >{{ tokenStatus }}</p>
+      </div>
+    </div>
+  </Card>
+</template>
diff --git a/app/components/pub/base/summary-card.type.ts b/app/components/pub/base/summary-card.type.ts
index 64304eaf..be04a9ce 100644
--- a/app/components/pub/base/summary-card.type.ts
+++ b/app/components/pub/base/summary-card.type.ts
@@ -1,7 +1,7 @@
 export interface Summary {
   title: string
   icon: Component
-  metric: number
+  metric: number | string
   trend: number
   timeframe: 'yearly' | 'monthly' | 'weekly' | 'daily'
 }
diff --git a/app/components/pub/base/summary-card.vue b/app/components/pub/base/summary-card.vue
index d3413111..d6454627 100644
--- a/app/components/pub/base/summary-card.vue
+++ b/app/components/pub/base/summary-card.vue
@@ -41,7 +41,7 @@ const isTrending = computed<boolean>(() => (props.stat?.trend ?? 0) > 0)
     </CardHeader>
     <CardContent>
       <Skeleton class="mb-2 h-6 w-48 bg-gray-100 text-2xl" />
-      <Skeleton class="h-4 w-64 bg-gray-100 text-xs font-medium" />
+      <Skeleton v-if="props.stat?.trend" class="h-4 w-64 bg-gray-100 text-xs font-medium" />
     </CardContent>
   </Card>
   <Card v-else-if="props.stat && !props.isSkeleton">
@@ -54,10 +54,8 @@ const isTrending = computed<boolean>(() => (props.stat?.trend ?? 0) > 0)
         {{ props.stat.metric.toLocaleString('id-ID') }}
       </div>
       <p v-if="props.stat.trend !== 0" class="text-muted-foreground flex items-center gap-1 text-xs">
-        <component
-          :is="isTrending ? ChevronUp : ChevronDown"
-          :class="cn('h-4 w-4', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })"
-        />
+        <component :is="isTrending ? ChevronUp : ChevronDown"
+          :class="cn('h-4 w-4', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })" />
         <span :class="cn('font-medium', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })">
           {{ props.stat.trend.toFixed(1) }}%
           <!-- {{ Math.abs(props.stat.trend).toFixed(1) }}% -->
diff --git a/app/lib/page-permission.ts b/app/lib/page-permission.ts
index 797dd077..3106506a 100644
--- a/app/lib/page-permission.ts
+++ b/app/lib/page-permission.ts
@@ -9,4 +9,12 @@ export const PAGE_PERMISSIONS = {
     billing: ['R'],
     management: ['R'],
   },
+  '/satusehat': {
+    doctor: ['R'],
+    nurse: ['R'],
+    admisi: ['C', 'R', 'U', 'D'],
+    pharmacy: ['R'],
+    billing: ['R'],
+    management: ['R'],
+  },
 } as const satisfies Record<string, RoleAccess>
diff --git a/app/pages/(features)/satusehat/[id]/detail.vue b/app/pages/(features)/satusehat/[id]/detail.vue
new file mode 100644
index 00000000..c1014755
--- /dev/null
+++ b/app/pages/(features)/satusehat/[id]/detail.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
+<template>
+  <div>detail satusehat</div>
+</template>
diff --git a/app/pages/(features)/satusehat/[id]/edit.vue b/app/pages/(features)/satusehat/[id]/edit.vue
new file mode 100644
index 00000000..351fe46e
--- /dev/null
+++ b/app/pages/(features)/satusehat/[id]/edit.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+</script>
+
+<template>
+  <div>edit satusehat</div>
+</template>
diff --git a/app/pages/(features)/satusehat/add.vue b/app/pages/(features)/satusehat/add.vue
new file mode 100644
index 00000000..d1fee557
--- /dev/null
+++ b/app/pages/(features)/satusehat/add.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Pasien',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/satusehat']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <FlowPatientAdd />
+  </div>
+  <PubBaseError v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/satusehat/index.vue b/app/pages/(features)/satusehat/index.vue
new file mode 100644
index 00000000..2c7bb9f5
--- /dev/null
+++ b/app/pages/(features)/satusehat/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'SATUSEHAT Integration',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/satusehat']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <FlowSatusehatList />
+    </div>
+    <PubBaseError v-else :status-code="403" />
+  </div>
+</template>

From 3e6e773313ba8775f719cb5b53e71ea4323b151d Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 19 Aug 2025 15:50:17 +0700
Subject: [PATCH 02/15] style: add loader state on acquiring token

---
 app/components/flow/satusehat/list.vue     |  4 +---
 app/components/pub/base/service-status.vue | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index c1634333..e65e02d8 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/app/components/flow/satusehat/list.vue
@@ -18,7 +18,7 @@ const refSearchNav: RefSearchNav = {
 
 // Loading state management
 const isLoading = reactive({
-  satusehatConn: false,
+  satusehatConn: true,
 })
 
 const hreaderPrep: HeaderPrep = {
@@ -74,8 +74,6 @@ const summaryData: Summary[] = [
 
 async function callSatuSehat() {
   try {
-    isLoading.satusehatConn = true
-
     await new Promise((resolve) => setTimeout(resolve, 3000))
     service.status = 'connected'
     // service.status = 'error'
diff --git a/app/components/pub/base/service-status.vue b/app/components/pub/base/service-status.vue
index 853e0469..2724e586 100644
--- a/app/components/pub/base/service-status.vue
+++ b/app/components/pub/base/service-status.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ServiceStatus } from './service-status.type'
-import { Loader2 } from 'lucide-vue-next'
+import { Loader, Loader2 } from 'lucide-vue-next'
 import { cn } from '~/lib/utils'
 
 const props = defineProps<ServiceStatus>()
@@ -30,20 +30,19 @@ const tokenStatus = computed((): string => {
   <Card v-else class="py-6">
     <div class="flex gap-4 justify-between px-6">
       <div class="flex gap-2 items-center">
-        <span
-        :class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
+        <span :class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
           { 'bg-red-500': props.status === 'error' },
           { 'bg-blue-500': props.status !== 'error' },
-        )"
-        >
+        )">
           <Icon v-if="props.status === 'error'" name="i-lucide-cable" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
           <Icon v-else name="i-lucide-bring-to-front" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
         </span>
         <div>
           <p v-if="props.status === 'connected'" class="text-xs md:text-md font-bold">Koneksi {{ props.serviceName }}
             Aktif</p>
-          <p v-if="props.status === 'connecting'" class="flex flex-row text-xs md:text-md font-bold">Menghubungkan ke API {{
-            props.serviceName }}
+          <p v-if="props.status === 'connecting'" class="flex flex-row text-xs md:text-md font-bold">Menghubungkan ke
+            API {{
+              props.serviceName }}
             <Loader2 class="ml-2 h-4 w-4 animate-spin" />
           </p>
           <p v-if="props.status === 'error'" class="text-xs md:text-md font-bold">Koneksi ke API {{ props.serviceName
@@ -56,12 +55,13 @@ const tokenStatus = computed((): string => {
       </div>
       <div class="text-right flex flex-col items-end">
         <p class="text-xs md:text-md text-muted-foreground">Session Token</p>
-        <p
-        :class="cn('text-xs md:text-md font-bold',
+        <p v-if="props.status === 'connecting'">
+          <Loader class="ml-2 h-4 w-4 animate-spin" />
+        </p>
+        <p v-else :class="cn('text-xs md:text-md font-bold',
           { 'text-blue-500': props.sessionActive },
           { 'text-red-500': !props.sessionActive },
-        )"
-        >{{ tokenStatus }}</p>
+        )">{{ tokenStatus }}</p>
       </div>
     </div>
   </Card>

From 1b84ce3c62bfd0519db811e2e4eb59d2372ca9c3 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 19 Aug 2025 16:40:53 +0700
Subject: [PATCH 03/15] feat(doctor): add status badge component for doctor
 list

Replace hardcoded status text with a reusable status badge component to improve consistency and maintainability. Remove console.log statement and adjust column widths in the list configuration.
---
 app/components/app/doctor/list-cfg.ts      | 25 +++++++++----------
 app/components/app/doctor/status-badge.vue | 29 ++++++++++++++++++++++
 2 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 app/components/app/doctor/status-badge.vue

diff --git a/app/components/app/doctor/list-cfg.ts b/app/components/app/doctor/list-cfg.ts
index 9d47c6d0..977e7427 100644
--- a/app/components/app/doctor/list-cfg.ts
+++ b/app/components/app/doctor/list-cfg.ts
@@ -4,11 +4,7 @@ import { defineAsyncComponent } from 'vue'
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
-
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 export const cols: Col[] = [
   { width: 100 },
@@ -19,10 +15,10 @@ export const cols: Col[] = [
   {},
   {},
   {},
+  { width: 120 },
   { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 50 },
+  {},
+  {},
 ]
 
 export const header: Th[][] = [
@@ -59,7 +55,6 @@ export const delKeyNames: KeyLabel[] = [
 
 export const funcParsed: RecStrFuncUnknown = {
   name: (rec: unknown): unknown => {
-    console.log(rec)
     const recX = rec as SmallDetailDto
     return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
   },
@@ -78,10 +73,6 @@ export const funcParsed: RecStrFuncUnknown = {
     const recX = rec as SmallDetailDto
     return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
   },
-  status: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return doctorStatus[recX.status_code as keyof typeof doctorStatus]
-  },
 }
 
 export const funcComponent: RecStrFuncComponent = {
@@ -93,6 +84,14 @@ export const funcComponent: RecStrFuncComponent = {
     }
     return res
   },
+  status(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
 }
 
 export const funcHtml: RecStrFuncUnknown = {
diff --git a/app/components/app/doctor/status-badge.vue b/app/components/app/doctor/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/doctor/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>

From 341c27679c5a590855c54e719bcfdc007c4ee21c Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 19 Aug 2025 16:51:21 +0700
Subject: [PATCH 04/15] refactor(data-table): improve type safety and rendering
 logic

- Replace ambiguous `object` types with more specific type definitions
- Separate HTML rendering from plain text interpolation for better security
- Simplify template logic by removing nested ternary operations
---
 app/components/pub/base/data-table.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/components/pub/base/data-table.vue b/app/components/pub/base/data-table.vue
index 983559b8..b913affc 100644
--- a/app/components/pub/base/data-table.vue
+++ b/app/components/pub/base/data-table.vue
@@ -3,12 +3,12 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~
 
 defineProps<{
   rows: unknown[]
-  cols: object
-  header: object[]
+  cols: any[]
+  header: any[]
   keys: string[]
-  funcParsed: object
-  funcHtml: object
-  funcComponent: object
+  funcParsed: Record<string, (row: any) => any>
+  funcHtml: Record<string, (row: any) => string>
+  funcComponent: Record<string, (row: any, idx: number) => any>
 }>()
 </script>
 
@@ -37,7 +37,12 @@ defineProps<{
           />
           <!-- If funcParsed or funcHtml returns a value -->
           <template v-else>
-            {{ funcParsed[key]?.(row) ?? funcHtml[key]?.(row) ?? row[key] }}
+            <!-- Use v-html for funcHtml to render HTML content -->
+            <div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row)"></div>
+            <!-- Use normal interpolation for funcParsed and regular data -->
+            <template v-else>
+              {{ funcParsed[key]?.(row) ?? (row as any)[key] }}
+            </template>
           </template>
         </TableCell>
       </TableRow>

From 8fc097d92fe2812f81d7e730e536760057bdbae1 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 19 Aug 2025 17:04:49 +0700
Subject: [PATCH 05/15] feat(patient): add status badge component for patient
 list

Implement a new status badge component to visually indicate patient status (active/inactive) in the patient list. The badge uses different colors based on status code and is integrated into the list configuration.
---
 app/components/app/patient/list-cfg.ts      | 12 +++++++++
 app/components/app/patient/status-badge.vue | 29 +++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 app/components/app/patient/status-badge.vue

diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
index 0e1fe7f4..63455faa 100644
--- a/app/components/app/patient/list-cfg.ts
+++ b/app/components/app/patient/list-cfg.ts
@@ -4,6 +4,7 @@ import { defineAsyncComponent } from 'vue'
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 export const cols: Col[] = [
   {},
@@ -103,6 +104,17 @@ export const funcComponent: RecStrFuncComponent = {
     }
     return res
   },
+  status(rec, idx) {
+    if (rec.status === null) {
+      rec.status_code = 0
+    }
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
 }
 
 export const funcHtml: RecStrFuncUnknown = {
diff --git a/app/components/app/patient/status-badge.vue b/app/components/app/patient/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/patient/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>

From bd98bb815a7ec9fbf2f39f65a1ca454b8cf09328 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 20 Aug 2025 14:49:59 +0700
Subject: [PATCH 06/15] refactor: update type casting and clean up imports

- Add type casting for route.meta.title in index.vue
- Update tailwind css path in components.json
- Remove unused imports and simplify dashboard component
---
 app/components/flow/dashboard/index.vue | 12 ++++--------
 app/pages/index.vue                     |  2 +-
 components.json                         |  2 +-
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/components/flow/dashboard/index.vue b/app/components/flow/dashboard/index.vue
index 9b591024..2195b428 100644
--- a/app/components/flow/dashboard/index.vue
+++ b/app/components/flow/dashboard/index.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import { Activity, CreditCard, DollarSign, Users, UserCheck, UsersRound, Calendar, Hospital } from 'lucide-vue-next'
-
-definePageMeta({
-  roles: ['sys', 'doc'],
-})
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
 
 const dataCard = ref({
   totalRevenue: 0,
@@ -166,10 +162,10 @@ onMounted(() => {
           </CardHeader>
           <CardContent class="grid cursor-pointer gap-8 md:grid-cols-4 md:gap-8">
             <Card
-              v-for="item in linkItems"
-              :key="item"
+            v-for="item in linkItems"
+            :key="item.title"
               class="border-primary hover:bg-primary my-2 h-32 border transition-colors duration-200 hover:bg-gray-200"
-            >
+              >
               <NuxtLink :to="item.link">
                 <CardContent class="my-2 grid h-full grid-rows-2 place-items-center">
                   <Icon :name="item.icon" class="text-primary h-9 w-[60px]" />
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 99afb9dd..5d6072e5 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -8,7 +8,7 @@ definePageMeta({
 
 const route = useRoute()
 useHead({
-  title: () => route.meta.title,
+  title: () => route.meta.title as string,
 })
 </script>
 
diff --git a/components.json b/components.json
index 9eb92e6b..ede8c33e 100644
--- a/components.json
+++ b/components.json
@@ -4,7 +4,7 @@
   "typescript": true,
   "tailwind": {
     "config": "",
-    "css": "app/assets/css/tailwind.css",
+    "css": "app/assets/css/main.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""

From d913724d62ddb7ace0e350ae1005dcb057612748 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 20 Aug 2025 14:50:17 +0700
Subject: [PATCH 07/15] 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/satusehat/badge-patient.vue           | 13 +++
 app/components/app/satusehat/badge-status.vue | 29 ++++++
 app/components/app/satusehat/badge.vue        | 36 ++++++++
 app/components/app/satusehat/entry-form.vue   | 47 ++++++++++
 app/components/app/satusehat/list-cfg.ts      | 89 +++++++++++++++++++
 app/components/app/satusehat/list.vue         | 19 ++++
 app/components/app/satusehat/picker.vue       |  0
 app/components/app/satusehat/search.vue       |  0
 app/components/flow/satusehat/list.vue        | 51 ++++++++++-
 app/components/pub/base/data-table.vue        | 15 ++--
 10 files changed, 286 insertions(+), 13 deletions(-)
 create mode 100644 app/components/app/satusehat/badge-patient.vue
 create mode 100644 app/components/app/satusehat/badge-status.vue
 create mode 100644 app/components/app/satusehat/badge.vue
 create mode 100644 app/components/app/satusehat/entry-form.vue
 create mode 100644 app/components/app/satusehat/list-cfg.ts
 create mode 100644 app/components/app/satusehat/list.vue
 create mode 100644 app/components/app/satusehat/picker.vue
 create mode 100644 app/components/app/satusehat/search.vue

diff --git a/app/components/app/satusehat/badge-patient.vue b/app/components/app/satusehat/badge-patient.vue
new file mode 100644
index 00000000..41202aaf
--- /dev/null
+++ b/app/components/app/satusehat/badge-patient.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col justify-center">
+    <p class="font-semibold text-sm">{{ props.rec.patient.name }}</p>
+    <p class="text-xs text-muted-foreground">{{ props.rec.patient.mrn }}</p>
+  </div>
+</template>
diff --git a/app/components/app/satusehat/badge-status.vue b/app/components/app/satusehat/badge-status.vue
new file mode 100644
index 00000000..5ff492f0
--- /dev/null
+++ b/app/components/app/satusehat/badge-status.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Badge from './badge.vue'
+import { rowStatus } from './list-cfg'
+
+const props = defineProps<{
+  rec: { status: number }
+  idx?: number
+}>()
+
+const variants = {
+  0: 'error',
+  1: 'warning',
+  2: 'info',
+} as const
+
+const statusText = computed(() => {
+  return rowStatus[props.rec.status as keyof typeof rowStatus]
+})
+
+const badgeStatus = computed((): 'error' | 'warning' | 'success' | 'info' => {
+  return variants[props.rec.status as keyof typeof variants] ?? 'info'
+})
+</script>
+
+<template>
+  <div class="flex">
+    <Badge :status="badgeStatus" :text="statusText" />
+  </div>
+</template>
diff --git a/app/components/app/satusehat/badge.vue b/app/components/app/satusehat/badge.vue
new file mode 100644
index 00000000..197cb084
--- /dev/null
+++ b/app/components/app/satusehat/badge.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cva } from 'class-variance-authority'
+import { cn } from '~/lib/utils'
+
+interface BadgeProps {
+  status: 'success' | 'info' | 'warning' | 'error'
+  text: string
+}
+
+const props = defineProps<BadgeProps>()
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        success: 'rounded-full border-transparent bg-green-500 text-white hover:bg-green-600',
+        info: 'rounded-full border-transparent bg-blue-500 text-white hover:bg-blue-600',
+        warning: 'rounded-full border-transparent bg-yellow-500 text-white hover:bg-yellow-600',
+        error: 'rounded-full border-transparent bg-red-500 text-white hover:bg-red-600',
+      },
+    },
+    defaultVariants: {
+      variant: 'info',
+    },
+  },
+)
+</script>
+
+<template>
+  <div class="flex">
+    <div :class="cn(badgeVariants({ variant: props.status }))">
+      {{ props.text }}
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/satusehat/entry-form.vue b/app/components/app/satusehat/entry-form.vue
new file mode 100644
index 00000000..5768c6a0
--- /dev/null
+++ b/app/components/app/satusehat/entry-form.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Block from '~/components/pub/form/block.vue'
+import FieldGroup from '~/components/pub/form/field-group.vue'
+import Field from '~/components/pub/form/field.vue'
+import Label from '~/components/pub/form/label.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Icon name="i-lucide-user" class="me-2" />
+      <span class="font-semibold">Tambah</span> Pasien
+    </div>
+
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nama</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup :column="3">
+          <Label>Nomor RM</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/satusehat/list-cfg.ts b/app/components/app/satusehat/list-cfg.ts
new file mode 100644
index 00000000..d7d43cae
--- /dev/null
+++ b/app/components/app/satusehat/list-cfg.ts
@@ -0,0 +1,89 @@
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+export const rowType = {
+  1: 'Patient',
+  2: 'Encounter',
+  3: 'Observation',
+}
+
+export const rowStatus = {
+  0: 'Gagal',
+  1: 'Pending',
+  2: 'Terkirim',
+}
+
+const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+const patientBadge = defineAsyncComponent(() => import('./badge-patient.vue'))
+const statusBadge = defineAsyncComponent(() => import('./badge-status.vue'))
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 100 },
+  { width: 100 },
+  { width: 100 },
+  { width: 100 },
+  { width: 100 },
+  { width: 100 },
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'ID' },
+    { label: 'Jenis' },
+    { label: 'Pasien' },
+    { label: 'Status' },
+    { label: 'Terakhir Update' },
+    { label: 'FHIR ID' },
+    { label: '' },
+  ],
+]
+
+export const keys = ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  patient(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: patientBadge,
+    }
+    return res
+  },
+  status(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/satusehat/list.vue b/app/components/app/satusehat/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/satusehat/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/satusehat/picker.vue b/app/components/app/satusehat/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/satusehat/search.vue b/app/components/app/satusehat/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index e65e02d8..2f3ee437 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/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>
diff --git a/app/components/pub/base/data-table.vue b/app/components/pub/base/data-table.vue
index b913affc..31fa7050 100644
--- a/app/components/pub/base/data-table.vue
+++ b/app/components/pub/base/data-table.vue
@@ -14,13 +14,11 @@ defineProps<{
 
 <template>
   <Table>
+
     <TableHeader>
       <TableRow>
-        <TableHead
-          v-for="(h, idx) in header[0]"
-          :key="`head-${idx}`"
-          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
-        >
+        <TableHead v-for="(h, idx) in header[0]" :key="`head-${idx}`"
+          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }">
           {{ h.label }}
         </TableHead>
       </TableRow>
@@ -30,11 +28,8 @@ defineProps<{
       <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
           <!-- If funcComponent has a renderer -->
-          <component
-            :is="funcComponent[key](row, rowIndex).component"
-            v-if="funcComponent[key]"
-            v-bind="funcComponent[key](row, rowIndex)"
-          />
+          <component :is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
+            v-bind="funcComponent[key](row, rowIndex)" />
           <!-- If funcParsed or funcHtml returns a value -->
           <template v-else>
             <!-- Use v-html for funcHtml to render HTML content -->

From 6fe1bd2c4898eef778adedc30a593f7126112f25 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 21 Aug 2025 11:42:59 +0700
Subject: [PATCH 08/15] 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/satusehat/button-action.vue           |  16 ++
 app/components/app/satusehat/card-summary.vue |  19 ++
 app/components/app/satusehat/list-cfg.ts      |  12 +-
 app/components/app/satusehat/list.vue         |  11 +-
 app/components/app/satusehat/picker.vue       | 260 ++++++++++++++++++
 app/components/app/satusehat/search.vue       |  12 +
 app/components/flow/satusehat/list.vue        | 126 ++++++++-
 app/components/layout/AppSidebar.vue          |  24 +-
 app/components/pub/base/data-table.vue        |  14 +-
 app/components/pub/base/service-status.vue    |  12 +-
 app/components/pub/base/summary-card.vue      |   6 +-
 package.json                                  |   4 +-
 12 files changed, 462 insertions(+), 54 deletions(-)
 create mode 100644 app/components/app/satusehat/button-action.vue
 create mode 100644 app/components/app/satusehat/card-summary.vue

diff --git a/app/components/app/satusehat/button-action.vue b/app/components/app/satusehat/button-action.vue
new file mode 100644
index 00000000..f8ee85ec
--- /dev/null
+++ b/app/components/app/satusehat/button-action.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  text: string
+  icon: string
+}>()
+</script>
+
+<template>
+  <Button
+  variant="outline" class="text-primary border-primary bg-white hover:bg-gray-50 focus:bg-gray-150
+         focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+         >
+    <Icon :name="props.icon" class="size-4 me-2" />
+    {{ props.text }}
+  </Button>
+</template>
diff --git a/app/components/app/satusehat/card-summary.vue b/app/components/app/satusehat/card-summary.vue
new file mode 100644
index 00000000..a6bf2457
--- /dev/null
+++ b/app/components/app/satusehat/card-summary.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { Summary } from '~/components/pub/base/summary-card.type';
+
+const props = defineProps<{
+  isLoading: boolean
+  summaryData: Summary[]
+}>()
+</script>
+
+<template>
+  <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+    <template v-if="props.isLoading">
+      <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>
+</template>
diff --git a/app/components/app/satusehat/list-cfg.ts b/app/components/app/satusehat/list-cfg.ts
index d7d43cae..961422ea 100644
--- a/app/components/app/satusehat/list-cfg.ts
+++ b/app/components/app/satusehat/list-cfg.ts
@@ -26,7 +26,6 @@ export const cols: Col[] = [
   { width: 100 },
   { width: 100 },
   { width: 100 },
-  { width: 100 },
 ]
 
 export const header: Th[][] = [
@@ -37,11 +36,10 @@ export const header: Th[][] = [
     { label: 'Status' },
     { label: 'Terakhir Update' },
     { label: 'FHIR ID' },
-    { label: '' },
   ],
 ]
 
-export const keys = ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id', 'action']
+export const keys = ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -72,14 +70,6 @@ export const funcComponent: RecStrFuncComponent = {
     }
     return res
   },
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
 }
 
 export const funcHtml: RecStrFuncUnknown = {
diff --git a/app/components/app/satusehat/list.vue b/app/components/app/satusehat/list.vue
index 5b8778d9..e2921fef 100644
--- a/app/components/app/satusehat/list.vue
+++ b/app/components/app/satusehat/list.vue
@@ -7,13 +7,6 @@ defineProps<{
 </script>
 
 <template>
-  <PubBaseDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
+  <PubBaseDataTable :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+    :func-html="funcHtml" :func-component="funcComponent" />
 </template>
diff --git a/app/components/app/satusehat/picker.vue b/app/components/app/satusehat/picker.vue
index e69de29b..3ffaf77f 100644
--- a/app/components/app/satusehat/picker.vue
+++ b/app/components/app/satusehat/picker.vue
@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import type { Grid } from 'radix-vue/date'
+import type { Ref } from 'vue'
+import { CalendarDate } from '@internationalized/date'
+import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { RangeCalendarRoot, useDateFormatter } from 'radix-vue'
+import { createMonth, toDate } from 'radix-vue/date'
+import { buttonVariants } from '~/components/pub/ui/button'
+
+import { cn } from '~/lib/utils'
+
+// Props untuk kustomisasi
+interface Props {
+  modelValue?: DateRange
+  placeholder?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Pick a date range',
+  class: '',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: DateRange]
+}>()
+
+const value = ref(props.modelValue || {
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 2, 9),
+}) as Ref<DateRange>
+
+watch(value, (newValue) => {
+  emit('update:modelValue', newValue)
+}, { deep: true })
+
+const locale = ref('en-US')
+const formatter = useDateFormatter(locale.value)
+
+const placeholder = ref(value.value.start) as Ref<DateValue>
+const secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>
+
+// Create independent month grids
+const firstMonth = ref(
+  createMonth({
+    dateObj: placeholder.value,
+    locale: locale.value,
+    fixedWeeks: true,
+    weekStartsOn: 0,
+  }),
+) as Ref<Grid<DateValue>>
+
+const secondMonth = ref(
+  createMonth({
+    dateObj: secondMonthPlaceholder.value,
+    locale: locale.value,
+    fixedWeeks: true,
+    weekStartsOn: 0,
+  }),
+) as Ref<Grid<DateValue>>
+
+// Function to update months independently
+function updateMonth(reference: 'first' | 'second', months: number) {
+  if (reference === 'first') {
+    placeholder.value = placeholder.value.add({ months })
+  } else {
+    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({ months })
+  }
+}
+
+// Watch first month placeholder
+watch(placeholder, (_placeholder) => {
+  firstMonth.value = createMonth({
+    dateObj: _placeholder,
+    weekStartsOn: 0,
+    fixedWeeks: true,
+    locale: locale.value,
+  })
+})
+
+// Watch second month placeholder
+watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
+  secondMonth.value = createMonth({
+    dateObj: _secondMonthPlaceholder,
+    weekStartsOn: 0,
+    fixedWeeks: true,
+    locale: locale.value,
+  })
+})
+</script>
+
+<template>
+  <div :class="cn('w-full', props.class)">
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button variant="outline" :class="cn(
+          'w-full justify-start text-left font-normal',
+          !value && 'text-muted-foreground',
+        )">
+          <CalendarIcon class="mr-2 h-4 w-4" />
+          <template v-if="value.start">
+            <template v-if="value.end">
+              {{
+                formatter.custom(toDate(value.start), {
+                  dateStyle: 'medium',
+                })
+              }}
+              -
+              {{
+                formatter.custom(toDate(value.end), {
+                  dateStyle: 'medium',
+                })
+              }}
+            </template>
+
+            <template v-else>
+              {{
+                formatter.custom(toDate(value.start), {
+                  dateStyle: 'medium',
+                })
+              }}
+            </template>
+          </template>
+          <template v-else>
+            {{ props.placeholder }}
+          </template>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        class="w-auto p-0 rounded-xl shadow-lg border bg-white dark:bg-neutral-900 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+        align="start">
+        <RangeCalendarRoot v-slot="{ weekDays }" v-model="value" v-model:placeholder="placeholder" class="p-4">
+          <div class="flex flex-col gap-6 sm:flex-row sm:gap-8">
+            <!-- First Month -->
+            <div class="flex flex-col gap-4">
+              <div class="flex items-center justify-between">
+                <Button :class="cn(
+                  buttonVariants({ variant: 'outline' }),
+                  'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                )" @click="updateMonth('first', -1)">
+                  <ChevronLeft class="h-4 w-4 text-primary" />
+                </Button>
+                <div class="text-sm font-medium">
+                  {{
+                    formatter.fullMonthAndYear(
+                      toDate(firstMonth.value),
+                    )
+                  }}
+                </div>
+                <Button :class="cn(
+                  buttonVariants({ variant: 'outline' }),
+                  'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                )" @click="updateMonth('first', 1)">
+                  <ChevronRight class="h-4 w-4 text-primary" />
+                </Button>
+              </div>
+              <RangeCalendarGrid>
+                <RangeCalendarGridHead>
+                  <RangeCalendarGridRow>
+                    <RangeCalendarHeadCell v-for="day in weekDays" :key="day" class="w-full">
+                      {{ day }}
+                    </RangeCalendarHeadCell>
+                  </RangeCalendarGridRow>
+                </RangeCalendarGridHead>
+                <RangeCalendarGridBody class="mt-2">
+                  <RangeCalendarGridRow v-for="(weekDates, index) in firstMonth.rows" :key="`weekDate-${index}`"
+                    class="w-full">
+                    <RangeCalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+                      <RangeCalendarCellTrigger :day="weekDate" :month="firstMonth.value" :class="cn(
+                        'h-9 w-9 p-0 text-sm rounded-md transition-colors flex items-center justify-center',
+
+                        // tanggal bulan lain (past/next month)
+                        'data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50',
+
+                        // tanggal terpilih (start / end)
+                        'data-[selected]:bg-green-600 data-[selected]:text-white',
+
+                        // tanggal dalam rentang
+                        'data-[in-range]:bg-green-500 data-[in-range]:text-white',
+
+                        // rounded pill untuk range
+                        'data-[selection-start]:rounded-l-full data-[selection-end]:rounded-r-full',
+
+                        // hover
+                        'hover:bg-accent hover:text-accent-foreground'
+                      )" />
+
+                    </RangeCalendarCell>
+                  </RangeCalendarGridRow>
+                </RangeCalendarGridBody>
+              </RangeCalendarGrid>
+            </div>
+
+            <!-- Second Month -->
+            <div class="flex flex-col gap-4">
+              <div class="flex items-center justify-between">
+                <Button :class="cn(
+                  buttonVariants({ variant: 'outline' }),
+                  'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                )" @click="updateMonth('second', -1)">
+                  <ChevronLeft class="h-4 w-4 text-primary" />
+                </Button>
+                <div class="text-sm font-medium">
+                  {{
+                    formatter.fullMonthAndYear(
+                      toDate(secondMonth.value),
+                    )
+                  }}
+                </div>
+                <Button :class="cn(
+                  buttonVariants({ variant: 'outline' }),
+                  'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+                )" @click="updateMonth('second', 1)">
+                  <ChevronRight class="h-4 w-4 text-primary" />
+                </Button>
+              </div>
+              <RangeCalendarGrid>
+                <RangeCalendarGridHead>
+                  <RangeCalendarGridRow>
+                    <RangeCalendarHeadCell v-for="day in weekDays" :key="day" class="w-full">
+                      {{ day }}
+                    </RangeCalendarHeadCell>
+                  </RangeCalendarGridRow>
+                </RangeCalendarGridHead>
+                <RangeCalendarGridBody class="mt-2">
+                  <RangeCalendarGridRow v-for="(weekDates, index) in secondMonth.rows" :key="`weekDate-${index}`"
+                    class="w-full">
+                    <RangeCalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+                      <RangeCalendarCellTrigger :day="weekDate" :month="secondMonth.value" :class="cn(
+                        'h-9 w-9 p-0 text-sm rounded-md transition-colors flex items-center justify-center',
+
+                        // tanggal bulan lain (past/next month)
+                        'data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50',
+
+                        // tanggal terpilih (start / end)
+                        'data-[selected]:bg-green-600 data-[selected]:text-white',
+
+                        // tanggal dalam rentang
+                        'data-[in-range]:bg-green-500 data-[in-range]:text-white',
+
+                        // rounded pill untuk range
+                        'data-[selection-start]:rounded-l-full data-[selection-end]:rounded-r-full',
+
+                        // hover
+                        'hover:bg-accent hover:text-accent-foreground'
+                      )" />
+
+                    </RangeCalendarCell>
+                  </RangeCalendarGridRow>
+                </RangeCalendarGridBody>
+              </RangeCalendarGrid>
+            </div>
+          </div>
+        </RangeCalendarRoot>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/app/components/app/satusehat/search.vue b/app/components/app/satusehat/search.vue
index e69de29b..9e2d2405 100644
--- a/app/components/app/satusehat/search.vue
+++ b/app/components/app/satusehat/search.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div class="relative w-full max-w-sm items-center">
+    <Input id="search" type="text" placeholder="Search..." class="pl-10" />
+    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
+      <Search class="size-6 text-muted-foreground" />
+    </span>
+  </div>
+</template>
diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index 2f3ee437..eb9b9616 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/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>
diff --git a/app/components/layout/AppSidebar.vue b/app/components/layout/AppSidebar.vue
index 813d9bd8..1e18534a 100644
--- a/app/components/layout/AppSidebar.vue
+++ b/app/components/layout/AppSidebar.vue
@@ -12,12 +12,12 @@ const teams: {
   logo: string
   plan: string
 }[] = [
-    {
-      name: 'SIMRS - RSSA',
-      logo: '/rssa-logo.png',
-      plan: 'Saiful Anwar Hospital',
-    },
-  ]
+  {
+    name: 'SIMRS - RSSA',
+    logo: '/rssa-logo.png',
+    plan: 'Saiful Anwar Hospital',
+  },
+]
 const sidebar = {
   collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
   side: 'left', // 'left' | 'right'
@@ -59,8 +59,10 @@ async function setMenu() {
         <SidebarGroupLabel>
           {{ navMenu.heading }}
         </SidebarGroupLabel>
-        <component :is="resolveNavItemComponent(item)" v-for="(item, index) in navMenu.items" :key="index" :item="item"
-          class="my-2 mb-2" />
+        <component
+:is="resolveNavItemComponent(item)" v-for="(item, index) in navMenu.items" :key="index" :item="item"
+          class="my-2 mb-2"
+/>
       </SidebarGroup>
       <template v-else>
         <div class="p-5">
@@ -68,8 +70,10 @@ async function setMenu() {
         </div>
       </template>
       <SidebarGroup class="mt-auto">
-        <component :is="resolveNavItemComponent(item)" v-for="(item, index) in navMenuBottom" :key="index" :item="item"
-          size="sm" />
+        <component
+:is="resolveNavItemComponent(item)" v-for="(item, index) in navMenuBottom" :key="index" :item="item"
+          size="sm"
+/>
       </SidebarGroup>
     </SidebarContent>
     <SidebarFooter>
diff --git a/app/components/pub/base/data-table.vue b/app/components/pub/base/data-table.vue
index 31fa7050..b0d2748a 100644
--- a/app/components/pub/base/data-table.vue
+++ b/app/components/pub/base/data-table.vue
@@ -15,10 +15,12 @@ defineProps<{
 <template>
   <Table>
 
-    <TableHeader>
+    <TableHeader class="bg-gray-50">
       <TableRow>
-        <TableHead v-for="(h, idx) in header[0]" :key="`head-${idx}`"
-          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }">
+        <TableHead
+v-for="(h, idx) in header[0]" :key="`head-${idx}`"
+          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
+>
           {{ h.label }}
         </TableHead>
       </TableRow>
@@ -28,8 +30,10 @@ defineProps<{
       <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
           <!-- If funcComponent has a renderer -->
-          <component :is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
-            v-bind="funcComponent[key](row, rowIndex)" />
+          <component
+:is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
+            v-bind="funcComponent[key](row, rowIndex)"
+/>
           <!-- If funcParsed or funcHtml returns a value -->
           <template v-else>
             <!-- Use v-html for funcHtml to render HTML content -->
diff --git a/app/components/pub/base/service-status.vue b/app/components/pub/base/service-status.vue
index 2724e586..b9cf71eb 100644
--- a/app/components/pub/base/service-status.vue
+++ b/app/components/pub/base/service-status.vue
@@ -30,10 +30,12 @@ const tokenStatus = computed((): string => {
   <Card v-else class="py-6">
     <div class="flex gap-4 justify-between px-6">
       <div class="flex gap-2 items-center">
-        <span :class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
+        <span
+:class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
           { 'bg-red-500': props.status === 'error' },
           { 'bg-blue-500': props.status !== 'error' },
-        )">
+        )"
+>
           <Icon v-if="props.status === 'error'" name="i-lucide-cable" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
           <Icon v-else name="i-lucide-bring-to-front" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
         </span>
@@ -58,10 +60,12 @@ const tokenStatus = computed((): string => {
         <p v-if="props.status === 'connecting'">
           <Loader class="ml-2 h-4 w-4 animate-spin" />
         </p>
-        <p v-else :class="cn('text-xs md:text-md font-bold',
+        <p
+v-else :class="cn('text-xs md:text-md font-bold',
           { 'text-blue-500': props.sessionActive },
           { 'text-red-500': !props.sessionActive },
-        )">{{ tokenStatus }}</p>
+        )"
+>{{ tokenStatus }}</p>
       </div>
     </div>
   </Card>
diff --git a/app/components/pub/base/summary-card.vue b/app/components/pub/base/summary-card.vue
index 49c71629..f10f8c2d 100644
--- a/app/components/pub/base/summary-card.vue
+++ b/app/components/pub/base/summary-card.vue
@@ -54,8 +54,10 @@ const isTrending = computed<boolean>(() => (props.stat?.trend ?? 0) > 0)
         {{ props.stat.metric.toLocaleString('id-ID') }}
       </div>
       <p v-if="props.stat.trend !== 0" class="text-muted-foreground flex items-center gap-1 text-xs">
-        <component :is="isTrending ? ChevronUp : ChevronDown"
-          :class="cn('h-4 w-4', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })" />
+        <component
+:is="isTrending ? ChevronUp : ChevronDown"
+          :class="cn('h-4 w-4', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })"
+/>
         <span :class="cn('font-medium', { 'text-green-500': isTrending }, { 'text-red-500': !isTrending })">
           {{ props.stat.trend.toFixed(1) }}%
           <!-- {{ Math.abs(props.stat.trend).toFixed(1) }}% -->
diff --git a/package.json b/package.json
index ed5ec93b..8df5326e 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "nuxt-app",
   "type": "module",
   "private": true,
+  "packageManager": "pnpm@8.15.9+sha512.499434c9d8fdd1a2794ebf4552b3b25c0a633abcee5bb15e7b5de90f32f47b513aca98cd5cfd001c31f0db454bc3804edccd578501e4ca293a6816166bbd9f81",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -65,6 +66,5 @@
     "vue-sonner": "^1.3.0",
     "vue-tsc": "^2.1.10",
     "zod": "^3.24.2"
-  },
-  "packageManager": "pnpm@8.15.9+sha512.499434c9d8fdd1a2794ebf4552b3b25c0a633abcee5bb15e7b5de90f32f47b513aca98cd5cfd001c31f0db454bc3804edccd578501e4ca293a6816166bbd9f81"
+  }
 }

From a5f9e3fc682bf98ca8e7a3bad1e4d660d6bbab8e Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 21 Aug 2025 16:28:01 +0700
Subject: [PATCH 09/15] 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 | 271 ++++++++++++++++---------
 server/api/v1/satusehat/list.post.ts   | 171 ++++++++++++++++
 2 files changed, 344 insertions(+), 98 deletions(-)
 create mode 100644 server/api/v1/satusehat/list.post.ts

diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index eb9b9616..b2512432 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/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([
-  {
-    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',
-  },
-  {
-    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',
-  },
-])
+// State management
+const data = ref([])
+const isLoading = reactive({
+  satusehatConn: true,
+  dataList: false,
+})
+
+// Filter states
+const filters = reactive({
+  search: '',
+  status: '',
+  resource_type: 'all',
+  date_from: '',
+  date_to: '',
+  page: 1,
+  limit: 10,
+})
+
+// Pagination state
+const pagination = ref({
+  total: 0,
+  page: 1,
+  limit: 10,
+  total_pages: 0,
+  has_next: false,
+  has_prev: false,
+})
+
+// API function to fetch data
+async function fetchData() {
+  try {
+    isLoading.dataList = true
+    const response: any = await $fetch('/api/v1/satusehat/list', {
+      method: 'POST',
+      body: {
+        status: filters.status !== '' ? Number(filters.status) : undefined,
+        resource_type: filters.resource_type,
+        date_from: filters.date_from,
+        date_to: filters.date_to,
+        search: filters.search,
+        page: filters.page,
+        limit: filters.limit,
+      },
+    })
+
+    if (response.success) {
+      data.value = response.data
+      pagination.value = response.meta
+    }
+  } catch (error) {
+    console.error('Error fetching data:', error)
+  } finally {
+    isLoading.dataList = false
+  }
+}
+
+// Debounced search function
+const debouncedFetchData = useDebounceFn(fetchData, 500)
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
     // open filter modal
   },
-  onInput: (_val: string) => {
-    // filter patient list
+  onInput: (val: string) => {
+    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
-const isLoading = reactive({
-  satusehatConn: true,
-})
+// Filter change handlers
+function onStatusChange(status: string) {
+  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(() => {
-  callSatuSehat()
+// Watch for tab changes
+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 = [
-  {
-    value: 'search',
-    label: 'Cari pasien'
-  },
-  {
-    value: 'date-picker',
-    label: 'Filter berdasarkan tanggal',
-  },
+// Status filter options
+const statusOptions = [
+  { value: '', label: 'Semua Status' },
+  { value: '0', label: 'Failed' },
+  { value: '1', label: 'Pending' },
+  { value: '2', label: 'Success' },
 ]
 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"
-            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">
+          <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 />
+          <!-- 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" />
-            <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
+            <Ellipsis v-if="isLoading.satusehatConn || isLoading.dataList" class="size-6 animate-pulse text-muted-foreground mx-auto" />
+            <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>
diff --git a/server/api/v1/satusehat/list.post.ts b/server/api/v1/satusehat/list.post.ts
new file mode 100644
index 00000000..7f840863
--- /dev/null
+++ b/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
+    }
+  }
+})

From 31084be5cedbfe5f2c59157ea5c5fe5cb7a90653 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 25 Aug 2025 13:33:28 +0700
Subject: [PATCH 10/15] feat(loading-state): add loading indicators and
 skeleton UI for data tables

- Implement loading state management across patient, doctor and satusehat lists
- Add skeleton loading UI for data tables during data fetching
- Refactor loading state variable naming for consistency
- Make search nav optional in header component
- Update icon sizing in header for better responsiveness
- Implement url search params query state at satusehat
---
 app/components/flow/doctor/list.vue    |  12 +-
 app/components/flow/patient/list.vue   |   6 +-
 app/components/flow/satusehat/list.vue | 207 ++++++++++++-------------
 app/components/pub/base/data-table.vue |  25 +--
 app/components/pub/nav/header/prep.vue |  13 +-
 5 files changed, 139 insertions(+), 124 deletions(-)

diff --git a/app/components/flow/doctor/list.vue b/app/components/flow/doctor/list.vue
index c6007660..8615a5a1 100644
--- a/app/components/flow/doctor/list.vue
+++ b/app/components/flow/doctor/list.vue
@@ -15,6 +15,10 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
+const isLoading = reactive({
+  dataListLoading: false,
+})
+
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
@@ -28,13 +32,16 @@ const headerPrep: HeaderPrep = {
   },
 }
 
-useAsyncData('getDoctor', () => xfetch('/api/v1/doctor'), { server: false, immediate: true })
 
 async function getDoctorList() {
+  isLoading.dataListLoading = true
+
   const resp = await xfetch('/api/v1/doctor')
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
+
+  isLoading.dataListLoading = false
 }
 
 onMounted(() => {
@@ -44,9 +51,10 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('pull_data', isLoading)
 </script>
 
 <template>
   <PubNavHeaderPrep :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <AppDoctorList :data="data" />
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 3131d81d..4eee1912 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -20,8 +20,9 @@ const refSearchNav: RefSearchNav = {
 // Loading state management
 const isLoading = reactive({
   summary: false,
-  table: false,
+  dataListLoading: false,
 })
+
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
@@ -82,11 +83,13 @@ async function getPatientSummary() {
 }
 
 async function getPatientList() {
+  isLoading.dataListLoading = true
   const resp = await xfetch('/api/v1/patient')
   console.log('data patient', resp)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
+  isLoading.dataListLoading = false
 }
 
 onMounted(() => {
@@ -97,6 +100,7 @@ onMounted(() => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('pull_data', isLoading)
 </script>
 
 <template>
diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index b2512432..a35aecc1 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/app/components/flow/satusehat/list.vue
@@ -2,24 +2,27 @@
 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 { useUrlSearchParams } from '@vueuse/core'
 import { CircleCheckBig, CircleDashed, CircleX, Ellipsis, Search, Send } from 'lucide-vue-next'
 
 // State management
 const data = ref([])
 const isLoading = reactive({
   satusehatConn: true,
-  dataList: false,
+  dataListLoading: false,
 })
 
-// Filter states
-const filters = reactive({
-  search: '',
-  status: '',
-  resource_type: 'all',
-  date_from: '',
-  date_to: '',
-  page: 1,
-  limit: 10,
+const params = useUrlSearchParams('history', {
+  initialValue: {
+    search: '',
+    status: '',
+    resource_type: 'all',
+    date_from: '',
+    date_to: '',
+    page: 1,
+    limit: 10,
+  },
+  removeFalsyValues: true,
 })
 
 // Pagination state
@@ -35,17 +38,17 @@ const pagination = ref({
 // API function to fetch data
 async function fetchData() {
   try {
-    isLoading.dataList = true
+    isLoading.dataListLoading = true
     const response: any = await $fetch('/api/v1/satusehat/list', {
       method: 'POST',
       body: {
-        status: filters.status !== '' ? Number(filters.status) : undefined,
-        resource_type: filters.resource_type,
-        date_from: filters.date_from,
-        date_to: filters.date_to,
-        search: filters.search,
-        page: filters.page,
-        limit: filters.limit,
+        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,
       },
     })
 
@@ -56,26 +59,19 @@ async function fetchData() {
   } catch (error) {
     console.error('Error fetching data:', error)
   } finally {
-    isLoading.dataList = false
+    isLoading.dataListLoading = false
   }
 }
 
 // Debounced search function
-const debouncedFetchData = useDebounceFn(fetchData, 500)
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
     // open filter modal
   },
   onInput: (val: string) => {
-    filters.search = val
-    filters.page = 1
-    debouncedFetchData()
   },
   onClear: () => {
-    filters.search = ''
-    filters.page = 1
-    fetchData()
   },
 }
 
@@ -83,23 +79,9 @@ const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-// Filter change handlers
-function onStatusChange(status: string) {
-  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
+  params.resource_type = resourceType
+  params.page = 1
   fetchData()
 }
 
@@ -167,7 +149,7 @@ async function callSatuSehat() {
 }
 
 // Watch for tab changes
-watch(() => filters.resource_type, (newType) => {
+watch(() => params.resource_type, (newType) => {
   onResourceTypeChange(newType)
 })
 
@@ -179,6 +161,7 @@ onMounted(async () => {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('pull_data', isLoading)
 
 const tabs = [
   {
@@ -201,36 +184,29 @@ const tabs = [
 
 // Status filter options
 const statusOptions = [
-  { value: '', label: 'Semua Status' },
   { value: '0', label: 'Failed' },
   { value: '1', label: 'Pending' },
   { value: '2', label: 'Success' },
 ]
 const actions = [
-  {
-    value: 'filter',
-    label: 'Filter',
-    icon: 'i-lucide-list-filter',
-  },
   {
     value: 'export',
     label: 'Ekspor',
     icon: 'i-lucide-download',
-
   },
 ]
 
 // Sync activeTabFilter with filters.resource_type
 const activeTabFilter = computed({
-  get: () => filters.resource_type,
+  get: () => params.resource_type,
   set: (value) => {
-    filters.resource_type = value
+    params.resource_type = value
   },
 })
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="headerPrep" :ref-search-nav="refSearchNav" />
+  <PubNavHeaderPrep :prep="headerPrep" />
   <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" />
@@ -240,83 +216,104 @@ const activeTabFilter = computed({
     <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"
-          >
+          <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">
-          <!-- 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"
-              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>
+
+            <Dialog>
+              <DialogTrigger>
+                <Input id="search" v-model="params.search" type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader class="border-b-1">
+                  <DialogTitle class="pb-2">Pencarian</DialogTitle>
+                </DialogHeader>
+                <Form>
+                  <FormField v-slot="{ componentField }" name="username">
+                    <FormItem>
+                      <FormLabel>Pasien</FormLabel>
+                      <FormControl>
+                        <Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
+                      </FormControl>
+                    </FormItem>
+                  </FormField>
+                  <FormField v-slot="{ componentField }" name="status">
+                    <FormItem>
+                      <FormLabel>Status</FormLabel>
+                      <FormControl>
+                        <Select>
+                          <SelectTrigger class="bg-white border border-gray-300">
+                            <SelectValue class="text-gray-400" placeholder="-- select item" />
+                          </SelectTrigger>
+                          <SelectContent class="bg-white ">
+                            <SelectItem value="0">
+                              Gagal
+                            </SelectItem>
+                            <SelectItem value="1">
+                              Pending
+                            </SelectItem>
+                            <SelectItem value="2">
+                              Terkirim
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                    </FormItem>
+                  </FormField>
+                  <FormField v-slot="{ componentField }" name="fhirId">
+                    <FormItem>
+                      <FormLabel>FHIR ID</FormLabel>
+                      <FormControl>
+                        <Input type="text" placeholder="fhir id" v-bind="componentField" />
+                      </FormControl>
+                    </FormItem>
+                  </FormField>
+                </Form>
+
+                <DialogFooter>
+                  <Button variant="outline">
+                    Reset
+                  </Button>
+                  <Button>
+                    Apply
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
           </div>
 
           <!-- Action Buttons -->
-          <AppSatusehatButtonAction
-            v-for="action in actions"
-            :key="action.value"
-            :icon="action.icon"
-            :text="action.label"
-          />
+          <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 || isLoading.dataList" class="size-6 animate-pulse text-muted-foreground mx-auto" />
-            <AppSatusehatList v-if="!isLoading.satusehatConn && !isLoading.dataList" :data="data" />
+            <!-- <Ellipsis v-if="isLoading.satusehatConn || isLoading.dataList" -->
+              <!-- class="size-6 animate-pulse text-muted-foreground mx-auto" /> -->
+            <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
 
             <!-- Pagination -->
-            <div v-if="!isLoading.satusehatConn && !isLoading.dataList && pagination.total > 0" class="mt-4 flex justify-between items-center">
+            <div v-if="!isLoading.satusehatConn && !isLoading.dataListLoading && 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()"
-                >
+                <Button v-if="pagination.has_prev" variant="outline" size="sm" @click="params.page--; fetchData()">
                   Sebelumnya
                 </Button>
-                <Button
-                  v-if="pagination.has_next"
-                  variant="outline"
-                  size="sm"
-                  @click="filters.page++; fetchData()"
-                >
+                <Button v-if="pagination.has_next" variant="outline" size="sm" @click="params.page++; fetchData()">
                   Selanjutnya
                 </Button>
               </div>
diff --git a/app/components/pub/base/data-table.vue b/app/components/pub/base/data-table.vue
index b0d2748a..3e76bbb8 100644
--- a/app/components/pub/base/data-table.vue
+++ b/app/components/pub/base/data-table.vue
@@ -10,30 +10,35 @@ defineProps<{
   funcHtml: Record<string, (row: any) => string>
   funcComponent: Record<string, (row: any, idx: number) => any>
 }>()
+
+const pullData = inject('pull_data') as any
 </script>
 
 <template>
   <Table>
-
     <TableHeader class="bg-gray-50">
       <TableRow>
-        <TableHead
-v-for="(h, idx) in header[0]" :key="`head-${idx}`"
-          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
->
+        <TableHead v-for="(h, idx) in header[0]" :key="`head-${idx}`"
+          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }">
           {{ h.label }}
         </TableHead>
       </TableRow>
     </TableHeader>
 
-    <TableBody>
+    <TableBody v-if="pullData.dataListLoading">
+      <!-- Loading state with 5 skeleton rows -->
+      <TableRow v-for="n in 5" :key="`skeleton-${n}`">
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`">
+          <Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
+        </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}`">
           <!-- If funcComponent has a renderer -->
-          <component
-:is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
-            v-bind="funcComponent[key](row, rowIndex)"
-/>
+          <component :is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
+            v-bind="funcComponent[key](row, rowIndex)" />
           <!-- If funcParsed or funcHtml returns a value -->
           <template v-else>
             <!-- Use v-html for funcHtml to render HTML content -->
diff --git a/app/components/pub/nav/header/prep.vue b/app/components/pub/nav/header/prep.vue
index 8bd33696..d83aaeb4 100644
--- a/app/components/pub/nav/header/prep.vue
+++ b/app/components/pub/nav/header/prep.vue
@@ -3,19 +3,19 @@ import type { HeaderPrep, RefSearchNav } from '../types.ts'
 
 const props = defineProps<{
   prep: HeaderPrep
-  refSearchNav: RefSearchNav
+  refSearchNav?: RefSearchNav
 }>()
 
 function emitSearchNavClick() {
-  props.refSearchNav.onClick()
+  props.refSearchNav?.onClick()
 }
 
 function onInput(event: Event) {
-  props.refSearchNav.onInput((event.target as HTMLInputElement).value)
+  props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
 }
 
 function btnClick() {
-  props.prep.addNav?.onClick()
+  props.prep?.addNav?.onClick()
 }
 </script>
 
@@ -24,12 +24,13 @@ function btnClick() {
     <div class="flex items-center justify-between">
       <div class="flex items-center">
         <div class="ml-3 text-lg font-bold text-gray-900">
-          <Icon :name="prep.icon" class="mr-2 h-4 w-4 align-middle" />
+          <Icon :name="prep.icon" class="mr-2 size-4 md:size-6 align-middle" />
           {{ prep.title }}
         </div>
       </div>
       <div class="flex items-center">
-        <div class="ml-3 text-lg text-gray-900">
+        <div v-if="props.refSearchNav"
+        class="ml-3 text-lg text-gray-900">
           <Input
             type="text"
             placeholder="Search"

From 5685b31c4848e5512297fe829f7996006c6bd18a Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 26 Aug 2025 13:10:09 +0700
Subject: [PATCH 11/15] 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        |  97 +++++++++
 app/components/flow/satusehat/list.vue        | 193 ++++--------------
 app/components/flow/satusehat/schema.query.ts |  23 +++
 .../pub/base/data-table/data-table.vue        |  14 +-
 4 files changed, 177 insertions(+), 150 deletions(-)
 create mode 100644 app/components/flow/satusehat/const.ts
 create mode 100644 app/components/flow/satusehat/schema.query.ts

diff --git a/app/components/flow/satusehat/const.ts b/app/components/flow/satusehat/const.ts
new file mode 100644
index 00000000..8dee79cc
--- /dev/null
+++ b/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: () => {
+  },
+}
diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index 65327fac..3d88b03c 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/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>
diff --git a/app/components/flow/satusehat/schema.query.ts b/app/components/flow/satusehat/schema.query.ts
new file mode 100644
index 00000000..aab8340f
--- /dev/null
+++ b/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,
+}
diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index 73a4bb6d..16343193 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/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}`">

From e21e5f1e7aa8b393ddfa3f7ae12c649b932a47b3 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 26 Aug 2025 15:15:14 +0700
Subject: [PATCH 12/15] refactor(ui): improve layout consistency and table
 styling

- Add container borders and padding for better visual hierarchy
- Standardize table cell borders across components
- Reset query params to defaults when changing resource type
- Clear data on fetch error to prevent stale data display
- Translate "No data available" to Indonesian
---
 app/components/flow/doctor/list.vue           |   8 +-
 app/components/flow/satusehat/list.vue        | 224 +++++++++---------
 .../pub/base/data-table/data-table.vue        |  12 +-
 3 files changed, 125 insertions(+), 119 deletions(-)

diff --git a/app/components/flow/doctor/list.vue b/app/components/flow/doctor/list.vue
index 03cdff79..e71096de 100644
--- a/app/components/flow/doctor/list.vue
+++ b/app/components/flow/doctor/list.vue
@@ -57,6 +57,10 @@ provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <div class="rounded-md border p-4">
+      <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+  </div>
 </template>
diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index 3d88b03c..48a4a775 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/app/components/flow/satusehat/list.vue
@@ -36,6 +36,7 @@ const pagination = ref({
 async function fetchData() {
   try {
     isLoading.isTableLoading = true
+    data.value = []
     const response = await xfetch('/api/v1/satusehat/list', 'POST', {
       resource_type: params.value?.resource_type,
       date_from: params.value?.date_from,
@@ -51,6 +52,7 @@ async function fetchData() {
     }
   } catch (error) {
     console.error('Error fetching data:', error)
+    data.value = []
   } finally {
     isLoading.isTableLoading = false
   }
@@ -93,131 +95,131 @@ const activeTabFilter = computed({
   },
   set: (value) => {
     queryParams.resource_type = value
-    queryParams.q = ''
-    queryParams.page = 1
-    queryParams.limit = 10
-    queryParams.date_from = ''
-    queryParams.date_to = ''
+    queryParams.q = defaultQuery.q
+    queryParams.page = defaultQuery.page
+    queryParams.limit = defaultQuery.limit
+    queryParams.date_from = defaultQuery.date_from
+    queryParams.date_to = defaultQuery.date_to
   },
 })
 </script>
 
 <template>
-  <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" />
-  </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">
+    <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" />
+    </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">
 
-          <!-- Search Input -->
+            <!-- Search Input -->
 
-          <div class="relative w-full max-w-sm">
+            <div class="relative w-full max-w-sm">
 
-            <Dialog>
-              <DialogTrigger>
-                <Input type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader class="border-b-1">
-                  <DialogTitle class="pb-2">Pencarian</DialogTitle>
-                </DialogHeader>
-                <Form>
-                  <FormField v-slot="{ componentField }" name="username">
-                    <FormItem>
-                      <FormLabel>Pasien</FormLabel>
-                      <FormControl>
-                        <Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
-                      </FormControl>
-                    </FormItem>
-                  </FormField>
-                  <FormField v-slot="{ componentField }" name="status">
-                    <FormItem>
-                      <FormLabel>Status</FormLabel>
-                      <FormControl>
-                        <Select>
-                          <SelectTrigger class="bg-white border border-gray-300">
-                            <SelectValue class="text-gray-400" placeholder="-- select item" />
-                          </SelectTrigger>
-                          <SelectContent class="bg-white ">
-                            <SelectItem value="0">
-                              Gagal
-                            </SelectItem>
-                            <SelectItem value="1">
-                              Pending
-                            </SelectItem>
-                            <SelectItem value="2">
-                              Terkirim
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </FormControl>
-                    </FormItem>
-                  </FormField>
-                  <FormField v-slot="{ componentField }" name="fhirId">
-                    <FormItem>
-                      <FormLabel>FHIR ID</FormLabel>
-                      <FormControl>
-                        <Input type="text" placeholder="fhir id" v-bind="componentField" />
-                      </FormControl>
-                    </FormItem>
-                  </FormField>
-                </Form>
+              <Dialog>
+                <DialogTrigger>
+                  <Input type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader class="border-b-1">
+                    <DialogTitle class="pb-2">Pencarian</DialogTitle>
+                  </DialogHeader>
+                  <Form>
+                    <FormField v-slot="{ componentField }" name="username">
+                      <FormItem>
+                        <FormLabel>Pasien</FormLabel>
+                        <FormControl>
+                          <Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="status">
+                      <FormItem>
+                        <FormLabel>Status</FormLabel>
+                        <FormControl>
+                          <Select v-bind="componentField">
+                            <SelectTrigger class="bg-white border border-gray-300">
+                              <SelectValue class="text-gray-400" placeholder="-- select item" />
+                            </SelectTrigger>
+                            <SelectContent class="bg-white ">
+                              <SelectItem value="0">
+                                Gagal
+                              </SelectItem>
+                              <SelectItem value="1">
+                                Pending
+                              </SelectItem>
+                              <SelectItem value="2">
+                                Terkirim
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="fhirId">
+                      <FormItem>
+                        <FormLabel>FHIR ID</FormLabel>
+                        <FormControl>
+                          <Input type="text" placeholder="fhir id" v-bind="componentField" />
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                  </Form>
 
-                <DialogFooter>
-                  <Button variant="outline">
-                    Reset
-                  </Button>
-                  <Button>
-                    Apply
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
+                  <DialogFooter>
+                    <Button variant="outline">
+                      Reset
+                    </Button>
+                    <Button>
+                      Apply
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            <!-- Action Buttons -->
+            <AppSatusehatButtonAction v-for="action in actions" :key="action.value" :icon="action.icon"
+              :text="action.label" />
           </div>
-
-          <!-- 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 || isLoading.dataList" -->
-            <!-- class="size-6 animate-pulse text-muted-foreground mx-auto" /> -->
-            <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
+        <div class="mt-4">
+          <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
+            <div class="rounded-md border p-4">
+              <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
 
-            <!-- Pagination -->
-            <div v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && 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="queryParams.page--">
-                  Sebelumnya
-                </Button>
-                <Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
-                  Selanjutnya
-                </Button>
+              <!-- Pagination -->
+              <div v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && 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="queryParams.page--">
+                    Sebelumnya
+                  </Button>
+                  <Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
+                    Selanjutnya
+                  </Button>
+                </div>
               </div>
             </div>
-          </div>
-        </TabsContent>
-      </div>
-    </Tabs>
+          </TabsContent>
+        </div>
+      </Tabs>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index 16343193..257996f0 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -20,7 +20,7 @@ const loader = inject('table_data_loader') as DataTableLoader
   <Table>
     <TableHeader class="bg-gray-50">
       <TableRow>
-        <TableHead v-for="(h, idx) in header[0]" :key="`head-${idx}`"
+        <TableHead v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
           :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }">
           {{ h.label }}
         </TableHead>
@@ -30,24 +30,24 @@ const loader = inject('table_data_loader') as DataTableLoader
     <TableBody v-if="loader.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
       <TableRow v-for="n in 5" :key="`skeleton-${n}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`">
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
           <Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
         </TableCell>
       </TableRow>
     </TableBody>
-    <TableBody v-if="rows.length === 0 && !loader.isTableLoading">
+    <TableBody v-else-if="rows.length === 0">
       <TableRow>
-        <TableCell colspan="100%" class="text-center">
+        <TableCell :colspan="keys.length" class="text-center py-8">
           <div class="flex items-center justify-center">
             <Info class="size-5 text-muted-foreground" />
-            <span class="ml-2">No data available</span>
+            <span class="ml-2">Tidak ada data tersedia</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}`">
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
           <!-- If funcComponent has a renderer -->
           <component :is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
             v-bind="funcComponent[key](row, rowIndex)" />

From 153c171a3b3757966b7f972aceded192fd31a833 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 26 Aug 2025 16:57:11 +0700
Subject: [PATCH 13/15] refactor(ui): migrate button and pagination components
 to radix-vue

- Replace reka-ui imports with radix-vue in Button component
- Update pagination components to use direct radix-vue icons
- Simplify button variants styling and adjust size variants
- Remove unused data-slot attribute from Button component
---
 app/components/pub/ui/button/Button.vue       |  5 ++--
 app/components/pub/ui/button/index.ts         | 23 +++++++++----------
 .../pub/ui/pagination/PaginationEllipsis.vue  |  6 ++---
 .../pub/ui/pagination/PaginationFirst.vue     | 12 ++++++----
 .../pub/ui/pagination/PaginationLast.vue      | 12 ++++++----
 .../pub/ui/pagination/PaginationNext.vue      | 12 ++++++----
 .../pub/ui/pagination/PaginationPrev.vue      | 12 ++++++----
 7 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/app/components/pub/ui/button/Button.vue b/app/components/pub/ui/button/Button.vue
index 7b3478e7..cfb2c15a 100644
--- a/app/components/pub/ui/button/Button.vue
+++ b/app/components/pub/ui/button/Button.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
+import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '.'
-import { Primitive } from 'reka-ui'
 import { cn } from '~/lib/utils'
+import { Primitive } from 'radix-vue'
 import { buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {
@@ -19,7 +19,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
   <Primitive
-    data-slot="button"
     :as="as"
     :as-child="asChild"
     :class="cn(buttonVariants({ variant, size }), props.class)"
diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
index 66fa9888..9720740f 100644
--- a/app/components/pub/ui/button/index.ts
+++ b/app/components/pub/ui/button/index.ts
@@ -4,27 +4,26 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
         secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
+        default: 'h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
       },
     },
     defaultVariants: {
diff --git a/app/components/pub/ui/pagination/PaginationEllipsis.vue b/app/components/pub/ui/pagination/PaginationEllipsis.vue
index a85d4075..6499de41 100644
--- a/app/components/pub/ui/pagination/PaginationEllipsis.vue
+++ b/app/components/pub/ui/pagination/PaginationEllipsis.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { PaginationEllipsisProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
 import { PaginationEllipsis } from 'radix-vue'
 import { computed } from 'vue'
-import { cn } from '~/lib/utils'
-
 
 const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
 
@@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
 <template>
   <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
     <slot>
-      <Icon name="i-radix-icons-dots-horizontal" />
+      <DotsHorizontalIcon />
     </slot>
   </PaginationEllipsis>
 </template>
diff --git a/app/components/pub/ui/pagination/PaginationFirst.vue b/app/components/pub/ui/pagination/PaginationFirst.vue
index eb9e9264..677a859c 100644
--- a/app/components/pub/ui/pagination/PaginationFirst.vue
+++ b/app/components/pub/ui/pagination/PaginationFirst.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { PaginationFirstProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+import { DoubleArrowLeftIcon } from '@radix-icons/vue'
 import { PaginationFirst } from 'radix-vue'
 import { computed } from 'vue'
-import { Button } from '~/components/pub/ui/button'
-import { cn } from '~/lib/utils'
-
 
 const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -20,9 +22,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationFirst v-bind="delegatedProps">
-    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <Icon name="i-radix-icons-double-arrow-left" />
+        <DoubleArrowLeftIcon />
       </slot>
     </Button>
   </PaginationFirst>
diff --git a/app/components/pub/ui/pagination/PaginationLast.vue b/app/components/pub/ui/pagination/PaginationLast.vue
index 8474a865..2421ce78 100644
--- a/app/components/pub/ui/pagination/PaginationLast.vue
+++ b/app/components/pub/ui/pagination/PaginationLast.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { PaginationLastProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+import { DoubleArrowRightIcon } from '@radix-icons/vue'
 import { PaginationLast } from 'radix-vue'
 import { computed } from 'vue'
-import { Button } from '~/components/pub/ui/button'
-import { cn } from '~/lib/utils'
-
 
 const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -20,9 +22,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationLast v-bind="delegatedProps">
-    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <Icon name="i-radix-icons-double-arrow-right" />
+        <DoubleArrowRightIcon />
       </slot>
     </Button>
   </PaginationLast>
diff --git a/app/components/pub/ui/pagination/PaginationNext.vue b/app/components/pub/ui/pagination/PaginationNext.vue
index 0fa5ce3e..9262575b 100644
--- a/app/components/pub/ui/pagination/PaginationNext.vue
+++ b/app/components/pub/ui/pagination/PaginationNext.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { PaginationNextProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+import { ChevronRightIcon } from '@radix-icons/vue'
 import { PaginationNext } from 'radix-vue'
 import { computed } from 'vue'
-import { Button } from '~/components/pub/ui/button'
-import { cn } from '~/lib/utils'
-
 
 const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -20,9 +22,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationNext v-bind="delegatedProps">
-    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <Icon name="i-radix-icons-chevron-right" />
+        <ChevronRightIcon />
       </slot>
     </Button>
   </PaginationNext>
diff --git a/app/components/pub/ui/pagination/PaginationPrev.vue b/app/components/pub/ui/pagination/PaginationPrev.vue
index ba115f5a..44292f6d 100644
--- a/app/components/pub/ui/pagination/PaginationPrev.vue
+++ b/app/components/pub/ui/pagination/PaginationPrev.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { PaginationPrevProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+import { ChevronLeftIcon } from '@radix-icons/vue'
 import { PaginationPrev } from 'radix-vue'
 import { computed } from 'vue'
-import { Button } from '~/components/pub/ui/button'
-import { cn } from '~/lib/utils'
-
 
 const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -20,9 +22,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationPrev v-bind="delegatedProps">
-    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <Icon name="i-radix-icons-chevron-left" />
+        <ChevronLeftIcon />
       </slot>
     </Button>
   </PaginationPrev>

From 04b87733d50034e5ea91e3598f85a313cd1906e8 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 26 Aug 2025 17:05:08 +0700
Subject: [PATCH 14/15] build: add vscode launch config and tailwind config

Add launch configuration for Chrome debugging in VSCode and set up TailwindCSS configuration with animations and theme customization
---
 .vscode/launch.json                     |  15 +
 README.md                               |  21 +
 app/assets/css/main.css                 |  78 ++-
 app/components/app/satusehat/picker.vue | 277 ++-------
 app/components/flow/satusehat/list.vue  |   1 +
 app/lib/utils.ts                        |   3 +-
 components.json                         |  14 +-
 nuxt.config.ts                          |   7 +-
 package.json                            |   6 +-
 pnpm-lock.yaml                          | 742 +++++++++++++++++++++---
 tailwind.config.ts                      |  86 +++
 uno.config.ts                           |   1 +
 12 files changed, 867 insertions(+), 384 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 tailwind.config.ts

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..9c243a03
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 9dc0e298..848a0a2f 100644
--- a/README.md
+++ b/README.md
@@ -95,3 +95,24 @@ The basic git workflow follows these steps:
      - Example: `feat: add new feature`
 4. Push your changes to `dev`
 5. Create a pull request from `dev` to `main`
+ini yang pakai reka tadi (kemajuan wkwkw)
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/assets/css/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "~/components/pub",
+    "composables": "~/composables",
+    "utils": "~/lib/utils",
+    "ui": "~/components/pub/ui",
+    "lib": "~/lib"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index eb54a75e..1c7eaef2 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -21,9 +21,9 @@
   --muted: 210 25% 95%;
   --muted-foreground: 210 15% 50%;
 
-  /* Accent - Professional Blue */
-  --accent: 210 100% 50%;
-  --accent-foreground: 0 0% 100%;
+  /* Accent - Neutral Gray */
+  --accent: 210 40% 96%;
+  --accent-foreground: 222.2 84% 4.9%;
   --destructive: 0 75% 55%;
   --destructive-foreground: 0 0% 100%;
   --border: 210 20% 88%;
@@ -67,45 +67,43 @@
   --sidebar-accent-foreground: 240 5.9% 10%;
   --sidebar-border: 220 13% 91%;
   --sidebar-ring: 217.2 91.2% 59.8%;
+  /* .dark { */
+  /*   --background: 210 25% 8%; */
+  /*   --foreground: 210 20% 95%; */
+  /*   --card: 210 25% 10%; */
+  /*   --card-foreground: 210 20% 95%; */
+  /*   --popover: 210 25% 10%; */
+  /*   --popover-foreground: 210 20% 95%; */
+  /*   --primary: 150 75% 45%; */
+  /*   --primary-foreground: 0 0% 100%; */
+  /*   --primary-hover: 150 75% 50%; */
+  /*   --secondary: 210 25% 15%; */
+  /*   --secondary-foreground: 210 20% 90%; */
+  /*   --muted: 210 25% 15%; */
+  /*   --muted-foreground: 210 15% 65%; */
+  /*   --accent: 210 100% 55%; */
+  /*   --accent-foreground: 0 0% 100%; */
+  /*   --destructive: 0 75% 60%; */
+  /*   --destructive-foreground: 0 0% 100%; */
+  /*   --border: 210 25% 20%; */
+  /*   --input: 210 25% 15%; */
+  /*   --ring: 150 75% 45%; */
+  /*   --success: 150 75% 50%; */
+  /*   --warning: 45 95% 65%; */
+  /*   --info: 210 100% 60%; */
+  /*   --gradient-primary: linear-gradient(135deg, hsl(150 75% 45%), hsl(150 75% 55%)); */
+  /*   --gradient-medical: linear-gradient(135deg, hsl(150 75% 45%), hsl(210 100% 55%)); */
+  /*   --gradient-subtle: linear-gradient(180deg, hsl(210 25% 8%), hsl(210 25% 12%)); */
+  /*   --sidebar-background: 240 5.9% 10%; */
+  /*   --sidebar-foreground: 240 4.8% 95.9%; */
+  /*   --sidebar-primary: 224.3 76.3% 48%; */
+  /*   --sidebar-primary-foreground: 0 0% 100%; */
+  /*   --sidebar-accent: 240 3.7% 15.9%; */
+  /*   --sidebar-accent-foreground: 240 4.8% 95.9%; */
+  /*   --sidebar-border: 240 3.7% 15.9%; */
+  /*   --sidebar-ring: 217.2 91.2% 59.8%; */
 }
 
-/* .dark { */
-/*   --background: 210 25% 8%; */
-/*   --foreground: 210 20% 95%; */
-/*   --card: 210 25% 10%; */
-/*   --card-foreground: 210 20% 95%; */
-/*   --popover: 210 25% 10%; */
-/*   --popover-foreground: 210 20% 95%; */
-/*   --primary: 150 75% 45%; */
-/*   --primary-foreground: 0 0% 100%; */
-/*   --primary-hover: 150 75% 50%; */
-/*   --secondary: 210 25% 15%; */
-/*   --secondary-foreground: 210 20% 90%; */
-/*   --muted: 210 25% 15%; */
-/*   --muted-foreground: 210 15% 65%; */
-/*   --accent: 210 100% 55%; */
-/*   --accent-foreground: 0 0% 100%; */
-/*   --destructive: 0 75% 60%; */
-/*   --destructive-foreground: 0 0% 100%; */
-/*   --border: 210 25% 20%; */
-/*   --input: 210 25% 15%; */
-/*   --ring: 150 75% 45%; */
-/*   --success: 150 75% 50%; */
-/*   --warning: 45 95% 65%; */
-/*   --info: 210 100% 60%; */
-/*   --gradient-primary: linear-gradient(135deg, hsl(150 75% 45%), hsl(150 75% 55%)); */
-/*   --gradient-medical: linear-gradient(135deg, hsl(150 75% 45%), hsl(210 100% 55%)); */
-/*   --gradient-subtle: linear-gradient(180deg, hsl(210 25% 8%), hsl(210 25% 12%)); */
-/*   --sidebar-background: 240 5.9% 10%; */
-/*   --sidebar-foreground: 240 4.8% 95.9%; */
-/*   --sidebar-primary: 224.3 76.3% 48%; */
-/*   --sidebar-primary-foreground: 0 0% 100%; */
-/*   --sidebar-accent: 240 3.7% 15.9%; */
-/*   --sidebar-accent-foreground: 240 4.8% 95.9%; */
-/*   --sidebar-border: 240 3.7% 15.9%; */
-/*   --sidebar-ring: 217.2 91.2% 59.8%; */
-/* } */
-
 /* Keyframes for Animations */
 @keyframes accordion-down {
   from {
diff --git a/app/components/app/satusehat/picker.vue b/app/components/app/satusehat/picker.vue
index 3ffaf77f..29f282d7 100644
--- a/app/components/app/satusehat/picker.vue
+++ b/app/components/app/satusehat/picker.vue
@@ -1,260 +1,51 @@
 <script setup lang="ts">
-import type { DateValue } from '@internationalized/date'
 import type { DateRange } from 'radix-vue'
-import type { Grid } from 'radix-vue/date'
 import type { Ref } from 'vue'
-import { CalendarDate } from '@internationalized/date'
-import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import { RangeCalendarRoot, useDateFormatter } from 'radix-vue'
-import { createMonth, toDate } from 'radix-vue/date'
-import { buttonVariants } from '~/components/pub/ui/button'
-
+import {
+  CalendarDate,
+  DateFormatter,
+  getLocalTimeZone,
+} from '@internationalized/date'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import { cn } from '~/lib/utils'
 
-// Props untuk kustomisasi
-interface Props {
-  modelValue?: DateRange
-  placeholder?: string
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: 'Pick a date range',
-  class: '',
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
 })
 
-const emit = defineEmits<{
-  'update:modelValue': [value: DateRange]
-}>()
-
-const value = ref(props.modelValue || {
+const value = ref({
   start: new CalendarDate(2022, 1, 20),
-  end: new CalendarDate(2022, 2, 9),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
 }) as Ref<DateRange>
-
-watch(value, (newValue) => {
-  emit('update:modelValue', newValue)
-}, { deep: true })
-
-const locale = ref('en-US')
-const formatter = useDateFormatter(locale.value)
-
-const placeholder = ref(value.value.start) as Ref<DateValue>
-const secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>
-
-// Create independent month grids
-const firstMonth = ref(
-  createMonth({
-    dateObj: placeholder.value,
-    locale: locale.value,
-    fixedWeeks: true,
-    weekStartsOn: 0,
-  }),
-) as Ref<Grid<DateValue>>
-
-const secondMonth = ref(
-  createMonth({
-    dateObj: secondMonthPlaceholder.value,
-    locale: locale.value,
-    fixedWeeks: true,
-    weekStartsOn: 0,
-  }),
-) as Ref<Grid<DateValue>>
-
-// Function to update months independently
-function updateMonth(reference: 'first' | 'second', months: number) {
-  if (reference === 'first') {
-    placeholder.value = placeholder.value.add({ months })
-  } else {
-    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({ months })
-  }
-}
-
-// Watch first month placeholder
-watch(placeholder, (_placeholder) => {
-  firstMonth.value = createMonth({
-    dateObj: _placeholder,
-    weekStartsOn: 0,
-    fixedWeeks: true,
-    locale: locale.value,
-  })
-})
-
-// Watch second month placeholder
-watch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {
-  secondMonth.value = createMonth({
-    dateObj: _secondMonthPlaceholder,
-    weekStartsOn: 0,
-    fixedWeeks: true,
-    locale: locale.value,
-  })
-})
 </script>
 
 <template>
-  <div :class="cn('w-full', props.class)">
-    <Popover>
-      <PopoverTrigger as-child>
-        <Button variant="outline" :class="cn(
-          'w-full justify-start text-left font-normal',
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
           !value && 'text-muted-foreground',
-        )">
-          <CalendarIcon class="mr-2 h-4 w-4" />
-          <template v-if="value.start">
-            <template v-if="value.end">
-              {{
-                formatter.custom(toDate(value.start), {
-                  dateStyle: 'medium',
-                })
-              }}
-              -
-              {{
-                formatter.custom(toDate(value.end), {
-                  dateStyle: 'medium',
-                })
-              }}
-            </template>
-
-            <template v-else>
-              {{
-                formatter.custom(toDate(value.start), {
-                  dateStyle: 'medium',
-                })
-              }}
-            </template>
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="value.start">
+          <template v-if="value.end">
+            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}
           </template>
+
           <template v-else>
-            {{ props.placeholder }}
+            {{ df.format(value.start.toDate(getLocalTimeZone())) }}
           </template>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        class="w-auto p-0 rounded-xl shadow-lg border bg-white dark:bg-neutral-900 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
-        align="start">
-        <RangeCalendarRoot v-slot="{ weekDays }" v-model="value" v-model:placeholder="placeholder" class="p-4">
-          <div class="flex flex-col gap-6 sm:flex-row sm:gap-8">
-            <!-- First Month -->
-            <div class="flex flex-col gap-4">
-              <div class="flex items-center justify-between">
-                <Button :class="cn(
-                  buttonVariants({ variant: 'outline' }),
-                  'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-                )" @click="updateMonth('first', -1)">
-                  <ChevronLeft class="h-4 w-4 text-primary" />
-                </Button>
-                <div class="text-sm font-medium">
-                  {{
-                    formatter.fullMonthAndYear(
-                      toDate(firstMonth.value),
-                    )
-                  }}
-                </div>
-                <Button :class="cn(
-                  buttonVariants({ variant: 'outline' }),
-                  'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-                )" @click="updateMonth('first', 1)">
-                  <ChevronRight class="h-4 w-4 text-primary" />
-                </Button>
-              </div>
-              <RangeCalendarGrid>
-                <RangeCalendarGridHead>
-                  <RangeCalendarGridRow>
-                    <RangeCalendarHeadCell v-for="day in weekDays" :key="day" class="w-full">
-                      {{ day }}
-                    </RangeCalendarHeadCell>
-                  </RangeCalendarGridRow>
-                </RangeCalendarGridHead>
-                <RangeCalendarGridBody class="mt-2">
-                  <RangeCalendarGridRow v-for="(weekDates, index) in firstMonth.rows" :key="`weekDate-${index}`"
-                    class="w-full">
-                    <RangeCalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
-                      <RangeCalendarCellTrigger :day="weekDate" :month="firstMonth.value" :class="cn(
-                        'h-9 w-9 p-0 text-sm rounded-md transition-colors flex items-center justify-center',
-
-                        // tanggal bulan lain (past/next month)
-                        'data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50',
-
-                        // tanggal terpilih (start / end)
-                        'data-[selected]:bg-green-600 data-[selected]:text-white',
-
-                        // tanggal dalam rentang
-                        'data-[in-range]:bg-green-500 data-[in-range]:text-white',
-
-                        // rounded pill untuk range
-                        'data-[selection-start]:rounded-l-full data-[selection-end]:rounded-r-full',
-
-                        // hover
-                        'hover:bg-accent hover:text-accent-foreground'
-                      )" />
-
-                    </RangeCalendarCell>
-                  </RangeCalendarGridRow>
-                </RangeCalendarGridBody>
-              </RangeCalendarGrid>
-            </div>
-
-            <!-- Second Month -->
-            <div class="flex flex-col gap-4">
-              <div class="flex items-center justify-between">
-                <Button :class="cn(
-                  buttonVariants({ variant: 'outline' }),
-                  'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-                )" @click="updateMonth('second', -1)">
-                  <ChevronLeft class="h-4 w-4 text-primary" />
-                </Button>
-                <div class="text-sm font-medium">
-                  {{
-                    formatter.fullMonthAndYear(
-                      toDate(secondMonth.value),
-                    )
-                  }}
-                </div>
-                <Button :class="cn(
-                  buttonVariants({ variant: 'outline' }),
-                  'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-                )" @click="updateMonth('second', 1)">
-                  <ChevronRight class="h-4 w-4 text-primary" />
-                </Button>
-              </div>
-              <RangeCalendarGrid>
-                <RangeCalendarGridHead>
-                  <RangeCalendarGridRow>
-                    <RangeCalendarHeadCell v-for="day in weekDays" :key="day" class="w-full">
-                      {{ day }}
-                    </RangeCalendarHeadCell>
-                  </RangeCalendarGridRow>
-                </RangeCalendarGridHead>
-                <RangeCalendarGridBody class="mt-2">
-                  <RangeCalendarGridRow v-for="(weekDates, index) in secondMonth.rows" :key="`weekDate-${index}`"
-                    class="w-full">
-                    <RangeCalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
-                      <RangeCalendarCellTrigger :day="weekDate" :month="secondMonth.value" :class="cn(
-                        'h-9 w-9 p-0 text-sm rounded-md transition-colors flex items-center justify-center',
-
-                        // tanggal bulan lain (past/next month)
-                        'data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50',
-
-                        // tanggal terpilih (start / end)
-                        'data-[selected]:bg-green-600 data-[selected]:text-white',
-
-                        // tanggal dalam rentang
-                        'data-[in-range]:bg-green-500 data-[in-range]:text-white',
-
-                        // rounded pill untuk range
-                        'data-[selection-start]:rounded-l-full data-[selection-end]:rounded-r-full',
-
-                        // hover
-                        'hover:bg-accent hover:text-accent-foreground'
-                      )" />
-
-                    </RangeCalendarCell>
-                  </RangeCalendarGridRow>
-                </RangeCalendarGridBody>
-              </RangeCalendarGrid>
-            </div>
-          </div>
-        </RangeCalendarRoot>
-      </PopoverContent>
-    </Popover>
-  </div>
+        </template>
+        <template v-else>
+          Pick a date
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <RangeCalendar v-model="value" initial-focus :number-of-months="2" @update:start-value="(startDate) => value.start = startDate" />
+    </PopoverContent>
+  </Popover>
 </template>
diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index 48a4a775..249faa2d 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/app/components/flow/satusehat/list.vue
@@ -125,6 +125,7 @@ const activeTabFilter = computed({
 
             <!-- Search Input -->
 
+            <AppSatusehatPicker/>
             <div class="relative w-full max-w-sm">
 
               <Dialog>
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index abba253f..d32b0fe6 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -1,5 +1,4 @@
-import type { ClassValue } from 'clsx'
-import { clsx } from 'clsx'
+import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
diff --git a/components.json b/components.json
index ede8c33e..a23fb04f 100644
--- a/components.json
+++ b/components.json
@@ -1,20 +1,18 @@
 {
-  "$schema": "https://shadcn-vue.com/schema.json",
+  "$schema": "https://radix.shadcn-vue.com/schema.json",
   "style": "new-york",
   "typescript": true,
+  "tsConfigPath": ".nuxt/tsconfig.json",
   "tailwind": {
-    "config": "",
+    "config": "tailwind.config.ts",
     "css": "app/assets/css/main.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
+  "framework": "nuxt",
   "aliases": {
     "components": "~/components/pub",
-    "composables": "~/composables",
-    "utils": "~/lib/utils",
-    "ui": "~/components/pub/ui",
-    "lib": "~/lib"
-  },
-  "iconLibrary": "lucide"
+    "utils": "~/lib/utils"
+  }
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c4c226a0..fb2ac447 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,17 +1,22 @@
+import process from 'node:process'
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
   runtimeConfig: {
     API_ORIGIN: process.env.API_ORIGIN || 'https://main-api.dev-hopis.sabbi.id',
   },
+  ssr: false,
+
   modules: [
     '@unocss/nuxt',
-    'shadcn-nuxt',
     '@vueuse/nuxt',
     '@nuxt/eslint',
     '@nuxt/icon',
     '@pinia/nuxt',
     '@nuxtjs/color-mode',
+    '@nuxtjs/tailwindcss',
+    'shadcn-nuxt',
   ],
 
   css: ['@unocss/reset/tailwind.css', '~/assets/css/main.css'],
diff --git a/package.json b/package.json
index 8df5326e..00158330 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@iconify-json/lucide": "^1.2.30",
     "@iconify-json/radix-icons": "^1.2.2",
     "@internationalized/date": "^3.7.0",
+    "@radix-icons/vue": "^1.0.0",
     "@unovis/ts": "^1.5.1",
     "@unovis/vue": "^1.5.1",
     "embla-carousel": "^8.5.2",
@@ -24,7 +25,7 @@
     "h3": "^1.15.4",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.4.1",
-    "reka-ui": "^2.4.1"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.10.1",
@@ -32,12 +33,13 @@
     "@nuxt/icon": "^1.15.0",
     "@nuxt/test-utils": "^3.19.2",
     "@nuxtjs/color-mode": "^3.5.2",
+    "@nuxtjs/tailwindcss": "6.14.0",
     "@pinia/nuxt": "^0.11.2",
     "@unocss/eslint-plugin": "^66.0.0",
     "@unocss/nuxt": "^66.0.0",
     "@vee-validate/zod": "^4.15.0",
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^12.2.0",
+    "@vueuse/core": "^12.8.2",
     "@vueuse/math": "^12.2.0",
     "@vueuse/nuxt": "^12.2.0",
     "class-variance-authority": "^0.7.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f00e4ce1..7a3ef8de 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
   '@internationalized/date':
     specifier: ^3.7.0
     version: 3.8.2
+  '@radix-icons/vue':
+    specifier: ^1.0.0
+    version: 1.0.0(vue@3.5.18)
   '@unovis/ts':
     specifier: ^1.5.1
     version: 1.5.2
@@ -35,9 +38,9 @@ dependencies:
   pinia-plugin-persistedstate:
     specifier: ^4.4.1
     version: 4.5.0(@pinia/nuxt@0.11.2)(pinia@3.0.3)
-  reka-ui:
-    specifier: ^2.4.1
-    version: 2.4.1(typescript@5.9.2)(vue@3.5.18)
+  tailwindcss-animate:
+    specifier: ^1.0.7
+    version: 1.0.7(tailwindcss@3.4.17)
 
 devDependencies:
   '@antfu/eslint-config':
@@ -55,6 +58,9 @@ devDependencies:
   '@nuxtjs/color-mode':
     specifier: ^3.5.2
     version: 3.5.2
+  '@nuxtjs/tailwindcss':
+    specifier: 6.14.0
+    version: 6.14.0
   '@pinia/nuxt':
     specifier: ^0.11.2
     version: 0.11.2(pinia@3.0.3)
@@ -71,7 +77,7 @@ devDependencies:
     specifier: ^2.4.6
     version: 2.4.6
   '@vueuse/core':
-    specifier: ^12.2.0
+    specifier: ^12.8.2
     version: 12.8.2(typescript@5.9.2)
   '@vueuse/math':
     specifier: ^12.2.0
@@ -160,6 +166,10 @@ devDependencies:
 
 packages:
 
+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   /@ampproject/remapping@2.3.0:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -578,6 +588,24 @@ packages:
     engines: {node: '>=0.1.90'}
     dev: true
 
+  /@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.0):
+    resolution: {integrity: sha512-mf1LEW0tJLKfWyvn5KdDrhpxHyuxpbNwTIwOYLIvsTffeyOf85j5oIzfG0yosxDgx/sswlqBnESYUcQH0vgZ0g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+    dependencies:
+      postcss-selector-parser: 7.1.0
+    dev: true
+
+  /@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.0):
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+    dependencies:
+      postcss-selector-parser: 7.1.0
+    dev: true
+
   /@dabh/diagnostics@2.0.3:
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
     dependencies:
@@ -1334,15 +1362,18 @@ packages:
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
     dependencies:
       '@floating-ui/utils': 0.2.10
+    dev: true
 
   /@floating-ui/dom@1.7.3:
     resolution: {integrity: sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==}
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
+    dev: true
 
   /@floating-ui/utils@0.2.10:
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+    dev: true
 
   /@floating-ui/vue@1.1.8(vue@3.5.18):
     resolution: {integrity: sha512-SNJAa1jbT8Gh1LvWw2uIIViLL0saV2bCY59ISCvJzhbut5DSb2H3LKUK49Xkd7SixTNHKX4LFu59nbwIXt9jjQ==}
@@ -1353,6 +1384,7 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: true
 
   /@humanfs/core@0.19.1:
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
@@ -1451,6 +1483,7 @@ packages:
     resolution: {integrity: sha512-P+/h+RDaiX8EGt3shB9AYM1+QgkvHmJ5rKi4/59k4sg9g58k9rqsRW0WxRO7jCoHyvVbFRRFKmVTdFYdehrxHg==}
     dependencies:
       '@swc/helpers': 0.5.17
+    dev: true
 
   /@ioredis/commands@1.3.0:
     resolution: {integrity: sha512-M/T6Zewn7sDaBQEqIZ8Rb+i9y8qfGmq+5SDFSf9sA2lUZTmdDLVdOiQaeDp+Q4wElZ9HG1GAX5KhDaidp6LQsQ==}
@@ -1478,7 +1511,6 @@ packages:
       strip-ansi-cjs: /strip-ansi@6.0.1
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: /wrap-ansi@7.0.0
-    dev: true
 
   /@isaacs/fs-minipass@4.0.1:
     resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
@@ -1517,6 +1549,19 @@ packages:
     resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
     dev: false
 
+  /@koa/router@12.0.2:
+    resolution: {integrity: sha512-sYcHglGKTxGF+hQ6x67xDfkE9o+NhVlRHBqq6gLywaMc6CojK/5vFZByphdonKinYlMLkEkacm+HEse9HzwgTA==}
+    engines: {node: '>= 12'}
+    dependencies:
+      debug: 4.4.1
+      http-errors: 2.0.0
+      koa-compose: 4.1.0
+      methods: 1.1.2
+      path-to-regexp: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@kwsites/file-exists@1.1.1:
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
     dependencies:
@@ -1727,7 +1772,6 @@ packages:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       run-parallel: 1.2.0
-    dev: true
 
   /@nodelib/fs.scandir@4.0.1:
     resolution: {integrity: sha512-vAkI715yhnmiPupY+dq+xenu5Tdf2TBQ66jLvBIcCddtz+5Q8LbMKaf9CIJJreez8fQ8fgaY+RaywQx8RJIWpw==}
@@ -1740,7 +1784,6 @@ packages:
   /@nodelib/fs.stat@2.0.5:
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
-    dev: true
 
   /@nodelib/fs.stat@4.0.0:
     resolution: {integrity: sha512-ctr6bByzksKRCV0bavi8WoQevU6plSp2IkllIsEqaiKe2mwNNnaluhnRhcsgGZHrrHk57B3lf95MkLMO3STYcg==}
@@ -1753,7 +1796,6 @@ packages:
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
-    dev: true
 
   /@nodelib/fs.walk@3.0.1:
     resolution: {integrity: sha512-nIh/M6Kh3ZtOmlY00DaUYB4xeeV6F3/ts1l29iwl3/cfyY/OuCfUx+v08zgx8TKPTifXRcjjqVQ4KB2zOYSbyw==}
@@ -2223,6 +2265,31 @@ packages:
       - magicast
     dev: true
 
+  /@nuxtjs/tailwindcss@6.14.0:
+    resolution: {integrity: sha512-30RyDK++LrUVRgc2A85MktGWIZoRQgeQKjE4CjjD64OXNozyl+4ScHnnYgqVToMM6Ch2ZG2W4wV2J0EN6F0zkQ==}
+    dependencies:
+      '@nuxt/kit': 3.18.1(magicast@0.3.5)
+      autoprefixer: 10.4.21(postcss@8.5.6)
+      c12: 3.2.0(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      h3: 1.15.4
+      klona: 2.0.6
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.2.0
+      postcss: 8.5.6
+      postcss-nesting: 13.0.2(postcss@8.5.6)
+      tailwind-config-viewer: 2.0.4(tailwindcss@3.4.17)
+      tailwindcss: 3.4.17
+      ufo: 1.6.1
+      unctx: 2.4.1
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+      - ts-node
+    dev: true
+
   /@one-ini/wasm@0.1.1:
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
     dev: true
@@ -2810,7 +2877,6 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
     requiresBuild: true
-    dev: true
     optional: true
 
   /@pkgr/core@0.1.2:
@@ -2851,6 +2917,14 @@ packages:
       quansync: 0.2.10
     dev: true
 
+  /@radix-icons/vue@1.0.0(vue@3.5.18):
+    resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
+    peerDependencies:
+      vue: '>= 3'
+    dependencies:
+      vue: 3.5.18(typescript@5.9.2)
+    dev: false
+
   /@rolldown/pluginutils@1.0.0-beta.29:
     resolution: {integrity: sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==}
     dev: true
@@ -3175,6 +3249,7 @@ packages:
 
   /@tanstack/virtual-core@3.13.12:
     resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+    dev: true
 
   /@tanstack/vue-virtual@3.13.12(vue@3.5.18):
     resolution: {integrity: sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==}
@@ -3183,6 +3258,7 @@ packages:
     dependencies:
       '@tanstack/virtual-core': 3.13.12
       vue: 3.5.18(typescript@5.9.2)
+    dev: true
 
   /@tybys/wasm-util@0.10.0:
     resolution: {integrity: sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==}
@@ -3564,6 +3640,7 @@ packages:
 
   /@types/web-bluetooth@0.0.21:
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+    dev: true
 
   /@types/whatwg-mimetype@3.0.2:
     resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
@@ -4627,6 +4704,7 @@ packages:
       vue: 3.5.18(typescript@5.9.2)
     transitivePeerDependencies:
       - typescript
+    dev: true
 
   /@vueuse/math@12.8.2(typescript@5.9.2):
     resolution: {integrity: sha512-hAhazPaKb4wlS/EXu11+dYaEaX60jvb+zil3uGR4he5yWLKAxcqGMhupuHAa0uIKcSK11GJMm0GdEA7mQYx2Aw==}
@@ -4643,6 +4721,7 @@ packages:
 
   /@vueuse/metadata@12.8.2:
     resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+    dev: true
 
   /@vueuse/nuxt@12.8.2(nuxt@4.0.3)(typescript@5.9.2):
     resolution: {integrity: sha512-jDsMli+MmxlhzaMwu8a2varKlkiBTPCdb+I457F7bTb1GazC6HDbGbLmhkpVQ8bNA1FzqfhwhAsOEsESF7wOkw==}
@@ -4675,6 +4754,7 @@ packages:
       vue: 3.5.18(typescript@5.9.2)
     transitivePeerDependencies:
       - typescript
+    dev: true
 
   /@webassemblyjs/ast@1.14.1:
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
@@ -4850,6 +4930,14 @@ packages:
       event-target-shim: 5.0.1
     dev: true
 
+  /accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+    dev: true
+
   /acorn-import-attributes@1.9.5(acorn@8.15.0):
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
@@ -4934,37 +5022,35 @@ packages:
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /ansi-regex@6.1.0:
     resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
-    dev: true
 
   /ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: true
 
   /ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
-    dev: true
 
   /ansis@4.1.0:
     resolution: {integrity: sha512-BGcItUBWSMRgOCe+SVZJ+S7yTRG0eGt9cXAHev72yuGcY23hnLA7Bky5L/xLyPINoSN95geovfBkqoTlNZYa7w==}
     engines: {node: '>=14'}
     dev: true
 
+  /any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /archiver-utils@5.0.2:
     resolution: {integrity: sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==}
@@ -4997,6 +5083,9 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -5006,6 +5095,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       tslib: 2.8.1
+    dev: true
 
   /assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
@@ -5041,6 +5131,11 @@ packages:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
     dev: true
 
+  /at-least-node@1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
   /autoprefixer@10.4.21(postcss@8.5.6):
     resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -5072,7 +5167,6 @@ packages:
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true
 
   /bare-events@2.6.1:
     resolution: {integrity: sha512-AuTJkq9XmE6Vk0FJVNq5QxETrSA/vKHarWVBG5l/JbdCL1prJemiyJqUS0jrlXO0MftuPq4m3YVYhoNc5+aE/g==}
@@ -5087,7 +5181,6 @@ packages:
   /binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
-    dev: true
 
   /bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
@@ -5113,14 +5206,12 @@ packages:
     resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
     dependencies:
       balanced-match: 1.0.2
-    dev: true
 
   /braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.1.1
-    dev: true
 
   /browserslist@4.25.2:
     resolution: {integrity: sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA==}
@@ -5207,6 +5298,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /cache-content-type@1.0.1:
+    resolution: {integrity: sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      mime-types: 2.1.35
+      ylru: 1.4.0
+    dev: true
+
   /call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -5231,6 +5330,10 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  /camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
   /caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
@@ -5293,7 +5396,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
@@ -5362,6 +5464,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /co@4.6.0:
+    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+    dev: true
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -5373,7 +5480,6 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
@@ -5381,7 +5487,6 @@ packages:
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
 
   /color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
@@ -5430,6 +5535,15 @@ packages:
   /commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
+  /commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  /commander@6.2.1:
+    resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
+    engines: {node: '>= 6'}
+    dev: true
+
   /commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -5484,6 +5598,18 @@ packages:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  /content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
+  /content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /convert-source-map@1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
     dev: false
@@ -5504,6 +5630,14 @@ packages:
     engines: {node: '>=18'}
     dev: true
 
+  /cookies@0.9.1:
+    resolution: {integrity: sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      depd: 2.0.0
+      keygrip: 1.1.0
+    dev: true
+
   /copy-anything@3.0.5:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
@@ -5572,7 +5706,6 @@ packages:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
-    dev: true
 
   /crossws@0.3.5:
     resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
@@ -5627,7 +5760,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /cssnano-preset-default@7.0.8(postcss@8.5.6):
     resolution: {integrity: sha512-d+3R2qwrUV3g4LEMOjnndognKirBZISylDZAF/TPeCWVjEwlXS2e4eN4ICkoobRe7pD3H6lltinKVyS1AJhdjQ==}
@@ -6020,6 +6152,17 @@ packages:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true
 
+  /debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+
   /debug@4.4.1:
     resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
     engines: {node: '>=6.0'}
@@ -6048,6 +6191,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /deep-equal@1.0.1:
+    resolution: {integrity: sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==}
+    dev: true
+
   /deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
@@ -6093,11 +6240,20 @@ packages:
       robust-predicates: 3.0.2
     dev: false
 
+  /delegates@1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
+    dev: true
+
   /denque@2.1.0:
     resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
     engines: {node: '>=0.10'}
     dev: true
 
+  /depd@1.1.2:
+    resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -6111,6 +6267,11 @@ packages:
   /destr@2.0.5:
     resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
+  /destroy@1.2.0:
+    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+    dev: true
+
   /detect-libc@1.0.3:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
     engines: {node: '>=0.10'}
@@ -6222,11 +6383,17 @@ packages:
       dequal: 2.0.3
     dev: true
 
+  /didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
   /diff@8.0.2:
     resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
     engines: {node: '>=0.3.1'}
     dev: true
 
+  /dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
   /dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
     dependencies:
@@ -6289,7 +6456,6 @@ packages:
 
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-    dev: true
 
   /editorconfig@1.0.4:
     resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
@@ -6338,16 +6504,19 @@ packages:
 
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-    dev: true
 
   /emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: true
 
   /enabled@2.0.0:
     resolution: {integrity: sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==}
     dev: true
 
+  /encodeurl@1.0.2:
+    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /encodeurl@2.0.0:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
@@ -7151,7 +7320,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.8
-    dev: true
 
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -7173,7 +7341,6 @@ packages:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
     dependencies:
       reusify: 1.1.0
-    dev: true
 
   /fault@2.0.1:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
@@ -7225,7 +7392,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
-    dev: true
 
   /filter-obj@6.1.0:
     resolution: {integrity: sha512-xdMtCAODmPloU9qtmPcdBV9Kd27NtMse+4ayThxqIHUES5Z2S6bGpap5PpdmNM56ub7y3i1eyr+vJJIIgWGKmA==}
@@ -7280,7 +7446,6 @@ packages:
     dependencies:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
-    dev: true
 
   /format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
@@ -7298,17 +7463,35 @@ packages:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
 
+  /fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
     dev: true
 
+  /fs-extra@9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+    dev: true
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind@1.1.2:
@@ -7434,14 +7617,12 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
@@ -7457,6 +7638,17 @@ packages:
       minipass: 7.1.2
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
+
+  /glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
     dev: true
 
   /global-directory@4.0.1:
@@ -7573,6 +7765,13 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.1.0
+    dev: true
+
   /hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
@@ -7594,6 +7793,35 @@ packages:
       lru-cache: 10.4.3
     dev: true
 
+  /http-assert@1.5.0:
+    resolution: {integrity: sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      deep-equal: 1.0.1
+      http-errors: 1.8.1
+    dev: true
+
+  /http-errors@1.6.3:
+    resolution: {integrity: sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.3
+      setprototypeof: 1.1.0
+      statuses: 1.5.0
+    dev: true
+
+  /http-errors@1.8.1:
+    resolution: {integrity: sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 1.5.0
+      toidentifier: 1.0.1
+    dev: true
+
   /http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
@@ -7684,6 +7912,18 @@ packages:
     engines: {node: '>=18'}
     dev: true
 
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.3:
+    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
+    dev: true
+
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
@@ -7738,7 +7978,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.3.0
-    dev: true
 
   /is-builtin-module@3.2.1:
     resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
@@ -7775,11 +8014,19 @@ packages:
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
+
+  /is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
     dev: true
 
   /is-glob@4.0.3:
@@ -7787,7 +8034,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-extglob: 2.1.1
-    dev: true
 
   /is-inside-container@1.0.0:
     resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
@@ -7812,7 +8058,6 @@ packages:
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: true
 
   /is-path-inside@4.0.0:
     resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
@@ -7830,6 +8075,16 @@ packages:
       '@types/estree': 1.0.8
     dev: true
 
+  /is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+    dev: true
+
   /is-ssh@1.4.1:
     resolution: {integrity: sha512-JNeu1wQsHjyHgn9NcWTaXq6zWSR6hqE0++zhfZlkFBbScNkyvxCdeV8sRkSBaeLKxmbpR21brail63ACNxJ0Tg==}
     dependencies:
@@ -7903,7 +8158,6 @@ packages:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
-    dev: true
 
   /jest-worker@27.5.1:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
@@ -7914,6 +8168,10 @@ packages:
       supports-color: 8.1.1
     dev: true
 
+  /jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
   /jiti@2.5.1:
     resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
     hasBin: true
@@ -8006,6 +8264,14 @@ packages:
       semver: 7.7.2
     dev: true
 
+  /jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: true
+
   /junk@4.0.1:
     resolution: {integrity: sha512-Qush0uP+G8ZScpGMZvHUiRfI0YBWuB3gVBYlI0v0vvOJt5FLicco+IkP0a50LqTTQhmts/m6tP5SWE+USyIvcQ==}
     engines: {node: '>=12.20'}
@@ -8020,6 +8286,13 @@ packages:
     resolution: {integrity: sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==}
     dev: false
 
+  /keygrip@1.1.0:
+    resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      tsscmp: 1.0.6
+    dev: true
+
   /keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
@@ -8048,6 +8321,70 @@ packages:
   /knitwork@1.2.0:
     resolution: {integrity: sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==}
 
+  /koa-compose@4.1.0:
+    resolution: {integrity: sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==}
+    dev: true
+
+  /koa-convert@2.0.0:
+    resolution: {integrity: sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      co: 4.6.0
+      koa-compose: 4.1.0
+    dev: true
+
+  /koa-send@5.0.1:
+    resolution: {integrity: sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ==}
+    engines: {node: '>= 8'}
+    dependencies:
+      debug: 4.4.1
+      http-errors: 1.8.1
+      resolve-path: 1.4.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /koa-static@5.0.0:
+    resolution: {integrity: sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==}
+    engines: {node: '>= 7.6.0'}
+    dependencies:
+      debug: 3.2.7
+      koa-send: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /koa@2.16.2:
+    resolution: {integrity: sha512-+CCssgnrWKx9aI3OeZwroa/ckG4JICxvIFnSiOUyl2Uv+UTI+xIw0FfFrWS7cQFpoePpr9o8csss7KzsTzNL8Q==}
+    engines: {node: ^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4}
+    dependencies:
+      accepts: 1.3.8
+      cache-content-type: 1.0.1
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookies: 0.9.1
+      debug: 4.4.1
+      delegates: 1.0.0
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      fresh: 0.5.2
+      http-assert: 1.5.0
+      http-errors: 1.8.1
+      is-generator-function: 1.1.0
+      koa-compose: 4.1.0
+      koa-convert: 2.0.0
+      on-finished: 2.4.1
+      only: 0.0.2
+      parseurl: 1.3.3
+      statuses: 1.5.0
+      type-is: 1.6.18
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
     dev: true
@@ -8095,11 +8432,9 @@ packages:
   /lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
-    dev: true
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: false
 
   /listhen@1.9.0:
     resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
@@ -8210,7 +8545,6 @@ packages:
 
   /lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
-    dev: true
 
   /lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
@@ -8446,6 +8780,11 @@ packages:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
     dev: true
 
+  /media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /merge-options@3.0.4:
     resolution: {integrity: sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==}
     engines: {node: '>=10'}
@@ -8460,6 +8799,10 @@ packages:
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
+
+  /methods@1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
     dev: true
 
   /micro-api-client@3.3.0:
@@ -8728,7 +9071,6 @@ packages:
     dependencies:
       braces: 3.0.3
       picomatch: 2.3.1
-    dev: true
 
   /mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@@ -8808,7 +9150,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.2
-    dev: true
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
@@ -8816,7 +9157,6 @@ packages:
   /minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
-    dev: true
 
   /minizlib@3.0.2:
     resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
@@ -8871,6 +9211,13 @@ packages:
     resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
     dev: false
 
+  /mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
   /nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -8901,6 +9248,11 @@ packages:
     engines: {node: '>=18'}
     dev: true
 
+  /negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
@@ -9119,7 +9471,6 @@ packages:
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-range@0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -9290,6 +9641,14 @@ packages:
       pkg-types: 2.2.0
       tinyexec: 1.0.1
 
+  /object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  /object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
   /object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -9337,6 +9696,10 @@ packages:
       mimic-fn: 4.0.0
     dev: true
 
+  /only@0.0.2:
+    resolution: {integrity: sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==}
+    dev: true
+
   /open@10.2.0:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
@@ -9347,6 +9710,14 @@ packages:
       wsl-utils: 0.1.0
     dev: true
 
+  /open@7.4.2:
+    resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+    dev: true
+
   /open@8.4.2:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
@@ -9497,7 +9868,6 @@ packages:
 
   /package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
-    dev: true
 
   /package-manager-detector@1.3.0:
     resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
@@ -9580,10 +9950,14 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
+  /path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
-    dev: true
 
   /path-key@4.0.0:
     resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
@@ -9599,6 +9973,9 @@ packages:
     dependencies:
       lru-cache: 10.4.3
       minipass: 7.1.2
+
+  /path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
     dev: true
 
   /path-type@4.0.0:
@@ -9644,12 +10021,15 @@ packages:
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /picomatch@4.0.3:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  /pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
   /pinia-plugin-persistedstate@4.5.0(@pinia/nuxt@0.11.2)(pinia@3.0.3):
     resolution: {integrity: sha512-QTkP1xJVyCdr2I2p3AKUZM84/e+IS+HktRxKGAIuDzkyaKKV48mQcYkJFVVDuvTxlI5j6X3oZObpqoVB8JnWpw==}
     peerDependencies:
@@ -9684,6 +10064,10 @@ packages:
       typescript: 5.9.2
       vue: 3.5.18(typescript@5.9.2)
 
+  /pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
   /pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
     dependencies:
@@ -9715,6 +10099,16 @@ packages:
       yaml: 2.8.1
     dev: true
 
+  /portfinder@1.0.37:
+    resolution: {integrity: sha512-yuGIEjDAYnnOex9ddMnKZEMFE0CcGo6zbfzDklkmT1m5z734ss6JMzN9rNB3+RR7iS+F10D4/BVIaXOyh8PQKw==}
+    engines: {node: '>= 10.12'}
+    dependencies:
+      async: 3.2.6
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /postcss-calc@10.1.1(postcss@8.5.6):
     resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==}
     engines: {node: ^18.12 || ^20.9 || >=22.0}
@@ -9787,6 +10181,42 @@ packages:
       postcss: 8.5.6
     dev: true
 
+  /postcss-import@15.1.0(postcss@8.5.6):
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.10
+
+  /postcss-js@4.0.1(postcss@8.5.6):
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.6
+
+  /postcss-load-config@4.0.2(postcss@8.5.6):
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 3.1.3
+      postcss: 8.5.6
+      yaml: 2.8.1
+
   /postcss-merge-longhand@7.0.5(postcss@8.5.6):
     resolution: {integrity: sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
@@ -9856,6 +10286,27 @@ packages:
       postcss-selector-parser: 7.1.0
     dev: true
 
+  /postcss-nested@6.2.0(postcss@8.5.6):
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  /postcss-nesting@13.0.2(postcss@8.5.6):
+    resolution: {integrity: sha512-1YCI290TX+VP0U/K/aFxzHzQWHWURL+CtHMSbex1lCdpXD1SoR2sYuxDu5aNI9lPoXpKTCggFZiDJbwylU0LEQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.0)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.0
+    dev: true
+
   /postcss-normalize-charset@7.0.1(postcss@8.5.6):
     resolution: {integrity: sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
@@ -9984,7 +10435,6 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss-selector-parser@7.1.0:
     resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
@@ -10017,7 +10467,6 @@ packages:
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss-values-parser@6.0.2(postcss@8.5.6):
     resolution: {integrity: sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==}
@@ -10198,7 +10647,6 @@ packages:
 
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: true
 
   /quickselect@2.0.0:
     resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
@@ -10249,6 +10697,11 @@ packages:
       defu: 6.1.4
       destr: 2.0.5
 
+  /read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+
   /read-package-up@11.0.0:
     resolution: {integrity: sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==}
     engines: {node: '>=18'}
@@ -10312,7 +10765,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /readdirp@4.1.2:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
@@ -10357,31 +10809,20 @@ packages:
       jsesc: 3.0.2
     dev: true
 
-  /reka-ui@2.4.1(typescript@5.9.2)(vue@3.5.18):
-    resolution: {integrity: sha512-NB7DrCsODN8MH02BWtgiExygfFcuuZ5/PTn6fMgjppmFHqePvNhmSn1LEuF35nel6PFbA4v+gdj0IoGN1yZ+vw==}
-    peerDependencies:
-      vue: '>= 3.2.0'
-    dependencies:
-      '@floating-ui/dom': 1.7.3
-      '@floating-ui/vue': 1.1.8(vue@3.5.18)
-      '@internationalized/date': 3.8.2
-      '@internationalized/number': 3.6.4
-      '@tanstack/vue-virtual': 3.13.12(vue@3.5.18)
-      '@vueuse/core': 12.8.2(typescript@5.9.2)
-      '@vueuse/shared': 12.8.2(typescript@5.9.2)
-      aria-hidden: 1.2.6
-      defu: 6.1.4
-      ohash: 2.0.11
-      vue: 3.5.18(typescript@5.9.2)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - typescript
-    dev: false
-
   /remove-trailing-separator@1.1.0:
     resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==}
     dev: true
 
+  /replace-in-file@6.3.5:
+    resolution: {integrity: sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      chalk: 4.1.2
+      glob: 7.2.3
+      yargs: 17.7.2
+    dev: true
+
   /require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -10405,6 +10846,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /resolve-path@1.4.0:
+    resolution: {integrity: sha512-i1xevIst/Qa+nA9olDxLWnLk8YZbi8R/7JPbCMcgyWaFR6bKWaexgJgEB5oc2PKMjYdrHynyz0NY+if+H98t1w==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      http-errors: 1.6.3
+      path-is-absolute: 1.0.1
+    dev: true
+
   /resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
     dev: true
@@ -10436,7 +10885,6 @@ packages:
   /reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: true
 
   /rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
@@ -10504,7 +10952,6 @@ packages:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
-    dev: true
 
   /rw@1.3.3:
     resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
@@ -10518,6 +10965,15 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
+  /safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+    dev: true
+
   /safe-stable-stringify@2.5.0:
     resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
     engines: {node: '>=10'}
@@ -10606,6 +11062,10 @@ packages:
       - supports-color
     dev: true
 
+  /setprototypeof@1.1.0:
+    resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==}
+    dev: true
+
   /setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
     dev: true
@@ -10624,12 +11084,10 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       shebang-regex: 3.0.0
-    dev: true
 
   /shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
-    dev: true
 
   /shell-quote@1.8.3:
     resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
@@ -10683,7 +11141,6 @@ packages:
   /signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
-    dev: true
 
   /simple-git@3.28.0:
     resolution: {integrity: sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==}
@@ -10799,6 +11256,11 @@ packages:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
     dev: true
 
+  /statuses@1.5.0:
+    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /statuses@2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
@@ -10828,7 +11290,6 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
-    dev: true
 
   /string-width@5.1.2:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
@@ -10837,7 +11298,6 @@ packages:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
-    dev: true
 
   /string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
@@ -10856,14 +11316,12 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       ansi-regex: 5.0.1
-    dev: true
 
   /strip-ansi@7.1.0:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
     dependencies:
       ansi-regex: 6.1.0
-    dev: true
 
   /strip-final-newline@3.0.0:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
@@ -10910,6 +11368,19 @@ packages:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
     dev: false
 
+  /sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      ts-interface-checker: 0.1.13
+
   /supercluster@7.1.5:
     resolution: {integrity: sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==}
     dependencies:
@@ -10979,10 +11450,68 @@ packages:
     engines: {node: '>=18'}
     dev: true
 
+  /tailwind-config-viewer@2.0.4(tailwindcss@3.4.17):
+    resolution: {integrity: sha512-icvcmdMmt9dphvas8wL40qttrHwAnW3QEN4ExJ2zICjwRsPj7gowd1cOceaWG3IfTuM/cTNGQcx+bsjMtmV+cw==}
+    engines: {node: '>=13'}
+    hasBin: true
+    peerDependencies:
+      tailwindcss: 1 || 2 || 2.0.1-compat || 3
+    dependencies:
+      '@koa/router': 12.0.2
+      commander: 6.2.1
+      fs-extra: 9.1.0
+      koa: 2.16.2
+      koa-static: 5.0.0
+      open: 7.4.2
+      portfinder: 1.0.37
+      replace-in-file: 6.3.5
+      tailwindcss: 3.4.17
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /tailwind-merge@2.6.0:
     resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
     dev: true
 
+  /tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.4.17
+    dev: false
+
+  /tailwindcss@3.4.17:
+    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-import: 15.1.0(postcss@8.5.6)
+      postcss-js: 4.0.1(postcss@8.5.6)
+      postcss-load-config: 4.0.2(postcss@8.5.6)
+      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.10
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
   /tapable@2.2.2:
     resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
     engines: {node: '>=6'}
@@ -11054,6 +11583,17 @@ packages:
     resolution: {integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==}
     dev: true
 
+  /thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      thenify: 3.3.1
+
+  /thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+    dependencies:
+      any-promise: 1.3.0
+
   /three@0.135.0:
     resolution: {integrity: sha512-kuEpuuxRzLv0MDsXai9huCxOSQPZ4vje6y0gn80SRmQvgz6/+rI0NAvCRAw56zYaWKMGMfqKWsxF9Qa2Z9xymQ==}
     dev: false
@@ -11126,7 +11666,6 @@ packages:
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
-    dev: true
 
   /toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
@@ -11183,9 +11722,17 @@ packages:
       typescript: 5.9.2
     dev: true
 
+  /ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
   /tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  /tsscmp@1.0.6:
+    resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
+    engines: {node: '>=0.6.x'}
+    dev: true
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -11198,6 +11745,14 @@ packages:
     engines: {node: '>=16'}
     dev: true
 
+  /type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+    dev: true
+
   /type-level-regexp@0.1.17:
     resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
     dev: true
@@ -11315,6 +11870,11 @@ packages:
       unist-util-visit-parents: 6.0.1
     dev: true
 
+  /universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
   /unixify@1.0.0:
     resolution: {integrity: sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg==}
     engines: {node: '>=0.10.0'}
@@ -11596,7 +12156,6 @@ packages:
 
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: true
 
   /uuid@11.1.0:
     resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
@@ -11610,6 +12169,11 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /vaul-vue@0.2.1(radix-vue@1.9.17)(vue@3.5.18):
     resolution: {integrity: sha512-iF91R1JQZzxb9mb9uGNHYv8rVFxR5bL5Fj51iqvyXjzMPAzNMciCrXb9OUBu2NdlhcF6rVtEADXnQoTY+pKIeA==}
     peerDependencies:
@@ -11937,6 +12501,7 @@ packages:
         optional: true
     dependencies:
       vue: 3.5.18(typescript@5.9.2)
+    dev: true
 
   /vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
@@ -12093,7 +12658,6 @@ packages:
     hasBin: true
     dependencies:
       isexe: 2.0.0
-    dev: true
 
   /which@5.0.0:
     resolution: {integrity: sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==}
@@ -12150,7 +12714,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
   /wrap-ansi@8.1.0:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
@@ -12159,7 +12722,6 @@ packages:
       ansi-styles: 6.2.1
       string-width: 5.1.2
       strip-ansi: 7.1.0
-    dev: true
 
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
@@ -12229,7 +12791,6 @@ packages:
     resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
     engines: {node: '>= 14.6'}
     hasBin: true
-    dev: true
 
   /yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
@@ -12256,6 +12817,11 @@ packages:
       fd-slicer: 1.1.0
     dev: true
 
+  /ylru@1.4.0:
+    resolution: {integrity: sha512-2OQsPNEmBCvXuFlIni/a+Rn+R2pHW9INm0BxXJ4hVDA8TirqMj+J/Rp9ItLatT/5pZqWwefVrTQcHpixsxnVlA==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 00000000..3b037e25
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,86 @@
+import animate from 'tailwindcss-animate'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  safelist: ['dark'],
+  prefix: '',
+
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        xl: 'calc(var(--radius) + 4px)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 },
+        },
+        'collapsible-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-in-out',
+      },
+    },
+  },
+  plugins: [animate],
+}
diff --git a/uno.config.ts b/uno.config.ts
index fb109dd6..a34f3725 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -29,4 +29,5 @@ export default defineConfig({
   rules: [
     // Custom rules if needed
   ],
+  inspector: true,
 })

From d4cdbb063d04efebbe7607adf6d6f83e86e326bf Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 26 Aug 2025 17:09:32 +0700
Subject: [PATCH 15/15] docs: add Shadcn Vue documentation link to README

---
 README.md | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 848a0a2f..694ddf34 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ RSSA - Front End
 
 - [Vue Style Guide](https://vuejs.org/style-guide)
 - [Nuxt Style Guide](https://nuxt.com/docs/4.x/guide)
+- [Shadcn Vue @radix-ui](https://radix.shadcn-vue.com/)
 
 ## Configuration
 
@@ -95,24 +96,3 @@ The basic git workflow follows these steps:
      - Example: `feat: add new feature`
 4. Push your changes to `dev`
 5. Create a pull request from `dev` to `main`
-ini yang pakai reka tadi (kemajuan wkwkw)
-{
-  "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "new-york",
-  "typescript": true,
-  "tailwind": {
-    "config": "",
-    "css": "app/assets/css/tailwind.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "~/components/pub",
-    "composables": "~/composables",
-    "utils": "~/lib/utils",
-    "ui": "~/components/pub/ui",
-    "lib": "~/lib"
-  },
-  "iconLibrary": "lucide"
-}