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/hubs/[id]/index.vue

@@ -1,16 +1,15 @@
 <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" variant="plain" paddingY="lg">
-      <Card padding="lg">
+  <CatalogPage
+    :items="products"
+    :map-items="mapItems"
+    :loading="isLoading"
+    with-map
+    map-id="hub-products-map"
+    point-color="#10b981"
+  >
+    <template #header>
+      <!-- Not Found -->
+      <Card v-if="!isLoading && !hub" padding="lg">
         <Stack align="center" gap="4">
           <IconCircle tone="primary">
             <Icon name="lucide:map-pin" size="24" />
@@ -22,39 +21,35 @@
           </Button>
         </Stack>
       </Card>
-    </Section>
 
-    <!-- Content -->
-    <Section v-else variant="plain" paddingY="lg">
-      <Stack gap="4">
+      <!-- Content Header -->
+      <Stack v-else gap="4">
         <!-- Breadcrumbs -->
-        <CatalogBreadcrumbs :hub-id="hubId" :hub-name="hub.name" />
+        <CatalogBreadcrumbs :hub-id="hubId" :hub-name="hub?.name" />
 
         <!-- Header -->
         <div>
-          <Heading :level="1">{{ hub.name }}</Heading>
-          <Text tone="muted" size="sm">{{ hub.country }}</Text>
+          <Heading :level="1">{{ hub?.name }}</Heading>
+          <Text tone="muted" size="sm">{{ hub?.country }}</Text>
         </div>
-
-        <!-- 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>
-
-        <!-- Empty state -->
-        <Stack v-if="products.length === 0" align="center" gap="2">
-          <Icon name="lucide:package-x" size="32" class="text-base-content/40" />
-          <Text tone="muted">{{ t('catalogHub.products.empty') }}</Text>
-        </Stack>
       </Stack>
-    </Section>
-  </Stack>
+    </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('catalogHub.products.empty') }}</Text>
+      </Stack>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -75,6 +70,18 @@ const products = ref<Array<{ uuid: string; name: string }>>([])
 
 const hubId = computed(() => route.params.id as string)
 
+// Map items - show the hub itself
+const mapItems = computed(() => {
+  if (!hub.value?.latitude || !hub.value?.longitude) return []
+  return [{
+    uuid: hub.value.uuid || hubId.value,
+    name: hub.value.name || '',
+    latitude: Number(hub.value.latitude),
+    longitude: Number(hub.value.longitude),
+    country: hub.value.country
+  }]
+})
+
 // Navigate to product page
 const goToProduct = (productId: string) => {
   navigateTo(localePath(`/catalog/hubs/${hubId.value}/${productId}`))