fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify manager cabinet flows

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-03 19:23:08 +07:00
parent 1c19b06451
commit 1c2070b8d8
14 changed files with 1073 additions and 680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
app/pages/bonus-system/index.vue Normal file
View File

@@ -0,0 +1,139 @@
<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import {
ReferralStatsDocument,
type ReferralStatsQuery,
} from '~/composables/graphql/generated';
definePageMeta({
middleware: ['manager-only'],
});
type TransactionItem = ReferralStatsQuery['referralStats']['transactions'][number];
type WithdrawalItem = ReferralStatsQuery['referralStats']['pendingWithdrawals'][number];
const bonusQuery = useQuery(ReferralStatsDocument);
const search = ref('');
const transactions = computed<TransactionItem[]>(() => bonusQuery.result.value?.referralStats.transactions ?? []);
const withdrawals = computed<WithdrawalItem[]>(() => bonusQuery.result.value?.referralStats.pendingWithdrawals ?? []);
const filteredTransactions = computed(() => {
const query = search.value.trim().toLowerCase();
return transactions.value.filter((transaction) => {
if (!query) {
return true;
}
return [
transaction.userId,
transaction.reason,
transaction.orderId || '',
String(transaction.amount),
]
.join(' ')
.toLowerCase()
.includes(query);
});
});
</script>
<template>
<section class="space-y-6">
<div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
<div class="manager-hero">
<p class="manager-eyebrow">Бонусы</p>
<h1 class="manager-title">Отдельный раздел для бонусной системы</h1>
<p class="manager-copy">Здесь остаются история начислений и заявки на вывод, без смешивания с клиентами.</p>
</div>
<div class="flex flex-wrap gap-2">
<NuxtLink to="/bonus-system/referrals/new" class="btn btn-secondary border-0">Создать связь</NuxtLink>
<NuxtLink to="/bonus-system/transactions/new" class="btn btn-primary border-0">Добавить бонус</NuxtLink>
</div>
</div>
<div class="grid gap-4 lg:grid-cols-3">
<div class="manager-stat-card">
<p class="manager-stat-label">Баланс</p>
<p class="manager-stat-value">{{ bonusQuery.result.value?.referralStats.availableBalance ?? 0 }}</p>
</div>
<div class="manager-stat-card">
<p class="manager-stat-label">Рефералы</p>
<p class="manager-stat-value">{{ bonusQuery.result.value?.referralStats.referralsCount ?? 0 }}</p>
</div>
<div class="manager-stat-card">
<p class="manager-stat-label">Заявки на вывод</p>
<p class="manager-stat-value">{{ withdrawals.length }}</p>
</div>
</div>
<div class="surface-card rounded-3xl p-4 md:p-5">
<label class="form-control">
<span class="label-text">Search</span>
<input
v-model="search"
type="text"
class="input manager-field w-full"
placeholder="Пользователь, причина, заказ или сумма"
>
</label>
</div>
<div class="grid gap-4 xl:grid-cols-[1.1fr_0.9fr]">
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">История транзакций</h2>
<div v-if="bonusQuery.loading.value" class="manager-empty-state mt-4">
Загружаем историю...
</div>
<div v-else-if="filteredTransactions.length === 0" class="manager-empty-state mt-4">
Транзакции по текущему запросу не найдены.
</div>
<div v-else class="mt-4 space-y-3">
<article v-for="transaction in filteredTransactions" :key="transaction.id" class="surface-subcard p-4">
<div class="flex flex-wrap items-start justify-between gap-3">
<div>
<p class="text-sm font-semibold text-[#123824]">{{ transaction.reason }}</p>
<p class="mt-1 text-sm text-[#5c7b69]">Пользователь: {{ transaction.userId }}</p>
</div>
<div class="manager-mini-card text-sm font-semibold text-[#123824]">
{{ transaction.amount }}
</div>
</div>
<div class="mt-3 flex flex-wrap gap-3 text-xs text-[#5c7b69]">
<span>{{ new Date(transaction.createdAt).toLocaleString() }}</span>
<span v-if="transaction.orderId">Заказ: {{ transaction.orderId }}</span>
</div>
</article>
</div>
</div>
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Заявки на вывод</h2>
<div v-if="bonusQuery.loading.value" class="manager-empty-state mt-4">
Загружаем заявки...
</div>
<div v-else-if="withdrawals.length === 0" class="manager-empty-state mt-4">
Активных заявок на вывод сейчас нет.
</div>
<div v-else class="mt-4 space-y-3">
<article v-for="withdrawal in withdrawals" :key="withdrawal.id" class="surface-subcard p-4">
<div class="space-y-2">
<p class="text-sm font-semibold text-[#123824]">Пользователь: {{ withdrawal.requesterId }}</p>
<p class="text-sm text-[#355947]">Сумма: {{ withdrawal.amount }}</p>
<p class="text-xs text-[#5c7b69]">{{ new Date(withdrawal.createdAt).toLocaleString() }}</p>
</div>
<div class="mt-4">
<NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm border-0">
Проверить вывод
</NuxtLink>
</div>
</article>
</div>
</div>
</div>
</section>
</template>

49
app/pages/bonus-system/referrals/new.vue Normal file
View File

@@ -0,0 +1,49 @@
<script setup lang="ts">
import { useMutation } from '@vue/apollo-composable';
import { CreateReferralDocument } from '~/composables/graphql/generated';
definePageMeta({
middleware: ['manager-only'],
});
const refereeUserId = ref('');
const createdReferralId = ref('');
const createReferralMutation = useMutation(CreateReferralDocument);
async function createReferral() {
createdReferralId.value = '';
const response = await createReferralMutation.mutate({
input: {
refereeUserId: refereeUserId.value,
},
});
createdReferralId.value = response?.data?.createReferral.id ?? '';
}
</script>
<template>
<section class="space-y-6 max-w-3xl">
<NuxtLink to="/bonus-system" class="text-sm font-semibold text-[#0d854a]">← Назад к бонусам</NuxtLink>
<div class="manager-hero">
<p class="manager-eyebrow">Бонусы</p>
<h1 class="manager-title">Создать реферальную связь</h1>
</div>
<div class="surface-card rounded-3xl p-5">
<label class="form-control">
<span class="label-text">ID приглашенного пользователя</span>
<input v-model="refereeUserId" class="input manager-field w-full" placeholder="user id">
</label>
<div class="mt-4">
<button class="btn btn-primary border-0" @click="createReferral">Создать</button>
</div>
</div>
<div v-if="createdReferralId" class="surface-card rounded-3xl p-5 text-sm text-[#123824]">
Создана связь: <span class="font-semibold">{{ createdReferralId }}</span>
</div>
</section>
</template>

64
app/pages/bonus-system/transactions/new.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup lang="ts">
import { useMutation } from '@vue/apollo-composable';
import { AddBonusTransactionDocument } from '~/composables/graphql/generated';
definePageMeta({
middleware: ['manager-only'],
});
const userId = ref('');
const amount = ref(100);
const reason = ref('Реферальный бонус');
const createdTransactionId = ref('');
const addBonusMutation = useMutation(AddBonusTransactionDocument);
async function addBonus() {
createdTransactionId.value = '';
const response = await addBonusMutation.mutate({
input: {
userId: userId.value,
amount: Number(amount.value),
reason: reason.value,
},
});
createdTransactionId.value = response?.data?.addBonusTransaction.id ?? '';
}
</script>
<template>
<section class="space-y-6 max-w-3xl">
<NuxtLink to="/bonus-system" class="text-sm font-semibold text-[#0d854a]">← Назад к бонусам</NuxtLink>
<div class="manager-hero">
<p class="manager-eyebrow">Бонусы</p>
<h1 class="manager-title">Добавить бонусную транзакцию</h1>
</div>
<div class="surface-card rounded-3xl p-5 space-y-3">
<label class="form-control">
<span class="label-text">ID пользователя</span>
<input v-model="userId" class="input manager-field w-full" placeholder="user id">
</label>
<label class="form-control">
<span class="label-text">Сумма</span>
<input v-model="amount" type="number" class="input manager-field w-full" placeholder="100">
</label>
<label class="form-control">
<span class="label-text">Причина</span>
<input v-model="reason" class="input manager-field w-full" placeholder="Причина начисления">
</label>
<div>
<button class="btn btn-primary border-0" @click="addBonus">Начислить</button>
</div>
</div>
<div v-if="createdTransactionId" class="surface-card rounded-3xl p-5 text-sm text-[#123824]">
Создана транзакция: <span class="font-semibold">{{ createdTransactionId }}</span>
</div>
</section>
</template>

87
app/pages/bonus-system/withdrawals/[id].vue Normal file
View File

@@ -0,0 +1,87 @@
<script setup lang="ts">
import { useMutation, useQuery } from '@vue/apollo-composable';
import {
ReferralStatsDocument,
ReviewRewardWithdrawalDocument,
} from '~/composables/graphql/generated';
definePageMeta({
middleware: ['manager-only'],
});
const route = useRoute();
const withdrawalId = computed(() => String(route.params.id || ''));
const bonusQuery = useQuery(ReferralStatsDocument);
const reviewMutation = useMutation(ReviewRewardWithdrawalDocument);
const decision = ref<'APPROVE' | 'REJECT'>('APPROVE');
const reviewComment = ref('');
const reviewResult = ref('');
const currentWithdrawal = computed(() =>
(bonusQuery.result.value?.referralStats.pendingWithdrawals ?? []).find((item) => item.id === withdrawalId.value),
);
async function reviewWithdrawal() {
if (!currentWithdrawal.value) {
return;
}
const response = await reviewMutation.mutate({
input: {
withdrawalId: currentWithdrawal.value.id,
decision: decision.value,
reviewComment: reviewComment.value || undefined,
},
});
reviewResult.value = response?.data?.reviewRewardWithdrawal.status ?? '';
await bonusQuery.refetch();
}
</script>
<template>
<section class="space-y-6 max-w-3xl">
<NuxtLink to="/bonus-system" class="text-sm font-semibold text-[#0d854a]">← Назад к бонусам</NuxtLink>
<div v-if="bonusQuery.loading.value" class="manager-empty-state">
Загружаем заявку на вывод...
</div>
<div v-else-if="!currentWithdrawal" class="manager-empty-state">
Заявка на вывод не найдена.
</div>
<template v-else>
<div class="manager-hero">
<p class="manager-eyebrow">Вывод</p>
<h1 class="manager-title">Проверка заявки на вывод</h1>
<p class="manager-copy">Пользователь: {{ currentWithdrawal.requesterId }} · Сумма: {{ currentWithdrawal.amount }}</p>
</div>
<div class="surface-card rounded-3xl p-5 space-y-3">
<label class="form-control">
<span class="label-text">Решение</span>
<select v-model="decision" class="select manager-field w-full">
<option value="APPROVE">Одобрить</option>
<option value="REJECT">Отклонить</option>
</select>
</label>
<label class="form-control">
<span class="label-text">Комментарий</span>
<textarea v-model="reviewComment" class="textarea manager-field min-h-28 w-full" placeholder="Комментарий для заявки" />
</label>
<div>
<button class="btn btn-primary border-0" @click="reviewWithdrawal">Сохранить решение</button>
</div>
</div>
<div v-if="reviewResult" class="surface-card rounded-3xl p-5 text-sm text-[#123824]">
Новый статус: <span class="font-semibold">{{ reviewResult }}</span>
</div>
</template>
</section>
</template>