Add Ticket and add Role Support

frontend/src/App.jsx

@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react';
-import { Server, Play, Square, Terminal, FolderOpen, HardDrive, Settings, Plus, Users as UsersIcon, LogOut, Menu, X } from 'lucide-react';
+import { Server, Play, Square, Terminal, FolderOpen, HardDrive, Settings, Plus, Users as UsersIcon, LogOut, Menu, X, MessageSquare } from 'lucide-react';
 import Console from './components/Console';
 import FileManager from './components/FileManager';
 import Stats from './components/Stats';
 import ServerSettings from './components/ServerSettings';
 import CreateServerModal from './components/CreateServerModal';
 import Users from './components/Users';
+import Tickets from './components/Tickets';
 import Auth from './components/Auth';
 import ErrorBoundary from './components/ErrorBoundary';
 import ThemeSelector from './components/ThemeSelector';
@@ -21,6 +22,7 @@ function App() {
   const [activeTab, setActiveTab] = useState('console');
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showUsers, setShowUsers] = useState(false);
+  const [showTickets, setShowTickets] = useState(false);
   const [connectionError, setConnectionError] = useState(false);
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'dark');
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -156,7 +158,7 @@ function App() {
                     {user?.username}
                   </span>
                   <span className={`ml-2 text-xs px-2 py-0.5 rounded ${currentTheme.accent} text-white`}>
-                    {user?.role === 'admin' ? 'Админ' : 'Пользователь'}
+                    {user?.role === 'admin' ? 'Админ' : user?.role === 'support' ? 'Поддержка' : 'Пользователь'}
                   </span>
                 </div>
                 <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
@@ -183,6 +185,56 @@ function App() {
     );
   }
 
+  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`}>
+                    {user?.role === 'admin' ? 'Админ' : user?.role === 'support' ? 'Поддержка' : 'Пользователь'}
+                  </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>
+    );
+  }
+
   return (
     <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
       {/* Header */}
@@ -217,10 +269,17 @@ function App() {
                   {user?.username}
                 </span>
                 <span className={`ml-2 text-xs px-2 py-0.5 rounded ${currentTheme.accent} text-white`}>
-                  {user?.role === 'admin' ? 'Админ' : 'Пользователь'}
+                  {user?.role === 'admin' ? 'Админ' : user?.role === 'support' ? 'Поддержка' : 'Пользователь'}
                 </span>
               </div>
               <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
+              <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 === 'admin' && (
                 <button
                   onClick={() => setShowUsers(true)}

frontend/src/components/Users.jsx

@@ -50,13 +50,7 @@ export default function Users({ token }) {
     }
   };
 
-  const toggleRole = async (username, currentRole) => {
-    const newRole = currentRole === 'admin' ? 'user' : 'admin';
-    
-    if (!confirm(`Изменить роль пользователя ${username} на ${newRole}?`)) {
-      return;
-    }
-
+  const changeRole = async (username, newRole) => {
     try {
       await axios.put(
         `${API_URL}/api/users/${username}/role`,
@@ -108,7 +102,7 @@ export default function Users({ token }) {
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
                 <div className={`p-2 rounded ${
-                  user.role === 'admin' ? 'bg-blue-600' : 'bg-gray-700'
+                  user.role === 'admin' ? 'bg-blue-600' : user.role === 'support' ? 'bg-purple-600' : 'bg-gray-700'
                 }`}>
                   {user.role === 'admin' ? (
                     <Shield className="w-6 h-6" />
@@ -119,18 +113,21 @@ export default function Users({ token }) {
                 <div>
                   <h3 className="text-lg font-semibold">{user.username}</h3>
                   <p className="text-sm text-gray-400">
-                    {user.role === 'admin' ? 'Администратор' : 'Пользователь'}
+                    {user.role === 'admin' ? 'Администратор' : user.role === 'support' ? 'Тех. поддержка' : 'Пользователь'}
                   </p>
                 </div>
               </div>
 
               <div className="flex gap-2">
-                <button
-                  onClick={() => toggleRole(user.username, user.role)}
-                  className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm"
+                <select
+                  value={user.role}
+                  onChange={(e) => changeRole(user.username, e.target.value)}
+                  className="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded text-sm border border-gray-600 focus:outline-none focus:border-blue-500"
                 >
-                  {user.role === 'admin' ? 'Сделать пользователем' : 'Сделать админом'}
-                </button>
+                  <option value="user">Пользователь</option>
+                  <option value="support">Тех. поддержка</option>
+                  <option value="admin">Администратор</option>
+                </select>
                 <button
                   onClick={() => deleteUser(user.username)}
                   className="bg-red-600 hover:bg-red-700 p-2 rounded"
@@ -141,7 +138,7 @@ export default function Users({ token }) {
               </div>
             </div>
 
-            {user.role !== 'admin' && (
+            {user.role === 'user' && (
               <div>
                 <h4 className="text-sm font-medium mb-2 text-gray-400">
                   Доступ к серверам:
@@ -175,6 +172,12 @@ export default function Users({ token }) {
                 Администратор имеет доступ ко всем серверам
               </p>
             )}
+
+            {user.role === 'support' && (
+              <p className="text-sm text-gray-400">
+                Тех. поддержка имеет доступ к системе тикетов
+              </p>
+            )}
           </div>
         ))}
       </div>