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

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

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