From 26b44f30bfcf90dcf3c82263ae77cbd4949ceb6b Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Sat, 4 Apr 2026 08:39:01 +0700
Subject: [PATCH] Unify section search headers

---
 .../catalog/CatalogConfigurator.vue           | 36 ++-----------
 app/components/ui/SectionSearchHero.vue       | 54 +++++++++++++++++++
 app/pages/bonus-system/index.vue              | 52 +++++++-----------
 app/pages/cart.vue                            |  2 +-
 app/pages/client-orders/index.vue             | 46 +++++++---------
 app/pages/clients/index.vue                   | 36 ++++---------
 app/pages/orders.vue                          | 42 +++++++--------
 7 files changed, 126 insertions(+), 142 deletions(-)
 create mode 100644 app/components/ui/SectionSearchHero.vue

diff --git a/app/components/catalog/CatalogConfigurator.vue b/app/components/catalog/CatalogConfigurator.vue
index 5ca16c6..185f64d 100644
--- a/app/components/catalog/CatalogConfigurator.vue
+++ b/app/components/catalog/CatalogConfigurator.vue
@@ -433,37 +433,11 @@ function decrementSelected(group: ProductGroup) {
 
 <template>
   <section class="space-y-5">
-    <h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
-
-    <label class="input input-bordered flex w-full items-center gap-3 rounded-full bg-white">
-      <svg
-        class="h-4 w-4 shrink-0 text-base-content/45"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14.1667 14.1667L17.5 17.5"
-          stroke="currentColor"
-          stroke-width="1.6"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <circle
-          cx="8.75"
-          cy="8.75"
-          r="5.83333"
-          stroke="currentColor"
-          stroke-width="1.6"
-        />
-      </svg>
-      <input
-        v-model="search"
-        type="text"
-        class="grow"
-        placeholder="Поиск по артикулу, типу товара или параметрам"
-      >
-    </label>
+    <UiSectionSearchHero
+      v-model="search"
+      title="Каталог"
+      search-placeholder="Поиск по артикулу, типу товара или параметрам"
+    />
 
     <div v-if="loading" class="alert surface-card border-0">Загрузка каталога...</div>
     <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
diff --git a/app/components/ui/SectionSearchHero.vue b/app/components/ui/SectionSearchHero.vue
new file mode 100644
index 0000000..528e859
--- /dev/null
+++ b/app/components/ui/SectionSearchHero.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string;
+  modelValue: string;
+  searchPlaceholder: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+function updateValue(event: Event) {
+  emit('update:modelValue', (event.target as HTMLInputElement).value);
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <h1 class="text-3xl font-extrabold text-[#0f2f20]">{{ props.title }}</h1>
+
+    <label class="input input-bordered flex w-full items-center gap-3 rounded-full bg-white">
+      <svg
+        class="h-4 w-4 shrink-0 text-base-content/45"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.1667 14.1667L17.5 17.5"
+          stroke="currentColor"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <circle
+          cx="8.75"
+          cy="8.75"
+          r="5.83333"
+          stroke="currentColor"
+          stroke-width="1.6"
+        />
+      </svg>
+      <input
+        :value="props.modelValue"
+        type="text"
+        class="grow"
+        :placeholder="props.searchPlaceholder"
+        @input="updateValue"
+      >
+    </label>
+
+    <slot />
+  </div>
+</template>
diff --git a/app/pages/bonus-system/index.vue b/app/pages/bonus-system/index.vue
index 04f41b8..9a1a677 100644
--- a/app/pages/bonus-system/index.vue
+++ b/app/pages/bonus-system/index.vue
@@ -41,45 +41,31 @@ const filteredTransactions = computed(() => {
 
 <template>
   <section class="space-y-6">
-    <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
-      <div class="manager-hero">
-        <p class="manager-eyebrow">Бонусы</p>
-        <h1 class="manager-title">Отдельный раздел для бонусной системы</h1>
-        <p class="manager-copy">Здесь остаются история начислений и заявки на вывод, без смешивания с клиентами.</p>
-      </div>
-
+    <UiSectionSearchHero
+      v-model="search"
+      title="Бонусы"
+      search-placeholder="Пользователь, причина, заказ или сумма"
+    >
       <div class="flex flex-wrap gap-2">
         <NuxtLink to="/bonus-system/referrals/new" class="btn btn-secondary border-0">Создать связь</NuxtLink>
         <NuxtLink to="/bonus-system/transactions/new" class="btn btn-primary border-0">Добавить бонус</NuxtLink>
       </div>
-    </div>
 
-    <div class="grid gap-4 lg:grid-cols-3">
-      <div class="manager-stat-card">
-        <p class="manager-stat-label">Баланс</p>
-        <p class="manager-stat-value">{{ bonusQuery.result.value?.referralStats.availableBalance ?? 0 }}</p>
+      <div class="grid gap-4 lg:grid-cols-3">
+        <div class="manager-stat-card">
+          <p class="manager-stat-label">Баланс</p>
+          <p class="manager-stat-value">{{ bonusQuery.result.value?.referralStats.availableBalance ?? 0 }}</p>
+        </div>
+        <div class="manager-stat-card">
+          <p class="manager-stat-label">Рефералы</p>
+          <p class="manager-stat-value">{{ bonusQuery.result.value?.referralStats.referralsCount ?? 0 }}</p>
+        </div>
+        <div class="manager-stat-card">
+          <p class="manager-stat-label">Заявки на вывод</p>
+          <p class="manager-stat-value">{{ withdrawals.length }}</p>
+        </div>
       </div>
-      <div class="manager-stat-card">
-        <p class="manager-stat-label">Рефералы</p>
-        <p class="manager-stat-value">{{ bonusQuery.result.value?.referralStats.referralsCount ?? 0 }}</p>
-      </div>
-      <div class="manager-stat-card">
-        <p class="manager-stat-label">Заявки на вывод</p>
-        <p class="manager-stat-value">{{ withdrawals.length }}</p>
-      </div>
-    </div>
-
-    <div class="surface-card rounded-3xl p-4 md:p-5">
-      <label class="form-control">
-        <span class="label-text">Search</span>
-        <input
-          v-model="search"
-          type="text"
-          class="input manager-field w-full"
-          placeholder="Пользователь, причина, заказ или сумма"
-        >
-      </label>
-    </div>
+    </UiSectionSearchHero>
 
     <div class="grid gap-4 xl:grid-cols-[1.1fr_0.9fr]">
       <div class="surface-card rounded-3xl p-5">
diff --git a/app/pages/cart.vue b/app/pages/cart.vue
index f804683..06bcc34 100644
--- a/app/pages/cart.vue
+++ b/app/pages/cart.vue
@@ -146,7 +146,7 @@ async function submitCart() {
     <div class="surface-card rounded-3xl p-4 md:p-5">
       <h2 class="text-lg font-bold text-[#123824]">Адрес доставки</h2>
 
-      <div v-if="deliveryAddressesQuery.loading" class="alert mt-3 surface-card">
+      <div v-if="deliveryAddressesQuery.loading.value" class="alert mt-3 surface-card">
         Загружаем адреса...
       </div>
       <div v-else-if="!hasDeliveryAddresses" class="alert alert-warning mt-3">
diff --git a/app/pages/client-orders/index.vue b/app/pages/client-orders/index.vue
index 75eaf56..d8038ba 100644
--- a/app/pages/client-orders/index.vue
+++ b/app/pages/client-orders/index.vue
@@ -54,35 +54,25 @@ const filteredOrders = computed(() => {
 
 <template>
   <section class="space-y-6">
-    <div class="manager-hero">
-      <p class="manager-eyebrow">Заказы клиентов</p>
-      <h1 class="manager-title">Только список заказов и быстрый поиск</h1>
-      <p class="manager-copy">Карточки заказов без форм на странице списка. Детали и действия открываются внутри заказа.</p>
-    </div>
-
-    <div class="surface-card rounded-3xl p-4 md:p-5">
-      <div class="grid gap-3 md:grid-cols-[1fr_auto]">
-        <label class="form-control">
-          <span class="label-text">Search</span>
-          <input
-            v-model="search"
-            type="text"
-            class="input manager-field w-full"
-            placeholder="Номер заказа, клиент, адрес или товар"
-          >
-        </label>
-
-        <label class="form-control md:min-w-60">
-          <span class="label-text">Фильтр</span>
-          <select v-model="statusFilter" class="select manager-field w-full">
-            <option value="ALL">Все заказы</option>
-            <option value="WAITING">Ожидают подтверждения</option>
-            <option value="ACTIVE">Активные</option>
-            <option value="CLOSED">Закрытые</option>
-          </select>
-        </label>
+    <UiSectionSearchHero
+      v-model="search"
+      title="Заказы клиентов"
+      search-placeholder="Номер заказа, клиент, адрес или товар"
+    >
+      <div class="surface-card rounded-3xl p-4 md:p-5">
+        <div class="grid gap-3 md:grid-cols-[1fr_auto]">
+          <label class="form-control md:min-w-60">
+            <span class="label-text">Фильтр</span>
+            <select v-model="statusFilter" class="select manager-field w-full">
+              <option value="ALL">Все заказы</option>
+              <option value="WAITING">Ожидают подтверждения</option>
+              <option value="ACTIVE">Активные</option>
+              <option value="CLOSED">Закрытые</option>
+            </select>
+          </label>
+        </div>
       </div>
-    </div>
+    </UiSectionSearchHero>
 
     <div v-if="ordersQuery.loading.value" class="manager-empty-state">
       Загружаем заказы...
diff --git a/app/pages/clients/index.vue b/app/pages/clients/index.vue
index 42b0c0f..bfd0ec7 100644
--- a/app/pages/clients/index.vue
+++ b/app/pages/clients/index.vue
@@ -60,35 +60,21 @@ const filteredClients = computed(() => {
 
 <template>
   <section class="space-y-6">
-    <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
-      <div class="manager-hero">
-        <p class="manager-eyebrow">Клиенты</p>
-        <h1 class="manager-title">Карточки клиентов без лишней нагрузки</h1>
-        <p class="manager-copy">Список заявок и клиентов, с которыми менеджер уже работает.</p>
-      </div>
-
-      <NuxtLink to="/clients/invite" class="btn btn-primary border-0">
-        Пригласить клиента
-      </NuxtLink>
-    </div>
-
-    <div class="surface-card rounded-3xl p-4 md:p-5">
-      <div class="grid gap-3 md:grid-cols-[1fr_auto] md:items-end">
-        <label class="form-control">
-          <span class="label-text">Search</span>
-          <input
-            v-model="search"
-            type="text"
-            class="input manager-field w-full"
-            placeholder="Компания, контакт, email или ИНН"
-          >
-        </label>
-
+    <UiSectionSearchHero
+      v-model="search"
+      title="Клиенты"
+      search-placeholder="Компания, контакт, email или ИНН"
+    >
+      <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
         <div class="manager-mini-card text-sm text-[#123824] md:w-56">
           Всего карточек: <span class="font-semibold">{{ filteredClients.length }}</span>
         </div>
+
+        <NuxtLink to="/clients/invite" class="btn btn-primary border-0">
+          Пригласить клиента
+        </NuxtLink>
       </div>
-    </div>
+    </UiSectionSearchHero>
 
     <div v-if="clientsQuery.loading.value" class="manager-empty-state">
       Загружаем клиентов...
diff --git a/app/pages/orders.vue b/app/pages/orders.vue
index 1cf64d1..25501d8 100644
--- a/app/pages/orders.vue
+++ b/app/pages/orders.vue
@@ -48,31 +48,25 @@ const filteredOrders = computed(() => {
 
 <template>
   <section class="space-y-6">
-    <h1 class="text-3xl font-extrabold text-[#0f2f20]">Заказы</h1>
-
-    <div class="surface-card rounded-3xl p-4 md:p-5">
-      <div class="grid gap-3 md:grid-cols-[1fr_auto]">
-        <label class="form-control">
-          <span class="label-text">Поиск</span>
-          <input
-            v-model="search"
-            type="text"
-            class="input input-bordered w-full"
-            placeholder="Номер заказа или товар"
-          >
-        </label>
-
-        <label class="form-control md:min-w-60">
-          <span class="label-text">Фильтр</span>
-          <select v-model="statusFilter" class="select select-bordered w-full">
-            <option value="ALL">Все заказы</option>
-            <option value="WAITING">Ожидают подтверждения</option>
-            <option value="ACTIVE">Активные</option>
-            <option value="CLOSED">Закрытые</option>
-          </select>
-        </label>
+    <UiSectionSearchHero
+      v-model="search"
+      title="Мои заказы"
+      search-placeholder="Номер заказа или товар"
+    >
+      <div class="surface-card rounded-3xl p-4 md:p-5">
+        <div class="grid gap-3 md:grid-cols-[1fr_auto]">
+          <label class="form-control md:min-w-60">
+            <span class="label-text">Фильтр</span>
+            <select v-model="statusFilter" class="select select-bordered w-full">
+              <option value="ALL">Все заказы</option>
+              <option value="WAITING">Ожидают подтверждения</option>
+              <option value="ACTIVE">Активные</option>
+              <option value="CLOSED">Закрытые</option>
+            </select>
+          </label>
+        </div>
       </div>
-    </div>
+    </UiSectionSearchHero>
 
     <div v-if="allOrders.loading.value" class="alert surface-card border-0">Загрузка заказов...</div>
     <div v-else-if="filteredOrders.length === 0" class="alert surface-card border-0">