From 886415344d2dfdd7bd8c37aa4d0a6c97909a0f6f Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 29 Jan 2026 16:18:33 +0700
Subject: [PATCH] Glass nav fix + team/profile pages with CatalogPage layout

- Fix glass nav on clientarea pages (add isClientArea to is-collapsed)
- Rewrite team page using CatalogPage with glass panel
- Rewrite profile page using CatalogPage with glass panel
---
 app/layouts/topnav.vue                 |   2 +-
 app/pages/clientarea/profile/index.vue | 166 ++++++++++-------
 app/pages/clientarea/team/index.vue    | 241 +++++++++++++------------
 3 files changed, 228 insertions(+), 181 deletions(-)

diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index be697cc..910637d 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -30,7 +30,7 @@
         :can-search="canSearch"
         :show-mode-toggle="true"
         :show-active-mode="isCatalogSection"
-        :is-collapsed="isHomePage ? heroIsCollapsed : isCatalogSection"
+        :is-collapsed="isHomePage ? heroIsCollapsed : (isCatalogSection || isClientArea)"
         :is-home-page="isHomePage"
         :is-client-area="isClientArea"
         @toggle-theme="toggleTheme"
diff --git a/app/pages/clientarea/profile/index.vue b/app/pages/clientarea/profile/index.vue
index 79f1430..e05a6fd 100644
--- a/app/pages/clientarea/profile/index.vue
+++ b/app/pages/clientarea/profile/index.vue
@@ -1,76 +1,105 @@
 <template>
-  <Section variant="plain" paddingY="md">
-    <Stack gap="6">
-          <PageHeader
-            :title="$t('dashboard.profile')"
-            :actions="[{ label: t('clientProfile.actions.debugTokens'), icon: 'lucide:bug', to: localePath('/clientarea/profile/debug-tokens') }]"
-          />
+  <CatalogPage
+    :items="[]"
+    :loading="isLoading"
+    :use-server-clustering="false"
+    map-id="profile-map"
+    point-color="#10b981"
+    :show-panel="true"
+    panel-width="w-96"
+    :hide-view-toggle="true"
+  >
+    <template #panel>
+      <!-- Error state -->
+      <div v-if="hasError" class="p-4">
+        <div class="bg-error/20 border border-error/30 rounded-lg p-4">
+          <div class="font-semibold text-white mb-2">{{ $t('common.error') }}</div>
+          <div class="text-sm text-white/70">{{ error }}</div>
+        </div>
+      </div>
 
-          <Alert v-if="hasError" variant="error">
-            <Stack gap="1">
-              <Heading :level="4" weight="semibold">{{ $t('common.error') }}</Heading>
-              <Text tone="muted">{{ error }}</Text>
-            </Stack>
-          </Alert>
+      <template v-else>
+        <!-- Panel header -->
+        <div class="p-4 border-b border-white/10 flex-shrink-0">
+          <div class="flex items-center gap-3">
+            <UserAvatar
+              :userId="userData?.id ?? undefined"
+              :firstName="userData?.firstName ?? undefined"
+              :lastName="userData?.lastName ?? undefined"
+              :avatarId="userData?.avatarId ?? undefined"
+              size="md"
+              @avatar-changed="handleAvatarChange"
+            />
+            <div class="flex-1 min-w-0">
+              <div class="font-semibold text-white truncate">
+                {{ userData?.firstName || '' }} {{ userData?.lastName || '' }}
+              </div>
+              <div class="text-xs text-white/50">{{ $t('dashboard.profile') }}</div>
+            </div>
+          </div>
+        </div>
 
-          <Stack v-if="isLoading" align="center" justify="center" gap="3">
-            <Spinner />
-            <Text tone="muted">{{ t('clientProfile.states.loading') }}</Text>
-          </Stack>
+        <!-- Profile form -->
+        <div class="flex-1 overflow-y-auto p-4">
+          <form class="space-y-4" @submit.prevent="updateProfile">
+            <!-- First name -->
+            <div>
+              <label class="block text-xs text-white/50 mb-1">{{ $t('profile.first_name') }}</label>
+              <input
+                v-model="profileForm.firstName"
+                type="text"
+                :placeholder="$t('profile.first_name_placeholder')"
+                class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/30"
+              />
+            </div>
 
-          <template v-else>
-            <Card padding="lg">
-              <Grid :cols="1" :lg="3" :gap="8">
-                <GridItem :lg="2">
-                  <Stack gap="4">
-                    <form @submit.prevent="updateProfile">
-                      <Stack gap="4">
-                        <Input
-                          v-model="profileForm.firstName"
-                          type="text"
-                          :label="$t('profile.first_name')"
-                          :placeholder="$t('profile.first_name_placeholder')"
-                        />
-                        <Input
-                          v-model="profileForm.lastName"
-                          type="text"
-                          :label="$t('profile.last_name')"
-                          :placeholder="$t('profile.last_name_placeholder')"
-                        />
-                        <Input
-                          v-model="profileForm.phone"
-                          type="tel"
-                          :label="$t('profile.phone')"
-                          :placeholder="$t('profile.phone_placeholder')"
-                        />
-                        <Button type="submit" :full-width="true" :disabled="isUpdating">
-                          <template v-if="isUpdating">{{ $t('profile.saving') }}...</template>
-                          <template v-else>{{ $t('profile.save') }}</template>
-                        </Button>
-                      </Stack>
-                    </form>
-                  </Stack>
-                </GridItem>
+            <!-- Last name -->
+            <div>
+              <label class="block text-xs text-white/50 mb-1">{{ $t('profile.last_name') }}</label>
+              <input
+                v-model="profileForm.lastName"
+                type="text"
+                :placeholder="$t('profile.last_name_placeholder')"
+                class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/30"
+              />
+            </div>
 
-                <GridItem>
-                  <Stack gap="6" align="center">
-                    <Stack gap="3" align="center">
-                      <Heading :level="3">{{ $t('profile.avatar') }}</Heading>
-                      <UserAvatar
-                        :userId="userData?.id ?? undefined"
-                        :firstName="userData?.firstName ?? undefined"
-                        :lastName="userData?.lastName ?? undefined"
-                        :avatarId="userData?.avatarId ?? undefined"
-                        @avatar-changed="handleAvatarChange"
-                      />
-                    </Stack>
-                  </Stack>
-                </GridItem>
-              </Grid>
-            </Card>
-          </template>
-        </Stack>
-  </Section>
+            <!-- Phone -->
+            <div>
+              <label class="block text-xs text-white/50 mb-1">{{ $t('profile.phone') }}</label>
+              <input
+                v-model="profileForm.phone"
+                type="tel"
+                :placeholder="$t('profile.phone_placeholder')"
+                class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/30"
+              />
+            </div>
+
+            <!-- Save button -->
+            <button
+              type="submit"
+              class="btn btn-sm w-full bg-primary border-primary text-primary-content hover:bg-primary/80"
+              :disabled="isUpdating"
+            >
+              <template v-if="isUpdating">{{ $t('profile.saving') }}...</template>
+              <template v-else>{{ $t('profile.save') }}</template>
+            </button>
+          </form>
+
+          <!-- Debug tokens link -->
+          <div class="mt-6 pt-4 border-t border-white/10">
+            <NuxtLink
+              :to="localePath('/clientarea/profile/debug-tokens')"
+              class="flex items-center gap-2 text-sm text-white/50 hover:text-white transition-colors"
+            >
+              <Icon name="lucide:bug" size="14" />
+              {{ t('clientProfile.actions.debugTokens') }}
+            </NuxtLink>
+          </div>
+        </div>
+      </template>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -159,7 +188,6 @@ const updateProfile = async () => {
 
 const handleAvatarChange = async (newAvatarId?: string) => {
   if (!newAvatarId) return
-  // Only stage avatar change; will be saved on form submit
   avatarDraftId.value = newAvatarId
 }
 
diff --git a/app/pages/clientarea/team/index.vue b/app/pages/clientarea/team/index.vue
index 78eed84..59cbb8b 100644
--- a/app/pages/clientarea/team/index.vue
+++ b/app/pages/clientarea/team/index.vue
@@ -1,113 +1,136 @@
 <template>
-  <Section variant="plain">
-    <Stack gap="6">
-      <PageHeader :title="t('clientTeam.header.title')" :actions="teamHeaderActions" />
+  <CatalogPage
+    :items="mapPoints"
+    :loading="isLoading"
+    :use-server-clustering="false"
+    map-id="team-map"
+    point-color="#8b5cf6"
+    :show-panel="true"
+    panel-width="w-96"
+    :hide-view-toggle="true"
+  >
+    <template #panel>
+      <!-- Error state -->
+      <div v-if="hasError" class="p-4">
+        <div class="bg-error/20 border border-error/30 rounded-lg p-4">
+          <div class="font-semibold text-white mb-2">{{ t('clientTeam.error.title') }}</div>
+          <div class="text-sm text-white/70 mb-3">{{ error }}</div>
+          <button class="btn btn-sm bg-white/10 border-white/20 text-white" @click="loadUserTeams">
+            {{ t('clientTeam.error.retry') }}
+          </button>
+        </div>
+      </div>
 
-      <Alert v-if="hasError" variant="error">
-        <Stack gap="2">
-          <Heading :level="4" weight="semibold">{{ t('clientTeam.error.title') }}</Heading>
-          <Text tone="muted">{{ error }}</Text>
-          <Button @click="loadUserTeams">{{ t('clientTeam.error.retry') }}</Button>
-        </Stack>
-      </Alert>
-
-      <Card v-else-if="isLoading" tone="muted" padding="lg">
-        <Stack align="center" justify="center" gap="3">
-          <Spinner />
-          <Text tone="muted">{{ t('clientTeam.loading.message') }}</Text>
-        </Stack>
-      </Card>
-
-      <!-- No team - prompt to create KYC application -->
-      <EmptyState
-        v-else-if="!currentTeam"
-        icon="👥"
-        :title="t('clientTeam.empty.title')"
-        :description="t('clientTeam.empty.description')"
-        :action-label="t('clientTeam.empty.cta')"
-        :action-to="localePath('/clientarea/kyc')"
-        action-icon="lucide:plus"
-      />
+      <!-- No team - prompt to create -->
+      <div v-else-if="!currentTeam && !isLoading" class="flex flex-col items-center justify-center h-full p-6 text-center">
+        <div class="text-4xl mb-3">👥</div>
+        <div class="font-semibold text-white mb-2">{{ t('clientTeam.empty.title') }}</div>
+        <div class="text-sm text-white/60 mb-4">{{ t('clientTeam.empty.description') }}</div>
+        <NuxtLink :to="localePath('/clientarea/kyc')">
+          <button class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
+            <Icon name="lucide:plus" size="14" class="mr-1" />
+            {{ t('clientTeam.empty.cta') }}
+          </button>
+        </NuxtLink>
+      </div>
 
       <template v-else>
-        <Card padding="lg">
-          <Stack gap="4">
-            <Stack direction="row" gap="4" align="start" justify="between">
-                <Stack direction="row" gap="3" align="center">
-                  <IconCircle tone="neutral" size="lg">
-                    {{ currentTeam.name?.charAt(0)?.toUpperCase() || '?' }}
-                  </IconCircle>
-                  <Heading :level="2" weight="semibold">{{ currentTeam.name }}</Heading>
-                </Stack>
-              </Stack>
+        <!-- Panel header -->
+        <div class="p-4 border-b border-white/10 flex-shrink-0">
+          <div class="flex items-center gap-3 mb-3">
+            <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-semibold">
+              {{ currentTeam?.name?.charAt(0)?.toUpperCase() || '?' }}
+            </div>
+            <div class="flex-1 min-w-0">
+              <div class="font-semibold text-white truncate">{{ currentTeam?.name }}</div>
+              <div class="text-xs text-white/50">{{ t('clientTeam.members.title') }}</div>
+            </div>
+          </div>
 
-          </Stack>
-        </Card>
+          <!-- Actions -->
+          <div class="flex gap-2">
+            <NuxtLink :to="localePath('/clientarea/kyc')" class="flex-1">
+              <button class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20">
+                <Icon name="lucide:plus" size="14" class="mr-1" />
+                {{ t('clientTeam.actions.addCompany') }}
+              </button>
+            </NuxtLink>
+            <NuxtLink v-if="userTeams.length > 1" :to="localePath('/clientarea/company-switch')">
+              <button class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
+                <Icon name="lucide:arrow-left-right" size="14" />
+              </button>
+            </NuxtLink>
+          </div>
+        </div>
 
-        <Stack gap="3">
-          <Heading :level="2">{{ t('clientTeam.members.title') }}</Heading>
-          <Grid :cols="1" :md="2" :lg="3" :gap="4">
-            <Card
-              v-for="(member, index) in currentTeamMembers"
-              :key="member.user?.id ?? `member-${index}`"
-              padding="lg"
-            >
-              <Stack gap="3">
-                <Stack direction="row" gap="3" align="center">
-                  <IconCircle tone="neutral">{{ getMemberInitials(member.user) }}</IconCircle>
-                  <Stack gap="1">
-                    <Text weight="semibold">{{ member.user?.firstName }} {{ member.user?.lastName || '—' }}</Text>
-                  </Stack>
-                </Stack>
-                <Stack direction="row" gap="2" wrap>
-                  <Pill variant="primary">{{ roleText(member.role) }}</Pill>
-                </Stack>
-              </Stack>
-            </Card>
-
-            <!-- Pending invitations -->
-            <Card
-              v-for="invitation in currentTeamInvitations"
-              :key="invitation.uuid"
-              padding="lg"
-              class="border-dashed border-warning"
-            >
-              <Stack gap="3">
-                <Stack direction="row" gap="3" align="center">
-                  <IconCircle tone="warning">
-                    <Icon name="lucide:mail" size="16" />
-                  </IconCircle>
-                  <Stack gap="1">
-                    <Text weight="semibold">{{ invitation.email }}</Text>
-                    <Text tone="muted" size="sm">{{ t('clientTeam.invitations.pending') }}</Text>
-                  </Stack>
-                </Stack>
-                <Stack direction="row" gap="2" wrap>
-                  <Pill variant="outline" tone="warning">{{ roleText(invitation.role) }}</Pill>
-                  <Pill variant="ghost" tone="muted">{{ t('clientTeam.invitations.sent') }}</Pill>
-                </Stack>
-              </Stack>
-            </Card>
-
-            <Card
-              padding="lg"
-              class="border-2 border-dashed border-base-300 hover:border-primary cursor-pointer transition-colors"
-              @click="inviteMember"
-            >
-              <Stack gap="3" align="center" justify="center" class="h-full min-h-[100px]">
-                <div class="w-10 h-10 rounded-full bg-base-200 flex items-center justify-center text-base-content/50">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
-                  </svg>
+        <!-- Members list -->
+        <div class="flex-1 overflow-y-auto p-3 space-y-2">
+          <!-- Team members -->
+          <div
+            v-for="(member, index) in currentTeamMembers"
+            :key="member.user?.id ?? `member-${index}`"
+            class="bg-white/10 rounded-lg p-3"
+          >
+            <div class="flex items-center gap-3">
+              <div class="avatar placeholder">
+                <div class="w-9 h-9 rounded-full bg-primary text-primary-content text-sm">
+                  <span>{{ getMemberInitials(member.user) }}</span>
                 </div>
-                <Text weight="semibold" tone="muted">{{ t('clientTeam.inviteCard.title') }}</Text>
-              </Stack>
-            </Card>
-          </Grid>
-        </Stack>
+              </div>
+              <div class="flex-1 min-w-0">
+                <div class="font-medium text-sm text-white truncate">
+                  {{ member.user?.firstName }} {{ member.user?.lastName || '' }}
+                </div>
+                <div class="text-xs text-white/50">{{ roleText(member.role) }}</div>
+              </div>
+              <span class="badge badge-primary badge-sm">{{ roleText(member.role) }}</span>
+            </div>
+          </div>
+
+          <!-- Pending invitations -->
+          <div
+            v-for="invitation in currentTeamInvitations"
+            :key="invitation.uuid"
+            class="bg-warning/10 border border-warning/30 rounded-lg p-3"
+          >
+            <div class="flex items-center gap-3">
+              <div class="avatar placeholder">
+                <div class="w-9 h-9 rounded-full bg-warning/20 text-warning flex items-center justify-center">
+                  <Icon name="lucide:mail" size="16" />
+                </div>
+              </div>
+              <div class="flex-1 min-w-0">
+                <div class="font-medium text-sm text-white truncate">{{ invitation.email }}</div>
+                <div class="text-xs text-warning">{{ t('clientTeam.invitations.pending') }}</div>
+              </div>
+              <span class="badge badge-warning badge-outline badge-sm">{{ roleText(invitation.role) }}</span>
+            </div>
+          </div>
+
+          <!-- Add member button -->
+          <button
+            class="w-full bg-white/5 border-2 border-dashed border-white/20 rounded-lg p-4 hover:bg-white/10 hover:border-white/30 transition-colors"
+            @click="inviteMember"
+          >
+            <div class="flex flex-col items-center gap-2 text-white/50">
+              <Icon name="lucide:user-plus" size="20" />
+              <span class="text-sm font-medium">{{ t('clientTeam.inviteCard.title') }}</span>
+            </div>
+          </button>
+        </div>
+
+        <!-- Footer -->
+        <div class="p-3 border-t border-white/10 flex-shrink-0">
+          <span class="text-xs text-white/50">
+            {{ currentTeamMembers.length }} {{ t('clientTeam.members.title').toLowerCase() }}
+            <template v-if="currentTeamInvitations.length > 0">
+              + {{ currentTeamInvitations.length }} {{ t('clientTeam.invitations.pending').toLowerCase() }}
+            </template>
+          </span>
+        </div>
       </template>
-    </Stack>
-  </Section>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -143,14 +166,6 @@ const isLoading = ref(true)
 const hasError = ref(false)
 const error = ref('')
 
-const teamHeaderActions = computed(() => {
-  const actions: Array<{ label: string; icon?: string; to?: string }> = []
-  actions.push({ label: t('clientTeam.actions.addCompany'), icon: 'lucide:plus', to: localePath('/clientarea/kyc') })
-  if (userTeams.value.length > 1) {
-    actions.push({ label: t('clientTeam.actions.switch'), icon: 'lucide:arrow-left-right', to: localePath('/clientarea/company-switch') })
-  }
-  return actions
-})
 const roleText = (role?: string | null) => {
   const map: Record<string, string> = {
     OWNER: t('clientTeam.roles.owner'),
@@ -185,6 +200,11 @@ const currentTeamInvitations = computed(() => {
   return team && 'invitations' in team ? (team.invitations || []).filter((i): i is NonNullable<typeof i> => i !== null) : []
 })
 
+// Map points - empty for now, could show team addresses
+const mapPoints = computed(() => {
+  return []
+})
+
 const loadUserTeams = async () => {
   try {
     isLoading.value = true
@@ -207,7 +227,6 @@ const loadUserTeams = async () => {
         currentTeam.value = firstTeam
       }
     }
-    // Если нет команды - currentTeam остаётся null, показываем EmptyState
   } catch (err: unknown) {
     hasError.value = true
     error.value = err instanceof Error ? err.message : t('clientTeam.error.load')