Add Personal account

CHANGELOG.md

@@ -1,5 +1,43 @@
 # 📝 История изменений MC Panel
 
+## Версия 2.1 - Личный кабинет (14.01.2026)
+
+### ✨ Новые возможности
+
+#### 👤 Личный кабинет
+- Кнопка "Личный кабинет" в header рядом с "Тикеты"
+- Три вкладки: Обзор, Имя пользователя, Пароль
+- Статистика профиля (серверы, тикеты, роль)
+- Список своих серверов
+- Изменение имени пользователя с подтверждением паролем
+- Изменение пароля с проверкой
+- Показ/скрытие паролей в формах
+
+#### 🔐 Безопасность
+- Проверка уникальности имени пользователя
+- Автоматическое обновление владельцев серверов при смене имени
+- Автоматическое обновление доступов к серверам
+- Новый JWT токен при смене имени
+- Хеширование паролей (bcrypt)
+
+#### 📊 Статистика профиля
+- Общее количество серверов
+- Мои серверы (владелец)
+- Доступные серверы
+- Статистика по тикетам (всего, на рассмотрении, в работе, закрыто)
+- Информация о роли
+
+### 📁 Новые файлы
+- `frontend/src/components/Profile.jsx` - компонент личного кабинета
+- `PROFILE_SYSTEM.md` - документация личного кабинета
+
+### 🔧 API Endpoints
+- `PUT /api/profile/username` - изменить имя пользователя
+- `PUT /api/profile/password` - изменить пароль
+- `GET /api/profile/stats` - получить статистику профиля
+
+---
+
 ## Версия 2.0 - Система тикетов (14.01.2026)
 
 ### ✨ Новые возможности

PROFILE_SYSTEM.md

@@ -0,0 +1,228 @@
+# 👤 Система личного кабинета
+
+## Что добавлено
+
+### ✅ Новые возможности
+
+1. **Личный кабинет** - полноценная система управления профилем
+2. **Три вкладки**:
+   - 📊 **Обзор** - статистика и информация о профиле
+   - 👤 **Имя пользователя** - изменение имени пользователя
+   - 🔒 **Пароль** - изменение пароля
+
+3. **Кнопка "Личный кабинет"** в header рядом с кнопкой "Тикеты"
+
+### 📊 Вкладка "Обзор"
+
+#### Информация о пользователе
+- Имя пользователя
+- Роль (Администратор, Тех. поддержка, Пользователь)
+- Цветной бейдж роли
+
+#### Статистика
+- **Серверы**:
+  - Всего серверов
+  - Мои серверы (владелец)
+  - Доступные серверы
+
+- **Тикеты**:
+  - Всего тикетов
+  - На рассмотрении
+  - В работе
+  - Закрыто
+
+- **Роль**:
+  - Название роли
+  - Описание прав
+
+#### Список серверов
+- Отображение всех серверов пользователя
+- Название и ID сервера
+- Красивые карточки
+
+### 👤 Вкладка "Имя пользователя"
+
+#### Возможности
+- Просмотр текущего имени
+- Ввод нового имени (минимум 3 символа)
+- Подтверждение паролем
+- Автоматический перелогин с новым именем
+
+#### Безопасность
+- Проверка уникальности имени
+- Проверка пароля
+- Обновление владельцев серверов
+- Обновление доступов к серверам
+- Новый JWT токен
+
+### 🔒 Вкладка "Пароль"
+
+#### Возможности
+- Ввод текущего пароля
+- Ввод нового пароля (минимум 6 символов)
+- Подтверждение нового пароля
+- Показ/скрытие паролей
+
+#### Безопасность
+- Проверка текущего пароля
+- Проверка совпадения новых паролей
+- Хеширование пароля (bcrypt)
+
+## 🚀 Как использовать
+
+### Открытие личного кабинета
+1. Нажмите кнопку "Личный кабинет" в header
+2. Откроется страница с тремя вкладками
+
+### Просмотр статистики
+1. Откройте вкладку "Обзор"
+2. Посмотрите информацию о профиле
+3. Посмотрите статистику по серверам и тикетам
+4. Посмотрите список своих серверов
+
+### Изменение имени пользователя
+1. Откройте вкладку "Имя пользователя"
+2. Введите новое имя (минимум 3 символа)
+3. Введите текущий пароль для подтверждения
+4. Нажмите "Изменить имя пользователя"
+5. Вы будете автоматически перелогинены
+
+⚠️ **Важно**: После изменения имени:
+- Обновятся все серверы, где вы владелец
+- Обновятся все доступы к серверам
+- Вы получите новый токен авторизации
+
+### Изменение пароля
+1. Откройте вкладку "Пароль"
+2. Введите текущий пароль
+3. Введите новый пароль (минимум 6 символов)
+4. Подтвердите новый пароль
+5. Нажмите "Изменить пароль"
+
+⚠️ **Важно**: После изменения пароля используйте новый пароль для входа.
+
+## 📁 Новые файлы
+
+### Backend
+- Добавлены endpoints в `backend/main.py`:
+  - `PUT /api/profile/username` - изменить имя пользователя
+  - `PUT /api/profile/password` - изменить пароль
+  - `GET /api/profile/stats` - получить статистику профиля
+
+### Frontend
+- `frontend/src/components/Profile.jsx` - компонент личного кабинета
+
+## 🎨 Интерфейс
+
+### Вкладки
+- Современный дизайн с вкладками
+- Плавные переходы между вкладками
+- Адаптивный дизайн
+
+### Карточки статистики
+- Цветные иконки
+- Числовые показатели
+- Детальная информация
+
+### Формы
+- Валидация полей
+- Показ/скрытие паролей
+- Предупреждения о последствиях
+- Кнопки с индикацией загрузки
+
+## 🔧 Технические детали
+
+### API Endpoints
+
+#### PUT /api/profile/username
+Изменить имя пользователя
+
+**Request:**
+```json
+{
+  "new_username": "NewUsername",
+  "password": "current_password"
+}
+```
+
+**Response:**
+```json
+{
+  "message": "Имя пользователя изменено",
+  "access_token": "new_jwt_token",
+  "username": "NewUsername"
+}
+```
+
+#### PUT /api/profile/password
+Изменить пароль
+
+**Request:**
+```json
+{
+  "old_password": "old_password",
+  "new_password": "new_password"
+}
+```
+
+**Response:**
+```json
+{
+  "message": "Пароль изменён"
+}
+```
+
+#### GET /api/profile/stats
+Получить статистику профиля
+
+**Response:**
+```json
+{
+  "username": "username",
+  "role": "user",
+  "owned_servers": [
+    {
+      "name": "server1",
+      "displayName": "My Server"
+    }
+  ],
+  "accessible_servers": [],
+  "tickets": {
+    "total": 5,
+    "pending": 2,
+    "in_progress": 1,
+    "closed": 2
+  },
+  "total_servers": 1
+}
+```
+
+### Безопасность
+
+#### Изменение имени пользователя
+1. Проверка пароля
+2. Проверка уникальности нового имени
+3. Обновление владельцев серверов
+4. Обновление доступов к серверам
+5. Создание нового JWT токена
+
+#### Изменение пароля
+1. Проверка текущего пароля
+2. Проверка длины нового пароля (минимум 6 символов)
+3. Хеширование нового пароля (bcrypt)
+
+## ✅ Готово!
+
+Система личного кабинета полностью интегрирована в MC Panel. Пользователи могут:
+- Просматривать статистику своего профиля
+- Изменять имя пользователя
+- Изменять пароль
+- Видеть свои серверы и тикеты
+
+### Доступ к личному кабинету
+Кнопка "Личный кабинет" доступна всем пользователям в header рядом с кнопкой "Тикеты".
+
+### Учётные данные по умолчанию
+- **Логин**: Sofa12345
+- **Пароль**: arkonsad123
+- **Роль**: admin

backend/main.py

@@ -266,7 +266,7 @@ async def update_user_role(username: str, data: dict, user: dict = Depends(get_c
         raise HTTPException(404, "Пользователь не найден")
     
     new_role = data.get("role")
-    if new_role not in ["admin", "user"]:
+    if new_role not in ["admin", "user", "support"]:
         raise HTTPException(400, "Неверная роль")
     
     users[username]["role"] = new_role
@@ -274,6 +274,130 @@ async def update_user_role(username: str, data: dict, user: dict = Depends(get_c
     
     return {"message": "Роль обновлена"}
 
+# API для личного кабинета
+@app.put("/api/profile/username")
+async def update_username(data: dict, user: dict = Depends(get_current_user)):
+    """Изменить имя пользователя"""
+    new_username = data.get("new_username", "").strip()
+    password = data.get("password", "")
+    
+    if not new_username:
+        raise HTTPException(400, "Имя пользователя не может быть пустым")
+    
+    if len(new_username) < 3:
+        raise HTTPException(400, "Имя пользователя должно быть не менее 3 символов")
+    
+    users = load_users()
+    
+    # Проверяем пароль
+    if not verify_password(password, users[user["username"]]["password"]):
+        raise HTTPException(400, "Неверный пароль")
+    
+    # Проверяем, не занято ли новое имя
+    if new_username in users and new_username != user["username"]:
+        raise HTTPException(400, "Это имя пользователя уже занято")
+    
+    # Сохраняем данные пользователя
+    old_username = user["username"]
+    user_data = users[old_username]
+    
+    # Удаляем старую запись и создаём новую
+    del users[old_username]
+    user_data["username"] = new_username
+    users[new_username] = user_data
+    
+    # Обновляем владельцев серверов
+    for server_dir in SERVERS_DIR.iterdir():
+        if server_dir.is_dir():
+            config = load_server_config(server_dir.name)
+            if config.get("owner") == old_username:
+                config["owner"] = new_username
+                save_server_config(server_dir.name, config)
+    
+    # Обновляем доступы к серверам у других пользователей
+    for username, user_info in users.items():
+        if "servers" in user_info and old_username in user_info.get("servers", []):
+            user_info["servers"] = [new_username if s == old_username else s for s in user_info["servers"]]
+    
+    save_users(users)
+    
+    # Создаём новый токен
+    new_token = create_access_token({"sub": new_username, "role": user_data["role"]})
+    
+    return {
+        "message": "Имя пользователя изменено",
+        "access_token": new_token,
+        "username": new_username
+    }
+
+@app.put("/api/profile/password")
+async def update_password(data: dict, user: dict = Depends(get_current_user)):
+    """Изменить пароль"""
+    old_password = data.get("old_password", "")
+    new_password = data.get("new_password", "")
+    
+    if not old_password or not new_password:
+        raise HTTPException(400, "Заполните все поля")
+    
+    if len(new_password) < 6:
+        raise HTTPException(400, "Новый пароль должен быть не менее 6 символов")
+    
+    users = load_users()
+    
+    # Проверяем старый пароль
+    if not verify_password(old_password, users[user["username"]]["password"]):
+        raise HTTPException(400, "Неверный старый пароль")
+    
+    # Устанавливаем новый пароль
+    users[user["username"]]["password"] = get_password_hash(new_password)
+    save_users(users)
+    
+    return {"message": "Пароль изменён"}
+
+@app.get("/api/profile/stats")
+async def get_profile_stats(user: dict = Depends(get_current_user)):
+    """Получить статистику профиля"""
+    users = load_users()
+    user_data = users.get(user["username"], {})
+    
+    # Подсчитываем серверы пользователя
+    owned_servers = []
+    accessible_servers = []
+    
+    for server_dir in SERVERS_DIR.iterdir():
+        if server_dir.is_dir():
+            config = load_server_config(server_dir.name)
+            if config.get("owner") == user["username"]:
+                owned_servers.append({
+                    "name": server_dir.name,
+                    "displayName": config.get("displayName", server_dir.name)
+                })
+            elif user["username"] in user_data.get("servers", []) or user["role"] == "admin":
+                accessible_servers.append({
+                    "name": server_dir.name,
+                    "displayName": config.get("displayName", server_dir.name)
+                })
+    
+    # Подсчитываем тикеты
+    tickets = load_tickets()
+    user_tickets = [t for t in tickets.values() if t["author"] == user["username"]]
+    
+    tickets_stats = {
+        "total": len(user_tickets),
+        "pending": len([t for t in user_tickets if t["status"] == "pending"]),
+        "in_progress": len([t for t in user_tickets if t["status"] == "in_progress"]),
+        "closed": len([t for t in user_tickets if t["status"] == "closed"])
+    }
+    
+    return {
+        "username": user["username"],
+        "role": user["role"],
+        "owned_servers": owned_servers,
+        "accessible_servers": accessible_servers,
+        "tickets": tickets_stats,
+        "total_servers": len(owned_servers) + len(accessible_servers)
+    }
+
 # API для серверов
 @app.get("/api/servers")
 async def get_servers(user: dict = Depends(get_current_user)):

frontend/src/App.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Server, Play, Square, Terminal, FolderOpen, HardDrive, Settings, Plus, Users as UsersIcon, LogOut, Menu, X, MessageSquare } from 'lucide-react';
+import { Server, Play, Square, Terminal, FolderOpen, HardDrive, Settings, Plus, Users as UsersIcon, LogOut, Menu, X, MessageSquare, UserCircle } from 'lucide-react';
 import Console from './components/Console';
 import FileManager from './components/FileManager';
 import Stats from './components/Stats';
@@ -7,6 +7,7 @@ import ServerSettings from './components/ServerSettings';
 import CreateServerModal from './components/CreateServerModal';
 import Users from './components/Users';
 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';
@@ -23,6 +24,7 @@ function App() {
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showUsers, setShowUsers] = useState(false);
   const [showTickets, setShowTickets] = useState(false);
+  const [showProfile, setShowProfile] = useState(false);
   const [connectionError, setConnectionError] = useState(false);
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'dark');
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -97,6 +99,12 @@ function App() {
     localStorage.setItem('theme', newTheme);
   };
 
+  const handleUsernameChange = (newToken, newUsername) => {
+    setToken(newToken);
+    setUser({ ...user, username: newUsername });
+    loadServers();
+  };
+
   const startServer = async (serverName) => {
     try {
       const response = await axios.post(
@@ -235,6 +243,56 @@ function App() {
     );
   }
 
+  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`}>
+                    {user?.role === 'admin' ? 'Админ' : user?.role === 'support' ? 'Поддержка' : 'Пользователь'}
+                  </span>
+                </div>
+                <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
+                <button
+                  onClick={() => setShowProfile(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>
+        <Profile token={token} user={user} theme={currentTheme} onUsernameChange={handleUsernameChange} />
+      </div>
+    );
+  }
+
   return (
     <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
       {/* Header */}
@@ -273,6 +331,13 @@ function App() {
                 </span>
               </div>
               <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
+              <button
+                onClick={() => setShowProfile(true)}
+                className={`${currentTheme.accent} ${currentTheme.accentHover} px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
+              >
+                <UserCircle className="w-4 h-4" />
+                <span className="hidden sm:inline">Личный кабинет</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`}

frontend/src/components/Profile.jsx

@@ -0,0 +1,468 @@
+import { useState, useEffect } from 'react';
+import { User, Lock, Server, MessageSquare, Shield, TrendingUp, Eye, EyeOff } from 'lucide-react';
+import axios from 'axios';
+import { API_URL } from '../config';
+
+export default function Profile({ token, user, theme, onUsernameChange }) {
+  const [stats, setStats] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState('overview');
+  
+  // Форма смены имени
+  const [usernameForm, setUsernameForm] = useState({
+    new_username: '',
+    password: ''
+  });
+  const [usernameLoading, setUsernameLoading] = useState(false);
+  const [showUsernamePassword, setShowUsernamePassword] = useState(false);
+  
+  // Форма смены пароля
+  const [passwordForm, setPasswordForm] = useState({
+    old_password: '',
+    new_password: '',
+    confirm_password: ''
+  });
+  const [passwordLoading, setPasswordLoading] = useState(false);
+  const [showOldPassword, setShowOldPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+
+  useEffect(() => {
+    loadStats();
+  }, []);
+
+  const loadStats = async () => {
+    try {
+      const { data } = await axios.get(`${API_URL}/api/profile/stats`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setStats(data);
+      setLoading(false);
+    } catch (error) {
+      console.error('Ошибка загрузки статистики:', error);
+      setLoading(false);
+    }
+  };
+
+  const handleUsernameChange = async (e) => {
+    e.preventDefault();
+    if (!usernameForm.new_username.trim() || !usernameForm.password) {
+      alert('Заполните все поля');
+      return;
+    }
+
+    setUsernameLoading(true);
+    try {
+      const { data } = await axios.put(
+        `${API_URL}/api/profile/username`,
+        usernameForm,
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      
+      // Обновляем токен
+      localStorage.setItem('token', data.access_token);
+      
+      alert('Имя пользователя успешно изменено!');
+      setUsernameForm({ new_username: '', password: '' });
+      
+      // Уведомляем родительский компонент
+      if (onUsernameChange) {
+        onUsernameChange(data.access_token, data.username);
+      }
+      
+      loadStats();
+    } catch (error) {
+      alert(error.response?.data?.detail || 'Ошибка изменения имени пользователя');
+    } finally {
+      setUsernameLoading(false);
+    }
+  };
+
+  const handlePasswordChange = async (e) => {
+    e.preventDefault();
+    
+    if (!passwordForm.old_password || !passwordForm.new_password || !passwordForm.confirm_password) {
+      alert('Заполните все поля');
+      return;
+    }
+
+    if (passwordForm.new_password !== passwordForm.confirm_password) {
+      alert('Новые пароли не совпадают');
+      return;
+    }
+
+    if (passwordForm.new_password.length < 6) {
+      alert('Новый пароль должен быть не менее 6 символов');
+      return;
+    }
+
+    setPasswordLoading(true);
+    try {
+      await axios.put(
+        `${API_URL}/api/profile/password`,
+        {
+          old_password: passwordForm.old_password,
+          new_password: passwordForm.new_password
+        },
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      
+      alert('Пароль успешно изменён!');
+      setPasswordForm({ old_password: '', new_password: '', confirm_password: '' });
+    } catch (error) {
+      alert(error.response?.data?.detail || 'Ошибка изменения пароля');
+    } finally {
+      setPasswordLoading(false);
+    }
+  };
+
+  const getRoleName = (role) => {
+    switch (role) {
+      case 'admin':
+        return 'Администратор';
+      case 'support':
+        return 'Тех. поддержка';
+      default:
+        return 'Пользователь';
+    }
+  };
+
+  const getRoleColor = (role) => {
+    switch (role) {
+      case 'admin':
+        return 'bg-blue-500/20 text-blue-500 border-blue-500/50';
+      case 'support':
+        return 'bg-purple-500/20 text-purple-500 border-purple-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="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>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`h-full ${theme.primary} ${theme.text} 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">Личный кабинет</h1>
+          <p className={theme.textSecondary}>Управление профилем и настройками</p>
+        </div>
+
+        {/* Tabs */}
+        <div className={`${theme.secondary} ${theme.border} border rounded-2xl 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'
+                ? `${theme.accent} text-white`
+                : `${theme.hover}`
+            }`}
+          >
+            <TrendingUp className="w-4 h-4 inline mr-2" />
+            Обзор
+          </button>
+          <button
+            onClick={() => setActiveTab('username')}
+            className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
+              activeTab === 'username'
+                ? `${theme.accent} text-white`
+                : `${theme.hover}`
+            }`}
+          >
+            <User className="w-4 h-4 inline mr-2" />
+            Имя пользователя
+          </button>
+          <button
+            onClick={() => setActiveTab('password')}
+            className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
+              activeTab === 'password'
+                ? `${theme.accent} text-white`
+                : `${theme.hover}`
+            }`}
+          >
+            <Lock className="w-4 h-4 inline mr-2" />
+            Пароль
+          </button>
+        </div>
+
+        {/* Overview Tab */}
+        {activeTab === 'overview' && (
+          <div className="space-y-6">
+            {/* User Info Card */}
+            <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`}>
+                  <User className="w-8 h-8 text-white" />
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold">{stats?.username}</h2>
+                  <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-lg border mt-2 ${getRoleColor(stats?.role)}`}>
+                    <Shield className="w-4 h-4" />
+                    <span className="font-medium">{getRoleName(stats?.role)}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Stats Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {/* Servers */}
+              <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`}>
+                    <Server className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <p className={`text-sm ${theme.textSecondary}`}>Всего серверов</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="font-medium">{stats?.owned_servers?.length || 0}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className={theme.textSecondary}>Доступные:</span>
+                    <span className="font-medium">{stats?.accessible_servers?.length || 0}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Tickets */}
+              <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`}>
+                    <MessageSquare className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <p className={`text-sm ${theme.textSecondary}`}>Мои тикеты</p>
+                    <p className="text-2xl font-bold">{stats?.tickets?.total || 0}</p>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-yellow-500">На рассмотрении:</span>
+                    <span className="font-medium">{stats?.tickets?.pending || 0}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-blue-500">В работе:</span>
+                    <span className="font-medium">{stats?.tickets?.in_progress || 0}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-green-500">Закрыто:</span>
+                    <span className="font-medium">{stats?.tickets?.closed || 0}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Role Info */}
+              <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`}>
+                    <Shield className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <p className={`text-sm ${theme.textSecondary}`}>Ваша роль</p>
+                    <p className="text-xl font-bold">{getRoleName(stats?.role)}</p>
+                  </div>
+                </div>
+                <div className={`text-sm ${theme.textSecondary}`}>
+                  {stats?.role === 'admin' && 'Полный доступ ко всем функциям панели'}
+                  {stats?.role === 'support' && 'Доступ к системе тикетов и поддержке'}
+                  {stats?.role === 'user' && 'Доступ к своим серверам и тикетам'}
+                </div>
+              </div>
+            </div>
+
+            {/* Servers List */}
+            {stats?.owned_servers?.length > 0 && (
+              <div className={`${theme.card} ${theme.border} border rounded-2xl 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
+                      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>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Username Tab */}
+        {activeTab === 'username' && (
+          <div className={`${theme.card} ${theme.border} border rounded-2xl 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>
+                <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>
+                <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`}
+                />
+                <p className={`text-xs ${theme.textSecondary} mt-1`}>
+                  Минимум 3 символа
+                </p>
+              </div>
+
+              <div>
+                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+                  Подтвердите паролем
+                </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`}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowUsernamePassword(!showUsernamePassword)}
+                    className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
+                  >
+                    {showUsernamePassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  </button>
+                </div>
+              </div>
+
+              <div className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
+                <p className={`text-sm ${theme.textSecondary}`}>
+                  ⚠️ После изменения имени пользователя вы будете автоматически перелогинены с новым именем.
+                </p>
+              </div>
+
+              <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`}>
+            <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>
+                <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`}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowOldPassword(!showOldPassword)}
+                    className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} 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>
+                <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`}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowNewPassword(!showNewPassword)}
+                    className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
+                  >
+                    {showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  </button>
+                </div>
+                <p className={`text-xs ${theme.textSecondary} mt-1`}>
+                  Минимум 6 символов
+                </p>
+              </div>
+
+              <div>
+                <label className={`block text-sm font-medium mb-2 ${theme.text}`}>
+                  Подтвердите новый пароль
+                </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`}
+                />
+              </div>
+
+              <div className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
+                <p className={`text-sm ${theme.textSecondary}`}>
+                  ⚠️ После изменения пароля используйте новый пароль для входа в систему.
+                </p>
+              </div>
+
+              <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>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

ГОТОВО.md

@@ -7,7 +7,7 @@
 - **Новый**: Sofa12345 / arkonsad123
 
 ### 2. Добавлена система тикетов 🎫
-- Кнопка "Тикеты" в header рядом с "Пользователи"
+- Кнопка "Тикеты" в header
 - Создание тикетов с темой и описанием
 - Чат для общения в тикете
 - Три статуса:
@@ -21,7 +21,16 @@
 - Возможность отвечать на тикеты
 - Отдельный бейдж в интерфейсе
 
-### 4. Улучшено управление пользователями
+### 4. Добавлен личный кабинет 👤
+- Кнопка "Личный кабинет" в header рядом с "Тикеты"
+- Три вкладки:
+  - 📊 Обзор - статистика профиля
+  - 👤 Имя пользователя - изменение имени
+  - 🔒 Пароль - изменение пароля
+- Статистика по серверам и тикетам
+- Список своих серверов
+
+### 5. Улучшено управление пользователями
 - Выпадающий список для выбора роли
 - Три роли: Пользователь, Тех. поддержка, Администратор
 - Цветные индикаторы ролей
@@ -80,6 +89,9 @@ http://localhost:3000
 - ✅ Создание тикетов
 - ✅ Общение в своих тикетах
 - ✅ Смена темы интерфейса
+- ✅ Личный кабинет с статистикой
+- ✅ Изменение имени пользователя
+- ✅ Изменение пароля
 
 ### Для тех. поддержки
 - ✅ Все возможности пользователя
@@ -110,6 +122,7 @@ MC Panel/
 │       ├── themes.js        # Конфигурация тем
 │       └── components/
 │           ├── Auth.jsx              # Авторизация
+│           ├── Profile.jsx           # Личный кабинет
 │           ├── Tickets.jsx           # Список тикетов
 │           ├── TicketChat.jsx        # Чат тикета
 │           ├── CreateTicketModal.jsx # Создание тикета
@@ -121,6 +134,7 @@ MC Panel/
 │
 └── Документация/
     ├── ГОТОВО.md            # Этот файл
+    ├── PROFILE_SYSTEM.md    # Документация личного кабинета
     ├── TICKETS_SYSTEM.md    # Документация системы тикетов
     ├── CHANGELOG.md         # История изменений
     └── БЫСТРЫЙ_СТАРТ.md     # Быстрый старт
@@ -160,6 +174,7 @@ MC Panel/
 - ✅ Система пользователей
 - ✅ Система тикетов
 - ✅ Роль тех. поддержки
+- ✅ Личный кабинет
 - ✅ 5 тем оформления
 - ✅ Современный интерфейс
 

ЛИЧНЫЙ_КАБИНЕТ_ГОТОВ.md

@@ -0,0 +1,183 @@
+# ✅ Личный кабинет готов!
+
+## 🎉 Что добавлено
+
+### Кнопка "Личный кабинет"
+Расположена в header рядом с кнопкой "Тикеты". Доступна всем пользователям.
+
+### Три вкладки
+
+#### 1. 📊 Обзор
+**Информация о пользователе:**
+- Имя пользователя
+- Роль с цветным бейджем
+- Аватар
+
+**Статистика:**
+- 🖥️ **Серверы**: всего, мои, доступные
+- 🎫 **Тикеты**: всего, на рассмотрении, в работе, закрыто
+- 🛡️ **Роль**: название и описание прав
+
+**Список серверов:**
+- Все серверы пользователя
+- Название и ID
+- Красивые карточки
+
+#### 2. 👤 Имя пользователя
+**Возможности:**
+- Просмотр текущего имени
+- Ввод нового имени (минимум 3 символа)
+- Подтверждение паролем
+- Автоматический перелогин
+
+**Что обновляется:**
+- Владельцы серверов
+- Доступы к серверам
+- JWT токен
+
+#### 3. 🔒 Пароль
+**Возможности:**
+- Ввод текущего пароля
+- Ввод нового пароля (минимум 6 символов)
+- Подтверждение нового пароля
+- Показ/скрытие паролей (иконка глаза)
+
+**Безопасность:**
+- Проверка текущего пароля
+- Проверка совпадения новых паролей
+- Хеширование (bcrypt)
+
+## 🚀 Как использовать
+
+### Открыть личный кабинет
+1. Войдите в панель
+2. Нажмите кнопку "Личный кабинет" в header
+3. Откроется страница с вкладками
+
+### Посмотреть статистику
+1. Откройте вкладку "Обзор"
+2. Посмотрите информацию о профиле
+3. Посмотрите статистику
+4. Посмотрите список серверов
+
+### Изменить имя пользователя
+1. Откройте вкладку "Имя пользователя"
+2. Введите новое имя (минимум 3 символа)
+3. Введите текущий пароль
+4. Нажмите "Изменить имя пользователя"
+5. Вы будете автоматически перелогинены
+
+⚠️ **Важно**: После изменения имени обновятся все серверы и доступы.
+
+### Изменить пароль
+1. Откройте вкладку "Пароль"
+2. Введите текущий пароль
+3. Введите новый пароль (минимум 6 символов)
+4. Подтвердите новый пароль
+5. Нажмите "Изменить пароль"
+
+⚠️ **Важно**: После изменения пароля используйте новый пароль для входа.
+
+## 🎨 Дизайн
+
+### Современный интерфейс
+- Вкладки с плавными переходами
+- Цветные карточки статистики
+- Иконки для каждого раздела
+- Адаптивный дизайн
+
+### Формы
+- Валидация полей
+- Показ/скрытие паролей
+- Предупреждения
+- Индикация загрузки
+
+### Цветовые схемы
+- Работает со всеми 5 темами
+- Градиентный логотип
+- Цветные бейджи ролей
+
+## 📋 API Endpoints
+
+### PUT /api/profile/username
+Изменить имя пользователя
+
+```bash
+curl -X PUT http://localhost:8000/api/profile/username \
+  -H "Authorization: Bearer YOUR_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "new_username": "NewUsername",
+    "password": "current_password"
+  }'
+```
+
+### PUT /api/profile/password
+Изменить пароль
+
+```bash
+curl -X PUT http://localhost:8000/api/profile/password \
+  -H "Authorization: Bearer YOUR_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "old_password": "old_password",
+    "new_password": "new_password"
+  }'
+```
+
+### GET /api/profile/stats
+Получить статистику профиля
+
+```bash
+curl -X GET http://localhost:8000/api/profile/stats \
+  -H "Authorization: Bearer YOUR_TOKEN"
+```
+
+## 🔐 Безопасность
+
+### Изменение имени
+1. ✅ Проверка пароля
+2. ✅ Проверка уникальности
+3. ✅ Обновление владельцев серверов
+4. ✅ Обновление доступов
+5. ✅ Новый JWT токен
+
+### Изменение пароля
+1. ✅ Проверка текущего пароля
+2. ✅ Проверка длины (минимум 6 символов)
+3. ✅ Хеширование (bcrypt)
+
+## ✅ Готово!
+
+Личный кабинет полностью интегрирован в MC Panel. Все пользователи могут:
+- 📊 Просматривать статистику
+- 👤 Изменять имя пользователя
+- 🔒 Изменять пароль
+- 🖥️ Видеть свои серверы
+- 🎫 Видеть статистику по тикетам
+
+### Тестирование
+
+1. **Войдите в панель**
+   - Логин: Sofa12345
+   - Пароль: arkonsad123
+
+2. **Откройте личный кабинет**
+   - Нажмите кнопку "Личный кабинет"
+
+3. **Посмотрите статистику**
+   - Вкладка "Обзор"
+
+4. **Измените имя (опционально)**
+   - Вкладка "Имя пользователя"
+   - Введите новое имя и пароль
+
+5. **Измените пароль (опционально)**
+   - Вкладка "Пароль"
+   - Введите старый и новый пароли
+
+## 🎯 Что дальше?
+
+Система личного кабинета готова к использованию. Теперь пользователи могут полностью управлять своим профилем!
+
+**Наслаждайтесь! 🚀**