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/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 {