From 39c3d24b3ac1b26ca4a27ff44ffb285552bd5216 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Sun, 25 Jan 2026 16:44:00 +0700
Subject: [PATCH] Fix Info panel - translations, two-step offers flow, icon,
 add to filter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add i18n translations for entities, tabs, and info sections (EN/RU)
- Refactor offers tab to two-step flow (products → offers) for Hub/Supplier
- Replace entity badge with circular icon in header
- Fix "Add to filter" button with name fallback and proper cleanup
- Update selectItem() to clear info param when adding to filter
---
 app/components/catalog/InfoPanel.vue | 106 ++++++++++++++++++---------
 app/composables/useCatalogSearch.ts  |   3 +-
 app/pages/catalog/index.vue          |   4 +-
 i18n/locales/en/catalog.json         |  17 +++++
 i18n/locales/ru/catalog.json         |  17 +++++
 5 files changed, 110 insertions(+), 37 deletions(-)

diff --git a/app/components/catalog/InfoPanel.vue b/app/components/catalog/InfoPanel.vue
index 90068df..5fc238d 100644
--- a/app/components/catalog/InfoPanel.vue
+++ b/app/components/catalog/InfoPanel.vue
@@ -3,9 +3,12 @@
     <template #header>
       <div class="flex items-center justify-between mb-2">
         <div class="flex items-center gap-2">
-          <span class="badge badge-sm" :style="{ backgroundColor: badgeColor }">
-            {{ badgeLabel }}
-          </span>
+          <div
+            class="flex items-center justify-center w-6 h-6 rounded-full"
+            :style="{ backgroundColor: badgeColor }"
+          >
+            <Icon :name="entityIcon" size="14" class="text-white" />
+          </div>
           <h3 class="font-semibold text-base text-base-content">{{ entityName }}</h3>
         </div>
         <button
@@ -48,11 +51,11 @@
 
       <!-- Tab content -->
       <div class="flex flex-col gap-2 min-h-[200px]">
-        <!-- Products tab -->
-        <div v-if="currentTab === 'products'">
+        <!-- Products tab (only for Offer entity) -->
+        <div v-if="currentTab === 'products' && entityType === 'offer'">
           <div v-if="relatedProducts.length === 0" class="text-center py-8 text-white/60">
             <Icon name="lucide:package" size="32" class="mb-2 opacity-50" />
-            <p>{{ $t('catalog.info.noProducts') }}</p>
+            <p>{{ $t('catalog.empty.noProducts') }}</p>
           </div>
           <div v-else class="flex flex-col gap-2">
             <ProductCard
@@ -100,26 +103,58 @@
           </div>
         </div>
 
-        <!-- Offers tab -->
+        <!-- Offers tab (two-step for Hub/Supplier) -->
         <div v-if="currentTab === 'offers'">
-          <div v-if="!selectedProduct" class="text-center py-8 text-white/60">
+          <!-- Step 1: Select product (for Hub/Supplier) -->
+          <div v-if="!selectedProduct && (entityType === 'hub' || entityType === 'supplier')">
+            <div v-if="relatedProducts.length === 0" class="text-center py-8 text-white/60">
+              <Icon name="lucide:package" size="32" class="mb-2 opacity-50" />
+              <p>{{ $t('catalog.empty.noProducts') }}</p>
+            </div>
+            <div v-else class="flex flex-col gap-2">
+              <ProductCard
+                v-for="product in relatedProducts"
+                :key="product.uuid"
+                :product="product"
+                selectable
+                compact
+                @select="onProductSelect(product)"
+              />
+            </div>
+          </div>
+
+          <!-- Step 2: Show offers for selected product -->
+          <div v-else-if="selectedProduct">
+            <!-- Back button to products -->
+            <button
+              class="btn btn-sm btn-ghost mb-2 text-white/80 hover:text-white"
+              @click="emit('select-product', null)"
+            >
+              <Icon name="lucide:arrow-left" size="16" />
+              {{ $t('common.back') }}
+            </button>
+
+            <div v-if="relatedOffers.length === 0" class="text-center py-8 text-white/60">
+              <Icon name="lucide:shopping-bag" size="32" class="mb-2 opacity-50" />
+              <p>{{ $t('catalog.empty.noOffers') }}</p>
+            </div>
+            <div v-else class="flex flex-col gap-2">
+              <OfferCard
+                v-for="offer in relatedOffers"
+                :key="offer.uuid"
+                :offer="offer"
+                selectable
+                compact
+                @select="onOfferSelect(offer)"
+              />
+            </div>
+          </div>
+
+          <!-- For Offer entity type - just show message -->
+          <div v-else class="text-center py-8 text-white/60">
             <Icon name="lucide:info" size="32" class="mb-2 opacity-50" />
             <p>{{ $t('catalog.info.selectProductFirst') }}</p>
           </div>
-          <div v-else-if="relatedOffers.length === 0" class="text-center py-8 text-white/60">
-            <Icon name="lucide:shopping-bag" size="32" class="mb-2 opacity-50" />
-            <p>{{ $t('catalog.info.noOffers') }}</p>
-          </div>
-          <div v-else class="flex flex-col gap-2">
-            <OfferCard
-              v-for="offer in relatedOffers"
-              :key="offer.uuid"
-              :offer="offer"
-              selectable
-              compact
-              @select="onOfferSelect(offer)"
-            />
-          </div>
         </div>
       </div>
 
@@ -158,7 +193,7 @@ const { t } = useI18n()
 const { entityColors } = useCatalogSearch()
 
 // Current active tab
-const currentTab = ref<string>('products')
+const currentTab = ref<string>('offers')
 
 // Entity name
 const entityName = computed(() => {
@@ -180,20 +215,24 @@ const badgeLabel = computed(() => {
   return ''
 })
 
+const entityIcon = computed(() => {
+  if (props.entityType === 'hub') return 'lucide:warehouse'
+  if (props.entityType === 'supplier') return 'lucide:factory'
+  if (props.entityType === 'offer') return 'lucide:shopping-bag'
+  return 'lucide:info'
+})
+
 // Available tabs based on entity type and data
 const availableTabs = computed(() => {
   const tabs: Array<{ id: string; label: string; count?: number }> = []
 
   if (props.entityType === 'hub') {
-    tabs.push({
-      id: 'products',
-      label: t('catalog.tabs.products'),
-      count: props.relatedProducts?.length || 0
-    })
     tabs.push({
       id: 'offers',
       label: t('catalog.tabs.offers'),
-      count: props.relatedOffers?.length || 0
+      count: props.selectedProduct
+        ? props.relatedOffers?.length || 0
+        : props.relatedProducts?.length || 0
     })
     tabs.push({
       id: 'suppliers',
@@ -201,15 +240,12 @@ const availableTabs = computed(() => {
       count: props.relatedSuppliers?.length || 0
     })
   } else if (props.entityType === 'supplier') {
-    tabs.push({
-      id: 'products',
-      label: t('catalog.tabs.products'),
-      count: props.relatedProducts?.length || 0
-    })
     tabs.push({
       id: 'offers',
       label: t('catalog.tabs.offers'),
-      count: props.relatedOffers?.length || 0
+      count: props.selectedProduct
+        ? props.relatedOffers?.length || 0
+        : props.relatedProducts?.length || 0
     })
     tabs.push({
       id: 'hubs',
diff --git a/app/composables/useCatalogSearch.ts b/app/composables/useCatalogSearch.ts
index 3030225..c6acbae 100644
--- a/app/composables/useCatalogSearch.ts
+++ b/app/composables/useCatalogSearch.ts
@@ -210,7 +210,8 @@ export function useCatalogSearch() {
     setLabel(type, id, label)
     updateQuery({
       [type]: id,
-      select: null // Exit selection mode
+      select: null, // Exit selection mode
+      info: null // Exit info mode
     })
   }
 
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index 36f3d40..ff1d90d 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -395,9 +395,11 @@ const onInfoClose = () => {
 const onInfoAddToFilter = () => {
   if (!infoId.value || !entity.value) return
   const { type, uuid } = infoId.value
-  const name = entity.value.name
+  // Fallback for name - offer entities might use productName
+  const name = entity.value.name || entity.value.productName || uuid.slice(0, 8) + '...'
   selectItem(type, uuid, name)
   closeInfo()
+  clearInfo()
 }
 
 const onInfoOpenRelated = (type: 'hub' | 'supplier' | 'offer', uuid: string) => {
diff --git a/i18n/locales/en/catalog.json b/i18n/locales/en/catalog.json
index 9b49d50..f02991d 100644
--- a/i18n/locales/en/catalog.json
+++ b/i18n/locales/en/catalog.json
@@ -1,5 +1,10 @@
 {
   "catalog": {
+    "entities": {
+      "hub": "Hub",
+      "supplier": "Supplier",
+      "offer": "Offer"
+    },
     "filters": {
       "product": "Product",
       "supplier": "Supplier",
@@ -41,6 +46,18 @@
       "offers": "Offers",
       "map": "Map"
     },
+    "tabs": {
+      "products": "Products",
+      "offers": "Offers",
+      "suppliers": "Suppliers",
+      "hubs": "Hubs",
+      "product": "Product",
+      "supplier": "Supplier"
+    },
+    "info": {
+      "selectProductFirst": "Select a product first",
+      "addToFilter": "Add to filter"
+    },
     "modes": {
       "explore": "Explore",
       "quote": "Get Quote"
diff --git a/i18n/locales/ru/catalog.json b/i18n/locales/ru/catalog.json
index d3d1b0b..4dc8b8f 100644
--- a/i18n/locales/ru/catalog.json
+++ b/i18n/locales/ru/catalog.json
@@ -1,5 +1,10 @@
 {
   "catalog": {
+    "entities": {
+      "hub": "Хаб",
+      "supplier": "Поставщик",
+      "offer": "Оффер"
+    },
     "filters": {
       "product": "Товар",
       "supplier": "Поставщик",
@@ -41,6 +46,18 @@
       "offers": "Офферы",
       "map": "Карта"
     },
+    "tabs": {
+      "products": "Товары",
+      "offers": "Офферы",
+      "suppliers": "Поставщики",
+      "hubs": "Хабы",
+      "product": "Товар",
+      "supplier": "Поставщик"
+    },
+    "info": {
+      "selectProductFirst": "Сначала выберите товар",
+      "addToFilter": "Добавить в фильтр"
+    },
     "modes": {
       "explore": "Исследовать",
       "quote": "Найти офферы"