Unify catalog cards and fix offer point color

- Change point color on /catalog/offers to green (#22c55e)
- Replace custom route card with OfferResultCard on supplier hub page

app/pages/catalog/offers/index.vue

@@ -7,7 +7,7 @@
     use-server-clustering
     cluster-node-type="offer"
     map-id="offers-products-map"
-    point-color="#3b82f6"
+    point-color="#22c55e"
     :hovered-id="hoveredProductId"
     @update:hovered-id="hoveredProductId = $event"
   >
@@ -80,15 +80,8 @@ const goToProduct = (productId: string) => {
   navigateTo(localePath(`/catalog/offers/${productId}`))
 }
 
-// Mock price history generator (seeded by uuid for consistent results)
+// Price history - empty for now, will be populated from real data
-const getMockPriceHistory = (uuid: string): number[] => {
+const getPriceHistory = (_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)
-  })
-}
 
 // Initialize
 await init()

app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue

@@ -78,37 +78,14 @@
       </Section>
 
       <!-- Route Result -->
-      <Card v-else-if="routeData" padding="md">
+      <OfferResultCard
-        <Stack gap="3">
+        v-else-if="routeData"
-          <div class="flex justify-between items-center">
+        :location-name="sourceLocation?.name"
-            <Text weight="semibold">{{ t('catalogSupplierCalculation.route.title') }}</Text>
+        :product-name="product?.name"
-            <div class="flex gap-2">
+        :stages="routeStages"
-              <span class="badge badge-primary">{{ formatDistance(routeData.totalDistanceKm) }}</span>
+        :start-name="sourceLocation?.name"
-              <span class="badge badge-neutral">{{ formatDuration(routeData.totalTimeSeconds) }}</span>
+        :end-name="hub?.name"
-            </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">
@@ -180,6 +157,15 @@ const routePoints = computed(() => {
   return points
 })
 
+// Route stages for OfferResultCard
+const routeStages = computed(() => {
+  if (!routeData.value?.stages) return []
+  return routeData.value.stages.map((stage: any) => ({
+    transportType: stage?.transportType,
+    distanceKm: stage?.distanceKm
+  }))
+})
+
 // Format distance
 const formatDistance = (km?: number | null) => {
   if (!km) return t('common.values.not_available')