From 45ec9923e353152be656ea750367f919e959c257 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Fri, 16 Jan 2026 02:00:31 +0700
Subject: [PATCH] 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         |  83 ++++----
 .../catalog/offers/[productId]/index.vue      |  90 ++++----
 app/pages/catalog/offers/index.vue            |  62 +++---
 .../[supplierId]/[productId]/[hubId].vue      | 194 ++++++++++--------
 .../[supplierId]/[productId]/index.vue        | 108 +++++-----
 .../catalog/suppliers/[supplierId]/index.vue  |  93 +++++----
 6 files changed, 343 insertions(+), 287 deletions(-)

diff --git a/app/pages/catalog/hubs/[id]/index.vue b/app/pages/catalog/hubs/[id]/index.vue
index e357217..b745f64 100644
--- a/app/pages/catalog/hubs/[id]/index.vue
+++ b/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}`))
diff --git a/app/pages/catalog/offers/[productId]/index.vue b/app/pages/catalog/offers/[productId]/index.vue
index 5ad6674..429897a 100644
--- a/app/pages/catalog/offers/[productId]/index.vue
+++ b/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 {
diff --git a/app/pages/catalog/offers/index.vue b/app/pages/catalog/offers/index.vue
index 3e2b871..2dcae86 100644
--- a/app/pages/catalog/offers/index.vue
+++ b/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">
diff --git a/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue b/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
index d139332..9eebe30 100644
--- a/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
+++ b/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].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('catalogSupplierCalculation.states.loading') }}</Text>
-      </Stack>
-    </Section>
-
-    <!-- Not Found -->
-    <Section v-else-if="!supplier || !product || !hub" variant="plain" paddingY="lg">
-      <Card padding="lg">
+  <CatalogPage
+    :items="routePoints"
+    :loading="isLoading"
+    with-map
+    map-id="supplier-route-map"
+    point-color="#10b981"
+  >
+    <template #header>
+      <!-- Not Found -->
+      <Card v-if="!isLoading && (!supplier || !product || !hub)" padding="lg">
         <Stack align="center" gap="4">
           <IconCircle tone="primary">
             <Icon name="lucide:package-x" size="24" />
@@ -22,33 +20,31 @@
           </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"
+          :supplier-name="supplier?.name"
           :product-id="productId"
-          :product-name="product.name"
+          :product-name="product?.name"
           :hub-id="hubId"
-          :hub-name="hub.name"
+          :hub-name="hub?.name"
         />
 
         <!-- Header -->
         <div>
-          <Heading :level="1">{{ product.name }}</Heading>
+          <Heading :level="1">{{ product?.name }}</Heading>
           <div class="flex flex-col gap-1 mt-1">
             <Text tone="muted" size="sm">
-              {{ t('catalogSupplierCalculation.header.supplier') }}: {{ supplier.name }}
+              {{ t('catalogSupplierCalculation.header.supplier') }}: {{ supplier?.name }}
             </Text>
             <Text tone="muted" size="sm">
               {{ t('catalogSupplierCalculation.header.from') }}: {{ sourceLocation?.name || t('common.values.not_available') }}
             </Text>
             <Text tone="muted" size="sm">
-              {{ t('catalogSupplierCalculation.header.to') }}: {{ hub.name }}, {{ hub.country }}
+              {{ t('catalogSupplierCalculation.header.to') }}: {{ hub?.name }}, {{ hub?.country }}
             </Text>
           </div>
         </div>
@@ -69,60 +65,64 @@
             </div>
           </Stack>
         </Card>
-
-        <!-- Route Loading -->
-        <Section v-if="isLoadingRoute" variant="plain">
-          <Stack align="center" gap="2">
-            <Spinner />
-            <Text tone="muted">{{ t('catalogSupplierCalculation.states.calculating_route') }}</Text>
-          </Stack>
-        </Section>
-
-        <!-- Route Result -->
-        <template v-else-if="route">
-          <Card padding="md">
-            <Stack gap="3">
-              <div class="flex justify-between items-center">
-                <Text weight="semibold">{{ t('catalogSupplierCalculation.route.title') }}</Text>
-                <div class="flex gap-2">
-                  <span class="badge badge-primary">{{ formatDistance(route.totalDistanceKm) }}</span>
-                  <span class="badge badge-neutral">{{ formatDuration(route.totalTimeSeconds) }}</span>
-                </div>
-              </div>
-
-              <!-- Route stages -->
-              <div class="space-y-2">
-                <div
-                  v-for="(stage, index) in route.stages"
-                  :key="index"
-                  class="flex items-center gap-3 p-2 bg-base-200 rounded-lg"
-                >
-                  <div class="w-8 h-8 flex items-center justify-center bg-base-100 rounded-full">
-                    <Icon :name="getTransportIcon(stage.transportType)" size="16" />
-                  </div>
-                  <div class="flex-1">
-                    <Text size="sm" weight="medium">{{ stage.fromName }} → {{ stage.toName }}</Text>
-                    <Text size="xs" tone="muted">
-                      {{ formatDistance(stage.distanceKm) }} · {{ formatDuration(stage.travelTimeSeconds) }}
-                    </Text>
-                  </div>
-                  <span class="badge badge-sm badge-outline">{{ stage.transportType }}</span>
-                </div>
-              </div>
-            </Stack>
-          </Card>
-        </template>
-
-        <!-- No Route -->
-        <Card v-else padding="md">
-          <Stack align="center" gap="2">
-            <Icon name="lucide:route-off" size="32" class="text-base-content/40" />
-            <Text tone="muted">{{ t('catalogSupplierCalculation.route.not_found') }}</Text>
-          </Stack>
-        </Card>
       </Stack>
-    </Section>
-  </Stack>
+    </template>
+
+    <template #card="{ item }">
+      <!-- Route Loading -->
+      <Section v-if="isLoadingRoute" variant="plain">
+        <Stack align="center" gap="2">
+          <Spinner />
+          <Text tone="muted">{{ t('catalogSupplierCalculation.states.calculating_route') }}</Text>
+        </Stack>
+      </Section>
+
+      <!-- Route Result -->
+      <Card v-else-if="routeData" padding="md">
+        <Stack gap="3">
+          <div class="flex justify-between items-center">
+            <Text weight="semibold">{{ t('catalogSupplierCalculation.route.title') }}</Text>
+            <div class="flex gap-2">
+              <span class="badge badge-primary">{{ formatDistance(routeData.totalDistanceKm) }}</span>
+              <span class="badge badge-neutral">{{ formatDuration(routeData.totalTimeSeconds) }}</span>
+            </div>
+          </div>
+
+          <!-- Route stages -->
+          <div class="space-y-2">
+            <div
+              v-for="(stage, index) in routeData.stages"
+              :key="index"
+              class="flex items-center gap-3 p-2 bg-base-200 rounded-lg"
+            >
+              <div class="w-8 h-8 flex items-center justify-center bg-base-100 rounded-full">
+                <Icon :name="getTransportIcon(stage.transportType)" size="16" />
+              </div>
+              <div class="flex-1">
+                <Text size="sm" weight="medium">{{ stage.fromName }} → {{ stage.toName }}</Text>
+                <Text size="xs" tone="muted">
+                  {{ formatDistance(stage.distanceKm) }} · {{ formatDuration(stage.travelTimeSeconds) }}
+                </Text>
+              </div>
+              <span class="badge badge-sm badge-outline">{{ stage.transportType }}</span>
+            </div>
+          </div>
+        </Stack>
+      </Card>
+
+      <!-- No Route -->
+      <Card v-else padding="md">
+        <Stack align="center" gap="2">
+          <Icon name="lucide:route-off" size="32" class="text-base-content/40" />
+          <Text tone="muted">{{ t('catalogSupplierCalculation.route.not_found') }}</Text>
+        </Stack>
+      </Card>
+    </template>
+
+    <template #empty>
+      <Text tone="muted">{{ t('catalogSupplierCalculation.route.not_found') }}</Text>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -138,7 +138,7 @@ definePageMeta({
   layout: 'topnav'
 })
 
-const route = useRoute()
+const routeRef = useRoute()
 const localePath = useLocalePath()
 const { t } = useI18n()
 const { execute } = useGraphQL()
@@ -148,12 +148,39 @@ const isLoadingRoute = ref(false)
 const supplier = ref<any>(null)
 const product = ref<{ uuid: string; name: string } | null>(null)
 const hub = ref<any>(null)
-const sourceLocation = ref<{ uuid: string; name: string } | null>(null)
+const sourceLocation = ref<{ uuid: string; name: string; latitude?: number; longitude?: number } | null>(null)
 const routeData = ref<any>(null)
 
-const supplierId = computed(() => route.params.supplierId as string)
-const productId = computed(() => route.params.productId as string)
-const hubId = computed(() => route.params.hubId as string)
+const supplierId = computed(() => routeRef.params.supplierId as string)
+const productId = computed(() => routeRef.params.productId as string)
+const hubId = computed(() => routeRef.params.hubId as string)
+
+// Map items - show source and destination
+const routePoints = computed(() => {
+  const points: Array<{ uuid: string; name: string; latitude: number; longitude: number }> = []
+
+  // Source location
+  if (sourceLocation.value?.latitude && sourceLocation.value?.longitude) {
+    points.push({
+      uuid: sourceLocation.value.uuid,
+      name: sourceLocation.value.name,
+      latitude: Number(sourceLocation.value.latitude),
+      longitude: Number(sourceLocation.value.longitude)
+    })
+  }
+
+  // Destination hub
+  if (hub.value?.latitude && hub.value?.longitude) {
+    points.push({
+      uuid: hub.value.uuid || hubId.value,
+      name: hub.value.name || '',
+      latitude: Number(hub.value.latitude),
+      longitude: Number(hub.value.longitude)
+    })
+  }
+
+  return points
+})
 
 // Format distance
 const formatDistance = (km?: number | null) => {
@@ -331,7 +358,12 @@ try {
       if (line) {
         product.value = { uuid: line.productUuid, name: line.productName }
         if (offer.locationUuid && offer.locationName) {
-          sourceLocation.value = { uuid: offer.locationUuid, name: offer.locationName }
+          sourceLocation.value = {
+            uuid: offer.locationUuid,
+            name: offer.locationName,
+            latitude: offer.locationLat,
+            longitude: offer.locationLon
+          }
         }
         break
       }
diff --git a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue b/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
index ec10f7b..bfdd47c 100644
--- a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/[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('catalogSupplierProductHubs.states.loading') }}</Text>
-      </Stack>
-    </Section>
-
-    <!-- Not Found -->
-    <Section v-else-if="!supplier || !product" variant="plain" paddingY="lg">
-      <Card padding="lg">
+  <CatalogPage
+    :items="hubs"
+    :loading="isLoading"
+    with-map
+    map-id="supplier-product-hubs-map"
+    point-color="#10b981"
+    :hovered-id="hoveredHubId"
+    @update:hovered-id="hoveredHubId = $event"
+    @select="onSelectHub"
+  >
+    <template #header>
+      <!-- Not Found -->
+      <Card v-if="!isLoading && (!supplier || !product)" padding="lg">
         <Stack align="center" gap="4">
           <IconCircle tone="primary">
             <Icon name="lucide:package-x" size="24" />
@@ -22,24 +23,22 @@
           </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"
+          :supplier-name="supplier?.name"
           :product-id="productId"
-          :product-name="product.name"
+          :product-name="product?.name"
         />
 
         <!-- Header -->
         <div>
-          <Heading :level="1">{{ product.name }}</Heading>
+          <Heading :level="1">{{ product?.name }}</Heading>
           <Text tone="muted" size="sm">
-            {{ t('catalogSupplierProductHubs.header.from_supplier', { supplier: supplier.name }) }}
+            {{ t('catalogSupplierProductHubs.header.from_supplier', { supplier: supplier?.name }) }}
           </Text>
           <Text tone="muted" size="sm" v-if="sourceLocation">
             {{ t('catalogSupplierProductHubs.header.source_location', { location: sourceLocation.name }) }}
@@ -60,29 +59,27 @@
           </div>
         </Card>
 
-        <!-- Hubs Section -->
-        <div>
-          <Text weight="semibold" size="lg" class="mb-3">
-            {{ t('catalogSupplierProductHubs.header.hubs_title', { count: hubs.length }) }}
-          </Text>
-          <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/suppliers/${supplierId}/${productId}/${hub.uuid}`)"
-            />
-          </div>
-        </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('catalogSupplierProductHubs.empty.no_hubs') }}</Text>
-        </Stack>
+        <!-- Hubs Section Title -->
+        <Text weight="semibold" size="lg">
+          {{ t('catalogSupplierProductHubs.header.hubs_title', { count: hubs.length }) }}
+        </Text>
       </Stack>
-    </Section>
-  </Stack>
+    </template>
+
+    <template #card="{ item }">
+      <HubCard
+        :hub="item"
+        :link-to="localePath(`/catalog/suppliers/${supplierId}/${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('catalogSupplierProductHubs.empty.no_hubs') }}</Text>
+      </Stack>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -98,7 +95,7 @@ definePageMeta({
   layout: 'topnav'
 })
 
-const route = useRoute()
+const routeRef = useRoute()
 const localePath = useLocalePath()
 const { t } = useI18n()
 
@@ -106,10 +103,16 @@ const isLoading = ref(true)
 const supplier = ref<any>(null)
 const product = ref<{ uuid: string; name: string } | null>(null)
 const sourceLocation = 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 supplierId = computed(() => route.params.supplierId as string)
-const productId = computed(() => route.params.productId as string)
+const supplierId = computed(() => routeRef.params.supplierId as string)
+const productId = computed(() => routeRef.params.productId as string)
+
+// Handle hub selection
+const onSelectHub = (hub: any) => {
+  navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId.value}/${hub.uuid}`))
+}
 
 // Mock price history generator
 const getMockPriceHistory = (uuid: string): number[] => {
@@ -227,10 +230,15 @@ try {
     )
 
     hubs.value = (hubsData.value?.findSupplierProductHubs || [])
-      .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 data:', error)
diff --git a/app/pages/catalog/suppliers/[supplierId]/index.vue b/app/pages/catalog/suppliers/[supplierId]/index.vue
index 9561201..ef48f98 100644
--- a/app/pages/catalog/suppliers/[supplierId]/index.vue
+++ b/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 }>()