Arkon/NeveTimePanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed design and bug fixes
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
arkonsadter
2026-01-16 15:40:14 +06:00
parent e6264efac6
commit fbfddf3c7a
16 changed files with 920 additions and 844 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

59
backend/tickets.json
View File

@@ -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"
}
]
}
}

76
backend/users.json
View File

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

886
frontend/src/App.jsx
View File

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

16
frontend/src/components/Console.jsx
View File

@@ -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 для отправки, используйте стрелки для навигации между предыдущими командами"
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`}
placeholder="Введите команду..."
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" />
Отправить

20
frontend/src/components/CreateTicketModal.jsx
View File

@@ -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>

16
frontend/src/components/FileEditorModal.jsx
View File

@@ -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={`flex items-center justify-between p-4 ${theme.border} border-b`}>
<h2 className={`text-xl font-bold ${theme.text}`}>Редактирование: {file.name}</h2>
<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 border-b border-gray-700">
<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>

74
frontend/src/components/FileManager.jsx
View File

@@ -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`}>
<h2 className={`text-xl font-semibold mb-4 ${theme.text}`}>Управление файлами</h2>
<div className="border-b border-gray-700 p-4">
<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 ${theme.textSecondary} font-medium text-sm`}>Размер</th>
<th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Последнее изменение</th>
<th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Разрешение</th>
<th className={`text-right 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 text-gray-400 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 text-gray-400 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 ${theme.textSecondary} text-sm`}>-</td>
<td className={`p-4 ${theme.textSecondary} text-sm`}>-</td>
<td className="p-4 text-gray-400 text-sm">{formatSize(file.size)}</td>
<td className="p-4 text-gray-400 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>

14
frontend/src/components/FileViewerModal.jsx
View File

@@ -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={`flex items-center justify-between p-4 ${theme.border} border-b`}>
<h2 className={`text-xl font-bold ${theme.text}`}>{file.name}</h2>
<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 border-b border-gray-700">
<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}`}>
<pre className={`text-sm ${theme.consoleText || theme.text} font-mono whitespace-pre-wrap`}>
<div className="flex-1 overflow-auto p-4 bg-dark-900">
<pre className="text-sm text-gray-100 font-mono whitespace-pre-wrap">
{file.content}
</pre>
</div>

189
frontend/src/components/Profile.jsx
View File

@@ -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':
return 'Администратор';
case 'support':
return 'Тех. поддержка';
case 'banned':
return 'Забанен';
default:
return 'Пользователь';
case 'owner': return 'Владелец';
case 'admin': return 'Администратор';
case 'support': return 'Тех. поддержка';
case 'banned': return 'Забанен';
default: return 'Пользователь';
}
};
const getRoleColor = (role) => {
switch (role) {
case 'admin':
return 'bg-blue-500/20 text-blue-500 border-blue-500/50';
case 'support':
return 'bg-purple-500/20 text-purple-500 border-purple-500/50';
case 'banned':
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';
case 'owner': return 'bg-yellow-500/20 text-yellow-500 border-yellow-500/50';
case 'admin': return 'bg-blue-500/20 text-blue-500 border-blue-500/50';
case 'support': return 'bg-purple-500/20 text-purple-500 border-purple-500/50';
case 'banned': 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'
? `${theme.accent} text-white`
: `${theme.hover}`
activeTab === 'overview' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
}`}
>
<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'
? `${theme.accent} text-white`
: `${theme.hover}`
activeTab === 'username' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
}`}
>
<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'
? `${theme.accent} text-white`
: `${theme.hover}`
activeTab === 'password' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
}`}
>
<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={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
<div className="card 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={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
<div className="card 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={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
<div className="card 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={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
<div className="card 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
key={server.name}
className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}
>
<div key={server.name} className="bg-dark-700 border border-gray-700 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>
<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`}
/>
<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" />
</div>
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
Новое имя пользователя
</label>
<label className="block text-sm font-medium mb-2 text-white">Новое имя пользователя</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`}>
Минимум 3 символа
</p>
<p className="text-xs text-gray-400 mt-1">Минимум 3 символа</p>
</div>
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
Подтвердите паролем
</label>
<label className="block text-sm font-medium mb-2 text-white">Подтвердите паролем</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={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
<p className={`text-sm ${theme.textSecondary}`}>
<div className="bg-dark-700 border border-gray-700 rounded-xl p-4">
<p className="text-sm text-gray-400">
⚠️ После изменения имени пользователя вы будете автоматически перелогинены с новым именем.
</p>
</div>
<button
type="submit"
disabled={usernameLoading}
className={`w-full ${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl font-medium text-white transition disabled:opacity-50`}
>
<button type="submit" disabled={usernameLoading} className="btn-primary w-full 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>
<label className="block text-sm font-medium mb-2 text-white">Текущий пароль</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>
<label className="block text-sm font-medium mb-2 text-white">Новый пароль</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`}>
Минимум 6 символов
</p>
<p className="text-xs text-gray-400 mt-1">Минимум 6 символов</p>
</div>
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
Подтвердите новый пароль
</label>
<label className="block text-sm font-medium mb-2 text-white">Подтвердите новый пароль</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={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
<p className={`text-sm ${theme.textSecondary}`}>
<div className="bg-dark-700 border border-gray-700 rounded-xl p-4">
<p className="text-sm text-gray-400">
⚠️ После изменения пароля используйте новый пароль для входа в систему.
</p>
</div>
<button
type="submit"
disabled={passwordLoading}
className={`w-full ${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl font-medium text-white transition disabled:opacity-50`}
>
<button type="submit" disabled={passwordLoading} className="btn-primary w-full disabled:opacity-50">
{passwordLoading ? 'Изменение...' : 'Изменить пароль'}
</button>
</form>

36
frontend/src/components/Stats.jsx
View File

@@ -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}`}>
<h2 className={`text-2xl font-bold mb-6 ${theme.text}`}>Статистика сервера</h2>
<div className="p-8 bg-dark-900">
<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={`w-full ${theme.tertiary} rounded-full h-2`}>
<div className="text-3xl font-bold mb-2 text-white">{stats.cpu}%</div>
<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={`w-full ${theme.tertiary} rounded-full h-2`}>
<div className="text-3xl font-bold mb-2 text-white">{stats.memory} МБ</div>
<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-sm ${theme.textSecondary} mt-2`}>
<div className="text-3xl font-bold mb-2 text-white">{stats.disk} МБ</div>
<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`}>
<h3 className={`text-lg font-semibold mb-4 ${theme.text}`}>Статус</h3>
<div className="mt-8 card p-6">
<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>

34
frontend/src/components/TicketChat.jsx
View File

@@ -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`
: `${theme.card} ${theme.border} border`
? 'bg-primary-600 text-white'
: '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" />
Отправить

38
frontend/src/components/Tickets.jsx
View File

@@ -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`}>
<MessageSquare className={`w-16 h-16 mx-auto mb-4 ${theme.textSecondary} opacity-50`} />
<div className="card p-12 text-center">
<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={theme.text}>{ticket.author}</span>
<span className="text-gray-400">
Автор: <span className="text-white">{ticket.author}</span>
</span>
<span className={theme.textSecondary}>•</span>
<span className={theme.textSecondary}>
Сообщений: <span className={theme.text}>{ticket.messages?.length || 0}</span>
<span className="text-gray-400">•</span>
<span className="text-gray-400">
Сообщений: <span className="text-white">{ticket.messages?.length || 0}</span>
</span>
<span className={theme.textSecondary}>•</span>
<span className={theme.textSecondary}>
<span className="text-gray-400">•</span>
<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}
/>

24
frontend/src/components/UserManagement.jsx
View File

@@ -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 || 'Не удалось удалить пользователя');
}
};

238
frontend/src/index.css
View File

@@ -2,29 +2,191 @@
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* MCSManager Style Global Styles */
@layer base {
* {
@apply border-dark-700;
}
body {
@apply bg-dark-900 text-gray-100 antialiased;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
}
/* Scrollbar styling */
::-webkit-scrollbar {
@apply w-2 h-2;
}
::-webkit-scrollbar-track {
@apply bg-dark-850;
}
::-webkit-scrollbar-thumb {
@apply bg-dark-600 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-dark-500;
}
}
body {
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;
@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;
}
}
#root {
width: 100%;
height: 100vh;
}
/* Анимация для уведомлений */
@keyframes slide-in-right {
/* Animations */
@keyframes slideIn {
from {
transform: translateX(100%);
transform: translateX(-100%);
opacity: 0;
}
to {
@@ -33,6 +195,42 @@ body {
}
}
.animate-slide-in-right {
animation: slide-in-right 0.3s ease-out;
@keyframes fadeIn {
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;
}

39
frontend/tailwind.config.js
View File

@@ -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: [],
}