From 0cee3e5cb761d9f1b605711660838d76a482efbe Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Tue, 24 Mar 2026 12:26:23 +0100
Subject: [PATCH] fix: layouts

---
 bo/components.d.ts                            |   1 +
 bo/src/components/admin/ProductDetailView.vue |   4 +
 bo/src/components/admin/ProductsView.vue      |  60 ++++------
 bo/src/components/customer/Cart1.vue          |   4 +-
 bo/src/components/customer/PageAddresses.vue  |   4 +-
 bo/src/components/customer/PageCart.vue       |   4 +-
 .../components/customer/PageCreateAccount.vue |   4 +-
 .../components/customer/PageCustomerData.vue  |   4 +-
 .../customer/PageProductCardFull.vue          |   4 +-
 .../components/customer/PageProductsList.vue  | 108 ++++++++++--------
 bo/src/components/inner/categoryMenu.vue      |  40 +++++++
 bo/src/layouts/default.vue                    |  45 +-------
 bo/src/router/index.ts                        |  35 ++----
 bo/src/stores/category.ts                     |  40 +++++++
 bo/src/views/CategoryView.vue                 |  25 +++-
 bo/src/views/RepoChartView.vue                |   3 +
 16 files changed, 224 insertions(+), 161 deletions(-)
 create mode 100644 bo/src/components/inner/categoryMenu.vue
 create mode 100644 bo/src/stores/category.ts

diff --git a/bo/components.d.ts b/bo/components.d.ts
index d63c5d2..85bba39 100644
--- a/bo/components.d.ts
+++ b/bo/components.d.ts
@@ -12,6 +12,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Cart1: typeof import('./src/components/customer/Cart1.vue')['default']
+    CategoryMenu: typeof import('./src/components/inner/categoryMenu.vue')['default']
     CompanyAccountView: typeof import('./src/components/customer/CompanyAccountView.vue')['default']
     Cs_PrivacyPolicyView: typeof import('./src/components/terms/cs_PrivacyPolicyView.vue')['default']
     Cs_TermsAndConditionsView: typeof import('./src/components/terms/cs_TermsAndConditionsView.vue')['default']
diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index c40ac70..2ce5806 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -1,4 +1,6 @@
 <template>
+  
+  <component :is="Default || 'div'">
   <div class="container my-10 mx-auto ">
 
     <div
@@ -112,6 +114,7 @@
       </div>
     </div>
   </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -120,6 +123,7 @@ import { useProductStore } from '@/stores/product'
 import { useEditable } from '@/composable/useConteditable'
 import { langs } from '@/router/langs'
 import type { Language } from '@/types'
+import Default from '@/layouts/default.vue'
 
 const activeTab = ref('description')
 const productStore = useProductStore()
diff --git a/bo/src/components/admin/ProductsView.vue b/bo/src/components/admin/ProductsView.vue
index d20188d..c1bc459 100644
--- a/bo/src/components/admin/ProductsView.vue
+++ b/bo/src/components/admin/ProductsView.vue
@@ -6,6 +6,7 @@ import { useProductStore, type Product } from '@/stores/product'
 import { useI18n } from 'vue-i18n'
 import type { TableColumn } from '@nuxt/ui'
 import { h } from 'vue'
+import Default from '@/layouts/default.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -29,13 +30,13 @@ onMounted(() => {
 // Filtered products
 // const filteredProducts = computed(() => {
 //   console.log(productStore.products);
-  
+
 //   return productStore.products.filter(product => {
 //     const matchesName = product.name.toLowerCase().includes(searchName.value.toLowerCase())
 //     const matchesCode = product.code.toLowerCase().includes(searchCode.value.toLowerCase())
 //     const matchesPriceFrom = priceFromFilter.value === null || product.priceFrom >= priceFromFilter.value
 //     const matchesPriceTo = priceToFilter.value === null || product.priceTo <= priceToFilter.value
-    
+
 //     return matchesName && matchesCode && matchesPriceFrom && matchesPriceTo
 //   })
 // })
@@ -153,13 +154,14 @@ function clearFilters() {
 </script>
 
 <template>
+  <component :is="Default || 'div'">
   <div class="container">
     <div class="p-6 bg-white dark:bg-(--black) min-h-screen font-sans">
-      <div >
+      <div>
         <!-- v-html="productStore.products" -->
       </div>
       <h1 class="text-2xl font-bold mb-6 text-black dark:text-white">{{ t('products.title') }}</h1>
-      
+
       <div v-if="!authStore.isAuthenticated" class="mb-4 p-3 bg-yellow-100 text-yellow-700 rounded">
         {{ t('products.login_to_view') }}
       </div>
@@ -176,50 +178,33 @@ function clearFilters() {
 
       <div v-if="authStore.isAuthenticated && !productStore.loading && !productStore.error" class="space-y-4">
         <!-- Filter Block -->
-        <div class="flex flex-wrap gap-4 mb-4 p-4 border border-(--border-light) dark:border-(--border-dark) rounded bg-gray-50 dark:bg-gray-800">
+        <div
+          class="flex flex-wrap gap-4 mb-4 p-4 border border-(--border-light) dark:border-(--border-dark) rounded bg-gray-50 dark:bg-gray-800">
           <div class="flex flex-col min-w-[180px]">
-            <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.search_by_name') }}</label>
-            <UInput 
-              v-model="searchName" 
-              :placeholder="t('products.search_name_placeholder')" 
-              @update:model-value="resetPage"
-              class="dark:text-white text-black"
-            />
+            <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.search_by_name')
+              }}</label>
+            <UInput v-model="searchName" :placeholder="t('products.search_name_placeholder')"
+              @update:model-value="resetPage" class="dark:text-white text-black" />
           </div>
           <div class="flex flex-col min-w-[180px]">
-            <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.search_by_code') }}</label>
-            <UInput 
-              v-model="searchCode" 
-              :placeholder="t('products.search_code_placeholder')" 
-              @update:model-value="resetPage"
-              class="dark:text-white text-black"
-            />
+            <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.search_by_code')
+              }}</label>
+            <UInput v-model="searchCode" :placeholder="t('products.search_code_placeholder')"
+              @update:model-value="resetPage" class="dark:text-white text-black" />
           </div>
           <div class="flex flex-col min-w-[120px]">
             <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.price_from') }}</label>
-            <UInput 
-              v-model="priceFromFilter" 
-              type="number"
-              :placeholder="t('products.price_from')" 
-              @update:model-value="resetPage"
-              class="dark:text-white text-black"
-            />
+            <UInput v-model="priceFromFilter" type="number" :placeholder="t('products.price_from')"
+              @update:model-value="resetPage" class="dark:text-white text-black" />
           </div>
           <div class="flex flex-col min-w-[120px]">
             <label class="mb-1 text-sm font-medium text-black dark:text-white">{{ t('products.price_to') }}</label>
-            <UInput 
-              v-model="priceToFilter" 
-              type="number"
-              :placeholder="t('products.price_to')" 
-              @update:model-value="resetPage"
-              class="dark:text-white text-black"
-            />
+            <UInput v-model="priceToFilter" type="number" :placeholder="t('products.price_to')"
+              @update:model-value="resetPage" class="dark:text-white text-black" />
           </div>
           <div class="flex items-end">
-            <button 
-              @click="clearFilters"
-              class="px-4 py-2 text-sm font-medium text-black dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
+            <button @click="clearFilters"
+              class="px-4 py-2 text-sm font-medium text-black dark:text-white bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
               {{ t('products.clear_filters') }}
             </button>
           </div>
@@ -254,4 +239,5 @@ function clearFilters() {
       </div>
     </div>
   </div>
+  </component>
 </template>
diff --git a/bo/src/components/customer/Cart1.vue b/bo/src/components/customer/Cart1.vue
index f32903e..2ae6fbd 100644
--- a/bo/src/components/customer/Cart1.vue
+++ b/bo/src/components/customer/Cart1.vue
@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
   <div class="container mx-auto mt-20">
     <h2
       class="font-semibold text-black dark:text-white pb-6 text-2xl">
@@ -47,6 +48,7 @@
       </UButton>
     </div>
   </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -54,7 +56,7 @@ import { useCartStore } from '@/stores/cart'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-
+import Default from '@/layouts/default.vue'
 const cartStore = useCartStore()
 const { t } = useI18n()
 const router = useRouter()
diff --git a/bo/src/components/customer/PageAddresses.vue b/bo/src/components/customer/PageAddresses.vue
index d2ae0d6..c4f9410 100644
--- a/bo/src/components/customer/PageAddresses.vue
+++ b/bo/src/components/customer/PageAddresses.vue
@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
     <div class="container mx-auto mt-20">
         <div class="flex flex-col gap-5 mb-6">
             <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
@@ -98,13 +99,14 @@
             </template>
         </UModal>
     </div>
+    </component>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { useAddressStore } from '@/stores/address'
 import { useI18n } from 'vue-i18n'
-
+import Default from '@/layouts/default.vue'
 const addressStore = useAddressStore()
 const { t } = useI18n()
 const searchQuery = ref('')
diff --git a/bo/src/components/customer/PageCart.vue b/bo/src/components/customer/PageCart.vue
index 2365081..833e0a5 100644
--- a/bo/src/components/customer/PageCart.vue
+++ b/bo/src/components/customer/PageCart.vue
@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
   <div class="container mx-auto mt-20 flex flex-col gap-5 md:gap-10">
     <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Cart') }}</h1>
     <div class="flex flex-col lg:flex-row gap-5 md:gap-10">
@@ -143,6 +144,7 @@
       </div>
     </div>
   </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -151,7 +153,7 @@ import { useCartStore } from '@/stores/cart'
 import { useAddressStore } from '@/stores/address'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-
+import Default from '@/layouts/default.vue'
 const cartStore = useCartStore()
 const addressStore = useAddressStore()
 const { t } = useI18n()
diff --git a/bo/src/components/customer/PageCreateAccount.vue b/bo/src/components/customer/PageCreateAccount.vue
index 16f4bab..ff55b44 100644
--- a/bo/src/components/customer/PageCreateAccount.vue
+++ b/bo/src/components/customer/PageCreateAccount.vue
@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
     <div class="container mx-auto mt-20">
         <div class="max-w-2xl mx-auto">
             <div class="flex flex-col gap-5 mb-6">
@@ -100,6 +101,7 @@
             </div>
         </div>
     </div>
+    </component>
 </template>
 
 <script setup lang="ts">
@@ -109,7 +111,7 @@ import { useCustomerStore } from '@/stores/customer'
 import { useAddressStore } from '@/stores/address'
 import { useI18n } from 'vue-i18n'
 import { useCartStore } from '@/stores/cart'
-
+import Default from '@/layouts/default.vue'
 const router = useRouter()
 const customerStore = useCustomerStore()
 const addressStore = useAddressStore()
diff --git a/bo/src/components/customer/PageCustomerData.vue b/bo/src/components/customer/PageCustomerData.vue
index b40d8b9..dbe2448 100644
--- a/bo/src/components/customer/PageCustomerData.vue
+++ b/bo/src/components/customer/PageCustomerData.vue
@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
     <div class="container mx-auto mt-20">
         <div class="flex flex-col gap-5 mb-6">
             <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Customer Data') }}</h1>
@@ -83,6 +84,7 @@
             </div>
         </div>
     </div>
+    </component>
 </template>
 
 <script setup lang="ts">
@@ -91,7 +93,7 @@ import { useRouter } from 'vue-router'
 import { useCustomerStore } from '@/stores/customer'
 import { useAddressStore } from '@/stores/address'
 import { useI18n } from 'vue-i18n'
-
+import Default from '@/layouts/default.vue'
 const router = useRouter()
 const customerStore = useCustomerStore()
 const addressStore = useAddressStore()
diff --git a/bo/src/components/customer/PageProductCardFull.vue b/bo/src/components/customer/PageProductCardFull.vue
index 807306d..fdff612 100644
--- a/bo/src/components/customer/PageProductCardFull.vue
+++ b/bo/src/components/customer/PageProductCardFull.vue
@@ -1,4 +1,5 @@
 <template>
+    <component :is="Default || 'div'">
     <div class="container mt-20 mx-auto">
         <div class="flex md:flex-row flex-col justify-between gap-8 my-6">
             <div class="flex-1">
@@ -69,13 +70,14 @@
         <hr class="border-t border-(--border-light) dark:border-(--border-dark) mb-8" />
         <ProductVariants />
     </div>
+    </component>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import ProductCustomization from './components/ProductCustomization.vue'
 import ProductVariants from './components/ProductVariants.vue'
-
+import Default from '@/layouts/default.vue'
 interface Color {
     id: string
     name: string
diff --git a/bo/src/components/customer/PageProductsList.vue b/bo/src/components/customer/PageProductsList.vue
index 099e06d..d8bacfa 100644
--- a/bo/src/components/customer/PageProductsList.vue
+++ b/bo/src/components/customer/PageProductsList.vue
@@ -1,58 +1,68 @@
 <template>
-    <div class="container mx-auto mt-20">
-        <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">
-            <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>
-        <div v-else class="overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                <thead class="bg-gray-50 dark:bg-gray-800">
-                    <tr>
-                        <th
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                            Image</th>
-                        <th
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                            Product ID</th>
-                        <th
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                            Name</th>
-                        <th
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                            Link</th>
-                    </tr>
-                </thead>
-                <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
-                    <tr v-for="product in productsList" :key="product.product_id"
-                        class="hover:bg-gray-50 dark:hover:bg-gray-800">
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <img :src="getImageUrl(product.ImageID, product.LinkRewrite,)" alt="product image"
-                                class="w-16 h-16 object-cover rounded" />
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{
-                            product.product_id }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ product.name }}
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 dark:text-blue-400">
-                            {{ product.LinkRewrite }}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <div v-if="productsList.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
-                No products found
+    <suspense>
+        <component :is="Default || 'div'">
+            <!-- <div class="w-64 h-128">
+                <CategoryMenu />
+            </div> -->
+
+            <div class="container mx-auto mt-20">
+                <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">
+                    <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>
+                <div v-else class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                        <thead class="bg-gray-50 dark:bg-gray-800">
+                            <tr>
+                                <th
+                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                    Image</th>
+                                <th
+                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                    Product ID</th>
+                                <th
+                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                    Name</th>
+                                <th
+                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                    Link</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+                            <tr v-for="product in productsList" :key="product.product_id"
+                                class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <img :src="getImageUrl(product.ImageID, product.LinkRewrite,)" alt="product image"
+                                        class="w-16 h-16 object-cover rounded" />
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{
+                                    product.product_id }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{
+                                    product.name }}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 dark:text-blue-400">
+                                    {{ product.LinkRewrite }}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div v-if="productsList.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
+                        No products found
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
+        </component>
+    </suspense>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, Suspense } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson'
-
+import Default from '@/layouts/default.vue'
+// import CategoryMenu from '@/components/inner/categoryMenu.vue'
 interface Product {
     product_id: number
     name: string
diff --git a/bo/src/components/inner/categoryMenu.vue b/bo/src/components/inner/categoryMenu.vue
new file mode 100644
index 0000000..a370c3c
--- /dev/null
+++ b/bo/src/components/inner/categoryMenu.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { getMenu } from '@/router/menu'
+import type { NavigationMenuItem } from '@nuxt/ui';
+import { ref } from 'vue';
+let menu = await getMenu() as NavigationMenuItem[]
+
+const openAll = ref(false)
+
+function adaptMenu(menu: NavigationMenuItem[]) {
+  for (const item of menu) {
+    if(item.children && item.children.length > 0){
+      console.log(item);
+      adaptMenu(item.children);
+      item.open = openAll.value
+      item.children.unshift({ label: item.label, icon: 'i-lucide-book-open', popover: item.label ,to: { name: 'category', params: item.params }})
+    } else {
+      item.to = { name: 'category', params: item.params };
+      item.icon = 'i-lucide-file-text'
+    }
+  }
+  return menu;
+}
+
+menu = adaptMenu(menu)
+
+const items = ref<NavigationMenuItem[][]>([
+  [
+    ...menu as NavigationMenuItem[]
+  ],
+ 
+])
+
+
+
+</script>
+
+<template>
+    <UNavigationMenu orientation="vertical" type="single" :items="items" class="p-4">
+    </UNavigationMenu>
+</template>
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index 377dade..c0618e5 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -1,53 +1,10 @@
 <script setup lang="ts">
 import TopBar from '@/components/TopBar.vue';
-import { getMenu } from '@/router/menu'
-import type { NavigationMenuItem } from '@nuxt/ui';
-import { on } from 'events';
-import { ref } from 'vue';
-let menu = await getMenu() as NavigationMenuItem[]
-
-function adaptMenu(menu) {
-  for (const item of menu) {
-    if (item.children && item.children.length > 0) {
-      adaptMenu(item.children);
-      // item.children.unshift({ label: item.label, icon: 'i-lucide-book-open', popover: item.label ,to: { name: 'category', params: item.params }})
-      // item.type = 'trigger'
-      // item.icon = 'i-lucide-book-open'
-      // item.onSelect(e){ console.log(e, 'adasdasdas'); }
-    } else {
-      // console.log(item.params);
-      item.to = { name: 'category', params: item.params };
-      item.icon = 'i-lucide-file-text'
-    }
-  }
-  return menu;
-}
-
-menu = adaptMenu(menu.children)
-
-console.log(menu);
-
-const items = ref<NavigationMenuItem[][]>([
-  [
-    
-    ...menu
-  ],
- 
-])
-
-
 </script>
+
 <template>
   <div class="h-screen grid grid-rows-[auto_1fr_auto]">
     <main class="p-10">
-      <div class="mt-24 bg-accented w-1/5 rounded-2xl">
-        <UNavigationMenu orientation="vertical" type="single" :items="items" class="p-4">
-        </UNavigationMenu>
-
-      </div>
-      <!-- <template #item>{{ item }}</template> -->
-      
-
       <TopBar/>
       <slot></slot>
     </main>
diff --git a/bo/src/router/index.ts b/bo/src/router/index.ts
index b9bf323..800a2e7 100644
--- a/bo/src/router/index.ts
+++ b/bo/src/router/index.ts
@@ -23,34 +23,23 @@ const router = createRouter({
     {
       path: '/:locale',
       children: [
-        { path: 'category/:category_id-:link_rewrite', component: () => import('../views/CategoryView.vue'), name: 'category' },
-        {
-          path: '',
-          component: Default,
-          children: [
-            { path: '', component: () => import('../views/RepoChartView.vue'), name: 'home' },
-            { path: 'products', component: () => import('../components/admin/ProductsView.vue'), name: 'products' },
-            { path: 'products-datail/', component: () => import('../components/admin/ProductDetailView.vue'), name: 'product-detail' },
-            { path: 'product-card-full/', component: () => import('../components/customer/PageProductCardFull.vue'), name: 'product-card-full' },
-            { path: 'addresses', component: () => import('../components/customer/PageAddresses.vue'), name: 'addresses' },
-            { path: 'customer-data', component: () => import('../components/customer/PageCustomerData.vue'), name: 'customer-data' },
-            { path: 'create-account', component: () => import('../components/customer/PageCreateAccount.vue'), name: 'create-account' },
-            { path: 'cart', component: () => import('../components/customer/PageCart.vue'), name: 'cart' },
-            { path: 'cart1', component: () => import('../components/customer/Cart1.vue'), name: 'cart1' },
-            { path: 'products-list', component: () => import('../components/customer/PageProductsList.vue'), name: 'products-list' },
-          ],
-        },
+        { path: 'category/:category_id-:link_rewrite', component: () => import('@/views/CategoryView.vue'), name: 'category' },
+        { path: 'products-datail', component: () => import('@/components/admin/ProductDetailView.vue'), name: 'product-detail' },
+        { path: '', component: () => import('@/views/RepoChartView.vue'), name: 'home' },
+        { path: 'products', component: () => import('@/components/admin/ProductsView.vue'), name: 'products' },
+        { path: 'product-card-full', component: () => import('@/components/customer/PageProductCardFull.vue'), name: 'product-card-full' },
+        { path: 'addresses', component: () => import('@/components/customer/PageAddresses.vue'), name: 'addresses' },
+        { path: 'customer-data', component: () => import('@/components/customer/PageCustomerData.vue'), name: 'customer-data' },
+        { path: 'create-account', component: () => import('@/components/customer/PageCreateAccount.vue'), name: 'create-account' },
+        { path: 'cart', component: () => import('@/components/customer/PageCart.vue'), name: 'cart' },
+        { path: 'cart1', component: () => import('@/components/customer/Cart1.vue'), name: 'cart1' },
+        { path: 'products-list', component: () => import('@/components/customer/PageProductsList.vue'), name: 'products-list' },
         { path: 'login', component: () => import('@/views/LoginView.vue'), name: 'login', meta: { guest: true, } },
         { path: 'register', component: () => import('@/views/RegisterView.vue'), name: 'register', meta: { guest: true } },
         { path: 'password-recovery', component: () => import('@/views/PasswordRecoveryView.vue'), name: 'password-recovery', meta: { guest: true } },
         { path: 'reset-password', component: () => import('@/views/ResetPasswordForm.vue'), name: 'reset-password', meta: { guest: true } },
         { path: 'verify-email', component: () => import('@/views/VerifyEmailView.vue'), name: 'verify-email', meta: { guest: true } },
-        // {
-        //   path: '',
-        //   component: Empty,
-        //   children: [
-        //   ],
-        // },
+
         {
           path: '/:pathMatch(.*)*',
           component: () => import('@/views/NotFoundView.vue'),
diff --git a/bo/src/stores/category.ts b/bo/src/stores/category.ts
new file mode 100644
index 0000000..1e70be4
--- /dev/null
+++ b/bo/src/stores/category.ts
@@ -0,0 +1,40 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+
+const products = [
+    {name: "product name", price: 342432},
+    {name: "product name", price: 342432},
+    {name: "product name", price: 342432},
+    {name: "product name", price: 342432},
+    {name: "product name", price: 342432},
+]
+
+// type CategoryProducts = {}
+
+export const useCategoryStore = defineStore('category', () => {
+    const id_category = ref(0)
+    const categoryProducts = ref(products)
+
+
+    function setCategoryID(id: number) {
+        id_category.value = id
+    }
+
+    async function getCategoryProducts() {
+        return new Promise<typeof products>((resolve) => {
+            setTimeout(() => {
+                console.log('Fetching products from category id: ', id_category.value);
+                resolve(categoryProducts.value)
+            }, 2000 * Math.random())
+        })
+    }
+    return {
+        id_category,
+        getCategoryProducts,
+        setCategoryID
+    }
+})
+
+
+
diff --git a/bo/src/views/CategoryView.vue b/bo/src/views/CategoryView.vue
index b24a8e6..44f24cf 100644
--- a/bo/src/views/CategoryView.vue
+++ b/bo/src/views/CategoryView.vue
@@ -3,8 +3,13 @@
         <div class="container mt-24">
             <div class="row">
                 <div class="col-12">
-                    <h1>Category</h1>
-                    {{ $route.params }}
+                    <h2 class="text-2xl">Category ID: {{ $route.params.category_id }}</h2>
+                    <div v-for="(p, i) in products" :key="i">
+                        <p>
+                            <span class="border-b-1 bg-red-100 px-4">{{ p.name }}</span>
+                            <span class="border-b-1 bg-red-100 px-4">{{ p.price }}</span>
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -15,7 +20,23 @@
 <script setup lang="ts">
 // import { useRoute } from 'vue-router';
 import Default from '@/layouts/default.vue';
+import { useCategoryStore } from '@/stores/category';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 // const route = useRoute()
 // console.log(route);
 
+const categoryStore = useCategoryStore()
+const route = useRoute()
+
+const products = ref([])
+
+watch(() => route.params, async (n) => {
+    categoryStore.setCategoryID(parseInt(n.category_id as string))
+    const res = await categoryStore.getCategoryProducts()
+    products.value = res
+
+}, { immediate: true })
+
+
 </script>
\ No newline at end of file
diff --git a/bo/src/views/RepoChartView.vue b/bo/src/views/RepoChartView.vue
index ebc8442..122d31b 100644
--- a/bo/src/views/RepoChartView.vue
+++ b/bo/src/views/RepoChartView.vue
@@ -15,6 +15,7 @@ import { useAuthStore } from '@/stores/auth'
 import { i18n } from '@/plugins/02_i18n'
 import type { TableColumn } from '@nuxt/ui'
 import { useI18n } from 'vue-i18n'
+import Default from '@/layouts/default.vue'
 
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
@@ -181,6 +182,7 @@ const columns = computed<TableColumn<IssueTimeSummary>[]>(() => [
 </script>
 
 <template>
+      <component :is="Default || 'div'">
     <div class="container mx-auto">
         <div class="p-6 bg-(--main-light) dark:bg-(--black) font-sans">
             <h1 class="text-2xl font-bold mb-6 text-black dark:text-white">{{ $t('repo_chart.repository_work_chart') }}
@@ -254,4 +256,5 @@ const columns = computed<TableColumn<IssueTimeSummary>[]>(() => [
             </div>
         </div>
     </div>
+    </component>
 </template>
\ No newline at end of file