From 38e40416d3122524461d96ff11bb6572c8e0e4e5 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 3 Sep 2025 20:33:19 +0700
Subject: [PATCH 01/10] =?UTF-8?q?=E2=9C=A8=20feat=20(medicine):=20add=20me?=
 =?UTF-8?q?dicine=20management=20modules?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/medicine-group/entry-form.vue         |  90 +++++++++++++
 app/components/app/medicine-group/list-cfg.ts | 114 +++++++++++++++++
 app/components/app/medicine-group/list.vue    |  19 +++
 app/components/app/medicine-group/picker.vue  |   0
 app/components/app/medicine-group/search.vue  |   0
 .../app/medicine-group/status-badge.vue       |  29 +++++
 .../app/medicine-method/entry-form.vue        |  90 +++++++++++++
 .../app/medicine-method/list-cfg.ts           | 114 +++++++++++++++++
 app/components/app/medicine-method/list.vue   |  19 +++
 app/components/app/medicine-method/picker.vue |   0
 app/components/app/medicine-method/search.vue |   0
 .../app/medicine-method/status-badge.vue      |  29 +++++
 app/components/app/medicine/entry-form.vue    |  90 +++++++++++++
 app/components/app/medicine/list-cfg.ts       | 114 +++++++++++++++++
 app/components/app/medicine/list.vue          |  19 +++
 app/components/app/medicine/picker.vue        |   0
 app/components/app/medicine/search.vue        |   0
 app/components/app/medicine/status-badge.vue  |  29 +++++
 app/components/flow/medicine-group/add.vue    |   9 ++
 app/components/flow/medicine-group/list.vue   | 121 ++++++++++++++++++
 app/components/flow/medicine-method/add.vue   |   9 ++
 app/components/flow/medicine-method/list.vue  | 121 ++++++++++++++++++
 app/components/flow/medicine/entry.vue        |   9 ++
 app/components/flow/medicine/list.vue         | 121 ++++++++++++++++++
 .../medicine-method/index.vue                 |  40 ++++++
 .../medicine-type/index.vue                   |  40 ++++++
 .../medicine/[id]/edit.vue                    |  41 ++++++
 .../tools-equipment-src/medicine/add.vue      |  41 ++++++
 .../tools-equipment-src/medicine/index.vue    |  40 ++++++
 29 files changed, 1348 insertions(+)
 create mode 100644 app/components/app/medicine-group/entry-form.vue
 create mode 100644 app/components/app/medicine-group/list-cfg.ts
 create mode 100644 app/components/app/medicine-group/list.vue
 create mode 100644 app/components/app/medicine-group/picker.vue
 create mode 100644 app/components/app/medicine-group/search.vue
 create mode 100644 app/components/app/medicine-group/status-badge.vue
 create mode 100644 app/components/app/medicine-method/entry-form.vue
 create mode 100644 app/components/app/medicine-method/list-cfg.ts
 create mode 100644 app/components/app/medicine-method/list.vue
 create mode 100644 app/components/app/medicine-method/picker.vue
 create mode 100644 app/components/app/medicine-method/search.vue
 create mode 100644 app/components/app/medicine-method/status-badge.vue
 create mode 100644 app/components/app/medicine/entry-form.vue
 create mode 100644 app/components/app/medicine/list-cfg.ts
 create mode 100644 app/components/app/medicine/list.vue
 create mode 100644 app/components/app/medicine/picker.vue
 create mode 100644 app/components/app/medicine/search.vue
 create mode 100644 app/components/app/medicine/status-badge.vue
 create mode 100644 app/components/flow/medicine-group/add.vue
 create mode 100644 app/components/flow/medicine-group/list.vue
 create mode 100644 app/components/flow/medicine-method/add.vue
 create mode 100644 app/components/flow/medicine-method/list.vue
 create mode 100644 app/components/flow/medicine/entry.vue
 create mode 100644 app/components/flow/medicine/list.vue
 create mode 100644 app/pages/(features)/tools-equipment-src/medicine-method/index.vue
 create mode 100644 app/pages/(features)/tools-equipment-src/medicine-type/index.vue
 create mode 100644 app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
 create mode 100644 app/pages/(features)/tools-equipment-src/medicine/add.vue
 create mode 100644 app/pages/(features)/tools-equipment-src/medicine/index.vue

diff --git a/app/components/app/medicine-group/entry-form.vue b/app/components/app/medicine-group/entry-form.vue
new file mode 100644
index 00000000..5aec1ba3
--- /dev/null
+++ b/app/components/app/medicine-group/entry-form.vue
@@ -0,0 +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'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="1">
+            <Label>Nama dan Gelar</Label>
+            <Field>
+              <Input v-model="data.name" type="text" name="name" default-value="dr." />
+            </Field>
+            <Field>
+              <Input type="text" name="name" />
+            </Field>
+            <Field>
+              <Input type="text" name="name" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>NIK</Label>
+            <Field>
+              <Input type="text" name="identity_number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>NO SIP</Label>
+            <Field name="sip_number">
+              <Input type="text" name="sip_no" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Telepon / HP</Label>
+            <Field name="phone">
+              <Input type="text" name="phone" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode BPJS</Label>
+            <Field>
+              <Input type="text" name="bpjs_code" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Fee Rajal</Label>
+            <Field>
+              <Input type="number" name="outPatient_rate" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Fee Ranap</Label>
+            <Field>
+              <Input type="number" name="inPatient_rate" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="3">
+            <Label>Status</Label>
+            <Field>
+              <Input type="select" name="status">
+                <option value="active">Aktif</option>
+                <option value="inactive">Tidak Aktif</option>
+              </Input>
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medicine-group/list-cfg.ts b/app/components/app/medicine-group/list-cfg.ts
new file mode 100644
index 00000000..0cff0cce
--- /dev/null
+++ b/app/components/app/medicine-group/list-cfg.ts
@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode JKN' },
+    { label: 'Nama' },
+    { label: 'No KTP' },
+    { label: 'No SIP' },
+    { label: 'No IHS' },
+    { label: 'Telpon' },
+    { label: 'Fee Ranap' },
+    { label: 'Fee Rajal' },
+    { label: 'Status' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'bpjs_code',
+  'name',
+  'identity_number',
+  'sip_no',
+  'ihs_number',
+  'phone',
+  'inPatient_itemPrice',
+  'outPatient_itemPrice',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+  status(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/medicine-group/list.vue b/app/components/app/medicine-group/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/medicine-group/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/medicine-group/picker.vue b/app/components/app/medicine-group/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/medicine-group/search.vue b/app/components/app/medicine-group/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/medicine-group/status-badge.vue b/app/components/app/medicine-group/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/medicine-group/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/medicine-method/entry-form.vue b/app/components/app/medicine-method/entry-form.vue
new file mode 100644
index 00000000..5aec1ba3
--- /dev/null
+++ b/app/components/app/medicine-method/entry-form.vue
@@ -0,0 +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'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="1">
+            <Label>Nama dan Gelar</Label>
+            <Field>
+              <Input v-model="data.name" type="text" name="name" default-value="dr." />
+            </Field>
+            <Field>
+              <Input type="text" name="name" />
+            </Field>
+            <Field>
+              <Input type="text" name="name" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>NIK</Label>
+            <Field>
+              <Input type="text" name="identity_number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>NO SIP</Label>
+            <Field name="sip_number">
+              <Input type="text" name="sip_no" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Telepon / HP</Label>
+            <Field name="phone">
+              <Input type="text" name="phone" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode BPJS</Label>
+            <Field>
+              <Input type="text" name="bpjs_code" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Fee Rajal</Label>
+            <Field>
+              <Input type="number" name="outPatient_rate" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Fee Ranap</Label>
+            <Field>
+              <Input type="number" name="inPatient_rate" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="3">
+            <Label>Status</Label>
+            <Field>
+              <Input type="select" name="status">
+                <option value="active">Aktif</option>
+                <option value="inactive">Tidak Aktif</option>
+              </Input>
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medicine-method/list-cfg.ts b/app/components/app/medicine-method/list-cfg.ts
new file mode 100644
index 00000000..0cff0cce
--- /dev/null
+++ b/app/components/app/medicine-method/list-cfg.ts
@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode JKN' },
+    { label: 'Nama' },
+    { label: 'No KTP' },
+    { label: 'No SIP' },
+    { label: 'No IHS' },
+    { label: 'Telpon' },
+    { label: 'Fee Ranap' },
+    { label: 'Fee Rajal' },
+    { label: 'Status' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'bpjs_code',
+  'name',
+  'identity_number',
+  'sip_no',
+  'ihs_number',
+  'phone',
+  'inPatient_itemPrice',
+  'outPatient_itemPrice',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+  status(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/medicine-method/list.vue b/app/components/app/medicine-method/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/medicine-method/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/medicine-method/picker.vue b/app/components/app/medicine-method/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/medicine-method/search.vue b/app/components/app/medicine-method/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/medicine-method/status-badge.vue b/app/components/app/medicine-method/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/medicine-method/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/medicine/entry-form.vue b/app/components/app/medicine/entry-form.vue
new file mode 100644
index 00000000..5aec1ba3
--- /dev/null
+++ b/app/components/app/medicine/entry-form.vue
@@ -0,0 +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'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="1">
+            <Label>Nama dan Gelar</Label>
+            <Field>
+              <Input v-model="data.name" type="text" name="name" default-value="dr." />
+            </Field>
+            <Field>
+              <Input type="text" name="name" />
+            </Field>
+            <Field>
+              <Input type="text" name="name" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>NIK</Label>
+            <Field>
+              <Input type="text" name="identity_number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>NO SIP</Label>
+            <Field name="sip_number">
+              <Input type="text" name="sip_no" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Telepon / HP</Label>
+            <Field name="phone">
+              <Input type="text" name="phone" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode BPJS</Label>
+            <Field>
+              <Input type="text" name="bpjs_code" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Fee Rajal</Label>
+            <Field>
+              <Input type="number" name="outPatient_rate" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Fee Ranap</Label>
+            <Field>
+              <Input type="number" name="inPatient_rate" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="3">
+            <Label>Status</Label>
+            <Field>
+              <Input type="select" name="status">
+                <option value="active">Aktif</option>
+                <option value="inactive">Tidak Aktif</option>
+              </Input>
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/medicine/list-cfg.ts b/app/components/app/medicine/list-cfg.ts
new file mode 100644
index 00000000..0cff0cce
--- /dev/null
+++ b/app/components/app/medicine/list-cfg.ts
@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode JKN' },
+    { label: 'Nama' },
+    { label: 'No KTP' },
+    { label: 'No SIP' },
+    { label: 'No IHS' },
+    { label: 'Telpon' },
+    { label: 'Fee Ranap' },
+    { label: 'Fee Rajal' },
+    { label: 'Status' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'bpjs_code',
+  'name',
+  'identity_number',
+  'sip_no',
+  'ihs_number',
+  'phone',
+  'inPatient_itemPrice',
+  'outPatient_itemPrice',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+  status(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: statusBadge,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/medicine/list.vue b/app/components/app/medicine/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/medicine/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/medicine/picker.vue b/app/components/app/medicine/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/medicine/search.vue b/app/components/app/medicine/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/medicine/status-badge.vue b/app/components/app/medicine/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/medicine/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/flow/medicine-group/add.vue b/app/components/flow/medicine-group/add.vue
new file mode 100644
index 00000000..fd42e0a6
--- /dev/null
+++ b/app/components/flow/medicine-group/add.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Pasien
+  </div>
+  <AppPatientEntryForm />
+</template>
diff --git a/app/components/flow/medicine-group/list.vue b/app/components/flow/medicine-group/list.vue
new file mode 100644
index 00000000..7c849395
--- /dev/null
+++ b/app/components/flow/medicine-group/list.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { Summary } from '~/components/pub/base/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
+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: 'Pasien',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/patient/add'),
+  },
+}
+
+// Initial/default data structure
+const summaryData: Summary[] = [
+  {
+    title: 'Total Pasien',
+    icon: UsersRound,
+    metric: 23,
+    trend: 15,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Pasien Aktif',
+    icon: UserCheck,
+    metric: 100,
+    trend: 9,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Kunjungan Hari Ini',
+    icon: Calendar,
+    metric: 52,
+    trend: 1,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Peserta BPJS',
+    icon: Hospital,
+    metric: 71,
+    trend: -3,
+    timeframe: 'daily',
+  },
+]
+
+// API call function
+async function getPatientSummary() {
+  try {
+    isLoading.summary = true
+
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching patient summary:', error)
+    // Keep default/existing data on error
+  } finally {
+    isLoading.summary = false
+  }
+}
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientSummary()
+  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">
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+      <template v-if="isLoading.summary">
+        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
+      </template>
+      <template v-else>
+        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+      </template>
+    </div>
+    <AppPatientList :data="data" />
+  </div>
+</template>
diff --git a/app/components/flow/medicine-method/add.vue b/app/components/flow/medicine-method/add.vue
new file mode 100644
index 00000000..fd42e0a6
--- /dev/null
+++ b/app/components/flow/medicine-method/add.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Pasien
+  </div>
+  <AppPatientEntryForm />
+</template>
diff --git a/app/components/flow/medicine-method/list.vue b/app/components/flow/medicine-method/list.vue
new file mode 100644
index 00000000..7c849395
--- /dev/null
+++ b/app/components/flow/medicine-method/list.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { Summary } from '~/components/pub/base/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
+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: 'Pasien',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/patient/add'),
+  },
+}
+
+// Initial/default data structure
+const summaryData: Summary[] = [
+  {
+    title: 'Total Pasien',
+    icon: UsersRound,
+    metric: 23,
+    trend: 15,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Pasien Aktif',
+    icon: UserCheck,
+    metric: 100,
+    trend: 9,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Kunjungan Hari Ini',
+    icon: Calendar,
+    metric: 52,
+    trend: 1,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Peserta BPJS',
+    icon: Hospital,
+    metric: 71,
+    trend: -3,
+    timeframe: 'daily',
+  },
+]
+
+// API call function
+async function getPatientSummary() {
+  try {
+    isLoading.summary = true
+
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching patient summary:', error)
+    // Keep default/existing data on error
+  } finally {
+    isLoading.summary = false
+  }
+}
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientSummary()
+  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">
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+      <template v-if="isLoading.summary">
+        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
+      </template>
+      <template v-else>
+        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+      </template>
+    </div>
+    <AppPatientList :data="data" />
+  </div>
+</template>
diff --git a/app/components/flow/medicine/entry.vue b/app/components/flow/medicine/entry.vue
new file mode 100644
index 00000000..fd42e0a6
--- /dev/null
+++ b/app/components/flow/medicine/entry.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Pasien
+  </div>
+  <AppPatientEntryForm />
+</template>
diff --git a/app/components/flow/medicine/list.vue b/app/components/flow/medicine/list.vue
new file mode 100644
index 00000000..7c849395
--- /dev/null
+++ b/app/components/flow/medicine/list.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { Summary } from '~/components/pub/base/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
+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: 'Pasien',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/patient/add'),
+  },
+}
+
+// Initial/default data structure
+const summaryData: Summary[] = [
+  {
+    title: 'Total Pasien',
+    icon: UsersRound,
+    metric: 23,
+    trend: 15,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Pasien Aktif',
+    icon: UserCheck,
+    metric: 100,
+    trend: 9,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Kunjungan Hari Ini',
+    icon: Calendar,
+    metric: 52,
+    trend: 1,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Peserta BPJS',
+    icon: Hospital,
+    metric: 71,
+    trend: -3,
+    timeframe: 'daily',
+  },
+]
+
+// API call function
+async function getPatientSummary() {
+  try {
+    isLoading.summary = true
+
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching patient summary:', error)
+    // Keep default/existing data on error
+  } finally {
+    isLoading.summary = false
+  }
+}
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientSummary()
+  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">
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+      <template v-if="isLoading.summary">
+        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
+      </template>
+      <template v-else>
+        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+      </template>
+    </div>
+    <AppPatientList :data="data" />
+  </div>
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine-method/index.vue b/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
new file mode 100644
index 00000000..1b080470
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
@@ -0,0 +1,40 @@
+<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: 'Daftar Dokter',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <FlowMedicineMethodList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine-type/index.vue b/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
new file mode 100644
index 00000000..db352cb4
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
@@ -0,0 +1,40 @@
+<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: 'Daftar Dokter',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <FlowMedicineTypeList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue b/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
new file mode 100644
index 00000000..9c1697fc
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
@@ -0,0 +1,41 @@
+<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 Dokter',
+  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">
+    <FlowMedicineEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/add.vue b/app/pages/(features)/tools-equipment-src/medicine/add.vue
new file mode 100644
index 00000000..9c1697fc
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine/add.vue
@@ -0,0 +1,41 @@
+<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 Dokter',
+  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">
+    <FlowMedicineEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/index.vue b/app/pages/(features)/tools-equipment-src/medicine/index.vue
new file mode 100644
index 00000000..877b5c78
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/medicine/index.vue
@@ -0,0 +1,40 @@
+<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: 'Daftar Dokter',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <FlowMedicineList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>

From 6f4230da04535924b6a650b7b536937deff6b6f4 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 20:08:03 +0700
Subject: [PATCH 02/10] =?UTF-8?q?=E2=9C=A8=20feat:=20register=20schemas=20?=
 =?UTF-8?q?and=20services?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/schemas/auth.schema.ts   | 0
 app/services/auth.service.ts | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 app/schemas/auth.schema.ts
 create mode 100644 app/services/auth.service.ts

diff --git a/app/schemas/auth.schema.ts b/app/schemas/auth.schema.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/app/services/auth.service.ts b/app/services/auth.service.ts
new file mode 100644
index 00000000..e69de29b

From e9cbb09bc536bdf30a6ca021f4862b3ca1fc4f89 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 20:08:43 +0700
Subject: [PATCH 03/10] =?UTF-8?q?=E2=9C=A8=20feat=20(pub):=20add=20base=20?=
 =?UTF-8?q?modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/pub/base/modal/modal.vue | 51 +++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 app/components/pub/base/modal/modal.vue

diff --git a/app/components/pub/base/modal/modal.vue b/app/components/pub/base/modal/modal.vue
new file mode 100644
index 00000000..147079e5
--- /dev/null
+++ b/app/components/pub/base/modal/modal.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { Dialog } from '~/components/pub/ui/dialog'
+
+interface DialogProps {
+  title: string
+  description?: string
+  preventOutside?: boolean
+  open?: boolean
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+}
+const props = withDefaults(defineProps<DialogProps>(), {
+  preventOutside: false,
+  open: false,
+  size: 'md',
+})
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+const sizeClass = computed(() => {
+  const sizeMap = {
+    sm: 'sm:max-w-[350px]',
+    md: 'sm:max-w-[425px]',
+    lg: 'sm:max-w-[600px]',
+    xl: 'sm:max-w-[800px]',
+    full: 'sm:max-w-[95vw]',
+  }
+  return sizeMap[props.size]
+})
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent
+      :class="sizeClass"
+      @interact-outside="(e: any) => preventOutside && e.preventDefault()"
+      @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
+    >
+      <DialogHeader>
+        <DialogTitle>{{ props.title }}</DialogTitle>
+        <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
+      </DialogHeader>
+      <slot />
+    </DialogContent>
+  </Dialog>
+</template>

From 302bcb3e2a473bb14273d05864d5b10e7e3ac89f Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 20:09:31 +0700
Subject: [PATCH 04/10] =?UTF-8?q?=E2=9C=A8=20feat=20(medicine):=20implemen?=
 =?UTF-8?q?t=20medicine=20entry=20form=20and=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/app/medicine/entry-form.vue | 58 ++++++--------
 app/components/app/medicine/list-cfg.ts    | 91 ++++++----------------
 app/components/flow/medicine/entry.vue     | 13 +++-
 app/components/flow/medicine/list.vue      | 68 ++--------------
 app/pages/_dev/index.vue                   | 10 +++
 5 files changed, 71 insertions(+), 169 deletions(-)

diff --git a/app/components/app/medicine/entry-form.vue b/app/components/app/medicine/entry-form.vue
index 5aec1ba3..5d3c495d 100644
--- a/app/components/app/medicine/entry-form.vue
+++ b/app/components/app/medicine/entry-form.vue
@@ -11,76 +11,66 @@ const data = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 })
+
+const items = [
+  { value: '1', label: 'item 1' },
+  { value: '2', label: 'item 2' },
+  { value: '3', label: 'item 3' },
+  { value: '4', label: 'item 4' },
+]
 </script>
 
 <template>
   <form id="entry-form">
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup :column="1">
-            <Label>Nama dan Gelar</Label>
-            <Field>
-              <Input v-model="data.name" type="text" name="name" default-value="dr." />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
-            </Field>
-          </FieldGroup>
-        </Block>
         <Block>
           <FieldGroup :column="2">
-            <Label>NIK</Label>
+            <Label>Nama</Label>
             <Field>
               <Input type="text" name="identity_number" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
-            <Label>NO SIP</Label>
+            <Label>Kode</Label>
             <Field name="sip_number">
               <Input type="text" name="sip_no" />
             </Field>
           </FieldGroup>
-        </Block>
-        <Block>
           <FieldGroup :column="2">
-            <Label>Telepon / HP</Label>
+            <Label>Metode Pemberian</Label>
             <Field name="phone">
-              <Input type="text" name="phone" />
+              <Select :items="items" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
-            <Label>Kode BPJS</Label>
+            <Label>Bentuk Sediaan</Label>
             <Field>
-              <Input type="text" name="bpjs_code" />
+              <Select :items="items" />
             </Field>
           </FieldGroup>
-        </Block>
-        <Block>
           <FieldGroup :column="2">
-            <Label>Fee Rajal</Label>
+            <Label>Dosis</Label>
             <Field>
               <Input type="number" name="outPatient_rate" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
-            <Label>Fee Ranap</Label>
+            <Label>Infra</Label>
             <Field>
-              <Input type="number" name="inPatient_rate" />
+              <Input />
             </Field>
           </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="3">
+          <FieldGroup :column="2">
+            <Label>Stock</Label>
+            <Field>
+              <Input type="number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
             <Label>Status</Label>
             <Field>
-              <Input type="select" name="status">
-                <option value="active">Aktif</option>
-                <option value="inactive">Tidak Aktif</option>
-              </Input>
+              <Input />
             </Field>
           </FieldGroup>
         </Block>
diff --git a/app/components/app/medicine/list-cfg.ts b/app/components/app/medicine/list-cfg.ts
index 0cff0cce..e86a0646 100644
--- a/app/components/app/medicine/list-cfg.ts
+++ b/app/components/app/medicine/list-cfg.ts
@@ -11,55 +11,23 @@ import { defineAsyncComponent } from 'vue'
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
-const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
+export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
 
 export const header: Th[][] = [
   [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+    { label: 'Kode' },
+    { label: 'Name' },
+    { label: 'Kategori' },
+    { label: 'Golongan' },
+    { label: 'Metode Pemberian' },
+    { label: 'Bentuk' },
+    { label: 'Stok' },
+    { label: 'Aksi' },
   ],
 ]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+export const keys = ['code', 'name', 'category', 'group', 'method', 'unit', 'total', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -67,29 +35,22 @@ export const delKeyNames: KeyLabel[] = [
 ]
 
 export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  cateogry: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineCategory?.name || '-'
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+  group: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineGroup?.name || '-'
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  method: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineMethod?.name || '-'
   },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  unit: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineUnit?.name || '-'
   },
 }
 
 export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
+  action: (rec: unknown, idx: number): RecComponent => {
     const res: RecComponent = {
       idx,
       rec: rec as object,
@@ -97,18 +58,10 @@ export const funcComponent: RecStrFuncComponent = {
     }
     return res
   },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
 }
 
 export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
-  },
+  // (_rec) {
+  //   return '-'
+  // },
 }
diff --git a/app/components/flow/medicine/entry.vue b/app/components/flow/medicine/entry.vue
index fd42e0a6..3c3b4cfd 100644
--- a/app/components/flow/medicine/entry.vue
+++ b/app/components/flow/medicine/entry.vue
@@ -1,9 +1,16 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: '',
+})
+</script>
 
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
     <Icon name="i-lucide-user" class="me-2" />
-    <span class="font-semibold">Tambah</span> Pasien
+    <span class="font-semibold">Tambah</span> Obat
   </div>
-  <AppPatientEntryForm />
+  <AppMedicineEntryForm v-model="data" />
 </template>
diff --git a/app/components/flow/medicine/list.vue b/app/components/flow/medicine/list.vue
index 7c849395..19497a7e 100644
--- a/app/components/flow/medicine/list.vue
+++ b/app/components/flow/medicine/list.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { Summary } from '~/components/pub/base/summary-card/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
-import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
@@ -31,63 +28,17 @@ const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
 const hreaderPrep: HeaderPrep = {
-  title: 'Pasien',
-  icon: 'i-lucide-users',
+  title: 'Obat',
+  icon: 'i-lucide-medicine-bottle',
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/patient/add'),
+    onClick: () => navigateTo('/tools-equipment-src/medicine/add'),
   },
 }
 
-// Initial/default data structure
-const summaryData: Summary[] = [
-  {
-    title: 'Total Pasien',
-    icon: UsersRound,
-    metric: 23,
-    trend: 15,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Pasien Aktif',
-    icon: UserCheck,
-    metric: 100,
-    trend: 9,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Kunjungan Hari Ini',
-    icon: Calendar,
-    metric: 52,
-    trend: 1,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Peserta BPJS',
-    icon: Hospital,
-    metric: 71,
-    trend: -3,
-    timeframe: 'daily',
-  },
-]
-
-// API call function
-async function getPatientSummary() {
-  try {
-    isLoading.summary = true
-
-    await new Promise((resolve) => setTimeout(resolve, 500))
-  } catch (error) {
-    console.error('Error fetching patient summary:', error)
-    // Keep default/existing data on error
-  } finally {
-    isLoading.summary = false
-  }
-}
-
 async function getPatientList() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/medicine')
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
@@ -95,7 +46,6 @@ async function getPatientList() {
 }
 
 onMounted(() => {
-  getPatientSummary()
   getPatientList()
 })
 
@@ -108,14 +58,6 @@ provide('table_data_loader', isLoading)
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-      <template v-if="isLoading.summary">
-        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
-      </template>
-      <template v-else>
-        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
-      </template>
-    </div>
-    <AppPatientList :data="data" />
+    <AppMedicineList :data="data" />
   </div>
 </template>
diff --git a/app/pages/_dev/index.vue b/app/pages/_dev/index.vue
index b1afab26..ae2cc052 100644
--- a/app/pages/_dev/index.vue
+++ b/app/pages/_dev/index.vue
@@ -46,6 +46,16 @@ const navMenu = ref({
       icon: 'i-lucide-user',
       component: defineAsyncComponent(() => import('~/pages/_dev/user/list.vue')),
     },
+    {
+      title: 'Test Medicine List',
+      icon: 'i-lucide-user',
+      component: defineAsyncComponent(() => import('~/components/flow/medicine/list.vue')),
+    },
+    {
+      title: 'Test Medicine Add',
+      icon: 'i-lucide-user',
+      component: defineAsyncComponent(() => import('~/components/flow/medicine/entry.vue')),
+    },
   ],
 })
 

From 210946922dca4ca144524812128ed41e6b8a14d3 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 20:16:18 +0700
Subject: [PATCH 05/10] =?UTF-8?q?=E2=9C=A8=20feat=20(medicine):=20add=20me?=
 =?UTF-8?q?dicine=20model=20and=20dto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/models/medicine.ts | 68 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 app/models/medicine.ts

diff --git a/app/models/medicine.ts b/app/models/medicine.ts
new file mode 100644
index 00000000..382c76e2
--- /dev/null
+++ b/app/models/medicine.ts
@@ -0,0 +1,68 @@
+export interface Medicine {
+  id: string
+  name: string
+  code: string
+  medicineGroup_code: string
+  medicineMethod_code: string
+  uom_code: string
+  type: string
+  dose: string
+  infra_id: string
+  stock: string
+  status: string
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+  medicineGroup_code: string
+  medicineMethod_code: string
+  uom_code: string
+  type: string
+  dose: string
+  infra_id: string
+  stock: string
+  status: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+  medicineGroup_code?: string
+  medicineMethod_code?: string
+  uom_code?: string
+  type?: string
+  dose?: string
+  infra_id?: string
+  stock?: string
+  status?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genMedicine(): CreateDto {
+  return {
+    name: 'name',
+    code: 'code',
+    medicineGroup_code: 'medicineGroup_code',
+    medicineMethod_code: 'medicineMethod_code',
+    uom_code: 'uom_code',
+    type: 'type',
+    dose: 'dose',
+    infra_id: 'infra_id',
+    stock: 'stock',
+    status: 'status',
+  }
+}

From 4117b793650f11d6d66bca4405fbe0f06f76dc7e Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 20:17:34 +0700
Subject: [PATCH 06/10] =?UTF-8?q?=E2=9C=A8=20feat=20(medicine):=20add=20me?=
 =?UTF-8?q?dicine=20group=20model?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/models/medicine-group.ts  | 36 +++++++++++++++++++++++++++++++++++
 app/models/medicine-method.ts | 36 +++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 app/models/medicine-group.ts
 create mode 100644 app/models/medicine-method.ts

diff --git a/app/models/medicine-group.ts b/app/models/medicine-group.ts
new file mode 100644
index 00000000..afaa06c6
--- /dev/null
+++ b/app/models/medicine-group.ts
@@ -0,0 +1,36 @@
+export interface MedicineGroup {
+  id: string
+  name: string
+  code: string
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genMedicine(): CreateDto {
+  return {
+    name: 'name',
+    code: 'code',
+  }
+}
diff --git a/app/models/medicine-method.ts b/app/models/medicine-method.ts
new file mode 100644
index 00000000..78e0a68b
--- /dev/null
+++ b/app/models/medicine-method.ts
@@ -0,0 +1,36 @@
+export interface MedicineMethod {
+  id: string
+  name: string
+  code: string
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genMedicine(): CreateDto {
+  return {
+    name: 'name',
+    code: 'code',
+  }
+}

From eb9c9181415c3400b798aa1b79e495d0474a5f7d Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 20:34:22 +0700
Subject: [PATCH 07/10] =?UTF-8?q?=E2=9A=A0=EF=B8=8F=20refactor=20(medicine?=
 =?UTF-8?q?-group):=20simplify=20entry=20form=20and=20list=20configuration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/medicine-group/entry-form.vue         | 65 ++--------------
 app/components/app/medicine-group/list-cfg.ts | 76 +------------------
 app/components/flow/medicine-group/add.vue    |  9 ---
 app/components/flow/medicine-group/list.vue   | 74 +++---------------
 app/pages/_dev/index.vue                      |  7 +-
 5 files changed, 23 insertions(+), 208 deletions(-)
 delete mode 100644 app/components/flow/medicine-group/add.vue

diff --git a/app/components/app/medicine-group/entry-form.vue b/app/components/app/medicine-group/entry-form.vue
index 5aec1ba3..e4f0b60a 100644
--- a/app/components/app/medicine-group/entry-form.vue
+++ b/app/components/app/medicine-group/entry-form.vue
@@ -18,69 +18,16 @@ const data = computed({
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup :column="1">
-            <Label>Nama dan Gelar</Label>
+          <FieldGroup>
+            <Label>Nama</Label>
             <Field>
-              <Input v-model="data.name" type="text" name="name" default-value="dr." />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
+              <Input v-model="data.name" />
             </Field>
           </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>NIK</Label>
+          <FieldGroup>
+            <Label>Kode</Label>
             <Field>
-              <Input type="text" name="identity_number" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>NO SIP</Label>
-            <Field name="sip_number">
-              <Input type="text" name="sip_no" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Telepon / HP</Label>
-            <Field name="phone">
-              <Input type="text" name="phone" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Kode BPJS</Label>
-            <Field>
-              <Input type="text" name="bpjs_code" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Fee Rajal</Label>
-            <Field>
-              <Input type="number" name="outPatient_rate" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Fee Ranap</Label>
-            <Field>
-              <Input type="number" name="inPatient_rate" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="3">
-            <Label>Status</Label>
-            <Field>
-              <Input type="select" name="status">
-                <option value="active">Aktif</option>
-                <option value="inactive">Tidak Aktif</option>
-              </Input>
+              <Input />
             </Field>
           </FieldGroup>
         </Block>
diff --git a/app/components/app/medicine-group/list-cfg.ts b/app/components/app/medicine-group/list-cfg.ts
index 0cff0cce..e2c72f9c 100644
--- a/app/components/app/medicine-group/list-cfg.ts
+++ b/app/components/app/medicine-group/list-cfg.ts
@@ -8,85 +8,25 @@ import type {
 } from '~/components/pub/custom-ui/data/types'
 import { defineAsyncComponent } from 'vue'
 
-type SmallDetailDto = any
-
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
-const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 const _doctorStatus = {
   0: 'Tidak Aktif',
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
+export const cols: Col[] = [{}, {}, { width: 50 }]
 
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
-  ],
-]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+export const keys = ['code', 'name', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
   { key: 'name', label: 'Nama' },
 ]
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
-  },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
-  },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
+export const funcParsed: RecStrFuncUnknown = {}
 
 export const funcComponent: RecStrFuncComponent = {
   action(rec, idx) {
@@ -97,14 +37,6 @@ export const funcComponent: RecStrFuncComponent = {
     }
     return res
   },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
 }
 
 export const funcHtml: RecStrFuncUnknown = {
diff --git a/app/components/flow/medicine-group/add.vue b/app/components/flow/medicine-group/add.vue
deleted file mode 100644
index fd42e0a6..00000000
--- a/app/components/flow/medicine-group/add.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-    <Icon name="i-lucide-user" class="me-2" />
-    <span class="font-semibold">Tambah</span> Pasien
-  </div>
-  <AppPatientEntryForm />
-</template>
diff --git a/app/components/flow/medicine-group/list.vue b/app/components/flow/medicine-group/list.vue
index 7c849395..9a5f567b 100644
--- a/app/components/flow/medicine-group/list.vue
+++ b/app/components/flow/medicine-group/list.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { Summary } from '~/components/pub/base/summary-card/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
-import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
+import Modal from '~/components/pub/base/modal/modal.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
+const entry = ref<any>({})
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -26,68 +25,24 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
+const isOpen = ref(false)
+
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
 const hreaderPrep: HeaderPrep = {
-  title: 'Pasien',
+  title: 'Golongan Obat',
   icon: 'i-lucide-users',
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/patient/add'),
+    onClick: () => (isOpen.value = true),
   },
 }
 
-// Initial/default data structure
-const summaryData: Summary[] = [
-  {
-    title: 'Total Pasien',
-    icon: UsersRound,
-    metric: 23,
-    trend: 15,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Pasien Aktif',
-    icon: UserCheck,
-    metric: 100,
-    trend: 9,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Kunjungan Hari Ini',
-    icon: Calendar,
-    metric: 52,
-    trend: 1,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Peserta BPJS',
-    icon: Hospital,
-    metric: 71,
-    trend: -3,
-    timeframe: 'daily',
-  },
-]
-
-// API call function
-async function getPatientSummary() {
-  try {
-    isLoading.summary = true
-
-    await new Promise((resolve) => setTimeout(resolve, 500))
-  } catch (error) {
-    console.error('Error fetching patient summary:', error)
-    // Keep default/existing data on error
-  } finally {
-    isLoading.summary = false
-  }
-}
-
 async function getPatientList() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/medicine-group')
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
@@ -95,7 +50,6 @@ async function getPatientList() {
 }
 
 onMounted(() => {
-  getPatientSummary()
   getPatientList()
 })
 
@@ -108,14 +62,10 @@ provide('table_data_loader', isLoading)
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-      <template v-if="isLoading.summary">
-        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
-      </template>
-      <template v-else>
-        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
-      </template>
-    </div>
-    <AppPatientList :data="data" />
+    <AppMedicineGroupList :data="data" />
   </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
+    <AppMedicineGroupEntryForm v-model="entry" />
+  </Modal>
 </template>
diff --git a/app/pages/_dev/index.vue b/app/pages/_dev/index.vue
index ae2cc052..659b4f14 100644
--- a/app/pages/_dev/index.vue
+++ b/app/pages/_dev/index.vue
@@ -49,12 +49,7 @@ const navMenu = ref({
     {
       title: 'Test Medicine List',
       icon: 'i-lucide-user',
-      component: defineAsyncComponent(() => import('~/components/flow/medicine/list.vue')),
-    },
-    {
-      title: 'Test Medicine Add',
-      icon: 'i-lucide-user',
-      component: defineAsyncComponent(() => import('~/components/flow/medicine/entry.vue')),
+      component: defineAsyncComponent(() => import('~/components/flow/medicine-group/list.vue')),
     },
   ],
 })

From c3c9154d0ef7be33c6de454022f0cbb6a7273eb0 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 20:37:24 +0700
Subject: [PATCH 08/10] =?UTF-8?q?=E2=9A=A0=EF=B8=8F=20refactor=20(medicine?=
 =?UTF-8?q?-method):=20simplify=20entry=20form=20and=20list=20configuratio?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/medicine-method/entry-form.vue        | 65 ++--------------
 .../app/medicine-method/list-cfg.ts           | 76 +------------------
 .../app/medicine-method/status-badge.vue      | 29 -------
 app/components/flow/medicine-method/add.vue   |  9 ---
 app/components/flow/medicine-method/list.vue  | 76 ++++---------------
 app/pages/_dev/index.vue                      |  2 +-
 6 files changed, 24 insertions(+), 233 deletions(-)
 delete mode 100644 app/components/app/medicine-method/status-badge.vue
 delete mode 100644 app/components/flow/medicine-method/add.vue

diff --git a/app/components/app/medicine-method/entry-form.vue b/app/components/app/medicine-method/entry-form.vue
index 5aec1ba3..e4f0b60a 100644
--- a/app/components/app/medicine-method/entry-form.vue
+++ b/app/components/app/medicine-method/entry-form.vue
@@ -18,69 +18,16 @@ const data = computed({
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup :column="1">
-            <Label>Nama dan Gelar</Label>
+          <FieldGroup>
+            <Label>Nama</Label>
             <Field>
-              <Input v-model="data.name" type="text" name="name" default-value="dr." />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
+              <Input v-model="data.name" />
             </Field>
           </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>NIK</Label>
+          <FieldGroup>
+            <Label>Kode</Label>
             <Field>
-              <Input type="text" name="identity_number" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>NO SIP</Label>
-            <Field name="sip_number">
-              <Input type="text" name="sip_no" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Telepon / HP</Label>
-            <Field name="phone">
-              <Input type="text" name="phone" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Kode BPJS</Label>
-            <Field>
-              <Input type="text" name="bpjs_code" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Fee Rajal</Label>
-            <Field>
-              <Input type="number" name="outPatient_rate" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Fee Ranap</Label>
-            <Field>
-              <Input type="number" name="inPatient_rate" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="3">
-            <Label>Status</Label>
-            <Field>
-              <Input type="select" name="status">
-                <option value="active">Aktif</option>
-                <option value="inactive">Tidak Aktif</option>
-              </Input>
+              <Input />
             </Field>
           </FieldGroup>
         </Block>
diff --git a/app/components/app/medicine-method/list-cfg.ts b/app/components/app/medicine-method/list-cfg.ts
index 0cff0cce..e2c72f9c 100644
--- a/app/components/app/medicine-method/list-cfg.ts
+++ b/app/components/app/medicine-method/list-cfg.ts
@@ -8,85 +8,25 @@ import type {
 } from '~/components/pub/custom-ui/data/types'
 import { defineAsyncComponent } from 'vue'
 
-type SmallDetailDto = any
-
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
-const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 const _doctorStatus = {
   0: 'Tidak Aktif',
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
+export const cols: Col[] = [{}, {}, { width: 50 }]
 
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
-  ],
-]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+export const keys = ['code', 'name', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
   { key: 'name', label: 'Nama' },
 ]
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
-  },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
-  },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
+export const funcParsed: RecStrFuncUnknown = {}
 
 export const funcComponent: RecStrFuncComponent = {
   action(rec, idx) {
@@ -97,14 +37,6 @@ export const funcComponent: RecStrFuncComponent = {
     }
     return res
   },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
 }
 
 export const funcHtml: RecStrFuncUnknown = {
diff --git a/app/components/app/medicine-method/status-badge.vue b/app/components/app/medicine-method/status-badge.vue
deleted file mode 100644
index 32cdfbca..00000000
--- a/app/components/app/medicine-method/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/flow/medicine-method/add.vue b/app/components/flow/medicine-method/add.vue
deleted file mode 100644
index fd42e0a6..00000000
--- a/app/components/flow/medicine-method/add.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-    <Icon name="i-lucide-user" class="me-2" />
-    <span class="font-semibold">Tambah</span> Pasien
-  </div>
-  <AppPatientEntryForm />
-</template>
diff --git a/app/components/flow/medicine-method/list.vue b/app/components/flow/medicine-method/list.vue
index 7c849395..e05419e5 100644
--- a/app/components/flow/medicine-method/list.vue
+++ b/app/components/flow/medicine-method/list.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { Summary } from '~/components/pub/base/summary-card/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
-import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
+import Modal from '~/components/pub/base/modal/modal.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
+const entry = ref<any>({})
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -26,68 +25,24 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
+const isOpen = ref(false)
+
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
 const hreaderPrep: HeaderPrep = {
-  title: 'Pasien',
-  icon: 'i-lucide-users',
+  title: 'Metode Pemberian',
+  icon: 'i-lucide-medicine-bottle',
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/patient/add'),
+    onClick: () => (isOpen.value = true),
   },
 }
 
-// Initial/default data structure
-const summaryData: Summary[] = [
-  {
-    title: 'Total Pasien',
-    icon: UsersRound,
-    metric: 23,
-    trend: 15,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Pasien Aktif',
-    icon: UserCheck,
-    metric: 100,
-    trend: 9,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Kunjungan Hari Ini',
-    icon: Calendar,
-    metric: 52,
-    trend: 1,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Peserta BPJS',
-    icon: Hospital,
-    metric: 71,
-    trend: -3,
-    timeframe: 'daily',
-  },
-]
-
-// API call function
-async function getPatientSummary() {
-  try {
-    isLoading.summary = true
-
-    await new Promise((resolve) => setTimeout(resolve, 500))
-  } catch (error) {
-    console.error('Error fetching patient summary:', error)
-    // Keep default/existing data on error
-  } finally {
-    isLoading.summary = false
-  }
-}
-
 async function getPatientList() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/medicine-method')
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
@@ -95,7 +50,6 @@ async function getPatientList() {
 }
 
 onMounted(() => {
-  getPatientSummary()
   getPatientList()
 })
 
@@ -108,14 +62,10 @@ provide('table_data_loader', isLoading)
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-      <template v-if="isLoading.summary">
-        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
-      </template>
-      <template v-else>
-        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
-      </template>
-    </div>
-    <AppPatientList :data="data" />
+    <AppMedicineMethodList :data="data" />
   </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Metode Pemberian" size="lg" prevent-outside>
+    <AppMedicineMethodEntryForm v-model="entry" />
+  </Modal>
 </template>
diff --git a/app/pages/_dev/index.vue b/app/pages/_dev/index.vue
index 659b4f14..3f67f9f8 100644
--- a/app/pages/_dev/index.vue
+++ b/app/pages/_dev/index.vue
@@ -49,7 +49,7 @@ const navMenu = ref({
     {
       title: 'Test Medicine List',
       icon: 'i-lucide-user',
-      component: defineAsyncComponent(() => import('~/components/flow/medicine-group/list.vue')),
+      component: defineAsyncComponent(() => import('~/components/flow/medicine-method/list.vue')),
     },
   ],
 })

From e640a6d44c8c0e5d4523abe50d441f8286021f06 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 20:43:14 +0700
Subject: [PATCH 09/10] =?UTF-8?q?=E2=9C=A8=20feat=20(medicine-method):=20i?=
 =?UTF-8?q?mplement=20medicine=20method=20fetching?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/flow/medicine-method/list.vue | 17 ++++++++++-------
 app/services/medicine-method.service.ts      |  9 +++++++++
 2 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 app/services/medicine-method.service.ts

diff --git a/app/components/flow/medicine-method/list.vue b/app/components/flow/medicine-method/list.vue
index e05419e5..43d7a03f 100644
--- a/app/components/flow/medicine-method/list.vue
+++ b/app/components/flow/medicine-method/list.vue
@@ -3,6 +3,7 @@ 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 Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import { getMedicineMethods } from '~/services/medicine-method.service'
 
 const data = ref([])
 const entry = ref<any>({})
@@ -40,17 +41,19 @@ const hreaderPrep: HeaderPrep = {
   },
 }
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/medicine-method')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+async function getData() {
+  try {
+    isLoading.isTableLoading = true
+    data.value = await getMedicineMethods()
+  } catch (err) {
+    console.error(err)
+  } finally {
+    isLoading.isTableLoading = false
   }
-  isLoading.isTableLoading = false
 }
 
 onMounted(() => {
-  getPatientList()
+  getData()
 })
 
 provide('rec_id', recId)
diff --git a/app/services/medicine-method.service.ts b/app/services/medicine-method.service.ts
new file mode 100644
index 00000000..02327163
--- /dev/null
+++ b/app/services/medicine-method.service.ts
@@ -0,0 +1,9 @@
+import { xfetch } from '~/composables/useXfetch'
+
+export async function getMedicineMethods() {
+  const resp = await xfetch('/api/v1/medicine-method')
+  if (resp.success) {
+    return (resp.body as Record<string, any>).data
+  }
+  throw new Error('Failed to fetch medicine methods')
+}

From 88577dbec526719926926f0865ee480502363d67 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 21:40:57 +0700
Subject: [PATCH 10/10] =?UTF-8?q?=F0=9F=90=9B=20fix=20(medicine-type):=20f?=
 =?UTF-8?q?ix=20medicine=20type=20list=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(features)/tools-equipment-src/medicine-type/index.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/(features)/tools-equipment-src/medicine-type/index.vue b/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
index db352cb4..cbeccd42 100644
--- a/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowMedicineTypeList />
+      <FlowMedicineGroupList />
     </div>
     <Error v-else :status-code="403" />
   </div>