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

Refine manager client page layout

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 15:21:50 +07:00
parent bb39642b67
commit b58eaf065a
1 changed files with 39 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
app/pages/clients/[id].vue
View File

@@ -158,66 +158,62 @@ async function rejectRequest() {
</div>
<template v-else>
<div class="manager-hero">
<p class="manager-eyebrow">Клиент</p>
<h1 class="manager-title">{{ currentUser.fullName }}</h1>
<p class="manager-copy">
{{ currentUser.email }}
<template v-if="currentUser.companyName"> · {{ currentUser.companyName }}</template>
</p>
</div>
<div class="grid gap-4 lg:grid-cols-[minmax(0,360px)_minmax(0,1fr)]">
<div class="surface-card rounded-[32px] p-6">
<div class="flex flex-col items-center gap-5 text-center">
<div class="rounded-[36px] bg-[#edf3ee] p-6 md:p-8">
<div class="flex flex-col gap-6 md:flex-row md:items-start">
<div class="flex shrink-0 justify-center md:block">
<img
v-if="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
:src="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
:alt="currentUser.fullName"
class="h-28 w-28 rounded-[36px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
class="h-28 w-28 rounded-[36px] object-cover shadow-[0_14px_30px_rgba(18,56,36,0.14)]"
>
<div
v-else
class="flex h-28 w-28 items-center justify-center rounded-[36px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-4xl font-black text-[#123824]"
class="flex h-28 w-28 items-center justify-center rounded-[36px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-4xl font-black text-[#123824] shadow-[0_14px_30px_rgba(18,56,36,0.14)]"
>
{{ userInitials(currentUser.fullName) }}
</div>
<div class="w-full space-y-4 text-left">
<div class="space-y-1">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Email</p>
<p class="text-sm font-semibold text-[#123824]">{{ currentUser.email }}</p>
</div>
<div class="space-y-1 border-t border-[#deebe4] pt-4">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Компания</p>
<p class="text-sm text-[#123824]">{{ currentUser.companyName || 'Не указана' }}</p>
</div>
<div class="space-y-1 border-t border-[#deebe4] pt-4">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">ИНН</p>
<p class="text-sm text-[#123824]">{{ currentUser.inn || 'Не указан' }}</p>
</div>
</div>
</div>
</div>
<div class="surface-card rounded-3xl p-5">
<div class="grid gap-4 md:grid-cols-2">
<div class="rounded-[24px] bg-[#f6fbf8] p-4">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Заказов</p>
<p class="mt-2 text-3xl font-black leading-none text-[#123824]">{{ currentUser.orderCount }}</p>
<div class="min-w-0 flex-1 space-y-5">
<div class="space-y-2">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Клиент</p>
<h1 class="text-3xl font-black tracking-[-0.03em] text-[#123824]">{{ currentUser.fullName }}</h1>
</div>
<div class="rounded-[24px] bg-[#f6fbf8] p-4">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Telegram</p>
<p class="mt-2 text-sm text-[#123824]">
{{ currentUser.telegramConnection?.username ? `@${currentUser.telegramConnection.username}` : 'Не подключен' }}
</p>
<div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
<div class="rounded-[24px] bg-white/70 px-4 py-3">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Email</p>
<p class="mt-1 break-words text-sm font-semibold text-[#123824]">{{ currentUser.email }}</p>
</div>
<div class="rounded-[24px] bg-white/70 px-4 py-3">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Telegram</p>
<p class="mt-1 text-sm font-semibold text-[#123824]">
{{ currentUser.telegramConnection?.username ? `@${currentUser.telegramConnection.username}` : 'Не подключен' }}
</p>
</div>
<div class="rounded-[24px] bg-white/70 px-4 py-3">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Компания</p>
<p class="mt-1 text-sm font-semibold text-[#123824]">{{ currentUser.companyName || 'Не указана' }}</p>
</div>
<div class="rounded-[24px] bg-white/70 px-4 py-3">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">ИНН</p>
<p class="mt-1 text-sm font-semibold text-[#123824]">{{ currentUser.inn || 'Не указан' }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Заказы пользователя</h2>
<div class="space-y-4">
<div class="space-y-1">
<h2 class="text-2xl font-black tracking-[-0.03em] text-[#123824]">Заказы пользователя</h2>
<p class="text-sm text-[#5c7b69]">
Всего заказов: {{ currentUser.orderCount }}
</p>
</div>
<div class="surface-card rounded-3xl p-5">
<div v-if="currentUserOrders.length === 0" class="manager-empty-state mt-4">
У пользователя пока нет заказов.
</div>
@@ -244,6 +240,7 @@ async function rejectRequest() {
</div>
</div>
</div>
</div>
</template>
</template>
</section>