Move manager tabs above content canvas

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>