From 6a3d69e1e881c69b755d25dee6273bf3eb3dcc45 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Mon, 6 Apr 2026 11:29:23 +0700
Subject: [PATCH] Refine bonus account detail card

---
 app/components/bonus/AccountCard.vue | 99 +++++++++-------------------
 1 file changed, 30 insertions(+), 69 deletions(-)

diff --git a/app/components/bonus/AccountCard.vue b/app/components/bonus/AccountCard.vue
index 21db0e7..a339fac 100644
--- a/app/components/bonus/AccountCard.vue
+++ b/app/components/bonus/AccountCard.vue
@@ -17,17 +17,11 @@ withDefaults(defineProps<{
   email?: string;
   companyName?: string | null;
   balance: number;
-  avatarSrc?: string;
-  initials?: string;
-  compact?: boolean;
   stats?: BonusCardStat[];
   sourceLinks?: BonusCardLink[];
 }>(), {
   email: '',
   companyName: null,
-  avatarSrc: '',
-  initials: 'FR',
-  compact: false,
   stats: () => [],
   sourceLinks: () => [],
 });
@@ -41,73 +35,40 @@ function formatAmount(value: number) {
 </script>
 
 <template>
-  <article
-    class="surface-card rounded-[32px]"
-    :class="compact ? 'flex min-h-[280px] flex-col p-6' : 'p-6'"
-  >
-    <template v-if="compact">
-      <div class="flex justify-center">
-        <img
-          v-if="avatarSrc"
-          :src="avatarSrc"
-          :alt="fullName"
-          class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
-        >
-        <div
-          v-else
-          class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
-        >
-          {{ initials }}
-        </div>
-      </div>
+  <article class="surface-card rounded-[32px] p-6">
+    <div class="space-y-1">
+      <h1 class="text-2xl font-bold leading-tight text-[#123824]">{{ fullName }}</h1>
+      <p v-if="companyName || email" class="text-sm text-[#5c7b69]">
+        {{ companyName || email }}
+      </p>
+    </div>
 
-      <div class="flex-1" />
-
-      <div class="pt-8 text-center">
-        <h2 class="text-lg font-bold leading-tight text-[#123824]">{{ fullName }}</h2>
+    <div class="mt-6 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+      <div
+        v-for="stat in stats"
+        :key="stat.label"
+        class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
+      >
+        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">{{ stat.label }}</p>
+        <p class="mt-2 text-xl font-bold leading-none text-[#123824]">{{ stat.value }}</p>
       </div>
+    </div>
 
-      <div class="pt-6 text-left">
-        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Доступный бонус</p>
-        <p class="mt-2 text-2xl font-black leading-none text-[#123824]">{{ formatAmount(balance) }}</p>
-      </div>
-    </template>
+    <div class="mt-6 rounded-[24px] bg-[#f6fbf8] px-4 py-4">
+      <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(balance) }}</p>
+    </div>
 
-    <template v-else>
-      <div class="space-y-1">
-        <h1 class="text-2xl font-bold leading-tight text-[#123824]">{{ fullName }}</h1>
-        <p v-if="companyName || email" class="text-sm text-[#5c7b69]">
-          {{ companyName || email }}
-        </p>
+    <div v-if="sourceLinks.length" class="mt-6 space-y-2">
+      <div
+        v-for="link in sourceLinks"
+        :key="link.id"
+        class="rounded-[24px] bg-[#f6fbf8] px-4 py-4 text-sm text-[#355947]"
+      >
+        <p class="font-semibold text-[#123824]">{{ link.refereeName }}</p>
+        <p class="mt-1">{{ link.refereeCompanyName || link.refereeEmail }}</p>
+        <p class="mt-2 text-xs text-[#5c7b69]">Бонус {{ link.bonusPercent }}%</p>
       </div>
-
-      <div class="mt-6 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
-        <div
-          v-for="stat in stats"
-          :key="stat.label"
-          class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
-        >
-          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">{{ stat.label }}</p>
-          <p class="mt-2 text-xl font-bold leading-none text-[#123824]">{{ stat.value }}</p>
-        </div>
-      </div>
-
-      <div class="mt-6 rounded-[24px] bg-[#f6fbf8] px-4 py-4">
-        <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(balance) }}</p>
-      </div>
-
-      <div v-if="sourceLinks.length" class="mt-6 space-y-2">
-        <div
-          v-for="link in sourceLinks"
-          :key="link.id"
-          class="rounded-[24px] bg-[#f6fbf8] px-4 py-4 text-sm text-[#355947]"
-        >
-          <p class="font-semibold text-[#123824]">{{ link.refereeName }}</p>
-          <p class="mt-1">{{ link.refereeCompanyName || link.refereeEmail }}</p>
-          <p class="mt-2 text-xs text-[#5c7b69]">Бонус {{ link.bonusPercent }}%</p>
-        </div>
-      </div>
-    </template>
+    </div>
   </article>
 </template>