Changed design and bug fixes

.gitignore

@@ -35,3 +35,4 @@ frontend/.env.production.local
 # Build
 frontend/dist/
 backend/build/
+backend/users1.json.backup

backend/tickets.json

@@ -1 +1,58 @@
-{}
+{
+  "1": {
+    "id": "1",
+    "title": "ававп",
+    "description": "вап",
+    "author": "Root",
+    "status": "closed",
+    "created_at": "2026-01-16T09:30:34.640417",
+    "updated_at": "2026-01-16T09:35:07.708933",
+    "messages": [
+      {
+        "author": "Root",
+        "text": "вап",
+        "timestamp": "2026-01-16T09:30:34.640417"
+      },
+      {
+        "author": "Root",
+        "text": "ап",
+        "timestamp": "2026-01-16T09:30:38.095207"
+      },
+      {
+        "author": "Root",
+        "text": "вапвп",
+        "timestamp": "2026-01-16T09:30:40.438134"
+      },
+      {
+        "author": "Root",
+        "text": "вапвпвап",
+        "timestamp": "2026-01-16T09:30:42.195576"
+      },
+      {
+        "author": "Root",
+        "text": "вавап",
+        "timestamp": "2026-01-16T09:30:44.371194"
+      },
+      {
+        "author": "Root",
+        "text": "вапвап",
+        "timestamp": "2026-01-16T09:30:45.779656"
+      },
+      {
+        "author": "Root",
+        "text": "вавап",
+        "timestamp": "2026-01-16T09:30:47.736753"
+      },
+      {
+        "author": "system",
+        "text": "Статус изменён на: В работе",
+        "timestamp": "2026-01-16T09:35:01.602729"
+      },
+      {
+        "author": "system",
+        "text": "Статус изменён на: Закрыт",
+        "timestamp": "2026-01-16T09:35:07.708933"
+      }
+    ]
+  }
+}

backend/users.json

@@ -1,75 +1 @@
-{
+{}
-  "Root": {
-    "username": "Root",
-    "password": "$2b$12$PAaomoUWn3Ip5ov.S/uYPeTIRiDMq7DbA57ahyYQnw3QHT2zuYMlG",
-    "role": "owner",
-    "servers": [],
-    "permissions": {
-      "manage_users": true,
-      "manage_roles": true,
-      "manage_servers": true,
-      "manage_tickets": true,
-      "manage_files": true,
-      "delete_users": true,
-      "view_all_resources": true
-    },
-    "resource_access": {
-      "servers": [],
-      "tickets": [],
-      "files": []
-    }
-  },
-  "MihailPrud": {
-    "username": "MihailPrud",
-    "password": "$2b$12$GfbQN4scE.b.mtUHofWWE.Dn1tQpT1zwLAxeICv90sHP4zGv0dc2G",
-    "role": "owner",
-    "servers": [
-      "test",
-      "nya"
-    ],
-    "permissions": {
-      "manage_users": true,
-      "manage_roles": true,
-      "manage_servers": true,
-      "manage_tickets": true,
-      "manage_files": true,
-      "delete_users": true,
-      "view_all_resources": true
-    },
-    "resource_access": {
-      "servers": [
-        "test",
-        "nya"
-      ],
-      "tickets": [],
-      "files": []
-    }
-  },
-  "arkonsad": {
-    "username": "arkonsad",
-    "password": "$2b$12$z.AYkfa/MlTYFd9rLNfBmu9JHOFKUe8YdddnqCmRqAxc7vGQeo392",
-    "role": "banned",
-    "servers": [
-      "123",
-      "sdfsdf"
-    ],
-    "permissions": {
-      "manage_users": false,
-      "manage_roles": false,
-      "manage_servers": false,
-      "manage_tickets": false,
-      "manage_files": false,
-      "delete_users": false,
-      "view_all_resources": false
-    },
-    "resource_access": {
-      "servers": [
-        "123",
-        "sdfsdf"
-      ],
-      "tickets": [],
-      "files": []
-    },
-    "ban_reason": "Заблокирован администратором"
-  }
-}

frontend/src/App.jsx

@@ -1,5 +1,9 @@
 import { useState, useEffect } from 'react';
-import { Server, Play, Square, Terminal, FolderOpen, HardDrive, Settings, Plus, Users as UsersIcon, LogOut, Menu, X, MessageSquare, UserCircle, Shield } from 'lucide-react';
+import { 
+  Server, Play, Square, Terminal, FolderOpen, Settings, Plus, 
+  Users as UsersIcon, LogOut, Menu, X, MessageSquare, UserCircle, 
+  Shield, Activity, HardDrive, Cpu, BarChart3, Home
+} from 'lucide-react';
 import Console from './components/Console';
 import FileManager from './components/FileManager';
 import Stats from './components/Stats';
@@ -11,11 +15,9 @@ import Tickets from './components/Tickets';
 import Profile from './components/Profile';
 import Auth from './components/Auth';
 import ErrorBoundary from './components/ErrorBoundary';
-import ThemeSelector from './components/ThemeSelector';
 import NotificationSystem, { notify } from './components/NotificationSystem';
 import axios from 'axios';
 import { API_URL } from './config';
-import { getTheme } from './themes';
 
 function App() {
   const [token, setToken] = useState(localStorage.getItem('token'));
@@ -24,30 +26,22 @@ function App() {
   const [selectedServer, setSelectedServer] = useState(null);
   const [activeTab, setActiveTab] = useState('console');
   const [showCreateModal, setShowCreateModal] = useState(false);
-  const [showUsers, setShowUsers] = useState(false);
   const [showUserManagement, setShowUserManagement] = useState(false);
   const [showTickets, setShowTickets] = useState(false);
   const [showProfile, setShowProfile] = useState(false);
-  const [viewingUsername, setViewingUsername] = useState(null);
   const [connectionError, setConnectionError] = useState(false);
-  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'modern');
   const [sidebarOpen, setSidebarOpen] = useState(true);
-
+  const [currentView, setCurrentView] = useState('dashboard');
-  const currentTheme = getTheme(theme);
 
   useEffect(() => {
-    // Проверяем callback от OpenID Connect
     const urlParams = new URLSearchParams(window.location.search);
     const callbackToken = urlParams.get('token');
     const callbackUsername = urlParams.get('username');
     
     if (callbackToken && callbackUsername) {
-      // Сохраняем токен и обновляем состояние
       localStorage.setItem('token', callbackToken);
       setToken(callbackToken);
       setUser({ username: callbackUsername });
-      
-      // Очищаем URL
       window.history.replaceState({}, document.title, window.location.pathname);
       return;
     }
@@ -99,6 +93,7 @@ function App() {
     localStorage.setItem('token', data.access_token);
     setToken(data.access_token);
     setUser({ username: data.username, role: data.role });
+    notify.success(`Добро пожаловать, ${data.username}!`);
   };
 
   const handleLogout = () => {
@@ -107,530 +102,461 @@ function App() {
     setUser(null);
     setServers([]);
     setSelectedServer(null);
+    notify.info('Вы вышли из системы');
   };
 
-  const handleServerDeleted = () => {
+  const handleServerAction = async (serverName, action) => {
-    setSelectedServer(null);
-    loadServers();
-  };
-
-  const handleThemeChange = (newTheme) => {
-    setTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
-  };
-
-  const getRoleName = (role) => {
-    switch (role) {
-      case 'admin':
-        return 'Админ';
-      case 'support':
-        return 'Поддержка';
-      case 'banned':
-        return 'Забанен';
-      default:
-        return 'Пользователь';
-    }
-  };
-
-  const handleUsernameChange = (newToken, newUsername) => {
-    setToken(newToken);
-    setUser({ ...user, username: newUsername });
-    loadServers();
-  };
-
-  const handleViewProfile = (username) => {
-    setViewingUsername(username);
-    setShowProfile(true);
-    setShowUsers(false);
-  };
-
-  const startServer = async (serverName) => {
     try {
-      const response = await axios.post(
+      await axios.post(
-        `${API_URL}/api/servers/${serverName}/start`,
+        `${API_URL}/api/servers/${serverName}/${action}`,
         {},
         { headers: { Authorization: `Bearer ${token}` } }
       );
-      console.log('Сервер запущен:', response.data);
+      notify.success(`Сервер ${action === 'start' ? 'запущен' : 'остановлен'}`);
-      notify('success', 'Сервер запущен', `Сервер "${serverName}" успешно запущен`);
+      loadServers();
-      setTimeout(() => {
-        loadServers();
-      }, 1000);
     } catch (error) {
-      console.error('Ошибка запуска сервера:', error);
+      notify.error(`Ошибка: ${error.response?.data?.detail || error.message}`);
-      notify('error', 'Ошибка запуска', error.response?.data?.detail || 'Не удалось запустить сервер');
-      alert(error.response?.data?.detail || 'Ошибка запуска сервера');
-    }
-  };
-
-  const stopServer = async (serverName) => {
-    try {
-      const response = await axios.post(
-        `${API_URL}/api/servers/${serverName}/stop`,
-        {},
-        { headers: { Authorization: `Bearer ${token}` } }
-      );
-      console.log('Сервер остановлен:', response.data);
-      notify('info', 'Сервер остановлен', `Сервер "${serverName}" успешно остановлен`);
-      setTimeout(() => {
-        loadServers();
-      }, 1000);
-    } catch (error) {
-      console.error('Ошибка остановки сервера:', error);
-      notify('error', 'Ошибка остановки', error.response?.data?.detail || 'Не удалось остановить сервер');
-      alert(error.response?.data?.detail || 'Ошибка остановки сервера');
     }
   };
 
   if (!token) {
-    return <Auth onLogin={handleLogin} />;
-  }
-
-  if (showUsers) {
     return (
-      <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
+      <ErrorBoundary>
-        <header className={`${currentTheme.secondary} ${currentTheme.border} border-b backdrop-blur-sm bg-opacity-95 sticky top-0 z-40`}>
+        <Auth onLogin={handleLogin} />
-          <div className="px-6 py-4">
+        <NotificationSystem />
-            <div className="flex items-center justify-between">
+      </ErrorBoundary>
-              <div className="flex items-center gap-4">
-                <div className="flex items-center gap-3">
-                  <div className={`${currentTheme.accent} p-2 rounded-lg`}>
-                    <Server className="w-6 h-6 text-white" />
-                  </div>
-                  <div>
-                    <h1 className="text-xl font-bold">MC Panel</h1>
-                    <p className={`text-xs ${currentTheme.textSecondary}`}>Управление серверами</p>
-                  </div>
-                </div>
-              </div>
-              <div className="flex items-center gap-3">
-                <div className={`px-3 py-1.5 rounded-lg ${currentTheme.card} ${currentTheme.border} border`}>
-                  <span className={`text-sm ${currentTheme.textSecondary}`}>
-                    {user?.username}
-                  </span>
-                  <span className={`ml-2 text-xs px-2 py-0.5 rounded ${currentTheme.accent} text-white`}>
-                    {getRoleName(user?.role)}
-                  </span>
-                </div>
-                <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
-                <button
-                  onClick={() => setShowUsers(false)}
-                  className={`${currentTheme.card} ${currentTheme.hover} px-4 py-2 rounded-lg transition flex items-center gap-2`}
-                >
-                  <Server className="w-4 h-4" />
-                  Серверы
-                </button>
-                <button
-                  onClick={handleLogout}
-                  className={`${currentTheme.danger} hover:opacity-90 px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
-                >
-                  <LogOut className="w-4 h-4" />
-                  Выход
-                </button>
-              </div>
-            </div>
-          </div>
-        </header>
-        <Users token={token} theme={currentTheme} onViewProfile={handleViewProfile} />
-      </div>
-    );
-  }
-
-  if (showTickets) {
-    return (
-      <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
-        <header className={`${currentTheme.secondary} ${currentTheme.border} border-b backdrop-blur-sm bg-opacity-95 sticky top-0 z-40`}>
-          <div className="px-6 py-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                <div className="flex items-center gap-3">
-                  <div className={`${currentTheme.accent} p-2 rounded-lg`}>
-                    <Server className="w-6 h-6 text-white" />
-                  </div>
-                  <div>
-                    <h1 className={`text-xl font-bold bg-gradient-to-r ${currentTheme.gradient} bg-clip-text text-transparent`}>MC Panel</h1>
-                    <p className={`text-xs ${currentTheme.textSecondary}`}>Управление серверами</p>
-                  </div>
-                </div>
-              </div>
-              <div className="flex items-center gap-3">
-                <div className={`px-3 py-1.5 rounded-lg ${currentTheme.card} ${currentTheme.border} border`}>
-                  <span className={`text-sm ${currentTheme.textSecondary}`}>
-                    {user?.username}
-                  </span>
-                  <span className={`ml-2 text-xs px-2 py-0.5 rounded ${currentTheme.accent} text-white`}>
-                    {getRoleName(user?.role)}
-                  </span>
-                </div>
-                <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
-                <button
-                  onClick={() => setShowTickets(false)}
-                  className={`${currentTheme.card} ${currentTheme.hover} px-4 py-2 rounded-lg transition flex items-center gap-2`}
-                >
-                  <Server className="w-4 h-4" />
-                  Серверы
-                </button>
-                <button
-                  onClick={handleLogout}
-                  className={`${currentTheme.danger} hover:opacity-90 px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
-                >
-                  <LogOut className="w-4 h-4" />
-                  Выход
-                </button>
-              </div>
-            </div>
-          </div>
-        </header>
-        <Tickets token={token} user={user} theme={currentTheme} />
-      </div>
-    );
-  }
-
-  if (showProfile) {
-    return (
-      <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
-        <header className={`${currentTheme.secondary} ${currentTheme.border} border-b backdrop-blur-sm bg-opacity-95 sticky top-0 z-40`}>
-          <div className="px-6 py-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                <div className="flex items-center gap-3">
-                  <div className={`${currentTheme.accent} p-2 rounded-lg`}>
-                    <Server className="w-6 h-6 text-white" />
-                  </div>
-                  <div>
-                    <h1 className={`text-xl font-bold bg-gradient-to-r ${currentTheme.gradient} bg-clip-text text-transparent`}>MC Panel</h1>
-                    <p className={`text-xs ${currentTheme.textSecondary}`}>Управление серверами</p>
-                  </div>
-                </div>
-              </div>
-              <div className="flex items-center gap-3">
-                <div className={`px-3 py-1.5 rounded-lg ${currentTheme.card} ${currentTheme.border} border`}>
-                  <span className={`text-sm ${currentTheme.textSecondary}`}>
-                    {user?.username}
-                  </span>
-                  <span className={`ml-2 text-xs px-2 py-0.5 rounded ${currentTheme.accent} text-white`}>
-                    {getRoleName(user?.role)}
-                  </span>
-                </div>
-                <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
-                <button
-                  onClick={() => {
-                    setShowProfile(false);
-                    setViewingUsername(null);
-                  }}
-                  className={`${currentTheme.card} ${currentTheme.hover} px-4 py-2 rounded-lg transition flex items-center gap-2`}
-                >
-                  <Server className="w-4 h-4" />
-                  Серверы
-                </button>
-                <button
-                  onClick={handleLogout}
-                  className={`${currentTheme.danger} hover:opacity-90 px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
-                >
-                  <LogOut className="w-4 h-4" />
-                  Выход
-                </button>
-              </div>
-            </div>
-          </div>
-        </header>
-        <Profile token={token} user={user} theme={currentTheme} onUsernameChange={handleUsernameChange} viewingUsername={viewingUsername} />
-      </div>
     );
   }
 
   return (
-    <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
+    <ErrorBoundary>
-      <NotificationSystem theme={currentTheme} />
+      <div className="flex h-screen bg-dark-900 overflow-hidden">
-      {/* Header */}
+        {/* Sidebar */}
-      <header className={`${currentTheme.secondary} ${currentTheme.border} border-b backdrop-blur-sm bg-opacity-95 sticky top-0 z-40`}>
+        <aside className={`${sidebarOpen ? 'w-64' : 'w-20'} bg-dark-850 border-r border-dark-700 transition-all duration-300 flex flex-col`}>
-        <div className="px-6 py-4">
+          {/* Logo */}
-          <div className="flex items-center justify-between">
+          <div className="h-16 flex items-center justify-between px-4 border-b border-dark-700">
-            <div className="flex items-center gap-4">
+            {sidebarOpen && (
+              <div className="flex items-center gap-2">
+                <Server className="w-8 h-8 text-primary-500" />
+                <span className="text-xl font-bold bg-gradient-to-r from-primary-400 to-blue-500 bg-clip-text text-transparent">
+                  MC Panel
+                </span>
+              </div>
+            )}
+            <button
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className="btn-icon"
+            >
+              {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </button>
+          </div>
+
+          {/* Navigation */}
+          <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
+            <button
+              onClick={() => {
+                setCurrentView('dashboard');
+                setSelectedServer(null);
+              }}
+              className={currentView === 'dashboard' ? 'sidebar-item-active w-full' : 'sidebar-item w-full'}
+            >
+              <Home className="w-5 h-5 flex-shrink-0" />
+              {sidebarOpen && <span>Главная</span>}
+            </button>
+
+            {sidebarOpen && (
+              <div className="pt-4 pb-2">
+                <div className="flex items-center justify-between px-4 mb-2">
+                  <span className="text-xs font-semibold text-gray-500 uppercase">Серверы</span>
+                  <button
+                    onClick={() => setShowCreateModal(true)}
+                    className="p-1 rounded hover:bg-dark-700 text-primary-500"
+                  >
+                    <Plus className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {servers.map((server) => (
               <button
-                onClick={() => setSidebarOpen(!sidebarOpen)}
+                key={server.name}
-                className={`lg:hidden ${currentTheme.hover} p-2 rounded-lg transition`}
+                onClick={() => {
+                  setSelectedServer(server);
+                  setCurrentView('server');
+                  setActiveTab('console');
+                }}
+                className={selectedServer?.name === server.name ? 'sidebar-item-active w-full' : 'sidebar-item w-full'}
               >
-                {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+                <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                  server.status === 'running' ? 'bg-green-500 shadow-glow' : 'bg-gray-600'
+                }`} />
+                {sidebarOpen && (
+                  <div className="flex-1 text-left truncate">
+                    <div className="text-sm font-medium">{server.displayName}</div>
+                    <div className="text-xs text-gray-500">{server.status === 'running' ? 'Запущен' : 'Остановлен'}</div>
+                  </div>
+                )}
               </button>
-              <div className="flex items-center gap-3">
+            ))}
-                <div className={`${currentTheme.accent} p-2 rounded-lg`}>
+
-                  <Server className="w-6 h-6 text-white" />
+            {sidebarOpen && servers.length === 0 && (
-                </div>
+              <div className="text-center py-8 text-gray-500 text-sm">
-                <div>
+                <Server className="w-12 h-12 mx-auto mb-2 opacity-50" />
-                  <h1 className={`text-xl font-bold bg-gradient-to-r ${currentTheme.gradient} bg-clip-text text-transparent`}>MC Panel</h1>
+                <p>Нет серверов</p>
-                  <p className={`text-xs ${currentTheme.textSecondary}`}>Управление серверами</p>
+                <button
-                </div>
+                  onClick={() => setShowCreateModal(true)}
+                  className="btn-primary mt-2 text-xs"
+                >
+                  Создать сервер
+                </button>
               </div>
-            </div>
+            )}
-            <div className="flex items-center gap-3">
+          </nav>
-              {connectionError && (
+
-                <div className="bg-red-500 bg-opacity-20 border border-red-500 px-3 py-1.5 rounded-lg text-sm text-red-400">
+          {/* Bottom section */}
-                  ⚠️ Нет связи
+          <div className="p-4 border-t border-dark-700 space-y-2">
-                </div>
+            {user?.role === 'owner' && (
-              )}
-              <div className={`px-3 py-1.5 rounded-lg ${currentTheme.card} ${currentTheme.border} border`}>
-                <span className={`text-sm ${currentTheme.textSecondary}`}>
-                  {user?.username}
-                </span>
-                <span className={`ml-2 text-xs px-2 py-0.5 rounded ${currentTheme.accent} text-white`}>
-                  {getRoleName(user?.role)}
-                </span>
-              </div>
-              <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
               <button
                 onClick={() => {
-                  setShowProfile(true);
+                  setShowUserManagement(true);
-                  setViewingUsername(null);
+                  setCurrentView('management');
                 }}
-                className={`${currentTheme.accent} ${currentTheme.accentHover} px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
+                className="sidebar-item w-full"
               >
-                <UserCircle className="w-4 h-4" />
+                <Shield className="w-5 h-5 flex-shrink-0 text-yellow-500" />
-                <span className="hidden sm:inline">Личный кабинет</span>
+                {sidebarOpen && <span>Управление</span>}
               </button>
-              <button
+            )}
-                onClick={() => setShowTickets(true)}
-                className={`${currentTheme.accent} ${currentTheme.accentHover} px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
-              >
-                <MessageSquare className="w-4 h-4" />
-                <span className="hidden sm:inline">Тикеты</span>
-              </button>
-              {user?.role === 'owner' && (
-                <button
-                  onClick={() => setShowUserManagement(true)}
-                  className="bg-yellow-500 hover:bg-yellow-600 px-4 py-2 rounded-lg transition flex items-center gap-2 text-white"
-                  title="Управление пользователями (только для владельца)"
-                >
-                  <Shield className="w-4 h-4" />
-                  <span className="hidden sm:inline">Управление</span>
-                </button>
-              )}
-              {user?.role === 'admin' && (
-                <button
-                  onClick={() => setShowUsers(true)}
-                  className={`${currentTheme.accent} ${currentTheme.accentHover} px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
-                >
-                  <UsersIcon className="w-4 h-4" />
-                  <span className="hidden sm:inline">Пользователи</span>
-                </button>
-              )}
-              <button
-                onClick={handleLogout}
-                className={`${currentTheme.danger} hover:opacity-90 px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
-              >
-                <LogOut className="w-4 h-4" />
-                <span className="hidden sm:inline">Выход</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
 
-      <div className="flex h-[calc(100vh-89px)]">
+            <button
-        {/* Sidebar */}
+              onClick={() => {
-        <aside className={`${sidebarOpen ? 'w-80' : 'w-0'} ${currentTheme.secondary} ${currentTheme.border} border-r transition-all duration-300 overflow-hidden`}>
+                setShowTickets(true);
-          <div className="p-4 h-full flex flex-col">
+                setCurrentView('tickets');
-            <div className="flex items-center justify-between mb-4">
+              }}
-              <h2 className="text-lg font-semibold">Мои серверы</h2>
+              className="sidebar-item w-full"
-              <button
+            >
-                onClick={() => setShowCreateModal(true)}
+              <MessageSquare className="w-5 h-5 flex-shrink-0" />
-                className={`${currentTheme.accent} ${currentTheme.accentHover} p-2 rounded-lg transition text-white`}
+              {sidebarOpen && <span>Тикеты</span>}
-                title="Создать сервер"
+            </button>
-              >
-                <Plus className="w-4 h-4" />
-              </button>
-            </div>
 
-            <div className="flex-1 overflow-y-auto space-y-2">
+            <button
-              {servers.map((server) => (
+              onClick={() => {
-                <div
+                setShowProfile(true);
-                  key={server.name}
+                setCurrentView('profile');
-                  className={`p-4 rounded-lg cursor-pointer transition-all duration-200 ${
+              }}
-                    selectedServer === server.name
+              className="sidebar-item w-full"
-                      ? `${currentTheme.accent} text-white shadow-lg`
+            >
-                      : `${currentTheme.card} ${currentTheme.hover}`
+              <UserCircle className="w-5 h-5 flex-shrink-0" />
-                  }`}
+              {sidebarOpen && <span>Профиль</span>}
-                  onClick={() => setSelectedServer(server.name)}
+            </button>
-                >
+
-                  <div className="flex items-center justify-between mb-3">
+            <button
-                    <span className="font-medium truncate">{server.displayName}</span>
+              onClick={handleLogout}
-                    <div className="flex items-center gap-2">
+              className="sidebar-item w-full text-red-400 hover:text-red-300 hover:bg-red-600/10"
-                      <span
+            >
-                        className={`w-2 h-2 rounded-full ${
+              <LogOut className="w-5 h-5 flex-shrink-0" />
-                          server.status === 'running' ? 'bg-green-400 animate-pulse' : 'bg-gray-500'
+              {sidebarOpen && <span>Выход</span>}
-                        }`}
+            </button>
-                      />
+
-                    </div>
+            {sidebarOpen && user && (
-                  </div>
+              <div className="pt-2 border-t border-dark-700">
-                  <div className="flex gap-2">
+                <div className="text-xs text-gray-500">
-                    {server.status === 'stopped' ? (
+                  <div className="font-medium text-gray-300">{user.username}</div>
-                      <button
+                  <div className="capitalize">{user.role}</div>
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          startServer(server.name);
-                        }}
-                        className="flex-1 bg-green-600 hover:bg-green-700 py-1.5 rounded-lg text-sm flex items-center justify-center gap-1.5 text-white transition"
-                      >
-                        <Play className="w-3.5 h-3.5" />
-                        Запустить
-                      </button>
-                    ) : (
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          stopServer(server.name);
-                        }}
-                        className="flex-1 bg-red-600 hover:bg-red-700 py-1.5 rounded-lg text-sm flex items-center justify-center gap-1.5 text-white transition"
-                      >
-                        <Square className="w-3.5 h-3.5" />
-                        Остановить
-                      </button>
-                    )}
-                  </div>
                 </div>
-              ))}
+              </div>
-              {servers.length === 0 && (
+            )}
-                <div className={`text-center py-12 ${currentTheme.textSecondary}`}>
-                  <Server className="w-12 h-12 mx-auto mb-3 opacity-50" />
-                  <p className="text-sm">Нет серверов</p>
-                  <p className="text-xs mt-1">Создайте первый сервер</p>
-                </div>
-              )}
-            </div>
           </div>
         </aside>
 
-        {/* Main Content */}
+        {/* Main content */}
         <main className="flex-1 flex flex-col overflow-hidden">
-          {selectedServer ? (
+          {/* Header */}
-            <>
+          <header className="h-16 bg-dark-850 border-b border-dark-700 flex items-center justify-between px-6">
-              {/* Server Header with Controls */}
+            <div>
-              <div className={`${currentTheme.secondary} ${currentTheme.border} border-b px-6 py-3 flex items-center justify-between`}>
+              <h1 className="text-2xl font-bold text-gray-100">
-                <div className="flex items-center gap-3">
+                {currentView === 'dashboard' && 'Панель управления'}
-                  <Server className="w-5 h-5" />
+                {currentView === 'server' && selectedServer?.displayName}
-                  <span className="font-semibold text-lg">
+                {currentView === 'management' && 'Управление пользователями'}
-                    {servers.find(s => s.name === selectedServer)?.displayName || selectedServer}
+                {currentView === 'tickets' && 'Тикеты поддержки'}
-                  </span>
+                {currentView === 'profile' && 'Профиль'}
-                  <span className={`px-2 py-1 rounded text-xs font-medium ${
+              </h1>
-                    servers.find(s => s.name === selectedServer)?.status === 'running'
+              {currentView === 'server' && selectedServer && (
-                      ? 'bg-green-600 text-white'
+                <p className="text-sm text-gray-500">
-                      : 'bg-gray-600 text-white'
+                  {selectedServer.name} • {selectedServer.status === 'running' ? 'Запущен' : 'Остановлен'}
-                  }`}>
+                </p>
-                    {servers.find(s => s.name === selectedServer)?.status === 'running' ? 'Запущен' : 'Остановлен'}
+              )}
-                  </span>
+            </div>
+
+            {currentView === 'server' && selectedServer && (
+              <div className="flex items-center gap-2">
+                {selectedServer.status === 'stopped' ? (
+                  <button
+                    onClick={() => handleServerAction(selectedServer.name, 'start')}
+                    className="btn-success flex items-center gap-2"
+                  >
+                    <Play className="w-4 h-4" />
+                    Запустить
+                  </button>
+                ) : (
+                  <button
+                    onClick={() => handleServerAction(selectedServer.name, 'stop')}
+                    className="btn-danger flex items-center gap-2"
+                  >
+                    <Square className="w-4 h-4" />
+                    Остановить
+                  </button>
+                )}
+              </div>
+            )}
+          </header>
+
+          {/* Content area */}
+          <div className="flex-1 overflow-auto p-6">
+            {connectionError && (
+              <div className="card p-4 mb-4 bg-red-600/10 border-red-600/30">
+                <p className="text-red-400">⚠️ Ошибка подключения к серверу</p>
+              </div>
+            )}
+
+            {currentView === 'dashboard' && (
+              <div className="space-y-6 animate-fade-in">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                  <div className="stat-card">
+                    <div className="stat-icon">
+                      <Server className="w-6 h-6" />
+                    </div>
+                    <div>
+                      <div className="text-2xl font-bold">{servers.length}</div>
+                      <div className="text-sm text-gray-500">Всего серверов</div>
+                    </div>
+                  </div>
+
+                  <div className="stat-card">
+                    <div className="stat-icon bg-green-600/20 text-green-400">
+                      <Activity className="w-6 h-6" />
+                    </div>
+                    <div>
+                      <div className="text-2xl font-bold text-green-400">
+                        {servers.filter(s => s.status === 'running').length}
+                      </div>
+                      <div className="text-sm text-gray-500">Запущено</div>
+                    </div>
+                  </div>
+
+                  <div className="stat-card">
+                    <div className="stat-icon bg-gray-600/20 text-gray-400">
+                      <Square className="w-6 h-6" />
+                    </div>
+                    <div>
+                      <div className="text-2xl font-bold text-gray-400">
+                        {servers.filter(s => s.status === 'stopped').length}
+                      </div>
+                      <div className="text-sm text-gray-500">Остановлено</div>
+                    </div>
+                  </div>
+
+                  <div className="stat-card">
+                    <div className="stat-icon bg-purple-600/20 text-purple-400">
+                      <UserCircle className="w-6 h-6" />
+                    </div>
+                    <div>
+                      <div className="text-2xl font-bold text-purple-400">{user?.username}</div>
+                      <div className="text-sm text-gray-500 capitalize">{user?.role}</div>
+                    </div>
+                  </div>
                 </div>
-                <div className="flex items-center gap-2">
+
-                  {servers.find(s => s.name === selectedServer)?.status === 'stopped' ? (
+                <div>
+                  <div className="flex items-center justify-between mb-4">
+                    <h2 className="text-xl font-bold">Ваши серверы</h2>
                     <button
-                      onClick={() => startServer(selectedServer)}
+                      onClick={() => setShowCreateModal(true)}
-                      className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 text-white transition shadow-lg"
+                      className="btn-primary flex items-center gap-2"
                     >
-                      <Play className="w-4 h-4" />
+                      <Plus className="w-4 h-4" />
-                      Запустить
+                      Создать сервер
-                    </button>
-                  ) : (
-                    <button
-                      onClick={() => stopServer(selectedServer)}
-                      className="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 text-white transition shadow-lg"
-                    >
-                      <Square className="w-4 h-4" />
-                      Сброс
                     </button>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {servers.map((server) => (
+                      <div
+                        key={server.name}
+                        onClick={() => {
+                          setSelectedServer(server);
+                          setCurrentView('server');
+                        }}
+                        className="server-card"
+                      >
+                        <div className="flex items-start justify-between mb-4">
+                          <div className="flex items-center gap-3">
+                            <div className={`p-3 rounded-lg ${
+                              server.status === 'running' 
+                                ? 'bg-green-600/20 text-green-400' 
+                                : 'bg-gray-600/20 text-gray-400'
+                            }`}>
+                              <Server className="w-6 h-6" />
+                            </div>
+                            <div>
+                              <h3 className="font-semibold text-lg">{server.displayName}</h3>
+                              <p className="text-sm text-gray-500">{server.name}</p>
+                            </div>
+                          </div>
+                          <span className={server.status === 'running' ? 'badge-success' : 'badge-danger'}>
+                            {server.status === 'running' ? 'Запущен' : 'Остановлен'}
+                          </span>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                          {server.status === 'stopped' ? (
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleServerAction(server.name, 'start');
+                              }}
+                              className="btn-success flex-1 flex items-center justify-center gap-2"
+                            >
+                              <Play className="w-4 h-4" />
+                              Запустить
+                            </button>
+                          ) : (
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleServerAction(server.name, 'stop');
+                              }}
+                              className="btn-danger flex-1 flex items-center justify-center gap-2"
+                            >
+                              <Square className="w-4 h-4" />
+                              Остановить
+                            </button>
+                          )}
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setSelectedServer(server);
+                              setCurrentView('server');
+                            }}
+                            className="btn-secondary"
+                          >
+                            <Terminal className="w-4 h-4" />
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  {servers.length === 0 && (
+                    <div className="card p-12 text-center">
+                      <Server className="w-16 h-16 mx-auto mb-4 text-gray-600" />
+                      <h3 className="text-xl font-semibold mb-2">Нет серверов</h3>
+                      <p className="text-gray-500 mb-4">Создайте свой первый сервер</p>
+                      <button
+                        onClick={() => setShowCreateModal(true)}
+                        className="btn-primary"
+                      >
+                        <Plus className="w-4 h-4 inline mr-2" />
+                        Создать сервер
+                      </button>
+                    </div>
                   )}
                 </div>
               </div>
+            )}
 
-              {/* Tabs */}
+            {currentView === 'server' && selectedServer && (
-              <div className={`${currentTheme.secondary} ${currentTheme.border} border-b flex overflow-x-auto`}>
+              <div className="space-y-4 animate-fade-in">
-                {[
+                {/* Tabs */}
-                  { id: 'console', icon: Terminal, label: 'Консоль' },
+                <div className="card p-2 flex gap-2 overflow-x-auto">
-                  { id: 'files', icon: FolderOpen, label: 'Файлы' },
-                  { id: 'stats', icon: HardDrive, label: 'Статистика' },
-                  { id: 'settings', icon: Settings, label: 'Настройки' },
-                ].map((tab) => (
                   <button
-                    key={tab.id}
+                    onClick={() => setActiveTab('console')}
-                    onClick={() => setActiveTab(tab.id)}
+                    className={activeTab === 'console' ? 'tab-active' : 'tab'}
-                    className={`px-6 py-4 flex items-center gap-2 transition-all duration-200 border-b-2 ${
-                      activeTab === tab.id
-                        ? `${currentTheme.accent.replace('bg-', 'border-')} ${currentTheme.text}`
-                        : `border-transparent ${currentTheme.textSecondary} ${currentTheme.hover}`
-                    }`}
                   >
-                    <tab.icon className="w-4 h-4" />
+                    <Terminal className="w-4 h-4 inline mr-2" />
-                    <span className="font-medium">{tab.label}</span>
+                    Консоль
                   </button>
-                ))}
+                  <button
-              </div>
+                    onClick={() => setActiveTab('files')}
+                    className={activeTab === 'files' ? 'tab-active' : 'tab'}
+                  >
+                    <FolderOpen className="w-4 h-4 inline mr-2" />
+                    Файлы
+                  </button>
+                  <button
+                    onClick={() => setActiveTab('stats')}
+                    className={activeTab === 'stats' ? 'tab-active' : 'tab'}
+                  >
+                    <BarChart3 className="w-4 h-4 inline mr-2" />
+                    Статистика
+                  </button>
+                  <button
+                    onClick={() => setActiveTab('settings')}
+                    className={activeTab === 'settings' ? 'tab-active' : 'tab'}
+                  >
+                    <Settings className="w-4 h-4 inline mr-2" />
+                    Настройки
+                  </button>
+                </div>
 
-              {/* Content */}
+                {/* Tab content */}
-              <div className="flex-1 overflow-hidden">
+                <div className="card p-6">
-                <ErrorBoundary>
+                  {activeTab === 'console' && <Console serverName={selectedServer.name} token={token} />}
-                  {activeTab === 'console' && <Console serverName={selectedServer} token={token} theme={currentTheme} />}
+                  {activeTab === 'files' && <FileManager serverName={selectedServer.name} token={token} />}
-                  {activeTab === 'files' && <FileManager serverName={selectedServer} token={token} theme={currentTheme} />}
+                  {activeTab === 'stats' && <Stats serverName={selectedServer.name} token={token} />}
-                  {activeTab === 'stats' && <Stats serverName={selectedServer} token={token} theme={currentTheme} />}
                   {activeTab === 'settings' && (
                     <ServerSettings
-                      serverName={selectedServer}
+                      serverName={selectedServer.name}
                       token={token}
-                      user={user}
+                      onUpdate={loadServers}
-                      theme={currentTheme}
-                      onDeleted={handleServerDeleted}
                     />
                   )}
-                </ErrorBoundary>
-              </div>
-            </>
-          ) : (
-            <div className="flex-1 flex items-center justify-center">
-              <div className="text-center">
-                <div className={`${currentTheme.card} p-8 rounded-2xl ${currentTheme.border} border`}>
-                  <Server className={`w-16 h-16 mx-auto mb-4 ${currentTheme.textSecondary} opacity-50`} />
-                  <p className="text-xl font-medium mb-2">Выберите сервер</p>
-                  <p className={`text-sm ${currentTheme.textSecondary}`}>
-                    Выберите сервер из списка слева или создайте новый
-                  </p>
                 </div>
               </div>
-            </div>
+            )}
-          )}
+          </div>
         </main>
-      </div>
 
-      {showCreateModal && (
+        {/* Modals */}
-        <CreateServerModal
+        {showCreateModal && (
-          token={token}
+          <CreateServerModal
-          theme={currentTheme}
+            token={token}
-          onClose={() => setShowCreateModal(false)}
+            onClose={() => setShowCreateModal(false)}
-          onCreated={loadServers}
+            onSuccess={() => {
-        />
+              setShowCreateModal(false);
-      )}
+              loadServers();
+            }}
+          />
+        )}
 
-      {showUserManagement && (
+        {showUserManagement && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="modal-overlay" onClick={() => setShowUserManagement(false)}>
-          <div className={`${currentTheme.card} rounded-2xl ${currentTheme.border} border w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col`}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
-            <div className={`${currentTheme.secondary} px-6 py-4 ${currentTheme.border} border-b flex items-center justify-between`}>
+              <UserManagement token={token} currentUser={user} />
-              <h2 className="text-2xl font-bold flex items-center gap-2">
-                <Shield className="w-6 h-6 text-yellow-400" />
-                Управление пользователями
-              </h2>
-              <button
-                onClick={() => setShowUserManagement(false)}
-                className={`${currentTheme.hover} p-2 rounded-lg transition`}
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-            <div className="flex-1 overflow-y-auto">
-              <UserManagement 
-                currentUser={user} 
-                addNotification={notify}
-              />
             </div>
           </div>
-        </div>
+        )}
-      )}
+
-    </div>
+        {showTickets && (
+          <div className="modal-overlay" onClick={() => setShowTickets(false)}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+              <Tickets token={token} user={user} onClose={() => setShowTickets(false)} />
+            </div>
+          </div>
+        )}
+
+        {showProfile && (
+          <div className="modal-overlay" onClick={() => setShowProfile(false)}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+              <Profile token={token} user={user} onClose={() => setShowProfile(false)} />
+            </div>
+          </div>
+        )}
+
+        <NotificationSystem />
+      </div>
+    </ErrorBoundary>
   );
 }
 

frontend/src/components/Console.jsx

@@ -3,7 +3,7 @@ import { Send } from 'lucide-react';
 import axios from 'axios';
 import { API_URL, WS_URL } from '../config';
 
-export default function Console({ serverName, token, theme }) {
+export default function Console({ serverName, token }) {
   const [logs, setLogs] = useState([]);
   const [command, setCommand] = useState('');
   const logsEndRef = useRef(null);
@@ -84,11 +84,11 @@ export default function Console({ serverName, token, theme }) {
   };
 
   return (
-    <div className={`flex flex-col h-full ${theme.primary}`}>
+    <div className="flex flex-col h-full">
       {/* Консоль */}
-      <div className={`flex-1 overflow-y-auto p-4 font-mono text-sm ${theme.console || theme.secondary}`}>
+      <div className="console-terminal flex-1 overflow-y-auto min-h-[400px] max-h-[600px]">
         {logs.length === 0 ? (
-          <div className={theme.textSecondary}>Консоль пуста. Запустите сервер для просмотра логов.</div>
+          <div className="text-gray-500">Консоль пуста. Запустите сервер для просмотра логов.</div>
         ) : (
           logs.map((log, index) => (
             <div key={index} className="whitespace-pre-wrap leading-relaxed">
@@ -100,17 +100,17 @@ export default function Console({ serverName, token, theme }) {
       </div>
 
       {/* Поле ввода команды */}
-      <form onSubmit={sendCommand} className={`${theme.border} border-t p-4 flex gap-2`}>
+      <form onSubmit={sendCommand} className="border-t border-dark-700 p-4 flex gap-2 bg-dark-850">
         <input
           type="text"
           value={command}
           onChange={(e) => setCommand(e.target.value)}
-          placeholder="Введите команду и нажмите Enter для отправки, используйте стрелки для навигации между предыдущими командами"
+          placeholder="Введите команду..."
-          className={`flex-1 ${theme.input} ${theme.border} border rounded-lg px-4 py-2.5 ${theme.text} placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 transition`}
+          className="input flex-1"
         />
         <button
           type="submit"
-          className={`${theme.success} ${theme.successHover} px-6 py-2.5 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg`}
+          className="btn-success flex items-center gap-2"
         >
           <Send className="w-4 h-4" />
           Отправить

frontend/src/components/CreateTicketModal.jsx

@@ -3,7 +3,7 @@ import { X } from 'lucide-react';
 import axios from 'axios';
 import { API_URL } from '../config';
 
-export default function CreateTicketModal({ token, theme, onClose, onCreated }) {
+export default function CreateTicketModal({ token, onClose, onCreated }) {
   const [formData, setFormData] = useState({
     title: '',
     description: ''
@@ -30,12 +30,12 @@ export default function CreateTicketModal({ token, theme, onClose, onCreated })
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className={`${theme.secondary} rounded-2xl p-6 w-full max-w-md shadow-2xl ${theme.border} border`}>
+      <div className="bg-dark-800 rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-700">
         <div className="flex items-center justify-between mb-6">
-          <h2 className={`text-xl font-bold ${theme.text}`}>Создать тикет</h2>
+          <h2 className="text-xl font-bold text-white">Создать тикет</h2>
           <button
             onClick={onClose}
-            className={`${theme.textSecondary} hover:${theme.text} transition`}
+            className="text-gray-400 hover:text-white transition"
           >
             <X className="w-6 h-6" />
           </button>
@@ -43,7 +43,7 @@ export default function CreateTicketModal({ token, theme, onClose, onCreated })
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+            <label className="block text-sm font-medium mb-2 text-white">
               Тема тикета
             </label>
             <input
@@ -51,20 +51,20 @@ export default function CreateTicketModal({ token, theme, onClose, onCreated })
               required
               value={formData.title}
               onChange={(e) => setFormData({ ...formData, title: e.target.value })}
-              className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-2 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+              className="input"
               placeholder="Краткое описание проблемы"
             />
           </div>
 
           <div>
-            <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+            <label className="block text-sm font-medium mb-2 text-white">
               Описание
             </label>
             <textarea
               required
               value={formData.description}
               onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-              className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-2 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition resize-none`}
+              className="w-full bg-dark-800 border-gray-700 border rounded-xl px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition resize-none"
               placeholder="Подробное описание проблемы"
               rows={5}
             />
@@ -74,14 +74,14 @@ export default function CreateTicketModal({ token, theme, onClose, onCreated })
             <button
               type="button"
               onClick={onClose}
-              className={`flex-1 ${theme.card} ${theme.hover} px-4 py-2 rounded-xl transition`}
+              className="flex-1 bg-dark-700 hover:bg-dark-600 px-4 py-2 rounded-xl transition text-white"
             >
               Отмена
             </button>
             <button
               type="submit"
               disabled={loading}
-              className={`flex-1 ${theme.accent} ${theme.accentHover} px-4 py-2 rounded-xl disabled:opacity-50 transition text-white`}
+              className="flex-1 btn-primary disabled:opacity-50"
             >
               {loading ? 'Создание...' : 'Создать'}
             </button>

frontend/src/components/FileEditorModal.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { X, Save } from 'lucide-react';
 
-export default function FileEditorModal({ file, onClose, onSave, theme }) {
+export default function FileEditorModal({ file, onClose, onSave }) {
   const [content, setContent] = useState(file.content);
   const [saving, setSaving] = useState(false);
 
@@ -25,9 +25,9 @@ export default function FileEditorModal({ file, onClose, onSave, theme }) {
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className={`${theme.secondary} rounded-lg w-full max-w-4xl h-[80vh] flex flex-col ${theme.border} border`}>
+      <div className="bg-dark-800 rounded-lg w-full max-w-4xl h-[80vh] flex flex-col border border-gray-700">
-        <div className={`flex items-center justify-between p-4 ${theme.border} border-b`}>
+        <div className="flex items-center justify-between p-4 border-b border-gray-700">
-          <h2 className={`text-xl font-bold ${theme.text}`}>Редактирование: {file.name}</h2>
+          <h2 className="text-xl font-bold text-white">Редактирование: {file.name}</h2>
           <div className="flex gap-2">
             <button
               onClick={handleSave}
@@ -39,23 +39,23 @@ export default function FileEditorModal({ file, onClose, onSave, theme }) {
             </button>
             <button
               onClick={onClose}
-              className={`${theme.textSecondary} hover:${theme.text} transition`}
+              className="text-gray-400 hover:text-white transition"
             >
               <X className="w-6 h-6" />
             </button>
           </div>
         </div>
 
-        <div className={`flex-1 overflow-hidden p-4 ${theme.console || theme.primary}`}>
+        <div className="flex-1 overflow-hidden p-4 bg-dark-900">
           <textarea
             value={content}
             onChange={(e) => setContent(e.target.value)}
-            className={`w-full h-full ${theme.console || theme.primary} ${theme.consoleText || theme.text} font-mono text-sm p-4 rounded ${theme.border} border focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none`}
+            className="w-full h-full bg-dark-900 text-gray-100 font-mono text-sm p-4 rounded border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
             spellCheck={false}
           />
         </div>
 
-        <div className={`p-4 ${theme.border} border-t text-sm ${theme.textSecondary}`}>
+        <div className="p-4 border-t border-gray-700 text-sm text-gray-400">
           Используйте Ctrl+S для быстрого сохранения
         </div>
       </div>

frontend/src/components/FileManager.jsx

@@ -6,7 +6,7 @@ import FileViewerModal from './FileViewerModal';
 import { API_URL } from '../config';
 import { notify } from './NotificationSystem';
 
-export default function FileManager({ serverName, token, theme }) {
+export default function FileManager({ serverName, token }) {
   const [files, setFiles] = useState([]);
   const [currentPath, setCurrentPath] = useState('');
   const [editingFile, setEditingFile] = useState(null);
@@ -354,26 +354,26 @@ export default function FileManager({ serverName, token, theme }) {
   };
 
   return (
-    <div className={`h-full flex flex-col ${theme.primary}`}>
+    <div className="h-full flex flex-col bg-dark-900">
       {/* Header */}
-      <div className={`${theme.border} border-b p-4`}>
+      <div className="border-b border-gray-700 p-4">
-        <h2 className={`text-xl font-semibold mb-4 ${theme.text}`}>Управление файлами</h2>
+        <h2 className="text-xl font-semibold mb-4 text-white">Управление файлами</h2>
         
         <div className="flex items-center gap-3">
           {/* Search */}
           <div className="flex-1 relative">
-            <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${theme.textSecondary}`} />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
             <input
               type="text"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder="Поиск по названию ф..."
-              className={`w-full ${theme.input} ${theme.border} border rounded-lg pl-10 pr-4 py-2 ${theme.text} placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500`}
+              className="w-full bg-dark-800 border-gray-700 border rounded-lg pl-10 pr-4 py-2 text-white placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
           </div>
 
           {/* Buttons */}
-          <label className={`${theme.success} ${theme.successHover} px-4 py-2 rounded-lg cursor-pointer flex items-center gap-2 text-white font-medium transition shadow-lg`}>
+          <label className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg cursor-pointer flex items-center gap-2 text-white font-medium transition shadow-lg">
             <Download className="w-4 h-4" />
             Загрузить
             <input type="file" onChange={uploadFile} className="hidden" />
@@ -381,7 +381,7 @@ export default function FileManager({ serverName, token, theme }) {
 
           <button 
             onClick={loadFiles}
-            className={`${theme.danger} ${theme.dangerHover} px-4 py-2 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg`}
+            className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg"
           >
             Обновить
           </button>
@@ -436,14 +436,14 @@ export default function FileManager({ serverName, token, theme }) {
             </button>
 
             {showNewMenu && (
-              <div className={`absolute right-0 mt-2 w-48 ${theme.secondary} rounded-lg shadow-xl ${theme.border} border z-10`}>
+              <div className="absolute right-0 mt-2 w-48 bg-dark-800 rounded-lg shadow-xl border-gray-700 border z-10">
                 <button
                   onClick={() => {
                     setCreatingNew('file');
                     setShowNewMenu(false);
                     setNewItemName('');
                   }}
-                  className={`w-full text-left px-4 py-2 ${theme.hover} ${theme.text} transition rounded-t-lg`}
+                  className="w-full text-left px-4 py-2 hover:bg-dark-700 text-white transition rounded-t-lg"
                 >
                   📄 Создать файл
                 </button>
@@ -453,7 +453,7 @@ export default function FileManager({ serverName, token, theme }) {
                     setShowNewMenu(false);
                     setNewItemName('');
                   }}
-                  className={`w-full text-left px-4 py-2 ${theme.hover} ${theme.text} transition rounded-b-lg`}
+                  className="w-full text-left px-4 py-2 hover:bg-dark-700 text-white transition rounded-b-lg"
                 >
                   📁 Создать папку
                 </button>
@@ -464,17 +464,17 @@ export default function FileManager({ serverName, token, theme }) {
       </div>
 
       {/* Path */}
-      <div className={`${theme.secondary} px-4 py-3 ${theme.border} border-b`}>
+      <div className="bg-dark-800 px-4 py-3 border-gray-700 border-b">
         <div className="flex items-center gap-2">
           {currentPath && (
             <button
               onClick={goBack}
-              className={`${theme.hover} px-3 py-1 rounded text-sm ${theme.text} transition`}
+              className="hover:bg-dark-700 px-3 py-1 rounded text-sm text-white transition"
             >
               ← Назад
             </button>
           )}
-          <span className={`${theme.textSecondary} font-mono text-sm`}>
+          <span className="text-gray-400 font-mono text-sm">
             /{currentPath || ''}
           </span>
           
@@ -493,9 +493,9 @@ export default function FileManager({ serverName, token, theme }) {
       {/* Table */}
       <div className="flex-1 overflow-y-auto">
         <table className="w-full">
-          <thead className={`${theme.secondary} sticky top-0 ${theme.border} border-b`}>
+          <thead className="bg-dark-800 sticky top-0 border-gray-700 border-b">
             <tr>
-              <th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>
+              <th className="text-left p-4 text-gray-400 font-medium text-sm">
                 <input 
                   type="checkbox" 
                   className="mr-3 cursor-pointer"
@@ -504,17 +504,17 @@ export default function FileManager({ serverName, token, theme }) {
                 />
                 Имя
               </th>
-              <th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Тип</th>
+              <th className="text-left p-4 text-gray-400 font-medium text-sm">Тип</th>
-              <th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Размер</th>
+              <th className="text-left p-4 text-gray-400 font-medium text-sm">Размер</th>
-              <th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Последнее изменение</th>
+              <th className="text-left p-4 text-gray-400 font-medium text-sm">Последнее изменение</th>
-              <th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Разрешение</th>
+              <th className="text-left p-4 text-gray-400 font-medium text-sm">Разрешение</th>
-              <th className={`text-right p-4 ${theme.textSecondary} font-medium text-sm`}>Действия</th>
+              <th className="text-right p-4 text-gray-400 font-medium text-sm">Действия</th>
             </tr>
           </thead>
           <tbody>
             {/* Форма создания нового файла/папки */}
             {creatingNew && (
-              <tr className={`${theme.border} border-b bg-blue-900 bg-opacity-20`}>
+              <tr className="border-gray-700 border-b bg-blue-900 bg-opacity-20">
                 <td className="p-4" colSpan="6">
                   <div className="flex items-center gap-3">
                     {creatingNew === 'file' ? (
@@ -537,7 +537,7 @@ export default function FileManager({ serverName, token, theme }) {
                       }}
                       placeholder={creatingNew === 'file' ? 'Имя файла...' : 'Имя папки...'}
                       autoFocus
-                      className={`flex-1 ${theme.input} ${theme.border} border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500`}
+                      className="flex-1 bg-dark-800 border-gray-700 border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                     />
                     <button
                       onClick={creatingNew === 'file' ? createNewFile : createNewFolder}
@@ -550,7 +550,7 @@ export default function FileManager({ serverName, token, theme }) {
                         setCreatingNew(null);
                         setNewItemName('');
                       }}
-                      className={`${theme.danger} ${theme.dangerHover} px-4 py-2 rounded text-sm text-white transition`}
+                      className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm text-white transition"
                     >
                       Отмена
                     </button>
@@ -562,7 +562,7 @@ export default function FileManager({ serverName, token, theme }) {
             {filteredFiles.length === 0 ? (
               <tr>
                 <td colSpan="6" className="text-center py-12">
-                  <div className={theme.textSecondary}>
+                  <div className="text-gray-400">
                     <Folder className="w-12 h-12 mx-auto mb-2 opacity-50" />
                     <p>No data</p>
                   </div>
@@ -575,7 +575,7 @@ export default function FileManager({ serverName, token, theme }) {
                 return (
                   <tr
                     key={file.name}
-                    className={`${theme.border} border-b ${theme.hover} transition ${
+                    className={`border-gray-700 border-b hover:bg-dark-700 transition ${
                       isCut ? 'opacity-50 bg-orange-900 bg-opacity-20' : ''
                     }`}
                   >
@@ -603,7 +603,7 @@ export default function FileManager({ serverName, token, theme }) {
                             if (e.key === 'Escape') setRenamingFile(null);
                           }}
                           autoFocus
-                          className={`${theme.input} ${theme.border} border rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500`}
+                          className="bg-dark-800 border-gray-700 border rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                       </div>
                     ) : (
@@ -623,37 +623,37 @@ export default function FileManager({ serverName, token, theme }) {
                         ) : (
                           <File className="w-5 h-5 text-gray-400" />
                         )}
-                        <span className={theme.text}>{file.name}</span>
+                        <span className="text-white">{file.name}</span>
                       </div>
                     )}
                   </td>
-                  <td className={`p-4 ${theme.textSecondary} text-sm`}>
+                  <td className="p-4 text-gray-400 text-sm">
                     {file.type === 'directory' ? 'Папка' : 'Файл'}
                   </td>
-                  <td className={`p-4 ${theme.textSecondary} text-sm`}>{formatSize(file.size)}</td>
+                  <td className="p-4 text-gray-400 text-sm">{formatSize(file.size)}</td>
-                  <td className={`p-4 ${theme.textSecondary} text-sm`}>-</td>
+                  <td className="p-4 text-gray-400 text-sm">-</td>
-                  <td className={`p-4 ${theme.textSecondary} text-sm`}>-</td>
+                  <td className="p-4 text-gray-400 text-sm">-</td>
                   <td className="p-4">
                     <div className="flex gap-2 justify-end">
                       {file.type === 'file' && (
                         <>
                           <button
                             onClick={() => viewFile(file.name)}
-                            className={`${theme.card} ${theme.hover} p-2 rounded transition`}
+                            className="bg-dark-800 hover:bg-dark-700 p-2 rounded transition"
                             title="Просмотр"
                           >
                             <Eye className="w-4 h-4" />
                           </button>
                           <button
                             onClick={() => editFile(file.name)}
-                            className={`${theme.card} ${theme.hover} p-2 rounded transition`}
+                            className="bg-dark-800 hover:bg-dark-700 p-2 rounded transition"
                             title="Редактировать"
                           >
                             <Edit className="w-4 h-4" />
                           </button>
                           <button
                             onClick={() => downloadFile(file.name)}
-                            className={`${theme.card} ${theme.hover} p-2 rounded transition`}
+                            className="bg-dark-800 hover:bg-dark-700 p-2 rounded transition"
                             title="Скачать"
                           >
                             <Download className="w-4 h-4" />
@@ -662,7 +662,7 @@ export default function FileManager({ serverName, token, theme }) {
                       )}
                       <button
                         onClick={() => deleteFile(file.name)}
-                        className={`${theme.card} ${theme.hover} p-2 rounded text-red-400 transition`}
+                        className="bg-dark-800 hover:bg-dark-700 p-2 rounded text-red-400 transition"
                         title="Удалить"
                       >
                         <Trash2 className="w-4 h-4" />
@@ -685,7 +685,6 @@ export default function FileManager({ serverName, token, theme }) {
             setEditingFile(viewingFile);
             setViewingFile(null);
           }}
-          theme={theme}
         />
       )}
 
@@ -694,7 +693,6 @@ export default function FileManager({ serverName, token, theme }) {
           file={editingFile}
           onClose={() => setEditingFile(null)}
           onSave={saveFile}
-          theme={theme}
         />
       )}
     </div>

frontend/src/components/FileViewerModal.jsx

@@ -1,11 +1,11 @@
 import { X, Edit } from 'lucide-react';
 
-export default function FileViewerModal({ file, onClose, onEdit, theme }) {
+export default function FileViewerModal({ file, onClose, onEdit }) {
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className={`${theme.secondary} rounded-lg w-full max-w-4xl h-[80vh] flex flex-col ${theme.border} border`}>
+      <div className="bg-dark-800 rounded-lg w-full max-w-4xl h-[80vh] flex flex-col border border-gray-700">
-        <div className={`flex items-center justify-between p-4 ${theme.border} border-b`}>
+        <div className="flex items-center justify-between p-4 border-b border-gray-700">
-          <h2 className={`text-xl font-bold ${theme.text}`}>{file.name}</h2>
+          <h2 className="text-xl font-bold text-white">{file.name}</h2>
           <div className="flex gap-2">
             <button
               onClick={onEdit}
@@ -16,15 +16,15 @@ export default function FileViewerModal({ file, onClose, onEdit, theme }) {
             </button>
             <button
               onClick={onClose}
-              className={`${theme.textSecondary} hover:${theme.text} transition`}
+              className="text-gray-400 hover:text-white transition"
             >
               <X className="w-6 h-6" />
             </button>
           </div>
         </div>
 
-        <div className={`flex-1 overflow-auto p-4 ${theme.console || theme.primary}`}>
+        <div className="flex-1 overflow-auto p-4 bg-dark-900">
-          <pre className={`text-sm ${theme.consoleText || theme.text} font-mono whitespace-pre-wrap`}>
+          <pre className="text-sm text-gray-100 font-mono whitespace-pre-wrap">
             {file.content}
           </pre>
         </div>

frontend/src/components/Profile.jsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import { API_URL } from '../config';
 import { notify } from './NotificationSystem';
 
-export default function Profile({ token, user, theme, onUsernameChange, viewingUsername }) {
+export default function Profile({ token, user, onUsernameChange, viewingUsername }) {
   const [stats, setStats] = useState(null);
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState('overview');
@@ -64,14 +64,11 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
         { headers: { Authorization: `Bearer ${token}` } }
       );
       
-      // Обновляем токен
       localStorage.setItem('token', data.access_token);
-      
       notify('success', 'Имя изменено', `Ваше новое имя: ${data.username}`);
       alert('Имя пользователя успешно изменено!');
       setUsernameForm({ new_username: '', password: '' });
       
-      // Уведомляем родительский компонент
       if (onUsernameChange) {
         onUsernameChange(data.access_token, data.username);
       }
@@ -127,63 +124,53 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
 
   const getRoleName = (role) => {
     switch (role) {
-      case 'admin':
+      case 'owner': return 'Владелец';
-        return 'Администратор';
+      case 'admin': return 'Администратор';
-      case 'support':
+      case 'support': return 'Тех. поддержка';
-        return 'Тех. поддержка';
+      case 'banned': return 'Забанен';
-      case 'banned':
+      default: return 'Пользователь';
-        return 'Забанен';
-      default:
-        return 'Пользователь';
     }
   };
 
   const getRoleColor = (role) => {
     switch (role) {
-      case 'admin':
+      case 'owner': return 'bg-yellow-500/20 text-yellow-500 border-yellow-500/50';
-        return 'bg-blue-500/20 text-blue-500 border-blue-500/50';
+      case 'admin': return 'bg-blue-500/20 text-blue-500 border-blue-500/50';
-      case 'support':
+      case 'support': return 'bg-purple-500/20 text-purple-500 border-purple-500/50';
-        return 'bg-purple-500/20 text-purple-500 border-purple-500/50';
+      case 'banned': return 'bg-red-500/20 text-red-500 border-red-500/50';
-      case 'banned':
+      default: return 'bg-gray-500/20 text-gray-500 border-gray-500/50';
-        return 'bg-red-500/20 text-red-500 border-red-500/50';
-      default:
-        return 'bg-gray-500/20 text-gray-500 border-gray-500/50';
     }
   };
 
   if (loading) {
     return (
-      <div className={`h-full ${theme.primary} ${theme.text} flex items-center justify-center`}>
+      <div className="h-full bg-dark-900 text-white flex items-center justify-center">
         <div className="text-center">
           <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-          <p className={theme.textSecondary}>Загрузка профиля...</p>
+          <p className="text-gray-400">Загрузка профиля...</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className={`h-full ${theme.primary} ${theme.text} p-6 overflow-y-auto`}>
+    <div className="h-full bg-dark-900 text-white p-6 overflow-y-auto">
       <div className="max-w-6xl mx-auto">
-        {/* Header */}
         <div className="mb-6">
           <h1 className="text-2xl font-bold mb-2">
             {isViewingOther ? `Профиль пользователя: ${viewingUsername}` : 'Личный кабинет'}
           </h1>
-          <p className={theme.textSecondary}>
+          <p className="text-gray-400">
             {isViewingOther ? 'Просмотр профиля другого пользователя' : 'Управление профилем и настройками'}
           </p>
         </div>
 
-        {/* Tabs */}
         {!isViewingOther && (
-          <div className={`${theme.secondary} ${theme.border} border rounded-2xl mb-6 p-2 flex gap-2`}>
+          <div className="card mb-6 p-2 flex gap-2">
             <button
               onClick={() => setActiveTab('overview')}
               className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
-                activeTab === 'overview'
+                activeTab === 'overview' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
-                  ? `${theme.accent} text-white`
-                  : `${theme.hover}`
               }`}
             >
               <TrendingUp className="w-4 h-4 inline mr-2" />
@@ -192,9 +179,7 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
             <button
               onClick={() => setActiveTab('username')}
               className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
-                activeTab === 'username'
+                activeTab === 'username' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
-                  ? `${theme.accent} text-white`
-                  : `${theme.hover}`
               }`}
             >
               <User className="w-4 h-4 inline mr-2" />
@@ -203,9 +188,7 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
             <button
               onClick={() => setActiveTab('password')}
               className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
-                activeTab === 'password'
+                activeTab === 'password' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
-                  ? `${theme.accent} text-white`
-                  : `${theme.hover}`
               }`}
             >
               <Lock className="w-4 h-4 inline mr-2" />
@@ -214,13 +197,11 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
           </div>
         )}
 
-        {/* Overview Tab */}
         {(activeTab === 'overview' || isViewingOther) && (
           <div className="space-y-6">
-            {/* User Info Card */}
+            <div className="card p-6">
-            <div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
               <div className="flex items-center gap-4 mb-6">
-                <div className={`${theme.accent} p-4 rounded-2xl`}>
+                <div className="bg-primary-600 p-4 rounded-2xl">
                   <User className="w-8 h-8 text-white" />
                 </div>
                 <div>
@@ -233,39 +214,36 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
               </div>
             </div>
 
-            {/* Stats Grid */}
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {/* Servers */}
+              <div className="card p-6">
-              <div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
                 <div className="flex items-center gap-3 mb-4">
-                  <div className={`${theme.accent} p-3 rounded-xl`}>
+                  <div className="bg-primary-600 p-3 rounded-xl">
                     <Server className="w-6 h-6 text-white" />
                   </div>
                   <div>
-                    <p className={`text-sm ${theme.textSecondary}`}>Всего серверов</p>
+                    <p className="text-sm text-gray-400">Всего серверов</p>
                     <p className="text-2xl font-bold">{stats?.total_servers || 0}</p>
                   </div>
                 </div>
                 <div className="space-y-2">
                   <div className="flex justify-between text-sm">
-                    <span className={theme.textSecondary}>Мои серверы:</span>
+                    <span className="text-gray-400">Мои серверы:</span>
                     <span className="font-medium">{stats?.owned_servers?.length || 0}</span>
                   </div>
                   <div className="flex justify-between text-sm">
-                    <span className={theme.textSecondary}>Доступные:</span>
+                    <span className="text-gray-400">Доступные:</span>
                     <span className="font-medium">{stats?.accessible_servers?.length || 0}</span>
                   </div>
                 </div>
               </div>
 
-              {/* Tickets */}
+              <div className="card p-6">
-              <div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
                 <div className="flex items-center gap-3 mb-4">
-                  <div className={`${theme.accent} p-3 rounded-xl`}>
+                  <div className="bg-primary-600 p-3 rounded-xl">
                     <MessageSquare className="w-6 h-6 text-white" />
                   </div>
                   <div>
-                    <p className={`text-sm ${theme.textSecondary}`}>Мои тикеты</p>
+                    <p className="text-sm text-gray-400">Мои тикеты</p>
                     <p className="text-2xl font-bold">{stats?.tickets?.total || 0}</p>
                   </div>
                 </div>
@@ -285,18 +263,18 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
                 </div>
               </div>
 
-              {/* Role Info */}
+              <div className="card p-6">
-              <div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
                 <div className="flex items-center gap-3 mb-4">
-                  <div className={`${theme.accent} p-3 rounded-xl`}>
+                  <div className="bg-primary-600 p-3 rounded-xl">
                     <Shield className="w-6 h-6 text-white" />
                   </div>
                   <div>
-                    <p className={`text-sm ${theme.textSecondary}`}>Ваша роль</p>
+                    <p className="text-sm text-gray-400">Ваша роль</p>
                     <p className="text-xl font-bold">{getRoleName(stats?.role)}</p>
                   </div>
                 </div>
-                <div className={`text-sm ${theme.textSecondary}`}>
+                <div className="text-sm text-gray-400">
+                  {stats?.role === 'owner' && '👑 Владелец панели - полный контроль над всеми функциями'}
                   {stats?.role === 'admin' && 'Полный доступ ко всем функциям панели'}
                   {stats?.role === 'support' && 'Доступ к системе тикетов и поддержке'}
                   {stats?.role === 'user' && 'Доступ к своим серверам и тикетам'}
@@ -305,21 +283,17 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
               </div>
             </div>
 
-            {/* Servers List */}
             {stats?.owned_servers?.length > 0 && (
-              <div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
+              <div className="card p-6">
                 <h3 className="text-lg font-bold mb-4">Мои серверы</h3>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                   {stats.owned_servers.map((server) => (
-                    <div
+                    <div key={server.name} className="bg-dark-700 border border-gray-700 rounded-xl p-4">
-                      key={server.name}
-                      className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}
-                    >
                       <div className="flex items-center gap-3">
                         <Server className="w-5 h-5" />
                         <div>
                           <p className="font-medium">{server.displayName}</p>
-                          <p className={`text-xs ${theme.textSecondary}`}>{server.name}</p>
+                          <p className="text-xs text-gray-400">{server.name}</p>
                         </div>
                       </div>
                     </div>
@@ -330,154 +304,115 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
           </div>
         )}
 
-        {/* Username Tab */}
         {activeTab === 'username' && (
-          <div className={`${theme.card} ${theme.border} border rounded-2xl p-6 max-w-2xl mx-auto`}>
+          <div className="card p-6 max-w-2xl mx-auto">
             <h2 className="text-xl font-bold mb-6">Изменить имя пользователя</h2>
             <form onSubmit={handleUsernameChange} className="space-y-4">
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+                <label className="block text-sm font-medium mb-2 text-white">Текущее имя пользователя</label>
-                  Текущее имя пользователя
+                <input type="text" value={stats?.username} disabled className="input cursor-not-allowed opacity-50" />
-                </label>
-                <input
-                  type="text"
-                  value={stats?.username}
-                  disabled
-                  className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.textSecondary} cursor-not-allowed`}
-                />
               </div>
-
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+                <label className="block text-sm font-medium mb-2 text-white">Новое имя пользователя</label>
-                  Новое имя пользователя
-                </label>
                 <input
                   type="text"
                   value={usernameForm.new_username}
                   onChange={(e) => setUsernameForm({ ...usernameForm, new_username: e.target.value })}
                   placeholder="Введите новое имя"
-                  className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+                  className="input"
                 />
-                <p className={`text-xs ${theme.textSecondary} mt-1`}>
+                <p className="text-xs text-gray-400 mt-1">Минимум 3 символа</p>
-                  Минимум 3 символа
-                </p>
               </div>
-
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+                <label className="block text-sm font-medium mb-2 text-white">Подтвердите паролем</label>
-                  Подтвердите паролем
-                </label>
                 <div className="relative">
                   <input
                     type={showUsernamePassword ? 'text' : 'password'}
                     value={usernameForm.password}
                     onChange={(e) => setUsernameForm({ ...usernameForm, password: e.target.value })}
                     placeholder="Введите текущий пароль"
-                    className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+                    className="input pr-12"
                   />
                   <button
                     type="button"
                     onClick={() => setShowUsernamePassword(!showUsernamePassword)}
-                    className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition"
                   >
                     {showUsernamePassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                   </button>
                 </div>
               </div>
-
+              <div className="bg-dark-700 border border-gray-700 rounded-xl p-4">
-              <div className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
+                <p className="text-sm text-gray-400">
-                <p className={`text-sm ${theme.textSecondary}`}>
                   ⚠️ После изменения имени пользователя вы будете автоматически перелогинены с новым именем.
                 </p>
               </div>
-
+              <button type="submit" disabled={usernameLoading} className="btn-primary w-full disabled:opacity-50">
-              <button
-                type="submit"
-                disabled={usernameLoading}
-                className={`w-full ${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl font-medium text-white transition disabled:opacity-50`}
-              >
                 {usernameLoading ? 'Изменение...' : 'Изменить имя пользователя'}
               </button>
             </form>
           </div>
         )}
 
-        {/* Password Tab */}
         {activeTab === 'password' && (
-          <div className={`${theme.card} ${theme.border} border rounded-2xl p-6 max-w-2xl mx-auto`}>
+          <div className="card p-6 max-w-2xl mx-auto">
             <h2 className="text-xl font-bold mb-6">Изменить пароль</h2>
             <form onSubmit={handlePasswordChange} className="space-y-4">
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+                <label className="block text-sm font-medium mb-2 text-white">Текущий пароль</label>
-                  Текущий пароль
-                </label>
                 <div className="relative">
                   <input
                     type={showOldPassword ? 'text' : 'password'}
                     value={passwordForm.old_password}
                     onChange={(e) => setPasswordForm({ ...passwordForm, old_password: e.target.value })}
                     placeholder="Введите текущий пароль"
-                    className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+                    className="input pr-12"
                   />
                   <button
                     type="button"
                     onClick={() => setShowOldPassword(!showOldPassword)}
-                    className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition"
                   >
                     {showOldPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                   </button>
                 </div>
               </div>
-
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+                <label className="block text-sm font-medium mb-2 text-white">Новый пароль</label>
-                  Новый пароль
-                </label>
                 <div className="relative">
                   <input
                     type={showNewPassword ? 'text' : 'password'}
                     value={passwordForm.new_password}
                     onChange={(e) => setPasswordForm({ ...passwordForm, new_password: e.target.value })}
                     placeholder="Введите новый пароль"
-                    className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+                    className="input pr-12"
                   />
                   <button
                     type="button"
                     onClick={() => setShowNewPassword(!showNewPassword)}
-                    className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition"
                   >
                     {showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                   </button>
                 </div>
-                <p className={`text-xs ${theme.textSecondary} mt-1`}>
+                <p className="text-xs text-gray-400 mt-1">Минимум 6 символов</p>
-                  Минимум 6 символов
-                </p>
               </div>
-
               <div>
-                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+                <label className="block text-sm font-medium mb-2 text-white">Подтвердите новый пароль</label>
-                  Подтвердите новый пароль
-                </label>
                 <input
                   type="password"
                   value={passwordForm.confirm_password}
                   onChange={(e) => setPasswordForm({ ...passwordForm, confirm_password: e.target.value })}
                   placeholder="Повторите новый пароль"
-                  className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+                  className="input"
                 />
               </div>
-
+              <div className="bg-dark-700 border border-gray-700 rounded-xl p-4">
-              <div className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
+                <p className="text-sm text-gray-400">
-                <p className={`text-sm ${theme.textSecondary}`}>
                   ⚠️ После изменения пароля используйте новый пароль для входа в систему.
                 </p>
               </div>
-
+              <button type="submit" disabled={passwordLoading} className="btn-primary w-full disabled:opacity-50">
-              <button
-                type="submit"
-                disabled={passwordLoading}
-                className={`w-full ${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl font-medium text-white transition disabled:opacity-50`}
-              >
                 {passwordLoading ? 'Изменение...' : 'Изменить пароль'}
               </button>
             </form>

frontend/src/components/Stats.jsx

@@ -3,7 +3,7 @@ import { Cpu, HardDrive, Activity } from 'lucide-react';
 import axios from 'axios';
 import { API_URL } from '../config';
 
-export default function Stats({ serverName, token, theme }) {
+export default function Stats({ serverName, token }) {
   const [stats, setStats] = useState({
     status: 'stopped',
     cpu: 0,
@@ -29,17 +29,17 @@ export default function Stats({ serverName, token, theme }) {
   };
 
   return (
-    <div className={`p-8 ${theme.primary}`}>
+    <div className="p-8 bg-dark-900">
-      <h2 className={`text-2xl font-bold mb-6 ${theme.text}`}>Статистика сервера</h2>
+      <h2 className="text-2xl font-bold mb-6 text-white">Статистика сервера</h2>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className={`${theme.card} rounded-lg p-6 ${theme.border} border`}>
+        <div className="card p-6">
           <div className="flex items-center justify-between mb-4">
-            <h3 className={`text-lg font-semibold ${theme.text}`}>CPU</h3>
+            <h3 className="text-lg font-semibold text-white">CPU</h3>
             <Cpu className="w-6 h-6 text-blue-400" />
           </div>
-          <div className={`text-3xl font-bold mb-2 ${theme.text}`}>{stats.cpu}%</div>
+          <div className="text-3xl font-bold mb-2 text-white">{stats.cpu}%</div>
-          <div className={`w-full ${theme.tertiary} rounded-full h-2`}>
+          <div className="w-full bg-dark-700 rounded-full h-2">
             <div
               className="bg-blue-500 h-2 rounded-full transition-all"
               style={{ width: `${Math.min(stats.cpu, 100)}%` }}
@@ -47,13 +47,13 @@ export default function Stats({ serverName, token, theme }) {
           </div>
         </div>
 
-        <div className={`${theme.card} rounded-lg p-6 ${theme.border} border`}>
+        <div className="card p-6">
           <div className="flex items-center justify-between mb-4">
-            <h3 className={`text-lg font-semibold ${theme.text}`}>ОЗУ</h3>
+            <h3 className="text-lg font-semibold text-white">ОЗУ</h3>
             <Activity className="w-6 h-6 text-green-400" />
           </div>
-          <div className={`text-3xl font-bold mb-2 ${theme.text}`}>{stats.memory} МБ</div>
+          <div className="text-3xl font-bold mb-2 text-white">{stats.memory} МБ</div>
-          <div className={`w-full ${theme.tertiary} rounded-full h-2`}>
+          <div className="w-full bg-dark-700 rounded-full h-2">
             <div
               className="bg-green-500 h-2 rounded-full transition-all"
               style={{ width: `${Math.min((stats.memory / 2048) * 100, 100)}%` }}
@@ -61,27 +61,27 @@ export default function Stats({ serverName, token, theme }) {
           </div>
         </div>
 
-        <div className={`${theme.card} rounded-lg p-6 ${theme.border} border`}>
+        <div className="card p-6">
           <div className="flex items-center justify-between mb-4">
-            <h3 className={`text-lg font-semibold ${theme.text}`}>Диск</h3>
+            <h3 className="text-lg font-semibold text-white">Диск</h3>
             <HardDrive className="w-6 h-6 text-purple-400" />
           </div>
-          <div className={`text-3xl font-bold mb-2 ${theme.text}`}>{stats.disk} МБ</div>
+          <div className="text-3xl font-bold mb-2 text-white">{stats.disk} МБ</div>
-          <div className={`text-sm ${theme.textSecondary} mt-2`}>
+          <div className="text-sm text-gray-400 mt-2">
             Использовано на диске
           </div>
         </div>
       </div>
 
-      <div className={`mt-8 ${theme.card} rounded-lg p-6 ${theme.border} border`}>
+      <div className="mt-8 card p-6">
-        <h3 className={`text-lg font-semibold mb-4 ${theme.text}`}>Статус</h3>
+        <h3 className="text-lg font-semibold mb-4 text-white">Статус</h3>
         <div className="flex items-center gap-3">
           <div
             className={`w-4 h-4 rounded-full ${
               stats.status === 'running' ? 'bg-green-500' : 'bg-red-500'
             }`}
           />
-          <span className={`text-xl ${theme.text}`}>
+          <span className="text-xl text-white">
             {stats.status === 'running' ? 'Запущен' : 'Остановлен'}
           </span>
         </div>

frontend/src/components/TicketChat.jsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import { API_URL } from '../config';
 import { notify } from './NotificationSystem';
 
-export default function TicketChat({ ticket, token, user, theme, onBack }) {
+export default function TicketChat({ ticket, token, user, onBack }) {
   const [messages, setMessages] = useState(ticket.messages || []);
   const [newMessage, setNewMessage] = useState('');
   const [currentTicket, setCurrentTicket] = useState(ticket);
@@ -150,22 +150,22 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
     }
   };
 
-  const canChangeStatus = user.role === 'admin' || user.role === 'support';
+  const canChangeStatus = user.role === 'owner' || user.role === 'admin' || user.role === 'support';
 
   return (
-    <div className={`h-full flex flex-col ${theme.primary}`}>
+    <div className="h-full flex flex-col bg-dark-900">
       {/* Header */}
-      <div className={`${theme.secondary} ${theme.border} border-b p-4`}>
+      <div className="bg-dark-800 border-gray-700 border-b p-4">
         <div className="flex items-center gap-4 mb-3">
           <button
             onClick={onBack}
-            className={`${theme.hover} p-2 rounded-lg transition`}
+            className="hover:bg-dark-700 p-2 rounded-lg transition"
           >
             <ArrowLeft className="w-5 h-5" />
           </button>
           <div className="flex-1">
             <h2 className="text-lg font-bold">{currentTicket.title}</h2>
-            <p className={`text-sm ${theme.textSecondary}`}>
+            <p className="text-sm text-gray-400">
               Автор: {currentTicket.author} • Создан: {new Date(currentTicket.created_at).toLocaleString('ru-RU')}
             </p>
           </div>
@@ -184,7 +184,7 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
               className={`flex-1 px-3 py-2 rounded-lg border transition ${
                 currentTicket.status === 'pending'
                   ? 'bg-yellow-500/20 text-yellow-500 border-yellow-500/50'
-                  : `${theme.card} ${theme.hover} ${theme.border}`
+                  : 'bg-dark-800 hover:bg-dark-700 border-gray-700'
               }`}
             >
               <Clock className="w-4 h-4 inline mr-2" />
@@ -196,7 +196,7 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
               className={`flex-1 px-3 py-2 rounded-lg border transition ${
                 currentTicket.status === 'in_progress'
                   ? 'bg-blue-500/20 text-blue-500 border-blue-500/50'
-                  : `${theme.card} ${theme.hover} ${theme.border}`
+                  : 'bg-dark-800 hover:bg-dark-700 border-gray-700'
               }`}
             >
               <AlertCircle className="w-4 h-4 inline mr-2" />
@@ -208,7 +208,7 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
               className={`flex-1 px-3 py-2 rounded-lg border transition ${
                 currentTicket.status === 'closed'
                   ? 'bg-green-500/20 text-green-500 border-green-500/50'
-                  : `${theme.card} ${theme.hover} ${theme.border}`
+                  : 'bg-dark-800 hover:bg-dark-700 border-gray-700'
               }`}
             >
               <CheckCircle className="w-4 h-4 inline mr-2" />
@@ -228,20 +228,20 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
             <div
               className={`max-w-[70%] rounded-2xl px-4 py-3 ${
                 msg.author === 'system'
-                  ? `${theme.tertiary} ${theme.border} border text-center`
+                  ? 'bg-dark-700 border-gray-700 border text-center'
                   : msg.author === user.username
-                  ? `${theme.accent} text-white`
+                  ? 'bg-primary-600 text-white'
-                  : `${theme.card} ${theme.border} border`
+                  : 'bg-dark-800 border-gray-700 border'
               }`}
             >
               {msg.author !== 'system' && msg.author !== user.username && (
-                <div className={`text-xs font-semibold mb-1 ${theme.textSecondary}`}>
+                <div className="text-xs font-semibold mb-1 text-gray-400">
                   {msg.author}
                 </div>
               )}
               <div className="whitespace-pre-wrap break-words">{msg.text}</div>
               <div className={`text-xs mt-1 ${
-                msg.author === user.username ? 'text-white/70' : theme.textSecondary
+                msg.author === user.username ? 'text-white/70' : 'text-gray-400'
               }`}>
                 {new Date(msg.timestamp).toLocaleTimeString('ru-RU')}
               </div>
@@ -253,7 +253,7 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
 
       {/* Input */}
       {currentTicket.status !== 'closed' && (
-        <form onSubmit={sendMessage} className={`${theme.border} border-t p-4`}>
+        <form onSubmit={sendMessage} className="border-gray-700 border-t p-4">
           <div className="flex gap-2">
             <input
               type="text"
@@ -261,12 +261,12 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
               onChange={(e) => setNewMessage(e.target.value)}
               placeholder="Введите сообщение..."
               disabled={loading}
-              className={`flex-1 ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+              className="input flex-1"
             />
             <button
               type="submit"
               disabled={loading || !newMessage.trim()}
-              className={`${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl flex items-center gap-2 text-white transition disabled:opacity-50`}
+              className="btn-primary px-6 py-3 flex items-center gap-2 disabled:opacity-50"
             >
               <Send className="w-4 h-4" />
               Отправить

frontend/src/components/Tickets.jsx

@@ -6,7 +6,7 @@ import TicketChat from './TicketChat';
 import CreateTicketModal from './CreateTicketModal';
 import { notify } from './NotificationSystem';
 
-export default function Tickets({ token, user, theme }) {
+export default function Tickets({ token, user }) {
   const [tickets, setTickets] = useState([]);
   const [selectedTicket, setSelectedTicket] = useState(null);
   const [showCreateModal, setShowCreateModal] = useState(false);
@@ -99,7 +99,6 @@ export default function Tickets({ token, user, theme }) {
         ticket={selectedTicket}
         token={token}
         user={user}
-        theme={theme}
         onBack={() => {
           setSelectedTicket(null);
           loadTickets();
@@ -109,17 +108,17 @@ export default function Tickets({ token, user, theme }) {
   }
 
   return (
-    <div className={`h-full ${theme.primary} ${theme.text} p-6`}>
+    <div className="h-full bg-dark-900 text-white p-6">
       <div className="max-w-6xl mx-auto">
         {/* Header */}
         <div className="flex items-center justify-between mb-6">
           <div>
             <h1 className="text-2xl font-bold mb-2">Тикеты</h1>
-            <p className={theme.textSecondary}>Система поддержки</p>
+            <p className="text-gray-400">Система поддержки</p>
           </div>
           <button
             onClick={() => setShowCreateModal(true)}
-            className={`${theme.accent} ${theme.accentHover} px-4 py-2 rounded-xl flex items-center gap-2 text-white transition`}
+            className="btn-primary flex items-center gap-2"
           >
             <Plus className="w-4 h-4" />
             Создать тикет
@@ -130,18 +129,18 @@ export default function Tickets({ token, user, theme }) {
         {loading ? (
           <div className="text-center py-12">
             <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-            <p className={theme.textSecondary}>Загрузка тикетов...</p>
+            <p className="text-gray-400">Загрузка тикетов...</p>
           </div>
         ) : tickets.length === 0 ? (
-          <div className={`${theme.card} ${theme.border} border rounded-2xl p-12 text-center`}>
+          <div className="card p-12 text-center">
-            <MessageSquare className={`w-16 h-16 mx-auto mb-4 ${theme.textSecondary} opacity-50`} />
+            <MessageSquare className="w-16 h-16 mx-auto mb-4 text-gray-500 opacity-50" />
             <p className="text-lg font-medium mb-2">Нет тикетов</p>
-            <p className={`text-sm ${theme.textSecondary} mb-4`}>
+            <p className="text-sm text-gray-400 mb-4">
               Создайте первый тикет для обращения в поддержку
             </p>
             <button
               onClick={() => setShowCreateModal(true)}
-              className={`${theme.accent} ${theme.accentHover} px-6 py-2 rounded-xl text-white transition`}
+              className="btn-primary"
             >
               Создать тикет
             </button>
@@ -152,12 +151,12 @@ export default function Tickets({ token, user, theme }) {
               <div
                 key={ticket.id}
                 onClick={() => setSelectedTicket(ticket)}
-                className={`${theme.card} ${theme.border} border rounded-2xl p-6 cursor-pointer ${theme.hover} transition-all duration-200`}
+                className="card p-6 cursor-pointer hover:border-gray-600 transition-all duration-200"
               >
                 <div className="flex items-start justify-between mb-3">
                   <div className="flex-1">
                     <h3 className="text-lg font-semibold mb-2">{ticket.title}</h3>
-                    <p className={`text-sm ${theme.textSecondary} line-clamp-2`}>
+                    <p className="text-sm text-gray-400 line-clamp-2">
                       {ticket.description}
                     </p>
                   </div>
@@ -167,15 +166,15 @@ export default function Tickets({ token, user, theme }) {
                   </div>
                 </div>
                 <div className="flex items-center gap-4 text-sm">
-                  <span className={theme.textSecondary}>
+                  <span className="text-gray-400">
-                    Автор: <span className={theme.text}>{ticket.author}</span>
+                    Автор: <span className="text-white">{ticket.author}</span>
                   </span>
-                  <span className={theme.textSecondary}>•</span>
+                  <span className="text-gray-400">•</span>
-                  <span className={theme.textSecondary}>
+                  <span className="text-gray-400">
-                    Сообщений: <span className={theme.text}>{ticket.messages?.length || 0}</span>
+                    Сообщений: <span className="text-white">{ticket.messages?.length || 0}</span>
                   </span>
-                  <span className={theme.textSecondary}>•</span>
+                  <span className="text-gray-400">•</span>
-                  <span className={theme.textSecondary}>
+                  <span className="text-gray-400">
                     {new Date(ticket.created_at).toLocaleString('ru-RU')}
                   </span>
                 </div>
@@ -188,7 +187,6 @@ export default function Tickets({ token, user, theme }) {
       {showCreateModal && (
         <CreateTicketModal
           token={token}
-          theme={theme}
           onClose={() => setShowCreateModal(false)}
           onCreated={handleTicketCreated}
         />

frontend/src/components/UserManagement.jsx

@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
-import { Users, Shield, Ban, Trash2, UserCheck, Server, AlertCircle, CheckCircle } from 'lucide-react';
+import { Users, Shield, Ban, Trash2, UserCheck, Server } from 'lucide-react';
 import axios from 'axios';
+import { notify } from './NotificationSystem';
 
-const UserManagement = ({ currentUser, addNotification }) => {
+const UserManagement = ({ token, currentUser }) => {
   const [users, setUsers] = useState([]);
   const [loading, setLoading] = useState(true);
   const [selectedUser, setSelectedUser] = useState(null);
@@ -14,7 +15,6 @@ const UserManagement = ({ currentUser, addNotification }) => {
   // Загрузка пользователей
   const loadUsers = async () => {
     try {
-      const token = localStorage.getItem('token');
       const response = await axios.get(`${API_URL}/api/users`, {
         headers: { Authorization: `Bearer ${token}` }
       });
@@ -28,7 +28,7 @@ const UserManagement = ({ currentUser, addNotification }) => {
       setLoading(false);
     } catch (error) {
       console.error('Ошибка загрузки пользователей:', error);
-      addNotification('error', 'Ошибка загрузки пользователей');
+      notify('error', 'Ошибка загрузки', 'Не удалось загрузить пользователей');
       setLoading(false);
     }
   };
@@ -47,12 +47,12 @@ const UserManagement = ({ currentUser, addNotification }) => {
         { headers: { Authorization: `Bearer ${token}` } }
       );
       
-      addNotification('success', `Роль пользователя ${username} изменена на ${newRole}`);
+      notify('success', 'Роль изменена', `Роль пользователя ${username} изменена на ${newRole}`);
       loadUsers();
       setShowRoleModal(false);
     } catch (error) {
       console.error('Ошибка изменения роли:', error);
-      addNotification('error', error.response?.data?.detail || 'Ошибка изменения роли');
+      notify('error', 'Ошибка изменения', error.response?.data?.detail || 'Не удалось изменить роль');
     }
   };
 
@@ -68,11 +68,11 @@ const UserManagement = ({ currentUser, addNotification }) => {
         { headers: { Authorization: `Bearer ${token}` } }
       );
       
-      addNotification('success', `Пользователь ${username} заблокирован`);
+      notify('success', 'Пользователь заблокирован', `${username} успешно заблокирован`);
       loadUsers();
     } catch (error) {
       console.error('Ошибка блокировки:', error);
-      addNotification('error', error.response?.data?.detail || 'Ошибка блокировки');
+      notify('error', 'Ошибка блокировки', error.response?.data?.detail || 'Не удалось заблокировать пользователя');
     }
   };
 
@@ -86,11 +86,11 @@ const UserManagement = ({ currentUser, addNotification }) => {
         { headers: { Authorization: `Bearer ${token}` } }
       );
       
-      addNotification('success', `Пользователь ${username} разблокирован`);
+      notify('success', 'Пользователь разблокирован', `${username} успешно разблокирован`);
       loadUsers();
     } catch (error) {
       console.error('Ошибка разблокировки:', error);
-      addNotification('error', error.response?.data?.detail || 'Ошибка разблокировки');
+      notify('error', 'Ошибка разблокировки', error.response?.data?.detail || 'Не удалось разблокировать пользователя');
     }
   };
 
@@ -105,11 +105,11 @@ const UserManagement = ({ currentUser, addNotification }) => {
         { headers: { Authorization: `Bearer ${token}` } }
       );
       
-      addNotification('success', `Пользователь ${username} удалён`);
+      notify('success', 'Пользователь удалён', `${username} успешно удалён`);
       loadUsers();
     } catch (error) {
       console.error('Ошибка удаления:', error);
-      addNotification('error', error.response?.data?.detail || 'Ошибка удаления');
+      notify('error', 'Ошибка удаления', error.response?.data?.detail || 'Не удалось удалить пользователя');
     }
   };
 

frontend/src/index.css

@@ -2,29 +2,191 @@
 @tailwind components;
 @tailwind utilities;
 
-* {
+/* MCSManager Style Global Styles */
-  margin: 0;
+@layer base {
-  padding: 0;
+  * {
-  box-sizing: border-box;
+    @apply border-dark-700;
+  }
+  
+  body {
+    @apply bg-dark-900 text-gray-100 antialiased;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+  }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    @apply w-2 h-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-dark-850;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-dark-600 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-dark-500;
+  }
 }
 
-body {
+@layer components {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  /* Card styles */
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  .card {
-    sans-serif;
+    @apply bg-dark-800 rounded-lg border border-dark-700 shadow-lg;
-  -webkit-font-smoothing: antialiased;
+  }
-  -moz-osx-font-smoothing: grayscale;
+
+  .card-hover {
+    @apply card transition-all duration-200 hover:border-primary-500 hover:shadow-glow;
+  }
+
+  /* Button styles */
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 
+           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-900;
+  }
+
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 
+           focus:ring-primary-500 shadow-md hover:shadow-glow;
+  }
+
+  .btn-secondary {
+    @apply btn bg-dark-700 text-gray-200 hover:bg-dark-600 
+           focus:ring-dark-500 border border-dark-600;
+  }
+
+  .btn-success {
+    @apply btn bg-green-600 text-white hover:bg-green-700 
+           focus:ring-green-500 shadow-md;
+  }
+
+  .btn-danger {
+    @apply btn bg-red-600 text-white hover:bg-red-700 
+           focus:ring-red-500 shadow-md;
+  }
+
+  .btn-warning {
+    @apply btn bg-yellow-600 text-white hover:bg-yellow-700 
+           focus:ring-yellow-500 shadow-md;
+  }
+
+  .btn-icon {
+    @apply p-2 rounded-lg transition-all duration-200 
+           hover:bg-dark-700 focus:outline-none focus:ring-2 
+           focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-dark-900;
+  }
+
+  /* Input styles */
+  .input {
+    @apply w-full px-4 py-2 bg-dark-850 border border-dark-700 rounded-lg 
+           text-gray-100 placeholder-gray-500 
+           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
+           transition-all duration-200;
+  }
+
+  .input:focus {
+    @apply shadow-glow;
+  }
+
+  /* Badge styles */
+  .badge {
+    @apply px-2 py-1 text-xs font-semibold rounded-full;
+  }
+
+  .badge-success {
+    @apply badge bg-green-600/20 text-green-400 border border-green-600/30;
+  }
+
+  .badge-danger {
+    @apply badge bg-red-600/20 text-red-400 border border-red-600/30;
+  }
+
+  .badge-warning {
+    @apply badge bg-yellow-600/20 text-yellow-400 border border-yellow-600/30;
+  }
+
+  .badge-info {
+    @apply badge bg-blue-600/20 text-blue-400 border border-blue-600/30;
+  }
+
+  /* Sidebar styles */
+  .sidebar-item {
+    @apply flex items-center gap-3 px-4 py-3 rounded-lg 
+           text-gray-300 hover:text-white hover:bg-dark-700 
+           transition-all duration-200 cursor-pointer;
+  }
+
+  .sidebar-item-active {
+    @apply sidebar-item bg-primary-600/20 text-primary-400 
+           border-l-4 border-primary-500 hover:bg-primary-600/30;
+  }
+
+  /* Tab styles */
+  .tab {
+    @apply px-4 py-2 font-medium text-gray-400 hover:text-gray-200 
+           border-b-2 border-transparent hover:border-dark-600 
+           transition-all duration-200 cursor-pointer;
+  }
+
+  .tab-active {
+    @apply tab text-primary-400 border-primary-500 hover:border-primary-500;
+  }
+
+  /* Stats card */
+  .stat-card {
+    @apply card p-4 flex items-center gap-4;
+  }
+
+  .stat-icon {
+    @apply p-3 rounded-lg bg-primary-600/20 text-primary-400;
+  }
+
+  /* Server card */
+  .server-card {
+    @apply card-hover p-6 cursor-pointer;
+  }
+
+  .server-card-selected {
+    @apply server-card border-primary-500 bg-primary-600/10 shadow-glow;
+  }
+
+  /* Modal overlay */
+  .modal-overlay {
+    @apply fixed inset-0 bg-black/70 backdrop-blur-sm z-40 
+           flex items-center justify-center p-4;
+  }
+
+  .modal-content {
+    @apply card p-6 max-w-5xl w-full max-h-[90vh] overflow-y-auto;
+  }
+
+  /* Console terminal */
+  .console-terminal {
+    @apply bg-dark-950 rounded-lg p-4 font-mono text-sm 
+           text-green-400 overflow-auto border border-dark-700;
+  }
+
+  /* Loading spinner */
+  .spinner {
+    @apply animate-spin rounded-full border-2 border-gray-600 
+           border-t-primary-500;
+  }
+
+  /* Tooltip */
+  .tooltip {
+    @apply absolute z-50 px-2 py-1 text-xs font-medium text-white 
+           bg-dark-700 rounded shadow-lg pointer-events-none;
+  }
 }
 
-#root {
+/* Animations */
-  width: 100%;
+@keyframes slideIn {
-  height: 100vh;
-}
-
-/* Анимация для уведомлений */
-@keyframes slide-in-right {
   from {
-    transform: translateX(100%);
+    transform: translateX(-100%);
     opacity: 0;
   }
   to {
@@ -33,6 +195,42 @@ body {
   }
 }
 
-.animate-slide-in-right {
+@keyframes fadeIn {
-  animation: slide-in-right 0.3s ease-out;
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+/* Glow effect for active elements */
+.glow-effect {
+  position: relative;
+}
+
+.glow-effect::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  padding: 2px;
+  background: linear-gradient(45deg, #0ea5e9, #3b82f6, #8b5cf6);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.glow-effect:hover::before {
+  opacity: 0.5;
 }

frontend/tailwind.config.js

@@ -5,7 +5,44 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        // MCSManager style dark theme
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+        dark: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          850: '#1a2332',
+          900: '#0f172a',
+          950: '#020617',
+        },
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+      },
+      boxShadow: {
+        'glow': '0 0 20px rgba(14, 165, 233, 0.3)',
+        'glow-lg': '0 0 30px rgba(14, 165, 233, 0.4)',
+      },
+    },
   },
   plugins: [],
 }