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/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(() => ({

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()])
 

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(() => ({

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>

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',

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) => {