diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 7e7f0b70..d27f89d7 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -3,7 +3,7 @@
 /* CSS Variables */
 :root {
   /* Medical Theme Colors */
-  --background: 210 20% 98%;
+  --background: 230 20% 98%;
   --foreground: 210 20% 15%;
   --card: 0 0% 100%;
   --card-foreground: 210 20% 15%;
@@ -11,9 +11,9 @@
   --popover-foreground: 210 20% 15%;
 
   /* Primary - Medical Green */
-  --primary: 150 75% 35%;
+  --primary: 26 89% 57%;
   --primary-foreground: 0 0% 100%;
-  --primary-hover: 150 75% 40%;
+  --primary-hover: 26, 92%, 65%;
 
   /* Secondary - Clean Blue */
   --secondary: 210 50% 96%;
@@ -76,9 +76,9 @@
   --card-foreground: 210 20% 95%;
   --popover: 210 25% 10%;
   --popover-foreground: 210 20% 95%;
-  --primary: 150 75% 45%;
+  --primary: 26 89% 57%;
   --primary-foreground: 0 0% 100%;
-  --primary-hover: 150 75% 50%;
+  --primary-hover: 26, 92%, 65%;
   --secondary: 210 25% 15%;
   --secondary-foreground: 210 20% 90%;
   --muted: 210 25% 15%;
@@ -162,12 +162,17 @@
 }
 
 body {
-  background-color: hsl(var(--background));
+  /* background-color: hsl(var(--background)); */
+  /* background-color: hsl(var(--background), 0.5); */
   color: hsl(var(--foreground));
   line-height: 1.5;
   margin: 0;
 }
 
+body {
+  @apply bg-slate-100 dark:bg-slate-800;
+}
+
 /* Container */
 .container {
   width: 100%;
diff --git a/app/components/app/equipment/entry-form.vue b/app/components/app/equipment/entry-form.vue
index 759f011d..c15fa156 100644
--- a/app/components/app/equipment/entry-form.vue
+++ b/app/components/app/equipment/entry-form.vue
@@ -1,32 +1,40 @@
 <script setup lang="ts">
-// types
+// Components
+import Block from '~/components/pub/custom-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/custom-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/custom-ui/doc-entry/field.vue'
+import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
+
+// Types
+import type { MaterialFormData } from '~/schemas/material.schema'
+
+// Helpers
 import type z from 'zod'
-import type { MaterialFormData } from '~/schemas/material'
-// helpers
-import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
-// components
+import { toTypedSchema } from '@vee-validate/zod'
 
 interface Props {
   schema: z.ZodSchema<any>
   uoms: any[]
-  items: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
 }
 
-const isLoading = ref(false)
 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: MaterialFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 
-const { handleSubmit, defineField, errors } = useForm({
+const { defineField, errors, meta } = useForm({
   validationSchema: toTypedSchema(props.schema),
   initialValues: {
     code: '',
     name: '',
     uom_code: '',
-    item_id: '',
     stock: 0,
   } as Partial<MaterialFormData>,
 })
@@ -34,113 +42,83 @@ const { handleSubmit, defineField, errors } = useForm({
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
 const [uom, uomAttrs] = defineField('uom_code')
-const [item, itemAttrs] = defineField('item_id')
 const [stock, stockAttrs] = defineField('stock')
 
+// 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.uom_code !== undefined) uom.value = props.values.uom_code
+  if (props.values.stock !== undefined) stock.value = props.values.stock
+}
+
 const resetForm = () => {
   code.value = ''
   name.value = ''
   uom.value = ''
-  item.value = ''
   stock.value = 0
 }
 
-// Form submission handler
-function onSubmitForm(values: any) {
+function onSubmitForm() {
   const formData: MaterialFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    uom_code: values.uom_code || '',
-    item_id: values.item_id || '',
-    stock: values.stock || 0,
+    name: name.value || '',
+    code: code.value || '',
+    uom_code: uom.value || '',
+    stock: stock.value || 0,
   }
   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"
-        v-model="uom"
-        icon-name="i-lucide-chevron-down"
-        placeholder="Pilih satuan"
-        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"
-        v-model="item"
-        icon-name="i-lucide-chevron-down"
-        placeholder="Pilih 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="grid gap-2">
-      <label for="stock">Stok</label>
-      <Input
-        id="stock"
-        v-model="stock"
-        type="number"
-        v-bind="stockAttrs"
-        :disabled="isLoading"
-        :class="{ 'border-red-500': errors.stock }"
-      />
-      <span v-if="errors.stock" class="text-sm text-red-500">
-        {{ errors.stock }}
-      </span>
-    </div>
+  <form id="form-equipment" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="">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">Satuan</Label>
+        <Field :errMessage="errors.uom_code">
+          <Select
+            id="uom"
+            v-model="uom"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-bind="uomAttrs"
+            :items="uoms"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Stok</Label>
+        <Field :errMessage="errors.stock">
+          <Input id="stock" v-model="stock" type="number" v-bind="stockAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+    </Block>
     <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" />
+      <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>
diff --git a/app/components/app/equipment/list-cfg.ts b/app/components/app/equipment/list-cfg.ts
index a2a9f54c..add2eba3 100644
--- a/app/components/app/equipment/list-cfg.ts
+++ b/app/components/app/equipment/list-cfg.ts
@@ -1,21 +1,17 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  Th,
-} from '~/components/pub/custom-ui/data/types'
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, Th } from '~/components/pub/custom-ui/data/types'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 50 }]
+export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 100 }, { width: 50 }]
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Stok' }, { label: 'Item' }, { label: 'Satuan' }]]
+export const header: Th[][] = [
+  [{ label: 'Kode' }, { label: 'Nama' }, { label: 'Stok' }, { label: 'Satuan' }, { label: '' }],
+]
 
-export const keys = ['code', 'name', 'stock', 'item_id', 'uom_code', 'action']
+export const keys = ['code', 'name', 'stock', 'uom_code', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -27,10 +23,6 @@ export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
     const recX = rec as SmallDetailDto
     return `${recX.name}`.trim()
   },
-  item_id: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.item_id
-  },
   uom_code: (rec: unknown): unknown => {
     const recX = rec as SmallDetailDto
     return recX.uom_code
diff --git a/app/components/app/equipment/list.vue b/app/components/app/equipment/list.vue
index c64c64a2..d44aa4d8 100644
--- a/app/components/app/equipment/list.vue
+++ b/app/components/app/equipment/list.vue
@@ -30,7 +30,6 @@ function handlePageChange(page: number) {
       :func-html="funcHtml"
       :func-component="funcComponent"
     />
-
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/medicine-group/entry-form.vue b/app/components/app/medicine-group/entry-form.vue
index e4f0b60a..5474d364 100644
--- a/app/components/app/medicine-group/entry-form.vue
+++ b/app/components/app/medicine-group/entry-form.vue
@@ -1,37 +1,96 @@
+
 <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'
+// Components
+import Block from '~/components/pub/custom-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/custom-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/custom-ui/doc-entry/field.vue'
+import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
 
-const props = defineProps<{ modelValue: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
+// Types
+import type { MedicineBaseFormData } from '~/schemas/medicine.schema'
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+// 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: MedicineBaseFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
+  initialValues: {
+    code: '',
+    name: '',
+  },
 })
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+}
+
+function onSubmitForm() {
+  const formData = {
+    name: name.value || '',
+    code: code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </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>
-            <Label>Nama</Label>
-            <Field>
-              <Input v-model="data.name" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Kode</Label>
-            <Field>
-              <Input />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+  <form id="form-medicine-group" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="">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>
+</template>
\ No newline at end of file
diff --git a/app/components/app/medicine-group/list.vue b/app/components/app/medicine-group/list.vue
index 5b8778d9..d44aa4d8 100644
--- a/app/components/app/medicine-group/list.vue
+++ b/app/components/app/medicine-group/list.vue
@@ -1,19 +1,35 @@
 <script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
-defineProps<{
+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"
-  />
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
 </template>
diff --git a/app/components/app/medicine-group/picker.vue b/app/components/app/medicine-group/picker.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/medicine-group/search.vue b/app/components/app/medicine-group/search.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/medicine-group/status-badge.vue b/app/components/app/medicine-group/status-badge.vue
deleted file mode 100644
index 32cdfbca..00000000
--- a/app/components/app/medicine-group/status-badge.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<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/medicine-method/entry-form.vue b/app/components/app/medicine-method/entry-form.vue
index e4f0b60a..b2fbdc94 100644
--- a/app/components/app/medicine-method/entry-form.vue
+++ b/app/components/app/medicine-method/entry-form.vue
@@ -1,37 +1,96 @@
+
 <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'
+// Components
+import Block from '~/components/pub/custom-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/custom-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/custom-ui/doc-entry/field.vue'
+import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
 
-const props = defineProps<{ modelValue: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
+// Types
+import type { MedicineBaseFormData } from '~/schemas/medicine.schema'
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+// 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: MedicineBaseFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
+  initialValues: {
+    code: '',
+    name: '',
+  },
 })
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+}
+
+function onSubmitForm() {
+  const formData = {
+    name: name.value || '',
+    code: code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </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>
-            <Label>Nama</Label>
-            <Field>
-              <Input v-model="data.name" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Kode</Label>
-            <Field>
-              <Input />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+  <form id="form-medicine-method" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="">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/medicine-method/list.vue b/app/components/app/medicine-method/list.vue
index 5b8778d9..d44aa4d8 100644
--- a/app/components/app/medicine-method/list.vue
+++ b/app/components/app/medicine-method/list.vue
@@ -1,19 +1,35 @@
 <script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
-defineProps<{
+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"
-  />
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
 </template>
diff --git a/app/components/app/medicine-method/picker.vue b/app/components/app/medicine-method/picker.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/medicine-method/search.vue b/app/components/app/medicine-method/search.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/components/app/tools/entry-form.vue b/app/components/app/tools/entry-form.vue
index f1413f62..f888c518 100644
--- a/app/components/app/tools/entry-form.vue
+++ b/app/components/app/tools/entry-form.vue
@@ -1,25 +1,35 @@
 <script setup lang="ts">
-// helpers
+// Components
+import Block from '~/components/pub/custom-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/custom-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/custom-ui/doc-entry/field.vue'
+import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
+
+// Types
+import type { DeviceFormData } from '~/schemas/device.schema'
+
+// Helpers
+import type z from 'zod'
 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[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
 }
 
-const isLoading = ref(false)
 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: DeviceFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 
-const { handleSubmit, defineField, errors } = useForm({
+const { defineField, errors, meta } = useForm({
   validationSchema: toTypedSchema(props.schema),
   initialValues: {
     code: '',
@@ -32,22 +42,26 @@ const { handleSubmit, defineField, errors } = useForm({
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
 const [uom, uomAttrs] = defineField('uom_code')
-const [item, itemAttrs] = defineField('item_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.uom_code !== undefined) uom.value = props.values.uom_code
+}
 
 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 || '',
+    name: name.value || '',
+    code: code.value || '',
+    uom_code: uom.value || '',
   }
   emit('submit', formData, resetForm)
 }
@@ -59,69 +73,44 @@ function onCancelForm() {
 </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>
+  <form id="form-tools" @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">Satuan</Label>
+        <Field :errMessage="errors.uom_code">
+          <Select
+            id="uom"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-model="uom"
+            v-bind="uomAttrs"
+            :items="uoms"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+    </Block>
     <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" />
+      <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>
diff --git a/app/components/app/tools/list-cfg.ts b/app/components/app/tools/list-cfg.ts
index 71ca97f6..97bedbbd 100644
--- a/app/components/app/tools/list-cfg.ts
+++ b/app/components/app/tools/list-cfg.ts
@@ -12,11 +12,11 @@ type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 100 }, { width: 50 }]
+export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 50 }]
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Item' }, { label: 'Satuan' }]]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Satuan' }, { label: '' }]]
 
-export const keys = ['code', 'name', 'item_id', 'uom_code', 'action']
+export const keys = ['code', 'name', 'uom_code', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -28,10 +28,6 @@ export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
     const recX = rec as SmallDetailDto
     return `${recX.name}`.trim()
   },
-  item_id: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.item_id
-  },
   uom_code: (rec: unknown): unknown => {
     const recX = rec as SmallDetailDto
     return recX.uom_code
diff --git a/app/components/app/tools/list.vue b/app/components/app/tools/list.vue
index 076f0f41..d44aa4d8 100644
--- a/app/components/app/tools/list.vue
+++ b/app/components/app/tools/list.vue
@@ -22,10 +22,14 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-      :func-html="funcHtml" :func-component="funcComponent"
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
     />
-
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/uom/entry-form.vue b/app/components/app/uom/entry-form.vue
new file mode 100644
index 00000000..3bf95352
--- /dev/null
+++ b/app/components/app/uom/entry-form.vue
@@ -0,0 +1,96 @@
+
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/custom-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/custom-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/custom-ui/doc-entry/field.vue'
+import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Types
+import type { UomFormData } from '~/schemas/uom.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: UomFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
+  initialValues: {
+    code: '',
+    name: '',
+  },
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+}
+
+function onSubmitForm() {
+  const formData = {
+    name: name.value || '',
+    code: code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-medicine-method" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="">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/uom/list-cfg.ts b/app/components/app/uom/list-cfg.ts
new file mode 100644
index 00000000..e2c72f9c
--- /dev/null
+++ b/app/components/app/uom/list-cfg.ts
@@ -0,0 +1,46 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+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: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+
+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 = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/uom/list.vue b/app/components/app/uom/list.vue
new file mode 100644
index 00000000..d44aa4d8
--- /dev/null
+++ b/app/components/app/uom/list.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
+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"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
diff --git a/app/components/content/auth/login.vue b/app/components/content/auth/login.vue
index c933b813..0e581ca9 100644
--- a/app/components/content/auth/login.vue
+++ b/app/components/content/auth/login.vue
@@ -2,8 +2,8 @@
 import { z } from 'zod'
 
 const loginSchema = z.object({
-  name: z.string().min(6, 'Please enter a valid username'),
-  password: z.string().min(6, 'Password must be at least 6 characters'),
+  name: z.string().min(3, 'Please enter a valid username'),
+  password: z.string().min(3, 'Password must be at least 3 characters'),
 })
 
 const { login } = useUserStore()
diff --git a/app/components/content/dashboard/index.vue b/app/components/content/dashboard/index.vue
index 71167dac..2c76cad6 100644
--- a/app/components/content/dashboard/index.vue
+++ b/app/components/content/dashboard/index.vue
@@ -121,10 +121,10 @@ onMounted(() => {
       </div>
     </div>
     <main class="my-6 flex flex-1 flex-col gap-4 md:gap-8">
-  <div class="dashboard-grid">
+      <div class="dashboard-grid">
         <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </div>
-  <div class="dashboard-grid">
+      <div class="dashboard-grid">
         <Card v-for="n in 3" :key="n">
           <CardHeader>
             <CardTitle>Recent Sales</CardTitle>
diff --git a/app/components/content/employee/entry.vue b/app/components/content/employee/entry.vue
index 509baad0..2c65d604 100644
--- a/app/components/content/employee/entry.vue
+++ b/app/components/content/employee/entry.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
-import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
 
 const data = ref({
   name: '',
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 4c82ed92..40f5417b 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -1,36 +1,41 @@
 <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'
+// Components
 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)
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-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' },
-]
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
+import type { Uom } from '~/models/uom'
 
-// Fungsi untuk fetch data equipment
-async function fetchEquipmentData(params: any) {
-  const endpoint = transform('/api/v1/equipment', params)
-  return await xfetch(endpoint)
-}
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/material.handler'
+
+// Services
+import { getMaterials, getMaterialDetail } from '~/services/material.service'
+import { getUoms } from '~/services/uom.service'
+
+const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
 
-// Menggunakan composable untuk pagination
 const {
   data,
   isLoading,
@@ -40,7 +45,10 @@ const {
   handleSearch,
   fetchData: getEquipmentList,
 } = usePaginatedList({
-  fetchFn: fetchEquipmentData,
+  fetchFn: async ({ page }) => {
+    const result = await getMaterials({ search: searchInput.value, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
   entityName: 'equipment',
 })
 
@@ -66,7 +74,10 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah Perlengkapan',
     icon: 'i-lucide-plus',
     onClick: () => {
+      recItem.value = null
+      recId.value = 0
       isFormEntryDialogOpen.value = true
+      isReadonly.value = false
     },
   },
 }
@@ -76,116 +87,88 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-// Watch for row actions
-watch(recId, () => {
+const getCurrentMaterialDetail = async (id: number | string) => {
+  const result = await getMaterialDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+const getUomList = async () => {
+  const result = await getUoms()
+  if (result.success) {
+    const currentUoms = result.body?.data || []
+    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
   switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMaterialDetail(recId.value)
+      title.value = 'Detail Perlengkapan'
+      isReadonly.value = true
+      break
     case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
+      getCurrentMaterialDetail(recId.value)
+      title.value = 'Edit Perlengkapan'
+      isReadonly.value = false
       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
-}
+onMounted(async () => {
+  await getUomList()
+  await getEquipmentList()
+})
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
+  <div class="p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <div class="rounded-md border p-4">
       <AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
     </div>
 
-    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Perlengkapan" size="lg" prevent-outside>
-      <AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm"
-        @submit="onSubmitForm" />
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Perlengkapan'"
+      size="lg"
+      prevent-outside
+    >
+      <AppEquipmentEntryForm
+        :schema="MaterialSchema"
+        :values="recItem"
+        :uoms="uoms"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: MaterialFormData, resetForm: any) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getEquipmentList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getEquipmentList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
     </Dialog>
 
     <!-- Record Confirmation Modal -->
-    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
-      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getEquipmentList, toast)"
+      @cancel=""
+    >
       <template #default="{ record }">
         <div class="text-sm">
           <p><strong>ID:</strong> {{ record?.id }}</p>
diff --git a/app/components/content/material/entry.vue b/app/components/content/material/entry.vue
index 50d68455..3fa3bfd2 100644
--- a/app/components/content/material/entry.vue
+++ b/app/components/content/material/entry.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // types
-import type { MaterialFormData } from '~/schemas/material'
-import { MaterialSchema } from '~/schemas/material'
+import type { MaterialFormData } from '~/schemas/material.schema'
+import { MaterialSchema } from '~/schemas/material.schema'
 
 const isLoading = ref(false)
 const uoms = [
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 93afabff..5dd89f9c 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -1,75 +1,162 @@
 <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 Modal from '~/components/pub/base/modal/modal.vue'
+// Components
+import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import AppMedicineGroupEntryForm from '~/components/app/medicine-group/entry-form.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
-const entry = ref<any>({})
-const page = ref(1)
-const rowsPerPage = ref(10)
-const totalPages = 20
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { MedicineBaseSchema, type MedicineBaseFormData } from '~/schemas/medicine.schema'
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-group.handler'
+
+// Services
+import { getMedicineGroups, getMedicineGroupDetail } from '~/services/medicine-group.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineGroupList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getMedicineGroups({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-group',
 })
 
-const isOpen = ref(false)
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: 'Golongan Obat',
-  icon: 'i-lucide-users',
+const headerPrep: HeaderPrep = {
+  title: 'Kelompok Obat',
+  icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {},
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => (isOpen.value = true),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/medicine-group')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
-}
-
-onMounted(() => {
-  getPatientList()
-})
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+const getCurrentMedicineGroupDetail = async (id: number | string) => {
+  const result = await getMedicineGroupDetail(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:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Detail Kelompok Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Edit Kelompok Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineGroupList()
+})
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppMedicineGroupList :data="data" />
-    <Pagination v-model:page="page" v-model:rows-per-page="rowsPerPage" :total-pages="totalPages" />
-  </div>
+  <div class="p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppMedicineGroupList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
 
-  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
-    <AppMedicineGroupEntryForm v-model="entry" />
-  </Modal>
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Kelompok Obat'"
+      size="lg"
+      prevent-outside
+    >
+      <AppMedicineGroupEntryForm
+        :schema="MedicineBaseSchema"
+        :values="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getMedicineGroupList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getMedicineGroupList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getMedicineGroupList, toast)"
+      @cancel=""
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
 </template>
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index 43d7a03f..49d42e42 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -1,74 +1,162 @@
 <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 Modal from '~/components/pub/base/modal/modal.vue'
+// Components
+import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import { getMedicineMethods } from '~/services/medicine-method.service'
+import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
-const entry = ref<any>({})
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { MedicineBaseSchema, type MedicineBaseFormData } from '~/schemas/medicine.schema'
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-method.handler'
+
+// Services
+import { getMedicineMethods, getMedicineMethodDetail } from '~/services/medicine-method.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineMethodList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getMedicineMethods({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-method',
 })
 
-const isOpen = ref(false)
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: 'Metode Pemberian',
+const headerPrep: HeaderPrep = {
+  title: 'Metode Obat',
   icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {},
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => (isOpen.value = true),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
-async function getData() {
-  try {
-    isLoading.isTableLoading = true
-    data.value = await getMedicineMethods()
-  } catch (err) {
-    console.error(err)
-  } finally {
-    isLoading.isTableLoading = false
-  }
-}
-
-onMounted(() => {
-  getData()
-})
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+const getCurrentMedicineMethodDetail = async (id: number | string) => {
+  const result = await getMedicineMethodDetail(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:
+      getCurrentMedicineMethodDetail(recId.value)
+      title.value = 'Detail Metode Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineMethodDetail(recId.value)
+      title.value = 'Edit Metode Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineMethodList()
+})
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppMedicineMethodList :data="data" />
-  </div>
+  <div class="p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
 
-  <Modal v-model:open="isOpen" title="Tambah Metode Pemberian" size="lg" prevent-outside>
-    <AppMedicineMethodEntryForm v-model="entry" />
-  </Modal>
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Metode Obat'"
+      size="lg"
+      prevent-outside
+    >
+      <AppMedicineMethodEntryForm
+        :schema="MedicineBaseSchema"
+        :values="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getMedicineMethodList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getMedicineMethodList, toast)"
+      @cancel=""
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
 </template>
diff --git a/app/components/content/specialist-intern/entry.vue b/app/components/content/specialist-intern/entry.vue
index 7fa6a0b6..3d0ec6c1 100644
--- a/app/components/content/specialist-intern/entry.vue
+++ b/app/components/content/specialist-intern/entry.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
-import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
 
 const data = ref({
   name: '',
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index b16ccaec..613df671 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -1,35 +1,41 @@
 <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'
+// Components
 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 AppToolsEntryForm from '~/components/app/tools/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)
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-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' },
-]
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { DeviceSchema, type DeviceFormData } from '~/schemas/device.schema'
+import type { Uom } from '~/models/uom'
 
-async function fetchDeviceData(params: any) {
-  const endpoint = transform('/api/v1/device', params)
-  return await xfetch(endpoint)
-}
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/device.handler'
+
+// Services
+import { getDevices, getDeviceDetail } from '~/services/device.service'
+import { getUoms } from '~/services/uom.service'
+
+const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
 
-// Menggunakan composable untuk pagination
 const {
   data,
   isLoading,
@@ -37,9 +43,12 @@ const {
   searchInput,
   handlePageChange,
   handleSearch,
-  fetchData: getDeviceList,
+  fetchData: getToolsList,
 } = usePaginatedList({
-  fetchFn: fetchDeviceData,
+  fetchFn: async ({ page }) => {
+    const result = await getDevices({ search: searchInput.value, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
   entityName: 'device',
 })
 
@@ -65,7 +74,10 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah Peralatan',
     icon: 'i-lucide-plus',
     onClick: () => {
+      recItem.value = null
+      recId.value = 0
       isFormEntryDialogOpen.value = true
+      isReadonly.value = false
     },
   },
 }
@@ -75,110 +87,79 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+const getCurrentToolsDetail = async (id: number | string) => {
+  const result = await getDeviceDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+  }
+}
+
+const getUomList = async () => {
+  const result = await getUoms()
+  if (result.success) {
+    const currentUoms = result.body?.data || []
+    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
+  }
+}
+
 // Watch for row actions
-watch(recId, () => {
+watch([recId, recAction], () => {
   switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentToolsDetail(recId.value)
+      title.value = 'Detail Peralatan'
+      isReadonly.value = true
+      isFormEntryDialogOpen.value = true
+      break
     case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
+      getCurrentToolsDetail(recId.value)
+      title.value = 'Edit Peralatan'
+      isReadonly.value = false
+      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
-}
+onMounted(async () => {
+  await getUomList()
+  await getToolsList()
+})
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
+  <div class="p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <div class="rounded-md border p-4">
       <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
     </div>
 
-    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Peralatan" size="lg" prevent-outside>
-      <AppToolsEntryForm :schema="DeviceSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Peralatan'"
+      size="lg"
+      prevent-outside
+    >
+      <AppToolsEntryForm
+        :schema="DeviceSchema"
+        :values="recItem"
+        :uoms="uoms"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: DeviceFormData, resetForm: any) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getToolsList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getToolsList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
     </Dialog>
 
     <!-- Record Confirmation Modal -->
@@ -186,8 +167,8 @@ const handleCancelConfirmation = () => {
       v-model:open="isRecordConfirmationOpen"
       action="delete"
       :record="recItem"
-      @confirm="handleConfirmDelete"
-      @cancel="handleCancelConfirmation"
+      @confirm="() => handleActionRemove(recId, getToolsList, toast)"
+      @cancel=""
     >
       <template #default="{ record }">
         <div class="text-sm">
diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
new file mode 100644
index 00000000..bcb01444
--- /dev/null
+++ b/app/components/content/uom/list.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import AppUomEntryForm from '~/components/app/uom/entry-form.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { UomSchema, type UomFormData } from '~/schemas/uom.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/uom.handler'
+
+// Services
+import { getUoms, getUomDetail } from '~/services/uom.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getUomList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getUoms({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'uom',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Uom',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {},
+    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 getCurrentUomDetail = async (id: number | string) => {
+  const result = await getUomDetail(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:
+      getCurrentUomDetail(recId.value)
+      title.value = 'Detail Uom'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentUomDetail(recId.value)
+      title.value = 'Edit Uom'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getUomList()
+})
+</script>
+
+<template>
+  <div class="p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppUomList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
+
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Uom'"
+      size="lg"
+      prevent-outside
+    >
+      <AppUomEntryForm
+        :schema="UomSchema"
+        :values="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: UomFormData | Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getUomList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getUomList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getUomList, toast)"
+      @cancel=""
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
diff --git a/app/components/layout/SidebarNavGroup.vue b/app/components/layout/SidebarNavGroup.vue
index f9d1a73f..31b55e8d 100644
--- a/app/components/layout/SidebarNavGroup.vue
+++ b/app/components/layout/SidebarNavGroup.vue
@@ -37,7 +37,7 @@ const openCollapsible = ref(false)
               <SidebarMenuSubButton as-child>
                 <NuxtLink
                   :to="subItem.link"
-                  class="mx-4 rounded-lg py-5 text-sm font-medium transition-all duration-200"
+                  class="mx-4 rounded-lg py-5 text-sm transition-all duration-200"
                   active-class="bg-primary text-white"
                   @click="setOpenMobile(false)"
                 >
diff --git a/app/components/layout/SidebarNavLink.vue b/app/components/layout/SidebarNavLink.vue
index 07c954ea..08d5a9aa 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 font-medium transition-all duration-200"
+          class="group flex items-center gap-3 rounded-lg px-2 py-4 text-sm transition-all duration-200"
           active-class="bg-primary text-white"
           @click="setOpenMobile(false)"
         >
diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index 8c9cbf50..1127b4e4 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -62,7 +62,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
 <template>
   <Table>
-    <TableHeader class="bg-gray-50">
+    <TableHeader class="bg-gray-50 dark:bg-gray-800">
       <TableRow>
         <TableHead
           v-for="(h, idx) in header[0]"
@@ -79,7 +79,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
       <!-- 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="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground" />
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
         </TableCell>
       </TableRow>
     </TableBody>
diff --git a/app/components/pub/custom-ui/doc-entry/block.vue b/app/components/pub/custom-ui/doc-entry/block.vue
new file mode 100644
index 00000000..9a1403b4
--- /dev/null
+++ b/app/components/pub/custom-ui/doc-entry/block.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+// ---------- Imports ----------
+import { computed, useSlots } from 'vue'
+
+// Types
+const props = defineProps({
+  mode: { type: String, default: 'entry' },
+  gridPoint: { type: String, default: 'lg' },
+  cellFlex: { type: Boolean, default: true },
+  cellFlexPoint: { type: String, default: 'md' },
+  labelSize: { type: String, default: 'medium' },
+  labelSizePoint: { type: String, default: 'md' },
+  colCount: { type: Number, default: 1 },
+  defaultClass: { type: String, default: 'mb-5' },
+  class: { type: String, default: '' },
+})
+
+const slots = useSlots()
+
+// Utility functions (minimal, can be expanded)
+const breakpoints = ['grid', 'sm:grid', 'md:grid', 'lg:grid', 'xl:grid', '2xl:grid']
+const getBreakpointIdx = (point: string) => {
+  return Math.max(0, breakpoints.findIndex(bp => bp.startsWith(point)))
+}
+const labelSizes = ['small', 'medium', 'large', 'xl', '2xl']
+const getLabelSizeIdx = (size: string) => {
+  return Math.max(0, labelSizes.findIndex(s => s === size))
+}
+
+const settingClass = computed(() => {
+  const breakPointIdx = getBreakpointIdx(props.gridPoint)
+  let cls = breakpoints[breakPointIdx]
+  cls += ' gap-4 xl:gap-5 ' + [
+    'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
+    'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
+  ][props.colCount - 1]
+  cls += breakPointIdx === 0 ? ' gap-3 ' : ''
+  cls += ' ' + [
+    ' [&_.cell]:!mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:sm:mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:md:mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:lg:mb-0',
+    ' [&_.cell]:mb-3 [&_.cell]:xl:mb-0',
+    ' [&_.cell]:mb-3 [&_.cell]:2xl:mb-0',
+  ][breakPointIdx]
+  if (props.cellFlex) {
+    cls += ' ' + [
+      '[&_.cell]:flex',
+      '[&_.cell]:sm:flex',
+      '[&_.cell]:md:flex',
+      '[&_.cell]:lg:flex',
+      '[&_.cell]:xl:flex',
+      '[&_.cell]:2xl:flex',
+    ][getBreakpointIdx(props.cellFlexPoint)]
+    cls += ' [&_.label]:sm:pt-2 ' + [
+      '[&_.label]:md:w-12 [&_.label]:xl:w-20',
+      '[&_.label]:md:w-16 [&_.label]:xl:w-24',
+      '[&_.label]:md:w-24 [&_.label]:xl:w-32',
+      '[&_.label]:md:w-32 [&_.label]:xl:w-40',
+      '[&_.label]:md:w-44 [&_.label]:xl:w-52',
+    ][getLabelSizeIdx(props.labelSize)]
+  }
+  cls += ' [&_.height-default]:pt-2 [&_.height-default]:2xl:!pt-1.5 [&_.height-compact]:!pt-1 '
+  cls += '[&_textarea]:text-xs [&_textarea]:xl:text-sm '
+  cls += '[&_label]:text-xs [&_label]:xl:text-sm'
+  return cls
+})
+</script>
+
+<template>
+  <div :class="`block ${props.defaultClass} ${settingClass} ${props.class}`">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/app/components/pub/custom-ui/doc-entry/cell.vue b/app/components/pub/custom-ui/doc-entry/cell.vue
new file mode 100644
index 00000000..f37259ce
--- /dev/null
+++ b/app/components/pub/custom-ui/doc-entry/cell.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  colSpan: { type: Number, default: undefined },
+  colStart: { type: Number, default: undefined },
+  colEnd: { type: Number, default: undefined },
+  class: { type: String, default: '' },
+})
+
+const settingClass = computed(() => {
+  let cls = 'cell'
+  if (props.colSpan) {
+    cls += ' ' + [
+      'col-span-1', 'col-span-2', 'col-span-3', 'col-span-4', 'col-span-5',
+      'col-span-6', 'col-span-7', 'col-span-8', 'col-span-9', 'col-span-10',
+    ][props.colSpan - 1]
+  }
+  if (props.colStart) {
+    cls += ' ' + [
+      'col-start-1', 'col-start-2', 'col-start-3', 'col-start-4', 'col-start-5',
+      'col-start-6', 'col-start-7', 'col-start-8', 'col-start-9', 'col-start-10',
+    ][props.colStart - 1]
+  }
+  if (props.colEnd) {
+    cls += ' ' + [
+      'col-end-1', 'col-end-2', 'col-end-3', 'col-end-4', 'col-end-5',
+      'col-end-6', 'col-end-7', 'col-end-8', 'col-end-9', 'col-end-10',
+    ][props.colEnd - 1]
+  }
+  if (props.class) {
+    cls += ' ' + props.class.trim()
+  }
+  return cls
+})
+</script>
+
+<template>
+  <div :class="settingClass">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/doc-entry/field.vue b/app/components/pub/custom-ui/doc-entry/field.vue
new file mode 100644
index 00000000..829e0015
--- /dev/null
+++ b/app/components/pub/custom-ui/doc-entry/field.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps({
+  errMessage: { type: String, default: '' },
+  defaultClass: { type: String, default: 'field grow shrink-0 overflow-hidden' },
+  class: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div :class="`${props.defaultClass} ${props.class}`">
+    <slot />
+    <div v-if="props.errMessage" class="mt-1 text-xs font-medium text-red-500">{{ props.errMessage }}</div>
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/doc-entry/label.vue b/app/components/pub/custom-ui/doc-entry/label.vue
new file mode 100644
index 00000000..c3c5f338
--- /dev/null
+++ b/app/components/pub/custom-ui/doc-entry/label.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  height: { type: String, default: 'default' }, // 'default' | 'compact'
+  position: { type: String, default: 'default' }, // 'default' | 'dynamic'
+  positionPoint: { type: String, default: 'lg' },
+  class: { type: String, default: '' },
+})
+
+const breakpoints = ['','sm','md','lg','xl','2xl']
+const getBreakpointIdx = (point: string) => {
+  return Math.max(0, breakpoints.findIndex(bp => bp === point))
+}
+
+const settingClass = computed(() => {
+  let cls = 'label'
+  cls += props.height === 'compact' ? ' height-compact ' : ' height-default '
+  if (props.position === 'dynamic') {
+    cls += ' ' + [
+      'text-end pe-2.5',
+      'sm:text-end pe-2.5',
+      'md:text-end pe-2.5',
+      'lg:text-end pe-2.5',
+      'xl:text-end pe-2.5',
+      '2xl:text-end pe-2.5',
+    ][getBreakpointIdx(props.positionPoint)]
+  }
+  return cls + ' ' + (props.class?.trim() || '')
+})
+</script>
+
+<template>
+  <div :class="settingClass">
+    <label>
+      <slot />
+    </label>
+  </div>
+</template>
diff --git a/app/components/pub/ui/card/CardContent.vue b/app/components/pub/ui/card/CardContent.vue
index 1f304071..2c5eda28 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-6 pt-0', props.class)">
+  <div :class="cn('p-4 xl:p-5 2xl:p-6', props.class)">
     <slot />
   </div>
 </template>
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index 2d06d4d5..6acffbae 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/app/components/pub/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground flex  h-10 w-full  rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full  rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/sidebar/SidebarInset.vue b/app/components/pub/ui/sidebar/SidebarInset.vue
index 92d35958..ae25091c 100644
--- a/app/components/pub/ui/sidebar/SidebarInset.vue
+++ b/app/components/pub/ui/sidebar/SidebarInset.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <main
     :class="cn(
-      'overflow-x-auto relative flex min-h-svh flex-1 flex-col bg-background',
+      'overflow-x-auto relative flex min-h-svh flex-1 flex-col',
       'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset][&>header]:rounded-t-xl md:peer-data-[variant=inset]:shadow',
       props.class,
     )"
diff --git a/app/handlers/_handler.ts b/app/handlers/_handler.ts
new file mode 100644
index 00000000..d05e6f39
--- /dev/null
+++ b/app/handlers/_handler.ts
@@ -0,0 +1,42 @@
+// Reusable async handler for CRUD actions with toast and state management
+export type ToastFn = (params: { title: string; description: string; variant: 'default' | 'destructive' }) => void
+
+export interface HandleAsyncActionOptions<T extends any[], R> {
+  action: (...args: T) => Promise<R & { success: boolean }>
+  args?: T
+  toast: ToastFn
+  successMessage: string
+  errorMessage: string
+  onSuccess?: (result: R) => void
+  onError?: (error: unknown) => void
+  onFinally?: (isSuccess: boolean) => void
+}
+
+export async function handleAsyncAction<T extends any[], R>({
+  action,
+  args = [] as unknown as T,
+  toast,
+  successMessage,
+  errorMessage,
+  onSuccess,
+  onError,
+  onFinally,
+}: HandleAsyncActionOptions<T, R>) {
+  let isSuccess = false
+  try {
+    const result = await action(...args)
+    if (result.success) {
+      toast({ title: 'Berhasil', description: successMessage, variant: 'default' })
+      isSuccess = true
+      if (onSuccess) onSuccess(result)
+    } else {
+      toast({ title: 'Gagal', description: errorMessage, variant: 'destructive' })
+      if (onError) onError(result)
+    }
+  } catch (error) {
+    toast({ title: 'Gagal', description: errorMessage, variant: 'destructive' })
+    if (onError) onError(error)
+  } finally {
+    if (onFinally) onFinally(isSuccess)
+  }
+}
diff --git a/app/handlers/device.handler.ts b/app/handlers/device.handler.ts
new file mode 100644
index 00000000..e269f61b
--- /dev/null
+++ b/app/handlers/device.handler.ts
@@ -0,0 +1,101 @@
+import { ref } from 'vue'
+
+// Handlers
+import { type ToastFn, handleAsyncAction } from '~/handlers/_handler'
+
+// Services
+import { postDevice, patchDevice, removeDevice } from '~/services/device.service'
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isReadonly = ref(false)
+const isProcessing = ref(false)
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+function onResetState() {
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+export async function handleActionSave(
+  values: any,
+  refresh: () => void,
+  reset: () => void,
+  toast: ToastFn
+) {
+  isProcessing.value = true;
+  await handleAsyncAction<[any], any>({
+    action: postDevice,
+    args: [values],
+    toast,
+    successMessage: 'Data berhasil disimpan',
+    errorMessage: 'Gagal menyimpan data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false;
+      if (refresh) refresh();
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500);
+      isProcessing.value = false;
+    },
+  });
+}
+
+export async function handleActionEdit(
+  id: number | string,
+  values: any,
+  refresh: () => void,
+  reset: () => void,
+  toast: ToastFn
+) {
+  isProcessing.value = true;
+  await handleAsyncAction<[number | string, any], any>({
+    action: patchDevice,
+    args: [id, values],
+    toast,
+    successMessage: 'Data berhasil diubah',
+    errorMessage: 'Gagal mengubah data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false;
+      if (refresh) refresh();
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500);
+      isProcessing.value = false;
+    },
+  });
+}
+
+export async function handleActionRemove(
+  id: number | string,
+  refresh: () => void,
+  toast: ToastFn
+) {
+  isProcessing.value = true;
+  await handleAsyncAction<[number | string], any>({
+    action: removeDevice,
+    args: [id],
+    toast,
+    successMessage: 'Data berhasil dihapus',
+    errorMessage: 'Gagal menghapus data',
+    onSuccess: () => {
+      if (refresh) refresh();
+    },
+    onFinally: () => {
+      onResetState();
+      isProcessing.value = false;
+    },
+  });
+}
+
+export function handleCancelForm(reset: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    reset()
+  }, 500)
+}
+
+export { recId, recAction, recItem, isReadonly, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
diff --git a/app/handlers/material.handler.ts b/app/handlers/material.handler.ts
new file mode 100644
index 00000000..d61e5f01
--- /dev/null
+++ b/app/handlers/material.handler.ts
@@ -0,0 +1,92 @@
+import { ref } from 'vue'
+
+// Handlers
+import { type ToastFn, handleAsyncAction } from '~/handlers/_handler'
+
+// Services
+import { postMaterial, patchMaterial, removeMaterial } from '~/services/material.service'
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isReadonly = ref(false)
+const isProcessing = ref(false)
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+function onResetState() {
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+export async function handleActionSave(values: any, refresh: () => void, reset: () => void, toast: ToastFn) {
+  isProcessing.value = true
+  await handleAsyncAction<[any], any>({
+    action: postMaterial,
+    args: [values],
+    toast,
+    successMessage: 'Data berhasil disimpan',
+    errorMessage: 'Gagal menyimpan data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false
+      if (refresh) refresh()
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500)
+      isProcessing.value = false
+    },
+  })
+}
+
+export async function handleActionEdit(
+  id: number | string,
+  values: any,
+  refresh: () => void,
+  reset: () => void,
+  toast: ToastFn,
+) {
+  isProcessing.value = true
+  await handleAsyncAction<[number | string, any], any>({
+    action: patchMaterial,
+    args: [id, values],
+    toast,
+    successMessage: 'Data berhasil diubah',
+    errorMessage: 'Gagal mengubah data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false
+      if (refresh) refresh()
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500)
+      isProcessing.value = false
+    },
+  })
+}
+
+export async function handleActionRemove(id: number | string, refresh: () => void, toast: ToastFn) {
+  isProcessing.value = true
+  await handleAsyncAction<[number | string], any>({
+    action: removeMaterial,
+    args: [id],
+    toast,
+    successMessage: 'Data berhasil dihapus',
+    errorMessage: 'Gagal menghapus data',
+    onSuccess: () => {
+      if (refresh) refresh()
+    },
+    onFinally: () => {
+      onResetState()
+      isProcessing.value = false
+    },
+  })
+}
+
+export function handleCancelForm(reset: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    reset()
+  }, 500)
+}
+
+export { recId, recAction, recItem, isReadonly, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
diff --git a/app/handlers/medicine-group.handler.ts b/app/handlers/medicine-group.handler.ts
new file mode 100644
index 00000000..f349355f
--- /dev/null
+++ b/app/handlers/medicine-group.handler.ts
@@ -0,0 +1,101 @@
+import { ref } from 'vue'
+
+// Handlers
+import { type ToastFn, handleAsyncAction } from '~/handlers/_handler'
+
+// Services
+import { postMedicineGroup, patchMedicineGroup, removeMedicineGroup } from '~/services/medicine-group.service'
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isReadonly = ref(false)
+const isProcessing = ref(false)
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+function onResetState() {
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+export async function handleActionSave(
+  values: any,
+  refresh: () => void,
+  reset: () => void,
+  toast: ToastFn
+) {
+  isProcessing.value = true;
+  await handleAsyncAction<[any], any>({
+    action: postMedicineGroup,
+    args: [values],
+    toast,
+    successMessage: 'Data berhasil disimpan',
+    errorMessage: 'Gagal menyimpan data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false;
+      if (refresh) refresh();
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500);
+      isProcessing.value = false;
+    },
+  });
+}
+
+export async function handleActionEdit(
+  id: number | string,
+  values: any,
+  refresh: () => void,
+  reset: () => void,
+  toast: ToastFn
+) {
+  isProcessing.value = true;
+  await handleAsyncAction<[number | string, any], any>({
+    action: patchMedicineGroup,
+    args: [id, values],
+    toast,
+    successMessage: 'Data berhasil diubah',
+    errorMessage: 'Gagal mengubah data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false;
+      if (refresh) refresh();
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500);
+      isProcessing.value = false;
+    },
+  });
+}
+
+export async function handleActionRemove(
+  id: number | string,
+  refresh: () => void,
+  toast: ToastFn
+) {
+  isProcessing.value = true;
+  await handleAsyncAction<[number | string], any>({
+    action: removeMedicineGroup,
+    args: [id],
+    toast,
+    successMessage: 'Data berhasil dihapus',
+    errorMessage: 'Gagal menghapus data',
+    onSuccess: () => {
+      if (refresh) refresh();
+    },
+    onFinally: () => {
+      onResetState();
+      isProcessing.value = false;
+    },
+  });
+}
+
+export function handleCancelForm(reset: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    reset()
+  }, 500)
+}
+
+export { recId, recAction, recItem, isReadonly, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
diff --git a/app/handlers/medicine-method.handler.ts b/app/handlers/medicine-method.handler.ts
new file mode 100644
index 00000000..2a681776
--- /dev/null
+++ b/app/handlers/medicine-method.handler.ts
@@ -0,0 +1,101 @@
+import { ref } from 'vue'
+
+// Handlers
+import { type ToastFn, handleAsyncAction } from '~/handlers/_handler'
+
+// Services
+import { postMedicineMethod, patchMedicineMethod, removeMedicineMethod } from '~/services/medicine-method.service'
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isReadonly = ref(false)
+const isProcessing = ref(false)
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+function onResetState() {
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+export async function handleActionSave(
+  values: any,
+  refresh: () => void,
+  reset: () => void,
+  toast: ToastFn
+) {
+  isProcessing.value = true;
+  await handleAsyncAction<[any], any>({
+    action: postMedicineMethod,
+    args: [values],
+    toast,
+    successMessage: 'Data berhasil disimpan',
+    errorMessage: 'Gagal menyimpan data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false;
+      if (refresh) refresh();
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500);
+      isProcessing.value = false;
+    },
+  });
+}
+
+export async function handleActionEdit(
+  id: number | string,
+  values: any,
+  refresh: () => void,
+  reset: () => void,
+  toast: ToastFn
+) {
+  isProcessing.value = true;
+  await handleAsyncAction<[number | string, any], any>({
+    action: patchMedicineMethod,
+    args: [id, values],
+    toast,
+    successMessage: 'Data berhasil diubah',
+    errorMessage: 'Gagal mengubah data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false;
+      if (refresh) refresh();
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500);
+      isProcessing.value = false;
+    },
+  });
+}
+
+export async function handleActionRemove(
+  id: number | string,
+  refresh: () => void,
+  toast: ToastFn
+) {
+  isProcessing.value = true;
+  await handleAsyncAction<[number | string], any>({
+    action: removeMedicineMethod,
+    args: [id],
+    toast,
+    successMessage: 'Data berhasil dihapus',
+    errorMessage: 'Gagal menghapus data',
+    onSuccess: () => {
+      if (refresh) refresh();
+    },
+    onFinally: () => {
+      onResetState();
+      isProcessing.value = false;
+    },
+  });
+}
+
+export function handleCancelForm(reset: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    reset()
+  }, 500)
+}
+
+export { recId, recAction, recItem, isReadonly, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
diff --git a/app/handlers/uom.handler.ts b/app/handlers/uom.handler.ts
new file mode 100644
index 00000000..e24fbcfa
--- /dev/null
+++ b/app/handlers/uom.handler.ts
@@ -0,0 +1,92 @@
+import { ref } from 'vue'
+
+// Handlers
+import { type ToastFn, handleAsyncAction } from '~/handlers/_handler'
+
+// Services
+import { postUom, patchUom, removeUom } from '~/services/uom.service'
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isReadonly = ref(false)
+const isProcessing = ref(false)
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+function onResetState() {
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+export async function handleActionSave(values: any, refresh: () => void, reset: () => void, toast: ToastFn) {
+  isProcessing.value = true
+  await handleAsyncAction<[any], any>({
+    action: postUom,
+    args: [values],
+    toast,
+    successMessage: 'Data berhasil disimpan',
+    errorMessage: 'Gagal menyimpan data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false
+      if (refresh) refresh()
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500)
+      isProcessing.value = false
+    },
+  })
+}
+
+export async function handleActionEdit(
+  id: number | string,
+  values: any,
+  refresh: () => void,
+  reset: () => void,
+  toast: ToastFn,
+) {
+  isProcessing.value = true
+  await handleAsyncAction<[number | string, any], any>({
+    action: patchUom,
+    args: [id, values],
+    toast,
+    successMessage: 'Data berhasil diubah',
+    errorMessage: 'Gagal mengubah data',
+    onSuccess: () => {
+      isFormEntryDialogOpen.value = false
+      if (refresh) refresh()
+    },
+    onFinally: (isSuccess: boolean) => {
+      if (isSuccess) setTimeout(reset, 500)
+      isProcessing.value = false
+    },
+  })
+}
+
+export async function handleActionRemove(id: number | string, refresh: () => void, toast: ToastFn) {
+  isProcessing.value = true
+  await handleAsyncAction<[number | string], any>({
+    action: removeUom,
+    args: [id],
+    toast,
+    successMessage: 'Data berhasil dihapus',
+    errorMessage: 'Gagal menghapus data',
+    onSuccess: () => {
+      if (refresh) refresh()
+    },
+    onFinally: () => {
+      onResetState()
+      isProcessing.value = false
+    },
+  })
+}
+
+export function handleCancelForm(reset: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    reset()
+  }, 500)
+}
+
+export { recId, recAction, recItem, isReadonly, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 1f62236f..c68136e9 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import CardContent from '~/components/pub/ui/card/CardContent.vue'
+
 const route = useRoute()
 const contentFrame = computed(() => route.meta.contentFrame)
 const contentContent = computed(() => {
@@ -22,11 +24,13 @@ const contentContent = computed(() => {
     <LayoutAppSidebar />
     <SidebarInset>
       <LayoutHeader />
-      <div class="w-full min-w-0 flex-1 overflow-x-auto p-4 lg:p-6">
-        <div v-if="contentFrame !== 'cf-no-frame'" class="contentFrame">
-          <div :class="`${contentContent} ${contentFrame}`">
-            <slot />
-          </div>
+      <div class="w-full min-w-0 flex-1 overflow-x-auto p-4 xl:p-5 2xl:p-6">
+        <div v-if="contentFrame !== 'cf-no-frame'" :class="`contentFrame ${contentContent} ${contentFrame}`">
+          <Card>
+            <CardContent>
+              <slot />
+            </CardContent>
+          </Card>
         </div>
         <slot v-else />
       </div>
@@ -39,14 +43,14 @@ const contentContent = computed(() => {
 .cf-container-lg,
 .cf-container-md,
 .cf-container-sm {
-  container-type: inline-size;
+  /* container-type: inline-size;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
   border-radius: 0.375rem;
-  padding-bottom: 5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-bottom: 5rem; */
+  /* padding-left: 1rem;
+  padding-right: 1rem; */
 }
 
 .cf-container > *,
@@ -54,15 +58,15 @@ const contentContent = computed(() => {
 .cf-container-md > *,
 .cf-container-sm > *,
 .cf-full-width {
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0.75rem; /* p-3 */
-  padding-bottom: 5rem; /* pb-20 */
-  background-color: hsl(var(--background));
+  /* margin-left: auto;
+  margin-right: auto; */
+  /* padding: 0.75rem;
+  padding-bottom: 5rem; */
+  /* background-color: hsl(var(--background));
   border-radius: 0.375rem;
   border: 1px solid hsl(var(--border));
-  border-color: rgb(226 232 240); /* slate-200 */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-color: rgb(226 232 240);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
 }
 
 .cf-container-lg > * {
@@ -78,25 +82,25 @@ const contentContent = computed(() => {
 }
 
 .cf-frame-width {
-  margin-left: auto;
+  /* margin-left: auto;
   margin-right: auto;
   background-color: hsl(var(--background));
   border-radius: 0.375rem;
   border: 1px solid hsl(var(--border));
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  max-width: 100%;
-  padding: 1rem;
+  max-width: 100%; */
+  /* padding: 1rem; */
 }
 
 .cf-frame {
-  margin-left: auto;
+  /* margin-left: auto;
   margin-right: auto;
   padding: 1rem;
   background-color: hsl(var(--background));
   border-radius: 0.375rem;
   border: 1px solid hsl(var(--border));
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  max-width: 100%;
+  max-width: 100%; */
 }
 
 @media (min-width: 640px) {
@@ -104,16 +108,16 @@ const contentContent = computed(() => {
   .cf-container-lg,
   .cf-container-md,
   .cf-container-sm {
-    padding-left: 2rem;
-    padding-right: 2rem;
+    /* padding-left: 2rem;
+    padding-right: 2rem; */
   }
 
   .cf-frame {
-    padding: 2rem;
+    /* padding: 2rem; */
   }
 
   .cf-frame-width {
-    padding: 2rem;
+    /* padding: 2rem; */
   }
 }
 
@@ -122,16 +126,16 @@ const contentContent = computed(() => {
   .cf-container-lg,
   .cf-container-md,
   .cf-container-sm {
-    padding-left: 3rem;
-    padding-right: 3rem;
+    /* padding-left: 3rem;
+    padding-right: 3rem; */
   }
 
   .cf-frame {
-    padding: 3rem;
+    /* padding: 3rem; */
   }
 
   .cf-frame-width {
-    padding: 3rem;
+    /* padding: 3rem; */
   }
 }
 </style>
diff --git a/app/models/_model.ts b/app/models/_model.ts
new file mode 100644
index 00000000..b5f09a71
--- /dev/null
+++ b/app/models/_model.ts
@@ -0,0 +1,20 @@
+// Default item meta model for entities
+export interface ItemMeta {
+  id: number
+  createdAt: string | null
+  deletedAt: string | null
+  updatedAt: string | null
+}
+
+// Pagination meta model for API responses
+export interface PaginationMeta {
+  page_number: string
+  page_size: string
+  record_totalCount: string
+  source: string
+}
+
+export interface Base {
+  name: string
+  code: string
+}
diff --git a/app/models/device.ts b/app/models/device.ts
new file mode 100644
index 00000000..ec7f7443
--- /dev/null
+++ b/app/models/device.ts
@@ -0,0 +1,5 @@
+export interface Device {
+  code: string
+  name: string
+  uom_code: string
+}
diff --git a/app/models/material.ts b/app/models/material.ts
new file mode 100644
index 00000000..5e259256
--- /dev/null
+++ b/app/models/material.ts
@@ -0,0 +1,6 @@
+export interface Material {
+  code: string
+  name: string
+  uom_code: string
+  stock: number
+}
diff --git a/app/models/medicine.ts b/app/models/medicine.ts
index 382c76e2..1d01991b 100644
--- a/app/models/medicine.ts
+++ b/app/models/medicine.ts
@@ -1,3 +1,8 @@
+export interface MedicineBase {
+  name: string
+  code: string
+}
+
 export interface Medicine {
   id: string
   name: string
diff --git a/app/models/uom.ts b/app/models/uom.ts
new file mode 100644
index 00000000..9e9f5fdf
--- /dev/null
+++ b/app/models/uom.ts
@@ -0,0 +1,5 @@
+export interface Uom {
+  code: string
+  name: string
+  erp_id: string
+}
diff --git a/app/pages/(features)/tools-equipment-src/device/add.vue b/app/pages/(features)/common/uom/index.vue
similarity index 70%
rename from app/pages/(features)/tools-equipment-src/device/add.vue
rename to app/pages/(features)/common/uom/index.vue
index f258ce8e..2efdacb7 100644
--- a/app/pages/(features)/tools-equipment-src/device/add.vue
+++ b/app/pages/(features)/common/uom/index.vue
@@ -6,7 +6,7 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
 definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Tambah User',
+  title: 'Daftar User',
   contentFrame: 'cf-full-width',
 })
 
@@ -18,24 +18,23 @@ useHead({
 
 const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
 
-const { checkRole, hasCreateAccess } = useRBAC()
+const { checkRole, hasReadAccess } = useRBAC()
 
 // Check if user has access to this page
 const hasAccess = checkRole(roleAccess)
 if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
+  navigateTo('/403')
 }
 
 // Define permission-based computed properties
-const canCreate = hasCreateAccess(roleAccess)
+const canRead = true // hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div v-if="canCreate">
-    <ContentDeviceEntry />
+  <div>
+    <div v-if="canRead">
+      <ContentUomList />
+    </div>
+    <Error v-else :status-code="403" />
   </div>
-  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/tools-equipment-src/equipment/add.vue b/app/pages/(features)/tools-equipment-src/equipment/add.vue
deleted file mode 100644
index f8fe61a2..00000000
--- a/app/pages/(features)/tools-equipment-src/equipment/add.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { PagePermission } from '~/models/role'
-import Error from '~/components/pub/base/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-
-definePageMeta({
-  middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Tambah User',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
-
-const { checkRole, hasCreateAccess } = useRBAC()
-
-// Check if user has access to this page
-const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
-}
-
-// Define permission-based computed properties
-const canCreate = hasCreateAccess(roleAccess)
-</script>
-
-<template>
-  <div v-if="canCreate">
-    <ContentMaterialEntry />
-  </div>
-  <Error v-else :status-code="403" />
-</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 45476961..7e27e735 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -3,7 +3,7 @@ definePageMeta({
   middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
   title: 'Dashboard',
-  contentFrame: 'cf-full-width',
+  contentFrame: 'cf-no-frame',
 })
 
 const route = useRoute()
diff --git a/app/schemas/base.schema.ts b/app/schemas/base.schema.ts
new file mode 100644
index 00000000..b46857ac
--- /dev/null
+++ b/app/schemas/base.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { Base } from '~/models/_model'
+
+const BaseSchema = 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'),
+})
+
+type BaseFormData = z.infer<typeof BaseSchema> & Base
+
+export { BaseSchema }
+export type { BaseFormData }
diff --git a/app/schemas/device.ts b/app/schemas/device.schema.ts
similarity index 57%
rename from app/schemas/device.ts
rename to app/schemas/device.schema.ts
index 036f3bc7..0dfffd3e 100644
--- a/app/schemas/device.ts
+++ b/app/schemas/device.schema.ts
@@ -1,13 +1,13 @@
 import { z } from 'zod'
+import type { Device } from '~/models/device'
 
-const schema = z.object({
+const DeviceSchema = 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>
+type DeviceFormData = z.infer<typeof DeviceSchema> & Device
 
-export { schema as DeviceSchema }
-export type { formData as DeviceFormData }
+export { DeviceSchema }
+export type { DeviceFormData }
diff --git a/app/schemas/material.ts b/app/schemas/material.schema.ts
similarity index 66%
rename from app/schemas/material.ts
rename to app/schemas/material.schema.ts
index 7d0a4c7e..ff6252a7 100644
--- a/app/schemas/material.ts
+++ b/app/schemas/material.schema.ts
@@ -1,14 +1,14 @@
 import { z } from 'zod'
+import type { Material } from '~/models/material'
 
-const schema = z.object({
+const MaterialSchema = 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'),
   stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: 'Stok harus berupa angka' }).min(1, 'Stok harus lebih besar dari 0')),
 })
 
-type formData = z.infer<typeof schema>
+type MaterialFormData = z.infer<typeof MaterialSchema> & Material
 
-export { schema as MaterialSchema }
-export type { formData as MaterialFormData }
+export { MaterialSchema }
+export type { MaterialFormData }
diff --git a/app/schemas/medicine.schema.ts b/app/schemas/medicine.schema.ts
new file mode 100644
index 00000000..13f01d15
--- /dev/null
+++ b/app/schemas/medicine.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { MedicineBase } from '~/models/medicine'
+
+const MedicineBaseSchema = 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')
+})
+
+type MedicineBaseFormData = z.infer<typeof MedicineBaseSchema> & MedicineBase
+
+export { MedicineBaseSchema }
+export type { MedicineBaseFormData }
diff --git a/app/schemas/uom.schema.ts b/app/schemas/uom.schema.ts
new file mode 100644
index 00000000..4229e420
--- /dev/null
+++ b/app/schemas/uom.schema.ts
@@ -0,0 +1,4 @@
+import { BaseSchema, type BaseFormData } from './base.schema'
+
+export { BaseSchema as UomSchema }
+export type { BaseFormData as UomFormData }
diff --git a/app/services/device.service.ts b/app/services/device.service.ts
new file mode 100644
index 00000000..44f7d1b9
--- /dev/null
+++ b/app/services/device.service.ts
@@ -0,0 +1,79 @@
+import { xfetch } from '~/composables/useXfetch'
+
+const mainUrl = '/api/v1/device'
+
+export async function getDevices(params: any = null) {
+  try {
+    let url = mainUrl
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(url, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching devices:', error)
+    throw new Error('Failed to fetch devices')
+  }
+}
+
+export async function getDeviceDetail(id: string | number) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching device detail:', error)
+    throw new Error('Failed to fetch device detail')
+  }
+}
+
+export async function postDevice(data: any) {
+  try {
+    const resp = await xfetch(mainUrl, 'POST', data)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error creating device:', error)
+    throw new Error('Failed to create device')
+  }
+}
+
+export async function patchDevice(id: string | number, data: any) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', data)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error updating device:', error)
+    throw new Error('Failed to update device')
+  }
+}
+
+export async function removeDevice(id: string | number) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error deleting device:', error)
+    throw new Error('Failed to delete device')
+  }
+}
diff --git a/app/services/material.service.ts b/app/services/material.service.ts
new file mode 100644
index 00000000..098612e0
--- /dev/null
+++ b/app/services/material.service.ts
@@ -0,0 +1,79 @@
+import { xfetch } from '~/composables/useXfetch'
+
+const mainUrl = '/api/v1/material'
+
+export async function getMaterials(params: any = null) {
+  try {
+    let url = mainUrl
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(url, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching materials:', error)
+    throw new Error('Failed to fetch materials')
+  }
+}
+
+export async function getMaterialDetail(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching material detail:', error)
+    throw new Error('Failed to get material detail')
+  }
+}
+
+export async function postMaterial(record: any) {
+  try {
+    const resp = await xfetch(mainUrl, 'POST', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error posting material:', error)
+    throw new Error('Failed to post material')
+  }
+}
+
+export async function patchMaterial(id: number | string, record: any) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error putting material:', error)
+    throw new Error('Failed to put material')
+  }
+}
+
+export async function removeMaterial(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    throw new Error('Failed to delete material')
+  }
+}
diff --git a/app/services/medicine-group.service.ts b/app/services/medicine-group.service.ts
new file mode 100644
index 00000000..e1f06863
--- /dev/null
+++ b/app/services/medicine-group.service.ts
@@ -0,0 +1,79 @@
+import { xfetch } from '~/composables/useXfetch'
+
+const mainUrl = '/api/v1/medicine-group'
+
+export async function getMedicineGroups(params: any = null) {
+  try {
+    let url = mainUrl
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(mainUrl, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching medicine groups:', error)
+    throw new Error('Failed to fetch medicine groups')
+  }
+}
+
+export async function getMedicineGroupDetail(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching medicine group detail:', error)
+    throw new Error('Failed to get medicine group detail')
+  }
+}
+
+export async function postMedicineGroup(record: any) {
+  try {
+    const resp = await xfetch(mainUrl, 'POST', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error posting medicine group:', error)
+    throw new Error('Failed to post medicine group')
+  }
+}
+
+export async function patchMedicineGroup(id: number | string, record: any) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error putting medicine group:', error)
+    throw new Error('Failed to put medicine group')
+  }
+}
+
+export async function removeMedicineGroup(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    throw new Error('Failed to delete medicine group')
+  }
+}
\ No newline at end of file
diff --git a/app/services/medicine-method.service.ts b/app/services/medicine-method.service.ts
index 02327163..3050671c 100644
--- a/app/services/medicine-method.service.ts
+++ b/app/services/medicine-method.service.ts
@@ -1,9 +1,87 @@
 import { xfetch } from '~/composables/useXfetch'
 
-export async function getMedicineMethods() {
+const mainUrl = '/api/v1/medicine-method'
+
+export async function getMedicineMethodsPrev() {
   const resp = await xfetch('/api/v1/medicine-method')
   if (resp.success) {
     return (resp.body as Record<string, any>).data
   }
   throw new Error('Failed to fetch medicine methods')
 }
+
+export async function getMedicineMethods(params: any = null) {
+  try {
+    let url = mainUrl
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(mainUrl, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching medicine methods:', error)
+    throw new Error('Failed to fetch medicine methods')
+  }
+}
+
+export async function getMedicineMethodDetail(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching medicine method detail:', error)
+    throw new Error('Failed to get medicine method detail')
+  }
+}
+
+export async function postMedicineMethod(record: any) {
+  try {
+    const resp = await xfetch(mainUrl, 'POST', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error posting medicine method:', error)
+    throw new Error('Failed to post medicine method')
+  }
+}
+
+export async function patchMedicineMethod(id: number | string, record: any) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error putting medicine method:', error)
+    throw new Error('Failed to put medicine method')
+  }
+}
+
+export async function removeMedicineMethod(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    throw new Error('Failed to delete medicine method')
+  }
+}
diff --git a/app/services/uom.service.ts b/app/services/uom.service.ts
new file mode 100644
index 00000000..f7b2eec1
--- /dev/null
+++ b/app/services/uom.service.ts
@@ -0,0 +1,79 @@
+import { xfetch } from '~/composables/useXfetch'
+
+const mainUrl = '/api/v1/uom'
+
+export async function getUoms(params: any = null) {
+  try {
+    let url = mainUrl
+    if (params && typeof params === 'object' && Object.keys(params).length > 0) {
+      const searchParams = new URLSearchParams()
+      for (const key in params) {
+        if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
+          searchParams.append(key, params[key])
+        }
+      }
+      const queryString = searchParams.toString()
+      if (queryString) url += `?${queryString}`
+    }
+    const resp = await xfetch(mainUrl, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching uoms:', error)
+    throw new Error('Failed to fetch uoms')
+  }
+}
+
+export async function getUomDetail(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error fetching uom detail:', error)
+    throw new Error('Failed to get uom detail')
+  }
+}
+
+export async function postUom(record: any) {
+  try {
+    const resp = await xfetch(mainUrl, 'POST', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error posting uom:', error)
+    throw new Error('Failed to post uom')
+  }
+}
+
+export async function patchUom(id: number | string, record: any) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error putting uom:', error)
+    throw new Error('Failed to put uom')
+  }
+}
+
+export async function removeUom(id: number | string) {
+  try {
+    const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    throw new Error('Failed to delete uom')
+  }
+}
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7ad57f5c..8176a4fb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,10 +1,14 @@
+
 import process from 'node:process'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
   runtimeConfig: {
-    API_ORIGIN: process.env.API_ORIGIN || 'https://main-api.dev-hopis.sabbi.id',
+    API_ORIGIN: process.env.NUXT_API_ORIGIN || 'https://main-api.dev-hopis.sabbi.id',
+    public: {
+      API_ORIGIN: process.env.NUXT_API_ORIGIN || 'https://main-api.dev-hopis.sabbi.id',
+    }
   },
   ssr: false,
 
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index 6b9f0dcd..3d6a215f 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -81,7 +81,7 @@
         "link": "/rehabilitasi",
         "children": [
           {
-            "title": "Antrian Pendaftaran",
+            "title": "Antrian Poliklinik",
             "icon": "i-lucide-stethoscope",
             "link": "/rehab/examination-queue"
           },
@@ -171,14 +171,33 @@
       {
         "title": "BPJS",
         "icon": "i-lucide-circuit-board",
-        "link": "/integration/bpjs",
-        "badge": "Live"
+        "children": [
+          {
+            "title": "SEP",
+            "icon": "i-lucide-circuit-board",
+            "link": "/bpjs-integration/sep"
+          },
+          {
+            "title": "Peserta",
+            "icon": "i-lucide-circuit-board",
+            "link": "/bpjs-integration/member"
+          }
+        ]
       },
       {
         "title": "SATUSEHAT",
         "icon": "i-lucide-database",
-        "link": "/integration/satusehat",
-        "badge": "FHIR"
+        "link": "/satusehat-integration"
+      },
+      {
+        "heading": "Keuangan",
+        "items": [
+          {
+            "title": "Daftar harga",
+            "icon": "i-lucide-list",
+            "link": "/item"
+          }
+        ]
       }
     ]
   },
@@ -268,11 +287,6 @@
           }
         ]
       },
-      {
-        "title": "Item & Item Price",
-        "icon": "i-lucide-shopping-basket",
-        "link": "/item-src/item"
-      },
       {
         "title": "Organisasi",
         "icon": "i-lucide-network",
@@ -303,7 +317,23 @@
             "link": "/org-src/subspecialist"
           }
         ]
+      },
+      {
+        "title": "Umum",
+        "icon": "i-lucide-airplay",
+        "children": [
+          {
+            "title": "Item & Pricing",
+            "icon": "i-lucide-airplay",
+            "link": "/common/item"
+          },
+          {
+            "title": "Uom",
+            "icon": "i-lucide-airplay",
+            "link": "/common/uom"
+          }
+        ]
       }
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/server/api/[...req].ts b/server/api/[...req].ts
index cb7d872a..8404cc2a 100644
--- a/server/api/[...req].ts
+++ b/server/api/[...req].ts
@@ -1,15 +1,15 @@
-import process from 'node:process'
 import { defineEventHandler, getCookie, getRequestHeaders, getRequestURL, readBody } from 'h3'
 
-const API_ORIGIN = process.env.API_ORIGIN as string
-
 export default defineEventHandler(async (event) => {
   const { method } = event.node.req
   const headers = getRequestHeaders(event)
   const url = getRequestURL(event)
+  const config = useRuntimeConfig()
+  
+  const apiOrigin = config.public.API_ORIGIN
   const pathname = url.pathname.replace(/^\/api/, '')
 
-  const targetUrl = API_ORIGIN + pathname + (url.search || '')
+  const targetUrl = apiOrigin + pathname + (url.search || '')
 
   const verificationId = headers['verification-id'] as string | undefined
   let bearer = ''
diff --git a/server/api/v1/authentication/login.post.ts b/server/api/v1/authentication/login.post.ts
index 8a096ab5..758c7925 100644
--- a/server/api/v1/authentication/login.post.ts
+++ b/server/api/v1/authentication/login.post.ts
@@ -1,4 +1,3 @@
-import { useRuntimeConfig } from '#imports'
 import { getRequestURL, readBody, setCookie } from 'h3'
 
 export default defineEventHandler(async (event) => {
@@ -6,8 +5,7 @@ export default defineEventHandler(async (event) => {
   const url = getRequestURL(event)
   const config = useRuntimeConfig()
 
-  const apiOrigin = config.API_ORIGIN
-
+  const apiOrigin = config.public.API_ORIGIN
   const externalUrl = apiOrigin + url.pathname.replace(/^\/api/, '') + url.search
 
   const resp = await fetch(externalUrl, {