Restructure manager navigation and views

app/pages/bonus-system/index.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable';
 import {
+  ManagerBonusBalancesDocument,
   ReferralStatsDocument,
+  type ManagerBonusBalancesQuery,
   type ReferralStatsQuery,
 } from '~/composables/graphql/generated';
 
@@ -9,28 +11,66 @@ definePageMeta({
   middleware: ['manager-only'],
 });
 
-type TransactionItem = ReferralStatsQuery['referralStats']['transactions'][number];
+type BalanceItem = ManagerBonusBalancesQuery['managerBonusBalances'][number];
 type WithdrawalItem = ReferralStatsQuery['referralStats']['pendingWithdrawals'][number];
 
-const bonusQuery = useQuery(ReferralStatsDocument);
+const route = useRoute();
+const router = useRouter();
 const search = ref('');
 
-const transactions = computed<TransactionItem[]>(() => bonusQuery.result.value?.referralStats.transactions ?? []);
+const balancesQuery = useQuery(ManagerBonusBalancesDocument);
+const bonusQuery = useQuery(ReferralStatsDocument);
+
+const activeTab = computed<'balances' | 'withdrawals'>(() => (
+  route.query.tab === 'withdrawals' ? 'withdrawals' : 'balances'
+));
+
+function setTab(tab: 'balances' | 'withdrawals') {
+  void router.replace({
+    query: {
+      ...route.query,
+      tab,
+    },
+  });
+}
+
+const balances = computed<BalanceItem[]>(() => balancesQuery.result.value?.managerBonusBalances ?? []);
 const withdrawals = computed<WithdrawalItem[]>(() => bonusQuery.result.value?.referralStats.pendingWithdrawals ?? []);
 
-const filteredTransactions = computed(() => {
+const filteredBalances = computed(() => {
   const query = search.value.trim().toLowerCase();
 
-  return transactions.value.filter((transaction) => {
+  return balances.value.filter((item) => {
     if (!query) {
       return true;
     }
 
     return [
-      transaction.userId,
-      transaction.reason,
-      transaction.orderId || '',
-      String(transaction.amount),
+      item.fullName,
+      item.email,
+      item.companyName || '',
+      String(item.balance),
+      String(item.pendingWithdrawalAmount),
+    ]
+      .join(' ')
+      .toLowerCase()
+      .includes(query);
+  });
+});
+
+const filteredWithdrawals = computed(() => {
+  const query = search.value.trim().toLowerCase();
+
+  return withdrawals.value.filter((item) => {
+    if (!query) {
+      return true;
+    }
+
+    return [
+      item.requesterId,
+      String(item.amount),
+      item.status,
+      item.reviewComment || '',
     ]
       .join(' ')
       .toLowerCase()
@@ -44,62 +84,79 @@ const filteredTransactions = computed(() => {
     <UiSectionSearchHero
       v-model="search"
       title="Бонусы"
-      search-placeholder="Пользователь, причина, заказ или сумма"
+      :search-placeholder="activeTab === 'balances' ? 'Пользователь, email, компания или сумма' : 'Пользователь, сумма или статус'"
     />
 
-    <div class="space-y-4">
-      <div class="surface-card rounded-3xl p-5">
-        <h2 class="text-xl font-bold text-[#123824]">Заявки на вывод</h2>
-
-        <div v-if="bonusQuery.loading.value" class="manager-empty-state mt-4">
-          Загружаем заявки...
-        </div>
-        <div v-else-if="withdrawals.length === 0" class="manager-empty-state mt-4">
-          Активных заявок на вывод сейчас нет.
-        </div>
-        <div v-else class="mt-4 space-y-3">
-          <article v-for="withdrawal in withdrawals" :key="withdrawal.id" class="rounded-2xl border border-[#d6ebde] bg-white px-4 py-4">
-            <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-              <div class="space-y-1">
-                <p class="text-sm font-semibold text-[#123824]">Пользователь: {{ withdrawal.requesterId }}</p>
-                <p class="text-sm text-[#355947]">Сумма: {{ withdrawal.amount }}</p>
-                <p class="text-xs text-[#5c7b69]">{{ new Date(withdrawal.createdAt).toLocaleString() }}</p>
-              </div>
-              <div>
-                <NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm border-0">
-                  Проверить вывод
-                </NuxtLink>
-              </div>
-            </div>
-          </article>
-        </div>
-      </div>
-
-      <div class="surface-card rounded-3xl p-5">
-        <h2 class="text-xl font-bold text-[#123824]">История транзакций</h2>
-
-        <div v-if="bonusQuery.loading.value" class="manager-empty-state mt-4">
-          Загружаем историю...
-        </div>
-        <div v-else-if="filteredTransactions.length === 0" class="manager-empty-state mt-4">
-          Транзакции по текущему запросу не найдены.
-        </div>
-        <div v-else class="mt-4 space-y-3">
-          <article v-for="transaction in filteredTransactions" :key="transaction.id" class="rounded-2xl border border-[#d6ebde] bg-white px-4 py-4">
-            <div class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
-              <div class="space-y-1">
-                <p class="text-sm font-semibold text-[#123824]">{{ transaction.reason }}</p>
-                <p class="text-sm text-[#5c7b69]">Пользователь: {{ transaction.userId }}</p>
-                <p v-if="transaction.orderId" class="text-sm text-[#5c7b69]">Заказ: {{ transaction.orderId }}</p>
-                <p class="text-xs text-[#5c7b69]">{{ new Date(transaction.createdAt).toLocaleString() }}</p>
-              </div>
-              <div class="text-sm font-semibold text-[#123824]">
-                {{ transaction.amount }}
-              </div>
-            </div>
-          </article>
-        </div>
-      </div>
+    <div class="tabs tabs-boxed w-fit bg-white">
+      <button
+        class="tab"
+        :class="{ 'tab-active': activeTab === 'balances' }"
+        @click="setTab('balances')"
+      >
+        Балансы
+      </button>
+      <button
+        class="tab"
+        :class="{ 'tab-active': activeTab === 'withdrawals' }"
+        @click="setTab('withdrawals')"
+      >
+        Заявки на выплату
+      </button>
     </div>
+
+    <template v-if="activeTab === 'balances'">
+      <div v-if="balancesQuery.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">
+        <article
+          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>В ожидании выплаты: {{ item.pendingWithdrawalAmount }}</p>
+            <p>Транзакций: {{ item.transactionsCount }}</p>
+          </div>
+        </article>
+      </div>
+    </template>
+
+    <template v-else>
+      <div v-if="bonusQuery.loading.value" class="manager-empty-state">
+        Загружаем заявки...
+      </div>
+      <div v-else-if="filteredWithdrawals.length === 0" class="manager-empty-state">
+        Активных заявок на выплату сейчас нет.
+      </div>
+      <div v-else class="space-y-4">
+        <article
+          v-for="withdrawal in filteredWithdrawals"
+          :key="withdrawal.id"
+          class="surface-card rounded-3xl px-5 py-5"
+        >
+          <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+            <div class="space-y-1">
+              <p class="text-sm font-semibold text-[#123824]">Пользователь: {{ withdrawal.requesterId }}</p>
+              <p class="text-sm text-[#355947]">Сумма: {{ withdrawal.amount }}</p>
+              <p class="text-xs text-[#5c7b69]">{{ new Date(withdrawal.createdAt).toLocaleString() }}</p>
+            </div>
+            <NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm border-0">
+              Проверить выплату
+            </NuxtLink>
+          </div>
+        </article>
+      </div>
+    </template>
   </section>
 </template>