✨ feat (dashboard): implement dashboard page with summary cards and quick actions
This commit is contained in:
Abizrh
@@ -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>
|
||||||
@@ -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" />
|
<Skeleton class="h-4 w-64 bg-gray-100 text-xs font-medium" />
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</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">
|
<CardHeader class="flex flex-row items-center justify-between pb-2">
|
||||||
<CardTitle class="text-sm font-medium"> {{ props.stat.title }} </CardTitle>
|
<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>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div class="text-2xl font-bold">
|
<div class="text-2xl font-bold">
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import type { Pinia } from 'pinia'
|
||||||
|
|
||||||
export interface XError {
|
export interface XError {
|
||||||
code: string
|
code: string
|
||||||
message: string
|
message: string
|
||||||
@@ -75,7 +77,7 @@ export async function xfetch(
|
|||||||
|
|
||||||
function clearStore() {
|
function clearStore() {
|
||||||
const { $pinia } = useNuxtApp()
|
const { $pinia } = useNuxtApp()
|
||||||
const userStore = useUserStore($pinia)
|
const userStore = useUserStore($pinia as Pinia)
|
||||||
userStore.logout()
|
userStore.logout()
|
||||||
navigateTo('/401')
|
navigateTo('/401')
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-182
@@ -1,190 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Activity, CreditCard, DollarSign, Users } from 'lucide-vue-next'
|
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
roles: ['sys', 'doc'],
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex w-full flex-col gap-4">
|
<FlowDashboard />
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user