Restructure manager navigation and views

2026-04-04 09:29:16 +07:00
parent 264b88bcee
commit ecd92ef7e4
12 changed files with 569 additions and 118 deletions
--- a/app/pages/bonus-system/index.vue
+++ b/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>
--- a/app/pages/client-orders/index.vue
+++ b/app/pages/client-orders/index.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable';
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import ruLocale from '@fullcalendar/core/locales/ru';
 import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
 import {
  ManagerOrdersDocument,
@@ -12,6 +15,9 @@ definePageMeta({

 type ManagerOrderItem = ManagerOrdersQuery['managerOrders'][number];

+const route = useRoute();
+const router = useRouter();
+
 const ACTIVE_STATUSES = new Set(['NEW', 'MANAGER_PROCESSING', 'WAITING_DOUBLE_CONFIRM', 'CONFIRMED', 'IN_PROGRESS']);
 const CLOSED_STATUSES = new Set(['COMPLETED', 'CLIENT_REJECTED', 'MANAGER_REJECTED', 'MANAGER_BLOCKED']);

@@ -19,6 +25,19 @@ const ordersQuery = useQuery(ManagerOrdersDocument, { status: null });
 const search = ref('');
 const statusFilter = ref<'ALL' | 'WAITING' | 'ACTIVE' | 'CLOSED'>('ALL');

+const viewMode = computed<'cards' | 'calendar'>(() => (
+  route.query.view === 'calendar' ? 'calendar' : 'cards'
+));
+
+function setViewMode(view: 'cards' | 'calendar') {
+  void router.replace({
+    query: {
+      ...route.query,
+      view,
+    },
+  });
+}
+
 function matchesFilter(order: ManagerOrderItem) {
  if (statusFilter.value === 'ALL') {
    return true;
@@ -50,22 +69,59 @@ const filteredOrders = computed(() => {
    return matchesSearch && matchesFilter(order);
  });
 });
+
+const calendarOptions = computed(() => ({
+  plugins: [dayGridPlugin],
+  locale: ruLocale,
+  initialView: 'dayGridMonth',
+  height: 'auto',
+  fixedWeekCount: false,
+  firstDay: 1,
+  headerToolbar: {
+    left: 'prev,next today',
+    center: 'title',
+    right: '',
+  },
+  buttonText: {
+    today: 'Сегодня',
+  },
+  events: filteredOrders.value.map((order) => ({
+    id: order.id,
+    title: `${order.code} • ${order.customerId}`,
+    start: new Date(order.createdAt).toISOString(),
+    allDay: true,
+  })),
+  eventClick: ({ event }: { event: { id: string } }) => {
+    void router.push(`/client-orders/${event.id}`);
+  },
+}));
 </script>

 <template>
  <section class="space-y-6">
    <UiSectionSearchHero
      v-model="search"
-      title="Заказы клиентов"
+      title="Заказы"
      search-placeholder="Номер заказа, клиент, адрес или товар"
    >
      <template #controls>
-        <select v-model="statusFilter" class="select select-bordered w-full rounded-full bg-white md:w-64">
-          <option value="ALL">Все заказы</option>
-          <option value="WAITING">Ожидают подтверждения</option>
-          <option value="ACTIVE">Активные</option>
-          <option value="CLOSED">Закрытые</option>
-        </select>
+        <div class="flex w-full flex-col gap-3 md:w-auto md:flex-row">
+          <select v-model="statusFilter" class="select select-bordered w-full rounded-full bg-white md:w-64">
+            <option value="ALL">Все заказы</option>
+            <option value="WAITING">Ожидают подтверждения</option>
+            <option value="ACTIVE">Активные</option>
+            <option value="CLOSED">Закрытые</option>
+          </select>
+
+          <div class="tabs tabs-boxed w-fit bg-white">
+            <button class="tab" :class="{ 'tab-active': viewMode === 'cards' }" @click="setViewMode('cards')">
+              Карточки
+            </button>
+            <button class="tab" :class="{ 'tab-active': viewMode === 'calendar' }" @click="setViewMode('calendar')">
+              Календарь
+            </button>
+          </div>
+        </div>
      </template>
    </UiSectionSearchHero>

@@ -76,6 +132,10 @@ const filteredOrders = computed(() => {
      Заказы по текущим условиям не найдены.
    </div>

+    <div v-else-if="viewMode === 'calendar'" class="surface-card rounded-3xl p-4 md:p-5">
+      <FullCalendar :options="calendarOptions" />
+    </div>
+
    <div v-else class="space-y-4">
      <NuxtLink
        v-for="order in filteredOrders"
--- a/app/pages/clients/[id].vue
+++ b/app/pages/clients/[id].vue
@@ -11,6 +11,9 @@ definePageMeta({

 const route = useRoute();
 const requestId = computed(() => String(route.params.id || ''));
+const backTarget = computed(() => (
+  route.query.tab === 'requests' ? '/clients?tab=requests' : '/clients'
+));

 const clientQuery = useQuery(RegistrationRequestsDocument, {
  status: null,
@@ -55,7 +58,7 @@ async function rejectRequest() {

 <template>
  <section class="space-y-6">
-    <NuxtLink to="/clients" class="text-sm font-semibold text-[#0d854a]">← Назад к клиентам</NuxtLink>
+    <NuxtLink :to="backTarget" class="text-sm font-semibold text-[#0d854a]">← Назад к пользователям</NuxtLink>

    <div v-if="clientQuery.loading.value" class="manager-empty-state">
      Загружаем карточку клиента...
--- a/app/pages/clients/index.vue
+++ b/app/pages/clients/index.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable';
 import {
+  ManagerUsersDocument,
  RegistrationRequestsDocument,
+  type ManagerUsersQuery,
  type RegistrationRequestsQuery,
 } from '~/composables/graphql/generated';

@@ -9,24 +11,63 @@ definePageMeta({
  middleware: ['manager-only'],
 });

-type ClientCard = RegistrationRequestsQuery['registrationRequests'][number];
+type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
+type RequestItem = RegistrationRequestsQuery['registrationRequests'][number];

-const clientsQuery = useQuery(RegistrationRequestsDocument, {
-  status: null,
-});
+const route = useRoute();
+const router = useRouter();
 const search = ref('');

-function statusLabel(status: ClientCard['status']) {
+const usersQuery = useQuery(ManagerUsersDocument);
+const requestsQuery = useQuery(RegistrationRequestsDocument, {
+  status: null,
+});
+
+const activeTab = computed<'users' | 'requests'>(() => (
+  route.query.tab === 'requests' ? 'requests' : 'users'
+));
+
+function setTab(tab: 'users' | 'requests') {
+  void router.replace({
+    query: {
+      ...route.query,
+      tab,
+    },
+  });
+}
+
+const filteredUsers = computed(() => {
+  const items = usersQuery.result.value?.managerUsers ?? [];
+  const query = search.value.trim().toLowerCase();
+
+  return items.filter((item) => {
+    if (!query) {
+      return true;
+    }
+
+    return [
+      item.fullName,
+      item.email,
+      item.companyName || '',
+      item.inn || '',
+    ]
+      .join(' ')
+      .toLowerCase()
+      .includes(query);
+  });
+});
+
+function requestStatusLabel(status: RequestItem['status']) {
  if (status === 'APPROVED') {
-    return 'Активен';
+    return 'Одобрена';
  }
  if (status === 'REJECTED') {
-    return 'Отклонен';
+    return 'Отклонена';
  }
  return 'На проверке';
 }

-function statusClass(status: ClientCard['status']) {
+function requestStatusClass(status: RequestItem['status']) {
  if (status === 'APPROVED') {
    return 'badge badge-success border-0';
  }
@@ -36,8 +77,8 @@ function statusClass(status: ClientCard['status']) {
  return 'badge badge-warning border-0';
 }

-const filteredClients = computed(() => {
-  const items = clientsQuery.result.value?.registrationRequests ?? [];
+const filteredRequests = computed(() => {
+  const items = requestsQuery.result.value?.registrationRequests ?? [];
  const query = search.value.trim().toLowerCase();

  return items.filter((item) => {
@@ -62,48 +103,91 @@ const filteredClients = computed(() => {
  <section class="space-y-6">
    <UiSectionSearchHero
      v-model="search"
-      title="Клиенты"
-      search-placeholder="Компания, контакт, email или ИНН"
+      title="Пользователи"
+      :search-placeholder="activeTab === 'users' ? 'Имя, email, компания или ИНН' : 'Компания, контакт, email или ИНН'"
    >
      <template #controls>
        <NuxtLink to="/clients/invite" class="btn btn-primary border-0">
-          Пригласить клиента
+          Пригласить
        </NuxtLink>
      </template>
    </UiSectionSearchHero>

-    <div v-if="clientsQuery.loading.value" class="manager-empty-state">
-      Загружаем клиентов...
-    </div>
-    <div v-else-if="filteredClients.length === 0" class="manager-empty-state">
-      По текущему запросу карточки клиентов не найдены.
-    </div>
-
-    <div v-else class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
-      <NuxtLink
-        v-for="client in filteredClients"
-        :key="client.id"
-        :to="`/clients/${client.id}`"
-        class="surface-card rounded-3xl p-5"
+    <div class="tabs tabs-boxed w-fit bg-white">
+      <button
+        class="tab"
+        :class="{ 'tab-active': activeTab === 'users' }"
+        @click="setTab('users')"
      >
-        <div class="flex items-start justify-between gap-3">
-          <div class="space-y-1">
-            <h2 class="text-lg font-bold text-[#123824]">{{ client.companyName }}</h2>
-            <p class="text-sm text-[#466653]">{{ client.contactName }}</p>
-          </div>
-          <span :class="statusClass(client.status)">{{ statusLabel(client.status) }}</span>
-        </div>
-
-        <div class="mt-4 space-y-2 text-sm text-[#355947]">
-          <p>{{ client.email }}</p>
-          <p v-if="client.inn">ИНН: {{ client.inn }}</p>
-          <p>{{ new Date(client.createdAt).toLocaleDateString() }}</p>
-        </div>
-
-        <p v-if="client.rejectionReason" class="mt-4 text-sm text-[#a34a34]">
-          {{ client.rejectionReason }}
-        </p>
-      </NuxtLink>
+        Пользователи
+      </button>
+      <button
+        class="tab"
+        :class="{ 'tab-active': activeTab === 'requests' }"
+        @click="setTab('requests')"
+      >
+        Заявки
+      </button>
    </div>
+
+    <template v-if="activeTab === 'users'">
+      <div v-if="usersQuery.loading.value" class="manager-empty-state">
+        Загружаем пользователей...
+      </div>
+      <div v-else-if="filteredUsers.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="user in filteredUsers"
+          :key="user.id"
+          class="surface-card rounded-3xl p-5"
+        >
+          <div class="space-y-1">
+            <h2 class="text-lg font-bold text-[#123824]">{{ user.fullName }}</h2>
+            <p class="text-sm text-[#466653]">{{ user.email }}</p>
+            <p v-if="user.companyName" class="text-sm text-[#466653]">{{ user.companyName }}</p>
+          </div>
+
+          <div class="mt-4 space-y-2 text-sm text-[#355947]">
+            <p v-if="user.inn">ИНН: {{ user.inn }}</p>
+            <p>Заказов: {{ user.orderCount }}</p>
+            <p v-if="user.lastOrderAt">Последний заказ: {{ new Date(user.lastOrderAt).toLocaleString() }}</p>
+            <p>Создан: {{ new Date(user.createdAt).toLocaleDateString() }}</p>
+          </div>
+        </article>
+      </div>
+    </template>
+
+    <template v-else>
+      <div v-if="requestsQuery.loading.value" class="manager-empty-state">
+        Загружаем заявки...
+      </div>
+      <div v-else-if="filteredRequests.length === 0" class="manager-empty-state">
+        Заявки по текущему запросу не найдены.
+      </div>
+      <div v-else class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
+        <NuxtLink
+          v-for="request in filteredRequests"
+          :key="request.id"
+          :to="`/clients/${request.id}?tab=requests`"
+          class="surface-card rounded-3xl p-5"
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div class="space-y-1">
+              <h2 class="text-lg font-bold text-[#123824]">{{ request.companyName }}</h2>
+              <p class="text-sm text-[#466653]">{{ request.contactName }}</p>
+            </div>
+            <span :class="requestStatusClass(request.status)">{{ requestStatusLabel(request.status) }}</span>
+          </div>
+
+          <div class="mt-4 space-y-2 text-sm text-[#355947]">
+            <p>{{ request.email }}</p>
+            <p v-if="request.inn">ИНН: {{ request.inn }}</p>
+            <p>{{ new Date(request.createdAt).toLocaleDateString() }}</p>
+          </div>
+        </NuxtLink>
+      </div>
+    </template>
  </section>
 </template>
--- a/app/pages/clients/invite.vue
+++ b/app/pages/clients/invite.vue
@@ -37,7 +37,7 @@ async function createInvitation() {

 <template>
  <section class="space-y-6 max-w-3xl">
-    <NuxtLink to="/clients" class="text-sm font-semibold text-[#0d854a]">← Назад к клиентам</NuxtLink>
+    <NuxtLink to="/clients" class="text-sm font-semibold text-[#0d854a]">← Назад к пользователям</NuxtLink>

    <div class="manager-hero">
      <p class="manager-eyebrow">Приглашение</p>