Separate manager page tabs from hero

app/assets/css/main.css

@@ -238,6 +238,40 @@ body {
   color: #557562;
 }
 
+.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;
+}
+
+.manager-page-tab {
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  padding: 0.75rem 1.15rem;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #5c7b69;
+  transition:
+    background-color 0.18s ease,
+    box-shadow 0.18s ease,
+    color 0.18s ease;
+}
+
+.manager-page-tab:hover {
+  color: #123824;
+}
+
+.manager-page-tab--active {
+  background: var(--brand-primary);
+  color: #fff;
+  box-shadow: 0 12px 28px rgba(19, 153, 87, 0.22);
+}
+
 .manager-dock-shell {
   position: fixed;
   inset-inline: 0;

app/pages/bonus-system/index.vue

@@ -134,6 +134,25 @@ 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 === '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="Бонусы"
@@ -144,25 +163,6 @@ function userInitials(fullName: string) {
           Добавить связь
         </NuxtLink>
       </template>
-
-      <template #tabs>
-        <div class="tabs tabs-boxed w-fit bg-white">
-          <button
-            class="tab"
-            :class="{ 'tab-active': activeTab === 'balances' }"
-            @click="setTab('balances')"
-          >
-            Балансы
-          </button>
-          <button
-            class="tab"
-            :class="{ 'tab-active': activeTab === 'withdrawals' }"
-            @click="setTab('withdrawals')"
-          >
-            Заявки на выплату
-          </button>
-        </div>
-      </template>
     </UiSectionSearchHero>
 
     <template v-if="activeTab === 'balances'">

app/pages/clients/index.vue

@@ -108,30 +108,30 @@ 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="Пользователи"
       :search-placeholder="activeTab === 'users' ? 'Имя пользователя' : 'Компания, контакт, email или ИНН'"
     >
-      <template #tabs>
-        <div class="tabs tabs-boxed w-fit bg-white">
-          <button
-            class="tab"
-            :class="{ 'tab-active': activeTab === 'users' }"
-            @click="setTab('users')"
-          >
-            Пользователи
-          </button>
-          <button
-            class="tab"
-            :class="{ 'tab-active': activeTab === 'requests' }"
-            @click="setTab('requests')"
-          >
-            Заявки
-          </button>
-        </div>
-      </template>
-
       <template #controls>
         <NuxtLink to="/clients/invite" class="btn btn-primary border-0">
           Пригласить