Add sync dashboard and date filters

app/pages/bonus-program.vue

@@ -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>

app/pages/orders/index.vue

@@ -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>
 

app/pages/settings-sync.vue

@@ -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>