From 61b71f7e764aaeb74115a89e6b432b1914a9640d Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Mon, 25 Aug 2025 09:59:44 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A0=EF=B8=8F=20refactor=20(components):?=
 =?UTF-8?q?=20restructure=20components=20to=20custom-ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/app/doctor/entry-form.vue      | 11 +++--
 app/components/app/doctor/list-cfg.ts         | 11 ++++-
 app/components/app/patient/entry-form.vue     | 11 +++--
 app/components/app/patient/list-cfg.ts        | 11 ++++-
 app/components/flow/doctor/list.vue           |  3 +-
 app/components/flow/patient/list.vue          |  8 ++--
 .../pub/base/{ => data-table}/data-table.vue  |  0
 app/components/pub/base/{ => error}/error.vue |  0
 .../{ => summary-card}/summary-card.type.ts   |  0
 .../base/{ => summary-card}/summary-card.vue  |  0
 .../custom-ui/confirmation/confirmation.vue   |  0
 .../confirmation/record-confirmation.vue      |  0
 .../data}/dropdown-action-du.vue              |  0
 .../data}/dropdown-action-ducd.vue            |  0
 .../data}/dropdown-action-dud.vue             |  0
 .../data}/dropdown-action-ud.vue              |  0
 .../pub/{nav => custom-ui/data}/types.ts      |  0
 .../pub/{ => custom-ui}/form/block.vue        |  0
 .../pub/{ => custom-ui}/form/field-group.vue  |  0
 .../pub/{ => custom-ui}/form/field.vue        |  0
 .../pub/{ => custom-ui}/form/label.vue        |  0
 .../pub/custom-ui/nav-footer/ba-dr-su-pr.vue  | 32 +++++++++++++
 .../nav-footer/ba-dr-su.vue}                  |  6 +--
 .../pub/custom-ui/nav-footer/ba-ed-de-pri.vue | 32 +++++++++++++
 .../pub/custom-ui/nav-footer/ba-ed-de.vue     | 28 +++++++++++
 .../pub/custom-ui/nav-footer/ba-ed-pri.vue    | 28 +++++++++++
 .../pub/custom-ui/nav-footer/ba-ed.vue        | 24 ++++++++++
 .../cs.vue => custom-ui/nav-footer/ba-su.vue} |  4 +-
 .../pub/custom-ui/nav-header/header.vue       | 19 ++++++++
 .../header => custom-ui/nav-header}/prep.vue  |  0
 .../pub/custom-ui/nav-header/search.vue       | 42 +++++++++++++++++
 app/components/pub/nav/data-table.vue         | 46 -------------------
 app/pages/(features)/doctor/add.vue           |  3 +-
 app/pages/(features)/doctor/index.vue         |  3 +-
 app/pages/(features)/patient/add.vue          |  3 +-
 app/pages/(features)/patient/index.vue        |  3 +-
 36 files changed, 255 insertions(+), 73 deletions(-)
 rename app/components/pub/base/{ => data-table}/data-table.vue (100%)
 rename app/components/pub/base/{ => error}/error.vue (100%)
 rename app/components/pub/base/{ => summary-card}/summary-card.type.ts (100%)
 rename app/components/pub/base/{ => summary-card}/summary-card.vue (100%)
 create mode 100644 app/components/pub/custom-ui/confirmation/confirmation.vue
 create mode 100644 app/components/pub/custom-ui/confirmation/record-confirmation.vue
 rename app/components/pub/{nav => custom-ui/data}/dropdown-action-du.vue (100%)
 rename app/components/pub/{nav => custom-ui/data}/dropdown-action-ducd.vue (100%)
 rename app/components/pub/{nav => custom-ui/data}/dropdown-action-dud.vue (100%)
 rename app/components/pub/{nav => custom-ui/data}/dropdown-action-ud.vue (100%)
 rename app/components/pub/{nav => custom-ui/data}/types.ts (100%)
 rename app/components/pub/{ => custom-ui}/form/block.vue (100%)
 rename app/components/pub/{ => custom-ui}/form/field-group.vue (100%)
 rename app/components/pub/{ => custom-ui}/form/field.vue (100%)
 rename app/components/pub/{ => custom-ui}/form/label.vue (100%)
 create mode 100644 app/components/pub/custom-ui/nav-footer/ba-dr-su-pr.vue
 rename app/components/pub/{nav/footer/csd.vue => custom-ui/nav-footer/ba-dr-su.vue} (95%)
 create mode 100644 app/components/pub/custom-ui/nav-footer/ba-ed-de-pri.vue
 create mode 100644 app/components/pub/custom-ui/nav-footer/ba-ed-de.vue
 create mode 100644 app/components/pub/custom-ui/nav-footer/ba-ed-pri.vue
 create mode 100644 app/components/pub/custom-ui/nav-footer/ba-ed.vue
 rename app/components/pub/{nav/footer/cs.vue => custom-ui/nav-footer/ba-su.vue} (95%)
 create mode 100644 app/components/pub/custom-ui/nav-header/header.vue
 rename app/components/pub/{nav/header => custom-ui/nav-header}/prep.vue (100%)
 create mode 100644 app/components/pub/custom-ui/nav-header/search.vue
 delete mode 100644 app/components/pub/nav/data-table.vue

diff --git a/app/components/app/doctor/entry-form.vue b/app/components/app/doctor/entry-form.vue
index bb638f94..2c7ecac2 100644
--- a/app/components/app/doctor/entry-form.vue
+++ b/app/components/app/doctor/entry-form.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import Block from '~/components/pub/form/block.vue'
-import FieldGroup from '~/components/pub/form/field-group.vue'
-import Field from '~/components/pub/form/field.vue'
-import Label from '~/components/pub/form/label.vue'
+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 Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
 
 const props = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue', 'event'])
@@ -110,7 +111,7 @@ function onClick(type: string) {
       </div>
     </div>
     <div class="my-2 flex justify-end py-2">
-      <PubNavFooterCsd @click="onClick" />
+      <Action @click="onClick" />
     </div>
   </form>
 </template>
diff --git a/app/components/app/doctor/list-cfg.ts b/app/components/app/doctor/list-cfg.ts
index 9d47c6d0..f697dc88 100644
--- a/app/components/app/doctor/list-cfg.ts
+++ b/app/components/app/doctor/list-cfg.ts
@@ -1,9 +1,16 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+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/nav/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
 const doctorStatus = {
   0: 'Tidak Aktif',
diff --git a/app/components/app/patient/entry-form.vue b/app/components/app/patient/entry-form.vue
index 5768c6a0..a9ab8c6b 100644
--- a/app/components/app/patient/entry-form.vue
+++ b/app/components/app/patient/entry-form.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import Block from '~/components/pub/form/block.vue'
-import FieldGroup from '~/components/pub/form/field-group.vue'
-import Field from '~/components/pub/form/field.vue'
-import Label from '~/components/pub/form/label.vue'
+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 Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
 </script>
 
 <template>
@@ -41,7 +42,7 @@ import Label from '~/components/pub/form/label.vue'
       </Block>
     </div>
     <div class="my-2 flex justify-end py-2">
-      <PubNavFooterCsd />
+      <Action />
     </div>
   </form>
 </template>
diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
index 0e1fe7f4..d9c9439f 100644
--- a/app/components/app/patient/list-cfg.ts
+++ b/app/components/app/patient/list-cfg.ts
@@ -1,9 +1,16 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+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/nav/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
 export const cols: Col[] = [
   {},
diff --git a/app/components/flow/doctor/list.vue b/app/components/flow/doctor/list.vue
index c6007660..933eac5d 100644
--- a/app/components/flow/doctor/list.vue
+++ b/app/components/flow/doctor/list.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
 
@@ -47,6 +48,6 @@ provide('rec_item', recItem)
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
   <AppDoctorList :data="data" />
 </template>
diff --git a/app/components/flow/patient/list.vue b/app/components/flow/patient/list.vue
index 3131d81d..82081596 100644
--- a/app/components/flow/patient/list.vue
+++ b/app/components/flow/patient/list.vue
@@ -2,6 +2,8 @@
 import type { Summary } from '~/components/pub/base/summary-card.type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/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([])
 
@@ -100,14 +102,14 @@ provide('rec_item', recItem)
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <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">
-        <PubBaseSummaryCard v-for="n in 4" :key="n" is-skeleton />
+        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
       </template>
       <template v-else>
-        <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </template>
     </div>
     <AppPatientList :data="data" />
diff --git a/app/components/pub/base/data-table.vue b/app/components/pub/base/data-table/data-table.vue
similarity index 100%
rename from app/components/pub/base/data-table.vue
rename to app/components/pub/base/data-table/data-table.vue
diff --git a/app/components/pub/base/error.vue b/app/components/pub/base/error/error.vue
similarity index 100%
rename from app/components/pub/base/error.vue
rename to app/components/pub/base/error/error.vue
diff --git a/app/components/pub/base/summary-card.type.ts b/app/components/pub/base/summary-card/summary-card.type.ts
similarity index 100%
rename from app/components/pub/base/summary-card.type.ts
rename to app/components/pub/base/summary-card/summary-card.type.ts
diff --git a/app/components/pub/base/summary-card.vue b/app/components/pub/base/summary-card/summary-card.vue
similarity index 100%
rename from app/components/pub/base/summary-card.vue
rename to app/components/pub/base/summary-card/summary-card.vue
diff --git a/app/components/pub/custom-ui/confirmation/confirmation.vue b/app/components/pub/custom-ui/confirmation/confirmation.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/pub/custom-ui/confirmation/record-confirmation.vue b/app/components/pub/custom-ui/confirmation/record-confirmation.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/pub/nav/dropdown-action-du.vue b/app/components/pub/custom-ui/data/dropdown-action-du.vue
similarity index 100%
rename from app/components/pub/nav/dropdown-action-du.vue
rename to app/components/pub/custom-ui/data/dropdown-action-du.vue
diff --git a/app/components/pub/nav/dropdown-action-ducd.vue b/app/components/pub/custom-ui/data/dropdown-action-ducd.vue
similarity index 100%
rename from app/components/pub/nav/dropdown-action-ducd.vue
rename to app/components/pub/custom-ui/data/dropdown-action-ducd.vue
diff --git a/app/components/pub/nav/dropdown-action-dud.vue b/app/components/pub/custom-ui/data/dropdown-action-dud.vue
similarity index 100%
rename from app/components/pub/nav/dropdown-action-dud.vue
rename to app/components/pub/custom-ui/data/dropdown-action-dud.vue
diff --git a/app/components/pub/nav/dropdown-action-ud.vue b/app/components/pub/custom-ui/data/dropdown-action-ud.vue
similarity index 100%
rename from app/components/pub/nav/dropdown-action-ud.vue
rename to app/components/pub/custom-ui/data/dropdown-action-ud.vue
diff --git a/app/components/pub/nav/types.ts b/app/components/pub/custom-ui/data/types.ts
similarity index 100%
rename from app/components/pub/nav/types.ts
rename to app/components/pub/custom-ui/data/types.ts
diff --git a/app/components/pub/form/block.vue b/app/components/pub/custom-ui/form/block.vue
similarity index 100%
rename from app/components/pub/form/block.vue
rename to app/components/pub/custom-ui/form/block.vue
diff --git a/app/components/pub/form/field-group.vue b/app/components/pub/custom-ui/form/field-group.vue
similarity index 100%
rename from app/components/pub/form/field-group.vue
rename to app/components/pub/custom-ui/form/field-group.vue
diff --git a/app/components/pub/form/field.vue b/app/components/pub/custom-ui/form/field.vue
similarity index 100%
rename from app/components/pub/form/field.vue
rename to app/components/pub/custom-ui/form/field.vue
diff --git a/app/components/pub/form/label.vue b/app/components/pub/custom-ui/form/label.vue
similarity index 100%
rename from app/components/pub/form/label.vue
rename to app/components/pub/custom-ui/form/label.vue
diff --git a/app/components/pub/custom-ui/nav-footer/ba-dr-su-pr.vue b/app/components/pub/custom-ui/nav-footer/ba-dr-su-pr.vue
new file mode 100644
index 00000000..5e6f69ab
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-footer/ba-dr-su-pr.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Draf
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-check" class="me-2 align-middle" />
+      Submit
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/nav/footer/csd.vue b/app/components/pub/custom-ui/nav-footer/ba-dr-su.vue
similarity index 95%
rename from app/components/pub/nav/footer/csd.vue
rename to app/components/pub/custom-ui/nav-footer/ba-dr-su.vue
index 497081e3..17dbd6dc 100644
--- a/app/components/pub/nav/footer/csd.vue
+++ b/app/components/pub/custom-ui/nav-footer/ba-dr-su.vue
@@ -14,15 +14,15 @@ function onClick(type: ClickType) {
   <div class="m-2 flex gap-2 px-2">
     <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
       <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Kembali
+      Back
     </Button>
     <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
       <Icon name="i-lucide-file" class="me-2" />
-      Draf
+      Draft
     </Button>
     <Button class="bg-primary" type="button" @click="onClick('submit')">
       <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Selesai
+      Submit
     </Button>
   </div>
 </template>
diff --git a/app/components/pub/custom-ui/nav-footer/ba-ed-de-pri.vue b/app/components/pub/custom-ui/nav-footer/ba-ed-de-pri.vue
new file mode 100644
index 00000000..18e67b86
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-footer/ba-ed-de-pri.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-red-500" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-trash" class="me-2 align-middle" />
+      Delete
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/nav-footer/ba-ed-de.vue b/app/components/pub/custom-ui/nav-footer/ba-ed-de.vue
new file mode 100644
index 00000000..9c79eba9
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-footer/ba-ed-de.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-red-500" type="button" @click="onClick('submit')">
+      <Icon name="i-lucide-trash" class="me-2 align-middle" />
+      Delete
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/nav-footer/ba-ed-pri.vue b/app/components/pub/custom-ui/nav-footer/ba-ed-pri.vue
new file mode 100644
index 00000000..5190ec04
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-footer/ba-ed-pri.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2" />
+      Edit
+    </Button>
+    <Button class="bg-primary" type="button" @click="onClick('print')">
+      <Icon name="i-lucide-printer" class="me-2 align-middle" />
+      Print
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/nav-footer/ba-ed.vue b/app/components/pub/custom-ui/nav-footer/ba-ed.vue
new file mode 100644
index 00000000..e81ce917
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-footer/ba-ed.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+type ClickType = 'cancel' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
+      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+      Back
+    </Button>
+    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+      <Icon name="i-lucide-file" class="me-2 align-middle" />
+      Edit
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/nav/footer/cs.vue b/app/components/pub/custom-ui/nav-footer/ba-su.vue
similarity index 95%
rename from app/components/pub/nav/footer/cs.vue
rename to app/components/pub/custom-ui/nav-footer/ba-su.vue
index d51bf74a..79e18d57 100644
--- a/app/components/pub/nav/footer/cs.vue
+++ b/app/components/pub/custom-ui/nav-footer/ba-su.vue
@@ -14,11 +14,11 @@ function onClick(type: ClickType) {
   <div class="m-2 flex gap-2 px-2">
     <Button class="bg-gray-400" @click="onClick('cancel')">
       <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Kembali
+      Back
     </Button>
     <Button class="bg-primary" @click="onClick('submit')">
       <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Selesai
+      Submit
     </Button>
   </div>
 </template>
diff --git a/app/components/pub/custom-ui/nav-header/header.vue b/app/components/pub/custom-ui/nav-header/header.vue
new file mode 100644
index 00000000..10f06af2
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-header/header.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg font-bold text-gray-900">
+        <Icon :name="prep.icon" class="mr-2 h-4 w-4 align-middle" />
+        {{ prep.title }}
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/nav/header/prep.vue b/app/components/pub/custom-ui/nav-header/prep.vue
similarity index 100%
rename from app/components/pub/nav/header/prep.vue
rename to app/components/pub/custom-ui/nav-header/prep.vue
diff --git a/app/components/pub/custom-ui/nav-header/search.vue b/app/components/pub/custom-ui/nav-header/search.vue
new file mode 100644
index 00000000..dba29318
--- /dev/null
+++ b/app/components/pub/custom-ui/nav-header/search.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '../types.ts'
+
+const props = defineProps<{
+  prep: HeaderPrep
+  refSearchNav: RefSearchNav
+}>()
+
+function emitSearchNavClick() {
+  props.refSearchNav.onClick()
+}
+
+function onInput(event: Event) {
+  props.refSearchNav.onInput((event.target as HTMLInputElement).value)
+}
+
+function btnClick() {
+  props.prep.addNav?.onClick()
+}
+</script>
+
+<template>
+  <header>
+    <div class="flex items-center">
+      <div class="ml-3 text-lg text-gray-900">
+        <Input
+          type="text"
+          placeholder="Search"
+          class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
+          @click="emitSearchNavClick"
+          @input="onInput"
+        />
+      </div>
+      <div v-if="prep.addNav" class="m-2 flex items-center">
+        <Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
+          <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
+          {{ prep.addNav.label }}
+        </Button>
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/components/pub/nav/data-table.vue b/app/components/pub/nav/data-table.vue
deleted file mode 100644
index 9dc72099..00000000
--- a/app/components/pub/nav/data-table.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/pub/ui/table'
-
-defineProps<{
-  rows: unknown[]
-  cols: object
-  header: object[]
-  keys: string[]
-  funcParsed: object
-  funcHtml: object
-  funcComponent: object
-}>()
-</script>
-
-<template>
-  <Table>
-    <TableHeader>
-      <TableRow>
-        <TableHead
-          v-for="(h, idx) in header[0]"
-          :key="`head-${idx}`"
-          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
-        >
-          {{ h.label }}
-        </TableHead>
-      </TableRow>
-    </TableHeader>
-
-    <TableBody>
-      <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
-          <!-- If funcComponent has a renderer -->
-          <component
-            :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>
-            {{ funcParsed[key]?.(row) ?? funcHtml[key]?.(row) ?? row[key] }}
-          </template>
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-</template>
diff --git a/app/pages/(features)/doctor/add.vue b/app/pages/(features)/doctor/add.vue
index 3f23c8a5..987baa28 100644
--- a/app/pages/(features)/doctor/add.vue
+++ b/app/pages/(features)/doctor/add.vue
@@ -1,5 +1,6 @@
 <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({
@@ -36,5 +37,5 @@ const canCreate = hasCreateAccess(roleAccess)
   <div v-if="canCreate">
     <FlowDoctorAdd />
   </div>
-  <PubBaseError v-else :status-code="403" />
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/doctor/index.vue b/app/pages/(features)/doctor/index.vue
index 19c48dde..e75a5b89 100644
--- a/app/pages/(features)/doctor/index.vue
+++ b/app/pages/(features)/doctor/index.vue
@@ -1,5 +1,6 @@
 <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({
@@ -34,6 +35,6 @@ const canRead = hasReadAccess(roleAccess)
     <div v-if="canRead">
       <FlowDoctorList />
     </div>
-    <PubBaseError v-else :status-code="403" />
+    <Error v-else :status-code="403" />
   </div>
 </template>
diff --git a/app/pages/(features)/patient/add.vue b/app/pages/(features)/patient/add.vue
index ec540c08..813e418b 100644
--- a/app/pages/(features)/patient/add.vue
+++ b/app/pages/(features)/patient/add.vue
@@ -1,5 +1,6 @@
 <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({
@@ -36,5 +37,5 @@ const canCreate = hasCreateAccess(roleAccess)
   <div v-if="canCreate">
     <FlowPatientAdd />
   </div>
-  <PubBaseError v-else :status-code="403" />
+  <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/patient/index.vue b/app/pages/(features)/patient/index.vue
index 546fedfb..71d07e43 100644
--- a/app/pages/(features)/patient/index.vue
+++ b/app/pages/(features)/patient/index.vue
@@ -1,5 +1,6 @@
 <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({
@@ -34,6 +35,6 @@ const canRead = hasReadAccess(roleAccess)
     <div v-if="canRead">
       <FlowPatientList />
     </div>
-    <PubBaseError v-else :status-code="403" />
+    <Error v-else :status-code="403" />
   </div>
 </template>