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/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()