From b58eaf065ac2abd8a8ec845ded426756324ddcb6 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 6 Apr 2026 15:21:50 +0700
Subject: [PATCH] Refine manager client page layout

---
 app/pages/clients/[id].vue | 81 ++++++++++++++++++--------------------
 1 file changed, 39 insertions(+), 42 deletions(-)

diff --git a/app/pages/clients/[id].vue b/app/pages/clients/[id].vue
index d010997..82d317e 100644
--- a/app/pages/clients/[id].vue
+++ b/app/pages/clients/[id].vue
@@ -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>