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

Move manager tabs above content canvas

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 11:27:51 +07:00
parent 821fc5d019
commit d7dad079db
5 changed files with 171 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,6 @@ type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
type WithdrawalItem = ManagerWithdrawalRequestsQuery['managerWithdrawalRequests'][number];
const route = useRoute();
const router = useRouter();
const search = ref('');
const balancesQuery = useQuery(ManagerBonusBalancesDocument);
const referralLinksQuery = useQuery(ManagerReferralLinksDocument);
@@ -35,15 +34,6 @@ const activeTab = computed<'balances' | 'withdrawals'>(() => (
route.query.tab === 'withdrawals' ? 'withdrawals' : 'balances'
));
function setTab(tab: 'balances' | 'withdrawals') {
void router.replace({
query: {
...route.query,
tab,
},
});
}
const balances = computed<BalanceItem[]>(() => balancesQuery.result.value?.managerBonusBalances ?? []);
const referralLinks = computed<ReferralLinkItem[]>(() => referralLinksQuery.result.value?.managerReferralLinks ?? []);
const users = computed<ManagerUserItem[]>(() => usersQuery.result.value?.managerUsers ?? []);
@@ -130,29 +120,17 @@ function userInitials(fullName: string) {
return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
}
function formatAmount(value: number) {
return new Intl.NumberFormat('ru-RU', {
minimumFractionDigits: 0,
maximumFractionDigits: 2,
}).format(value);
}
</script>
<template>
<section class="space-y-6">
<div class="manager-page-tabs">
<button
type="button"
class="manager-page-tab"
:class="{ 'manager-page-tab--active': activeTab === 'balances' }"
@click="setTab('balances')"
>
Балансы
</button>
<button
type="button"
class="manager-page-tab"
:class="{ 'manager-page-tab--active': activeTab === 'withdrawals' }"
@click="setTab('withdrawals')"
>
Заявки на выплату
</button>
</div>
<UiSectionSearchHero
v-model="search"
title="Бонусы"
@@ -173,20 +151,16 @@ function userInitials(fullName: string) {
Бонусных связок пока нет.
</div>
<div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
<NuxtLink
<UsersGridCard
v-for="item in filteredBalances"
:key="item.userId"
:to="`/bonus-system/${item.userId}`"
class="block surface-card-interactive"
>
<BonusAccountCard
:full-name="item.fullName"
:balance="item.balance"
:avatar-src="messengerConnectionAvatarSrc(usersById.get(item.userId)?.telegramConnection)"
:initials="userInitials(item.fullName)"
compact
/>
</NuxtLink>
:full-name="item.fullName"
:avatar-src="messengerConnectionAvatarSrc(usersById.get(item.userId)?.telegramConnection)"
:initials="userInitials(item.fullName)"
meta-label="Доступный бонус"
:meta-value="formatAmount(item.balance)"
/>
</div>
</template>

60
app/pages/clients/index.vue
View File

@@ -3,7 +3,6 @@ import { useQuery } from '@vue/apollo-composable';
import {
ManagerUsersDocument,
RegistrationRequestsDocument,
type ManagerUsersQuery,
type RegistrationRequestsQuery,
} from '~/composables/graphql/generated';
import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
@@ -12,11 +11,9 @@ definePageMeta({
middleware: ['manager-only'],
});
type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
type RequestItem = RegistrationRequestsQuery['registrationRequests'][number];
const route = useRoute();
const router = useRouter();
const search = ref('');
const usersQuery = useQuery(ManagerUsersDocument);
@@ -28,15 +25,6 @@ const activeTab = computed<'users' | 'requests'>(() => (
route.query.tab === 'requests' ? 'requests' : 'users'
));
function setTab(tab: 'users' | 'requests') {
void router.replace({
query: {
...route.query,
tab,
},
});
}
const filteredUsers = computed(() => {
const items = usersQuery.result.value?.managerUsers ?? [];
const query = search.value.trim().toLowerCase();
@@ -108,25 +96,6 @@ function userInitials(fullName: string) {
<template>
<section class="space-y-6">
<div class="manager-page-tabs">
<button
type="button"
class="manager-page-tab"
:class="{ 'manager-page-tab--active': activeTab === 'users' }"
@click="setTab('users')"
>
Пользователи
</button>
<button
type="button"
class="manager-page-tab"
:class="{ 'manager-page-tab--active': activeTab === 'requests' }"
@click="setTab('requests')"
>
Заявки
</button>
</div>
<UiSectionSearchHero
v-model="search"
title="Пользователи"
@@ -147,33 +116,14 @@ function userInitials(fullName: string) {
Пользователи по текущему запросу не найдены.
</div>
<div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
<NuxtLink
<UsersGridCard
v-for="user in filteredUsers"
:key="user.id"
:to="`/clients/${user.id}`"
class="surface-card surface-card-interactive flex min-h-[280px] flex-col rounded-[32px] p-6"
>
<div class="flex justify-center">
<img
v-if="messengerConnectionAvatarSrc(user.telegramConnection)"
:src="messengerConnectionAvatarSrc(user.telegramConnection)"
:alt="user.fullName"
class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
>
<div
v-else
class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
>
{{ userInitials(user.fullName) }}
</div>
</div>
<div class="flex-1" />
<div class="pt-8 text-center">
<h2 class="text-lg font-bold leading-tight text-[#123824]">{{ user.fullName }}</h2>
</div>
</NuxtLink>
:full-name="user.fullName"
:avatar-src="messengerConnectionAvatarSrc(user.telegramConnection)"
:initials="userInitials(user.fullName)"
/>
</div>
</template>