feat(pagination): add reusable pagination component and update list views

- Create new PaginationView component to standardize pagination display
- Update multiple list components to use the new PaginationView
- Make paginationMeta prop required in list components

app/components/app/divison/list.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -21,15 +22,11 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-    :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
       :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
-/>
+    />
 
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
   </div>
 </template>

app/components/app/equipment/list.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -29,10 +30,7 @@ function handlePageChange(page: number) {
       :func-html="funcHtml"
       :func-component="funcComponent"
     />
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>

app/components/app/installation/list.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -21,16 +22,10 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
       :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
-/>
-
-    <!-- Data info and pagination -->
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+    />
 
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>

app/components/app/specialist/list.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -21,16 +22,10 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
       :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
-/>
-
-    <!-- Data info and pagination -->
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+    />
 
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>

app/components/app/tools/list.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -19,18 +20,12 @@ function handlePageChange(page: number) {
 </script>
 
 <template>
-  <PubBaseDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
-  <template v-if="paginationMeta">
-    <div v-if="paginationMeta.totalPage > 1">
-      <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    </div>
-  </template>
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :func-html="funcHtml" :func-component="funcComponent"
+    />
+
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
 </template>

app/components/app/unit/list.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -21,15 +22,10 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
       :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
-/>
-
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+    />
 
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>