Simplify bonus manager cards

app/pages/bonus-system/index.vue

@@ -3,11 +3,14 @@ import { useQuery } from '@vue/apollo-composable';
 import {
   ManagerBonusBalancesDocument,
   ManagerReferralLinksDocument,
+  ManagerUsersDocument,
   ManagerWithdrawalRequestsDocument,
   type ManagerBonusBalancesQuery,
   type ManagerReferralLinksQuery,
+  type ManagerUsersQuery,
   type ManagerWithdrawalRequestsQuery,
 } from '~/composables/graphql/generated';
+import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
 
 definePageMeta({
   middleware: ['manager-only'],
@@ -15,6 +18,7 @@ definePageMeta({
 
 type BalanceItem = ManagerBonusBalancesQuery['managerBonusBalances'][number];
 type ReferralLinkItem = ManagerReferralLinksQuery['managerReferralLinks'][number];
+type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
 type WithdrawalItem = ManagerWithdrawalRequestsQuery['managerWithdrawalRequests'][number];
 
 const route = useRoute();
@@ -22,6 +26,7 @@ const router = useRouter();
 const search = ref('');
 const balancesQuery = useQuery(ManagerBonusBalancesDocument);
 const referralLinksQuery = useQuery(ManagerReferralLinksDocument);
+const usersQuery = useQuery(ManagerUsersDocument);
 const withdrawalsQuery = useQuery(ManagerWithdrawalRequestsDocument, {
   status: 'PENDING',
 });
@@ -41,8 +46,11 @@ function setTab(tab: 'balances' | 'withdrawals') {
 
 const balances = computed<BalanceItem[]>(() => balancesQuery.result.value?.managerBonusBalances ?? []);
 const referralLinks = computed<ReferralLinkItem[]>(() => referralLinksQuery.result.value?.managerReferralLinks ?? []);
+const users = computed<ManagerUserItem[]>(() => usersQuery.result.value?.managerUsers ?? []);
 const withdrawals = computed<WithdrawalItem[]>(() => withdrawalsQuery.result.value?.managerWithdrawalRequests ?? []);
 
+const usersById = computed(() => new Map(users.value.map((user) => [user.id, user])));
+
 const referralLinksByReferrer = computed(() => {
   const grouped = new Map<string, ReferralLinkItem[]>();
 
@@ -109,11 +117,18 @@ const filteredWithdrawals = computed(() => {
   });
 });
 
-function formatAmount(value: number) {
-  return new Intl.NumberFormat('ru-RU', {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-  }).format(value);
+function userInitials(fullName: string) {
+  const parts = fullName
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+
+  if (!parts.length) {
+    return 'FR';
+  }
+
+  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
 }
 </script>
 
@@ -151,29 +166,27 @@ function formatAmount(value: number) {
     </UiSectionSearchHero>
 
     <template v-if="activeTab === 'balances'">
-      <div v-if="balancesQuery.loading.value || referralLinksQuery.loading.value" class="manager-empty-state">
+      <div v-if="balancesQuery.loading.value || referralLinksQuery.loading.value || usersQuery.loading.value" class="manager-empty-state">
         Загружаем балансы...
       </div>
       <div v-else-if="filteredBalances.length === 0" class="manager-empty-state">
         Бонусных связок пока нет.
       </div>
-      <div v-else class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
-        <BonusAccountCard
+      <div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
+        <NuxtLink
           v-for="item in filteredBalances"
           :key="item.userId"
-          :full-name="item.fullName"
-          :email="item.email"
-          :company-name="item.companyName"
-          :balance="item.balance"
-          :stats="[
-            { label: 'Транзакций', value: String(item.transactionsCount) },
-            { label: 'Активных связок', value: String(referralLinksByReferrer.get(item.userId)?.length ?? 0) },
-            { label: 'На выводе', value: formatAmount(item.pendingWithdrawalAmount) },
-          ]"
-          :source-links="referralLinksByReferrer.get(item.userId) ?? []"
-          :detail-to="`/bonus-system/${item.userId}`"
-          detail-label="Открыть"
-        />
+          :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>
       </div>
     </template>