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

Simplify 1C sync status page

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-07 10:56:45 +07:00
parent 86eee08d87
commit a54b4f4405
1 changed files with 53 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
app/pages/settings-sync.vue
View File

@@ -17,6 +17,22 @@ const syncDashboardQuery = useQuery(IntegrationSyncDashboardDocument);
const dashboard = computed(() => syncDashboardQuery.result.value?.integrationSyncDashboard ?? null);
const syncItems = computed<SyncItem[]>(() => dashboard.value?.items ?? []);
function itemIsHealthy(item: SyncItem) {
return item.syncedCount > 0 && Boolean(item.lastSyncedAt);
}
function statusLabel(item: SyncItem) {
return itemIsHealthy(item) ? 'Работает' : 'Нет данных';
}
function syncSummary(item: SyncItem) {
if (!item.syncedCount) {
return 'Данных пока нет.';
}
return `Загружено ${item.syncedCount} записей.`;
}
function formatDateTime(value?: string | null) {
if (!value) {
return 'Пока нет';
@@ -33,124 +49,69 @@ function formatDateTime(value?: string | null) {
<template>
<section class="space-y-6">
<div class="space-y-3">
<div class="space-y-2">
<h1 class="text-3xl font-extrabold text-[#0f2f20]">1С</h1>
<p class="max-w-3xl text-sm leading-6 text-[#557562]">
Витрина контроля будущей интеграции с 1С. Здесь видно, какие контуры уже есть в данных,
когда в них была последняя активность и под какие workers мы потом соберём реальную синхронизацию.
<p class="text-sm leading-6 text-[#557562]">
Статус синхронизации по ключевым событиям.
</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">
<section class="space-y-4">
<article
v-for="item in syncItems"
:key="item.id"
class="surface-card rounded-[28px] bg-white p-5"
class="rounded-[28px] bg-white p-5 shadow-[0_18px_38px_rgba(18,56,36,0.08)]"
>
<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]">
<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">
<span
class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-bold uppercase tracking-[0.12em]"
:class="itemIsHealthy(item) ? 'bg-[#e8f5ec] text-[#1c6b45]' : 'bg-[#fff1ec] text-[#b54b2f]'"
>
<span
class="h-2.5 w-2.5 rounded-full"
:class="itemIsHealthy(item) ? 'bg-[#1c6b45]' : 'bg-[#d76745]'"
/>
{{ statusLabel(item) }}
</span>
<span class="text-xs font-semibold uppercase tracking-[0.12em] text-[#6a8a76]">
{{ 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">
<div class="space-y-1">
<h2 class="text-xl font-bold text-[#123824]">{{ item.title }}</h2>
<p class="text-sm text-[#557562]">
Последний run: {{ formatDateTime(item.lastSyncedAt) }}
</p>
</div>
<p class="text-sm leading-6 text-[#123824]">
{{ syncSummary(item) }}
</p>
<p class="text-sm leading-6 text-[#557562]">
{{ item.note }}
</p>
</div>
<div class="rounded-[20px] bg-[#f7fbf8] px-4 py-3 text-left md:min-w-[180px] md: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>