From a820d1f7eece0dfa84e3ec5029ffac00da1f3993 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 6 Apr 2026 21:44:24 +0700
Subject: [PATCH] Unify inner page back headers

---
 app/components/ui/BackHeader.vue            | 38 ++++++++++++++++++++
 app/pages/bonus-system/[userId].vue         | 27 +++++++-------
 app/pages/bonus-system/referrals/new.vue    | 15 ++++----
 app/pages/bonus-system/transactions/new.vue | 11 +++---
 app/pages/bonus-system/withdrawals/[id].vue | 15 ++++----
 app/pages/client-orders/[id].vue            | 19 +++-------
 app/pages/clients/[id].vue                  | 39 +++++++++++----------
 app/pages/clients/invite.vue                | 13 ++++---
 app/pages/orders/[id].vue                   | 19 +++-------
 app/pages/profile/addresses.vue             | 32 ++++++++---------
 app/pages/profile/addresses/new.vue         | 14 ++++----
 app/pages/profile/counterparty.vue          | 20 +++++------
 app/pages/profile/notifications.vue         | 14 ++++----
 13 files changed, 140 insertions(+), 136 deletions(-)
 create mode 100644 app/components/ui/BackHeader.vue

diff --git a/app/components/ui/BackHeader.vue b/app/components/ui/BackHeader.vue
new file mode 100644
index 0000000..2c2e73b
--- /dev/null
+++ b/app/components/ui/BackHeader.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+  to: string;
+  backLabel: string;
+  title: string;
+  subtitle?: string;
+}>();
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+    <div class="min-w-0 space-y-3">
+      <div class="flex flex-wrap items-center gap-3 px-1">
+        <NuxtLink
+          :to="to"
+          :aria-label="backLabel"
+          class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-white/70 text-[#0d854a] transition hover:bg-white"
+        >
+          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none">
+            <path d="M11.5 4.5L6 10L11.5 15.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </NuxtLink>
+
+        <h1 class="min-w-0 text-2xl font-black tracking-[-0.03em] text-[#123824] md:text-3xl">
+          {{ title }}
+        </h1>
+      </div>
+
+      <p v-if="subtitle" class="max-w-3xl pl-[3.5rem] text-sm leading-6 text-[#466653]">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <div v-if="$slots.actions" class="flex shrink-0 flex-wrap gap-2 md:justify-end">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/bonus-system/[userId].vue b/app/pages/bonus-system/[userId].vue
index 4ccc53f..1852330 100644
--- a/app/pages/bonus-system/[userId].vue
+++ b/app/pages/bonus-system/[userId].vue
@@ -39,8 +39,6 @@ function formatDateTime(value: string) {
 
 <template>
   <section class="space-y-6">
-    <NuxtLink to="/admin/bonuses/balances" class="text-sm font-semibold text-[#0d854a]">← Назад к бонусам</NuxtLink>
-
     <div v-if="bonusAccountQuery.loading.value" class="manager-empty-state">
       Загружаем бонусный счёт...
     </div>
@@ -51,18 +49,19 @@ function formatDateTime(value: string) {
 
     <template v-else>
       <div class="space-y-4">
-        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div class="space-y-1">
-            <h1 class="text-3xl font-extrabold text-[#123824]">{{ bonusAccount.fullName }}</h1>
-            <p v-if="bonusAccount.companyName || bonusAccount.email" class="text-sm text-[#5c7b69]">
-              {{ bonusAccount.companyName || bonusAccount.email }}
-            </p>
-          </div>
-          <div class="text-left sm:text-right">
-            <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]">{{ formatAmount(bonusAccount.balance) }}</p>
-          </div>
-        </div>
+        <UiBackHeader
+          to="/admin/bonuses/balances"
+          back-label="Назад к бонусам"
+          :title="`Бонусный счёт ${bonusAccount.fullName}`"
+          :subtitle="bonusAccount.companyName || bonusAccount.email || undefined"
+        >
+          <template #actions>
+            <div class="text-left md:text-right">
+              <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]">{{ formatAmount(bonusAccount.balance) }}</p>
+            </div>
+          </template>
+        </UiBackHeader>
 
         <div v-if="pendingWithdrawals.length" class="surface-card rounded-[32px] p-6">
           <p class="text-lg font-bold text-[#123824]">Выводы</p>
diff --git a/app/pages/bonus-system/referrals/new.vue b/app/pages/bonus-system/referrals/new.vue
index bb23238..75f45b3 100644
--- a/app/pages/bonus-system/referrals/new.vue
+++ b/app/pages/bonus-system/referrals/new.vue
@@ -103,15 +103,12 @@ async function createReferral() {
 
 <template>
   <section class="space-y-6 max-w-3xl">
-    <NuxtLink to="/admin/bonuses/balances" class="text-sm font-semibold text-[#0d854a]">← Назад к бонусам</NuxtLink>
-
-    <div class="manager-hero">
-      <p class="manager-eyebrow">Бонусы</p>
-      <h1 class="manager-title">Создать бонусную связку клиентов</h1>
-      <p class="max-w-2xl text-sm text-[#466653]">
-        Первый клиент получает процент бонуса, когда заказ второго клиента переходит в статус доставленного.
-      </p>
-    </div>
+    <UiBackHeader
+      to="/admin/bonuses/balances"
+      back-label="Назад к бонусам"
+      title="Создать бонусную связку клиентов"
+      subtitle="Первый клиент получает процент бонуса, когда заказ второго клиента переходит в статус доставленного."
+    />
 
     <div class="surface-card rounded-3xl p-5 space-y-4">
       <label class="form-control">
diff --git a/app/pages/bonus-system/transactions/new.vue b/app/pages/bonus-system/transactions/new.vue
index 2361c12..45c8825 100644
--- a/app/pages/bonus-system/transactions/new.vue
+++ b/app/pages/bonus-system/transactions/new.vue
@@ -31,12 +31,11 @@ async function addBonus() {
 
 <template>
   <section class="space-y-6 max-w-3xl">
-    <NuxtLink to="/admin/bonuses/balances" class="text-sm font-semibold text-[#0d854a]">← Назад к бонусам</NuxtLink>
-
-    <div class="manager-hero">
-      <p class="manager-eyebrow">Бонусы</p>
-      <h1 class="manager-title">Добавить бонусную транзакцию</h1>
-    </div>
+    <UiBackHeader
+      to="/admin/bonuses/balances"
+      back-label="Назад к бонусам"
+      title="Добавить бонусную транзакцию"
+    />
 
     <div class="surface-card rounded-3xl p-5 space-y-3">
       <label class="form-control">
diff --git a/app/pages/bonus-system/withdrawals/[id].vue b/app/pages/bonus-system/withdrawals/[id].vue
index 5cf619e..168a3e0 100644
--- a/app/pages/bonus-system/withdrawals/[id].vue
+++ b/app/pages/bonus-system/withdrawals/[id].vue
@@ -49,8 +49,6 @@ async function reviewWithdrawal() {
 
 <template>
   <section class="space-y-6 max-w-3xl">
-    <NuxtLink to="/admin/bonuses/requests" class="text-sm font-semibold text-[#0d854a]">← Назад к бонусам</NuxtLink>
-
     <div v-if="withdrawalsQuery.loading.value" class="manager-empty-state">
       Загружаем заявку на вывод...
     </div>
@@ -60,13 +58,12 @@ async function reviewWithdrawal() {
     </div>
 
     <template v-else>
-      <div class="manager-hero">
-        <p class="manager-eyebrow">Вывод</p>
-        <h1 class="manager-title">Проверка заявки на вывод</h1>
-        <p class="manager-copy">
-          {{ currentWithdrawal.requesterFullName }} · {{ currentWithdrawal.requesterEmail }} · Сумма: {{ currentWithdrawal.amount }}
-        </p>
-      </div>
+      <UiBackHeader
+        to="/admin/bonuses/requests"
+        back-label="Назад к бонусам"
+        title="Проверка заявки на вывод"
+        :subtitle="`${currentWithdrawal.requesterFullName} · ${currentWithdrawal.requesterEmail} · Сумма: ${currentWithdrawal.amount}`"
+      />
 
       <div class="surface-card rounded-3xl p-5 space-y-3">
         <label class="form-control">
diff --git a/app/pages/client-orders/[id].vue b/app/pages/client-orders/[id].vue
index fac6874..9a90f53 100644
--- a/app/pages/client-orders/[id].vue
+++ b/app/pages/client-orders/[id].vue
@@ -316,20 +316,11 @@ watch(
     </div>
 
     <template v-else>
-      <div class="surface-card rounded-3xl px-5 py-4">
-        <div class="flex flex-wrap items-center gap-3">
-          <NuxtLink to="/admin/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>
+      <UiBackHeader
+        to="/admin/orders"
+        back-label="Назад к заказам клиентов"
+        :title="`Заказ ${currentOrderCode}`"
+      />
 
       <div class="space-y-4">
         <div class="surface-card rounded-3xl p-5">
diff --git a/app/pages/clients/[id].vue b/app/pages/clients/[id].vue
index ca050f3..293a13b 100644
--- a/app/pages/clients/[id].vue
+++ b/app/pages/clients/[id].vue
@@ -107,8 +107,6 @@ async function rejectRequest() {
 
 <template>
   <section class="space-y-6">
-    <NuxtLink :to="backTarget" class="text-sm font-semibold text-[#0d854a]">← Назад к пользователям</NuxtLink>
-
     <template v-if="isRequestMode">
       <div v-if="requestsQuery.loading.value" class="manager-empty-state">
         Загружаем карточку клиента...
@@ -119,18 +117,19 @@ async function rejectRequest() {
       </div>
 
       <template v-else>
-        <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-          <div class="manager-hero">
-            <p class="manager-eyebrow">Заявка</p>
-            <h1 class="manager-title">{{ currentRequest.companyName }}</h1>
-            <p class="manager-copy">Контакт: {{ currentRequest.contactName }} · {{ currentRequest.email }}</p>
-          </div>
-
-          <div v-if="currentRequest.status === 'PENDING'" class="flex flex-wrap gap-2">
-            <button class="btn btn-success border-0" @click="approveRequest">Одобрить</button>
-            <button class="btn btn-error border-0" @click="rejectRequest">Отклонить</button>
-          </div>
-        </div>
+        <UiBackHeader
+          :to="backTarget"
+          back-label="Назад к пользователям"
+          :title="`Заявка ${currentRequest.companyName}`"
+          :subtitle="`Контакт: ${currentRequest.contactName} · ${currentRequest.email}`"
+        >
+          <template #actions>
+            <div v-if="currentRequest.status === 'PENDING'" class="flex flex-wrap gap-2">
+              <button class="btn btn-success border-0" @click="approveRequest">Одобрить</button>
+              <button class="btn btn-error border-0" @click="rejectRequest">Отклонить</button>
+            </div>
+          </template>
+        </UiBackHeader>
 
         <div class="grid gap-4 lg:grid-cols-3">
           <div class="manager-stat-card">
@@ -161,6 +160,13 @@ async function rejectRequest() {
       </div>
 
       <template v-else>
+        <UiBackHeader
+          :to="backTarget"
+          back-label="Назад к пользователям"
+          :title="`Клиент ${currentUser.fullName}`"
+          :subtitle="currentUser.companyName || currentUser.email"
+        />
+
         <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">
@@ -179,11 +185,6 @@ async function rejectRequest() {
             </div>
 
             <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="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>
diff --git a/app/pages/clients/invite.vue b/app/pages/clients/invite.vue
index 36cbe69..3fb28d0 100644
--- a/app/pages/clients/invite.vue
+++ b/app/pages/clients/invite.vue
@@ -39,13 +39,12 @@ async function createInvitation() {
 
 <template>
   <section class="space-y-6 max-w-3xl">
-    <NuxtLink to="/admin/orders/clients" class="text-sm font-semibold text-[#0d854a]">← Назад к пользователям</NuxtLink>
-
-    <div class="manager-hero">
-      <p class="manager-eyebrow">Приглашение</p>
-      <h1 class="manager-title">Пригласить нового клиента</h1>
-      <p class="manager-copy">Форма вынесена отдельно, чтобы список клиентов оставался чистым и спокойным.</p>
-    </div>
+    <UiBackHeader
+      to="/admin/orders/clients"
+      back-label="Назад к пользователям"
+      title="Пригласить нового клиента"
+      subtitle="Форма вынесена отдельно, чтобы список клиентов оставался чистым и спокойным."
+    />
 
     <div class="surface-card rounded-3xl p-5">
       <div class="grid gap-3">
diff --git a/app/pages/orders/[id].vue b/app/pages/orders/[id].vue
index 7c5bcfe..81b07e7 100644
--- a/app/pages/orders/[id].vue
+++ b/app/pages/orders/[id].vue
@@ -32,20 +32,11 @@ const currentOrderCode = computed(() => formatOrderCode(currentOrder.value?.code
     </div>
 
     <template v-else>
-      <div class="flex flex-wrap items-center gap-3 px-1">
-        <NuxtLink
-          to="/orders"
-          aria-label="Назад к моим заказам"
-          class="flex h-11 w-11 items-center justify-center rounded-full bg-white/70 text-[#0d854a] transition hover:bg-white"
-        >
-          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none">
-            <path d="M11.5 4.5L6 10L11.5 15.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-        </NuxtLink>
-        <h1 class="text-2xl font-black tracking-[-0.03em] text-[#123824] md:text-3xl">
-          Заказ {{ currentOrderCode }}
-        </h1>
-      </div>
+      <UiBackHeader
+        to="/orders"
+        back-label="Назад к моим заказам"
+        :title="`Заказ ${currentOrderCode}`"
+      />
 
       <div class="space-y-4">
         <OrdersOrderStatusTimelineCard
diff --git a/app/pages/profile/addresses.vue b/app/pages/profile/addresses.vue
index 74d4d02..4198864 100644
--- a/app/pages/profile/addresses.vue
+++ b/app/pages/profile/addresses.vue
@@ -61,23 +61,21 @@ async function deleteAddress(addressId: string) {
 
 <template>
   <section class="space-y-6">
-    <NuxtLink to="/profile" class="link link-hover text-sm">← Назад в профиль</NuxtLink>
-
-    <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
-      <div class="space-y-2">
-        <h1 class="text-3xl font-extrabold text-[#0f2f20]">Адреса доставки</h1>
-        <p class="text-sm leading-6 text-[#466653]">
-          Выберите основной адрес для заказов или добавьте новый.
-        </p>
-      </div>
-
-      <NuxtLink
-        to="/profile/addresses/new"
-        class="btn rounded-full border-0 bg-[#123824] px-6 text-white hover:bg-[#0f2f20]"
-      >
-        Добавить
-      </NuxtLink>
-    </div>
+    <UiBackHeader
+      to="/profile"
+      back-label="Назад в профиль"
+      title="Адреса доставки"
+      subtitle="Выберите основной адрес для заказов или добавьте новый."
+    >
+      <template #actions>
+        <NuxtLink
+          to="/profile/addresses/new"
+          class="btn rounded-full border-0 bg-[#123824] px-6 text-white hover:bg-[#0f2f20]"
+        >
+          Добавить
+        </NuxtLink>
+      </template>
+    </UiBackHeader>
 
     <div
       v-if="addressFeedback"
diff --git a/app/pages/profile/addresses/new.vue b/app/pages/profile/addresses/new.vue
index d20d4a0..d100fd3 100644
--- a/app/pages/profile/addresses/new.vue
+++ b/app/pages/profile/addresses/new.vue
@@ -117,14 +117,12 @@ onBeforeUnmount(() => {
 
 <template>
   <section class="space-y-6">
-    <NuxtLink to="/profile/addresses" class="link link-hover text-sm">← Назад к адресам</NuxtLink>
-
-    <div class="space-y-2">
-      <h1 class="text-3xl font-extrabold text-[#0f2f20]">Новый адрес</h1>
-      <p class="text-sm leading-6 text-[#466653]">
-        Найдите адрес через DaData и сохраните его в профиль.
-      </p>
-    </div>
+    <UiBackHeader
+      to="/profile/addresses"
+      back-label="Назад к адресам"
+      title="Новый адрес"
+      subtitle="Найдите адрес через DaData и сохраните его в профиль."
+    />
 
     <div class="rounded-[28px] bg-white px-5 py-5 shadow-[0_18px_38px_rgba(18,56,36,0.08)] md:px-6 md:py-6">
       <fieldset class="fieldset">
diff --git a/app/pages/profile/counterparty.vue b/app/pages/profile/counterparty.vue
index d2250c7..19643b9 100644
--- a/app/pages/profile/counterparty.vue
+++ b/app/pages/profile/counterparty.vue
@@ -254,23 +254,21 @@ onBeforeUnmount(() => {
 
 <template>
   <section class="space-y-6">
-    <NuxtLink to="/profile" class="link link-hover text-sm">← Назад в профиль</NuxtLink>
-
-    <div class="space-y-2">
-      <div class="flex flex-wrap items-center justify-between gap-3">
-        <h1 class="text-3xl font-extrabold text-[#0f2f20]">Карточка контрагента</h1>
+    <UiBackHeader
+      to="/profile"
+      back-label="Назад в профиль"
+      title="Карточка контрагента"
+      subtitle="Заполните реквизиты компании, банка и подписанта. После этого карточку можно будет использовать в заказах без ручного добивания данных."
+    >
+      <template #actions>
         <span
           class="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold uppercase tracking-[0.16em]"
           :class="profileIsComplete ? 'bg-[#e8f6ee] text-[#0d854a]' : 'bg-[#fff3dc] text-[#b06b00]'"
         >
           {{ profileIsComplete ? 'Заполнено' : 'Нужно заполнить' }}
         </span>
-      </div>
-
-      <p class="max-w-3xl text-sm leading-6 text-[#355947]">
-        Заполните реквизиты компании, банка и подписанта. После этого карточку можно будет использовать в заказах без ручного добивания данных.
-      </p>
-    </div>
+      </template>
+    </UiBackHeader>
 
     <div class="space-y-4">
       <section class="surface-card rounded-3xl p-5 md:p-6">
diff --git a/app/pages/profile/notifications.vue b/app/pages/profile/notifications.vue
index 37f03a8..7555fee 100644
--- a/app/pages/profile/notifications.vue
+++ b/app/pages/profile/notifications.vue
@@ -134,14 +134,12 @@ async function removeConnection(connectionId: string) {
 
 <template>
   <section class="space-y-6">
-    <NuxtLink to="/profile" class="link link-hover text-sm">← Назад в профиль</NuxtLink>
-
-    <div class="space-y-2">
-      <h1 class="text-3xl font-extrabold text-[#0f2f20]">Уведомления</h1>
-      <p class="text-sm leading-6 text-[#466653]">
-        Подключите мессенджер, чтобы получать уведомления по заказам.
-      </p>
-    </div>
+    <UiBackHeader
+      to="/profile"
+      back-label="Назад в профиль"
+      title="Уведомления"
+      subtitle="Подключите мессенджер, чтобы получать уведомления по заказам."
+    />
 
     <div
       v-if="feedback"