From bb1cdee3f45ba68b9dac28d072ee6086e9b0bd45 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Tue, 24 Mar 2026 16:08:31 +0100
Subject: [PATCH] fix: paginations

---
 .../components/customer/PageCustomerData.vue  | 169 ++++++++++--------
 .../components/customer/PageProductsList.vue  |  28 ++-
 bo/src/views/RepoChartView.vue                |   2 +-
 3 files changed, 111 insertions(+), 88 deletions(-)

diff --git a/bo/src/components/customer/PageCustomerData.vue b/bo/src/components/customer/PageCustomerData.vue
index dbe2448..3fb35cc 100644
--- a/bo/src/components/customer/PageCustomerData.vue
+++ b/bo/src/components/customer/PageCustomerData.vue
@@ -1,89 +1,102 @@
 <template>
     <component :is="Default || 'div'">
-    <div class="container mx-auto mt-20">
-        <div class="flex flex-col gap-5 mb-6">
-            <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Customer Data') }}</h1>
+        <div class="container mx-auto mt-20">
+            <div class="flex flex-col gap-5 mb-6">
+                <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Customer Data') }}</h1>
 
-            <div v-if="!customerStore.hasAccount" class="flex flex-col items-center justify-center py-12">
-                <div class="text-center flex flex-col items-center justify-center mb-6">
-                    <UIcon name="mdi:domain" class="text-[60px] text-gray-400 dark:text-gray-500" />
-                    <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">{{ t('No customer account found') }}</p>
-                    <p class="text-sm text-gray-500 dark:text-gray-500">{{ t('Create an account to manage your company data') }}</p>
-                </div>
-                <UButton color="primary" @click="goToCreateAccount"
-                    class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
-                    <UIcon name="mdi:add-bold" />
-                    {{ t('Create Account') }}
-                </UButton>
-            </div>
-
-            <div v-else class="flex flex-col gap-3">
-                <div class="grid grid-cols-2 gap-5">
-                    <div
-                        class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-4">
-                        <h2 class="text-xl font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
-                            <UIcon name="mdi:domain"
-                                class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
-                            {{ t('Company Information') }}
-                        </h2>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-                            <div>
-                                <label
-                                    class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{ t('Company Name') }}</label>
-                                <p class="text-black dark:text-white">{{ customerStore.customer?.companyName || '-' }}
-                                </p>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('Company Email') }}</label>
-                                <p class="text-black dark:text-white">{{ customerStore.customer?.companyEmail || '-' }}
-                                </p>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('REGON') }}</label>
-                                <p class="text-black dark:text-white">{{ customerStore.customer?.regon || '-' }}</p>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('NIP') }}</label>
-                                <p class="text-black dark:text-white">{{ customerStore.customer?.nip || '-' }}</p>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('VAT') }}</label>
-                                <p class="text-black dark:text-white">{{ customerStore.customer?.vat || '-' }}</p>
-                            </div>
-                        </div>
+                <div v-if="!customerStore.hasAccount" class="flex flex-col items-center justify-center py-12">
+                    <div class="text-center flex flex-col items-center justify-center mb-6">
+                        <UIcon name="mdi:domain" class="text-[60px] text-gray-400 dark:text-gray-500" />
+                        <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">{{ t('No customer account found') }}
+                        </p>
+                        <p class="text-sm text-gray-500 dark:text-gray-500">{{ t('Create an account to manage your company data') }}</p>
                     </div>
-                    <div class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-4">
-                        <h2 class="text-xl font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
-                            <UIcon name="mdi:map-marker"
-                                class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
-                            {{ t('Addresses') }}
-                        </h2>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <div>
-                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{{ t('Company Address') }}</label>
-                                <div v-if="companyAddress"
-                                    class="p-4 bg-white dark:bg-(--black) rounded-md border border-(--border-light) dark:border-(--border-dark)">
-                                    <p class="text-black dark:text-white">{{ companyAddress.street }}</p>
-                                    <p class="text-black dark:text-white">{{ companyAddress.zipCode }}, {{
-                                        companyAddress.city }}</p>
-                                    <p class="text-black dark:text-white">{{ companyAddress.country }}</p>
-                                </div>
-                                <p v-else class="text-gray-400 dark:text-gray-500">-</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex justify-end">
-                    <UButton color="primary" variant="outline"
-                        class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) border-(--accent-blue-light) dark:border-(--accent-blue-dark)"
-                        @click="goToCreateAccount">
-                        <UIcon name="ic:sharp-edit" />
-                        {{ t('Edit Account') }}
+                    <UButton color="primary" @click="goToCreateAccount"
+                        class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
+                        <UIcon name="mdi:add-bold" />
+                        {{ t('Create Account') }}
                     </UButton>
                 </div>
+
+                <div v-else class="flex flex-col gap-3">
+                    <div class="grid grid-cols-2 gap-5">
+                        <div
+                            class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-4">
+                            <h2 class="text-xl font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
+                                <UIcon name="mdi:domain"
+                                    class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                                {{ t('Company Information') }}
+                            </h2>
+                            <div class="grid grid-cols-1 gap-10">
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+                                    <div>
+                                        <label
+                                            class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{ t('Company Name') }}</label>
+                                        <p class="text-black dark:text-white">{{ customerStore.customer?.companyName || '-'}}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <label
+                                            class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{
+                                            t('Company Email') }}</label>
+                                        <p class="text-black dark:text-white">{{ customerStore.customer?.companyEmail || '-'}}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <label
+                                            class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{ t('REGON')}}</label>
+                                        <p class="text-black dark:text-white">{{ customerStore.customer?.regon || '-' }}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <label
+                                            class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('NIP')}}</label>
+                                        <p class="text-black dark:text-white">{{ customerStore.customer?.nip || '-' }}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <label
+                                            class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('VAT')}}</label>
+                                        <p class="text-black dark:text-white">{{ customerStore.customer?.vat || '-' }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div>
+                                    <h2
+                                        class="text-xl font-semibold text-black dark:text-white mb-2 flex items-center gap-2">
+                                        <UIcon name="mdi:map-marker"
+                                            class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                                        {{ t('Addresses') }}
+                                    </h2>
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label
+                                                class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{{ t('Company Address') }}</label>
+                                            <div v-if="companyAddress"
+                                                class="p-4 bg-white dark:bg-(--black) rounded-md border border-(--border-light) dark:border-(--border-dark)">
+                                                <p class="text-black dark:text-white">{{ companyAddress.street }}</p>
+                                                <p class="text-black dark:text-white">{{ companyAddress.zipCode }},
+                                                    {{ companyAddress.city }}</p>
+                                                <p class="text-black dark:text-white">{{ companyAddress.country }}</p>
+                                            </div>
+                                            <p v-else class="text-gray-400 dark:text-gray-500">-</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex justify-end">
+                        <UButton color="primary" variant="outline"
+                            class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) border-(--accent-blue-light) dark:border-(--accent-blue-dark)"
+                            @click="goToCreateAccount">
+                            <UIcon name="ic:sharp-edit" />
+                            {{ t('Edit Account') }}
+                        </UButton>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
     </component>
 </template>
 
diff --git a/bo/src/components/customer/PageProductsList.vue b/bo/src/components/customer/PageProductsList.vue
index d8bacfa..cf26c4c 100644
--- a/bo/src/components/customer/PageProductsList.vue
+++ b/bo/src/components/customer/PageProductsList.vue
@@ -35,7 +35,7 @@
                             <tr v-for="product in productsList" :key="product.product_id"
                                 class="hover:bg-gray-50 dark:hover:bg-gray-800">
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <img :src="getImageUrl(product.ImageID, product.LinkRewrite,)" alt="product image"
+                                    <img :src="product.ImageID" alt="product image"
                                         class="w-16 h-16 object-cover rounded" />
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{
@@ -49,6 +49,7 @@
                             </tr>
                         </tbody>
                     </table>
+                    <UPagination v-model:page="page" :total="total" :page-size="perPage" />
                     <div v-if="productsList.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
                         No products found
                     </div>
@@ -59,17 +60,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, Suspense } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson'
 import Default from '@/layouts/default.vue'
-// import CategoryMenu from '@/components/inner/categoryMenu.vue'
 interface Product {
     product_id: number
     name: string
-    ImageID: number
+    ImageID: string
     LinkRewrite: string
 }
 
+
+const page = ref(1)
+const perPage = ref(15)
+const total = ref(0)
+
 interface ApiResponse {
     message: string
     items: Product[]
@@ -80,21 +85,26 @@ const productsList = ref<Product[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
 
-function getImageUrl(imageID: number, linkRewrite: string, size: string = 'small_default') {
-    return `https://www.naluconcept.com/${imageID}-${size}/${linkRewrite}.webp`
-}
 async function fetchProductList() {
     loading.value = true
     error.value = null
+
     try {
-        const response = await useFetchJson('/api/v1/restricted/list-products/get-listing?p&elems&shopID=1') as ApiResponse
+        const response = await useFetchJson(
+            `api/v1/restricted/list-products/get-listing?p=${page.value}&elems=${perPage.value}`
+        ) as ApiResponse
+
         productsList.value = response.items || []
+        total.value = response.count || 0
     } catch (e: unknown) {
         error.value = e instanceof Error ? e.message : 'Failed to load products'
-        console.error(e)
     } finally {
         loading.value = false
     }
 }
+
+watch(page, () => {
+    fetchProductList()
+})
 onMounted(fetchProductList)
 </script>
\ No newline at end of file
diff --git a/bo/src/views/RepoChartView.vue b/bo/src/views/RepoChartView.vue
index 122d31b..ed81c31 100644
--- a/bo/src/views/RepoChartView.vue
+++ b/bo/src/views/RepoChartView.vue
@@ -238,7 +238,7 @@ const columns = computed<TableColumn<IssueTimeSummary>[]>(() => [
                 </h2>
                 <UTable :data="issues" :columns="columns" class="flex-1 dark:text-white! text-dark" />
                 <div class="pt-4 flex justify-center items-center dark:text-white! text-dark">
-                    <UPagination v-model:page="page" :total="totalItems" />
+                    <UPagination v-model:page="page" :total="totalItems" :page-size="10" />
                 </div>
             </div>