fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify manager section layouts

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-04 08:45:53 +07:00
parent 26b44f30bf
commit 60f8b863a2
5 changed files with 111 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/components/ui/SectionSearchHero.vue
View File

@@ -18,36 +18,40 @@ function updateValue(event: Event) {
<div class="space-y-5"> <div class="space-y-5">
<h1 class="text-3xl font-extrabold text-[#0f2f20]">{{ props.title }}</h1> <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"> <div class="flex flex-col gap-3 md:flex-row md:items-center">
<svg <label class="input input-bordered flex w-full flex-1 items-center gap-3 rounded-full bg-white">
class="h-4 w-4 shrink-0 text-base-content/45" <svg
viewBox="0 0 20 20" class="h-4 w-4 shrink-0 text-base-content/45"
fill="none" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" fill="none"
> xmlns="http://www.w3.org/2000/svg"
<path >
d="M14.1667 14.1667L17.5 17.5" <path
stroke="currentColor" d="M14.1667 14.1667L17.5 17.5"
stroke-width="1.6" stroke="currentColor"
stroke-linecap="round" stroke-width="1.6"
stroke-linejoin="round" stroke-linecap="round"
/> stroke-linejoin="round"
<circle />
cx="8.75" <circle
cy="8.75" cx="8.75"
r="5.83333" cy="8.75"
stroke="currentColor" r="5.83333"
stroke-width="1.6" stroke="currentColor"
/> stroke-width="1.6"
</svg> />
<input </svg>
:value="props.modelValue" <input
type="text" :value="props.modelValue"
class="grow" type="text"
:placeholder="props.searchPlaceholder" class="grow"
@input="updateValue" :placeholder="props.searchPlaceholder"
> @input="updateValue"
</label> >
</label>
<slot name="controls" />
</div>
<slot /> <slot />
</div> </div>

98
app/pages/bonus-system/index.vue
View File

@@ -45,57 +45,9 @@ const filteredTransactions = computed(() => {
v-model="search" v-model="search"
title="Бонусы" title="Бонусы"
search-placeholder="Пользователь, причина, заказ или сумма" 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 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>
</UiSectionSearchHero>
<div class="grid gap-4 xl:grid-cols-[1.1fr_0.9fr]">
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">История транзакций</h2>
<div v-if="bonusQuery.loading.value" class="manager-empty-state mt-4">
Загружаем историю...
</div>
<div v-else-if="filteredTransactions.length === 0" class="manager-empty-state mt-4">
Транзакции по текущему запросу не найдены.
</div>
<div v-else class="mt-4 space-y-3">
<article v-for="transaction in filteredTransactions" :key="transaction.id" class="surface-subcard p-4">
<div class="flex flex-wrap items-start justify-between gap-3">
<div>
<p class="text-sm font-semibold text-[#123824]">{{ transaction.reason }}</p>
<p class="mt-1 text-sm text-[#5c7b69]">Пользователь: {{ transaction.userId }}</p>
</div>
<div class="manager-mini-card text-sm font-semibold text-[#123824]">
{{ transaction.amount }}
</div>
</div>
<div class="mt-3 flex flex-wrap gap-3 text-xs text-[#5c7b69]">
<span>{{ new Date(transaction.createdAt).toLocaleString() }}</span>
<span v-if="transaction.orderId">Заказ: {{ transaction.orderId }}</span>
</div>
</article>
</div>
</div>
<div class="space-y-4">
<div class="surface-card rounded-3xl p-5"> <div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Заявки на вывод</h2> <h2 class="text-xl font-bold text-[#123824]">Заявки на вывод</h2>
@@ -106,16 +58,44 @@ const filteredTransactions = computed(() => {
Активных заявок на вывод сейчас нет. Активных заявок на вывод сейчас нет.
</div> </div>
<div v-else class="mt-4 space-y-3"> <div v-else class="mt-4 space-y-3">
<article v-for="withdrawal in withdrawals" :key="withdrawal.id" class="surface-subcard p-4"> <article v-for="withdrawal in withdrawals" :key="withdrawal.id" class="rounded-2xl border border-[#d6ebde] bg-white px-4 py-4">
<div class="space-y-2"> <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<p class="text-sm font-semibold text-[#123824]">Пользователь: {{ withdrawal.requesterId }}</p> <div class="space-y-1">
<p class="text-sm text-[#355947]">Сумма: {{ withdrawal.amount }}</p> <p class="text-sm font-semibold text-[#123824]">Пользователь: {{ withdrawal.requesterId }}</p>
<p class="text-xs text-[#5c7b69]">{{ new Date(withdrawal.createdAt).toLocaleString() }}</p> <p class="text-sm text-[#355947]">Сумма: {{ withdrawal.amount }}</p>
<p class="text-xs text-[#5c7b69]">{{ new Date(withdrawal.createdAt).toLocaleString() }}</p>
</div>
<div>
<NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm border-0">
Проверить вывод
</NuxtLink>
</div>
</div> </div>
<div class="mt-4"> </article>
<NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm border-0"> </div>
Проверить вывод </div>
</NuxtLink>
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">История транзакций</h2>
<div v-if="bonusQuery.loading.value" class="manager-empty-state mt-4">
Загружаем историю...
</div>
<div v-else-if="filteredTransactions.length === 0" class="manager-empty-state mt-4">
Транзакции по текущему запросу не найдены.
</div>
<div v-else class="mt-4 space-y-3">
<article v-for="transaction in filteredTransactions" :key="transaction.id" class="rounded-2xl border border-[#d6ebde] bg-white px-4 py-4">
<div class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
<div class="space-y-1">
<p class="text-sm font-semibold text-[#123824]">{{ transaction.reason }}</p>
<p class="text-sm text-[#5c7b69]">Пользователь: {{ transaction.userId }}</p>
<p v-if="transaction.orderId" class="text-sm text-[#5c7b69]">Заказ: {{ transaction.orderId }}</p>
<p class="text-xs text-[#5c7b69]">{{ new Date(transaction.createdAt).toLocaleString() }}</p>
</div>
<div class="text-sm font-semibold text-[#123824]">
{{ transaction.amount }}
</div>
</div> </div>
</article> </article>
</div> </div>

48
app/pages/client-orders/index.vue
View File

@@ -59,19 +59,14 @@ const filteredOrders = computed(() => {
title="Заказы клиентов" title="Заказы клиентов"
search-placeholder="Номер заказа, клиент, адрес или товар" search-placeholder="Номер заказа, клиент, адрес или товар"
> >
<div class="surface-card rounded-3xl p-4 md:p-5"> <template #controls>
<div class="grid gap-3 md:grid-cols-[1fr_auto]"> <select v-model="statusFilter" class="select select-bordered w-full rounded-full bg-white md:w-64">
<label class="form-control md:min-w-60"> <option value="ALL">Все заказы</option>
<span class="label-text">Фильтр</span> <option value="WAITING">Ожидают подтверждения</option>
<select v-model="statusFilter" class="select manager-field w-full"> <option value="ACTIVE">Активные</option>
<option value="ALL">Все заказы</option> <option value="CLOSED">Закрытые</option>
<option value="WAITING">Ожидают подтверждения</option> </select>
<option value="ACTIVE">Активные</option> </template>
<option value="CLOSED">Закрытые</option>
</select>
</label>
</div>
</div>
</UiSectionSearchHero> </UiSectionSearchHero>
<div v-if="ordersQuery.loading.value" class="manager-empty-state"> <div v-if="ordersQuery.loading.value" class="manager-empty-state">
@@ -91,25 +86,22 @@ const filteredOrders = computed(() => {
<div class="flex flex-wrap items-start justify-between gap-3"> <div class="flex flex-wrap items-start justify-between gap-3">
<div class="space-y-1"> <div class="space-y-1">
<h2 class="text-lg font-bold text-[#123824]">{{ order.code }}</h2> <h2 class="text-lg font-bold text-[#123824]">{{ order.code }}</h2>
<div class="flex flex-wrap gap-3 text-sm text-[#5c7b69]"> <p class="text-sm text-[#5c7b69]">Клиент: {{ order.customerId }}</p>
<span>Клиент: {{ order.customerId }}</span> <p class="text-sm text-[#5c7b69]">Создан: {{ new Date(order.createdAt).toLocaleString() }}</p>
<span>{{ new Date(order.createdAt).toLocaleString() }}</span> <p v-if="order.deliveryAddress" class="text-sm text-[#5c7b69]">Адрес: {{ order.deliveryAddress }}</p>
</div>
</div> </div>
<OrderStatusBadge :status="order.status" /> <OrderStatusBadge :status="order.status" />
</div> </div>
<div class="mt-4 grid gap-3 md:grid-cols-3"> <ul class="mt-4 grid gap-2 text-sm text-[#214735]">
<div class="manager-mini-card text-sm text-[#123824]"> <li
Позиций: <span class="font-semibold">{{ order.items.length }}</span> v-for="item in order.items"
</div> :key="item.id"
<div class="manager-mini-card text-sm text-[#123824]"> class="rounded-2xl border border-[#d6ebde] bg-white px-4 py-3"
Итого: <span class="font-semibold">{{ order.totalPrice ?? 'без оффера' }}</span> >
</div> {{ item.productName }} × {{ item.quantity }}
<div class="manager-mini-card text-sm text-[#123824]"> </li>
Адрес: <span class="font-semibold">{{ order.deliveryAddress || 'не выбран' }}</span> </ul>
</div>
</div>
</NuxtLink> </NuxtLink>
</div> </div>
</section> </section>

8
app/pages/clients/index.vue
View File

@@ -65,15 +65,11 @@ const filteredClients = computed(() => {
title="Клиенты" title="Клиенты"
search-placeholder="Компания, контакт, email или ИНН" search-placeholder="Компания, контакт, email или ИНН"
> >
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"> <template #controls>
<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 to="/clients/invite" class="btn btn-primary border-0">
Пригласить клиента Пригласить клиента
</NuxtLink> </NuxtLink>
</div> </template>
</UiSectionSearchHero> </UiSectionSearchHero>
<div v-if="clientsQuery.loading.value" class="manager-empty-state"> <div v-if="clientsQuery.loading.value" class="manager-empty-state">

46
app/pages/orders.vue
View File

@@ -53,19 +53,14 @@ const filteredOrders = computed(() => {
title="Мои заказы" title="Мои заказы"
search-placeholder="Номер заказа или товар" search-placeholder="Номер заказа или товар"
> >
<div class="surface-card rounded-3xl p-4 md:p-5"> <template #controls>
<div class="grid gap-3 md:grid-cols-[1fr_auto]"> <select v-model="statusFilter" class="select select-bordered w-full rounded-full bg-white md:w-64">
<label class="form-control md:min-w-60"> <option value="ALL">Все заказы</option>
<span class="label-text">Фильтр</span> <option value="WAITING">Ожидают подтверждения</option>
<select v-model="statusFilter" class="select select-bordered w-full"> <option value="ACTIVE">Активные</option>
<option value="ALL">Все заказы</option> <option value="CLOSED">Закрытые</option>
<option value="WAITING">Ожидают подтверждения</option> </select>
<option value="ACTIVE">Активные</option> </template>
<option value="CLOSED">Закрытые</option>
</select>
</label>
</div>
</div>
</UiSectionSearchHero> </UiSectionSearchHero>
<div v-if="allOrders.loading.value" class="alert surface-card border-0">Загрузка заказов...</div> <div v-if="allOrders.loading.value" class="alert surface-card border-0">Загрузка заказов...</div>
@@ -80,35 +75,26 @@ const filteredOrders = computed(() => {
class="surface-card rounded-3xl p-4 md:p-5" class="surface-card rounded-3xl p-4 md:p-5"
> >
<div class="flex flex-wrap items-start justify-between gap-3"> <div class="flex flex-wrap items-start justify-between gap-3">
<div> <div class="space-y-1">
<h2 class="text-lg font-bold text-[#123824]">{{ order.code }}</h2> <h2 class="text-lg font-bold text-[#123824]">{{ order.code }}</h2>
<p class="text-xs text-[#355947]">{{ new Date(order.createdAt).toLocaleString() }}</p> <p class="text-sm text-[#355947]">Создан: {{ new Date(order.createdAt).toLocaleString() }}</p>
<p v-if="order.deliveryAddress" class="text-sm text-[#355947]">Адрес: {{ order.deliveryAddress }}</p>
<p v-if="order.deliveryTerms" class="text-sm text-[#355947]">Доставка: {{ order.deliveryTerms }}</p>
</div>
<div class="flex flex-col items-end gap-2">
<OrderStatusBadge :status="order.status" />
</div> </div>
<OrderStatusBadge :status="order.status" />
</div> </div>
<ul class="mt-4 grid gap-2 text-sm text-[#214735]"> <ul class="mt-4 grid gap-2 text-sm text-[#214735]">
<li <li
v-for="item in order.items" v-for="item in order.items"
:key="item.id" :key="item.id"
class="rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-2" class="rounded-2xl border border-[#d6ebde] bg-white px-4 py-3"
> >
{{ item.productName }} × {{ item.quantity }} {{ item.productName }} × {{ item.quantity }}
</li> </li>
</ul> </ul>
<div class="mt-4 grid gap-3 text-sm text-[#214735] md:grid-cols-2">
<div class="rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-2">
Условия доставки: {{ order.deliveryTerms || 'ожидает обработки менеджером' }}
</div>
<div class="rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-2">
Итого: {{ order.totalPrice ?? 'после обработки менеджером' }}
</div>
</div>
<div class="mt-3 rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-2 text-sm text-[#214735]">
Адрес доставки: {{ order.deliveryAddress || 'адрес не был выбран' }}
</div>
</article> </article>
</div> </div>
</section> </section>