From 453092c289550286ab171a89542f7c15b4a6e6db Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Mon, 6 Apr 2026 10:47:12 +0700
Subject: [PATCH] Simplify order and client detail layouts

---
 app/components/orders/OrderItemsTable.vue |  4 +-
 app/pages/client-orders/[id].vue          | 64 +++++++++++---------
 app/pages/clients/[id].vue                | 74 ++++++++++++++++-------
 app/pages/orders/[id].vue                 | 22 ++++---
 4 files changed, 104 insertions(+), 60 deletions(-)

diff --git a/app/components/orders/OrderItemsTable.vue b/app/components/orders/OrderItemsTable.vue
index 13ad39b..8de5382 100644
--- a/app/components/orders/OrderItemsTable.vue
+++ b/app/components/orders/OrderItemsTable.vue
@@ -21,6 +21,7 @@ const props = defineProps<{
   editable?: boolean;
   unitPriceDrafts?: Record<string, string>;
   disabled?: boolean;
+  framed?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -123,6 +124,7 @@ function formatParameterValue(value: unknown) {
 const mode = computed(() => props.mode ?? (props.editable ? 'manager-pricing' : 'readonly'));
 const isPricingMode = computed(() => mode.value === 'manager-pricing');
 const isCartMode = computed(() => mode.value === 'cart');
+const isFramed = computed(() => props.framed ?? true);
 
 function mapParameterEntries(source: Record<string, unknown> | null | undefined): ItemParameter[] {
   if (!source || typeof source !== 'object') {
@@ -165,7 +167,7 @@ function itemParameters(item: OrderItemView) {
 </script>
 
 <template>
-  <div class="surface-card rounded-3xl p-5">
+  <div :class="isFramed ? 'surface-card rounded-3xl p-5' : ''">
     <div class="hidden border-b border-[#deebe4] pb-3 md:grid md:grid-cols-[minmax(0,1.8fr)_140px_160px_140px] md:gap-4">
       <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Позиция</p>
       <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Цена</p>
diff --git a/app/pages/client-orders/[id].vue b/app/pages/client-orders/[id].vue
index 0a49a28..df72ded 100644
--- a/app/pages/client-orders/[id].vue
+++ b/app/pages/client-orders/[id].vue
@@ -231,43 +231,47 @@ watch(
             :editable="true"
             :unit-price-drafts="itemPriceDrafts"
             :disabled="!canEditOffer"
+            :framed="false"
             @update:unit-price="({ itemId, value }) => { itemPriceDrafts[itemId] = value; }"
           />
         </div>
 
         <div class="surface-card rounded-3xl p-5">
           <h2 class="text-xl font-bold text-[#123824]">Доставка</h2>
-          <div class="mt-4 space-y-3">
-            <div class="manager-mini-card text-sm text-[#123824]">
-              Адрес: {{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}
+          <div class="mt-4 space-y-4 text-sm text-[#123824]">
+            <div class="space-y-1">
+              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Адрес</p>
+              <p class="text-base font-semibold">{{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}</p>
             </div>
-            <div class="manager-mini-card space-y-3 text-sm text-[#123824]">
-              <p>{{ orderDeliveryStateText(draftDeliveryTerms) }}</p>
-              <label class="form-control">
-                <span class="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-[#6a8a76]">Комментарий по доставке</span>
-                <input
-                  v-model="deliveryTermsDraft"
-                  type="text"
-                  placeholder="Например, доставка до склада 2-3 дня"
-                  class="input input-bordered w-full rounded-2xl bg-white"
-                  :disabled="!canEditOffer"
-                >
-              </label>
-            </div>
-            <div class="manager-mini-card space-y-3 text-sm text-[#123824]">
-              <p>{{ orderLogisticsStateText(draftDeliveryFee) }}</p>
-              <label class="form-control">
-                <span class="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-[#6a8a76]">Стоимость логистики</span>
-                <input
-                  v-model="deliveryFeeDraft"
-                  type="number"
-                  min="0"
-                  step="0.01"
-                  placeholder="Например, 3000"
-                  class="input input-bordered w-full rounded-2xl bg-white"
-                  :disabled="!canEditOffer"
-                >
-              </label>
+            <div class="grid gap-4 border-t border-[#deebe4] pt-4 md:grid-cols-2">
+              <div class="space-y-3">
+                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Комментарий по доставке</p>
+                <p>{{ orderDeliveryStateText(draftDeliveryTerms) }}</p>
+                <label class="form-control">
+                  <input
+                    v-model="deliveryTermsDraft"
+                    type="text"
+                    placeholder="Например, доставка до склада 2-3 дня"
+                    class="input input-bordered manager-field w-full rounded-2xl bg-white"
+                    :disabled="!canEditOffer"
+                  >
+                </label>
+              </div>
+              <div class="space-y-3">
+                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Стоимость логистики</p>
+                <p>{{ orderLogisticsStateText(draftDeliveryFee) }}</p>
+                <label class="form-control">
+                  <input
+                    v-model="deliveryFeeDraft"
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    placeholder="Например, 3000"
+                    class="input input-bordered manager-field w-full rounded-2xl bg-white"
+                    :disabled="!canEditOffer"
+                  >
+                </label>
+              </div>
             </div>
           </div>
 
diff --git a/app/pages/clients/[id].vue b/app/pages/clients/[id].vue
index 0a09621..83687d3 100644
--- a/app/pages/clients/[id].vue
+++ b/app/pages/clients/[id].vue
@@ -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>
diff --git a/app/pages/orders/[id].vue b/app/pages/orders/[id].vue
index 2cc7caf..d2959a3 100644
--- a/app/pages/orders/[id].vue
+++ b/app/pages/orders/[id].vue
@@ -56,20 +56,26 @@ const currentOrderCode = computed(() => formatOrderCode(currentOrder.value?.code
             class="mt-4"
             :items="currentOrder.items"
             :calculation-payload="currentOrder.calculationPayload"
+            :framed="false"
           />
         </div>
 
         <div class="surface-card rounded-3xl p-5">
           <h2 class="text-xl font-bold text-[#123824]">Доставка</h2>
-          <div class="mt-4 space-y-3">
-            <div class="manager-mini-card text-sm text-[#123824]">
-              Адрес: {{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}
+          <div class="mt-4 space-y-4 text-sm text-[#123824]">
+            <div class="space-y-1">
+              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Адрес</p>
+              <p class="text-base font-semibold">{{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}</p>
             </div>
-            <div class="manager-mini-card text-sm text-[#123824]">
-              {{ orderDeliveryStateText(currentOrder.deliveryTerms) }}
-            </div>
-            <div class="manager-mini-card text-sm text-[#123824]">
-              {{ orderLogisticsStateText(currentOrder.deliveryFee) }}
+            <div class="grid gap-4 border-t border-[#deebe4] pt-4 md:grid-cols-2">
+              <div class="space-y-1">
+                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Комментарий по доставке</p>
+                <p>{{ orderDeliveryStateText(currentOrder.deliveryTerms) }}</p>
+              </div>
+              <div class="space-y-1">
+                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Логистика</p>
+                <p>{{ orderLogisticsStateText(currentOrder.deliveryFee) }}</p>
+              </div>
             </div>
           </div>
         </div>