From f29c9abad89fdc61aa64fe7a4423bf7b6e44587c Mon Sep 17 00:00:00 2001
From: mrifai-cata <muhammad.rifai@trycata.com>
Date: Tue, 2 Sep 2025 13:58:10 +0700
Subject: [PATCH 1/7] feat (material): add list material

---
 app/components/app/material/list-cfg.ts       | 52 +++++++++++++++
 app/components/app/material/list.vue          | 19 ++++++
 app/components/flow/material/list.vue         | 65 +++++++++++++++++++
 .../tools-equipment-src/material/index.vue    | 40 ++++++++++++
 4 files changed, 176 insertions(+)
 create mode 100644 app/components/app/material/list-cfg.ts
 create mode 100644 app/components/app/material/list.vue
 create mode 100644 app/components/flow/material/list.vue
 create mode 100644 app/pages/(features)/tools-equipment-src/material/index.vue

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>

From 7e4444a427766de9f428ea0d1ec91a849f061558 Mon Sep 17 00:00:00 2001
From: mrifai-cata <muhammad.rifai@trycata.com>
Date: Tue, 2 Sep 2025 14:04:33 +0700
Subject: [PATCH 2/7] feat (material): add form material

---
 app/components/app/material/entry-form.vue    | 53 +++++++++++++++++++
 app/components/flow/material/entry.vue        | 31 +++++++++++
 .../tools-equipment-src/material/add.vue      | 41 ++++++++++++++
 3 files changed, 125 insertions(+)
 create mode 100644 app/components/app/material/entry-form.vue
 create mode 100644 app/components/flow/material/entry.vue
 create mode 100644 app/pages/(features)/tools-equipment-src/material/add.vue

diff --git a/app/components/app/material/entry-form.vue b/app/components/app/material/entry-form.vue
new file mode 100644
index 00000000..e8729829
--- /dev/null
+++ b/app/components/app/material/entry-form.vue
@@ -0,0 +1,53 @@
+<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: 'item1', label: 'Item 1' },
+  { value: 'item2', label: 'Item 2' },
+]
+</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>Kode</Label>
+            <Field>
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="1">
+            <Label>Nama</Label>
+            <Field>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="1">
+            <Label>Item</Label>
+            <Field>
+              <Select v-model="data.type" :items="items" placeholder="Pilih item" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="1">
+            <Label>Satuan</Label>
+            <Field>
+              <Select v-model="data.type" :items="items" placeholder="Pilih item" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/flow/material/entry.vue b/app/components/flow/material/entry.vue
new file mode 100644
index 00000000..6259785e
--- /dev/null
+++ b/app/components/flow/material/entry.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: '',
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/tools-equipment-src/material')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+  }
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-paint-bucket" class="me-2" />
+    <span class="font-semibold">Tambah</span> BMHP
+  </div>
+  <AppMaterialEntryForm v-model="data" />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/material/add.vue b/app/pages/(features)/tools-equipment-src/material/add.vue
new file mode 100644
index 00000000..56803533
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/material/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 User',
+  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">
+    <FlowMaterialEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>

From da9830e16dc53582bed3b6e67b352478b57a72cd Mon Sep 17 00:00:00 2001
From: mrifai-cata <muhammad.rifai@trycata.com>
Date: Tue, 2 Sep 2025 15:59:02 +0700
Subject: [PATCH 3/7] feat (material): modify entry form of materiak

---
 app/components/app/material/entry-form.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/components/app/material/entry-form.vue b/app/components/app/material/entry-form.vue
index e8729829..ae45edba 100644
--- a/app/components/app/material/entry-form.vue
+++ b/app/components/app/material/entry-form.vue
@@ -46,6 +46,12 @@ const items = [
               <Select v-model="data.type" :items="items" placeholder="Pilih item" />
             </Field>
           </FieldGroup>
+          <FieldGroup :column="1">
+            <Label>Stok</Label>
+            <Field>
+              <Input v-model="data.stock" />
+            </Field>
+          </FieldGroup>
         </Block>
       </div>
     </div>

From e5d995b9ee71e61b944617a1ab1a2fb128a39adf Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 3 Sep 2025 12:23:21 +0700
Subject: [PATCH 4/7] feat (material): add zod validation for stock field to
 ensure number input in entry-form

---
 app/components/app/material/entry-form.vue | 22 ++++++++++++++++++++--
 package.json                               |  2 +-
 pnpm-lock.yaml                             |  2 +-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/components/app/material/entry-form.vue b/app/components/app/material/entry-form.vue
index ae45edba..979c6970 100644
--- a/app/components/app/material/entry-form.vue
+++ b/app/components/app/material/entry-form.vue
@@ -3,14 +3,32 @@ 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'
+import { z } from 'zod'
 
 const props = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue', 'event'])
 
+const schema = z.object({
+  code: z.string(),
+  name: z.string(),
+  type: z.string(),
+  stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: "Stok harus berupa angka" })),
+})
+
 const data = computed({
   get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+  set: (val) => {
+    const result = schema.safeParse(val)
+    if (!result.success) {
+      // You can handle the error here, e.g. show a message
+      const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
+      alert(errorMessage)
+      return
+    }
+    emit('update:modelValue', val)
+  },
 })
+
 const items = [
   { value: 'item1', label: 'Item 1' },
   { value: 'item2', label: 'Item 2' },
@@ -43,7 +61,7 @@ const items = [
           <FieldGroup :column="1">
             <Label>Satuan</Label>
             <Field>
-              <Select v-model="data.type" :items="items" placeholder="Pilih item" />
+              <Select v-model="data.stock" :items="items" placeholder="Pilih item" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="1">
diff --git a/package.json b/package.json
index 00158330..905dee25 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,6 @@
     "vue-router": "^4.5.1",
     "vue-sonner": "^1.3.0",
     "vue-tsc": "^2.1.10",
-    "zod": "^3.24.2"
+    "zod": "^3.25.76"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a3ef8de..bcbed231 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -161,7 +161,7 @@ devDependencies:
     specifier: ^2.1.10
     version: 2.2.12(typescript@5.9.2)
   zod:
-    specifier: ^3.24.2
+    specifier: ^3.25.76
     version: 3.25.76
 
 packages:

From 6afa968b7bb237e8d39ef703b48156deac3e1293 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 3 Sep 2025 12:50:41 +0700
Subject: [PATCH 5/7] feat (material): update logic validate

---
 app/components/app/material/entry-form.vue | 29 ++++++----------
 app/components/flow/material/entry.vue     | 39 ++++++++++++++++++++--
 2 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/app/components/app/material/entry-form.vue b/app/components/app/material/entry-form.vue
index 979c6970..52214e3f 100644
--- a/app/components/app/material/entry-form.vue
+++ b/app/components/app/material/entry-form.vue
@@ -3,28 +3,13 @@ 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'
-import { z } from 'zod'
 
-const props = defineProps<{ modelValue: any }>()
+const props = defineProps<{ modelValue: any; errors: any }>()
 const emit = defineEmits(['update:modelValue', 'event'])
 
-const schema = z.object({
-  code: z.string(),
-  name: z.string(),
-  type: z.string(),
-  stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: "Stok harus berupa angka" })),
-})
-
 const data = computed({
   get: () => props.modelValue,
   set: (val) => {
-    const result = schema.safeParse(val)
-    if (!result.success) {
-      // You can handle the error here, e.g. show a message
-      const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
-      alert(errorMessage)
-      return
-    }
     emit('update:modelValue', val)
   },
 })
@@ -46,12 +31,20 @@ const items = [
               <Input v-model="data.code" />
             </Field>
           </FieldGroup>
+          <FieldGroup v-if="!!props.errors.code">
+            <Label></Label>
+            <span class="text-red-400 text-sm">{{ props.errors.code }}</span>
+          </FieldGroup>
           <FieldGroup :column="1">
             <Label>Nama</Label>
             <Field>
               <Input v-model="data.name" />
             </Field>
           </FieldGroup>
+          <FieldGroup v-if="!!props.errors.name">
+            <Label></Label>
+            <span class="text-red-400 text-sm">{{ props.errors.name }}</span>
+          </FieldGroup>
           <FieldGroup :column="1">
             <Label>Item</Label>
             <Field>
@@ -61,13 +54,13 @@ const items = [
           <FieldGroup :column="1">
             <Label>Satuan</Label>
             <Field>
-              <Select v-model="data.stock" :items="items" placeholder="Pilih item" />
+              <Select v-model="data.uom" :items="items" placeholder="Pilih item" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="1">
             <Label>Stok</Label>
             <Field>
-              <Input v-model="data.stock" />
+              <Input v-model="data.stock" type="number" />
             </Field>
           </FieldGroup>
         </Block>
diff --git a/app/components/flow/material/entry.vue b/app/components/flow/material/entry.vue
index 6259785e..b5c8c491 100644
--- a/app/components/flow/material/entry.vue
+++ b/app/components/flow/material/entry.vue
@@ -1,11 +1,20 @@
 <script setup lang="ts">
 import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+import { z, ZodError } from 'zod'
 
+const errors = ref({})
 const data = ref({
+  code: '',
   name: '',
-  password: '',
-  status: '',
   type: '',
+  stock: 0,
+})
+
+const schema = z.object({
+  code: z.string().min(1, 'Code must be at least 1 characters long'),
+  name: z.string().min(1, 'Name must be at least 1 characters long'),
+  type: z.string(),
+  stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: 'Stok harus berupa angka' })),
 })
 
 function onClick(type: string) {
@@ -15,6 +24,30 @@ function onClick(type: string) {
     // do something
   } else if (type === 'submit') {
     // do something
+    const input = data.value
+    console.log(input)
+    const errorsParsed: any = {}
+    try {
+      const result = schema.safeParse(input)
+      if (!result.success) {
+        // You can handle the error here, e.g. show a message
+        const errorsCaptures = result?.error?.errors || []
+        const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
+        errorsCaptures.forEach((value: any) => {
+          const keyName = value?.path?.length > 0 ? value.path[0] : 'key'
+          errorsParsed[keyName as string] = value.message || ''
+        })
+        console.log(errorMessage)
+      }
+    } catch (e) {
+      if (e instanceof ZodError) {
+        const jsonError = e.flatten()
+        console.log(JSON.stringify(jsonError, null, 2))
+      }
+    }
+    setTimeout(() => {
+      errors.value = errorsParsed
+    }, 0)
   }
 }
 </script>
@@ -24,7 +57,7 @@ function onClick(type: string) {
     <Icon name="i-lucide-paint-bucket" class="me-2" />
     <span class="font-semibold">Tambah</span> BMHP
   </div>
-  <AppMaterialEntryForm v-model="data" />
+  <AppMaterialEntryForm v-model="data" :errors="errors" />
   <div class="my-2 flex justify-end py-2">
     <Action @click="onClick" />
   </div>

From 06a26c8b077ae8b9b45536ad6cffee9296e3196a Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 3 Sep 2025 15:34:59 +0700
Subject: [PATCH 6/7] feat: add RBAC role-based access control and permission
 checks to device index page

---
 app/components/app/device/entry-form.vue      | 64 ++++++++++++++++++
 app/components/app/device/list-cfg.ts         | 52 +++++++++++++++
 app/components/app/device/list.vue            | 19 ++++++
 app/components/flow/device/entry.vue          | 64 ++++++++++++++++++
 app/components/flow/device/list.vue           | 65 +++++++++++++++++++
 app/components/flow/material/entry.vue        |  2 +-
 .../tools-equipment-src/device/add.vue        | 41 ++++++++++++
 .../tools-equipment-src/device/index.vue      | 40 ++++++++++++
 8 files changed, 346 insertions(+), 1 deletion(-)
 create mode 100644 app/components/app/device/entry-form.vue
 create mode 100644 app/components/app/device/list-cfg.ts
 create mode 100644 app/components/app/device/list.vue
 create mode 100644 app/components/flow/device/entry.vue
 create mode 100644 app/components/flow/device/list.vue
 create mode 100644 app/pages/(features)/tools-equipment-src/device/add.vue
 create mode 100644 app/pages/(features)/tools-equipment-src/device/index.vue

diff --git a/app/components/app/device/entry-form.vue b/app/components/app/device/entry-form.vue
new file mode 100644
index 00000000..38b4aea0
--- /dev/null
+++ b/app/components/app/device/entry-form.vue
@@ -0,0 +1,64 @@
+<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; errors: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit('update:modelValue', val)
+  },
+})
+
+const items = [
+  { value: 'item1', label: 'Item 1' },
+  { value: 'item2', label: 'Item 2' },
+]
+</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>Kode</Label>
+            <Field>
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup v-if="!!props.errors.code">
+            <Label></Label>
+            <span class="text-red-400 text-sm">{{ props.errors.code }}</span>
+          </FieldGroup>
+          <FieldGroup :column="1">
+            <Label>Nama</Label>
+            <Field>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup v-if="!!props.errors.name">
+            <Label></Label>
+            <span class="text-red-400 text-sm">{{ props.errors.name }}</span>
+          </FieldGroup>
+          <FieldGroup :column="1">
+            <Label>Item</Label>
+            <Field>
+              <Select v-model="data.type" :items="items" placeholder="Pilih item" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="1">
+            <Label>Satuan</Label>
+            <Field>
+              <Select v-model="data.uom" :items="items" placeholder="Pilih item" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/device/list-cfg.ts b/app/components/app/device/list-cfg.ts
new file mode 100644
index 00000000..71ca97f6
--- /dev/null
+++ b/app/components/app/device/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/device/list.vue b/app/components/app/device/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/device/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/device/entry.vue b/app/components/flow/device/entry.vue
new file mode 100644
index 00000000..b5c8c491
--- /dev/null
+++ b/app/components/flow/device/entry.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+import { z, ZodError } from 'zod'
+
+const errors = ref({})
+const data = ref({
+  code: '',
+  name: '',
+  type: '',
+  stock: 0,
+})
+
+const schema = z.object({
+  code: z.string().min(1, 'Code must be at least 1 characters long'),
+  name: z.string().min(1, 'Name must be at least 1 characters long'),
+  type: z.string(),
+  stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: 'Stok harus berupa angka' })),
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/tools-equipment-src/material')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+    const input = data.value
+    console.log(input)
+    const errorsParsed: any = {}
+    try {
+      const result = schema.safeParse(input)
+      if (!result.success) {
+        // You can handle the error here, e.g. show a message
+        const errorsCaptures = result?.error?.errors || []
+        const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
+        errorsCaptures.forEach((value: any) => {
+          const keyName = value?.path?.length > 0 ? value.path[0] : 'key'
+          errorsParsed[keyName as string] = value.message || ''
+        })
+        console.log(errorMessage)
+      }
+    } catch (e) {
+      if (e instanceof ZodError) {
+        const jsonError = e.flatten()
+        console.log(JSON.stringify(jsonError, null, 2))
+      }
+    }
+    setTimeout(() => {
+      errors.value = errorsParsed
+    }, 0)
+  }
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-paint-bucket" class="me-2" />
+    <span class="font-semibold">Tambah</span> BMHP
+  </div>
+  <AppMaterialEntryForm v-model="data" :errors="errors" />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/components/flow/device/list.vue b/app/components/flow/device/list.vue
new file mode 100644
index 00000000..8c7bd672
--- /dev/null
+++ b/app/components/flow/device/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: 'Alat Kesehatan',
+  icon: 'i-lucide-paint-bucket',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/tools-equipment-src/device/add'),
+  },
+}
+
+async function getMaterialList() {
+  isLoading.dataListLoading = true
+
+  const resp = await xfetch('/api/v1/device')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getMaterialList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <div class="rounded-md border p-4">
+      <AppMaterialList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+  </div>
+</template>
diff --git a/app/components/flow/material/entry.vue b/app/components/flow/material/entry.vue
index b5c8c491..17d2f7c0 100644
--- a/app/components/flow/material/entry.vue
+++ b/app/components/flow/material/entry.vue
@@ -55,7 +55,7 @@ function onClick(type: string) {
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
     <Icon name="i-lucide-paint-bucket" class="me-2" />
-    <span class="font-semibold">Tambah</span> BMHP
+    <span class="font-semibold">Tambah</span> Alat Kesehatan
   </div>
   <AppMaterialEntryForm v-model="data" :errors="errors" />
   <div class="my-2 flex justify-end py-2">
diff --git a/app/pages/(features)/tools-equipment-src/device/add.vue b/app/pages/(features)/tools-equipment-src/device/add.vue
new file mode 100644
index 00000000..54f4baff
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/device/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 User',
+  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">
+    <FlowDeviceEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/tools-equipment-src/device/index.vue b/app/pages/(features)/tools-equipment-src/device/index.vue
new file mode 100644
index 00000000..464e5558
--- /dev/null
+++ b/app/pages/(features)/tools-equipment-src/device/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">
+      <FlowDeviceList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>

From 0435371e1c0bc0dd1ae81376ad767cafc46279cd Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 3 Sep 2025 15:47:07 +0700
Subject: [PATCH 7/7] feat (device): update entry form of device

---
 app/components/flow/device/entry.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/components/flow/device/entry.vue b/app/components/flow/device/entry.vue
index b5c8c491..d53afb5c 100644
--- a/app/components/flow/device/entry.vue
+++ b/app/components/flow/device/entry.vue
@@ -7,19 +7,17 @@ const data = ref({
   code: '',
   name: '',
   type: '',
-  stock: 0,
 })
 
 const schema = z.object({
   code: z.string().min(1, 'Code must be at least 1 characters long'),
   name: z.string().min(1, 'Name must be at least 1 characters long'),
   type: z.string(),
-  stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: 'Stok harus berupa angka' })),
 })
 
 function onClick(type: string) {
   if (type === 'cancel') {
-    navigateTo('/tools-equipment-src/material')
+    navigateTo('/tools-equipment-src/device')
   } else if (type === 'draft') {
     // do something
   } else if (type === 'submit') {
@@ -55,9 +53,9 @@ function onClick(type: string) {
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
     <Icon name="i-lucide-paint-bucket" class="me-2" />
-    <span class="font-semibold">Tambah</span> BMHP
+    <span class="font-semibold">Tambah</span> Alat Kesehatan
   </div>
-  <AppMaterialEntryForm v-model="data" :errors="errors" />
+  <AppDeviceEntryForm v-model="data" :errors="errors" />
   <div class="my-2 flex justify-end py-2">
     <Action @click="onClick" />
   </div>