munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into feat/patient

Browse Source
This commit is contained in:
Khafid Prayoga
2025-08-13 10:24:49 +07:00
parent 949aa718b6 db9a87d825
commit b51f4c248d
42 changed files with 1241 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+16 -3
View File
@@ -1,53 +1,66 @@
# SIMRS - FE
RSSA - Front End
## Framework Guide
- [Vue Style Guide](https://vuejs.org/style-guide)
- [Nuxt Style Guide](https://nuxt.com/docs/4.x/guide)
## Configuration
- `nuxt.config.ts`<br />Nuxt configuration file
- `.env`<br />Some environment variables
## Directory Structure for `app/`
- `app.vue`: Main layout
- `components` : Contains all reusable UI components.
- `components/flow` : Entry point for business logic and workflows. Pages or routes call these flow components to handle API requests and process application logic
- `components/app` : View-layer components that manage and present data. These are used within `flow/` to render or handle specific parts of the UI, and return results back to the flow
- `components/app` : View-layer components that manage and present data. These are used within `flow/` to render or handle specific parts of the UI, and return results back to the flow
- `components/pub` : Public/shared components used across different parts of the app.
- `composables` : Contains reusable logic and utility functions (e.g. composables, hooks)..
- `layouts` : Reusable UI layout patterns used across pages.
## Directory Structure for `app/pages`
## Directory Structure for `app/pages`
- `pages/auth` : Authentication related pages.
- `pages/(features)` : Grouped feature modules that reflect specific business flow or domains.
## Directory Structure for `server/`
## Directory Structure for `server/`
- `server/api` : API or proxy requests
## Workflows
The basic development workflow follows these steps:
### Define Your Data in `models/`
- Create data definitions or interfaces.
- These should represent the structure of the data used across your app.
### Build UI Components in `components/app`
- Create reusable UI and app specific components.
- Keep components pure, avoid making HTTP requests directly within them.
- They receive data via props and emit events upward.
### Business Logic in `components/flow`
- This layer connects the UI with the logic (API calls, validations, navigation).
- It composes components from `components/app/`, `components/pub/`, and other flow.
- Also responsible for managing state, side effects, and interactions.
### Create Pages in `pages/`
- Pages load the appropriate flow from `components/flow/`.
- They do not contain UI or logic directly, just route level layout or guards.
## Git Workflows
The basic git workflow follows these steps:
1. Create a new branch on `dev`
- branch name should be `feat/<feature-name>` or `fix/<bug-name>`
2. Make your changes
app/components/app/patient/entry-form.vue
+33 -5
View File
@@ -1,9 +1,37 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import Block from '~/components/pub/form/block.vue'
import FieldGroup from '~/components/pub/form/field-group.vue'
import Field from '~/components/pub/form/field.vue'
import Label from '~/components/pub/form/label.vue'
</script>
<template>
<div>entry form</div>
<form id="entry-form">
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
<Icon name="i-lucide-user" class="me-2" />
<span class="font-semibold">Tambah</span> Pasien
</div>
<div>
<PubNavFooterCs />
</div>
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
<div>
<Block>
<FieldGroup :column="2">
<Label>Nama</Label>
<Field name="name">
<Input type="text" name="name" />
</Field>
</FieldGroup>
<FieldGroup :column="2">
<Label>Nomor RM</Label>
<Field name="name">
<Input type="text" name="name" />
</Field>
</FieldGroup>
</Block>
</div>
</div>
<div class="my-2 flex justify-end py-2">
<PubNavFooterCsd />
</div>
</form>
</template>
app/components/app/patient/list-cfg.ts
+118
View File
@@ -0,0 +1,118 @@
import type {
Col,
KeyLabel,
RecComponent,
RecStrFuncComponent,
RecStrFuncUnknown,
Th,
} from '~/components/pub/nav/types'
type SmallDetailDto = any
const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
export const cols: Col[] = [
{},
{},
{},
{ width: 100 },
{ width: 120 },
{},
{},
{},
{ width: 100 },
{ width: 100 },
{},
{ width: 50 },
]
export const header: Th[][] = [
[
{ label: 'Nama' },
{ label: 'Rekam Medis' },
{ label: 'KTP' },
{ label: 'Tgl Lahir' },
{ label: 'Umur' },
{ label: 'JK' },
{ label: 'Pendidikan' },
{ label: 'Status' },
{ label: '' },
],
]
export const keys = [
'name',
'medicalRecord_number',
'identity_number',
'birth_date',
'patient_age',
'gender',
'education',
'status',
'action',
]
export const delKeyNames: KeyLabel[] = [
{ key: 'code', label: 'Kode' },
{ key: 'name', label: 'Nama' },
]
export const funcParsed: RecStrFuncUnknown = {
name: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto
return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
},
identity_number: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto
if (recX.identity_number?.substring(0, 5) === 'BLANK') {
return '(TANPA NIK)'
}
return recX.identity_number
},
birth_date: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto
if (typeof recX.birth_date == 'object' && recX.birth_date) {
return (recX.birth_date as Date).toLocaleDateString()
} else if (typeof recX.birth_date == 'string') {
return (recX.birth_date as string).substring(0, 10)
}
return recX.birth_date
},
patient_age: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto
return recX.birth_date?.split('T')[0]
},
gender: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto
if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
return 'Tidak Diketahui'
}
return recX.gender_code
},
education: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto
if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
return recX.education_code
} else if (typeof recX.education_code) {
return recX.education_code
}
return '-'
},
}
export const funcComponent: RecStrFuncComponent = {
action(rec, idx) {
const res: RecComponent = {
idx,
rec: rec as object,
component: action,
}
return res
},
}
export const funcHtml: RecStrFuncUnknown = {
patient_address(_rec) {
return '-'
},
}
app/components/app/patient/list.vue
+19
View File
@@ -0,0 +1,19 @@
<script setup lang="ts">
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg.ts'
defineProps<{
data: any[]
}>()
</script>
<template>
<PubNavDataTable
:rows="data"
:cols="cols"
:header="header"
:keys="keys"
:func-parsed="funcParsed"
:func-html="funcHtml"
:func-component="funcComponent"
/>
</template>
app/components/flow/patient/list.vue
+19 -6
View File
@@ -3,7 +3,10 @@ import type { Summary } from '~/components/pub/base/summary-card.type'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
const data = ref([])
const refSearchNav: RefSearchNav = {
onClick: () => {
// open filter modal
},
@@ -20,6 +23,9 @@ const isLoading = reactive({
summary: false,
table: false,
})
const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
const hreaderPrep: HeaderPrep = {
title: 'Pasien',
@@ -67,7 +73,7 @@ async function getPatientSummary() {
try {
isLoading.summary = true
await new Promise((resolve) => setTimeout(resolve, 1500))
await new Promise((resolve) => setTimeout(resolve, 500))
} catch (error) {
console.error('Error fetching patient summary:', error)
// Keep default/existing data on error
@@ -77,20 +83,26 @@ async function getPatientSummary() {
}
async function getPatientList() {
// const response = await xfetch('/api/v1/patient')
// console.log('data patient', response)
const resp = await xfetch('/api/v1/patient')
console.log('data patient', resp)
if (resp.success) {
data.value = (resp.body as Record<string, any>).data
}
}
onMounted(() => {
getPatientSummary()
getPatientList()
})
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
</script>
<template>
<PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
<main class="flex flex-1 flex-col gap-4 md:gap-8">
<div 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">
<template v-if="isLoading.summary">
<PubBaseSummaryCard v-for="n in 4" :key="n" is-skeleton />
@@ -99,5 +111,6 @@ onMounted(() => {
<PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
</template>
</div>
</main>
<AppPatientList :data="data" />
</div>
</template>
app/components/layout/Header.vue
+1 -1
View File
@@ -37,7 +37,7 @@ watch(
if (val) {
links.value = setLinks()
}
}
},
)
</script>
app/components/layout/SidebarNavFooter.vue
+57 -55
View File
@@ -22,73 +22,75 @@ const showModalTheme = ref(false)
</script>
<template>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage src="" :alt="userStore?.user_name" />
<AvatarFallback class="rounded-lg">
{{
userStore?.user_name
?.split(' ')
.map((n) => n[0])
.join('')
}}
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ userStore?.user_name }}</span>
<span class="truncate text-xs">{{ userStore?.user_email }}</span>
</div>
<Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
>
<DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<ClientOnly>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage src="" :alt="userStore?.user_name" />
<AvatarImage src="" :alt="userStore?.user_name || 'system'" />
<AvatarFallback class="rounded-lg">
{{
userStore?.user_name
?.split(' ')
.map((n) => n[0])
.join('')
.join('') || ''
}}
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ userStore?.user_name }}</span>
<span class="truncate text-xs">{{ userStore?.user_email }}</span>
<span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
<span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem @click="showModalTheme = true">
<Icon name="i-lucide-user" />
Profile
<Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
>
<DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage src="" :alt="userStore?.user_name || 'system'" />
<AvatarFallback class="rounded-lg">
{{
userStore?.user_name
?.split(' ')
.map((n) => n[0])
.join('') || ''
}}
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
<span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem @click="showModalTheme = true">
<Icon name="i-lucide-user" />
Profile
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem @click="handleLogout">
<Icon name="i-lucide-log-out" />
Log out
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem @click="handleLogout">
<Icon name="i-lucide-log-out" />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</ClientOnly>
</template>
<style scoped></style>
app/components/layout/SidebarNavGroup.vue
+1 -1
View File
@@ -9,7 +9,7 @@ withDefaults(
}>(),
{
size: 'default',
}
},
)
const { setOpenMobile } = useSidebar()
app/components/layout/SidebarNavLink.vue
+1
View File
@@ -22,6 +22,7 @@ const { setOpenMobile } = useSidebar()
<NuxtLink
:to="item.link"
class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200"
active-class="bg-primary text-white"
@click="setOpenMobile(false)"
>
<Icon :name="item.icon || ''" mode="svg" />
app/components/pub/base/error.vue
+50
View File
@@ -0,0 +1,50 @@
<script setup lang="ts">
defineProps<{
statusCode: number
}>()
const router = useRouter()
</script>
<template>
<div class="h-svh">
<div class="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
<template v-if="statusCode === 403">
<h1 class="text-[7rem] font-bold leading-tight">403</h1>
<span class="font-medium">Access Forbidden</span>
<p class="text-muted-foreground text-center">
You don't have necessary permission <br />
to access this resource.
</p>
</template>
<template v-else-if="statusCode === 404">
<h1 class="text-[7rem] font-bold leading-tight">404</h1>
<span class="font-medium">Page Not Found</span>
<p class="text-muted-foreground text-center">
The page you are looking for <br />
doesn't exist.
</p>
</template>
<template v-else-if="statusCode === 401">
<h1 class="text-[7rem] font-bold leading-tight">401</h1>
<span class="font-medium">Unauthorized Access</span>
<p class="text-muted-foreground text-center">
Please log in with the appropriate credentials <br />
to access this resource.
</p>
</template>
<template v-else>
<h1 class="text-[7rem] font-bold leading-tight">500</h1>
<span class="font-medium">Internal Server Error</span>
<p class="text-muted-foreground text-center">
Something went wrong on our end. <br />
Please try again later.
</p>
</template>
<div class="mt-6 flex gap-4">
<Button variant="outline" @click="router.back()"> Kembali </Button>
<Button @click="router.push('/')"> Kembali Ke Dashboard </Button>
</div>
</div>
</div>
</template>
app/components/pub/form/block.vue
+1 -1
View File
@@ -5,7 +5,7 @@ defineProps<{
</script>
<template>
<div :class="`mb-5 flex-wrap md:flex ${classValExt || ''}`">
<div :class="`m-3 mb-5 flex-wrap md:flex ${classValExt || ''}`">
<slot />
</div>
</template>
app/components/pub/form/field-group.vue
+9 -1
View File
@@ -34,7 +34,15 @@ const classVal = computed(() => {
</script>
<template>
<div :class="classVal">
<div
:class="[
column === 1 ? 'w-full' : column === 2 ? 'pe-4 md:w-1/2' : 'pe-4 md:w-1/3',
density === 'dense' ? '' : 'mb-2 md:mb-2.5 xl:mb-3',
side !== 'break' ? 'md:flex' : '',
position === 'dynamic' ? 'ps-4' : '',
props.class,
]"
>
<slot />
</div>
</template>
app/components/pub/form/label.vue
+72
View File
@@ -0,0 +1,72 @@
<script setup lang="ts">
const props = withDefaults(
defineProps<{
size?: 'default' | 'narrow' | 'wide'
height?: 'default' | 'compact'
position?: 'default' | 'dynamic'
class?: string
}>(),
{
size: 'default',
height: 'default',
position: 'default',
class: '',
},
)
const classVal = computed(() => {
let val = ''
if (props.size === 'narrow') val += 'size-narrow '
else if (props.size === 'wide') val += 'size-wide '
else val += 'size-default '
if (props.height === 'compact') val += 'height-compact '
else val += 'height-default '
if (props.position === 'dynamic') val += 'position-dynamic '
else val += 'position-default '
return (val + (props.class || '')).trim()
})
</script>
<template>
<div class="label" :class="classVal">
<label>
<slot />
</label>
</div>
</template>
<style scoped>
.label {
@apply block flex-shrink-0 shrink-0;
}
.size-default {
@apply w-28 2xl:w-36;
}
.size-narrow {
@apply w-24 2xl:w-28;
}
.size-wide {
@apply w-44 2xl:w-48;
}
.height-default {
@apply pt-2 2xl:pt-2.5;
}
.height-compact {
line-height: 14pt;
}
.position-default {
@apply pe-2 text-start;
}
.position-dynamic > * {
@apply block pe-2.5 md:text-end;
}
</style>
app/components/pub/nav/data-table.vue
+46
View File
@@ -0,0 +1,46 @@
<script setup lang="ts">
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/pub/ui/table'
defineProps<{
rows: unknown[]
cols: object
header: object[]
keys: string[]
funcParsed: object
funcHtml: object
funcComponent: object
}>()
</script>
<template>
<Table>
<TableHeader>
<TableRow>
<TableHead
v-for="(h, idx) in header[0]"
:key="`head-${idx}`"
:style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
>
{{ h.label }}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
<!-- If funcComponent has a renderer -->
<component
:is="funcComponent[key](row, rowIndex).component"
v-if="funcComponent[key]"
v-bind="funcComponent[key](row, rowIndex)"
/>
<!-- If funcParsed or funcHtml returns a value -->
<template v-else>
{{ funcParsed[key]?.(row) ?? funcHtml[key]?.(row) ?? row[key] }}
</template>
</TableCell>
</TableRow>
</TableBody>
</Table>
</template>
app/components/pub/nav/dropdown-action-du.vue
+69
View File
@@ -0,0 +1,69 @@
<script setup lang="ts">
import type { LinkItem, ListItemDto } from './types'
const props = defineProps<{
rec: ListItemDto
}>()
const recId = inject<Ref<number>>('rec_id')!
const recAction = inject<Ref<string>>('rec_action')!
const recItem = inject<Ref<any>>('rec_item')!
function detail() {
recId.value = props.rec.id || 0
recAction.value = 'showDetail'
recItem.value = props.rec
}
function edit() {
recId.value = props.rec.id || 0
recAction.value = 'showEdit'
recItem.value = props.rec
}
const linkItems: LinkItem[] = [
{
label: 'Detail',
onClick: () => {
detail()
},
icon: 'i-lucide-eye',
},
{
label: 'Edit',
onClick: () => {
edit()
},
icon: 'i-lucide-pencil',
},
]
</script>
<template>
<div>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
>
<Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg bg-white" align="end">
<DropdownMenuGroup>
<DropdownMenuItem
v-for="item in linkItems"
:key="item.label"
v-slot="{ active }"
class="hover:bg-gray-100"
@click="item.onClick"
>
<Icon :name="item.icon" />
<span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</template>
app/components/pub/nav/dropdown-action-ducd.vue
+89
View File
@@ -0,0 +1,89 @@
<script setup lang="ts">
import type { LinkItem, ListItemDto } from './types'
const props = defineProps<{
rec: ListItemDto
}>()
const recId = inject<Ref<number>>('rec_id')!
const recAction = inject<Ref<string>>('rec_action')!
const recItem = inject<Ref<any>>('rec_item')!
function detail() {
recId.value = props.rec.id || 0
recAction.value = 'showDetail'
recItem.value = props.rec
}
function edit() {
recId.value = props.rec.id || 0
recAction.value = 'showEdit'
recItem.value = props.rec
}
function del() {
recId.value = props.rec.id || 0
recAction.value = 'showConfirmDel'
recItem.value = props.rec
}
const linkItems: LinkItem[] = [
{
label: 'Detail',
onClick: () => {
detail()
},
icon: 'i-lucide-eye',
},
{
label: 'Edit',
onClick: () => {
edit()
},
icon: 'i-lucide-pencil',
},
{
label: 'Batal',
onClick: () => {
del()
},
icon: 'i-lucide-x',
},
{
label: 'Hapus',
onClick: () => {
del()
},
icon: 'i-lucide-trash',
},
]
</script>
<template>
<div>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
>
<Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg bg-white" align="end">
<DropdownMenuGroup>
<DropdownMenuItem
v-for="item in linkItems"
:key="item.label"
v-slot="{ active }"
class="hover:bg-gray-100"
@click="item.onClick"
>
<Icon :name="item.icon" />
<span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</template>
app/components/pub/nav/dropdown-action-dud.vue
+82
View File
@@ -0,0 +1,82 @@
<script setup lang="ts">
import type { LinkItem, ListItemDto } from './types'
const props = defineProps<{
rec: ListItemDto
}>()
const recId = inject<Ref<number>>('rec_id')!
const recAction = inject<Ref<string>>('rec_action')!
const recItem = inject<Ref<any>>('rec_item')!
function detail() {
recId.value = props.rec.id || 0
recAction.value = 'showDetail'
recItem.value = props.rec
}
function edit() {
recId.value = props.rec.id || 0
recAction.value = 'showEdit'
recItem.value = props.rec
}
function del() {
recId.value = props.rec.id || 0
recAction.value = 'showConfirmDel'
recItem.value = props.rec
}
const linkItems: LinkItem[] = [
{
label: 'Detail',
onClick: () => {
detail()
},
icon: 'i-lucide-eye',
},
{
label: 'Edit',
onClick: () => {
edit()
},
icon: 'i-lucide-pencil',
},
{
label: 'Hapus',
onClick: () => {
del()
},
icon: 'i-lucide-trash',
},
]
</script>
<template>
<div>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
>
<Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg bg-white" align="end">
<DropdownMenuGroup>
<DropdownMenuItem
v-for="item in linkItems"
:key="item.label"
v-slot="{ active }"
class="hover:bg-gray-100"
@click="item.onClick"
>
<Icon :name="item.icon" />
<span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</template>
app/components/pub/nav/dropdown-action-ud.vue
+69
View File
@@ -0,0 +1,69 @@
<script setup lang="ts">
import type { LinkItem, ListItemDto } from './types'
const props = defineProps<{
rec: ListItemDto
}>()
const recId = inject<Ref<number>>('rec_id')!
const recAction = inject<Ref<string>>('rec_action')!
const recItem = inject<Ref<any>>('rec_item')!
function edit() {
recId.value = props.rec.id || 0
recAction.value = 'showEdit'
recItem.value = props.rec
}
function del() {
recId.value = props.rec.id || 0
recAction.value = 'showConfirmDel'
recItem.value = props.rec
}
const linkItems: LinkItem[] = [
{
label: 'Edit',
onClick: () => {
edit()
},
icon: 'i-lucide-pencil',
},
{
label: 'Hapus',
onClick: () => {
del()
},
icon: 'i-lucide-trash',
},
]
</script>
<template>
<div>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
>
<Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg bg-white" align="end">
<DropdownMenuGroup>
<DropdownMenuItem
v-for="item in linkItems"
:key="item.label"
v-slot="{ active }"
class="hover:bg-gray-100"
@click="item.onClick"
>
<Icon :name="item.icon" />
<span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</template>
app/components/pub/nav/footer/cs.vue
+20 -8
View File
@@ -1,12 +1,24 @@
<script setup lang="ts"></script>
<script setup lang="ts">
type ClickType = 'cancel' | 'submit'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
}>()
function onClick(type: ClickType) {
emit('click', type)
}
</script>
<template>
<div class="flex justify-between">
<div>
<Button variant="outline" size="sm">
<Icon name="i-lucide-pencil" class="mr-1" />
Edit
</Button>
</div>
<div class="m-2 flex gap-2 px-2">
<Button class="bg-gray-400" @click="onClick('cancel')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Kembali
</Button>
<Button class="bg-primary" @click="onClick('submit')">
<Icon name="i-lucide-check" class="me-2 align-middle" />
Selesai
</Button>
</div>
</template>
app/components/pub/nav/footer/csd.vue
+28
View File
@@ -0,0 +1,28 @@
<script setup lang="ts">
type ClickType = 'cancel' | 'draft' | 'submit'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
}>()
function onClick(type: ClickType) {
emit('click', type)
}
</script>
<template>
<div class="m-2 flex gap-2 px-2">
<Button class="bg-gray-400" @click="onClick('cancel')">
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
Kembali
</Button>
<Button class="bg-orange-500" variant="outline" @click="onClick('draft')">
<Icon name="i-lucide-file" class="me-2" />
Draf
</Button>
<Button class="bg-primary" @click="onClick('submit')">
<Icon name="i-lucide-check" class="me-2 align-middle" />
Selesai
</Button>
</div>
</template>
app/components/pub/nav/header/prep.vue
+1 -1
View File
@@ -32,7 +32,7 @@ function btnClick() {
<Input
type="text"
placeholder="Search"
class="w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 sm:text-sm"
class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
@click="emitSearchNavClick"
@input="onInput"
/>
app/components/pub/nav/types.ts
+9
View File
@@ -82,3 +82,12 @@ export interface KeyNames {
key: string
label: string
}
export interface LinkItem {
label: string
icon?: string
href?: string // to cover the needs of stating full external origins full url
action?: string // for local paths
onClick?: (event: Event) => void
headerStatus?: boolean
}
app/components/pub/ui/input/Input.vue
+10 -2
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { useVModel } from '@vueuse/core'
import { cn } from '@/lib/utils'
const props = defineProps<{
defaultValue?: string | number
@@ -20,5 +20,13 @@ const modelValue = useVModel(props, 'modelValue', emits, {
</script>
<template>
<input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
<input
v-model="modelValue"
:class="
cn(
'border-input ring-offset-background placeholder:text-muted-foreground flex h-10 w-full rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
props.class,
)
"
/>
</template>
app/composables/useRBAC.ts
+48
View File
@@ -0,0 +1,48 @@
import type { Permission, RoleAccess } from '~/models/role'
/**
* Check if user has access to a page
*/
export function useRBAC() {
// NOTE: this roles was dummy for testing only, it should taken from the user store
// const authStore = useAuthStore()
const checkRole = (roleAccess: RoleAccess, _userRoles?: string[]): boolean => {
const roles = ['admisi']
return roles.some((role: string) => role in roleAccess)
}
const checkPermission = (roleAccess: RoleAccess, permission: Permission, _userRoles?: string[]): boolean => {
const roles = ['admisi']
return roles.some((role: string) => roleAccess[role]?.includes(permission))
}
const getUserPermissions = (roleAccess: RoleAccess, _userRoles?: string[]): Permission[] => {
// const roles = userRoles || authStore.roles
const roles = ['admisi']
const permissions = new Set<Permission>()
roles.forEach((role) => {
if (roleAccess[role]) {
roleAccess[role].forEach((permission) => permissions.add(permission))
}
})
return Array.from(permissions)
}
const hasCreateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'C')
const hasReadAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'R')
const hasUpdateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'U')
const hasDeleteAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'D')
return {
checkRole,
checkPermission,
getUserPermissions,
hasCreateAccess,
hasReadAccess,
hasUpdateAccess,
hasDeleteAccess,
}
}
app/error.vue
+11
View File
@@ -0,0 +1,11 @@
<script setup>
definePageMeta({
layout: 'blank',
})
</script>
<template>
<PubBaseError :status-code="401" />
</template>
<style scoped></style>
app/layouts/default.vue
+80 -3
View File
@@ -1,4 +1,21 @@
<script setup lang="ts"></script>
<script setup lang="ts">
const route = useRoute()
const contentFrame = computed(() => route.meta.contentFrame)
const contentContent = computed(() => {
switch (contentFrame.value) {
case 'cf-container-lg':
return 'cf-frame cf-container-lg-content'
case 'cf-container-md':
return 'cf-frame cf-container-md-content'
case 'cf-container-sm':
return 'cf-frame cf-container-sm-content'
case 'cf-full-width':
return 'cf-frame-width'
default:
return 'cf-frame'
}
})
</script>
<template>
<SidebarProvider>
@@ -6,10 +23,70 @@
<SidebarInset>
<LayoutHeader />
<div class="w-full min-w-0 flex-1 overflow-x-auto p-4 lg:p-6">
<slot />
<div v-if="contentFrame !== 'cf-no-frame'" class="contentFrame">
<div :class="`${contentContent} ${contentFrame}`">
<slot />
</div>
</div>
<slot v-else />
</div>
</SidebarInset>
</SidebarProvider>
</template>
<style scoped></style>
<style scoped>
.cf-container,
.cf-container-lg,
.cf-container-md,
.cf-container-sm {
container-type: inline-size;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 5rem;
}
.cf-container > *,
.cf-container-lg > *,
.cf-container-md > *,
.cf-container-sm > *,
.cf-full-width {
margin-left: auto;
margin-right: auto;
padding: 0.75rem; /* p-3 */
padding-bottom: 5rem; /* pb-20 */
border-width: 1px;
background-color: white !important;
border-color: rgb(226 232 240); /* slate-200 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cf-container-lg > * {
max-width: 992px;
}
.cf-container-md > * {
max-width: 768px;
}
.cf-container-sm > * {
max-width: 576px;
}
.cf-frame-width {
margin-left: auto;
margin-right: auto;
padding: 0.75rem;
background-color: white;
border: 1px solid rgb(226 232 240);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cf-frame {
margin-left: auto;
margin-right: auto;
padding: 0.75rem;
background-color: white;
border: 1px solid rgb(226 232 240);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
app/lib/page-permission.ts
+12
View File
@@ -0,0 +1,12 @@
import type { RoleAccess } from '~/models/role'
export const PAGE_PERMISSIONS = {
'/patient': {
doctor: ['R'],
nurse: ['R'],
admisi: ['C', 'R', 'U', 'D'],
pharmacy: ['R'],
billing: ['R'],
management: ['R'],
},
} as const satisfies Record<string, RoleAccess>
app/middleware/auth.global.ts
+3 -6
View File
@@ -1,4 +1,6 @@
export default defineNuxtRouteMiddleware((to) => {
if (to.meta.public) return
const { $pinia } = useNuxtApp()
if (import.meta.client) {
@@ -7,12 +9,7 @@ export default defineNuxtRouteMiddleware((to) => {
console.log('currRole', userStore.userRole)
console.log('isAuth', userStore.isAuthenticated)
if (!userStore.isAuthenticated) {
return navigateTo('/auth/login')
}
const allowedRoles = to.meta.roles as string[] | undefined
if (allowedRoles && !allowedRoles.includes(userStore.userRole)) {
return navigateTo('/unauthorized')
return navigateTo('/401')
}
}
})
app/middleware/rbac.ts
+31
View File
@@ -0,0 +1,31 @@
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
export default defineNuxtRouteMiddleware((to) => {
if (to.meta.public) return
const { $pinia } = useNuxtApp()
if (import.meta.server) {
const authStore = useUserStore($pinia)
// Check specific page permissions if defined in config
const pagePermissions = PAGE_PERMISSIONS[to.path as keyof typeof PAGE_PERMISSIONS]
if (pagePermissions) {
const { checkRole } = useRBAC()
if (!checkRole(pagePermissions)) {
return navigateTo('/403')
}
}
// Fallback to meta roles
const requiredRoles = to.meta.roles as string[]
if (requiredRoles && requiredRoles.length > 0) {
// FIXME: change this dummy roles, when api is ready
// const userRoles = authStore.roles
const userRoles = ['admisi']
const hasRequiredRole = requiredRoles.some((role) => userRoles.includes(role))
if (!hasRequiredRole) {
return navigateTo('/403')
}
}
}
})
app/models/role.ts
+22
View File
@@ -0,0 +1,22 @@
import type { PAGE_PERMISSIONS } from '~/lib/page-permission'
export interface User {
id: string
name: string
email: string
}
export interface AuthState {
user: User | null
roles: string[]
token: string | null
}
export type Permission = 'C' | 'R' | 'U' | 'D'
export interface RoleAccess {
[role: string]: Permission[]
}
export type PagePath = keyof typeof PAGE_PERMISSIONS
export type PagePermission = (typeof PAGE_PERMISSIONS)[PagePath]
app/pages/(error)/401.vue
+26
View File
@@ -0,0 +1,26 @@
<script setup>
definePageMeta({
layout: 'blank',
})
const router = useRouter()
</script>
<template>
<div class="h-svh">
<div class="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
<h1 class="text-[7rem] font-bold leading-tight">401</h1>
<span class="font-medium">Unauthorized Access</span>
<p class="text-muted-foreground text-center">
Please log in with the appropriate credentials <br />
to access this resource.
</p>
<div class="mt-6 flex gap-4">
<Button variant="outline" @click="router('/auth/login')"> Login </Button>
<Button @click="router.push('/')"> Back to Home </Button>
</div>
</div>
</div>
</template>
<style scoped></style>
app/pages/(error)/403.vue
+34
View File
@@ -0,0 +1,34 @@
<script setup>
definePageMeta({
layout: 'blank',
})
const router = useRouter()
</script>
<template>
<div class="h-svh">
<div class="m-auto h-full w-full flex flex-col items-center justify-center gap-2">
<h1 class="text-[7rem] font-bold leading-tight">
403
</h1>
<span class="font-medium">Access Forbidden</span>
<p class="text-center text-muted-foreground">
You don't have necessary permission <br>
to view this resource.
</p>
<div class="mt-6 flex gap-4">
<Button variant="outline" @click="router.back()">
Go Back
</Button>
<Button @click="router.push('/')">
Back to Home
</Button>
</div>
</div>
</div>
</template>
<style scoped>
</style>
app/pages/(error)/404.vue
+34
View File
@@ -0,0 +1,34 @@
<script setup>
definePageMeta({
layout: 'blank',
})
const router = useRouter()
</script>
<template>
<div class="h-svh">
<div class="m-auto h-full w-full flex flex-col items-center justify-center gap-2">
<h1 class="text-[7rem] font-bold leading-tight">
404
</h1>
<span class="font-medium">Oops! Page Not Found!</span>
<p class="text-center text-muted-foreground">
It seems like the page you're looking for <br>
does not exist or might have been removed.
</p>
<div class="mt-6 flex gap-4">
<Button variant="outline" @click="router.back()">
Go Back
</Button>
<Button @click="router.push('/')">
Back to Home
</Button>
</div>
</div>
</div>
</template>
<style scoped>
</style>
app/pages/(error)/500.vue
+33
View File
@@ -0,0 +1,33 @@
<script setup>
definePageMeta({
layout: 'blank',
})
const router = useRouter()
</script>
<template>
<div class="h-svh">
<div class="m-auto h-full w-full flex flex-col items-center justify-center gap-2">
<h1 class="text-[7rem] font-bold leading-tight">
500
</h1>
<span class="font-medium">Oops! Something went wrong :')</span>
<p class="text-center text-muted-foreground">
We apologize for the inconvenience. <br> Please try again later.
</p>
<div class="mt-6 flex gap-4">
<Button variant="outline" @click="router.back()">
Go Back
</Button>
<Button @click="router.push('/')">
Back to Home
</Button>
</div>
</div>
</div>
</template>
<style scoped>
</style>
app/pages/(error)/503.vue
+26
View File
@@ -0,0 +1,26 @@
<script setup>
definePageMeta({
layout: 'blank',
})
const router = useRouter()
</script>
<template>
<div class="h-svh">
<div class="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
<h1 class="text-[7rem] font-bold leading-tight">503</h1>
<span class="font-medium">Website is under maintenance!</span>
<p class="text-muted-foreground text-center">
The site is not available at the moment. <br />
We'll be back online shortly.
</p>
<div class="mt-6 flex gap-4">
<Button variant="outline" @click="router.back()"> Go Back </Button>
<Button @click="router.push('/')"> Back to Home </Button>
</div>
</div>
</div>
</template>
<style scoped></style>
app/pages/(features)/patient/add.vue
+27 -2
View File
@@ -1,9 +1,34 @@
<script setup lang="ts">
import type { PagePermission } from '~/models/role'
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
definePageMeta({
roles: ['sys', 'doc'],
middleware: ['rbac'],
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
pageTitle: 'Patient',
contentFrame: 'cf-full-width',
})
const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
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>
<FlowPatientAdd />
<div v-if="canCreate">
<FlowPatientAdd />
</div>
<PubBaseError v-else :status-code="403" />
</template>
app/pages/(features)/patient/index.vue
+26 -2
View File
@@ -1,11 +1,35 @@
<script setup lang="ts">
import type { PagePermission } from '~/models/role'
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
definePageMeta({
roles: ['sys', 'doc'],
middleware: ['rbac'],
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
pageTitle: 'Patient',
contentFrame: 'cf-full-width',
})
const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
const { checkRole, hasReadAccess } = useRBAC()
// Check if user has access to this page
const hasAccess = checkRole(roleAccess)
if (!hasAccess) {
navigateTo('/403')
}
// Define permission-based computed properties
const canRead = hasReadAccess(roleAccess)
</script>
<template>
<div>
<FlowPatientList />
<div v-if="canRead">
<FlowPatientList />
</div>
<div v-else>
<p>You don't have permission to view patient records.</p>
</div>
</div>
</template>
app/pages/auth/login.vue
+1
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
definePageMeta({
layout: 'blank',
public: true,
})
</script>
eslint.config.js
+4 -4
View File
@@ -18,14 +18,14 @@ export default withNuxt(
{
rules: {
// Basic rules
quotes: ['error', 'single', { avoidEscape: true }],
'quotes': ['error', 'single', { avoidEscape: true }],
'style/no-trailing-spaces': ['error', { ignoreComments: true }],
'no-console': 'off',
// Relax strict formatting rules
'style/brace-style': 'off', // Allow inline if
curly: ['error', 'multi-line'], // Only require braces for multi-line
'curly': ['error', 'multi-line'], // Only require braces for multi-line
'style/arrow-parens': 'off',
// UnoCSS - make it warning instead of error, or disable completely
@@ -48,6 +48,6 @@ export default withNuxt(
rules: {
'style/no-trailing-spaces': 'off',
},
}
)
},
),
)
package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "nuxt-app",
"private": true,
"type": "module",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
server/api/[...req].ts
+1 -1
View File
@@ -23,7 +23,7 @@ export default defineEventHandler(async (event) => {
if (headers['content-type']) forwardHeaders.set('Content-Type', headers['content-type'])
forwardHeaders.set('Authorization', `Bearer ${bearer}`)
let body: any = undefined
let body: any
if (['POST', 'PATCH'].includes(method!)) {
if (headers['content-type']?.includes('multipart/form-data')) {
body = await readBody(event)
uno.config.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { defineConfig, presetWind, presetAttributify, presetIcons } from 'unocss'
import { defineConfig, presetAttributify, presetIcons, presetWind } from 'unocss'
export default defineConfig({
presets: [