✨ feat (patient): add error page for patient add page permission

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

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

app/components/layout/SidebarNavGroup.vue

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

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

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

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

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

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