Add manager bonus account pages

app/pages/bonus-system/index.vue

@@ -108,6 +108,13 @@ const filteredWithdrawals = computed(() => {
       .includes(query);
   });
 });
+
+function formatAmount(value: number) {
+  return new Intl.NumberFormat('ru-RU', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
 </script>
 
 <template>
@@ -151,35 +158,22 @@ const filteredWithdrawals = computed(() => {
         Бонусных связок пока нет.
       </div>
       <div v-else class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
-        <article
+        <BonusAccountCard
           v-for="item in filteredBalances"
           :key="item.userId"
-          class="surface-card rounded-3xl p-5"
-        >
-          <div class="space-y-1">
-            <h2 class="text-lg font-bold text-[#123824]">{{ item.fullName }}</h2>
-            <p class="text-sm text-[#466653]">{{ item.email }}</p>
-            <p v-if="item.companyName" class="text-sm text-[#466653]">{{ item.companyName }}</p>
-          </div>
-
-          <div class="mt-4 space-y-2 text-sm text-[#355947]">
-            <p>Баланс: <span class="font-semibold text-[#123824]">{{ item.balance }}</span></p>
-            <p>Активных связок: <span class="font-semibold text-[#123824]">{{ referralLinksByReferrer.get(item.userId)?.length ?? 0 }}</span></p>
-          </div>
-
-          <div class="mt-4 space-y-2 rounded-2xl bg-[#f4faf6] p-4 text-sm text-[#355947]">
-            <p class="font-semibold text-[#123824]">Начисление идёт с заказов:</p>
-            <div
-              v-for="link in referralLinksByReferrer.get(item.userId) ?? []"
-              :key="link.id"
-              class="rounded-2xl bg-white px-3 py-2"
-            >
-              <p class="font-medium text-[#123824]">{{ link.refereeName }}</p>
-              <p>{{ link.refereeCompanyName || link.refereeEmail }}</p>
-              <p class="text-xs text-[#5c7b69]">Бонус: {{ link.bonusPercent }}%</p>
-            </div>
-          </div>
-        </article>
+          :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="Открыть"
+        />
       </div>
     </template>