Restructure manager navigation and views

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>