Use offer result cards in catalog and compute routes for supplier offers

app/components/catalog/CatalogMapPanel.vue

@@ -37,13 +37,14 @@
 
       <!-- Offers Tab -->
       <template v-if="activeTab === 'offers'">
-        <OfferCard
+        <OfferResultCard
           v-for="(offer, index) in offers"
           :key="offer.uuid ?? index"
-          :offer="offer"
-          selectable
-          compact
-          :is-selected="selectedId === offer.uuid"
+          :location-name="offer.locationName"
+          :product-name="offer.title || undefined"
+          :stages="[]"
+          :start-name="offer.locationName || undefined"
+          :end-name="undefined"
           @select="selectOffer(offer)"
         />
         <Text v-if="offers.length === 0" tone="muted" size="sm" class="text-center py-4">

app/components/catalog/CatalogOffersSection.vue

@@ -13,10 +13,12 @@
       </Stack>
 
       <Grid :cols="1" :md="2" :lg="3" :gap="4">
-        <OfferCard
+        <OfferResultCard
           v-for="(offer, index) in offers"
           :key="offer.uuid ?? index"
-          :offer="offer"
+          :location-name="offer.locationName"
+          :product-name="offer.title || undefined"
+          :stages="[]"
         />
       </Grid>
 

app/components/catalog/InfoPanel.vue

@@ -141,12 +141,15 @@
             {{ $t('catalog.empty.noOffers') }}
           </div>
           <div v-else-if="!loadingOffers" class="flex flex-col gap-2">
-            <OfferCard
+            <OfferResultCard
               v-for="(offer, index) in relatedOffers"
               :key="offer.uuid ?? index"
-              :offer="offer"
-              compact
-              selectable
+              :location-name="offer.locationName || offer.locationCountry || offer.locationName"
+              :product-name="offer.productName"
+              :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
+              :currency="offer.currency"
+              :unit="offer.unit"
+              :stages="getOfferStages(offer)"
               @select="onOfferSelect(offer)"
             />
           </div>
@@ -217,6 +220,7 @@ import type {
   InfoSupplierItem,
   InfoOfferItem
 } from '~/composables/useCatalogInfo'
+import type { RouteStageType } from '~/composables/graphql/public/geo-generated'
 
 const props = defineProps<{
   entityType: InfoEntityType
@@ -344,4 +348,15 @@ const onSupplierSelect = (supplier: InfoSupplierItem) => {
     emit('open-info', 'supplier', supplier.uuid)
   }
 }
+
+const getOfferStages = (offer: InfoOfferItem) => {
+  const route = offer.routes?.[0]
+  if (!route?.stages) return []
+  return route.stages
+    .filter((stage): stage is NonNullable<RouteStageType> => stage !== null)
+    .map(stage => ({
+      transportType: stage.transportType,
+      distanceKm: stage.distanceKm
+    }))
+}
 </script>

app/components/catalog/QuotePanel.vue

@@ -26,7 +26,14 @@
           class="cursor-pointer"
           @click="emit('select-offer', offer)"
         >
-          <OfferCard :offer="offer" compact selectable />
+          <OfferResultCard
+            :location-name="offer.locationName || offer.locationCountry"
+            :product-name="offer.productName"
+            :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
+            :currency="offer.currency"
+            :unit="offer.unit"
+            :stages="[]"
+          />
         </div>
       </div>
     </div>