Add manager bonus account pages

app/components/bonus/AccountCard.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+type BonusCardStat = {
+  label: string;
+  value: string;
+};
+
+type BonusCardLink = {
+  id: string;
+  refereeName: string;
+  refereeEmail: string;
+  refereeCompanyName?: string | null;
+  bonusPercent: number;
+};
+
+withDefaults(defineProps<{
+  fullName: string;
+  email: string;
+  companyName?: string | null;
+  balance: number;
+  stats?: BonusCardStat[];
+  sourceLinks?: BonusCardLink[];
+  detailTo?: string;
+  detailLabel?: string;
+}>(), {
+  companyName: null,
+  stats: () => [],
+  sourceLinks: () => [],
+  detailTo: '',
+  detailLabel: 'Открыть',
+});
+
+function formatAmount(value: number) {
+  return new Intl.NumberFormat('ru-RU', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+</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">
+      <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>
+      </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
+        v-for="stat in stats"
+        :key="stat.label"
+        class="flex items-center justify-between gap-3 px-4 py-3 text-sm"
+      >
+        <dt class="text-[#5c7b69]">{{ stat.label }}</dt>
+        <dd class="text-right font-semibold text-[#123824]">{{ stat.value }}</dd>
+      </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
+          v-for="link in sourceLinks"
+          :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>
+      <p v-else class="rounded-2xl bg-white px-3 py-2 text-[#5c7b69]">
+        Активных связок пока нет.
+      </p>
+    </div>
+  </article>
+</template>

app/composables/graphql/generated.ts

@@ -176,6 +176,22 @@ export enum LoginChannel {
   Telegram = 'TELEGRAM'
 }
 
+export type ManagerBonusAccount = {
+  __typename?: 'ManagerBonusAccount';
+  balance: Scalars['Float']['output'];
+  companyName?: Maybe<Scalars['String']['output']>;
+  earnedAmount: Scalars['Float']['output'];
+  email: Scalars['String']['output'];
+  fullName: Scalars['String']['output'];
+  pendingWithdrawalAmount: Scalars['Float']['output'];
+  pendingWithdrawals: Array<RewardWithdrawalRequest>;
+  referralLinks: Array<ManagerReferralLink>;
+  referralsCount: Scalars['Int']['output'];
+  transactions: Array<BonusTransaction>;
+  transactionsCount: Scalars['Int']['output'];
+  userId: Scalars['ID']['output'];
+};
+
 export type ManagerBonusBalance = {
   __typename?: 'ManagerBonusBalance';
   balance: Scalars['Float']['output'];
@@ -541,6 +557,7 @@ export type Query = {
   __typename?: 'Query';
   clientProducts: Array<Product>;
   healthcheck: Scalars['String']['output'];
+  managerBonusAccount: ManagerBonusAccount;
   managerBonusBalances: Array<ManagerBonusBalance>;
   managerNotificationHistory: Array<NotificationHistoryItem>;
   managerOrders: Array<Order>;
@@ -561,6 +578,11 @@ export type Query = {
 };
 
 
+export type QueryManagerBonusAccountArgs = {
+  userId: Scalars['ID']['input'];
+};
+
+
 export type QueryManagerNotificationHistoryArgs = {
   channel: MessengerType;
   limit?: InputMaybe<Scalars['Int']['input']>;
@@ -862,6 +884,13 @@ export type CreateReferralMutationVariables = Exact<{
 
 export type CreateReferralMutation = { __typename?: 'Mutation', createReferral: { __typename?: 'ReferralLink', id: string, referrerId: string, refereeId: string, createdById: string, bonusPercent: number, createdAt: any } };
 
+export type ManagerBonusAccountQueryVariables = Exact<{
+  userId: Scalars['ID']['input'];
+}>;
+
+
+export type ManagerBonusAccountQuery = { __typename?: 'Query', managerBonusAccount: { __typename?: 'ManagerBonusAccount', userId: string, email: string, fullName: string, companyName?: string | null, balance: number, earnedAmount: number, pendingWithdrawalAmount: number, transactionsCount: number, referralsCount: number, referralLinks: Array<{ __typename?: 'ManagerReferralLink', id: string, referrerId: string, referrerName: string, referrerEmail: string, referrerCompanyName?: string | null, refereeId: string, refereeName: string, refereeEmail: string, refereeCompanyName?: string | null, createdById: string, bonusPercent: number, createdAt: any }>, transactions: Array<{ __typename?: 'BonusTransaction', id: string, userId: string, amount: number, reason: string, orderId?: string | null, createdAt: any }>, pendingWithdrawals: Array<{ __typename?: 'RewardWithdrawalRequest', id: string, requesterId: string, amount: number, status: WithdrawalStatus, reviewComment?: string | null, createdAt: any, updatedAt: any }> } };
+
 export type ManagerBonusBalancesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -1679,6 +1708,75 @@ export function useCreateReferralMutation(options: VueApolloComposable.UseMutati
   return VueApolloComposable.useMutation<CreateReferralMutation, CreateReferralMutationVariables>(CreateReferralDocument, options);
 }
 export type CreateReferralMutationCompositionFunctionResult = VueApolloComposable.UseMutationReturn<CreateReferralMutation, CreateReferralMutationVariables>;
+export const ManagerBonusAccountDocument = gql`
+    query ManagerBonusAccount($userId: ID!) {
+  managerBonusAccount(userId: $userId) {
+    userId
+    email
+    fullName
+    companyName
+    balance
+    earnedAmount
+    pendingWithdrawalAmount
+    transactionsCount
+    referralsCount
+    referralLinks {
+      id
+      referrerId
+      referrerName
+      referrerEmail
+      referrerCompanyName
+      refereeId
+      refereeName
+      refereeEmail
+      refereeCompanyName
+      createdById
+      bonusPercent
+      createdAt
+    }
+    transactions {
+      id
+      userId
+      amount
+      reason
+      orderId
+      createdAt
+    }
+    pendingWithdrawals {
+      id
+      requesterId
+      amount
+      status
+      reviewComment
+      createdAt
+      updatedAt
+    }
+  }
+}
+    `;
+
+/**
+ * __useManagerBonusAccountQuery__
+ *
+ * To run a query within a Vue component, call `useManagerBonusAccountQuery` and pass it any options that fit your needs.
+ * When your component renders, `useManagerBonusAccountQuery` returns an object from Apollo Client that contains result, loading and error properties
+ * you can use to render your UI.
+ *
+ * @param variables that will be passed into the query
+ * @param options that will be passed into the query, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/query.html#options;
+ *
+ * @example
+ * const { result, loading, error } = useManagerBonusAccountQuery({
+ *   userId: // value for 'userId'
+ * });
+ */
+export function useManagerBonusAccountQuery(variables: ManagerBonusAccountQueryVariables | VueCompositionApi.Ref<ManagerBonusAccountQueryVariables> | ReactiveFunction<ManagerBonusAccountQueryVariables>, options: VueApolloComposable.UseQueryOptions<ManagerBonusAccountQuery, ManagerBonusAccountQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ManagerBonusAccountQuery, ManagerBonusAccountQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ManagerBonusAccountQuery, ManagerBonusAccountQueryVariables>> = {}) {
+  return VueApolloComposable.useQuery<ManagerBonusAccountQuery, ManagerBonusAccountQueryVariables>(ManagerBonusAccountDocument, variables, options);
+}
+export function useManagerBonusAccountLazyQuery(variables?: ManagerBonusAccountQueryVariables | VueCompositionApi.Ref<ManagerBonusAccountQueryVariables> | ReactiveFunction<ManagerBonusAccountQueryVariables>, options: VueApolloComposable.UseQueryOptions<ManagerBonusAccountQuery, ManagerBonusAccountQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ManagerBonusAccountQuery, ManagerBonusAccountQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ManagerBonusAccountQuery, ManagerBonusAccountQueryVariables>> = {}) {
+  return VueApolloComposable.useLazyQuery<ManagerBonusAccountQuery, ManagerBonusAccountQueryVariables>(ManagerBonusAccountDocument, variables, options);
+}
+export type ManagerBonusAccountQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<ManagerBonusAccountQuery, ManagerBonusAccountQueryVariables>;
 export const ManagerBonusBalancesDocument = gql`
     query ManagerBonusBalances {
   managerBonusBalances {

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

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable';
+import {
+  ManagerBonusAccountDocument,
+  type ManagerBonusAccountQuery,
+} from '~/composables/graphql/generated';
+
+definePageMeta({
+  middleware: ['manager-only'],
+});
+
+type TransactionItem = ManagerBonusAccountQuery['managerBonusAccount']['transactions'][number];
+type PendingWithdrawalItem = ManagerBonusAccountQuery['managerBonusAccount']['pendingWithdrawals'][number];
+
+const route = useRoute();
+const userId = computed(() => String(route.params.userId || ''));
+
+const bonusAccountQuery = useQuery(ManagerBonusAccountDocument, () => ({
+  userId: userId.value,
+}));
+
+const bonusAccount = computed(() => bonusAccountQuery.result.value?.managerBonusAccount ?? null);
+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,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+function formatDateTime(value: string) {
+  return new Date(value).toLocaleString('ru-RU');
+}
+</script>
+
+<template>
+  <section class="space-y-6">
+    <NuxtLink to="/bonus-system" class="text-sm font-semibold text-[#0d854a]">← Назад к бонусам</NuxtLink>
+
+    <div v-if="bonusAccountQuery.loading.value" class="manager-empty-state">
+      Загружаем бонусный счёт...
+    </div>
+
+    <div v-else-if="!bonusAccount" class="manager-empty-state">
+      Бонусный счёт не найден.
+    </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)]">
+        <BonusAccountCard
+          :full-name="bonusAccount.fullName"
+          :email="bonusAccount.email"
+          :company-name="bonusAccount.companyName"
+          :balance="bonusAccount.balance"
+          :stats="accountStats"
+          :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 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>
+              </article>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </section>
+</template>

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>