From f94b6d273a627cd0affe234c0791d6fa9726bd37 Mon Sep 17 00:00:00 2001
From: Muhammad Rifai <rie.five@gmail.com>
Date: Fri, 10 Oct 2025 20:36:07 +0700
Subject: [PATCH 01/10] Feat Infra (#108)

* fix: adjustment some schemas

* fix(room): fixing integrate unit of room

* feat(warehouse): modify form and integration

* feat(counter): modify form and integration

* feat(screen): add list, form and integration

* feat(screen): add page for public screen

* fix: add on reset state at list

* fix: solve list of relation

* feat(chamber): integrate form to api chamber

* feat(bed): integrate form to api bed

* fix: add searching function on list service

* fix: rewrite style for dropdown and tree select

* fix: add sort params

* fix: add sort params on division + medicine

* feat(division-position): layouting form + list

* fix: add sort params for getValueList

* chore: modify side menu style

* chore: fix ui dashboard

* feat(division-position): add content list

* feat(division-position): add temporary page

* feat(division-position): modify content and entry form
---
 app/components/app/bed/entry-form.vue         |  67 +++++-
 app/components/app/bed/list-cfg.ts            |   7 +-
 app/components/app/bed/list.vue               |  11 +-
 app/components/app/chamber/entry-form.vue     |  67 +++++-
 app/components/app/chamber/list-cfg.ts        |   7 +-
 app/components/app/chamber/list.vue           |   9 +-
 app/components/app/counter/entry-form.vue     |   6 +-
 .../app/division-position/entry-form.vue      | 207 ++++++++++++++++++
 .../app/division-position/list-cfg.ts         |  64 ++++++
 app/components/app/division-position/list.vue |  41 ++++
 app/components/app/division/entry-form.vue    |   9 +-
 app/components/app/floor/entry-form.vue       |  41 +++-
 .../app/public-screen/entry-form.vue          | 108 +++++++++
 app/components/app/public-screen/list-cfg.ts  |  37 ++++
 app/components/app/public-screen/list.vue     |  41 ++++
 app/components/app/room/entry-form.vue        |  78 ++++---
 app/components/app/room/list-cfg.ts           |  17 +-
 app/components/app/unit/entry-form.vue        |   4 +-
 app/components/app/warehouse/entry-form.vue   |  67 +++++-
 app/components/app/warehouse/list-cfg.ts      |   7 +-
 app/components/app/warehouse/list.vue         |   9 +-
 app/components/content/bed/list.vue           | 202 ++++++++++++++++-
 app/components/content/building/list.vue      |  48 +++-
 app/components/content/chamber/list.vue       | 202 ++++++++++++++++-
 app/components/content/counter/list.vue       |  41 +++-
 app/components/content/dashboard/index.vue    |   6 +-
 .../content/division-position/list.vue        | 201 +++++++++++++++++
 app/components/content/division/list.vue      |  12 +-
 app/components/content/equipment/list.vue     |  31 ++-
 app/components/content/floor/list.vue         |  50 ++++-
 app/components/content/installation/list.vue  |  31 ++-
 .../content/medicine-group/list.vue           |   8 +
 .../content/medicine-method/list.vue          |   8 +
 app/components/content/medicine/list.vue      |  42 +++-
 app/components/content/public-screen/list.vue | 194 ++++++++++++++++
 app/components/content/room/list.vue          | 117 +++++++---
 app/components/content/specialist/list.vue    |  29 ++-
 app/components/content/subspecialist/list.vue |  29 ++-
 app/components/content/tools/list.vue         |  35 ++-
 app/components/content/unit/list.vue          |  36 ++-
 app/components/content/uom/list.vue           |  36 ++-
 app/components/content/warehouse/list.vue     | 202 ++++++++++++++++-
 .../pub/my-ui/data/dropdown-action-du.vue     |  47 ++--
 .../pub/my-ui/data/dropdown-action-ducd.vue   |  59 ++---
 .../pub/my-ui/data/dropdown-action-dud.vue    |  59 ++---
 .../pub/my-ui/data/dropdown-action-pdud.vue   |  71 +++---
 .../pub/my-ui/data/dropdown-action-ud.vue     |  47 ++--
 app/components/pub/my-ui/doc-entry/label.vue  |   2 +-
 app/components/pub/my-ui/form/combobox.vue    |   6 +-
 .../pub/my-ui/select-tree/command-item.vue    |   7 +-
 app/components/pub/my-ui/select-tree/leaf.vue |   4 +-
 .../pub/my-ui/select-tree/tree-node.vue       |  29 ++-
 .../pub/my-ui/select-tree/tree-select.vue     |  26 ++-
 .../pub/ui/sidebar/SidebarMenuSubButton.vue   |  39 ++--
 app/components/pub/ui/sidebar/index.ts        |   8 +-
 app/lib/constants.ts                          |  15 +-
 app/models/division-position.ts               |   4 +-
 .../service-src/public-screen/index.vue       |  24 ++
 app/pages/_dev/division-position/index.vue    |  24 ++
 app/schemas/device.schema.ts                  |   2 +-
 app/schemas/division-position.schema.ts       |  21 ++
 app/schemas/division.schema.ts                |   4 +-
 app/schemas/infra.schema.ts                   |   2 +-
 app/schemas/installation.schema.ts            |   3 +-
 app/schemas/material.schema.ts                |   2 +-
 app/schemas/specialist.schema.ts              |   2 +-
 app/schemas/subspecialist.schema.ts           |   2 +-
 app/schemas/unit.schema.ts                    |   2 +-
 app/services/division.service.ts              |   1 -
 app/services/employee.service.ts              |  38 ++++
 app/services/item.service.ts                  |  38 ++++
 app/services/specialist.service.ts            |   1 +
 app/services/subspecialist.service.ts         |   1 +
 73 files changed, 2638 insertions(+), 416 deletions(-)
 create mode 100644 app/components/app/division-position/entry-form.vue
 create mode 100644 app/components/app/division-position/list-cfg.ts
 create mode 100644 app/components/app/division-position/list.vue
 create mode 100644 app/components/app/public-screen/entry-form.vue
 create mode 100644 app/components/app/public-screen/list-cfg.ts
 create mode 100644 app/components/app/public-screen/list.vue
 create mode 100644 app/components/content/division-position/list.vue
 create mode 100644 app/components/content/public-screen/list.vue
 create mode 100644 app/pages/(features)/service-src/public-screen/index.vue
 create mode 100644 app/pages/_dev/division-position/index.vue
 create mode 100644 app/schemas/division-position.schema.ts
 create mode 100644 app/services/employee.service.ts
 create mode 100644 app/services/item.service.ts

diff --git a/app/components/app/bed/entry-form.vue b/app/components/app/bed/entry-form.vue
index fb851aa4..0b103cd0 100644
--- a/app/components/app/bed/entry-form.vue
+++ b/app/components/app/bed/entry-form.vue
@@ -5,6 +5,10 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
 
 // Types
 import type { InfraFormData } from '~/schemas/infra.schema'
@@ -16,6 +20,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 
 interface Props {
   schema: z.ZodSchema<any>
+  parents: any[]
   values: any
   isLoading?: boolean
   isReadonly?: boolean
@@ -34,27 +39,28 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    infraGroup_code: 'counter',
+    infraGroup_code: infraGroupCodesKeys.bed,
     parent_id: null,
   } as Partial<InfraFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
+const [infraGroup_code] = defineField('infraGroup_code')
 const [parent_id, parentIdAttrs] = defineField('parent_id')
 
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
-  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  infraGroup_code.value = 'counter'
+  infraGroup_code.value = infraGroupCodesKeys.bed
   parent_id.value = null
 }
 
@@ -62,8 +68,8 @@ function onSubmitForm() {
   const formData: InfraFormData = {
     code: code.value || '',
     name: name.value || '',
-    infraGroup_code: infraGroup_code.value || 'counter',
-    parent_id: parent_id.value || null,
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.bed,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
   }
   emit('submit', formData, resetForm)
 }
@@ -74,23 +80,62 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-counter" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Kamar</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentIdAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Kamar"
+            search-placeholder="Cari Kamar"
+            empty-message="Item tidak ditemukan"
+          />
         </Field>
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"
diff --git a/app/components/app/bed/list-cfg.ts b/app/components/app/bed/list-cfg.ts
index 5174e69a..8e940723 100644
--- a/app/components/app/bed/list-cfg.ts
+++ b/app/components/app/bed/list-cfg.ts
@@ -12,9 +12,9 @@ type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
+export const cols: Col[] = [{}, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Kamar' }, { label: '' }]]
 
 export const keys = ['code', 'name', 'parent', 'action']
 
@@ -36,9 +36,6 @@ export const funcComponent: RecStrFuncComponent = {
       idx,
       rec: rec as object,
       component: action,
-      props: {
-        size: 'sm',
-      },
     }
     return res
   },
diff --git a/app/components/app/bed/list.vue b/app/components/app/bed/list.vue
index af63d76e..f8b4bf29 100644
--- a/app/components/app/bed/list.vue
+++ b/app/components/app/bed/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// Components
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
@@ -21,7 +26,7 @@ function handlePageChange(page: number) {
 
 <template>
   <div class="space-y-4">
-    <PubBaseDataTable
+    <PubMyUiDataTable
       :rows="data"
       :cols="cols"
       :header="header"
@@ -33,4 +38,4 @@ function handlePageChange(page: number) {
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/app/components/app/chamber/entry-form.vue b/app/components/app/chamber/entry-form.vue
index fb851aa4..af8da097 100644
--- a/app/components/app/chamber/entry-form.vue
+++ b/app/components/app/chamber/entry-form.vue
@@ -5,6 +5,10 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
 
 // Types
 import type { InfraFormData } from '~/schemas/infra.schema'
@@ -16,6 +20,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 
 interface Props {
   schema: z.ZodSchema<any>
+  parents: any[]
   values: any
   isLoading?: boolean
   isReadonly?: boolean
@@ -34,27 +39,28 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    infraGroup_code: 'counter',
+    infraGroup_code: infraGroupCodesKeys.chamber,
     parent_id: null,
   } as Partial<InfraFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
+const [infraGroup_code] = defineField('infraGroup_code')
 const [parent_id, parentIdAttrs] = defineField('parent_id')
 
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
-  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  infraGroup_code.value = 'counter'
+  infraGroup_code.value = infraGroupCodesKeys.chamber
   parent_id.value = null
 }
 
@@ -62,8 +68,8 @@ function onSubmitForm() {
   const formData: InfraFormData = {
     code: code.value || '',
     name: name.value || '',
-    infraGroup_code: infraGroup_code.value || 'counter',
-    parent_id: parent_id.value || null,
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.chamber,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
   }
   emit('submit', formData, resetForm)
 }
@@ -74,23 +80,62 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-counter" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Lantai</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentIdAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Lantai"
+            search-placeholder="Cari Lantai"
+            empty-message="Item tidak ditemukan"
+          />
         </Field>
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"
diff --git a/app/components/app/chamber/list-cfg.ts b/app/components/app/chamber/list-cfg.ts
index 5174e69a..0669b99b 100644
--- a/app/components/app/chamber/list-cfg.ts
+++ b/app/components/app/chamber/list-cfg.ts
@@ -12,9 +12,9 @@ type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
+export const cols: Col[] = [{}, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
 
 export const keys = ['code', 'name', 'parent', 'action']
 
@@ -36,9 +36,6 @@ export const funcComponent: RecStrFuncComponent = {
       idx,
       rec: rec as object,
       component: action,
-      props: {
-        size: 'sm',
-      },
     }
     return res
   },
diff --git a/app/components/app/chamber/list.vue b/app/components/app/chamber/list.vue
index af63d76e..e1b056ce 100644
--- a/app/components/app/chamber/list.vue
+++ b/app/components/app/chamber/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// Components
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
@@ -21,7 +26,7 @@ function handlePageChange(page: number) {
 
 <template>
   <div class="space-y-4">
-    <PubBaseDataTable
+    <PubMyUiDataTable
       :rows="data"
       :cols="cols"
       :header="header"
diff --git a/app/components/app/counter/entry-form.vue b/app/components/app/counter/entry-form.vue
index c2851e2d..67a43a85 100644
--- a/app/components/app/counter/entry-form.vue
+++ b/app/components/app/counter/entry-form.vue
@@ -37,7 +37,7 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    infraGroup_code: infraGroupCodesKeys.building,  
+    infraGroup_code: infraGroupCodesKeys.counter,  
     parent_id: null,
   } as Partial<InfraFormData>,
 })
@@ -57,7 +57,7 @@ if (props.values) {
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  infraGroup_code.value = infraGroupCodesKeys.building
+  infraGroup_code.value = infraGroupCodesKeys.counter
   parent_id.value = null
 }
 
@@ -65,7 +65,7 @@ function onSubmitForm() {
   const formData: InfraFormData = {
     code: code.value || '',
     name: name.value || '',
-    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.building,
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.counter,
     parent_id: parent_id.value || null,
   }
   emit('submit', formData, resetForm)
diff --git a/app/components/app/division-position/entry-form.vue b/app/components/app/division-position/entry-form.vue
new file mode 100644
index 00000000..9e144e64
--- /dev/null
+++ b/app/components/app/division-position/entry-form.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+
+// Types
+import type { DivisionPositionFormData } from '~/schemas/division-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genDivisionPosition } from '~/models/division-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  divisions: any[]
+  employees: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: DivisionPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [division, divisionAttrs] = defineField('division_id')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.division_id !== undefined)
+    division.value = props.values.division_id ? Number(props.values.division_id) : null
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  division.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: DivisionPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    division_id: division.value || null,
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-division-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Posisi Divisi</Label>
+        <Field :errMessage="errors.division_id">
+          <Combobox
+            id="division"
+            v-model="division"
+            v-bind="divisionAttrs"
+            :items="divisions"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Divisi"
+            search-placeholder="Cari Divisi"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Karyawan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/division-position/list-cfg.ts b/app/components/app/division-position/list-cfg.ts
new file mode 100644
index 00000000..e5a9944e
--- /dev/null
+++ b/app/components/app/division-position/list-cfg.ts
@@ -0,0 +1,64 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/my-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Divisi Induk' },
+    { label: 'Karyawan' },
+    { label: 'Status Kepala' },
+    { label: '' },
+  ],
+]
+
+export const keys = ['code', 'name', 'division', 'employee', 'head', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  division: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.division?.name || '-'
+  },
+  employee: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.employee?.name || '-'
+  },
+  head: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.headStatus ? 'Ya' : 'Tidak'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+      props: {
+        size: 'sm',
+      },
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/division-position/list.vue b/app/components/app/division-position/list.vue
new file mode 100644
index 00000000..e1b056ce
--- /dev/null
+++ b/app/components/app/division-position/list.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/division/entry-form.vue b/app/components/app/division/entry-form.vue
index edbb4625..7702fdc6 100644
--- a/app/components/app/division/entry-form.vue
+++ b/app/components/app/division/entry-form.vue
@@ -37,28 +37,24 @@ const { defineField, errors, meta } = useForm({
     code: '',
     name: '',
     parent_id: null,
-    division_id: null,
   } as Partial<DivisionFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
 const [parent, parentAttrs] = defineField('parent_id')
-const [division] = defineField('division_id')
 
 // Fill fields from props.values if provided
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.parent_id !== undefined) parent.value = String(props.values.parent_id)
-  if (props.values.division_id !== undefined) division.value = String(props.values.division_id)
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
   parent.value = null
-  division.value = null
 }
 
 // Form submission handler
@@ -68,7 +64,6 @@ function onSubmitForm() {
     name: name.value || '',
     code: code.value || '',
     parent_id: parent.value || null,
-    division_id: division.value || null,
   }
   emit('submit', formData, resetForm)
 }
@@ -113,9 +108,9 @@ function onCancelForm() {
       </Cell>
       <Cell>
         <Label height="compact">Divisi Induk</Label>
-        <Field :errMessage="errors.division">
+        <Field :errMessage="errors.parent_id">
           <TreeSelect
-            id="division"
+            id="parent"
             v-model="parent"
             v-bind="parentAttrs"
             :data="divisions"
diff --git a/app/components/app/floor/entry-form.vue b/app/components/app/floor/entry-form.vue
index 19468df5..ec78dacc 100644
--- a/app/components/app/floor/entry-form.vue
+++ b/app/components/app/floor/entry-form.vue
@@ -8,7 +8,7 @@ import Button from '~/components/pub/ui/button/Button.vue'
 import Combobox from '~/components/pub/my-ui/form/combobox.vue'
 
 // Constants
-import { infraGroupCodesKeys } from "~/lib/constants"
+import { infraGroupCodesKeys } from '~/lib/constants'
 
 // Types
 import type { InfraFormData } from '~/schemas/infra.schema'
@@ -53,7 +53,8 @@ if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
-  if (props.values.parent_id !== undefined) parent_id.value = String(props.values.parent_id)
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
 }
 
 const resetForm = () => {
@@ -79,18 +80,35 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-floor" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
@@ -101,7 +119,7 @@ function onCancelForm() {
             v-model="parent_id"
             v-bind="parentIdAttrs"
             :items="parents"
-            :disabled="isLoading || isReadonly"
+            :is-disabled="isLoading || isReadonly"
             placeholder="Pilih Gedung"
             search-placeholder="Cari Gedung"
             empty-message="Item tidak ditemukan"
@@ -110,7 +128,14 @@ function onCancelForm() {
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"
diff --git a/app/components/app/public-screen/entry-form.vue b/app/components/app/public-screen/entry-form.vue
new file mode 100644
index 00000000..0872b779
--- /dev/null
+++ b/app/components/app/public-screen/entry-form.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys['public-screen'],  
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id] = defineField('parent_id')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys['public-screen']
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys['public-screen'],
+    parent_id: parent_id.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-building" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/public-screen/list-cfg.ts b/app/components/app/public-screen/list-cfg.ts
new file mode 100644
index 00000000..905ec837
--- /dev/null
+++ b/app/components/app/public-screen/list-cfg.ts
@@ -0,0 +1,37 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/my-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [{}, {}, { width: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+
+export const keys = ['code', 'name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/public-screen/list.vue b/app/components/app/public-screen/list.vue
new file mode 100644
index 00000000..e1b056ce
--- /dev/null
+++ b/app/components/app/public-screen/list.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/app/room/entry-form.vue b/app/components/app/room/entry-form.vue
index 6f4e7708..6aca0d77 100644
--- a/app/components/app/room/entry-form.vue
+++ b/app/components/app/room/entry-form.vue
@@ -65,12 +65,12 @@ if (props.values) {
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
   if (props.values.specialist_id !== undefined)
-    specialist_id.value = props.values.specialist_id ? String(props.values.specialist_id) : null
+    specialist_id.value = props.values.specialist_id ? Number(props.values.specialist_id) : null
   if (props.values.subspecialist_id !== undefined)
-    subspecialist_id.value = props.values.subspecialist_id ? String(props.values.subspecialist_id) : null
-  if (props.values.unit_id !== undefined) unit_id.value = props.values.unit_id ? String(props.values.unit_id) : null
+    subspecialist_id.value = props.values.subspecialist_id ? Number(props.values.subspecialist_id) : null
+  if (props.values.unit_id !== undefined) unit_id.value = props.values.unit_id ? Number(props.values.unit_id) : null
   if (props.values.parent_id !== undefined)
-    parent_id.value = props.values.parent_id ? String(props.values.parent_id) : null
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
 }
 
 const resetForm = () => {
@@ -102,18 +102,50 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-building" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-building"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Lantai</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Lantai"
+            search-placeholder="Cari Lantai"
+            empty-message="Lantai tidak ditemukan"
+          />
         </Field>
       </Cell>
       <Cell>
@@ -124,7 +156,7 @@ function onCancelForm() {
             v-model="unit_id"
             v-bind="unitAttrs"
             :items="units"
-            :disabled="isLoading || isReadonly"
+            :is-disabled="isLoading || isReadonly"
             placeholder="Pilih Unit"
             search-placeholder="Cari Unit"
             empty-message="Unit tidak ditemukan"
@@ -140,7 +172,7 @@ function onCancelForm() {
             v-model="specialist_id"
             v-bind="specialistAttrs"
             :items="specialists"
-            :disabled="isLoading || isReadonly"
+            :is-disabled="isLoading || isReadonly"
             placeholder="Pilih Spesialis"
             search-placeholder="Cari spesialis"
             empty-message="Spesialis tidak ditemukan"
@@ -156,31 +188,23 @@ function onCancelForm() {
             v-model="subspecialist_id"
             v-bind="subspecialistAttrs"
             :items="subspecialists"
-            :disabled="isLoading || isReadonly"
+            :is-disabled="isLoading || isReadonly"
             placeholder="Pilih Sub Spesialis"
             search-placeholder="Cari sub spesialis"
             empty-message="Sub Spesialis tidak ditemukan"
           />
         </Field>
       </Cell>
-      <Cell>
-        <Label height="compact">Lantai</Label>
-        <Field :errMessage="errors.parent_id">
-          <Combobox
-            id="parent"
-            v-model="parent_id"
-            v-bind="parentAttrs"
-            :items="parents"
-            :disabled="isLoading || isReadonly"
-            placeholder="Pilih Lantai"
-            search-placeholder="Cari Lantai"
-            empty-message="Lantai tidak ditemukan"
-          />
-        </Field>
-      </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"
diff --git a/app/components/app/room/list-cfg.ts b/app/components/app/room/list-cfg.ts
index 98e7eb50..687d0e2e 100644
--- a/app/components/app/room/list-cfg.ts
+++ b/app/components/app/room/list-cfg.ts
@@ -14,18 +14,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 
 export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [
-  [
-    { label: 'Kode' },
-    { label: 'Nama' },
-    { label: 'Spesialis' },
-    { label: 'Sub Spesialis' },
-    { label: 'Unit' },
-    { label: '' },
-  ],
-]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
 
-export const keys = ['code', 'name', 'specialist', 'subspecialist', 'unit', 'action']
+export const keys = ['code', 'name', 'parent', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -45,6 +36,10 @@ export const funcParsed: RecStrFuncUnknown = {
     const recX = rec as SmallDetailDto
     return recX.unit?.name || '-'
   },
+  parent: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.parent?.name || '-'
+  },
 }
 
 export const funcComponent: RecStrFuncComponent = {
diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
index 2f25b065..f400967f 100644
--- a/app/components/app/unit/entry-form.vue
+++ b/app/components/app/unit/entry-form.vue
@@ -48,7 +48,7 @@ if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.installation_id !== undefined)
-    installation.value = props.values.installation_id ? String(props.values.installation_id) : null
+    installation.value = props.values.installation_id ? Number(props.values.installation_id) : null
 }
 
 const resetForm = () => {
@@ -58,7 +58,7 @@ const resetForm = () => {
 }
 
 // Form submission handler
-function onSubmitForm(values: any) {
+function onSubmitForm() {
   const formData: UnitFormData = {
     name: name.value || '',
     code: code.value || '',
diff --git a/app/components/app/warehouse/entry-form.vue b/app/components/app/warehouse/entry-form.vue
index fb851aa4..ad367706 100644
--- a/app/components/app/warehouse/entry-form.vue
+++ b/app/components/app/warehouse/entry-form.vue
@@ -5,6 +5,10 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
 
 // Types
 import type { InfraFormData } from '~/schemas/infra.schema'
@@ -16,6 +20,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 
 interface Props {
   schema: z.ZodSchema<any>
+  parents: any[]
   values: any
   isLoading?: boolean
   isReadonly?: boolean
@@ -34,27 +39,28 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    infraGroup_code: 'counter',
+    infraGroup_code: infraGroupCodesKeys.warehouse,
     parent_id: null,
   } as Partial<InfraFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
+const [infraGroup_code] = defineField('infraGroup_code')
 const [parent_id, parentIdAttrs] = defineField('parent_id')
 
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
-  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  infraGroup_code.value = 'counter'
+  infraGroup_code.value = infraGroupCodesKeys.warehouse
   parent_id.value = null
 }
 
@@ -62,8 +68,8 @@ function onSubmitForm() {
   const formData: InfraFormData = {
     code: code.value || '',
     name: name.value || '',
-    infraGroup_code: infraGroup_code.value || 'counter',
-    parent_id: parent_id.value || null,
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.warehouse,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
   }
   emit('submit', formData, resetForm)
 }
@@ -74,23 +80,62 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-counter" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Lantai</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentIdAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Lantai"
+            search-placeholder="Cari Lantai"
+            empty-message="Item tidak ditemukan"
+          />
         </Field>
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"
diff --git a/app/components/app/warehouse/list-cfg.ts b/app/components/app/warehouse/list-cfg.ts
index 5174e69a..0669b99b 100644
--- a/app/components/app/warehouse/list-cfg.ts
+++ b/app/components/app/warehouse/list-cfg.ts
@@ -12,9 +12,9 @@ type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
+export const cols: Col[] = [{}, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
 
 export const keys = ['code', 'name', 'parent', 'action']
 
@@ -36,9 +36,6 @@ export const funcComponent: RecStrFuncComponent = {
       idx,
       rec: rec as object,
       component: action,
-      props: {
-        size: 'sm',
-      },
     }
     return res
   },
diff --git a/app/components/app/warehouse/list.vue b/app/components/app/warehouse/list.vue
index af63d76e..e1b056ce 100644
--- a/app/components/app/warehouse/list.vue
+++ b/app/components/app/warehouse/list.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// Components
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
@@ -21,7 +26,7 @@ function handlePageChange(page: number) {
 
 <template>
   <div class="space-y-4">
-    <PubBaseDataTable
+    <PubMyUiDataTable
       :rows="data"
       :cols="cols"
       :header="header"
diff --git a/app/components/content/bed/list.vue b/app/components/content/bed/list.vue
index 814e3501..46ed0f11 100644
--- a/app/components/content/bed/list.vue
+++ b/app/components/content/bed/list.vue
@@ -1,8 +1,198 @@
-<!-- Duplicated from content/counter/list.vue for bed -->
-<!-- TODO: Update logic and fields for bed context -->
-<template>
-  ...existing code...
-</template>
 <script setup lang="ts">
-  // ...existing code...
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppBedList from '~/components/app/bed/list.vue'
+import AppBedEntryForm from '~/components/app/bed/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.bed,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'bed',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Kasur',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Kasur'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Kasur'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ sort: 'createdAt:asc', 'infraGroup-code': infraGroupCodesKeys.chamber })
+  await getItemList()
+})
 </script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppBedList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Kasur'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppBedEntryForm
+      :schema="InfraSchema"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, 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/building/list.vue b/app/components/content/building/list.vue
index 1b8a1d3d..364f9a59 100644
--- a/app/components/content/building/list.vue
+++ b/app/components/content/building/list.vue
@@ -7,7 +7,7 @@ import AppBuildingEntryForm from '~/components/app/building/entry-form.vue'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
 // Constants
-import { infraGroupCodesKeys } from "~/lib/constants"
+import { infraGroupCodesKeys } from '~/lib/constants'
 
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
@@ -26,6 +26,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -49,6 +50,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
       'infraGroup-code': infraGroupCodesKeys.building,
@@ -62,7 +64,7 @@ const headerPrep: HeaderPrep = {
   title: 'Gedung',
   icon: 'i-lucide-layout-list',
   refSearchNav: {
-    placeholder: 'Cari gedung...',
+    placeholder: 'Cari (min. 3 karakter)...',
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
@@ -122,10 +124,31 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
-  <AppBuildingList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppBuildingList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Gedung'" size="lg" prevent-outside>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Gedung'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
     <AppBuildingEntryForm
       :schema="InfraSchema"
       :values="recItem"
@@ -153,9 +176,18 @@ onMounted(async () => {
   >
     <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>
+          <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>
diff --git a/app/components/content/chamber/list.vue b/app/components/content/chamber/list.vue
index 32b6c945..66098a84 100644
--- a/app/components/content/chamber/list.vue
+++ b/app/components/content/chamber/list.vue
@@ -1,8 +1,198 @@
-<!-- Duplicated from content/counter/list.vue for chamber -->
-<!-- TODO: Update logic and fields for chamber context -->
-<template>
-  ...existing code...
-</template>
 <script setup lang="ts">
-  // ...existing code...
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppChamberList from '~/components/app/chamber/list.vue'
+import AppChamberEntryForm from '~/components/app/chamber/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.chamber,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'chamber',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Kamar',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Kamar'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Kamar'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ sort: 'createdAt:asc', 'infraGroup-code': infraGroupCodesKeys.floor })
+  await getItemList()
+})
 </script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppChamberList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Kamar'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppChamberEntryForm
+      :schema="InfraSchema"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, 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/counter/list.vue b/app/components/content/counter/list.vue
index a3f3e98d..8757c0d2 100644
--- a/app/components/content/counter/list.vue
+++ b/app/components/content/counter/list.vue
@@ -2,9 +2,13 @@
 // Components
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppCounterList from '~/components/app/counter/list.vue'
 import AppCounterEntryForm from '~/components/app/counter/entry-form.vue'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
 import { toast } from '~/components/pub/ui/toast'
@@ -22,6 +26,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -32,6 +37,7 @@ import {
 import { getList, getDetail } from '~/services/infra.service'
 
 const title = ref('')
+
 const {
   data,
   isLoading,
@@ -39,10 +45,16 @@ const {
   searchInput,
   handlePageChange,
   handleSearch,
-  fetchData: getCounterList,
+  fetchData: getItemList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getList({ search, page, infraGroup_code: 'counter' })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.counter,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'counter',
@@ -52,7 +64,7 @@ const headerPrep: HeaderPrep = {
   title: 'Counter',
   icon: 'i-lucide-layout-list',
   refSearchNav: {
-    placeholder: 'Cari counter...',
+    placeholder: 'Cari (min. 3 karakter)...',
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
@@ -79,7 +91,7 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-const getCurrentCounterDetail = async (id: number | string) => {
+const getCurrentDetail = async (id: number | string) => {
   const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
@@ -91,12 +103,12 @@ const getCurrentCounterDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentCounterDetail(recId.value)
+      getCurrentDetail(recId.value)
       title.value = 'Detail Counter'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getCurrentCounterDetail(recId.value)
+      getCurrentDetail(recId.value)
       title.value = 'Edit Counter'
       isReadonly.value = false
       break
@@ -107,7 +119,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getCounterList()
+  await getItemList()
 })
 </script>
 
@@ -115,6 +127,7 @@ onMounted(async () => {
   <Header
     v-model="searchInput"
     :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
     class="mb-4 xl:mb-5"
   />
@@ -129,6 +142,12 @@ onMounted(async () => {
     :title="!!recItem ? title : 'Tambah Counter'"
     size="lg"
     prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
   >
     <AppCounterEntryForm
       :schema="InfraSchema"
@@ -138,10 +157,10 @@ onMounted(async () => {
       @submit="
         (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
           if (recId > 0) {
-            handleActionEdit(recId, values, getCounterList, resetForm, toast)
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
             return
           }
-          handleActionSave(values, getCounterList, resetForm, toast)
+          handleActionSave(values, getItemList, resetForm, toast)
         }
       "
       @cancel="handleCancelForm"
@@ -152,7 +171,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getCounterList, toast)"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
diff --git a/app/components/content/dashboard/index.vue b/app/components/content/dashboard/index.vue
index 4aac014c..35dd78a2 100644
--- a/app/components/content/dashboard/index.vue
+++ b/app/components/content/dashboard/index.vue
@@ -139,11 +139,11 @@ onMounted(() => {
                     .join('')
                 }}</AvatarFallback>
               </Avatar>
-              <div class="grid gap-1">
-                <p class="text-sm font-medium leading-none">
+              <div class="grid gap-1 min-w-0">
+                <p class="text-sm font-medium leading-none truncate">
                   {{ recentSales.name }}
                 </p>
-                <p class="text-sm text-muted-foreground">
+                <p class="text-sm text-muted-foreground truncate">
                   {{ recentSales.email }}
                 </p>
               </div>
diff --git a/app/components/content/division-position/list.vue b/app/components/content/division-position/list.vue
new file mode 100644
index 00000000..46e22401
--- /dev/null
+++ b/app/components/content/division-position/list.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppDivisionPositionList from '~/components/app/division-position/list.vue'
+import AppDivisionPositionEntryForm from '~/components/app/division-position/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { DivisionPositionSchema, type DivisionPositionFormData } from '~/schemas/division-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/division-position.handler'
+
+// Services
+import { getList, getDetail } from '~/services/division-position.service'
+import { getValueLabelList as getDivisionLabelList } from '~/services/division.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const divisions = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDivisionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'division',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Divisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDivisionDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDivisionDetail(recId.value)
+      title.value = 'Detail Divisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDivisionDetail(recId.value)
+      title.value = 'Edit Divisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  divisions.value = await getDivisionLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
+  employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
+  await getDivisionList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppDivisionPositionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Divisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppDivisionPositionEntryForm
+      :schema="DivisionPositionSchema"
+      :divisions="divisions"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DivisionPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getDivisionList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getDivisionList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getDivisionList, 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/division/list.vue b/app/components/content/division/list.vue
index 5d19f918..0ad75edb 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -13,6 +13,7 @@ import { toast } from '~/components/pub/ui/toast'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { DivisionSchema, type DivisionFormData } from '~/schemas/division.schema'
+import type { Division } from "~/models/division"
 import type { TreeItem } from '~/models/_base'
 
 // Handlers
@@ -24,6 +25,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -48,6 +50,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
       includes: 'parent,childrens',
@@ -127,7 +130,8 @@ watch(
     })
     if (result.success) {
       const currentData = result.body.data || []
-      divisionsTrees.value = getValueTreeItems(currentData || [])
+      const normalizedData = currentData.filter((division: Division) => !division.parent_id)
+      divisionsTrees.value = getValueTreeItems(normalizedData)
     }
   },
 )
@@ -156,6 +160,12 @@ onMounted(async () => {
     :title="!!recItem ? title : 'Tambah Divisi'"
     size="lg"
     prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
   >
     <AppDivisionEntryForm
       :schema="DivisionSchema"
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 7bae66dc..4e370502 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -23,6 +23,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -33,7 +34,7 @@ import {
 import { getList, getDetail } from '~/services/material.service'
 import { getValueLabelList as getUomList } from '~/services/uom.service'
 
-const uoms = ref<{ value: string; label: string }[]>([])
+const uoms = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -48,6 +49,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
     })
@@ -129,13 +131,23 @@ onMounted(async () => {
     :ref-search-nav="headerPrep.refSearchNav"
     class="mb-4 xl:mb-5"
   />
-  <AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppEquipmentList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
     :title="!!recItem ? title : 'Tambah Perlengkapan'"
     size="lg"
     prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
   >
     <AppEquipmentEntryForm
       :schema="MaterialSchema"
@@ -166,9 +178,18 @@ onMounted(async () => {
   >
     <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>
+          <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>
diff --git a/app/components/content/floor/list.vue b/app/components/content/floor/list.vue
index 5124b456..8859d9c2 100644
--- a/app/components/content/floor/list.vue
+++ b/app/components/content/floor/list.vue
@@ -26,6 +26,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -35,7 +36,7 @@ import {
 // Services
 import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
 
-const parents = ref<{ value: string; label: string }[]>([])
+const parents = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -50,6 +51,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 2,
       'page-size': params['page-size'] || 10,
       'infraGroup-code': infraGroupCodesKeys.floor,
@@ -64,7 +66,7 @@ const headerPrep: HeaderPrep = {
   title: 'Lantai',
   icon: 'i-lucide-layout-list',
   refSearchNav: {
-    placeholder: 'Cari lantai...',
+    placeholder: 'Cari (min. 3 karakter)...',
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
@@ -119,16 +121,37 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  parents.value = await getValueLabelList({ 'infraGroup-code': infraGroupCodesKeys.building })
+  parents.value = await getValueLabelList({ sort: 'createdAt:asc', 'infraGroup-code': infraGroupCodesKeys.building })
   await getItemList()
 })
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
-  <AppFloorList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppFloorList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Gedung'" size="lg" prevent-outside>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Lantai'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
     <AppFloorEntryForm
       :schema="InfraSchema"
       :parents="parents"
@@ -157,9 +180,18 @@ onMounted(async () => {
   >
     <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>
+          <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>
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index d836581d..fe27a4ef 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -23,6 +23,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -48,7 +49,8 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
-      'page-number': params['page-number'] || 0, 
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
     })
     return { success: result.success || false, body: result.body || {} }
@@ -129,13 +131,23 @@ onMounted(async () => {
     @search="handleSearch"
     class="mb-4 xl:mb-5"
   />
-  <AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppInstallationList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
     :title="!!recItem ? title : 'Tambah Instalasi'"
     size="lg"
     prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
   >
     <AppInstallationEntryForm
       :schema="InstallationSchema"
@@ -166,9 +178,18 @@ onMounted(async () => {
   >
     <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>
+          <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>
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 7063b5d9..10c82ecd 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -23,6 +23,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -46,6 +47,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
     })
@@ -137,6 +139,12 @@ onMounted(async () => {
     :title="!!recItem ? title : 'Tambah Kelompok Obat'"
     size="lg"
     prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
   >
     <AppMedicineGroupEntryForm
       :schema="BaseSchema"
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index da6cd745..dd2b66e9 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -23,6 +23,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -46,6 +47,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
     })
@@ -137,6 +139,12 @@ onMounted(async () => {
     :title="!!recItem ? title : 'Tambah Metode Obat'"
     size="lg"
     prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
   >
     <AppMedicineMethodEntryForm
       :schema="BaseSchema"
diff --git a/app/components/content/medicine/list.vue b/app/components/content/medicine/list.vue
index d52c0ea4..4590e891 100644
--- a/app/components/content/medicine/list.vue
+++ b/app/components/content/medicine/list.vue
@@ -26,6 +26,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -55,6 +56,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
       includes: 'medicineGroup,medicineMethod,uom',
@@ -123,9 +125,9 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  medicineGroups.value = await getMedicineGroupList()
-  medicineMethods.value = await getMedicineMethodList()
-  uoms.value = await getUomList()
+  medicineGroups.value = await getMedicineGroupList({ sort: 'createdAt:asc', 'page-size': 100 })
+  medicineMethods.value = await getMedicineMethodList({ sort: 'createdAt:asc', 'page-size': 100 })
+  uoms.value = await getUomList({ sort: 'createdAt:asc', 'page-size': 100 })
   await getMedicineList()
 })
 </script>
@@ -138,9 +140,24 @@ onMounted(async () => {
     :ref-search-nav="headerPrep.refSearchNav"
     class="mb-4 xl:mb-5"
   />
-  <AppMedicineList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppMedicineList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Obat'" size="lg" prevent-outside>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Obat'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
     <AppMedicineEntryForm
       :schema="MedicineSchema"
       :values="recItem"
@@ -172,9 +189,18 @@ onMounted(async () => {
   >
     <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>
+          <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>
diff --git a/app/components/content/public-screen/list.vue b/app/components/content/public-screen/list.vue
new file mode 100644
index 00000000..0b380d61
--- /dev/null
+++ b/app/components/content/public-screen/list.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppPublicScreenList from '~/components/app/public-screen/list.vue'
+import AppPublicScreenEntryForm from '~/components/app/public-screen/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail } from '~/services/infra.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys['public-screen'],
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'counter',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Layar Publik',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Layar Publik'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Layar Publik'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppPublicScreenList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Layar Publik'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppPublicScreenEntryForm
+      :schema="InfraSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, 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/room/list.vue b/app/components/content/room/list.vue
index bd716240..a88c0230 100644
--- a/app/components/content/room/list.vue
+++ b/app/components/content/room/list.vue
@@ -26,6 +26,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -37,11 +38,14 @@ import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
 import { getValueLabelList as getSpecialistList } from '~/services/specialist.service'
 import { getValueLabelList as getSubspecialistList } from '~/services/subspecialist.service'
 import { getValueLabelList as getUnitList } from '~/services/unit.service'
+import { getDetail as getItemDetail } from '~/services/item.service'
 
 const parents = ref<{ value: string | number; label: string }[]>([])
-const specialists = ref<{ value: string; label: string }[]>([])
-const subspecialists = ref<{ value: string; label: string }[]>([])
-const units = ref<{ value: string; label: string }[]>([])
+const specialists = ref<{ value: string | number; label: string }[]>([])
+const specialistsFiltered = ref<{ value: string | number; label: string }[]>([])
+const subspecialists = ref<{ value: string | number; label: string }[]>([])
+const subspecialistsFiltered = ref<{ value: string | number; label: string }[]>([])
+const units = ref<{ value: string | number; label: string }[]>([])
 const selectedUnit = ref<string | number | null>(null)
 const selectedSpecialist = ref<string | number | null>(null)
 const title = ref('')
@@ -58,10 +62,11 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 2,
       'page-size': params['page-size'] || 10,
       'infraGroup-code': infraGroupCodesKeys.room,
-      includes: 'parent,specialist,subspecialist,unit',
+      includes: 'parent',
     })
     return { success: result.success || false, body: result.body || {} }
   },
@@ -72,7 +77,7 @@ const headerPrep: HeaderPrep = {
   title: 'Ruangan',
   icon: 'i-lucide-layout-list',
   refSearchNav: {
-    placeholder: 'Cari Ruangan...',
+    placeholder: 'Cari (min. 3 karakter)...',
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
@@ -103,6 +108,34 @@ const getCurrentDetail = async (id: number | string) => {
   const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
+    if (currentValue.item_id) {
+      const itemResult = await getItemDetail(currentValue.item_id)
+      if (itemResult.success) {
+        currentValue.item = itemResult.body?.data || {}
+      }
+    }
+    if (currentValue.rooms) {
+      const rooms: any = Array.isArray(currentValue.rooms) && currentValue.rooms.length > 0 ? currentValue.rooms[0] : {}
+      specialistsFiltered.value = rooms?.specialist
+        ? [
+            {
+              value: rooms.specialist?.id ? Number(rooms.specialist.id) : '',
+              label: rooms.specialist?.name || '',
+            },
+          ]
+        : []
+      subspecialistsFiltered.value = rooms?.subspecialist
+        ? [
+            {
+              value: rooms.subspecialist?.id ? Number(rooms.subspecialist.id) : '',
+              label: rooms.subspecialist?.name || '',
+            },
+          ]
+        : []
+      currentValue.unit_id = rooms?.unit_id || null
+      currentValue.specialist_id = rooms?.specialist_id || null
+      currentValue.subspecialist_id = rooms?.subspecialist_id || null
+    }
     recItem.value = currentValue
     isFormEntryDialogOpen.value = true
   }
@@ -126,42 +159,67 @@ watch([recId, recAction], () => {
   }
 })
 
-watch(selectedUnit, async (val) => {
-  if (val) {
-    specialists.value = await getSpecialistList({ 'unit-id': val, 'page-size': 100 })
+watch(selectedUnit, async (value: string | number | null) => {
+  specialistsFiltered.value = []
+  if (value) {
     selectedSpecialist.value = null
-    subspecialists.value = []
+    specialistsFiltered.value = specialists.value.filter((item: any) => Number(item.parent) === Number(value))
+    subspecialistsFiltered.value = []
   } else {
-    specialists.value = []
     selectedSpecialist.value = null
-    subspecialists.value = []
+    specialistsFiltered.value = []
+    subspecialistsFiltered.value = []
   }
 })
 
-watch(selectedSpecialist, async (val) => {
-  if (val) {
-    subspecialists.value = await getSubspecialistList({ 'specialist-id': val, 'page-size': 100 })
+watch(selectedSpecialist, async (value: string | number | null) => {
+  subspecialistsFiltered.value = []
+  if (value) {
+    subspecialistsFiltered.value = subspecialists.value.filter((item: any) => Number(item.parent) === Number(value))
   } else {
-    subspecialists.value = []
+    subspecialistsFiltered.value = []
   }
 })
 
 onMounted(async () => {
-  parents.value = await getValueLabelList({ 'infraGroup-code': infraGroupCodesKeys.floor })
-  units.value = await getUnitList({ 'page-size': 100 })
+  parents.value = await getValueLabelList({ sort: 'createdAt:asc', 'infraGroup-code': infraGroupCodesKeys.floor })
+  specialists.value = await getSpecialistList({ sort: 'createdAt:asc', 'page-size': 100 })
+  subspecialists.value = await getSubspecialistList({ sort: 'createdAt:asc', 'page-size': 100 })
+  units.value = await getUnitList({ sort: 'createdAt:asc', 'page-size': 100 })
   await getItemList()
 })
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
-  <AppRoomList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppRoomList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Ruangan'" size="lg" prevent-outside>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Ruangan'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
     <AppRoomEntryForm
       :schema="InfraSchema"
-      :specialists="specialists"
-      :subspecialists="subspecialists"
+      :specialists="specialistsFiltered"
+      :subspecialists="subspecialistsFiltered"
       :units="units"
       :parents="parents"
       :values="recItem"
@@ -191,9 +249,18 @@ onMounted(async () => {
   >
     <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>
+          <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>
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 5e869f3b..0a16e10e 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -23,6 +23,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -48,6 +49,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
       includes: 'unit',
@@ -130,13 +132,23 @@ onMounted(async () => {
     @search="handleSearch"
     class="mb-4 xl:mb-5"
   />
-  <AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppSpecialistList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
     :title="!!recItem ? title : 'Tambah Spesialis'"
     size="lg"
     prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
   >
     <AppSpecialistEntryForm
       :schema="SpecialistSchema"
@@ -167,9 +179,18 @@ onMounted(async () => {
   >
     <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>
+          <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>
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
index 2e5b7e44..c6750d13 100644
--- a/app/components/content/subspecialist/list.vue
+++ b/app/components/content/subspecialist/list.vue
@@ -23,6 +23,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -48,6 +49,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
       includes: 'specialist',
@@ -130,13 +132,23 @@ onMounted(async () => {
     @search="handleSearch"
     class="mb-4 xl:mb-5"
   />
-  <AppSubSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppSubSpecialistList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
     :title="!!recItem ? title : 'Tambah Sub Spesialis'"
     size="lg"
     prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
   >
     <AppSubSpecialistEntryForm
       :schema="SubspecialistSchema"
@@ -167,9 +179,18 @@ onMounted(async () => {
   >
     <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>
+          <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>
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index 32fbbdea..a81c041b 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -23,6 +23,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -46,7 +47,12 @@ const {
   fetchData: getToolsList,
 } = usePaginatedList({
   fetchFn: async (params: any) => {
-    const result = await getList({ search: params.search, 'page-number': params['page-number'] || 0 })
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'device',
@@ -130,13 +136,23 @@ onMounted(async () => {
     :ref-search-nav="headerPrep.refSearchNav"
     class="mb-4 xl:mb-5"
   />
-  <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppToolsList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
     :title="!!recItem ? title : 'Tambah Peralatan'"
     size="lg"
     prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
   >
     <AppToolsEntryForm
       :schema="DeviceSchema"
@@ -167,9 +183,18 @@ onMounted(async () => {
   >
     <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>
+          <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>
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index d8ffafa5..44d7c115 100644
--- a/app/components/content/unit/list.vue
+++ b/app/components/content/unit/list.vue
@@ -23,6 +23,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -48,6 +49,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
       includes: 'installation',
@@ -130,9 +132,24 @@ onMounted(async () => {
     @search="handleSearch"
     class="mb-4 xl:mb-5"
   />
-  <AppUnitList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppUnitList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Unit'" size="lg" prevent-outside>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Unit'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
     <AppUnitEntryForm
       :schema="UnitSchema"
       :installations="installations"
@@ -162,9 +179,18 @@ onMounted(async () => {
   >
     <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>
+          <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>
diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
index 116f0a4d..bc0226ab 100644
--- a/app/components/content/uom/list.vue
+++ b/app/components/content/uom/list.vue
@@ -22,6 +22,7 @@ import {
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
+  onResetState,
   handleActionSave,
   handleActionEdit,
   handleActionRemove,
@@ -45,6 +46,7 @@ const {
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
+      sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
     })
@@ -127,10 +129,25 @@ onMounted(async () => {
       class="mb-4 xl:mb-5"
     />
     <div class="rounded-md border p-4">
-      <AppUomList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+      <AppUomList
+        :data="data"
+        :pagination-meta="paginationMeta"
+        @page-change="handlePageChange"
+      />
     </div>
 
-    <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Uom'" size="lg" prevent-outside>
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Uom'"
+      size="lg"
+      prevent-outside
+      @update:open="
+        (value: any) => {
+          onResetState()
+          isFormEntryDialogOpen = value
+        }
+      "
+    >
       <AppUomEntryForm
         :schema="UomSchema"
         :values="recItem"
@@ -159,9 +176,18 @@ onMounted(async () => {
     >
       <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>
+            <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>
diff --git a/app/components/content/warehouse/list.vue b/app/components/content/warehouse/list.vue
index 88b7c2b6..f776d2df 100644
--- a/app/components/content/warehouse/list.vue
+++ b/app/components/content/warehouse/list.vue
@@ -1,8 +1,198 @@
-<!-- Duplicated from content/counter/list.vue for warehouse -->
-<!-- TODO: Update logic and fields for warehouse context -->
-<template>
-  ...existing code...
-</template>
 <script setup lang="ts">
-  // ...existing code...
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppWarehouseList from '~/components/app/warehouse/list.vue'
+import AppWarehouseEntryForm from '~/components/app/warehouse/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.warehouse,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'warehouse',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Gudang',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Gudang'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Gudang'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ sort: 'createdAt:asc', 'infraGroup-code': infraGroupCodesKeys.floor })
+  await getItemList()
+})
 </script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppWarehouseList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Gudang'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppWarehouseEntryForm
+      :schema="InfraSchema"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, 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/pub/my-ui/data/dropdown-action-du.vue b/app/components/pub/my-ui/data/dropdown-action-du.vue
index b44fafee..f2c668ad 100644
--- a/app/components/pub/my-ui/data/dropdown-action-du.vue
+++ b/app/components/pub/my-ui/data/dropdown-action-du.vue
@@ -9,19 +9,7 @@ const props = defineProps<{
 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 = ActionEvents.showDetail
-  recItem.value = props.rec
-}
-
-function edit() {
-  recId.value = props.rec.id || 0
-  recAction.value = ActionEvents.showEdit
-  recItem.value = props.rec
-}
-
+const activeKey = ref<string | null>(null)
 const linkItems: LinkItem[] = [
   {
     label: 'Detail',
@@ -38,6 +26,18 @@ const linkItems: LinkItem[] = [
     icon: 'i-lucide-pencil',
   },
 ]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
 </script>
 
 <template>
@@ -46,22 +46,29 @@ const linkItems: LinkItem[] = [
       <DropdownMenuTrigger as-child>
         <SidebarMenuButton
           size="lg"
-          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
         >
-          <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+          <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">
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
         <DropdownMenuGroup>
           <DropdownMenuItem
             v-for="item in linkItems"
             :key="item.label"
-            v-slot="{ active }"
-            class="hover:bg-gray-100"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
             @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
           >
-            <Icon :name="item.icon" />
-            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
           </DropdownMenuItem>
         </DropdownMenuGroup>
       </DropdownMenuContent>
diff --git a/app/components/pub/my-ui/data/dropdown-action-ducd.vue b/app/components/pub/my-ui/data/dropdown-action-ducd.vue
index 7cdb781c..61f8d5d8 100644
--- a/app/components/pub/my-ui/data/dropdown-action-ducd.vue
+++ b/app/components/pub/my-ui/data/dropdown-action-ducd.vue
@@ -9,25 +9,7 @@ const props = defineProps<{
 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 = ActionEvents.showDetail
-  recItem.value = props.rec
-}
-
-function edit() {
-  recId.value = props.rec.id || 0
-  recAction.value = ActionEvents.showEdit
-  recItem.value = props.rec
-}
-
-function del() {
-  recId.value = props.rec.id || 0
-  recAction.value = ActionEvents.showConfirmDelete
-  recItem.value = props.rec
-}
-
+const activeKey = ref<string | null>(null)
 const linkItems: LinkItem[] = [
   {
     label: 'Detail',
@@ -58,6 +40,24 @@ const linkItems: LinkItem[] = [
     icon: 'i-lucide-trash',
   },
 ]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
 </script>
 
 <template>
@@ -66,22 +66,29 @@ const linkItems: LinkItem[] = [
       <DropdownMenuTrigger as-child>
         <SidebarMenuButton
           size="lg"
-          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
         >
-          <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+          <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">
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
         <DropdownMenuGroup>
           <DropdownMenuItem
             v-for="item in linkItems"
             :key="item.label"
-            v-slot="{ active }"
-            class="hover:bg-gray-100"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
             @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
           >
-            <Icon :name="item.icon" />
-            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
           </DropdownMenuItem>
         </DropdownMenuGroup>
       </DropdownMenuContent>
diff --git a/app/components/pub/my-ui/data/dropdown-action-dud.vue b/app/components/pub/my-ui/data/dropdown-action-dud.vue
index aa6b8bc8..71979c7c 100644
--- a/app/components/pub/my-ui/data/dropdown-action-dud.vue
+++ b/app/components/pub/my-ui/data/dropdown-action-dud.vue
@@ -9,25 +9,7 @@ const props = defineProps<{
 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 = ActionEvents.showDetail
-  recItem.value = props.rec
-}
-
-function edit() {
-  recId.value = props.rec.id || 0
-  recAction.value = ActionEvents.showEdit
-  recItem.value = props.rec
-}
-
-function del() {
-  recId.value = props.rec.id || 0
-  recAction.value = ActionEvents.showConfirmDelete
-  recItem.value = props.rec
-}
-
+const activeKey = ref<string | null>(null)
 const linkItems: LinkItem[] = [
   {
     label: 'Detail',
@@ -51,6 +33,24 @@ const linkItems: LinkItem[] = [
     icon: 'i-lucide-trash',
   },
 ]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
 </script>
 
 <template>
@@ -59,22 +59,29 @@ const linkItems: LinkItem[] = [
       <DropdownMenuTrigger as-child>
         <SidebarMenuButton
           size="lg"
-          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
         >
-          <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+          <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">
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
         <DropdownMenuGroup>
           <DropdownMenuItem
             v-for="item in linkItems"
             :key="item.label"
-            v-slot="{ active }"
-            class="hover:bg-gray-100"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
             @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
           >
-            <Icon :name="item.icon" />
-            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
           </DropdownMenuItem>
         </DropdownMenuGroup>
       </DropdownMenuContent>
diff --git a/app/components/pub/my-ui/data/dropdown-action-pdud.vue b/app/components/pub/my-ui/data/dropdown-action-pdud.vue
index a65d435a..6ed6d778 100644
--- a/app/components/pub/my-ui/data/dropdown-action-pdud.vue
+++ b/app/components/pub/my-ui/data/dropdown-action-pdud.vue
@@ -9,31 +9,7 @@ const props = defineProps<{
 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 = ActionEvents.showDetail
-  recItem.value = props.rec
-}
-
-function process() {
-  recId.value = props.rec.id || 0
-  recAction.value = ActionEvents.showProcess
-  recItem.value = props.rec
-}
-
-function edit() {
-  recId.value = props.rec.id || 0
-  recAction.value = ActionEvents.showEdit
-  recItem.value = props.rec
-}
-
-function del() {
-  recId.value = props.rec.id || 0
-  recAction.value = ActionEvents.showConfirmDelete
-  recItem.value = props.rec
-}
-
+const activeKey = ref<string | null>(null)
 const linkItems: LinkItem[] = [
   {
     label: 'Proses',
@@ -64,6 +40,30 @@ const linkItems: LinkItem[] = [
     icon: 'i-lucide-trash',
   },
 ]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function process() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showProcess
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
 </script>
 
 <template>
@@ -72,22 +72,29 @@ const linkItems: LinkItem[] = [
       <DropdownMenuTrigger as-child>
         <SidebarMenuButton
           size="lg"
-          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
         >
-          <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+          <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">
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
         <DropdownMenuGroup>
           <DropdownMenuItem
             v-for="item in linkItems"
             :key="item.label"
-            v-slot="{ active }"
-            class="hover:bg-gray-100"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
             @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
           >
-            <Icon :name="item.icon" />
-            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
           </DropdownMenuItem>
         </DropdownMenuGroup>
       </DropdownMenuContent>
diff --git a/app/components/pub/my-ui/data/dropdown-action-ud.vue b/app/components/pub/my-ui/data/dropdown-action-ud.vue
index cf29d15d..8f71b362 100644
--- a/app/components/pub/my-ui/data/dropdown-action-ud.vue
+++ b/app/components/pub/my-ui/data/dropdown-action-ud.vue
@@ -14,19 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
 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 = ActionEvents.showEdit
-  recItem.value = props.rec
-}
-
-function del() {
-  recId.value = props.rec.id || 0
-  recAction.value = ActionEvents.showConfirmDelete
-  recItem.value = props.rec
-}
-
+const activeKey = ref<string | null>(null)
 const linkItems: LinkItem[] = [
   {
     label: 'Edit',
@@ -43,6 +31,18 @@ const linkItems: LinkItem[] = [
     icon: 'i-lucide-trash',
   },
 ]
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
 </script>
 
 <template>
@@ -51,22 +51,29 @@ const linkItems: LinkItem[] = [
       <DropdownMenuTrigger as-child>
         <SidebarMenuButton
           :size="size"
-          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
         >
-          <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+          <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">
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
         <DropdownMenuGroup>
           <DropdownMenuItem
             v-for="item in linkItems"
             :key="item.label"
-            v-slot="{ active }"
-            class="hover:bg-gray-100"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
             @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
           >
-            <Icon :name="item.icon" />
-            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
           </DropdownMenuItem>
         </DropdownMenuGroup>
       </DropdownMenuContent>
diff --git a/app/components/pub/my-ui/doc-entry/label.vue b/app/components/pub/my-ui/doc-entry/label.vue
index c3c5f338..029ac2b7 100644
--- a/app/components/pub/my-ui/doc-entry/label.vue
+++ b/app/components/pub/my-ui/doc-entry/label.vue
@@ -32,7 +32,7 @@ const settingClass = computed(() => {
 
 <template>
   <div :class="settingClass">
-    <label>
+    <label v-bind="$attrs">
       <slot />
     </label>
   </div>
diff --git a/app/components/pub/my-ui/form/combobox.vue b/app/components/pub/my-ui/form/combobox.vue
index f48947f3..475fbb13 100644
--- a/app/components/pub/my-ui/form/combobox.vue
+++ b/app/components/pub/my-ui/form/combobox.vue
@@ -2,7 +2,7 @@
 import { cn } from '~/lib/utils'
 
 interface Item {
-  value: string
+  value: string | number
   label: string
   code?: string
   priority?: number
@@ -10,7 +10,7 @@ interface Item {
 
 const props = defineProps<{
   id: string
-  modelValue?: string
+  modelValue?: string | number
   items: Item[]
   placeholder?: string
   searchPlaceholder?: string
@@ -20,7 +20,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
+  'update:modelValue': [value: string | number]
 }>()
 
 const open = ref(false)
diff --git a/app/components/pub/my-ui/select-tree/command-item.vue b/app/components/pub/my-ui/select-tree/command-item.vue
index e94bed4d..a4d8ab09 100644
--- a/app/components/pub/my-ui/select-tree/command-item.vue
+++ b/app/components/pub/my-ui/select-tree/command-item.vue
@@ -20,7 +20,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <ComboboxItem
     v-bind="forwarded"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-normal outline-none hover:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>*]:text-sm [&>*]:font-normal', props.class)"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm bg-white px-2 py-1.5 text-sm font-normal text-black outline-none hover:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 [&>*]:text-sm [&>*]:font-normal',
+        props.class,
+      )
+    "
   >
     <slot />
   </ComboboxItem>
diff --git a/app/components/pub/my-ui/select-tree/leaf.vue b/app/components/pub/my-ui/select-tree/leaf.vue
index d98b8b27..6758c7fd 100644
--- a/app/components/pub/my-ui/select-tree/leaf.vue
+++ b/app/components/pub/my-ui/select-tree/leaf.vue
@@ -20,11 +20,11 @@ function handleSelect(value: string) {
   <div class="leaf-node min-w-max">
     <CommandItem
       :value="item.value"
-      class="flex items-center justify-between p-2 w-full text-sm font-normal hover:text-primary cursor-pointer rounded-md"
+      class="flex items-center justify-between p-2 w-full text-sm font-normal hover:text-primary cursor-pointer rounded-md bg-white dark:bg-transparent"
       :class="{ 'pl-8': shouldAlign }"
       @select="() => handleSelect(item.value)"
     >
-      <span class="text-sm font-normal text-gray-400">{{ item.label }}</span>
+      <span class="text-sm font-normal text-gray-400 dark:text-gray-300">{{ item.label }}</span>
       <Check
         v-if="selectedValue === item.value"
         class="w-4 h-4 text-primary ml-2 flex-shrink-0"
diff --git a/app/components/pub/my-ui/select-tree/tree-node.vue b/app/components/pub/my-ui/select-tree/tree-node.vue
index e390b7bb..40d99e46 100644
--- a/app/components/pub/my-ui/select-tree/tree-node.vue
+++ b/app/components/pub/my-ui/select-tree/tree-node.vue
@@ -52,19 +52,27 @@ watch(isOpen, async (newValue) => {
 
 <template>
   <div class="tree-node min-w-max">
-    <Collapsible v-model:open="isOpen" class="w-full">
+    <Collapsible
+      v-model:open="isOpen"
+      class="w-full"
+    >
       <!-- Node Header -->
-      <div class="flex items-center justify-start w-full p-2 rounded-md hover:bg-accent gap-2">
+      <div
+        class="flex w-full items-center justify-start gap-2 rounded-md bg-white p-2 hover:bg-accent dark:bg-transparent dark:hover:bg-slate-700"
+      >
         <!-- Chevron Toggle Button -->
         <CollapsibleTrigger as-child>
           <Button
             variant="ghost"
-            class="h-4 w-4 p-0 flex items-center justify-center"
+            class="flex h-4 w-4 items-center justify-center p-0"
           >
-            <Loader2 v-if="isLoading" class="w-4 h-4 animate-spin text-muted-foreground" />
+            <Loader2
+              v-if="isLoading"
+              class="h-4 w-4 animate-spin text-muted-foreground"
+            />
             <ChevronRight
               v-else
-              class="w-4 h-4 transition-transform duration-200 ease-in-out text-muted-foreground"
+              class="h-4 w-4 text-muted-foreground transition-transform duration-200 ease-in-out"
               :class="{
                 'rotate-90': isChevronRotated,
               }"
@@ -74,21 +82,24 @@ watch(isOpen, async (newValue) => {
 
         <!-- Node Label -->
         <span
-          class="text-sm font-normal cursor-pointer hover:text-primary flex-1 flex items-center justify-between"
+          class="flex flex-1 cursor-pointer items-center justify-between text-sm font-normal text-black hover:text-primary dark:text-white"
           @click="handleLabelClick"
         >
           {{ item.label }}
           <!-- Check Icon untuk selected state -->
           <Check
             v-if="selectedValue === item.value"
-            class="w-4 h-4 text-primary ml-2 flex-shrink-0"
+            class="ml-2 h-4 w-4 flex-shrink-0 text-primary"
           />
         </span>
       </div>
 
       <!-- Children Container -->
       <CollapsibleContent class="pl-6">
-        <div v-if="!hasChildren" class="text-sm text-muted-foreground p-2">
+        <div
+          v-if="!hasChildren"
+          class="p-2 text-sm text-muted-foreground"
+        >
           {{ isLoading ? 'Memuat...' : 'Tidak ada data' }}
         </div>
         <TreeView
@@ -106,7 +117,7 @@ watch(isOpen, async (newValue) => {
 
 <style scoped>
 .tree-node {
-  @apply w-full;
+  width: 100%;
 }
 
 /* Animasi tambahan untuk smooth transition */
diff --git a/app/components/pub/my-ui/select-tree/tree-select.vue b/app/components/pub/my-ui/select-tree/tree-select.vue
index 1994e533..62a792e6 100644
--- a/app/components/pub/my-ui/select-tree/tree-select.vue
+++ b/app/components/pub/my-ui/select-tree/tree-select.vue
@@ -37,7 +37,7 @@ const filteredData = computed(() => {
   // recursive filter
   function filterTree(items: TreeItem[]): TreeItem[] {
     return items
-      .map(item => {
+      .map((item) => {
         const match = item.label.toLowerCase().includes(searchValue.value.toLowerCase())
         let children: TreeItem[] | undefined = undefined
         if (item.children) {
@@ -57,22 +57,28 @@ const filteredData = computed(() => {
 <template>
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
-      <Button variant="outline" role="combobox" class="w-full justify-between bg-white border-1 border-gray-400">
+      <Button
+        variant="outline"
+        role="combobox"
+        class="w-full justify-between border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+      >
         <span
-        class="font-normal text-muted-foreground" :class="cn(
-          'font-normal',
-          !modelValue && 'text-muted-foreground',
-          modelValue && 'text-black',
-        )"
+          class="font-normal text-muted-foreground"
+          :class="cn('font-normal', !modelValue && 'text-muted-foreground', modelValue && 'text-black')"
         >
           {{ selectedLabel }}
         </span>
-        <ChevronsUpDown class="w-4 h-4 ml-2 opacity-50 shrink-0" />
+        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
-    <PopoverContent class="min-w-full max-w-[350px] p-0">
+    <PopoverContent
+      class="min-w-full max-w-[350px] border border-slate-200 bg-white p-0 text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+    >
       <Command>
-        <CommandInput placeholder="Cari item..." v-model="searchValue" />
+        <CommandInput
+          placeholder="Cari item..."
+          v-model="searchValue"
+        />
         <CommandEmpty>Item tidak ditemukan.</CommandEmpty>
         <CommandList class="max-h-[300px] overflow-x-auto overflow-y-auto">
           <CommandGroup>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue b/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue
index 896d3e31..ff3b89bf 100644
--- a/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue
+++ b/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue
@@ -4,14 +4,19 @@ import type { HTMLAttributes } from 'vue'
 import { Primitive } from 'radix-vue'
 import { cn } from '~/lib/utils'
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: 'sm' | 'md'
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'a',
-  size: 'md',
-})
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      size?: 'sm' | 'md'
+      isActive?: boolean
+      class?: HTMLAttributes['class']
+    }
+  >(),
+  {
+    as: 'a',
+    size: 'md',
+  },
+)
 </script>
 
 <template>
@@ -21,14 +26,16 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as-child="asChild"
     :data-size="size"
     :data-active="isActive"
-    :class="cn(
-      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
-      'aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-      size === 'sm' && 'text-xs',
-      size === 'md' && 'text-sm',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 py-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:whitespace-normal [&>span:last-child]:break-words [&>svg]:size-4 [&>svg]:shrink-0',
+        'aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground aria-[current=page]:font-medium',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>
diff --git a/app/components/pub/ui/sidebar/index.ts b/app/components/pub/ui/sidebar/index.ts
index a6de2196..47f6114b 100644
--- a/app/components/pub/ui/sidebar/index.ts
+++ b/app/components/pub/ui/sidebar/index.ts
@@ -28,7 +28,7 @@ export { default as SidebarTrigger } from './SidebarTrigger.vue'
 export { useSidebar } from './utils'
 
 export const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:whitespace-normal [&>span:last-child]:break-words [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -37,9 +37,9 @@ export const sidebarMenuButtonVariants = cva(
           'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
-        default: 'h-8 text-sm',
-        sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+        default: 'h-auto text-sm py-2',
+        sm: 'h-auto text-xs py-1.5',
+        lg: 'h-auto text-sm group-data-[collapsible=icon]:!p-0',
       },
     },
     defaultVariants: {
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index bfec5c00..05213784 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -256,10 +256,15 @@ export const infraGroupCodes: Record<string, string> = {
   warehouse: 'Gudang / Depo',
   room: 'Ruang',
   chamber: 'Kamar',
-  bed: 'Ranjang'
+  bed: 'Ranjang',
+  counter: 'Counter',
+  'public-screen': 'Public Screen',
 }
 
-export const infraGroupCodesKeys: Record<string, string> = Object.keys(infraGroupCodes).reduce((acc, key) => {
-  acc[key] = key
-  return acc
-}, {} as Record<string, string>)
+export const infraGroupCodesKeys: Record<string, string> = Object.keys(infraGroupCodes).reduce(
+  (acc, key) => {
+    acc[key] = key
+    return acc
+  },
+  {} as Record<string, string>,
+)
diff --git a/app/models/division-position.ts b/app/models/division-position.ts
index acbd3008..3bd5e63a 100644
--- a/app/models/division-position.ts
+++ b/app/models/division-position.ts
@@ -1,8 +1,9 @@
-import { type Base, genBase } from "./_base"
+import { type Base, genBase } from './_base'
 
 export interface DivisionPosition extends Base {
   code: string
   name: string
+  headStatus?: boolean
   division_id: number
   employee_id?: number
 }
@@ -12,6 +13,7 @@ export function genDivisionPosition(): DivisionPosition {
     ...genBase(),
     code: '',
     name: '',
+    headStatus: false,
     division_id: 0,
     employee_id: 0,
   }
diff --git a/app/pages/(features)/service-src/public-screen/index.vue b/app/pages/(features)/service-src/public-screen/index.vue
new file mode 100644
index 00000000..8dd20959
--- /dev/null
+++ b/app/pages/(features)/service-src/public-screen/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Layar Publik',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentPublicScreenList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/_dev/division-position/index.vue b/app/pages/_dev/division-position/index.vue
new file mode 100644
index 00000000..dc0c82c4
--- /dev/null
+++ b/app/pages/_dev/division-position/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Error from '~/components/pub/my-ui/error/error.vue'
+
+definePageMeta({
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Divisi Posisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentDivisionPositionList />
+  </template>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/schemas/device.schema.ts b/app/schemas/device.schema.ts
index 0dfffd3e..a8603e52 100644
--- a/app/schemas/device.schema.ts
+++ b/app/schemas/device.schema.ts
@@ -7,7 +7,7 @@ const DeviceSchema = z.object({
   uom_code: z.string({ required_error: 'Kode unit harus diisi' }).min(1, 'Kode unit harus diisi'),
 })
 
-type DeviceFormData = z.infer<typeof DeviceSchema> & Device
+type DeviceFormData = z.infer<typeof DeviceSchema> & Partial<Device>
 
 export { DeviceSchema }
 export type { DeviceFormData }
diff --git a/app/schemas/division-position.schema.ts b/app/schemas/division-position.schema.ts
new file mode 100644
index 00000000..65906f61
--- /dev/null
+++ b/app/schemas/division-position.schema.ts
@@ -0,0 +1,21 @@
+import { z } from 'zod'
+import type { DivisionPosition } from '~/models/division-position'
+
+const DivisionPositionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  headStatus: z.boolean().optional().nullable(),
+  division_id: z.union([
+    z.string({ required_error: 'Divisi Induk harus diisi' }),
+    z.number({ required_error: 'Divisi Induk harus diisi' })
+  ]).optional().nullable(),
+  employee_id: z.union([
+    z.string({ required_error: 'Karyawan harus diisi' }),
+    z.number({ required_error: 'Karyawan harus diisi' })
+  ]).optional().nullable(),
+})
+
+type DivisionPositionFormData = z.infer<typeof DivisionPositionSchema> & Partial<DivisionPosition>
+
+export { DivisionPositionSchema }
+export type { DivisionPositionFormData }
\ No newline at end of file
diff --git a/app/schemas/division.schema.ts b/app/schemas/division.schema.ts
index af5b5881..fae5afca 100644
--- a/app/schemas/division.schema.ts
+++ b/app/schemas/division.schema.ts
@@ -1,6 +1,5 @@
 import { z } from 'zod'
 import type { Division } from '~/models/division'
-import type { DivisionPosition } from '~/models/division-position'
 
 const DivisionSchema = z.object({
   code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
@@ -9,10 +8,9 @@ const DivisionSchema = z.object({
     z.string({ required_error: 'Divisi Induk harus diisi' }),
     z.number({ required_error: 'Divisi Induk harus diisi' })
   ]).optional().nullable(),
-  division_id: z.string({ required_error: 'Divisi Induk harus diisi' }).optional().nullable(),
 })
 
-type DivisionFormData = z.infer<typeof DivisionSchema> & (Division | DivisionPosition)
+type DivisionFormData = z.infer<typeof DivisionSchema> & Partial<Division>
 
 export { DivisionSchema }
 export type { DivisionFormData }
diff --git a/app/schemas/infra.schema.ts b/app/schemas/infra.schema.ts
index 56a5586e..c47cfe5f 100644
--- a/app/schemas/infra.schema.ts
+++ b/app/schemas/infra.schema.ts
@@ -14,7 +14,7 @@ const InfraSchema = z.object({
   unit_id: z.union([z.string(), z.number()]).nullable().optional(),
 })
 
-type InfraFormData = z.infer<typeof InfraSchema> & Infra
+type InfraFormData = z.infer<typeof InfraSchema> & Partial<Infra>
 
 export { InfraSchema }
 export type { InfraFormData }
diff --git a/app/schemas/installation.schema.ts b/app/schemas/installation.schema.ts
index 75e18074..5fdfe565 100644
--- a/app/schemas/installation.schema.ts
+++ b/app/schemas/installation.schema.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+import type { Installation } from "~/models/installation"
 
 export const InstallationSchema = z.object({
   code: z.string().min(1, 'Kode wajib diisi'),
@@ -6,4 +7,4 @@ export const InstallationSchema = z.object({
   encounterClass_code: z.string().min(1, 'Encounter Class wajib diisi').optional(),
 })
 
-export type InstallationFormData = z.infer<typeof InstallationSchema>
+export type InstallationFormData = z.infer<typeof InstallationSchema> & Partial<Installation>
diff --git a/app/schemas/material.schema.ts b/app/schemas/material.schema.ts
index ff6252a7..bdb020e8 100644
--- a/app/schemas/material.schema.ts
+++ b/app/schemas/material.schema.ts
@@ -8,7 +8,7 @@ const MaterialSchema = z.object({
   stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: 'Stok harus berupa angka' }).min(1, 'Stok harus lebih besar dari 0')),
 })
 
-type MaterialFormData = z.infer<typeof MaterialSchema> & Material
+type MaterialFormData = z.infer<typeof MaterialSchema> & Partial<Material>
 
 export { MaterialSchema }
 export type { MaterialFormData }
diff --git a/app/schemas/specialist.schema.ts b/app/schemas/specialist.schema.ts
index d00e1ff7..1c536bef 100644
--- a/app/schemas/specialist.schema.ts
+++ b/app/schemas/specialist.schema.ts
@@ -10,7 +10,7 @@ const SpecialistSchema = z.object({
     .nullable(),
 })
 
-type SpecialistFormData = z.infer<typeof SpecialistSchema> & Specialist
+type SpecialistFormData = z.infer<typeof SpecialistSchema> & Partial<Specialist>
 
 export { SpecialistSchema }
 export type { SpecialistFormData }
diff --git a/app/schemas/subspecialist.schema.ts b/app/schemas/subspecialist.schema.ts
index bde70c20..e4b3ec77 100644
--- a/app/schemas/subspecialist.schema.ts
+++ b/app/schemas/subspecialist.schema.ts
@@ -13,7 +13,7 @@ const SubspecialistSchema = z.object({
     .nullable(),
 })
 
-type SubspecialistFormData = z.infer<typeof SubspecialistSchema> & Subspecialist
+type SubspecialistFormData = z.infer<typeof SubspecialistSchema> & Partial<Subspecialist>
 
 export { SubspecialistSchema }
 export type { SubspecialistFormData }
diff --git a/app/schemas/unit.schema.ts b/app/schemas/unit.schema.ts
index 47d6fd54..83657224 100644
--- a/app/schemas/unit.schema.ts
+++ b/app/schemas/unit.schema.ts
@@ -13,7 +13,7 @@ const UnitSchema = z.object({
     .nullable(),
 })
 
-type UnitFormData = z.infer<typeof UnitSchema> & Unit
+type UnitFormData = z.infer<typeof UnitSchema> & Partial<Unit>
 
 export { UnitSchema }
 export type { UnitFormData }
diff --git a/app/services/division.service.ts b/app/services/division.service.ts
index 75f9a43e..e3285d34 100644
--- a/app/services/division.service.ts
+++ b/app/services/division.service.ts
@@ -48,7 +48,6 @@ export async function getValueLabelList(params: any = null): Promise<{ value: st
  */
 export function getValueTreeItems(divisions: any[]): TreeItem[] {
   return divisions
-    .filter((division: Division) => !division.parent_id)
     .map((division: Division) => ({
       value: division.id ? String(division.id) : division.code,
       label: division.name,
diff --git a/app/services/employee.service.ts b/app/services/employee.service.ts
new file mode 100644
index 00000000..d3691c83
--- /dev/null
+++ b/app/services/employee.service.ts
@@ -0,0 +1,38 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/employee'
+const name = 'employee'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: any) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/item.service.ts b/app/services/item.service.ts
new file mode 100644
index 00000000..8b44acd8
--- /dev/null
+++ b/app/services/item.service.ts
@@ -0,0 +1,38 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/item'
+const name = 'item'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: any) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/specialist.service.ts b/app/services/specialist.service.ts
index d0be9657..c2c34e3f 100644
--- a/app/services/specialist.service.ts
+++ b/app/services/specialist.service.ts
@@ -35,6 +35,7 @@ export async function getValueLabelList(params: any = null): Promise<{ value: st
     data = resultData.map((item: Specialist) => ({
       value: item.id ? Number(item.id) : item.code,
       label: item.name,
+      parent: item.unit_id ? Number(item.unit_id) : null,
     }))
   }
   return data
diff --git a/app/services/subspecialist.service.ts b/app/services/subspecialist.service.ts
index 59c1d57a..94e70a09 100644
--- a/app/services/subspecialist.service.ts
+++ b/app/services/subspecialist.service.ts
@@ -35,6 +35,7 @@ export async function getValueLabelList(params: any = null): Promise<{ value: st
     data = resultData.map((item: Subspecialist) => ({
       value: item.id ? Number(item.id) : item.code,
       label: item.name,
+      parent: item.specialist_id ? Number(item.specialist_id) : null,
     }))
   }
   return data

From 867c1b4e9e2611c112ab446a02486b5377b26860 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Sat, 11 Oct 2025 00:25:44 +0700
Subject: [PATCH 02/10] dev: hotfix, moved combobox and datepicker

---
 app/components/app/bed/entry-form.vue         |  2 +-
 app/components/app/chamber/entry-form.vue     |  2 +-
 .../app/division-position/entry-form.vue      |  2 +-
 app/components/app/encounter/entry-form.vue   |  4 ++--
 app/components/app/floor/entry-form.vue       |  2 +-
 .../app/installation/entry-form.vue           |  2 +-
 .../app/patient/_common/select-ethnicity.vue  |  2 +-
 .../app/patient/_common/select-job.vue        |  2 +-
 .../_common/select-district.vue               |  2 +-
 .../person-address/_common/select-postal.vue  |  2 +-
 .../_common/select-province.vue               |  2 +-
 .../person-address/_common/select-regency.vue |  2 +-
 .../person-address/_common/select-village.vue |  2 +-
 app/components/app/person/entry-form.vue      |  2 +-
 app/components/app/room/entry-form.vue        |  2 +-
 app/components/app/sep/entry-form.vue         |  2 +-
 app/components/app/sep/small-entry.vue        |  4 ++--
 .../app/specialist-intern/entry-form.vue      |  2 +-
 app/components/app/specialist/entry-form.vue  |  2 +-
 .../app/subspecialist/entry-form.vue          |  2 +-
 app/components/app/unit/entry-form.vue        |  2 +-
 app/components/app/warehouse/entry-form.vue   |  2 +-
 .../pub/my-ui/{form => combobox}/combobox.vue | 13 ++++-------
 app/components/pub/my-ui/combobox/index.ts    | 23 +++++++++++++++++++
 .../datepicker-single.vue                     |  0
 25 files changed, 51 insertions(+), 33 deletions(-)
 rename app/components/pub/my-ui/{form => combobox}/combobox.vue (96%)
 create mode 100644 app/components/pub/my-ui/combobox/index.ts
 rename app/components/pub/my-ui/{form => datepicker}/datepicker-single.vue (100%)

diff --git a/app/components/app/bed/entry-form.vue b/app/components/app/bed/entry-form.vue
index 0b103cd0..f2b0c961 100644
--- a/app/components/app/bed/entry-form.vue
+++ b/app/components/app/bed/entry-form.vue
@@ -5,7 +5,7 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Constants
 import { infraGroupCodesKeys } from '~/lib/constants'
diff --git a/app/components/app/chamber/entry-form.vue b/app/components/app/chamber/entry-form.vue
index af8da097..f44a6745 100644
--- a/app/components/app/chamber/entry-form.vue
+++ b/app/components/app/chamber/entry-form.vue
@@ -5,7 +5,7 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Constants
 import { infraGroupCodesKeys } from '~/lib/constants'
diff --git a/app/components/app/division-position/entry-form.vue b/app/components/app/division-position/entry-form.vue
index 9e144e64..2525b49b 100644
--- a/app/components/app/division-position/entry-form.vue
+++ b/app/components/app/division-position/entry-form.vue
@@ -4,7 +4,7 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Types
 import type { DivisionPositionFormData } from '~/schemas/division-position.schema'
diff --git a/app/components/app/encounter/entry-form.vue b/app/components/app/encounter/entry-form.vue
index 6f2ad074..fd6c8da9 100644
--- a/app/components/app/encounter/entry-form.vue
+++ b/app/components/app/encounter/entry-form.vue
@@ -5,9 +5,9 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import { Form } from '~/components/pub/ui/form'
-import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
 
 import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
 import { mapToComboboxOptList } from '~/lib/utils'
diff --git a/app/components/app/floor/entry-form.vue b/app/components/app/floor/entry-form.vue
index ec78dacc..a59bfd4c 100644
--- a/app/components/app/floor/entry-form.vue
+++ b/app/components/app/floor/entry-form.vue
@@ -5,7 +5,7 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Constants
 import { infraGroupCodesKeys } from '~/lib/constants'
diff --git a/app/components/app/installation/entry-form.vue b/app/components/app/installation/entry-form.vue
index 393eb793..c83e5cb1 100644
--- a/app/components/app/installation/entry-form.vue
+++ b/app/components/app/installation/entry-form.vue
@@ -4,7 +4,7 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Types
 import type { InstallationFormData } from '~/schemas/installation.schema'
diff --git a/app/components/app/patient/_common/select-ethnicity.vue b/app/components/app/patient/_common/select-ethnicity.vue
index a4231571..e1ecd08a 100644
--- a/app/components/app/patient/_common/select-ethnicity.vue
+++ b/app/components/app/patient/_common/select-ethnicity.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
diff --git a/app/components/app/patient/_common/select-job.vue b/app/components/app/patient/_common/select-job.vue
index b9804bb5..b14cbb66 100644
--- a/app/components/app/patient/_common/select-job.vue
+++ b/app/components/app/patient/_common/select-job.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
diff --git a/app/components/app/person-address/_common/select-district.vue b/app/components/app/person-address/_common/select-district.vue
index 97b50e4e..91f853f8 100644
--- a/app/components/app/person-address/_common/select-district.vue
+++ b/app/components/app/person-address/_common/select-district.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
diff --git a/app/components/app/person-address/_common/select-postal.vue b/app/components/app/person-address/_common/select-postal.vue
index 84df7b33..83b33786 100644
--- a/app/components/app/person-address/_common/select-postal.vue
+++ b/app/components/app/person-address/_common/select-postal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
diff --git a/app/components/app/person-address/_common/select-province.vue b/app/components/app/person-address/_common/select-province.vue
index bf984154..f8cc5464 100644
--- a/app/components/app/person-address/_common/select-province.vue
+++ b/app/components/app/person-address/_common/select-province.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
diff --git a/app/components/app/person-address/_common/select-regency.vue b/app/components/app/person-address/_common/select-regency.vue
index bb2202d3..9b415b6e 100644
--- a/app/components/app/person-address/_common/select-regency.vue
+++ b/app/components/app/person-address/_common/select-regency.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
diff --git a/app/components/app/person-address/_common/select-village.vue b/app/components/app/person-address/_common/select-village.vue
index 561fa9b6..a3d7725c 100644
--- a/app/components/app/person-address/_common/select-village.vue
+++ b/app/components/app/person-address/_common/select-village.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
diff --git a/app/components/app/person/entry-form.vue b/app/components/app/person/entry-form.vue
index a9a9c6cf..0ea3757a 100644
--- a/app/components/app/person/entry-form.vue
+++ b/app/components/app/person/entry-form.vue
@@ -3,7 +3,7 @@ import type { FormErrors } from '~/types/error'
 import { Form } from '~/components/pub/ui/form'
 import { toTypedSchema } from '@vee-validate/zod'
 import Block from '~/components/pub/my-ui/form/block.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
diff --git a/app/components/app/room/entry-form.vue b/app/components/app/room/entry-form.vue
index 6aca0d77..b460cc2d 100644
--- a/app/components/app/room/entry-form.vue
+++ b/app/components/app/room/entry-form.vue
@@ -5,7 +5,7 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Constants
 import { infraGroupCodesKeys } from '~/lib/constants'
diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 9aea7c31..e48d23ec 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -10,7 +10,7 @@ import { Label } from '~/components/pub/ui/label'
 import Select from '~/components/pub/ui/select/Select.vue'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { Textarea } from '~/components/pub/ui/textarea'
-import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
 
 const emit = defineEmits<{
   (e: 'event', value: any): void
diff --git a/app/components/app/sep/small-entry.vue b/app/components/app/sep/small-entry.vue
index b4957aa9..a5372099 100644
--- a/app/components/app/sep/small-entry.vue
+++ b/app/components/app/sep/small-entry.vue
@@ -2,12 +2,12 @@
 import type { FormErrors } from '~/types/error'
 import { toTypedSchema } from '@vee-validate/zod'
 import Block from '~/components/pub/my-ui/form/block.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { Form } from '~/components/pub/ui/form'
-import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
 
 import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
 import { mapToComboboxOptList } from '~/lib/utils'
diff --git a/app/components/app/specialist-intern/entry-form.vue b/app/components/app/specialist-intern/entry-form.vue
index c9719e09..aca8245b 100644
--- a/app/components/app/specialist-intern/entry-form.vue
+++ b/app/components/app/specialist-intern/entry-form.vue
@@ -2,7 +2,7 @@
 import type { FormErrors } from '~/types/error'
 import { toTypedSchema } from '@vee-validate/zod'
 import Block from '~/components/pub/my-ui/form/block.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
diff --git a/app/components/app/specialist/entry-form.vue b/app/components/app/specialist/entry-form.vue
index ee649391..70c0f294 100644
--- a/app/components/app/specialist/entry-form.vue
+++ b/app/components/app/specialist/entry-form.vue
@@ -4,7 +4,7 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Types
 import type { SpecialistFormData } from '~/schemas/specialist.schema'
diff --git a/app/components/app/subspecialist/entry-form.vue b/app/components/app/subspecialist/entry-form.vue
index 53a74f68..8f176fb1 100644
--- a/app/components/app/subspecialist/entry-form.vue
+++ b/app/components/app/subspecialist/entry-form.vue
@@ -4,7 +4,7 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Types
 import type { SubspecialistFormData } from '~/schemas/subspecialist.schema'
diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
index f400967f..1b369695 100644
--- a/app/components/app/unit/entry-form.vue
+++ b/app/components/app/unit/entry-form.vue
@@ -4,7 +4,7 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Types
 import type { UnitFormData } from '~/schemas/unit.schema'
diff --git a/app/components/app/warehouse/entry-form.vue b/app/components/app/warehouse/entry-form.vue
index ad367706..cc3256e0 100644
--- a/app/components/app/warehouse/entry-form.vue
+++ b/app/components/app/warehouse/entry-form.vue
@@ -5,7 +5,7 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Constants
 import { infraGroupCodesKeys } from '~/lib/constants'
diff --git a/app/components/pub/my-ui/form/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
similarity index 96%
rename from app/components/pub/my-ui/form/combobox.vue
rename to app/components/pub/my-ui/combobox/combobox.vue
index 475fbb13..fbb241e0 100644
--- a/app/components/pub/my-ui/form/combobox.vue
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
 import { cn } from '~/lib/utils'
 
-interface Item {
-  value: string | number
-  label: string
-  code?: string
-  priority?: number
-}
+import { type Item } from './index'
 
 const props = defineProps<{
-  id: string
-  modelValue?: string | number
+  id?: string
+  modelValue?: string
   items: Item[]
   placeholder?: string
   searchPlaceholder?: string
@@ -20,7 +15,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string | number]
+  'update:modelValue': [value: string]
 }>()
 
 const open = ref(false)
diff --git a/app/components/pub/my-ui/combobox/index.ts b/app/components/pub/my-ui/combobox/index.ts
new file mode 100644
index 00000000..82a3b3cd
--- /dev/null
+++ b/app/components/pub/my-ui/combobox/index.ts
@@ -0,0 +1,23 @@
+export interface Item {
+  value: string
+  label: string
+  code?: string
+  priority?: number
+}
+
+export function recStrToItem(input: Record<string, string>): Item[] {
+  const items: Item[] = []
+  let idx = 0;
+  for (const key in input) {
+    if (input.hasOwnProperty(key)) {
+      items.push({
+        value: key || ('unknown-' + idx),
+        label: input[key] || ('unknown-' + idx),
+      })
+    }
+    idx++
+  }
+  return items
+}
+
+export { default as Combobox } from './combobox.vue'
diff --git a/app/components/pub/my-ui/form/datepicker-single.vue b/app/components/pub/my-ui/datepicker/datepicker-single.vue
similarity index 100%
rename from app/components/pub/my-ui/form/datepicker-single.vue
rename to app/components/pub/my-ui/datepicker/datepicker-single.vue

From bf5109c457a42b8f353bd64e23a5ffa3f826bbeb Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sat, 11 Oct 2025 21:33:08 +0700
Subject: [PATCH 03/10] =?UTF-8?q?=E2=9C=A8=20feat=20(soapi):=20introduce?=
 =?UTF-8?q?=20early=20rehab=20and=20function=20forms?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/soapi/early-rehab-entry.vue           | 385 +++++++++--
 app/components/app/soapi/function-entry.vue   | 628 +++++++++++++-----
 app/components/content/encounter/process.vue  |  16 +-
 app/components/content/soapi/entry.vue        |  32 +-
 .../content/soapi/form-function.vue           |  45 ++
 app/components/content/soapi/form-rehab.vue   |  45 ++
 6 files changed, 920 insertions(+), 231 deletions(-)
 create mode 100644 app/components/content/soapi/form-function.vue
 create mode 100644 app/components/content/soapi/form-rehab.vue

diff --git a/app/components/app/soapi/early-rehab-entry.vue b/app/components/app/soapi/early-rehab-entry.vue
index 991a7c73..61beb0f3 100644
--- a/app/components/app/soapi/early-rehab-entry.vue
+++ b/app/components/app/soapi/early-rehab-entry.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
@@ -9,6 +8,8 @@ const props = defineProps<{
   excludeFields?: string[]
 }>()
 
+const emits = defineEmits(['click'])
+
 const subject = ref({
   'prim-compl': '',
   'sec-compl': '',
@@ -25,77 +26,329 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
 
 <template>
-  <div class="space-y-4">
-    <!-- Keluhan Utama -->
-    <Cell v-if="!isExcluded('prim-compl')">
-      <Label dynamic>Keluhan Utama</Label>
-      <Field>
-        <Textarea placeholder="Masukkan anamnesa pasien" v-model="subject['prim-compl']" />
-      </Field>
-    </Cell>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div>
+        <h1 class="font-semibold">Pemeriksaan Fisiatrik</h1>
+        <span class="text-sm font-semibold">Anamnesa</span>
+      </div>
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Keluhan Utama</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
 
-    <!-- Keluhan Tambahan -->
-    <Cell v-if="!isExcluded('sec-compl')">
-      <Label dynamic>Keluhan Tambahan</Label>
-      <Field>
-        <Textarea placeholder="Masukkan keluhan tambahan" v-model="subject['sec-compl']" />
-      </Field>
-    </Cell>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Diagnosa Medis</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
 
-    <!-- Riwayat Penyakit Sekarang -->
-    <Cell v-if="!isExcluded('cur-disea-hist')">
-      <Label dynamic>Riwayat Penyakit Sekarang</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat penyakit sekarang" v-model="subject['cur-disea-hist']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>Rencana Awal Medis</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
 
-    <!-- Riwayat Penyakit Dahulu -->
-    <Cell v-if="!isExcluded('pas-disea-hist')">
-      <Label dynamic>Riwayat Penyakit Dahulu</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat penyakit dahulu" v-model="subject['pas-disea-hist']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>Terapi</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <Separator class="mt-8" />
 
-    <!-- Riwayat Penyakit Keluarga -->
-    <Cell v-if="!isExcluded('fam-disea-hist')">
-      <Label dynamic>Riwayat Penyakit Keluarga</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat penyakit keluarga" v-model="subject['fam-disea-hist']" />
-      </Field>
-    </Cell>
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Fisik</h1>
+        <span class="text-sm font-semibold">Status Generalis</span>
+      </div>
 
-    <!-- Riwayat Alergi -->
-    <Cell v-if="!isExcluded('alg-hist')">
-      <Label dynamic>Riwayat Alergi</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat alergi" v-model="subject['alg-hist']" />
-      </Field>
-    </Cell>
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Tekanan Darah</Label>
+            <Field>
+              <Input placeholder="Sistolik" />
+              <Input placeholder="Diastolik" />
+            </Field>
+          </Cell>
 
-    <!-- Reaksi Alergi -->
-    <Cell v-if="!isExcluded('alg-react')">
-      <Label dynamic>Reaksi Alergi</Label>
-      <Field>
-        <Textarea placeholder="Masukkan reaksi alergi" v-model="subject['alg-react']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>Nadi</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
 
-    <!-- Pengobatan yang Sedang Dijalani -->
-    <Cell v-if="!isExcluded('med-hist')">
-      <Label dynamic>Riwayat Pengobatan</Label>
-      <Field>
-        <Textarea placeholder="Masukkan pengobatan yang sedang dijalani" v-model="subject['med-hist']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>GCS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>RR</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
 
-    <!-- Golongan Darah -->
-    <Cell v-if="!isExcluded('blood-type')">
-      <Label dynamic>Golongan Darah</Label>
-      <Field>
-        <Input type="text" placeholder="Masukkan golongan darah" v-model="subject['blood-type']" />
-      </Field>
-    </Cell>
-  </div>
+          <Cell>
+            <Label dynamic>Ambulasi</Label>
+            <Field>
+              <RadioGroup class="flex gap-4">
+                <div class="flex items-center space-x-2">
+                  <RadioGroupItem
+                    id="vaksin-yes"
+                    value="yes"
+                  />
+                  <Label for="vaksin-yes">Dependent</Label>
+                </div>
+                <div class="flex items-center space-x-2">
+                  <RadioGroupItem
+                    id="vaksin-no"
+                    value="no"
+                  />
+                  <Label for="vaksin-no">Independen</Label>
+                </div>
+              </RadioGroup>
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Gait</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Neurologis</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>N. Cranialis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Sensoris</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Reflek Fisilogis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Reflek Patologis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Saraf Otonom</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Muskuloskeletal - ROM</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Batang Tubuh</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>AGA</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>AGB</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Muskuloskeletal - MMT</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Batang Tubuh</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>AGA</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>AGB</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Statu Lokalis</span>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Deskripsi Temuan Fisik</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Penunjang</h1>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Catatan Pemeriksaan Penunjang</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Daftar Masalah</h1>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Masalah Medik</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Masalah Rehabilitasi Medik</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
+      </div>
+
+      <div class="mb-8 grid grid-cols-2 gap-4">
+        <AppIcdPreview />
+      </div>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Program Rehabilitasi</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Modalitas Fisik</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Latihan</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Ortesa Protesa</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Edukasi</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+    </div>
+  </form>
 </template>
diff --git a/app/components/app/soapi/function-entry.vue b/app/components/app/soapi/function-entry.vue
index a2fad36a..98d35663 100644
--- a/app/components/app/soapi/function-entry.vue
+++ b/app/components/app/soapi/function-entry.vue
@@ -1,172 +1,486 @@
 <script setup lang="ts">
-import Block from '~/components/pub/my-ui/form/block.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+const props = defineProps<{
+  excludeFields?: string[]
+}>()
+
+const emits = defineEmits(['click'])
+
+const subject = ref({
+  'prim-compl': '',
+  'sec-compl': '',
+  'cur-disea-hist': '',
+  'pas-disea-hist': '',
+  'fam-disea-hist': '',
+  'alg-hist': '',
+  'alg-react': '',
+  'med-hist': '',
+  'blood-type': '',
+})
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+const disorders = ref<string[]>([])
+const therapies = ref<string[]>([])
+const summary = ref('')
+
+const disorderOptions = [
+  'Fungsi Otot',
+  'Fungsi Sendi',
+  'Fungsi Jalan',
+  'Fungsi Syaraf',
+  'Fungsi Koordinasi',
+  'Jantung',
+  'Fungsi Respirasi',
+  'Fungsi Menelan',
+  'Fungsi Bladder',
+  'Fungsi Bowel',
+  'Fungsi Luhur',
+  'Fungsi Kontrol Postur',
+  'Fungsi Eksekusi',
+  'Fungsi Ortosa/Protesa',
+  'Gangguan Aktivitas Sehari-hari',
+  'Lainnya',
+]
+
+const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', 'Medikamentosa', 'Lain-lain: Konsultasi']
 </script>
 
 <template>
   <form id="entry-form">
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <Block>
-        <FieldGroup>
-          <Label dynamic>Sudah Vaksin</Label>
-          <Field>
-            <Select
-              :options="[
-                { label: 'Sudah', value: 'yes' },
-                { label: 'Belum', value: 'no' },
-              ]"
-            />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup>
-          <Label dynamic>Kasus</Label>
-          <Field>
-            <Select
-              :options="[
-                { label: 'Baru', value: 'baru' },
-                { label: 'Lama', value: 'lama' },
-              ]"
-            />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup>
-          <Label dynamic>Kunjungan</Label>
-          <Field>
-            <Select
-              :options="[
-                { label: 'Baru', value: 'baru' },
-                { label: 'Lama', value: 'lama' },
-              ]"
-            />
-          </Field>
-        </FieldGroup>
-
-        <!-- Riwayat Penyakit -->
-        <FieldGroup :column="2">
+        <Cell>
           <Label dynamic>Keluhan Utama</Label>
-          <Field>
-            <Textarea placeholder="Masukkan anamnesa pasien" />
-          </Field>
-        </FieldGroup>
-        <FieldGroup :column="2">
-          <Label dynamic>Riwayat Penyakit</Label>
-          <Field>
-            <Textarea
-              placeholder="Masukkan anamnesa pasien (Riwayat Penyakit Sekarang, Dahulu, Pengobatan, Keluarga, dll)"
-            />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>SpO₂</Label>
-          <Field>
-            <Input type="number" placeholder="%" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Tekanan Darah Sistol</Label>
-          <Field>
-            <Input type="number" placeholder="mmHg" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Tekanan Darah Diastol</Label>
-          <Field>
-            <Input type="number" placeholder="mmHg" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Respirasi</Label>
-          <Field>
-            <Input type="number" placeholder="kali/menit" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Nadi</Label>
-          <Field>
-            <Input type="number" placeholder="kali/menit" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Temperatur</Label>
-          <Field>
-            <Input type="number" placeholder="℃" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Berat Badan</Label>
-          <Field>
-            <Input type="number" placeholder="Kg" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Tinggi Badan</Label>
-          <Field>
-            <Input type="number" placeholder="Cm" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Golongan Darah</Label>
-          <Field>
-            <Select :options="bloodGroups" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Pemeriksaan Fisik (Yang Mendukung)</Label>
-          <Field>
-            <Textarea placeholder="Masukkan pemeriksaan fisik" />
-          </Field>
-        </FieldGroup>
-
-        <!-- Prosedur -->
-        <FieldGroup :column="2">
-          <Label dynamic>Diagnosa (ICD-X)</Label>
-          <Field>
-            <button class="rounded bg-orange-100 px-3 py-1 text-orange-600">+ Pilih Diagnosa</button>
-          </Field>
-        </FieldGroup>
-        <!-- Diagnosa -->
-        <FieldGroup :column="2">
-          <Label dynamic>Diagnosa (ICD-X)</Label>
-          <Field>
-            <button class="rounded bg-orange-100 px-3 py-1 text-orange-600">+ Pilih Diagnosa</button>
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="3">
-          <Label dynamic>Diagnosa Medis</Label>
           <Field>
             <Textarea />
           </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="3">
-          <Label dynamic>Rencana Awal Medis</Label>
-          <Field>
-            <Textarea />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="3">
-          <Label dynamic>Terapi</Label>
-          <Field>
-            <Textarea />
-          </Field>
-        </FieldGroup>
+        </Cell>
       </Block>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Riwayat Penyakit Dahulu</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Riwayat Penyakit Sekarang</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Fisik</h1>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Umum</Label>
+          <Field>
+            <Input placeholder="Sistolik" />
+          </Field>
+        </Cell>
+      </Block>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Tanda Vital</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Kesadaran (GCS)</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Pernapasan</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Nadi</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Tekanan Darah Lengan Kanan</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Tekanan Darah Lengan Kiri</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Suhu Aksila</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Suhu Rektal</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Badan</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Kulit</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Kepala</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Telinga</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Hidung</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Rongga Mulut/Tenggorokan</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Mata</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kelenjar Tiroid</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Thorax</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Jantung</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Paru-Paru</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Abdomen</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Hati</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lien</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Punggung</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Ekstremitas</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kelamin</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Rectum</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>System Syaraf</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Neuromoskuloskeletal</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Kardiorespirasi</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Penunjang</h1>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Pencitraan</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Laboratorium</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <div class="mb-8 grid grid-cols-2 gap-4">
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+      </div>
+
+      <div class="space-y-8">
+        <div>
+          <h3 class="mb-3 text-lg font-semibold">Gangguan Fungsi</h3>
+          <div class="grid grid-cols-3 gap-2">
+            <div
+              v-for="opt in disorderOptions"
+              :key="opt"
+              class="flex items-center space-x-2"
+            >
+              <Checkbox
+                :id="opt"
+                :value="opt"
+                v-model="disorders"
+              />
+              <Label
+                :for="opt"
+                class="text-sm"
+              >
+                {{ opt }}
+              </Label>
+            </div>
+          </div>
+
+          <div class="mt-4 space-y-2">
+            <Label
+              for="summary"
+              class="font-medium"
+            >
+              Kesimpulan Didapatkan Gangguan Fungsi
+              <span class="text-red-500">*</span>
+            </Label>
+            <Textarea
+              id="summary"
+              v-model="summary"
+              placeholder="Masukkan kesimpulan gangguan fungsi"
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- REKOMENDASI TERAPI -->
+        <div>
+          <h3 class="mb-3 text-lg font-semibold">Rekomendasi Terapi Tindakan Yang Diperlukan</h3>
+          <div class="grid grid-cols-3 gap-2">
+            <div
+              v-for="opt in therapyOptions"
+              :key="opt"
+              class="flex items-center space-x-2"
+            >
+              <Checkbox
+                :id="opt"
+                :value="opt"
+                v-model="therapies"
+              />
+              <Label
+                :for="opt"
+                class="text-sm"
+              >
+                {{ opt }}
+              </Label>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </form>
 </template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index e7c0ffc4..acd88473 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -8,8 +8,10 @@ import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
 
 import Status from '~/components/app/encounter/status.vue'
-import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+// import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
+import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -38,7 +40,11 @@ const data = {
 const tabs: TabItem[] = [
   { value: 'status', label: 'Status Masuk/Keluar', component: Status },
   { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
-  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  {
+    value: 'rehab-medical-assessment',
+    label: 'Pengkajian Awal Medis Rehabilitasi Medis',
+    component: EarlyMedicalRehabList,
+  },
   { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
   { value: 'therapy-protocol', label: 'Protokol Terapi' },
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
@@ -66,6 +72,10 @@ const tabs: TabItem[] = [
       <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
     </div>
     <AppEncounterQuickInfo :data="data" />
-    <CompTab :data="tabs" :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
+    <CompTab
+      :data="tabs"
+      :initial-active-tab="activeTab"
+      @change-tab="activeTab = $event"
+    />
   </div>
 </template>
diff --git a/app/components/content/soapi/entry.vue b/app/components/content/soapi/entry.vue
index 05c25ec7..42800d8f 100644
--- a/app/components/content/soapi/entry.vue
+++ b/app/components/content/soapi/entry.vue
@@ -1,16 +1,38 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+import { useQueryMode } from '@/composables/useQueryMode' // asumsikan ini ada
 
-import EarlyMedicalAssesmentList from './list.vue'
-import EarlyMedicalAssesmentForm from './form.vue'
+import SoapiList from './list.vue'
+import EarlyForm from './form.vue'
+import RehabForm from './form-rehab.vue'
+import FunctionForm from './form-function.vue'
+
+const route = useRoute()
+const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
 
 const { mode, openForm, backToList } = useQueryMode('mode')
+
+const formMap = {
+  'early-medical-assessment': EarlyForm,
+  'rehab-medical-assessment': RehabForm,
+  'function-assessment': FunctionForm,
+}
+
+const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
 </script>
 
 <template>
   <div>
-    <EarlyMedicalAssesmentList v-if="mode === 'list'" @add="openForm" />
-    <EarlyMedicalAssesmentForm v-else @back="backToList" />
+    <SoapiList
+      v-if="mode === 'list'"
+      @add="openForm"
+    />
+
+    <component
+      v-else
+      :is="ActiveForm"
+      @back="backToList"
+    />
   </div>
 </template>
diff --git a/app/components/content/soapi/form-function.vue b/app/components/content/soapi/form-function.vue
new file mode 100644
index 00000000..d76e192f
--- /dev/null
+++ b/app/components/content/soapi/form-function.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Entry from '~/components/app/soapi/entry.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleClick(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry
+    type="function"
+    :exclude-fields="['prim-compl', 'sec-compl']"
+    @click="handleClick"
+  />
+  <Dialog
+    v-model:open="isOpen"
+    title="Pilih Prosedur"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>
diff --git a/app/components/content/soapi/form-rehab.vue b/app/components/content/soapi/form-rehab.vue
new file mode 100644
index 00000000..f0255022
--- /dev/null
+++ b/app/components/content/soapi/form-rehab.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Entry from '~/components/app/soapi/entry.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleClick(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry
+    type="early-rehab"
+    :exclude-fields="['prim-compl', 'sec-compl']"
+    @click="handleClick"
+  />
+  <Dialog
+    v-model:open="isOpen"
+    title="Pilih Prosedur"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>

From 2f2e48dce4a97498c6db9120e2198ffa5215c2d9 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Sun, 12 Oct 2025 11:34:27 +0700
Subject: [PATCH 04/10] dev: hotfix, combobox test-size

---
 app/components/pub/my-ui/combobox/combobox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/pub/my-ui/combobox/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
index fbb241e0..f89b6918 100644
--- a/app/components/pub/my-ui/combobox/combobox.vue
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -69,7 +69,7 @@ function onSelect(item: Item) {
         :aria-describedby="`${props.id}-search`"
         :class="
           cn(
-            'w-full justify-between border text-sm font-normal rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
+            'w-full justify-between border md:text-xs 2xl:text-sm font-normal rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
             {
               'cursor-not-allowed bg-gray-100 opacity-50 border-gray-300 text-gray-500': props.isDisabled,
               'bg-white text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700': !props.isDisabled,
@@ -112,7 +112,7 @@ function onSelect(item: Item) {
               :value="item.searchValue"
               :class="
                 cn(
-                  'flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 text-sm',
+                  'flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 md:text-xs xl:text-sm',
                   'focus:outline-none text-black dark:text-white',
                   'hover:bg-primary hover:text-white focus:bg-primary focus:text-white',
                   'data-[highlighted]:bg-primary data-[highlighted]:text-white',

From f7b66d2ad86caa010b36248c8b9da213ebc24755 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Sun, 12 Oct 2025 11:40:53 +0700
Subject: [PATCH 05/10] dev: hotfix, text-size standardization

---
 app/components/pub/my-ui/doc-entry/block.vue     | 4 ++--
 app/components/pub/my-ui/doc-entry/field.vue     | 2 +-
 app/components/pub/ui/button/index.ts            | 4 ++--
 app/components/pub/ui/checkbox/Checkbox.vue      | 2 +-
 app/components/pub/ui/form/FormDescription.vue   | 2 +-
 app/components/pub/ui/label/Label.vue            | 2 +-
 app/components/pub/ui/table/Table.vue            | 2 +-
 app/components/pub/ui/table/TableCaption.vue     | 2 +-
 app/components/pub/ui/table/TableEmpty.vue       | 2 +-
 app/components/pub/ui/tabs/TabsTrigger.vue       | 2 +-
 app/components/pub/ui/textarea/Textarea.vue      | 2 +-
 app/components/pub/ui/toast/ToastAction.vue      | 2 +-
 app/components/pub/ui/toast/ToastDescription.vue | 2 +-
 app/components/pub/ui/toast/ToastTitle.vue       | 2 +-
 14 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index d56d568b..cda58280 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -63,8 +63,8 @@ const settingClass = computed(() => {
     cls += ' [&_.label]:pb-1 ';
   }
   cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
-  cls += '[&_textarea]:text-xs [&_textarea]:xl:text-sm '
-  cls += '[&_label]:text-xs [&_label]:xl:text-sm'
+  cls += '[&_textarea]:text-xs [&_textarea]:2xl:!text-sm '
+  cls += '[&_label]:text-xs [&_label]:2xl:!text-sm'
   return cls
 })
 </script>
diff --git a/app/components/pub/my-ui/doc-entry/field.vue b/app/components/pub/my-ui/doc-entry/field.vue
index fb43507a..42818744 100644
--- a/app/components/pub/my-ui/doc-entry/field.vue
+++ b/app/components/pub/my-ui/doc-entry/field.vue
@@ -9,6 +9,6 @@ const props = defineProps({
 <template>
   <div :class="`field ${props.defaultClass} ${props.class}`">
     <slot />
-    <div v-if="props.errMessage" class="mt-1 text-xs font-medium text-red-500">{{ props.errMessage }}</div>
+    <div v-if="props.errMessage" class="mt-1 md:text-xs 2xl:text-sm font-medium text-red-500">{{ props.errMessage }}</div>
   </div>
 </template>
diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
index c16fb713..c1aa89a8 100644
--- a/app/components/pub/ui/button/index.ts
+++ b/app/components/pub/ui/button/index.ts
@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md md:tex-xs xl:text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md md:text-xs 2xl:text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -19,7 +19,7 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'md:h8 xl:h-9 px-4 py-2',
+        default: 'md:h8 2xl:h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
diff --git a/app/components/pub/ui/checkbox/Checkbox.vue b/app/components/pub/ui/checkbox/Checkbox.vue
index f8b25c7a..1e01933d 100644
--- a/app/components/pub/ui/checkbox/Checkbox.vue
+++ b/app/components/pub/ui/checkbox/Checkbox.vue
@@ -21,7 +21,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <CheckboxRoot
     v-bind="forwarded"
     :class="
-      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      cn('peer h-6 w-6 md:h-5 md:w-5 2xl:h-6 2xl:w-6 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
          props.class)"
   >
     <CheckboxIndicator class="h-full w-full flex items-center justify-center text-current">
diff --git a/app/components/pub/ui/form/FormDescription.vue b/app/components/pub/ui/form/FormDescription.vue
index 60bc8767..b8508491 100644
--- a/app/components/pub/ui/form/FormDescription.vue
+++ b/app/components/pub/ui/form/FormDescription.vue
@@ -14,7 +14,7 @@ const { formDescriptionId } = useFormField()
 <template>
   <p
     :id="formDescriptionId"
-    :class="cn('text-sm text-muted-foreground', props.class)"
+    :class="cn('md:text-xs 2xl:text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </p>
diff --git a/app/components/pub/ui/label/Label.vue b/app/components/pub/ui/label/Label.vue
index 46a01863..c3c34a8b 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(
-        'md:!text-xs xl:text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'md:!text-xs 2xl:text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/table/Table.vue b/app/components/pub/ui/table/Table.vue
index e7c79d4c..fb8a5e04 100644
--- a/app/components/pub/ui/table/Table.vue
+++ b/app/components/pub/ui/table/Table.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <div class="relative w-full overflow-x-auto">
-    <table :class="cn('min-w-full table-fixed caption-bottom text-sm', props.class)">
+    <table :class="cn('min-w-full table-fixed caption-bottom md:text-xs 2xl:text-sm', props.class)">
       <slot />
     </table>
   </div>
diff --git a/app/components/pub/ui/table/TableCaption.vue b/app/components/pub/ui/table/TableCaption.vue
index f2a6c194..eeb57252 100644
--- a/app/components/pub/ui/table/TableCaption.vue
+++ b/app/components/pub/ui/table/TableCaption.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+  <caption :class="cn('mt-4 md:text-xs 2xl:text-sm text-muted-foreground', props.class)">
     <slot />
   </caption>
 </template>
diff --git a/app/components/pub/ui/table/TableEmpty.vue b/app/components/pub/ui/table/TableEmpty.vue
index ff2f887e..96fafe2d 100644
--- a/app/components/pub/ui/table/TableEmpty.vue
+++ b/app/components/pub/ui/table/TableEmpty.vue
@@ -25,7 +25,7 @@ const delegatedProps = computed(() => {
     <TableCell
       :class="
         cn(
-          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          'p-4 whitespace-nowrap align-middle md:text-xs 2xl:text-sm text-foreground',
           props.class,
         )
       "
diff --git a/app/components/pub/ui/tabs/TabsTrigger.vue b/app/components/pub/ui/tabs/TabsTrigger.vue
index 784f5b36..af9ddeb5 100644
--- a/app/components/pub/ui/tabs/TabsTrigger.vue
+++ b/app/components/pub/ui/tabs/TabsTrigger.vue
@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <TabsTrigger
     v-bind="forwardedProps"
     :class="cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 md:text-xs 2xl:text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
       props.class,
     )"
   >
diff --git a/app/components/pub/ui/textarea/Textarea.vue b/app/components/pub/ui/textarea/Textarea.vue
index a946b49a..a29bb1b7 100644
--- a/app/components/pub/ui/textarea/Textarea.vue
+++ b/app/components/pub/ui/textarea/Textarea.vue
@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-slate-400 bg-white dark:bg-slate-950 px-3 py-2 text-sm ring-offset-background 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)" />
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-slate-400 bg-white dark:bg-slate-950 px-3 py-2 md:text-xs 2xl:text-sm ring-offset-background 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)" />
 </template>
diff --git a/app/components/pub/ui/toast/ToastAction.vue b/app/components/pub/ui/toast/ToastAction.vue
index 0a4bacc6..577b1f65 100644
--- a/app/components/pub/ui/toast/ToastAction.vue
+++ b/app/components/pub/ui/toast/ToastAction.vue
@@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 md:text-xs 2xl:text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
     <slot />
   </ToastAction>
 </template>
diff --git a/app/components/pub/ui/toast/ToastDescription.vue b/app/components/pub/ui/toast/ToastDescription.vue
index 66d36e2b..23b80db3 100644
--- a/app/components/pub/ui/toast/ToastDescription.vue
+++ b/app/components/pub/ui/toast/ToastDescription.vue
@@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
+  <ToastDescription :class="cn('md:text-xs 2xl:text-sm opacity-90', props.class)" v-bind="delegatedProps">
     <slot />
   </ToastDescription>
 </template>
diff --git a/app/components/pub/ui/toast/ToastTitle.vue b/app/components/pub/ui/toast/ToastTitle.vue
index c3eb3ffc..fc62fd61 100644
--- a/app/components/pub/ui/toast/ToastTitle.vue
+++ b/app/components/pub/ui/toast/ToastTitle.vue
@@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)">
+  <ToastTitle v-bind="delegatedProps" :class="cn('md:text-xs 2xl:text-sm font-semibold [&+div]:text-xs', props.class)">
     <slot />
   </ToastTitle>
 </template>

From 966dc1c282635b899b822fabb6e0535bd76c0bbd Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Sun, 12 Oct 2025 12:15:52 +0700
Subject: [PATCH 06/10] dev: hotfix, more standardization

---
 app/assets/css/main.css                             | 2 +-
 app/components/layout/SidebarNavGroup.vue           | 4 ++--
 app/components/layout/SidebarNavHeader.vue          | 6 +++---
 app/components/layout/SidebarNavLink.vue            | 2 +-
 app/components/pub/ui/input/Input.vue               | 2 +-
 app/components/pub/ui/sidebar/SidebarGroupLabel.vue | 2 +-
 app/components/pub/ui/sidebar/SidebarMenuBadge.vue  | 2 +-
 app/components/pub/ui/table/TableCell.vue           | 2 +-
 app/components/pub/ui/table/TableHead.vue           | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index b5064af7..cab62d6e 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -174,7 +174,7 @@ body {
 }
 
 body, table, label {
-  @apply md:!text-xs xl:!text-sm 2xl:!text-sm;
+  @apply md:!text-xs 2xl:!text-sm; 
 }
 
 /* Container */
diff --git a/app/components/layout/SidebarNavGroup.vue b/app/components/layout/SidebarNavGroup.vue
index 60f46105..9b92e619 100644
--- a/app/components/layout/SidebarNavGroup.vue
+++ b/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" class="md:!text-xs xl:!text-sm 2xl:!text-base">
+          <SidebarMenuButton :tooltip="item.title" :size="size" class="md:!text-xs 2xl:!text-sm">
             <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 md:!text-xs xl:!text-sm 2xl:!text-base"
+                  class="mx-4 rounded-lg py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm 2xl:!text-base"
                   active-class="bg-primary text-white"
                   @click="setOpenMobile(false)"
                 >
diff --git a/app/components/layout/SidebarNavHeader.vue b/app/components/layout/SidebarNavHeader.vue
index 351f7d83..4dd56bdb 100644
--- a/app/components/layout/SidebarNavHeader.vue
+++ b/app/components/layout/SidebarNavHeader.vue
@@ -22,13 +22,13 @@ const activeTeam = ref(props.teams[0])
             <div
               class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
             >
-              <img :src="activeTeam.logo" class="h-full w-full" />
+              <img :src="activeTeam?.logo" class="h-full w-full" />
             </div>
             <div class="grid flex-1 text-left text-sm leading-tight">
               <span class="truncate font-semibold">
-                {{ activeTeam.name }}
+                {{ activeTeam?.name }}
               </span>
-              <span class="truncate text-xs">{{ activeTeam.plan }}</span>
+              <span class="truncate text-xs">{{ activeTeam?.plan }}</span>
             </div>
           </SidebarMenuButton>
         </DropdownMenuTrigger>
diff --git a/app/components/layout/SidebarNavLink.vue b/app/components/layout/SidebarNavLink.vue
index 260c48be..322a635b 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 md:!text-xs xl:!text-sm 2xl:!text-base"
+          class="group flex items-center gap-3 rounded-lg px-2 py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm"
           active-class="bg-primary text-white"
           @click="setOpenMobile(false)"
         >
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index c00ba9d7..0e9ec0bf 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 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',
+        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl: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/sidebar/SidebarGroupLabel.vue b/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
index 162e04e0..0479b7a9 100644
--- a/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
+++ b/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
@@ -15,7 +15,7 @@ const props = defineProps<PrimitiveProps & {
     :as="as"
     :as-child="asChild"
     :class="cn(
-      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 md:text-xs 2xl:text-sm font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
       'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
       props.class)"
   >
diff --git a/app/components/pub/ui/sidebar/SidebarMenuBadge.vue b/app/components/pub/ui/sidebar/SidebarMenuBadge.vue
index 80862e1a..8503f0c4 100644
--- a/app/components/pub/ui/sidebar/SidebarMenuBadge.vue
+++ b/app/components/pub/ui/sidebar/SidebarMenuBadge.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-sidebar="menu-badge"
     :class="cn(
-      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 md:text-xs 2xl:text-sm  font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
       'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
       'peer-data-[size=sm]/menu-button:top-1',
       'peer-data-[size=default]/menu-button:top-1.5',
diff --git a/app/components/pub/ui/table/TableCell.vue b/app/components/pub/ui/table/TableCell.vue
index d292236f..288cef77 100644
--- a/app/components/pub/ui/table/TableCell.vue
+++ b/app/components/pub/ui/table/TableCell.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <td
     :class="
       cn(
-        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+        'p-4 align-middle md:text-xs 2xl:text-sm [&:has([role=checkbox])]:pr-0',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/table/TableHead.vue b/app/components/pub/ui/table/TableHead.vue
index 624955d6..cf2cfcf2 100644
--- a/app/components/pub/ui/table/TableHead.vue
+++ b/app/components/pub/ui/table/TableHead.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+  <th :class="cn('h-12 px-4 text-left md:text-xs 2xl:text-sm align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
     <slot />
   </th>
 </template>

From f52e51677590555a189a7d014af596079bcc2cc9 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Sun, 12 Oct 2025 13:06:21 +0700
Subject: [PATCH 07/10] dev: hotfix, layout

---
 app/components/pub/ui/card/CardContent.vue        |  2 +-
 app/components/pub/ui/card/CardDescription.vue    |  2 +-
 app/components/pub/ui/card/CardFooter.vue         |  2 +-
 app/components/pub/ui/sidebar/Sidebar.vue         | 10 +++++-----
 app/components/pub/ui/sidebar/SidebarProvider.vue |  2 ++
 app/components/pub/ui/sidebar/utils.ts            |  3 ++-
 app/layouts/default.vue                           |  2 +-
 7 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/components/pub/ui/card/CardContent.vue b/app/components/pub/ui/card/CardContent.vue
index 2c5eda28..08b098f0 100644
--- a/app/components/pub/ui/card/CardContent.vue
+++ b/app/components/pub/ui/card/CardContent.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('p-4 xl:p-5 2xl:p-6', props.class)">
+  <div :class="cn('p-4 2xl:p-5', props.class)"> 
     <slot />
   </div>
 </template>
diff --git a/app/components/pub/ui/card/CardDescription.vue b/app/components/pub/ui/card/CardDescription.vue
index b17e1d89..b20d2ad7 100644
--- a/app/components/pub/ui/card/CardDescription.vue
+++ b/app/components/pub/ui/card/CardDescription.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <p :class="cn('text-sm text-muted-foreground', props.class)">
+  <p :class="cn('text-xs 2xl:text-sm text-muted-foreground', props.class)">
     <slot />
   </p>
 </template>
diff --git a/app/components/pub/ui/card/CardFooter.vue b/app/components/pub/ui/card/CardFooter.vue
index 08a2bd84..b2f2e110 100644
--- a/app/components/pub/ui/card/CardFooter.vue
+++ b/app/components/pub/ui/card/CardFooter.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+  <div :class="cn('flex items-center p-4 2xl:p-5 pt-0', props.class)">
     <slot />
   </div>
 </template>
diff --git a/app/components/pub/ui/sidebar/Sidebar.vue b/app/components/pub/ui/sidebar/Sidebar.vue
index f25e3b9c..d7a9d0d0 100644
--- a/app/components/pub/ui/sidebar/Sidebar.vue
+++ b/app/components/pub/ui/sidebar/Sidebar.vue
@@ -30,7 +30,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 <template>
   <div
     v-if="collapsible === 'none'"
-    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col', props.class)"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] flex-col', props.class)"  
     v-bind="$attrs"
   >
     <slot />
@@ -64,7 +64,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     <div
       :class="
         cn(
-          'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+          'relative h-svh w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
           'group-data-[collapsible=offcanvas]:w-0',
           'group-data-[side=right]:rotate-180',
           variant === 'floating' || variant === 'inset'
@@ -76,10 +76,10 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     <div
       :class="
         cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
           side === 'left'
-            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=offcanvas]:2xl:left-[calc(var(--xxl-sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=offcanvas]:2xl:right-[calc(var(--xxl-sidebar-width)*-1)]',
           // Adjust the padding for floating and inset variants.
           variant === 'floating' || variant === 'inset'
             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]'
diff --git a/app/components/pub/ui/sidebar/SidebarProvider.vue b/app/components/pub/ui/sidebar/SidebarProvider.vue
index 0ef2a5b0..d8428d8d 100644
--- a/app/components/pub/ui/sidebar/SidebarProvider.vue
+++ b/app/components/pub/ui/sidebar/SidebarProvider.vue
@@ -11,6 +11,7 @@ import {
   SIDEBAR_COOKIE_NAME,
   SIDEBAR_KEYBOARD_SHORTCUT,
   SIDEBAR_WIDTH,
+  XXL_SIDEBAR_WIDTH,
   SIDEBAR_WIDTH_ICON,
 } from './utils'
 
@@ -87,6 +88,7 @@ provideSidebarContext({
     <div
       :style="{
         '--sidebar-width': SIDEBAR_WIDTH,
+        '--xxl-sidebar-width': XXL_SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
       :class="
diff --git a/app/components/pub/ui/sidebar/utils.ts b/app/components/pub/ui/sidebar/utils.ts
index 3ded66c4..768201dd 100644
--- a/app/components/pub/ui/sidebar/utils.ts
+++ b/app/components/pub/ui/sidebar/utils.ts
@@ -3,7 +3,8 @@ import { createContext } from 'radix-vue'
 
 export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH = '12rem'
+export const XXL_SIDEBAR_WIDTH = '14rem'
 export const SIDEBAR_WIDTH_MOBILE = '18rem'
 export const SIDEBAR_WIDTH_ICON = '3rem'
 export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index f26f0ca5..dd52a9c8 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -28,7 +28,7 @@ const contentFrameClass = computed(() => {
     <LayoutAppSidebar />
     <SidebarInset>
       <LayoutHeader />
-      <div :class="`w-full p-4 xl:p-5 2xl:p-6 flex justify-center ${contentFrameClass}`">
+      <div :class="`w-full p-4 2xl:p-5 flex justify-center ${contentFrameClass}`">
         <div v-if="contentFrame !== 'cf-no-frame'">
           <Card>
             <CardContent>

From 0f7f4f592b5ae9b35d77e540c21b7d63f31fd168 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Sun, 12 Oct 2025 16:10:06 +0700
Subject: [PATCH 08/10] feat/encounter: cleaning

---
 app/components/app/encounter/quick-info.vue  |  2 +-
 app/components/content/encounter/list.vue    |  2 +-
 app/components/content/encounter/process.vue | 12 +++++++---
 app/handlers/encounter.handler.ts            | 25 ++++++++++++++++++++
 app/models/encounter.ts                      | 12 +++++++++-
 5 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 app/handlers/encounter.handler.ts

diff --git a/app/components/app/encounter/quick-info.vue b/app/components/app/encounter/quick-info.vue
index 56f40e79..49d81926 100644
--- a/app/components/app/encounter/quick-info.vue
+++ b/app/components/app/encounter/quick-info.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="w-full rounded-md border bg-white p-4 shadow-sm">
+  <div class="w-full rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
     <!-- Data Pasien -->
     <h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ 'data.patient.person.name' }} - {{ 'data.patient.number' }}</h2>
 
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index 088bf482..f218444a 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -49,7 +49,7 @@ const refSearchNav: RefSearchNav = {
 
 async function getPatientList() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/encounter')
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index e7c0ffc4..af99aca7 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -7,9 +7,12 @@ import { useRoute, useRouter } from 'vue-router'
 import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
 
-import Status from '~/components/app/encounter/status.vue'
+import { getDetail } from '~/services/encounter.service'
+
 import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+import PrescriptionList from '~/components/content/prescription/list.vue'
+import type { Encounter } from '~/models/encounter'
 
 const route = useRoute()
 const router = useRouter()
@@ -22,6 +25,9 @@ const activeTab = computed({
   },
 })
 
+const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const encounter = ref<Encounter>((await getDetail(id)) as Encounter)
+
 const data = {
   noRm: 'RM21123',
   nama: 'Ahmad Sutanto',
@@ -36,7 +42,7 @@ const data = {
 }
 
 const tabs: TabItem[] = [
-  { value: 'status', label: 'Status Masuk/Keluar', component: Status },
+  { value: 'status', label: 'Status Masuk/Keluar'},
   { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
   { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
   { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
@@ -44,7 +50,7 @@ const tabs: TabItem[] = [
   { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
   { value: 'consent', label: 'General Consent' },
   { value: 'patient-note', label: 'CPRJ' },
-  { value: 'prescription', label: 'Order Obat' },
+  { value: 'prescription', label: 'Order Obat', component: PrescriptionList },
   { value: 'device', label: 'Order Alkes' },
   { value: 'mcu-radiology', label: 'Order Radiologi' },
   { value: 'mcu-lab-pc', label: 'Order Lab PK' },
diff --git a/app/handlers/encounter.handler.ts b/app/handlers/encounter.handler.ts
new file mode 100644
index 00000000..10586ffb
--- /dev/null
+++ b/app/handlers/encounter.handler.ts
@@ -0,0 +1,25 @@
+
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/encounter.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/models/encounter.ts b/app/models/encounter.ts
index 1cd7485c..43821be6 100644
--- a/app/models/encounter.ts
+++ b/app/models/encounter.ts
@@ -1,4 +1,5 @@
 import { type Doctor, genDoctor } from "./doctor"
+import { genEmployee, type Employee } from "./employee"
 
 export interface Encounter {
     id: number
@@ -9,6 +10,8 @@ export interface Encounter {
     specialist_id?: number
     subspecialist_id?: number
     visitdate: string
+    adm_employee_id: number
+    adm_employee: Employee
     appointment_doctor_id: number
     appointment_doctor: Doctor
     responsible_doctor_id?: number
@@ -31,9 +34,16 @@ export function genEncounter(): Encounter {
         class_code: '',
         unit_id: 0,
         visitdate: '',
+        adm_employee_id: 0,
+        adm_employee: genEmployee(),
         appointment_doctor_id: 0,
         appointment_doctor: genDoctor(),
         medicalDischargeEducation: '',
         status_code: ''
     }
-}
\ No newline at end of file
+}
+
+export interface EncounterCheckInDto {
+    responsible_doctor_id: number
+    responsibleArea_employee_id: number
+}

From cad7ac6a71bfd287414ad40cd809d5e021a73e77 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Sun, 12 Oct 2025 21:24:35 +0700
Subject: [PATCH 09/10] dev: hotfix, adjust some inputs

---
 app/components/pub/my-ui/combobox/combobox.vue | 9 +++++++--
 app/components/pub/my-ui/comp-tab/comp-tab.vue | 2 +-
 app/components/pub/my-ui/doc-entry/block.vue   | 2 +-
 app/components/pub/ui/table/TableCell.vue      | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/components/pub/my-ui/combobox/combobox.vue b/app/components/pub/my-ui/combobox/combobox.vue
index f89b6918..4c0c5bb5 100644
--- a/app/components/pub/my-ui/combobox/combobox.vue
+++ b/app/components/pub/my-ui/combobox/combobox.vue
@@ -23,12 +23,17 @@ const open = ref(false)
 const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))
 
 const displayText = computed(() => {
+  console.log(selectedItem);
   if (selectedItem.value?.label) {
     return selectedItem.value.label
   }
   return props.placeholder || 'Pilih item'
 })
 
+watch(props, () => {
+  console.log(props.modelValue);
+})
+
 const searchableItems = computed(() => {
   const itemsWithSearch = props.items.map((item) => ({
     ...item,
@@ -69,10 +74,10 @@ function onSelect(item: Item) {
         :aria-describedby="`${props.id}-search`"
         :class="
           cn(
-            'w-full justify-between border md:text-xs 2xl:text-sm font-normal rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
+            'w-full justify-between border dark:!border-slate-400 h-8 2xl:h-9 md:text-xs 2xl:text-sm font-normal rounded-md px-3 focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white',
             {
               'cursor-not-allowed bg-gray-100 opacity-50 border-gray-300 text-gray-500': props.isDisabled,
-              'bg-white text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700': !props.isDisabled,
+              'bg-white text-black dark:bg-slate-950 dark:text-white dark:border-gray-600 border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700': !props.isDisabled,
               'text-gray-400 dark:text-gray-500': !modelValue && !props.isDisabled,
             },
             props.class,
diff --git a/app/components/pub/my-ui/comp-tab/comp-tab.vue b/app/components/pub/my-ui/comp-tab/comp-tab.vue
index e60fd10d..de045bce 100644
--- a/app/components/pub/my-ui/comp-tab/comp-tab.vue
+++ b/app/components/pub/my-ui/comp-tab/comp-tab.vue
@@ -19,7 +19,7 @@ function changeTab(value: string) {
 
 <template>
   <!-- Tabs -->
-  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
     <Button
       v-for="tab in data"
       :key="tab.value"
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index cda58280..165a6661 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -60,7 +60,7 @@ const settingClass = computed(() => {
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
     ][getLabelSizeIdx(props.labelSize)]
   } else {
-    cls += ' [&_.label]:pb-1 ';
+    cls += ' [&_.label]:pb-1 [&_.label]:!pt-0 ';
   }
   cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
   cls += '[&_textarea]:text-xs [&_textarea]:2xl:!text-sm '
diff --git a/app/components/pub/ui/table/TableCell.vue b/app/components/pub/ui/table/TableCell.vue
index 288cef77..7955b08f 100644
--- a/app/components/pub/ui/table/TableCell.vue
+++ b/app/components/pub/ui/table/TableCell.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <td
     :class="
       cn(
-        'p-4 align-middle md:text-xs 2xl:text-sm [&:has([role=checkbox])]:pr-0',
+        'p2 2xl:p-3 align-middle md:text-xs 2xl:text-sm [&:has([role=checkbox])]:pr-0',
         props.class,
       )
     "

From 39cfe08a6241a80371ecff7bad2a948b42feb798 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Mon, 13 Oct 2025 07:30:42 +0700
Subject: [PATCH 10/10] feat/cleaning: complete the pages

---
 app/components/content/dashboard/index.vue    |  4 +--
 .../echocardiography/index.vue                | 10 +++++++
 .../children-action/spirometry/index.vue      | 10 +++++++
 .../children-action/thalasemia/index.vue      | 10 +++++++
 .../client/medical-record/index.vue           | 10 +++++++
 app/pages/(features)/device-order/index.vue   | 10 +++++++
 .../emergency/consultation/index.vue          | 10 +++++++
 .../(features)/emergency/encounter/index.vue  | 10 +++++++
 .../(features)/emergency/triage/index.vue     | 10 +++++++
 .../inpatient/consultation/index.vue          | 10 +++++++
 .../(features)/inpatient/encounter/index.vue  | 10 +++++++
 app/pages/(features)/inpatient/index.vue      | 10 +++++++
 .../(features)/inpatient/request/index.vue    | 10 +++++++
 .../{ => integration}/bpjs/sep/add.vue        |  0
 .../{ => integration}/bpjs/sep/index.vue      |  0
 .../(features)/micro-lab-order/index.vue      | 10 +++++++
 .../(features)/nutrition-order/index.vue      | 10 +++++++
 .../outpatient/consultation/index.vue         | 10 +++++++
 .../(features)/outpatient/encounter/index.vue | 10 +++++++
 .../outpatient/examination-queue/index.vue    |  3 --
 .../outpatient/examination/index.vue          |  3 --
 .../outpatient/polyclinic-queue/index.vue     | 10 +++++++
 .../outpatient/registration-queue/index.vue   |  9 +++++-
 .../outpatient/registration/index.vue         |  3 --
 .../outpation-action/cemotherapy/index.vue    | 10 +++++++
 .../outpation-action/hemophilia/index.vue     | 10 +++++++
 app/pages/(features)/pa-lab-order/index.vue   | 10 +++++++
 app/pages/(features)/payment/index.vue        | 10 +++++++
 app/pages/(features)/pc-lab-order/index.vue   | 10 +++++++
 .../(features)/radiology-order/index.vue      | 10 +++++++
 public/side-menu-items/doc.json               | 10 +++----
 public/side-menu-items/lab.json               |  2 +-
 public/side-menu-items/nur.json               | 10 +++----
 public/side-menu-items/nut.json               | 10 +++----
 public/side-menu-items/pha.json               | 11 --------
 public/side-menu-items/sys.json               | 28 ++++++-------------
 36 files changed, 265 insertions(+), 58 deletions(-)
 create mode 100644 app/pages/(features)/children-action/echocardiography/index.vue
 create mode 100644 app/pages/(features)/children-action/spirometry/index.vue
 create mode 100644 app/pages/(features)/children-action/thalasemia/index.vue
 create mode 100644 app/pages/(features)/client/medical-record/index.vue
 create mode 100644 app/pages/(features)/device-order/index.vue
 create mode 100644 app/pages/(features)/emergency/consultation/index.vue
 create mode 100644 app/pages/(features)/emergency/encounter/index.vue
 create mode 100644 app/pages/(features)/emergency/triage/index.vue
 create mode 100644 app/pages/(features)/inpatient/consultation/index.vue
 create mode 100644 app/pages/(features)/inpatient/encounter/index.vue
 create mode 100644 app/pages/(features)/inpatient/index.vue
 create mode 100644 app/pages/(features)/inpatient/request/index.vue
 rename app/pages/(features)/{ => integration}/bpjs/sep/add.vue (100%)
 rename app/pages/(features)/{ => integration}/bpjs/sep/index.vue (100%)
 create mode 100644 app/pages/(features)/micro-lab-order/index.vue
 create mode 100644 app/pages/(features)/nutrition-order/index.vue
 create mode 100644 app/pages/(features)/outpatient/consultation/index.vue
 create mode 100644 app/pages/(features)/outpatient/encounter/index.vue
 delete mode 100644 app/pages/(features)/outpatient/examination-queue/index.vue
 delete mode 100644 app/pages/(features)/outpatient/examination/index.vue
 create mode 100644 app/pages/(features)/outpatient/polyclinic-queue/index.vue
 delete mode 100644 app/pages/(features)/outpatient/registration/index.vue
 create mode 100644 app/pages/(features)/outpation-action/cemotherapy/index.vue
 create mode 100644 app/pages/(features)/outpation-action/hemophilia/index.vue
 create mode 100644 app/pages/(features)/pa-lab-order/index.vue
 create mode 100644 app/pages/(features)/payment/index.vue
 create mode 100644 app/pages/(features)/pc-lab-order/index.vue
 create mode 100644 app/pages/(features)/radiology-order/index.vue

diff --git a/app/components/content/dashboard/index.vue b/app/components/content/dashboard/index.vue
index 35dd78a2..c9780fcc 100644
--- a/app/components/content/dashboard/index.vue
+++ b/app/components/content/dashboard/index.vue
@@ -74,7 +74,7 @@ const summaryData: any[] = [
 const linkItems = [
   {
     title: 'Daftar Pasien',
-    link: '/patient',
+    link: '/client/patient',
     icon: 'i-lucide-users',
   },
   {
@@ -89,7 +89,7 @@ const linkItems = [
   },
   {
     title: 'Rehabilitasi',
-    link: '/patient',
+    link: '/client/patient',
     icon: 'i-lucide-heart',
   },
 ]
diff --git a/app/pages/(features)/children-action/echocardiography/index.vue b/app/pages/(features)/children-action/echocardiography/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/children-action/echocardiography/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/children-action/spirometry/index.vue b/app/pages/(features)/children-action/spirometry/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/children-action/spirometry/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/children-action/thalasemia/index.vue b/app/pages/(features)/children-action/thalasemia/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/children-action/thalasemia/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/client/medical-record/index.vue b/app/pages/(features)/client/medical-record/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/client/medical-record/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/device-order/index.vue b/app/pages/(features)/device-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/device-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/emergency/consultation/index.vue b/app/pages/(features)/emergency/consultation/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/emergency/consultation/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/emergency/encounter/index.vue b/app/pages/(features)/emergency/encounter/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/emergency/encounter/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/emergency/triage/index.vue b/app/pages/(features)/emergency/triage/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/emergency/triage/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/inpatient/consultation/index.vue b/app/pages/(features)/inpatient/consultation/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/inpatient/consultation/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/inpatient/encounter/index.vue b/app/pages/(features)/inpatient/encounter/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/inpatient/encounter/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/inpatient/index.vue b/app/pages/(features)/inpatient/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/inpatient/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/inpatient/request/index.vue b/app/pages/(features)/inpatient/request/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/inpatient/request/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/bpjs/sep/add.vue b/app/pages/(features)/integration/bpjs/sep/add.vue
similarity index 100%
rename from app/pages/(features)/bpjs/sep/add.vue
rename to app/pages/(features)/integration/bpjs/sep/add.vue
diff --git a/app/pages/(features)/bpjs/sep/index.vue b/app/pages/(features)/integration/bpjs/sep/index.vue
similarity index 100%
rename from app/pages/(features)/bpjs/sep/index.vue
rename to app/pages/(features)/integration/bpjs/sep/index.vue
diff --git a/app/pages/(features)/micro-lab-order/index.vue b/app/pages/(features)/micro-lab-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/micro-lab-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/nutrition-order/index.vue b/app/pages/(features)/nutrition-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/nutrition-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpatient/consultation/index.vue b/app/pages/(features)/outpatient/consultation/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpatient/consultation/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpatient/encounter/index.vue b/app/pages/(features)/outpatient/encounter/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpatient/encounter/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpatient/examination-queue/index.vue b/app/pages/(features)/outpatient/examination-queue/index.vue
deleted file mode 100644
index 8616dd19..00000000
--- a/app/pages/(features)/outpatient/examination-queue/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Examination Queue</div>
-</template>
diff --git a/app/pages/(features)/outpatient/examination/index.vue b/app/pages/(features)/outpatient/examination/index.vue
deleted file mode 100644
index 806b2650..00000000
--- a/app/pages/(features)/outpatient/examination/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Examination</div>
-</template>
diff --git a/app/pages/(features)/outpatient/polyclinic-queue/index.vue b/app/pages/(features)/outpatient/polyclinic-queue/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpatient/polyclinic-queue/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpatient/registration-queue/index.vue b/app/pages/(features)/outpatient/registration-queue/index.vue
index 053b5233..50485cec 100644
--- a/app/pages/(features)/outpatient/registration-queue/index.vue
+++ b/app/pages/(features)/outpatient/registration-queue/index.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
 <template>
-  <div>Registration Queue</div>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
 </template>
diff --git a/app/pages/(features)/outpatient/registration/index.vue b/app/pages/(features)/outpatient/registration/index.vue
deleted file mode 100644
index 90430b84..00000000
--- a/app/pages/(features)/outpatient/registration/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Registration</div>
-</template>
diff --git a/app/pages/(features)/outpation-action/cemotherapy/index.vue b/app/pages/(features)/outpation-action/cemotherapy/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpation-action/cemotherapy/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/outpation-action/hemophilia/index.vue b/app/pages/(features)/outpation-action/hemophilia/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/outpation-action/hemophilia/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/pa-lab-order/index.vue b/app/pages/(features)/pa-lab-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/pa-lab-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/payment/index.vue b/app/pages/(features)/payment/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/payment/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/pc-lab-order/index.vue b/app/pages/(features)/pc-lab-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/pc-lab-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/app/pages/(features)/radiology-order/index.vue b/app/pages/(features)/radiology-order/index.vue
new file mode 100644
index 00000000..50485cec
--- /dev/null
+++ b/app/pages/(features)/radiology-order/index.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+  const route = useRoute();
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-5 text-base font-semibold">Hello world!!</div>
+    <div>You are accessing "{{ route.fullPath }}"</div>
+  </div>
+</template>
diff --git a/public/side-menu-items/doc.json b/public/side-menu-items/doc.json
index 3254963f..e3ab2cdf 100644
--- a/public/side-menu-items/doc.json
+++ b/public/side-menu-items/doc.json
@@ -84,12 +84,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/cemotherapy/encounter"
+        "link": "/outpatient-action/cemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/hemophilia/encounter"
+        "link": "/outpatient-action/hemophilia/encounter"
       }
     ]
   },
@@ -99,17 +99,17 @@
       {
         "title": "Thalasemi",
         "icon": "i-lucide-baby",
-        "link": "/thalasemia/encounter"
+        "link": "/children-action/thalasemia"
       },
       {
         "title": "Echocardiography",
         "icon": "i-lucide-baby",
-        "link": "/echocardiography/encounter"
+        "link": "/children-action/echocardiography"
       },
       {
         "title": "Spirometri",
         "icon": "i-lucide-baby",
-        "link": "/spirometry/encounter"
+        "link": "/children-action/spirometry"
       }
     ]
   }
diff --git a/public/side-menu-items/lab.json b/public/side-menu-items/lab.json
index 0b7f7b0d..b366ff42 100644
--- a/public/side-menu-items/lab.json
+++ b/public/side-menu-items/lab.json
@@ -10,7 +10,7 @@
       {
         "title": "Lab - Order",
         "icon": "i-lucide-microscope",
-        "link": "/lab-order"
+        "link": "/pc-lab-order"
       },
       {
         "title": "Lab Mikro - Order",
diff --git a/public/side-menu-items/nur.json b/public/side-menu-items/nur.json
index 7382702e..8185456c 100644
--- a/public/side-menu-items/nur.json
+++ b/public/side-menu-items/nur.json
@@ -63,12 +63,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/cemotherapy/encounter"
+        "link": "/outpation-action/cemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/hemophilia/encounter"
+        "link": "/outpation-action/hemophilia"
       }
     ]
   },
@@ -78,17 +78,17 @@
       {
         "title": "Thalasemi",
         "icon": "i-lucide-baby",
-        "link": "/thalasemia/encounter"
+        "link": "/children-action/thalasemia"
       },
       {
         "title": "Echocardiography",
         "icon": "i-lucide-baby",
-        "link": "/echocardiography/encounter"
+        "link": "/children-action/echocardiography"
       },
       {
         "title": "Spirometri",
         "icon": "i-lucide-baby",
-        "link": "/spirometry/encounter"
+        "link": "/children-action/spirometry"
       }
     ]
   }
diff --git a/public/side-menu-items/nut.json b/public/side-menu-items/nut.json
index 95f2d77a..4368b22e 100644
--- a/public/side-menu-items/nut.json
+++ b/public/side-menu-items/nut.json
@@ -35,12 +35,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/outpatient-medical-act/cemotherapy"
+        "link": "/outpatient-action/cemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/outpatient-medical-act/hemophilia"
+        "link": "/outpatient-action/hemophilia"
       }
     ]
   },
@@ -50,17 +50,17 @@
       {
         "title": "Thalasemi",
         "icon": "i-lucide-baby",
-        "link": "/child-medical-act/thalasemia"
+        "link": "/children-action/thalasemia"
       },
       {
         "title": "Echocardiography",
         "icon": "i-lucide-baby",
-        "link": "/child-medical-act/echocardiography"
+        "link": "/child-action/echocardiography"
       },
       {
         "title": "Spirometri",
         "icon": "i-lucide-baby",
-        "link": "/child-medical-act/spirometry"
+        "link": "/child-action/spirometry"
       }
     ]
   }
diff --git a/public/side-menu-items/pha.json b/public/side-menu-items/pha.json
index 35859c27..22e60caf 100644
--- a/public/side-menu-items/pha.json
+++ b/public/side-menu-items/pha.json
@@ -58,17 +58,6 @@
             "link": "/tools-equipment-src/medicine-type"
           }
         ]
-      },
-      {
-        "title": "Umum",
-        "icon": "i-lucide-airplay",
-        "children": [
-          {
-            "title": "Uom",
-            "icon": "i-lucide-airplay",
-            "link": "/common/uom"
-          }
-        ]
       }
     ]
   }
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index 52568ebc..c7b15101 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -104,7 +104,7 @@
       {
         "title": "Lab - Order",
         "icon": "i-lucide-microscope",
-        "link": "/lab-order"
+        "link": "/pc-lab-order"
       },
       {
         "title": "Lab Mikro - Order",
@@ -139,12 +139,12 @@
       {
         "title": "Kemoterapi",
         "icon": "i-lucide-droplets",
-        "link": "/cemotherapy/encounter"
+        "link": "/outpation-action/cemotherapy"
       },
       {
         "title": "Hemofilia",
         "icon": "i-lucide-droplet-off",
-        "link": "/hemophilia/encounter"
+        "link": "/outpation-action/hemophilia"
       }
     ]
   },
@@ -154,17 +154,17 @@
       {
         "title": "Thalasemi",
         "icon": "i-lucide-baby",
-        "link": "/thalasemia/encounter"
+        "link": "/children-action/thalasemia"
       },
       {
         "title": "Echocardiography",
         "icon": "i-lucide-baby",
-        "link": "/echocardiography/encounter"
+        "link": "/children-action/echocardiography"
       },
       {
         "title": "Spirometri",
         "icon": "i-lucide-baby",
-        "link": "/spirometry/encounter"
+        "link": "/children-action/spirometry"
       }
     ]
   },
@@ -193,29 +193,19 @@
           {
             "title": "SEP",
             "icon": "i-lucide-circuit-board",
-            "link": "/bpjs-integration/sep"
+            "link": "/integration/bpjs/sep"
           },
           {
             "title": "Peserta",
             "icon": "i-lucide-circuit-board",
-            "link": "/bpjs-integration/member"
+            "link": "/integration/bpjs/member"
           }
         ]
       },
       {
         "title": "SATUSEHAT",
         "icon": "i-lucide-database",
-        "link": "/satusehat-integration"
-      },
-      {
-        "heading": "Keuangan",
-        "items": [
-          {
-            "title": "Daftar harga",
-            "icon": "i-lucide-list",
-            "link": "/item"
-          }
-        ]
+        "link": "/integration/satusehat"
       }
     ]
   },