From 34c128fd87a672fc8b70f05404897bc1703876e8 Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Fri, 16 Jan 2026 16:03:51 +0300
Subject: [PATCH 1/8] =?UTF-8?q?=20=D0=98=D0=BD=D1=82=D0=B5=D0=B3=D1=80?=
 =?UTF-8?q?=D0=B0=D1=86=D0=B8=D1=8F=20=D1=81=D0=B8=D1=81=D1=82=D0=B5=D0=BC?=
 =?UTF-8?q?=D1=8B=20=D0=BC=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B3=D0=B0=20=D0=B1=D0=B0=D0=BD=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                  |   9 +
 src/api/banSystem.ts         | 272 +++++++++++++
 src/locales/en.json          | 173 ++++++++-
 src/locales/ru.json          | 173 ++++++++-
 src/pages/AdminBanSystem.tsx | 722 +++++++++++++++++++++++++++++++++++
 src/pages/AdminPanel.tsx     |  13 +
 6 files changed, 1358 insertions(+), 4 deletions(-)
 create mode 100644 src/api/banSystem.ts
 create mode 100644 src/pages/AdminBanSystem.tsx

diff --git a/src/App.tsx b/src/App.tsx
index ae5c905..3c010d6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,7 @@ import AdminTariffs from './pages/AdminTariffs'
 import AdminServers from './pages/AdminServers'
 import AdminPanel from './pages/AdminPanel'
 import AdminDashboard from './pages/AdminDashboard'
+import AdminBanSystem from './pages/AdminBanSystem'
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { isAuthenticated, isLoading } = useAuthStore()
@@ -217,6 +218,14 @@ function App() {
           </AdminRoute>
         }
       />
+      <Route
+        path="/admin/ban-system"
+        element={
+          <AdminRoute>
+            <AdminBanSystem />
+          </AdminRoute>
+        }
+      />
 
       {/* Catch all */}
       <Route path="*" element={<Navigate to="/" replace />} />
diff --git a/src/api/banSystem.ts b/src/api/banSystem.ts
new file mode 100644
index 0000000..18137fd
--- /dev/null
+++ b/src/api/banSystem.ts
@@ -0,0 +1,272 @@
+import apiClient from './client'
+
+// === Types ===
+
+export interface BanSystemStatus {
+  enabled: boolean
+  configured: boolean
+}
+
+export interface BanSystemStats {
+  total_users: number
+  active_users: number
+  users_over_limit: number
+  total_requests: number
+  total_punishments: number
+  active_punishments: number
+  nodes_online: number
+  nodes_total: number
+  agents_online: number
+  agents_total: number
+  panel_connected: boolean
+  uptime_seconds: number | null
+}
+
+export interface BanUserIPInfo {
+  ip: string
+  first_seen: string | null
+  last_seen: string | null
+  node: string | null
+  request_count: number
+  country_code: string | null
+  country_name: string | null
+  city: string | null
+}
+
+export interface BanUserRequestLog {
+  timestamp: string
+  source_ip: string
+  destination: string | null
+  dest_port: number | null
+  protocol: string | null
+  action: string | null
+  node: string | null
+}
+
+export interface BanUserListItem {
+  email: string
+  unique_ip_count: number
+  total_requests: number
+  limit: number | null
+  is_over_limit: boolean
+  blocked_count: number
+  last_seen: string | null
+}
+
+export interface BanUsersListResponse {
+  users: BanUserListItem[]
+  total: number
+  offset: number
+  limit: number
+}
+
+export interface BanUserDetailResponse {
+  email: string
+  unique_ip_count: number
+  total_requests: number
+  limit: number | null
+  is_over_limit: boolean
+  blocked_count: number
+  ips: BanUserIPInfo[]
+  recent_requests: BanUserRequestLog[]
+  network_type: string | null
+}
+
+export interface BanPunishmentItem {
+  id: number | null
+  user_id: string
+  uuid: string | null
+  username: string
+  reason: string | null
+  punished_at: string
+  enable_at: string | null
+  ip_count: number
+  limit: number
+  enabled: boolean
+  enabled_at: string | null
+  node_name: string | null
+}
+
+export interface BanPunishmentsListResponse {
+  punishments: BanPunishmentItem[]
+  total: number
+}
+
+export interface BanHistoryResponse {
+  items: BanPunishmentItem[]
+  total: number
+}
+
+export interface BanUserRequest {
+  username: string
+  minutes: number
+  reason?: string
+}
+
+export interface UnbanResponse {
+  success: boolean
+  message: string
+}
+
+export interface BanNodeItem {
+  name: string
+  address: string | null
+  is_connected: boolean
+  last_seen: string | null
+  users_count: number
+  agent_stats: Record<string, unknown> | null
+}
+
+export interface BanNodesListResponse {
+  nodes: BanNodeItem[]
+  total: number
+  online: number
+}
+
+export interface BanAgentItem {
+  node_name: string
+  sent_total: number
+  dropped_total: number
+  batches_total: number
+  reconnects: number
+  failures: number
+  queue_size: number
+  queue_max: number
+  dedup_checked: number
+  dedup_skipped: number
+  filter_checked: number
+  filter_filtered: number
+  health: string
+  is_online: boolean
+  last_report: string | null
+}
+
+export interface BanAgentsSummary {
+  total_agents: number
+  online_agents: number
+  total_sent: number
+  total_dropped: number
+  avg_queue_size: number
+  healthy_count: number
+  warning_count: number
+  critical_count: number
+}
+
+export interface BanAgentsListResponse {
+  agents: BanAgentItem[]
+  summary: BanAgentsSummary | null
+  total: number
+  online: number
+}
+
+export interface BanTrafficViolationItem {
+  id: number | null
+  username: string
+  email: string | null
+  violation_type: string
+  description: string | null
+  bytes_used: number
+  bytes_limit: number
+  detected_at: string
+  resolved: boolean
+}
+
+export interface BanTrafficViolationsResponse {
+  violations: BanTrafficViolationItem[]
+  total: number
+}
+
+// === API ===
+
+export const banSystemApi = {
+  // Status
+  getStatus: async (): Promise<BanSystemStatus> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/status')
+    return response.data
+  },
+
+  // Stats
+  getStats: async (): Promise<BanSystemStats> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/stats')
+    return response.data
+  },
+
+  // Users
+  getUsers: async (params: {
+    offset?: number
+    limit?: number
+    status?: string
+  } = {}): Promise<BanUsersListResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/users', { params })
+    return response.data
+  },
+
+  getUsersOverLimit: async (limit: number = 50): Promise<BanUsersListResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/users/over-limit', {
+      params: { limit }
+    })
+    return response.data
+  },
+
+  searchUsers: async (query: string): Promise<BanUsersListResponse> => {
+    const response = await apiClient.get(`/cabinet/admin/ban-system/users/search/${encodeURIComponent(query)}`)
+    return response.data
+  },
+
+  getUser: async (email: string): Promise<BanUserDetailResponse> => {
+    const response = await apiClient.get(`/cabinet/admin/ban-system/users/${encodeURIComponent(email)}`)
+    return response.data
+  },
+
+  // Punishments
+  getPunishments: async (): Promise<BanPunishmentsListResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/punishments')
+    return response.data
+  },
+
+  unbanUser: async (userId: string): Promise<UnbanResponse> => {
+    const response = await apiClient.post(`/cabinet/admin/ban-system/punishments/${userId}/unban`)
+    return response.data
+  },
+
+  banUser: async (data: BanUserRequest): Promise<UnbanResponse> => {
+    const response = await apiClient.post('/cabinet/admin/ban-system/ban', data)
+    return response.data
+  },
+
+  getPunishmentHistory: async (query: string, limit: number = 20): Promise<BanHistoryResponse> => {
+    const response = await apiClient.get(`/cabinet/admin/ban-system/history/${encodeURIComponent(query)}`, {
+      params: { limit }
+    })
+    return response.data
+  },
+
+  // Nodes
+  getNodes: async (): Promise<BanNodesListResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/nodes')
+    return response.data
+  },
+
+  // Agents
+  getAgents: async (params: {
+    search?: string
+    health?: string
+    status?: string
+  } = {}): Promise<BanAgentsListResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/agents', { params })
+    return response.data
+  },
+
+  getAgentsSummary: async (): Promise<BanAgentsSummary> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/agents/summary')
+    return response.data
+  },
+
+  // Traffic violations
+  getTrafficViolations: async (limit: number = 50): Promise<BanTrafficViolationsResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/traffic/violations', {
+      params: { limit }
+    })
+    return response.data
+  },
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index 3c1449a..cd9293d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -439,7 +439,8 @@
       "apps": "Apps",
       "wheel": "Wheel",
       "tariffs": "Tariffs",
-      "servers": "Servers"
+      "servers": "Servers",
+      "banSystem": "Ban Monitoring"
     },
     "panel": {
       "title": "Admin Panel",
@@ -450,7 +451,8 @@
       "appsDesc": "Manage connection apps",
       "wheelDesc": "Configure fortune wheel and prizes",
       "tariffsDesc": "Manage tariff plans",
-      "serversDesc": "Configure VPN servers"
+      "serversDesc": "Configure VPN servers",
+      "banSystemDesc": "Ban monitoring and violations"
     },
     "wheel": {
       "title": "Fortune Wheel Settings",
@@ -744,6 +746,173 @@
       "noTariffs": "No tariffs"
     }
   },
+  "banSystem": {
+    "title": "Ban Monitoring",
+    "subtitle": "BedolagaBan system management",
+    "notConfigured": "Ban system is not configured",
+    "notConfiguredDesc": "Set BAN_SYSTEM_API_URL and BAN_SYSTEM_API_TOKEN in configuration",
+    "loadError": "Failed to load data",
+    "tabs": {
+      "dashboard": "Dashboard",
+      "users": "Users",
+      "punishments": "Bans",
+      "nodes": "Nodes",
+      "agents": "Agents",
+      "violations": "Violations"
+    },
+    "dashboard": {
+      "totalUsers": "Total Users",
+      "activeUsers": "Active Users",
+      "usersOverLimit": "Over Limit",
+      "totalRequests": "Total Requests",
+      "totalPunishments": "Total Punishments",
+      "activePunishments": "Active Bans",
+      "nodesOnline": "Nodes Online",
+      "agentsOnline": "Agents Online",
+      "panelConnected": "Panel Connected",
+      "panelDisconnected": "Panel Disconnected",
+      "uptime": "Uptime"
+    },
+    "users": {
+      "title": "Users",
+      "searchPlaceholder": "Search by email...",
+      "email": "Email",
+      "uniqueIps": "Unique IPs",
+      "requests": "Requests",
+      "limit": "Limit",
+      "status": "Status",
+      "lastSeen": "Last Seen",
+      "overLimit": "Over Limit",
+      "normal": "Normal",
+      "noLimit": "No Limit",
+      "noUsers": "No users found",
+      "viewDetails": "View Details",
+      "filter": {
+        "all": "All",
+        "overLimit": "Over Limit",
+        "normal": "Normal"
+      }
+    },
+    "userDetail": {
+      "title": "User Details",
+      "email": "Email",
+      "uniqueIps": "Unique IPs",
+      "totalRequests": "Total Requests",
+      "limit": "Device Limit",
+      "status": "Status",
+      "networkType": "Network Type",
+      "ipHistory": "IP History",
+      "recentRequests": "Recent Requests",
+      "ip": "IP Address",
+      "firstSeen": "First Seen",
+      "lastSeen": "Last Seen",
+      "node": "Node",
+      "requestCount": "Requests",
+      "country": "Country",
+      "city": "City",
+      "timestamp": "Timestamp",
+      "sourceIp": "Source IP",
+      "destination": "Destination",
+      "port": "Port",
+      "protocol": "Protocol",
+      "action": "Action",
+      "noIps": "No IP data",
+      "noRequests": "No request data",
+      "ban": "Ban",
+      "close": "Close"
+    },
+    "punishments": {
+      "title": "Active Bans",
+      "username": "User",
+      "reason": "Reason",
+      "punishedAt": "Banned At",
+      "enableAt": "Unban At",
+      "ipCount": "IPs",
+      "limit": "Limit",
+      "node": "Node",
+      "actions": "Actions",
+      "unban": "Unban",
+      "noPunishments": "No active bans",
+      "unbanConfirm": "Unban user {{username}}?",
+      "unbanSuccess": "User unbanned",
+      "unbanError": "Unban failed",
+      "history": "Ban History",
+      "searchHistory": "Search history...",
+      "noHistory": "No history found"
+    },
+    "banModal": {
+      "title": "Ban User",
+      "username": "Username",
+      "usernamePlaceholder": "Enter username",
+      "duration": "Duration (minutes)",
+      "durationPlaceholder": "Enter duration in minutes",
+      "reason": "Reason",
+      "reasonPlaceholder": "Enter ban reason (optional)",
+      "cancel": "Cancel",
+      "ban": "Ban",
+      "success": "User banned",
+      "error": "Ban failed"
+    },
+    "nodes": {
+      "title": "Nodes",
+      "name": "Name",
+      "address": "Address",
+      "status": "Status",
+      "lastSeen": "Last Seen",
+      "usersCount": "Users",
+      "online": "Online",
+      "offline": "Offline",
+      "noNodes": "No nodes found",
+      "total": "Total",
+      "onlineCount": "Online"
+    },
+    "agents": {
+      "title": "Agents",
+      "nodeName": "Node",
+      "status": "Status",
+      "health": "Health",
+      "sent": "Sent",
+      "dropped": "Dropped",
+      "batches": "Batches",
+      "reconnects": "Reconnects",
+      "failures": "Failures",
+      "queue": "Queue",
+      "dedup": "Deduplication",
+      "filter": "Filtering",
+      "lastReport": "Last Report",
+      "online": "Online",
+      "offline": "Offline",
+      "healthy": "Healthy",
+      "warning": "Warning",
+      "critical": "Critical",
+      "noAgents": "No agents found",
+      "summary": {
+        "title": "Summary",
+        "totalAgents": "Total Agents",
+        "onlineAgents": "Online",
+        "totalSent": "Total Sent",
+        "totalDropped": "Total Dropped",
+        "avgQueueSize": "Avg Queue Size",
+        "healthyCount": "Healthy",
+        "warningCount": "Warning",
+        "criticalCount": "Critical"
+      }
+    },
+    "violations": {
+      "title": "Traffic Violations",
+      "username": "User",
+      "email": "Email",
+      "type": "Type",
+      "description": "Description",
+      "bytesUsed": "Used",
+      "bytesLimit": "Limit",
+      "detectedAt": "Detected At",
+      "resolved": "Resolved",
+      "noViolations": "No violations found",
+      "yes": "Yes",
+      "no": "No"
+    }
+  },
   "profile": {
     "title": "Profile",
     "accountInfo": "Account Information",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index c070a8b..6f07e37 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -439,7 +439,8 @@
       "apps": "Приложения",
       "wheel": "Колесо",
       "tariffs": "Тарифы",
-      "servers": "Серверы"
+      "servers": "Серверы",
+      "banSystem": "Мониторинг банов"
     },
     "panel": {
       "title": "Панель администратора",
@@ -450,7 +451,8 @@
       "appsDesc": "Управление приложениями для подключения",
       "wheelDesc": "Настройка колеса удачи и призов",
       "tariffsDesc": "Управление тарифными планами",
-      "serversDesc": "Настройка VPN серверов"
+      "serversDesc": "Настройка VPN серверов",
+      "banSystemDesc": "Мониторинг банов и нарушений"
     },
     "wheel": {
       "title": "Настройки колеса удачи",
@@ -744,6 +746,173 @@
       "noTariffs": "Нет тарифов"
     }
   },
+  "banSystem": {
+    "title": "Мониторинг банов",
+    "subtitle": "Управление системой банов BedolagaBan",
+    "notConfigured": "Ban система не настроена",
+    "notConfiguredDesc": "Укажите BAN_SYSTEM_API_URL и BAN_SYSTEM_API_TOKEN в конфигурации",
+    "loadError": "Не удалось загрузить данные",
+    "tabs": {
+      "dashboard": "Статистика",
+      "users": "Пользователи",
+      "punishments": "Баны",
+      "nodes": "Ноды",
+      "agents": "Агенты",
+      "violations": "Нарушения"
+    },
+    "dashboard": {
+      "totalUsers": "Всего пользователей",
+      "activeUsers": "Активных пользователей",
+      "usersOverLimit": "Превысили лимит",
+      "totalRequests": "Всего запросов",
+      "totalPunishments": "Всего наказаний",
+      "activePunishments": "Активных банов",
+      "nodesOnline": "Нод онлайн",
+      "agentsOnline": "Агентов онлайн",
+      "panelConnected": "Панель подключена",
+      "panelDisconnected": "Панель отключена",
+      "uptime": "Аптайм"
+    },
+    "users": {
+      "title": "Пользователи",
+      "searchPlaceholder": "Поиск по email...",
+      "email": "Email",
+      "uniqueIps": "Уникальных IP",
+      "requests": "Запросов",
+      "limit": "Лимит",
+      "status": "Статус",
+      "lastSeen": "Последняя активность",
+      "overLimit": "Превышен лимит",
+      "normal": "Норма",
+      "noLimit": "Без лимита",
+      "noUsers": "Пользователи не найдены",
+      "viewDetails": "Подробнее",
+      "filter": {
+        "all": "Все",
+        "overLimit": "Превысили лимит",
+        "normal": "В норме"
+      }
+    },
+    "userDetail": {
+      "title": "Детали пользователя",
+      "email": "Email",
+      "uniqueIps": "Уникальных IP",
+      "totalRequests": "Всего запросов",
+      "limit": "Лимит устройств",
+      "status": "Статус",
+      "networkType": "Тип сети",
+      "ipHistory": "История IP",
+      "recentRequests": "Последние запросы",
+      "ip": "IP адрес",
+      "firstSeen": "Первое подключение",
+      "lastSeen": "Последнее подключение",
+      "node": "Нода",
+      "requestCount": "Запросов",
+      "country": "Страна",
+      "city": "Город",
+      "timestamp": "Время",
+      "sourceIp": "IP источника",
+      "destination": "Назначение",
+      "port": "Порт",
+      "protocol": "Протокол",
+      "action": "Действие",
+      "noIps": "Нет данных об IP",
+      "noRequests": "Нет данных о запросах",
+      "ban": "Забанить",
+      "close": "Закрыть"
+    },
+    "punishments": {
+      "title": "Активные баны",
+      "username": "Пользователь",
+      "reason": "Причина",
+      "punishedAt": "Забанен",
+      "enableAt": "Разбан в",
+      "ipCount": "IP",
+      "limit": "Лимит",
+      "node": "Нода",
+      "actions": "Действия",
+      "unban": "Разбанить",
+      "noPunishments": "Активных банов нет",
+      "unbanConfirm": "Разбанить пользователя {{username}}?",
+      "unbanSuccess": "Пользователь разбанен",
+      "unbanError": "Ошибка разбана",
+      "history": "История банов",
+      "searchHistory": "Поиск истории...",
+      "noHistory": "История не найдена"
+    },
+    "banModal": {
+      "title": "Забанить пользователя",
+      "username": "Username",
+      "usernamePlaceholder": "Введите username",
+      "duration": "Длительность (минуты)",
+      "durationPlaceholder": "Введите длительность в минутах",
+      "reason": "Причина",
+      "reasonPlaceholder": "Введите причину бана (опционально)",
+      "cancel": "Отмена",
+      "ban": "Забанить",
+      "success": "Пользователь забанен",
+      "error": "Ошибка бана"
+    },
+    "nodes": {
+      "title": "Ноды",
+      "name": "Название",
+      "address": "Адрес",
+      "status": "Статус",
+      "lastSeen": "Последняя активность",
+      "usersCount": "Пользователей",
+      "online": "Онлайн",
+      "offline": "Оффлайн",
+      "noNodes": "Ноды не найдены",
+      "total": "Всего",
+      "onlineCount": "Онлайн"
+    },
+    "agents": {
+      "title": "Агенты",
+      "nodeName": "Нода",
+      "status": "Статус",
+      "health": "Здоровье",
+      "sent": "Отправлено",
+      "dropped": "Отброшено",
+      "batches": "Пакетов",
+      "reconnects": "Переподключений",
+      "failures": "Ошибок",
+      "queue": "Очередь",
+      "dedup": "Дедупликация",
+      "filter": "Фильтрация",
+      "lastReport": "Последний отчёт",
+      "online": "Онлайн",
+      "offline": "Оффлайн",
+      "healthy": "Здоров",
+      "warning": "Предупреждение",
+      "critical": "Критический",
+      "noAgents": "Агенты не найдены",
+      "summary": {
+        "title": "Сводка",
+        "totalAgents": "Всего агентов",
+        "onlineAgents": "Онлайн",
+        "totalSent": "Отправлено",
+        "totalDropped": "Отброшено",
+        "avgQueueSize": "Средний размер очереди",
+        "healthyCount": "Здоровых",
+        "warningCount": "С предупреждениями",
+        "criticalCount": "Критических"
+      }
+    },
+    "violations": {
+      "title": "Нарушения трафика",
+      "username": "Пользователь",
+      "email": "Email",
+      "type": "Тип",
+      "description": "Описание",
+      "bytesUsed": "Использовано",
+      "bytesLimit": "Лимит",
+      "detectedAt": "Обнаружено",
+      "resolved": "Решено",
+      "noViolations": "Нарушений не обнаружено",
+      "yes": "Да",
+      "no": "Нет"
+    }
+  },
   "profile": {
     "title": "Профиль",
     "accountInfo": "Информация об аккаунте",
diff --git a/src/pages/AdminBanSystem.tsx b/src/pages/AdminBanSystem.tsx
new file mode 100644
index 0000000..05869e4
--- /dev/null
+++ b/src/pages/AdminBanSystem.tsx
@@ -0,0 +1,722 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  banSystemApi,
+  type BanSystemStatus,
+  type BanSystemStats,
+  type BanUsersListResponse,
+  type BanUserDetailResponse,
+  type BanPunishmentsListResponse,
+  type BanNodesListResponse,
+  type BanAgentsListResponse,
+  type BanTrafficViolationsResponse,
+} from '../api/banSystem'
+
+// Icons
+const ShieldIcon = () => (
+  <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+  </svg>
+)
+
+const UsersIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+  </svg>
+)
+
+const BanIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+  </svg>
+)
+
+const ServerIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
+  </svg>
+)
+
+const AgentIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9.348 14.651a3.75 3.75 0 010-5.303m5.304 0a3.75 3.75 0 010 5.303m-7.425 2.122a6.75 6.75 0 010-9.546m9.546 0a6.75 6.75 0 010 9.546M5.106 18.894c-3.808-3.808-3.808-9.98 0-13.789m13.788 0c3.808 3.808 3.808 9.981 0 13.79M12 12h.008v.007H12V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+  </svg>
+)
+
+const WarningIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+  </svg>
+)
+
+const RefreshIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+  </svg>
+)
+
+const ChartIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+  </svg>
+)
+
+const SearchIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+  </svg>
+)
+
+type TabType = 'dashboard' | 'users' | 'punishments' | 'nodes' | 'agents' | 'violations'
+
+interface StatCardProps {
+  title: string
+  value: string | number
+  subtitle?: string
+  icon: React.ReactNode
+  color: 'accent' | 'success' | 'warning' | 'error' | 'info'
+}
+
+function StatCard({ title, value, subtitle, icon, color }: StatCardProps) {
+  const colorClasses = {
+    accent: 'bg-accent-500/20 text-accent-400',
+    success: 'bg-success-500/20 text-success-400',
+    warning: 'bg-warning-500/20 text-warning-400',
+    error: 'bg-error-500/20 text-error-400',
+    info: 'bg-info-500/20 text-info-400',
+  }
+
+  return (
+    <div className="bg-dark-800/50 backdrop-blur rounded-xl border border-dark-700 p-4 hover:border-dark-600 transition-colors">
+      <div className="flex items-start justify-between mb-2">
+        <div className={`p-2 rounded-lg ${colorClasses[color]}`}>
+          {icon}
+        </div>
+      </div>
+      <div className="text-2xl font-bold text-dark-100 mb-1">{value}</div>
+      <div className="text-sm text-dark-400">{title}</div>
+      {subtitle && <div className="text-xs text-dark-500 mt-1">{subtitle}</div>}
+    </div>
+  )
+}
+
+export default function AdminBanSystem() {
+  const { t } = useTranslation()
+  const [activeTab, setActiveTab] = useState<TabType>('dashboard')
+  const [status, setStatus] = useState<BanSystemStatus | null>(null)
+  const [stats, setStats] = useState<BanSystemStats | null>(null)
+  const [users, setUsers] = useState<BanUsersListResponse | null>(null)
+  const [selectedUser, setSelectedUser] = useState<BanUserDetailResponse | null>(null)
+  const [punishments, setPunishments] = useState<BanPunishmentsListResponse | null>(null)
+  const [nodes, setNodes] = useState<BanNodesListResponse | null>(null)
+  const [agents, setAgents] = useState<BanAgentsListResponse | null>(null)
+  const [violations, setViolations] = useState<BanTrafficViolationsResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [actionLoading, setActionLoading] = useState<string | null>(null)
+
+  useEffect(() => {
+    loadStatus()
+  }, [])
+
+  useEffect(() => {
+    if (status?.enabled && status?.configured) {
+      loadTabData(activeTab)
+    }
+  }, [activeTab, status])
+
+  const loadStatus = async () => {
+    try {
+      setLoading(true)
+      const data = await banSystemApi.getStatus()
+      setStatus(data)
+      if (!data.enabled || !data.configured) {
+        setError(t('banSystem.notConfigured'))
+      }
+    } catch {
+      setError(t('banSystem.loadError'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadTabData = async (tab: TabType) => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      switch (tab) {
+        case 'dashboard':
+          const statsData = await banSystemApi.getStats()
+          setStats(statsData)
+          break
+        case 'users':
+          const usersData = await banSystemApi.getUsers({ limit: 50 })
+          setUsers(usersData)
+          break
+        case 'punishments':
+          const punishmentsData = await banSystemApi.getPunishments()
+          setPunishments(punishmentsData)
+          break
+        case 'nodes':
+          const nodesData = await banSystemApi.getNodes()
+          setNodes(nodesData)
+          break
+        case 'agents':
+          const agentsData = await banSystemApi.getAgents()
+          setAgents(agentsData)
+          break
+        case 'violations':
+          const violationsData = await banSystemApi.getTrafficViolations()
+          setViolations(violationsData)
+          break
+      }
+    } catch {
+      setError(t('banSystem.loadError'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSearch = async () => {
+    if (!searchQuery.trim()) {
+      loadTabData('users')
+      return
+    }
+    try {
+      setLoading(true)
+      const data = await banSystemApi.searchUsers(searchQuery)
+      setUsers(data)
+    } catch {
+      setError(t('banSystem.loadError'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleViewUser = async (email: string) => {
+    try {
+      setActionLoading(email)
+      const data = await banSystemApi.getUser(email)
+      setSelectedUser(data)
+    } catch {
+      setError(t('banSystem.loadError'))
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const handleUnban = async (userId: string) => {
+    try {
+      setActionLoading(userId)
+      await banSystemApi.unbanUser(userId)
+      loadTabData('punishments')
+    } catch {
+      setError(t('banSystem.loadError'))
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const formatUptime = (seconds: number | null) => {
+    if (!seconds) return '-'
+    const hours = Math.floor(seconds / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    if (hours > 24) {
+      const days = Math.floor(hours / 24)
+      return `${days}d ${hours % 24}h`
+    }
+    return `${hours}h ${minutes}m`
+  }
+
+  const formatDate = (dateStr: string | null) => {
+    if (!dateStr) return '-'
+    return new Date(dateStr).toLocaleString()
+  }
+
+  const tabs = [
+    { id: 'dashboard' as TabType, label: t('banSystem.tabs.dashboard'), icon: <ChartIcon /> },
+    { id: 'users' as TabType, label: t('banSystem.tabs.users'), icon: <UsersIcon /> },
+    { id: 'punishments' as TabType, label: t('banSystem.tabs.punishments'), icon: <BanIcon /> },
+    { id: 'nodes' as TabType, label: t('banSystem.tabs.nodes'), icon: <ServerIcon /> },
+    { id: 'agents' as TabType, label: t('banSystem.tabs.agents'), icon: <AgentIcon /> },
+    { id: 'violations' as TabType, label: t('banSystem.tabs.violations'), icon: <WarningIcon /> },
+  ]
+
+  if (loading && !status) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (error && !status?.enabled) {
+    return (
+      <div className="flex flex-col items-center justify-center h-64 gap-4">
+        <div className="text-error-400">{error}</div>
+        <p className="text-dark-400 text-sm">{t('banSystem.configureHint')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="animate-fade-in space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="p-3 bg-error-500/20 rounded-xl">
+            <ShieldIcon />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-dark-100">{t('banSystem.title')}</h1>
+            <p className="text-dark-400">{t('banSystem.subtitle')}</p>
+          </div>
+        </div>
+        <button
+          onClick={() => loadTabData(activeTab)}
+          disabled={loading}
+          className="flex items-center gap-2 px-4 py-2 bg-dark-800 rounded-lg text-dark-300 hover:text-dark-100 hover:bg-dark-700 transition-colors disabled:opacity-50"
+        >
+          <RefreshIcon />
+          {t('common.refresh')}
+        </button>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex flex-wrap gap-2 border-b border-dark-700 pb-2">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              activeTab === tab.id
+                ? 'bg-accent-500/20 text-accent-400'
+                : 'text-dark-400 hover:text-dark-200 hover:bg-dark-800'
+            }`}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      {loading ? (
+        <div className="flex items-center justify-center h-48">
+          <div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
+        </div>
+      ) : error ? (
+        <div className="text-center py-8 text-error-400">{error}</div>
+      ) : (
+        <>
+          {/* Dashboard Tab */}
+          {activeTab === 'dashboard' && stats && (
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <StatCard
+                title={t('banSystem.stats.activeUsers')}
+                value={stats.active_users}
+                subtitle={`${t('banSystem.stats.total')}: ${stats.total_users}`}
+                icon={<UsersIcon />}
+                color="success"
+              />
+              <StatCard
+                title={t('banSystem.stats.usersOverLimit')}
+                value={stats.users_over_limit}
+                icon={<WarningIcon />}
+                color="warning"
+              />
+              <StatCard
+                title={t('banSystem.stats.activeBans')}
+                value={stats.active_punishments}
+                subtitle={`${t('banSystem.stats.total')}: ${stats.total_punishments}`}
+                icon={<BanIcon />}
+                color="error"
+              />
+              <StatCard
+                title={t('banSystem.stats.nodesOnline')}
+                value={`${stats.nodes_online}/${stats.nodes_total}`}
+                icon={<ServerIcon />}
+                color="accent"
+              />
+              <StatCard
+                title={t('banSystem.stats.agentsOnline')}
+                value={`${stats.agents_online}/${stats.agents_total}`}
+                icon={<AgentIcon />}
+                color="info"
+              />
+              <StatCard
+                title={t('banSystem.stats.totalRequests')}
+                value={stats.total_requests.toLocaleString()}
+                icon={<ChartIcon />}
+                color="accent"
+              />
+              <StatCard
+                title={t('banSystem.stats.panelStatus')}
+                value={stats.panel_connected ? t('banSystem.stats.connected') : t('banSystem.stats.disconnected')}
+                icon={<ServerIcon />}
+                color={stats.panel_connected ? 'success' : 'error'}
+              />
+              <StatCard
+                title={t('banSystem.stats.uptime')}
+                value={formatUptime(stats.uptime_seconds)}
+                icon={<ChartIcon />}
+                color="info"
+              />
+            </div>
+          )}
+
+          {/* Users Tab */}
+          {activeTab === 'users' && (
+            <div className="space-y-4">
+              {/* Search */}
+              <div className="flex gap-2">
+                <div className="relative flex-1">
+                  <SearchIcon />
+                  <input
+                    type="text"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                    placeholder={t('banSystem.users.searchPlaceholder')}
+                    className="w-full pl-10 pr-4 py-2 bg-dark-800 border border-dark-700 rounded-lg text-dark-100 placeholder-dark-500 focus:outline-none focus:border-accent-500"
+                  />
+                </div>
+                <button
+                  onClick={handleSearch}
+                  className="px-4 py-2 bg-accent-500/20 text-accent-400 rounded-lg hover:bg-accent-500/30 transition-colors"
+                >
+                  {t('common.search')}
+                </button>
+              </div>
+
+              {/* Users Table */}
+              <div className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-dark-700">
+                      <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.users.email')}</th>
+                      <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.users.ipCount')}</th>
+                      <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.users.limit')}</th>
+                      <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.users.status')}</th>
+                      <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.users.bans')}</th>
+                      <th className="text-right text-xs text-dark-500 font-medium py-3 px-4">{t('common.actions')}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users?.users.map((user) => (
+                      <tr key={user.email} className="border-b border-dark-700/50 hover:bg-dark-800/50">
+                        <td className="py-3 px-4 text-dark-100">{user.email}</td>
+                        <td className="text-center py-3 px-4 text-dark-300">{user.unique_ip_count}</td>
+                        <td className="text-center py-3 px-4 text-dark-300">{user.limit ?? '-'}</td>
+                        <td className="text-center py-3 px-4">
+                          <span className={`px-2 py-1 rounded-full text-xs ${
+                            user.is_over_limit
+                              ? 'bg-error-500/20 text-error-400'
+                              : 'bg-success-500/20 text-success-400'
+                          }`}>
+                            {user.is_over_limit ? t('banSystem.users.overLimit') : t('banSystem.users.ok')}
+                          </span>
+                        </td>
+                        <td className="text-center py-3 px-4 text-dark-300">{user.blocked_count}</td>
+                        <td className="text-right py-3 px-4">
+                          <button
+                            onClick={() => handleViewUser(user.email)}
+                            disabled={actionLoading === user.email}
+                            className="text-accent-400 hover:text-accent-300 text-sm disabled:opacity-50"
+                          >
+                            {t('banSystem.users.viewDetails')}
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+                {(!users?.users || users.users.length === 0) && (
+                  <div className="text-center py-8 text-dark-500">{t('common.noData')}</div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Punishments Tab */}
+          {activeTab === 'punishments' && (
+            <div className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-dark-700">
+                    <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.punishments.user')}</th>
+                    <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.punishments.reason')}</th>
+                    <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.punishments.ipCount')}</th>
+                    <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.punishments.limit')}</th>
+                    <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.punishments.bannedAt')}</th>
+                    <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.punishments.enableAt')}</th>
+                    <th className="text-right text-xs text-dark-500 font-medium py-3 px-4">{t('common.actions')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {punishments?.punishments.map((p) => (
+                    <tr key={p.user_id} className="border-b border-dark-700/50 hover:bg-dark-800/50">
+                      <td className="py-3 px-4">
+                        <div className="text-dark-100">{p.username}</div>
+                        <div className="text-xs text-dark-500">{p.user_id}</div>
+                      </td>
+                      <td className="py-3 px-4 text-dark-300 text-sm">{p.reason || '-'}</td>
+                      <td className="text-center py-3 px-4 text-error-400">{p.ip_count}</td>
+                      <td className="text-center py-3 px-4 text-dark-300">{p.limit}</td>
+                      <td className="text-center py-3 px-4 text-dark-300 text-sm">{formatDate(p.punished_at)}</td>
+                      <td className="text-center py-3 px-4 text-dark-300 text-sm">{formatDate(p.enable_at)}</td>
+                      <td className="text-right py-3 px-4">
+                        <button
+                          onClick={() => handleUnban(p.user_id)}
+                          disabled={actionLoading === p.user_id}
+                          className="px-3 py-1 bg-success-500/20 text-success-400 rounded-lg text-sm hover:bg-success-500/30 transition-colors disabled:opacity-50"
+                        >
+                          {t('banSystem.punishments.unban')}
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              {(!punishments?.punishments || punishments.punishments.length === 0) && (
+                <div className="text-center py-8 text-dark-500">{t('banSystem.punishments.noBans')}</div>
+              )}
+            </div>
+          )}
+
+          {/* Nodes Tab */}
+          {activeTab === 'nodes' && (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {nodes?.nodes.map((node) => (
+                <div
+                  key={node.name}
+                  className={`bg-dark-800/50 rounded-xl border p-4 ${
+                    node.is_connected ? 'border-success-500/30' : 'border-dark-700'
+                  }`}
+                >
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className={`w-3 h-3 rounded-full ${node.is_connected ? 'bg-success-500 animate-pulse' : 'bg-dark-500'}`} />
+                    <div>
+                      <div className="font-medium text-dark-100">{node.name}</div>
+                      <div className="text-xs text-dark-500">{node.address || '-'}</div>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="bg-dark-900/50 rounded-lg p-2.5">
+                      <div className="text-xs text-dark-500">{t('banSystem.nodes.status')}</div>
+                      <div className={`text-sm font-medium ${node.is_connected ? 'text-success-400' : 'text-dark-400'}`}>
+                        {node.is_connected ? t('banSystem.nodes.online') : t('banSystem.nodes.offline')}
+                      </div>
+                    </div>
+                    <div className="bg-dark-900/50 rounded-lg p-2.5">
+                      <div className="text-xs text-dark-500">{t('banSystem.nodes.users')}</div>
+                      <div className="text-sm font-medium text-dark-100">{node.users_count}</div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+              {(!nodes?.nodes || nodes.nodes.length === 0) && (
+                <div className="col-span-full text-center py-8 text-dark-500">{t('banSystem.nodes.noNodes')}</div>
+              )}
+            </div>
+          )}
+
+          {/* Agents Tab */}
+          {activeTab === 'agents' && (
+            <div className="space-y-4">
+              {/* Summary */}
+              {agents?.summary && (
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <StatCard
+                    title={t('banSystem.agents.online')}
+                    value={`${agents.summary.online_agents}/${agents.summary.total_agents}`}
+                    icon={<AgentIcon />}
+                    color="success"
+                  />
+                  <StatCard
+                    title={t('banSystem.agents.totalSent')}
+                    value={agents.summary.total_sent.toLocaleString()}
+                    icon={<ChartIcon />}
+                    color="accent"
+                  />
+                  <StatCard
+                    title={t('banSystem.agents.totalDropped')}
+                    value={agents.summary.total_dropped.toLocaleString()}
+                    icon={<WarningIcon />}
+                    color="warning"
+                  />
+                  <StatCard
+                    title={t('banSystem.agents.healthy')}
+                    value={agents.summary.healthy_count}
+                    subtitle={`${t('banSystem.agents.warning')}: ${agents.summary.warning_count}, ${t('banSystem.agents.critical')}: ${agents.summary.critical_count}`}
+                    icon={<AgentIcon />}
+                    color="info"
+                  />
+                </div>
+              )}
+
+              {/* Agents List */}
+              <div className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-dark-700">
+                      <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.agents.node')}</th>
+                      <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.agents.status')}</th>
+                      <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.agents.health')}</th>
+                      <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.agents.sent')}</th>
+                      <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.agents.dropped')}</th>
+                      <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.agents.queue')}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {agents?.agents.map((agent) => (
+                      <tr key={agent.node_name} className="border-b border-dark-700/50 hover:bg-dark-800/50">
+                        <td className="py-3 px-4 text-dark-100">{agent.node_name}</td>
+                        <td className="text-center py-3 px-4">
+                          <span className={`px-2 py-1 rounded-full text-xs ${
+                            agent.is_online
+                              ? 'bg-success-500/20 text-success-400'
+                              : 'bg-dark-600 text-dark-400'
+                          }`}>
+                            {agent.is_online ? t('banSystem.agents.online') : t('banSystem.agents.offline')}
+                          </span>
+                        </td>
+                        <td className="text-center py-3 px-4">
+                          <span className={`px-2 py-1 rounded-full text-xs ${
+                            agent.health === 'healthy' ? 'bg-success-500/20 text-success-400' :
+                            agent.health === 'warning' ? 'bg-warning-500/20 text-warning-400' :
+                            agent.health === 'critical' ? 'bg-error-500/20 text-error-400' :
+                            'bg-dark-600 text-dark-400'
+                          }`}>
+                            {agent.health}
+                          </span>
+                        </td>
+                        <td className="text-center py-3 px-4 text-dark-300">{agent.sent_total.toLocaleString()}</td>
+                        <td className="text-center py-3 px-4 text-warning-400">{agent.dropped_total.toLocaleString()}</td>
+                        <td className="text-center py-3 px-4 text-dark-300">{agent.queue_size}/{agent.queue_max}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+                {(!agents?.agents || agents.agents.length === 0) && (
+                  <div className="text-center py-8 text-dark-500">{t('banSystem.agents.noAgents')}</div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Violations Tab */}
+          {activeTab === 'violations' && (
+            <div className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-dark-700">
+                    <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.violations.user')}</th>
+                    <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.violations.type')}</th>
+                    <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.violations.description')}</th>
+                    <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.violations.detectedAt')}</th>
+                    <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.violations.status')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {violations?.violations.map((v, idx) => (
+                    <tr key={idx} className="border-b border-dark-700/50 hover:bg-dark-800/50">
+                      <td className="py-3 px-4">
+                        <div className="text-dark-100">{v.username}</div>
+                        <div className="text-xs text-dark-500">{v.email || '-'}</div>
+                      </td>
+                      <td className="py-3 px-4 text-warning-400">{v.violation_type}</td>
+                      <td className="py-3 px-4 text-dark-300 text-sm">{v.description || '-'}</td>
+                      <td className="text-center py-3 px-4 text-dark-300 text-sm">{formatDate(v.detected_at)}</td>
+                      <td className="text-center py-3 px-4">
+                        <span className={`px-2 py-1 rounded-full text-xs ${
+                          v.resolved
+                            ? 'bg-success-500/20 text-success-400'
+                            : 'bg-warning-500/20 text-warning-400'
+                        }`}>
+                          {v.resolved ? t('banSystem.violations.resolved') : t('banSystem.violations.active')}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              {(!violations?.violations || violations.violations.length === 0) && (
+                <div className="text-center py-8 text-dark-500">{t('banSystem.violations.noViolations')}</div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+
+      {/* User Detail Modal */}
+      {selectedUser && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={() => setSelectedUser(null)}>
+          <div className="bg-dark-800 rounded-xl border border-dark-700 max-w-2xl w-full max-h-[80vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+            <div className="p-4 border-b border-dark-700 flex justify-between items-center">
+              <h3 className="text-lg font-semibold text-dark-100">{t('banSystem.userDetail.title')}</h3>
+              <button onClick={() => setSelectedUser(null)} className="text-dark-400 hover:text-dark-200">
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div className="p-4 space-y-4">
+              {/* User Info */}
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <div className="text-xs text-dark-500">{t('banSystem.users.email')}</div>
+                  <div className="text-dark-100">{selectedUser.email}</div>
+                </div>
+                <div>
+                  <div className="text-xs text-dark-500">{t('banSystem.users.limit')}</div>
+                  <div className="text-dark-100">{selectedUser.limit ?? '-'}</div>
+                </div>
+                <div>
+                  <div className="text-xs text-dark-500">{t('banSystem.users.ipCount')}</div>
+                  <div className="text-dark-100">{selectedUser.unique_ip_count}</div>
+                </div>
+                <div>
+                  <div className="text-xs text-dark-500">{t('banSystem.users.networkType')}</div>
+                  <div className="text-dark-100">{selectedUser.network_type || '-'}</div>
+                </div>
+              </div>
+
+              {/* IP History */}
+              <div>
+                <h4 className="text-sm font-medium text-dark-200 mb-2">{t('banSystem.userDetail.ipHistory')}</h4>
+                <div className="bg-dark-900/50 rounded-lg overflow-hidden">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="border-b border-dark-700">
+                        <th className="text-left text-xs text-dark-500 py-2 px-3">{t('banSystem.userDetail.ip')}</th>
+                        <th className="text-left text-xs text-dark-500 py-2 px-3">{t('banSystem.userDetail.country')}</th>
+                        <th className="text-left text-xs text-dark-500 py-2 px-3">{t('banSystem.userDetail.node')}</th>
+                        <th className="text-center text-xs text-dark-500 py-2 px-3">{t('banSystem.userDetail.requests')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {selectedUser.ips.map((ip, idx) => (
+                        <tr key={idx} className="border-b border-dark-700/50">
+                          <td className="py-2 px-3 text-dark-100">{ip.ip}</td>
+                          <td className="py-2 px-3 text-dark-300">{ip.country_name || ip.country_code || '-'}</td>
+                          <td className="py-2 px-3 text-dark-300">{ip.node || '-'}</td>
+                          <td className="text-center py-2 px-3 text-dark-300">{ip.request_count}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                  {selectedUser.ips.length === 0 && (
+                    <div className="text-center py-4 text-dark-500">{t('common.noData')}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/pages/AdminPanel.tsx b/src/pages/AdminPanel.tsx
index 98fba07..4394ca1 100644
--- a/src/pages/AdminPanel.tsx
+++ b/src/pages/AdminPanel.tsx
@@ -51,6 +51,12 @@ const ChartIcon = () => (
   </svg>
 )
 
+const BanSystemIcon = () => (
+  <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+  </svg>
+)
+
 interface AdminCardProps {
   to: string
   icon: React.ReactNode
@@ -129,6 +135,13 @@ export default function AdminPanel() {
       description: t('admin.panel.serversDesc'),
       color: 'purple'
     },
+    {
+      to: '/admin/ban-system',
+      icon: <BanSystemIcon />,
+      title: t('admin.nav.banSystem'),
+      description: t('admin.panel.banSystemDesc'),
+      color: 'error'
+    },
   ]
 
   return (

From 246c51d642682031e192fa0c3e853b80ece96177 Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Fri, 16 Jan 2026 18:20:28 +0300
Subject: [PATCH 2/8] =?UTF-8?q?=20=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=BE:=20=20=20-=20=D0=94=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D1=81=D0=B5=D0=BA=D1=86=D0=B8?=
 =?UTF-8?q?=D1=8F=20banSystem.stats=20=D1=81=20=D0=BA=D0=BB=D1=8E=D1=87?=
 =?UTF-8?q?=D0=B0=D0=BC=D0=B8=20=D0=B4=D0=BB=D1=8F=20=D1=81=D1=82=D0=B0?=
 =?UTF-8?q?=D1=82=D0=B8=D1=81=D1=82=D0=B8=D0=BA=D0=B8=20=20=20-=20=D0=94?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=B4=D0=BE=D1=81=D1=82=D0=B0=D1=8E=D1=89=D0=B8=D0=B5=20=D0=BA?=
 =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B8:=20ipCount,=20bans,=20ok,=20networkTyp?=
 =?UTF-8?q?e,=20user,=20bannedAt,=20noBans,=20users,=20node,=20totalSent,?=
 =?UTF-8?q?=20totalDropped,=20status,=20active?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.json | 30 +++++++++++++++++++++++++++++-
 src/locales/ru.json | 32 ++++++++++++++++++++++++++++++--
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index cd9293d..bfa40cd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -750,7 +750,7 @@
     "title": "Ban Monitoring",
     "subtitle": "BedolagaBan system management",
     "notConfigured": "Ban system is not configured",
-    "notConfiguredDesc": "Set BAN_SYSTEM_API_URL and BAN_SYSTEM_API_TOKEN in configuration",
+    "configureHint": "Set BAN_SYSTEM_API_URL and BAN_SYSTEM_API_TOKEN in configuration",
     "loadError": "Failed to load data",
     "tabs": {
       "dashboard": "Dashboard",
@@ -760,6 +760,19 @@
       "agents": "Agents",
       "violations": "Violations"
     },
+    "stats": {
+      "activeUsers": "Active Users",
+      "total": "Total",
+      "usersOverLimit": "Over Limit",
+      "activeBans": "Active Bans",
+      "nodesOnline": "Nodes Online",
+      "agentsOnline": "Agents Online",
+      "totalRequests": "Total Requests",
+      "panelStatus": "Panel Status",
+      "connected": "Connected",
+      "disconnected": "Disconnected",
+      "uptime": "Uptime"
+    },
     "dashboard": {
       "totalUsers": "Total Users",
       "activeUsers": "Active Users",
@@ -778,15 +791,19 @@
       "searchPlaceholder": "Search by email...",
       "email": "Email",
       "uniqueIps": "Unique IPs",
+      "ipCount": "IPs",
       "requests": "Requests",
       "limit": "Limit",
       "status": "Status",
+      "bans": "Bans",
       "lastSeen": "Last Seen",
       "overLimit": "Over Limit",
+      "ok": "OK",
       "normal": "Normal",
       "noLimit": "No Limit",
       "noUsers": "No users found",
       "viewDetails": "View Details",
+      "networkType": "Network Type",
       "filter": {
         "all": "All",
         "overLimit": "Over Limit",
@@ -808,6 +825,7 @@
       "lastSeen": "Last Seen",
       "node": "Node",
       "requestCount": "Requests",
+      "requests": "Requests",
       "country": "Country",
       "city": "City",
       "timestamp": "Timestamp",
@@ -823,9 +841,11 @@
     },
     "punishments": {
       "title": "Active Bans",
+      "user": "User",
       "username": "User",
       "reason": "Reason",
       "punishedAt": "Banned At",
+      "bannedAt": "Banned At",
       "enableAt": "Unban At",
       "ipCount": "IPs",
       "limit": "Limit",
@@ -833,6 +853,7 @@
       "actions": "Actions",
       "unban": "Unban",
       "noPunishments": "No active bans",
+      "noBans": "No active bans",
       "unbanConfirm": "Unban user {{username}}?",
       "unbanSuccess": "User unbanned",
       "unbanError": "Unban failed",
@@ -860,6 +881,7 @@
       "status": "Status",
       "lastSeen": "Last Seen",
       "usersCount": "Users",
+      "users": "Users",
       "online": "Online",
       "offline": "Offline",
       "noNodes": "No nodes found",
@@ -869,10 +891,13 @@
     "agents": {
       "title": "Agents",
       "nodeName": "Node",
+      "node": "Node",
       "status": "Status",
       "health": "Health",
       "sent": "Sent",
       "dropped": "Dropped",
+      "totalSent": "Total Sent",
+      "totalDropped": "Total Dropped",
       "batches": "Batches",
       "reconnects": "Reconnects",
       "failures": "Failures",
@@ -900,6 +925,7 @@
     },
     "violations": {
       "title": "Traffic Violations",
+      "user": "User",
       "username": "User",
       "email": "Email",
       "type": "Type",
@@ -907,7 +933,9 @@
       "bytesUsed": "Used",
       "bytesLimit": "Limit",
       "detectedAt": "Detected At",
+      "status": "Status",
       "resolved": "Resolved",
+      "active": "Active",
       "noViolations": "No violations found",
       "yes": "Yes",
       "no": "No"
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 6f07e37..4de17cd 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -750,7 +750,7 @@
     "title": "Мониторинг банов",
     "subtitle": "Управление системой банов BedolagaBan",
     "notConfigured": "Ban система не настроена",
-    "notConfiguredDesc": "Укажите BAN_SYSTEM_API_URL и BAN_SYSTEM_API_TOKEN в конфигурации",
+    "configureHint": "Укажите BAN_SYSTEM_API_URL и BAN_SYSTEM_API_TOKEN в конфигурации",
     "loadError": "Не удалось загрузить данные",
     "tabs": {
       "dashboard": "Статистика",
@@ -760,6 +760,19 @@
       "agents": "Агенты",
       "violations": "Нарушения"
     },
+    "stats": {
+      "activeUsers": "Активных пользователей",
+      "total": "Всего",
+      "usersOverLimit": "Превысили лимит",
+      "activeBans": "Активных банов",
+      "nodesOnline": "Нод онлайн",
+      "agentsOnline": "Агентов онлайн",
+      "totalRequests": "Всего запросов",
+      "panelStatus": "Статус панели",
+      "connected": "Подключена",
+      "disconnected": "Отключена",
+      "uptime": "Аптайм"
+    },
     "dashboard": {
       "totalUsers": "Всего пользователей",
       "activeUsers": "Активных пользователей",
@@ -778,15 +791,19 @@
       "searchPlaceholder": "Поиск по email...",
       "email": "Email",
       "uniqueIps": "Уникальных IP",
+      "ipCount": "IP",
       "requests": "Запросов",
       "limit": "Лимит",
       "status": "Статус",
+      "bans": "Баны",
       "lastSeen": "Последняя активность",
       "overLimit": "Превышен лимит",
+      "ok": "OK",
       "normal": "Норма",
       "noLimit": "Без лимита",
       "noUsers": "Пользователи не найдены",
       "viewDetails": "Подробнее",
+      "networkType": "Тип сети",
       "filter": {
         "all": "Все",
         "overLimit": "Превысили лимит",
@@ -808,6 +825,7 @@
       "lastSeen": "Последнее подключение",
       "node": "Нода",
       "requestCount": "Запросов",
+      "requests": "Запросов",
       "country": "Страна",
       "city": "Город",
       "timestamp": "Время",
@@ -823,9 +841,11 @@
     },
     "punishments": {
       "title": "Активные баны",
+      "user": "Пользователь",
       "username": "Пользователь",
       "reason": "Причина",
       "punishedAt": "Забанен",
+      "bannedAt": "Забанен",
       "enableAt": "Разбан в",
       "ipCount": "IP",
       "limit": "Лимит",
@@ -833,6 +853,7 @@
       "actions": "Действия",
       "unban": "Разбанить",
       "noPunishments": "Активных банов нет",
+      "noBans": "Активных банов нет",
       "unbanConfirm": "Разбанить пользователя {{username}}?",
       "unbanSuccess": "Пользователь разбанен",
       "unbanError": "Ошибка разбана",
@@ -860,6 +881,7 @@
       "status": "Статус",
       "lastSeen": "Последняя активность",
       "usersCount": "Пользователей",
+      "users": "Пользователей",
       "online": "Онлайн",
       "offline": "Оффлайн",
       "noNodes": "Ноды не найдены",
@@ -869,10 +891,13 @@
     "agents": {
       "title": "Агенты",
       "nodeName": "Нода",
+      "node": "Нода",
       "status": "Статус",
       "health": "Здоровье",
       "sent": "Отправлено",
       "dropped": "Отброшено",
+      "totalSent": "Всего отправлено",
+      "totalDropped": "Всего отброшено",
       "batches": "Пакетов",
       "reconnects": "Переподключений",
       "failures": "Ошибок",
@@ -882,7 +907,7 @@
       "lastReport": "Последний отчёт",
       "online": "Онлайн",
       "offline": "Оффлайн",
-      "healthy": "Здоров",
+      "healthy": "Здоровых",
       "warning": "Предупреждение",
       "critical": "Критический",
       "noAgents": "Агенты не найдены",
@@ -900,6 +925,7 @@
     },
     "violations": {
       "title": "Нарушения трафика",
+      "user": "Пользователь",
       "username": "Пользователь",
       "email": "Email",
       "type": "Тип",
@@ -907,7 +933,9 @@
       "bytesUsed": "Использовано",
       "bytesLimit": "Лимит",
       "detectedAt": "Обнаружено",
+      "status": "Статус",
       "resolved": "Решено",
+      "active": "Активно",
       "noViolations": "Нарушений не обнаружено",
       "yes": "Да",
       "no": "Нет"

From 5de8a2e576bbf5ba31df98a671d2e0f9e3c9b8cb Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Fri, 16 Jan 2026 20:52:23 +0300
Subject: [PATCH 3/8] Add traffic, reports, settings, and health features to
 ban system admin panel

- Introduced new interfaces for traffic, reports, settings, and health responses in the ban system API.
- Implemented API calls for fetching traffic statistics, top users, settings management, and health status.
- Enhanced the AdminBanSystem component to display traffic statistics, recent violations, report summaries, and system health.
- Updated localization files to include new keys for traffic, reports, settings, and health sections.
---
 src/api/banSystem.ts         | 173 ++++++++++++++++
 src/locales/en.json          |  48 ++++-
 src/locales/ru.json          |  48 ++++-
 src/pages/AdminBanSystem.tsx | 390 ++++++++++++++++++++++++++++++++++-
 4 files changed, 654 insertions(+), 5 deletions(-)

diff --git a/src/api/banSystem.ts b/src/api/banSystem.ts
index 18137fd..af6e98d 100644
--- a/src/api/banSystem.ts
+++ b/src/api/banSystem.ts
@@ -176,6 +176,97 @@ export interface BanTrafficViolationsResponse {
   total: number
 }
 
+export interface BanTrafficTopItem {
+  username: string
+  bytes_total: number
+  bytes_limit: number | null
+  over_limit: boolean
+}
+
+export interface BanTrafficResponse {
+  enabled: boolean
+  stats: Record<string, unknown> | null
+  top_users: BanTrafficTopItem[]
+  recent_violations: BanTrafficViolationItem[]
+}
+
+// === Settings Types ===
+
+export interface BanSettingDefinition {
+  key: string
+  value: unknown
+  type: string
+  min_value: number | null
+  max_value: number | null
+  editable: boolean
+  description: string | null
+  category: string | null
+}
+
+export interface BanSettingsResponse {
+  settings: BanSettingDefinition[]
+}
+
+export interface BanWhitelistRequest {
+  username: string
+}
+
+// === Report Types ===
+
+export interface BanReportTopViolator {
+  username: string
+  count: number
+}
+
+export interface BanReportResponse {
+  period_hours: number
+  current_users: number
+  current_ips: number
+  punishment_stats: Record<string, unknown> | null
+  top_violators: BanReportTopViolator[]
+}
+
+// === Health Types ===
+
+export interface BanHealthComponent {
+  name: string
+  status: string
+  message: string | null
+  details: Record<string, unknown> | null
+}
+
+export interface BanHealthResponse {
+  status: string
+  uptime: number | null
+  components: BanHealthComponent[]
+}
+
+export interface BanHealthDetailedResponse {
+  status: string
+  uptime: number | null
+  components: Record<string, unknown>
+}
+
+// === Agent History Types ===
+
+export interface BanAgentHistoryItem {
+  timestamp: string
+  sent_total: number
+  dropped_total: number
+  queue_size: number
+  batches_total: number
+}
+
+export interface BanAgentHistoryResponse {
+  node: string
+  hours: number
+  records: number
+  delta: Record<string, unknown> | null
+  first: Record<string, unknown> | null
+  last: Record<string, unknown> | null
+  history: BanAgentHistoryItem[]
+}
+
 // === API ===
 
 export const banSystemApi = {
@@ -269,4 +360,86 @@ export const banSystemApi = {
     })
     return response.data
   },
+
+  // Full Traffic
+  getTraffic: async (): Promise<BanTrafficResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/traffic')
+    return response.data
+  },
+
+  getTrafficTop: async (limit: number = 20): Promise<BanTrafficTopItem[]> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/traffic/top', {
+      params: { limit }
+    })
+    return response.data
+  },
+
+  // Settings
+  getSettings: async (): Promise<BanSettingsResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/settings')
+    return response.data
+  },
+
+  getSetting: async (key: string): Promise<BanSettingDefinition> => {
+    const response = await apiClient.get(`/cabinet/admin/ban-system/settings/${key}`)
+    return response.data
+  },
+
+  setSetting: async (key: string, value: string): Promise<BanSettingDefinition> => {
+    const response = await apiClient.post(`/cabinet/admin/ban-system/settings/${key}`, null, {
+      params: { value }
+    })
+    return response.data
+  },
+
+  toggleSetting: async (key: string): Promise<BanSettingDefinition> => {
+    const response = await apiClient.post(`/cabinet/admin/ban-system/settings/${key}/toggle`)
+    return response.data
+  },
+
+  // Whitelist
+  whitelistAdd: async (username: string): Promise<UnbanResponse> => {
+    const response = await apiClient.post('/cabinet/admin/ban-system/settings/whitelist/add', { username })
+    return response.data
+  },
+
+  whitelistRemove: async (username: string): Promise<UnbanResponse> => {
+    const response = await apiClient.post('/cabinet/admin/ban-system/settings/whitelist/remove', { username })
+    return response.data
+  },
+
+  // Reports
+  getReport: async (hours: number = 24): Promise<BanReportResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/report', {
+      params: { hours }
+    })
+    return response.data
+  },
+
+  // Health
+  getHealth: async (): Promise<BanHealthResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/health')
+    return response.data
+  },
+
+  getHealthDetailed: async (): Promise<BanHealthDetailedResponse> => {
+    const response = await apiClient.get('/cabinet/admin/ban-system/health/detailed')
+    return response.data
+  },
+
+  // Agent History
+  getAgentHistory: async (nodeName: string, hours: number = 24): Promise<BanAgentHistoryResponse> => {
+    const response = await apiClient.get(`/cabinet/admin/ban-system/agents/${encodeURIComponent(nodeName)}/history`, {
+      params: { hours }
+    })
+    return response.data
+  },
+
+  // User Punishment History
+  getUserHistory: async (email: string, limit: number = 20): Promise<BanHistoryResponse> => {
+    const response = await apiClient.get(`/cabinet/admin/ban-system/users/${encodeURIComponent(email)}/history`, {
+      params: { limit }
+    })
+    return response.data
+  },
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index bfa40cd..1152287 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -18,7 +18,8 @@
     "and": "and",
     "edit": "Edit",
     "delete": "Delete",
-    "currency": "$"
+    "currency": "$",
+    "refresh": "Refresh"
   },
   "nav": {
     "dashboard": "Dashboard",
@@ -758,7 +759,11 @@
       "punishments": "Bans",
       "nodes": "Nodes",
       "agents": "Agents",
-      "violations": "Violations"
+      "violations": "Violations",
+      "traffic": "Traffic",
+      "reports": "Reports",
+      "settings": "Settings",
+      "health": "Health"
     },
     "stats": {
       "activeUsers": "Active Users",
@@ -939,6 +944,45 @@
       "noViolations": "No violations found",
       "yes": "Yes",
       "no": "No"
+    },
+    "traffic": {
+      "title": "Traffic Statistics",
+      "enabled": "Traffic Monitoring",
+      "topUsers": "Top by Traffic",
+      "username": "User",
+      "bytesTotal": "Total",
+      "bytesLimit": "Limit",
+      "status": "Status",
+      "overLimit": "Over Limit",
+      "ok": "OK",
+      "recentViolations": "Recent Violations"
+    },
+    "reports": {
+      "title": "Period Reports",
+      "period": "Period",
+      "currentUsers": "Active Users",
+      "currentIps": "Unique IPs",
+      "topViolators": "Top Violators",
+      "username": "User",
+      "count": "Violations"
+    },
+    "settings": {
+      "title": "System Settings",
+      "general": "General",
+      "limits": "Limits",
+      "notifications": "Notifications",
+      "whitelist": "Whitelist",
+      "saved": "Setting saved",
+      "error": "Error saving"
+    },
+    "health": {
+      "title": "System Health",
+      "systemStatus": "System Status",
+      "healthy": "Healthy",
+      "degraded": "Degraded",
+      "unhealthy": "Unhealthy",
+      "components": "Components",
+      "uptime": "Uptime"
     }
   },
   "profile": {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 4de17cd..ac4ce57 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -18,7 +18,8 @@
     "and": "и",
     "edit": "Редактировать",
     "delete": "Удалить",
-    "currency": "₽"
+    "currency": "₽",
+    "refresh": "Обновить"
   },
   "nav": {
     "dashboard": "Главная",
@@ -758,7 +759,11 @@
       "punishments": "Баны",
       "nodes": "Ноды",
       "agents": "Агенты",
-      "violations": "Нарушения"
+      "violations": "Нарушения",
+      "traffic": "Трафик",
+      "reports": "Отчёты",
+      "settings": "Настройки",
+      "health": "Здоровье"
     },
     "stats": {
       "activeUsers": "Активных пользователей",
@@ -939,6 +944,45 @@
       "noViolations": "Нарушений не обнаружено",
       "yes": "Да",
       "no": "Нет"
+    },
+    "traffic": {
+      "title": "Статистика трафика",
+      "enabled": "Мониторинг трафика",
+      "topUsers": "Топ по трафику",
+      "username": "Пользователь",
+      "bytesTotal": "Всего",
+      "bytesLimit": "Лимит",
+      "status": "Статус",
+      "overLimit": "Превышен",
+      "ok": "OK",
+      "recentViolations": "Последние нарушения"
+    },
+    "reports": {
+      "title": "Отчёты за период",
+      "period": "Период",
+      "currentUsers": "Активных пользователей",
+      "currentIps": "Уникальных IP",
+      "topViolators": "Топ нарушителей",
+      "username": "Пользователь",
+      "count": "Нарушений"
+    },
+    "settings": {
+      "title": "Настройки системы",
+      "general": "Общие",
+      "limits": "Лимиты",
+      "notifications": "Уведомления",
+      "whitelist": "Белый список",
+      "saved": "Настройка сохранена",
+      "error": "Ошибка сохранения"
+    },
+    "health": {
+      "title": "Состояние системы",
+      "systemStatus": "Статус системы",
+      "healthy": "Здорова",
+      "degraded": "Деградация",
+      "unhealthy": "Проблема",
+      "components": "Компоненты",
+      "uptime": "Аптайм"
     }
   },
   "profile": {
diff --git a/src/pages/AdminBanSystem.tsx b/src/pages/AdminBanSystem.tsx
index 05869e4..594834a 100644
--- a/src/pages/AdminBanSystem.tsx
+++ b/src/pages/AdminBanSystem.tsx
@@ -10,6 +10,11 @@ import {
   type BanNodesListResponse,
   type BanAgentsListResponse,
   type BanTrafficViolationsResponse,
+  type BanSettingsResponse,
+  type BanSettingDefinition,
+  type BanTrafficResponse,
+  type BanReportResponse,
+  type BanHealthResponse,
 } from '../api/banSystem'
 
 // Icons
@@ -67,7 +72,32 @@ const SearchIcon = () => (
   </svg>
 )
 
-type TabType = 'dashboard' | 'users' | 'punishments' | 'nodes' | 'agents' | 'violations'
+const SettingsIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+  </svg>
+)
+
+const TrafficIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" />
+  </svg>
+)
+
+const ReportIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
+  </svg>
+)
+
+const HealthIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+  </svg>
+)
+
+type TabType = 'dashboard' | 'users' | 'punishments' | 'nodes' | 'agents' | 'violations' | 'settings' | 'traffic' | 'reports' | 'health'
 
 interface StatCardProps {
   title: string
@@ -111,6 +141,12 @@ export default function AdminBanSystem() {
   const [nodes, setNodes] = useState<BanNodesListResponse | null>(null)
   const [agents, setAgents] = useState<BanAgentsListResponse | null>(null)
   const [violations, setViolations] = useState<BanTrafficViolationsResponse | null>(null)
+  const [settings, setSettings] = useState<BanSettingsResponse | null>(null)
+  const [traffic, setTraffic] = useState<BanTrafficResponse | null>(null)
+  const [report, setReport] = useState<BanReportResponse | null>(null)
+  const [health, setHealth] = useState<BanHealthResponse | null>(null)
+  const [reportHours, setReportHours] = useState(24)
+  const [settingLoading, setSettingLoading] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
@@ -171,6 +207,22 @@ export default function AdminBanSystem() {
           const violationsData = await banSystemApi.getTrafficViolations()
           setViolations(violationsData)
           break
+        case 'settings':
+          const settingsData = await banSystemApi.getSettings()
+          setSettings(settingsData)
+          break
+        case 'traffic':
+          const trafficData = await banSystemApi.getTraffic()
+          setTraffic(trafficData)
+          break
+        case 'reports':
+          const reportData = await banSystemApi.getReport(reportHours)
+          setReport(reportData)
+          break
+        case 'health':
+          const healthData = await banSystemApi.getHealth()
+          setHealth(healthData)
+          break
       }
     } catch {
       setError(t('banSystem.loadError'))
@@ -219,6 +271,48 @@ export default function AdminBanSystem() {
     }
   }
 
+  const handleToggleSetting = async (key: string) => {
+    try {
+      setSettingLoading(key)
+      await banSystemApi.toggleSetting(key)
+      loadTabData('settings')
+    } catch {
+      setError(t('banSystem.loadError'))
+    } finally {
+      setSettingLoading(null)
+    }
+  }
+
+  const handleSetSetting = async (key: string, value: string) => {
+    try {
+      setSettingLoading(key)
+      await banSystemApi.setSetting(key, value)
+      loadTabData('settings')
+    } catch {
+      setError(t('banSystem.loadError'))
+    } finally {
+      setSettingLoading(null)
+    }
+  }
+
+  const handleReportPeriodChange = (hours: number) => {
+    setReportHours(hours)
+  }
+
+  useEffect(() => {
+    if (activeTab === 'reports' && status?.enabled) {
+      loadTabData('reports')
+    }
+  }, [reportHours])
+
+  const formatBytes = (bytes: number) => {
+    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 formatUptime = (seconds: number | null) => {
     if (!seconds) return '-'
     const hours = Math.floor(seconds / 3600)
@@ -242,6 +336,10 @@ export default function AdminBanSystem() {
     { id: 'nodes' as TabType, label: t('banSystem.tabs.nodes'), icon: <ServerIcon /> },
     { id: 'agents' as TabType, label: t('banSystem.tabs.agents'), icon: <AgentIcon /> },
     { id: 'violations' as TabType, label: t('banSystem.tabs.violations'), icon: <WarningIcon /> },
+    { id: 'traffic' as TabType, label: t('banSystem.tabs.traffic'), icon: <TrafficIcon /> },
+    { id: 'reports' as TabType, label: t('banSystem.tabs.reports'), icon: <ReportIcon /> },
+    { id: 'settings' as TabType, label: t('banSystem.tabs.settings'), icon: <SettingsIcon /> },
+    { id: 'health' as TabType, label: t('banSystem.tabs.health'), icon: <HealthIcon /> },
   ]
 
   if (loading && !status) {
@@ -648,6 +746,296 @@ export default function AdminBanSystem() {
               )}
             </div>
           )}
+
+          {/* Traffic Tab */}
+          {activeTab === 'traffic' && traffic && (
+            <div className="space-y-4">
+              {/* Traffic Stats */}
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <StatCard
+                  title={t('banSystem.traffic.enabled')}
+                  value={traffic.enabled ? t('common.yes') : t('common.no')}
+                  icon={<TrafficIcon />}
+                  color={traffic.enabled ? 'success' : 'warning'}
+                />
+              </div>
+
+              {/* Top Users by Traffic */}
+              {traffic.top_users && traffic.top_users.length > 0 && (
+                <div className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden">
+                  <div className="p-4 border-b border-dark-700">
+                    <h3 className="text-sm font-medium text-dark-200">{t('banSystem.traffic.topUsers')}</h3>
+                  </div>
+                  <table className="w-full">
+                    <thead>
+                      <tr className="border-b border-dark-700">
+                        <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.traffic.username')}</th>
+                        <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.traffic.bytesTotal')}</th>
+                        <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.traffic.bytesLimit')}</th>
+                        <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.traffic.status')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {traffic.top_users.map((user, idx) => (
+                        <tr key={idx} className="border-b border-dark-700/50 hover:bg-dark-800/50">
+                          <td className="py-3 px-4 text-dark-100">{user.username}</td>
+                          <td className="text-center py-3 px-4 text-dark-300">{formatBytes(user.bytes_total)}</td>
+                          <td className="text-center py-3 px-4 text-dark-300">{user.bytes_limit ? formatBytes(user.bytes_limit) : '-'}</td>
+                          <td className="text-center py-3 px-4">
+                            <span className={`px-2 py-1 rounded-full text-xs ${
+                              user.over_limit
+                                ? 'bg-error-500/20 text-error-400'
+                                : 'bg-success-500/20 text-success-400'
+                            }`}>
+                              {user.over_limit ? t('banSystem.traffic.overLimit') : t('banSystem.traffic.ok')}
+                            </span>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+
+              {/* Recent Violations */}
+              {traffic.recent_violations && traffic.recent_violations.length > 0 && (
+                <div className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden">
+                  <div className="p-4 border-b border-dark-700">
+                    <h3 className="text-sm font-medium text-dark-200">{t('banSystem.traffic.recentViolations')}</h3>
+                  </div>
+                  <table className="w-full">
+                    <thead>
+                      <tr className="border-b border-dark-700">
+                        <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.violations.user')}</th>
+                        <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.violations.type')}</th>
+                        <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.violations.detectedAt')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {traffic.recent_violations.map((v, idx) => (
+                        <tr key={idx} className="border-b border-dark-700/50 hover:bg-dark-800/50">
+                          <td className="py-3 px-4 text-dark-100">{v.username}</td>
+                          <td className="py-3 px-4 text-warning-400">{v.violation_type}</td>
+                          <td className="text-center py-3 px-4 text-dark-300 text-sm">{formatDate(v.detected_at)}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+
+              {(!traffic.top_users || traffic.top_users.length === 0) && (!traffic.recent_violations || traffic.recent_violations.length === 0) && (
+                <div className="text-center py-8 text-dark-500">{t('common.noData')}</div>
+              )}
+            </div>
+          )}
+
+          {/* Reports Tab */}
+          {activeTab === 'reports' && (
+            <div className="space-y-4">
+              {/* Period Selector */}
+              <div className="flex items-center gap-4">
+                <span className="text-dark-400">{t('banSystem.reports.period')}:</span>
+                <div className="flex gap-2">
+                  {[6, 12, 24, 48, 72].map((hours) => (
+                    <button
+                      key={hours}
+                      onClick={() => handleReportPeriodChange(hours)}
+                      className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
+                        reportHours === hours
+                          ? 'bg-accent-500/20 text-accent-400'
+                          : 'bg-dark-800 text-dark-400 hover:text-dark-200'
+                      }`}
+                    >
+                      {hours}h
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {report && (
+                <>
+                  {/* Report Stats */}
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <StatCard
+                      title={t('banSystem.reports.currentUsers')}
+                      value={report.current_users}
+                      icon={<UsersIcon />}
+                      color="accent"
+                    />
+                    <StatCard
+                      title={t('banSystem.reports.currentIps')}
+                      value={report.current_ips}
+                      icon={<ServerIcon />}
+                      color="info"
+                    />
+                  </div>
+
+                  {/* Top Violators */}
+                  {report.top_violators && report.top_violators.length > 0 && (
+                    <div className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden">
+                      <div className="p-4 border-b border-dark-700">
+                        <h3 className="text-sm font-medium text-dark-200">{t('banSystem.reports.topViolators')}</h3>
+                      </div>
+                      <table className="w-full">
+                        <thead>
+                          <tr className="border-b border-dark-700">
+                            <th className="text-left text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.reports.username')}</th>
+                            <th className="text-center text-xs text-dark-500 font-medium py-3 px-4">{t('banSystem.reports.count')}</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {report.top_violators.map((v, idx) => (
+                            <tr key={idx} className="border-b border-dark-700/50 hover:bg-dark-800/50">
+                              <td className="py-3 px-4 text-dark-100">{v.username}</td>
+                              <td className="text-center py-3 px-4 text-warning-400">{v.count}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+
+          {/* Settings Tab */}
+          {activeTab === 'settings' && settings && (
+            <div className="space-y-4">
+              {/* Group settings by category */}
+              {(() => {
+                const grouped: Record<string, BanSettingDefinition[]> = {}
+                settings.settings.forEach((s) => {
+                  const cat = s.category || 'general'
+                  if (!grouped[cat]) grouped[cat] = []
+                  grouped[cat].push(s)
+                })
+
+                return Object.entries(grouped).map(([category, items]) => (
+                  <div key={category} className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden">
+                    <div className="p-4 border-b border-dark-700">
+                      <h3 className="text-sm font-medium text-dark-200 capitalize">{category}</h3>
+                    </div>
+                    <div className="divide-y divide-dark-700">
+                      {items.map((setting) => (
+                        <div key={setting.key} className="p-4 flex items-center justify-between">
+                          <div className="flex-1 min-w-0">
+                            <div className="text-dark-100 font-medium">{setting.key}</div>
+                            {setting.description && (
+                              <div className="text-xs text-dark-500 mt-0.5">{setting.description}</div>
+                            )}
+                          </div>
+                          <div className="ml-4">
+                            {setting.type === 'bool' ? (
+                              <button
+                                onClick={() => handleToggleSetting(setting.key)}
+                                disabled={!setting.editable || settingLoading === setting.key}
+                                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                                  setting.value ? 'bg-accent-500' : 'bg-dark-600'
+                                } ${!setting.editable ? 'opacity-50 cursor-not-allowed' : ''}`}
+                              >
+                                <span
+                                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                                    setting.value ? 'translate-x-6' : 'translate-x-1'
+                                  }`}
+                                />
+                              </button>
+                            ) : setting.type === 'int' ? (
+                              <input
+                                type="number"
+                                value={String(setting.value)}
+                                onChange={(e) => handleSetSetting(setting.key, e.target.value)}
+                                min={setting.min_value ?? undefined}
+                                max={setting.max_value ?? undefined}
+                                disabled={!setting.editable || settingLoading === setting.key}
+                                className="w-24 px-3 py-1.5 bg-dark-900 border border-dark-700 rounded-lg text-dark-100 text-sm focus:outline-none focus:border-accent-500 disabled:opacity-50"
+                              />
+                            ) : setting.type === 'list' ? (
+                              <div className="text-dark-300 text-sm">
+                                {Array.isArray(setting.value) ? setting.value.join(', ') : String(setting.value)}
+                              </div>
+                            ) : (
+                              <div className="text-dark-300 text-sm">{String(setting.value)}</div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))
+              })()}
+            </div>
+          )}
+
+          {/* Health Tab */}
+          {activeTab === 'health' && health && (
+            <div className="space-y-4">
+              {/* Overall Status */}
+              <div className="bg-dark-800/50 rounded-xl border border-dark-700 p-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className={`w-4 h-4 rounded-full ${
+                      health.status === 'healthy' ? 'bg-success-500 animate-pulse' :
+                      health.status === 'degraded' ? 'bg-warning-500 animate-pulse' :
+                      'bg-error-500 animate-pulse'
+                    }`} />
+                    <div>
+                      <div className="text-dark-100 font-medium">{t('banSystem.health.systemStatus')}</div>
+                      <div className={`text-sm ${
+                        health.status === 'healthy' ? 'text-success-400' :
+                        health.status === 'degraded' ? 'text-warning-400' :
+                        'text-error-400'
+                      }`}>
+                        {health.status.toUpperCase()}
+                      </div>
+                    </div>
+                  </div>
+                  {health.uptime !== null && (
+                    <div className="text-right">
+                      <div className="text-xs text-dark-500">{t('banSystem.stats.uptime')}</div>
+                      <div className="text-dark-100">{formatUptime(health.uptime)}</div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Components Status */}
+              {health.components && health.components.length > 0 && (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {health.components.map((comp, idx) => (
+                    <div
+                      key={idx}
+                      className={`bg-dark-800/50 rounded-xl border p-4 ${
+                        comp.status === 'healthy' ? 'border-success-500/30' :
+                        comp.status === 'degraded' ? 'border-warning-500/30' :
+                        'border-error-500/30'
+                      }`}
+                    >
+                      <div className="flex items-center gap-3 mb-2">
+                        <div className={`w-3 h-3 rounded-full ${
+                          comp.status === 'healthy' ? 'bg-success-500' :
+                          comp.status === 'degraded' ? 'bg-warning-500' :
+                          'bg-error-500'
+                        }`} />
+                        <div className="font-medium text-dark-100">{comp.name}</div>
+                      </div>
+                      <div className={`text-sm ${
+                        comp.status === 'healthy' ? 'text-success-400' :
+                        comp.status === 'degraded' ? 'text-warning-400' :
+                        'text-error-400'
+                      }`}>
+                        {comp.status}
+                      </div>
+                      {comp.message && (
+                        <div className="text-xs text-dark-500 mt-1">{comp.message}</div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
         </>
       )}
 

From fd68d3ec7c454c4b3495e500320be382230d963f Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Fri, 16 Jan 2026 21:05:39 +0300
Subject: [PATCH 4/8] Refactor CI workflow and enhance AdminBanSystem component

- Updated CI workflow to use 'dev' branch instead of 'develop' and renamed job from 'lint-and-typecheck' to 'lint-and-build'.
- Simplified linting and type checking steps in the CI process.
- Refactored switch cases in AdminBanSystem component for better readability and structure, ensuring consistent handling of API calls for various tabs.
---
 .github/workflows/ci.yml     | 43 ++++++------------------------------
 src/pages/AdminBanSystem.tsx | 30 ++++++++++++++++---------
 2 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a7375c4..a593c22 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,12 +2,12 @@ name: CI
 
 on:
   push:
-    branches: [main, develop]
+    branches: [main, dev]
   pull_request:
-    branches: [main, develop]
+    branches: [main, dev]
 
 jobs:
-  lint-and-typecheck:
+  lint-and-build:
     runs-on: ubuntu-latest
 
     steps:
@@ -24,39 +24,10 @@ jobs:
         run: npm ci
 
       - name: Run ESLint
-        run: npm run lint -- --max-warnings 50
+        run: npm run lint
 
-      - name: Type check
-        run: npm run type-check
+      - name: Run TypeScript check
+        run: npx tsc --noEmit
 
-  build:
-    runs-on: ubuntu-latest
-    needs: lint-and-typecheck
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build application
+      - name: Build
         run: npm run build
-        env:
-          VITE_API_URL: /api
-          VITE_TELEGRAM_BOT_USERNAME: test_bot
-          VITE_APP_NAME: Cabinet
-          VITE_APP_LOGO: V
-
-      - name: Upload build artifacts
-        uses: actions/upload-artifact@v4
-        with:
-          name: dist
-          path: dist/
-          retention-days: 7
diff --git a/src/pages/AdminBanSystem.tsx b/src/pages/AdminBanSystem.tsx
index 594834a..ec1c3d1 100644
--- a/src/pages/AdminBanSystem.tsx
+++ b/src/pages/AdminBanSystem.tsx
@@ -183,46 +183,56 @@ export default function AdminBanSystem() {
       setError(null)
 
       switch (tab) {
-        case 'dashboard':
+        case 'dashboard': {
           const statsData = await banSystemApi.getStats()
           setStats(statsData)
           break
-        case 'users':
+        }
+        case 'users': {
           const usersData = await banSystemApi.getUsers({ limit: 50 })
           setUsers(usersData)
           break
-        case 'punishments':
+        }
+        case 'punishments': {
           const punishmentsData = await banSystemApi.getPunishments()
           setPunishments(punishmentsData)
           break
-        case 'nodes':
+        }
+        case 'nodes': {
           const nodesData = await banSystemApi.getNodes()
           setNodes(nodesData)
           break
-        case 'agents':
+        }
+        case 'agents': {
           const agentsData = await banSystemApi.getAgents()
           setAgents(agentsData)
           break
-        case 'violations':
+        }
+        case 'violations': {
           const violationsData = await banSystemApi.getTrafficViolations()
           setViolations(violationsData)
           break
-        case 'settings':
+        }
+        case 'settings': {
           const settingsData = await banSystemApi.getSettings()
           setSettings(settingsData)
           break
-        case 'traffic':
+        }
+        case 'traffic': {
           const trafficData = await banSystemApi.getTraffic()
           setTraffic(trafficData)
           break
-        case 'reports':
+        }
+        case 'reports': {
           const reportData = await banSystemApi.getReport(reportHours)
           setReport(reportData)
           break
-        case 'health':
+        }
+        case 'health': {
           const healthData = await banSystemApi.getHealth()
           setHealth(healthData)
           break
+        }
       }
     } catch {
       setError(t('banSystem.loadError'))

From c6e99f4685e4f9a379f60edb066efbfbc2282def Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Sat, 17 Jan 2026 07:18:37 +0300
Subject: [PATCH 5/8] Remove Docker Hub CI workflow configuration

---
 .github/workflows/docker-hub.yml | 53 --------------------------------
 1 file changed, 53 deletions(-)
 delete mode 100644 .github/workflows/docker-hub.yml

diff --git a/.github/workflows/docker-hub.yml b/.github/workflows/docker-hub.yml
deleted file mode 100644
index 70a9c07..0000000
--- a/.github/workflows/docker-hub.yml
+++ /dev/null
@@ -1,53 +0,0 @@
-name: Docker Hub Build
-
-on:
-  push:
-    branches: [main]
-    tags:
-      - 'v*'
-
-jobs:
-  build-and-push-dockerhub:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Extract metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/bedolaga-cabinet
-          tags: |
-            type=ref,event=branch
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{major}}
-            type=sha
-            type=raw,value=latest,enable={{is_default_branch}}
-
-      - name: Build and push to Docker Hub
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          build-args: |
-            VITE_API_URL=/api
-            VITE_TELEGRAM_BOT_USERNAME=
-            VITE_APP_NAME=Cabinet
-            VITE_APP_LOGO=V
-          platforms: linux/amd64,linux/arm64

From 9ab53034df951ca098f8698f5bef5b73ce9270b6 Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Sat, 17 Jan 2026 07:24:14 +0300
Subject: [PATCH 6/8] Enhance localization and AdminBanSystem component

- Added new localization keys for settings related to punishment, traffic monitoring, and network detection in both English and Russian.
- Implemented formatting functions in AdminBanSystem to improve the display of setting keys and categories, enhancing readability and user experience.
---
 src/locales/en.json          | 41 +++++++++++++++++++++++++++++++++++-
 src/locales/ru.json          | 41 +++++++++++++++++++++++++++++++++++-
 src/pages/AdminBanSystem.tsx | 28 +++++++++++++++++++++---
 3 files changed, 105 insertions(+), 5 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 1152287..6436c47 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -973,7 +973,46 @@
       "notifications": "Notifications",
       "whitelist": "Whitelist",
       "saved": "Setting saved",
-      "error": "Error saving"
+      "error": "Error saving",
+      "categories": {
+        "general": "General Settings",
+        "punishment": "Punishments",
+        "progressive_bans": "Progressive Bans",
+        "traffic": "Traffic Monitoring",
+        "network": "Network Detection",
+        "notifications": "Notifications",
+        "rate_limit": "Rate Limits"
+      },
+      "punishment_enabled": "Enable auto-ban",
+      "punishment_minutes": "Ban duration (minutes)",
+      "ip_window_seconds": "IP counting window (seconds)",
+      "notify_on_punishment": "Notify on bans",
+      "notify_on_node_status": "Notify on node status",
+      "daily_report_enabled": "Daily report",
+      "daily_report_hour": "Report hour",
+      "rate_limit_max": "Max requests",
+      "rate_limit_window": "Rate limit window (sec)",
+      "heartbeat_timeout": "Heartbeat timeout (sec)",
+      "progressive_bans_enabled": "Progressive bans",
+      "progressive_ban_1": "1st ban (minutes)",
+      "progressive_ban_2": "2nd ban (minutes)",
+      "progressive_ban_3": "3rd ban (minutes)",
+      "progressive_ban_window_hours": "Reset window (hours)",
+      "traffic_monitor_enabled": "Traffic monitoring",
+      "traffic_limit_gb": "Traffic limit (GB)",
+      "traffic_window_minutes": "Check window (min)",
+      "traffic_check_interval": "Check interval (min)",
+      "traffic_ban_minutes": "Traffic ban (min)",
+      "network_detection_enabled": "Network type detection",
+      "network_detection_nodes": "Detection nodes",
+      "network_detection_monitor_all": "Monitor all nodes",
+      "network_detection_collect_all": "Collect from all nodes",
+      "network_notify_mobile": "Notify on mobile",
+      "network_block_mobile": "Block mobile",
+      "network_block_mobile_minutes": "Block mobile (min)",
+      "network_notify_wifi": "Notify on WiFi",
+      "network_block_wifi": "Block WiFi",
+      "network_block_wifi_minutes": "Block WiFi (min)"
     },
     "health": {
       "title": "System Health",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index ac4ce57..2fc81af 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -973,7 +973,46 @@
       "notifications": "Уведомления",
       "whitelist": "Белый список",
       "saved": "Настройка сохранена",
-      "error": "Ошибка сохранения"
+      "error": "Ошибка сохранения",
+      "categories": {
+        "general": "Общие настройки",
+        "punishment": "Наказания",
+        "progressive_bans": "Прогрессивные баны",
+        "traffic": "Мониторинг трафика",
+        "network": "Детекция сети",
+        "notifications": "Уведомления",
+        "rate_limit": "Лимиты запросов"
+      },
+      "punishment_enabled": "Включить автобан",
+      "punishment_minutes": "Длительность бана (минуты)",
+      "ip_window_seconds": "Окно подсчёта IP (секунды)",
+      "notify_on_punishment": "Уведомлять о банах",
+      "notify_on_node_status": "Уведомлять о статусе нод",
+      "daily_report_enabled": "Ежедневный отчёт",
+      "daily_report_hour": "Час отправки отчёта",
+      "rate_limit_max": "Макс. запросов",
+      "rate_limit_window": "Окно лимита (сек)",
+      "heartbeat_timeout": "Таймаут heartbeat (сек)",
+      "progressive_bans_enabled": "Прогрессивные баны",
+      "progressive_ban_1": "1-й бан (минуты)",
+      "progressive_ban_2": "2-й бан (минуты)",
+      "progressive_ban_3": "3-й бан (минуты)",
+      "progressive_ban_window_hours": "Окно сброса (часы)",
+      "traffic_monitor_enabled": "Мониторинг трафика",
+      "traffic_limit_gb": "Лимит трафика (ГБ)",
+      "traffic_window_minutes": "Окно проверки (мин)",
+      "traffic_check_interval": "Интервал проверки (мин)",
+      "traffic_ban_minutes": "Бан за трафик (мин)",
+      "network_detection_enabled": "Детекция типа сети",
+      "network_detection_nodes": "Ноды для детекции",
+      "network_detection_monitor_all": "Мониторить все ноды",
+      "network_detection_collect_all": "Собирать со всех нод",
+      "network_notify_mobile": "Уведомлять о мобильных",
+      "network_block_mobile": "Блокировать мобильные",
+      "network_block_mobile_minutes": "Блок мобильных (мин)",
+      "network_notify_wifi": "Уведомлять о WiFi",
+      "network_block_wifi": "Блокировать WiFi",
+      "network_block_wifi_minutes": "Блок WiFi (мин)"
     },
     "health": {
       "title": "Состояние системы",
diff --git a/src/pages/AdminBanSystem.tsx b/src/pages/AdminBanSystem.tsx
index ec1c3d1..a135121 100644
--- a/src/pages/AdminBanSystem.tsx
+++ b/src/pages/AdminBanSystem.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   banSystemApi,
@@ -148,6 +148,28 @@ export default function AdminBanSystem() {
   const [reportHours, setReportHours] = useState(24)
   const [settingLoading, setSettingLoading] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
+
+  // Format snake_case to readable label
+  const formatSettingKey = useCallback((key: string): string => {
+    // Try translation first
+    const translated = t(`banSystem.settings.${key}`, { defaultValue: '' })
+    if (translated && translated !== `banSystem.settings.${key}`) {
+      return translated
+    }
+    // Fallback: convert snake_case to Title Case
+    return key
+      .split('_')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ')
+  }, [t])
+
+  const formatCategory = useCallback((category: string): string => {
+    const translated = t(`banSystem.settings.categories.${category}`, { defaultValue: '' })
+    if (translated && translated !== `banSystem.settings.categories.${category}`) {
+      return translated
+    }
+    return category.charAt(0).toUpperCase() + category.slice(1).replace(/_/g, ' ')
+  }, [t])
   const [error, setError] = useState<string | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
   const [actionLoading, setActionLoading] = useState<string | null>(null)
@@ -925,13 +947,13 @@ export default function AdminBanSystem() {
                 return Object.entries(grouped).map(([category, items]) => (
                   <div key={category} className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden">
                     <div className="p-4 border-b border-dark-700">
-                      <h3 className="text-sm font-medium text-dark-200 capitalize">{category}</h3>
+                      <h3 className="text-sm font-medium text-dark-200">{formatCategory(category)}</h3>
                     </div>
                     <div className="divide-y divide-dark-700">
                       {items.map((setting) => (
                         <div key={setting.key} className="p-4 flex items-center justify-between">
                           <div className="flex-1 min-w-0">
-                            <div className="text-dark-100 font-medium">{setting.key}</div>
+                            <div className="text-dark-100 font-medium">{formatSettingKey(setting.key)}</div>
                             {setting.description && (
                               <div className="text-xs text-dark-500 mt-0.5">{setting.description}</div>
                             )}

From f450f9c4aca502f127096b37fd289cf079660720 Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Sat, 17 Jan 2026 07:32:35 +0300
Subject: [PATCH 7/8] Add localization keys for 'add' in English and Russian;
 enhance AdminBanSystem component with improved category inference and sorting

---
 src/locales/en.json          |  1 +
 src/locales/ru.json          |  1 +
 src/pages/AdminBanSystem.tsx | 71 ++++++++++++++++++++++++++++++++----
 3 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 6436c47..86f0998 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -15,6 +15,7 @@
     "yes": "Yes",
     "no": "No",
     "or": "or",
+    "add": "Add",
     "and": "and",
     "edit": "Edit",
     "delete": "Delete",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 2fc81af..af72674 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -15,6 +15,7 @@
     "yes": "Да",
     "no": "Нет",
     "or": "или",
+    "add": "Добавить",
     "and": "и",
     "edit": "Редактировать",
     "delete": "Удалить",
diff --git a/src/pages/AdminBanSystem.tsx b/src/pages/AdminBanSystem.tsx
index a135121..99a87c7 100644
--- a/src/pages/AdminBanSystem.tsx
+++ b/src/pages/AdminBanSystem.tsx
@@ -938,27 +938,50 @@ export default function AdminBanSystem() {
               {/* Group settings by category */}
               {(() => {
                 const grouped: Record<string, BanSettingDefinition[]> = {}
+
+                // Smart categorization: use API category or infer from key prefix
+                const inferCategory = (key: string, apiCategory: string | null): string => {
+                  if (apiCategory) return apiCategory
+                  if (key.startsWith('punishment_') || key.startsWith('progressive_ban')) return 'punishment'
+                  if (key.startsWith('traffic_')) return 'traffic'
+                  if (key.startsWith('network_')) return 'network'
+                  if (key.startsWith('rate_limit_')) return 'rate_limit'
+                  if (key.startsWith('notify_') || key.startsWith('daily_report')) return 'notifications'
+                  return 'general'
+                }
+
                 settings.settings.forEach((s) => {
-                  const cat = s.category || 'general'
+                  const cat = inferCategory(s.key, s.category)
                   if (!grouped[cat]) grouped[cat] = []
                   grouped[cat].push(s)
                 })
 
-                return Object.entries(grouped).map(([category, items]) => (
+                // Sort categories in logical order
+                const categoryOrder = ['general', 'punishment', 'progressive_bans', 'traffic', 'network', 'notifications', 'rate_limit']
+                const sortedCategories = Object.keys(grouped).sort((a, b) => {
+                  const aIdx = categoryOrder.indexOf(a)
+                  const bIdx = categoryOrder.indexOf(b)
+                  if (aIdx === -1 && bIdx === -1) return a.localeCompare(b)
+                  if (aIdx === -1) return 1
+                  if (bIdx === -1) return -1
+                  return aIdx - bIdx
+                })
+
+                return sortedCategories.map((category) => (
                   <div key={category} className="bg-dark-800/50 rounded-xl border border-dark-700 overflow-hidden">
                     <div className="p-4 border-b border-dark-700">
                       <h3 className="text-sm font-medium text-dark-200">{formatCategory(category)}</h3>
                     </div>
                     <div className="divide-y divide-dark-700">
-                      {items.map((setting) => (
-                        <div key={setting.key} className="p-4 flex items-center justify-between">
+                      {grouped[category].map((setting) => (
+                        <div key={setting.key} className="p-4 flex items-center justify-between gap-4">
                           <div className="flex-1 min-w-0">
                             <div className="text-dark-100 font-medium">{formatSettingKey(setting.key)}</div>
                             {setting.description && (
                               <div className="text-xs text-dark-500 mt-0.5">{setting.description}</div>
                             )}
                           </div>
-                          <div className="ml-4">
+                          <div className="flex-shrink-0">
                             {setting.type === 'bool' ? (
                               <button
                                 onClick={() => handleToggleSetting(setting.key)}
@@ -984,8 +1007,42 @@ export default function AdminBanSystem() {
                                 className="w-24 px-3 py-1.5 bg-dark-900 border border-dark-700 rounded-lg text-dark-100 text-sm focus:outline-none focus:border-accent-500 disabled:opacity-50"
                               />
                             ) : setting.type === 'list' ? (
-                              <div className="text-dark-300 text-sm">
-                                {Array.isArray(setting.value) ? setting.value.join(', ') : String(setting.value)}
+                              <div className="flex flex-wrap gap-1.5 max-w-xs justify-end">
+                                {Array.isArray(setting.value) && setting.value.length > 0 ? (
+                                  setting.value.map((item, idx) => (
+                                    <span
+                                      key={idx}
+                                      className="px-2 py-0.5 bg-accent-500/20 text-accent-400 rounded text-xs"
+                                    >
+                                      {String(item)}
+                                    </span>
+                                  ))
+                                ) : (
+                                  <span className="text-dark-500 text-sm">{t('common.noData')}</span>
+                                )}
+                                {setting.editable && nodes && setting.key.includes('nodes') && (
+                                  <select
+                                    className="px-2 py-1 bg-dark-900 border border-dark-700 rounded text-xs text-dark-300 focus:outline-none focus:border-accent-500"
+                                    onChange={(e) => {
+                                      if (e.target.value) {
+                                        const currentList = Array.isArray(setting.value) ? setting.value : []
+                                        if (!currentList.includes(e.target.value)) {
+                                          handleSetSetting(setting.key, [...currentList, e.target.value].join(','))
+                                        }
+                                        e.target.value = ''
+                                      }
+                                    }}
+                                    disabled={settingLoading === setting.key}
+                                  >
+                                    <option value="">+ {t('common.add')}</option>
+                                    {nodes.nodes
+                                      .filter(n => !Array.isArray(setting.value) || !setting.value.includes(n.name))
+                                      .map(n => (
+                                        <option key={n.name} value={n.name}>{n.name}</option>
+                                      ))
+                                    }
+                                  </select>
+                                )}
                               </div>
                             ) : (
                               <div className="text-dark-300 text-sm">{String(setting.value)}</div>

From fbca83a31fd2c52520e1425e59a66fef5fb555cb Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Sun, 18 Jan 2026 22:47:20 +0300
Subject: [PATCH 8/8] Update CI workflow to improve linting and type checking
 steps, rename job, and adjust branch names

---
 .github/workflows/ci.yml | 42 ++++++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a593c22..9870661 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,15 +1,27 @@
-name: CI
-
 on:
   push:
-    branches: [main, dev]
+    branches: [main, develop]
   pull_request:
-    branches: [main, dev]
+    branches: [main, develop]
 
 jobs:
-  lint-and-build:
+  lint-and-typecheck:
     runs-on: ubuntu-latest
 
+    steps:
+	@@ -24,39 +24,10 @@ jobs:
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint -- --max-warnings 50
+
+      - name: Type check
+        run: npm run type-check
+
+  build:
+    runs-on: ubuntu-latest
+    needs: lint-and-typecheck
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -23,11 +35,17 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Run ESLint
-        run: npm run lint
-
-      - name: Run TypeScript check
-        run: npx tsc --noEmit
-
-      - name: Build
+      - name: Build application
         run: npm run build
+        env:
+          VITE_API_URL: /api
+          VITE_TELEGRAM_BOT_USERNAME: test_bot
+          VITE_APP_NAME: Cabinet
+          VITE_APP_LOGO: V
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/
+          retention-days: 7
\ No newline at end of file