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..e4f0b60a
--- /dev/null
+++ b/app/components/app/medicine-group/entry-form.vue
@@ -0,0 +1,37 @@
+<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>
+            <Label>Nama</Label>
+            <Field>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Kode</Label>
+            <Field>
+              <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..e2c72f9c
--- /dev/null
+++ b/app/components/app/medicine-group/list-cfg.ts
@@ -0,0 +1,46 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [{}, {}, { width: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+
+export const keys = ['code', 'name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/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..e4f0b60a
--- /dev/null
+++ b/app/components/app/medicine-method/entry-form.vue
@@ -0,0 +1,37 @@
+<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>
+            <Label>Nama</Label>
+            <Field>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Kode</Label>
+            <Field>
+              <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..e2c72f9c
--- /dev/null
+++ b/app/components/app/medicine-method/list-cfg.ts
@@ -0,0 +1,46 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [{}, {}, { width: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+
+export const keys = ['code', 'name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/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/entry-form.vue b/app/components/app/medicine/entry-form.vue
new file mode 100644
index 00000000..5d3c495d
--- /dev/null
+++ b/app/components/app/medicine/entry-form.vue
@@ -0,0 +1,80 @@
+<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),
+})
+
+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="2">
+            <Label>Nama</Label>
+            <Field>
+              <Input type="text" name="identity_number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode</Label>
+            <Field name="sip_number">
+              <Input type="text" name="sip_no" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Metode Pemberian</Label>
+            <Field name="phone">
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Bentuk Sediaan</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Dosis</Label>
+            <Field>
+              <Input type="number" name="outPatient_rate" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Infra</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Stock</Label>
+            <Field>
+              <Input type="number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Status</Label>
+            <Field>
+              <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..e86a0646
--- /dev/null
+++ b/app/components/app/medicine/list-cfg.ts
@@ -0,0 +1,67 @@
+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'))
+
+export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode' },
+    { label: 'Name' },
+    { label: 'Kategori' },
+    { label: 'Golongan' },
+    { label: 'Metode Pemberian' },
+    { label: 'Bentuk' },
+    { label: 'Stok' },
+    { label: 'Aksi' },
+  ],
+]
+
+export const keys = ['code', 'name', 'category', 'group', 'method', 'unit', 'total', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  cateogry: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineCategory?.name || '-'
+  },
+  group: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineGroup?.name || '-'
+  },
+  method: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineMethod?.name || '-'
+  },
+  unit: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineUnit?.name || '-'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action: (rec: unknown, idx: number): RecComponent => {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  // (_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/list.vue b/app/components/flow/medicine-group/list.vue
new file mode 100644
index 00000000..9a5f567b
--- /dev/null
+++ b/app/components/flow/medicine-group/list.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Modal from '~/components/pub/base/modal/modal.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+const data = ref([])
+const entry = ref<any>({})
+
+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 isOpen = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Golongan Obat',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => (isOpen.value = true),
+  },
+}
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/medicine-group')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppMedicineGroupList :data="data" />
+  </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
+    <AppMedicineGroupEntryForm v-model="entry" />
+  </Modal>
+</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..43d7a03f
--- /dev/null
+++ b/app/components/flow/medicine-method/list.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Modal from '~/components/pub/base/modal/modal.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import { getMedicineMethods } from '~/services/medicine-method.service'
+
+const data = ref([])
+const entry = ref<any>({})
+
+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 isOpen = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Metode Pemberian',
+  icon: 'i-lucide-medicine-bottle',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => (isOpen.value = true),
+  },
+}
+
+async function getData() {
+  try {
+    isLoading.isTableLoading = true
+    data.value = await getMedicineMethods()
+  } catch (err) {
+    console.error(err)
+  } finally {
+    isLoading.isTableLoading = false
+  }
+}
+
+onMounted(() => {
+  getData()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppMedicineMethodList :data="data" />
+  </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Metode Pemberian" size="lg" prevent-outside>
+    <AppMedicineMethodEntryForm v-model="entry" />
+  </Modal>
+</template>
diff --git a/app/components/flow/medicine/entry.vue b/app/components/flow/medicine/entry.vue
new file mode 100644
index 00000000..3c3b4cfd
--- /dev/null
+++ b/app/components/flow/medicine/entry.vue
@@ -0,0 +1,16 @@
+<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> Obat
+  </div>
+  <AppMedicineEntryForm v-model="data" />
+</template>
diff --git a/app/components/flow/medicine/list.vue b/app/components/flow/medicine/list.vue
new file mode 100644
index 00000000..19497a7e
--- /dev/null
+++ b/app/components/flow/medicine/list.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// 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>
+</template>
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>
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',
+  }
+}
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',
+  }
+}
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..cbeccd42
--- /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">
+      <FlowMedicineGroupList />
+    </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>
diff --git a/app/pages/_dev/index.vue b/app/pages/_dev/index.vue
index b1afab26..3f67f9f8 100644
--- a/app/pages/_dev/index.vue
+++ b/app/pages/_dev/index.vue
@@ -46,6 +46,11 @@ 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-method/list.vue')),
+    },
   ],
 })
 
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
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')
+}