fix: 🐛 Pagination issue resolved

src/components.d.ts

@@ -26,13 +26,12 @@ declare module 'vue' {
     Navbar: typeof import('./components/Navbar.vue')['default']
     NBadge: typeof import('naive-ui')['NBadge']
     NButton: typeof import('naive-ui')['NButton']
-    NCard: typeof import('naive-ui')['NCard']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
-    NDynamicTags: typeof import('naive-ui')['NDynamicTags']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
@@ -42,15 +41,10 @@ declare module 'vue' {
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
-    NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
-    NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
-    NSwitch: typeof import('naive-ui')['NSwitch']
-    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
-    NUpload: typeof import('naive-ui')['NUpload']
     OrderManagement: typeof import('./components/Orders/OrderManagement.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']
     ReviewManagement: typeof import('./components/Review/ReviewManagement.vue')['default']

src/mocks/handlers/color.handler.ts

@@ -4,7 +4,7 @@ import { faker } from '@faker-js/faker'
 import { CreatePagedResponse } from '../handlers.utility'
 import type { Color, ColorCreateModel } from '~/models/Color'
 
-const colors = _.times(7, createFakeColor)
+const colors = _.times(17, createFakeColor)
 const handlers = [
   http.get('/api/Color', ({ request }) => {
     const response = CreatePagedResponse<Color>(request, colors)

src/store/brand.store.ts

@@ -17,7 +17,7 @@ export const useBrandStore = defineStore('Brand', () => {
     try {
       const response = await brandService.getList(options)
       brands.value = response.items
-      options.pageSize = Math.trunc(response.totalCount / options.itemsPerPage)
+      options.pageCount = Math.ceil(response.totalCount / options.itemsPerPage)
     }
     finally {
       isLoading.value = false

src/store/category.store.ts

@@ -15,7 +15,7 @@ export const useCategoryStore = defineStore('Category', () => {
     try {
       const response = await categoryService.getList(options)
       categories.value = response.items
-      options.pageSize = Math.trunc(response.totalCount / options.itemsPerPage)
+      options.pageCount = Math.ceil(response.totalCount / options.itemsPerPage)
     }
     finally {
       isLoading.value = false

src/store/color.store.ts

@@ -17,7 +17,7 @@ export const useColorStore = defineStore('Color', () => {
     try {
       const response = await colorService.getList(options)
       colors.value = response.items
-      options.pageSize = Math.trunc(response.totalCount / options.itemsPerPage)
+      options.pageCount = Math.ceil(response.totalCount / options.pageSize)
     }
     finally {
       isLoading.value = false

src/store/customer.store.ts

@@ -18,7 +18,7 @@ export const useCustomerStore = defineStore('Customer', () => {
     try {
       const response = await customerService.getList(options)
       customers.value = response.items
-      options.pageSize = Math.trunc(response.totalCount / options.itemsPerPage)
+      options.pageCount = Math.ceil(response.totalCount / options.itemsPerPage)
     }
     finally {
       isLoading.value = false

src/store/order.store.ts

@@ -14,7 +14,7 @@
     try {
       const response = await orderService.getOrderList(options)
       orders.value = response.items
-      options.pageSize = Math.trunc(response.totalCount / options.itemsPerPage)
+      options.pageCount = Math.ceil(response.totalCount / options.itemsPerPage)
     }
     finally {
       isLoading.value = false
@@ -22,7 +22,7 @@
   }
 
   async function getOrderDetail(order: Order) {
     const response = await orderService.getOrder(order.id)
   }
 
   return {

src/store/product.store.ts

@@ -15,7 +15,7 @@ export const useProductStore = defineStore('Product', () => {
     try {
       const response = await productService.getList(options)
       products.value = response.items
-      options.pageSize = Math.trunc(response.totalCount / options.itemsPerPage)
+      options.pageCount = Math.ceil(response.totalCount / options.itemsPerPage)
     }
     finally {
       isLoading.value = false

src/store/review.store.ts

@@ -19,7 +19,7 @@ export const useReviewStore = defineStore('Review', () => {
     try {
       const response = await reviewService.getReviewList(options)
       reviews.value = response.items
-      options.pageSize = Math.trunc(response.totalCount / options.itemsPerPage)
+      options.pageCount = Math.ceil(response.totalCount / options.itemsPerPage)
     }
     finally {
       isLoading.value = false