Redesign offer result card layout

2026-02-06 17:07:38 +07:00
parent b971391fd7
commit e4f81dba7c
9 changed files with 106 additions and 24 deletions
--- a/app/components/CalcResultContent.vue
+++ b/app/components/CalcResultContent.vue
@@ -24,6 +24,7 @@
        :location-name="getOfferData(option.sourceUuid)?.locationName"
        :product-name="productName"
        :price-per-unit="parseFloat(getOfferData(option.sourceUuid)?.pricePerUnit || '0') || null"
+        :quantity="getOfferData(option.sourceUuid)?.quantity"
        :currency="getOfferData(option.sourceUuid)?.currency"
        :unit="getOfferData(option.sourceUuid)?.unit"
        :stages="getRouteStages(option)"
--- a/app/components/MapSidebar.vue
+++ b/app/components/MapSidebar.vue
@@ -88,6 +88,7 @@
          :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="[]"
--- a/app/components/catalog/CatalogMapPanel.vue
+++ b/app/components/catalog/CatalogMapPanel.vue
@@ -44,6 +44,7 @@
          :location-name="offer.locationName"
          :product-name="offer.productName || offer.title || undefined"
          :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
+          :quantity="offer.quantity"
          :currency="offer.currency"
          :unit="offer.unit"
          :stages="[]"
@@ -91,6 +92,7 @@ interface Offer {
  status?: string | null
  latitude?: number | null
  longitude?: number | null
+  quantity?: number | string | null
  pricePerUnit?: number | string | null
  currency?: string | null
  unit?: string | null
--- a/app/components/catalog/CatalogOffersSection.vue
+++ b/app/components/catalog/CatalogOffersSection.vue
@@ -20,6 +20,7 @@
          :location-name="offer.locationName"
          :product-name="offer.title || undefined"
          :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
+          :quantity="offer.quantity"
          :currency="offer.currency"
          :unit="offer.unit"
          :stages="[]"
@@ -56,6 +57,7 @@ interface Offer {
  status?: string | null
  validUntil?: string | null
  lines?: (OfferLine | null)[] | null
+  quantity?: number | string | null
  pricePerUnit?: number | string | null
  currency?: string | null
  unit?: string | null
--- a/app/components/catalog/InfoPanel.vue
+++ b/app/components/catalog/InfoPanel.vue
@@ -142,9 +142,13 @@
              <span v-if="loadingOffers" class="loading loading-spinner loading-xs" />
              <span v-else-if="offersWithPrice.length > 0" class="text-white/50">({{ offersWithPrice.length }})</span>
            </h3>
-            <button class="btn btn-ghost btn-xs text-white/60" @click="emit('select-product', null)">
-              <Icon name="lucide:x" size="14" />
-              {{ $t('common.cancel') }}
+            <button
+              class="flex items-center gap-2 px-2 py-1 rounded-full border border-white/15 bg-white/10 text-xs text-white/80 hover:bg-white/20 transition-colors"
+              @click="emit('select-product', null)"
+            >
+              <Icon name="lucide:package" size="12" />
+              <span class="max-w-32 truncate">{{ selectedProductName }}</span>
+              <Icon name="lucide:x" size="12" />
            </button>
          </div>

@@ -159,6 +163,7 @@
              :location-name="offer.locationName || offer.locationCountry || offer.locationName"
              :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)"
@@ -341,6 +346,12 @@ const offersWithPrice = computed(() =>
  relatedOffers.value.filter(o => o?.pricePerUnit != null)
 )

+const selectedProductName = computed(() => {
+  if (!props.selectedProduct) return ''
+  const match = relatedProducts.value.find(p => p.uuid === props.selectedProduct)
+  return match?.name || props.selectedProduct.slice(0, 8) + '...'
+})
+
 // Entity name
 const entityName = computed(() => {
  return props.entity?.name || props.entity?.productName || props.entityId.slice(0, 8) + '...'
--- a/app/components/catalog/OfferResultCard.vue
+++ b/app/components/catalog/OfferResultCard.vue
@@ -1,15 +1,32 @@
 <template>
  <Card padding="md" interactive @click="$emit('select')">
-    <!-- Header: Location + Price -->
-    <div class="flex items-start justify-between mb-3">
-      <div>
-        <Text weight="semibold">{{ supplierDisplay }}</Text>
-        <Text tone="muted" size="sm">
-          {{ t('catalogOfferCard.labels.origin_label') }}: {{ originDisplay }}
-        </Text>
-        <Text v-if="productName" tone="muted" size="sm">{{ productName }}</Text>
+    <!-- Header: Supplier + Price -->
+    <div class="flex items-start justify-between gap-4">
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-2">
+          <div class="w-6 h-6 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
+            <Icon name="lucide:factory" size="14" class="text-white" />
+          </div>
+          <Text weight="semibold">{{ supplierDisplay }}</Text>
+        </div>
+
+        <div class="flex items-center gap-2 text-sm text-base-content/70">
+          <Icon name="lucide:map-pin" size="14" class="text-base-content/60" />
+          <span>{{ originDisplay }}</span>
+        </div>
+
+        <div v-if="productName" class="flex items-center gap-2 text-sm text-base-content/70">
+          <Icon name="lucide:package" size="14" class="text-base-content/60" />
+          <span>{{ productName }}</span>
+        </div>
+
+        <div v-if="quantityDisplay" class="flex items-center gap-2 text-sm text-base-content/70">
+          <Icon name="lucide:scale" size="14" class="text-base-content/60" />
+          <span>{{ quantityDisplay }}</span>
+        </div>
      </div>
-      <Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
+
+      <Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg text-right">
        {{ priceDisplay }}
      </Text>
    </div>
@@ -17,13 +34,13 @@
    <!-- Supplier info -->
    <SupplierInfoBlock v-if="kycProfileUuid" :kyc-profile-uuid="kycProfileUuid" class="mb-3" />

-    <!-- Route stepper -->
-    <RouteStepper
-      v-if="stages.length > 0"
-      :stages="stages"
-      :start-name="startName"
-      :end-name="endName"
-    />
+    <!-- Route lines -->
+    <div v-if="routeRows.length" class="mt-3 pt-2 border-t border-base-200/60">
+      <div v-for="(row, index) in routeRows" :key="index" class="flex items-center gap-2 text-sm text-base-content/70">
+        <Icon :name="row.icon" size="14" class="text-base-content/60" />
+        <span>{{ row.distanceLabel }}</span>
+      </div>
+    </div>
  </Card>
 </template>

@@ -35,6 +52,7 @@ const props = withDefaults(defineProps<{
  supplierName?: string
  productName?: string
  pricePerUnit?: number | null
+  quantity?: number | string | null
  currency?: string | null
  unit?: string | null
  stages?: RouteStage[]
@@ -60,13 +78,25 @@ const originDisplay = computed(() => {
 })

 const priceDisplay = computed(() => {
-  if (!props.pricePerUnit) return null
+  if (props.pricePerUnit == null) return null
  const currSymbol = getCurrencySymbol(props.currency)
  const unitName = getUnitName(props.unit)
-  const formattedPrice = props.pricePerUnit.toLocaleString()
+  const formattedPrice = Number(props.pricePerUnit).toLocaleString()
  return `${currSymbol}${formattedPrice}/${unitName}`
 })

+const quantityDisplay = computed(() => {
+  if (props.quantity == null || props.quantity === '') return null
+  const quantityValue = Number(props.quantity)
+  if (Number.isNaN(quantityValue)) return null
+  const formattedQuantity = quantityValue.toLocaleString()
+  const unitName = getUnitName(props.unit)
+  return t('catalogOfferCard.labels.quantity_with_unit', {
+    quantity: formattedQuantity,
+    unit: unitName
+  })
+})
+
 const getCurrencySymbol = (currency?: string | null) => {
  switch (currency?.toUpperCase()) {
    case 'USD': return '$'
@@ -80,14 +110,44 @@ const getCurrencySymbol = (currency?: string | null) => {
 const getUnitName = (unit?: string | null) => {
  switch (unit?.toLowerCase()) {
    case 'т':
+    case 't':
    case 'ton':
    case 'tonne':
-      return 'тонна'
+      return t('catalogOfferCard.labels.default_unit')
    case 'кг':
    case 'kg':
-      return 'кг'
+      return t('catalogOfferCard.labels.unit_kg')
    default:
-      return 'тонна'
+      return t('catalogOfferCard.labels.default_unit')
  }
 }
+
+const formatDistance = (km?: number | null) => {
+  if (km == null) return null
+  const formatted = Math.round(km).toLocaleString()
+  return t('catalogOfferCard.labels.distance_km', { km: formatted })
+}
+
+const getTransportIcon = (type?: string | null) => {
+  switch (type) {
+    case 'rail':
+      return 'lucide:train-front'
+    case 'sea':
+      return 'lucide:ship'
+    case 'road':
+    case 'auto':
+    default:
+      return 'lucide:truck'
+  }
+}
+
+const routeRows = computed(() =>
+  (props.stages || [])
+    .filter(stage => stage?.distanceKm != null)
+    .map(stage => ({
+      icon: getTransportIcon(stage?.transportType),
+      distanceLabel: formatDistance(stage?.distanceKm)
+    }))
+    .filter(row => !!row.distanceLabel)
+)
 </script>
--- a/app/components/catalog/QuotePanel.vue
+++ b/app/components/catalog/QuotePanel.vue
@@ -31,6 +31,7 @@
            :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="[]"
--- a/i18n/locales/en/catalogOfferCard.json
+++ b/i18n/locales/en/catalogOfferCard.json
@@ -3,6 +3,8 @@
    "labels": {
      "quantity_with_unit": "{quantity} {unit}",
      "default_unit": "t",
+      "unit_kg": "kg",
+      "distance_km": "{km} km",
      "country_unknown": "Not specified",
      "supplier_unknown": "Supplier",
      "origin_label": "From",
--- a/i18n/locales/ru/catalogOfferCard.json
+++ b/i18n/locales/ru/catalogOfferCard.json
@@ -3,6 +3,8 @@
    "labels": {
      "quantity_with_unit": "{quantity} {unit}",
      "default_unit": "т",
+      "unit_kg": "кг",
+      "distance_km": "{km} км",
      "country_unknown": "Не указана",
      "supplier_unknown": "Поставщик",
      "origin_label": "Откуда",