From 92d835980315c831da9ce75ce3977c9dbe38b84c Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Fri, 8 Aug 2025 11:08:35 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat=20(dashboard):=20add=20initial?=
 =?UTF-8?q?=20dashboard=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/layout/AppSidebar.vue       |   7 +-
 app/components/layout/SidebarNavHeader.vue |   2 +-
 app/pages/index.vue                        | 180 ++++++++++++++++++++-
 nuxt.config.ts                             |   4 +
 4 files changed, 190 insertions(+), 3 deletions(-)

diff --git a/app/components/layout/AppSidebar.vue b/app/components/layout/AppSidebar.vue
index 2f0fcd52..ef70fd93 100644
--- a/app/components/layout/AppSidebar.vue
+++ b/app/components/layout/AppSidebar.vue
@@ -8,6 +8,11 @@ const navMenu: any[] = [
         icon: 'i-lucide-home',
         link: '/',
       },
+      {
+        title: 'Home',
+        icon: 'i-lucide-home',
+        link: '/',
+      },
     ],
   },
 ]
@@ -33,7 +38,7 @@ const teams: {
 }[] = [
   {
     name: 'SIMRS - RSSA',
-    logo: 'i-lucide-gallery-vertical-end',
+    logo: '/rssa-logo.png',
     plan: 'Saiful Anwar Hospital',
   },
 ]
diff --git a/app/components/layout/SidebarNavHeader.vue b/app/components/layout/SidebarNavHeader.vue
index e4a8575a..351f7d83 100644
--- a/app/components/layout/SidebarNavHeader.vue
+++ b/app/components/layout/SidebarNavHeader.vue
@@ -22,7 +22,7 @@ const activeTeam = ref(props.teams[0])
             <div
               class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
             >
-              <Icon :name="activeTeam.logo" class="size-4" />
+              <img :src="activeTeam.logo" class="h-full w-full" />
             </div>
             <div class="grid flex-1 text-left text-sm leading-tight">
               <span class="truncate font-semibold">
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 17da3ef8..5c7c6c81 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,4 +1,62 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Activity, CreditCard, DollarSign, Users } from 'lucide-vue-next'
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+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">
@@ -6,5 +64,125 @@
       <h2 class="text-2xl font-bold tracking-tight">Dashboard</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>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d234719a..3694c42a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,6 +16,10 @@ export default defineNuxtConfig({
 
   css: ['@unocss/reset/tailwind.css'],
 
+  colorMode: {
+    classSuffix: '',
+  },
+
   features: {
     // For UnoCSS
     inlineStyles: false,