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/suppliers/[supplierId]/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('catalogSupplierProducts.states.loading') }}</Text>
-      </Stack>
-    </Section>
-
-    <!-- Supplier Not Found -->
-    <Section v-else-if="!supplier" variant="plain" paddingY="lg">
-      <Card padding="lg">
+  <CatalogPage
+    :items="products"
+    :map-items="mapItems"
+    :loading="isLoading"
+    with-map
+    map-id="supplier-products-map"
+    point-color="#3b82f6"
+  >
+    <template #header>
+      <!-- Supplier Not Found -->
+      <Card v-if="!isLoading && !supplier" padding="lg">
         <Stack align="center" gap="4">
           <IconCircle tone="primary">
             <Icon name="lucide:building-2" size="24" />
@@ -22,56 +21,52 @@
           </Button>
         </Stack>
       </Card>
-    </Section>
 
-    <!-- Content -->
-    <Section v-else variant="plain" paddingY="lg">
-      <Stack gap="4">
+      <!-- Content Header -->
+      <Stack v-else gap="4">
         <!-- Breadcrumbs -->
-        <SuppliersBreadcrumbs :supplier-id="supplierId" :supplier-name="supplier.name" />
+        <SuppliersBreadcrumbs :supplier-id="supplierId" :supplier-name="supplier?.name" />
 
         <!-- Header with supplier info -->
         <div class="flex items-start gap-4">
           <!-- Logo -->
-          <div v-if="supplier.logo" class="w-16 h-16 shrink-0">
+          <div v-if="supplier?.logo" class="w-16 h-16 shrink-0">
             <img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded-lg">
           </div>
           <div v-else class="w-16 h-16 bg-primary/10 text-primary font-bold rounded-lg flex items-center justify-center text-2xl shrink-0">
-            {{ supplier.name?.charAt(0) }}
+            {{ supplier?.name?.charAt(0) }}
           </div>
           <div>
-            <Heading :level="1">{{ supplier.name }}</Heading>
-            <Text tone="muted" size="sm">{{ supplier.country }}</Text>
+            <Heading :level="1">{{ supplier?.name }}</Heading>
+            <Text tone="muted" size="sm">{{ supplier?.country }}</Text>
             <div class="flex gap-2 mt-1">
-              <span v-if="supplier.isVerified" class="badge badge-success badge-sm">
+              <span v-if="supplier?.isVerified" class="badge badge-success badge-sm">
                 {{ t('catalogSupplier.badges.verified') }}
               </span>
             </div>
           </div>
         </div>
 
-        <!-- Products Section -->
-        <div>
-          <Text weight="semibold" size="lg" class="mb-3">{{ t('catalogSupplierProducts.header.products_title', { count: products.length }) }}</Text>
-          <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>
-        </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('catalogSupplierProducts.empty.no_products') }}</Text>
-        </Stack>
+        <!-- Products Section Title -->
+        <Text weight="semibold" size="lg">{{ t('catalogSupplierProducts.header.products_title', { count: products.length }) }}</Text>
       </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('catalogSupplierProducts.empty.no_products') }}</Text>
+      </Stack>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -96,6 +91,18 @@ const offers = ref<any[]>([])
 
 const supplierId = computed(() => route.params.supplierId as string)
 
+// 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 }>()