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

Simplify manager section layouts

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-04 08:45:53 +07:00
parent 26b44f30bf
commit 60f8b863a2
5 changed files with 111 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
app/pages/bonus-system/index.vue
View File

@@ -45,57 +45,9 @@ const filteredTransactions = computed(() => {
v-model="search"
title="Бонусы"
search-placeholder="Пользователь, причина, заказ или сумма"
>
<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 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>
</UiSectionSearchHero>
<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="space-y-4">
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Заявки на вывод</h2>
@@ -106,16 +58,44 @@ const filteredTransactions = computed(() => {
Активных заявок на вывод сейчас нет.
</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>
<article v-for="withdrawal in withdrawals" :key="withdrawal.id" class="rounded-2xl border border-[#d6ebde] bg-white px-4 py-4">
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div class="space-y-1">
<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>
<NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm border-0">
Проверить вывод
</NuxtLink>
</div>
</div>
<div class="mt-4">
<NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm border-0">
Проверить вывод
</NuxtLink>
</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="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="rounded-2xl border border-[#d6ebde] bg-white px-4 py-4">
<div class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
<div class="space-y-1">
<p class="text-sm font-semibold text-[#123824]">{{ transaction.reason }}</p>
<p class="text-sm text-[#5c7b69]">Пользователь: {{ transaction.userId }}</p>
<p v-if="transaction.orderId" class="text-sm text-[#5c7b69]">Заказ: {{ transaction.orderId }}</p>
<p class="text-xs text-[#5c7b69]">{{ new Date(transaction.createdAt).toLocaleString() }}</p>
</div>
<div class="text-sm font-semibold text-[#123824]">
{{ transaction.amount }}
</div>
</div>
</article>
</div>