From 3eec898706be928575367f2c09cbef995e59ccaa Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Sat, 4 Apr 2026 10:27:21 +0700
Subject: [PATCH] Simplify bonus and order detail views

---
 app/pages/bonus-system/index.vue | 144 ++++++-------------------------
 app/pages/client-orders/[id].vue |  27 +++---
 2 files changed, 40 insertions(+), 131 deletions(-)

diff --git a/app/pages/bonus-system/index.vue b/app/pages/bonus-system/index.vue
index 58ab1a9..f713b32 100644
--- a/app/pages/bonus-system/index.vue
+++ b/app/pages/bonus-system/index.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable';
 import {
-  ManagerBonusBalancesDocument,
   ManagerWithdrawalRequestsDocument,
-  type ManagerBonusBalancesQuery,
   type ManagerWithdrawalRequestsQuery,
 } from '~/composables/graphql/generated';
 
@@ -11,55 +9,14 @@ 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 (!query) {
-      return true;
-    }
-
-    return [
-      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();
 
@@ -88,83 +45,34 @@ const filteredWithdrawals = computed(() => {
     <UiSectionSearchHero
       v-model="search"
       title="Бонусы"
-      :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>
+      search-placeholder="Пользователь, сумма или статус"
+    />
 
-    <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 v-if="withdrawalsQuery.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">
-            <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>
+            <p class="text-sm font-semibold text-[#123824]">{{ withdrawal.requesterFullName }}</p>
+            <p class="text-sm text-[#355947]">{{ withdrawal.requesterEmail }}</p>
+            <p v-if="withdrawal.companyName" class="text-sm text-[#355947]">{{ withdrawal.companyName }}</p>
+            <p class="text-sm text-[#355947]">Сумма: {{ withdrawal.amount }}</p>
+            <p class="text-xs text-[#5c7b69]">{{ new Date(withdrawal.createdAt).toLocaleString() }}</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="withdrawalsQuery.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.requesterFullName }}</p>
-              <p class="text-sm text-[#355947]">{{ withdrawal.requesterEmail }}</p>
-              <p v-if="withdrawal.companyName" class="text-sm text-[#355947]">{{ withdrawal.companyName }}</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>
+          <NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm border-0">
+            Проверить выплату
+          </NuxtLink>
+        </div>
+      </article>
+    </div>
   </section>
 </template>
diff --git a/app/pages/client-orders/[id].vue b/app/pages/client-orders/[id].vue
index e282e82..060d642 100644
--- a/app/pages/client-orders/[id].vue
+++ b/app/pages/client-orders/[id].vue
@@ -130,17 +130,24 @@ async function completeOrder() {
     </div>
 
     <template v-else>
-      <div class="flex flex-wrap items-start justify-between gap-3">
-        <div class="manager-hero">
-          <p class="manager-eyebrow">Заказ</p>
-          <h1 class="manager-title">{{ currentOrder.code }}</h1>
-          <p class="manager-copy">Клиент: {{ currentOrder.customerId }} · {{ new Date(currentOrder.createdAt).toLocaleString() }}</p>
-        </div>
-        <OrderStatusBadge :status="currentOrder.status" />
+      <div class="manager-hero">
+        <p class="manager-eyebrow">Заказ</p>
+        <h1 class="manager-title">{{ currentOrder.code }}</h1>
       </div>
 
       <div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
         <div class="space-y-4">
+          <div class="surface-card rounded-3xl p-5">
+            <h2 class="text-xl font-bold text-[#123824]">Статус заказа</h2>
+            <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
+              <div class="space-y-1 text-sm text-[#355947]">
+                <p>Создан: {{ new Date(currentOrder.createdAt).toLocaleString() }}</p>
+                <p>Клиент: {{ currentOrder.customerId }}</p>
+              </div>
+              <OrderStatusBadge :status="currentOrder.status" />
+            </div>
+          </div>
+
           <div class="surface-card rounded-3xl p-5">
             <h2 class="text-xl font-bold text-[#123824]">Состав заказа</h2>
             <ul class="mt-4 space-y-3">
@@ -159,12 +166,6 @@ async function completeOrder() {
               <div class="manager-mini-card text-sm text-[#123824]">
                 Условия: {{ currentOrder.deliveryTerms || 'еще не указаны' }}
               </div>
-              <div class="manager-mini-card text-sm text-[#123824]">
-                Стоимость доставки: {{ currentOrder.deliveryFee ?? '—' }}
-              </div>
-              <div class="manager-mini-card text-sm text-[#123824]">
-                Итого: {{ currentOrder.totalPrice ?? '—' }}
-              </div>
             </div>
           </div>
         </div>