From fd057528dccda5b7fc8dc53e5e692df5c9260a48 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 19 Jan 2026 12:16:58 +0700
Subject: [PATCH] chore(catalog): simplify nested page headers, remove charts

- Remove chart components and unused price history code
- Simplify headers to show only hint text
- Keep navigation badges in search bar
---
 app/pages/catalog/hubs/[id]/[productId].vue   | 91 +----------------
 app/pages/catalog/hubs/[id]/index.vue         | 24 +----
 .../catalog/offers/[productId]/[hubId].vue    | 91 +----------------
 .../catalog/offers/[productId]/index.vue      | 79 +--------------
 .../[supplierId]/[productId]/[hubId].vue      | 97 +------------------
 .../[supplierId]/[productId]/index.vue        | 89 +----------------
 .../catalog/suppliers/[supplierId]/index.vue  | 41 +-------
 7 files changed, 11 insertions(+), 501 deletions(-)

diff --git a/app/pages/catalog/hubs/[id]/[productId].vue b/app/pages/catalog/hubs/[id]/[productId].vue
index 47391a2..1474912 100644
--- a/app/pages/catalog/hubs/[id]/[productId].vue
+++ b/app/pages/catalog/hubs/[id]/[productId].vue
@@ -43,30 +43,7 @@
         </template>
 
         <template #header>
-          <Stack gap="3">
-            <!-- Product info -->
-            <div>
-              <Heading :level="1">{{ product.name }}</Heading>
-              <Text tone="muted" size="sm">{{ hub.name }}, {{ hub.country }}</Text>
-            </div>
-
-            <!-- Price chart -->
-            <Card padding="md">
-              <Stack gap="2">
-                <Text weight="semibold" size="sm">{{ t('catalogHub.product.priceHistory') }}</Text>
-                <div class="h-48">
-                  <ClientOnly>
-                    <apexchart
-                      type="area"
-                      height="180"
-                      :options="chartOptions"
-                      :series="chartSeries"
-                    />
-                  </ClientOnly>
-                </div>
-              </Stack>
-            </Card>
-          </Stack>
+          <Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
         </template>
 
         <template #card="{ item }">
@@ -149,72 +126,6 @@ const handleRemoveFilter = (filterId: string) => {
   }
 }
 
-// Mock price history generator (seeded by uuid for consistent results)
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 30 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.3) * 30 + Math.cos(seed * 0.2 + i) * 15
-    return Math.round(basePrice + variation)
-  })
-}
-
-// Chart configuration
-const priceHistory = computed(() => getMockPriceHistory(productId.value))
-
-const trend = computed(() => {
-  if (priceHistory.value.length < 2) return 0
-  const first = priceHistory.value[0]
-  const last = priceHistory.value[priceHistory.value.length - 1]
-  if (!first || first === 0) return 0
-  return Math.round(((last - first) / first) * 100)
-})
-
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    toolbar: { show: false },
-    animations: { enabled: true }
-  },
-  stroke: {
-    curve: 'smooth',
-    width: 2
-  },
-  fill: {
-    type: 'gradient',
-    gradient: {
-      shadeIntensity: 1,
-      opacityFrom: 0.4,
-      opacityTo: 0.1
-    }
-  },
-  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
-  dataLabels: { enabled: false },
-  xaxis: {
-    categories: priceHistory.value.map((_, i) => `${i + 1}`),
-    labels: { show: false }
-  },
-  yaxis: {
-    labels: {
-      formatter: (val: number) => `$${val}`
-    }
-  },
-  tooltip: {
-    y: {
-      formatter: (val: number) => `$${val}`
-    }
-  },
-  grid: {
-    borderColor: '#e5e7eb',
-    strokeDashArray: 4
-  }
-}))
-
-const chartSeries = computed(() => [{
-  name: t('catalogHub.product.price'),
-  data: priceHistory.value
-}])
-
 // Transform sources for CatalogPage
 const sources = computed(() => {
   return rawSources.value.map(source => ({
diff --git a/app/pages/catalog/hubs/[id]/index.vue b/app/pages/catalog/hubs/[id]/index.vue
index 74b2e3d..841b8d3 100644
--- a/app/pages/catalog/hubs/[id]/index.vue
+++ b/app/pages/catalog/hubs/[id]/index.vue
@@ -19,28 +19,8 @@
     </template>
 
     <template #header>
-      <!-- Not Found -->
-      <Card v-if="!isLoading && !hub" padding="lg">
-        <Stack align="center" gap="4">
-          <IconCircle tone="primary">
-            <Icon name="lucide:map-pin" size="24" />
-          </IconCircle>
-          <Heading :level="2">{{ t('catalogHub.not_found.title') }}</Heading>
-          <Text tone="muted">{{ t('catalogHub.not_found.subtitle') }}</Text>
-          <Button @click="navigateTo(localePath('/catalog'))">
-            {{ t('catalogHub.actions.back_to_catalog') }}
-          </Button>
-        </Stack>
-      </Card>
-
-      <!-- Content Header -->
-      <Stack v-else gap="4">
-        <!-- Header -->
-        <div>
-          <Heading :level="1">{{ hub?.name }}</Heading>
-          <Text tone="muted" size="sm">{{ hub?.country }}</Text>
-        </div>
-      </Stack>
+      <Text v-if="!isLoading && !hub" tone="muted">Хаб не найден</Text>
+      <Text v-else-if="!isLoading" tone="muted">Выберите товар</Text>
     </template>
 
     <template #card="{ item }">
diff --git a/app/pages/catalog/offers/[productId]/[hubId].vue b/app/pages/catalog/offers/[productId]/[hubId].vue
index a092251..9fd701f 100644
--- a/app/pages/catalog/offers/[productId]/[hubId].vue
+++ b/app/pages/catalog/offers/[productId]/[hubId].vue
@@ -43,30 +43,7 @@
         </template>
 
         <template #header>
-          <Stack gap="3">
-            <!-- Product info -->
-            <div>
-              <Heading :level="1">{{ product.name }}</Heading>
-              <Text tone="muted" size="sm">{{ t('catalogProductHubs.calculation.destination') }}: {{ hub.name }}, {{ hub.country }}</Text>
-            </div>
-
-            <!-- Price chart -->
-            <Card padding="md">
-              <Stack gap="2">
-                <Text weight="semibold" size="sm">{{ t('catalogProductHubs.chart.title') }}</Text>
-                <div class="h-48">
-                  <ClientOnly>
-                    <apexchart
-                      type="area"
-                      height="180"
-                      :options="chartOptions"
-                      :series="chartSeries"
-                    />
-                  </ClientOnly>
-                </div>
-              </Stack>
-            </Card>
-          </Stack>
+          <Text v-if="sources.length === 0 && !isLoadingRoutes" tone="muted">Нет доступных источников</Text>
         </template>
 
         <template #card="{ item }">
@@ -149,72 +126,6 @@ const handleRemoveFilter = (filterId: string) => {
   }
 }
 
-// Mock price history generator (seeded by uuid for consistent results)
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 30 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.3) * 30 + Math.cos(seed * 0.2 + i) * 15
-    return Math.round(basePrice + variation)
-  })
-}
-
-// Chart configuration
-const priceHistory = computed(() => getMockPriceHistory(productId.value))
-
-const trend = computed(() => {
-  if (priceHistory.value.length < 2) return 0
-  const first = priceHistory.value[0]
-  const last = priceHistory.value[priceHistory.value.length - 1]
-  if (!first || first === 0) return 0
-  return Math.round(((last - first) / first) * 100)
-})
-
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    toolbar: { show: false },
-    animations: { enabled: true }
-  },
-  stroke: {
-    curve: 'smooth',
-    width: 2
-  },
-  fill: {
-    type: 'gradient',
-    gradient: {
-      shadeIntensity: 1,
-      opacityFrom: 0.4,
-      opacityTo: 0.1
-    }
-  },
-  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
-  dataLabels: { enabled: false },
-  xaxis: {
-    categories: priceHistory.value.map((_, i) => `${i + 1}`),
-    labels: { show: false }
-  },
-  yaxis: {
-    labels: {
-      formatter: (val: number) => `$${val}`
-    }
-  },
-  tooltip: {
-    y: {
-      formatter: (val: number) => `$${val}`
-    }
-  },
-  grid: {
-    borderColor: '#e5e7eb',
-    strokeDashArray: 4
-  }
-}))
-
-const chartSeries = computed(() => [{
-  name: t('catalogProductHubs.chart.price'),
-  data: priceHistory.value
-}])
-
 // Transform sources for CatalogPage
 const sources = computed(() => {
   return rawSources.value.map(source => ({
diff --git a/app/pages/catalog/offers/[productId]/index.vue b/app/pages/catalog/offers/[productId]/index.vue
index 8a4bff6..7ddb257 100644
--- a/app/pages/catalog/offers/[productId]/index.vue
+++ b/app/pages/catalog/offers/[productId]/index.vue
@@ -23,42 +23,8 @@
     </template>
 
     <template #header>
-      <!-- Product Not Found -->
-      <Card v-if="!isLoading && !product" padding="lg">
-        <Stack align="center" gap="4">
-          <IconCircle tone="primary">
-            <Icon name="lucide:package-x" size="24" />
-          </IconCircle>
-          <Heading :level="2">{{ t('catalogProductHubs.not_found.title') }}</Heading>
-          <Text tone="muted">{{ t('catalogProductHubs.not_found.subtitle') }}</Text>
-          <Button @click="navigateTo(localePath('/catalog/offers'))">
-            {{ t('catalogProductHubs.actions.back_to_products') }}
-          </Button>
-        </Stack>
-      </Card>
-
-      <!-- Content Header -->
-      <Stack v-else gap="4">
-        <!-- Header -->
-        <div>
-          <Heading :level="1">{{ product?.name }}</Heading>
-          <Text tone="muted" size="sm">{{ t('catalogProductHubs.header.subtitle', { count: hubs.length }) }}</Text>
-        </div>
-
-        <!-- Price chart -->
-        <Card padding="md">
-          <div class="h-48">
-            <ClientOnly>
-              <apexchart
-                type="area"
-                height="180"
-                :options="chartOptions"
-                :series="chartSeries"
-              />
-            </ClientOnly>
-          </div>
-        </Card>
-      </Stack>
+      <Text v-if="!isLoading && !product" tone="muted">Товар не найден</Text>
+      <Text v-else-if="!isLoading" tone="muted">Выберите хаб</Text>
     </template>
 
     <template #card="{ item }">
@@ -134,47 +100,6 @@ const onSelectHub = (hub: any) => {
   navigateTo(localePath(`/catalog/offers/${productId.value}/${hub.uuid}`))
 }
 
-// Mock price history generator
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 30 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.3) * 20 + Math.cos(seed * 0.2 + i) * 15
-    return Math.round(basePrice + variation)
-  })
-}
-
-const priceHistory = computed(() => product.value ? getMockPriceHistory(product.value.uuid) : [])
-
-// Chart configuration
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    sparkline: { enabled: false },
-    toolbar: { show: false },
-    animations: { enabled: false }
-  },
-  stroke: { curve: 'smooth', width: 2 },
-  fill: {
-    type: 'gradient',
-    gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1 }
-  },
-  colors: ['#3b82f6'],
-  xaxis: {
-    labels: { show: false },
-    axisBorder: { show: false },
-    axisTicks: { show: false }
-  },
-  yaxis: { labels: { show: true } },
-  grid: { show: true, borderColor: '#e5e7eb', strokeDashArray: 4 },
-  tooltip: { enabled: true }
-}))
-
-const chartSeries = computed(() => [{
-  name: t('catalogProductHubs.chart.price'),
-  data: priceHistory.value
-}])
-
 // Initial load
 try {
   // Get offers for this product from geo
diff --git a/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue b/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
index 3b3a74d..b92ba86 100644
--- a/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
+++ b/app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue
@@ -15,55 +15,7 @@
     </template>
 
     <template #header>
-      <!-- Not Found -->
-      <Card v-if="!isLoading && (!supplier || !product || !hub)" padding="lg">
-        <Stack align="center" gap="4">
-          <IconCircle tone="primary">
-            <Icon name="lucide:package-x" size="24" />
-          </IconCircle>
-          <Heading :level="2">{{ t('catalogSupplierCalculation.not_found.title') }}</Heading>
-          <Text tone="muted">{{ t('catalogSupplierCalculation.not_found.subtitle') }}</Text>
-          <Button @click="navigateTo(localePath(`/catalog/suppliers/${supplierId}/${productId}`))">
-            {{ t('catalogSupplierCalculation.actions.back_to_hubs') }}
-          </Button>
-        </Stack>
-      </Card>
-
-      <!-- Content Header -->
-      <Stack v-else gap="4">
-        <!-- Header -->
-        <div>
-          <Heading :level="1">{{ product?.name }}</Heading>
-          <div class="flex flex-col gap-1 mt-1">
-            <Text tone="muted" size="sm">
-              {{ t('catalogSupplierCalculation.header.supplier') }}: {{ supplier?.name }}
-            </Text>
-            <Text tone="muted" size="sm">
-              {{ t('catalogSupplierCalculation.header.from') }}: {{ sourceLocation?.name || t('common.values.not_available') }}
-            </Text>
-            <Text tone="muted" size="sm">
-              {{ t('catalogSupplierCalculation.header.to') }}: {{ hub?.name }}, {{ hub?.country }}
-            </Text>
-          </div>
-        </div>
-
-        <!-- Price chart -->
-        <Card padding="md">
-          <Stack gap="2">
-            <Text weight="semibold" size="sm">{{ t('catalogSupplierCalculation.chart.title') }}</Text>
-            <div class="h-48">
-              <ClientOnly>
-                <apexchart
-                  type="area"
-                  height="180"
-                  :options="chartOptions"
-                  :series="chartSeries"
-                />
-              </ClientOnly>
-            </div>
-          </Stack>
-        </Card>
-      </Stack>
+      <Text v-if="!isLoading && (!supplier || !product || !hub)" tone="muted">Данные не найдены</Text>
     </template>
 
     <template #card="{ item }">
@@ -241,53 +193,6 @@ const getTransportIcon = (type?: string | null) => {
   }
 }
 
-// Mock price history generator
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 30 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.3) * 30 + Math.cos(seed * 0.2 + i) * 15
-    return Math.round(basePrice + variation)
-  })
-}
-
-const priceHistory = computed(() => product.value ? getMockPriceHistory(product.value.uuid) : [])
-
-const trend = computed(() => {
-  if (priceHistory.value.length < 2) return 0
-  const first = priceHistory.value[0]
-  const last = priceHistory.value[priceHistory.value.length - 1]
-  if (!first || first === 0) return 0
-  return Math.round(((last - first) / first) * 100)
-})
-
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    toolbar: { show: false },
-    animations: { enabled: true }
-  },
-  stroke: { curve: 'smooth', width: 2 },
-  fill: {
-    type: 'gradient',
-    gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1 }
-  },
-  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
-  dataLabels: { enabled: false },
-  xaxis: {
-    categories: priceHistory.value.map((_, i) => `${i + 1}`),
-    labels: { show: false }
-  },
-  yaxis: { labels: { formatter: (val: number) => `$${val}` } },
-  tooltip: { y: { formatter: (val: number) => `$${val}` } },
-  grid: { borderColor: '#e5e7eb', strokeDashArray: 4 }
-}))
-
-const chartSeries = computed(() => [{
-  name: t('catalogSupplierCalculation.chart.price'),
-  data: priceHistory.value
-}])
-
 // Load route using delivery to hub
 const loadRoute = async (offerUuid: string) => {
   if (!offerUuid || !hubId.value) {
diff --git a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue b/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
index f7f768a..45f8d03 100644
--- a/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/[productId]/index.vue
@@ -21,52 +21,8 @@
     </template>
 
     <template #header>
-      <!-- Not Found -->
-      <Card v-if="!isLoading && (!supplier || !product)" padding="lg">
-        <Stack align="center" gap="4">
-          <IconCircle tone="primary">
-            <Icon name="lucide:package-x" size="24" />
-          </IconCircle>
-          <Heading :level="2">{{ t('catalogSupplierProductHubs.not_found.title') }}</Heading>
-          <Text tone="muted">{{ t('catalogSupplierProductHubs.not_found.subtitle') }}</Text>
-          <Button @click="navigateTo(localePath(`/catalog/suppliers/${supplierId}`))">
-            {{ t('catalogSupplierProductHubs.actions.back_to_supplier') }}
-          </Button>
-        </Stack>
-      </Card>
-
-      <!-- Content Header -->
-      <Stack v-else gap="4">
-        <!-- Header -->
-        <div>
-          <Heading :level="1">{{ product?.name }}</Heading>
-          <Text tone="muted" size="sm">
-            {{ t('catalogSupplierProductHubs.header.from_supplier', { supplier: supplier?.name }) }}
-          </Text>
-          <Text tone="muted" size="sm" v-if="sourceLocation">
-            {{ t('catalogSupplierProductHubs.header.source_location', { location: sourceLocation.name }) }}
-          </Text>
-        </div>
-
-        <!-- Price chart -->
-        <Card padding="md">
-          <div class="h-48">
-            <ClientOnly>
-              <apexchart
-                type="area"
-                height="180"
-                :options="chartOptions"
-                :series="chartSeries"
-              />
-            </ClientOnly>
-          </div>
-        </Card>
-
-        <!-- Hubs Section Title -->
-        <Text weight="semibold" size="lg">
-          {{ t('catalogSupplierProductHubs.header.hubs_title', { count: hubs.length }) }}
-        </Text>
-      </Stack>
+      <Text v-if="!isLoading && (!supplier || !product)" tone="muted">Товар не найден</Text>
+      <Text v-else-if="!isLoading" tone="muted">Выберите хаб</Text>
     </template>
 
     <template #card="{ item }">
@@ -159,47 +115,6 @@ const onSelectHub = (hub: any) => {
   navigateTo(localePath(`/catalog/suppliers/${supplierId.value}/${productId.value}/${hub.uuid}`))
 }
 
-// Mock price history generator
-const getMockPriceHistory = (uuid: string): number[] => {
-  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const basePrice = 100 + (seed % 200)
-  return Array.from({ length: 30 }, (_, i) => {
-    const variation = Math.sin(seed + i * 0.3) * 20 + Math.cos(seed * 0.2 + i) * 15
-    return Math.round(basePrice + variation)
-  })
-}
-
-const priceHistory = computed(() => product.value ? getMockPriceHistory(product.value.uuid) : [])
-
-// Chart configuration
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    sparkline: { enabled: false },
-    toolbar: { show: false },
-    animations: { enabled: false }
-  },
-  stroke: { curve: 'smooth', width: 2 },
-  fill: {
-    type: 'gradient',
-    gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1 }
-  },
-  colors: ['#3b82f6'],
-  xaxis: {
-    labels: { show: false },
-    axisBorder: { show: false },
-    axisTicks: { show: false }
-  },
-  yaxis: { labels: { show: true } },
-  grid: { show: true, borderColor: '#e5e7eb', strokeDashArray: 4 },
-  tooltip: { enabled: true }
-}))
-
-const chartSeries = computed(() => [{
-  name: t('catalogSupplierProductHubs.chart.price'),
-  data: priceHistory.value
-}])
-
 // Load data
 try {
   // Get supplier profile from exchange
diff --git a/app/pages/catalog/suppliers/[supplierId]/index.vue b/app/pages/catalog/suppliers/[supplierId]/index.vue
index d954487..a7a53da 100644
--- a/app/pages/catalog/suppliers/[supplierId]/index.vue
+++ b/app/pages/catalog/suppliers/[supplierId]/index.vue
@@ -19,45 +19,8 @@
     </template>
 
     <template #header>
-      <!-- Supplier Not Found -->
-      <Card v-if="!isLoading && !supplier" padding="lg">
-        <Stack align="center" gap="4">
-          <IconCircle tone="primary">
-            <Icon name="lucide:building-2" size="24" />
-          </IconCircle>
-          <Heading :level="2">{{ t('catalogSupplierProducts.not_found.title') }}</Heading>
-          <Text tone="muted">{{ t('catalogSupplierProducts.not_found.subtitle') }}</Text>
-          <Button @click="navigateTo(localePath('/catalog/suppliers'))">
-            {{ t('catalogSupplierProducts.actions.back_to_suppliers') }}
-          </Button>
-        </Stack>
-      </Card>
-
-      <!-- Content Header -->
-      <Stack v-else gap="4">
-        <!-- Header with supplier info -->
-        <div class="flex items-start gap-4">
-          <!-- Logo -->
-          <div v-if="supplier?.logo" class="w-16 h-16 shrink-0">
-            <img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded-lg">
-          </div>
-          <div v-else class="w-16 h-16 bg-primary/10 text-primary font-bold rounded-lg flex items-center justify-center text-2xl shrink-0">
-            {{ supplier?.name?.charAt(0) }}
-          </div>
-          <div>
-            <Heading :level="1">{{ supplier?.name }}</Heading>
-            <Text tone="muted" size="sm">{{ supplier?.country }}</Text>
-            <div class="flex gap-2 mt-1">
-              <span v-if="supplier?.isVerified" class="badge badge-success badge-sm">
-                {{ t('catalogSupplier.badges.verified') }}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Products Section Title -->
-        <Text weight="semibold" size="lg">{{ t('catalogSupplierProducts.header.products_title', { count: products.length }) }}</Text>
-      </Stack>
+      <Text v-if="!isLoading && !supplier" tone="muted">Поставщик не найден</Text>
+      <Text v-else-if="!isLoading" tone="muted">Выберите товар</Text>
     </template>
 
     <template #card="{ item }">