web-frontend/app/pages/clients/index.vue

<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import {
  ManagerUsersDocument,
  RegistrationRequestsDocument,
  type RegistrationRequestsQuery,
} from '~/composables/graphql/generated';
import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';

definePageMeta({
  middleware: ['manager-only'],
});

type RequestItem = RegistrationRequestsQuery['registrationRequests'][number];

const route = useRoute();
const search = ref('');

const usersQuery = useQuery(ManagerUsersDocument);
const requestsQuery = useQuery(RegistrationRequestsDocument, {
  status: null,
});

const activeTab = computed<'users' | 'requests'>(() => (
  route.query.tab === 'requests' ? 'requests' : 'users'
));

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.toLowerCase().includes(query);
  });
});

function requestStatusLabel(status: RequestItem['status']) {
  if (status === 'APPROVED') {
    return 'Одобрена';
  }
  if (status === 'REJECTED') {
    return 'Отклонена';
  }
  return 'На проверке';
}

function requestStatusClass(status: RequestItem['status']) {
  if (status === 'APPROVED') {
    return 'badge badge-success border-0';
  }
  if (status === 'REJECTED') {
    return 'badge badge-error border-0';
  }
  return 'badge badge-warning border-0';
}

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

  return items.filter((item) => {
    if (!query) {
      return true;
    }

    return [
      item.companyName,
      item.contactName,
      item.email,
      item.inn || '',
    ]
      .join(' ')
      .toLowerCase()
      .includes(query);
  });
});

const {
  canLoadMore: canLoadMoreUsers,
  loadMore: loadMoreUsers,
  loadMoreSentinel: loadMoreUsersSentinel,
  remainingCount: remainingUsersCount,
  visibleItems: visibleUsers,
} = useIncrementalList(filteredUsers, {
  pageSize: 24,
  enabled: computed(() => activeTab.value === 'users'),
  resetKeys: [search, activeTab],
});

const {
  canLoadMore: canLoadMoreRequests,
  loadMore: loadMoreRequests,
  loadMoreSentinel: loadMoreRequestsSentinel,
  remainingCount: remainingRequestsCount,
  visibleItems: visibleRequests,
} = useIncrementalList(filteredRequests, {
  pageSize: 24,
  enabled: computed(() => activeTab.value === 'requests'),
  resetKeys: [search, activeTab],
});

function userInitials(fullName: string) {
  const parts = fullName
    .trim()
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2);

  if (!parts.length) {
    return 'FR';
  }

  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
}
</script>

<template>
  <section class="space-y-6">
    <UiSectionSearchHero
      v-model="search"
      title="Клиенты"
      :search-placeholder="activeTab === 'users' ? 'Имя пользователя' : 'Компания, контакт, email или ИНН'"
    >
      <template #controls>
        <NuxtLink to="/clients/invite" class="btn btn-primary border-0">
          Пригласить
        </NuxtLink>
      </template>
    </UiSectionSearchHero>

    <div class="flex flex-wrap gap-2">
      <NuxtLink
        to="/clients?tab=users"
        class="inline-flex items-center rounded-full px-4 py-2 text-sm font-semibold transition"
        :class="activeTab === 'users' ? 'bg-[#123824] text-white' : 'bg-white text-[#355947] hover:bg-[#f4faf6]'"
      >
        Клиенты
      </NuxtLink>
      <NuxtLink
        to="/clients?tab=requests"
        class="inline-flex items-center rounded-full px-4 py-2 text-sm font-semibold transition"
        :class="activeTab === 'requests' ? 'bg-[#123824] text-white' : 'bg-white text-[#355947] hover:bg-[#f4faf6]'"
      >
        Заявки
      </NuxtLink>
    </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="space-y-4">
        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
          <UsersGridCard
            v-for="user in visibleUsers"
            :key="user.id"
            :to="`/clients/${user.id}`"
            :full-name="user.fullName"
            :avatar-src="messengerConnectionAvatarSrc(user.telegramConnection)"
            :initials="userInitials(user.fullName)"
          />
        </div>

        <div
          v-if="canLoadMoreUsers"
          ref="loadMoreUsersSentinel"
          class="flex justify-center"
        >
          <button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreUsers">
            Показать ещё {{ Math.min(remainingUsersCount, 24) }}
          </button>
        </div>
      </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="space-y-4">
        <div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
          <NuxtLink
            v-for="request in visibleRequests"
            :key="request.id"
            :to="`/clients/${request.id}?tab=requests`"
            class="surface-card surface-card-interactive 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>

        <div
          v-if="canLoadMoreRequests"
          ref="loadMoreRequestsSentinel"
          class="flex justify-center"
        >
          <button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreRequests">
            Показать ещё {{ Math.min(remainingRequestsCount, 24) }}
          </button>
        </div>
      </div>
    </template>
  </section>
</template>