From fe46db6bc620ef07418c90411ea2edaa8099ef40 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Fri, 15 Aug 2025 16:30:48 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat=20(dashboard):=20implement=20d?=
 =?UTF-8?q?ashboard=20page=20with=20summary=20cards=20and=20quick=20action?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/flow/dashboard/index.vue  | 185 +++++++++++++++++++++++
 app/components/pub/base/summary-card.vue |   4 +-
 app/composables/useXfetch.ts             |   4 +-
 app/pages/index.vue                      | 183 +---------------------
 4 files changed, 191 insertions(+), 185 deletions(-)
 create mode 100644 app/components/flow/dashboard/index.vue

diff --git a/app/components/flow/dashboard/index.vue b/app/components/flow/dashboard/index.vue
new file mode 100644
index 00000000..9b591024
--- /dev/null
+++ b/app/components/flow/dashboard/index.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { Activity, CreditCard, DollarSign, Users, UserCheck, UsersRound, Calendar, Hospital } from 'lucide-vue-next'
+
+definePageMeta({
+  roles: ['sys', 'doc'],
+})
+
+const dataCard = ref({
+  totalRevenue: 0,
+  totalRevenueDesc: 0,
+  subscriptions: 0,
+  subscriptionsDesc: 0,
+  sales: 0,
+  salesDesc: 0,
+  activeNow: 0,
+  activeNowDesc: 0,
+})
+
+const dataRecentSales = [
+  {
+    name: 'Olivia Martin',
+    email: 'olivia.martin@email.com',
+    amount: 1999,
+  },
+  {
+    name: 'Jackson Lee',
+    email: 'jackson.lee@email.com',
+    amount: 39,
+  },
+  {
+    name: 'Isabella Nguyen',
+    email: 'isabella.nguyen@email.com',
+    amount: 299,
+  },
+  {
+    name: 'William Kim',
+    email: 'will@email.com',
+    amount: 99,
+  },
+  {
+    name: 'Sofia Davis',
+    email: 'sofia.davis@email.com',
+    amount: 39,
+  },
+]
+
+const summaryData: any[] = [
+  {
+    title: 'Total Pasien Hari Ini',
+    icon: UsersRound,
+    metric: 23,
+    trend: 15,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Rehabilitasi Medik',
+    icon: UserCheck,
+    metric: 100,
+    trend: 9,
+    timeframe: 'daily',
+  },
+  {
+    title: 'VClaim BPJS',
+    icon: Calendar,
+    metric: 52,
+    trend: 1,
+    timeframe: 'daily',
+  },
+  {
+    title: 'SATUSEHAT Sync',
+    icon: Hospital,
+    metric: 71,
+    trend: -3,
+    timeframe: 'daily',
+  },
+]
+
+const linkItems = [
+  {
+    title: 'Daftar Pasien',
+    link: '/patient',
+    icon: 'i-lucide-users',
+  },
+  {
+    title: 'Rawat Jalan',
+    link: '/outpatient/registration-queue',
+    icon: 'i-lucide-stethoscope',
+  },
+  {
+    title: 'Rawat Inap',
+    link: '/outpatient/registration-queue',
+    icon: 'i-lucide-hospital',
+  },
+  {
+    title: 'Rehabilitasi',
+    link: '/patient',
+    icon: 'i-lucide-heart',
+  },
+]
+
+onMounted(() => {
+  dataCard.value = {
+    totalRevenue: 45231.89,
+    totalRevenueDesc: 20.1 / 100,
+    subscriptions: 2350,
+    subscriptionsDesc: 180.5 / 100,
+    sales: 12234,
+    salesDesc: 45 / 100,
+    activeNow: 573,
+    activeNowDesc: 201,
+  }
+})
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <div class="mt-4 flex flex-wrap items-center justify-between gap-2">
+      <h2 class="text-2xl font-bold tracking-tight">Dashboard SIMRS</h2>
+      <div class="flex items-center gap-4 space-x-2">
+        <div class="bg-primary rounded-xl border p-1 text-white">Status: Aktif</div>
+        <Button class="bg-primary p-2 text-white" size="lg">
+          <Icon name="i-lucide-refresh-ccw" class="h-6 w-6" />
+          Sinkronisasi
+        </Button>
+      </div>
+    </div>
+    <main class="my-6 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">
+        <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+      </div>
+      <div class="grid gap-4 md:gap-8 lg:grid-cols-1 xl:grid-cols-3">
+        <Card v-for="n in 3" :key="n">
+          <CardHeader>
+            <CardTitle>Recent Sales</CardTitle>
+          </CardHeader>
+          <CardContent class="grid gap-8">
+            <div v-for="recentSales in dataRecentSales" :key="recentSales.name" class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarFallback>{{
+                  recentSales.name
+                    .split(' ')
+                    .map((n) => n[0])
+                    .join('')
+                }}</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  {{ recentSales.name }}
+                </p>
+                <p class="text-muted-foreground text-sm">
+                  {{ recentSales.email }}
+                </p>
+              </div>
+              <div class="ml-auto font-medium"></div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      <div>
+        <Card>
+          <CardHeader>
+            <div class="flex flex-wrap items-center gap-2">
+              <Icon name="i-lucide-activity" class="text-primary me-2 h-6 w-6" />
+              <h2 class="text-xl font-semibold tracking-tight">Aksi Cepat</h2>
+            </div>
+          </CardHeader>
+          <CardContent class="grid cursor-pointer gap-8 md:grid-cols-4 md:gap-8">
+            <Card
+              v-for="item in linkItems"
+              :key="item"
+              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]" />
+                  <h1>{{ item.title }}</h1>
+                </CardContent>
+              </NuxtLink>
+            </Card>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  </div>
+</template>
diff --git a/app/components/pub/base/summary-card.vue b/app/components/pub/base/summary-card.vue
index d3413111..7b45af84 100644
--- a/app/components/pub/base/summary-card.vue
+++ b/app/components/pub/base/summary-card.vue
@@ -44,10 +44,10 @@ const isTrending = computed<boolean>(() => (props.stat?.trend ?? 0) > 0)
       <Skeleton class="h-4 w-64 bg-gray-100 text-xs font-medium" />
     </CardContent>
   </Card>
-  <Card v-else-if="props.stat && !props.isSkeleton">
+  <Card v-else-if="props.stat && !props.isSkeleton" class="h-42">
     <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" />
+      <component :is="props.stat.icon" class="bg-primary h-[40px] w-auto rounded-md p-2 text-white" />
     </CardHeader>
     <CardContent>
       <div class="text-2xl font-bold">
diff --git a/app/composables/useXfetch.ts b/app/composables/useXfetch.ts
index e4e4c3ef..3f27c07f 100644
--- a/app/composables/useXfetch.ts
+++ b/app/composables/useXfetch.ts
@@ -1,3 +1,5 @@
+import type { Pinia } from 'pinia'
+
 export interface XError {
   code: string
   message: string
@@ -75,7 +77,7 @@ export async function xfetch(
 
 function clearStore() {
   const { $pinia } = useNuxtApp()
-  const userStore = useUserStore($pinia)
+  const userStore = useUserStore($pinia as Pinia)
   userStore.logout()
   navigateTo('/401')
 }
diff --git a/app/pages/index.vue b/app/pages/index.vue
index f745ba70..efb292f7 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,190 +1,9 @@
 <script setup lang="ts">
-import { Activity, CreditCard, DollarSign, Users } from 'lucide-vue-next'
-
 definePageMeta({
   roles: ['sys', 'doc'],
 })
-
-const { userRole } = useUserStore()
-
-const dataCard = ref({
-  totalRevenue: 0,
-  totalRevenueDesc: 0,
-  subscriptions: 0,
-  subscriptionsDesc: 0,
-  sales: 0,
-  salesDesc: 0,
-  activeNow: 0,
-  activeNowDesc: 0,
-})
-
-const dataRecentSales = [
-  {
-    name: 'Olivia Martin',
-    email: 'olivia.martin@email.com',
-    amount: 1999,
-  },
-  {
-    name: 'Jackson Lee',
-    email: 'jackson.lee@email.com',
-    amount: 39,
-  },
-  {
-    name: 'Isabella Nguyen',
-    email: 'isabella.nguyen@email.com',
-    amount: 299,
-  },
-  {
-    name: 'William Kim',
-    email: 'will@email.com',
-    amount: 99,
-  },
-  {
-    name: 'Sofia Davis',
-    email: 'sofia.davis@email.com',
-    amount: 39,
-  },
-]
-
-onMounted(() => {
-  dataCard.value = {
-    totalRevenue: 45231.89,
-    totalRevenueDesc: 20.1 / 100,
-    subscriptions: 2350,
-    subscriptionsDesc: 180.5 / 100,
-    sales: 12234,
-    salesDesc: 45 / 100,
-    activeNow: 573,
-    activeNowDesc: 201,
-  }
-})
 </script>
 
 <template>
-  <div class="flex w-full flex-col gap-4">
-    <div class="flex flex-wrap items-center justify-between gap-2">
-      <h2 class="text-2xl font-bold tracking-tight">Dashboard {{ userRole }}</h2>
-      <div class="flex items-center space-x-2"></div>
-    </div>
-    <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>
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-sm font-medium"> Total Pasien Hari Ini </CardTitle>
-            <DollarSign class="text-muted-foreground h-4 w-4" />
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              <!-- <NumberFlow -->
-              <!--   :value="dataCard.totalRevenue" -->
-              <!--   :format="{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }" -->
-              <!-- /> -->
-            </div>
-            <p class="text-muted-foreground text-xs">
-              <!-- <NumberFlow -->
-              <!--   :value="dataCard.totalRevenueDesc" -->
-              <!--   prefix="+" -->
-              <!--   :format="{ style: 'percent', minimumFractionDigits: 1 }" -->
-              <!-- /> -->
-              from last month
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-sm font-medium"> Subscriptions </CardTitle>
-            <Users class="text-muted-foreground h-4 w-4" />
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              <!-- <NumberFlow :value="dataCard.subscriptions" prefix="+" /> -->
-            </div>
-            <p class="text-muted-foreground text-xs">
-              <!-- <NumberFlow -->
-              <!--   :value="dataCard.subscriptionsDesc" -->
-              <!--   prefix="+" -->
-              <!--   :format="{ style: 'percent', minimumFractionDigits: 1 }" -->
-              <!-- /> -->
-              from last month
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-sm font-medium"> Sales </CardTitle>
-            <CreditCard class="text-muted-foreground h-4 w-4" />
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              <!-- <NumberFlow :value="dataCard.sales" prefix="+" /> -->
-            </div>
-            <p class="text-muted-foreground text-xs">
-              <!-- <NumberFlow -->
-              <!--   :value="dataCard.salesDesc" -->
-              <!--   prefix="+" -->
-              <!--   :format="{ style: 'percent', minimumFractionDigits: 1 }" -->
-              <!-- /> -->
-              from last month
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-sm font-medium"> Active Now </CardTitle>
-            <Activity class="text-muted-foreground h-4 w-4" />
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              <!-- <NumberFlow :value="dataCard.activeNow" prefix="+" /> -->
-            </div>
-            <p class="text-muted-foreground text-xs">
-              <!-- <NumberFlow :value="dataCard.activeNowDesc" prefix="+" /> since last hour -->
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-      <div class="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-        <Card class="xl:col-span-2">
-          <CardHeader>
-            <CardTitle>Overview</CardTitle>
-          </CardHeader>
-          <CardContent class="pl-2">
-            <!-- <DashboardOverview /> -->
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Sales</CardTitle>
-          </CardHeader>
-          <CardContent class="grid gap-8">
-            <div v-for="recentSales in dataRecentSales" :key="recentSales.name" class="flex items-center gap-4">
-              <Avatar class="hidden h-9 w-9 sm:flex">
-                <AvatarFallback>{{
-                  recentSales.name
-                    .split(' ')
-                    .map((n) => n[0])
-                    .join('')
-                }}</AvatarFallback>
-              </Avatar>
-              <div class="grid gap-1">
-                <p class="text-sm font-medium leading-none">
-                  {{ recentSales.name }}
-                </p>
-                <p class="text-muted-foreground text-sm">
-                  {{ recentSales.email }}
-                </p>
-              </div>
-              <div class="ml-auto font-medium">
-                <!-- <NumberFlow -->
-                <!--   :value="recentSales.amount" -->
-                <!--   :format="{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }" -->
-                <!--   prefix="+" -->
-                <!-- /> -->
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </main>
-  </div>
+  <FlowDashboard />
 </template>