✨ 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" />
|
||||
</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">
|
||||
|
||||
@@ -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')
|
||||
}
|
||||
|
||||
+1
-182
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user