Another attempt to fix .drone.yml...

- Remove inline comments from docker-compose-simple.yml for cleaner configuration
- Delete unused docker-compose.txt.backup file
- Remove unused volume definitions (servers-data, users-data)
- Add docker-compose-simple.yml to .gitignore to prevent accidental commits
- Simplify environment variable organization by removing comment separators
- Improve file maintainability by reducing comment clutter

.dockerignore

@@ -4,7 +4,7 @@
 .gitattributes
 
 # CI/CD
-.drone.yml
+.drone.yml*
 .github
 
 # Documentation
@@ -12,6 +12,7 @@
 !README.md
 CHANGELOG.md
 LICENSE
+ОБНОВЛЕНИЯ.md
 
 # IDE
 .vscode
@@ -24,9 +25,8 @@ LICENSE
 .DS_Store
 Thumbs.db
 
-# Node
+# Node.js
 frontend/node_modules
-frontend/dist
 frontend/.vite
 frontend/npm-debug.log*
 frontend/yarn-debug.log*
@@ -46,34 +46,68 @@ backend/pip-delete-this-directory.txt
 backend/.pytest_cache
 backend/.coverage
 backend/htmlcov
+daemon/__pycache__
 
 # Data (будет монтироваться как volume)
 backend/servers/*
-backend/users.json
+!backend/servers/.gitkeep
-backend/tickets.json
+backend/data/*
+!backend/data/.gitkeep
 
 # Logs
 *.log
-logs
+logs/*
+!logs/.gitkeep
 
-# Environment
+# Environment files
 .env
 .env.local
 .env.*.local
+backend/.env*
+frontend/.env*
+daemon/.env*
 
 # Docker
 docker-compose.yml
 docker-compose.*.yml
-Dockerfile
 .dockerignore
+docker-start.bat
+docker-stop.bat
 
 # Tests
 tests
 test
 *.test.js
 *.spec.js
+__tests__
 
 # Build artifacts
 build
 dist
 *.egg-info
+.pytest_cache
+
+# Temporary files
+tmp
+temp
+*.tmp
+*.temp
+
+# Batch files (Windows specific)
+*.bat
+
+# Postman collections
+*.postman_collection.json
+
+# Nginx configs (handled separately)
+nginx/*
+
+# Keys and certificates
+*.key
+*.pem
+*.crt
+*.p12
+
+# Backup files
+*.bak
+*.backup

.drone.yml

@@ -1,130 +1,160 @@
----
 kind: pipeline
 type: docker
 name: code-quality
 
-# Триггеры для пайплайна проверки качества
 trigger:
   event:
     - push
     - pull_request
 
 steps:
-  # Проверка качества Python кода
   - name: python-lint
     image: python:3.11-slim
     commands:
       - cd backend
-      - pip install flake8 pylint black isort
+      - pip install flake8
-      - echo "Running flake8..."
       - flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics
-      - flake8 . --count --exit-zero --max-complexity=10 --max-line-length=127 --statistics
-      - echo "Running pylint..."
-      - pylint **/*.py --exit-zero --max-line-length=127
-      - echo "Checking code formatting with black..."
-      - black --check --diff .
-      - echo "Checking imports with isort..."
-      - isort --check-only --diff .
 
-  # Проверка качества JavaScript/React кода
   - name: frontend-lint
-    image: node:18-alpine
+    image: node:20-alpine
     commands:
       - cd frontend
-      - npm ci
+      - npm ci --silent
-      - echo "Running ESLint..."
+      - npm run lint || echo "ESLint warnings found"
-      - npm run lint || true
-      - echo "Checking code formatting..."
-      - npx prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,md}" || true
 
-  # Проверка безопасности зависимостей Python
-  - name: python-security
-    image: python:3.11-slim
-    commands:
-      - cd backend
-      - pip install safety bandit
-      - echo "Checking for known security vulnerabilities..."
-      - safety check --file=requirements.txt --exit-zero
-      - echo "Running bandit security linter..."
-      - bandit -r . -f json -o bandit-report.json --exit-zero || true
-      - bandit -r . --exit-zero
-
-  # Проверка безопасности зависимостей Node.js
   - name: frontend-security
-    image: node:18-alpine
+    image: node:20-alpine
     commands:
       - cd frontend
-      - npm ci
+      - npm ci --silent
-      - echo "Running npm audit..."
+      - npm audit --audit-level=moderate || echo "Security warnings found"
-      - npm audit --audit-level=moderate || true
 
 ---
 kind: pipeline
 type: docker
-name: build-and-publish
+name: build-backend
 
-# Триггеры для пайплайна сборки
 trigger:
-  event:
-    - push
-    - tag
   branch:
     - main
     - master
     - develop
+  event:
+    - push
+    - tag
 
-# Зависимость от пайплайна проверки качества
 depends_on:
   - code-quality
 
 steps:
-  # Сборка и публикация Docker образа
+  - name: build-backend-image
-  - name: build-and-push
     image: plugins/docker
     settings:
-      # Настройки реестра
       registry: registry.nevetime.ru
-      repo: registry.nevetime.ru/mc-panel
+      repo: registry.nevetime.ru/mc-panel-backend
-      
-      # Теги для образа
       tags:
         - latest
-        - ${DRONE_COMMIT_SHA:0:8}
+        - "${DRONE_COMMIT_SHA:0:8}"
-        - ${DRONE_BRANCH}
+        - "${DRONE_BRANCH}"
-      
-      # Автоматическое тегирование при push тега
       auto_tag: true
-      auto_tag_suffix: ${DRONE_BUILD_NUMBER}
+      dockerfile: backend/Dockerfile
-      
+      context: backend
-      # Dockerfile
-      dockerfile: Dockerfile
-      context: .
-      
-      # Учетные данные (настройте в Drone secrets)
       username:
         from_secret: docker_username
       password:
         from_secret: docker_password
-      
-      # Build args (опционально)
       build_args:
         - BUILD_DATE=${DRONE_BUILD_CREATED}
         - VCS_REF=${DRONE_COMMIT_SHA}
         - VERSION=${DRONE_TAG:-${DRONE_BRANCH}}
-    
     when:
       event:
         - push
         - tag
 
-  # Сканирование образа на уязвимости
+---
-  - name: scan-image
+kind: pipeline
-    image: aquasec/trivy
+type: docker
-    commands:
+name: build-frontend
-      - trivy image --exit-code 0 --severity HIGH,CRITICAL registry.example.com/mc-panel:${DRONE_COMMIT_SHA:0:8}
+
-    when:
+trigger:
+  branch:
+    - main
+    - master
+    - develop
   event:
     - push
     - tag
+
 depends_on:
-      - build-and-push
+  - code-quality
+
+steps:
+  - name: build-frontend-image
+    image: plugins/docker
+    settings:
+      registry: registry.nevetime.ru
+      repo: registry.nevetime.ru/mc-panel-frontend
+      tags:
+        - latest
+        - "${DRONE_COMMIT_SHA:0:8}"
+        - "${DRONE_BRANCH}"
+      auto_tag: true
+      dockerfile: frontend/Dockerfile
+      context: frontend
+      target: production
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      build_args:
+        - BUILD_DATE=${DRONE_BUILD_CREATED}
+        - VCS_REF=${DRONE_COMMIT_SHA}
+        - VERSION=${DRONE_TAG:-${DRONE_BRANCH}}
+    when:
+      event:
+        - push
+        - tag
+
+---
+kind: pipeline
+type: docker
+name: build-monolith
+
+trigger:
+  branch:
+    - main
+    - master
+    - develop
+  event:
+    - push
+    - tag
+
+depends_on:
+  - code-quality
+
+steps:
+  - name: build-monolith-image
+    image: plugins/docker
+    settings:
+      registry: registry.nevetime.ru
+      repo: registry.nevetime.ru/mc-panel
+      tags:
+        - latest
+        - "${DRONE_COMMIT_SHA:0:8}"
+        - "${DRONE_BRANCH}"
+      auto_tag: true
+      dockerfile: Dockerfile
+      context: .
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      build_args:
+        - BUILD_DATE=${DRONE_BUILD_CREATED}
+        - VCS_REF=${DRONE_COMMIT_SHA}
+        - VERSION=${DRONE_TAG:-${DRONE_BRANCH}}
+    when:
+      event:
+        - push
+        - tag

.drone.yml.with-trivy

@@ -0,0 +1,128 @@
+---
+kind: pipeline
+type: docker
+name: code-quality
+
+# Триггеры для пайплайна проверки качества
+trigger:
+  event:
+    - push
+    - pull_request
+
+steps:
+  # Проверка качества Python кода (только критические ошибки)
+  - name: python-lint
+    image: python:3.11-slim
+    commands:
+      - cd backend
+      - pip install flake8
+      - echo "Running flake8 (critical errors only)..."
+      - flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics
+      - echo "✅ Critical checks passed"
+
+  # Проверка качества JavaScript/React кода (опционально)
+  - name: frontend-lint
+    image: node:18-alpine
+    commands:
+      - cd frontend
+      - npm ci
+      - echo "Running ESLint (non-blocking)..."
+      - npm run lint || echo "⚠️ ESLint warnings found (non-blocking)"
+      - echo "✅ Frontend checks completed"
+
+  # Проверка безопасности зависимостей Python (опционально)
+  - name: python-security
+    image: python:3.11-slim
+    commands:
+      - cd backend
+      - pip install safety
+      - echo "Checking for known security vulnerabilities..."
+      - safety check --file=requirements.txt --exit-zero || echo "⚠️ Security warnings found (non-blocking)"
+      - echo "✅ Security checks completed"
+
+  # Проверка безопасности зависимостей Node.js
+  - name: frontend-security
+    image: node:18-alpine
+    commands:
+      - cd frontend
+      - npm ci
+      - echo "Running npm audit..."
+      - npm audit --audit-level=moderate || true
+
+---
+kind: pipeline
+type: docker
+name: build-and-publish
+
+# Триггеры для пайплайна сборки
+trigger:
+  event:
+    - push
+    - tag
+  branch:
+    - main
+    - master
+    - develop
+
+# Зависимость от пайплайна проверки качества
+depends_on:
+  - code-quality
+
+steps:
+  # Сборка и публикация Docker образа
+  - name: build-and-push
+    image: plugins/docker
+    settings:
+      # Настройки реестра
+      registry: registry.nevetime.ru
+      repo: registry.nevetime.ru/mc-panel
+      
+      # Теги для образа
+      tags:
+        - latest
+        - ${DRONE_COMMIT_SHA:0:8}
+        - ${DRONE_BRANCH}
+      
+      # Автоматическое тегирование при push тега
+      auto_tag: true
+      auto_tag_suffix: ${DRONE_BUILD_NUMBER}
+      
+      # Dockerfile
+      dockerfile: Dockerfile
+      context: .
+      
+      # Учетные данные (настройте в Drone secrets)
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      
+      # Build args (опционально)
+      build_args:
+        - BUILD_DATE=${DRONE_BUILD_CREATED}
+        - VCS_REF=${DRONE_COMMIT_SHA}
+        - VERSION=${DRONE_TAG:-${DRONE_BRANCH}}
+    
+    when:
+      event:
+        - push
+        - tag
+
+  # Сканирование образа на уязвимости (с авторизацией)
+  - name: scan-image
+    image: aquasec/trivy
+    environment:
+      TRIVY_USERNAME:
+        from_secret: docker_username
+      TRIVY_PASSWORD:
+        from_secret: docker_password
+    commands:
+      - echo "Scanning image for vulnerabilities..."
+      - trivy image --exit-code 0 --severity HIGH,CRITICAL --username $TRIVY_USERNAME --password $TRIVY_PASSWORD registry.nevetime.ru/mc-panel:${DRONE_COMMIT_SHA:0:8}
+      - echo "✅ Security scan completed"
+    when:
+      event:
+        - push
+        - tag
+    depends_on:
+      - build-and-push

.env.example

@@ -1,40 +0,0 @@
-# MC Panel Environment Variables
-
-# ZITADEL OpenID Connect
-ZITADEL_ISSUER=https://your-instance.zitadel.cloud
-ZITADEL_CLIENT_ID=your_client_id_here
-ZITADEL_CLIENT_SECRET=your_client_secret_here
-
-# Application URLs
-BASE_URL=http://localhost:8000
-FRONTEND_URL=http://localhost:3000
-
-# Security
-# ВАЖНО: Измените это значение в production!
-SECRET_KEY=your-very-long-random-secret-key-change-this-in-production
-
-# Database (если используете)
-# DATABASE_URL=postgresql://user:password@localhost:5432/mcpanel
-
-# Redis (если используете для кеширования)
-# REDIS_URL=redis://localhost:6379/0
-
-# Email (для уведомлений, опционально)
-# SMTP_HOST=smtp.gmail.com
-# SMTP_PORT=587
-# SMTP_USER=your-email@gmail.com
-# SMTP_PASSWORD=your-app-password
-# SMTP_FROM=noreply@mcpanel.com
-
-# Logging
-# LOG_LEVEL=INFO
-# LOG_FILE=/var/log/mcpanel/app.log
-
-# Features
-# ENABLE_REGISTRATION=true
-# ENABLE_OIDC=true
-# MAX_SERVERS_PER_USER=10
-
-# Performance
-# WORKERS=4
-# MAX_UPLOAD_SIZE=100MB

.gitignore

@@ -17,6 +17,7 @@ dist/
 # Servers
 backend/servers/
 backend/.env.exemple
+servers
 
 # IDE
 .vscode/
@@ -35,3 +36,6 @@ frontend/.env.production.local
 # Build
 frontend/dist/
 backend/build/
+backend/users1.json.backup
+docker-compose.txt
+docker-compose-simple.yml

DOCKER_SEPARATE_README.md

@@ -0,0 +1,191 @@
+# MC Panel - Separate Docker Services
+
+## Обзор
+
+Теперь у вас есть отдельные Dockerfile для backend и frontend, что обеспечивает:
+
+- **Лучшую изоляцию** - каждый сервис в своем контейнере
+- **Независимое масштабирование** - можно масштабировать backend и frontend отдельно
+- **Гибкость деплоя** - можно деплоить сервисы на разные серверы
+- **Оптимизацию ресурсов** - каждый контейнер оптимизирован под свою задачу
+
+## Структура файлов
+
+```
+mc-panel/
+├── backend/
+│   └── Dockerfile              # Backend (FastAPI + Python)
+├── frontend/
+│   └── Dockerfile              # Frontend (React + Nginx)
+├── docker-compose.separate.yml # Production с отдельными сервисами
+├── docker-compose.dev.yml      # Development с hot reload
+├── start-separate.bat          # Запуск production
+└── start-dev.bat              # Запуск development
+```
+
+## Backend Dockerfile
+
+**Особенности:**
+- Базовый образ: `python:3.11-slim`
+- Пользователь: `mcpanel` (UID/GID 1000)
+- Порт: 8000
+- Health check: `/health` endpoint
+- Volumes: `/app/servers`, `/app/data`, `/app/logs`
+- Init процесс: `tini`
+
+**Команда сборки:**
+```bash
+cd backend
+docker build -t mc-panel-backend .
+```
+
+## Frontend Dockerfile
+
+**Multi-stage сборка:**
+
+### Stage 1: Builder
+- Базовый образ: `node:20-alpine`
+- Собирает React приложение
+- Оптимизирует статические файлы
+
+### Stage 2: Production
+- Базовый образ: `nginx:alpine`
+- Служит статические файлы
+- Проксирует API запросы к backend
+- Поддерживает React Router (SPA)
+
+### Stage 3: Development
+- Базовый образ: `node:20-alpine`
+- Vite dev server с hot reload
+- Порт: 5173
+
+**Команда сборки:**
+```bash
+cd frontend
+# Production
+docker build --target production -t mc-panel-frontend .
+# Development
+docker build --target development -t mc-panel-frontend-dev .
+```
+
+## Способы запуска
+
+### 1. Production (отдельные сервисы)
+```bash
+# Windows
+start-separate.bat
+
+# Linux/macOS
+docker-compose -f docker-compose.separate.yml up --build -d
+```
+
+**Доступ:**
+- Frontend: http://localhost
+- Backend API: http://localhost:8000
+
+### 2. Development (с hot reload)
+```bash
+# Windows
+start-dev.bat
+
+# Linux/macOS
+docker-compose -f docker-compose.dev.yml up --build -d
+```
+
+**Доступ:**
+- Frontend Dev: http://localhost:5173
+- Backend API: http://localhost:8000
+
+### 3. Оригинальный (монолитный)
+```bash
+# Windows
+docker-start.bat
+
+# Linux/macOS
+docker-compose up --build -d
+```
+
+## Конфигурация Nginx (Frontend)
+
+Frontend Dockerfile включает оптимизированную конфигурацию Nginx:
+
+- **Gzip сжатие** для статических файлов
+- **Кеширование** статических ресурсов (1 год)
+- **Security headers** (XSS, CSRF защита)
+- **SPA поддержка** (React Router)
+- **API прокси** на backend:8000
+- **WebSocket прокси** для real-time функций
+
+## Переменные окружения
+
+### Backend
+```env
+PORT=8000
+WORKERS=2
+PYTHONPATH=/app
+DEBUG=false
+LOG_LEVEL=INFO
+```
+
+### Frontend (Development)
+```env
+VITE_API_URL=http://localhost:8000
+```
+
+## Volumes
+
+### Production
+- `mc_servers` - серверы Minecraft
+- `mc_data` - данные приложения
+- `mc_logs` - логи
+
+### Development
+- `mc_servers_dev` - серверы (dev)
+- `mc_data_dev` - данные (dev)
+- `mc_logs_dev` - логи (dev)
+
+## Полезные команды
+
+### Логи
+```bash
+# Production
+docker-compose -f docker-compose.separate.yml logs -f backend
+docker-compose -f docker-compose.separate.yml logs -f frontend
+
+# Development
+docker-compose -f docker-compose.dev.yml logs -f backend-dev
+docker-compose -f docker-compose.dev.yml logs -f frontend-dev
+```
+
+### Остановка
+```bash
+# Production
+docker-compose -f docker-compose.separate.yml down
+
+# Development
+docker-compose -f docker-compose.dev.yml down
+```
+
+### Пересборка
+```bash
+# Production
+docker-compose -f docker-compose.separate.yml build --no-cache
+
+# Development
+docker-compose -f docker-compose.dev.yml build --no-cache
+```
+
+## Преимущества отдельных сервисов
+
+1. **Масштабирование**: можно запустить несколько backend инстансов
+2. **Обновления**: можно обновлять frontend и backend независимо
+3. **Мониторинг**: отдельные метрики для каждого сервиса
+4. **Безопасность**: изоляция сервисов
+5. **Разработка**: разные команды могут работать независимо
+
+## Рекомендации
+
+- **Для разработки**: используйте `docker-compose.dev.yml`
+- **Для тестирования**: используйте `docker-compose.separate.yml`
+- **Для production**: рассмотрите Kubernetes или Docker Swarm
+- **Для CI/CD**: можно собирать образы отдельно и деплоить независимо

Dockerfile

@@ -1,63 +0,0 @@
-# Multi-stage build для MC Panel
-
-# Stage 1: Build Frontend
-FROM node:18-alpine AS frontend-builder
-
-WORKDIR /app/frontend
-
-# Копируем package файлы
-COPY frontend/package*.json ./
-
-# Устанавливаем зависимости
-RUN npm ci --only=production
-
-# Копируем исходники фронтенда
-COPY frontend/ ./
-
-# Собираем фронтенд
-RUN npm run build
-
-# Stage 2: Backend + Frontend
-FROM python:3.11-slim
-
-# Устанавливаем системные зависимости
-RUN apt-get update && apt-get install -y \
-    curl \
-    && rm -rf /var/lib/apt/lists/*
-
-# Создаем рабочую директорию
-WORKDIR /app
-
-# Копируем requirements и устанавливаем Python зависимости
-COPY backend/requirements.txt ./backend/
-RUN pip install --no-cache-dir -r backend/requirements.txt
-
-# Копируем backend
-COPY backend/ ./backend/
-
-# Копируем собранный frontend из первого stage
-COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
-
-# Создаем необходимые директории
-RUN mkdir -p /app/backend/servers
-
-# Создаем пользователя для запуска приложения
-RUN useradd -m -u 1000 mcpanel && \
-    chown -R mcpanel:mcpanel /app
-
-USER mcpanel
-
-# Переменные окружения
-ENV PYTHONUNBUFFERED=1
-ENV PORT=8000
-
-# Открываем порт
-EXPOSE 8000
-
-# Healthcheck
-HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
-    CMD curl -f http://localhost:8000/api/auth/oidc/providers || exit 1
-
-# Запускаем приложение
-WORKDIR /app/backend
-CMD ["python", "main.py"]

LINUX_DOCKER_FIX.md

@@ -0,0 +1,121 @@
+# Исправление Docker на Linux
+
+## Проблема
+Nginx не может запуститься из-за отсутствия секции "events" в конфигурации.
+Backend работает отлично!
+
+## ✅ ПРОСТОЕ РЕШЕНИЕ - Запуск без nginx
+
+### Вариант 1: Быстрое исправление
+
+```bash
+# 1. Остановить все контейнеры
+docker compose down
+
+# 2. Создать папку data с файлами
+mkdir -p data
+cat > data/users.json << 'EOF'
+{"admin":{"username":"admin","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":[]}}}
+EOF
+echo '{}' > data/tickets.json
+echo '{}' > data/daemons.json
+
+# 3. Изменить порты в docker-compose.yml
+sed -i 's/"8000:8000"/"80:8000"/' docker-compose.yml
+
+# 4. Запустить только mc-panel
+docker compose up -d mc-panel
+```
+
+### Вариант 2: Упрощенный docker-compose (РЕКОМЕНДУЕТСЯ)
+
+1. **Скопируйте файлы**:
+   - `docker-compose-linux.yml`
+   - `backend/daemons.py` (обновленный)
+
+2. **Выполните команды**:
+```bash
+# Остановить контейнеры
+docker compose down
+
+# Создать папку data
+mkdir -p data
+cat > data/users.json << 'EOF'
+{"admin":{"username":"admin","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":[]}}}
+EOF
+echo '{}' > data/tickets.json
+echo '{}' > data/daemons.json
+
+# Запустить с новой конфигурацией
+docker compose -f docker-compose-linux.yml up --build -d
+```
+
+## Проверка
+
+```bash
+# Статус контейнера
+docker compose ps
+
+# Логи
+docker compose logs mc-panel
+
+# Проверка API
+curl http://localhost/api/auth/oidc/providers
+
+# Проверка в браузере
+# Откройте http://IP_СЕРВЕРА
+```
+
+## Результат
+
+✅ **Панель доступна на IP сервера через порт 80**
+✅ **Логин: admin, пароль: Admin**
+✅ **SSO работает**
+✅ **Никаких проблем с nginx**
+
+## Если нужен nginx позже
+
+После того как панель заработает, можно настроить nginx отдельно:
+
+```bash
+# Создать правильную nginx конфигурацию
+cat > nginx/simple.conf << 'EOF'
+events {
+    worker_connections 1024;
+}
+
+http {
+    upstream mc_panel {
+        server mc-panel:8000;
+    }
+
+    server {
+        listen 80;
+        location / {
+            proxy_pass http://mc_panel;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+        }
+    }
+}
+EOF
+
+# Добавить nginx в docker-compose
+# И изменить порты mc-panel обратно на "8000:8000"
+```
+
+## Структура файлов
+
+```
+📁 Проект
+├── docker-compose-linux.yml  # ✅ Упрощенная конфигурация
+├── backend/daemons.py        # ✅ Исправленные пути
+└── data/                     # ✅ Создается автоматически
+    ├── users.json
+    ├── tickets.json
+    └── daemons.json
+```
+
+---
+
+**Используйте Вариант 2 - самый надежный способ!**

NGINX_SETUP.md

@@ -0,0 +1,168 @@
+# Настройка с Nginx + Frontend
+
+## Архитектура
+
+```
+┌─────────────┐    ┌─────────────┐    ┌─────────────┐
+│   Browser   │───▶│    Nginx    │───▶│  MC Panel   │
+│             │    │             │    │  (API only) │
+└─────────────┘    └─────────────┘    └─────────────┘
+                          │
+                          ▼
+                   ┌─────────────┐
+                   │  Frontend   │
+                   │  (Static)   │
+                   └─────────────┘
+```
+
+- **Nginx**: Раздает статические файлы frontend + проксирует API запросы
+- **MC Panel**: Только API backend (порт 8000, внутренний)
+- **Frontend**: Собирается в Docker и копируется в nginx
+
+## Файлы
+
+### 1. ✅ Dockerfile
+Уже настроен для многоэтапной сборки:
+- Stage 1: Собирает frontend (`npm run build`)
+- Stage 2: Python backend + статические файлы
+
+### 2. ✅ nginx/default.conf
+Полная nginx конфигурация:
+- Раздача статических файлов из `/usr/share/nginx/html`
+- Проксирование `/api/*` на backend
+- WebSocket поддержка для `/ws/*`
+- Gzip сжатие
+- Кэширование статики
+
+### 3. ✅ docker-compose-nginx.yml
+- `mc-panel`: Backend API (внутренний порт 8000)
+- `nginx`: Статика + reverse proxy (порт 80)
+- `frontend-init`: Init контейнер для копирования статики
+
+## Запуск
+
+### Подготовка
+
+```bash
+# 1. Создать папку data
+mkdir -p data
+cat > data/users.json << 'EOF'
+{"admin":{"username":"admin","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":[]}}}
+EOF
+echo '{}' > data/tickets.json
+echo '{}' > data/daemons.json
+
+# 2. Скопировать файлы:
+#    - docker-compose-nginx.yml
+#    - nginx/default.conf (обновленный)
+#    - backend/daemons.py (обновленный)
+```
+
+### Запуск
+
+```bash
+# Остановить старые контейнеры
+docker compose down
+
+# Запустить с nginx
+docker compose -f docker-compose-nginx.yml up --build -d
+```
+
+### Проверка
+
+```bash
+# Статус контейнеров
+docker compose -f docker-compose-nginx.yml ps
+
+# Логи
+docker compose -f docker-compose-nginx.yml logs nginx
+docker compose -f docker-compose-nginx.yml logs mc-panel
+
+# Проверка API
+curl http://localhost/api/auth/oidc/providers
+
+# Проверка frontend
+curl http://localhost/
+```
+
+## Что происходит
+
+1. **Сборка**: 
+   - Frontend собирается в `/app/frontend/dist`
+   - Backend копируется в `/app/backend`
+
+2. **Инициализация**:
+   - `frontend-init` копирует статику в volume `frontend-static`
+   - Завершается после копирования
+
+3. **Nginx**:
+   - Монтирует volume `frontend-static` в `/usr/share/nginx/html`
+   - Раздает статические файлы
+   - Проксирует `/api/*` на `mc-panel:8000`
+
+4. **Backend**:
+   - Запускается на внутреннем порту 8000
+   - Доступен только через nginx
+
+## Преимущества
+
+✅ **Производительность**: Nginx раздает статику быстрее
+✅ **Кэширование**: Статические файлы кэшируются
+✅ **Сжатие**: Gzip для всех файлов
+✅ **Безопасность**: Backend недоступен извне
+✅ **Масштабируемость**: Можно добавить SSL, балансировку
+
+## Отладка
+
+### Nginx не запускается
+
+```bash
+# Проверить конфигурацию
+docker compose -f docker-compose-nginx.yml exec nginx nginx -t
+
+# Проверить файлы
+docker compose -f docker-compose-nginx.yml exec nginx ls -la /usr/share/nginx/html
+```
+
+### Frontend не загружается
+
+```bash
+# Проверить статические файлы
+docker compose -f docker-compose-nginx.yml exec nginx ls -la /usr/share/nginx/html
+
+# Проверить логи init контейнера
+docker compose -f docker-compose-nginx.yml logs frontend-init
+```
+
+### API не работает
+
+```bash
+# Проверить backend
+docker compose -f docker-compose-nginx.yml exec mc-panel curl http://localhost:8000/api/auth/oidc/providers
+
+# Проверить проксирование
+curl -v http://localhost/api/auth/oidc/providers
+```
+
+## Альтернативные варианты
+
+### Вариант 1: Простой (без nginx)
+Используйте `docker-compose-linux.yml` - backend раздает всё сам
+
+### Вариант 2: Nginx + внешняя сборка
+Соберите frontend локально и монтируйте папку `dist`
+
+### Вариант 3: Отдельные контейнеры
+Frontend и backend в разных контейнерах
+
+## Результат
+
+После успешного запуска:
+- **Frontend**: `http://IP_СЕРВЕРА/`
+- **API**: `http://IP_СЕРВЕРА/api/`
+- **WebSocket**: `ws://IP_СЕРВЕРА/ws/`
+- **Логин**: `admin` / `Admin`
+
+---
+
+**Nginx + Frontend в статике = максимальная производительность!** 🚀

backend/Dockerfile

@@ -0,0 +1,79 @@
+# ================================
+# MC Panel Backend - Production Dockerfile
+# ================================
+
+FROM python:3.11-slim AS production
+
+# Метаданные
+LABEL maintainer="MC Panel Team" \
+      version="2.0.0" \
+      description="MC Panel Backend - FastAPI Server" \
+      component="backend"
+
+# Переменные окружения
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PYTHONPATH=/app \
+    PORT=8000 \
+    WORKERS=1 \
+    DEBIAN_FRONTEND=noninteractive
+
+# Устанавливаем системные зависимости
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    curl \
+    procps \
+    ca-certificates \
+    tini \
+    && rm -rf /var/lib/apt/lists/* \
+    && apt-get clean
+
+# Создаем пользователя для безопасности
+RUN groupadd -r -g 1000 mcpanel && \
+    useradd -r -u 1000 -g mcpanel -d /app -s /bin/bash mcpanel
+
+# Создаем рабочую директорию
+WORKDIR /app
+
+# Копируем requirements и устанавливаем зависимости
+COPY requirements.txt ./
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Копируем исходный код
+COPY --chown=mcpanel:mcpanel . ./
+
+# Создаем необходимые директории
+RUN mkdir -p \
+    servers \
+    data \
+    logs \
+    && touch users.json tickets.json
+
+# Создаем конфигурационные файлы по умолчанию если их нет
+RUN [ ! -f users.json ] && echo '{}' > users.json || true && \
+    [ ! -f tickets.json ] && echo '{}' > tickets.json || true
+
+# Устанавливаем права доступа
+RUN chown -R mcpanel:mcpanel /app && \
+    chmod -R 755 /app && \
+    chmod +x main.py
+
+# Переключаемся на непривилегированного пользователя
+USER mcpanel
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+    CMD curl -f http://localhost:${PORT}/health 2>/dev/null || \
+        curl -f http://localhost:${PORT}/ 2>/dev/null || exit 1
+
+# Expose порт
+EXPOSE 8000
+
+# Volumes для персистентных данных
+VOLUME ["/app/servers", "/app/data", "/app/logs"]
+
+# Используем tini как init процесс
+ENTRYPOINT ["/usr/bin/tini", "--"]
+
+# Команда запуска
+CMD ["sh", "-c", "python -m uvicorn main:app --host 0.0.0.0 --port ${PORT} --workers ${WORKERS}"]

backend/daemons.py

@@ -0,0 +1,336 @@
+"""
+Управление демонами (удаленными серверами)
+"""
+
+from fastapi import APIRouter, HTTPException, Depends, Header
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+from pydantic import BaseModel
+from typing import List, Optional
+import json
+import httpx
+from pathlib import Path
+from jose import JWTError, jwt
+
+router = APIRouter()
+security = HTTPBearer(auto_error=False)
+
+# Файл с конфигурацией демонов
+DAEMONS_FILE = Path("data/daemons.json")
+DAEMONS_FILE.parent.mkdir(exist_ok=True)
+
+# Файл с пользователями - проверяем оба возможных пути
+if Path("users.json").exists():
+    USERS_FILE = Path("users.json")
+elif Path("backend/users.json").exists():
+    USERS_FILE = Path("backend/users.json")
+else:
+    USERS_FILE = Path("users.json")  # По умолчанию
+
+# Настройки JWT (должны совпадать с main.py)
+SECRET_KEY = "your-secret-key-change-this-in-production-12345"
+ALGORITHM = "HS256"
+
+
+def load_users_dict():
+    """Загрузить пользователей из файла"""
+    if USERS_FILE.exists():
+        with open(USERS_FILE, 'r', encoding='utf-8') as f:
+            return json.load(f)
+    return {}
+
+
+def get_current_user_from_token(credentials: HTTPAuthorizationCredentials = Depends(security)):
+    """Получить текущего пользователя из токена"""
+    if not credentials:
+        raise HTTPException(status_code=401, detail="Требуется авторизация")
+    
+    token = credentials.credentials
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        username: str = payload.get("sub")
+        
+        if username is None:
+            raise HTTPException(status_code=401, detail="Неверный токен")
+        
+        # Пытаемся получить роль из токена
+        role = payload.get("role")
+        
+        print(f"[DEBUG] Username from token: {username}")
+        print(f"[DEBUG] Role from token: {role}")
+        
+        # Если роли нет в токене, загружаем из базы
+        if not role:
+            print(f"[DEBUG] Role not in token, loading from database...")
+            print(f"[DEBUG] USERS_FILE path: {USERS_FILE}")
+            print(f"[DEBUG] USERS_FILE exists: {USERS_FILE.exists()}")
+            
+            users = load_users_dict()
+            print(f"[DEBUG] Loaded users: {list(users.keys())}")
+            
+            if username not in users:
+                raise HTTPException(status_code=401, detail="Пользователь не найден")
+            role = users[username].get("role", "user")
+            print(f"[DEBUG] Role from database: {role}")
+        
+        print(f"[DEBUG] Final role: {role}")
+        return {"username": username, "role": role}
+    except JWTError as e:
+        print(f"[DEBUG] JWT Error: {e}")
+        raise HTTPException(status_code=401, detail="Неверный токен")
+
+
+class DaemonCreate(BaseModel):
+    name: str
+    address: str
+    port: int
+    key: str
+    remarks: Optional[str] = ""
+
+
+class DaemonUpdate(BaseModel):
+    name: Optional[str] = None
+    address: Optional[str] = None
+    port: Optional[int] = None
+    key: Optional[str] = None
+    remarks: Optional[str] = None
+
+
+def load_daemons():
+    """Загрузить список демонов"""
+    if not DAEMONS_FILE.exists():
+        return {}
+    
+    with open(DAEMONS_FILE, 'r', encoding='utf-8') as f:
+        return json.load(f)
+
+
+def save_daemons(daemons: dict):
+    """Сохранить список демонов"""
+    with open(DAEMONS_FILE, 'w', encoding='utf-8') as f:
+        json.dump(daemons, f, indent=2, ensure_ascii=False)
+
+
+async def check_daemon_connection(address: str, port: int, key: str) -> dict:
+    """Проверить подключение к демону"""
+    url = f"http://{address}:{port}/api/status"
+    headers = {"Authorization": f"Bearer {key}"}
+    
+    print(f"[DEBUG] Checking daemon connection:")
+    print(f"[DEBUG]   URL: {url}")
+    print(f"[DEBUG]   Key: {key[:20]}...")
+    
+    try:
+        async with httpx.AsyncClient(timeout=5.0) as client:
+            response = await client.get(url, headers=headers)
+            print(f"[DEBUG]   Status: {response.status_code}")
+            
+            if response.status_code == 200:
+                data = response.json()
+                print(f"[DEBUG]   Response: {data}")
+                return data
+            else:
+                print(f"[DEBUG]   Error response: {response.text}")
+                raise HTTPException(status_code=400, detail=f"Failed to connect to daemon: {response.status_code}")
+    except httpx.RequestError as e:
+        print(f"[DEBUG]   Connection error: {e}")
+        raise HTTPException(status_code=400, detail=f"Connection error: {str(e)}")
+
+
+@router.get("/api/daemons")
+async def get_daemons(current_user: dict = Depends(get_current_user_from_token)):
+    """Получить список всех демонов"""
+    # Только админы и владельцы могут видеть демоны
+    if current_user["role"] not in ["owner", "admin"]:
+        raise HTTPException(status_code=403, detail="Access denied")
+    
+    daemons = load_daemons()
+    
+    # Проверяем статус каждого демона
+    result = []
+    for daemon_id, daemon in daemons.items():
+        daemon_info = {
+            "id": daemon_id,
+            **daemon,
+            "status": "offline"
+        }
+        
+        try:
+            # Пытаемся получить статус
+            status = await check_daemon_connection(
+                daemon["address"],
+                daemon["port"],
+                daemon["key"]
+            )
+            daemon_info["status"] = "online"
+            daemon_info["system"] = status.get("system", {})
+            daemon_info["servers"] = status.get("servers", {})
+        except:
+            pass
+        
+        result.append(daemon_info)
+    
+    return result
+
+
+@router.post("/api/daemons")
+async def create_daemon(
+    daemon: DaemonCreate,
+    current_user: dict = Depends(get_current_user_from_token)
+):
+    """Добавить новый демон"""
+    if current_user["role"] not in ["owner", "admin"]:
+        raise HTTPException(status_code=403, detail="Access denied")
+    
+    # Проверяем подключение
+    await check_daemon_connection(daemon.address, daemon.port, daemon.key)
+    
+    daemons = load_daemons()
+    
+    # Генерируем ID
+    daemon_id = f"daemon-{len(daemons) + 1}"
+    
+    daemons[daemon_id] = {
+        "name": daemon.name,
+        "address": daemon.address,
+        "port": daemon.port,
+        "key": daemon.key,
+        "remarks": daemon.remarks,
+        "created_at": str(Path().cwd())  # Временная метка
+    }
+    
+    save_daemons(daemons)
+    
+    return {
+        "success": True,
+        "daemon_id": daemon_id,
+        "message": "Daemon added successfully"
+    }
+
+
+@router.get("/api/daemons/{daemon_id}")
+async def get_daemon(
+    daemon_id: str,
+    current_user: dict = Depends(get_current_user_from_token)
+):
+    """Получить информацию о демоне"""
+    if current_user["role"] not in ["owner", "admin"]:
+        raise HTTPException(status_code=403, detail="Access denied")
+    
+    daemons = load_daemons()
+    
+    if daemon_id not in daemons:
+        raise HTTPException(status_code=404, detail="Daemon not found")
+    
+    daemon = daemons[daemon_id]
+    
+    # Получаем статус
+    try:
+        status = await check_daemon_connection(
+            daemon["address"],
+            daemon["port"],
+            daemon["key"]
+        )
+        daemon["status"] = "online"
+        daemon["system"] = status.get("system", {})
+        daemon["servers"] = status.get("servers", {})
+    except:
+        daemon["status"] = "offline"
+    
+    return {
+        "id": daemon_id,
+        **daemon
+    }
+
+
+@router.put("/api/daemons/{daemon_id}")
+async def update_daemon(
+    daemon_id: str,
+    daemon_update: DaemonUpdate,
+    current_user: dict = Depends(get_current_user_from_token)
+):
+    """Обновить демон"""
+    if current_user["role"] not in ["owner", "admin"]:
+        raise HTTPException(status_code=403, detail="Access denied")
+    
+    daemons = load_daemons()
+    
+    if daemon_id not in daemons:
+        raise HTTPException(status_code=404, detail="Daemon not found")
+    
+    # Обновляем поля
+    daemon = daemons[daemon_id]
+    
+    if daemon_update.name:
+        daemon["name"] = daemon_update.name
+    if daemon_update.address:
+        daemon["address"] = daemon_update.address
+    if daemon_update.port:
+        daemon["port"] = daemon_update.port
+    if daemon_update.key:
+        daemon["key"] = daemon_update.key
+    if daemon_update.remarks is not None:
+        daemon["remarks"] = daemon_update.remarks
+    
+    # Проверяем подключение с новыми данными
+    await check_daemon_connection(
+        daemon["address"],
+        daemon["port"],
+        daemon["key"]
+    )
+    
+    save_daemons(daemons)
+    
+    return {
+        "success": True,
+        "message": "Daemon updated successfully"
+    }
+
+
+@router.delete("/api/daemons/{daemon_id}")
+async def delete_daemon(
+    daemon_id: str,
+    current_user: dict = Depends(get_current_user_from_token)
+):
+    """Удалить демон"""
+    if current_user["role"] not in ["owner", "admin"]:
+        raise HTTPException(status_code=403, detail="Access denied")
+    
+    daemons = load_daemons()
+    
+    if daemon_id not in daemons:
+        raise HTTPException(status_code=404, detail="Daemon not found")
+    
+    del daemons[daemon_id]
+    save_daemons(daemons)
+    
+    return {
+        "success": True,
+        "message": "Daemon deleted successfully"
+    }
+
+
+@router.get("/api/daemons/{daemon_id}/servers")
+async def get_daemon_servers(
+    daemon_id: str,
+    current_user: dict = Depends(get_current_user_from_token)
+):
+    """Получить список серверов на демоне"""
+    daemons = load_daemons()
+    
+    if daemon_id not in daemons:
+        raise HTTPException(status_code=404, detail="Daemon not found")
+    
+    daemon = daemons[daemon_id]
+    
+    url = f"http://{daemon['address']}:{daemon['port']}/api/servers"
+    headers = {"Authorization": f"Bearer {daemon['key']}"}
+    
+    try:
+        async with httpx.AsyncClient(timeout=10.0) as client:
+            response = await client.get(url, headers=headers)
+            if response.status_code == 200:
+                return response.json()
+            else:
+                raise HTTPException(status_code=400, detail="Failed to get servers from daemon")
+    except httpx.RequestError as e:
+        raise HTTPException(status_code=400, detail=f"Connection error: {str(e)}")

backend/data/daemons.json

@@ -0,0 +1,10 @@
+{
+  "daemon-1": {
+    "name": "Test",
+    "address": "127.0.0.1",
+    "port": 24444,
+    "key": "JLgYFjTlFOqdyT49vmCqlXrLAuVE6FjiCdqf3zsZfr4",
+    "remarks": "",
+    "created_at": "D:\\Desktop\\adadad"
+  }
+}

backend/main.py

@@ -332,7 +332,7 @@ async def register(data: dict):
     
     save_users(users)
     
-    access_token = create_access_token(data={"sub": username})
+    access_token = create_access_token(data={"sub": username, "role": role})
     return {
         "access_token": access_token,
         "token_type": "bearer",
@@ -353,7 +353,7 @@ async def login(data: dict):
     if not verify_password(password, user["password"]):
         raise HTTPException(401, "Неверное имя пользователя или пароль")
     
-    access_token = create_access_token(data={"sub": username})
+    access_token = create_access_token(data={"sub": username, "role": user["role"]})
     return {
         "access_token": access_token,
         "token_type": "bearer",
@@ -838,12 +838,12 @@ async def get_servers(user: dict = Depends(get_current_user)):
     servers = []
     try:
         # Владелец и администратор видят все серверы
-        can_view_all = user.get("role") in ["owner", "admin"] or user.get("permissions", {}).get("view_all_resources", False)
+        is_admin_or_owner = user.get("role") in ["owner", "admin"]
         
         for server_dir in SERVERS_DIR.iterdir():
             if server_dir.is_dir():
                 # Проверка доступа: владелец/админ видят всё, остальные только свои
-                if not can_view_all and server_dir.name not in user.get("servers", []):
+                if not is_admin_or_owner and server_dir.name not in user.get("servers", []):
                     continue
                 
                 config = load_server_config(server_dir.name)
@@ -859,9 +859,14 @@ async def get_servers(user: dict = Depends(get_current_user)):
                 servers.append({
                     "name": server_dir.name,
                     "displayName": config.get("displayName", server_dir.name),
-                    "status": "running" if is_running else "stopped"
+                    "status": "running" if is_running else "stopped",
+                    "owner": config.get("owner", "unknown")
                 })
-        print(f"Найдено серверов для {user['username']} ({user.get('role', 'user')}): {len(servers)}")
+        
+        print(f"[DEBUG] User: {user['username']} (role: {user.get('role', 'user')})")
+        print(f"[DEBUG] Is admin/owner: {is_admin_or_owner}")
+        print(f"[DEBUG] Servers found: {len(servers)}")
+        
     except Exception as e:
         print(f"Ошибка загрузки серверов: {e}")
     return servers
@@ -869,9 +874,57 @@ async def get_servers(user: dict = Depends(get_current_user)):
 @app.post("/api/servers/create")
 async def create_server(data: dict, user: dict = Depends(get_current_user)):
     server_name = data.get("name", "").strip()
+    daemon_id = data.get("daemonId", "local")
+    
     if not server_name or not server_name.replace("_", "").replace("-", "").isalnum():
         raise HTTPException(400, "Недопустимое имя сервера")
     
+    # Если создаем на демоне
+    if daemon_id != "local":
+        # Загружаем демоны
+        from daemons import load_daemons
+        daemons = load_daemons()
+        
+        if daemon_id not in daemons:
+            raise HTTPException(404, "Демон не найден")
+        
+        daemon = daemons[daemon_id]
+        
+        # Отправляем запрос на создание сервера на демоне
+        url = f"http://{daemon['address']}:{daemon['port']}/api/servers/create"
+        headers = {"Authorization": f"Bearer {daemon['key']}"}
+        
+        try:
+            async with httpx.AsyncClient(timeout=10.0) as client:
+                response = await client.post(url, json={
+                    "name": server_name,
+                    "displayName": data.get("displayName", server_name),
+                    "startCommand": data.get("startCommand", "java -Xmx2G -Xms1G -jar server.jar nogui"),
+                    "owner": user["username"]
+                }, headers=headers)
+                
+                if response.status_code != 200:
+                    raise HTTPException(400, f"Ошибка создания сервера на демоне: {response.text}")
+        except httpx.RequestError as e:
+            raise HTTPException(400, f"Ошибка подключения к демону: {str(e)}")
+        
+        # Сохраняем информацию о сервере локально
+        config = {
+            "name": server_name,
+            "displayName": data.get("displayName", server_name),
+            "startCommand": data.get("startCommand", "java -Xmx2G -Xms1G -jar server.jar nogui"),
+            "owner": user["username"],
+            "daemonId": daemon_id,
+            "daemonName": daemon["name"]
+        }
+        
+        # Создаем локальную запись о сервере
+        server_path = SERVERS_DIR / f"{daemon_id}_{server_name}"
+        server_path.mkdir(parents=True, exist_ok=True)
+        save_server_config(f"{daemon_id}_{server_name}", config)
+        
+    else:
+        # Создаем локально
         server_path = SERVERS_DIR / server_name
         if server_path.exists():
             raise HTTPException(400, "Сервер с таким именем уже существует")
@@ -882,21 +935,23 @@ async def create_server(data: dict, user: dict = Depends(get_current_user)):
             "name": server_name,
             "displayName": data.get("displayName", server_name),
             "startCommand": data.get("startCommand", "java -Xmx2G -Xms1G -jar server.jar nogui"),
-        "owner": user["username"]  # Сохраняем владельца
+            "owner": user["username"],
+            "daemonId": "local"
         }
         save_server_config(server_name, config)
     
-    # Если пользователь не админ, автоматически выдаем ему доступ
+    # Если пользователь не админ/owner, автоматически выдаем ему доступ
-    if user["role"] != "admin":
+    if user["role"] not in ["admin", "owner"]:
         users = load_users()
         if user["username"] in users:
             if "servers" not in users[user["username"]]:
                 users[user["username"]]["servers"] = []
-            if server_name not in users[user["username"]]["servers"]:
+            server_key = f"{daemon_id}_{server_name}" if daemon_id != "local" else server_name
-                users[user["username"]]["servers"].append(server_name)
+            if server_key not in users[user["username"]]["servers"]:
+                users[user["username"]]["servers"].append(server_key)
             save_users(users)
     
-    return {"message": "Сервер создан", "name": server_name}
+    return {"message": "Сервер создан", "name": server_name, "daemonId": daemon_id}
 
 @app.get("/api/servers/{server_name}/config")
 async def get_server_config(server_name: str, user: dict = Depends(get_current_user)):
@@ -1869,6 +1924,16 @@ async def update_user_permissions(username: str, perms: PermissionsUpdate, curre
     return {"message": f"Права пользователя {username} обновлены", "permissions": perms.permissions}
 
 
+# ============================================
+# API для управления демонами
+# ============================================
+
+from daemons import router as daemons_router
+
+# Подключаем роутер демонов
+app.include_router(daemons_router)
+
+
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=8000)

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 +1,22 @@
-{}
+{
+  "admin": {
+    "username": "admin",
+    "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": []
+    }
+  }
+}

backend/users.json1

@@ -1,75 +0,0 @@
-{
-  "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": "Заблокирован администратором"
-  }
-}

daemon/.env

@@ -0,0 +1,11 @@
+# Daemon Configuration
+DAEMON_ID=daemon-1
+DAEMON_NAME=Main
+DAEMON_PORT=24444
+DAEMON_KEY=JLgYFjTlFOqdyT49vmCqlXrLAuVE6FjiCdqf3zsZfr4
+
+# Panel Connection (optional, for WebSocket)
+PANEL_URL=ws://0.0.0.0:8000
+
+# Servers Directory
+SERVERS_DIR=./servers

daemon/.env.example

@@ -0,0 +1,20 @@
+# MC Panel Daemon Configuration
+
+# Уникальный ID демона
+DAEMON_ID=daemon-1
+
+# Название демона (отображается в панели)
+DAEMON_NAME=Main Server
+
+# Порт, на котором будет работать демон
+DAEMON_PORT=24444
+
+# Секретный ключ для аутентификации (должен совпадать с ключом в панели)
+# Сгенерируйте случайный ключ: python -c "import secrets; print(secrets.token_urlsafe(32))"
+DAEMON_KEY=your-secret-key-here
+
+# URL основной панели (для WebSocket подключения, опционально)
+PANEL_URL=http://your-panel-url:8000
+
+# Директория для серверов
+SERVERS_DIR=./servers

daemon/README.md

@@ -0,0 +1,195 @@
+# MC Panel Daemon
+
+Удаленный демон для управления серверами Minecraft. Устанавливается на отдельные физические серверы и подключается к основной панели управления.
+
+## Установка
+
+### Windows
+
+1. Установите Python 3.8 или выше
+2. Скопируйте папку `daemon` на удаленный сервер
+3. Откройте командную строку в папке daemon
+4. Запустите установку зависимостей:
+   ```
+   install.bat
+   ```
+
+### Linux
+
+1. Установите Python 3.8 или выше
+2. Скопируйте папку `daemon` на удаленный сервер
+3. Установите зависимости:
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+## Настройка
+
+1. Скопируйте `.env.example` в `.env`:
+   ```
+   copy .env.example .env
+   ```
+
+2. Отредактируйте `.env` файл:
+   ```env
+   DAEMON_ID=daemon-1
+   DAEMON_NAME=Main Server
+   DAEMON_PORT=24444
+   DAEMON_KEY=your-secret-key-here
+   SERVERS_DIR=./servers
+   ```
+
+   - `DAEMON_ID` - уникальный ID демона
+   - `DAEMON_NAME` - отображаемое имя демона
+   - `DAEMON_PORT` - порт для API (по умолчанию 24444)
+   - `DAEMON_KEY` - секретный ключ для аутентификации
+   - `SERVERS_DIR` - директория для серверов
+
+3. Создайте секретный ключ:
+   ```python
+   import secrets
+   print(secrets.token_urlsafe(32))
+   ```
+
+## Запуск
+
+### Windows
+```
+start.bat
+```
+
+### Linux
+```bash
+python main.py
+```
+
+### Как сервис (Linux)
+
+Создайте файл `/etc/systemd/system/mcpanel-daemon.service`:
+
+```ini
+[Unit]
+Description=MC Panel Daemon
+After=network.target
+
+[Service]
+Type=simple
+User=mcpanel
+WorkingDirectory=/path/to/daemon
+ExecStart=/usr/bin/python3 /path/to/daemon/main.py
+Restart=always
+RestartSec=10
+
+[Install]
+WantedBy=multi-user.target
+```
+
+Запустите сервис:
+```bash
+sudo systemctl enable mcpanel-daemon
+sudo systemctl start mcpanel-daemon
+sudo systemctl status mcpanel-daemon
+```
+
+## Подключение к панели
+
+1. Откройте основную панель управления
+2. Перейдите в раздел "Демоны"
+3. Нажмите "Добавить демон"
+4. Заполните данные:
+   - **Название**: Main Server
+   - **IP адрес**: IP адрес сервера с демоном
+   - **Порт**: 24444 (или ваш порт)
+   - **Ключ демона**: ваш DAEMON_KEY из .env
+5. Нажмите "Добавить"
+
+## API Endpoints
+
+Демон предоставляет следующие API endpoints:
+
+- `GET /` - Информация о демоне
+- `GET /api/status` - Статус демона и системы
+- `GET /api/servers` - Список серверов
+- `POST /api/servers/{name}/start` - Запустить сервер
+- `POST /api/servers/{name}/stop` - Остановить сервер
+- `POST /api/servers/{name}/command` - Отправить команду
+- `GET /api/servers/{name}/stats` - Статистика сервера
+
+## Безопасность
+
+1. **Используйте сильный ключ** - генерируйте случайный ключ длиной минимум 32 символа
+2. **Настройте файрвол** - разрешите доступ к порту демона только с IP основной панели
+3. **Используйте HTTPS** - в продакшене используйте reverse proxy (nginx) с SSL
+4. **Регулярно обновляйте** - следите за обновлениями и устанавливайте их
+
+## Пример конфигурации nginx (с SSL)
+
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name daemon.example.com;
+
+    ssl_certificate /path/to/cert.pem;
+    ssl_certificate_key /path/to/key.pem;
+
+    location / {
+        proxy_pass http://127.0.0.1:24444;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+## Структура директорий
+
+```
+daemon/
+├── main.py              # Основной файл демона
+├── requirements.txt     # Зависимости Python
+├── .env                 # Конфигурация (создайте из .env.example)
+├── .env.example         # Пример конфигурации
+├── install.bat          # Скрипт установки (Windows)
+├── start.bat            # Скрипт запуска (Windows)
+├── README.md            # Эта документация
+└── servers/             # Директория с серверами
+    ├── server1/
+    │   ├── config.json
+    │   └── ...
+    └── server2/
+        ├── config.json
+        └── ...
+```
+
+## Формат config.json для сервера
+
+```json
+{
+  "name": "server1",
+  "displayName": "My Minecraft Server",
+  "startCommand": "java -Xmx2G -Xms1G -jar server.jar nogui"
+}
+```
+
+## Troubleshooting
+
+### Демон не запускается
+- Проверьте, что Python установлен: `python --version`
+- Проверьте, что все зависимости установлены: `pip list`
+- Проверьте логи в консоли
+
+### Панель не может подключиться к демону
+- Проверьте, что демон запущен
+- Проверьте файрвол и порты
+- Проверьте, что ключ в панели совпадает с DAEMON_KEY
+- Проверьте IP адрес и порт
+
+### Сервер не запускается
+- Проверьте startCommand в config.json
+- Проверьте права доступа к файлам
+- Проверьте логи сервера
+
+## Поддержка
+
+Если у вас возникли проблемы, создайте тикет в системе поддержки панели.

daemon/install.bat

@@ -0,0 +1,9 @@
+@echo off
+echo Installing MC Panel Daemon dependencies...
+pip install -r requirements.txt
+echo.
+echo Installation complete!
+echo.
+echo Please configure .env file before starting the daemon
+echo Copy .env.example to .env and edit it
+pause

daemon/main.py

@@ -0,0 +1,307 @@
+"""
+MC Panel Daemon - Удаленный демон для управления серверами
+Устанавливается на отдельные серверы и подключается к основной панели
+"""
+
+import asyncio
+import json
+import os
+import psutil
+import subprocess
+from datetime import datetime
+from pathlib import Path
+from typing import Dict, Optional
+import websockets
+from fastapi import FastAPI, HTTPException, Header
+from fastapi.middleware.cors import CORSMiddleware
+import uvicorn
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = FastAPI(title="MC Panel Daemon")
+
+# CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Конфигурация
+DAEMON_ID = os.getenv("DAEMON_ID", "daemon-1")
+DAEMON_NAME = os.getenv("DAEMON_NAME", "Main Server")
+DAEMON_PORT = int(os.getenv("DAEMON_PORT", "24444"))
+DAEMON_KEY = os.getenv("DAEMON_KEY", "")  # Ключ для аутентификации
+PANEL_URL = os.getenv("PANEL_URL", "")  # URL основной панели для WebSocket
+SERVERS_DIR = Path(os.getenv("SERVERS_DIR", "./servers"))
+
+# Создаем директорию для серверов
+SERVERS_DIR.mkdir(exist_ok=True)
+
+# Хранилище процессов серверов
+server_processes: Dict[str, subprocess.Popen] = {}
+
+
+def verify_key(authorization: str = Header(None)) -> bool:
+    """Проверка API ключа"""
+    if not DAEMON_KEY:
+        return True  # Если ключ не установлен, разрешаем доступ
+    
+    if not authorization:
+        raise HTTPException(status_code=401, detail="Missing authorization header")
+    
+    if authorization != f"Bearer {DAEMON_KEY}":
+        raise HTTPException(status_code=403, detail="Invalid daemon key")
+    
+    return True
+
+
+@app.get("/")
+async def root():
+    """Информация о демоне"""
+    return {
+        "daemon_id": DAEMON_ID,
+        "daemon_name": DAEMON_NAME,
+        "status": "online",
+        "version": "1.0.0"
+    }
+
+
+@app.get("/api/status")
+async def get_status(authorization: str = Header(None)):
+    """Получить статус демона и системы"""
+    # Проверка ключа опциональна для статуса
+    if DAEMON_KEY and authorization:
+        if authorization != f"Bearer {DAEMON_KEY}":
+            raise HTTPException(status_code=403, detail="Invalid daemon key")
+    
+    cpu_percent = psutil.cpu_percent(interval=1)
+    memory = psutil.virtual_memory()
+    disk = psutil.disk_usage('/')
+    
+    return {
+        "daemon_id": DAEMON_ID,
+        "daemon_name": DAEMON_NAME,
+        "status": "online",
+        "system": {
+            "cpu_usage": cpu_percent,
+            "memory_total": memory.total,
+            "memory_used": memory.used,
+            "memory_percent": memory.percent,
+            "disk_total": disk.total,
+            "disk_used": disk.used,
+            "disk_percent": disk.percent
+        },
+        "servers": {
+            "total": len(list(SERVERS_DIR.iterdir())),
+            "running": len(server_processes)
+        },
+        "timestamp": datetime.now().isoformat()
+    }
+
+
+@app.get("/api/servers")
+async def list_servers(authorization: str = Header(None)):
+    """Список всех серверов на этом демоне"""
+    verify_key(authorization)
+    
+    servers = []
+    for server_dir in SERVERS_DIR.iterdir():
+        if server_dir.is_dir():
+            config_file = server_dir / "config.json"
+            if config_file.exists():
+                with open(config_file, 'r', encoding='utf-8') as f:
+                    config = json.load(f)
+                    
+                servers.append({
+                    "name": server_dir.name,
+                    "display_name": config.get("displayName", server_dir.name),
+                    "status": "running" if server_dir.name in server_processes else "stopped",
+                    "daemon_id": DAEMON_ID
+                })
+    
+    return servers
+
+
+@app.post("/api/servers/{server_name}/start")
+async def start_server(server_name: str, authorization: str = Header(None)):
+    """Запустить сервер"""
+    verify_key(authorization)
+    
+    server_dir = SERVERS_DIR / server_name
+    if not server_dir.exists():
+        raise HTTPException(status_code=404, detail="Server not found")
+    
+    if server_name in server_processes:
+        raise HTTPException(status_code=400, detail="Server already running")
+    
+    config_file = server_dir / "config.json"
+    if not config_file.exists():
+        raise HTTPException(status_code=400, detail="Server config not found")
+    
+    with open(config_file, 'r', encoding='utf-8') as f:
+        config = json.load(f)
+    
+    start_command = config.get("startCommand", "")
+    if not start_command:
+        raise HTTPException(status_code=400, detail="Start command not configured")
+    
+    try:
+        # Запускаем процесс
+        process = subprocess.Popen(
+            start_command,
+            shell=True,
+            cwd=str(server_dir),
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+            stdin=subprocess.PIPE
+        )
+        
+        server_processes[server_name] = process
+        
+        return {
+            "success": True,
+            "message": f"Server {server_name} started",
+            "pid": process.pid
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to start server: {str(e)}")
+
+
+@app.post("/api/servers/{server_name}/stop")
+async def stop_server(server_name: str, authorization: str = Header(None)):
+    """Остановить сервер"""
+    verify_key(authorization)
+    
+    if server_name not in server_processes:
+        raise HTTPException(status_code=400, detail="Server not running")
+    
+    try:
+        process = server_processes[server_name]
+        process.terminate()
+        
+        # Ждем завершения процесса
+        try:
+            process.wait(timeout=10)
+        except subprocess.TimeoutExpired:
+            process.kill()
+        
+        del server_processes[server_name]
+        
+        return {
+            "success": True,
+            "message": f"Server {server_name} stopped"
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to stop server: {str(e)}")
+
+
+@app.post("/api/servers/{server_name}/command")
+async def send_command(server_name: str, command: dict, authorization: str = Header(None)):
+    """Отправить команду в консоль сервера"""
+    verify_key(authorization)
+    
+    if server_name not in server_processes:
+        raise HTTPException(status_code=400, detail="Server not running")
+    
+    try:
+        process = server_processes[server_name]
+        cmd = command.get("command", "")
+        
+        if process.stdin:
+            process.stdin.write(f"{cmd}\n".encode())
+            process.stdin.flush()
+        
+        return {
+            "success": True,
+            "message": "Command sent"
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to send command: {str(e)}")
+
+
+@app.get("/api/servers/{server_name}/stats")
+async def get_server_stats(server_name: str, authorization: str = Header(None)):
+    """Получить статистику сервера"""
+    verify_key(authorization)
+    
+    server_dir = SERVERS_DIR / server_name
+    if not server_dir.exists():
+        raise HTTPException(status_code=404, detail="Server not found")
+    
+    is_running = server_name in server_processes
+    cpu = 0
+    memory = 0
+    
+    if is_running:
+        try:
+            process = server_processes[server_name]
+            p = psutil.Process(process.pid)
+            cpu = p.cpu_percent(interval=0.1)
+            memory = p.memory_info().rss / 1024 / 1024  # MB
+        except:
+            pass
+    
+    # Размер директории
+    disk_usage = sum(f.stat().st_size for f in server_dir.rglob('*') if f.is_file()) / 1024 / 1024  # MB
+    
+    return {
+        "status": "running" if is_running else "stopped",
+        "cpu": cpu,
+        "memory": memory,
+        "disk": disk_usage
+    }
+
+
+@app.post("/api/servers/create")
+async def create_server_on_daemon(data: dict, authorization: str = Header(None)):
+    """Создать сервер на этом демоне"""
+    verify_key(authorization)
+    
+    server_name = data.get("name", "").strip()
+    if not server_name:
+        raise HTTPException(status_code=400, detail="Server name is required")
+    
+    server_path = SERVERS_DIR / server_name
+    
+    if server_path.exists():
+        raise HTTPException(status_code=400, detail="Server already exists")
+    
+    try:
+        server_path.mkdir(parents=True)
+        
+        # Сохраняем конфигурацию
+        config = {
+            "name": server_name,
+            "displayName": data.get("displayName", server_name),
+            "startCommand": data.get("startCommand", "java -Xmx2G -jar server.jar nogui"),
+            "owner": data.get("owner", "unknown")
+        }
+        
+        config_file = server_path / "config.json"
+        with open(config_file, 'w', encoding='utf-8') as f:
+            json.dump(config, f, indent=2, ensure_ascii=False)
+        
+        return {"message": "Server created successfully", "name": server_name}
+    except Exception as e:
+        # Если что-то пошло не так, удаляем папку
+        if server_path.exists():
+            import shutil
+            shutil.rmtree(server_path)
+        raise HTTPException(status_code=500, detail=f"Failed to create server: {str(e)}")
+
+
+if __name__ == "__main__":
+    print(f"Starting MC Panel Daemon: {DAEMON_NAME} ({DAEMON_ID})")
+    print(f"Port: {DAEMON_PORT}")
+    print(f"Servers directory: {SERVERS_DIR}")
+    
+    uvicorn.run(
+        app,
+        host="0.0.0.0",
+        port=DAEMON_PORT,
+        log_level="info"
+    )

daemon/requirements.txt

@@ -0,0 +1,5 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+websockets==12.0
+psutil==5.9.6
+python-dotenv==1.0.0

daemon/start.bat

@@ -0,0 +1,4 @@
+@echo off
+echo Starting MC Panel Daemon...
+python main.py
+pause

docker-compose.dev.yml

@@ -0,0 +1,61 @@
+version: '3.8'
+
+services:
+  # Backend для разработки
+  backend-dev:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+      target: production
+    container_name: mc-panel-backend-dev
+    restart: unless-stopped
+    ports:
+      - "8000:8000"
+    environment:
+      - PORT=8000
+      - WORKERS=1
+      - PYTHONPATH=/app
+      - DEBUG=true
+      - LOG_LEVEL=DEBUG
+    volumes:
+      # Монтируем исходный код для hot reload
+      - ./backend:/app
+      - mc_servers_dev:/app/servers
+      - mc_data_dev:/app/data
+      - mc_logs_dev:/app/logs
+    networks:
+      - mc-panel-dev
+    command: ["python", "-m", "uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]
+
+  # Frontend для разработки
+  frontend-dev:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      target: development
+    container_name: mc-panel-frontend-dev
+    restart: unless-stopped
+    ports:
+      - "5173:5173"
+    volumes:
+      # Монтируем исходный код для hot reload
+      - ./frontend:/app
+      - /app/node_modules
+    networks:
+      - mc-panel-dev
+    environment:
+      - VITE_API_URL=http://localhost:8000
+    depends_on:
+      - backend-dev
+
+volumes:
+  mc_servers_dev:
+    driver: local
+  mc_data_dev:
+    driver: local
+  mc_logs_dev:
+    driver: local
+
+networks:
+  mc-panel-dev:
+    driver: bridge

docker-compose.separate.local.yml

@@ -0,0 +1,65 @@
+version: '3.8'
+
+services:
+  # Backend сервис (локальная сборка)
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+      target: production
+    container_name: mc-panel-backend-local
+    restart: unless-stopped
+    ports:
+      - "8000:8000"
+    environment:
+      - PORT=8000
+      - WORKERS=2
+      - PYTHONPATH=/app
+      - DEBUG=false
+    env_file:
+      - ./backend/.env
+    volumes:
+      - mc_servers_local:/app/servers
+      - mc_data_local:/app/data
+      - mc_logs_local:/app/logs
+    networks:
+      - mc-panel-local
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 60s
+
+  # Frontend сервис (локальная сборка)
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      target: production
+    container_name: mc-panel-frontend-local
+    restart: unless-stopped
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+    networks:
+      - mc-panel-local
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 30s
+
+volumes:
+  mc_servers_local:
+    driver: local
+  mc_data_local:
+    driver: local
+  mc_logs_local:
+    driver: local
+
+networks:
+  mc-panel-local:
+    driver: bridge

docker-compose.yml

@@ -1,65 +1,59 @@
 version: '3.8'
 
 services:
-  # MC Panel приложение
+  # Backend сервис
-  mc-panel:
+  backend:
-    build:
+    image: registry.nevetime.ru/mc-panel-backend:${IMAGE_TAG:-latest}
-      context: .
+    container_name: mc-panel-backend
-      dockerfile: Dockerfile
-    container_name: mc-panel
     restart: unless-stopped
     ports:
       - "8000:8000"
     environment:
-      # ZITADEL OpenID Connect
+      - PORT=8000
-      - ZITADEL_ISSUER=${ZITADEL_ISSUER}
+      - WORKERS=2
-      - ZITADEL_CLIENT_ID=${ZITADEL_CLIENT_ID}
+      - PYTHONPATH=/app
-      - ZITADEL_CLIENT_SECRET=${ZITADEL_CLIENT_SECRET}
+      - DEBUG=false
-      
+    env_file:
-      # URLs
+      - ./backend/.env
-      - BASE_URL=${BASE_URL:-http://localhost:8000}
-      - FRONTEND_URL=${FRONTEND_URL:-http://localhost:3000}
-      
-      # Security
-      - SECRET_KEY=${SECRET_KEY:-change-this-in-production}
-      
-      # Python
-      - PYTHONUNBUFFERED=1
     volumes:
-      # Персистентное хранилище для серверов
+      - mc_servers:/app/servers
-      - ./data/servers:/app/backend/servers
+      - mc_data:/app/data
-      # Персистентное хранилище для пользователей и тикетов
+      - mc_logs:/app/logs
-      - ./data/users.json:/app/backend/users.json
-      - ./data/tickets.json:/app/backend/tickets.json
     networks:
       - mc-panel-network
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:8000/api/auth/oidc/providers"]
+      test: ["CMD", "curl", "-f", "http://localhost:8000/health"]
       interval: 30s
       timeout: 10s
       retries: 3
-      start_period: 40s
+      start_period: 60s
 
-  # Nginx reverse proxy (опционально)
+  # Frontend сервис
-  nginx:
+  frontend:
-    image: nginx:alpine
+    image: registry.nevetime.ru/mc-panel-frontend:${IMAGE_TAG:-latest}
-    container_name: mc-panel-nginx
+    container_name: mc-panel-frontend
     restart: unless-stopped
     ports:
       - "80:80"
-      - "443:443"
-    volumes:
-      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
-      - ./nginx/ssl:/etc/nginx/ssl:ro
     depends_on:
-      - mc-panel
+      - backend
     networks:
       - mc-panel-network
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 30s
+
+volumes:
+  mc_servers:
+    driver: local
+  mc_data:
+    driver: local
+  mc_logs:
+    driver: local
 
 networks:
   mc-panel-network:
     driver: bridge
-
-volumes:
-  servers-data:
-  users-data:

frontend/Dockerfile

@@ -0,0 +1,207 @@
+# ================================
+# MC Panel Frontend - Multi-Stage Dockerfile
+# ================================
+
+# Stage 1: Build Stage
+FROM node:20-alpine AS builder
+
+# Метаданные
+LABEL maintainer="MC Panel Team" \
+      version="2.0.0" \
+      description="MC Panel Frontend - React Build Stage" \
+      component="frontend"
+
+# Устанавливаем зависимости для сборки
+RUN apk add --no-cache git python3 make g++
+
+# Создаем рабочую директорию
+WORKDIR /app
+
+# Копируем package files для кеширования зависимостей
+COPY package*.json ./
+
+# Устанавливаем зависимости
+RUN npm ci --silent
+
+# Копируем исходный код
+COPY . ./
+
+# Собираем приложение для production
+RUN npm run build
+
+# Проверяем размер сборки
+RUN du -sh dist/ && \
+    echo "Build completed successfully"
+
+# ================================
+# Stage 2: Production Stage (Nginx)
+# ================================
+FROM nginx:alpine AS production
+
+# Метаданные
+LABEL maintainer="MC Panel Team" \
+      version="2.0.0" \
+      description="MC Panel Frontend - Nginx Production Server" \
+      component="frontend"
+
+# Устанавливаем дополнительные пакеты
+RUN apk add --no-cache curl tini
+
+# Создаем пользователя nginx если его нет
+RUN addgroup -g 1000 -S mcpanel && \
+    adduser -u 1000 -D -S -G mcpanel mcpanel
+
+# Копируем собранное приложение из builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Создаем кастомную конфигурацию Nginx
+RUN cat > /etc/nginx/conf.d/default.conf << 'EOF'
+server {
+    listen 80;
+    listen [::]:80;
+    server_name _;
+    
+    root /usr/share/nginx/html;
+    index index.html;
+    
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
+    
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "no-referrer-when-downgrade" always;
+    
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+    
+    # Handle React Router (SPA)
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    # API proxy (если нужно)
+    location /api/ {
+        proxy_pass http://backend:8000/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+    
+    # WebSocket proxy (если нужно)
+    location /ws/ {
+        proxy_pass http://backend:8000/ws/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+    
+    # Health check endpoint
+    location /health {
+        access_log off;
+        return 200 "healthy\n";
+        add_header Content-Type text/plain;
+    }
+}
+EOF
+
+# Создаем кастомную конфигурацию nginx.conf
+RUN cat > /etc/nginx/nginx.conf << 'EOF'
+user nginx;
+worker_processes auto;
+error_log /var/log/nginx/error.log notice;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections 1024;
+    use epoll;
+    multi_accept on;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+    
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+    
+    access_log /var/log/nginx/access.log main;
+    
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+    client_max_body_size 100M;
+    
+    include /etc/nginx/conf.d/*.conf;
+}
+EOF
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
+    CMD curl -f http://localhost/health || exit 1
+
+# Expose порт
+EXPOSE 80
+
+# Используем tini как init процесс
+ENTRYPOINT ["/sbin/tini", "--"]
+
+# Команда запуска
+CMD ["nginx", "-g", "daemon off;"]
+
+# ================================
+# Stage 3: Development Stage
+# ================================
+FROM node:20-alpine AS development
+
+# Метаданные
+LABEL maintainer="MC Panel Team" \
+      version="2.0.0" \
+      description="MC Panel Frontend - Development Server" \
+      component="frontend"
+
+# Устанавливаем зависимости для разработки
+RUN apk add --no-cache git python3 make g++
+
+# Создаем пользователя для разработки
+RUN addgroup -g 1000 -S mcpanel && \
+    adduser -u 1000 -D -S -G mcpanel mcpanel
+
+# Создаем рабочую директорию
+WORKDIR /app
+
+# Меняем владельца директории
+RUN chown mcpanel:mcpanel /app
+
+# Переключаемся на пользователя
+USER mcpanel
+
+# Копируем package files
+COPY --chown=mcpanel:mcpanel package*.json ./
+
+# Устанавливаем зависимости
+RUN npm ci
+
+# Копируем исходный код
+COPY --chown=mcpanel:mcpanel . ./
+
+# Expose порт для dev сервера
+EXPOSE 5173
+
+# Команда для разработки
+CMD ["npm", "run", "dev"]

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';
@@ -9,13 +13,12 @@ import Users from './components/Users';
 import UserManagement from './components/UserManagement';
 import Tickets from './components/Tickets';
 import Profile from './components/Profile';
+import Daemons from './components/Daemons';
 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 +27,23 @@ 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 [showDaemons, setShowDaemons] = 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 +95,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 +104,483 @@ 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}" успешно запущен`);
-      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={`lg:hidden ${currentTheme.hover} p-2 rounded-lg transition`}
+              className="btn-icon"
             >
               {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
             </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>
+          {/* Navigation */}
-                  <p className={`text-xs ${currentTheme.textSecondary}`}>Управление серверами</p>
+          <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
-                </div>
-              </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} />
             <button
               onClick={() => {
-                  setShowProfile(true);
+                setCurrentView('dashboard');
-                  setViewingUsername(null);
+                setSelectedServer(null);
               }}
-                className={`${currentTheme.accent} ${currentTheme.accentHover} px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
+              className={currentView === 'dashboard' ? 'sidebar-item-active w-full' : 'sidebar-item w-full'}
             >
-                <UserCircle className="w-4 h-4" />
+              <Home className="w-5 h-5 flex-shrink-0" />
-                <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)]">
+            {sidebarOpen && (
-        {/* Sidebar */}
+              <div className="pt-4 pb-2">
-        <aside className={`${sidebarOpen ? 'w-80' : 'w-0'} ${currentTheme.secondary} ${currentTheme.border} border-r transition-all duration-300 overflow-hidden`}>
+                <div className="flex items-center justify-between px-4 mb-2">
-          <div className="p-4 h-full flex flex-col">
+                  <span className="text-xs font-semibold text-gray-500 uppercase">Серверы</span>
-            <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`}
+                    className="p-1 rounded hover:bg-dark-700 text-primary-500"
-                title="Создать сервер"
                   >
                     <Plus className="w-4 h-4" />
                   </button>
                 </div>
+              </div>
+            )}
 
-            <div className="flex-1 overflow-y-auto space-y-2">
             {servers.map((server) => (
-                <div
+              <button
                 key={server.name}
-                  className={`p-4 rounded-lg cursor-pointer transition-all duration-200 ${
+                onClick={() => {
-                    selectedServer === server.name
+                  setSelectedServer(server);
-                      ? `${currentTheme.accent} text-white shadow-lg`
+                  setCurrentView('server');
-                      : `${currentTheme.card} ${currentTheme.hover}`
+                  setActiveTab('console');
-                  }`}
-                  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"
+                className={selectedServer?.name === server.name ? 'sidebar-item-active w-full' : 'sidebar-item w-full'}
               >
-                        <Play className="w-3.5 h-3.5" />
+                <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
-                        Запустить
+                  server.status === 'running' ? 'bg-green-500 shadow-glow' : 'bg-gray-600'
-                      </button>
+                }`} />
-                    ) : (
+                {sidebarOpen && (
-                      <button
+                  <div className="flex-1 text-left truncate">
-                        onClick={(e) => {
+                    <div className="text-sm font-medium">{server.displayName}</div>
-                          e.stopPropagation();
+                    <div className="text-xs text-gray-500">{server.status === 'running' ? 'Запущен' : 'Остановлен'}</div>
-                          stopServer(server.name);
+                  </div>
-                        }}
-                        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>
-                </div>
             ))}
-              {servers.length === 0 && (
+
-                <div className={`text-center py-12 ${currentTheme.textSecondary}`}>
+            {sidebarOpen && servers.length === 0 && (
-                  <Server className="w-12 h-12 mx-auto mb-3 opacity-50" />
+              <div className="text-center py-8 text-gray-500 text-sm">
-                  <p className="text-sm">Нет серверов</p>
+                <Server className="w-12 h-12 mx-auto mb-2 opacity-50" />
-                  <p className="text-xs mt-1">Создайте первый сервер</p>
+                <p>Нет серверов</p>
+                <button
+                  onClick={() => setShowCreateModal(true)}
+                  className="btn-primary mt-2 text-xs"
+                >
+                  Создать сервер
+                </button>
               </div>
             )}
+          </nav>
+
+          {/* Bottom section */}
+          <div className="p-4 border-t border-dark-700 space-y-2">
+            {(user?.role === 'owner' || user?.role === 'admin') && (
+              <>
+                <button
+                  onClick={() => {
+                    setShowUserManagement(true);
+                    setCurrentView('management');
+                  }}
+                  className="sidebar-item w-full"
+                >
+                  <Shield className="w-5 h-5 flex-shrink-0 text-yellow-500" />
+                  {sidebarOpen && <span>Управление</span>}
+                </button>
+                
+                <button
+                  onClick={() => {
+                    setShowDaemons(true);
+                    setCurrentView('daemons');
+                  }}
+                  className="sidebar-item w-full"
+                >
+                  <Server className="w-5 h-5 flex-shrink-0 text-blue-500" />
+                  {sidebarOpen && <span>Демоны</span>}
+                </button>
+              </>
+            )}
+
+            <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>
               </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 === 'daemons' && 'Управление демонами'}
-                  </span>
+                {currentView === 'tickets' && 'Тикеты поддержки'}
-                  <span className={`px-2 py-1 rounded text-xs font-medium ${
+                {currentView === 'profile' && 'Профиль'}
-                    servers.find(s => s.name === selectedServer)?.status === 'running'
+              </h1>
-                      ? 'bg-green-600 text-white'
+              {currentView === 'server' && selectedServer && (
-                      : 'bg-gray-600 text-white'
+                <p className="text-sm text-gray-500">
-                  }`}>
+                  {selectedServer.name} • {selectedServer.status === 'running' ? 'Запущен' : 'Остановлен'}
-                    {servers.find(s => s.name === selectedServer)?.status === 'running' ? 'Запущен' : 'Остановлен'}
+                </p>
-                  </span>
+              )}
             </div>
+
+            {currentView === 'server' && selectedServer && (
               <div className="flex items-center gap-2">
-                  {servers.find(s => s.name === selectedServer)?.status === 'stopped' ? (
+                {selectedServer.status === 'stopped' ? (
                   <button
-                      onClick={() => startServer(selectedServer)}
+                    onClick={() => handleServerAction(selectedServer.name, 'start')}
-                      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-success flex items-center gap-2"
                   >
                     <Play className="w-4 h-4" />
                     Запустить
                   </button>
                 ) : (
                   <button
-                      onClick={() => stopServer(selectedServer)}
+                    onClick={() => handleServerAction(selectedServer.name, 'stop')}
-                      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"
+                    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>
 
-              {/* Tabs */}
+                  <div className="stat-card">
-              <div className={`${currentTheme.secondary} ${currentTheme.border} border-b flex overflow-x-auto`}>
+                    <div className="stat-icon bg-green-600/20 text-green-400">
-                {[
+                      <Activity className="w-6 h-6" />
-                  { id: 'console', icon: Terminal, label: 'Консоль' },
+                    </div>
-                  { id: 'files', icon: FolderOpen, label: 'Файлы' },
+                    <div>
-                  { id: 'stats', icon: HardDrive, label: 'Статистика' },
+                      <div className="text-2xl font-bold text-green-400">
-                  { id: 'settings', icon: Settings, label: 'Настройки' },
+                        {servers.filter(s => s.status === 'running').length}
-                ].map((tab) => (
+                      </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>
+                  <div className="flex items-center justify-between mb-4">
+                    <h2 className="text-xl font-bold">Ваши серверы</h2>
                     <button
-                    key={tab.id}
+                      onClick={() => setShowCreateModal(true)}
-                    onClick={() => setActiveTab(tab.id)}
+                      className="btn-primary flex items-center gap-2"
-                    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" />
+                      <Plus className="w-4 h-4" />
-                    <span className="font-medium">{tab.label}</span>
+                      Создать сервер
                     </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>
 
-              {/* Content */}
+                  {servers.length === 0 && (
-              <div className="flex-1 overflow-hidden">
+                    <div className="card p-12 text-center">
-                <ErrorBoundary>
+                      <Server className="w-16 h-16 mx-auto mb-4 text-gray-600" />
-                  {activeTab === 'console' && <Console serverName={selectedServer} token={token} theme={currentTheme} />}
+                      <h3 className="text-xl font-semibold mb-2">Нет серверов</h3>
-                  {activeTab === 'files' && <FileManager serverName={selectedServer} token={token} theme={currentTheme} />}
+                      <p className="text-gray-500 mb-4">Создайте свой первый сервер</p>
-                  {activeTab === 'stats' && <Stats serverName={selectedServer} token={token} theme={currentTheme} />}
+                      <button
-                  {activeTab === 'settings' && (
+                        onClick={() => setShowCreateModal(true)}
-                    <ServerSettings 
+                        className="btn-primary"
-                      serverName={selectedServer}
+                      >
-                      token={token}
+                        <Plus className="w-4 h-4 inline mr-2" />
-                      user={user}
+                        Создать сервер
-                      theme={currentTheme}
+                      </button>
-                      onDeleted={handleServerDeleted}
+                    </div>
-                    />
                   )}
-                </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>
             )}
-        </main>
+
+            {currentView === 'server' && selectedServer && (
+              <div className="space-y-4 animate-fade-in">
+                {/* Tabs */}
+                <div className="card p-2 flex gap-2 overflow-x-auto">
+                  <button
+                    onClick={() => setActiveTab('console')}
+                    className={activeTab === 'console' ? 'tab-active' : 'tab'}
+                  >
+                    <Terminal className="w-4 h-4 inline mr-2" />
+                    Консоль
+                  </button>
+                  <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>
 
+                {/* 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.name}
+                      token={token}
+                      onUpdate={loadServers}
+                    />
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </main>
+
+        {/* Modals */}
         {showCreateModal && (
           <CreateServerModal
             token={token}
-          theme={currentTheme}
             onClose={() => setShowCreateModal(false)}
-          onCreated={loadServers}
+            onSuccess={() => {
+              setShowCreateModal(false);
+              loadServers();
+            }}
           />
         )}
 
         {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>
         )}
+
+        {showDaemons && (
+          <div className="modal-overlay" onClick={() => setShowDaemons(false)}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+              <Daemons token={token} />
             </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/CreateServerModal.jsx

@@ -1,16 +1,36 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
-import { X } from 'lucide-react';
+import { X, Server } from 'lucide-react';
 import axios from 'axios';
 import { API_URL } from '../config';
 import { notify } from './NotificationSystem';
 
-export default function CreateServerModal({ token, theme, onClose, onCreated }) {
+export default function CreateServerModal({ token, onClose, onSuccess }) {
   const [formData, setFormData] = useState({
     name: '',
     displayName: '',
-    startCommand: 'java -Xmx2G -Xms1G -jar server.jar nogui'
+    startCommand: 'java -Xmx2G -Xms1G -jar server.jar nogui',
+    daemonId: 'local' // По умолчанию локальный
   });
   const [loading, setLoading] = useState(false);
+  const [daemons, setDaemons] = useState([]);
+  const [loadingDaemons, setLoadingDaemons] = useState(true);
+
+  useEffect(() => {
+    loadDaemons();
+  }, []);
+
+  const loadDaemons = async () => {
+    try {
+      const { data } = await axios.get(`${API_URL}/api/daemons`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setDaemons(data.filter(d => d.status === 'online')); // Только онлайн демоны
+    } catch (error) {
+      console.error('Ошибка загрузки демонов:', error);
+    } finally {
+      setLoadingDaemons(false);
+    }
+  };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -23,11 +43,10 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
         { headers: { Authorization: `Bearer ${token}` } }
       );
       notify('success', 'Сервер создан', `Сервер "${formData.displayName}" успешно создан`);
-      onCreated();
+      if (onSuccess) onSuccess();
       onClose();
     } catch (error) {
       notify('error', 'Ошибка создания', error.response?.data?.detail || 'Не удалось создать сервер');
-      alert(error.response?.data?.detail || 'Ошибка создания сервера');
     } finally {
       setLoading(false);
     }
@@ -35,12 +54,12 @@ export default function CreateServerModal({ 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>
@@ -48,7 +67,34 @@ export default function CreateServerModal({ 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>
+            {loadingDaemons ? (
+              <div className="input text-gray-400">Загрузка демонов...</div>
+            ) : (
+              <select
+                value={formData.daemonId}
+                onChange={(e) => setFormData({ ...formData, daemonId: e.target.value })}
+                className="w-full bg-dark-700 border border-gray-600 rounded-xl px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+              >
+                <option value="local">Локальный (эта машина)</option>
+                {daemons.map((daemon) => (
+                  <option key={daemon.id} value={daemon.id}>
+                    {daemon.name} ({daemon.address}:{daemon.port})
+                  </option>
+                ))}
+              </select>
+            )}
+            <p className="text-xs text-gray-400 mt-1">
+              {formData.daemonId === 'local' 
+                ? 'Сервер будет создан на этой машине' 
+                : 'Сервер будет создан на удаленном демоне'}
+            </p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2 text-white">
               Имя папки (только латиница, цифры, _ и -)
             </label>
             <input
@@ -56,13 +102,13 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
               required
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: 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="my_server"
             />
           </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>
             <input
@@ -70,13 +116,13 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
               required
               value={formData.displayName}
               onChange={(e) => setFormData({ ...formData, displayName: 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>
             <input
@@ -84,7 +130,7 @@ export default function CreateServerModal({ token, theme, onClose, onCreated })
               required
               value={formData.startCommand}
               onChange={(e) => setFormData({ ...formData, startCommand: 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"
             />
           </div>
 
@@ -92,14 +138,14 @@ export default function CreateServerModal({ 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/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/Daemons.jsx

@@ -0,0 +1,382 @@
+import { useState, useEffect } from 'react';
+import { Server, Plus, Trash2, Edit, RefreshCw, CheckCircle, XCircle, Activity } from 'lucide-react';
+import axios from 'axios';
+import { API_URL } from '../config';
+import { notify } from './NotificationSystem';
+
+export default function Daemons({ token }) {
+  const [daemons, setDaemons] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [editingDaemon, setEditingDaemon] = useState(null);
+
+  const [formData, setFormData] = useState({
+    name: '',
+    address: '',
+    port: 24444,
+    key: '',
+    remarks: ''
+  });
+
+  useEffect(() => {
+    loadDaemons();
+    const interval = setInterval(loadDaemons, 10000); // Обновляем каждые 10 секунд
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadDaemons = async () => {
+    try {
+      const { data } = await axios.get(`${API_URL}/api/daemons`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setDaemons(data);
+      setLoading(false);
+    } catch (error) {
+      console.error('Ошибка загрузки демонов:', error);
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      if (editingDaemon) {
+        await axios.put(
+          `${API_URL}/api/daemons/${editingDaemon.id}`,
+          formData,
+          { headers: { Authorization: `Bearer ${token}` } }
+        );
+        notify('success', 'Демон обновлен', 'Демон успешно обновлен');
+      } else {
+        await axios.post(
+          `${API_URL}/api/daemons`,
+          formData,
+          { headers: { Authorization: `Bearer ${token}` } }
+        );
+        notify('success', 'Демон добавлен', 'Демон успешно добавлен');
+      }
+
+      setShowAddModal(false);
+      setEditingDaemon(null);
+      setFormData({ name: '', address: '', port: 24444, key: '', remarks: '' });
+      loadDaemons();
+    } catch (error) {
+      notify('error', 'Ошибка', error.response?.data?.detail || 'Не удалось сохранить демон');
+    }
+  };
+
+  const handleDelete = async (daemonId) => {
+    if (!confirm('Вы уверены, что хотите удалить этот демон?')) return;
+
+    try {
+      await axios.delete(`${API_URL}/api/daemons/${daemonId}`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      notify('success', 'Демон удален', 'Демон успешно удален');
+      loadDaemons();
+    } catch (error) {
+      notify('error', 'Ошибка удаления', error.response?.data?.detail || 'Не удалось удалить демон');
+    }
+  };
+
+  const handleEdit = (daemon) => {
+    setEditingDaemon(daemon);
+    setFormData({
+      name: daemon.name,
+      address: daemon.address,
+      port: daemon.port,
+      key: daemon.key,
+      remarks: daemon.remarks || ''
+    });
+    setShowAddModal(true);
+  };
+
+  const formatBytes = (bytes) => {
+    if (!bytes) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-gray-400">Загрузка демонов...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <Server className="w-8 h-8 text-blue-400" />
+          <div>
+            <h2 className="text-2xl font-bold text-white">Демоны</h2>
+            <p className="text-gray-400">Управление удаленными серверами</p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={loadDaemons}
+            className="btn-secondary flex items-center gap-2"
+          >
+            <RefreshCw className="w-4 h-4" />
+            Обновить
+          </button>
+          <button
+            onClick={() => {
+              setEditingDaemon(null);
+              setFormData({ name: '', address: '', port: 24444, key: '', remarks: '' });
+              setShowAddModal(true);
+            }}
+            className="btn-primary flex items-center gap-2"
+          >
+            <Plus className="w-4 h-4" />
+            Добавить демон
+          </button>
+        </div>
+      </div>
+
+      {daemons.length === 0 ? (
+        <div className="card p-12 text-center">
+          <Server 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 text-gray-400 mb-4">
+            Добавьте первый демон для управления удаленными серверами
+          </p>
+          <button
+            onClick={() => setShowAddModal(true)}
+            className="btn-primary"
+          >
+            Добавить демон
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {daemons.map((daemon) => (
+            <div key={daemon.id} className="card p-6">
+              <div className="flex items-start justify-between mb-4">
+                <div className="flex items-center gap-4">
+                  <div className={`p-3 rounded-xl ${daemon.status === 'online' ? 'bg-green-500/20' : 'bg-red-500/20'}`}>
+                    <Server className={`w-6 h-6 ${daemon.status === 'online' ? 'text-green-400' : 'text-red-400'}`} />
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <h3 className="text-lg font-semibold text-white">{daemon.name}</h3>
+                      {daemon.status === 'online' ? (
+                        <span className="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded flex items-center gap-1">
+                          <CheckCircle className="w-3 h-3" />
+                          Онлайн
+                        </span>
+                      ) : (
+                        <span className="px-2 py-1 bg-red-500/20 text-red-400 text-xs rounded flex items-center gap-1">
+                          <XCircle className="w-3 h-3" />
+                          Оффлайн
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-400 mt-1">
+                      {daemon.address}:{daemon.port}
+                    </p>
+                    {daemon.remarks && (
+                      <p className="text-sm text-gray-500 mt-1">{daemon.remarks}</p>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => handleEdit(daemon)}
+                    className="p-2 bg-dark-700 hover:bg-dark-600 rounded transition"
+                    title="Редактировать"
+                  >
+                    <Edit className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(daemon.id)}
+                    className="p-2 bg-dark-700 hover:bg-dark-600 rounded text-red-400 transition"
+                    title="Удалить"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+
+              {daemon.status === 'online' && daemon.system && (
+                <div className="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-gray-700">
+                  <div>
+                    <div className="flex items-center gap-2 mb-2">
+                      <Activity className="w-4 h-4 text-blue-400" />
+                      <span className="text-sm text-gray-400">CPU</span>
+                    </div>
+                    <div className="text-xl font-bold text-white">{daemon.system.cpu_usage?.toFixed(1)}%</div>
+                    <div className="w-full bg-dark-700 rounded-full h-2 mt-2">
+                      <div
+                        className="bg-blue-500 h-2 rounded-full transition-all"
+                        style={{ width: `${Math.min(daemon.system.cpu_usage || 0, 100)}%` }}
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="flex items-center gap-2 mb-2">
+                      <Activity className="w-4 h-4 text-green-400" />
+                      <span className="text-sm text-gray-400">ОЗУ</span>
+                    </div>
+                    <div className="text-xl font-bold text-white">{daemon.system.memory_percent?.toFixed(1)}%</div>
+                    <div className="text-xs text-gray-500">
+                      {formatBytes(daemon.system.memory_used)} / {formatBytes(daemon.system.memory_total)}
+                    </div>
+                    <div className="w-full bg-dark-700 rounded-full h-2 mt-2">
+                      <div
+                        className="bg-green-500 h-2 rounded-full transition-all"
+                        style={{ width: `${Math.min(daemon.system.memory_percent || 0, 100)}%` }}
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="flex items-center gap-2 mb-2">
+                      <Activity className="w-4 h-4 text-purple-400" />
+                      <span className="text-sm text-gray-400">Диск</span>
+                    </div>
+                    <div className="text-xl font-bold text-white">{daemon.system.disk_percent?.toFixed(1)}%</div>
+                    <div className="text-xs text-gray-500">
+                      {formatBytes(daemon.system.disk_used)} / {formatBytes(daemon.system.disk_total)}
+                    </div>
+                    <div className="w-full bg-dark-700 rounded-full h-2 mt-2">
+                      <div
+                        className="bg-purple-500 h-2 rounded-full transition-all"
+                        style={{ width: `${Math.min(daemon.system.disk_percent || 0, 100)}%` }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {daemon.status === 'online' && daemon.servers && (
+                <div className="mt-4 pt-4 border-t border-gray-700">
+                  <div className="flex items-center gap-2 text-sm text-gray-400">
+                    <Server className="w-4 h-4" />
+                    <span>Серверов: {daemon.servers.total || 0}</span>
+                    <span className="text-gray-600">•</span>
+                    <span className="text-green-400">Запущено: {daemon.servers.running || 0}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Модальное окно добавления/редактирования */}
+      {showAddModal && (
+        <div className="modal-overlay" onClick={() => setShowAddModal(false)}>
+          <div className="modal-content max-w-2xl" onClick={(e) => e.stopPropagation()}>
+            <h2 className="text-xl font-bold text-white mb-6">
+              {editingDaemon ? 'Редактировать демон' : 'Добавить демон'}
+            </h2>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-2 text-white">
+                  Название
+                </label>
+                <input
+                  type="text"
+                  required
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="input"
+                  placeholder="Main Server"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium mb-2 text-white">
+                    IP адрес
+                  </label>
+                  <input
+                    type="text"
+                    required
+                    value={formData.address}
+                    onChange={(e) => setFormData({ ...formData, address: e.target.value })}
+                    className="input"
+                    placeholder="192.168.1.100"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium mb-2 text-white">
+                    Порт
+                  </label>
+                  <input
+                    type="number"
+                    required
+                    value={formData.port}
+                    onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) })}
+                    className="input"
+                    placeholder="24444"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2 text-white">
+                  Ключ демона
+                </label>
+                <input
+                  type="text"
+                  required
+                  value={formData.key}
+                  onChange={(e) => setFormData({ ...formData, key: e.target.value })}
+                  className="input"
+                  placeholder="your-secret-key"
+                />
+                <p className="text-xs text-gray-400 mt-1">
+                  Ключ должен совпадать с DAEMON_KEY в .env файле демона
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2 text-white">
+                  Примечания (необязательно)
+                </label>
+                <textarea
+                  value={formData.remarks}
+                  onChange={(e) => setFormData({ ...formData, remarks: e.target.value })}
+                  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"
+                  rows={3}
+                  placeholder="Дополнительная информация о демоне"
+                />
+              </div>
+
+              <div className="flex gap-2 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowAddModal(false);
+                    setEditingDaemon(null);
+                  }}
+                  className="flex-1 btn-secondary"
+                >
+                  Отмена
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 btn-primary"
+                >
+                  {editingDaemon ? 'Сохранить' : 'Добавить'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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 */
+@layer base {
   * {
-  margin: 0;
+    @apply border-dark-700;
-  padding: 0;
-  box-sizing: border-box;
   }
   
   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;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   }
 
-#root {
+  /* Scrollbar styling */
-  width: 100%;
+  ::-webkit-scrollbar {
-  height: 100vh;
+    @apply w-2 h-2;
   }
 
-/* Анимация для уведомлений */
+  ::-webkit-scrollbar-track {
-@keyframes slide-in-right {
+    @apply bg-dark-850;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-dark-600 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-dark-500;
+  }
+}
+
+@layer components {
+  /* Card styles */
+  .card {
+    @apply bg-dark-800 rounded-lg border border-dark-700 shadow-lg;
+  }
+
+  .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;
+  }
+}
+
+/* Animations */
+@keyframes slideIn {
   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: [],
 }

key.py

@@ -0,0 +1,2 @@
+import secrets
+print(secrets.token_urlsafe(32))

nginx/default.conf

@@ -0,0 +1,97 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    # Логирование
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+
+    # Основные настройки
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    client_max_body_size 100M;
+
+    # Gzip сжатие
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript 
+               application/json application/javascript application/xml+rss 
+               application/atom+xml image/svg+xml;
+
+    # Upstream для backend API
+    upstream mc_panel_api {
+        server mc-panel:8000;
+    }
+
+    server {
+        listen 80;
+        server_name _;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Статические файлы frontend
+        location / {
+            try_files $uri $uri/ /index.html;
+            
+            # Кэширование статических файлов
+            location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+                expires 1y;
+                add_header Cache-Control "public, immutable";
+            }
+        }
+
+        # API запросы к backend
+        location /api/ {
+            proxy_pass http://mc_panel_api;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection 'upgrade';
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_cache_bypass $http_upgrade;
+            
+            # Таймауты
+            proxy_connect_timeout 60s;
+            proxy_send_timeout 60s;
+            proxy_read_timeout 60s;
+        }
+
+        # WebSocket для консоли
+        location /ws/ {
+            proxy_pass http://mc_panel_api;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            
+            # WebSocket таймауты
+            proxy_connect_timeout 7d;
+            proxy_send_timeout 7d;
+            proxy_read_timeout 7d;
+        }
+
+        # Health check
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+
+        # Безопасность
+        location ~ /\. {
+            deny all;
+        }
+    }
+}

servers/sdfsfsf/panel_config.json

@@ -0,0 +1,7 @@
+{
+  "name": "sdfsfsf",
+  "displayName": "sdfsdf",
+  "startCommand": "java -Xmx2G -Xms1G -jar server.jar nogui",
+  "owner": "Leuteg",
+  "daemonId": "local"
+}

servers/sfsf/panel_config.json

@@ -0,0 +1,6 @@
+{
+  "name": "sfsf",
+  "displayName": "sdf",
+  "startCommand": "java -Xmx2G -Xms1G -jar server.jar nogui",
+  "owner": "Leuteg"
+}

users.json

@@ -0,0 +1,38 @@
+{
+  "Root": {
+    "username": "Root",
+    "password": "$2b$12$PAaomoUWn3Ip5ov.S/uYPeTIRiDMq7DbA57ahyYQnw3QHT2zuYMlG",
+    "role": "owner",
+    "servers": [
+      "dfgdfgdfg"
+    ],
+    "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": []
+    }
+  },
+  "Leuteg": {
+    "username": "Leuteg",
+    "password": "$2b$12$EAK2ougYahmHPhdaP/vm5O9RMPgnvtCYb.8Z9HpSqNrVxComaZ68C",
+    "role": "owner",
+    "servers": [
+      "sfsf"
+    ],
+    "permissions": {
+      "servers": true,
+      "tickets": true,
+      "users": false,
+      "files": true
+    }
+  }
+}