From 1f996d27e5d1d303d9bbcea942c6f5638a3f6797 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 27 Jan 2026 20:35:32 +0700
Subject: [PATCH] feat(kyc): comprehensive demo profile page with full business
 data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Реквизиты: ИНН, КПП, ОГРН, ОКПО, дата регистрации
- Руководство с ФИО и должностью
- Учредители с долями владения и уставным капиталом
- Контакты: адрес, телефон, email, сайт
- Финансовые показатели: выручка, прибыль, активы, сотрудники
- Арбитражные дела: истец/ответчик с суммами
- Виды деятельности (ОКВЭД) с основным и дополнительными
- История изменений в виде timeline
---
 app/pages/kyc/[uuid].vue | 364 +++++++++++++++++++++++++++++++++------
 1 file changed, 310 insertions(+), 54 deletions(-)

diff --git a/app/pages/kyc/[uuid].vue b/app/pages/kyc/[uuid].vue
index 80fc66e..f444628 100644
--- a/app/pages/kyc/[uuid].vue
+++ b/app/pages/kyc/[uuid].vue
@@ -1,6 +1,6 @@
 <template>
   <div class="min-h-screen bg-base-200">
-    <div class="container mx-auto px-4 py-8 max-w-4xl">
+    <div class="container mx-auto px-4 py-8 max-w-5xl">
       <!-- Back button -->
       <NuxtLink :to="backUrl" class="btn btn-ghost btn-sm mb-4">
         <Icon name="lucide:arrow-left" size="16" />
@@ -8,65 +8,322 @@
       </NuxtLink>
 
       <!-- Mock KYC Profile (demo mode) -->
-      <Card v-if="isDemo" padding="md">
-        <Stack gap="4">
-          <!-- Header -->
-          <div class="flex items-start justify-between">
+      <div v-if="isDemo" class="flex flex-col gap-6">
+        <!-- Header Card -->
+        <Card padding="lg">
+          <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
             <div>
-              <Text weight="semibold" size="lg">{{ $t('kyc.demo.companyName') }}</Text>
-              <div class="flex items-center gap-2 mt-1">
-                <span class="badge badge-outline badge-sm">ООО</span>
-                <span class="text-xs text-base-content/60">с 2018 г.</span>
-                <span class="badge badge-success badge-xs">{{ $t('catalog.info.active') }}</span>
+              <div class="flex items-center gap-3">
+                <div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center">
+                  <Icon name="lucide:building-2" size="32" class="text-primary" />
+                </div>
+                <div>
+                  <Text weight="bold" size="xl">ООО "АГРОТОРГ ПЛЮС"</Text>
+                  <div class="flex items-center gap-2 mt-1">
+                    <span class="badge badge-success">Действующая</span>
+                    <span class="badge badge-outline badge-sm">ООО</span>
+                    <span class="text-sm text-base-content/60">с 2015 года</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col items-end gap-2">
+              <div class="flex items-center gap-2">
+                <Icon name="lucide:shield-check" size="20" class="text-success" />
+                <span class="text-sm font-medium text-success">Верифицирован</span>
+              </div>
+              <span class="text-xs text-base-content/50">Обновлено: {{ new Date().toLocaleDateString('ru-RU') }}</span>
+            </div>
+          </div>
+        </Card>
+
+        <!-- Main Info -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <!-- Left Column -->
+          <div class="flex flex-col gap-6">
+            <!-- Реквизиты -->
+            <Card padding="md">
+              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
+                <Icon name="lucide:file-text" size="20" />
+                Реквизиты
+              </Text>
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <Text tone="muted" size="sm">ИНН</Text>
+                  <Text weight="medium" class="font-mono">7707456789</Text>
+                </div>
+                <div>
+                  <Text tone="muted" size="sm">КПП</Text>
+                  <Text weight="medium" class="font-mono">770701001</Text>
+                </div>
+                <div>
+                  <Text tone="muted" size="sm">ОГРН</Text>
+                  <Text weight="medium" class="font-mono">1157746123456</Text>
+                </div>
+                <div>
+                  <Text tone="muted" size="sm">ОКПО</Text>
+                  <Text weight="medium" class="font-mono">12345678</Text>
+                </div>
+                <div class="col-span-2">
+                  <Text tone="muted" size="sm">Дата регистрации</Text>
+                  <Text weight="medium">15 марта 2015 г.</Text>
+                </div>
+              </div>
+            </Card>
+
+            <!-- Руководство -->
+            <Card padding="md">
+              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
+                <Icon name="lucide:user-cog" size="20" />
+                Руководство
+              </Text>
+              <div class="space-y-3">
+                <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
+                  <div class="avatar placeholder">
+                    <div class="w-10 h-10 rounded-full bg-primary text-primary-content">
+                      <span>ПС</span>
+                    </div>
+                  </div>
+                  <div>
+                    <Text weight="medium">Петров Сергей Александрович</Text>
+                    <Text tone="muted" size="sm">Генеральный директор</Text>
+                  </div>
+                </div>
+              </div>
+            </Card>
+
+            <!-- Учредители -->
+            <Card padding="md">
+              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
+                <Icon name="lucide:users" size="20" />
+                Учредители
+              </Text>
+              <div class="space-y-3">
+                <div class="flex items-center justify-between p-3 bg-base-200 rounded-lg">
+                  <div class="flex items-center gap-3">
+                    <div class="avatar placeholder">
+                      <div class="w-10 h-10 rounded-full bg-secondary text-secondary-content">
+                        <span>ПС</span>
+                      </div>
+                    </div>
+                    <div>
+                      <Text weight="medium">Петров Сергей Александрович</Text>
+                      <Text tone="muted" size="sm">Физическое лицо</Text>
+                    </div>
+                  </div>
+                  <span class="badge badge-primary">60%</span>
+                </div>
+                <div class="flex items-center justify-between p-3 bg-base-200 rounded-lg">
+                  <div class="flex items-center gap-3">
+                    <div class="avatar placeholder">
+                      <div class="w-10 h-10 rounded-full bg-secondary text-secondary-content">
+                        <span>ИА</span>
+                      </div>
+                    </div>
+                    <div>
+                      <Text weight="medium">Иванова Анна Петровна</Text>
+                      <Text tone="muted" size="sm">Физическое лицо</Text>
+                    </div>
+                  </div>
+                  <span class="badge badge-primary">40%</span>
+                </div>
+              </div>
+              <div class="mt-4 pt-4 border-t border-base-200">
+                <div class="flex justify-between">
+                  <Text tone="muted" size="sm">Уставный капитал</Text>
+                  <Text weight="semibold">500 000 ₽</Text>
+                </div>
+              </div>
+            </Card>
+          </div>
+
+          <!-- Right Column -->
+          <div class="flex flex-col gap-6">
+            <!-- Контакты -->
+            <Card padding="md">
+              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
+                <Icon name="lucide:contact" size="20" />
+                Контакты
+              </Text>
+              <div class="space-y-3">
+                <div class="flex items-center gap-3">
+                  <Icon name="lucide:map-pin" size="18" class="text-base-content/50" />
+                  <Text size="sm">123456, г. Москва, ул. Складская, д. 15, оф. 301</Text>
+                </div>
+                <div class="flex items-center gap-3">
+                  <Icon name="lucide:phone" size="18" class="text-base-content/50" />
+                  <Text size="sm">+7 (495) 123-45-67</Text>
+                </div>
+                <div class="flex items-center gap-3">
+                  <Icon name="lucide:mail" size="18" class="text-base-content/50" />
+                  <Text size="sm">info@agrotorg-plus.ru</Text>
+                </div>
+                <div class="flex items-center gap-3">
+                  <Icon name="lucide:globe" size="18" class="text-base-content/50" />
+                  <Text size="sm">www.agrotorg-plus.ru</Text>
+                </div>
+              </div>
+            </Card>
+
+            <!-- Финансы -->
+            <Card padding="md">
+              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
+                <Icon name="lucide:bar-chart-3" size="20" />
+                Финансовые показатели (2024)
+              </Text>
+              <div class="space-y-4">
+                <div>
+                  <div class="flex justify-between mb-1">
+                    <Text tone="muted" size="sm">Выручка</Text>
+                    <Text weight="semibold" class="text-success">↑ 15%</Text>
+                  </div>
+                  <Text weight="bold" size="lg">245 800 000 ₽</Text>
+                </div>
+                <div>
+                  <div class="flex justify-between mb-1">
+                    <Text tone="muted" size="sm">Чистая прибыль</Text>
+                    <Text weight="semibold" class="text-success">↑ 23%</Text>
+                  </div>
+                  <Text weight="bold" size="lg">18 450 000 ₽</Text>
+                </div>
+                <div>
+                  <div class="flex justify-between mb-1">
+                    <Text tone="muted" size="sm">Активы</Text>
+                  </div>
+                  <Text weight="bold" size="lg">89 200 000 ₽</Text>
+                </div>
+                <div class="pt-3 border-t border-base-200">
+                  <div class="flex justify-between">
+                    <Text tone="muted" size="sm">Сотрудников</Text>
+                    <Text weight="medium">47 человек</Text>
+                  </div>
+                </div>
+              </div>
+            </Card>
+
+            <!-- Арбитраж -->
+            <Card padding="md">
+              <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
+                <Icon name="lucide:scale" size="20" />
+                Арбитражные дела
+              </Text>
+              <div class="space-y-3">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2">
+                    <span class="badge badge-warning badge-sm">Истец</span>
+                    <Text size="sm">3 дела</Text>
+                  </div>
+                  <Text weight="medium" size="sm">1 250 000 ₽</Text>
+                </div>
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2">
+                    <span class="badge badge-error badge-sm">Ответчик</span>
+                    <Text size="sm">1 дело</Text>
+                  </div>
+                  <Text weight="medium" size="sm">320 000 ₽</Text>
+                </div>
+                <div class="pt-3 border-t border-base-200">
+                  <Text tone="muted" size="xs">Завершенных: 2 выигранных, 1 урегулировано</Text>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+
+        <!-- Виды деятельности -->
+        <Card padding="md">
+          <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
+            <Icon name="lucide:briefcase" size="20" />
+            Виды деятельности (ОКВЭД)
+          </Text>
+          <div class="space-y-2">
+            <div class="flex items-start gap-3 p-3 bg-primary/5 rounded-lg border border-primary/20">
+              <span class="badge badge-primary badge-sm mt-0.5">Основной</span>
+              <div>
+                <Text weight="medium" size="sm">46.21 - Торговля оптовая зерном, необработанным табаком, семенами и кормами для сельскохозяйственных животных</Text>
+              </div>
+            </div>
+            <div class="flex items-start gap-3 p-3 bg-base-200 rounded-lg">
+              <span class="badge badge-ghost badge-sm mt-0.5">Доп.</span>
+              <Text size="sm">46.11 - Деятельность агентов по оптовой торговле сельскохозяйственным сырьем</Text>
+            </div>
+            <div class="flex items-start gap-3 p-3 bg-base-200 rounded-lg">
+              <span class="badge badge-ghost badge-sm mt-0.5">Доп.</span>
+              <Text size="sm">52.10 - Деятельность по складированию и хранению</Text>
+            </div>
+            <div class="flex items-start gap-3 p-3 bg-base-200 rounded-lg">
+              <span class="badge badge-ghost badge-sm mt-0.5">Доп.</span>
+              <Text size="sm">49.41 - Деятельность автомобильного грузового транспорта</Text>
+            </div>
+          </div>
+        </Card>
+
+        <!-- История изменений -->
+        <Card padding="md">
+          <Text weight="semibold" size="lg" class="mb-4 flex items-center gap-2">
+            <Icon name="lucide:history" size="20" />
+            История изменений
+          </Text>
+          <div class="relative">
+            <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-base-300" />
+            <div class="space-y-4">
+              <div class="flex gap-4 relative">
+                <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center z-10">
+                  <Icon name="lucide:check" size="16" class="text-primary-content" />
+                </div>
+                <div class="flex-1 pb-4">
+                  <Text weight="medium" size="sm">Смена юридического адреса</Text>
+                  <Text tone="muted" size="xs">12 января 2024</Text>
+                </div>
+              </div>
+              <div class="flex gap-4 relative">
+                <div class="w-8 h-8 rounded-full bg-base-300 flex items-center justify-center z-10">
+                  <Icon name="lucide:user-plus" size="16" />
+                </div>
+                <div class="flex-1 pb-4">
+                  <Text weight="medium" size="sm">Изменение состава учредителей</Text>
+                  <Text tone="muted" size="xs">5 августа 2023</Text>
+                </div>
+              </div>
+              <div class="flex gap-4 relative">
+                <div class="w-8 h-8 rounded-full bg-base-300 flex items-center justify-center z-10">
+                  <Icon name="lucide:banknote" size="16" />
+                </div>
+                <div class="flex-1 pb-4">
+                  <Text weight="medium" size="sm">Увеличение уставного капитала</Text>
+                  <Text tone="muted" size="xs">20 марта 2022</Text>
+                </div>
+              </div>
+              <div class="flex gap-4 relative">
+                <div class="w-8 h-8 rounded-full bg-base-300 flex items-center justify-center z-10">
+                  <Icon name="lucide:building" size="16" />
+                </div>
+                <div class="flex-1">
+                  <Text weight="medium" size="sm">Регистрация компании</Text>
+                  <Text tone="muted" size="xs">15 марта 2015</Text>
+                </div>
               </div>
             </div>
           </div>
+        </Card>
 
-          <!-- Details grid -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <Text tone="muted" size="sm">ИНН</Text>
-              <Text weight="medium">7707083893</Text>
-            </div>
-            <div>
-              <Text tone="muted" size="sm">ОГРН</Text>
-              <Text weight="medium">1027700132195</Text>
-            </div>
-            <div>
-              <Text tone="muted" size="sm">{{ $t('kyc.demo.director') }}</Text>
-              <Text weight="medium">Иванов Иван Иванович</Text>
-            </div>
-            <div>
-              <Text tone="muted" size="sm">{{ $t('kyc.demo.capital') }}</Text>
-              <Text weight="medium">10 000 ₽</Text>
-            </div>
-            <div class="md:col-span-2">
-              <Text tone="muted" size="sm">{{ $t('kyc.demo.address') }}</Text>
-              <Text weight="medium">г. Москва, ул. Примерная, д. 1</Text>
-            </div>
-            <div class="md:col-span-2">
-              <Text tone="muted" size="sm">{{ $t('kyc.demo.activities') }}</Text>
-              <div class="flex flex-wrap gap-1 mt-1">
-                <span class="badge badge-ghost badge-sm">Оптовая торговля</span>
-                <span class="badge badge-ghost badge-sm">Логистика</span>
-                <span class="badge badge-ghost badge-sm">Складские услуги</span>
-              </div>
-            </div>
+        <!-- Sources Footer -->
+        <div class="flex flex-wrap items-center justify-between gap-4 text-xs text-base-content/50 px-2">
+          <div class="flex items-center gap-4">
+            <span class="flex items-center gap-1">
+              <Icon name="lucide:database" size="14" />
+              Источники: ЕГРЮЛ, ФНС, Росстат, Арбитр
+            </span>
           </div>
+          <span>Данные актуальны на {{ new Date().toLocaleDateString('ru-RU') }}</span>
+        </div>
 
-          <!-- Footer -->
-          <div class="flex items-center justify-between text-xs text-base-content/50 pt-2 border-t border-base-200">
-            <span>{{ $t('kyc.demo.sources') }}: ЕГРЮЛ, ФНС, Росстат</span>
-            <span>{{ $t('kyc.demo.updated') }}: {{ new Date().toLocaleDateString('ru-RU') }}</span>
-          </div>
-
-          <!-- Demo notice -->
-          <div class="alert alert-info">
-            <Icon name="lucide:info" size="16" />
-            <span>{{ $t('kyc.demo.notice') }}</span>
-          </div>
-        </Stack>
-      </Card>
+        <!-- Demo notice -->
+        <div class="alert alert-info">
+          <Icon name="lucide:info" size="16" />
+          <span>{{ $t('kyc.demo.notice') }}</span>
+        </div>
+      </div>
 
       <!-- Real KYC Profile Card -->
       <KycProfileCard v-else :kyc-profile-uuid="uuid" />
@@ -87,7 +344,6 @@ const isDemo = computed(() => uuid.value === 'demo-kyc-profile')
 
 // Back URL - try to go back to previous page or catalog
 const backUrl = computed(() => {
-  // If there's a referrer from catalog, use it
   return localePath('/catalog')
 })
 </script>