Add message board and bonus program preview

This commit is contained in:
Ruslan Bakiev
2026-04-06 14:41:32 +07:00
parent 5396354962
commit ac5ee256fd
10 changed files with 1060 additions and 19 deletions

View File

@@ -30,9 +30,15 @@ const withdrawalsQuery = useQuery(ManagerWithdrawalRequestsDocument, {
status: 'PENDING',
});
const activeTab = computed<'balances' | 'withdrawals'>(() => (
route.query.tab === 'withdrawals' ? 'withdrawals' : 'balances'
));
const activeTab = computed<'balances' | 'withdrawals' | 'manager'>(() => {
if (route.query.tab === 'withdrawals') {
return 'withdrawals';
}
if (route.query.tab === 'manager') {
return 'manager';
}
return 'balances';
});
const balances = computed<BalanceItem[]>(() => balancesQuery.result.value?.managerBonusBalances ?? []);
const referralLinks = computed<ReferralLinkItem[]>(() => referralLinksQuery.result.value?.managerReferralLinks ?? []);
@@ -165,14 +171,12 @@ function formatAmount(value: number) {
<UiSectionSearchHero
v-model="search"
title="Бонусы"
:search-placeholder="activeTab === 'balances' ? 'Клиент, связанный клиент, email или процент' : 'Пользователь, сумма или статус'"
>
<template #controls>
<NuxtLink to="/bonus-system/referrals/new" class="btn btn-primary border-0">
Добавить связь
</NuxtLink>
</template>
</UiSectionSearchHero>
:search-placeholder="activeTab === 'balances'
? 'Клиент, связанный клиент, email или процент'
: activeTab === 'withdrawals'
? 'Пользователь, сумма или статус'
: 'Сценарии для менеджера'"
/>
<template v-if="activeTab === 'balances'">
<div v-if="balancesQuery.loading.value || referralLinksQuery.loading.value || usersQuery.loading.value" class="manager-empty-state">
@@ -207,6 +211,54 @@ 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>
<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>
<NuxtLink
to="/bonus-system?tab=withdrawals"
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>
<NuxtLink
to="/bonus-program?entry=manager-preview"
class="surface-card surface-card-interactive rounded-3xl bg-[#0d0d0f] p-5 text-white"
>
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/55">Client view</p>
<h2 class="mt-3 text-xl font-black tracking-[-0.03em] text-white">Открыть бонусный экран клиента</h2>
<p class="mt-2 text-sm leading-6 text-white/72">
Посмотреть, куда ведёт бонусное уведомление и как выглядит отдельный интерфейс программы.
</p>
</NuxtLink>
</div>
</template>
<template v-else>
<div v-if="withdrawalsQuery.loading.value" class="manager-empty-state">
Загружаем заявки...