refactor(docs): update project references from S3 Lists Manager to RouterOS Manager across documentation and frontend files

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

@@ -5,6 +5,7 @@ on:
     branches:
       - tabler
       - v3
+      - v4
 
 jobs:
   build-and-push-fast:
@@ -43,8 +44,8 @@ jobs:
             git.shts.su/${{ gitea.repository }}:tabler-fast
             git.shts.su/${{ gitea.repository }}:tabler-fast-${{ gitea.sha }}
           labels: |
-            org.opencontainers.image.title=S3 Lists Manager with Tabler UI (Fast Build)
+            org.opencontainers.image.title=RouterOS Manager with Tabler UI (Fast Build)
-            org.opencontainers.image.description=Modern S3 Lists Manager with Tabler UI design - Fast Alpine build
+            org.opencontainers.image.description=Modern RouterOS Manager with Tabler UI design - Fast Alpine build
             org.opencontainers.image.version=tabler-fast
             org.opencontainers.image.revision=${{ gitea.sha }}
             org.opencontainers.image.created=${{ gitea.event.head_commit.timestamp }}

.gitea/workflows/docker-publish.yml

@@ -38,8 +38,8 @@ jobs:
             git.shts.su/${{ gitea.repository }}:latest
             git.shts.su/${{ gitea.repository }}:${{ gitea.sha }}
           labels: |
-            org.opencontainers.image.title=S3 Lists Manager
+            org.opencontainers.image.title=RouterOS Manager
-            org.opencontainers.image.description=S3 Lists Manager for domains and AS management
+            org.opencontainers.image.description=RouterOS Manager for domains and AS management
             org.opencontainers.image.version=latest
             org.opencontainers.image.revision=${{ gitea.sha }}
             org.opencontainers.image.created=${{ gitea.event.head_commit.timestamp }}

DOCKER.md

@@ -1,6 +1,6 @@
 # Docker Images
 
-Этот проект предоставляет Docker образы для S3 Lists Manager с двумя различными версиями интерфейса.
+Этот проект предоставляет Docker образы для RouterOS Manager с двумя различными версиями интерфейса.
 
 ## 🏷️ Доступные теги
 

README.md

@@ -138,7 +138,7 @@ frontend/        # Vite React UI
 ## Лицензия
 MIT
 
-# 📂 S3 Lists Manager
+# 📂 RouterOS Manager
 
 
 Веб-интерфейс для удобного управления файлами в S3-совместимом хранилище Yandex Cloud. Приложение позволяет в реальном времени просматривать, добавлять, редактировать, удалять и массово изменять записи в следующих файлах:

UX_IMPROVEMENTS_SUMMARY.md

@@ -2,7 +2,7 @@
 
 ## Краткое описание
 
-Проведена комплексная модернизация пользовательского интерфейса S3 Lists Manager с внедрением современных UX/UI практик, улучшением доступности и мобильного опыта.
+Проведена комплексная модернизация пользовательского интерфейса RouterOS Manager с внедрением современных UX/UI практик, улучшением доступности и мобильного опыта.
 
 ---
 

backend/routes/alertsRoutes.js

@@ -0,0 +1,144 @@
+/**
+ * Система оповещений: агрегирует проблемы из availability и resources/stats.
+ * Критерии проблем: сервер недоступен, MikroTik недоступен, высокое CPU/RAM/HDD.
+ */
+
+const { sendError } = require('../middleware/errorHandler');
+const { readServersFromS3 } = require('./serversRoutes');
+const { checkOneServerFast } = require('./miscRoutes');
+const { getResourceStatsData } = require('./resourceStatsRoutes');
+
+/** Пороги для ресурсов (проценты). */
+const THRESHOLD_CPU = 85;
+const THRESHOLD_RAM = 85;
+const THRESHOLD_HDD = 90;
+
+/**
+ * GET /api/alerts
+ * Возвращает список активных оповещений.
+ */
+async function getAlerts(req, res) {
+  try {
+    const servers = await readServersFromS3();
+    const alerts = [];
+    const now = new Date().toISOString();
+
+    // 1) Доступность серверов (TCP 80/443)
+    const availabilityChecks = await Promise.allSettled(
+      servers.map((s) => checkOneServerFast(s))
+    );
+    servers.forEach((server, i) => {
+      const online = availabilityChecks[i].status === 'fulfilled' && availabilityChecks[i].value;
+      if (!online) {
+        const name = server.name || server.dns || server.ip || server.id || `Сервер #${i + 1}`;
+        alerts.push({
+          id: `server-offline-${server.id || server.dns || server.ip || i}`,
+          type: 'server_offline',
+          severity: 'critical',
+          title: 'Сервер недоступен',
+          description: `${name} не отвечает на TCP (80/443).`,
+          entity: name,
+          entityId: server.id || server.dns || server.ip,
+          link: '/servers',
+          at: now,
+        });
+      }
+    });
+
+    // 2) Ресурсы роутеров (MikroTik): ошибка доступа, высокое CPU/RAM/HDD
+    let resourceData;
+    try {
+      resourceData = await getResourceStatsData();
+    } catch (err) {
+      console.warn('alerts: getResourceStatsData failed', err?.message);
+      resourceData = { routers: [] };
+    }
+
+    const routers = resourceData.routers || [];
+    routers.forEach((router) => {
+      const { serverId, name, error, resource } = router;
+      const entityName = name || serverId;
+
+      if (error) {
+        alerts.push({
+          id: `mikrotik-error-${serverId}`,
+          type: 'mikrotik_unreachable',
+          severity: 'critical',
+          title: 'MikroTik недоступен',
+          description: `${entityName}: ${error}`,
+          entity: entityName,
+          entityId: serverId,
+          link: '/resource-stats',
+          at: now,
+        });
+        return;
+      }
+
+      if (!resource) return;
+
+      if (resource.cpuLoad != null && resource.cpuLoad >= THRESHOLD_CPU) {
+        alerts.push({
+          id: `cpu-high-${serverId}`,
+          type: 'high_cpu',
+          severity: 'warning',
+          title: 'Высокое использование CPU',
+          description: `${entityName}: ${resource.cpuLoad}% (порог ${THRESHOLD_CPU}%).`,
+          entity: entityName,
+          entityId: serverId,
+          value: resource.cpuLoad,
+          threshold: THRESHOLD_CPU,
+          link: '/resource-stats',
+          at: now,
+        });
+      }
+      if (resource.memoryUsagePercent != null && resource.memoryUsagePercent >= THRESHOLD_RAM) {
+        alerts.push({
+          id: `ram-high-${serverId}`,
+          type: 'high_ram',
+          severity: 'warning',
+          title: 'Высокое использование RAM',
+          description: `${entityName}: ${resource.memoryUsagePercent}% (порог ${THRESHOLD_RAM}%).`,
+          entity: entityName,
+          entityId: serverId,
+          value: resource.memoryUsagePercent,
+          threshold: THRESHOLD_RAM,
+          link: '/resource-stats',
+          at: now,
+        });
+      }
+      if (resource.hddUsagePercent != null && resource.hddUsagePercent >= THRESHOLD_HDD) {
+        alerts.push({
+          id: `hdd-high-${serverId}`,
+          type: 'high_hdd',
+          severity: 'warning',
+          title: 'Высокое использование диска',
+          description: `${entityName}: ${resource.hddUsagePercent}% (порог ${THRESHOLD_HDD}%).`,
+          entity: entityName,
+          entityId: serverId,
+          value: resource.hddUsagePercent,
+          threshold: THRESHOLD_HDD,
+          link: '/resource-stats',
+          at: now,
+        });
+      }
+    });
+
+    return res.json({
+      alerts,
+      total: alerts.length,
+      at: now,
+    });
+  } catch (error) {
+    console.error('getAlerts:', error);
+    return sendError(
+      res,
+      500,
+      error.message || 'Ошибка загрузки оповещений',
+      'E_ALERTS'
+    );
+  }
+}
+
+module.exports = {
+  getAlerts,
+};

backend/routes/miscRoutes.js

@@ -776,5 +776,6 @@ module.exports = {
   getPingServicesList,
   getPingServices,
   refreshPingServicesCache,
+  checkOneServerFast,
 };
 

backend/routes/resourceStatsRoutes.js

@@ -74,13 +74,11 @@ function parseResource(raw) {
 }
 
 /**
- * GET /api/resources/stats
+ * Внутренняя функция: возвращает данные по ресурсам роутеров (без HTTP).
- * По каждому jumphost/home с MikroTik — запрос system/resource, ответ с группировкой по роутерам.
  */
-async function getResourceStats(req, res) {
+async function getResourceStatsData() {
-  try {
+  const servers = await readServersFromS3();
-    const servers = await readServersFromS3();
+  const routers = (Array.isArray(servers) ? servers : []).filter(
-    const routers = (Array.isArray(servers) ? servers : []).filter(
       (s) =>
         s &&
         (String(s.type || '').toLowerCase() === 'jumphost' ||
@@ -132,7 +130,17 @@ async function getResourceStats(req, res) {
       })
     );
 
-    return res.json({ routers: results });
+  return { routers: results };
+}
+
+/**
+ * GET /api/resources/stats
+ * По каждому jumphost/home с MikroTik — запрос system/resource, ответ с группировкой по роутерам.
+ */
+async function getResourceStats(req, res) {
+  try {
+    const data = await getResourceStatsData();
+    return res.json(data);
   } catch (error) {
     console.error('getResourceStats:', error);
     return sendError(
@@ -146,4 +154,5 @@ async function getResourceStats(req, res) {
 
 module.exports = {
   getResourceStats,
+  getResourceStatsData,
 };

backend/server.js

@@ -31,6 +31,7 @@ const mikrotikConfigRoutes = require('./routes/mikrotikConfigRoutes');
 const mikrotikBackupRoutes = require('./routes/mikrotikBackupRoutes');
 const trafficRoutes = require('./routes/trafficRoutes');
 const resourceStatsRoutes = require('./routes/resourceStatsRoutes');
+const alertsRoutes = require('./routes/alertsRoutes');
 const { initMikrotikBackupScheduler } = require('./services/mikrotikBackupScheduler');
 const { initNetworkMapScheduler } = require('./services/networkMapScheduler');
 const { initPingServicesScheduler } = require('./services/pingServicesScheduler');
@@ -483,6 +484,9 @@ app.get('/api/traffic/interface-stats', trafficRoutes.getInterfaceStats);
 // === RESOURCE STATS (RAM/CPU/HDD по роутерам) ===
 app.get('/api/resources/stats', resourceStatsRoutes.getResourceStats);
 
+// === ALERTS (агрегация проблем: серверы, ресурсы роутеров) ===
+app.get('/api/alerts', alertsRoutes.getAlerts);
+
 // === MIKROTIK BACKUPS (S3) ===
 app.post('/api/mikrotik/backups', writeLimiter, mikrotikBackupRoutes.createBackup);
 app.get('/api/mikrotik/backups', mikrotikBackupRoutes.listBackups);

frontend/README.md

@@ -1,4 +1,4 @@
-# S3 Lists Manager - Frontend
+# RouterOS Manager - Frontend
 
 Современный веб-интерфейс для управления списками доменов и AS с использованием Tabler UI.
 
@@ -172,4 +172,4 @@ import { IconPlus, IconEdit, IconTrash } from '@tabler/icons-react';
 
 ---
 
-**S3 Lists Manager** - Современный интерфейс для управления списками с использованием Tabler UI.
+**RouterOS Manager** - Современный интерфейс для управления списками с использованием Tabler UI.

frontend/UX_IMPROVEMENTS.md

@@ -1,6 +1,6 @@
 # 🎨 UX/UI Улучшения - Документация
 
-Этот документ описывает все внедренные UX/UI улучшения в проект S3 Lists Manager.
+Этот документ описывает все внедренные UX/UI улучшения в проект RouterOS Manager.
 
 ## 📋 Содержание
 

frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="S3 Lists Manager - Управление списками доменов и AS" />
+    <meta name="description" content="RouterOS Manager - Управление списками доменов и AS" />
     <meta name="theme-color" content="#206bc4" />
     
     <!-- Inter Font -->
@@ -12,7 +12,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     
-    <title>S3 Lists Manager</title>
+    <title>RouterOS Manager</title>
   </head>
   <body> 
     <div id="root"></div>

frontend/src/App.css

@@ -1,4 +1,4 @@
-/* Custom styles for S3 Lists Manager */
+/* Custom styles for RouterOS Manager */
 /* Layout: Tabler Fluid Vertical (https://preview.tabler.io/layout-fluid-vertical.html) */
 
 /* --- Fluid Vertical: page structure --- */
@@ -347,6 +347,96 @@
   padding-left: 0;
 }
 
+/* ===== Мобильный сайдбар: верхняя полоса + оверлей меню (Tabler-style) ===== */
+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1035;
+  background: rgba(0, 0, 0, 0.4);
+  transition: opacity 0.2s ease;
+}
+body.sidebar-overlay-open {
+  overflow: hidden;
+  touch-action: none;
+}
+
+@media (max-width: 767.98px) {
+  /* На мобильных: колоночный layout — сайдбар сверху как полоса, контент на всю ширину снизу */
+  .page {
+    display: flex;
+    flex-direction: column;
+  }
+  .page .navbar-vertical {
+    position: relative;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-height: auto !important;
+    flex-shrink: 0;
+    flex-direction: row;
+    align-items: center;
+    z-index: 1041; /* выше бэкдропа (1035), чтобы меню и верхняя полоса были кликабельны */
+  }
+  .page .navbar-vertical > .container-fluid {
+    flex-direction: row !important;
+    flex-wrap: nowrap;
+    width: 100%;
+    min-height: 3.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .page .navbar-vertical .navbar-brand {
+    flex-shrink: 0;
+    margin-right: 0.5rem;
+  }
+  .page .navbar-vertical .navbar-brand .fw-bold {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 12rem;
+  }
+  .page .navbar-vertical .navbar-nav.flex-row {
+    margin-left: auto;
+  }
+  .page .navbar-vertical .navbar-toggler {
+    padding: 0.5rem;
+  }
+  /* Меню скрыто по умолчанию, при открытии — оверлей слева (z-index внутри контекста навбара) */
+  .page .navbar-vertical .navbar-collapse {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(100vw, 280px);
+    max-width: 280px;
+    z-index: 1042;
+    background: #1e293b;
+    margin: 0;
+    padding: 1rem 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+    flex-direction: column;
+    display: none;
+  }
+  .page .navbar-vertical .navbar-collapse.show {
+    display: flex !important;
+  }
+  .page-wrapper {
+    margin-left: 0 !important;
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+  }
+  .navbar-vertical .nav-link,
+  .navbar-vertical .dropdown-item {
+    min-height: 44px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+  }
+}
+
 /* Responsive navbar */
 @media (max-width: 991.98px) {
   .navbar-collapse {
@@ -461,7 +551,7 @@
 
 /* Responsive sizing for small screens */
 @media (max-width: 992px) {
-  .header-actions { gap: 0.4rem; }
+  .header-actions { gap: 0.4rem; flex-wrap: wrap; }
   .header-actions .btn {
     padding: 0.35rem 0.6rem;
     font-size: 0.875rem;
@@ -474,6 +564,30 @@
   .header-actions { width: 100%; }
 }
 
+/* Мобильные отступы контента */
+@media (max-width: 767.98px) {
+  .page-body .container-fluid,
+  .page-body .container-xl {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  .card .card-body {
+    padding: 0.75rem 1rem;
+  }
+  .offcanvas-start {
+    width: min(320px, 100vw) !important;
+    max-width: 100vw !important;
+  }
+  .modal-dialog {
+    margin: 0.5rem;
+    max-width: calc(100% - 1rem);
+  }
+  .modal-fullscreen-sm-down .modal-dialog {
+    max-width: 100%;
+    margin: 0;
+  }
+}
+
 /* Custom responsive adjustments */
 @media (max-width: 992px) {
   .page-wrapper {

frontend/src/App.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, createContext, useContext } from 'react';
+import { useState, useEffect, createContext, useContext, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   BrowserRouter as Router,
@@ -58,6 +58,8 @@ import CommandPalette, { KeyboardShortcutsButton } from './components/CommandPal
 import ErrorBoundary from './components/ErrorBoundary.jsx';
 import NetworkErrorHandler from './components/NetworkErrorHandler.jsx';
 import { PingProvider } from './contexts/PingContext.jsx';
+import { AlertsProvider } from './contexts/AlertsContext.jsx';
+import AlertsBell from './components/AlertsBell.jsx';
 
 // --- Simple i18n (RU/EN) ---
 const LanguageContext = createContext({ lang: 'ru', setLang: () => {}, t: (k) => k });
@@ -124,12 +126,14 @@ function App() {
           <LanguageProvider>
             <ThemeProvider>
               <PingProvider>
-                <ToastContainer>
+                <AlertsProvider>
-                  <NotifyProvider>
+                  <ToastContainer>
-                    <NetworkErrorHandler />
+                    <NotifyProvider>
-                    <MainLayout />
+                      <NetworkErrorHandler />
-                  </NotifyProvider>
+                      <MainLayout />
-                </ToastContainer>
+                    </NotifyProvider>
+                  </ToastContainer>
+                </AlertsProvider>
               </PingProvider>
             </ThemeProvider>
           </LanguageProvider>
@@ -142,16 +146,56 @@ function App() {
 const LAYOUT_FLUID = 'fluid';
 const LAYOUT_HORIZONTAL = 'horizontal';
 
+const SIDEBAR_COLLAPSE_ID = 'sidebar-menu';
+const MOBILE_BREAKPOINT = 768;
+
 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 [sidebarBackdrop, setSidebarBackdrop] = useState(false);
+  const sidebarTogglerRef = useRef(null);
 
   useEffect(() => {
     localStorage.setItem('layout', layout);
   }, [layout]);
 
+  // Мобильный сайдбар: бэкдроп при открытом меню и закрытие при навигации
+  useEffect(() => {
+    if (layout !== LAYOUT_FLUID) return;
+    const collapseEl = document.getElementById(SIDEBAR_COLLAPSE_ID);
+    const toggler = () => sidebarTogglerRef.current?.click?.();
+    const onShow = () => {
+      if (window.innerWidth < MOBILE_BREAKPOINT) {
+        setSidebarBackdrop(true);
+        document.body.classList.add('sidebar-overlay-open');
+      }
+    };
+    const onHide = () => {
+      setSidebarBackdrop(false);
+      document.body.classList.remove('sidebar-overlay-open');
+    };
+    if (collapseEl) {
+      collapseEl.addEventListener('show.bs.collapse', onShow);
+      collapseEl.addEventListener('hide.bs.collapse', onHide);
+      return () => {
+        collapseEl.removeEventListener('show.bs.collapse', onShow);
+        collapseEl.removeEventListener('hide.bs.collapse', onHide);
+      };
+    }
+  }, [layout]);
+
+  useEffect(() => {
+    if (layout !== LAYOUT_FLUID || window.innerWidth >= MOBILE_BREAKPOINT) return;
+    setSidebarBackdrop(false);
+    document.body.classList.remove('sidebar-overlay-open');
+    const collapseEl = document.getElementById(SIDEBAR_COLLAPSE_ID);
+    if (collapseEl?.classList.contains('show')) {
+      sidebarTogglerRef.current?.click?.();
+    }
+  }, [location.pathname, layout]);
+
   // Состояние для управления выпадающими меню
   const [dropdownStates, setDropdownStates] = useState({
     data: false,
@@ -284,7 +328,7 @@ function MainLayout() {
             <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>
+                <span className="fw-bold">RouterOS Manager</span>
               </Link>
             </div>
             <button
@@ -382,6 +426,9 @@ function MainLayout() {
                   <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">
+                <AlertsBell />
+              </div>
               <div className="nav-item me-1">
                 <KeyboardShortcutsButton className="nav-link px-2" />
               </div>
@@ -441,22 +488,23 @@ function MainLayout() {
         <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>
+            <span className="fw-bold">RouterOS Manager</span>
           </Link>
           <div className="navbar-nav flex-row d-md-none">
             <button
+              ref={sidebarTogglerRef}
               className="navbar-toggler"
               type="button"
               data-bs-toggle="collapse"
-              data-bs-target="#sidebar-menu"
+              data-bs-target={`#${SIDEBAR_COLLAPSE_ID}`}
-              aria-controls="sidebar-menu"
+              aria-controls={SIDEBAR_COLLAPSE_ID}
               aria-expanded="false"
               aria-label="Открыть меню"
             >
               <IconMenu2 />
             </button>
           </div>
-          <div className="collapse navbar-collapse" id="sidebar-menu">
+          <div className="collapse navbar-collapse" id={SIDEBAR_COLLAPSE_ID}>
             <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' : ''}`}>
@@ -539,6 +587,9 @@ function MainLayout() {
                     <a href="#" className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('dark'); }}>🌙 {t('dark')}</a>
                   </div>
                 </div>
+                <div className="nav-item">
+                  <AlertsBell />
+                </div>
                 <div className="nav-item">
                   <KeyboardShortcutsButton className="nav-link btn-icon rounded" title="Горячие клавиши" />
                 </div>
@@ -553,6 +604,15 @@ function MainLayout() {
         </div>
       </header>
 
+      {/* Бэкдроп мобильного меню: закрытие по клику */}
+      {sidebarBackdrop && (
+        <div
+          className="sidebar-backdrop d-md-none"
+          aria-hidden="true"
+          onClick={() => sidebarTogglerRef.current?.click?.()}
+        />
+      )}
+
       <div className="page-wrapper">
         <div className="page-body">
           <div className="container-fluid">

frontend/src/Dashboard.jsx

@@ -18,6 +18,11 @@ import {
   IconSearch,
   IconChevronDown,
   IconChevronUp,
+  IconBell,
+  IconCpu,
+  IconDeviceDesktop,
+  IconDatabase,
+  IconServerOff,
 } from '@tabler/icons-react';
 import { getIconById } from './lib/brandIcons.js';
 import PageHeader from './components/PageHeader.jsx';
@@ -26,6 +31,7 @@ import TrendIndicator from './components/TrendIndicator.jsx';
 import LastSaved from './components/LastSaved.jsx';
 import Tooltip from './components/Tooltip.jsx';
 import Sparkline from './components/Sparkline.jsx';
+import { useAlerts } from './contexts/AlertsContext.jsx';
 
 function StatCard({ icon: Icon, color, value, title, subtitle, to, trend, previousValue }) {
   return (
@@ -177,7 +183,16 @@ function PingServiceCard({ config, ms, previousMs, history = [], loading, isExpa
   );
 }
 
+const ALERT_ICONS = {
+  server_offline: IconServerOff,
+  mikrotik_unreachable: IconServerOff,
+  high_cpu: IconCpu,
+  high_ram: IconDeviceDesktop,
+  high_hdd: IconDatabase,
+};
+
 function Dashboard() {
+  const { alerts, loading: alertsLoading, refresh: refreshAlerts } = useAlerts();
   // Глобальный поиск удалён по требованию UX
   const [stats, setStats] = useState({
     domainsCount: null,
@@ -357,12 +372,12 @@ function Dashboard() {
         title="Панель"
         icon={<IconCloud size={24} />}
         actions={(
-          <div className="d-flex align-items-center gap-3">
+          <div className="header-actions d-flex align-items-center flex-wrap gap-2 gap-sm-3">
             {lastFetchTime && (
               <LastSaved timestamp={lastFetchTime} variant="compact" />
             )}
             <Tooltip content="Обновить данные" shortcut="⌘R">
-              <button className="btn btn-outline-primary" onClick={() => window.location.reload()}>
+              <button className="btn btn-outline-primary btn-sm" onClick={() => window.location.reload()}>
                 <IconRefresh className="me-2" /> Обновить
               </button>
             </Tooltip>
@@ -371,12 +386,12 @@ function Dashboard() {
       />
 
       {/* Пинг до сервисов (список из настроек / Пинг сервисов) */}
-      <div className="d-flex align-items-center justify-content-between mb-2">
+      <div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2 mb-2">
         <h3 className="mb-0">Пинг сервисов</h3>
         <Tooltip content="Принудительно обновить пинг (без учёта кэша), история и тренд накапливаются">
           <button
             type="button"
-            className="btn btn-outline-primary btn-sm"
+            className="btn btn-outline-primary btn-sm w-100 w-sm-auto"
             onClick={() => fetchPingServices(true)}
             disabled={pingLoading}
           >
@@ -389,7 +404,7 @@ function Dashboard() {
         {pingServicesConfig.map((config) => (
           <div
             key={config.id}
-            className={expandedPingId === config.id ? 'col-12' : 'col-6 col-md-3'}
+            className={expandedPingId === config.id ? 'col-12' : 'col-12 col-sm-6 col-md-3'}
           >
             <PingServiceCard
               config={config}
@@ -407,9 +422,62 @@ function Dashboard() {
         ))}
       </div>
 
+      {/* Активные оповещения */}
+      <div className="mb-4">
+        <div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2 mb-2">
+          <h3 className="mb-0 d-flex align-items-center gap-2">
+            <IconBell size={24} />
+            Активные оповещения
+            {alerts.length > 0 && (
+              <span className="badge bg-danger rounded-pill">{alerts.length}</span>
+            )}
+          </h3>
+          <button
+            type="button"
+            className="btn btn-outline-primary btn-sm"
+            onClick={() => refreshAlerts()}
+            disabled={alertsLoading}
+          >
+            <IconRefresh className={alertsLoading ? 'spin me-1' : 'me-1'} size={16} />
+            Обновить
+          </button>
+        </div>
+        {alerts.length === 0 && !alertsLoading && (
+          <div className="card">
+            <div className="card-body text-center text-muted py-4">
+              Нет активных оповещений
+            </div>
+          </div>
+        )}
+        {alerts.length > 0 && (
+          <div className="card">
+            <div className="list-group list-group-flush">
+              {alerts.map((alert) => {
+                const Icon = ALERT_ICONS[alert.type] || IconAlertTriangle;
+                return (
+                  <Link
+                    key={alert.id}
+                    to={alert.link || '/resource-stats'}
+                    className="list-group-item list-group-item-action d-flex align-items-center gap-3"
+                  >
+                    <span className={`avatar avatar-sm flex-shrink-0 bg-${alert.severity === 'critical' ? 'danger' : 'warning'}-lt text-${alert.severity === 'critical' ? 'danger' : 'warning'}`}>
+                      <Icon size={20} />
+                    </span>
+                    <div className="min-w-0 flex-grow-1">
+                      <div className="fw-semibold">{alert.title}</div>
+                      <div className="text-muted small">{alert.description}</div>
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
       {/* Основные метрики */}
-      <div className="row g-3 mb-4">
+      <div className="row g-2 g-md-3 mb-4">
-        <div className="col-md-3">
+        <div className="col-6 col-lg-3">
           <div className="animate-in">
             <StatCard
               icon={IconWorld}
@@ -423,7 +491,7 @@ function Dashboard() {
             />
           </div>
         </div>
-        <div className="col-md-3">
+        <div className="col-6 col-lg-3">
           <div className="animate-in" style={{animationDelay: '0.1s'}}>
             <StatCard
               icon={IconNetwork}
@@ -437,7 +505,7 @@ function Dashboard() {
             />
           </div>
         </div>
-        <div className="col-md-3">
+        <div className="col-6 col-lg-3">
           <div className="animate-in" style={{animationDelay: '0.2s'}}>
             <StatCard
               icon={IconNetwork}
@@ -451,7 +519,7 @@ function Dashboard() {
             />
           </div>
         </div>
-        <div className="col-md-3">
+        <div className="col-6 col-lg-3">
           <div className="animate-in" style={{animationDelay: '0.3s'}}>
             <StatCard
               icon={IconServer}
@@ -468,8 +536,8 @@ function Dashboard() {
       </div>
 
       {/* Дополнительные метрики */}
-      <div className="row g-3 mb-4 justify-content-center">
+      <div className="row g-2 g-md-3 mb-4 justify-content-center">
-        <div className="col-sm-6 col-md-3">
+        <div className="col-6 col-md-6 col-lg-3">
           <MetricCard
             title="Стран"
             value={loading ? '...' : stats.countriesCount ?? '—'}
@@ -478,7 +546,7 @@ function Dashboard() {
             description="Географическое покрытие"
           />
         </div>
-        <div className="col-sm-6 col-md-3">
+        <div className="col-6 col-md-6 col-lg-3">
           <MetricCard
             title="Провайдеров"
             value={loading ? '...' : stats.providersCount ?? '—'}
@@ -487,7 +555,7 @@ function Dashboard() {
             description="Облачные провайдеры"
           />
         </div>
-        <div className="col-sm-6 col-md-3">
+        <div className="col-6 col-md-6 col-lg-3">
           <MetricCard
             title="Онлайн серверов"
             value={loading ? '...' : `${stats.onlineServers ?? '—'}/${stats.totalServers ?? '—'}`}
@@ -496,7 +564,7 @@ function Dashboard() {
             description="Активные серверы"
           />
         </div>
-        <div className="col-sm-6 col-md-3">
+        <div className="col-6 col-md-6 col-lg-3">
           <MetricCard
             title="Последнее обновление"
             value={loading ? '...' : (stats.lastModified ? stats.lastModified : '—')}

frontend/src/DataManager.jsx

@@ -212,8 +212,8 @@ function DataManager({ entityName, entityKey, placeholder }) {
         </div>
       )}
 
-      <div className="row">
+      <div className="row g-2 g-lg-3">
-        <div className="col-lg-4">
+        <div className="col-12 col-lg-4">
           {/* Add New Item Card */}
           <div className="card card-md">
             <div className="card-header">
@@ -333,11 +333,11 @@ function DataManager({ entityName, entityKey, placeholder }) {
           </div>
         </div>
 
-        <div className="col-lg-8">
+        <div className="col-12 col-lg-8">
           <div className="card">
-            <div className="card-header d-flex justify-content-between align-items-center">
+            <div className="card-header d-flex flex-column flex-md-row justify-content-between align-items-stretch align-items-md-center gap-2">
               <h3 className="card-title mb-0">Список {entityName === 'домен' ? 'доменов' : entityName}</h3>
-              <div className="d-flex gap-2 w-50">
+              <div className="d-flex flex-wrap gap-2 flex-grow-1 flex-md-grow-0">
                 {/* Фильтр по шлюзу */}
                 <select className="form-select w-auto" value={filterType} onChange={e => { setFilterType(e.target.value); setCurrentPage(1); }}>
                   <option value="">Все шлюзы</option>

frontend/src/DomainsNewManager.jsx

@@ -950,10 +950,10 @@ function DomainsNewManager() {
               <button type="button" className="btn-close" onClick={() => setShowDiff(false)}></button>
               <div className="modal-header"><h3 className="modal-title">Изменения</h3></div>
               <div className="modal-body">
-                <div className="row g-3">
+                <div className="row g-2 g-md-3">
-                  <div className="col-md-4"><div className="card"><div className="card-body"><strong>Добавлено</strong><div className="text-muted">{diff.added.length}</div></div></div></div>
+                  <div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Добавлено</strong><div className="text-muted">{diff.added.length}</div></div></div></div>
-                  <div className="col-md-4"><div className="card"><div className="card-body"><strong>Удалено</strong><div className="text-muted">{diff.removed.length}</div></div></div></div>
+                  <div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Удалено</strong><div className="text-muted">{diff.removed.length}</div></div></div></div>
-                  <div className="col-md-4"><div className="card"><div className="card-body"><strong>Изменено</strong><div className="text-muted">{diff.changed.length}</div></div></div></div>
+                  <div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Изменено</strong><div className="text-muted">{diff.changed.length}</div></div></div></div>
                 </div>
               </div>
               <div className="modal-footer">

frontend/src/ServerManager.jsx

@@ -800,8 +800,8 @@ function ServerManager() {
             {/* 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 flex-column flex-sm-row flex-wrap align-items-stretch align-items-sm-center justify-content-between gap-2">
-                  <div className="d-flex align-items-center gap-2">
+                  <div className="d-flex flex-wrap align-items-center gap-2">
                     {/* Открыть фильтры (offcanvas) */}
                     <button
                       type="button"
@@ -1087,22 +1087,22 @@ function ServerManager() {
               <h3 className="card-title mb-0">Добавить связь между серверами</h3>
             </div>
             <div className="card-body">
-              <div className="row g-3">
+              <div className="row g-2 g-md-3">
-                <div className="col-md-6">
+                <div className="col-12 col-md-6">
                   <label className="form-label">Сервер A</label>
                   <select className="form-select" value={newConnection.from} onChange={e => setNewConnection({ ...newConnection, from: e.target.value })}>
                     <option value="">Выберите сервер</option>
                     {servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)}
                   </select>
                 </div>
-                <div className="col-md-6">
+                <div className="col-12 col-md-6">
                   <label className="form-label">Сервер B</label>
                   <select className="form-select" value={newConnection.to} onChange={e => setNewConnection({ ...newConnection, to: e.target.value })}>
                     <option value="">Выберите сервер</option>
                     {servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)}
                   </select>
                 </div>
-                <div className="col-md-4">
+                <div className="col-12 col-md-4">
                   <label className="form-label">Тип туннеля</label>
                   <select className="form-select" value={newConnection.tunnelType} onChange={e => setNewConnection({ ...newConnection, tunnelType: e.target.value })}>
                     <option value="GRE">GRE</option>
@@ -1111,11 +1111,11 @@ function ServerManager() {
                     <option value="OpenVPN">OpenVPN</option>
                   </select>
                 </div>
-                <div className="col-md-4">
+                <div className="col-12 col-md-4">
                   <label className="form-label">IP туннеля A</label>
                   <input className="form-control" value={newConnection.ipA} onChange={e => setNewConnection({ ...newConnection, ipA: e.target.value })} placeholder="10.10.100.1" />
                 </div>
-                <div className="col-md-4">
+                <div className="col-12 col-md-4">
                   <label className="form-label">IP туннеля B</label>
                   <input className="form-control" value={newConnection.ipB} onChange={e => setNewConnection({ ...newConnection, ipB: e.target.value })} placeholder="10.10.100.2" />
                 </div>
@@ -1255,8 +1255,8 @@ function ServerManager() {
             <span className="badge bg-blue-lt text-blue">{newConnection.to || 'B'}</span>
           </div>
         </div>
-        <div className="row g-3">
+        <div className="row g-2 g-md-3">
-          <div className="col-md-4">
+          <div className="col-12 col-md-4">
             <FormField
               label="Туннель"
               name="tunnelType"
@@ -1272,7 +1272,7 @@ function ServerManager() {
               ]}
             />
           </div>
-          <div className="col-md-4">
+          <div className="col-12 col-md-4">
             <FormField
               label="IP сервера A"
               name="ipA"
@@ -1282,7 +1282,7 @@ function ServerManager() {
               required
             />
           </div>
-          <div className="col-md-4">
+          <div className="col-12 col-md-4">
             <FormField
               label="IP сервера B"
               name="ipB"

frontend/src/SettingsPage.jsx

@@ -577,7 +577,7 @@ export default function SettingsPage() {
               <>
                 <SectionHeading title="Сеть и AS" icon={IconNetwork} />
                 <div className="row g-2">
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Базовая AS"
                       name="baseAS"
@@ -597,7 +597,7 @@ export default function SettingsPage() {
               <>
                 <SectionHeading title="Пинг через MikroTik" icon={IconCloud} />
                 <div className="row g-2">
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Домен для пинга"
                       name="pingDomain"
@@ -609,7 +609,7 @@ export default function SettingsPage() {
                       disabled={saving}
                     />
                   </div>
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Срок кеша пинга (мин)"
                       name="pingCacheMinutes"
@@ -622,7 +622,7 @@ export default function SettingsPage() {
                       min={0}
                     />
                   </div>
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Кеш пингов на карте сети (сек)"
                       name="networkMapPingCacheSeconds"
@@ -638,7 +638,7 @@ export default function SettingsPage() {
                   <div className="col-12 mt-3">
                     <h4 className="subheader">Измерение скорости (интерфейсы)</h4>
                   </div>
-                  <div className="col-md-4">
+                  <div className="col-12 col-md-4">
                     <label className="form-label">Протокол измерения</label>
                     <select
                       className="form-select"
@@ -656,7 +656,7 @@ export default function SettingsPage() {
                       умолчанию для инструментов RouterOS.
                     </div>
                   </div>
-                  <div className="col-md-4">
+                  <div className="col-12 col-md-4">
                     <FormField
                       label="Время замера (сек)"
                       name="interfaceSpeedTestDurationSeconds"
@@ -670,7 +670,7 @@ export default function SettingsPage() {
                       max={600}
                     />
                   </div>
-                  <div className="col-md-4">
+                  <div className="col-12 col-md-4">
                     <FormField
                       label="Кеш результата замера (мин)"
                       name="interfaceSpeedTestCacheMinutes"
@@ -750,7 +750,7 @@ export default function SettingsPage() {
                 </div>
                 {pingServicesSource === 'router' && (
                   <div className="row g-2">
-                    <div className="col-md-6">
+                    <div className="col-12 col-md-6">
                       <label className="form-label">Домашний роутер</label>
                       <div className={saving ? 'opacity-75 pe-none' : ''}>
                         <ServerAutocompleteInput
@@ -769,7 +769,7 @@ export default function SettingsPage() {
                         первый jumphost.
                       </div>
                     </div>
-                    <div className="col-md-6">
+                    <div className="col-12 col-md-6">
                       <FormField
                         label="IP шлюза (не обязательно)"
                         name="pingServicesGatewayIp"
@@ -793,7 +793,7 @@ export default function SettingsPage() {
                   Настройки страницы «Uptime Monitor»: интервал проверки доступности Jumphost/Home и способ проверки.
                 </p>
                 <div className="row g-2">
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Интервал проверки (сек)"
                       name="uptimeMonitorIntervalSeconds"
@@ -807,7 +807,7 @@ export default function SettingsPage() {
                       max={86400}
                     />
                   </div>
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <label className="form-label">Тип проверки</label>
                     <select
                       className="form-select"
@@ -823,7 +823,7 @@ export default function SettingsPage() {
                       HTTP: подключение к RouterOS API. Внутренний: пинг через туннель (как на карте сети). Внешний: пинг внешнего IP с другого jumphost.
                     </div>
                   </div>
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Кеш результатов (сек)"
                       name="uptimeMonitorCacheSeconds"
@@ -872,7 +872,7 @@ export default function SettingsPage() {
               <>
                 <SectionHeading title="Настройка PTR зоны" icon={IconWorld} />
                 <div className="row g-2">
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Заменить в DNS домене"
                       name="ptrZoneReplaceFrom"
@@ -884,7 +884,7 @@ export default function SettingsPage() {
                       disabled={saving}
                     />
                   </div>
-                  <div className="col-md-6">
+                  <div className="col-12 col-md-6">
                     <FormField
                       label="Заменить на"
                       name="ptrZoneReplaceTo"

frontend/src/components/AlertsBell.jsx

@@ -0,0 +1,96 @@
+import { Link } from 'react-router-dom';
+import { IconBell, IconAlertTriangle, IconServerOff, IconCpu, IconDeviceDesktop, IconDatabase } from '@tabler/icons-react';
+import { useAlerts } from '../contexts/AlertsContext.jsx';
+
+const SEVERITY_ICONS = {
+  critical: IconAlertTriangle,
+  warning: IconAlertTriangle,
+};
+
+const TYPE_ICONS = {
+  server_offline: IconServerOff,
+  mikrotik_unreachable: IconServerOff,
+  high_cpu: IconCpu,
+  high_ram: IconDeviceDesktop,
+  high_hdd: IconDatabase,
+};
+
+function AlertIcon({ type, severity }) {
+  const Icon = TYPE_ICONS[type] || SEVERITY_ICONS[severity] || IconAlertTriangle;
+  const colorClass = severity === 'critical' ? 'text-danger' : 'text-warning';
+  return <Icon size={18} className={colorClass} />;
+}
+
+export default function AlertsBell() {
+  const { alerts, total, loading, refresh } = useAlerts();
+
+  return (
+    <div className="nav-item dropdown">
+      <a
+        href="#"
+        className="nav-link px-2 dropdown-toggle position-relative"
+        data-bs-toggle="dropdown"
+        onClick={(e) => e.preventDefault()}
+        aria-label={`Оповещения: ${total} активных`}
+        title="Оповещения о проблемах"
+      >
+        <IconBell size={20} />
+        {total > 0 && (
+          <span className="badge badge-sm bg-danger position-absolute top-0 end-0 translate-middle rounded-pill">
+            {total > 99 ? '99+' : total}
+          </span>
+        )}
+      </a>
+      <div className="dropdown-menu dropdown-menu-end dropdown-menu-card" style={{ width: '320px', maxWidth: '95vw' }}>
+        <div className="card-header d-flex align-items-center justify-content-between py-2">
+          <span className="fw-semibold">Оповещения</span>
+          <button
+            type="button"
+            className="btn btn-ghost-secondary btn-sm"
+            onClick={(e) => { e.preventDefault(); refresh(); }}
+            disabled={loading}
+            title="Обновить"
+          >
+            {loading ? '…' : '↻'}
+          </button>
+        </div>
+        <div className="list-group list-group-flush list-group-hoverable" style={{ maxHeight: '320px', overflowY: 'auto' }}>
+          {alerts.length === 0 && !loading && (
+            <div className="list-group-item text-muted small text-center py-3">
+              Нет активных оповещений
+            </div>
+          )}
+          {alerts.slice(0, 20).map((alert) => (
+            <Link
+              key={alert.id}
+              to={alert.link || '/dashboard'}
+              className="list-group-item list-group-item-action py-2"
+            >
+              <div className="d-flex align-items-start gap-2">
+                <span className="flex-shrink-0 mt-1">
+                  <AlertIcon type={alert.type} severity={alert.severity} />
+                </span>
+                <div className="min-w-0 flex-grow-1">
+                  <div className="fw-medium small">{alert.title}</div>
+                  <div className="text-muted small text-truncate" title={alert.description}>
+                    {alert.entity}
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+          {alerts.length > 20 && (
+            <div className="list-group-item text-muted small text-center py-2">
+              и ещё {alerts.length - 20}…
+            </div>
+          )}
+        </div>
+        <div className="card-footer py-2">
+          <Link to="/dashboard" className="btn btn-sm btn-outline-primary w-100">
+            Перейти к панели
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/CommunityStats.jsx

@@ -100,8 +100,8 @@ function CommunityStats({ communities = [] }) {
         ) : (
           <>
             {/* Общая статистика */}
-            <div className="row mb-4">
+            <div className="row g-2 g-md-3 mb-4">
-              <div className="col-md-4">
+              <div className="col-6 col-md-4">
                 <div className="card card-sm bg-blue-lt">
                   <div className="card-body">
                     <div className="h1 mb-0">{stats.length}</div>
@@ -109,7 +109,7 @@ function CommunityStats({ communities = [] }) {
                   </div>
                 </div>
               </div>
-              <div className="col-md-4">
+              <div className="col-6 col-md-4">
                 <div className="card card-sm bg-green-lt">
                   <div className="card-body">
                     <div className="h1 mb-0">{totalUsage}</div>
@@ -117,7 +117,7 @@ function CommunityStats({ communities = [] }) {
                   </div>
                 </div>
               </div>
-              <div className="col-md-4">
+              <div className="col-6 col-md-4">
                 <div className="card card-sm bg-purple-lt">
                   <div className="card-body">
                     <div className="h1 mb-0">{Object.keys(statsByCategory).length}</div>
@@ -198,12 +198,12 @@ function CommunityStats({ communities = [] }) {
             {Object.keys(statsByCategory).length > 1 && (
               <div>
                 <h4 className="mb-3">По категориям</h4>
-                <div className="row g-3">
+                <div className="row g-2 g-md-3">
                   {Object.entries(statsByCategory).map(([category, items]) => {
                     const categoryTotal = items.reduce((sum, item) => sum + item.count, 0);
                     const categoryPercentage = ((categoryTotal / totalUsage) * 100).toFixed(1);
                     return (
-                      <div key={category} className="col-md-6">
+                      <div key={category} className="col-12 col-md-6">
                         <div className="card card-sm">
                           <div className="card-body">
                             <div className="d-flex justify-content-between align-items-start mb-2">

frontend/src/components/ImportModal.jsx

@@ -178,7 +178,7 @@ function ImportModal({
 
             {/* Stats */}
             <div className="row g-2">
-              <div className="col-md-6">
+              <div className="col-12 col-md-6">
                 <div className="card bg-green-lt">
                   <div className="card-body py-2">
                     <div className="d-flex align-items-center">
@@ -191,7 +191,7 @@ function ImportModal({
                   </div>
                 </div>
               </div>
-              <div className="col-md-6">
+              <div className="col-12 col-md-6">
                 <div className="card bg-red-lt">
                   <div className="card-body py-2">
                     <div className="d-flex align-items-center">

frontend/src/components/PageHeader.jsx

@@ -29,7 +29,7 @@ function PageHeader({ title, icon, pretitle, actions, meta }) {
       </div>
       {actions && (
         <div className="row mt-2">
-          <div className="col d-print-none">
+          <div className="col d-print-none overflow-auto">
             {actions}
           </div>
         </div>

frontend/src/components/QuickAddBar.jsx

@@ -59,7 +59,7 @@ function QuickAddBar({
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-        <div className="row g-3 mt-2">
+        <div className="row g-2 g-md-3 mt-2">
           <div className="col">
             <div className="card"><div className="card-body p-2">
               <div className="text-muted">Готово</div>

frontend/src/components/TopNStats.jsx

@@ -58,9 +58,9 @@ function TopNStats({ data, loading }) {
   };
 
   return (
-    <div className="row g-3">
+    <div className="row g-2 g-md-3">
       {/* Top Страны */}
-      <div className="col-md-6">
+      <div className="col-12 col-md-6">
         <div className="card h-100">
           <div className="card-header">
             <h3 className="card-title">
@@ -107,7 +107,7 @@ function TopNStats({ data, loading }) {
       </div>
 
       {/* Top Провайдеры */}
-      <div className="col-md-6">
+      <div className="col-12 col-md-6">
         <div className="card h-100">
           <div className="card-header">
             <h3 className="card-title">

frontend/src/components/server/LinkGeneratorModal.jsx

@@ -55,8 +55,8 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
             <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div className="modal-body">
-            <div className="row">
+            <div className="row g-2">
-              <div className="col-md-6">
+              <div className="col-12 col-md-6">
                 <h6 className="mb-3">Настройки URL</h6>
                 <div className="mb-3">
                   <label className="form-label">Базовый URL</label>
@@ -99,7 +99,7 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
                   />
                 </div>
               </div>
-              <div className="col-md-6">
+              <div className="col-12 col-md-6">
                 <div className="mb-3">
                   <label className="form-label">Telegram Gateway</label>
                   <input

frontend/src/contexts/AlertsContext.jsx

@@ -0,0 +1,57 @@
+import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
+import api from '../lib/api.js';
+
+const AlertsContext = createContext(null);
+
+const REFRESH_INTERVAL_MS = 60 * 1000; // 1 минута
+
+export function AlertsProvider({ children }) {
+  const [alerts, setAlerts] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const intervalRef = useRef(null);
+
+  const fetchAlerts = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const { data } = await api.get('/alerts');
+      setAlerts(Array.isArray(data?.alerts) ? data.alerts : []);
+    } catch (e) {
+      if (e?.name !== 'CanceledError' && e?.code !== 'ERR_CANCELED') {
+        setError(e?.message || 'Не удалось загрузить оповещения');
+        setAlerts([]);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchAlerts();
+    intervalRef.current = setInterval(fetchAlerts, REFRESH_INTERVAL_MS);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [fetchAlerts]);
+
+  const value = {
+    alerts,
+    total: alerts.length,
+    loading,
+    error,
+    refresh: fetchAlerts,
+  };
+
+  return (
+    <AlertsContext.Provider value={value}>
+      {children}
+    </AlertsContext.Provider>
+  );
+}
+
+export function useAlerts() {
+  const ctx = useContext(AlertsContext);
+  if (!ctx) throw new Error('useAlerts must be used within AlertsProvider');
+  return ctx;
+}

frontend/src/index.css

@@ -166,20 +166,29 @@ button:focus-visible,
   transform: scale(1.05);
 }
 
-/* Minimum touch target size for mobile */
+/* Minimum touch target size for mobile (Tabler / a11y) */
 @media (max-width: 768px) {
-  .btn, .page-link, .dropdown-item {
+  .btn:not(.btn-icon), .page-link, .dropdown-item {
     min-height: 44px;
-    min-width: 44px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   
   .btn-icon {
+    min-width: 44px;
+    min-height: 44px;
     width: 44px;
     height: 44px;
   }
+  
+  .navbar-toggler {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0.5rem;
+  }
 }
 
 /* Enhanced table row interactions */
@@ -429,21 +438,57 @@ button:focus-visible,
 }
 
 /* ===== Responsive Improvements ===== */
+@media (min-width: 576px) {
+  .w-sm-auto { width: auto !important; }
+}
 @media (max-width: 768px) {
-  .card-sm .avatar {
+  .card-sm .avatar,
+  .card .avatar.avatar-lg {
     width: 2.5rem;
     height: 2.5rem;
   }
   
-  .card-sm .h2 {
+  .card-sm .h2,
+  .card .h3.mb-0 {
     font-size: 1.25rem;
   }
   
   .table-responsive {
     font-size: 0.875rem;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .table-responsive .table {
+    margin-bottom: 0;
+  }
+  .table-responsive .table th,
+  .table-responsive .table td {
+    white-space: nowrap;
   }
   
   .btn-group {
     flex-wrap: wrap;
   }
+  
+  .page-title {
+    font-size: 1.35rem;
+  }
+  
+  .page-header .header-actions {
+    width: 100%;
+  }
+  
+  /* Карточки и ряды: компактные отступы на мобильных */
+  .row.g-3 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
+  .card-title { font-size: 1rem; }
+  .card-header { padding: 0.5rem 0.75rem; }
+}
+
+/* Универсальные мобильные колонки: явный full-width ниже md */
+@media (max-width: 767.98px) {
+  .row .col-md-4:not([class*="col-12"]):not([class*="col-sm"]),
+  .row .col-md-6:not([class*="col-12"]):not([class*="col-sm"]) {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
 }