webapp/app/pages/kyc/[uuid].vue

<template>
  <div class="min-h-screen bg-base-200">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
      <!-- Back button -->
      <NuxtLink :to="backUrl" class="btn btn-ghost btn-sm mb-4">
        <Icon name="lucide:arrow-left" size="16" />
        {{ $t('common.back') }}
      </NuxtLink>

      <!-- Mock KYC Profile (demo mode) -->
      <Card v-if="isDemo" padding="md">
        <Stack gap="4">
          <!-- Header -->
          <div class="flex items-start justify-between">
            <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>
            </div>
          </div>

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

      <!-- Real KYC Profile Card -->
      <KycProfileCard v-else :kyc-profile-uuid="uuid" />
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'topnav'
})

const route = useRoute()
const localePath = useLocalePath()

const uuid = computed(() => route.params.uuid as string)
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>