From c1efcf1b867b406b35ac817dd2ffbb1e6f3ff531 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Fri, 3 Apr 2026 10:55:12 +0200
Subject: [PATCH 01/11] fix: style

---
 bo/src/app.config.ts                          |  2 +-
 bo/src/components/admin/PageProducts.vue      |  3 +--
 bo/src/components/admin/ProductDetailView.vue | 19 ++++++++++++-------
 bo/src/components/inner/CategoryMenu.vue      |  4 +++-
 bo/src/layouts/default.vue                    |  2 +-
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/bo/src/app.config.ts b/bo/src/app.config.ts
index 7e88496..20808f4 100644
--- a/bo/src/app.config.ts
+++ b/bo/src/app.config.ts
@@ -47,7 +47,7 @@ export const uiOptions: NuxtUIOptions = {
         table: {
             slots: {
                 base: 'border! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! bg-(--second-light) dark:bg-(--main-dark)',
-                tr: 'border-b! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! text-(--black)! dark:text-white!',
+                // tr: 'border-b! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! text-(--black)! dark:text-white!',
             }
 
         },
diff --git a/bo/src/components/admin/PageProducts.vue b/bo/src/components/admin/PageProducts.vue
index c6c7efb..00883aa 100644
--- a/bo/src/components/admin/PageProducts.vue
+++ b/bo/src/components/admin/PageProducts.vue
@@ -4,8 +4,7 @@
             <CategoryMenu />
             <div class="w-full flex flex-col items-center gap-4">
                 <UTable :data="productsList" :columns="columns" class="flex-1 w-full" :ui="{
-                    root : 'max-w-100wv overflow-auto!'
-                }" />
+                    root: 'max-w-100wv overflow-auto!' }" />
                 <UPagination v-model:page="page" :total="total" :items-per-page="perPage" />
             </div>
         </div>
diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index 6fec616..ce31ae0 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -7,7 +7,7 @@
     </div>
     <div class="container mx-auto ">
       <div
-        class="gap-4 mb-6 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
+        class="gap-4 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
         <div class="flex items-center justify-between">
           <div class="flex flex-col items-center gap-3" v-if="!isTranslations">
             <USelectMenu v-model="toLangId" :items="langs" value-key="id"
@@ -97,7 +97,7 @@
       </div>
 
       <div v-else-if="productStore.productDescription" class="">
-        <div class="flex items-start gap-30">
+        <div class="flex items-start gap-30 py-8">
           <div class="w-80 h-80 bg-(--second-light) dark:bg-gray-700 rounded-lg flex items-center justify-center">
             <span class="text-gray-500 dark:text-gray-400">Product Image</span>
           </div>
@@ -131,7 +131,7 @@
           root: 'items-start!'
         }">
           <template #description>
-            <div v-if="!isTranslations" class="flex justify-end items-center gap-3 mb-4">
+            <div v-if="!isTranslations" class="flex justify-end items-center gap-3 py-4">
               <UButton v-if="!isEditing" @click="activeTab === 'usage' ? enableEdit() : enableDescriptionEdit()"
                 class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
                 <p class="text-white">Change Text</p>
@@ -154,16 +154,17 @@
                 </template>
               </UEditorToolbar>
             </UEditor>
-            <p v-else v-html="productStore.productDescription.description" class="text-black dark:text-white"></p>
+            <p v-else v-html="productStore.productDescription.description" class="text-black dark:text-white px-7"></p>
           </template>
 
           <template #usage>
             <div class="px-7">
-              <div class="flex justify-end items-center gap-3 mb-4">
+              <div class="flex justify-end items-center gap-3 py-4">
                 <UButton v-if="!isEditing" @click="enableEdit"
                   class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
                   <p class="text-(--text-sky-light) dark:text-(--text-sky-dark)">Change Text</p>
-                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
+                  <UIcon name="material-symbols-light:stylus-note-sharp"
+                    class="text-[30px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                 </UButton>
 
                 <UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline"
@@ -178,7 +179,8 @@
               </div>
 
               <UEditor v-if="isTranslations" v-slot="{ editor }" v-model="productStore.productDescription.usage"
-                content-type="html" :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74" placeholder="Write there ...">
+                content-type="html" :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74"
+                placeholder="Write there ...">
                 <UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
                   <template #link>
                     <EditorLinkPopover :editor="editor" auto-open />
@@ -478,13 +480,16 @@ function removeInlineStylesFromAll(product) {
     const div = document.createElement('div')
     div.innerHTML = html
 
+    const isDark = document.documentElement.classList.contains('dark')
     div.querySelectorAll('*').forEach(el => {
       const bg = el.style.background || el.style.backgroundColor
       if (bg) {
         el.style.background = ''
         el.style.backgroundColor = ''
+        el.style.color = isDark ? 'white' : 'black'
       }
     })
+
     div.querySelectorAll('p').forEach(p => {
       if (p.querySelector('img')) {
         p.style.display = 'flex'
diff --git a/bo/src/components/inner/CategoryMenu.vue b/bo/src/components/inner/CategoryMenu.vue
index 5234d19..7554e5e 100644
--- a/bo/src/components/inner/CategoryMenu.vue
+++ b/bo/src/components/inner/CategoryMenu.vue
@@ -1,5 +1,7 @@
 <template>
-  <UNavigationMenu orientation="vertical" type="single" :items="items" class="data-[orientation=vertical]:w-72" />
+  <UNavigationMenu orientation="vertical" type="single" :items="items" class="data-[orientation=vertical]:w-72" :ui="{
+    root:''
+  }"/>
 </template>
 
 <script setup lang="ts">
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index 4c80154..49a58e2 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -50,7 +50,7 @@
         </div>
       </div>
 
-      <div class="flex-1 p-4 bg-slate-50 h-svh">
+      <div class="flex-1 p-4 bg-slate-50 dark:bg-(--black) h-svh">
         <slot />
       </div>
     </div>

From b7c4b6e3fdd2be4e5d45dcdfad2773ca8e7c9117 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Fri, 3 Apr 2026 11:32:04 +0200
Subject: [PATCH 02/11] fix: store

---
 bo/src/components/TopBar.vue                             | 2 +-
 bo/src/components/TopBarLogin.vue                        | 2 +-
 bo/src/components/admin/ProductDetailView copy.vue       | 2 +-
 bo/src/components/admin/ProductDetailView.vue            | 2 +-
 bo/src/components/customer/CartDetails.vue               | 2 +-
 bo/src/components/customer/PageAddresses.vue             | 2 +-
 bo/src/components/customer/PageCarts.vue                 | 4 ++--
 bo/src/components/customer/PageProfileDetails.vue        | 2 +-
 bo/src/components/customer/PageProfileDetailsAddInfo.vue | 4 ++--
 bo/src/components/inner/ThemeSwitch.vue                  | 2 +-
 bo/src/composable/useFetchJson.ts                        | 2 +-
 bo/src/layouts/default.vue                               | 2 +-
 bo/src/router/index.ts                                   | 2 +-
 bo/src/stores/{ => admin}/category.ts                    | 0
 bo/src/stores/{ => admin}/customer.ts                    | 2 +-
 bo/src/stores/{ => admin}/product.ts                     | 0
 bo/src/stores/{ => admin}/settings.ts                    | 0
 bo/src/stores/{ => admin}/theme.ts                       | 0
 bo/src/stores/{ => user}/address.ts                      | 0
 bo/src/stores/{ => user}/auth.ts                         | 0
 bo/src/stores/{ => user}/cart.ts                         | 0
 bo/src/views/CategoryView.vue                            | 2 +-
 bo/src/views/LoginView.vue                               | 2 +-
 bo/src/views/PasswordRecoveryView.vue                    | 2 +-
 bo/src/views/RegisterView.vue                            | 2 +-
 bo/src/views/RepoChartView.vue                           | 2 +-
 bo/src/views/ResetPasswordForm.vue                       | 2 +-
 27 files changed, 22 insertions(+), 22 deletions(-)
 rename bo/src/stores/{ => admin}/category.ts (100%)
 rename bo/src/stores/{ => admin}/customer.ts (95%)
 rename bo/src/stores/{ => admin}/product.ts (100%)
 rename bo/src/stores/{ => admin}/settings.ts (100%)
 rename bo/src/stores/{ => admin}/theme.ts (100%)
 rename bo/src/stores/{ => user}/address.ts (100%)
 rename bo/src/stores/{ => user}/auth.ts (100%)
 rename bo/src/stores/{ => user}/cart.ts (100%)

diff --git a/bo/src/components/TopBar.vue b/bo/src/components/TopBar.vue
index 927feb5..f4d87d9 100644
--- a/bo/src/components/TopBar.vue
+++ b/bo/src/components/TopBar.vue
@@ -38,7 +38,7 @@
 import { useFetchJson } from '@/composable/useFetchJson'
 import LangSwitch from './inner/LangSwitch.vue'
 import ThemeSwitch from './inner/ThemeSwitch.vue'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore } from '@/stores/user/auth'
 import { computed, ref } from 'vue'
 import { currentLang } from '@/router/langs'
 import type { LabelTrans, TopMenuItem } from '@/types'
diff --git a/bo/src/components/TopBarLogin.vue b/bo/src/components/TopBarLogin.vue
index d1820b9..3518837 100644
--- a/bo/src/components/TopBarLogin.vue
+++ b/bo/src/components/TopBarLogin.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import LangSwitch from './inner/LangSwitch.vue'
 import ThemeSwitch from './inner/ThemeSwitch.vue'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore } from '@/stores/user/auth'
 
 const authStore = useAuthStore()
 </script>
diff --git a/bo/src/components/admin/ProductDetailView copy.vue b/bo/src/components/admin/ProductDetailView copy.vue
index aacca62..c0934ff 100644
--- a/bo/src/components/admin/ProductDetailView copy.vue	
+++ b/bo/src/components/admin/ProductDetailView copy.vue	
@@ -198,7 +198,7 @@ import { useEditable } from '@/composable/useConteditable';
 import Default from '@/layouts/default.vue';
 import { langs } from '@/router/langs';
 import { useProductStore } from '@/stores/product';
-import { useSettingsStore } from '@/stores/settings';
+import { useSettingsStore } from '@/stores/admin/settings';
 import type { EditorToolbarItem } from '@nuxt/ui';
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index 9ebd902..caf5763 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -202,7 +202,7 @@ import { useEditable } from '@/composable/useConteditable';
 import Default from '@/layouts/default.vue';
 import { langs } from '@/router/langs';
 import { useProductStore } from '@/stores/product';
-import { useSettingsStore } from '@/stores/settings';
+import { useSettingsStore } from '@/stores/admin/settings';
 import type { EditorToolbarItem } from '@nuxt/ui';
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
diff --git a/bo/src/components/customer/CartDetails.vue b/bo/src/components/customer/CartDetails.vue
index 261755d..92d9c8b 100644
--- a/bo/src/components/customer/CartDetails.vue
+++ b/bo/src/components/customer/CartDetails.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { useCartStore } from '@/stores/cart'
+import { useCartStore } from '@/stores/user/cart'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
diff --git a/bo/src/components/customer/PageAddresses.vue b/bo/src/components/customer/PageAddresses.vue
index 3e2dc2f..742432f 100644
--- a/bo/src/components/customer/PageAddresses.vue
+++ b/bo/src/components/customer/PageAddresses.vue
@@ -104,7 +104,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { useAddressStore } from '@/stores/address'
+import { useAddressStore } from '@/stores/user/address'
 import { useI18n } from 'vue-i18n'
 import Default from '@/layouts/default.vue'
 const addressStore = useAddressStore()
diff --git a/bo/src/components/customer/PageCarts.vue b/bo/src/components/customer/PageCarts.vue
index 4e3d43f..149d2f8 100644
--- a/bo/src/components/customer/PageCarts.vue
+++ b/bo/src/components/customer/PageCarts.vue
@@ -152,8 +152,8 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { useCartStore } from '@/stores/cart'
-import { useAddressStore } from '@/stores/address'
+import { useCartStore } from '@/stores/user/cart'
+import { useAddressStore } from '@/stores/user/address'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import Default from '@/layouts/default.vue'
diff --git a/bo/src/components/customer/PageProfileDetails.vue b/bo/src/components/customer/PageProfileDetails.vue
index ef345c0..a1dabd8 100644
--- a/bo/src/components/customer/PageProfileDetails.vue
+++ b/bo/src/components/customer/PageProfileDetails.vue
@@ -104,7 +104,7 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCustomerStore } from '@/stores/customer'
-import { useAddressStore } from '@/stores/address'
+import { useAddressStore } from '@/stores/user/address'
 import { useI18n } from 'vue-i18n'
 import Default from '@/layouts/default.vue'
 const router = useRouter()
diff --git a/bo/src/components/customer/PageProfileDetailsAddInfo.vue b/bo/src/components/customer/PageProfileDetailsAddInfo.vue
index 4b2a660..b7fcd10 100644
--- a/bo/src/components/customer/PageProfileDetailsAddInfo.vue
+++ b/bo/src/components/customer/PageProfileDetailsAddInfo.vue
@@ -116,9 +116,9 @@
 import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCustomerStore } from '@/stores/customer'
-import { useAddressStore } from '@/stores/address'
+import { useAddressStore } from '@/stores/user/address'
 import { useI18n } from 'vue-i18n'
-import { useCartStore } from '@/stores/cart'
+import { useCartStore } from '@/stores/user/cart'
 import Default from '@/layouts/default.vue'
 const router = useRouter()
 const customerStore = useCustomerStore()
diff --git a/bo/src/components/inner/ThemeSwitch.vue b/bo/src/components/inner/ThemeSwitch.vue
index bfed4ba..4963f0c 100644
--- a/bo/src/components/inner/ThemeSwitch.vue
+++ b/bo/src/components/inner/ThemeSwitch.vue
@@ -32,6 +32,6 @@
 </template>
 
 <script setup lang="ts">
-import { useThemeStore } from '@/stores/theme'
+import { useThemeStore } from '@/stores/admin/theme'
 const themeStorage = useThemeStore()
 </script>
diff --git a/bo/src/composable/useFetchJson.ts b/bo/src/composable/useFetchJson.ts
index b181497..455b6ff 100644
--- a/bo/src/composable/useFetchJson.ts
+++ b/bo/src/composable/useFetchJson.ts
@@ -29,7 +29,7 @@ export async function useFetchJson<T = unknown>(url: string, opt?: RequestInit):
 
     // Handle 401 — access token expired; try to refresh via the HTTPOnly refresh_token cookie
     if (res.status === 401) {
-      const { useAuthStore } = await import('@/stores/auth')
+      const { useAuthStore } = await import('@/stores/user/auth')
       const authStore = useAuthStore()
 
       const refreshed = await authStore.refreshAccessToken()
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index bdd47f7..147aed6 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -156,7 +156,7 @@ function getItems(state: 'collapsed' | 'expanded') {
 import { useRouter } from 'vue-router'
 import { currentLang } from '@/router/langs'
 import { useFetchJson } from '@/composable/useFetchJson'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore } from '@/stores/user/auth'
 import CountryCurrencySwitch from '@/components/inner/CountryCurrencySwitch.vue'
 import LangSwitch from '@/components/inner/LangSwitch.vue'
 import ThemeSwitch from '@/components/inner/ThemeSwitch.vue'
diff --git a/bo/src/router/index.ts b/bo/src/router/index.ts
index 745d15e..8674008 100644
--- a/bo/src/router/index.ts
+++ b/bo/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { currentLang, langs, switchLocalization } from './langs'
 import { getSettings } from './settings'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore } from '@/stores/user/auth'
 import { getRoutes } from './menu'
 
 function isAuthenticated(): boolean {
diff --git a/bo/src/stores/category.ts b/bo/src/stores/admin/category.ts
similarity index 100%
rename from bo/src/stores/category.ts
rename to bo/src/stores/admin/category.ts
diff --git a/bo/src/stores/customer.ts b/bo/src/stores/admin/customer.ts
similarity index 95%
rename from bo/src/stores/customer.ts
rename to bo/src/stores/admin/customer.ts
index eefaa08..5e5ca08 100644
--- a/bo/src/stores/customer.ts
+++ b/bo/src/stores/admin/customer.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import type { Address } from './address'
+import type { Address } from './user/address'
 
 export interface CustomerData {
   companyName: string
diff --git a/bo/src/stores/product.ts b/bo/src/stores/admin/product.ts
similarity index 100%
rename from bo/src/stores/product.ts
rename to bo/src/stores/admin/product.ts
diff --git a/bo/src/stores/settings.ts b/bo/src/stores/admin/settings.ts
similarity index 100%
rename from bo/src/stores/settings.ts
rename to bo/src/stores/admin/settings.ts
diff --git a/bo/src/stores/theme.ts b/bo/src/stores/admin/theme.ts
similarity index 100%
rename from bo/src/stores/theme.ts
rename to bo/src/stores/admin/theme.ts
diff --git a/bo/src/stores/address.ts b/bo/src/stores/user/address.ts
similarity index 100%
rename from bo/src/stores/address.ts
rename to bo/src/stores/user/address.ts
diff --git a/bo/src/stores/auth.ts b/bo/src/stores/user/auth.ts
similarity index 100%
rename from bo/src/stores/auth.ts
rename to bo/src/stores/user/auth.ts
diff --git a/bo/src/stores/cart.ts b/bo/src/stores/user/cart.ts
similarity index 100%
rename from bo/src/stores/cart.ts
rename to bo/src/stores/user/cart.ts
diff --git a/bo/src/views/CategoryView.vue b/bo/src/views/CategoryView.vue
index d6ceab7..a2c1639 100644
--- a/bo/src/views/CategoryView.vue
+++ b/bo/src/views/CategoryView.vue
@@ -20,7 +20,7 @@
 <script setup lang="ts">
 // import { useRoute } from 'vue-router';
 import Default from '@/layouts/default.vue';
-import { useCategoryStore } from '@/stores/category';
+import { useCategoryStore } from '@/stores/admin/category';
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 // const route = useRoute()
diff --git a/bo/src/views/LoginView.vue b/bo/src/views/LoginView.vue
index 78f1981..510f84c 100644
--- a/bo/src/views/LoginView.vue
+++ b/bo/src/views/LoginView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore } from '@/stores/user/auth'
 import { useValidation } from '@/composable/useValidation'
 import type { FormError } from '@nuxt/ui'
 import { i18n } from '@/plugins/02_i18n'
diff --git a/bo/src/views/PasswordRecoveryView.vue b/bo/src/views/PasswordRecoveryView.vue
index 1b75201..8311c44 100644
--- a/bo/src/views/PasswordRecoveryView.vue
+++ b/bo/src/views/PasswordRecoveryView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore } from '@/stores/user/auth'
 import { useValidation } from '@/composable/useValidation'
 import type { FormError } from '@nuxt/ui'
 import { i18n } from '@/plugins/02_i18n'
diff --git a/bo/src/views/RegisterView.vue b/bo/src/views/RegisterView.vue
index 12a6322..4dc736c 100644
--- a/bo/src/views/RegisterView.vue
+++ b/bo/src/views/RegisterView.vue
@@ -117,7 +117,7 @@
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent } from 'vue'
 import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore } from '@/stores/user/auth'
 import { useValidation } from '@/composable/useValidation'
 import type { FormError } from '@nuxt/ui'
 import { useI18n } from 'vue-i18n'
diff --git a/bo/src/views/RepoChartView.vue b/bo/src/views/RepoChartView.vue
index ff76512..59050e4 100644
--- a/bo/src/views/RepoChartView.vue
+++ b/bo/src/views/RepoChartView.vue
@@ -11,7 +11,7 @@ import {
     LinearScale,
 } from 'chart.js'
 import { getYears, getQuarters, getIssues, type QuarterData, type IssueTimeSummary } from '@/composable/useRepoApi'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore } from '@/stores/user/auth'
 import { i18n } from '@/plugins/02_i18n'
 import type { TableColumn } from '@nuxt/ui'
 import { useI18n } from 'vue-i18n'
diff --git a/bo/src/views/ResetPasswordForm.vue b/bo/src/views/ResetPasswordForm.vue
index 922c4b0..00d12c1 100644
--- a/bo/src/views/ResetPasswordForm.vue
+++ b/bo/src/views/ResetPasswordForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
+import { useAuthStore } from '@/stores/user/auth'
 import { useValidation } from '@/composable/useValidation'
 import type { FormError } from '@nuxt/ui'
 import { i18n } from '@/plugins/02_i18n'

From 2f7e313c9561a1d2d6eb98621415577f4fd93304 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Fri, 3 Apr 2026 15:53:31 +0200
Subject: [PATCH 03/11] fix: user info

---
 bo/src/App.vue                                | 35 ++-----------------
 bo/src/components/TopBar.vue                  |  2 +-
 bo/src/components/TopBarLogin.vue             |  2 +-
 bo/src/components/admin/ProductDetailView.vue |  2 +-
 bo/src/components/customer/CartDetails.vue    |  2 +-
 bo/src/components/customer/PageAddresses.vue  |  2 +-
 bo/src/components/customer/PageCarts.vue      |  4 +--
 .../customer/PageProfileDetails.vue           |  2 +-
 .../customer/PageProfileDetailsAddInfo.vue    |  4 +--
 bo/src/composable/useFetchJson.ts             |  2 +-
 bo/src/layouts/default.vue                    | 21 ++++++-----
 bo/src/router/index.ts                        |  2 +-
 bo/src/stores/admin/customer.ts               |  1 -
 bo/src/stores/{user => customer}/address.ts   |  0
 bo/src/stores/{user => customer}/auth.ts      |  6 +++-
 bo/src/stores/{user => customer}/cart.ts      |  0
 bo/src/stores/user.ts                         | 32 +++++++++++++++++
 bo/src/types/user.d.ts                        | 15 ++++++++
 bo/src/views/LoginView.vue                    |  2 +-
 bo/src/views/PasswordRecoveryView.vue         |  2 +-
 bo/src/views/RegisterView.vue                 |  2 +-
 bo/src/views/RepoChartView.vue                |  2 +-
 bo/src/views/ResetPasswordForm.vue            |  2 +-
 23 files changed, 82 insertions(+), 62 deletions(-)
 rename bo/src/stores/{user => customer}/address.ts (100%)
 rename bo/src/stores/{user => customer}/auth.ts (97%)
 rename bo/src/stores/{user => customer}/cart.ts (100%)
 create mode 100644 bo/src/stores/user.ts
 create mode 100644 bo/src/types/user.d.ts

diff --git a/bo/src/App.vue b/bo/src/App.vue
index 54265cd..8596791 100644
--- a/bo/src/App.vue
+++ b/bo/src/App.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { TooltipProvider } from 'reka-ui'
 import { RouterView } from 'vue-router'
+import { useAuthStore } from './stores/customer/auth'
+
+const authStore = useAuthStore()
 </script>
 
 <template>
@@ -12,35 +15,3 @@ import { RouterView } from 'vue-router'
 </template>
 
 
-<!-- <template>
-  <component :is="layoutComponent">
-    <Suspense>
-      <RouterView />
-    </Suspense>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-
-import DefaultLayout from '@/layouts/default.vue'
-import EmptyLayout from '@/layouts/empty.vue'
-
-const route = useRoute()
-
-const layouts = {
-  default: DefaultLayout,
-  auth: EmptyLayout
-}
-
-console.log(route.fullPath)
-console.log(route.name)
-console.log(route.matched)
-
-const layoutComponent = computed(() => {
-  console.log(route.meta);
-
-  return layouts[route.meta.layout as keyof typeof layouts] || DefaultLayout
-})
-</script> -->
diff --git a/bo/src/components/TopBar.vue b/bo/src/components/TopBar.vue
index f4d87d9..0fb84d5 100644
--- a/bo/src/components/TopBar.vue
+++ b/bo/src/components/TopBar.vue
@@ -38,7 +38,7 @@
 import { useFetchJson } from '@/composable/useFetchJson'
 import LangSwitch from './inner/LangSwitch.vue'
 import ThemeSwitch from './inner/ThemeSwitch.vue'
-import { useAuthStore } from '@/stores/user/auth'
+import { useAuthStore } from '@/stores/customer/auth'
 import { computed, ref } from 'vue'
 import { currentLang } from '@/router/langs'
 import type { LabelTrans, TopMenuItem } from '@/types'
diff --git a/bo/src/components/TopBarLogin.vue b/bo/src/components/TopBarLogin.vue
index 3518837..921aa04 100644
--- a/bo/src/components/TopBarLogin.vue
+++ b/bo/src/components/TopBarLogin.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import LangSwitch from './inner/LangSwitch.vue'
 import ThemeSwitch from './inner/ThemeSwitch.vue'
-import { useAuthStore } from '@/stores/user/auth'
+import { useAuthStore } from '@/stores/customer/auth'
 
 const authStore = useAuthStore()
 </script>
diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index caf5763..43d187a 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -201,7 +201,7 @@
 import { useEditable } from '@/composable/useConteditable';
 import Default from '@/layouts/default.vue';
 import { langs } from '@/router/langs';
-import { useProductStore } from '@/stores/product';
+import { useProductStore } from '@/stores/admin/product';
 import { useSettingsStore } from '@/stores/admin/settings';
 import type { EditorToolbarItem } from '@nuxt/ui';
 import { onMounted, ref, watch } from 'vue';
diff --git a/bo/src/components/customer/CartDetails.vue b/bo/src/components/customer/CartDetails.vue
index 92d9c8b..4fef8a8 100644
--- a/bo/src/components/customer/CartDetails.vue
+++ b/bo/src/components/customer/CartDetails.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { useCartStore } from '@/stores/user/cart'
+import { useCartStore } from '@/stores/customer/cart'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
diff --git a/bo/src/components/customer/PageAddresses.vue b/bo/src/components/customer/PageAddresses.vue
index 742432f..8806f5c 100644
--- a/bo/src/components/customer/PageAddresses.vue
+++ b/bo/src/components/customer/PageAddresses.vue
@@ -104,7 +104,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { useAddressStore } from '@/stores/user/address'
+import { useAddressStore } from '@/stores/customer/address'
 import { useI18n } from 'vue-i18n'
 import Default from '@/layouts/default.vue'
 const addressStore = useAddressStore()
diff --git a/bo/src/components/customer/PageCarts.vue b/bo/src/components/customer/PageCarts.vue
index 149d2f8..2c5a1d9 100644
--- a/bo/src/components/customer/PageCarts.vue
+++ b/bo/src/components/customer/PageCarts.vue
@@ -152,8 +152,8 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { useCartStore } from '@/stores/user/cart'
-import { useAddressStore } from '@/stores/user/address'
+import { useCartStore } from '@/stores/customer/cart'
+import { useAddressStore } from '@/stores/customer/address'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import Default from '@/layouts/default.vue'
diff --git a/bo/src/components/customer/PageProfileDetails.vue b/bo/src/components/customer/PageProfileDetails.vue
index a1dabd8..3617cf6 100644
--- a/bo/src/components/customer/PageProfileDetails.vue
+++ b/bo/src/components/customer/PageProfileDetails.vue
@@ -104,7 +104,7 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCustomerStore } from '@/stores/customer'
-import { useAddressStore } from '@/stores/user/address'
+import { useAddressStore } from '@/stores/customer/address'
 import { useI18n } from 'vue-i18n'
 import Default from '@/layouts/default.vue'
 const router = useRouter()
diff --git a/bo/src/components/customer/PageProfileDetailsAddInfo.vue b/bo/src/components/customer/PageProfileDetailsAddInfo.vue
index b7fcd10..496f22c 100644
--- a/bo/src/components/customer/PageProfileDetailsAddInfo.vue
+++ b/bo/src/components/customer/PageProfileDetailsAddInfo.vue
@@ -116,9 +116,9 @@
 import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCustomerStore } from '@/stores/customer'
-import { useAddressStore } from '@/stores/user/address'
+import { useAddressStore } from '@/stores/customer/address'
 import { useI18n } from 'vue-i18n'
-import { useCartStore } from '@/stores/user/cart'
+import { useCartStore } from '@/stores/customer/cart'
 import Default from '@/layouts/default.vue'
 const router = useRouter()
 const customerStore = useCustomerStore()
diff --git a/bo/src/composable/useFetchJson.ts b/bo/src/composable/useFetchJson.ts
index 455b6ff..867f3f1 100644
--- a/bo/src/composable/useFetchJson.ts
+++ b/bo/src/composable/useFetchJson.ts
@@ -29,7 +29,7 @@ export async function useFetchJson<T = unknown>(url: string, opt?: RequestInit):
 
     // Handle 401 — access token expired; try to refresh via the HTTPOnly refresh_token cookie
     if (res.status === 401) {
-      const { useAuthStore } = await import('@/stores/user/auth')
+      const { useAuthStore } = await import('../stores/customer/auth')
       const authStore = useAuthStore()
 
       const refreshed = await authStore.refreshAccessToken()
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index d1431c8..425d895 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -24,11 +24,12 @@
       <template #footer>
         <UDropdownMenu :items="userItems" :content="{ align: 'center', collisionPadding: 12 }"
           :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }">
-          <UButton v-bind="user" :label="user?.name" trailing-icon="i-lucide-chevrons-up-down" color="neutral"
+          <UButton  v-bind="userStore.user" :label="userStore.user?.email" trailing-icon="i-lucide-chevrons-up-down" color="neutral"
             variant="ghost" square class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
               trailingIcon: 'text-dimmed ms-auto'
             }" />
         </UDropdownMenu>
+        <!-- first_name: '', last_name: '' -->
       </template>
     </USidebar>
 
@@ -63,10 +64,14 @@ import { ref, computed, onMounted } from 'vue'
 import { useColorMode } from '@vueuse/core'
 import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
 import { defineShortcuts, extractShortcuts } from '@nuxt/ui/runtime/composables/defineShortcuts.js'
-import { LabelTrans, TopMenuItem } from '@/types'
+import { useAuthStore } from '../stores/customer/auth'
+
+const authStore = useAuthStore()
+const userStore = useUserStore()
+
+await userStore.getUser()
 
 const open = ref(true)
-const authStore = useAuthStore()
 const colorMode = useColorMode()
 
 const teams = ref([
@@ -156,10 +161,11 @@ function getItems(state: 'collapsed' | 'expanded') {
 import { useRouter } from 'vue-router'
 import { currentLang } from '@/router/langs'
 import { useFetchJson } from '@/composable/useFetchJson'
-import { useAuthStore } from '@/stores/user/auth'
 import CountryCurrencySwitch from '@/components/inner/CountryCurrencySwitch.vue'
 import LangSwitch from '@/components/inner/LangSwitch.vue'
 import ThemeSwitch from '@/components/inner/ThemeSwitch.vue'
+import type { LabelTrans, TopMenuItem } from '@/types'
+import { useUserStore } from '@/stores/user'
 
 
 const router = useRouter()
@@ -217,13 +223,6 @@ function transformMenu(
   })
 }
 
-const user = ref({
-  name: 'Benjamin Canac',
-  avatar: {
-    src: 'https://github.com/benjamincanac.png',
-    alt: 'Benjamin Canac'
-  }
-})
 
 const userItems = computed<DropdownMenuItem[][]>(() => [
   [
diff --git a/bo/src/router/index.ts b/bo/src/router/index.ts
index 8674008..be6d4c8 100644
--- a/bo/src/router/index.ts
+++ b/bo/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { currentLang, langs, switchLocalization } from './langs'
 import { getSettings } from './settings'
-import { useAuthStore } from '@/stores/user/auth'
+import { useAuthStore } from '@/stores/customer/auth'
 import { getRoutes } from './menu'
 
 function isAuthenticated(): boolean {
diff --git a/bo/src/stores/admin/customer.ts b/bo/src/stores/admin/customer.ts
index 5e5ca08..962ded0 100644
--- a/bo/src/stores/admin/customer.ts
+++ b/bo/src/stores/admin/customer.ts
@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import type { Address } from './user/address'
 
 export interface CustomerData {
   companyName: string
diff --git a/bo/src/stores/user/address.ts b/bo/src/stores/customer/address.ts
similarity index 100%
rename from bo/src/stores/user/address.ts
rename to bo/src/stores/customer/address.ts
diff --git a/bo/src/stores/user/auth.ts b/bo/src/stores/customer/auth.ts
similarity index 97%
rename from bo/src/stores/user/auth.ts
rename to bo/src/stores/customer/auth.ts
index 3afea09..2c33095 100644
--- a/bo/src/stores/user/auth.ts
+++ b/bo/src/stores/customer/auth.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson'
+import { useUserStore } from '../user'
 
 export interface User {
   id: string
@@ -41,6 +42,8 @@ export const useAuthStore = defineStore('auth', () => {
     _isAuthenticated.value = readIsAuthenticatedCookie()
   }
 
+//   const auth = useAuthStore()
+// const userStore = useUserStore()
   async function login(email: string, password: string) {
     loading.value = true
     error.value = null
@@ -60,6 +63,7 @@ export const useAuthStore = defineStore('auth', () => {
 
       user.value = response.user
       _syncAuthState()
+      //   await userStore.getUser()
 
       return true
     } catch (e: any) {
@@ -99,7 +103,7 @@ export const useAuthStore = defineStore('auth', () => {
     error.value = null
     try {
       const body: any = { first_name, last_name, email, password, confirm_password, lang: lang || 'en' }
-      
+
       // Add company information if provided
       if (company_name) body.company_name = company_name
       if (company_email) body.company_email = company_email
diff --git a/bo/src/stores/user/cart.ts b/bo/src/stores/customer/cart.ts
similarity index 100%
rename from bo/src/stores/user/cart.ts
rename to bo/src/stores/customer/cart.ts
diff --git a/bo/src/stores/user.ts b/bo/src/stores/user.ts
new file mode 100644
index 0000000..88f61b2
--- /dev/null
+++ b/bo/src/stores/user.ts
@@ -0,0 +1,32 @@
+import type { User } from '@/types/user'
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { useFetchJson } from '@/composable/useFetchJson'
+
+export const useUserStore = defineStore('user', () => {
+    const error = ref<string | null>(null)
+    const user = ref<User | null>(null)
+
+    async function getUser() {
+        error.value = null
+        try {
+            const data = await useFetchJson<User>(`/api/v1/restricted/customer`)
+            console.log('getUser API response:', data)
+
+            const response: User = (data as any).items ?? data
+            console.log('User response:', response)
+            user.value = response
+
+            return response
+        } catch (err: any) {
+            error.value = err?.message ?? 'Unknown error'
+            return null
+        }
+    }
+
+    return {
+        error,
+        user,
+        getUser
+    }
+})
\ No newline at end of file
diff --git a/bo/src/types/user.d.ts b/bo/src/types/user.d.ts
new file mode 100644
index 0000000..d054444
--- /dev/null
+++ b/bo/src/types/user.d.ts
@@ -0,0 +1,15 @@
+
+export interface User {
+    id: string
+    email: string
+    name: string
+    first_name?: string
+    last_name?: string
+    company_name?: string
+    company_email?: string
+    company_address?: Address
+    billing_address?: Address
+    regon?: string
+    nip?: string
+    vat?: string
+}
diff --git a/bo/src/views/LoginView.vue b/bo/src/views/LoginView.vue
index 510f84c..51f0de4 100644
--- a/bo/src/views/LoginView.vue
+++ b/bo/src/views/LoginView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useAuthStore } from '@/stores/user/auth'
+import { useAuthStore } from '@/stores/customer/auth'
 import { useValidation } from '@/composable/useValidation'
 import type { FormError } from '@nuxt/ui'
 import { i18n } from '@/plugins/02_i18n'
diff --git a/bo/src/views/PasswordRecoveryView.vue b/bo/src/views/PasswordRecoveryView.vue
index 8311c44..958e90e 100644
--- a/bo/src/views/PasswordRecoveryView.vue
+++ b/bo/src/views/PasswordRecoveryView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/stores/user/auth'
+import { useAuthStore } from '@/stores/customer/auth'
 import { useValidation } from '@/composable/useValidation'
 import type { FormError } from '@nuxt/ui'
 import { i18n } from '@/plugins/02_i18n'
diff --git a/bo/src/views/RegisterView.vue b/bo/src/views/RegisterView.vue
index 4dc736c..8484ee9 100644
--- a/bo/src/views/RegisterView.vue
+++ b/bo/src/views/RegisterView.vue
@@ -117,7 +117,7 @@
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent } from 'vue'
 import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/stores/user/auth'
+import { useAuthStore } from '@/stores/customer/auth'
 import { useValidation } from '@/composable/useValidation'
 import type { FormError } from '@nuxt/ui'
 import { useI18n } from 'vue-i18n'
diff --git a/bo/src/views/RepoChartView.vue b/bo/src/views/RepoChartView.vue
index 59050e4..c94fdc0 100644
--- a/bo/src/views/RepoChartView.vue
+++ b/bo/src/views/RepoChartView.vue
@@ -11,7 +11,7 @@ import {
     LinearScale,
 } from 'chart.js'
 import { getYears, getQuarters, getIssues, type QuarterData, type IssueTimeSummary } from '@/composable/useRepoApi'
-import { useAuthStore } from '@/stores/user/auth'
+import { useAuthStore } from '@/stores/customer/auth'
 import { i18n } from '@/plugins/02_i18n'
 import type { TableColumn } from '@nuxt/ui'
 import { useI18n } from 'vue-i18n'
diff --git a/bo/src/views/ResetPasswordForm.vue b/bo/src/views/ResetPasswordForm.vue
index 00d12c1..61c2c5c 100644
--- a/bo/src/views/ResetPasswordForm.vue
+++ b/bo/src/views/ResetPasswordForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useAuthStore } from '@/stores/user/auth'
+import { useAuthStore } from '@/stores/customer/auth'
 import { useValidation } from '@/composable/useValidation'
 import type { FormError } from '@nuxt/ui'
 import { i18n } from '@/plugins/02_i18n'

From 2f4ccbaf924389f6a734e7bf844d24759391ce63 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Tue, 7 Apr 2026 08:01:21 +0200
Subject: [PATCH 04/11] fix: import

---
 bo/src/components/admin/ProductDetailView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index 55a9fa1..211de17 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -148,8 +148,8 @@
 <script setup lang="ts">
 import Default from '@/layouts/default.vue';
 import { langs } from '@/router/langs';
-import { useProductStore } from '@/stores/product';
-import { useSettingsStore } from '@/stores/settings';
+import { useProductStore } from '@/stores/admin/product';
+import { useSettingsStore } from '@/stores/admin/settings';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import ProductEditor from '../inner/ProductEditor.vue';

From a874a063d888efd61ec9007ce2abed91301492d5 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Tue, 7 Apr 2026 10:06:36 +0200
Subject: [PATCH 05/11] fix: page usersList

---
 bo/components.d.ts                    |  1 +
 bo/src/components/admin/UsersList.vue | 39 +++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 bo/src/components/admin/UsersList.vue

diff --git a/bo/components.d.ts b/bo/components.d.ts
index c9bf5aa..4d5950b 100644
--- a/bo/components.d.ts
+++ b/bo/components.d.ts
@@ -60,6 +60,7 @@ declare module 'vue' {
     UPagination: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Pagination.vue')['default']
     USelect: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Select.vue')['default']
     USelectMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue')['default']
+    UsersList: typeof import('./src/components/admin/UsersList.vue')['default']
     USidebar: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Sidebar.vue')['default']
     UTable: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Table.vue')['default']
     UTabs: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Tabs.vue')['default']
diff --git a/bo/src/components/admin/UsersList.vue b/bo/src/components/admin/UsersList.vue
new file mode 100644
index 0000000..e122b0e
--- /dev/null
+++ b/bo/src/components/admin/UsersList.vue
@@ -0,0 +1,39 @@
+<template>
+    <component :is="Default || 'div'">
+        <div class="flex flex-col md:flex-row gap-10">
+            <CategoryMenu />
+            <div class="w-full flex flex-col items-center gap-4">
+            </div>
+        </div>
+    </component>
+</template>
+
+<script setup lang="ts">
+import Default from '@/layouts/default.vue';
+import { onMounted, ref} from 'vue'
+import { useFetchJson } from '@/composable/useFetchJson';
+
+const usersList = ref([])
+const error=ref()
+
+async function fetchUsersList() {
+    error.value = null
+    try {
+        const data = await useFetchJson(`/api/v1/restricted/customer/list`)
+        console.log('USERS LIST:', data)
+
+        const response = (data as any).items ?? data
+        console.log('User list response:', response)
+        usersList.value = response
+
+        return response
+    } catch (err: any) {
+        error.value = err?.message ?? 'Unknown error'
+        return null
+    }
+}
+
+onMounted( ()=>{
+    fetchUsersList()
+})
+</script>
\ No newline at end of file

From a290a72d1d3d057d87a4404b6d3306484a64a1fe Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Tue, 7 Apr 2026 13:54:08 +0200
Subject: [PATCH 06/11] fix: style

---
 bo/src/components/admin/UsersList.vue | 232 +++++++++++++++++++++++++-
 1 file changed, 229 insertions(+), 3 deletions(-)

diff --git a/bo/src/components/admin/UsersList.vue b/bo/src/components/admin/UsersList.vue
index e122b0e..79d98ab 100644
--- a/bo/src/components/admin/UsersList.vue
+++ b/bo/src/components/admin/UsersList.vue
@@ -10,11 +10,14 @@
 
 <script setup lang="ts">
 import Default from '@/layouts/default.vue';
-import { onMounted, ref} from 'vue'
+import { computed, onMounted, ref, resolveComponent, h } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson';
+import type { TableColumn } from '@nuxt/ui';
+import type { Product } from '@/types/product';
+import { useRoute, useRouter } from 'vue-router';
 
 const usersList = ref([])
-const error=ref()
+const error = ref()
 
 async function fetchUsersList() {
     error.value = null
@@ -33,7 +36,230 @@ async function fetchUsersList() {
     }
 }
 
-onMounted( ()=>{
+onMounted(() => {
     fetchUsersList()
 })
+
+const router = useRouter()
+const route = useRoute()
+
+const sortField = computed({
+    get: () => [
+        route.query.sort as string | undefined,
+        route.query.direction as 'asc' | 'desc' | undefined
+    ],
+
+    set: ([sort]: [string, 'asc' | 'desc']) => {
+        const currentSort = route.query.sort as string | undefined
+        const currentDirection = route.query.direction as 'asc' | 'desc' | undefined
+
+        let query = { ...route.query }
+
+        if (currentSort === sort) {
+            if (currentDirection === 'asc') {
+                query.direction = 'desc'
+            } else if (currentDirection === 'desc') {
+                delete query.sort
+                delete query.direction
+            } else {
+                query.direction = 'asc'
+                query.sort = sort
+            }
+        } else {
+            query.sort = sort
+            query.direction = 'asc'
+        }
+
+        router.push({ query })
+    }
+})
+
+function getIcon(name: string) {
+    if (sortField.value[0] === name) {
+        if (sortField.value[1] === 'asc') return 'i-lucide-arrow-up-narrow-wide'
+        if (sortField.value[1] === 'desc') return 'i-lucide-arrow-down-wide-narrow'
+    }
+    return 'i-lucide-arrow-up-down'
+}
+
+const UInputNumber = resolveComponent('UInputNumber')
+const UInput = resolveComponent('UInput')
+const UButton = resolveComponent('UButton')
+const UIcon = resolveComponent('UIcon')
+
+const updateFilter = debounce((columnId: string, val: string) => {
+    const newFilters = { ...filters.value }
+
+    if (val) newFilters[columnId] = val
+    else delete newFilters[columnId]
+
+    filters.value = newFilters
+}, 400)
+
+const filters = computed<Record<string, string>>({
+    get: () => {
+        const q = { ...route.query }
+        delete q.page
+        delete q.sort
+        delete q.direction
+        return q as Record<string, string>
+    },
+    set: (val) => {
+        const baseQuery = { ...route.query }
+
+        Object.keys(baseQuery).forEach(key => {
+            if (!['page', 'sort', 'direction'].includes(key)) {
+                delete baseQuery[key]
+            }
+        })
+
+        router.push({
+            query: {
+                ...baseQuery,
+                ...val,
+                page: 1
+            }
+        })
+    }
+})
+
+import errorImg from '@/assets/error.svg'
+import { debounce } from 'chart.js/helpers';
+const columns: TableColumn<Product>[] = [
+    {
+        accessorKey: 'user_id',
+        header: ({ column }) => {
+            return h('div', { class: 'flex flex-col gap-1' }, [
+                h('div', {
+                    class: 'flex items-center gap-2 cursor-pointer',
+                    onClick: () => {
+                        sortField.value = ['user_id', 'asc']
+                    }
+                }, [
+                    h('span', 'Client ID'),
+                    h(UIcon, {
+                        name: getIcon('user_id')
+                    })
+                ]),
+            ])
+        },
+        // header: '#',
+        cell: ({ row }) => `#${row.getValue('user_id') as number}`
+    },
+    // {
+    //     accessorKey: 'image_link',
+    //     header: 'Image',
+    //     cell: ({ row }) => {
+    //         return h('img', {
+    //             src: row.getValue('image_link') as string,
+    //             style: 'width:40px;height:40px;object-fit:cover;',
+    //             onError: (e: Event) => {
+    //                 const target = e.target as HTMLImageElement
+    //                 target.src = errorImg
+    //             }
+    //         })
+    //     },
+    // },
+    {
+        accessorKey: 'company_name',
+        header: ({ column }) => {
+            return h('div', { class: 'flex flex-col gap-1' }, [
+                h('div', {
+                    class: 'flex items-center gap-2 cursor-pointer',
+                    onClick: () => {
+                        sortField.value = ['company_name', 'asc']
+                    }
+                }, [
+                    h('span', 'Company Name'),
+                    h(UIcon, {
+                        name: getIcon('name')
+                    })
+                ]),
+
+                h(UInput, {
+                    placeholder: 'Search...',
+                    modelValue: filters.value[column.id] ?? '',
+                    'onUpdate:modelValue': (val: string) => {
+                        updateFilter(column.id, val)
+                    },
+                    size: 'xs'
+                })
+            ])
+        },
+        cell: ({ row }) => row.getValue('company_name') as string,
+        filterFn: (row, columnId, value) => {
+            const name = row.getValue(columnId) as string
+            return name.toLowerCase().includes(value.toLowerCase())
+        }
+    },
+    {
+        accessorKey: 'name',
+        header: ({ column }) => {
+            return h('div', { class: 'flex flex-col gap-1' }, [
+                h('div', {
+                    class: 'flex items-center gap-2 cursor-pointer',
+                    onClick: () => {
+                        sortField.value = ['name', 'asc']
+                    }
+                }, [
+                    h('span', 'Name/Surname'),
+                    h(UIcon, {
+                        name: getIcon('quantity')
+                    })
+                ]),
+                h(UInput, {
+                    placeholder: 'Search...',
+                    modelValue: filters.value[column.id] ?? '',
+                    'onUpdate:modelValue': (val: string) => {
+                        updateFilter(column.id, val)
+                    },
+                    size: 'xs'
+                })
+            ])
+        },
+        cell: ({ row }) => row.getValue('name') as string
+    },
+    {
+        accessorKey: 'email',
+        header: ({ column }) => {
+            return h('div', { class: 'flex flex-col gap-1' }, [
+                h('div', {
+                    class: 'flex items-center gap-2 cursor-pointer',
+                    onClick: () => {
+                        sortField.value = ['email', 'asc']
+                    }
+                }, [
+                    h('span', 'Email'),
+                    h(UIcon, {
+                        name: getIcon('quantity')
+                    })
+                ]),
+                h(UInput, {
+                    placeholder: 'Search...',
+                    modelValue: filters.value[column.id] ?? '',
+                    'onUpdate:modelValue': (val: string) => {
+                        updateFilter(column.id, val)
+                    },
+                    size: 'xs'
+                })
+            ])
+        },
+        cell: ({ row }) => row.getValue('email') as string
+    },
+    // {
+    //     accessorKey: 'count',
+    //     header: '',
+    //     cell: ({ row }) => {
+    //         return h(UButton, {
+    //             onClick: () => {
+    //                 goToProduct(row.original.product_id, row.original.link_rewrite)
+    //             },
+    //             class: 'cursor-pointer',
+    //             color: 'info',
+    //             variant: 'soft'
+    //         }, () => 'Show product')
+    //     },
+    // }
+]
+
 </script>
\ No newline at end of file

From 9eb8fc6625aa99be58eae27ccf94f95a25be9836 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Tue, 7 Apr 2026 16:06:36 +0200
Subject: [PATCH 07/11] fix: page usersList

---
 bo/components.d.ts                            |   3 +
 bo/src/components/admin/UsersList.vue         | 347 ++++++++----------
 bo/src/components/admin/UsersSearch.vue       |  25 ++
 .../customer-management/Profile.vue           |  11 +
 bo/src/layouts/default.vue                    |   2 +-
 bo/src/layouts/management.vue                 | 305 +++++++++++++++
 bo/src/types/user.d.ts                        |   8 +
 7 files changed, 500 insertions(+), 201 deletions(-)
 create mode 100644 bo/src/components/admin/UsersSearch.vue
 create mode 100644 bo/src/components/customer-management/Profile.vue
 create mode 100644 bo/src/layouts/management.vue

diff --git a/bo/components.d.ts b/bo/components.d.ts
index 4d5950b..2e162ce 100644
--- a/bo/components.d.ts
+++ b/bo/components.d.ts
@@ -11,6 +11,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ButtonGoToProfile: typeof import('./src/components/customer-management/ButtonGoToProfile.vue')['default']
     CartDetails: typeof import('./src/components/customer/CartDetails.vue')['default']
     CategoryMenu: typeof import('./src/components/inner/CategoryMenu.vue')['default']
     CategoryMenuListing: typeof import('./src/components/inner/categoryMenuListing.vue')['default']
@@ -36,6 +37,7 @@ declare module 'vue' {
     'ProductDetailView copy': typeof import('./src/components/admin/ProductDetailView copy.vue')['default']
     ProductEditor: typeof import('./src/components/inner/ProductEditor.vue')['default']
     ProductVariants: typeof import('./src/components/customer/components/ProductVariants.vue')['default']
+    Profile: typeof import('./src/components/customer-management/Profile.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ThemeSwitch: typeof import('./src/components/inner/ThemeSwitch.vue')['default']
@@ -61,6 +63,7 @@ declare module 'vue' {
     USelect: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Select.vue')['default']
     USelectMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue')['default']
     UsersList: typeof import('./src/components/admin/UsersList.vue')['default']
+    UsersSearch: typeof import('./src/components/admin/UsersSearch.vue')['default']
     USidebar: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Sidebar.vue')['default']
     UTable: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Table.vue')['default']
     UTabs: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Tabs.vue')['default']
diff --git a/bo/src/components/admin/UsersList.vue b/bo/src/components/admin/UsersList.vue
index 79d98ab..e40124c 100644
--- a/bo/src/components/admin/UsersList.vue
+++ b/bo/src/components/admin/UsersList.vue
@@ -3,62 +3,47 @@
         <div class="flex flex-col md:flex-row gap-10">
             <CategoryMenu />
             <div class="w-full flex flex-col items-center gap-4">
+                <UTable :data="usersList" :columns="columns" class="flex-1 w-full"
+                    :ui="{ root: 'max-w-100wv overflow-auto!' }" />
+                <UPagination v-model:page="page" :total="total" :items-per-page="perPage" />
             </div>
         </div>
     </component>
 </template>
 
 <script setup lang="ts">
-import Default from '@/layouts/default.vue';
-import { computed, onMounted, ref, resolveComponent, h } from 'vue'
-import { useFetchJson } from '@/composable/useFetchJson';
-import type { TableColumn } from '@nuxt/ui';
-import type { Product } from '@/types/product';
-import { useRoute, useRouter } from 'vue-router';
-
-const usersList = ref([])
-const error = ref()
-
-async function fetchUsersList() {
-    error.value = null
-    try {
-        const data = await useFetchJson(`/api/v1/restricted/customer/list`)
-        console.log('USERS LIST:', data)
-
-        const response = (data as any).items ?? data
-        console.log('User list response:', response)
-        usersList.value = response
-
-        return response
-    } catch (err: any) {
-        error.value = err?.message ?? 'Unknown error'
-        return null
-    }
-}
-
-onMounted(() => {
-    fetchUsersList()
-})
+import Default from '@/layouts/default.vue'
+import { ref, computed, watch, resolveComponent, h } from 'vue'
+import { useFetchJson } from '@/composable/useFetchJson'
+import { useRoute, useRouter } from 'vue-router'
+import CategoryMenu from '../inner/CategoryMenu.vue'
+import type { TableColumn } from '@nuxt/ui'
+import type { Customer } from '@/types/user'
 
 const router = useRouter()
 const route = useRoute()
 
+const perPage = ref(15)
+const page = computed({
+    get: () => Number(route.query.p) || 1,
+    set: (val: number) => {
+        router.push({ query: { ...route.query, p: val } })
+    }
+})
+
 const sortField = computed({
     get: () => [
         route.query.sort as string | undefined,
         route.query.direction as 'asc' | 'desc' | undefined
     ],
-
     set: ([sort]: [string, 'asc' | 'desc']) => {
         const currentSort = route.query.sort as string | undefined
         const currentDirection = route.query.direction as 'asc' | 'desc' | undefined
-
-        let query = { ...route.query }
+        const query = { ...route.query }
 
         if (currentSort === sort) {
-            if (currentDirection === 'asc') {
-                query.direction = 'desc'
-            } else if (currentDirection === 'desc') {
+            if (currentDirection === 'asc') query.direction = 'desc'
+            else if (currentDirection === 'desc') {
                 delete query.sort
                 delete query.direction
             } else {
@@ -69,33 +54,10 @@ const sortField = computed({
             query.sort = sort
             query.direction = 'asc'
         }
-
         router.push({ query })
     }
 })
 
-function getIcon(name: string) {
-    if (sortField.value[0] === name) {
-        if (sortField.value[1] === 'asc') return 'i-lucide-arrow-up-narrow-wide'
-        if (sortField.value[1] === 'desc') return 'i-lucide-arrow-down-wide-narrow'
-    }
-    return 'i-lucide-arrow-up-down'
-}
-
-const UInputNumber = resolveComponent('UInputNumber')
-const UInput = resolveComponent('UInput')
-const UButton = resolveComponent('UButton')
-const UIcon = resolveComponent('UIcon')
-
-const updateFilter = debounce((columnId: string, val: string) => {
-    const newFilters = { ...filters.value }
-
-    if (val) newFilters[columnId] = val
-    else delete newFilters[columnId]
-
-    filters.value = newFilters
-}, 400)
-
 const filters = computed<Record<string, string>>({
     get: () => {
         const q = { ...route.query }
@@ -106,160 +68,145 @@ const filters = computed<Record<string, string>>({
     },
     set: (val) => {
         const baseQuery = { ...route.query }
-
-        Object.keys(baseQuery).forEach(key => {
-            if (!['page', 'sort', 'direction'].includes(key)) {
-                delete baseQuery[key]
-            }
-        })
-
-        router.push({
-            query: {
-                ...baseQuery,
-                ...val,
-                page: 1
-            }
+        Object.keys(baseQuery).forEach(k => {
+            if (!['page', 'sort', 'direction'].includes(k)) delete baseQuery[k]
         })
+        router.push({ query: { ...baseQuery, ...val, page: 1 } })
     }
 })
 
-import errorImg from '@/assets/error.svg'
-import { debounce } from 'chart.js/helpers';
-const columns: TableColumn<Product>[] = [
+function debounce(fn: Function, delay = 400) {
+    let t: any
+    return (...args: any[]) => {
+        clearTimeout(t)
+        t = setTimeout(() => fn(...args), delay)
+    }
+}
+
+const updateFilter = debounce((columnId: string, val: string) => {
+    const newFilters = { ...filters.value }
+    if (val) newFilters[columnId] = val
+    else delete newFilters[columnId]
+    filters.value = newFilters
+}, 400)
+
+const usersList = ref<Customer[]>([])
+const total = ref(0)
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+async function fetchUsersList() {
+    loading.value = true
+    error.value = null
+
+    const params = new URLSearchParams(route.query as any).toString()
+    const url = `/api/v1/restricted/customer/list?elems=${perPage.value}&${params}`
+
+    try {
+        const res = await useFetchJson<{ items: { items: Customer[] }; count: number }>(url)
+        usersList.value = res.items?.items || []
+        total.value = res.count || 0
+    } catch (e: unknown) {
+        error.value = e instanceof Error ? e.message : 'Failed to load users'
+    } finally {
+        loading.value = false
+    }
+}
+
+function getIcon(name: string) {
+    if (sortField.value[0] === name) {
+        if (sortField.value[1] === 'asc') return 'i-lucide-arrow-up-narrow-wide'
+        if (sortField.value[1] === 'desc') return 'i-lucide-arrow-down-wide-narrow'
+    }
+    return 'i-lucide-arrow-up-down'
+}
+
+const UInput = resolveComponent('UInput')
+const UIcon = resolveComponent('UIcon')
+const UButton = resolveComponent('UButton')
+
+const columns: TableColumn<Customer>[] = [
     {
         accessorKey: 'user_id',
-        header: ({ column }) => {
-            return h('div', { class: 'flex flex-col gap-1' }, [
-                h('div', {
-                    class: 'flex items-center gap-2 cursor-pointer',
-                    onClick: () => {
-                        sortField.value = ['user_id', 'asc']
-                    }
-                }, [
-                    h('span', 'Client ID'),
-                    h(UIcon, {
-                        name: getIcon('user_id')
-                    })
-                ]),
-            ])
-        },
-        // header: '#',
-        cell: ({ row }) => `#${row.getValue('user_id') as number}`
-    },
-    // {
-    //     accessorKey: 'image_link',
-    //     header: 'Image',
-    //     cell: ({ row }) => {
-    //         return h('img', {
-    //             src: row.getValue('image_link') as string,
-    //             style: 'width:40px;height:40px;object-fit:cover;',
-    //             onError: (e: Event) => {
-    //                 const target = e.target as HTMLImageElement
-    //                 target.src = errorImg
-    //             }
-    //         })
-    //     },
-    // },
-    {
-        accessorKey: 'company_name',
-        header: ({ column }) => {
-            return h('div', { class: 'flex flex-col gap-1' }, [
-                h('div', {
-                    class: 'flex items-center gap-2 cursor-pointer',
-                    onClick: () => {
-                        sortField.value = ['company_name', 'asc']
-                    }
-                }, [
-                    h('span', 'Company Name'),
-                    h(UIcon, {
-                        name: getIcon('name')
-                    })
-                ]),
-
-                h(UInput, {
-                    placeholder: 'Search...',
-                    modelValue: filters.value[column.id] ?? '',
-                    'onUpdate:modelValue': (val: string) => {
-                        updateFilter(column.id, val)
-                    },
-                    size: 'xs'
-                })
-            ])
-        },
-        cell: ({ row }) => row.getValue('company_name') as string,
-        filterFn: (row, columnId, value) => {
-            const name = row.getValue(columnId) as string
-            return name.toLowerCase().includes(value.toLowerCase())
-        }
+        header: ({ column }) => h('div', { class: 'flex flex-col gap-1' }, [
+            h('div', {
+                class: 'flex items-center gap-2 cursor-pointer',
+                onClick: () => (sortField.value = ['user_id', 'asc'])
+            }, [h('span', 'Client ID'), h(UIcon, { name: getIcon('user_id') })]),
+            h(UInput, {
+                placeholder: 'Search...',
+                modelValue: filters.value[column.id] ?? '',
+                'onUpdate:modelValue': (val: string) => updateFilter(column.id, val),
+                size: 'xs'
+            })
+        ]),
+        cell: ({ row }) => `#${row.getValue('user_id')}`
     },
     {
         accessorKey: 'name',
-        header: ({ column }) => {
-            return h('div', { class: 'flex flex-col gap-1' }, [
-                h('div', {
-                    class: 'flex items-center gap-2 cursor-pointer',
-                    onClick: () => {
-                        sortField.value = ['name', 'asc']
-                    }
-                }, [
-                    h('span', 'Name/Surname'),
-                    h(UIcon, {
-                        name: getIcon('quantity')
-                    })
-                ]),
-                h(UInput, {
-                    placeholder: 'Search...',
-                    modelValue: filters.value[column.id] ?? '',
-                    'onUpdate:modelValue': (val: string) => {
-                        updateFilter(column.id, val)
-                    },
-                    size: 'xs'
-                })
-            ])
-        },
-        cell: ({ row }) => row.getValue('name') as string
+        header: ({ column }) => h('div', { class: 'flex flex-col gap-1' }, [
+            h('div', {
+                class: 'flex items-center gap-2 cursor-pointer',
+                onClick: () => (sortField.value = ['last_name, first_name', 'asc'])
+            }, [h('span', 'Name/Surname'), h(UIcon, { name: getIcon('name') })]),
+            h(UInput, {
+                placeholder: 'Search...',
+                modelValue: filters.value[column.id] ?? '',
+                'onUpdate:modelValue': (val: string) => updateFilter(column.id, val),
+                size: 'xs'
+            })
+        ]),
+        cell: ({ row }) => `${row.original.first_name} ${row.original.last_name}`
     },
     {
         accessorKey: 'email',
-        header: ({ column }) => {
-            return h('div', { class: 'flex flex-col gap-1' }, [
-                h('div', {
-                    class: 'flex items-center gap-2 cursor-pointer',
-                    onClick: () => {
-                        sortField.value = ['email', 'asc']
-                    }
-                }, [
-                    h('span', 'Email'),
-                    h(UIcon, {
-                        name: getIcon('quantity')
-                    })
-                ]),
-                h(UInput, {
-                    placeholder: 'Search...',
-                    modelValue: filters.value[column.id] ?? '',
-                    'onUpdate:modelValue': (val: string) => {
-                        updateFilter(column.id, val)
-                    },
-                    size: 'xs'
-                })
-            ])
-        },
-        cell: ({ row }) => row.getValue('email') as string
+        header: ({ column }) => h('div', { class: 'flex flex-col gap-1' }, [
+            h('div', {
+                class: 'flex items-center gap-2 cursor-pointer',
+                onClick: () => (sortField.value = ['email', 'asc'])
+            }, [h('span', 'Email'), h(UIcon, { name: getIcon('email') })]),
+            h(UInput, {
+                placeholder: 'Search...',
+                modelValue: filters.value[column.id] ?? '',
+                'onUpdate:modelValue': (val: string) => updateFilter(column.id, val),
+                size: 'xs'
+            })
+        ]),
+        cell: ({ row }) => row.getValue('email')
     },
-    // {
-    //     accessorKey: 'count',
-    //     header: '',
-    //     cell: ({ row }) => {
-    //         return h(UButton, {
-    //             onClick: () => {
-    //                 goToProduct(row.original.product_id, row.original.link_rewrite)
-    //             },
-    //             class: 'cursor-pointer',
-    //             color: 'info',
-    //             variant: 'soft'
-    //         }, () => 'Show product')
-    //     },
-    // }
+    {
+        accessorKey: 'count',
+        header: '',
+        cell: ({ row }) => {
+            return h(UButton, {
+                // onClick: () => {
+                //     goToProduct(row.original.product_id, row.original.link_rewrite)
+                // },
+                class: 'cursor-pointer',
+                color: 'info',
+                variant: 'soft'
+            }, () => 'Manage')
+        },
+    },
+    {
+        accessorKey: 'profile',
+        header: '',
+        cell: ({ row }) => {
+            const userId = row.original.user_id
+            return h(UButton, {
+                color: 'primary',
+                size: 'sm',
+                variant: 'soft',
+                onClick: () => {
+                    router.push({
+                        name: 'customer-management-profile', 
+                        params: { user_id: userId }
+                    })
+                }
+            }, () => 'Go to profile')
+        }
+    }
 ]
 
+watch(() => route.query, fetchUsersList, { immediate: true })
 </script>
\ No newline at end of file
diff --git a/bo/src/components/admin/UsersSearch.vue b/bo/src/components/admin/UsersSearch.vue
new file mode 100644
index 0000000..1db0821
--- /dev/null
+++ b/bo/src/components/admin/UsersSearch.vue
@@ -0,0 +1,25 @@
+<template>
+    <component :is="Default || 'div'">
+        <div class="pt-70! flex flex-col items-center justify-center bg-gray-50 dark:bg-(--main-dark)">
+            <h1 class="text-6xl font-bold text-black dark:text-white mb-14">Search User</h1>
+
+            <div class="w-full max-w-4xl">
+                <input type="text" placeholder="Type user name or ID..."
+                    class="w-full border border-gray-300 rounded-full px-6 py-3 text-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
+            </div>
+
+        </div>
+    </component>
+</template>
+
+
+<script setup lang="ts">
+import Default from '@/layouts/default.vue';
+</script>
+
+<style scoped>
+input::placeholder {
+    color: #9ca3af;
+    /* Tailwind gray-400 */
+}
+</style>
\ No newline at end of file
diff --git a/bo/src/components/customer-management/Profile.vue b/bo/src/components/customer-management/Profile.vue
new file mode 100644
index 0000000..aa9dee8
--- /dev/null
+++ b/bo/src/components/customer-management/Profile.vue
@@ -0,0 +1,11 @@
+<template>
+    <component :is="Management || 'div'">
+        <div>customer-management</div>
+    </component>
+</template>
+
+
+<script setup lang="ts">
+import Management from '@/layouts/management.vue';
+
+</script>
\ No newline at end of file
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index 1dcb598..189ddbe 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -52,7 +52,7 @@
         </div>
       </div>
 
-      <div class="flex-1 p-4 bg-slate-50">
+      <div class="flex-1 p-4 bg-slate-50 dark:bg-(--main-dark)">
         <slot />
       </div>
     </div>
diff --git a/bo/src/layouts/management.vue b/bo/src/layouts/management.vue
new file mode 100644
index 0000000..31bc342
--- /dev/null
+++ b/bo/src/layouts/management.vue
@@ -0,0 +1,305 @@
+<template>
+    <div class="flex flex-1 overflow-x-hidden h-svh">
+        <USidebar v-model:open="open" collapsible="icon" rail :ui="{
+            container: 'h-full z-80',
+            inner: 'bg-elevated/25 divide-transparent',
+            body: 'py-0'
+        }">
+            <template #header>
+                <UDropdownMenu :items="teamsItems" :content="{ align: 'start', collisionPadding: 12 }"
+                    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }">
+                    <UButton v-bind="selectedTeam" trailing-icon="i-lucide-chevrons-up-down" color="neutral"
+                        variant="ghost" square class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
+                            trailingIcon: 'text-dimmed ms-auto'
+                        }" />
+                </UDropdownMenu>
+            </template>
+
+            <template #default="{ state }">
+                {{ menu }}
+                <UNavigationMenu :key="state" :items="menuItems" orientation="vertical"
+                    :ui="{ link: 'p-1.5 overflow-hidden' }" />
+            </template>
+
+            <template #footer>
+                <UDropdownMenu :items="userItems" :content="{ align: 'center', collisionPadding: 12 }"
+                    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }">
+                    <UButton v-bind="userStore.user" :label="userStore.user?.email"
+                        trailing-icon="i-lucide-chevrons-up-down" color="neutral" variant="ghost" square
+                        class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
+                            trailingIcon: 'text-dimmed ms-auto'
+                        }" />
+                </UDropdownMenu>
+                <!-- first_name: '', last_name: '' -->
+            </template>
+        </USidebar>
+
+        <div class="flex-1 flex flex-col">
+            <div class="flex h-(--ui-header-height) shrink-0 items-center justify-between px-4 border-b border-default">
+                <div class="flex items-center gap-2">
+                    <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
+                        @click="open = !open" />
+                    <p class="font-bold text-2xl">Customer-Management: <span class="text-[24px] font-bold">{{ pageTitle }}</span></p>
+                </div>
+                <div class="hidden md:flex items-center gap-12">
+                    <div class="flex items-center gap-2">
+                        <CountryCurrencySwitch />
+                        <LangSwitch />
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <ThemeSwitch />
+                        <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
+                            class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark) whitespace-nowrap">
+                            {{ $t('general.logout') }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex-1 p-4 bg-slate-50 dark:bg-(--main-dark)">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useColorMode } from '@vueuse/core'
+import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
+import { defineShortcuts, extractShortcuts } from '@nuxt/ui/runtime/composables/defineShortcuts.js'
+import { useAuthStore } from '../stores/customer/auth'
+import { useRoute } from 'vue-router'
+
+
+const route = useRoute()
+const pageTitle = computed(() => route.meta.name ?? 'Default Page')
+
+const authStore = useAuthStore()
+const userStore = useUserStore()
+
+await userStore.getUser()
+
+const open = ref(true)
+const colorMode = useColorMode()
+
+const teams = ref([
+    {
+        label: 'Nuxt',
+        avatar: {
+            src: 'https://github.com/nuxt.png',
+            alt: 'Nuxt'
+        }
+    },
+    {
+        label: 'Vue',
+        avatar: {
+            src: 'https://github.com/vuejs.png',
+            alt: 'Vue'
+        }
+    },
+    {
+        label: 'UnJS',
+        avatar: {
+            src: 'https://github.com/unjs.png',
+            alt: 'UnJS'
+        }
+    }
+])
+const selectedTeam = ref(teams.value[0])
+
+const teamsItems = computed<DropdownMenuItem[][]>(() => {
+    return [
+        teams.value.map((team, index) => ({
+            ...team,
+            kbds: ['meta', String(index + 1)],
+            onSelect() {
+                selectedTeam.value = team
+            }
+        })),
+        [
+            {
+                label: 'Create team',
+                icon: 'i-lucide-circle-plus'
+            }
+        ]
+    ]
+})
+
+function getItems(state: 'collapsed' | 'expanded') {
+    return [
+        {
+            label: 'Inbox',
+            icon: 'i-lucide-inbox',
+            badge: '4'
+        },
+        {
+            label: 'Issues',
+            icon: 'i-lucide-square-dot'
+        },
+        {
+            label: 'Activity',
+            icon: 'i-lucide-square-activity'
+        },
+        {
+            label: 'Settings',
+            icon: 'i-lucide-settings',
+            defaultOpen: true,
+            children:
+                state === 'expanded'
+                    ? [
+                        {
+                            label: 'General',
+                            icon: 'i-lucide-house'
+                        },
+                        {
+                            label: 'Team',
+                            icon: 'i-lucide-users'
+                        },
+                        {
+                            label: 'Billing',
+                            icon: 'i-lucide-credit-card'
+                        }
+                    ]
+                    : []
+        }
+    ] satisfies NavigationMenuItem[]
+}
+
+// 
+import { useRouter } from 'vue-router'
+import { currentLang } from '@/router/langs'
+import { useFetchJson } from '@/composable/useFetchJson'
+import CountryCurrencySwitch from '@/components/inner/CountryCurrencySwitch.vue'
+import LangSwitch from '@/components/inner/LangSwitch.vue'
+import ThemeSwitch from '@/components/inner/ThemeSwitch.vue'
+import type { LabelTrans, TopMenuItem } from '@/types'
+import { useUserStore } from '@/stores/user'
+import { components } from 'reka-ui/constant'
+
+
+const router = useRouter()
+
+const menu = ref<TopMenuItem[] | null>(null)
+
+async function getTopMenu() {
+    try {
+        const { items } = await useFetchJson<TopMenuItem[]>('/api/v1/restricted/menu/get-top-menu')
+
+        menu.value = items
+    } catch (err) {
+        console.log(err)
+    }
+}
+
+onMounted(() => {
+    getTopMenu()
+})
+
+const menuItems = computed(() => {
+    if (!menu.value?.length) return []
+
+    return transformMenu(
+        menu.value || [],
+        currentLang.value?.iso_code
+    )
+})
+
+function transformMenu(
+    items: TopMenuItem[],
+    locale: string | undefined
+): NavigationMenuItem[] {
+    return items.map((item) => {
+        const route: NavigationMenuItem = {
+            icon: item.label.icon || 'i-lucide-house',
+            label:
+                item.label.trans?.[locale as keyof LabelTrans]?.label ||
+                item.label.trans?.en?.label ||
+                '—',
+            children: item.children
+                ? transformMenu(item.children, locale)
+                : undefined,
+            onSelect: () => {
+                router.push({
+                    name: item.params.route.name,
+                    params: {
+                        ...(item.params.route.params || {}),
+                        locale: currentLang.value?.iso_code
+                    }
+                })
+            }
+        }
+
+        return route
+    })
+}
+
+
+const userItems = computed<DropdownMenuItem[][]>(() => [
+    [
+        {
+            label: 'Profile',
+            icon: 'i-lucide-user'
+        },
+        {
+            label: 'Billing',
+            icon: 'i-lucide-credit-card'
+        },
+        {
+            label: 'Settings',
+            icon: 'i-lucide-settings',
+            to: '/settings'
+        }
+    ],
+    [
+        {
+            label: 'Appearance',
+            icon: 'i-lucide-sun-moon',
+            children: [
+                {
+                    label: 'Light',
+                    icon: 'i-lucide-sun',
+                    type: 'checkbox',
+                    checked: colorMode.value === 'light',
+                    onUpdateChecked(checked: boolean) {
+                        if (checked) {
+                            colorMode.preference = 'light'
+                        }
+                    },
+                    onSelect(e: Event) {
+                        e.preventDefault()
+                    }
+                },
+                {
+                    label: 'Dark',
+                    icon: 'i-lucide-moon',
+                    type: 'checkbox',
+                    checked: colorMode.value === 'dark',
+                    onUpdateChecked(checked: boolean) {
+                        if (checked) {
+                            colorMode.preference = 'dark'
+                        }
+                    },
+                    onSelect(e: Event) {
+                        e.preventDefault()
+                    }
+                }
+            ]
+        }
+    ],
+    [
+        {
+            label: 'GitHub',
+            icon: 'i-simple-icons-github',
+            to: 'https://github.com/nuxt/ui',
+            target: '_blank'
+        },
+        {
+            label: 'Log out',
+            icon: 'i-lucide-log-out'
+        }
+    ]
+])
+
+defineShortcuts(extractShortcuts(teamsItems.value))
+</script>
diff --git a/bo/src/types/user.d.ts b/bo/src/types/user.d.ts
index d054444..72526d1 100644
--- a/bo/src/types/user.d.ts
+++ b/bo/src/types/user.d.ts
@@ -13,3 +13,11 @@ export interface User {
     nip?: string
     vat?: string
 }
+
+
+interface Customer {
+    user_id: number
+    email: string
+    first_name: string
+    last_name: string
+}
\ No newline at end of file

From c7692bc817bf706a275d690785ac61e13ba678d5 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Wed, 8 Apr 2026 13:51:10 +0200
Subject: [PATCH 08/11] fix: page serchUsers

---
 bo/src/components/admin/UsersSearch.vue | 232 +++++++++++++++++++++++-
 bo/src/layouts/default.vue              |   1 -
 bo/src/layouts/management.vue           |   6 +-
 3 files changed, 228 insertions(+), 11 deletions(-)

diff --git a/bo/src/components/admin/UsersSearch.vue b/bo/src/components/admin/UsersSearch.vue
index 1db0821..3f2844d 100644
--- a/bo/src/components/admin/UsersSearch.vue
+++ b/bo/src/components/admin/UsersSearch.vue
@@ -1,25 +1,245 @@
 <template>
-    <component :is="Default || 'div'">
+    <component :is="Default">
         <div class="pt-70! flex flex-col items-center justify-center bg-gray-50 dark:bg-(--main-dark)">
-            <h1 class="text-6xl font-bold text-black dark:text-white mb-14">Search User</h1>
+            <h1 class="text-6xl font-bold text-black dark:text-white mb-14">Search Users</h1>
 
             <div class="w-full max-w-4xl">
-                <input type="text" placeholder="Type user name or ID..."
-                    class="w-full border border-gray-300 rounded-full px-6 py-3 text-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
+                <UInput icon="i-lucide-search" type="text" placeholder="Type user name or ID..." v-model="searchQuery"
+                    class="w-full!" :ui="{ base: 'py-4! rounded-full!' }" />
             </div>
 
+            <p v-if="loading">Loading...</p>
+            <p v-else-if="error" class="text-red-600">{{ error }}</p>
+            <div v-else-if="clients.length" class="w-full max-w-4xl mt-7">
+                <UTable :columns="columns" :data="clients" :ui="{ root: 'w-full!' }" />
+            </div>
+
+            <p v-else-if="searchQuery.length" class="pt-4 text-gray-700">
+                No users found with that name or ID
+            </p>
         </div>
     </component>
 </template>
 
-
 <script setup lang="ts">
+import { ref, computed, watch, resolveComponent, h } from 'vue'
 import Default from '@/layouts/default.vue';
+import type { TableColumn } from '@nuxt/ui';
+import { useRoute, useRouter } from 'vue-router';
+import { useFetchJson } from '@/composable/useFetchJson';
+
+
+interface Customer {
+    user_id: number;
+    email: string;
+    first_name: string;
+    last_name: string;
+}
+
+
+const searchQuery = ref('');
+const clients = ref<Customer[]>([]);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const limit = ref(10);
+const page = ref(1);
+
+
+function debounce(fn: Function, delay = 400) {
+    let t: any;
+    return (...args: any[]) => {
+        clearTimeout(t);
+        t = setTimeout(() => fn(...args), delay);
+    };
+}
+
+
+const searchClients = async () => {
+    if (!searchQuery.value) {
+        clients.value = [];
+        return;
+    }
+
+    loading.value = true;
+    error.value = null;
+
+    try {
+        const result = await useFetchJson(
+            `/api/v1/restricted/customer/list?search=${encodeURIComponent(searchQuery.value)}&elems=${limit.value}&page=${page.value}`
+        );
+
+        clients.value = result.items?.items || [];
+    } catch (err: unknown) {
+        error.value = err instanceof Error ? err.message : 'Failed to fetch clients';
+        clients.value = [];
+    } finally {
+        loading.value = false;
+    }
+};
+
+
+watch(searchQuery, debounce(searchClients, 300));
+
+
+const router = useRouter()
+const route = useRoute()
+
+
+const UInput = resolveComponent('UInput')
+const UIcon = resolveComponent('UIcon')
+const UButton = resolveComponent('UButton')
+
+
+const sortField = computed({
+    get: () => [
+        route.query.sort as string | undefined,
+        route.query.direction as 'asc' | 'desc' | undefined
+    ],
+    set: ([sort]: [string, 'asc' | 'desc']) => {
+        const currentSort = route.query.sort as string | undefined
+        const currentDirection = route.query.direction as 'asc' | 'desc' | undefined
+        const query = { ...route.query }
+
+        if (currentSort === sort) {
+            if (currentDirection === 'asc') query.direction = 'desc'
+            else if (currentDirection === 'desc') {
+                delete query.sort
+                delete query.direction
+            } else {
+                query.direction = 'asc'
+                query.sort = sort
+            }
+        } else {
+            query.sort = sort
+            query.direction = 'asc'
+        }
+        router.push({ query })
+    }
+})
+
+
+function getIcon(name: string) {
+    if (sortField.value[0] === name) {
+        if (sortField.value[1] === 'asc') return 'i-lucide-arrow-up-narrow-wide'
+        if (sortField.value[1] === 'desc') return 'i-lucide-arrow-down-wide-narrow'
+    }
+    return 'i-lucide-arrow-up-down'
+}
+
+
+const filters = computed<Record<string, string>>({
+    get: () => {
+        const q = { ...route.query }
+        delete q.page
+        delete q.sort
+        delete q.direction
+        return q as Record<string, string>
+    },
+    set: (val) => {
+        const baseQuery = { ...route.query }
+        Object.keys(baseQuery).forEach(k => {
+            if (!['page', 'sort', 'direction'].includes(k)) delete baseQuery[k]
+        })
+        router.push({ query: { ...baseQuery, ...val, page: 1 } })
+    }
+})
+
+
+const updateFilter = debounce((columnId: string, val: string) => {
+    const newFilters = { ...filters.value }
+    if (val) newFilters[columnId] = val
+    else delete newFilters[columnId]
+    filters.value = newFilters
+}, 400)
+
+
+const columns: TableColumn<Customer>[] = [
+    {
+        accessorKey: 'user_id',
+        header: ({ column }) => h('div', { class: 'flex flex-col gap-1' }, [
+            h('div', {
+                class: 'flex items-center gap-2 cursor-pointer',
+                onClick: () => (sortField.value = ['user_id', 'asc'])
+            }, [h('span', 'Client ID'), h(UIcon, { name: getIcon('user_id') })]),
+            h(UInput, {
+                placeholder: 'Search...',
+                modelValue: filters.value[column.id] ?? '',
+                'onUpdate:modelValue': (val: string) => updateFilter(column.id, val),
+                size: 'xs'
+            })
+        ]),
+        cell: ({ row }) => `#${row.getValue('user_id')}`
+    },
+    {
+        accessorKey: 'name',
+        header: ({ column }) => h('div', { class: 'flex flex-col gap-1' }, [
+            h('div', {
+                class: 'flex items-center gap-2 cursor-pointer',
+                onClick: () => (sortField.value = ['last_name, first_name', 'asc'])
+            }, [h('span', 'Name/Surname'), h(UIcon, { name: getIcon('name') })]),
+            h(UInput, {
+                placeholder: 'Search...',
+                modelValue: filters.value[column.id] ?? '',
+                'onUpdate:modelValue': (val: string) => updateFilter(column.id, val),
+                size: 'xs'
+            })
+        ]),
+        cell: ({ row }) => `${row.original.first_name} ${row.original.last_name}`
+    },
+    {
+        accessorKey: 'email',
+        header: ({ column }) => h('div', { class: 'flex flex-col gap-1' }, [
+            h('div', {
+                class: 'flex items-center gap-2 cursor-pointer',
+                onClick: () => (sortField.value = ['email', 'asc'])
+            }, [h('span', 'Email'), h(UIcon, { name: getIcon('email') })]),
+            h(UInput, {
+                placeholder: 'Search...',
+                modelValue: filters.value[column.id] ?? '',
+                'onUpdate:modelValue': (val: string) => updateFilter(column.id, val),
+                size: 'xs'
+            })
+        ]),
+        cell: ({ row }) => row.getValue('email')
+    },
+    {
+        accessorKey: 'count',
+        header: '',
+        cell: ({ row }) => {
+            return h(UButton, {
+                // onClick: () => {
+                //     goToProduct(row.original.product_id, row.original.link_rewrite)
+                // },
+                class: 'cursor-pointer',
+                color: 'info',
+                variant: 'soft'
+            }, () => 'Manage')
+        },
+    },
+    {
+        accessorKey: 'profile',
+        header: '',
+        cell: ({ row }) => {
+            const userId = row.original.user_id
+            return h(UButton, {
+                color: 'primary',
+                size: 'sm',
+                variant: 'soft',
+                onClick: () => {
+                    router.push({
+                        name: 'customer-management-profile',
+                        params: { user_id: userId }
+                    })
+                }
+            }, () => 'Go to profile')
+        }
+    }
+]
+
 </script>
 
 <style scoped>
 input::placeholder {
     color: #9ca3af;
-    /* Tailwind gray-400 */
 }
 </style>
\ No newline at end of file
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index 189ddbe..4ed66e5 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -16,7 +16,6 @@
       </template>
 
       <template #default="{ state }">
-        {{ menu }}
         <UNavigationMenu :key="state" :items="menuItems" orientation="vertical"
           :ui="{ link: 'p-1.5 overflow-hidden' }" />
       </template>
diff --git a/bo/src/layouts/management.vue b/bo/src/layouts/management.vue
index 31bc342..6bc68c9 100644
--- a/bo/src/layouts/management.vue
+++ b/bo/src/layouts/management.vue
@@ -16,7 +16,6 @@
             </template>
 
             <template #default="{ state }">
-                {{ menu }}
                 <UNavigationMenu :key="state" :items="menuItems" orientation="vertical"
                     :ui="{ link: 'p-1.5 overflow-hidden' }" />
             </template>
@@ -39,7 +38,7 @@
                 <div class="flex items-center gap-2">
                     <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
                         @click="open = !open" />
-                    <p class="font-bold text-2xl">Customer-Management: <span class="text-[24px] font-bold">{{ pageTitle }}</span></p>
+                    <p class="font-bold text-xl">Customer-Management: <span class="text-[20px] font-medium">{{ pageTitle }}</span></p>
                 </div>
                 <div class="hidden md:flex items-center gap-12">
                     <div class="flex items-center gap-2">
@@ -54,7 +53,7 @@
                         </button>
                     </div>
                 </div>
-            </div>
+            </div>  
 
             <div class="flex-1 p-4 bg-slate-50 dark:bg-(--main-dark)">
                 <slot />
@@ -71,7 +70,6 @@ import { defineShortcuts, extractShortcuts } from '@nuxt/ui/runtime/composables/
 import { useAuthStore } from '../stores/customer/auth'
 import { useRoute } from 'vue-router'
 
-
 const route = useRoute()
 const pageTitle = computed(() => route.meta.name ?? 'Default Page')
 

From 1fb2a33cfda568a7e87cb911b37f5bbe5e02cc5f Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Thu, 9 Apr 2026 16:00:36 +0200
Subject: [PATCH 09/11] fix: create component StorageFileBrowser

---
 bo/components.d.ts                            |   2 +
 .../customer/StorageFileBrowser.vue           | 159 ++++++++++++++++++
 bo/src/layouts/default.vue                    |  21 ++-
 bo/src/layouts/management.vue                 |   8 +-
 bo/src/views/StorageView.vue                  |  12 ++
 5 files changed, 192 insertions(+), 10 deletions(-)
 create mode 100644 bo/src/components/customer/StorageFileBrowser.vue
 create mode 100644 bo/src/views/StorageView.vue

diff --git a/bo/components.d.ts b/bo/components.d.ts
index 2e162ce..a7f6fa4 100644
--- a/bo/components.d.ts
+++ b/bo/components.d.ts
@@ -40,6 +40,7 @@ declare module 'vue' {
     Profile: typeof import('./src/components/customer-management/Profile.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    StorageFileBrowser: typeof import('./src/components/customer/StorageFileBrowser.vue')['default']
     ThemeSwitch: typeof import('./src/components/inner/ThemeSwitch.vue')['default']
     TopBar: typeof import('./src/components/TopBar.vue')['default']
     TopBarLogin: typeof import('./src/components/TopBarLogin.vue')['default']
@@ -68,5 +69,6 @@ declare module 'vue' {
     UTable: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Table.vue')['default']
     UTabs: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Tabs.vue')['default']
     UTextarea: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Textarea.vue')['default']
+    UTree: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Tree.vue')['default']
   }
 }
diff --git a/bo/src/components/customer/StorageFileBrowser.vue b/bo/src/components/customer/StorageFileBrowser.vue
new file mode 100644
index 0000000..30f0a5b
--- /dev/null
+++ b/bo/src/components/customer/StorageFileBrowser.vue
@@ -0,0 +1,159 @@
+<template>
+    <component :is="Default || 'div'">
+        <div class="p-4">
+            <div v-if="loading" class="flex justify-center py-8">
+                <ULoader />
+            </div>
+            <div v-else-if="error" class="text-red-500">
+                {{ error }}
+            </div>
+            <UTree v-else :items="treeItems" :expanded="expandedFolders">
+                <template #item-wrapper="{ item }">
+                    <div class="flex items-start cursor-pointer" @click="onItemClick(item)">
+                        <div class="flex items-center gap-1">
+                            <UIcon :name="item.icon" :size="30" />
+                            <div class="flex gap-1 items-center">
+                                <span class="text-[15px] font-medium">{{ item.label }}</span>
+                                <UButton v-if="!item.isFolder && item.fileName" size="xxs" color="neutral"
+                                    variant="outline" icon="i-lucide-download"
+                                    @click.stop="downloadFile(item.path, item.fileName)" :ui="{ base: 'ring-0!' }" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </UTree>
+        </div>
+    </component>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useFetchJson } from '@/composable/useFetchJson'
+import Default from '@/layouts/default.vue'
+
+interface FileItemRaw {
+    Name: string
+    IsFolder: boolean
+}
+
+interface FileItem {
+    name: string
+    type: 'file' | 'folder'
+}
+
+interface TreeItem {
+    label: string
+    icon: string
+    children?: TreeItem[]
+    isFolder: boolean
+    path: string
+    value: string
+    fileName?: string
+}
+
+const props = defineProps<{ initialPath?: string }>()
+
+const currentPath = ref(props.initialPath || '')
+const allData = ref<Map<string, FileItem[]>>(new Map())
+const expandedFolders = ref<string[]>([])
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+
+async function fetchFolderContents(path: string): Promise<FileItem[]> {
+    const url = `/api/v1/restricted/storage/list-content/${path}`
+    const data = await useFetchJson<FileItemRaw[]>(url)
+    return (data.items || []).map(i => ({
+        name: i.Name,
+        type: i.IsFolder ? 'folder' : 'file'
+    }))
+}
+
+
+async function loadFolder(path: string) {
+    if (allData.value.has(path)) return
+    loading.value = true
+    error.value = null
+    try {
+        const items = await fetchFolderContents(path)
+        allData.value.set(path, items)
+    } catch (e) {
+        error.value = e instanceof Error ? e.message : 'Failed to load folder contents'
+    } finally {
+        loading.value = false
+    }
+}
+
+
+async function toggleFolder(item: TreeItem) {
+    if (!item.isFolder) return
+
+    if (!expandedFolders.value.includes(item.value)) {
+        expandedFolders.value.push(item.value)
+        await loadFolder(item.value)
+    } else {
+        expandedFolders.value = expandedFolders.value.filter(v => v !== item.value)
+    }
+}
+
+function onItemClick(item: TreeItem) {
+    if (item.isFolder) {
+        toggleFolder(item)
+    }
+}
+
+
+function buildTreeItems(items: FileItem[], path: string): TreeItem[] {
+    return items.map(item => {
+        const itemPath = path ? `${path}/${item.name}` : item.name
+        const isFolder = item.type === 'folder'
+
+        const children = isFolder
+            ? buildTreeItems(allData.value.get(itemPath) || [], itemPath)
+            : undefined
+
+        return {
+            label: item.name,
+
+            icon: isFolder ? 'fxemoji:folder' : 'flat-color-icons:file',
+            isFolder,
+            path: isFolder ? itemPath : path,
+            value: itemPath,
+            fileName: isFolder ? undefined : item.name,
+            children
+        }
+    })
+}
+
+async function downloadFile(path: string, fileName: string) {
+    try {
+        const response = await fetch(`/api/v1/restricted/storage/download-file/${path}/${fileName}`)
+        if (!response.ok) throw new Error('Failed to download file')
+
+        const blob = await response.blob()
+        const url = window.URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = fileName
+        document.body.appendChild(a)
+        a.click()
+        a.remove()
+        window.URL.revokeObjectURL(url)
+    } catch (e) {
+        console.error('Download error:', e)
+        alert('Failed to download file')
+    }
+}
+
+const treeItems = computed<TreeItem[]>(() => {
+    const items = allData.value.get(currentPath.value) || []
+    return buildTreeItems(items, currentPath.value)
+})
+
+loadFolder(currentPath.value).then(() => {
+    const rootItems = treeItems.value
+    if (rootItems.length > 0 && rootItems[0].isFolder) {
+        toggleFolder(rootItems[0])
+    }
+})
+</script>
\ No newline at end of file
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index 4ed66e5..6da881d 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -23,8 +23,8 @@
       <template #footer>
         <UDropdownMenu :items="userItems" :content="{ align: 'center', collisionPadding: 12 }"
           :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }">
-          <UButton  v-bind="userStore.user" :label="userStore.user?.email" trailing-icon="i-lucide-chevrons-up-down" color="neutral"
-            variant="ghost" square class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
+          <UButton v-bind="userStore.user" :label="userStore.user?.email" trailing-icon="i-lucide-chevrons-up-down"
+            color="neutral" variant="ghost" square class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
               trailingIcon: 'text-dimmed ms-auto'
             }" />
         </UDropdownMenu>
@@ -34,8 +34,12 @@
 
     <div class="flex-1 flex flex-col">
       <div class="flex h-(--ui-header-height) shrink-0 items-center justify-between px-4 border-b border-default">
-        <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
-          @click="open = !open" />
+        <div class="flex items-center gap-2">
+          <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
+            @click="open = !open" />
+          <span class="text-[20px] font-medium">{{ pageTitle }}</span>
+        </div>
+
         <div class="hidden md:flex items-center gap-12">
           <div class="flex items-center gap-2">
             <CountryCurrencySwitch />
@@ -44,8 +48,9 @@
           <div class="flex items-center gap-2">
             <ThemeSwitch />
             <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
-              class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark) whitespace-nowrap">
+              class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark) whitespace-nowrap">
               {{ $t('general.logout') }}
+              <UIcon name="ic:baseline-logout"  class="text-red-700 dark:text-red-500"/>
             </button>
           </div>
         </div>
@@ -68,6 +73,8 @@ import { useAuthStore } from '../stores/customer/auth'
 const authStore = useAuthStore()
 const userStore = useUserStore()
 
+const route = useRoute()
+const pageTitle = computed(() => route.meta.name ?? 'Default Page')
 await userStore.getUser()
 
 const open = ref(true)
@@ -157,7 +164,7 @@ function getItems(state: 'collapsed' | 'expanded') {
 }
 
 // 
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { currentLang } from '@/router/langs'
 import { useFetchJson } from '@/composable/useFetchJson'
 import CountryCurrencySwitch from '@/components/inner/CountryCurrencySwitch.vue'
@@ -174,7 +181,7 @@ const menu = ref<TopMenuItem[] | null>(null)
 async function getTopMenu() {
   try {
     const { items } = await useFetchJson<TopMenuItem[]>('/api/v1/restricted/menu/get-top-menu')
-    
+
     menu.value = items
   } catch (err) {
     console.log(err)
diff --git a/bo/src/layouts/management.vue b/bo/src/layouts/management.vue
index 6bc68c9..18b0793 100644
--- a/bo/src/layouts/management.vue
+++ b/bo/src/layouts/management.vue
@@ -38,7 +38,8 @@
                 <div class="flex items-center gap-2">
                     <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
                         @click="open = !open" />
-                    <p class="font-bold text-xl">Customer-Management: <span class="text-[20px] font-medium">{{ pageTitle }}</span></p>
+                    <p class="font-bold text-xl">Customer-Management: <span class="text-[20px] font-medium">{{ pageTitle
+                    }}</span></p>
                 </div>
                 <div class="hidden md:flex items-center gap-12">
                     <div class="flex items-center gap-2">
@@ -48,12 +49,13 @@
                     <div class="flex items-center gap-2">
                         <ThemeSwitch />
                         <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
-                            class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark) whitespace-nowrap">
+                            class="flex gap-2 items-center   px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark) whitespace-nowrap">
                             {{ $t('general.logout') }}
+                            <UIcon name="ic:baseline-logout" class="text-red-700 dark:text-red-500" />
                         </button>
                     </div>
                 </div>
-            </div>  
+            </div>
 
             <div class="flex-1 p-4 bg-slate-50 dark:bg-(--main-dark)">
                 <slot />
diff --git a/bo/src/views/StorageView.vue b/bo/src/views/StorageView.vue
new file mode 100644
index 0000000..d055ed7
--- /dev/null
+++ b/bo/src/views/StorageView.vue
@@ -0,0 +1,12 @@
+<template>
+  <Default>
+    <div class="h-full">
+      <StorageFileBrowser initial-path="dest/src" />
+    </div>
+  </Default>
+</template>
+
+<script setup lang="ts">
+import Default from '@/layouts/default.vue'
+import StorageFileBrowser from '@/components/customer/StorageFileBrowser.vue'
+</script>
\ No newline at end of file

From f1a2f4c0b2c2a9509e91623a8144c12e3162e4f8 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Fri, 10 Apr 2026 11:38:36 +0200
Subject: [PATCH 10/11] fix: fix storage file

---
 bo/components.d.ts                            |   4 +-
 .../customer/StorageFileBrowser.vue           | 108 ++++++++++--------
 2 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/bo/components.d.ts b/bo/components.d.ts
index 5fb392d..45e6d33 100644
--- a/bo/components.d.ts
+++ b/bo/components.d.ts
@@ -13,7 +13,9 @@ declare module 'vue' {
   export interface GlobalComponents {
     ButtonGoToProfile: typeof import('./src/components/customer-management/ButtonGoToProfile.vue')['default']
     CartDetails: typeof import('./src/components/customer/CartDetails.vue')['default']
-    CategoryMenu: typeof import('./src/components/inner/categoryMenu.vue')['default']
+    CategoryMenu: typeof import('./src/components/inner/CategoryMenu.vue')['default']
+    copy: typeof import('./src/components/admin/ProductDetailView copy.vue')['default']
+    CountryCurrencySwitch: typeof import('./src/components/inner/CountryCurrencySwitch.vue')['default']
     Cs_PrivacyPolicyView: typeof import('./src/components/terms/cs_PrivacyPolicyView.vue')['default']
     Cs_TermsAndConditionsView: typeof import('./src/components/terms/cs_TermsAndConditionsView.vue')['default']
     En_PrivacyPolicyView: typeof import('./src/components/terms/en_PrivacyPolicyView.vue')['default']
diff --git a/bo/src/components/customer/StorageFileBrowser.vue b/bo/src/components/customer/StorageFileBrowser.vue
index 30f0a5b..bec8461 100644
--- a/bo/src/components/customer/StorageFileBrowser.vue
+++ b/bo/src/components/customer/StorageFileBrowser.vue
@@ -1,27 +1,37 @@
 <template>
     <component :is="Default || 'div'">
         <div class="p-4">
+
             <div v-if="loading" class="flex justify-center py-8">
                 <ULoader />
             </div>
+
             <div v-else-if="error" class="text-red-500">
                 {{ error }}
             </div>
-            <UTree v-else :items="treeItems" :expanded="expandedFolders">
+
+            <UTree v-if="showTree" :items="treeItems" v-model:expanded="expandedFolders" :key="treeKey" @toggle="onToggle" :get-key="item => item.value">
                 <template #item-wrapper="{ item }">
-                    <div class="flex items-start cursor-pointer" @click="onItemClick(item)">
+                    <div class="flex items-start cursor-pointer">
+
                         <div class="flex items-center gap-1">
                             <UIcon :name="item.icon" :size="30" />
+
                             <div class="flex gap-1 items-center">
-                                <span class="text-[15px] font-medium">{{ item.label }}</span>
+                                <span class="text-[15px] font-medium">
+                                    {{ item.label }}
+                                </span>
+
                                 <UButton v-if="!item.isFolder && item.fileName" size="xxs" color="neutral"
                                     variant="outline" icon="i-lucide-download"
                                     @click.stop="downloadFile(item.path, item.fileName)" :ui="{ base: 'ring-0!' }" />
                             </div>
                         </div>
+
                     </div>
                 </template>
             </UTree>
+
         </div>
     </component>
 </template>
@@ -54,106 +64,106 @@ interface TreeItem {
 const props = defineProps<{ initialPath?: string }>()
 
 const currentPath = ref(props.initialPath || '')
-const allData = ref<Map<string, FileItem[]>>(new Map())
+
+const allData = ref<Record<string, FileItem[]>>({})
 const expandedFolders = ref<string[]>([])
+const treeKey = ref(0)
+
 const loading = ref(false)
 const error = ref<string | null>(null)
 
+const showTree = computed(() => !error.value)
 
 async function fetchFolderContents(path: string): Promise<FileItem[]> {
     const url = `/api/v1/restricted/storage/list-content/${path}`
     const data = await useFetchJson<FileItemRaw[]>(url)
+
     return (data.items || []).map(i => ({
         name: i.Name,
         type: i.IsFolder ? 'folder' : 'file'
     }))
 }
 
-
 async function loadFolder(path: string) {
-    if (allData.value.has(path)) return
-    loading.value = true
-    error.value = null
+    if (allData.value[path]) return
+
     try {
         const items = await fetchFolderContents(path)
-        allData.value.set(path, items)
+        allData.value[path] = items
     } catch (e) {
         error.value = e instanceof Error ? e.message : 'Failed to load folder contents'
-    } finally {
-        loading.value = false
     }
 }
 
+function buildTree(path: string): TreeItem[] {
+    const items = allData.value[path] || []
 
-async function toggleFolder(item: TreeItem) {
-    if (!item.isFolder) return
-
-    if (!expandedFolders.value.includes(item.value)) {
-        expandedFolders.value.push(item.value)
-        await loadFolder(item.value)
-    } else {
-        expandedFolders.value = expandedFolders.value.filter(v => v !== item.value)
-    }
-}
-
-function onItemClick(item: TreeItem) {
-    if (item.isFolder) {
-        toggleFolder(item)
-    }
-}
-
-
-function buildTreeItems(items: FileItem[], path: string): TreeItem[] {
     return items.map(item => {
         const itemPath = path ? `${path}/${item.name}` : item.name
         const isFolder = item.type === 'folder'
 
-        const children = isFolder
-            ? buildTreeItems(allData.value.get(itemPath) || [], itemPath)
-            : undefined
+        const isExpanded = expandedFolders.value.includes(itemPath)
+        const isLoaded = !!allData.value[itemPath]
 
         return {
             label: item.name,
-
             icon: isFolder ? 'fxemoji:folder' : 'flat-color-icons:file',
             isFolder,
             path: isFolder ? itemPath : path,
             value: itemPath,
             fileName: isFolder ? undefined : item.name,
-            children
+
+            children: isFolder && isExpanded && isLoaded
+                ? buildTree(itemPath)
+                : []
         }
     })
 }
 
+const treeItems = computed(() => buildTree(currentPath.value))
+
+async function toggleFolder(item: TreeItem) {
+    if (!item.isFolder) return
+
+    const isOpen = expandedFolders.value.includes(item.value)
+
+    if (!isOpen) {
+        await loadFolder(item.value)
+        treeKey.value++
+    } else {
+        treeKey.value++
+    }
+}
+
+function onToggle(_event: unknown, item: TreeItem) {
+    console.log('Toggle:', item)
+    if (item.isFolder) {
+        toggleFolder(item)
+    }
+}
+
 async function downloadFile(path: string, fileName: string) {
     try {
         const response = await fetch(`/api/v1/restricted/storage/download-file/${path}/${fileName}`)
-        if (!response.ok) throw new Error('Failed to download file')
+        if (!response.ok) throw new Error('Download failed')
 
         const blob = await response.blob()
         const url = window.URL.createObjectURL(blob)
+
         const a = document.createElement('a')
         a.href = url
         a.download = fileName
+
         document.body.appendChild(a)
         a.click()
         a.remove()
+
         window.URL.revokeObjectURL(url)
     } catch (e) {
-        console.error('Download error:', e)
-        alert('Failed to download file')
+        console.error(e)
+        alert('Download failed')
     }
 }
 
-const treeItems = computed<TreeItem[]>(() => {
-    const items = allData.value.get(currentPath.value) || []
-    return buildTreeItems(items, currentPath.value)
-})
-
-loadFolder(currentPath.value).then(() => {
-    const rootItems = treeItems.value
-    if (rootItems.length > 0 && rootItems[0].isFolder) {
-        toggleFolder(rootItems[0])
-    }
-})
+loadFolder(currentPath.value)
 </script>
\ No newline at end of file

From b54645830ff664a6ca37c54792e858cc7992050f Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Tue, 14 Apr 2026 08:55:53 +0200
Subject: [PATCH 11/11] fix: store customer-product

---
 bo/components.d.ts                            |   1 +
 bo/src/components/admin/FavoriteProducts.vue  |  12 ++
 bo/src/components/admin/PageProducts.vue      |   4 +-
 bo/src/components/admin/UsersList.vue         |   3 +-
 bo/src/components/admin/UsersSearch.vue       |   2 +-
 .../customer-management/Profile.vue           |   2 +-
 bo/src/components/customer/PageProduct.vue    | 154 +++++++++++-------
 bo/src/components/customer/PageProducts.vue   | 117 +++++++------
 .../customer/StorageFileBrowser.vue           |  10 +-
 bo/src/layouts/management.vue                 |  26 +--
 bo/src/stores/customer/customer-product.ts    |  86 ++++++++++
 11 files changed, 276 insertions(+), 141 deletions(-)
 create mode 100644 bo/src/components/admin/FavoriteProducts.vue
 create mode 100644 bo/src/stores/customer/customer-product.ts

diff --git a/bo/components.d.ts b/bo/components.d.ts
index 45e6d33..361fcb7 100644
--- a/bo/components.d.ts
+++ b/bo/components.d.ts
@@ -20,6 +20,7 @@ declare module 'vue' {
     Cs_TermsAndConditionsView: typeof import('./src/components/terms/cs_TermsAndConditionsView.vue')['default']
     En_PrivacyPolicyView: typeof import('./src/components/terms/en_PrivacyPolicyView.vue')['default']
     En_TermsAndConditionsView: typeof import('./src/components/terms/en_TermsAndConditionsView.vue')['default']
+    FavoriteProducts: typeof import('./src/components/admin/FavoriteProducts.vue')['default']
     LangSwitch: typeof import('./src/components/inner/LangSwitch.vue')['default']
     PageAddresses: typeof import('./src/components/customer/PageAddresses.vue')['default']
     PageCarts: typeof import('./src/components/customer/PageCarts.vue')['default']
diff --git a/bo/src/components/admin/FavoriteProducts.vue b/bo/src/components/admin/FavoriteProducts.vue
new file mode 100644
index 0000000..669e96e
--- /dev/null
+++ b/bo/src/components/admin/FavoriteProducts.vue
@@ -0,0 +1,12 @@
+<template>
+    <component :is="Default || 'div'">
+        <div>
+
+        </div>
+    </component>
+</template>
+
+<script setup lang="ts">
+import Default from '@/layouts/default.vue';
+
+</script>
\ No newline at end of file
diff --git a/bo/src/components/admin/PageProducts.vue b/bo/src/components/admin/PageProducts.vue
index c2d4e26..dbbd60a 100644
--- a/bo/src/components/admin/PageProducts.vue
+++ b/bo/src/components/admin/PageProducts.vue
@@ -141,7 +141,7 @@ async function fetchProductList() {
     if (route.params.category_id)
         params.append('category_id', String(route.params.category_id))
 
-    const url = `/api/v1/restricted/list/list-products?elems=${perPage.value}&${params.toString()}`
+    const url = `/api/v1/restricted/product/list?elems=${perPage.value}&${params.toString()}`
     try {
         const response = await useFetchJson<ApiResponse>(url)
         productsList.value = response.items || []
@@ -161,7 +161,7 @@ function goToProduct(productId: number, linkRewrite: string) {
     }
     localStorage.setItem('back_from_product', JSON.stringify(path))
     router.push({
-        name: 'customer-product-details',
+        name: 'admin-product-details',
         params: { product_id: productId, link_rewrite: linkRewrite }
     })
 }
diff --git a/bo/src/components/admin/UsersList.vue b/bo/src/components/admin/UsersList.vue
index e40124c..ae63ab3 100644
--- a/bo/src/components/admin/UsersList.vue
+++ b/bo/src/components/admin/UsersList.vue
@@ -1,7 +1,6 @@
 <template>
     <component :is="Default || 'div'">
         <div class="flex flex-col md:flex-row gap-10">
-            <CategoryMenu />
             <div class="w-full flex flex-col items-center gap-4">
                 <UTable :data="usersList" :columns="columns" class="flex-1 w-full"
                     :ui="{ root: 'max-w-100wv overflow-auto!' }" />
@@ -194,7 +193,7 @@ const columns: TableColumn<Customer>[] = [
         cell: ({ row }) => {
             const userId = row.original.user_id
             return h(UButton, {
-                color: 'primary',
+                color: 'info',
                 size: 'sm',
                 variant: 'soft',
                 onClick: () => {
diff --git a/bo/src/components/admin/UsersSearch.vue b/bo/src/components/admin/UsersSearch.vue
index 3f2844d..1db9f33 100644
--- a/bo/src/components/admin/UsersSearch.vue
+++ b/bo/src/components/admin/UsersSearch.vue
@@ -222,7 +222,7 @@ const columns: TableColumn<Customer>[] = [
         cell: ({ row }) => {
             const userId = row.original.user_id
             return h(UButton, {
-                color: 'primary',
+                color: 'info',
                 size: 'sm',
                 variant: 'soft',
                 onClick: () => {
diff --git a/bo/src/components/customer-management/Profile.vue b/bo/src/components/customer-management/Profile.vue
index aa9dee8..0d76cc3 100644
--- a/bo/src/components/customer-management/Profile.vue
+++ b/bo/src/components/customer-management/Profile.vue
@@ -8,4 +8,4 @@
 <script setup lang="ts">
 import Management from '@/layouts/management.vue';
 
-</script>
\ No newline at end of file
+</script>   
\ No newline at end of file
diff --git a/bo/src/components/customer/PageProduct.vue b/bo/src/components/customer/PageProduct.vue
index 0e10ce5..4a992d6 100644
--- a/bo/src/components/customer/PageProduct.vue
+++ b/bo/src/components/customer/PageProduct.vue
@@ -1,75 +1,84 @@
 <template>
     <component :is="Default || 'div'">
-    <div class="">
-        <div class="flex md:flex-row flex-col justify-between gap-8 my-6">
-            <div class="flex-1">
-                <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-8 flex items-center justify-center min-h-[300px] ">
-                    <img :src="selectedColor?.image || productData.image" :alt="productData.name"
-                        class="max-w-full h-auto object-contain" />
-                </div>
-            </div>
-            <div class="flex-1 flex flex-col gap-4">
-                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
-                    {{ productData.name }}
-                </h1>
-                <p class="text-gray-600 dark:text-gray-300">
-                    {{ productData.description }}
-                </p>
-                <div class="text-3xl font-bold text-(--text-sky-light) dark:text-(--text-sky-dark)">
-                    {{ productData.price }}
-                </div>
-                <div class="flex flex-col">
-                    <div class="flex gap-2">
-                        <span class="text-gray-500 dark:text-gray-400">Dimensions:</span>
-                        <p class="font-medium dark:text-white">{{ productData.dimensions }}</p>
+        <div class="">
+            <div class="flex md:flex-row flex-col justify-between gap-8 my-6">
+                <div class="flex-1">
+                    <div
+                        class="bg-gray-100 dark:bg-gray-800 rounded-lg p-8 flex items-center justify-center min-h-[300px] ">
+                        <img :src="selectedColor?.image || productData.image" :alt="productData.name"
+                            class="max-w-full h-auto object-contain" />
                     </div>
-                    <div class="flex gap-2">
-                        <span class="text-gray-500 dark:text-gray-400">Seat Height:</span>
-                        <p class="font-medium dark:text-white">{{ productData.seatHeight }}</p>
+                </div>
+                <div class="flex-1 flex flex-col gap-4">
+                    <div class="flex justify-between items-center">
+                        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+                            {{ productData.name }}
+                        </h1>
+
+                        <UIcon name="material-symbols:favorite"
+                            class="cursor-pointer text-2xl transition hover:scale-110"
+                            :class="productData.is_favorite ? 'text-red-500' : 'text-gray-400'"
+                            @click="toggleFavorite" />
+                    </div>
+                    <p class="text-gray-600 dark:text-gray-300">
+                        {{ productData.description }}
+                    </p>
+                    <div class="text-3xl font-bold text-(--text-sky-light) dark:text-(--text-sky-dark)">
+                        {{ productData.price }}
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="flex gap-2">
+                            <span class="text-gray-500 dark:text-gray-400">Dimensions:</span>
+                            <p class="font-medium dark:text-white">{{ productData.dimensions }}</p>
+                        </div>
+                        <div class="flex gap-2">
+                            <span class="text-gray-500 dark:text-gray-400">Seat Height:</span>
+                            <p class="font-medium dark:text-white">{{ productData.seatHeight }}</p>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="flex md:flex-row flex-col justify-between md:items-end items-start gap-5 md:gap-0 md:mb-8 mb-4">
-            <div class="flex flex-col gap-3">
-                <span class="text-sm text-(--text-sky-light) dark:text-(--text-sky-dark) ">Colors:</span>
-                <div class="flex gap-2">
-                    <button v-for="color in productData.colors" :key="color.id" @click="selectedColor = color"
-                        class="w-10 h-10 border-2 transition-all" :class="selectedColor?.id === color.id
-                            ? 'border-(--accent-blue-light) ring-2 ring-blue-600 ring-offset-2'
-                            : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'"
-                        :style="{ backgroundColor: color.hex }" :title="color.name" />
+            <div class="flex md:flex-row flex-col justify-between md:items-end items-start gap-5 md:gap-0 md:mb-8 mb-4">
+                <div class="flex flex-col gap-3">
+                    <span class="text-sm text-(--text-sky-light) dark:text-(--text-sky-dark) ">Colors:</span>
+                    <div class="flex gap-2">
+                        <button v-for="color in productData.colors" :key="color.id" @click="selectedColor = color"
+                            class="w-10 h-10 border-2 transition-all" :class="selectedColor?.id === color.id
+                                ? 'border-(--accent-blue-light) ring-2 ring-blue-600 ring-offset-2'
+                                : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'"
+                            :style="{ backgroundColor: color.hex }" :title="color.name" />
+                    </div>
+                </div>
+                <div class="flex gap-5 items-end">
+                    <UInputNumber v-model="value" />
+                    <UButton color="primary"
+                        class="px-14! bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
+                        Add to Cart
+                    </UButton>
                 </div>
             </div>
-            <div class="flex gap-5 items-end">
-                <UInputNumber v-model="value" />
-                <UButton color="primary" class="px-14! bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
-                    Add to Cart
-                </UButton>
+            <ProductCustomization />
+            <hr class="border-t border-(--border-light) dark:border-(--border-dark) mb-8" />
+            <div class="mb-6 w-[100%] xl:w-[60%]">
+                <div class="grid grid-cols-2 lg:grid-cols-4 gap-10 mb-8">
+                    <UButton v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="[
+                        'px-15 py-2 cursor-pointer sm:text-nowrap flex items-center! justify-center!',
+                        activeTab === tab.id
+                            ? 'bg-blue-600 hover:text-black hover:dark:text-white text-white'
+                            : 'text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
+                    ]" variant="ghost">
+                        {{ tab.label }}
+                    </UButton>
+                </div>
+                <div class="py-5 px-3 bg-(--second-light) dark:bg-(--main-dark) rounded-md">
+                    <p class="dark:text-white whitespace-pre-line">
+                        {{ activeTabContent }}
+                    </p>
+                </div>
             </div>
+            <hr class="border-t border-(--border-light) dark:border-(--border-dark) mb-8" />
+            <ProductVariants />
         </div>
-        <ProductCustomization />
-        <hr class="border-t border-(--border-light) dark:border-(--border-dark) mb-8" />
-        <div class="mb-6 w-[100%] xl:w-[60%]">
-            <div class="grid grid-cols-2 lg:grid-cols-4 gap-10 mb-8">
-                <UButton v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="[
-                    'px-15 py-2 cursor-pointer sm:text-nowrap flex items-center! justify-center!',
-                    activeTab === tab.id
-                        ? 'bg-blue-600 hover:text-black hover:dark:text-white text-white'
-                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
-                ]" variant="ghost">
-                    {{ tab.label }}
-                </UButton>
-            </div>
-            <div class="py-5 px-3 bg-(--second-light) dark:bg-(--main-dark) rounded-md">
-                <p class="dark:text-white whitespace-pre-line">
-                    {{ activeTabContent }}
-                </p>
-            </div>
-        </div>
-        <hr class="border-t border-(--border-light) dark:border-(--border-dark) mb-8" />
-        <ProductVariants />
-    </div>
     </component>
 </template>
 
@@ -78,6 +87,8 @@ import { ref, computed } from 'vue'
 import ProductCustomization from './components/ProductCustomization.vue'
 import ProductVariants from './components/ProductVariants.vue'
 import Default from '@/layouts/default.vue'
+import { useFetchJson } from '@/composable/useFetchJson'
+import { useRoute } from 'vue-router'
 interface Color {
     id: string
     name: string
@@ -97,6 +108,7 @@ interface ProductData {
     howToUseText: string
     productDetailsText: string
     documentsText: string
+    is_favorite: boolean
 }
 
 const activeTab = ref('description')
@@ -157,6 +169,24 @@ const activeTabContent = computed(() => {
 if (productData.colors.length > 0) {
     selectedColor.value = productData.colors[0] as Color
 }
+
+const route = useRoute()
+
+async function toggleFavorite() {
+    const url = `/api/v1/restricted/product/favorite/${route.params.product_id}`
+
+    try {
+        if (!productData.is_favorite) {
+            await useFetchJson(url, { method: 'POST' })
+        } else {
+            await useFetchJson(url, { method: 'DELETE' })
+        }
+
+        productData.is_favorite = !productData.is_favorite
+    } catch (e: unknown) {
+        console.error(e)
+    }
+}
 </script>
 
 <style scoped>
diff --git a/bo/src/components/customer/PageProducts.vue b/bo/src/components/customer/PageProducts.vue
index a9376c9..e07ef6f 100644
--- a/bo/src/components/customer/PageProducts.vue
+++ b/bo/src/components/customer/PageProducts.vue
@@ -11,27 +11,30 @@
                     </template>
 </UNavigationMenu> -->
                 <h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Products</h1>
-                <div v-if="loading" class="text-center py-8">
+                <div v-if="customerProductStore.loading" class="text-center py-8">
                     <span class="text-gray-600 dark:text-gray-400">Loading products...</span>
                 </div>
-                <div v-else-if="error" class="mb-4 p-3 bg-red-100 text-red-700 rounded">
-                    {{ error }}
+                <div v-else-if="customerProductStore.error" class="mb-4 p-3 bg-red-100 text-red-700 rounded">
+                    {{ customerProductStore.error }}
                 </div>
                 <div v-else class="overflow-x-auto">
                     <div class="flex gap-2">
                         <CategoryMenu />
-                        <UTable :data="productsList" :columns="columns" class="flex-1">
+                        <UTable :data="customerProductStore.productsList" :columns="columns" class="flex-1">
                             <template #expanded="{ row }">
-                                <UTable :data="productsList.slice(0, 3)" :columns="columnsChild" :ui="{
-                                    thead: 'hidden'
-                                }" />
+                                <UTable :data="customerProductStore.productsList.slice(0, 3)" :columns="columnsChild"
+                                    :ui="{
+                                        thead: 'hidden'
+                                    }" />
                             </template>
                         </UTable>
                     </div>
                     <div class="flex justify-center items-center py-8">
-                        <UPagination v-model:page="page" :total="total" :page-size="perPage" />
+                        <UPagination v-model:page="page" :total="customerProductStore.total"
+                            :page-size="customerProductStore.perPage" />
                     </div>
-                    <div v-if="productsList.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
+                    <div v-if="customerProductStore.productsList.length === 0"
+                        class="text-center py-8 text-gray-500 dark:text-gray-400">
                         No products found
                     </div>
                 </div>
@@ -42,20 +45,15 @@
 
 <script setup lang="ts">
 import { ref, watch, h, resolveComponent, computed } from 'vue'
-import { useFetchJson } from '@/composable/useFetchJson'
 import Default from '@/layouts/default.vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { TableColumn } from '@nuxt/ui'
 import CategoryMenu from '../inner/CategoryMenu.vue'
+import { useCustomerProductStore } from '@/stores/customer/customer-product'
+import type { Product } from '@/stores/customer/customer-product'
 
-interface Product {
-    reference: number
-    product_id: number
-    name: string
-    image_link: string
-    link_rewrite: string
-}
 
+const customerProductStore = useCustomerProductStore()
 const router = useRouter()
 const route = useRoute()
 
@@ -101,18 +99,6 @@ const sortField = computed({
     }
 })
 
-const perPage = ref(15)
-const total = ref(0)
-
-interface ApiResponse {
-    message: string
-    items: Product[]
-    count: number
-}
-
-const productsList = ref<Product[]>([])
-const loading = ref(true)
-const error = ref<string | null>(null)
 const filters = computed<Record<string, string>>({
     get: () => {
         const q = { ...route.query }
@@ -157,36 +143,16 @@ const updateFilter = debounce((columnId: string, val: string) => {
     filters.value = newFilters
 }, 400)
 
-async function fetchProductList() {
-    loading.value = true
-    error.value = null
 
-    const params = new URLSearchParams()
-
-    Object.entries(route.query).forEach(([key, value]) => {
-        if (value) params.append(key, String(value))
-    })
-
-    const url = `/api/v1/restricted/list/list-products?${params}`
-
-    try {
-        const response = await useFetchJson<ApiResponse>(url)
-        productsList.value = response.items || []
-        total.value = response.count || 0
-    } catch (e: unknown) {
-        error.value = e instanceof Error ? e.message : 'Failed to load products'
-    } finally {
-        loading.value = false
-    }
-}
 
 function goToProduct(productId: number) {
     router.push({
-        name: 'product-detail',
-        params: { id: productId }
+        name: 'customer-product-details',
+        params: { product_id: productId }
     })
 }
 
+
 const selectedCount = ref({
     product_id: null,
     count: 0
@@ -205,7 +171,7 @@ const UInput = resolveComponent('UInput')
 const UButton = resolveComponent('UButton')
 const UIcon = resolveComponent('UIcon')
 
-const columns: TableColumn<Payment>[] = [
+const columns: TableColumn<Product>[] = [
     {
         id: 'expand',
         cell: ({ row }) =>
@@ -351,6 +317,35 @@ const columns: TableColumn<Payment>[] = [
                 variant: 'solid'
             }, 'Add to cart')
         },
+    },
+    {
+        accessorKey: 'count',
+        header: '',
+        cell: ({ row }) => {
+            return h(UButton, {
+                onClick: () => {
+                    goToProduct(row.original.product_id)
+                },
+                class: 'cursor-pointer',
+                color: 'info',
+                variant: 'soft'
+            }, () => 'Show product')
+        },
+    },
+    {
+        accessorKey: 'counta',
+        header: '',
+        cell: ({ row }) => {
+            return h(UIcon, {
+                onClick: () => customerProductStore.toggleFavorite(row.original),
+                class: [
+                    'cursor-pointer text-[20px] transition-transform duration-200 hover:scale-125',
+                    row.original.is_favorite ? 'text-red-500' : 'text-blue-500'
+                ],
+                name: 'material-symbols:favorite',
+                variant: 'soft',
+            })
+        }
     }
 ]
 
@@ -417,13 +412,27 @@ const columnsChild: TableColumn<Payment>[] = [
                 variant: 'solid'
             }, 'Add to cart')
         },
+    },
+    {
+        accessorKey: 'count',
+        header: '',
+        cell: ({ row }) => {
+            return h(UButton, {
+                onClick: () => {
+                    goToProduct(row.original.product_id)
+                },
+                class: 'cursor-pointer',
+                color: 'info',
+                variant: 'soft'
+            }, () => 'Show product')
+        },
     }
 ]
 
 watch(
     () => route.query,
     () => {
-        fetchProductList()
+        customerProductStore.fetchProductList()
     },
     { immediate: true }
 )
diff --git a/bo/src/components/customer/StorageFileBrowser.vue b/bo/src/components/customer/StorageFileBrowser.vue
index bec8461..a003e7f 100644
--- a/bo/src/components/customer/StorageFileBrowser.vue
+++ b/bo/src/components/customer/StorageFileBrowser.vue
@@ -1,37 +1,29 @@
 <template>
     <component :is="Default || 'div'">
         <div class="p-4">
-
             <div v-if="loading" class="flex justify-center py-8">
                 <ULoader />
             </div>
-
             <div v-else-if="error" class="text-red-500">
                 {{ error }}
             </div>
-
             <UTree v-if="showTree" :items="treeItems" v-model:expanded="expandedFolders" :key="treeKey" @toggle="onToggle" :get-key="item => item.value">
                 <template #item-wrapper="{ item }">
-                    <div class="flex items-start cursor-pointer">
-
+                    <div class="flex items-start cursor-pointer" @click.stop="!item.isFolder">
                         <div class="flex items-center gap-1">
                             <UIcon :name="item.icon" :size="30" />
-
                             <div class="flex gap-1 items-center">
                                 <span class="text-[15px] font-medium">
                                     {{ item.label }}
                                 </span>
-
                                 <UButton v-if="!item.isFolder && item.fileName" size="xxs" color="neutral"
                                     variant="outline" icon="i-lucide-download"
                                     @click.stop="downloadFile(item.path, item.fileName)" :ui="{ base: 'ring-0!' }" />
                             </div>
                         </div>
-
                     </div>
                 </template>
             </UTree>
-
         </div>
     </component>
 </template>
diff --git a/bo/src/layouts/management.vue b/bo/src/layouts/management.vue
index 18b0793..3d93339 100644
--- a/bo/src/layouts/management.vue
+++ b/bo/src/layouts/management.vue
@@ -39,7 +39,7 @@
                     <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
                         @click="open = !open" />
                     <p class="font-bold text-xl">Customer-Management: <span class="text-[20px] font-medium">{{ pageTitle
-                    }}</span></p>
+                            }}</span></p>
                 </div>
                 <div class="hidden md:flex items-center gap-12">
                     <div class="flex items-center gap-2">
@@ -78,8 +78,6 @@ const pageTitle = computed(() => route.meta.name ?? 'Default Page')
 const authStore = useAuthStore()
 const userStore = useUserStore()
 
-await userStore.getUser()
-
 const open = ref(true)
 const colorMode = useColorMode()
 
@@ -175,16 +173,17 @@ import LangSwitch from '@/components/inner/LangSwitch.vue'
 import ThemeSwitch from '@/components/inner/ThemeSwitch.vue'
 import type { LabelTrans, TopMenuItem } from '@/types'
 import { useUserStore } from '@/stores/user'
-import { components } from 'reka-ui/constant'
-
+import { watch } from 'vue'
 
 const router = useRouter()
 
 const menu = ref<TopMenuItem[] | null>(null)
 
-async function getTopMenu() {
+const Id =Number(route.params.user_id)
+
+async function cmGetTopMenu() {
     try {
-        const { items } = await useFetchJson<TopMenuItem[]>('/api/v1/restricted/menu/get-top-menu')
+        const { items } = await useFetchJson<TopMenuItem[]>(`/api/v1/restricted/menu/get-top-menu?target_user_id=${Id}`)
 
         menu.value = items
     } catch (err) {
@@ -192,9 +191,16 @@ async function getTopMenu() {
     }
 }
 
-onMounted(() => {
-    getTopMenu()
-})
+console.log(route)
+watch(
+    () => route.params.user_id,
+    () => {
+        if (route.params.user_id) {
+            cmGetTopMenu()
+        }
+    },
+    { immediate: true }
+)
 
 const menuItems = computed(() => {
     if (!menu.value?.length) return []
diff --git a/bo/src/stores/customer/customer-product.ts b/bo/src/stores/customer/customer-product.ts
new file mode 100644
index 0000000..897271f
--- /dev/null
+++ b/bo/src/stores/customer/customer-product.ts
@@ -0,0 +1,86 @@
+import { useFetchJson } from '@/composable/useFetchJson'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+
+export interface Product {
+    id: number
+    image: string
+    name: string
+    productDetails?: string
+    product_id: number
+    is_favorite?: boolean
+}
+
+export interface ProductResponse {
+    items: Product[]
+    items_count: number
+}
+
+export interface ApiResponse {
+    message: string
+    items: Product[]
+    count: number
+}
+
+export const useCustomerProductStore = defineStore('customer-product', () => {
+    const loading = ref(true)
+    const error = ref<string | null>(null)
+    const route = useRoute()
+    const productsList = ref<Product[]>([])
+    const total = ref(0)
+    const perPage = ref(15)
+
+    async function fetchProductList() {
+        loading.value = true
+        error.value = null
+
+        const params = new URLSearchParams()
+
+        Object.entries(route.query).forEach(([key, value]) => {
+            if (value) params.append(key, String(value))
+        })
+
+        const url = `/api/v1/restricted/product/list?${params}`
+
+
+        try {
+            const response = await useFetchJson<ApiResponse>(url)
+            productsList.value = response.items || []
+            total.value = response.count || 0
+        } catch (e: unknown) {
+            error.value = e instanceof Error ? e.message : 'Failed to load products'
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function toggleFavorite(product: Product) {
+        const productId = product.product_id
+        const isFavorite = product.is_favorite
+
+        const url = `/api/v1/restricted/product/favorite/${productId}`
+
+        try {
+            if (!isFavorite) {
+                await useFetchJson(url, { method: 'POST' })
+            } else {
+                await useFetchJson(url, { method: 'DELETE' })
+            }
+            product.is_favorite = !isFavorite
+        } catch (e: unknown) {
+            error.value = e instanceof Error ? e.message : 'Failed to update favorite'
+        }
+    }
+
+    return {
+        fetchProductList,
+        toggleFavorite,
+        productsList,
+        total,
+        loading,
+        error,
+        perPage
+    }
+})