From e78521793b49419e4d1ffd97db44f62c0ada1489 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 26 Sep 2025 11:23:05 +0700
Subject: [PATCH 1/9] feat(medicine-method): integrate + refactor entry

---
 .../app/medicine-method/entry-form.vue        | 107 +++++++---
 .../content/medicine-method/list.vue          | 182 +++++++++++++-----
 2 files changed, 211 insertions(+), 78 deletions(-)

diff --git a/app/components/app/medicine-method/entry-form.vue b/app/components/app/medicine-method/entry-form.vue
index e4f0b60a..043b1e4c 100644
--- a/app/components/app/medicine-method/entry-form.vue
+++ b/app/components/app/medicine-method/entry-form.vue
@@ -1,37 +1,90 @@
+
 <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'
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+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'])
+interface Props {
+  schema?: z.ZodSchema<any>
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+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: any, 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" class="input input-bordered w-full" />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" class="input input-bordered w-full" />
+        </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/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index 43d7a03f..46ce2680 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -1,74 +1,154 @@
+
 <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'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import { getMedicineMethods } from '~/services/medicine-method.service'
+import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
+import AppMedicineMethodList from '~/components/app/medicine-method/list.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import { toast } from '~/components/pub/ui/toast'
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-method.handler'
+import { getMedicineMethods, getMedicineMethodDetail } from '~/services/medicine-method.service'
 
-const data = ref([])
-const entry = ref<any>({})
+const title = ref('')
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
+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 || {} }
   },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
+  entityName: 'medicine-method',
 })
 
-const isOpen = ref(false)
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
+const headerPrep: HeaderPrep = {
   title: 'Metode Pemberian',
   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)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMedicineMethodDetail(recId.value).then(result => {
+        if (result.success) {
+          recItem.value = result.body?.data || {}
+          isFormEntryDialogOpen.value = true
+        }
+      })
+      title.value = 'Detail Metode Pemberian'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMedicineMethodDetail(recId.value).then(result => {
+        if (result.success) {
+          recItem.value = result.body?.data || {}
+          isFormEntryDialogOpen.value = true
+        }
+      })
+      title.value = 'Edit Metode Pemberian'
+      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 Pemberian'"
+      size="lg"
+      prevent-outside
+    >
+      <AppMedicineMethodEntryForm
+        :model-value="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: 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>

From 457b927c4fd1e818eace02016c25e6cb052a47e9 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 26 Sep 2025 12:37:47 +0700
Subject: [PATCH 2/9] chore: restucture list and entry form

---
 app/components/app/equipment/entry-form.vue      | 16 +++++++++-------
 app/components/app/tools/entry-form.vue          | 16 +++++++++-------
 app/components/content/employee/entry.vue        |  2 +-
 app/components/content/equipment/list.vue        |  9 +++++----
 app/components/content/material/entry.vue        |  4 ++--
 app/components/content/medicine-method/list.vue  | 14 ++++++++++++--
 .../content/specialist-intern/entry.vue          |  2 +-
 app/components/content/tools/list.vue            |  9 +++++----
 app/models/medicine.ts                           |  5 +++++
 app/schemas/{device.ts => device.schema.ts}      |  0
 app/schemas/{material.ts => material.schema.ts}  |  0
 app/schemas/medicine.schema.ts                   | 12 ++++++++++++
 12 files changed, 61 insertions(+), 28 deletions(-)
 rename app/schemas/{device.ts => device.schema.ts} (100%)
 rename app/schemas/{material.ts => material.schema.ts} (100%)
 create mode 100644 app/schemas/medicine.schema.ts

diff --git a/app/components/app/equipment/entry-form.vue b/app/components/app/equipment/entry-form.vue
index bb2b0545..5820a495 100644
--- a/app/components/app/equipment/entry-form.vue
+++ b/app/components/app/equipment/entry-form.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
-// types
-import type z from 'zod'
-import type { MaterialFormData } from '~/schemas/material'
-// helpers
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-// components
+// 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 z from 'zod'
+import type { MaterialFormData } from '~/schemas/material.schema'
+
+// Helpers
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
 interface Props {
   schema: z.ZodSchema<any>
   uoms: any[]
diff --git a/app/components/app/tools/entry-form.vue b/app/components/app/tools/entry-form.vue
index e3ae799e..ef072a75 100644
--- a/app/components/app/tools/entry-form.vue
+++ b/app/components/app/tools/entry-form.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
-// helpers
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
-// types
-import type z from 'zod'
-import type { DeviceFormData } from '~/schemas/device'
-// components
+// 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'
 
+// Helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+
+// Types
+import type z from 'zod'
+import type { DeviceFormData } from '~/schemas/device.schema'
+
 interface Props {
   schema: z.ZodSchema<any>
   uoms: any[]
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 f1139074..9f3adb2b 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -1,16 +1,17 @@
 <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'
 
-// helpers
+// 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 { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
 import type { Uom } from '~/models/uom'
 
 // Handlers
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-method/list.vue b/app/components/content/medicine-method/list.vue
index 46ce2680..c4c16450 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -1,13 +1,21 @@
 
 <script setup lang="ts">
-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 AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
 import AppMedicineMethodList from '~/components/app/medicine-method/list.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 { MedicineBaseSchema, type MedicineBaseFormData } from '~/schemas/medicine.schema'
+
+// Handlers
 import {
   recId,
   recAction,
@@ -21,6 +29,8 @@ import {
   handleActionRemove,
   handleCancelForm,
 } from '~/handlers/medicine-method.handler'
+
+// Services
 import { getMedicineMethods, getMedicineMethodDetail } from '~/services/medicine-method.service'
 
 const title = ref('')
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 89c379d5..b6362b72 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -1,16 +1,17 @@
 <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 AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
-// helpers
+// 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 { DeviceSchema, type DeviceFormData } from '~/schemas/device.schema'
 import type { Uom } from '~/models/uom'
 
 // Handlers
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/schemas/device.ts b/app/schemas/device.schema.ts
similarity index 100%
rename from app/schemas/device.ts
rename to app/schemas/device.schema.ts
diff --git a/app/schemas/material.ts b/app/schemas/material.schema.ts
similarity index 100%
rename from app/schemas/material.ts
rename to app/schemas/material.schema.ts
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 }

From a6122b9d39a0b64ae12e6cca3dcf59c0237b9311 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 26 Sep 2025 12:52:23 +0700
Subject: [PATCH 3/9] feat(medicine-method): refactor + integrate

---
 app/components/app/equipment/entry-form.vue    |  2 +-
 .../app/medicine-method/entry-form.vue         | 18 ++++++++++++------
 app/components/app/tools/entry-form.vue        |  8 ++++----
 .../content/medicine-method/list.vue           | 16 ++++++++--------
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/app/components/app/equipment/entry-form.vue b/app/components/app/equipment/entry-form.vue
index 5820a495..3f3232ee 100644
--- a/app/components/app/equipment/entry-form.vue
+++ b/app/components/app/equipment/entry-form.vue
@@ -6,10 +6,10 @@ 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 z from 'zod'
 import type { MaterialFormData } from '~/schemas/material.schema'
 
 // Helpers
+import type z from 'zod'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 
diff --git a/app/components/app/medicine-method/entry-form.vue b/app/components/app/medicine-method/entry-form.vue
index 043b1e4c..b2fbdc94 100644
--- a/app/components/app/medicine-method/entry-form.vue
+++ b/app/components/app/medicine-method/entry-form.vue
@@ -1,14 +1,20 @@
 
 <script setup lang="ts">
-import type z from 'zod'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
+// 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 { MedicineBaseFormData } from '~/schemas/medicine.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
@@ -20,7 +26,7 @@ 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: any, resetForm: () => void]
+  submit: [values: MedicineBaseFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 
@@ -64,13 +70,13 @@ function onCancelForm() {
       <Cell>
         <Label height="">Kode</Label>
         <Field :errMessage="errors.code">
-          <input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" class="input input-bordered w-full" />
+          <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" class="input input-bordered w-full" />
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
         </Field>
       </Cell>
     </Block>
diff --git a/app/components/app/tools/entry-form.vue b/app/components/app/tools/entry-form.vue
index ef072a75..98e0414e 100644
--- a/app/components/app/tools/entry-form.vue
+++ b/app/components/app/tools/entry-form.vue
@@ -5,14 +5,14 @@ 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.schema'
-
 interface Props {
   schema: z.ZodSchema<any>
   uoms: any[]
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index c4c16450..fd66d8ea 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
@@ -84,23 +83,23 @@ provide('table_data_loader', isLoading)
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getMedicineMethodDetail(recId.value).then(result => {
+      getMedicineMethodDetail(recId.value).then((result) => {
         if (result.success) {
           recItem.value = result.body?.data || {}
           isFormEntryDialogOpen.value = true
         }
       })
-      title.value = 'Detail Metode Pemberian'
+      title.value = 'Detail Metode Obat'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getMedicineMethodDetail(recId.value).then(result => {
+      getMedicineMethodDetail(recId.value).then((result) => {
         if (result.success) {
           recItem.value = result.body?.data || {}
           isFormEntryDialogOpen.value = true
         }
       })
-      title.value = 'Edit Metode Pemberian'
+      title.value = 'Edit Metode Obat'
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -123,16 +122,17 @@ onMounted(async () => {
 
     <Dialog
       v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Metode Pemberian'"
+      :title="!!recItem ? title : 'Tambah Metode Obat'"
       size="lg"
       prevent-outside
     >
       <AppMedicineMethodEntryForm
-        :model-value="recItem"
+        :schema="MedicineBaseSchema"
+        :values="recItem"
         :is-loading="isProcessing"
         :is-readonly="isReadonly"
         @submit="
-          (values: Record<string, any>, resetForm: () => void) => {
+          (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
             if (recId > 0) {
               handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
               return

From 539629f9a85698cd92e947030e62ff94f26403eb Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 26 Sep 2025 13:02:08 +0700
Subject: [PATCH 4/9] feat(medicine-group): refactor + integrate

---
 app/components/app/equipment/entry-form.vue   |   2 +-
 .../app/medicine-group/entry-form.vue         | 115 +++++++---
 app/components/app/tools/entry-form.vue       |   2 +-
 app/components/content/equipment/list.vue     |  38 ++--
 .../content/medicine-group/list.vue           | 196 +++++++++++++-----
 .../content/medicine-method/list.vue          |  25 ++-
 app/components/content/tools/list.vue         |  36 ++--
 7 files changed, 280 insertions(+), 134 deletions(-)

diff --git a/app/components/app/equipment/entry-form.vue b/app/components/app/equipment/entry-form.vue
index 3f3232ee..c15fa156 100644
--- a/app/components/app/equipment/entry-form.vue
+++ b/app/components/app/equipment/entry-form.vue
@@ -75,7 +75,7 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-equipment">
+  <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>
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/tools/entry-form.vue b/app/components/app/tools/entry-form.vue
index 98e0414e..f888c518 100644
--- a/app/components/app/tools/entry-form.vue
+++ b/app/components/app/tools/entry-form.vue
@@ -73,7 +73,7 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-tools">
+  <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>
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 9f3adb2b..2a5b0cab 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -36,23 +36,6 @@ import { getSourceUoms } from '~/services/uom.service'
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
 
-const getEquipmentDetail = async (id: number | string) => {
-  const result = await getSourceMaterialDetail(id)
-  if (result.success) {
-    const currentMaterial = result.body?.data || {}
-    recItem.value = currentMaterial
-    isFormEntryDialogOpen.value = true
-  }
-}
-
-const getUomList = async () => {
-  const result = await getSourceUoms()
-  if (result.success) {
-    const currentUoms = result.body?.data || []
-    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
-  }
-}
-
 const {
   data,
   isLoading,
@@ -104,16 +87,33 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+const getCurrentMaterialDetail = async (id: number | string) => {
+  const result = await getSourceMaterialDetail(id)
+  if (result.success) {
+    const currentMaterial = result.body?.data || {}
+    recItem.value = currentMaterial
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+const getUomList = async () => {
+  const result = await getSourceUoms()
+  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:
-      getEquipmentDetail(recId.value)
+      getCurrentMaterialDetail(recId.value)
       title.value = 'Detail Perlengkapan'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getEquipmentDetail(recId.value)
+      getCurrentMaterialDetail(recId.value)
       title.value = 'Edit Perlengkapan'
       isReadonly.value = false
       break
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 93afabff..d437b0c5 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -1,75 +1,163 @@
 <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 AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
+import AppMedicineMethodList from '~/components/app/medicine-method/list.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-method.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-method',
 })
 
-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 currentMaterial = result.body?.data || {}
+    recItem.value = currentMaterial
+    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 Metode Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Edit Metode 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">
+      <AppMedicineMethodList :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 Metode 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 fd66d8ea..9a400c05 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -51,7 +51,7 @@ const {
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Metode Pemberian',
+  title: 'Metode Obat',
   icon: 'i-lucide-medicine-bottle',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
@@ -79,26 +79,25 @@ 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 currentMaterial = result.body?.data || {}
+    recItem.value = currentMaterial
+    isFormEntryDialogOpen.value = true
+  }
+}
+
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getMedicineMethodDetail(recId.value).then((result) => {
-        if (result.success) {
-          recItem.value = result.body?.data || {}
-          isFormEntryDialogOpen.value = true
-        }
-      })
+      getCurrentMedicineMethodDetail(recId.value)
       title.value = 'Detail Metode Obat'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getMedicineMethodDetail(recId.value).then((result) => {
-        if (result.success) {
-          recItem.value = result.body?.data || {}
-          isFormEntryDialogOpen.value = true
-        }
-      })
+      getCurrentMedicineMethodDetail(recId.value)
       title.value = 'Edit Metode Obat'
       isReadonly.value = false
       break
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index b6362b72..334a927a 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -36,22 +36,6 @@ import { getSourceUoms } from '~/services/uom.service'
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
 
-const getToolsDetail = async (id: number | string) => {
-  const result = await getSourceDeviceDetail(id)
-  if (result.success) {
-    const currentDevice = result.body?.data || {}
-    recItem.value = currentDevice
-  }
-}
-
-const getUomList = async () => {
-  const result = await getSourceUoms()
-  if (result.success) {
-    const currentUoms = result.body?.data || []
-    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
-  }
-}
-
 const {
   data,
   isLoading,
@@ -103,17 +87,33 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+const getCurrentToolsDetail = async (id: number | string) => {
+  const result = await getSourceDeviceDetail(id)
+  if (result.success) {
+    const currentDevice = result.body?.data || {}
+    recItem.value = currentDevice
+  }
+}
+
+const getUomList = async () => {
+  const result = await getSourceUoms()
+  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, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getToolsDetail(recId.value)
+      getCurrentToolsDetail(recId.value)
       title.value = 'Detail Peralatan'
       isReadonly.value = true
       isFormEntryDialogOpen.value = true
       break
     case ActionEvents.showEdit:
-      getToolsDetail(recId.value)
+      getCurrentToolsDetail(recId.value)
       title.value = 'Edit Peralatan'
       isReadonly.value = false
       isFormEntryDialogOpen.value = true

From 8d2d1541417634c71d182a1e47df4ca18f488d5f Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 26 Sep 2025 13:12:48 +0700
Subject: [PATCH 5/9] feat(medicine-group): refactor list

---
 app/components/app/equipment/list.vue         |  1 -
 app/components/app/medicine-group/list.vue    | 36 +++++++++++++------
 app/components/app/medicine-method/list.vue   | 36 +++++++++++++------
 app/components/app/tools/list.vue             | 10 ++++--
 .../content/medicine-group/list.vue           | 13 ++++---
 .../content/medicine-method/list.vue          |  1 -
 6 files changed, 65 insertions(+), 32 deletions(-)

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/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-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/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/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index d437b0c5..34e8d628 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -2,8 +2,7 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
-import AppMedicineMethodList from '~/components/app/medicine-method/list.vue'
+import AppMedicineGroupEntryForm from '~/components/app/medicine-group/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
 // Helpers
@@ -27,7 +26,7 @@ import {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} from '~/handlers/medicine-method.handler'
+} from '~/handlers/medicine-group.handler'
 
 // Services
 import { getMedicineGroups, getMedicineGroupDetail } from '~/services/medicine-group.service'
@@ -47,7 +46,7 @@ const {
     const result = await getMedicineGroups({ search, page })
     return { success: result.success || false, body: result.body || {} }
   },
-  entityName: 'medicine-method',
+  entityName: 'medicine-group',
 })
 
 const headerPrep: HeaderPrep = {
@@ -93,12 +92,12 @@ watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
       getCurrentMedicineGroupDetail(recId.value)
-      title.value = 'Detail Metode Obat'
+      title.value = 'Detail Kelompok Obat'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
       getCurrentMedicineGroupDetail(recId.value)
-      title.value = 'Edit Metode Obat'
+      title.value = 'Edit Kelompok Obat'
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -121,7 +120,7 @@ onMounted(async () => {
 
     <Dialog
       v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Metode Obat'"
+      :title="!!recItem ? title : 'Tambah Kelompok Obat'"
       size="lg"
       prevent-outside
     >
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index 9a400c05..fee2e16f 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -3,7 +3,6 @@
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
-import AppMedicineMethodList from '~/components/app/medicine-method/list.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
 // Helpers

From 34a4fc11d0cfd5eacb92a67059f1d43356300fc3 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 26 Sep 2025 13:18:32 +0700
Subject: [PATCH 6/9] feat(menu): change menu

---
 public/side-menu-items/sys.json | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index d89634e4..de88cf31 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -287,11 +287,6 @@
           }
         ]
       },
-      {
-        "title": "Item & Item Price",
-        "icon": "i-lucide-shopping-basket",
-        "link": "/item-src/item"
-      },
       {
         "title": "Organisasi",
         "icon": "i-lucide-network",
@@ -322,6 +317,22 @@
             "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"
+          }
+        ]
       }
     ]
   }

From 5d41e4e60d8234c41c5d882009db83e0c94fa4af Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 26 Sep 2025 14:03:44 +0700
Subject: [PATCH 7/9] chore: modify service and hanler

---
 app/components/content/equipment/list.vue | 10 ++--
 app/components/content/tools/list.vue     | 10 ++--
 app/handlers/device.handler.ts            |  8 +--
 app/handlers/material.handler.ts          |  8 +--
 app/services/device.service.ts            | 14 ++---
 app/services/material.service.ts          | 28 +++++-----
 app/services/medicine-group.service.ts    | 18 +++----
 app/services/medicine-method.service.ts   | 18 +++----
 app/services/uom.service.ts               | 64 +++++++++++++++++++++--
 9 files changed, 116 insertions(+), 62 deletions(-)

diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 2a5b0cab..497b9bd1 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -30,8 +30,8 @@ import {
 } from '~/handlers/material.handler'
 
 // Services
-import { getSourceMaterials, getSourceMaterialDetail } from '~/services/material.service'
-import { getSourceUoms } from '~/services/uom.service'
+import { getMaterials, getMaterialDetail } from '~/services/material.service'
+import { getUoms } from '~/services/uom.service'
 
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
@@ -46,7 +46,7 @@ const {
   fetchData: getEquipmentList,
 } = usePaginatedList({
   fetchFn: async ({ page }) => {
-    const result = await getSourceMaterials({ search: searchInput.value, page })
+    const result = await getMaterials({ search: searchInput.value, page })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'equipment',
@@ -88,7 +88,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentMaterialDetail = async (id: number | string) => {
-  const result = await getSourceMaterialDetail(id)
+  const result = await getMaterialDetail(id)
   if (result.success) {
     const currentMaterial = result.body?.data || {}
     recItem.value = currentMaterial
@@ -97,7 +97,7 @@ const getCurrentMaterialDetail = async (id: number | string) => {
 }
 
 const getUomList = async () => {
-  const result = await getSourceUoms()
+  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 }))
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index 334a927a..31cdc2cb 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -30,8 +30,8 @@ import {
 } from '~/handlers/device.handler'
 
 // Services
-import { getSourceDevices, getSourceDeviceDetail } from '~/services/device.service'
-import { getSourceUoms } from '~/services/uom.service'
+import { getDevices, getDeviceDetail } from '~/services/device.service'
+import { getUoms } from '~/services/uom.service'
 
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
@@ -46,7 +46,7 @@ const {
   fetchData: getToolsList,
 } = usePaginatedList({
   fetchFn: async ({ page }) => {
-    const result = await getSourceDevices({ search: searchInput.value, page })
+    const result = await getDevices({ search: searchInput.value, page })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'device',
@@ -88,7 +88,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentToolsDetail = async (id: number | string) => {
-  const result = await getSourceDeviceDetail(id)
+  const result = await getDeviceDetail(id)
   if (result.success) {
     const currentDevice = result.body?.data || {}
     recItem.value = currentDevice
@@ -96,7 +96,7 @@ const getCurrentToolsDetail = async (id: number | string) => {
 }
 
 const getUomList = async () => {
-  const result = await getSourceUoms()
+  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 }))
diff --git a/app/handlers/device.handler.ts b/app/handlers/device.handler.ts
index f64ca226..e269f61b 100644
--- a/app/handlers/device.handler.ts
+++ b/app/handlers/device.handler.ts
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import { type ToastFn, handleAsyncAction } from '~/handlers/_handler'
 
 // Services
-import { postSourceDevice, patchSourceDevice, removeSourceDevice } from '~/services/device.service'
+import { postDevice, patchDevice, removeDevice } from '~/services/device.service'
 
 const recId = ref<number>(0)
 const recAction = ref<string>('')
@@ -28,7 +28,7 @@ export async function handleActionSave(
 ) {
   isProcessing.value = true;
   await handleAsyncAction<[any], any>({
-    action: postSourceDevice,
+    action: postDevice,
     args: [values],
     toast,
     successMessage: 'Data berhasil disimpan',
@@ -53,7 +53,7 @@ export async function handleActionEdit(
 ) {
   isProcessing.value = true;
   await handleAsyncAction<[number | string, any], any>({
-    action: patchSourceDevice,
+    action: patchDevice,
     args: [id, values],
     toast,
     successMessage: 'Data berhasil diubah',
@@ -76,7 +76,7 @@ export async function handleActionRemove(
 ) {
   isProcessing.value = true;
   await handleAsyncAction<[number | string], any>({
-    action: removeSourceDevice,
+    action: removeDevice,
     args: [id],
     toast,
     successMessage: 'Data berhasil dihapus',
diff --git a/app/handlers/material.handler.ts b/app/handlers/material.handler.ts
index e09ae59e..d61e5f01 100644
--- a/app/handlers/material.handler.ts
+++ b/app/handlers/material.handler.ts
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import { type ToastFn, handleAsyncAction } from '~/handlers/_handler'
 
 // Services
-import { postSourceMaterial, patchSourceMaterial, removeSourceMaterial } from '~/services/material.service'
+import { postMaterial, patchMaterial, removeMaterial } from '~/services/material.service'
 
 const recId = ref<number>(0)
 const recAction = ref<string>('')
@@ -23,7 +23,7 @@ function onResetState() {
 export async function handleActionSave(values: any, refresh: () => void, reset: () => void, toast: ToastFn) {
   isProcessing.value = true
   await handleAsyncAction<[any], any>({
-    action: postSourceMaterial,
+    action: postMaterial,
     args: [values],
     toast,
     successMessage: 'Data berhasil disimpan',
@@ -48,7 +48,7 @@ export async function handleActionEdit(
 ) {
   isProcessing.value = true
   await handleAsyncAction<[number | string, any], any>({
-    action: patchSourceMaterial,
+    action: patchMaterial,
     args: [id, values],
     toast,
     successMessage: 'Data berhasil diubah',
@@ -67,7 +67,7 @@ export async function handleActionEdit(
 export async function handleActionRemove(id: number | string, refresh: () => void, toast: ToastFn) {
   isProcessing.value = true
   await handleAsyncAction<[number | string], any>({
-    action: removeSourceMaterial,
+    action: removeMaterial,
     args: [id],
     toast,
     successMessage: 'Data berhasil dihapus',
diff --git a/app/services/device.service.ts b/app/services/device.service.ts
index b979ce87..44f7d1b9 100644
--- a/app/services/device.service.ts
+++ b/app/services/device.service.ts
@@ -2,7 +2,7 @@ import { xfetch } from '~/composables/useXfetch'
 
 const mainUrl = '/api/v1/device'
 
-export async function getSourceDevices(params: any = null) {
+export async function getDevices(params: any = null) {
   try {
     let url = mainUrl
     if (params && typeof params === 'object' && Object.keys(params).length > 0) {
@@ -21,12 +21,12 @@ export async function getSourceDevices(params: any = null) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error fetching source devices:', error)
-    throw new Error('Failed to fetch source devices')
+    console.error('Error fetching devices:', error)
+    throw new Error('Failed to fetch devices')
   }
 }
 
-export async function getSourceDeviceDetail(id: string | number) {
+export async function getDeviceDetail(id: string | number) {
   try {
     const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
     const result: any = {}
@@ -39,7 +39,7 @@ export async function getSourceDeviceDetail(id: string | number) {
   }
 }
 
-export async function postSourceDevice(data: any) {
+export async function postDevice(data: any) {
   try {
     const resp = await xfetch(mainUrl, 'POST', data)
     const result: any = {}
@@ -52,7 +52,7 @@ export async function postSourceDevice(data: any) {
   }
 }
 
-export async function patchSourceDevice(id: string | number, data: any) {
+export async function patchDevice(id: string | number, data: any) {
   try {
     const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', data)
     const result: any = {}
@@ -65,7 +65,7 @@ export async function patchSourceDevice(id: string | number, data: any) {
   }
 }
 
-export async function removeSourceDevice(id: string | number) {
+export async function removeDevice(id: string | number) {
   try {
     const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
     const result: any = {}
diff --git a/app/services/material.service.ts b/app/services/material.service.ts
index b4723f4c..098612e0 100644
--- a/app/services/material.service.ts
+++ b/app/services/material.service.ts
@@ -2,7 +2,7 @@ import { xfetch } from '~/composables/useXfetch'
 
 const mainUrl = '/api/v1/material'
 
-export async function getSourceMaterials(params: any = null) {
+export async function getMaterials(params: any = null) {
   try {
     let url = mainUrl
     if (params && typeof params === 'object' && Object.keys(params).length > 0) {
@@ -21,12 +21,12 @@ export async function getSourceMaterials(params: any = null) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error fetching source materials:', error)
-    throw new Error('Failed to fetch source materials')
+    console.error('Error fetching materials:', error)
+    throw new Error('Failed to fetch materials')
   }
 }
 
-export async function getSourceMaterialDetail(id: number | string) {
+export async function getMaterialDetail(id: number | string) {
   try {
     const resp = await xfetch(`${mainUrl}/${id}`, 'GET')
     const result: any = {}
@@ -34,12 +34,12 @@ export async function getSourceMaterialDetail(id: number | string) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error fetching source material detail:', error)
-    throw new Error('Failed to get source material detail')
+    console.error('Error fetching material detail:', error)
+    throw new Error('Failed to get material detail')
   }
 }
 
-export async function postSourceMaterial(record: any) {
+export async function postMaterial(record: any) {
   try {
     const resp = await xfetch(mainUrl, 'POST', record)
     const result: any = {}
@@ -47,12 +47,12 @@ export async function postSourceMaterial(record: any) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error posting source material:', error)
-    throw new Error('Failed to post source material')
+    console.error('Error posting material:', error)
+    throw new Error('Failed to post material')
   }
 }
 
-export async function patchSourceMaterial(id: number | string, record: any) {
+export async function patchMaterial(id: number | string, record: any) {
   try {
     const resp = await xfetch(`${mainUrl}/${id}`, 'PATCH', record)
     const result: any = {}
@@ -60,12 +60,12 @@ export async function patchSourceMaterial(id: number | string, record: any) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error putting source material:', error)
-    throw new Error('Failed to put source material')
+    console.error('Error putting material:', error)
+    throw new Error('Failed to put material')
   }
 }
 
-export async function removeSourceMaterial(id: number | string) {
+export async function removeMaterial(id: number | string) {
   try {
     const resp = await xfetch(`${mainUrl}/${id}`, 'DELETE')
     const result: any = {}
@@ -74,6 +74,6 @@ export async function removeSourceMaterial(id: number | string) {
     return result
   } catch (error) {
     console.error('Error deleting record:', error)
-    throw new Error('Failed to delete source material')
+    throw new Error('Failed to delete material')
   }
 }
diff --git a/app/services/medicine-group.service.ts b/app/services/medicine-group.service.ts
index ce16449b..e1f06863 100644
--- a/app/services/medicine-group.service.ts
+++ b/app/services/medicine-group.service.ts
@@ -21,8 +21,8 @@ export async function getMedicineGroups(params: any = null) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error fetching source materials:', error)
-    throw new Error('Failed to fetch source materials')
+    console.error('Error fetching medicine groups:', error)
+    throw new Error('Failed to fetch medicine groups')
   }
 }
 
@@ -34,8 +34,8 @@ export async function getMedicineGroupDetail(id: number | string) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error fetching source material detail:', error)
-    throw new Error('Failed to get source material detail')
+    console.error('Error fetching medicine group detail:', error)
+    throw new Error('Failed to get medicine group detail')
   }
 }
 
@@ -47,8 +47,8 @@ export async function postMedicineGroup(record: any) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error posting source material:', error)
-    throw new Error('Failed to post source material')
+    console.error('Error posting medicine group:', error)
+    throw new Error('Failed to post medicine group')
   }
 }
 
@@ -60,8 +60,8 @@ export async function patchMedicineGroup(id: number | string, record: any) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error putting source material:', error)
-    throw new Error('Failed to put source material')
+    console.error('Error putting medicine group:', error)
+    throw new Error('Failed to put medicine group')
   }
 }
 
@@ -74,6 +74,6 @@ export async function removeMedicineGroup(id: number | string) {
     return result
   } catch (error) {
     console.error('Error deleting record:', error)
-    throw new Error('Failed to delete source material')
+    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 319d2c85..3050671c 100644
--- a/app/services/medicine-method.service.ts
+++ b/app/services/medicine-method.service.ts
@@ -29,8 +29,8 @@ export async function getMedicineMethods(params: any = null) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error fetching source materials:', error)
-    throw new Error('Failed to fetch source materials')
+    console.error('Error fetching medicine methods:', error)
+    throw new Error('Failed to fetch medicine methods')
   }
 }
 
@@ -42,8 +42,8 @@ export async function getMedicineMethodDetail(id: number | string) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error fetching source material detail:', error)
-    throw new Error('Failed to get source material detail')
+    console.error('Error fetching medicine method detail:', error)
+    throw new Error('Failed to get medicine method detail')
   }
 }
 
@@ -55,8 +55,8 @@ export async function postMedicineMethod(record: any) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error posting source material:', error)
-    throw new Error('Failed to post source material')
+    console.error('Error posting medicine method:', error)
+    throw new Error('Failed to post medicine method')
   }
 }
 
@@ -68,8 +68,8 @@ export async function patchMedicineMethod(id: number | string, record: any) {
     result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
-    console.error('Error putting source material:', error)
-    throw new Error('Failed to put source material')
+    console.error('Error putting medicine method:', error)
+    throw new Error('Failed to put medicine method')
   }
 }
 
@@ -82,6 +82,6 @@ export async function removeMedicineMethod(id: number | string) {
     return result
   } catch (error) {
     console.error('Error deleting record:', error)
-    throw new Error('Failed to delete source material')
+    throw new Error('Failed to delete medicine method')
   }
 }
diff --git a/app/services/uom.service.ts b/app/services/uom.service.ts
index 18564f33..f7b2eec1 100644
--- a/app/services/uom.service.ts
+++ b/app/services/uom.service.ts
@@ -1,8 +1,10 @@
 import { xfetch } from '~/composables/useXfetch'
 
-export async function getSourceUoms(params: any = null) {
+const mainUrl = '/api/v1/uom'
+
+export async function getUoms(params: any = null) {
   try {
-    let url = '/api/v1/uom'
+    let url = mainUrl
     if (params && typeof params === 'object' && Object.keys(params).length > 0) {
       const searchParams = new URLSearchParams()
       for (const key in params) {
@@ -13,13 +15,65 @@ export async function getSourceUoms(params: any = null) {
       const queryString = searchParams.toString()
       if (queryString) url += `?${queryString}`
     }
-    const resp = await xfetch(url, 'GET')
+    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 source uoms:', error)
-    throw new Error('Failed to fetch source uoms')
+    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

From 867f93af31e793112adb649e63cf9ad773c1afbf Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 26 Sep 2025 15:46:22 +0700
Subject: [PATCH 8/9] feat(uom): integrate api for uom

---
 app/components/app/medicine-group/picker.vue  |   0
 app/components/app/medicine-group/search.vue  |   0
 .../app/medicine-group/status-badge.vue       |  29 ----
 app/components/app/medicine-method/picker.vue |   0
 app/components/app/medicine-method/search.vue |   0
 app/components/app/uom/entry-form.vue         |  96 +++++++++++
 app/components/app/uom/list-cfg.ts            |  46 +++++
 app/components/app/uom/list.vue               |  35 ++++
 app/components/content/equipment/list.vue     |   4 +-
 .../content/medicine-group/list.vue           |   6 +-
 .../content/medicine-method/list.vue          |   4 +-
 app/components/content/tools/list.vue         |   4 +-
 app/components/content/uom/list.vue           | 162 ++++++++++++++++++
 app/handlers/uom.handler.ts                   |  92 ++++++++++
 app/models/_model.ts                          |  21 ++-
 app/schemas/base.schema.ts                    |  12 ++
 app/schemas/uom.schema.ts                     |   4 +
 17 files changed, 469 insertions(+), 46 deletions(-)
 delete mode 100644 app/components/app/medicine-group/picker.vue
 delete mode 100644 app/components/app/medicine-group/search.vue
 delete mode 100644 app/components/app/medicine-group/status-badge.vue
 delete mode 100644 app/components/app/medicine-method/picker.vue
 delete mode 100644 app/components/app/medicine-method/search.vue
 create mode 100644 app/components/app/uom/entry-form.vue
 create mode 100644 app/components/app/uom/list-cfg.ts
 create mode 100644 app/components/app/uom/list.vue
 create mode 100644 app/components/content/uom/list.vue
 create mode 100644 app/handlers/uom.handler.ts
 create mode 100644 app/schemas/base.schema.ts
 create mode 100644 app/schemas/uom.schema.ts

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/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/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/equipment/list.vue b/app/components/content/equipment/list.vue
index 497b9bd1..40f5417b 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -90,8 +90,8 @@ provide('table_data_loader', isLoading)
 const getCurrentMaterialDetail = async (id: number | string) => {
   const result = await getMaterialDetail(id)
   if (result.success) {
-    const currentMaterial = result.body?.data || {}
-    recItem.value = currentMaterial
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
     isFormEntryDialogOpen.value = true
   }
 }
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 34e8d628..5dd89f9c 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -81,8 +81,8 @@ provide('table_data_loader', isLoading)
 const getCurrentMedicineGroupDetail = async (id: number | string) => {
   const result = await getMedicineGroupDetail(id)
   if (result.success) {
-    const currentMaterial = result.body?.data || {}
-    recItem.value = currentMaterial
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
     isFormEntryDialogOpen.value = true
   }
 }
@@ -115,7 +115,7 @@ onMounted(async () => {
   <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" />
+      <AppMedicineGroupList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
     </div>
 
     <Dialog
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index fee2e16f..49d42e42 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -81,8 +81,8 @@ provide('table_data_loader', isLoading)
 const getCurrentMedicineMethodDetail = async (id: number | string) => {
   const result = await getMedicineMethodDetail(id)
   if (result.success) {
-    const currentMaterial = result.body?.data || {}
-    recItem.value = currentMaterial
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
     isFormEntryDialogOpen.value = true
   }
 }
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index 31cdc2cb..613df671 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -90,8 +90,8 @@ provide('table_data_loader', isLoading)
 const getCurrentToolsDetail = async (id: number | string) => {
   const result = await getDeviceDetail(id)
   if (result.success) {
-    const currentDevice = result.body?.data || {}
-    recItem.value = currentDevice
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
   }
 }
 
diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
new file mode 100644
index 00000000..fee2e16f
--- /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 AppMedicineMethodEntryForm from '~/components/app/medicine-method/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 { MedicineBaseSchema, type MedicineBaseFormData } from '~/schemas/medicine.schema'
+
+// 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 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',
+    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 getCurrentMedicineMethodDetail = async (id: number | string) => {
+  const result = await getMedicineMethodDetail(id)
+  if (result.success) {
+    const currentMaterial = result.body?.data || {}
+    recItem.value = currentMaterial
+    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>
+  <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>
+
+    <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/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/models/_model.ts b/app/models/_model.ts
index 64e4a972..b5f09a71 100644
--- a/app/models/_model.ts
+++ b/app/models/_model.ts
@@ -1,15 +1,20 @@
 // Default item meta model for entities
 export interface ItemMeta {
-  id: number;
-  createdAt: string | null;
-  deletedAt: string | null;
-  updatedAt: string | null;
+  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;
+  page_number: string
+  page_size: string
+  record_totalCount: string
+  source: string
+}
+
+export interface Base {
+  name: string
+  code: string
 }
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/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 }

From ca1b0f4cb769edf2c4d3c0ba466e66011ec02e56 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 26 Sep 2025 16:04:19 +0700
Subject: [PATCH 9/9] feat(uom): crate form, list and integrate

---
 app/components/content/uom/list.vue           | 52 +++++++++----------
 .../device/add.vue => common/uom/index.vue}   | 19 ++++---
 .../tools-equipment-src/equipment/add.vue     | 41 ---------------
 3 files changed, 35 insertions(+), 77 deletions(-)
 rename app/pages/(features)/{tools-equipment-src/device/add.vue => common/uom/index.vue} (70%)
 delete mode 100644 app/pages/(features)/tools-equipment-src/equipment/add.vue

diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
index fee2e16f..bcb01444 100644
--- a/app/components/content/uom/list.vue
+++ b/app/components/content/uom/list.vue
@@ -2,7 +2,7 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
+import AppUomEntryForm from '~/components/app/uom/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
 // Helpers
@@ -11,7 +11,7 @@ import { toast } from '~/components/pub/ui/toast'
 
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
-import { MedicineBaseSchema, type MedicineBaseFormData } from '~/schemas/medicine.schema'
+import { UomSchema, type UomFormData } from '~/schemas/uom.schema'
 
 // Handlers
 import {
@@ -26,10 +26,10 @@ import {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} from '~/handlers/medicine-method.handler'
+} from '~/handlers/uom.handler'
 
 // Services
-import { getMedicineMethods, getMedicineMethodDetail } from '~/services/medicine-method.service'
+import { getUoms, getUomDetail } from '~/services/uom.service'
 
 const title = ref('')
 
@@ -40,18 +40,18 @@ const {
   searchInput,
   handlePageChange,
   handleSearch,
-  fetchData: getMedicineMethodList,
+  fetchData: getUomList,
 } = usePaginatedList({
   fetchFn: async ({ page, search }) => {
-    const result = await getMedicineMethods({ search, page })
+    const result = await getUoms({ search, page })
     return { success: result.success || false, body: result.body || {} }
   },
-  entityName: 'medicine-method',
+  entityName: 'uom',
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Metode Obat',
-  icon: 'i-lucide-medicine-bottle',
+  title: 'Uom',
+  icon: 'i-lucide-layout-dashboard',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
     minLength: 3,
@@ -78,11 +78,11 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-const getCurrentMedicineMethodDetail = async (id: number | string) => {
-  const result = await getMedicineMethodDetail(id)
+const getCurrentUomDetail = async (id: number | string) => {
+  const result = await getUomDetail(id)
   if (result.success) {
-    const currentMaterial = result.body?.data || {}
-    recItem.value = currentMaterial
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
     isFormEntryDialogOpen.value = true
   }
 }
@@ -91,13 +91,13 @@ const getCurrentMedicineMethodDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentMedicineMethodDetail(recId.value)
-      title.value = 'Detail Metode Obat'
+      getCurrentUomDetail(recId.value)
+      title.value = 'Detail Uom'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getCurrentMedicineMethodDetail(recId.value)
-      title.value = 'Edit Metode Obat'
+      getCurrentUomDetail(recId.value)
+      title.value = 'Edit Uom'
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -107,7 +107,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getMedicineMethodList()
+  await getUomList()
 })
 </script>
 
@@ -115,27 +115,27 @@ onMounted(async () => {
   <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" />
+      <AppUomList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
     </div>
 
     <Dialog
       v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Metode Obat'"
+      :title="!!recItem ? title : 'Tambah Uom'"
       size="lg"
       prevent-outside
     >
-      <AppMedicineMethodEntryForm
-        :schema="MedicineBaseSchema"
+      <AppUomEntryForm
+        :schema="UomSchema"
         :values="recItem"
         :is-loading="isProcessing"
         :is-readonly="isReadonly"
         @submit="
-          (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
+          (values: UomFormData | Record<string, any>, resetForm: () => void) => {
             if (recId > 0) {
-              handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
+              handleActionEdit(recId, values, getUomList, resetForm, toast)
               return
             }
-            handleActionSave(values, getMedicineMethodList, resetForm, toast)
+            handleActionSave(values, getUomList, resetForm, toast)
           }
         "
         @cancel="handleCancelForm"
@@ -147,7 +147,7 @@ onMounted(async () => {
       v-model:open="isRecordConfirmationOpen"
       action="delete"
       :record="recItem"
-      @confirm="() => handleActionRemove(recId, getMedicineMethodList, toast)"
+      @confirm="() => handleActionRemove(recId, getUomList, toast)"
       @cancel=""
     >
       <template #default="{ record }">
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>