Simplify bonus manager cards

app/pages/bonus-system/[userId].vue

@@ -61,15 +61,7 @@ function formatDateTime(value: string) {
     </div>
 
     <template v-else>
-      <div class="manager-hero">
-        <p class="manager-eyebrow">Бонусы</p>
-        <h1 class="manager-title">{{ bonusAccount.fullName }}</h1>
-        <p class="manager-copy">
-          История начислений, активные связки и заявки на вывод по бонусной программе клиента.
-        </p>
-      </div>
-
-      <div class="grid gap-4 xl:grid-cols-[minmax(0,420px)_minmax(0,1fr)]">
+      <div class="space-y-4">
         <BonusAccountCard
           :full-name="bonusAccount.fullName"
           :email="bonusAccount.email"
@@ -79,70 +71,62 @@ function formatDateTime(value: string) {
           :source-links="bonusAccount.referralLinks"
         />
 
-        <div class="space-y-4">
-          <div class="surface-card rounded-3xl p-5">
-            <div class="flex items-center justify-between gap-3">
-              <h2 class="text-xl font-bold text-[#123824]">Заявки на вывод</h2>
-              <span class="text-sm text-[#5c7b69]">{{ pendingWithdrawals.length }}</span>
-            </div>
+        <div class="surface-card rounded-[32px] p-6">
+          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Начисления</p>
 
-            <div v-if="pendingWithdrawals.length === 0" class="manager-empty-state mt-4">
-              Активных заявок на вывод нет.
-            </div>
-
-            <div v-else class="mt-4 space-y-3">
-              <article
-                v-for="withdrawal in pendingWithdrawals"
-                :key="withdrawal.id"
-                class="rounded-3xl border border-[#deebe4] bg-[#f8fbf9] px-4 py-4"
-              >
-                <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                  <div class="space-y-1">
-                    <p class="text-sm font-semibold text-[#123824]">{{ formatAmount(withdrawal.amount) }}</p>
-                    <p class="text-sm text-[#355947]">Создано {{ formatDateTime(withdrawal.createdAt) }}</p>
-                    <p v-if="withdrawal.reviewComment" class="text-sm text-[#355947]">{{ withdrawal.reviewComment }}</p>
-                  </div>
-                  <NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm w-fit border-0">
-                    Проверить выплату
-                  </NuxtLink>
-                </div>
-              </article>
-            </div>
+          <div v-if="transactions.length === 0" class="manager-empty-state mt-4">
+            Начислений пока нет.
           </div>
 
-          <div class="surface-card rounded-3xl p-5">
-            <div class="flex items-center justify-between gap-3">
-              <h2 class="text-xl font-bold text-[#123824]">Транзакции</h2>
-              <span class="text-sm text-[#5c7b69]">{{ transactions.length }}</span>
-            </div>
-
-            <div v-if="transactions.length === 0" class="manager-empty-state mt-4">
-              Начислений по этой бонусной программе пока нет.
-            </div>
-
-            <div v-else class="mt-4 space-y-3">
-              <article
-                v-for="transaction in transactions"
-                :key="transaction.id"
-                class="rounded-3xl border border-[#deebe4] bg-[#f8fbf9] px-4 py-4"
-              >
-                <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                  <div class="space-y-1">
-                    <p class="text-base font-semibold text-[#123824]">+{{ formatAmount(transaction.amount) }}</p>
-                    <p class="text-sm text-[#355947]">{{ transaction.reason }}</p>
-                    <p class="text-xs text-[#5c7b69]">{{ formatDateTime(transaction.createdAt) }}</p>
-                  </div>
-
-                  <NuxtLink
-                    v-if="transaction.orderId"
-                    :to="`/client-orders/${transaction.orderId}`"
-                    class="btn btn-ghost btn-sm w-fit text-[#0d854a]"
-                  >
-                    Открыть заказ
-                  </NuxtLink>
+          <div v-else class="mt-4 space-y-3">
+            <article
+              v-for="transaction in transactions"
+              :key="transaction.id"
+              class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
+            >
+              <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                <div class="space-y-1">
+                  <p class="text-base font-semibold text-[#123824]">+{{ formatAmount(transaction.amount) }}</p>
+                  <p class="text-sm text-[#355947]">{{ transaction.reason }}</p>
+                  <p class="text-xs text-[#5c7b69]">{{ formatDateTime(transaction.createdAt) }}</p>
                 </div>
-              </article>
-            </div>
+
+                <NuxtLink
+                  v-if="transaction.orderId"
+                  :to="`/client-orders/${transaction.orderId}`"
+                  class="text-sm font-semibold text-[#0d854a]"
+                >
+                  Открыть заказ
+                </NuxtLink>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <div v-if="pendingWithdrawals.length" class="surface-card rounded-[32px] p-6">
+          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Заявки на вывод</p>
+
+          <div class="mt-4 space-y-3">
+            <article
+              v-for="withdrawal in pendingWithdrawals"
+              :key="withdrawal.id"
+              class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
+            >
+              <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                <div class="space-y-1">
+                  <p class="text-sm font-semibold text-[#123824]">{{ formatAmount(withdrawal.amount) }}</p>
+                  <p class="text-sm text-[#355947]">Создано {{ formatDateTime(withdrawal.createdAt) }}</p>
+                  <p v-if="withdrawal.reviewComment" class="text-sm text-[#355947]">{{ withdrawal.reviewComment }}</p>
+                </div>
+
+                <NuxtLink
+                  :to="`/bonus-system/withdrawals/${withdrawal.id}`"
+                  class="text-sm font-semibold text-[#0d854a]"
+                >
+                  Проверить выплату
+                </NuxtLink>
+              </div>
+            </article>
           </div>
         </div>
       </div>

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>