diff --git a/README.md b/README.md
index 40601187..45e4a4e5 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,16 @@ The basic development workflow follows these steps:
 - Pages load the appropriate content from `components/content/`.
 - They do not contain UI or logic directly, just route level layout or guards.
 
+### Validation
+
+- UI level validation in `components/app`. help users avoid mistakes before submitting.
+  - Lightweight/instant validation related to UX.
+  - Basic formatting (email regex, numeric-only, password length).
+  - Showing error messages directly under the field.
+
+- Business level validation in `components/flow`. cannot rely only on the UI, since it often requires server-side checks or rules that may change.
+  - More complex validation rules tied to business logic.
+
 ## Code Conventions
 
 - Under the script setup block, putting things in group with the following order:
diff --git a/app/components/app/device/entry-form.vue b/app/components/app/device/entry-form.vue
deleted file mode 100644
index 38b4aea0..00000000
--- a/app/components/app/device/entry-form.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import Block from '~/components/pub/custom-ui/form/block.vue'
-import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
-import Field from '~/components/pub/custom-ui/form/field.vue'
-import Label from '~/components/pub/custom-ui/form/label.vue'
-
-const props = defineProps<{ modelValue: any; errors: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
-
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => {
-    emit('update:modelValue', val)
-  },
-})
-
-const items = [
-  { value: 'item1', label: 'Item 1' },
-  { value: 'item2', label: 'Item 2' },
-]
-</script>
-
-<template>
-  <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup :column="1">
-            <Label>Kode</Label>
-            <Field>
-              <Input v-model="data.code" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup v-if="!!props.errors.code">
-            <Label></Label>
-            <span class="text-red-400 text-sm">{{ props.errors.code }}</span>
-          </FieldGroup>
-          <FieldGroup :column="1">
-            <Label>Nama</Label>
-            <Field>
-              <Input v-model="data.name" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup v-if="!!props.errors.name">
-            <Label></Label>
-            <span class="text-red-400 text-sm">{{ props.errors.name }}</span>
-          </FieldGroup>
-          <FieldGroup :column="1">
-            <Label>Item</Label>
-            <Field>
-              <Select v-model="data.type" :items="items" placeholder="Pilih item" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="1">
-            <Label>Satuan</Label>
-            <Field>
-              <Select v-model="data.uom" :items="items" placeholder="Pilih item" />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
-    </div>
-  </form>
-</template>
diff --git a/app/components/app/doctor/entry-form.vue b/app/components/app/doctor/entry-form.vue
index 5aec1ba3..b5ac8613 100644
--- a/app/components/app/doctor/entry-form.vue
+++ b/app/components/app/doctor/entry-form.vue
@@ -11,76 +11,34 @@ const data = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 })
+
+const items = [
+  { value: 'doctor', label: 'Dokter' },
+  { value: 'nurse', label: 'Perawat' },
+]
 </script>
 
 <template>
   <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup :column="1">
-            <Label>Nama dan Gelar</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>No. IHS</Label>
             <Field>
-              <Input v-model="data.name" type="text" name="name" default-value="dr." />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
+              <Input />
             </Field>
           </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>NIK</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>No. SIP</Label>
             <Field>
-              <Input type="text" name="identity_number" />
+              <Input />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>NO SIP</Label>
-            <Field name="sip_number">
-              <Input type="text" name="sip_no" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Telepon / HP</Label>
-            <Field name="phone">
-              <Input type="text" name="phone" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Kode BPJS</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Unit</Label>
             <Field>
-              <Input type="text" name="bpjs_code" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Fee Rajal</Label>
-            <Field>
-              <Input type="number" name="outPatient_rate" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Fee Ranap</Label>
-            <Field>
-              <Input type="number" name="inPatient_rate" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="3">
-            <Label>Status</Label>
-            <Field>
-              <Input type="select" name="status">
-                <option value="active">Aktif</option>
-                <option value="inactive">Tidak Aktif</option>
-              </Input>
+              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
             </Field>
           </FieldGroup>
         </Block>
diff --git a/app/components/app/employee/entry-form.vue b/app/components/app/employee/entry-form.vue
new file mode 100644
index 00000000..73c45f98
--- /dev/null
+++ b/app/components/app/employee/entry-form.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any; items: any[] }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Nomor Induk Pegawai</Label>
+            <Field>
+              <Input v-model="data.number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Status</Label>
+            <Field>
+              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Position</Label>
+            <Field>
+              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Divisi</Label>
+            <Field>
+              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/employee/list-cfg.ts b/app/components/app/employee/list-cfg.ts
new file mode 100644
index 00000000..f697dc88
--- /dev/null
+++ b/app/components/app/employee/list-cfg.ts
@@ -0,0 +1,109 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 100 },
+  { width: 100 },
+  { width: 100 },
+  { width: 50 },
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode JKN' },
+    { label: 'Nama' },
+    { label: 'No KTP' },
+    { label: 'No SIP' },
+    { label: 'No IHS' },
+    { label: 'Telpon' },
+    { label: 'Fee Ranap' },
+    { label: 'Fee Rajal' },
+    { label: 'Status' },
+  ],
+]
+
+export const keys = [
+  'bpjs_code',
+  'name',
+  'identity_number',
+  'sip_no',
+  'ihs_number',
+  'phone',
+  'inPatient_itemPrice',
+  'outPatient_itemPrice',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    console.log(rec)
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  status: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return doctorStatus[recX.status_code as keyof typeof doctorStatus]
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/device/list.vue b/app/components/app/employee/list.vue
similarity index 100%
rename from app/components/app/device/list.vue
rename to app/components/app/employee/list.vue
diff --git a/app/components/app/employee/picker.vue b/app/components/app/employee/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/employee/search.vue b/app/components/app/employee/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/material/entry-form.vue b/app/components/app/equipment/entry-form.vue
similarity index 72%
rename from app/components/app/material/entry-form.vue
rename to app/components/app/equipment/entry-form.vue
index 81951d91..f54a8389 100644
--- a/app/components/app/material/entry-form.vue
+++ b/app/components/app/equipment/entry-form.vue
@@ -2,23 +2,26 @@
 // types
 import type z from 'zod'
 import type { MaterialFormData } from '~/schemas/material'
+<<<<<<< HEAD:app/components/app/equipment/entry-form.vue
+=======
 // helpers
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 // components
 import Label from '~/components/pub/custom-ui/form/label.vue'
+>>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2:app/components/app/material/entry-form.vue
 
 interface Props {
-  isLoading: boolean
   schema: z.ZodSchema<any>
   uoms: any[]
   items: any[]
 }
 
+const isLoading = ref(false)
 const props = defineProps<Props>()
 const emit = defineEmits<{
-  back: []
-  submit: [data: any]
+  submit: [values: MaterialFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
 }>()
 
 const { handleSubmit, defineField, errors } = useForm({
@@ -38,19 +41,36 @@ const [uom, uomAttrs] = defineField('uom_code')
 const [item, itemAttrs] = defineField('item_id')
 const [stock, stockAttrs] = defineField('stock')
 
-const onSubmit = handleSubmit(async (values) => {
-  try {
-    emit('submit', values)
-  } catch (error) {
-    console.error('Submission failed:', error)
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  uom.value = ''
+  item.value = ''
+  stock.value = 0
+}
+
+// Form submission handler
+function onSubmitForm(values: any) {
+  const formData: MaterialFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    uom_code: values.uom_code || '',
+    item_id: values.item_id || '',
+    stock: values.stock || 0,
   }
-})
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form class="grid gap-2" @submit="onSubmit">
+  <form class="grid gap-2" @submit="handleSubmit(onSubmitForm)">
     <div class="grid gap-2">
-      <Label for="code">Kode</Label>
+      <label for="code">Kode</label>
       <Input
         id="code"
         v-model="code"
@@ -63,7 +83,7 @@ const onSubmit = handleSubmit(async (values) => {
       </span>
     </div>
     <div class="grid gap-2">
-      <Label for="name">Nama</Label>
+      <label for="name">Nama</label>
       <Input
         id="name"
         v-model="name"
@@ -76,7 +96,7 @@ const onSubmit = handleSubmit(async (values) => {
       </span>
     </div>
     <div class="grid gap-2">
-      <Label for="uom">Satuan</Label>
+      <label for="uom">Satuan</label>
       <Select
         id="uom"
         v-model="uom"
@@ -92,7 +112,7 @@ const onSubmit = handleSubmit(async (values) => {
       </span>
     </div>
     <div class="grid gap-2">
-      <Label for="item">Item</Label>
+      <label for="item">Item</label>
       <Select
         id="item"
         v-model="item"
@@ -108,7 +128,7 @@ const onSubmit = handleSubmit(async (values) => {
       </span>
     </div>
     <div class="grid gap-2">
-      <Label for="stock">Stok</Label>
+      <label for="stock">Stok</label>
       <Input
         id="stock"
         v-model="stock"
@@ -122,7 +142,7 @@ const onSubmit = handleSubmit(async (values) => {
       </span>
     </div>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button variant="secondary" class="w-[120px]" @click="emit('back')"> Kembali </Button>
+      <Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
       <Button type="submit" class="w-[120px]">
         <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
         Simpan
diff --git a/app/components/app/material/list-cfg.ts b/app/components/app/equipment/list-cfg.ts
similarity index 100%
rename from app/components/app/material/list-cfg.ts
rename to app/components/app/equipment/list-cfg.ts
diff --git a/app/components/app/equipment/list.vue b/app/components/app/equipment/list.vue
new file mode 100644
index 00000000..c912c977
--- /dev/null
+++ b/app/components/app/equipment/list.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+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">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <template v-if="paginationMeta">
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/app/components/app/laborant/entry-form.vue b/app/components/app/laborant/entry-form.vue
new file mode 100644
index 00000000..2a190160
--- /dev/null
+++ b/app/components/app/laborant/entry-form.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup layout="stacked">
+            <Label stacked>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/laborant/list-cfg.ts b/app/components/app/laborant/list-cfg.ts
new file mode 100644
index 00000000..0cff0cce
--- /dev/null
+++ b/app/components/app/laborant/list-cfg.ts
@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode JKN' },
+    { label: 'Nama' },
+    { label: 'No KTP' },
+    { label: 'No SIP' },
+    { label: 'No IHS' },
+    { label: 'Telpon' },
+    { label: 'Fee Ranap' },
+    { label: 'Fee Rajal' },
+    { label: 'Status' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'bpjs_code',
+  'name',
+  'identity_number',
+  'sip_no',
+  'ihs_number',
+  'phone',
+  'inPatient_itemPrice',
+  'outPatient_itemPrice',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+  status(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/material/list.vue b/app/components/app/laborant/list.vue
similarity index 100%
rename from app/components/app/material/list.vue
rename to app/components/app/laborant/list.vue
diff --git a/app/components/app/laborant/picker.vue b/app/components/app/laborant/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/laborant/search.vue b/app/components/app/laborant/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/laborant/status-badge.vue b/app/components/app/laborant/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/laborant/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/nurse/entry-form.vue b/app/components/app/nurse/entry-form.vue
new file mode 100644
index 00000000..2a190160
--- /dev/null
+++ b/app/components/app/nurse/entry-form.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup layout="stacked">
+            <Label stacked>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/nurse/list-cfg.ts b/app/components/app/nurse/list-cfg.ts
new file mode 100644
index 00000000..0cff0cce
--- /dev/null
+++ b/app/components/app/nurse/list-cfg.ts
@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode JKN' },
+    { label: 'Nama' },
+    { label: 'No KTP' },
+    { label: 'No SIP' },
+    { label: 'No IHS' },
+    { label: 'Telpon' },
+    { label: 'Fee Ranap' },
+    { label: 'Fee Rajal' },
+    { label: 'Status' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'bpjs_code',
+  'name',
+  'identity_number',
+  'sip_no',
+  'ihs_number',
+  'phone',
+  'inPatient_itemPrice',
+  'outPatient_itemPrice',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+  status(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/nurse/list.vue b/app/components/app/nurse/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/nurse/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/nurse/picker.vue b/app/components/app/nurse/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/nurse/search.vue b/app/components/app/nurse/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/nurse/status-badge.vue b/app/components/app/nurse/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/nurse/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/nutritionist/entry-form.vue b/app/components/app/nutritionist/entry-form.vue
new file mode 100644
index 00000000..2a190160
--- /dev/null
+++ b/app/components/app/nutritionist/entry-form.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup layout="stacked">
+            <Label stacked>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/nutritionist/list-cfg.ts b/app/components/app/nutritionist/list-cfg.ts
new file mode 100644
index 00000000..0cff0cce
--- /dev/null
+++ b/app/components/app/nutritionist/list-cfg.ts
@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode JKN' },
+    { label: 'Nama' },
+    { label: 'No KTP' },
+    { label: 'No SIP' },
+    { label: 'No IHS' },
+    { label: 'Telpon' },
+    { label: 'Fee Ranap' },
+    { label: 'Fee Rajal' },
+    { label: 'Status' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'bpjs_code',
+  'name',
+  'identity_number',
+  'sip_no',
+  'ihs_number',
+  'phone',
+  'inPatient_itemPrice',
+  'outPatient_itemPrice',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+  status(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/nutritionist/list.vue b/app/components/app/nutritionist/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/nutritionist/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/nutritionist/picker.vue b/app/components/app/nutritionist/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/nutritionist/search.vue b/app/components/app/nutritionist/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/nutritionist/status-badge.vue b/app/components/app/nutritionist/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/nutritionist/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/pharmacist/entry-form.vue b/app/components/app/pharmacist/entry-form.vue
new file mode 100644
index 00000000..17f2f2b4
--- /dev/null
+++ b/app/components/app/pharmacist/entry-form.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/pharmacist/list-cfg.ts b/app/components/app/pharmacist/list-cfg.ts
new file mode 100644
index 00000000..0cff0cce
--- /dev/null
+++ b/app/components/app/pharmacist/list-cfg.ts
@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode JKN' },
+    { label: 'Nama' },
+    { label: 'No KTP' },
+    { label: 'No SIP' },
+    { label: 'No IHS' },
+    { label: 'Telpon' },
+    { label: 'Fee Ranap' },
+    { label: 'Fee Rajal' },
+    { label: 'Status' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'bpjs_code',
+  'name',
+  'identity_number',
+  'sip_no',
+  'ihs_number',
+  'phone',
+  'inPatient_itemPrice',
+  'outPatient_itemPrice',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+  status(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/pharmacist/list.vue b/app/components/app/pharmacist/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/pharmacist/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/pharmacist/picker.vue b/app/components/app/pharmacist/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/pharmacist/search.vue b/app/components/app/pharmacist/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/pharmacist/status-badge.vue b/app/components/app/pharmacist/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/pharmacist/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/tools/entry-form.vue b/app/components/app/tools/entry-form.vue
new file mode 100644
index 00000000..f1413f62
--- /dev/null
+++ b/app/components/app/tools/entry-form.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+// helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+// types
+import type z from 'zod'
+import type { DeviceFormData } from '~/schemas/device'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  uoms: any[]
+  items: any[]
+}
+
+const isLoading = ref(false)
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  submit: [values: DeviceFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { handleSubmit, defineField, errors } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    uom_code: '',
+    item_id: '',
+  } as Partial<DeviceFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [uom, uomAttrs] = defineField('uom_code')
+const [item, itemAttrs] = defineField('item_id')
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  uom.value = ''
+  item.value = ''
+}
+
+// Form submission handler
+function onSubmitForm(values: any) {
+  const formData: DeviceFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    uom_code: values.uom_code || '',
+    item_id: values.item_id || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form class="grid gap-2" @submit="handleSubmit(onSubmitForm)">
+    <div class="grid gap-2">
+      <label for="code">Kode</label>
+      <Input
+        id="code"
+        v-model="code"
+        v-bind="codeAttrs"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.code }"
+      />
+      <span v-if="errors.code" class="text-sm text-red-500">
+        {{ errors.code }}
+      </span>
+    </div>
+    <div class="grid gap-2">
+      <label for="name">Nama</label>
+      <Input
+        id="name"
+        v-model="name"
+        v-bind="nameAttrs"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.name }"
+      />
+      <span v-if="errors.name" class="text-sm text-red-500">
+        {{ errors.name }}
+      </span>
+    </div>
+    <div class="grid gap-2">
+      <label for="uom">Satuan</label>
+      <Select
+        id="uom"
+        icon-name="i-lucide-chevron-down"
+        placeholder="Pilih satuan"
+        v-model="uom"
+        v-bind="uomAttrs"
+        :items="uoms"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.uom_code }"
+      />
+      <span v-if="errors.uom_code" class="text-sm text-red-500">
+        {{ errors.uom_code }}
+      </span>
+    </div>
+    <div class="grid gap-2">
+      <label for="item">Item</label>
+      <Select
+        id="item"
+        icon-name="i-lucide-chevron-down"
+        placeholder="Pilih item"
+        v-model="item"
+        v-bind="itemAttrs"
+        :items="items"
+        :disabled="isLoading"
+        :class="{ 'border-red-500': errors.item_id }"
+      />
+      <span v-if="errors.item_id" class="text-sm text-red-500">
+        {{ errors.item_id }}
+      </span>
+    </div>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button type="submit" class="w-[120px]">
+        <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/device/list-cfg.ts b/app/components/app/tools/list-cfg.ts
similarity index 100%
rename from app/components/app/device/list-cfg.ts
rename to app/components/app/tools/list-cfg.ts
diff --git a/app/components/app/tools/list.vue b/app/components/app/tools/list.vue
new file mode 100644
index 00000000..5e6d4382
--- /dev/null
+++ b/app/components/app/tools/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+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>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+  <template v-if="paginationMeta">
+    <div v-if="paginationMeta.totalPage > 1">
+      <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </template>
+</template>
diff --git a/app/components/app/user/entry-form.vue b/app/components/app/user/entry-form.vue
index b1456460..202a494e 100644
--- a/app/components/app/user/entry-form.vue
+++ b/app/components/app/user/entry-form.vue
@@ -11,10 +11,6 @@ const data = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 })
-const items = [
-  { value: 'doctor', label: 'Dokter' },
-  { value: 'nurse', label: 'Perawat' },
-]
 </script>
 
 <template>
@@ -22,30 +18,18 @@ const items = [
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup :column="2">
-            <Label>Username</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Username</Label>
             <Field>
               <Input v-model="data.name" />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Password</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Password</Label>
             <Field>
               <Input v-model="data.password" type="password" />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Status</Label>
-            <Field>
-              <Input v-model="data.status" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Tipe</Label>
-            <Field>
-              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
-            </Field>
-          </FieldGroup>
         </Block>
       </div>
     </div>
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
new file mode 100644
index 00000000..61d2a0b0
--- /dev/null
+++ b/app/components/content/equipment/list.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const uoms = [
+  { value: 'uom-1', label: 'Satuan 1' },
+  { value: 'uom-2', label: 'Satuan 2' },
+  { value: 'uom-3', label: 'Satuan 3' },
+]
+const items = [
+  { value: 'item-1', label: 'Item 1' },
+  { value: 'item-2', label: 'Item 2' },
+  { value: 'item-3', label: 'Item 3' },
+]
+
+// Fungsi untuk fetch data division
+async function fetchEquipmentData(params: any) {
+  // Prepare query parameters for pagination and search
+  const urlParams = new URLSearchParams({
+    'page-number': params.page.toString(),
+    'page-size': params.pageSize.toString(),
+  })
+
+  if (params.q) {
+    urlParams.append('search', params.q)
+  }
+
+  return await xfetch(`/api/v1/equipment?${urlParams.toString()}`)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getEquipmentList,
+} = usePaginatedList({
+  fetchFn: fetchEquipmentData,
+  entityName: 'equipment',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Perlengkapan (BMHP)',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Perlengkapan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+const handleDeleteRow = async (record: any) => {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/division/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getEquipmentList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+const onCancelForm = (resetForm: () => void) => {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+const onSubmitForm = async (values: any, resetForm: () => void) => {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/division', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Refresh data after successful submission
+    await getEquipmentList()
+
+    // TODO: Show success message
+    console.log('Division created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+
+// Handle confirmation result
+const handleConfirmDelete = (record: any, action: string) => {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+const handleCancelConfirmation = () => {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
+
+    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Perlengkapan" size="lg" prevent-outside>
+      <AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="handleConfirmDelete"
+      @cancel="handleCancelConfirmation"
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
new file mode 100644
index 00000000..580dda40
--- /dev/null
+++ b/app/components/content/tools/list.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { DeviceSchema, type DeviceFormData } from '~/schemas/device'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const uoms = [
+  { value: 'uom-1', label: 'Satuan 1' },
+  { value: 'uom-2', label: 'Satuan 2' },
+  { value: 'uom-3', label: 'Satuan 3' },
+]
+const items = [
+  { value: 'item-1', label: 'Item 1' },
+  { value: 'item-2', label: 'Item 2' },
+  { value: 'item-3', label: 'Item 3' },
+]
+
+// Fungsi untuk fetch data division
+async function fetchDeviceData(params: any) {
+  // Prepare query parameters for pagination and search
+  const urlParams = new URLSearchParams({
+    'page-number': params.page.toString(),
+    'page-size': params.pageSize.toString(),
+  })
+
+  if (params.q) {
+    urlParams.append('search', params.q)
+  }
+
+  return await xfetch(`/api/v1/device?${urlParams.toString()}`)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDeviceList,
+} = usePaginatedList({
+  fetchFn: fetchDeviceData,
+  entityName: 'device',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Peralatan',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Peralatan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+const handleDeleteRow = async (record: any) => {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/device/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getDeviceList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+const onCancelForm = (resetForm: () => void) => {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+const onSubmitForm = async (values: any, resetForm: () => void) => {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/division', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Refresh data after successful submission
+    await getDeviceList()
+
+    // TODO: Show success message
+    console.log('Device created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+
+// Handle confirmation result
+const handleConfirmDelete = (record: any, action: string) => {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+const handleCancelConfirmation = () => {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
+
+    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Peralatan" size="lg" prevent-outside>
+      <AppToolsEntryForm :schema="DeviceSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="handleConfirmDelete"
+      @cancel="handleCancelConfirmation"
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
diff --git a/app/components/content/user/list.vue b/app/components/content/user/list.vue
index 4b77cf12..e03c976b 100644
--- a/app/components/content/user/list.vue
+++ b/app/components/content/user/list.vue
@@ -30,7 +30,7 @@ const headerPrep: HeaderPrep = {
   icon: 'i-lucide-users',
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/human-src/user/add'),
+    onClick: () => navigateTo('/human-src/employee/add'),
   },
 }
 
@@ -56,10 +56,8 @@ provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
-    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-    <div class="rounded-md border p-4">
-      <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-    </div>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
   </div>
 </template>
diff --git a/app/components/flow/employee/entry.vue b/app/components/flow/employee/entry.vue
new file mode 100644
index 00000000..774cf9b4
--- /dev/null
+++ b/app/components/flow/employee/entry.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: 'doctor',
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/human-src/employee')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+  }
+}
+
+const items = [
+  { value: 'doctor', label: 'Dokter' },
+  { value: 'nurse', label: 'Perawat' },
+  { value: 'nutritionist', label: 'Ahli Gizi' },
+  { value: 'laborant', label: 'Laboran' },
+  { value: 'pharmacy', label: 'Farmasi' },
+  { value: 'payment', label: 'Pembayaran' },
+  { value: 'payment-verificator', label: 'Konfirmasi Pembayaran' },
+  { value: 'management', label: 'Management' },
+]
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Karyawan
+  </div>
+
+  <AppEmployeeEntryForm v-model="data" :items="items" />
+
+  <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
+  <AppNurseEntryForm v-else-if="data.type === 'nurse'" v-model="data" />
+  <AppPharmacistEntryForm v-else-if="data.type === 'pharmacist'" v-model="data" />
+  <AppLaborantEntryForm v-else-if="data.type === 'laborant'" v-model="data" />
+  <AppNutritionistEntryForm v-else-if="data.type === 'nutritionist'" v-model="data" />
+
+  <AppUserEntryForm v-model="data" />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/components/flow/employee/list.vue b/app/components/flow/employee/list.vue
new file mode 100644
index 00000000..e03c976b
--- /dev/null
+++ b/app/components/flow/employee/list.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'User',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/human-src/employee/add'),
+  },
+}
+
+async function getDoctorList() {
+  isLoading.dataListLoading = true
+
+  const resp = await xfetch('/api/v1/doctor')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getDoctorList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
+  </div>
+</template>
diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index eb59b9b9..ccb41100 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -31,7 +31,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
   const cell = event.currentTarget as HTMLElement
   const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
   if (triggerButton) {
-    (triggerButton as HTMLButtonElement).click()
+    ;(triggerButton as HTMLButtonElement).click()
   }
 }
 </script>
@@ -41,9 +41,11 @@ function handleActionCellClick(event: Event, _cellRef: string) {
     <TableHeader class="bg-gray-50">
       <TableRow>
         <TableHead
-v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
+          v-for="(h, idx) in header[0]"
+          :key="`head-${idx}`"
+          class="border"
           :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
->
+        >
           {{ h.label }}
         </TableHead>
       </TableRow>
@@ -53,13 +55,13 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
       <!-- Loading state with 5 skeleton rows -->
       <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
-          <Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground" />
         </TableCell>
       </TableRow>
     </TableBody>
     <TableBody v-else-if="rows.length === 0">
       <TableRow>
-        <TableCell :colspan="keys.length" class="text-center py-8">
+        <TableCell :colspan="keys.length" class="py-8 text-center">
           <div class="flex items-center justify-center">
             <Info class="size-5 text-muted-foreground" />
             <span class="ml-2">Tidak ada data tersedia</span>
@@ -74,7 +76,11 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
           :key="`cell-${rowIndex}-${cellIndex}`"
           class="border"
           :class="{ 'cursor-pointer': key === 'action' && funcComponent[key] }"
-          @click="key === 'action' && funcComponent[key] ? handleActionCellClick($event, `cell-${rowIndex}-${cellIndex}`) : null"
+          @click="
+            key === 'action' && funcComponent[key]
+              ? handleActionCellClick($event, `cell-${rowIndex}-${cellIndex}`)
+              : null
+          "
         >
           <!-- If funcComponent has a renderer -->
           <component
diff --git a/app/components/pub/custom-ui/form/field-group.vue b/app/components/pub/custom-ui/form/field-group.vue
index bb2ed72a..48d1be1f 100644
--- a/app/components/pub/custom-ui/form/field-group.vue
+++ b/app/components/pub/custom-ui/form/field-group.vue
@@ -5,6 +5,7 @@ const props = withDefaults(
     density?: 'default' | 'dense'
     side?: 'default' | 'break'
     position?: 'default' | 'dynamic'
+    layout?: 'default' | 'stacked'
     class?: string
   }>(),
   {
@@ -12,25 +13,25 @@ const props = withDefaults(
     density: 'default',
     side: 'default',
     position: 'default',
+    layout: 'default',
     class: '',
   },
 )
 
-const wrapperClass = computed(() => [
-  'w-full flex-shrink-0',
+const widthClass = computed(() => {
+  if (props.column === 1) return 'md:w-full pe-4'
+  if (props.column === 2) return 'md:w-1/2 pe-4'
+  if (props.column === 3) return 'md:w-1/3 pe-4'
+  return 'w-full'
+})
 
-  props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
-  props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 my-3' : '',
-  props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
-  props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
-  props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',
+const wrapperClass = computed(() => [
+  'w-full flex-shrink-0 mb-3',
+  widthClass.value,
+
+  props.layout === 'stacked' ? 'flex flex-col p-2' : 'md:flex',
 
   props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
-
-  props.side !== 'break' ? 'md:flex' : '',
-
-  props.position === 'dynamic' ? 'ps-4' : props.column > 1 ? 'pe-4' : '',
-
   props.class,
 ])
 </script>
@@ -40,5 +41,3 @@ const wrapperClass = computed(() => [
     <slot />
   </div>
 </template>
-
-<style scoped></style>
diff --git a/app/components/pub/custom-ui/form/label.vue b/app/components/pub/custom-ui/form/label.vue
index f8272352..f04081ee 100644
--- a/app/components/pub/custom-ui/form/label.vue
+++ b/app/components/pub/custom-ui/form/label.vue
@@ -5,11 +5,13 @@ const props = withDefaults(
     size?: 'default' | 'narrow' | 'wide'
     height?: 'default' | 'compact'
     position?: 'default' | 'dynamic'
+    stacked?: boolean
   }>(),
   {
     size: 'default',
     height: 'default',
     position: 'default',
+    stacked: false,
   },
 )
 
@@ -36,12 +38,12 @@ const positionChildMap = {
 
 const wrapperClass = computed(() => [
   'block shrink-0',
-  sizeMap[props.size],
-  heightMap[props.height],
-  positionWrapMap[props.position],
+  props.stacked ? 'w-full mb-1 text-start' : sizeMap[props.size],
+  props.stacked ? '' : heightMap[props.height],
+  props.stacked ? '' : positionWrapMap[props.position],
 ])
 
-const labelClass = computed(() => positionChildMap[props.position])
+const labelClass = computed(() => [props.stacked ? 'block mb-1 text-sm font-medium' : positionChildMap[props.position]])
 </script>
 
 <template>
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index fb6b9171..d904a87e 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -72,7 +72,7 @@ export const dischargeMethodCodes: Record<string, string> = {
 }
 
 export const genderCodes: Record<string, string> = {
-  male: 'Laki - Laki',
+  male: 'Laki',
   female: 'Perempuan',
   'not-stated': 'Tidak Disebutkan',
   unknown: 'Tidak Diketahui',
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index abba253f..59afb775 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -2,6 +2,25 @@ import type { ClassValue } from 'clsx'
 import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
+export interface SelectOptionType<T> {
+  label: string
+  value: T
+}
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function mapToFlowbiteOptList(items: Record<string, string>): SelectOptionType<string>[] {
+  if (!items) {
+    return []
+  }
+  const result: SelectOptionType<string>[] = []
+  Object.keys(items).forEach((item) => {
+    result.push({
+      label: items[item] as string,
+      value: item,
+    })
+  })
+  return result
+}
diff --git a/app/models/doctor.ts b/app/models/doctor.ts
new file mode 100644
index 00000000..8359d54a
--- /dev/null
+++ b/app/models/doctor.ts
@@ -0,0 +1,61 @@
+export interface Doctor {
+  id: number
+  createdAt: string
+  updatedAt: string
+  name: string
+  frontTitle?: string
+  endTitle?: string
+  specialist_code?: string
+  sip_no: string
+  ihs_number: string
+  identity_number: string
+  phone?: string
+  bpjs_code?: string
+  status_code?: number
+}
+// use one dto for both create and update
+export interface CreateDto {
+  name?: string
+  frontTitle?: string
+  endTitle?: string
+  identity_number?: string
+  sip_no?: string
+  ihs_number?: string
+  phone?: string
+  email?: string
+  bpjs_code?: string
+  status_code?: number
+  outPatient_rate?: number
+  inPatient_rate?: number
+}
+
+export interface GetListDto {
+  name?: string
+  identity_number?: string
+  sip_no?: string
+  ihs_number?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genDoctor(): Doctor {
+  return {
+    id: 0,
+    createdAt: '',
+    updatedAt: '',
+    name: '',
+    ihs_number: '',
+    identity_number: '',
+    sip_no: '',
+  }
+}
diff --git a/app/models/employee.ts b/app/models/employee.ts
new file mode 100644
index 00000000..ea2d1f18
--- /dev/null
+++ b/app/models/employee.ts
@@ -0,0 +1,37 @@
+export interface Employee {
+  name: string
+  number: string
+  status_code: string
+  user_id: number
+  person_id: number
+  position_code: string
+  division_code: string
+}
+
+export interface CreateDto extends Employee {}
+
+export interface UpdateDto extends Employee {
+  id: number
+}
+
+export interface DeleteDto {
+  id: number
+}
+
+export interface GetListDto extends Employee {
+  id: number
+  createdAt: string
+  updatedAt: string
+}
+
+export function genEmployee(): Employee {
+  return {
+    name: '',
+    number: '',
+    status_code: '',
+    user_id: 0,
+    person_id: 0,
+    position_code: '',
+    division_code: '',
+  }
+}
diff --git a/app/models/user.ts b/app/models/user.ts
new file mode 100644
index 00000000..03dd4076
--- /dev/null
+++ b/app/models/user.ts
@@ -0,0 +1,19 @@
+export interface User {
+  id: number
+  name: string
+  password: string
+  status_code: string
+  createdAt: string
+  updatedAt: string
+}
+
+export function genUser(): User {
+  return {
+    id: 0,
+    name: '',
+    password: '',
+    status_code: '',
+    createdAt: '',
+    updatedAt: '',
+  }
+}
diff --git a/app/pages/(features)/doctor/[id]/detail.vue b/app/pages/(features)/doctor/[id]/detail.vue
deleted file mode 100644
index 33a36f0f..00000000
--- a/app/pages/(features)/doctor/[id]/detail.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  roles: ['sys', 'doc'],
-})
-</script>
-
-<template>
-  <div>detail pasien</div>
-</template>
diff --git a/app/pages/(features)/doctor/[id]/edit.vue b/app/pages/(features)/doctor/[id]/edit.vue
deleted file mode 100644
index 3a8f1295..00000000
--- a/app/pages/(features)/doctor/[id]/edit.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  roles: ['sys', 'doc'],
-})
-</script>
-
-<template>
-  <div>edit detail pasien</div>
-</template>
diff --git a/app/pages/(features)/human-src/user/add.vue b/app/pages/(features)/human-src/employee/add.vue
similarity index 100%
rename from app/pages/(features)/human-src/user/add.vue
rename to app/pages/(features)/human-src/employee/add.vue
diff --git a/app/pages/(features)/human-src/user/index.vue b/app/pages/(features)/human-src/employee/index.vue
similarity index 100%
rename from app/pages/(features)/human-src/user/index.vue
rename to app/pages/(features)/human-src/employee/index.vue
diff --git a/app/pages/(features)/tools-equipment-src/equipment/index.vue b/app/pages/(features)/tools-equipment-src/equipment/index.vue
index e1968876..7f774f20 100644
--- a/app/pages/(features)/tools-equipment-src/equipment/index.vue
+++ b/app/pages/(features)/tools-equipment-src/equipment/index.vue
@@ -27,13 +27,17 @@ if (!hasAccess) {
 }
 
 // Define permission-based computed properties
-const canRead = hasReadAccess(roleAccess)
+const canRead = true // hasReadAccess(roleAccess)
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
+<<<<<<< HEAD
+      <ContentEquipmentList />
+=======
       <ContentMaterialList />
+>>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/tools-equipment-src/device/index.vue b/app/pages/(features)/tools-equipment-src/tools/index.vue
similarity index 77%
rename from app/pages/(features)/tools-equipment-src/device/index.vue
rename to app/pages/(features)/tools-equipment-src/tools/index.vue
index 98fe16df..7800e0c3 100644
--- a/app/pages/(features)/tools-equipment-src/device/index.vue
+++ b/app/pages/(features)/tools-equipment-src/tools/index.vue
@@ -27,13 +27,17 @@ if (!hasAccess) {
 }
 
 // Define permission-based computed properties
-const canRead = hasReadAccess(roleAccess)
+const canRead = true // hasReadAccess(roleAccess)
 </script>
 
 <template>
   <div>
     <div v-if="canRead">
+<<<<<<< HEAD:app/pages/(features)/tools-equipment-src/tools/index.vue
+      <ContentToolsList />
+=======
       <ContentDeviceList />
+>>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2:app/pages/(features)/tools-equipment-src/device/index.vue
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/schemas/device.ts b/app/schemas/device.ts
new file mode 100644
index 00000000..036f3bc7
--- /dev/null
+++ b/app/schemas/device.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod'
+
+const schema = 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'),
+  uom_code: z.string({ required_error: 'Kode unit harus diisi' }).min(1, 'Kode unit harus diisi'),
+  item_id: z.string({ required_error: 'Tipe harus diisi' }).min(1, 'Tipe harus diisi'),
+})
+
+type formData = z.infer<typeof schema>
+
+export { schema as DeviceSchema }
+export type { formData as DeviceFormData }
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index e10aab27..488d9fa2 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -35,7 +35,7 @@
       },
       {
         "title": "IGD",
-        "icon": "i-lucide-stethoscope",
+        "icon": "i-lucide-zap",
         "children": [
           {
             "title": "Triase",
@@ -77,7 +77,7 @@
       },
       {
         "title": "Rehabilitasi Medik",
-        "icon": "i-lucide-heart",
+        "icon": "i-lucide-bike",
         "link": "/rehabilitasi",
         "children": [
           {
@@ -103,34 +103,44 @@
         ]
       },
       {
-        "title": "Farmasi",
-        "icon": "i-lucide-users",
+        "title": "Obat - Order",
+        "icon": "i-lucide-briefcase-medical",
         "children": [
           {
             "title": "Permintaan",
             "icon": "i-lucide-user",
-            "link": "/pharmacy/request"
+            "link": "/medication/order"
           },
           {
             "title": "Standing Order",
             "icon": "i-lucide-user",
-            "link": "/pharmacy/standing-order"
+            "link": "/medication/standing-order"
           }
         ]
       },
       {
-        "title": "Lab",
-        "icon": "i-lucide-briefcase",
+        "title": "Lab - Order",
+        "icon": "i-lucide-microscope",
         "link": "/lab-order"
       },
       {
-        "title": "Radiologi",
+        "title": "Lab Mikro - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/micro-lab-order"
+      },
+      {
+        "title": "Lab PA - Order",
+        "icon": "i-lucide-microscope",
+        "link": "/pa-lab-order"
+      },
+      {
+        "title": "Radiologi - Order",
         "icon": "i-lucide-radio",
         "link": "/radiology-order"
       },
       {
         "title": "Gizi",
-        "icon": "i-lucide-briefcase",
+        "icon": "i-lucide-egg-fried",
         "link": "/nutrition-order"
       },
       {
@@ -160,7 +170,7 @@
     "items": [
       {
         "title": "BPJS",
-        "icon": "i-lucide-refresh-cw",
+        "icon": "i-lucide-circuit-board",
         "link": "/integration/bpjs",
         "badge": "Live"
       },
@@ -177,7 +187,7 @@
     "items": [
       {
         "title": "Peralatan dan Perlengkapan",
-        "icon": "i-lucide-radius",
+        "icon": "i-lucide-layout-dashboard",
         "children": [
           {
             "title": "Obat",
@@ -187,12 +197,12 @@
           {
             "title": "Peralatan",
             "icon": "i-lucide-tools",
-            "link": "/tools-equipment-src/device"
+            "link": "/tools-equipment-src/tools"
           },
           {
             "title": "Perlengkapan (BMHP)",
             "icon": "i-lucide-stethoscope",
-            "link": "/tools-equipment-src/material"
+            "link": "/tools-equipment-src/equipment"
           },
           {
             "title": "Metode Obat",
@@ -209,36 +219,88 @@
       {
         "title": "Pengguna",
         "icon": "i-lucide-user",
-        "link": "/human-src/employee"
+        "children": [
+          {
+            "title": "Pegawai",
+            "icon": "i-lucide-stethoscope",
+            "link": "/human-src/employee"
+          },
+          {
+            "title": "PPDS",
+            "icon": "i-lucide-user",
+            "link": "/human-src/specialist-intern"
+          }
+        ]
       },
       {
         "title": "Layanan",
-        "icon": "i-lucide-card-sim",
+        "icon": "i-lucide-layout-list",
         "children": [
           {
             "title": "Counter",
             "icon": "i-lucide-stethoscope",
-            "link": "/tools-equipment-src/medicine"
+            "link": "/service-src/counter"
           },
           {
-            "title": "Bed",
+            "title": "Public Screen (Big Screen)",
             "icon": "i-lucide-tools",
-            "link": "/tools-equipment-src/device"
+            "link": "/service-src/public-screen"
+          },
+          {
+            "title": "Kasur",
+            "icon": "i-lucide-tools",
+            "link": "/service-src/bed"
           },
           {
             "title": "Kamar",
             "icon": "i-lucide-stethoscope",
-            "link": "/tools-equipment-src/medical-device"
+            "link": "/service-src/chamber"
           },
           {
             "title": "Lantai",
             "icon": "i-lucide-user",
-            "link": "/tools-equipment-src/medicine-method"
+            "link": "/service-src/floor"
           },
           {
             "title": "Gedung",
             "icon": "i-lucide-user",
-            "link": "/tools-equipment-src/medicine-type"
+            "link": "/service-src/building"
+          }
+        ]
+      },
+      {
+        "title": "Item & Item Price",
+        "icon": "i-lucide-shopping-basket",
+        "link": "/item-src/item"
+      },
+      {
+        "title": "Organisasi",
+        "icon": "i-lucide-network",
+        "children": [
+          {
+            "title": "Divisi",
+            "icon": "i-lucide-stethoscope",
+            "link": "/org-src/division"
+          },
+          {
+            "title": "Instalasi",
+            "icon": "i-lucide-tools",
+            "link": "/org-src/installation"
+          },
+          {
+            "title": "Unit",
+            "icon": "i-lucide-tools",
+            "link": "/org-src/unit"
+          },
+          {
+            "title": "Specialist",
+            "icon": "i-lucide-stethoscope",
+            "link": "/org-src/specialist"
+          },
+          {
+            "title": "Sub Specialist",
+            "icon": "i-lucide-user",
+            "link": "/org-src/subspecialist"
           }
         ]
       }