Changed design and bug fixes

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 currentTheme = getTheme(theme);
+  const [currentView, setCurrentView] = useState('dashboard');
 
   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 = () => {
-    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) => {
+  const handleServerAction = async (serverName, action) => {
     try {
-      const response = await axios.post(
-        `${API_URL}/api/servers/${serverName}/start`,
+      await axios.post(
+        `${API_URL}/api/servers/${serverName}/${action}`,
         {},
         { headers: { Authorization: `Bearer ${token}` } }
       );
-      console.log('Сервер запущен:', response.data);
-      notify('success', 'Сервер запущен', `Сервер "${serverName}" успешно запущен`);
-      setTimeout(() => {
-        loadServers();
-      }, 1000);
+      notify.success(`Сервер ${action === 'start' ? 'запущен' : 'остановлен'}`);
+      loadServers();
     } catch (error) {
-      console.error('Ошибка запуска сервера:', error);
-      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 || 'Ошибка остановки сервера');
+      notify.error(`Ошибка: ${error.response?.data?.detail || error.message}`);
     }
   };
 
   if (!token) {
-    return <Auth onLogin={handleLogin} />;
-  }
-
-  if (showUsers) {
     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">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>
+      <ErrorBoundary>
+        <Auth onLogin={handleLogin} />
+        <NotificationSystem />
+      </ErrorBoundary>
     );
   }
 
   return (
-    <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
-      <NotificationSystem theme={currentTheme} />
-      {/* Header */}
-      <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">
+    <ErrorBoundary>
+      <div className="flex h-screen bg-dark-900 overflow-hidden">
+        {/* Sidebar */}
+        <aside className={`${sidebarOpen ? 'w-64' : 'w-20'} bg-dark-850 border-r border-dark-700 transition-all duration-300 flex flex-col`}>
+          {/* Logo */}
+          <div className="h-16 flex items-center justify-between px-4 border-b border-dark-700">
+            {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)}
-                className={`lg:hidden ${currentTheme.hover} p-2 rounded-lg transition`}
+                key={server.name}
+                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" />
-                </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>
+            ))}
+
+            {sidebarOpen && servers.length === 0 && (
+              <div className="text-center py-8 text-gray-500 text-sm">
+                <Server className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                <p>Нет серверов</p>
+                <button
+                  onClick={() => setShowCreateModal(true)}
+                  className="btn-primary mt-2 text-xs"
+                >
+                  Создать сервер
+                </button>
               </div>
-            </div>
-            <div className="flex items-center gap-3">
-              {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">
-                  ⚠️ Нет связи
-                </div>
-              )}
-              <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} />
+            )}
+          </nav>
+
+          {/* Bottom section */}
+          <div className="p-4 border-t border-dark-700 space-y-2">
+            {user?.role === 'owner' && (
               <button
                 onClick={() => {
-                  setShowProfile(true);
-                  setViewingUsername(null);
+                  setShowUserManagement(true);
+                  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" />
-                <span className="hidden sm:inline">Личный кабинет</span>
+                <Shield className="w-5 h-5 flex-shrink-0 text-yellow-500" />
+                {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)]">
-        {/* Sidebar */}
-        <aside className={`${sidebarOpen ? 'w-80' : 'w-0'} ${currentTheme.secondary} ${currentTheme.border} border-r transition-all duration-300 overflow-hidden`}>
-          <div className="p-4 h-full flex flex-col">
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-lg font-semibold">Мои серверы</h2>
-              <button
-                onClick={() => setShowCreateModal(true)}
-                className={`${currentTheme.accent} ${currentTheme.accentHover} p-2 rounded-lg transition text-white`}
-                title="Создать сервер"
-              >
-                <Plus className="w-4 h-4" />
-              </button>
-            </div>
-            
-            <div className="flex-1 overflow-y-auto space-y-2">
-              {servers.map((server) => (
-                <div
-                  key={server.name}
-                  className={`p-4 rounded-lg cursor-pointer transition-all duration-200 ${
-                    selectedServer === server.name
-                      ? `${currentTheme.accent} text-white shadow-lg`
-                      : `${currentTheme.card} ${currentTheme.hover}`
-                  }`}
-                  onClick={() => setSelectedServer(server.name)}
-                >
-                  <div className="flex items-center justify-between mb-3">
-                    <span className="font-medium truncate">{server.displayName}</span>
-                    <div className="flex items-center gap-2">
-                      <span
-                        className={`w-2 h-2 rounded-full ${
-                          server.status === 'running' ? 'bg-green-400 animate-pulse' : 'bg-gray-500'
-                        }`}
-                      />
-                    </div>
-                  </div>
-                  <div className="flex gap-2">
-                    {server.status === 'stopped' ? (
-                      <button
-                        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>
+            <button
+              onClick={() => {
+                setShowTickets(true);
+                setCurrentView('tickets');
+              }}
+              className="sidebar-item w-full"
+            >
+              <MessageSquare className="w-5 h-5 flex-shrink-0" />
+              {sidebarOpen && <span>Тикеты</span>}
+            </button>
+
+            <button
+              onClick={() => {
+                setShowProfile(true);
+                setCurrentView('profile');
+              }}
+              className="sidebar-item w-full"
+            >
+              <UserCircle className="w-5 h-5 flex-shrink-0" />
+              {sidebarOpen && <span>Профиль</span>}
+            </button>
+
+            <button
+              onClick={handleLogout}
+              className="sidebar-item w-full text-red-400 hover:text-red-300 hover:bg-red-600/10"
+            >
+              <LogOut className="w-5 h-5 flex-shrink-0" />
+              {sidebarOpen && <span>Выход</span>}
+            </button>
+
+            {sidebarOpen && user && (
+              <div className="pt-2 border-t border-dark-700">
+                <div className="text-xs text-gray-500">
+                  <div className="font-medium text-gray-300">{user.username}</div>
+                  <div className="capitalize">{user.role}</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>
+            )}
           </div>
         </aside>
 
-        {/* Main Content */}
+        {/* Main content */}
         <main className="flex-1 flex flex-col overflow-hidden">
-          {selectedServer ? (
-            <>
-              {/* Server Header with Controls */}
-              <div className={`${currentTheme.secondary} ${currentTheme.border} border-b px-6 py-3 flex items-center justify-between`}>
-                <div className="flex items-center gap-3">
-                  <Server className="w-5 h-5" />
-                  <span className="font-semibold text-lg">
-                    {servers.find(s => s.name === selectedServer)?.displayName || selectedServer}
-                  </span>
-                  <span className={`px-2 py-1 rounded text-xs font-medium ${
-                    servers.find(s => s.name === selectedServer)?.status === 'running'
-                      ? 'bg-green-600 text-white'
-                      : 'bg-gray-600 text-white'
-                  }`}>
-                    {servers.find(s => s.name === selectedServer)?.status === 'running' ? 'Запущен' : 'Остановлен'}
-                  </span>
+          {/* Header */}
+          <header className="h-16 bg-dark-850 border-b border-dark-700 flex items-center justify-between px-6">
+            <div>
+              <h1 className="text-2xl font-bold text-gray-100">
+                {currentView === 'dashboard' && 'Панель управления'}
+                {currentView === 'server' && selectedServer?.displayName}
+                {currentView === 'management' && 'Управление пользователями'}
+                {currentView === 'tickets' && 'Тикеты поддержки'}
+                {currentView === 'profile' && 'Профиль'}
+              </h1>
+              {currentView === 'server' && selectedServer && (
+                <p className="text-sm text-gray-500">
+                  {selectedServer.name} • {selectedServer.status === 'running' ? 'Запущен' : 'Остановлен'}
+                </p>
+              )}
+            </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)}
-                      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"
+                      onClick={() => setShowCreateModal(true)}
+                      className="btn-primary flex items-center gap-2"
                     >
-                      <Play 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" />
-                      Сброс
+                      <Plus 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 */}
-              <div className={`${currentTheme.secondary} ${currentTheme.border} border-b flex overflow-x-auto`}>
-                {[
-                  { id: 'console', icon: Terminal, label: 'Консоль' },
-                  { id: 'files', icon: FolderOpen, label: 'Файлы' },
-                  { id: 'stats', icon: HardDrive, label: 'Статистика' },
-                  { id: 'settings', icon: Settings, label: 'Настройки' },
-                ].map((tab) => (
+            {currentView === 'server' && selectedServer && (
+              <div className="space-y-4 animate-fade-in">
+                {/* Tabs */}
+                <div className="card p-2 flex gap-2 overflow-x-auto">
                   <button
-                    key={tab.id}
-                    onClick={() => setActiveTab(tab.id)}
-                    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}`
-                    }`}
+                    onClick={() => setActiveTab('console')}
+                    className={activeTab === 'console' ? 'tab-active' : 'tab'}
                   >
-                    <tab.icon className="w-4 h-4" />
-                    <span className="font-medium">{tab.label}</span>
+                    <Terminal className="w-4 h-4 inline mr-2" />
+                    Консоль
                   </button>
-                ))}
-              </div>
+                  <button
+                    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 */}
-              <div className="flex-1 overflow-hidden">
-                <ErrorBoundary>
-                  {activeTab === 'console' && <Console serverName={selectedServer} token={token} theme={currentTheme} />}
-                  {activeTab === 'files' && <FileManager serverName={selectedServer} token={token} theme={currentTheme} />}
-                  {activeTab === 'stats' && <Stats serverName={selectedServer} token={token} theme={currentTheme} />}
+                {/* Tab content */}
+                <div className="card p-6">
+                  {activeTab === 'console' && <Console serverName={selectedServer.name} token={token} />}
+                  {activeTab === 'files' && <FileManager serverName={selectedServer.name} token={token} />}
+                  {activeTab === 'stats' && <Stats serverName={selectedServer.name} token={token} />}
                   {activeTab === 'settings' && (
-                    <ServerSettings 
-                      serverName={selectedServer}
+                    <ServerSettings
+                      serverName={selectedServer.name}
                       token={token}
-                      user={user}
-                      theme={currentTheme}
-                      onDeleted={handleServerDeleted}
+                      onUpdate={loadServers}
                     />
                   )}
-                </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 && (
-        <CreateServerModal
-          token={token}
-          theme={currentTheme}
-          onClose={() => setShowCreateModal(false)}
-          onCreated={loadServers}
-        />
-      )}
+        {/* Modals */}
+        {showCreateModal && (
+          <CreateServerModal
+            token={token}
+            onClose={() => setShowCreateModal(false)}
+            onSuccess={() => {
+              setShowCreateModal(false);
+              loadServers();
+            }}
+          />
+        )}
 
-      {showUserManagement && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <div className={`${currentTheme.card} rounded-2xl ${currentTheme.border} border w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col`}>
-            <div className={`${currentTheme.secondary} px-6 py-4 ${currentTheme.border} border-b flex items-center justify-between`}>
-              <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}
-              />
+        {showUserManagement && (
+          <div className="modal-overlay" onClick={() => setShowUserManagement(false)}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+              <UserManagement token={token} currentUser={user} />
             </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>
   );
 }