From 9f950d552d005a3eff73a9489705512d6462b732 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Mon, 29 Sep 2025 10:08:56 +0700
Subject: [PATCH] feat(medicine): integrate medicine api

---
 .../app/medicine-group/entry-form.vue         |   4 +-
 app/components/content/device/entry.vue       |  62 ----
 app/components/content/device/list.vue        |  65 ----
 app/components/content/material/entry.vue     |  34 ---
 app/components/content/material/list.vue      |  65 ----
 app/components/content/medicine/list.vue      | 286 +++++++-----------
 6 files changed, 104 insertions(+), 412 deletions(-)
 delete mode 100644 app/components/content/device/entry.vue
 delete mode 100644 app/components/content/device/list.vue
 delete mode 100644 app/components/content/material/entry.vue
 delete mode 100644 app/components/content/material/list.vue

diff --git a/app/components/app/medicine-group/entry-form.vue b/app/components/app/medicine-group/entry-form.vue
index 5474d364..04478cd2 100644
--- a/app/components/app/medicine-group/entry-form.vue
+++ b/app/components/app/medicine-group/entry-form.vue
@@ -8,7 +8,7 @@ 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'
+import { type BaseFormData } from '~/schemas/base.schema'
 
 // Helpers
 import type z from 'zod'
@@ -26,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: MedicineBaseFormData, resetForm: () => void]
+  submit: [values: BaseFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 
diff --git a/app/components/content/device/entry.vue b/app/components/content/device/entry.vue
deleted file mode 100644
index 79a5b022..00000000
--- a/app/components/content/device/entry.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import { z, ZodError } from 'zod'
-import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
-
-const errors = ref({})
-const data = ref({
-  code: '',
-  name: '',
-  type: '',
-})
-
-const schema = z.object({
-  code: z.string().min(1, 'Code must be at least 1 characters long'),
-  name: z.string().min(1, 'Name must be at least 1 characters long'),
-  type: z.string(),
-})
-
-function onClick(type: string) {
-  if (type === 'cancel') {
-    navigateTo('/tools-equipment-src/device')
-  } else if (type === 'draft') {
-    // do something
-  } else if (type === 'submit') {
-    // do something
-    const input = data.value
-    console.log(input)
-    const errorsParsed: any = {}
-    try {
-      const result = schema.safeParse(input)
-      if (!result.success) {
-        // You can handle the error here, e.g. show a message
-        const errorsCaptures = result?.error?.errors || []
-        const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
-        errorsCaptures.forEach((value: any) => {
-          const keyName = value?.path?.length > 0 ? value.path[0] : 'key'
-          errorsParsed[keyName as string] = value.message || ''
-        })
-        console.log(errorMessage)
-      }
-    } catch (e) {
-      if (e instanceof ZodError) {
-        const jsonError = e.flatten()
-        console.log(JSON.stringify(jsonError, null, 2))
-      }
-    }
-    setTimeout(() => {
-      errors.value = errorsParsed
-    }, 0)
-  }
-}
-</script>
-
-<template>
-  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-    <Icon name="i-lucide-paint-bucket" class="me-2" />
-    <span class="font-semibold">Tambah</span> Alat Kesehatan
-  </div>
-  <AppDeviceEntryForm v-model="data" :errors="errors" />
-  <div class="my-2 flex justify-end py-2">
-    <Action @click="onClick" />
-  </div>
-</template>
diff --git a/app/components/content/device/list.vue b/app/components/content/device/list.vue
deleted file mode 100644
index 8c7bd672..00000000
--- a/app/components/content/device/list.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-
-const data = ref([])
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const headerPrep: HeaderPrep = {
-  title: 'Alat Kesehatan',
-  icon: 'i-lucide-paint-bucket',
-  addNav: {
-    label: 'Tambah',
-    onClick: () => navigateTo('/tools-equipment-src/device/add'),
-  },
-}
-
-async function getMaterialList() {
-  isLoading.dataListLoading = true
-
-  const resp = await xfetch('/api/v1/device')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-
-  isLoading.dataListLoading = false
-}
-
-onMounted(() => {
-  getMaterialList()
-})
-
-provide('rec_id', recId)
-provide('rec_action', recAction)
-provide('rec_item', recItem)
-provide('table_data_loader', isLoading)
-</script>
-
-<template>
-  <div class="rounded-md border p-4">
-    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-    <div class="rounded-md border p-4">
-      <AppMaterialList v-if="!isLoading.dataListLoading" :data="data" />
-    </div>
-  </div>
-</template>
diff --git a/app/components/content/material/entry.vue b/app/components/content/material/entry.vue
deleted file mode 100644
index 3fa3bfd2..00000000
--- a/app/components/content/material/entry.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-// types
-import type { MaterialFormData } from '~/schemas/material.schema'
-import { MaterialSchema } from '~/schemas/material.schema'
-
-const isLoading = ref(false)
-const uoms = [
-  { value: 'uom-1', label: 'Satuan 1' },
-  { value: 'uom-2', label: 'Satuan 2' },
-  { value: 'uom-3', label: 'Satuan 3' },
-]
-const items = [
-  { value: 'item-1', label: 'Item 1' },
-  { value: 'item-2', label: 'Item 2' },
-  { value: 'item-3', label: 'Item 3' },
-]
-
-function onBack() {
-  navigateTo('/tools-equipment-src/equipment')
-}
-
-async function onSubmit(data: MaterialFormData) {
-  console.log(data)
-}
-</script>
-
-<template>
-  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-    <Icon name="i-lucide-panel-bottom" class="me-2" />
-    <span class="font-semibold">Tambah</span> Perlengkapan (BMHP)
-  </div>
-  <AppMaterialEntryForm :is-loading="isLoading" :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onBack"
-    @submit="onSubmit" />
-</template>
diff --git a/app/components/content/material/list.vue b/app/components/content/material/list.vue
deleted file mode 100644
index fa719f46..00000000
--- a/app/components/content/material/list.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-
-const data = ref([])
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const headerPrep: HeaderPrep = {
-  title: 'Perlengkapan (BMHP)',
-  icon: 'i-lucide-panel-bottom',
-  addNav: {
-    label: 'Tambah',
-    onClick: () => navigateTo('/tools-equipment-src/equipment/add'),
-  },
-}
-
-async function getMaterialList() {
-  isLoading.dataListLoading = true
-
-  // const resp = await xfetch('/api/v1/material')
-  // if (resp.success) {
-  //   data.value = (resp.body as Record<string, any>).data
-  // }
-
-  isLoading.dataListLoading = false
-}
-
-onMounted(() => {
-  getMaterialList()
-})
-
-provide('rec_id', recId)
-provide('rec_action', recAction)
-provide('rec_item', recItem)
-provide('table_data_loader', isLoading)
-</script>
-
-<template>
-  <div class="rounded-md border p-4">
-    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-    <div class="rounded-md border p-4">
-      <AppMaterialList v-if="!isLoading.dataListLoading" :data="data" />
-    </div>
-  </div>
-</template>
diff --git a/app/components/content/medicine/list.vue b/app/components/content/medicine/list.vue
index 39dd1b05..deedc7d1 100644
--- a/app/components/content/medicine/list.vue
+++ b/app/components/content/medicine/list.vue
@@ -1,74 +1,22 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-
-const data = ref([])
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
-})
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: 'Obat',
-  icon: 'i-lucide-medicine-bottle',
-  addNav: {
-    label: 'Tambah',
-    onClick: () => navigateTo('/tools-equipment-src/medicine/add'),
-  },
-}
-
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/medicine')
-  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)
-</script>
-
-<template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <!-- Table/list component here -->
-  </div>
-</template>
-<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 AppMedicineEntryForm from '~/components/app/medicine/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 { MedicineSchema, type MedicineFormData } from '~/schemas/medicine.schema'
+import type { MedicineGroup } from '~/models/medicine-group'
+import type { MedicineMethod } from '~/models/medicine-method'
+import type { Uom } from '~/models/uom'
+
+// Handlers
 import {
   recId,
   recAction,
@@ -82,9 +30,16 @@ import {
   handleActionRemove,
   handleCancelForm,
 } from '~/handlers/medicine.handler'
-import { getMedicines, getMedicineDetail } from '~/services/medicine.service'
-import AppMedicineList from '~/components/app/medicine/list.vue'
 
+// Services
+import { getMedicines, getMedicineDetail } from '~/services/medicine.service'
+import { getMedicineGroups } from '~/services/medicine-group.service'
+import { getMedicineMethods } from '~/services/medicine-method.service'
+import { getUoms } from '~/services/uom.service'
+
+const medicineGroups = ref<{ value: string; label: string }[]>([])
+const medicineMethods = ref<{ value: string; label: string }[]>([])
+const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -132,25 +87,54 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+const getCurrentMedicineDetail = async (id: number | string) => {
+  const result = await getMedicineDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+const getMedicineGroupList = async () => {
+  const result = await getMedicineGroups()
+  if (result.success) {
+    const currentMedicineGroups = result.body?.data || []
+    medicineGroups.value = currentMedicineGroups.map((medicineGroup: MedicineGroup) => ({
+      value: medicineGroup.code,
+      label: medicineGroup.name,
+    }))
+  }
+}
+
+const getMedicineMethodList = async () => {
+  const result = await getMedicineMethods()
+  if (result.success) {
+    const currentMedicineMethods = result.body?.data || []
+    medicineMethods.value = currentMedicineMethods.map((medicineMethod: MedicineMethod) => ({
+      value: medicineMethod.code,
+      label: medicineMethod.name,
+    }))
+  }
+}
+
+const getUomList = async () => {
+  const result = await getUoms()
+  if (result.success) {
+    const currentUoms = result.body?.data || []
+    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
+  }
+}
+
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getMedicineDetail(recId.value).then(result => {
-        if (result.success) {
-          recItem.value = result.body?.data || {}
-          isFormEntryDialogOpen.value = true
-        }
-      })
+      getCurrentMedicineDetail(recId.value)
       title.value = 'Detail Obat'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getMedicineDetail(recId.value).then(result => {
-        if (result.success) {
-          recItem.value = result.body?.data || {}
-          isFormEntryDialogOpen.value = true
-        }
-      })
+      getCurrentMedicineDetail(recId.value)
       title.value = 'Edit Obat'
       isReadonly.value = false
       break
@@ -161,117 +145,51 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
+  await getMedicineGroupList()
+  await getMedicineMethodList()
+  await getUomList()
   await getMedicineList()
 })
 </script>
-<template>
-  <div class="p-4">
-    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
-    <div class="rounded-md border p-4">
-      <AppMedicineList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    </div>
 
-    <Dialog
-      v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Obat'"
-      size="lg"
-      prevent-outside
-    >
-      <AppMedicineEntryForm
-        :model-value="recItem"
-        :is-loading="isProcessing"
-        :is-readonly="isReadonly"
-        @submit="
-          (values, resetForm) => {
-            if (recId > 0) {
-              handleActionEdit(recId, values, getMedicineList, resetForm, toast)
-              return
-            }
-            handleActionSave(values, getMedicineList, resetForm, toast)
+<template>
+  <!-- <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" /> -->
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppMedicineList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Obat'" size="lg" prevent-outside>
+    <AppMedicineEntryForm
+      :schema="MedicineSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MedicineFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMedicineList, resetForm, toast)
+            return
           }
-        "
-        @cancel="handleCancelForm"
-      />
-    </Dialog>
+          handleActionSave(values, getMedicineList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
 
-    <!-- Record Confirmation Modal -->
-    <RecordConfirmation
-      v-model:open="isRecordConfirmationOpen"
-      action="delete"
-      :record="recItem"
-      @confirm="() => handleActionRemove(recId, getMedicineList, 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>
-<script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-
-const data = ref([])
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
-})
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: 'Obat',
-  icon: 'i-lucide-medicine-bottle',
-  addNav: {
-    label: 'Tambah',
-    onClick: () => navigateTo('/tools-equipment-src/medicine/add'),
-  },
-}
-
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/medicine')
-  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)
-</script>
-
-<template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppMedicineList :data="data" />
-  </div>
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMedicineList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>