From 5b620f77b38aca51e4daec9243cae4edf9da5699 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 15 Jan 2026 15:45:26 +0700
Subject: [PATCH] Improve hub page: new RouteStepper, HubProductCard with
 ApexCharts

- Redesign RouteStepper: nodes connected by lines with distance on line
- Add HubProductCard component with sparkline chart background
- Auto-select first product when hub page loads
- Remove placeholder with package-x icon
- Add ApexCharts plugin for charts
- Pass startName/endName to RouteStepper for route visualization
---
 app/components/catalog/HubProductCard.vue  | 112 +++++++++++++++++++++
 app/components/catalog/OfferResultCard.vue |   9 +-
 app/components/catalog/RouteStepper.vue    |  62 ++++++++++--
 app/pages/catalog/hubs/[id].vue            |  28 +++---
 app/plugins/apexcharts.client.ts           |   5 +
 package.json                               |   4 +-
 pnpm-lock.yaml                             |  86 +++++++++++++++-
 7 files changed, 275 insertions(+), 31 deletions(-)
 create mode 100644 app/components/catalog/HubProductCard.vue
 create mode 100644 app/plugins/apexcharts.client.ts

diff --git a/app/components/catalog/HubProductCard.vue b/app/components/catalog/HubProductCard.vue
new file mode 100644
index 0000000..448c91b
--- /dev/null
+++ b/app/components/catalog/HubProductCard.vue
@@ -0,0 +1,112 @@
+<template>
+  <Card
+    padding="md"
+    interactive
+    class="cursor-pointer overflow-hidden min-w-36 shrink-0"
+    :class="{ 'ring-2 ring-primary': selected }"
+    @click="$emit('select')"
+  >
+    <div class="relative min-h-14">
+      <!-- Sparkline chart background -->
+      <div v-if="priceHistory.length > 1" class="absolute inset-0 opacity-15">
+        <ClientOnly>
+          <apexchart
+            type="area"
+            height="56"
+            :options="chartOptions"
+            :series="chartSeries"
+          />
+        </ClientOnly>
+      </div>
+
+      <!-- Content -->
+      <div class="relative z-10">
+        <Text weight="semibold" size="sm" class="mb-1">{{ name }}</Text>
+        <div class="flex items-center gap-2">
+          <Text v-if="currentPrice" size="sm" class="text-primary font-bold">
+            {{ formattedPrice }}
+          </Text>
+          <span
+            v-if="trend !== 0"
+            class="text-xs font-medium"
+            :class="trend > 0 ? 'text-success' : 'text-error'"
+          >
+            {{ trend > 0 ? '↑' : '↓' }} {{ Math.abs(trend) }}%
+          </span>
+        </div>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  name: string
+  currentPrice?: number | null
+  currency?: string | null
+  priceHistory?: number[]
+  selected?: boolean
+}>(), {
+  priceHistory: () => [],
+  selected: false
+})
+
+defineEmits<{
+  select: []
+}>()
+
+const formattedPrice = computed(() => {
+  if (!props.currentPrice) return ''
+  const symbol = getCurrencySymbol(props.currency)
+  return `${symbol}${props.currentPrice.toLocaleString()}`
+})
+
+const getCurrencySymbol = (currency?: string | null) => {
+  switch (currency?.toUpperCase()) {
+    case 'USD': return '$'
+    case 'EUR': return '€'
+    case 'RUB': return '₽'
+    case 'CNY': return '¥'
+    default: return '$'
+  }
+}
+
+// Calculate trend from price history
+const trend = computed(() => {
+  if (props.priceHistory.length < 2) return 0
+  const first = props.priceHistory[0]
+  const last = props.priceHistory[props.priceHistory.length - 1]
+  if (!first || first === 0) return 0
+  return Math.round(((last - first) / first) * 100)
+})
+
+// Chart configuration
+const chartOptions = computed(() => ({
+  chart: {
+    type: 'area',
+    sparkline: { enabled: true },
+    animations: { enabled: false }
+  },
+  stroke: {
+    curve: 'smooth',
+    width: 2
+  },
+  fill: {
+    type: 'gradient',
+    gradient: {
+      shadeIntensity: 1,
+      opacityFrom: 0.4,
+      opacityTo: 0.1
+    }
+  },
+  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
+  tooltip: { enabled: false },
+  xaxis: { labels: { show: false } },
+  yaxis: { labels: { show: false } }
+}))
+
+const chartSeries = computed(() => [{
+  name: 'Price',
+  data: props.priceHistory.length > 0 ? props.priceHistory : [0]
+}])
+</script>
diff --git a/app/components/catalog/OfferResultCard.vue b/app/components/catalog/OfferResultCard.vue
index 31980da..c842ff4 100644
--- a/app/components/catalog/OfferResultCard.vue
+++ b/app/components/catalog/OfferResultCard.vue
@@ -12,7 +12,12 @@
     </div>
 
     <!-- Route stepper -->
-    <RouteStepper v-if="stages.length > 0" :stages="stages" />
+    <RouteStepper
+      v-if="stages.length > 0"
+      :stages="stages"
+      :start-name="startName"
+      :end-name="endName"
+    />
   </Card>
 </template>
 
@@ -26,6 +31,8 @@ const props = withDefaults(defineProps<{
   currency?: string | null
   unit?: string | null
   stages?: RouteStage[]
+  startName?: string
+  endName?: string
 }>(), {
   stages: () => []
 })
diff --git a/app/components/catalog/RouteStepper.vue b/app/components/catalog/RouteStepper.vue
index cb85275..1aedb79 100644
--- a/app/components/catalog/RouteStepper.vue
+++ b/app/components/catalog/RouteStepper.vue
@@ -1,14 +1,41 @@
 <template>
-  <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>
+  <div class="flex items-center w-full py-2">
+    <!-- Start node -->
+    <div class="flex flex-col items-center shrink-0">
+      <div class="w-3 h-3 rounded-full bg-primary border-2 border-primary"></div>
+      <Text v-if="startName" size="xs" tone="muted" class="mt-1 max-w-16 truncate text-center">{{ startName }}</Text>
+    </div>
+
+    <!-- Stages (line + transport icon + distance -> node) -->
+    <template v-for="(stage, i) in stages" :key="i">
+      <!-- Line segment with transport icon and distance -->
+      <div class="flex-1 flex flex-col items-center mx-1 min-w-12">
+        <!-- Line with icon in the middle -->
+        <div class="flex items-center w-full">
+          <div class="h-0.5 bg-primary/60 flex-1"></div>
+          <span class="px-1.5 text-sm" :title="getTransportName(stage.transportType)">
+            {{ getTransportIcon(stage.transportType) }}
+          </span>
+          <div class="h-0.5 bg-primary/60 flex-1"></div>
+        </div>
+        <!-- Distance label -->
+        <Text size="xs" tone="muted" class="mt-0.5 whitespace-nowrap">
+          {{ formatDistance(stage.distanceKm) }} км
+        </Text>
+      </div>
+
+      <!-- Intermediate/End node -->
+      <div class="flex flex-col items-center shrink-0">
+        <div
+          class="rounded-full border-2"
+          :class="i === stages.length - 1 ? 'w-3 h-3 bg-success border-success' : 'w-2.5 h-2.5 bg-base-100 border-primary'"
+        ></div>
+        <Text v-if="i === stages.length - 1 && endName" size="xs" tone="muted" class="mt-1 max-w-16 truncate text-center">
+          {{ endName }}
+        </Text>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +46,8 @@ export interface RouteStage {
 
 defineProps<{
   stages: RouteStage[]
+  startName?: string
+  endName?: string
 }>()
 
 const getTransportIcon = (type?: string | null) => {
@@ -34,6 +63,19 @@ const getTransportIcon = (type?: string | null) => {
   }
 }
 
+const getTransportName = (type?: string | null) => {
+  switch (type) {
+    case 'rail':
+      return 'Ж/Д'
+    case 'sea':
+      return 'Море'
+    case 'road':
+    case 'auto':
+    default:
+      return 'Авто'
+  }
+}
+
 const formatDistance = (km?: number | null) => {
   if (!km) return '0'
   return Math.round(km).toLocaleString()
diff --git a/app/pages/catalog/hubs/[id].vue b/app/pages/catalog/hubs/[id].vue
index 46f1339..ad77ccd 100644
--- a/app/pages/catalog/hubs/[id].vue
+++ b/app/pages/catalog/hubs/[id].vue
@@ -44,17 +44,13 @@
 
         <template #filters>
           <div class="flex gap-3 overflow-x-auto pb-2">
-            <Card
+            <HubProductCard
               v-for="product in products"
               :key="product.uuid"
-              padding="sm"
-              interactive
-              class="min-w-32 cursor-pointer shrink-0"
-              :class="selectedProductUuid === product.uuid ? 'ring-2 ring-primary' : ''"
-              @click="selectedProductUuid = product.uuid"
-            >
-              <Text weight="semibold" size="sm">{{ product.name }}</Text>
-            </Card>
+              :name="product.name"
+              :selected="selectedProductUuid === product.uuid"
+              @select="selectedProductUuid = product.uuid"
+            />
           </div>
         </template>
 
@@ -66,16 +62,13 @@
             :currency="getOfferData(item.uuid)?.currency"
             :unit="getOfferData(item.uuid)?.unit"
             :stages="item.stages"
+            :start-name="item.name"
+            :end-name="hub?.name"
           />
         </template>
 
         <template #empty>
-          <Stack align="center" gap="2">
-            <Icon name="lucide:package-x" size="32" class="text-base-content/40" />
-            <Text tone="muted">
-              {{ selectedProductUuid ? t('catalogHub.sources.empty') : t('catalogHub.sources.selectProduct') }}
-            </Text>
-          </Stack>
+          <Text tone="muted">{{ t('catalogHub.sources.empty') }}</Text>
         </template>
       </CatalogPage>
     </template>
@@ -221,6 +214,11 @@ try {
   products.value = (productsData.value?.getAvailableProducts || [])
     .filter((p): p is { uuid: string; name: string } => p !== null && !!p.uuid && !!p.name)
     .map(p => ({ uuid: p.uuid!, name: p.name! }))
+
+  // Auto-select first product
+  if (products.value.length > 0) {
+    selectedProductUuid.value = products.value[0].uuid
+  }
 } catch (error) {
   console.error('Error loading hub:', error)
 } finally {
diff --git a/app/plugins/apexcharts.client.ts b/app/plugins/apexcharts.client.ts
new file mode 100644
index 0000000..4420ab7
--- /dev/null
+++ b/app/plugins/apexcharts.client.ts
@@ -0,0 +1,5 @@
+import VueApexCharts from 'vue3-apexcharts'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueApexCharts)
+})
diff --git a/package.json b/package.json
index 40079a8..3343684 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@sentry/vue": "^10.29.0",
     "@tailwindcss/vite": "^4.1.17",
     "@vue/apollo-composable": "^4.2.2",
+    "apexcharts": "^5.3.6",
     "eslint": "^9.39.1",
     "mapbox-gl": "^3.17.0",
     "nuxt": "^4.1.0",
@@ -46,7 +47,8 @@
     "pinia": "^3.0.3",
     "vue": "^3.5.20",
     "vue-router": "^4.5.1",
-    "vue-timeline-chart": "^1.1.1"
+    "vue-timeline-chart": "^1.1.1",
+    "vue3-apexcharts": "^1.10.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^6.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 63fd391..de13ee4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       '@vue/apollo-composable':
         specifier: ^4.2.2
         version: 4.2.2(@apollo/client@3.14.0(@types/react@19.2.7)(graphql-ws@6.0.6(crossws@0.3.5)(graphql@16.12.0)(ws@8.18.3))(graphql@16.12.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(graphql@16.12.0)(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
+      apexcharts:
+        specifier: ^5.3.6
+        version: 5.3.6
       eslint:
         specifier: ^9.39.1
         version: 9.39.2(jiti@2.6.1)
@@ -95,6 +98,9 @@ importers:
       vue-timeline-chart:
         specifier: ^1.1.1
         version: 1.2.1(vue@3.5.26(typescript@5.9.3))
+      vue3-apexcharts:
+        specifier: ^1.10.0
+        version: 1.10.0(apexcharts@5.3.6)(vue@3.5.26(typescript@5.9.3))
     devDependencies:
       '@graphql-codegen/cli':
         specifier: ^6.1.0
@@ -3395,6 +3401,31 @@ packages:
     peerDependencies:
       eslint: '>=9.0.0'
 
+  '@svgdotjs/svg.draggable.js@3.0.6':
+    resolution: {integrity: sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==}
+    peerDependencies:
+      '@svgdotjs/svg.js': ^3.2.4
+
+  '@svgdotjs/svg.filter.js@3.0.9':
+    resolution: {integrity: sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==}
+    engines: {node: '>= 0.8.0'}
+
+  '@svgdotjs/svg.js@3.2.5':
+    resolution: {integrity: sha512-/VNHWYhNu+BS7ktbYoVGrCmsXDh+chFMaONMwGNdIBcFHrWqk2jY8fNyr3DLdtQUIalvkPfM554ZSFa3dm3nxQ==}
+
+  '@svgdotjs/svg.resize.js@2.0.5':
+    resolution: {integrity: sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==}
+    engines: {node: '>= 14.18'}
+    peerDependencies:
+      '@svgdotjs/svg.js': ^3.2.4
+      '@svgdotjs/svg.select.js': ^4.0.1
+
+  '@svgdotjs/svg.select.js@4.0.3':
+    resolution: {integrity: sha512-qkMgso1sd2hXKd1FZ1weO7ANq12sNmQJeGDjs46QwDVsxSRcHmvWKL2NDF7Yimpwf3sl5esOLkPqtV2bQ3v/Jg==}
+    engines: {node: '>= 14.18'}
+    peerDependencies:
+      '@svgdotjs/svg.js': ^3.2.4
+
   '@swc/helpers@0.5.18':
     resolution: {integrity: sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==}
 
@@ -4175,6 +4206,9 @@ packages:
   '@xtuc/long@4.2.2':
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
 
+  '@yr/monotone-cubic-spline@1.0.3':
+    resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
+
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -4274,6 +4308,9 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  apexcharts@5.3.6:
+    resolution: {integrity: sha512-sVEPw+J0Gp0IHQabKu8cfdsxlfME0e36Wid7RIaPclGM2OUt+O7O4+6mfAmTUYhy5bDk8cNHzEhPfVtLCIXEJA==}
+
   archiver-utils@5.0.2:
     resolution: {integrity: sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==}
     engines: {node: '>= 14'}
@@ -8298,8 +8335,8 @@ packages:
   vue-component-type-helpers@2.2.12:
     resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
 
-  vue-component-type-helpers@3.2.1:
-    resolution: {integrity: sha512-gKV7XOkQl4urSuLHNY1tnVQf7wVgtb/mKbRyxSLWGZUY9RK7aDPhBenTjm+i8ZFe0zC2PZeHMPtOZXZfyaFOzQ==}
+  vue-component-type-helpers@3.2.2:
+    resolution: {integrity: sha512-x8C2nx5XlUNM0WirgfTkHjJGO/ABBxlANZDtHw2HclHtQnn+RFPTnbjMJn8jHZW4TlUam0asHcA14lf1C6Jb+A==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -8353,6 +8390,12 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  vue3-apexcharts@1.10.0:
+    resolution: {integrity: sha512-sBma2In4rU5n/JBrv8KVb8if+IoY019Dse2yRDD/eRU1WGZHK07zuy9erefKzbJ7T3wP9+Jsy9bH6Vdjy85HZg==}
+    peerDependencies:
+      apexcharts: '>=4.0.0'
+      vue: '>=3.0.0'
+
   vue@3.5.26:
     resolution: {integrity: sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==}
     peerDependencies:
@@ -12882,7 +12925,7 @@ snapshots:
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.5.26(typescript@5.9.3)
-      vue-component-type-helpers: 3.2.1
+      vue-component-type-helpers: 3.2.2
 
   '@stylistic/eslint-plugin@5.6.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
@@ -12894,6 +12937,25 @@ snapshots:
       estraverse: 5.3.0
       picomatch: 4.0.3
 
+  '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.5)':
+    dependencies:
+      '@svgdotjs/svg.js': 3.2.5
+
+  '@svgdotjs/svg.filter.js@3.0.9':
+    dependencies:
+      '@svgdotjs/svg.js': 3.2.5
+
+  '@svgdotjs/svg.js@3.2.5': {}
+
+  '@svgdotjs/svg.resize.js@2.0.5(@svgdotjs/svg.js@3.2.5)(@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5))':
+    dependencies:
+      '@svgdotjs/svg.js': 3.2.5
+      '@svgdotjs/svg.select.js': 4.0.3(@svgdotjs/svg.js@3.2.5)
+
+  '@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5)':
+    dependencies:
+      '@svgdotjs/svg.js': 3.2.5
+
   '@swc/helpers@0.5.18':
     dependencies:
       tslib: 2.8.1
@@ -13922,6 +13984,8 @@ snapshots:
 
   '@xtuc/long@4.2.2': {}
 
+  '@yr/monotone-cubic-spline@1.0.3': {}
+
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0:
@@ -14002,6 +14066,15 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  apexcharts@5.3.6:
+    dependencies:
+      '@svgdotjs/svg.draggable.js': 3.0.6(@svgdotjs/svg.js@3.2.5)
+      '@svgdotjs/svg.filter.js': 3.0.9
+      '@svgdotjs/svg.js': 3.2.5
+      '@svgdotjs/svg.resize.js': 2.0.5(@svgdotjs/svg.js@3.2.5)(@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5))
+      '@svgdotjs/svg.select.js': 4.0.3(@svgdotjs/svg.js@3.2.5)
+      '@yr/monotone-cubic-spline': 1.0.3
+
   archiver-utils@5.0.2:
     dependencies:
       glob: 10.5.0
@@ -18453,7 +18526,7 @@ snapshots:
 
   vue-component-type-helpers@2.2.12: {}
 
-  vue-component-type-helpers@3.2.1: {}
+  vue-component-type-helpers@3.2.2: {}
 
   vue-demi@0.14.10(vue@3.5.26(typescript@5.9.3)):
     dependencies:
@@ -18513,6 +18586,11 @@ snapshots:
     dependencies:
       vue: 3.5.26(typescript@5.9.3)
 
+  vue3-apexcharts@1.10.0(apexcharts@5.3.6)(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      apexcharts: 5.3.6
+      vue: 3.5.26(typescript@5.9.3)
+
   vue@3.5.26(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.26