Implement unified catalog search with token-based filtering

- Add useCatalogSearch composable for managing unified search state - Add UnifiedSearchBar component with token chips for filters - Add CatalogHero component for empty/landing state - Create grid components for each display mode: - CatalogGridProducts, CatalogGridSuppliers, CatalogGridHubs - CatalogGridHubsForProduct, CatalogGridProductsFromSupplier - CatalogGridProductsInHub, CatalogGridOffers - Add unified catalog page at /catalog with query params - Remove SubNavigation from catalog section (kept for other sections) - Update all links to use new unified catalog paths - Delete old nested catalog pages (offers/suppliers/hubs flows) - Add i18n translations for catalog section
2026-01-22 10:57:30 +07:00
parent 01f0836173
commit 08d7e0ade9
39 changed files with 1278 additions and 2185 deletions
--- a/app/components/GoodsContent.vue
+++ b/app/components/GoodsContent.vue
@@ -54,8 +54,8 @@ const selectProduct = (product: any) => {
  if (locationUuid) {
    // Both product and hub selected -> show offers
    navigateTo({
-      path: `/catalog/offers/${product.uuid}/${locationUuid}`,
-      query
+      path: `/catalog`,
+      query: { product: product.uuid, hub: locationUuid, ...query }
    })
    return
  }
--- a/app/components/Sidebar.vue
+++ b/app/components/Sidebar.vue
@@ -38,8 +38,8 @@
          </li>
          <li>
            <NuxtLink
-              :to="localePath('/catalog/offers')"
-              :class="{ active: isActive('/catalog/offers') }"
+              :to="localePath('/catalog?select=product')"
+              :class="{ active: isCatalogActive('product') }"
              class="tooltip tooltip-right"
              :data-tip="t('nav.offers')"
            >
@@ -48,8 +48,8 @@
          </li>
          <li>
            <NuxtLink
-              :to="localePath('/catalog/suppliers')"
-              :class="{ active: isActive('/catalog/suppliers') }"
+              :to="localePath('/catalog?select=supplier')"
+              :class="{ active: isCatalogActive('supplier') }"
              class="tooltip tooltip-right"
              :data-tip="t('nav.suppliers')"
            >
@@ -58,8 +58,8 @@
          </li>
          <li>
            <NuxtLink
-              :to="localePath('/catalog/hubs')"
-              :class="{ active: isActive('/catalog/hubs') }"
+              :to="localePath('/catalog?select=hub')"
+              :class="{ active: isCatalogActive('hub') }"
              class="tooltip tooltip-right"
              :data-tip="t('nav.hubs')"
            >
@@ -169,19 +169,19 @@
                  </NuxtLink>
                </li>
                <li>
-                  <NuxtLink :to="localePath('/catalog/offers')" :class="{ active: isActive('/catalog/offers') }">
+                  <NuxtLink :to="localePath('/catalog?select=product')" :class="{ active: isCatalogActive('product') }">
                    <Icon name="lucide:tag" size="18" />
                    {{ t('nav.offers') }}
                  </NuxtLink>
                </li>
                <li>
-                  <NuxtLink :to="localePath('/catalog/suppliers')" :class="{ active: isActive('/catalog/suppliers') }">
+                  <NuxtLink :to="localePath('/catalog?select=supplier')" :class="{ active: isCatalogActive('supplier') }">
                    <Icon name="lucide:building-2" size="18" />
                    {{ t('nav.suppliers') }}
                  </NuxtLink>
                </li>
                <li>
-                  <NuxtLink :to="localePath('/catalog/hubs')" :class="{ active: isActive('/catalog/hubs') }">
+                  <NuxtLink :to="localePath('/catalog?select=hub')" :class="{ active: isCatalogActive('hub') }">
                    <Icon name="lucide:warehouse" size="18" />
                    {{ t('nav.hubs') }}
                  </NuxtLink>
@@ -379,6 +379,24 @@ const isActive = (path: string) => {
  return current.startsWith(localePath(path) + '/')
 }

+// Check if catalog section is active based on query params
+const isCatalogActive = (type: 'product' | 'supplier' | 'hub') => {
+  const catalogPath = localePath('/catalog')
+  if (!route.path.startsWith(catalogPath)) return false
+
+  const { select, product, supplier, hub } = route.query
+
+  // If we're in selection mode for this type
+  if (select === type) return true
+
+  // If this type has been selected (in the flow)
+  if (type === 'product' && (product || select === 'product')) return true
+  if (type === 'supplier' && supplier) return true
+  if (type === 'hub' && hub) return true
+
+  return false
+}
+
 const isExactActive = (path: string) => {
  return route.path === localePath(path)
 }
--- a/app/components/catalog/CatalogBreadcrumbs.vue
+++ b/app/components/catalog/CatalogBreadcrumbs.vue
@@ -28,7 +28,7 @@ const breadcrumbs = computed(() => {
  // Hubs list
  crumbs.push({
    label: t('breadcrumbs.hubs', 'Hubs'),
-    to: localePath('/catalog/hubs')
+    to: localePath('/catalog?select=hub')
  })

  // Hub
--- a/app/components/catalog/CatalogGridHubs.vue
+++ b/app/components/catalog/CatalogGridHubs.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.selectHub') }}</Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noHubs') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <HubCard
+        v-for="hub in filteredItems"
+        :key="hub.uuid"
+        :hub="hub"
+        selectable
+        @select="$emit('select', { uuid: hub.uuid, name: hub.name })"
+      />
+    </div>
+
+    <PaginationLoadMore
+      v-if="filteredItems.length > 0 && canLoadMore"
+      :shown="filteredItems.length"
+      :total="total"
+      :can-load-more="canLoadMore"
+      :loading="isLoadingMore"
+      hide-counter
+      @load-more="loadMore"
+      class="mt-4"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', hub: { uuid: string; name: string }): void
+}>()
+
+const { t } = useI18n()
+const { items, total, isLoading, isLoadingMore, canLoadMore, loadMore, init } = useCatalogHubs()
+
+await init()
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q) ||
+    item.country?.toLowerCase().includes(q)
+  )
+})
+</script>
--- a/app/components/catalog/CatalogGridHubsForProduct.vue
+++ b/app/components/catalog/CatalogGridHubsForProduct.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">
+      {{ t('catalog.headers.hubsForProduct') }}
+      <span v-if="!isLoading" class="text-base-content/50 font-normal">
+        ({{ filteredItems.length }})
+      </span>
+    </Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noHubs') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <HubCard
+        v-for="hub in filteredItems"
+        :key="hub.uuid"
+        :hub="hub"
+        selectable
+        @select="$emit('select', { uuid: hub.uuid, name: hub.name })"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
+
+const props = defineProps<{
+  productId: string
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', hub: { uuid: string; name: string }): void
+  (e: 'product-loaded', name: string): void
+}>()
+
+const { t } = useI18n()
+const { execute } = useGraphQL()
+
+const items = ref<any[]>([])
+const isLoading = ref(true)
+
+// Fetch hubs for product by getting offers and extracting unique hubs
+const fetchData = async () => {
+  isLoading.value = true
+  try {
+    const data = await execute(
+      GetOffersDocument,
+      { productUuid: props.productId },
+      'public',
+      'exchange'
+    )
+    const offers = data?.getOffers || []
+
+    // Get product name from first offer
+    if (offers.length > 0 && offers[0].productName) {
+      emit('product-loaded', offers[0].productName)
+    }
+
+    // Extract unique hubs from offers
+    const hubsMap = new Map<string, any>()
+    offers.forEach((offer: any) => {
+      if (offer.locationUuid && !hubsMap.has(offer.locationUuid)) {
+        hubsMap.set(offer.locationUuid, {
+          uuid: offer.locationUuid,
+          name: offer.locationName,
+          country: offer.locationCountry,
+          countryCode: offer.locationCountryCode,
+          latitude: offer.locationLatitude,
+          longitude: offer.locationLongitude
+        })
+      }
+    })
+
+    items.value = Array.from(hubsMap.values())
+  } finally {
+    isLoading.value = false
+  }
+}
+
+await fetchData()
+
+watch(() => props.productId, fetchData)
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q) ||
+    item.country?.toLowerCase().includes(q)
+  )
+})
+</script>
--- a/app/components/catalog/CatalogGridOffers.vue
+++ b/app/components/catalog/CatalogGridOffers.vue
@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">
+      {{ t('catalog.headers.offers') }}
+      <span v-if="!isLoading" class="text-base-content/50 font-normal">
+        ({{ filteredItems.length }})
+      </span>
+    </Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noOffers') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <OfferCard
+        v-for="offer in filteredItems"
+        :key="offer.uuid"
+        :offer="offer"
+        linkable
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  GetOffersDocument,
+  GetSupplierOffersDocument
+} from '~/composables/graphql/public/exchange-generated'
+
+const props = defineProps<{
+  productId?: string | null
+  supplierId?: string | null
+  hubId?: string | null
+  searchQuery: string
+}>()
+
+const { t } = useI18n()
+const { execute } = useGraphQL()
+
+const items = ref<any[]>([])
+const isLoading = ref(true)
+
+const fetchData = async () => {
+  isLoading.value = true
+  try {
+    let offers: any[] = []
+
+    if (props.productId && props.hubId) {
+      // Product + Hub = specific offers
+      const data = await execute(
+        GetOffersDocument,
+        {
+          productUuid: props.productId,
+          locationUuid: props.hubId
+        },
+        'public',
+        'exchange'
+      )
+      offers = data?.getOffers || []
+    } else if (props.supplierId && props.productId) {
+      // Supplier + Product = offers from supplier for product
+      const data = await execute(
+        GetSupplierOffersDocument,
+        { teamUuid: props.supplierId },
+        'public',
+        'exchange'
+      )
+      offers = (data?.getOffers || []).filter(
+        (o: any) => o.productUuid === props.productId
+      )
+    } else if (props.supplierId) {
+      // Just supplier = all offers from supplier
+      const data = await execute(
+        GetSupplierOffersDocument,
+        { teamUuid: props.supplierId },
+        'public',
+        'exchange'
+      )
+      offers = data?.getOffers || []
+    } else if (props.hubId) {
+      // Just hub = all offers in hub
+      const data = await execute(
+        GetOffersDocument,
+        { locationUuid: props.hubId },
+        'public',
+        'exchange'
+      )
+      offers = data?.getOffers || []
+    } else if (props.productId) {
+      // Just product = all offers for product
+      const data = await execute(
+        GetOffersDocument,
+        { productUuid: props.productId },
+        'public',
+        'exchange'
+      )
+      offers = data?.getOffers || []
+    }
+
+    items.value = offers
+  } finally {
+    isLoading.value = false
+  }
+}
+
+await fetchData()
+
+watch([() => props.productId, () => props.supplierId, () => props.hubId], fetchData)
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.productName?.toLowerCase().includes(q) ||
+    item.teamName?.toLowerCase().includes(q) ||
+    item.locationName?.toLowerCase().includes(q)
+  )
+})
+</script>
--- a/app/components/catalog/CatalogGridProducts.vue
+++ b/app/components/catalog/CatalogGridProducts.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.selectProduct') }}</Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noProducts') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <HubProductCard
+        v-for="product in filteredItems"
+        :key="product.uuid"
+        :name="product.name"
+        selectable
+        @select="$emit('select', product)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', product: { uuid: string; name: string }): void
+}>()
+
+const { t } = useI18n()
+const { items, isLoading, init } = useCatalogProducts()
+
+await init()
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+</script>
--- a/app/components/catalog/CatalogGridProductsFromSupplier.vue
+++ b/app/components/catalog/CatalogGridProductsFromSupplier.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.productsFromSupplier') }}</Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noProducts') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <HubProductCard
+        v-for="product in filteredItems"
+        :key="product.uuid"
+        :name="product.name"
+        selectable
+        @select="$emit('select', product)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  GetSupplierProfileDocument,
+  GetSupplierOffersDocument
+} from '~/composables/graphql/public/exchange-generated'
+
+const props = defineProps<{
+  supplierId: string
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', product: { uuid: string; name: string }): void
+  (e: 'supplier-loaded', name: string): void
+}>()
+
+const { t } = useI18n()
+const { execute } = useGraphQL()
+
+const items = ref<any[]>([])
+const isLoading = ref(true)
+
+const fetchData = async () => {
+  isLoading.value = true
+  try {
+    // Get supplier info
+    const supplierData = await execute(
+      GetSupplierProfileDocument,
+      { uuid: props.supplierId },
+      'public',
+      'exchange'
+    )
+    if (supplierData?.getSupplierProfile?.name) {
+      emit('supplier-loaded', supplierData.getSupplierProfile.name)
+    }
+
+    // Get supplier's offers and extract unique products
+    const offersData = await execute(
+      GetSupplierOffersDocument,
+      { teamUuid: props.supplierId },
+      'public',
+      'exchange'
+    )
+
+    const productsMap = new Map<string, { uuid: string; name: string }>()
+    ;(offersData?.getOffers || []).forEach((offer: any) => {
+      if (offer.productUuid && offer.productName && !productsMap.has(offer.productUuid)) {
+        productsMap.set(offer.productUuid, {
+          uuid: offer.productUuid,
+          name: offer.productName
+        })
+      }
+    })
+    items.value = Array.from(productsMap.values())
+  } finally {
+    isLoading.value = false
+  }
+}
+
+await fetchData()
+
+watch(() => props.supplierId, fetchData)
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+</script>
--- a/app/components/catalog/CatalogGridProductsInHub.vue
+++ b/app/components/catalog/CatalogGridProductsInHub.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.productsInHub') }}</Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noProducts') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <HubProductCard
+        v-for="product in filteredItems"
+        :key="product.uuid"
+        :name="product.name"
+        selectable
+        @select="$emit('select', product)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GetNodeDocument } from '~/composables/graphql/public/geo-generated'
+import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
+
+const props = defineProps<{
+  hubId: string
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', product: { uuid: string; name: string }): void
+  (e: 'hub-loaded', name: string): void
+}>()
+
+const { t } = useI18n()
+const { execute } = useGraphQL()
+
+const items = ref<any[]>([])
+const isLoading = ref(true)
+
+const fetchData = async () => {
+  isLoading.value = true
+  try {
+    // Get hub info
+    const hubData = await execute(
+      GetNodeDocument,
+      { uuid: props.hubId },
+      'public',
+      'geo'
+    )
+    if (hubData?.node?.name) {
+      emit('hub-loaded', hubData.node.name)
+    }
+
+    // Get offers in this hub and extract unique products
+    const offersData = await execute(
+      GetOffersDocument,
+      { locationUuid: props.hubId },
+      'public',
+      'exchange'
+    )
+
+    const productsMap = new Map<string, { uuid: string; name: string }>()
+    ;(offersData?.getOffers || []).forEach((offer: any) => {
+      if (offer.productUuid && offer.productName && !productsMap.has(offer.productUuid)) {
+        productsMap.set(offer.productUuid, {
+          uuid: offer.productUuid,
+          name: offer.productName
+        })
+      }
+    })
+    items.value = Array.from(productsMap.values())
+  } finally {
+    isLoading.value = false
+  }
+}
+
+await fetchData()
+
+watch(() => props.hubId, fetchData)
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+</script>
--- a/app/components/catalog/CatalogGridSuppliers.vue
+++ b/app/components/catalog/CatalogGridSuppliers.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.selectSupplier') }}</Text>
+
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <div v-else-if="filteredItems.length === 0" class="text-center py-12">
+      <Text tone="muted">{{ t('catalog.empty.noSuppliers') }}</Text>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <SupplierCard
+        v-for="supplier in filteredItems"
+        :key="supplier.uuid || supplier.teamUuid"
+        :supplier="supplier"
+        selectable
+        @select="$emit('select', { uuid: supplier.uuid || supplier.teamUuid, name: supplier.name })"
+      />
+    </div>
+
+    <PaginationLoadMore
+      v-if="filteredItems.length > 0 && canLoadMore"
+      :shown="filteredItems.length"
+      :total="total"
+      :can-load-more="canLoadMore"
+      :loading="isLoadingMore"
+      hide-counter
+      @load-more="loadMore"
+      class="mt-4"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', supplier: { uuid: string; name: string }): void
+}>()
+
+const { t } = useI18n()
+const { items, total, isLoading, isLoadingMore, canLoadMore, loadMore, init } = useCatalogSuppliers()
+
+await init()
+
+const filteredItems = computed(() => {
+  if (!props.searchQuery.trim()) return items.value
+  const q = props.searchQuery.toLowerCase()
+  return items.value.filter((item: any) =>
+    item.name?.toLowerCase().includes(q)
+  )
+})
+</script>
--- a/app/components/catalog/CatalogHero.vue
+++ b/app/components/catalog/CatalogHero.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+    <h1 class="text-4xl font-bold mb-4">{{ t('catalog.hero.title') }}</h1>
+    <p class="text-lg text-base-content/70 mb-8 max-w-lg">
+      {{ t('catalog.hero.subtitle') }}
+    </p>
+
+    <div class="flex flex-wrap justify-center gap-4">
+      <button
+        class="btn btn-lg btn-primary gap-2"
+        @click="$emit('start-select', 'product')"
+      >
+        <Icon name="lucide:package" size="24" />
+        {{ t('catalog.filters.product') }}
+      </button>
+
+      <button
+        class="btn btn-lg btn-outline gap-2"
+        @click="$emit('start-select', 'supplier')"
+      >
+        <Icon name="lucide:factory" size="24" />
+        {{ t('catalog.filters.supplier') }}
+      </button>
+
+      <button
+        class="btn btn-lg btn-outline gap-2"
+        @click="$emit('start-select', 'hub')"
+      >
+        <Icon name="lucide:map-pin" size="24" />
+        {{ t('catalog.filters.hub') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits<{
+  (e: 'start-select', type: string): void
+}>()
+
+const { t } = useI18n()
+</script>
--- a/app/components/catalog/CatalogHubsSection.vue
+++ b/app/components/catalog/CatalogHubsSection.vue
@@ -4,7 +4,7 @@
      <Stack direction="row" align="center" justify="between">
        <Heading :level="2">{{ t('catalogHubsSection.header.title') }}</Heading>
        <NuxtLink
-          :to="localePath('/catalog/hubs')"
+          :to="localePath('/catalog?select=hub')"
          class="btn btn-sm btn-ghost"
        >
          <span>{{ t('catalogHubsSection.actions.view_all') }}</span>
--- a/app/components/catalog/CatalogOffersSection.vue
+++ b/app/components/catalog/CatalogOffersSection.vue
@@ -4,7 +4,7 @@
      <Stack direction="row" align="center" justify="between">
        <Heading :level="2">{{ t('catalogOffersSection.header.title') }}</Heading>
        <NuxtLink
-          :to="localePath('/catalog/offers')"
+          :to="localePath('/catalog?select=product')"
          class="btn btn-sm btn-ghost"
        >
          <span>{{ t('catalogOffersSection.actions.view_all') }}</span>
--- a/app/components/catalog/CatalogSuppliersSection.vue
+++ b/app/components/catalog/CatalogSuppliersSection.vue
@@ -4,7 +4,7 @@
      <Stack direction="row" align="center" justify="between">
        <Heading :level="2">{{ t('catalogSuppliersSection.header.title') }}</Heading>
        <NuxtLink
-          :to="localePath('/catalog/suppliers')"
+          :to="localePath('/catalog?select=supplier')"
          class="btn btn-sm btn-ghost"
        >
          <span>{{ t('catalogSuppliersSection.actions.view_all') }}</span>
--- a/app/components/catalog/OffersBreadcrumbs.vue
+++ b/app/components/catalog/OffersBreadcrumbs.vue
@@ -25,17 +25,17 @@ const { t } = useI18n()
 const breadcrumbs = computed(() => {
  const crumbs: Array<{ label: string; to?: string }> = []

-  // Products list
+  // Catalog root
  crumbs.push({
    label: t('breadcrumbs.products', 'Products'),
-    to: localePath('/catalog/offers')
+    to: localePath('/catalog?select=product')
  })

  // Product
  if (props.productId) {
    crumbs.push({
      label: props.productName || `#${props.productId.slice(0, 8)}...`,
-      to: props.hubId ? localePath(`/catalog/offers/${props.productId}`) : undefined
+      to: props.hubId ? localePath(`/catalog?product=${props.productId}`) : undefined
    })
  }

--- a/app/components/catalog/SupplierCard.vue
+++ b/app/components/catalog/SupplierCard.vue
@@ -1,7 +1,7 @@
 <template>
  <component
    :is="linkable ? NuxtLink : 'div'"
-    :to="linkable ? localePath(`/catalog/suppliers/${supplier.uuid}`) : undefined"
+    :to="linkable ? localePath(`/catalog?supplier=${supplier.uuid}`) : undefined"
    class="block"
    :class="{ 'cursor-pointer': selectable }"
    @click="selectable && $emit('select')"
--- a/app/components/catalog/SuppliersBreadcrumbs.vue
+++ b/app/components/catalog/SuppliersBreadcrumbs.vue
@@ -30,7 +30,7 @@ const breadcrumbs = computed(() => {
  // Suppliers list
  crumbs.push({
    label: t('breadcrumbs.suppliers', 'Suppliers'),
-    to: localePath('/catalog/suppliers')
+    to: localePath('/catalog?select=supplier')
  })

  // Supplier
@@ -38,7 +38,7 @@ const breadcrumbs = computed(() => {
    const hasNext = props.productId
    crumbs.push({
      label: props.supplierName || `#${props.supplierId.slice(0, 8)}...`,
-      to: hasNext ? localePath(`/catalog/suppliers/${props.supplierId}`) : undefined
+      to: hasNext ? localePath(`/catalog?supplier=${props.supplierId}`) : undefined
    })
  }

@@ -47,7 +47,7 @@ const breadcrumbs = computed(() => {
    const hasNext = props.hubId
    crumbs.push({
      label: props.productName || `#${props.productId.slice(0, 8)}...`,
-      to: hasNext ? localePath(`/catalog/suppliers/${props.supplierId}/${props.productId}`) : undefined
+      to: hasNext ? localePath(`/catalog?supplier=${props.supplierId}&product=${props.productId}`) : undefined
    })
  }

--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -177,7 +177,7 @@ const { t } = useI18n()

 const tabs = computed(() => [
  { key: 'search', label: t('cabinetNav.search'), path: '/', auth: false },
-  { key: 'catalog', label: t('cabinetNav.catalog'), path: '/catalog/offers', auth: false },
+  { key: 'catalog', label: t('cabinetNav.catalog'), path: '/catalog', auth: false },
  { key: 'orders', label: t('cabinetNav.orders'), path: '/clientarea/orders', auth: true },
  { key: 'seller', label: t('cabinetNav.seller'), path: '/clientarea/offers', auth: true, seller: true },
 ])
--- a/app/components/navigation/SubNavigation.vue
+++ b/app/components/navigation/SubNavigation.vue
@@ -25,9 +25,9 @@ const { t } = useI18n()

 const sectionItems = computed(() => ({
  catalog: [
-    { label: 'Предложения', path: '/catalog/offers' },
-    { label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
-    { label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
+    { label: 'Предложения', path: '/catalog?select=product' },
+    { label: t('cabinetNav.suppliers'), path: '/catalog?select=supplier' },
+    { label: t('cabinetNav.hubs'), path: '/catalog?select=hub' },
  ],
  orders: [
    { label: t('cabinetNav.orders'), path: '/clientarea/orders' },
--- a/app/components/search/GlobalSearchBar.vue
+++ b/app/components/search/GlobalSearchBar.vue
@@ -112,18 +112,18 @@ const handleSearch = () => {
    query.quantity = String(quantity.value)
  }

-  // Navigate to offers flow
+  // Navigate to unified catalog
  if (productUuid.value && locationUuid.value) {
    // Both product and hub selected -> show offers
    router.push({
-      path: localePath(`/catalog/offers/${productUuid.value}/${locationUuid.value}`),
-      query
+      path: localePath('/catalog'),
+      query: { product: productUuid.value, hub: locationUuid.value, ...query }
    })
  } else if (productUuid.value) {
-    // Only product selected -> select hub
+    // Only product selected -> show hubs for product
    router.push({
-      path: localePath(`/catalog/offers/${productUuid.value}`),
-      query
+      path: localePath('/catalog'),
+      query: { product: productUuid.value, ...query }
    })
  }

--- a/app/components/search/UnifiedSearchBar.vue
+++ b/app/components/search/UnifiedSearchBar.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="bg-base-100 rounded-box shadow-md">
+    <!-- Search bar row -->
+    <div class="flex items-center gap-2 p-3 flex-wrap">
+      <!-- Active filter tokens -->
+      <div
+        v-for="token in activeTokens"
+        :key="token.type"
+        class="badge badge-lg gap-1 cursor-pointer hover:badge-primary transition-colors"
+        @click="onEditToken(token.type)"
+      >
+        <Icon :name="token.icon" size="14" />
+        <span class="max-w-32 truncate">{{ token.label }}</span>
+        <button
+          class="ml-1 hover:text-error"
+          @click.stop="onRemoveToken(token.type)"
+        >
+          <Icon name="lucide:x" size="12" />
+        </button>
+      </div>
+
+      <!-- Active selection mode indicator -->
+      <div
+        v-if="selectMode"
+        class="badge badge-lg badge-outline badge-primary gap-1"
+      >
+        <Icon :name="selectModeIcon" size="14" />
+        {{ selectModeLabel }}: ?
+        <button
+          class="ml-1 hover:text-error"
+          @click="onCancelSelect"
+        >
+          <Icon name="lucide:x" size="12" />
+        </button>
+      </div>
+
+      <!-- Search input -->
+      <div class="flex-1 min-w-48">
+        <input
+          v-model="localSearchQuery"
+          type="text"
+          :placeholder="placeholder"
+          class="input input-bordered w-full"
+          @input="onSearchInput"
+        />
+      </div>
+    </div>
+
+    <!-- Quick filter chips -->
+    <div
+      v-if="availableChips.length > 0"
+      class="flex items-center gap-2 px-3 pb-3 flex-wrap"
+    >
+      <button
+        v-for="chip in availableChips"
+        :key="chip.type"
+        class="btn btn-sm btn-ghost gap-1"
+        @click="onStartSelect(chip.type)"
+      >
+        <Icon name="lucide:plus" size="14" />
+        {{ chip.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SelectMode } from '~/composables/useCatalogSearch'
+
+const props = defineProps<{
+  activeTokens: Array<{ type: string; id: string; label: string; icon: string }>
+  availableChips: Array<{ type: string; label: string }>
+  selectMode: SelectMode
+  searchQuery: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'start-select', type: string): void
+  (e: 'cancel-select'): void
+  (e: 'edit-token', type: string): void
+  (e: 'remove-token', type: string): void
+  (e: 'update:search-query', value: string): void
+}>()
+
+const { t } = useI18n()
+
+const localSearchQuery = ref(props.searchQuery)
+
+watch(() => props.searchQuery, (val) => {
+  localSearchQuery.value = val
+})
+
+const placeholder = computed(() => {
+  if (props.selectMode === 'product') return t('catalog.search.searchProducts')
+  if (props.selectMode === 'supplier') return t('catalog.search.searchSuppliers')
+  if (props.selectMode === 'hub') return t('catalog.search.searchHubs')
+  return t('catalog.search.placeholder')
+})
+
+const selectModeLabel = computed(() => {
+  if (props.selectMode === 'product') return t('catalog.filters.product')
+  if (props.selectMode === 'supplier') return t('catalog.filters.supplier')
+  if (props.selectMode === 'hub') return t('catalog.filters.hub')
+  return ''
+})
+
+const selectModeIcon = computed(() => {
+  if (props.selectMode === 'product') return 'lucide:package'
+  if (props.selectMode === 'supplier') return 'lucide:factory'
+  if (props.selectMode === 'hub') return 'lucide:map-pin'
+  return 'lucide:search'
+})
+
+const onStartSelect = (type: string) => {
+  emit('start-select', type)
+}
+
+const onCancelSelect = () => {
+  emit('cancel-select')
+}
+
+const onEditToken = (type: string) => {
+  emit('edit-token', type)
+}
+
+const onRemoveToken = (type: string) => {
+  emit('remove-token', type)
+}
+
+const onSearchInput = () => {
+  emit('update:search-query', localSearchQuery.value)
+}
+</script>
--- a/app/composables/useCatalogSearch.ts
+++ b/app/composables/useCatalogSearch.ts
@@ -0,0 +1,233 @@
+import type { LocationQuery } from 'vue-router'
+
+export type SelectMode = 'product' | 'supplier' | 'hub' | null
+export type DisplayMode =
+  | 'hero'
+  | 'grid-products'
+  | 'grid-suppliers'
+  | 'grid-hubs'
+  | 'grid-hubs-for-product'
+  | 'grid-products-from-supplier'
+  | 'grid-products-in-hub'
+  | 'grid-offers'
+
+export interface SearchFilter {
+  type: 'product' | 'supplier' | 'hub' | 'location' | 'quantity'
+  id: string
+  label: string
+}
+
+export interface SearchState {
+  selectMode: SelectMode
+  product: { id: string; name: string } | null
+  supplier: { id: string; name: string } | null
+  hub: { id: string; name: string } | null
+  location: { id: string; name: string } | null
+  quantity: string | null
+}
+
+// Filter labels cache (to show names instead of UUIDs)
+const filterLabels = ref<Record<string, Record<string, string>>>({
+  product: {},
+  supplier: {},
+  hub: {},
+  location: {}
+})
+
+export function useCatalogSearch() {
+  const route = useRoute()
+  const router = useRouter()
+  const { t } = useI18n()
+
+  // Parse current state from query params
+  const selectMode = computed<SelectMode>(() => {
+    const select = route.query.select as string | undefined
+    if (select === 'product' || select === 'supplier' || select === 'hub') {
+      return select
+    }
+    return null
+  })
+
+  const productId = computed(() => route.query.product as string | undefined)
+  const supplierId = computed(() => route.query.supplier as string | undefined)
+  const hubId = computed(() => route.query.hub as string | undefined)
+  const locationId = computed(() => route.query.location as string | undefined)
+  const quantity = computed(() => route.query.qty as string | undefined)
+
+  // Get label for a filter (from cache or fallback to ID)
+  const getLabel = (type: string, id: string | undefined): string | null => {
+    if (!id) return null
+    return filterLabels.value[type]?.[id] || id.slice(0, 8) + '...'
+  }
+
+  // Set label in cache
+  const setLabel = (type: string, id: string, label: string) => {
+    if (!filterLabels.value[type]) {
+      filterLabels.value[type] = {}
+    }
+    filterLabels.value[type][id] = label
+  }
+
+  // Active tokens for display
+  const activeTokens = computed(() => {
+    const tokens: Array<{ type: string; id: string; label: string; icon: string }> = []
+
+    if (productId.value) {
+      tokens.push({
+        type: 'product',
+        id: productId.value,
+        label: getLabel('product', productId.value) || t('catalog.filters.product'),
+        icon: 'lucide:package'
+      })
+    }
+    if (supplierId.value) {
+      tokens.push({
+        type: 'supplier',
+        id: supplierId.value,
+        label: getLabel('supplier', supplierId.value) || t('catalog.filters.supplier'),
+        icon: 'lucide:factory'
+      })
+    }
+    if (hubId.value) {
+      tokens.push({
+        type: 'hub',
+        id: hubId.value,
+        label: getLabel('hub', hubId.value) || t('catalog.filters.hub'),
+        icon: 'lucide:map-pin'
+      })
+    }
+    if (locationId.value) {
+      tokens.push({
+        type: 'location',
+        id: locationId.value,
+        label: getLabel('location', locationId.value) || t('catalog.filters.location'),
+        icon: 'lucide:navigation'
+      })
+    }
+    if (quantity.value) {
+      tokens.push({
+        type: 'quantity',
+        id: quantity.value,
+        label: `${quantity.value} т`,
+        icon: 'lucide:scale'
+      })
+    }
+
+    return tokens
+  })
+
+  // Available chips (filters not yet set)
+  const availableChips = computed(() => {
+    const chips: Array<{ type: string; label: string }> = []
+
+    if (!productId.value && selectMode.value !== 'product') {
+      chips.push({ type: 'product', label: t('catalog.filters.product') })
+    }
+    if (!supplierId.value && selectMode.value !== 'supplier') {
+      chips.push({ type: 'supplier', label: t('catalog.filters.supplier') })
+    }
+    if (!hubId.value && selectMode.value !== 'hub') {
+      chips.push({ type: 'hub', label: t('catalog.filters.hub') })
+    }
+    if (!locationId.value) {
+      chips.push({ type: 'location', label: t('catalog.filters.location') })
+    }
+    if (!quantity.value) {
+      chips.push({ type: 'quantity', label: t('catalog.filters.quantity') })
+    }
+
+    return chips
+  })
+
+  // Determine what content to show
+  const displayMode = computed<DisplayMode>(() => {
+    // Selection mode takes priority
+    if (selectMode.value === 'product') return 'grid-products'
+    if (selectMode.value === 'supplier') return 'grid-suppliers'
+    if (selectMode.value === 'hub') return 'grid-hubs'
+
+    // Results based on filters
+    if (productId.value && hubId.value) return 'grid-offers'
+    if (supplierId.value && productId.value) return 'grid-offers'
+    if (productId.value) return 'grid-hubs-for-product'
+    if (supplierId.value) return 'grid-products-from-supplier'
+    if (hubId.value) return 'grid-products-in-hub'
+
+    // Empty state
+    return 'hero'
+  })
+
+  // Navigation helpers
+  const updateQuery = (updates: Partial<LocationQuery>) => {
+    const newQuery = { ...route.query }
+
+    Object.entries(updates).forEach(([key, value]) => {
+      if (value === null || value === undefined) {
+        delete newQuery[key]
+      } else {
+        newQuery[key] = value as string
+      }
+    })
+
+    router.push({ query: newQuery })
+  }
+
+  const startSelect = (type: SelectMode) => {
+    updateQuery({ select: type })
+  }
+
+  const cancelSelect = () => {
+    updateQuery({ select: null })
+  }
+
+  const selectItem = (type: string, id: string, label: string) => {
+    setLabel(type, id, label)
+    updateQuery({
+      [type]: id,
+      select: null // Exit selection mode
+    })
+  }
+
+  const removeFilter = (type: string) => {
+    updateQuery({ [type]: null })
+  }
+
+  const editFilter = (type: string) => {
+    updateQuery({ select: type as SelectMode })
+  }
+
+  const clearAll = () => {
+    router.push({ query: {} })
+  }
+
+  // Text search (for filtering within current grid)
+  const searchQuery = ref('')
+
+  return {
+    // State
+    selectMode,
+    displayMode,
+    productId,
+    supplierId,
+    hubId,
+    locationId,
+    quantity,
+    searchQuery,
+
+    // Computed
+    activeTokens,
+    availableChips,
+
+    // Actions
+    startSelect,
+    cancelSelect,
+    selectItem,
+    removeFilter,
+    editFilter,
+    clearAll,
+    setLabel,
+
+    // Labels cache
+    filterLabels
+  }
+}
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -18,9 +18,9 @@
        @switch-team="switchToTeam"
      />

-      <!-- Sub Navigation (section-specific tabs) - hidden on home page -->
+      <!-- Sub Navigation (section-specific tabs) - only for non-catalog sections -->
      <SubNavigation
-        v-if="!isHomePage"
+        v-if="!isHomePage && !isCatalogSection"
        :section="currentSection"
      />
    </div>
@@ -94,22 +94,32 @@ const isHomePage = computed(() => {
  return route.path === '/' || route.path === '/en' || route.path === '/ru'
 })

+// Catalog section detection (unified search, no SubNav needed)
+const isCatalogSection = computed(() => {
+  return route.path.startsWith('/catalog') ||
+         route.path.startsWith('/en/catalog') ||
+         route.path.startsWith('/ru/catalog')
+})
+
 // Show search bar only on main page
 const showSearch = computed(() => isHomePage.value)

-// Collapsible header logic - only for catalog pages (not home page)
-const canCollapse = computed(() => !isHomePage.value)
+// Collapsible header logic - only for pages with SubNav
+const hasSubNav = computed(() => !isHomePage.value && !isCatalogSection.value)
+const canCollapse = computed(() => hasSubNav.value)
 const isHeaderCollapsed = computed(() => canCollapse.value && isCollapsed.value)

-// Header style - transform for smooth slide animation (only on catalog pages)
+// Header style - transform for smooth slide animation (only when SubNav present)
 const headerStyle = computed(() => {
-  if (isHomePage.value) return {}
+  if (!hasSubNav.value) return {}
  return { transform: `translateY(${headerOffset.value}px)` }
 })

 // Main content padding-top to compensate for fixed header
+// 64px = MainNav only (home, catalog)
+// 118px = MainNav + SubNav (orders, seller, settings)
 const mainStyle = computed(() => ({
-  paddingTop: isHomePage.value ? '64px' : '118px'
+  paddingTop: (isHomePage.value || isCatalogSection.value) ? '64px' : '118px'
 }))

 // Provide collapsed state to child components (CatalogPage needs it for map positioning)
--- a/app/pages/catalog/hubs/[id]/[productId].vue
+++ b/app/pages/catalog/hubs/[id]/[productId].vue
@@ -1,309 +0,0 @@
-<template>
-  <Stack gap="0">
-    <!-- Loading -->
-    <Section v-if="isLoading" variant="plain" paddingY="lg">
-      <Stack align="center" justify="center" gap="4">
-        <Spinner />
-        <Text tone="muted">{{ t('catalogHub.states.loading') }}</Text>
-      </Stack>
-    </Section>
-
-    <!-- Error / Not Found -->
-    <Section v-else-if="!hub || !product" variant="plain" paddingY="lg">
-      <Card padding="lg">
-        <Stack align="center" gap="4">
-          <IconCircle tone="primary">
-            <Icon name="lucide:package-x" size="24" />
-          </IconCircle>
-          <Heading :level="2">{{ t('catalogHub.product_not_found.title') }}</Heading>
-          <Text tone="muted">{{ t('catalogHub.product_not_found.subtitle') }}</Text>
-          <Button @click="navigateTo(localePath(`/catalog/hubs/${hubId}`))">
-            {{ t('catalogHub.actions.back_to_hub') }}
-          </Button>
-        </Stack>
-      </Card>
-    </Section>
-
-    <!-- Content -->
-    <template v-else>
-      <CatalogPage
-        :items="sources"
-        :loading="isLoadingRoutes"
-        :with-map="true"
-        map-id="hub-product-sources-map"
-        point-color="#10b981"
-        v-model:selected-id="selectedSourceUuid"
-        :hovered-id="hoveredSourceUuid"
-        @update:hovered-id="hoveredSourceUuid = $event"
-      >
-        <template #searchBar>
-          <CatalogSearchBar
-            :active-filters="navigationFilters"
-            :show-counter="false"
-            @remove-filter="handleRemoveFilter"
-          />
-        </template>
-
-        <template #header>
-          <Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
-          <Stack v-else gap="4">
-            <Text v-if="sources.length > 0" tone="muted">Выберите источник</Text>
-            <Card padding="md">
-              <div class="h-48">
-                <ClientOnly>
-                  <apexchart
-                    type="area"
-                    height="180"
-                    :options="chartOptions"
-                    :series="chartSeries"
-                  />
-                </ClientOnly>
-              </div>
-            </Card>
-          </Stack>
-        </template>
-
-        <template #card="{ item }">
-          <OfferResultCard
-            :location-name="getOfferData(item.uuid)?.locationName"
-            :product-name="product.name"
-            :price-per-unit="getOfferData(item.uuid)?.pricePerUnit"
-            :currency="getOfferData(item.uuid)?.currency"
-            :unit="getOfferData(item.uuid)?.unit"
-            :stages="item.stages"
-            :start-name="item.name"
-            :end-name="hub?.name"
-          />
-        </template>
-
-        <template #empty>
-          <Stack align="center" gap="2">
-            <Icon name="lucide:truck" size="32" class="text-base-content/40" />
-            <Text tone="muted">{{ t('catalogHub.sources.empty') }}</Text>
-          </Stack>
-        </template>
-      </CatalogPage>
-    </template>
-  </Stack>
-</template>
-
-<script setup lang="ts">
-import { GetNodeConnectionsDocument, GetOffersByHubDocument } from '~/composables/graphql/public/geo-generated'
-import { GetAvailableProductsDocument, GetOfferDocument } from '~/composables/graphql/public/exchange-generated'
-
-definePageMeta({
-  layout: 'topnav'
-})
-
-const route = useRoute()
-const localePath = useLocalePath()
-const { t } = useI18n()
-const { execute } = useGraphQL()
-
-const isLoading = ref(true)
-const isLoadingRoutes = ref(false)
-const hub = ref<any>(null)
-const product = ref<{ uuid: string; name: string } | null>(null)
-const selectedSourceUuid = ref('')
-const hoveredSourceUuid = ref<string>()
-const rawSources = ref<any[]>([])
-const offersData = ref<Map<string, any>>(new Map())
-
-const hubId = computed(() => route.params.id as string)
-const productId = computed(() => route.params.productId as string)
-
-// Navigation filters for search bar badges
-const navigationFilters = computed(() => {
-  const filters: Array<{ id: string; label: string; key: string }> = []
-
-  if (hub.value?.name) {
-    filters.push({
-      id: 'hub',
-      key: 'Хаб',
-      label: hub.value.name
-    })
-  }
-
-  if (product.value?.name) {
-    filters.push({
-      id: 'product',
-      key: 'Товар',
-      label: product.value.name
-    })
-  }
-
-  return filters
-})
-
-// Handle removing navigation filter (navigate back)
-const handleRemoveFilter = (filterId: string) => {
-  if (filterId === 'product') {
-    navigateTo(localePath(`/catalog/hubs/${hubId.value}`))
-  } else if (filterId === 'hub') {
-    navigateTo(localePath('/catalog/hubs'))
-  }
-}
-
-// Mock price history generator (seeded by uuid for consistent results)
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 30 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.3) * 30 + Math.cos(seed * 0.2 + i) * 15
-    return Math.round(basePrice + variation)
-  })
-}
-
-// Chart configuration
-const priceHistory = computed(() => getMockPriceHistory(productId.value))
-
-const trend = computed(() => {
-  if (priceHistory.value.length < 2) return 0
-  const first = priceHistory.value[0]
-  const last = priceHistory.value[priceHistory.value.length - 1]
-  if (!first || first === 0) return 0
-  return Math.round(((last - first) / first) * 100)
-})
-
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    toolbar: { show: false },
-    animations: { enabled: true }
-  },
-  stroke: { curve: 'smooth', width: 2 },
-  fill: {
-    type: 'gradient',
-    gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1 }
-  },
-  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
-  dataLabels: { enabled: false },
-  xaxis: {
-    categories: priceHistory.value.map((_, i) => `${i + 1}`),
-    labels: { show: false }
-  },
-  yaxis: { labels: { formatter: (val: number) => `$${val}` } },
-  tooltip: { y: { formatter: (val: number) => `$${val}` } },
-  grid: { borderColor: '#e5e7eb', strokeDashArray: 4 }
-}))
-
-const chartSeries = computed(() => [{
-  name: t('catalogHub.product.price'),
-  data: priceHistory.value
-}])
-
-// Transform sources for CatalogPage
-const sources = computed(() => {
-  return rawSources.value.map(source => ({
-    uuid: source.sourceUuid || '',
-    name: source.sourceName || '',
-    latitude: source.sourceLat,
-    longitude: source.sourceLon,
-    distanceKm: source.distanceKm,
-    durationSeconds: source.routes?.[0]?.totalTimeSeconds,
-    stages: (source.routes?.[0]?.stages || []).map((stage: any) => ({
-      transportType: stage?.transportType,
-      distanceKm: stage?.distanceKm
-    }))
-  }))
-})
-
-// Get offer data for card
-const getOfferData = (uuid: string) => {
-  return offersData.value.get(uuid)
-}
-
-// Load offer details for prices
-const loadOfferDetails = async () => {
-  if (rawSources.value.length === 0) {
-    offersData.value.clear()
-    return
-  }
-
-  const newOffersData = new Map<string, any>()
-  await Promise.all(rawSources.value.map(async (source) => {
-    try {
-      const data = await execute(GetOfferDocument, { uuid: source.sourceUuid }, 'public', 'exchange')
-      if (data?.getOffer) {
-        newOffersData.set(source.sourceUuid, data.getOffer)
-      }
-    } catch (error) {
-      console.error('Error loading offer:', source.sourceUuid, error)
-    }
-  }))
-  offersData.value = newOffersData
-}
-
-// Load offers with routes to this hub
-const loadRoutes = async () => {
-  if (!productId.value || !hubId.value) {
-    rawSources.value = []
-    offersData.value.clear()
-    return
-  }
-
-  isLoadingRoutes.value = true
-  selectedSourceUuid.value = ''
-
-  try {
-    const data = await execute(
-      GetOffersByHubDocument,
-      {
-        hubUuid: hubId.value,
-        productUuid: productId.value,
-        limit: 12
-      },
-      'public',
-      'geo'
-    )
-    rawSources.value = (data?.offersByHub || []).filter(Boolean)
-    await loadOfferDetails()
-  } catch (error) {
-    console.error('Error loading offers:', error)
-    rawSources.value = []
-  } finally {
-    isLoadingRoutes.value = false
-  }
-}
-
-// Initial load
-try {
-  const [{ data: connectionsData }, { data: productsData }] = await Promise.all([
-    useServerQuery('hub-connections', GetNodeConnectionsDocument, { uuid: hubId.value }, 'public', 'geo'),
-    useServerQuery('available-products', GetAvailableProductsDocument, {}, 'public', 'exchange')
-  ])
-
-  hub.value = connectionsData.value?.nodeConnections?.hub || null
-
-  const products = (productsData.value?.getAvailableProducts || [])
-    .filter((p): p is { uuid: string; name: string } => p !== null && !!p.uuid && !!p.name)
-
-  product.value = products.find(p => p.uuid === productId.value) || null
-
-  // Load routes after initial data
-  if (product.value) {
-    await loadRoutes()
-  }
-} catch (error) {
-  console.error('Error loading data:', error)
-} finally {
-  isLoading.value = false
-}
-
-// SEO
-useHead(() => ({
-  title: product.value?.name && hub.value?.name
-    ? `${product.value.name} - ${hub.value.name}`
-    : t('catalogHub.meta.title'),
-  meta: [
-    {
-      name: 'description',
-      content: t('catalogHub.product.meta.description', {
-        product: product.value?.name || '',
-        hub: hub.value?.name || '',
-        offers: sources.value.length
-      })
-    }
-  ]
-}))
-</script>
--- a/app/pages/catalog/hubs/[id]/index.vue
+++ b/app/pages/catalog/hubs/[id]/index.vue
@@ -78,7 +78,7 @@ const navigationFilters = computed(() => {
 // Handle removing navigation filter (navigate back)
 const handleRemoveFilter = (filterId: string) => {
  if (filterId === 'hub') {
-    navigateTo(localePath('/catalog/hubs'))
+    navigateTo(localePath('/catalog?select=hub'))
  }
 }

@@ -105,9 +105,9 @@ const mapItems = computed(() => {
  }]
 })

-// Navigate to product page
+// Navigate to unified catalog with hub + product = offers
 const goToProduct = (productId: string) => {
-  navigateTo(localePath(`/catalog/hubs/${hubId.value}/${productId}`))
+  navigateTo(localePath(`/catalog?hub=${hubId.value}&product=${productId}`))
 }

 // Mock price history generator (seeded by uuid for consistent results)
--- a/app/pages/catalog/hubs/index.vue
+++ b/app/pages/catalog/hubs/index.vue
@@ -1,184 +0,0 @@
-<template>
-  <CatalogPage
-    :items="displayItems"
-    :map-items="itemsWithCoords"
-    :loading="isLoading"
-    :grid-columns="3"
-    with-map
-    use-server-clustering
-    map-id="hubs-map"
-    point-color="#10b981"
-    :total-count="total"
-    :hovered-id="hoveredId"
-    @select="onSelectHub"
-    @update:hovered-id="hoveredId = $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">
-            <!-- 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>
-      </CatalogSearchBar>
-    </template>
-
-    <template #header>
-      <Text v-if="!isLoading" tone="muted">Выберите хаб</Text>
-    </template>
-
-    <template #card="{ item }">
-      <HubCard :hub="item" />
-    </template>
-
-    <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>
-    </template>
-  </CatalogPage>
-</template>
-
-<script setup lang="ts">
-import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
-
-definePageMeta({
-  layout: 'topnav'
-})
-
-const { t } = useI18n()
-const localePath = useLocalePath()
-
-const {
-  items,
-  total,
-  selectedFilter,
-  selectedCountry,
-  filters,
-  countryFilters,
-  isLoading,
-  isLoadingMore,
-  canLoadMore,
-  loadMore,
-  init
-} = useCatalogHubs()
-
-// Hover state
-const hoveredId = ref<string>()
-
-// Search bar
-const searchQuery = ref('')
-
-// Search with map checkbox
-const searchWithMap = ref(false)
-const currentBounds = ref<MapBounds | null>(null)
-
-// Filter items with valid coordinates for map
-const itemsWithCoords = computed(() =>
-  items.value.filter(item =>
-    item.latitude != null &&
-    item.longitude != null &&
-    !isNaN(Number(item.latitude)) &&
-    !isNaN(Number(item.longitude))
-  ).map(item => ({
-    uuid: item.uuid,
-    name: item.name || '',
-    latitude: Number(item.latitude),
-    longitude: Number(item.longitude),
-    country: item.country
-  }))
-)
-
-// Filtered items when searchWithMap is enabled
-const displayItems = computed(() => {
-  if (!searchWithMap.value || !currentBounds.value) return items.value
-  return items.value.filter(item => {
-    if (item.latitude == null || item.longitude == null) return false
-    const { west, east, north, south } = currentBounds.value!
-    const lng = Number(item.longitude)
-    const lat = Number(item.latitude)
-    return lng >= west && lng <= east && lat >= south && lat <= north
-  })
-})
-
-// Active filter badges (non-default filters shown as badges)
-const activeFilterBadges = computed(() => {
-  const badges: { id: string; label: string }[] = []
-  if (selectedFilter.value !== 'all') {
-    const filter = filters.value.find(f => f.id === selectedFilter.value)
-    if (filter) badges.push({ id: `transport:${filter.id}`, label: filter.label })
-  }
-  if (selectedCountry.value !== 'all') {
-    const filter = countryFilters.value.find(f => f.id === selectedCountry.value)
-    if (filter) badges.push({ id: `country:${filter.id}`, label: filter.label })
-  }
-  return badges
-})
-
-// Remove filter badge
-const onRemoveFilter = (id: string) => {
-  if (id.startsWith('transport:')) {
-    selectedFilter.value = 'all'
-  } else if (id.startsWith('country:')) {
-    selectedCountry.value = 'all'
-  }
-}
-
-// Search handler (for future use)
-const onSearch = () => {
-  // TODO: Implement search by hub name
-}
-
-// Handle hub selection from map
-const onSelectHub = (hub: any) => {
-  navigateTo(localePath(`/catalog/hubs/${hub.uuid}`))
-}
-
-await init()
-
-useHead(() => ({
-  title: t('catalogHubsSection.header.title')
-}))
-</script>
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="flex flex-col h-full">
+    <!-- Unified Search Bar -->
+    <div class="sticky top-0 z-20 px-3 lg:px-6 py-3 bg-base-300">
+      <UnifiedSearchBar
+        :active-tokens="activeTokens"
+        :available-chips="availableChips"
+        :select-mode="selectMode"
+        :search-query="searchQuery"
+        @start-select="startSelect"
+        @cancel-select="cancelSelect"
+        @edit-token="editFilter"
+        @remove-token="removeFilter"
+        @update:search-query="searchQuery = $event"
+      />
+    </div>
+
+    <!-- Dynamic Content -->
+    <div class="flex-1 px-3 lg:px-6 py-4">
+      <!-- Hero (empty state) -->
+      <template v-if="displayMode === 'hero'">
+        <CatalogHero @start-select="startSelect" />
+      </template>
+
+      <!-- Products Grid -->
+      <template v-else-if="displayMode === 'grid-products'">
+        <CatalogGridProducts
+          :search-query="searchQuery"
+          @select="onSelectProduct"
+        />
+      </template>
+
+      <!-- Suppliers Grid -->
+      <template v-else-if="displayMode === 'grid-suppliers'">
+        <CatalogGridSuppliers
+          :search-query="searchQuery"
+          @select="onSelectSupplier"
+        />
+      </template>
+
+      <!-- Hubs Grid -->
+      <template v-else-if="displayMode === 'grid-hubs'">
+        <CatalogGridHubs
+          :search-query="searchQuery"
+          @select="onSelectHub"
+        />
+      </template>
+
+      <!-- Hubs for selected product -->
+      <template v-else-if="displayMode === 'grid-hubs-for-product'">
+        <CatalogGridHubsForProduct
+          :product-id="productId!"
+          :search-query="searchQuery"
+          @select="onSelectHub"
+          @product-loaded="setLabel('product', productId!, $event)"
+        />
+      </template>
+
+      <!-- Products from supplier -->
+      <template v-else-if="displayMode === 'grid-products-from-supplier'">
+        <CatalogGridProductsFromSupplier
+          :supplier-id="supplierId!"
+          :search-query="searchQuery"
+          @select="onSelectProduct"
+          @supplier-loaded="setLabel('supplier', supplierId!, $event)"
+        />
+      </template>
+
+      <!-- Products in hub -->
+      <template v-else-if="displayMode === 'grid-products-in-hub'">
+        <CatalogGridProductsInHub
+          :hub-id="hubId!"
+          :search-query="searchQuery"
+          @select="onSelectProduct"
+          @hub-loaded="setLabel('hub', hubId!, $event)"
+        />
+      </template>
+
+      <!-- Offers -->
+      <template v-else-if="displayMode === 'grid-offers'">
+        <CatalogGridOffers
+          :product-id="productId"
+          :supplier-id="supplierId"
+          :hub-id="hubId"
+          :search-query="searchQuery"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'topnav'
+})
+
+const { t } = useI18n()
+
+const {
+  selectMode,
+  displayMode,
+  productId,
+  supplierId,
+  hubId,
+  searchQuery,
+  activeTokens,
+  availableChips,
+  startSelect,
+  cancelSelect,
+  selectItem,
+  removeFilter,
+  editFilter,
+  setLabel
+} = useCatalogSearch()
+
+// Selection handlers
+const onSelectProduct = (product: { uuid: string; name: string }) => {
+  selectItem('product', product.uuid, product.name)
+}
+
+const onSelectSupplier = (supplier: { uuid: string; name: string }) => {
+  selectItem('supplier', supplier.uuid, supplier.name)
+}
+
+const onSelectHub = (hub: { uuid: string; name: string }) => {
+  selectItem('hub', hub.uuid, hub.name)
+}
+
+// SEO
+useHead(() => {
+  let title = t('catalog.hero.title')
+
+  if (displayMode.value === 'grid-products') {
+    title = t('catalog.headers.selectProduct')
+  } else if (displayMode.value === 'grid-suppliers') {
+    title = t('catalog.headers.selectSupplier')
+  } else if (displayMode.value === 'grid-hubs') {
+    title = t('catalog.headers.selectHub')
+  } else if (displayMode.value === 'grid-offers') {
+    title = t('catalog.headers.offers')
+  }
+
+  return { title }
+})
+</script>
--- a/app/pages/catalog/offers/[productId]/[hubId].vue
+++ b/app/pages/catalog/offers/[productId]/[hubId].vue
@@ -1,356 +0,0 @@
-<template>
-  <Stack gap="0">
-    <!-- Loading -->
-    <Section v-if="isLoading" variant="plain" paddingY="lg">
-      <Stack align="center" justify="center" gap="4">
-        <Spinner />
-        <Text tone="muted">{{ t('catalogProductHubs.states.loading') }}</Text>
-      </Stack>
-    </Section>
-
-    <!-- Error / Not Found -->
-    <Section v-else-if="!hub || !product" variant="plain" paddingY="lg">
-      <Card padding="lg">
-        <Stack align="center" gap="4">
-          <IconCircle tone="primary">
-            <Icon name="lucide:package-x" size="24" />
-          </IconCircle>
-          <Heading :level="2">{{ t('catalogProductHubs.calculation.not_found.title') }}</Heading>
-          <Text tone="muted">{{ t('catalogProductHubs.calculation.not_found.subtitle') }}</Text>
-          <Button @click="navigateTo(localePath(`/catalog/offers/${productId}`))">
-            {{ t('catalogProductHubs.actions.back_to_hubs') }}
-          </Button>
-        </Stack>
-      </Card>
-    </Section>
-
-    <!-- Content -->
-    <template v-else>
-      <CatalogPage
-        :items="sources"
-        :loading="isLoadingRoutes"
-        :with-map="true"
-        map-id="offers-product-hub-sources-map"
-        point-color="#10b981"
-        v-model:selected-id="selectedSourceUuid"
-        :hovered-id="hoveredSourceUuid"
-        @update:hovered-id="hoveredSourceUuid = $event"
-      >
-        <template #searchBar>
-          <CatalogSearchBar
-            :active-filters="navigationFilters"
-            :show-counter="false"
-            @remove-filter="handleRemoveFilter"
-          />
-        </template>
-
-        <template #header>
-          <Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
-          <Stack v-else gap="4">
-            <Text v-if="sources.length > 0" tone="muted">Выберите источник</Text>
-            <Card padding="md">
-              <div class="h-48">
-                <ClientOnly>
-                  <apexchart
-                    type="area"
-                    height="180"
-                    :options="chartOptions"
-                    :series="chartSeries"
-                  />
-                </ClientOnly>
-              </div>
-            </Card>
-          </Stack>
-        </template>
-
-        <template #card="{ item }">
-          <OfferResultCard
-            :location-name="getOfferData(item.uuid)?.locationName"
-            :product-name="product.name"
-            :price-per-unit="getOfferData(item.uuid)?.pricePerUnit"
-            :currency="getOfferData(item.uuid)?.currency"
-            :unit="getOfferData(item.uuid)?.unit"
-            :stages="item.stages"
-            :start-name="item.name"
-            :end-name="hub?.name"
-            :kyc-profile-uuid="getOfferData(item.uuid)?.kycProfileUuid"
-            @select="navigateTo(localePath(`/catalog/offers/detail/${item.uuid}`))"
-          />
-        </template>
-
-        <template #empty>
-          <Stack align="center" gap="2">
-            <Icon name="lucide:truck" size="32" class="text-base-content/40" />
-            <Text tone="muted">{{ t('catalogProductHubs.calculation.empty') }}</Text>
-          </Stack>
-        </template>
-      </CatalogPage>
-    </template>
-  </Stack>
-</template>
-
-<script setup lang="ts">
-import { GetNodeConnectionsDocument, GetOffersByHubDocument } from '~/composables/graphql/public/geo-generated'
-import { GetAvailableProductsDocument, GetOfferDocument, GetSupplierProfileByTeamDocument } from '~/composables/graphql/public/exchange-generated'
-
-definePageMeta({
-  layout: 'topnav'
-})
-
-const route = useRoute()
-const localePath = useLocalePath()
-const { t } = useI18n()
-const { execute } = useGraphQL()
-
-const isLoading = ref(true)
-const isLoadingRoutes = ref(false)
-const hub = ref<any>(null)
-const product = ref<{ uuid: string; name: string } | null>(null)
-const selectedSourceUuid = ref('')
-const hoveredSourceUuid = ref<string>()
-const rawSources = ref<any[]>([])
-const offersData = ref<Map<string, any>>(new Map())
-const suppliersData = ref<Map<string, any>>(new Map())
-
-const productId = computed(() => route.params.productId as string)
-const hubId = computed(() => route.params.hubId as string)
-const quantity = computed(() => route.query.quantity as string | undefined)
-
-// Navigation filters for search bar badges
-const navigationFilters = computed(() => {
-  const filters: Array<{ id: string; label: string; key: string }> = []
-
-  if (product.value?.name) {
-    filters.push({
-      id: 'product',
-      key: 'Товар',
-      label: product.value.name
-    })
-  }
-
-  if (hub.value?.name) {
-    filters.push({
-      id: 'hub',
-      key: 'Хаб',
-      label: hub.value.name
-    })
-  }
-
-  if (quantity.value) {
-    filters.push({
-      id: 'quantity',
-      key: 'Кол-во',
-      label: `${quantity.value} т`
-    })
-  }
-
-  return filters
-})
-
-// Handle removing navigation filter (navigate back)
-const handleRemoveFilter = (filterId: string) => {
-  if (filterId === 'hub') {
-    navigateTo(localePath(`/catalog/offers/${productId.value}`))
-  } else if (filterId === 'product') {
-    navigateTo(localePath('/catalog/offers'))
-  } else if (filterId === 'quantity') {
-    // Remove quantity from query, stay on same page
-    navigateTo({ path: route.path, query: {} })
-  }
-}
-
-// Mock price history generator (seeded by uuid for consistent results)
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 30 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.3) * 30 + Math.cos(seed * 0.2 + i) * 15
-    return Math.round(basePrice + variation)
-  })
-}
-
-// Chart configuration
-const priceHistory = computed(() => getMockPriceHistory(productId.value))
-
-const trend = computed(() => {
-  if (priceHistory.value.length < 2) return 0
-  const first = priceHistory.value[0]
-  const last = priceHistory.value[priceHistory.value.length - 1]
-  if (!first || first === 0) return 0
-  return Math.round(((last - first) / first) * 100)
-})
-
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    toolbar: { show: false },
-    animations: { enabled: true }
-  },
-  stroke: { curve: 'smooth', width: 2 },
-  fill: {
-    type: 'gradient',
-    gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1 }
-  },
-  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
-  dataLabels: { enabled: false },
-  xaxis: {
-    categories: priceHistory.value.map((_, i) => `${i + 1}`),
-    labels: { show: false }
-  },
-  yaxis: { labels: { formatter: (val: number) => `$${val}` } },
-  tooltip: { y: { formatter: (val: number) => `$${val}` } },
-  grid: { borderColor: '#e5e7eb', strokeDashArray: 4 }
-}))
-
-const chartSeries = computed(() => [{
-  name: t('catalogProductHubs.chart.price'),
-  data: priceHistory.value
-}])
-
-// Transform sources for CatalogPage
-const sources = computed(() => {
-  return rawSources.value.map(source => ({
-    uuid: source.sourceUuid || '',
-    name: source.sourceName || '',
-    latitude: source.sourceLat,
-    longitude: source.sourceLon,
-    distanceKm: source.distanceKm,
-    durationSeconds: source.routes?.[0]?.totalTimeSeconds,
-    stages: (source.routes?.[0]?.stages || []).map((stage: any) => ({
-      transportType: stage?.transportType,
-      distanceKm: stage?.distanceKm
-    }))
-  }))
-})
-
-// Get offer data for card
-const getOfferData = (uuid: string) => {
-  return offersData.value.get(uuid)
-}
-
-// Load offer details for prices and supplier info
-const loadOfferDetails = async () => {
-  if (rawSources.value.length === 0) {
-    offersData.value.clear()
-    suppliersData.value.clear()
-    return
-  }
-
-  const newOffersData = new Map<string, any>()
-  const newSuppliersData = new Map<string, any>()
-  const teamUuidsToLoad = new Set<string>()
-
-  // First, load all offers
-  await Promise.all(rawSources.value.map(async (source) => {
-    try {
-      const data = await execute(GetOfferDocument, { uuid: source.sourceUuid }, 'public', 'exchange')
-      if (data?.getOffer) {
-        newOffersData.set(source.sourceUuid, data.getOffer)
-        if (data.getOffer.teamUuid) {
-          teamUuidsToLoad.add(data.getOffer.teamUuid)
-        }
-      }
-    } catch (error) {
-      console.error('Error loading offer:', source.sourceUuid, error)
-    }
-  }))
-
-  // Then, load supplier profiles for KYC
-  await Promise.all([...teamUuidsToLoad].map(async (teamUuid) => {
-    try {
-      const data = await execute(GetSupplierProfileByTeamDocument, { teamUuid }, 'public', 'exchange')
-      if (data?.getSupplierProfileByTeam) {
-        newSuppliersData.set(teamUuid, data.getSupplierProfileByTeam)
-      }
-    } catch (error) {
-      console.error('Error loading supplier:', teamUuid, error)
-    }
-  }))
-
-  // Merge kycProfileUuid into offer data
-  newOffersData.forEach((offer, offerUuid) => {
-    if (offer.teamUuid) {
-      const supplier = newSuppliersData.get(offer.teamUuid)
-      if (supplier?.kycProfileUuid) {
-        offer.kycProfileUuid = supplier.kycProfileUuid
-      }
-    }
-  })
-
-  offersData.value = newOffersData
-  suppliersData.value = newSuppliersData
-}
-
-// Load offers with routes to this hub
-const loadRoutes = async () => {
-  if (!productId.value || !hubId.value) {
-    rawSources.value = []
-    offersData.value.clear()
-    return
-  }
-
-  isLoadingRoutes.value = true
-  selectedSourceUuid.value = ''
-
-  try {
-    const data = await execute(
-      GetOffersByHubDocument,
-      {
-        hubUuid: hubId.value,
-        productUuid: productId.value,
-        limit: 12
-      },
-      'public',
-      'geo'
-    )
-    rawSources.value = (data?.offersByHub || []).filter(Boolean)
-    await loadOfferDetails()
-  } catch (error) {
-    console.error('Error loading offers:', error)
-    rawSources.value = []
-  } finally {
-    isLoadingRoutes.value = false
-  }
-}
-
-// Initial load
-try {
-  const [{ data: hubData }, { data: productsData }] = await Promise.all([
-    useServerQuery('hub-info', GetNodeConnectionsDocument, { uuid: hubId.value }, 'public', 'geo'),
-    useServerQuery('available-products', GetAvailableProductsDocument, {}, 'public', 'exchange')
-  ])
-
-  hub.value = hubData.value?.nodeConnections?.hub || null
-
-  const products = (productsData.value?.getAvailableProducts || [])
-    .filter((p): p is { uuid: string; name: string } => p !== null && !!p.uuid && !!p.name)
-
-  product.value = products.find(p => p.uuid === productId.value) || null
-
-  // Load routes after initial data
-  if (product.value && hub.value) {
-    await loadRoutes()
-  }
-} catch (error) {
-  console.error('Error loading data:', error)
-} finally {
-  isLoading.value = false
-}
-
-// SEO
-useHead(() => ({
-  title: product.value?.name && hub.value?.name
-    ? `${product.value.name} - ${hub.value.name}`
-    : t('catalogProductHubs.meta.title'),
-  meta: [
-    {
-      name: 'description',
-      content: t('catalogProductHubs.calculation.meta.description', {
-        product: product.value?.name || '',
-        hub: hub.value?.name || '',
-        offers: sources.value.length
-      })
-    }
-  ]
-}))
-</script>
--- a/app/pages/catalog/offers/[productId]/index.vue
+++ b/app/pages/catalog/offers/[productId]/index.vue
@@ -1,158 +0,0 @@
-<template>
-  <CatalogPage
-    :items="filteredHubs"
-    :loading="isLoading"
-    :total-count="hubs.length"
-    :grid-columns="3"
-    with-map
-    use-server-clustering
-    cluster-node-type="logistics"
-    map-id="offers-product-hubs-map"
-    point-color="#10b981"
-    :hovered-id="hoveredId"
-    @select="onSelectHub"
-    @update:hovered-id="hoveredId = $event"
-  >
-    <template #searchBar="{ displayedCount, totalCount }">
-      <CatalogSearchBar
-        v-model:search-query="searchQuery"
-        :active-filters="navigationFilters"
-        :displayed-count="displayedCount"
-        :total-count="totalCount"
-        @remove-filter="handleRemoveFilter"
-      />
-    </template>
-
-    <template #header>
-      <Text v-if="!isLoading && !product" tone="muted">Товар не найден</Text>
-      <Text v-else-if="!isLoading" tone="muted">Выберите хаб</Text>
-    </template>
-
-    <template #card="{ item }">
-      <HubCard
-        :hub="item"
-        :link-to="localePath(`/catalog/offers/${productId}/${item.uuid}`)"
-      />
-    </template>
-
-    <template #empty>
-      <Stack align="center" gap="2">
-        <Icon name="lucide:map-pin-off" size="32" class="text-base-content/40" />
-        <Text tone="muted">{{ t('catalogProductHubs.empty.no_hubs') }}</Text>
-      </Stack>
-    </template>
-  </CatalogPage>
-</template>
-
-<script setup lang="ts">
-import { GetOffersByProductDocument, GetHubsNearOfferDocument } from '~/composables/graphql/public/geo-generated'
-
-definePageMeta({
-  layout: 'topnav'
-})
-
-const route = useRoute()
-const localePath = useLocalePath()
-const { t } = useI18n()
-
-const isLoading = ref(true)
-const hoveredId = ref<string>()
-const product = ref<{ uuid: string; name: string } | null>(null)
-const hubs = ref<Array<{ uuid: string; name: string; latitude?: number; longitude?: number; country?: string; countryCode?: string }>>([])
-
-const productId = computed(() => route.params.productId as string)
-
-// Navigation filters for search bar badges
-const navigationFilters = computed(() => {
-  const filters: Array<{ id: string; label: string; key: string }> = []
-
-  if (product.value?.name) {
-    filters.push({
-      id: 'product',
-      key: 'Товар',
-      label: product.value.name
-    })
-  }
-
-  return filters
-})
-
-// Handle removing navigation filter (navigate back)
-const handleRemoveFilter = (filterId: string) => {
-  if (filterId === 'product') {
-    navigateTo(localePath('/catalog/offers'))
-  }
-}
-
-// Search
-const searchQuery = ref('')
-
-const filteredHubs = computed(() => {
-  if (!searchQuery.value.trim()) return hubs.value
-  const q = searchQuery.value.toLowerCase()
-  return hubs.value.filter(hub =>
-    hub.name?.toLowerCase().includes(q) ||
-    hub.country?.toLowerCase().includes(q)
-  )
-})
-
-// Handle hub selection
-const onSelectHub = (hub: any) => {
-  navigateTo(localePath(`/catalog/offers/${productId.value}/${hub.uuid}`))
-}
-
-// Initial load
-try {
-  // Get offers for this product from geo
-  const { data: offersData } = await useServerQuery(
-    'offers-for-product',
-    GetOffersByProductDocument,
-    { productUuid: productId.value },
-    'public',
-    'geo'
-  )
-
-  const offers = offersData.value?.offersByProduct || []
-
-  if (offers.length > 0) {
-    const firstOffer = offers[0]
-    product.value = {
-      uuid: productId.value,
-      name: firstOffer?.productName || ''
-    }
-
-    // Get hubs near the first offer's location
-    if (firstOffer?.uuid) {
-      const { data: hubsData } = await useServerQuery(
-        'hubs-near-offer',
-        GetHubsNearOfferDocument,
-        { offerUuid: firstOffer.uuid, limit: 12 },
-        'public',
-        'geo'
-      )
-
-      hubs.value = (hubsData.value?.hubsNearOffer || [])
-        .filter((h): h is NonNullable<typeof h> => h !== null && !!h.uuid && !!h.name)
-        .map(h => ({
-          uuid: h.uuid!,
-          name: h.name!,
-          latitude: h.latitude ?? undefined,
-          longitude: h.longitude ?? undefined,
-          country: h.country || undefined,
-          countryCode: h.countryCode || undefined
-        }))
-    }
-  }
-} catch (error) {
-  console.error('Error loading product hubs:', error)
-} finally {
-  isLoading.value = false
-}
-
-// SEO
-useHead(() => ({
-  title: product.value?.name
-    ? t('catalogProductHubs.meta.title_with_name', { name: product.value.name })
-    : t('catalogProductHubs.meta.title')
-}))
-</script>
--- a/app/pages/catalog/offers/index.vue
+++ b/app/pages/catalog/offers/index.vue
@@ -1,85 +0,0 @@
-<template>
-  <CatalogPage
-    :items="filteredProducts"
-    :loading="isLoading"
-    :total-count="products.length"
-    :grid-columns="3"
-    with-map
-    use-server-clustering
-    cluster-node-type="offer"
-    map-id="offers-products-map"
-    point-color="#22c55e"
-    :hovered-id="hoveredId"
-    @update:hovered-id="hoveredId = $event"
-  >
-    <template #searchBar>
-      <CatalogSearchBar
-        v-model:search-query="searchQuery"
-        :show-counter="false"
-      />
-    </template>
-
-    <template #header>
-      <Text v-if="!isLoading" tone="muted">Выберите товар</Text>
-    </template>
-
-    <template #card="{ item }">
-      <HubProductCard
-        :name="item.name || ''"
-        :price-history="getMockPriceHistory(item.uuid)"
-        @select="goToProduct(item.uuid)"
-      />
-    </template>
-
-    <template #empty>
-      <Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
-    </template>
-  </CatalogPage>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: 'topnav'
-})
-
-const localePath = useLocalePath()
-const { t } = useI18n()
-
-const { items: products, isLoading, init } = useCatalogProducts()
-
-// Hover state
-const hoveredId = ref<string>()
-
-// Search
-const searchQuery = ref('')
-
-const filteredProducts = computed(() => {
-  if (!searchQuery.value.trim()) return products.value
-  const q = searchQuery.value.toLowerCase()
-  return products.value.filter(item =>
-    item.name?.toLowerCase().includes(q)
-  )
-})
-
-// Navigate to product detail
-const goToProduct = (productId: string) => {
-  navigateTo(localePath(`/catalog/offers/${productId}`))
-}
-
-// Mock price history generator (seeded by uuid for consistent results)
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 7 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.5) * 20 + Math.cos(seed * 0.3 + i) * 10
-    return Math.round(basePrice + variation)
-  })
-}
-
-// Initialize
-await init()
-
-useHead(() => ({
-  title: t('catalogProducts.header.title')
-}))
-</script>
--- a/app/pages/catalog/products/[id].vue
+++ b/app/pages/catalog/products/[id].vue
@@ -147,7 +147,7 @@
              :key="supplier.uuid"
              padding="md"
              interactive
-              @click="navigateTo(localePath(`/catalog/suppliers/${supplier.uuid}`))"
+              @click="navigateTo(localePath(`/catalog?supplier=${supplier.uuid}`))"
            >
              <Stack direction="row" align="center" gap="3">
                <IconCircle tone="primary">
--- a/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
+++ b/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
@@ -1,450 +0,0 @@
-<template>
-  <CatalogPage
-    :items="routePoints"
-    :loading="isLoading"
-    with-map
-    map-id="supplier-route-map"
-    point-color="#10b981"
-    :hovered-id="hoveredPointUuid"
-    @update:hovered-id="hoveredPointUuid = $event"
-  >
-    <template #searchBar>
-      <CatalogSearchBar
-        :active-filters="navigationFilters"
-        :show-counter="false"
-        @remove-filter="handleRemoveFilter"
-      />
-    </template>
-
-    <template #header>
-      <Text v-if="!isLoading && (!supplier || !product || !hub)" tone="muted">Данные не найдены</Text>
-      <Stack v-else-if="!isLoading" gap="4">
-        <!-- Offer Info Card -->
-        <Card padding="md">
-          <Stack gap="3">
-            <!-- Price -->
-            <div class="flex items-center justify-between">
-              <Text weight="semibold" size="lg">{{ product?.name }}</Text>
-              <Text v-if="offerData?.pricePerUnit" weight="bold" class="text-primary text-xl">
-                {{ formatPrice(offerData.pricePerUnit, offerData.currency, offerData.unit) }}
-              </Text>
-            </div>
-
-            <!-- Supplier Info -->
-            <div class="flex items-center gap-3">
-              <div v-if="supplier?.logoUrl" class="w-10 h-10 rounded-full overflow-hidden bg-base-200">
-                <img :src="supplier.logoUrl" :alt="supplier.name" class="w-full h-full object-cover" />
-              </div>
-              <div v-else class="w-10 h-10 rounded-full bg-base-200 flex items-center justify-center">
-                <Icon name="lucide:building-2" size="20" class="text-base-content/40" />
-              </div>
-              <div>
-                <Text weight="medium">{{ supplier?.name }}</Text>
-                <Text v-if="supplier?.country" tone="muted" size="sm">{{ supplier.country }}</Text>
-              </div>
-              <div v-if="supplier?.isVerified" class="badge badge-success badge-sm ml-auto">Верифицирован</div>
-            </div>
-
-          </Stack>
-        </Card>
-
-        <!-- KYC Profile Card (full company info) -->
-        <KycProfileCard v-if="supplier?.kycProfileUuid" :kyc-profile-uuid="supplier.kycProfileUuid" />
-
-        <!-- Price Chart -->
-        <Card padding="md">
-          <div class="h-48">
-            <ClientOnly>
-              <apexchart
-                type="area"
-                height="180"
-                :options="chartOptions"
-                :series="chartSeries"
-              />
-            </ClientOnly>
-          </div>
-        </Card>
-      </Stack>
-    </template>
-
-    <template #card="{ item }">
-      <!-- Route Loading -->
-      <Section v-if="isLoadingRoute" variant="plain">
-        <Stack align="center" gap="2">
-          <Spinner />
-          <Text tone="muted">{{ t('catalogSupplierCalculation.states.calculating_route') }}</Text>
-        </Stack>
-      </Section>
-
-      <!-- Route Result -->
-      <OfferResultCard
-        v-else-if="routeData"
-        :location-name="sourceLocation?.name"
-        :product-name="product?.name"
-        :price-per-unit="offerData?.pricePerUnit"
-        :currency="offerData?.currency"
-        :unit="offerData?.unit"
-        :stages="routeStages"
-        :start-name="sourceLocation?.name"
-        :end-name="hub?.name"
-      />
-
-      <!-- No Route -->
-      <Card v-else padding="md">
-        <Stack align="center" gap="2">
-          <Icon name="lucide:route-off" size="32" class="text-base-content/40" />
-          <Text tone="muted">{{ t('catalogSupplierCalculation.route.not_found') }}</Text>
-        </Stack>
-      </Card>
-    </template>
-
-    <template #empty>
-      <Text tone="muted">{{ t('catalogSupplierCalculation.route.not_found') }}</Text>
-    </template>
-  </CatalogPage>
-</template>
-
-<script setup lang="ts">
-import { GetNodeConnectionsDocument, GetOffersBySupplierProductDocument, GetOfferToHubDocument } from '~/composables/graphql/public/geo-generated'
-import {
-  GetSupplierProfileDocument,
-  GetSupplierProfilesDocument,
-} from '~/composables/graphql/public/exchange-generated'
-
-definePageMeta({
-  layout: 'topnav'
-})
-
-const routeRef = useRoute()
-const localePath = useLocalePath()
-const { t } = useI18n()
-const { execute } = useGraphQL()
-
-const isLoading = ref(true)
-const isLoadingRoute = ref(false)
-const supplier = ref<any>(null)
-const product = ref<{ uuid: string; name: string } | null>(null)
-const hub = ref<any>(null)
-const sourceLocation = ref<{ uuid: string; name: string; latitude?: number; longitude?: number } | null>(null)
-const routeData = ref<any>(null)
-const hoveredPointUuid = ref<string>()
-const offerData = ref<any>(null)  // Full offer data with price
-
-const supplierId = computed(() => routeRef.params.supplierId as string)
-const productId = computed(() => routeRef.params.productId as string)
-const hubId = computed(() => routeRef.params.hubId as string)
-
-// Navigation filters for search bar badges
-const navigationFilters = computed(() => {
-  const filters: Array<{ id: string; label: string; key: string }> = []
-
-  if (supplier.value?.name) {
-    filters.push({
-      id: 'supplier',
-      key: 'Поставщик',
-      label: supplier.value.name
-    })
-  }
-
-  if (product.value?.name) {
-    filters.push({
-      id: 'product',
-      key: 'Товар',
-      label: product.value.name
-    })
-  }
-
-  if (hub.value?.name) {
-    filters.push({
-      id: 'hub',
-      key: 'Хаб',
-      label: hub.value.name
-    })
-  }
-
-  return filters
-})
-
-// Handle removing navigation filter (navigate back)
-const handleRemoveFilter = (filterId: string) => {
-  if (filterId === 'hub') {
-    navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId.value}`))
-  } else if (filterId === 'product') {
-    navigateTo(localePath(`/catalog/suppliers/${supplierId.value}`))
-  } else if (filterId === 'supplier') {
-    navigateTo(localePath('/catalog/suppliers'))
-  }
-}
-
-// Map items - show source and destination
-const routePoints = computed(() => {
-  const points: Array<{ uuid: string; name: string; latitude: number; longitude: number }> = []
-
-  // Source location
-  if (sourceLocation.value?.latitude && sourceLocation.value?.longitude) {
-    points.push({
-      uuid: sourceLocation.value.uuid,
-      name: sourceLocation.value.name,
-      latitude: Number(sourceLocation.value.latitude),
-      longitude: Number(sourceLocation.value.longitude)
-    })
-  }
-
-  // Destination hub
-  if (hub.value?.latitude && hub.value?.longitude) {
-    points.push({
-      uuid: hub.value.uuid || hubId.value,
-      name: hub.value.name || '',
-      latitude: Number(hub.value.latitude),
-      longitude: Number(hub.value.longitude)
-    })
-  }
-
-  return points
-})
-
-// Route stages for OfferResultCard
-const routeStages = computed(() => {
-  if (!routeData.value?.stages) return []
-  return routeData.value.stages.map((stage: any) => ({
-    transportType: stage?.transportType,
-    distanceKm: stage?.distanceKm
-  }))
-})
-
-// Format price
-const formatPrice = (price?: number | null, currency?: string | null, unit?: string | null) => {
-  if (!price) return ''
-  const currSymbol = getCurrencySymbol(currency)
-  const unitName = getUnitName(unit)
-  return `${currSymbol}${price.toLocaleString()}/${unitName}`
-}
-
-const getCurrencySymbol = (currency?: string | null) => {
-  switch (currency?.toUpperCase()) {
-    case 'USD': return '$'
-    case 'EUR': return '€'
-    case 'RUB': return '₽'
-    case 'CNY': return '¥'
-    default: return '$'
-  }
-}
-
-const getUnitName = (unit?: string | null) => {
-  switch (unit?.toLowerCase()) {
-    case 'т':
-    case 'ton':
-    case 'tonne':
-      return 'т'
-    case 'кг':
-    case 'kg':
-      return 'кг'
-    default:
-      return 'т'
-  }
-}
-
-// Format distance
-const formatDistance = (km?: number | null) => {
-  if (!km) return t('common.values.not_available')
-  return `${Math.round(km)} km`
-}
-
-// Format duration
-const formatDuration = (seconds?: number | null) => {
-  if (!seconds) return t('common.values.not_available')
-  const hours = Math.floor(seconds / 3600)
-  const days = Math.floor(hours / 24)
-  if (days > 0) return `${days}d ${hours % 24}h`
-  return `${hours}h`
-}
-
-// Get transport icon
-const getTransportIcon = (type?: string | null) => {
-  switch (type?.toLowerCase()) {
-    case 'auto':
-    case 'road':
-      return 'lucide:truck'
-    case 'rail':
-    case 'train':
-      return 'lucide:train'
-    case 'sea':
-    case 'ship':
-      return 'lucide:ship'
-    case 'air':
-    case 'plane':
-      return 'lucide:plane'
-    default:
-      return 'lucide:route'
-  }
-}
-
-// Mock price history generator
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 30 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.3) * 30 + Math.cos(seed * 0.2 + i) * 15
-    return Math.round(basePrice + variation)
-  })
-}
-
-const priceHistory = computed(() => product.value ? getMockPriceHistory(product.value.uuid) : [])
-
-const trend = computed(() => {
-  if (priceHistory.value.length < 2) return 0
-  const first = priceHistory.value[0]
-  const last = priceHistory.value[priceHistory.value.length - 1]
-  if (!first || first === 0) return 0
-  return Math.round(((last - first) / first) * 100)
-})
-
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    toolbar: { show: false },
-    animations: { enabled: true }
-  },
-  stroke: { curve: 'smooth', width: 2 },
-  fill: {
-    type: 'gradient',
-    gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1 }
-  },
-  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
-  dataLabels: { enabled: false },
-  xaxis: {
-    categories: priceHistory.value.map((_, i) => `${i + 1}`),
-    labels: { show: false }
-  },
-  yaxis: { labels: { formatter: (val: number) => `$${val}` } },
-  tooltip: { y: { formatter: (val: number) => `$${val}` } },
-  grid: { borderColor: '#e5e7eb', strokeDashArray: 4 }
-}))
-
-const chartSeries = computed(() => [{
-  name: t('catalogSupplierCalculation.chart.price'),
-  data: priceHistory.value
-}])
-
-// Load route using delivery to hub
-const loadRoute = async (offerUuid: string) => {
-  if (!offerUuid || !hubId.value) {
-    routeData.value = null
-    return
-  }
-
-  isLoadingRoute.value = true
-  try {
-    const data = await execute(
-      GetOfferToHubDocument,
-      {
-        offerUuid,
-        hubUuid: hubId.value
-      },
-      'public',
-      'geo'
-    )
-    routeData.value = data?.offerToHub?.routes?.[0] || null
-  } catch (error) {
-    console.error('Error loading route:', error)
-    routeData.value = null
-  } finally {
-    isLoadingRoute.value = false
-  }
-}
-
-// Load data
-try {
-  // Get hub info
-  const { data: hubData } = await useServerQuery(
-    'hub-info',
-    GetNodeConnectionsDocument,
-    { uuid: hubId.value },
-    'public',
-    'geo'
-  )
-  hub.value = hubData.value?.nodeConnections?.hub || null
-
-  // Get supplier profile from exchange
-  const { data: supplierData } = await useServerQuery(
-    'supplier-profile',
-    GetSupplierProfileDocument,
-    { uuid: supplierId.value },
-    'public',
-    'exchange'
-  )
-  supplier.value = supplierData.value?.getSupplierProfile || null
-
-  if (!supplier.value) {
-    const { data: suppliersList } = await useServerQuery(
-      'suppliers-fallback',
-      GetSupplierProfilesDocument,
-      {},
-      'public',
-      'exchange'
-    )
-    supplier.value = (suppliersList.value?.getSupplierProfiles || [])
-      .find((s: any) => s?.teamUuid === supplierId.value || s?.uuid === supplierId.value) || null
-  }
-
-  // Get offers for this supplier+product from geo
-  if (supplier.value) {
-    const supplierUuidForGeo = supplier.value?.uuid || supplierId.value
-
-    const { data: offersData } = await useServerQuery(
-      'supplier-product-offers',
-      GetOffersBySupplierProductDocument,
-      { supplierUuid: supplierUuidForGeo, productUuid: productId.value },
-      'public',
-      'geo'
-    )
-
-    const offers = offersData.value?.offersBySupplierProduct || []
-
-    // Use first offer for product info and source location
-    if (offers.length > 0) {
-      const firstOffer = offers[0]
-      // Store full offer data (including price)
-      offerData.value = firstOffer
-
-      if (firstOffer?.productUuid && firstOffer?.productName) {
-        product.value = { uuid: firstOffer.productUuid, name: firstOffer.productName }
-      }
-      if (firstOffer?.latitude && firstOffer?.longitude) {
-        sourceLocation.value = {
-          uuid: firstOffer.uuid || '',
-          name: firstOffer.country || 'Origin',
-          latitude: firstOffer.latitude,
-          longitude: firstOffer.longitude
-        }
-      }
-
-      // Load route using the offer UUID
-      if (firstOffer?.uuid && hub.value) {
-        await loadRoute(firstOffer.uuid)
-      }
-    }
-  }
-} catch (error) {
-  console.error('Error loading data:', error)
-} finally {
-  isLoading.value = false
-}
-
-// SEO
-useHead(() => ({
-  title: product.value?.name && hub.value?.name
-    ? `${product.value.name} → ${hub.value.name}`
-    : t('catalogSupplierCalculation.meta.title'),
-  meta: [
-    {
-      name: 'description',
-      content: t('catalogSupplierCalculation.meta.description', {
-        product: product.value?.name || '',
-        supplier: supplier.value?.name || '',
-        hub: hub.value?.name || ''
-      })
-    }
-  ]
-}))
-</script>
--- a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
@@ -1,257 +0,0 @@
-<template>
-  <CatalogPage
-    :items="filteredHubs"
-    :loading="isLoading"
-    :total-count="hubs.length"
-    with-map
-    map-id="supplier-product-hubs-map"
-    point-color="#10b981"
-    :hovered-id="hoveredId"
-    @select="onSelectHub"
-    @update:hovered-id="hoveredId = $event"
-  >
-    <template #searchBar="{ displayedCount, totalCount }">
-      <CatalogSearchBar
-        v-model:search-query="searchQuery"
-        :active-filters="navigationFilters"
-        :displayed-count="displayedCount"
-        :total-count="totalCount"
-        @remove-filter="handleRemoveFilter"
-      />
-    </template>
-
-    <template #header>
-      <Text v-if="!isLoading && (!supplier || !product)" tone="muted">Товар не найден</Text>
-      <Stack v-else-if="!isLoading" gap="4">
-        <Card padding="md">
-          <div class="h-48">
-            <ClientOnly>
-              <apexchart
-                type="area"
-                height="180"
-                :options="chartOptions"
-                :series="chartSeries"
-              />
-            </ClientOnly>
-          </div>
-        </Card>
-      </Stack>
-    </template>
-
-    <template #card="{ item }">
-      <HubCard
-        :hub="item"
-        :link-to="localePath(`/catalog/suppliers/${supplierId}/${productId}/${item.uuid}`)"
-      />
-    </template>
-
-    <template #empty>
-      <Stack align="center" gap="2">
-        <Icon name="lucide:map-pin-off" size="32" class="text-base-content/40" />
-        <Text tone="muted">{{ t('catalogSupplierProductHubs.empty.no_hubs') }}</Text>
-      </Stack>
-    </template>
-  </CatalogPage>
-</template>
-
-<script setup lang="ts">
-import { GetOffersBySupplierProductDocument, GetHubsNearOfferDocument } from '~/composables/graphql/public/geo-generated'
-import {
-  GetSupplierProfileDocument,
-  GetSupplierProfilesDocument,
-} from '~/composables/graphql/public/exchange-generated'
-
-definePageMeta({
-  layout: 'topnav'
-})
-
-const routeRef = useRoute()
-const localePath = useLocalePath()
-const { t } = useI18n()
-
-const isLoading = ref(true)
-const hoveredId = ref<string>()
-const supplier = ref<any>(null)
-const product = ref<{ uuid: string; name: string } | null>(null)
-const sourceLocation = ref<{ uuid: string; name: string } | null>(null)
-const hubs = ref<Array<{ uuid: string; name: string; latitude?: number; longitude?: number; country?: string; countryCode?: string }>>([])
-
-const supplierId = computed(() => routeRef.params.supplierId as string)
-const productId = computed(() => routeRef.params.productId as string)
-
-// Navigation filters for search bar badges
-const navigationFilters = computed(() => {
-  const filters: Array<{ id: string; label: string; key: string }> = []
-
-  if (supplier.value?.name) {
-    filters.push({
-      id: 'supplier',
-      key: 'Поставщик',
-      label: supplier.value.name
-    })
-  }
-
-  if (product.value?.name) {
-    filters.push({
-      id: 'product',
-      key: 'Товар',
-      label: product.value.name
-    })
-  }
-
-  return filters
-})
-
-// Handle removing navigation filter (navigate back)
-const handleRemoveFilter = (filterId: string) => {
-  if (filterId === 'product') {
-    navigateTo(localePath(`/catalog/suppliers/${supplierId.value}`))
-  } else if (filterId === 'supplier') {
-    navigateTo(localePath('/catalog/suppliers'))
-  }
-}
-
-// Search
-const searchQuery = ref('')
-
-const filteredHubs = computed(() => {
-  if (!searchQuery.value.trim()) return hubs.value
-  const q = searchQuery.value.toLowerCase()
-  return hubs.value.filter(hub =>
-    hub.name?.toLowerCase().includes(q) ||
-    hub.country?.toLowerCase().includes(q)
-  )
-})
-
-// Handle hub selection
-const onSelectHub = (hub: any) => {
-  navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId.value}/${hub.uuid}`))
-}
-
-// Mock price history generator
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 30 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.3) * 20 + Math.cos(seed * 0.2 + i) * 15
-    return Math.round(basePrice + variation)
-  })
-}
-
-const priceHistory = computed(() => product.value ? getMockPriceHistory(product.value.uuid) : [])
-
-// Chart configuration
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    sparkline: { enabled: false },
-    toolbar: { show: false },
-    animations: { enabled: false }
-  },
-  stroke: { curve: 'smooth', width: 2 },
-  fill: {
-    type: 'gradient',
-    gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1 }
-  },
-  colors: ['#3b82f6'],
-  xaxis: {
-    labels: { show: false },
-    axisBorder: { show: false },
-    axisTicks: { show: false }
-  },
-  yaxis: { labels: { show: true } },
-  grid: { show: true, borderColor: '#e5e7eb', strokeDashArray: 4 },
-  tooltip: { enabled: true }
-}))
-
-const chartSeries = computed(() => [{
-  name: t('catalogSupplierProductHubs.chart.price'),
-  data: priceHistory.value
-}])
-
-// Load data
-try {
-  // Get supplier profile from exchange
-  const { data: supplierData } = await useServerQuery(
-    'supplier-profile',
-    GetSupplierProfileDocument,
-    { uuid: supplierId.value },
-    'public',
-    'exchange'
-  )
-  supplier.value = supplierData.value?.getSupplierProfile || null
-
-  if (!supplier.value) {
-    const { data: suppliersList } = await useServerQuery(
-      'suppliers-fallback',
-      GetSupplierProfilesDocument,
-      {},
-      'public',
-      'exchange'
-    )
-    supplier.value = (suppliersList.value?.getSupplierProfiles || [])
-      .find((s: any) => s?.teamUuid === supplierId.value || s?.uuid === supplierId.value) || null
-  }
-
-  // Get offers for this supplier+product from geo
-  if (supplier.value) {
-    const supplierUuidForGeo = supplier.value?.uuid || supplierId.value
-
-    const { data: offersData } = await useServerQuery(
-      'supplier-product-offers',
-      GetOffersBySupplierProductDocument,
-      { supplierUuid: supplierUuidForGeo, productUuid: productId.value },
-      'public',
-      'geo'
-    )
-
-    const offers = offersData.value?.offersBySupplierProduct || []
-
-    // Set product info from first offer
-    if (offers.length > 0) {
-      const firstOffer = offers[0]
-      if (firstOffer?.productUuid && firstOffer?.productName) {
-        product.value = { uuid: firstOffer.productUuid, name: firstOffer.productName }
-      }
-      // Source location is the offer's location (first offer)
-      if (firstOffer?.latitude && firstOffer?.longitude) {
-        sourceLocation.value = {
-          uuid: firstOffer.uuid || '',
-          name: firstOffer.country || 'Origin'
-        }
-      }
-
-      // Get hubs near the first offer
-      const { data: hubsData } = await useServerQuery(
-        'hubs-near-offer',
-        GetHubsNearOfferDocument,
-        { offerUuid: firstOffer.uuid, limit: 20 },
-        'public',
-        'geo'
-      )
-
-      hubs.value = (hubsData.value?.hubsNearOffer || [])
-        .filter((h): h is NonNullable<typeof h> => h !== null && !!h.uuid && !!h.name)
-        .map(h => ({
-          uuid: h.uuid!,
-          name: h.name!,
-          latitude: h.latitude ?? undefined,
-          longitude: h.longitude ?? undefined,
-          country: h.country || undefined,
-          countryCode: h.countryCode || undefined
-        }))
-    }
-  }
-} catch (error) {
-  console.error('Error loading data:', error)
-} finally {
-  isLoading.value = false
-}
-
-// SEO
-useHead(() => ({
-  title: product.value?.name && supplier.value?.name
-    ? `${product.value.name} - ${supplier.value.name}`
-    : t('catalogSupplierProductHubs.meta.title')
-}))
-</script>
--- a/app/pages/catalog/suppliers/[supplierId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/index.vue
@@ -1,215 +0,0 @@
-<template>
-  <CatalogPage
-    :items="filteredProducts"
-    :map-items="mapItems"
-    :loading="isLoading"
-    :total-count="products.length"
-    :grid-columns="3"
-    with-map
-    map-id="supplier-products-map"
-    point-color="#3b82f6"
-    :hovered-id="hoveredId"
-    @update:hovered-id="hoveredId = $event"
-  >
-    <template #searchBar="{ displayedCount, totalCount }">
-      <CatalogSearchBar
-        v-model:search-query="searchQuery"
-        :active-filters="navigationFilters"
-        :displayed-count="displayedCount"
-        :total-count="totalCount"
-        @remove-filter="handleRemoveFilter"
-      />
-    </template>
-
-    <template #header>
-      <Text v-if="!isLoading && !supplier" tone="muted">Поставщик не найден</Text>
-      <Text v-else-if="!isLoading" tone="muted">Выберите товар</Text>
-    </template>
-
-    <template #card="{ item }">
-      <HubProductCard
-        :name="item.name"
-        :price-history="getMockPriceHistory(item.uuid)"
-        @select="goToProduct(item.uuid)"
-      />
-    </template>
-
-    <template #empty>
-      <Stack align="center" gap="2">
-        <Icon name="lucide:package-x" size="32" class="text-base-content/40" />
-        <Text tone="muted">{{ t('catalogSupplierProducts.empty.no_products') }}</Text>
-      </Stack>
-    </template>
-  </CatalogPage>
-</template>
-
-<script setup lang="ts">
-import {
-  GetSupplierProfileDocument,
-  GetSupplierOffersDocument,
-  GetSupplierProfilesDocument,
-  GetOffersDocument,
-} from '~/composables/graphql/public/exchange-generated'
-
-definePageMeta({
-  layout: 'topnav'
-})
-
-const route = useRoute()
-const localePath = useLocalePath()
-const { t } = useI18n()
-
-const isLoading = ref(true)
-const hoveredId = ref<string>()
-const supplier = ref<any>(null)
-const offers = ref<any[]>([])
-
-const supplierId = computed(() => route.params.supplierId as string)
-
-// Navigation filters for search bar badges
-const navigationFilters = computed(() => {
-  const filters: Array<{ id: string; label: string; key: string }> = []
-
-  if (supplier.value?.name) {
-    filters.push({
-      id: 'supplier',
-      key: 'Поставщик',
-      label: supplier.value.name
-    })
-  }
-
-  return filters
-})
-
-// Handle removing navigation filter (navigate back)
-const handleRemoveFilter = (filterId: string) => {
-  if (filterId === 'supplier') {
-    navigateTo(localePath('/catalog/suppliers'))
-  }
-}
-
-// Search
-const searchQuery = ref('')
-
-const filteredProducts = computed(() => {
-  if (!searchQuery.value.trim()) return products.value
-  const q = searchQuery.value.toLowerCase()
-  return products.value.filter(item =>
-    item.name?.toLowerCase().includes(q)
-  )
-})
-
-// Map items - show supplier location
-const mapItems = computed(() => {
-  if (!supplier.value?.latitude || !supplier.value?.longitude) return []
-  return [{
-    uuid: supplier.value.uuid || supplier.value.teamUuid || supplierId.value,
-    name: supplier.value.name || '',
-    latitude: Number(supplier.value.latitude),
-    longitude: Number(supplier.value.longitude),
-    country: supplier.value.country
-  }]
-})
-
-// Extract unique products from offers
-const products = computed(() => {
-  const productsMap = new Map<string, { uuid: string; name: string; locationUuid?: string }>()
-  offers.value.forEach(offer => {
-    if (offer.productUuid && offer.productName && !productsMap.has(offer.productUuid)) {
-      productsMap.set(offer.productUuid, {
-        uuid: offer.productUuid,
-        name: offer.productName,
-        locationUuid: offer.locationUuid
-      })
-    }
-  })
-  return Array.from(productsMap.values())
-})
-
-// Navigate to product detail
-const goToProduct = (productId: string) => {
-  navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId}`))
-}
-
-// Mock price history generator (seeded by uuid for consistent results)
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 7 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.5) * 20 + Math.cos(seed * 0.3 + i) * 10
-    return Math.round(basePrice + variation)
-  })
-}
-
-// Load data
-try {
-  // Try to get supplier by UUID first
-  const { data: supplierData } = await useServerQuery(
-    'supplier-profile',
-    GetSupplierProfileDocument,
-    { uuid: supplierId.value },
-    'public',
-    'exchange'
-  )
-  supplier.value = supplierData.value?.getSupplierProfile || null
-
-  // Fallback to searching in all suppliers
-  if (!supplier.value) {
-    const { data: suppliersList } = await useServerQuery(
-      'suppliers-fallback',
-      GetSupplierProfilesDocument,
-      {},
-      'public',
-      'exchange'
-    )
-    supplier.value = (suppliersList.value?.getSupplierProfiles || [])
-      .find((s: any) => s?.teamUuid === supplierId.value || s?.uuid === supplierId.value) || null
-  }
-
-  // Get supplier's offers
-  if (supplier.value) {
-    const teamIds = [
-      supplier.value?.teamUuid,
-      supplier.value?.uuid,
-      supplierId.value
-    ].filter(Boolean)
-
-    if (teamIds.length) {
-      const primaryId = teamIds[0] as string
-      const { data: offersData } = await useServerQuery(
-        'supplier-offers',
-        GetSupplierOffersDocument,
-        { teamUuid: primaryId },
-        'public',
-        'exchange'
-      )
-      offers.value = offersData.value?.getOffers || []
-
-      // Fallback if no offers found
-      if (!offers.value.length) {
-        const { data: allOffersData } = await useServerQuery(
-          'supplier-offers-fallback',
-          GetOffersDocument,
-          {},
-          'public',
-          'exchange'
-        )
-        const ids = new Set(teamIds)
-        offers.value = (allOffersData.value?.getOffers || [])
-          .filter((o: any) => o?.teamUuid && ids.has(o.teamUuid))
-      }
-    }
-  }
-} catch (error) {
-  console.error('Error loading supplier products:', error)
-} finally {
-  isLoading.value = false
-}
-
-// SEO
-useHead(() => ({
-  title: supplier.value?.name
-    ? t('catalogSupplierProducts.meta.title_with_name', { name: supplier.value.name })
-    : t('catalogSupplierProducts.meta.title')
-}))
-</script>
--- a/app/pages/catalog/suppliers/index.vue
+++ b/app/pages/catalog/suppliers/index.vue
@@ -1,124 +0,0 @@
-<template>
-  <CatalogPage
-    :items="displayItems"
-    :map-items="itemsWithCoords"
-    :loading="isLoading"
-    :grid-columns="3"
-    with-map
-    map-id="suppliers-map"
-    point-color="#3b82f6"
-    :total-count="total"
-    :hovered-id="hoveredId"
-    @select="onSelectSupplier"
-    @update:hovered-id="hoveredId = $event"
-  >
-    <template #searchBar="{ displayedCount, totalCount }">
-      <CatalogSearchBar
-        v-model:search-query="searchQuery"
-        :active-filters="[]"
-        :displayed-count="displayedCount"
-        :total-count="totalCount"
-        @search="onSearch"
-      />
-    </template>
-
-    <template #header>
-      <Text v-if="!isLoading" tone="muted">Выберите поставщика</Text>
-    </template>
-
-    <template #card="{ item }">
-      <SupplierCard :supplier="item" />
-    </template>
-
-    <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('catalogSuppliersSection.empty.no_suppliers') }}</Text>
-    </template>
-  </CatalogPage>
-</template>
-
-<script setup lang="ts">
-import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
-
-definePageMeta({
-  layout: 'topnav'
-})
-
-const { t } = useI18n()
-const localePath = useLocalePath()
-
-const {
-  items,
-  total,
-  isLoading,
-  isLoadingMore,
-  canLoadMore,
-  loadMore,
-  init
-} = useCatalogSuppliers()
-
-// Hover state
-const hoveredId = ref<string>()
-
-// Search bar
-const searchQuery = ref('')
-
-// Search with map checkbox
-const searchWithMap = ref(false)
-const currentBounds = ref<MapBounds | null>(null)
-
-// Filter items with valid coordinates for map
-const itemsWithCoords = computed(() =>
-  items.value.filter(item =>
-    item.latitude != null &&
-    item.longitude != null &&
-    !isNaN(Number(item.latitude)) &&
-    !isNaN(Number(item.longitude))
-  ).map(item => ({
-    uuid: item.uuid || item.teamUuid,
-    name: item.name || '',
-    latitude: Number(item.latitude),
-    longitude: Number(item.longitude)
-  }))
-)
-
-// Filtered items when searchWithMap is enabled
-const displayItems = computed(() => {
-  if (!searchWithMap.value || !currentBounds.value) return items.value
-  return items.value.filter(item => {
-    if (item.latitude == null || item.longitude == null) return false
-    const { west, east, north, south } = currentBounds.value!
-    const lng = Number(item.longitude)
-    const lat = Number(item.latitude)
-    return lng >= west && lng <= east && lat >= south && lat <= north
-  })
-})
-
-// Search handler (for future use)
-const onSearch = () => {
-  // TODO: Implement search
-}
-
-// Handle supplier selection from map
-const onSelectSupplier = (supplier: any) => {
-  navigateTo(localePath(`/catalog/suppliers/${supplier.uuid || supplier.teamUuid}`))
-}
-
-await init()
-
-useHead(() => ({
-  title: t('catalogSuppliersSection.header.title')
-}))
-</script>
--- a/app/pages/select-location/index.vue
+++ b/app/pages/select-location/index.vue
@@ -132,11 +132,14 @@ const isSelected = (type: 'address' | 'hub', uuid: string) => {

 const goToRequestIfReady = () => {
  if (route.query.after === 'request' && searchStore.searchForm.productUuid && searchStore.searchForm.locationUuid) {
-    const query: Record<string, string> = {}
+    const query: Record<string, string> = {
+      product: searchStore.searchForm.productUuid,
+      hub: searchStore.searchForm.locationUuid
+    }
    if (searchStore.searchForm.quantity) query.quantity = String(searchStore.searchForm.quantity)

    router.push({
-      path: `/catalog/offers/${searchStore.searchForm.productUuid}/${searchStore.searchForm.locationUuid}`,
+      path: `/catalog`,
      query
    })
    return true
--- a/app/pages/select-location/map.vue
+++ b/app/pages/select-location/map.vue
@@ -76,11 +76,14 @@ const selectItem = async (item: any) => {
    searchStore.setLocation(item.name)
    searchStore.setLocationUuid(item.uuid)
    if (route.query.after === 'request' && searchStore.searchForm.productUuid && searchStore.searchForm.locationUuid) {
-      const query: Record<string, string> = {}
+      const query: Record<string, string> = {
+        product: searchStore.searchForm.productUuid,
+        hub: searchStore.searchForm.locationUuid
+      }
      if (searchStore.searchForm.quantity) query.quantity = String(searchStore.searchForm.quantity)

      router.push({
-        path: `/catalog/offers/${searchStore.searchForm.productUuid}/${searchStore.searchForm.locationUuid}`,
+        path: `/catalog`,
        query
      })
      return
--- a/i18n/locales/en/catalog.json
+++ b/i18n/locales/en/catalog.json
@@ -0,0 +1,36 @@
+{
+  "catalog": {
+    "filters": {
+      "product": "Product",
+      "supplier": "Supplier",
+      "hub": "Hub",
+      "location": "Location",
+      "quantity": "Quantity"
+    },
+    "search": {
+      "placeholder": "Find an offer...",
+      "searchProducts": "Search products...",
+      "searchSuppliers": "Search suppliers...",
+      "searchHubs": "Search hubs..."
+    },
+    "hero": {
+      "title": "Find the best offer",
+      "subtitle": "Select a product, supplier, or hub to start searching"
+    },
+    "headers": {
+      "selectProduct": "Select a product",
+      "selectSupplier": "Select a supplier",
+      "selectHub": "Select a hub",
+      "hubsForProduct": "Hubs with product",
+      "productsFromSupplier": "Supplier products",
+      "productsInHub": "Products in hub",
+      "offers": "Offers"
+    },
+    "empty": {
+      "noProducts": "No products found",
+      "noSuppliers": "No suppliers found",
+      "noHubs": "No hubs found",
+      "noOffers": "No offers found"
+    }
+  }
+}
--- a/i18n/locales/ru/catalog.json
+++ b/i18n/locales/ru/catalog.json
@@ -0,0 +1,36 @@
+{
+  "catalog": {
+    "filters": {
+      "product": "Товар",
+      "supplier": "Поставщик",
+      "hub": "Хаб",
+      "location": "Локация",
+      "quantity": "Количество"
+    },
+    "search": {
+      "placeholder": "Найти предложение...",
+      "searchProducts": "Поиск товаров...",
+      "searchSuppliers": "Поиск поставщиков...",
+      "searchHubs": "Поиск хабов..."
+    },
+    "hero": {
+      "title": "Найдите лучшее предложение",
+      "subtitle": "Выберите товар, поставщика или хаб для начала поиска"
+    },
+    "headers": {
+      "selectProduct": "Выберите товар",
+      "selectSupplier": "Выберите поставщика",
+      "selectHub": "Выберите хаб",
+      "hubsForProduct": "Хабы с товаром",
+      "productsFromSupplier": "Товары поставщика",
+      "productsInHub": "Товары в хабе",
+      "offers": "Предложения"
+    },
+    "empty": {
+      "noProducts": "Товары не найдены",
+      "noSuppliers": "Поставщики не найдены",
+      "noHubs": "Хабы не найдены",
+      "noOffers": "Предложения не найдены"
+    }
+  }
+}