Group quote results by calculation

app/components/catalog/QuotePanel.vue

@@ -19,27 +19,59 @@
         <p>{{ $t('catalog.empty.noOffers') }}</p>
       </div>
 
-      <div v-else class="flex flex-col gap-2">
-        <div
-          v-for="offer in offersWithPrice"
-          :key="offer.uuid"
-          class="cursor-pointer"
-          @click="emit('select-offer', offer)"
-        >
-          <OfferResultCard
-            :supplier-name="offer.supplierName"
-            :location-name="offer.locationName || offer.locationCountry"
-            :product-name="offer.productName"
-            :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
-            :quantity="offer.quantity"
-            :currency="offer.currency"
-            :unit="offer.unit"
-            :stages="getOfferStages(offer)"
-            :total-time-seconds="offer.routes?.[0]?.totalTimeSeconds ?? null"
-          />
-        </div>
+<div v-else class="flex flex-col gap-3">
+  <div
+    v-for="group in offerGroups"
+    :key="group.id"
+    class="flex flex-col gap-0"
+  >
+    <div
+      v-if="group.offers.length > 1"
+      class="rounded-2xl overflow-hidden border border-base-200/60 divide-y divide-base-200/60"
+    >
+      <div
+        v-for="offer in group.offers"
+        :key="offer.uuid"
+        class="cursor-pointer"
+        @click="emit('select-offer', offer)"
+      >
+        <OfferResultCard
+          grouped
+          :supplier-name="offer.supplierName"
+          :location-name="offer.locationName || offer.locationCountry"
+          :product-name="offer.productName"
+          :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
+          :quantity="offer.quantity"
+          :currency="offer.currency"
+          :unit="offer.unit"
+          :stages="getOfferStages(offer)"
+          :total-time-seconds="offer.routes?.[0]?.totalTimeSeconds ?? null"
+        />
       </div>
     </div>
+
+    <div
+      v-else
+      v-for="offer in group.offers"
+      :key="offer.uuid"
+      class="cursor-pointer"
+      @click="emit('select-offer', offer)"
+    >
+      <OfferResultCard
+        :supplier-name="offer.supplierName"
+        :location-name="offer.locationName || offer.locationCountry"
+        :product-name="offer.productName"
+        :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
+        :quantity="offer.quantity"
+        :currency="offer.currency"
+        :unit="offer.unit"
+        :stages="getOfferStages(offer)"
+        :total-time-seconds="offer.routes?.[0]?.totalTimeSeconds ?? null"
+      />
+    </div>
+  </div>
+</div>
+    </div>
   </div>
 </template>
 
@@ -68,6 +100,11 @@ interface Offer {
   } | null> | null
 }
 
+interface OfferGroup {
+  id: string
+  offers: Offer[]
+}
+
 const emit = defineEmits<{
   'select-offer': [offer: Offer]
 }>()
@@ -75,12 +112,21 @@ const emit = defineEmits<{
 const props = defineProps<{
   loading: boolean
   offers: Offer[]
+  calculations?: OfferGroup[]
 }>()
 
 const offersWithPrice = computed(() =>
   (props.offers || []).filter(o => o?.pricePerUnit != null)
 )
 
+const offerGroups = computed<OfferGroup[]>(() => {
+  if (props.calculations?.length) return props.calculations
+  return offersWithPrice.value.map(offer => ({
+    id: offer.uuid,
+    offers: [offer]
+  }))
+})
+
 const getOfferStages = (offer: Offer) => {
   const route = offer.routes?.[0]
   if (!route?.stages) return []