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

Simplify order and client detail layouts

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 10:47:12 +07:00
parent ec9103a80d
commit 453092c289
4 changed files with 104 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -148,28 +148,60 @@ async function rejectRequest() {
</div>
<template v-else>
<div class="surface-card rounded-[36px] p-6">
<div class="flex flex-col items-center gap-4 text-center">
<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)]"
>
<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]"
>
{{ userInitials(currentUser.fullName) }}
</div>
<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="space-y-2">
<p class="manager-eyebrow">Пользователь</p>
<h1 class="text-[clamp(1.8rem,3vw,2.8rem)] font-black leading-none tracking-[-0.04em] text-[#123824]">
{{ currentUser.fullName }}
</h1>
<p class="text-sm text-[#466653]">{{ currentUser.email }}</p>
<p v-if="currentUser.companyName" class="text-sm text-[#466653]">{{ currentUser.companyName }}</p>
<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">
<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)]"
>
<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]"
>
{{ 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>
<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>
</div>
</div>
</div>