fix(encounter): updates BPJS menu icon to image and tweaks style

This commit is contained in:
riefive
2025-11-15 08:38:39 +07:00
parent de81af9844
commit a43e2feb98
5 changed files with 95 additions and 6 deletions
@@ -54,9 +54,9 @@ const itemsOne: ButtonItems[] = [
},
{
label: 'I-Care BPJS',
icon: 'i-lucide-file',
icon: '/bpjs.png',
value: 'bpjs',
type: 'icon',
type: 'image',
},
{
label: 'Fil SEP',
@@ -96,15 +96,16 @@ function handleClick(value: string) {
:class="[
'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
activeMenu === item.value
? 'border-orange-500 bg-orange-500 text-white'
? 'border-orange-300 bg-orange-400 text-white'
: 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
]"
@click="handleClick(item.value)"
>
<Icon
<Icon v-if="item.type === 'icon'"
:name="item.icon"
class="h-4 w-4"
/>
<img v-else-if="item.type === 'image'" :src="item.icon" class="h-[24px] w-[24px] object-contain" />
{{ item.label }}
</Button>
</div>
@@ -116,7 +117,7 @@ function handleClick(value: string) {
:class="[
'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
activeMenu === item.value
? 'border-orange-500 bg-orange-500 text-white'
? 'border-orange-300 bg-orange-400 text-white'
: 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
]"
@click="handleClick(item.value)"
@@ -0,0 +1,44 @@
<script setup lang="ts">
import type { PagePermission } from '~/models/role'
import Error from '~/components/pub/my-ui/error/error.vue'
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
definePageMeta({
middleware: ['rbac'],
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
title: 'Kunjungan',
contentFrame: 'cf-full-width',
})
const route = useRoute()
useHead({
title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
})
const roleAccess: PagePermission = PAGE_PERMISSIONS['/emergency/encounter']
const { checkRole, hasCreateAccess } = useRBAC()
// Check if user has access to this page
const hasAccess = checkRole(roleAccess)
if (!hasAccess) {
throw createError({
statusCode: 403,
statusMessage: 'Access denied',
})
}
// Define permission-based computed properties
const canCreate = hasCreateAccess(roleAccess)
</script>
<template>
<div v-if="canCreate">
<ContentEncounterHome display="menu" class-code="emergency" sub-class-code="emg" />
</div>
<Error
v-else
:status-code="403"
/>
</template>
@@ -0,0 +1,44 @@
<script setup lang="ts">
import type { PagePermission } from '~/models/role'
import Error from '~/components/pub/my-ui/error/error.vue'
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
definePageMeta({
middleware: ['rbac'],
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
title: 'Kunjungan',
contentFrame: 'cf-full-width',
})
const route = useRoute()
useHead({
title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
})
const roleAccess: PagePermission = PAGE_PERMISSIONS['/inpatient/encounter']
const { checkRole, hasCreateAccess } = useRBAC()
// Check if user has access to this page
const hasAccess = checkRole(roleAccess)
if (!hasAccess) {
throw createError({
statusCode: 403,
statusMessage: 'Access denied',
})
}
// Define permission-based computed properties
const canCreate = hasCreateAccess(roleAccess)
</script>
<template>
<div v-if="canCreate">
<ContentEncounterHome display="menu" class-code="inpatient" sub-class-code="vk" />
</div>
<Error
v-else
:status-code="403"
/>
</template>
@@ -6,7 +6,7 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
definePageMeta({
middleware: ['rbac'],
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
title: 'Tambah Kunjungan',
title: 'Kunjungan',
contentFrame: 'cf-full-width',
})
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 MiB

After

Width:  |  Height:  |  Size: 282 KiB