Merge remote-tracking branch 'origin/dev' into feat/patient

README.md

@@ -1,15 +1,19 @@
 # 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
@@ -19,35 +23,44 @@ RSSA - Front End
 - `layouts` : Reusable UI layout patterns used across 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/`
+
 - `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

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

@@ -1,9 +1,37 @@
-<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">
+      <Icon name="i-lucide-user" class="me-2" />
+      <span class="font-semibold">Tambah</span> Pasien
+    </div>
 
-  <div>
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-    <PubNavFooterCs />
+      <div>
-  </div>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Nama</Label>
+            <Field name="name">
+              <Input type="text" name="name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Nomor RM</Label>
+            <Field name="name">
+              <Input type="text" name="name" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
 </template>

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 '-'
+  },
+}

app/components/app/patient/list.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } 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>

app/components/flow/patient/list.vue

@@ -3,7 +3,10 @@ import type { Summary } from '~/components/pub/base/summary-card.type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
 import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
 
+const data = ref([])
+
 const refSearchNav: RefSearchNav = {
+
   onClick: () => {
     // open filter modal
   },
@@ -20,6 +23,9 @@ const isLoading = reactive({
   summary: false,
   table: false,
 })
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
 
 const hreaderPrep: HeaderPrep = {
   title: 'Pasien',
@@ -67,7 +73,7 @@ async function getPatientSummary() {
   try {
     isLoading.summary = true
 
-    await new Promise((resolve) => setTimeout(resolve, 1500))
+    await new Promise((resolve) => setTimeout(resolve, 500))
   } catch (error) {
     console.error('Error fetching patient summary:', error)
     // Keep default/existing data on error
@@ -77,20 +83,26 @@ async function getPatientSummary() {
 }
 
 async function getPatientList() {
-  // const response = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/patient')
-  // console.log('data patient', response)
+  console.log('data patient', resp)
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
 }
 
 onMounted(() => {
   getPatientSummary()
   getPatientList()
 })
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
 </script>
 
 <template>
   <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-
+  <div class="flex flex-1 flex-col gap-4 md:gap-8">
-  <main class="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 />
@@ -99,5 +111,6 @@ onMounted(() => {
         <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </template>
     </div>
-  </main>
+    <AppPatientList :data="data" />
+  </div>
 </template>

app/components/layout/Header.vue

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

app/components/layout/SidebarNavFooter.vue

@@ -22,73 +22,75 @@ const showModalTheme = ref(false)
 </script>
 
 <template>
-  <SidebarMenu>
+  <ClientOnly>
-    <SidebarMenuItem>
+    <SidebarMenu>
-      <DropdownMenu>
+      <SidebarMenuItem>
-        <DropdownMenuTrigger as-child>
+        <DropdownMenu>
-          <SidebarMenuButton
+          <DropdownMenuTrigger as-child>
-            size="lg"
+            <SidebarMenuButton
-            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              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">
               <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 font-semibold">{{ userStore?.user_name || '' }}</span>
-                <span class="truncate text-xs">{{ userStore?.user_email }}</span>
+                <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
               </div>
-            </div>
+              <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
-          </DropdownMenuLabel>
+            </SidebarMenuButton>
-          <DropdownMenuSeparator />
+          </DropdownMenuTrigger>
-          <DropdownMenuSeparator />
+          <DropdownMenuContent
-          <DropdownMenuGroup>
+            class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-            <DropdownMenuItem @click="showModalTheme = true">
+            :side="isMobile ? 'bottom' : 'right'"
-              <Icon name="i-lucide-user" />
+            align="end"
-              Profile
+          >
+            <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>
+          </DropdownMenuContent>
-          <DropdownMenuSeparator />
+        </DropdownMenu>
-          <DropdownMenuItem @click="handleLogout">
+      </SidebarMenuItem>
-            <Icon name="i-lucide-log-out" />
+    </SidebarMenu>
-            Log out
+  </ClientOnly>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </SidebarMenuItem>
-  </SidebarMenu>
 </template>
 
 <style scoped></style>

app/components/layout/SidebarNavGroup.vue

@@ -9,7 +9,7 @@ withDefaults(
   }>(),
   {
     size: 'default',
-  }
+  },
 )
 
 const { setOpenMobile } = useSidebar()

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" />

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>

app/components/pub/form/block.vue

@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="`mb-5 flex-wrap md:flex ${classValExt || ''}`">
+  <div :class="`m-3 mb-5 flex-wrap md:flex ${classValExt || ''}`">
     <slot />
   </div>
 </template>

app/components/pub/form/field-group.vue

@@ -34,7 +34,15 @@ const classVal = computed(() => {
 </script>
 
 <template>
-  <div :class="classVal">
+  <div
+    :class="[
+      column === 1 ? 'w-full' : column === 2 ? 'pe-4 md:w-1/2' : 'pe-4 md:w-1/3',
+      density === 'dense' ? '' : 'mb-2 md:mb-2.5 xl:mb-3',
+      side !== 'break' ? 'md:flex' : '',
+      position === 'dynamic' ? 'ps-4' : '',
+      props.class,
+    ]"
+  >
     <slot />
   </div>
 </template>

app/components/pub/form/label.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    size?: 'default' | 'narrow' | 'wide'
+    height?: 'default' | 'compact'
+    position?: 'default' | 'dynamic'
+    class?: string
+  }>(),
+  {
+    size: 'default',
+    height: 'default',
+    position: 'default',
+    class: '',
+  },
+)
+
+const classVal = computed(() => {
+  let val = ''
+
+  if (props.size === 'narrow') val += 'size-narrow '
+  else if (props.size === 'wide') val += 'size-wide '
+  else val += 'size-default '
+
+  if (props.height === 'compact') val += 'height-compact '
+  else val += 'height-default '
+
+  if (props.position === 'dynamic') val += 'position-dynamic '
+  else val += 'position-default '
+
+  return (val + (props.class || '')).trim()
+})
+</script>
+
+<template>
+  <div class="label" :class="classVal">
+    <label>
+      <slot />
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.label {
+  @apply block flex-shrink-0 shrink-0;
+}
+
+.size-default {
+  @apply w-28 2xl:w-36;
+}
+.size-narrow {
+  @apply w-24 2xl:w-28;
+}
+.size-wide {
+  @apply w-44 2xl:w-48;
+}
+
+.height-default {
+  @apply pt-2 2xl:pt-2.5;
+}
+
+.height-compact {
+  line-height: 14pt;
+}
+
+.position-default {
+  @apply pe-2 text-start;
+}
+
+.position-dynamic > * {
+  @apply block pe-2.5 md:text-end;
+}
+</style>

app/components/pub/nav/data-table.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Table, TableBody, 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
+            :is="funcComponent[key](row, rowIndex).component"
+            v-if="funcComponent[key]"
+            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>

app/components/pub/nav/dropdown-action-du.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } 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>

app/components/pub/nav/dropdown-action-ducd.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } 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>

app/components/pub/nav/dropdown-action-dud.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } 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>

app/components/pub/nav/dropdown-action-ud.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } 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>

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">
+  <div class="m-2 flex gap-2 px-2">
-    <div>
+    <Button class="bg-gray-400" @click="onClick('cancel')">
-      <Button variant="outline" size="sm">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-        <Icon name="i-lucide-pencil" class="mr-1" />
+      Kembali
-        Edit
+    </Button>
-      </Button>
+    <Button class="bg-primary" @click="onClick('submit')">
-    </div>
+      <Icon name="i-lucide-check" class="me-2 align-middle" />
+      Selesai
+    </Button>
   </div>
 </template>

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>

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"
           />

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
+}

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
@@ -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 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,
+      )
+    "
+  />
 </template>

app/composables/useRBAC.ts

@@ -0,0 +1,48 @@
+import type { Permission, RoleAccess } from '~/models/role'
+
+/**
+ * Check if user has access to a page
+ */
+export function useRBAC() {
+  // NOTE: this roles was dummy for testing only, it should taken from the user store
+  // const authStore = useAuthStore()
+
+  const checkRole = (roleAccess: RoleAccess, _userRoles?: string[]): boolean => {
+    const roles = ['admisi']
+    return roles.some((role: string) => role in roleAccess)
+  }
+
+  const checkPermission = (roleAccess: RoleAccess, permission: Permission, _userRoles?: string[]): boolean => {
+    const roles = ['admisi']
+    return roles.some((role: string) => roleAccess[role]?.includes(permission))
+  }
+
+  const getUserPermissions = (roleAccess: RoleAccess, _userRoles?: string[]): Permission[] => {
+    // const roles = userRoles || authStore.roles
+    const roles = ['admisi']
+    const permissions = new Set<Permission>()
+
+    roles.forEach((role) => {
+      if (roleAccess[role]) {
+        roleAccess[role].forEach((permission) => permissions.add(permission))
+      }
+    })
+
+    return Array.from(permissions)
+  }
+
+  const hasCreateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'C')
+  const hasReadAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'R')
+  const hasUpdateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'U')
+  const hasDeleteAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'D')
+
+  return {
+    checkRole,
+    checkPermission,
+    getUserPermissions,
+    hasCreateAccess,
+    hasReadAccess,
+    hasUpdateAccess,
+    hasDeleteAccess,
+  }
+}

app/error.vue

@@ -0,0 +1,11 @@
+<script setup>
+definePageMeta({
+  layout: 'blank',
+})
+</script>
+
+<template>
+  <PubBaseError :status-code="401" />
+</template>
+
+<style scoped></style>

app/layouts/default.vue

@@ -1,4 +1,21 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const route = useRoute()
+const contentFrame = computed(() => route.meta.contentFrame)
+const contentContent = computed(() => {
+  switch (contentFrame.value) {
+    case 'cf-container-lg':
+      return 'cf-frame cf-container-lg-content'
+    case 'cf-container-md':
+      return 'cf-frame cf-container-md-content'
+    case 'cf-container-sm':
+      return 'cf-frame cf-container-sm-content'
+    case 'cf-full-width':
+      return 'cf-frame-width'
+    default:
+      return 'cf-frame'
+  }
+})
+</script>
 
 <template>
   <SidebarProvider>
@@ -6,10 +23,70 @@
     <SidebarInset>
       <LayoutHeader />
       <div class="w-full min-w-0 flex-1 overflow-x-auto p-4 lg:p-6">
-        <slot />
+        <div v-if="contentFrame !== 'cf-no-frame'" class="contentFrame">
+          <div :class="`${contentContent} ${contentFrame}`">
+            <slot />
+          </div>
+        </div>
+        <slot v-else />
       </div>
     </SidebarInset>
   </SidebarProvider>
 </template>
 
-<style scoped></style>
+<style scoped>
+.cf-container,
+.cf-container-lg,
+.cf-container-md,
+.cf-container-sm {
+  container-type: inline-size;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 5rem;
+}
+
+.cf-container > *,
+.cf-container-lg > *,
+.cf-container-md > *,
+.cf-container-sm > *,
+.cf-full-width {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.75rem; /* p-3 */
+  padding-bottom: 5rem; /* pb-20 */
+  border-width: 1px;
+  background-color: white !important;
+  border-color: rgb(226 232 240); /* slate-200 */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.cf-container-lg > * {
+  max-width: 992px;
+}
+
+.cf-container-md > * {
+  max-width: 768px;
+}
+
+.cf-container-sm > * {
+  max-width: 576px;
+}
+
+.cf-frame-width {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.75rem;
+  background-color: white;
+  border: 1px solid rgb(226 232 240);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.cf-frame {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.75rem;
+  background-color: white;
+  border: 1px solid rgb(226 232 240);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+</style>

app/lib/page-permission.ts

@@ -0,0 +1,12 @@
+import type { RoleAccess } from '~/models/role'
+
+export const PAGE_PERMISSIONS = {
+  '/patient': {
+    doctor: ['R'],
+    nurse: ['R'],
+    admisi: ['C', 'R', 'U', 'D'],
+    pharmacy: ['R'],
+    billing: ['R'],
+    management: ['R'],
+  },
+} as const satisfies Record<string, RoleAccess>

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) {
@@ -7,12 +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
-    if (allowedRoles && !allowedRoles.includes(userStore.userRole)) {
-      return navigateTo('/unauthorized')
     }
   }
 })

app/middleware/rbac.ts

@@ -0,0 +1,31 @@
+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)) {
+        return navigateTo('/403')
+      }
+    }
+
+    // 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) {
+        return navigateTo('/403')
+      }
+    }
+  }
+})

app/models/role.ts

@@ -0,0 +1,22 @@
+import type { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+export interface User {
+  id: string
+  name: string
+  email: string
+}
+
+export interface AuthState {
+  user: User | null
+  roles: string[]
+  token: string | null
+}
+
+export type Permission = 'C' | 'R' | 'U' | 'D'
+
+export interface RoleAccess {
+  [role: string]: Permission[]
+}
+
+export type PagePath = keyof typeof PAGE_PERMISSIONS
+export type PagePermission = (typeof PAGE_PERMISSIONS)[PagePath]

app/pages/(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>

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>

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>

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>

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>

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

@@ -1,9 +1,34 @@
 <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>
+  <PubBaseError v-else :status-code="403" />
 </template>

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

@@ -1,11 +1,35 @@
 <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) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
   <div>
-    <FlowPatientList />
+    <div v-if="canRead">
+      <FlowPatientList />
+    </div>
+    <div v-else>
+      <p>You don't have permission to view patient records.</p>
+    </div>
   </div>
 </template>

app/pages/auth/login.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: 'blank',
+  public: true,
 })
 </script>
 

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',
       },
-    }
+    },
-  )
+  ),
 )

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-app",
-  "private": true,
   "type": "module",
+  "private": true,
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",

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)

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: [