feat: restructure list

app/components/app/division/entry-form.vue

@@ -15,7 +15,6 @@ import { useForm } from 'vee-validate'
 
 interface Props {
   schema: z.ZodSchema<any>
-  uoms: any[]
   values: any
   isLoading?: boolean
   isReadonly?: boolean
@@ -72,7 +71,7 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-tools" @submit.prevent>
+  <form id="form-division" @submit.prevent>
     <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
       <Cell>
         <Label height="compact">Kode</Label>

app/components/app/division/list-cfg.ts

@@ -48,8 +48,4 @@ export const funcComponent: RecStrFuncComponent = {
   },
 }
 
-export const funcHtml: RecStrFuncUnknown = {
+export const funcHtml: RecStrFuncUnknown = {}
-  patient_address(_rec) {
-    return '-'
-  },
-}

app/components/app/medicine-group/list-cfg.ts

@@ -10,11 +10,6 @@ import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
 export const cols: Col[] = [{}, {}, { width: 50 }]
 
 export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
@@ -39,8 +34,4 @@ export const funcComponent: RecStrFuncComponent = {
   },
 }
 
-export const funcHtml: RecStrFuncUnknown = {
+export const funcHtml: RecStrFuncUnknown = {}
-  patient_address(_rec) {
-    return '-'
-  },
-}

app/components/app/medicine-method/list-cfg.ts

@@ -10,11 +10,6 @@ import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
 export const cols: Col[] = [{}, {}, { width: 50 }]
 
 export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
@@ -39,8 +34,4 @@ export const funcComponent: RecStrFuncComponent = {
   },
 }
 
-export const funcHtml: RecStrFuncUnknown = {
+export const funcHtml: RecStrFuncUnknown = {}
-  patient_address(_rec) {
-    return '-'
-  },
-}

app/components/content/division/list-prev.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
-import AppDivisionEntryForm from '~/components/app/divison/entry-form.vue'
+import AppDivisionEntryForm from '~/components/app/division/entry-form.vue'
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 import { ActionEvents } from '~/components/pub/custom-ui/data/types'

app/components/content/division/list.vue

@@ -1,28 +1,38 @@
 <script setup lang="ts">
-import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+// Components
-import AppDivisionEntryForm from '~/components/app/divison/entry-form.vue'
 import Dialog from '~/components/pub/base/modal/dialog.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
-import { ActionEvents } from '~/components/pub/custom-ui/data/types'
+import AppDivisionEntryForm from '~/components/app/division/entry-form.vue'
-import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+
+// Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
-import { divisionConf, divisionTreeConfig, schema } from './entry'
+import { toast } from '~/components/pub/ui/toast'
-// #region State & Computed
-// Dialog state
-const isFormEntryDialogOpen = ref(false)
-const isRecordConfirmationOpen = ref(false)
 
-// Table action rowId provider
+// Types
-const recId = ref<number>(0)
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
-const recAction = ref<string>('')
+import { DivisionSchema, type DivisionFormData } from '~/schemas/division.schema'
-const recItem = ref<any>(null)
 
-async function fetchDivisionData(_params: any) {
+// Handlers
-  const endpoint = '/api/v1/_dev/division/list'
+import {
-  return await xfetch(endpoint)
+  recId,
-}
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/division.handler'
+
+// Services
+import { getDivisions, getDivisionDetail } from '~/services/division.service'
+
+const title = ref('')
 
-// Menggunakan composable untuk pagination
 const {
   data,
   isLoading,
@@ -32,7 +42,10 @@ const {
   handleSearch,
   fetchData: getDivisionList,
 } = usePaginatedList({
-  fetchFn: fetchDivisionData,
+  fetchFn: async ({ page, search }) => {
+    const result = await getDivisions({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
   entityName: 'division',
 })
 
@@ -44,21 +57,20 @@ const headerPrep: HeaderPrep = {
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
-    onInput: (_val: string) => {
+    onInput: (value: string) => {
-      // Handle search input - this will be triggered by the header component
+      searchInput.value = value
-    },
-    onClick: () => {
-      // Handle search button click if needed
-    },
-    onClear: () => {
-      // Handle search clear
     },
+    onClick: () => {},
+    onClear: () => {},
   },
   addNav: {
-    label: 'Tambah Divisi',
+    label: 'Tambah',
-    icon: 'i-lucide-send',
+    icon: 'i-lucide-plus',
     onClick: () => {
+      recItem.value = null
+      recId.value = 0
       isFormEntryDialogOpen.value = true
+      isReadonly.value = false
     },
   },
 }
@@ -67,142 +79,83 @@ provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
-// #endregion
 
-// #region Functions
+const getCurrentDivisionDetail = async (id: number | string) => {
-
+  const result = await getDivisionDetail(id)
-async function handleDeleteRow(record: any) {
+  if (result.success) {
-  try {
+    const currentValue = result.body?.data || {}
-    // TODO : hit backend request untuk delete
+    recItem.value = currentValue
-    console.log('Deleting record:', record)
+    isFormEntryDialogOpen.value = true
-
-    // Simulate API call
-    // const response = await xfetch(`/api/v1/division/${record.id}`, {
-    //   method: 'DELETE'
-    // })
-
-    // Refresh data setelah berhasil delete
-    await getDivisionList()
-
-    // TODO: Show success message
-    console.log('Record deleted successfully')
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    // TODO: Show error message
-  } finally {
-    // Reset record state
-    recId.value = 0
-    recAction.value = ''
-    recItem.value = null
   }
 }
 
-// #endregion region
+// Watch for row actions when recId or recAction changes
-
+watch([recId, recAction], () => {
-// #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/division', {
-    //   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 getDivisionList()
-
-    // TODO: Show success message
-    console.log('Division created successfully')
-  } catch (error: unknown) {
-    console.warn('Error submitting form:', error)
-    isSuccess = false
-    // Don't close dialog or reset form on error
-    // TODO: Show error message to user
-  } finally {
-    if (isSuccess) {
-      setTimeout(() => {
-        resetForm()
-      }, 500)
-    }
-  }
-}
-// #endregion
-
-// #region Watchers
-
-// Watch for row actions
-watch(recId, () => {
   switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDivisionDetail(recId.value)
+      title.value = 'Detail Divisi'
+      isReadonly.value = true
+      break
     case ActionEvents.showEdit:
-      // TODO: Handle edit action
+      getCurrentDivisionDetail(recId.value)
-      // isFormEntryDialogOpen.value = true
+      title.value = 'Edit Divisi'
+      isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
-      // Trigger confirmation modal open
       isRecordConfirmationOpen.value = true
       break
   }
 })
 
-// Handle confirmation result
+onMounted(async () => {
-function handleConfirmDelete(record: any, action: string) {
+  await getDivisionList()
-  console.log('Confirmed action:', action, 'for record:', record)
+})
-  handleDeleteRow(record)
-}
-
-function handleCancelConfirmation() {
-  // Reset record state when cancelled
-  recId.value = 0
-  recAction.value = ''
-  recItem.value = null
-}
-// #endregion
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+  <Header
-  <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    v-model="searchInput"
-
+    :prep="headerPrep"
-  <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppMedicineGroupList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Divisi'" size="lg" prevent-outside>
     <AppDivisionEntryForm
-      :division="divisionConf" :division-tree="divisionTreeConfig" :schema="schema"
+      :schema="DivisionSchema"
-      :initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DivisionFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getDivisionList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getDivisionList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
     />
-
   </Dialog>
 
   <!-- Record Confirmation Modal -->
   <RecordConfirmation
-      v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+    v-model:open="isRecordConfirmationOpen"
-      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
+    action="delete"
-    >
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getDivisionList, 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?.name"><strong>Nama:</strong> {{ record.name }}</p>
-        <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
       </div>
     </template>
   </RecordConfirmation>
 </template>
-
-<style scoped>
-/* component style */
-</style>

app/components/content/equipment/list.vue

@@ -2,8 +2,8 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
 
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
@@ -60,15 +60,11 @@ const headerPrep: HeaderPrep = {
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
-    onInput: (_val: string) => {
+    onInput: (value: string) => {
-      // Handle search input - this will be triggered by the header component
+      searchInput.value = value
-    },
-    onClick: () => {
-      // Handle search button click if needed
-    },
-    onClear: () => {
-      // Handle search clear
     },
+    onClick: () => {},
+    onClear: () => {},
   },
   addNav: {
     label: 'Tambah Perlengkapan',
@@ -130,7 +126,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    @search="handleSearch"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
   <AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
   <Dialog

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

@@ -2,8 +2,8 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppMedicineGroupEntryForm from '~/components/app/medicine-group/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import AppMedicineGroupEntryForm from '~/components/app/medicine-group/entry-form.vue'
 
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
@@ -57,7 +57,9 @@ const headerPrep: HeaderPrep = {
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
-    onInput: (_val: string) => {},
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
     onClick: () => {},
     onClear: () => {},
   },
@@ -112,7 +114,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
   <AppMedicineGroupList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
   <Dialog

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

@@ -2,8 +2,8 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
 
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
@@ -57,7 +57,9 @@ const headerPrep: HeaderPrep = {
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
-    onInput: (_val: string) => {},
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
     onClick: () => {},
     onClear: () => {},
   },
@@ -112,7 +114,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
   <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
   <Dialog

app/components/content/medicine/list.vue

@@ -2,15 +2,15 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppMedicineEntryForm from '~/components/app/medicine/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import AppMedicineEntryForm from '~/components/app/medicine/entry-form.vue'
 
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
 import { toast } from '~/components/pub/ui/toast'
 
 // Types
-import { ActionEvents, type HeaderPrep, type RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
 import { MedicineSchema, type MedicineFormData } from '~/schemas/medicine.schema'
 import type { MedicineGroup } from '~/models/medicine-group'
 import type { MedicineMethod } from '~/models/medicine-method'
@@ -69,12 +69,8 @@ const headerPrep: HeaderPrep = {
     onInput: (value: string) => {
       searchInput.value = value
     },
-    onClick: () => {
+    onClick: () => {},
-      // open filter modal
+    onClear: () => {},
-    },
-    onClear: () => {
-      // clear url param
-    },
   },
   addNav: {
     label: 'Tambah',

app/components/content/tools/list.vue

@@ -2,8 +2,8 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
 
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
@@ -60,8 +60,8 @@ const headerPrep: HeaderPrep = {
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
-    onInput: (_val: string) => {
+    onInput: (value: string) => {
-      // Handle search input - this will be triggered by the header component
+      searchInput.value = value
     },
     onClick: () => {
       // Handle search button click if needed
@@ -131,7 +131,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    @search="handleSearch"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
   <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
   <Dialog

app/components/content/uom/list.vue

@@ -2,8 +2,8 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppUomEntryForm from '~/components/app/uom/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import AppUomEntryForm from '~/components/app/uom/entry-form.vue'
 
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
@@ -57,7 +57,9 @@ const headerPrep: HeaderPrep = {
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
-    onInput: (_val: string) => {},
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
     onClick: () => {},
     onClear: () => {},
   },
@@ -113,17 +115,18 @@ onMounted(async () => {
 
 <template>
   <div class="p-4">
-    <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"
+    />
     <div class="rounded-md border p-4">
       <AppUomList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
     </div>
 
-    <Dialog
+    <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Uom'" size="lg" prevent-outside>
-      v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Uom'"
-      size="lg"
-      prevent-outside
-    >
       <AppUomEntryForm
         :schema="UomSchema"
         :values="recItem"

app/pages/(features)/org-src/division/index.vue

@@ -7,7 +7,7 @@ definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
   title: 'Daftar Divisi',
-  contentFrame: 'cf-full-width',
+  contentFrame: 'cf-container-lg',
 })
 
 const route = useRoute()