From d8d7d61fca1be903bec1ac6e9b03abed6ea39bae Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 13 Aug 2025 13:17:21 +0700
Subject: [PATCH 1/8] =?UTF-8?q?=E2=9A=A1=20enhance=20(auth):=20clear=20sto?=
 =?UTF-8?q?re=20on=20401=20and=20redirect=20to=20/401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/flow/patient/list.vue |  1 -
 app/components/pub/base/error.vue    |  3 ++-
 app/composables/useXfetch.ts         | 11 +++++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 8537ce3b..82c23eb5 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -6,7 +6,6 @@ import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
 const data = ref([])
 
 const refSearchNav: RefSearchNav = {
-
   onClick: () => {
     // open filter modal
   },
diff --git a/app/components/pub/base/error.vue b/app/components/pub/base/error.vue
index c1ebc354..7f7bc4ea 100644
--- a/app/components/pub/base/error.vue
+++ b/app/components/pub/base/error.vue
@@ -43,7 +43,8 @@ const router = useRouter()
       </template>
       <div class="mt-6 flex gap-4">
         <Button variant="outline" @click="router.back()"> Kembali </Button>
-        <Button @click="router.push('/')"> Kembali Ke Dashboard </Button>
+        <Button v-if="statusCode === 401" @click="router.push('/auth/login')">Login</Button>
+        <Button v-else @click="router.push('/')">Kembali ke Dashboard</Button>
       </div>
     </div>
   </div>
diff --git a/app/composables/useXfetch.ts b/app/composables/useXfetch.ts
index 24518c18..e4e4c3ef 100644
--- a/app/composables/useXfetch.ts
+++ b/app/composables/useXfetch.ts
@@ -55,6 +55,10 @@ export async function xfetch(
     const status = fetchError.response?.status || 500
     const resJson = fetchError.data
 
+    if (status === 401 && import.meta.client) {
+      clearStore()
+    }
+
     if (resJson?.errors) {
       errors = resJson.errors
     } else if (resJson?.code && resJson?.message) {
@@ -68,3 +72,10 @@ export async function xfetch(
     return { success, status_code: status, body, errors, error, message }
   }
 }
+
+function clearStore() {
+  const { $pinia } = useNuxtApp()
+  const userStore = useUserStore($pinia)
+  userStore.logout()
+  navigateTo('/401')
+}

From 929758fe00fc19fa5cd1aed6a58acda3018014ff Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 13 Aug 2025 13:24:56 +0700
Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=8E=A8=20enhance=20(layout):=20improv?=
 =?UTF-8?q?e=20default=20layout=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/flow/patient/list.vue   | 4 ++--
 app/components/pub/nav/header/prep.vue | 1 +
 app/layouts/default.vue                | 5 ++++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 82c23eb5..3131d81d 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -28,7 +28,7 @@ const recItem = ref<any>(null)
 
 const hreaderPrep: HeaderPrep = {
   title: 'Pasien',
-  icon: 'i-lucide-add',
+  icon: 'i-lucide-users',
   addNav: {
     label: 'Tambah',
     onClick: () => navigateTo('/patient/add'),
@@ -101,7 +101,7 @@ provide('rec_item', recItem)
 
 <template>
   <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="flex flex-1 flex-col gap-4 md:gap-8">
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
       <template v-if="isLoading.summary">
         <PubBaseSummaryCard v-for="n in 4" :key="n" is-skeleton />
diff --git a/app/components/pub/nav/header/prep.vue b/app/components/pub/nav/header/prep.vue
index ab37900d..8bd33696 100644
--- a/app/components/pub/nav/header/prep.vue
+++ b/app/components/pub/nav/header/prep.vue
@@ -24,6 +24,7 @@ function btnClick() {
     <div class="flex items-center justify-between">
       <div class="flex items-center">
         <div class="ml-3 text-lg font-bold text-gray-900">
+          <Icon :name="prep.icon" class="mr-2 h-4 w-4 align-middle" />
           {{ prep.title }}
         </div>
       </div>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 6e6c32ce..7f5959b7 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -43,6 +43,7 @@ const contentContent = computed(() => {
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
+  border-radius: 0.375rem;
   padding-bottom: 5rem;
 }
 
@@ -57,6 +58,7 @@ const contentContent = computed(() => {
   padding-bottom: 5rem; /* pb-20 */
   border-width: 1px;
   background-color: white !important;
+  border-radius: 0.375rem;
   border-color: rgb(226 232 240); /* slate-200 */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
@@ -76,9 +78,9 @@ const contentContent = computed(() => {
 .cf-frame-width {
   margin-left: auto;
   margin-right: auto;
-  padding: 0.75rem;
   background-color: white;
   border: 1px solid rgb(226 232 240);
+  border-radius: 0.375rem;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 .cf-frame {
@@ -86,6 +88,7 @@ const contentContent = computed(() => {
   margin-right: auto;
   padding: 0.75rem;
   background-color: white;
+  border-radius: 0.375rem;
   border: 1px solid rgb(226 232 240);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

From 89eaa7cdabb41d4f03fde809ec9295e0913b4167 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 13 Aug 2025 13:59:05 +0700
Subject: [PATCH 3/8] =?UTF-8?q?=E2=9C=A8=20feat=20(app):=20add=20toaster?=
 =?UTF-8?q?=20component=20for=20global=20notifications?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.vue                                | 2 ++
 app/components/layout/SidebarNavFooter.vue | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index ad991e5e..29936a9b 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -14,5 +14,7 @@ const dir = computed(() => (textDirection.value === 'rtl' ? 'rtl' : 'ltr'))
         <NuxtPage />
       </NuxtLayout>
     </div>
+
+    <Toaster />
   </ConfigProvider>
 </template>
diff --git a/app/components/layout/SidebarNavFooter.vue b/app/components/layout/SidebarNavFooter.vue
index 0e07e822..68d8d9a2 100644
--- a/app/components/layout/SidebarNavFooter.vue
+++ b/app/components/layout/SidebarNavFooter.vue
@@ -50,7 +50,7 @@ const showModalTheme = ref(false)
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
-            class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg bg-white"
             :side="isMobile ? 'bottom' : 'right'"
             align="end"
           >
@@ -76,13 +76,13 @@ const showModalTheme = ref(false)
             <DropdownMenuSeparator />
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
-              <DropdownMenuItem @click="showModalTheme = true">
+              <DropdownMenuItem class="hover:bg-gray-100" @click="showModalTheme = true">
                 <Icon name="i-lucide-user" />
                 Profile
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem @click="handleLogout">
+            <DropdownMenuItem class="hover:bg-gray-100" @click="handleLogout">
               <Icon name="i-lucide-log-out" />
               Log out
             </DropdownMenuItem>

From a6558e312b3c66e8c6fcd2fd356293d5dc083392 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 13 Aug 2025 14:38:31 +0700
Subject: [PATCH 4/8] =?UTF-8?q?=E2=9C=A8=20feat=20(appsidebar):=20add=20ou?=
 =?UTF-8?q?tpatient=20menu=20and=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/layout/AppSidebar.vue          | 33 +++++++++++++++----
 app/components/layout/SidebarNavGroup.vue     | 21 ++++--------
 app/components/layout/SidebarNavLink.vue      |  2 +-
 .../outpatient/examination-queue/index.vue    |  3 ++
 .../outpatient/examination/index.vue          |  3 ++
 .../outpatient/registration-queue/index.vue   |  3 ++
 .../outpatient/registration/index.vue         |  3 ++
 7 files changed, 47 insertions(+), 21 deletions(-)
 create mode 100644 app/pages/(features)/outpatient/examination-queue/index.vue
 create mode 100644 app/pages/(features)/outpatient/examination/index.vue
 create mode 100644 app/pages/(features)/outpatient/registration-queue/index.vue
 create mode 100644 app/pages/(features)/outpatient/registration/index.vue

diff --git a/app/components/layout/AppSidebar.vue b/app/components/layout/AppSidebar.vue
index 599313c7..cc0736da 100644
--- a/app/components/layout/AppSidebar.vue
+++ b/app/components/layout/AppSidebar.vue
@@ -8,6 +8,32 @@ const navMenu: any[] = [
         icon: 'i-lucide-home',
         link: '/',
       },
+      {
+        title: 'Rawat Jalan',
+        icon: 'i-lucide-stethoscope',
+        children: [
+          {
+            title: 'Antrian Pendaftaran',
+            icon: 'i-lucide-stethoscope',
+            link: '/outpatient/registration-queue',
+          },
+          {
+            title: 'Pendaftaran',
+            icon: 'i-lucide-building-2',
+            link: '/outpatient/registration',
+          },
+          {
+            title: 'Antrian Pemeriksaan',
+            icon: 'i-lucide-stethoscope',
+            link: '/outpatient/examination-queue',
+          },
+          {
+            title: 'Pendaftaran',
+            icon: 'i-lucide-building-2',
+            link: '/outpatient/examination',
+          },
+        ],
+      },
       {
         title: 'Pasien',
         icon: 'i-lucide-users',
@@ -18,11 +44,6 @@ const navMenu: any[] = [
         icon: 'i-lucide-heart',
         link: '/rehabilitasi',
       },
-      {
-        title: 'Rawat Jalan',
-        icon: 'i-lucide-stethoscope',
-        link: '/rawat-jalan',
-      },
       {
         title: 'Rawat Inap',
         icon: 'i-lucide-building-2',
@@ -119,7 +140,7 @@ const sidebar = {
           v-for="(item, index) in nav.items"
           :key="index"
           :item="item"
-          class="mb-2"
+          class="my-2 mb-2"
         />
       </SidebarGroup>
       <SidebarGroup class="mt-auto">
diff --git a/app/components/layout/SidebarNavGroup.vue b/app/components/layout/SidebarNavGroup.vue
index e6c74ee6..f9d1a73f 100644
--- a/app/components/layout/SidebarNavGroup.vue
+++ b/app/components/layout/SidebarNavGroup.vue
@@ -24,13 +24,7 @@ const openCollapsible = ref(false)
         <CollapsibleTrigger as-child>
           <SidebarMenuButton :tooltip="item.title" :size="size">
             <Icon :name="item.icon || ''" mode="svg" />
-            <span>{{ item.title }}</span>
-            <span
-              v-if="item.new"
-              class="bg-#adfa1d rounded-md px-1.5 py-0.5 text-xs leading-none text-black no-underline group-hover:no-underline"
-            >
-              New
-            </span>
+            <span class="mx-2">{{ item.title }}</span>
             <Icon
               name="i-lucide-chevron-right"
               class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
@@ -41,14 +35,13 @@ const openCollapsible = ref(false)
           <SidebarMenuSub>
             <SidebarMenuSubItem v-for="subItem in item.children" :key="subItem.title">
               <SidebarMenuSubButton as-child>
-                <NuxtLink :to="subItem.link" @click="setOpenMobile(false)">
+                <NuxtLink
+                  :to="subItem.link"
+                  class="mx-4 rounded-lg py-5 text-sm font-medium transition-all duration-200"
+                  active-class="bg-primary text-white"
+                  @click="setOpenMobile(false)"
+                >
                   <span>{{ subItem.title }}</span>
-                  <span
-                    v-if="subItem.new"
-                    class="bg-#adfa1d rounded-md px-1.5 py-0.5 text-xs leading-none text-black no-underline group-hover:no-underline"
-                  >
-                    New
-                  </span>
                 </NuxtLink>
               </SidebarMenuSubButton>
             </SidebarMenuSubItem>
diff --git a/app/components/layout/SidebarNavLink.vue b/app/components/layout/SidebarNavLink.vue
index 55b0d2b5..9a3b873e 100644
--- a/app/components/layout/SidebarNavLink.vue
+++ b/app/components/layout/SidebarNavLink.vue
@@ -21,7 +21,7 @@ const { setOpenMobile } = useSidebar()
       <SidebarMenuButton as-child :tooltip="item.title" :size="size">
         <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"
+          class="group flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium transition-all duration-200"
           active-class="bg-primary text-white"
           @click="setOpenMobile(false)"
         >
diff --git a/app/pages/(features)/outpatient/examination-queue/index.vue b/app/pages/(features)/outpatient/examination-queue/index.vue
new file mode 100644
index 00000000..8616dd19
--- /dev/null
+++ b/app/pages/(features)/outpatient/examination-queue/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Examination Queue</div>
+</template>
diff --git a/app/pages/(features)/outpatient/examination/index.vue b/app/pages/(features)/outpatient/examination/index.vue
new file mode 100644
index 00000000..806b2650
--- /dev/null
+++ b/app/pages/(features)/outpatient/examination/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Examination</div>
+</template>
diff --git a/app/pages/(features)/outpatient/registration-queue/index.vue b/app/pages/(features)/outpatient/registration-queue/index.vue
new file mode 100644
index 00000000..053b5233
--- /dev/null
+++ b/app/pages/(features)/outpatient/registration-queue/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Registration Queue</div>
+</template>
diff --git a/app/pages/(features)/outpatient/registration/index.vue b/app/pages/(features)/outpatient/registration/index.vue
new file mode 100644
index 00000000..90430b84
--- /dev/null
+++ b/app/pages/(features)/outpatient/registration/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Registration</div>
+</template>

From f89cd0964639f419619e46eb4ba927a1d86e0720 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 13 Aug 2025 15:19:03 +0700
Subject: [PATCH 5/8] =?UTF-8?q?=E2=9C=A8=20feat=20(appsidebar):=20load=20m?=
 =?UTF-8?q?enu=20from=20json=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/layout/AppSidebar.vue | 151 +++++++--------------------
 public/side-menu-items/sys.json      |  75 +++++++++++++
 2 files changed, 115 insertions(+), 111 deletions(-)
 create mode 100644 public/side-menu-items/sys.json

diff --git a/app/components/layout/AppSidebar.vue b/app/components/layout/AppSidebar.vue
index cc0736da..677087e5 100644
--- a/app/components/layout/AppSidebar.vue
+++ b/app/components/layout/AppSidebar.vue
@@ -1,98 +1,11 @@
 <script setup lang="ts">
-const navMenu: any[] = [
-  {
-    heading: 'Menu Utama',
-    items: [
-      {
-        title: 'Dashboard',
-        icon: 'i-lucide-home',
-        link: '/',
-      },
-      {
-        title: 'Rawat Jalan',
-        icon: 'i-lucide-stethoscope',
-        children: [
-          {
-            title: 'Antrian Pendaftaran',
-            icon: 'i-lucide-stethoscope',
-            link: '/outpatient/registration-queue',
-          },
-          {
-            title: 'Pendaftaran',
-            icon: 'i-lucide-building-2',
-            link: '/outpatient/registration',
-          },
-          {
-            title: 'Antrian Pemeriksaan',
-            icon: 'i-lucide-stethoscope',
-            link: '/outpatient/examination-queue',
-          },
-          {
-            title: 'Pendaftaran',
-            icon: 'i-lucide-building-2',
-            link: '/outpatient/examination',
-          },
-        ],
-      },
-      {
-        title: 'Pasien',
-        icon: 'i-lucide-users',
-        link: '/patient',
-      },
-      {
-        title: 'Rehabilitasi Medik',
-        icon: 'i-lucide-heart',
-        link: '/rehabilitasi',
-      },
-      {
-        title: 'Rawat Inap',
-        icon: 'i-lucide-building-2',
-        link: '/rawat-inap',
-      },
-      {
-        title: 'VClaim BPJS',
-        icon: 'i-lucide-refresh-cw',
-        link: '/vclaim',
-        badge: 'Live',
-      },
-      {
-        title: 'SATUSEHAT',
-        icon: 'i-lucide-database',
-        link: '/satusehat',
-        badge: 'FHIR',
-      },
-      {
-        title: 'Medical Records',
-        icon: 'i-lucide-file-text',
-        link: '/medical-records',
-      },
-      {
-        title: 'Laporan',
-        icon: 'i-lucide-clipboard-list',
-        link: '/laporan',
-      },
-      {
-        title: 'Monitoring',
-        icon: 'i-lucide-bar-chart-3',
-        link: '/monitoring',
-      },
-    ],
-  },
-]
-
-const navMenuBottom: any[] = [
-  {
-    title: 'Help & Support',
-    icon: 'i-lucide-circle-help',
-    link: 'https://github.com/simrs/simrs-fe',
-  },
-]
-
-function resolveNavItemComponent(item: any): any {
-  if ('children' in item) return resolveComponent('LayoutSidebarNavGroup')
-
-  return resolveComponent('LayoutSidebarNavLink')
-}
+const navMenu: {
+  heading: string
+  items: Array<any>
+} = ref({
+  heading: 'Menu Utama',
+  items: [],
+})
 
 const teams: {
   name: string
@@ -105,44 +18,60 @@ const teams: {
     plan: 'Saiful Anwar Hospital',
   },
 ]
-
-// const user: {
-//   name: string
-//   email: string
-//   avatar: string
-// } = {
-//   name: '',
-//   email: '',
-//   avatar: '/',
-// }
-
-// const { sidebar } = useAppSettings()
 const sidebar = {
   collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
   side: 'left', // 'left' | 'right'
   variant: 'sidebar', // 'sidebar' | 'floating' | 'inset'
 }
+const navMenuBottom: any[] = [
+  {
+    title: 'Help & Support',
+    icon: 'i-lucide-circle-help',
+    link: 'https://github.com/simrs/simrs-fe',
+  },
+]
+
+onMounted(async () => {
+  await setMenu()
+})
+
+function resolveNavItemComponent(item: any): any {
+  if ('children' in item) return resolveComponent('LayoutSidebarNavGroup')
+
+  return resolveComponent('LayoutSidebarNavLink')
+}
+
+async function setMenu() {
+  const position_code = 'sys'
+  const res = await fetch(`/side-menu-items/${position_code}.json`)
+  const rawMenu = await res.text()
+  navMenu.value.items = JSON.parse(rawMenu)
+}
 </script>
 
 <template>
   <Sidebar :collapsible="sidebar.collapsible" :side="sidebar.side" :variant="sidebar.variant">
     <SidebarHeader>
       <LayoutSidebarNavHeader :teams="teams" />
-      <!-- <Search /> -->
     </SidebarHeader>
     <SidebarContent>
-      <SidebarGroup v-for="(nav, indexGroup) in navMenu" :key="indexGroup">
-        <SidebarGroupLabel v-if="nav.heading">
-          {{ nav.heading }}
+      <SidebarGroup v-if="navMenu.items.length > 0">
+        <SidebarGroupLabel>
+          {{ navMenu.heading }}
         </SidebarGroupLabel>
         <component
           :is="resolveNavItemComponent(item)"
-          v-for="(item, index) in nav.items"
+          v-for="(item, index) in navMenu.items"
           :key="index"
           :item="item"
           class="my-2 mb-2"
         />
       </SidebarGroup>
+      <template v-else>
+        <div class="p-5">
+          <div v-for="n in 10" :key="n" class="my-4 h-8 animate-pulse rounded bg-gray-200 py-2"></div>
+        </div>
+      </template>
       <SidebarGroup class="mt-auto">
         <component
           :is="resolveNavItemComponent(item)"
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
new file mode 100644
index 00000000..038acdcf
--- /dev/null
+++ b/public/side-menu-items/sys.json
@@ -0,0 +1,75 @@
+[
+  {
+    "title": "Dashboard",
+    "icon": "i-lucide-home",
+    "link": "/"
+  },
+  {
+    "title": "Rawat Jalan",
+    "icon": "i-lucide-stethoscope",
+    "children": [
+      {
+        "title": "Antrian Pendaftaran",
+        "icon": "i-lucide-stethoscope",
+        "link": "/outpatient/registration-queue"
+      },
+      {
+        "title": "Pendaftaran",
+        "icon": "i-lucide-building-2",
+        "link": "/outpatient/registration"
+      },
+      {
+        "title": "Antrian Pemeriksaan",
+        "icon": "i-lucide-stethoscope",
+        "link": "/outpatient/examination-queue"
+      },
+      {
+        "title": "Pendaftaran",
+        "icon": "i-lucide-building-2",
+        "link": "/outpatient/examination"
+      }
+    ]
+  },
+  {
+    "title": "Pasien",
+    "icon": "i-lucide-users",
+    "link": "/patient"
+  },
+  {
+    "title": "Rehabilitasi Medik",
+    "icon": "i-lucide-heart",
+    "link": "/rehabilitasi"
+  },
+  {
+    "title": "Rawat Inap",
+    "icon": "i-lucide-building-2",
+    "link": "/rawat-inap"
+  },
+  {
+    "title": "VClaim BPJS",
+    "icon": "i-lucide-refresh-cw",
+    "link": "/vclaim",
+    "badge": "Live"
+  },
+  {
+    "title": "SATUSEHAT",
+    "icon": "i-lucide-database",
+    "link": "/satusehat",
+    "badge": "FHIR"
+  },
+  {
+    "title": "Medical Records",
+    "icon": "i-lucide-file-text",
+    "link": "/medical-records"
+  },
+  {
+    "title": "Laporan",
+    "icon": "i-lucide-clipboard-list",
+    "link": "/laporan"
+  },
+  {
+    "title": "Monitoring",
+    "icon": "i-lucide-bar-chart-3",
+    "link": "/monitoring"
+  }
+]

From 67ccb21b494749ebf4ac9bd69abacd1b5d4e910c Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 13 Aug 2025 16:37:32 +0700
Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=90=9B=20fix=20(rbac):=20use=20userSt?=
 =?UTF-8?q?ore=20to=20determine=20user=20roles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/composables/useRBAC.ts    | 11 ++++++-----
 app/middleware/auth.global.ts |  1 -
 app/middleware/rbac.ts        |  4 ++--
 app/stores/user.ts            |  5 +++--
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/composables/useRBAC.ts b/app/composables/useRBAC.ts
index 6228f37f..543c3b90 100644
--- a/app/composables/useRBAC.ts
+++ b/app/composables/useRBAC.ts
@@ -5,21 +5,22 @@ import type { Permission, RoleAccess } from '~/models/role'
  */
 export function useRBAC() {
   // NOTE: this roles was dummy for testing only, it should taken from the user store
-  // const authStore = useAuthStore()
+  const authStore = useUserStore()
 
   const checkRole = (roleAccess: RoleAccess, _userRoles?: string[]): boolean => {
-    const roles = ['admisi']
+    const roles = authStore.userRole
     return roles.some((role: string) => role in roleAccess)
   }
 
   const checkPermission = (roleAccess: RoleAccess, permission: Permission, _userRoles?: string[]): boolean => {
-    const roles = ['admisi']
+    const roles = authStore.userRole
+    // 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 roles = authStore.userRole
+    // const roles = ['admisi']
     const permissions = new Set<Permission>()
 
     roles.forEach((role) => {
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index e2b76d91..9d4fb60b 100644
--- a/app/middleware/auth.global.ts
+++ b/app/middleware/auth.global.ts
@@ -2,7 +2,6 @@ export default defineNuxtRouteMiddleware((to) => {
   if (to.meta.public) return
 
   const { $pinia } = useNuxtApp()
-
   if (import.meta.client) {
     const userStore = useUserStore($pinia)
 
diff --git a/app/middleware/rbac.ts b/app/middleware/rbac.ts
index 8528c2ca..1f7b1526 100644
--- a/app/middleware/rbac.ts
+++ b/app/middleware/rbac.ts
@@ -19,8 +19,8 @@ export default defineNuxtRouteMiddleware((to) => {
     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 userRoles = authStore.userRole
+      // const userRoles = ['admisi']
       const hasRequiredRole = requiredRoles.some((role) => userRoles.includes(role))
 
       if (!hasRequiredRole) {
diff --git a/app/stores/user.ts b/app/stores/user.ts
index 84ebc90a..8c4a618f 100644
--- a/app/stores/user.ts
+++ b/app/stores/user.ts
@@ -2,9 +2,10 @@ export const useUserStore = defineStore(
   'user',
   () => {
     const user = ref<any | null>(null)
+    // const token = useCookie('authentication')
 
     const isAuthenticated = computed(() => !!user.value)
-    const userRole = computed(() => user.value?.user_position_code || '')
+    // const userRole = computed(() => user.value?.user_position_code || '')
 
     const login = async (userData: any) => {
       user.value = userData
@@ -17,7 +18,7 @@ export const useUserStore = defineStore(
     return {
       user,
       isAuthenticated,
-      userRole,
+      userRole: ['admisi'],
       login,
       logout,
     }

From 46826ce421098b4c9205fcf0ac76e9ec64902e57 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 13 Aug 2025 16:44:01 +0700
Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=93=96=20docs=20(readme):=20add=20pag?=
 =?UTF-8?q?e=20creation=20guidelines?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 1094dab9..fc6ea8d8 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,7 @@ The basic development workflow follows these steps:
 
 ### Create Pages in `pages/`
 
+- Define permissions and guards for each page.
 - Pages load the appropriate flow from `components/flow/`.
 - They do not contain UI or logic directly, just route level layout or guards.
 

From bb12d363c41b736cb365b380882d866915c179b1 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 13 Aug 2025 16:57:53 +0700
Subject: [PATCH 8/8] =?UTF-8?q?=F0=9F=93=96=20docs=20(readme):=20add=20cod?=
 =?UTF-8?q?e=20conventions=20and=20important=20note?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/README.md b/README.md
index fc6ea8d8..054f28c5 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,10 @@
 
 RSSA - Front End
 
+
+> [!IMPORTANT]
+> Read this following instructions before doing your job
+
 ## Framework Guide
 
 - [Vue Style Guide](https://vuejs.org/style-guide)
@@ -58,6 +62,26 @@ The basic development workflow follows these steps:
 - Pages load the appropriate flow from `components/flow/`.
 - They do not contain UI or logic directly, just route level layout or guards.
 
+## Code Conventions
+
+- Under the script setup block, putting things in group with the following order:
+   - Imports → all dependencies, sorted by external, alias (~), and relative imports.
+   - Props & Emits → clearly define component inputs & outputs.
+   - State & Computed → all ref, reactive, and computed variables grouped together.
+   - Lifecycle Hooks → grouped by mounting → updating → unmounting order.
+   - Functions → async first (fetching, API calls), then utility & event handlers.
+   - Watchers → if needed, put them at the bottom.
+   - Template → keep clean and minimal logic, use methods/computed instead of inline JS.
+- Declaration Naming
+   - Uses PascalCase for `type` naming
+   - Uses camelCase for `variable` and `const` naming
+   - Underscore can be used to indicates that a variable has derived from an attribute of an object<br />
+      for example: `person_name` indicates it is an attribute `name` from object `person`
+- Looping
+   - Uses `i`, `j`, `k` as variable for `for` looping index
+   - Uses `item` as object instantition for `forEach` loop callback
+   - Uses `item` as object instantition for `v-for` loop callback in the template
+
 ## Git Workflows
 
 The basic git workflow follows these steps: