Simplify manager tab hierarchy

2026-04-06 15:07:59 +07:00
parent befec16a84
commit 2e3c64bc98
4 changed files with 182 additions and 208 deletions
--- a/app/pages/bonus-system/index.vue
+++ b/app/pages/bonus-system/index.vue
@@ -20,6 +20,15 @@ type BalanceItem = ManagerBonusBalancesQuery['managerBonusBalances'][number];
 type ReferralLinkItem = ManagerReferralLinksQuery['managerReferralLinks'][number];
 type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
 type WithdrawalItem = ManagerWithdrawalRequestsQuery['managerWithdrawalRequests'][number];
+type ProductCard = {
+  id: string;
+  store: string;
+  title: string;
+  amount: number;
+  subtitle: string;
+  gradient: string;
+  tags: string[];
+};

 const route = useRoute();
 const search = ref('');
@@ -30,21 +39,77 @@ const withdrawalsQuery = useQuery(ManagerWithdrawalRequestsDocument, {
  status: 'PENDING',
 });

-const activeTab = computed<'balances' | 'withdrawals' | 'manager'>(() => {
+const activeTab = computed<'balances' | 'withdrawals' | 'products'>(() => {
  if (route.query.tab === 'withdrawals') {
    return 'withdrawals';
  }
-  if (route.query.tab === 'manager') {
-    return 'manager';
+  if (route.query.tab === 'products' || route.query.tab === 'manager') {
+    return 'products';
  }
  return 'balances';
 });

+const productCards: ProductCard[] = [
+  {
+    id: 'ozon-3000',
+    store: 'Ozon',
+    title: 'Подарочная карта Ozon',
+    amount: 3000,
+    subtitle: 'Универсальная карта для маркетплейса: техника, дом и повседневные покупки.',
+    gradient: 'linear-gradient(135deg, #38b6ff 0%, #1369ff 55%, #0b2f72 100%)',
+    tags: ['Маркетплейс', 'Электронная карта', '3 000 ₽'],
+  },
+  {
+    id: 'ozon-5000',
+    store: 'Ozon',
+    title: 'Подарочная карта Ozon',
+    amount: 5000,
+    subtitle: 'Крупный номинал для заметных подарков и сезонных закупок.',
+    gradient: 'linear-gradient(135deg, #65d0ff 0%, #247bff 52%, #12315e 100%)',
+    tags: ['Маркетплейс', 'Топ-номинал', '5 000 ₽'],
+  },
+  {
+    id: 'wildberries-3000',
+    store: 'Wildberries',
+    title: 'Подарочная карта Wildberries',
+    amount: 3000,
+    subtitle: 'Подходит для одежды, дома и повседневных мелочей в одном каталоге.',
+    gradient: 'linear-gradient(135deg, #d84dff 0%, #8b27ff 52%, #39006a 100%)',
+    tags: ['Fashion', 'Маркетплейс', '3 000 ₽'],
+  },
+  {
+    id: 'wildberries-4000',
+    store: 'Wildberries',
+    title: 'Подарочная карта Wildberries',
+    amount: 4000,
+    subtitle: 'Средний номинал для fashion-покупок и товаров для дома.',
+    gradient: 'linear-gradient(135deg, #ef7cff 0%, #a12dff 50%, #4c0b7d 100%)',
+    tags: ['Одежда', 'Дом', '4 000 ₽'],
+  },
+  {
+    id: 'mvideo-4000',
+    store: 'М.Видео',
+    title: 'Подарочная карта М.Видео',
+    amount: 4000,
+    subtitle: 'Для техники, аксессуаров и бытовой электроники.',
+    gradient: 'linear-gradient(135deg, #ff9461 0%, #ff5630 48%, #821414 100%)',
+    tags: ['Техника', 'Электроника', '4 000 ₽'],
+  },
+  {
+    id: 'mvideo-5000',
+    store: 'М.Видео',
+    title: 'Подарочная карта М.Видео',
+    amount: 5000,
+    subtitle: 'Максимальный номинал для заметных подарков и апгрейдов рабочего места.',
+    gradient: 'linear-gradient(135deg, #ffb17e 0%, #ff6842 50%, #8f1818 100%)',
+    tags: ['Электроника', 'Подарок', '5 000 ₽'],
+  },
+];
+
 const balances = computed<BalanceItem[]>(() => balancesQuery.result.value?.managerBonusBalances ?? []);
 const referralLinks = computed<ReferralLinkItem[]>(() => referralLinksQuery.result.value?.managerReferralLinks ?? []);
 const users = computed<ManagerUserItem[]>(() => usersQuery.result.value?.managerUsers ?? []);
 const withdrawals = computed<WithdrawalItem[]>(() => withdrawalsQuery.result.value?.managerWithdrawalRequests ?? []);
-
 const usersById = computed(() => new Map(users.value.map((user) => [user.id, user])));

 const referralLinksByReferrer = computed(() => {
@@ -120,6 +185,27 @@ const filteredWithdrawals = computed(() => {
  });
 });

+const filteredProducts = computed(() => {
+  const query = search.value.trim().toLowerCase();
+
+  return productCards.filter((item) => {
+    if (!query) {
+      return true;
+    }
+
+    return [
+      item.store,
+      item.title,
+      item.subtitle,
+      String(item.amount),
+      ...item.tags,
+    ]
+      .join(' ')
+      .toLowerCase()
+      .includes(query);
+  });
+});
+
 const {
  canLoadMore: canLoadMoreBalances,
  loadMore: loadMoreBalances,
@@ -175,7 +261,7 @@ function formatAmount(value: number) {
        ? 'Клиент, связанный клиент, email или процент'
        : activeTab === 'withdrawals'
          ? 'Пользователь, сумма или статус'
-          : 'Сценарии для менеджера'"
+          : 'Магазин, номинал или тип карты'"
    />

    <template v-if="activeTab === 'balances'">
@@ -211,51 +297,65 @@ function formatAmount(value: number) {
      </div>
    </template>

-    <template v-else-if="activeTab === 'manager'">
-      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-        <NuxtLink
-          to="/bonus-system/referrals/new"
-          class="surface-card surface-card-interactive rounded-3xl p-5"
-        >
-          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Связки</p>
-          <h2 class="mt-3 text-xl font-black tracking-[-0.03em] text-[#123824]">Добавить бонусную связь</h2>
-          <p class="mt-2 text-sm leading-6 text-[#557562]">
-            Связать клиентов карточным сценарием и задать процент бонусной программы.
-          </p>
-        </NuxtLink>
+    <template v-else-if="activeTab === 'products'">
+      <div class="surface-card rounded-[32px] p-6">
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+          <div class="space-y-2">
+            <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Витрина магазина</p>
+            <h2 class="text-2xl font-black tracking-[-0.03em] text-[#123824]">Подарочные карты для бонусного каталога</h2>
+            <p class="max-w-3xl text-sm leading-6 text-[#557562]">
+              Вынес товары в отдельную вкладку без лишнего вложения. Пока это стартовый сет из популярных магазинов с номиналами от 3 000 до 5 000 рублей.
+            </p>
+          </div>

-        <NuxtLink
-          to="/bonus-system/transactions/new"
-          class="surface-card surface-card-interactive rounded-3xl p-5"
-        >
-          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Начисления</p>
-          <h2 class="mt-3 text-xl font-black tracking-[-0.03em] text-[#123824]">Ручное начисление</h2>
-          <p class="mt-2 text-sm leading-6 text-[#557562]">
-            Добавить бонусную транзакцию вручную, если нужно быстро выдать бонус вне автоматического сценария.
-          </p>
-        </NuxtLink>
+          <div class="flex flex-wrap gap-2 text-sm text-[#355947]">
+            <span class="rounded-full bg-[#eef7f1] px-3 py-2 font-semibold">3 магазина</span>
+            <span class="rounded-full bg-[#eef7f1] px-3 py-2 font-semibold">6 карточек</span>
+            <span class="rounded-full bg-[#eef7f1] px-3 py-2 font-semibold">3 000-5 000 ₽</span>
+          </div>
+        </div>
+      </div>

-        <NuxtLink
-          to="/bonus-system?tab=withdrawals"
-          class="surface-card surface-card-interactive rounded-3xl p-5"
+      <div v-if="filteredProducts.length === 0" class="manager-empty-state">
+        По текущему запросу товары не найдены.
+      </div>
+      <div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        <article
+          v-for="product in filteredProducts"
+          :key="product.id"
+          class="surface-card overflow-hidden rounded-[32px]"
        >
-          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Выводы</p>
-          <h2 class="mt-3 text-xl font-black tracking-[-0.03em] text-[#123824]">Проверить выплаты</h2>
-          <p class="mt-2 text-sm leading-6 text-[#557562]">
-            Открыть витрину заявок на вывод и разбирать новые обращения по карточкам.
-          </p>
-        </NuxtLink>
+          <div class="p-5 text-white" :style="{ background: product.gradient }">
+            <div class="flex items-start justify-between gap-4">
+              <div>
+                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/72">{{ product.store }}</p>
+                <h3 class="mt-3 text-2xl font-black tracking-[-0.03em]">{{ product.title }}</h3>
+              </div>
+              <span class="rounded-full bg-white/14 px-3 py-1 text-sm font-semibold backdrop-blur-sm">Витрина</span>
+            </div>

-        <NuxtLink
-          to="/messages"
-          class="surface-card surface-card-interactive rounded-3xl p-5"
-        >
-          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Шаблоны</p>
-          <h2 class="mt-3 text-xl font-black tracking-[-0.03em] text-[#123824]">Открыть реестр уведомлений</h2>
-          <p class="mt-2 text-sm leading-6 text-[#557562]">
-            Посмотреть реальные шаблоны из backend-кода и быстро понять, что именно мы отправляем клиенту.
-          </p>
-        </NuxtLink>
+            <div class="mt-10">
+              <p class="text-sm text-white/72">Номинал</p>
+              <p class="mt-2 text-4xl font-black leading-none">{{ formatAmount(product.amount) }} ₽</p>
+            </div>
+          </div>
+
+          <div class="space-y-4 p-5">
+            <p class="text-sm leading-6 text-[#557562]">
+              {{ product.subtitle }}
+            </p>
+
+            <div class="flex flex-wrap gap-2">
+              <span
+                v-for="tag in product.tags"
+                :key="tag"
+                class="rounded-full bg-[#eef7f1] px-3 py-1.5 text-xs font-semibold text-[#0d854a]"
+              >
+                {{ tag }}
+              </span>
+            </div>
+          </div>
+        </article>
      </div>
    </template>

--- a/app/pages/clients/[id].vue
+++ b/app/pages/clients/[id].vue
@@ -22,9 +22,7 @@ type RequestItem = RegistrationRequestsQuery['registrationRequests'][number];
 const route = useRoute();
 const entityId = computed(() => String(route.params.id || ''));
 const isRequestMode = computed(() => route.query.tab === 'requests');
-const backTarget = computed(() => (
-  isRequestMode.value ? '/clients?tab=requests' : '/clients'
-));
+const backTarget = computed(() => '/clients');

 const usersQuery = useQuery(ManagerUsersDetailDocument);
 const requestsQuery = useQuery(RegistrationRequestsDocument, {
--- a/app/pages/clients/index.vue
+++ b/app/pages/clients/index.vue
@@ -1,77 +1,28 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable';
-import {
-  ManagerUsersDocument,
-  RegistrationRequestsDocument,
-  type RegistrationRequestsQuery,
-} from '~/composables/graphql/generated';
+import { ManagerUsersDocument } 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.fullName,
      item.email,
-      item.inn || '',
+      item.companyName || '',
    ]
      .join(' ')
      .toLowerCase()
@@ -87,20 +38,7 @@ const {
  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],
+  resetKeys: [search],
 });

 function userInitials(fullName: string) {
@@ -123,7 +61,7 @@ function userInitials(fullName: string) {
    <UiSectionSearchHero
      v-model="search"
      title="Клиенты"
-      :search-placeholder="activeTab === 'users' ? 'Имя пользователя' : 'Компания, контакт, email или ИНН'"
+      search-placeholder="Имя, компания или email"
    >
      <template #controls>
        <NuxtLink to="/clients/invite" class="btn btn-primary border-0">
@@ -132,95 +70,33 @@ function userInitials(fullName: string) {
      </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 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>

-    <template v-if="activeTab === 'users'">
-      <div v-if="usersQuery.loading.value" class="manager-empty-state">
-        Загружаем пользователей...
+      <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 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>
+    </div>
  </section>
 </template>