diff --git a/app/components/app/material-package-item/quick-list.cfg.ts b/app/components/app/material-package-item/quick-list.cfg.ts
new file mode 100644
index 00000000..90caf510
--- /dev/null
+++ b/app/components/app/material-package-item/quick-list.cfg.ts
@@ -0,0 +1,23 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+type SmallDetailDto = any
+
+export const config: Config = {
+  cols: [ { width: 150 }, {}, { width: 150 }],
+
+  headers: [
+    [
+      { label: 'No' },
+      { label: 'Name' },
+      { label: 'Jumlah' },
+    ],
+  ],
+
+  keys: ['number', 'material.name', 'count'],
+
+  parses: {
+    number: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+  },
+}
diff --git a/app/components/app/material-package-item/quick-list.vue b/app/components/app/material-package-item/quick-list.vue
new file mode 100644
index 00000000..e570db9f
--- /dev/null
+++ b/app/components/app/material-package-item/quick-list.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+//
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
+// Configs
+import { config } from './quick-list.cfg'
+import type { MaterialPackageItem } from '~/models/material-package-item';
+
+interface Props {
+  data: MaterialPackageItem[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div>
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+        Daftar Item BMHP
+    </div>
+    <DataTable v-bind="config" :rows="data" />
+  </div>
+</template>
diff --git a/app/components/app/material-package/switcher.vue b/app/components/app/material-package/switcher.vue
new file mode 100644
index 00000000..0ec6912f
--- /dev/null
+++ b/app/components/app/material-package/switcher.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+//
+import * as CB from '~/components/pub/my-ui/combobox'
+
+//
+defineProps<{
+  items: CB.Item[]
+}>()
+
+const model = defineModel()
+
+</script>
+
+<template>
+  <div class="mb-4 2xl:mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Paket BMHP
+    </div>
+    <div class="max-w-[600px]">
+      <CB.Combobox :items="items" v-model="model" />
+    </div>
+  </div>
+</template>
diff --git a/app/models/material-package-item.ts b/app/models/material-package-item.ts
new file mode 100644
index 00000000..9ccde8d1
--- /dev/null
+++ b/app/models/material-package-item.ts
@@ -0,0 +1,14 @@
+import { type Base, genBase } from "./_base"
+
+export interface MaterialPackageItem extends Base {
+  materialPackage_code: string
+  material_code: string
+}
+
+export function genMaterialPackage(): MaterialPackageItem {
+  return {
+    ...genBase(),
+    materialPackage_code: '',
+    material_code: '',
+  }
+}
diff --git a/app/models/material-package.ts b/app/models/material-package.ts
new file mode 100644
index 00000000..df3f01d1
--- /dev/null
+++ b/app/models/material-package.ts
@@ -0,0 +1,14 @@
+import { type Base, genBase } from "./_base"
+
+export interface MaterialPackage extends Base {
+  code: string
+  name: string
+}
+
+export function genMaterialPackage(): MaterialPackage {
+  return {
+    ...genBase(),
+    code: '',
+    name: '',
+  }
+}
diff --git a/app/schemas/material-package-item.schema.ts b/app/schemas/material-package-item.schema.ts
new file mode 100644
index 00000000..e893aa5b
--- /dev/null
+++ b/app/schemas/material-package-item.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { MaterialPackageItem } from '~/models/material-package-item'
+
+const MaterialSchema = z.object({
+  materialPackage_code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  material_code: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+})
+
+type MaterialFormData = z.infer<typeof MaterialSchema> & Partial<MaterialPackageItem>
+
+export { MaterialSchema }
+export type { MaterialFormData }
diff --git a/app/schemas/material-package.schema.ts b/app/schemas/material-package.schema.ts
new file mode 100644
index 00000000..38220f7b
--- /dev/null
+++ b/app/schemas/material-package.schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import type { MaterialPackage } from '~/models/material-package'
+
+const MaterialSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+})
+
+type MaterialFormData = z.infer<typeof MaterialSchema> & Partial<MaterialPackage>
+
+export { MaterialSchema }
+export type { MaterialFormData }
diff --git a/app/services/material-package-item.service.ts b/app/services/material-package-item.service.ts
new file mode 100644
index 00000000..00059356
--- /dev/null
+++ b/app/services/material-package-item.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const name = 'material-package-item'
+const path = `/api/v1/${name}`
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/material-package.service.ts b/app/services/material-package.service.ts
new file mode 100644
index 00000000..36822045
--- /dev/null
+++ b/app/services/material-package.service.ts
@@ -0,0 +1,38 @@
+// Base
+import type { MaterialPackage } from '~/models/material-package'
+import * as base from './_crud-base'
+
+const name = 'material-package'
+const path = `/api/v1/${name}`
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null, useId = false): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = !useId ?
+      resultData.map((item: MaterialPackage) => ({ value: item.code, label: item.name })) :
+      resultData.map((item: MaterialPackage) => ({ value: item.id, label: item.name }))
+  }
+  return data
+}