feat(TrafficDashboard): add traffic statistics route and integrate TrafficDashboard component into the application

frontend/src/App.jsx

@@ -22,7 +22,8 @@ import {
   IconMenu2,
   IconArrowsExchange,
   IconLayoutSidebarLeftExpand,
-  IconLayoutNavbar
+  IconLayoutNavbar,
+  IconChartPie
 } from '@tabler/icons-react';
 import ServerManager from './ServerManager';
 import FilterManager from './FilterManager';
@@ -36,6 +37,7 @@ import CommunitiesManager from './CommunitiesManager';
 import NetworkConfigManager from './NetworkConfigManager';
 import MikrotikTools from './MikrotikTools.jsx';
 import Dashboard from './Dashboard';
+import TrafficDashboard from './TrafficDashboard.jsx';
 import MikrotikBackupsManager from './MikrotikBackupsManager.jsx';
 import PingServicesManager from './PingServicesManager.jsx';
 import './App.css';
@@ -56,7 +58,7 @@ function LanguageProvider({ children }) {
   const dict = {
     ru: {
       home: 'Главная', data: 'Данные', management: 'Управление', tools: 'Инструменты',
-      dashboard: 'Панель', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
+      dashboard: 'Панель', trafficTraffic: 'Расход трафика', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
       communities: 'Community', servers: 'Серверы', filters: 'Фильтры', billing: 'Биллинг', autoUrls: 'Авто URL',
       easySwitch: 'Easy Switch',       networkConfig: 'Сетевые настройки', mikrotikBackups: 'MikroTik Бэкапы', pingServices: 'Пинг сервисов',
       light: 'Светлая', dark: 'Тёмная',
@@ -64,7 +66,7 @@ function LanguageProvider({ children }) {
     },
     en: {
       home: 'Home', data: 'Data', management: 'Management', tools: 'Tools',
-      dashboard: 'Dashboard', domains: 'Domains', ipRanges: 'IP Ranges', asns: 'ASNs',
+      dashboard: 'Dashboard', trafficTraffic: 'Traffic Usage', domains: 'Domains', ipRanges: 'IP Ranges', asns: 'ASNs',
       communities: 'Communities', servers: 'Servers', filters: 'Filters', billing: 'Billing', autoUrls: 'Auto URLs',
       easySwitch: 'Easy Switch',       networkConfig: 'Network Config', mikrotikBackups: 'MikroTik Backups', pingServices: 'Ping Services',
       light: 'Light', dark: 'Dark',
@@ -189,8 +191,10 @@ function MainLayout() {
       id: 'home',
       title: t('home'),
       icon: IconHome,
-      path: '/dashboard',
-      single: true
+      items: [
+        { id: 'dashboard', title: t('dashboard'), path: '/dashboard', icon: IconHome },
+        { id: 'traffic', title: t('trafficTraffic'), path: '/traffic', icon: IconChartPie }
+      ]
     },
     {
       id: 'data',
@@ -370,6 +374,7 @@ function MainLayout() {
         <main id="main-content" className="container-xl mt-4 flex-grow-1" tabIndex="-1">
           <Routes>
             <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/traffic" element={<TrafficDashboard />} />
             <Route path="/domains" element={<DomainsNewManager />} />
             <Route path="/ip-ranges" element={<IPRangesManager />} />
             <Route path="/asns" element={<ASNsNewManager />} />
@@ -526,6 +531,7 @@ function MainLayout() {
             <main id="main-content" tabIndex="-1">
               <Routes>
                 <Route path="/dashboard" element={<Dashboard />} />
+                <Route path="/traffic" element={<TrafficDashboard />} />
                 <Route path="/domains" element={<DomainsNewManager />} />
                 <Route path="/ip-ranges" element={<IPRangesManager />} />
                 <Route path="/asns" element={<ASNsNewManager />} />