Unify offers UI to OfferResultCard and require price

app/components/MapSidebar.vue

@@ -81,15 +81,18 @@
 
       <!-- Offers Tab -->
       <div v-else-if="activeTab === 'offers'" class="space-y-2">
-        <OfferCard
-          v-for="(offer, index) in offers"
+        <OfferResultCard
+          v-for="(offer, index) in offersWithPrice"
           :key="offer.uuid ?? index"
-          :offer="offer"
-          selectable
-          :is-selected="selectedItemId === offer.uuid"
+          :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="[]"
           @select="$emit('select', offer, 'offer')"
         />
-        <div v-if="offers.length === 0" class="text-center text-base-content/50 py-8">
+        <div v-if="offersWithPrice.length === 0" class="text-center text-base-content/50 py-8">
           {{ t('catalogMap.empty.offers') }}
         </div>
       </div>
@@ -136,7 +139,7 @@ interface Offer {
   validUntil?: string | null
 }
 
-defineProps<{
+const props = defineProps<{
   activeTab: 'hubs' | 'suppliers' | 'offers'
   hubs: Hub[]
   suppliers: Supplier[]
@@ -152,4 +155,8 @@ defineEmits<{
 
 const localePath = useLocalePath()
 const { t } = useI18n()
+
+const offersWithPrice = computed(() =>
+  (props.offers || []).filter(o => o?.pricePerUnit != null)
+)
 </script>