From 125d7857ce7401e685a0f52fbbd6fd948b9aefa8 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 12 Aug 2025 11:32:36 +0700
Subject: [PATCH 1/8] =?UTF-8?q?=E2=9C=A8=20feat=20(rbac):=20implement=20ro?=
 =?UTF-8?q?le-based=20access=20control?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/app/patient/entry-form.vue | 39 +++++++++--
 app/components/layout/Header.vue          |  2 +-
 app/components/pub/form/block.vue         |  2 +-
 app/components/pub/form/field-group.vue   | 10 ++-
 app/components/pub/form/label.vue         | 72 ++++++++++++++++++++
 app/components/pub/nav/footer/cs.vue      |  4 +-
 app/components/pub/ui/input/Input.vue     | 10 ++-
 app/composables/useRBAC.ts                | 48 +++++++++++++
 app/layouts/default.vue                   | 83 ++++++++++++++++++++++-
 app/lib/page-permission.ts                | 10 +++
 app/middleware/auth.global.ts             | 14 ++--
 app/middleware/rbac.ts                    | 37 ++++++++++
 app/models/role.ts                        | 22 ++++++
 app/pages/(features)/patient/add.vue      | 31 ++++++++-
 app/pages/(features)/patient/index.vue    | 31 ++++++++-
 app/pages/auth/login.vue                  |  1 +
 16 files changed, 394 insertions(+), 22 deletions(-)
 create mode 100644 app/components/pub/form/label.vue
 create mode 100644 app/composables/useRBAC.ts
 create mode 100644 app/lib/page-permission.ts
 create mode 100644 app/middleware/rbac.ts
 create mode 100644 app/models/role.ts

diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
index 89d8b1bf..b75af1c3 100644
--- a/app/components/app/patient/entry-form.vue
+++ b/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>
-    <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">
+      <PubNavFooterCs />
+    </div>
+  </form>
 </template>
diff --git a/app/components/layout/Header.vue b/app/components/layout/Header.vue
index 1da0a9ac..369b29ea 100644
--- a/app/components/layout/Header.vue
+++ b/app/components/layout/Header.vue
@@ -37,7 +37,7 @@ watch(
     if (val) {
       links.value = setLinks()
     }
-  }
+  },
 )
 </script>
 
diff --git a/app/components/pub/form/block.vue b/app/components/pub/form/block.vue
index 5f4988d5..27015f7a 100644
--- a/app/components/pub/form/block.vue
+++ b/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>
diff --git a/app/components/pub/form/field-group.vue b/app/components/pub/form/field-group.vue
index 8e901636..784870a7 100644
--- a/app/components/pub/form/field-group.vue
+++ b/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>
diff --git a/app/components/pub/form/label.vue b/app/components/pub/form/label.vue
new file mode 100644
index 00000000..b1ad2d55
--- /dev/null
+++ b/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>
diff --git a/app/components/pub/nav/footer/cs.vue b/app/components/pub/nav/footer/cs.vue
index 96725a05..c7786b76 100644
--- a/app/components/pub/nav/footer/cs.vue
+++ b/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>
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 81140b40..30d3ca1e 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/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>
diff --git a/app/composables/useRBAC.ts b/app/composables/useRBAC.ts
new file mode 100644
index 00000000..6228f37f
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index d63792ae..6e6c32ce 100644
--- a/app/layouts/default.vue
+++ b/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>
diff --git a/app/lib/page-permission.ts b/app/lib/page-permission.ts
new file mode 100644
index 00000000..a31edd64
--- /dev/null
+++ b/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
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index e3b98900..8beb23c0 100644
--- a/app/middleware/auth.global.ts
+++ b/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
-    if (allowedRoles && !allowedRoles.includes(userStore.userRole)) {
-      return navigateTo('/unauthorized')
-    }
+    // const allowedRoles = to.meta.roles as string[] | undefined
+    // if (allowedRoles && !allowedRoles.includes(userStore.userRole)) {
+    //   return navigateTo('/unauthorized')
+    // }
+    // const allowedRoles = to.meta.roles as string[] | undefined
+    // if (allowedRoles && !userStore.userRole.some((r) => allowedRoles.includes(r))) {
+    //   return navigateTo('/unauthorized')
+    // }
   }
 })
diff --git a/app/middleware/rbac.ts b/app/middleware/rbac.ts
new file mode 100644
index 00000000..08f5c924
--- /dev/null
+++ b/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',
+        })
+      }
+    }
+  }
+})
diff --git a/app/models/role.ts b/app/models/role.ts
new file mode 100644
index 00000000..6c6097a9
--- /dev/null
+++ b/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]
diff --git a/app/pages/(features)/patient/add.vue b/app/pages/(features)/patient/add.vue
index 12063ef7..f71f712a 100644
--- a/app/pages/(features)/patient/add.vue
+++ b/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>
diff --git a/app/pages/(features)/patient/index.vue b/app/pages/(features)/patient/index.vue
index f1db5b53..cddf202f 100644
--- a/app/pages/(features)/patient/index.vue
+++ b/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>
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index eb157c8c..b2e8f89a 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: 'blank',
+  public: true,
 })
 </script>
 

From dc5e7d48da81b2c4274f52531aca698204b9f204 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 12 Aug 2025 13:16:07 +0700
Subject: [PATCH 2/8] =?UTF-8?q?=E2=9C=A8=20feat=20(error-pages):=20add=20c?=
 =?UTF-8?q?ustom=20error=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/error.vue                          | 26 ++++++++++++++++++++
 app/middleware/auth.global.ts          |  2 +-
 app/middleware/rbac.ts                 | 10 ++------
 app/pages/(error)/401.vue              | 26 ++++++++++++++++++++
 app/pages/(error)/403.vue              | 34 ++++++++++++++++++++++++++
 app/pages/(error)/404.vue              | 34 ++++++++++++++++++++++++++
 app/pages/(error)/500.vue              | 33 +++++++++++++++++++++++++
 app/pages/(error)/503.vue              | 26 ++++++++++++++++++++
 app/pages/(features)/patient/index.vue |  5 +---
 9 files changed, 183 insertions(+), 13 deletions(-)
 create mode 100644 app/error.vue
 create mode 100644 app/pages/(error)/401.vue
 create mode 100644 app/pages/(error)/403.vue
 create mode 100644 app/pages/(error)/404.vue
 create mode 100644 app/pages/(error)/500.vue
 create mode 100644 app/pages/(error)/503.vue

diff --git a/app/error.vue b/app/error.vue
new file mode 100644
index 00000000..bf6e0799
--- /dev/null
+++ b/app/error.vue
@@ -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">404</h1>
+      <span class="font-medium">Oops! Page Not Found!</span>
+      <p class="text-muted-foreground text-center">
+        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>
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index 8beb23c0..e254a754 100644
--- a/app/middleware/auth.global.ts
+++ b/app/middleware/auth.global.ts
@@ -9,7 +9,7 @@ export default defineNuxtRouteMiddleware((to) => {
     console.log('currRole', userStore.userRole)
     console.log('isAuth', userStore.isAuthenticated)
     if (!userStore.isAuthenticated) {
-      return navigateTo('/auth/login')
+      return navigateTo('/401')
     }
 
     // const allowedRoles = to.meta.roles as string[] | undefined
diff --git a/app/middleware/rbac.ts b/app/middleware/rbac.ts
index 08f5c924..8528c2ca 100644
--- a/app/middleware/rbac.ts
+++ b/app/middleware/rbac.ts
@@ -11,10 +11,7 @@ export default defineNuxtRouteMiddleware((to) => {
     if (pagePermissions) {
       const { checkRole } = useRBAC()
       if (!checkRole(pagePermissions)) {
-        throw createError({
-          statusCode: 403,
-          statusMessage: 'Forbidden - Insufficient permissions for this page',
-        })
+        return navigateTo('/403')
       }
     }
 
@@ -27,10 +24,7 @@ export default defineNuxtRouteMiddleware((to) => {
       const hasRequiredRole = requiredRoles.some((role) => userRoles.includes(role))
 
       if (!hasRequiredRole) {
-        throw createError({
-          statusCode: 403,
-          statusMessage: 'Forbidden - Insufficient role permissions',
-        })
+        return navigateTo('/403')
       }
     }
   }
diff --git a/app/pages/(error)/401.vue b/app/pages/(error)/401.vue
new file mode 100644
index 00000000..b60f313f
--- /dev/null
+++ b/app/pages/(error)/401.vue
@@ -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>
diff --git a/app/pages/(error)/403.vue b/app/pages/(error)/403.vue
new file mode 100644
index 00000000..985bc412
--- /dev/null
+++ b/app/pages/(error)/403.vue
@@ -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>
diff --git a/app/pages/(error)/404.vue b/app/pages/(error)/404.vue
new file mode 100644
index 00000000..a857fca1
--- /dev/null
+++ b/app/pages/(error)/404.vue
@@ -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>
diff --git a/app/pages/(error)/500.vue b/app/pages/(error)/500.vue
new file mode 100644
index 00000000..7c6cb120
--- /dev/null
+++ b/app/pages/(error)/500.vue
@@ -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>
diff --git a/app/pages/(error)/503.vue b/app/pages/(error)/503.vue
new file mode 100644
index 00000000..ccd86c2c
--- /dev/null
+++ b/app/pages/(error)/503.vue
@@ -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>
diff --git a/app/pages/(features)/patient/index.vue b/app/pages/(features)/patient/index.vue
index cddf202f..13e0c451 100644
--- a/app/pages/(features)/patient/index.vue
+++ b/app/pages/(features)/patient/index.vue
@@ -16,10 +16,7 @@ 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',
-  })
+  navigateTo('/403')
 }
 
 // Define permission-based computed properties

From adf189dab994d6a0d5c4f8ef2d5ddc85e9360b1a Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 12 Aug 2025 14:03:07 +0700
Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=90=9B=20fix=20(sidebar):=20fix=20sid?=
 =?UTF-8?q?ebar=20user=20info=20when=20user=20is=20not=20logged=20in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/layout/SidebarNavFooter.vue | 112 +++++++++++----------
 1 file changed, 57 insertions(+), 55 deletions(-)

diff --git a/app/components/layout/SidebarNavFooter.vue b/app/components/layout/SidebarNavFooter.vue
index d3b4552e..0e07e822 100644
--- a/app/components/layout/SidebarNavFooter.vue
+++ b/app/components/layout/SidebarNavFooter.vue
@@ -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>

From 500cdb6a21c019c922c2cdd1ef371e8121be9e60 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 12 Aug 2025 14:18:20 +0700
Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=90=9B=20fix=20(input):=20correct=20i?=
 =?UTF-8?q?nput=20border=20color=20and=20search=20input=20border?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/pub/nav/header/prep.vue | 2 +-
 app/components/pub/ui/input/Input.vue  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/pub/nav/header/prep.vue b/app/components/pub/nav/header/prep.vue
index 8d856333..ab37900d 100644
--- a/app/components/pub/nav/header/prep.vue
+++ b/app/components/pub/nav/header/prep.vue
@@ -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"
           />
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 30d3ca1e..2c7e0141 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/app/components/pub/ui/input/Input.vue
@@ -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
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     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',
+        '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,
       )
     "

From 7ae9a9adfe6c790799c65c2c9148d01ac6088e96 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 12 Aug 2025 17:01:50 +0700
Subject: [PATCH 5/8] =?UTF-8?q?=E2=9C=A8=20feat=20(patient):=20implement?=
 =?UTF-8?q?=20patient=20list=20and=20entry=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/app/patient/entry-form.vue     |   5 +-
 app/components/app/patient/list-cfg.ts        | 118 ++++++++++++++++++
 app/components/app/patient/list.vue           |  19 +++
 app/components/flow/patient/list.vue          |  20 ++-
 app/components/pub/nav/data-table.vue         |  46 +++++++
 .../pub/nav/dropdown-action-dud.vue           |  82 ++++++++++++
 app/components/pub/nav/footer/cs.vue          |  28 +++--
 app/components/pub/nav/footer/csd.vue         |  28 +++++
 app/components/pub/nav/types.ts               |   9 ++
 9 files changed, 342 insertions(+), 13 deletions(-)
 create mode 100644 app/components/app/patient/list-cfg.ts
 create mode 100644 app/components/pub/nav/data-table.vue
 create mode 100644 app/components/pub/nav/dropdown-action-dud.vue
 create mode 100644 app/components/pub/nav/footer/csd.vue

diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
index b75af1c3..0b636bcf 100644
--- a/app/components/app/patient/entry-form.vue
+++ b/app/components/app/patient/entry-form.vue
@@ -8,8 +8,7 @@ import Label from '~/components/pub/form/label.vue'
 <template>
   <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" />
+      <Icon name="i-lucide-user" class="me-2" />
       <span class="font-semibold">Tambah</span> Pasien
     </div>
 
@@ -32,7 +31,7 @@ import Label from '~/components/pub/form/label.vue'
       </div>
     </div>
     <div class="my-2 flex justify-end py-2">
-      <PubNavFooterCs />
+      <PubNavFooterCsd />
     </div>
   </form>
 </template>
diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
new file mode 100644
index 00000000..c1131bec
--- /dev/null
+++ b/app/components/app/patient/list-cfg.ts
@@ -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 '-'
+  },
+}
diff --git a/app/components/app/patient/list.vue b/app/components/app/patient/list.vue
index e69de29b..d2f74529 100644
--- a/app/components/app/patient/list.vue
+++ b/app/components/app/patient/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, header, keys, funcParsed, funcHtml, funcComponent } 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>
diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 0cae3161..cde5209c 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const data = ref([])
+
 const refSearchNav = {
   onClick: () => {
     // open filter modal
@@ -11,6 +13,10 @@ const refSearchNav = {
   },
 }
 
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
 const hreaderPrep: HeaderPrep = {
   title: 'Pasien',
   icon: 'bi bi-journal-check',
@@ -22,15 +28,25 @@ const hreaderPrep: HeaderPrep = {
 
 // NOTE: example api
 async function getPatientList() {
-  const { data } = await xfetch('/api/v1/patient')
-  console.log('data patient', data)
+  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(() => {
   getPatientList()
 })
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
 </script>
 
 <template>
   <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" icon="i-lucide-add" />
+  <div>
+    <AppPatientList :data="data" />
+  </div>
 </template>
diff --git a/app/components/pub/nav/data-table.vue b/app/components/pub/nav/data-table.vue
new file mode 100644
index 00000000..5477c734
--- /dev/null
+++ b/app/components/pub/nav/data-table.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Table, TableBody, TableCaption, 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
+            v-if="funcComponent[key]"
+            :is="funcComponent[key](row, rowIndex).component"
+            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>
diff --git a/app/components/pub/nav/dropdown-action-dud.vue b/app/components/pub/nav/dropdown-action-dud.vue
new file mode 100644
index 00000000..dfba60e0
--- /dev/null
+++ b/app/components/pub/nav/dropdown-action-dud.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { ListItemDto, LinkItem } 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>
diff --git a/app/components/pub/nav/footer/cs.vue b/app/components/pub/nav/footer/cs.vue
index c7786b76..d51bf74a 100644
--- a/app/components/pub/nav/footer/cs.vue
+++ b/app/components/pub/nav/footer/cs.vue
@@ -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 px-2">
-    <div>
-      <Button variant="outline">
-        <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>
diff --git a/app/components/pub/nav/footer/csd.vue b/app/components/pub/nav/footer/csd.vue
new file mode 100644
index 00000000..78874932
--- /dev/null
+++ b/app/components/pub/nav/footer/csd.vue
@@ -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>
diff --git a/app/components/pub/nav/types.ts b/app/components/pub/nav/types.ts
index 91b53410..aa4d130b 100644
--- a/app/components/pub/nav/types.ts
+++ b/app/components/pub/nav/types.ts
@@ -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
+}

From d0e55217ed4902c28bae4fb4891963816a83f222 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 12 Aug 2025 17:07:10 +0700
Subject: [PATCH 6/8] =?UTF-8?q?=E2=9C=A8=20feat=20(pub/nav):=20add=20dropd?=
 =?UTF-8?q?own=20action=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/pub/nav/dropdown-action-du.vue | 69 ++++++++++++++
 .../pub/nav/dropdown-action-ducd.vue          | 89 +++++++++++++++++++
 app/components/pub/nav/dropdown-action-ud.vue | 69 ++++++++++++++
 3 files changed, 227 insertions(+)
 create mode 100644 app/components/pub/nav/dropdown-action-du.vue
 create mode 100644 app/components/pub/nav/dropdown-action-ducd.vue
 create mode 100644 app/components/pub/nav/dropdown-action-ud.vue

diff --git a/app/components/pub/nav/dropdown-action-du.vue b/app/components/pub/nav/dropdown-action-du.vue
new file mode 100644
index 00000000..4253a675
--- /dev/null
+++ b/app/components/pub/nav/dropdown-action-du.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ListItemDto, LinkItem } 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>
diff --git a/app/components/pub/nav/dropdown-action-ducd.vue b/app/components/pub/nav/dropdown-action-ducd.vue
new file mode 100644
index 00000000..24f11fa8
--- /dev/null
+++ b/app/components/pub/nav/dropdown-action-ducd.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { ListItemDto, LinkItem } 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>
diff --git a/app/components/pub/nav/dropdown-action-ud.vue b/app/components/pub/nav/dropdown-action-ud.vue
new file mode 100644
index 00000000..a3c4bac5
--- /dev/null
+++ b/app/components/pub/nav/dropdown-action-ud.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ListItemDto, LinkItem } 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>

From 6e5d5863abd458451a71909bf1ec76938bfced4a Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 12 Aug 2025 18:17:13 +0700
Subject: [PATCH 7/8] =?UTF-8?q?=E2=9C=A8=20feat=20(sidebar):=20add=20activ?=
 =?UTF-8?q?e=20class=20to=20sidebar=20links?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/layout/SidebarNavLink.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/layout/SidebarNavLink.vue b/app/components/layout/SidebarNavLink.vue
index b720b3be..55b0d2b5 100644
--- a/app/components/layout/SidebarNavLink.vue
+++ b/app/components/layout/SidebarNavLink.vue
@@ -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" />

From db9a87d825b25fccc0b8ce333cea66783cf2410f Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 13 Aug 2025 10:12:12 +0700
Subject: [PATCH 8/8] =?UTF-8?q?=E2=9C=A8=20feat=20(patient):=20add=20error?=
 =?UTF-8?q?=20page=20for=20patient=20add=20page=20permission?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     | 19 +++++--
 app/components/app/patient/list.vue           |  2 +-
 app/components/flow/patient/list.vue          |  2 +-
 app/components/layout/SidebarNavGroup.vue     |  2 +-
 app/components/pub/base/error.vue             | 50 +++++++++++++++++++
 app/components/pub/nav/data-table.vue         |  6 +--
 app/components/pub/nav/dropdown-action-du.vue |  2 +-
 .../pub/nav/dropdown-action-ducd.vue          |  2 +-
 .../pub/nav/dropdown-action-dud.vue           |  2 +-
 app/components/pub/nav/dropdown-action-ud.vue |  2 +-
 app/error.vue                                 | 17 +------
 app/lib/page-permission.ts                    |  4 +-
 app/middleware/auth.global.ts                 |  9 ----
 app/pages/(features)/patient/add.vue          |  4 +-
 eslint.config.js                              |  8 +--
 package.json                                  |  2 +-
 server/api/[...req].ts                        |  2 +-
 uno.config.ts                                 |  2 +-
 18 files changed, 88 insertions(+), 49 deletions(-)
 create mode 100644 app/components/pub/base/error.vue

diff --git a/README.md b/README.md
index 4b3f181a..1094dab9 100644
--- a/README.md
+++ b/README.md
@@ -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
diff --git a/app/components/app/patient/list.vue b/app/components/app/patient/list.vue
index d2f74529..3267842c 100644
--- a/app/components/app/patient/list.vue
+++ b/app/components/app/patient/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, header, keys, funcParsed, funcHtml, funcComponent } from './list-cfg.ts'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg.ts'
 
 defineProps<{
   data: any[]
diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index cde5209c..4304db06 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -31,7 +31,7 @@ async function getPatientList() {
   const resp = await xfetch('/api/v1/patient')
   console.log('data patient', resp)
   if (resp.success) {
-    data.value = (resp.body as Record<string, any>)['data']
+    data.value = (resp.body as Record<string, any>).data
   }
 }
 
diff --git a/app/components/layout/SidebarNavGroup.vue b/app/components/layout/SidebarNavGroup.vue
index f129edef..e6c74ee6 100644
--- a/app/components/layout/SidebarNavGroup.vue
+++ b/app/components/layout/SidebarNavGroup.vue
@@ -9,7 +9,7 @@ withDefaults(
   }>(),
   {
     size: 'default',
-  }
+  },
 )
 
 const { setOpenMobile } = useSidebar()
diff --git a/app/components/pub/base/error.vue b/app/components/pub/base/error.vue
new file mode 100644
index 00000000..c1ebc354
--- /dev/null
+++ b/app/components/pub/base/error.vue
@@ -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>
diff --git a/app/components/pub/nav/data-table.vue b/app/components/pub/nav/data-table.vue
index 5477c734..9dc72099 100644
--- a/app/components/pub/nav/data-table.vue
+++ b/app/components/pub/nav/data-table.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/pub/ui/table'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/pub/ui/table'
 
 defineProps<{
   rows: unknown[]
@@ -19,7 +19,7 @@ defineProps<{
         <TableHead
           v-for="(h, idx) in header[0]"
           :key="`head-${idx}`"
-          :style="{ width: cols[idx]?.width ? cols[idx].width + 'px' : undefined }"
+          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
         >
           {{ h.label }}
         </TableHead>
@@ -31,8 +31,8 @@ defineProps<{
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
           <!-- If funcComponent has a renderer -->
           <component
-            v-if="funcComponent[key]"
             :is="funcComponent[key](row, rowIndex).component"
+            v-if="funcComponent[key]"
             v-bind="funcComponent[key](row, rowIndex)"
           />
           <!-- If funcParsed or funcHtml returns a value -->
diff --git a/app/components/pub/nav/dropdown-action-du.vue b/app/components/pub/nav/dropdown-action-du.vue
index 4253a675..52c999fb 100644
--- a/app/components/pub/nav/dropdown-action-du.vue
+++ b/app/components/pub/nav/dropdown-action-du.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ListItemDto, LinkItem } from './types'
+import type { LinkItem, ListItemDto } from './types'
 
 const props = defineProps<{
   rec: ListItemDto
diff --git a/app/components/pub/nav/dropdown-action-ducd.vue b/app/components/pub/nav/dropdown-action-ducd.vue
index 24f11fa8..a4073a93 100644
--- a/app/components/pub/nav/dropdown-action-ducd.vue
+++ b/app/components/pub/nav/dropdown-action-ducd.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ListItemDto, LinkItem } from './types'
+import type { LinkItem, ListItemDto } from './types'
 
 const props = defineProps<{
   rec: ListItemDto
diff --git a/app/components/pub/nav/dropdown-action-dud.vue b/app/components/pub/nav/dropdown-action-dud.vue
index dfba60e0..5a9c30a9 100644
--- a/app/components/pub/nav/dropdown-action-dud.vue
+++ b/app/components/pub/nav/dropdown-action-dud.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ListItemDto, LinkItem } from './types'
+import type { LinkItem, ListItemDto } from './types'
 
 const props = defineProps<{
   rec: ListItemDto
diff --git a/app/components/pub/nav/dropdown-action-ud.vue b/app/components/pub/nav/dropdown-action-ud.vue
index a3c4bac5..0ef020d7 100644
--- a/app/components/pub/nav/dropdown-action-ud.vue
+++ b/app/components/pub/nav/dropdown-action-ud.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ListItemDto, LinkItem } from './types'
+import type { LinkItem, ListItemDto } from './types'
 
 const props = defineProps<{
   rec: ListItemDto
diff --git a/app/error.vue b/app/error.vue
index bf6e0799..27c04cc0 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -2,25 +2,10 @@
 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">404</h1>
-      <span class="font-medium">Oops! Page Not Found!</span>
-      <p class="text-muted-foreground text-center">
-        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>
+  <PubBaseError :status-code="401" />
 </template>
 
 <style scoped></style>
diff --git a/app/lib/page-permission.ts b/app/lib/page-permission.ts
index a31edd64..797dd077 100644
--- a/app/lib/page-permission.ts
+++ b/app/lib/page-permission.ts
@@ -1,3 +1,5 @@
+import type { RoleAccess } from '~/models/role'
+
 export const PAGE_PERMISSIONS = {
   '/patient': {
     doctor: ['R'],
@@ -7,4 +9,4 @@ export const PAGE_PERMISSIONS = {
     billing: ['R'],
     management: ['R'],
   },
-} as const
+} as const satisfies Record<string, RoleAccess>
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index e254a754..e2b76d91 100644
--- a/app/middleware/auth.global.ts
+++ b/app/middleware/auth.global.ts
@@ -11,14 +11,5 @@ export default defineNuxtRouteMiddleware((to) => {
     if (!userStore.isAuthenticated) {
       return navigateTo('/401')
     }
-
-    // const allowedRoles = to.meta.roles as string[] | undefined
-    // if (allowedRoles && !allowedRoles.includes(userStore.userRole)) {
-    //   return navigateTo('/unauthorized')
-    // }
-    // const allowedRoles = to.meta.roles as string[] | undefined
-    // if (allowedRoles && !userStore.userRole.some((r) => allowedRoles.includes(r))) {
-    //   return navigateTo('/unauthorized')
-    // }
   }
 })
diff --git a/app/pages/(features)/patient/add.vue b/app/pages/(features)/patient/add.vue
index f71f712a..30b25cf4 100644
--- a/app/pages/(features)/patient/add.vue
+++ b/app/pages/(features)/patient/add.vue
@@ -30,7 +30,5 @@ const canCreate = hasCreateAccess(roleAccess)
   <div v-if="canCreate">
     <FlowPatientAdd />
   </div>
-  <div v-else>
-    <p>You don't have permission to create patient records.</p>
-  </div>
+  <PubBaseError v-else :status-code="403" />
 </template>
diff --git a/eslint.config.js b/eslint.config.js
index e786c1c0..4879bee5 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -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',
       },
-    }
-  )
+    },
+  ),
 )
diff --git a/package.json b/package.json
index a77d07a3..74a2234b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nuxt-app",
-  "private": true,
   "type": "module",
+  "private": true,
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
diff --git a/server/api/[...req].ts b/server/api/[...req].ts
index 88e27d59..3fd45b16 100644
--- a/server/api/[...req].ts
+++ b/server/api/[...req].ts
@@ -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)
diff --git a/uno.config.ts b/uno.config.ts
index 48e7c051..fb109dd6 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig, presetWind, presetAttributify, presetIcons } from 'unocss'
+import { defineConfig, presetAttributify, presetIcons, presetWind } from 'unocss'
 
 export default defineConfig({
   presets: [