refactor(pagination): move pagination info display to component and improve layout

- Consolidate pagination info display logic in pagination component
- Remove duplicate computed properties from list components
- Improve pagination layout with better spacing and responsiveness
- Add skeleton loading support to data tables

app/components/app/divison/list.vue

@@ -7,7 +7,7 @@ interface Props {
   paginationMeta?: PaginationMeta
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -16,57 +16,20 @@ const emit = defineEmits<{
 function handlePageChange(page: number) {
   emit('pageChange', page)
 }
-
-// Computed properties for formatted display
-const formattedRecordCount = computed(() => {
-  if (!props.paginationMeta) return '0'
-  const count = props.paginationMeta.recordCount
-  if (count == null || count === undefined) return '0'
-  return Number(count).toLocaleString('id-ID')
-})
-
-const startRecord = computed(() => {
-  if (!props.paginationMeta) return 1
-  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
-})
-
-const endRecord = computed(() => {
-  if (!props.paginationMeta) return 0
-  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
-})
 </script>
 
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-      :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
-        />
+    :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 -->
-    <div v-if="paginationMeta" class="flex align-center justify-between">
-      <!-- Data info - always show -->
-      <div class="flex items-center justify-between px-2 mb-4">
-        <div class="flex-1 text-sm text-muted-foreground">
-          Menampilkan {{ startRecord }}
-          hingga {{ endRecord }}
-          dari {{ formattedRecordCount }} data
-        </div>
-      </div>
-
-      <!-- Pagination controls - only show when multiple pages -->
+    <template v-if="paginationMeta">
       <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination
-          :pagination-meta="paginationMeta"
-          :show-info="false"
-          @page-change="handlePageChange"
-        />
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
       </div>
-    </div>
+    </template>
+
   </div>
 </template>

app/components/app/installation/list.vue

@@ -7,7 +7,7 @@ interface Props {
   paginationMeta?: PaginationMeta
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -16,48 +16,21 @@ const emit = defineEmits<{
 function handlePageChange(page: number) {
   emit('pageChange', page)
 }
-
-// Computed properties for formatted display
-const formattedRecordCount = computed(() => {
-  if (!props.paginationMeta) return '0'
-  const count = props.paginationMeta.recordCount
-  if (count == null || count === undefined) return '0'
-  return Number(count).toLocaleString('id-ID')
-})
-
-const startRecord = computed(() => {
-  if (!props.paginationMeta) return 1
-  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
-})
-
-const endRecord = computed(() => {
-  if (!props.paginationMeta) return 0
-  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
-})
 </script>
 
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
 :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-      :func-html="funcHtml" :func-component="funcComponent"
+      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
 />
 
     <!-- Data info and pagination -->
-    <div v-if="paginationMeta" class="flex align-center justify-between">
-      <!-- Data info - always show -->
-      <div class="flex items-center justify-between px-2 mb-4">
-        <div class="flex-1 text-sm text-muted-foreground">
-          Menampilkan {{ startRecord }}
-          hingga {{ endRecord }}
-          dari {{ formattedRecordCount }} data
-        </div>
-      </div>
-
-      <!-- Pagination controls - only show when multiple pages -->
+    <template v-if="paginationMeta">
       <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" :show-info="false" @page-change="handlePageChange" />
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
       </div>
-    </div>
+    </template>
+
   </div>
 </template>