Add Ticket and add Role Support

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>