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

<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>