Simplify bonus manager cards

2026-04-06 11:14:39 +07:00
parent 4a6871ecac
commit c4f9f0b6dc
3 changed files with 152 additions and 137 deletions
--- a/app/components/bonus/AccountCard.vue
+++ b/app/components/bonus/AccountCard.vue
@@ -14,19 +14,22 @@ type BonusCardLink = {

 withDefaults(defineProps<{
  fullName: string;
-  email: string;
+  email?: string;
  companyName?: string | null;
  balance: number;
+  avatarSrc?: string;
+  initials?: string;
+  compact?: boolean;
  stats?: BonusCardStat[];
  sourceLinks?: BonusCardLink[];
-  detailTo?: string;
-  detailLabel?: string;
 }>(), {
+  email: '',
  companyName: null,
+  avatarSrc: '',
+  initials: 'FR',
+  compact: false,
  stats: () => [],
  sourceLinks: () => [],
-  detailTo: '',
-  detailLabel: 'Открыть',
 });

 function formatAmount(value: number) {
@@ -38,58 +41,73 @@ function formatAmount(value: number) {
 </script>

 <template>
-  <article class="surface-card rounded-3xl p-5">
-    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+  <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>
+
+      <div class="flex-1" />
+
+      <div class="pt-8 text-center">
+        <h2 class="text-lg font-bold leading-tight text-[#123824]">{{ fullName }}</h2>
+      </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>
+
+    <template v-else>
      <div class="space-y-1">
-        <h2 class="text-lg font-bold text-[#123824]">{{ fullName }}</h2>
-        <p class="text-sm text-[#466653]">{{ email }}</p>
-        <p v-if="companyName" class="text-sm text-[#466653]">{{ companyName }}</p>
+        <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>

-      <NuxtLink
-        v-if="detailTo"
-        :to="detailTo"
-        class="btn btn-accent btn-sm w-fit border-0"
-      >
-        {{ detailLabel }}
-      </NuxtLink>
-    </div>
-
-    <div class="mt-5 rounded-[28px] bg-[linear-gradient(135deg,#123824_0%,#0d854a_100%)] px-5 py-4 text-white">
-      <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Доступный бонус</p>
-      <p class="mt-2 text-3xl font-black leading-none">{{ formatAmount(balance) }}</p>
-    </div>
-
-    <dl
-      v-if="stats.length"
-      class="mt-4 divide-y divide-[#deebe4] rounded-2xl border border-[#deebe4] bg-white"
-    >
+      <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="flex items-center justify-between gap-3 px-4 py-3 text-sm"
+          class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
        >
-        <dt class="text-[#5c7b69]">{{ stat.label }}</dt>
-        <dd class="text-right font-semibold text-[#123824]">{{ stat.value }}</dd>
+          <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>
-    </dl>

-    <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-if="sourceLinks.length" class="space-y-2">
+      <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-2xl bg-white px-3 py-2"
+          class="rounded-[24px] bg-[#f6fbf8] px-4 py-4 text-sm text-[#355947]"
        >
-          <p class="font-medium text-[#123824]">{{ link.refereeName }}</p>
-          <p>{{ link.refereeCompanyName || link.refereeEmail }}</p>
-          <p class="text-xs text-[#5c7b69]">Бонус: {{ link.bonusPercent }}%</p>
+          <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>
-      <p v-else class="rounded-2xl bg-white px-3 py-2 text-[#5c7b69]">
-        Активных связок пока нет.
-      </p>
-    </div>
+    </template>
  </article>
 </template>
--- a/app/pages/bonus-system/[userId].vue
+++ b/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,52 +71,18 @@ 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 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>
-
-          <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 class="surface-card rounded-[32px] p-6">
+          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Начисления</p>

          <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"
+              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">
@@ -136,7 +94,7 @@ function formatDateTime(value: string) {
                <NuxtLink
                  v-if="transaction.orderId"
                  :to="`/client-orders/${transaction.orderId}`"
-                    class="btn btn-ghost btn-sm w-fit text-[#0d854a]"
+                  class="text-sm font-semibold text-[#0d854a]"
                >
                  Открыть заказ
                </NuxtLink>
@@ -144,6 +102,32 @@ 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>
--- a/app/pages/bonus-system/index.vue
+++ b/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"
+          :to="`/bonus-system/${item.userId}`"
+          class="block surface-card-interactive"
+        >
+          <BonusAccountCard
            :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="Открыть"
+            :avatar-src="messengerConnectionAvatarSrc(usersById.get(item.userId)?.telegramConnection)"
+            :initials="userInitials(item.fullName)"
+            compact
          />
+        </NuxtLink>
      </div>
    </template>