feat(catalog): add map to all catalog pages

All catalog pages now use CatalogPage component with map on the right side:
- /catalog/hubs/[id] - shows hub on map
- /catalog/offers - shows empty map (products have no coords)
- /catalog/offers/[productId] - shows hubs where product can be delivered
- /catalog/suppliers/[supplierId] - shows supplier location
- /catalog/suppliers/[supplierId]/[productId] - shows hubs for supplier's product
- /catalog/suppliers/[supplierId]/[productId]/[hubId] - shows source and destination

app/pages/catalog/offers/[productId]/index.vue

@@ -1,16 +1,17 @@
 <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>
-
-    <!-- Product Not Found -->
-    <Section v-else-if="!product" variant="plain" paddingY="lg">
-      <Card padding="lg">
+  <CatalogPage
+    :items="hubs"
+    :loading="isLoading"
+    with-map
+    map-id="offers-product-hubs-map"
+    point-color="#10b981"
+    :hovered-id="hoveredHubId"
+    @update:hovered-id="hoveredHubId = $event"
+    @select="onSelectHub"
+  >
+    <template #header>
+      <!-- Product Not Found -->
+      <Card v-if="!isLoading && !product" padding="lg">
         <Stack align="center" gap="4">
           <IconCircle tone="primary">
             <Icon name="lucide:package-x" size="24" />
@@ -22,17 +23,15 @@
           </Button>
         </Stack>
       </Card>
-    </Section>
 
-    <!-- Content -->
-    <Section v-else variant="plain" paddingY="lg">
-      <Stack gap="4">
+      <!-- Content Header -->
+      <Stack v-else gap="4">
         <!-- Breadcrumbs -->
-        <OffersBreadcrumbs :product-id="productId" :product-name="product.name" />
+        <OffersBreadcrumbs :product-id="productId" :product-name="product?.name" />
 
         <!-- Header -->
         <div>
-          <Heading :level="1">{{ product.name }}</Heading>
+          <Heading :level="1">{{ product?.name }}</Heading>
           <Text tone="muted" size="sm">{{ t('catalogProductHubs.header.subtitle', { count: hubs.length }) }}</Text>
         </div>
 
@@ -49,25 +48,23 @@
             </ClientOnly>
           </div>
         </Card>
-
-        <!-- Hubs grid -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          <HubCard
-            v-for="hub in hubs"
-            :key="hub.uuid"
-            :hub="hub"
-            :link-to="localePath(`/catalog/offers/${productId}/${hub.uuid}`)"
-          />
-        </div>
-
-        <!-- Empty state -->
-        <Stack v-if="hubs.length === 0" 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>
       </Stack>
-    </Section>
-  </Stack>
+    </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">
@@ -84,10 +81,16 @@ const { t } = useI18n()
 
 const isLoading = ref(true)
 const product = ref<{ uuid: string; name: string } | null>(null)
-const hubs = ref<Array<{ uuid: string; name: string; country?: string; countryCode?: string }>>([])
+const hubs = ref<Array<{ uuid: string; name: string; latitude?: number; longitude?: number; country?: string; countryCode?: string }>>([])
+const hoveredHubId = ref<string>()
 
 const productId = computed(() => route.params.productId as string)
 
+// Handle hub selection
+const onSelectHub = (hub: any) => {
+  navigateTo(localePath(`/catalog/offers/${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)
@@ -145,10 +148,15 @@ try {
 
   // Get only hubs where this product can be delivered
   hubs.value = (hubsData.value?.findHubsForProduct || [])
-    .filter((h): h is { uuid: string; name: string; country?: string; countryCode?: string } =>
-      h !== null && !!h.uuid && !!h.name
-    )
-    .map(h => ({ uuid: h.uuid!, name: h.name!, country: h.country || undefined, countryCode: h.countryCode || undefined }))
+    .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 {

app/pages/catalog/offers/index.vue

@@ -1,16 +1,14 @@
 <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>
-
-    <!-- Empty -->
-    <Section v-else-if="products.length === 0" variant="plain" paddingY="lg">
-      <Card padding="lg">
+  <CatalogPage
+    :items="products"
+    :loading="isLoading"
+    with-map
+    map-id="offers-products-map"
+    point-color="#3b82f6"
+  >
+    <template #header>
+      <!-- Empty -->
+      <Card v-if="!isLoading && products.length === 0" padding="lg">
         <Stack align="center" gap="4">
           <IconCircle tone="primary">
             <Icon name="lucide:package" size="24" />
@@ -19,30 +17,26 @@
           <Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
         </Stack>
       </Card>
-    </Section>
 
-    <!-- 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>
+      <!-- Header -->
+      <div v-else>
+        <Heading :level="1">{{ t('catalogProducts.header.title') }}</Heading>
+        <Text tone="muted" size="sm">{{ t('catalogProducts.header.subtitle', { count: products.length }) }}</Text>
+      </div>
+    </template>
 
-        <!-- 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 #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">