From 7f8a148aa756b03c762944379bef08bba4a84f1a Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 27 Jan 2026 12:30:00 +0700
Subject: [PATCH] feat(catalog): add KYC teaser section to supplier InfoPanel

- Add KYC teaser info section (companyType, registrationYear, status, sourcesCount)
- Use mock data for now (backend integration TBD)
- Add 'open-kyc' emit for full profile navigation
- Add kycProfileUuid field to InfoEntity type
- Add i18n translations for both RU and EN
---
 app/components/catalog/InfoPanel.vue | 58 ++++++++++++++++++++++++++++
 app/composables/useCatalogInfo.ts    |  2 +
 i18n/locales/en/catalog.json         | 14 ++++++-
 i18n/locales/ru/catalog.json         | 10 ++++-
 4 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/app/components/catalog/InfoPanel.vue b/app/components/catalog/InfoPanel.vue
index 3cca251..6026d44 100644
--- a/app/components/catalog/InfoPanel.vue
+++ b/app/components/catalog/InfoPanel.vue
@@ -53,6 +53,51 @@
           </button>
         </div>
 
+        <!-- KYC Teaser Section (for supplier) -->
+        <section v-if="entityType === 'supplier' && kycTeaser" class="bg-white/5 rounded-lg p-3">
+          <h3 class="text-sm font-semibold text-white/80 mb-2 flex items-center gap-2">
+            <Icon name="lucide:shield-check" size="16" />
+            {{ $t('catalog.info.kycTeaser') }}
+          </h3>
+
+          <div class="flex flex-col gap-2 text-sm">
+            <!-- Company Type -->
+            <div class="flex items-center justify-between">
+              <span class="text-white/60">{{ $t('catalog.info.companyType') }}</span>
+              <span class="text-white">{{ kycTeaser.companyType }}</span>
+            </div>
+
+            <!-- Registration Year -->
+            <div class="flex items-center justify-between">
+              <span class="text-white/60">{{ $t('catalog.info.registrationYear') }}</span>
+              <span class="text-white">{{ kycTeaser.registrationYear }}</span>
+            </div>
+
+            <!-- Status -->
+            <div class="flex items-center justify-between">
+              <span class="text-white/60">{{ $t('catalog.info.status') }}</span>
+              <span :class="kycTeaser.isActive ? 'text-success' : 'text-error'">
+                {{ kycTeaser.isActive ? $t('catalog.info.active') : $t('catalog.info.inactive') }}
+              </span>
+            </div>
+
+            <!-- Sources Count -->
+            <div class="flex items-center justify-between">
+              <span class="text-white/60">{{ $t('catalog.info.sourcesCount') }}</span>
+              <span class="text-white">{{ kycTeaser.sourcesCount }}</span>
+            </div>
+          </div>
+
+          <!-- View Full Profile Button -->
+          <button
+            class="btn btn-ghost btn-xs text-primary mt-3 w-full"
+            @click="emit('open-kyc', entity?.kycProfileUuid)"
+          >
+            <Icon name="lucide:external-link" size="14" />
+            {{ $t('catalog.info.viewFullKyc') }}
+          </button>
+        </section>
+
         <!-- Products Section (for hub/supplier) -->
         <section v-if="entityType === 'hub' || entityType === 'supplier'">
           <h3 class="text-sm font-semibold text-white/80 mb-2 flex items-center gap-2">
@@ -166,6 +211,7 @@ const emit = defineEmits<{
   'open-info': [type: InfoEntityType, uuid: string]
   'select-product': [uuid: string | null]
   'update:current-tab': [tab: string]
+  'open-kyc': [uuid: string | undefined]
 }>()
 
 const { t } = useI18n()
@@ -226,6 +272,18 @@ const formatPrice = (price: number | string) => {
   return new Intl.NumberFormat('ru-RU').format(num)
 }
 
+// Mock KYC teaser data (will be replaced with real data later)
+const kycTeaser = computed(() => {
+  if (props.entityType !== 'supplier') return null
+  // Mock data for now
+  return {
+    companyType: 'ООО',
+    registrationYear: 2018,
+    isActive: true,
+    sourcesCount: 3
+  }
+})
+
 // Handlers for selecting related items
 const onProductSelect = (product: InfoProductItem) => {
   emit('select-product', product.uuid)
diff --git a/app/composables/useCatalogInfo.ts b/app/composables/useCatalogInfo.ts
index f6e3bbc..9c111e5 100644
--- a/app/composables/useCatalogInfo.ts
+++ b/app/composables/useCatalogInfo.ts
@@ -63,6 +63,8 @@ export interface InfoEntity {
   unit?: string | null
   // Enriched field from supplier profile
   supplierName?: string | null
+  // KYC profile reference
+  kycProfileUuid?: string | null
 }
 
 // Helper to get coordinates from entity (handles both node and offer patterns)
diff --git a/i18n/locales/en/catalog.json b/i18n/locales/en/catalog.json
index b7b6fec..600d106 100644
--- a/i18n/locales/en/catalog.json
+++ b/i18n/locales/en/catalog.json
@@ -64,7 +64,15 @@
       "noHubs": "No hubs found",
       "noSuppliers": "No suppliers found",
       "viewSupplier": "View supplier",
-      "supplier": "Supplier"
+      "supplier": "Supplier",
+      "kycTeaser": "Company Information",
+      "companyType": "Company Type",
+      "registrationYear": "Registration Year",
+      "status": "Status",
+      "active": "Active",
+      "inactive": "Inactive",
+      "sourcesCount": "Data Sources",
+      "viewFullKyc": "View full company profile"
     },
     "modes": {
       "explore": "Explore",
@@ -83,6 +91,8 @@
       "title": "Explore the market",
       "subtitle": "Switch between offers, hubs, and suppliers"
     },
-    "offers": "offer | offers"
+    "offers": "offer | offers",
+    "list": "List",
+    "applyFilter": "Apply filter"
   }
 }
diff --git a/i18n/locales/ru/catalog.json b/i18n/locales/ru/catalog.json
index e8fbd0e..b6f8a04 100644
--- a/i18n/locales/ru/catalog.json
+++ b/i18n/locales/ru/catalog.json
@@ -64,7 +64,15 @@
       "noHubs": "Хабы не найдены",
       "noSuppliers": "Поставщики не найдены",
       "viewSupplier": "Посмотреть поставщика",
-      "supplier": "Поставщик"
+      "supplier": "Поставщик",
+      "kycTeaser": "Информация о компании",
+      "companyType": "Тип организации",
+      "registrationYear": "Год регистрации",
+      "status": "Статус",
+      "active": "Действующая",
+      "inactive": "Недействующая",
+      "sourcesCount": "Источников данных",
+      "viewFullKyc": "Подробнее о компании"
     },
     "modes": {
       "explore": "Исследовать",