From 850ab3f2520206e81ba41ca48fc38448c68bf0e7 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 22 Jan 2026 19:13:45 +0700
Subject: [PATCH] Add Explore/Quote dual mode to catalog page

- Add CatalogMode type (explore/quote) to useCatalogSearch
- Create ExplorePanel component with view toggle (offers/hubs/suppliers)
- Create QuoteForm and QuotePanel components for search form
- Refactor CatalogPage to fullscreen map with overlay panel
- Simplify catalog/index.vue to use new components
- Add translations for modes and quote form (ru/en)

The catalog now has two modes:
- Explore: Browse map with offers/hubs/suppliers toggle
- Quote: Search form with product/hub/qty filters to find offers
---
 app/components/catalog/ExplorePanel.vue |  81 ++++
 app/components/catalog/QuoteForm.vue    | 129 ++++++
 app/components/catalog/QuotePanel.vue   |  81 ++++
 app/components/page/CatalogPage.vue     | 459 ++++++--------------
 app/composables/useCatalogSearch.ts     |  18 +
 app/pages/catalog/index.vue             | 555 +++++++++---------------
 i18n/locales/en/catalog.json            |  17 +
 i18n/locales/en/common.json             |   1 +
 i18n/locales/ru/catalog.json            |  17 +
 i18n/locales/ru/common.json             |   1 +
 10 files changed, 694 insertions(+), 665 deletions(-)
 create mode 100644 app/components/catalog/ExplorePanel.vue
 create mode 100644 app/components/catalog/QuoteForm.vue
 create mode 100644 app/components/catalog/QuotePanel.vue

diff --git a/app/components/catalog/ExplorePanel.vue b/app/components/catalog/ExplorePanel.vue
new file mode 100644
index 0000000..058d557
--- /dev/null
+++ b/app/components/catalog/ExplorePanel.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <!-- View toggle -->
+    <div class="join join-horizontal">
+      <button
+        class="btn btn-sm join-item"
+        :class="{ 'btn-active': mapViewMode === 'offers' }"
+        @click="setMapViewMode('offers')"
+      >
+        <Icon name="lucide:shopping-bag" size="16" />
+        <span class="hidden sm:inline">{{ $t('catalog.views.offers') }}</span>
+      </button>
+      <button
+        class="btn btn-sm join-item"
+        :class="{ 'btn-active': mapViewMode === 'hubs' }"
+        @click="setMapViewMode('hubs')"
+      >
+        <Icon name="lucide:warehouse" size="16" />
+        <span class="hidden sm:inline">{{ $t('catalog.views.hubs') }}</span>
+      </button>
+      <button
+        class="btn btn-sm join-item"
+        :class="{ 'btn-active': mapViewMode === 'suppliers' }"
+        @click="setMapViewMode('suppliers')"
+      >
+        <Icon name="lucide:factory" size="16" />
+        <span class="hidden sm:inline">{{ $t('catalog.views.suppliers') }}</span>
+      </button>
+    </div>
+
+    <!-- Selected item info -->
+    <div v-if="selectedItem" class="card bg-base-100 shadow-lg">
+      <div class="card-body p-4">
+        <div class="flex items-start justify-between gap-2">
+          <div>
+            <h3 class="card-title text-base">{{ selectedItem.name }}</h3>
+            <p v-if="selectedItem.country" class="text-sm text-base-content/70">
+              {{ selectedItem.country }}
+            </p>
+          </div>
+          <button class="btn btn-ghost btn-sm btn-circle" @click="emit('close-selected')">
+            <Icon name="lucide:x" size="16" />
+          </button>
+        </div>
+
+        <div class="card-actions justify-end mt-2">
+          <button class="btn btn-primary btn-sm" @click="emit('view-details', selectedItem)">
+            {{ $t('common.viewDetails') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Hint when nothing selected -->
+    <div v-else class="text-sm text-base-content/60">
+      <p>{{ $t('catalog.explore.subtitle') }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface SelectedItem {
+  uuid: string
+  name?: string
+  country?: string
+  latitude?: number | null
+  longitude?: number | null
+  [key: string]: any
+}
+
+defineProps<{
+  selectedItem?: SelectedItem | null
+}>()
+
+const emit = defineEmits<{
+  'close-selected': []
+  'view-details': [item: SelectedItem]
+}>()
+
+const { mapViewMode, setMapViewMode } = useCatalogSearch()
+</script>
diff --git a/app/components/catalog/QuoteForm.vue b/app/components/catalog/QuoteForm.vue
new file mode 100644
index 0000000..37c4222
--- /dev/null
+++ b/app/components/catalog/QuoteForm.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <h3 class="font-semibold text-lg">{{ $t('catalog.quote.title') }}</h3>
+
+    <!-- Product chip -->
+    <div class="form-control">
+      <label class="label py-1">
+        <span class="label-text text-xs text-base-content/70">{{ $t('catalog.filters.product') }}</span>
+      </label>
+      <button
+        v-if="productLabel"
+        class="btn btn-outline btn-sm justify-start gap-2"
+        @click="emit('edit-filter', 'product')"
+      >
+        <Icon name="lucide:package" size="16" />
+        <span class="flex-1 text-left truncate">{{ productLabel }}</span>
+        <span
+          class="btn btn-ghost btn-xs btn-circle"
+          @click.stop="emit('remove-filter', 'product')"
+        >
+          <Icon name="lucide:x" size="14" />
+        </span>
+      </button>
+      <button
+        v-else
+        class="btn btn-ghost btn-sm justify-start gap-2 border border-dashed border-base-content/30"
+        @click="emit('edit-filter', 'product')"
+      >
+        <Icon name="lucide:plus" size="16" class="text-base-content/50" />
+        <span class="text-base-content/50">{{ $t('catalog.quote.selectProduct') }}</span>
+      </button>
+    </div>
+
+    <!-- Hub chip -->
+    <div class="form-control">
+      <label class="label py-1">
+        <span class="label-text text-xs text-base-content/70">{{ $t('catalog.filters.hub') }}</span>
+      </label>
+      <button
+        v-if="hubLabel"
+        class="btn btn-outline btn-sm justify-start gap-2"
+        @click="emit('edit-filter', 'hub')"
+      >
+        <Icon name="lucide:map-pin" size="16" />
+        <span class="flex-1 text-left truncate">{{ hubLabel }}</span>
+        <span
+          class="btn btn-ghost btn-xs btn-circle"
+          @click.stop="emit('remove-filter', 'hub')"
+        >
+          <Icon name="lucide:x" size="14" />
+        </span>
+      </button>
+      <button
+        v-else
+        class="btn btn-ghost btn-sm justify-start gap-2 border border-dashed border-base-content/30"
+        @click="emit('edit-filter', 'hub')"
+      >
+        <Icon name="lucide:plus" size="16" class="text-base-content/50" />
+        <span class="text-base-content/50">{{ $t('catalog.quote.selectHub') }}</span>
+      </button>
+    </div>
+
+    <!-- Quantity input -->
+    <div class="form-control">
+      <label class="label py-1">
+        <span class="label-text text-xs text-base-content/70">{{ $t('catalog.filters.quantity') }}</span>
+      </label>
+      <input
+        v-model="localQuantity"
+        type="number"
+        :placeholder="$t('catalog.quote.enterQty')"
+        class="input input-bordered input-sm"
+        min="1"
+        @blur="emit('update-quantity', localQuantity)"
+        @keyup.enter="emit('update-quantity', localQuantity)"
+      />
+    </div>
+
+    <!-- Action buttons -->
+    <div class="flex gap-2 mt-2">
+      <button
+        class="btn btn-primary flex-1"
+        :disabled="!canSearch"
+        @click="emit('search')"
+      >
+        <Icon name="lucide:search" size="16" />
+        {{ $t('catalog.quote.search') }}
+      </button>
+      <button
+        v-if="hasAnyFilter"
+        class="btn btn-ghost btn-sm"
+        @click="emit('clear-all')"
+      >
+        {{ $t('catalog.quote.clear') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  productId?: string
+  productLabel?: string
+  hubId?: string
+  hubLabel?: string
+  supplierId?: string
+  supplierLabel?: string
+  quantity?: string
+  canSearch: boolean
+}>()
+
+const emit = defineEmits<{
+  'edit-filter': [type: string]
+  'remove-filter': [type: string]
+  'update-quantity': [value: string]
+  'search': []
+  'clear-all': []
+}>()
+
+const localQuantity = ref(props.quantity || '')
+
+watch(() => props.quantity, (newVal) => {
+  localQuantity.value = newVal || ''
+})
+
+const hasAnyFilter = computed(() => {
+  return !!(props.productId || props.hubId || props.supplierId || props.quantity)
+})
+</script>
diff --git a/app/components/catalog/QuotePanel.vue b/app/components/catalog/QuotePanel.vue
new file mode 100644
index 0000000..516dd7c
--- /dev/null
+++ b/app/components/catalog/QuotePanel.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="flex flex-col gap-4 h-full">
+    <!-- Quote form -->
+    <QuoteForm
+      :product-id="productId"
+      :product-label="productLabel"
+      :hub-id="hubId"
+      :hub-label="hubLabel"
+      :supplier-id="supplierId"
+      :supplier-label="supplierLabel"
+      :quantity="quantity"
+      :can-search="canSearch"
+      @edit-filter="emit('edit-filter', $event)"
+      @remove-filter="emit('remove-filter', $event)"
+      @update-quantity="emit('update-quantity', $event)"
+      @search="emit('search')"
+      @clear-all="emit('clear-all')"
+    />
+
+    <!-- Divider -->
+    <div v-if="showResults" class="divider my-0" />
+
+    <!-- Results section -->
+    <div v-if="showResults" class="flex-1 overflow-y-auto">
+      <div v-if="loading" class="flex items-center justify-center py-8">
+        <span class="loading loading-spinner loading-md" />
+      </div>
+
+      <div v-else-if="offers.length === 0" class="text-center py-8 text-base-content/60">
+        <Icon name="lucide:search-x" size="32" class="mb-2" />
+        <p>{{ $t('catalog.empty.noOffers') }}</p>
+      </div>
+
+      <div v-else class="flex flex-col gap-3">
+        <Text tone="muted" class="text-sm">
+          {{ $t('catalog.headers.offers') }}: {{ offers.length }}
+        </Text>
+        <div
+          v-for="offer in offers"
+          :key="offer.uuid"
+          class="cursor-pointer"
+          @click="emit('select-offer', offer)"
+        >
+          <slot name="offer-card" :offer="offer">
+            <OfferCard :offer="offer" linkable />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Offer {
+  uuid: string
+  [key: string]: any
+}
+
+defineProps<{
+  productId?: string
+  productLabel?: string
+  hubId?: string
+  hubLabel?: string
+  supplierId?: string
+  supplierLabel?: string
+  quantity?: string
+  canSearch: boolean
+  showResults: boolean
+  loading: boolean
+  offers: Offer[]
+}>()
+
+const emit = defineEmits<{
+  'edit-filter': [type: string]
+  'remove-filter': [type: string]
+  'update-quantity': [value: string]
+  'search': []
+  'clear-all': []
+  'select-offer': [offer: Offer]
+}>()
+</script>
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index c89975c..4bbf5b5 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col flex-1 min-h-0">
+  <div class="flex flex-col flex-1 min-h-0 relative">
     <!-- Loading state -->
-    <div v-if="loading" class="flex-1 flex items-center justify-center">
+    <div v-if="loading" class="absolute inset-0 z-50 flex items-center justify-center bg-base-100/80">
       <Card padding="lg">
         <Stack align="center" justify="center" gap="3">
           <Spinner />
@@ -10,241 +10,130 @@
       </Card>
     </div>
 
-    <!-- Content -->
-    <template v-else>
-      <!-- Search bar slot (sticky third bar - like navigation) -->
-      <div v-if="$slots.searchBar" class="sticky z-20 h-16 -mx-3 lg:-mx-6 px-3 lg:px-6 bg-base-200 border-b border-base-300" :style="searchBarStyle">
-        <div class="flex items-center gap-2 h-full">
-          <!-- Expand button - appears when header collapsed -->
+    <!-- Fullscreen Map -->
+    <div class="absolute inset-0">
+      <ClientOnly>
+        <CatalogMap
+          ref="mapRef"
+          :map-id="mapId"
+          :items="useServerClustering ? [] : itemsWithCoords"
+          :clustered-points="useServerClustering ? clusteredNodes : []"
+          :use-server-clustering="useServerClustering"
+          :point-color="pointColor"
+          :hovered-item-id="hoveredId"
+          :hovered-item="hoveredItem"
+          @select-item="onMapSelect"
+          @bounds-change="onBoundsChange"
+        />
+      </ClientOnly>
+    </div>
+
+    <!-- Mode tabs (top left overlay) -->
+    <div class="absolute top-4 left-4 z-20">
+      <div class="tabs tabs-boxed bg-white/95 backdrop-blur shadow-lg">
+        <button
+          class="tab"
+          :class="{ 'tab-active': catalogMode === 'explore' }"
+          @click="setCatalogMode('explore')"
+        >
+          <Icon name="lucide:compass" size="16" class="mr-1" />
+          {{ $t('catalog.modes.explore') }}
+        </button>
+        <button
+          class="tab"
+          :class="{ 'tab-active': catalogMode === 'quote' }"
+          @click="setCatalogMode('quote')"
+        >
+          <Icon name="lucide:search" size="16" class="mr-1" />
+          {{ $t('catalog.modes.quote') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Left overlay panel -->
+    <div
+      class="absolute top-20 left-4 bottom-4 z-10 w-80 max-w-[calc(100vw-2rem)] hidden lg:block"
+    >
+      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
+        <!-- Explore mode panel -->
+        <template v-if="catalogMode === 'explore'">
+          <slot name="explore-panel">
+            <ExplorePanel
+              :selected-item="selectedMapItem"
+              @close-selected="selectedMapItem = null"
+              @view-details="onViewDetails"
+            />
+          </slot>
+        </template>
+
+        <!-- Quote mode panel -->
+        <template v-else>
+          <slot name="quote-panel" />
+        </template>
+      </div>
+    </div>
+
+    <!-- Mobile bottom sheet (simplified) -->
+    <div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
+      <!-- Mobile mode toggle -->
+      <div class="flex justify-center mb-2">
+        <div class="tabs tabs-boxed bg-white/95 backdrop-blur shadow-lg tabs-sm">
           <button
-            v-if="isCollapsed"
-            class="btn btn-ghost btn-sm gap-1 flex-shrink-0"
-            @click="expand"
+            class="tab"
+            :class="{ 'tab-active': catalogMode === 'explore' }"
+            @click="setCatalogMode('explore')"
           >
-            <span class="font-bold text-primary text-lg">O</span>
-            <Icon name="lucide:chevron-up" size="14" />
+            {{ $t('catalog.modes.explore') }}
+          </button>
+          <button
+            class="tab"
+            :class="{ 'tab-active': catalogMode === 'quote' }"
+            @click="setCatalogMode('quote')"
+          >
+            {{ $t('catalog.modes.quote') }}
           </button>
-          <div class="flex-1">
-            <slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
-          </div>
         </div>
       </div>
 
-      <!-- With Map: Split Layout or Full Width Map -->
-      <template v-if="withMap">
-        <!-- Full Width Map Mode (after selection) -->
-        <div v-if="fullWidthMap" class="hidden lg:flex flex-1 min-h-0 py-4">
-          <div class="w-full">
-            <div class="sticky rounded-xl overflow-hidden shadow-lg" :style="mapStyle">
-              <!-- View mode toggle -->
-              <div class="absolute top-4 left-4 z-10">
-                <div class="btn-group shadow-lg bg-white/90 backdrop-blur rounded-lg">
-                  <button
-                    class="btn btn-sm"
-                    :class="{ 'btn-active': mapViewMode === 'offers' }"
-                    @click="setMapViewMode('offers')"
-                  >
-                    {{ $t('catalog.views.offers') }}
-                  </button>
-                  <button
-                    class="btn btn-sm"
-                    :class="{ 'btn-active': mapViewMode === 'hubs' }"
-                    @click="setMapViewMode('hubs')"
-                  >
-                    {{ $t('catalog.views.hubs') }}
-                  </button>
-                  <button
-                    class="btn btn-sm"
-                    :class="{ 'btn-active': mapViewMode === 'suppliers' }"
-                    @click="setMapViewMode('suppliers')"
-                  >
-                    {{ $t('catalog.views.suppliers') }}
-                  </button>
-                </div>
-              </div>
-              <ClientOnly>
-                <CatalogMap
-                  ref="mapRef"
-                  :map-id="mapId"
-                  :items="useServerClustering ? [] : itemsWithCoords"
-                  :clustered-points="useServerClustering ? clusteredNodes : []"
-                  :use-server-clustering="useServerClustering"
-                  :point-color="pointColor"
-                  :hovered-item-id="hoveredId"
-                  :hovered-item="hoveredItem"
-                  @select-item="onMapSelect"
-                  @bounds-change="onBoundsChange"
-                />
-              </ClientOnly>
-            </div>
-          </div>
+      <!-- Mobile panel (collapsible) -->
+      <div
+        class="bg-white/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300"
+        :class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
+      >
+        <!-- Drag handle -->
+        <div
+          class="flex justify-center py-2 cursor-pointer"
+          @click="mobilePanelExpanded = !mobilePanelExpanded"
+        >
+          <div class="w-10 h-1 bg-base-300 rounded-full" />
         </div>
 
-        <!-- Desktop: side-by-side (during selection) -->
-        <div v-else class="hidden lg:flex flex-1 gap-4 min-h-0 py-4">
-          <!-- Left: List (scrollable) -->
-          <div class="w-2/5 overflow-y-auto pr-2">
-            <Stack gap="4">
-              <slot name="header" />
-              <slot name="filters" />
-
-              <div :class="gridClass">
-                <div
-                  v-for="item in displayItems"
-                  :key="item.uuid"
-                  :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
-                  @click="onItemClick(item)"
-                  @mouseenter="emit('update:hoveredId', item.uuid)"
-                  @mouseleave="emit('update:hoveredId', undefined)"
-                >
-                  <slot name="card" :item="item" />
-                </div>
-              </div>
-
-              <slot name="pagination" />
-
-              <Stack v-if="displayItems.length === 0" align="center" gap="2">
-                <slot name="empty">
-                  <Text tone="muted">{{ $t('common.values.not_available') }}</Text>
-                </slot>
-              </Stack>
-            </Stack>
-          </div>
-
-          <!-- Right: Map (sticky, inside content container) -->
-          <div class="w-3/5">
-            <div class="sticky rounded-xl overflow-hidden shadow-lg" :style="mapStyle">
-              <!-- Search with map checkbox -->
-              <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
-                <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
-                <span class="text-sm">{{ $t('catalogMap.searchWithMap') }}</span>
-              </label>
-              <ClientOnly>
-                <CatalogMap
-                  ref="mapRef"
-                  :map-id="mapId"
-                  :items="useServerClustering ? [] : itemsWithCoords"
-                  :clustered-points="useServerClustering ? clusteredNodes : []"
-                  :use-server-clustering="useServerClustering"
-                  :point-color="pointColor"
-                  :hovered-item-id="hoveredId"
-                  :hovered-item="hoveredItem"
-                  @select-item="onMapSelect"
-                  @bounds-change="onBoundsChange"
-                />
-              </ClientOnly>
-            </div>
-          </div>
-        </div>
-
-        <!-- Mobile: toggle between list and map -->
-        <div class="lg:hidden flex-1 flex flex-col min-h-0">
-          <div class="flex-1 overflow-y-auto py-4" v-show="mobileView === 'list'">
-            <Stack gap="4">
-              <slot name="header" />
-              <slot name="filters" />
-
-              <div :class="gridClass">
-                <div
-                  v-for="item in displayItems"
-                  :key="item.uuid"
-                  :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
-                  @click="onItemClick(item)"
-                  @mouseenter="emit('update:hoveredId', item.uuid)"
-                  @mouseleave="emit('update:hoveredId', undefined)"
-                >
-                  <slot name="card" :item="item" />
-                </div>
-              </div>
-
-              <slot name="pagination" />
-
-              <Stack v-if="displayItems.length === 0" align="center" gap="2">
-                <slot name="empty">
-                  <Text tone="muted">{{ $t('common.values.not_available') }}</Text>
-                </slot>
-              </Stack>
-            </Stack>
-          </div>
-
-          <div class="flex-1 relative" v-show="mobileView === 'map'">
-            <!-- Search with map checkbox (mobile) -->
-            <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
-              <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
-              <span class="text-sm">{{ $t('catalogMap.searchWithMap') }}</span>
-            </label>
-            <ClientOnly>
-              <CatalogMap
-                ref="mobileMapRef"
-                :map-id="`${mapId}-mobile`"
-                :items="useServerClustering ? [] : itemsWithCoords"
-                :clustered-points="useServerClustering ? clusteredNodes : []"
-                :use-server-clustering="useServerClustering"
-                :point-color="pointColor"
-                :hovered-item-id="hoveredId"
-                :hovered-item="hoveredItem"
-                @select-item="onMapSelect"
-                @bounds-change="onBoundsChange"
+        <div class="px-4 pb-4 overflow-y-auto" :class="mobilePanelExpanded ? 'h-[calc(60vh-2rem)]' : 'max-h-48'">
+          <!-- Explore mode panel -->
+          <template v-if="catalogMode === 'explore'">
+            <slot name="explore-panel">
+              <ExplorePanel
+                :selected-item="selectedMapItem"
+                @close-selected="selectedMapItem = null"
+                @view-details="onViewDetails"
               />
-            </ClientOnly>
-          </div>
-
-          <!-- Mobile toggle -->
-          <div class="fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
-            <div class="btn-group shadow-lg">
-              <button
-                class="btn btn-sm"
-                :class="{ 'btn-active': mobileView === 'list' }"
-                @click="mobileView = 'list'"
-              >
-                {{ $t('common.list') }}
-              </button>
-              <button
-                class="btn btn-sm"
-                :class="{ 'btn-active': mobileView === 'map' }"
-                @click="mobileView = 'map'"
-              >
-                {{ $t('common.map') }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <!-- Without Map: Simple List -->
-      <div v-else class="flex-1 overflow-y-auto py-4">
-        <Stack gap="4">
-          <slot name="header" />
-          <slot name="filters" />
-
-          <div :class="gridClass">
-            <div
-              v-for="item in items"
-              :key="item.uuid"
-              @click="onItemClick(item)"
-            >
-              <slot name="card" :item="item" />
-            </div>
-          </div>
-
-          <slot name="pagination" />
-
-          <Stack v-if="items.length === 0" align="center" gap="2">
-            <slot name="empty">
-              <Text tone="muted">{{ $t('common.values.not_available') }}</Text>
             </slot>
-          </Stack>
-        </Stack>
+          </template>
+
+          <!-- Quote mode panel -->
+          <template v-else>
+            <slot name="quote-panel" />
+          </template>
+        </div>
       </div>
-    </template>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
 
-// Map view mode for full width map
-const { mapViewMode, setMapViewMode } = useCatalogSearch()
+const { mapViewMode, catalogMode, setCatalogMode } = useCatalogSearch()
 
 interface MapItem {
   uuid: string
@@ -256,62 +145,25 @@ interface MapItem {
 }
 
 const props = withDefaults(defineProps<{
-  items: MapItem[]
-  mapItems?: MapItem[]  // Optional separate items for map (if different from list items)
   loading?: boolean
-  withMap?: boolean
-  fullWidthMap?: boolean  // Map takes full width (no grid), used after filter selection
-  useServerClustering?: boolean  // Use server-side h3 clustering for ALL points
-  clusterNodeType?: string  // Node type for clustering: 'logistics' | 'offer' | 'supplier'
+  useServerClustering?: boolean
+  clusterNodeType?: string
   mapId?: string
   pointColor?: string
-  selectedId?: string
   hoveredId?: string
-  hasSubNav?: boolean
-  totalCount?: number  // Total count for search bar counter (can differ from items.length with pagination)
-  gridColumns?: number  // Number of columns for card grid (1 = stack, 2/3 = grid)
+  items?: MapItem[]
 }>(), {
   loading: false,
-  withMap: true,
-  fullWidthMap: false,
-  useServerClustering: false,
-  clusterNodeType: 'logistics',
+  useServerClustering: true,
+  clusterNodeType: 'offer',
   mapId: 'catalog-map',
-  pointColor: '#3b82f6',
-  hasSubNav: true,
-  totalCount: 0,
-  gridColumns: 1
+  pointColor: '#f97316',
+  items: () => []
 })
 
-// Grid class based on gridColumns prop
-const gridClass = computed(() => {
-  if (props.gridColumns === 1) return 'flex flex-col gap-3'
-  if (props.gridColumns === 2) return 'grid grid-cols-2 gap-3'
-  if (props.gridColumns === 3) return 'grid grid-cols-3 gap-3'
-  return 'flex flex-col gap-3'
-})
-
-// Smooth scroll collapse - pixel values for smooth animation
-// MainNav: 64px, SubNav: 54px, Header total: 118px, SearchBar: 64px
-const { searchBarTop, mapTop, isCollapsed, expand } = useScrollCollapse(118, 64)
-
-const slots = useSlots()
-const hasSearchBar = computed(() => !!slots.searchBar)
-
-// SearchBar style - smooth pixel positioning
-const searchBarStyle = computed(() => ({
-  top: `${searchBarTop.value}px`
-}))
-
-// Map style - smooth pixel positioning with bottom padding
-const mapStyle = computed(() => ({
-  top: hasSearchBar.value ? `${mapTop.value}px` : `${searchBarTop.value}px`,
-  height: `calc(100vh - ${hasSearchBar.value ? mapTop.value : searchBarTop.value}px - 16px)`
-}))
-
 const emit = defineEmits<{
   'select': [item: MapItem]
-  'update:selectedId': [uuid: string]
+  'bounds-change': [bounds: MapBounds]
   'update:hoveredId': [uuid: string | undefined]
 }>()
 
@@ -319,28 +171,14 @@ const emit = defineEmits<{
 const nodeTypeRef = computed(() => props.clusterNodeType)
 const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, nodeTypeRef)
 
-// Search with map checkbox
-const searchWithMap = ref(false)
-const currentBounds = ref<MapBounds | null>(null)
+// Map refs
+const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
 
-const onBoundsChange = (bounds: MapBounds) => {
-  currentBounds.value = bounds
-  if (props.useServerClustering) {
-    fetchClusters(bounds)
-  }
-}
+// Selected item from map click
+const selectedMapItem = ref<MapItem | null>(null)
 
-// Filtered items when searchWithMap is enabled
-const displayItems = computed(() => {
-  if (!searchWithMap.value || !currentBounds.value) return props.items
-  return props.items.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
-  })
-})
+// Mobile panel state
+const mobilePanelExpanded = ref(false)
 
 // Hovered item with coordinates for map highlight
 const hoveredItem = computed(() => {
@@ -350,12 +188,9 @@ const hoveredItem = computed(() => {
   return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
 })
 
-// Use mapItems if provided, otherwise fall back to items
-const itemsForMap = computed(() => props.mapItems || props.items)
-
 // Filter items with valid coordinates for map (client-side mode only)
 const itemsWithCoords = computed(() =>
-  itemsForMap.value.filter(item =>
+  props.items.filter(item =>
     item.latitude != null &&
     item.longitude != null &&
     !isNaN(Number(item.latitude)) &&
@@ -365,27 +200,14 @@ const itemsWithCoords = computed(() =>
     name: item.name || '',
     latitude: Number(item.latitude),
     longitude: Number(item.longitude),
-    country: item.country,
-    orderUuid: item.orderUuid  // Preserve orderUuid for hover matching
+    country: item.country
   }))
 )
 
-// Mobile view toggle
-const mobileView = ref<'list' | 'map'>('list')
-
-// Map refs
-const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-const mobileMapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-
-// Handle item click from list
-const onItemClick = (item: MapItem) => {
-  emit('select', item)
-  emit('update:selectedId', item.uuid)
-
-  // Fly to item on map
-  if (props.withMap && item.latitude && item.longitude) {
-    mapRef.value?.flyTo(Number(item.latitude), Number(item.longitude), 8)
-    mobileMapRef.value?.flyTo(Number(item.latitude), Number(item.longitude), 8)
+const onBoundsChange = (bounds: MapBounds) => {
+  emit('bounds-change', bounds)
+  if (props.useServerClustering) {
+    fetchClusters(bounds)
   }
 }
 
@@ -393,32 +215,23 @@ const onItemClick = (item: MapItem) => {
 const onMapSelect = (uuid: string) => {
   const item = props.items.find(i => i.uuid === uuid)
   if (item) {
+    selectedMapItem.value = item
     emit('select', item)
-    emit('update:selectedId', uuid)
   } else if (props.useServerClustering) {
-    // For server clustering, item might not be in paginated props.items
-    // Emit minimal item with just uuid so parent can still navigate
+    // For server clustering, item might not be in props.items
+    // Create minimal item with just uuid
+    selectedMapItem.value = { uuid }
     emit('select', { uuid })
-    emit('update:selectedId', uuid)
   }
 }
 
-// Watch selectedId and fly to it
-watch(() => props.selectedId, (uuid) => {
-  if (uuid && props.withMap) {
-    const item = itemsWithCoords.value.find(i => i.uuid === uuid)
-    if (item) {
-      mapRef.value?.flyTo(item.latitude, item.longitude, 8)
-      mobileMapRef.value?.flyTo(item.latitude, item.longitude, 8)
-    }
-  }
-})
-
+const onViewDetails = (item: MapItem) => {
+  emit('select', item)
+}
 
 // Expose flyTo for external use
 const flyTo = (lat: number, lng: number, zoom = 8) => {
   mapRef.value?.flyTo(lat, lng, zoom)
-  mobileMapRef.value?.flyTo(lat, lng, zoom)
 }
 
 defineExpose({ flyTo })
diff --git a/app/composables/useCatalogSearch.ts b/app/composables/useCatalogSearch.ts
index b81b930..97dea50 100644
--- a/app/composables/useCatalogSearch.ts
+++ b/app/composables/useCatalogSearch.ts
@@ -2,6 +2,7 @@ import type { LocationQuery } from 'vue-router'
 
 export type SelectMode = 'product' | 'supplier' | 'hub' | null
 export type MapViewMode = 'offers' | 'hubs' | 'suppliers'
+export type CatalogMode = 'explore' | 'quote'
 export type DisplayMode =
   | 'map-default'
   | 'grid-products'
@@ -228,10 +229,25 @@ export function useCatalogSearch() {
     mapViewCookie.value = mode
   }
 
+  // Catalog mode: explore (map browsing) or quote (search for offers)
+  const catalogMode = computed<CatalogMode>(() => {
+    return route.query.mode === 'quote' ? 'quote' : 'explore'
+  })
+
+  const setCatalogMode = (newMode: CatalogMode) => {
+    updateQuery({ mode: newMode === 'explore' ? null : newMode })
+  }
+
+  // Can search for offers (product + hub or product + supplier required)
+  const canSearch = computed(() => {
+    return !!(productId.value && (hubId.value || supplierId.value))
+  })
+
   return {
     // State
     selectMode,
     displayMode,
+    catalogMode,
     productId,
     supplierId,
     hubId,
@@ -245,6 +261,7 @@ export function useCatalogSearch() {
     // Computed
     activeTokens,
     availableChips,
+    canSearch,
 
     // Actions
     startSelect,
@@ -255,6 +272,7 @@ export function useCatalogSearch() {
     clearAll,
     setLabel,
     setMapViewMode,
+    setCatalogMode,
 
     // Labels cache
     filterLabels
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index 0872225..48fbff2 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -1,69 +1,102 @@
 <template>
   <CatalogPage
-    :items="currentItems"
     :loading="isLoading"
-    :total-count="currentItems.length"
-    :grid-columns="3"
-    :with-map="showMap"
-    :full-width-map="fullWidthMap"
-    :use-server-clustering="useServerClustering"
+    :use-server-clustering="true"
     :cluster-node-type="clusterNodeType"
     map-id="unified-catalog-map"
     :point-color="mapPointColor"
-    :hovered-id="hoveredId"
+    :items="[]"
     @select="onMapSelect"
-    @update:hovered-id="hoveredId = $event"
   >
-    <template #header>
-      <Text v-if="!isLoading" tone="muted">{{ headerText }}</Text>
-    </template>
-
-    <template #card="{ item }">
-      <!-- Product card -->
-      <ProductCard
-        v-if="cardType === 'product'"
-        :product="item"
-        selectable
-        :is-selected="item.uuid === hoveredId"
-        @select="onSelectProduct({ uuid: item.uuid, name: item.name })"
-        @hover="(h: boolean) => hoveredId = h ? item.uuid : undefined"
+    <!-- Quote panel slot -->
+    <template #quote-panel>
+      <QuotePanel
+        :product-id="productId"
+        :product-label="getFilterLabel('product', productId)"
+        :hub-id="hubId"
+        :hub-label="getFilterLabel('hub', hubId)"
+        :supplier-id="supplierId"
+        :supplier-label="getFilterLabel('supplier', supplierId)"
+        :quantity="quantity"
+        :can-search="canSearch"
+        :show-results="showQuoteResults"
+        :loading="offersLoading"
+        :offers="offers"
+        @edit-filter="onEditFilter"
+        @remove-filter="onRemoveFilter"
+        @update-quantity="onUpdateQuantity"
+        @search="onSearch"
+        @clear-all="onClearAll"
+        @select-offer="onSelectOffer"
       />
-
-      <!-- Supplier card -->
-      <SupplierCard
-        v-else-if="cardType === 'supplier'"
-        :supplier="item"
-        selectable
-        :is-selected="item.uuid === hoveredId"
-        @select="onSelectSupplier({ uuid: item.uuid || item.teamUuid, name: item.name })"
-      />
-
-      <!-- Hub card -->
-      <HubCard
-        v-else-if="cardType === 'hub'"
-        :hub="item"
-        selectable
-        :is-selected="item.uuid === hoveredId"
-        @select="onSelectHub({ uuid: item.uuid, name: item.name })"
-        @hover="(h: boolean) => hoveredId = h ? item.uuid : undefined"
-      />
-
-      <!-- Offer card -->
-      <OfferCard
-        v-else-if="cardType === 'offer'"
-        :offer="item"
-        linkable
-      />
-    </template>
-
-    <template #empty>
-      <Text v-if="displayMode !== 'map-default'" tone="muted">{{ t('catalog.empty.noResults') }}</Text>
     </template>
   </CatalogPage>
+
+  <!-- Product selection modal -->
+  <dialog ref="productModalRef" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box max-w-2xl max-h-[80vh]">
+      <h3 class="font-bold text-lg mb-4">{{ t('catalog.quote.selectProduct') }}</h3>
+      <div class="overflow-y-auto max-h-[60vh]">
+        <div v-if="productsLoading" class="flex justify-center py-8">
+          <span class="loading loading-spinner loading-md" />
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <button
+            v-for="product in products"
+            :key="product.uuid"
+            class="btn btn-ghost justify-start"
+            @click="selectProduct(product)"
+          >
+            <Icon name="lucide:package" size="16" />
+            {{ product.name }}
+          </button>
+        </div>
+      </div>
+      <div class="modal-action">
+        <form method="dialog">
+          <button class="btn">{{ t('common.cancel') }}</button>
+        </form>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+
+  <!-- Hub selection modal -->
+  <dialog ref="hubModalRef" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box max-w-2xl max-h-[80vh]">
+      <h3 class="font-bold text-lg mb-4">{{ t('catalog.quote.selectHub') }}</h3>
+      <div class="overflow-y-auto max-h-[60vh]">
+        <div v-if="hubsLoading" class="flex justify-center py-8">
+          <span class="loading loading-spinner loading-md" />
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <button
+            v-for="hub in hubs"
+            :key="hub.uuid"
+            class="btn btn-ghost justify-start"
+            @click="selectHub(hub)"
+          >
+            <Icon name="lucide:map-pin" size="16" />
+            {{ hub.name }}
+            <span v-if="hub.country" class="text-base-content/60 text-sm ml-auto">{{ hub.country }}</span>
+          </button>
+        </div>
+      </div>
+      <div class="modal-action">
+        <form method="dialog">
+          <button class="btn">{{ t('common.cancel') }}</button>
+        </form>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
 </template>
 
 <script setup lang="ts">
-import { GetProductsDocument } from '~/composables/graphql/public/geo-generated'
 import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
 
 definePageMeta({
@@ -72,331 +105,169 @@ definePageMeta({
 
 const { t } = useI18n()
 const { execute } = useGraphQL()
+const router = useRouter()
+const localePath = useLocalePath()
 
 const {
-  selectMode,
-  displayMode,
+  catalogMode,
   productId,
   supplierId,
   hubId,
-  searchQuery,
-  activeTokens,
-  availableChips,
-  startSelect,
-  cancelSelect,
+  quantity,
+  canSearch,
+  mapViewMode,
+  entityColors,
   selectItem,
   removeFilter,
-  editFilter,
+  clearAll,
   setLabel,
-  mapViewMode,
-  entityColors
+  filterLabels
 } = useCatalogSearch()
 
 // Composables for data
 const { items: products, isLoading: productsLoading, init: initProducts } = useCatalogProducts()
-const { items: suppliers, isLoading: suppliersLoading, init: initSuppliers } = useCatalogSuppliers()
 const { items: hubs, isLoading: hubsLoading, init: initHubs } = useCatalogHubs()
 
-// Local state for specific queries
-const hubsForProduct = ref<any[]>([])
-const productsFromSupplier = ref<any[]>([])
-const productsInHub = ref<any[]>([])
+// Modal refs
+const productModalRef = ref<HTMLDialogElement | null>(null)
+const hubModalRef = ref<HTMLDialogElement | null>(null)
+
+// Offers data for quote results
 const offers = ref<any[]>([])
-const specificLoading = ref(false)
+const offersLoading = ref(false)
+const showQuoteResults = ref(false)
 
-const hoveredId = ref<string>()
+// Loading state
+const isLoading = computed(() => offersLoading.value)
 
-// Determine what to show
-const cardType = computed(() => {
-  switch (displayMode.value) {
-    case 'grid-products':
-    case 'grid-products-from-supplier':
-    case 'grid-products-in-hub':
-      return 'product'
-    case 'grid-suppliers':
-      return 'supplier'
-    case 'grid-hubs':
-    case 'grid-hubs-for-product':
-      return 'hub'
-    case 'grid-offers':
-      return 'offer'
-    default:
-      return 'product'
-  }
-})
-
-// Always show map on /catalog
-const showMap = computed(() => true)
-
-// Full width map when not in select mode (after filter is selected or default map view)
-// selectMode is active = grid + map, after selection or default = only map
-const fullWidthMap = computed(() => !selectMode.value)
-
-// Use server clustering for grids that need it
-const useServerClustering = computed(() => {
-  // Products grid - show offers clusters
-  // Hubs grid - show hubs clusters
-  // Offers grid - show offer clusters
-  // Default map - show all offers clusters
-  return ['map-default', 'grid-products', 'grid-hubs', 'grid-offers', 'grid-products-from-supplier', 'grid-products-in-hub'].includes(displayMode.value)
-})
-
-const clusterNodeType = computed(() => {
-  // When in full width map mode, use mapViewMode preference
-  if (!selectMode.value) {
-    if (mapViewMode.value === 'offers') return 'offer'
-    if (mapViewMode.value === 'hubs') return 'logistics'
-    if (mapViewMode.value === 'suppliers') return 'supplier'
-  }
-  // For products/offers/default map show offer locations
-  if (['map-default', 'grid-products', 'grid-offers', 'grid-products-from-supplier', 'grid-products-in-hub'].includes(displayMode.value)) {
-    return 'offer'
-  }
-  // For hubs show logistics nodes
-  return 'logistics'
-})
-
-const mapPointColor = computed(() => {
-  // When in full width map mode, use mapViewMode preference
-  if (!selectMode.value) {
-    if (mapViewMode.value === 'offers') return entityColors.offer // orange
-    if (mapViewMode.value === 'hubs') return entityColors.hub // green
-    if (mapViewMode.value === 'suppliers') return entityColors.supplier // blue
-  }
-  if (cardType.value === 'supplier') return entityColors.supplier // blue
-  if (cardType.value === 'hub') return entityColors.hub // green
-  if (cardType.value === 'offer') return entityColors.offer // orange
-  return entityColors.product // orange
-})
-
-const headerText = computed(() => {
-  switch (displayMode.value) {
-    case 'grid-products': return t('catalog.headers.selectProduct')
-    case 'grid-suppliers': return t('catalog.headers.selectSupplier')
-    case 'grid-hubs': return t('catalog.headers.selectHub')
-    case 'grid-hubs-for-product': return t('catalog.headers.hubsForProduct')
-    case 'grid-products-from-supplier': return t('catalog.headers.productsFromSupplier')
-    case 'grid-products-in-hub': return t('catalog.headers.productsInHub')
-    case 'grid-offers': return t('catalog.headers.offers')
-    default: return ''
-  }
-})
-
-const isLoading = computed(() => {
-  if (specificLoading.value) return true
-  switch (displayMode.value) {
-    case 'grid-products': return productsLoading.value
-    case 'grid-suppliers': return suppliersLoading.value
-    case 'grid-hubs': return hubsLoading.value
-    default: return false
-  }
-})
-
-// Filter items by search query
-const filterBySearch = (items: any[]) => {
-  if (!searchQuery.value.trim()) return items
-  const q = searchQuery.value.toLowerCase()
-  return items.filter(item =>
-    item.name?.toLowerCase().includes(q) ||
-    item.productName?.toLowerCase().includes(q) ||
-    item.teamName?.toLowerCase().includes(q) ||
-    item.locationName?.toLowerCase().includes(q) ||
-    item.country?.toLowerCase().includes(q)
-  )
+// Get filter label from cache
+const getFilterLabel = (type: string, id: string | undefined): string | undefined => {
+  if (!id) return undefined
+  return filterLabels.value[type]?.[id]
 }
 
-const currentItems = computed(() => {
-  let items: any[] = []
-
-  switch (displayMode.value) {
-    case 'grid-products':
-      items = products.value
-      break
-    case 'grid-suppliers':
-      items = suppliers.value
-      break
-    case 'grid-hubs':
-      items = hubs.value
-      break
-    case 'grid-hubs-for-product':
-      items = hubsForProduct.value
-      break
-    case 'grid-products-from-supplier':
-      items = productsFromSupplier.value
-      break
-    case 'grid-products-in-hub':
-      items = productsInHub.value
-      break
-    case 'grid-offers':
-      items = offers.value
-      break
-    case 'map-default':
-    default:
-      items = []
-  }
-
-  return filterBySearch(items)
+// Cluster node type based on map view mode
+const clusterNodeType = computed(() => {
+  if (mapViewMode.value === 'offers') return 'offer'
+  if (mapViewMode.value === 'hubs') return 'logistics'
+  if (mapViewMode.value === 'suppliers') return 'supplier'
+  return 'offer'
 })
 
-// Fetch data based on displayMode
-const fetchSpecificData = async () => {
-  specificLoading.value = true
+// Map point color based on map view mode
+const mapPointColor = computed(() => {
+  if (mapViewMode.value === 'offers') return entityColors.offer
+  if (mapViewMode.value === 'hubs') return entityColors.hub
+  if (mapViewMode.value === 'suppliers') return entityColors.supplier
+  return entityColors.offer
+})
+
+// Handle map item selection
+const onMapSelect = (item: any) => {
+  // Navigate to offer detail page if in quote mode with results
+  if (catalogMode.value === 'quote' && item.uuid) {
+    // Could navigate to offer detail
+    console.log('Selected from map:', item)
+  }
+}
+
+// Edit filter - open modal
+const onEditFilter = async (type: string) => {
+  if (type === 'product') {
+    await initProducts()
+    productModalRef.value?.showModal()
+  } else if (type === 'hub') {
+    await initHubs()
+    hubModalRef.value?.showModal()
+  }
+}
+
+// Remove filter
+const onRemoveFilter = (type: string) => {
+  removeFilter(type)
+  showQuoteResults.value = false
+  offers.value = []
+}
+
+// Update quantity
+const onUpdateQuantity = (value: string) => {
+  // Store in URL
+  const route = useRoute()
+  const newQuery = { ...route.query }
+  if (value) {
+    newQuery.qty = value
+  } else {
+    delete newQuery.qty
+  }
+  router.push({ query: newQuery })
+}
+
+// Select product from modal
+const selectProduct = (product: any) => {
+  selectItem('product', product.uuid, product.name)
+  productModalRef.value?.close()
+  showQuoteResults.value = false
+  offers.value = []
+}
+
+// Select hub from modal
+const selectHub = (hub: any) => {
+  selectItem('hub', hub.uuid, hub.name)
+  hubModalRef.value?.close()
+  showQuoteResults.value = false
+  offers.value = []
+}
+
+// Search for offers
+const onSearch = async () => {
+  if (!canSearch.value) return
+
+  offersLoading.value = true
+  showQuoteResults.value = true
+
   try {
-    if (displayMode.value === 'grid-hubs-for-product' && productId.value) {
-      // Get hubs for product via offers
-      const data = await execute(
-        GetOffersDocument,
-        { productUuid: productId.value },
-        'public',
-        'exchange'
-      )
-      const offersData = data?.getOffers || []
+    const vars: any = {}
+    if (productId.value) vars.productUuid = productId.value
+    if (supplierId.value) vars.teamUuid = supplierId.value
+    if (hubId.value) vars.locationUuid = hubId.value
 
-      // Set product name from first offer
-      if (offersData.length > 0 && offersData[0].productName) {
-        setLabel('product', productId.value, offersData[0].productName)
+    const data = await execute(GetOffersDocument, vars, 'public', 'exchange')
+    offers.value = data?.getOffers || []
+
+    // Update labels from response
+    if (offers.value.length > 0) {
+      const first = offers.value[0]
+      if (productId.value && first.productName) {
+        setLabel('product', productId.value, first.productName)
       }
-
-      // Extract unique hubs
-      const hubsMap = new Map<string, any>()
-      offersData.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
-          })
-        }
-      })
-      hubsForProduct.value = Array.from(hubsMap.values())
-    }
-
-    if (displayMode.value === 'grid-products-from-supplier' && supplierId.value) {
-      const data = await execute(
-        GetOffersDocument,
-        { teamUuid: supplierId.value },
-        'public',
-        'exchange'
-      )
-      const offersData = data?.getOffers || []
-
-      // Set supplier name
-      if (offersData.length > 0 && offersData[0].teamName) {
-        setLabel('supplier', supplierId.value, offersData[0].teamName)
+      if (hubId.value && first.locationName) {
+        setLabel('hub', hubId.value, first.locationName)
       }
-
-      // Extract unique products
-      const productsMap = new Map<string, any>()
-      offersData.forEach((offer: any) => {
-        if (offer.productUuid && !productsMap.has(offer.productUuid)) {
-          productsMap.set(offer.productUuid, {
-            uuid: offer.productUuid,
-            name: offer.productName,
-            categoryName: offer.categoryName
-          })
-        }
-      })
-      productsFromSupplier.value = Array.from(productsMap.values())
-    }
-
-    if (displayMode.value === 'grid-products-in-hub' && hubId.value) {
-      const data = await execute(
-        GetOffersDocument,
-        { locationUuid: hubId.value },
-        'public',
-        'exchange'
-      )
-      const offersData = data?.getOffers || []
-
-      // Set hub name
-      if (offersData.length > 0 && offersData[0].locationName) {
-        setLabel('hub', hubId.value, offersData[0].locationName)
+      if (supplierId.value && first.teamName) {
+        setLabel('supplier', supplierId.value, first.teamName)
       }
-
-      // Extract unique products
-      const productsMap = new Map<string, any>()
-      offersData.forEach((offer: any) => {
-        if (offer.productUuid && !productsMap.has(offer.productUuid)) {
-          productsMap.set(offer.productUuid, {
-            uuid: offer.productUuid,
-            name: offer.productName,
-            categoryName: offer.categoryName
-          })
-        }
-      })
-      productsInHub.value = Array.from(productsMap.values())
-    }
-
-    if (displayMode.value === 'grid-offers') {
-      const vars: any = {}
-      if (productId.value) vars.productUuid = productId.value
-      if (supplierId.value) vars.teamUuid = supplierId.value
-      if (hubId.value) vars.locationUuid = hubId.value
-
-      const data = await execute(GetOffersDocument, vars, 'public', 'exchange')
-      offers.value = data?.getOffers || []
     }
   } finally {
-    specificLoading.value = false
+    offersLoading.value = false
   }
 }
 
-// Initialize base data
-const initBaseData = async () => {
-  if (displayMode.value === 'grid-products') await initProducts()
-  if (displayMode.value === 'grid-suppliers') await initSuppliers()
-  if (displayMode.value === 'grid-hubs') await initHubs()
+// Clear all filters
+const onClearAll = () => {
+  clearAll()
+  showQuoteResults.value = false
+  offers.value = []
 }
 
-// Watch displayMode and fetch appropriate data
-watch(displayMode, async (mode) => {
-  if (['grid-products', 'grid-suppliers', 'grid-hubs'].includes(mode)) {
-    await initBaseData()
-  } else if (['grid-hubs-for-product', 'grid-products-from-supplier', 'grid-products-in-hub', 'grid-offers'].includes(mode)) {
-    await fetchSpecificData()
-  }
-}, { immediate: true })
-
-// 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)
-}
-
-const onMapSelect = (item: any) => {
-  if (cardType.value === 'product') {
-    onSelectProduct({ uuid: item.uuid, name: item.name })
-  } else if (cardType.value === 'supplier') {
-    onSelectSupplier({ uuid: item.uuid || item.teamUuid, name: item.name })
-  } else if (cardType.value === 'hub') {
-    onSelectHub({ uuid: item.uuid, name: item.name })
+// Select offer - navigate to detail page
+const onSelectOffer = (offer: any) => {
+  if (offer.uuid && offer.productUuid) {
+    router.push(localePath(`/catalog/offers/${offer.productUuid}?offer=${offer.uuid}`))
   }
 }
 
 // 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 }
-})
+useHead(() => ({
+  title: t('catalog.hero.title')
+}))
 </script>
diff --git a/i18n/locales/en/catalog.json b/i18n/locales/en/catalog.json
index 18eacb8..6d1da01 100644
--- a/i18n/locales/en/catalog.json
+++ b/i18n/locales/en/catalog.json
@@ -40,6 +40,23 @@
       "offers": "Offers",
       "map": "Map"
     },
+    "modes": {
+      "explore": "Explore",
+      "quote": "Get Quote"
+    },
+    "quote": {
+      "title": "Get Quote",
+      "selectProduct": "Select product",
+      "selectHub": "Select hub",
+      "selectSupplier": "Select supplier",
+      "enterQty": "Quantity (t)",
+      "search": "Search",
+      "clear": "Clear"
+    },
+    "explore": {
+      "title": "Explore the market",
+      "subtitle": "Switch between offers, hubs, and suppliers"
+    },
     "offers": "offer | offers"
   }
 }
diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
index b51e7b4..ea0ebf5 100644
--- a/i18n/locales/en/common.json
+++ b/i18n/locales/en/common.json
@@ -18,6 +18,7 @@
     "success": "Success",
     "retry": "Retry",
     "back": "Back",
+    "viewDetails": "View details",
     "list": "List",
     "map": "Map",
     "language": "Language",
diff --git a/i18n/locales/ru/catalog.json b/i18n/locales/ru/catalog.json
index 5909925..a7b0841 100644
--- a/i18n/locales/ru/catalog.json
+++ b/i18n/locales/ru/catalog.json
@@ -40,6 +40,23 @@
       "offers": "Офферы",
       "map": "Карта"
     },
+    "modes": {
+      "explore": "Исследовать",
+      "quote": "Найти офферы"
+    },
+    "quote": {
+      "title": "Найти офферы",
+      "selectProduct": "Выберите товар",
+      "selectHub": "Выберите хаб",
+      "selectSupplier": "Выберите поставщика",
+      "enterQty": "Количество (т)",
+      "search": "Найти",
+      "clear": "Очистить"
+    },
+    "explore": {
+      "title": "Исследуйте рынок",
+      "subtitle": "Переключайтесь между офферами, хабами и поставщиками"
+    },
     "offers": "предложение | предложения | предложений"
   }
 }
diff --git a/i18n/locales/ru/common.json b/i18n/locales/ru/common.json
index 7fb1d9c..3139a38 100644
--- a/i18n/locales/ru/common.json
+++ b/i18n/locales/ru/common.json
@@ -18,6 +18,7 @@
     "success": "Успех",
     "retry": "Повторить",
     "back": "Назад",
+    "viewDetails": "Подробнее",
     "list": "Список",
     "map": "Карта",
     "language": "Язык",