Refine order detail layout

app/components/orders/OrderDeliveryLine.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import OrderDeliveryLine from './OrderDeliveryLine.vue';
+
+const meta: Meta<typeof OrderDeliveryLine> = {
+  title: 'Orders/OrderDeliveryLine',
+  component: OrderDeliveryLine,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OrderDeliveryLine>;
+
+export const Readonly: Story = {
+  args: {
+    deliveryAddress: 'г. Казань, ул. Магистральная, 14',
+    deliveryTerms: 'Доставка до склада за 2-3 рабочих дня',
+    deliveryFee: 3200,
+  },
+};
+
+export const ManagerEditing: Story = {
+  args: {
+    mode: 'manager',
+    canEdit: true,
+    editingDeliveryTerms: true,
+    editingDeliveryFee: true,
+    deliveryAddress: 'г. Казань, ул. Магистральная, 14',
+    deliveryTermsDraft: 'Доставка до склада за 2-3 рабочих дня',
+    deliveryFeeDraft: '3200',
+  },
+};

app/components/orders/OrderDeliveryLine.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import {
+  orderDeliveryStateText,
+  orderLogisticsStateText,
+} from '~/composables/useOrderDetailPresentation';
+
+const props = defineProps<{
+  deliveryAddress?: string | null;
+  deliveryTerms?: string | null;
+  deliveryFee?: number | null;
+  mode?: 'readonly' | 'manager';
+  canEdit?: boolean;
+  editingDeliveryTerms?: boolean;
+  editingDeliveryFee?: boolean;
+  deliveryTermsDraft?: string;
+  deliveryFeeDraft?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:delivery-terms': [value: string];
+  'update:delivery-fee': [value: string];
+  'activate:delivery-terms': [];
+  'finish:delivery-terms': [];
+  'activate:delivery-fee': [];
+  'finish:delivery-fee': [];
+}>();
+
+const isManagerMode = computed(() => props.mode === 'manager');
+const isEditable = computed(() => isManagerMode.value && Boolean(props.canEdit));
+const addressLabel = computed(() => props.deliveryAddress?.trim() || 'Адрес пока не указан');
+const deliveryTermsLabel = computed(() => orderDeliveryStateText(props.deliveryTerms));
+const deliveryFeeLabel = computed(() => orderLogisticsStateText(props.deliveryFee));
+
+function updateDeliveryTerms(event: Event) {
+  emit('update:delivery-terms', (event.target as HTMLInputElement).value);
+}
+
+function updateDeliveryFee(event: Event) {
+  emit('update:delivery-fee', (event.target as HTMLInputElement).value);
+}
+
+function activateDeliveryTerms() {
+  if (!isEditable.value) {
+    return;
+  }
+
+  emit('activate:delivery-terms');
+}
+
+function finishDeliveryTerms() {
+  emit('finish:delivery-terms');
+}
+
+function activateDeliveryFee() {
+  if (!isEditable.value) {
+    return;
+  }
+
+  emit('activate:delivery-fee');
+}
+
+function finishDeliveryFee() {
+  emit('finish:delivery-fee');
+}
+</script>
+
+<template>
+  <article class="surface-card rounded-[28px] p-4 md:grid md:grid-cols-[minmax(0,1.8fr)_minmax(0,1fr)_160px] md:gap-4 md:p-5">
+    <div class="flex min-w-0 gap-4">
+      <div class="flex h-20 w-20 shrink-0 items-center justify-center rounded-[24px] bg-[#edf3ef] text-[#123824]">
+        <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <path d="M3 7.5H14V14.5H3V7.5Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
+          <path d="M14 10H18.5L21 12.5V14.5H14V10Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
+          <path d="M7 17.5C7.82843 17.5 8.5 16.8284 8.5 16C8.5 15.1716 7.82843 14.5 7 14.5C6.17157 14.5 5.5 15.1716 5.5 16C5.5 16.8284 6.17157 17.5 7 17.5Z" stroke="currentColor" stroke-width="1.8" />
+          <path d="M17 17.5C17.8284 17.5 18.5 16.8284 18.5 16C18.5 15.1716 17.8284 14.5 17 14.5C16.1716 14.5 15.5 15.1716 15.5 16C15.5 16.8284 16.1716 17.5 17 17.5Z" stroke="currentColor" stroke-width="1.8" />
+          <path d="M3 14.5H5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+          <path d="M8.5 16H15.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+        </svg>
+      </div>
+
+      <div class="min-w-0 space-y-2">
+        <p class="text-base font-bold text-[#123824]">Доставка</p>
+        <p class="text-xs font-semibold uppercase tracking-[0.14em] text-[#6a8a76]">
+          Адрес доставки
+        </p>
+        <p class="text-sm leading-6 text-[#123824]">
+          {{ addressLabel }}
+        </p>
+      </div>
+    </div>
+
+    <div class="mt-4 md:mt-0">
+      <p class="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">
+        Условия
+      </p>
+
+      <label v-if="isManagerMode && editingDeliveryTerms" class="form-control">
+        <input
+          :value="deliveryTermsDraft ?? ''"
+          data-delivery-terms-input
+          type="text"
+          placeholder="Например, доставка до склада 2-3 дня"
+          class="input input-bordered manager-field w-full rounded-2xl bg-white"
+          :disabled="!canEdit"
+          @input="updateDeliveryTerms"
+          @blur="finishDeliveryTerms"
+          @keydown.enter="finishDeliveryTerms"
+        >
+      </label>
+
+      <button
+        v-else-if="isManagerMode"
+        type="button"
+        class="w-full rounded-2xl px-0 py-0 text-left text-sm leading-6 text-[#123824]"
+        :class="isEditable ? 'cursor-pointer transition hover:text-[#0d854a]' : 'cursor-default'"
+        @dblclick="activateDeliveryTerms"
+      >
+        {{ deliveryTermsLabel }}
+      </button>
+
+      <p v-else class="text-sm leading-6 text-[#123824]">
+        {{ deliveryTermsLabel }}
+      </p>
+    </div>
+
+    <div class="mt-4 md:mt-0">
+      <p class="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">
+        Стоимость
+      </p>
+
+      <label v-if="isManagerMode && editingDeliveryFee" class="form-control">
+        <input
+          :value="deliveryFeeDraft ?? ''"
+          data-delivery-fee-input
+          type="number"
+          min="0"
+          step="0.01"
+          placeholder="Например, 3000"
+          class="input input-bordered manager-field w-full rounded-2xl bg-white"
+          :disabled="!canEdit"
+          @input="updateDeliveryFee"
+          @blur="finishDeliveryFee"
+          @keydown.enter="finishDeliveryFee"
+        >
+      </label>
+
+      <button
+        v-else-if="isManagerMode"
+        type="button"
+        class="w-full rounded-2xl px-0 py-0 text-left text-sm font-semibold text-[#123824]"
+        :class="isEditable ? 'cursor-pointer transition hover:text-[#0d854a]' : 'cursor-default'"
+        @dblclick="activateDeliveryFee"
+      >
+        {{ deliveryFeeLabel }}
+      </button>
+
+      <p v-else class="text-sm font-semibold text-[#123824]">
+        {{ deliveryFeeLabel }}
+      </p>
+    </div>
+  </article>
+</template>

app/components/orders/OrderStatusTimelineCard.vue

@@ -12,16 +12,6 @@ const isExpanded = ref(false);
 
 const presentation = computed(() => getOrderStatusPresentation(props.status, props.createdAt, props.audience ?? 'client'));
 
-function itemClass(state: 'done' | 'current' | 'upcoming') {
-  if (state === 'current') {
-    return 'bg-white shadow-[0_14px_28px_rgba(19,153,87,0.08)]';
-  }
-  if (state === 'done') {
-    return 'bg-white';
-  }
-  return 'bg-white';
-}
-
 function markerClass(state: 'done' | 'current' | 'upcoming') {
   if (state === 'current') {
     return 'bg-[#139957] ring-4 ring-[#dff4e8]';
@@ -31,6 +21,36 @@ function markerClass(state: 'done' | 'current' | 'upcoming') {
   }
   return 'bg-[#d8e4dd]';
 }
+
+function connectorClass(state: 'done' | 'current' | 'upcoming') {
+  if (state === 'done' || state === 'current') {
+    return 'bg-[#cfe5d7]';
+  }
+
+  return 'bg-[#e4ece7]';
+}
+
+function titleClass(state: 'done' | 'current' | 'upcoming') {
+  if (state === 'current') {
+    return 'text-[#123824]';
+  }
+  if (state === 'done') {
+    return 'text-[#355947]';
+  }
+
+  return 'text-[#6a8a76]';
+}
+
+function noteClass(state: 'done' | 'current' | 'upcoming') {
+  if (state === 'current') {
+    return 'text-[#355947]';
+  }
+  if (state === 'done') {
+    return 'text-[#557562]';
+  }
+
+  return 'text-[#7d9688]';
+}
 </script>
 
 <template>
@@ -62,22 +82,37 @@ function markerClass(state: 'done' | 'current' | 'upcoming') {
       </div>
     </button>
 
-    <div v-if="isExpanded" class="mt-5 space-y-3 pt-1">
+    <div v-if="isExpanded" class="mt-5 pt-1">
       <div
-        v-for="stage in presentation.stages"
+        v-for="(stage, index) in presentation.stages"
         :key="stage.code"
-        class="rounded-3xl p-4"
-        :class="itemClass(stage.state)"
+        class="flex gap-4"
       >
-        <div class="flex items-start gap-3">
-          <span class="mt-1 h-3 w-3 shrink-0 rounded-full" :class="markerClass(stage.state)" />
-          <div class="min-w-0 flex-1 space-y-1">
-            <div class="flex flex-wrap items-center justify-between gap-2">
-              <p class="text-sm font-semibold text-[#123824]">{{ stage.label }}</p>
-              <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#5c7b69]">{{ stage.dateLabel }}</p>
-            </div>
-            <p class="text-sm leading-6 text-[#355947]">{{ stage.note }}</p>
+        <div class="flex w-4 shrink-0 flex-col items-center">
+          <span class="mt-1 h-3 w-3 rounded-full" :class="markerClass(stage.state)" />
+          <span
+            v-if="index < presentation.stages.length - 1"
+            class="mt-2 w-px flex-1"
+            :class="connectorClass(stage.state)"
+          />
+        </div>
+
+        <div
+          class="min-w-0 flex-1 pb-5"
+          :class="index < presentation.stages.length - 1 ? 'border-b border-[#e1ebe4]' : ''"
+        >
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <p class="text-sm font-semibold" :class="titleClass(stage.state)">
+              {{ stage.label }}
+            </p>
+            <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#5c7b69]">
+              {{ stage.dateLabel }}
+            </p>
           </div>
+
+          <p class="mt-2 text-sm leading-6" :class="noteClass(stage.state)">
+            {{ stage.note }}
+          </p>
         </div>
       </div>
     </div>

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

@@ -9,8 +9,6 @@ import {
 } from '~/composables/graphql/generated';
 import {
   formatPrice,
-  orderLogisticsStateText,
-  orderDeliveryStateText,
 } from '~/composables/useOrderDetailPresentation';
 import { formatOrderCode } from '~/composables/useOrderCodePresentation';
 
@@ -62,7 +60,7 @@ watch(
     statusDraft.value = '';
 
     for (const key of Object.keys(itemPriceDrafts)) {
-      delete itemPriceDrafts[key];
+      itemPriceDrafts[key] = '';
     }
 
     if (!order) {
@@ -307,8 +305,6 @@ watch(
 
 <template>
   <section class="space-y-6">
-    <NuxtLink to="/client-orders" class="text-sm font-semibold text-[#0d854a]">← Назад к заказам клиентов</NuxtLink>
-
     <div v-if="orderQuery.loading.value" class="manager-empty-state">
       Загружаем заказ...
     </div>
@@ -318,9 +314,19 @@ watch(
     </div>
 
     <template v-else>
-      <div class="manager-hero">
-        <p class="manager-eyebrow">Заказ</p>
-        <h1 class="manager-title">{{ currentOrderCode }}</h1>
+      <div class="surface-card rounded-3xl px-5 py-4">
+        <div class="flex flex-wrap items-center gap-3">
+          <NuxtLink to="/client-orders" class="text-sm font-semibold text-[#0d854a]">
+            ← Назад к заказам клиентов
+          </NuxtLink>
+          <span class="hidden h-4 w-px bg-[#d8e4dd] md:block" />
+          <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">
+            Заказ
+          </span>
+          <span class="text-lg font-black tracking-[-0.03em] text-[#123824]">
+            {{ currentOrderCode }}
+          </span>
+        </div>
       </div>
 
       <div class="space-y-4">
@@ -372,68 +378,24 @@ watch(
             @activate:unit-price="void openPriceEditor($event)"
             @finish:unit-price="closePriceEditor($event)"
           />
-        </div>
-
-        <div class="surface-card rounded-3xl p-5">
-          <h2 class="text-xl font-bold text-[#123824]">Доставка</h2>
-          <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="grid gap-4 md:grid-cols-2">
-              <div class="space-y-3">
-                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Комментарий по доставке</p>
-                <label v-if="editingDeliveryTerms" class="form-control">
-                  <input
-                    v-model="deliveryTermsDraft"
-                    data-delivery-terms-input
-                    type="text"
-                    placeholder="Например, доставка до склада 2-3 дня"
-                    class="input input-bordered manager-field w-full rounded-2xl bg-white"
-                    :disabled="!canEditOffer"
-                    @blur="closeDeliveryTermsEditor"
-                    @keydown.enter="closeDeliveryTermsEditor"
-                  >
-                </label>
-                <button
-                  v-else
-                  type="button"
-                  class="w-full rounded-2xl px-0 py-0 text-left text-sm text-[#123824]"
-                  :class="canEditOffer ? 'cursor-pointer transition hover:text-[#0d854a]' : 'cursor-default'"
-                  @dblclick="void openDeliveryTermsEditor()"
-                >
-                  {{ orderDeliveryStateText(draftDeliveryTerms) }}
-                </button>
-              </div>
-              <div class="space-y-3">
-                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Стоимость логистики</p>
-                <label v-if="editingDeliveryFee" class="form-control">
-                  <input
-                    v-model="deliveryFeeDraft"
-                    data-delivery-fee-input
-                    type="number"
-                    min="0"
-                    step="0.01"
-                    placeholder="Например, 3000"
-                    class="input input-bordered manager-field w-full rounded-2xl bg-white"
-                    :disabled="!canEditOffer"
-                    @blur="closeDeliveryFeeEditor"
-                    @keydown.enter="closeDeliveryFeeEditor"
-                  >
-                </label>
-                <button
-                  v-else
-                  type="button"
-                  class="w-full rounded-2xl px-0 py-0 text-left text-sm text-[#123824]"
-                  :class="canEditOffer ? 'cursor-pointer transition hover:text-[#0d854a]' : 'cursor-default'"
-                  @dblclick="void openDeliveryFeeEditor()"
-                >
-                  {{ orderLogisticsStateText(draftDeliveryFee) }}
-                </button>
-              </div>
-            </div>
-          </div>
+          <OrdersOrderDeliveryLine
+            class="mt-3"
+            mode="manager"
+            :can-edit="canEditOffer"
+            :delivery-address="currentOrder.deliveryAddress"
+            :delivery-terms="draftDeliveryTerms"
+            :delivery-fee="draftDeliveryFee"
+            :editing-delivery-terms="editingDeliveryTerms"
+            :editing-delivery-fee="editingDeliveryFee"
+            :delivery-terms-draft="deliveryTermsDraft"
+            :delivery-fee-draft="deliveryFeeDraft"
+            @update:delivery-terms="deliveryTermsDraft = $event"
+            @update:delivery-fee="deliveryFeeDraft = $event"
+            @activate:delivery-terms="void openDeliveryTermsEditor()"
+            @finish:delivery-terms="closeDeliveryTermsEditor()"
+            @activate:delivery-fee="void openDeliveryFeeEditor()"
+            @finish:delivery-fee="closeDeliveryFeeEditor()"
+          />
 
           <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
             <p class="text-sm text-[#5c7b69]">

app/pages/orders/[id].vue

@@ -5,10 +5,6 @@ import {
   type OrderDetailQuery,
 } from '~/composables/graphql/generated';
 import { formatOrderCode } from '~/composables/useOrderCodePresentation';
-import {
-  orderDeliveryStateText,
-  orderLogisticsStateText,
-} from '~/composables/useOrderDetailPresentation';
 
 type OrderItem = NonNullable<OrderDetailQuery['order']>;
 
@@ -27,8 +23,6 @@ const currentOrderCode = computed(() => formatOrderCode(currentOrder.value?.code
 
 <template>
   <section class="space-y-6">
-    <NuxtLink to="/orders" class="text-sm font-semibold text-[#0d854a]">← Назад к моим заказам</NuxtLink>
-
     <div v-if="orderQuery.loading.value" class="manager-empty-state">
       Загружаем заказ...
     </div>
@@ -38,9 +32,19 @@ const currentOrderCode = computed(() => formatOrderCode(currentOrder.value?.code
     </div>
 
     <template v-else>
-      <div class="manager-hero">
-        <p class="manager-eyebrow">Заказ</p>
-        <h1 class="manager-title">{{ currentOrderCode }}</h1>
+      <div class="surface-card rounded-3xl px-5 py-4">
+        <div class="flex flex-wrap items-center gap-3">
+          <NuxtLink to="/orders" class="text-sm font-semibold text-[#0d854a]">
+            ← Назад к моим заказам
+          </NuxtLink>
+          <span class="hidden h-4 w-px bg-[#d8e4dd] md:block" />
+          <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">
+            Заказ
+          </span>
+          <span class="text-lg font-black tracking-[-0.03em] text-[#123824]">
+            {{ currentOrderCode }}
+          </span>
+        </div>
       </div>
 
       <div class="space-y-4">
@@ -58,26 +62,12 @@ const currentOrderCode = computed(() => formatOrderCode(currentOrder.value?.code
             :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-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="grid gap-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>
+          <OrdersOrderDeliveryLine
+            class="mt-3"
+            :delivery-address="currentOrder.deliveryAddress"
+            :delivery-terms="currentOrder.deliveryTerms"
+            :delivery-fee="currentOrder.deliveryFee"
+          />
         </div>
       </div>
     </template>