Simplify manager tab hierarchy

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>