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/pub/custom-ui/pagination/pagination-view.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import Pagination from './pagination.vue'
+
+const props = defineProps<{
+  paginationMeta: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Pagination
+  v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
+  :pagination-meta="paginationMeta"
+  @page-change="handlePageChange"
+  />
+</template>

app/components/pub/custom-ui/pagination/pagination.vue

@@ -89,12 +89,12 @@ function getButtonClass(pageNumber: number) {
 <template>
   <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
     <!-- Info text -->
-    <div v-if="showInfo" class="text-sm text-muted-foreground shrink-0">
+    <div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
       Menampilkan {{ startRecord }}
       hingga {{ endRecord }}
       dari {{ formattedRecordCount }} data
     </div>
-    <div v-else class="shrink-0"></div>
+    <div v-else class="shrink-0">-</div>
 
     <!-- Spacer untuk memastikan ada ruang di tengah -->
     <div class="flex-1 min-w-4"></div>