Restructure manager navigation and views

app/components/ui/AppHeader.vue

@@ -19,8 +19,8 @@ const centerCapsule = computed<NavItem[]>(() => {
 
   if (meQuery.result.value?.me?.role === 'MANAGER') {
     items.push(
-      { to: '/clients', label: 'Клиенты' },
-      { to: '/client-orders', label: 'Заказы клиентов' },
+      { to: '/clients', label: 'Пользователи' },
+      { to: '/client-orders', label: 'Заказы' },
       { to: '/bonus-system', label: 'Бонусы' },
     );
   }

app/composables/graphql/generated.ts

@@ -174,6 +174,30 @@ export enum LoginChannel {
   Telegram = 'TELEGRAM'
 }
 
+export type ManagerBonusBalance = {
+  __typename?: 'ManagerBonusBalance';
+  balance: Scalars['Float']['output'];
+  companyName?: Maybe<Scalars['String']['output']>;
+  email: Scalars['String']['output'];
+  fullName: Scalars['String']['output'];
+  pendingWithdrawalAmount: Scalars['Float']['output'];
+  transactionsCount: Scalars['Int']['output'];
+  userId: Scalars['ID']['output'];
+};
+
+export type ManagerUser = {
+  __typename?: 'ManagerUser';
+  companyName?: Maybe<Scalars['String']['output']>;
+  createdAt: Scalars['DateTime']['output'];
+  email: Scalars['String']['output'];
+  fullName: Scalars['String']['output'];
+  id: Scalars['ID']['output'];
+  inn?: Maybe<Scalars['String']['output']>;
+  lastOrderAt?: Maybe<Scalars['DateTime']['output']>;
+  orderCount: Scalars['Int']['output'];
+  role: UserRole;
+};
+
 export type MessengerConnection = {
   __typename?: 'MessengerConnection';
   avatarAvailable: Scalars['Boolean']['output'];
@@ -476,8 +500,10 @@ export type Query = {
   __typename?: 'Query';
   clientProducts: Array<Product>;
   healthcheck: Scalars['String']['output'];
+  managerBonusBalances: Array<ManagerBonusBalance>;
   managerNotificationHistory: Array<NotificationHistoryItem>;
   managerOrders: Array<Order>;
+  managerUsers: Array<ManagerUser>;
   me?: Maybe<User>;
   myCart: Cart;
   myCounterpartyProfile?: Maybe<CounterpartyProfile>;
@@ -778,6 +804,11 @@ export type CreateReferralMutationVariables = Exact<{
 
 export type CreateReferralMutation = { __typename?: 'Mutation', createReferral: { __typename?: 'ReferralLink', id: string, referrerId: string, refereeId: string, createdAt: any } };
 
+export type ManagerBonusBalancesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ManagerBonusBalancesQuery = { __typename?: 'Query', managerBonusBalances: Array<{ __typename?: 'ManagerBonusBalance', userId: string, email: string, fullName: string, companyName?: string | null, balance: number, pendingWithdrawalAmount: number, transactionsCount: number }> };
+
 export type ManagerFinalizeOrderMutationVariables = Exact<{
   orderId: Scalars['ID']['input'];
   decision: Decision;
@@ -793,6 +824,11 @@ export type ManagerOrdersQueryVariables = Exact<{
 
 export type ManagerOrdersQuery = { __typename?: 'Query', managerOrders: Array<{ __typename?: 'Order', id: string, code: string, status: OrderStatus, kind: OrderKind, customerId: string, deliveryAddress?: string | null, deliveryTerms?: string | null, deliveryFee?: number | null, totalPrice?: number | null, createdAt: any, items: Array<{ __typename?: 'OrderItem', id: string, productName: string, quantity: number }> }> };
 
+export type ManagerUsersQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, email: string, fullName: string, role: UserRole, companyName?: string | null, inn?: string | null, createdAt: any, orderCount: number, lastOrderAt?: any | null }> };
+
 export type ReferralStatsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -1558,6 +1594,39 @@ export function useCreateReferralMutation(options: VueApolloComposable.UseMutati
   return VueApolloComposable.useMutation<CreateReferralMutation, CreateReferralMutationVariables>(CreateReferralDocument, options);
 }
 export type CreateReferralMutationCompositionFunctionResult = VueApolloComposable.UseMutationReturn<CreateReferralMutation, CreateReferralMutationVariables>;
+export const ManagerBonusBalancesDocument = gql`
+    query ManagerBonusBalances {
+  managerBonusBalances {
+    userId
+    email
+    fullName
+    companyName
+    balance
+    pendingWithdrawalAmount
+    transactionsCount
+  }
+}
+    `;
+
+/**
+ * __useManagerBonusBalancesQuery__
+ *
+ * To run a query within a Vue component, call `useManagerBonusBalancesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useManagerBonusBalancesQuery` returns an object from Apollo Client that contains result, loading and error properties
+ * you can use to render your UI.
+ *
+ * @param options that will be passed into the query, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/query.html#options;
+ *
+ * @example
+ * const { result, loading, error } = useManagerBonusBalancesQuery();
+ */
+export function useManagerBonusBalancesQuery(options: VueApolloComposable.UseQueryOptions<ManagerBonusBalancesQuery, ManagerBonusBalancesQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ManagerBonusBalancesQuery, ManagerBonusBalancesQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ManagerBonusBalancesQuery, ManagerBonusBalancesQueryVariables>> = {}) {
+  return VueApolloComposable.useQuery<ManagerBonusBalancesQuery, ManagerBonusBalancesQueryVariables>(ManagerBonusBalancesDocument, {}, options);
+}
+export function useManagerBonusBalancesLazyQuery(options: VueApolloComposable.UseQueryOptions<ManagerBonusBalancesQuery, ManagerBonusBalancesQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ManagerBonusBalancesQuery, ManagerBonusBalancesQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ManagerBonusBalancesQuery, ManagerBonusBalancesQueryVariables>> = {}) {
+  return VueApolloComposable.useLazyQuery<ManagerBonusBalancesQuery, ManagerBonusBalancesQueryVariables>(ManagerBonusBalancesDocument, {}, options);
+}
+export type ManagerBonusBalancesQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<ManagerBonusBalancesQuery, ManagerBonusBalancesQueryVariables>;
 export const ManagerFinalizeOrderDocument = gql`
     mutation ManagerFinalizeOrder($orderId: ID!, $decision: Decision!) {
   managerFinalizeOrder(orderId: $orderId, decision: $decision) {
@@ -1634,6 +1703,41 @@ export function useManagerOrdersLazyQuery(variables: ManagerOrdersQueryVariables
   return VueApolloComposable.useLazyQuery<ManagerOrdersQuery, ManagerOrdersQueryVariables>(ManagerOrdersDocument, variables, options);
 }
 export type ManagerOrdersQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<ManagerOrdersQuery, ManagerOrdersQueryVariables>;
+export const ManagerUsersDocument = gql`
+    query ManagerUsers {
+  managerUsers {
+    id
+    email
+    fullName
+    role
+    companyName
+    inn
+    createdAt
+    orderCount
+    lastOrderAt
+  }
+}
+    `;
+
+/**
+ * __useManagerUsersQuery__
+ *
+ * To run a query within a Vue component, call `useManagerUsersQuery` and pass it any options that fit your needs.
+ * When your component renders, `useManagerUsersQuery` returns an object from Apollo Client that contains result, loading and error properties
+ * you can use to render your UI.
+ *
+ * @param options that will be passed into the query, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/query.html#options;
+ *
+ * @example
+ * const { result, loading, error } = useManagerUsersQuery();
+ */
+export function useManagerUsersQuery(options: VueApolloComposable.UseQueryOptions<ManagerUsersQuery, ManagerUsersQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ManagerUsersQuery, ManagerUsersQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ManagerUsersQuery, ManagerUsersQueryVariables>> = {}) {
+  return VueApolloComposable.useQuery<ManagerUsersQuery, ManagerUsersQueryVariables>(ManagerUsersDocument, {}, options);
+}
+export function useManagerUsersLazyQuery(options: VueApolloComposable.UseQueryOptions<ManagerUsersQuery, ManagerUsersQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ManagerUsersQuery, ManagerUsersQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ManagerUsersQuery, ManagerUsersQueryVariables>> = {}) {
+  return VueApolloComposable.useLazyQuery<ManagerUsersQuery, ManagerUsersQueryVariables>(ManagerUsersDocument, {}, options);
+}
+export type ManagerUsersQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<ManagerUsersQuery, ManagerUsersQueryVariables>;
 export const ReferralStatsDocument = gql`
     query ReferralStats {
   referralStats {

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>

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"

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">
       Загружаем карточку клиента...

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>

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>