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

Add sync dashboard and date filters

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-07 10:25:28 +07:00
parent 5eafdd4e8f
commit 722dbb89cb
7 changed files with 385 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/app.vue
View File

@@ -86,11 +86,19 @@ const managerPageTabs = computed(() => {
{
key: 'messages',
label: 'Сообщения',
active: true,
active: route.path === '/admin/settings/messages',
to: {
path: '/admin/settings/messages',
},
},
{
key: 'sync',
label: '1С',
active: route.path === '/admin/settings/sync',
to: {
path: '/admin/settings/sync',
},
},
];
}

71
app/composables/graphql/generated.ts
View File

@@ -152,6 +152,28 @@ export type DeliveryAddress = {
userId: Scalars['ID']['output'];
};
export type IntegrationSyncDashboard = {
__typename?: 'IntegrationSyncDashboard';
generatedAt: Scalars['DateTime']['output'];
items: Array<IntegrationSyncItem>;
lastActivityAt?: Maybe<Scalars['DateTime']['output']>;
totalClients: Scalars['Int']['output'];
totalOrders: Scalars['Int']['output'];
totalProducts: Scalars['Int']['output'];
};
export type IntegrationSyncItem = {
__typename?: 'IntegrationSyncItem';
description: Scalars['String']['output'];
id: Scalars['ID']['output'];
lastSyncedAt?: Maybe<Scalars['DateTime']['output']>;
note: Scalars['String']['output'];
source: Scalars['String']['output'];
status: Scalars['String']['output'];
syncedCount: Scalars['Int']['output'];
title: Scalars['String']['output'];
};
export type Invitation = {
__typename?: 'Invitation';
acceptedAt?: Maybe<Scalars['DateTime']['output']>;
@@ -557,6 +579,7 @@ export type Query = {
__typename?: 'Query';
clientProducts: Array<Product>;
healthcheck: Scalars['String']['output'];
integrationSyncDashboard: IntegrationSyncDashboard;
managerBonusAccount: ManagerBonusAccount;
managerBonusBalances: Array<ManagerBonusBalance>;
managerNotificationHistory: Array<NotificationHistoryItem>;
@@ -1080,6 +1103,11 @@ export type UpsertMyCounterpartyProfileMutationVariables = Exact<{
export type UpsertMyCounterpartyProfileMutation = { __typename?: 'Mutation', upsertMyCounterpartyProfile: { __typename?: 'CounterpartyProfile', id: string, companyName: string, companyFullName: string, inn: string, kpp?: string | null, ogrn?: string | null, legalAddress: string, bankName: string, bik: string, correspondentAccount: string, checkingAccount: string, signerFullName: string, signerPosition: string, signerBasis: string, isComplete: boolean, updatedAt: any } };
export type IntegrationSyncDashboardQueryVariables = Exact<{ [key: string]: never; }>;
export type IntegrationSyncDashboardQuery = { __typename?: 'Query', integrationSyncDashboard: { __typename?: 'IntegrationSyncDashboard', generatedAt: any, lastActivityAt?: any | null, totalOrders: number, totalProducts: number, totalClients: number, items: Array<{ __typename?: 'IntegrationSyncItem', id: string, title: string, description: string, source: string, syncedCount: number, lastSyncedAt?: any | null, status: string, note: string }> } };
export const ConsumeLoginTokenDocument = gql`
mutation ConsumeLoginToken($token: String!) {
@@ -2843,4 +2871,45 @@ export const UpsertMyCounterpartyProfileDocument = gql`
export function useUpsertMyCounterpartyProfileMutation(options: VueApolloComposable.UseMutationOptions<UpsertMyCounterpartyProfileMutation, UpsertMyCounterpartyProfileMutationVariables> | ReactiveFunction<VueApolloComposable.UseMutationOptions<UpsertMyCounterpartyProfileMutation, UpsertMyCounterpartyProfileMutationVariables>> = {}) {
return VueApolloComposable.useMutation<UpsertMyCounterpartyProfileMutation, UpsertMyCounterpartyProfileMutationVariables>(UpsertMyCounterpartyProfileDocument, options);
}
export type UpsertMyCounterpartyProfileMutationCompositionFunctionResult = VueApolloComposable.UseMutationReturn<UpsertMyCounterpartyProfileMutation, UpsertMyCounterpartyProfileMutationVariables>;
export type UpsertMyCounterpartyProfileMutationCompositionFunctionResult = VueApolloComposable.UseMutationReturn<UpsertMyCounterpartyProfileMutation, UpsertMyCounterpartyProfileMutationVariables>;
export const IntegrationSyncDashboardDocument = gql`
query IntegrationSyncDashboard {
integrationSyncDashboard {
generatedAt
lastActivityAt
totalOrders
totalProducts
totalClients
items {
id
title
description
source
syncedCount
lastSyncedAt
status
note
}
}
}
`;
/**
* __useIntegrationSyncDashboardQuery__
*
* To run a query within a Vue component, call `useIntegrationSyncDashboardQuery` and pass it any options that fit your needs.
* When your component renders, `useIntegrationSyncDashboardQuery` returns an object from Apollo Client that contains result, loading and error properties
* you can use to render your UI.
*
* @param options that will be passed into the query, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/query.html#options;
*
* @example
* const { result, loading, error } = useIntegrationSyncDashboardQuery();
*/
export function useIntegrationSyncDashboardQuery(options: VueApolloComposable.UseQueryOptions<IntegrationSyncDashboardQuery, IntegrationSyncDashboardQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<IntegrationSyncDashboardQuery, IntegrationSyncDashboardQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<IntegrationSyncDashboardQuery, IntegrationSyncDashboardQueryVariables>> = {}) {
return VueApolloComposable.useQuery<IntegrationSyncDashboardQuery, IntegrationSyncDashboardQueryVariables>(IntegrationSyncDashboardDocument, {}, options);
}
export function useIntegrationSyncDashboardLazyQuery(options: VueApolloComposable.UseQueryOptions<IntegrationSyncDashboardQuery, IntegrationSyncDashboardQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<IntegrationSyncDashboardQuery, IntegrationSyncDashboardQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<IntegrationSyncDashboardQuery, IntegrationSyncDashboardQueryVariables>> = {}) {
return VueApolloComposable.useLazyQuery<IntegrationSyncDashboardQuery, IntegrationSyncDashboardQueryVariables>(IntegrationSyncDashboardDocument, {}, options);
}
export type IntegrationSyncDashboardQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<IntegrationSyncDashboardQuery, IntegrationSyncDashboardQueryVariables>;

41
app/pages/bonus-program.vue
View File

@@ -24,6 +24,12 @@ const availableBalance = computed(() => bonusAccount.value?.availableBalance ??
const canWithdraw = computed(() => availableBalance.value >= 100);
const selectedEntry = computed(() => String(route.query.entry || '').trim());
const rewardCards = [
{ id: 'ozon-3000', store: 'Ozon', title: 'Подарочная карта Ozon', amount: 3000 },
{ id: 'wildberries-4000', store: 'Wildberries', title: 'Подарочная карта Wildberries', amount: 4000 },
{ id: 'mvideo-5000', store: 'М.Видео', title: 'Подарочная карта М.Видео', amount: 5000 },
];
const entryTitle = computed(() => {
if (selectedEntry.value.includes('withdrawal')) {
return 'Вы открыли бонусную программу из уведомления о выводе.';
@@ -115,14 +121,11 @@ async function submitWithdrawal() {
</h1>
<p class="bonus-program-copy">
{{ entryTitle }}
Здесь отдельно живут баланс, начисления, выводы и переходы из бонусных уведомлений.
Здесь отдельно живут история начислений, магазин вознаграждений и выводы.
</p>
</div>
<div class="flex flex-wrap gap-3">
<NuxtLink to="/admin/settings/messages" class="bonus-program-ghost-button">
Message board
</NuxtLink>
<NuxtLink to="/notifications" class="bonus-program-ghost-button">
История уведомлений
</NuxtLink>
@@ -293,6 +296,36 @@ async function submitWithdrawal() {
</div>
</article>
</section>
<article class="bonus-program-panel">
<div class="flex items-center justify-between gap-3">
<div>
<p class="bonus-program-caption">Магазин</p>
<h2 class="mt-2 text-2xl font-black tracking-[-0.04em] text-white">Вознаграждения</h2>
</div>
<span class="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold uppercase tracking-[0.12em] text-white/55">
{{ rewardCards.length }}
</span>
</div>
<div class="mt-5 grid gap-3 md:grid-cols-3">
<article
v-for="reward in rewardCards"
:key="reward.id"
class="rounded-[24px] border border-white/10 bg-white/[0.04] p-4"
>
<p class="text-xs font-semibold uppercase tracking-[0.14em] text-white/45">
{{ reward.store }}
</p>
<h3 class="mt-3 text-lg font-bold text-white">
{{ reward.title }}
</h3>
<p class="mt-4 text-sm font-semibold text-white/70">
{{ formatMoney(reward.amount) }} бонусов
</p>
</article>
</div>
</article>
</template>
</section>
</template>

84
app/pages/orders/index.vue
View File

@@ -11,6 +11,8 @@ type OrderItem = MyOrdersQuery['myOrders'][number];
const allOrders = useQuery(MyOrdersDocument);
const search = ref('');
const statusFilter = ref<'ALL' | 'WAITING' | 'ACTIVE' | 'CLOSED'>('ALL');
const dateFrom = ref('');
const dateTo = ref('');
const ACTIVE_STATUSES = new Set(['NEW', 'MANAGER_PROCESSING', 'WAITING_DOUBLE_CONFIRM', 'CONFIRMED', 'IN_PROGRESS']);
const CLOSED_STATUSES = new Set(['COMPLETED', 'CLIENT_REJECTED', 'MANAGER_REJECTED', 'MANAGER_BLOCKED']);
@@ -28,6 +30,29 @@ function matchesFilter(order: OrderItem) {
return CLOSED_STATUSES.has(order.status);
}
function matchesDate(order: OrderItem) {
const orderTimestamp = new Date(order.createdAt).getTime();
if (!Number.isFinite(orderTimestamp)) {
return false;
}
if (dateFrom.value) {
const fromTimestamp = new Date(`${dateFrom.value}T00:00:00`).getTime();
if (Number.isFinite(fromTimestamp) && orderTimestamp < fromTimestamp) {
return false;
}
}
if (dateTo.value) {
const toTimestamp = new Date(`${dateTo.value}T23:59:59.999`).getTime();
if (Number.isFinite(toTimestamp) && orderTimestamp > toTimestamp) {
return false;
}
}
return true;
}
const filteredOrders = computed(() => {
const orders = allOrders.result.value?.myOrders ?? [];
const normalizedSearch = search.value.trim().toLowerCase();
@@ -42,7 +67,7 @@ const filteredOrders = computed(() => {
.toLowerCase();
const matchSearch = !normalizedSearch || text.includes(normalizedSearch);
return matchSearch && matchesFilter(order);
return matchSearch && matchesFilter(order) && matchesDate(order);
});
});
@@ -54,7 +79,7 @@ const {
visibleItems: visibleOrders,
} = useIncrementalList(filteredOrders, {
pageSize: 24,
resetKeys: [search, statusFilter],
resetKeys: [search, statusFilter, dateFrom, dateTo],
});
</script>
@@ -66,15 +91,52 @@ const {
search-placeholder="Номер заказа или товар"
>
<template #controls>
<select
v-model="statusFilter"
class="w-full rounded-full border border-[#d7e9de] bg-white px-4 py-3 text-sm font-semibold text-[#123824] outline-none transition focus:border-[#139957] focus:shadow-[0_0_0_3px_rgba(19,153,87,0.12)] md:w-64"
>
<option value="ALL">Все заказы</option>
<option value="WAITING">Ожидают подтверждения</option>
<option value="ACTIVE">Активные</option>
<option value="CLOSED">Закрытые</option>
</select>
<div class="flex w-full flex-col gap-3 md:w-auto md:flex-row md:flex-wrap md:justify-end">
<label class="flex items-center gap-2 rounded-full border border-[#d7e9de] bg-white px-4 py-3 text-sm font-semibold text-[#123824]">
<svg class="h-4 w-4 text-[#6b8576]" viewBox="0 0 20 20" fill="none">
<path d="M3.33334 5H16.6667" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M6.66666 10H13.3333" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M8.33334 15H11.6667" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
</svg>
<select
v-model="statusFilter"
class="min-w-0 bg-transparent outline-none"
>
<option value="ALL">Все заказы</option>
<option value="WAITING">Ожидают подтверждения</option>
<option value="ACTIVE">Активные</option>
<option value="CLOSED">Закрытые</option>
</select>
</label>
<label class="flex items-center gap-2 rounded-full border border-[#d7e9de] bg-white px-4 py-3 text-sm font-semibold text-[#123824]">
<svg class="h-4 w-4 text-[#6b8576]" viewBox="0 0 20 20" fill="none">
<rect x="3" y="4.5" width="14" height="12" rx="2.5" stroke="currentColor" stroke-width="1.6" />
<path d="M6 2.5V6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M14 2.5V6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M3 8.5H17" stroke="currentColor" stroke-width="1.6" />
</svg>
<input
v-model="dateFrom"
type="date"
class="min-w-0 bg-transparent outline-none"
>
</label>
<label class="flex items-center gap-2 rounded-full border border-[#d7e9de] bg-white px-4 py-3 text-sm font-semibold text-[#123824]">
<svg class="h-4 w-4 text-[#6b8576]" viewBox="0 0 20 20" fill="none">
<rect x="3" y="4.5" width="14" height="12" rx="2.5" stroke="currentColor" stroke-width="1.6" />
<path d="M6 2.5V6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M14 2.5V6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M3 8.5H17" stroke="currentColor" stroke-width="1.6" />
</svg>
<input
v-model="dateTo"
type="date"
class="min-w-0 bg-transparent outline-none"
>
</label>
</div>
</template>
</UiSectionSearchHero>

156
app/pages/settings-sync.vue Normal file
View File

@@ -0,0 +1,156 @@
<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import {
IntegrationSyncDashboardDocument,
type IntegrationSyncDashboardQuery,
} from '~/composables/graphql/generated';
definePageMeta({
middleware: ['manager-only'],
path: '/admin/settings/sync',
});
type SyncItem = IntegrationSyncDashboardQuery['integrationSyncDashboard']['items'][number];
const syncDashboardQuery = useQuery(IntegrationSyncDashboardDocument);
const dashboard = computed(() => syncDashboardQuery.result.value?.integrationSyncDashboard ?? null);
const syncItems = computed<SyncItem[]>(() => dashboard.value?.items ?? []);
function formatDateTime(value?: string | null) {
if (!value) {
return 'Пока нет';
}
return new Date(value).toLocaleString('ru-RU', {
day: '2-digit',
month: 'short',
hour: '2-digit',
minute: '2-digit',
});
}
</script>
<template>
<section class="space-y-6">
<div class="space-y-3">
<h1 class="text-3xl font-extrabold text-[#0f2f20]">1С</h1>
<p class="max-w-3xl text-sm leading-6 text-[#557562]">
Витрина контроля будущей интеграции с 1С. Здесь видно, какие контуры уже есть в данных,
когда в них была последняя активность и под какие workers мы потом соберём реальную синхронизацию.
</p>
</div>
<div v-if="syncDashboardQuery.loading.value" class="manager-empty-state">
Загружаем контур синхронизации...
</div>
<template v-else-if="dashboard">
<section class="grid gap-4 md:grid-cols-3">
<article class="surface-card rounded-[28px] bg-white p-5">
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Заказы</p>
<p class="mt-3 text-3xl font-black tracking-[-0.05em] text-[#123824]">
{{ dashboard.totalOrders }}
</p>
<p class="mt-2 text-sm text-[#557562]">
Последняя активность: {{ formatDateTime(dashboard.lastActivityAt) }}
</p>
</article>
<article class="surface-card rounded-[28px] bg-white p-5">
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Каталог</p>
<p class="mt-3 text-3xl font-black tracking-[-0.05em] text-[#123824]">
{{ dashboard.totalProducts }}
</p>
<p class="mt-2 text-sm text-[#557562]">
Активных позиций сейчас в базе
</p>
</article>
<article class="surface-card rounded-[28px] bg-white p-5">
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Клиенты</p>
<p class="mt-3 text-3xl font-black tracking-[-0.05em] text-[#123824]">
{{ dashboard.totalClients }}
</p>
<p class="mt-2 text-sm text-[#557562]">
Клиентских аккаунтов готовы к будущей связке с 1С
</p>
</article>
</section>
<section class="grid gap-4 xl:grid-cols-2">
<article
v-for="item in syncItems"
:key="item.id"
class="surface-card rounded-[28px] bg-white p-5"
>
<div class="flex flex-wrap items-start justify-between gap-3">
<div class="min-w-0">
<div class="flex flex-wrap items-center gap-2">
<span class="rounded-full bg-[#eef5f0] px-3 py-1 text-xs font-bold uppercase tracking-[0.12em] text-[#4e7060]">
{{ item.source }}
</span>
<span class="rounded-full bg-[#fff8dc] px-3 py-1 text-xs font-bold text-[#7a5b00]">
{{ item.status }}
</span>
</div>
<h2 class="mt-3 text-xl font-bold text-[#123824]">{{ item.title }}</h2>
<p class="mt-2 text-sm leading-6 text-[#557562]">{{ item.description }}</p>
</div>
<div class="rounded-[20px] bg-[#f7fbf8] px-4 py-3 text-right">
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">
Синхронизировано
</p>
<p class="mt-2 text-2xl font-black tracking-[-0.04em] text-[#123824]">
{{ item.syncedCount }}
</p>
</div>
</div>
<div class="mt-5 grid gap-3 md:grid-cols-2">
<div class="rounded-[20px] bg-[#f8fbf9] px-4 py-3">
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">
Последняя активность
</p>
<p class="mt-2 text-sm font-semibold text-[#123824]">
{{ formatDateTime(item.lastSyncedAt) }}
</p>
</div>
<div class="rounded-[20px] bg-[#f8fbf9] px-4 py-3">
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">
Следующий шаг
</p>
<p class="mt-2 text-sm font-semibold text-[#123824]">
{{ item.note }}
</p>
</div>
</div>
</article>
</section>
<article class="surface-card rounded-[28px] bg-white p-5">
<h2 class="text-xl font-bold text-[#123824]">Контур синхронизации</h2>
<div class="mt-4 grid gap-3 md:grid-cols-4">
<div class="rounded-[22px] bg-[#f8fbf9] px-4 py-4">
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Webhooks</p>
<p class="mt-2 text-sm leading-6 text-[#123824]">События создания и обновления заказов из 1С.</p>
</div>
<div class="rounded-[22px] bg-[#f8fbf9] px-4 py-4">
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Pull jobs</p>
<p class="mt-2 text-sm leading-6 text-[#123824]">Регулярная загрузка каталога, остатков и справочников.</p>
</div>
<div class="rounded-[22px] bg-[#f8fbf9] px-4 py-4">
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Workers</p>
<p class="mt-2 text-sm leading-6 text-[#123824]">Отдельные воркеры для заказов, статусов, каталога и складов.</p>
</div>
<div class="rounded-[22px] bg-[#f8fbf9] px-4 py-4">
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Журнал</p>
<p class="mt-2 text-sm leading-6 text-[#123824]">Контроль последнего sync, объёма данных и состояния канала.</p>
</div>
</div>
</article>
</template>
</section>
</template>