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