From d7dad079db8a042dd443d17caa2896290ec5bdfb Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Mon, 6 Apr 2026 11:27:51 +0700
Subject: [PATCH] Move manager tabs above content canvas

---
 app/app.vue                       | 82 ++++++++++++++++++++++++++++++-
 app/assets/css/main.css           | 40 +++++++++------
 app/components/users/GridCard.vue | 45 +++++++++++++++++
 app/pages/bonus-system/index.vue  | 54 ++++++--------------
 app/pages/clients/index.vue       | 60 ++--------------------
 5 files changed, 171 insertions(+), 110 deletions(-)
 create mode 100644 app/components/users/GridCard.vue

diff --git a/app/app.vue b/app/app.vue
index cc0e8d9..5819deb 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -9,6 +9,72 @@ const meQuery = useQuery(MeDocument);
 const hasManagerDock = computed(() => (
   !isLoginPage.value && hasManagerAccess(meQuery.result.value?.me?.role)
 ));
+
+const managerPageTabs = computed(() => {
+  if (!hasManagerDock.value) {
+    return [];
+  }
+
+  if (route.path === '/clients') {
+    return [
+      {
+        key: 'users',
+        label: 'Пользователи',
+        active: route.query.tab !== 'requests',
+        to: {
+          path: '/clients',
+          query: {
+            ...route.query,
+            tab: 'users',
+          },
+        },
+      },
+      {
+        key: 'requests',
+        label: 'Заявки',
+        active: route.query.tab === 'requests',
+        to: {
+          path: '/clients',
+          query: {
+            ...route.query,
+            tab: 'requests',
+          },
+        },
+      },
+    ];
+  }
+
+  if (route.path === '/bonus-system') {
+    return [
+      {
+        key: 'balances',
+        label: 'Балансы',
+        active: route.query.tab !== 'withdrawals',
+        to: {
+          path: '/bonus-system',
+          query: {
+            ...route.query,
+            tab: 'balances',
+          },
+        },
+      },
+      {
+        key: 'withdrawals',
+        label: 'Заявки на выплату',
+        active: route.query.tab === 'withdrawals',
+        to: {
+          path: '/bonus-system',
+          query: {
+            ...route.query,
+            tab: 'withdrawals',
+          },
+        },
+      },
+    ];
+  }
+
+  return [];
+});
 </script>
 
 <template>
@@ -18,7 +84,21 @@ const hasManagerDock = computed(() => (
       class="mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]"
       :class="hasManagerDock ? 'pb-[116px] md:pb-[128px]' : ''"
     >
-      <div class="lk-content-canvas">
+      <div v-if="managerPageTabs.length" class="lk-page-tabs-shell">
+        <nav class="manager-page-tabs" aria-label="Разделы страницы">
+          <NuxtLink
+            v-for="tab in managerPageTabs"
+            :key="tab.key"
+            :to="tab.to"
+            class="manager-page-tab"
+            :class="{ 'manager-page-tab--active': tab.active }"
+          >
+            {{ tab.label }}
+          </NuxtLink>
+        </nav>
+      </div>
+
+      <div class="lk-content-canvas" :class="{ 'lk-content-canvas--with-tabs': managerPageTabs.length }">
         <NuxtPage />
       </div>
     </main>
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index bd05cea..b7f51c9 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -11,6 +11,7 @@
   --brand-surface: #f4fbf7;
   --brand-muted: #d8eee1;
   --brand-ink: #0f2f20;
+  --lk-canvas-bg: color-mix(in oklab, #edf3ef 82%, white);
 }
 
 [data-theme='aqua'] {
@@ -96,13 +97,18 @@ body {
 .lk-content-canvas {
   border: 0;
   border-radius: 2rem;
-  background: color-mix(in oklab, #edf3ef 82%, white);
+  background: var(--lk-canvas-bg);
   box-shadow:
     0 18px 46px rgba(16, 73, 44, 0.08),
     inset 0 1px 0 rgba(255, 255, 255, 0.32);
   padding: clamp(1rem, 1.2vw, 1.5rem);
 }
 
+.lk-content-canvas--with-tabs {
+  position: relative;
+  z-index: 1;
+}
+
 .surface-card {
   border: 0;
   background: #fff;
@@ -238,38 +244,44 @@ body {
   color: #557562;
 }
 
+.lk-page-tabs-shell {
+  position: relative;
+  z-index: 2;
+  margin-bottom: -1px;
+  padding-left: clamp(0.75rem, 1.3vw, 1.35rem);
+}
+
 .manager-page-tabs {
   display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  border: 1px solid #d7e9de;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.72);
-  padding: 0.3rem;
+  align-items: flex-end;
+  gap: 0.45rem;
 }
 
 .manager-page-tab {
-  border: 0;
-  border-radius: 999px;
+  border: 1px solid #d7e9de;
+  border-bottom: 0;
+  border-radius: 1.15rem 1.15rem 0 0;
   background: transparent;
-  padding: 0.75rem 1.15rem;
+  margin-bottom: -1px;
+  padding: 0.8rem 1.2rem 0.95rem;
   font-size: 0.95rem;
   font-weight: 700;
   color: #5c7b69;
   transition:
     background-color 0.18s ease,
-    box-shadow 0.18s ease,
+    border-color 0.18s ease,
     color 0.18s ease;
 }
 
 .manager-page-tab:hover {
   color: #123824;
+  border-color: #bfd8ca;
 }
 
 .manager-page-tab--active {
-  background: var(--brand-primary);
-  color: #fff;
-  box-shadow: 0 12px 28px rgba(19, 153, 87, 0.22);
+  background: var(--lk-canvas-bg);
+  color: #123824;
+  border-color: #d2e3da;
 }
 
 .manager-dock-shell {
diff --git a/app/components/users/GridCard.vue b/app/components/users/GridCard.vue
new file mode 100644
index 0000000..fd98331
--- /dev/null
+++ b/app/components/users/GridCard.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  to: string;
+  fullName: string;
+  avatarSrc?: string;
+  initials?: string;
+  metaLabel?: string;
+  metaValue?: string;
+}>(), {
+  avatarSrc: '',
+  initials: 'FR',
+  metaLabel: '',
+  metaValue: '',
+});
+</script>
+
+<template>
+  <NuxtLink
+    :to="to"
+    class="surface-card surface-card-interactive flex flex-col items-center rounded-[32px] p-6 text-center"
+  >
+    <img
+      v-if="avatarSrc"
+      :src="avatarSrc"
+      :alt="fullName"
+      class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
+    >
+    <div
+      v-else
+      class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
+    >
+      {{ initials }}
+    </div>
+
+    <h2 class="mt-8 text-lg font-bold leading-tight text-[#123824]">{{ fullName }}</h2>
+
+    <div
+      v-if="metaLabel && metaValue"
+      class="mt-4 inline-flex flex-wrap items-center justify-center gap-2 rounded-full border border-[#e1c15a] bg-[#fff8dc] px-4 py-2 text-sm text-[#7a5b00]"
+    >
+      <span class="font-semibold">{{ metaLabel }}</span>
+      <span class="font-bold text-[#123824]">{{ metaValue }}</span>
+    </div>
+  </NuxtLink>
+</template>
diff --git a/app/pages/bonus-system/index.vue b/app/pages/bonus-system/index.vue
index d54cdb8..6d08055 100644
--- a/app/pages/bonus-system/index.vue
+++ b/app/pages/bonus-system/index.vue
@@ -22,7 +22,6 @@ type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
 type WithdrawalItem = ManagerWithdrawalRequestsQuery['managerWithdrawalRequests'][number];
 
 const route = useRoute();
-const router = useRouter();
 const search = ref('');
 const balancesQuery = useQuery(ManagerBonusBalancesDocument);
 const referralLinksQuery = useQuery(ManagerReferralLinksDocument);
@@ -35,15 +34,6 @@ const activeTab = computed<'balances' | 'withdrawals'>(() => (
   route.query.tab === 'withdrawals' ? 'withdrawals' : 'balances'
 ));
 
-function setTab(tab: 'balances' | 'withdrawals') {
-  void router.replace({
-    query: {
-      ...route.query,
-      tab,
-    },
-  });
-}
-
 const balances = computed<BalanceItem[]>(() => balancesQuery.result.value?.managerBonusBalances ?? []);
 const referralLinks = computed<ReferralLinkItem[]>(() => referralLinksQuery.result.value?.managerReferralLinks ?? []);
 const users = computed<ManagerUserItem[]>(() => usersQuery.result.value?.managerUsers ?? []);
@@ -130,29 +120,17 @@ function userInitials(fullName: string) {
 
   return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
 }
+
+function formatAmount(value: number) {
+  return new Intl.NumberFormat('ru-RU', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
 </script>
 
 <template>
   <section class="space-y-6">
-    <div class="manager-page-tabs">
-      <button
-        type="button"
-        class="manager-page-tab"
-        :class="{ 'manager-page-tab--active': activeTab === 'balances' }"
-        @click="setTab('balances')"
-      >
-        Балансы
-      </button>
-      <button
-        type="button"
-        class="manager-page-tab"
-        :class="{ 'manager-page-tab--active': activeTab === 'withdrawals' }"
-        @click="setTab('withdrawals')"
-      >
-        Заявки на выплату
-      </button>
-    </div>
-
     <UiSectionSearchHero
       v-model="search"
       title="Бонусы"
@@ -173,20 +151,16 @@ function userInitials(fullName: string) {
         Бонусных связок пока нет.
       </div>
       <div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
-        <NuxtLink
+        <UsersGridCard
           v-for="item in filteredBalances"
           :key="item.userId"
           :to="`/bonus-system/${item.userId}`"
-          class="block surface-card-interactive"
-        >
-          <BonusAccountCard
-            :full-name="item.fullName"
-            :balance="item.balance"
-            :avatar-src="messengerConnectionAvatarSrc(usersById.get(item.userId)?.telegramConnection)"
-            :initials="userInitials(item.fullName)"
-            compact
-          />
-        </NuxtLink>
+          :full-name="item.fullName"
+          :avatar-src="messengerConnectionAvatarSrc(usersById.get(item.userId)?.telegramConnection)"
+          :initials="userInitials(item.fullName)"
+          meta-label="Доступный бонус"
+          :meta-value="formatAmount(item.balance)"
+        />
       </div>
     </template>
 
diff --git a/app/pages/clients/index.vue b/app/pages/clients/index.vue
index 43c08db..29f8ad8 100644
--- a/app/pages/clients/index.vue
+++ b/app/pages/clients/index.vue
@@ -3,7 +3,6 @@ import { useQuery } from '@vue/apollo-composable';
 import {
   ManagerUsersDocument,
   RegistrationRequestsDocument,
-  type ManagerUsersQuery,
   type RegistrationRequestsQuery,
 } from '~/composables/graphql/generated';
 import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
@@ -12,11 +11,9 @@ definePageMeta({
   middleware: ['manager-only'],
 });
 
-type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
 type RequestItem = RegistrationRequestsQuery['registrationRequests'][number];
 
 const route = useRoute();
-const router = useRouter();
 const search = ref('');
 
 const usersQuery = useQuery(ManagerUsersDocument);
@@ -28,15 +25,6 @@ const activeTab = computed<'users' | 'requests'>(() => (
   route.query.tab === 'requests' ? 'requests' : 'users'
 ));
 
-function setTab(tab: 'users' | 'requests') {
-  void router.replace({
-    query: {
-      ...route.query,
-      tab,
-    },
-  });
-}
-
 const filteredUsers = computed(() => {
   const items = usersQuery.result.value?.managerUsers ?? [];
   const query = search.value.trim().toLowerCase();
@@ -108,25 +96,6 @@ function userInitials(fullName: string) {
 
 <template>
   <section class="space-y-6">
-    <div class="manager-page-tabs">
-      <button
-        type="button"
-        class="manager-page-tab"
-        :class="{ 'manager-page-tab--active': activeTab === 'users' }"
-        @click="setTab('users')"
-      >
-        Пользователи
-      </button>
-      <button
-        type="button"
-        class="manager-page-tab"
-        :class="{ 'manager-page-tab--active': activeTab === 'requests' }"
-        @click="setTab('requests')"
-      >
-        Заявки
-      </button>
-    </div>
-
     <UiSectionSearchHero
       v-model="search"
       title="Пользователи"
@@ -147,33 +116,14 @@ function userInitials(fullName: string) {
         Пользователи по текущему запросу не найдены.
       </div>
       <div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
-        <NuxtLink
+        <UsersGridCard
           v-for="user in filteredUsers"
           :key="user.id"
           :to="`/clients/${user.id}`"
-          class="surface-card surface-card-interactive flex min-h-[280px] flex-col rounded-[32px] p-6"
-        >
-          <div class="flex justify-center">
-            <img
-              v-if="messengerConnectionAvatarSrc(user.telegramConnection)"
-              :src="messengerConnectionAvatarSrc(user.telegramConnection)"
-              :alt="user.fullName"
-              class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
-            >
-            <div
-              v-else
-              class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
-            >
-              {{ userInitials(user.fullName) }}
-            </div>
-          </div>
-
-          <div class="flex-1" />
-
-          <div class="pt-8 text-center">
-            <h2 class="text-lg font-bold leading-tight text-[#123824]">{{ user.fullName }}</h2>
-          </div>
-        </NuxtLink>
+          :full-name="user.fullName"
+          :avatar-src="messengerConnectionAvatarSrc(user.telegramConnection)"
+          :initials="userInitials(user.fullName)"
+        />
       </div>
     </template>