Simplify order and client detail layouts

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>

app/pages/client-orders/[id].vue

@@ -231,45 +231,49 @@ 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="mt-4 space-y-4 text-sm text-[#123824]">
-            <div class="manager-mini-card text-sm text-[#123824]">
+            <div class="space-y-1">
-              Адрес: {{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}
+              <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]">
+            <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">
-                <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"
+                    class="input input-bordered manager-field w-full rounded-2xl bg-white"
                     :disabled="!canEditOffer"
                   >
                 </label>
               </div>
-            <div class="manager-mini-card space-y-3 text-sm text-[#123824]">
+              <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">
-                <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"
+                    class="input input-bordered manager-field w-full rounded-2xl bg-white"
                     :disabled="!canEditOffer"
                   >
                 </label>
               </div>
             </div>
+          </div>
 
           <div class="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-[#d6ebde] pt-4">
             <p class="text-sm text-[#5c7b69]">

app/pages/clients/[id].vue

@@ -148,8 +148,18 @@ async function rejectRequest() {
       </div>
 
       <template v-else>
-        <div class="surface-card rounded-[36px] p-6">
+        <div class="manager-hero">
-          <div class="flex flex-col items-center gap-4 text-center">
+          <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">
               <img
                 v-if="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
                 :src="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
@@ -163,13 +173,35 @@ async function rejectRequest() {
                 {{ userInitials(currentUser.fullName) }}
               </div>
 
-            <div class="space-y-2">
+              <div class="w-full space-y-4 text-left">
-              <p class="manager-eyebrow">Пользователь</p>
+                <div class="space-y-1">
-              <h1 class="text-[clamp(1.8rem,3vw,2.8rem)] font-black leading-none tracking-[-0.04em] text-[#123824]">
+                  <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Email</p>
-                {{ currentUser.fullName }}
+                  <p class="text-sm font-semibold text-[#123824]">{{ currentUser.email }}</p>
-              </h1>
+                </div>
-              <p class="text-sm text-[#466653]">{{ currentUser.email }}</p>
+                <div class="space-y-1 border-t border-[#deebe4] pt-4">
-              <p v-if="currentUser.companyName" class="text-sm text-[#466653]">{{ currentUser.companyName }}</p>
+                  <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>

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="mt-4 space-y-4 text-sm text-[#123824]">
-            <div class="manager-mini-card text-sm text-[#123824]">
+            <div class="space-y-1">
-              Адрес: {{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}
+              <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]">
+            <div class="grid gap-4 border-t border-[#deebe4] pt-4 md:grid-cols-2">
-              {{ orderDeliveryStateText(currentOrder.deliveryTerms) }}
+              <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 class="manager-mini-card text-sm text-[#123824]">
-              {{ orderLogisticsStateText(currentOrder.deliveryFee) }}
             </div>
           </div>
         </div>