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

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

@@ -18,7 +18,8 @@ function updateValue(event: Event) {
<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">
<div class="flex flex-col gap-3 md:flex-row md:items-center">
<label class="input input-bordered flex w-full flex-1 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"
@@ -49,6 +50,9 @@ function updateValue(event: Event) {
>
</label>
<slot name="controls" />
</div>
<slot />
</div>
</template>

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

@@ -45,57 +45,9 @@ const filteredTransactions = computed(() => {
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 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">
<h2 class="text-xl font-bold text-[#123824]">Заявки на вывод</h2>
@@ -106,17 +58,45 @@ const filteredTransactions = computed(() => {
Активных заявок на вывод сейчас нет.
</div>
<div v-else class="mt-4 space-y-3">
<article v-for="withdrawal in withdrawals" :key="withdrawal.id" class="surface-subcard p-4">
<div class="space-y-2">
<article v-for="withdrawal in withdrawals" :key="withdrawal.id" class="rounded-2xl border border-[#d6ebde] bg-white px-4 py-4">
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div class="space-y-1">
<p class="text-sm font-semibold text-[#123824]">Пользователь: {{ withdrawal.requesterId }}</p>
<p class="text-sm text-[#355947]">Сумма: {{ withdrawal.amount }}</p>
<p class="text-xs text-[#5c7b69]">{{ new Date(withdrawal.createdAt).toLocaleString() }}</p>
</div>
<div class="mt-4">
<div>
<NuxtLink :to="`/bonus-system/withdrawals/${withdrawal.id}`" class="btn btn-accent btn-sm border-0">
Проверить вывод
</NuxtLink>
</div>
</div>
</article>
</div>
</div>
<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>
</article>
</div>
</div>

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

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

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

@@ -65,15 +65,11 @@ const filteredClients = computed(() => {
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>
<template #controls>
<NuxtLink to="/clients/invite" class="btn btn-primary border-0">
Пригласить клиента
</NuxtLink>
</div>
</template>
</UiSectionSearchHero>
<div v-if="clientsQuery.loading.value" class="manager-empty-state">

34
app/pages/orders.vue
View File

@@ -53,19 +53,14 @@ const filteredOrders = computed(() => {
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">
<template #controls>
<select v-model="statusFilter" class="select select-bordered w-full rounded-full bg-white md:w-64">
<option value="ALL">Все заказы</option>
<option value="WAITING">Ожидают подтверждения</option>
<option value="ACTIVE">Активные</option>
<option value="CLOSED">Закрытые</option>
</select>
</label>
</div>
</div>
</template>
</UiSectionSearchHero>
<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"
>
<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>
<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>
<ul class="mt-4 grid gap-2 text-sm text-[#214735]">
<li
v-for="item in order.items"
: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 }}
</li>
</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>
</div>
</section>