Merge branch 'dev' into feat/consultation-82

app/components/content/assesment-function/add.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>halo</div>
+</template>

app/components/content/assesment-function/list.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import AssesmentFunctionList from '~/components/app/assesment-function/list.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+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>({
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+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">
+    <AssesmentFunctionList :data="data" />
+  </div>
+</template>

app/components/content/bed/list.vue

@@ -0,0 +1,8 @@
+<!-- Duplicated from content/counter/list.vue for bed -->
+<!-- TODO: Update logic and fields for bed context -->
+<template>
+  ...existing code...
+</template>
+<script setup lang="ts">
+  // ...existing code...
+</script>

app/components/content/building/list.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppBuildingList from '~/components/app/building/list.vue'
+import AppBuildingEntryForm from '~/components/app/building/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail } from '~/services/infra.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.building,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'building',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Gedung',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari gedung...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Gedung'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Gedung'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppBuildingList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Gedung'" size="lg" prevent-outside>
+    <AppBuildingEntryForm
+      :schema="InfraSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/chamber/list.vue

@@ -0,0 +1,8 @@
+<!-- Duplicated from content/counter/list.vue for chamber -->
+<!-- TODO: Update logic and fields for chamber context -->
+<template>
+  ...existing code...
+</template>
+<script setup lang="ts">
+  // ...existing code...
+</script>

app/components/content/counter/list.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppCounterEntryForm from '~/components/app/counter/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getInfras, getInfraDetail } from '~/services/infra.service'
+
+const title = ref('')
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getCounterList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getInfras({ search, page, infraGroup_code: 'counter' })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'counter',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Counter',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari counter...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentCounterDetail = async (id: number | string) => {
+  const result = await getInfraDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentCounterDetail(recId.value)
+      title.value = 'Detail Counter'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentCounterDetail(recId.value)
+      title.value = 'Edit Counter'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getCounterList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppCounterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Counter'" size="lg" prevent-outside>
+    <AppCounterEntryForm
+      :schema="InfraSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getCounterList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getCounterList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getCounterList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/division/list.vue

@@ -13,6 +13,7 @@ import { toast } from '~/components/pub/ui/toast'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { DivisionSchema, type DivisionFormData } from '~/schemas/division.schema'
+import type { TreeItem } from '~/models/_base'
 
 // Handlers
 import {
@@ -30,8 +31,9 @@ import {
 } from '~/handlers/division.handler'
 
 // Services
-import { getDivisions, getDivisionDetail } from '~/services/division.service'
+import { getList, getDetail, getValueTreeItems } from '~/services/division.service'
 
+const divisionsTrees = ref<TreeItem[]>([])
 const title = ref('')
 
 const {
@@ -43,8 +45,13 @@ const {
   handleSearch,
   fetchData: getDivisionList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getDivisions({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'parent,childrens',
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'division',
@@ -82,7 +89,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentDivisionDetail = async (id: number | string) => {
-  const result = await getDivisionDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -109,6 +116,22 @@ watch([recId, recAction], () => {
   }
 })
 
+watch(
+  () => data.value,
+  async () => {
+    if (!data.value) return
+    const result = await getList({
+      'page-size': 100,
+      'only-have-children': false,
+      includes: 'parent,childrens',
+    })
+    if (result.success) {
+      const currentData = result.body.data || []
+      divisionsTrees.value = getValueTreeItems(currentData || [])
+    }
+  },
+)
+
 onMounted(async () => {
   await getDivisionList()
 })
@@ -122,16 +145,27 @@ onMounted(async () => {
     @search="handleSearch"
     class="mb-4 xl:mb-5"
   />
-  <AppDivisionList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppDivisionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
-  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Divisi'" size="lg" prevent-outside>
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Divisi'"
+    size="lg"
+    prevent-outside
+  >
     <AppDivisionEntryForm
       :schema="DivisionSchema"
+      :divisions="divisionsTrees"
       :values="recItem"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"
       @submit="
         (values: DivisionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
           if (recId > 0) {
             handleActionEdit(recId, values, getDivisionList, resetForm, toast)
             return
@@ -153,9 +187,18 @@ onMounted(async () => {
   >
     <template #default="{ record }">
       <div class="text-sm">
-        <p><strong>ID:</strong> {{ record?.id }}</p>
-        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
-        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
       </div>
     </template>
   </RecordConfirmation>

app/components/content/encounter/process.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
+//
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+// Components
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+
+import Status from '~/components/app/encounter/status.vue'
+import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+
 const route = useRoute()
 const router = useRouter()
 
@@ -9,7 +18,7 @@ const router = useRouter()
 const activeTab = computed({
   get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
   set: (val: string) => {
-    router.replace({ path: route.path, query: { tab: val } });
+    router.replace({ path: route.path, query: { tab: val } })
   },
 })
 
@@ -25,23 +34,38 @@ const data = {
   noBilling: '223332',
   dpjp: 'dr. Syaifullah, Sp.OT(K)',
 }
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar', component: Status },
+  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
+  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
+  { value: 'therapy-protocol', label: 'Protokol Terapi' },
+  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'consent', label: 'General Consent' },
+  { value: 'patient-note', label: 'CPRJ' },
+  { value: 'prescription', label: 'Order Obat' },
+  { value: 'device', label: 'Order Alkes' },
+  { value: 'mcu-radiology', label: 'Order Radiologi' },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
+  { value: 'medical-action', label: 'Order Ruang Tindakan' },
+  { value: 'mcu-result', label: 'Hasil Penunjang' },
+  { value: 'consultation', label: 'Konsultasi' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'control', label: 'Surat Kontrol' },
+  { value: 'screening', label: 'Skrinning MPP' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
+]
 </script>
 
 <template>
   <div class="w-full">
     <div class="mb-4">
-      <Button
-        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-        </svg>
-        Kembali ke Daftar Kunjungan
-      </Button>
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
     </div>
-
     <AppEncounterQuickInfo :data="data" />
-
-    <AppEncounterProcess :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
+    <CompTab :data="tabs" :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
   </div>
 </template>

app/components/content/equipment/list.vue

@@ -13,7 +13,6 @@ import { toast } from '~/components/pub/ui/toast'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
-import type { Uom } from '~/models/uom'
 
 // Handlers
 import {
@@ -31,8 +30,8 @@ import {
 } from '~/handlers/material.handler'
 
 // Services
-import { getMaterials, getMaterialDetail } from '~/services/material.service'
-import { getUoms } from '~/services/uom.service'
+import { getList, getDetail } from '~/services/material.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
 
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
@@ -46,8 +45,12 @@ const {
   handleSearch,
   fetchData: getEquipmentList,
 } = usePaginatedList({
-  fetchFn: async ({ page }) => {
-    const result = await getMaterials({ search: searchInput.value, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'equipment',
@@ -85,7 +88,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentMaterialDetail = async (id: number | string) => {
-  const result = await getMaterialDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -93,14 +96,6 @@ const getCurrentMaterialDetail = async (id: number | string) => {
   }
 }
 
-const getUomList = async () => {
-  const result = await getUoms()
-  if (result.success) {
-    const currentUoms = result.body?.data || []
-    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
-  }
-}
-
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -121,7 +116,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getUomList()
+  uoms.value = await getUomList()
   await getEquipmentList()
 })
 </script>

app/components/content/floor/list.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppFloorList from '~/components/app/floor/list.vue'
+import AppFloorEntryForm from '~/components/app/floor/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+
+const parents = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.floor,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'floor',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Lantai',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari lantai...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Lantai'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Lantai'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ 'infraGroup-code': infraGroupCodesKeys.building })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppFloorList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Gedung'" size="lg" prevent-outside>
+    <AppFloorEntryForm
+      :schema="InfraSchema"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/installation/list.vue

@@ -1,31 +1,41 @@
 <script setup lang="ts">
-import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
-import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
+// Components
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
-import { ActionEvents } from '~/components/pub/my-ui/data/types'
-import Header from '~/components/pub/my-ui/nav-header/header.vue'
-import { transform, usePaginatedList } from '~/composables/usePaginatedList'
-import { installationConf, schemaConf } from './entry'
+import AppInstallationList from '~/components/app/installation/list.vue'
+import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
 
-// #region State & Computed
-// Dialog state
-const isFormEntryDialogOpen = ref(false)
-const isRecordConfirmationOpen = ref(false)
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-// Table action rowId provider
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InstallationSchema, type InstallationFormData } from '~/schemas/installation.schema'
 
-// Fungsi untuk fetch data installation
-async function fetchInstallationData(params: any) {
-  // Prepare query parameters for pagination and search
-  const endpoint = transform('/api/v1/patient', params)
-  return await xfetch(endpoint)
-}
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/installation.handler'
+
+// Services
+import { getList, getDetail } from '~/services/installation.service'
+import { getValueLabelListConstants as getEncounterList } from '~/services/encounter.service'
+
+const encounterClasses = ref<{ value: string; label: string }[]>([])
+const title = ref('')
 
-// Menggunakan composable untuk pagination
 const {
   data,
   isLoading,
@@ -35,7 +45,14 @@ const {
   handleSearch,
   fetchData: getInstallationList,
 } = usePaginatedList({
-  fetchFn: fetchInstallationData,
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0, 
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
   entityName: 'installation',
 })
 
@@ -47,21 +64,20 @@ const headerPrep: HeaderPrep = {
     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
+    onInput: (value: string) => {
+      searchInput.value = value
     },
+    onClick: () => {},
+    onClear: () => {},
   },
   addNav: {
-    label: 'Tambah Instalasi',
-    icon: 'i-lucide-send',
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
     onClick: () => {
+      recItem.value = null
+      recId.value = 0
       isFormEntryDialogOpen.value = true
+      isReadonly.value = false
     },
   },
 }
@@ -70,137 +86,90 @@ provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
-// #endregion
 
-// #region Functions
-
-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
+const getCurrentInstallationDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
   }
 }
 
-// #endregion region
-
-// #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 for row actions
-watch(recId, () => {
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
   switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Detail Instalasi'
+      isReadonly.value = true
+      break
     case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Edit Instalasi'
+      isReadonly.value = false
       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
+onMounted(async () => {
+  encounterClasses.value = getEncounterList()
+  await getInstallationList()
+})
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
   <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
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Instalasi'"
+    size="lg"
+    prevent-outside
+  >
+    <AppInstallationEntryForm
+      :schema="InstallationSchema"
+      :encounter-classes="encounterClasses"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InstallationFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getInstallationList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getInstallationList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
   </Dialog>
 
   <!-- Record Confirmation Modal -->
-  <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
-    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getInstallationList, toast)"
+    @cancel=""
+  >
     <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>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
       </div>
     </template>
   </RecordConfirmation>
 </template>
-
-<style scoped>
-/* component style */
-</style>

app/components/content/medicine-group/list.vue

@@ -12,7 +12,7 @@ import { toast } from '~/components/pub/ui/toast'
 
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
-import { BaseSchema, type BaseFormData } from '~/schemas/base.schema'
+import { BaseSchema, type BaseFormData } from '~/schemas/my-ui.schema'
 
 // Handlers
 import {
@@ -30,7 +30,7 @@ import {
 } from '~/handlers/medicine-group.handler'
 
 // Services
-import { getMedicineGroups, getMedicineGroupDetail } from '~/services/medicine-group.service'
+import { getList, getDetail } from '~/services/medicine-group.service'
 
 const title = ref('')
 
@@ -43,8 +43,12 @@ const {
   handleSearch,
   fetchData: getMedicineGroupList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getMedicineGroups({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'medicine-group',
@@ -82,7 +86,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentMedicineGroupDetail = async (id: number | string) => {
-  const result = await getMedicineGroupDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue

app/components/content/medicine-method/list.vue

@@ -12,7 +12,7 @@ import { toast } from '~/components/pub/ui/toast'
 
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
-import { BaseSchema, type BaseFormData } from '~/schemas/base.schema'
+import { BaseSchema, type BaseFormData } from '~/schemas/my-ui.schema'
 
 // Handlers
 import {
@@ -30,7 +30,7 @@ import {
 } from '~/handlers/medicine-method.handler'
 
 // Services
-import { getMedicineMethods, getMedicineMethodDetail } from '~/services/medicine-method.service'
+import { getList, getDetail } from '~/services/medicine-method.service'
 
 const title = ref('')
 
@@ -43,8 +43,12 @@ const {
   handleSearch,
   fetchData: getMedicineMethodList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getMedicineMethods({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'medicine-method',
@@ -82,7 +86,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentMedicineMethodDetail = async (id: number | string) => {
-  const result = await getMedicineMethodDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue

app/components/content/medicine/list.vue

@@ -33,10 +33,10 @@ import {
 } from '~/handlers/medicine.handler'
 
 // Services
-import { getMedicines, getMedicineDetail } from '~/services/medicine.service'
-import { getMedicineGroups } from '~/services/medicine-group.service'
-import { getMedicineMethods } from '~/services/medicine-method.service'
-import { getUoms } from '~/services/uom.service'
+import { getList, getDetail } from '~/services/medicine.service'
+import { getValueLabelList as getMedicineGroupList } from '~/services/medicine-group.service'
+import { getValueLabelList as getMedicineMethodList } from '~/services/medicine-method.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
 
 const medicineGroups = ref<{ value: string; label: string }[]>([])
 const medicineMethods = ref<{ value: string; label: string }[]>([])
@@ -52,8 +52,13 @@ const {
   handleSearch,
   fetchData: getMedicineList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getMedicines({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'medicineGroup,medicineMethod,uom',
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'medicine',
@@ -91,7 +96,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentMedicineDetail = async (id: number | string) => {
-  const result = await getMedicineDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -99,36 +104,6 @@ const getCurrentMedicineDetail = async (id: number | string) => {
   }
 }
 
-const getMedicineGroupList = async () => {
-  const result = await getMedicineGroups()
-  if (result.success) {
-    const currentMedicineGroups = result.body?.data || []
-    medicineGroups.value = currentMedicineGroups.map((medicineGroup: MedicineGroup) => ({
-      value: medicineGroup.code,
-      label: medicineGroup.name,
-    }))
-  }
-}
-
-const getMedicineMethodList = async () => {
-  const result = await getMedicineMethods()
-  if (result.success) {
-    const currentMedicineMethods = result.body?.data || []
-    medicineMethods.value = currentMedicineMethods.map((medicineMethod: MedicineMethod) => ({
-      value: medicineMethod.code,
-      label: medicineMethod.name,
-    }))
-  }
-}
-
-const getUomList = async () => {
-  const result = await getUoms()
-  if (result.success) {
-    const currentUoms = result.body?.data || []
-    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
-  }
-}
-
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
@@ -148,9 +123,9 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getMedicineGroupList()
-  await getMedicineMethodList()
-  await getUomList()
+  medicineGroups.value = await getMedicineGroupList()
+  medicineMethods.value = await getMedicineMethodList()
+  uoms.value = await getUomList()
   await getMedicineList()
 })
 </script>

app/components/content/patient/detail.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { withBase } from '~/models/_base'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import type { PatientEntity } from '~/models/patient'
+import type { Person } from '~/models/person'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { getPatientDetail } from '~/services/patient.service'
+
+// #region Props & Emits
+const props = defineProps<{
+  patientId: number
+}>()
+
+// #endregion
+
+// #region State & Computed
+const patient = ref(
+  withBase<PatientEntity>({
+    person: {} as Person,
+    personAddresses: [],
+    personContacts: [],
+    personRelatives: [],
+  }),
+)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Pasien',
+  icon: 'i-lucide-user',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  // await getPatientDetail()
+  const result = await getPatientDetail(props.patientId)
+  if (result.success) {
+    patient.value = result.body.data || {}
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+function handleAction(type: string) {
+  switch (type) {
+    case 'edit':
+      // TODO: Handle edit action
+      console.log('editing data')
+      break
+
+    case 'cancel':
+      navigateTo({
+        name: 'client-patient',
+      })
+      break
+  }
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 border-b-2 border-b-slate-300 pb-2 xl:mb-5"
+  />
+  <AppPatientPreview
+    :person="patient.person"
+    :person-addresses="patient.personAddresses"
+    :person-contacts="patient.personContacts"
+    :person-relatives="patient.personRelatives"
+    @click="handleAction"
+  />
+</template>

app/components/content/patient/entry.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import type { PatientEntity, genPatientProps } from '~/models/patient'
+import type { ExposedForm } from '~/types/form'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { postPatient } from '~/services/patient.service'
+
+// #region Props & Emits
+const payload = ref<PatientEntity>()
+
+// form related state
+const personAddressForm = ref<ExposedForm<any> | null>(null)
+const personAddressRelativeForm = ref<ExposedForm<any> | null>(null)
+const personContactForm = ref<ExposedForm<any> | null>(null)
+const personEmergencyContactRelative = ref<ExposedForm<any> | null>(null)
+const personFamilyForm = ref<ExposedForm<any> | null>(null)
+const personPatientForm = ref<ExposedForm<any> | null>(null)
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+async function submitAll() {
+  const [patient, address, addressRelative, families, contacts, emergencyContact] = await Promise.all([
+    personPatientForm.value?.validate(),
+    personAddressForm.value?.validate(),
+    personAddressRelativeForm.value?.validate(),
+    personFamilyForm.value?.validate(),
+    personContactForm.value?.validate(),
+    personEmergencyContactRelative.value?.validate(),
+  ])
+
+  const results = [patient, address, addressRelative, families, contacts, emergencyContact]
+  console.log(results)
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  // for example: dropdown not selected
+  if (!allValid) return
+
+  const formDataRequest: genPatientProps = {
+    patient: patient?.values,
+    residentAddress: address?.values,
+    cardAddress: addressRelative?.values,
+    familyData: families?.values,
+    contacts: contacts?.values,
+    responsible: emergencyContact?.values,
+  }
+
+  const formData = genPatient(formDataRequest)
+  payload.value = formData
+
+  try {
+    const result = await postPatient(formData)
+    if (result.success) {
+      console.log('Patient created successfully:', result.body)
+      // Navigate to patient list or show success message
+      await navigateTo('/client/patient')
+    } else {
+      console.error('Failed to create patient:', result)
+      // Handle error - show error message to user
+    }
+  } catch (error) {
+    console.error('Error creating patient:', error)
+    // Handle error - show error message to user
+  }
+}
+// #endregion
+
+// #region Watchers
+// Watcher untuk sinkronisasi alamat ketika isSameAddress = '1'
+watch(
+  () => personAddressForm.value?.values,
+  (newAddressValues) => {
+    // Cek apakah alamat KTP harus sama dengan alamat sekarang
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress === '1'
+
+    if (isSameAddress && newAddressValues && personAddressRelativeForm.value) {
+      // Sinkronkan semua field alamat dari alamat sekarang ke alamat KTP
+      personAddressRelativeForm.value.setValues(
+        {
+          ...personAddressRelativeForm.value.values,
+          provinceId: newAddressValues.provinceId || '',
+          regencyId: newAddressValues.regencyId || '',
+          districtId: newAddressValues.districtId || '',
+          villageId: newAddressValues.villageId || '',
+          zipCode: newAddressValues.zipCode || '',
+          address: newAddressValues.address || '',
+          rt: newAddressValues.rt || '',
+          rw: newAddressValues.rw || '',
+        },
+        false,
+      )
+    }
+  },
+  { deep: true },
+)
+
+// Watcher untuk memantau perubahan isSameAddress
+watch(
+  () => personAddressRelativeForm.value?.values?.isSameAddress,
+  (isSameAddress) => {
+    if (isSameAddress === '1' && personAddressForm.value?.values && personAddressRelativeForm.value) {
+      // Ketika isSameAddress diubah menjadi '1', copy alamat sekarang ke alamat KTP
+      const currentAddressValues = personAddressForm.value.values
+      personAddressRelativeForm.value.setValues(
+        {
+          ...personAddressRelativeForm.value.values,
+          provinceId: currentAddressValues.provinceId || '',
+          regencyId: currentAddressValues.regencyId || '',
+          districtId: currentAddressValues.districtId || '',
+          villageId: currentAddressValues.villageId || '',
+          zipCode: currentAddressValues.zipCode || '',
+          address: currentAddressValues.address || '',
+          rt: currentAddressValues.rt || '',
+          rw: currentAddressValues.rw || '',
+        },
+        false,
+      )
+    }
+  },
+)
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Pasien</div>
+  <AppPatientEntryForm
+    ref="personPatientForm"
+    :schema="PatientSchema"
+  />
+  <AppPersonAddressEntryForm
+    ref="personAddressForm"
+    title="Alamat Sekarang"
+    :schema="PersonAddressSchema"
+  />
+  <AppPersonAddressEntryFormRelative
+    ref="personAddressRelativeForm"
+    title="Alamat KTP"
+    :schema="PersonAddressRelativeSchema"
+  />
+  <AppPersonFamilyParentsForm
+    ref="personFamilyForm"
+    title="Identitas Orang Tua"
+    :schema="PersonFamiliesSchema"
+  />
+  <AppPersonContactEntryForm
+    ref="personContactForm"
+    title="Kontak Pasien"
+    :contact-limit="10"
+    :schema="PersonContactListSchema"
+  />
+  <AppPersonRelativeEntryForm
+    ref="personEmergencyContactRelative"
+    title="Penanggung Jawab"
+    :schema="ResponsiblePersonSchema"
+  />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="submitAll" />
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>

app/components/content/patient/list.vue

@@ -1,46 +1,54 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { Summary } from '~/components/pub/my-ui/summary-card/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+// #region Imports
 import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
-import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
 
-const data = ref([])
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { getPatients, removePatient } from '~/services/patient.service'
+
+// #endregion
+
+// #region State
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
     // open filter modal
   },
-  onInput: (_val: string) => {
-    // filter patient list
+  onInput: (val: string) => {
+    searchInput.value = val
   },
   onClear: () => {
-    // clear url param
+    searchInput.value = ''
   },
 }
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
-})
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
 
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-const hreaderPrep: HeaderPrep = {
+const headerPrep: HeaderPrep = {
   title: 'Pasien',
   icon: 'i-lucide-users',
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/patient/add'),
+    onClick: () => navigateTo('/client/patient/add'),
   },
 }
 
-// Initial/default data structure
-const summaryData: Summary[] = [
+const summaryData = ref<Summary[]>([
   {
     title: 'Total Pasien',
     icon: UsersRound,
@@ -69,53 +77,140 @@ const summaryData: Summary[] = [
     trend: -3,
     timeframe: 'daily',
   },
-]
+])
+// #endregion
 
-// API call function
+// #region Lifecycle Hooks
+onMounted(() => {
+  getPatientSummary()
+})
+// #endregion
+
+// #region Functions
 async function getPatientSummary() {
   try {
-    isLoading.summary = true
-
+    summaryLoading.value = 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
+    summaryLoading.value = 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
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await removePatient(record.id)
+      if (result.success) {
+        console.log('Patient deleted successfully')
+        // Refresh the list
+        await fetchData()
+      } else {
+        console.error('Failed to delete patient:', result)
+        // Handle error - show error message to user
+      }
+    } catch (error) {
+      console.error('Error deleting patient:', error)
+      // Handle error - show error message to user
+    }
   }
-  isLoading.isTableLoading = false
 }
 
-onMounted(() => {
-  getPatientSummary()
-  getPatientList()
-})
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
 
+// #region Provide
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo({
+        name: 'client-patient-id',
+        params: { id: recId.value },
+      })
+      break
+
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Header
+    v-model:search="searchInput"
+    :prep="{ ...headerPrep }"
+    :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 v-if="summaryLoading">
+        <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" />
+        <SummaryCard
+          v-for="card in summaryData"
+          :key="card.title"
+          :stat="card"
+        />
       </template>
     </div>
-    <AppPatientList :data="data" />
+    <AppPatientList
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
   </div>
+
+  <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>
 </template>

app/components/content/room/list.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppRoomList from '~/components/app/room/list.vue'
+import AppRoomEntryForm from '~/components/app/room/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+import { getValueLabelList as getSpecialistList } from '~/services/specialist.service'
+import { getValueLabelList as getSubspecialistList } from '~/services/subspecialist.service'
+import { getValueLabelList as getUnitList } from '~/services/unit.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const specialists = ref<{ value: string; label: string }[]>([])
+const subspecialists = ref<{ value: string; label: string }[]>([])
+const units = ref<{ value: string; label: string }[]>([])
+const selectedUnit = ref<string | number | null>(null)
+const selectedSpecialist = ref<string | number | null>(null)
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.room,
+      includes: 'parent,specialist,subspecialist,unit',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'room',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Ruangan',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari Ruangan...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Ruangan'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Ruangan'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch(selectedUnit, async (val) => {
+  if (val) {
+    specialists.value = await getSpecialistList({ 'unit-id': val, 'page-size': 100 })
+    selectedSpecialist.value = null
+    subspecialists.value = []
+  } else {
+    specialists.value = []
+    selectedSpecialist.value = null
+    subspecialists.value = []
+  }
+})
+
+watch(selectedSpecialist, async (val) => {
+  if (val) {
+    subspecialists.value = await getSubspecialistList({ 'specialist-id': val, 'page-size': 100 })
+  } else {
+    subspecialists.value = []
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ 'infraGroup-code': infraGroupCodesKeys.floor })
+  units.value = await getUnitList({ 'page-size': 100 })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppRoomList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Ruangan'" size="lg" prevent-outside>
+    <AppRoomEntryForm
+      :schema="InfraSchema"
+      :specialists="specialists"
+      :subspecialists="subspecialists"
+      :units="units"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @update:selected-unit="(val: any) => (selectedUnit = val)"
+      @update:selected-specialist="(val: any) => (selectedSpecialist = val)"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/soapi/entry.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import EarlyMedicalAssesmentList from './list.vue'
+import EarlyMedicalAssesmentForm from './form.vue'
+
+const { mode, openForm, backToList } = useQueryMode('mode')
+</script>
+
+<template>
+  <div>
+    <EarlyMedicalAssesmentList v-if="mode === 'list'" @add="openForm" />
+    <EarlyMedicalAssesmentForm v-else @back="backToList" />
+  </div>
+</template>

app/components/content/soapi/form.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Entry from '~/components/app/soapi/entry.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: 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(() => {
+  getPatientList()
+})
+
+function handleClick(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry type="early" :exclude-fields="['prim-compl', 'sec-compl']" @click="handleClick" />
+  <Dialog v-model:open="isOpen" title="Pilih Prosedur" size="xl" prevent-outside>
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>

app/components/content/soapi/list.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import AssesmentFunctionList from '~/components/app/soapi/list.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const emits = defineEmits(['add', 'edit'])
+
+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>({
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => emits('add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+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">
+    <AssesmentFunctionList :data="data" />
+  </div>
+</template>

app/components/content/specialist/list.vue

@@ -13,7 +13,6 @@ import { toast } from '~/components/pub/ui/toast'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { SpecialistSchema, type SpecialistFormData } from '~/schemas/specialist.schema'
-import type { Unit } from '~/models/unit'
 
 // Handlers
 import {
@@ -31,10 +30,10 @@ import {
 } from '~/handlers/specialist.handler'
 
 // Services
-import { getSpecialists, getSpecialistDetail } from '~/services/specialist.service'
-import { getUnits } from '~/services/unit.service'
+import { getList, getDetail } from '~/services/specialist.service'
+import { getValueLabelList as getUnitList } from '~/services/unit.service'
 
-const units = ref<{ value: string; label: string }[]>([])
+const units = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -46,15 +45,20 @@ const {
   handleSearch,
   fetchData: getSpecialistList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getSpecialists({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'unit',
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'specialist',
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Specialist',
+  title: 'Spesialis',
   icon: 'i-lucide-box',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
@@ -85,7 +89,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentSpecialistDetail = async (id: number | string) => {
-  const result = await getSpecialistDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -93,14 +97,6 @@ const getCurrentSpecialistDetail = async (id: number | string) => {
   }
 }
 
-const getUnitList = async () => {
-  const result = await getUnits()
-  if (result.success) {
-    const currentUnits = result.body?.data || []
-    units.value = currentUnits.map((item: Unit) => ({ value: item.id ? Number(item.id) : item.code, label: item.name }))
-  }
-}
-
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -121,7 +117,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getUnitList()
+  units.value = await getUnitList()
   await getSpecialistList()
 })
 </script>

app/components/content/subspecialist/list.vue

@@ -13,7 +13,6 @@ import { toast } from '~/components/pub/ui/toast'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { SubspecialistSchema, type SubspecialistFormData } from '~/schemas/subspecialist.schema'
-import type { Specialist } from '~/models/specialist'
 
 // Handlers
 import {
@@ -31,10 +30,10 @@ import {
 } from '~/handlers/subspecialist.handler'
 
 // Services
-import { getSubspecialists, getSubspecialistDetail } from '~/services/subspecialist.service'
-import { getSpecialists } from '~/services/specialist.service'
+import { getList, getDetail } from '~/services/subspecialist.service'
+import { getValueLabelList as getSpecialistsList } from '~/services/specialist.service'
 
-const specialists = ref<{ value: string; label: string }[]>([])
+const specialists = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -46,15 +45,20 @@ const {
   handleSearch,
   fetchData: getSubSpecialistList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getSubspecialists({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'specialist',
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'subspecialist',
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'SubSpecialist',
+  title: 'Sub Spesialis',
   icon: 'i-lucide-box',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
@@ -85,7 +89,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentSubSpecialistDetail = async (id: number | string) => {
-  const result = await getSubspecialistDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -93,17 +97,6 @@ const getCurrentSubSpecialistDetail = async (id: number | string) => {
   }
 }
 
-const getSpecialistsList = async () => {
-  const result = await getSpecialists()
-  if (result.success) {
-    const currentSpecialists = result.body?.data || []
-    specialists.value = currentSpecialists.map((item: Specialist) => ({
-      value: item.id ? Number(item.id) : item.code,
-      label: item.name,
-    }))
-  }
-}
-
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -124,7 +117,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getSpecialistsList()
+  specialists.value = await getSpecialistsList()
   await getSubSpecialistList()
 })
 </script>

app/components/content/tools/list.vue

@@ -13,7 +13,6 @@ import { toast } from '~/components/pub/ui/toast'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { DeviceSchema, type DeviceFormData } from '~/schemas/device.schema'
-import type { Uom } from '~/models/uom'
 
 // Handlers
 import {
@@ -31,8 +30,8 @@ import {
 } from '~/handlers/device.handler'
 
 // Services
-import { getDevices, getDeviceDetail } from '~/services/device.service'
-import { getUoms } from '~/services/uom.service'
+import { getList, getDetail } from '~/services/device.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
 
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
@@ -46,8 +45,8 @@ const {
   handleSearch,
   fetchData: getToolsList,
 } = usePaginatedList({
-  fetchFn: async ({ page }) => {
-    const result = await getDevices({ search: searchInput.value, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({ search: params.search, 'page-number': params['page-number'] || 0 })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'device',
@@ -89,21 +88,13 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentToolsDetail = async (id: number | string) => {
-  const result = await getDeviceDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
   }
 }
 
-const getUomList = async () => {
-  const result = await getUoms()
-  if (result.success) {
-    const currentUoms = result.body?.data || []
-    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
-  }
-}
-
 // Watch for row actions
 watch([recId, recAction], () => {
   switch (recAction.value) {
@@ -126,7 +117,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  await getUomList()
+  uoms.value = await getUomList()
   await getToolsList()
 })
 </script>

app/components/content/unit/list.vue

@@ -30,8 +30,10 @@ import {
 } from '~/handlers/unit.handler'
 
 // Services
-import { getUnits, getUnitDetail } from '~/services/unit.service'
+import { getList, getDetail } from '~/services/unit.service'
+import { getValueLabelList as getInstallationList } from '~/services/installation.service'
 
+const installations = ref<{ value: string; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -43,8 +45,13 @@ const {
   handleSearch,
   fetchData: getUnitList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getUnits({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'installation',
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'unit',
@@ -82,7 +89,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentUnitDetail = async (id: number | string) => {
-  const result = await getUnitDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue
@@ -110,6 +117,7 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
+  installations.value = await getInstallationList()
   await getUnitList()
 })
 </script>
@@ -127,6 +135,7 @@ onMounted(async () => {
   <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Unit'" size="lg" prevent-outside>
     <AppUnitEntryForm
       :schema="UnitSchema"
+      :installations="installations"
       :values="recItem"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"

app/components/content/uom/list.vue

@@ -29,7 +29,7 @@ import {
 } from '~/handlers/uom.handler'
 
 // Services
-import { getUoms, getUomDetail } from '~/services/uom.service'
+import { getList, getDetail } from '~/services/uom.service'
 
 const title = ref('')
 
@@ -42,8 +42,12 @@ const {
   handleSearch,
   fetchData: getUomList,
 } = usePaginatedList({
-  fetchFn: async ({ page, search }) => {
-    const result = await getUoms({ search, page })
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'uom',
@@ -81,7 +85,7 @@ provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 const getCurrentUomDetail = async (id: number | string) => {
-  const result = await getUomDetail(id)
+  const result = await getDetail(id)
   if (result.success) {
     const currentValue = result.body?.data || {}
     recItem.value = currentValue

app/components/content/warehouse/list.vue

@@ -0,0 +1,8 @@
+<!-- Duplicated from content/counter/list.vue for warehouse -->
+<!-- TODO: Update logic and fields for warehouse context -->
+<template>
+  ...existing code...
+</template>
+<script setup lang="ts">
+  // ...existing code...
+</script>