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

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>