From f4afd362eb44d894765331ba3965db8c0ad8bab9 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 29 Jan 2026 16:34:58 +0700
Subject: [PATCH] Rewrite team/profile/orders pages with bottom sheet (not side
 panel)

- All three pages now use CatalogPage + bottom sheet from bottom (70vh)
- Glass style: bg-black/40 backdrop-blur-xl rounded-t-2xl
- Drag handle at top
- Two-column grid layout for team/profile
- Orders list with search and filter
- Map visible in background
---
 app/pages/clientarea/orders/index.vue  | 191 ++++++++++--------
 app/pages/clientarea/profile/index.vue | 228 ++++++++++++---------
 app/pages/clientarea/team/index.vue    | 265 +++++++++++++------------
 3 files changed, 381 insertions(+), 303 deletions(-)

diff --git a/app/pages/clientarea/orders/index.vue b/app/pages/clientarea/orders/index.vue
index 2bac047..7e7c473 100644
--- a/app/pages/clientarea/orders/index.vue
+++ b/app/pages/clientarea/orders/index.vue
@@ -1,92 +1,119 @@
 <template>
-  <CatalogPage
-    :items="mapPoints"
-    :loading="isLoading"
-    :use-server-clustering="false"
-    map-id="orders-map"
-    point-color="#6366f1"
-    :hovered-id="hoveredOrderId"
-    :show-panel="true"
-    panel-width="w-1/2"
-    :hide-view-toggle="true"
-    @select="onMapSelect"
-    @update:hovered-id="hoveredOrderId = $event"
-  >
-    <template #panel>
-      <!-- Panel header -->
-      <div class="p-4 border-b border-white/10 flex-shrink-0">
-        <div class="flex items-center justify-between mb-3">
-          <span class="font-semibold">{{ t('cabinetNav.orders') }}</span>
+  <div>
+    <CatalogPage
+      :items="mapPoints"
+      :loading="isLoading"
+      :use-server-clustering="false"
+      map-id="orders-map"
+      point-color="#6366f1"
+      :hovered-id="hoveredOrderId"
+      :show-panel="false"
+      :hide-view-toggle="true"
+      @select="onMapSelect"
+      @update:hovered-id="hoveredOrderId = $event"
+    />
+
+    <!-- Bottom Sheet -->
+    <div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
+      <!-- Glass sheet -->
+      <div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
+        <!-- Drag handle -->
+        <div class="flex justify-center py-2">
+          <div class="w-12 h-1.5 bg-white/30 rounded-full" />
         </div>
 
-        <!-- Search -->
-        <div class="relative mb-3">
-          <input
-            v-model="searchQuery"
-            type="text"
-            :placeholder="t('common.search')"
-            class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
-          />
-          <Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
-        </div>
-
-        <!-- Filter dropdown -->
-        <div class="dropdown dropdown-end w-full">
-          <label tabindex="0" class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20 justify-between">
-            <span>{{ selectedFilterLabel }}</span>
-            <Icon name="lucide:chevron-down" size="14" />
-          </label>
-          <ul tabindex="0" class="dropdown-content menu menu-sm z-50 p-2 shadow bg-base-200 rounded-box w-full mt-2">
-            <li v-for="filter in filters" :key="filter.id">
-              <a
-                :class="{ 'active': selectedFilter === filter.id }"
-                @click="selectedFilter = filter.id"
-              >{{ filter.label }}</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <!-- Orders list -->
-      <div class="flex-1 overflow-y-auto p-3 space-y-2">
-        <template v-if="displayItems.length > 0">
-          <div
-            v-for="item in displayItems"
-            :key="item.uuid"
-            class="bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-colors cursor-pointer"
-            @mouseenter="hoveredOrderId = item.uuid"
-            @mouseleave="hoveredOrderId = undefined"
-            @click="onSelectOrder(item)"
-          >
-            <div class="flex items-center justify-between mb-1">
-              <span class="font-semibold text-sm">#{{ item.name }}</span>
-              <span class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
-                {{ getStatusText(item.status) }}
-              </span>
-            </div>
-            <div class="text-xs text-white/60 truncate">
-              {{ item.sourceLocationName }} → {{ item.destinationLocationName }}
-            </div>
-            <div class="text-xs text-white/50 mt-1">
-              {{ getOrderDate(item) }}
+        <!-- Header -->
+        <div class="px-6 pb-4 border-b border-white/10">
+          <div class="flex items-center justify-between mb-3">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-xl bg-indigo-500/20 flex items-center justify-center">
+                <Icon name="lucide:package" size="20" class="text-indigo-400" />
+              </div>
+              <div>
+                <div class="font-bold text-white">{{ t('cabinetNav.orders') }}</div>
+                <div class="text-xs text-white/50">{{ filteredItems.length }} {{ t('orders.total', 'total') }}</div>
+              </div>
             </div>
           </div>
-        </template>
-        <template v-else>
-          <div class="text-center py-8">
-            <div class="text-3xl mb-2">📦</div>
-            <div class="font-semibold text-sm mb-1">{{ t('orders.no_orders') }}</div>
-            <div class="text-xs text-white/60">{{ t('orders.no_orders_desc') }}</div>
-          </div>
-        </template>
-      </div>
 
-      <!-- Footer -->
-      <div class="p-3 border-t border-white/10 flex-shrink-0">
-        <span class="text-xs text-white/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
+          <!-- Search -->
+          <div class="relative mb-3">
+            <input
+              v-model="searchQuery"
+              type="text"
+              :placeholder="t('common.search')"
+              class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
+            />
+            <Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
+          </div>
+
+          <!-- Filter dropdown -->
+          <div class="dropdown dropdown-end w-full">
+            <label tabindex="0" class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20 justify-between">
+              <span>{{ selectedFilterLabel }}</span>
+              <Icon name="lucide:chevron-down" size="14" />
+            </label>
+            <ul tabindex="0" class="dropdown-content menu menu-sm z-50 p-2 shadow bg-base-200 rounded-box w-full mt-2">
+              <li v-for="filter in filters" :key="filter.id">
+                <a
+                  :class="{ 'active': selectedFilter === filter.id }"
+                  @click="selectedFilter = filter.id"
+                >{{ filter.label }}</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Scrollable content -->
+        <div class="overflow-y-auto h-[calc(70vh-180px)] px-6 py-4">
+          <template v-if="displayItems.length > 0">
+            <div class="space-y-2">
+              <div
+                v-for="item in displayItems"
+                :key="item.uuid"
+                class="bg-white/5 rounded-xl p-4 border border-white/10 hover:bg-white/10 transition-colors cursor-pointer"
+                @mouseenter="hoveredOrderId = item.uuid"
+                @mouseleave="hoveredOrderId = undefined"
+                @click="onSelectOrder(item)"
+              >
+                <div class="flex items-center justify-between mb-2">
+                  <span class="font-semibold text-white">#{{ item.name }}</span>
+                  <span class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
+                    {{ getStatusText(item.status) }}
+                  </span>
+                </div>
+                <div class="text-sm text-white/70 mb-1">
+                  <div class="flex items-center gap-2">
+                    <Icon name="lucide:map-pin" size="14" class="text-white/40" />
+                    {{ item.sourceLocationName }}
+                  </div>
+                  <div class="flex items-center gap-2 mt-1">
+                    <Icon name="lucide:navigation" size="14" class="text-white/40" />
+                    {{ item.destinationLocationName }}
+                  </div>
+                </div>
+                <div class="text-xs text-white/50 mt-2">
+                  {{ getOrderDate(item) }}
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div class="text-center py-12">
+              <div class="text-4xl mb-3">📦</div>
+              <div class="font-semibold text-white mb-1">{{ t('orders.no_orders') }}</div>
+              <div class="text-sm text-white/60">{{ t('orders.no_orders_desc') }}</div>
+            </div>
+          </template>
+        </div>
+
+        <!-- Footer -->
+        <div class="px-6 py-3 border-t border-white/10">
+          <span class="text-xs text-white/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
+        </div>
       </div>
-    </template>
-  </CatalogPage>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/app/pages/clientarea/profile/index.vue b/app/pages/clientarea/profile/index.vue
index e05a6fd..53a9422 100644
--- a/app/pages/clientarea/profile/index.vue
+++ b/app/pages/clientarea/profile/index.vue
@@ -1,105 +1,135 @@
 <template>
-  <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>
+    <CatalogPage
+      :items="[]"
+      :loading="false"
+      :use-server-clustering="false"
+      map-id="profile-map"
+      point-color="#10b981"
+      :show-panel="false"
+      :hide-view-toggle="true"
+    />
+
+    <!-- Bottom Sheet -->
+    <div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
+      <!-- Glass sheet -->
+      <div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
+        <!-- Drag handle -->
+        <div class="flex justify-center py-2">
+          <div class="w-12 h-1.5 bg-white/30 rounded-full" />
+        </div>
+
+        <!-- Header -->
+        <div class="px-6 pb-4 border-b border-white/10">
+          <!-- Error state -->
+          <div v-if="hasError" 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>
+
+          <!-- Profile header -->
+          <template v-else>
+            <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="lg"
+                @avatar-changed="handleAvatarChange"
+              />
+              <div>
+                <div class="font-bold text-lg text-white">
+                  {{ userData?.firstName || '' }} {{ userData?.lastName || '' }}
+                </div>
+                <div class="text-xs text-white/50">{{ $t('dashboard.profile') }}</div>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <!-- Scrollable content -->
+        <div v-if="!hasError" class="overflow-y-auto h-[calc(70vh-120px)] px-6 py-4">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <!-- Profile form -->
+            <div class="bg-white/5 rounded-xl p-4 border border-white/10">
+              <div class="font-semibold text-white mb-4 flex items-center gap-2">
+                <Icon name="lucide:user" size="18" />
+                {{ $t('profile.personal_info', 'Personal Information') }}
+              </div>
+
+              <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>
+
+                <!-- 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>
+
+                <!-- 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>
+            </div>
+
+            <!-- Settings -->
+            <div class="bg-white/5 rounded-xl p-4 border border-white/10">
+              <div class="font-semibold text-white mb-4 flex items-center gap-2">
+                <Icon name="lucide:settings" size="18" />
+                {{ $t('profile.settings', 'Settings') }}
+              </div>
+
+              <div class="space-y-3">
+                <!-- Debug tokens link -->
+                <NuxtLink
+                  :to="localePath('/clientarea/profile/debug-tokens')"
+                  class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors"
+                >
+                  <Icon name="lucide:bug" size="18" class="text-white/50" />
+                  <div>
+                    <div class="text-sm text-white">{{ t('clientProfile.actions.debugTokens') }}</div>
+                    <div class="text-xs text-white/50">{{ t('clientProfile.actions.debugTokensDesc', 'View authentication tokens') }}</div>
+                  </div>
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-
-      <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>
-
-        <!-- 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>
-
-            <!-- 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>
-
-            <!-- 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>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/app/pages/clientarea/team/index.vue b/app/pages/clientarea/team/index.vue
index 59cbb8b..dbce1b5 100644
--- a/app/pages/clientarea/team/index.vue
+++ b/app/pages/clientarea/team/index.vue
@@ -1,136 +1,163 @@
 <template>
-  <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>
+    <CatalogPage
+      :items="[]"
+      :loading="false"
+      :use-server-clustering="false"
+      map-id="team-map"
+      point-color="#8b5cf6"
+      :show-panel="false"
+      :hide-view-toggle="true"
+    />
+
+    <!-- Bottom Sheet -->
+    <div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
+      <!-- Glass sheet -->
+      <div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
+        <!-- Drag handle -->
+        <div class="flex justify-center py-2">
+          <div class="w-12 h-1.5 bg-white/30 rounded-full" />
         </div>
-      </div>
 
-      <!-- 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>
-        <!-- 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>
+        <!-- Header -->
+        <div class="px-6 pb-4 border-b border-white/10">
+          <!-- Error state -->
+          <div v-if="hasError" 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>
 
-          <!-- 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')">
+          <!-- No team -->
+          <div v-else-if="!currentTeam && !isLoading" class="text-center py-4">
+            <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:arrow-left-right" size="14" />
+                <Icon name="lucide:plus" size="14" class="mr-1" />
+                {{ t('clientTeam.empty.cta') }}
               </button>
             </NuxtLink>
           </div>
+
+          <!-- Team header -->
+          <template v-else>
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
+                  <Icon name="lucide:building-2" size="24" class="text-primary" />
+                </div>
+                <div>
+                  <div class="font-bold text-lg text-white">{{ currentTeam?.name }}</div>
+                  <div class="flex items-center gap-2 mt-0.5">
+                    <span class="badge badge-success badge-sm">{{ t('catalog.info.active') }}</span>
+                    <span class="text-xs text-white/50">{{ t('clientTeam.members.title') }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="flex gap-2">
+                <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" />
+                  </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>
+          </template>
         </div>
 
-        <!-- 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>
+        <!-- Scrollable content -->
+        <div v-if="currentTeam" class="overflow-y-auto h-[calc(70vh-120px)] px-6 py-4">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <!-- Team members -->
+            <div class="bg-white/5 rounded-xl p-4 border border-white/10">
+              <div class="font-semibold text-white mb-3 flex items-center gap-2">
+                <Icon name="lucide:users" size="18" />
+                {{ t('clientTeam.members.title') }}
+              </div>
+              <div class="space-y-2">
+                <div
+                  v-for="(member, index) in currentTeamMembers"
+                  :key="member.user?.id ?? `member-${index}`"
+                  class="flex items-center justify-between p-2 bg-white/5 rounded-lg"
+                >
+                  <div class="flex items-center gap-2">
+                    <div class="avatar placeholder">
+                      <div class="w-8 h-8 rounded-full bg-primary text-primary-content text-xs">
+                        <span>{{ getMemberInitials(member.user) }}</span>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="text-sm text-white">{{ member.user?.firstName }} {{ member.user?.lastName || '' }}</div>
+                      <div class="text-xs text-white/50">{{ roleText(member.role) }}</div>
+                    </div>
+                  </div>
+                  <span class="badge badge-primary badge-sm">{{ roleText(member.role) }}</span>
+                </div>
+
+                <!-- Empty state -->
+                <div v-if="currentTeamMembers.length === 0" class="text-center py-4 text-white/50 text-sm">
+                  {{ t('clientTeam.members.empty', 'No members yet') }}
                 </div>
               </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>
+
+            <!-- Invitations -->
+            <div class="bg-white/5 rounded-xl p-4 border border-white/10">
+              <div class="font-semibold text-white mb-3 flex items-center gap-2">
+                <Icon name="lucide:mail" size="18" />
+                {{ t('clientTeam.invitations.title', 'Pending Invitations') }}
               </div>
-              <span class="badge badge-primary badge-sm">{{ roleText(member.role) }}</span>
+              <div class="space-y-2">
+                <div
+                  v-for="invitation in currentTeamInvitations"
+                  :key="invitation.uuid"
+                  class="flex items-center justify-between p-2 bg-warning/10 rounded-lg border border-warning/20"
+                >
+                  <div class="flex items-center gap-2">
+                    <div class="avatar placeholder">
+                      <div class="w-8 h-8 rounded-full bg-warning/20 text-warning flex items-center justify-center">
+                        <Icon name="lucide:mail" size="14" />
+                      </div>
+                    </div>
+                    <div>
+                      <div class="text-sm text-white">{{ invitation.email }}</div>
+                      <div class="text-xs text-warning">{{ t('clientTeam.invitations.pending') }}</div>
+                    </div>
+                  </div>
+                  <span class="badge badge-warning badge-outline badge-sm">{{ roleText(invitation.role) }}</span>
+                </div>
+
+                <!-- Empty state -->
+                <div v-if="currentTeamInvitations.length === 0" class="text-center py-4 text-white/50 text-sm">
+                  {{ t('clientTeam.invitations.empty', 'No pending invitations') }}
+                </div>
+              </div>
+
+              <!-- Invite button -->
+              <button
+                class="mt-4 w-full bg-white/5 border border-dashed border-white/20 rounded-lg p-3 hover:bg-white/10 transition-colors"
+                @click="inviteMember"
+              >
+                <div class="flex items-center justify-center gap-2 text-white/50">
+                  <Icon name="lucide:user-plus" size="16" />
+                  <span class="text-sm">{{ t('clientTeam.inviteCard.title') }}</span>
+                </div>
+              </button>
             </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>
-    </template>
-  </CatalogPage>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -189,7 +216,6 @@ const getMemberInitials = (user?: TeamMember | null) => {
   return (first + last).toUpperCase() || user.id?.charAt(0).toUpperCase() || '??'
 }
 
-// Type-safe accessors for TeamWithMembers properties
 const currentTeamMembers = computed(() => {
   const team = currentTeam.value
   return team && 'members' in team ? (team.members || []).filter((m): m is NonNullable<typeof m> => m !== null) : []
@@ -200,11 +226,6 @@ 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