Simplify bonus account page

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

@@ -23,19 +23,6 @@ const bonusAccount = computed(() => bonusAccountQuery.result.value?.managerBonus
 const transactions = computed<TransactionItem[]>(() => bonusAccount.value?.transactions ?? []);
 const pendingWithdrawals = computed<PendingWithdrawalItem[]>(() => bonusAccount.value?.pendingWithdrawals ?? []);
 
-const accountStats = computed(() => {
-  if (!bonusAccount.value) {
-    return [];
-  }
-
-  return [
-    { label: 'Всего начислено', value: formatAmount(bonusAccount.value.earnedAmount) },
-    { label: 'Транзакций', value: String(bonusAccount.value.transactionsCount) },
-    { label: 'Активных связок', value: String(bonusAccount.value.referralsCount) },
-    { label: 'На выводе', value: formatAmount(bonusAccount.value.pendingWithdrawalAmount) },
-  ];
-});
-
 function formatAmount(value: number) {
   return new Intl.NumberFormat('ru-RU', {
     minimumFractionDigits: 0,
@@ -62,17 +49,48 @@ function formatDateTime(value: string) {
 
     <template v-else>
       <div class="space-y-4">
-        <BonusAccountCard
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          :full-name="bonusAccount.fullName"
+          <div class="space-y-1">
-          :email="bonusAccount.email"
+            <h1 class="text-3xl font-extrabold text-[#123824]">{{ bonusAccount.fullName }}</h1>
-          :company-name="bonusAccount.companyName"
+            <p v-if="bonusAccount.companyName || bonusAccount.email" class="text-sm text-[#5c7b69]">
-          :balance="bonusAccount.balance"
+              {{ bonusAccount.companyName || bonusAccount.email }}
-          :stats="accountStats"
+            </p>
-          :source-links="bonusAccount.referralLinks"
+          </div>
-        />
+          <div class="text-left sm:text-right">
+            <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Доступный бонус</p>
+            <p class="mt-2 text-3xl font-black leading-none text-[#123824]">{{ formatAmount(bonusAccount.balance) }}</p>
+          </div>
+        </div>
+
+        <div v-if="pendingWithdrawals.length" class="surface-card rounded-[32px] p-6">
+          <p class="text-lg font-bold text-[#123824]">Выводы</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 class="surface-card rounded-[32px] p-6">
-          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Начисления</p>
+          <p class="text-lg font-bold text-[#123824]">Транзакции</p>
 
           <div v-if="transactions.length === 0" class="manager-empty-state mt-4">
             Начислений пока нет.
@@ -102,33 +120,6 @@ function formatDateTime(value: string) {
             </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>
     </template>
   </section>