Filter zero bonus balances

app/pages/bonus-system/index.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable';
 import {
+  ManagerBonusBalancesDocument,
   ManagerWithdrawalRequestsDocument,
+  type ManagerBonusBalancesQuery,
   type ManagerWithdrawalRequestsQuery,
 } from '~/composables/graphql/generated';
 
@@ -9,14 +11,57 @@ definePageMeta({
   middleware: ['manager-only'],
 });
 
+type BalanceItem = ManagerBonusBalancesQuery['managerBonusBalances'][number];
 type WithdrawalItem = ManagerWithdrawalRequestsQuery['managerWithdrawalRequests'][number];
 
+const route = useRoute();
+const router = useRouter();
 const search = ref('');
+const balancesQuery = useQuery(ManagerBonusBalancesDocument);
 const withdrawalsQuery = useQuery(ManagerWithdrawalRequestsDocument, {
   status: 'PENDING',
 });
+
+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[]>(() => withdrawalsQuery.result.value?.managerWithdrawalRequests ?? []);
 
+const filteredBalances = computed(() => {
+  const query = search.value.trim().toLowerCase();
+
+  return balances.value.filter((item) => {
+    if (item.balance <= 0) {
+      return false;
+    }
+
+    if (!query) {
+      return true;
+    }
+
+    return [
+      item.fullName,
+      item.email,
+      item.companyName || '',
+      String(item.balance),
+    ]
+      .join(' ')
+      .toLowerCase()
+      .includes(query);
+  });
+});
+
 const filteredWithdrawals = computed(() => {
   const query = search.value.trim().toLowerCase();
 
@@ -45,9 +90,55 @@ const filteredWithdrawals = computed(() => {
     <UiSectionSearchHero
       v-model="search"
       title="Бонусы"
-      search-placeholder="Пользователь, сумма или статус"
+      :search-placeholder="activeTab === 'balances' ? 'Пользователь, email или сумма' : 'Пользователь, сумма или статус'"
-    />
+    >
+      <template #tabs>
+        <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>
+    </UiSectionSearchHero>
 
+    <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>
+          </div>
+        </article>
+      </div>
+    </template>
+
+    <template v-else>
       <div v-if="withdrawalsQuery.loading.value" class="manager-empty-state">
         Загружаем заявки...
       </div>
@@ -74,5 +165,6 @@ const filteredWithdrawals = computed(() => {
           </div>
         </article>
       </div>
+    </template>
   </section>
 </template>