From 7ea96a97b3d97fe028bc2e4a291046946ab77dbe Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 15 Jan 2026 10:49:40 +0700
Subject: [PATCH] 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
---
 app/composables/useCatalogLayout.ts      |  71 ++++++
 app/layouts/catalog.vue                  |  94 +++++++-
 app/pages/catalog/hubs/index.vue         | 139 +++++------
 app/pages/catalog/offers/index.vue       | 104 ++++----
 app/pages/catalog/suppliers/index.vue    |  67 ++----
 app/pages/clientarea/addresses/index.vue | 179 ++++++++++----
 app/pages/clientarea/offers/index.vue    | 293 +++++++++++++++++------
 app/pages/clientarea/orders/index.vue    | 268 +++++++++++++++------
 8 files changed, 828 insertions(+), 387 deletions(-)
 create mode 100644 app/composables/useCatalogLayout.ts

diff --git a/app/composables/useCatalogLayout.ts b/app/composables/useCatalogLayout.ts
new file mode 100644
index 0000000..0c05b72
--- /dev/null
+++ 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)
+}
diff --git a/app/layouts/catalog.vue b/app/layouts/catalog.vue
index 172ee90..1b1d757 100644
--- 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) + '/')
diff --git a/app/pages/catalog/hubs/index.vue b/app/pages/catalog/hubs/index.vue
index 3a29225..c9a99b1 100644
--- 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(() => ({
diff --git a/app/pages/catalog/offers/index.vue b/app/pages/catalog/offers/index.vue
index 7ca235a..82a5475 100644
--- 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()])
 
diff --git a/app/pages/catalog/suppliers/index.vue b/app/pages/catalog/suppliers/index.vue
index 114f1df..83f213f 100644
--- 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(() => ({
diff --git a/app/pages/clientarea/addresses/index.vue b/app/pages/clientarea/addresses/index.vue
index 6772b6c..449d5b3 100644
--- a/app/pages/clientarea/addresses/index.vue
+++ b/app/pages/clientarea/addresses/index.vue
@@ -1,56 +1,69 @@
 <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"
-      >
-        <Card padding="sm" interactive>
-          <div class="flex flex-col gap-1">
-            <Text size="base" weight="semibold" class="truncate">{{ item.name }}</Text>
-            <Text tone="muted" size="sm" class="line-clamp-2">{{ item.address }}</Text>
-            <div class="flex items-center mt-1">
-              <span class="text-lg">{{ isoToEmoji(item.countryCode) }}</span>
-            </div>
-          </div>
-        </Card>
-      </NuxtLink>
-    </template>
+    <!-- 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 #empty>
-      <EmptyState
-        icon="📍"
-        :title="t('profileAddresses.empty.title')"
-        :description="t('profileAddresses.empty.description')"
-        :action-label="t('profileAddresses.empty.cta')"
-        :action-to="localePath('/clientarea/addresses/new')"
-        action-icon="lucide:plus"
-      />
+    <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>
+                <Text tone="muted" size="sm" class="line-clamp-2">{{ item.address }}</Text>
+                <div class="flex items-center mt-1">
+                  <span class="text-lg">{{ isoToEmoji(item.countryCode) }}</span>
+                </div>
+              </div>
+            </Card>
+          </NuxtLink>
+        </div>
+      </Stack>
+
+      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
+        <EmptyState
+          icon="📍"
+          :title="t('profileAddresses.empty.title')"
+          :description="t('profileAddresses.empty.description')"
+          :action-label="t('profileAddresses.empty.cta')"
+          :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>
diff --git a/app/pages/clientarea/offers/index.vue b/app/pages/clientarea/offers/index.vue
index 66d3b00..92900c5 100644
--- 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>
-        <NuxtLink :to="localePath('/clientarea/offers/new')">
-          <Button>
-            <Icon name="lucide:plus" size="16" class="mr-2" />
-            {{ t('clientOffersList.actions.add') }}
-          </Button>
-        </NuxtLink>
-      </template>
-    </PageHeader>
+  <div>
+    <!-- Add button -->
+    <div class="mb-4">
+      <NuxtLink :to="localePath('/clientarea/offers/new')">
+        <Button class="w-full">
+          <Icon name="lucide:plus" size="16" class="mr-2" />
+          {{ t('clientOffersList.actions.add') }}
+        </Button>
+      </NuxtLink>
+    </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,75 +19,95 @@
       </Stack>
     </Alert>
 
-    <Stack v-else-if="isLoading" align="center" justify="center" gap="3">
-      <Spinner />
-      <Text tone="muted">{{ t('clientOffersList.states.loading') }}</Text>
-    </Stack>
+    <!-- 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">
-            <Stack direction="row" justify="between" align="center">
-              <Heading :level="3">{{ offer.productName || t('clientOffersList.labels.untitled') }}</Heading>
-              <Badge :variant="getStatusVariant(offer.status)">
-                {{ getStatusText(offer.status) }}
-              </Badge>
+      <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>
+                <Badge :variant="getStatusVariant(offer.status)">
+                  {{ getStatusText(offer.status) }}
+                </Badge>
+              </Stack>
+
+              <Text v-if="offer.categoryName" tone="muted">{{ offer.categoryName }}</Text>
+
+              <Grid :cols="1" :md="4" :gap="3">
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('clientOffersList.labels.quantity') }}</Text>
+                  <Text weight="semibold">{{ offer.quantity }} {{ offer.unit || t('search.units.tons_short') }}</Text>
+                </Stack>
+
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('clientOffersList.labels.price') }}</Text>
+                  <Text weight="semibold">{{ formatPrice(offer.pricePerUnit, offer.currency) }}</Text>
+                </Stack>
+
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('clientOffersList.labels.location') }}</Text>
+                  <Text>{{ offer.locationName || t('clientOffersList.labels.not_specified') }}</Text>
+                </Stack>
+
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('clientOffersList.labels.valid_until') }}</Text>
+                  <Text>{{ formatDate(offer.validUntil) }}</Text>
+                </Stack>
+              </Grid>
             </Stack>
-
-            <Text v-if="offer.categoryName" tone="muted">{{ offer.categoryName }}</Text>
-
-            <Grid :cols="1" :md="4" :gap="3">
-              <Stack gap="1">
-                <Text size="sm" tone="muted">{{ t('clientOffersList.labels.quantity') }}</Text>
-                <Text weight="semibold">{{ offer.quantity }} {{ offer.unit || t('search.units.tons_short') }}</Text>
-              </Stack>
-
-              <Stack gap="1">
-                <Text size="sm" tone="muted">{{ t('clientOffersList.labels.price') }}</Text>
-                <Text weight="semibold">{{ formatPrice(offer.pricePerUnit, offer.currency) }}</Text>
-              </Stack>
-
-              <Stack gap="1">
-                <Text size="sm" tone="muted">{{ t('clientOffersList.labels.location') }}</Text>
-                <Text>{{ offer.locationName || t('clientOffersList.labels.not_specified') }}</Text>
-              </Stack>
-
-              <Stack gap="1">
-                <Text size="sm" tone="muted">{{ t('clientOffersList.labels.valid_until') }}</Text>
-                <Text>{{ formatDate(offer.validUntil) }}</Text>
-              </Stack>
-            </Grid>
-          </Stack>
-        </Card>
-
-        <PaginationLoadMore
-          :shown="offers.length"
-          :total="totalOffers"
-          :can-load-more="canLoadMore"
-          :loading="isLoadingMore"
-          @load-more="loadMore"
-        />
+          </Card>
+        </div>
       </Stack>
 
-      <EmptyState
-        v-else
-        icon="🏷️"
-        :title="t('clientOffersList.empty.title')"
-        :description="t('clientOffersList.empty.subtitle')"
-        :action-label="t('clientOffersList.actions.addOffer')"
-        :action-to="localePath('/clientarea/offers/new')"
-        action-icon="lucide:plus"
+      <PaginationLoadMore
+        v-if="offers.length > 0"
+        :shown="offers.length"
+        :total="totalOffers"
+        :can-load-more="canLoadMore"
+        :loading="isLoadingMore"
+        @load-more="loadMore"
+        class="mt-4"
       />
+
+      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
+        <EmptyState
+          icon="🏷️"
+          :title="t('clientOffersList.empty.title')"
+          :description="t('clientOffersList.empty.subtitle')"
+          :action-label="t('clientOffersList.actions.addOffer')"
+          :action-to="localePath('/clientarea/offers/new')"
+          action-icon="lucide:plus"
+        />
+      </Stack>
     </template>
-  </Stack>
+  </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',
diff --git a/app/pages/clientarea/orders/index.vue b/app/pages/clientarea/orders/index.vue
index 110f6b6..0b2cedd 100644
--- a/app/pages/clientarea/orders/index.vue
+++ b/app/pages/clientarea/orders/index.vue
@@ -1,81 +1,92 @@
 <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>
-
-    <template #card="{ item }">
-      <Card padding="lg" class="cursor-pointer">
-        <Stack gap="4">
-          <Stack direction="row" justify="between" align="center">
-            <Stack gap="1">
-              <Text size="sm" tone="muted">{{ t('ordersList.card.order_label') }}</Text>
-              <Heading :level="3">#{{ item.name }}</Heading>
-            </Stack>
-            <div class="badge badge-outline">
-              {{ getOrderStartDate(item) }} → {{ getOrderEndDate(item) }}
-            </div>
-          </Stack>
-
-          <div class="divider my-0"></div>
-
-          <Grid :cols="1" :md="3" :gap="3">
-            <Stack gap="1">
-              <Text size="sm" tone="muted">{{ t('ordersList.card.route') }}</Text>
-              <Text weight="semibold">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</Text>
-            </Stack>
-
-            <Stack gap="1">
-              <Text size="sm" tone="muted">{{ t('ordersList.card.product') }}</Text>
-              <Text>
-                {{ item.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
-                <template v-if="item.orderLines?.length > 1">
-                  <span class="badge badge-ghost ml-2">+{{ item.orderLines.length - 1 }}</span>
-                </template>
-              </Text>
-              <Text tone="muted" size="sm">
-                {{ item.orderLines?.[0]?.quantity || 0 }} {{ item.orderLines?.[0]?.unit || t('ordersList.card.unit_tons') }}
-              </Text>
-            </Stack>
-
-            <Stack gap="1">
-              <Text size="sm" tone="muted">{{ t('ordersList.card.status') }}</Text>
-              <Badge :variant="getStatusVariant(item.status)">
-                {{ getStatusText(item.status) }}
-              </Badge>
-              <Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(item), total: item.stages?.length || 0 }) }}</Text>
-            </Stack>
-          </Grid>
+  <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>
-    </template>
+    </div>
 
-    <template #empty>
-      <EmptyState
-        icon="📦"
-        :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"
-      />
+    <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">
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('ordersList.card.order_label') }}</Text>
+                  <Heading :level="3">#{{ item.name }}</Heading>
+                </Stack>
+                <div class="badge badge-outline">
+                  {{ getOrderStartDate(item) }} → {{ getOrderEndDate(item) }}
+                </div>
+              </Stack>
+
+              <div class="divider my-0"></div>
+
+              <Grid :cols="1" :md="3" :gap="3">
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('ordersList.card.route') }}</Text>
+                  <Text weight="semibold">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</Text>
+                </Stack>
+
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('ordersList.card.product') }}</Text>
+                  <Text>
+                    {{ item.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
+                    <template v-if="item.orderLines?.length > 1">
+                      <span class="badge badge-ghost ml-2">+{{ item.orderLines.length - 1 }}</span>
+                    </template>
+                  </Text>
+                  <Text tone="muted" size="sm">
+                    {{ item.orderLines?.[0]?.quantity || 0 }} {{ item.orderLines?.[0]?.unit || t('ordersList.card.unit_tons') }}
+                  </Text>
+                </Stack>
+
+                <Stack gap="1">
+                  <Text size="sm" tone="muted">{{ t('ordersList.card.status') }}</Text>
+                  <Badge :variant="getStatusVariant(item.status)">
+                    {{ getStatusText(item.status) }}
+                  </Badge>
+                  <Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(item), total: item.stages?.length || 0 }) }}</Text>
+                </Stack>
+              </Grid>
+            </Stack>
+          </Card>
+        </div>
+      </Stack>
+
+      <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')"
+          :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) => {