dev: hotfix refactor

+ merged pub/custom-ui and pub/base into my-ui
- droped pub/custom-ui

app/components/pub/my-ui/pagination/pagination-view.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-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/my-ui/pagination/pagination.type.ts

@@ -0,0 +1,13 @@
+export interface PaginationMeta {
+  recordCount: number
+  // page : current pointer for viewing data
+  page: number
+  // pageSize: limit each page request
+  pageSize: number
+  // totalPage: recourdCount / pageSize
+  totalPage: number
+  // hasNext: check if there is next page
+  hasNext: boolean
+  // hasPrev: check if there is previous page
+  hasPrev: boolean
+}

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { PaginationMeta } from './pagination.type'
+import {
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+} from '~/components/pub/ui/pagination'
+
+interface Props {
+  paginationMeta: PaginationMeta
+  onPageChange?: (page: number) => void
+  showInfo?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  onPageChange: undefined,
+  showInfo: true,
+})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  if (props.onPageChange) {
+    props.onPageChange(page)
+  }
+  emit('pageChange', page)
+}
+
+function handleFirst() {
+  if (props.paginationMeta.hasPrev) {
+    handlePageChange(1)
+  }
+}
+
+function handlePrev() {
+  if (props.paginationMeta.hasPrev) {
+    handlePageChange(props.paginationMeta.page - 1)
+  }
+}
+
+function handleNext() {
+  if (props.paginationMeta.hasNext) {
+    handlePageChange(props.paginationMeta.page + 1)
+  }
+}
+
+function handleLast() {
+  if (props.paginationMeta.hasNext) {
+    handlePageChange(props.paginationMeta.totalPage)
+  }
+}
+
+// Computed properties for formatted numbers
+const formattedRecordCount = computed(() => {
+  const count = props.paginationMeta.recordCount
+  if (count == null || count === undefined) return '0'
+  return Number(count).toLocaleString('id-ID')
+})
+
+const startRecord = computed(() => {
+  const start = ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+  return Number(start).toLocaleString('id-ID')
+})
+
+const endRecord = computed(() => {
+  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
+})
+
+// Function to determine button width based on page number
+function getButtonClass(pageNumber: number) {
+  const digits = pageNumber.toString().length
+
+  if (digits >= 4) { // 1000+ (1k+)
+    return 'h-9 px-4 min-w-12'
+  } else if (digits === 3) { // 100-999
+    return 'h-9 px-3 min-w-10'
+  } else { // 1-99
+    return 'w-9 h-9 p-0'
+  }
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
+    <!-- Info text -->
+    <div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
+      Menampilkan {{ startRecord }}
+      hingga {{ Number(endRecord).toLocaleString('id-ID') }}
+      dari {{ formattedRecordCount }} data
+    </div>
+    <div v-else class="shrink-0">-</div>
+
+    <!-- Spacer untuk memastikan ada ruang di tengah -->
+    <div class="flex-1 min-w-4"></div>
+
+    <!-- Pagination controls -->
+    <div class="shrink-0">
+      <Pagination
+v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
+        :items-per-page="paginationMeta.pageSize" show-edges
+>
+        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+          <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
+          <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
+
+          <template v-for="(item, index) in items">
+            <PaginationListItem
+v-if="item.type === 'page'" :key="index" :value="item.value" as-child
+              @click="handlePageChange(item.value)"
+>
+              <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
+                {{ item.value }}
+              </Button>
+            </PaginationListItem>
+            <PaginationEllipsis v-else :key="item.type" :index="index" />
+          </template>
+
+          <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
+          <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
+        </PaginationList>
+      </Pagination>
+    </div>
+  </div>
+</template>