refactor(ResourceStatsPage, TrafficDashboard): update button click handlers to use arrow functions for consistency and improve error handling by retaining previous data on fetch failure

This reverts commit 9f058e5811.

.gitea/workflows/docker-publish-fast.yml

@@ -56,4 +56,4 @@ jobs:
 
       - name: Trigger container update webhook
         run: |
-          curl -X POST -sS --fail https://docker.shts.su/api/webhooks/d3fd3b6a-c670-4035-9357-2fde8aa76b6e
+          curl -X POST -sS --fail "${{ secrets.portainer_webhook }}"

.gitea/workflows/docker-publish.yml

@@ -48,4 +48,4 @@ jobs:
 
       - name: Trigger container update webhook
         run: |
-          curl -X POST -sS --fail https://docker.shts.su/api/webhooks/d3fd3b6a-c670-4035-9357-2fde8aa76b6e
+          curl -X POST -sS --fail "${{ secrets.portainer_webhook }}"

README.md

@@ -109,7 +109,7 @@ BGP_BACKGROUND_URL=http://77.232.38.173:8080/api/update_bgp/background?api_key=d
 - GET `/api/servers/availability?ttlSeconds=60` — быстрый TCP‑чек доступности нод.
 - GET `/api/s3/last-modified` — метаданные S3 (etag/lastModified/contentLength) по ключевым файлам.
 - POST `/api/update-bgp/background` — прокси к фоновой задаче обновления BGP. Требует `BGP_BACKGROUND_URL` в `.env`.
-- Locks: GET `/api/locks/:resource`, POST `/api/locks/:resource`, DELETE `/api/locks/:resource`.
+- Locks: GET `/api/locks/:resource`, POST `/api/locks/:resource`, DELETE `/api/locks/:resource` (опциональные soft-locks для редактирования; доступ к S3 и долгие операции вроде speed-test блокировок не используют).
 - History: GET `/api/history/:resource`, POST `/api/history/:resource/rollback`.
 
 ## Frontend

backend/lib/validators.js

@@ -195,6 +195,22 @@ function sanitizeString(str) {
   return cleaned.trim();
 }
 
+/**
+ * Валидация идентификатора сервера для использования в S3-ключах и путях.
+ * Запрещает path traversal (.., /, \) и небезопасные символы.
+ * @param {string} serverId - идентификатор сервера
+ * @param {object} opts - { maxLength: number } (по умолчанию 128)
+ * @returns {boolean}
+ */
+function isValidServerId(serverId, opts = {}) {
+  if (!serverId || typeof serverId !== 'string') return false;
+  const maxLen = opts.maxLength != null ? opts.maxLength : 128;
+  const trimmed = serverId.trim();
+  if (trimmed.length === 0 || trimmed.length > maxLen) return false;
+  if (trimmed.includes('..') || trimmed.includes('/') || trimmed.includes('\\')) return false;
+  return /^[a-zA-Z0-9_.-]+$/.test(trimmed);
+}
+
 /**
  * Проверка на SQL injection паттерны
  * @param {string} str - строка для проверки
@@ -328,6 +344,7 @@ module.exports = {
   isValidASN,
   isValidCommunity,
   isValidGateway,
+  isValidServerId,
   sanitizeString,
   isSafeSQLString,
   isSafeXSSString,

backend/routes/mikrotikBackupRoutes.js

@@ -298,7 +298,7 @@ async function runBackupNow(req, res) {
       comment: 'Manual backup from UI (/api/mikrotik/backups/run)',
     });
 
-    return sendOk(res, {
+    return res.json({
       ok: true,
       key,
       serverId,

backend/routes/miscRoutes.js

@@ -2,7 +2,7 @@
  * Разные утилитарные роуты (auto-urls, history, s3 meta, availability, etc.)
  */
 
-const { s3, BUCKET_NAME, writeS3TextObject, headMeta, streamToString } = require('../services/s3Service');
+const { s3, BUCKET_NAME, writeS3TextObject, writeS3JsonObject, readS3TextObject, headMeta, streamToString } = require('../services/s3Service');
 const { sendError, sendOk } = require('../middleware/errorHandler');
 const { resourceToKey, toIso } = require('../utils/helpers');
 const { GetObjectCommand, PutObjectCommand, ListObjectVersionsCommand, CopyObjectCommand } = require('@aws-sdk/client-s3');
@@ -309,6 +309,255 @@ function tcpCheck(host, port, timeoutMs) {
   });
 }
 
+/** Измерить RTT (мс) до host:port по TCP. Возвращает число мс или null при ошибке/таймауте. */
+function measureTcpRtt(host, port = 443, timeoutMs = 6000) {
+  return new Promise((resolve) => {
+    const start = Date.now();
+    const socket = new net.Socket();
+    let settled = false;
+    const settle = (ms) => {
+      if (!settled) {
+        settled = true;
+        try { socket.destroy(); } catch (_) {}
+        resolve(ms);
+      }
+    };
+    socket.setTimeout(timeoutMs, () => settle(null));
+    socket.once('error', () => settle(null));
+    socket.connect(port, host, () => {
+      const ms = Math.round(Date.now() - start);
+      settle(ms);
+    });
+  });
+}
+
+/** Список целей для пинга по умолчанию (id, name, host, port, icon, color) */
+const PING_SERVICES_DEFAULT = [
+  { id: 'google', name: 'Google', host: '8.8.8.8', port: 443, icon: 'IconBrandGoogle', color: 'blue' },
+  { id: 'cloudflare', name: 'Cloudflare', host: '1.1.1.1', port: 443, icon: 'IconBrandCloudflare', color: 'orange' },
+  { id: 'yandex', name: 'Yandex', host: 'ya.ru', port: 443, icon: 'IconBrandYandex', color: 'red' },
+  { id: 'instagram', name: 'Instagram', host: 'instagram.com', port: 443, icon: 'IconBrandInstagram', color: 'pink' },
+];
+
+function getPingServicesListFromSettings(uiSettings) {
+  const raw = uiSettings.pingServicesList;
+  if (Array.isArray(raw) && raw.length > 0) {
+    return raw.map((s) => ({
+      id: String(s?.id ?? '').trim() || `svc-${Math.random().toString(36).slice(2, 9)}`,
+      name: String(s?.name ?? '').trim() || 'Сервис',
+      host: String(s?.host ?? '').trim() || '0.0.0.0',
+      port: Math.max(1, parseInt(s?.port, 10) || 443),
+      icon: typeof s?.icon === 'string' ? s.icon : 'IconWorld',
+      color: typeof s?.color === 'string' ? s.color : 'primary',
+    })).filter((s) => s.host !== '0.0.0.0');
+  }
+  return PING_SERVICES_DEFAULT;
+}
+
+/** Загрузить UI-настройки из S3 (для pingServicesSource и др.) */
+async function loadUiSettingsSync() {
+  try {
+    const data = await s3.send(new GetObjectCommand({ Bucket: BUCKET_NAME, Key: 'bgp_data/rt_ui_settings.json' }));
+    const jsonText = await streamToString(data.Body);
+    const parsed = JSON.parse(jsonText || '{}');
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+const PING_SERVICES_CACHE_KEY_PREFIX = 'ping-services/cache_';
+const PING_SERVICES_HISTORY_KEY_PREFIX = 'ping-services/history_';
+const PING_HISTORY_MAX = 30;
+
+function pingServicesStorageSuffix(viaRouter, serverId, gatewayIp) {
+  return (viaRouter ? 'router' : 'web') + '_' + String(serverId || '').replace(/[^a-zA-Z0-9.-]/g, '_') + '_' + String(gatewayIp || '').replace(/[^a-zA-Z0-9.]/g, '_');
+}
+
+/**
+ * Прочитать историю замеров пингов из S3. Формат: { byId: { [serviceId]: number[] } }.
+ */
+async function readPingServicesHistory(suffix) {
+  const key = PING_SERVICES_HISTORY_KEY_PREFIX + suffix;
+  try {
+    const raw = await readS3TextObject(key).catch(() => null);
+    if (!raw?.body) return {};
+    const parsed = JSON.parse(raw.body);
+    return parsed?.byId && typeof parsed.byId === 'object' ? parsed.byId : {};
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Записать историю замеров пингов в S3.
+ */
+async function writePingServicesHistory(suffix, byId) {
+  const key = PING_SERVICES_HISTORY_KEY_PREFIX + suffix;
+  await writeS3JsonObject(key, { byId }).catch((err) => console.warn('[ping-services] history write failed:', err?.message));
+}
+
+/**
+ * Обновить кеш пинг-сервисов: выполнить пинги по списку из настроек и записать результат в S3.
+ * Используется планировщиком и при промахе кеша в getPingServices.
+ * @returns {Promise<Record<string, { id: string, name: string, host: string, ms: number|null }>>} byId
+ */
+async function refreshPingServicesCache() {
+  const uiSettings = await loadUiSettingsSync();
+  const servicesList = getPingServicesListFromSettings(uiSettings);
+  const fallbackPayload = {};
+  servicesList.forEach((s) => { fallbackPayload[s.id] = { id: s.id, name: s.name, host: s.host, ms: null }; });
+
+  const viaRouter = String(uiSettings.pingServicesSource || 'web').toLowerCase() === 'router';
+  const cacheSeconds = Math.max(0, parseInt(uiSettings.pingServicesCacheSeconds, 10) || 0);
+
+  let serverId = null;
+  let gatewayIp = null;
+  if (viaRouter) {
+    const { readServersFromS3 } = require('./serversRoutes');
+    const servers = await readServersFromS3();
+    const routerServers = servers.filter(
+      (s) => s && (String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home')
+    );
+    serverId = (uiSettings.pingServicesServerId && String(uiSettings.pingServicesServerId).trim()) || (routerServers[0] && (routerServers[0].id || routerServers[0].dns || routerServers[0].ip));
+    gatewayIp = (uiSettings.pingServicesGatewayIp && String(uiSettings.pingServicesGatewayIp).trim()) || null;
+  }
+
+  const suffix = pingServicesStorageSuffix(viaRouter, serverId, gatewayIp);
+  const cacheKey = cacheSeconds > 0 ? PING_SERVICES_CACHE_KEY_PREFIX + suffix : null;
+
+  if (viaRouter) {
+    const { runPingViaRouter } = require('./mikrotikConfigRoutes');
+    const { readServersFromS3 } = require('./serversRoutes');
+    const servers = await readServersFromS3();
+    const routerServers = servers.filter(
+      (s) => s && (String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home')
+    );
+    let gatewayIpResolved = gatewayIp;
+    if (!gatewayIpResolved && serverId && routerServers.length > 0) {
+      const server = routerServers.find((s) => (s.id || s.dns || s.ip) === serverId) || routerServers[0];
+      const gateways = Array.isArray(server.gateways) ? server.gateways : [];
+      const primary = gateways.find((g) => g && g.primary) || gateways[0];
+      gatewayIpResolved = primary && (primary.ip || primary.remoteIp) ? (primary.ip || primary.remoteIp) : null;
+    }
+    if (!serverId) {
+      console.warn('[ping-services] router mode: no serverId (no jumphost/home in settings or in servers list)');
+      return fallbackPayload;
+    }
+    const results = await Promise.all(
+      servicesList.map(async (svc) => {
+        try {
+          const result = await runPingViaRouter(serverId, gatewayIpResolved || null, svc.host, 3);
+          const ms = typeof result.avgMs === 'number' ? Math.round(result.avgMs) : null;
+          return { id: svc.id, name: svc.name, host: svc.host, ms };
+        } catch (err) {
+          console.warn('[ping-services] runPingViaRouter failed for', svc.host, err?.message || err);
+          return { id: svc.id, name: svc.name, host: svc.host, ms: null };
+        }
+      })
+    );
+    const byId = {};
+    results.forEach((r) => { byId[r.id] = r; });
+    if (cacheKey) {
+      writeS3JsonObject(cacheKey, { byId, cachedAt: Date.now() }).catch((err) => console.warn('[ping-services] cache write failed:', err?.message));
+    }
+    const history = await readPingServicesHistory(suffix);
+    Object.keys(byId).forEach((id) => {
+      const ms = byId[id]?.ms;
+      if (typeof ms !== 'number') return;
+      const list = Array.isArray(history[id]) ? history[id] : [];
+      history[id] = [...list, ms].slice(-PING_HISTORY_MAX);
+    });
+    await writePingServicesHistory(suffix, history);
+    return byId;
+  }
+
+  const results = await Promise.all(
+    servicesList.map(async (svc) => {
+      const ms = await measureTcpRtt(svc.host, svc.port, 6000);
+      return { id: svc.id, name: svc.name, host: svc.host, ms };
+    })
+  );
+  const byId = {};
+  results.forEach((r) => { byId[r.id] = r; });
+  if (cacheKey) {
+    writeS3JsonObject(cacheKey, { byId, cachedAt: Date.now() }).catch((err) => console.warn('[ping-services] cache write failed:', err?.message));
+  }
+  const history = await readPingServicesHistory(suffix);
+  Object.keys(byId).forEach((id) => {
+    const ms = byId[id]?.ms;
+    if (typeof ms !== 'number') return;
+    const list = Array.isArray(history[id]) ? history[id] : [];
+    history[id] = [...list, ms].slice(-PING_HISTORY_MAX);
+  });
+  await writePingServicesHistory(suffix, history);
+  return byId;
+}
+
+// GET /api/ping-services-list — список сервисов для пинга из настроек (для дашборда и редактора)
+async function getPingServicesList(req, res) {
+  try {
+    const uiSettings = await loadUiSettingsSync();
+    const list = getPingServicesListFromSettings(uiSettings);
+    return res.json({ list });
+  } catch (e) {
+    console.error('ping-services-list error', e);
+    return res.json({ list: PING_SERVICES_DEFAULT });
+  }
+}
+
+// GET /api/ping-services — RTT до сервисов из списка (веб или через RouterOS по настройке)
+async function getPingServices(req, res) {
+  try {
+    const uiSettings = await loadUiSettingsSync();
+    const servicesList = getPingServicesListFromSettings(uiSettings);
+    const fallbackPayload = {};
+    servicesList.forEach((s) => { fallbackPayload[s.id] = { id: s.id, name: s.name, host: s.host, ms: null }; });
+
+    const viaRouter = String(uiSettings.pingServicesSource || 'web').toLowerCase() === 'router';
+    const cacheSeconds = Math.max(0, parseInt(uiSettings.pingServicesCacheSeconds, 10) || 0);
+
+    let serverId = null;
+    let gatewayIp = null;
+    if (viaRouter) {
+      const { readServersFromS3 } = require('./serversRoutes');
+      const servers = await readServersFromS3();
+      const routerServers = servers.filter(
+        (s) => s && (String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home')
+      );
+      serverId = (uiSettings.pingServicesServerId && String(uiSettings.pingServicesServerId).trim()) || (routerServers[0] && (routerServers[0].id || routerServers[0].dns || routerServers[0].ip));
+      gatewayIp = (uiSettings.pingServicesGatewayIp && String(uiSettings.pingServicesGatewayIp).trim()) || null;
+    }
+
+    const suffix = pingServicesStorageSuffix(viaRouter, serverId, gatewayIp);
+    const cacheKey = cacheSeconds > 0 ? PING_SERVICES_CACHE_KEY_PREFIX + suffix : null;
+    const skipCache = ['1', 'true', 'yes'].includes(String(req.query?.refresh || req.query?.nocache || '').toLowerCase());
+    if (cacheKey && !skipCache) {
+      try {
+        const raw = await readS3TextObject(cacheKey).catch(() => null);
+        if (raw?.body) {
+          const cached = JSON.parse(raw.body);
+          const cachedAt = typeof cached.cachedAt === 'number' ? cached.cachedAt : 0;
+          const ttlMs = cacheSeconds * 1000;
+          if (cachedAt && Date.now() - cachedAt < ttlMs && cached.byId && typeof cached.byId === 'object') {
+            const history = await readPingServicesHistory(suffix);
+            return res.json({ byId: cached.byId, history });
+          }
+        }
+      } catch (_) {}
+    }
+
+    const byId = await refreshPingServicesCache();
+    const history = await readPingServicesHistory(suffix);
+    return res.json({ byId, history });
+  } catch (e) {
+    console.error('ping-services error', e);
+    const fallback = {};
+    PING_SERVICES_DEFAULT.forEach((s) => { fallback[s.id] = { id: s.id, name: s.name, host: s.host, ms: null }; });
+    res.status(500).json({ byId: fallback, history: {} });
+  }
+}
+
 function anyTrue(promises) {
   return new Promise((resolve) => {
     if (!Array.isArray(promises) || promises.length === 0) return resolve(false);
@@ -524,5 +773,8 @@ module.exports = {
   getWsUrl,
   getUiSettings,
   postUiSettings,
+  getPingServicesList,
+  getPingServices,
+  refreshPingServicesCache,
 };
 

backend/routes/resourceStatsRoutes.js

@@ -0,0 +1,149 @@
+/**
+ * Роуты для сбора статистики ресурсов (RAM, CPU, HDD) с MikroTik RouterOS.
+ * GET /api/resources/stats — system/resource по каждому jumphost/home с учётами MikroTik.
+ */
+
+const { sendError } = require('../middleware/errorHandler');
+const { decrypt } = require('../utils/encryption');
+const { readServersFromS3 } = require('./serversRoutes');
+const { createRosClient } = require('../services/mikrotikApplyService');
+
+function getMikrotikCredentials(server) {
+  if (!server || (server.type !== 'jumphost' && server.type !== 'home')) return null;
+  const host = server.mikrotikHost || server.ip || server.dns;
+  if (!host) return null;
+  const port = server.mikrotikPort;
+  const restPort = (port === 80 || port === 443 || port === 8443) ? port : 80;
+  const user = server.mikrotikUser || 'admin';
+  let password = '';
+  if (server.encryptedMikrotikPassword) {
+    try {
+      password = decrypt(server.encryptedMikrotikPassword);
+    } catch (_) {
+      return null;
+    }
+  }
+  return { host, port: restPort, user, password, secure: false };
+}
+
+/**
+ * Парсинг system/resource в нормализованный объект для UI.
+ * MikroTik REST возвращает: total-memory, free-memory (bytes), cpu-load (%),
+ * total-hdd-space, free-hdd-space (bytes), uptime, version, board-name и др.
+ */
+function parseResource(raw) {
+  if (!raw || typeof raw !== 'object') return null;
+  const num = (v) => (v != null && v !== '' ? parseInt(String(v), 10) : null);
+  const totalMemory = num(raw['total-memory']);
+  const freeMemory = num(raw['free-memory']);
+  const usedMemory = totalMemory != null && freeMemory != null ? totalMemory - freeMemory : null;
+  const totalHdd = num(raw['total-hdd-space']);
+  const freeHdd = num(raw['free-hdd-space']);
+  const usedHdd = totalHdd != null && freeHdd != null ? totalHdd - freeHdd : null;
+  const cpuLoad = raw['cpu-load'] != null ? parseFloat(String(raw['cpu-load'])) : null;
+
+  return {
+    // RAM (bytes и проценты)
+    totalMemory: totalMemory,
+    freeMemory: freeMemory,
+    usedMemory: usedMemory,
+    memoryUsagePercent:
+      totalMemory != null && totalMemory > 0 && usedMemory != null
+        ? Math.round((usedMemory / totalMemory) * 100)
+        : null,
+    // CPU (%)
+    cpuLoad: cpuLoad != null ? Math.round(cpuLoad) : null,
+    cpuCount: num(raw['cpu-count']) ?? null,
+    cpuFrequency: raw['cpu-frequency'] != null ? String(raw['cpu-frequency']) : null,
+    cpu: raw.cpu != null ? String(raw.cpu) : null,
+    // HDD (bytes и проценты)
+    totalHddSpace: totalHdd,
+    freeHddSpace: freeHdd,
+    usedHddSpace: usedHdd,
+    hddUsagePercent:
+      totalHdd != null && totalHdd > 0 && usedHdd != null
+        ? Math.round((usedHdd / totalHdd) * 100)
+        : null,
+    // прочее
+    uptime: raw.uptime != null ? String(raw.uptime) : null,
+    version: raw.version != null ? String(raw.version) : null,
+    boardName: raw['board-name'] != null ? String(raw['board-name']) : null,
+    architectureName: raw['architecture-name'] != null ? String(raw['architecture-name']) : null,
+    platform: raw.platform != null ? String(raw.platform) : null,
+  };
+}
+
+/**
+ * GET /api/resources/stats
+ * По каждому jumphost/home с MikroTik — запрос system/resource, ответ с группировкой по роутерам.
+ */
+async function getResourceStats(req, res) {
+  try {
+    const servers = await readServersFromS3();
+    const routers = (Array.isArray(servers) ? servers : []).filter(
+      (s) =>
+        s &&
+        (String(s.type || '').toLowerCase() === 'jumphost' ||
+          String(s.type || '').toLowerCase() === 'home')
+    );
+
+    const results = await Promise.all(
+      routers.map(async (server) => {
+        const serverId = server.id || server.dns || server.ip;
+        const name = server.name || server.dns || server.ip || serverId;
+        const host = server.mikrotikHost || server.ip || server.dns;
+
+        const creds = getMikrotikCredentials(server);
+        if (!creds) {
+          return {
+            serverId,
+            name,
+            host,
+            groupKey: server.groupKey || null,
+            error: 'MikroTik API не настроен или нет пароля',
+            resource: null,
+          };
+        }
+        try {
+          const client = createRosClient(creds);
+          const apiRes = await client.print('system/resource');
+          const raw = apiRes?.data;
+          const single = Array.isArray(raw) ? raw[0] : raw;
+          const resource = parseResource(single);
+          return {
+            serverId,
+            name,
+            host,
+            groupKey: server.groupKey || null,
+            error: null,
+            resource,
+          };
+        } catch (err) {
+          const msg = err.response?.data?.message || err.message || 'Ошибка запроса к RouterOS';
+          return {
+            serverId,
+            name,
+            host,
+            groupKey: server.groupKey || null,
+            error: msg,
+            resource: null,
+          };
+        }
+      })
+    );
+
+    return res.json({ routers: results });
+  } catch (error) {
+    console.error('getResourceStats:', error);
+    return sendError(
+      res,
+      500,
+      error.message || 'Ошибка сбора статистики ресурсов',
+      'E_RESOURCE_STATS'
+    );
+  }
+}
+
+module.exports = {
+  getResourceStats,
+};

backend/routes/schedulerRoutes.js

@@ -0,0 +1,259 @@
+/**
+ * Роуты планировщика карты сети: настройки, логи, ручной запуск, кеш.
+ */
+
+const { sendError, sendOk } = require('../middleware/errorHandler');
+const { readS3TextObject, writeS3JsonObject } = require('../services/s3Service');
+const networkMapScheduler = require('../services/networkMapScheduler');
+const pingServicesScheduler = require('../services/pingServicesScheduler');
+const uptimeMonitorScheduler = require('../services/uptimeMonitorScheduler');
+
+const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
+const NETWORK_MAP_CACHE_KEY = 'network-map-cache/latest.json';
+
+const SCHEDULER_KEYS = [
+  'networkMapSchedulerEnabled',
+  'networkMapSchedulerIntervalMinutes',
+  'networkMapSchedulerRunPing',
+  'networkMapSchedulerRunSpeedTest',
+  'networkMapSchedulerLogMaxLines',
+];
+
+const PING_SERVICES_SCHEDULER_KEYS = [
+  'pingServicesSchedulerEnabled',
+  'pingServicesSchedulerIntervalMinutes',
+];
+
+const UPTIME_MONITOR_SCHEDULER_KEYS = [
+  'uptimeMonitorSchedulerEnabled',
+  'uptimeMonitorSchedulerIntervalMinutes',
+];
+
+async function readUiSettings() {
+  try {
+    const data = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
+    const parsed = JSON.parse(data?.body || '{}');
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch (_) {
+    return {};
+  }
+}
+
+/** GET /api/scheduler/network-map/settings */
+async function getNetworkMapSchedulerSettings(req, res) {
+  try {
+    const ui = await readUiSettings();
+    const settings = networkMapScheduler.getSettingsFromUiSettings(ui);
+    const nextRunAt = networkMapScheduler.getNextRunAt(settings);
+    return res.json({ ...settings, nextRunAt: nextRunAt || undefined });
+  } catch (e) {
+    console.error('[scheduler] getSettings', e);
+    return sendError(res, 500, 'Не удалось прочитать настройки', 'E_SCHEDULER');
+  }
+}
+
+/** PATCH /api/scheduler/network-map/settings - обновить только ключи планировщика в ui-settings */
+async function patchNetworkMapSchedulerSettings(req, res) {
+  try {
+    const body = req.body || {};
+    const current = await readUiSettings();
+    for (const key of SCHEDULER_KEYS) {
+      if (Object.prototype.hasOwnProperty.call(body, key)) {
+        current[key] = body[key];
+      }
+    }
+    if (Object.prototype.hasOwnProperty.call(body, 'networkMapSchedulerLogMaxLines')) {
+      networkMapScheduler.setLogMaxLines(body.networkMapSchedulerLogMaxLines);
+    }
+    await writeS3JsonObject(UI_SETTINGS_KEY, current);
+    const settings = networkMapScheduler.getSettingsFromUiSettings(current);
+    return res.json(settings);
+  } catch (e) {
+    console.error('[scheduler] patchSettings', e);
+    return sendError(res, 500, 'Не удалось сохранить настройки', 'E_SCHEDULER');
+  }
+}
+
+/** GET /api/scheduler/network-map/logs */
+async function getNetworkMapSchedulerLogs(req, res) {
+  try {
+    const lines = networkMapScheduler.getLogs();
+    return res.json({ lines });
+  } catch (e) {
+    console.error('[scheduler] getLogs', e);
+    return sendError(res, 500, 'Не удалось прочитать логи', 'E_SCHEDULER');
+  }
+}
+
+/** POST /api/scheduler/network-map/run-now - один запуск по текущим настройкам */
+async function runNetworkMapSchedulerNow(req, res) {
+  try {
+    const port = Number(process.env.PORT) || 3001;
+    const baseUrl = `http://127.0.0.1:${port}`;
+    const ui = await readUiSettings();
+    const settings = networkMapScheduler.getSettingsFromUiSettings(ui);
+
+    networkMapScheduler.runJob({
+      baseUrl,
+      runPing: settings.runPing,
+      runSpeedTest: settings.runSpeedTest,
+      trigger: 'manual',
+    }).catch((err) => {
+      console.error('[scheduler] run-now failed', err);
+      const msg = err?.message || String(err);
+      try {
+        networkMapScheduler.pushLog(`Ошибка выполнения: ${msg}`);
+      } catch (_) {}
+    });
+
+    return res.json({ ok: true, message: 'Запуск выполняется в фоне' });
+  } catch (e) {
+    console.error('[scheduler] run-now', e);
+    const msg = e?.message || String(e);
+    try {
+      networkMapScheduler.pushLog(`Ошибка запуска: ${msg}`);
+    } catch (_) {}
+    return sendError(res, 500, 'Не удалось запустить', 'E_SCHEDULER');
+  }
+}
+
+/** GET /api/network-map-cache - кеш пингов и скоростей для карты сети */
+async function getNetworkMapCache(req, res) {
+  try {
+    const data = await readS3TextObject(NETWORK_MAP_CACHE_KEY).catch(() => null);
+    if (!data?.body) {
+      return res.json({ pingMap: {}, speedMap: {}, updatedAt: null });
+    }
+    const parsed = JSON.parse(data.body);
+    return res.json({
+      pingMap: parsed.pingMap && typeof parsed.pingMap === 'object' ? parsed.pingMap : {},
+      speedMap: parsed.speedMap && typeof parsed.speedMap === 'object' ? parsed.speedMap : {},
+      updatedAt: typeof parsed.updatedAt === 'number' ? parsed.updatedAt : null,
+    });
+  } catch (e) {
+    console.error('[network-map-cache] get', e);
+    return res.json({ pingMap: {}, speedMap: {}, updatedAt: null });
+  }
+}
+
+// === Ping services scheduler ===
+
+/** GET /api/scheduler/ping-services/settings */
+async function getPingServicesSchedulerSettings(req, res) {
+  try {
+    const ui = await readUiSettings();
+    const settings = pingServicesScheduler.getSettingsFromUiSettings(ui);
+    const nextRunAt = pingServicesScheduler.getNextRunAt(settings);
+    return res.json({ ...settings, nextRunAt: nextRunAt || undefined });
+  } catch (e) {
+    console.error('[scheduler] getPingServicesSettings', e);
+    return sendError(res, 500, 'Не удалось прочитать настройки', 'E_SCHEDULER');
+  }
+}
+
+/** PATCH /api/scheduler/ping-services/settings */
+async function patchPingServicesSchedulerSettings(req, res) {
+  try {
+    const body = req.body || {};
+    const current = await readUiSettings();
+    for (const key of PING_SERVICES_SCHEDULER_KEYS) {
+      if (Object.prototype.hasOwnProperty.call(body, key)) {
+        current[key] = body[key];
+      }
+    }
+    await writeS3JsonObject(UI_SETTINGS_KEY, current);
+    const settings = pingServicesScheduler.getSettingsFromUiSettings(current);
+    return res.json(settings);
+  } catch (e) {
+    console.error('[scheduler] patchPingServicesSettings', e);
+    return sendError(res, 500, 'Не удалось сохранить настройки', 'E_SCHEDULER');
+  }
+}
+
+/** POST /api/scheduler/ping-services/run-now */
+async function runPingServicesSchedulerNow(req, res) {
+  try {
+    const { refreshPingServicesCache } = require('./miscRoutes');
+    refreshPingServicesCache().catch((err) => {
+      console.error('[scheduler] ping-services run-now failed', err);
+    });
+    return res.json({ ok: true, message: 'Обновление кеша пинг-сервисов запущено в фоне' });
+  } catch (e) {
+    console.error('[scheduler] ping-services run-now', e);
+    return sendError(res, 500, 'Не удалось запустить', 'E_SCHEDULER');
+  }
+}
+
+// === Uptime monitor scheduler ===
+
+/** GET /api/scheduler/uptime-monitor/settings */
+async function getUptimeMonitorSchedulerSettings(req, res) {
+  try {
+    const ui = await readUiSettings();
+    const settings = uptimeMonitorScheduler.getSettingsFromUiSettings(ui);
+    const nextRunAt = uptimeMonitorScheduler.getNextRunAt(settings);
+    return res.json({ ...settings, nextRunAt: nextRunAt || undefined });
+  } catch (e) {
+    console.error('[scheduler] getUptimeMonitorSettings', e);
+    return sendError(res, 500, 'Не удалось прочитать настройки', 'E_SCHEDULER');
+  }
+}
+
+/** PATCH /api/scheduler/uptime-monitor/settings */
+async function patchUptimeMonitorSchedulerSettings(req, res) {
+  try {
+    const body = req.body || {};
+    const current = await readUiSettings();
+    for (const key of UPTIME_MONITOR_SCHEDULER_KEYS) {
+      if (Object.prototype.hasOwnProperty.call(body, key)) {
+        current[key] = body[key];
+      }
+    }
+    await writeS3JsonObject(UI_SETTINGS_KEY, current);
+    const settings = uptimeMonitorScheduler.getSettingsFromUiSettings(current);
+    return res.json(settings);
+  } catch (e) {
+    console.error('[scheduler] patchUptimeMonitorSettings', e);
+    return sendError(res, 500, 'Не удалось сохранить настройки', 'E_SCHEDULER');
+  }
+}
+
+/** POST /api/scheduler/uptime-monitor/run-now */
+async function runUptimeMonitorSchedulerNow(req, res) {
+  try {
+    const port = Number(process.env.PORT) || 3001;
+    const baseUrl = `http://127.0.0.1:${port}`;
+    const resServers = await fetch(`${baseUrl}/api/servers`).catch(() => null);
+    const data = resServers?.ok ? await resServers.json() : [];
+    const servers = Array.isArray(data) ? data : [];
+    const jumphosts = servers.filter(
+      (s) => s && ['jumphost', 'home'].includes(String(s.type || '').toLowerCase())
+    );
+    const serverIds = jumphosts.map((s) => s.id || s.dns || s.ip).filter(Boolean);
+    for (const serverId of serverIds) {
+      fetch(`${baseUrl}/api/uptime/check`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ serverId }),
+      }).catch((err) => console.warn('[scheduler] uptime check', serverId, err?.message));
+    }
+    return res.json({ ok: true, message: 'Проверки Uptime Monitor запущены в фоне' });
+  } catch (e) {
+    console.error('[scheduler] uptime-monitor run-now', e);
+    return sendError(res, 500, 'Не удалось запустить', 'E_SCHEDULER');
+  }
+}
+
+module.exports = {
+  getNetworkMapSchedulerSettings,
+  patchNetworkMapSchedulerSettings,
+  getNetworkMapSchedulerLogs,
+  runNetworkMapSchedulerNow,
+  getNetworkMapCache,
+  getPingServicesSchedulerSettings,
+  patchPingServicesSchedulerSettings,
+  runPingServicesSchedulerNow,
+  getUptimeMonitorSchedulerSettings,
+  patchUptimeMonitorSchedulerSettings,
+  runUptimeMonitorSchedulerNow,
+};

backend/routes/serverConfigsRoutes.js

@@ -10,6 +10,7 @@ const { sendError, sendOk, checkIfNoneMatch } = require('../middleware/errorHand
 const { GetObjectCommand, HeadObjectCommand } = require('@aws-sdk/client-s3');
 const { streamToString } = require('../services/s3Service');
 const { getS3TextWithHeaders, getS3JsonWithHeaders } = require('../utils/s3Helpers');
+const { isValidServerId } = require('../lib/validators');
 
 const S3_KEY = 'servers.json';
 
@@ -143,9 +144,19 @@ const serverConfigsListRoutes = {
   post: postServerConfigsList
 };
 
+function validateServerIdParam(req, res) {
+  const serverId = req.params?.serverId;
+  if (!serverId || !isValidServerId(serverId)) {
+    sendError(res, 400, 'Invalid serverId: only alphanumeric, dot, dash, underscore allowed', 'E_BAD_REQUEST');
+    return null;
+  }
+  return serverId;
+}
+
 // GET /api/server-configs/:serverId (конкретная конфигурация)
 async function getServerConfig(req, res) {
-  const { serverId } = req.params;
+  const serverId = validateServerIdParam(req, res);
+  if (serverId === null) return;
   await getS3TextWithHeaders(
     `filter-manager/config-${serverId}.txt`,
     req,
@@ -159,7 +170,8 @@ async function getServerConfig(req, res) {
 
 // POST /api/server-configs/:serverId (сохранить конфигурацию)
 async function postServerConfig(req, res) {
-  const { serverId } = req.params;
+  const serverId = validateServerIdParam(req, res);
+  if (serverId === null) return;
   const { config } = req.body;
   
   if (!config) {
@@ -177,7 +189,8 @@ async function postServerConfig(req, res) {
 
 // DELETE /api/server-configs/:serverId (удалить только конфигурацию)
 async function deleteServerConfig(req, res) {
-  const { serverId } = req.params;
+  const serverId = validateServerIdParam(req, res);
+  if (serverId === null) return;
   
   try {
     await deleteS3Object(`filter-manager/config-${serverId}.txt`);
@@ -191,7 +204,8 @@ async function deleteServerConfig(req, res) {
 
 // DELETE /api/server-configs/:serverId/complete (удалить конфигурацию и фильтры)
 async function deleteServerComplete(req, res) {
-  const { serverId } = req.params;
+  const serverId = validateServerIdParam(req, res);
+  if (serverId === null) return;
   
   try {
     await Promise.allSettled([
@@ -208,7 +222,8 @@ async function deleteServerComplete(req, res) {
 
 // GET /api/server-filters/:serverId
 async function getServerFilters(req, res) {
-  const { serverId } = req.params;
+  const serverId = validateServerIdParam(req, res);
+  if (serverId === null) return;
   await getS3JsonWithHeaders(
     `filter-manager/server-filters-${serverId}.json`,
     req,
@@ -219,7 +234,8 @@ async function getServerFilters(req, res) {
 
 // POST /api/server-filters/:serverId
 async function postServerFilters(req, res) {
-  const { serverId } = req.params;
+  const serverId = validateServerIdParam(req, res);
+  if (serverId === null) return;
   const { filters } = req.body;
   
   if (!Array.isArray(filters)) {

backend/routes/serversRoutes.js

@@ -1,6 +1,6 @@
 /**
  * Кастомные роуты для серверов с поддержкой зашифрованных MikroTik учётных данных
- * Для jumphost: mikrotikHost, mikrotikPort, mikrotikUser, encryptedMikrotikPassword
+ * Для jumphost и home (входной роутер): mikrotikHost, mikrotikPort, mikrotikUser, encryptedMikrotikPassword
  */
 
 const { GetObjectCommand, PutObjectCommand, HeadObjectCommand } = require('@aws-sdk/client-s3');
@@ -80,10 +80,11 @@ async function getServers(req, res) {
     const servers = await readServersFromS3();
     const sanitized = servers.map(s => {
       const out = { ...s };
-      if (s.type === 'jumphost' && out.encryptedMikrotikPassword) {
+      const hasMikrotikApi = s.type === 'jumphost' || s.type === 'home';
+      if (hasMikrotikApi && out.encryptedMikrotikPassword) {
         out.hasMikrotikPassword = true;
         delete out.encryptedMikrotikPassword;
-      } else if (s.type === 'jumphost') {
+      } else if (hasMikrotikApi) {
         out.hasMikrotikPassword = false;
       }
       return out;
@@ -121,7 +122,7 @@ async function postServers(req, res) {
     const toSave = items.map((srv) => {
       const current = findCurrent(srv);
 
-      if (srv.type === 'jumphost') {
+      if (srv.type === 'jumphost' || srv.type === 'home') {
         const out = { ...srv };
         if (srv.mikrotikPassword !== undefined && srv.mikrotikPassword !== null && String(srv.mikrotikPassword).trim() !== '') {
           try {

backend/routes/trafficRoutes.js

@@ -0,0 +1,128 @@
+/**
+ * Роуты для сбора статистики трафика с MikroTik RouterOS (интерфейсы по jumphost).
+ * GET /api/traffic/interface-stats — статистика rx/tx по каждому интерфейсу для всех jumphost.
+ */
+
+const { sendError } = require('../middleware/errorHandler');
+const { decrypt } = require('../utils/encryption');
+const { readServersFromS3 } = require('./serversRoutes');
+const { createRosClient } = require('../services/mikrotikApplyService');
+
+/** Получить MikroTik credentials из сервера (jumphost или home) */
+function getMikrotikCredentials(server) {
+  if (!server || (server.type !== 'jumphost' && server.type !== 'home')) return null;
+  const host = server.mikrotikHost || server.ip || server.dns;
+  if (!host) return null;
+  const port = server.mikrotikPort;
+  const restPort = (port === 80 || port === 443 || port === 8443) ? port : 80;
+  const user = server.mikrotikUser || 'admin';
+  let password = '';
+  if (server.encryptedMikrotikPassword) {
+    try {
+      password = decrypt(server.encryptedMikrotikPassword);
+    } catch (_) {
+      return null;
+    }
+  }
+  return { host, port: restPort, user, password, secure: false };
+}
+
+// UI-настройки (общие с остальным UI)
+const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
+const INTERFACE_SPEED_CACHE_PREFIX = 'interface-speed-cache/';
+
+async function loadUiSettings() {
+  try {
+    const data = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
+    const parsed = JSON.parse(data?.body || '{}');
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch (_) {
+    return {};
+  }
+}
+
+function interfaceSpeedCacheKey(serverId, interfaceName) {
+  const key = `${serverId || ''}|${interfaceName || ''}`;
+  // Хэш не нужен: ключи короткие, но на всякий случай экранируем странные символы
+  return (
+    INTERFACE_SPEED_CACHE_PREFIX +
+    String(key)
+      .trim()
+      .replace(/[^a-zA-Z0-9_.:-]+/g, '_') +
+    '.json'
+  );
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * GET /api/traffic/interface-stats
+ * Возвращает по каждому jumphost список интерфейсов с rx-byte, tx-byte (из RouterOS REST /interface).
+ */
+async function getInterfaceStats(req, res) {
+  try {
+    const servers = await readServersFromS3();
+    const jumphosts = (Array.isArray(servers) ? servers : []).filter(
+      (s) => s && (String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home')
+    );
+
+    const results = await Promise.all(
+      jumphosts.map(async (server) => {
+        const creds = getMikrotikCredentials(server);
+        if (!creds) {
+          return {
+            serverId: server.id,
+            name: server.name || server.dns || server.ip || server.id,
+            host: server.mikrotikHost || server.ip || server.dns,
+            error: 'MikroTik API не настроен или нет пароля',
+            interfaces: [],
+          };
+        }
+        try {
+          const client = createRosClient(creds);
+          const apiRes = await client.print('interface');
+          const raw = apiRes?.data;
+          const list = Array.isArray(raw) ? raw : raw ? [raw] : [];
+          const interfaces = list.map((iface) => {
+            const rx = iface['rx-byte'] != null ? parseInt(String(iface['rx-byte']), 10) : 0;
+            const tx = iface['tx-byte'] != null ? parseInt(String(iface['tx-byte']), 10) : 0;
+            const total = rx + tx;
+            return {
+              name: iface.name != null ? String(iface.name) : '',
+              type: iface.type != null ? String(iface.type) : '',
+              rxBytes: Number.isNaN(rx) ? 0 : rx,
+              txBytes: Number.isNaN(tx) ? 0 : tx,
+              totalBytes: Number.isNaN(total) ? 0 : total,
+            };
+          }).filter((i) => i.name && i.totalBytes >= 0);
+          return {
+            serverId: server.id,
+            name: server.name || server.dns || server.ip || server.id,
+            host: server.mikrotikHost || server.ip || server.dns,
+            interfaces,
+          };
+        } catch (err) {
+          const msg = err.response?.data?.message || err.message || 'Ошибка запроса к RouterOS';
+          return {
+            serverId: server.id,
+            name: server.name || server.dns || server.ip || server.id,
+            host: server.mikrotikHost || server.ip || server.dns,
+            error: msg,
+            interfaces: [],
+          };
+        }
+      })
+    );
+
+    return res.json({ jumphosts: results });
+  } catch (error) {
+    console.error('getInterfaceStats:', error);
+    return sendError(res, 500, error.message || 'Ошибка сбора статистики трафика', 'E_TRAFFIC');
+  }
+}
+
+module.exports = {
+  getInterfaceStats,
+};

backend/server.js

@@ -29,7 +29,13 @@ const miscRoutes = require('./routes/miscRoutes');
 const ipsecPasswordsRoutes = require('./routes/ipsecPasswordsRoutes');
 const mikrotikConfigRoutes = require('./routes/mikrotikConfigRoutes');
 const mikrotikBackupRoutes = require('./routes/mikrotikBackupRoutes');
+const trafficRoutes = require('./routes/trafficRoutes');
+const resourceStatsRoutes = require('./routes/resourceStatsRoutes');
 const { initMikrotikBackupScheduler } = require('./services/mikrotikBackupScheduler');
+const { initNetworkMapScheduler } = require('./services/networkMapScheduler');
+const { initPingServicesScheduler } = require('./services/pingServicesScheduler');
+const { initUptimeMonitorScheduler } = require('./services/uptimeMonitorScheduler');
+const schedulerRoutes = require('./routes/schedulerRoutes');
 
 const app = express();
 const port = Number(process.env.PORT) || 3001;
@@ -439,6 +445,8 @@ app.post('/api/update-bgp/background', bgpUpdateLimiter, miscRoutes.updateBgpBac
 app.get('/api/ws/url', miscRoutes.getWsUrl);
 app.get('/api/ui-settings', miscRoutes.getUiSettings);
 app.post('/api/ui-settings', miscRoutes.postUiSettings);
+app.get('/api/ping-services-list', miscRoutes.getPingServicesList);
+app.get('/api/ping-services', miscRoutes.getPingServices);
 
 // === IPSEC PASSWORDS ===
 app.get('/api/ipsec-passwords', ipsecPasswordsRoutes.getIpsecPasswords);
@@ -456,8 +464,24 @@ app.post('/api/mikrotik/test-connection', mikrotikConfigRoutes.testMikrotikConne
 app.get('/api/mikrotik/ping', (req, res) => res.json({ ok: true, ts: Date.now() }));
 // Реальный ping через RouterOS по интерфейсу/шлюзу
 app.post('/api/mikrotik/ping', writeLimiter, mikrotikConfigRoutes.pingViaInterface);
+// Traceroute через RouterOS с выбором сервера и шлюза
+app.post('/api/mikrotik/traceroute', writeLimiter, mikrotikConfigRoutes.tracerouteViaGateway);
+// Speed-test (TCP upload/download) между MikroTik по туннельному интерфейсу
+app.post('/api/mikrotik/speed-test', writeLimiter, mikrotikConfigRoutes.speedTestViaTunnel);
 app.post('/api/mikrotik/apply', mikrotikConfigRoutes.applyMikrotikConfig);
 app.post('/api/mikrotik/run-script', mikrotikConfigRoutes.runScript);
+app.get('/api/mikrotik/address-lists', mikrotikConfigRoutes.getAddressLists);
+app.post('/api/mikrotik/address-lists/apply-summary', writeLimiter, mikrotikConfigRoutes.applyAddressListSummary);
+
+// === UPTIME MONITOR (проверка доступности: http / internal-ping / external-ping из настроек) ===
+app.get('/api/uptime/cache', mikrotikConfigRoutes.getUptimeCache);
+app.post('/api/uptime/check', writeLimiter, mikrotikConfigRoutes.uptimeCheck);
+
+// === TRAFFIC STATS (MikroTik interfaces by jumphost) ===
+app.get('/api/traffic/interface-stats', trafficRoutes.getInterfaceStats);
+
+// === RESOURCE STATS (RAM/CPU/HDD по роутерам) ===
+app.get('/api/resources/stats', resourceStatsRoutes.getResourceStats);
 
 // === MIKROTIK BACKUPS (S3) ===
 app.post('/api/mikrotik/backups', writeLimiter, mikrotikBackupRoutes.createBackup);
@@ -466,6 +490,25 @@ app.get('/api/mikrotik/backups/item', mikrotikBackupRoutes.getBackup);
 app.post('/api/mikrotik/backups/diff', mikrotikBackupRoutes.diffBackups);
 app.post('/api/mikrotik/backups/run', writeLimiter, mikrotikBackupRoutes.runBackupNow);
 
+// === NETWORK MAP CACHE (для быстрой загрузки карты сети) ===
+app.get('/api/network-map-cache', schedulerRoutes.getNetworkMapCache);
+
+// === SCHEDULER (карта сети: пинг и скорость по расписанию) ===
+app.get('/api/scheduler/network-map/settings', schedulerRoutes.getNetworkMapSchedulerSettings);
+app.patch('/api/scheduler/network-map/settings', writeLimiter, schedulerRoutes.patchNetworkMapSchedulerSettings);
+app.get('/api/scheduler/network-map/logs', schedulerRoutes.getNetworkMapSchedulerLogs);
+app.post('/api/scheduler/network-map/run-now', writeLimiter, schedulerRoutes.runNetworkMapSchedulerNow);
+
+// === SCHEDULER (пинг сервисов: обновление кеша по расписанию, по умолчанию каждые 2 мин) ===
+app.get('/api/scheduler/ping-services/settings', schedulerRoutes.getPingServicesSchedulerSettings);
+app.patch('/api/scheduler/ping-services/settings', writeLimiter, schedulerRoutes.patchPingServicesSchedulerSettings);
+app.post('/api/scheduler/ping-services/run-now', writeLimiter, schedulerRoutes.runPingServicesSchedulerNow);
+
+// === SCHEDULER (Uptime Monitor: проверки по расписанию, по умолчанию каждые 2 мин) ===
+app.get('/api/scheduler/uptime-monitor/settings', schedulerRoutes.getUptimeMonitorSchedulerSettings);
+app.patch('/api/scheduler/uptime-monitor/settings', writeLimiter, schedulerRoutes.patchUptimeMonitorSchedulerSettings);
+app.post('/api/scheduler/uptime-monitor/run-now', writeLimiter, schedulerRoutes.runUptimeMonitorSchedulerNow);
+
 // === MIKROTIK VALIDATION ===
 app.post('/api/mikrotik/validate', async (req, res) => {
     const { config } = req.body;
@@ -493,12 +536,25 @@ app.use(errorHandler);
 
 app.listen(port, () => {
   console.log(`Server is running on http://localhost:${port}`);
+  try {
+    initMikrotikBackupScheduler(logger);
+  } catch (e) {
+    logger.error({ component: 'mikrotik-backup', err: e && e.message }, 'Failed to start backup scheduler');
+  }
+  try {
+    initNetworkMapScheduler(logger, port);
+  } catch (e) {
+    logger.error({ component: 'network-map-scheduler', err: e && e.message }, 'Failed to start network map scheduler');
+  }
+  try {
+    initPingServicesScheduler(logger);
+  } catch (e) {
+    logger.error({ component: 'ping-services-scheduler', err: e && e.message }, 'Failed to start ping services scheduler');
+  }
+  try {
+    initUptimeMonitorScheduler(logger, port);
+  } catch (e) {
+    logger.error({ component: 'uptime-monitor-scheduler', err: e && e.message }, 'Failed to start uptime monitor scheduler');
+  }
 });
 
-// Запускаем планировщик автоматического бэкапа MikroTik (если включен через ENV)
-try {
-  initMikrotikBackupScheduler(logger);
-} catch (e) {
-  logger.error({ component: 'mikrotik-backup', err: e && e.message }, 'Failed to start backup scheduler');
-}
-

backend/services/mikrotikBackupScheduler.js

@@ -160,21 +160,19 @@ function initMikrotikBackupScheduler(logger) {
     Number(process.env.MIKROTIK_BACKUP_INTERVAL_MINUTES || DEFAULT_INTERVAL_MIN) || DEFAULT_INTERVAL_MIN;
   const intervalMs = Math.max(5, intervalMin) * 60 * 1000;
 
+  const intervalMinutes = intervalMs / 60000;
   log.info(
     {
       component: 'mikrotik-backup',
-      intervalMinutes: intervalMs / 60000,
+      intervalMinutes,
+      nextRunInMinutes: intervalMinutes,
       servers: process.env.MIKROTIK_BACKUP_SERVERS || 'all jumphost',
     },
-    'Starting automatic MikroTik backup scheduler',
+    'Automatic MikroTik backup scheduler started (no backup on startup, first run in %d min)',
+    intervalMinutes,
   );
 
-  // Первый запуск с небольшой задержкой, чтобы сервер успел подняться
+  // Только по расписанию — без бэкапа при перезапуске контейнера
-  setTimeout(() => {
-    runBackupOnce(log);
-  }, 30_000);
-
-  // Периодический запуск
   setInterval(() => {
     runBackupOnce(log);
   }, intervalMs);

backend/services/networkMapScheduler.js

@@ -0,0 +1,460 @@
+/**
+ * Планировщик пингов и замеров скорости для карты сети.
+ * Периодически вызывает пинг и speed-test по связям из network-config,
+ * сохраняет результаты в S3 (кеш по рёбрам + агрегат network-map-cache/latest.json).
+ * Логи пишет в кольцевой буфер для просмотра в UI.
+ */
+
+const { readServersFromS3 } = require('../routes/serversRoutes');
+const { loadNetworkConfig } = require('../routes/mikrotikConfigRoutes');
+const { readS3TextObject, writeS3JsonObject } = require('./s3Service');
+
+const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
+const NETWORK_MAP_CACHE_KEY = 'network-map-cache/latest.json';
+
+const DEFAULT_INTERVAL_MINUTES = 5;
+const DEFAULT_LOG_MAX_LINES = 500;
+
+/** Кольцевой буфер логов */
+class LogBuffer {
+  constructor(maxLines = 500) {
+    this.maxLines = Math.max(100, maxLines);
+    this.lines = [];
+    this.index = 0;
+  }
+
+  push(line) {
+    const ts = new Date().toISOString();
+    const entry = `${ts} ${line}`;
+    if (this.lines.length < this.maxLines) {
+      this.lines.push(entry);
+    } else {
+      this.lines[this.index] = entry;
+      this.index = (this.index + 1) % this.maxLines;
+    }
+  }
+
+  getLines() {
+    if (this.lines.length < this.maxLines) return [...this.lines];
+    return [...this.lines.slice(this.index), ...this.lines.slice(0, this.index)];
+  }
+
+  setMaxLines(n) {
+    this.maxLines = Math.max(100, n);
+    if (this.lines.length > this.maxLines) {
+      this.lines = this.getLines().slice(-this.maxLines);
+      this.index = 0;
+    }
+  }
+}
+
+const logBuffer = new LogBuffer(DEFAULT_LOG_MAX_LINES);
+
+async function loadUiSettings() {
+  try {
+    const data = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
+    const parsed = JSON.parse(data?.body || '{}');
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch (_) {
+    return {};
+  }
+}
+
+/** Построить список связей как в NetworkMapDashboard (tunnelInterfaces → connections) */
+async function buildConnections() {
+  const [serversList, config, uiSettings] = await Promise.all([
+    readServersFromS3(),
+    loadNetworkConfig(),
+    loadUiSettings(),
+  ]);
+  const servers = Array.isArray(serversList) ? serversList : [];
+  const tunnelInterfaces = Array.isArray(config.tunnelInterfaces) ? config.tunnelInterfaces : [];
+
+  const getServer = (serverId) =>
+    servers.find((s) => s.id === serverId || s.ip === serverId || s.dns === serverId);
+
+  const connList = [];
+  for (const iface of tunnelInterfaces) {
+    if (!iface.serverId || !iface.serverId2) continue;
+    const s1 = getServer(iface.serverId);
+    const s2 = getServer(iface.serverId2);
+    if (!s1 || !s2 || s1.ip === s2.ip) continue;
+    const s1Key = s1.id || s1.dns || s1.ip;
+    const s2Key = s2.id || s2.dns || s2.ip;
+    if (!s1Key || !s2Key) continue;
+    const isJumphost1 = s1 && ['jumphost', 'home'].includes(String(s1.type || '').toLowerCase());
+    const isJumphost2 = s2 && ['jumphost', 'home'].includes(String(s2.type || '').toLowerCase());
+    connList.push({
+      from: s1.ip,
+      to: s2.ip,
+      fromKey: s1Key,
+      toKey: s2Key,
+      internalFromTo: iface.remoteIp || null,
+      internalToFrom: iface.localIp || null,
+      speedTestServerId: isJumphost1 ? s1Key : isJumphost2 ? s2Key : null,
+      interfaceName: iface.name || null,
+    });
+  }
+  return { connections: connList, servers, uiSettings };
+}
+
+function edgePingKey(a, b) {
+  return [String(a), String(b)].sort().join(':');
+}
+
+function speedKey(key1, key2) {
+  return [String(key1), String(key2)].sort().join(':');
+}
+
+/** Параллельно с лимитом */
+async function runWithLimit(tasks, limit = 4) {
+  const results = [];
+  let index = 0;
+  async function runNext() {
+    const i = index++;
+    if (i >= tasks.length) return;
+    try {
+      results[i] = { value: await tasks[i]() };
+    } catch (err) {
+      results[i] = { error: err };
+    }
+    await runNext();
+  }
+  const workers = Array.from({ length: Math.min(limit, tasks.length) }, () => runNext());
+  await Promise.all(workers);
+  return results;
+}
+
+/** Один тест на ноду в момент времени */
+async function runWithOnePerKey(tasks, getKey) {
+  const n = tasks.length;
+  const keyToIndices = new Map();
+  for (let i = 0; i < n; i++) {
+    const k = String(getKey(i));
+    if (!keyToIndices.has(k)) keyToIndices.set(k, []);
+    keyToIndices.get(k).push(i);
+  }
+  const results = [];
+  for (let i = 0; i < n; i++) results[i] = null;
+  const keys = Array.from(keyToIndices.keys());
+  let round = 0;
+  while (true) {
+    const batch = [];
+    for (const k of keys) {
+      const indices = keyToIndices.get(k);
+      if (round < indices.length) batch.push(indices[round]);
+    }
+    if (batch.length === 0) break;
+    await Promise.all(
+      batch.map(async (i) => {
+        try {
+          results[i] = { value: await tasks[i]() };
+        } catch (err) {
+          results[i] = { error: err };
+        }
+      })
+    );
+    round++;
+  }
+  return results;
+}
+
+/**
+ * Выполнить одну итерацию: пинг и speed-test по связям, записать кеш и логи.
+ * @param {object} opts - { baseUrl, runPing, runSpeedTest, log }
+ */
+async function runJob(opts) {
+  const { baseUrl, runPing = true, runSpeedTest = true, log = (msg) => logBuffer.push(msg), trigger = 'scheduled' } = opts;
+  const pingMap = {};
+  const speedMap = {};
+
+  log(trigger === 'manual' ? '--- Ручной запуск ---' : '--- Запуск по расписанию ---');
+
+  try {
+    const { connections, servers } = await buildConnections();
+    if (connections.length === 0) {
+      log('Нет связей в network-config (tunnelInterfaces).');
+      await writeCache(pingMap, speedMap);
+      return { pingMap, speedMap };
+    }
+
+    log(`Связей: ${connections.length}. Пинг: ${runPing ? 'да' : 'нет'}, Скорость: ${runSpeedTest ? 'да' : 'нет'}`);
+
+    if (runPing) {
+      const pingTasks = [];
+      for (const c of connections) {
+        const from = String(c.from);
+        const to = String(c.to);
+        if (!from || !to || from === to) continue;
+        const srcFrom = servers.find((s) => s.ip === from);
+        const srcTo = servers.find((s) => s.ip === to);
+        const canPingFrom = srcFrom && ['jumphost', 'home'].includes(String(srcFrom.type || '').toLowerCase()) && c.internalFromTo;
+        const canPingTo = srcTo && ['jumphost', 'home'].includes(String(srcTo.type || '').toLowerCase()) && c.internalToFrom;
+
+        if (canPingFrom) {
+          pingTasks.push(async () => {
+            const ekey = edgePingKey(from, to);
+            try {
+              const res = await fetch(`${baseUrl}/api/mikrotik/ping`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                  serverId: c.fromKey,
+                  target: c.internalFromTo,
+                  gatewayIp: c.internalFromTo,
+                  count: 3,
+                  forceRefresh: true,
+                }),
+              });
+              const data = await res.json().catch(() => ({}));
+              const ms = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
+              pingMap[ekey] = ms;
+              const errMsg = !res.ok ? (data?.message || `HTTP ${res.status}`) : null;
+              log(`Пинг ${from} → ${to}: ${ms != null ? ms + ' ms' : errMsg || 'ошибка'}`);
+              return ms;
+            } catch (e) {
+              pingMap[ekey] = null;
+              log(`Пинг ${from} → ${to}: ошибка ${e?.message || e}`);
+              return null;
+            }
+          });
+        } else if (canPingTo) {
+          pingTasks.push(async () => {
+            const ekey = edgePingKey(from, to);
+            try {
+              const res = await fetch(`${baseUrl}/api/mikrotik/ping`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                  serverId: c.toKey,
+                  target: c.internalToFrom,
+                  gatewayIp: c.internalToFrom,
+                  count: 3,
+                  forceRefresh: true,
+                }),
+              });
+              const data = await res.json().catch(() => ({}));
+              const ms = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
+              pingMap[ekey] = ms;
+              const errMsg2 = !res.ok ? (data?.message || `HTTP ${res.status}`) : null;
+              log(`Пинг ${to} → ${from}: ${ms != null ? ms + ' ms' : errMsg2 || 'ошибка'}`);
+              return ms;
+            } catch (e) {
+              pingMap[ekey] = null;
+              log(`Пинг ${to} → ${from}: ошибка ${e?.message || e}`);
+              return null;
+            }
+          });
+        }
+      }
+      await runWithLimit(pingTasks, 4);
+    }
+
+    if (runSpeedTest) {
+      // Таймаут запроса: замер может долго идти на медленных каналах (download + upload по durationSeconds каждый)
+      const SPEED_TEST_REQUEST_MS = 300000; // 5 мин
+      const withSpeed = connections.filter((c) => c.speedTestServerId && c.interfaceName);
+      const speedTasks = withSpeed.map((c) => async () => {
+        const key = speedKey(c.fromKey, c.toKey);
+        const server = servers.find((s) => (s.id || s.dns || s.ip) === c.speedTestServerId);
+        const serverLabel = server ? (server.dns || server.ip || server.id) : c.speedTestServerId;
+        const speedLabel = `${serverLabel} / ${c.interfaceName}`;
+        const ac = new AbortController();
+        const timeoutId = setTimeout(() => ac.abort(), SPEED_TEST_REQUEST_MS);
+        try {
+          const res = await fetch(`${baseUrl}/api/mikrotik/speed-test`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              serverId: c.speedTestServerId,
+              interfaceName: c.interfaceName,
+              forceRefresh: true,
+            }),
+            signal: ac.signal,
+          });
+          clearTimeout(timeoutId);
+          const data = await res.json().catch(() => ({}));
+          if (data?.ok && (data.tcpDownloadBps != null || data.tcpUploadBps != null)) {
+            speedMap[key] = {
+              tcpDownloadBps: data.tcpDownloadBps,
+              tcpUploadBps: data.tcpUploadBps,
+              cached: data.cached === true,
+              durationSeconds: data.durationSeconds,
+            };
+            const down = data.tcpDownloadBps != null ? (data.tcpDownloadBps / 1e6).toFixed(1) : '—';
+            const up = data.tcpUploadBps != null ? (data.tcpUploadBps / 1e6).toFixed(1) : '—';
+            log(`Скорость ${speedLabel}: ↓${down} ↑${up} Mbps`);
+            return speedMap[key];
+          }
+          speedMap[key] = null;
+          const speedErr = !res.ok ? (data?.message || `HTTP ${res.status}`) : 'нет данных';
+          log(`Скорость ${speedLabel}: ${speedErr}`);
+          return null;
+        } catch (e) {
+          clearTimeout(timeoutId);
+          speedMap[key] = null;
+          const msg = e?.message || e;
+          const isAbort = String(msg).toLowerCase().includes('abort');
+          log(`Скорость ${speedLabel}: ошибка ${isAbort ? 'таймаут или отмена запроса' : msg}`);
+          return null;
+        }
+      });
+      // В один момент — только один тест на один сервер назначения (удалённый конец туннеля),
+      // иначе несколько замеров к одному хостингу делят канал и дают заниженные результаты
+      await runWithOnePerKey(speedTasks, (i) => {
+        const c = withSpeed[i];
+        return c.speedTestServerId === c.fromKey ? c.toKey : c.fromKey;
+      });
+    }
+
+    await writeCache(pingMap, speedMap);
+    log('Кеш карты сети обновлён.');
+  } catch (err) {
+    log(`Ошибка: ${err?.message || err}`);
+  }
+
+  return { pingMap, speedMap };
+}
+
+async function writeCache(pingMap, speedMap) {
+  try {
+    await writeS3JsonObject(NETWORK_MAP_CACHE_KEY, {
+      pingMap: pingMap || {},
+      speedMap: speedMap || {},
+      updatedAt: Date.now(),
+    });
+  } catch (e) {
+    logBuffer.push(`Запись кеша в S3 не удалась: ${e?.message || e}`);
+  }
+}
+
+let schedulerTimer = null;
+/** Время последнего запуска по расписанию (для расчёта следующего) */
+let lastScheduledRunAt = null;
+
+function getSettingsFromUiSettings(uiSettings) {
+  return {
+    enabled: Boolean(uiSettings.networkMapSchedulerEnabled),
+    intervalMinutes: Math.max(1, Math.min(1440, parseInt(uiSettings.networkMapSchedulerIntervalMinutes, 10) || DEFAULT_INTERVAL_MINUTES)),
+    runPing: uiSettings.networkMapSchedulerRunPing !== false,
+    runSpeedTest: uiSettings.networkMapSchedulerRunSpeedTest !== false,
+    logMaxLines: Math.max(100, Math.min(2000, parseInt(uiSettings.networkMapSchedulerLogMaxLines, 10) || DEFAULT_LOG_MAX_LINES)),
+  };
+}
+
+/**
+ * Запустить планировщик (setInterval).
+ * @param {object} logger - pino logger
+ * @param {number} port - порт сервера для вызова API
+ */
+function initNetworkMapScheduler(logger, port) {
+  const log = logger || console;
+  const baseUrl = `http://127.0.0.1:${port}`;
+
+  async function tick() {
+    lastScheduledRunAt = Date.now();
+    let uiSettings;
+    try {
+      const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
+      uiSettings = JSON.parse(raw?.body || '{}') || {};
+    } catch (_) {
+      return;
+    }
+    const settings = getSettingsFromUiSettings(uiSettings);
+    if (!settings.enabled) return;
+
+    logBuffer.setMaxLines(settings.logMaxLines);
+    logBuffer.push('--- Запуск по расписанию ---');
+    runJob({
+      baseUrl,
+      runPing: settings.runPing,
+      runSpeedTest: settings.runSpeedTest,
+      log: (msg) => {
+        logBuffer.push(msg);
+        log.info({ component: 'network-map-scheduler' }, msg);
+      },
+    }).catch((err) => {
+      logBuffer.push(`Ошибка: ${err?.message || err}`);
+      log.error({ component: 'network-map-scheduler', err: err?.message }, 'Scheduler run failed');
+    });
+  }
+
+  async function schedule() {
+    let uiSettings;
+    try {
+      const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
+      uiSettings = JSON.parse(raw?.body || '{}') || {};
+    } catch (_) {
+      return;
+    }
+    const settings = getSettingsFromUiSettings(uiSettings);
+    if (!settings.enabled) {
+      log.info({ component: 'network-map-scheduler' }, 'Scheduler disabled in settings');
+      return;
+    }
+    logBuffer.setMaxLines(settings.logMaxLines);
+    const intervalMs = settings.intervalMinutes * 60 * 1000;
+    log.info(
+      { component: 'network-map-scheduler', intervalMinutes: settings.intervalMinutes },
+      'Network map scheduler started (first run in 10 s, then every %d min)',
+      settings.intervalMinutes
+    );
+    schedulerTimer = setInterval(tick, intervalMs);
+    // Первый запуск через 10 сек, чтобы кеш появился вскоре после старта сервера
+    setTimeout(() => tick(), 10 * 1000);
+  }
+
+  schedule();
+}
+
+function stopNetworkMapScheduler() {
+  if (schedulerTimer) {
+    clearInterval(schedulerTimer);
+    schedulerTimer = null;
+  }
+}
+
+function getLogs() {
+  return logBuffer.getLines();
+}
+
+function getLogMaxLines() {
+  return logBuffer.maxLines;
+}
+
+function setLogMaxLines(n) {
+  const num = Math.max(100, Math.min(2000, parseInt(n, 10) || 500));
+  logBuffer.setMaxLines(num);
+}
+
+/** Добавить строку в лог (для вывода ошибок из роутов) */
+function pushLog(msg) {
+  logBuffer.push(msg);
+}
+
+/**
+ * Время следующего запуска по расписанию (timestamp или null если выключено).
+ * @param {object} settings - результат getSettingsFromUiSettings()
+ * @returns {number|null}
+ */
+function getNextRunAt(settings) {
+  if (!settings || !settings.enabled) return null;
+  const intervalMs = (settings.intervalMinutes || DEFAULT_INTERVAL_MINUTES) * 60 * 1000;
+  const from = lastScheduledRunAt || Date.now();
+  return from + intervalMs;
+}
+
+module.exports = {
+  runJob,
+  initNetworkMapScheduler,
+  stopNetworkMapScheduler,
+  getLogs,
+  getLogMaxLines,
+  setLogMaxLines,
+  pushLog,
+  getSettingsFromUiSettings,
+  getNextRunAt,
+  loadUiSettings: loadUiSettings,
+  buildConnections,
+  LogBuffer,
+};

backend/services/pingServicesScheduler.js

@@ -0,0 +1,96 @@
+/**
+ * Планировщик пинга сервисов из списка настроек.
+ * Периодически вызывает refreshPingServicesCache и обновляет кеш для GET /api/ping-services.
+ */
+
+const { readS3TextObject } = require('./s3Service');
+const { refreshPingServicesCache } = require('../routes/miscRoutes');
+
+const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
+
+const DEFAULT_INTERVAL_MINUTES = 2;
+
+let schedulerTimer = null;
+let lastScheduledRunAt = null;
+
+function getSettingsFromUiSettings(uiSettings) {
+  return {
+    enabled: uiSettings.pingServicesSchedulerEnabled !== false,
+    intervalMinutes: Math.max(1, Math.min(1440, parseInt(uiSettings.pingServicesSchedulerIntervalMinutes, 10) || DEFAULT_INTERVAL_MINUTES)),
+  };
+}
+
+/**
+ * Время следующего запуска по расписанию (timestamp или null если выключено).
+ */
+function getNextRunAt(settings) {
+  if (!settings || !settings.enabled) return null;
+  const intervalMs = (settings.intervalMinutes || DEFAULT_INTERVAL_MINUTES) * 60 * 1000;
+  const from = lastScheduledRunAt || Date.now();
+  return from + intervalMs;
+}
+
+/**
+ * Запустить планировщик пинг-сервисов.
+ * @param {object} logger - pino logger
+ */
+function initPingServicesScheduler(logger) {
+  const log = logger || console;
+
+  async function tick() {
+    lastScheduledRunAt = Date.now();
+    let uiSettings;
+    try {
+      const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
+      uiSettings = JSON.parse(raw?.body || '{}') || {};
+    } catch (_) {
+      return;
+    }
+    const settings = getSettingsFromUiSettings(uiSettings);
+    if (!settings.enabled) return;
+
+    log.info({ component: 'ping-services-scheduler' }, 'Running ping services refresh');
+    refreshPingServicesCache().catch((err) => {
+      log.error({ component: 'ping-services-scheduler', err: err?.message }, 'Ping services refresh failed');
+    });
+  }
+
+  async function schedule() {
+    let uiSettings;
+    try {
+      const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
+      uiSettings = JSON.parse(raw?.body || '{}') || {};
+    } catch (_) {
+      return;
+    }
+    const settings = getSettingsFromUiSettings(uiSettings);
+    if (!settings.enabled) {
+      log.info({ component: 'ping-services-scheduler' }, 'Ping services scheduler disabled in settings');
+      return;
+    }
+    const intervalMs = settings.intervalMinutes * 60 * 1000;
+    log.info(
+      { component: 'ping-services-scheduler', intervalMinutes: settings.intervalMinutes },
+      'Ping services scheduler started (first run in 15 s, then every %d min)',
+      settings.intervalMinutes
+    );
+    schedulerTimer = setInterval(tick, intervalMs);
+    setTimeout(() => tick(), 15 * 1000);
+  }
+
+  schedule();
+}
+
+function stopPingServicesScheduler() {
+  if (schedulerTimer) {
+    clearInterval(schedulerTimer);
+    schedulerTimer = null;
+  }
+}
+
+module.exports = {
+  initPingServicesScheduler,
+  stopPingServicesScheduler,
+  getSettingsFromUiSettings,
+  getNextRunAt,
+};

backend/services/uptimeMonitorScheduler.js

@@ -0,0 +1,142 @@
+/**
+ * Планировщик проверок Uptime Monitor.
+ * Периодически вызывает POST /api/uptime/check для каждого jumphost/home и обновляет кеш в S3.
+ * После перезапуска контейнера кеш обновляется по расписанию без необходимости открывать страницу.
+ */
+
+const { readS3TextObject } = require('./s3Service');
+
+const UI_SETTINGS_KEY = 'bgp_data/rt_ui_settings.json';
+
+const DEFAULT_INTERVAL_MINUTES = 2;
+const PARALLEL_CHECKS = 2;
+
+let schedulerTimer = null;
+let lastScheduledRunAt = null;
+
+function getSettingsFromUiSettings(uiSettings) {
+  return {
+    enabled: uiSettings.uptimeMonitorSchedulerEnabled !== false,
+    intervalMinutes: Math.max(1, Math.min(1440, parseInt(uiSettings.uptimeMonitorSchedulerIntervalMinutes, 10) || DEFAULT_INTERVAL_MINUTES)),
+  };
+}
+
+function getNextRunAt(settings) {
+  if (!settings || !settings.enabled) return null;
+  const intervalMs = (settings.intervalMinutes || DEFAULT_INTERVAL_MINUTES) * 60 * 1000;
+  const from = lastScheduledRunAt || Date.now();
+  return from + intervalMs;
+}
+
+/**
+ * Запустить планировщик Uptime Monitor.
+ * @param {object} logger - pino logger
+ * @param {number} port - порт приложения для вызова API
+ */
+function initUptimeMonitorScheduler(logger, port) {
+  const log = logger || console;
+  const baseUrl = `http://127.0.0.1:${port}`;
+
+  async function runChecks(serverIds) {
+    const runOne = async (serverId) => {
+      try {
+        const res = await fetch(`${baseUrl}/api/uptime/check`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ serverId }),
+        });
+        if (!res.ok) {
+          log.warn({ component: 'uptime-monitor-scheduler', serverId, status: res.status }, 'Uptime check failed');
+        }
+      } catch (err) {
+        log.warn({ component: 'uptime-monitor-scheduler', serverId, err: err?.message }, 'Uptime check error');
+      }
+    };
+
+    for (let i = 0; i < serverIds.length; i += PARALLEL_CHECKS) {
+      const chunk = serverIds.slice(i, i + PARALLEL_CHECKS);
+      await Promise.all(chunk.map(runOne));
+    }
+  }
+
+  async function tick() {
+    lastScheduledRunAt = Date.now();
+    let uiSettings;
+    try {
+      const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
+      uiSettings = JSON.parse(raw?.body || '{}') || {};
+    } catch (_) {
+      return;
+    }
+    const settings = getSettingsFromUiSettings(uiSettings);
+    if (!settings.enabled) return;
+
+    let servers = [];
+    try {
+      const res = await fetch(`${baseUrl}/api/servers`);
+      const data = res.ok ? await res.json() : [];
+      servers = Array.isArray(data) ? data : [];
+    } catch (err) {
+      log.error({ component: 'uptime-monitor-scheduler', err: err?.message }, 'Failed to fetch servers');
+      return;
+    }
+
+    const jumphosts = servers.filter(
+      (s) => s && ['jumphost', 'home'].includes(String(s.type || '').toLowerCase())
+    );
+    const serverIds = jumphosts
+      .map((s) => s.id || s.dns || s.ip)
+      .filter(Boolean);
+
+    if (serverIds.length === 0) {
+      log.info({ component: 'uptime-monitor-scheduler' }, 'No jumphost/home servers to check');
+      return;
+    }
+
+    log.info(
+      { component: 'uptime-monitor-scheduler', count: serverIds.length },
+      'Running uptime monitor checks for %d server(s)',
+      serverIds.length
+    );
+    await runChecks(serverIds);
+  }
+
+  async function schedule() {
+    let uiSettings;
+    try {
+      const raw = await readS3TextObject(UI_SETTINGS_KEY).catch(() => ({ body: '{}' }));
+      uiSettings = JSON.parse(raw?.body || '{}') || {};
+    } catch (_) {
+      return;
+    }
+    const settings = getSettingsFromUiSettings(uiSettings);
+    if (!settings.enabled) {
+      log.info({ component: 'uptime-monitor-scheduler' }, 'Uptime monitor scheduler disabled in settings');
+      return;
+    }
+    const intervalMs = settings.intervalMinutes * 60 * 1000;
+    log.info(
+      { component: 'uptime-monitor-scheduler', intervalMinutes: settings.intervalMinutes },
+      'Uptime monitor scheduler started (first run in 20 s, then every %d min)',
+      settings.intervalMinutes
+    );
+    schedulerTimer = setInterval(tick, intervalMs);
+    setTimeout(() => tick(), 20 * 1000);
+  }
+
+  schedule();
+}
+
+function stopUptimeMonitorScheduler() {
+  if (schedulerTimer) {
+    clearInterval(schedulerTimer);
+    schedulerTimer = null;
+  }
+}
+
+module.exports = {
+  initUptimeMonitorScheduler,
+  stopUptimeMonitorScheduler,
+  getSettingsFromUiSettings,
+  getNextRunAt,
+};

backend/utils/encryption.js

@@ -120,9 +120,7 @@ function decrypt(encryptedText) {
     }
     console.error('Decryption error details:', {
       error: error.message,
-      stack: error.stack,
+      encryptedTextLength: encryptedText.length
-      encryptedTextLength: encryptedText.length,
-      encryptedTextPreview: encryptedText.substring(0, 100)
     });
     throw error;
   }

frontend/docs/TABLE_UX.md

@@ -0,0 +1,43 @@
+# Таблицы: UX/UI по Tabler и проекту
+
+Рекомендации по формированию таблиц в приложении — [Tabler Tables](https://docs.tabler.io/ui/components/tables/), [Preview](https://preview.tabler.io/tables.html).
+
+## Классы (Tabler)
+
+- **Базовые:** `table card-table table-vcenter table-nowrap mb-0`
+- **Чередование строк:** `table-striped` — улучшает читаемость
+- **Компактный режим:** `table-sm` — меньше отступы в ячейках
+- **Обёртка:** `table-responsive` вокруг `<table>`
+- **Обрезка длинного текста:** для ячейки использовать `td-truncate` (Tabler) или `text-truncate` + `max-width`
+
+## Компонент DataTable
+
+Используйте `DataTable` там, где подходит декларативное описание колонок и общие действия (сортировка, выбор, пагинация):
+
+- `columns`: `{ key, title, sortable?, icon?, render?, tooltip? }` — для подсказки по заголовку задайте `tooltip`
+- `striped={true}` по умолчанию
+- `compact={true}` — компактные ячейки
+- Колонка «Действия» получает класс `td-actions` (фиксированная минимальная ширина в проекте)
+
+## Информативность и лаконичность
+
+1. **Заголовки колонок** — короткие, при необходимости уточнение через `tooltip` (например, значение иконки замка).
+2. **Действия в строке** — иконки с `Tooltip` и `aria-label`; колонка «Действия» справа, без лишнего текста.
+3. **Копирование** — кнопка/иконка копирования рядом с ячейкой (IP, домен и т.д.) вместо дублирования в «Действия», если это основной сценарий.
+4. **Пустое состояние** — через `emptyState` в DataTable или свой блок с призывом к действию (импорт, добавление).
+
+## Доступность
+
+- У заголовков: `scope="col"`.
+- У таблицы: `role="grid"` при семантической сетке данных.
+- Кнопки действий: `aria-label` и/или Tooltip.
+
+## Где таблица своя, а не DataTable
+
+В IPRangesManager, DomainsNewManager, ServerManager и др. таблицы рендерятся вручную. Для единообразия:
+
+- Те же классы: `table card-table table-vcenter table-nowrap mb-0`, при желании `table-striped`.
+- Заголовки: `th` с `scope="col"`, короткий текст, при необходимости иконка и тултип.
+- Колонка действий: класс `td-actions` у `th` и `td`, кнопки с тултипами.
+
+При рефакторинге страниц можно постепенно переводить такие таблицы на DataTable с описанием `columns` и общих обработчиков.

frontend/package-lock.json

@@ -17,9 +17,11 @@
         "@tanstack/react-virtual": "^3.10.8",
         "@xyflow/react": "^12.3.4",
         "axios": "^1.10.0",
+        "diff": "^8.0.3",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
-        "react-router-dom": "^6.30.1"
+        "react-router-dom": "^6.30.1",
+        "recharts": "^3.7.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.29.0",
@@ -346,6 +348,414 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
+      "integrity": "sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.5.tgz",
+      "integrity": "sha512-AdJKSPeEHgi7/ZhuIPtcQKr5RQdo6OO2IL87JkianiMYMPbCtot9fxPbrMiBADOWWm3T2si9stAiVsGbTQFkbA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.5.tgz",
+      "integrity": "sha512-VGzGhj4lJO+TVGV1v8ntCZWJktV7SGCs3Pn1GRWI1SBFtRALoomm8k5E9Pmwg3HOAal2VDc2F9+PM/rEY6oIDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.5.tgz",
+      "integrity": "sha512-D2GyJT1kjvO//drbRT3Hib9XPwQeWd9vZoBJn+bu/lVsOZ13cqNdDeqIF/xQ5/VmWvMduP6AmXvylO/PIc2isw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.5.tgz",
+      "integrity": "sha512-GtaBgammVvdF7aPIgH2jxMDdivezgFu6iKpmT+48+F8Hhg5J/sfnDieg0aeG/jfSvkYQU2/pceFPDKlqZzwnfQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.5.tgz",
+      "integrity": "sha512-1iT4FVL0dJ76/q1wd7XDsXrSW+oLoquptvh4CLR4kITDtqi2e/xwXwdCVH8hVHU43wgJdsq7Gxuzcs6Iq/7bxQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-nk4tGP3JThz4La38Uy/gzyXtpkPW8zSAmoUhK9xKKXdBCzKODMc2adkB2+8om9BDYugz+uGV7sLmpTYzvmz6Sw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.5.tgz",
+      "integrity": "sha512-PrikaNjiXdR2laW6OIjlbeuCPrPaAl0IwPIaRv+SMV8CiM8i2LqVUHFC1+8eORgWyY7yhQY+2U2fA55mBzReaw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.5.tgz",
+      "integrity": "sha512-cPzojwW2okgh7ZlRpcBEtsX7WBuqbLrNXqLU89GxWbNt6uIg78ET82qifUy3W6OVww6ZWobWub5oqZOVtwolfw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.5.tgz",
+      "integrity": "sha512-Z9kfb1v6ZlGbWj8EJk9T6czVEjjq2ntSYLY2cw6pAZl4oKtfgQuS4HOq41M/BcoLPzrUbNd+R4BXFyH//nHxVg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.5.tgz",
+      "integrity": "sha512-sQ7l00M8bSv36GLV95BVAdhJ2QsIbCuCjh/uYrWiMQSUuV+LpXwIqhgJDcvMTj+VsQmqAHL2yYaasENvJ7CDKA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.5.tgz",
+      "integrity": "sha512-0ur7ae16hDUC4OL5iEnDb0tZHDxYmuQyhKhsPBV8f99f6Z9KQM02g33f93rNH5A30agMS46u2HP6qTdEt6Q1kg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.5.tgz",
+      "integrity": "sha512-kB/66P1OsHO5zLz0i6X0RxlQ+3cu0mkxS3TKFvkb5lin6uwZ/ttOkP3Z8lfR9mJOBk14ZwZ9182SIIWFGNmqmg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.5.tgz",
+      "integrity": "sha512-UZCmJ7r9X2fe2D6jBmkLBMQetXPXIsZjQJCjgwpVDz+YMcS6oFR27alkgGv3Oqkv07bxdvw7fyB71/olceJhkQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.5.tgz",
+      "integrity": "sha512-kTxwu4mLyeOlsVIFPfQo+fQJAV9mh24xL+y+Bm6ej067sYANjyEw1dNHmvoqxJUCMnkBdKpvOn0Ahql6+4VyeA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.5.tgz",
+      "integrity": "sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.5.tgz",
+      "integrity": "sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.5.tgz",
+      "integrity": "sha512-WOb5fKrvVTRMfWFNCroYWWklbnXH0Q5rZppjq0vQIdlsQKuw6mdSihwSo4RV/YdQ5UCKKvBy7/0ZZYLBZKIbwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-7A208+uQKgTxHd0G0uqZO8UjK2R0DDb4fDmERtARjSHWxqMTye4Erz4zZafx7Di9Cv+lNHYuncAkiGFySoD+Mw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.5.tgz",
+      "integrity": "sha512-G4hE405ErTWraiZ8UiSoesH8DaCsMm0Cay4fsFWOOUcz8b8rC6uCvnagr+gnioEjWn0wC+o1/TAHt+It+MpIMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.5.tgz",
+      "integrity": "sha512-l+azKShMy7FxzY0Rj4RCt5VD/q8mG/e+mDivgspo+yL8zW7qEwctQ6YqKX34DTEleFAvCIUviCFX1SDZRSyMQA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.5.tgz",
+      "integrity": "sha512-O2S7SNZzdcFG7eFKgvwUEZ2VG9D/sn/eIiz8XRZ1Q/DO5a3s76Xv0mdBzVM5j5R639lXQmPmSo0iRpHqUUrsxw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.5.tgz",
+      "integrity": "sha512-onOJ02pqs9h1iMJ1PQphR+VZv8qBMQ77Klcsqv9CNW2w6yLqoURLcgERAIurY6QE63bbLuqgP9ATqajFLK5AMQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/win32-x64": {
       "version": "0.25.5",
       "cpu": [
@@ -601,6 +1011,42 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
+      "integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
@@ -628,6 +1074,18 @@
         "linux"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@tabler/core": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@tabler/core/-/core-1.3.2.tgz",
@@ -780,6 +1238,12 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
@@ -795,6 +1259,12 @@
         "@types/d3-selection": "*"
       }
     },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@@ -804,12 +1274,48 @@
         "@types/d3-color": "*"
       }
     },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
     "node_modules/@types/d3-selection": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
       "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-transition": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
@@ -855,6 +1361,12 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.6.0",
       "dev": true,
@@ -1076,6 +1588,15 @@
       "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "dev": true,
@@ -1130,6 +1651,18 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
@@ -1170,6 +1703,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -1182,6 +1724,31 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-selection": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
@@ -1191,6 +1758,42 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-timer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
@@ -1251,6 +1854,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "dev": true,
@@ -1263,6 +1872,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/diff": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.3.tgz",
+      "integrity": "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "license": "MIT",
@@ -1317,6 +1935,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
+      "integrity": "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/esbuild": {
       "version": "0.25.5",
       "dev": true,
@@ -1533,6 +2161,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "dev": true,
@@ -1780,6 +2414,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "dev": true,
@@ -1803,6 +2447,15 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "dev": true,
@@ -2145,6 +2798,36 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
+      "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "dev": true,
@@ -2185,6 +2868,57 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
+      "integrity": "sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "dev": true,
@@ -2254,6 +2988,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "dev": true,
@@ -2346,6 +3086,28 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "7.0.2",
       "dev": true,

frontend/package.json

@@ -21,9 +21,11 @@
     "@tanstack/react-virtual": "^3.10.8",
     "@xyflow/react": "^12.3.4",
     "axios": "^1.10.0",
+    "diff": "^8.0.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^6.30.1"
+    "react-router-dom": "^6.30.1",
+    "recharts": "^3.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",

frontend/src/ASNsNewManager.jsx

@@ -23,11 +23,9 @@ import {
   IconCopy
 } from '@tabler/icons-react';
 import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
-import S3MetaBar from './components/S3MetaBar.jsx';
 import PageHeaderActions from './components/PageHeaderActions.jsx';
 import PageHeader from './components/PageHeader.jsx';
 import EmptyState from './components/EmptyState.jsx';
-import Breadcrumbs from './components/Breadcrumbs.jsx';
 import ConfirmDialog from './components/ConfirmDialog.jsx';
 import WsUpdateModal from './components/WsUpdateModal.jsx';
 import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
@@ -41,7 +39,10 @@ import SavedFilters from './components/SavedFilters.jsx';
 import BulkActionsBar from './components/BulkActionsBar.jsx';
 import Tooltip from './components/Tooltip.jsx';
 import Pagination from './components/Pagination.jsx';
+import AddItemModal from './components/AddItemModal.jsx';
+import FormModal from './components/FormModal.jsx';
 import { getAsnName, getAsnNameSync } from './lib/asn.js';
+import LastSaved from './components/LastSaved.jsx';
 
 const API_URL = '/api';
 
@@ -58,17 +59,18 @@ function ASNsNewManager() {
   const [searchTerm, setSearchTerm] = useState('');
   const searchTimer = useRef(null);
   const didInit = useRef(false);
-  const [editingAsn, setEditingAsn] = useState(null);
   const [editingValue, setEditingValue] = useState('');
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [itemBeingEdited, setItemBeingEdited] = useState(null);
   const [loading, setLoading] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
+  const [addModalOpen, setAddModalOpen] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [totalItems, setTotalItems] = useState(0);
   const [sortField, setSortField] = useState('asn');
   const [sortOrder, setSortOrder] = useState('asc');
   const [filterCommunity, setFilterCommunity] = useState('');
-  const editInputRef = useRef(null);
   const pageSize = 10;
   const [asnNameMap, setAsnNameMap] = useState({});
   const [selectedItems, setSelectedItems] = useState(new Set());
@@ -98,16 +100,23 @@ function ASNsNewManager() {
   const [wsUrl, setWsUrl] = useState('');
 
   useEffect(() => {
-    // Load WS URL once
+    const controller = new AbortController();
     (async () => {
-      try { const r = await api.get('/ws/url'); setWsUrl(String(r.data?.url || '')); } catch {}
+      try {
+        const r = await api.get('/ws/url', { signal: controller.signal });
+        setWsUrl(String(r.data?.url || ''));
+      } catch (e) {
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      }
     })();
+    return () => controller.abort();
   }, []);
 
-  const fetchItems = async () => {
+  const fetchItems = async (abortSignal) => {
     setLoading(true);
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
-      const response = await api.get(`/asns`, { params: { offset: 0, limit: 0, format: 'std' } });
+      const response = await api.get(`/asns`, { params: { offset: 0, limit: 0, format: 'std' }, ...opts });
       const payload = Array.isArray(response.data?.items) ? response.data.items : [];
       const mapped = payload.map(item => ({ asn: String(item.domain), community: String(item.type) }));
       const total = mapped.length;
@@ -120,6 +129,7 @@ function ASNsNewManager() {
       setContentLength(typeof lengthHeader !== 'undefined' ? Number(lengthHeader) : null);
       setError('');
     } catch (error) {
+      if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
       console.error('Error fetching ASNs:', error);
       setError('Не удалось загрузить список ASN. Проверьте, запущен ли бэкенд.');
     } finally {
@@ -127,41 +137,59 @@ function ASNsNewManager() {
     }
   };
 
-  useEffect(() => { if (!didInit.current) { didInit.current = true; fetchItems(); } }, []);
+  useEffect(() => {
+    if (!didInit.current) {
+      didInit.current = true;
+      const controller = new AbortController();
+      fetchItems(controller.signal);
+      return () => controller.abort();
+    }
+  }, []);
+
+  const handleAddItem = (item) => {
+    const asn = item?.asn || newItem.asn;
+    const community = item?.community || newItem.community;
+    
+    const asnOk = isValidAsn(asn);
+    const communityOk = isValidCommunity(community);
     
-  const handleAddItem = () => {
-    const asnOk = isValidAsn(newItem.asn);
-    const communityOk = isValidCommunity(newItem.community);
-    setNewInvalid({ asn: !asnOk, community: !communityOk });
     if (!asnOk || !communityOk) {
       setError('Введите корректный номер ASN и числовой community.');
       return;
     }
+    
     setError('');
-    setItems([...items, { asn: String(newItem.asn).trim(), community: String(newItem.community).trim() }]);
+    const newAsn = { asn: String(asn).trim(), community: String(community).trim() };
+    setItems([...items, newAsn]);
+    if (!item) {
       setNewItem({ asn: '', community: '' });
       setNewInvalid({ asn: false, community: false });
+    }
   };
 
   const handleEdit = (item) => {
-    setEditingAsn(item.asn);
+    setItemBeingEdited(item);
     setEditingValue(item.community);
+    setEditModalOpen(true);
   };
 
-  const handleSaveEdit = (asn) => {
+  const handleSaveEdit = () => {
+    if (!itemBeingEdited) return;
     if (!isValidCommunity(editingValue)) {
       setError('Community должен быть числом.');
       return;
     }
     const updatedItems = items.map(i =>
-      i.asn === asn ? { ...i, community: String(editingValue).trim() } : i
+      i.asn === itemBeingEdited.asn ? { ...i, community: String(editingValue).trim() } : i
     );
     setItems(updatedItems);
-    setEditingAsn(null);
+    setEditModalOpen(false);
+    setItemBeingEdited(null);
   };
 
   const handleCancelEdit = () => {
-    setEditingAsn(null);
+    setEditModalOpen(false);
+    setItemBeingEdited(null);
   };
 
   const handleDeleteItem = (asnToDelete) => {
@@ -469,13 +497,6 @@ function ASNsNewManager() {
     }
   };
 
-  // Улучшенный инлайн-редакт
-  useEffect(() => {
-    if (editingAsn && editInputRef.current) {
-      editInputRef.current.focus();
-    }
-  }, [editingAsn]);
-
   // Глобальные хоткеи: Ctrl+S — сохранить изменения
   useEffect(() => {
     const onKey = (e) => {
@@ -488,13 +509,19 @@ function ASNsNewManager() {
     return () => window.removeEventListener('keydown', onKey);
   }, [loading, items, originalItems, etag, sortField, sortOrder, filterCommunity]);
 
-  const handleEditKeyDown = (e, asn) => {
+  const handleEditKeyDown = (e) => {
-    if (e.key === 'Enter') handleSaveEdit(asn);
+    if (e.key === 'Enter') {
-    if (e.key === 'Escape') handleCancelEdit();
+      e.preventDefault();
+      handleSaveEdit();
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      handleCancelEdit();
+    }
   };
 
   return (
-    <>
+    <div>
       {error && (
         <ErrorAlert message={error} onClose={() => setError('')} />
       )}
@@ -505,24 +532,21 @@ function ASNsNewManager() {
             <div>
               <IconCheck className="icon alert-icon" />
             </div>
-            <div>
+            <div>{success}</div>
-              {success}
           </div>
-          </div>
+          <button
-          <button type="button" className="btn-close" onClick={() => setSuccess('')}></button>
+            type="button"
+            className="btn-close"
+            onClick={() => setSuccess('')}
+          ></button>
         </div>
       )}
 
       <PageHeader
         title="ASNs"
-        pretitle={(
+        icon={<IconHash size={24} />}
-          <Breadcrumbs items={[
+        meta={<LastSaved timestamp={lastModified} variant="compact" />}
-            { label: 'Главная', to: '/dashboard' },
+        actions={
-            { label: 'Данные' },
-            { label: 'ASNs' },
-          ]} />
-        )}
-        actions={(
           <PageHeaderActions
             loading={loading}
             onPreview={handlePreviewDiff}
@@ -534,204 +558,92 @@ function ASNsNewManager() {
             disableExport={items.length === 0}
             onClear={clearInvalid}
             disableClear={items.length === 0}
-              onClearCommunities={() => { if (!filterCommunity) { setError('Выберите community в фильтре для очистки'); return; } setClearCommunitiesOpen(true); }}
+            onClearCommunities={() => {
+              if (!filterCommunity) {
+                setError('Выберите community в фильтре для очистки');
+                return;
+              }
+              setClearCommunitiesOpen(true);
+            }}
             disableClearCommunities={items.length === 0 || !filterCommunity}
             onSave={handleSaveChanges}
             disableSave={loading}
             onHistory={() => setHistoryOpen(true)}
+            lastModified={lastModified}
             onOnlineUpdate={() => setWsOpen(true)}
             onBackgroundUpdate={async () => {
               try {
-                  const res = await fetch('/api/update-bgp/background', { method: 'POST' });
+                const res = await fetch('/api/update-bgp/background', {
+                  method: 'POST',
+                });
                 const data = await res.json().catch(() => ({}));
                 if (!res.ok || data.ok === false) {
                   throw new Error(data?.message || `HTTP ${res.status}`);
                 }
                 notifyMutationSuccess('Фоновое обновление запущено', data);
               } catch (e) {
-                  window.notify?.error('Не удалось запустить фоновое обновление', String(e));
+                window.notify?.error(
-                }
+                  'Не удалось запустить фоновое обновление',
-              }}
+                  String(e),
-          />
-        )}
-      />
-      <div className="row">
-        <div className="col-lg-3">
-          {/* Classic Add New ASN Card (improved) */}
-          <div className="card card-md animate-in">
-            <div className="card-header bg-primary-lt">
-              <h3 className="card-title text-primary">
-                <IconPlus className="icon me-2" />
-                Добавить новый ASN
-              </h3>
-            </div>
-            <div className="card-body">
-              <form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
-                <div className="mb-3">
-                  <label className="form-label required">Номер AS</label>
-                  <div className="input-icon">
-                    <span className="input-icon-addon">
-                      <IconHash size={18} />
-                    </span>
-                    <input
-                      type="text"
-                      className={`form-control${newInvalid.asn ? ' is-invalid' : isValidAsn(newItem.asn) ? ' is-valid' : ''}`}
-                      placeholder="12345"
-                      value={newItem.asn}
-                      onChange={(e) => setNewItem({ ...newItem, asn: e.target.value })}
-                    />
-                  </div>
-                  {newInvalid.asn && <div className="invalid-feedback">Только цифры</div>}
-                  {isValidAsn(newItem.asn) && !newInvalid.asn && (<div className="valid-feedback">Корректный номер AS</div>)}
-                  <div className="form-text text-muted small">Формат: только цифры, например 12345</div>
-                </div>
-                <div className="mb-3">
-                  <label className="form-label required">Community</label>
-                  <div className="input-icon">
-                    <span className="input-icon-addon">
-                      <IconHash size={18} />
-                    </span>
-                    <CommunityAutocompleteInput
-                      value={newItem.community}
-                      onChange={(v) => setNewItem({ ...newItem, community: v })}
-                      communities={communities}
-                      placeholder="Начните вводить номер или имя"
-                      className={`form-control${newInvalid.community ? ' is-invalid' : isValidCommunity(newItem.community) ? ' is-valid' : ''}`}
-                      useShortValue={true}
-                    />
-                  </div>
-                  {newInvalid.community && <div className="invalid-feedback">Неверный формат community</div>}
-                  {isValidCommunity(newItem.community) && !newInvalid.community && (<div className="valid-feedback">Корректный формат community</div>)}
-                  <div className="form-text">Формат: N или N:N (например 65000:100)</div>
-                  {(() => {
-                    const match = communities.find(c => c.value === String(newItem.community).trim());
-                    if (!match) return null;
-                    return (
-                      <div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
-                        <div className="d-flex">
-                          <div>
-                            <strong>{match.name || match.value}</strong>
-                            {match.description && <div className="text-muted small">{match.description}</div>}
-                            {match.tags && match.tags.length > 0 && (
-                              <div className="mt-1">
-                                {match.tags.map((tag, idx) => (<span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>))}
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
                 );
-                  })()}
-                </div>
-                <div className="form-footer">
-                  <button type="submit" className="btn btn-primary w-100" disabled={!isValidAsn(newItem.asn) || !isValidCommunity(newItem.community)}>
-                    <IconPlus className="icon me-2" />
-                    Добавить ASN
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
-
-          {/* Дополнительные варианты */}
-          <AccordionCard title={'Дополнительные варианты'} defaultOpen={false} className="animate-in" style={{animationDelay: '0.1s'}}>
-            <QuickAddBar
-              placeholder={'12345 65000:100'}
-              help={'Вставьте строки: ASN ПРОБЕЛ COMMUNITY'}
-              parseLine={(line) => { const [a, c] = String(line).split(/\s+/); return { asn: (a||'').trim(), community: (c||'').trim() }; }}
-              validateItem={(obj) => isValidAsn(obj.asn) && isValidCommunity(obj.community)}
-              onApply={(list) => {
-                setItems(prev => {
-                  const merged = [...prev, ...list];
-                  const map = new Map();
-                  for (const it of merged) {
-                    const key = String(it.asn).trim();
-                    if (!map.has(key)) map.set(key, { asn: key, community: String(it.community).trim() });
               }
-                  return Array.from(map.values());
-                });
             }}
           />
-            <div className="card card-md border-dashed mt-3 animate-in"
-                 style={{animationDelay: '0.15s'}}
-                 onDragOver={(e) => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--tblr-primary)'; }}
-                 onDragLeave={(e) => { e.currentTarget.style.borderColor = ''; }}
-                 onDrop={(e) => { e.currentTarget.style.borderColor = ''; onDropImport(e); }}
-            >
-              <div className="card-body text-center text-muted py-4">
-                <IconUpload size={32} className="mb-2 text-muted" />
-                <div className="fw-medium">Перетащите файл TXT/CSV сюда</div>
-                <div className="small">Формат: ASN community</div>
-              </div>
-            </div>
-          </AccordionCard>
-          
-
-          {/* Карточка действий больше не нужна — действия перенесены в page-header */}
-        </div>
-
-        <div className="col-lg-9">
-          {/* BulkActionsBar */}
-          <BulkActionsBar
-            selectedCount={selectedItems.size}
-            totalCount={paginatedItems.length}
-            onSelectAll={selectAll}
-            onDeselectAll={deselectAll}
-            onDelete={selectedItems.size > 0 ? () => {
-              if (confirm(`Удалить ${selectedItems.size} записей?`)) {
-                handleBulkDelete();
         }
-            } : null}
-            onExport={selectedItems.size > 0 ? handleBulkExport : null}
       />
 
-          <div className="card">
+      <AddItemModal
-            <div className="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+        open={addModalOpen}
-              <h3 className="card-title mb-0">Список ASN <span className="badge bg-blue-lt text-blue ms-2">{items.length}</span></h3>
+        onClose={() => setAddModalOpen(false)}
-              <div className="d-flex gap-2 flex-wrap">
+        onSubmit={handleAddItem}
-                <SavedFilters
+        type="asn"
-                  pageKey="asns"
+        communities={communities}
-                  currentFilters={{ searchTerm, filterCommunity, sortField, sortOrder }}
+        loading={loading}
-                  onApplyFilter={(filters) => {
-                    setSearchTerm(filters.searchTerm || '');
-                    setFilterCommunity(filters.filterCommunity || '');
-                    setSortField(filters.sortField || 'asn');
-                    setSortOrder(filters.sortOrder || 'asc');
-                    setCurrentPage(1);
-                  }}
       />
-                {/* Фильтр по community */}
+
-                <div className="input-icon">
+      <div className="card card-flat">
+        <div className="card-header">
+          <div className="row align-items-center w-100 g-2">
+            <div className="col">
+              <div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
+                <div className="d-flex align-items-center gap-2">
+                  <IconHash className="icon text-muted" size={18} />
+                  <span className="text-muted text-uppercase small">Список</span>
+                  <span className="badge bg-blue-lt text-blue">
+                    {filtered.length}
+                  </span>
+                </div>
+                <div className="d-none d-md-block text-muted small">
+                  Всего записей: {filtered.length}
+                </div>
+              </div>
+            </div>
+            <div className="col-12 mt-2"></div>
+            <div className="col d-flex gap-2 flex-wrap align-items-center">
+              <div className="input-icon" style={{ minWidth: '200px' }}>
                 <span className="input-icon-addon">
                   <IconFilter size={18} />
                 </span>
                 <select
                   className="form-select"
-                  style={{ minWidth: '200px' }}
                   value={filterCommunity}
-                  onChange={e => { setFilterCommunity(e.target.value); setCurrentPage(1); }}
+                  onChange={(e) => {
-                  title={(() => {
+                    setFilterCommunity(e.target.value);
-                    const meta = communities.find(c => String(c.value) === String(filterCommunity));
+                    setCurrentPage(1);
-                    if (!meta) return 'Все community';
+                  }}
-                    const name = meta.name ? meta.name + ' — ' : '';
-                    const desc = meta.description || '';
-                    const tags = meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : '';
-                    return name + desc + tags;
-                  })()}
                 >
                   <option value="">Все community</option>
-                  {allCommunities.map(community => {
+                  {allCommunities.map((community) => (
-                    const meta = communities.find(c => String(c.value) === String(community));
+                    <option key={community} value={String(community)}>
-                    const label = meta && meta.name ? `${community} — ${meta.name}` : community;
+                      {community}
-                    const title = meta ? `${meta.name ? meta.name + ' — ' : ''}${meta.description || ''}${meta.tags && meta.tags.length ? ' (' + meta.tags.join(', ') + ')' : ''}` : community;
+                    </option>
-                    return (
+                  ))}
-                      <option key={community} value={String(community)} title={title}>{label}</option>
-                    );
-                  })}
                 </select>
               </div>
-                {/* Поиск */}
+              <div
-                <div className="input-icon flex-grow-1" style={{ minWidth: '200px', position: 'relative' }}>
+                className="input-icon flex-grow-1"
+                style={{ minWidth: '200px', position: 'relative' }}
+              >
                 <span className="input-icon-addon">
                   <IconSearch size={18} />
                 </span>
@@ -740,7 +652,10 @@ function ASNsNewManager() {
                   className="form-control"
                   placeholder="Поиск ASN..."
                   value={searchTerm}
-                    onChange={e => { setSearchTerm(e.target.value); setCurrentPage(1); }}
+                  onChange={(e) => {
+                    setSearchTerm(e.target.value);
+                    setCurrentPage(1);
+                  }}
                   aria-label="Поиск ASN"
                   style={{ paddingRight: searchTerm ? '2.5rem' : undefined }}
                 />
@@ -748,45 +663,91 @@ function ASNsNewManager() {
                   <button
                     type="button"
                     className="btn btn-ghost-secondary btn-icon btn-sm"
-                      style={{ position: 'absolute', right: '0.25rem', top: '50%', transform: 'translateY(-50%)', zIndex: 2 }}
+                    style={{
+                      position: 'absolute',
+                      right: '0.25rem',
+                      top: '50%',
+                      transform: 'translateY(-50%)',
+                      zIndex: 2,
+                    }}
                     aria-label="Очистить поиск"
-                      onClick={() => { setSearchTerm(''); setCurrentPage(1); }}
+                    onClick={() => {
+                      setSearchTerm('');
+                      setCurrentPage(1);
+                    }}
                   >
                     <IconX size={16} />
                   </button>
                 )}
               </div>
+              <button
+                className="btn btn-primary"
+                onClick={() => setAddModalOpen(true)}
+                title="Добавить новый ASN"
+              >
+                <IconPlus className="me-1" size={18} />
+                Добавить
+              </button>
             </div>
-              <div></div>
           </div>
-            {/* Мета-информация будет показана внизу карточки */}
+        </div>
+
+        <div className="card-body p-0">
           {loading ? (
-              <TableSkeleton rows={10} cols={3} />
+            <TableSkeleton rows={10} cols={3} flat />
           ) : paginatedItems.length === 0 ? (
-              <TableEmpty cols={3}>
+            <TableEmpty cols={3} flat>
               <EmptyState
                 title="Нет ASN"
                 description="Импортируйте или добавьте записи, чтобы начать."
-                  action={<button className="btn btn-primary" onClick={handleImport}>Импорт</button>}
+                action={
-                  secondaryAction={<button className="btn btn-outline-primary" onClick={() => {
+                  <button className="btn btn-primary" onClick={handleImport}>
-                    const header = ['asn','community'];
+                    Импорт
-                    const lines = [header, ['12345','65000:100']].map(r => r.map(x => `"${(x ?? '').toString().replace(/"/g, '""')}"`).join(',')).join('\n');
+                  </button>
-                    const blob = new Blob([lines], { type: 'text/csv;charset=utf-8;' });
+                }
+                secondaryAction={
+                  <button
+                    className="btn btn-outline-primary"
+                    onClick={() => {
+                      const header = ['asn', 'community'];
+                      const lines = [header, ['12345', '65000:100']]
+                        .map((r) =>
+                          r
+                            .map((x) =>
+                              `"${(x ?? '').toString().replace(/"/g, '""')}"`,
+                            )
+                            .join(','),
+                        )
+                        .join('\n');
+                      const blob = new Blob([lines], {
+                        type: 'text/csv;charset=utf-8;',
+                      });
                       const url = URL.createObjectURL(blob);
-                    const a = document.createElement('a'); a.href = url; a.download = 'asns_sample.csv'; a.click(); URL.revokeObjectURL(url);
+                      const a = document.createElement('a');
-                  }}>Шаблон CSV</button>}
+                      a.href = url;
+                      a.download = 'asns_sample.csv';
+                      a.click();
+                      URL.revokeObjectURL(url);
+                    }}
+                  >
+                    Шаблон CSV
+                  </button>
+                }
               />
             </TableEmpty>
           ) : (
             <div className="table-responsive">
-              <table className="table card-table table-vcenter table-nowrap mb-0">
+              <table className="table table-flat table-vcenter table-nowrap mb-0">
                 <thead>
                   <tr>
-                    <th style={{width: '40px'}}>
+                    <th style={{ width: '40px' }}>
                       <input
                         type="checkbox"
                         className="form-check-input"
-                        checked={paginatedItems.length > 0 && paginatedItems.every(i => selectedItems.has(i.asn))}
+                        checked={
+                          paginatedItems.length > 0 &&
+                          paginatedItems.every((i) => selectedItems.has(i.asn))
+                        }
                         onChange={(e) => {
                           if (e.target.checked) {
                             selectAll();
@@ -797,27 +758,39 @@ function ASNsNewManager() {
                         title="Выбрать все на странице"
                       />
                     </th>
-                    <th className="cursor-pointer user-select-none" onClick={() => handleSort('asn')}>
+                    <th
+                      className="cursor-pointer user-select-none"
+                      onClick={() => handleSort('asn')}
+                    >
                       <div className="d-flex align-items-center">
                         <IconHash size={16} className="me-1 text-muted" />
                         Номер AS
                         {sortField === 'asn' && (
                           <span className="ms-1">
-                            {sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
+                            {sortOrder === 'asc' ? (
+                              <IconArrowUp size={14} />
+                            ) : (
+                              <IconArrowDown size={14} />
+                            )}
                           </span>
                         )}
                       </div>
                     </th>
-                    <th>
+                    <th>Имя AS</th>
-                      Имя AS
+                    <th
-                    </th>
+                      className="cursor-pointer user-select-none"
-                    <th className="cursor-pointer user-select-none" onClick={() => handleSort('community')}>
+                      onClick={() => handleSort('community')}
+                    >
                       <div className="d-flex align-items-center">
                         <IconHash size={16} className="me-1 text-muted" />
                         Community
                         {sortField === 'community' && (
                           <span className="ms-1">
-                            {sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
+                            {sortOrder === 'asc' ? (
+                              <IconArrowUp size={14} />
+                            ) : (
+                              <IconArrowDown size={14} />
+                            )}
                           </span>
                         )}
                       </div>
@@ -827,7 +800,15 @@ function ASNsNewManager() {
                 </thead>
                 <tbody>
                   {paginatedItems.map((item, idx) => (
-                    <tr key={item.asn} className={editingAsn === item.asn ? 'table-active' : (selectedItems.has(item.asn) ? 'table-selected' : '')} style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}>
+                    <tr
+                      key={item.asn}
+                      className={
+                        selectedItems.has(item.asn) ? 'table-selected' : ''
+                      }
+                      style={{
+                        animation: `fadeIn 0.3s ease ${idx * 0.02}s both`,
+                      }}
+                    >
                       <td>
                         <input
                           type="checkbox"
@@ -862,37 +843,32 @@ function ASNsNewManager() {
                       </td>
                       <td>{renderCommunityBadge(item.community)}</td>
                       <td className="text-end">
-                        {editingAsn === item.asn ? (
+                        <div
-                          <>
+                          className="btn-group btn-group-sm"
-                            <CommunityAutocompleteInput
+                          role="group"
-                              value={editingValue}
+                          aria-label={`Действия с ASN ${item.asn}`}
-                              onChange={setEditingValue}
+                        >
-                              communities={communities}
-                              onKeyDown={(e) => handleEditKeyDown(e, item.asn)}
-                              className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
-                              style={{ width: '150px' }}
-                              useShortValue={true}
-                            />
-                            <Tooltip content="Сохранить (Enter)">
-                              <button className="btn btn-success btn-icon btn-sm me-1" onClick={() => handleSaveEdit(item.asn)} disabled={!isValidCommunity(editingValue)}><IconCheck size={16} /></button>
-                            </Tooltip>
-                            <Tooltip content="Отмена (Esc)">
-                              <button className="btn btn-secondary btn-icon btn-sm" onClick={handleCancelEdit}><IconX size={16} /></button>
-                            </Tooltip>
-                          </>
-                        ) : (
-                          <>
                           <Tooltip content="Редактировать" position="top">
-                              <button className="btn btn-outline-primary btn-icon btn-sm me-1" aria-label="Редактировать" onClick={() => handleEdit(item)} title="Редактировать"><IconEdit size={16} /></button>
+                            <button
-                            </Tooltip>
+                              className="btn btn-icon btn-outline-primary me-1"
-                            <Tooltip content="Копировать" position="top">
+                              aria-label="Редактировать"
-                              <button className="btn btn-outline-secondary btn-icon btn-sm me-1" aria-label="Копировать" onClick={() => copyToClipboard(`${item.asn} ${item.community}`)} title="Копировать"><IconCopy size={16} /></button>
+                              onClick={() => handleEdit(item)}
+                              title="Редактировать"
+                            >
+                              <IconEdit size={16} />
+                            </button>
                           </Tooltip>
                           <Tooltip content="Удалить" position="top">
-                              <button className="btn btn-outline-danger btn-icon btn-sm" aria-label="Удалить" onClick={() => confirmDelete(item)} title="Удалить"><IconTrash size={16} /></button>
+                            <button
+                              className="btn btn-icon btn-outline-danger"
+                              aria-label="Удалить"
+                              onClick={() => confirmDelete(item)}
+                              title="Удалить"
+                            >
+                              <IconTrash size={16} />
+                            </button>
                           </Tooltip>
-                          </>
+                        </div>
-                        )}
                       </td>
                     </tr>
                   ))}
@@ -900,7 +876,9 @@ function ASNsNewManager() {
               </table>
             </div>
           )}
-            {/* Пагинация */}
+        </div>
+
+        <div className="card-footer border-top-0">
           <Pagination
             currentPage={currentPage}
             totalPages={totalPages}
@@ -908,15 +886,25 @@ function ASNsNewManager() {
             pageSize={pageSize}
             onPageChange={setCurrentPage}
           />
-            <S3MetaBar keys={["asns"]} />
-          </div>
         </div>
       </div>
 
+      <BulkActionsBar
+        selectedCount={selectedItems.size}
+        totalCount={paginatedItems.length}
+        onDeselectAll={deselectAll}
+        onDelete={handleBulkDelete}
+        onExport={handleBulkExport}
+      />
+
       <ConfirmDialog
         open={showDeleteModal}
         title={'Удалить ASN?'}
-        message={!itemToDelete ? '' : `Вы уверены, что хотите удалить "${itemToDelete.asn}"? Это действие необратимо.`}
+        message={
+          !itemToDelete
+            ? ''
+            : `Вы уверены, что хотите удалить "${itemToDelete.asn}"? Это действие необратимо.`
+        }
         confirmText={'Удалить'}
         cancelText={'Отмена'}
         destructive
@@ -924,12 +912,14 @@ function ASNsNewManager() {
         onConfirm={executeDelete}
         onCancel={() => setShowDeleteModal(false)}
       />
+
       <ConfirmDiffModal
         show={confirmSaveOpen}
         diff={diff}
         onConfirm={performSave}
         onClose={() => setConfirmSaveOpen(false)}
       />
+
       <ImportModal
         show={importOpen}
         title={'Импорт ASN'}
@@ -938,31 +928,75 @@ function ASNsNewManager() {
         validateItem={validateItem}
         onConfirm={applyImportedItems}
         onClose={() => setImportOpen(false)}
-        sampleHeader={['asn','community']}
+        sampleHeader={['asn', 'community']}
         placeholder={'12345 65000:100'}
       />
+
+      <FormModal
+        show={editModalOpen && !!itemBeingEdited}
+        onClose={handleCancelEdit}
+        onSubmit={handleSaveEdit}
+        title="Редактировать community"
+        submitLabel="Сохранить"
+        submitIcon={IconCheck}
+        size="md"
+        centered
+        disabled={!isValidCommunity(editingValue)}
+      >
+        {itemBeingEdited && (
+          <>
+            <p className="text-muted mb-2">
+              ASN:{' '}
+              <span className="font-monospace">{itemBeingEdited.asn}</span>
+            </p>
+            <div className="mb-3">
+              <label className="form-label">Community</label>
+              <CommunityAutocompleteInput
+                value={editingValue}
+                onChange={setEditingValue}
+                communities={communities}
+                onKeyDown={handleEditKeyDown}
+                className={`form-control${
+                  isValidCommunity(editingValue) ? '' : ' is-invalid'
+                }`}
+                useShortValue={true}
+              />
+              {!isValidCommunity(editingValue) && (
+                <div className="invalid-feedback d-block">
+                  Введите корректное значение community (число или N:N).
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </FormModal>
+
       <HistoryModal
         resource="asns"
         show={historyOpen}
         onClose={() => setHistoryOpen(false)}
         onRolledBack={() => fetchItems()}
       />
+
       <WsUpdateModal
         show={wsOpen}
         url={wsUrl}
         onClose={() => setWsOpen(false)}
       />
+
       <ConfirmDialog
         open={clearCommunitiesOpen}
         title={'Удалить записи community'}
         message={`Будут удалены все записи с community "${filterCommunity}". Действие НЕ сохраняет изменения автоматически.`}
         confirmText={'Удалить'}
         cancelText={'Отмена'}
-        onConfirm={() => { setItems(prev => prev.filter(i => i.community !== filterCommunity)); setClearCommunitiesOpen(false); }}
+        onConfirm={() => {
+          setItems((prev) => prev.filter((i) => i.community !== filterCommunity));
+          setClearCommunitiesOpen(false);
+        }}
         onCancel={() => setClearCommunitiesOpen(false)}
       />
-      {/* datalist больше не нужен, т.к. используем кастомный автокомплит */}
+    </div>
-    </>
   );
 }
 

frontend/src/App.css

@@ -1,5 +1,147 @@
 /* Custom styles for S3 Lists Manager */
-/* Most styles are now provided by @tabler/core */
+/* Layout: Tabler Fluid Vertical (https://preview.tabler.io/layout-fluid-vertical.html) */
+
+/* --- Fluid Vertical: page structure --- */
+.page {
+  min-height: 100vh;
+}
+
+/* Сайдбар: всегда тёмный (как на референсе Tabler) */
+.navbar-vertical {
+  --tblr-body-color: rgba(255, 255, 255, 0.9);
+  --tblr-body-color-rgb: 255, 255, 255;
+  --tblr-border-color: rgba(255, 255, 255, 0.1);
+  --tblr-bg-surface: #1e293b;
+  --tblr-bg-surface-hover: rgba(255, 255, 255, 0.05);
+  --tblr-navbar-active-bg: rgba(255, 255, 255, 0.08);
+  --tblr-navbar-active-color: #fff;
+  --tblr-primary: #6ea8fe;
+  --tblr-muted: rgba(255, 255, 255, 0.6);
+  background-color: #1e293b !important;
+  color: rgba(255, 255, 255, 0.9);
+}
+.navbar-vertical .navbar-brand,
+.navbar-vertical .nav-link,
+.navbar-vertical .dropdown-item {
+  color: inherit;
+}
+.navbar-vertical .navbar-brand:hover,
+.navbar-vertical .nav-link:hover,
+.navbar-vertical .dropdown-item:hover {
+  color: #fff;
+}
+.navbar-vertical .nav-link.active,
+.navbar-vertical .dropdown-item.active {
+  background-color: var(--tblr-navbar-active-bg);
+  color: var(--tblr-navbar-active-color);
+}
+.navbar-vertical .dropdown-toggle::after {
+  border-top-color: rgba(255, 255, 255, 0.6);
+}
+.navbar-vertical .navbar-toggler {
+  border-color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* Сайдбар: у бренда убираем лишний отступ и стрелку (Tabler не должен добавлять caret к brand) */
+.navbar-vertical .navbar-brand {
+  padding-left: 0;
+  padding-right: 0;
+}
+.navbar-vertical .navbar-brand::after {
+  display: none !important;
+}
+.navbar-vertical > .container-fluid {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+.navbar-vertical .collapse.navbar-collapse {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.navbar-vertical .collapse .navbar-nav.pt-lg-3 {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+.navbar-vertical .navbar-sidebar-footer {
+  flex-shrink: 0;
+  border-top-color: rgba(255, 255, 255, 0.1) !important;
+}
+.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon {
+  padding: 0.35rem;
+  color: rgba(255, 255, 255, 0.75);
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.08);
+}
+.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon .badge {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.35rem;
+}
+.navbar-vertical .navbar-sidebar-footer .dropdown-toggle::after {
+  display: none;
+}
+/* Стрелка только у пунктов с подменю (dropdown-toggle), не у обычных ссылок и не у бренда */
+.navbar-vertical .nav-link:not(.dropdown-toggle)::after {
+  display: none !important;
+}
+
+/* Sidebar: nav-link with icon (Tabler vertical) */
+.navbar-vertical .nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.navbar-vertical .nav-link-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+.navbar-vertical .nav-link-icon .icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+/* Sidebar dropdown: inline submenu (no popup) */
+.navbar-vertical .nav-item.dropdown .dropdown-menu {
+  position: static;
+  float: none;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  padding: 0 0 0.5rem 0;
+  margin: 0;
+}
+.navbar-vertical .nav-item.dropdown .dropdown-item {
+  padding-left: 1rem;
+  padding-top: 0.35rem;
+  padding-bottom: 0.35rem;
+}
+.navbar-vertical .nav-item.dropdown .dropdown-item .nav-link-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.navbar-vertical .nav-item.dropdown .dropdown-item .nav-link-icon .icon {
+  width: 1rem;
+  height: 1rem;
+}
 
 /* Custom avatar background */
 .avatar {
@@ -151,6 +293,60 @@
 /* Убрали глобальную перекраску .badge, чтобы работали текстовые цвета Tabler
    (например, badge bg-blue-lt text-blue) */
 
+/* --- Server sidebar (фильтры на /servers) — Tabler card + list-group --- */
+.server-sidebar {
+  width: 280px;
+  min-width: 280px;
+  max-height: calc(100vh - 180px);
+  display: flex;
+  flex-direction: column;
+}
+.server-sidebar .card-header {
+  flex-shrink: 0;
+}
+.server-sidebar .card-body.border-bottom,
+.server-sidebar .card-footer {
+  flex-shrink: 0;
+}
+.server-sidebar-body {
+  flex: 1;
+  min-height: 0;
+  max-height: 50vh;
+}
+.server-sidebar .filter-section .list-group-header {
+  cursor: pointer;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-transform: none;
+  color: var(--tblr-body-color);
+}
+.server-sidebar .filter-section .list-group-header:hover {
+  background-color: var(--tblr-bg-surface-tertiary);
+}
+.server-sidebar .list-group-item {
+  font-size: 0.8125rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+/* Полные названия в фильтрах (без обрезания), перенос по словам */
+.server-sidebar .list-group-item .text-break,
+#server-filters-offcanvas .list-group-item span:first-of-type span {
+  word-break: break-word;
+  white-space: normal;
+  min-width: 0;
+}
+
+/* Tabler-style subheader (как на preview.tabler.io/settings.html) */
+.subheader {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--tblr-muted-color, #6c757d);
+  margin-bottom: 0.25rem;
+  padding-left: 0;
+}
+
 /* Responsive navbar */
 @media (max-width: 991.98px) {
   .navbar-collapse {
@@ -251,10 +447,12 @@
   height: 100%;
 }
 .header-actions .btn svg { width: 18px; height: 18px; }
+.header-actions .header-actions-right { flex-shrink: 0; }
 
-/* Ensure dropdowns in header-actions overlay tables/cards correctly but stay below modals */
+/* Ensure dropdowns in main content (and header) are above the sidebar, below modals */
 .header-actions .dropdown-menu,
-.page-header .dropdown-menu {
+.page-header .dropdown-menu,
+.page-wrapper .dropdown-menu {
   z-index: 1035; /* above navbar(1030), below modal-backdrop(1040) and modal(1050) */
 }
 

frontend/src/App.jsx

@@ -20,7 +20,14 @@ import {
   IconDownload,
   IconCreditCard,
   IconMenu2,
-  IconArrowsExchange
+  IconArrowsExchange,
+  IconLayoutSidebarLeftExpand,
+  IconLayoutNavbar,
+  IconChartPie,
+  IconChartBar,
+  IconClock,
+  IconClockPlay,
+  IconShield
 } from '@tabler/icons-react';
 import ServerManager from './ServerManager';
 import FilterManager from './FilterManager';
@@ -32,15 +39,25 @@ import AutoUrlManager from './AutoUrlManager';
 import BillingManager from './BillingManager';
 import CommunitiesManager from './CommunitiesManager';
 import NetworkConfigManager from './NetworkConfigManager';
+import MikrotikTools from './MikrotikTools.jsx';
+import InterfaceSpeedTest from './InterfaceSpeedTest.jsx';
 import Dashboard from './Dashboard';
+import TrafficDashboard from './TrafficDashboard.jsx';
+import NetworkMapDashboard from './NetworkMapDashboard.jsx';
+import NetworkMapSchedulerPage from './NetworkMapSchedulerPage.jsx';
+import UptimeMonitorPage from './UptimeMonitorPage.jsx';
 import MikrotikBackupsManager from './MikrotikBackupsManager.jsx';
+import PingServicesManager from './PingServicesManager.jsx';
+import FirewallPage from './FirewallPage.jsx';
+import SettingsPage from './SettingsPage.jsx';
+import ResourceStatsPage from './ResourceStatsPage.jsx';
 import './App.css';
 import { NotifyProvider } from './components/NotifyProvider.jsx';
-import SettingsModal from './components/SettingsModal.jsx';
 import ToastContainer from './components/ToastContainer.jsx';
 import CommandPalette, { KeyboardShortcutsButton } from './components/CommandPalette.jsx';
 import ErrorBoundary from './components/ErrorBoundary.jsx';
 import NetworkErrorHandler from './components/NetworkErrorHandler.jsx';
+import { PingProvider } from './contexts/PingContext.jsx';
 
 // --- Simple i18n (RU/EN) ---
 const LanguageContext = createContext({ lang: 'ru', setLang: () => {}, t: (k) => k });
@@ -51,17 +68,19 @@ function LanguageProvider({ children }) {
   const dict = {
     ru: {
       home: 'Главная', data: 'Данные', management: 'Управление', tools: 'Инструменты',
-      dashboard: 'Панель', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
+      dashboard: 'Панель', trafficTraffic: 'Расход трафика', resourceStats: 'Статистика ресурсов', networkMap: 'Карта сети', uptimeMonitor: 'Uptime Monitor', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
       communities: 'Community', servers: 'Серверы', filters: 'Фильтры', billing: 'Биллинг', autoUrls: 'Авто URL',
-      easySwitch: 'Easy Switch', networkConfig: 'Сетевые настройки', mikrotikBackups: 'MikroTik Бэкапы',
+      easySwitch: 'Easy Switch',       networkConfig: 'Сетевые настройки', mikrotikBackups: 'MikroTik Бэкапы', pingServices: 'Пинг сервисов', firewall: 'Firewall',
-      light: 'Светлая', dark: 'Тёмная'
+      light: 'Светлая', dark: 'Тёмная',
+      layoutSidebar: 'Сайдбар', layoutHorizontal: 'Верхнее меню'
     },
     en: {
       home: 'Home', data: 'Data', management: 'Management', tools: 'Tools',
-      dashboard: 'Dashboard', domains: 'Domains', ipRanges: 'IP Ranges', asns: 'ASNs',
+      dashboard: 'Dashboard', trafficTraffic: 'Traffic Usage', resourceStats: 'Resource Stats', networkMap: 'Network Map', uptimeMonitor: 'Uptime Monitor', domains: 'Domains', ipRanges: 'IP Ranges', asns: 'ASNs',
       communities: 'Communities', servers: 'Servers', filters: 'Filters', billing: 'Billing', autoUrls: 'Auto URLs',
-      easySwitch: 'Easy Switch', networkConfig: 'Network Config', mikrotikBackups: 'MikroTik Backups',
+      easySwitch: 'Easy Switch',       networkConfig: 'Network Config', mikrotikBackups: 'MikroTik Backups', pingServices: 'Ping Services', firewall: 'Firewall',
-      light: 'Light', dark: 'Dark'
+      light: 'Light', dark: 'Dark',
+      layoutSidebar: 'Sidebar', layoutHorizontal: 'Top menu'
     }
   };
   const t = (key) => (dict[lang] && key in dict[lang] ? dict[lang][key] : key);
@@ -104,12 +123,14 @@ function App() {
         <QueryClientProvider client={queryClient}>
           <LanguageProvider>
             <ThemeProvider>
+              <PingProvider>
                 <ToastContainer>
                   <NotifyProvider>
                     <NetworkErrorHandler />
                     <MainLayout />
                   </NotifyProvider>
                 </ToastContainer>
+              </PingProvider>
             </ThemeProvider>
           </LanguageProvider>
         </QueryClientProvider>
@@ -118,12 +139,18 @@ function App() {
   );
 }
 
+const LAYOUT_FLUID = 'fluid';
+const LAYOUT_HORIZONTAL = 'horizontal';
+
 function MainLayout() {
   const location = useLocation();
   const { lang, setLang, t } = useContext(LanguageContext);
   const { theme, setTheme } = useContext(ThemeContext);
-  // Навбар стал лаконичным: без неиспользуемых уведомлений/иконок
+  const [layout, setLayout] = useState(() => localStorage.getItem('layout') || LAYOUT_FLUID);
-  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  useEffect(() => {
+    localStorage.setItem('layout', layout);
+  }, [layout]);
 
   // Состояние для управления выпадающими меню
   const [dropdownStates, setDropdownStates] = useState({
@@ -132,10 +159,12 @@ function MainLayout() {
     tools: false
   });
 
-  // Закрытие всех выпадающих меню при клике вне их области
+  // Закрытие выпадающих меню только при клике в сайдбаре вне открытого меню (клики по странице не закрывают)
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (!event.target.closest('.nav-item.dropdown')) {
+      const inSidebar = event.target.closest('.navbar-vertical');
+      const inDropdown = event.target.closest('.nav-item.dropdown');
+      if (inSidebar && !inDropdown) {
         setDropdownStates({
           data: false,
           management: false,
@@ -171,8 +200,13 @@ function MainLayout() {
       id: 'home',
       title: t('home'),
       icon: IconHome,
-      path: '/dashboard',
+      items: [
-      single: true
+        { id: 'dashboard', title: t('dashboard'), path: '/dashboard', icon: IconHome },
+        { id: 'traffic', title: t('trafficTraffic'), path: '/traffic', icon: IconChartPie },
+        { id: 'resource-stats', title: t('resourceStats'), path: '/resource-stats', icon: IconChartBar },
+        { id: 'network-map', title: t('networkMap'), path: '/network-map', icon: IconNetwork },
+        { id: 'uptime-monitor', title: t('uptimeMonitor'), path: '/uptime-monitor', icon: IconClock }
+      ]
     },
     {
       id: 'data',
@@ -203,10 +237,22 @@ function MainLayout() {
       icon: IconSettings,
       items: [
         { id: 'auto-urls', title: t('autoUrls'), path: '/auto-urls', icon: IconDownload },
-        { id: 'mikrotik-backups', title: t('mikrotikBackups'), path: '/mikrotik-backups', icon: IconDatabase }
+        { id: 'mikrotik-backups', title: t('mikrotikBackups'), path: '/mikrotik-backups', icon: IconDatabase },
+        { id: 'mikrotik-tools', title: 'MikroTik Инструменты', path: '/mikrotik-tools', icon: IconNetwork },
+        { id: 'firewall', title: t('firewall'), path: '/firewall', icon: IconShield },
+        { id: 'interface-speed', title: 'Скорость интерфейсов', path: '/interface-speed', icon: IconNetwork },
+        { id: 'ping-services', title: t('pingServices'), path: '/ping-services', icon: IconNetwork },
+        { id: 'uptime-monitor', title: t('uptimeMonitor'), path: '/uptime-monitor', icon: IconClock },
+        { id: 'scheduler', title: 'Планировщик карты сети', path: '/scheduler', icon: IconClockPlay }
       ]
     },
-    // Убрали неиспользуемые/неработающие разделы
+    {
+      id: 'settings',
+      title: 'Настройки',
+      icon: IconSettings,
+      single: true,
+      path: '/settings'
+    }
   ];
 
   // Определяем активную вкладку по адресу
@@ -228,39 +274,31 @@ function MainLayout() {
 
   const activeTab = getActiveTab();
 
+  // Старый вид: один верхний навбар с горизонтальным меню
+  if (layout === LAYOUT_HORIZONTAL) {
     return (
       <div className="page d-flex flex-column min-vh-100">
-      {/* Skip link для доступности */}
+        <a href="#main-content" className="skip-link">Перейти к основному содержанию</a>
-      <a href="#main-content" className="skip-link">
+        <header className="navbar navbar-expand-md navbar-light d-print-none" style={{ boxShadow: '0 1px 0 0 #e9ecef' }}>
-        Перейти к основному содержанию
-      </a>
-      
-      {/* Верхнее меню Tabler Admin */}
-      <header className="navbar navbar-expand-md navbar-light d-print-none" style={{boxShadow: '0 1px 0 0 #e9ecef'}}>
           <div className="container-xl">
-          {/* Логотип */}
             <div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
               <Link to="/" className="navbar-brand d-flex align-items-center">
                 <IconBrandTabler className="navbar-brand-icon me-2" />
                 <span className="fw-bold">S3 Lists Manager</span>
               </Link>
             </div>
-
-          {/* Кнопка бургера для мобильных */}
             <button
               className="navbar-toggler d-md-none"
               type="button"
               data-bs-toggle="collapse"
-            data-bs-target="#navbar-menu"
+              data-bs-target="#navbar-menu-horizontal"
-            aria-controls="navbar-menu"
+              aria-controls="navbar-menu-horizontal"
               aria-expanded="false"
               aria-label="Toggle navigation"
             >
               <IconMenu2 />
             </button>
-          
+            <div className="collapse navbar-collapse" id="navbar-menu-horizontal">
-          {/* Основное меню */}
-          <div className="collapse navbar-collapse" id="navbar-menu">
               <div className="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
                 <ul className="navbar-nav">
                   {navCategories.map(category => (
@@ -312,80 +350,45 @@ function MainLayout() {
                 </ul>
               </div>
             </div>
-          
-          {/* Правая часть навбара: язык, тема и действия */}
             <div className="navbar-nav flex-row order-md-last">
-            {/* Язык */}
               <div className="nav-item dropdown me-1">
-              <a 
+                <a href="#" className="nav-link px-2 dropdown-toggle" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()}>
-                href="#" 
+                  {layout === LAYOUT_FLUID ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutNavbar size={20} />}
-                className="nav-link px-2 dropdown-toggle" 
+                </a>
-                data-bs-toggle="dropdown"
+                <div className="dropdown-menu dropdown-menu-end">
-                onClick={(e) => e.preventDefault()}
+                  <a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_FLUID ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_FLUID); }}>
-              >
+                    <IconLayoutSidebarLeftExpand className="me-2" size={18} /> {t('layoutSidebar')}
+                  </a>
+                  <a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_HORIZONTAL ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_HORIZONTAL); }}>
+                    <IconLayoutNavbar className="me-2" size={18} /> {t('layoutHorizontal')}
+                  </a>
+                </div>
+              </div>
+              <div className="nav-item dropdown me-1">
+                <a href="#" className="nav-link px-2 dropdown-toggle" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()}>
                   <span className="badge">{lang.toUpperCase()}</span>
                 </a>
                 <div className="dropdown-menu dropdown-menu-end">
-                <a 
+                  <a href="#" className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}>Русский</a>
-                  href="#" 
+                  <a href="#" className={`dropdown-item ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}>English</a>
-                  className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`}
-                  onClick={(e) => { e.preventDefault(); setLang('ru'); }}
-                >
-                  Русский
-                </a>
-                <a 
-                  href="#" 
-                  className={`dropdown-item ${lang === 'en' ? 'active' : ''}`}
-                  onClick={(e) => { e.preventDefault(); setLang('en'); }}
-                >
-                  English
-                </a>
                 </div>
               </div>
-
-            {/* Тема */}
               <div className="nav-item dropdown me-1">
-              <a 
+                <a href="#" className="nav-link px-2 dropdown-toggle" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()}>
-                href="#" 
-                className="nav-link px-2 dropdown-toggle" 
-                data-bs-toggle="dropdown"
-                onClick={(e) => e.preventDefault()}
-              >
                   {theme === 'dark' ? '🌙' : '☀️'}
                 </a>
                 <div className="dropdown-menu dropdown-menu-end">
-                <a 
+                  <a href="#" className={`dropdown-item ${theme === 'light' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('light'); }}>☀️ {t('light')}</a>
-                  href="#" 
+                  <a href="#" className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('dark'); }}>🌙 {t('dark')}</a>
-                  className={`dropdown-item ${theme === 'light' ? 'active' : ''}`}
-                  onClick={(e) => { e.preventDefault(); setTheme('light'); }}
-                >
-                  ☀️ {t('light')}
-                </a>
-                <a 
-                  href="#" 
-                  className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`}
-                  onClick={(e) => { e.preventDefault(); setTheme('dark'); }}
-                >
-                  🌙 {t('dark')}
-                </a>
                 </div>
               </div>
-
-            {/* Горячие клавиши */}
               <div className="nav-item me-1">
                 <KeyboardShortcutsButton className="nav-link px-2" />
               </div>
-
-            {/* Настройки */}
               <div className="nav-item">
-              <a 
+                <Link to="/settings" className="nav-link px-2" title="Настройки">
-                href="#" 
-                className="nav-link px-2" 
-                onClick={(e) => { e.preventDefault(); setSettingsOpen(true); }}
-                title="Настройки"
-              >
                   <IconSettings size={20} />
-              </a>
+                </Link>
               </div>
             </div>
           </div>
@@ -393,6 +396,10 @@ function MainLayout() {
         <main id="main-content" className="container-xl mt-4 flex-grow-1" tabIndex="-1">
           <Routes>
             <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/traffic" element={<TrafficDashboard />} />
+            <Route path="/resource-stats" element={<ResourceStatsPage />} />
+            <Route path="/network-map" element={<NetworkMapDashboard />} />
+            <Route path="/uptime-monitor" element={<UptimeMonitorPage />} />
             <Route path="/domains" element={<DomainsNewManager />} />
             <Route path="/ip-ranges" element={<IPRangesManager />} />
             <Route path="/asns" element={<ASNsNewManager />} />
@@ -404,15 +411,188 @@ function MainLayout() {
             <Route path="/network-config" element={<NetworkConfigManager />} />
             <Route path="/easy-switch" element={<EasySwitchManager />} />
             <Route path="/mikrotik-backups" element={<MikrotikBackupsManager />} />
+            <Route path="/mikrotik-tools" element={<MikrotikTools />} />
+            <Route path="/firewall" element={<FirewallPage />} />
+            <Route path="/interface-speed" element={<InterfaceSpeedTest />} />
+            <Route path="/ping-services" element={<PingServicesManager />} />
+            <Route path="/scheduler" element={<NetworkMapSchedulerPage />} />
+            <Route path="/settings" element={<SettingsPage />} />
             <Route path="/" element={<Navigate to="/dashboard" replace />} />
           </Routes>
         </main>
         <footer className="footer mt-auto py-2">
-        <div className="container-xl text-muted small">
+          <div className="container-xl text-muted small">Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}</div>
-          Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}
+        </footer>
+        <CommandPalette />
+      </div>
+    );
+  }
+
+  // Fluid Vertical: вертикальный сайдбар + верхний навбар + page-wrapper
+  return (
+    <div className="page">
+      {/* Skip link для доступности */}
+      <a href="#main-content" className="skip-link">
+        Перейти к основному содержанию
+      </a>
+
+      {/* Левая вертикальная навигация — всегда тёмная (Tabler navbar-vertical) */}
+      <header className="navbar navbar-vertical navbar-expand-md d-print-none" data-bs-theme="dark">
+        <div className="container-fluid">
+          <Link to="/" className="navbar-brand navbar-brand-autodark">
+            <IconBrandTabler className="navbar-brand-icon" />
+            <span className="fw-bold">S3 Lists Manager</span>
+          </Link>
+          <div className="navbar-nav flex-row d-md-none">
+            <button
+              className="navbar-toggler"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#sidebar-menu"
+              aria-controls="sidebar-menu"
+              aria-expanded="false"
+              aria-label="Открыть меню"
+            >
+              <IconMenu2 />
+            </button>
+          </div>
+          <div className="collapse navbar-collapse" id="sidebar-menu">
+            <ul className="navbar-nav pt-lg-3">
+              {navCategories.map(category => (
+                <li key={category.id} className={`nav-item${category.items ? ' dropdown' : ''}${(category.single && activeTab === category.id) || (category.items && category.items.some(i => activeTab === i.id)) ? ' active' : ''}`}>
+                  {category.single ? (
+                    <Link
+                      to={category.path}
+                      className="nav-link"
+                    >
+                      <span className="nav-link-icon">
+                        <category.icon className="icon" />
+                      </span>
+                      <span className="nav-link-title">{category.title}</span>
+                    </Link>
+                  ) : (
+                    <>
+                      <a
+                        className="nav-link dropdown-toggle"
+                        href="#"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          toggleDropdown(category.id);
+                        }}
+                        aria-expanded={dropdownStates[category.id]}
+                      >
+                        <span className="nav-link-icon">
+                          <category.icon className="icon" />
+                        </span>
+                        <span className="nav-link-title">{category.title}</span>
+                      </a>
+                      <div className={`dropdown-menu${dropdownStates[category.id] ? ' show' : ''}`}>
+                        {category.items.map(item => (
+                          <Link
+                            key={item.id}
+                            to={item.path}
+                            className={`dropdown-item d-flex align-items-center${activeTab === item.id ? ' active' : ''}`}
+                          >
+                            <span className="nav-link-icon me-2">
+                              <item.icon className="icon" />
+                            </span>
+                            {item.title}
+                          </Link>
+                        ))}
+                      </div>
+                    </>
+                  )}
+                </li>
+              ))}
+            </ul>
+            {/* Горизонтальный ряд значков в самом низу сайдбара */}
+            <div className="navbar-sidebar-footer border-top mt-auto">
+              <div className="d-flex align-items-center justify-content-center gap-1 py-2 px-2">
+                <div className="nav-item dropdown dropup">
+                  <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
+                    <span className="badge bg-secondary">{lang.toUpperCase()}</span>
+                  </a>
+                  <div className="dropdown-menu dropdown-menu-end">
+                    <a href="#" className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}>Русский</a>
+                    <a href="#" className={`dropdown-item ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}>English</a>
+                  </div>
+                </div>
+                <div className="nav-item dropdown dropup">
+                  <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('layoutSidebar')}>
+                    {layout === LAYOUT_FLUID ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutNavbar size={20} />}
+                  </a>
+                  <div className="dropdown-menu dropdown-menu-end">
+                    <a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_FLUID ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_FLUID); }}>
+                      <IconLayoutSidebarLeftExpand className="me-2" size={18} /> {t('layoutSidebar')}
+                    </a>
+                    <a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_HORIZONTAL ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_HORIZONTAL); }}>
+                      <IconLayoutNavbar className="me-2" size={18} /> {t('layoutHorizontal')}
+                    </a>
+                  </div>
+                </div>
+                <div className="nav-item dropdown dropup">
+                  <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('light') + ' / ' + t('dark')}>
+                    {theme === 'dark' ? '🌙' : '☀️'}
+                  </a>
+                  <div className="dropdown-menu dropdown-menu-end">
+                    <a href="#" className={`dropdown-item ${theme === 'light' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('light'); }}>☀️ {t('light')}</a>
+                    <a href="#" className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('dark'); }}>🌙 {t('dark')}</a>
+                  </div>
+                </div>
+                <div className="nav-item">
+                  <KeyboardShortcutsButton className="nav-link btn-icon rounded" title="Горячие клавиши" />
+                </div>
+                <div className="nav-item">
+                  <Link to="/settings" className="nav-link btn-icon rounded" title="Настройки">
+                    <IconSettings size={20} />
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="page-wrapper">
+        <div className="page-body">
+          <div className="container-fluid">
+            <main id="main-content" tabIndex="-1">
+              <Routes>
+                <Route path="/dashboard" element={<Dashboard />} />
+                <Route path="/traffic" element={<TrafficDashboard />} />
+                <Route path="/resource-stats" element={<ResourceStatsPage />} />
+                <Route path="/network-map" element={<NetworkMapDashboard />} />
+                <Route path="/uptime-monitor" element={<UptimeMonitorPage />} />
+                <Route path="/domains" element={<DomainsNewManager />} />
+                <Route path="/ip-ranges" element={<IPRangesManager />} />
+                <Route path="/asns" element={<ASNsNewManager />} />
+                <Route path="/communities" element={<CommunitiesManager />} />
+                <Route path="/auto-urls" element={<AutoUrlManager />} />
+                <Route path="/servers" element={<ServerManager />} />
+                <Route path="/billing" element={<BillingManager />} />
+                <Route path="/filters" element={<FilterManager />} />
+                <Route path="/network-config" element={<NetworkConfigManager />} />
+                <Route path="/easy-switch" element={<EasySwitchManager />} />
+                <Route path="/mikrotik-backups" element={<MikrotikBackupsManager />} />
+                <Route path="/mikrotik-tools" element={<MikrotikTools />} />
+                <Route path="/firewall" element={<FirewallPage />} />
+                <Route path="/interface-speed" element={<InterfaceSpeedTest />} />
+                <Route path="/ping-services" element={<PingServicesManager />} />
+                <Route path="/scheduler" element={<NetworkMapSchedulerPage />} />
+                <Route path="/settings" element={<SettingsPage />} />
+                <Route path="/" element={<Navigate to="/dashboard" replace />} />
+          </Routes>
+            </main>
+          </div>
+        </div>
+        <footer className="footer footer-transparent d-print-none">
+          <div className="container-fluid">
+            <ul className="list-inline list-inline-dots mb-0 text-muted small">
+              <li className="list-inline-item">Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}</li>
+            </ul>
           </div>
         </footer>
-      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
+      </div>
       <CommandPalette />
     </div>
   );

frontend/src/AutoUrlManager.jsx

@@ -276,7 +276,7 @@ function AutoUrlManager() {
     <div>
       <PageHeader
         title="Автоматические URL"
-        pretitle="Управление автоматическими URL-адресами для загрузки списков IP и доменов"
+        icon={<IconLink size={24} />}
         actions={(
           <div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
             <div className="btn-list">

frontend/src/BillingManager.jsx

@@ -54,6 +54,7 @@ function BillingManager() {
   const [filterStatus, setFilterStatus] = useState('');
   const [filterUrgency, setFilterUrgency] = useState('');
   const [viewMode, setViewMode] = useState('cards'); // 'cards' | 'table'
+  const [activeTab, setActiveTab] = useState('subscriptions'); // 'subscriptions' | 'payments'
   const pageSize = 15;
 
   // Модальные окна
@@ -112,9 +113,12 @@ function BillingManager() {
   });
 
   useEffect(() => {
-    fetchBillingData();
+    const controller = new AbortController();
-    fetchExchangeRates();
+    const signal = controller.signal;
-    fetchServers();
+    fetchBillingData(signal);
+    fetchExchangeRates(signal);
+    fetchServers(signal);
+    return () => controller.abort();
   }, []);
 
   // Автоматическая синхронизация: добавляем серверы без записей в биллинге
@@ -161,11 +165,12 @@ function BillingManager() {
   }, [servers, loading]);
 
 
-  const fetchExchangeRates = async () => {
+  const fetchExchangeRates = async (abortSignal) => {
     setRatesLoading(true);
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
       // Основной источник: ЦБ РФ (base = RUB)
-      const cbr = await axios.get('https://www.cbr-xml-daily.ru/latest.js');
+      const cbr = await axios.get('https://www.cbr-xml-daily.ru/latest.js', opts);
       const rubPerUsd = cbr.data && cbr.data.rates?.USD ? 1 / Number(cbr.data.rates.USD) : null;
       const rubPerEur = cbr.data && cbr.data.rates?.EUR ? 1 / Number(cbr.data.rates.EUR) : null;
 
@@ -179,12 +184,13 @@ function BillingManager() {
         return;
       }
     } catch (error) {
+      if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
       console.warn('ЦБ недоступен, пробуем резервный источник:', error?.message);
     }
 
     try {
       // Резервный источник: open.er-api
-      const response = await axios.get('https://open.er-api.com/v6/latest/USD');
+      const response = await axios.get('https://open.er-api.com/v6/latest/USD', opts);
       const rates = response.data?.rates || {};
       setExchangeRates({
         USD: 1,
@@ -192,6 +198,7 @@ function BillingManager() {
         RUB: rates.RUB || 1
       });
     } catch (error) {
+      if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
       console.error('Ошибка при загрузке курсов валют:', error);
       // Фолбек на разумные значения
       setExchangeRates({ USD: 1, EUR: 1.05, RUB: 95 });
@@ -200,19 +207,22 @@ function BillingManager() {
     }
   };
 
-  const fetchServers = async () => {
+  const fetchServers = async (abortSignal) => {
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
-      const res = await api.get(`/servers`);
+      const res = await api.get(`/servers`, opts);
       setServers(Array.isArray(res.data) ? res.data : []);
     } catch (error) {
+      if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
       console.error('Ошибка при загрузке серверов:', error);
     }
   };
 
-  const fetchBillingData = async () => {
+  const fetchBillingData = async (abortSignal) => {
     setLoading(true);
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
-      const response = await api.get(`/billing`);
+      const response = await api.get(`/billing`, opts);
       const rates = exchangeRates; // из closure, на первой загрузке может быть {1,1,1} — для USD достаточно
       const toRUB = (amt, ccy) => {
         if (!amt) return 0;
@@ -250,6 +260,7 @@ function BillingManager() {
       setBillingData(normalized);
       setError('');
     } catch (err) {
+      if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
       console.error('Ошибка при загрузке данных биллинга:', err);
       setError('Ошибка при загрузке данных');
       setBillingData([]);
@@ -298,6 +309,10 @@ function BillingManager() {
     return sum + convertToRUB(item.monthlyCost || 0, item.monthlyCostCurrency || 'USD');
   }, 0);
 
+  const totalPaymentsCount = billingData.reduce((sum, item) => {
+    return sum + ((item.payments && Array.isArray(item.payments) ? item.payments.length : 0));
+  }, 0);
+
   const urgentPayments = billingData.filter(item => {
     const nextPayment = new Date(item.nextPaymentDate);
     const now = new Date();
@@ -576,8 +591,31 @@ function BillingManager() {
       {/* Заголовок */}
       <PageHeader
         title="Биллинг"
-        pretitle="Финансы / Инфраструктура"
+        icon={<IconCreditCard size={24} />}
         actions={
+          <div className="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">
+            <div className="btn-group me-sm-2" role="group">
+              <button
+                className={`btn ${activeTab === 'subscriptions' ? 'btn-primary' : 'btn-outline-primary'}`}
+                onClick={() => setActiveTab('subscriptions')}
+              >
+                <IconServer size={16} className="me-1 d-none d-sm-inline" />
+                Подписки
+                <span className={`badge ms-1 ${activeTab === 'subscriptions' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
+                  {billingData.length}
+                </span>
+              </button>
+              <button
+                className={`btn ${activeTab === 'payments' ? 'btn-primary' : 'btn-outline-primary'}`}
+                onClick={() => setActiveTab('payments')}
+              >
+                <IconHistory size={16} className="me-1 d-none d-sm-inline" />
+                История платежей
+                <span className={`badge ms-1 ${activeTab === 'payments' ? 'bg-white text-primary' : 'bg-primary-lt text-primary'}`}>
+                  {totalPaymentsCount}
+                </span>
+              </button>
+            </div>
             <PageHeaderActions
               loading={loading}
               onRefresh={() => { fetchBillingData(); fetchServers(); }}
@@ -587,6 +625,7 @@ function BillingManager() {
               onSave={handleSaveChanges}
               disableSave={loading}
             />
+          </div>
         }
       />
 
@@ -656,17 +695,18 @@ function BillingManager() {
         </div>
       </div>
 
-      {/* Основная секция */}
+      {/* Основная секция: Подписки */}
+      {activeTab === 'subscriptions' && (
         <div className="card">
-        <div className="card-header">
+          <div className="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
-          <div className="d-flex align-items-center gap-3 flex-grow-1">
             <h3 className="card-title mb-0">
               Подписки
               <span className="badge bg-blue-lt text-blue ms-2">{filteredData.length}</span>
             </h3>
 
+            <div className="d-flex flex-wrap align-items-center gap-2 flex-grow-1 justify-content-end">
               {/* Поиск */}
-            <div className="input-icon flex-grow-1" style={{ maxWidth: '280px' }}>
+              <div className="input-icon" style={{ minWidth: '220px', maxWidth: '280px' }}>
                 <span className="input-icon-addon">
                   <IconSearch size={16} />
                 </span>
@@ -680,21 +720,21 @@ function BillingManager() {
               </div>
 
               {/* Быстрые фильтры */}
-            <div className="d-flex gap-1">
+              <div className="btn-group" role="group">
                 <button 
-                className={`btn btn-sm ${filterUrgency === '' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                  className={`btn ${filterUrgency === '' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
                   onClick={() => { setFilterUrgency(''); setCurrentPage(1); }}
                 >
                   Все
                 </button>
                 <button 
-                className={`btn btn-sm ${filterUrgency === 'overdue' ? 'btn-red' : 'btn-outline-secondary'}`}
+                  className={`btn ${filterUrgency === 'overdue' ? 'btn-outline-danger active' : 'btn-outline-secondary'}`}
                   onClick={() => { setFilterUrgency('overdue'); setCurrentPage(1); }}
                 >
                   Просрочено
                 </button>
                 <button 
-                className={`btn btn-sm ${filterUrgency === 'urgent' ? 'btn-yellow' : 'btn-outline-secondary'}`}
+                  className={`btn ${filterUrgency === 'urgent' ? 'btn-outline-warning active' : 'btn-outline-secondary'}`}
                   onClick={() => { setFilterUrgency('urgent'); setCurrentPage(1); }}
                 >
                   Срочно
@@ -702,23 +742,22 @@ function BillingManager() {
               </div>
 
               {/* Переключатель вида */}
-            <div className="btn-group btn-group-sm" role="group">
+              <div className="btn-group" role="group">
                 <button
-                className={`btn ${viewMode === 'cards' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                  className={`btn ${viewMode === 'cards' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
                   onClick={() => setViewMode('cards')}
                   title="Карточки"
                 >
                   <IconLayoutGrid size={16} />
                 </button>
                 <button
-                className={`btn ${viewMode === 'table' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                  className={`btn ${viewMode === 'table' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
                   onClick={() => setViewMode('table')}
                   title="Таблица"
                 >
                   <IconList size={16} />
                 </button>
               </div>
-          </div>
 
               <div className="card-actions">
                 <button className="btn btn-primary" onClick={handleAddItem}>
@@ -727,6 +766,7 @@ function BillingManager() {
                 </button>
               </div>
             </div>
+          </div>
 
           {/* Контент: карточки или таблица */}
           {paginatedData.length === 0 ? (
@@ -874,10 +914,10 @@ function BillingManager() {
                             <span className="badge bg-secondary-lt text-secondary">Неактивен</span>
                           )}
                         </td>
-                      <td>
+                        <td className="text-end">
-                        <div className="btn-list gap-1 justify-content-end flex-nowrap">
+                          <div className="btn-group" role="group">
                             <button
-                            className="btn btn-outline-success btn-sm"
+                              className="btn btn-outline-success"
                               onClick={() => {
                                 setPaymentDraft({
                                   serverId: item.id,
@@ -894,14 +934,14 @@ function BillingManager() {
                               Оплата
                             </button>
                             <button
-                            className="btn btn-outline-secondary btn-sm"
+                              className="btn btn-outline-secondary"
                               onClick={() => handleEditItem(item)}
                               title="Редактировать"
                             >
                               <IconEdit size={14} />
                             </button>
                             <button
-                            className="btn btn-outline-danger btn-sm"
+                              className="btn btn-outline-danger"
                               onClick={() => handleDeleteItem(item)}
                               title="Удалить"
                             >
@@ -927,8 +967,10 @@ function BillingManager() {
             />
           )}
         </div>
+      )}
 
       {/* История платежей — компактная версия */}
+      {activeTab === 'payments' && (
       <div className="card mt-4">
         <div className="card-header">
           <h3 className="card-title d-flex align-items-center gap-2">
@@ -1046,6 +1088,7 @@ function BillingManager() {
           </div>
         </div>
       </div>
+      )}
 
       {/* Модальные окна */}
       <FormModal

frontend/src/CommunitiesManager.jsx

@@ -14,11 +14,14 @@ import {
   IconLink,
   IconRefresh,
   IconSortAscending,
-  IconSortDescending
+  IconSortDescending,
+  IconUpload,
+  IconDownload,
+  IconDeviceFloppy
 } from '@tabler/icons-react';
-import PageHeaderActions from './components/PageHeaderActions.jsx';
+import PageHeader from './components/PageHeader.jsx';
+import PortalDropdown from './components/PortalDropdown.jsx';
 import EmptyState from './components/EmptyState.jsx';
-import Breadcrumbs from './components/Breadcrumbs.jsx';
 import CommunityStats from './components/CommunityStats.jsx';
 import SavedFilters from './components/SavedFilters.jsx';
 import FormModal from './components/FormModal.jsx';
@@ -350,41 +353,12 @@ function CommunitiesManager() {
   };
 
   return (
-    <div className="page-wrapper">
+    <div>
-      <div className="page-header d-print-none">
+      <PageHeader
-        <div className="container-xl">
+        title="Справочник Community"
-          <div className="row g-2 align-items-center">
+        icon={<IconFilter size={24} />}
-            <div className="col">
-              <h2 className="page-title">
-                <IconFilter className="icon me-2" />
-                Справочник Community
-              </h2>
-              <div className="page-pretitle">
-                <Breadcrumbs items={[
-                  { label: 'Главная', to: '/dashboard' },
-                  { label: 'Данные' },
-                  { label: 'Community' },
-                ]} />
-              </div>
-            </div>
-            <div className="col-auto ms-auto d-print-none">
-              <PageHeaderActions
-                loading={loading}
-                onRefresh={fetchItems}
-                disableRefresh={loading}
-                onImport={handleImport}
-                onExport={handleExport}
-                disableExport={items.length === 0}
-                onSave={handleSave}
-                disableSave={loading}
       />
-            </div>
-          </div>
-        </div>
-      </div>
 
-      <div className="page-body">
-        <div className="container-xl">
       {/* Уведомления */}
       {error && (
         <ErrorAlert message={error} onClose={() => setError('')} onRetry={fetchItems} />
@@ -403,44 +377,97 @@ function CommunitiesManager() {
         </div>
       )}
 
-          {/* Вкладки: Список / Статистика в стиле Tabler */}
+      {/* Табы и кнопки в одной строке, единый стиль btn-primary */}
-          <div className="card mb-3">
+      <div className="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
-            <div className="card-header border-0 pb-0">
+        <div className="btn-group" role="tablist" aria-label="Переключение режимов страницы">
-              <ul className="nav nav-tabs card-header-tabs" role="tablist">
-                <li className="nav-item" role="presentation">
           <button
-                    className={`nav-link ${activeTab === 'list' ? 'active' : ''}`}
+            type="button"
+            className={`btn ${activeTab === 'list' ? 'btn-primary' : 'btn-outline-primary'}`}
             onClick={() => setActiveTab('list')}
-                    type="button"
             role="tab"
-                    aria-selected={activeTab === 'list'}
+            aria-pressed={activeTab === 'list'}
           >
-                    <IconList className="me-2" size={18} />
+            <IconList size={16} className="me-1 d-none d-sm-inline" />
-                    Список communities
+            Список
-                    <span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
+            <span
+              className={`badge ms-1 ${
+                activeTab === 'list'
+                  ? 'bg-white text-primary'
+                  : 'bg-primary-lt text-primary'
+              }`}
+            >
+              {filtered.length}
+            </span>
           </button>
-                </li>
-                <li className="nav-item" role="presentation">
           <button
-                    className={`nav-link ${activeTab === 'stats' ? 'active' : ''}`}
-                    onClick={() => setActiveTab('stats')}
             type="button"
+            className={`btn ${activeTab === 'stats' ? 'btn-primary' : 'btn-outline-primary'}`}
+            onClick={() => setActiveTab('stats')}
             role="tab"
-                    aria-selected={activeTab === 'stats'}
+            aria-pressed={activeTab === 'stats'}
           >
-                    <IconChartBar className="me-2" size={18} />
+            <IconChartBar size={16} className="me-1 d-none d-sm-inline" />
-                    Статистика использования
+            Статистика
+            <span
+              className={`badge ms-1 ${
+                activeTab === 'stats'
+                  ? 'bg-white text-primary'
+                  : 'bg-primary-lt text-primary'
+              }`}
+            >
+              {items.length}
+            </span>
+          </button>
+        </div>
+        <div className="btn-group">
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={fetchItems}
+            disabled={loading}
+            title="Обновить данные"
+          >
+            <IconRefresh size={16} className={loading ? 'spin me-1' : 'me-1'} />
+            Обновить
+          </button>
+          <PortalDropdown
+            buttonClassName="btn btn-primary dropdown-toggle"
+            buttonProps={{ title: 'Импорт/Экспорт' }}
+            align="left"
+            buttonContent={<><IconDownload className="me-1" /> Импорт/Экспорт</>}
+          >
+            <button type="button" className="dropdown-item" onClick={handleImport}>
+              <IconUpload className="me-1" /> Импорт
+            </button>
+            <button
+              type="button"
+              className="dropdown-item"
+              onClick={handleExport}
+              disabled={items.length === 0}
+            >
+              <IconDownload className="me-1" /> Экспорт
+            </button>
+          </PortalDropdown>
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={handleSave}
+            disabled={loading}
+            title="Сохранить"
+          >
+            {loading ? (
+              <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" />
+            ) : (
+              <IconDeviceFloppy className="me-1" />
+            )}
+            Сохранить
           </button>
-                </li>
-              </ul>
         </div>
       </div>
 
       {/* Отображение списка communities */}
       {activeTab === 'list' && (
-            <div className="row g-3">
+        <div className="card card-flat">
-            <div className="col-12">
-              <div className="card">
           <div className="card-header">
             <div className="row align-items-center w-100 g-2">
               <div className="col">
@@ -643,16 +670,12 @@ function CommunitiesManager() {
             )}
           </div>
         </div>
-            </div>
-          </div>
       )}
 
       {/* Отображение статистики communities */}
       {activeTab === 'stats' && (
         <CommunityStats communities={items} />
       )}
-        </div>
-      </div>
       {/* Модальное окно добавления */}
       <FormModal
         show={addModalOpen}

frontend/src/Dashboard.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import api from './lib/api.js';
 import { formatDateTime } from './lib/datetime.js';
@@ -15,14 +15,17 @@ import {
   IconFilter,
   IconDownload,
   IconCreditCard,
-  IconSearch
+  IconSearch,
+  IconChevronDown,
+  IconChevronUp,
 } from '@tabler/icons-react';
+import { getIconById } from './lib/brandIcons.js';
 import PageHeader from './components/PageHeader.jsx';
-import Breadcrumbs from './components/Breadcrumbs.jsx';
 import TopNStats from './components/TopNStats.jsx';
 import TrendIndicator from './components/TrendIndicator.jsx';
 import LastSaved from './components/LastSaved.jsx';
 import Tooltip from './components/Tooltip.jsx';
+import Sparkline from './components/Sparkline.jsx';
 
 function StatCard({ icon: Icon, color, value, title, subtitle, to, trend, previousValue }) {
   return (
@@ -75,6 +78,105 @@ function MetricCard({ title, value, icon: Icon, color, description }) {
   );
 }
 
+/** Обёртка для Sparkline по ширине контейнера */
+function PingSparklineWrap({ history, color }) {
+  const wrapRef = useRef(null);
+  const [width, setWidth] = useState(280);
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setWidth(el.offsetWidth || 280));
+    ro.observe(el);
+    setWidth(el.offsetWidth || 280);
+    return () => ro.disconnect();
+  }, []);
+  return (
+    <div ref={wrapRef} className="mt-2" style={{ height: 56, width: '100%', minWidth: 0 }}>
+      <Sparkline
+        data={history}
+        width={width}
+        height={56}
+        strokeColor={color ? `var(--tblr-${color})` : 'var(--tblr-primary)'}
+        fillColor={color ? `var(--tblr-${color})` : 'var(--tblr-primary)'}
+        strokeWidth={2}
+      />
+    </div>
+  );
+}
+
+/** Разворачиваемая карточка сервиса: свёрнутый вид — иконка и пинг; развёрнутый — тренд и мини-график (как Revenue в Tabler) */
+function PingServiceCard({ config, ms, previousMs, history = [], loading, isExpanded, onToggle }) {
+  const { name, host, color } = config;
+  const { Icon } = getIconById(config.icon);
+  const value = loading ? '...' : (ms != null ? `${ms} мс` : '—');
+  const currentNum = typeof ms === 'number' ? ms : null;
+
+  return (
+    <div
+      className={`card h-100 position-relative ${isExpanded ? '' : 'cursor-pointer'}`}
+      style={isExpanded ? { minHeight: '200px' } : undefined}
+      role="button"
+      tabIndex={0}
+      onClick={onToggle}
+      onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onToggle()}
+      aria-expanded={isExpanded}
+      aria-label={isExpanded ? `Свернуть ${name}` : `Развернуть ${name}, пинг ${value}`}
+    >
+      {!isExpanded ? (
+        <div className="card-body d-flex align-items-center">
+          <span className={`avatar avatar-lg me-3 bg-${color}-lt text-${color} border-0 rounded`}>
+            <Icon size={28} stroke={1.5} />
+          </span>
+          <div className="flex-grow-1 min-w-0">
+            <div className="h4 mb-0 fw-bold">{value}</div>
+            <div className="text-muted small text-truncate" title={`${name} (${host})`}>
+              {name} <span className="opacity-75">({host})</span>
+            </div>
+          </div>
+          <IconChevronDown size={18} className="text-muted ms-1 flex-shrink-0" />
+        </div>
+      ) : (
+        <div className="card-body">
+          <div className="d-flex align-items-center justify-content-between mb-2">
+            <span className="text-muted text-uppercase small fw-semibold">{name}</span>
+            <span className="text-muted small d-flex align-items-center">
+              Последние замеры
+              <IconChevronUp size={14} className="ms-1" title="Свернуть" />
+            </span>
+          </div>
+          <div className="d-flex align-items-baseline flex-wrap gap-2 mb-3">
+            <div className="h3 mb-0 fw-bold">
+              {loading ? '...' : currentNum != null ? `${currentNum} мс` : '—'}
+            </div>
+            {!loading && currentNum != null && previousMs != null && (
+              <TrendIndicator
+                value={currentNum}
+                previousValue={previousMs}
+                format="percent"
+                inverse
+              />
+            )}
+          </div>
+          {history.length > 0 && (() => {
+            const sum = history.reduce((a, b) => a + b, 0);
+            const avg = Math.round(sum / history.length);
+            return (
+              <div className="text-muted small mb-2">
+                Среднее за период: <span className="fw-semibold text-body">{avg} мс</span>
+              </div>
+            );
+          })()}
+          {history.length > 0 ? (
+            <PingSparklineWrap history={history} color={color} />
+          ) : (
+            <div className="text-muted small mt-2">Нет истории замеров. Данные накапливаются при обновлении.</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function Dashboard() {
   // Глобальный поиск удалён по требованию UX
   const [stats, setStats] = useState({
@@ -93,20 +195,28 @@ function Dashboard() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [lastFetchTime, setLastFetchTime] = useState(null);
+  const [pingServices, setPingServices] = useState(null);
+  const [pingServicesConfig, setPingServicesConfig] = useState([]);
+  const [pingLoading, setPingLoading] = useState(true);
+  const [pingHistory, setPingHistory] = useState(() => ({}));
+  const [expandedPingId, setExpandedPingId] = useState(null);
 
   useEffect(() => {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
     async function fetchStats() {
       setLoading(true);
       setError(null);
       try {
-        // Загружаем данные с обработкой ошибок для каждого endpoint
+        const opts = { signal };
         const results = await Promise.allSettled([
-          api.get('/domains-new', { params: { countOnly: true } }),
+          api.get('/domains-new', { params: { countOnly: true }, ...opts }),
-          api.get('/ip-ranges', { params: { countOnly: true } }),
+          api.get('/ip-ranges', { params: { countOnly: true }, ...opts }),
-          api.get('/asns', { params: { countOnly: true } }),
+          api.get('/asns', { params: { countOnly: true }, ...opts }),
-          api.get('/servers'),
+          api.get('/servers', opts),
-          api.get('/servers/availability', { params: { ttlSeconds: 60 } }),
+          api.get('/servers/availability', { params: { ttlSeconds: 60 }, ...opts }),
-          api.get('/s3/last-modified')
+          api.get('/s3/last-modified', opts)
         ]);
 
         // Обрабатываем результаты
@@ -171,6 +281,7 @@ function Dashboard() {
           console.warn('Некоторые API недоступны:', errors.map(e => e.reason?.message));
         }
       } catch (e) {
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
         console.error('Критическая ошибка загрузки статистики:', e);
         setError('Не удалось загрузить статистику');
         setStats({
@@ -189,6 +300,44 @@ function Dashboard() {
       }
     }
     fetchStats();
+    return () => controller.abort();
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    api.get('/ping-services-list', { signal: controller.signal })
+      .then(({ data }) => {
+        if (Array.isArray(data?.list)) setPingServicesConfig(data.list);
+      })
+      .catch((e) => {
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+        setPingServicesConfig([]);
+      });
+    return () => controller.abort();
+  }, []);
+
+  function fetchPingServices(forceRefresh = false, abortSignal) {
+    setPingLoading(true);
+    const opts = abortSignal ? { signal: abortSignal } : {};
+    api.get('/ping-services', { params: forceRefresh ? { refresh: 1 } : {}, ...opts })
+      .then(({ data }) => {
+        if (!data || typeof data !== 'object') return;
+        const byId = data.byId ?? data;
+        const history = data.history ?? {};
+        setPingServices(byId);
+        setPingHistory(typeof history === 'object' ? history : {});
+      })
+      .catch((e) => {
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+        setPingServices(null);
+      })
+      .finally(() => setPingLoading(false));
+  }
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetchPingServices(false, controller.signal);
+    return () => controller.abort();
   }, []);
 
   if (error) {
@@ -206,11 +355,7 @@ function Dashboard() {
       {/* Заголовок страницы */}
       <PageHeader
         title="Панель"
-        pretitle={(
+        icon={<IconCloud size={24} />}
-          <Breadcrumbs items={[
-            { label: 'Главная' },
-          ]} />
-        )}
         actions={(
           <div className="d-flex align-items-center gap-3">
             {lastFetchTime && (
@@ -225,6 +370,43 @@ function Dashboard() {
         )}
       />
 
+      {/* Пинг до сервисов (список из настроек / Пинг сервисов) */}
+      <div className="d-flex align-items-center justify-content-between mb-2">
+        <h3 className="mb-0">Пинг сервисов</h3>
+        <Tooltip content="Принудительно обновить пинг (без учёта кэша), история и тренд накапливаются">
+          <button
+            type="button"
+            className="btn btn-outline-primary btn-sm"
+            onClick={() => fetchPingServices(true)}
+            disabled={pingLoading}
+          >
+            <IconRefresh className={pingLoading ? 'spin me-1' : 'me-1'} size={16} />
+            Обновить пинг
+          </button>
+        </Tooltip>
+      </div>
+      <div className="row g-3 mb-4">
+        {pingServicesConfig.map((config) => (
+          <div
+            key={config.id}
+            className={expandedPingId === config.id ? 'col-12' : 'col-6 col-md-3'}
+          >
+            <PingServiceCard
+              config={config}
+              ms={pingServices?.[config.id]?.ms ?? null}
+              previousMs={(() => {
+              const hist = pingHistory[config.id] || [];
+              return hist.length >= 2 ? hist[hist.length - 2] : null;
+            })()}
+              history={pingHistory[config.id] || []}
+              loading={pingLoading}
+              isExpanded={expandedPingId === config.id}
+              onToggle={() => setExpandedPingId((id) => (id === config.id ? null : config.id))}
+            />
+          </div>
+        ))}
+      </div>
+
       {/* Основные метрики */}
       <div className="row g-3 mb-4">
         <div className="col-md-3">

frontend/src/DomainsNewManager.jsx

@@ -29,9 +29,7 @@ import {
 import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
 import PageHeader from './components/PageHeader.jsx';
 import EmptyState from './components/EmptyState.jsx';
-import Breadcrumbs from './components/Breadcrumbs.jsx';
 import { IconAlertTriangle } from '@tabler/icons-react';
-import S3MetaBar from './components/S3MetaBar.jsx';
 import PageHeaderActions from './components/PageHeaderActions.jsx';
 import ConfirmDialog from './components/ConfirmDialog.jsx';
 import WsUpdateModal from './components/WsUpdateModal.jsx';
@@ -47,6 +45,9 @@ import BulkActionsBar from './components/BulkActionsBar.jsx';
 import FormField from './components/FormField.jsx';
 import Tooltip from './components/Tooltip.jsx';
 import Pagination from './components/Pagination.jsx';
+import AddItemModal from './components/AddItemModal.jsx';
+import LastSaved from './components/LastSaved.jsx';
+import FormModal from './components/FormModal.jsx';
 import { useToast } from './components/ToastContainer.jsx';
 
 const API_URL = '/api';
@@ -65,17 +66,18 @@ function DomainsNewManager() {
   const [searchTerm, setSearchTerm] = useState('');
   const searchTimer = useRef(null);
   const didInit = useRef(false);
-  const [editingDomain, setEditingDomain] = useState(null);
   const [editingValue, setEditingValue] = useState('');
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [itemBeingEdited, setItemBeingEdited] = useState(null);
   const [loading, setLoading] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
+  const [addModalOpen, setAddModalOpen] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [totalItems, setTotalItems] = useState(0);
   const [sortField, setSortField] = useState('domain');
   const [sortOrder, setSortOrder] = useState('asc');
   const [filterCommunity, setFilterCommunity] = useState('');
-  const editInputRef = useRef(null);
   const pageSize = 10;
 
   // Bulk operations
@@ -84,14 +86,25 @@ function DomainsNewManager() {
   // Справочник community для подсказок
   const [communities, setCommunities] = useState([]);
   useEffect(() => {
+    const controller = new AbortController();
+    const signal = controller.signal;
     (async () => {
       try {
-        const res = await api.get(`/communities`);
+        const res = await api.get(`/communities`, { signal });
         setCommunities(Array.isArray(res.data) ? res.data : []);
       } catch (e) {
-        // тихо игнорируем
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
       }
     })();
+    (async () => {
+      try {
+        const r = await api.get('/ws/url', { signal });
+        setWsUrl(String(r.data?.url || ''));
+      } catch (e) {
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      }
+    })();
+    return () => controller.abort();
   }, []);
 
   const renderCommunityBadge = (value) => (<CommunityBadge value={value} communities={communities} />);
@@ -108,14 +121,11 @@ function DomainsNewManager() {
   const [wsOpen, setWsOpen] = useState(false);
   const [wsUrl, setWsUrl] = useState('');
 
-  useEffect(() => {
+  const fetchItems = async (abortSignal) => {
-    (async () => { try { const r = await api.get('/ws/url'); setWsUrl(String(r.data?.url || '')); } catch {} })();
-  }, []);
-
-  const fetchItems = async () => {
     setLoading(true);
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
-      const response = await api.get(`/domains-new`, { params: { offset: 0, limit: 0, format: 'std' } });
+      const response = await api.get(`/domains-new`, { params: { offset: 0, limit: 0, format: 'std' }, ...opts });
       const payload = Array.isArray(response.data?.items) ? response.data.items : [];
       const total = payload.length;
       setItems(payload);
@@ -127,6 +137,7 @@ function DomainsNewManager() {
       setContentLength(typeof lengthHeader !== 'undefined' ? Number(lengthHeader) : null);
       setError('');
     } catch (error) {
+      if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
       console.error('Error fetching domains-new:', error);
       setError('Не удалось загрузить домены. Проверьте, запущен ли бэкенд.');
     } finally {
@@ -134,42 +145,58 @@ function DomainsNewManager() {
     }
   };
 
-  // Подгрузка при изменении страницы/поиска/фильтра
+  useEffect(() => {
-  useEffect(() => { if (!didInit.current) { didInit.current = true; fetchItems(); } }, []);
+    if (!didInit.current) {
+      didInit.current = true;
+      const controller = new AbortController();
+      fetchItems(controller.signal);
+      return () => controller.abort();
+    }
+  }, []);
+
+  const handleAddItem = (item) => {
+    // Если item передан (из модалки), используем его, иначе из state (старый способ)
+    const domain = item?.domain || newItem.domain;
+    const community = item?.community || newItem.community;
+    
+    const domainOk = isValidDomain(domain);
+    const communityOk = isValidCommunity(community);
     
-  const handleAddItem = () => {
-    const domainOk = isValidDomain(newItem.domain);
-    const communityOk = isValidCommunity(newItem.community);
-    setNewInvalid({ domain: !domainOk, community: !communityOk });
     if (!domainOk || !communityOk) {
       setError('Заполните корректный домен (example.com) и числовой community.');
       return;
     }
+    
     setError('');
-    setItems([...items, { domain: newItem.domain.trim().toLowerCase(), community: String(newItem.community).trim() }]);
+    const newDomain = { domain: domain.trim().toLowerCase(), community: String(community).trim() };
-    setNewItem({ domain: '', community: '' });
+    setItems([...items, newDomain]);
+    if (!item) setNewItem({ domain: '', community: '' }); // Сброс только если не из модалки
     setNewInvalid({ domain: false, community: false });
   };
 
   const handleEdit = (item) => {
-    setEditingDomain(item.domain);
+    setItemBeingEdited(item);
     setEditingValue(item.community);
+    setEditModalOpen(true);
   };
 
-  const handleSaveEdit = (domainName) => {
+  const handleSaveEdit = () => {
+    if (!itemBeingEdited) return;
     if (!isValidCommunity(editingValue)) {
       setError('Community должен быть числом.');
       return;
     }
     const updatedItems = items.map(i =>
-      i.domain === domainName ? { ...i, community: String(editingValue).trim() } : i
+      i.domain === itemBeingEdited.domain ? { ...i, community: String(editingValue).trim() } : i
     );
     setItems(updatedItems);
-    setEditingDomain(null);
+    setEditModalOpen(false);
+    setItemBeingEdited(null);
   };
 
   const handleCancelEdit = () => {
-    setEditingDomain(null);
+    setEditModalOpen(false);
+    setItemBeingEdited(null);
   };
 
   const handleDeleteItem = (domainNameToDelete) => {
@@ -419,13 +446,6 @@ function DomainsNewManager() {
     }
   };
 
-  // Улучшенный инлайн-редакт
-  useEffect(() => {
-    if (editingDomain && editInputRef.current) {
-      editInputRef.current.focus();
-    }
-  }, [editingDomain]);
-
   // Глобальные хоткеи: Ctrl+S — сохранить изменения
   useEffect(() => {
     const onKey = (e) => {
@@ -438,9 +458,15 @@ function DomainsNewManager() {
     return () => window.removeEventListener('keydown', onKey);
   }, [loading, items, originalItems, etag, sortField, sortOrder, filterCommunity]);
 
-  const handleEditKeyDown = (e, domainName) => {
+  const handleEditKeyDown = (e) => {
-    if (e.key === 'Enter') handleSaveEdit(domainName);
+    if (e.key === 'Enter') {
-    if (e.key === 'Escape') handleCancelEdit();
+      e.preventDefault();
+      handleSaveEdit();
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      handleCancelEdit();
+    }
   };
 
   // Bulk operations handlers
@@ -507,18 +533,8 @@ function DomainsNewManager() {
 
       <PageHeader
         title="Домены"
-        pretitle={(
+        icon={<IconWorld size={24} />}
-          <Breadcrumbs 
+        meta={<LastSaved timestamp={lastModified} variant="compact" />}
-            items={[
-              { label: 'Главная', to: '/dashboard' },
-              { label: 'Данные' },
-              { label: 'Домены', count: filtered.length },
-            ]}
-            showBack={false}
-            filterInfo={filterCommunity ? `Community: ${filterCommunity}` : (searchTerm ? `Поиск: "${searchTerm}"` : null)}
-            count={filtered.length}
-          />
-        )}
         actions={(
           <PageHeaderActions
             loading={loading}
@@ -536,6 +552,7 @@ function DomainsNewManager() {
             onSave={handleSaveChanges}
             disableSave={loading}
             onHistory={() => setHistoryOpen(true)}
+            lastModified={lastModified}
             onOnlineUpdate={() => setWsOpen(true)}
             onBackgroundUpdate={async () => {
               try {
@@ -553,134 +570,17 @@ function DomainsNewManager() {
         )}
       />
 
-      <div className="row">
+      <AddItemModal
-        <div className="col-lg-3">
+        open={addModalOpen}
-          {/* Classic Add New Domain Card (improved) */}
+        onClose={() => setAddModalOpen(false)}
-          <div className="card card-md animate-in">
+        onSubmit={handleAddItem}
-            <div className="card-header bg-primary-lt">
+        type="domain"
-              <h3 className="card-title text-primary">
-                <IconPlus className="icon me-2" />
-                Добавить новый домен
-              </h3>
-            </div>
-            <div className="card-body">
-              <form onSubmit={(e) => { e.preventDefault(); handleAddItem(); }}>
-                <div className="mb-3">
-                  <label className="form-label required">Домен</label>
-                  <div className="input-icon">
-                    <span className="input-icon-addon">
-                      <IconWorld size={18} />
-                    </span>
-                    <input
-                      type="text"
-                      className={`form-control${newInvalid.domain ? ' is-invalid' : isValidDomain(newItem.domain) ? ' is-valid' : ''}`}
-                      placeholder="example.com"
-                      value={newItem.domain}
-                      onChange={(e) => setNewItem({ ...newItem, domain: e.target.value })}
-                    />
-                  </div>
-                  {newInvalid.domain && <div className="invalid-feedback">Неверный формат домена</div>}
-                  {isValidDomain(newItem.domain) && !newInvalid.domain && (
-                    <div className="valid-feedback">Корректный формат домена</div>
-                  )}
-                  <div className="form-text text-muted small">
-                    Формат: sub.domain.tld (например foo.example.org)
-                  </div>
-                </div>
-                <div className="mb-3">
-                  <label className="form-label required">Community</label>
-                  <div className="input-icon">
-                    <span className="input-icon-addon">
-                      <IconHash size={18} />
-                    </span>
-                    <CommunityAutocompleteInput
-                      value={newItem.community}
-                      onChange={(v) => setNewItem({ ...newItem, community: v })}
         communities={communities}
-                      placeholder="Начните вводить номер или имя"
+        loading={loading}
-                      className={`form-control${newInvalid.community ? ' is-invalid' : isValidCommunity(newItem.community) ? ' is-valid' : ''}`}
-                      useShortValue={true}
       />
-                  </div>
-                  {newInvalid.community && <div className="invalid-feedback">Неверный формат community</div>}
-                  {isValidCommunity(newItem.community) && !newInvalid.community && (
-                    <div className="valid-feedback">Корректный формат community</div>
-                  )}
-                  <div className="form-text text-muted small">
-                    Формат: N или N:N (например 65000:100)
-                  </div>
-                  {(() => {
-                    const match = communities.find(c => c.value === String(newItem.community).trim());
-                    if (!match) return null;
-                    return (
-                      <div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
-                        <div className="d-flex">
-                          <div>
-                            <strong>{match.name || match.value}</strong>
-                            {match.description && <div className="text-muted small">{match.description}</div>}
-                            {match.tags && match.tags.length > 0 && (
-                              <div className="mt-1">
-                                {match.tags.map((tag, idx) => (
-                                  <span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>
-                                ))}
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })()}
-                </div>
-                <div className="form-footer">
-                  <button 
-                    type="submit" 
-                    className="btn btn-primary w-100"
-                    disabled={!isValidDomain(newItem.domain) || !isValidCommunity(newItem.community)}
-                  >
-                    <IconPlus className="icon me-2" />
-                    Добавить домен
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
 
-          {/* Дополнительные варианты */}
+      <div className="row">
-          <AccordionCard title={'Дополнительные варианты'} defaultOpen={false} className="animate-in" style={{animationDelay: '0.1s'}}>
+        <div className="col-12">
-            <QuickAddBar
-              placeholder={'example.com 65000:100'}
-              help={'Вставьте строки: DOMAIN ПРОБЕЛ COMMUNITY'}
-              parseLine={(line) => { const [d, c] = String(line).split(/\s+/); return { domain: (d||'').toLowerCase(), community: (c||'').trim() }; }}
-              validateItem={(obj) => isValidDomain(obj.domain) && isValidCommunity(obj.community)}
-              onApply={(list) => {
-                setItems(prev => {
-                  const merged = [...prev, ...list];
-                  const map = new Map();
-                  for (const it of merged) {
-                    const key = String(it.domain).trim().toLowerCase();
-                    if (!map.has(key)) map.set(key, { domain: key, community: String(it.community).trim() });
-                  }
-                  return Array.from(map.values());
-                });
-              }}
-            />
-            <div 
-              className="card card-md border-dashed mt-3 animate-in"
-              style={{animationDelay: '0.15s'}}
-              onDragOver={(e) => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--tblr-primary)'; }}
-              onDragLeave={(e) => { e.currentTarget.style.borderColor = ''; }}
-              onDrop={(e) => { e.currentTarget.style.borderColor = ''; onDropImport(e); }}
-            >
-              <div className="card-body text-center text-muted py-4">
-                <IconUpload size={32} className="mb-2 text-muted" />
-                <div className="fw-medium">Перетащите файл TXT/CSV сюда</div>
-                <div className="small">Формат: domain community</div>
-              </div>
-            </div>
-          </AccordionCard>
-        </div>
-
-        <div className="col-lg-9">
           {/* Bulk Actions Bar */}
           <BulkActionsBar
             selectedCount={selectedDomains.size}
@@ -691,16 +591,22 @@ function DomainsNewManager() {
             onExport={handleBulkExport}
           />
 
-          <div className="card animate-in" style={{animationDelay: '0.3s'}}>
+          <div className="card card-flat animate-in" style={{animationDelay: '0.3s'}}>
             <div className="card-header">
               <div className="row align-items-center w-100 g-2">
-                <div className="col-auto">
+                <div className="col">
-                  <h3 className="card-title mb-0">
+                  <div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
-                    <IconWorld className="icon me-2" size={20} />
+                    <div className="d-flex align-items-center gap-2">
-                    Список доменов 
+                      <IconWorld className="icon text-muted" size={18} />
-                    <span className="badge bg-blue-lt text-blue ms-2">{filtered.length}</span>
+                      <span className="text-muted text-uppercase small">Список</span>
-                  </h3>
+                      <span className="badge bg-blue-lt text-blue">{filtered.length}</span>
                     </div>
+                    <div className="d-none d-md-block text-muted small">
+                      Всего записей: {filtered.length}
+                    </div>
+                  </div>
+                </div>
+                <div className="col-12 mt-2"></div>
                 <div className="col">
                   <div className="d-flex gap-2 flex-wrap">
                     {/* Сохранённые фильтры */}
@@ -781,13 +687,24 @@ function DomainsNewManager() {
                     </div>
                   </div>
                 </div>
+                <div className="col-auto">
+                  <button
+                    className="btn btn-primary"
+                    onClick={() => setAddModalOpen(true)}
+                    title="Добавить новый домен"
+                  >
+                    <IconPlus className="me-1" size={18} />
+                    Добавить
+                  </button>
                 </div>
               </div>
-            {/* Мета-информация будет показана внизу карточки */}
+            </div>
+            <div className="card-body p-0">
+              {/* Таблица с лёгкой карточной подложкой (плоский стиль) */}
               {loading ? (
-              <TableSkeleton rows={10} cols={4} hasCheckbox={true} />
+                <TableSkeleton rows={10} cols={4} hasCheckbox={true} flat />
               ) : paginatedItems.length === 0 ? (
-              <TableEmpty cols={3}>
+                <TableEmpty cols={3} flat>
                   <EmptyState
                     title="Нет доменов"
                     description="Импортируйте или добавьте записи, чтобы начать."
@@ -803,7 +720,7 @@ function DomainsNewManager() {
                 </TableEmpty>
               ) : (
                 <div className="table-responsive">
-              <table className="table card-table table-vcenter table-nowrap mb-0">
+                  <table className="table table-flat table-vcenter table-nowrap mb-0">
                     <thead>
                       <tr>
                         <th style={{ width: '40px' }}>
@@ -843,7 +760,7 @@ function DomainsNewManager() {
                       {paginatedItems.map((item, idx) => (
                         <tr 
                           key={item.domain} 
-                      className={editingDomain === item.domain ? 'table-active' : (selectedDomains.has(item.domain) ? 'table-selected' : '')}
+                          className={selectedDomains.has(item.domain) ? 'table-selected' : ''}
                           style={{
                             animation: `fadeIn 0.3s ease ${idx * 0.02}s both`
                           }}
@@ -880,43 +797,10 @@ function DomainsNewManager() {
                             </div>
                           </td>
                           <td className="text-end">
-                        <div className="btn-group">
+                            <div className="btn-group btn-group-sm" role="group" aria-label={`Действия с доменом ${item.domain}`}>
-                          {editingDomain === item.domain ? (
-                            <>
-                            <CommunityAutocompleteInput
-                              value={editingValue}
-                              onChange={setEditingValue}
-                              communities={communities}
-                              onKeyDown={(e) => handleEditKeyDown(e, item.domain)}
-                              className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
-                              style={{ width: '150px' }}
-                              useShortValue={true}
-                            />
-                              <Tooltip content="Сохранить (Enter)">
-                                <button 
-                                  className="btn btn-success btn-icon btn-sm" 
-                                  onClick={() => handleSaveEdit(item.domain)} 
-                                  disabled={!isValidCommunity(editingValue)}
-                                  aria-label="Сохранить"
-                                >
-                                  <IconCheck size={16} />
-                                </button>
-                              </Tooltip>
-                              <Tooltip content="Отмена (Esc)">
-                                <button 
-                                  className="btn btn-secondary btn-icon btn-sm" 
-                                  onClick={handleCancelEdit}
-                                  aria-label="Отмена"
-                                >
-                                  <IconX size={16} />
-                                </button>
-                              </Tooltip>
-                            </>
-                          ) : (
-                            <>
                               <Tooltip content="Редактировать" position="top">
                                 <button 
-                                  className="btn btn-outline-primary btn-icon btn-sm" 
+                                  className="btn btn-icon btn-outline-primary" 
                                   aria-label="Редактировать" 
                                   onClick={() => handleEdit(item)}
                                   title="Редактировать"
@@ -924,19 +808,9 @@ function DomainsNewManager() {
                                   <IconEdit size={16} />
                                 </button>
                               </Tooltip>
-                              <Tooltip content="Копировать" position="top">
-                                <button 
-                                  className="btn btn-outline-secondary btn-icon btn-sm" 
-                                  aria-label="Копировать" 
-                                  onClick={() => copyToClipboard(`${item.domain} ${item.community}`)}
-                                  title="Копировать"
-                                >
-                                  <IconCopy size={16} />
-                                </button>
-                              </Tooltip>
                               <Tooltip content="Удалить" position="top">
                                 <button 
-                                  className="btn btn-outline-danger btn-icon btn-sm" 
+                                  className="btn btn-icon btn-outline-danger" 
                                   aria-label="Удалить" 
                                   onClick={() => confirmDelete(item)}
                                   title="Удалить"
@@ -944,8 +818,6 @@ function DomainsNewManager() {
                                   <IconTrash size={16} />
                                 </button>
                               </Tooltip>
-                            </>
-                          )}
                             </div>
                           </td>
                         </tr>
@@ -954,7 +826,8 @@ function DomainsNewManager() {
                   </table>
                 </div>
               )}
-            {/* Пагинация */}
+            </div>
+            <div className="card-footer border-top-0">
               <Pagination
                 currentPage={currentPage}
                 totalPages={totalPages}
@@ -962,7 +835,7 @@ function DomainsNewManager() {
                 pageSize={pageSize}
                 onPageChange={setCurrentPage}
               />
-            <S3MetaBar keys={["domainsNew"]} />
+            </div>
           </div>
         </div>
       </div>
@@ -1013,6 +886,42 @@ function DomainsNewManager() {
         url={wsUrl}
         onClose={() => setWsOpen(false)}
       />
+      {/* Модальное окно редактирования community */}
+      <FormModal
+        show={editModalOpen && !!itemBeingEdited}
+        onClose={handleCancelEdit}
+        onSubmit={handleSaveEdit}
+        title="Редактировать community"
+        submitLabel="Сохранить"
+        submitIcon={IconCheck}
+        size="md"
+        centered
+        disabled={!isValidCommunity(editingValue)}
+      >
+        {itemBeingEdited && (
+          <>
+            <p className="text-muted mb-2">
+              Домен: <span className="font-monospace">{itemBeingEdited.domain}</span>
+            </p>
+            <div className="mb-3">
+              <label className="form-label">Community</label>
+              <CommunityAutocompleteInput
+                value={editingValue}
+                onChange={setEditingValue}
+                communities={communities}
+                onKeyDown={handleEditKeyDown}
+                className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
+                useShortValue={true}
+              />
+              {!isValidCommunity(editingValue) && (
+                <div className="invalid-feedback d-block">
+                  Введите корректное значение community (число или N:N).
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </FormModal>
       <ConfirmModal
         show={clearCommunitiesOpen}
         onClose={() => setClearCommunitiesOpen(false)}

frontend/src/EasySwitchManager.jsx

@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import api from './lib/api.js';
+import { usePing } from './contexts/PingContext.jsx';
 import {
   IconSearch,
   IconRefresh,
@@ -15,6 +17,7 @@ import {
   IconChevronDown,
   IconChevronUp
 } from '@tabler/icons-react';
+import PageHeader from './components/PageHeader.jsx';
 
 // Функция для получения флага по коду страны
 const countryToFlag = (code) => {
@@ -49,29 +52,34 @@ function EasySwitchManager() {
   const [hasChanges, setHasChanges] = useState(false);
   const [expandedServers, setExpandedServers] = useState(new Set()); // Развернутые серверы
   const [groupByTags, setGroupByTags] = useState(true); // Группировка по тегам
-  // Пинги по шлюзам: ключ `${routerId}:${gatewayIp}` → avg RTT в мс
+  // Единый источник пингов (кеш + API) — общий с страницей фильтров
-  const [pingMap, setPingMap] = useState({});
+  const { pingMap, requestPings } = usePing();
+  const location = useLocation();
 
   useEffect(() => {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
     const initData = async () => {
       try {
         // Загружаем communities
-        const commRes = await api.get(`/communities`);
+        const commRes = await api.get(`/communities`, { signal });
         const communities = Array.isArray(commRes.data) ? commRes.data : [];
         setCommunitiesDirectory(communities);
 
         // Загружаем inventory servers
-        const invRes = await api.get(`/servers`);
+        const invRes = await api.get(`/servers`, { signal });
         const inventory = Array.isArray(invRes.data) ? invRes.data : [];
         setInventoryServers(inventory);
 
         // Загружаем network-config (gateways и туннели)
         let ncGateways = [];
         try {
-          const ncRes = await api.get(`/network-config`);
+          const ncRes = await api.get(`/network-config`, { signal });
           const ncData = ncRes.data || {};
           ncGateways = Array.isArray(ncData.gateways) ? ncData.gateways : [];
         } catch (e) {
+          if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
           // Если файла нет или ошибка - используем пустой массив (fallback на старую логику)
           console.warn('EasySwitch: не удалось загрузить /network-config, используется fallback:', e?.message || e);
           ncGateways = [];
@@ -79,22 +87,46 @@ function EasySwitchManager() {
         setNetworkConfigGateways(ncGateways);
 
         // Загружаем данные серверов и фильтров
-        await loadDataWithParams(communities, inventory, ncGateways);
+        await loadDataWithParams(communities, inventory, ncGateways, signal);
       } catch (e) {
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
         console.error('Error initializing data:', e);
         setError('Ошибка загрузки данных');
       }
     };
     initData();
+
+    return () => controller.abort();
   }, []);
 
-  const loadDataWithParams = async (communities, inventory, ncGatewaysParam) => {
+  // При переходе на раздел Easy Switch перезапрашиваем пинги (устаревшие по TTL обновятся)
+  useEffect(() => {
+    if (location.pathname !== '/easy-switch' || !servers.length || !inventoryServers.length) return;
+    const pingTasks = [];
+    servers.forEach((server) => {
+      const inv = inventoryServers.find(srv =>
+        String(srv.dns || '').trim() === server.name ||
+        String(srv.hostName || '').trim() === server.name ||
+        String(srv.ip || '').trim() === server.name
+      );
+      const routerId = inv?.id || inv?.dns || inv?.ip;
+      if (!routerId) return;
+      (server.gateways || []).forEach((gw) => {
+        if (gw.ip) pingTasks.push({ routerId, gatewayIp: gw.ip });
+      });
+    });
+    requestPings(pingTasks);
+  }, [location.pathname, servers, inventoryServers, requestPings]);
+
+  const loadDataWithParams = async (communities, inventory, ncGatewaysParam, signal) => {
     setLoading(true);
     setError('');
 
+    const requestConfig = signal ? { signal } : {};
+
     try {
       // Загружаем список серверов из server-configs
-      const serversResponse = await api.get(`/server-configs`);
+      const serversResponse = await api.get(`/server-configs`, requestConfig);
       const serversList = Array.isArray(serversResponse.data) ? serversResponse.data : [];
 
       // Загружаем фильтры для каждого сервера (для определения активных gateways)
@@ -102,7 +134,7 @@ function EasySwitchManager() {
         serversList.map(async (server) => {
           try {
             // Загружаем filters для сервера
-            const filtersResponse = await api.get(`/server-filters/${server.id}`);
+            const filtersResponse = await api.get(`/server-filters/${server.id}`, requestConfig);
             const filters = Array.isArray(filtersResponse.data) ? filtersResponse.data : [];
             
             // Получаем gateways сервера:
@@ -212,8 +244,21 @@ function EasySwitchManager() {
       // Фильтруем серверы, у которых есть gateways
       const serversWithGateways = serversWithData.filter(s => s.gateways.length > 0);
       setServers(serversWithGateways);
-      // Предзагружаем пинги для всех комбинаций server+gateway
+      // Единая точка входа: запрашиваем пинги через контекст (кеш общий с фильтрами)
-      prefetchPings(serversWithGateways, inventory);
+      const pingTasks = [];
+      serversWithGateways.forEach((server) => {
+        const inv = inventory.find(srv =>
+          String(srv.dns || '').trim() === server.name ||
+          String(srv.hostName || '').trim() === server.name ||
+          String(srv.ip || '').trim() === server.name
+        );
+        const routerId = inv?.id || inv?.dns || inv?.ip;
+        if (!routerId) return;
+        (server.gateways || []).forEach((gw) => {
+          if (gw.ip) pingTasks.push({ routerId, gatewayIp: gw.ip });
+        });
+      });
+      requestPings(pingTasks);
 
       // Отладочная информация
       try {
@@ -247,6 +292,7 @@ function EasySwitchManager() {
       } catch (_) {}
       
     } catch (err) {
+      if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
       console.error('Error loading data:', err);
       setError('Ошибка загрузки данных. Проверьте подключение к серверу.');
     } finally {
@@ -254,60 +300,6 @@ function EasySwitchManager() {
     }
   };
 
-  /**
-   * Загрузить реальные пинги для комбинаций (сервер, gateway).
-   * Пингуем хост www.gstatic.com через соответствующий MikroTik jumphost.
-   */
-  const prefetchPings = async (serversList, inventory) => {
-    try {
-      const tasks = [];
-      const seen = new Set();
-
-      serversList.forEach((server) => {
-        const inv = inventory.find(srv =>
-          String(srv.dns || '').trim() === server.name ||
-          String(srv.hostName || '').trim() === server.name ||
-          String(srv.ip || '').trim() === server.name
-        );
-        const routerId = inv?.id || inv?.dns || inv?.ip;
-        if (!routerId) return;
-
-        (server.gateways || []).forEach((gw) => {
-          const ip = gw.ip || '';
-          if (!ip) return;
-          const key = `${routerId}:${ip}`;
-          if (seen.has(key) || pingMap[key] !== undefined) return;
-          seen.add(key);
-          tasks.push({ routerId, ip, key });
-        });
-      });
-
-      if (tasks.length === 0) return;
-
-      // Запросы идут параллельно; обновляем UI по мере прихода каждого ответа,
-      // чтобы значения на интерфейсе отображались быстрее.
-      tasks.forEach(({ routerId, ip, key }) => {
-        api
-          .post('/mikrotik/ping', {
-            serverId: routerId,
-            gatewayIp: ip,
-            target: 'www.gstatic.com',
-            count: 5,
-          })
-          .then(({ data }) => {
-            const value = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
-            setPingMap((prev) => ({ ...prev, [key]: value }));
-          })
-          .catch((e) => {
-            console.warn('Failed to fetch ping for', routerId, ip, e?.message || e);
-            setPingMap((prev) => ({ ...prev, [key]: null }));
-          });
-      });
-    } catch (e) {
-      console.warn('prefetchPings error:', e?.message || e);
-    }
-  };
-
   const handleGatewaySelect = (serverId, community, gateway) => {
     const key = `${serverId}:${community}`;
     setActiveGateways(prev => {
@@ -514,17 +506,11 @@ function EasySwitchManager() {
   if (loading && servers.length === 0) {
     return (
       <div className="container-xl">
-        <div className="page-header">
+        <PageHeader
-          <div className="row align-items-center">
+          title="Easy Switch"
-            <div className="col">
+          icon={<IconWorld size={24} />}
-              <h2 className="page-title">
+          meta="Быстрое переключение шлюзов"
-                <IconWorld className="me-2" />
+        />
-                Easy Switch
-              </h2>
-              <div className="text-muted mt-1">Быстрое переключение шлюзов</div>
-            </div>
-          </div>
-        </div>
 
         <div className="card">
           <div className="card-body text-center py-5">
@@ -540,19 +526,11 @@ function EasySwitchManager() {
 
   return (
     <div className="container-xl">
-      {/* Заголовок */}
+      <PageHeader
-      <div className="page-header mb-3">
+        title="Easy Switch"
-        <div className="row align-items-center">
+        icon={<IconWorld size={24} />}
-          <div className="col">
+        meta={`Быстрое переключение шлюзов • ${servers.length} ${servers.length === 1 ? 'сервер' : 'серверов'} • ${communitiesDirectory.length} communities`}
-            <h2 className="page-title">
+        actions={
-              <IconWorld className="me-2" />
-              Easy Switch
-            </h2>
-            <div className="text-muted mt-1">
-              Быстрое переключение шлюзов • {servers.length} {servers.length === 1 ? 'сервер' : 'серверов'} • {communitiesDirectory.length} communities
-            </div>
-          </div>
-          <div className="col-auto">
           <div className="btn-list">
             {hasChanges && (
               <button
@@ -572,9 +550,8 @@ function EasySwitchManager() {
               Обновить
             </button>
           </div>
-          </div>
+        }
-        </div>
+      />
-      </div>
 
       {/* Вкладки */}
       <div className="mb-3">

frontend/src/FilterManager.jsx

@@ -1,11 +1,12 @@
 import { useState, useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import api from './lib/api.js';
 import ConfirmDialog from './components/ConfirmDialog.jsx';
 import FormModal from './components/FormModal.jsx';
 import ConfirmModal from './components/ConfirmModal.jsx';
 import FormField from './components/FormField.jsx';
 import Modal from './components/Modal.jsx';
+import PageHeader from './components/PageHeader.jsx';
 import { 
   IconPlus, 
   IconSearch, 
@@ -13,24 +14,18 @@ import {
   IconTrash, 
   IconCheck, 
   IconX, 
-  IconDatabase,
   IconRefresh,
-  IconDownload,
-  IconUpload,
   IconAlertTriangle,
   IconFilter,
   IconChevronDown,
-  IconLink,
   IconCopy,
   IconEye,
   IconServer,
   IconSettings,
   IconDeviceFloppy,
   IconHash,
-  IconRocket,
   IconSortAscending,
   IconSortDescending,
-  IconWorld,
   IconFileText,
   IconGripVertical
 } from '@tabler/icons-react';
@@ -51,15 +46,7 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { normalizeGateways, countryToFlag } from './utils/serverUtils.js';
-import { 
+import { usePing } from './contexts/PingContext.jsx';
-  AddFilterModal, 
-  EditFilterModal, 
-  DeleteFilterModal, 
-  PreviewConfigModal, 
-  AddFilterServerModal 
-} from './components/filter/index.js';
-
-const API_URL = '/api';
 
 // Компонент автокомплита для выбора Community
 function CommunityAutocomplete({ label, value, onChange, communities = [], required = false, placeholder = 'Введите или выберите community...', baseAS = '65001' }) {
@@ -331,7 +318,18 @@ function CommunityAutocomplete({ label, value, onChange, communities = [], requi
 }
 
 // Компонент выбора Gateway в виде карточек (вместо выпадающего списка)
-function GatewayAutocomplete({ label, value, onChange, gateways = [], required = false, placeholder = 'Введите или выберите gateway...' }) {
+function GatewayAutocomplete({ 
+  label, 
+  value, 
+  onChange, 
+  gateways = [], 
+  required = false, 
+  placeholder = 'Введите или выберите gateway...',
+  // Карта пингов, как на Easy Switch: ключ `${routerId}:${gatewayIp}` → avg RTT
+  pingMap = {},
+  // Идентификатор роутера (id/dns/ip из inventory), как на Easy Switch
+  routerId = null,
+}) {
   const [inputValue, setInputValue] = useState(value || '');
   const [isOpen, setIsOpen] = useState(false);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
@@ -478,6 +476,10 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
             {filteredGateways.map((gw, idx) => {
               const isSelected = gw.name === value;
               const isHighlighted = highlightedIndex === idx;
+              const pingKey = routerId && gw.ip ? `${routerId}:${gw.ip}` : null;
+              const ping = pingKey && Object.prototype.hasOwnProperty.call(pingMap, pingKey)
+                ? pingMap[pingKey]
+                : null;
               return (
                 <div className="col" key={gw.name || idx}>
                   <button
@@ -511,12 +513,15 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
                                 {gw.serverDns}
                               </div>
                             )}
-                            {(gw.country || gw.provider) && (
+                            {/* Пинг шлюза (вместо строки с провайдером/страной), как на странице Easy Switch */}
-                              <div className={`small text-truncate ${isSelected ? 'text-white-75' : 'text-muted'}`}>
+                            <div
-                                {gw.country && <span className="me-1">{countryToFlag(gw.country)}</span>}
+                              className={`fw-bold mt-1 ${
-                                {gw.provider}
+                                isSelected ? 'text-white' : 'text-success'
+                              }`}
+                              style={{ fontSize: '1.05rem' }}
+                            >
+                              {ping != null ? ping : '—'}
                             </div>
-                            )}
                           </div>
                           {gw.primary && (
                             <span className={`badge ${isSelected ? 'bg-white text-primary' : 'bg-green-lt text-green'}`}>
@@ -764,17 +769,39 @@ function FilterManager() {
   const [inventoryServers, setInventoryServers] = useState([]);
   // Network config gateways (from /network-config endpoint)
   const [networkConfigGateways, setNetworkConfigGateways] = useState([]);
+  // Единая точка входа для пингов (кеш общий с Easy Switch)
+  const { pingMap, requestPings } = usePing();
+
+  // Получить metadata сервера из inventory по имени (dns/hostName/ip или короткое имя типа "ihor")
+  const getInventoryMetaForServer = (serverName) => {
+    if (!serverName) return null;
+    const name = String(serverName).trim();
+    return inventoryServers.find((srv) => {
+      const dns = String(srv.dns || '').trim();
+      const hostName = String(srv.hostName || '').trim();
+      const ip = String(srv.ip || '').trim();
+      if (dns === name || hostName === name || ip === name) return true;
+      // На странице Фильтров selectedServer.name — короткое имя (первая часть dns), например "ihor"
+      if (dns && dns.split('.')[0] === name) return true;
+      return false;
+    });
+  };
+
+  // Получить routerId для MikroTik (id/dns/ip), как на странице Easy Switch
+  const getRouterIdForServer = (server) => {
+    if (!server) return null;
+    // Сначала ищем по полному имени (fullName/dns), затем по короткому (name)
+    const meta = getInventoryMetaForServer(server.fullName || server.dns || server.name) || getInventoryMetaForServer(server.name);
+    if (!meta) return null;
+    return meta.id || meta.dns || meta.ip || null;
+  };
   
   // Собираем gateways только для выбранного сервера
   const selectedServerGateways = (() => {
     if (!selectedServer) return [];
     
-    // Ищем соответствующий сервер в inventoryServers по имени
+    // Ищем соответствующий сервер в inventory (по полному или короткому имени)
-    const matchedServer = inventoryServers.find(srv => 
+    const matchedServer = getInventoryMetaForServer(selectedServer.fullName || selectedServer.dns || selectedServer.name) || getInventoryMetaForServer(selectedServer.name);
-      String(srv.dns || '').trim() === selectedServer.name ||
-      String(srv.hostName || '').trim() === selectedServer.name ||
-      String(srv.ip || '').trim() === selectedServer.name
-    );
     
     const serverDns = matchedServer?.dns || matchedServer?.hostName || selectedServer.name || '';
     const serverId = matchedServer?.id || matchedServer?.ip || selectedServer.id || selectedServer.name || '';
@@ -854,48 +881,66 @@ function FilterManager() {
     });
   })();
 
+  const location = useLocation();
+
+  // Запрашиваем пинги для gateways выбранного сервера; при переходе на раздел Фильтров обновляем (устаревшие по TTL перезапросятся)
   useEffect(() => {
-    // Загружаем базовую AS из настроек
+    if (!selectedServer || !selectedServerGateways?.length) return;
+    if (location.pathname !== '/filters') return;
+    const routerId = getRouterIdForServer(selectedServer);
+    if (!routerId) return;
+    const tasks = selectedServerGateways
+      .filter((gw) => gw.ip)
+      .map((gw) => ({ routerId, gatewayIp: gw.ip }));
+    requestPings(tasks);
+  }, [location.pathname, selectedServer, selectedServerGateways, requestPings]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const signal = controller.signal;
+    const opts = { signal };
+
     (async () => {
       try {
-        const res = await api.get('/ui-settings');
+        const res = await api.get('/ui-settings', opts);
         const data = res?.data || {};
         const loadedBaseAS = String(data?.baseAS || '65001');
         setBaseAS(loadedBaseAS);
       } catch (e) {
-        // мягко игнорируем, используем значение по умолчанию
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
       }
     })();
 
     (async () => {
       try {
-        const res = await api.get(`/communities`);
+        const res = await api.get(`/communities`, opts);
         setCommunities(Array.isArray(res.data) ? res.data : []);
       } catch (e) {
-        // мягко игнорируем, автокомплит необязателен
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
-      }
-    })();
-    // Загружаем инвентарь серверов для отображения флагов и IP
-    (async () => {
-      try {
-        const res = await api.get(`/servers`);
-        setInventoryServers(Array.isArray(res.data) ? res.data : []);
-      } catch (e) {
-        // мягко игнорируем, дополнительная информация необязательна
       }
     })();
 
-    // Загружаем gateways из NetworkConfigManager
     (async () => {
       try {
-        const res = await api.get(`/network-config`);
+        const res = await api.get(`/servers`, opts);
+        setInventoryServers(Array.isArray(res.data) ? res.data : []);
+      } catch (e) {
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      }
+    })();
+
+    (async () => {
+      try {
+        const res = await api.get(`/network-config`, opts);
         const networkConfig = res.data || {};
         setNetworkConfigGateways(Array.isArray(networkConfig.gateways) ? networkConfig.gateways : []);
       } catch (e) {
-        // Если файла нет или ошибка - используем пустой массив (fallback на старую логику)
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
         setNetworkConfigGateways([]);
       }
     })();
+
+    return () => controller.abort();
   }, []);
 
   const filterKey = (f) => {
@@ -904,7 +949,9 @@ function FilterManager() {
   };
 
   useEffect(() => {
-    fetchServers();
+    const controller = new AbortController();
+    fetchServers(controller.signal);
+    return () => controller.abort();
   }, []);
 
   // Загружаем фильтры при выборе сервера
@@ -962,11 +1009,12 @@ function FilterManager() {
   // Функции для управления серверами
   // Загружаем jumphost'ы из раздела "Серверы" (/api/servers)
   // + загружаем старые server-configs для маппинга legacyId
-  const fetchServers = async () => {
+  const fetchServers = async (abortSignal) => {
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
       const [serversRes, legacyRes] = await Promise.all([
-        api.get(`/servers`),
+        api.get(`/servers`, opts),
-        api.get(`/server-configs`).catch(() => ({ data: [] })) // Старые конфиги для маппинга
+        api.get(`/server-configs`, opts).catch(() => ({ data: [] })) // Старые конфиги для маппинга
       ]);
       
       const allServers = Array.isArray(serversRes.data) ? serversRes.data : [];
@@ -1023,6 +1071,7 @@ function FilterManager() {
       
       setServers(jumphosts);
     } catch (error) {
+      if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
       console.error('Error fetching servers:', error);
       setServers([]);
     }
@@ -1699,150 +1748,7 @@ function FilterManager() {
 
 
   return (
-    <div className="page-wrapper">
-      <div className="page-header d-print-none">
-        <div className="container-xl">
-          <div className="row g-2 align-items-center">
-            <div className="col">
-              <h2 className="page-title">Управление фильтрами frouting</h2>
-              <div className="page-pretitle">
-                {selectedServer ? (
-                  <div className="d-flex align-items-center">
-                    <span className="text-muted">Сервер:</span>
-                    <span className="ms-2 text-primary fw-bold">{selectedServer.name}</span>
-                    {serverFilters.length > 0 && (
-                      <span className="badge bg-blue-lt text-blue ms-2">{serverFilters.length} фильтров</span>
-                    )}
-                  </div>
-                ) : (
-                  <span className="text-muted">Выберите сервер для работы с фильтрами</span>
-                )}
-              </div>
-            </div>
-            <div className="col-auto ms-auto d-print-none">
-              <div className="btn-list">
-                {/* Dropdown выбора сервера */}
-                <div className="dropdown">
-                  <button
-                    className="btn btn-primary dropdown-toggle"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                  >
-                    <IconServer className="icon" />
-                    {selectedServer ? selectedServer.name : 'Выбрать сервер'}
-                  </button>
-                  <div className="dropdown-menu dropdown-menu-end" style={{ minWidth: '300px' }}>
-                    <div className="px-3 py-2">
-                      <input
-                        type="text"
-                        className="form-control form-control-sm"
-                        placeholder="Поиск серверов..."
-                        value={serverSearch}
-                        onChange={(e) => setServerSearch(e.target.value)}
-                        onClick={(e) => e.stopPropagation()}
-                      />
-                    </div>
-                    <div className="dropdown-divider"></div>
-                    {activeServers.length > 0 && (
     <>
-                        <h6 className="dropdown-header">Активные серверы</h6>
-                        {activeServers.map(server => (
-                          <a
-                            key={server.id}
-                            className={`dropdown-item ${selectedServer?.id === server.id ? 'active' : ''}`}
-                            href="#"
-                            onClick={(e) => {
-                              e.preventDefault();
-                              setSelectedServer(server);
-                            }}
-                          >
-                            <div className="d-flex align-items-center">
-                              <IconServer size={16} className="me-2" />
-                              <span className="flex-grow-1">{server.name}</span>
-                            </div>
-                          </a>
-                        ))}
-                      </>
-                    )}
-                    {inactiveServers.length > 0 && (
-                      <>
-                        <div className="dropdown-divider"></div>
-                        <h6 className="dropdown-header">Неактивные серверы</h6>
-                        {inactiveServers.map(server => (
-                          <a
-                            key={server.id}
-                            className={`dropdown-item ${selectedServer?.id === server.id ? 'active' : ''}`}
-                            href="#"
-                            onClick={(e) => {
-                              e.preventDefault();
-                              setSelectedServer(server);
-                            }}
-                          >
-                            <div className="d-flex align-items-center text-muted">
-                              <IconServer size={16} className="me-2" />
-                              <span className="flex-grow-1">{server.name}</span>
-                            </div>
-                          </a>
-                        ))}
-                      </>
-                    )}
-                    <div className="dropdown-divider"></div>
-                    <button
-                      className="dropdown-item"
-                      onClick={() => setServerListModalOpen(true)}
-                    >
-                      <IconSettings size={16} className="me-2" />
-                      Управление серверами
-                    </button>
-                  </div>
-                </div>
-
-                {selectedServer && (
-                  <>
-                    <button 
-                      className="btn btn-outline-primary"
-                      onClick={handlePreviewConfig}
-                      disabled={serverFilters.length === 0}
-                    >
-                      <IconEye className="icon" />
-                      Просмотр
-                    </button>
-                    <button 
-                      className="btn btn-outline-primary"
-                      onClick={copyConfigToClipboard}
-                      disabled={serverFilters.length === 0}
-                    >
-                      <IconCopy className="icon" />
-                      Копировать
-                    </button>
-                    <button 
-                      className="btn btn-success"
-                      onClick={() => handleSaveServerConfig(selectedServer.id)}
-                      disabled={loading || serverFilters.length === 0}
-                    >
-                      <IconDeviceFloppy className="icon" />
-                      Сохранить
-                    </button>
-                    <button 
-                      className="btn btn-outline-primary"
-                      onClick={handleBgpUpdate}
-                      disabled={bgpUpdateLoading}
-                      title="Запустить /system script run update_bgp_filter на выбранном MikroTik"
-                    >
-                      <IconRefresh className={`icon ${bgpUpdateLoading ? 'spin' : ''}`} />
-                      {bgpUpdateLoading ? 'Запуск...' : 'Обновить BGP фильтры'}
-                    </button>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="page-body">
-        <div className="container-xl">
       {/* Уведомления */}
       {error && (
         <div className="alert alert-danger alert-dismissible" role="alert">
@@ -1859,6 +1765,13 @@ function FilterManager() {
         </div>
       )}
 
+      <PageHeader
+        title="Управление фильтрами frouting"
+        icon={<IconFilter size={24} />}
+      />
+
+      <div className="row">
+        <div className="col-12">
           {/* Селектор серверов на одной странице (Tabler UI) */}
           <div className="card mb-3">
               <div className="card-header">
@@ -1941,6 +1854,15 @@ function FilterManager() {
                           <IconDeviceFloppy className="icon" />
                           Сохранить
                         </button>
+                        <button
+                          className="btn btn-outline-primary"
+                          onClick={handleBgpUpdate}
+                          disabled={!selectedServer || bgpUpdateLoading}
+                          title="Запустить /system script run update_bgp_filter на выбранном MikroTik"
+                        >
+                          <IconRefresh className={`icon ${bgpUpdateLoading ? 'spin' : ''}`} />
+                          {bgpUpdateLoading ? 'Запуск...' : 'Обновить BGP фильтры'}
+                        </button>
                       </div>
                     </div>
 
@@ -2140,10 +2062,14 @@ function FilterManager() {
                     <div className="alert alert-info mb-3">
                       <div className="d-flex align-items-center">
                         <IconGripVertical size={18} className="me-2" />
-                      <span>Перетащите строки за иконку <IconGripVertical size={14} className="mx-1" /> чтобы изменить приоритет</span>
+                        <span>
+                          Перетащите строки за иконку{' '}
+                          <IconGripVertical size={14} className="mx-1" /> чтобы изменить приоритет
+                        </span>
                       </div>
                       <div className="text-muted small mt-1">
-                      <strong>Важно:</strong> В RouterOS правила внизу списка имеют <strong>высший приоритет</strong> (переопределяют верхние)
+                        <strong>Важно:</strong> В RouterOS правила внизу списка имеют{' '}
+                        <strong>высший приоритет</strong> (переопределяют верхние)
                       </div>
                     </div>
                     <DndContext
@@ -2166,27 +2092,58 @@ function FilterManager() {
                                 />
                               </th>
                               <th style={{ width: '60px' }}>#</th>
-                          <th style={{ width: '22%' }} className="cursor-pointer" onClick={() => toggleSort('community')}>
+                              <th
+                                style={{ width: '22%' }}
+                                className="cursor-pointer"
+                                onClick={() => toggleSort('community')}
+                              >
                                 <span className="me-1">COMMUNITY</span>
-                            {sortBy === 'community' && (sortDir === 'asc' ? <IconSortAscending size={16} /> : <IconSortDescending size={16} />)}
+                                {sortBy === 'community' &&
+                                  (sortDir === 'asc' ? (
+                                    <IconSortAscending size={16} />
+                                  ) : (
+                                    <IconSortDescending size={16} />
+                                  ))}
                               </th>
-                          <th style={{ width: '22%' }} className="cursor-pointer" onClick={() => toggleSort('gateway')}>
+                              <th
+                                style={{ width: '22%' }}
+                                className="cursor-pointer"
+                                onClick={() => toggleSort('gateway')}
+                              >
                                 <span className="me-1">GATEWAY</span>
-                            {sortBy === 'gateway' && (sortDir === 'asc' ? <IconSortAscending size={16} /> : <IconSortDescending size={16} />)}
+                                {sortBy === 'gateway' &&
+                                  (sortDir === 'asc' ? (
+                                    <IconSortAscending size={16} />
+                                  ) : (
+                                    <IconSortDescending size={16} />
+                                  ))}
                               </th>
-                          <th style={{ width: '30%' }} className="cursor-pointer" onClick={() => toggleSort('description')}>
+                              <th
+                                style={{ width: '30%' }}
+                                className="cursor-pointer"
+                                onClick={() => toggleSort('description')}
+                              >
                                 <span className="me-1">ОПИСАНИЕ</span>
-                            {sortBy === 'description' && (sortDir === 'asc' ? <IconSortAscending size={16} /> : <IconSortDescending size={16} />)}
+                                {sortBy === 'description' &&
+                                  (sortDir === 'asc' ? (
+                                    <IconSortAscending size={16} />
+                                  ) : (
+                                    <IconSortDescending size={16} />
+                                  ))}
+                              </th>
+                              <th style={{ width: '120px' }} className="text-end">
+                                ДЕЙСТВИЯ
                               </th>
-                          <th style={{ width: '120px' }} className="text-end">ДЕЙСТВИЯ</th>
                             </tr>
                           </thead>
                           <SortableContext
-                        items={serverFilters.filter(f => f != null).map(f => filterKey(f))}
+                            items={serverFilters.filter((f) => f != null).map((f) => filterKey(f))}
                             strategy={verticalListSortingStrategy}
                           >
                             <tbody>
-                        {serverFilters.filter(f => f != null).map((filter, index) => {
+                              {serverFilters
+                                .filter((f) => f != null)
+                                .map((filter, index) => {
                                   const key = filterKey(filter);
                                   const isSelected = selectedFilterKeys.has(key);
                                   // Показываем только если совпадает с поиском
@@ -2204,7 +2161,7 @@ function FilterManager() {
                                       key={key}
                                       filter={filter}
                                       index={index}
-                              totalCount={serverFilters.filter(f => f != null).length}
+                                      totalCount={serverFilters.filter((f) => f != null).length}
                                       filterKey={key}
                                       isSelected={isSelected}
                                       onToggleSelect={() => toggleSelectFilter(key)}
@@ -2231,7 +2188,10 @@ function FilterManager() {
                           <button className="btn btn-outline-danger btn-sm" onClick={deleteSelectedFilters}>
                             <IconTrash className="me-2" /> Удалить выбранные
                           </button>
-                        <button className="btn btn-outline-secondary btn-sm" onClick={() => setSelectedFilterKeys(new Set())}>
+                          <button
+                            className="btn btn-outline-secondary btn-sm"
+                            onClick={() => setSelectedFilterKeys(new Set())}
+                          >
                             <IconX className="me-2" /> Отменить выбор
                           </button>
                         </div>
@@ -2278,6 +2238,8 @@ function FilterManager() {
           value={newFilter.gateway}
           onChange={(val) => setNewFilter({ ...newFilter, gateway: val })}
           gateways={selectedServerGateways}
+          pingMap={pingMap}
+          routerId={getRouterIdForServer(selectedServer)}
           required
         />
 
@@ -2319,6 +2281,8 @@ function FilterManager() {
               value={editingFilter.gateway}
               onChange={(val) => setEditingFilter({ ...editingFilter, gateway: val })}
               gateways={selectedServerGateways}
+              pingMap={pingMap}
+              routerId={getRouterIdForServer(selectedServer)}
               required
             />
 
@@ -2717,7 +2681,7 @@ function FilterManager() {
         onCancel={() => setConfirmState({ open: false, text: '', onConfirm: null })}
         onConfirm={() => confirmState.onConfirm?.()}
       />
-    </div>
+    </>
   );
 }
 

frontend/src/FirewallPage.jsx

@@ -0,0 +1,623 @@
+import { useState, useEffect, useMemo } from 'react';
+import api from './lib/api.js';
+import PageHeader from './components/PageHeader.jsx';
+import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
+import EmptyState from './components/EmptyState.jsx';
+import ErrorAlert from './components/ErrorAlert.jsx';
+import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
+import Pagination from './components/Pagination.jsx';
+import Tooltip from './components/Tooltip.jsx';
+import Modal from './components/Modal.jsx';
+import ConfirmDialog from './components/ConfirmDialog.jsx';
+import {
+  IconShield,
+  IconRefresh,
+  IconSearch,
+  IconCopy,
+  IconAlertCircle,
+  IconList,
+  IconChartBar,
+} from '@tabler/icons-react';
+
+const PAGE_SIZE = 15;
+const DEFAULT_MIN_COUNT_N = 5;
+
+/** Одиночный IP: без маски или /32 */
+function isSingleIp(addr) {
+  const s = String(addr || '').trim();
+  if (!s) return false;
+  if (!s.includes('/')) return true;
+  const mask = s.split('/')[1];
+  return mask === '32' || mask === '128';
+}
+
+/** Базовая подсеть /24 для группировки */
+function getBase24(addr) {
+  const s = String(addr || '').trim();
+  const ipPart = s.includes('/') ? s.split('/')[0] : s;
+  const parts = ipPart.split('.');
+  if (parts.length !== 4) return null;
+  const [a, b, c] = parts.map((x) => parseInt(x, 10));
+  if (Number.isNaN(a) || Number.isNaN(b) || Number.isNaN(c)) return null;
+  return `${a}.${b}.${c}.0/24`;
+}
+
+/**
+ * Анализ списка ban: группировка одиночных IP по /24, предложения суммаризации если в подсети > N.
+ */
+function analyzeBanList(banEntries, minCountN) {
+  const groupBy = new Map();
+  for (const entry of banEntries || []) {
+    if (!entry?.address || !isSingleIp(entry.address)) continue;
+    const base = getBase24(entry.address);
+    if (!base) continue;
+    if (!groupBy.has(base)) groupBy.set(base, { subnet: base, ids: [], entries: [] });
+    const g = groupBy.get(base);
+    g.ids.push(entry.id);
+    g.entries.push(entry);
+  }
+  const suggestions = [];
+  for (const [, g] of groupBy) {
+    if (g.entries.length > minCountN) {
+      suggestions.push({
+        subnet: g.subnet,
+        count: g.entries.length,
+        ids: g.ids,
+        addEntry: { address: g.subnet, list: 'ban', comment: `суммаризация ${g.entries.length} IP` },
+      });
+    }
+  }
+  return { suggestions };
+}
+
+/** Нормализация записи address-list из RouterOS (поля могут приходить в разном регистре) */
+function normalizeEntry(entry) {
+  if (!entry || typeof entry !== 'object') return null;
+  const addr = entry.address ?? entry.Address ?? '';
+  const list = entry.list ?? entry.List ?? '';
+  const timeout = entry.timeout ?? entry.Timeout ?? '';
+  const comment = entry.comment ?? entry.Comment ?? '';
+  const id = entry['.id'] ?? entry.id ?? '';
+  const disabled = entry.disabled ?? entry.Disabled ?? '';
+  const dynamic = entry.dynamic ?? entry.Dynamic ?? '';
+  return {
+    id: id || addr || Math.random().toString(36).slice(2),
+    address: String(addr).trim(),
+    list: String(list).trim(),
+    timeout: String(timeout).trim(),
+    comment: String(comment).trim(),
+    disabled: String(disabled).trim(),
+    dynamic: String(dynamic).trim(),
+  };
+}
+
+function AddressListTable({ title, listKey, items, loading, emptyMessage }) {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+
+  const filtered = useMemo(() => {
+    const term = String(search || '').toLowerCase().trim();
+    if (!term) return items;
+    return items.filter((e) => {
+      const a = (e.address || '').toLowerCase();
+      const c = (e.comment || '').toLowerCase();
+      return a.includes(term) || c.includes(term);
+    });
+  }, [items, search]);
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  const paginated = useMemo(
+    () => filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
+    [filtered, page]
+  );
+
+  useEffect(() => {
+    setPage(1);
+  }, [search]);
+
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text).then(() => {
+      window.notify?.success?.('Скопировано в буфер обмена');
+    }).catch(() => {
+      window.notify?.error?.('Не удалось скопировать');
+    });
+  };
+
+  return (
+    <div className="card card-flat mb-4">
+      <div className="card-header">
+        <div className="row align-items-center w-100 g-2">
+          <div className="col">
+            <div className="d-flex align-items-center gap-2">
+              <IconList className="icon text-muted" size={18} />
+              <span className="text-muted text-uppercase small">{title}</span>
+              <span className="badge bg-blue-lt text-blue">{filtered.length}</span>
+            </div>
+          </div>
+          <div className="col-12 mt-2" />
+          <div className="col">
+            <div className="input-icon flex-grow-1" style={{ maxWidth: '320px' }}>
+              <span className="input-icon-addon">
+                <IconSearch size={18} />
+              </span>
+              <input
+                type="text"
+                className="form-control"
+                placeholder="Поиск по IP или комментарию..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                aria-label="Поиск"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="card-body p-0">
+        {loading ? (
+          <TableSkeleton rows={8} cols={4} flat />
+        ) : paginated.length === 0 ? (
+          <TableEmpty cols={4} flat>
+            <EmptyState
+              title={items.length === 0 ? emptyMessage : 'Нет совпадений'}
+              description={items.length === 0 ? `Список ${listKey} пуст на роутере.` : 'Измените поисковый запрос.'}
+            />
+          </TableEmpty>
+        ) : (
+          <div className="table-responsive">
+            <table className="table table-flat table-vcenter table-nowrap mb-0">
+              <thead>
+                <tr>
+                  <th style={{ width: '40px' }}>#</th>
+                  <th>IP-адрес</th>
+                  <th>Таймаут</th>
+                  <th>Комментарий</th>
+                  <th className="text-end" style={{ width: '50px' }}></th>
+                </tr>
+              </thead>
+              <tbody>
+                {paginated.map((entry, idx) => (
+                  <tr key={entry.id || entry.address || idx}>
+                    <td className="text-muted small">{(page - 1) * PAGE_SIZE + idx + 1}</td>
+                    <td className="font-monospace">
+                      <div className="d-flex align-items-center">
+                        <span>{entry.address || '—'}</span>
+                        <Tooltip content="Копировать IP" position="top">
+                          <button
+                            type="button"
+                            className="btn btn-ghost-secondary btn-icon btn-sm ms-2"
+                            onClick={() => copyToClipboard(entry.address)}
+                            aria-label="Копировать"
+                          >
+                            <IconCopy size={14} />
+                          </button>
+                        </Tooltip>
+                      </div>
+                    </td>
+                    <td className="text-muted">{entry.timeout || '—'}</td>
+                    <td className="text-muted small">{entry.comment || '—'}</td>
+                    <td className="text-end"></td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+      {!loading && filtered.length > PAGE_SIZE && (
+        <Pagination
+          currentPage={page}
+          totalPages={totalPages}
+          totalItems={filtered.length}
+          pageSize={PAGE_SIZE}
+          onPageChange={setPage}
+        />
+      )}
+    </div>
+  );
+}
+
+export default function FirewallPage() {
+  const [servers, setServers] = useState([]);
+  const [serverId, setServerId] = useState('');
+  const [serverMeta, setServerMeta] = useState(null);
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [loadingServers, setLoadingServers] = useState(true);
+  const [error, setError] = useState('');
+  const [analysisOpen, setAnalysisOpen] = useState(false);
+  const [minCountN, setMinCountN] = useState(DEFAULT_MIN_COUNT_N);
+  const [analysisResult, setAnalysisResult] = useState(null);
+  const [applyConfirmOpen, setApplyConfirmOpen] = useState(false);
+  const [applying, setApplying] = useState(false);
+  const [ipInfoMap, setIpInfoMap] = useState({});
+  const [ipInfoLoading, setIpInfoLoading] = useState(false);
+  const [applyConfirmRow, setApplyConfirmRow] = useState(null);
+  const [applyingRow, setApplyingRow] = useState(null);
+
+  const routerServers = useMemo(
+    () =>
+      (servers || []).filter(
+        (s) => String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home'
+      ),
+    [servers]
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setLoadingServers(true);
+      try {
+        const res = await api.get('/servers');
+        const list = Array.isArray(res.data) ? res.data : [];
+        if (!cancelled) setServers(list);
+      } catch (e) {
+        if (!cancelled) setError('Не удалось загрузить список серверов.');
+      } finally {
+        if (!cancelled) setLoadingServers(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, []);
+
+  const fetchAddressLists = async () => {
+    if (!serverId) {
+      setData(null);
+      return;
+    }
+    setLoading(true);
+    setError('');
+    try {
+      const res = await api.get('/mikrotik/address-lists', { params: { serverId } });
+      const payload = res?.data ?? {};
+      setData({
+        serverLabel: payload.serverLabel || serverId,
+        ban: (payload.ban || []).map(normalizeEntry).filter(Boolean),
+        ban_counter: (payload.ban_counter || []).map(normalizeEntry).filter(Boolean),
+      });
+    } catch (e) {
+      console.error('Firewall fetch:', e);
+      setData(null);
+      setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить address-list с роутера.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (serverId) fetchAddressLists();
+    else setData(null);
+  }, [serverId]);
+
+  const runAnalysis = () => {
+    if (!data?.ban?.length) return;
+    const n = Math.max(2, parseInt(minCountN, 10) || DEFAULT_MIN_COUNT_N);
+    setMinCountN(n);
+    const result = analyzeBanList(data.ban, n);
+    setAnalysisResult(result);
+    setIpInfoMap({});
+  };
+
+  // Подгрузка AS/орг с ipinfo.io для подсетей из анализа (лимит 30, с задержкой между запросами)
+  useEffect(() => {
+    const suggestions = analysisResult?.suggestions;
+    if (!suggestions?.length) return;
+    const maxFetch = 30;
+    const slice = suggestions.slice(0, maxFetch);
+    let cancelled = false;
+    setIpInfoLoading(true);
+    (async () => {
+      for (let i = 0; i < slice.length && !cancelled; i++) {
+        const s = slice[i];
+        const firstIp = s.subnet.split('/')[0];
+        try {
+          const res = await fetch(`https://ipinfo.io/${firstIp}/json`, { method: 'GET' });
+          if (!res.ok) continue;
+          const info = await res.json();
+          if (!cancelled) {
+            setIpInfoMap((prev) => ({
+              ...prev,
+              [s.subnet]: { org: info.org, country: info.country, city: info.city },
+            }));
+          }
+        } catch (_) {
+          if (!cancelled) setIpInfoMap((prev) => ({ ...prev, [s.subnet]: null }));
+        }
+        if (i < slice.length - 1) await new Promise((r) => setTimeout(r, 180));
+      }
+      if (!cancelled) setIpInfoLoading(false);
+    })();
+    return () => { cancelled = true; };
+  }, [analysisResult?.suggestions]);
+
+  const applyPayload = applyConfirmRow
+    ? { removeIds: applyConfirmRow.ids, addEntries: [applyConfirmRow.addEntry] }
+    : analysisResult?.suggestions?.length
+      ? {
+          removeIds: analysisResult.suggestions.flatMap((s) => s.ids),
+          addEntries: analysisResult.suggestions.map((s) => s.addEntry),
+        }
+      : null;
+
+  const handleApplySummary = async () => {
+    if (!serverId || !applyPayload) return;
+    const isRow = !!applyConfirmRow;
+    if (isRow) setApplyingRow(applyConfirmRow.subnet);
+    else setApplying(true);
+    try {
+      await api.post('/mikrotik/address-lists/apply-summary', {
+        serverId,
+        removeIds: applyPayload.removeIds,
+        addEntries: applyPayload.addEntries,
+      });
+      const removed = applyPayload.removeIds.length;
+      const added = applyPayload.addEntries.length;
+      window.notify?.success?.(`Удалено ${removed} записей, добавлено ${added} подсетей.`);
+      setApplyConfirmOpen(false);
+      setApplyConfirmRow(null);
+      if (isRow && analysisResult?.suggestions) {
+        setAnalysisResult((prev) => ({
+          ...prev,
+          suggestions: prev.suggestions.filter((s) => s.subnet !== applyConfirmRow.subnet),
+        }));
+      } else {
+        setAnalysisOpen(false);
+        setAnalysisResult(null);
+      }
+      await fetchAddressLists();
+    } catch (e) {
+      window.notify?.error?.(e?.response?.data?.message || e?.message || 'Ошибка применения');
+    } finally {
+      setApplying(false);
+      setApplyingRow(null);
+    }
+  };
+
+  const currentServerLabel = serverMeta?.dns || serverMeta?.ip || serverId || 'Не выбран';
+
+  return (
+    <div>
+      {error && (
+        <ErrorAlert message={error} onClose={() => setError('')} />
+      )}
+
+      <PageHeader
+        title="Firewall"
+        icon={<IconShield size={24} />}
+        meta={`Списки блокировки (address-list) с роутера: ${currentServerLabel}`}
+        actions={
+          <div className="btn-list">
+            <button
+              type="button"
+              className="btn btn-outline-primary"
+              onClick={() => {
+                setAnalysisOpen(true);
+                setAnalysisResult(null);
+              }}
+              disabled={!serverId || !data?.ban?.length || loading}
+              title="Анализ списка ban и суммаризация по /24"
+            >
+              <IconChartBar className="me-1" size={18} />
+              Анализ
+            </button>
+            <button
+              type="button"
+              className="btn btn-outline-primary"
+              onClick={fetchAddressLists}
+              disabled={!serverId || loading}
+            >
+              <IconRefresh className={loading ? 'icon spin me-1' : 'me-1'} size={18} />
+              Обновить
+            </button>
+          </div>
+        }
+      />
+
+      <div className="card card-flat mb-4">
+        <div className="card-header py-3">
+          <h3 className="card-title mb-0">Сервер (MikroTik)</h3>
+          <p className="text-muted small mb-0 mt-1">
+            Выберите jumphost или home-роутер для просмотра списков <strong>ban</strong> и <strong>ban_counter</strong>.
+          </p>
+        </div>
+        <div className="card-body">
+          {loadingServers ? (
+            <div className="text-muted">Загрузка списка серверов...</div>
+          ) : (
+            <div style={{ maxWidth: '420px' }}>
+              <ServerAutocompleteInput
+                value={serverId}
+                onChange={setServerId}
+                onSelectMeta={setServerMeta}
+                servers={routerServers}
+                placeholder="Выберите сервер..."
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!serverId && (
+        <div className="card card-flat">
+          <div className="card-body text-center py-5">
+            <IconAlertCircle className="icon text-muted mb-2" size={48} />
+            <p className="text-muted mb-0">Выберите сервер выше, чтобы загрузить address-list (ban и ban_counter).</p>
+          </div>
+        </div>
+      )}
+
+      {serverId && data && (
+        <>
+          <AddressListTable
+            title="Список ban"
+            listKey="ban"
+            items={data.ban}
+            loading={loading}
+            emptyMessage="Список ban пуст"
+          />
+          <AddressListTable
+            title="Список ban_counter"
+            listKey="ban_counter"
+            items={data.ban_counter}
+            loading={loading}
+            emptyMessage="Список ban_counter пуст"
+          />
+        </>
+      )}
+
+      {serverId && loading && !data && (
+        <div className="card card-flat">
+          <div className="card-body py-5 text-center text-muted">
+            <IconRefresh className="icon spin me-2" size={20} />
+            Загрузка списков с роутера...
+          </div>
+        </div>
+      )}
+
+      <Modal
+        show={analysisOpen}
+        onClose={() => {
+          setAnalysisOpen(false);
+          setAnalysisResult(null);
+          setApplyConfirmOpen(false);
+          setApplyConfirmRow(null);
+          setIpInfoMap({});
+        }}
+        title="Анализ списка ban"
+        size="xl"
+      >
+        <div className="mb-3">
+          <label className="form-label">Суммаризировать подсети /24, в которых одиночных IP больше чем</label>
+          <div className="d-flex align-items-center gap-2">
+            <input
+              type="number"
+              className="form-control"
+              style={{ width: '80px' }}
+              min={2}
+              max={100}
+              value={minCountN}
+              onChange={(e) => setMinCountN(e.target.value)}
+            />
+            <span className="text-muted small">(по умолчанию {DEFAULT_MIN_COUNT_N})</span>
+          </div>
+        </div>
+        <div className="mb-3">
+          <button type="button" className="btn btn-primary" onClick={runAnalysis}>
+            <IconChartBar className="me-1" size={18} />
+            Анализировать
+          </button>
+        </div>
+        {analysisResult && (
+          <>
+            {analysisResult.suggestions.length === 0 ? (
+              <p className="text-muted mb-0">Нет подсетей для суммаризации (в каждой /24 не больше {minCountN} одиночных IP).</p>
+            ) : (
+              <>
+                <p className="mb-2">
+                  Найдено <strong>{analysisResult.suggestions.length}</strong> подсетей /24 для замены: удалить одиночные IP и добавить одну запись на подсеть.
+                  {ipInfoLoading && (
+                    <span className="ms-2 text-muted small">(загрузка AS/хостер с ipinfo.io…)</span>
+                  )}
+                </p>
+                <div className="table-responsive">
+                  <table className="table table-sm table-vcenter mb-0">
+                    <thead>
+                      <tr>
+                        <th>Подсеть</th>
+                        <th className="text-end">Кол-во IP</th>
+                        <th>AS / Хостер</th>
+                        <th>Ссылка</th>
+                        <th>Действие</th>
+                        <th className="text-end" style={{ width: '120px' }}>Применить</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {analysisResult.suggestions.map((s) => {
+                        const firstIp = s.subnet.split('/')[0];
+                        const info = ipInfoMap[s.subnet];
+                        const rowApplying = applyingRow === s.subnet;
+                        return (
+                          <tr key={s.subnet}>
+                            <td className="font-monospace">{s.subnet}</td>
+                            <td className="text-end">{s.count}</td>
+                            <td className="small">
+                              {info === undefined
+                                ? (ipInfoLoading ? '…' : '—')
+                                : info
+                                  ? (info.org || info.country ? [info.org, info.country].filter(Boolean).join(' · ') : '—')
+                                  : '—'}
+                            </td>
+                            <td>
+                              <a
+                                href={`https://ipinfo.io/${firstIp}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-primary"
+                              >
+                                ipinfo.io
+                              </a>
+                            </td>
+                            <td className="text-muted small">Удалить {s.count} записей → добавить 1</td>
+                            <td className="text-end">
+                              <button
+                                type="button"
+                                className="btn btn-sm btn-warning"
+                                disabled={rowApplying || applying}
+                                onClick={() => {
+                                  setApplyConfirmRow(s);
+                                  setApplyConfirmOpen(true);
+                                }}
+                              >
+                                {rowApplying ? (
+                                  <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" />
+                                ) : null}
+                                Применить
+                              </button>
+                            </td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+                <div className="mt-3">
+                  <button
+                    type="button"
+                    className="btn btn-warning"
+                    onClick={() => {
+                    setApplyConfirmRow(null);
+                    setApplyConfirmOpen(true);
+                  }}
+                  >
+                    Применить всё на роутере
+                  </button>
+                </div>
+              </>
+            )}
+          </>
+        )}
+      </Modal>
+
+      <ConfirmDialog
+        open={applyConfirmOpen}
+        title={applyConfirmRow ? `Применить для ${applyConfirmRow.subnet}?` : 'Применить суммаризацию на роутере?'}
+        message={
+          applyConfirmRow
+            ? `Удалить ${applyConfirmRow.count} записей и добавить 1 запись (подсеть ${applyConfirmRow.subnet}). Продолжить?`
+            : applyPayload
+              ? `Будет удалено ${applyPayload.removeIds.length} записей и добавлено ${applyPayload.addEntries.length} записей (подсети /24). Продолжить?`
+              : ''
+        }
+        confirmText="Применить"
+        cancelText="Отмена"
+        destructive
+        size="md"
+        loading={applying || !!applyingRow}
+        onConfirm={handleApplySummary}
+        onCancel={() => {
+          setApplyConfirmOpen(false);
+          setApplyConfirmRow(null);
+        }}
+      />
+    </div>
+  );
+}

frontend/src/GraphView.jsx

@@ -14,7 +14,10 @@ import '@xyflow/react/dist/style.css';
 import { IconZoomIn, IconZoomOut, IconMaximize, IconMinimize, IconSearch, IconX, IconRefresh } from '@tabler/icons-react';
 import Tooltip from './components/Tooltip.jsx';
 
-function GraphView({ servers, connections, onCreateConnection }) {
+/**
+ * @param {Object} [pingMap] - опционально: ключ "fromIp:toIp" -> число (мс). Пинг между серверами для подписи на рёбрах.
+ */
+function GraphView({ servers, connections, onCreateConnection, pingMap }) {
   const flowRef = useRef(null);
   const instanceRef = useRef(null);
   const containerRef = useRef(null);
@@ -144,17 +147,32 @@ function GraphView({ servers, connections, onCreateConnection }) {
   }, [servers, connections]);
 
   const initialEdgesData = useMemo(() => {
+    const getPingLabel = (fromIp, toIp) => {
+      if (!pingMap || typeof pingMap !== 'object') return '';
+      const fwd = pingMap[`${fromIp}:${toIp}`];
+      const rev = pingMap[`${toIp}:${fromIp}`];
+      const parts = [];
+      if (typeof fwd === 'number') parts.push(`→ ${fwd} ms`);
+      if (typeof rev === 'number') parts.push(`← ${rev} ms`);
+      if (parts.length === 0) return '';
+      return parts.join(' · ');
+    };
     return (connections || []).map((c, idx) => {
       const style = getTunnelStyle(c.tunnelType);
       const baseLabel = c.tunnelType || 'TUNNEL';
       const ipLabel = c.ipA && c.ipB ? `${c.ipA} ⇄ ${c.ipB}` : '';
+      const pingLabel = getPingLabel(String(c.from), String(c.to));
+      const labelParts = [baseLabel];
+      if (ipLabel) labelParts.push(ipLabel);
+      if (pingLabel) labelParts.push(pingLabel);
+      const fullLabel = labelParts.join(' · ');
       const edgeId = `${c.from}-${c.to}-${idx}`;
       const isHighlighted = highlightedEdges.has(edgeId);
       return {
         id: edgeId,
         source: String(c.from),
         target: String(c.to),
-        label: ipLabel ? `${baseLabel} · ${ipLabel}` : baseLabel,
+        label: fullLabel,
         type: 'smoothstep',
         style: {
           stroke: style.color,
@@ -176,7 +194,7 @@ function GraphView({ servers, connections, onCreateConnection }) {
         animated: false,
       };
     });
-  }, [connections, getTunnelStyle, highlightedEdges, highlightedNodeId, selectedNodeId]);
+  }, [connections, getTunnelStyle, highlightedEdges, highlightedNodeId, selectedNodeId, pingMap]);
 
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdgesData);
 

frontend/src/InterfaceSpeedTest.jsx

@@ -0,0 +1,506 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import api from './lib/api.js';
+import { useNotify } from './components/NotifyProvider.jsx';
+import PageHeader from './components/PageHeader.jsx';
+import TableSkeleton from './components/TableSkeleton.jsx';
+import { countryToFlag } from './utils/serverUtils.js';
+import {
+  IconTopologyRing,
+  IconNetwork,
+  IconSearch,
+  IconRefresh,
+} from '@tabler/icons-react';
+
+export default function InterfaceSpeedTest() {
+  const notify = useNotify();
+
+  const [servers, setServers] = useState([]);
+  const [networkConfig, setNetworkConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [serverSearch, setServerSearch] = useState('');
+
+  const [serverId, setServerId] = useState('');
+  const [selectedInterfaceName, setSelectedInterfaceName] = useState('');
+  const [running, setRunning] = useState(false);
+  const [speedResult, setSpeedResult] = useState(null);
+  const [speedSettings, setSpeedSettings] = useState({
+    protocol: 'tcp',
+    durationSeconds: 10,
+    cacheMinutes: 0,
+  });
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const load = async () => {
+      setLoading(true);
+      try {
+        const [serversRes, netRes, uiRes] = await Promise.all([
+          api.get('/servers', { signal }),
+          api.get('/network-config', { signal }).catch(() => ({ data: null })),
+          api.get('/ui-settings', { signal }).catch(() => ({ data: {} })),
+        ]);
+
+        setServers(Array.isArray(serversRes?.data) ? serversRes.data : []);
+        setNetworkConfig(
+          netRes?.data && typeof netRes.data === 'object'
+            ? netRes.data
+            : { gateways: [], tunnelInterfaces: [] }
+        );
+
+        const ui = uiRes?.data || {};
+        const proto =
+          String(ui.interfaceSpeedTestProtocol || 'tcp').toLowerCase() ===
+          'udp'
+            ? 'udp'
+            : 'tcp';
+        const duration = Math.max(
+          1,
+          Math.min(
+            600,
+            parseInt(ui.interfaceSpeedTestDurationSeconds, 10) || 5
+          )
+        );
+        const cacheMinutes = Math.max(
+          0,
+          parseInt(ui.interfaceSpeedTestCacheMinutes, 10) || 0
+        );
+        setSpeedSettings({
+          protocol: proto,
+          durationSeconds: duration,
+          cacheMinutes,
+        });
+      } catch (e) {
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+        console.error('[InterfaceSpeedTest] load failed', e);
+        notify.error('Не удалось загрузить данные для замера скорости');
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+    return () => controller.abort();
+  }, [notify]);
+
+  const gateways = useMemo(
+    () =>
+      networkConfig?.gateways && Array.isArray(networkConfig.gateways)
+        ? networkConfig.gateways
+        : [],
+    [networkConfig]
+  );
+
+  const tunnelInterfaces = useMemo(
+    () =>
+      networkConfig?.tunnelInterfaces &&
+      Array.isArray(networkConfig.tunnelInterfaces)
+        ? networkConfig.tunnelInterfaces
+        : [],
+    [networkConfig]
+  );
+
+  const jumphostServers = useMemo(
+    () =>
+      (servers || []).filter((s) =>
+        ['jumphost', 'home'].includes(
+          String(s.type || '').toLowerCase()
+        )
+      ),
+    [servers]
+  );
+
+  const makeServerId = (s) => (s.id || s.dns || s.ip || '').toString();
+
+  const jumphostInputServers = useMemo(
+    () => jumphostServers.map((s) => ({ ...s, id: makeServerId(s) })),
+    [jumphostServers]
+  );
+
+  const visibleJumphostServers = useMemo(() => {
+    if (!serverSearch.trim()) return jumphostInputServers;
+    const q = serverSearch.trim().toLowerCase();
+    return jumphostInputServers.filter((s) => {
+      const fields = [
+        s.id,
+        s.ip,
+        s.dns,
+        s.extIp,
+        s.internalIp,
+        s.country,
+        s.provider,
+      ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+      return fields.includes(q);
+    });
+  }, [jumphostInputServers, serverSearch]);
+
+  const currentServer = useMemo(
+    () => jumphostServers.find((s) => makeServerId(s) === serverId) || null,
+    [jumphostServers, serverId]
+  );
+
+  const interfacesForServer = useMemo(() => {
+    if (!serverId || !tunnelInterfaces.length) return [];
+    const ids = new Set(
+      [serverId, currentServer?.id, currentServer?.ip, currentServer?.dns]
+        .filter(Boolean)
+        .map(String)
+    );
+    return tunnelInterfaces.filter(
+      (i) =>
+        i &&
+        i.name &&
+        (ids.has(String(i.serverId)) || ids.has(String(i.serverId2)))
+    );
+  }, [tunnelInterfaces, serverId, currentServer]);
+
+  const currentServerLabel =
+    currentServer?.dns ||
+    currentServer?.ip ||
+    makeServerId(currentServer || {}) ||
+    'Не выбран';
+
+  const isInitialLoading = loading && servers.length === 0;
+
+  const formatMbps = (bps) => {
+    if (bps == null || Number.isNaN(bps)) return '—';
+    const mbps = bps / 1_000_000;
+    if (!Number.isFinite(mbps)) return '—';
+    return `${mbps.toFixed(2)} Мбит/с`;
+  };
+
+  /** Запросить только кеш (без замера). При выборе сервера/интерфейса показываем кеш, если есть. */
+  const fetchCachedResult = useCallback(async () => {
+    if (!serverId || !selectedInterfaceName) {
+      setSpeedResult(null);
+      return;
+    }
+    try {
+      const res = await api.post('/mikrotik/speed-test', {
+        serverId,
+        interfaceName: selectedInterfaceName,
+        cacheOnly: true,
+      });
+      const data = res?.data || {};
+      if (data.ok !== false && !data.notInCache && (data.tcpDownloadBps != null || data.tcpUploadBps != null)) {
+        setSpeedResult(data);
+      } else {
+        setSpeedResult(null);
+      }
+    } catch {
+      setSpeedResult(null);
+    }
+  }, [serverId, selectedInterfaceName]);
+
+  useEffect(() => {
+    fetchCachedResult();
+  }, [fetchCachedResult]);
+
+  const handleRunTest = async () => {
+    if (!serverId) {
+      notify.error('Выберите сервер (jumphost/home) для замера скорости');
+      return;
+    }
+    if (!selectedInterfaceName) {
+      notify.error('Выберите туннельный интерфейс для замера скорости');
+      return;
+    }
+
+    setRunning(true);
+    setSpeedResult(null);
+
+    try {
+      const body = {
+        serverId,
+        interfaceName: selectedInterfaceName,
+        durationSeconds: speedSettings.durationSeconds,
+        forceRefresh: true,
+      };
+      const res = await api.post('/mikrotik/speed-test', body, {
+        timeout: 120000,
+      });
+      const data = res?.data || {};
+      if (data.ok === false) {
+        notify.error(
+          data.error || 'Замер скорости по интерфейсу завершился с ошибкой'
+        );
+        return;
+      }
+      setSpeedResult(data);
+    } catch (e) {
+      console.error('[InterfaceSpeedTest] test failed', e);
+      notify.error(
+        e?.response?.data?.message || e?.message || 'Ошибка замера скорости'
+      );
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  const handleReset = () => {
+    setServerId('');
+    setSelectedInterfaceName('');
+    setSpeedResult(null);
+  };
+
+  return (
+    <div className="page">
+      <PageHeader
+        title="Скорость интерфейсов MikroTik"
+        icon={<IconTopologyRing size={24} />}
+        meta={`Текущий сервер: ${currentServerLabel}`}
+      />
+
+      <div className="row g-2">
+        <div className="col-md-5">
+          <div className="card mb-2">
+            <div className="card-header py-2 d-flex align-items-center justify-content-between">
+              <div>
+                <h3 className="card-title mb-0">Серверы (jumphost / home)</h3>
+                <p className="text-muted small mb-0 mt-0">
+                  Выберите роутер с настроенным MikroTik API
+                </p>
+              </div>
+              <div className="input-icon input-icon-sm" style={{ minWidth: 200 }}>
+                <input
+                  type="text"
+                  className="form-control form-control-sm"
+                  placeholder="Поиск серверов..."
+                  value={serverSearch}
+                  onChange={(e) => setServerSearch(e.target.value)}
+                />
+                <span className="input-icon-addon">
+                  <IconSearch size={14} className="text-muted" />
+                </span>
+              </div>
+            </div>
+            <div className="card-body py-2">
+              {isInitialLoading ? (
+                <TableSkeleton rows={2} columns={2} />
+              ) : jumphostServers.length === 0 ? (
+                <div className="text-muted small">
+                  Нет серверов типа <code>jumphost</code> или <code>home</code>.
+                  Добавьте их в разделе «Серверы», чтобы использовать замер
+                  скорости.
+                </div>
+              ) : visibleJumphostServers.length === 0 ? (
+                <div className="text-muted small">
+                  По вашему запросу серверы не найдены. Попробуйте изменить фильтр
+                  поиска.
+                </div>
+              ) : (
+                <div className="row row-cards g-1">
+                  {visibleJumphostServers.map((s) => {
+                    const id = s.id;
+                    const isActive = id === serverId;
+                    const flag = s.country ? countryToFlag(s.country) : '';
+                    const line = [s.dns, s.ip].filter(Boolean).join(' · ');
+                    return (
+                      <div
+                        className="col-12 col-sm-6 col-md-6"
+                        key={id}
+                      >
+                        <div
+                          className={`card card-sm h-100 cursor-pointer ${
+                            isActive ? 'border-primary card-hover' : 'card-hover'
+                          }`}
+                          onClick={() => setServerId(id)}
+                        >
+                          <div className="card-body py-2 px-2 d-flex align-items-center gap-2">
+                            <span
+                              className="avatar avatar-sm bg-primary-lt"
+                              title={s.country || ''}
+                            >
+                              {flag || s.ip?.slice(0, 2) || '?'}
+                            </span>
+                            <div className="flex-grow-1 min-w-0">
+                              <div
+                                className="fw-semibold text-truncate small"
+                                title={s.dns || s.ip || id}
+                              >
+                                {s.dns || s.ip || id}
+                              </div>
+                              <div
+                                className="text-muted small text-truncate"
+                                title={line}
+                              >
+                                {line ||
+                                  [s.country, s.provider]
+                                    .filter(Boolean)
+                                    .join(' · ') ||
+                                  '—'}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+              <div className="d-flex flex-wrap align-items-center gap-2 mt-2">
+                <span className="badge bg-primary-lt text-primary">
+                  Сервер: {currentServerLabel}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="card">
+            <div className="card-header py-2">
+              <h3 className="card-title mb-0">Интерфейсы туннелей</h3>
+            </div>
+            <div className="card-body py-2">
+              {loading && !networkConfig ? (
+                <div className="text-muted small">Загрузка сетевых настроек…</div>
+              ) : !serverId ? (
+                <div className="text-muted small">
+                  Выберите сервер слева, затем интерфейс для замера скорости.
+                </div>
+              ) : interfacesForServer.length === 0 ? (
+                <div className="text-muted small">
+                  Для выбранного сервера нет туннельных интерфейсов в
+                  <code> /network-config</code>. Добавьте интерфейсы в разделе
+                  «Сетевые настройки».
+                </div>
+              ) : (
+                <>
+                  <div className="mb-2">
+                    <select
+                      className="form-select form-select-sm"
+                      value={selectedInterfaceName}
+                      onChange={(e) => setSelectedInterfaceName(e.target.value)}
+                    >
+                      <option value="">Не выбран</option>
+                      {interfacesForServer.map((iface) => (
+                        <option key={iface.name} value={iface.name}>
+                          {iface.name} ({iface.localIp} ⇄ {iface.remoteIp})
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="text-muted small">
+                    Для сопоставления используется имя интерфейса из
+                    <code> /network-config.tunnelInterfaces</code>. В RouterOS
+                    имя должно совпадать.
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="col-md-7">
+          <div className="card mb-2">
+            <div className="card-header py-2 d-flex align-items-center justify-content-between">
+              <h3 className="card-title mb-0">Параметры замера</h3>
+              <div className="btn-list">
+                <button
+                  type="button"
+                  className="btn btn-outline-secondary btn-sm"
+                  onClick={handleReset}
+                  disabled={running}
+                >
+                  <IconRefresh size={16} className="me-1" />
+                  Сбросить
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-primary btn-sm"
+                  onClick={handleRunTest}
+                  disabled={running || !serverId || !selectedInterfaceName}
+                >
+                  {running ? 'Замер…' : 'Запустить замер'}
+                </button>
+              </div>
+            </div>
+            <div className="card-body py-2">
+              <div className="row g-2">
+                <div className="col-md-4">
+                  <label className="form-label small mb-0">Протокол</label>
+                  <div className="d-flex align-items-center gap-1">
+                    <IconNetwork size={16} className="text-muted" />
+                    <span className="small text-uppercase">
+                      {speedSettings.protocol === 'udp' ? 'UDP' : 'TCP'}
+                    </span>
+                  </div>
+                  <div className="text-muted small">
+                    Значение берётся из настроек интерфейса.
+                  </div>
+                </div>
+                <div className="col-md-4">
+                  <label className="form-label small mb-0">
+                    Время замера (сек)
+                  </label>
+                  <div className="fw-semibold">
+                    {speedSettings.durationSeconds}
+                  </div>
+                </div>
+                <div className="col-md-4">
+                  <label className="form-label small mb-0">
+                    Кеш результата (мин)
+                  </label>
+                  <div className="fw-semibold">
+                    {speedSettings.cacheMinutes}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="card">
+            <div className="card-header py-2">
+              <h3 className="card-title mb-0">
+                Скорость по интерфейсу MikroTik
+              </h3>
+            </div>
+            <div className="card-body">
+              {!speedResult ? (
+                <div className="text-muted small">
+                  Выберите сервер и интерфейс, затем запустите замер. Средние
+                  скорости приёма и передачи появятся здесь.
+                </div>
+              ) : (
+                <div className="row g-3">
+                  <div className="col-12 col-md-6">
+                    <div className="card bg-blue-lt">
+                      <div className="card-body py-2">
+                        <div className="text-muted small mb-1">Интерфейс</div>
+                        <div className="fw-semibold">
+                          {speedResult.interfaceName || selectedInterfaceName}
+                        </div>
+                        <div className="text-muted small mt-1">
+                          Замер за {speedResult.durationSeconds} сек
+                          {speedResult.cached ? ' (из кеша)' : ''}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="col-12 col-md-6">
+                    <div className="card bg-azure-lt">
+                      <div className="card-body py-2">
+                        <div className="text-muted small mb-1">
+                          TCP скорость
+                        </div>
+                        <div className="fw-bold">
+                          Download: {formatMbps(speedResult.tcpDownloadBps)}
+                        </div>
+                        <div className="fw-bold mt-1">
+                          Upload: {formatMbps(speedResult.tcpUploadBps)}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

frontend/src/MikrotikBackupsManager.jsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import * as Diff from 'diff';
 import api from './lib/api.js';
 import { useNotify } from './components/NotifyProvider.jsx';
 import PageHeader from './components/PageHeader.jsx';
@@ -6,6 +7,7 @@ import TableSkeleton from './components/TableSkeleton.jsx';
 import EmptyState from './components/EmptyState.jsx';
 import Tooltip from './components/Tooltip.jsx';
 import DataTable from './components/DataTable.jsx';
+import { LargeModal, FullscreenModal } from './components/Modal.jsx';
 import { countryToFlag } from './utils/serverUtils.js';
 import {
   IconRefresh,
@@ -17,6 +19,85 @@ import {
   IconSearch,
 } from '@tabler/icons-react';
 
+/**
+ * Строит две колонки строк для side-by-side diff (как git diff).
+ * leftLines/rightLines — массивы { text, type: 'unchanged'|'removed'|'added'|'empty' }.
+ */
+function getDiffLines(oldStr, newStr) {
+  const left = [];
+  const right = [];
+  const changes = Diff.diffLines(oldStr || '', newStr || '');
+  for (const part of changes) {
+    const lines = (part.value || '').split('\n');
+    if (part.value && part.value.endsWith('\n') && lines.length > 0) lines.pop();
+    for (const line of lines) {
+      if (part.added) {
+        left.push({ text: '', type: 'empty' });
+        right.push({ text: line, type: 'added' });
+      } else if (part.removed) {
+        left.push({ text: line, type: 'removed' });
+        right.push({ text: '', type: 'empty' });
+      } else {
+        left.push({ text: line, type: 'unchanged' });
+        right.push({ text: line, type: 'unchanged' });
+      }
+    }
+  }
+  return { left, right };
+}
+
+const diffPanelStyle = {
+  maxHeight: 360,
+  overflow: 'auto',
+  fontSize: 12,
+  fontFamily: 'ui-monospace, monospace',
+  margin: 0,
+  padding: '0.5rem 0.75rem',
+  borderRadius: 4,
+  backgroundColor: 'var(--tblr-code-bg, #0f172a)', // как тёмный code-блок Tabler
+  border: '1px solid rgba(15, 23, 42, 0.9)',
+};
+const diffLineStyle = {
+  display: 'block',
+  minHeight: '1.25em',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+  padding: '0 4px',
+  margin: 0,
+  color: 'var(--tblr-code-color, #e5e7eb)',
+};
+const diffRemovedBg = {
+  background: 'rgba(248, 81, 73, 0.2)',
+  borderLeft: '3px solid rgba(248, 81, 73, 0.9)',
+};
+const diffAddedBg = {
+  background: 'rgba(63, 185, 80, 0.2)',
+  borderLeft: '3px solid rgba(63, 185, 80, 0.9)',
+};
+
+function DiffPanel({ lines, side, innerRef, onScroll }) {
+  return (
+    <pre style={diffPanelStyle} ref={innerRef} onScroll={onScroll}>
+      {lines.length === 0 ? (
+        <span style={diffLineStyle}># пусто</span>
+      ) : (
+        lines.map((item, i) => (
+          <span
+            key={i}
+            style={{
+              ...diffLineStyle,
+              ...(item.type === 'removed' && side === 'left' ? diffRemovedBg : null),
+              ...(item.type === 'added' && side === 'right' ? diffAddedBg : null),
+            }}
+          >
+            {item.type === 'empty' ? '\u00A0' : item.text || ''}
+          </span>
+        ))
+      )}
+    </pre>
+  );
+}
+
 function formatDateTime(value) {
   if (!value) return '';
   try {
@@ -57,8 +138,13 @@ function MikrotikBackupsManager() {
   const [viewConfigKey, setViewConfigKey] = useState(null);
   const [viewConfigText, setViewConfigText] = useState('');
   const [viewLoading, setViewLoading] = useState(false);
+  const [viewModalOpen, setViewModalOpen] = useState(false);
   const [diffResult, setDiffResult] = useState(null);
   const [diffLoading, setDiffLoading] = useState(false);
+  const [diffModalOpen, setDiffModalOpen] = useState(false);
+  const leftDiffRef = useRef(null);
+  const rightDiffRef = useRef(null);
+  const isSyncingScrollRef = useRef(false);
 
   // UI-состояние выбора сервера для просмотра бэкапов (в стиле /filters)
   const [serverSearch, setServerSearch] = useState('');
@@ -71,13 +157,18 @@ function MikrotikBackupsManager() {
   const backupPageSize = 10;
 
   useEffect(() => {
-    fetchServers();
+    const controller = new AbortController();
-    fetchUiSettings();
+    const signal = controller.signal;
+    fetchServers(signal);
+    fetchUiSettings(signal);
+    return () => controller.abort();
   }, []);
 
   useEffect(() => {
     if (selectedServerId) {
-      fetchBackups(selectedServerId);
+      const controller = new AbortController();
+      fetchBackups(selectedServerId, controller.signal);
+      return () => controller.abort();
     } else {
       setBackups([]);
       setSelectedKeys([]);
@@ -172,6 +263,42 @@ function MikrotikBackupsManager() {
     return filteredBackupServers.slice(start, start + backupPageSize);
   }, [filteredBackupServers, backupPage, backupTotalPages]);
 
+  const diffComputed = useMemo(() => {
+    if (diffResult?.configA == null || diffResult?.configB == null) {
+      return {
+        left: [],
+        right: [],
+        stats: { removed: 0, added: 0, total: 0 },
+      };
+    }
+    const { left, right } = getDiffLines(diffResult.configA, diffResult.configB);
+    const removed = left.filter((l) => l.type === 'removed').length;
+    const added = right.filter((l) => l.type === 'added').length;
+    return {
+      left,
+      right,
+      stats: { removed, added, total: removed + added },
+    };
+  }, [diffResult?.configA, diffResult?.configB]);
+
+  const syncScroll = (source) => {
+    const leftEl = leftDiffRef.current;
+    const rightEl = rightDiffRef.current;
+    if (!leftEl || !rightEl) return;
+    const current = source === 'left' ? leftEl : rightEl;
+    const other = source === 'left' ? rightEl : leftEl;
+
+    if (isSyncingScrollRef.current) return;
+    isSyncingScrollRef.current = true;
+
+    const maxCurrent = current.scrollHeight - current.clientHeight;
+    const ratio = maxCurrent > 0 ? current.scrollTop / maxCurrent : 0;
+    const maxOther = other.scrollHeight - other.clientHeight;
+    other.scrollTop = ratio * (maxOther > 0 ? maxOther : 0);
+
+    isSyncingScrollRef.current = false;
+  };
+
   const handleBackupSort = (field) => {
     setBackupSortField((prevField) => {
       if (prevField === field) {
@@ -192,10 +319,11 @@ function MikrotikBackupsManager() {
     setBackupServerIds(new Set());
   };
 
-  const fetchServers = async () => {
+  const fetchServers = async (abortSignal) => {
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
       setLoadingServers(true);
-      const res = await api.get('/servers');
+      const res = await api.get('/servers', opts);
       const list = Array.isArray(res.data) ? res.data : [];
       setServers(list);
       const firstJumphost = list.find((s) => String(s.type || '').toLowerCase() === 'jumphost');
@@ -203,6 +331,7 @@ function MikrotikBackupsManager() {
         setSelectedServerId(makeServerId(firstJumphost));
       }
     } catch (err) {
+      if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
       console.error('Error fetching servers for backups:', err);
       notify.error('Не удалось загрузить список серверов для бэкапов');
     } finally {
@@ -210,9 +339,10 @@ function MikrotikBackupsManager() {
     }
   };
 
-  const fetchUiSettings = async () => {
+  const fetchUiSettings = async (abortSignal) => {
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
-      const res = await api.get('/ui-settings');
+      const res = await api.get('/ui-settings', opts);
       const data = res?.data || {};
       setUiSettings(data);
       const list = Array.isArray(data.mikrotikBackupServers) ? data.mikrotikBackupServers : [];
@@ -220,21 +350,23 @@ function MikrotikBackupsManager() {
       const e = res?.headers?.etag || res?.headers?.ETag || '';
       setUiSettingsEtag(e ? String(e) : '');
     } catch (err) {
+      if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
       console.error('Error fetching UI settings for backups:', err);
-      // мягко игнорируем, просто будут дефолты
     }
   };
 
-  const fetchBackups = async (serverId) => {
+  const fetchBackups = async (serverId, abortSignal) => {
     if (!serverId) return;
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
       setLoadingBackups(true);
       setSelectedKeys([]);
       setDiffResult(null);
-      const res = await api.get('/mikrotik/backups', { params: { serverId } });
+      const res = await api.get('/mikrotik/backups', { params: { serverId }, ...opts });
       const items = res.data?.items || [];
       setBackups(items);
     } catch (err) {
+      if (err?.name === 'CanceledError' || err?.name === 'AbortError' || err?.code === 'ERR_CANCELED') return;
       console.error('Error fetching backups:', err);
       notify.error('Не удалось загрузить список бэкапов MikroTik');
     } finally {
@@ -261,6 +393,7 @@ function MikrotikBackupsManager() {
       setViewLoading(true);
       setViewConfigKey(key);
       setViewConfigText('');
+      setViewModalOpen(true);
       const res = await api.get('/mikrotik/backups/item', { params: { key } });
       setViewConfigText(res.data?.config || '');
     } catch (err) {
@@ -277,6 +410,7 @@ function MikrotikBackupsManager() {
       return;
     }
     try {
+      setDiffModalOpen(true);
       setDiffLoading(true);
       setDiffResult(null);
       const res = await api.post('/mikrotik/backups/diff', {
@@ -426,7 +560,7 @@ function MikrotikBackupsManager() {
     <div className="page">
       <PageHeader
         title="MikroTik Backups"
-        pretitle="Бэкапы конфигурации через REST API + S3"
+        icon={<IconDownload size={24} />}
         meta={`Текущий сервер: ${currentServerLabel}`}
         actions={actions}
       />
@@ -730,19 +864,18 @@ function MikrotikBackupsManager() {
         </div>
       </div>
 
-      {(viewConfigKey || diffResult) && (
+      <LargeModal
-        <div className="row mt-4">
+        show={viewModalOpen}
-          {viewConfigKey && (
+        onClose={() => {
-            <div className={diffResult ? 'col-md-6' : 'col-12'}>
+          setViewModalOpen(false);
-              <div className="card">
+        }}
-                <div className="card-header d-flex align-items-center justify-content-between">
+        title="Содержимое бэкапа MikroTik"
-                  <div>
+        footer={(
-                    <div className="card-title mb-0">Содержимое бэкапа</div>
+          <div className="d-flex justify-content-between w-100">
-                    <div className="text-muted small text-truncate" title={viewConfigKey}>
+            <div className="text-muted small text-truncate" title={viewConfigKey || ''}>
-                      {viewConfigKey}
+              {viewConfigKey || 'Бэкап не выбран'}
             </div>
-                  </div>
+            <div className="btn-list mb-0">
-                  <div className="btn-list">
               <button
                 type="button"
                 className="btn btn-outline-secondary btn-sm"
@@ -752,72 +885,112 @@ function MikrotikBackupsManager() {
                 <IconCopy size={16} className="me-1" />
                 Копировать
               </button>
+              <button
+                type="button"
+                className="btn btn-secondary btn-sm"
+                onClick={() => setViewModalOpen(false)}
+              >
+                Закрыть
+              </button>
             </div>
           </div>
-                <div className="card-body">
+        )}
+      >
         {viewLoading ? (
           <TableSkeleton rows={6} columns={1} />
         ) : (
           <pre
-                      className="mb-0"
+            className="bg-dark text-white p-3 rounded"
-                      style={{ maxHeight: 420, overflow: 'auto', fontSize: 12 }}
+            style={{ maxHeight: 500, overflow: 'auto', fontSize: 12 }}
           >
-                      {viewConfigText || '# Нет данных для отображения'}
+            <code>{viewConfigText || '# Нет данных для отображения'}</code>
           </pre>
         )}
-                </div>
+      </LargeModal>
-              </div>
-            </div>
-          )}
 
-          {diffResult && (
+      <FullscreenModal
-            <div className={viewConfigKey ? 'col-md-6 mt-3 mt-md-0' : 'col-12'}>
+        show={diffModalOpen}
-              <div className="card">
+        onClose={() => {
-                <div className="card-header d-flex align-items-center justify-content-between">
+          setDiffModalOpen(false);
-                  <div>
+        }}
-                    <div className="card-title mb-0">Сравнение бэкапов</div>
+        title="Сравнение бэкапов MikroTik"
+        footer={(
+          <div className="d-flex justify-content-between w-100">
             <div className="text-muted small">
-                      {diffResult.same
+              {diffResult?.same
                 ? 'Конфигурации идентичны'
                 : 'Конфигурации отличаются — проверьте различия перед откатом.'}
             </div>
+            <button
+              type="button"
+              className="btn btn-secondary"
+              onClick={() => setDiffModalOpen(false)}
+            >
+              Закрыть
+            </button>
           </div>
-                </div>
+        )}
-                <div className="card-body">
+      >
         {diffLoading ? (
-                    <TableSkeleton rows={6} columns={2} />
+          <TableSkeleton rows={8} columns={2} />
+        ) : !diffResult ? (
+          <div className="text-muted small">
+            Не удалось загрузить результат сравнения. Попробуйте ещё раз.
+          </div>
         ) : (
+          <>
+            <div className="alert alert-info mb-3 small d-flex justify-content-between align-items-center">
+              <span>
+                {!diffResult.same ? (
+                  <>
+                    <IconAlertTriangle size={16} className="me-1 text-warning" />
+                    Конфигурации отличаются — слева A, справа B. Проверьте различия перед откатом.
+                  </>
+                ) : (
+                  'Конфигурации идентичны — изменений нет.'
+                )}
+              </span>
+              <span>
+                Всего изменений:{' '}
+                <span className="fw-semibold">{diffComputed.stats.total}</span>
+                <span className="text-success ms-2">+{diffComputed.stats.added}</span>
+                <span className="text-danger ms-2">−{diffComputed.stats.removed}</span>
+              </span>
+            </div>
             <div className="row">
               <div className="col-md-6 mb-3 mb-md-0">
                 <div className="mb-2 small text-muted text-truncate" title={diffResult.a?.key}>
                   A: {diffResult.a?.key}
                 </div>
-                        <pre
+                <DiffPanel
-                          className="mb-0"
+                  lines={diffComputed.left}
-                          style={{ maxHeight: 360, overflow: 'auto', fontSize: 12 }}
+                  side="left"
-                        >
+                  innerRef={leftDiffRef}
-                          {diffResult.configA || '# пусто'}
+                  onScroll={() => syncScroll('left')}
-                        </pre>
+                />
               </div>
               <div className="col-md-6">
                 <div className="mb-2 small text-muted text-truncate" title={diffResult.b?.key}>
                   B: {diffResult.b?.key}
                 </div>
-                        <pre
+                <DiffPanel
-                          className="mb-0"
+                  lines={diffComputed.right}
-                          style={{ maxHeight: 360, overflow: 'auto', fontSize: 12 }}
+                  side="right"
-                        >
+                  innerRef={rightDiffRef}
-                          {diffResult.configB || '# пусто'}
+                  onScroll={() => syncScroll('right')}
-                        </pre>
+                />
               </div>
             </div>
+            {!diffResult.same && (
+              <div className="mt-3 text-muted small">
+                <span style={{ background: 'rgba(248, 81, 73, 0.35)', padding: '0 4px', borderRadius: 2 }}> удалено (A)</span>
+                {' · '}
+                <span style={{ background: 'rgba(63, 185, 80, 0.35)', padding: '0 4px', borderRadius: 2 }}> добавлено (B)</span>
+              </div>
             )}
-                </div>
+          </>
-              </div>
-            </div>
-          )}
-        </div>
         )}
+      </FullscreenModal>
     </div>
   );
 }

frontend/src/MikrotikTools.jsx

@@ -0,0 +1,930 @@
+import { useEffect, useMemo, useState } from 'react';
+import api from './lib/api.js';
+import { useNotify } from './components/NotifyProvider.jsx';
+import PageHeader from './components/PageHeader.jsx';
+import TableSkeleton from './components/TableSkeleton.jsx';
+import EmptyState from './components/EmptyState.jsx';
+import { countryToFlag } from './utils/serverUtils.js';
+import {
+  IconRoute,
+  IconWorld,
+  IconAlertTriangle,
+  IconRefresh,
+  IconSearch,
+  IconBrandGoogle,
+  IconBrandYandex,
+  IconBrandCloudflare,
+} from '@tabler/icons-react';
+
+/** Популярные цели для ping/traceroute — карточки с логотипами */
+const POPULAR_TARGETS = [
+  { id: 'yandex', name: 'Yandex', target: 'yandex.ru', Icon: IconBrandYandex, color: 'red' },
+  { id: 'google', name: 'Google', target: '8.8.8.8', Icon: IconBrandGoogle, color: 'blue' },
+  { id: 'cloudflare', name: 'Cloudflare DNS', target: '1.1.1.1', Icon: IconBrandCloudflare, color: 'orange' },
+];
+
+/**
+ * Раздел "Инструменты → MikroTik": проверка маршрута (traceroute)
+ * с выбором сервера, gateway и домена/IP.
+ */
+function MikrotikTools() {
+  const notify = useNotify();
+
+  const [servers, setServers] = useState([]);
+  const [networkConfig, setNetworkConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const [serverId, setServerId] = useState('');
+  const [gatewayRef, setGatewayRef] = useState('');
+  const [gatewayMeta, setGatewayMeta] = useState(null);
+  const [target, setTarget] = useState('');
+  const [maxHops, setMaxHops] = useState(30);
+
+  const [mode, setMode] = useState('traceroute'); // 'traceroute' | 'ping'
+
+  const [running, setRunning] = useState(false);
+  const [hops, setHops] = useState([]);
+  const [analysis, setAnalysis] = useState([]);
+  const [tracerouteTab, setTracerouteTab] = useState('table'); // 'table' | 'analysis'
+  const [pingResult, setPingResult] = useState(null);
+  const [useDns, setUseDns] = useState(true);
+
+  const [serverSearch, setServerSearch] = useState('');
+
+  // Загрузка серверов и сетевого конфига
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      try {
+        const [serversRes, netRes] = await Promise.all([
+          api.get('/servers'),
+          api.get('/network-config'),
+        ]);
+        setServers(Array.isArray(serversRes.data) ? serversRes.data : []);
+        setNetworkConfig(netRes.data && typeof netRes.data === 'object' ? netRes.data : { gateways: [], tunnelInterfaces: [] });
+      } catch (error) {
+        console.error('[MikrotikTools] failed to load initial data', error);
+        notify.error('Не удалось загрузить данные для инструментов MikroTik');
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, [notify]);
+
+  const gateways = useMemo(
+    () => (networkConfig?.gateways && Array.isArray(networkConfig.gateways) ? networkConfig.gateways : []),
+    [networkConfig]
+  );
+
+  const interfaces = useMemo(
+    () => (networkConfig?.tunnelInterfaces && Array.isArray(networkConfig.tunnelInterfaces) ? networkConfig.tunnelInterfaces : []),
+    [networkConfig]
+  );
+
+  const handleSelectGatewayMeta = (meta) => {
+    setGatewayMeta(meta);
+    // Если цель не задана — подставляем IP gateway как target
+    if (!target && meta && meta.ip) {
+      setTarget(meta.ip);
+    }
+  };
+
+  const handleRunCheck = async () => {
+    setRunning(true);
+    setHops([]);
+    setAnalysis([]);
+    setPingResult(null);
+
+    try {
+      if (mode === 'traceroute') {
+        if (!serverId) {
+          notify.error('Выберите сервер (jumphost)');
+          return;
+        }
+        const trimmedTarget = String(target || '').trim();
+        if (!trimmedTarget) {
+          notify.error('Укажите домен или IP назначения');
+          return;
+        }
+        const body = {
+          serverId,
+          target: trimmedTarget,
+          useDns,
+        };
+        if (gatewayMeta?.ip) {
+          body.gatewayIp = gatewayMeta.ip;
+        }
+        const hopsNum = Number(maxHops);
+        if (Number.isFinite(hopsNum) && hopsNum > 0) {
+          body.maxHops = hopsNum;
+        }
+
+        const res = await api.post('/mikrotik/traceroute', body);
+        const data = res?.data || {};
+        if (!data.ok) {
+          notify.error(data.error || 'Трассировка завершилась с ошибкой');
+          return;
+        }
+
+        const hopsList = Array.isArray(data.hops) ? data.hops : [];
+        setHops(hopsList);
+        setAnalysis(buildTracerouteAnalysis(hopsList, networkConfig, servers, body.target));
+      } else if (mode === 'ping') {
+        if (!serverId) {
+          notify.error('Выберите сервер (jumphost)');
+          return;
+        }
+        const trimmedTarget = String(target || '').trim();
+        if (!trimmedTarget) {
+          notify.error('Укажите домен или IP назначения');
+          return;
+        }
+        const body = {
+          serverId,
+          target: trimmedTarget,
+          count: 4,
+        };
+        if (gatewayMeta?.ip) {
+          body.gatewayIp = gatewayMeta.ip;
+        }
+
+        const res = await api.post('/mikrotik/ping', body);
+        const data = res?.data || {};
+        if (data.ok === false) {
+          notify.error(data.error || 'Ping завершился с ошибкой');
+          return;
+        }
+        setPingResult({
+          target: trimmedTarget,
+          ...data,
+        });
+      }
+    } catch (error) {
+      console.error('[MikrotikTools] check failed', error);
+      notify.error(error?.message || 'Ошибка при выполнении проверки');
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  const handleReset = () => {
+    setGatewayRef('');
+    setGatewayMeta(null);
+    setTarget('');
+    setHops([]);
+    setAnalysis([]);
+    setPingResult(null);
+  };
+
+  const jumphostServers = useMemo(
+    () => (servers || []).filter((s) => String(s.type || '').toLowerCase() === 'jumphost'),
+    [servers]
+  );
+
+  const makeServerId = (s) => (s.id || s.dns || s.ip || '').toString();
+
+  const jumphostInputServers = useMemo(
+    () => jumphostServers.map((s) => ({ ...s, id: makeServerId(s) })),
+    [jumphostServers]
+  );
+
+  const visibleJumphostServers = useMemo(() => {
+    if (!serverSearch.trim()) return jumphostInputServers;
+    const q = serverSearch.trim().toLowerCase();
+    return jumphostInputServers.filter((s) => {
+      const fields = [
+        s.id,
+        s.ip,
+        s.dns,
+        s.extIp,
+        s.internalIp,
+        s.country,
+        s.provider,
+      ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+      return fields.includes(q);
+    });
+  }, [jumphostInputServers, serverSearch]);
+
+  const currentServer = useMemo(
+    () => jumphostServers.find((s) => makeServerId(s) === serverId) || null,
+    [jumphostServers, serverId]
+  );
+
+  const interfacesForServer = useMemo(() => {
+    if (!serverId || !interfaces.length) return [];
+    const ids = new Set(
+      [serverId, currentServer?.id, currentServer?.ip, currentServer?.dns]
+        .filter(Boolean)
+        .map(String)
+    );
+    return interfaces.filter(
+      (i) =>
+        i &&
+        i.name &&
+        (ids.has(String(i.serverId)) || ids.has(String(i.serverId2)))
+    );
+  }, [interfaces, serverId, currentServer]);
+
+  const gatewaysForServer = useMemo(() => {
+    if (!serverId || !gateways.length) return [];
+    const ids = currentServer
+      ? new Set(
+          [serverId, currentServer.id, currentServer.ip, currentServer.dns].filter(Boolean).map(String)
+        )
+      : new Set([String(serverId)]);
+    return gateways.filter((g) => g && g.ip && ids.has(String(g.serverId)));
+  }, [serverId, currentServer, gateways]);
+
+  const currentServerLabel =
+    currentServer?.dns || currentServer?.ip || makeServerId(currentServer || {}) || 'Не выбран';
+
+  const isInitialLoading = loading && servers.length === 0;
+
+  return (
+    <div className="page">
+      <PageHeader
+        title="MikroTik Tools"
+        icon={<IconRoute size={24} />}
+        meta={`Текущий сервер: ${currentServerLabel}`}
+      />
+
+      {/* Сервер, шлюз, быстрые цели — один компактный блок */}
+      <div className="card mb-2">
+        <div className="card-header py-2">
+          <div className="row align-items-center g-2">
+            <div className="col">
+              <h3 className="card-title mb-0">Сервер и шлюз</h3>
+              <p className="text-muted small mb-0 mt-0">
+                {jumphostServers.length} серверов · {serverId ? 'шлюз опционален' : 'выберите сервер'}
+              </p>
+            </div>
+            <div className="col-auto">
+              <div className="input-icon input-icon-sm">
+                <input
+                  type="text"
+                  className="form-control form-control-sm"
+                  placeholder="Поиск серверов..."
+                  value={serverSearch}
+                  onChange={(e) => setServerSearch(e.target.value)}
+                />
+                <span className="input-icon-addon">
+                  <IconSearch size={14} className="text-muted" />
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="card-body py-2">
+          {isInitialLoading ? (
+            <TableSkeleton rows={2} columns={2} />
+          ) : jumphostServers.length === 0 ? (
+            <div className="text-muted small">
+              Нет серверов типа <code>jumphost</code>. Добавьте их в разделе «Серверы», чтобы использовать инструменты MikroTik.
+            </div>
+          ) : visibleJumphostServers.length === 0 ? (
+            <div className="text-muted small">
+              По вашему запросу серверы не найдены. Попробуйте изменить фильтр поиска.
+            </div>
+          ) : (
+            <div className="row row-cards g-1">
+              {visibleJumphostServers.map((s) => {
+                const id = s.id;
+                const isActive = id === serverId;
+                const flag = s.country ? countryToFlag(s.country) : '';
+                const line = [s.dns, s.ip].filter(Boolean).join(' · ');
+                return (
+                  <div className="col-12 col-sm-6 col-md-4 col-lg-3" key={id}>
+                    <div
+                      className={`card card-sm h-100 cursor-pointer ${
+                        isActive ? 'border-primary card-hover' : 'card-hover'
+                      }`}
+                      onClick={() => setServerId(id)}
+                    >
+                      <div className="card-body py-2 px-2 d-flex align-items-center gap-2">
+                        <span className="avatar avatar-sm bg-primary-lt" title={s.country || ''}>
+                          {flag || s.ip?.slice(0, 2) || '?'}
+                        </span>
+                        <div className="flex-grow-1 min-w-0">
+                          <div className="fw-semibold text-truncate small" title={s.dns || s.ip || id}>
+                            {s.dns || s.ip || id}
+                          </div>
+                          <div className="text-muted small text-truncate" title={line}>
+                            {line || [s.country, s.provider].filter(Boolean).join(' · ') || '—'}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          <div className="d-flex flex-wrap align-items-center gap-2 mt-2">
+            <span className="badge bg-primary-lt text-primary">Сервер: {currentServerLabel}</span>
+            {serverId && (
+              <span className="badge bg-azure-lt text-azure">
+                Шлюз: {gatewayRef || gatewayMeta?.ip || '—'}
+              </span>
+            )}
+          </div>
+
+          {/* Шлюз — только при выбранном сервере */}
+          {serverId && (
+            <>
+              <hr className="my-2" />
+              <div className="d-flex align-items-center gap-2 mb-1">
+                <span className="fw-semibold small">Шлюз</span>
+                {gatewaysForServer.length === 0 && (
+                  <span className="text-muted small">нет настроенных</span>
+                )}
+              </div>
+              {loading && !networkConfig ? (
+                <div className="text-muted small">Загрузка сетевых настроек…</div>
+              ) : (
+                <>
+                  {gatewaysForServer.length > 0 && (
+                    <div className="row row-cards g-1 mb-2">
+                      {gatewaysForServer.map((g) => {
+                        const isSelected = gatewayRef === g.ip || gatewayRef === g.id;
+                        const flag = g.country ? countryToFlag(g.country) : '';
+                        return (
+                          <div className="col-12 col-sm-6 col-md-4 col-lg-3" key={g.id || g.ip}>
+                            <div
+                              className={`card card-sm h-100 cursor-pointer ${
+                                isSelected ? 'border-primary card-hover' : 'card-hover'
+                              }`}
+                              onClick={() => {
+                                const next = isSelected ? '' : (g.ip || g.id);
+                                setGatewayRef(next);
+                                if (!next) setGatewayMeta(null);
+                                else {
+                                  setGatewayMeta({ ip: g.ip, gateway: g });
+                                  if (!target && g.ip) setTarget(g.ip);
+                                }
+                              }}
+                            >
+                              <div className="card-body py-2 px-2 d-flex align-items-center gap-2">
+                                <span className="avatar avatar-sm bg-primary-lt" title={g.country || ''}>
+                                  {flag || (g.ip ? g.ip.slice(0, 2) : '?')}
+                                </span>
+                                <div className="flex-grow-1 min-w-0">
+                                  <div className="fw-semibold text-truncate small" title={g.ip || ''}>
+                                    {g.ip || '—'}
+                                  </div>
+                                  <div className="text-muted small text-truncate">
+                                    {g.description || [g.country, g.provider].filter(Boolean).join(' · ') || '—'}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </>
+              )}
+
+              {/* Цели — карточки в стиле сервера/gateway */}
+              <div className="row row-cards g-1 mt-2">
+                {POPULAR_TARGETS.map(({ id: tid, name, target: tgt, Icon, color }) => {
+                  const isSelected = target === tgt;
+                  const bgClass = color === 'red' ? 'bg-red-lt' : color === 'blue' ? 'bg-blue-lt' : 'bg-orange-lt';
+                  const textClass = color === 'red' ? 'text-red' : color === 'blue' ? 'text-blue' : 'text-orange';
+                  return (
+                    <div className="col-12 col-sm-6 col-md-4" key={tid}>
+                      <div
+                        className={`card card-sm h-100 cursor-pointer ${isSelected ? 'border-primary card-hover' : 'card-hover'}`}
+                        onClick={() => setTarget(tgt)}
+                        title={tgt}
+                      >
+                        <div className="card-body py-2 px-2 d-flex align-items-center gap-2">
+                          <span className={`avatar avatar-sm ${bgClass} ${textClass}`}>
+                            <Icon size={20} stroke={1.5} />
+                          </span>
+                          <div className="flex-grow-1 min-w-0">
+                            <div className="fw-semibold text-truncate small">{name}</div>
+                            <div className="text-muted small text-truncate">{tgt}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Режим и действия — под выбором цели, стандартный размер Tabler */}
+              <div className="d-flex flex-wrap align-items-center gap-2 mt-3 pt-2 border-top">
+                <ul className="nav nav-pills mb-0" role="tablist">
+                  <li className="nav-item">
+                    <button
+                      type="button"
+                      className={`nav-link ${
+                        mode === 'traceroute' ? 'active' : ''
+                      }`}
+                      onClick={() => {
+                        setMode('traceroute');
+                        setHops([]);
+                        setAnalysis([]);
+                        setPingResult(null);
+                      }}
+                      role="tab"
+                    >
+                      Traceroute
+                    </button>
+                  </li>
+                  <li className="nav-item">
+                    <button
+                      type="button"
+                      className={`nav-link ${
+                        mode === 'ping' ? 'active' : ''
+                      }`}
+                      onClick={() => {
+                        setMode('ping');
+                        setHops([]);
+                        setAnalysis([]);
+                        setPingResult(null);
+                      }}
+                      role="tab"
+                    >
+                      Ping
+                    </button>
+                  </li>
+                </ul>
+                <div className="btn-list">
+                  <button type="button" className="btn btn-outline-secondary" onClick={handleReset} disabled={running}>
+                    <IconRefresh size={16} className="me-1" />
+                    Сбросить
+                  </button>
+                  <button type="button" className="btn btn-primary" onClick={handleRunCheck} disabled={running || loading}>
+                    {running ? 'Выполнение…' : (mode === 'traceroute' ? 'Запустить трассировку' : 'Запустить ping')}
+                  </button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Параметры + результаты */}
+      <div className="row g-2">
+        <div className="col-md-4">
+          <div className="card mb-2">
+            <div className="card-header py-2">
+              <h3 className="card-title mb-0">Параметры</h3>
+            </div>
+            <div className="card-body py-2">
+              {loading && !networkConfig ? (
+                <div className="text-muted small">Загрузка…</div>
+              ) : !serverId ? (
+                <div className="text-muted small">Выберите сервер выше.</div>
+              ) : (
+                <div className="row g-2">
+                  <div className="col-12">
+                    <label className="form-label small mb-0">Домен или IP</label>
+                    <div className="input-group input-group-flat input-group-sm">
+                      <span className="input-group-text"><IconWorld size={14} className="text-muted" /></span>
+                      <input
+                        type="text"
+                        className="form-control"
+                        placeholder="example.com или 8.8.8.8"
+                        value={target}
+                        onChange={(e) => setTarget(e.target.value)}
+                      />
+                      {gatewayMeta?.ip && (
+                        <button type="button" className="btn btn-outline-secondary btn-sm" onClick={() => setTarget(gatewayMeta.ip)}>
+                          IP gateway
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                  {mode === 'traceroute' && (
+                    <div className="col-6 col-md-5">
+                      <label className="form-label small mb-0">Макс. хопов</label>
+                      <input type="number" className="form-control form-control-sm" min={1} max={64} value={maxHops} onChange={(e) => setMaxHops(e.target.value)} />
+                    </div>
+                  )}
+                  <div className="col-12">
+                    <div className="form-check form-switch form-check-inline">
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        id="useDnsToggle"
+                        checked={useDns}
+                        onChange={(e) => setUseDns(e.target.checked)}
+                      />
+                      <label
+                        className="form-check-label small"
+                        htmlFor="useDnsToggle"
+                      >
+                        {useDns ? 'DNS+IP' : 'Только IP'}
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="col-md-8">
+          {mode === 'ping' && (
+            <div className="card mb-2">
+              <div className="card-header py-2">
+                <h3 className="card-title mb-0">Результаты ping</h3>
+              </div>
+              <div className="card-body p-0">
+                {!pingResult ? (
+                  <div className="p-3 text-muted small">
+                    Результаты ping появятся здесь после запуска проверки.
+                  </div>
+                ) : (
+                  <div className="table-responsive">
+                    <table className="table table-vcenter card-table mb-0">
+                      <thead>
+                        <tr>
+                          <th>Цель</th>
+                          <th style={{ width: 130 }}>Среднее, мс</th>
+                          <th style={{ width: 140 }}>Мин / Макс, мс</th>
+                          <th style={{ width: 110 }}>Потери</th>
+                          <th style={{ width: 200 }}>Оценка</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {(() => {
+                          const avg = typeof pingResult.avgMs === 'number' ? pingResult.avgMs : null;
+                          const loss = typeof pingResult.loss === 'number' ? pingResult.loss : null;
+
+                          let severity = 'ok';
+                          if (loss != null && loss >= 50) severity = 'danger';
+                          else if ((loss != null && loss > 0) || (avg != null && avg > 200)) severity = 'warn';
+
+                          const rowClass =
+                            severity === 'danger'
+                              ? 'table-danger'
+                              : severity === 'warn'
+                              ? 'table-warning'
+                              : '';
+
+                          return (
+                            <tr className={rowClass}>
+                              <td>
+                                <div className="d-flex flex-column">
+                                  <span className="fw-semibold">
+                                    {pingResult.target || target || '—'}
+                                  </span>
+                                  {gatewayMeta?.ip && (
+                                    <span className="text-muted small">
+                                      через gateway {gatewayMeta.ip}
+                                    </span>
+                                  )}
+                                </div>
+                              </td>
+                              <td>
+                                {avg != null ? (
+                                  <span
+                                    className={
+                                      avg > 200
+                                        ? 'text-danger fw-semibold'
+                                        : avg > 120
+                                        ? 'text-warning fw-semibold'
+                                        : ''
+                                    }
+                                  >
+                                    {avg.toFixed(1)}
+                                  </span>
+                                ) : (
+                                  '—'
+                                )}
+                              </td>
+                              <td>
+                                {pingResult.minMs != null ? pingResult.minMs.toFixed(1) : '—'} /{' '}
+                                {pingResult.maxMs != null ? pingResult.maxMs.toFixed(1) : '—'}
+                              </td>
+                              <td>
+                                {loss != null ? (
+                                  <span
+                                    className={
+                                      loss >= 50
+                                        ? 'badge bg-red-lt text-red'
+                                        : loss > 0
+                                        ? 'badge bg-yellow-lt text-yellow'
+                                        : 'badge bg-green-lt text-green'
+                                    }
+                                  >
+                                    {loss}%
+                                  </span>
+                                ) : (
+                                  '—'
+                                )}
+                              </td>
+                              <td>
+                                {severity === 'danger' && (
+                                  <span className="badge bg-red-lt text-red me-1">Плохое качество</span>
+                                )}
+                                {severity === 'warn' && (
+                                  <span className="badge bg-yellow-lt text-yellow me-1">
+                                    Возможные проблемы
+                                  </span>
+                                )}
+                                <span className="text-muted small">
+                                  {loss === 0
+                                    ? 'Все пакеты доставлены'
+                                    : loss != null
+                                    ? `Потеряно пакетов: ${loss}%`
+                                    : 'Нет данных о потере пакетов'}
+                                </span>
+                              </td>
+                            </tr>
+                          );
+                        })()}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {mode === 'traceroute' && (
+          <div className="card mb-2">
+            <div className="card-header py-2">
+              <ul className="nav nav-tabs card-header-tabs" role="tablist">
+                <li className="nav-item" role="presentation">
+                  <button
+                    type="button"
+                    className={`nav-link ${tracerouteTab === 'table' ? 'active' : ''}`}
+                    onClick={() => setTracerouteTab('table')}
+                    role="tab"
+                  >
+                    Результаты
+                  </button>
+                </li>
+                <li className="nav-item" role="presentation">
+                  <button
+                    type="button"
+                    className={`nav-link ${tracerouteTab === 'analysis' ? 'active' : ''}`}
+                    onClick={() => setTracerouteTab('analysis')}
+                    role="tab"
+                  >
+                    Расшифровка
+                  </button>
+                </li>
+              </ul>
+            </div>
+            {tracerouteTab === 'table' ? (
+              <div className="card-body p-0">
+                {hops.length === 0 ? (
+                  <div className="p-3 text-muted small">
+                    Результаты трассировки появятся здесь после запуска проверки.
+                  </div>
+                ) : (
+                  <div className="table-responsive">
+                    <table className="table table-vcenter card-table table-hover mb-0">
+                      <thead>
+                        <tr>
+                          <th style={{ width: 70 }}>Хоп</th>
+                          <th>Адрес / узел</th>
+                          <th style={{ width: 130 }}>Среднее, мс</th>
+                          <th style={{ width: 140 }}>Мин / Макс, мс</th>
+                          <th style={{ width: 110 }}>Потери</th>
+                          <th style={{ width: 200 }}>Статус</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {hops.map((h) => {
+                          const ip = h.ip || '';
+                          const dns = h.dns || '';
+
+                          let mainLabel;
+                          if (useDns) {
+                            if (dns && ip) mainLabel = `${dns} (${ip})`;
+                            else mainLabel = dns || ip || h.host || '—';
+                          } else {
+                            mainLabel = ip || dns || h.host || '—';
+                          }
+
+                          const avg = typeof h.avgMs === 'number' ? h.avgMs : null;
+                          const loss = typeof h.loss === 'number' ? h.loss : null;
+                          const statusRaw = (h.status || '').toString();
+                          const statusLower = statusRaw.toLowerCase();
+                          const hasTimeout =
+                            statusLower.includes('timeout') ||
+                            statusLower.includes('no reply') ||
+                            statusLower.includes('unreachable');
+
+                          let severity = 'ok';
+                          if (hasTimeout || (loss != null && loss >= 50)) {
+                            severity = 'danger';
+                          } else if ((loss != null && loss > 0) || (avg != null && avg > 200)) {
+                            severity = 'warn';
+                          }
+
+                          const rowClass =
+                            severity === 'danger'
+                              ? 'table-danger'
+                              : severity === 'warn'
+                              ? 'table-warning'
+                              : '';
+
+                          return (
+                            <tr key={h.hop || `${ip || h.host}-${Math.random()}`} className={rowClass}>
+                              <td>
+                                <span className="badge bg-blue-lt text-blue">
+                                  {h.hop}
+                                </span>
+                              </td>
+                              <td>
+                                <div className="d-flex flex-column">
+                                  <span className="fw-semibold text-truncate" title={mainLabel}>
+                                    {mainLabel}
+                                  </span>
+                                  {ip && dns && (
+                                    <span className="text-muted small text-truncate" title={ip}>
+                                      IP: {ip}
+                                    </span>
+                                  )}
+                                </div>
+                              </td>
+                              <td>
+                                {avg != null ? (
+                                  <span
+                                    className={
+                                      avg > 200
+                                        ? 'text-danger fw-semibold'
+                                        : avg > 120
+                                        ? 'text-warning fw-semibold'
+                                        : ''
+                                    }
+                                  >
+                                    {avg.toFixed(1)}
+                                  </span>
+                                ) : (
+                                  '—'
+                                )}
+                              </td>
+                              <td>
+                                {h.bestMs != null ? h.bestMs.toFixed(1) : '—'} /{' '}
+                                {h.worstMs != null ? h.worstMs.toFixed(1) : '—'}
+                              </td>
+                              <td>
+                                {loss != null ? (
+                                  <span
+                                    className={
+                                      loss >= 50
+                                        ? 'badge bg-red-lt text-red'
+                                        : loss > 0
+                                        ? 'badge bg-yellow-lt text-yellow'
+                                        : 'badge bg-green-lt text-green'
+                                    }
+                                  >
+                                    {loss}%
+                                  </span>
+                                ) : (
+                                  '—'
+                                )}
+                              </td>
+                              <td>
+                                {severity === 'danger' && (
+                                  <span className="badge bg-red-lt text-red me-1">Проблемный хоп</span>
+                                )}
+                                {severity === 'warn' && (
+                                  <span className="badge bg-yellow-lt text-yellow me-1">Возможная проблема</span>
+                                )}
+                                <span className="text-muted small">
+                                  {statusRaw || (loss != null || avg != null ? 'OK' : '—')}
+                                </span>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="card-body">
+                {analysis.length === 0 ? (
+                  <div className="text-muted small">
+                    После выполнения трассировки здесь появится человекочитаемое описание пути и возможных проблем.
+                  </div>
+                ) : (
+                  <ul className="list-unstyled mb-0">
+                    {analysis.map((line, idx) => (
+                      <li key={idx} className="mb-1">
+                        {line}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            )}
+          </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function buildTracerouteAnalysis(hops, networkConfig, servers, target) {
+  if (!Array.isArray(hops) || hops.length === 0) return [];
+  const lines = [];
+  const gateways = (networkConfig?.gateways && Array.isArray(networkConfig.gateways)) ? networkConfig.gateways : [];
+  const ifaces = (networkConfig?.tunnelInterfaces && Array.isArray(networkConfig.tunnelInterfaces)) ? networkConfig.tunnelInterfaces : [];
+
+  const findServerLabel = (serverId) => {
+    if (!serverId) return null;
+    const s = (servers || []).find((srv) => srv.id === serverId || srv.ip === serverId || srv.dns === serverId);
+    if (!s) return serverId;
+    return s.dns || s.ip || serverId;
+  };
+
+  const targetStr = String(target || '').trim();
+  lines.push(`Цель трассировки: ${targetStr || 'не указана'}. Хопов в маршруте: ${hops.length}.`);
+
+  let firstTimeoutHop = null;
+  let worstLatencyHop = null;
+
+  hops.forEach((hop, index) => {
+    const ip = hop.ip || hop.host || hop.address || '';
+    const dns = hop.dns || null;
+    const hostDisplay = dns ? `${dns}${ip ? ` (${ip})` : ''}` : (ip || hop.host || '');
+    const avg = hop.avgMs;
+    const loss = hop.loss;
+
+    let descr = `Хоп ${hop.hop || index + 1}: ${hostDisplay || 'неизвестный узел'}`;
+    const details = [];
+
+    if (avg != null) details.push(`среднее время ≈ ${avg.toFixed(1)} мс`);
+    if (hop.bestMs != null && hop.worstMs != null) {
+      details.push(`мин/макс ${hop.bestMs.toFixed(1)}/${hop.worstMs.toFixed(1)} мс`);
+    }
+    if (loss != null) details.push(`потеря пакетов ${loss}%`);
+
+    // Привязка к gateway (по IP)
+    const gw = gateways.find((g) => g.ip && g.ip === ip);
+    if (gw) {
+      const srvLabel = findServerLabel(gw.serverId);
+      details.push(`gateway "${gw.description || gw.ip}" на сервере ${srvLabel || gw.serverId}`);
+    }
+
+    // Привязка к туннельному интерфейсу (по IP)
+    const iface = ifaces.find((i) => i.localIp === ip || i.remoteIp === ip);
+    if (iface) {
+      const s1 = findServerLabel(iface.serverId);
+      const s2 = findServerLabel(iface.serverId2);
+      details.push(
+        `туннель ${iface.type || ''} ${iface.name || ''} (${iface.localIp} ⇄ ${iface.remoteIp})` +
+          (s1 || s2 ? ` между ${s1 || 'сервером 1'} и ${s2 || 'сервером 2'}` : '')
+      );
+    }
+
+    // Статус/таймауты
+    if (hop.status) {
+      const st = String(hop.status).toLowerCase();
+      if (st.includes('timeout') || st.includes('no reply') || st.includes('unreachable')) {
+        details.push('узел не отвечает на ICMP (возможная фильтрация или недоступность)');
+        if (!firstTimeoutHop) firstTimeoutHop = hop;
+      }
+    }
+
+    if (details.length > 0) {
+      descr += ` — ${details.join('; ')}`;
+    }
+
+    lines.push(descr);
+
+    if (avg != null) {
+      if (!worstLatencyHop || avg > (worstLatencyHop.avgMs || 0)) {
+        worstLatencyHop = hop;
+      }
+    }
+  });
+
+  if (worstLatencyHop && worstLatencyHop.avgMs != null && worstLatencyHop.avgMs > 150) {
+    lines.push(
+      `Максимальная средняя задержка на хопе ${worstLatencyHop.hop}: около ${worstLatencyHop.avgMs.toFixed(
+        1
+      )} мс — возможен "узкое место" или удалённый сегмент сети.`
+    );
+  }
+
+  if (firstTimeoutHop) {
+    lines.push(
+      `Начиная с хопа ${firstTimeoutHop.hop} (${firstTimeoutHop.dns ? `${firstTimeoutHop.dns}${firstTimeoutHop.ip ? ` (${firstTimeoutHop.ip})` : ''}` : (firstTimeoutHop.ip || firstTimeoutHop.host || 'неизвестный узел')}) наблюдаются таймауты — цель может быть недоступна или где-то по пути фильтруется ICMP.`
+    );
+  } else {
+    lines.push('Таймаутов или явной потери пакетов по пути не обнаружено (по данным MikroTik).');
+  }
+
+  return lines;
+}
+
+export default MikrotikTools;
+

frontend/src/NetworkConfigManager.jsx

@@ -4,6 +4,7 @@ import { useNotify } from './components/NotifyProvider.jsx';
 import FormModal from './components/FormModal.jsx';
 import FormField from './components/FormField.jsx';
 import ConfirmModal from './components/ConfirmModal.jsx';
+import PageHeader from './components/PageHeader.jsx';
 import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
 import GatewayAutocompleteInput from './components/GatewayAutocompleteInput.jsx';
 import Tooltip from './components/Tooltip.jsx';
@@ -3231,19 +3232,11 @@ function NetworkConfigManager() {
 
   return (
     <div className="network-config-manager">
-      {/* Page Header */}
+      <PageHeader
-      <div className="page-header d-print-none mb-4">
+        title="Сетевые настройки"
-        <div className="row align-items-center">
+        icon={<IconNetwork size={24} />}
-          <div className="col">
+        actions={
-            <div className="page-pretitle">Управление</div>
-            <h2 className="page-title d-flex align-items-center">
-              <IconNetwork className="me-2" size={28} />
-              Сетевые настройки
-            </h2>
-          </div>
-          <div className="col-auto ms-auto d-print-none">
           <div className="btn-list">
-              {/* Tabs as button group */}
             <div className="btn-group me-2" role="group">
               <button
                 className={`btn ${activeTab === 'gateways' ? 'btn-primary' : 'btn-outline-primary'}`}
@@ -3291,7 +3284,6 @@ function NetworkConfigManager() {
                 )}
               </button>
             </div>
-
             <button
               type="button"
               className="btn btn-outline-secondary"
@@ -3323,9 +3315,8 @@ function NetworkConfigManager() {
               Сохранить
             </button>
           </div>
-          </div>
+        }
-        </div>
+      />
-      </div>
 
       {/* Toolbar */}
       <div className="card mb-3">

frontend/src/NetworkMapDashboard.jsx

@@ -0,0 +1,434 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import api from './lib/api.js';
+import { IconRefresh, IconTopologyRing, IconClock } from '@tabler/icons-react';
+import PageHeader from './components/PageHeader.jsx';
+import NetworkMapUnifi from './NetworkMapUnifi.jsx';
+
+/** Параллельно выполняем промисы с лимитом одновременных */
+async function runWithLimit(tasks, limit = 4) {
+  const results = [];
+  let index = 0;
+  async function runNext() {
+    const i = index++;
+    if (i >= tasks.length) return;
+    const task = tasks[i];
+    try {
+      const value = await task();
+      results[i] = { value };
+    } catch (err) {
+      results[i] = { error: err };
+    }
+    await runNext();
+  }
+  const workers = Array.from({ length: Math.min(limit, tasks.length) }, () => runNext());
+  await Promise.all(workers);
+  return results;
+}
+
+/**
+ * Выполняет задачи так, что на каждый ключ (ноду) в один момент времени
+ * выполняется не более одной задачи. Разные ноды — параллельно.
+ * getKey(i) возвращает ключ для задачи с индексом i.
+ */
+async function runWithOnePerKey(tasks, getKey) {
+  const n = tasks.length;
+  const keyToIndices = new Map();
+  for (let i = 0; i < n; i++) {
+    const k = String(getKey(i));
+    if (!keyToIndices.has(k)) keyToIndices.set(k, []);
+    keyToIndices.get(k).push(i);
+  }
+  const results = [];
+  for (let i = 0; i < n; i++) results[i] = null;
+
+  const keys = Array.from(keyToIndices.keys());
+  let round = 0;
+  while (true) {
+    const batch = [];
+    for (const k of keys) {
+      const indices = keyToIndices.get(k);
+      if (round < indices.length) batch.push(indices[round]);
+    }
+    if (batch.length === 0) break;
+    await Promise.all(
+      batch.map(async (i) => {
+        try {
+          const value = await tasks[i]();
+          results[i] = { value };
+        } catch (err) {
+          results[i] = { error: err };
+        }
+      })
+    );
+    round++;
+  }
+  return results;
+}
+
+export default function NetworkMapDashboard() {
+  const [servers, setServers] = useState([]);
+  const [connections, setConnections] = useState([]);
+  const [pingMap, setPingMap] = useState({});
+  const [speedMap, setSpeedMap] = useState({});
+  const [pingStaleMap, setPingStaleMap] = useState({});
+  const [speedStaleMap, setSpeedStaleMap] = useState({});
+  const pingTimestampsRef = useRef({});
+  const lastSuccessfulPingRef = useRef({});
+  const lastSuccessfulSpeedRef = useRef({});
+  const [pingCacheSeconds, setPingCacheSeconds] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [pingLoading, setPingLoading] = useState(false);
+  const [speedLoading, setSpeedLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const pingAbortRef = useRef(false);
+  const speedAbortRef = useRef(false);
+  /** Время применения кеша от планировщика (чтобы не запускать пинг/скорость повторно при открытии) */
+  const cacheAppliedAtRef = useRef(null);
+
+  /** Связи строятся из интерфейсов раздела «Сетевые настройки» (/network-config), tunnelInterfaces */
+  const fetchData = useCallback(async (abortSignal) => {
+    setLoading(true);
+    setError(null);
+    cacheAppliedAtRef.current = null;
+    const opts = abortSignal ? { signal: abortSignal } : {};
+    try {
+      const [serversRes, configRes, uiSettingsRes, cacheRes] = await Promise.all([
+        api.get('/servers', opts),
+        api.get('/network-config', opts).catch(() => ({ data: null })),
+        api.get('/ui-settings', opts).catch(() => ({ data: {} })),
+        api.get('/network-map-cache', opts).catch(() => ({ data: {} })),
+      ]);
+      const serversList = Array.isArray(serversRes?.data) ? serversRes.data : [];
+      const config = configRes?.data || {};
+      const tunnelInterfaces = Array.isArray(config.tunnelInterfaces) ? config.tunnelInterfaces : [];
+      const uiSettings = uiSettingsRes?.data || {};
+      const cache = cacheRes?.data || {};
+      const ttlSeconds = Math.max(
+        0,
+        parseInt(uiSettings.networkMapPingCacheSeconds, 10) || 0
+      );
+      setPingCacheSeconds(ttlSeconds);
+
+      const getServer = (serverId) =>
+        serversList.find((s) => s.id === serverId || s.ip === serverId || s.dns === serverId);
+
+      const connList = [];
+      tunnelInterfaces.forEach((iface) => {
+        if (!iface.serverId || !iface.serverId2) return;
+        const s1 = getServer(iface.serverId);
+        const s2 = getServer(iface.serverId2);
+        if (!s1 || !s2 || s1.ip === s2.ip) return;
+        const s1Key = s1.id || s1.dns || s1.ip;
+        const s2Key = s2.id || s2.dns || s2.ip;
+        if (!s1Key || !s2Key) return;
+        const isJumphost1 = s1 && ['jumphost', 'home'].includes(String(s1.type || '').toLowerCase());
+        const isJumphost2 = s2 && ['jumphost', 'home'].includes(String(s2.type || '').toLowerCase());
+        connList.push({
+          from: s1.ip,
+          to: s2.ip,
+          tunnelType: iface.type || 'GRE',
+          interfaceName: iface.name || null,
+          fromKey: s1Key,
+          toKey: s2Key,
+          internalFromTo: iface.remoteIp || null,
+          internalToFrom: iface.localIp || null,
+          speedTestServerId: isJumphost1 ? s1Key : isJumphost2 ? s2Key : null,
+        });
+      });
+
+      setServers(serversList);
+      setConnections(connList);
+
+      const cacheMaxAgeMs = Math.max((ttlSeconds || 60) * 1000, 60 * 1000);
+      const cachedPingMap = cache.pingMap && typeof cache.pingMap === 'object' ? cache.pingMap : {};
+      const cachedSpeedMap = cache.speedMap && typeof cache.speedMap === 'object' ? cache.speedMap : {};
+      const hasCacheData = Object.keys(cachedPingMap).length > 0 || Object.keys(cachedSpeedMap).length > 0;
+      const cacheValid =
+        cache.updatedAt &&
+        Date.now() - cache.updatedAt < cacheMaxAgeMs &&
+        hasCacheData;
+
+      if (hasCacheData) {
+        // Всегда показываем кеш, если он есть — чтобы на карте отображались хотя бы прошлые пинг/скорость
+        setPingMap(cachedPingMap);
+        setSpeedMap(cachedSpeedMap);
+        Object.keys(cachedPingMap).forEach((k) => {
+          if (typeof cachedPingMap[k] === 'number') {
+            lastSuccessfulPingRef.current[k] = cachedPingMap[k];
+          }
+          pingTimestampsRef.current[k] = cache.updatedAt;
+        });
+        Object.keys(cachedSpeedMap).forEach((k) => {
+          if (cachedSpeedMap[k] && typeof cachedSpeedMap[k] === 'object') {
+            lastSuccessfulSpeedRef.current[k] = cachedSpeedMap[k];
+          }
+        });
+        cacheAppliedAtRef.current = cache.updatedAt;
+        // Устаревший кеш (старше TTL) помечаем как stale, но данные всё равно отображаем
+        if (cacheValid) {
+          setPingStaleMap({});
+          setSpeedStaleMap({});
+        } else {
+          const stalePing = {};
+          const staleSpeed = {};
+          Object.keys(cachedPingMap).forEach((k) => { stalePing[k] = true; });
+          Object.keys(cachedSpeedMap).forEach((k) => { staleSpeed[k] = true; });
+          setPingStaleMap(stalePing);
+          setSpeedStaleMap(staleSpeed);
+        }
+      } else {
+        setSpeedMap({});
+        setPingStaleMap({});
+        setSpeedStaleMap({});
+      }
+    } catch (e) {
+      if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      console.error('NetworkMap fetch:', e);
+      setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить данные');
+      setServers([]);
+      setConnections([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /** Один ключ пинга на ребро (маршруты статичны — одна сторона) */
+  const edgePingKey = (a, b) => [String(a), String(b)].sort().join(':');
+
+  const requestPings = useCallback(async () => {
+    if (connections.length === 0) return;
+    pingAbortRef.current = false;
+    setPingLoading(true);
+    const ttlMs = Math.max(0, (pingCacheSeconds || 0) * 1000);
+
+    const tasks = [];
+    connections.forEach((c) => {
+      const from = String(c.from);
+      const to = String(c.to);
+      if (!from || !to || from === to) return;
+      const srcFrom = servers.find((s) => s.ip === from);
+      const srcTo = servers.find((s) => s.ip === to);
+      const canPingFrom =
+        srcFrom && ['jumphost', 'home'].includes(String(srcFrom.type || '').toLowerCase()) && c.internalFromTo;
+      const canPingTo =
+        srcTo && ['jumphost', 'home'].includes(String(srcTo.type || '').toLowerCase()) && c.internalToFrom;
+
+      const ekey = edgePingKey(from, to);
+      if (ttlMs > 0 && pingTimestampsRef.current[ekey] && Date.now() - pingTimestampsRef.current[ekey] < ttlMs) {
+        return;
+      }
+
+      // Один пинг на ребро — с той стороны, где есть jumphost
+      if (canPingFrom) {
+        tasks.push(async () => {
+          if (pingAbortRef.current) return;
+          try {
+            const { data } = await api.post('/mikrotik/ping', {
+              serverId: c.fromKey,
+              target: c.internalFromTo,
+              gatewayIp: c.internalFromTo,
+              count: 3,
+            });
+            const ms = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
+            if (ms != null) {
+              pingTimestampsRef.current[ekey] = Date.now();
+              lastSuccessfulPingRef.current[ekey] = ms;
+              setPingMap((prev) => ({ ...prev, [ekey]: ms }));
+              setPingStaleMap((prev) => ({ ...prev, [ekey]: false }));
+            }
+          } catch {
+            pingTimestampsRef.current[ekey] = Date.now();
+            // При ошибке сохраняем последнее успешное значение с пометкой устаревшего
+            const lastSuccess = lastSuccessfulPingRef.current[ekey];
+            if (lastSuccess != null) {
+              setPingMap((prev) => ({ ...prev, [ekey]: lastSuccess }));
+              setPingStaleMap((prev) => ({ ...prev, [ekey]: true }));
+            } else {
+              setPingMap((prev) => ({ ...prev, [ekey]: null }));
+              setPingStaleMap((prev) => ({ ...prev, [ekey]: false }));
+            }
+          }
+        });
+      } else if (canPingTo) {
+        tasks.push(async () => {
+          if (pingAbortRef.current) return;
+          try {
+            const { data } = await api.post('/mikrotik/ping', {
+              serverId: c.toKey,
+              target: c.internalToFrom,
+              gatewayIp: c.internalToFrom,
+              count: 3,
+            });
+            const ms = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
+            if (ms != null) {
+              pingTimestampsRef.current[ekey] = Date.now();
+              lastSuccessfulPingRef.current[ekey] = ms;
+              setPingMap((prev) => ({ ...prev, [ekey]: ms }));
+              setPingStaleMap((prev) => ({ ...prev, [ekey]: false }));
+            }
+          } catch {
+            pingTimestampsRef.current[ekey] = Date.now();
+            // При ошибке сохраняем последнее успешное значение с пометкой устаревшего
+            const lastSuccess = lastSuccessfulPingRef.current[ekey];
+            if (lastSuccess != null) {
+              setPingMap((prev) => ({ ...prev, [ekey]: lastSuccess }));
+              setPingStaleMap((prev) => ({ ...prev, [ekey]: true }));
+            } else {
+              setPingMap((prev) => ({ ...prev, [ekey]: null }));
+              setPingStaleMap((prev) => ({ ...prev, [ekey]: false }));
+            }
+          }
+        });
+      }
+    });
+
+    await runWithLimit(tasks, 4);
+    if (pingAbortRef.current) return;
+    setPingLoading(false);
+  }, [connections, servers, pingCacheSeconds]);
+
+  /** Ключ скорости по паре серверов (без учёта порядка) */
+  const speedKey = (key1, key2) =>
+    [String(key1), String(key2)].sort().join(':');
+
+  const requestSpeeds = useCallback(async () => {
+    const withSpeed = connections.filter(
+      (c) => c.speedTestServerId && c.interfaceName
+    );
+    if (withSpeed.length === 0) return;
+    speedAbortRef.current = false;
+    setSpeedLoading(true);
+    const tasks = withSpeed.map((c) => async () => {
+      if (speedAbortRef.current) return;
+      const key = speedKey(c.fromKey, c.toKey);
+      try {
+        const { data } = await api.post(
+          '/mikrotik/speed-test',
+          {
+            serverId: c.speedTestServerId,
+            interfaceName: c.interfaceName,
+          },
+          { timeout: 120000 }
+        );
+        if (data?.ok && (data.tcpDownloadBps != null || data.tcpUploadBps != null)) {
+          const speedData = {
+            tcpDownloadBps: data.tcpDownloadBps,
+            tcpUploadBps: data.tcpUploadBps,
+            cached: data.cached === true,
+            durationSeconds: data.durationSeconds,
+          };
+          lastSuccessfulSpeedRef.current[key] = speedData;
+          setSpeedMap((prev) => ({ ...prev, [key]: speedData }));
+          setSpeedStaleMap((prev) => ({ ...prev, [key]: false }));
+        }
+      } catch {
+        // При ошибке сохраняем последнее успешное значение с пометкой устаревшего
+        const lastSuccess = lastSuccessfulSpeedRef.current[key];
+        if (lastSuccess != null) {
+          setSpeedMap((prev) => ({ ...prev, [key]: lastSuccess }));
+          setSpeedStaleMap((prev) => ({ ...prev, [key]: true }));
+        } else {
+          setSpeedMap((prev) => ({ ...prev, [key]: null }));
+          setSpeedStaleMap((prev) => ({ ...prev, [key]: false }));
+        }
+      }
+    });
+    // В один момент — только один тест на один сервер назначения (удалённый конец туннеля),
+    // иначе несколько замеров к одному хостингу делят канал и дают заниженные результаты
+    await runWithOnePerKey(tasks, (i) => {
+      const c = withSpeed[i];
+      return c.speedTestServerId === c.fromKey ? c.toKey : c.fromKey;
+    });
+    if (speedAbortRef.current) return;
+    setSpeedLoading(false);
+  }, [connections]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetchData(controller.signal);
+    return () => controller.abort();
+  }, [fetchData]);
+
+  // Пинг и скорость не запускаются автоматически при открытии карты (даже если кеш просрочен).
+  // Обновление только по кнопкам «Пинг» и «Скорость» или по планировщику.
+
+  const handleRefreshPings = () => {
+    requestPings();
+  };
+
+  const handleRefreshSpeeds = () => {
+    requestSpeeds();
+  };
+
+  if (loading) {
+    return (
+      <div>
+        <PageHeader
+          title="Карта сети"
+          icon={<IconTopologyRing size={24} />}
+          meta="Серверы и пинг между ними"
+        />
+        <div className="text-center py-5 text-muted">Загрузка серверов и связей…</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div>
+        <PageHeader
+          title="Карта сети"
+          icon={<IconTopologyRing size={24} />}
+          meta="Серверы и пинг между ними"
+        />
+        <div className="alert alert-danger">{error}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="Карта сети"
+        icon={<IconTopologyRing size={24} />}
+        meta="Связи из раздела «Сетевые настройки» → Интерфейсы; на рёбрах — пинг и скорость"
+        actions={
+          <div className="btn-list">
+            <button
+              type="button"
+              className="btn btn-outline-primary"
+              onClick={handleRefreshPings}
+              disabled={pingLoading}
+            >
+              <IconRefresh className={pingLoading ? 'spin me-2' : 'me-2'} size={18} />
+              {pingLoading ? 'Пинг…' : 'Пинг'}
+            </button>
+            <button
+              type="button"
+              className="btn btn-outline-primary"
+              onClick={handleRefreshSpeeds}
+              disabled={speedLoading}
+            >
+              <IconRefresh className={speedLoading ? 'spin me-2' : 'me-2'} size={18} />
+              {speedLoading ? 'Скорость…' : 'Скорость'}
+            </button>
+          </div>
+        }
+      />
+      {servers.length === 0 ? (
+        <div className="alert alert-info">
+          Нет серверов. Добавьте серверы в разделе «Серверы».
+        </div>
+      ) : (
+        <NetworkMapUnifi
+          servers={servers}
+          connections={connections}
+          pingMap={pingMap}
+          speedMap={speedMap}
+          pingStaleMap={pingStaleMap}
+          speedStaleMap={speedStaleMap}
+        />
+      )}
+    </div>
+  );
+}

frontend/src/NetworkMapSchedulerPage.jsx

@@ -0,0 +1,325 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import api from './lib/api.js';
+import PageHeader from './components/PageHeader.jsx';
+import {
+  IconClockPlay,
+  IconSettings,
+  IconTerminal2,
+  IconPlayerPlay,
+  IconRefresh,
+} from '@tabler/icons-react';
+
+const POLL_LOGS_MS = 2500;
+const INTERVAL_MIN = 1;
+const INTERVAL_MAX = 1440;
+const LOG_LINES_MIN = 100;
+const LOG_LINES_MAX = 2000;
+
+export default function NetworkMapSchedulerPage() {
+  const [settings, setSettings] = useState({
+    enabled: false,
+    intervalMinutes: 5,
+    runPing: true,
+    runSpeedTest: true,
+    logMaxLines: 500,
+  });
+  const [nextRunAt, setNextRunAt] = useState(null);
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState(null);
+  const logEndRef = useRef(null);
+  const logContainerRef = useRef(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const fetchSettings = useCallback(async (abortSignal) => {
+    try {
+      const opts = abortSignal ? { signal: abortSignal } : {};
+      const { data } = await api.get('/scheduler/network-map/settings', opts);
+      setSettings({
+        enabled: Boolean(data.enabled),
+        intervalMinutes: Math.max(INTERVAL_MIN, Math.min(INTERVAL_MAX, Number(data.intervalMinutes) || 5)),
+        runPing: data.runPing !== false,
+        runSpeedTest: data.runSpeedTest !== false,
+        logMaxLines: Math.max(LOG_LINES_MIN, Math.min(LOG_LINES_MAX, Number(data.logMaxLines) || 500)),
+      });
+      setNextRunAt(typeof data.nextRunAt === 'number' ? data.nextRunAt : null);
+    } catch (e) {
+      if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить настройки');
+    }
+  }, []);
+
+  const fetchLogs = useCallback(async () => {
+    try {
+      const { data } = await api.get('/scheduler/network-map/logs');
+      setLogs(Array.isArray(data?.lines) ? data.lines : []);
+    } catch (_) {
+      // не показываем ошибку при опросе логов
+    }
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    (async () => {
+      setLoading(true);
+      await fetchSettings(controller.signal);
+      setLoading(false);
+    })();
+    return () => controller.abort();
+  }, [fetchSettings]);
+
+  useEffect(() => {
+    fetchLogs();
+    const t = setInterval(fetchLogs, POLL_LOGS_MS);
+    return () => clearInterval(t);
+  }, [fetchLogs]);
+
+  useEffect(() => {
+    if (!settings.enabled || !nextRunAt) return;
+    const t = setInterval(fetchSettings, 60 * 1000);
+    return () => clearInterval(t);
+  }, [settings.enabled, nextRunAt, fetchSettings]);
+
+  useEffect(() => {
+    if (autoScroll && logEndRef.current) {
+      logEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [logs, autoScroll]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      await api.patch('/scheduler/network-map/settings', {
+        networkMapSchedulerEnabled: settings.enabled,
+        networkMapSchedulerIntervalMinutes: settings.intervalMinutes,
+        networkMapSchedulerRunPing: settings.runPing,
+        networkMapSchedulerRunSpeedTest: settings.runSpeedTest,
+        networkMapSchedulerLogMaxLines: settings.logMaxLines,
+      });
+      await fetchSettings();
+    } catch (e) {
+      setError(e?.response?.data?.message || e?.message || 'Не удалось сохранить');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleRunNow = async () => {
+    setRunning(true);
+    setError(null);
+    try {
+      await api.post('/scheduler/network-map/run-now');
+      setTimeout(fetchLogs, 500);
+    } catch (e) {
+      setError(e?.response?.data?.message || e?.message || 'Не удалось запустить');
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div>
+        <PageHeader
+          title="Планировщик карты сети"
+          icon={<IconClockPlay size={24} />}
+          meta="Пинг и замер скорости между серверами по расписанию"
+        />
+        <div className="text-center py-5 text-muted">Загрузка настроек…</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="Планировщик карты сети"
+        icon={<IconClockPlay size={24} />}
+        meta="Пинг и замер скорости между серверами по расписанию; кеш ускоряет загрузку карты сети."
+        actions={
+          <div className="btn-list">
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={handleRunNow}
+              disabled={running}
+            >
+              <IconPlayerPlay className={running ? 'spin me-2' : 'me-2'} size={18} />
+              {running ? 'Запуск…' : 'Запустить сейчас'}
+            </button>
+          </div>
+        }
+      />
+
+      {error && (
+        <div className="alert alert-danger alert-dismissible fade show mb-3" role="alert">
+          {error}
+          <button type="button" className="btn-close" aria-label="Закрыть" onClick={() => setError(null)} />
+        </div>
+      )}
+
+      <div className="row row-deck row-cards g-3">
+        <div className="col-12 col-lg-5">
+          <div className="card">
+            <div className="card-header">
+              <h3 className="card-title d-flex align-items-center">
+                <IconSettings className="me-2" size={20} />
+                Настройки
+              </h3>
+              <div className="card-actions">
+                <button
+                  type="button"
+                  className="btn btn-primary btn-sm"
+                  onClick={handleSave}
+                  disabled={saving}
+                >
+                  {saving ? 'Сохранение…' : 'Сохранить'}
+                </button>
+              </div>
+            </div>
+            <div className="card-body">
+              <div className="mb-3">
+                <label className="form-check form-switch">
+                  <input
+                    className="form-check-input"
+                    type="checkbox"
+                    checked={settings.enabled}
+                    onChange={(e) => setSettings((s) => ({ ...s, enabled: e.target.checked }))}
+                  />
+                  <span className="form-check-label">Включить планировщик</span>
+                </label>
+                <div className="form-hint">Периодически обновлять пинг и скорость по связям из «Сетевые настройки»</div>
+                {settings.enabled && nextRunAt != null && (
+                  <div className="mt-2 text-muted small">
+                    Следующий запуск: {new Date(nextRunAt).toLocaleString('ru-RU', { dateStyle: 'short', timeStyle: 'medium' })}
+                  </div>
+                )}
+              </div>
+
+              <div className="mb-3">
+                <label className="form-label">Интервал (минут)</label>
+                <input
+                  type="number"
+                  className="form-control"
+                  min={INTERVAL_MIN}
+                  max={INTERVAL_MAX}
+                  value={settings.intervalMinutes}
+                  onChange={(e) =>
+                    setSettings((s) => ({
+                      ...s,
+                      intervalMinutes: Math.max(INTERVAL_MIN, Math.min(INTERVAL_MAX, parseInt(e.target.value, 10) || INTERVAL_MIN)),
+                    }))
+                  }
+                />
+                <div className="form-hint">От 1 до 1440 (сутки). По умолчанию 5 мин.</div>
+              </div>
+
+              <div className="mb-3">
+                <label className="form-label">Задачи</label>
+                <div>
+                  <label className="form-check form-switch me-3">
+                    <input
+                      className="form-check-input"
+                      type="checkbox"
+                      checked={settings.runPing}
+                      onChange={(e) => setSettings((s) => ({ ...s, runPing: e.target.checked }))}
+                    />
+                    <span className="form-check-label">Пинг</span>
+                  </label>
+                  <label className="form-check form-switch">
+                    <input
+                      className="form-check-input"
+                      type="checkbox"
+                      checked={settings.runSpeedTest}
+                      onChange={(e) => setSettings((s) => ({ ...s, runSpeedTest: e.target.checked }))}
+                    />
+                    <span className="form-check-label">Замер скорости</span>
+                  </label>
+                </div>
+              </div>
+
+              <div className="mb-0">
+                <label className="form-label">Строк в логе</label>
+                <input
+                  type="number"
+                  className="form-control"
+                  min={LOG_LINES_MIN}
+                  max={LOG_LINES_MAX}
+                  value={settings.logMaxLines}
+                  onChange={(e) =>
+                    setSettings((s) => ({
+                      ...s,
+                      logMaxLines: Math.max(LOG_LINES_MIN, Math.min(LOG_LINES_MAX, parseInt(e.target.value, 10) || 500)),
+                    }))
+                  }
+                />
+                <div className="form-hint">Кольцевой буфер: от 100 до 2000 строк.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-12 col-lg-7">
+          <div className="card flex-fill">
+            <div className="card-header d-flex align-items-center">
+              <h3 className="card-title d-flex align-items-center mb-0">
+                <IconTerminal2 className="me-2" size={20} />
+                Логи
+              </h3>
+              <div className="card-actions ms-auto">
+                <label className="form-check form-switch form-check-inline mb-0 me-2">
+                  <input
+                    className="form-check-input"
+                    type="checkbox"
+                    checked={autoScroll}
+                    onChange={(e) => setAutoScroll(e.target.checked)}
+                  />
+                  <span className="form-check-label small">Автопрокрутка</span>
+                </label>
+                <button
+                  type="button"
+                  className="btn btn-outline-secondary btn-sm"
+                  onClick={fetchLogs}
+                  aria-label="Обновить логи"
+                >
+                  <IconRefresh size={16} />
+                </button>
+              </div>
+            </div>
+            <div
+              ref={logContainerRef}
+              className="card-body p-0"
+              style={{ minHeight: 320 }}
+            >
+              <pre
+                className="mb-0 p-3 bg-dark text-light rounded-0 rounded-bottom"
+                style={{
+                  fontSize: 12,
+                  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+                  maxHeight: 420,
+                  overflow: 'auto',
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                }}
+              >
+                {logs.length === 0 ? (
+                  <span className="text-muted">Логов пока нет. Включите планировщик и нажмите «Запустить сейчас» или дождитесь следующего запуска.</span>
+                ) : (
+                  logs.map((line, i) => (
+                    <span key={i} style={{ display: 'block' }}>
+                      {line}
+                    </span>
+                  ))
+                )}
+                <span ref={logEndRef} />
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/NetworkMapUnifi.jsx

@@ -0,0 +1,692 @@
+import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
+import { IconRefresh, IconMaximize, IconMinimize, IconClock } from '@tabler/icons-react';
+
+const FLAG_CDN = 'https://flagcdn.com';
+
+const UNIFI_BG = '#0f172a';
+const UNIFI_CARD_BG = '#1e293b';
+const UNIFI_CARD_BORDER = '#334155';
+const UNIFI_GREEN = '#22c55e';
+const UNIFI_TEXT = '#f1f5f9';
+const UNIFI_TEXT_MUTED = '#94a3b8';
+const NODE_WIDTH = 88;
+const NODE_HEIGHT = 52;
+const STORAGE_KEY = 'network-map-unifi-positions';
+
+function computeInitialLayout(servers, size) {
+  const positions = {};
+  if (!servers.length) return positions;
+
+  // Группируем: сначала home, затем jumphost, затем exit, затем остальные
+  const homes = servers.filter((s) => String(s.type || '').toLowerCase() === 'home');
+  const jumphosts = servers.filter((s) => String(s.type || '').toLowerCase() === 'jumphost');
+  const exits = servers.filter((s) => String(s.type || '').toLowerCase() === 'exit');
+  const others = servers.filter((s) => {
+    const t = String(s.type || '').toLowerCase();
+    return t !== 'home' && t !== 'jumphost' && t !== 'exit';
+  });
+
+  const columns = [homes, jumphosts, exits, others].filter((col) => col.length > 0);
+  const colCount = columns.length || 1;
+  const paddingX = 80;
+  const usableWidth = Math.max(200, size.w - paddingX * 2);
+  const colStep = usableWidth / Math.max(1, colCount - 1);
+  const baseX = paddingX;
+
+  columns.forEach((col, colIdx) => {
+    // В пределах колонки сортируем по dns/ip для стабильности
+    const sorted = [...col].sort((a, b) => {
+      const la = (a.dns || a.ip || '').toString();
+      const lb = (b.dns || b.ip || '').toString();
+      return la.localeCompare(lb);
+    });
+    const n = sorted.length;
+    const x = baseX + colStep * colIdx;
+    const topPadding = 60;
+    const bottomPadding = 60;
+    const usableHeight = Math.max(120, size.h - topPadding - bottomPadding);
+    sorted.forEach((s, i) => {
+      const t = n > 1 ? i / (n - 1) : 0.5;
+      const y = topPadding + usableHeight * t;
+      positions[String(s.ip)] = { x, y };
+    });
+  });
+
+  return positions;
+}
+
+/**
+ * Карта сети в стиле UNIFI: тёмный фон, простые иконки узлов, зелёные линии, пинг на рёбрах.
+ * Узлы можно перетаскивать; раскладка сохраняется в localStorage. Круг — только начальная раскладка.
+ */
+function formatMbps(bps) {
+  if (bps == null || Number.isNaN(bps)) return '—';
+  const mbps = bps / 1_000_000;
+  if (!Number.isFinite(mbps)) return '—';
+  return `${mbps.toFixed(1)} Мбит/с`;
+}
+
+/** Короткий формат скорости для подписи на ребре: "↓287 ↑170 Мбит/с" */
+function formatSpeedShort(downloadBps, uploadBps) {
+  const fmt = (v) => {
+    if (v == null || Number.isNaN(v)) return '—';
+    const mbps = v / 1_000_000;
+    if (!Number.isFinite(mbps)) return '—';
+    return mbps >= 10 ? Math.round(mbps) : mbps.toFixed(1);
+  };
+  const down = fmt(downloadBps);
+  const up = fmt(uploadBps);
+  if (down === '—' && up === '—') return null;
+  if (down === '—') return `↑${up} Мбит/с`;
+  if (up === '—') return `↓${down} Мбит/с`;
+  return `↓${down} ↑${up} Мбит/с`;
+}
+
+function speedKey(key1, key2) {
+  return [String(key1), String(key2)].sort().join(':');
+}
+
+export default function NetworkMapUnifi({ servers = [], connections = [], pingMap = {}, speedMap = {}, pingStaleMap = {}, speedStaleMap = {} }) {
+  const containerRef = useRef(null);
+  const svgRef = useRef(null);
+  const [size, setSize] = useState({ w: 800, h: 520 });
+  const [positions, setPositions] = useState({});
+  const [drag, setDrag] = useState(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [hoveredEdgeKey, setHoveredEdgeKey] = useState(null);
+  const [selectedEdge, setSelectedEdge] = useState(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const { width, height } = entries[0]?.contentRect ?? {};
+      if (width > 0 && height > 0) setSize({ w: width, h: height });
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // Трек полноэкранного режима
+  useEffect(() => {
+    const handler = () => {
+      const fs = Boolean(document.fullscreenElement);
+      setIsFullscreen(fs);
+    };
+    document.addEventListener('fullscreenchange', handler);
+    return () => document.removeEventListener('fullscreenchange', handler);
+  }, []);
+
+  // Инициализация позиций: из localStorage или по кругу
+  useEffect(() => {
+    if (servers.length === 0) {
+      setPositions({});
+      return;
+    }
+    let saved = {};
+    try {
+      const raw = window.localStorage.getItem(STORAGE_KEY);
+      if (raw) saved = JSON.parse(raw) || {};
+    } catch {}
+    const initial = computeInitialLayout(servers, size);
+    const merged = {};
+    servers.forEach((s, i) => {
+      const ip = String(s.ip);
+      if (saved[ip] && typeof saved[ip].x === 'number' && typeof saved[ip].y === 'number') {
+        merged[ip] = { x: saved[ip].x, y: saved[ip].y };
+      } else {
+        merged[ip] = initial[ip] ?? { x: size.w / 2, y: size.h / 2 };
+      }
+    });
+    setPositions(merged);
+  }, [servers.length, size.w, size.h]);
+
+  const savePositions = useCallback((next) => {
+    setPositions(next);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    } catch {}
+  }, []);
+
+  const getSvgCoords = useCallback((clientX, clientY) => {
+    const svg = svgRef.current;
+    if (!svg) return null;
+    const pt = svg.createSVGPoint();
+    pt.x = clientX;
+    pt.y = clientY;
+    const p = pt.matrixTransform(svg.getScreenCTM().inverse());
+    return { x: p.x, y: p.y };
+  }, []);
+
+  useEffect(() => {
+    if (!drag) return;
+    const onMove = (e) => {
+      const p = getSvgCoords(e.clientX, e.clientY);
+      if (!p) return;
+      setPositions((prev) => {
+        const pos = prev[drag.nodeId];
+        if (!pos) return prev;
+        const next = { ...prev, [drag.nodeId]: { x: drag.startX + (p.x - drag.mouseX), y: drag.startY + (p.y - drag.mouseY) } };
+        try {
+          window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+        } catch {}
+        return next;
+      });
+    };
+    const onUp = () => setDrag(null);
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [drag, getSvgCoords]);
+
+  const resetLayout = useCallback(() => {
+    const initial = computeInitialLayout(servers, size);
+    setPositions(initial);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(initial));
+    } catch {}
+  }, [servers, size]);
+
+  const onNodeMouseDown = useCallback(
+    (e, ip) => {
+      e.preventDefault();
+      const p = getSvgCoords(e.clientX, e.clientY);
+      const pos = positions[ip];
+      if (!p || !pos) return;
+      setDrag({ nodeId: ip, startX: pos.x, startY: pos.y, mouseX: p.x, mouseY: p.y });
+    },
+    [getSvgCoords, positions]
+  );
+
+  const edgePingKey = (a, b) => [String(a), String(b)].sort().join(':');
+
+  const edgesWithPing = useMemo(() => {
+    return (connections || []).map((c) => {
+      const from = String(c.from);
+      const to = String(c.to);
+      const p1 = positions[from];
+      const p2 = positions[to];
+      const ekey = edgePingKey(from, to);
+      const ms = pingMap[ekey];
+      const pingStale = pingStaleMap[ekey] === true;
+      const pingLabel = typeof ms === 'number' ? `${ms} ms` : null;
+      const sk = speedKey(c.fromKey, c.toKey);
+      const speed = speedMap[sk];
+      const speedStale = speedStaleMap[sk] === true;
+      const speedLabel =
+        speed && (speed.tcpDownloadBps != null || speed.tcpUploadBps != null)
+          ? formatSpeedShort(speed.tcpDownloadBps, speed.tcpUploadBps)
+          : null;
+      return {
+        edgeKey: `${from}-${to}-${c.tunnelType || ''}`,
+        from,
+        to,
+        p1,
+        p2,
+        pingLabel,
+        speedLabel,
+        pingStale,
+        speedStale,
+        speed,
+        tunnelType: c.tunnelType,
+        raw: c,
+      };
+    }).filter((e) => e.p1 && e.p2);
+  }, [connections, positions, pingMap, speedMap, pingStaleMap, speedStaleMap]);
+
+  // Вычисляем старт/финиш и одну контрольную точку:
+  // рёбра выходят из карточек под 90°, дальше сразу плавная дуга без прямых сегментов.
+  const computeCurvePoints = useCallback((e) => {
+    const { p1, p2 } = e;
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const adx = Math.abs(dx);
+    const ady = Math.abs(dy);
+
+    let sx = p1.x;
+    let sy = p1.y;
+    let ex = p2.x;
+    let ey = p2.y;
+
+    if (adx >= ady) {
+      const sign = dx >= 0 ? 1 : -1;
+      sx = p1.x + sign * (NODE_WIDTH / 2);
+      sy = p1.y;
+      ex = p2.x - sign * (NODE_WIDTH / 2);
+      ey = p2.y;
+    } else {
+      const sign = dy >= 0 ? 1 : -1;
+      sx = p1.x;
+      sy = p1.y + sign * (NODE_HEIGHT / 2);
+      ex = p2.x;
+      ey = p2.y - sign * (NODE_HEIGHT / 2);
+    }
+
+    const ddx = ex - sx;
+    const ddy = ey - sy;
+    const len = Math.hypot(ddx, ddy) || 1;
+
+    const mx = (sx + ex) / 2;
+    const my = (sy + ey) / 2;
+    const baseOffset = Math.min(40, len / 2);
+    const perpX = (-ddy / len) * baseOffset;
+    const perpY = (ddx / len) * baseOffset;
+    const cpx = mx + perpX;
+    const cpy = my + perpY;
+    const perpLen = Math.hypot(perpX, perpY) || 1;
+    const ux = perpX / perpLen;
+    const uy = perpY / perpLen;
+
+    return { sx, sy, ex, ey, cpx, cpy, mx, my, perpX: ux, perpY: uy };
+  }, []);
+
+  const pathD = useCallback((e) => {
+    const { sx, sy, ex, ey, cpx, cpy } = computeCurvePoints(e);
+    return `M ${sx} ${sy} Q ${cpx} ${cpy} ${ex} ${ey}`;
+  }, [computeCurvePoints]);
+
+  /** Точка для подписи: середина ребра + смещение по перпендикуляру (чтобы подпись была у ребра, а не уезжала) */
+  const labelPlacement = useCallback((e, level = 0) => {
+    const { mx, my, perpX, perpY } = computeCurvePoints(e);
+    const baseOffset = 18;
+    const stepOffset = 26;
+    const x = mx + perpX * (baseOffset + level * stepOffset);
+    const y = my + perpY * (baseOffset + level * stepOffset);
+    return { x, y };
+  }, [computeCurvePoints]);
+
+  if (servers.length === 0) return null;
+
+  return (
+    <div
+      ref={containerRef}
+      className="network-map-unifi"
+      style={{
+        width: '100%',
+        height: 520,
+        minHeight: 400,
+        background: UNIFI_BG,
+        borderRadius: 12,
+        overflow: 'hidden',
+        position: 'relative',
+        userSelect: 'none',
+      }}
+    >
+      <svg
+        ref={svgRef}
+        width="100%"
+        height="100%"
+        viewBox={`0 0 ${size.w} ${size.h}`}
+        preserveAspectRatio="xMidYMid meet"
+        style={{ display: 'block' }}
+      >
+        {/* Рёбра: зелёные кривые (стиль UNIFI — проводные соединения) */}
+        <g>
+          {(() => {
+            const used = [];
+            const LABEL_W = 100;
+            const LABEL_H = 18;
+            const LABEL_GAP = 6;
+            return edgesWithPing.map((e, idx) => {
+              const dimFactor =
+                hoveredEdgeKey && hoveredEdgeKey !== e.edgeKey ? 0.25 : 1;
+              const strokeWidth = hoveredEdgeKey === e.edgeKey ? 3.2 : 2.5;
+              return (
+            <g
+              key={e.edgeKey || `${e.from}-${e.to}-${idx}`}
+              onMouseEnter={() => setHoveredEdgeKey(e.edgeKey)}
+              onMouseLeave={() =>
+                setHoveredEdgeKey((prev) => (prev === e.edgeKey ? null : prev))
+              }
+              onClick={() => setSelectedEdge(e)}
+              style={{ cursor: 'pointer' }}
+            >
+              <path
+                d={pathD(e)}
+                fill="none"
+                stroke={UNIFI_GREEN}
+                strokeWidth={strokeWidth}
+                strokeLinecap="round"
+                opacity={dimFactor}
+              />
+              {(() => {
+                const labels = [
+                  e.pingLabel ? { text: e.pingLabel, stale: e.pingStale } : null,
+                  e.speedLabel ? { text: e.speedLabel, stale: e.speedStale } : null,
+                ].filter(Boolean);
+                if (labels.length === 0) return null;
+                const totalH = labels.length * LABEL_H + (labels.length - 1) * LABEL_GAP;
+                const minDist = 70;
+                let level = 0;
+                let x; let y;
+                while (level < 10) {
+                  const pos = labelPlacement(e, level);
+                  x = pos.x;
+                  y = pos.y;
+                  const overlaps = used.some(
+                    (p) => Math.hypot(p.x - x, p.y - y) < minDist
+                  );
+                  if (!overlaps) break;
+                  level += 1;
+                }
+                used.push({ x, y });
+
+                const pad = 8;
+                const staleColor = '#f59e0b';
+                return (
+                  <g>
+                    {labels.map((label, i) => {
+                      const yy = y + i * (LABEL_H + LABEL_GAP) + LABEL_H / 2;
+                      const isStale = label.stale === true;
+                      const textWidth = label.text.length * 6;
+                      const iconWidth = isStale ? 14 : 0;
+                      const w = Math.max(LABEL_W, Math.min(textWidth + pad * 2 + iconWidth, 180));
+                      const h = LABEL_H + 4;
+                      const textX = x - (iconWidth / 2);
+                      return (
+                        <g key={i}>
+                          <rect 
+                            x={x - w / 2} 
+                            y={yy - h / 2} 
+                            width={w} 
+                            height={h} 
+                            rx={4} 
+                            fill="rgba(15,23,42,0.92)" 
+                            stroke={isStale ? staleColor : UNIFI_GREEN} 
+                            strokeWidth={1}
+                            strokeDasharray={isStale ? '2,2' : 'none'}
+                          />
+                          {isStale && (
+                            <circle
+                              cx={x - w / 2 + 10}
+                              cy={yy}
+                              r={5}
+                              fill={staleColor}
+                              opacity={0.9}
+                            />
+                          )}
+                          <text
+                            x={textX}
+                            y={yy}
+                            textAnchor="middle"
+                            dominantBaseline="middle"
+                            fill={isStale ? staleColor : UNIFI_GREEN}
+                            fontSize={i === 0 ? 12 : 11}
+                            fontWeight={600}
+                          >
+                            {label.text}
+                          </text>
+                        </g>
+                      );
+                    })}
+                  </g>
+                );
+              })()}
+            </g>
+            );
+            });
+          })()}
+        </g>
+
+        {/* Узлы: карточки серверов в стиле UNIFI (перетаскиваемые) */}
+        {servers.map((s) => {
+          const pos = positions[String(s.ip)];
+          if (!pos) return null;
+          const label = s.dns?.split('.')[0] || s.ip || '?';
+          const isDragging = drag?.nodeId === s.ip;
+          return (
+            <g
+              key={s.ip}
+              transform={`translate(${pos.x - NODE_WIDTH / 2}, ${pos.y - NODE_HEIGHT / 2})`}
+              onMouseDown={(e) => onNodeMouseDown(e, s.ip)}
+              style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
+            >
+              <rect
+                width={NODE_WIDTH}
+                height={NODE_HEIGHT}
+                rx={8}
+                ry={8}
+                fill={UNIFI_CARD_BG}
+                stroke={UNIFI_CARD_BORDER}
+                strokeWidth={1}
+              />
+              <g transform={`translate(${NODE_WIDTH / 2}, ${NODE_HEIGHT / 2})`}>
+                {/* Флаг страны в левом верхнем углу карточки (картинка, т.к. эмодзи в SVG часто отображаются как буквы) */}
+                {s.country && (() => {
+                  const cc = String(s.country).trim().toLowerCase();
+                  if (cc.length !== 2) return null;
+                  const flagW = 22;
+                  const flagH = 16;
+                  return (
+                    <image
+                      href={`${FLAG_CDN}/w40/${cc}.png`}
+                      x={-NODE_WIDTH / 2 + 6}
+                      y={-NODE_HEIGHT / 2 + 6}
+                      width={flagW}
+                      height={flagH}
+                      preserveAspectRatio="xMidYMid meet"
+                      style={{ pointerEvents: 'none' }}
+                      className="network-map-node-flag"
+                    >
+                      <title>{s.country.toUpperCase()}</title>
+                    </image>
+                  );
+                })()}
+                {/* Иконка сервера в стиле UNIFI: прямоугольник с «портами» */}
+                <g transform="translate(-10, -16)">
+                  <rect x={2} y={0} width={16} height={12} rx={2} fill="none" stroke={UNIFI_GREEN} strokeWidth={1.5} />
+                  <line x1={5} y1={4} x2={15} y2={4} stroke={UNIFI_GREEN} strokeWidth={1} opacity={0.8} />
+                  <line x1={5} y1={8} x2={15} y2={8} stroke={UNIFI_GREEN} strokeWidth={1} opacity={0.8} />
+                </g>
+                <text
+                  x={0}
+                  y={8}
+                  textAnchor="middle"
+                  fill={UNIFI_TEXT}
+                  fontSize={12}
+                  fontWeight={600}
+                >
+                  {label.length > 12 ? label.slice(0, 11) + '…' : label}
+                </text>
+                <text
+                  x={0}
+                  y={22}
+                  textAnchor="middle"
+                  fill={UNIFI_TEXT_MUTED}
+                  fontSize={10}
+                >
+                  {s.ip}
+                </text>
+              </g>
+            </g>
+          );
+        })}
+      </svg>
+      {selectedEdge && (() => {
+        const fromServer = servers.find((s) => String(s.ip) === selectedEdge.from);
+        const toServer = servers.find((s) => String(s.ip) === selectedEdge.to);
+        const ekey = edgePingKey(selectedEdge.from, selectedEdge.to);
+        const pingMs = pingMap[ekey];
+        const pingStale = pingStaleMap[ekey] === true;
+        const sk = speedKey(selectedEdge.raw?.fromKey, selectedEdge.raw?.toKey);
+        const speed = speedMap[sk] ?? selectedEdge.speed;
+        const speedStale = speedStaleMap[sk] === true;
+        return (
+          <div
+            className="network-map-edge-modal-backdrop"
+            style={{
+              position: 'absolute',
+              inset: 0,
+              background: 'rgba(15,23,42,0.55)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              zIndex: 50,
+            }}
+            onClick={() => setSelectedEdge(null)}
+          >
+            <div
+              className="card shadow-lg"
+              style={{
+                minWidth: 360,
+                maxWidth: 520,
+                background: '#0f172a',
+                color: '#e5e7eb',
+                borderRadius: 12,
+                border: `1px solid ${UNIFI_CARD_BORDER}`,
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="card-header d-flex align-items-center justify-content-between">
+                <div className="fw-semibold">Детали соединения</div>
+                <button
+                  type="button"
+                  className="btn-close btn-close-white"
+                  aria-label="Закрыть"
+                  onClick={() => setSelectedEdge(null)}
+                  style={{ filter: 'invert(1)' }}
+                />
+              </div>
+              <div className="card-body" style={{ fontSize: 13 }}>
+                <div className="mb-2">
+                  <div className="text-muted text-uppercase mb-1" style={{ fontSize: 11 }}>
+                    От
+                  </div>
+                  <div>
+                    <strong>{fromServer?.dns || fromServer?.ip || selectedEdge.from}</strong>{' '}
+                    <span className="text-muted">({fromServer?.ip || '—'})</span>{' '}
+                    <span className="badge bg-blue-lt text-blue ms-1">
+                      {String(fromServer?.type || '').toUpperCase() || 'SERVER'}
+                    </span>
+                  </div>
+                </div>
+                <div className="mb-3">
+                  <div className="text-muted text-uppercase mb-1" style={{ fontSize: 11 }}>
+                    К
+                  </div>
+                  <div>
+                    <strong>{toServer?.dns || toServer?.ip || selectedEdge.to}</strong>{' '}
+                    <span className="text-muted">({toServer?.ip || '—'})</span>{' '}
+                    <span className="badge bg-blue-lt text-blue ms-1">
+                      {String(toServer?.type || '').toUpperCase() || 'SERVER'}
+                    </span>
+                  </div>
+                </div>
+                <div className="mb-3">
+                  <div className="text-muted text-uppercase mb-1" style={{ fontSize: 11 }}>
+                    Туннель
+                  </div>
+                  <div>
+                    <span className="badge bg-green-lt text-green me-2">
+                      {selectedEdge.tunnelType || 'TUNNEL'}
+                    </span>
+                    {selectedEdge.raw?.internalFromTo && (
+                      <span className="text-muted">
+                        {selectedEdge.raw.internalToFrom} ⇄ {selectedEdge.raw.internalFromTo}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="mb-3">
+                  <div className="text-muted text-uppercase mb-1 d-flex align-items-center" style={{ fontSize: 11 }}>
+                    Пинг
+                    {pingStale && (
+                      <span className="badge bg-warning text-dark ms-2" style={{ fontSize: 9 }}>
+                        <IconClock size={10} className="me-1" />
+                        Устаревшие данные
+                      </span>
+                    )}
+                  </div>
+                  <div>
+                    {typeof pingMs === 'number' ? `${pingMs} ms` : 'нет данных'}
+                  </div>
+                </div>
+                {speed && (speed.tcpDownloadBps != null || speed.tcpUploadBps != null) && (
+                  <div className="mb-1">
+                    <div className="text-muted text-uppercase mb-1 d-flex align-items-center" style={{ fontSize: 11 }}>
+                      Скорость по туннелю
+                      {speed.cached && (
+                        <span className="ms-1 badge bg-secondary" style={{ fontSize: 10 }}>кеш</span>
+                      )}
+                      {speedStale && (
+                        <span className="ms-1 badge bg-warning text-dark" style={{ fontSize: 9 }}>
+                          <IconClock size={10} className="me-1" />
+                          Устаревшие данные
+                        </span>
+                      )}
+                    </div>
+                    <div>
+                      <div>
+                        <span className="text-muted">↓ Download </span>
+                        {formatMbps(speed.tcpDownloadBps)}
+                      </div>
+                      <div>
+                        <span className="text-muted">↑ Upload </span>
+                        {formatMbps(speed.tcpUploadBps)}
+                      </div>
+                      {speed.durationSeconds != null && (
+                        <div className="text-muted small mt-1">
+                          Замер за {speed.durationSeconds} сек
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+      <div
+        style={{
+          position: 'absolute',
+          right: 12,
+          top: 12,
+          zIndex: 10,
+        }}
+      >
+        <div className="btn-group btn-group-sm">
+          <button
+            type="button"
+            className="btn"
+            onClick={resetLayout}
+            style={{
+              background: 'rgba(30,41,59,0.95)',
+              color: UNIFI_TEXT_MUTED,
+              border: `1px solid ${UNIFI_CARD_BORDER}`,
+            }}
+            title="Вернуть узлы в исходную раскладку"
+          >
+            <IconRefresh size={14} className="me-1" />
+            Сбросить
+          </button>
+          <button
+            type="button"
+            className="btn"
+            onClick={() => {
+              const el = containerRef.current;
+              if (!el) return;
+              if (!document.fullscreenElement) {
+                el.requestFullscreen?.();
+              } else {
+                document.exitFullscreen?.();
+              }
+            }}
+            style={{
+              background: 'rgba(30,41,59,0.95)',
+              color: UNIFI_TEXT_MUTED,
+              border: `1px solid ${UNIFI_CARD_BORDER}`,
+              borderLeft: 'none',
+            }}
+            title={isFullscreen ? 'Выйти из полноэкранного режима' : 'Открыть карту на весь экран'}
+          >
+            {isFullscreen ? <IconMinimize size={14} /> : <IconMaximize size={14} />}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/PingServicesManager.jsx

@@ -0,0 +1,415 @@
+import { useState, useEffect } from 'react';
+import api from './lib/api.js';
+import {
+  IconPlus,
+  IconEdit,
+  IconTrash,
+  IconDeviceFloppy,
+  IconCloud,
+  IconSearch,
+} from '@tabler/icons-react';
+import PageHeader from './components/PageHeader.jsx';
+import FormModal from './components/FormModal.jsx';
+import FormField from './components/FormField.jsx';
+import ConfirmModal from './components/ConfirmModal.jsx';
+import ErrorAlert from './components/ErrorAlert.jsx';
+import IconPicker from './components/IconPicker.jsx';
+import { getIconById } from './lib/brandIcons.js';
+
+const COLOR_OPTIONS = [
+  { value: 'primary', label: 'Основной' },
+  { value: 'blue', label: 'Синий' },
+  { value: 'green', label: 'Зелёный' },
+  { value: 'orange', label: 'Оранжевый' },
+  { value: 'red', label: 'Красный' },
+  { value: 'pink', label: 'Розовый' },
+  { value: 'purple', label: 'Фиолетовый' },
+  { value: 'cyan', label: 'Голубой' },
+  { value: 'yellow', label: 'Жёлтый' },
+];
+
+function slugId(name) {
+  const s = String(name || '').trim().toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
+  return s || `svc-${Date.now()}`;
+}
+
+export default function PingServicesManager() {
+  const [items, setItems] = useState([]);
+  const [rawSettings, setRawSettings] = useState({});
+  const [etag, setEtag] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  const [addModalOpen, setAddModalOpen] = useState(false);
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [itemToDelete, setItemToDelete] = useState(null);
+
+  const [newItem, setNewItem] = useState({
+    id: '',
+    name: '',
+    host: '',
+    port: '443',
+    icon: 'IconBrandGoogle',
+    color: 'blue',
+  });
+  const [editingItem, setEditingItem] = useState(null);
+  const [editDraft, setEditDraft] = useState({ id: '', name: '', host: '', port: '443', icon: 'IconBrandGoogle', color: 'blue' });
+
+  const loadSettings = async (abortSignal) => {
+    setLoading(true);
+    setError('');
+    const opts = abortSignal ? { signal: abortSignal } : {};
+    try {
+      const res = await api.get('/ui-settings', opts);
+      const data = res?.data || {};
+      setRawSettings(data);
+      setEtag(String(res?.headers?.etag || res?.headers?.ETag || ''));
+      const list = Array.isArray(data.pingServicesList) ? data.pingServicesList : [];
+      setItems(list.map((s) => ({
+        id: String(s?.id ?? '').trim() || slugId(s?.name),
+        name: String(s?.name ?? '').trim(),
+        host: String(s?.host ?? '').trim(),
+        port: Math.max(1, parseInt(s?.port, 10) || 443),
+        icon: typeof s?.icon === 'string' ? s.icon : 'IconWorld',
+        color: typeof s?.color === 'string' ? s.color : 'primary',
+      })).filter((s) => s.host));
+    } catch (e) {
+      if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      console.error(e);
+      setError('Не удалось загрузить настройки');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const controller = new AbortController();
+    loadSettings(controller.signal);
+    return () => controller.abort();
+  }, []);
+
+  const saveSettings = async () => {
+    setSaving(true);
+    setError('');
+    setSuccess('');
+    const payloadToSave = {
+      ...rawSettings,
+      pingServicesList: items.map((s) => ({
+        id: s.id,
+        name: s.name,
+        host: s.host,
+        port: s.port,
+        icon: s.icon,
+        color: s.color,
+      })),
+    };
+    try {
+      let currentEtag = etag;
+      let res = await api.post('/ui-settings', { settings: payloadToSave, etag: currentEtag });
+      setRawSettings(payloadToSave);
+      setEtag(String(res?.data?.etag || currentEtag));
+      setSuccess('Список сервисов сохранён');
+      setTimeout(() => setSuccess(''), 3000);
+    } catch (e) {
+      if (e?.response?.status === 412) {
+        try {
+          const fresh = await api.get('/ui-settings');
+          const freshData = fresh?.data || {};
+          const freshEtag = String(fresh?.headers?.etag || fresh?.headers?.ETag || '');
+          const retryPayload = { ...freshData, pingServicesList: payloadToSave.pingServicesList };
+          const retryRes = await api.post('/ui-settings', { settings: retryPayload, etag: freshEtag });
+          setRawSettings(retryPayload);
+          setEtag(String(retryRes?.data?.etag || freshEtag));
+          setSuccess('Список сервисов сохранён (настройки были обновлены)');
+          setTimeout(() => setSuccess(''), 3000);
+        } catch (retryErr) {
+          setError(retryErr?.response?.data?.message || 'Настройки изменились. Обновите страницу и сохраните снова.');
+        }
+      } else {
+        setError(e?.response?.data?.message || 'Не удалось сохранить');
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const openAdd = () => {
+    setNewItem({
+      id: '',
+      name: '',
+      host: '',
+      port: '443',
+      icon: 'IconBrandGoogle',
+      color: 'blue',
+    });
+    setAddModalOpen(true);
+  };
+
+  const submitAdd = () => {
+    const name = String(newItem.name || '').trim();
+    const host = String(newItem.host || '').trim();
+    if (!name) { setError('Укажите название'); return; }
+    if (!host) { setError('Укажите хост'); return; }
+    const id = newItem.id?.trim() || slugId(name);
+    if (items.some((i) => i.id === id)) { setError('Такой ID уже есть'); return; }
+    setError('');
+    setItems((prev) => [...prev, {
+      id,
+      name,
+      host,
+      port: Math.max(1, parseInt(newItem.port, 10) || 443),
+      icon: newItem.icon || 'IconWorld',
+      color: newItem.color || 'primary',
+    }]);
+    setAddModalOpen(false);
+    setSuccess('Сервис добавлен. Нажмите «Сохранить».');
+    setTimeout(() => setSuccess(''), 3000);
+  };
+
+  const openEdit = (item) => {
+    setEditingItem(item);
+    setEditDraft({
+      id: item.id,
+      name: item.name,
+      host: item.host,
+      port: String(item.port),
+      icon: item.icon || 'IconWorld',
+      color: item.color || 'primary',
+    });
+    setEditModalOpen(true);
+  };
+
+  const submitEdit = () => {
+    const name = String(editDraft.name || '').trim();
+    const host = String(editDraft.host || '').trim();
+    if (!name) { setError('Укажите название'); return; }
+    if (!host) { setError('Укажите хост'); return; }
+    const id = editDraft.id?.trim() || editingItem.id;
+    if (id !== editingItem.id && items.some((i) => i.id === id)) { setError('Такой ID уже есть'); return; }
+    setError('');
+    setItems((prev) => prev.map((i) => (i.id === editingItem.id ? {
+      id,
+      name,
+      host,
+      port: Math.max(1, parseInt(editDraft.port, 10) || 443),
+      icon: editDraft.icon || 'IconWorld',
+      color: editDraft.color || 'primary',
+    } : i)));
+    setEditModalOpen(false);
+    setEditingItem(null);
+    setSuccess('Сервис обновлён. Нажмите «Сохранить».');
+    setTimeout(() => setSuccess(''), 3000);
+  };
+
+  const openDelete = (item) => {
+    setItemToDelete(item);
+    setDeleteModalOpen(true);
+  };
+
+  const confirmDelete = () => {
+    if (itemToDelete) {
+      setItems((prev) => prev.filter((i) => i.id !== itemToDelete.id));
+      setDeleteModalOpen(false);
+      setItemToDelete(null);
+      setSuccess('Сервис удалён. Нажмите «Сохранить».');
+      setTimeout(() => setSuccess(''), 3000);
+    }
+  };
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const filtered = items.filter((i) => {
+    const q = searchTerm.trim().toLowerCase();
+    if (!q) return true;
+    return (i.name || '').toLowerCase().includes(q) || (i.host || '').toLowerCase().includes(q) || (i.id || '').toLowerCase().includes(q);
+  });
+
+  return (
+    <div>
+      <PageHeader
+        title="Пинг сервисов"
+        icon={<IconCloud size={24} />}
+        actions={(
+          <div className="btn-list">
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={openAdd}
+              disabled={loading}
+            >
+              <IconPlus size={18} className="me-1" />
+              Добавить
+            </button>
+            <button
+              type="button"
+              className="btn btn-outline-primary"
+              onClick={saveSettings}
+              disabled={saving || loading}
+            >
+              {saving && <span className="spinner-border spinner-border-sm me-2" />}
+              <IconDeviceFloppy size={18} className="me-1" />
+              Сохранить
+            </button>
+          </div>
+        )}
+      />
+
+      {error && <ErrorAlert message={error} onClose={() => setError('')} onRetry={loadSettings} />}
+      {success && (
+        <div className="alert alert-success alert-dismissible">
+          {success}
+          <button type="button" className="btn-close" onClick={() => setSuccess('')} aria-label="Закрыть" />
+        </div>
+      )}
+
+      <div className="card">
+        <div className="card-header d-flex align-items-center gap-2 flex-wrap">
+          <div className="input-group input-group-flat" style={{ maxWidth: 280 }}>
+            <span className="input-group-text">
+              <IconSearch size={16} />
+            </span>
+            <input
+              type="text"
+              className="form-control"
+              placeholder="Поиск по названию, хосту, ID..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+          <span className="text-muted small ms-2">
+            {filtered.length} из {items.length}
+          </span>
+        </div>
+        <div className="table-responsive">
+          <table className="table table-vcenter card-table table-striped">
+            <thead>
+              <tr>
+                <th style={{ width: 56 }}>Иконка</th>
+                <th>ID</th>
+                <th>Название</th>
+                <th>Хост</th>
+                <th>Порт</th>
+                <th>Цвет</th>
+                <th className="w-1">Действия</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr>
+                  <td colSpan={7} className="text-center py-4 text-muted">Загрузка...</td>
+                </tr>
+              ) : filtered.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="text-center py-4 text-muted">
+                    Нет сервисов. Нажмите «Добавить» или сохраните список — на главной будут использоваться сервисы по умолчанию.
+                  </td>
+                </tr>
+              ) : (
+                filtered.map((item) => {
+                  const iconInfo = getIconById(item.icon);
+                  return (
+                    <tr key={item.id}>
+                      <td>
+                        <span className={`avatar avatar-sm bg-${item.color}-lt text-${item.color} rounded d-inline-flex align-items-center justify-content-center`}>
+                          <iconInfo.Icon size={18} stroke={1.5} />
+                        </span>
+                      </td>
+                      <td><code className="small">{item.id}</code></td>
+                      <td>{item.name}</td>
+                      <td><code className="small">{item.host}</code></td>
+                      <td>{item.port}</td>
+                      <td>
+                        <span className={`badge bg-${item.color}-lt text-${item.color}`}>{item.color}</span>
+                      </td>
+                      <td>
+                        <div className="btn-list">
+                          <button
+                            type="button"
+                            className="btn btn-sm btn-outline-primary"
+                            onClick={() => openEdit(item)}
+                          >
+                            <IconEdit size={14} />
+                          </button>
+                          <button
+                            type="button"
+                            className="btn btn-sm btn-outline-danger"
+                            onClick={() => openDelete(item)}
+                          >
+                            <IconTrash size={14} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <FormModal
+        show={addModalOpen}
+        onClose={() => setAddModalOpen(false)}
+        onSubmit={submitAdd}
+        title="Добавить сервис для пинга"
+        submitLabel="Добавить"
+      >
+        <FormField label="Название" name="name" value={newItem.name} onChange={(v) => setNewItem((p) => ({ ...p, name: v }))} placeholder="Google" />
+        <FormField label="Хост (IP или домен)" name="host" value={newItem.host} onChange={(v) => setNewItem((p) => ({ ...p, host: v }))} placeholder="8.8.8.8" />
+        <FormField label="Порт" name="port" type="number" value={newItem.port} onChange={(v) => setNewItem((p) => ({ ...p, port: v }))} min={1} max={65535} />
+        <IconPicker value={newItem.icon} onChange={(id) => setNewItem((p) => ({ ...p, icon: id }))} />
+        <div className="mb-2">
+          <label className="form-label small">Цвет</label>
+          <select
+            className="form-select form-select-sm"
+            value={newItem.color}
+            onChange={(e) => setNewItem((p) => ({ ...p, color: e.target.value }))}
+          >
+            {COLOR_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>{o.label}</option>
+            ))}
+          </select>
+        </div>
+        <FormField label="ID (необязательно)" name="id" value={newItem.id} onChange={(v) => setNewItem((p) => ({ ...p, id: v }))} placeholder="auto из названия" helpText="Уникальный ключ. Пусто — из названия." />
+      </FormModal>
+
+      <FormModal
+        show={editModalOpen}
+        onClose={() => { setEditModalOpen(false); setEditingItem(null); }}
+        onSubmit={submitEdit}
+        title="Редактировать сервис"
+      >
+        <FormField label="ID" name="id" value={editDraft.id} onChange={(v) => setEditDraft((p) => ({ ...p, id: v }))} />
+        <FormField label="Название" name="name" value={editDraft.name} onChange={(v) => setEditDraft((p) => ({ ...p, name: v }))} />
+        <FormField label="Хост" name="host" value={editDraft.host} onChange={(v) => setEditDraft((p) => ({ ...p, host: v }))} />
+        <FormField label="Порт" name="port" type="number" value={editDraft.port} onChange={(v) => setEditDraft((p) => ({ ...p, port: v }))} min={1} max={65535} />
+        <IconPicker value={editDraft.icon} onChange={(id) => setEditDraft((p) => ({ ...p, icon: id }))} />
+        <div className="mb-2">
+          <label className="form-label small">Цвет</label>
+          <select
+            className="form-select form-select-sm"
+            value={editDraft.color}
+            onChange={(e) => setEditDraft((p) => ({ ...p, color: e.target.value }))}
+          >
+            {COLOR_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>{o.label}</option>
+            ))}
+          </select>
+        </div>
+      </FormModal>
+
+      <ConfirmModal
+        show={deleteModalOpen}
+        title="Удалить сервис?"
+        message={itemToDelete ? `Сервис «${itemToDelete.name}» (${itemToDelete.host}) будет удалён из списка.` : ''}
+        confirmLabel="Удалить"
+        variant="danger"
+        onConfirm={confirmDelete}
+        onClose={() => { setDeleteModalOpen(false); setItemToDelete(null); }}
+      />
+    </div>
+  );
+}

frontend/src/ResourceStatsPage.jsx

@@ -0,0 +1,241 @@
+import { useState, useEffect, useCallback } from 'react';
+import api from './lib/api.js';
+import {
+  IconServer,
+  IconRefresh,
+  IconChartBar,
+  IconAlertCircle,
+} from '@tabler/icons-react';
+import PageHeader from './components/PageHeader.jsx';
+
+function formatBytes(bytes) {
+  if (bytes == null || bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+/** Цвет прогресс-бара по проценту: зелёный / жёлтый / красный */
+function progressVariant(percent) {
+  if (percent == null) return 'secondary';
+  if (percent >= 90) return 'danger';
+  if (percent >= 70) return 'warning';
+  return 'success';
+}
+
+/** Один KPI-блок: заголовок, значение, прогресс-бар (как на референсной карточке) */
+function KpiBlock({ label, value, percent, variant }) {
+  const barVariant = variant || progressVariant(percent);
+  return (
+    <div className="mb-3">
+      <div className="text-uppercase small fw-semibold text-secondary mb-1">{label}</div>
+      <div className="d-flex align-items-baseline gap-2 flex-wrap">
+        <span className="h4 mb-0 fw-bold">{value}</span>
+        {percent != null && (
+          <span className={`small fw-medium text-${barVariant}`}>{percent}%</span>
+        )}
+      </div>
+      {percent != null && (
+        <div className="progress progress-sm mt-1" style={{ height: 6 }}>
+          <div
+            className={`progress-bar bg-${barVariant}`}
+            role="progressbar"
+            style={{ width: `${Math.min(100, percent)}%` }}
+            aria-valuenow={percent}
+            aria-valuemin={0}
+            aria-valuemax={100}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Карточка одного роутера: иконка перед названием, сводка, KPI (RAM, CPU, HDD) */
+function RouterResourceCard({ router }) {
+  const { name, host, error, resource } = router;
+  const hasResource = resource && !error;
+
+  return (
+    <div className="card rounded-3 shadow-sm border-0 overflow-hidden h-100">
+      <div className="card-body p-4">
+        <div className="d-flex align-items-center mb-3">
+          <span className="avatar avatar-lg bg-primary-lt text-primary rounded-3 me-3 flex-shrink-0">
+            <IconServer size={28} />
+          </span>
+          <div className="min-w-0">
+            <h3 className="h4 fw-bold mb-0 text-body text-truncate">
+              {name}
+            </h3>
+            <p className="text-secondary small mb-0 mt-1">
+              {host}
+              {resource?.version && (
+                <span className="ms-1"> · RouterOS {resource.version}</span>
+              )}
+            </p>
+          </div>
+        </div>
+        <div>
+          {error && (
+            <div className="alert alert-danger py-2 mb-3 d-flex align-items-center">
+              <IconAlertCircle size={20} className="me-2 flex-shrink-0" />
+              <span className="small">{error}</span>
+            </div>
+          )}
+
+          {hasResource && (
+            <div className="row g-3">
+              {/* RAM */}
+              <div className="col-12 col-md-4">
+                <KpiBlock
+                  label="RAM"
+                  value={
+                    resource.usedMemory != null && resource.totalMemory != null
+                      ? `${formatBytes(resource.usedMemory)} / ${formatBytes(resource.totalMemory)}`
+                      : '—'
+                  }
+                  percent={resource.memoryUsagePercent}
+                />
+              </div>
+              {/* CPU */}
+              <div className="col-12 col-md-4">
+                <KpiBlock
+                  label="CPU"
+                  value={
+                    resource.cpuLoad != null
+                      ? `${resource.cpuLoad}%`
+                      : '—'
+                  }
+                  percent={resource.cpuLoad}
+                />
+              </div>
+              {/* HDD */}
+              <div className="col-12 col-md-4">
+                <KpiBlock
+                  label="HDD"
+                  value={
+                    resource.usedHddSpace != null && resource.totalHddSpace != null
+                      ? `${formatBytes(resource.usedHddSpace)} / ${formatBytes(resource.totalHddSpace)}`
+                      : resource.totalHddSpace != null
+                        ? formatBytes(resource.totalHddSpace)
+                        : '—'
+                  }
+                  percent={resource.hddUsagePercent}
+                />
+              </div>
+            </div>
+          )}
+
+          {hasResource && (resource.boardName || resource.uptime) && (
+            <div className="mt-2 pt-2 border-top small text-muted">
+              {resource.boardName && <span>{resource.boardName}</span>}
+              {resource.uptime && (
+                <span className="ms-2"> · Uptime: {resource.uptime}</span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ResourceStatsPage() {
+  const [routers, setRouters] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchStats = useCallback(async (abortSignal) => {
+    setLoading(true);
+    setError(null);
+    const opts = abortSignal ? { signal: abortSignal } : {};
+    try {
+      const res = await api.get('/resources/stats', opts);
+      const data = res?.data;
+      setRouters(Array.isArray(data?.routers) ? data.routers : []);
+    } catch (e) {
+      if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить статистику');
+      // Не очищаем список — пользователь видит старые данные и сообщение об ошибке
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetchStats(controller.signal);
+    return () => controller.abort();
+  }, [fetchStats]);
+
+  return (
+    <div className="page-body">
+      <PageHeader
+        title="Статистика ресурсов"
+        pretitle="Роутеры"
+        icon={<IconChartBar size={28} />}
+        meta="Потребление RAM, CPU и HDD по каждому роутеру (MikroTik)"
+        actions={
+          <button
+            type="button"
+            className="btn btn-outline-primary"
+            onClick={() => fetchStats()}
+            disabled={loading}
+          >
+            <IconRefresh size={18} className={loading ? 'spin' : ''} />
+            <span className="ms-1">Обновить</span>
+          </button>
+        }
+      />
+
+      {error && (
+        <div className="alert alert-danger d-flex align-items-center">
+          <IconAlertCircle size={24} className="me-2" />
+          <span>{error}</span>
+        </div>
+      )}
+
+      {loading && routers.length === 0 ? (
+        <div className="row">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="col-12 col-lg-6 col-xl-4 mb-4">
+              <div className="card rounded-3 border-0 placeholder-glow">
+                <div className="card-body p-4">
+                  <div className="placeholder col-6 mb-2" />
+                  <div className="placeholder col-8 mb-3" />
+                  <div className="placeholder col-12" style={{ height: 60 }} />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : routers.length === 0 ? (
+        <div className="card rounded-3 border-0">
+          <div className="card-body text-center py-5 text-muted">
+            <IconServer size={48} className="mb-2 opacity-50" />
+            <p className="mb-0">Нет роутеров с настроенным MikroTik API (jumphost/home).</p>
+          </div>
+        </div>
+      ) : (
+        <div className="row">
+          {routers.map((router) => (
+            <div key={router.serverId || router.name} className="col-12 col-lg-6 col-xl-4 mb-4">
+              <RouterResourceCard router={router} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      <style>{`
+        .spin {
+          animation: spin 0.8s linear infinite;
+        }
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}

frontend/src/ServerManager.jsx

@@ -31,8 +31,11 @@ import {
   LinkGeneratorModal,
   ServerSidebar,
   ServerCard,
+  ServerGroupCard,
   ServerBulkActions
 } from './components/server/index.js';
+import PageHeader from './components/PageHeader.jsx';
+import PageHeaderActions from './components/PageHeaderActions.jsx';
 
 const API_URL = '/api';
 
@@ -52,12 +55,12 @@ function ServerManager() {
   // === Основные данные ===
   const [servers, setServers] = useState([]);
   const [connections, setConnections] = useState([]);
+  const [networkConfigGateways, setNetworkConfigGateways] = useState([]);
   const [loading, setLoading] = useState(false);
 
   // === UI State ===
   const [activeTab, setActiveTab] = useState('servers'); // 'servers' | 'connections'
   const [viewMode, setViewMode] = useState('cards'); // 'table' | 'cards'
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 
   // === Фильтры и поиск ===
   const [filters, setFilters] = useState({
@@ -124,9 +127,26 @@ function ServerManager() {
   };
 
   // === Загрузка данных ===
+  const fetchNetworkConfig = async (abortSignal) => {
+    const opts = abortSignal ? { signal: abortSignal } : {};
+    try {
+      const res = await api.get('/network-config', opts);
+      const config = res.data || {};
+      setNetworkConfigGateways(Array.isArray(config.gateways) ? config.gateways : []);
+    } catch (e) {
+      if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      console.warn('Network config not loaded:', e?.message || e);
+      setNetworkConfigGateways([]);
+    }
+  };
+
   useEffect(() => {
-    fetchServers();
+    const controller = new AbortController();
-    fetchConnections();
+    const signal = controller.signal;
+    fetchServers(signal);
+    fetchConnections(signal);
+    fetchNetworkConfig(signal);
+    return () => controller.abort();
   }, []);
 
   useEffect(() => {
@@ -141,10 +161,11 @@ function ServerManager() {
     }
   }, []);
 
-  const fetchServers = async () => {
+  const fetchServers = async (abortSignal) => {
     setLoading(true);
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
-      const response = await api.get(`/servers`);
+      const response = await api.get(`/servers`, opts);
       const normalized = (Array.isArray(response.data) ? response.data : []).map((srv) => ({
         ...srv,
         type: normalizeServerType(srv.type),
@@ -152,6 +173,7 @@ function ServerManager() {
       }));
       setServers(normalized);
     } catch (error) {
+      if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
       console.error('Error fetching servers:', error);
       notify.error('Не удалось загрузить серверы. Проверьте, запущен ли бэкенд.');
     } finally {
@@ -159,19 +181,47 @@ function ServerManager() {
     }
   };
 
-  const fetchConnections = async () => {
+  const fetchConnections = async (abortSignal) => {
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
-      const response = await api.get(`/server-connections`);
+      const response = await api.get(`/server-connections`, opts);
       if (Array.isArray(response.data)) {
         setConnections(response.data);
       } else {
         setConnections([]);
       }
     } catch (error) {
+      if (error?.name === 'CanceledError' || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') return;
       console.error('Error fetching server connections:', error);
     }
   };
 
+  // Шлюзы для карточки: из /network-config по serverId, иначе из server.gateways
+  const getGatewaysForServer = useMemo(() => {
+    const gatewaysByServerId = {};
+    (networkConfigGateways || []).forEach((gw) => {
+      if (!gw.serverId) return;
+      if (!gatewaysByServerId[gw.serverId]) gatewaysByServerId[gw.serverId] = [];
+      gatewaysByServerId[gw.serverId].push(gw);
+    });
+    return (server) => {
+      const ids = [server?.id, server?.ip, server?.dns].filter(Boolean);
+      for (const id of ids) {
+        const gws = gatewaysByServerId[id];
+        if (gws?.length > 0) {
+          return gws.map((gw, idx) => ({
+            id: gw.id,
+            name: gw.description || gw.id || gw.ip,
+            ip: gw.ip,
+            comment: gw.description,
+            primary: idx === 0,
+          }));
+        }
+      }
+      return server?.gateways || [];
+    };
+  }, [networkConfigGateways]);
+
   // === Фильтрация и сортировка ===
   const filteredServers = useMemo(() => {
     let result = [...servers];
@@ -216,9 +266,44 @@ function ServerManager() {
     return result;
   }, [servers, filters, searchTerm, sortField, sortOrder]);
 
+  // Элементы для отображения: серверы с одинаковым groupKey (и type home) объединяются в одну карточку
+  const displayItems = useMemo(() => {
+    const keyToServers = {};
+    filteredServers.forEach((s) => {
+      const k = (s.groupKey && String(s.groupKey).trim()) || null;
+      if (k) {
+        if (!keyToServers[k]) keyToServers[k] = [];
+        keyToServers[k].push(s);
+      }
+    });
+    const seenKeys = new Set();
+    const items = [];
+    for (const s of filteredServers) {
+      const k = (s.groupKey && String(s.groupKey).trim()) || null;
+      if (!k) {
+        items.push({ type: 'server', server: s });
+      } else {
+        if (!seenKeys.has(k)) {
+          seenKeys.add(k);
+          const group = keyToServers[k];
+          items.push(group.length >= 2 ? { type: 'group', groupKey: k, servers: group } : { type: 'server', server: group[0] });
+        }
+      }
+    }
+    return items;
+  }, [filteredServers]);
+
   // === Пагинация ===
-  const totalPages = Math.ceil(filteredServers.length / pageSize);
+  const totalPagesCards = Math.ceil(displayItems.length / pageSize);
+  const totalPagesTable = Math.ceil(filteredServers.length / pageSize);
+  const totalPages = viewMode === 'cards' ? totalPagesCards : totalPagesTable;
+  const paginatedDisplayItems = displayItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
   const paginatedServers = filteredServers.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+  const totalItemsCount = viewMode === 'cards' ? displayItems.length : filteredServers.length;
+
+  useEffect(() => {
+    if (currentPage > totalPages && totalPages >= 1) setCurrentPage(1);
+  }, [viewMode, totalPages]);
 
   // === Handlers ===
   const handleSort = (field) => {
@@ -247,11 +332,22 @@ function ServerManager() {
     setSelectedServers(newSet);
   };
 
+  const toggleGroupSelection = (servers, selectAll) => {
+    setSelectedServers((prev) => {
+      const next = new Set(prev);
+      servers.forEach((s) => {
+        if (selectAll) next.add(s.ip);
+        else next.delete(s.ip);
+      });
+      return next;
+    });
+  };
+
   const selectAllServers = () => {
     if (selectedServers.size === filteredServers.length) {
       setSelectedServers(new Set());
     } else {
-      setSelectedServers(new Set(filteredServers.map(s => s.ip)));
+      setSelectedServers(new Set(filteredServers.map((s) => s.ip)));
     }
   };
 
@@ -550,6 +646,12 @@ function ServerManager() {
     }
   };
 
+  const handleRefreshAll = () => {
+    fetchServers();
+    fetchConnections();
+    fetchNetworkConfig();
+  };
+
   // === Connections ===
   const addConnectionInternal = (draft) => {
     if (!draft.from || !draft.to || !draft.tunnelType || !draft.ipA || !draft.ipB) {
@@ -586,28 +688,32 @@ function ServerManager() {
 
   return (
     <div className="server-manager-layout">
-      {/* Header */}
+      <PageHeader
-      <div className="page-header d-print-none mb-3">
+        pretitle="Управление"
-        <div className="row align-items-center">
+        title="Серверы"
-          <div className="col">
+        icon={<IconServer size={24} />}
-            <h2 className="page-title d-flex align-items-center">
+        meta={
-              <IconServer className="me-2" />
+          <span className="text-muted">
-              Управление серверами
+            Всего серверов: <strong>{servers.length}</strong>
-            </h2>
+          </span>
-            <div className="page-pretitle">
+        }
-              {filteredServers.length} из {servers.length} серверов
+        actions={
-              {selectedServers.size > 0 && (
+          <>
-                <span className="ms-2 text-primary">• {selectedServers.size} выбрано</span>
+            <PageHeaderActions
-              )}
+              loading={loading}
-            </div>
+              onRefresh={handleRefreshAll}
-          </div>
+              disableRefresh={loading}
-          <div className="col-auto ms-auto d-print-none">
+              onExport={exportAllLinks}
-            <div className="btn-list">
+              disableExport={servers.length === 0}
-              {/* Tabs */}
+              onSave={handleSaveChanges}
-              <div className="btn-group me-2" role="group">
+              disableSave={loading}
+            />
+            <div className="mt-3 d-flex flex-wrap align-items-center justify-content-end gap-2">
+              <div className="btn-group" role="group" aria-label="Переключение режимов">
                 <button
                   className={`btn ${activeTab === 'servers' ? 'btn-primary' : 'btn-outline-primary'}`}
                   onClick={() => setActiveTab('servers')}
+                  type="button"
                 >
                   <IconServer size={16} className="me-1" />
                   Серверы
@@ -615,32 +721,64 @@ function ServerManager() {
                 <button
                   className={`btn ${activeTab === 'connections' ? 'btn-primary' : 'btn-outline-primary'}`}
                   onClick={() => setActiveTab('connections')}
+                  type="button"
                 >
                   <IconGitBranch size={16} className="me-1" />
                   Связи
                 </button>
               </div>
-
+              <button
-              {/* Actions */}
+                type="button"
-              <button type="button" className="btn btn-outline-secondary" onClick={exportAllLinks} disabled={servers.length === 0}>
+                className="btn btn-primary"
-                <IconDownload size={16} className="me-1" /> Экспорт
+                onClick={handleOpenAddServerModal}
-              </button>
+              >
-              <button type="button" className="btn btn-outline-primary" onClick={handleSaveChanges} disabled={loading}>
-                <IconDatabase size={16} className={loading ? 'spin me-1' : 'me-1'} /> Сохранить
-              </button>
-              <button type="button" className="btn btn-primary" onClick={handleOpenAddServerModal}>
                 <IconPlus size={16} className="me-1" /> Добавить
               </button>
             </div>
-          </div>
+          </>
-        </div>
+        }
-      </div>
+      />
 
-      {/* Main content with sidebar */}
+      {/* Offcanvas: фильтры (только для вкладки «Серверы») */}
       {activeTab === 'servers' && (
-        <div className="d-flex" style={{ gap: '1rem' }}>
+        <>
-          {/* Sidebar */}
+          <div
-          {!sidebarCollapsed && (
+            className="offcanvas offcanvas-start"
+            id="server-filters-offcanvas"
+            tabIndex={-1}
+            aria-labelledby="server-filters-offcanvas-label"
+            style={{ width: '340px', maxWidth: '90vw' }}
+          >
+            <div className="offcanvas-header border-bottom">
+              <h5 className="offcanvas-title d-flex align-items-center" id="server-filters-offcanvas-label">
+                <IconFilter size={18} className="text-primary me-2" />
+                Фильтры
+                {(Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)) > 0 && (
+                  <span className="badge bg-primary-lt text-primary ms-2">
+                    {Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)}
+                  </span>
+                )}
+              </h5>
+              <div className="d-flex align-items-center gap-1">
+                {(Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)) > 0 && (
+                  <button
+                    type="button"
+                    className="btn btn-ghost-secondary btn-sm"
+                    onClick={handleResetFilters}
+                    title="Сбросить фильтры"
+                  >
+                    Сбросить
+                  </button>
+                )}
+                <button
+                  type="button"
+                  className="btn-close"
+                  data-bs-dismiss="offcanvas"
+                  aria-label="Закрыть"
+                />
+              </div>
+            </div>
+            <div className="offcanvas-body px-3 py-0 d-flex flex-column overflow-hidden">
               <ServerSidebar
                 servers={servers}
                 filters={filters}
@@ -648,26 +786,39 @@ function ServerManager() {
                 searchTerm={searchTerm}
                 onSearch={(term) => { setSearchTerm(term); setCurrentPage(1); }}
                 onReset={handleResetFilters}
+                embedded
               />
+            </div>
+          </div>
+        </>
       )}
 
-          {/* Toggle sidebar button */}
+      {/* Main content */}
-          <button
+      {activeTab === 'servers' && (
-            className="btn btn-ghost-secondary btn-icon position-absolute"
+        <div>
-            style={{ left: sidebarCollapsed ? 10 : 290, top: 200, zIndex: 100 }}
-            onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-            title={sidebarCollapsed ? 'Показать фильтры' : 'Скрыть фильтры'}
-          >
-            <IconChevronRight size={16} style={{ transform: sidebarCollapsed ? 'rotate(0deg)' : 'rotate(180deg)', transition: '0.2s' }} />
-          </button>
-
-          {/* Servers list */}
           <div className="flex-grow-1">
             {/* Toolbar */}
             <div className="card mb-3">
               <div className="card-body py-2">
                 <div className="d-flex align-items-center justify-content-between">
                   <div className="d-flex align-items-center gap-2">
+                    {/* Открыть фильтры (offcanvas) */}
+                    <button
+                      type="button"
+                      className="btn btn-outline-secondary btn-sm d-flex align-items-center"
+                      data-bs-toggle="offcanvas"
+                      data-bs-target="#server-filters-offcanvas"
+                      aria-controls="server-filters-offcanvas"
+                      title="Фильтры"
+                    >
+                      <IconFilter size={16} className="me-1" />
+                      Фильтры
+                      {(Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)) > 0 && (
+                        <span className="badge bg-primary-lt text-primary ms-1">
+                          {Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)}
+                        </span>
+                      )}
+                    </button>
                     {/* Select all */}
                     <button
                       className="btn btn-outline-secondary btn-sm d-flex align-items-center"
@@ -737,18 +888,31 @@ function ServerManager() {
                 </div>
               </div>
             ) : viewMode === 'cards' ? (
-              /* Cards view */
+              /* Cards view: одиночные серверы и группы (groupKey) */
               <div>
-                {paginatedServers.map(server => (
+                {paginatedDisplayItems.map((item) =>
+                  item.type === 'group' ? (
+                    <ServerGroupCard
+                      key={`group-${item.groupKey}`}
+                      groupKey={item.groupKey}
+                      servers={item.servers.map((s) => ({ ...s, gateways: getGatewaysForServer(s) }))}
+                      selectedSet={selectedServers}
+                      onSelect={toggleServerSelection}
+                      onSelectGroup={toggleGroupSelection}
+                      onEdit={handleEdit}
+                      onDelete={confirmDelete}
+                    />
+                  ) : (
                     <ServerCard
-                    key={server.id || server.ip}
+                      key={item.server.id || item.server.ip}
-                    server={server}
+                      server={{ ...item.server, gateways: getGatewaysForServer(item.server) }}
-                    selected={selectedServers.has(server.ip)}
+                      selected={selectedServers.has(item.server.ip)}
                       onSelect={toggleServerSelection}
                       onEdit={handleEdit}
                       onDelete={confirmDelete}
                     />
-                ))}
+                  )
+                )}
               </div>
             ) : (
               /* Table view */
@@ -837,7 +1001,7 @@ function ServerManager() {
               <div className="card mt-3">
                 <div className="card-footer d-flex align-items-center justify-content-between">
                   <div className="text-muted">
-                    {(currentPage - 1) * pageSize + 1} – {Math.min(currentPage * pageSize, filteredServers.length)} из {filteredServers.length}
+                    {(currentPage - 1) * pageSize + 1} – {Math.min(currentPage * pageSize, totalItemsCount)} из {totalItemsCount}
                   </div>
                   <ul className="pagination m-0">
                     <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>

frontend/src/TrafficDashboard.jsx

@@ -0,0 +1,391 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import api from './lib/api.js';
+import {
+  IconChartPie,
+  IconRefresh,
+  IconServer,
+  IconAlertCircle,
+} from '@tabler/icons-react';
+import {
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+} from 'recharts';
+import PageHeader from './components/PageHeader.jsx';
+
+/** Палитра в стиле UniFi: зелёные, жёлтые, оранжевые, красные, фиолетовые, серые */
+const CHART_COLORS = [
+  '#2fb344', '#5eba00', '#94c748', '#fab005', '#fd7e14', '#f76707',
+  '#e64980', '#ae3ec9', '#7950f2', '#5c7cfa', '#748cab', '#868e96',
+  '#adb5bd', '#ced4da', '#206bc4', '#20c997',
+];
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+const DONUT_SIZE = 200;
+const DONUT_OUTER = 88;
+const DONUT_INNER = 52;
+
+function JumphostCard({ jumphost }) {
+  const { name, host, error, interfaces } = jumphost;
+  const hasData = Array.isArray(interfaces) && interfaces.length > 0;
+  const totalBytes = hasData ? interfaces.reduce((acc, i) => acc + (i.totalBytes || 0), 0) : 0;
+  const chartData = hasData
+    ? interfaces
+        .filter((i) => (i.totalBytes || 0) > 0)
+        .map((i, idx) => ({
+          name: i.name,
+          value: i.totalBytes,
+          rxBytes: i.rxBytes,
+          txBytes: i.txBytes,
+          fill: CHART_COLORS[idx % CHART_COLORS.length],
+        }))
+    : [];
+
+  return (
+    <div className="card h-100">
+      <div className="card-header d-flex align-items-center">
+        <span className="avatar avatar-sm me-2 bg-blue-lt text-blue">
+          <IconServer size={18} />
+        </span>
+        <div className="flex-grow-1 min-w-0">
+          <h3 className="card-title mb-0 text-truncate" title={name}>
+            {name || host || 'Jumphost'}
+          </h3>
+          {host && (
+            <div className="text-muted small text-truncate" title={host}>
+              {host}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="card-body">
+        {error && (
+          <div className="alert alert-warning py-2 mb-0 d-flex align-items-center">
+            <IconAlertCircle className="me-2 flex-shrink-0" size={18} />
+            <span className="small">{error}</span>
+          </div>
+        )}
+        {!error && !hasData && (
+          <div className="text-muted text-center py-4 small">
+            Нет данных по интерфейсам
+          </div>
+        )}
+        {!error && hasData && chartData.length === 0 && (
+          <div className="text-muted text-center py-4 small">
+            Все счётчики нулевые
+          </div>
+        )}
+        {!error && chartData.length > 0 && (
+          <div className="traffic-donut-wrapper d-flex flex-wrap align-items-start gap-3">
+            <div
+              className="position-relative flex-shrink-0"
+              style={{ width: DONUT_SIZE, height: DONUT_SIZE }}
+            >
+              <ResponsiveContainer width={DONUT_SIZE} height={DONUT_SIZE}>
+                <PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
+                  <Pie
+                    data={chartData}
+                    dataKey="value"
+                    nameKey="name"
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={DONUT_INNER}
+                    outerRadius={DONUT_OUTER}
+                    paddingAngle={0}
+                    stroke="none"
+                  >
+                    {chartData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.fill} />
+                    ))}
+                  </Pie>
+                  <Tooltip
+                    formatter={(value) => formatBytes(value)}
+                    contentStyle={{ fontSize: '12px' }}
+                    labelFormatter={(name, payload) => {
+                      const p = payload?.[0];
+                      if (!p) return name;
+                      return `${name} — RX: ${formatBytes(p.rxBytes || 0)}, TX: ${formatBytes(p.txBytes || 0)}`;
+                    }}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+              <div
+                className="position-absolute top-50 start-50 translate-middle text-center text-body"
+                style={{ pointerEvents: 'none', width: '60%' }}
+              >
+                <div className="fw-bold lh-1" style={{ fontSize: '1.1rem' }}>
+                  {formatBytes(totalBytes)}
+                </div>
+                <div className="text-muted small mt-1" style={{ fontSize: '0.65rem', letterSpacing: '0.02em' }}>
+                  TRAFFIC
+                </div>
+              </div>
+            </div>
+            <div className="traffic-legend flex-grow-1 min-w-0" style={{ maxWidth: 240 }}>
+              {chartData.map((item) => (
+                <div
+                  key={item.name}
+                  className="d-flex align-items-center mb-2 small"
+                  title={`${item.name}: RX ${formatBytes(item.rxBytes)}, TX ${formatBytes(item.txBytes)}`}
+                >
+                  <span
+                    className="flex-shrink-0 rounded"
+                    style={{
+                      width: 10,
+                      height: 10,
+                      backgroundColor: item.fill,
+                    }}
+                  />
+                  <span className="ms-2 text-truncate">
+                    {item.name} - {formatBytes(item.value)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Ключ jumphost для сопоставления с настройками (как в SettingsPage) */
+function getJumphostKey(jh) {
+  return String(jh?.serverId ?? jh?.host ?? jh?.name ?? '');
+}
+
+/** Множество выбранных пар (serverKey + interfaceName). Пустое = учитывать все интерфейсы. */
+function getTrafficInterfaceFilter(settings) {
+  const raw = settings?.trafficInterfaces;
+  if (!raw || !Array.isArray(raw)) return null;
+  const pairs = raw
+    .filter((p) => p && (p.serverKey != null || p.serverId != null) && (p.interfaceName != null || p.name != null))
+    .map((p) => `${String(p.serverKey ?? p.serverId ?? '')}\n${String(p.interfaceName ?? p.name ?? '')}`);
+  return pairs.length > 0 ? new Set(pairs) : null;
+}
+
+export default function TrafficDashboard() {
+  const [jumphosts, setJumphosts] = useState([]);
+  const [uiSettings, setUiSettings] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const interfaceFilter = getTrafficInterfaceFilter(uiSettings);
+
+  const fetchStats = useCallback(async (abortSignal) => {
+    setLoading(true);
+    setError(null);
+    const opts = abortSignal ? { signal: abortSignal } : {};
+    try {
+      const [statsRes, settingsRes] = await Promise.all([
+        api.get('/traffic/interface-stats', opts),
+        api.get('/ui-settings', opts).catch(() => ({ data: {} })),
+      ]);
+      const data = statsRes?.data || {};
+      setJumphosts(Array.isArray(data?.jumphosts) ? data.jumphosts : []);
+      setUiSettings(settingsRes?.data || {});
+    } catch (e) {
+      if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      console.error('Traffic stats:', e);
+      setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить статистику');
+      setJumphosts([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetchStats(controller.signal);
+    return () => controller.abort();
+  }, [fetchStats]);
+
+  const filteredJumphosts = useMemo(() => {
+    if (!interfaceFilter) return jumphosts;
+    return jumphosts.map((jh) => {
+      const sk = getJumphostKey(jh);
+      return {
+        ...jh,
+        interfaces: Array.isArray(jh.interfaces)
+          ? jh.interfaces.filter(
+              (i) =>
+                i.name != null &&
+                interfaceFilter.has(`${sk}\n${String(i.name).trim()}`)
+            )
+          : [],
+      };
+    });
+  }, [jumphosts, interfaceFilter]);
+
+  // Суммарная статистика по всем отображаемым системам (без ошибок, с данными)
+  const summary = (() => {
+    const withData = (filteredJumphosts || []).filter((jh) => !jh.error && Array.isArray(jh.interfaces) && jh.interfaces.length > 0);
+    let totalBytes = 0;
+    let totalRx = 0;
+    let totalTx = 0;
+    const byJumphost = [];
+    for (const jh of withData) {
+      let jhTotal = 0;
+      let jhRx = 0;
+      let jhTx = 0;
+      for (const i of jh.interfaces) {
+        jhTotal += i.totalBytes || 0;
+        jhRx += i.rxBytes || 0;
+        jhTx += i.txBytes || 0;
+      }
+      totalBytes += jhTotal;
+      totalRx += jhRx;
+      totalTx += jhTx;
+      if (jhTotal > 0) {
+        byJumphost.push({
+          name: jh.name || jh.host || 'Jumphost',
+          value: jhTotal,
+          fill: CHART_COLORS[byJumphost.length % CHART_COLORS.length],
+        });
+      }
+    }
+    return {
+      totalBytes,
+      totalRx,
+      totalTx,
+      systemsCount: withData.length,
+      byJumphost,
+    };
+  })();
+
+  const hasSummary = summary.systemsCount > 0 && summary.totalBytes > 0;
+
+  return (
+    <div>
+      <PageHeader
+        title="Расход трафика"
+        icon={<IconChartPie size={24} />}
+        meta="Статистика по интерфейсам MikroTik RouterOS (jumphost)"
+        actions={
+          <button
+            type="button"
+            className="btn btn-outline-primary"
+            onClick={() => fetchStats()}
+            disabled={loading}
+          >
+            <IconRefresh className={loading ? 'spin me-2' : 'me-2'} size={18} />
+            {loading ? 'Загрузка…' : 'Обновить'}
+          </button>
+        }
+      />
+      {error && (
+        <div className="alert alert-danger d-flex align-items-center">
+          <IconAlertCircle className="me-2" size={20} />
+          {error}
+        </div>
+      )}
+      {loading && jumphosts.length === 0 && !error && (
+        <div className="text-center py-5 text-muted">
+          Загрузка статистики с роутеров…
+        </div>
+      )}
+      {!loading && !error && jumphosts.length === 0 && (
+        <div className="alert alert-info">
+          Нет jumphost-серверов с настроенным MikroTik API. Добавьте серверы типа «Jumphost» и укажите учётные данные RouterOS.
+        </div>
+      )}
+      {!loading && jumphosts.length > 0 && (
+        <>
+          {hasSummary && (
+            <div className="card mb-4">
+              <div className="card-header">
+                <h3 className="card-title mb-0">Суммарно по всем системам</h3>
+              </div>
+              <div className="card-body">
+                <div className="d-flex flex-wrap align-items-stretch gap-4">
+                  <div className="position-relative flex-shrink-0" style={{ width: 220, height: 220 }}>
+                    <ResponsiveContainer width={220} height={220}>
+                      <PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
+                        <Pie
+                          data={summary.byJumphost}
+                          dataKey="value"
+                          nameKey="name"
+                          cx="50%"
+                          cy="50%"
+                          innerRadius={58}
+                          outerRadius={98}
+                          paddingAngle={0}
+                          stroke="none"
+                        >
+                          {summary.byJumphost.map((entry, index) => (
+                            <Cell key={`cell-${index}`} fill={entry.fill} />
+                          ))}
+                        </Pie>
+                        <Tooltip formatter={(value) => formatBytes(value)} />
+                      </PieChart>
+                    </ResponsiveContainer>
+                    <div
+                      className="position-absolute top-50 start-50 translate-middle text-center text-body"
+                      style={{ pointerEvents: 'none', width: '55%' }}
+                    >
+                      <div className="fw-bold lh-1" style={{ fontSize: '1.35rem' }}>
+                        {formatBytes(summary.totalBytes)}
+                      </div>
+                      <div className="text-muted small mt-1" style={{ fontSize: '0.7rem', letterSpacing: '0.02em' }}>
+                        TRAFFIC
+                      </div>
+                    </div>
+                  </div>
+                  <div className="d-flex flex-wrap gap-4 align-items-center flex-grow-1">
+                    <div className="traffic-summary-legend">
+                      {summary.byJumphost.map((item) => (
+                        <div key={item.name} className="d-flex align-items-center mb-2 small">
+                          <span
+                            className="flex-shrink-0 rounded"
+                            style={{ width: 10, height: 10, backgroundColor: item.fill }}
+                          />
+                          <span className="ms-2">
+                            {item.name} - {formatBytes(item.value)}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                    <div className="d-flex flex-wrap gap-3 ms-md-auto">
+                      <div className="px-3 py-2 rounded bg-blue-lt text-blue">
+                        <span className="d-block small text-muted">Всего трафика</span>
+                        <span className="fw-bold">{formatBytes(summary.totalBytes)}</span>
+                      </div>
+                      <div className="px-3 py-2 rounded bg-green-lt text-green">
+                        <span className="d-block small text-muted">RX</span>
+                        <span className="fw-bold">{formatBytes(summary.totalRx)}</span>
+                      </div>
+                      <div className="px-3 py-2 rounded bg-orange-lt text-orange">
+                        <span className="d-block small text-muted">TX</span>
+                        <span className="fw-bold">{formatBytes(summary.totalTx)}</span>
+                      </div>
+                      <div className="px-3 py-2 rounded bg-azure-lt text-azure">
+                        <span className="d-block small text-muted">Систем</span>
+                        <span className="fw-bold">{summary.systemsCount}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          <div className="row row-cards g-3">
+            {filteredJumphosts.map((jh) => (
+              <div key={jh.serverId || jh.host || jh.name} className="col-12 col-md-6 col-xl-4">
+                <JumphostCard jumphost={jh} />
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/UptimeMonitorPage.jsx

@@ -0,0 +1,473 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import api from './lib/api.js';
+import {
+  IconClock,
+  IconRefresh,
+  IconServer,
+  IconCircleCheck,
+  IconCircleX,
+  IconChartLine,
+} from '@tabler/icons-react';
+import {
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+import PageHeader from './components/PageHeader.jsx';
+import { formatRelative } from './lib/datetime.js';
+
+const DEFAULT_CHECK_INTERVAL_SEC = 120;
+const PARALLEL_CHECKS = 4; // количество одновременных проверок
+const HISTORY_MAX = 500;
+const STORAGE_KEY = 'uptime-monitor-history';
+
+function loadHistoryFromStorage() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === 'object') return parsed;
+  } catch (_) {}
+  return {};
+}
+
+function saveHistoryToStorage(historyMap) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(historyMap));
+  } catch (_) {}
+}
+
+/** Группировка истории по дням: массив { day, dayLabel, incidents } */
+function historyToIncidentsByDay(history) {
+  if (!Array.isArray(history) || history.length === 0) return [];
+  const byDay = new Map(); // dayKey -> count of down checks
+  history.forEach(({ ts, ok }) => {
+    if (ok) return;
+    const d = new Date(ts);
+    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    byDay.set(key, (byDay.get(key) || 0) + 1);
+  });
+  return Array.from(byDay.entries())
+    .map(([day, incidents]) => ({
+      day,
+      dayLabel: new Date(day + 'T12:00:00').toLocaleDateString('ru-RU', {
+        day: 'numeric',
+        month: 'short',
+      }),
+      incidents,
+    }))
+    .sort((a, b) => a.day.localeCompare(b.day));
+}
+
+/** История в точки для графика задержек: { time, ts, ms } */
+function historyToResponseTimeData(history) {
+  if (!Array.isArray(history) || history.length === 0) return [];
+  return history.map(({ ts, ok, ms }) => ({
+    ts,
+    time: new Date(ts).toLocaleString('ru-RU', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    }),
+    ms: ok && ms != null ? Math.round(ms) : null,
+  }));
+}
+
+export default function UptimeMonitorPage() {
+  const [servers, setServers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [checking, setChecking] = useState(false);
+  const [error, setError] = useState(null);
+  const [statusMap, setStatusMap] = useState({});
+  /** По serverId: массив { ts, ok, ms } */
+  const [historyMap, setHistoryMap] = useState(loadHistoryFromStorage);
+  const [selectedServerId, setSelectedServerId] = useState(null);
+  const [checkIntervalSeconds, setCheckIntervalSeconds] = useState(DEFAULT_CHECK_INTERVAL_SEC);
+  /** serverId, по которым сейчас идёт проверка — показываем «Проверка…» в строке (до PARALLEL_CHECKS одновременно) */
+  const [currentCheckingServerIds, setCurrentCheckingServerIds] = useState([]);
+  const intervalRef = useRef(null);
+  const checkingRef = useRef(false);
+
+  const jumphosts = useMemo(
+    () =>
+      servers.filter((s) =>
+        ['jumphost', 'home'].includes(String(s.type || '').toLowerCase())
+      ),
+    [servers]
+  );
+
+  const controllerRef = useRef(null);
+
+  const fetchServers = useCallback(async (abortSignal) => {
+    setLoading(true);
+    setError(null);
+    const opts = abortSignal ? { signal: abortSignal } : {};
+    try {
+      const [serversRes, settingsRes] = await Promise.all([
+        api.get('/servers', opts),
+        api.get('/ui-settings', opts).catch(() => ({ data: {} })),
+      ]);
+      const data = serversRes?.data;
+      setServers(Array.isArray(data) ? data : []);
+      const ui = settingsRes?.data || {};
+      const interval = Math.max(30, Math.min(86400, parseInt(ui.uptimeMonitorIntervalSeconds, 10) || DEFAULT_CHECK_INTERVAL_SEC));
+      setCheckIntervalSeconds(interval);
+    } catch (e) {
+      if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      setError(e?.response?.data?.message || e?.message || 'Не удалось загрузить серверы');
+      setServers([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const c = new AbortController();
+    controllerRef.current = c;
+    fetchServers(c.signal);
+    return () => {
+      c.abort();
+      controllerRef.current = null;
+    };
+  }, [fetchServers]);
+
+  // При заходе на страницу подставляем кеш — сразу видны последние проверки
+  useEffect(() => {
+    if (jumphosts.length === 0) return;
+    const signal = controllerRef.current?.signal;
+    if (!signal) return;
+    api.get('/uptime/cache', { signal })
+      .then(({ data }) => {
+        if (data?.results && typeof data.results === 'object' && Object.keys(data.results).length > 0) {
+          setStatusMap((prev) => ({ ...prev, ...data.results }));
+        }
+      })
+      .catch((e) => {
+        if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
+      });
+  }, [jumphosts]);
+
+  const checkIntervalMs = checkIntervalSeconds * 1000;
+
+  /** Параллельный запуск проверок (до PARALLEL_CHECKS одновременно), результат по мере готовности */
+  const runChecks = useCallback(async () => {
+    if (jumphosts.length === 0) return;
+    if (checkingRef.current) return;
+    checkingRef.current = true;
+    setChecking(true);
+    setCurrentCheckingServerIds([]);
+    let index = 0;
+    const getNext = () => {
+      const i = index++;
+      return i < jumphosts.length ? jumphosts[i] : null;
+    };
+    const checkOne = async () => {
+      let server;
+      while ((server = getNext()) != null) {
+        const serverId = server.id || server.dns || server.ip;
+        if (!serverId) continue;
+        setCurrentCheckingServerIds((prev) => [...prev, serverId]);
+        const t0 = Date.now();
+        let ok = false;
+        let ms = null;
+        try {
+          const { data: checkData } = await api.post('/uptime/check', { serverId });
+          ok = checkData?.ok === true;
+          ms = typeof checkData?.ms === 'number' ? checkData.ms : Date.now() - t0;
+        } catch (_) {
+          ms = Date.now() - t0;
+        }
+        const lastCheckTs = Date.now();
+        const entry = { ts: lastCheckTs, ok, ms };
+        setStatusMap((prev) => ({ ...prev, [serverId]: { ok, lastCheckTs } }));
+        setHistoryMap((prev) => {
+          const list = Array.isArray(prev[serverId]) ? prev[serverId] : [];
+          const merged = [...list, entry].slice(-HISTORY_MAX);
+          return { ...prev, [serverId]: merged };
+        });
+        setCurrentCheckingServerIds((prev) => prev.filter((id) => id !== serverId));
+      }
+    };
+    await Promise.all(Array.from({ length: PARALLEL_CHECKS }, checkOne));
+    setCurrentCheckingServerIds([]);
+    checkingRef.current = false;
+    setChecking(false);
+  }, [jumphosts]);
+
+  // Первый запуск проверки через несколько секунд после загрузки (после перезапуска контейнера кеш может быть пустым или устаревшим)
+  useEffect(() => {
+    if (jumphosts.length === 0) return;
+    const t = setTimeout(runChecks, 4000);
+    return () => clearTimeout(t);
+  }, [jumphosts.length, runChecks]);
+
+  // Автопроверка по интервалу в фоне
+  useEffect(() => {
+    if (jumphosts.length === 0) return;
+    intervalRef.current = setInterval(runChecks, checkIntervalMs);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [jumphosts, runChecks, checkIntervalMs]);
+
+  // Сохраняем историю в localStorage при изменении
+  useEffect(() => {
+    saveHistoryToStorage(historyMap);
+  }, [historyMap]);
+
+  const selectedServer = selectedServerId
+    ? jumphosts.find((s) => (s.id || s.dns || s.ip) === selectedServerId)
+    : null;
+  const selectedHistory = selectedServerId ? historyMap[selectedServerId] || [] : [];
+  const responseTimeData = useMemo(
+    () => historyToResponseTimeData(selectedHistory),
+    [selectedHistory]
+  );
+  const incidentsByDay = useMemo(
+    () => historyToIncidentsByDay(selectedHistory),
+    [selectedHistory]
+  );
+
+  return (
+    <div className="page-body">
+      <div className="container-fluid">
+        <PageHeader
+          title="Uptime Monitor"
+          icon={<IconClock size={28} />}
+          pretitle="Extra"
+          meta="Проверка доступности всех Jumphost и домашних роутеров (MikroTik API)"
+          actions={
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={runChecks}
+              disabled={jumphosts.length === 0 || checking}
+            >
+              <IconRefresh className={checking ? 'spin' : ''} size={18} />
+              {checking ? ' Проверка…' : ' Проверить все'}
+            </button>
+          }
+        />
+
+        {error && (
+          <div className="alert alert-danger" role="alert">
+            {error}
+          </div>
+        )}
+
+        {!loading && jumphosts.length === 0 && (
+          <div className="empty">
+            <div className="empty-icon">
+              <IconChartLine size={48} />
+            </div>
+            <p className="empty-title">Нет Jumphost</p>
+            <p className="empty-subtitle text-muted">
+              Добавьте серверы типа «Jumphost» или «Home» с настроенным MikroTik API — здесь будет отображаться их доступность.
+            </p>
+          </div>
+        )}
+
+        {!loading && jumphosts.length > 0 && (
+          <>
+            <div className="card">
+              <div className="card-header">
+                <h3 className="card-title">Доступность Jumphost и домашних роутеров</h3>
+                <div className="card-actions text-muted small">
+                  Проверка каждые {checkIntervalSeconds} сек · Выберите сервер для графиков
+                </div>
+              </div>
+              <div className="table-responsive">
+                <table className="table table-vcenter card-table table-striped">
+                  <thead>
+                    <tr>
+                      <th>Сервер</th>
+                      <th>Статус</th>
+                      <th>Последняя проверка</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {jumphosts.map((s) => {
+                      const id = s.id || s.dns || s.ip;
+                      const status = statusMap[id];
+                      const label = s.dns || s.name || s.ip || id;
+                      const isSelected = selectedServerId === id;
+                      return (
+                        <tr
+                          key={id}
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => setSelectedServerId(id)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              setSelectedServerId(id);
+                            }
+                          }}
+                          className={isSelected ? 'table-active' : ''}
+                          style={{ cursor: 'pointer' }}
+                        >
+                          <td>
+                            <div className="d-flex align-items-center">
+                              <IconServer size={18} className="me-2 text-muted" />
+                              {label}
+                            </div>
+                          </td>
+                          <td>
+                            {currentCheckingServerIds.includes(id) && (
+                              <span className="badge bg-blue-lt text-blue">
+                                <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" />
+                                Проверка…
+                              </span>
+                            )}
+                            {!currentCheckingServerIds.includes(id) && status == null && (
+                              <span className="badge bg-secondary">—</span>
+                            )}
+                            {!currentCheckingServerIds.includes(id) && status?.ok === true && (
+                              <span className="badge bg-success-lt text-success">
+                                <IconCircleCheck size={14} /> Доступен
+                              </span>
+                            )}
+                            {!currentCheckingServerIds.includes(id) && status?.ok === false && (
+                              <span className="badge bg-danger-lt text-danger">
+                                <IconCircleX size={14} /> Недоступен
+                              </span>
+                            )}
+                          </td>
+                          <td className="text-muted">
+                            {currentCheckingServerIds.includes(id)
+                              ? '…'
+                              : status?.lastCheckTs
+                                ? formatRelative(status.lastCheckTs)
+                                : '—'}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {selectedServer && (
+              <div className="row mt-4">
+                <div className="col-lg-6 mb-4">
+                  <div className="card h-100">
+                    <div className="card-header">
+                      <h3 className="card-title">Время ответа за период</h3>
+                      <div className="card-actions text-muted small">
+                        {selectedServer.dns || selectedServer.name || selectedServer.ip}
+                      </div>
+                    </div>
+                    <div className="card-body">
+                      {responseTimeData.length === 0 ? (
+                        <p className="text-muted mb-0">
+                          Нет данных. Проверки накапливаются со временем (хранятся в браузере).
+                        </p>
+                      ) : (
+                        <ResponsiveContainer width="100%" height={260}>
+                          <AreaChart
+                            data={responseTimeData}
+                            margin={{ top: 8, right: 16, left: 8, bottom: 8 }}
+                          >
+                            <defs>
+                              <linearGradient id="colorMs" x1="0" y1="0" x2="0" y2="1">
+                                <stop offset="5%" stopColor="#206bc4" stopOpacity={0.3} />
+                                <stop offset="95%" stopColor="#206bc4" stopOpacity={0} />
+                              </linearGradient>
+                            </defs>
+                            <CartesianGrid strokeDasharray="3 3" stroke="#e9ecef" />
+                            <XAxis
+                              dataKey="time"
+                              tick={{ fontSize: 11 }}
+                              interval="preserveStartEnd"
+                            />
+                            <YAxis
+                              unit=" мс"
+                              tick={{ fontSize: 11 }}
+                              domain={[0, (dataMax) => Math.max(dataMax || 0, 100)]}
+                            />
+                            <Tooltip
+                              formatter={(value) => [value != null ? `${value} мс` : '—', 'Задержка']}
+                              labelFormatter={(_, payload) =>
+                                payload[0]?.payload?.time ?? ''
+                              }
+                            />
+                            <Area
+                              type="monotone"
+                              dataKey="ms"
+                              stroke="#206bc4"
+                              fill="url(#colorMs)"
+                              strokeWidth={2}
+                              connectNulls={false}
+                              dot={false}
+                              activeDot={{ r: 4 }}
+                            />
+                          </AreaChart>
+                        </ResponsiveContainer>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="col-lg-6 mb-4">
+                  <div className="card h-100">
+                    <div className="card-header">
+                      <h3 className="card-title">Инциденты по дням</h3>
+                      <div className="card-actions text-muted small">
+                        Недоступность (кол-во проверок)
+                      </div>
+                    </div>
+                    <div className="card-body">
+                      {incidentsByDay.length === 0 ? (
+                        <p className="text-muted mb-0">
+                          Нет инцидентов за сохранённый период или нет данных.
+                        </p>
+                      ) : (
+                        <ResponsiveContainer width="100%" height={260}>
+                          <BarChart
+                            data={incidentsByDay}
+                            margin={{ top: 8, right: 16, left: 8, bottom: 8 }}
+                          >
+                            <CartesianGrid strokeDasharray="3 3" stroke="#e9ecef" />
+                            <XAxis
+                              dataKey="dayLabel"
+                              tick={{ fontSize: 11 }}
+                              interval="preserveStartEnd"
+                            />
+                            <YAxis
+                              allowDecimals={false}
+                              tick={{ fontSize: 11 }}
+                              domain={[0, (dataMax) => Math.max(dataMax || 0, 1)]}
+                            />
+                            <Tooltip
+                              formatter={(value) => [value, 'Инцидентов']}
+                              labelFormatter={(_, payload) =>
+                                payload[0]?.payload?.day ?? ''
+                              }
+                            />
+                            <Bar
+                              dataKey="incidents"
+                              fill="#d63939"
+                              radius={[2, 2, 0, 0]}
+                              name="Инциденты"
+                            />
+                          </BarChart>
+                        </ResponsiveContainer>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/AddItemModal.jsx

@@ -0,0 +1,262 @@
+import { useState, useEffect } from 'react';
+import FormModal from './FormModal.jsx';
+import FormField from './FormField.jsx';
+import CommunityAutocompleteInput from './CommunityAutocompleteInput.jsx';
+import { IconPlus, IconWorld, IconNetwork, IconHash } from '@tabler/icons-react';
+
+/**
+ * Универсальное модальное окно для добавления записи (домен/IP-диапазон/ASN)
+ * 
+ * @param {Object} props
+ * @param {boolean} props.open - Открыто ли модальное окно
+ * @param {function} props.onClose - Закрытие модального окна
+ * @param {function} props.onSubmit - Обработчик добавления (item) => void
+ * @param {string} props.type - Тип записи: 'domain' | 'ipRange' | 'asn'
+ * @param {Array} props.communities - Список community для автодополнения
+ * @param {boolean} props.loading - Состояние загрузки
+ */
+export default function AddItemModal({
+  open,
+  onClose,
+  onSubmit,
+  type = 'domain',
+  communities = [],
+  loading = false
+}) {
+  const [formData, setFormData] = useState({ value: '', community: '' });
+  const [errors, setErrors] = useState({ value: '', community: '' });
+
+  // Сброс формы при закрытии
+  useEffect(() => {
+    if (!open) {
+      setFormData({ value: '', community: '' });
+      setErrors({ value: '', community: '' });
+    }
+  }, [open]);
+
+  const validators = {
+    domain: (v) => {
+      const val = String(v).trim().toLowerCase();
+      return /^([a-z0-9-]+\.)+[a-z]{2,}$/i.test(val);
+    },
+    ipRange: (v) => {
+      const val = String(v).trim();
+      const parts = val.split('/');
+      if (parts.length !== 2) return false;
+      const [ip, mask] = parts;
+      if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(ip)) return false;
+      const octets = ip.split('.');
+      if (!octets.every(o => /^\d{1,3}$/.test(o) && Number(o) >= 0 && Number(o) <= 255)) return false;
+      if (!/^\d{1,2}$/.test(mask)) return false;
+      const m = Number(mask);
+      return m >= 0 && m <= 32;
+    },
+    asn: (v) => {
+      const val = String(v).trim();
+      return /^[0-9]+$/.test(val);
+    }
+  };
+
+  const isValidCommunity = (v) => /^(\d+|\d+:\d+)$/.test(String(v).trim());
+
+  const validate = () => {
+    const valueValid = validators[type]?.(formData.value);
+    const communityValid = isValidCommunity(formData.community);
+    
+    setErrors({
+      value: valueValid ? '' : getValueError(),
+      community: communityValid ? '' : 'Неверный формат community (N или N:N)'
+    });
+    
+    return valueValid && communityValid;
+  };
+
+  const getValueError = () => {
+    switch (type) {
+      case 'domain':
+        return 'Неверный формат домена (sub.domain.tld)';
+      case 'ipRange':
+        return 'Неверный формат IP-диапазона (A.B.C.D/Mask)';
+      case 'asn':
+        return 'Неверный формат ASN (только цифры, например 12345)';
+      default:
+        return 'Неверный формат';
+    }
+  };
+
+  const getValueLabel = () => {
+    switch (type) {
+      case 'domain':
+        return 'Домен';
+      case 'ipRange':
+        return 'IP-диапазон';
+      case 'asn':
+        return 'ASN';
+      default:
+        return 'Значение';
+    }
+  };
+
+  const getValuePlaceholder = () => {
+    switch (type) {
+      case 'domain':
+        return 'example.com';
+      case 'ipRange':
+        return '192.168.1.0/24';
+      case 'asn':
+        return '12345';
+      default:
+        return '';
+    }
+  };
+
+  const getValueHelp = () => {
+    switch (type) {
+      case 'domain':
+        return 'Формат: sub.domain.tld (например foo.example.org)';
+      case 'ipRange':
+        return 'Формат: A.B.C.D/Mask, например 10.0.0.0/24';
+      case 'asn':
+        return 'Формат: только цифры, например 12345';
+      default:
+        return '';
+    }
+  };
+
+  const getValueIcon = () => {
+    switch (type) {
+      case 'domain':
+        return IconWorld;
+      case 'ipRange':
+        return IconNetwork;
+      case 'asn':
+        return IconHash;
+      default:
+        return IconHash;
+    }
+  };
+
+  const getTitle = () => {
+    switch (type) {
+      case 'domain':
+        return 'Добавить домен';
+      case 'ipRange':
+        return 'Добавить IP-диапазон';
+      case 'asn':
+        return 'Добавить ASN';
+      default:
+        return 'Добавить запись';
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!validate()) return;
+
+    const normalizedValue = type === 'domain' 
+      ? formData.value.trim().toLowerCase()
+      : formData.value.trim();
+    
+    const item = {
+      [type === 'domain' ? 'domain' : type === 'ipRange' ? 'ipRange' : 'asn']: normalizedValue,
+      community: String(formData.community).trim()
+    };
+
+    onSubmit?.(item);
+    onClose?.();
+  };
+
+  const ValueIcon = getValueIcon();
+
+  return (
+    <FormModal
+      show={open}
+      onClose={onClose}
+      onSubmit={handleSubmit}
+      title={getTitle()}
+      submitLabel="Добавить"
+      submitIcon={IconPlus}
+      loading={loading}
+      size="md"
+      centered
+    >
+      <FormField
+        label={getValueLabel()}
+        name="value"
+        type="text"
+        value={formData.value}
+        onChange={(v) => {
+          setFormData({ ...formData, value: v });
+          if (errors.value) setErrors({ ...errors, value: '' });
+        }}
+        onValidate={(v) => ({
+          valid: validators[type]?.(v) ?? false,
+          message: validators[type]?.(v) ? 'Корректный формат' : getValueError()
+        })}
+        placeholder={getValuePlaceholder()}
+        helpText={getValueHelp()}
+        disabled={loading}
+        autoFocus
+        icon={ValueIcon}
+      />
+
+      <div className="mb-3">
+        <label className="form-label">
+          Community
+          <span className="text-danger ms-1" aria-label="обязательное поле">*</span>
+        </label>
+        <div className="input-icon">
+          <span className="input-icon-addon">
+            <IconHash size={18} />
+          </span>
+          <CommunityAutocompleteInput
+            value={formData.community}
+            onChange={(v) => {
+              setFormData({ ...formData, community: v });
+              if (errors.community) setErrors({ ...errors, community: '' });
+            }}
+            communities={communities}
+            placeholder="# Начните вводить номер или имя"
+            className={`form-control${errors.community ? ' is-invalid' : isValidCommunity(formData.community) ? ' is-valid' : ''}`}
+            useShortValue={true}
+            disabled={loading}
+          />
+        </div>
+        {errors.community && (
+          <div className="invalid-feedback d-block">{errors.community}</div>
+        )}
+        {isValidCommunity(formData.community) && !errors.community && (
+          <div className="valid-feedback d-block">Корректный формат</div>
+        )}
+        {!errors.community && !isValidCommunity(formData.community) && (
+          <div className="form-text text-muted small">
+            Формат: N или N:N (например 65000:100)
+          </div>
+        )}
+      </div>
+
+      {(() => {
+        if (!formData.community) return null;
+        const match = communities.find(c => c.value === String(formData.community).trim());
+        if (!match) return null;
+        return (
+          <div className="alert alert-info alert-dismissible mt-2 mb-0" role="alert">
+            <div className="d-flex">
+              <div className="flex-grow-1">
+                <strong>{match.name || match.value}</strong>
+                {match.description && <div className="text-muted small mt-1">{match.description}</div>}
+                {match.tags && match.tags.length > 0 && (
+                  <div className="mt-2">
+                    {match.tags.map((tag, idx) => (
+                      <span key={idx} className="badge bg-blue-lt text-blue me-1">{tag}</span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+    </FormModal>
+  );
+}

frontend/src/components/BulkActionsBar.jsx

@@ -1,8 +1,10 @@
-import { IconTrash, IconEdit, IconDownload, IconX, IconChecks } from '@tabler/icons-react'
+import { IconTrash, IconEdit, IconDownload } from '@tabler/icons-react';
+import FloatingBulkActionsBar from './FloatingBulkActionsBar.jsx';
 
 /**
- * Панель массовых действий для таблиц
+ * Панель массовых действий для таблиц (всплывающая, как на скрине).
- * Показывается когда выбраны элементы
+ * Показывается когда выбраны элементы. Использует единый дизайн тёмной плавающей панели.
+ * «Выбрать все» остаётся в тулбаре/шапке таблицы (чекбокс).
  */
 function BulkActionsBar({
   selectedCount = 0,
@@ -12,109 +14,60 @@ function BulkActionsBar({
   onDelete = null,
   onEdit = null,
   onExport = null,
-  customActions = [], // [{icon: Icon, label, onClick, variant}]
+  customActions = [],
-  className = ''
+  className = '',
 }) {
-  if (selectedCount === 0) return null
+  const actions = [];
 
-  const allSelected = selectedCount === totalCount
+  if (onExport) {
+    actions.push({
+      type: 'button',
+      label: 'Экспорт',
+      icon: IconDownload,
+      onClick: onExport,
+      title: 'Экспортировать выбранное',
+    });
+  }
+
+  if (onEdit) {
+    actions.push({
+      type: 'button',
+      label: 'Изменить',
+      icon: IconEdit,
+      onClick: onEdit,
+      title: 'Редактировать выбранное',
+    });
+  }
+
+  customActions.forEach((action) => {
+    actions.push({
+      type: 'button',
+      label: action.label,
+      icon: action.icon,
+      onClick: action.onClick,
+      variant: action.variant === 'btn-outline-danger' || action.variant === 'danger' ? 'danger' : undefined,
+      title: action.title,
+    });
+  });
+
+  if (onDelete) {
+    actions.push({
+      type: 'button',
+      label: 'Удалить',
+      icon: IconTrash,
+      onClick: onDelete,
+      variant: 'danger',
+      title: 'Удалить выбранное',
+    });
+  }
 
   return (
-    <div className={`card mb-3 ${className}`} style={{ 
+    <FloatingBulkActionsBar
-      position: 'sticky', 
+      selectedCount={selectedCount}
-      top: '10px', 
+      onClearSelection={onDeselectAll}
-      zIndex: 10,
+      actions={actions}
-      boxShadow: '0 0.5rem 1rem rgba(0,0,0,.15)'
+    />
-    }}>
+  );
-      <div className="card-body py-2 px-3">
-        <div className="d-flex align-items-center justify-content-between">
-          {/* Левая часть: информация о выборе */}
-          <div className="d-flex align-items-center gap-3">
-            <div className="d-flex align-items-center">
-              <IconChecks size={20} className="text-blue me-2" />
-              <span className="fw-bold">
-                Выбрано: <span className="text-blue">{selectedCount}</span>
-              </span>
-            </div>
-
-            {/* Кнопка выбрать все / снять выбор */}
-            {!allSelected && totalCount > selectedCount && (
-              <button
-                className="btn btn-sm btn-outline-primary"
-                onClick={onSelectAll}
-              >
-                Выбрать все ({totalCount})
-              </button>
-            )}
-
-            <button
-              className="btn btn-sm btn-ghost-secondary"
-              onClick={onDeselectAll}
-            >
-              <IconX size={16} className="me-1" />
-              Снять выбор
-            </button>
-          </div>
-
-          {/* Правая часть: действия */}
-          <div className="d-flex align-items-center gap-2">
-            {/* Экспорт */}
-            {onExport && (
-              <button
-                className="btn btn-sm btn-outline-primary"
-                onClick={onExport}
-                title="Экспортировать выбранное"
-              >
-                <IconDownload size={16} className="me-1" />
-                Экспорт
-              </button>
-            )}
-
-            {/* Редактирование */}
-            {onEdit && (
-              <button
-                className="btn btn-sm btn-outline-primary"
-                onClick={onEdit}
-                title="Редактировать выбранное"
-              >
-                <IconEdit size={16} className="me-1" />
-                Изменить
-              </button>
-            )}
-
-            {/* Пользовательские действия */}
-            {customActions.map((action, idx) => {
-              const Icon = action.icon
-              return (
-                <button
-                  key={idx}
-                  className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
-                  onClick={action.onClick}
-                  title={action.title}
-                >
-                  {Icon && <Icon size={16} className="me-1" />}
-                  {action.label}
-                </button>
-              )
-            })}
-
-            {/* Удаление */}
-            {onDelete && (
-              <button
-                className="btn btn-sm btn-outline-danger"
-                onClick={onDelete}
-                title="Удалить выбранное"
-              >
-                <IconTrash size={16} className="me-1" />
-                Удалить ({selectedCount})
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
 }
 
-export default BulkActionsBar
+export default BulkActionsBar;
-

frontend/src/components/CommandPalette.jsx

@@ -10,7 +10,12 @@ import {
   IconDatabase,
   IconCreditCard,
   IconDownload,
-  IconKeyboard
+  IconKeyboard,
+  IconChartPie,
+  IconSettings,
+  IconClock,
+  IconClockPlay,
+  IconShield
 } from '@tabler/icons-react'
 
 /**
@@ -38,14 +43,20 @@ function CommandPalette() {
   // Список команд
   const commands = [
     { icon: IconHome, label: 'Главная', description: 'Панель управления', action: () => navigate('/dashboard'), keywords: ['главная', 'панель', 'dashboard'] },
+    { icon: IconChartPie, label: 'Расход трафика', description: 'Статистика по интерфейсам MikroTik', action: () => navigate('/traffic'), keywords: ['трафик', 'traffic', 'mikrotik', 'интерфейсы'] },
+    { icon: IconNetwork, label: 'Карта сети', description: 'Граф серверов и пинг между ними', action: () => navigate('/network-map'), keywords: ['карта', 'сеть', 'network', 'map', 'пинг', 'ping'] },
+    { icon: IconClock, label: 'Uptime Monitor', description: 'Мониторинг доступности по ping с выбранного роутера', action: () => navigate('/uptime-monitor'), keywords: ['uptime', 'мониторинг', 'доступность', 'ping', 'роутер'] },
+    { icon: IconClockPlay, label: 'Планировщик карты сети', description: 'Пинг и скорость по расписанию, логи', action: () => navigate('/scheduler'), keywords: ['планировщик', 'scheduler', 'карта', 'сеть', 'логи'] },
     { icon: IconWorld, label: 'Домены', description: 'Управление доменами', action: () => navigate('/domains'), keywords: ['домены', 'domains'] },
     { icon: IconNetwork, label: 'IP-диапазоны', description: 'Управление IP диапазонами', action: () => navigate('/ip-ranges'), keywords: ['ip', 'диапазоны', 'ranges'] },
     { icon: IconNetwork, label: 'ASN', description: 'Управление Autonomous Systems', action: () => navigate('/asns'), keywords: ['asn', 'as', 'autonomous'] },
     { icon: IconFilter, label: 'Community', description: 'Справочник BGP Community', action: () => navigate('/communities'), keywords: ['community', 'справочник'] },
     { icon: IconServer, label: 'Серверы', description: 'Управление серверами', action: () => navigate('/servers'), keywords: ['серверы', 'servers'] },
     { icon: IconFilter, label: 'Фильтры', description: 'Filter Manager', action: () => navigate('/filters'), keywords: ['фильтры', 'filters', 'mikrotik'] },
+    { icon: IconShield, label: 'Firewall', description: 'Списки блокировки ban и ban_counter с роутера', action: () => navigate('/firewall'), keywords: ['firewall', 'ban', 'address-list', 'блокировка', 'роутер'] },
     { icon: IconCreditCard, label: 'Биллинг', description: 'Управление биллингом', action: () => navigate('/billing'), keywords: ['биллинг', 'billing', 'оплата'] },
     { icon: IconDownload, label: 'Авто-URL', description: 'Генератор ссылок', action: () => navigate('/auto-urls'), keywords: ['url', 'ссылки', 'генератор'] },
+    { icon: IconSettings, label: 'Настройки интерфейса', description: 'WebSocket, DoH, пинг, PTR зона', action: () => navigate('/settings'), keywords: ['настройки', 'settings', 'интерфейс', 'doh', 'websocket'] },
   ]
 
   // Фильтрация команд по поисковому запросу

frontend/src/components/DataTable.jsx

@@ -34,6 +34,9 @@ import Tooltip from './Tooltip.jsx';
  *   - [{ icon: Component, label: string, onClick: (item) => void, variant?: string }]
  * @param {boolean} props.selectable - Включить чекбоксы выбора (default: true)
  * @param {number} props.skeletonRows - Количество строк скелетона (default: 10)
+ * @param {boolean} props.striped - Чередование фона строк (Tabler UX, default: true)
+ * @param {boolean} props.compact - Уменьшенные отступы ячеек (default: false)
+ * @param {boolean} props.flat - Таблица без карточной подложки: только горизонтальные разделители (default: false)
  */
 function DataTable({
   columns = [],
@@ -56,11 +59,14 @@ function DataTable({
   actions = [],
   selectable = true,
   skeletonRows = 10,
+  striped = true,
+  compact = false,
+  flat = false,
 }) {
   const hasActions = onEdit || onDelete || onCopy || actions.length > 0;
   const isEditing = (item) => inlineEdit && item[itemKey] === inlineEdit.editingKey;
   
-  // Рендер заголовка колонки
+  // Рендер заголовка колонки (col.title — подпись, col.tooltip — подсказка для UX)
   const renderColumnHeader = (col) => {
     const isSortable = col.sortable !== false && onSort;
     const isActive = sortField === col.key;
@@ -77,22 +83,27 @@ function DataTable({
       </div>
     );
     
+    const thProps = {
+      key: col.key,
+      scope: 'col',
+      style: col.width ? { width: col.width } : undefined,
+    };
+    
     if (isSortable) {
       return (
         <th
-          key={col.key}
+          {...thProps}
           className="cursor-pointer user-select-none"
           onClick={() => onSort(col.key)}
-          style={col.width ? { width: col.width } : undefined}
         >
-          {content}
+          {col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
         </th>
       );
     }
     
     return (
-      <th key={col.key} style={col.width ? { width: col.width } : undefined}>
+      <th {...thProps}>
-        {content}
+        {col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
       </th>
     );
   };
@@ -210,15 +221,21 @@ function DataTable({
   }
   
   const allSelected = items.length > 0 && items.every(i => selectedItems.has(i[itemKey]));
+  const tableClass = [
+    'table table-vcenter table-nowrap mb-0',
+    flat ? 'table-flat' : 'card-table',
+    !flat && striped && 'table-striped',
+    compact && 'table-sm',
+  ].filter(Boolean).join(' ');
 
   return (
     <>
       <div className="table-responsive">
-        <table className="table card-table table-vcenter table-nowrap mb-0">
+        <table className={tableClass} role="grid">
           <thead>
             <tr>
               {selectable && (
-                <th style={{ width: '40px' }}>
+                <th scope="col" style={{ width: '40px' }}>
                   <input
                     type="checkbox"
                     className="form-check-input"
@@ -229,7 +246,7 @@ function DataTable({
                 </th>
               )}
               {columns.map(renderColumnHeader)}
-              {hasActions && <th className="text-end">Действия</th>}
+              {hasActions && <th scope="col" className="text-end td-actions">Действия</th>}
             </tr>
           </thead>
           <tbody>
@@ -261,7 +278,7 @@ function DataTable({
                     </td>
                   ))}
                   {hasActions && (
-                    <td className="text-end">
+                    <td className="text-end td-actions">
                       {renderActions(item)}
                     </td>
                   )}

frontend/src/components/FloatingBulkActionsBar.jsx

@@ -0,0 +1,185 @@
+import { IconX } from '@tabler/icons-react';
+
+/**
+ * Всплывающая панель массовых действий в стиле со скрина:
+ * тёмная панель по центру снизу, счётчик "N выбрано", кнопки действий, закрыть.
+ * Используется на страницах типа Manager при выборе элементов.
+ *
+ * @param {number} selectedCount - количество выбранных элементов
+ * @param {() => void} onClearSelection - снять выделение (кнопка X)
+ * @param {Array<{ type: 'button', label: string, icon: React.ComponentType, onClick: () => void, variant?: 'danger', title?: string } | { type: 'dropdown', label: string, icon: React.ComponentType, items: Array<{ label: string, onClick: () => void }>, title?: string }>} actions - кнопки и выпадающие меню
+ */
+function FloatingBulkActionsBar({ selectedCount = 0, onClearSelection, actions = [] }) {
+  if (selectedCount === 0) return null;
+
+  return (
+    <div
+      className="floating-bulk-actions-bar"
+      style={{
+        position: 'fixed',
+        bottom: '20px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 1050,
+        maxWidth: '720px',
+        width: '100%',
+        padding: '0 12px',
+        boxSizing: 'border-box',
+      }}
+    >
+      <div
+        className="d-flex align-items-center justify-content-between gap-3 rounded-3 shadow-lg px-3 py-2"
+        style={{
+          animation: 'floatingBulkSlideUp 0.2s ease',
+          background: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
+          border: '1px solid rgba(255,255,255,0.1)',
+        }}
+      >
+        {/* Счётчик выбранных */}
+        <div className="d-flex align-items-center gap-2">
+          <span
+            className="rounded"
+            style={{
+              background: '#3b82f6',
+              color: '#fff',
+              padding: '6px 10px',
+              fontWeight: 600,
+              fontSize: '0.95rem',
+            }}
+          >
+            {selectedCount}
+          </span>
+          <span style={{ color: '#e2e8f0', fontWeight: 500 }}>выбрано</span>
+        </div>
+
+        {/* Действия */}
+        <div className="d-flex align-items-center gap-2">
+          {actions.map((action, idx) => {
+            if (action.type === 'dropdown') {
+              const Icon = action.icon;
+              return (
+                <div key={idx} className="dropdown">
+                  <button
+                    type="button"
+                    className="floating-bulk-btn dropdown-toggle"
+                    data-bs-toggle="dropdown"
+                    title={action.title}
+                  >
+                    {Icon && <Icon size={15} />}
+                    <span>{action.label}</span>
+                  </button>
+                  <div className="dropdown-menu dropdown-menu-dark">
+                    {action.items?.map((item, i) => (
+                      <button
+                        key={i}
+                        type="button"
+                        className="dropdown-item"
+                        onClick={() => item.onClick()}
+                      >
+                        {item.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              );
+            }
+            const Icon = action.icon;
+            const isDanger = action.variant === 'danger';
+            return (
+              <button
+                key={idx}
+                type="button"
+                className={`floating-bulk-btn ${isDanger ? 'floating-bulk-btn-danger' : ''}`}
+                onClick={action.onClick}
+                title={action.title}
+              >
+                {Icon && <Icon size={15} />}
+                <span>{action.label}</span>
+              </button>
+            );
+          })}
+
+          {actions.length > 0 && (
+            <div
+              style={{
+                width: 1,
+                height: 20,
+                background: 'rgba(255,255,255,0.2)',
+                margin: '0 4px',
+              }}
+            />
+          )}
+
+          <button
+            type="button"
+            className="floating-bulk-btn-close"
+            onClick={onClearSelection}
+            title="Снять выделение"
+            aria-label="Снять выделение"
+          >
+            <IconX size={16} />
+          </button>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes floatingBulkSlideUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .floating-bulk-btn {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 6px 12px;
+          border: none;
+          border-radius: 6px;
+          background: rgba(255, 255, 255, 0.1);
+          color: #e2e8f0;
+          font-size: 13px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+        .floating-bulk-btn:hover {
+          background: rgba(255, 255, 255, 0.2);
+          color: #fff;
+        }
+        .floating-bulk-btn-danger {
+          background: rgba(239, 68, 68, 0.2);
+          color: #fca5a5;
+        }
+        .floating-bulk-btn-danger:hover {
+          background: rgba(239, 68, 68, 0.4);
+          color: #fef2f2;
+        }
+        .floating-bulk-btn-close {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          padding: 0;
+          border: none;
+          border-radius: 6px;
+          background: rgba(255, 255, 255, 0.05);
+          color: #94a3b8;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+        .floating-bulk-btn-close:hover {
+          background: rgba(255, 255, 255, 0.15);
+          color: #fff;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default FloatingBulkActionsBar;

frontend/src/components/IconPicker.jsx

@@ -0,0 +1,105 @@
+import { useState, useMemo, useRef, useEffect } from 'react';
+import BRAND_ICONS, { getIconById } from '../lib/brandIcons.js';
+import { IconSearch } from '@tabler/icons-react';
+
+/**
+ * Выбор иконки бренда с поиском и предпросмотром.
+ * value — id иконки (например IconBrandGoogle), onChange(id) — при выборе.
+ */
+export default function IconPicker({ value, onChange, disabled = false, label = 'Иконка бренда' }) {
+  const [search, setSearch] = useState('');
+  const [open, setOpen] = useState(false);
+
+  const selected = getIconById(value);
+  const filtered = useMemo(() => {
+    const q = (search || '').trim().toLowerCase();
+    if (!q) return BRAND_ICONS;
+    return BRAND_ICONS.filter(
+      (item) =>
+        item.label.toLowerCase().includes(q) || item.id.toLowerCase().includes(q)
+    );
+  }, [search]);
+
+  const handleSelect = (item) => {
+    onChange?.(item.id);
+    setOpen(false);
+    setSearch('');
+  };
+
+  const panelRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target) && !e.target.closest('button[aria-expanded]')) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  return (
+    <div className="mb-2">
+      <label className="form-label small">{label}</label>
+      <div className="d-flex align-items-center gap-2 flex-wrap" ref={panelRef}>
+        <button
+          type="button"
+          className="btn btn-outline-secondary btn-sm d-flex align-items-center gap-2"
+          onClick={() => setOpen((v) => !v)}
+          disabled={disabled}
+          aria-expanded={open}
+          aria-haspopup="listbox"
+        >
+          <span className="avatar avatar-sm bg-primary-lt text-primary rounded d-flex align-items-center justify-content-center">
+            <selected.Icon size={18} stroke={1.5} />
+          </span>
+          <span>{selected.label}</span>
+        </button>
+        {open && (
+          <div className="border rounded p-2 shadow-sm bg-body" style={{ minWidth: 280, maxWidth: 360 }}>
+            <div className="input-group input-group-sm mb-2">
+              <span className="input-group-text">
+                <IconSearch size={14} />
+              </span>
+              <input
+                type="text"
+                className="form-control"
+                placeholder="Поиск по названию..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                autoFocus
+              />
+            </div>
+            <div
+              className="d-flex flex-wrap gap-1 overflow-auto"
+              style={{ maxHeight: 200 }}
+              role="listbox"
+            >
+              {filtered.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className={`btn btn-sm d-flex align-items-center justify-content-center rounded ${
+                    value === item.id ? 'btn-primary' : 'btn-outline-secondary'
+                  }`}
+                  style={{ width: 40, height: 40 }}
+                  onClick={() => handleSelect(item)}
+                  title={item.label}
+                  role="option"
+                  aria-selected={value === item.id}
+                >
+                  <item.Icon size={22} stroke={1.5} />
+                </button>
+              ))}
+            </div>
+            {filtered.length === 0 && (
+              <div className="small text-muted py-2">Ничего не найдено</div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { getIconById };

frontend/src/components/NotifyProvider.jsx

@@ -121,32 +121,51 @@ function iconByType(type) {
 
 function NotifyViewport({ items, onClose }) {
   return (
-    <div className="position-fixed top-0 end-0 p-3" style={{ zIndex: 1080, pointerEvents: 'none' }}>
+    <div className="toast-container toast-container-end notify-viewport" style={{ zIndex: 1079 }}>
-      <div className="d-flex flex-column gap-2 align-items-end">
       {items.map((n) => (
-          <div key={n.id} className={`alert alert-${colorByType(n.type)} alert-dismissible shadow-sm`} role="alert" style={{ minWidth: 320, pointerEvents: 'auto' }}>
+        <div
-            <div className="d-flex align-items-start">
+          key={n.id}
-              <div className="me-1 mt-1">{iconByType(n.type)}</div>
+          className="toast show toast-alert"
-              <div className="flex-grow-1">
+          role="alert"
+          aria-live="assertive"
+          aria-atomic="true"
+          style={{
+            minWidth: '320px',
+            maxWidth: '420px',
+            overflow: 'hidden',
+            borderRadius: 'var(--tblr-border-radius, 0.25rem)',
+            animation: 'slideInRight 0.3s ease-out forwards',
+          }}
+        >
+          <div className={`alert alert-${colorByType(n.type)} toast-alert-inner mb-0`}>
+            <div className="toast-header toast-alert-header">
+              <span className="toast-alert-icon me-2">{iconByType(n.type)}</span>
+              <strong className="me-auto">
+                {n.type === 'success' && 'Успех'}
+                {n.type === 'error' && 'Ошибка'}
+                {n.type === 'warning' && 'Внимание'}
+                {n.type === 'info' && 'Информация'}
+              </strong>
+              <button type="button" className="btn-close" aria-label="Закрыть" onClick={() => onClose(n.id)} />
+            </div>
+            <div className="toast-body">
+              <div className="alert-description">
                 {n.message}
+                {n.count > 1 && <span className="badge bg-white text-body border ms-2">×{n.count}</span>}
+              </div>
               {n.details && (
                 <details className="small mt-1">
                   <summary>Подробнее</summary>
-                    <pre className="mb-0 mt-1" style={{ whiteSpace: 'pre-wrap' }}>{typeof n.details === 'string' ? n.details : JSON.stringify(n.details, null, 2)}</pre>
+                  <pre className="mb-0 mt-1" style={{ whiteSpace: 'pre-wrap' }}>
+                    {typeof n.details === 'string' ? n.details : JSON.stringify(n.details, null, 2)}
+                  </pre>
                 </details>
               )}
-                {n.count > 1 && (
-                  <span className="badge bg-white text-body border ms-2">×{n.count}</span>
-                )}
             </div>
-              <button type="button" className="btn-close" aria-label="Close" onClick={() => onClose(n.id)}>
-                <IconX size={16} />
-              </button>
           </div>
         </div>
       ))}
     </div>
-    </div>
   );
 }
 

frontend/src/components/PageHeader.jsx

@@ -1,25 +1,38 @@
 import React from 'react'
 
-function PageHeader({ title, pretitle, actions, meta }) {
+/**
+ * Единый заголовок страницы в стиле Tabler UI.
+ * Используется на всех страницах для одинакового UX.
+ * Кнопки (actions) отображаются под названием страницы.
+ * @param {string} title - Заголовок страницы
+ * @param {React.ReactNode} [icon] - Иконка слева от заголовка (например, <IconServer />)
+ * @param {string} [pretitle] - Небольшая надпись над заголовком (page-pretitle)
+ * @param {React.ReactNode} [meta] - Подзаголовок или мета-информация под заголовком
+ * @param {React.ReactNode} [actions] - Кнопки/действия под названием страницы (btn-list, btn-group)
+ */
+function PageHeader({ title, icon, pretitle, actions, meta }) {
   return (
     <div className="page-header d-print-none mb-4">
-      {/* Верхняя строка: только заголовок */}
       <div className="row align-items-center">
         <div className="col">
-          <h2 className="page-title">{title}</h2>
           {pretitle && (
-            <div className="page-pretitle mt-1">{pretitle}</div>
+            <div className="page-pretitle">{pretitle}</div>
           )}
+          <h1 className="page-title d-flex align-items-center">
+            {icon && <span className="me-2 d-flex align-items-center">{icon}</span>}
+            {title}
+          </h1>
           {meta && (
             <div className="text-muted small mt-1">{meta}</div>
           )}
         </div>
       </div>
-      {/* Отдельная строка под заголовком: действия страницы */}
       {actions && (
-        <div className="mt-4 d-print-none">
+        <div className="row mt-2">
+          <div className="col d-print-none">
             {actions}
           </div>
+        </div>
       )}
     </div>
   )

frontend/src/components/PageHeaderActions.jsx

@@ -59,9 +59,13 @@ function PageHeaderActions({
           {(onImport || onExport) && placeholderBtn(160)}
           {onClear && placeholderBtn(130)}
           {onClearCommunities && placeholderBtn(180)}
+        </div>
+        {(onSave || onHistory) && (
+          <div className="header-actions-right ms-auto d-flex align-items-center gap-2">
             {onSave && placeholderBtn(140)}
             {onHistory && placeholderBtn(110)}
           </div>
+        )}
       </div>
     );
   }
@@ -140,6 +144,9 @@ function PageHeaderActions({
             <IconEraser className="me-1" /> Очистить community
           </button>
         )}
+      </div>
+      {(onSave || onHistory) && (
+        <div className="header-actions-right ms-auto d-flex align-items-center gap-2">
           {onSave && (
             <button className="btn btn-primary" type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
               {loading ? (
@@ -155,7 +162,7 @@ function PageHeaderActions({
             </button>
           )}
           {onHistory && (
-          <div className="btn-group">
+            <div className="btn-group d-none d-sm-inline-flex">
               <button className="btn btn-outline-secondary" type="button" onClick={onHistory} title="История версий">История</button>
               {lastModified && (
                 <button className="btn btn-outline-secondary" type="button" onClick={onHistory} title={`Последние изменения: ${formatDateTimeWithRelative(lastModified)}`}>
@@ -167,6 +174,7 @@ function PageHeaderActions({
             </div>
           )}
         </div>
+      )}
       {/* Компактное меню для маленьких экранов */}
       {secondaryButtons && (
         <div className="btn-group d-inline-flex d-sm-none">

frontend/src/components/S3MetaBar.jsx

@@ -7,19 +7,25 @@ function S3MetaBar({ keys = [], className = '' }) {
   const [meta, setMeta] = useState({});
   const [loading, setLoading] = useState(false);
 
-  const fetchMeta = async () => {
+  const fetchMeta = async (abortSignal) => {
     setLoading(true);
+    const opts = abortSignal ? { signal: abortSignal } : {};
     try {
-      const res = await api.get('/s3/last-modified');
+      const res = await api.get('/s3/last-modified', opts);
       setMeta(res.data || {});
-    } catch {
+    } catch (e) {
+      if (e?.name === 'CanceledError' || e?.name === 'AbortError' || e?.code === 'ERR_CANCELED') return;
       setMeta({});
     } finally {
       setLoading(false);
     }
   };
 
-  useEffect(() => { fetchMeta(); }, []);
+  useEffect(() => {
+    const controller = new AbortController();
+    fetchMeta(controller.signal);
+    return () => controller.abort();
+  }, []);
 
   const copyMeta = async (k) => {
     try {

frontend/src/components/SettingsModal.jsx

@@ -1,8 +1,9 @@
 import FormField from './FormField';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import api from '../lib/api.js';
 import { IconSettings, IconDeviceFloppy } from '@tabler/icons-react';
 import ErrorAlert from './ErrorAlert';
+import ServerAutocompleteInput from './ServerAutocompleteInput.jsx';
 
 /**
  * SettingsModal - модальное окно настроек интерфейса
@@ -18,8 +19,26 @@ export default function SettingsModal({ open, onClose }) {
   const [dohServer, setDohServer] = useState('');
   const [wsUrl, setWsUrl] = useState('');
   const [baseAS, setBaseAS] = useState('65001');
+  const [pingDomain, setPingDomain] = useState('');
+  const [pingCacheMinutes, setPingCacheMinutes] = useState('');
   const [ptrZoneReplaceFrom, setPtrZoneReplaceFrom] = useState('');
   const [ptrZoneReplaceTo, setPtrZoneReplaceTo] = useState('');
+  const [pingServicesSource, setPingServicesSource] = useState('web');
+  const [pingServicesServerId, setPingServicesServerId] = useState('');
+  const [pingServicesGatewayIp, setPingServicesGatewayIp] = useState('');
+  const [pingServicesCacheSeconds, setPingServicesCacheSeconds] = useState('');
+  const [pingServicesSchedulerEnabled, setPingServicesSchedulerEnabled] = useState(true);
+  const [pingServicesSchedulerIntervalMinutes, setPingServicesSchedulerIntervalMinutes] = useState('2');
+  const [serversList, setServersList] = useState([]);
+  const [interfaceSpeedTestProtocol, setInterfaceSpeedTestProtocol] = useState('tcp');
+  const [interfaceSpeedTestDurationSeconds, setInterfaceSpeedTestDurationSeconds] = useState('10');
+  const [interfaceSpeedTestCacheMinutes, setInterfaceSpeedTestCacheMinutes] = useState('');
+
+  const routerServersForPing = useMemo(() => {
+    return (serversList || []).filter(
+      (s) => s && (String(s.type || '').toLowerCase() === 'jumphost' || String(s.type || '').toLowerCase() === 'home')
+    );
+  }, [serversList]);
 
   useEffect(() => {
     if (!open) return;
@@ -29,16 +48,54 @@ export default function SettingsModal({ open, onClose }) {
 
     (async () => {
       try {
-        const res = await api.get('/ui-settings');
+        const [settingsRes, serversRes] = await Promise.all([
-        const data = res?.data || {};
+          api.get('/ui-settings'),
+          api.get('/servers').catch(() => ({ data: [] })),
+        ]);
+        const data = settingsRes?.data || {};
         setRawSettings(data);
         setDohServer(String(data?.dohServer || ''));
         setWsUrl(String(data?.wsUpdateUrl || ''));
         setBaseAS(String(data?.baseAS || '65001'));
+        setPingDomain(String(data?.pingDomain || '').trim());
+        setPingCacheMinutes(
+          data?.pingCacheMinutes != null ? String(data.pingCacheMinutes) : ''
+        );
         setPtrZoneReplaceFrom(String(data?.ptrZoneReplaceFrom || ''));
         setPtrZoneReplaceTo(String(data?.ptrZoneReplaceTo || ''));
-        const e = res?.headers?.etag || res?.headers?.ETag || '';
+        setPingServicesSource(String(data?.pingServicesSource || 'web').toLowerCase() === 'router' ? 'router' : 'web');
+        setPingServicesServerId(String(data?.pingServicesServerId || '').trim());
+        setPingServicesGatewayIp(String(data?.pingServicesGatewayIp || '').trim());
+        setPingServicesCacheSeconds(
+          data?.pingServicesCacheSeconds != null
+            ? String(data.pingServicesCacheSeconds)
+            : ''
+        );
+        setPingServicesSchedulerEnabled(data?.pingServicesSchedulerEnabled !== false);
+        setPingServicesSchedulerIntervalMinutes(
+          data?.pingServicesSchedulerIntervalMinutes != null
+            ? String(data.pingServicesSchedulerIntervalMinutes)
+            : '2'
+        );
+        setInterfaceSpeedTestProtocol(
+          String(data?.interfaceSpeedTestProtocol || 'tcp').toLowerCase() ===
+            'udp'
+            ? 'udp'
+            : 'tcp'
+        );
+        setInterfaceSpeedTestDurationSeconds(
+          data?.interfaceSpeedTestDurationSeconds != null
+            ? String(data.interfaceSpeedTestDurationSeconds)
+            : '5'
+        );
+        setInterfaceSpeedTestCacheMinutes(
+          data?.interfaceSpeedTestCacheMinutes != null
+            ? String(data.interfaceSpeedTestCacheMinutes)
+            : ''
+        );
+        const e = settingsRes?.headers?.etag || settingsRes?.headers?.ETag || '';
         setEtag(e ? String(e) : '');
+        setServersList(Array.isArray(serversRes?.data) ? serversRes.data : []);
       } catch (e) {
         setError('Не удалось загрузить настройки');
       } finally {
@@ -97,8 +154,32 @@ export default function SettingsModal({ open, onClose }) {
         dohServer: String(dohServer || '').trim(),
         wsUpdateUrl: String(wsUrl || '').trim(),
         baseAS: String(baseAS || '65001').trim(),
+        pingDomain: String(pingDomain || '').trim(),
+        pingCacheMinutes: Math.max(0, parseInt(pingCacheMinutes, 10) || 0),
         ptrZoneReplaceFrom: String(ptrZoneReplaceFrom || '').trim(),
         ptrZoneReplaceTo: String(ptrZoneReplaceTo || '').trim(),
+        pingServicesSource: pingServicesSource === 'router' ? 'router' : 'web',
+        pingServicesServerId: String(pingServicesServerId || '').trim(),
+        pingServicesGatewayIp: String(pingServicesGatewayIp || '').trim(),
+        pingServicesCacheSeconds: Math.max(
+          0,
+          parseInt(pingServicesCacheSeconds, 10) || 0
+        ),
+        pingServicesSchedulerEnabled: Boolean(pingServicesSchedulerEnabled),
+        pingServicesSchedulerIntervalMinutes: Math.max(
+          1,
+          Math.min(1440, parseInt(pingServicesSchedulerIntervalMinutes, 10) || 2)
+        ),
+        interfaceSpeedTestProtocol:
+          interfaceSpeedTestProtocol === 'udp' ? 'udp' : 'tcp',
+        interfaceSpeedTestDurationSeconds: Math.max(
+          1,
+          parseInt(interfaceSpeedTestDurationSeconds, 10) || 5
+        ),
+        interfaceSpeedTestCacheMinutes: Math.max(
+          0,
+          parseInt(interfaceSpeedTestCacheMinutes, 10) || 0
+        ),
       };
       const payload = { 
         settings: mergedSettings, 
@@ -198,6 +279,171 @@ export default function SettingsModal({ open, onClose }) {
               disabled={loading || saving}
             />
 
+            <FormField
+              label="Домен для пинга"
+              name="pingDomain"
+              type="text"
+              value={pingDomain}
+              onChange={setPingDomain}
+              placeholder="8.8.8.8 или ya.ru"
+              helpText="Домен или IP для проверки пинга через MikroTik (например, 8.8.8.8, ya.ru). Если не задан, используется значение по умолчанию."
+              disabled={loading || saving}
+            />
+
+            <FormField
+              label="Срок кеша пинга (мин)"
+              name="pingCacheMinutes"
+              type="number"
+              value={pingCacheMinutes}
+              onChange={setPingCacheMinutes}
+              placeholder="0"
+              helpText="0 — без кеша. При значении больше 0 результаты пинга кешируются в S3 на указанное количество минут."
+              disabled={loading || saving}
+              min={0}
+            />
+
+            <div className="mt-3 pt-3 border-top">
+              <h6 className="mb-2">Измерение скорости (интерфейсы)</h6>
+              <div className="mb-2">
+                <label className="form-label small">Протокол измерения</label>
+                <select
+                  className="form-select form-select-sm"
+                  value={interfaceSpeedTestProtocol}
+                  onChange={(e) =>
+                    setInterfaceSpeedTestProtocol(e.target.value)
+                  }
+                  disabled={loading || saving}
+                >
+                  <option value="tcp">TCP</option>
+                  <option value="udp">UDP</option>
+                </select>
+                <div className="form-text small">
+                  Используется как настройка по умолчанию для инструментов
+                  измерения скорости RouterOS.
+                </div>
+              </div>
+              <div className="row g-2">
+                <div className="col-md-6">
+                  <FormField
+                    label="Время замера (сек)"
+                    name="interfaceSpeedTestDurationSeconds"
+                    type="number"
+                    value={interfaceSpeedTestDurationSeconds}
+                    onChange={setInterfaceSpeedTestDurationSeconds}
+                    placeholder="5"
+                    helpText="Интервал, за который измеряется средняя скорость по интерфейсу."
+                    disabled={loading || saving}
+                    min={1}
+                    max={600}
+                  />
+                </div>
+                <div className="col-md-6">
+                  <FormField
+                    label="Кеш результата замера (мин)"
+                    name="interfaceSpeedTestCacheMinutes"
+                    type="number"
+                    value={interfaceSpeedTestCacheMinutes}
+                    onChange={setInterfaceSpeedTestCacheMinutes}
+                    placeholder="0"
+                    helpText="0 — без кеша. При значении больше 0 результаты замеров скорости по интерфейсу кешируются в S3."
+                    disabled={loading || saving}
+                    min={0}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-3 pt-3 border-top">
+              <h6 className="mb-2">Пинг сервисов на главной</h6>
+              <div className="mb-2">
+                <label className="form-label small">Источник пинга</label>
+                <select
+                  className="form-select form-select-sm"
+                  value={pingServicesSource}
+                  onChange={(e) => setPingServicesSource(e.target.value)}
+                  disabled={loading || saving}
+                >
+                  <option value="web">Веб (TCP с сервера приложения)</option>
+                  <option value="router">Роутер (RouterOS API)</option>
+                </select>
+                <div className="form-text small">
+                  «Веб» — задержка до 8.8.8.8, 1.1.1.1 и др. с сервера. «Роутер» — пинг через выбранный MikroTik (jumphost).
+                </div>
+              </div>
+              <div className="mb-2">
+                <FormField
+                  label="Время кеширования пингов (сек)"
+                  name="pingServicesCacheSeconds"
+                  type="number"
+                  value={pingServicesCacheSeconds}
+                  onChange={setPingServicesCacheSeconds}
+                  placeholder="0"
+                  helpText="0 — без кеша. Результаты пинга до Google, Cloudflare и др. будут кешироваться на указанное число секунд."
+                  disabled={loading || saving}
+                  min={0}
+                />
+              </div>
+              <div className="mb-2">
+                <div className="form-check form-switch mb-1">
+                  <input
+                    className="form-check-input"
+                    type="checkbox"
+                    id="modalPingServicesSchedulerEnabled"
+                    checked={pingServicesSchedulerEnabled}
+                    onChange={(e) => setPingServicesSchedulerEnabled(e.target.checked)}
+                    disabled={loading || saving}
+                  />
+                  <label className="form-check-label small" htmlFor="modalPingServicesSchedulerEnabled">
+                    Планировщик: обновлять кеш пингов по расписанию
+                  </label>
+                </div>
+                <FormField
+                  label="Интервал обновления (мин)"
+                  name="pingServicesSchedulerIntervalMinutes"
+                  type="number"
+                  value={pingServicesSchedulerIntervalMinutes}
+                  onChange={setPingServicesSchedulerIntervalMinutes}
+                  placeholder="2"
+                  helpText="Как часто обновлять кеш (1–1440 мин). По умолчанию 2."
+                  disabled={loading || saving}
+                  min={1}
+                  max={1440}
+                />
+              </div>
+              {pingServicesSource === 'router' && (
+                <div className="row g-2">
+                  <div className="col-md-6">
+                    <label className="form-label small">Домашний роутер</label>
+                    <div className={loading || saving ? 'opacity-75 pe-none' : ''}>
+                      <ServerAutocompleteInput
+                        value={pingServicesServerId}
+                        onChange={(v) => setPingServicesServerId(String(v || '').trim())}
+                        servers={routerServersForPing}
+                        placeholder="Выберите роутер (jumphost или входной)"
+                        className="form-control form-control-sm"
+                        maxSuggestions={10}
+                      />
+                    </div>
+                    <div className="form-text small">
+                      Выбор роутера с MikroTik API для пинга с главной. Пусто — первый jumphost из списка.
+                    </div>
+                  </div>
+                  <div className="col-md-6">
+                    <FormField
+                      label="IP шлюза (не обязательно)"
+                      name="pingServicesGatewayIp"
+                      type="text"
+                      value={pingServicesGatewayIp}
+                      onChange={setPingServicesGatewayIp}
+                      placeholder="IP шлюза"
+                      helpText="Не обязательно. Пусто — используется первый шлюз выбранного роутера."
+                      disabled={loading || saving}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+
             <div className="mt-4 pt-3 border-top">
               <h6 className="mb-3">Настройка PTR зоны</h6>
               <div className="row g-3">

frontend/src/components/TableSkeleton.jsx

@@ -1,7 +1,11 @@
 /**
  * Skeleton loader для таблиц с анимацией pulse
+ * @param {boolean} flat - без карточной подложки (table-flat)
  */
-export default function TableSkeleton({ rows = 10, cols = 3, hasCheckbox = false }) {
+export default function TableSkeleton({ rows = 10, cols = 3, hasCheckbox = false, flat = false }) {
+  const tableClass = flat
+    ? 'table table-flat table-vcenter table-nowrap mb-0'
+    : 'table card-table table-vcenter table-nowrap mb-0';
   const Row = () => (
     <tr>
       {hasCheckbox && (
@@ -18,7 +22,7 @@ export default function TableSkeleton({ rows = 10, cols = 3, hasCheckbox = false
   );
   return (
     <div className="table-responsive">
-      <table className="table card-table table-vcenter table-nowrap mb-0">
+      <table className={tableClass}>
         <thead>
           <tr>
             {hasCheckbox && <th style={{ width: '40px' }}></th>}
@@ -35,10 +39,13 @@ export default function TableSkeleton({ rows = 10, cols = 3, hasCheckbox = false
   );
 }
 
-export function TableEmpty({ cols = 3, children }) {
+export function TableEmpty({ cols = 3, flat = false, children }) {
+  const tableClass = flat
+    ? 'table table-flat table-vcenter table-nowrap mb-0'
+    : 'table card-table table-vcenter table-nowrap mb-0';
   return (
     <div className="table-responsive">
-      <table className="table card-table table-vcenter table-nowrap mb-0">
+      <table className={tableClass}>
         <tbody>
           <tr>
             <td colSpan={cols} className="text-center text-muted py-5">

frontend/src/components/ToastContainer.jsx

@@ -3,12 +3,12 @@ import {
   IconCheck, 
   IconX, 
   IconAlertTriangle, 
-  IconInfoCircle,
+  IconInfoCircle 
-  IconRefresh 
 } from '@tabler/icons-react'
 
 /**
- * Контекст для глобального управления toast уведомлениями
+ * Контекст для глобального управления toast уведомлениями.
+ * Тосты в стиле Tabler Alerts, всплывают справа как Tabler Toasts.
  */
 const ToastContext = createContext({
   success: () => {},
@@ -19,24 +19,29 @@ const ToastContext = createContext({
 
 export const useToast = () => useContext(ToastContext)
 
+const DEFAULT_TITLES = {
+  success: 'Выполнено успешно',
+  error: 'Произошла ошибка',
+  warning: 'Внимание',
+  info: 'Информация',
+}
+
 /**
- * Toast уведомление (отдельный элемент)
+ * Один toast: разметка Tabler (toast + toast-header + toast-body), стиль Tabler Alerts.
  */
 function Toast({ toast, onClose }) {
   const [isLeaving, setIsLeaving] = useState(false)
 
   useEffect(() => {
     if (toast.duration && toast.duration > 0) {
-      const timer = setTimeout(() => {
+      const timer = setTimeout(() => handleClose(), toast.duration)
-        handleClose()
-      }, toast.duration)
       return () => clearTimeout(timer)
     }
   }, [toast.duration])
 
   const handleClose = () => {
     setIsLeaving(true)
-    setTimeout(() => onClose(toast.id), 300) // анимация 300ms
+    setTimeout(() => onClose(toast.id), 300)
   }
 
   const getIcon = () => {
@@ -45,47 +50,53 @@ function Toast({ toast, onClose }) {
       case 'error': return <IconX size={20} />
       case 'warning': return <IconAlertTriangle size={20} />
       case 'info': return <IconInfoCircle size={20} />
-      default: return null
+      default: return <IconInfoCircle size={20} />
     }
   }
 
-  const getColorClass = () => {
+  const alertClass = {
-    switch (toast.type) {
+    success: 'alert-success',
-      case 'success': return 'alert-success'
+    error: 'alert-danger',
-      case 'error': return 'alert-danger'
+    warning: 'alert-warning',
-      case 'warning': return 'alert-warning'
+    info: 'alert-info',
-      case 'info': return 'alert-info'
+  }[toast.type] || 'alert-info'
-      default: return 'alert-info'
+
-    }
+  const title = toast.title ?? DEFAULT_TITLES[toast.type]
-  }
 
   return (
     <div
-      className={`alert ${getColorClass()} alert-dismissible fade ${isLeaving ? '' : 'show'}`}
+      className={`toast show toast-alert ${isLeaving ? 'toast-leaving' : ''}`}
       role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      data-toast-type={toast.type}
       style={{
-        minWidth: '300px',
+        minWidth: '320px',
-        maxWidth: '400px',
+        maxWidth: '420px',
-        boxShadow: '0 0.5rem 1rem rgba(0,0,0,.15)',
+        overflow: 'hidden',
-        animation: isLeaving ? 'slideOutRight 0.3s ease-out' : 'slideInRight 0.3s ease-out'
+        borderRadius: 'var(--tblr-border-radius, 0.25rem)',
+        animation: isLeaving ? 'slideOutRight 0.3s ease-out forwards' : 'slideInRight 0.3s ease-out forwards',
       }}
     >
-      <div className="d-flex align-items-start">
+      <div className={`alert ${alertClass} toast-alert-inner mb-0`}>
-        <div className="me-2 mt-1">
+        <div className="toast-header toast-alert-header">
-          {getIcon()}
+          <span className="toast-alert-icon me-2">{getIcon()}</span>
+          <strong className="me-auto">{title}</strong>
+          <button
+            type="button"
+            className="btn-close"
+            onClick={handleClose}
+            aria-label="Закрыть"
+          />
         </div>
-        <div className="flex-grow-1">
+        <div className="toast-body">
-          {toast.title && (
+          <div className="alert-description">{toast.message}</div>
-            <h4 className="alert-title">{toast.title}</h4>
-          )}
-          <div className="text-secondary">{toast.message}</div>
-          
-          {/* Действия */}
           {toast.actions && toast.actions.length > 0 && (
             <div className="btn-list mt-2">
               {toast.actions.map((action, idx) => (
                 <button
                   key={idx}
+                  type="button"
                   className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
                   onClick={() => {
                     action.onClick?.()
@@ -99,12 +110,6 @@ function Toast({ toast, onClose }) {
             </div>
           )}
         </div>
-        <button 
-          type="button" 
-          className="btn-close" 
-          onClick={handleClose}
-          aria-label="Close"
-        ></button>
       </div>
     </div>
   )
@@ -153,45 +158,72 @@ export function ToastContainer({ children }) {
     <ToastContext.Provider value={contextValue}>
       {children}
 
-      {/* Контейнер с toast'ами */}
+      {/* Контейнер тостов справа (как в Tabler) */}
-      <div
+      <div className="toast-container toast-container-end">
-        style={{
+        {toasts.map((t) => (
-          position: 'fixed',
+          <Toast key={t.id} toast={t} onClose={removeToast} />
-          bottom: '20px',
-          right: '20px',
-          zIndex: 9999,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '10px'
-        }}
-      >
-        {toasts.map(toast => (
-          <Toast key={toast.id} toast={toast} onClose={removeToast} />
         ))}
       </div>
 
-      {/* CSS анимации */}
+      {/* Стили: тосты в стиле Tabler Alerts, всплывают справа */}
       <style>{`
-        @keyframes slideInRight {
+        .toast-container-end {
-          from {
+          position: fixed;
-            transform: translateX(100%);
+          top: 1rem;
-            opacity: 0;
+          right: 1rem;
+          z-index: 9999;
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+          pointer-events: none;
         }
-          to {
+        .toast-container-end .toast {
-            transform: translateX(0);
+          pointer-events: auto;
-            opacity: 1;
         }
+        /* NotifyProvider тосты ниже, чтобы не перекрывать useToast */
+        .toast-container-end.notify-viewport {
+          top: 5rem;
         }
 
+        /* Toast в стиле Tabler Alert: колоночный layout, без дублирования отступов */
+        .toast-alert .toast-alert-inner {
+          display: block;
+          flex-direction: column;
+          padding: 0;
+          gap: 0;
+          border-radius: var(--tblr-border-radius, 0.25rem);
+          box-shadow: var(--tblr-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
+        }
+        .toast-alert .toast-alert-header {
+          display: flex;
+          align-items: center;
+          padding: 0.5rem 0.75rem;
+          background: transparent;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+          font-weight: 500;
+        }
+        .toast-alert .toast-alert-icon {
+          color: inherit;
+          flex-shrink: 0;
+        }
+        .toast-alert .toast-body {
+          padding: 0.75rem;
+        }
+        .toast-alert .toast-body .alert-description {
+          color: var(--tblr-secondary);
+        }
+        .toast-alert.alert-danger .toast-alert-header { border-bottom-color: rgba(0, 0, 0, 0.1); }
+        .toast-alert .btn-close {
+          margin-left: auto;
+        }
+
+        @keyframes slideInRight {
+          from { transform: translateX(100%); opacity: 0; }
+          to { transform: translateX(0); opacity: 1; }
+        }
         @keyframes slideOutRight {
-          from {
+          from { transform: translateX(0); opacity: 1; }
-            transform: translateX(0);
+          to { transform: translateX(100%); opacity: 0; }
-            opacity: 1;
-          }
-          to {
-            transform: translateX(100%);
-            opacity: 0;
-          }
         }
       `}</style>
     </ToastContext.Provider>

frontend/src/components/billing/BillingCard.jsx

@@ -168,9 +168,11 @@ export default function BillingCard({
 
           {/* Правая часть: действия */}
           <div className="d-flex align-items-center gap-2 px-3 border-start">
+            <div className="btn-group" role="group" aria-label="Действия с записью биллинга">
               <button 
                 className="btn btn-outline-success" 
                 title="Записать платёж" 
+                style={{ minWidth: '6.5rem' }}
                 onClick={(e) => { e.stopPropagation(); onAddPayment?.(item); }}
               >
                 <IconCreditCard size={16} className="me-1" />
@@ -179,18 +181,21 @@ export default function BillingCard({
               <button 
                 className="btn btn-outline-secondary" 
                 title="Редактировать" 
+                style={{ minWidth: '6.5rem' }}
                 onClick={(e) => { e.stopPropagation(); onEdit?.(item); }}
               >
                 <IconEdit size={16} className="me-1" />
                 Изменить
               </button>
               <button 
-              className="btn btn-outline-danger" 
+                className="btn btn-outline-danger d-flex align-items-center justify-content-center" 
                 title="Удалить" 
+                style={{ minWidth: '6.5rem' }}
                 onClick={(e) => { e.stopPropagation(); onDelete?.(item); }}
               >
                 <IconTrash size={16} />
               </button>
+            </div>
             <button 
               className="btn btn-ghost-secondary btn-icon ms-1" 
               onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }} 

frontend/src/components/server/ServerBulkActions.jsx

@@ -1,12 +1,11 @@
 import {
   IconTrash,
-  IconEdit,
   IconCopy,
   IconX,
   IconNetwork,
   IconDownload,
-  IconCheck
 } from '@tabler/icons-react';
+import FloatingBulkActionsBar from '../FloatingBulkActionsBar.jsx';
 
 export default function ServerBulkActions({
   selectedCount,
@@ -15,169 +14,48 @@ export default function ServerBulkActions({
   onBulkChangeTunnel,
   onBulkExport,
   onBulkCopyLinks,
-  tunnelTypes = ['GRE', 'IPSec', 'WireGuard', 'OpenVPN']
+  tunnelTypes = ['GRE', 'IPSec', 'WireGuard', 'OpenVPN'],
 }) {
-  if (selectedCount === 0) return null;
+  const actions = [
+    {
+      type: 'dropdown',
+      label: 'Туннель',
+      icon: IconNetwork,
+      title: 'Сменить тип туннеля',
+      items: tunnelTypes.map((tunnel) => ({
+        label: tunnel,
+        onClick: () => onBulkChangeTunnel(tunnel),
+      })),
+    },
+    {
+      type: 'button',
+      label: 'Ссылки',
+      icon: IconCopy,
+      onClick: onBulkCopyLinks,
+      title: 'Скопировать ссылки',
+    },
+    {
+      type: 'button',
+      label: 'Экспорт',
+      icon: IconDownload,
+      onClick: onBulkExport,
+      title: 'Экспорт',
+    },
+    {
+      type: 'button',
+      label: 'Удалить',
+      icon: IconTrash,
+      onClick: onBulkDelete,
+      variant: 'danger',
+      title: 'Удалить',
+    },
+  ];
 
   return (
-    <div
+    <FloatingBulkActionsBar
-      className="server-bulk-actions position-sticky rounded-3 shadow-lg mx-auto px-3 py-2"
+      selectedCount={selectedCount}
-      style={{
+      onClearSelection={onClearSelection}
-        bottom: '20px',
+      actions={actions}
-        zIndex: 1050,
+    />
-        maxWidth: '720px',
-        animation: 'slideUp 0.2s ease',
-        background: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
-        border: '1px solid rgba(255,255,255,0.1)'
-      }}
-    >
-      <div className="d-flex align-items-center justify-content-between gap-3">
-        {/* Счётчик выбранных */}
-        <div className="d-flex align-items-center gap-2">
-          <span 
-            className="badge fs-6"
-            style={{ 
-              background: '#3b82f6',
-              color: '#fff',
-              padding: '6px 10px'
-            }}
-          >
-            {selectedCount}
-          </span>
-          <span style={{ color: '#e2e8f0', fontWeight: 500 }}>выбрано</span>
-        </div>
-
-        {/* Действия */}
-        <div className="d-flex align-items-center gap-2">
-          {/* Смена типа туннеля */}
-          <div className="dropdown">
-            <button
-              className="bulk-btn dropdown-toggle"
-              type="button"
-              data-bs-toggle="dropdown"
-            >
-              <IconNetwork size={15} />
-              <span>Туннель</span>
-            </button>
-            <div className="dropdown-menu dropdown-menu-dark">
-              <div className="dropdown-header">Сменить тип туннеля</div>
-              {tunnelTypes.map(tunnel => (
-                <button
-                  key={tunnel}
-                  className="dropdown-item"
-                  onClick={() => onBulkChangeTunnel(tunnel)}
-                >
-                  {tunnel}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Копировать ссылки */}
-          <button
-            className="bulk-btn"
-            onClick={onBulkCopyLinks}
-            title="Скопировать ссылки"
-          >
-            <IconCopy size={15} />
-            <span>Ссылки</span>
-          </button>
-
-          {/* Экспорт */}
-          <button
-            className="bulk-btn"
-            onClick={onBulkExport}
-            title="Экспорт"
-          >
-            <IconDownload size={15} />
-            <span>Экспорт</span>
-          </button>
-
-          <div style={{ width: '1px', height: '20px', background: 'rgba(255,255,255,0.2)', margin: '0 4px' }} />
-
-          {/* Удалить */}
-          <button
-            className="bulk-btn bulk-btn-danger"
-            onClick={onBulkDelete}
-            title="Удалить"
-          >
-            <IconTrash size={15} />
-            <span>Удалить</span>
-          </button>
-
-          {/* Отменить выделение */}
-          <button
-            className="bulk-btn-close"
-            onClick={onClearSelection}
-            title="Снять выделение"
-          >
-            <IconX size={16} />
-          </button>
-        </div>
-      </div>
-
-      <style>{`
-        @keyframes slideUp {
-          from {
-            opacity: 0;
-            transform: translateY(20px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-        
-        .bulk-btn {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          padding: 6px 12px;
-          border: none;
-          border-radius: 6px;
-          background: rgba(255, 255, 255, 0.1);
-          color: #e2e8f0;
-          font-size: 13px;
-          font-weight: 500;
-          cursor: pointer;
-          transition: all 0.15s ease;
-        }
-        
-        .bulk-btn:hover {
-          background: rgba(255, 255, 255, 0.2);
-          color: #fff;
-        }
-        
-        .bulk-btn-danger {
-          background: rgba(239, 68, 68, 0.2);
-          color: #fca5a5;
-        }
-        
-        .bulk-btn-danger:hover {
-          background: rgba(239, 68, 68, 0.4);
-          color: #fef2f2;
-        }
-        
-        .bulk-btn-close {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 28px;
-          height: 28px;
-          padding: 0;
-          border: none;
-          border-radius: 6px;
-          background: rgba(255, 255, 255, 0.05);
-          color: #94a3b8;
-          cursor: pointer;
-          transition: all 0.15s ease;
-        }
-        
-        .bulk-btn-close:hover {
-          background: rgba(255, 255, 255, 0.15);
-          color: #fff;
-        }
-      `}</style>
-    </div>
   );
 }

frontend/src/components/server/ServerCard.jsx

@@ -169,38 +169,28 @@ export default function ServerCard({
           </div>
         </div>
 
-        {/* Расширенная информация */}
+        {/* Расширенная информация в стиле Tabler datagrid */}
         {expanded && (
-          <div className="border-top bg-light" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
+          <div className="border-top bg-light p-3" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
-            <div className="row g-0">
+            <div className="datagrid">
-              {/* IP адреса */}
+              <div className="datagrid-item">
-              <div className="col-md-6 p-3 border-end">
+                <div className="datagrid-title">IP</div>
-                <div className="text-muted small mb-2 fw-medium">
+                <div className="datagrid-content"><code className="small">{server.ip}</code></div>
-                  <IconWorld size={14} className="me-1" />
-                  Сетевые адреса
               </div>
-                <div className="row g-2">
+              <div className="datagrid-item">
-                  <div className="col-4">
+                <div className="datagrid-title">Внешний</div>
-                    <div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>IP</div>
+                <div className="datagrid-content"><code className="small">{server.extIp || '—'}</code></div>
-                    <code className="small">{server.ip}</code>
               </div>
-                  <div className="col-4">
+              <div className="datagrid-item">
-                    <div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Внешний</div>
+                <div className="datagrid-title">Внутренний</div>
-                    <code className="small">{server.extIp || '—'}</code>
+                <div className="datagrid-content"><code className="small">{server.internalIp || '—'}</code></div>
               </div>
-                  <div className="col-4">
+              <div className="datagrid-item">
-                    <div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Внутренний</div>
+                <div className="datagrid-title">
-                    <code className="small">{server.internalIp || '—'}</code>
-                  </div>
-                </div>
-              </div>
-
-              {/* Шлюзы */}
-              <div className="col-md-6 p-3">
-                <div className="text-muted small mb-2 fw-medium">
                   <IconServer size={14} className="me-1" />
                   Шлюзы ({server.gateways?.length || 0})
                 </div>
+                <div className="datagrid-content">
                   {server.gateways?.length > 0 ? (
                     <div className="d-flex flex-wrap gap-2">
                       {server.gateways.map((gw, idx) => (
@@ -221,6 +211,7 @@ export default function ServerCard({
                 </div>
               </div>
             </div>
+          </div>
         )}
       </div>
     </div>

frontend/src/components/server/ServerGroupCard.jsx

@@ -0,0 +1,243 @@
+import {
+  IconEdit,
+  IconTrash,
+  IconChevronDown,
+  IconChevronUp,
+  IconRouter,
+  IconCircleCheck,
+  IconNetwork,
+  IconCloud
+} from '@tabler/icons-react';
+import { useState } from 'react';
+
+function countryToFlag(isoCode) {
+  if (!isoCode) return '';
+  const codeMap = {
+    'SWE': 'SE', 'RUS': 'RU', 'USA': 'US', 'GER': 'DE', 'FIN': 'FI', 'NLD': 'NL'
+  };
+  const code = codeMap[isoCode?.toUpperCase()] || isoCode?.toUpperCase();
+  if (!code || code.length !== 2) return isoCode;
+  return code.replace(/./g, char =>
+    String.fromCodePoint(127397 + char.charCodeAt())
+  );
+}
+
+/**
+ * Карточка группы серверов в том же формате, что и одиночная ServerCard:
+ * слева бейдж HOME, центр — флаг, название, провайдер и DNS с тегами, справа кнопки.
+ */
+export default function ServerGroupCard({
+  groupKey,
+  servers,
+  selectedSet,
+  onSelect,
+  onSelectGroup,
+  onEdit,
+  onDelete
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const first = servers[0];
+  const title = groupKey || (first?.dns?.split('.')[0] || 'Группа');
+  const tunnel = first?.tunnel;
+  const wanCount = servers.length;
+  const anySelected = servers.some((s) => selectedSet.has(s.ip));
+  const allSelected = servers.length > 0 && servers.every((s) => selectedSet.has(s.ip));
+
+  const handleGroupSelect = () => {
+    if (onSelectGroup) {
+      onSelectGroup(servers, !allSelected);
+    } else {
+      servers.forEach((s) => {
+        const selected = selectedSet.has(s.ip);
+        if (allSelected && selected) onSelect?.(s);
+        if (!allSelected && !selected) onSelect?.(s);
+      });
+    }
+  };
+
+  return (
+    <div
+      className={`server-group-card card mb-2 ${anySelected ? 'border-primary' : ''}`}
+      style={{
+        borderRadius: '12px',
+        borderWidth: anySelected ? '2px' : '1px',
+        transition: 'all 0.15s ease',
+        boxShadow: anySelected ? '0 0 0 3px rgba(32, 107, 196, 0.15)' : 'none'
+      }}
+    >
+      <div className="card-body p-0">
+        {/* Основная строка — как у ServerCard */}
+        <div className="d-flex align-items-stretch">
+          {/* Левая часть: бейдж HOME */}
+          <div
+            className="d-flex align-items-center justify-content-center px-3 bg-green-lt"
+            style={{
+              minWidth: '80px',
+              borderTopLeftRadius: anySelected ? '10px' : '11px',
+              borderBottomLeftRadius: expanded ? '0' : (anySelected ? '10px' : '11px'),
+              cursor: 'pointer'
+            }}
+            onClick={handleGroupSelect}
+          >
+            <div className="text-center">
+              <div className="mb-1">
+                {allSelected ? (
+                  <IconCircleCheck size={20} className="text-green" />
+                ) : (
+                  <IconRouter size={20} className="text-green" />
+                )}
+              </div>
+              <div className="fw-bold text-green" style={{ fontSize: '0.65rem', letterSpacing: '0.5px' }}>
+                HOME
+              </div>
+            </div>
+          </div>
+
+          {/* Центр: в свёрнутом виде — все провайдеры и домены, чтобы было однозначно */}
+          <div
+            className="flex-grow-1 py-2 px-3"
+            style={{ cursor: 'pointer' }}
+            onClick={() => setExpanded(!expanded)}
+          >
+            <div className="d-flex align-items-center mb-1">
+              <span className="me-2" style={{ fontSize: '1.25rem' }}>{countryToFlag(first?.country)}</span>
+              <div>
+                <span className="fw-semibold">{title}</span>
+                <span className="text-muted ms-2">· мультиван</span>
+              </div>
+              <span className="badge bg-success-lt text-success ms-auto">
+                {wanCount} WAN
+              </span>
+            </div>
+            <div className="d-flex flex-wrap align-items-center gap-2">
+              <span className="text-muted small">
+                {servers.map((s) => s.dns?.split('.')[0] || s.ip).join(', ')}
+              </span>
+              <span className="text-muted small">—</span>
+              {servers.map((s, i) => (
+                <code key={s.id || s.ip} className="text-muted" style={{ fontSize: '0.75rem' }}>
+                  {s.dns || s.ip}{i < servers.length - 1 ? ' · ' : ''}
+                </code>
+              ))}
+              {tunnel && (
+                <span className="badge bg-secondary-lt text-secondary">
+                  <IconNetwork size={12} className="me-1" />
+                  {tunnel}
+                </span>
+              )}
+              <span className="badge bg-green-lt text-green">
+                <IconCloud size={12} className="me-1" />
+                {wanCount}
+              </span>
+            </div>
+          </div>
+
+          {/* Правая часть: кнопки как у необъединённой карточки */}
+          <div className="d-flex align-items-center gap-2 px-3 border-start">
+            <button
+              className="btn btn-outline-secondary"
+              title="Редактировать"
+              onClick={(e) => { e.stopPropagation(); onEdit?.(first); }}
+            >
+              <IconEdit size={16} className="me-1" />
+              Изменить
+            </button>
+            <button
+              className="btn btn-outline-danger"
+              title="Удалить"
+              onClick={(e) => { e.stopPropagation(); onDelete?.(first); }}
+            >
+              <IconTrash size={16} className="me-1" />
+              Удалить
+            </button>
+            <button
+              className="btn btn-ghost-secondary btn-icon ms-1"
+              onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}
+              title={expanded ? 'Свернуть' : 'Подробнее'}
+            >
+              {expanded ? <IconChevronUp size={18} /> : <IconChevronDown size={18} />}
+            </button>
+          </div>
+        </div>
+
+        {/* Развёрнутый список WAN: визуально отделённый блок, у каждой строки — бейдж HOME */}
+        {expanded && (
+          <div
+            className="border-top border-start border-3 border-green bg-green-lt"
+            style={{
+              borderBottomLeftRadius: '7px',
+              borderBottomRightRadius: '7px',
+              borderLeftColor: 'var(--tblr-green)',
+              backgroundColor: 'rgba(34, 197, 94, 0.06)'
+            }}
+          >
+            <div className="small text-muted px-3 py-1 border-bottom bg-green-lt" style={{ fontSize: '0.7rem' }}>
+              WAN-подключения группы
+            </div>
+            <div className="p-2">
+              {servers.map((server) => {
+                const isSelected = selectedSet.has(server.ip);
+                const serverName = server.dns?.split('.')[0] || server.ip;
+                return (
+                  <div
+                    key={server.id || server.ip}
+                    className={`d-flex align-items-stretch rounded mb-1 overflow-hidden ${isSelected ? 'bg-primary-lt' : 'bg-white'}`}
+                    style={{ boxShadow: '0 0 0 1px rgba(0,0,0,0.06)' }}
+                  >
+                    {/* Бейдж HOME — клик как у обычной карточки, без явной галочки */}
+                    <div
+                      className="d-flex align-items-center justify-content-center bg-green-lt text-green px-2"
+                      style={{
+                        minWidth: '52px',
+                        fontSize: '0.6rem',
+                        fontWeight: 700,
+                        letterSpacing: '0.5px',
+                        cursor: 'pointer'
+                      }}
+                      onClick={() => onSelect?.(server)}
+                      title={isSelected ? 'Снять выбор' : 'Выбрать'}
+                    >
+                      {isSelected ? (
+                        <IconCircleCheck size={14} className="me-1" />
+                      ) : (
+                        <IconRouter size={14} className="me-1" />
+                      )}
+                      HOME
+                    </div>
+                    <div className="d-flex align-items-center flex-grow-1 py-2 px-2 min-w-0">
+                      <span className="me-2 flex-shrink-0" style={{ fontSize: '1.1rem' }}>{countryToFlag(server.country)}</span>
+                      <div className="min-w-0">
+                        <span className="fw-medium">{serverName}</span>
+                        <span className="text-muted ms-2 small">{server.dns || server.ip}</span>
+                      </div>
+                    </div>
+                    <div className="d-flex align-items-center gap-2 px-3 border-start">
+                      <button
+                        type="button"
+                        className="btn btn-outline-secondary"
+                        title="Редактировать"
+                        onClick={(e) => { e.stopPropagation(); onEdit?.(server); }}
+                      >
+                        <IconEdit size={16} className="me-1" />
+                        Изменить
+                      </button>
+                      <button
+                        type="button"
+                        className="btn btn-outline-danger"
+                        title="Удалить"
+                        onClick={(e) => { e.stopPropagation(); onDelete?.(server); }}
+                      >
+                        <IconTrash size={16} className="me-1" />
+                        Удалить
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/server/ServerModal.jsx

@@ -11,20 +11,8 @@ import {
 } from '../../utils/serverUtils.js';
 
 /**
- * Списки стран и провайдеров
+ * Список провайдеров
  */
-const COUNTRY_OPTIONS = [
-  { value: '', label: 'Выберите страну', disabled: true },
-  { value: 'RU', label: 'Россия (RU)' },
-  { value: 'SWE', label: 'Швеция (SWE)' },
-  { value: 'FI', label: 'Финляндия (FI)' },
-  { value: 'US', label: 'США (US)' },
-  { value: 'DE', label: 'Германия (DE)' },
-  { value: 'NL', label: 'Нидерланды (NL)' },
-  { value: 'SE', label: 'Швеция (SE)' },
-  { value: 'SG', label: 'Сингапур (SG)' },
-];
-
 const PROVIDER_OPTIONS = [
   { value: '', label: 'Выберите провайдера', disabled: true },
   { value: 'Yandex', label: 'Yandex Cloud' },
@@ -154,53 +142,6 @@ function ServerModal({ show, mode = 'add', server, onSave, onClose, error: exter
     setLocalServer(prev => ({ ...prev, [field]: value }));
   };
 
-  /**
-   * Обработчики для gateways
-   */
-  const handleGatewayChange = (idx, field, value) => {
-    setLocalServer(prev => {
-      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
-      const updatedGateways = currentGateways.map((gw, i) => 
-        i === idx ? { ...gw, [field]: value } : gw
-      );
-      return { ...prev, gateways: updatedGateways };
-    });
-  };
-
-  const handlePrimaryChange = (idx, checked) => {
-    setLocalServer(prev => {
-      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
-      const updatedGateways = currentGateways.map((gw, i) => ({
-        ...gw,
-        primary: i === idx ? checked : false
-      }));
-      if (!updatedGateways.some(g => g.primary) && updatedGateways.length > 0) {
-        updatedGateways[idx].primary = true;
-      }
-      return { ...prev, gateways: updatedGateways };
-    });
-  };
-
-  const handleAddGateway = () => {
-    setLocalServer(prev => {
-      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
-      const newGw = makeGateway({ primary: currentGateways.length === 0 });
-      return { ...prev, gateways: [...currentGateways, newGw] };
-    });
-  };
-
-  const handleRemoveGateway = (idx) => {
-    setLocalServer(prev => {
-      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
-      if (currentGateways.length <= 1) return prev;
-      const updatedGateways = currentGateways.filter((_, i) => i !== idx);
-      if (!updatedGateways.some(g => g.primary) && updatedGateways.length > 0) {
-        updatedGateways[0].primary = true;
-      }
-      return { ...prev, gateways: updatedGateways };
-    });
-  };
-
   /**
    * Валидация и сохранение
    */
@@ -236,14 +177,13 @@ function ServerModal({ show, mode = 'add', server, onSave, onClose, error: exter
       return;
     }
 
-    // Валидация gateways для jumphost/exit
+    // Шлюзы для jumphost/exit задаются в другом месте (network-config); при сохранении передаём существующие или один по умолчанию
     const needsGws = NEEDS_GATEWAYS(localServer.type);
     let finalGateways = [];
     if (needsGws) {
       finalGateways = normalizeGateways(localServer.gateways, localServer.gateway || localServer.dns || localServer.ip);
       if (finalGateways.length === 0) {
-        setInternalError('Добавьте хотя бы один шлюз');
+        finalGateways = [makeGateway({ primary: true, name: localServer.dns?.split('.')[0] || 'main' })];
-        return;
       }
     }
 
@@ -256,9 +196,6 @@ function ServerModal({ show, mode = 'add', server, onSave, onClose, error: exter
     onSave && onSave(serverToSave);
   };
 
-  const currentGateways = Array.isArray(localServer.gateways) ? localServer.gateways : [];
-  const showGateways = NEEDS_GATEWAYS(localServer.type);
-
   return (
     <div className="modal" tabIndex="-1" ref={modalRef}>
       <div className="modal-dialog modal-lg">
@@ -367,26 +304,24 @@ function ServerModal({ show, mode = 'add', server, onSave, onClose, error: exter
                   />
                 </div>
 
-                {/* Страна */}
+                {/* Страна — 2-буквенный код как в интерфейсах */}
                 <div className="col-md-6">
                   <label className="form-label required">Страна</label>
                   <div className="input-icon">
                     <span className="input-icon-addon">
                       <IconMapPin size={16} />
                     </span>
-                    <select
+                    <input
-                      className="form-select ps-8"
+                      type="text"
+                      className="form-control ps-8"
                       value={localServer.country || ''}
-                      onChange={(e) => handleFieldChange('country', e.target.value)}
+                      onChange={(e) => handleFieldChange('country', e.target.value.toUpperCase().slice(0, 2))}
+                      placeholder="RU, SE, DE…"
+                      maxLength={2}
                       required
-                    >
+                    />
-                      {COUNTRY_OPTIONS.map((opt) => (
-                        <option key={opt.value} value={opt.value} disabled={opt.disabled}>
-                          {opt.label}
-                        </option>
-                      ))}
-                    </select>
                   </div>
+                  <div className="form-text">2-буквенный код страны (ISO 3166-1 alpha-2)</div>
                 </div>
 
                 {/* Провайдер */}
@@ -455,118 +390,32 @@ function ServerModal({ show, mode = 'add', server, onSave, onClose, error: exter
                   </div>
                 )}
 
-                {/* Основной шлюз (текстовое поле для совместимости) */}
+                {/* Группа объединения — для домашнего роутера с мультиваном: один ключ у нескольких записей = одна карточка в списке */}
+                {localServer.type === 'home' && (
                   <div className="col-12">
                     <label className="form-label">
-                    Основной шлюз <span className="text-muted">(устаревшее поле)</span>
+                      Группа (объединение в списке)
                     </label>
                     <input
                       type="text"
                       className="form-control"
-                    value={localServer.gateway || ''}
+                      value={localServer.groupKey || ''}
-                    onChange={(e) => handleFieldChange('gateway', e.target.value)}
+                      onChange={(e) => {
-                    placeholder="Cloudflare, Hetzner и т.д."
+                      const v = e.target.value.trim();
+                      handleFieldChange('groupKey', v || '');
+                    }}
+                      placeholder="Например: home-multivan — две записи с одним ключом отобразятся как один роутер"
                     />
                     <div className="form-text">
-                    Используйте секцию "Шлюзы" ниже для более детальной настройки
+                      Укажите одинаковый ключ у обоих WAN-записей одного роутера, чтобы в разделе «Серверы» они отображались одной карточкой. ID и привязки (интерфейсы, фильтры) не меняются.
-                  </div>
-                </div>
-              </div>
-
-              {/* Секция шлюзов */}
-              {showGateways && (
-                <div className="mt-4">
-                  <div className="d-flex align-items-center justify-content-between mb-2">
-                    <label className="form-label mb-0">
-                      Шлюзы ({currentGateways.length})
-                    </label>
-                    <button
-                      type="button"
-                      className="btn btn-outline-primary btn-sm"
-                      onClick={handleAddGateway}
-                    >
-                      <IconPlus size={14} className="me-1" />
-                      Добавить шлюз
-                    </button>
-                  </div>
-                  
-                  <div className="list-group list-group-flush border rounded">
-                    {currentGateways.map((gw, idx) => (
-                      <div key={gw.id || `gw-${idx}`} className="list-group-item">
-                        <div className="row g-2 align-items-end">
-                          <div className="col-12 col-md-3">
-                            <label className="form-label small mb-1">Имя *</label>
-                            <input
-                              type="text"
-                              className="form-control form-control-sm"
-                              value={gw.name || ''}
-                              onChange={(e) => handleGatewayChange(idx, 'name', e.target.value)}
-                              placeholder="GW-MSK"
-                              required
-                            />
-                          </div>
-                          <div className="col-12 col-md-3">
-                            <label className="form-label small mb-1">IP</label>
-                            <input
-                              type="text"
-                              className="form-control form-control-sm"
-                              value={gw.ip || ''}
-                              onChange={(e) => handleGatewayChange(idx, 'ip', e.target.value)}
-                              placeholder="10.0.0.1"
-                            />
-                          </div>
-                          <div className="col-12 col-md-3">
-                            <label className="form-label small mb-1">Комментарий</label>
-                            <input
-                              type="text"
-                              className="form-control form-control-sm"
-                              value={gw.comment || ''}
-                              onChange={(e) => handleGatewayChange(idx, 'comment', e.target.value)}
-                              placeholder="Описание"
-                            />
-                          </div>
-                          <div className="col-6 col-md-2">
-                            <div className="form-check form-switch">
-                              <input
-                                className="form-check-input"
-                                type="checkbox"
-                                checked={!!gw.primary}
-                                onChange={(e) => handlePrimaryChange(idx, e.target.checked)}
-                                id={`primary-${gw.id || idx}`}
-                              />
-                              <label className="form-check-label small" htmlFor={`primary-${gw.id || idx}`}>
-                                Основной
-                              </label>
-                            </div>
-                          </div>
-                          <div className="col-6 col-md-1 text-end">
-                            {currentGateways.length > 1 && (
-                              <button
-                                type="button"
-                                className="btn btn-ghost-danger btn-icon btn-sm"
-                                onClick={() => handleRemoveGateway(idx)}
-                                title="Удалить шлюз"
-                              >
-                                <IconTrash size={14} />
-                              </button>
-                            )}
-                          </div>
-                        </div>
-                        <div className="text-muted small mt-1">
-                          {gw.primary ? 'Основной шлюз' : 'Резервный шлюз'}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                  
-                  <div className="form-text mt-2">
-                    Для типов jumphost/exit должен быть минимум один шлюз с признаком "Основной"
                     </div>
                   </div>
                 )}
 
-              {/* MikroTik — только для jumphost */}
+              </div>
-              {localServer.type === 'jumphost' && (
+
+              {/* MikroTik RouterOS API — для jumphost и домашних (входных) роутеров */}
+              {(localServer.type === 'jumphost' || localServer.type === 'home') && (
                 <div className="mt-4 pt-3 border-top">
                   <label className="form-label d-flex align-items-center gap-2">
                     <IconRouter size={18} />

frontend/src/components/server/ServerSidebar.jsx

@@ -6,28 +6,62 @@ import {
   IconNetwork,
   IconChevronDown,
   IconChevronRight,
-  IconX,
-  IconSearch,
   IconFilter,
-  IconDatabase
+  IconSearch,
+  IconDatabase,
+  IconX
 } from '@tabler/icons-react';
 
-// Преобразование кода страны в emoji-флаг
 function countryToFlag(isoCode) {
   if (!isoCode) return '';
   const codeMap = {
-    'SWE': 'SE',
+    SWE: 'SE',
-    'RUS': 'RU', 
+    RUS: 'RU',
-    'USA': 'US',
+    USA: 'US',
-    'GER': 'DE',
+    GER: 'DE',
-    'FIN': 'FI',
+    FIN: 'FI',
-    'NLD': 'NL'
+    NLD: 'NL'
   };
   const code = codeMap[isoCode?.toUpperCase()] || isoCode?.toUpperCase();
   if (!code || code.length !== 2) return isoCode;
-  return code
+  return code.replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt()));
-    .replace(/./g, char =>
+}
-      String.fromCodePoint(127397 + char.charCodeAt())
+
+function FilterSection({ title, icon: Icon, iconColor, expanded, onToggle, children }) {
+  return (
+    <div className="filter-section border-bottom">
+      <button
+        type="button"
+        className="list-group-header d-flex align-items-center justify-content-between w-100 border-0 bg-transparent py-2 px-3 text-start"
+        onClick={onToggle}
+        aria-expanded={expanded}
+      >
+        <span className="d-flex align-items-center">
+          <Icon size={16} className={`me-2 ${iconColor || 'text-muted'}`} />
+          <span>{title}</span>
+        </span>
+        {expanded ? <IconChevronDown size={16} className="text-muted" /> : <IconChevronRight size={16} className="text-muted" />}
+      </button>
+      {expanded && <div className="list-group list-group-flush list-group-transparent">{children}</div>}
+    </div>
+  );
+}
+
+function FilterItem({ label, count, active, onClick, leftAddon }) {
+  return (
+    <button
+      type="button"
+      className={`list-group-item list-group-item-action d-flex align-items-center justify-content-between py-2 px-3 text-start ${active ? 'active' : ''}`}
+      onClick={onClick}
+    >
+      <span className="d-flex align-items-center min-w-0 flex-grow-1" style={{ overflow: 'hidden' }}>
+        {leftAddon}
+        <span className="text-break" style={{ wordBreak: 'break-word' }}>{label}</span>
+      </span>
+      <span className={`badge ms-2 flex-shrink-0 ${active ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}>
+        {count}
+      </span>
+    </button>
   );
 }
 
@@ -37,7 +71,9 @@ export default function ServerSidebar({
   onFiltersChange,
   onSearch,
   searchTerm = '',
-  onReset
+  onReset,
+  /** В режиме true рендерится только контент без обёртки card (для использования внутри offcanvas) */
+  embedded = false
 }) {
   const [expandedSections, setExpandedSections] = useState({
     country: true,
@@ -46,380 +82,198 @@ export default function ServerSidebar({
     tunnel: false
   });
 
-  // Подсчёт серверов по категориям
   const stats = useMemo(() => {
     const byCountry = {};
     const byProvider = {};
     const byType = {};
     const byTunnel = {};
-
     servers.forEach(srv => {
       byCountry[srv.country] = (byCountry[srv.country] || 0) + 1;
       byProvider[srv.provider] = (byProvider[srv.provider] || 0) + 1;
       byType[srv.type] = (byType[srv.type] || 0) + 1;
       byTunnel[srv.tunnel] = (byTunnel[srv.tunnel] || 0) + 1;
     });
-
     return { byCountry, byProvider, byType, byTunnel };
   }, [servers]);
 
-  const toggleSection = (section) => {
+  const toggleSection = section => {
-    setExpandedSections(prev => ({
+    setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }));
-      ...prev,
-      [section]: !prev[section]
-    }));
   };
 
   const handleFilterClick = (category, value) => {
-    const currentValue = filters[category];
+    const current = filters[category];
-    const newValue = currentValue === value ? '' : value;
+    onFiltersChange({ ...filters, [category]: current === value ? '' : value });
-    onFiltersChange({ ...filters, [category]: newValue });
   };
 
   const activeFiltersCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0);
+  const typeLabels = { jumphost: 'Jumphost', exit: 'Выходная нода' };
 
-  const typeLabels = {
+  const content = (
-    'jumphost': 'Jumphost',
+    <>
-    'exit': 'Выходная нода'
+      {!embedded && (
-  };
+        <div className="card-header py-3 d-flex align-items-center justify-content-between">
-
-  return (
-    <div 
-      className="server-sidebar d-flex flex-column"
-      style={{
-        width: '260px',
-        minWidth: '260px',
-        background: '#fff',
-        borderRadius: '12px',
-        boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
-        height: 'fit-content',
-        maxHeight: 'calc(100vh - 200px)',
-        overflow: 'hidden'
-      }}
-    >
-      {/* Заголовок */}
-      <div 
-        className="d-flex align-items-center justify-content-between px-3 py-3"
-        style={{ borderBottom: '1px solid rgba(0,0,0,0.06)' }}
-      >
           <div className="d-flex align-items-center">
             <IconFilter size={18} className="text-primary me-2" />
             <span className="fw-semibold">Фильтры</span>
             {activeFiltersCount > 0 && (
-            <span 
+              <span className="badge bg-primary-lt text-primary ms-2">{activeFiltersCount}</span>
-              className="badge bg-primary ms-2"
-              style={{ fontSize: '0.7rem', padding: '3px 6px' }}
-            >
-              {activeFiltersCount}
-            </span>
             )}
           </div>
           {activeFiltersCount > 0 && (
             <button
+              type="button"
               className="btn btn-ghost-secondary btn-icon btn-sm"
               onClick={onReset}
-            title="Сбросить"
+              title="Сбросить фильтры"
-            style={{ width: 28, height: 28 }}
+              aria-label="Сбросить фильтры"
             >
-            <IconX size={14} />
+              <IconX size={16} />
             </button>
           )}
         </div>
+      )}
 
-      {/* Поиск */}
+      <div className={embedded ? 'py-2' : 'card-body py-2 border-bottom'}>
-      <div className="px-3 py-2" style={{ borderBottom: '1px solid rgba(0,0,0,0.06)' }}>
         <div className="input-icon">
           <span className="input-icon-addon">
-            <IconSearch size={14} className="text-muted" />
+            <IconSearch size={16} className="text-muted" />
           </span>
           <input
             type="text"
             className="form-control form-control-sm"
             placeholder="Поиск..."
             value={searchTerm}
-            onChange={(e) => onSearch(e.target.value)}
+            onChange={e => onSearch(e.target.value)}
-            style={{ 
+            aria-label="Поиск серверов"
-              background: 'rgba(0,0,0,0.02)',
-              border: '1px solid rgba(0,0,0,0.06)',
-              borderRadius: '8px',
-              fontSize: '0.85rem'
-            }}
           />
         </div>
       </div>
 
-      {/* Скроллируемый контент */}
+      <div className={embedded ? 'overflow-auto flex-grow-1 min-h-0' : 'server-sidebar-body overflow-auto'}>
-      <div style={{ overflowY: 'auto', flex: 1 }}>
+        <FilterSection
-        {/* Секция: Страны */}
+          title="Страны"
-        <div className="filter-section">
+          icon={IconWorld}
-          <div
+          iconColor="text-blue"
-            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
+          expanded={expandedSections.country}
-            onClick={() => toggleSection('country')}
+          onToggle={() => toggleSection('country')}
-            style={{ 
-              background: 'rgba(0,0,0,0.02)',
-              borderBottom: '1px solid rgba(0,0,0,0.04)'
-            }}
         >
-            <div className="d-flex align-items-center">
-              <IconWorld size={15} className="me-2" style={{ color: '#3b82f6' }} />
-              <span className="fw-medium small">Страны</span>
-            </div>
-            {expandedSections.country ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
-          </div>
-          {expandedSections.country && (
-            <div className="p-2">
           {Object.entries(stats.byCountry)
             .sort((a, b) => b[1] - a[1])
             .map(([country, count]) => (
-                  <button
+              <FilterItem
                 key={country}
-                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
+                label={country}
-                      filters.country === country ? 'btn-primary' : ''
+                count={count}
-                    }`}
+                active={filters.country === country}
                 onClick={() => handleFilterClick('country', country)}
-                    style={{
+                leftAddon={
-                      background: filters.country === country ? undefined : 'transparent',
+                  <span className="me-2" style={{ fontSize: '1rem' }} aria-hidden>
-                      border: 'none',
+                    {countryToFlag(country)}
-                      borderRadius: '8px',
-                      padding: '8px 10px',
-                      transition: 'background 0.15s'
-                    }}
-                    onMouseEnter={(e) => {
-                      if (filters.country !== country) {
-                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (filters.country !== country) {
-                        e.currentTarget.style.background = 'transparent';
-                      }
-                    }}
-                  >
-                    <span className="d-flex align-items-center">
-                      <span className="me-2" style={{ fontSize: '1.1rem' }}>{countryToFlag(country)}</span>
-                      <span className={filters.country === country ? 'text-white' : ''}>{country}</span>
                   </span>
-                    <span 
+                }
-                      className={`badge ${filters.country === country ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
+              />
-                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
-                    >
-                      {count}
-                    </span>
-                  </button>
             ))}
-            </div>
+        </FilterSection>
-          )}
-        </div>
 
-        {/* Секция: Провайдеры */}
+        <FilterSection
-        <div className="filter-section">
+          title="Провайдеры"
-          <div
+          icon={IconBuildingSkyscraper}
-            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
+          iconColor="text-purple"
-            onClick={() => toggleSection('provider')}
+          expanded={expandedSections.provider}
-            style={{ 
+          onToggle={() => toggleSection('provider')}
-              background: 'rgba(0,0,0,0.02)',
-              borderBottom: '1px solid rgba(0,0,0,0.04)'
-            }}
         >
-            <div className="d-flex align-items-center">
-              <IconBuildingSkyscraper size={15} className="me-2" style={{ color: '#8b5cf6' }} />
-              <span className="fw-medium small">Провайдеры</span>
-            </div>
-            {expandedSections.provider ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
-          </div>
-          {expandedSections.provider && (
-            <div className="p-2">
           {Object.entries(stats.byProvider)
             .sort((a, b) => b[1] - a[1])
             .map(([provider, count]) => (
-                  <button
+              <FilterItem
                 key={provider}
-                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
+                label={provider}
-                      filters.provider === provider ? 'btn-primary' : ''
+                count={count}
-                    }`}
+                active={filters.provider === provider}
                 onClick={() => handleFilterClick('provider', provider)}
-                    style={{
+              />
-                      background: filters.provider === provider ? undefined : 'transparent',
-                      border: 'none',
-                      borderRadius: '8px',
-                      padding: '8px 10px'
-                    }}
-                    onMouseEnter={(e) => {
-                      if (filters.provider !== provider) {
-                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (filters.provider !== provider) {
-                        e.currentTarget.style.background = 'transparent';
-                      }
-                    }}
-                  >
-                    <span className={filters.provider === provider ? 'text-white' : ''}>{provider}</span>
-                    <span 
-                      className={`badge ${filters.provider === provider ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
-                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
-                    >
-                      {count}
-                    </span>
-                  </button>
             ))}
-            </div>
+        </FilterSection>
-          )}
-        </div>
 
-        {/* Секция: Типы */}
+        <FilterSection
-        <div className="filter-section">
+          title="Тип сервера"
-          <div
+          icon={IconServer}
-            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
+          iconColor="text-green"
-            onClick={() => toggleSection('type')}
+          expanded={expandedSections.type}
-            style={{ 
+          onToggle={() => toggleSection('type')}
-              background: 'rgba(0,0,0,0.02)',
-              borderBottom: '1px solid rgba(0,0,0,0.04)'
-            }}
         >
-            <div className="d-flex align-items-center">
-              <IconServer size={15} className="me-2" style={{ color: '#10b981' }} />
-              <span className="fw-medium small">Тип сервера</span>
-            </div>
-            {expandedSections.type ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
-          </div>
-          {expandedSections.type && (
-            <div className="p-2">
           {Object.entries(stats.byType)
             .sort((a, b) => b[1] - a[1])
             .map(([type, count]) => (
-                  <button
+              <FilterItem
                 key={type}
-                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
+                label={typeLabels[type] || type}
-                      filters.type === type ? 'btn-primary' : ''
+                count={count}
-                    }`}
+                active={filters.type === type}
                 onClick={() => handleFilterClick('type', type)}
-                    style={{
+                leftAddon={
-                      background: filters.type === type ? undefined : 'transparent',
-                      border: 'none',
-                      borderRadius: '8px',
-                      padding: '8px 10px'
-                    }}
-                    onMouseEnter={(e) => {
-                      if (filters.type !== type) {
-                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (filters.type !== type) {
-                        e.currentTarget.style.background = 'transparent';
-                      }
-                    }}
-                  >
-                    <span className="d-flex align-items-center">
                   <span
-                        className="rounded-circle me-2"
+                    className="rounded-circle me-2 flex-shrink-0"
                     style={{
                       width: 8,
                       height: 8,
-                          background: type === 'exit' ? '#ef4444' : '#3b82f6'
+                      background: type === 'exit' ? 'var(--tblr-red)' : 'var(--tblr-primary)'
                     }}
+                    aria-hidden
+                  />
+                }
               />
-                      <span className={filters.type === type ? 'text-white' : ''}>
-                        {typeLabels[type] || type}
-                      </span>
-                    </span>
-                    <span 
-                      className={`badge ${filters.type === type ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
-                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
-                    >
-                      {count}
-                    </span>
-                  </button>
             ))}
-            </div>
+        </FilterSection>
-          )}
-        </div>
 
-        {/* Секция: Туннели */}
+        <FilterSection
-        <div className="filter-section">
+          title="Туннель"
-          <div
+          icon={IconNetwork}
-            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
+          iconColor="text-orange"
-            onClick={() => toggleSection('tunnel')}
+          expanded={expandedSections.tunnel}
-            style={{ 
+          onToggle={() => toggleSection('tunnel')}
-              background: 'rgba(0,0,0,0.02)',
-              borderBottom: '1px solid rgba(0,0,0,0.04)'
-            }}
         >
-            <div className="d-flex align-items-center">
-              <IconNetwork size={15} className="me-2" style={{ color: '#f59e0b' }} />
-              <span className="fw-medium small">Туннель</span>
-            </div>
-            {expandedSections.tunnel ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
-          </div>
-          {expandedSections.tunnel && (
-            <div className="p-2">
           {Object.entries(stats.byTunnel)
             .sort((a, b) => b[1] - a[1])
             .map(([tunnel, count]) => (
-                  <button
+              <FilterItem
                 key={tunnel}
-                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
+                label={tunnel}
-                      filters.tunnel === tunnel ? 'btn-primary' : ''
+                count={count}
-                    }`}
+                active={filters.tunnel === tunnel}
                 onClick={() => handleFilterClick('tunnel', tunnel)}
-                    style={{
+              />
-                      background: filters.tunnel === tunnel ? undefined : 'transparent',
-                      border: 'none',
-                      borderRadius: '8px',
-                      padding: '8px 10px'
-                    }}
-                    onMouseEnter={(e) => {
-                      if (filters.tunnel !== tunnel) {
-                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (filters.tunnel !== tunnel) {
-                        e.currentTarget.style.background = 'transparent';
-                      }
-                    }}
-                  >
-                    <span className={filters.tunnel === tunnel ? 'text-white' : ''}>{tunnel}</span>
-                    <span 
-                      className={`badge ${filters.tunnel === tunnel ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
-                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
-                    >
-                      {count}
-                    </span>
-                  </button>
             ))}
-            </div>
+        </FilterSection>
-          )}
-        </div>
       </div>
 
-      {/* Статистика внизу */}
+      <div className={embedded ? 'py-3 mt-2 pt-3 border-top' : 'card-footer py-3 bg-secondary-lt'}>
-      <div 
-        className="px-3 py-3"
-        style={{ 
-          borderTop: '1px solid rgba(0,0,0,0.06)',
-          background: 'rgba(0,0,0,0.01)'
-        }}
-      >
         <div className="d-flex align-items-center mb-2">
-          <IconDatabase size={14} className="text-muted me-2" />
+          <IconDatabase size={16} className="text-muted me-2" />
-          <span className="text-muted small">Статистика</span>
+          <span className="text-muted small fw-medium">Статистика</span>
         </div>
-        <div className="d-flex justify-content-between mb-1">
+        <div className="d-flex justify-content-between small mb-1">
-          <span className="small text-muted">Всего серверов</span>
+          <span className="text-muted">Всего серверов</span>
-          <span className="small fw-bold">{servers.length}</span>
+          <span className="fw-semibold">{servers.length}</span>
         </div>
-        <div className="d-flex justify-content-between mb-1">
+        <div className="d-flex justify-content-between small mb-1">
-          <span className="small text-muted">Выходных нод</span>
+          <span className="text-muted">Выходных нод</span>
-          <span className="small fw-bold" style={{ color: '#ef4444' }}>{stats.byType['exit'] || 0}</span>
+          <span className="fw-semibold text-danger">{stats.byType['exit'] || 0}</span>
         </div>
-        <div className="d-flex justify-content-between">
+        <div className="d-flex justify-content-between small">
-          <span className="small text-muted">Jumphosts</span>
+          <span className="text-muted">Jumphosts</span>
-          <span className="small fw-bold" style={{ color: '#3b82f6' }}>{stats.byType['jumphost'] || 0}</span>
+          <span className="fw-semibold text-primary">{stats.byType['jumphost'] || 0}</span>
         </div>
       </div>
+    </>
+  );
+
+  if (embedded) {
+    return <div className="d-flex flex-column h-100">{content}</div>;
+  }
+  return (
+    <div className="server-sidebar card flex-shrink-0 mb-0">
+      {content}
     </div>
   );
 }

frontend/src/components/server/index.js

@@ -5,5 +5,6 @@ export { default as LinkGeneratorModal } from './LinkGeneratorModal.jsx';
 export { default as AddServerModal } from './AddServerModal.jsx';
 export { default as ServerSidebar } from './ServerSidebar.jsx';
 export { default as ServerCard } from './ServerCard.jsx';
+export { default as ServerGroupCard } from './ServerGroupCard.jsx';
 export { default as ServerBulkActions } from './ServerBulkActions.jsx';
 

frontend/src/contexts/PingContext.jsx

@@ -0,0 +1,105 @@
+import { createContext, useContext, useState, useCallback, useRef } from 'react';
+import api from '../lib/api.js';
+
+/**
+ * Единая точка входа для пингов до шлюзов (MikroTik).
+ * Кеш: ключ `${routerId}:${gatewayIp}` → number | null (мс или ошибка).
+ * TTL: после истечения записи перезапрашиваются при переходе на раздел.
+ * Используется и на Easy Switch, и на странице фильтров (карточки gateway).
+ */
+const PingContext = createContext(null);
+
+const PING_COUNT = 5;
+/** Время жизни кеша пинга (мс). После истечения при открытии раздела данные перезапрашиваются. */
+const PING_CACHE_TTL_MS = 2 * 60 * 1000; // 2 минуты
+
+export function PingProvider({ children }) {
+  const [pingMap, setPingMap] = useState({});
+  const inFlightRef = useRef(new Set());
+  const pingMapRef = useRef(pingMap);
+  const timestampsRef = useRef({}); // key → Date.now() когда запись установлена
+  pingMapRef.current = pingMap;
+
+  const getKey = (routerId, gatewayIp) => {
+    if (!routerId || !gatewayIp) return null;
+    return `${routerId}:${gatewayIp}`;
+  };
+
+  const isCacheValid = useCallback((key) => {
+    const cache = pingMapRef.current;
+    if (!Object.prototype.hasOwnProperty.call(cache, key)) return false;
+    const ts = timestampsRef.current[key];
+    if (ts == null) return false;
+    return (Date.now() - ts) < PING_CACHE_TTL_MS;
+  }, []);
+
+  const getPing = useCallback((routerId, gatewayIp) => {
+    const key = getKey(routerId, gatewayIp);
+    if (!key) return undefined;
+    return Object.prototype.hasOwnProperty.call(pingMap, key) ? pingMap[key] : undefined;
+  }, [pingMap]);
+
+  /**
+   * Запросить пинги для списка пар (routerId, gatewayIp).
+   * Пропускаются ключи с валидным кешем (не истёк TTL) и уже запрашиваемые.
+   * @param tasks Array<{ routerId, gatewayIp }>
+   */
+  const requestPings = useCallback((tasks) => {
+    if (!Array.isArray(tasks) || tasks.length === 0) return;
+
+    const toRequest = [];
+    tasks.forEach(({ routerId, gatewayIp }) => {
+      const ip = gatewayIp || '';
+      if (!routerId || !ip) return;
+      const key = getKey(routerId, ip);
+      if (!key) return;
+      if (isCacheValid(key)) return;
+      if (inFlightRef.current.has(key)) return;
+      inFlightRef.current.add(key);
+      toRequest.push({ routerId, ip, key });
+    });
+
+    toRequest.forEach(({ routerId, ip, key }) => {
+      api
+        .post('/mikrotik/ping', {
+          serverId: routerId,
+          gatewayIp: ip,
+          count: PING_COUNT,
+        })
+        .then(({ data }) => {
+          const value = typeof data?.avgMs === 'number' ? Math.round(data.avgMs) : null;
+          timestampsRef.current[key] = Date.now();
+          setPingMap((prev) => ({ ...prev, [key]: value }));
+        })
+        .catch((e) => {
+          console.warn('PingContext: failed to fetch ping for', routerId, ip, e?.message || e);
+          timestampsRef.current[key] = Date.now();
+          setPingMap((prev) => ({ ...prev, [key]: null }));
+        })
+        .finally(() => {
+          inFlightRef.current.delete(key);
+        });
+    });
+  }, [isCacheValid]);
+
+  const value = {
+    pingMap,
+    getPing,
+    requestPings,
+    getKey,
+  };
+
+  return (
+    <PingContext.Provider value={value}>
+      {children}
+    </PingContext.Provider>
+  );
+}
+
+export function usePing() {
+  const ctx = useContext(PingContext);
+  if (!ctx) {
+    throw new Error('usePing must be used within PingProvider');
+  }
+  return ctx;
+}

frontend/src/index.css

@@ -296,7 +296,7 @@ button:focus-visible,
   z-index: 2;
 }
 
-/* ===== Table Improvements ===== */
+/* ===== Table Improvements (Tabler + UX) ===== */
 .table thead th {
   font-weight: 600;
   text-transform: uppercase;
@@ -318,6 +318,92 @@ button:focus-visible,
   background-color: rgba(32, 107, 196, 0.1);
 }
 
+/* Колонка «Действия» — фиксированная ширина, не сжимается (лаконичный UX) */
+.table .td-actions {
+  min-width: 140px;
+  white-space: nowrap;
+}
+
+/* Группы кнопок в таблицах: «слитые» Tabler-style action buttons */
+.table .btn-group.btn-group-sm {
+  gap: 0;
+}
+
+.table .btn-group.btn-group-sm .btn {
+  border-radius: 0;
+}
+
+.table .btn-group.btn-group-sm .btn + .btn {
+  margin-left: -1px; /* убираем двойную границу между кнопками */
+}
+
+.table .btn-group.btn-group-sm .btn:first-child {
+  border-top-left-radius: .375rem;
+  border-bottom-left-radius: .375rem;
+}
+
+.table .btn-group.btn-group-sm .btn:last-child {
+  border-top-right-radius: .375rem;
+  border-bottom-right-radius: .375rem;
+}
+
+/* Выбранная строка поверх zebra (table-striped) */
+.table-striped tbody tr.table-selected > * {
+  --tblr-table-bg-type: rgba(32, 107, 196, 0.08);
+}
+.table-striped tbody tr.table-selected:hover > * {
+  --tblr-table-bg-type: rgba(32, 107, 196, 0.12);
+}
+
+/* ===== Table flat (без карточной подложки, как UniFi) ===== */
+/* Только горизонтальные разделители, thead темнее, без вертикальных границ */
+.table-flat {
+  --tblr-table-border-color: var(--tblr-border-color);
+  background: transparent;
+}
+.table-flat thead th {
+  font-weight: 600;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 1px solid var(--tblr-table-border-color);
+  background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.03));
+  color: var(--tblr-body-color);
+  padding: 0.75rem 1rem;
+  white-space: nowrap;
+}
+.table-flat tbody td {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 1px solid var(--tblr-table-border-color);
+  background: transparent;
+  padding: 0.75rem 1rem;
+  vertical-align: middle;
+}
+.table-flat tbody tr:hover td {
+  background: var(--tblr-bg-surface-tertiary, rgba(0, 0, 0, 0.02));
+}
+.table-flat tbody tr.table-selected td,
+.table-flat tbody tr.table-active td {
+  background: rgba(32, 107, 196, 0.08);
+}
+.table-flat tbody tr.table-selected:hover td,
+.table-flat tbody tr.table-active:hover td {
+  background: rgba(32, 107, 196, 0.12);
+}
+/* В тёмной теме — чуть другие оттенки для thead */
+[data-bs-theme="dark"] .table-flat thead th {
+  background: rgba(255, 255, 255, 0.06);
+}
+[data-bs-theme="dark"] .table-flat tbody tr:hover td {
+  background: rgba(255, 255, 255, 0.04);
+}
+[data-bs-theme="dark"] .table-flat tbody tr.table-selected td,
+[data-bs-theme="dark"] .table-flat tbody tr.table-active td {
+  background: rgba(32, 107, 196, 0.15);
+}
+
 .user-select-none {
   user-select: none;
   -webkit-user-select: none;

frontend/src/lib/api.js

@@ -15,7 +15,7 @@ import {
 // Базовый axios-клиент для всего приложения
 const api = axios.create({
   baseURL: '/api',
-  timeout: 30000, // Увеличен до 30 секунд для больших запросов
+  timeout: 180000, // 3 минуты для долгих запросов (address-lists и др.)
   headers: {
     'X-Requested-With': 'XMLHttpRequest',
   },

frontend/src/lib/brandIcons.js

@@ -0,0 +1,85 @@
+/**
+ * Реестр брендовых иконок (Tabler Icons) для выбора в настройках пинг-сервисов.
+ * id — имя компонента (например IconBrandGoogle), label — для поиска и отображения.
+ */
+import {
+  IconBrandGoogle,
+  IconBrandCloudflare,
+  IconBrandYandex,
+  IconBrandInstagram,
+  IconBrandGithub,
+  IconBrandTelegram,
+  IconBrandWhatsapp,
+  IconBrandFacebook,
+  IconBrandX,
+  IconBrandYoutube,
+  IconBrandTiktok,
+  IconBrandAmazon,
+  IconBrandApple,
+  IconBrandDiscord,
+  IconBrandSpotify,
+  IconBrandVk,
+  IconBrandReddit,
+  IconBrandLinkedin,
+  IconBrandPinterest,
+  IconBrandTwitch,
+  IconBrandSteam,
+  IconBrandDocker,
+  IconBrandChrome,
+  IconBrandFirefox,
+  IconBrandSafari,
+  IconBrandEdge,
+  IconBrandSlack,
+  IconBrandZoom,
+  IconBrandSkype,
+  IconBrandPaypal,
+  IconBrandStripe,
+  IconBrandVisa,
+  IconBrandMastercard,
+  IconWorld,
+} from '@tabler/icons-react';
+
+const BRAND_ICONS = [
+  { id: 'IconBrandGoogle', label: 'Google', Icon: IconBrandGoogle },
+  { id: 'IconBrandCloudflare', label: 'Cloudflare', Icon: IconBrandCloudflare },
+  { id: 'IconBrandYandex', label: 'Yandex', Icon: IconBrandYandex },
+  { id: 'IconBrandInstagram', label: 'Instagram', Icon: IconBrandInstagram },
+  { id: 'IconBrandGithub', label: 'GitHub', Icon: IconBrandGithub },
+  { id: 'IconBrandTelegram', label: 'Telegram', Icon: IconBrandTelegram },
+  { id: 'IconBrandWhatsapp', label: 'WhatsApp', Icon: IconBrandWhatsapp },
+  { id: 'IconBrandFacebook', label: 'Facebook', Icon: IconBrandFacebook },
+  { id: 'IconBrandX', label: 'X (Twitter)', Icon: IconBrandX },
+  { id: 'IconBrandYoutube', label: 'YouTube', Icon: IconBrandYoutube },
+  { id: 'IconBrandTiktok', label: 'TikTok', Icon: IconBrandTiktok },
+  { id: 'IconBrandAmazon', label: 'Amazon', Icon: IconBrandAmazon },
+  { id: 'IconBrandApple', label: 'Apple', Icon: IconBrandApple },
+  { id: 'IconBrandDiscord', label: 'Discord', Icon: IconBrandDiscord },
+  { id: 'IconBrandSpotify', label: 'Spotify', Icon: IconBrandSpotify },
+  { id: 'IconBrandVk', label: 'VK', Icon: IconBrandVk },
+  { id: 'IconBrandReddit', label: 'Reddit', Icon: IconBrandReddit },
+  { id: 'IconBrandLinkedin', label: 'LinkedIn', Icon: IconBrandLinkedin },
+  { id: 'IconBrandPinterest', label: 'Pinterest', Icon: IconBrandPinterest },
+  { id: 'IconBrandTwitch', label: 'Twitch', Icon: IconBrandTwitch },
+  { id: 'IconBrandSteam', label: 'Steam', Icon: IconBrandSteam },
+  { id: 'IconBrandDocker', label: 'Docker', Icon: IconBrandDocker },
+  { id: 'IconBrandChrome', label: 'Chrome', Icon: IconBrandChrome },
+  { id: 'IconBrandFirefox', label: 'Firefox', Icon: IconBrandFirefox },
+  { id: 'IconBrandSafari', label: 'Safari', Icon: IconBrandSafari },
+  { id: 'IconBrandEdge', label: 'Edge', Icon: IconBrandEdge },
+  { id: 'IconBrandSlack', label: 'Slack', Icon: IconBrandSlack },
+  { id: 'IconBrandZoom', label: 'Zoom', Icon: IconBrandZoom },
+  { id: 'IconBrandSkype', label: 'Skype', Icon: IconBrandSkype },
+  { id: 'IconBrandPaypal', label: 'PayPal', Icon: IconBrandPaypal },
+  { id: 'IconBrandStripe', label: 'Stripe', Icon: IconBrandStripe },
+  { id: 'IconBrandVisa', label: 'Visa', Icon: IconBrandVisa },
+  { id: 'IconBrandMastercard', label: 'Mastercard', Icon: IconBrandMastercard },
+  { id: 'IconWorld', label: 'Сеть (World)', Icon: IconWorld },
+];
+
+const ICON_BY_ID = Object.fromEntries(BRAND_ICONS.map((item) => [item.id, item]));
+
+export function getIconById(id) {
+  return ICON_BY_ID[id] || BRAND_ICONS[0];
+}
+
+export default BRAND_ICONS;

frontend/src/types/index.ts

@@ -24,6 +24,8 @@ export interface Server {
   type: ServerType;
   gateway?: string;
   gateways: Gateway[];
+  /** Объединение в UI: серверы с одинаковым groupKey отображаются как один роутер (например мультиван). Зависимости (интерфейсы, gateways) по id не меняются. */
+  groupKey?: string;
 }
 
 export type ServerType = 'jumphost' | 'exit';