Khafid Prayoga
106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import type { ServiceStatus } from '~/components/pub/base/service-status.type'
|
|
import type { Summary } from '~/components/pub/base/summary-card.type'
|
|
import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
|
|
import { CircleCheckBig, CircleDashed, CircleX, Send } from 'lucide-vue-next'
|
|
|
|
const refSearchNav: RefSearchNav = {
|
|
onClick: () => {
|
|
// open filter modal
|
|
},
|
|
onInput: (_val: string) => {
|
|
// filter patient list
|
|
},
|
|
onClear: () => {
|
|
// clear url param
|
|
},
|
|
}
|
|
|
|
// Loading state management
|
|
const isLoading = reactive({
|
|
satusehatConn: true,
|
|
})
|
|
|
|
const hreaderPrep: HeaderPrep = {
|
|
title: 'SATUSEHAT Integration',
|
|
icon: 'i-lucide-box',
|
|
addNav: {
|
|
label: 'Kirim Resource',
|
|
icon: 'i-lucide-send',
|
|
// onClick: () => navigateTo('/patient/add'),
|
|
},
|
|
}
|
|
|
|
// SATUSEHAT Service integration
|
|
const service = reactive<ServiceStatus>({
|
|
serviceName: 'SATUSEHAT',
|
|
serviceDesc: 'SATUSEHAT - FHIR R4 Compliant',
|
|
sessionActive: false,
|
|
status: 'connecting',
|
|
isSkeleton: false,
|
|
})
|
|
|
|
// Initial/default data structure
|
|
const summaryData: Summary[] = [
|
|
{
|
|
title: 'Resource Terkirim',
|
|
icon: Send,
|
|
metric: 1245,
|
|
trend: 0,
|
|
timeframe: 'daily',
|
|
},
|
|
{
|
|
title: 'Sync Success',
|
|
icon: CircleCheckBig,
|
|
metric: '97%',
|
|
trend: 0,
|
|
timeframe: 'daily',
|
|
},
|
|
{
|
|
title: 'Pending Queue',
|
|
icon: CircleDashed,
|
|
metric: 32,
|
|
trend: 0,
|
|
timeframe: 'daily',
|
|
},
|
|
{
|
|
title: 'Failed Items',
|
|
icon: CircleX,
|
|
metric: 10,
|
|
trend: 0,
|
|
timeframe: 'daily',
|
|
},
|
|
]
|
|
|
|
async function callSatuSehat() {
|
|
try {
|
|
await new Promise((resolve) => setTimeout(resolve, 3000))
|
|
service.status = 'connected'
|
|
// service.status = 'error'
|
|
service.sessionActive = true
|
|
// service.sessionActive = false
|
|
} finally {
|
|
isLoading.satusehatConn = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
callSatuSehat()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<PubNavHeaderPrep :prep="hreaderPrep" :ref-search-nav="refSearchNav" />
|
|
<div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
|
|
<PubBaseServiceStatus v-bind="service" />
|
|
<div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
|
|
<template v-if="isLoading.satusehatConn">
|
|
<PubBaseSummaryCard v-for="n in 4" :key="n" is-skeleton :stat="summaryData[n]" />
|
|
</template>
|
|
<template v-else>
|
|
<PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|