From 829bd730344b9605de89bca6050a98faefb6156c Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Mon, 29 Sep 2025 07:46:13 +0700
Subject: [PATCH] feat/tidy-up: - mengurangi elm yg tidak diperlukan -
 menyesuaikan font-size sesuai breakpoint

---
 app/assets/css/main.css                       |  6 +-
 app/components/app/medicine/entry-form.vue    |  2 +-
 .../app/prescription-item/list-entry.ts       | 66 ++++++++++++++
 .../app/prescription-item/list-entry.vue      | 19 ++++
 app/components/app/prescription/entry.vue     | 32 +++++++
 app/components/app/prescription/list.vue      | 42 +++++++++
 app/components/content/division/list.vue      | 44 +++++-----
 app/components/content/equipment/list.vue     | 86 +++++++++----------
 app/components/content/installation/list.vue  | 38 ++++----
 .../content/medicine-group/list.vue           | 84 +++++++++---------
 .../content/medicine-method/list.vue          | 84 +++++++++---------
 app/components/content/prescription/list.vue  | 69 +++++++++++++++
 app/components/content/specialist/list.vue    | 60 +++++++------
 app/components/content/subspecialist/list.vue | 64 +++++++-------
 app/components/content/tools/list.vue         | 86 +++++++++----------
 app/components/content/unit/list.vue          | 40 ++++-----
 app/components/layout/SidebarNavGroup.vue     |  6 +-
 app/components/layout/SidebarNavLink.vue      |  4 +-
 app/components/pub/custom-ui/form/label.vue   |  4 +-
 app/components/pub/ui/input/Input.vue         |  2 +-
 app/components/pub/ui/label/Label.vue         |  2 +-
 .../pub/ui/select/SelectTrigger.vue           |  2 +-
 app/layouts/default.vue                       | 19 +++-
 .../(features)/org-src/division/index.vue     | 10 +--
 .../(features)/org-src/installation/index.vue | 10 +--
 .../(features)/org-src/specialist/index.vue   | 10 +--
 .../org-src/subspecialist/index.vue           | 10 +--
 app/pages/(features)/org-src/unit/index.vue   | 10 +--
 .../tools-equipment-src/equipment/index.vue   | 12 ++-
 .../medicine-method/index.vue                 | 12 ++-
 .../medicine-type/index.vue                   | 12 ++-
 .../tools-equipment-src/medicine/add.vue      |  4 +-
 .../tools-equipment-src/medicine/index.vue    | 10 +--
 .../tools-equipment-src/tools/index.vue       | 12 ++-
 app/pages/_dev/prescription/list.vue          | 41 +++++++++
 35 files changed, 628 insertions(+), 386 deletions(-)
 create mode 100644 app/components/app/prescription-item/list-entry.ts
 create mode 100644 app/components/app/prescription-item/list-entry.vue
 create mode 100644 app/components/app/prescription/entry.vue
 create mode 100644 app/components/app/prescription/list.vue
 create mode 100644 app/components/content/prescription/list.vue
 create mode 100644 app/pages/_dev/prescription/list.vue

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index d27f89d7..b04b1eac 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -170,7 +170,11 @@ body {
 }
 
 body {
-  @apply bg-slate-100 dark:bg-slate-800;
+  @apply bg-slate-100 dark:bg-slate-800 ;
+}
+
+body, table, label {
+  @apply md:!text-xs xl:!text-sm 2xl:!text-base;
 }
 
 /* Container */
diff --git a/app/components/app/medicine/entry-form.vue b/app/components/app/medicine/entry-form.vue
index 5d3c495d..719eea5d 100644
--- a/app/components/app/medicine/entry-form.vue
+++ b/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>
diff --git a/app/components/app/prescription-item/list-entry.ts b/app/components/app/prescription-item/list-entry.ts
new file mode 100644
index 00000000..709af3c8
--- /dev/null
+++ b/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 '-'
+  // },
+}
diff --git a/app/components/app/prescription-item/list-entry.vue b/app/components/app/prescription-item/list-entry.vue
new file mode 100644
index 00000000..c27f4511
--- /dev/null
+++ b/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>
diff --git a/app/components/app/prescription/entry.vue b/app/components/app/prescription/entry.vue
new file mode 100644
index 00000000..6e276206
--- /dev/null
+++ b/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>
diff --git a/app/components/app/prescription/list.vue b/app/components/app/prescription/list.vue
new file mode 100644
index 00000000..901a6e6c
--- /dev/null
+++ b/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>
diff --git a/app/components/content/division/list.vue b/app/components/content/division/list.vue
index d77b67d3..856318b9 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -176,33 +176,31 @@ 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" />
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
+  <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
 
-      <AppDivisionEntryForm
-        :division="divisionConf" :division-tree="divisionTreeConfig" :schema="schema"
-        :initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
-      />
+    <AppDivisionEntryForm
+      :division="divisionConf" :division-tree="divisionTreeConfig" :schema="schema"
+      :initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
+    />
 
-    </Dialog>
+  </Dialog>
 
-    <!-- Record Confirmation Modal -->
-    <RecordConfirmation
-        v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
-        @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
-      >
-      <template #default="{ record }">
-        <div class="text-sm">
-          <p><strong>ID:</strong> {{ record?.id }}</p>
-          <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
-          <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
-        </div>
-      </template>
-    </RecordConfirmation>
-  </div>
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+    >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
 
 <style scoped>
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 40f5417b..37f2536a 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -130,52 +130,48 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-4">
-    <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>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog
-      v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Perlengkapan'"
-      size="lg"
-      prevent-outside
-    >
-      <AppEquipmentEntryForm
-        :schema="MaterialSchema"
-        :values="recItem"
-        :uoms="uoms"
-        :is-loading="isProcessing"
-        :is-readonly="isReadonly"
-        @submit="
-          (values: MaterialFormData, resetForm: any) => {
-            if (recId > 0) {
-              handleActionEdit(recId, values, getEquipmentList, resetForm, toast)
-              return
-            }
-            handleActionSave(values, getEquipmentList, resetForm, toast)
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Perlengkapan'"
+    size="lg"
+    prevent-outside
+  >
+    <AppEquipmentEntryForm
+      :schema="MaterialSchema"
+      :values="recItem"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MaterialFormData, resetForm: any) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getEquipmentList, resetForm, toast)
+            return
           }
-        "
-        @cancel="handleCancelForm"
-      />
-    </Dialog>
+          handleActionSave(values, getEquipmentList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
 
-    <!-- Record Confirmation Modal -->
-    <RecordConfirmation
-      v-model:open="isRecordConfirmationOpen"
-      action="delete"
-      :record="recItem"
-      @confirm="() => handleActionRemove(recId, getEquipmentList, toast)"
-      @cancel=""
-    >
-      <template #default="{ record }">
-        <div class="text-sm">
-          <p><strong>ID:</strong> {{ record?.id }}</p>
-          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
-          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
-        </div>
-      </template>
-    </RecordConfirmation>
-  </div>
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getEquipmentList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index 5ecf55f7..baeab8c9 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -179,28 +179,26 @@ 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" />
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Instalasi" size="lg" prevent-outside>
-      <AppInstallationEntryForm :installation="installationConf" :schema="schemaConf"
-        :initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
-        @cancel="onCancelForm" />
-    </Dialog>
+  <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Instalasi" size="lg" prevent-outside>
+    <AppInstallationEntryForm :installation="installationConf" :schema="schemaConf"
+      :initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
+      @cancel="onCancelForm" />
+  </Dialog>
 
-    <!-- Record Confirmation Modal -->
-    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
-      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
-      <template #default="{ record }">
-        <div class="text-sm">
-          <p><strong>ID:</strong> {{ record?.id }}</p>
-          <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
-          <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
-        </div>
-      </template>
-    </RecordConfirmation>
-  </div>
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
 
 <style scoped>
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 5dd89f9c..5d3240bc 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -112,51 +112,47 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-4">
-    <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>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppMedicineGroupList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog
-      v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Kelompok Obat'"
-      size="lg"
-      prevent-outside
-    >
-      <AppMedicineGroupEntryForm
-        :schema="MedicineBaseSchema"
-        :values="recItem"
-        :is-loading="isProcessing"
-        :is-readonly="isReadonly"
-        @submit="
-          (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
-            if (recId > 0) {
-              handleActionEdit(recId, values, getMedicineGroupList, resetForm, toast)
-              return
-            }
-            handleActionSave(values, getMedicineGroupList, resetForm, toast)
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Kelompok Obat'"
+    size="lg"
+    prevent-outside
+  >
+    <AppMedicineGroupEntryForm
+      :schema="MedicineBaseSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMedicineGroupList, resetForm, toast)
+            return
           }
-        "
-        @cancel="handleCancelForm"
-      />
-    </Dialog>
+          handleActionSave(values, getMedicineGroupList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
 
-    <!-- Record Confirmation Modal -->
-    <RecordConfirmation
-      v-model:open="isRecordConfirmationOpen"
-      action="delete"
-      :record="recItem"
-      @confirm="() => handleActionRemove(recId, getMedicineGroupList, toast)"
-      @cancel=""
-    >
-      <template #default="{ record }">
-        <div class="text-sm">
-          <p><strong>ID:</strong> {{ record?.id }}</p>
-          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
-          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
-        </div>
-      </template>
-    </RecordConfirmation>
-  </div>
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMedicineGroupList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index 49d42e42..c88920bf 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -112,51 +112,47 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-4">
-    <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>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog
-      v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Metode Obat'"
-      size="lg"
-      prevent-outside
-    >
-      <AppMedicineMethodEntryForm
-        :schema="MedicineBaseSchema"
-        :values="recItem"
-        :is-loading="isProcessing"
-        :is-readonly="isReadonly"
-        @submit="
-          (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
-            if (recId > 0) {
-              handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
-              return
-            }
-            handleActionSave(values, getMedicineMethodList, resetForm, toast)
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Metode Obat'"
+    size="lg"
+    prevent-outside
+  >
+    <AppMedicineMethodEntryForm
+      :schema="MedicineBaseSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
+            return
           }
-        "
-        @cancel="handleCancelForm"
-      />
-    </Dialog>
+          handleActionSave(values, getMedicineMethodList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
 
-    <!-- Record Confirmation Modal -->
-    <RecordConfirmation
-      v-model:open="isRecordConfirmationOpen"
-      action="delete"
-      :record="recItem"
-      @confirm="() => handleActionRemove(recId, getMedicineMethodList, toast)"
-      @cancel=""
-    >
-      <template #default="{ record }">
-        <div class="text-sm">
-          <p><strong>ID:</strong> {{ record?.id }}</p>
-          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
-          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
-        </div>
-      </template>
-    </RecordConfirmation>
-  </div>
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMedicineMethodList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
new file mode 100644
index 00000000..a98202f2
--- /dev/null
+++ b/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>
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index b384bfc1..7cf4e993 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -202,39 +202,37 @@ 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" />
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
-      <AppSpecialistEntryForm
-        :installation="installationConf"
-        :unit="filteredUnitConf"
-        :schema="schemaConf"
-        :disabled-unit="!selectedInstallationId"
-        :initial-values="{ name: '', code: '', installationId: '', unitId: '' }"
-        @submit="onSubmitForm"
-        @cancel="onCancelForm"
-        @installation-changed="onInstallationChanged"
-      />
-    </Dialog>
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
+    <AppSpecialistEntryForm
+      :installation="installationConf"
+      :unit="filteredUnitConf"
+      :schema="schemaConf"
+      :disabled-unit="!selectedInstallationId"
+      :initial-values="{ name: '', code: '', installationId: '', unitId: '' }"
+      @submit="onSubmitForm"
+      @cancel="onCancelForm"
+      @installation-changed="onInstallationChanged"
+    />
+  </Dialog>
 
-    <RecordConfirmation
-      v-model:open="isRecordConfirmationOpen"
-      action="delete"
-      :record="recItem"
-      @confirm="handleConfirmDelete"
-      @cancel="handleCancelConfirmation"
-    >
-      <template #default="{ record }">
-        <div class="text-sm">
-          <p><strong>ID:</strong> {{ record?.id }}</p>
-          <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
-          <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
-        </div>
-      </template>
-    </RecordConfirmation>
-  </div>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="handleConfirmDelete"
+    @cancel="handleCancelConfirmation"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
 
 <style scoped>
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
index bfb4e4b9..a478ef22 100644
--- a/app/components/content/subspecialist/list.vue
+++ b/app/components/content/subspecialist/list.vue
@@ -203,39 +203,37 @@ 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" />
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppSubspecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
-      <AppSubspecialistEntryForm
-        :installation="installationConf"
-        :unit="filteredUnitConf"
-        :specialist="specialistConf"
-        :schema="schemaConf"
-        :initial-values="{ name: '', code: '', installationId: '', unitId: '', specialistId: '' }"
-        @submit="onSubmitForm"
-        @cancel="onCancelForm"
-        @installation-changed="onInstallationChanged"
-        @unit-changed="onUnitChanged"
-      />
-    </Dialog>
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
+    <AppSubspecialistEntryForm
+      :installation="installationConf"
+      :unit="filteredUnitConf"
+      :specialist="specialistConf"
+      :schema="schemaConf"
+      :initial-values="{ name: '', code: '', installationId: '', unitId: '', specialistId: '' }"
+      @submit="onSubmitForm"
+      @cancel="onCancelForm"
+      @installation-changed="onInstallationChanged"
+      @unit-changed="onUnitChanged"
+    />
+  </Dialog>
 
-    <RecordConfirmation
-      v-model:open="isRecordConfirmationOpen"
-      action="delete"
-      :record="recItem"
-      @confirm="handleConfirmDelete"
-      @cancel="handleCancelConfirmation"
-    >
-      <template #default="{ record }">
-        <div class="text-sm">
-          <p><strong>ID:</strong> {{ record?.id }}</p>
-          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
-          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
-          <p v-if="record?.specialist"><strong>Specialist:</strong> {{ record.specialist?.name }}</p>
-        </div>
-      </template>
-    </RecordConfirmation>
-  </div>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="handleConfirmDelete"
+    @cancel="handleCancelConfirmation"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        <p v-if="record?.specialist"><strong>Specialist:</strong> {{ record.specialist?.name }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index 613df671..0b270204 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -131,52 +131,48 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-4">
-    <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>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog
-      v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Peralatan'"
-      size="lg"
-      prevent-outside
-    >
-      <AppToolsEntryForm
-        :schema="DeviceSchema"
-        :values="recItem"
-        :uoms="uoms"
-        :is-loading="isProcessing"
-        :is-readonly="isReadonly"
-        @submit="
-          (values: DeviceFormData, resetForm: any) => {
-            if (recId > 0) {
-              handleActionEdit(recId, values, getToolsList, resetForm, toast)
-              return
-            }
-            handleActionSave(values, getToolsList, resetForm, toast)
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Peralatan'"
+    size="lg"
+    prevent-outside
+  >
+    <AppToolsEntryForm
+      :schema="DeviceSchema"
+      :values="recItem"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DeviceFormData, resetForm: any) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getToolsList, resetForm, toast)
+            return
           }
-        "
-        @cancel="handleCancelForm"
-      />
-    </Dialog>
+          handleActionSave(values, getToolsList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
 
-    <!-- Record Confirmation Modal -->
-    <RecordConfirmation
-      v-model:open="isRecordConfirmationOpen"
-      action="delete"
-      :record="recItem"
-      @confirm="() => handleActionRemove(recId, getToolsList, toast)"
-      @cancel=""
-    >
-      <template #default="{ record }">
-        <div class="text-sm">
-          <p><strong>ID:</strong> {{ record?.id }}</p>
-          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
-          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
-        </div>
-      </template>
-    </RecordConfirmation>
-  </div>
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getToolsList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 03ee6c9a..b54b3c0c 100644
--- a/app/components/content/unit/list.vue
+++ b/app/components/content/unit/list.vue
@@ -177,31 +177,29 @@ 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" />
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <AppUnitList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Unit" size="lg" prevent-outside>
-      <AppUnitEntryForm
-:unit="unitConf" :schema="schemaConf" :initial-values="{ name: '', code: '', parentId: '' }"
-        @submit="onSubmitForm" @cancel="onCancelForm"
+  <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Unit" size="lg" prevent-outside>
+    <AppUnitEntryForm
+      :unit="unitConf" :schema="schemaConf" :initial-values="{ name: '', code: '', parentId: '' }"
+      @submit="onSubmitForm" @cancel="onCancelForm"
 />
-    </Dialog>
+  </Dialog>
 
-    <!-- Record Confirmation Modal -->
-    <RecordConfirmation
-v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
-      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
 >
-      <template #default="{ record }">
-        <div class="text-sm">
-          <p><strong>ID:</strong> {{ record?.id }}</p>
-          <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
-          <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
-        </div>
-      </template>
-    </RecordConfirmation>
-  </div>
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>
 
 <style scoped>
diff --git a/app/components/layout/SidebarNavGroup.vue b/app/components/layout/SidebarNavGroup.vue
index 31b55e8d..60f46105 100644
--- a/app/components/layout/SidebarNavGroup.vue
+++ b/app/components/layout/SidebarNavGroup.vue
@@ -19,10 +19,10 @@ const openCollapsible = ref(false)
 
 <template>
   <SidebarMenu>
-    <Collapsible :key="item.title" v-model:open="openCollapsible" as-child class="group/collapsible">
+    <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)"
                 >
diff --git a/app/components/layout/SidebarNavLink.vue b/app/components/layout/SidebarNavLink.vue
index 08d5a9aa..260c48be 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" 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)"
         >
@@ -29,7 +29,7 @@ const { setOpenMobile } = useSidebar()
           <span class="mx-1">{{ 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"
+            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>
diff --git a/app/components/pub/custom-ui/form/label.vue b/app/components/pub/custom-ui/form/label.vue
index 42274ee6..4186d880 100644
--- a/app/components/pub/custom-ui/form/label.vue
+++ b/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>
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 6acffbae..c00ba9d7 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/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,
       )
     "
diff --git a/app/components/pub/ui/label/Label.vue b/app/components/pub/ui/label/Label.vue
index b4a607a3..46a01863 100644
--- a/app/components/pub/ui/label/Label.vue
+++ b/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,
       )
     "
diff --git a/app/components/pub/ui/select/SelectTrigger.vue b/app/components/pub/ui/select/SelectTrigger.vue
index 6cb99609..0a81e3cb 100644
--- a/app/components/pub/ui/select/SelectTrigger.vue
+++ b/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,
       )
     "
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 3b4a774c..c15786f2 100644
--- a/app/layouts/default.vue
+++ b/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;
 }
diff --git a/app/pages/(features)/org-src/division/index.vue b/app/pages/(features)/org-src/division/index.vue
index 7595239a..e0a8a1fc 100644
--- a/app/pages/(features)/org-src/division/index.vue
+++ b/app/pages/(features)/org-src/division/index.vue
@@ -32,10 +32,8 @@ const canRead = true
 </script>
 
 <template>
-  <div>
-    <div v-if="canRead">
-      <ContentDivisionList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentDivisionList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/org-src/installation/index.vue b/app/pages/(features)/org-src/installation/index.vue
index 09c8cdc5..d8b934da 100644
--- a/app/pages/(features)/org-src/installation/index.vue
+++ b/app/pages/(features)/org-src/installation/index.vue
@@ -32,10 +32,8 @@ const canRead = true
 </script>
 
 <template>
-  <div>
-    <div v-if="canRead">
-      <ContentInstallationList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentInstallationList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/org-src/specialist/index.vue b/app/pages/(features)/org-src/specialist/index.vue
index 85ea283e..e3e47d72 100644
--- a/app/pages/(features)/org-src/specialist/index.vue
+++ b/app/pages/(features)/org-src/specialist/index.vue
@@ -32,10 +32,8 @@ const canRead = true
 </script>
 
 <template>
-  <div>
-    <div v-if="canRead">
-      <ContentSpecialistList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentSpecialistList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/org-src/subspecialist/index.vue b/app/pages/(features)/org-src/subspecialist/index.vue
index a7a489d2..7065ca77 100644
--- a/app/pages/(features)/org-src/subspecialist/index.vue
+++ b/app/pages/(features)/org-src/subspecialist/index.vue
@@ -32,10 +32,8 @@ const canRead = true
 </script>
 
 <template>
-  <div>
-    <div v-if="canRead">
-      <ContentSubspecialistList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentSubspecialistList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/org-src/unit/index.vue b/app/pages/(features)/org-src/unit/index.vue
index d6e30dfd..b4a96759 100644
--- a/app/pages/(features)/org-src/unit/index.vue
+++ b/app/pages/(features)/org-src/unit/index.vue
@@ -32,10 +32,8 @@ const canRead = true
 </script>
 
 <template>
-  <div>
-    <div v-if="canRead">
-      <ContentUnitList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentUnitList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/tools-equipment-src/equipment/index.vue b/app/pages/(features)/tools-equipment-src/equipment/index.vue
index 92061d83..1cbf7b3e 100644
--- a/app/pages/(features)/tools-equipment-src/equipment/index.vue
+++ b/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>
-    <div v-if="canRead">
-      <ContentEquipmentList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentEquipmentList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine-method/index.vue b/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
index 29383fb4..5be2a8d9 100644
--- a/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
+++ b/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>
-    <div v-if="canRead">
-      <ContentMedicineMethodList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentMedicineMethodList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine-type/index.vue b/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
index cc8d6afe..9130ccf9 100644
--- a/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
+++ b/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>
-    <div v-if="canRead">
-      <ContentMedicineGroupList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentMedicineGroupList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/add.vue b/app/pages/(features)/tools-equipment-src/medicine/add.vue
index adf77a76..0a93f9b3 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/add.vue
+++ b/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>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/index.vue b/app/pages/(features)/tools-equipment-src/medicine/index.vue
index 3c8b58da..21622650 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/index.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine/index.vue
@@ -31,10 +31,8 @@ const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div>
-    <div v-if="canRead">
-      <ContentMedicineList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentMedicineList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/tools-equipment-src/tools/index.vue b/app/pages/(features)/tools-equipment-src/tools/index.vue
index 5301e65a..00849cfd 100644
--- a/app/pages/(features)/tools-equipment-src/tools/index.vue
+++ b/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>
-    <div v-if="canRead">
-      <ContentToolsList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
+  <template v-if="canRead">
+    <ContentToolsList />
+  </template>
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/_dev/prescription/list.vue b/app/pages/_dev/prescription/list.vue
new file mode 100644
index 00000000..733f011f
--- /dev/null
+++ b/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>