From 03485b77a50137036993e8c62748afd67b4dc78a Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 15 Jan 2026 11:18:57 +0700
Subject: [PATCH] Refactor: use topnav layout + CatalogPage component

- Remove catalog.vue layout and useCatalogLayout.ts (broken provide/inject)
- All catalog/clientarea list pages now use topnav layout
- Pages use CatalogPage component for SearchBar + Map functionality
- Clean architecture: layout handles nav, component handles features
---
 app/composables/useCatalogLayout.ts      |  71 -----
 app/layouts/catalog.vue                  | 338 -----------------------
 app/pages/catalog/hubs/index.vue         | 203 +++++---------
 app/pages/catalog/offers/index.vue       | 140 ++++------
 app/pages/catalog/suppliers/index.vue    | 105 +++----
 app/pages/clientarea/addresses/index.vue | 149 ++++------
 app/pages/clientarea/offers/index.vue    | 245 +++++++---------
 app/pages/clientarea/orders/index.vue    | 242 +++++++---------
 8 files changed, 401 insertions(+), 1092 deletions(-)
 delete mode 100644 app/composables/useCatalogLayout.ts
 delete mode 100644 app/layouts/catalog.vue

diff --git a/app/composables/useCatalogLayout.ts b/app/composables/useCatalogLayout.ts
deleted file mode 100644
index 0c05b72..0000000
--- a/app/composables/useCatalogLayout.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-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
deleted file mode 100644
index 1b1d757..0000000
--- a/app/layouts/catalog.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<template>
-  <div class="min-h-screen bg-base-300">
-    <!-- Layer 1+2: MainNavigation + SubNavigation (slides up on scroll) -->
-    <div
-      class="fixed left-0 right-0 z-50"
-      :style="{ top: `${headerOffset}px` }"
-    >
-      <MainNavigation
-        class="bg-base-200"
-        :session-checked="sessionChecked"
-        :logged-in="isLoggedIn"
-        :user-avatar-svg="userAvatarSvg"
-        :user-name="userName"
-        :user-initials="userInitials"
-        :theme="theme"
-        :user-data="userData"
-        :is-seller="isSeller"
-        @toggle-theme="toggleTheme"
-        @sign-out="onClickSignOut"
-        @sign-in="signIn()"
-        @switch-team="switchToTeam"
-      />
-
-      <!-- SubNavigation -->
-      <div class="h-[54px] bg-base-200 border-b border-base-300 flex items-center">
-        <div class="flex items-center gap-1 px-4 lg:px-6">
-          <NuxtLink
-            v-for="item in subNavItems"
-            :key="item.path"
-            :to="localePath(item.path)"
-            class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap text-base-content/70 hover:text-base-content hover:bg-base-300"
-            :class="{ 'text-primary bg-primary/10': isSubNavActive(item.path) }"
-          >
-            {{ item.label }}
-          </NuxtLink>
-        </div>
-      </div>
-    </div>
-
-    <!-- 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` }"
-    >
-      <!-- Chevron button inside SearchBar -->
-      <button
-        class="btn btn-ghost btn-xs btn-circle ml-4 flex-shrink-0"
-        @click="isCollapsed ? expand() : collapse()"
-      >
-        <Icon :name="isCollapsed ? 'lucide:chevron-down' : 'lucide:chevron-up'" size="16" />
-      </button>
-      <!-- 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) -->
-    <div
-      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
-      class="lg:w-2/5 min-h-screen"
-      :style="{ paddingTop: `${contentPaddingTop}px` }"
-    >
-      <div class="px-4 lg:px-6 py-4">
-        <slot />
-      </div>
-    </div>
-
-    <!-- Mobile: Full width content + bottom toggle for map -->
-    <div class="lg:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
-      <div class="btn-group shadow-lg">
-        <button
-          class="btn btn-sm"
-          :class="{ 'btn-active': mobileView === 'list' }"
-          @click="mobileView = 'list'"
-        >
-          {{ $t('common.list') }}
-        </button>
-        <button
-          class="btn btn-sm"
-          :class="{ 'btn-active': mobileView === 'map' }"
-          @click="mobileView = 'map'"
-        >
-          {{ $t('common.map') }}
-        </button>
-      </div>
-    </div>
-
-    <!-- Mobile map view -->
-    <div
-      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()
-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)
-// Total header = 104px, SearchBar = 48px
-const {
-  headerOffset,
-  searchBarTop,
-  mapTop,
-  contentPaddingTop,
-  isCollapsed,
-  expand,
-  collapse
-} = useScrollCollapse(118, 56)
-
-// Mobile view toggle
-const mobileView = ref<'list' | 'map'>('list')
-
-// Theme state
-const theme = useState<'default' | 'night'>('theme', () => 'default')
-
-// User data state (shared across layouts)
-const userData = useState<{
-  id?: string
-  firstName?: string
-  lastName?: string
-  avatarId?: string
-  activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string; selectedLocation?: any }
-  activeTeamId?: string
-  teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
-} | null>('me', () => null)
-
-const sessionChecked = ref(false)
-const userAvatarSvg = useState('user-avatar-svg', () => '')
-const lastAvatarSeed = useState('user-avatar-seed', () => '')
-
-const isSeller = computed(() => {
-  return userData.value?.activeTeam?.teamType === 'SELLER'
-})
-
-const isLoggedIn = computed(() => loggedIn.value || !!userData.value?.id)
-
-const userName = computed(() => {
-  return userData.value?.firstName || 'User'
-})
-
-const userInitials = computed(() => {
-  const first = userData.value?.firstName?.charAt(0) || ''
-  const last = userData.value?.lastName?.charAt(0) || ''
-  if (first || last) return (first + last).toUpperCase()
-  return '?'
-})
-
-// 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) + '/')
-}
-
-// Provide collapsed state to children
-provide('headerCollapsed', isCollapsed)
-
-// Avatar generation
-const generateUserAvatar = async (seed: string) => {
-  if (!seed) return
-  try {
-    const response = await fetch(`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(seed)}&backgroundColor=b6e3f4,c0aede,d1d4f9`)
-    if (response.ok) {
-      userAvatarSvg.value = await response.text()
-      lastAvatarSeed.value = seed
-    }
-  } catch (error) {
-    console.error('Error generating avatar:', error)
-  }
-}
-
-const { setActiveTeam } = useActiveTeam()
-const { mutate } = useGraphQL()
-const locationStore = useLocationStore()
-
-const syncUserUi = async () => {
-  if (!userData.value) {
-    locationStore.clear()
-    return
-  }
-
-  if (userData.value.activeTeamId && userData.value.activeTeam?.logtoOrgId) {
-    setActiveTeam(userData.value.activeTeamId, userData.value.activeTeam.logtoOrgId)
-  }
-
-  const seed = userData.value.avatarId || userData.value.id || userData.value.firstName || 'default'
-
-  if (!userAvatarSvg.value || lastAvatarSeed.value !== seed) {
-    userAvatarSvg.value = ''
-    await generateUserAvatar(seed)
-  }
-
-  locationStore.setFromUserData(userData.value.activeTeam?.selectedLocation)
-}
-
-watch(userData, () => {
-  void syncUserUi()
-}, { immediate: true })
-
-// Check session
-await fetchSession().catch(() => {})
-sessionChecked.value = true
-
-const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: string }) => {
-  if (!team?.id) return
-
-  try {
-    const { SwitchTeamDocument } = await import('~/composables/graphql/user/teams-generated')
-    const result = await mutate(SwitchTeamDocument, { teamId: team.id }, 'user', 'teams')
-
-    if (result.switchTeam?.user && userData.value) {
-      userData.value.activeTeam = team as typeof userData.value.activeTeam
-      userData.value.activeTeamId = team.id
-      if (team.logtoOrgId) {
-        setActiveTeam(team.id, team.logtoOrgId)
-      }
-    }
-  } catch (err) {
-    console.error('Failed to switch team:', err)
-  }
-}
-
-const onClickSignOut = () => {
-  signOut(siteUrl)
-}
-
-const applyTheme = (value: 'default' | 'night') => {
-  if (import.meta.client) {
-    if (value === 'default') {
-      document.documentElement.removeAttribute('data-theme')
-    } else {
-      document.documentElement.setAttribute('data-theme', value)
-    }
-    localStorage.setItem('theme', value)
-  }
-}
-
-onMounted(() => {
-  const stored = import.meta.client ? localStorage.getItem('theme') : null
-  if (stored === 'night' || stored === 'default') {
-    theme.value = stored
-  }
-  applyTheme(theme.value)
-})
-
-watch(theme, (value) => applyTheme(value))
-
-const toggleTheme = () => {
-  theme.value = theme.value === 'night' ? 'default' : 'night'
-}
-</script>
diff --git a/app/pages/catalog/hubs/index.vue b/app/pages/catalog/hubs/index.vue
index c9a99b1..9a5494c 100644
--- a/app/pages/catalog/hubs/index.vue
+++ b/app/pages/catalog/hubs/index.vue
@@ -1,57 +1,90 @@
 <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 v-else>
-    <Stack gap="3">
-      <div
-        v-for="item in displayItems"
-        :key="item.uuid"
-        :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedHubId }"
-        @click="onSelectHub(item)"
-        @mouseenter="hoveredHubId = item.uuid"
-        @mouseleave="hoveredHubId = undefined"
+  <CatalogPage
+    :items="displayItems"
+    :map-items="itemsWithCoords"
+    :loading="isLoading"
+    with-map
+    use-server-clustering
+    map-id="hubs-map"
+    point-color="#10b981"
+    :selected-id="selectedHubId"
+    :hovered-id="hoveredHubId"
+    :total-count="total"
+    @select="onSelectHub"
+    @update:hovered-id="hoveredHubId = $event"
+  >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :active-filters="activeFilterBadges"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+        @remove-filter="onRemoveFilter"
+        @search="onSearch"
       >
-        <template v-for="country in getCountryForHub(item)" :key="country.name">
-          <Text v-if="isFirstInCountry(item)" weight="semibold" class="mb-2">{{ country.name }}</Text>
+        <template #filters>
+          <div class="p-2 space-y-3">
+            <!-- Transport filter -->
+            <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>
+            <!-- Country filter -->
+            <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>
-        <HubCard :hub="item" />
-      </div>
-    </Stack>
+      </CatalogSearchBar>
+    </template>
 
-    <PaginationLoadMore
-      v-if="displayItems.length > 0"
-      :shown="displayItems.length"
-      :total="total"
-      :can-load-more="canLoadMore"
-      :loading="isLoadingMore"
-      hide-counter
-      @load-more="loadMore"
-      class="mt-4"
-    />
+    <template #card="{ item }">
+      <template v-for="country in getCountryForHub(item)" :key="country.name">
+        <Text v-if="isFirstInCountry(item)" weight="semibold" class="mb-2">{{ country.name }}</Text>
+      </template>
+      <HubCard :hub="item" />
+    </template>
 
-    <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
+    <template #pagination>
+      <PaginationLoadMore
+        v-if="displayItems.length > 0"
+        :shown="displayItems.length"
+        :total="total"
+        :can-load-more="canLoadMore"
+        :loading="isLoadingMore"
+        hide-counter
+        @load-more="loadMore"
+        class="mt-4"
+      />
+    </template>
+
+    <template #empty>
       <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
-    </Stack>
-  </template>
-  </div>
+    </template>
+  </CatalogPage>
 </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'
+  layout: 'topnav'
 })
 
 const { t } = useI18n()
@@ -78,21 +111,10 @@ const hoveredHubId = ref<string>()
 // Search bar
 const searchQuery = ref('')
 
-// Server-side clustering
-const useServerClustering = true
-const { clusteredNodes, fetchClusters } = useClusteredNodes()
-
 // Search with map checkbox
 const searchWithMap = ref(false)
 const currentBounds = ref<MapBounds | null>(null)
 
-const onBoundsChange = (bounds: MapBounds) => {
-  currentBounds.value = bounds
-  if (useServerClustering) {
-    fetchClusters(bounds)
-  }
-}
-
 // Filter items with valid coordinates for map
 const itemsWithCoords = computed(() =>
   items.value.filter(item =>
@@ -121,14 +143,6 @@ const displayItems = computed(() => {
   })
 })
 
-// Hovered item with coordinates for map highlight
-const hoveredItem = computed(() => {
-  if (!hoveredHubId.value) return null
-  const item = items.value.find(i => i.uuid === hoveredHubId.value)
-  if (!item?.latitude || !item?.longitude) return null
-  return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
-})
-
 // Active filter badges (non-default filters shown as badges)
 const activeFilterBadges = computed(() => {
   const badges: { id: string; label: string }[] = []
@@ -161,14 +175,6 @@ const onSelectHub = (hub: any) => {
   selectedHubId.value = hub.uuid
 }
 
-// Handle selection from map
-const onMapSelect = (uuid: string) => {
-  const hub = items.value.find(i => i.uuid === uuid)
-  if (hub) {
-    selectedHubId.value = uuid
-  }
-}
-
 // Helper to get country for hub
 const getCountryForHub = (hub: any) => {
   return itemsByCountry.value.filter(c => c.hubs.some(h => h.uuid === hub.uuid))
@@ -182,65 +188,6 @@ 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 82a5475..8c74559 100644
--- a/app/pages/catalog/offers/index.vue
+++ b/app/pages/catalog/offers/index.vue
@@ -1,29 +1,49 @@
 <template>
-  <div>
-    <!-- List content -->
-    <div v-if="isLoading || productsLoading" 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>
+  <CatalogPage
+    :items="displayItems"
+    :map-items="itemsWithCoords"
+    :loading="isLoading || productsLoading"
+    with-map
+    map-id="offers-map"
+    point-color="#f59e0b"
+    :selected-id="selectedOfferId"
+    :hovered-id="hoveredOfferId"
+    :total-count="total"
+    @select="onSelectOffer"
+    @update:hovered-id="hoveredOfferId = $event"
+  >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :active-filters="activeFilterBadges"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+        @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>
+    </template>
 
-    <template v-else>
-      <Stack gap="3">
-        <div
-          v-for="item in displayItems"
-          :key="item.uuid"
-          :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedOfferId }"
-          @click="onSelectOffer(item)"
-          @mouseenter="hoveredOfferId = item.uuid"
-          @mouseleave="hoveredOfferId = undefined"
-        >
-          <OfferCard :offer="item" />
-        </div>
-      </Stack>
+    <template #card="{ item }">
+      <OfferCard :offer="item" />
+    </template>
 
+    <template #pagination>
       <PaginationLoadMore
         v-if="displayItems.length > 0"
         :shown="displayItems.length"
@@ -34,21 +54,19 @@
         @load-more="loadMore"
         class="mt-4"
       />
-
-      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
-        <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
-      </Stack>
     </template>
-  </div>
+
+    <template #empty>
+      <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+    </template>
+  </CatalogPage>
 </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'
+  layout: 'topnav'
 })
 
 const { t } = useI18n()
@@ -84,10 +102,6 @@ const searchQuery = ref('')
 const searchWithMap = ref(false)
 const currentBounds = ref<MapBounds | null>(null)
 
-const onBoundsChange = (bounds: MapBounds) => {
-  currentBounds.value = bounds
-}
-
 // Map items with correct coordinate field names
 const itemsWithCoords = computed(() =>
   items.value.filter(item =>
@@ -115,14 +129,6 @@ const displayItems = computed(() => {
   })
 })
 
-// Hovered item with coordinates for map highlight
-const hoveredItem = computed(() => {
-  if (!hoveredOfferId.value) return null
-  const item = items.value.find(i => i.uuid === hoveredOfferId.value)
-  if (!item?.locationLatitude || !item?.locationLongitude) return null
-  return { latitude: Number(item.locationLatitude), longitude: Number(item.locationLongitude) }
-})
-
 // Product filter options
 const productFilters = computed(() => {
   const all = [{ id: 'all', label: t('catalogOffersSection.filters.all_products') }]
@@ -164,54 +170,6 @@ const onSelectOffer = (offer: any) => {
   selectedOfferId.value = offer.uuid
 }
 
-// Handle selection from map
-const onMapSelect = (uuid: string) => {
-  const offer = items.value.find(i => i.uuid === uuid)
-  if (offer) {
-    selectedOfferId.value = uuid
-  }
-}
-
-// 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 83f213f..d43370f 100644
--- a/app/pages/catalog/suppliers/index.vue
+++ b/app/pages/catalog/suppliers/index.vue
@@ -1,29 +1,32 @@
 <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>
+  <CatalogPage
+    :items="displayItems"
+    :map-items="itemsWithCoords"
+    :loading="isLoading"
+    with-map
+    map-id="suppliers-map"
+    point-color="#3b82f6"
+    :selected-id="selectedSupplierId"
+    :hovered-id="hoveredSupplierId"
+    :total-count="total"
+    @select="onSelectSupplier"
+    @update:hovered-id="hoveredSupplierId = $event"
+  >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :active-filters="[]"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+        @search="onSearch"
+      />
+    </template>
 
-    <template v-else>
-      <Stack gap="3">
-        <div
-          v-for="item in displayItems"
-          :key="item.uuid || item.teamUuid"
-          :class="{ 'ring-2 ring-primary rounded-lg': (item.uuid || item.teamUuid) === selectedSupplierId }"
-          @click="onSelectSupplier(item)"
-          @mouseenter="hoveredSupplierId = item.uuid || item.teamUuid"
-          @mouseleave="hoveredSupplierId = undefined"
-        >
-          <SupplierCard :supplier="item" />
-        </div>
-      </Stack>
+    <template #card="{ item }">
+      <SupplierCard :supplier="item" />
+    </template>
 
+    <template #pagination>
       <PaginationLoadMore
         v-if="displayItems.length > 0"
         :shown="displayItems.length"
@@ -34,20 +37,19 @@
         @load-more="loadMore"
         class="mt-4"
       />
-
-      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
-        <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
-      </Stack>
     </template>
-  </div>
+
+    <template #empty>
+      <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
-import { provideCatalogLayout } from '~/composables/useCatalogLayout'
 
 definePageMeta({
-  layout: 'catalog'
+  layout: 'topnav'
 })
 
 const { t } = useI18n()
@@ -73,10 +75,6 @@ const searchQuery = ref('')
 const searchWithMap = ref(false)
 const currentBounds = ref<MapBounds | null>(null)
 
-const onBoundsChange = (bounds: MapBounds) => {
-  currentBounds.value = bounds
-}
-
 // Filter items with valid coordinates for map
 const itemsWithCoords = computed(() =>
   items.value.filter(item =>
@@ -104,54 +102,15 @@ const displayItems = computed(() => {
   })
 })
 
-// Hovered item with coordinates for map highlight
-const hoveredItem = computed(() => {
-  if (!hoveredSupplierId.value) return null
-  const item = items.value.find(i => (i.uuid || i.teamUuid) === hoveredSupplierId.value)
-  if (!item?.latitude || !item?.longitude) return null
-  return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
-})
-
 // Search handler (for future use)
 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
 }
 
-// Handle selection from map
-const onMapSelect = (uuid: string) => {
-  const supplier = items.value.find(i => (i.uuid || i.teamUuid) === uuid)
-  if (supplier) {
-    selectedSupplierId.value = uuid
-  }
-}
-
-// 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 449d5b3..4274aad 100644
--- a/app/pages/clientarea/addresses/index.vue
+++ b/app/pages/clientarea/addresses/index.vue
@@ -1,69 +1,68 @@
 <template>
-  <div>
-    <!-- Add button -->
-    <div class="mb-4">
+  <CatalogPage
+    :items="displayItems"
+    :map-items="itemsWithCoords"
+    :loading="isLoading"
+    with-map
+    map-id="addresses-map"
+    point-color="#10b981"
+    :selected-id="selectedAddressId"
+    :hovered-id="hoveredAddressId"
+    :total-count="items.length"
+    @select="onSelectAddress"
+    @update:hovered-id="hoveredAddressId = $event"
+  >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :active-filters="[]"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+        @search="onSearch"
+      />
+    </template>
+
+    <template #header>
       <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>
-    </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 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>
-  </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>
+
+    <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>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
-import { provideCatalogLayout } from '~/composables/useCatalogLayout'
 
 definePageMeta({
-  layout: 'catalog',
+  layout: 'topnav',
   middleware: ['auth-oidc']
 })
 
@@ -87,10 +86,6 @@ const searchQuery = ref('')
 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 =>
@@ -118,56 +113,14 @@ const displayItems = computed(() => {
   })
 })
 
-// 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 92900c5..583e20f 100644
--- a/app/pages/clientarea/offers/index.vue
+++ b/app/pages/clientarea/offers/index.vue
@@ -1,81 +1,101 @@
 <template>
-  <div>
-    <!-- Add button -->
-    <div class="mb-4">
+  <CatalogPage
+    :items="displayItems"
+    :map-items="itemsWithCoords"
+    :loading="isLoading"
+    with-map
+    map-id="seller-offers-map"
+    point-color="#f59e0b"
+    :selected-id="selectedOfferId"
+    :hovered-id="hoveredOfferId"
+    :total-count="totalOffers"
+    @select="onSelectOffer"
+    @update:hovered-id="hoveredOfferId = $event"
+  >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :active-filters="activeFilterBadges"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+        @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('clientOffersList.filters.status_label') }}</div>
+              <ul class="menu menu-compact">
+                <li v-for="filter in statusFilters" :key="filter.id">
+                  <a
+                    :class="{ 'active': selectedStatus === filter.id }"
+                    @click="selectedStatus = filter.id"
+                  >{{ filter.label }}</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </template>
+      </CatalogSearchBar>
+    </template>
+
+    <template #header>
+      <!-- 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>
+          <Button @click="loadOffers">{{ t('clientOffersList.error.retry') }}</Button>
+        </Stack>
+      </Alert>
+
+      <!-- Add button -->
       <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>
+    </template>
 
-    <!-- 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>
-        <Button @click="loadOffers">{{ t('clientOffersList.error.retry') }}</Button>
-      </Stack>
-    </Alert>
-
-    <!-- List content -->
-    <div v-else-if="isLoading" class="flex items-center justify-center py-8">
+    <template #card="{ item }">
       <Card padding="lg">
-        <Stack align="center" justify="center" gap="3">
-          <Spinner />
-          <Text tone="muted">{{ t('clientOffersList.states.loading') }}</Text>
+        <Stack gap="3">
+          <Stack direction="row" justify="between" align="center">
+            <Heading :level="3">{{ item.productName || t('clientOffersList.labels.untitled') }}</Heading>
+            <Badge :variant="getStatusVariant(item.status)">
+              {{ getStatusText(item.status) }}
+            </Badge>
+          </Stack>
+
+          <Text v-if="item.categoryName" tone="muted">{{ item.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">{{ item.quantity }} {{ item.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(item.pricePerUnit, item.currency) }}</Text>
+            </Stack>
+
+            <Stack gap="1">
+              <Text size="sm" tone="muted">{{ t('clientOffersList.labels.location') }}</Text>
+              <Text>{{ item.locationName || t('clientOffersList.labels.not_specified') }}</Text>
+            </Stack>
+
+            <Stack gap="1">
+              <Text size="sm" tone="muted">{{ t('clientOffersList.labels.valid_until') }}</Text>
+              <Text>{{ formatDate(item.validUntil) }}</Text>
+            </Stack>
+          </Grid>
         </Stack>
       </Card>
-    </div>
-
-    <template v-else>
-      <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>
-          </Card>
-        </div>
-      </Stack>
+    </template>
 
+    <template #pagination>
       <PaginationLoadMore
         v-if="offers.length > 0"
         :shown="offers.length"
@@ -85,29 +105,27 @@
         @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>
-  </div>
+
+    <template #empty>
+      <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"
+      />
+    </template>
+  </CatalogPage>
 </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: 'catalog',
+  layout: 'topnav',
   middleware: ['auth-oidc']
 })
 
@@ -131,10 +149,6 @@ const searchQuery = ref('')
 const searchWithMap = ref(false)
 const currentBounds = ref<MapBounds | null>(null)
 
-const onBoundsChange = (bounds: MapBounds) => {
-  currentBounds.value = bounds
-}
-
 const {
   data: offersData,
   pending: offersPending,
@@ -187,14 +201,6 @@ const displayItems = computed(() => {
   })
 })
 
-// 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(() => [
@@ -230,59 +236,6 @@ const onSelectOffer = (offer: any) => {
   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 0b2cedd..bbf330b 100644
--- a/app/pages/clientarea/orders/index.vue
+++ b/app/pages/clientarea/orders/index.vue
@@ -1,92 +1,108 @@
 <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>
+  <CatalogPage
+    :items="displayItems"
+    :map-items="mapPoints"
+    :loading="isLoading"
+    with-map
+    map-id="orders-map"
+    point-color="#6366f1"
+    :selected-id="selectedOrderId"
+    :hovered-id="hoveredOrderId"
+    :total-count="filteredItems.length"
+    @select="onSelectOrder"
+    @update:hovered-id="hoveredOrderId = $event"
+  >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :active-filters="activeFilterBadges"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+        @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('ordersList.filters.status') }}</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>
+        </template>
+      </CatalogSearchBar>
+    </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>
         </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 === 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>
-  </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>
+  </CatalogPage>
 </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',
+  layout: 'topnav',
   middleware: ['auth-oidc']
 })
 
@@ -113,10 +129,6 @@ const searchQuery = ref('')
 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 => ({
@@ -168,14 +180,6 @@ const displayItems = computed(() => {
   })
 })
 
-// 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 }[] = []
@@ -203,62 +207,6 @@ const onSelectOrder = (item: any) => {
   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) => {