✨ feat (dashboard): add initial dashboard page
This commit is contained in:
Abizrh
@@ -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',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -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">
|
||||
|
||||
+179
-1
@@ -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>
|
||||
|
||||
@@ -16,6 +16,10 @@ export default defineNuxtConfig({
|
||||
|
||||
css: ['@unocss/reset/tailwind.css'],
|
||||
|
||||
colorMode: {
|
||||
classSuffix: '',
|
||||
},
|
||||
|
||||
features: {
|
||||
// For UnoCSS
|
||||
inlineStyles: false,
|
||||
|
||||
Reference in New Issue
Block a user