From cecd591f4741da38e6b19d79604b1fd8769ff4aa Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 11 Aug 2025 16:02:36 +0700
Subject: [PATCH 1/4] impl summary card patient

---
 app/components/flow/patient/list.vue | 89 ++++++++++++++++++++++++++--
 1 file changed, 84 insertions(+), 5 deletions(-)

diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 0cae3161..676c893c 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const refSearchNav = {
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import { Calendar, ChevronDown, ChevronUp, Hospital, UserRoundCheck, UsersRound } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const refSearchNav: RefSearchNav = {
   onClick: () => {
     // open filter modal
   },
@@ -13,7 +17,7 @@ const refSearchNav = {
 
 const hreaderPrep: HeaderPrep = {
   title: 'Pasien',
-  icon: 'bi bi-journal-check',
+  icon: 'i-lucide-add',
   addNav: {
     label: 'Tambah',
     onClick: () => navigateTo('/patient/add'),
@@ -22,15 +26,90 @@ const hreaderPrep: HeaderPrep = {
 
 // NOTE: example api
 async function getPatientList() {
-  const { data } = await xfetch('/api/v1/patient')
-  console.log('data patient', data)
+  // const response = await xfetch('/api/v1/patient')
+  // console.log('data patient', response)
 }
 
 onMounted(() => {
   getPatientList()
 })
+
+// const patients = [
+//   {
+//     noRM: 'RM001',
+//     nama: 'Siti Nurhaliza',
+//     umur: 34,
+//     jenisKelamin: 'Perempuan',
+//     kontak: '081234567890',
+//     kunjunganTerakhir: '2025-08-01',
+//     status: 'active',
+//     bpjs: true,
+//   },
+// ]
+
+const summaryCard = computed(() => {
+  return [
+    {
+      title: 'Total Pasien',
+      icon: UsersRound,
+      value: 234,
+      change: 12.5,
+      isPositive: true,
+      period: 'from last month',
+    },
+    {
+      title: 'Pasien Aktif',
+      icon: UserRoundCheck,
+      value: 1340,
+      change: 8.3,
+      isPositive: true,
+      period: 'from last week',
+    },
+    {
+      title: 'Kunjungan Hari Ini',
+      icon: Calendar,
+      value: 200,
+      change: 5.2,
+      isPositive: false,
+      period: 'from yesterday',
+    },
+    {
+      title: 'Peserta BPJS',
+      icon: Hospital,
+      value: 10223,
+      change: 15.7,
+      isPositive: true,
+      period: 'from last month',
+    },
+  ]
+})
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" icon="i-lucide-add" />
+  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <main class="flex flex-1 flex-col gap-4 md:gap-8">
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+      <Card v-for="report in summaryCard" :key="report.title">
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-sm font-medium"> {{ report.title }} </CardTitle>
+          <component :is="report.icon" class="text-muted-foreground h-4 w-4" />
+        </CardHeader>
+        <CardContent>
+          <div class="text-2xl font-bold">
+            {{ report.value.toLocaleString('id-ID') }}
+          </div>
+          <p class="text-muted-foreground flex items-center gap-1 text-xs">
+            <component
+              :is="report.isPositive ? ChevronUp : ChevronDown"
+              :class="cn('h-4 w-4', { 'text-green-500': report.isPositive }, { 'text-red-500': !report.isPositive })"
+            />
+            <span class="font-medium" :class="report.isPositive ? 'text-green-500' : 'text-red-500'">
+              {{ report.change.toFixed(1) }}%
+            </span>
+            <span>{{ report.period }}</span>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  </main>
 </template>

From 7f7dfe0a024e07f8a205699c9866b147cdf4d9f3 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 12 Aug 2025 14:38:20 +0700
Subject: [PATCH 2/4] =?UTF-8?q?feat(pub/base):=20add=20reusable=20Summary?=
 =?UTF-8?q?=20Card=20+=20Summary=20type=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add `summary-card.vue` with skeleton state ⏳
- Add `summary-card.type.ts` with `Summary` interface and timeframe mapping 📅
---
 app/components/pub/base/summary-card.type.ts |  7 ++
 app/components/pub/base/summary-card.vue     | 71 ++++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 app/components/pub/base/summary-card.type.ts
 create mode 100644 app/components/pub/base/summary-card.vue

diff --git a/app/components/pub/base/summary-card.type.ts b/app/components/pub/base/summary-card.type.ts
new file mode 100644
index 00000000..64304eaf
--- /dev/null
+++ b/app/components/pub/base/summary-card.type.ts
@@ -0,0 +1,7 @@
+export interface Summary {
+  title: string
+  icon: Component
+  metric: number
+  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
new file mode 100644
index 00000000..411bb6fc
--- /dev/null
+++ b/app/components/pub/base/summary-card.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { Summary } from './summary-card.type'
+import { ChevronDown, ChevronUp } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  stat?: Summary
+  isSkeleton?: boolean
+}>()
+
+const timeFrame = computed((): string => {
+  if (!props.stat?.timeframe) return 'from unknown timeframe'
+
+  let word: string = ''
+  switch (props.stat.timeframe) {
+    case 'daily':
+      word = 'from yesterday'
+      break
+    case 'weekly':
+      word = 'from last week'
+      break
+    case 'monthly':
+      word = 'from last month'
+      break
+    case 'yearly':
+      word = 'from last year'
+      break
+  }
+
+  return word
+})
+
+const isTrending = computed<boolean>(() => (props.stat?.trend ?? 0) > 0)
+</script>
+
+<template>
+  <Card v-if="props.isSkeleton">
+    <CardHeader class="flex flex-row items-center justify-between pb-2">
+      <Skeleton class="h-6 w-32 bg-gray-100 text-sm font-medium" />
+      <Skeleton class="h-4 w-4 bg-gray-100" />
+    </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" />
+    </CardContent>
+  </Card>
+  <Card v-else-if="props.stat && !props.isSkeleton">
+    <CardHeader class="flex flex-row items-center justify-between pb-2">
+      <CardTitle class="text-sm font-medium"> {{ props.stat.title }} </CardTitle>
+      <component :is="props.stat.icon" class="text-muted-foreground h-4 w-4" />
+    </CardHeader>
+    <CardContent>
+      <div class="text-2xl font-bold">
+        {{ props.stat.metric.toLocaleString('id-ID') }}
+      </div>
+      <p 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 })"
+        />
+        <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) }}% -->
+        </span>
+        <span>{{ timeFrame }}</span>
+      </p>
+    </CardContent>
+  </Card>
+</template>
+
+<style scoped></style>

From cc2641548677e62a4555e8508f8dab0217fb554a Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 12 Aug 2025 14:38:40 +0700
Subject: [PATCH 3/4] =?UTF-8?q?refactor(flow/patient):=20use=20Summary=20C?=
 =?UTF-8?q?ard=20and=20loading=20state=20=E2=99=BB=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace inline cards with `PubBaseSummaryCard`
- Add `isLoading.summary` and mock `getPatientSummary()` ⏳
- Render skeleton while loading; show data when ready ✅
- Update icons and remove `cn` 🧹
- Call `getPatientSummary()` and `getPatientList()` on mount 🚀
---
 app/components/flow/patient/list.vue | 136 ++++++++++++---------------
 1 file changed, 62 insertions(+), 74 deletions(-)

diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 676c893c..c3a39fce 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { Summary } from '~/components/pub/base/summary-card.type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
-import { Calendar, ChevronDown, ChevronUp, Hospital, UserRoundCheck, UsersRound } from 'lucide-vue-next'
-import { cn } from '~/lib/utils'
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -15,6 +15,12 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
+// Loading state management
+const isLoading = reactive({
+  summary: false,
+  table: false,
+})
+
 const hreaderPrep: HeaderPrep = {
   title: 'Pasien',
   icon: 'i-lucide-add',
@@ -24,92 +30,74 @@ const hreaderPrep: HeaderPrep = {
   },
 }
 
-// NOTE: example api
+// Initial/default data structure
+const summaryData: Summary[] = [
+  {
+    title: 'Total Pasien',
+    icon: UsersRound,
+    metric: 23,
+    trend: 15,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Pasien Aktif',
+    icon: UserCheck,
+    metric: 100,
+    trend: 9,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Kunjungan Hari Ini',
+    icon: Calendar,
+    metric: 52,
+    trend: 1,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Peserta BPJS',
+    icon: Hospital,
+    metric: 71,
+    trend: -3,
+    timeframe: 'daily',
+  },
+]
+
+// API call function
+async function getPatientSummary() {
+  try {
+    isLoading.summary = true
+
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+  } catch (error) {
+    console.error('Error fetching patient summary:', error)
+    // Keep default/existing data on error
+  } finally {
+    isLoading.summary = false
+  }
+}
+
 async function getPatientList() {
   // const response = await xfetch('/api/v1/patient')
   // console.log('data patient', response)
 }
 
 onMounted(() => {
+  getPatientSummary()
   getPatientList()
 })
-
-// const patients = [
-//   {
-//     noRM: 'RM001',
-//     nama: 'Siti Nurhaliza',
-//     umur: 34,
-//     jenisKelamin: 'Perempuan',
-//     kontak: '081234567890',
-//     kunjunganTerakhir: '2025-08-01',
-//     status: 'active',
-//     bpjs: true,
-//   },
-// ]
-
-const summaryCard = computed(() => {
-  return [
-    {
-      title: 'Total Pasien',
-      icon: UsersRound,
-      value: 234,
-      change: 12.5,
-      isPositive: true,
-      period: 'from last month',
-    },
-    {
-      title: 'Pasien Aktif',
-      icon: UserRoundCheck,
-      value: 1340,
-      change: 8.3,
-      isPositive: true,
-      period: 'from last week',
-    },
-    {
-      title: 'Kunjungan Hari Ini',
-      icon: Calendar,
-      value: 200,
-      change: 5.2,
-      isPositive: false,
-      period: 'from yesterday',
-    },
-    {
-      title: 'Peserta BPJS',
-      icon: Hospital,
-      value: 10223,
-      change: 15.7,
-      isPositive: true,
-      period: 'from last month',
-    },
-  ]
-})
 </script>
 
 <template>
   <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+
   <main class="flex flex-1 flex-col gap-4 md:gap-8">
     <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-      <Card v-for="report in summaryCard" :key="report.title">
-        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle class="text-sm font-medium"> {{ report.title }} </CardTitle>
-          <component :is="report.icon" class="text-muted-foreground h-4 w-4" />
-        </CardHeader>
-        <CardContent>
-          <div class="text-2xl font-bold">
-            {{ report.value.toLocaleString('id-ID') }}
-          </div>
-          <p class="text-muted-foreground flex items-center gap-1 text-xs">
-            <component
-              :is="report.isPositive ? ChevronUp : ChevronDown"
-              :class="cn('h-4 w-4', { 'text-green-500': report.isPositive }, { 'text-red-500': !report.isPositive })"
-            />
-            <span class="font-medium" :class="report.isPositive ? 'text-green-500' : 'text-red-500'">
-              {{ report.change.toFixed(1) }}%
-            </span>
-            <span>{{ report.period }}</span>
-          </p>
-        </CardContent>
-      </Card>
+      <template v-if="isLoading.summary">
+        <PubBaseSummaryCard v-for="n in 4" :key="n" is-skeleton />
+      </template>
+      <template v-else>
+        <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+      </template>
     </div>
   </main>
 </template>

From 949aa718b6a5dd3108ed53a188e88377d25f2f5e Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 12 Aug 2025 14:58:29 +0700
Subject: [PATCH 4/4] add condition if zero trends , hide the timeframe

---
 app/components/pub/base/summary-card.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/pub/base/summary-card.vue b/app/components/pub/base/summary-card.vue
index 411bb6fc..d3413111 100644
--- a/app/components/pub/base/summary-card.vue
+++ b/app/components/pub/base/summary-card.vue
@@ -53,7 +53,7 @@ const isTrending = computed<boolean>(() => (props.stat?.trend ?? 0) > 0)
       <div class="text-2xl font-bold">
         {{ props.stat.metric.toLocaleString('id-ID') }}
       </div>
-      <p class="text-muted-foreground flex items-center gap-1 text-xs">
+      <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 })"