diff --git a/app/components/app/material/list-cfg.ts b/app/components/app/material/list-cfg.ts
new file mode 100644
index 00000000..71ca97f6
--- /dev/null
+++ b/app/components/app/material/list-cfg.ts
@@ -0,0 +1,52 @@
+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: 100 }, { width: 250 }, { width: 100 }, { width: 100 }, { width: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Item' }, { label: 'Satuan' }]]
+
+export const keys = ['code', 'name', 'item_id', 'uom_code', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.name}`.trim()
+  },
+  item_id: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.item_id
+  },
+  uom_code: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.uom_code
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}
diff --git a/app/components/app/material/list.vue b/app/components/app/material/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/material/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/flow/material/list.vue b/app/components/flow/material/list.vue
new file mode 100644
index 00000000..28fb6290
--- /dev/null
+++ b/app/components/flow/material/list.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'BMHP',
+  icon: 'i-lucide-paint-bucket',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/tools-equipment-src/material/add'),
+  },
+}
+
+async function getMaterialList() {
+  isLoading.dataListLoading = true
+
+  const resp = await xfetch('/api/v1/material')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getMaterialList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <div class="rounded-md border p-4">
+      <AppMaterialList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/material/index.vue b/app/pages/(features)/tools-equipment-src/material/index.vue
new file mode 100644
index 00000000..503056cb
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/material/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 User',
+  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">
+      <FlowMaterialList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>