Refactor catalog layout: replace Teleport with provide/inject

- Create useCatalogLayout composable for data transfer from pages to layout - Layout now owns SearchBar and CatalogMap components directly - Pages provide data via provideCatalogLayout() - Fixes navigation glitches (multiple SearchBars) when switching tabs - Support custom subNavItems for clientarea pages - Unify 6 pages to use catalog layout: - catalog/offers, suppliers, hubs - clientarea/orders, addresses, offers
2026-01-15 10:49:40 +07:00
parent 4bd5b882e0
commit 7ea96a97b3
8 changed files with 828 additions and 387 deletions
--- a/app/composables/useCatalogLayout.ts
+++ b/app/composables/useCatalogLayout.ts
@@ -0,0 +1,71 @@
+import type { Ref, ComputedRef, Component, VNode } from 'vue'
+
+export interface CatalogFilter {
+  id: string
+  label: string
+}
+
+export interface CatalogMapItem {
+  uuid: string
+  name?: string
+  latitude: number
+  longitude: number
+  [key: string]: any
+}
+
+export interface CatalogHoveredItem {
+  latitude: number
+  longitude: number
+}
+
+export interface SubNavItem {
+  label: string
+  path: string
+}
+
+export interface CatalogLayoutData {
+  // SubNavigation (optional - if provided, overrides default catalog nav)
+  subNavItems?: SubNavItem[]
+
+  // SearchBar
+  searchQuery: Ref<string>
+  activeFilters: ComputedRef<CatalogFilter[]> | Ref<CatalogFilter[]>
+  displayedCount: ComputedRef<number> | Ref<number>
+  totalCount: ComputedRef<number> | Ref<number>
+  onSearch: () => void
+  onRemoveFilter: (id: string) => void
+  // Filter slot - can be a component, render function, or VNode
+  filterComponent?: Component | (() => VNode | VNode[])
+  // Header slot - optional component to render above the list (e.g. "Add" button)
+  headerComponent?: Component | (() => VNode | VNode[])
+
+  // Map
+  mapItems: ComputedRef<CatalogMapItem[]> | Ref<CatalogMapItem[]>
+  mapId: string
+  pointColor: string
+  hoveredItemId: Ref<string | undefined>
+  hoveredItem: ComputedRef<CatalogHoveredItem | null> | Ref<CatalogHoveredItem | null>
+  onMapSelect: (uuid: string) => void
+  onBoundsChange?: (bounds: any) => void
+  searchWithMap: Ref<boolean>
+
+  // Clustering (optional)
+  useServerClustering?: boolean
+  clusteredNodes?: ComputedRef<any[]> | Ref<any[]>
+}
+
+const CATALOG_LAYOUT_KEY = Symbol('catalogLayout')
+
+/**
+ * Provide catalog layout data from page to layout
+ */
+export const provideCatalogLayout = (data: CatalogLayoutData) => {
+  provide(CATALOG_LAYOUT_KEY, data)
+}
+
+/**
+ * Inject catalog layout data in layout from page
+ */
+export const useCatalogLayoutData = (): CatalogLayoutData | undefined => {
+  return inject<CatalogLayoutData>(CATALOG_LAYOUT_KEY)
+}
--- a/app/layouts/catalog.vue
+++ b/app/layouts/catalog.vue
@@ -37,7 +37,7 @@
      </div>
    </div>

-    <!-- Layer 3: SearchBar (fixed, slides to top:0) - teleport target -->
+    <!-- Layer 3: SearchBar (fixed, slides to top:0) -->
    <div
      class="fixed left-0 right-0 z-40 h-14 bg-base-100 border-b border-base-300 flex items-center"
      :style="{ top: `${searchBarTop}px` }"
@@ -49,16 +49,51 @@
      >
        <Icon :name="isCollapsed ? 'lucide:chevron-down' : 'lucide:chevron-up'" size="16" />
      </button>
-      <!-- SearchBar content teleported here (flex-1 for full width) -->
-      <div id="catalog-searchbar" class="flex-1 min-w-0" />
+      <!-- SearchBar from page via inject -->
+      <div class="flex-1 min-w-0 px-4 lg:px-6 py-2">
+        <CatalogSearchBar
+          v-if="catalogData"
+          v-model:search-query="catalogData.searchQuery.value"
+          :active-filters="toValue(catalogData.activeFilters)"
+          :displayed-count="toValue(catalogData.displayedCount)"
+          :total-count="toValue(catalogData.totalCount)"
+          @remove-filter="catalogData.onRemoveFilter"
+          @search="catalogData.onSearch"
+        >
+          <template v-if="catalogData.filterComponent" #filters>
+            <component :is="catalogData.filterComponent" />
+          </template>
+        </CatalogSearchBar>
+      </div>
    </div>

-    <!-- Layer 4: Map (fixed, right side, to bottom) - teleport target -->
+    <!-- Layer 4: Map (fixed, right side, to bottom) -->
    <div
-      id="catalog-map"
      class="fixed right-0 bottom-0 w-3/5 z-20 hidden lg:block"
      :style="{ top: `${mapTop}px` }"
+    >
+      <div v-if="catalogData" class="h-full w-full relative">
+        <!-- Search with map checkbox -->
+        <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" v-model="catalogData.searchWithMap.value" class="checkbox checkbox-sm" />
+          <span class="text-sm">{{ t('catalogMap.searchWithMap') }}</span>
+        </label>
+        <ClientOnly>
+          <CatalogMap
+            ref="mapRef"
+            :map-id="catalogData.mapId"
+            :items="catalogData.useServerClustering ? [] : toValue(catalogData.mapItems)"
+            :clustered-points="catalogData.useServerClustering ? toValue(catalogData.clusteredNodes || []) : []"
+            :use-server-clustering="catalogData.useServerClustering || false"
+            :point-color="catalogData.pointColor"
+            :hovered-item-id="catalogData.hoveredItemId.value"
+            :hovered-item="toValue(catalogData.hoveredItem)"
+            @select-item="catalogData.onMapSelect"
+            @bounds-change="catalogData.onBoundsChange"
          />
+        </ClientOnly>
+      </div>
+    </div>

    <!-- Content area (left side, with dynamic padding for fixed header) -->
    <div
@@ -90,17 +125,40 @@
      </div>
    </div>

-    <!-- Mobile map view - teleport target -->
+    <!-- Mobile map view -->
    <div
-      v-if="mobileView === 'map'"
-      id="catalog-map-mobile"
+      v-if="mobileView === 'map' && catalogData"
      class="lg:hidden fixed inset-0 z-20"
      :style="{ top: `${mapTop}px` }"
+    >
+      <div class="h-full w-full relative">
+        <!-- Search with map checkbox -->
+        <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" v-model="catalogData.searchWithMap.value" class="checkbox checkbox-sm" />
+          <span class="text-sm">{{ t('catalogMap.searchWithMap') }}</span>
+        </label>
+        <ClientOnly>
+          <CatalogMap
+            :map-id="`${catalogData.mapId}-mobile`"
+            :items="catalogData.useServerClustering ? [] : toValue(catalogData.mapItems)"
+            :clustered-points="catalogData.useServerClustering ? toValue(catalogData.clusteredNodes || []) : []"
+            :use-server-clustering="catalogData.useServerClustering || false"
+            :point-color="catalogData.pointColor"
+            :hovered-item-id="catalogData.hoveredItemId.value"
+            :hovered-item="toValue(catalogData.hoveredItem)"
+            @select-item="catalogData.onMapSelect"
+            @bounds-change="catalogData.onBoundsChange"
          />
+        </ClientOnly>
+      </div>
+    </div>
  </div>
 </template>

 <script setup lang="ts">
+import { toValue } from 'vue'
+import { useCatalogLayoutData } from '~/composables/useCatalogLayout'
+
 const runtimeConfig = useRuntimeConfig()
 const siteUrl = runtimeConfig.public.siteUrl || 'https://optovia.ru/'
 const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
@@ -108,6 +166,12 @@ const route = useRoute()
 const localePath = useLocalePath()
 const { t } = useI18n()

+// Inject catalog data from page
+const catalogData = useCatalogLayoutData()
+
+// Map ref for external flyTo access
+const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
+
 // Smooth collapsible header
 // MainNav: 64px (h-16)
 // SubNav: 40px (py-2 + links)
@@ -160,12 +224,16 @@ const userInitials = computed(() => {
  return '?'
 })

-// SubNavigation items for catalog section
-const subNavItems = computed(() => [
+// SubNavigation items - use page-provided items or default to catalog section
+const defaultSubNavItems = [
  { label: t('cabinetNav.offers'), path: '/catalog/offers' },
  { label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
  { label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
-])
+]
+
+const subNavItems = computed(() => {
+  return catalogData?.subNavItems || defaultSubNavItems
+})

 const isSubNavActive = (path: string) => {
  return route.path === localePath(path) || route.path.startsWith(localePath(path) + '/')
--- a/app/pages/catalog/hubs/index.vue
+++ b/app/pages/catalog/hubs/index.vue
@@ -1,76 +1,5 @@
 <template>
  <div>
-    <!-- SearchBar teleported to layout -->
-    <Teleport to="#catalog-searchbar">
-      <div class="px-4 lg:px-6 py-2">
-        <CatalogSearchBar
-          v-model:search-query="searchQuery"
-          :active-filters="activeFilterBadges"
-          :displayed-count="displayItems.length"
-          :total-count="total"
-          @remove-filter="onRemoveFilter"
-          @search="onSearch"
-        >
-          <template #filters>
-            <div class="p-2 space-y-3">
-              <div>
-                <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.transport') }}</div>
-                <ul class="menu menu-compact">
-                  <li v-for="filter in filters" :key="filter.id">
-                    <a
-                      :class="{ active: selectedFilter === filter.id }"
-                      @click="selectedFilter = filter.id"
-                    >
-                      {{ filter.label }}
-                    </a>
-                  </li>
-                </ul>
-              </div>
-              <div class="divider my-0"></div>
-              <div>
-                <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.country') }}</div>
-                <ul class="menu menu-compact max-h-48 overflow-y-auto">
-                  <li v-for="filter in countryFilters" :key="filter.id">
-                    <a
-                      :class="{ active: selectedCountry === filter.id }"
-                      @click="selectedCountry = filter.id"
-                    >
-                      {{ filter.label }}
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </template>
-        </CatalogSearchBar>
-      </div>
-    </Teleport>
-
-    <!-- Map teleported to layout -->
-    <Teleport to="#catalog-map">
-      <div class="h-full w-full relative">
-        <!-- Search with map checkbox -->
-        <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
-          <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
-          <span class="text-sm">{{ t('catalogMap.searchWithMap') }}</span>
-        </label>
-        <ClientOnly>
-          <CatalogMap
-            ref="mapRef"
-            map-id="hubs-map"
-            :items="useServerClustering ? [] : itemsWithCoords"
-            :clustered-points="useServerClustering ? clusteredNodes : []"
-            :use-server-clustering="useServerClustering"
-            point-color="#10b981"
-            :hovered-item-id="hoveredHubId"
-            :hovered-item="hoveredItem"
-            @select-item="onMapSelect"
-            @bounds-change="onBoundsChange"
-          />
-        </ClientOnly>
-      </div>
-    </Teleport>
-
    <!-- List content -->
    <div v-if="isLoading" class="flex items-center justify-center py-8">
    <Card padding="lg">
@@ -117,7 +46,9 @@
 </template>

 <script setup lang="ts">
+import { h, defineComponent } from 'vue'
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+import { provideCatalogLayout } from '~/composables/useCatalogLayout'

 definePageMeta({
  layout: 'catalog'
@@ -147,9 +78,6 @@ const hoveredHubId = ref<string>()
 // Search bar
 const searchQuery = ref('')

-// Map ref
-const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-
 // Server-side clustering
 const useServerClustering = true
 const { clusteredNodes, fetchClusters } = useClusteredNodes()
@@ -231,10 +159,6 @@ const onSearch = () => {

 const onSelectHub = (hub: any) => {
  selectedHubId.value = hub.uuid
-  // Fly to hub on map
-  if (hub.latitude && hub.longitude) {
-    mapRef.value?.flyTo(Number(hub.latitude), Number(hub.longitude), 8)
-  }
 }

 // Handle selection from map
@@ -258,6 +182,65 @@ const isFirstInCountry = (hub: any) => {
  return false
 }

+// Filter component for the layout
+const HubsFilterComponent = defineComponent({
+  setup() {
+    return () => h('div', { class: 'p-2 space-y-3' }, [
+      // Transport filter
+      h('div', {}, [
+        h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('catalogHubsSection.filters.transport')),
+        h('ul', { class: 'menu menu-compact' },
+          filters.value.map(filter =>
+            h('li', { key: filter.id },
+              h('a', {
+                class: selectedFilter.value === filter.id ? 'active' : '',
+                onClick: () => { selectedFilter.value = filter.id }
+              }, filter.label)
+            )
+          )
+        )
+      ]),
+      // Divider
+      h('div', { class: 'divider my-0' }),
+      // Country filter
+      h('div', {}, [
+        h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('catalogHubsSection.filters.country')),
+        h('ul', { class: 'menu menu-compact max-h-48 overflow-y-auto' },
+          countryFilters.value.map(filter =>
+            h('li', { key: filter.id },
+              h('a', {
+                class: selectedCountry.value === filter.id ? 'active' : '',
+                onClick: () => { selectedCountry.value = filter.id }
+              }, filter.label)
+            )
+          )
+        )
+      ])
+    ])
+  }
+})
+
+// Provide data to layout
+provideCatalogLayout({
+  searchQuery,
+  activeFilters: activeFilterBadges,
+  displayedCount: computed(() => displayItems.value.length),
+  totalCount: computed(() => total.value),
+  onSearch,
+  onRemoveFilter,
+  filterComponent: HubsFilterComponent,
+  mapItems: itemsWithCoords,
+  mapId: 'hubs-map',
+  pointColor: '#10b981',
+  hoveredItemId: hoveredHubId,
+  hoveredItem,
+  onMapSelect,
+  onBoundsChange,
+  searchWithMap,
+  useServerClustering,
+  clusteredNodes
+})
+
 await init()

 useHead(() => ({
--- a/app/pages/catalog/offers/index.vue
+++ b/app/pages/catalog/offers/index.vue
@@ -1,60 +1,5 @@
 <template>
  <div>
-    <!-- SearchBar teleported to layout -->
-    <Teleport to="#catalog-searchbar">
-      <div class="px-4 lg:px-6 py-2">
-        <CatalogSearchBar
-          v-model:search-query="searchQuery"
-          :active-filters="activeFilterBadges"
-          :displayed-count="displayItems.length"
-          :total-count="total"
-          @remove-filter="onRemoveFilter"
-          @search="onSearch"
-        >
-          <template #filters>
-            <div class="p-2 space-y-3">
-              <div>
-                <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogOffersSection.filters.product') }}</div>
-                <ul class="menu menu-compact max-h-48 overflow-y-auto">
-                  <li v-for="filter in productFilters" :key="filter.id">
-                    <a
-                      :class="{ active: selectedProductUuid === filter.id || (!selectedProductUuid && filter.id === 'all') }"
-                      @click="onProductFilterChange(filter.id)"
-                    >
-                      {{ filter.label }}
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </template>
-        </CatalogSearchBar>
-      </div>
-    </Teleport>
-
-    <!-- Map teleported to layout -->
-    <Teleport to="#catalog-map">
-      <div class="h-full w-full relative">
-        <!-- Search with map checkbox -->
-        <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
-          <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
-          <span class="text-sm">{{ t('catalogMap.searchWithMap') }}</span>
-        </label>
-        <ClientOnly>
-          <CatalogMap
-            ref="mapRef"
-            map-id="offers-map"
-            :items="itemsWithCoords"
-            point-color="#f59e0b"
-            :hovered-item-id="hoveredOfferId"
-            :hovered-item="hoveredItem"
-            @select-item="onMapSelect"
-            @bounds-change="onBoundsChange"
-          />
-        </ClientOnly>
-      </div>
-    </Teleport>
-
    <!-- List content -->
    <div v-if="isLoading || productsLoading" class="flex items-center justify-center py-8">
      <Card padding="lg">
@@ -98,7 +43,9 @@
 </template>

 <script setup lang="ts">
+import { h, defineComponent } from 'vue'
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+import { provideCatalogLayout } from '~/composables/useCatalogLayout'

 definePageMeta({
  layout: 'catalog'
@@ -133,9 +80,6 @@ const hoveredOfferId = ref<string>()
 // Search bar
 const searchQuery = ref('')

-// Map ref
-const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-
 // Search with map checkbox
 const searchWithMap = ref(false)
 const currentBounds = ref<MapBounds | null>(null)
@@ -218,10 +162,6 @@ const onSearch = () => {

 const onSelectOffer = (offer: any) => {
  selectedOfferId.value = offer.uuid
-  // Fly to offer on map
-  if (offer.locationLatitude && offer.locationLongitude) {
-    mapRef.value?.flyTo(Number(offer.locationLatitude), Number(offer.locationLongitude), 8)
-  }
 }

 // Handle selection from map
@@ -232,6 +172,46 @@ const onMapSelect = (uuid: string) => {
  }
 }

+// Filter component for the layout
+const OffersFilterComponent = defineComponent({
+  setup() {
+    return () => h('div', { class: 'p-2 space-y-3' }, [
+      h('div', {}, [
+        h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('catalogOffersSection.filters.product')),
+        h('ul', { class: 'menu menu-compact max-h-48 overflow-y-auto' },
+          productFilters.value.map(filter =>
+            h('li', { key: filter.id },
+              h('a', {
+                class: (selectedProductUuid.value === filter.id || (!selectedProductUuid.value && filter.id === 'all')) ? 'active' : '',
+                onClick: () => onProductFilterChange(filter.id)
+              }, filter.label)
+            )
+          )
+        )
+      ])
+    ])
+  }
+})
+
+// Provide data to layout
+provideCatalogLayout({
+  searchQuery,
+  activeFilters: activeFilterBadges,
+  displayedCount: computed(() => displayItems.value.length),
+  totalCount: computed(() => total.value),
+  onSearch,
+  onRemoveFilter,
+  filterComponent: OffersFilterComponent,
+  mapItems: itemsWithCoords,
+  mapId: 'offers-map',
+  pointColor: '#f59e0b',
+  hoveredItemId: hoveredOfferId,
+  hoveredItem,
+  onMapSelect,
+  onBoundsChange,
+  searchWithMap
+})
+
 // Initialize
 await Promise.all([initProducts(), initOffers()])

--- a/app/pages/catalog/suppliers/index.vue
+++ b/app/pages/catalog/suppliers/index.vue
@@ -1,41 +1,5 @@
 <template>
  <div>
-    <!-- SearchBar teleported to layout -->
-    <Teleport to="#catalog-searchbar">
-      <div class="px-4 lg:px-6 py-2">
-        <CatalogSearchBar
-          v-model:search-query="searchQuery"
-          :active-filters="[]"
-          :displayed-count="displayItems.length"
-          :total-count="total"
-          @search="onSearch"
-        />
-      </div>
-    </Teleport>
-
-    <!-- Map teleported to layout -->
-    <Teleport to="#catalog-map">
-      <div class="h-full w-full relative">
-        <!-- Search with map checkbox -->
-        <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
-          <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
-          <span class="text-sm">{{ t('catalogMap.searchWithMap') }}</span>
-        </label>
-        <ClientOnly>
-          <CatalogMap
-            ref="mapRef"
-            map-id="suppliers-map"
-            :items="itemsWithCoords"
-            point-color="#3b82f6"
-            :hovered-item-id="hoveredSupplierId"
-            :hovered-item="hoveredItem"
-            @select-item="onMapSelect"
-            @bounds-change="onBoundsChange"
-          />
-        </ClientOnly>
-      </div>
-    </Teleport>
-
    <!-- List content -->
    <div v-if="isLoading" class="flex items-center justify-center py-8">
      <Card padding="lg">
@@ -80,6 +44,7 @@

 <script setup lang="ts">
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+import { provideCatalogLayout } from '~/composables/useCatalogLayout'

 definePageMeta({
  layout: 'catalog'
@@ -104,9 +69,6 @@ const hoveredSupplierId = ref<string>()
 // Search bar
 const searchQuery = ref('')

-// Map ref
-const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-
 // Search with map checkbox
 const searchWithMap = ref(false)
 const currentBounds = ref<MapBounds | null>(null)
@@ -155,12 +117,13 @@ const onSearch = () => {
  // TODO: Implement search
 }

+// No filters for suppliers
+const onRemoveFilter = (_id: string) => {
+  // No filters to remove
+}
+
 const onSelectSupplier = (supplier: any) => {
  selectedSupplierId.value = supplier.uuid || supplier.teamUuid
-  // Fly to supplier on map
-  if (supplier.latitude && supplier.longitude) {
-    mapRef.value?.flyTo(Number(supplier.latitude), Number(supplier.longitude), 8)
-  }
 }

 // Handle selection from map
@@ -171,6 +134,24 @@ const onMapSelect = (uuid: string) => {
  }
 }

+// Provide data to layout (no filter component for suppliers)
+provideCatalogLayout({
+  searchQuery,
+  activeFilters: ref([]),
+  displayedCount: computed(() => displayItems.value.length),
+  totalCount: computed(() => total.value),
+  onSearch,
+  onRemoveFilter,
+  mapItems: itemsWithCoords,
+  mapId: 'suppliers-map',
+  pointColor: '#3b82f6',
+  hoveredItemId: hoveredSupplierId,
+  hoveredItem,
+  onMapSelect,
+  onBoundsChange,
+  searchWithMap
+})
+
 await init()

 useHead(() => ({
--- a/app/pages/clientarea/addresses/index.vue
+++ b/app/pages/clientarea/addresses/index.vue
@@ -1,28 +1,36 @@
 <template>
-  <CatalogPage
-    :items="itemsForMap"
-    :loading="isLoading"
-    map-id="addresses-map"
-    point-color="#10b981"
-    :selected-id="selectedAddressId"
-    v-model:hovered-id="hoveredAddressId"
-    :has-sub-nav="false"
-    @select="onSelectAddress"
-  >
-    <template #header>
+  <div>
+    <!-- Add button -->
+    <div class="mb-4">
      <NuxtLink :to="localePath('/clientarea/addresses/new')">
        <Button variant="outline" class="w-full">
          <Icon name="lucide:plus" size="16" class="mr-2" />
          {{ t('profileAddresses.actions.add') }}
        </Button>
      </NuxtLink>
-    </template>
+    </div>

-    <template #card="{ item }">
-      <NuxtLink
-        :to="localePath(`/clientarea/addresses/${item.uuid}`)"
-        class="block"
+    <!-- List content -->
+    <div v-if="isLoading" class="flex items-center justify-center py-8">
+      <Card padding="lg">
+        <Stack align="center" justify="center" gap="3">
+          <Spinner />
+          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
+        </Stack>
+      </Card>
+    </div>
+
+    <template v-else>
+      <Stack gap="3">
+        <div
+          v-for="item in displayItems"
+          :key="item.uuid"
+          :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedAddressId }"
+          @click="onSelectAddress(item)"
+          @mouseenter="hoveredAddressId = item.uuid"
+          @mouseleave="hoveredAddressId = undefined"
        >
+          <NuxtLink :to="localePath(`/clientarea/addresses/${item.uuid}`)" class="block">
            <Card padding="sm" interactive>
              <div class="flex flex-col gap-1">
                <Text size="base" weight="semibold" class="truncate">{{ item.name }}</Text>
@@ -33,9 +41,10 @@
              </div>
            </Card>
          </NuxtLink>
-    </template>
+        </div>
+      </Stack>

-    <template #empty>
+      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
        <EmptyState
          icon="📍"
          :title="t('profileAddresses.empty.title')"
@@ -44,13 +53,17 @@
          :action-to="localePath('/clientarea/addresses/new')"
          action-icon="lucide:plus"
        />
+      </Stack>
    </template>
-  </CatalogPage>
+  </div>
 </template>

 <script setup lang="ts">
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+import { provideCatalogLayout } from '~/composables/useCatalogLayout'
+
 definePageMeta({
-  layout: 'topnav',
+  layout: 'catalog',
  middleware: ['auth-oidc']
 })

@@ -67,22 +80,94 @@ const {
 const selectedAddressId = ref<string>()
 const hoveredAddressId = ref<string>()

-// Map items for CatalogPage
-const itemsForMap = computed(() => {
-  return items.value.map(addr => ({
+// Search bar
+const searchQuery = ref('')
+
+// Search with map checkbox
+const searchWithMap = ref(false)
+const currentBounds = ref<MapBounds | null>(null)
+
+const onBoundsChange = (bounds: MapBounds) => {
+  currentBounds.value = bounds
+}
+
+// Map items
+const itemsWithCoords = computed(() => {
+  return items.value.filter(addr =>
+    addr.latitude != null &&
+    addr.longitude != null &&
+    !isNaN(Number(addr.latitude)) &&
+    !isNaN(Number(addr.longitude))
+  ).map(addr => ({
    uuid: addr.uuid,
    name: addr.name,
-    address: addr.address,
-    latitude: addr.latitude,
-    longitude: addr.longitude,
-    countryCode: addr.countryCode,
-    country: addr.countryCode
+    latitude: Number(addr.latitude),
+    longitude: Number(addr.longitude)
  }))
 })

+// Filtered items when searchWithMap is enabled
+const displayItems = computed(() => {
+  if (!searchWithMap.value || !currentBounds.value) return items.value
+  return items.value.filter(item => {
+    if (item.latitude == null || item.longitude == null) return false
+    const { west, east, north, south } = currentBounds.value!
+    const lng = Number(item.longitude)
+    const lat = Number(item.latitude)
+    return lng >= west && lng <= east && lat >= south && lat <= north
+  })
+})
+
+// Hovered item with coordinates for map highlight
+const hoveredItem = computed(() => {
+  if (!hoveredAddressId.value) return null
+  const item = items.value.find(i => i.uuid === hoveredAddressId.value)
+  if (!item?.latitude || !item?.longitude) return null
+  return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
+})
+
+// Search handler
+const onSearch = () => {
+  // TODO: Implement search
+}
+
+// No filters
+const onRemoveFilter = (_id: string) => {}
+
 const onSelectAddress = (item: any) => {
  selectedAddressId.value = item.uuid
 }

+// Handle selection from map
+const onMapSelect = (uuid: string) => {
+  const address = items.value.find(i => i.uuid === uuid)
+  if (address) {
+    selectedAddressId.value = uuid
+  }
+}
+
+// Provide data to layout
+provideCatalogLayout({
+  // Custom subnav for clientarea
+  subNavItems: [
+    { label: t('cabinetNav.orders'), path: '/clientarea/orders' },
+    { label: t('cabinetNav.addresses'), path: '/clientarea/addresses' },
+  ],
+  searchQuery,
+  activeFilters: ref([]),
+  displayedCount: computed(() => displayItems.value.length),
+  totalCount: computed(() => items.value.length),
+  onSearch,
+  onRemoveFilter,
+  mapItems: itemsWithCoords,
+  mapId: 'addresses-map',
+  pointColor: '#10b981',
+  hoveredItemId: hoveredAddressId,
+  hoveredItem,
+  onMapSelect,
+  onBoundsChange,
+  searchWithMap
+})
+
 await init()
 </script>
--- a/app/pages/clientarea/offers/index.vue
+++ b/app/pages/clientarea/offers/index.vue
@@ -1,17 +1,17 @@
 <template>
-  <Stack gap="6">
-    <PageHeader :title="t('clientOffersList.header.title')">
-      <template #actions>
+  <div>
+    <!-- Add button -->
+    <div class="mb-4">
      <NuxtLink :to="localePath('/clientarea/offers/new')">
-          <Button>
+        <Button class="w-full">
          <Icon name="lucide:plus" size="16" class="mr-2" />
          {{ t('clientOffersList.actions.add') }}
        </Button>
      </NuxtLink>
-      </template>
-    </PageHeader>
+    </div>

-    <Alert v-if="hasError" variant="error">
+    <!-- Error state -->
+    <Alert v-if="hasError" variant="error" class="mb-4">
      <Stack gap="2">
        <Heading :level="4" weight="semibold">{{ t('clientOffersList.error.title') }}</Heading>
        <Text tone="muted">{{ error }}</Text>
@@ -19,14 +19,27 @@
      </Stack>
    </Alert>

-    <Stack v-else-if="isLoading" align="center" justify="center" gap="3">
+    <!-- List content -->
+    <div v-else-if="isLoading" class="flex items-center justify-center py-8">
+      <Card padding="lg">
+        <Stack align="center" justify="center" gap="3">
          <Spinner />
          <Text tone="muted">{{ t('clientOffersList.states.loading') }}</Text>
        </Stack>
+      </Card>
+    </div>

    <template v-else>
-      <Stack v-if="offers.length" gap="4">
-        <Card v-for="offer in offers" :key="offer.uuid" padding="lg">
+      <Stack gap="3">
+        <div
+          v-for="offer in displayItems"
+          :key="offer.uuid"
+          :class="{ 'ring-2 ring-primary rounded-lg': offer.uuid === selectedOfferId }"
+          @click="onSelectOffer(offer)"
+          @mouseenter="hoveredOfferId = offer.uuid"
+          @mouseleave="hoveredOfferId = undefined"
+        >
+          <Card padding="lg">
            <Stack gap="3">
              <Stack direction="row" justify="between" align="center">
                <Heading :level="3">{{ offer.productName || t('clientOffersList.labels.untitled') }}</Heading>
@@ -60,18 +73,21 @@
              </Grid>
            </Stack>
          </Card>
+        </div>
+      </Stack>

      <PaginationLoadMore
+        v-if="offers.length > 0"
        :shown="offers.length"
        :total="totalOffers"
        :can-load-more="canLoadMore"
        :loading="isLoadingMore"
        @load-more="loadMore"
+        class="mt-4"
      />
-      </Stack>

+      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
        <EmptyState
-        v-else
          icon="🏷️"
          :title="t('clientOffersList.empty.title')"
          :description="t('clientOffersList.empty.subtitle')"
@@ -79,15 +95,19 @@
          :action-to="localePath('/clientarea/offers/new')"
          action-icon="lucide:plus"
        />
-    </template>
      </Stack>
    </template>
+  </div>
+</template>

 <script setup lang="ts">
+import { h, defineComponent } from 'vue'
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+import { provideCatalogLayout } from '~/composables/useCatalogLayout'
 import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'

 definePageMeta({
-  layout: 'topnav',
+  layout: 'catalog',
  middleware: ['auth-oidc']
 })

@@ -101,6 +121,20 @@ const offers = ref<any[]>([])
 const totalOffers = ref(0)
 const isLoadingMore = ref(false)

+const selectedOfferId = ref<string>()
+const hoveredOfferId = ref<string>()
+
+// Search bar
+const searchQuery = ref('')
+
+// Search with map checkbox
+const searchWithMap = ref(false)
+const currentBounds = ref<MapBounds | null>(null)
+
+const onBoundsChange = (bounds: MapBounds) => {
+  currentBounds.value = bounds
+}
+
 const {
  data: offersData,
  pending: offersPending,
@@ -126,6 +160,129 @@ const canLoadMore = computed(() => offers.value.length < totalOffers.value)
 const hasError = computed(() => !!loadError.value)
 const error = computed(() => loadError.value?.message || t('clientOffersList.error.load'))

+// Map items with coordinates
+const itemsWithCoords = computed(() =>
+  offers.value.filter(item =>
+    item.locationLatitude != null &&
+    item.locationLongitude != null &&
+    !isNaN(Number(item.locationLatitude)) &&
+    !isNaN(Number(item.locationLongitude))
+  ).map(item => ({
+    uuid: item.uuid,
+    name: item.productName || '',
+    latitude: Number(item.locationLatitude),
+    longitude: Number(item.locationLongitude)
+  }))
+)
+
+// Filtered items when searchWithMap is enabled
+const displayItems = computed(() => {
+  if (!searchWithMap.value || !currentBounds.value) return offers.value
+  return offers.value.filter(item => {
+    if (item.locationLatitude == null || item.locationLongitude == null) return false
+    const { west, east, north, south } = currentBounds.value!
+    const lng = Number(item.locationLongitude)
+    const lat = Number(item.locationLatitude)
+    return lng >= west && lng <= east && lat >= south && lat <= north
+  })
+})
+
+// Hovered item with coordinates for map highlight
+const hoveredItem = computed(() => {
+  if (!hoveredOfferId.value) return null
+  const item = offers.value.find(i => i.uuid === hoveredOfferId.value)
+  if (!item?.locationLatitude || !item?.locationLongitude) return null
+  return { latitude: Number(item.locationLatitude), longitude: Number(item.locationLongitude) }
+})
+
+// Active filter badges (status filter)
+const selectedStatus = ref<string>('all')
+const statusFilters = computed(() => [
+  { id: 'all', label: t('clientOffersList.filters.all') },
+  { id: 'active', label: t('clientOffersList.status.active') },
+  { id: 'draft', label: t('clientOffersList.status.draft') },
+  { id: 'expired', label: t('clientOffersList.status.expired') },
+])
+
+const activeFilterBadges = computed(() => {
+  const badges: { id: string; label: string }[] = []
+  if (selectedStatus.value && selectedStatus.value !== 'all') {
+    const filter = statusFilters.value.find(f => f.id === selectedStatus.value)
+    if (filter) badges.push({ id: `status:${filter.id}`, label: filter.label })
+  }
+  return badges
+})
+
+// Remove filter badge
+const onRemoveFilter = (id: string) => {
+  if (id.startsWith('status:')) {
+    selectedStatus.value = 'all'
+  }
+}
+
+// Search handler
+const onSearch = () => {
+  // TODO: Implement search
+}
+
+const onSelectOffer = (offer: any) => {
+  selectedOfferId.value = offer.uuid
+  navigateTo(localePath(`/clientarea/offers/${offer.uuid}`))
+}
+
+// Handle selection from map
+const onMapSelect = (uuid: string) => {
+  const offer = offers.value.find(i => i.uuid === uuid)
+  if (offer) {
+    selectedOfferId.value = uuid
+    navigateTo(localePath(`/clientarea/offers/${uuid}`))
+  }
+}
+
+// Filter component for the layout
+const SellerOffersFilterComponent = defineComponent({
+  setup() {
+    return () => h('div', { class: 'p-2 space-y-3' }, [
+      h('div', {}, [
+        h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('clientOffersList.filters.status_label')),
+        h('ul', { class: 'menu menu-compact' },
+          statusFilters.value.map(filter =>
+            h('li', { key: filter.id },
+              h('a', {
+                class: selectedStatus.value === filter.id ? 'active' : '',
+                onClick: () => { selectedStatus.value = filter.id }
+              }, filter.label)
+            )
+          )
+        )
+      ])
+    ])
+  }
+})
+
+// Provide data to layout
+provideCatalogLayout({
+  // Custom subnav for seller clientarea
+  subNavItems: [
+    { label: t('cabinetNav.myOffers'), path: '/clientarea/offers' },
+  ],
+  searchQuery,
+  activeFilters: activeFilterBadges,
+  displayedCount: computed(() => displayItems.value.length),
+  totalCount: computed(() => totalOffers.value),
+  onSearch,
+  onRemoveFilter,
+  filterComponent: SellerOffersFilterComponent,
+  mapItems: itemsWithCoords,
+  mapId: 'seller-offers-map',
+  pointColor: '#f59e0b',
+  hoveredItemId: hoveredOfferId,
+  hoveredItem,
+  onMapSelect,
+  onBoundsChange,
+  searchWithMap
+})
+
 const getStatusVariant = (status: string) => {
  const variants: Record<string, string> = {
    active: 'success',
--- a/app/pages/clientarea/orders/index.vue
+++ b/app/pages/clientarea/orders/index.vue
@@ -1,20 +1,25 @@
 <template>
-  <CatalogPage
-    :items="listItems"
-    :map-items="mapPoints"
-    :loading="isLoading"
-    map-id="orders-map"
-    point-color="#6366f1"
-    :selected-id="selectedOrderId"
-    v-model:hovered-id="hoveredOrderId"
-    :has-sub-nav="false"
-    @select="onSelectOrder"
-  >
-    <template #filters>
-      <CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
-    </template>
+  <div>
+    <!-- List content -->
+    <div v-if="isLoading" class="flex items-center justify-center py-8">
+      <Card padding="lg">
+        <Stack align="center" justify="center" gap="3">
+          <Spinner />
+          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
+        </Stack>
+      </Card>
+    </div>

-    <template #card="{ item }">
+    <template v-else>
+      <Stack gap="3">
+        <div
+          v-for="item in displayItems"
+          :key="item.uuid"
+          :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedOrderId }"
+          @click="onSelectOrder(item)"
+          @mouseenter="hoveredOrderId = item.uuid"
+          @mouseleave="hoveredOrderId = undefined"
+        >
          <Card padding="lg" class="cursor-pointer">
            <Stack gap="4">
              <Stack direction="row" justify="between" align="center">
@@ -58,24 +63,30 @@
              </Grid>
            </Stack>
          </Card>
-    </template>
+        </div>
+      </Stack>

-    <template #empty>
+      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
        <EmptyState
          icon="📦"
-        :title="$t('orders.no_orders')"
-        :description="$t('orders.no_orders_desc')"
-        :action-label="$t('orders.create_new')"
+          :title="t('orders.no_orders')"
+          :description="t('orders.no_orders_desc')"
+          :action-label="t('orders.create_new')"
          :action-to="localePath('/clientarea')"
          action-icon="lucide:plus"
        />
+      </Stack>
    </template>
-  </CatalogPage>
+  </div>
 </template>

 <script setup lang="ts">
+import { h, defineComponent } from 'vue'
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+import { provideCatalogLayout } from '~/composables/useCatalogLayout'
+
 definePageMeta({
-  layout: 'topnav',
+  layout: 'catalog',
  middleware: ['auth-oidc']
 })

@@ -95,7 +106,18 @@ const {
 const selectedOrderId = ref<string>()
 const hoveredOrderId = ref<string>()

-// List items - one per order (for card rendering)
+// Search bar
+const searchQuery = ref('')
+
+// Search with map checkbox
+const searchWithMap = ref(false)
+const currentBounds = ref<MapBounds | null>(null)
+
+const onBoundsChange = (bounds: MapBounds) => {
+  currentBounds.value = bounds
+}
+
+// List items - one per order
 const listItems = computed(() => {
  return filteredItems.value.map(order => ({
    ...order,
@@ -117,9 +139,7 @@ const mapPoints = computed(() => {
        uuid: `${order.uuid}-source`,
        name: `📦 ${order.sourceLocationName}`,
        latitude: order.sourceLatitude,
-        longitude: order.sourceLongitude,
-        country: order.sourceLocationName,
-        orderUuid: order.uuid
+        longitude: order.sourceLongitude
      })
    }
    // Destination point - get from last stage
@@ -129,20 +149,116 @@ const mapPoints = computed(() => {
        uuid: `${order.uuid}-dest`,
        name: `🏁 ${order.destinationLocationName}`,
        latitude: lastStage.destinationLatitude,
-        longitude: lastStage.destinationLongitude,
-        country: order.destinationLocationName,
-        orderUuid: order.uuid
+        longitude: lastStage.destinationLongitude
      })
    }
  })
  return result
 })

+// Filtered items when searchWithMap is enabled
+const displayItems = computed(() => {
+  if (!searchWithMap.value || !currentBounds.value) return listItems.value
+  return listItems.value.filter(item => {
+    if (item.latitude == null || item.longitude == null) return false
+    const { west, east, north, south } = currentBounds.value!
+    const lng = Number(item.longitude)
+    const lat = Number(item.latitude)
+    return lng >= west && lng <= east && lat >= south && lat <= north
+  })
+})
+
+// Hovered item with coordinates for map highlight
+const hoveredItem = computed(() => {
+  if (!hoveredOrderId.value) return null
+  const item = listItems.value.find(i => i.uuid === hoveredOrderId.value)
+  if (!item?.latitude || !item?.longitude) return null
+  return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
+})
+
+// Active filter badges
+const activeFilterBadges = computed(() => {
+  const badges: { id: string; label: string }[] = []
+  if (selectedFilter.value && selectedFilter.value !== 'all') {
+    const filter = filters.value.find(f => f.id === selectedFilter.value)
+    if (filter) badges.push({ id: `status:${filter.id}`, label: filter.label })
+  }
+  return badges
+})
+
+// Remove filter badge
+const onRemoveFilter = (id: string) => {
+  if (id.startsWith('status:')) {
+    selectedFilter.value = 'all'
+  }
+}
+
+// Search handler
+const onSearch = () => {
+  // TODO: Implement search
+}
+
 const onSelectOrder = (item: any) => {
  selectedOrderId.value = item.uuid
  navigateTo(localePath(`/clientarea/orders/${item.uuid}`))
 }

+// Handle selection from map
+const onMapSelect = (uuid: string) => {
+  // Map points have -source or -dest suffix
+  const orderUuid = uuid.replace(/-source$|-dest$/, '')
+  const order = listItems.value.find(i => i.uuid === orderUuid)
+  if (order) {
+    selectedOrderId.value = orderUuid
+    navigateTo(localePath(`/clientarea/orders/${orderUuid}`))
+  }
+}
+
+// Filter component for the layout
+const OrdersFilterComponent = defineComponent({
+  setup() {
+    return () => h('div', { class: 'p-2 space-y-3' }, [
+      h('div', {}, [
+        h('div', { class: 'text-xs font-semibold mb-1 text-base-content/70' }, t('ordersList.filters.status')),
+        h('ul', { class: 'menu menu-compact' },
+          filters.value.map(filter =>
+            h('li', { key: filter.id },
+              h('a', {
+                class: selectedFilter.value === filter.id ? 'active' : '',
+                onClick: () => { selectedFilter.value = filter.id }
+              }, filter.label)
+            )
+          )
+        )
+      ])
+    ])
+  }
+})
+
+// Provide data to layout
+provideCatalogLayout({
+  // Custom subnav for clientarea
+  subNavItems: [
+    { label: t('cabinetNav.orders'), path: '/clientarea/orders' },
+    { label: t('cabinetNav.addresses'), path: '/clientarea/addresses' },
+  ],
+  searchQuery,
+  activeFilters: activeFilterBadges,
+  displayedCount: computed(() => displayItems.value.length),
+  totalCount: computed(() => filteredItems.value.length),
+  onSearch,
+  onRemoveFilter,
+  filterComponent: OrdersFilterComponent,
+  mapItems: mapPoints,
+  mapId: 'orders-map',
+  pointColor: '#6366f1',
+  hoveredItemId: hoveredOrderId,
+  hoveredItem,
+  onMapSelect,
+  onBoundsChange,
+  searchWithMap
+})
+
 await init()

 const getOrderStartDate = (order: any) => {