Merge branch 'main' of ssh://git.ma-al.com:8822/goc_daniel/b2b into test

bo/src/components/TopBar.vue

@@ -1,14 +1,47 @@
 <script setup lang="ts">
+import { useFetchJson } from '@/composable/useFetchJson'
 import LangSwitch from './inner/langSwitch.vue'
 import ThemeSwitch from './inner/themeSwitch.vue'
 import { useAuthStore } from '@/stores/auth'
+import { computed, ref } from 'vue'
+import { currentLang } from '@/router/langs'
+import type { LabelTrans, TopMenuItem } from '@/types'
+import type { NavigationMenuItem } from '@nuxt/ui'
 
 const authStore = useAuthStore()
+let menu = ref()
+async function getTopMenu() {
+  try {
+    const { items } = await useFetchJson<TopMenuItem>('/api/v1/restricted/menu/get-top-menu')
+    menu.value = items
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+const menuItems = computed(() => transformMenu(menu.value[0].children, currentLang.value?.iso_code))
+function transformMenu(items: TopMenuItem[], locale: string | undefined): NavigationMenuItem[] {
+  return items.map((item) => {
+    let route = {
+      icon: 'i-lucide-house',
+      label: item.label.trans[locale as keyof LabelTrans].label,
+      children: item.children ? transformMenu(item.children, locale) : undefined,
+    }
+    if (item.params?.route) {
+      route = { ...route, ...{ to: { name: item.params.route.name, params: { locale: locale } } } }
+    } 
+
+    return route
+  })
+}
+
+await getTopMenu()
 </script>
 
 <template>
-  <header
-    class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
+  {{ menuItems }}
+  <!-- fixed top-0 left-0 right-0 z-50 -->
+  <header class="bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
       <div class="flex items-center justify-between h-14">
         <RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
@@ -17,29 +50,48 @@ const authStore = useAuthStore()
           </div>
           <span class="font-semibold text-gray-900 dark:text-white">B2B</span>
         </RouterLink>
-        <RouterLink :to="{ name: 'products-list' }">
+
+        <UNavigationMenu :items="menuItems" class="w-full" />
+
+        <!-- {{ router }} -->
+        <!-- <RouterLink :to="{ name: 'admin-products' }">
           products list
         </RouterLink>
-        <RouterLink :to="{ name: 'product-detail' }">
+        <RouterLink :to="{ name: 'admin-product-detail' }">
           product detail
         </RouterLink>
-        <RouterLink :to="{ name: 'product-card-full' }">
-          ProductCardFull
+        <RouterLink :to="{
+          name: 'customer-product', params: {
+            product_id: '51'
+          }
+        }">
+          Product (51)
         </RouterLink>
         <RouterLink :to="{ name: 'addresses' }">
           Addresses
         </RouterLink>
-        <RouterLink :to="{ name: 'customer-data' }">
+        <RouterLink :to="{ name: 'profile-details' }">
           Customer Data
         </RouterLink>
-        <RouterLink :to="{ name: 'carts' }">
-          Carts
+        <RouterLink :to="{ name: 'cart' }">
+          Cart
         </RouterLink>
+        <RouterLink :to="{
+          name: 'cart-details', params: {
+            cart_id: '1'
+          }
+        }">
+          Cart details (1)
+        </RouterLink> -->
         <div class="flex items-center gap-2">
           <LangSwitch />
           <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)">
+          <!-- Logout Button (only when authenticated) -->
+          <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)"
+          >
             {{ $t('general.logout') }}
           </button>
         </div>

bo/src/components/admin/PageProducts.vue

@@ -9,8 +9,7 @@
                             <span>{{ item.name }}</span>
                         </div>
                     </template>
-                </UNavigationMenu> -->
-                {{ filters }}
+</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">
                     <span class="text-gray-600 dark:text-gray-400">Loading products...</span>
@@ -19,13 +18,16 @@
                     {{ error }}
                 </div>
                 <div v-else class="overflow-x-auto">
-                    <UTable :data="productsList" :columns="columns" class="flex-1">
-                        <template #expanded="{ row }">
-                            <UTable :data="productsList" :columns="columnsChild" :ui="{
-                                thead: 'hidden'
-                            }" />
-                        </template>
-                    </UTable>
+                    <div class="flex gap-2">
+                        <CategoryMenuListing />
+                        <UTable :data="productsList" :columns="columns" class="flex-1">
+                            <template #expanded="{ row }">
+                                <UTable :data="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" />
                     </div>
@@ -44,6 +46,8 @@ import { useFetchJson } from '@/composable/useFetchJson'
 import Default from '@/layouts/default.vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { TableColumn } from '@nuxt/ui'
+import CategoryMenuListing from '../inner/categoryMenuListing.vue'
+
 interface Product {
     reference: number
     product_id: number
@@ -97,6 +101,7 @@ const sortField = computed({
         router.push({ query })
     }
 })
+
 const perPage = ref(15)
 const total = ref(0)
 
@@ -109,33 +114,65 @@ interface ApiResponse {
 const productsList = ref<Product[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
-const filters = ref<Record<string, string>>({})
+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
+            }
+        })
+    }
+})
+
+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)
 
 async function fetchProductList() {
     loading.value = true
     error.value = null
 
-    const [sort, direction] = sortField.value
+    const params = new URLSearchParams()
 
-    const params = new URLSearchParams({
-        p: String(page.value),
-        elems: String(perPage.value)
+    Object.entries(route.query).forEach(([key, value]) => {
+        if (value) params.append(key, String(value))
     })
 
-    if (sort && direction) {
-        params.append('sort', `${sort},${direction}`)
-    }
-
-    Object.entries(filters.value).forEach(([key, value]) => {
-        if (value) params.append(key, value)
-    })
-
-    const url = `/api/v1/restricted/list-products/get-listing?${params.toString()}`
+    const url = `/api/v1/restricted/list-products/get-listing?${params}`
 
     try {
         const response = await useFetchJson<ApiResponse>(url)
-
-        productsList.value = (response as unknown as { items: Product[] }).items || []
+        productsList.value = response.items || []
         total.value = response.count || 0
     } catch (e: unknown) {
         error.value = e instanceof Error ? e.message : 'Failed to load products'
@@ -207,13 +244,9 @@ const columns: TableColumn<Product>[] = [
 
                 h(UInput, {
                     placeholder: 'Search...',
-                    modelValue: column.getFilterValue() ?? '',
+                    modelValue: filters.value[column.id] ?? '',
                     'onUpdate:modelValue': (val: string) => {
-                        if (val) {
-                            filters.value[column.id] = val
-                        } else {
-                            delete filters.value[column.id]
-                        }
+                        updateFilter(column.id, val)
                     },
                     size: 'xs'
                 })
@@ -255,13 +288,9 @@ const columns: TableColumn<Product>[] = [
 
                 h(UInput, {
                     placeholder: 'Search...',
-                    modelValue: column.getFilterValue() ?? '',
+                    modelValue: filters.value[column.id] ?? '',
                     'onUpdate:modelValue': (val: string) => {
-                        if (val) {
-                            filters.value[column.id] = val
-                        } else {
-                            delete filters.value[column.id]
-                        }
+                        updateFilter(column.id, val)
                     },
                     size: 'xs'
                 })
@@ -416,7 +445,11 @@ const columnsChild: TableColumn<Product>[] = [
     }
 ]
 
-watch([page, sortField, filters], () => {
-    fetchProductList()
-}, { immediate: true })
+watch(
+    () => route.query,
+    () => {
+        fetchProductList()
+    },
+    { immediate: true }
+)
 </script>

bo/src/components/admin/ProductDetailView.vue

@@ -1,5 +1,4 @@
 <template>
-
   <component :is="Default || 'div'">
     <div class="container my-10 mx-auto ">
       <div

bo/src/components/customer/CartDetails.vue

@@ -0,0 +1,74 @@
+<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">
+      {{ t('Cart Items') }}
+    </h2>
+    <div
+      class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
+      <div v-if="cartStore.items.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
+        <div v-for="item in cartStore.items" :key="item.id" class="flex items-center justify-between p-4 gap-4">
+          <div class="grid grid-cols-5 w-[100%]">
+            <div
+              class="w-20 bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
+              <img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
+              <UIcon v-else name="mdi:package-variant" class="text-xl text-gray-400" />
+            </div>
+            <p class="text-black dark:text-white text-sm font-medium truncate">{{ item.name }}</p>
+            <p class="text-black dark:text-white text-sm font-medium truncate">{{ item.product_number }}</p>
+            <p class="text-black dark:text-white font-medium">${{ (item.price * item.quantity).toFixed(2) }}</p>
+            <div class="flex items-center justify-end gap-10">
+              <UInputNumber v-model="item.quantity" class="text-gray-500 dark:text-gray-400 text-sm" />
+              <div class="flex justify-center">
+                <button @click="removeItem(item.id)"
+                  class="p-2 text-red-500 bg-red-100 dark:bg-(--main-dark)  rounded transition-colors"
+                  :title="t('Remove')">
+                  <UIcon name="material-symbols:delete" class="text-[20px]" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="p-8 text-center">
+        <UIcon name="mdi:cart-outline" class="text-5xl text-gray-300 dark:text-gray-600 mb-4 mx-auto" />
+        <p class="text-gray-500 dark:text-gray-400">{{ t('Your cart is empty') }}</p>
+      </div>
+    </div>
+    <div v-if="cartStore.items.length > 0" class="flex gap-4 justify-end items-center pt-6">
+      <UButton color="primary" @click="handleContinueToCheckout"
+        class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
+        {{ t('Continue to Checkout') }}
+      </UButton>
+      <UButton variant="outline" color="neutral" @click="handleCancel"
+        class="text-black dark:text-white border-(--border-light) dark:border-(--border-dark) hover:bg-gray-100 dark:hover:bg-gray-700">
+        {{ t('Cancel') }}
+      </UButton>
+    </div>
+  </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+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()
+function handleCancel() {
+  router.back()
+}
+
+function handleContinueToCheckout() {
+  router.push({ name: 'carts' })
+}
+
+function removeItem(itemId: number) {
+  cartStore.removeItem(itemId)
+}
+</script>

bo/src/components/customer/PageCarts.vue

@@ -1,100 +1,204 @@
 <template>
-    <component :is="Default || 'div'">
-        <div class="container mx-auto mt-20">
-            <div class="flex justify-between items-center pb-6">
-                <div class="flex gap-2 items-center">
-                <h2 class="font-semibold text-black dark:text-white text-2xl ">
-                    {{ t('Shopping') }}
-                </h2>
-                <p class="font-semibold text-(--accent-blue-light) dark:text-(--accent-blue-dark) text-2xl">{{
-                    cartStore.activeCart?.name }}</p>
+  <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">
+        <div class="flex-1">
+          <div
+            class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
+            <h2
+              class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
+              {{ t('Selected Products') }}
+            </h2>
+            <div v-if="cartStore.items.length > 0">
+              <div v-for="item in cartStore.items" :key="item.id"
+                class="grid grid-cols-5 items-center p-4 border-b border-(--border-light) dark:border-(--border-dark) w-[100%]">
+                <div
+                  class="bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
+                  <img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
+                  <UIcon v-else name="mdi:package-variant" class="text-2xl text-gray-400" />
                 </div>
-            <CartSelector />
-            </div>
-            <div
-                class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
-                <div v-if="cartStore.items.length > 0"
-                    class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
-                    <div v-for="item in cartStore.items" :key="item.id"
-                        class="flex items-center justify-between p-4 gap-4">
-                        <div class="grid grid-cols-5 w-[100%] flex items-center">
-                            <div
-                                class="w-20 bg-white dark:bg-gray-700 rounded flex items-center justify-center overflow-hidden">
-                                <img v-if="item.image" :src="item.image" :alt="item.name"
-                                    class="w-full h-full object-cover" />
-                                <UIcon v-else name="mdi:package-variant" class="text-xl text-gray-400" />
-                            </div>
-                            <p class="text-black dark:text-white text-sm font-medium truncate">
-                                {{ item.name }}
-                            </p>
-                            <p class="text-gray-600 dark:text-gray-400 text-sm truncate">
-                                {{ item.product_number }}
-                            </p>
-                            <p class="text-black dark:text-white font-medium">
-                                ${{ item.price.toFixed(2) }}
-                            </p>
-                            <div class="flex items-center justify-end gap-10">
-                                <p class="text-black dark:text-white font-medium">
-                                    ${{ (item.price * item.quantity).toFixed(2) }}
-                                </p>
-                                <div class="flex items-center justify-end gap-10">
-                                    <UInputNumber v-model="item.quantity"
-                                        class="text-gray-500 dark:text-gray-400 text-sm" :min="1"
-                                        @update:model-value="(val: number) => cartStore.updateQuantity(item.id, val)" />
-                                    <div class="flex justify-center">
-                                        <button @click="removeItem(item.id)"
-                                            class="p-2 text-red-500 bg-red-100 dark:bg-(--main-dark)  rounded transition-colors"
-                                            :title="t('Remove')">
-                                            <UIcon name="material-symbols:delete" class="text-[20px]" />
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div v-else class="p-8 text-center">
-                    <UIcon name="mdi:cart-outline" class="text-5xl text-gray-300 dark:text-gray-600 mb-4 mx-auto" />
-                    <p class="text-gray-500 dark:text-gray-400">{{ t('Your cart is empty') }}</p>
-                    <RouterLink :to="{ name: 'product-card-full' }"
-                        class="inline-block mt-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
-                        {{ t('Continue Shopping') }}
-                    </RouterLink>
+                <p class="text-black dark:text-white text-sm font-medium">{{ item.name }}</p>
+                <p class="text-black dark:text-white">${{ item.price.toFixed(2) }}</p>
+                <p class="text-black dark:text-white font-medium">${{ (item.price * item.quantity).toFixed(2)
+                  }}</p>
+
+                <div class="flex items-center justify-end gap-10">
+                  <UInputNumber v-model="item.quantity" :min="1"
+                    @update:model-value="(val: number) => cartStore.updateQuantity(item.id, val)" />
+                  <div class="flex justify-center">
+                    <button @click="removeItem(item.id)"
+                      class="p-2 text-red-500 bg-red-100 dark:bg-(--main-dark)  rounded transition-colors"
+                      :title="t('Remove')">
+                      <UIcon name="material-symbols:delete" class="text-[20px]" />
+                    </button>
+                  </div>
                 </div>
+              </div>
             </div>
-            <div v-if="cartStore.items.length > 0" class="flex gap-4 justify-end items-center pt-6">
-                <UButton color="primary" @click="handleContinueToCart"
-                    class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
-                    {{ t('Continue to Checkout') }}
-                </UButton>
-                <UButton variant="outline" color="neutral" @click="handleCancel"
-                    class="text-black dark:text-white border-(--border-light) dark:border-(--border-dark) hover:bg-gray-100 dark:hover:bg-gray-700">
-                    {{ t('Cancel') }}
-                </UButton>
+            <div v-else class="p-8 text-center">
+              <UIcon name="mdi:cart-outline" class="text-6xl text-gray-300 dark:text-gray-600 mb-4" />
+              <p class="text-gray-500 dark:text-gray-400">{{ t('Your cart is empty') }}</p>
+              <RouterLink :to="{
+                name: 'customer-product', params: {
+                  product_id: '51'
+                }
+              }" class="inline-block mt-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
+                {{ t('Continue Shopping') }}
+              </RouterLink>
             </div>
+          </div>
         </div>
-    </component>
+        <div class="lg:w-80">
+          <div
+            class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-6 sticky top-24">
+            <h2 class="text-lg font-semibold text-black dark:text-white mb-4">{{ t('Order Summary') }}</h2>
+            <div class="space-y-3 border-b border-(--border-light) dark:border-(--border-dark) pb-4 mb-4">
+              <div class="flex justify-between">
+                <span class="text-gray-600 dark:text-gray-400">{{ t('Products total') }}</span>
+                <span class="text-black dark:text-white">${{ cartStore.productsTotal.toFixed(2) }}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-600 dark:text-gray-400">{{ t('Shipping') }}</span>
+                <span class="text-black dark:text-white">
+                  {{ cartStore.shippingCost > 0 ? `$${cartStore.shippingCost.toFixed(2)}` : t('Free') }}
+                </span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-600 dark:text-gray-400">{{ t('VAT') }} ({{ (cartStore.vatRate * 100).toFixed(0)
+                  }}%)</span>
+                <span class="text-black dark:text-white">${{ cartStore.vatAmount.toFixed(2) }}</span>
+              </div>
+            </div>
+            <div class="flex justify-between mb-6">
+              <span class="text-black dark:text-white font-semibold text-lg">{{ t('Total') }}</span>
+              <span class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) font-bold text-lg">${{
+                cartStore.orderTotal.toFixed(2) }}</span>
+            </div>
+            <div class="flex flex-col gap-3">
+              <UButton block color="primary" @click="placeOrder" :disabled="!canPlaceOrder"
+                class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light) disabled:opacity-50 disabled:cursor-not-allowed">
+                {{ t('Place Order') }}
+              </UButton>
+              <UButton block variant="outline" color="neutral" @click="cancelOrder"
+                class="text-black dark:text-white border-(--border-light) dark:border-(--border-dark) hover:bg-gray-100 dark:hover:bg-gray-700">
+                {{ t('Cancel') }}
+              </UButton>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-10">
+        <div class="flex-1">
+          <div
+            class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-6">
+            <h2 class="text-lg font-semibold text-black dark:text-white mb-4">{{ t('Select Delivery Address') }}</h2>
+            <div class="mb-4">
+              <UInput v-model="addressSearchQuery" type="text" :placeholder="t('Search address')"
+                class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
+            </div>
+            <div v-if="addressStore.filteredAddresses.length > 0" class="space-y-3">
+              <label v-for="address in addressStore.filteredAddresses" :key="address.id"
+                class="flex items-start gap-3 p-4 border rounded-lg cursor-pointer transition-colors" :class="cartStore.selectedAddressId === address.id
+                  ? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
+                  : 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
+                <input type="radio" :value="address.id" v-model="selectedAddress"
+                  class="mt-1 w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                <div class="flex-1">
+                  <p class="text-black dark:text-white font-medium">{{ address.street }}</p>
+                  <p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.zipCode }}, {{ address.city }}</p>
+                  <p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.country }}</p>
+                </div>
+              </label>
+            </div>
+            <div v-else class="text-center py-6">
+              <UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" />
+              <p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p>
+              <RouterLink :to="{ name: 'addresses' }"
+                class="inline-block mt-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
+                {{ t('Add Address') }}
+              </RouterLink>
+            </div>
+          </div>
+        </div>
+        <div class="flex-1">
+          <div
+            class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-6">
+            <h2 class="text-lg font-semibold text-black dark:text-white mb-4">{{ t('Delivery Method') }}</h2>
+            <div class="space-y-3">
+              <label v-for="method in cartStore.deliveryMethods" :key="method.id"
+                class="flex items-center gap-3 p-4 border rounded-lg cursor-pointer transition-colors" :class="cartStore.selectedDeliveryMethodId === method.id
+                  ? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
+                  : 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
+                <input type="radio" :value="method.id" v-model="selectedDeliveryMethod"
+                  class="w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                <div class="flex-1">
+                  <div class="flex justify-between items-center">
+                    <span class="text-black dark:text-white font-medium">{{ method.name }}</span>
+                    <span class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) font-medium">
+                      {{ method.price > 0 ? `$${method.price.toFixed(2)}` : t('Free') }}
+                    </span>
+                  </div>
+                  <p class="text-gray-500 dark:text-gray-400 text-sm">{{ method.description }}</p>
+                </div>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </component>
 </template>
 
 <script setup lang="ts">
+import { ref, computed, watch } from 'vue'
 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'
-import CartSelector from './CartSelector.vue'
-
 const cartStore = useCartStore()
+const addressStore = useAddressStore()
 const { t } = useI18n()
 const router = useRouter()
-function handleCancel() {
-    router.back()
-}
 
-function handleContinueToCart() {
-    router.push({ name: 'cart' })
-}
+const selectedAddress = ref<number | null>(cartStore.selectedAddressId)
+const selectedDeliveryMethod = ref<number | null>(cartStore.selectedDeliveryMethodId)
+const addressSearchQuery = ref('')
 
+watch(addressSearchQuery, (val) => {
+  addressStore.setSearchQuery(val)
+})
+
+watch(selectedAddress, (newValue) => {
+  cartStore.setSelectedAddress(newValue)
+})
+
+watch(selectedDeliveryMethod, (newValue) => {
+  if (newValue) {
+    cartStore.setDeliveryMethod(newValue)
+  }
+})
+
+const canPlaceOrder = computed(() => {
+  return cartStore.items.length > 0 &&
+    cartStore.selectedAddressId !== null &&
+    cartStore.selectedDeliveryMethodId !== null
+})
 function removeItem(itemId: number) {
-    cartStore.removeItem(itemId)
+  cartStore.removeItem(itemId)
 }
-</script>
+
+function placeOrder() {
+  if (canPlaceOrder.value) {
+    console.log('Placing order...')
+    alert(t('Order placed successfully!'))
+    cartStore.clearCart()
+    router.push({ name: 'home' })
+  }
+}
+
+function cancelOrder() {
+  router.back()
+}
+</script>

bo/src/components/customer/PageProfileDetails.vue

@@ -118,6 +118,6 @@ const companyAddress = computed(() => {
 })
 
 function goToCreateAccount() {
-    router.push({ name: 'create-account' })
+    router.push({ name: 'profile-details-add-info' })
 }
 </script>

bo/src/components/customer/PageProfileDetailsAddInfo.vue

@@ -173,9 +173,9 @@ function saveAccount() {
         companyAddress : ''
     })
 
-    router.push({ name: 'customer-data' })
+    router.push({ name: 'profile-details' })
 }
 function goBack() {
-    router.push({ name: 'customer-data' })
+    router.push({ name: 'profile-details' })
 }
 </script>

bo/src/components/inner/categoryMenu.vue

@@ -8,11 +8,11 @@ const openAll = ref(false)
 
 function adaptMenu(menu: NavigationMenuItem[]) {
   for (const item of menu) {
-    if(item.children && item.children.length > 0){
+    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 }})
+      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'
@@ -27,14 +27,10 @@ const items = ref<NavigationMenuItem[][]>([
   [
     ...menu as NavigationMenuItem[]
   ],
- 
+
 ])
-
-
-
 </script>
 
 <template>
-    <UNavigationMenu orientation="vertical" type="single" :items="items" class="p-4">
-    </UNavigationMenu>
+  <UNavigationMenu orientation="vertical" type="single" :items="items" class="p-4" />
 </template>

bo/src/components/inner/categoryMenuListing.vue

@@ -0,0 +1,35 @@
+<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) {
+      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" />
+</template>

bo/src/components/inner/langSwitch.vue

@@ -1,4 +1,5 @@
 <template>
+  {{ locale }}
   <USelectMenu v-model="locale" :items="langs" class="w-40 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm  hover:none!"
     valueKey="iso_code" :searchInput="false">
     <template #default="{ modelValue }">