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

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

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

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

@@ -3,7 +3,7 @@ import { Send } from 'lucide-react';
import axios from 'axios';
import { API_URL, WS_URL } from '../config';
export default function Console({ serverName, token, theme }) {
export default function Console({ serverName, token }) {
const [logs, setLogs] = useState([]);
const [command, setCommand] = useState('');
const logsEndRef = useRef(null);
@@ -84,11 +84,11 @@ export default function Console({ serverName, token, theme }) {
};
return (
<div className={`flex flex-col h-full ${theme.primary}`}>
<div className="flex flex-col h-full">
{/* Консоль */}
<div className={`flex-1 overflow-y-auto p-4 font-mono text-sm ${theme.console || theme.secondary}`}>
<div className="console-terminal flex-1 overflow-y-auto min-h-[400px] max-h-[600px]">
{logs.length === 0 ? (
<div className={theme.textSecondary}>Консоль пуста. Запустите сервер для просмотра логов.</div>
<div className="text-gray-500">Консоль пуста. Запустите сервер для просмотра логов.</div>
) : (
logs.map((log, index) => (
<div key={index} className="whitespace-pre-wrap leading-relaxed">
@@ -100,17 +100,17 @@ export default function Console({ serverName, token, theme }) {
</div>
{/* Поле ввода команды */}
<form onSubmit={sendCommand} className={`${theme.border} border-t p-4 flex gap-2`}>
<form onSubmit={sendCommand} className="border-t border-dark-700 p-4 flex gap-2 bg-dark-850">
<input
type="text"
value={command}
onChange={(e) => setCommand(e.target.value)}
placeholder="Введите команду и нажмите Enter для отправки, используйте стрелки для навигации между предыдущими командами"
className={`flex-1 ${theme.input} ${theme.border} border rounded-lg px-4 py-2.5 ${theme.text} placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 transition`}
placeholder="Введите команду..."
className="input flex-1"
/>
<button
type="submit"
className={`${theme.success} ${theme.successHover} px-6 py-2.5 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg`}
className="btn-success flex items-center gap-2"
>
<Send className="w-4 h-4" />
Отправить

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

@@ -3,7 +3,7 @@ import { X } from 'lucide-react';
import axios from 'axios';
import { API_URL } from '../config';
export default function CreateTicketModal({ token, theme, onClose, onCreated }) {
export default function CreateTicketModal({ token, onClose, onCreated }) {
const [formData, setFormData] = useState({
title: '',
description: ''
@@ -30,12 +30,12 @@ export default function CreateTicketModal({ token, theme, onClose, onCreated })
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className={`${theme.secondary} rounded-2xl p-6 w-full max-w-md shadow-2xl ${theme.border} border`}>
<div className="bg-dark-800 rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-700">
<div className="flex items-center justify-between mb-6">
<h2 className={`text-xl font-bold ${theme.text}`}>Создать тикет</h2>
<h2 className="text-xl font-bold text-white">Создать тикет</h2>
<button
onClick={onClose}
className={`${theme.textSecondary} hover:${theme.text} transition`}
className="text-gray-400 hover:text-white transition"
>
<X className="w-6 h-6" />
</button>
@@ -43,7 +43,7 @@ export default function CreateTicketModal({ token, theme, onClose, onCreated })
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
<label className="block text-sm font-medium mb-2 text-white">
Тема тикета
</label>
<input
@@ -51,20 +51,20 @@ export default function CreateTicketModal({ token, theme, onClose, onCreated })
required
value={formData.title}
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-2 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
className="input"
placeholder="Краткое описание проблемы"
/>
</div>
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
<label className="block text-sm font-medium mb-2 text-white">
Описание
</label>
<textarea
required
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-2 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition resize-none`}
className="w-full bg-dark-800 border-gray-700 border rounded-xl px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition resize-none"
placeholder="Подробное описание проблемы"
rows={5}
/>
@@ -74,14 +74,14 @@ export default function CreateTicketModal({ token, theme, onClose, onCreated })
<button
type="button"
onClick={onClose}
className={`flex-1 ${theme.card} ${theme.hover} px-4 py-2 rounded-xl transition`}
className="flex-1 bg-dark-700 hover:bg-dark-600 px-4 py-2 rounded-xl transition text-white"
>
Отмена
</button>
<button
type="submit"
disabled={loading}
className={`flex-1 ${theme.accent} ${theme.accentHover} px-4 py-2 rounded-xl disabled:opacity-50 transition text-white`}
className="flex-1 btn-primary disabled:opacity-50"
>
{loading ? 'Создание...' : 'Создать'}
</button>

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

@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react';
import { X, Save } from 'lucide-react';
export default function FileEditorModal({ file, onClose, onSave, theme }) {
export default function FileEditorModal({ file, onClose, onSave }) {
const [content, setContent] = useState(file.content);
const [saving, setSaving] = useState(false);
@@ -25,9 +25,9 @@ export default function FileEditorModal({ file, onClose, onSave, theme }) {
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className={`${theme.secondary} rounded-lg w-full max-w-4xl h-[80vh] flex flex-col ${theme.border} border`}>
<div className={`flex items-center justify-between p-4 ${theme.border} border-b`}>
<h2 className={`text-xl font-bold ${theme.text}`}>Редактирование: {file.name}</h2>
<div className="bg-dark-800 rounded-lg w-full max-w-4xl h-[80vh] flex flex-col border border-gray-700">
<div className="flex items-center justify-between p-4 border-b border-gray-700">
<h2 className="text-xl font-bold text-white">Редактирование: {file.name}</h2>
<div className="flex gap-2">
<button
onClick={handleSave}
@@ -39,23 +39,23 @@ export default function FileEditorModal({ file, onClose, onSave, theme }) {
</button>
<button
onClick={onClose}
className={`${theme.textSecondary} hover:${theme.text} transition`}
className="text-gray-400 hover:text-white transition"
>
<X className="w-6 h-6" />
</button>
</div>
</div>
<div className={`flex-1 overflow-hidden p-4 ${theme.console || theme.primary}`}>
<div className="flex-1 overflow-hidden p-4 bg-dark-900">
<textarea
value={content}
onChange={(e) => setContent(e.target.value)}
className={`w-full h-full ${theme.console || theme.primary} ${theme.consoleText || theme.text} font-mono text-sm p-4 rounded ${theme.border} border focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none`}
className="w-full h-full bg-dark-900 text-gray-100 font-mono text-sm p-4 rounded border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
spellCheck={false}
/>
</div>
<div className={`p-4 ${theme.border} border-t text-sm ${theme.textSecondary}`}>
<div className="p-4 border-t border-gray-700 text-sm text-gray-400">
Используйте Ctrl+S для быстрого сохранения
</div>
</div>

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

@@ -6,7 +6,7 @@ import FileViewerModal from './FileViewerModal';
import { API_URL } from '../config';
import { notify } from './NotificationSystem';
export default function FileManager({ serverName, token, theme }) {
export default function FileManager({ serverName, token }) {
const [files, setFiles] = useState([]);
const [currentPath, setCurrentPath] = useState('');
const [editingFile, setEditingFile] = useState(null);
@@ -354,26 +354,26 @@ export default function FileManager({ serverName, token, theme }) {
};
return (
<div className={`h-full flex flex-col ${theme.primary}`}>
<div className="h-full flex flex-col bg-dark-900">
{/* Header */}
<div className={`${theme.border} border-b p-4`}>
<h2 className={`text-xl font-semibold mb-4 ${theme.text}`}>Управление файлами</h2>
<div className="border-b border-gray-700 p-4">
<h2 className="text-xl font-semibold mb-4 text-white">Управление файлами</h2>
<div className="flex items-center gap-3">
{/* Search */}
<div className="flex-1 relative">
<Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${theme.textSecondary}`} />
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Поиск по названию ф..."
className={`w-full ${theme.input} ${theme.border} border rounded-lg pl-10 pr-4 py-2 ${theme.text} placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500`}
className="w-full bg-dark-800 border-gray-700 border rounded-lg pl-10 pr-4 py-2 text-white placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
{/* Buttons */}
<label className={`${theme.success} ${theme.successHover} px-4 py-2 rounded-lg cursor-pointer flex items-center gap-2 text-white font-medium transition shadow-lg`}>
<label className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg cursor-pointer flex items-center gap-2 text-white font-medium transition shadow-lg">
<Download className="w-4 h-4" />
Загрузить
<input type="file" onChange={uploadFile} className="hidden" />
@@ -381,7 +381,7 @@ export default function FileManager({ serverName, token, theme }) {
<button
onClick={loadFiles}
className={`${theme.danger} ${theme.dangerHover} px-4 py-2 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg`}
className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg"
>
Обновить
</button>
@@ -436,14 +436,14 @@ export default function FileManager({ serverName, token, theme }) {
</button>
{showNewMenu && (
<div className={`absolute right-0 mt-2 w-48 ${theme.secondary} rounded-lg shadow-xl ${theme.border} border z-10`}>
<div className="absolute right-0 mt-2 w-48 bg-dark-800 rounded-lg shadow-xl border-gray-700 border z-10">
<button
onClick={() => {
setCreatingNew('file');
setShowNewMenu(false);
setNewItemName('');
}}
className={`w-full text-left px-4 py-2 ${theme.hover} ${theme.text} transition rounded-t-lg`}
className="w-full text-left px-4 py-2 hover:bg-dark-700 text-white transition rounded-t-lg"
>
📄 Создать файл
</button>
@@ -453,7 +453,7 @@ export default function FileManager({ serverName, token, theme }) {
setShowNewMenu(false);
setNewItemName('');
}}
className={`w-full text-left px-4 py-2 ${theme.hover} ${theme.text} transition rounded-b-lg`}
className="w-full text-left px-4 py-2 hover:bg-dark-700 text-white transition rounded-b-lg"
>
📁 Создать папку
</button>
@@ -464,17 +464,17 @@ export default function FileManager({ serverName, token, theme }) {
</div>
{/* Path */}
<div className={`${theme.secondary} px-4 py-3 ${theme.border} border-b`}>
<div className="bg-dark-800 px-4 py-3 border-gray-700 border-b">
<div className="flex items-center gap-2">
{currentPath && (
<button
onClick={goBack}
className={`${theme.hover} px-3 py-1 rounded text-sm ${theme.text} transition`}
className="hover:bg-dark-700 px-3 py-1 rounded text-sm text-white transition"
>
← Назад
</button>
)}
<span className={`${theme.textSecondary} font-mono text-sm`}>
<span className="text-gray-400 font-mono text-sm">
/{currentPath || ''}
</span>
@@ -493,9 +493,9 @@ export default function FileManager({ serverName, token, theme }) {
{/* Table */}
<div className="flex-1 overflow-y-auto">
<table className="w-full">
<thead className={`${theme.secondary} sticky top-0 ${theme.border} border-b`}>
<thead className="bg-dark-800 sticky top-0 border-gray-700 border-b">
<tr>
<th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>
<th className="text-left p-4 text-gray-400 font-medium text-sm">
<input
type="checkbox"
className="mr-3 cursor-pointer"
@@ -504,17 +504,17 @@ export default function FileManager({ serverName, token, theme }) {
/>
Имя
</th>
<th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Тип</th>
<th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Размер</th>
<th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Последнее изменение</th>
<th className={`text-left p-4 ${theme.textSecondary} font-medium text-sm`}>Разрешение</th>
<th className={`text-right p-4 ${theme.textSecondary} font-medium text-sm`}>Действия</th>
<th className="text-left p-4 text-gray-400 font-medium text-sm">Тип</th>
<th className="text-left p-4 text-gray-400 font-medium text-sm">Размер</th>
<th className="text-left p-4 text-gray-400 font-medium text-sm">Последнее изменение</th>
<th className="text-left p-4 text-gray-400 font-medium text-sm">Разрешение</th>
<th className="text-right p-4 text-gray-400 font-medium text-sm">Действия</th>
</tr>
</thead>
<tbody>
{/* Форма создания нового файла/папки */}
{creatingNew && (
<tr className={`${theme.border} border-b bg-blue-900 bg-opacity-20`}>
<tr className="border-gray-700 border-b bg-blue-900 bg-opacity-20">
<td className="p-4" colSpan="6">
<div className="flex items-center gap-3">
{creatingNew === 'file' ? (
@@ -537,7 +537,7 @@ export default function FileManager({ serverName, token, theme }) {
}}
placeholder={creatingNew === 'file' ? 'Имя файла...' : 'Имя папки...'}
autoFocus
className={`flex-1 ${theme.input} ${theme.border} border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500`}
className="flex-1 bg-dark-800 border-gray-700 border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
onClick={creatingNew === 'file' ? createNewFile : createNewFolder}
@@ -550,7 +550,7 @@ export default function FileManager({ serverName, token, theme }) {
setCreatingNew(null);
setNewItemName('');
}}
className={`${theme.danger} ${theme.dangerHover} px-4 py-2 rounded text-sm text-white transition`}
className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm text-white transition"
>
Отмена
</button>
@@ -562,7 +562,7 @@ export default function FileManager({ serverName, token, theme }) {
{filteredFiles.length === 0 ? (
<tr>
<td colSpan="6" className="text-center py-12">
<div className={theme.textSecondary}>
<div className="text-gray-400">
<Folder className="w-12 h-12 mx-auto mb-2 opacity-50" />
<p>No data</p>
</div>
@@ -575,7 +575,7 @@ export default function FileManager({ serverName, token, theme }) {
return (
<tr
key={file.name}
className={`${theme.border} border-b ${theme.hover} transition ${
className={`border-gray-700 border-b hover:bg-dark-700 transition ${
isCut ? 'opacity-50 bg-orange-900 bg-opacity-20' : ''
}`}
>
@@ -603,7 +603,7 @@ export default function FileManager({ serverName, token, theme }) {
if (e.key === 'Escape') setRenamingFile(null);
}}
autoFocus
className={`${theme.input} ${theme.border} border rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500`}
className="bg-dark-800 border-gray-700 border rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
) : (
@@ -623,37 +623,37 @@ export default function FileManager({ serverName, token, theme }) {
) : (
<File className="w-5 h-5 text-gray-400" />
)}
<span className={theme.text}>{file.name}</span>
<span className="text-white">{file.name}</span>
</div>
)}
</td>
<td className={`p-4 ${theme.textSecondary} text-sm`}>
<td className="p-4 text-gray-400 text-sm">
{file.type === 'directory' ? 'Папка' : 'Файл'}
</td>
<td className={`p-4 ${theme.textSecondary} text-sm`}>{formatSize(file.size)}</td>
<td className={`p-4 ${theme.textSecondary} text-sm`}>-</td>
<td className={`p-4 ${theme.textSecondary} text-sm`}>-</td>
<td className="p-4 text-gray-400 text-sm">{formatSize(file.size)}</td>
<td className="p-4 text-gray-400 text-sm">-</td>
<td className="p-4 text-gray-400 text-sm">-</td>
<td className="p-4">
<div className="flex gap-2 justify-end">
{file.type === 'file' && (
<>
<button
onClick={() => viewFile(file.name)}
className={`${theme.card} ${theme.hover} p-2 rounded transition`}
className="bg-dark-800 hover:bg-dark-700 p-2 rounded transition"
title="Просмотр"
>
<Eye className="w-4 h-4" />
</button>
<button
onClick={() => editFile(file.name)}
className={`${theme.card} ${theme.hover} p-2 rounded transition`}
className="bg-dark-800 hover:bg-dark-700 p-2 rounded transition"
title="Редактировать"
>
<Edit className="w-4 h-4" />
</button>
<button
onClick={() => downloadFile(file.name)}
className={`${theme.card} ${theme.hover} p-2 rounded transition`}
className="bg-dark-800 hover:bg-dark-700 p-2 rounded transition"
title="Скачать"
>
<Download className="w-4 h-4" />
@@ -662,7 +662,7 @@ export default function FileManager({ serverName, token, theme }) {
)}
<button
onClick={() => deleteFile(file.name)}
className={`${theme.card} ${theme.hover} p-2 rounded text-red-400 transition`}
className="bg-dark-800 hover:bg-dark-700 p-2 rounded text-red-400 transition"
title="Удалить"
>
<Trash2 className="w-4 h-4" />
@@ -685,7 +685,6 @@ export default function FileManager({ serverName, token, theme }) {
setEditingFile(viewingFile);
setViewingFile(null);
}}
theme={theme}
/>
)}
@@ -694,7 +693,6 @@ export default function FileManager({ serverName, token, theme }) {
file={editingFile}
onClose={() => setEditingFile(null)}
onSave={saveFile}
theme={theme}
/>
)}
</div>

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

@@ -1,11 +1,11 @@
import { X, Edit } from 'lucide-react';
export default function FileViewerModal({ file, onClose, onEdit, theme }) {
export default function FileViewerModal({ file, onClose, onEdit }) {
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className={`${theme.secondary} rounded-lg w-full max-w-4xl h-[80vh] flex flex-col ${theme.border} border`}>
<div className={`flex items-center justify-between p-4 ${theme.border} border-b`}>
<h2 className={`text-xl font-bold ${theme.text}`}>{file.name}</h2>
<div className="bg-dark-800 rounded-lg w-full max-w-4xl h-[80vh] flex flex-col border border-gray-700">
<div className="flex items-center justify-between p-4 border-b border-gray-700">
<h2 className="text-xl font-bold text-white">{file.name}</h2>
<div className="flex gap-2">
<button
onClick={onEdit}
@@ -16,15 +16,15 @@ export default function FileViewerModal({ file, onClose, onEdit, theme }) {
</button>
<button
onClick={onClose}
className={`${theme.textSecondary} hover:${theme.text} transition`}
className="text-gray-400 hover:text-white transition"
>
<X className="w-6 h-6" />
</button>
</div>
</div>
<div className={`flex-1 overflow-auto p-4 ${theme.console || theme.primary}`}>
<pre className={`text-sm ${theme.consoleText || theme.text} font-mono whitespace-pre-wrap`}>
<div className="flex-1 overflow-auto p-4 bg-dark-900">
<pre className="text-sm text-gray-100 font-mono whitespace-pre-wrap">
{file.content}
</pre>
</div>

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

@@ -4,7 +4,7 @@ import axios from 'axios';
import { API_URL } from '../config';
import { notify } from './NotificationSystem';
export default function Profile({ token, user, theme, onUsernameChange, viewingUsername }) {
export default function Profile({ token, user, onUsernameChange, viewingUsername }) {
const [stats, setStats] = useState(null);
const [loading, setLoading] = useState(true);
const [activeTab, setActiveTab] = useState('overview');
@@ -64,14 +64,11 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
{ headers: { Authorization: `Bearer ${token}` } }
);
// Обновляем токен
localStorage.setItem('token', data.access_token);
notify('success', 'Имя изменено', `Ваше новое имя: ${data.username}`);
alert('Имя пользователя успешно изменено!');
setUsernameForm({ new_username: '', password: '' });
// Уведомляем родительский компонент
if (onUsernameChange) {
onUsernameChange(data.access_token, data.username);
}
@@ -127,63 +124,53 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
const getRoleName = (role) => {
switch (role) {
case 'admin':
return 'Администратор';
case 'support':
return 'Тех. поддержка';
case 'banned':
return 'Забанен';
default:
return 'Пользователь';
case 'owner': return 'Владелец';
case 'admin': return 'Администратор';
case 'support': return 'Тех. поддержка';
case 'banned': return 'Забанен';
default: return 'Пользователь';
}
};
const getRoleColor = (role) => {
switch (role) {
case 'admin':
return 'bg-blue-500/20 text-blue-500 border-blue-500/50';
case 'support':
return 'bg-purple-500/20 text-purple-500 border-purple-500/50';
case 'banned':
return 'bg-red-500/20 text-red-500 border-red-500/50';
default:
return 'bg-gray-500/20 text-gray-500 border-gray-500/50';
case 'owner': return 'bg-yellow-500/20 text-yellow-500 border-yellow-500/50';
case 'admin': return 'bg-blue-500/20 text-blue-500 border-blue-500/50';
case 'support': return 'bg-purple-500/20 text-purple-500 border-purple-500/50';
case 'banned': return 'bg-red-500/20 text-red-500 border-red-500/50';
default: return 'bg-gray-500/20 text-gray-500 border-gray-500/50';
}
};
if (loading) {
return (
<div className={`h-full ${theme.primary} ${theme.text} flex items-center justify-center`}>
<div className="h-full bg-dark-900 text-white flex items-center justify-center">
<div className="text-center">
<div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
<p className={theme.textSecondary}>Загрузка профиля...</p>
<p className="text-gray-400">Загрузка профиля...</p>
</div>
</div>
);
}
return (
<div className={`h-full ${theme.primary} ${theme.text} p-6 overflow-y-auto`}>
<div className="h-full bg-dark-900 text-white p-6 overflow-y-auto">
<div className="max-w-6xl mx-auto">
{/* Header */}
<div className="mb-6">
<h1 className="text-2xl font-bold mb-2">
{isViewingOther ? `Профиль пользователя: ${viewingUsername}` : 'Личный кабинет'}
</h1>
<p className={theme.textSecondary}>
<p className="text-gray-400">
{isViewingOther ? 'Просмотр профиля другого пользователя' : 'Управление профилем и настройками'}
</p>
</div>
{/* Tabs */}
{!isViewingOther && (
<div className={`${theme.secondary} ${theme.border} border rounded-2xl mb-6 p-2 flex gap-2`}>
<div className="card mb-6 p-2 flex gap-2">
<button
onClick={() => setActiveTab('overview')}
className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
activeTab === 'overview'
? `${theme.accent} text-white`
: `${theme.hover}`
activeTab === 'overview' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
}`}
>
<TrendingUp className="w-4 h-4 inline mr-2" />
@@ -192,9 +179,7 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
<button
onClick={() => setActiveTab('username')}
className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
activeTab === 'username'
? `${theme.accent} text-white`
: `${theme.hover}`
activeTab === 'username' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
}`}
>
<User className="w-4 h-4 inline mr-2" />
@@ -203,9 +188,7 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
<button
onClick={() => setActiveTab('password')}
className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
activeTab === 'password'
? `${theme.accent} text-white`
: `${theme.hover}`
activeTab === 'password' ? 'bg-primary-600 text-white' : 'hover:bg-dark-700'
}`}
>
<Lock className="w-4 h-4 inline mr-2" />
@@ -214,13 +197,11 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
</div>
)}
{/* Overview Tab */}
{(activeTab === 'overview' || isViewingOther) && (
<div className="space-y-6">
{/* User Info Card */}
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
<div className="card p-6">
<div className="flex items-center gap-4 mb-6">
<div className={`${theme.accent} p-4 rounded-2xl`}>
<div className="bg-primary-600 p-4 rounded-2xl">
<User className="w-8 h-8 text-white" />
</div>
<div>
@@ -233,39 +214,36 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
</div>
</div>
{/* Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Servers */}
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
<div className="card p-6">
<div className="flex items-center gap-3 mb-4">
<div className={`${theme.accent} p-3 rounded-xl`}>
<div className="bg-primary-600 p-3 rounded-xl">
<Server className="w-6 h-6 text-white" />
</div>
<div>
<p className={`text-sm ${theme.textSecondary}`}>Всего серверов</p>
<p className="text-sm text-gray-400">Всего серверов</p>
<p className="text-2xl font-bold">{stats?.total_servers || 0}</p>
</div>
</div>
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span className={theme.textSecondary}>Мои серверы:</span>
<span className="text-gray-400">Мои серверы:</span>
<span className="font-medium">{stats?.owned_servers?.length || 0}</span>
</div>
<div className="flex justify-between text-sm">
<span className={theme.textSecondary}>Доступные:</span>
<span className="text-gray-400">Доступные:</span>
<span className="font-medium">{stats?.accessible_servers?.length || 0}</span>
</div>
</div>
</div>
{/* Tickets */}
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
<div className="card p-6">
<div className="flex items-center gap-3 mb-4">
<div className={`${theme.accent} p-3 rounded-xl`}>
<div className="bg-primary-600 p-3 rounded-xl">
<MessageSquare className="w-6 h-6 text-white" />
</div>
<div>
<p className={`text-sm ${theme.textSecondary}`}>Мои тикеты</p>
<p className="text-sm text-gray-400">Мои тикеты</p>
<p className="text-2xl font-bold">{stats?.tickets?.total || 0}</p>
</div>
</div>
@@ -285,18 +263,18 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
</div>
</div>
{/* Role Info */}
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
<div className="card p-6">
<div className="flex items-center gap-3 mb-4">
<div className={`${theme.accent} p-3 rounded-xl`}>
<div className="bg-primary-600 p-3 rounded-xl">
<Shield className="w-6 h-6 text-white" />
</div>
<div>
<p className={`text-sm ${theme.textSecondary}`}>Ваша роль</p>
<p className="text-sm text-gray-400">Ваша роль</p>
<p className="text-xl font-bold">{getRoleName(stats?.role)}</p>
</div>
</div>
<div className={`text-sm ${theme.textSecondary}`}>
<div className="text-sm text-gray-400">
{stats?.role === 'owner' && '👑 Владелец панели - полный контроль над всеми функциями'}
{stats?.role === 'admin' && 'Полный доступ ко всем функциям панели'}
{stats?.role === 'support' && 'Доступ к системе тикетов и поддержке'}
{stats?.role === 'user' && 'Доступ к своим серверам и тикетам'}
@@ -305,21 +283,17 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
</div>
</div>
{/* Servers List */}
{stats?.owned_servers?.length > 0 && (
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
<div className="card p-6">
<h3 className="text-lg font-bold mb-4">Мои серверы</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{stats.owned_servers.map((server) => (
<div
key={server.name}
className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}
>
<div key={server.name} className="bg-dark-700 border border-gray-700 rounded-xl p-4">
<div className="flex items-center gap-3">
<Server className="w-5 h-5" />
<div>
<p className="font-medium">{server.displayName}</p>
<p className={`text-xs ${theme.textSecondary}`}>{server.name}</p>
<p className="text-xs text-gray-400">{server.name}</p>
</div>
</div>
</div>
@@ -330,154 +304,115 @@ export default function Profile({ token, user, theme, onUsernameChange, viewingU
</div>
)}
{/* Username Tab */}
{activeTab === 'username' && (
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6 max-w-2xl mx-auto`}>
<div className="card p-6 max-w-2xl mx-auto">
<h2 className="text-xl font-bold mb-6">Изменить имя пользователя</h2>
<form onSubmit={handleUsernameChange} className="space-y-4">
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
Текущее имя пользователя
</label>
<input
type="text"
value={stats?.username}
disabled
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.textSecondary} cursor-not-allowed`}
/>
<label className="block text-sm font-medium mb-2 text-white">Текущее имя пользователя</label>
<input type="text" value={stats?.username} disabled className="input cursor-not-allowed opacity-50" />
</div>
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
Новое имя пользователя
</label>
<label className="block text-sm font-medium mb-2 text-white">Новое имя пользователя</label>
<input
type="text"
value={usernameForm.new_username}
onChange={(e) => setUsernameForm({ ...usernameForm, new_username: e.target.value })}
placeholder="Введите новое имя"
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
className="input"
/>
<p className={`text-xs ${theme.textSecondary} mt-1`}>
Минимум 3 символа
</p>
<p className="text-xs text-gray-400 mt-1">Минимум 3 символа</p>
</div>
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
Подтвердите паролем
</label>
<label className="block text-sm font-medium mb-2 text-white">Подтвердите паролем</label>
<div className="relative">
<input
type={showUsernamePassword ? 'text' : 'password'}
value={usernameForm.password}
onChange={(e) => setUsernameForm({ ...usernameForm, password: e.target.value })}
placeholder="Введите текущий пароль"
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
className="input pr-12"
/>
<button
type="button"
onClick={() => setShowUsernamePassword(!showUsernamePassword)}
className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition"
>
{showUsernamePassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
</button>
</div>
</div>
<div className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
<p className={`text-sm ${theme.textSecondary}`}>
<div className="bg-dark-700 border border-gray-700 rounded-xl p-4">
<p className="text-sm text-gray-400">
⚠️ После изменения имени пользователя вы будете автоматически перелогинены с новым именем.
</p>
</div>
<button
type="submit"
disabled={usernameLoading}
className={`w-full ${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl font-medium text-white transition disabled:opacity-50`}
>
<button type="submit" disabled={usernameLoading} className="btn-primary w-full disabled:opacity-50">
{usernameLoading ? 'Изменение...' : 'Изменить имя пользователя'}
</button>
</form>
</div>
)}
{/* Password Tab */}
{activeTab === 'password' && (
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6 max-w-2xl mx-auto`}>
<div className="card p-6 max-w-2xl mx-auto">
<h2 className="text-xl font-bold mb-6">Изменить пароль</h2>
<form onSubmit={handlePasswordChange} className="space-y-4">
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
Текущий пароль
</label>
<label className="block text-sm font-medium mb-2 text-white">Текущий пароль</label>
<div className="relative">
<input
type={showOldPassword ? 'text' : 'password'}
value={passwordForm.old_password}
onChange={(e) => setPasswordForm({ ...passwordForm, old_password: e.target.value })}
placeholder="Введите текущий пароль"
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
className="input pr-12"
/>
<button
type="button"
onClick={() => setShowOldPassword(!showOldPassword)}
className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition"
>
{showOldPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
</button>
</div>
</div>
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
Новый пароль
</label>
<label className="block text-sm font-medium mb-2 text-white">Новый пароль</label>
<div className="relative">
<input
type={showNewPassword ? 'text' : 'password'}
value={passwordForm.new_password}
onChange={(e) => setPasswordForm({ ...passwordForm, new_password: e.target.value })}
placeholder="Введите новый пароль"
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
className="input pr-12"
/>
<button
type="button"
onClick={() => setShowNewPassword(!showNewPassword)}
className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition"
>
{showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
</button>
</div>
<p className={`text-xs ${theme.textSecondary} mt-1`}>
Минимум 6 символов
</p>
<p className="text-xs text-gray-400 mt-1">Минимум 6 символов</p>
</div>
<div>
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
Подтвердите новый пароль
</label>
<label className="block text-sm font-medium mb-2 text-white">Подтвердите новый пароль</label>
<input
type="password"
value={passwordForm.confirm_password}
onChange={(e) => setPasswordForm({ ...passwordForm, confirm_password: e.target.value })}
placeholder="Повторите новый пароль"
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
className="input"
/>
</div>
<div className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
<p className={`text-sm ${theme.textSecondary}`}>
<div className="bg-dark-700 border border-gray-700 rounded-xl p-4">
<p className="text-sm text-gray-400">
⚠️ После изменения пароля используйте новый пароль для входа в систему.
</p>
</div>
<button
type="submit"
disabled={passwordLoading}
className={`w-full ${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl font-medium text-white transition disabled:opacity-50`}
>
<button type="submit" disabled={passwordLoading} className="btn-primary w-full disabled:opacity-50">
{passwordLoading ? 'Изменение...' : 'Изменить пароль'}
</button>
</form>

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

@@ -3,7 +3,7 @@ import { Cpu, HardDrive, Activity } from 'lucide-react';
import axios from 'axios';
import { API_URL } from '../config';
export default function Stats({ serverName, token, theme }) {
export default function Stats({ serverName, token }) {
const [stats, setStats] = useState({
status: 'stopped',
cpu: 0,
@@ -29,17 +29,17 @@ export default function Stats({ serverName, token, theme }) {
};
return (
<div className={`p-8 ${theme.primary}`}>
<h2 className={`text-2xl font-bold mb-6 ${theme.text}`}>Статистика сервера</h2>
<div className="p-8 bg-dark-900">
<h2 className="text-2xl font-bold mb-6 text-white">Статистика сервера</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className={`${theme.card} rounded-lg p-6 ${theme.border} border`}>
<div className="card p-6">
<div className="flex items-center justify-between mb-4">
<h3 className={`text-lg font-semibold ${theme.text}`}>CPU</h3>
<h3 className="text-lg font-semibold text-white">CPU</h3>
<Cpu className="w-6 h-6 text-blue-400" />
</div>
<div className={`text-3xl font-bold mb-2 ${theme.text}`}>{stats.cpu}%</div>
<div className={`w-full ${theme.tertiary} rounded-full h-2`}>
<div className="text-3xl font-bold mb-2 text-white">{stats.cpu}%</div>
<div className="w-full bg-dark-700 rounded-full h-2">
<div
className="bg-blue-500 h-2 rounded-full transition-all"
style={{ width: `${Math.min(stats.cpu, 100)}%` }}
@@ -47,13 +47,13 @@ export default function Stats({ serverName, token, theme }) {
</div>
</div>
<div className={`${theme.card} rounded-lg p-6 ${theme.border} border`}>
<div className="card p-6">
<div className="flex items-center justify-between mb-4">
<h3 className={`text-lg font-semibold ${theme.text}`}>ОЗУ</h3>
<h3 className="text-lg font-semibold text-white">ОЗУ</h3>
<Activity className="w-6 h-6 text-green-400" />
</div>
<div className={`text-3xl font-bold mb-2 ${theme.text}`}>{stats.memory} МБ</div>
<div className={`w-full ${theme.tertiary} rounded-full h-2`}>
<div className="text-3xl font-bold mb-2 text-white">{stats.memory} МБ</div>
<div className="w-full bg-dark-700 rounded-full h-2">
<div
className="bg-green-500 h-2 rounded-full transition-all"
style={{ width: `${Math.min((stats.memory / 2048) * 100, 100)}%` }}
@@ -61,27 +61,27 @@ export default function Stats({ serverName, token, theme }) {
</div>
</div>
<div className={`${theme.card} rounded-lg p-6 ${theme.border} border`}>
<div className="card p-6">
<div className="flex items-center justify-between mb-4">
<h3 className={`text-lg font-semibold ${theme.text}`}>Диск</h3>
<h3 className="text-lg font-semibold text-white">Диск</h3>
<HardDrive className="w-6 h-6 text-purple-400" />
</div>
<div className={`text-3xl font-bold mb-2 ${theme.text}`}>{stats.disk} МБ</div>
<div className={`text-sm ${theme.textSecondary} mt-2`}>
<div className="text-3xl font-bold mb-2 text-white">{stats.disk} МБ</div>
<div className="text-sm text-gray-400 mt-2">
Использовано на диске
</div>
</div>
</div>
<div className={`mt-8 ${theme.card} rounded-lg p-6 ${theme.border} border`}>
<h3 className={`text-lg font-semibold mb-4 ${theme.text}`}>Статус</h3>
<div className="mt-8 card p-6">
<h3 className="text-lg font-semibold mb-4 text-white">Статус</h3>
<div className="flex items-center gap-3">
<div
className={`w-4 h-4 rounded-full ${
stats.status === 'running' ? 'bg-green-500' : 'bg-red-500'
}`}
/>
<span className={`text-xl ${theme.text}`}>
<span className="text-xl text-white">
{stats.status === 'running' ? 'Запущен' : 'Остановлен'}
</span>
</div>

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

@@ -4,7 +4,7 @@ import axios from 'axios';
import { API_URL } from '../config';
import { notify } from './NotificationSystem';
export default function TicketChat({ ticket, token, user, theme, onBack }) {
export default function TicketChat({ ticket, token, user, onBack }) {
const [messages, setMessages] = useState(ticket.messages || []);
const [newMessage, setNewMessage] = useState('');
const [currentTicket, setCurrentTicket] = useState(ticket);
@@ -150,22 +150,22 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
}
};
const canChangeStatus = user.role === 'admin' || user.role === 'support';
const canChangeStatus = user.role === 'owner' || user.role === 'admin' || user.role === 'support';
return (
<div className={`h-full flex flex-col ${theme.primary}`}>
<div className="h-full flex flex-col bg-dark-900">
{/* Header */}
<div className={`${theme.secondary} ${theme.border} border-b p-4`}>
<div className="bg-dark-800 border-gray-700 border-b p-4">
<div className="flex items-center gap-4 mb-3">
<button
onClick={onBack}
className={`${theme.hover} p-2 rounded-lg transition`}
className="hover:bg-dark-700 p-2 rounded-lg transition"
>
<ArrowLeft className="w-5 h-5" />
</button>
<div className="flex-1">
<h2 className="text-lg font-bold">{currentTicket.title}</h2>
<p className={`text-sm ${theme.textSecondary}`}>
<p className="text-sm text-gray-400">
Автор: {currentTicket.author} • Создан: {new Date(currentTicket.created_at).toLocaleString('ru-RU')}
</p>
</div>
@@ -184,7 +184,7 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
className={`flex-1 px-3 py-2 rounded-lg border transition ${
currentTicket.status === 'pending'
? 'bg-yellow-500/20 text-yellow-500 border-yellow-500/50'
: `${theme.card} ${theme.hover} ${theme.border}`
: 'bg-dark-800 hover:bg-dark-700 border-gray-700'
}`}
>
<Clock className="w-4 h-4 inline mr-2" />
@@ -196,7 +196,7 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
className={`flex-1 px-3 py-2 rounded-lg border transition ${
currentTicket.status === 'in_progress'
? 'bg-blue-500/20 text-blue-500 border-blue-500/50'
: `${theme.card} ${theme.hover} ${theme.border}`
: 'bg-dark-800 hover:bg-dark-700 border-gray-700'
}`}
>
<AlertCircle className="w-4 h-4 inline mr-2" />
@@ -208,7 +208,7 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
className={`flex-1 px-3 py-2 rounded-lg border transition ${
currentTicket.status === 'closed'
? 'bg-green-500/20 text-green-500 border-green-500/50'
: `${theme.card} ${theme.hover} ${theme.border}`
: 'bg-dark-800 hover:bg-dark-700 border-gray-700'
}`}
>
<CheckCircle className="w-4 h-4 inline mr-2" />
@@ -228,20 +228,20 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
<div
className={`max-w-[70%] rounded-2xl px-4 py-3 ${
msg.author === 'system'
? `${theme.tertiary} ${theme.border} border text-center`
? 'bg-dark-700 border-gray-700 border text-center'
: msg.author === user.username
? `${theme.accent} text-white`
: `${theme.card} ${theme.border} border`
? 'bg-primary-600 text-white'
: 'bg-dark-800 border-gray-700 border'
}`}
>
{msg.author !== 'system' && msg.author !== user.username && (
<div className={`text-xs font-semibold mb-1 ${theme.textSecondary}`}>
<div className="text-xs font-semibold mb-1 text-gray-400">
{msg.author}
</div>
)}
<div className="whitespace-pre-wrap break-words">{msg.text}</div>
<div className={`text-xs mt-1 ${
msg.author === user.username ? 'text-white/70' : theme.textSecondary
msg.author === user.username ? 'text-white/70' : 'text-gray-400'
}`}>
{new Date(msg.timestamp).toLocaleTimeString('ru-RU')}
</div>
@@ -253,7 +253,7 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
{/* Input */}
{currentTicket.status !== 'closed' && (
<form onSubmit={sendMessage} className={`${theme.border} border-t p-4`}>
<form onSubmit={sendMessage} className="border-gray-700 border-t p-4">
<div className="flex gap-2">
<input
type="text"
@@ -261,12 +261,12 @@ export default function TicketChat({ ticket, token, user, theme, onBack }) {
onChange={(e) => setNewMessage(e.target.value)}
placeholder="Введите сообщение..."
disabled={loading}
className={`flex-1 ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
className="input flex-1"
/>
<button
type="submit"
disabled={loading || !newMessage.trim()}
className={`${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl flex items-center gap-2 text-white transition disabled:opacity-50`}
className="btn-primary px-6 py-3 flex items-center gap-2 disabled:opacity-50"
>
<Send className="w-4 h-4" />
Отправить

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

@@ -6,7 +6,7 @@ import TicketChat from './TicketChat';
import CreateTicketModal from './CreateTicketModal';
import { notify } from './NotificationSystem';
export default function Tickets({ token, user, theme }) {
export default function Tickets({ token, user }) {
const [tickets, setTickets] = useState([]);
const [selectedTicket, setSelectedTicket] = useState(null);
const [showCreateModal, setShowCreateModal] = useState(false);
@@ -99,7 +99,6 @@ export default function Tickets({ token, user, theme }) {
ticket={selectedTicket}
token={token}
user={user}
theme={theme}
onBack={() => {
setSelectedTicket(null);
loadTickets();
@@ -109,17 +108,17 @@ export default function Tickets({ token, user, theme }) {
}
return (
<div className={`h-full ${theme.primary} ${theme.text} p-6`}>
<div className="h-full bg-dark-900 text-white p-6">
<div className="max-w-6xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold mb-2">Тикеты</h1>
<p className={theme.textSecondary}>Система поддержки</p>
<p className="text-gray-400">Система поддержки</p>
</div>
<button
onClick={() => setShowCreateModal(true)}
className={`${theme.accent} ${theme.accentHover} px-4 py-2 rounded-xl flex items-center gap-2 text-white transition`}
className="btn-primary flex items-center gap-2"
>
<Plus className="w-4 h-4" />
Создать тикет
@@ -130,18 +129,18 @@ export default function Tickets({ token, user, theme }) {
{loading ? (
<div className="text-center py-12">
<div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
<p className={theme.textSecondary}>Загрузка тикетов...</p>
<p className="text-gray-400">Загрузка тикетов...</p>
</div>
) : tickets.length === 0 ? (
<div className={`${theme.card} ${theme.border} border rounded-2xl p-12 text-center`}>
<MessageSquare className={`w-16 h-16 mx-auto mb-4 ${theme.textSecondary} opacity-50`} />
<div className="card p-12 text-center">
<MessageSquare className="w-16 h-16 mx-auto mb-4 text-gray-500 opacity-50" />
<p className="text-lg font-medium mb-2">Нет тикетов</p>
<p className={`text-sm ${theme.textSecondary} mb-4`}>
<p className="text-sm text-gray-400 mb-4">
Создайте первый тикет для обращения в поддержку
</p>
<button
onClick={() => setShowCreateModal(true)}
className={`${theme.accent} ${theme.accentHover} px-6 py-2 rounded-xl text-white transition`}
className="btn-primary"
>
Создать тикет
</button>
@@ -152,12 +151,12 @@ export default function Tickets({ token, user, theme }) {
<div
key={ticket.id}
onClick={() => setSelectedTicket(ticket)}
className={`${theme.card} ${theme.border} border rounded-2xl p-6 cursor-pointer ${theme.hover} transition-all duration-200`}
className="card p-6 cursor-pointer hover:border-gray-600 transition-all duration-200"
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<h3 className="text-lg font-semibold mb-2">{ticket.title}</h3>
<p className={`text-sm ${theme.textSecondary} line-clamp-2`}>
<p className="text-sm text-gray-400 line-clamp-2">
{ticket.description}
</p>
</div>
@@ -167,15 +166,15 @@ export default function Tickets({ token, user, theme }) {
</div>
</div>
<div className="flex items-center gap-4 text-sm">
<span className={theme.textSecondary}>
Автор: <span className={theme.text}>{ticket.author}</span>
<span className="text-gray-400">
Автор: <span className="text-white">{ticket.author}</span>
</span>
<span className={theme.textSecondary}>•</span>
<span className={theme.textSecondary}>
Сообщений: <span className={theme.text}>{ticket.messages?.length || 0}</span>
<span className="text-gray-400">•</span>
<span className="text-gray-400">
Сообщений: <span className="text-white">{ticket.messages?.length || 0}</span>
</span>
<span className={theme.textSecondary}>•</span>
<span className={theme.textSecondary}>
<span className="text-gray-400">•</span>
<span className="text-gray-400">
{new Date(ticket.created_at).toLocaleString('ru-RU')}
</span>
</div>
@@ -188,7 +187,6 @@ export default function Tickets({ token, user, theme }) {
{showCreateModal && (
<CreateTicketModal
token={token}
theme={theme}
onClose={() => setShowCreateModal(false)}
onCreated={handleTicketCreated}
/>

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

@@ -1,8 +1,9 @@
import { useState, useEffect } from 'react';
import { Users, Shield, Ban, Trash2, UserCheck, Server, AlertCircle, CheckCircle } from 'lucide-react';
import { Users, Shield, Ban, Trash2, UserCheck, Server } from 'lucide-react';
import axios from 'axios';
import { notify } from './NotificationSystem';
const UserManagement = ({ currentUser, addNotification }) => {
const UserManagement = ({ token, currentUser }) => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [selectedUser, setSelectedUser] = useState(null);
@@ -14,7 +15,6 @@ const UserManagement = ({ currentUser, addNotification }) => {
// Загрузка пользователей
const loadUsers = async () => {
try {
const token = localStorage.getItem('token');
const response = await axios.get(`${API_URL}/api/users`, {
headers: { Authorization: `Bearer ${token}` }
});
@@ -28,7 +28,7 @@ const UserManagement = ({ currentUser, addNotification }) => {
setLoading(false);
} catch (error) {
console.error('Ошибка загрузки пользователей:', error);
addNotification('error', 'Ошибка загрузки пользователей');
notify('error', 'Ошибка загрузки', 'Не удалось загрузить пользователей');
setLoading(false);
}
};
@@ -47,12 +47,12 @@ const UserManagement = ({ currentUser, addNotification }) => {
{ headers: { Authorization: `Bearer ${token}` } }
);
addNotification('success', `Роль пользователя ${username} изменена на ${newRole}`);
notify('success', 'Роль изменена', `Роль пользователя ${username} изменена на ${newRole}`);
loadUsers();
setShowRoleModal(false);
} catch (error) {
console.error('Ошибка изменения роли:', error);
addNotification('error', error.response?.data?.detail || 'Ошибка изменения роли');
notify('error', 'Ошибка изменения', error.response?.data?.detail || 'Не удалось изменить роль');
}
};
@@ -68,11 +68,11 @@ const UserManagement = ({ currentUser, addNotification }) => {
{ headers: { Authorization: `Bearer ${token}` } }
);
addNotification('success', `Пользователь ${username} заблокирован`);
notify('success', 'Пользователь заблокирован', `${username} успешно заблокирован`);
loadUsers();
} catch (error) {
console.error('Ошибка блокировки:', error);
addNotification('error', error.response?.data?.detail || 'Ошибка блокировки');
notify('error', 'Ошибка блокировки', error.response?.data?.detail || 'Не удалось заблокировать пользователя');
}
};
@@ -86,11 +86,11 @@ const UserManagement = ({ currentUser, addNotification }) => {
{ headers: { Authorization: `Bearer ${token}` } }
);
addNotification('success', `Пользователь ${username} разблокирован`);
notify('success', 'Пользователь разблокирован', `${username} успешно разблокирован`);
loadUsers();
} catch (error) {
console.error('Ошибка разблокировки:', error);
addNotification('error', error.response?.data?.detail || 'Ошибка разблокировки');
notify('error', 'Ошибка разблокировки', error.response?.data?.detail || 'Не удалось разблокировать пользователя');
}
};
@@ -105,11 +105,11 @@ const UserManagement = ({ currentUser, addNotification }) => {
{ headers: { Authorization: `Bearer ${token}` } }
);
addNotification('success', `Пользователь ${username} удалён`);
notify('success', 'Пользователь удалён', `${username} успешно удалён`);
loadUsers();
} catch (error) {
console.error('Ошибка удаления:', error);
addNotification('error', error.response?.data?.detail || 'Ошибка удаления');
notify('error', 'Ошибка удаления', error.response?.data?.detail || 'Не удалось удалить пользователя');
}
};