From 71dfd6545c0ce58f39620d57e8786a3358d42d76 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 28 Aug 2025 12:13:36 +0700
Subject: [PATCH 01/35] feat: add new components for unit, division and
 installation

Add list and entry-form components for unit, division and installation modules
---
 app/components/app/divison/entry-form.vue     | 57 +++++++++++++++++++
 app/components/app/divison/list.vue           | 54 ++++++++++++++++++
 .../app/installation/entry-form.vue           | 57 +++++++++++++++++++
 app/components/app/installation/list.vue      | 54 ++++++++++++++++++
 app/components/app/unit/entry-form.vue        | 57 +++++++++++++++++++
 app/components/app/unit/list.vue              | 54 ++++++++++++++++++
 app/components/flow/division/list.vue         | 54 ++++++++++++++++++
 app/components/flow/installation/list.vue     | 54 ++++++++++++++++++
 app/components/flow/unit/list.vue             | 54 ++++++++++++++++++
 9 files changed, 495 insertions(+)
 create mode 100644 app/components/app/divison/entry-form.vue
 create mode 100644 app/components/app/divison/list.vue
 create mode 100644 app/components/app/installation/entry-form.vue
 create mode 100644 app/components/app/installation/list.vue
 create mode 100644 app/components/app/unit/entry-form.vue
 create mode 100644 app/components/app/unit/list.vue
 create mode 100644 app/components/flow/division/list.vue
 create mode 100644 app/components/flow/installation/list.vue
 create mode 100644 app/components/flow/unit/list.vue

diff --git a/app/components/app/divison/entry-form.vue b/app/components/app/divison/entry-form.vue
new file mode 100644
index 00000000..179d5feb
--- /dev/null
+++ b/app/components/app/divison/entry-form.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  id: string
+  code: string
+  name: string
+  parentId: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/app/divison/list.vue b/app/components/app/divison/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/app/divison/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/app/installation/entry-form.vue b/app/components/app/installation/entry-form.vue
new file mode 100644
index 00000000..60f45f85
--- /dev/null
+++ b/app/components/app/installation/entry-form.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  id: string
+  code: string
+  name: string
+  encounterClassCode: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/app/installation/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
new file mode 100644
index 00000000..e13df315
--- /dev/null
+++ b/app/components/app/unit/entry-form.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  id: string
+  code: string
+  name: string
+  installationId: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/app/unit/list.vue b/app/components/app/unit/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/app/unit/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/flow/division/list.vue b/app/components/flow/division/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/flow/division/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/flow/installation/list.vue b/app/components/flow/installation/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/flow/installation/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/flow/unit/list.vue b/app/components/flow/unit/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/flow/unit/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', value: string): void
+}>()
+// #endregion
+
+// #region State & Computed
+// =============================
+const count = ref(0)
+const double = computed(() => count.value * 2)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  // init code
+  fetchData()
+})
+// #endregion
+
+// #region Functions
+async function fetchData() {
+  console.log('fetched')
+}
+// #endregion region
+
+// #region Utilities & event handlers
+function increment() {
+  count.value++
+}
+// #endregion
+
+// #region Watchers
+watch(count, (newVal, oldVal) => {
+  console.log('count changed:', oldVal, '->', newVal)
+})
+// #endregion
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <p>Double: {{ double }}</p>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>

From 89710d976879c594711de728bbffa5160f69c67d Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 28 Aug 2025 15:24:14 +0700
Subject: [PATCH 02/35] feat(combobox): add reusable combobox component with
 search and selection

Implement a combobox component with search functionality and item selection. The component supports displaying item labels with optional codes, maintains selected item state, and provides customizable placeholders. Items are sorted with selected items first followed by alphabetical order.
---
 .../pub/custom-ui/form/combobox.vue           | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 app/components/pub/custom-ui/form/combobox.vue

diff --git a/app/components/pub/custom-ui/form/combobox.vue b/app/components/pub/custom-ui/form/combobox.vue
new file mode 100644
index 00000000..74da7025
--- /dev/null
+++ b/app/components/pub/custom-ui/form/combobox.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+interface Item {
+  value: string
+  label: string
+  code?: string
+}
+
+const props = defineProps<{
+  modelValue?: string
+  items: Item[]
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyMessage?: string
+  class?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const open = ref(false)
+
+const selectedItem = computed(() =>
+  props.items.find(item => item.value === props.modelValue),
+)
+
+const displayText = computed(() =>
+  selectedItem.value?.label || props.placeholder || '---pilih item',
+)
+
+// Create searchable items with combined code and label for better search
+// Sort by:
+//  1. Selected item first (highest priority)
+//  2. Then by label alphabetically
+const searchableItems = computed(() => {
+  const itemsWithSearch = props.items.map(item => ({
+    ...item,
+    searchValue: `${item.code || ''} ${item.label}`.trim(),
+    isSelected: item.value === props.modelValue,
+  }))
+
+  return itemsWithSearch.sort((a, b) => {
+    // Selected item always comes first
+    if (a.isSelected && !b.isSelected) return -1
+    if (!a.isSelected && b.isSelected) return 1
+
+    // If neither or both are selected, sort by label alphabetically
+    return a.label.localeCompare(b.label)
+  })
+})
+
+function onSelect(item: Item) {
+  emit('update:modelValue', item.value)
+  open.value = false
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+      variant="outline" role="combobox" :aria-expanded="open" :class="cn(
+        'w-full justify-between border-black bg-white hover:bg-gray-50 text-sm font-normal',
+        !modelValue && 'text-muted-foreground',
+        props.class,
+      )"
+      >
+        {{ displayText }}
+        <Icon name="i-lucide-chevrons-up-down" class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-full p-0">
+      <Command>
+        <CommandInput class="h-9" :placeholder="searchPlaceholder || 'Cari...'" />
+        <CommandEmpty>{{ emptyMessage || 'Item tidak ditemukan.' }}</CommandEmpty>
+        <CommandList>
+          <CommandGroup>
+            <CommandItem v-for="item in searchableItems" :key="item.value" :value="item.searchValue" @select="onSelect(item)">
+              <div class="flex items-center justify-between w-full">
+                <span>{{ item.label }}</span>
+                <div class="flex items-center gap-2">
+                  <span v-if="item.code" class="text-xs text-muted-foreground">{{ item.code }}</span>
+                  <Icon
+                    name="i-lucide-check"
+                    :class="cn(
+                      'h-4 w-4',
+                      modelValue === item.value ? 'opacity-100' : 'opacity-0',
+                    )"
+                  />
+                </div>
+              </div>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>

From 2a74c0a2c7d6bb02f7ef85cf0a219fc5ee1d8713 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 28 Aug 2025 15:29:48 +0700
Subject: [PATCH 03/35] feat(division): add entry form and view components for
 division management

---
 app/components/app/divison/entry-form.vue | 98 ++++++++++++-----------
 app/components/flow/division/entry.vue    | 32 ++++++++
 2 files changed, 82 insertions(+), 48 deletions(-)
 create mode 100644 app/components/flow/division/entry.vue

diff --git a/app/components/app/divison/entry-form.vue b/app/components/app/divison/entry-form.vue
index 179d5feb..c1b955b5 100644
--- a/app/components/app/divison/entry-form.vue
+++ b/app/components/app/divison/entry-form.vue
@@ -1,57 +1,59 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  id: string
-  code: string
-  name: string
-  parentId: string
-}>()
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import Combobox from '~/components/pub/custom-ui/form/combobox.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 emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
 
-// #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(() => {
-  // init code
-  fetchData()
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
 })
-// #endregion
 
-// #region Functions
-async function fetchData() {
-  console.log('fetched')
-}
-// #endregion region
-
-// #region Utilities & event handlers
-function increment() {
-  count.value++
-}
-// #endregion
-
-// #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
-})
-// #endregion
+const parentDivision = [
+  { value: '1', label: 'Medical', code: 'MED' },
+  { value: '2', label: 'Nursing', code: 'NUR' },
+  { value: '3', label: 'Admin', code: 'ADM' },
+  { value: '4', label: 'Support', code: 'SUP' },
+  { value: '5', label: 'Education', code: 'EDU' },
+]
+const defParentDivision = '---pilih divisi utama'
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
-  </div>
+  <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 v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode</Label>
+            <Field>
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Divisi</Label>
+            <Field>
+              <Combobox
+                v-model="data.parentId"
+                :items="parentDivision"
+                :placeholder="defParentDivision"
+                search-placeholder="kode, nama divisi"
+                empty-message="divisi tidak ditemukan."
+              />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
 </template>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/flow/division/entry.vue b/app/components/flow/division/entry.vue
new file mode 100644
index 00000000..a3bf5f4b
--- /dev/null
+++ b/app/components/flow/division/entry.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+
+const data = ref({
+  code: '',
+  name: '',
+  parentId: 0,
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/human-src/user')
+  } 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-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Divisi
+  </div>
+  <div>
+    <AppDivisonEntryForm v-model="data" />
+  </div>
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>

From d6b288404f390851ef21787f34f487bfe409d80b Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 29 Aug 2025 10:42:07 +0700
Subject: [PATCH 04/35] feat(division): add division management pages and form
 validation

- Create new division list and add pages
- Implement form validation using zod and error handling
- Add useFormErrors composable for form error management
- Update division entry form with validation support
- Add error styling in main.css
---
 app/assets/css/main.css                       |  10 ++
 app/components/app/divison/entry-form.vue     |  41 ++++---
 app/components/flow/division/entry.vue        |  76 +++++++++++-
 app/composables/README-useFormErrors.md       |  73 +++++++++++
 app/composables/useFormErrors.ts              | 115 ++++++++++++++++++
 app/pages/(features)/org-src/division/add.vue |  41 +++++++
 .../(features)/org-src/division/index.vue     |  41 +++++++
 7 files changed, 375 insertions(+), 22 deletions(-)
 create mode 100644 app/composables/README-useFormErrors.md
 create mode 100644 app/composables/useFormErrors.ts
 create mode 100644 app/pages/(features)/org-src/division/add.vue
 create mode 100644 app/pages/(features)/org-src/division/index.vue

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 1c7eaef2..4c488385 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -327,4 +327,14 @@ body {
 .rounded-sm {
   border-radius: var(--radius-sm);
 }
+
+/* Form Error Styling */
+.field-error-info {
+  @apply text-xs ml-1;
+  color: hsl(var(--destructive));
+  /* font-size: 0.875rem; */
+  margin-top: 0.25rem;
+  line-height: 1.25;
+}
+
 /* .rounded-md { border-radius: var */
diff --git a/app/components/app/divison/entry-form.vue b/app/components/app/divison/entry-form.vue
index c1b955b5..4057cc53 100644
--- a/app/components/app/divison/entry-form.vue
+++ b/app/components/app/divison/entry-form.vue
@@ -1,26 +1,33 @@
 <script setup lang="ts">
+import type { FormErrors } from '~/composables/useFormErrors'
 import Block from '~/components/pub/custom-ui/form/block.vue'
 import Combobox from '~/components/pub/custom-ui/form/combobox.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 props = defineProps<{
+  modelValue: any
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  errors?: FormErrors
+}>()
 const emit = defineEmits(['update:modelValue', 'event'])
 
 const data = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 })
-
-const parentDivision = [
-  { value: '1', label: 'Medical', code: 'MED' },
-  { value: '2', label: 'Nursing', code: 'NUR' },
-  { value: '3', label: 'Admin', code: 'ADM' },
-  { value: '4', label: 'Support', code: 'SUP' },
-  { value: '5', label: 'Education', code: 'EDU' },
-]
-const defParentDivision = '---pilih divisi utama'
 </script>
 
 <template>
@@ -30,25 +37,25 @@ const defParentDivision = '---pilih divisi utama'
         <Block>
           <FieldGroup :column="2">
             <Label>Nama</Label>
-            <Field>
+            <Field id="name" :errors="errors">
               <Input v-model="data.name" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
             <Label>Kode</Label>
-            <Field>
+            <Field id="code" :errors="errors">
               <Input v-model="data.code" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
             <Label>Divisi</Label>
-            <Field>
+            <Field id="parentId" :errors="errors">
               <Combobox
                 v-model="data.parentId"
-                :items="parentDivision"
-                :placeholder="defParentDivision"
-                search-placeholder="kode, nama divisi"
-                empty-message="divisi tidak ditemukan."
+                :items="props.division.items"
+                :placeholder="props.division.msg.placeholder"
+                :search-placeholder="props.division.msg.search"
+                :empty-message="props.division.msg.empty"
               />
             </Field>
           </FieldGroup>
diff --git a/app/components/flow/division/entry.vue b/app/components/flow/division/entry.vue
index a3bf5f4b..cdd237ac 100644
--- a/app/components/flow/division/entry.vue
+++ b/app/components/flow/division/entry.vue
@@ -1,19 +1,85 @@
 <script setup lang="ts">
-import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+import * as z from 'zod'
+import Action from '~/components/pub/custom-ui/nav-footer/ba-su.vue'
+
+const { errors, setFromZodError, clearErrors } = useFormErrors()
 
 const data = ref({
   code: '',
   name: '',
-  parentId: 0,
+  parentId: '',
+})
+
+const division = {
+  msg: {
+    placeholder: '---pilih divisi utama',
+    search: 'kode, nama divisi',
+    empty: 'divisi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Medical', code: 'MED' },
+    { value: '2', label: 'Nursing', code: 'NUR' },
+    { value: '3', label: 'Admin', code: 'ADM' },
+    { value: '4', label: 'Support', code: 'SUP' },
+    { value: '5', label: 'Education', code: 'EDU' },
+    { value: '6', label: 'Pharmacy', code: 'PHA' },
+    { value: '7', label: 'Radiology', code: 'RAD' },
+    { value: '8', label: 'Laboratory', code: 'LAB' },
+    { value: '9', label: 'Finance', code: 'FIN' },
+    { value: '10', label: 'Human Resources', code: 'HR' },
+    { value: '11', label: 'IT Services', code: 'ITS' },
+    { value: '12', label: 'Maintenance', code: 'MNT' },
+    { value: '13', label: 'Catering', code: 'CAT' },
+    { value: '14', label: 'Security', code: 'SEC' },
+    { value: '15', label: 'Emergency', code: 'EMR' },
+    { value: '16', label: 'Surgery', code: 'SUR' },
+    { value: '17', label: 'Outpatient', code: 'OUT' },
+    { value: '18', label: 'Inpatient', code: 'INP' },
+    { value: '19', label: 'Rehabilitation', code: 'REB' },
+    { value: '20', label: 'Research', code: 'RSH' },
+  ],
+}
+
+const schema = z.object({
+  name: z.string().min(1, 'Nama divisi harus diisi'),
+  code: z.string().min(1, 'Kode divisi harus diisi'),
+  parentId: z.preprocess(
+    (input: unknown) => {
+      if (typeof input === 'string') {
+        // Handle empty string case
+        if (input.trim() === '') {
+          return 0
+        }
+        return Number(input)
+      }
+
+      return input
+    },
+    z.number().refine((num) => num > 0, 'Divisi harus dipilih'),
+  ),
 })
 
 function onClick(type: string) {
   if (type === 'cancel') {
-    navigateTo('/human-src/user')
+    navigateTo('/org-src/division')
   } else if (type === 'draft') {
     // do something
   } else if (type === 'submit') {
-    // do something
+    // Clear previous errors
+    clearErrors()
+
+    const requestData = schema.safeParse(data.value)
+    if (!requestData.success) {
+      // Set errors menggunakan composable
+      setFromZodError(requestData.error)
+
+      // Optional: tampilkan toast notification untuk error general
+      console.warn('Form validation failed:', requestData.error)
+      return
+    }
+
+    console.log('Form data valid:', requestData.data)
+    // do something with valid data
   }
 }
 </script>
@@ -24,7 +90,7 @@ function onClick(type: string) {
     <span class="font-semibold">Tambah</span> Divisi
   </div>
   <div>
-    <AppDivisonEntryForm v-model="data" />
+    <AppDivisonEntryForm v-model="data" :errors="errors" :division="division" />
   </div>
   <div class="my-2 flex justify-end py-2">
     <Action @click="onClick" />
diff --git a/app/composables/README-useFormErrors.md b/app/composables/README-useFormErrors.md
new file mode 100644
index 00000000..48acdedb
--- /dev/null
+++ b/app/composables/README-useFormErrors.md
@@ -0,0 +1,73 @@
+# useFormErrors Composable
+
+Composable untuk menangani form validation errors seperti Laravel. Mengkonversi ZodError menjadi format yang mudah digunakan di template.
+
+## Penggunaan
+
+### Basic Usage
+
+```typescript
+// Di component parent (entry.vue)
+const { errors, setFromZodError, clearErrors } = useFormErrors()
+
+// Validasi dengan Zod
+const result = schema.safeParse(data.value)
+if (!result.success) {
+  setFromZodError(result.error)
+  return
+}
+```
+
+### Di Template
+
+```vue
+<!-- Pass errors ke form component -->
+<AppDivisonEntryForm v-model="data" :errors="errors" />
+```
+
+### Di Form Component
+
+```vue
+<script setup>
+import type { FormErrors } from '~/composables/useFormErrors'
+
+const props = defineProps<{ 
+  modelValue: any
+  errors?: FormErrors
+}>()
+</script>
+
+<template>
+  <!-- Setiap Field harus memiliki id yang sesuai dengan field name -->
+  <Field id="name" :errors="errors">
+    <Input v-model="data.name" />
+  </Field>
+</template>
+```
+
+## API Reference
+
+### Methods
+
+- `setFromZodError(zodError)` - Set errors dari ZodError
+- `setErrors(errors)` - Set errors manual
+- `setError(field, message)` - Set error untuk field tertentu
+- `clearError(field)` - Hapus error untuk field tertentu
+- `clearErrors()` - Hapus semua errors
+- `hasError(field)` - Cek apakah ada error untuk field
+- `getError(field)` - Ambil error message untuk field
+
+### Computed Properties
+
+- `hasErrors` - Boolean apakah ada error
+- `errorMessages` - Array semua error messages
+- `firstError` - Error pertama (untuk alert general)
+
+## Field Component
+
+Field component akan otomatis menampilkan error jika:
+1. Field memiliki `id` prop yang sesuai dengan field name
+2. Field menerima `errors` prop
+3. Ada error untuk field tersebut di dalam errors object
+
+Error akan ditampilkan dengan class `.field-error-info` yang sudah di-style dengan warna merah.
diff --git a/app/composables/useFormErrors.ts b/app/composables/useFormErrors.ts
new file mode 100644
index 00000000..03c95e97
--- /dev/null
+++ b/app/composables/useFormErrors.ts
@@ -0,0 +1,115 @@
+import type { ZodError } from 'zod'
+
+export interface XError {
+  message: string
+  [key: string]: any
+}
+
+export interface FormErrors {
+  [field: string]: XError
+}
+
+/**
+ * Composable untuk menangani form validation errors seperti Laravel
+ * Mengkonversi ZodError menjadi format yang mudah digunakan di template
+ */
+export function useFormErrors() {
+  const errors = ref<FormErrors>({})
+
+  /**
+   * Set errors dari ZodError
+   */
+  function setFromZodError(zodError: ZodError) {
+    const newErrors: FormErrors = {}
+
+    zodError.errors.forEach((error) => {
+      const field = error.path.join('.')
+      newErrors[field] = {
+        message: error.message,
+        code: error.code,
+        path: error.path,
+      }
+    })
+
+    errors.value = newErrors
+  }
+
+  /**
+   * Set errors manual (untuk error dari API response)
+   */
+  function setErrors(newErrors: FormErrors) {
+    errors.value = newErrors
+  }
+
+  /**
+   * Set error untuk field tertentu
+   */
+  function setError(field: string, message: string, extra: Record<string, any> = {}) {
+    errors.value[field] = {
+      message,
+      ...extra,
+    }
+  }
+
+  /**
+   * Hapus error untuk field tertentu
+   */
+  function clearError(field: string) {
+    delete errors.value[field]
+  }
+
+  /**
+   * Hapus semua errors
+   */
+  function clearErrors() {
+    errors.value = {}
+  }
+
+  /**
+   * Cek apakah ada error untuk field tertentu
+   */
+  function hasError(field: string): boolean {
+    return !!errors.value[field]
+  }
+
+  /**
+   * Ambil error message untuk field tertentu
+   */
+  function getError(field: string): string | null {
+    return errors.value[field]?.message || null
+  }
+
+  /**
+   * Cek apakah ada error apapun
+   */
+  const hasErrors = computed(() => Object.keys(errors.value).length > 0)
+
+  /**
+   * Ambil semua error messages sebagai array
+   */
+  const errorMessages = computed(() =>
+    Object.values(errors.value).map(error => error.message),
+  )
+
+  /**
+   * Ambil error pertama (untuk menampilkan alert general)
+   */
+  const firstError = computed(() => {
+    const firstKey = Object.keys(errors.value)[0]
+    return firstKey ? errors.value[firstKey] : null
+  })
+
+  return {
+    errors: readonly(errors),
+    setFromZodError,
+    setErrors,
+    setError,
+    clearError,
+    clearErrors,
+    hasError,
+    getError,
+    hasErrors,
+    errorMessages,
+    firstError,
+  }
+}
diff --git a/app/pages/(features)/org-src/division/add.vue b/app/pages/(features)/org-src/division/add.vue
new file mode 100644
index 00000000..122e6ce3
--- /dev/null
+++ b/app/pages/(features)/org-src/division/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 Divisi',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// 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)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <FlowDivisionEntry />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/org-src/division/index.vue b/app/pages/(features)/org-src/division/index.vue
new file mode 100644
index 00000000..6e08748b
--- /dev/null
+++ b/app/pages/(features)/org-src/division/index.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: 'List Division',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// 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)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      route division list
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>

From ee3bb1cd6e5eb5b1334c0c0b729e58b3d84c1d1b Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 29 Aug 2025 11:02:31 +0700
Subject: [PATCH 05/35] refactor(error): move error types to centralized
 location

Consolidate XError, XErrors, and FormErrors types into a single file for better maintainability and consistency across the codebase.
---
 app/components/app/divison/entry-form.vue |  2 +-
 app/composables/useFormErrors.ts          | 10 +--------
 app/composables/useXfetch.ts              | 10 +--------
 app/types/error.ts                        | 27 +++++++++++++++++++++++
 4 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 app/types/error.ts

diff --git a/app/components/app/divison/entry-form.vue b/app/components/app/divison/entry-form.vue
index 4057cc53..348f440e 100644
--- a/app/components/app/divison/entry-form.vue
+++ b/app/components/app/divison/entry-form.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FormErrors } from '~/composables/useFormErrors'
+import type { FormErrors } from '~/types/error'
 import Block from '~/components/pub/custom-ui/form/block.vue'
 import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
 import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
diff --git a/app/composables/useFormErrors.ts b/app/composables/useFormErrors.ts
index 03c95e97..2907540f 100644
--- a/app/composables/useFormErrors.ts
+++ b/app/composables/useFormErrors.ts
@@ -1,13 +1,5 @@
 import type { ZodError } from 'zod'
-
-export interface XError {
-  message: string
-  [key: string]: any
-}
-
-export interface FormErrors {
-  [field: string]: XError
-}
+import type { FormErrors } from '~/types/error'
 
 /**
  * Composable untuk menangani form validation errors seperti Laravel
diff --git a/app/composables/useXfetch.ts b/app/composables/useXfetch.ts
index 3f27c07f..87d69f97 100644
--- a/app/composables/useXfetch.ts
+++ b/app/composables/useXfetch.ts
@@ -1,13 +1,5 @@
 import type { Pinia } from 'pinia'
-
-export interface XError {
-  code: string
-  message: string
-  expectedVal?: string
-  givenVal?: string
-}
-
-export type XErrors = Record<string, XError>
+import type { XError, XErrors } from '~/types/error'
 
 export interface XfetchResult {
   success: boolean
diff --git a/app/types/error.ts b/app/types/error.ts
new file mode 100644
index 00000000..e1405b0d
--- /dev/null
+++ b/app/types/error.ts
@@ -0,0 +1,27 @@
+/**
+ * Base interface untuk error yang digunakan di seluruh aplikasi
+ */
+export interface XError {
+  /** Pesan error yang akan ditampilkan */
+  message: string
+  /** Kode error (opsional) */
+  code?: string
+  /** Nilai yang diharapkan (untuk validasi) */
+  expectedVal?: string
+  /** Nilai yang diberikan (untuk validasi) */
+  givenVal?: string
+  /** Path field yang error (untuk form validation) */
+  path?: (string | number)[]
+  /** Properties tambahan lainnya */
+  [key: string]: any
+}
+
+/**
+ * Collection of errors dengan key sebagai field name
+ */
+export type XErrors = Record<string, XError>
+
+/**
+ * Form errors type alias untuk kompatibilitas
+ */
+export type FormErrors = XErrors

From 5e1775d05750e673ec04894b0306e2bab69d9c88 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 29 Aug 2025 11:14:19 +0700
Subject: [PATCH 06/35] feat(unit): add unit management pages and form
 components

- Create new unit list and add pages under org-src feature
- Implement unit entry form with validation using zod
- Update error types to support readonly path property
- Refactor field component to use shared error type
---
 app/components/app/unit/entry-form.vue      | 105 +++++++++++---------
 app/components/flow/unit/entry.vue          |  98 ++++++++++++++++++
 app/components/pub/custom-ui/form/field.vue |   9 +-
 app/pages/(features)/org-src/unit/add.vue   |  41 ++++++++
 app/pages/(features)/org-src/unit/index.vue |  41 ++++++++
 app/types/error.ts                          |   2 +-
 6 files changed, 241 insertions(+), 55 deletions(-)
 create mode 100644 app/components/flow/unit/entry.vue
 create mode 100644 app/pages/(features)/org-src/unit/add.vue
 create mode 100644 app/pages/(features)/org-src/unit/index.vue

diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
index e13df315..c8581f4e 100644
--- a/app/components/app/unit/entry-form.vue
+++ b/app/components/app/unit/entry-form.vue
@@ -1,57 +1,66 @@
 <script setup lang="ts">
-// #region Props & Emits
+import type { FormErrors } from '~/types/error'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import Combobox from '~/components/pub/custom-ui/form/combobox.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<{
-  id: string
-  code: string
-  name: string
-  installationId: string
+  modelValue: any
+  installation: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  errors?: FormErrors
 }>()
+const emit = defineEmits(['update:modelValue', 'event'])
 
-const emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
-
-// #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(() => {
-  // init code
-  fetchData()
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
 })
-// #endregion
-
-// #region Functions
-async function fetchData() {
-  console.log('fetched')
-}
-// #endregion region
-
-// #region Utilities & event handlers
-function increment() {
-  count.value++
-}
-// #endregion
-
-// #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
-})
-// #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
-  </div>
+  <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 id="name" :errors="errors">
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode</Label>
+            <Field id="code" :errors="errors">
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Instalasi</Label>
+            <Field id="parentId" :errors="errors">
+              <Combobox
+                v-model="data.parentId"
+                :items="props.installation.items"
+                :placeholder="props.installation.msg.placeholder"
+                :search-placeholder="props.installation.msg.search"
+                :empty-message="props.installation.msg.empty"
+              />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
 </template>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/flow/unit/entry.vue b/app/components/flow/unit/entry.vue
new file mode 100644
index 00000000..323e6649
--- /dev/null
+++ b/app/components/flow/unit/entry.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import Action from '~/components/pub/custom-ui/nav-footer/ba-su.vue'
+
+const { errors, setFromZodError, clearErrors } = useFormErrors()
+
+const data = ref({
+  code: '',
+  name: '',
+  parentId: '',
+})
+
+const installation = {
+  msg: {
+    placeholder: '---pilih instalasi utama',
+    search: 'kode, nama instalasi',
+    empty: 'instalasi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Instalasi Medis', code: 'MED' },
+    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
+    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
+    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
+    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
+    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
+    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
+    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
+    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
+    { value: '10', label: 'Instalasi SDM', code: 'HR' },
+    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
+    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
+    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
+    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
+    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
+    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
+    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
+    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
+    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
+    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
+  ],
+}
+
+const schema = z.object({
+  name: z.string().min(1, 'Nama unit harus diisi'),
+  code: z.string().min(1, 'Kode unit harus diisi'),
+  parentId: z.preprocess(
+    (input: unknown) => {
+      if (typeof input === 'string') {
+        // Handle empty string case
+        if (input.trim() === '') {
+          return 0
+        }
+        return Number(input)
+      }
+
+      return input
+    },
+    z.number().refine((num) => num > 0, 'Instalasi induk harus dipilih'),
+  ),
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/org-src/unit')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // Clear previous errors
+    clearErrors()
+
+    const requestData = schema.safeParse(data.value)
+    if (!requestData.success) {
+      // Set errors menggunakan composable
+      setFromZodError(requestData.error)
+
+      // Optional: tampilkan toast notification untuk error general
+      console.warn('Form validation failed:', requestData.error)
+      return
+    }
+
+    console.log('Form data valid:', requestData.data)
+    // do something with valid data
+  }
+}
+</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> Unit
+  </div>
+  <div>
+    <AppUnitEntryForm v-model="data" :errors="errors" :installation="installation" />
+  </div>
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/form/field.vue b/app/components/pub/custom-ui/form/field.vue
index 977e66cd..96497be5 100644
--- a/app/components/pub/custom-ui/form/field.vue
+++ b/app/components/pub/custom-ui/form/field.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-export interface XError {
-  message: string
-  [key: string]: any
-}
+import type { XErrors } from '~/types/error'
 
 defineProps<{
   id?: string
-  errors?: Record<string, XError>
+  errors?: XErrors
 }>()
 </script>
 
@@ -14,7 +11,7 @@ defineProps<{
   <div class="grow">
     <slot />
     <div v-if="id && errors?.[id]" class="field-error-info">
-      {{ errors[id].message }}
+      {{ errors[id]?.message }}
     </div>
   </div>
 </template>
diff --git a/app/pages/(features)/org-src/unit/add.vue b/app/pages/(features)/org-src/unit/add.vue
new file mode 100644
index 00000000..195f4b24
--- /dev/null
+++ b/app/pages/(features)/org-src/unit/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 Unit Instalasi',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// 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)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <FlowUnitEntry />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/org-src/unit/index.vue b/app/pages/(features)/org-src/unit/index.vue
new file mode 100644
index 00000000..40bd09be
--- /dev/null
+++ b/app/pages/(features)/org-src/unit/index.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: 'List Division',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// 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)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      route unit list
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/types/error.ts b/app/types/error.ts
index e1405b0d..78b4ed50 100644
--- a/app/types/error.ts
+++ b/app/types/error.ts
@@ -11,7 +11,7 @@ export interface XError {
   /** Nilai yang diberikan (untuk validasi) */
   givenVal?: string
   /** Path field yang error (untuk form validation) */
-  path?: (string | number)[]
+  path?: readonly (string | number)[]
   /** Properties tambahan lainnya */
   [key: string]: any
 }

From 529b8ef7df167a138b762fc5278a5b44140ffb15 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 29 Aug 2025 16:33:20 +0700
Subject: [PATCH 07/35] feat(installation): add installation entry form and
 pages

- Create new installation entry form component with validation
- Add installation list and add pages with basic routing
- Implement custom select component for encounter class selection
- Update SelectTrigger styling for better icon positioning
---
 .../app/installation/entry-form.vue           | 97 ++++++++++---------
 app/components/flow/installation/entry.vue    | 71 ++++++++++++++
 app/components/pub/custom-ui/form/select.vue  | 85 ++++++++++++++++
 .../pub/ui/select/SelectTrigger.vue           |  4 +-
 .../(features)/org-src/installation/add.vue   | 41 ++++++++
 .../(features)/org-src/installation/index.vue | 41 ++++++++
 6 files changed, 289 insertions(+), 50 deletions(-)
 create mode 100644 app/components/flow/installation/entry.vue
 create mode 100644 app/components/pub/custom-ui/form/select.vue
 create mode 100644 app/pages/(features)/org-src/installation/add.vue
 create mode 100644 app/pages/(features)/org-src/installation/index.vue

diff --git a/app/components/app/installation/entry-form.vue b/app/components/app/installation/entry-form.vue
index 60f45f85..d935a65c 100644
--- a/app/components/app/installation/entry-form.vue
+++ b/app/components/app/installation/entry-form.vue
@@ -1,57 +1,58 @@
 <script setup lang="ts">
-// #region Props & Emits
+import type { FormErrors } from '~/types/error'
+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 Select from '~/components/pub/custom-ui/form/select.vue'
+
 const props = defineProps<{
-  id: string
-  code: string
-  name: string
-  encounterClassCode: string
+  modelValue: any
+  encounterClassCode: {
+    msg: {
+      placeholder: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  errors?: FormErrors
 }>()
+const emit = defineEmits(['update:modelValue', 'event'])
 
-const emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
-
-// #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(() => {
-  // init code
-  fetchData()
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
 })
-// #endregion
-
-// #region Functions
-async function fetchData() {
-  console.log('fetched')
-}
-// #endregion region
-
-// #region Utilities & event handlers
-function increment() {
-  count.value++
-}
-// #endregion
-
-// #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
-})
-// #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
-  </div>
+  <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 id="name" :errors="errors">
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode</Label>
+            <Field id="code" :errors="errors">
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label height="compact">Encounter Code</Label>
+            <Field id="encounterClassCode" :errors="errors">
+              <Select v-model="data.encounterClassCode" :items="props.encounterClassCode.items" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
 </template>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/flow/installation/entry.vue b/app/components/flow/installation/entry.vue
new file mode 100644
index 00000000..94a4cd1f
--- /dev/null
+++ b/app/components/flow/installation/entry.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import Action from '~/components/pub/custom-ui/nav-footer/ba-su.vue'
+
+const { errors, setFromZodError, clearErrors } = useFormErrors()
+
+const data = ref({
+  code: '',
+  name: '',
+  encounterClassCode: '',
+})
+
+const installation = {
+  msg: {
+    placeholder: '---pilih encounter class (fhir7)',
+  },
+  items: [
+    { value: '1', label: 'Ambulatory', code: 'AMB' },
+    { value: '2', label: 'Inpatient', code: 'IMP' },
+    { value: '3', label: 'Emergency', code: 'EMER' },
+    { value: '4', label: 'Observation', code: 'OBSENC' },
+    { value: '5', label: 'Pre-admission', code: 'PRENC' },
+    { value: '6', label: 'Short Stay', code: 'SS' },
+    { value: '7', label: 'Virtual', code: 'VR' },
+    { value: '8', label: 'Home Health', code: 'HH' },
+  ],
+}
+
+const schema = z.object({
+  name: z.string().min(1, 'Nama instalasi harus diisi'),
+  code: z.string().min(1, 'Kode instalasi harus diisi'),
+  encounterClassCode: z.string().min(1, 'Kelompok encounter class harus dipilih'),
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/org-src/instalasion')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // Clear previous errors
+    clearErrors()
+
+    const requestData = schema.safeParse(data.value)
+    if (!requestData.success) {
+      // Set errors menggunakan composable
+      setFromZodError(requestData.error)
+
+      // Optional: tampilkan toast notification untuk error general
+      console.warn('Form validation failed:', requestData.error)
+      return
+    }
+
+    console.log('Form data valid:', requestData.data)
+    // do something with valid data
+  }
+}
+</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> Instalasi
+  </div>
+  <div>
+    <AppInstallationEntryForm v-model="data" :errors="errors" :encounter-class-code="installation" />
+  </div>
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/form/select.vue b/app/components/pub/custom-ui/form/select.vue
new file mode 100644
index 00000000..53911bb8
--- /dev/null
+++ b/app/components/pub/custom-ui/form/select.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { SelectRoot } from 'radix-vue'
+import {
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from '~/components/pub/ui/select'
+import { cn } from '~/lib/utils'
+
+interface Item {
+  value: string
+  label: string
+  code?: string
+}
+
+const props = defineProps<{
+  modelValue?: string
+  items: Item[]
+  placeholder?: string
+  label?: string
+  separator?: boolean
+  class?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Sort items with selected item first, then alphabetically
+const sortedItems = computed(() => {
+  const itemsWithSelection = props.items.map(item => ({
+    ...item,
+    isSelected: item.value === props.modelValue,
+  }))
+
+  return itemsWithSelection.sort((a, b) => {
+    // Selected item always comes first
+    if (a.isSelected && !b.isSelected) return -1
+    if (!a.isSelected && b.isSelected) return 1
+
+    // If neither or both are selected, sort by label alphabetically
+    return a.label.localeCompare(b.label)
+  })
+})
+
+function onValueChange(value: string) {
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <SelectRoot :model-value="modelValue" @update:model-value="onValueChange">
+    <SelectTrigger :class="cn('w-full', props.class)">
+      <SelectValue :placeholder="placeholder || 'Pilih item'" />
+    </SelectTrigger>
+
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel v-if="label">
+          {{ label }}
+        </SelectLabel>
+
+        <SelectItem
+          v-for="item in sortedItems"
+          :key="item.value"
+          :value="item.value"
+          class="cursor-pointer"
+        >
+          <div class="flex items-center justify-between w-full">
+            <span>{{ item.label }}</span>
+            <span v-if="item.code" class="text-xs text-muted-foreground ml-2">
+              {{ item.code }}
+            </span>
+          </div>
+        </SelectItem>
+
+        <SelectSeparator v-if="separator" />
+      </SelectGroup>
+    </SelectContent>
+  </SelectRoot>
+</template>
diff --git a/app/components/pub/ui/select/SelectTrigger.vue b/app/components/pub/ui/select/SelectTrigger.vue
index 0252a444..3cc71097 100644
--- a/app/components/pub/ui/select/SelectTrigger.vue
+++ b/app/components/pub/ui/select/SelectTrigger.vue
@@ -21,13 +21,13 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground flex h-10 w-full rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input ring-offset-background placeholder:text-muted-foreground relative flex h-10 w-full rounded-md border border-gray-400 pl-3 pr-8 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
   >
     <slot />
-    <SelectIcon as-child>
+    <SelectIcon as-child class="absolute right-3 top-1/2 -translate-y-1/2">
       <Icon name="i-radix-icons-caret-sort" class="h-4 w-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
diff --git a/app/pages/(features)/org-src/installation/add.vue b/app/pages/(features)/org-src/installation/add.vue
new file mode 100644
index 00000000..30c3e886
--- /dev/null
+++ b/app/pages/(features)/org-src/installation/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 Instalasi',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// 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)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <FlowInstallationEntry />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/org-src/installation/index.vue b/app/pages/(features)/org-src/installation/index.vue
new file mode 100644
index 00000000..a88df5c7
--- /dev/null
+++ b/app/pages/(features)/org-src/installation/index.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: 'List Division',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// 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)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      route installation list
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>

From b1b324e68839c767af60aba8702610035645a6d0 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 1 Sep 2025 11:35:02 +0700
Subject: [PATCH 08/35] refactor(data-table): improve type safety and component
 rendering

- Replace generic 'any' types with specific type imports for better type safety
- Add optional chaining for funcComponent to prevent potential runtime errors
- Update funcHtml and funcParsed to include rowIndex parameter in callbacks
---
 .../pub/base/data-table/data-table.vue        | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index 6524aaa8..8bc50758 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import type { DataTableLoader } from './type'
+import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/custom-ui/data/types'
 import { Info } from 'lucide-vue-next'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
 
 defineProps<{
   rows: unknown[]
-  cols: any[]
-  header: any[]
+  cols: Col[]
+  header: Th[][]
   keys: string[]
-  funcParsed: Record<string, (row: any) => any>
-  funcHtml: Record<string, (row: any) => string>
-  funcComponent: Record<string, (row: any, idx: number) => any>
+  funcParsed: RecStrFuncUnknown
+  funcHtml: RecStrFuncUnknown
+  funcComponent: RecStrFuncComponent
 }>()
 
 const loader = inject('table_data_loader') as DataTableLoader
@@ -52,16 +53,17 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
           <!-- If funcComponent has a renderer -->
           <component
-:is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
-            v-bind="funcComponent[key](row, rowIndex)"
-/>
+            :is="funcComponent[key]?.(row, rowIndex).component"
+            v-if="funcComponent[key]"
+            v-bind="funcComponent[key]?.(row, rowIndex)"
+          />
           <!-- If funcParsed or funcHtml returns a value -->
           <template v-else>
             <!-- Use v-html for funcHtml to render HTML content -->
-            <div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row)"></div>
+            <div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row, rowIndex)"></div>
             <!-- Use normal interpolation for funcParsed and regular data -->
             <template v-else>
-              {{ funcParsed[key]?.(row) ?? (row as any)[key] }}
+              {{ funcParsed[key]?.(row, rowIndex) ?? (row as any)[key] }}
             </template>
           </template>
         </TableCell>

From 132068fcde935290388196fea6a241b2463dcab8 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 1 Sep 2025 14:45:32 +0700
Subject: [PATCH 09/35] feat(division): implement division list with pagination
 and search

- Add schema validation for query parameters
- Create pagination component with type definitions
- Implement division list view with search functionality
- Add data table configuration for division listing
- Handle pagination state and URL synchronization
---
 app/components/app/divison/list-cfg.ts        |  80 +++++++++
 app/components/app/divison/list.vue           | 100 ++++++-----
 app/components/flow/division/list.vue         | 165 +++++++++++++++---
 app/components/flow/division/schema.query.ts  |  15 ++
 app/components/pub/custom-ui/data/types.ts    |   8 +-
 .../pub/custom-ui/nav-header/header.vue       | 134 +++++++++++++-
 .../custom-ui/pagination/pagination.type.ts   |  13 ++
 .../pub/custom-ui/pagination/pagination.vue   | 112 ++++++++++++
 .../(features)/org-src/division/index.vue     |   4 +-
 9 files changed, 556 insertions(+), 75 deletions(-)
 create mode 100644 app/components/app/divison/list-cfg.ts
 create mode 100644 app/components/flow/division/schema.query.ts
 create mode 100644 app/components/pub/custom-ui/pagination/pagination.type.ts
 create mode 100644 app/components/pub/custom-ui/pagination/pagination.vue

diff --git a/app/components/app/divison/list-cfg.ts b/app/components/app/divison/list-cfg.ts
new file mode 100644
index 00000000..45cfcd6f
--- /dev/null
+++ b/app/components/app/divison/list-cfg.ts
@@ -0,0 +1,80 @@
+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[] = [
+  {},
+  {},
+  {},
+  {},
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Id' },
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Kelompok' },
+  ],
+]
+
+export const keys = [
+  'id',
+  'cellphone',
+  'firstName',
+  'birth_place',
+]
+
+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
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/divison/list.vue b/app/components/app/divison/list.vue
index d3a63407..3aecc2e8 100644
--- a/app/components/app/divison/list.vue
+++ b/app/components/app/divison/list.vue
@@ -1,54 +1,72 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta?: PaginationMeta
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: 'update', value: string): void
+  pageChange: [page: number]
 }>()
-// #endregion
 
-// #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(() => {
-  // init code
-  fetchData()
-})
-// #endregion
-
-// #region Functions
-async function fetchData() {
-  console.log('fetched')
+function handlePageChange(page: number) {
+  emit('pageChange', page)
 }
-// #endregion region
 
-// #region Utilities & event handlers
-function increment() {
-  count.value++
-}
-// #endregion
-
-// #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
+// Computed properties for formatted display
+const formattedRecordCount = computed(() => {
+  if (!props.paginationMeta) return '0'
+  const count = props.paginationMeta.recordCount
+  if (count == null || count === undefined) return '0'
+  return Number(count).toLocaleString('id-ID')
+})
+
+const startRecord = computed(() => {
+  if (!props.paginationMeta) return 1
+  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+})
+
+const endRecord = computed(() => {
+  if (!props.paginationMeta) return 0
+  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
 })
-// #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+        />
+
+    <!-- Data info and pagination -->
+    <div v-if="paginationMeta" class="flex align-center justify-between">
+      <!-- Data info - always show -->
+      <div class="flex items-center justify-between px-2 mb-4">
+        <div class="flex-1 text-sm text-muted-foreground">
+          Menampilkan {{ startRecord }}
+          hingga {{ endRecord }}
+          dari {{ formattedRecordCount }} data
+        </div>
+      </div>
+
+      <!-- Pagination controls - only show when multiple pages -->
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubCustomUiPagination
+          :pagination-meta="paginationMeta"
+          :show-info="false"
+          @page-change="handlePageChange"
+        />
+      </div>
+    </div>
   </div>
 </template>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/flow/division/list.vue b/app/components/flow/division/list.vue
index d3a63407..28f514b6 100644
--- a/app/components/flow/division/list.vue
+++ b/app/components/flow/division/list.vue
@@ -1,51 +1,166 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { refDebounced, useUrlSearchParams } from '@vueuse/core'
+import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { defaultQuery, querySchema } from './schema.query'
 
 // #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+// URL state management
+const queryParams = useUrlSearchParams('history', {
+  initialValue: defaultQuery,
+  removeFalsyValues: true,
+})
+
+const params = computed(() => {
+  const result = querySchema.safeParse(queryParams)
+  return result.data || defaultQuery
+})
+
+// Pagination state - computed from URL params
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: 0,
+  page: params.value.page,
+  pageSize: params.value.pageSize,
+  totalPage: 0,
+  hasNext: false,
+  hasPrev: false,
+})
+
+// Search model with debounce
+const searchInput = ref(params.value.q || '')
+const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+
+const headerPrep: HeaderPrep = {
+  title: 'Divisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Divisi',
+    icon: 'i-lucide-send',
+    // todo: open modal form
+    onClick: () => navigateTo('/org-src/division/add'),
+  },
+}
+
+provide('table_data_loader', isLoading)
 // #endregion
 
 // #region Lifecycle Hooks
 onMounted(() => {
-  // init code
-  fetchData()
+  getDivisionList()
 })
 // #endregion
 
 // #region Functions
-async function fetchData() {
-  console.log('fetched')
+async function getDivisionList() {
+  isLoading.isTableLoading = true
+
+  try {
+    // Use current params from URL state
+    const currentParams = params.value
+
+    // Prepare query parameters for pagination and search
+    const urlParams = new URLSearchParams({
+      'page-number': currentParams.page.toString(),
+      'page-size': currentParams.pageSize.toString(),
+    })
+
+    if (currentParams.q) {
+      urlParams.append('search', currentParams.q)
+    }
+
+    const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+
+    if (resp.success) {
+      const responseBody = resp.body as Record<string, any>
+      data.value = responseBody.data || []
+
+      const pager = responseBody.meta
+      // Update pagination meta from response
+      // Fallback if meta is not provided by API
+      paginationMeta.recordCount = pager.record_totalCount
+      paginationMeta.page = currentParams.page
+      paginationMeta.pageSize = currentParams.pageSize
+      paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
+      paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+      paginationMeta.hasPrev = paginationMeta.page > 1
+    }
+  } catch (error) {
+    console.error('Error fetching division list:', error)
+    data.value = []
+    paginationMeta.recordCount = 0
+    paginationMeta.totalPage = 0
+    paginationMeta.hasNext = false
+    paginationMeta.hasPrev = false
+  } finally {
+    isLoading.isTableLoading = false
+  }
 }
+
+// Handle pagination page change
+function handlePageChange(page: number) {
+  // Update URL params - this will trigger watcher
+  queryParams.page = page
+}
+
 // #endregion region
 
 // #region Utilities & event handlers
-function increment() {
-  count.value++
-}
 // #endregion
 
 // #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
+// Watch for URL param changes and trigger refetch
+watch(params, (newParams) => {
+  // Sync search input with URL params (for back/forward navigation)
+  if (newParams.q !== searchInput.value) {
+    searchInput.value = newParams.q || ''
+  }
+  getDivisionList()
+}, { deep: true })
+
+// Handle search from header component
+function handleSearch(searchValue: string) {
+  // Update URL params - this will trigger watcher and refetch data
+  queryParams.q = searchValue
+  queryParams.page = 1 // Reset to first page when searching
+}
+
+// Watch debounced search and update URL params (keeping for backward compatibility)
+watch(debouncedSearch, (newValue) => {
+  // Only search if 3+ characters or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= 3) {
+    queryParams.q = newValue
+    queryParams.page = 1 // Reset to first page when searching
+  }
 })
 // #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
 
diff --git a/app/components/flow/division/schema.query.ts b/app/components/flow/division/schema.query.ts
new file mode 100644
index 00000000..9b1a4606
--- /dev/null
+++ b/app/components/flow/division/schema.query.ts
@@ -0,0 +1,15 @@
+import * as z from 'zod'
+
+export const querySchema = z.object({
+  q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
+  page: z.coerce.number().int().min(1).default(1).catch(1),
+  pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
+})
+
+export const defaultQuery = {
+  q: '',
+  page: 1,
+  pageSize: 10,
+}
+
+export type QueryParams = z.infer<typeof querySchema>
diff --git a/app/components/pub/custom-ui/data/types.ts b/app/components/pub/custom-ui/data/types.ts
index c1dbe8d3..52f5753c 100644
--- a/app/components/pub/custom-ui/data/types.ts
+++ b/app/components/pub/custom-ui/data/types.ts
@@ -36,7 +36,7 @@ export interface Th {
 }
 
 export interface ButtonNav {
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'negative' | 'ghost' | 'link'
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
   classVal?: string
   classValExt?: string
   icon?: string
@@ -56,6 +56,12 @@ export interface QuickSearchNav {
 }
 
 export interface RefSearchNav {
+  modelValue?: string
+  placeholder?: string
+  minLength?: number
+  debounceMs?: number
+  inputClass?: string
+  showValidationFeedback?: boolean
   onInput: (val: string) => void
   onClick: () => void
   onClear: () => void
diff --git a/app/components/pub/custom-ui/nav-header/header.vue b/app/components/pub/custom-ui/nav-header/header.vue
index 2f8ebb4e..8b81d3f3 100644
--- a/app/components/pub/custom-ui/nav-header/header.vue
+++ b/app/components/pub/custom-ui/nav-header/header.vue
@@ -1,18 +1,140 @@
 <script setup lang="ts">
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { refDebounced } from '@vueuse/core'
 
 const props = defineProps<{
   prep: HeaderPrep
-  refSearchNav: RefSearchNav
+  modelValue?: string
 }>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'search': [value: string]
+}>()
+
+// Internal search state
+const searchInput = ref(props.modelValue || '')
+const debouncedSearch = refDebounced(searchInput, props.prep.refSearchNav?.debounceMs || 500)
+
+// Computed search model for v-model
+const searchModel = computed({
+  get: () => searchInput.value,
+  set: (value: string) => {
+    searchInput.value = value
+    emit('update:modelValue', value)
+  },
+})
+
+// Watch for external changes to modelValue
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== searchInput.value) {
+    searchInput.value = newValue || ''
+  }
+})
+
+// Watch debounced search and emit search event
+watch(debouncedSearch, (newValue) => {
+  const minLength = props.prep.refSearchNav?.minLength || 3
+  // Only search if meets minimum length or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= minLength) {
+    emit('search', newValue)
+    props.prep.refSearchNav?.onInput(newValue)
+  }
+})
+
+// Handle clear search
+function clearSearch() {
+  searchModel.value = ''
+  props.prep.refSearchNav?.onClear()
+}
 </script>
 
 <template>
   <header>
-    <div class="flex items-center">
-      <div class="ml-3 text-lg font-bold text-gray-900">
-        <Icon :name="props.prep.icon!" class="mr-2 h-4 w-4 align-middle" />
-        {{ props.prep.title }}
+    <div class="flex items-center justify-between">
+      <div class="flex items-center">
+        <div class="ml-3 text-lg font-bold text-gray-900">
+          <Icon :name="props.prep.icon!" class="mr-2 size-4 md:size-6 align-middle" />
+          {{ props.prep.title }}
+        </div>
+      </div>
+
+      <div class="flex items-center">
+        <!-- Search Section -->
+        <div v-if="props.prep.refSearchNav" class="ml-3 text-lg text-gray-900 relative">
+          <div class="relative">
+            <Input
+              v-model="searchModel"
+              type="text"
+              class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+              :class="[
+                props.prep.refSearchNav.inputClass,
+                {
+                  'border-amber-300 bg-amber-50': searchInput.length > 0 && searchInput.length < (props.prep.refSearchNav.minLength || 3),
+                  'border-green-300 bg-green-50': searchInput.length >= (props.prep.refSearchNav.minLength || 3),
+                },
+              ]"
+              :placeholder="props.prep.refSearchNav.placeholder || 'Cari (min. 3 karakter)...'"
+            />
+
+            <!-- Clear button -->
+            <button
+              v-if="searchInput.length > 0"
+              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+              type="button"
+              @click="clearSearch"
+            >
+              <Icon name="i-lucide-x" class="h-4 w-4" />
+            </button>
+
+            <!-- Validation feedback -->
+            <div
+              v-if="props.prep.refSearchNav.showValidationFeedback !== false && searchInput.length > 0 && searchInput.length < (props.prep.refSearchNav.minLength || 3)"
+              class="absolute -bottom-6 left-0 text-xs text-amber-600 whitespace-nowrap"
+            >
+              Minimal {{ props.prep.refSearchNav.minLength || 3 }} karakter untuk mencari
+            </div>
+          </div>
+        </div>
+
+        <!-- Add Button -->
+        <div v-if="props.prep.addNav" class="m-2 flex items-center">
+          <Button
+            class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm"
+            :class="props.prep.addNav.classVal"
+            :variant="(props.prep.addNav.variant as any) || 'default'"
+            @click="props.prep.addNav?.onClick"
+          >
+            <Icon :name="props.prep.addNav.icon || 'i-lucide-plus'" class="mr-2 h-4 w-4 align-middle" />
+            {{ props.prep.addNav.label }}
+          </Button>
+        </div>
+
+        <!-- Filter Button -->
+        <div v-if="props.prep.filterNav" class="m-2 flex items-center">
+          <Button
+            class="rounded-md border border-gray-300 px-4 py-2 sm:text-sm"
+            :class="props.prep.filterNav.classVal"
+            :variant="(props.prep.filterNav.variant as any) || 'default'"
+            @click="props.prep.filterNav?.onClick"
+          >
+            <Icon :name="props.prep.filterNav.icon || 'i-lucide-filter'" class="mr-2 h-4 w-4 align-middle" />
+            {{ props.prep.filterNav.label }}
+          </Button>
+        </div>
+
+        <!-- Print Button -->
+        <div v-if="props.prep.printNav" class="m-2 flex items-center">
+          <Button
+            class="rounded-md border border-gray-300 px-4 py-2 sm:text-sm"
+            :class="props.prep.printNav.classVal"
+            :variant="(props.prep.printNav.variant as any) || 'default'"
+            @click="props.prep.printNav?.onClick"
+          >
+            <Icon :name="props.prep.printNav.icon || 'i-lucide-printer'" class="mr-2 h-4 w-4 align-middle" />
+            {{ props.prep.printNav.label }}
+          </Button>
+        </div>
       </div>
     </div>
   </header>
diff --git a/app/components/pub/custom-ui/pagination/pagination.type.ts b/app/components/pub/custom-ui/pagination/pagination.type.ts
new file mode 100644
index 00000000..5c9d97f5
--- /dev/null
+++ b/app/components/pub/custom-ui/pagination/pagination.type.ts
@@ -0,0 +1,13 @@
+export interface PaginationMeta {
+  recordCount: number
+  // page : current pointer for viewing data
+  page: number
+  // pageSize: limit each page request
+  pageSize: number
+  // totalPage: recourdCount / pageSize
+  totalPage: number
+  // hasNext: check if there is next page
+  hasNext: boolean
+  // hasPrev: check if there is previous page
+  hasPrev: boolean
+}
diff --git a/app/components/pub/custom-ui/pagination/pagination.vue b/app/components/pub/custom-ui/pagination/pagination.vue
new file mode 100644
index 00000000..0c9f8596
--- /dev/null
+++ b/app/components/pub/custom-ui/pagination/pagination.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { PaginationMeta } from './pagination.type'
+import {
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+} from '~/components/pub/ui/pagination'
+
+interface Props {
+  paginationMeta: PaginationMeta
+  onPageChange?: (page: number) => void
+  showInfo?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  onPageChange: undefined,
+  showInfo: true,
+})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  if (props.onPageChange) {
+    props.onPageChange(page)
+  }
+  emit('pageChange', page)
+}
+
+function handleFirst() {
+  if (props.paginationMeta.hasPrev) {
+    handlePageChange(1)
+  }
+}
+
+function handlePrev() {
+  if (props.paginationMeta.hasPrev) {
+    handlePageChange(props.paginationMeta.page - 1)
+  }
+}
+
+function handleNext() {
+  if (props.paginationMeta.hasNext) {
+    handlePageChange(props.paginationMeta.page + 1)
+  }
+}
+
+function handleLast() {
+  if (props.paginationMeta.hasNext) {
+    handlePageChange(props.paginationMeta.totalPage)
+  }
+}
+
+// Computed properties for formatted numbers
+const formattedRecordCount = computed(() => {
+  const count = props.paginationMeta.recordCount
+  if (count == null || count === undefined) return '0'
+  return Number(count).toLocaleString('id-ID')
+})
+
+const startRecord = computed(() => {
+  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+})
+
+const endRecord = computed(() => {
+  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-between px-2">
+    <!-- Info text -->
+    <div v-if="showInfo" class="flex-1 text-sm text-muted-foreground">
+      Menampilkan {{ startRecord }}
+      hingga {{ endRecord }}
+      dari {{ formattedRecordCount }} data
+    </div>
+    <div v-else class="flex-1"></div>
+
+    <!-- Pagination controls -->
+    <Pagination
+v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
+      :items-per-page="paginationMeta.pageSize" show-edges
+>
+      <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+        <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
+        <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
+
+        <template v-for="(item, index) in items">
+          <PaginationListItem
+v-if="item.type === 'page'" :key="index" :value="item.value" as-child
+            @click="handlePageChange(item.value)"
+>
+            <Button class="w-9 h-9 p-0" :variant="item.value === page ? 'default' : 'outline'">
+              {{ item.value }}
+            </Button>
+          </PaginationListItem>
+          <PaginationEllipsis v-else :key="item.type" :index="index" />
+        </template>
+
+        <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
+        <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
+      </PaginationList>
+    </Pagination>
+  </div>
+</template>
diff --git a/app/pages/(features)/org-src/division/index.vue b/app/pages/(features)/org-src/division/index.vue
index 6e08748b..aa674b28 100644
--- a/app/pages/(features)/org-src/division/index.vue
+++ b/app/pages/(features)/org-src/division/index.vue
@@ -6,7 +6,7 @@ import Error from '~/components/pub/base/error/error.vue'
 definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'List Division',
+  title: 'Daftar Divisi',
   contentFrame: 'cf-full-width',
 })
 
@@ -34,7 +34,7 @@ const canRead = true
 <template>
   <div>
     <div v-if="canRead">
-      route division list
+      <FlowDivisionList />
     </div>
     <Error v-else :status-code="403" />
   </div>

From 664849e15bd1a2e4ae6de60a0fe09b5590e84f43 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 2 Sep 2025 14:48:43 +0700
Subject: [PATCH 10/35] feat(division): add form dialog for creating new
 division

- Implement dialog form with validation schema for division creation
- Add combobox component for parent division selection
- Include form submission handling with reset and error states
- a11y
---
 app/components/app/divison/list-cfg.ts        |  17 ++-
 app/components/flow/division/entry.ts         |  58 ++++++++
 app/components/flow/division/entry.vue        |  98 --------------
 app/components/flow/division/list.vue         | 128 +++++++++++++++++-
 .../pub/custom-ui/form/combobox.vue           |   2 +
 .../pub/custom-ui/nav-header/header.vue       |   2 +
 6 files changed, 198 insertions(+), 107 deletions(-)
 create mode 100644 app/components/flow/division/entry.ts
 delete mode 100644 app/components/flow/division/entry.vue

diff --git a/app/components/app/divison/list-cfg.ts b/app/components/app/divison/list-cfg.ts
index 45cfcd6f..509b47ee 100644
--- a/app/components/app/divison/list-cfg.ts
+++ b/app/components/app/divison/list-cfg.ts
@@ -10,29 +10,32 @@ import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-ud.vue'))
 
 export const cols: Col[] = [
-  {},
-  {},
-  {},
-  {},
+  { width: 100 },
+  { },
+  { },
+  { },
+  { width: 50 },
 ]
 
 export const header: Th[][] = [
   [
     { label: 'Id' },
-    { label: 'Kode' },
     { label: 'Nama' },
+    { label: 'Kode' },
     { label: 'Kelompok' },
+    { label: '' },
   ],
 ]
 
 export const keys = [
   'id',
-  'cellphone',
   'firstName',
+  'cellphone',
   'birth_place',
+  'action',
 ]
 
 export const delKeyNames: KeyLabel[] = [
diff --git a/app/components/flow/division/entry.ts b/app/components/flow/division/entry.ts
new file mode 100644
index 00000000..60617c45
--- /dev/null
+++ b/app/components/flow/division/entry.ts
@@ -0,0 +1,58 @@
+import * as z from 'zod'
+
+export const division = {
+  msg: {
+    placeholder: '---pilih divisi utama',
+    search: 'kode, nama divisi',
+    empty: 'divisi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Medical', code: 'MED' },
+    { value: '2', label: 'Nursing', code: 'NUR' },
+    { value: '3', label: 'Admin', code: 'ADM' },
+    { value: '4', label: 'Support', code: 'SUP' },
+    { value: '5', label: 'Education', code: 'EDU' },
+    { value: '6', label: 'Pharmacy', code: 'PHA' },
+    { value: '7', label: 'Radiology', code: 'RAD' },
+    { value: '8', label: 'Laboratory', code: 'LAB' },
+    { value: '9', label: 'Finance', code: 'FIN' },
+    { value: '10', label: 'Human Resources', code: 'HR' },
+    { value: '11', label: 'IT Services', code: 'ITS' },
+    { value: '12', label: 'Maintenance', code: 'MNT' },
+    { value: '13', label: 'Catering', code: 'CAT' },
+    { value: '14', label: 'Security', code: 'SEC' },
+    { value: '15', label: 'Emergency', code: 'EMR' },
+    { value: '16', label: 'Surgery', code: 'SUR' },
+    { value: '17', label: 'Outpatient', code: 'OUT' },
+    { value: '18', label: 'Inpatient', code: 'INP' },
+    { value: '19', label: 'Rehabilitation', code: 'REB' },
+    { value: '20', label: 'Research', code: 'RSH' },
+  ],
+}
+
+export const schema = z.object({
+  name: z.string({
+    required_error: 'Nama wajib diisi',
+  }).min(1, 'Nama divisi wajib diisi'),
+
+  code: z.string({
+    required_error: 'Kode wajib diisi',
+  }).min(1, 'Kode divisi wajib diisi'),
+
+  parentId: z.preprocess(
+    (input: unknown) => {
+      if (typeof input === 'string') {
+        // Handle empty string case
+        if (input.trim() === '') {
+          return undefined
+        }
+        return Number(input)
+      }
+
+      return input
+    },
+    z.number({
+      required_error: 'Kelompok wajib dipilih',
+    }).min(1, 'Kelompok wajib dipilih'),
+  ),
+})
diff --git a/app/components/flow/division/entry.vue b/app/components/flow/division/entry.vue
deleted file mode 100644
index cdd237ac..00000000
--- a/app/components/flow/division/entry.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import * as z from 'zod'
-import Action from '~/components/pub/custom-ui/nav-footer/ba-su.vue'
-
-const { errors, setFromZodError, clearErrors } = useFormErrors()
-
-const data = ref({
-  code: '',
-  name: '',
-  parentId: '',
-})
-
-const division = {
-  msg: {
-    placeholder: '---pilih divisi utama',
-    search: 'kode, nama divisi',
-    empty: 'divisi tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Medical', code: 'MED' },
-    { value: '2', label: 'Nursing', code: 'NUR' },
-    { value: '3', label: 'Admin', code: 'ADM' },
-    { value: '4', label: 'Support', code: 'SUP' },
-    { value: '5', label: 'Education', code: 'EDU' },
-    { value: '6', label: 'Pharmacy', code: 'PHA' },
-    { value: '7', label: 'Radiology', code: 'RAD' },
-    { value: '8', label: 'Laboratory', code: 'LAB' },
-    { value: '9', label: 'Finance', code: 'FIN' },
-    { value: '10', label: 'Human Resources', code: 'HR' },
-    { value: '11', label: 'IT Services', code: 'ITS' },
-    { value: '12', label: 'Maintenance', code: 'MNT' },
-    { value: '13', label: 'Catering', code: 'CAT' },
-    { value: '14', label: 'Security', code: 'SEC' },
-    { value: '15', label: 'Emergency', code: 'EMR' },
-    { value: '16', label: 'Surgery', code: 'SUR' },
-    { value: '17', label: 'Outpatient', code: 'OUT' },
-    { value: '18', label: 'Inpatient', code: 'INP' },
-    { value: '19', label: 'Rehabilitation', code: 'REB' },
-    { value: '20', label: 'Research', code: 'RSH' },
-  ],
-}
-
-const schema = z.object({
-  name: z.string().min(1, 'Nama divisi harus diisi'),
-  code: z.string().min(1, 'Kode divisi harus diisi'),
-  parentId: z.preprocess(
-    (input: unknown) => {
-      if (typeof input === 'string') {
-        // Handle empty string case
-        if (input.trim() === '') {
-          return 0
-        }
-        return Number(input)
-      }
-
-      return input
-    },
-    z.number().refine((num) => num > 0, 'Divisi harus dipilih'),
-  ),
-})
-
-function onClick(type: string) {
-  if (type === 'cancel') {
-    navigateTo('/org-src/division')
-  } else if (type === 'draft') {
-    // do something
-  } else if (type === 'submit') {
-    // Clear previous errors
-    clearErrors()
-
-    const requestData = schema.safeParse(data.value)
-    if (!requestData.success) {
-      // Set errors menggunakan composable
-      setFromZodError(requestData.error)
-
-      // Optional: tampilkan toast notification untuk error general
-      console.warn('Form validation failed:', requestData.error)
-      return
-    }
-
-    console.log('Form data valid:', requestData.data)
-    // do something with valid data
-  }
-}
-</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> Divisi
-  </div>
-  <div>
-    <AppDivisonEntryForm v-model="data" :errors="errors" :division="division" />
-  </div>
-  <div class="my-2 flex justify-end py-2">
-    <Action @click="onClick" />
-  </div>
-</template>
diff --git a/app/components/flow/division/list.vue b/app/components/flow/division/list.vue
index 28f514b6..96b3a66a 100644
--- a/app/components/flow/division/list.vue
+++ b/app/components/flow/division/list.vue
@@ -2,8 +2,11 @@
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { toTypedSchema } from '@vee-validate/zod'
 import { refDebounced, useUrlSearchParams } from '@vueuse/core'
+import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
 import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { division as divisionConf, schema as schemaConf } from './entry'
 import { defaultQuery, querySchema } from './schema.query'
 
 // #region State & Computed
@@ -11,6 +14,7 @@ const data = ref([])
 const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
+const isDialogOpen = ref(false)
 
 // URL state management
 const queryParams = useUrlSearchParams('history', {
@@ -33,6 +37,11 @@ const paginationMeta = reactive<PaginationMeta>({
   hasPrev: false,
 })
 
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
 // Search model with debounce
 const searchInput = ref(params.value.q || '')
 const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
@@ -58,11 +67,17 @@ const headerPrep: HeaderPrep = {
   addNav: {
     label: 'Tambah Divisi',
     icon: 'i-lucide-send',
-    // todo: open modal form
-    onClick: () => navigateTo('/org-src/division/add'),
+    onClick: () => {
+      isDialogOpen.value = true
+    },
   },
 }
 
+const formSchema = toTypedSchema(schemaConf)
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 // #endregion
 
@@ -127,6 +142,54 @@ function handlePageChange(page: number) {
 // #endregion region
 
 // #region Utilities & event handlers
+
+function clearForm(setValues: (values: Record<string, any>) => void) {
+  // Manually clear all form fields
+  setValues({
+    name: '',
+    code: '',
+    parentId: '',
+  })
+}
+
+function onCancelForm(setValues: (values: Record<string, any>) => void) {
+  isDialogOpen.value = false
+  setTimeout(() => {
+    clearForm(setValues)
+  }, 500)
+}
+
+async function onSubmitForm(values: any, setValues: (values: Record<string, any>) => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/division', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isDialogOpen.value = false
+    isSuccess = true
+
+    // TODO: Show success message
+    console.log('Division created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        clearForm(setValues)
+      }, 500)
+    }
+  }
+}
 // #endregion
 
 // #region Watchers
@@ -161,6 +224,67 @@ watch(debouncedSearch, (newValue) => {
   <div class="rounded-md border p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    <Form v-slot="{ handleSubmit, setValues }" as="" keep-values :validation-schema="formSchema">
+      <Dialog v-model:open="isDialogOpen">
+        <DialogContent
+class="sm:max-w-[425px]" @interact-outside="(e) => e.preventDefault()"
+          @pointer-down-outside="(e) => e.preventDefault()"
+>
+          <DialogHeader>
+            <DialogTitle>Tambah Divisi</DialogTitle>
+            <DialogDescription></DialogDescription>
+          </DialogHeader>
+
+          <form id="dialogForm" @submit="handleSubmit($event, (values) => onSubmitForm(values, setValues))">
+            <FormField v-slot="{ componentField }" name="name">
+              <FormItem>
+                <FormLabel>Nama</FormLabel>
+                <FormControl>
+                  <Input
+type="text" placeholder="Masukkan nama divisi" autocomplete="organization"
+                    v-bind="componentField"
+/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="code">
+              <FormItem>
+                <FormLabel>Kode</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="parentId">
+              <FormItem>
+                <FormLabel>Kelompok</FormLabel>
+                <FormControl>
+                  <Combobox
+v-bind="componentField" :items="divisionConf.items"
+                    :placeholder="divisionConf.msg.placeholder" :search-placeholder="divisionConf.msg.search"
+                    :empty-message="divisionConf.msg.empty"
+/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+          </form>
+
+          <DialogFooter>
+            <Button variant="outline" @click="onCancelForm(setValues)">
+              Batal
+            </Button>
+            <Button type="submit" form="dialogForm">
+              Simpan
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Form>
   </div>
 </template>
 
diff --git a/app/components/pub/custom-ui/form/combobox.vue b/app/components/pub/custom-ui/form/combobox.vue
index 74da7025..12171c85 100644
--- a/app/components/pub/custom-ui/form/combobox.vue
+++ b/app/components/pub/custom-ui/form/combobox.vue
@@ -8,6 +8,7 @@ interface Item {
 }
 
 const props = defineProps<{
+  id: string
   modelValue?: string
   items: Item[]
   placeholder?: string
@@ -61,6 +62,7 @@ function onSelect(item: Item) {
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
       <Button
+      :id="props.id"
       variant="outline" role="combobox" :aria-expanded="open" :class="cn(
         'w-full justify-between border-black bg-white hover:bg-gray-50 text-sm font-normal',
         !modelValue && 'text-muted-foreground',
diff --git a/app/components/pub/custom-ui/nav-header/header.vue b/app/components/pub/custom-ui/nav-header/header.vue
index 8b81d3f3..621691d2 100644
--- a/app/components/pub/custom-ui/nav-header/header.vue
+++ b/app/components/pub/custom-ui/nav-header/header.vue
@@ -64,7 +64,9 @@ function clearSearch() {
         <div v-if="props.prep.refSearchNav" class="ml-3 text-lg text-gray-900 relative">
           <div class="relative">
             <Input
+              id="search-table"
               v-model="searchModel"
+              name="search-table"
               type="text"
               class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
               :class="[

From add19f33a2581da6c56e69dca29f70d8630d6d19 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 2 Sep 2025 16:25:32 +0700
Subject: [PATCH 11/35] feat(data-table): add size prop to action components

Add size prop configuration to action components in data table to allow consistent sizing. Update dropdown action component to accept size prop with default value.
---
 app/components/app/divison/list-cfg.ts                |  3 +++
 app/components/pub/base/data-table/data-table.vue     |  4 +++-
 .../pub/custom-ui/data/dropdown-action-ud.vue         | 11 ++++++++---
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/components/app/divison/list-cfg.ts b/app/components/app/divison/list-cfg.ts
index 509b47ee..58094521 100644
--- a/app/components/app/divison/list-cfg.ts
+++ b/app/components/app/divison/list-cfg.ts
@@ -71,6 +71,9 @@ export const funcComponent: RecStrFuncComponent = {
       idx,
       rec: rec as object,
       component: action,
+      props: {
+        size: 'sm',
+      },
     }
     return res
   },
diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index 8bc50758..b18ab8f8 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -55,7 +55,9 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
           <component
             :is="funcComponent[key]?.(row, rowIndex).component"
             v-if="funcComponent[key]"
-            v-bind="funcComponent[key]?.(row, rowIndex)"
+            :rec="row"
+            :idx="rowIndex"
+            v-bind="funcComponent[key]?.(row, rowIndex).props"
           />
           <!-- If funcParsed or funcHtml returns a value -->
           <template v-else>
diff --git a/app/components/pub/custom-ui/data/dropdown-action-ud.vue b/app/components/pub/custom-ui/data/dropdown-action-ud.vue
index 0ef020d7..a1c05c7b 100644
--- a/app/components/pub/custom-ui/data/dropdown-action-ud.vue
+++ b/app/components/pub/custom-ui/data/dropdown-action-ud.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import type { LinkItem, ListItemDto } from './types'
 
-const props = defineProps<{
+interface Props {
   rec: ListItemDto
-}>()
+  size?: 'default' | 'sm' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'lg',
+})
 
 const recId = inject<Ref<number>>('rec_id')!
 const recAction = inject<Ref<string>>('rec_action')!
@@ -44,7 +49,7 @@ const linkItems: LinkItem[] = [
     <DropdownMenu>
       <DropdownMenuTrigger as-child>
         <SidebarMenuButton
-          size="lg"
+          :size="size"
           class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
         >
           <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />

From b6d30eb154d68e925e1a09e8df933b4f6d213247 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 2 Sep 2025 16:49:19 +0700
Subject: [PATCH 12/35] refactor(division): extract entry form to separate
 component and improve form handling

- Move form logic from list component to dedicated entry-form component
- Implement proper form submission and cancellation handlers
- Add type safety with DivisionFormData interface
- Improve form validation using vee-validate
- Refresh data after successful form submission
---
 app/components/app/divison/entry-form.vue | 105 +++++++++++++++------
 app/components/flow/division/list.vue     | 107 ++++++----------------
 2 files changed, 108 insertions(+), 104 deletions(-)

diff --git a/app/components/app/divison/entry-form.vue b/app/components/app/divison/entry-form.vue
index 348f440e..5b24b345 100644
--- a/app/components/app/divison/entry-form.vue
+++ b/app/components/app/divison/entry-form.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Block from '~/components/pub/custom-ui/form/block.vue'
+import { toTypedSchema } from '@vee-validate/zod'
 import Combobox from '~/components/pub/custom-ui/form/combobox.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'
 
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
 const props = defineProps<{
-  modelValue: any
   division: {
     msg: {
       placeholder: string
@@ -20,47 +25,95 @@ const props = defineProps<{
       code: string
     }[]
   }
+  schema: any
+  initialValues?: Partial<DivisionFormData>
   errors?: FormErrors
 }>()
-const emit = defineEmits(['update:modelValue', 'event'])
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-})
+const emit = defineEmits<{
+  'submit': [values: DivisionFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
 </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">
+  <Form v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues">
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
             <Label>Nama</Label>
             <Field id="name" :errors="errors">
-              <Input v-model="data.name" />
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input type="text" placeholder="Masukkan nama divisi" autocomplete="organization"
+                      v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
+
+          <FieldGroup>
             <Label>Kode</Label>
             <Field id="code" :errors="errors">
-              <Input v-model="data.code" />
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
+
           <FieldGroup :column="2">
-            <Label>Divisi</Label>
+            <Label>Kelompok</Label>
             <Field id="parentId" :errors="errors">
-              <Combobox
-                v-model="data.parentId"
-                :items="props.division.items"
-                :placeholder="props.division.msg.placeholder"
-                :search-placeholder="props.division.msg.search"
-                :empty-message="props.division.msg.empty"
-              />
+              <FormField v-slot="{ componentField }" name="parentId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox id="parentId" v-bind="componentField" :items="props.division.items"
+                      :placeholder="props.division.msg.placeholder" :search-placeholder="props.division.msg.search"
+                      :empty-message="props.division.msg.empty" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-        </Block>
+        </div>
       </div>
-    </div>
-  </form>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
 </template>
diff --git a/app/components/flow/division/list.vue b/app/components/flow/division/list.vue
index 96b3a66a..b154125f 100644
--- a/app/components/flow/division/list.vue
+++ b/app/components/flow/division/list.vue
@@ -2,9 +2,8 @@
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
-import { toTypedSchema } from '@vee-validate/zod'
 import { refDebounced, useUrlSearchParams } from '@vueuse/core'
-import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
+import AppDivisonEntryForm from '~/components/app/divison/entry-form.vue'
 import Header from '~/components/pub/custom-ui/nav-header/header.vue'
 import { division as divisionConf, schema as schemaConf } from './entry'
 import { defaultQuery, querySchema } from './schema.query'
@@ -73,8 +72,6 @@ const headerPrep: HeaderPrep = {
   },
 }
 
-const formSchema = toTypedSchema(schemaConf)
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
@@ -141,25 +138,16 @@ function handlePageChange(page: number) {
 
 // #endregion region
 
-// #region Utilities & event handlers
+// #region Form event handlers
 
-function clearForm(setValues: (values: Record<string, any>) => void) {
-  // Manually clear all form fields
-  setValues({
-    name: '',
-    code: '',
-    parentId: '',
-  })
-}
-
-function onCancelForm(setValues: (values: Record<string, any>) => void) {
+function onCancelForm(resetForm: () => void) {
   isDialogOpen.value = false
   setTimeout(() => {
-    clearForm(setValues)
+    resetForm()
   }, 500)
 }
 
-async function onSubmitForm(values: any, setValues: (values: Record<string, any>) => void) {
+async function onSubmitForm(values: any, resetForm: () => void) {
   let isSuccess = false
   try {
     // TODO: Implement form submission logic
@@ -175,6 +163,9 @@ async function onSubmitForm(values: any, setValues: (values: Record<string, any>
     isDialogOpen.value = false
     isSuccess = true
 
+    // Refresh data after successful submission
+    await getDivisionList()
+
     // TODO: Show success message
     console.log('Division created successfully')
   } catch (error: unknown) {
@@ -185,7 +176,7 @@ async function onSubmitForm(values: any, setValues: (values: Record<string, any>
   } finally {
     if (isSuccess) {
       setTimeout(() => {
-        clearForm(setValues)
+        resetForm()
       }, 500)
     }
   }
@@ -221,70 +212,30 @@ watch(debouncedSearch, (newValue) => {
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
+    <div class="rounded-md border p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    <Form v-slot="{ handleSubmit, setValues }" as="" keep-values :validation-schema="formSchema">
-      <Dialog v-model:open="isDialogOpen">
-        <DialogContent
-class="sm:max-w-[425px]" @interact-outside="(e) => e.preventDefault()"
-          @pointer-down-outside="(e) => e.preventDefault()"
->
-          <DialogHeader>
-            <DialogTitle>Tambah Divisi</DialogTitle>
-            <DialogDescription></DialogDescription>
-          </DialogHeader>
 
-          <form id="dialogForm" @submit="handleSubmit($event, (values) => onSubmitForm(values, setValues))">
-            <FormField v-slot="{ componentField }" name="name">
-              <FormItem>
-                <FormLabel>Nama</FormLabel>
-                <FormControl>
-                  <Input
-type="text" placeholder="Masukkan nama divisi" autocomplete="organization"
-                    v-bind="componentField"
-/>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
+    <Dialog v-model:open="isDialogOpen">
+      <DialogContent
+        class="sm:max-w-[425px]"
+        @interact-outside="(e) => e.preventDefault()"
+        @pointer-down-outside="(e) => e.preventDefault()"
+      >
+        <DialogHeader>
+          <DialogTitle>Tambah Divisi</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
 
-            <FormField v-slot="{ componentField }" name="code">
-              <FormItem>
-                <FormLabel>Kode</FormLabel>
-                <FormControl>
-                  <Input type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
-
-            <FormField v-slot="{ componentField }" name="parentId">
-              <FormItem>
-                <FormLabel>Kelompok</FormLabel>
-                <FormControl>
-                  <Combobox
-v-bind="componentField" :items="divisionConf.items"
-                    :placeholder="divisionConf.msg.placeholder" :search-placeholder="divisionConf.msg.search"
-                    :empty-message="divisionConf.msg.empty"
-/>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
-          </form>
-
-          <DialogFooter>
-            <Button variant="outline" @click="onCancelForm(setValues)">
-              Batal
-            </Button>
-            <Button type="submit" form="dialogForm">
-              Simpan
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Form>
+        <AppDivisonEntryForm
+          :division="divisionConf"
+          :schema="schemaConf"
+          :initial-values="{ name: '', code: '', parentId: '' }"
+          @submit="onSubmitForm"
+          @cancel="onCancelForm"
+        />
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
 

From a9c286bd0aeea7f809a941387b7db0a404057602 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 3 Sep 2025 09:45:58 +0700
Subject: [PATCH 13/35] feat(division): impl  division list+entry

feat(form): add accessibility improvements to form components

- Add labelFor prop to Label component for better form element association
- Enhance Combobox with ARIA attributes for better screen reader support
- Update form fields with proper IDs and label associations

feat(pagination): adjust button width based on page number length

Add dynamic button sizing for pagination items to accommodate different digit lengths (1-99, 100-999, 1000+). This improves visual consistency when displaying varying page numbers.

feat(modal): add reusable dialog component and refactor division form

- Create new Dialog.vue component with configurable size and outside click prevention
- Replace inline dialog implementation in division list with new Dialog component
- Fix formatting in entry-form.vue

feat(data-table): add click handling for action cells

Implement handleActionCellClick function to manage click events on action cells, triggering dropdown buttons when clicked outside interactive elements. Add cursor-pointer class and click handler to action cells for better UX.

refactor(custom-ui): centralize action event strings in types

Replace hardcoded action event strings with constants from types.ts to improve maintainability and reduce potential typos

feat(confirmation): add reusable confirmation modal components

- Implement base confirmation.vue component with customizable props
- Create record-specific record-confirmation.vue for data operations
- Add comprehensive README.md documentation for usage
- Integrate confirmation flow in division list component

refactor(components): move dialog component to base directory and update imports

The dialog component was moved from custom-ui/modal to base/modal to better reflect its shared usage across the application. All import paths referencing the old location have been updated accordingly.

refactor(select): reorganize imports and adjust conditional formatting

- Reorder imports in Select.vue for better organization
- Adjust logical operator formatting in SelectContent.vue for consistency
---
 app/components/app/divison/entry-form.vue     |  26 ++--
 app/components/flow/division/list.vue         | 107 +++++++++++---
 .../pub/base/data-table/data-table.vue        |  24 ++-
 app/components/pub/base/modal/dialog.vue      |  54 +++++++
 .../pub/custom-ui/confirmation/README.md      | 137 ++++++++++++++++++
 .../custom-ui/confirmation/confirmation.vue   |  99 +++++++++++++
 .../confirmation/record-confirmation.vue      | 131 +++++++++++++++++
 .../pub/custom-ui/data/dropdown-action-du.vue |   5 +-
 .../custom-ui/data/dropdown-action-ducd.vue   |   7 +-
 .../custom-ui/data/dropdown-action-dud.vue    |   7 +-
 .../pub/custom-ui/data/dropdown-action-ud.vue |   5 +-
 app/components/pub/custom-ui/data/types.ts    |   6 +
 .../pub/custom-ui/form/combobox.vue           |  16 +-
 app/components/pub/custom-ui/form/label.vue   |   3 +-
 .../pub/custom-ui/pagination/pagination.vue   |  15 +-
 app/components/pub/ui/select/Select.vue       |   9 +-
 .../pub/ui/select/SelectContent.vue           |   4 +-
 17 files changed, 598 insertions(+), 57 deletions(-)
 create mode 100644 app/components/pub/base/modal/dialog.vue
 create mode 100644 app/components/pub/custom-ui/confirmation/README.md

diff --git a/app/components/app/divison/entry-form.vue b/app/components/app/divison/entry-form.vue
index 5b24b345..3008d3c8 100644
--- a/app/components/app/divison/entry-form.vue
+++ b/app/components/app/divison/entry-form.vue
@@ -54,19 +54,23 @@ function onCancelForm({ resetForm }: { resetForm: () => void }) {
 </script>
 
 <template>
-  <Form v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
-    :initial-values="initialValues">
+  <Form
+    v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+    >
     <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
       <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
         <div class="flex flex-col justify-between">
           <FieldGroup>
-            <Label>Nama</Label>
+            <Label label-for="name">Nama</Label>
             <Field id="name" :errors="errors">
               <FormField v-slot="{ componentField }" name="name">
                 <FormItem>
                   <FormControl>
-                    <Input type="text" placeholder="Masukkan nama divisi" autocomplete="organization"
-                      v-bind="componentField" />
+                    <Input
+                      id="name" type="text" placeholder="Masukkan nama divisi" autocomplete="off"
+                      v-bind="componentField"
+                      />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -75,12 +79,12 @@ function onCancelForm({ resetForm }: { resetForm: () => void }) {
           </FieldGroup>
 
           <FieldGroup>
-            <Label>Kode</Label>
+            <Label label-for="code">Kode</Label>
             <Field id="code" :errors="errors">
               <FormField v-slot="{ componentField }" name="code">
                 <FormItem>
                   <FormControl>
-                    <Input type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
+                    <Input id="code" type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -89,14 +93,16 @@ function onCancelForm({ resetForm }: { resetForm: () => void }) {
           </FieldGroup>
 
           <FieldGroup :column="2">
-            <Label>Kelompok</Label>
+            <Label label-for="parentId">Kelompok</Label>
             <Field id="parentId" :errors="errors">
               <FormField v-slot="{ componentField }" name="parentId">
                 <FormItem>
                   <FormControl>
-                    <Combobox id="parentId" v-bind="componentField" :items="props.division.items"
+                    <Combobox
+                      id="parentId" v-bind="componentField" :items="props.division.items"
                       :placeholder="props.division.msg.placeholder" :search-placeholder="props.division.msg.search"
-                      :empty-message="props.division.msg.empty" />
+                      :empty-message="props.division.msg.empty"
+                      />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
diff --git a/app/components/flow/division/list.vue b/app/components/flow/division/list.vue
index b154125f..fc3a14d8 100644
--- a/app/components/flow/division/list.vue
+++ b/app/components/flow/division/list.vue
@@ -4,6 +4,9 @@ import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
 import { refDebounced, useUrlSearchParams } from '@vueuse/core'
 import AppDivisonEntryForm from '~/components/app/divison/entry-form.vue'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/custom-ui/data/types'
 import Header from '~/components/pub/custom-ui/nav-header/header.vue'
 import { division as divisionConf, schema as schemaConf } from './entry'
 import { defaultQuery, querySchema } from './schema.query'
@@ -13,7 +16,10 @@ const data = ref([])
 const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
-const isDialogOpen = ref(false)
+
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
 
 // URL state management
 const queryParams = useUrlSearchParams('history', {
@@ -67,7 +73,7 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah Divisi',
     icon: 'i-lucide-send',
     onClick: () => {
-      isDialogOpen.value = true
+      isFormEntryDialogOpen.value = true
     },
   },
 }
@@ -136,12 +142,38 @@ function handlePageChange(page: number) {
   queryParams.page = page
 }
 
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/division/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getDivisionList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
 // #endregion region
 
 // #region Form event handlers
 
 function onCancelForm(resetForm: () => void) {
-  isDialogOpen.value = false
+  isFormEntryDialogOpen.value = false
   setTimeout(() => {
     resetForm()
   }, 500)
@@ -160,7 +192,7 @@ async function onSubmitForm(values: any, resetForm: () => void) {
     // })
 
     // If successful, mark as success and close dialog
-    isDialogOpen.value = false
+    isFormEntryDialogOpen.value = false
     isSuccess = true
 
     // Refresh data after successful submission
@@ -208,34 +240,61 @@ watch(debouncedSearch, (newValue) => {
     queryParams.page = 1 // Reset to first page when searching
   }
 })
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
 // #endregion
 </script>
 
 <template>
-    <div class="rounded-md border p-4">
+  <div class="rounded-md border p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog v-model:open="isDialogOpen">
-      <DialogContent
-        class="sm:max-w-[425px]"
-        @interact-outside="(e) => e.preventDefault()"
-        @pointer-down-outside="(e) => e.preventDefault()"
-      >
-        <DialogHeader>
-          <DialogTitle>Tambah Divisi</DialogTitle>
-          <DialogDescription></DialogDescription>
-        </DialogHeader>
-
-        <AppDivisonEntryForm
-          :division="divisionConf"
-          :schema="schemaConf"
-          :initial-values="{ name: '', code: '', parentId: '' }"
-          @submit="onSubmitForm"
-          @cancel="onCancelForm"
-        />
-      </DialogContent>
+    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg">
+      <AppDivisonEntryForm
+:division="divisionConf" :schema="schemaConf"
+        :initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
+/>
     </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+>
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
   </div>
 </template>
 
diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index b18ab8f8..6f6fdb69 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -15,6 +15,21 @@ defineProps<{
 }>()
 
 const loader = inject('table_data_loader') as DataTableLoader
+
+function handleActionCellClick(event: Event, _cellRef: string) {
+  // Prevent event if clicked directly on the button/dropdown
+  const target = event.target as HTMLElement
+  if (target.closest('button') || target.closest('[role="button"]')) {
+    return
+  }
+
+  // Find the dropdown trigger button and click it
+  const cell = event.currentTarget as HTMLElement
+  const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
+  if (triggerButton) {
+    (triggerButton as HTMLButtonElement).click()
+  }
+}
 </script>
 
 <template>
@@ -50,11 +65,18 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
     </TableBody>
     <TableBody v-else>
       <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-${rowIndex}-${cellIndex}`"
+          class="border"
+          :class="{ 'cursor-pointer': key === 'action' && funcComponent[key] }"
+          @click="key === 'action' && funcComponent[key] ? handleActionCellClick($event, `cell-${rowIndex}-${cellIndex}`) : null"
+        >
           <!-- If funcComponent has a renderer -->
           <component
             :is="funcComponent[key]?.(row, rowIndex).component"
             v-if="funcComponent[key]"
+            :ref="key === 'action' ? `actionComponent-${rowIndex}-${cellIndex}` : undefined"
             :rec="row"
             :idx="rowIndex"
             v-bind="funcComponent[key]?.(row, rowIndex).props"
diff --git a/app/components/pub/base/modal/dialog.vue b/app/components/pub/base/modal/dialog.vue
new file mode 100644
index 00000000..548af287
--- /dev/null
+++ b/app/components/pub/base/modal/dialog.vue
@@ -0,0 +1,54 @@
+<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]
+}>()
+
+// Computed untuk menentukan class size berdasarkan prop size
+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]
+})
+
+// Computed untuk state dialog
+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/components/pub/custom-ui/confirmation/README.md b/app/components/pub/custom-ui/confirmation/README.md
new file mode 100644
index 00000000..5ee90e58
--- /dev/null
+++ b/app/components/pub/custom-ui/confirmation/README.md
@@ -0,0 +1,137 @@
+# Confirmation Modal Components
+
+Sistem confirmation modal yang modular dan dapat digunakan kembali di seluruh aplikasi.
+
+## Components
+
+### 1. `confirmation.vue` - Base Confirmation Modal
+
+Komponen dasar untuk modal konfirmasi yang dapat dikustomisasi.
+
+**Props:**
+- `open?: boolean` - Status modal (terbuka/tertutup)
+- `title?: string` - Judul modal (default: "Konfirmasi")
+- `message?: string` - Pesan konfirmasi (default: "Apakah Anda yakin ingin melanjutkan?")
+- `confirmText?: string` - Text tombol konfirmasi (default: "Ya")
+- `cancelText?: string` - Text tombol batal (default: "Batal")
+- `variant?: 'default' | 'destructive' | 'warning'` - Varian tampilan (default: "default")
+- `size?: 'sm' | 'md' | 'lg' | 'xl'` - Ukuran modal (default: "md")
+
+**Events:**
+- `@confirm` - Dipanggil saat tombol konfirmasi diklik
+- `@cancel` - Dipanggil saat tombol batal diklik
+- `@update:open` - Dipanggil saat status modal berubah
+
+**Contoh penggunaan:**
+```vue
+<template>
+  <Confirmation
+    v-model:open="isConfirmOpen"
+    title="Hapus Data"
+    message="Apakah Anda yakin ingin menghapus data ini?"
+    confirm-text="Hapus"
+    variant="destructive"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+  />
+</template>
+```
+
+### 2. `record-confirmation.vue` - Record-specific Confirmation
+
+Komponen khusus untuk konfirmasi operasi pada record/data tertentu.
+
+**Props:**
+- `open?: boolean` - Status modal
+- `action?: 'delete' | 'deactivate' | 'activate' | 'archive' | 'restore'` - Jenis aksi (default: "delete")
+- `record?: RecordData | null` - Data record yang akan diproses
+- `customTitle?: string` - Custom judul (opsional)
+- `customMessage?: string` - Custom pesan (opsional)
+- `customConfirmText?: string` - Custom text tombol konfirmasi (opsional)
+- `customCancelText?: string` - Custom text tombol batal (opsional)
+
+**Events:**
+- `@confirm` - Dipanggil dengan parameter `(record, action)`
+- `@cancel` - Dipanggil saat batal
+- `@update:open` - Update status modal
+
+**Contoh penggunaan:**
+```vue
+<template>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmOpen"
+    action="delete"
+    :record="selectedRecord"
+    @confirm="handleDeleteRecord"
+    @cancel="handleCancel"
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p><strong>Nama:</strong> {{ record?.name }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
+```
+
+## Action Types
+
+Record confirmation mendukung beberapa jenis aksi dengan konfigurasi default:
+
+- **delete**: Hapus data (variant: destructive, warna merah)
+- **deactivate**: Nonaktifkan data (variant: warning, warna kuning)
+- **activate**: Aktifkan data (variant: default, warna biru)
+- **archive**: Arsipkan data (variant: warning, warna kuning)
+- **restore**: Pulihkan data (variant: default, warna biru)
+
+## Integration Example
+
+Contoh implementasi di komponen list:
+
+```vue
+<script setup>
+// State management
+const isRecordConfirmationOpen = ref(false)
+const selectedRecord = ref(null)
+const confirmAction = ref('delete')
+
+// Handle action dari table
+function handleRowAction(action, record) {
+  selectedRecord.value = record
+  confirmAction.value = action
+  isRecordConfirmationOpen.value = true
+}
+
+// Handle konfirmasi
+async function handleConfirmAction(record, action) {
+  try {
+    // API call berdasarkan action
+    await performAction(action, record.id)
+    // Refresh data
+    await refreshData()
+  } catch (error) {
+    // Handle error
+  }
+}
+</script>
+
+<template>
+  <!-- Your list component -->
+  <DataTable @action="handleRowAction" />
+  
+  <!-- Confirmation modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    :action="confirmAction"
+    :record="selectedRecord"
+    @confirm="handleConfirmAction"
+  />
+</template>
+```
+
+## Styling
+
+Komponen menggunakan Tailwind CSS dan shadcn/ui components. Pastikan dependencies berikut tersedia:
+- `~/components/pub/custom-ui/modal/dialog.vue`
+- `~/components/pub/ui/button`
diff --git a/app/components/pub/custom-ui/confirmation/confirmation.vue b/app/components/pub/custom-ui/confirmation/confirmation.vue
index e69de29b..e408b31a 100644
--- a/app/components/pub/custom-ui/confirmation/confirmation.vue
+++ b/app/components/pub/custom-ui/confirmation/confirmation.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import { Button } from '~/components/pub/ui/button'
+
+interface ConfirmationProps {
+  open?: boolean
+  title?: string
+  message?: string
+  confirmText?: string
+  cancelText?: string
+  variant?: 'default' | 'destructive' | 'warning'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+interface ConfirmationEmits {
+  'update:open': [value: boolean]
+  'confirm': []
+  'cancel': []
+}
+
+const props = withDefaults(defineProps<ConfirmationProps>(), {
+  open: false,
+  title: 'Konfirmasi',
+  message: 'Apakah Anda yakin ingin melanjutkan?',
+  confirmText: 'Ya',
+  cancelText: 'Batal',
+  variant: 'default',
+  size: 'md',
+})
+
+const emit = defineEmits<ConfirmationEmits>()
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+
+const variantClasses = computed(() => {
+  const variants = {
+    default: {
+      icon: 'i-lucide-help-circle',
+      iconColor: 'text-blue-500',
+      confirmVariant: 'default' as const,
+    },
+    destructive: {
+      icon: 'i-lucide-alert-triangle',
+      iconColor: 'text-red-500',
+      confirmVariant: 'destructive' as const,
+    },
+    warning: {
+      icon: 'i-lucide-alert-circle',
+      iconColor: 'text-yellow-500',
+      confirmVariant: 'default' as const,
+    },
+  }
+  return variants[props.variant]
+})
+
+function handleConfirm() {
+  emit('confirm')
+  emit('update:open', false)
+}
+
+function handleCancel() {
+  emit('cancel')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen" :title="title" :size="size">
+    <div class="space-y-4">
+      <!-- Icon dan pesan -->
+      <div class="flex items-start gap-3">
+        <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
+        <div class="flex-1">
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            {{ message }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Slot untuk konten custom -->
+      <div v-if="$slots.default">
+        <slot />
+      </div>
+
+      <!-- Footer buttons -->
+      <div class="flex justify-end gap-3 pt-4">
+        <Button variant="outline" @click="handleCancel">
+          {{ cancelText }}
+        </Button>
+        <Button :variant="variantClasses.confirmVariant" @click="handleConfirm">
+          {{ confirmText }}
+        </Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
diff --git a/app/components/pub/custom-ui/confirmation/record-confirmation.vue b/app/components/pub/custom-ui/confirmation/record-confirmation.vue
index e69de29b..a544e5b0 100644
--- a/app/components/pub/custom-ui/confirmation/record-confirmation.vue
+++ b/app/components/pub/custom-ui/confirmation/record-confirmation.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import Confirmation from '~/components/pub/custom-ui/confirmation/confirmation.vue'
+
+interface RecordData {
+  id: number | string
+  name?: string
+  title?: string
+  code?: string
+  [key: string]: any
+}
+
+interface RecordConfirmationProps {
+  open?: boolean
+  action?: 'delete' | 'deactivate' | 'activate' | 'archive' | 'restore'
+  record?: RecordData | null
+  customTitle?: string
+  customMessage?: string
+  customConfirmText?: string
+  customCancelText?: string
+}
+
+interface RecordConfirmationEmits {
+  'update:open': [value: boolean]
+  'confirm': [record: RecordData, action: string]
+  'cancel': []
+}
+
+const props = withDefaults(defineProps<RecordConfirmationProps>(), {
+  open: false,
+  action: 'delete',
+  record: null,
+  customTitle: '',
+  customMessage: '',
+  customConfirmText: '',
+  customCancelText: '',
+})
+
+const emit = defineEmits<RecordConfirmationEmits>()
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+
+const actionConfig = computed(() => {
+  const configs = {
+    delete: {
+      title: 'Hapus Data',
+      message: 'Apakah Anda yakin ingin menghapus data ini? Tindakan ini tidak dapat dibatalkan.',
+      confirmText: 'Hapus',
+      variant: 'destructive' as const,
+    },
+    deactivate: {
+      title: 'Nonaktifkan Data',
+      message: 'Apakah Anda yakin ingin menonaktifkan data ini?',
+      confirmText: 'Nonaktifkan',
+      variant: 'warning' as const,
+    },
+    activate: {
+      title: 'Aktifkan Data',
+      message: 'Apakah Anda yakin ingin mengaktifkan data ini?',
+      confirmText: 'Aktifkan',
+      variant: 'default' as const,
+    },
+    archive: {
+      title: 'Arsipkan Data',
+      message: 'Apakah Anda yakin ingin mengarsipkan data ini?',
+      confirmText: 'Arsipkan',
+      variant: 'warning' as const,
+    },
+    restore: {
+      title: 'Pulihkan Data',
+      message: 'Apakah Anda yakin ingin memulihkan data ini?',
+      confirmText: 'Pulihkan',
+      variant: 'default' as const,
+    },
+  }
+  return configs[props.action]
+})
+
+const finalTitle = computed(() => {
+  return props.customTitle || actionConfig.value.title
+})
+
+const finalMessage = computed(() => {
+  if (props.customMessage) {
+    return props.customMessage
+  }
+
+  const baseMessage = actionConfig.value.message
+  // if (props.record) {
+  // const recordName = props.record.name || props.record.title || props.record.code || `ID: ${props.record.id}`
+  // return `${baseMessage}\n\nData: ${recordName}`
+  // }
+
+  return baseMessage
+})
+
+const finalConfirmText = computed(() => {
+  return props.customConfirmText || actionConfig.value.confirmText
+})
+
+const finalCancelText = computed(() => {
+  return props.customCancelText || 'Batal'
+})
+
+function handleConfirm() {
+  if (props.record) {
+    emit('confirm', props.record, props.action)
+  }
+  emit('update:open', false)
+}
+
+function handleCancel() {
+  emit('cancel')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Confirmation
+v-model:open="isOpen" :title="finalTitle" :message="finalMessage" :confirm-text="finalConfirmText"
+    :cancel-text="finalCancelText" :variant="actionConfig.variant" size="md" @confirm="handleConfirm"
+    @cancel="handleCancel"
+>
+    <!-- Slot untuk informasi tambahan record -->
+    <div v-if="record && $slots.default" class="mt-4 p-3 bg-muted rounded-md">
+      <slot :record="record" :action="action" />
+    </div>
+  </Confirmation>
+</template>
diff --git a/app/components/pub/custom-ui/data/dropdown-action-du.vue b/app/components/pub/custom-ui/data/dropdown-action-du.vue
index 52c999fb..b44fafee 100644
--- a/app/components/pub/custom-ui/data/dropdown-action-du.vue
+++ b/app/components/pub/custom-ui/data/dropdown-action-du.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
 
 const props = defineProps<{
   rec: ListItemDto
@@ -11,13 +12,13 @@ const recItem = inject<Ref<any>>('rec_item')!
 
 function detail() {
   recId.value = props.rec.id || 0
-  recAction.value = 'showDetail'
+  recAction.value = ActionEvents.showDetail
   recItem.value = props.rec
 }
 
 function edit() {
   recId.value = props.rec.id || 0
-  recAction.value = 'showEdit'
+  recAction.value = ActionEvents.showEdit
   recItem.value = props.rec
 }
 
diff --git a/app/components/pub/custom-ui/data/dropdown-action-ducd.vue b/app/components/pub/custom-ui/data/dropdown-action-ducd.vue
index a4073a93..7cdb781c 100644
--- a/app/components/pub/custom-ui/data/dropdown-action-ducd.vue
+++ b/app/components/pub/custom-ui/data/dropdown-action-ducd.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
 
 const props = defineProps<{
   rec: ListItemDto
@@ -11,19 +12,19 @@ const recItem = inject<Ref<any>>('rec_item')!
 
 function detail() {
   recId.value = props.rec.id || 0
-  recAction.value = 'showDetail'
+  recAction.value = ActionEvents.showDetail
   recItem.value = props.rec
 }
 
 function edit() {
   recId.value = props.rec.id || 0
-  recAction.value = 'showEdit'
+  recAction.value = ActionEvents.showEdit
   recItem.value = props.rec
 }
 
 function del() {
   recId.value = props.rec.id || 0
-  recAction.value = 'showConfirmDel'
+  recAction.value = ActionEvents.showConfirmDelete
   recItem.value = props.rec
 }
 
diff --git a/app/components/pub/custom-ui/data/dropdown-action-dud.vue b/app/components/pub/custom-ui/data/dropdown-action-dud.vue
index 5a9c30a9..aa6b8bc8 100644
--- a/app/components/pub/custom-ui/data/dropdown-action-dud.vue
+++ b/app/components/pub/custom-ui/data/dropdown-action-dud.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
 
 const props = defineProps<{
   rec: ListItemDto
@@ -11,19 +12,19 @@ const recItem = inject<Ref<any>>('rec_item')!
 
 function detail() {
   recId.value = props.rec.id || 0
-  recAction.value = 'showDetail'
+  recAction.value = ActionEvents.showDetail
   recItem.value = props.rec
 }
 
 function edit() {
   recId.value = props.rec.id || 0
-  recAction.value = 'showEdit'
+  recAction.value = ActionEvents.showEdit
   recItem.value = props.rec
 }
 
 function del() {
   recId.value = props.rec.id || 0
-  recAction.value = 'showConfirmDel'
+  recAction.value = ActionEvents.showConfirmDelete
   recItem.value = props.rec
 }
 
diff --git a/app/components/pub/custom-ui/data/dropdown-action-ud.vue b/app/components/pub/custom-ui/data/dropdown-action-ud.vue
index a1c05c7b..cf29d15d 100644
--- a/app/components/pub/custom-ui/data/dropdown-action-ud.vue
+++ b/app/components/pub/custom-ui/data/dropdown-action-ud.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
 
 interface Props {
   rec: ListItemDto
@@ -16,13 +17,13 @@ const recItem = inject<Ref<any>>('rec_item')!
 
 function edit() {
   recId.value = props.rec.id || 0
-  recAction.value = 'showEdit'
+  recAction.value = ActionEvents.showEdit
   recItem.value = props.rec
 }
 
 function del() {
   recId.value = props.rec.id || 0
-  recAction.value = 'showConfirmDel'
+  recAction.value = ActionEvents.showConfirmDelete
   recItem.value = props.rec
 }
 
diff --git a/app/components/pub/custom-ui/data/types.ts b/app/components/pub/custom-ui/data/types.ts
index 52f5753c..fe9f9ebd 100644
--- a/app/components/pub/custom-ui/data/types.ts
+++ b/app/components/pub/custom-ui/data/types.ts
@@ -100,3 +100,9 @@ export interface LinkItem {
   onClick?: (event: Event) => void
   headerStatus?: boolean
 }
+
+export const ActionEvents = {
+  showConfirmDelete: 'showConfirmDel',
+  showEdit: 'showEdit',
+  showDetail: 'showDetail',
+}
diff --git a/app/components/pub/custom-ui/form/combobox.vue b/app/components/pub/custom-ui/form/combobox.vue
index 12171c85..23f9401f 100644
--- a/app/components/pub/custom-ui/form/combobox.vue
+++ b/app/components/pub/custom-ui/form/combobox.vue
@@ -63,7 +63,12 @@ function onSelect(item: Item) {
     <PopoverTrigger as-child>
       <Button
       :id="props.id"
-      variant="outline" role="combobox" :aria-expanded="open" :class="cn(
+      variant="outline"
+      role="combobox"
+      :aria-expanded="open"
+      :aria-controls="`${props.id}-list`"
+      :aria-describedby="`${props.id}-search`"
+      :class="cn(
         'w-full justify-between border-black bg-white hover:bg-gray-50 text-sm font-normal',
         !modelValue && 'text-muted-foreground',
         props.class,
@@ -75,9 +80,14 @@ function onSelect(item: Item) {
     </PopoverTrigger>
     <PopoverContent class="w-full p-0">
       <Command>
-        <CommandInput class="h-9" :placeholder="searchPlaceholder || 'Cari...'" />
+        <CommandInput
+          :id="`${props.id}-search`"
+          class="h-9"
+          :placeholder="searchPlaceholder || 'Cari...'"
+          :aria-label="`Cari ${displayText}`"
+        />
         <CommandEmpty>{{ emptyMessage || 'Item tidak ditemukan.' }}</CommandEmpty>
-        <CommandList>
+        <CommandList :id="`${props.id}-list`" role="listbox">
           <CommandGroup>
             <CommandItem v-for="item in searchableItems" :key="item.value" :value="item.searchValue" @select="onSelect(item)">
               <div class="flex items-center justify-between w-full">
diff --git a/app/components/pub/custom-ui/form/label.vue b/app/components/pub/custom-ui/form/label.vue
index 179cee89..f8272352 100644
--- a/app/components/pub/custom-ui/form/label.vue
+++ b/app/components/pub/custom-ui/form/label.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
+    labelFor: string
     size?: 'default' | 'narrow' | 'wide'
     height?: 'default' | 'compact'
     position?: 'default' | 'dynamic'
@@ -45,7 +46,7 @@ const labelClass = computed(() => positionChildMap[props.position])
 
 <template>
   <div :class="wrapperClass">
-    <label :class="labelClass">
+    <label :class="labelClass" :for="labelFor">
       <slot />
     </label>
   </div>
diff --git a/app/components/pub/custom-ui/pagination/pagination.vue b/app/components/pub/custom-ui/pagination/pagination.vue
index 0c9f8596..797922e2 100644
--- a/app/components/pub/custom-ui/pagination/pagination.vue
+++ b/app/components/pub/custom-ui/pagination/pagination.vue
@@ -71,6 +71,19 @@ const startRecord = computed(() => {
 const endRecord = computed(() => {
   return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
 })
+
+// Function to determine button width based on page number
+function getButtonClass(pageNumber: number) {
+  const digits = pageNumber.toString().length
+
+  if (digits >= 4) { // 1000+ (1k+)
+    return 'h-9 px-4 min-w-12'
+  } else if (digits === 3) { // 100-999
+    return 'h-9 px-3 min-w-10'
+  } else { // 1-99
+    return 'w-9 h-9 p-0'
+  }
+}
 </script>
 
 <template>
@@ -97,7 +110,7 @@ v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="
 v-if="item.type === 'page'" :key="index" :value="item.value" as-child
             @click="handlePageChange(item.value)"
 >
-            <Button class="w-9 h-9 p-0" :variant="item.value === page ? 'default' : 'outline'">
+            <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
               {{ item.value }}
             </Button>
           </PaginationListItem>
diff --git a/app/components/pub/ui/select/Select.vue b/app/components/pub/ui/select/Select.vue
index 3020ed97..b18bba63 100644
--- a/app/components/pub/ui/select/Select.vue
+++ b/app/components/pub/ui/select/Select.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { SelectRoot } from 'radix-vue'
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
 import {
-  SelectTrigger,
   SelectContent,
-  SelectValue,
   SelectGroup,
   SelectItem,
   SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 } from '~/components/pub/ui/select'
-import type { SelectRootProps, SelectRootEmits } from 'radix-vue'
-import { useForwardPropsEmits } from 'radix-vue'
 
 interface Item {
   value: string
diff --git a/app/components/pub/ui/select/SelectContent.vue b/app/components/pub/ui/select/SelectContent.vue
index e902123e..88c9557b 100644
--- a/app/components/pub/ui/select/SelectContent.vue
+++ b/app/components/pub/ui/select/SelectContent.vue
@@ -32,8 +32,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       :class="
         cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
-          position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          position === 'popper'
+            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class,
         )
       "

From a3905dd9b9db6bc47e52f7c1d784923730c7d3ad Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 3 Sep 2025 15:34:11 +0700
Subject: [PATCH 14/35] feat(data-table): add skeletonSize prop to customize
 loading rows

Add optional skeletonSize prop to control the number of skeleton rows displayed during loading. Defaults to 5 if not provided.
---
 app/components/pub/base/data-table/data-table.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index 6f6fdb69..eb59b9b9 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -4,7 +4,8 @@ import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/componen
 import { Info } from 'lucide-vue-next'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
 
-defineProps<{
+const props = defineProps<{
+  skeletonSize?: number
   rows: unknown[]
   cols: Col[]
   header: Th[][]
@@ -14,6 +15,9 @@ defineProps<{
   funcComponent: RecStrFuncComponent
 }>()
 
+const getSkeletonSize = computed(() => {
+  return props.skeletonSize || 5
+})
 const loader = inject('table_data_loader') as DataTableLoader
 
 function handleActionCellClick(event: Event, _cellRef: string) {
@@ -47,7 +51,7 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
 
     <TableBody v-if="loader.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
-      <TableRow v-for="n in 5" :key="`skeleton-${n}`">
+      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
           <Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
         </TableCell>

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 15/35] 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 16/35] 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>

From 646c7b6d73ece047aab0239d03aadf1668b1391a Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 3 Sep 2025 16:07:39 +0700
Subject: [PATCH 17/35] fix(flow): prevent outside click on division form
 dialog

Add prevent-outside prop to Dialog component to avoid accidental closure
---
 app/components/flow/division/list.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/components/flow/division/list.vue b/app/components/flow/division/list.vue
index fc3a14d8..6f0f3a7b 100644
--- a/app/components/flow/division/list.vue
+++ b/app/components/flow/division/list.vue
@@ -275,11 +275,14 @@ function handleCancelConfirmation() {
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg">
+    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
       <AppDivisonEntryForm
-:division="divisionConf" :schema="schemaConf"
-        :initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
-/>
+        :division="divisionConf"
+        :schema="schemaConf"
+        :initial-values="{ name: '', code: '', parentId: '' }"
+        @submit="onSubmitForm"
+        @cancel="onCancelForm"
+      />
     </Dialog>
 
     <!-- Record Confirmation Modal -->

From 4c0312e48720569a34679c2ec113be76bfcce3b9 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 3 Sep 2025 17:00:49 +0700
Subject: [PATCH 18/35] feat(installation): implement installation list with
 pagination and search

refactor(installation): move form schema and configuration to separate files
fix(installation): update page title and content display
---
 .../app/installation/entry-form.vue           | 114 +++++--
 app/components/app/installation/list-cfg.ts   |  68 ++++
 app/components/app/installation/list.vue      |  91 +++---
 app/components/flow/installation/entry.ts     |  37 +++
 app/components/flow/installation/entry.vue    |  71 -----
 app/components/flow/installation/list.vue     | 300 ++++++++++++++++--
 .../flow/installation/schema.query.ts         |  15 +
 .../(features)/org-src/installation/index.vue |   4 +-
 8 files changed, 537 insertions(+), 163 deletions(-)
 create mode 100644 app/components/app/installation/list-cfg.ts
 create mode 100644 app/components/flow/installation/entry.ts
 delete mode 100644 app/components/flow/installation/entry.vue
 create mode 100644 app/components/flow/installation/schema.query.ts

diff --git a/app/components/app/installation/entry-form.vue b/app/components/app/installation/entry-form.vue
index d935a65c..0b3a0049 100644
--- a/app/components/app/installation/entry-form.vue
+++ b/app/components/app/installation/entry-form.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Block from '~/components/pub/custom-ui/form/block.vue'
+import { toTypedSchema } from '@vee-validate/zod'
 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 Select from '~/components/pub/custom-ui/form/select.vue'
 
+interface InstallationFormData {
+  name: string
+  code: string
+  encounterClassCode: string
+}
+
 const props = defineProps<{
-  modelValue: any
-  encounterClassCode: {
+  installation: {
     msg: {
       placeholder: string
     }
@@ -18,41 +23,102 @@ const props = defineProps<{
       code: string
     }[]
   }
+  schema: any
+  initialValues?: Partial<InstallationFormData>
   errors?: FormErrors
 }>()
-const emit = defineEmits(['update:modelValue', 'event'])
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-})
+const emit = defineEmits<{
+  'submit': [values: InstallationFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: InstallationFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    encounterClassCode: values.encounterClassCode || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
 </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>
+  <Form
+    v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+    >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="name">Nama</Label>
             <Field id="name" :errors="errors">
-              <Input v-model="data.name" />
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="name" type="text" placeholder="Masukkan nama instalasi" autocomplete="off"
+                      v-bind="componentField"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Kode</Label>
+
+          <FieldGroup>
+            <Label label-for="code">Kode</Label>
             <Field id="code" :errors="errors">
-              <Input v-model="data.code" />
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input id="code" type="text" placeholder="Masukkan kode instalasi" autocomplete="off" v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label height="compact">Encounter Code</Label>
+
+          <FieldGroup>
+            <Label label-for="parentId">Encounter Class</Label>
             <Field id="encounterClassCode" :errors="errors">
-              <Select v-model="data.encounterClassCode" :items="props.encounterClassCode.items" />
+              <FormField v-slot="{ componentField }" name="encounterClassCode">
+                <FormItem>
+                  <FormControl>
+                    <Select
+                      v-bind="componentField"
+                      :items="installation.items"
+                      :placeholder="installation.msg.placeholder"
+                    />
+
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-        </Block>
+        </div>
       </div>
-    </div>
-  </form>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
 </template>
diff --git a/app/components/app/installation/list-cfg.ts b/app/components/app/installation/list-cfg.ts
new file mode 100644
index 00000000..6b8dc5ea
--- /dev/null
+++ b/app/components/app/installation/list-cfg.ts
@@ -0,0 +1,68 @@
+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-ud.vue'))
+
+export const cols: Col[] = [{ width: 100 }, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [{ label: 'Id' }, { label: 'Nama' }, { label: 'Kode' }, { label: 'Encounter Class' }, { label: '' }],
+]
+
+export const keys = ['id', 'name', 'cellphone', 'religion_code', '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.firstName} ${recX.lastName || ''}`.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,
+      props: {
+        size: 'sm',
+      },
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
index d3a63407..8f598ad6 100644
--- a/app/components/app/installation/list.vue
+++ b/app/components/app/installation/list.vue
@@ -1,54 +1,63 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta?: PaginationMeta
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: 'update', value: string): void
+  pageChange: [page: number]
 }>()
-// #endregion
 
-// #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(() => {
-  // init code
-  fetchData()
-})
-// #endregion
-
-// #region Functions
-async function fetchData() {
-  console.log('fetched')
+function handlePageChange(page: number) {
+  emit('pageChange', page)
 }
-// #endregion region
 
-// #region Utilities & event handlers
-function increment() {
-  count.value++
-}
-// #endregion
-
-// #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
+// Computed properties for formatted display
+const formattedRecordCount = computed(() => {
+  if (!props.paginationMeta) return '0'
+  const count = props.paginationMeta.recordCount
+  if (count == null || count === undefined) return '0'
+  return Number(count).toLocaleString('id-ID')
+})
+
+const startRecord = computed(() => {
+  if (!props.paginationMeta) return 1
+  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+})
+
+const endRecord = computed(() => {
+  if (!props.paginationMeta) return 0
+  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
 })
-// #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="space-y-4">
+    <PubBaseDataTable
+:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :func-html="funcHtml" :func-component="funcComponent"
+/>
+
+    <!-- Data info and pagination -->
+    <div v-if="paginationMeta" class="flex align-center justify-between">
+      <!-- Data info - always show -->
+      <div class="flex items-center justify-between px-2 mb-4">
+        <div class="flex-1 text-sm text-muted-foreground">
+          Menampilkan {{ startRecord }}
+          hingga {{ endRecord }}
+          dari {{ formattedRecordCount }} data
+        </div>
+      </div>
+
+      <!-- Pagination controls - only show when multiple pages -->
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubCustomUiPagination :pagination-meta="paginationMeta" :show-info="false" @page-change="handlePageChange" />
+      </div>
+    </div>
   </div>
 </template>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/flow/installation/entry.ts b/app/components/flow/installation/entry.ts
new file mode 100644
index 00000000..c003a029
--- /dev/null
+++ b/app/components/flow/installation/entry.ts
@@ -0,0 +1,37 @@
+import * as z from 'zod'
+
+export const installationConf = {
+  msg: {
+    placeholder: '---pilih encounter class (fhir7)',
+  },
+  items: [
+    { value: '1', label: 'Ambulatory', code: 'AMB' },
+    { value: '2', label: 'Inpatient', code: 'IMP' },
+    { value: '3', label: 'Emergency', code: 'EMER' },
+    { value: '4', label: 'Observation', code: 'OBSENC' },
+    { value: '5', label: 'Pre-admission', code: 'PRENC' },
+    { value: '6', label: 'Short Stay', code: 'SS' },
+    { value: '7', label: 'Virtual', code: 'VR' },
+    { value: '8', label: 'Home Health', code: 'HH' },
+  ],
+}
+
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama instalasi harus diisi',
+    })
+    .min(3, 'Nama instalasi minimal 3 karakter'),
+
+  code: z
+    .string({
+      required_error: 'Kode instalasi harus diisi',
+    })
+    .min(3, 'Kode instalasi minimal 3 karakter'),
+
+  encounterClassCode: z
+    .string({
+      required_error: 'Kelompok encounter class harus dipilih',
+    })
+    .min(1, 'Kelompok encounter class harus dipilih'),
+})
diff --git a/app/components/flow/installation/entry.vue b/app/components/flow/installation/entry.vue
deleted file mode 100644
index 94a4cd1f..00000000
--- a/app/components/flow/installation/entry.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import * as z from 'zod'
-import Action from '~/components/pub/custom-ui/nav-footer/ba-su.vue'
-
-const { errors, setFromZodError, clearErrors } = useFormErrors()
-
-const data = ref({
-  code: '',
-  name: '',
-  encounterClassCode: '',
-})
-
-const installation = {
-  msg: {
-    placeholder: '---pilih encounter class (fhir7)',
-  },
-  items: [
-    { value: '1', label: 'Ambulatory', code: 'AMB' },
-    { value: '2', label: 'Inpatient', code: 'IMP' },
-    { value: '3', label: 'Emergency', code: 'EMER' },
-    { value: '4', label: 'Observation', code: 'OBSENC' },
-    { value: '5', label: 'Pre-admission', code: 'PRENC' },
-    { value: '6', label: 'Short Stay', code: 'SS' },
-    { value: '7', label: 'Virtual', code: 'VR' },
-    { value: '8', label: 'Home Health', code: 'HH' },
-  ],
-}
-
-const schema = z.object({
-  name: z.string().min(1, 'Nama instalasi harus diisi'),
-  code: z.string().min(1, 'Kode instalasi harus diisi'),
-  encounterClassCode: z.string().min(1, 'Kelompok encounter class harus dipilih'),
-})
-
-function onClick(type: string) {
-  if (type === 'cancel') {
-    navigateTo('/org-src/instalasion')
-  } else if (type === 'draft') {
-    // do something
-  } else if (type === 'submit') {
-    // Clear previous errors
-    clearErrors()
-
-    const requestData = schema.safeParse(data.value)
-    if (!requestData.success) {
-      // Set errors menggunakan composable
-      setFromZodError(requestData.error)
-
-      // Optional: tampilkan toast notification untuk error general
-      console.warn('Form validation failed:', requestData.error)
-      return
-    }
-
-    console.log('Form data valid:', requestData.data)
-    // do something with valid data
-  }
-}
-</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> Instalasi
-  </div>
-  <div>
-    <AppInstallationEntryForm v-model="data" :errors="errors" :encounter-class-code="installation" />
-  </div>
-  <div class="my-2 flex justify-end py-2">
-    <Action @click="onClick" />
-  </div>
-</template>
diff --git a/app/components/flow/installation/list.vue b/app/components/flow/installation/list.vue
index d3a63407..7c98f28a 100644
--- a/app/components/flow/installation/list.vue
+++ b/app/components/flow/installation/list.vue
@@ -1,51 +1,301 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { refDebounced, useUrlSearchParams } from '@vueuse/core'
+import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { installationConf, schemaConf } from './entry'
+import { defaultQuery, querySchema } from './schema.query'
 
 // #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// URL state management
+const queryParams = useUrlSearchParams('history', {
+  initialValue: defaultQuery,
+  removeFalsyValues: true,
+})
+
+const params = computed(() => {
+  const result = querySchema.safeParse(queryParams)
+  return result.data || defaultQuery
+})
+
+// Pagination state - computed from URL params
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: 0,
+  page: params.value.page,
+  pageSize: params.value.pageSize,
+  totalPage: 0,
+  hasNext: false,
+  hasPrev: false,
+})
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+// Search model with debounce
+const searchInput = ref(params.value.q || '')
+const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+
+const headerPrep: HeaderPrep = {
+  title: 'Instalasi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Instalasi',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
 // #endregion
 
 // #region Lifecycle Hooks
 onMounted(() => {
-  // init code
-  fetchData()
+  getInstallationList()
 })
 // #endregion
 
 // #region Functions
-async function fetchData() {
-  console.log('fetched')
+async function getInstallationList() {
+  isLoading.isTableLoading = true
+
+  try {
+    // Use current params from URL state
+    const currentParams = params.value
+
+    // Prepare query parameters for pagination and search
+    const urlParams = new URLSearchParams({
+      'page-number': currentParams.page.toString(),
+      'page-size': currentParams.pageSize.toString(),
+    })
+
+    if (currentParams.q) {
+      urlParams.append('search', currentParams.q)
+    }
+
+    const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+
+    if (resp.success) {
+      const responseBody = resp.body as Record<string, any>
+      data.value = responseBody.data || []
+
+      const pager = responseBody.meta
+      // Update pagination meta from response
+      // Fallback if meta is not provided by API
+      paginationMeta.recordCount = pager.record_totalCount
+      paginationMeta.page = currentParams.page
+      paginationMeta.pageSize = currentParams.pageSize
+      paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
+      paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+      paginationMeta.hasPrev = paginationMeta.page > 1
+    }
+  } catch (error) {
+    console.error('Error fetching Installation list:', error)
+    data.value = []
+    paginationMeta.recordCount = 0
+    paginationMeta.totalPage = 0
+    paginationMeta.hasNext = false
+    paginationMeta.hasPrev = false
+  } finally {
+    isLoading.isTableLoading = false
+  }
 }
+
+// Handle pagination page change
+function handlePageChange(page: number) {
+  // Update URL params - this will trigger watcher
+  queryParams.page = page
+}
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/Installation/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getInstallationList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
 // #endregion region
 
-// #region Utilities & event handlers
-function increment() {
-  count.value++
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/Installation', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Refresh data after successful submission
+    await getInstallationList()
+
+    // TODO: Show success message
+    console.log('Installation created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
 }
 // #endregion
 
 // #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
+// Watch for URL param changes and trigger refetch
+watch(params, (newParams) => {
+  // Sync search input with URL params (for back/forward navigation)
+  if (newParams.q !== searchInput.value) {
+    searchInput.value = newParams.q || ''
+  }
+  getInstallationList()
+}, { deep: true })
+
+// Handle search from header component
+function handleSearch(searchValue: string) {
+  // Update URL params - this will trigger watcher and refetch data
+  queryParams.q = searchValue
+  queryParams.page = 1 // Reset to first page when searching
+}
+
+// Watch debounced search and update URL params (keeping for backward compatibility)
+watch(debouncedSearch, (newValue: any) => {
+  // Only search if 3+ characters or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= 3) {
+    queryParams.q = newValue
+    queryParams.page = 1 // Reset to first page when searching
+  }
 })
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
 // #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Instalasi" size="lg" prevent-outside>
+      <AppInstallationEntryForm
+:installation="installationConf" :schema="schemaConf"
+        :initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
+        @cancel="onCancelForm"
+/>
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+>
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
   </div>
 </template>
 
diff --git a/app/components/flow/installation/schema.query.ts b/app/components/flow/installation/schema.query.ts
new file mode 100644
index 00000000..9b1a4606
--- /dev/null
+++ b/app/components/flow/installation/schema.query.ts
@@ -0,0 +1,15 @@
+import * as z from 'zod'
+
+export const querySchema = z.object({
+  q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
+  page: z.coerce.number().int().min(1).default(1).catch(1),
+  pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
+})
+
+export const defaultQuery = {
+  q: '',
+  page: 1,
+  pageSize: 10,
+}
+
+export type QueryParams = z.infer<typeof querySchema>
diff --git a/app/pages/(features)/org-src/installation/index.vue b/app/pages/(features)/org-src/installation/index.vue
index a88df5c7..4131d387 100644
--- a/app/pages/(features)/org-src/installation/index.vue
+++ b/app/pages/(features)/org-src/installation/index.vue
@@ -6,7 +6,7 @@ import Error from '~/components/pub/base/error/error.vue'
 definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'List Division',
+  title: 'List Installation',
   contentFrame: 'cf-full-width',
 })
 
@@ -34,7 +34,7 @@ const canRead = true
 <template>
   <div>
     <div v-if="canRead">
-      route installation list
+      <FlowInstallationList />
     </div>
     <Error v-else :status-code="403" />
   </div>

From 6c70beb8822380bbd9a7b8218d2de50e6d16b8ae Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 3 Sep 2025 17:03:05 +0700
Subject: [PATCH 19/35] refactor(org-src): remove unused division and
 installation add pages

move to modal based form entry (bcz its simple form)
---
 app/pages/(features)/org-src/division/add.vue | 41 -------------------
 .../(features)/org-src/installation/add.vue   | 41 -------------------
 2 files changed, 82 deletions(-)
 delete mode 100644 app/pages/(features)/org-src/division/add.vue
 delete mode 100644 app/pages/(features)/org-src/installation/add.vue

diff --git a/app/pages/(features)/org-src/division/add.vue b/app/pages/(features)/org-src/division/add.vue
deleted file mode 100644
index 122e6ce3..00000000
--- a/app/pages/(features)/org-src/division/add.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<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 Divisi',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
-
-// 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)
-const canRead = true
-</script>
-
-<template>
-  <div>
-    <div v-if="canRead">
-      <FlowDivisionEntry />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
-</template>
diff --git a/app/pages/(features)/org-src/installation/add.vue b/app/pages/(features)/org-src/installation/add.vue
deleted file mode 100644
index 30c3e886..00000000
--- a/app/pages/(features)/org-src/installation/add.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<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 Instalasi',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
-
-// 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)
-const canRead = true
-</script>
-
-<template>
-  <div>
-    <div v-if="canRead">
-      <FlowInstallationEntry />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
-</template>

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 20/35] =?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 3dbc1b8fd1342ea4904a88ebe51535fbeb15205e Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 4 Sep 2025 11:26:58 +0700
Subject: [PATCH 21/35] refactor(pagination): move pagination info display to
 component and improve layout

- Consolidate pagination info display logic in pagination component
- Remove duplicate computed properties from list components
- Improve pagination layout with better spacing and responsiveness
- Add skeleton loading support to data tables
---
 app/components/app/divison/list.vue           | 53 +++----------------
 app/components/app/installation/list.vue      | 39 +++-----------
 .../pub/custom-ui/pagination/pagination.vue   | 47 ++++++++--------
 3 files changed, 40 insertions(+), 99 deletions(-)

diff --git a/app/components/app/divison/list.vue b/app/components/app/divison/list.vue
index 3aecc2e8..cf0d5ea2 100644
--- a/app/components/app/divison/list.vue
+++ b/app/components/app/divison/list.vue
@@ -7,7 +7,7 @@ interface Props {
   paginationMeta?: PaginationMeta
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -16,57 +16,20 @@ const emit = defineEmits<{
 function handlePageChange(page: number) {
   emit('pageChange', page)
 }
-
-// Computed properties for formatted display
-const formattedRecordCount = computed(() => {
-  if (!props.paginationMeta) return '0'
-  const count = props.paginationMeta.recordCount
-  if (count == null || count === undefined) return '0'
-  return Number(count).toLocaleString('id-ID')
-})
-
-const startRecord = computed(() => {
-  if (!props.paginationMeta) return 1
-  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
-})
-
-const endRecord = computed(() => {
-  if (!props.paginationMeta) return 0
-  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
-})
 </script>
 
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-      :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
-        />
+    :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
+/>
 
-    <!-- Data info and pagination -->
-    <div v-if="paginationMeta" class="flex align-center justify-between">
-      <!-- Data info - always show -->
-      <div class="flex items-center justify-between px-2 mb-4">
-        <div class="flex-1 text-sm text-muted-foreground">
-          Menampilkan {{ startRecord }}
-          hingga {{ endRecord }}
-          dari {{ formattedRecordCount }} data
-        </div>
-      </div>
-
-      <!-- Pagination controls - only show when multiple pages -->
+    <template v-if="paginationMeta">
       <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination
-          :pagination-meta="paginationMeta"
-          :show-info="false"
-          @page-change="handlePageChange"
-        />
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
       </div>
-    </div>
+    </template>
+
   </div>
 </template>
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
index 8f598ad6..a6b19eb2 100644
--- a/app/components/app/installation/list.vue
+++ b/app/components/app/installation/list.vue
@@ -7,7 +7,7 @@ interface Props {
   paginationMeta?: PaginationMeta
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -16,48 +16,21 @@ const emit = defineEmits<{
 function handlePageChange(page: number) {
   emit('pageChange', page)
 }
-
-// Computed properties for formatted display
-const formattedRecordCount = computed(() => {
-  if (!props.paginationMeta) return '0'
-  const count = props.paginationMeta.recordCount
-  if (count == null || count === undefined) return '0'
-  return Number(count).toLocaleString('id-ID')
-})
-
-const startRecord = computed(() => {
-  if (!props.paginationMeta) return 1
-  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
-})
-
-const endRecord = computed(() => {
-  if (!props.paginationMeta) return 0
-  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
-})
 </script>
 
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
 :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-      :func-html="funcHtml" :func-component="funcComponent"
+      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
 />
 
     <!-- Data info and pagination -->
-    <div v-if="paginationMeta" class="flex align-center justify-between">
-      <!-- Data info - always show -->
-      <div class="flex items-center justify-between px-2 mb-4">
-        <div class="flex-1 text-sm text-muted-foreground">
-          Menampilkan {{ startRecord }}
-          hingga {{ endRecord }}
-          dari {{ formattedRecordCount }} data
-        </div>
-      </div>
-
-      <!-- Pagination controls - only show when multiple pages -->
+    <template v-if="paginationMeta">
       <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" :show-info="false" @page-change="handlePageChange" />
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
       </div>
-    </div>
+    </template>
+
   </div>
 </template>
diff --git a/app/components/pub/custom-ui/pagination/pagination.vue b/app/components/pub/custom-ui/pagination/pagination.vue
index 797922e2..694e3b7b 100644
--- a/app/components/pub/custom-ui/pagination/pagination.vue
+++ b/app/components/pub/custom-ui/pagination/pagination.vue
@@ -87,39 +87,44 @@ function getButtonClass(pageNumber: number) {
 </script>
 
 <template>
-  <div class="flex items-center justify-between px-2">
+  <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
     <!-- Info text -->
-    <div v-if="showInfo" class="flex-1 text-sm text-muted-foreground">
+    <div v-if="showInfo" class="text-sm text-muted-foreground shrink-0">
       Menampilkan {{ startRecord }}
       hingga {{ endRecord }}
       dari {{ formattedRecordCount }} data
     </div>
-    <div v-else class="flex-1"></div>
+    <div v-else class="shrink-0"></div>
+
+    <!-- Spacer untuk memastikan ada ruang di tengah -->
+    <div class="flex-1 min-w-4"></div>
 
     <!-- Pagination controls -->
-    <Pagination
+    <div class="shrink-0">
+      <Pagination
 v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
-      :items-per-page="paginationMeta.pageSize" show-edges
+        :items-per-page="paginationMeta.pageSize" show-edges
 >
-      <PaginationList v-slot="{ items }" class="flex items-center gap-1">
-        <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
-        <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
+        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+          <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
+          <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
 
-        <template v-for="(item, index) in items">
-          <PaginationListItem
+          <template v-for="(item, index) in items">
+            <PaginationListItem
 v-if="item.type === 'page'" :key="index" :value="item.value" as-child
-            @click="handlePageChange(item.value)"
+              @click="handlePageChange(item.value)"
 >
-            <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
-              {{ item.value }}
-            </Button>
-          </PaginationListItem>
-          <PaginationEllipsis v-else :key="item.type" :index="index" />
-        </template>
+              <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
+                {{ item.value }}
+              </Button>
+            </PaginationListItem>
+            <PaginationEllipsis v-else :key="item.type" :index="index" />
+          </template>
 
-        <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
-        <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
-      </PaginationList>
-    </Pagination>
+          <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
+          <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
+        </PaginationList>
+      </Pagination>
+    </div>
   </div>
 </template>

From 39d96e7b2419abe56c3f5683d2c273305f45d7c8 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 4 Sep 2025 13:17:06 +0700
Subject: [PATCH 22/35] feat(unit): implement unit management flow with list
 and form components

- Add schema validation and default query params for unit management
- Create list view with pagination, search, and delete functionality
- Implement form entry with validation for creating/editing units
- Replace placeholder content with functional unit list component
- Remove unused unit add page and update page titles
---
 app/components/app/unit/entry-form.vue        | 119 +++++--
 app/components/app/unit/list-cfg.ts           |  86 +++++
 app/components/app/unit/list.vue              |  67 ++--
 .../flow/unit/{entry.vue => entry.ts}         |  73 ++---
 app/components/flow/unit/list.vue             | 299 ++++++++++++++++--
 app/components/flow/unit/schema.query.ts      |  15 +
 app/pages/(features)/org-src/unit/add.vue     |  41 ---
 app/pages/(features)/org-src/unit/index.vue   |   4 +-
 8 files changed, 509 insertions(+), 195 deletions(-)
 create mode 100644 app/components/app/unit/list-cfg.ts
 rename app/components/flow/unit/{entry.vue => entry.ts} (53%)
 create mode 100644 app/components/flow/unit/schema.query.ts
 delete mode 100644 app/pages/(features)/org-src/unit/add.vue

diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
index c8581f4e..463a6683 100644
--- a/app/components/app/unit/entry-form.vue
+++ b/app/components/app/unit/entry-form.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Block from '~/components/pub/custom-ui/form/block.vue'
+import { toTypedSchema } from '@vee-validate/zod'
 import Combobox from '~/components/pub/custom-ui/form/combobox.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'
 
+interface UnitFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
 const props = defineProps<{
-  modelValue: any
-  installation: {
+  unit: {
     msg: {
       placeholder: string
       search: string
@@ -20,47 +25,101 @@ const props = defineProps<{
       code: string
     }[]
   }
+  schema: any
+  initialValues?: Partial<UnitFormData>
   errors?: FormErrors
 }>()
-const emit = defineEmits(['update:modelValue', 'event'])
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-})
+const emit = defineEmits<{
+  'submit': [values: UnitFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: UnitFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
 </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>
+  <Form
+    v-slot="{ handleSubmit, resetForm }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+    >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="name">Nama</Label>
             <Field id="name" :errors="errors">
-              <Input v-model="data.name" />
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="name" type="text" placeholder="Masukkan nama unit" autocomplete="off"
+                      v-bind="componentField"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Kode</Label>
+
+          <FieldGroup>
+            <Label label-for="code">Kode</Label>
             <Field id="code" :errors="errors">
-              <Input v-model="data.code" />
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input id="code" type="text" placeholder="Masukkan kode unit" autocomplete="off" v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Instalasi</Label>
+
+          <FieldGroup>
+            <Label label-for="parentId">Instalasi</Label>
             <Field id="parentId" :errors="errors">
-              <Combobox
-                v-model="data.parentId"
-                :items="props.installation.items"
-                :placeholder="props.installation.msg.placeholder"
-                :search-placeholder="props.installation.msg.search"
-                :empty-message="props.installation.msg.empty"
-              />
+              <FormField v-slot="{ componentField }" name="parentId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="parentId" v-bind="componentField" :items="unit.items"
+                      :placeholder="unit.msg.placeholder" :search-placeholder="unit.msg.search"
+                      :empty-message="unit.msg.empty"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
             </Field>
           </FieldGroup>
-        </Block>
+        </div>
       </div>
-    </div>
-  </form>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
 </template>
diff --git a/app/components/app/unit/list-cfg.ts b/app/components/app/unit/list-cfg.ts
new file mode 100644
index 00000000..00423066
--- /dev/null
+++ b/app/components/app/unit/list-cfg.ts
@@ -0,0 +1,86 @@
+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-ud.vue'))
+
+export const cols: Col[] = [
+  { width: 100 },
+  { },
+  { },
+  { },
+  { width: 50 },
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Id' },
+    { label: 'Nama' },
+    { label: 'Kode' },
+    { label: 'Instalasi' },
+    { label: '' },
+  ],
+]
+
+export const keys = [
+  'id',
+  'firstName',
+  'cellphone',
+  'birth_place',
+  '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,
+      props: {
+        size: 'sm',
+      },
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/unit/list.vue b/app/components/app/unit/list.vue
index d3a63407..1baaa6ba 100644
--- a/app/components/app/unit/list.vue
+++ b/app/components/app/unit/list.vue
@@ -1,54 +1,35 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta?: PaginationMeta
+}
+
+defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: 'update', value: string): void
+  pageChange: [page: number]
 }>()
-// #endregion
 
-// #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(() => {
-  // init code
-  fetchData()
-})
-// #endregion
-
-// #region Functions
-async function fetchData() {
-  console.log('fetched')
+function handlePageChange(page: number) {
+  emit('pageChange', page)
 }
-// #endregion region
-
-// #region Utilities & event handlers
-function increment() {
-  count.value++
-}
-// #endregion
-
-// #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
-})
-// #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="space-y-4">
+    <PubBaseDataTable
+:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
+/>
+
+    <template v-if="paginationMeta">
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+      </div>
+    </template>
+
   </div>
 </template>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/flow/unit/entry.vue b/app/components/flow/unit/entry.ts
similarity index 53%
rename from app/components/flow/unit/entry.vue
rename to app/components/flow/unit/entry.ts
index 323e6649..bf85a0ed 100644
--- a/app/components/flow/unit/entry.vue
+++ b/app/components/flow/unit/entry.ts
@@ -1,18 +1,8 @@
-<script setup lang="ts">
 import * as z from 'zod'
-import Action from '~/components/pub/custom-ui/nav-footer/ba-su.vue'
 
-const { errors, setFromZodError, clearErrors } = useFormErrors()
-
-const data = ref({
-  code: '',
-  name: '',
-  parentId: '',
-})
-
-const installation = {
+export const unitConf = {
   msg: {
-    placeholder: '---pilih instalasi utama',
+    placeholder: '--- pilih instalasi',
     search: 'kode, nama instalasi',
     empty: 'instalasi tidak ditemukan',
   },
@@ -40,9 +30,18 @@ const installation = {
   ],
 }
 
-const schema = z.object({
-  name: z.string().min(1, 'Nama unit harus diisi'),
-  code: z.string().min(1, 'Kode unit harus diisi'),
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama unit harus diisi',
+    })
+    .min(1, 'Nama unit harus diisi'),
+
+  code: z
+    .string({
+      required_error: 'Kode unit harus diisi',
+    })
+    .min(1, 'Kode unit harus diisi'),
   parentId: z.preprocess(
     (input: unknown) => {
       if (typeof input === 'string') {
@@ -55,44 +54,10 @@ const schema = z.object({
 
       return input
     },
-    z.number().refine((num) => num > 0, 'Instalasi induk harus dipilih'),
+    z
+      .number({
+        required_error: 'Instalasi induk harus dipilih',
+      })
+      .refine((num) => num > 0, 'Instalasi induk harus dipilih'),
   ),
 })
-
-function onClick(type: string) {
-  if (type === 'cancel') {
-    navigateTo('/org-src/unit')
-  } else if (type === 'draft') {
-    // do something
-  } else if (type === 'submit') {
-    // Clear previous errors
-    clearErrors()
-
-    const requestData = schema.safeParse(data.value)
-    if (!requestData.success) {
-      // Set errors menggunakan composable
-      setFromZodError(requestData.error)
-
-      // Optional: tampilkan toast notification untuk error general
-      console.warn('Form validation failed:', requestData.error)
-      return
-    }
-
-    console.log('Form data valid:', requestData.data)
-    // do something with valid data
-  }
-}
-</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> Unit
-  </div>
-  <div>
-    <AppUnitEntryForm v-model="data" :errors="errors" :installation="installation" />
-  </div>
-  <div class="my-2 flex justify-end py-2">
-    <Action @click="onClick" />
-  </div>
-</template>
diff --git a/app/components/flow/unit/list.vue b/app/components/flow/unit/list.vue
index d3a63407..e8c09bb0 100644
--- a/app/components/flow/unit/list.vue
+++ b/app/components/flow/unit/list.vue
@@ -1,51 +1,300 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { refDebounced, useUrlSearchParams } from '@vueuse/core'
+import AppUnitEntryForm from '~/components/app/unit/entry-form.vue'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { schemaConf, unitConf } from './entry'
+import { defaultQuery, querySchema } from './schema.query'
 
 // #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// URL state management
+const queryParams = useUrlSearchParams('history', {
+  initialValue: defaultQuery,
+  removeFalsyValues: true,
+})
+
+const params = computed(() => {
+  const result = querySchema.safeParse(queryParams)
+  return result.data || defaultQuery
+})
+
+// Pagination state - computed from URL params
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: 0,
+  page: params.value.page,
+  pageSize: params.value.pageSize,
+  totalPage: 0,
+  hasNext: false,
+  hasPrev: false,
+})
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+// Search model with debounce
+const searchInput = ref(params.value.q || '')
+const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+
+const headerPrep: HeaderPrep = {
+  title: 'Unit',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Unit',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
 // #endregion
 
 // #region Lifecycle Hooks
 onMounted(() => {
-  // init code
-  fetchData()
+  getUnitList()
 })
 // #endregion
 
 // #region Functions
-async function fetchData() {
-  console.log('fetched')
+async function getUnitList() {
+  isLoading.isTableLoading = true
+
+  try {
+    // Use current params from URL state
+    const currentParams = params.value
+
+    // Prepare query parameters for pagination and search
+    const urlParams = new URLSearchParams({
+      'page-number': currentParams.page.toString(),
+      'page-size': currentParams.pageSize.toString(),
+    })
+
+    if (currentParams.q) {
+      urlParams.append('search', currentParams.q)
+    }
+
+    const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+
+    if (resp.success) {
+      const responseBody = resp.body as Record<string, any>
+      data.value = responseBody.data || []
+
+      const pager = responseBody.meta
+      // Update pagination meta from response
+      // Fallback if meta is not provided by API
+      paginationMeta.recordCount = pager.record_totalCount
+      paginationMeta.page = currentParams.page
+      paginationMeta.pageSize = currentParams.pageSize
+      paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
+      paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+      paginationMeta.hasPrev = paginationMeta.page > 1
+    }
+  } catch (error) {
+    console.error('Error fetching Unit list:', error)
+    data.value = []
+    paginationMeta.recordCount = 0
+    paginationMeta.totalPage = 0
+    paginationMeta.hasNext = false
+    paginationMeta.hasPrev = false
+  } finally {
+    isLoading.isTableLoading = false
+  }
 }
+
+// Handle pagination page change
+function handlePageChange(page: number) {
+  // Update URL params - this will trigger watcher
+  queryParams.page = page
+}
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/unit/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getUnitList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
 // #endregion region
 
-// #region Utilities & event handlers
-function increment() {
-  count.value++
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/unit', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Refresh data after successful submission
+    await getUnitList()
+
+    // TODO: Show success message
+    console.log('Unit created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
 }
 // #endregion
 
 // #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
+// Watch for URL param changes and trigger refetch
+watch(params, (newParams) => {
+  // Sync search input with URL params (for back/forward navigation)
+  if (newParams.q !== searchInput.value) {
+    searchInput.value = newParams.q || ''
+  }
+  getUnitList()
+}, { deep: true })
+
+// Handle search from header component
+function handleSearch(searchValue: string) {
+  // Update URL params - this will trigger watcher and refetch data
+  queryParams.q = searchValue
+  queryParams.page = 1 // Reset to first page when searching
+}
+
+// Watch debounced search and update URL params (keeping for backward compatibility)
+watch(debouncedSearch, (newValue: any) => {
+  // Only search if 3+ characters or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= 3) {
+    queryParams.q = newValue
+    queryParams.page = 1 // Reset to first page when searching
+  }
 })
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
 // #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <AppUnitList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Unit" size="lg" prevent-outside>
+      <AppUnitEntryForm
+:unit="unitConf" :schema="schemaConf" :initial-values="{ name: '', code: '', parentId: '' }"
+        @submit="onSubmitForm" @cancel="onCancelForm"
+/>
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+>
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
   </div>
 </template>
 
diff --git a/app/components/flow/unit/schema.query.ts b/app/components/flow/unit/schema.query.ts
new file mode 100644
index 00000000..9b1a4606
--- /dev/null
+++ b/app/components/flow/unit/schema.query.ts
@@ -0,0 +1,15 @@
+import * as z from 'zod'
+
+export const querySchema = z.object({
+  q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
+  page: z.coerce.number().int().min(1).default(1).catch(1),
+  pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
+})
+
+export const defaultQuery = {
+  q: '',
+  page: 1,
+  pageSize: 10,
+}
+
+export type QueryParams = z.infer<typeof querySchema>
diff --git a/app/pages/(features)/org-src/unit/add.vue b/app/pages/(features)/org-src/unit/add.vue
deleted file mode 100644
index 195f4b24..00000000
--- a/app/pages/(features)/org-src/unit/add.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<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 Unit Instalasi',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
-
-// 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)
-const canRead = true
-</script>
-
-<template>
-  <div>
-    <div v-if="canRead">
-      <FlowUnitEntry />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
-</template>
diff --git a/app/pages/(features)/org-src/unit/index.vue b/app/pages/(features)/org-src/unit/index.vue
index 40bd09be..801105eb 100644
--- a/app/pages/(features)/org-src/unit/index.vue
+++ b/app/pages/(features)/org-src/unit/index.vue
@@ -6,7 +6,7 @@ import Error from '~/components/pub/base/error/error.vue'
 definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'List Division',
+  title: 'List Unit',
   contentFrame: 'cf-full-width',
 })
 
@@ -34,7 +34,7 @@ const canRead = true
 <template>
   <div>
     <div v-if="canRead">
-      route unit list
+      <FlowUnitList />
     </div>
     <Error v-else :status-code="403" />
   </div>

From d9a675be05e61ffccd49a29870f94fca10676cc0 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 4 Sep 2025 16:19:51 +0700
Subject: [PATCH 23/35] refactor(composables): extract pagination logic into
 usePaginatedList composable

- Remove duplicate schema.query.ts files from unit, division, and installation components
- Create new usePaginatedList composable to centralize pagination logic
- Update list.vue components to use the new composable
- Maintain same functionality while reducing code duplication
---
 app/components/flow/division/list.vue         | 151 ++++------------
 app/components/flow/division/schema.query.ts  |  15 --
 app/components/flow/installation/list.vue     | 142 ++++-----------
 .../flow/installation/schema.query.ts         |  15 --
 app/components/flow/unit/list.vue             | 142 ++++-----------
 app/components/flow/unit/schema.query.ts      |  15 --
 app/composables/usePaginatedList.ts           | 164 ++++++++++++++++++
 7 files changed, 254 insertions(+), 390 deletions(-)
 delete mode 100644 app/components/flow/division/schema.query.ts
 delete mode 100644 app/components/flow/installation/schema.query.ts
 delete mode 100644 app/components/flow/unit/schema.query.ts
 create mode 100644 app/composables/usePaginatedList.ts

diff --git a/app/components/flow/division/list.vue b/app/components/flow/division/list.vue
index 6f0f3a7b..f4bf78e6 100644
--- a/app/components/flow/division/list.vue
+++ b/app/components/flow/division/list.vue
@@ -1,55 +1,51 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
-import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
-import { refDebounced, useUrlSearchParams } from '@vueuse/core'
 import AppDivisonEntryForm from '~/components/app/divison/entry-form.vue'
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 import { ActionEvents } from '~/components/pub/custom-ui/data/types'
 import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
 import { division as divisionConf, schema as schemaConf } from './entry'
-import { defaultQuery, querySchema } from './schema.query'
 
 // #region State & Computed
-const data = ref([])
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-
 // Dialog state
 const isFormEntryDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 
-// URL state management
-const queryParams = useUrlSearchParams('history', {
-  initialValue: defaultQuery,
-  removeFalsyValues: true,
-})
-
-const params = computed(() => {
-  const result = querySchema.safeParse(queryParams)
-  return result.data || defaultQuery
-})
-
-// Pagination state - computed from URL params
-const paginationMeta = reactive<PaginationMeta>({
-  recordCount: 0,
-  page: params.value.page,
-  pageSize: params.value.pageSize,
-  totalPage: 0,
-  hasNext: false,
-  hasPrev: false,
-})
-
 // Table action rowId provider
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-// Search model with debounce
-const searchInput = ref(params.value.q || '')
-const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+// Fungsi untuk fetch data division
+async function fetchDivisionData(params: any) {
+  // Prepare query parameters for pagination and search
+  const urlParams = new URLSearchParams({
+    'page-number': params.page.toString(),
+    'page-size': params.pageSize.toString(),
+  })
+
+  if (params.q) {
+    urlParams.append('search', params.q)
+  }
+
+  return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDivisionList,
+} = usePaginatedList({
+  fetchFn: fetchDivisionData,
+  entityName: 'division',
+})
 
 const headerPrep: HeaderPrep = {
   title: 'Divisi',
@@ -84,63 +80,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 // #endregion
 
-// #region Lifecycle Hooks
-onMounted(() => {
-  getDivisionList()
-})
-// #endregion
-
 // #region Functions
-async function getDivisionList() {
-  isLoading.isTableLoading = true
-
-  try {
-    // Use current params from URL state
-    const currentParams = params.value
-
-    // Prepare query parameters for pagination and search
-    const urlParams = new URLSearchParams({
-      'page-number': currentParams.page.toString(),
-      'page-size': currentParams.pageSize.toString(),
-    })
-
-    if (currentParams.q) {
-      urlParams.append('search', currentParams.q)
-    }
-
-    const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
-
-    if (resp.success) {
-      const responseBody = resp.body as Record<string, any>
-      data.value = responseBody.data || []
-
-      const pager = responseBody.meta
-      // Update pagination meta from response
-      // Fallback if meta is not provided by API
-      paginationMeta.recordCount = pager.record_totalCount
-      paginationMeta.page = currentParams.page
-      paginationMeta.pageSize = currentParams.pageSize
-      paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
-      paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
-      paginationMeta.hasPrev = paginationMeta.page > 1
-    }
-  } catch (error) {
-    console.error('Error fetching division list:', error)
-    data.value = []
-    paginationMeta.recordCount = 0
-    paginationMeta.totalPage = 0
-    paginationMeta.hasNext = false
-    paginationMeta.hasPrev = false
-  } finally {
-    isLoading.isTableLoading = false
-  }
-}
-
-// Handle pagination page change
-function handlePageChange(page: number) {
-  // Update URL params - this will trigger watcher
-  queryParams.page = page
-}
 
 async function handleDeleteRow(record: any) {
   try {
@@ -216,30 +156,6 @@ async function onSubmitForm(values: any, resetForm: () => void) {
 // #endregion
 
 // #region Watchers
-// Watch for URL param changes and trigger refetch
-watch(params, (newParams) => {
-  // Sync search input with URL params (for back/forward navigation)
-  if (newParams.q !== searchInput.value) {
-    searchInput.value = newParams.q || ''
-  }
-  getDivisionList()
-}, { deep: true })
-
-// Handle search from header component
-function handleSearch(searchValue: string) {
-  // Update URL params - this will trigger watcher and refetch data
-  queryParams.q = searchValue
-  queryParams.page = 1 // Reset to first page when searching
-}
-
-// Watch debounced search and update URL params (keeping for backward compatibility)
-watch(debouncedSearch, (newValue) => {
-  // Only search if 3+ characters or empty (to clear search)
-  if (newValue.length === 0 || newValue.length >= 3) {
-    queryParams.q = newValue
-    queryParams.page = 1 // Reset to first page when searching
-  }
-})
 
 // Watch for row actions
 watch(recId, () => {
@@ -277,12 +193,9 @@ function handleCancelConfirmation() {
 
     <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
       <AppDivisonEntryForm
-        :division="divisionConf"
-        :schema="schemaConf"
-        :initial-values="{ name: '', code: '', parentId: '' }"
-        @submit="onSubmitForm"
-        @cancel="onCancelForm"
-      />
+:division="divisionConf" :schema="schemaConf"
+        :initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
+/>
     </Dialog>
 
     <!-- Record Confirmation Modal -->
diff --git a/app/components/flow/division/schema.query.ts b/app/components/flow/division/schema.query.ts
deleted file mode 100644
index 9b1a4606..00000000
--- a/app/components/flow/division/schema.query.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as z from 'zod'
-
-export const querySchema = z.object({
-  q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
-  page: z.coerce.number().int().min(1).default(1).catch(1),
-  pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
-})
-
-export const defaultQuery = {
-  q: '',
-  page: 1,
-  pageSize: 10,
-}
-
-export type QueryParams = z.infer<typeof querySchema>
diff --git a/app/components/flow/installation/list.vue b/app/components/flow/installation/list.vue
index 7c98f28a..01a05baf 100644
--- a/app/components/flow/installation/list.vue
+++ b/app/components/flow/installation/list.vue
@@ -1,55 +1,51 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
-import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
-import { refDebounced, useUrlSearchParams } from '@vueuse/core'
 import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 import { ActionEvents } from '~/components/pub/custom-ui/data/types'
 import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
 import { installationConf, schemaConf } from './entry'
-import { defaultQuery, querySchema } from './schema.query'
 
 // #region State & Computed
-const data = ref([])
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-
 // Dialog state
 const isFormEntryDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 
-// URL state management
-const queryParams = useUrlSearchParams('history', {
-  initialValue: defaultQuery,
-  removeFalsyValues: true,
-})
-
-const params = computed(() => {
-  const result = querySchema.safeParse(queryParams)
-  return result.data || defaultQuery
-})
-
-// Pagination state - computed from URL params
-const paginationMeta = reactive<PaginationMeta>({
-  recordCount: 0,
-  page: params.value.page,
-  pageSize: params.value.pageSize,
-  totalPage: 0,
-  hasNext: false,
-  hasPrev: false,
-})
-
 // Table action rowId provider
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-// Search model with debounce
-const searchInput = ref(params.value.q || '')
-const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+// Fungsi untuk fetch data installation
+async function fetchInstallationData(params: any) {
+  // Prepare query parameters for pagination and search
+  const urlParams = new URLSearchParams({
+    'page-number': params.page.toString(),
+    'page-size': params.pageSize.toString(),
+  })
+
+  if (params.q) {
+    urlParams.append('search', params.q)
+  }
+
+  return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getInstallationList,
+} = usePaginatedList({
+  fetchFn: fetchInstallationData,
+  entityName: 'installation',
+})
 
 const headerPrep: HeaderPrep = {
   title: 'Instalasi',
@@ -84,63 +80,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 // #endregion
 
-// #region Lifecycle Hooks
-onMounted(() => {
-  getInstallationList()
-})
-// #endregion
-
 // #region Functions
-async function getInstallationList() {
-  isLoading.isTableLoading = true
-
-  try {
-    // Use current params from URL state
-    const currentParams = params.value
-
-    // Prepare query parameters for pagination and search
-    const urlParams = new URLSearchParams({
-      'page-number': currentParams.page.toString(),
-      'page-size': currentParams.pageSize.toString(),
-    })
-
-    if (currentParams.q) {
-      urlParams.append('search', currentParams.q)
-    }
-
-    const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
-
-    if (resp.success) {
-      const responseBody = resp.body as Record<string, any>
-      data.value = responseBody.data || []
-
-      const pager = responseBody.meta
-      // Update pagination meta from response
-      // Fallback if meta is not provided by API
-      paginationMeta.recordCount = pager.record_totalCount
-      paginationMeta.page = currentParams.page
-      paginationMeta.pageSize = currentParams.pageSize
-      paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
-      paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
-      paginationMeta.hasPrev = paginationMeta.page > 1
-    }
-  } catch (error) {
-    console.error('Error fetching Installation list:', error)
-    data.value = []
-    paginationMeta.recordCount = 0
-    paginationMeta.totalPage = 0
-    paginationMeta.hasNext = false
-    paginationMeta.hasPrev = false
-  } finally {
-    isLoading.isTableLoading = false
-  }
-}
-
-// Handle pagination page change
-function handlePageChange(page: number) {
-  // Update URL params - this will trigger watcher
-  queryParams.page = page
-}
 
 async function handleDeleteRow(record: any) {
   try {
@@ -216,30 +156,6 @@ async function onSubmitForm(values: any, resetForm: () => void) {
 // #endregion
 
 // #region Watchers
-// Watch for URL param changes and trigger refetch
-watch(params, (newParams) => {
-  // Sync search input with URL params (for back/forward navigation)
-  if (newParams.q !== searchInput.value) {
-    searchInput.value = newParams.q || ''
-  }
-  getInstallationList()
-}, { deep: true })
-
-// Handle search from header component
-function handleSearch(searchValue: string) {
-  // Update URL params - this will trigger watcher and refetch data
-  queryParams.q = searchValue
-  queryParams.page = 1 // Reset to first page when searching
-}
-
-// Watch debounced search and update URL params (keeping for backward compatibility)
-watch(debouncedSearch, (newValue: any) => {
-  // Only search if 3+ characters or empty (to clear search)
-  if (newValue.length === 0 || newValue.length >= 3) {
-    queryParams.q = newValue
-    queryParams.page = 1 // Reset to first page when searching
-  }
-})
 
 // Watch for row actions
 watch(recId, () => {
diff --git a/app/components/flow/installation/schema.query.ts b/app/components/flow/installation/schema.query.ts
deleted file mode 100644
index 9b1a4606..00000000
--- a/app/components/flow/installation/schema.query.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as z from 'zod'
-
-export const querySchema = z.object({
-  q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
-  page: z.coerce.number().int().min(1).default(1).catch(1),
-  pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
-})
-
-export const defaultQuery = {
-  q: '',
-  page: 1,
-  pageSize: 10,
-}
-
-export type QueryParams = z.infer<typeof querySchema>
diff --git a/app/components/flow/unit/list.vue b/app/components/flow/unit/list.vue
index e8c09bb0..404da13e 100644
--- a/app/components/flow/unit/list.vue
+++ b/app/components/flow/unit/list.vue
@@ -1,55 +1,51 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
-import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
-import { refDebounced, useUrlSearchParams } from '@vueuse/core'
 import AppUnitEntryForm from '~/components/app/unit/entry-form.vue'
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 import { ActionEvents } from '~/components/pub/custom-ui/data/types'
 import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
 import { schemaConf, unitConf } from './entry'
-import { defaultQuery, querySchema } from './schema.query'
 
 // #region State & Computed
-const data = ref([])
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-
 // Dialog state
 const isFormEntryDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 
-// URL state management
-const queryParams = useUrlSearchParams('history', {
-  initialValue: defaultQuery,
-  removeFalsyValues: true,
-})
-
-const params = computed(() => {
-  const result = querySchema.safeParse(queryParams)
-  return result.data || defaultQuery
-})
-
-// Pagination state - computed from URL params
-const paginationMeta = reactive<PaginationMeta>({
-  recordCount: 0,
-  page: params.value.page,
-  pageSize: params.value.pageSize,
-  totalPage: 0,
-  hasNext: false,
-  hasPrev: false,
-})
-
 // Table action rowId provider
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-// Search model with debounce
-const searchInput = ref(params.value.q || '')
-const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+// Fungsi untuk fetch data unit
+async function fetchUnitData(params: any) {
+  // Prepare query parameters for pagination and search
+  const urlParams = new URLSearchParams({
+    'page-number': params.page.toString(),
+    'page-size': params.pageSize.toString(),
+  })
+
+  if (params.q) {
+    urlParams.append('search', params.q)
+  }
+
+  return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getUnitList,
+} = usePaginatedList({
+  fetchFn: fetchUnitData,
+  entityName: 'unit',
+})
 
 const headerPrep: HeaderPrep = {
   title: 'Unit',
@@ -84,63 +80,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 // #endregion
 
-// #region Lifecycle Hooks
-onMounted(() => {
-  getUnitList()
-})
-// #endregion
-
 // #region Functions
-async function getUnitList() {
-  isLoading.isTableLoading = true
-
-  try {
-    // Use current params from URL state
-    const currentParams = params.value
-
-    // Prepare query parameters for pagination and search
-    const urlParams = new URLSearchParams({
-      'page-number': currentParams.page.toString(),
-      'page-size': currentParams.pageSize.toString(),
-    })
-
-    if (currentParams.q) {
-      urlParams.append('search', currentParams.q)
-    }
-
-    const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
-
-    if (resp.success) {
-      const responseBody = resp.body as Record<string, any>
-      data.value = responseBody.data || []
-
-      const pager = responseBody.meta
-      // Update pagination meta from response
-      // Fallback if meta is not provided by API
-      paginationMeta.recordCount = pager.record_totalCount
-      paginationMeta.page = currentParams.page
-      paginationMeta.pageSize = currentParams.pageSize
-      paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
-      paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
-      paginationMeta.hasPrev = paginationMeta.page > 1
-    }
-  } catch (error) {
-    console.error('Error fetching Unit list:', error)
-    data.value = []
-    paginationMeta.recordCount = 0
-    paginationMeta.totalPage = 0
-    paginationMeta.hasNext = false
-    paginationMeta.hasPrev = false
-  } finally {
-    isLoading.isTableLoading = false
-  }
-}
-
-// Handle pagination page change
-function handlePageChange(page: number) {
-  // Update URL params - this will trigger watcher
-  queryParams.page = page
-}
 
 async function handleDeleteRow(record: any) {
   try {
@@ -216,30 +156,6 @@ async function onSubmitForm(values: any, resetForm: () => void) {
 // #endregion
 
 // #region Watchers
-// Watch for URL param changes and trigger refetch
-watch(params, (newParams) => {
-  // Sync search input with URL params (for back/forward navigation)
-  if (newParams.q !== searchInput.value) {
-    searchInput.value = newParams.q || ''
-  }
-  getUnitList()
-}, { deep: true })
-
-// Handle search from header component
-function handleSearch(searchValue: string) {
-  // Update URL params - this will trigger watcher and refetch data
-  queryParams.q = searchValue
-  queryParams.page = 1 // Reset to first page when searching
-}
-
-// Watch debounced search and update URL params (keeping for backward compatibility)
-watch(debouncedSearch, (newValue: any) => {
-  // Only search if 3+ characters or empty (to clear search)
-  if (newValue.length === 0 || newValue.length >= 3) {
-    queryParams.q = newValue
-    queryParams.page = 1 // Reset to first page when searching
-  }
-})
 
 // Watch for row actions
 watch(recId, () => {
diff --git a/app/components/flow/unit/schema.query.ts b/app/components/flow/unit/schema.query.ts
deleted file mode 100644
index 9b1a4606..00000000
--- a/app/components/flow/unit/schema.query.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as z from 'zod'
-
-export const querySchema = z.object({
-  q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
-  page: z.coerce.number().int().min(1).default(1).catch(1),
-  pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
-})
-
-export const defaultQuery = {
-  q: '',
-  page: 1,
-  pageSize: 10,
-}
-
-export type QueryParams = z.infer<typeof querySchema>
diff --git a/app/composables/usePaginatedList.ts b/app/composables/usePaginatedList.ts
new file mode 100644
index 00000000..10f6863a
--- /dev/null
+++ b/app/composables/usePaginatedList.ts
@@ -0,0 +1,164 @@
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { refDebounced, useUrlSearchParams } from '@vueuse/core'
+import * as z from 'zod'
+
+// Default query schema yang bisa digunakan semua list
+export const defaultQuerySchema = z.object({
+  q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
+  page: z.coerce.number().int().min(1).default(1).catch(1),
+  pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
+})
+
+export const defaultQueryParams = {
+  q: '',
+  page: 1,
+  pageSize: 10,
+}
+
+export type DefaultQueryParams = z.infer<typeof defaultQuerySchema>
+
+interface UsePaginatedListOptions<T = any> {
+  // Schema untuk validasi query parameters
+  querySchema?: z.ZodSchema<any>
+  defaultQuery?: Record<string, any>
+  // Fungsi untuk fetch data
+  fetchFn: (params: any) => Promise<{
+    success: boolean
+    body: {
+      data: T[]
+      meta: {
+        record_totalCount: number
+      }
+    }
+  }>
+  // Nama endpoint untuk logging error
+  entityName: string
+}
+
+export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
+  const {
+    querySchema = defaultQuerySchema,
+    defaultQuery = defaultQueryParams,
+    fetchFn,
+    entityName,
+  } = options
+
+  // State management
+  const data = ref<T[]>([])
+  const isLoading = reactive<DataTableLoader>({
+    isTableLoading: false,
+  })
+
+  // URL state management
+  const queryParams = useUrlSearchParams('history', {
+    initialValue: defaultQuery,
+    removeFalsyValues: true,
+  })
+
+  const params = computed(() => {
+    const result = querySchema.safeParse(queryParams)
+    return result.data || defaultQuery
+  })
+
+  // Pagination state - computed from URL params
+  const paginationMeta = reactive<PaginationMeta>({
+    recordCount: 0,
+    page: params.value.page,
+    pageSize: params.value.pageSize,
+    totalPage: 0,
+    hasNext: false,
+    hasPrev: false,
+  })
+
+  // Search model with debounce
+  const searchInput = ref(params.value.q || '')
+  const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+
+  // Functions
+  async function fetchData() {
+    isLoading.isTableLoading = true
+
+    try {
+      // Use current params from URL state
+      const currentParams = params.value
+
+      const response = await fetchFn(currentParams)
+
+      if (response.success) {
+        const responseBody = response.body
+        data.value = responseBody.data || []
+
+        const pager = responseBody.meta
+        // Update pagination meta from response
+        paginationMeta.recordCount = pager.record_totalCount
+        paginationMeta.page = currentParams.page
+        paginationMeta.pageSize = currentParams.pageSize
+        paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
+        paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+        paginationMeta.hasPrev = paginationMeta.page > 1
+      }
+    } catch (error) {
+      console.error(`Error fetching ${entityName} list:`, error)
+      data.value = []
+      paginationMeta.recordCount = 0
+      paginationMeta.totalPage = 0
+      paginationMeta.hasNext = false
+      paginationMeta.hasPrev = false
+    } finally {
+      isLoading.isTableLoading = false
+    }
+  }
+
+  // Handle pagination page change
+  function handlePageChange(page: number) {
+    // Update URL params - this will trigger watcher
+    queryParams.page = page
+  }
+
+  // Handle search from header component
+  function handleSearch(searchValue: string) {
+    // Update URL params - this will trigger watcher and refetch data
+    queryParams.q = searchValue
+    queryParams.page = 1 // Reset to first page when searching
+  }
+
+  // Watchers
+  // Watch for URL param changes and trigger refetch
+  watch(params, (newParams) => {
+    // Sync search input with URL params (for back/forward navigation)
+    if (newParams.q !== searchInput.value) {
+      searchInput.value = newParams.q || ''
+    }
+    fetchData()
+  }, { deep: true })
+
+  // Watch debounced search and update URL params (keeping for backward compatibility)
+  watch(debouncedSearch, (newValue) => {
+    // Only search if 3+ characters or empty (to clear search)
+    if (newValue.length === 0 || newValue.length >= 3) {
+      queryParams.q = newValue
+      queryParams.page = 1 // Reset to first page when searching
+    }
+  })
+
+  // Initialize data on mount
+  onMounted(() => {
+    fetchData()
+  })
+
+  return {
+    // State
+    data,
+    isLoading,
+    paginationMeta,
+    searchInput,
+    params,
+    queryParams,
+
+    // Functions
+    fetchData,
+    handlePageChange,
+    handleSearch,
+  }
+}

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 24/35] =?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 25/35] =?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 26/35] =?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 27/35] =?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 28/35] =?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 29/35] =?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 30/35] =?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 31/35] =?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 32/35] =?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>

From cdebdb8995525fd91a8e564ccc9692ae866a5314 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 22:50:15 +0700
Subject: [PATCH 33/35] =?UTF-8?q?=E2=9C=A8=20feat=20(item):=20add=20item?=
 =?UTF-8?q?=20and=20item=20price=20modules?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/app/item-price/entry-form.vue  | 50 +++++++++++++
 app/components/app/item-price/list-cfg.ts     | 46 ++++++++++++
 app/components/app/item-price/list.vue        | 19 +++++
 app/components/app/item-price/picker.vue      |  0
 app/components/app/item-price/search.vue      |  0
 .../app/item-price/status-badge.vue           | 29 ++++++++
 app/components/app/item/entry-form.vue        | 68 ++++++++++++++++++
 app/components/app/item/list-cfg.ts           | 46 ++++++++++++
 app/components/app/item/list.vue              | 19 +++++
 app/components/app/item/picker.vue            |  0
 app/components/app/item/search.vue            |  0
 app/components/app/item/status-badge.vue      | 29 ++++++++
 app/components/flow/item-price/list.vue       | 71 +++++++++++++++++++
 app/components/flow/item/list.vue             | 71 +++++++++++++++++++
 app/components/flow/medicine-group/list.vue   |  5 ++
 app/models/item-price.ts                      | 39 ++++++++++
 app/models/item.ts                            | 48 +++++++++++++
 app/pages/_dev/index.vue                      |  2 +-
 18 files changed, 541 insertions(+), 1 deletion(-)
 create mode 100644 app/components/app/item-price/entry-form.vue
 create mode 100644 app/components/app/item-price/list-cfg.ts
 create mode 100644 app/components/app/item-price/list.vue
 create mode 100644 app/components/app/item-price/picker.vue
 create mode 100644 app/components/app/item-price/search.vue
 create mode 100644 app/components/app/item-price/status-badge.vue
 create mode 100644 app/components/app/item/entry-form.vue
 create mode 100644 app/components/app/item/list-cfg.ts
 create mode 100644 app/components/app/item/list.vue
 create mode 100644 app/components/app/item/picker.vue
 create mode 100644 app/components/app/item/search.vue
 create mode 100644 app/components/app/item/status-badge.vue
 create mode 100644 app/components/flow/item-price/list.vue
 create mode 100644 app/components/flow/item/list.vue
 create mode 100644 app/models/item-price.ts
 create mode 100644 app/models/item.ts

diff --git a/app/components/app/item-price/entry-form.vue b/app/components/app/item-price/entry-form.vue
new file mode 100644
index 00000000..e0c97dc8
--- /dev/null
+++ b/app/components/app/item-price/entry-form.vue
@@ -0,0 +1,50 @@
+<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>
+            <Label>Items</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Perusahaan Insuransi</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Harga</Label>
+            <Field>
+              <Input v-model="data.price" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/item-price/list-cfg.ts b/app/components/app/item-price/list-cfg.ts
new file mode 100644
index 00000000..e2c72f9c
--- /dev/null
+++ b/app/components/app/item-price/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/item-price/list.vue b/app/components/app/item-price/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/item-price/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/item-price/picker.vue b/app/components/app/item-price/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item-price/search.vue b/app/components/app/item-price/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item-price/status-badge.vue b/app/components/app/item-price/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/item-price/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/item/entry-form.vue b/app/components/app/item/entry-form.vue
new file mode 100644
index 00000000..8f6d3abf
--- /dev/null
+++ b/app/components/app/item/entry-form.vue
@@ -0,0 +1,68 @@
+<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>
+            <Label>Nama</Label>
+            <Field>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Kode</Label>
+            <Field>
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Item Group</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>UOM</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Infra</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Harga</Label>
+            <Field>
+              <Input v-model="data.price" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/item/list-cfg.ts b/app/components/app/item/list-cfg.ts
new file mode 100644
index 00000000..e2c72f9c
--- /dev/null
+++ b/app/components/app/item/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/item/list.vue b/app/components/app/item/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/item/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/item/picker.vue b/app/components/app/item/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item/search.vue b/app/components/app/item/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item/status-badge.vue b/app/components/app/item/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/item/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/item-price/list.vue b/app/components/flow/item-price/list.vue
new file mode 100644
index 00000000..9a5f567b
--- /dev/null
+++ b/app/components/flow/item-price/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/item/list.vue b/app/components/flow/item/list.vue
new file mode 100644
index 00000000..41c7311f
--- /dev/null
+++ b/app/components/flow/item/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: 'Item',
+  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">
+    <AppItemList :data="data" />
+  </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="xl" prevent-outside>
+    <AppItemEntryForm v-model="entry" />
+  </Modal>
+</template>
diff --git a/app/components/flow/medicine-group/list.vue b/app/components/flow/medicine-group/list.vue
index 9a5f567b..0885b57f 100644
--- a/app/components/flow/medicine-group/list.vue
+++ b/app/components/flow/medicine-group/list.vue
@@ -2,10 +2,14 @@
 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 Pagination from '~/components/pub/base/pagination/pagination.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
 const entry = ref<any>({})
+const page = ref(1)
+const rowsPerPage = ref(10)
+const totalPages = 20
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -63,6 +67,7 @@ provide('table_data_loader', isLoading)
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <AppMedicineGroupList :data="data" />
+    <Pagination v-model:page="page" v-model:rows-per-page="rowsPerPage" :total-pages="totalPages" />
   </div>
 
   <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
diff --git a/app/models/item-price.ts b/app/models/item-price.ts
new file mode 100644
index 00000000..fb474109
--- /dev/null
+++ b/app/models/item-price.ts
@@ -0,0 +1,39 @@
+export interface ItemPrice {
+  id: string
+  item_id: number
+  price: number
+  insuranceCompany_code: string
+}
+
+export interface CreateDto {
+  item_id: number
+  price: number
+  insuranceCompany_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 {
+    item_id: 1,
+    price: 1,
+    insuranceCompany_code: 'test',
+  }
+}
diff --git a/app/models/item.ts b/app/models/item.ts
new file mode 100644
index 00000000..851ff11d
--- /dev/null
+++ b/app/models/item.ts
@@ -0,0 +1,48 @@
+export interface Item {
+  id: string
+  name: string
+  code: string
+  itemGroup_code: string
+  uom_code: string
+  infra_id: number
+  stock: number
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+  itemGroup_code: string
+  uom_code: string
+  infra_id: number
+  stock: number
+}
+
+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: 'test',
+    code: 'test',
+    itemGroup_code: 'test',
+    uom_code: 'test',
+    infra_id: 1,
+    stock: 1,
+  }
+}
diff --git a/app/pages/_dev/index.vue b/app/pages/_dev/index.vue
index 3f67f9f8..90928bc6 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-method/list.vue')),
+      component: defineAsyncComponent(() => import('~/components/flow/item/list.vue')),
     },
   ],
 })

From 263f9dbc7f47a9a03859fa3e6a4e0018c9a6b11b Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 22:58:18 +0700
Subject: [PATCH 34/35] =?UTF-8?q?=E2=9A=A0=EF=B8=8F=20refactor=20(componen?=
 =?UTF-8?q?ts):=20rename=20flow=20components=20to=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/{flow => content}/auth/login.vue                 | 0
 app/components/{flow => content}/dashboard/index.vue            | 0
 app/components/{flow => content}/item-price/list.vue            | 0
 app/components/{flow => content}/item/list.vue                  | 0
 app/components/{flow => content}/medicine-group/list.vue        | 1 -
 app/components/{flow => content}/medicine-method/list.vue       | 0
 app/components/{flow => content}/medicine/entry.vue             | 0
 app/components/{flow => content}/medicine/list.vue              | 0
 app/components/{flow => content}/patient/add.vue                | 0
 app/components/{flow => content}/patient/list.vue               | 0
 app/components/{flow => content}/rehab/registration/home.vue    | 0
 .../{flow => content}/rehab/registration/sep-prosedur/add.vue   | 0
 .../{flow => content}/rehab/registration/sep-prosedur/list.vue  | 0
 app/components/{flow => content}/satusehat/const.ts             | 0
 app/components/{flow => content}/satusehat/list.vue             | 0
 app/components/{flow => content}/satusehat/schema.query.ts      | 0
 app/components/{flow => content}/user/entry.vue                 | 0
 app/components/{flow => content}/user/list.vue                  | 0
 app/pages/(features)/doctor/add.vue                             | 2 +-
 app/pages/(features)/doctor/index.vue                           | 2 +-
 app/pages/(features)/human-src/user/add.vue                     | 2 +-
 app/pages/(features)/human-src/user/index.vue                   | 2 +-
 app/pages/(features)/patient/add.vue                            | 2 +-
 app/pages/(features)/patient/index.vue                          | 2 +-
 .../(features)/rehab/registration-queue/sep-prosedur/add.vue    | 2 +-
 app/pages/(features)/satusehat/add.vue                          | 2 +-
 app/pages/(features)/satusehat/index.vue                        | 2 +-
 .../(features)/tools-equipment-src/medicine-method/index.vue    | 2 +-
 .../(features)/tools-equipment-src/medicine-type/index.vue      | 2 +-
 app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue | 2 +-
 app/pages/(features)/tools-equipment-src/medicine/add.vue       | 2 +-
 app/pages/(features)/tools-equipment-src/medicine/index.vue     | 2 +-
 app/pages/_dev/index.vue                                        | 2 +-
 app/pages/auth/login.vue                                        | 2 +-
 app/pages/index.vue                                             | 2 +-
 35 files changed, 17 insertions(+), 18 deletions(-)
 rename app/components/{flow => content}/auth/login.vue (100%)
 rename app/components/{flow => content}/dashboard/index.vue (100%)
 rename app/components/{flow => content}/item-price/list.vue (100%)
 rename app/components/{flow => content}/item/list.vue (100%)
 rename app/components/{flow => content}/medicine-group/list.vue (96%)
 rename app/components/{flow => content}/medicine-method/list.vue (100%)
 rename app/components/{flow => content}/medicine/entry.vue (100%)
 rename app/components/{flow => content}/medicine/list.vue (100%)
 rename app/components/{flow => content}/patient/add.vue (100%)
 rename app/components/{flow => content}/patient/list.vue (100%)
 rename app/components/{flow => content}/rehab/registration/home.vue (100%)
 rename app/components/{flow => content}/rehab/registration/sep-prosedur/add.vue (100%)
 rename app/components/{flow => content}/rehab/registration/sep-prosedur/list.vue (100%)
 rename app/components/{flow => content}/satusehat/const.ts (100%)
 rename app/components/{flow => content}/satusehat/list.vue (100%)
 rename app/components/{flow => content}/satusehat/schema.query.ts (100%)
 rename app/components/{flow => content}/user/entry.vue (100%)
 rename app/components/{flow => content}/user/list.vue (100%)

diff --git a/app/components/flow/auth/login.vue b/app/components/content/auth/login.vue
similarity index 100%
rename from app/components/flow/auth/login.vue
rename to app/components/content/auth/login.vue
diff --git a/app/components/flow/dashboard/index.vue b/app/components/content/dashboard/index.vue
similarity index 100%
rename from app/components/flow/dashboard/index.vue
rename to app/components/content/dashboard/index.vue
diff --git a/app/components/flow/item-price/list.vue b/app/components/content/item-price/list.vue
similarity index 100%
rename from app/components/flow/item-price/list.vue
rename to app/components/content/item-price/list.vue
diff --git a/app/components/flow/item/list.vue b/app/components/content/item/list.vue
similarity index 100%
rename from app/components/flow/item/list.vue
rename to app/components/content/item/list.vue
diff --git a/app/components/flow/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
similarity index 96%
rename from app/components/flow/medicine-group/list.vue
rename to app/components/content/medicine-group/list.vue
index 0885b57f..93afabff 100644
--- a/app/components/flow/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -2,7 +2,6 @@
 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 Pagination from '~/components/pub/base/pagination/pagination.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
diff --git a/app/components/flow/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
similarity index 100%
rename from app/components/flow/medicine-method/list.vue
rename to app/components/content/medicine-method/list.vue
diff --git a/app/components/flow/medicine/entry.vue b/app/components/content/medicine/entry.vue
similarity index 100%
rename from app/components/flow/medicine/entry.vue
rename to app/components/content/medicine/entry.vue
diff --git a/app/components/flow/medicine/list.vue b/app/components/content/medicine/list.vue
similarity index 100%
rename from app/components/flow/medicine/list.vue
rename to app/components/content/medicine/list.vue
diff --git a/app/components/flow/patient/add.vue b/app/components/content/patient/add.vue
similarity index 100%
rename from app/components/flow/patient/add.vue
rename to app/components/content/patient/add.vue
diff --git a/app/components/flow/patient/list.vue b/app/components/content/patient/list.vue
similarity index 100%
rename from app/components/flow/patient/list.vue
rename to app/components/content/patient/list.vue
diff --git a/app/components/flow/rehab/registration/home.vue b/app/components/content/rehab/registration/home.vue
similarity index 100%
rename from app/components/flow/rehab/registration/home.vue
rename to app/components/content/rehab/registration/home.vue
diff --git a/app/components/flow/rehab/registration/sep-prosedur/add.vue b/app/components/content/rehab/registration/sep-prosedur/add.vue
similarity index 100%
rename from app/components/flow/rehab/registration/sep-prosedur/add.vue
rename to app/components/content/rehab/registration/sep-prosedur/add.vue
diff --git a/app/components/flow/rehab/registration/sep-prosedur/list.vue b/app/components/content/rehab/registration/sep-prosedur/list.vue
similarity index 100%
rename from app/components/flow/rehab/registration/sep-prosedur/list.vue
rename to app/components/content/rehab/registration/sep-prosedur/list.vue
diff --git a/app/components/flow/satusehat/const.ts b/app/components/content/satusehat/const.ts
similarity index 100%
rename from app/components/flow/satusehat/const.ts
rename to app/components/content/satusehat/const.ts
diff --git a/app/components/flow/satusehat/list.vue b/app/components/content/satusehat/list.vue
similarity index 100%
rename from app/components/flow/satusehat/list.vue
rename to app/components/content/satusehat/list.vue
diff --git a/app/components/flow/satusehat/schema.query.ts b/app/components/content/satusehat/schema.query.ts
similarity index 100%
rename from app/components/flow/satusehat/schema.query.ts
rename to app/components/content/satusehat/schema.query.ts
diff --git a/app/components/flow/user/entry.vue b/app/components/content/user/entry.vue
similarity index 100%
rename from app/components/flow/user/entry.vue
rename to app/components/content/user/entry.vue
diff --git a/app/components/flow/user/list.vue b/app/components/content/user/list.vue
similarity index 100%
rename from app/components/flow/user/list.vue
rename to app/components/content/user/list.vue
diff --git a/app/pages/(features)/doctor/add.vue b/app/pages/(features)/doctor/add.vue
index 987baa28..c0a43c7f 100644
--- a/app/pages/(features)/doctor/add.vue
+++ b/app/pages/(features)/doctor/add.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowDoctorAdd />
+    <ContentDoctorAdd />
   </div>
   <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/doctor/index.vue b/app/pages/(features)/doctor/index.vue
index e75a5b89..f0c8ddba 100644
--- a/app/pages/(features)/doctor/index.vue
+++ b/app/pages/(features)/doctor/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowDoctorList />
+      <ContentDoctorList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/human-src/user/add.vue b/app/pages/(features)/human-src/user/add.vue
index 39ba8791..8478c9b2 100644
--- a/app/pages/(features)/human-src/user/add.vue
+++ b/app/pages/(features)/human-src/user/add.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowUserEntry />
+    <ContentUserEntry />
   </div>
   <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/human-src/user/index.vue b/app/pages/(features)/human-src/user/index.vue
index 2c0f921f..e8e3647e 100644
--- a/app/pages/(features)/human-src/user/index.vue
+++ b/app/pages/(features)/human-src/user/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowUserList />
+      <ContentUserList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/patient/add.vue b/app/pages/(features)/patient/add.vue
index 813e418b..6532240a 100644
--- a/app/pages/(features)/patient/add.vue
+++ b/app/pages/(features)/patient/add.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowPatientAdd />
+    <ContentPatientAdd />
   </div>
   <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/patient/index.vue b/app/pages/(features)/patient/index.vue
index 71d07e43..8f274db1 100644
--- a/app/pages/(features)/patient/index.vue
+++ b/app/pages/(features)/patient/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowPatientList />
+      <ContentPatientList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue b/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue
index 368b4f40..e4381443 100644
--- a/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue
+++ b/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue
@@ -34,7 +34,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowDoctorAdd />
+    <ContentDoctorAdd />
   </div>
   <PubBaseError v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/satusehat/add.vue b/app/pages/(features)/satusehat/add.vue
index d1fee557..1de89d94 100644
--- a/app/pages/(features)/satusehat/add.vue
+++ b/app/pages/(features)/satusehat/add.vue
@@ -34,7 +34,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowPatientAdd />
+    <ContentPatientAdd />
   </div>
   <PubBaseError v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/satusehat/index.vue b/app/pages/(features)/satusehat/index.vue
index 2c7bb9f5..69126581 100644
--- a/app/pages/(features)/satusehat/index.vue
+++ b/app/pages/(features)/satusehat/index.vue
@@ -32,7 +32,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowSatusehatList />
+      <ContentSatusehatList />
     </div>
     <PubBaseError v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/tools-equipment-src/medicine-method/index.vue b/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
index 1b080470..29383fb4 100644
--- a/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowMedicineMethodList />
+      <ContentMedicineMethodList />
     </div>
     <Error v-else :status-code="403" />
   </div>
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 cbeccd42..cc8d6afe 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">
-      <FlowMedicineGroupList />
+      <ContentMedicineGroupList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue b/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
index 9c1697fc..adf77a76 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowMedicineEntry />
+    <ContentMedicineEntry />
   </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
index 9c1697fc..adf77a76 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/add.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine/add.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowMedicineEntry />
+    <ContentMedicineEntry />
   </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
index 877b5c78..3c8b58da 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/index.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowMedicineList />
+      <ContentMedicineList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/_dev/index.vue b/app/pages/_dev/index.vue
index 90928bc6..b36abf7e 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/item/list.vue')),
+      component: defineAsyncComponent(() => import('~/components/content/item/list.vue')),
     },
   ],
 })
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index b2e8f89a..9727a6be 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -11,7 +11,7 @@ definePageMeta({
       <div class="grid gap-2 text-center">
         <h1 class="text-2xl font-semibold tracking-tight">Login RSSA</h1>
       </div>
-      <FlowAuthLogin />
+      <ContentAuthLogin />
     </div>
   </LayoutAuth>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 5d6072e5..45476961 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -13,5 +13,5 @@ useHead({
 </script>
 
 <template>
-  <FlowDashboard />
+  <ContentDashboard />
 </template>

From ea2076d0976228166d6c6476ff0e09497f2cc8ff Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 22:59:57 +0700
Subject: [PATCH 35/35] =?UTF-8?q?=F0=9F=93=96=20docs=20(readme):=20update?=
 =?UTF-8?q?=20component=20directory=20structure=20and=20descriptions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 694ddf34..40601187 100644
--- a/README.md
+++ b/README.md
@@ -20,16 +20,20 @@ RSSA - Front End
 
 - `app.vue`: Main layout
 - `components` : Contains all reusable UI components.
-- `components/flow` : Entry point for business logic and workflows. Pages or routes call these flow components to handle API requests and process application logic
-- `components/app` : View-layer components that manage and present data. These are used within `flow/` to render or handle specific parts of the UI, and return results back to the flow
+- `components/content` : Entry point for business logic and workflows. Pages or routes call these content components to handle API requests and process application logic
+- `components/app` : View-layer components that manage and present data. These are used within `content/` to render or handle specific parts of the UI, and return results back to the content
 - `components/pub` : Public/shared components used across different parts of the app.
 - `composables` : Contains reusable logic and utility functions (e.g. composables, hooks)..
 - `layouts` : Reusable UI layout patterns used across pages.
+- `models` : Contains data definitions or interfaces.
+- `schemas` : Contains JSON schemas used for validation.
+- `services` : Contains reusable API calls and business logic.
+
 
 ## Directory Structure for `app/pages`
 
 - `pages/auth` : Authentication related pages.
-- `pages/(features)` : Grouped feature modules that reflect specific business flow or domains.
+- `pages/(features)` : Grouped feature modules that reflect specific business content or domains.
 
 ## Directory Structure for `server/`
 
@@ -50,16 +54,16 @@ The basic development workflow follows these steps:
 - Keep components pure, avoid making HTTP requests directly within them.
 - They receive data via props and emit events upward.
 
-### Business Logic in `components/flow`
+### Business Logic in `components/content`
 
 - This layer connects the UI with the logic (API calls, validations, navigation).
-- It composes components from `components/app/`, `components/pub/`, and other flow.
+- It composes components from `components/app/`, `components/pub/`, and other content.
 - Also responsible for managing state, side effects, and interactions.
 
 ### Create Pages in `pages/`
 
 - Define permissions and guards for each page.
-- Pages load the appropriate flow from `components/flow/`.
+- Pages load the appropriate content from `components/content/`.
 - They do not contain UI or logic directly, just route level layout or guards.
 
 ## Code Conventions