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] =?UTF-8?q?=E2=9C=A8=20feat=20(error-pages):=20add=20custo?=
 =?UTF-8?q?m=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