Merge pull request #98 from dikstub-rssa/feat/tidy-up

feat/tidy-up:

app/assets/css/main.css

@@ -173,6 +173,10 @@ body {
   @apply bg-slate-100 dark:bg-slate-800 ;
 }
 
+body, table, label {
+  @apply md:!text-xs xl:!text-sm 2xl:!text-base;
+}
+
 /* Container */
 .container {
   width: 100%;

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

@@ -38,7 +38,7 @@ const items = [
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
-            <Label>Metode Pemberian</Label>
+            <Label>Cara Pemberian</Label>
             <Field name="phone">
               <Select :items="items" />
             </Field>

app/components/app/prescription-item/list-entry.ts

@@ -0,0 +1,66 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [
+    { label: 'Nama' },
+    { label: 'Bentuk' },
+    { label: 'Freq' },
+    { label: 'Dosis' },
+    { label: 'Interval' },
+    { label: 'Total' },
+    { label: '' },
+  ],
+]
+
+export const keys = ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  cateogry: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineCategory?.name || '-'
+  },
+  group: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineGroup?.name || '-'
+  },
+  method: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineMethod?.name || '-'
+  },
+  unit: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineUnit?.name || '-'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action: (rec: unknown, idx: number): RecComponent => {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  // (_rec) {
+  //   return '-'
+  // },
+}

app/components/app/prescription-item/list-entry.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-entry'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>

app/components/app/prescription/entry.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <PubCustomUiDocEntryBlock mode="preview" :colCount=3>
+      <PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
+        <PubCustomUiDocEntryField>
+            <Input />
+        </PubCustomUiDocEntryField>
+      </PubCustomUiDocEntryCell>
+      <PubCustomUiDocEntryCell />
+      <PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryLabel>Tgl Order</PubCustomUiDocEntryLabel>
+        <PubCustomUiDocEntryField>
+            <Input />
+        </PubCustomUiDocEntryField>
+      </PubCustomUiDocEntryCell>
+      <PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
+        <PubCustomUiDocEntryField>
+            <Input />
+        </PubCustomUiDocEntryField>
+      </PubCustomUiDocEntryCell>
+      <PubCustomUiDocEntryCell />
+      <PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryLabel>Status</PubCustomUiDocEntryLabel>
+        <PubCustomUiDocEntryField>
+            <Input />
+        </PubCustomUiDocEntryField>
+      </PubCustomUiDocEntryCell>
+    </PubCustomUiDocEntryBlock>
+  </div>
+</template>

app/components/app/prescription/list.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div>
+  </div>
+  <Separator class="my-5" />
+  <div>
+    <PubCustomUiDocEntryBlock mode="preview" :colCount=3>
+      <PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
+        <PubCustomUiDocEntryField>
+            <Input />
+        </PubCustomUiDocEntryField>
+      </PubCustomUiDocEntryCell>
+      <PubCustomUiDocEntryCell />
+      <PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryLabel>Tgl Order</PubCustomUiDocEntryLabel>
+        <PubCustomUiDocEntryField>
+            <Input />
+        </PubCustomUiDocEntryField>
+      </PubCustomUiDocEntryCell>
+      <PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
+        <PubCustomUiDocEntryField>
+            <Input />
+        </PubCustomUiDocEntryField>
+      </PubCustomUiDocEntryCell>
+      <PubCustomUiDocEntryCell />
+      <PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryLabel>Status</PubCustomUiDocEntryLabel>
+        <PubCustomUiDocEntryField>
+            <Input />
+        </PubCustomUiDocEntryField>
+      </PubCustomUiDocEntryCell>
+    </PubCustomUiDocEntryBlock>
+  </div>
+</template>

app/components/content/division/list.vue

@@ -176,7 +176,6 @@ function handleCancelConfirmation() {
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
   <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
   <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
@@ -202,7 +201,6 @@ function handleCancelConfirmation() {
       </div>
     </template>
   </RecordConfirmation>
-  </div>
 </template>
 
 <style scoped>

app/components/content/equipment/list.vue

@@ -130,11 +130,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-4">
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
-    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
-    <div class="rounded-md border p-4">
   <AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    </div>
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
@@ -177,5 +174,4 @@ onMounted(async () => {
       </div>
     </template>
   </RecordConfirmation>
-  </div>
 </template>

app/components/content/installation/list.vue

@@ -179,7 +179,6 @@ function handleCancelConfirmation() {
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
   <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
   <AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
@@ -200,7 +199,6 @@ function handleCancelConfirmation() {
       </div>
     </template>
   </RecordConfirmation>
-  </div>
 </template>
 
 <style scoped>

app/components/content/medicine-group/list.vue

@@ -112,11 +112,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-4">
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
-    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
-    <div class="rounded-md border p-4">
   <AppMedicineGroupList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    </div>
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
@@ -158,5 +155,4 @@ onMounted(async () => {
       </div>
     </template>
   </RecordConfirmation>
-  </div>
 </template>

app/components/content/medicine-method/list.vue

@@ -112,11 +112,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-4">
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
-    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
-    <div class="rounded-md border p-4">
   <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    </div>
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
@@ -158,5 +155,4 @@ onMounted(async () => {
       </div>
     </template>
   </RecordConfirmation>
-  </div>
 </template>

app/components/content/prescription/list.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import PrescriptionItemListEntry from '~/components/app/prescription-item/list-entry.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Resep Obat',
+  icon: 'i-lucide-panel-bottom',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/tools-equipment-src/equipment/add'),
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+onMounted(() => {
+  getMaterialList()
+})
+
+async function getMaterialList() {
+  isLoading.dataListLoading = true
+
+  // const resp = await xfetch('/api/v1/material')
+  // if (resp.success) {
+  //   data.value = (resp.body as Record<string, any>).data
+  // }
+
+  isLoading.dataListLoading = false
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <AppPrescriptionList v-if="!isLoading.dataListLoading" />
+  <AppPrescriptionEntry />
+  <PrescriptionItemListEntry :data=[] />
+  <div>
+    <Button>
+      Tambah
+    </Button>
+  </div>
+</template>

app/components/content/specialist/list.vue

@@ -202,7 +202,6 @@ watch(recId, () => {
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
   <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
   <AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
@@ -234,7 +233,6 @@ watch(recId, () => {
       </div>
     </template>
   </RecordConfirmation>
-  </div>
 </template>
 
 <style scoped>

app/components/content/subspecialist/list.vue

@@ -203,7 +203,6 @@ watch(recId, () => {
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
   <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
   <AppSubspecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
@@ -237,5 +236,4 @@ watch(recId, () => {
       </div>
     </template>
   </RecordConfirmation>
-  </div>
 </template>

app/components/content/tools/list.vue

@@ -131,11 +131,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-4">
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
-    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
-    <div class="rounded-md border p-4">
   <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    </div>
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
@@ -178,5 +175,4 @@ onMounted(async () => {
       </div>
     </template>
   </RecordConfirmation>
-  </div>
 </template>

app/components/content/unit/list.vue

@@ -177,7 +177,6 @@ function handleCancelConfirmation() {
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
   <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
   <AppUnitList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
@@ -201,7 +200,6 @@ v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
       </div>
     </template>
   </RecordConfirmation>
-  </div>
 </template>
 
 <style scoped>

app/components/layout/SidebarNavGroup.vue

@@ -22,7 +22,7 @@ const openCollapsible = ref(false)
     <Collapsible :key="item.title" v-model:open="openCollapsible" as-child class="group/collapsible ">
       <SidebarMenuItem>
         <CollapsibleTrigger as-child>
-          <SidebarMenuButton :tooltip="item.title" :size="size">
+          <SidebarMenuButton :tooltip="item.title" :size="size" class="md:!text-xs xl:!text-sm 2xl:!text-base">
             <Icon :name="item.icon || ''" mode="svg" />
             <span class="mx-2">{{ item.title }}</span>
             <Icon
@@ -37,7 +37,7 @@ const openCollapsible = ref(false)
               <SidebarMenuSubButton as-child>
                 <NuxtLink
                   :to="subItem.link"
-                  class="mx-4 rounded-lg py-5 text-sm transition-all duration-200"
+                  class="mx-4 rounded-lg py-5 text-sm transition-all duration-200 md:!text-xs xl:!text-sm 2xl:!text-base"
                   active-class="bg-primary text-white"
                   @click="setOpenMobile(false)"
                 >

app/components/layout/SidebarNavLink.vue

@@ -21,7 +21,7 @@ const { setOpenMobile } = useSidebar()
       <SidebarMenuButton as-child :tooltip="item.title" :size="size" class="">
         <NuxtLink
           :to="item.link"
-          class="group flex items-center gap-3 rounded-lg px-2 py-4 text-sm transition-all duration-200"
+          class="group flex items-center gap-3 rounded-lg px-2 py-4 text-sm transition-all duration-200 md:!text-xs xl:!text-sm 2xl:!text-base"
           active-class="bg-primary text-white"
           @click="setOpenMobile(false)"
         >

app/components/pub/custom-ui/form/label.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    labelFor: string
+    labelFor?: string
     size?: 'default' | 'narrow' | 'wide'
     height?: 'default' | 'compact'
     position?: 'default' | 'dynamic'
@@ -48,7 +48,7 @@ const labelClass = computed(() => [props.stacked ? 'block mb-1 text-sm font-medi
 
 <template>
   <div :class="wrapperClass">
-    <label class="block text-base font-medium text-gray-600" :class="labelClass" :for="labelFor">
+    <label class="block" :class="labelClass" :for="labelFor">
       <slot />
     </label>
   </div>

app/components/pub/ui/input/Input.vue

@@ -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-9 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',
+        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-8 xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs xl:text-sm file:border-0 file:bg-transparent md:file:text-xs xl:file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "

app/components/pub/ui/label/Label.vue

@@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'md:!text-xs xl:text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         props.class,
       )
     "

app/components/pub/ui/select/SelectTrigger.vue

@@ -21,7 +21,7 @@ const iconName = computed(() => props.iconName || 'i-radix-icons-caret-sort')
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground relative flex h-10 w-full rounded-md border border-gray-400 pl-3 pr-8 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 relative flex h-9 md:h-8 xl:h-9 w-full rounded-md border border-gray-400 pl-3 pr-8 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,
       )
     "

app/layouts/default.vue

@@ -5,7 +5,11 @@ const route = useRoute()
 const contentFrame = computed(() => route.meta.contentFrame)
 const contentFrameClass = computed(() => {
   switch (contentFrame.value) {
-    case 'cf-container-lg':
+    case 'cf-container-2xl':
+      return 'cf-container-2xl'
+    case 'cf-container-2xl':
+      return 'cf-container-xl'
+    case 'cf-container-xl':
       return 'cf-container-lg'
     case 'cf-container-md':
       return 'cf-container-md'
@@ -44,10 +48,21 @@ const contentFrameClass = computed(() => {
 .cf-container-md > *,
 .cf-container-sm > *,
 .cf-full-width {
-
   width: 100%;
 }
 
+.cf-full-width > * {
+  width: 100%;
+}
+
+.cf-container-2xl > * {
+  max-width: 1400px;
+}
+
+.cf-container-xl > * {
+  max-width: 1200px;
+}
+
 .cf-container-lg > * {
   max-width: 992px;
 }

app/pages/(features)/org-src/division/index.vue

@@ -32,10 +32,8 @@ const canRead = true
 </script>
 
 <template>
-  <div>
+  <template v-if="canRead">
-    <div v-if="canRead">
     <ContentDivisionList />
-    </div>
+  </template>
-    <Error v-else :status-code="403" />
+  <Error v-else :status-code="403" />
-  </div>
 </template>

app/pages/(features)/org-src/installation/index.vue

@@ -32,10 +32,8 @@ const canRead = true
 </script>
 
 <template>
-  <div>
+  <template v-if="canRead">
-    <div v-if="canRead">
     <ContentInstallationList />
-    </div>
+  </template>
-    <Error v-else :status-code="403" />
+  <Error v-else :status-code="403" />
-  </div>
 </template>

app/pages/(features)/org-src/specialist/index.vue

@@ -32,10 +32,8 @@ const canRead = true
 </script>
 
 <template>
-  <div>
+  <template v-if="canRead">
-    <div v-if="canRead">
     <ContentSpecialistList />
-    </div>
+  </template>
-    <Error v-else :status-code="403" />
+  <Error v-else :status-code="403" />
-  </div>
 </template>

app/pages/(features)/org-src/subspecialist/index.vue

@@ -32,10 +32,8 @@ const canRead = true
 </script>
 
 <template>
-  <div>
+  <template v-if="canRead">
-    <div v-if="canRead">
     <ContentSubspecialistList />
-    </div>
+  </template>
-    <Error v-else :status-code="403" />
+  <Error v-else :status-code="403" />
-  </div>
 </template>

app/pages/(features)/org-src/unit/index.vue

@@ -32,10 +32,8 @@ const canRead = true
 </script>
 
 <template>
-  <div>
+  <template v-if="canRead">
-    <div v-if="canRead">
     <ContentUnitList />
-    </div>
+  </template>
-    <Error v-else :status-code="403" />
+  <Error v-else :status-code="403" />
-  </div>
 </template>

app/pages/(features)/tools-equipment-src/equipment/index.vue

@@ -7,7 +7,7 @@ definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
   title: 'Daftar User',
-  contentFrame: 'cf-full-width',
+  contentFrame: 'cf-container-lg',
 })
 
 const route = useRoute()
@@ -31,10 +31,8 @@ const canRead = true // hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div>
+  <template v-if="canRead">
-    <div v-if="canRead">
     <ContentEquipmentList />
-    </div>
+  </template>
-    <Error v-else :status-code="403" />
+  <Error v-else :status-code="403" />
-  </div>
 </template>

app/pages/(features)/tools-equipment-src/medicine-method/index.vue

@@ -7,7 +7,7 @@ definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
   title: 'Daftar Dokter',
-  contentFrame: 'cf-full-width',
+  contentFrame: 'cf-container-lg',
 })
 
 const route = useRoute()
@@ -31,10 +31,8 @@ const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div>
+  <template v-if="canRead">
-    <div v-if="canRead">
     <ContentMedicineMethodList />
-    </div>
+  </template>
-    <Error v-else :status-code="403" />
+  <Error v-else :status-code="403" />
-  </div>
 </template>

app/pages/(features)/tools-equipment-src/medicine-type/index.vue

@@ -7,7 +7,7 @@ definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
   title: 'Daftar Dokter',
-  contentFrame: 'cf-full-width',
+  contentFrame: 'cf-container-lg',
 })
 
 const route = useRoute()
@@ -31,10 +31,8 @@ const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div>
+  <template v-if="canRead">
-    <div v-if="canRead">
     <ContentMedicineGroupList />
-    </div>
+  </template>
-    <Error v-else :status-code="403" />
+  <Error v-else :status-code="403" />
-  </div>
 </template>

app/pages/(features)/tools-equipment-src/medicine/add.vue

@@ -34,8 +34,8 @@ const canCreate = hasCreateAccess(roleAccess)
 </script>
 
 <template>
-  <div v-if="canCreate">
+  <template v-if="canCreate">
     <ContentMedicineEntry />
-  </div>
+  </template>
   <Error v-else :status-code="403" />
 </template>

app/pages/(features)/tools-equipment-src/medicine/index.vue

@@ -31,10 +31,8 @@ const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div>
+  <template v-if="canRead">
-    <div v-if="canRead">
     <ContentMedicineList />
-    </div>
+  </template>
-    <Error v-else :status-code="403" />
+  <Error v-else :status-code="403" />
-  </div>
 </template>

app/pages/(features)/tools-equipment-src/tools/index.vue

@@ -7,7 +7,7 @@ definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
   title: 'Daftar User',
-  contentFrame: 'cf-full-width',
+  contentFrame: 'cf-container-lg',
 })
 
 const route = useRoute()
@@ -31,10 +31,8 @@ const canRead = true // hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div>
+  <template v-if="canRead">
-    <div v-if="canRead">
     <ContentToolsList />
-    </div>
+  </template>
-    <Error v-else :status-code="403" />
+  <Error v-else :status-code="403" />
-  </div>
 </template>

app/pages/_dev/prescription/list.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// 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)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentPrescriptionList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>