feat(catalog): implement step-by-step navigation for offers and suppliers

- Transform offers/index.vue to show products list with sparkline charts
- Create nested routes for offers: /offers → /offers/[productId] → /offers/[productId]/[hubId]
- Create nested routes for suppliers: /suppliers → /suppliers/[supplierId] → /suppliers/[supplierId]/[productId] → /suppliers/[supplierId]/[productId]/[hubId]
- Add OffersBreadcrumbs and SuppliersBreadcrumbs components for navigation
- Update HubCard to accept custom linkTo prop
- Key difference: Suppliers calculation uses FindRoutes (single source), Offers uses FindProductRoutes (all sources)

app/pages/catalog/offers/index.vue

@@ -1,179 +1,79 @@
 <template>
-  <CatalogPage
-    :items="displayItems"
-    :map-items="itemsWithCoords"
-    :loading="isLoading || productsLoading"
-    with-map
-    map-id="offers-map"
-    point-color="#f59e0b"
-    :selected-id="selectedOfferId"
-    :hovered-id="hoveredOfferId"
-    :total-count="total"
-    @select="onSelectOffer"
-    @update:hovered-id="hoveredOfferId = $event"
-  >
-    <template #searchBar="{ displayedCount, totalCount }">
-      <CatalogSearchBar
-        v-model:search-query="searchQuery"
-        :active-filters="activeFilterBadges"
-        :displayed-count="displayedCount"
-        :total-count="totalCount"
-        @remove-filter="onRemoveFilter"
-        @search="onSearch"
-      >
-        <template #filters>
-          <div class="p-2 space-y-3">
-            <div>
-              <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogOffersSection.filters.product') }}</div>
-              <ul class="menu menu-compact max-h-48 overflow-y-auto">
-                <li v-for="filter in productFilters" :key="filter.id">
-                  <a
-                    :class="{ 'active': (selectedProductUuid === filter.id || (!selectedProductUuid && filter.id === 'all')) }"
-                    @click="onProductFilterChange(filter.id)"
-                  >{{ filter.label }}</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </template>
-      </CatalogSearchBar>
-    </template>
+  <Stack gap="0">
+    <!-- Loading -->
+    <Section v-if="isLoading" variant="plain" paddingY="lg">
+      <Stack align="center" justify="center" gap="4">
+        <Spinner />
+        <Text tone="muted">{{ t('catalogProducts.states.loading') }}</Text>
+      </Stack>
+    </Section>
 
-    <template #card="{ item }">
-      <OfferCard :offer="item" />
-    </template>
+    <!-- Empty -->
+    <Section v-else-if="products.length === 0" variant="plain" paddingY="lg">
+      <Card padding="lg">
+        <Stack align="center" gap="4">
+          <IconCircle tone="primary">
+            <Icon name="lucide:package" size="24" />
+          </IconCircle>
+          <Heading :level="2">{{ t('catalogProducts.empty.title') }}</Heading>
+          <Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
+        </Stack>
+      </Card>
+    </Section>
 
-    <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>
+    <!-- Content -->
+    <Section v-else variant="plain" paddingY="lg">
+      <Stack gap="4">
+        <!-- Header -->
+        <div>
+          <Heading :level="1">{{ t('catalogProducts.header.title') }}</Heading>
+          <Text tone="muted" size="sm">{{ t('catalogProducts.header.subtitle', { count: products.length }) }}</Text>
+        </div>
 
-    <template #empty>
-      <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
-    </template>
-  </CatalogPage>
+        <!-- Products grid -->
+        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+          <HubProductCard
+            v-for="product in products"
+            :key="product.uuid"
+            :name="product.name || ''"
+            :price-history="getMockPriceHistory(product.uuid)"
+            @select="goToProduct(product.uuid)"
+          />
+        </div>
+      </Stack>
+    </Section>
+  </Stack>
 </template>
 
 <script setup lang="ts">
-import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
-
 definePageMeta({
   layout: 'topnav'
 })
 
+const localePath = useLocalePath()
 const { t } = useI18n()
 
-// Products for filter
-const {
-  items: products,
-  isLoading: productsLoading,
-  init: initProducts
-} = useCatalogProducts()
+const { items: products, isLoading, init } = useCatalogProducts()
 
-// Offers
-const {
-  items,
-  total,
-  selectedProductUuid,
-  isLoading,
-  isLoadingMore,
-  canLoadMore,
-  loadMore,
-  init: initOffers,
-  setProductUuid
-} = useCatalogOffers()
+// Navigate to product detail
+const goToProduct = (productId: string) => {
+  navigateTo(localePath(`/catalog/offers/${productId}`))
+}
 
-// Selected/hovered offer for map highlighting
-const selectedOfferId = ref<string>()
-const hoveredOfferId = ref<string>()
-
-// Search bar
-const searchQuery = ref('')
-
-// Search with map checkbox
-const searchWithMap = ref(false)
-const currentBounds = ref<MapBounds | null>(null)
-
-// Map items with correct coordinate field names
-const itemsWithCoords = computed(() =>
-  items.value.filter(item =>
-    item.locationLatitude != null &&
-    item.locationLongitude != null &&
-    !isNaN(Number(item.locationLatitude)) &&
-    !isNaN(Number(item.locationLongitude))
-  ).map(item => ({
-    uuid: item.uuid,
-    name: item.productName || '',
-    latitude: Number(item.locationLatitude),
-    longitude: Number(item.locationLongitude)
-  }))
-)
-
-// Filtered items when searchWithMap is enabled
-const displayItems = computed(() => {
-  if (!searchWithMap.value || !currentBounds.value) return items.value
-  return items.value.filter(item => {
-    if (item.locationLatitude == null || item.locationLongitude == null) return false
-    const { west, east, north, south } = currentBounds.value!
-    const lng = Number(item.locationLongitude)
-    const lat = Number(item.locationLatitude)
-    return lng >= west && lng <= east && lat >= south && lat <= north
+// 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)
   })
-})
-
-// Product filter options
-const productFilters = computed(() => {
-  const all = [{ id: 'all', label: t('catalogOffersSection.filters.all_products') }]
-  const productOptions = products.value.map(p => ({
-    id: p.uuid,
-    label: p.name
-  }))
-  return [...all, ...productOptions]
-})
-
-// Active filter badges
-const activeFilterBadges = computed(() => {
-  const badges: { id: string; label: string }[] = []
-  if (selectedProductUuid.value) {
-    const product = products.value.find(p => p.uuid === selectedProductUuid.value)
-    if (product) badges.push({ id: `product:${product.uuid}`, label: product.name })
-  }
-  return badges
-})
-
-// Remove filter badge
-const onRemoveFilter = (id: string) => {
-  if (id.startsWith('product:')) {
-    setProductUuid(null)
-  }
-}
-
-// Handle product filter change
-const onProductFilterChange = (value: string) => {
-  setProductUuid(value === 'all' ? null : value)
-}
-
-// Search handler (for future use)
-const onSearch = () => {
-  // TODO: Implement search
-}
-
-const onSelectOffer = (offer: any) => {
-  selectedOfferId.value = offer.uuid
 }
 
 // Initialize
-await Promise.all([initProducts(), initOffers()])
+await init()
 
 useHead(() => ({
-  title: t('catalogOffersSection.header.title')
+  title: t('catalogProducts.header.title')
 }))
 </script>