From 0337cebc63e6ce507a6652da4c0cec18e819ca9b Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Thu, 15 Jan 2026 00:33:17 +0700
Subject: [PATCH] Simplify OfferResultCard and use daisyUI Steps

- Remove sourceName, latitude, longitude props from OfferResultCard
- Remove LocationMiniMap component (not needed, main map is on the side)
- Convert RouteStepper to use daisyUI steps-horizontal
- Update hub page and CalcResultContent to remove unused props
---
 app/components/CalcResultContent.vue       |   3 -
 app/components/catalog/LocationMiniMap.vue | 103 ---------------------
 app/components/catalog/OfferResultCard.vue |  33 ++-----
 app/components/catalog/RouteStepper.vue    |  20 ++--
 app/pages/catalog/hubs/[id].vue            |   3 -
 5 files changed, 19 insertions(+), 143 deletions(-)
 delete mode 100644 app/components/catalog/LocationMiniMap.vue

diff --git a/app/components/CalcResultContent.vue b/app/components/CalcResultContent.vue
index bfe6814..ce17d53 100644
--- a/app/components/CalcResultContent.vue
+++ b/app/components/CalcResultContent.vue
@@ -20,14 +20,11 @@
       <OfferResultCard
         v-for="option in productRouteOptions"
         :key="option.sourceUuid"
-        :source-name="option.sourceName || 'Склад'"
         :location-name="getOfferData(option.sourceUuid)?.locationName"
         :product-name="productName"
         :price-per-unit="getOfferData(option.sourceUuid)?.pricePerUnit"
         :currency="getOfferData(option.sourceUuid)?.currency"
         :unit="getOfferData(option.sourceUuid)?.unit"
-        :latitude="option.sourceLat"
-        :longitude="option.sourceLon"
         :stages="getRouteStages(option)"
       />
     </div>
diff --git a/app/components/catalog/LocationMiniMap.vue b/app/components/catalog/LocationMiniMap.vue
deleted file mode 100644
index 59a9706..0000000
--- a/app/components/catalog/LocationMiniMap.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div class="rounded-lg overflow-hidden border border-base-300">
-    <ClientOnly>
-      <MapboxMap
-        :key="mapId"
-        :map-id="mapId"
-        :style="`height: ${height}px; width: 100%;`"
-        :options="mapOptions"
-        @load="onMapCreated"
-      />
-
-      <template #fallback>
-        <div :style="`height: ${height}px`" class="w-full bg-base-200 flex items-center justify-center">
-          <span class="loading loading-spinner loading-xs"></span>
-        </div>
-      </template>
-    </ClientOnly>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Map as MapboxMapType } from 'mapbox-gl'
-import { getCurrentInstance } from 'vue'
-
-const props = withDefaults(defineProps<{
-  latitude: number
-  longitude: number
-  height?: number
-}>(), {
-  height: 120
-})
-
-const mapRef = ref<MapboxMapType | null>(null)
-
-const instanceId = getCurrentInstance()?.uid || Math.floor(Math.random() * 100000)
-const mapId = computed(() => `location-mini-map-${instanceId}`)
-
-const mapOptions = computed(() => ({
-  style: 'mapbox://styles/mapbox/streets-v12',
-  center: [props.longitude, props.latitude] as [number, number],
-  zoom: 5,
-  interactive: false,
-  attributionControl: false
-}))
-
-const onMapCreated = (map: MapboxMapType) => {
-  mapRef.value = map
-
-  const initMap = () => {
-    map.addSource('location-point', {
-      type: 'geojson',
-      data: {
-        type: 'Feature',
-        properties: {},
-        geometry: {
-          type: 'Point',
-          coordinates: [props.longitude, props.latitude]
-        }
-      }
-    })
-
-    map.addLayer({
-      id: 'location-point-layer',
-      type: 'circle',
-      source: 'location-point',
-      paint: {
-        'circle-radius': 8,
-        'circle-color': '#10b981',
-        'circle-stroke-width': 2,
-        'circle-stroke-color': '#ffffff'
-      }
-    })
-  }
-
-  if (map.loaded()) {
-    initMap()
-  } else {
-    map.on('load', initMap)
-  }
-}
-
-watch(
-  () => [props.latitude, props.longitude],
-  () => {
-    const map = mapRef.value
-    if (!map) return
-
-    map.setCenter([props.longitude, props.latitude])
-
-    const source = map.getSource('location-point') as mapboxgl.GeoJSONSource | undefined
-    if (source) {
-      source.setData({
-        type: 'Feature',
-        properties: {},
-        geometry: {
-          type: 'Point',
-          coordinates: [props.longitude, props.latitude]
-        }
-      })
-    }
-  }
-)
-</script>
diff --git a/app/components/catalog/OfferResultCard.vue b/app/components/catalog/OfferResultCard.vue
index 69207ef..31980da 100644
--- a/app/components/catalog/OfferResultCard.vue
+++ b/app/components/catalog/OfferResultCard.vue
@@ -1,32 +1,18 @@
 <template>
   <Card padding="md" interactive @click="$emit('select')">
-    <!-- Header: Source name + Location + Price -->
+    <!-- Header: Location + Price -->
     <div class="flex items-start justify-between mb-3">
       <div>
-        <Text weight="semibold">{{ sourceName }}</Text>
-        <Text v-if="locationName" tone="muted" size="sm">{{ locationName }}</Text>
-      </div>
-      <div class="text-right">
-        <Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
-          {{ priceDisplay }}
-        </Text>
+        <Text weight="semibold">{{ locationName || 'Локация' }}</Text>
+        <Text v-if="productName" tone="muted" size="sm">{{ productName }}</Text>
       </div>
+      <Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
+        {{ priceDisplay }}
+      </Text>
     </div>
 
-    <!-- Product name + Route stepper -->
-    <div v-if="productName" class="mb-3">
-      <Text size="sm" class="mb-1">{{ productName }}</Text>
-      <RouteStepper v-if="stages.length > 0" :stages="stages" />
-    </div>
-    <RouteStepper v-else-if="stages.length > 0" :stages="stages" class="mb-3" />
-
-    <!-- Mini map -->
-    <LocationMiniMap
-      v-if="latitude && longitude"
-      :latitude="latitude"
-      :longitude="longitude"
-      :height="100"
-    />
+    <!-- Route stepper -->
+    <RouteStepper v-if="stages.length > 0" :stages="stages" />
   </Card>
 </template>
 
@@ -34,14 +20,11 @@
 import type { RouteStage } from './RouteStepper.vue'
 
 const props = withDefaults(defineProps<{
-  sourceName: string
   locationName?: string
   productName?: string
   pricePerUnit?: number | null
   currency?: string | null
   unit?: string | null
-  latitude?: number | null
-  longitude?: number | null
   stages?: RouteStage[]
 }>(), {
   stages: () => []
diff --git a/app/components/catalog/RouteStepper.vue b/app/components/catalog/RouteStepper.vue
index 83b0829..cb85275 100644
--- a/app/components/catalog/RouteStepper.vue
+++ b/app/components/catalog/RouteStepper.vue
@@ -1,13 +1,14 @@
 <template>
-  <div class="flex items-center gap-1 flex-wrap text-xs">
-    <template v-for="(stage, index) in stages" :key="index">
-      <div v-if="index > 0" class="w-3 h-px bg-base-300" />
-      <div class="flex items-center gap-0.5">
-        <span>{{ getTransportIcon(stage.transportType) }}</span>
-        <span class="text-base-content/70">{{ formatDistance(stage.distanceKm) }}км</span>
-      </div>
-    </template>
-  </div>
+  <ul class="steps steps-horizontal text-xs w-full">
+    <li
+      v-for="(stage, index) in stages"
+      :key="index"
+      class="step step-primary"
+      :data-content="getTransportIcon(stage.transportType)"
+    >
+      {{ formatDistance(stage.distanceKm) }} км
+    </li>
+  </ul>
 </template>
 
 <script setup lang="ts">
@@ -27,6 +28,7 @@ const getTransportIcon = (type?: string | null) => {
     case 'sea':
       return '🚢'
     case 'road':
+    case 'auto':
     default:
       return '🚛'
   }
diff --git a/app/pages/catalog/hubs/[id].vue b/app/pages/catalog/hubs/[id].vue
index 1f2ccf2..46f1339 100644
--- a/app/pages/catalog/hubs/[id].vue
+++ b/app/pages/catalog/hubs/[id].vue
@@ -60,14 +60,11 @@
 
         <template #card="{ item }">
           <OfferResultCard
-            :source-name="item.name"
             :location-name="getOfferData(item.uuid)?.locationName"
             :product-name="selectedProductName"
             :price-per-unit="getOfferData(item.uuid)?.pricePerUnit"
             :currency="getOfferData(item.uuid)?.currency"
             :unit="getOfferData(item.uuid)?.unit"
-            :latitude="item.latitude"
-            :longitude="item.longitude"
             :stages="item.stages"
           />
         </template>