✨ feat (rbac): implement role-based access control

app/components/app/patient/entry-form.vue

@@ -1,9 +1,38 @@
-<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">
+      <!-- <i class="bi bi-file-earmark-person"></i>  -->
+      <Icon name="i-lucide-user" />
+      <span class="font-semibold">Tambah</span> Pasien
+    </div>
 
-  <div>
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-    <PubNavFooterCs />
+      <div>
-  </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">
+      <PubNavFooterCs />
+    </div>
+  </form>
 </template>

app/components/layout/Header.vue

@@ -37,7 +37,7 @@ watch(
     if (val) {
       links.value = setLinks()
     }
-  }
+  },
 )
 </script>
 

app/components/pub/form/block.vue

@@ -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

@@ -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

@@ -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/footer/cs.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="flex justify-between">
+  <div class="flex justify-between px-2">
     <div>
-      <Button variant="outline" size="sm">
+      <Button variant="outline">
         <Icon name="i-lucide-pencil" class="mr-1" />
         Edit
       </Button>

app/components/pub/ui/input/Input.vue

@@ -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 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

@@ -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/layouts/default.vue

@@ -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

@@ -0,0 +1,10 @@
+export const PAGE_PERMISSIONS = {
+  '/patient': {
+    doctor: ['R'],
+    nurse: ['R'],
+    admisi: ['C', 'R', 'U', 'D'],
+    pharmacy: ['R'],
+    billing: ['R'],
+    management: ['R'],
+  },
+} as const

app/middleware/auth.global.ts

@@ -1,4 +1,6 @@
 export default defineNuxtRouteMiddleware((to) => {
+  if (to.meta.public) return
+
   const { $pinia } = useNuxtApp()
 
   if (import.meta.client) {
@@ -10,9 +12,13 @@ export default defineNuxtRouteMiddleware((to) => {
       return navigateTo('/auth/login')
     }
 
-    const allowedRoles = to.meta.roles as string[] | undefined
+    // const allowedRoles = to.meta.roles as string[] | undefined
-    if (allowedRoles && !allowedRoles.includes(userStore.userRole)) {
+    // if (allowedRoles && !allowedRoles.includes(userStore.userRole)) {
-      return navigateTo('/unauthorized')
+    //   return navigateTo('/unauthorized')
-    }
+    // }
+    // const allowedRoles = to.meta.roles as string[] | undefined
+    // if (allowedRoles && !userStore.userRole.some((r) => allowedRoles.includes(r))) {
+    //   return navigateTo('/unauthorized')
+    // }
   }
 })

app/middleware/rbac.ts

@@ -0,0 +1,37 @@
+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)) {
+        throw createError({
+          statusCode: 403,
+          statusMessage: 'Forbidden - Insufficient permissions for this page',
+        })
+      }
+    }
+
+    // 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) {
+        throw createError({
+          statusCode: 403,
+          statusMessage: 'Forbidden - Insufficient role permissions',
+        })
+      }
+    }
+  }
+})

app/models/role.ts

@@ -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/(features)/patient/add.vue

@@ -1,9 +1,36 @@
 <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>
+  <div v-else>
+    <p>You don't have permission to create patient records.</p>
+  </div>
 </template>

app/pages/(features)/patient/index.vue

@@ -1,11 +1,38 @@
 <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) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// 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,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: 'blank',
+  public: true,
 })
 </script>