Khafid Prayoga
116 lines
3.0 KiB
Vue
116 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
|
|
import { Calendar, ChevronDown, ChevronUp, Hospital, UserRoundCheck, UsersRound } from 'lucide-vue-next'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
const refSearchNav: RefSearchNav = {
|
|
onClick: () => {
|
|
// open filter modal
|
|
},
|
|
onInput: (_val: string) => {
|
|
// filter patient list
|
|
},
|
|
onClear: () => {
|
|
// clear url param
|
|
},
|
|
}
|
|
|
|
const hreaderPrep: HeaderPrep = {
|
|
title: 'Pasien',
|
|
icon: 'i-lucide-add',
|
|
addNav: {
|
|
label: 'Tambah',
|
|
onClick: () => navigateTo('/patient/add'),
|
|
},
|
|
}
|
|
|
|
// NOTE: example api
|
|
async function getPatientList() {
|
|
// const response = await xfetch('/api/v1/patient')
|
|
// console.log('data patient', response)
|
|
}
|
|
|
|
onMounted(() => {
|
|
getPatientList()
|
|
})
|
|
|
|
// const patients = [
|
|
// {
|
|
// noRM: 'RM001',
|
|
// nama: 'Siti Nurhaliza',
|
|
// umur: 34,
|
|
// jenisKelamin: 'Perempuan',
|
|
// kontak: '081234567890',
|
|
// kunjunganTerakhir: '2025-08-01',
|
|
// status: 'active',
|
|
// bpjs: true,
|
|
// },
|
|
// ]
|
|
|
|
const summaryCard = computed(() => {
|
|
return [
|
|
{
|
|
title: 'Total Pasien',
|
|
icon: UsersRound,
|
|
value: 234,
|
|
change: 12.5,
|
|
isPositive: true,
|
|
period: 'from last month',
|
|
},
|
|
{
|
|
title: 'Pasien Aktif',
|
|
icon: UserRoundCheck,
|
|
value: 1340,
|
|
change: 8.3,
|
|
isPositive: true,
|
|
period: 'from last week',
|
|
},
|
|
{
|
|
title: 'Kunjungan Hari Ini',
|
|
icon: Calendar,
|
|
value: 200,
|
|
change: 5.2,
|
|
isPositive: false,
|
|
period: 'from yesterday',
|
|
},
|
|
{
|
|
title: 'Peserta BPJS',
|
|
icon: Hospital,
|
|
value: 10223,
|
|
change: 15.7,
|
|
isPositive: true,
|
|
period: 'from last month',
|
|
},
|
|
]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
|
|
<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 v-for="report in summaryCard" :key="report.title">
|
|
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle class="text-sm font-medium"> {{ report.title }} </CardTitle>
|
|
<component :is="report.icon" class="text-muted-foreground h-4 w-4" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="text-2xl font-bold">
|
|
{{ report.value.toLocaleString('id-ID') }}
|
|
</div>
|
|
<p class="text-muted-foreground flex items-center gap-1 text-xs">
|
|
<component
|
|
:is="report.isPositive ? ChevronUp : ChevronDown"
|
|
:class="cn('h-4 w-4', { 'text-green-500': report.isPositive }, { 'text-red-500': !report.isPositive })"
|
|
/>
|
|
<span class="font-medium" :class="report.isPositive ? 'text-green-500' : 'text-red-500'">
|
|
{{ report.change.toFixed(1) }}%
|
|
</span>
|
|
<span>{{ report.period }}</span>
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</main>
|
|
</template>
|