Simplify bonus manager cards
This commit is contained in:
Ruslan Bakiev
@@ -61,15 +61,7 @@ function formatDateTime(value: string) {
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="manager-hero">
|
||||
<p class="manager-eyebrow">Бонусы</p>
|
||||
<h1 class="manager-title">{{ bonusAccount.fullName }}</h1>
|
||||
<p class="manager-copy">
|
||||
История начислений, активные связки и заявки на вывод по бонусной программе клиента.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 xl:grid-cols-[minmax(0,420px)_minmax(0,1fr)]">
|
||||
<div class="space-y-4">
|
||||
<BonusAccountCard
|
||||
:full-name="bonusAccount.fullName"
|
||||
:email="bonusAccount.email"
|
||||
@@ -79,70 +71,62 @@ function formatDateTime(value: string) {
|
||||
:source-links="bonusAccount.referralLinks"
|
||||
/>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="surface-card rounded-3xl p-5">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h2 class="text-xl font-bold text-[#123824]">Заявки на вывод</h2>
|
||||
<span class="text-sm text-[#5c7b69]">{{ pendingWithdrawals.length }}</span>
|
||||
</div>
|
||||
<div class="surface-card rounded-[32px] p-6">
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Начисления</p>
|
||||
|
||||
<div v-if="pendingWithdrawals.length === 0" class="manager-empty-state mt-4">
|
||||
Активных заявок на вывод нет.
|
||||
</div>
|
||||
|
||||
<div v-else class="mt-4 space-y-3">
|
||||
<article
|
||||
v-for="withdrawal in pendingWithdrawals"
|
||||
:key="withdrawal.id"
|
||||
class="rounded-3xl border border-[#deebe4] bg-[#f8fbf9] px-4 py-4"
|
||||
>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-semibold text-[#123824]">{{ formatAmount(withdrawal.amount) }}</p>
|
||||
<p class="text-sm text-[#355947]">Создано {{ formatDateTime(withdrawal.createdAt) }}</p>
|
||||
<p v-if="withdrawal.reviewComment" class="text-sm text-[#355947]">{{ withdrawal.reviewComment }}</p>
|
||||
</div>
|
||||
<NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm w-fit border-0">
|
||||
Проверить выплату
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-if="transactions.length === 0" class="manager-empty-state mt-4">
|
||||
Начислений пока нет.
|
||||
</div>
|
||||
|
||||
<div class="surface-card rounded-3xl p-5">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h2 class="text-xl font-bold text-[#123824]">Транзакции</h2>
|
||||
<span class="text-sm text-[#5c7b69]">{{ transactions.length }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="transactions.length === 0" class="manager-empty-state mt-4">
|
||||
Начислений по этой бонусной программе пока нет.
|
||||
</div>
|
||||
|
||||
<div v-else class="mt-4 space-y-3">
|
||||
<article
|
||||
v-for="transaction in transactions"
|
||||
:key="transaction.id"
|
||||
class="rounded-3xl border border-[#deebe4] bg-[#f8fbf9] px-4 py-4"
|
||||
>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div class="space-y-1">
|
||||
<p class="text-base font-semibold text-[#123824]">+{{ formatAmount(transaction.amount) }}</p>
|
||||
<p class="text-sm text-[#355947]">{{ transaction.reason }}</p>
|
||||
<p class="text-xs text-[#5c7b69]">{{ formatDateTime(transaction.createdAt) }}</p>
|
||||
</div>
|
||||
|
||||
<NuxtLink
|
||||
v-if="transaction.orderId"
|
||||
:to="`/client-orders/${transaction.orderId}`"
|
||||
class="btn btn-ghost btn-sm w-fit text-[#0d854a]"
|
||||
>
|
||||
Открыть заказ
|
||||
</NuxtLink>
|
||||
<div v-else class="mt-4 space-y-3">
|
||||
<article
|
||||
v-for="transaction in transactions"
|
||||
:key="transaction.id"
|
||||
class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
|
||||
>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div class="space-y-1">
|
||||
<p class="text-base font-semibold text-[#123824]">+{{ formatAmount(transaction.amount) }}</p>
|
||||
<p class="text-sm text-[#355947]">{{ transaction.reason }}</p>
|
||||
<p class="text-xs text-[#5c7b69]">{{ formatDateTime(transaction.createdAt) }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<NuxtLink
|
||||
v-if="transaction.orderId"
|
||||
:to="`/client-orders/${transaction.orderId}`"
|
||||
class="text-sm font-semibold text-[#0d854a]"
|
||||
>
|
||||
Открыть заказ
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="pendingWithdrawals.length" class="surface-card rounded-[32px] p-6">
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Заявки на вывод</p>
|
||||
|
||||
<div class="mt-4 space-y-3">
|
||||
<article
|
||||
v-for="withdrawal in pendingWithdrawals"
|
||||
:key="withdrawal.id"
|
||||
class="rounded-[24px] bg-[#f6fbf8] px-4 py-4"
|
||||
>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-semibold text-[#123824]">{{ formatAmount(withdrawal.amount) }}</p>
|
||||
<p class="text-sm text-[#355947]">Создано {{ formatDateTime(withdrawal.createdAt) }}</p>
|
||||
<p v-if="withdrawal.reviewComment" class="text-sm text-[#355947]">{{ withdrawal.reviewComment }}</p>
|
||||
</div>
|
||||
|
||||
<NuxtLink
|
||||
:to="`/bonus-system/withdrawals/${withdrawal.id}`"
|
||||
class="text-sm font-semibold text-[#0d854a]"
|
||||
>
|
||||
Проверить выплату
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user