feat: add admin + deploy

frontend/src/app/providers/layout/navigation/navigation.tsx

@@ -1,5 +1,12 @@
 import { useNavigate, useLocation } from "react-router-dom";
-import { FaHome, FaServer, FaPalette, FaUser } from "react-icons/fa";
+import {
+  FaHome,
+  FaServer,
+  FaPalette,
+  FaUser,
+  FaUsers,
+  FaRocket,
+} from "react-icons/fa";
 import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 
 export const Navigation = () => {
@@ -9,7 +16,8 @@ export const Navigation = () => {
 
   const navItems = [
     { path: "/", label: "Главная", icon: FaHome },
-    { path: "/add-agents", label: "Агенты", icon: FaServer },
+    { path: "/add-agents", label: "Деплой", icon: FaRocket },
+    { path: "/admin", label: "Админка", icon: FaUsers, adminOnly: true },
     { path: "/themes", label: "Темы", icon: FaPalette },
   ];
 
@@ -40,36 +48,44 @@ export const Navigation = () => {
 
         {/* Навигация */}
         <div className="flex items-center gap-1">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const active = isActive(item.path);
-            return (
-              <button
-                key={item.path}
-                onClick={() => navigate(item.path)}
-                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all"
-                style={{
-                  backgroundColor: active ? "var(--accent)" : "transparent",
-                  color: active ? "var(--accent-text)" : "var(--text-secondary)",
-                }}
-                onMouseEnter={(e) => {
-                  if (!active) {
-                    e.currentTarget.style.backgroundColor = "var(--bg-secondary)";
-                    e.currentTarget.style.color = "var(--text-primary)";
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!active) {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                    e.currentTarget.style.color = "var(--text-secondary)";
-                  }
-                }}
-              >
-                <Icon size={12} />
-                <span>{item.label}</span>
-              </button>
-            );
-          })}
+          {navItems
+            .filter((item) => {
+              if (item.adminOnly && !user?.permission_admin) return false;
+              return true;
+            })
+            .map((item) => {
+              const Icon = item.icon;
+              const active = isActive(item.path);
+              return (
+                <button
+                  key={item.path}
+                  onClick={() => navigate(item.path)}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all"
+                  style={{
+                    backgroundColor: active ? "var(--accent)" : "transparent",
+                    color: active
+                      ? "var(--accent-text)"
+                      : "var(--text-secondary)",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!active) {
+                      e.currentTarget.style.backgroundColor =
+                        "var(--bg-secondary)";
+                      e.currentTarget.style.color = "var(--text-primary)";
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!active) {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                      e.currentTarget.style.color = "var(--text-secondary)";
+                    }
+                  }}
+                >
+                  <Icon size={12} />
+                  <span>{item.label}</span>
+                </button>
+              );
+            })}
         </div>
 
         {/* Профиль пользователя */}
@@ -82,7 +98,10 @@ export const Navigation = () => {
               >
                 <FaUser size={12} style={{ color: "var(--accent)" }} />
               </div>
-              <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
+              <span
+                className="text-xs"
+                style={{ color: "var(--text-secondary)" }}
+              >
                 {user.name}
               </span>
             </div>

frontend/src/app/providers/routing/routing.tsx

@@ -9,6 +9,7 @@ import { RegisterPage } from "@/pages/register.page";
 import { DefaultLayout } from "@/shared/layouts/DefaultLayout";
 import { AddAgentsPage } from "@/pages/add-agents.page";
 import { IDEPage } from "@/pages/ide.page";
+import { AdminPage } from "@/pages/admin.page";
 
 export const mockGraphData: GraphData = {
   nodes: [
@@ -119,6 +120,7 @@ export const Routing = () => {
           <Route path="/" element={<HomePage />} />
           <Route path="/themes" element={<ThemesPage />} />
           <Route path="/add-agents" element={<AddAgentsPage />} />
+          <Route path="/admin" element={<AdminPage />} />
           <Route path="/IDE" element={<IDEPage />} />
         </Route>
 

frontend/src/modules/agent/api/agent.api.service.ts

@@ -7,6 +7,12 @@ import type {
   LogFilters,
   InsertLogRequest,
   InsertLogsRequest,
+  TokenUpdate,
+  TokenUpdatePermissions,
+  TokenPasswordReset,
+  RegistrationRequest,
+  DeployAgentsRequest,
+  DeployResponse,
 } from "../types/agent.types";
 
 class AgentApiService {
@@ -20,7 +26,9 @@ class AgentApiService {
   }
 
   async getUsers(): Promise<TokenUser[]> {
-    const response = await apiClient.get<TokenUser[]>(`${this.authBasePath}/tokens`);
+    const response = await apiClient.get<TokenUser[]>(
+      `${this.authBasePath}/tokens`,
+    );
     return response.data;
   }
 
@@ -60,17 +68,85 @@ class AgentApiService {
   }
 
   async getDistinctAgents(): Promise<string[]> {
-    const response = await apiClient.get<string[]>(`${this.logsBasePath}/agents`);
+    const response = await apiClient.get<string[]>(
+      `${this.logsBasePath}/agents`,
+    );
     return response.data;
   }
 
   async getDistinctLevels(): Promise<string[]> {
-    const response = await apiClient.get<string[]>(`${this.logsBasePath}/levels`);
+    const response = await apiClient.get<string[]>(
+      `${this.logsBasePath}/levels`,
+    );
     return response.data;
   }
 
   async getDistinctServices(): Promise<string[]> {
-    const response = await apiClient.get<string[]>(`${this.logsBasePath}/services`);
+    const response = await apiClient.get<string[]>(
+      `${this.logsBasePath}/services`,
+    );
+    return response.data;
+  }
+
+  // User management methods
+  async getUserByLogin(login: string): Promise<TokenUser> {
+    const response = await apiClient.get<TokenUser>(
+      `${this.authBasePath}/users/${login}`,
+    );
+    return response.data;
+  }
+
+  async getInactiveUsers(): Promise<TokenUser[]> {
+    const response = await apiClient.get<TokenUser[]>(
+      `${this.authBasePath}/users/inactive`,
+    );
+    return response.data;
+  }
+
+  async updateUser(login: string, data: TokenUpdate): Promise<void> {
+    await apiClient.put(`${this.authBasePath}/users/${login}`, data);
+  }
+
+  async updateUserPermissions(
+    login: string,
+    data: TokenUpdatePermissions,
+  ): Promise<void> {
+    await apiClient.put(
+      `${this.authBasePath}/users/${login}/permissions`,
+      data,
+    );
+  }
+
+  async resetUserPassword(
+    login: string,
+    data: TokenPasswordReset,
+  ): Promise<void> {
+    await apiClient.put(`${this.authBasePath}/users/${login}/password`, data);
+  }
+
+  async activateUser(login: string): Promise<void> {
+    await apiClient.post(`${this.authBasePath}/users/${login}/activate`);
+  }
+
+  async deactivateUser(login: string): Promise<void> {
+    await apiClient.post(`${this.authBasePath}/users/${login}/deactivate`);
+  }
+
+  async createRegistrationToken(
+    data: RegistrationRequest,
+  ): Promise<Record<string, string>> {
+    const response = await apiClient.post<Record<string, string>>(
+      `${this.basePath}/register-token`,
+      data,
+    );
+    return response.data;
+  }
+
+  async deployAgents(data: DeployAgentsRequest): Promise<DeployResponse> {
+    const response = await apiClient.post<DeployResponse>(
+      `${this.basePath}/deploy`,
+      data,
+    );
     return response.data;
   }
 }

frontend/src/modules/agent/types/agent.types.ts

@@ -74,3 +74,51 @@ export interface LogFilters {
   limit?: number;
   offset?: number;
 }
+
+export interface TokenUpdate {
+  name?: string;
+  last_name?: string;
+}
+
+export interface TokenUpdatePermissions {
+  is_active?: boolean;
+  permission_admin?: boolean;
+  permission_manage_agent?: boolean;
+  permission_view?: boolean;
+}
+
+export interface TokenPasswordReset {
+  new_password: string;
+}
+
+export interface RegistrationRequest {
+  label: string;
+}
+
+export interface DeployResult {
+  agent_label: string;
+  error?: string;
+  ip: string;
+  success: boolean;
+  token?: string;
+}
+
+export interface DeployAgentsRequest {
+  servers: AgentDeployConfig[];
+}
+
+export interface AgentDeployConfig {
+  agentLabel: string;
+  authMethod: "key" | "password";
+  deployType: "docker" | "binary";
+  ip: string;
+  password?: string;
+  port?: number;
+  sshKey?: string;
+  user: string;
+}
+
+export interface DeployResponse {
+  message?: string;
+  results: DeployResult[];
+}

frontend/src/pages/add-agents.page.tsx

@@ -1,17 +1,18 @@
 import React, { useState } from "react";
 import { SSHAgentForm } from "../modules/agent/ui/SSHAgentForm";
 import { agentApiService } from "../modules/agent/api/agent.api.service";
-import { FiPlusCircle, FiSend } from "react-icons/fi";
-
-interface SSHAgentConfig {
-  user: string;
-  ip: string;
-  authMethod: string;
-  sshKey?: string;
-  password?: string;
-  extraFields: { key: string; value: string }[];
-  deployType: string;
-}
+import type { SSHAgentConfig } from "../modules/agent/ui/SSHAgentForm";
+import type {
+  DeployAgentsRequest,
+  DeployResult,
+} from "../modules/agent/types/agent.types";
+import {
+  FiPlusCircle,
+  FiSend,
+  FiCheck,
+  FiX,
+  FiAlertCircle,
+} from "react-icons/fi";
 
 const createEmptyAgentConfig = (): SSHAgentConfig => ({
   user: "",
@@ -67,21 +68,52 @@ export const AddAgentsPage: React.FC = () => {
     setSubmitError(null);
 
     try {
-      // Получаем текущих агентов для проверки подключения
-      const currentAgents = await agentApiService.getAgents();
-      console.log("Current agents:", currentAgents);
+      // Преобразуем данные из формы в формат API
+      const deployData: DeployAgentsRequest = {
+        servers: agents.map((agent) => ({
+          agentLabel: `${agent.ip}-${agent.user}`,
+          ip: agent.ip,
+          user: agent.user,
+          authMethod: agent.authMethod as "key" | "password",
+          deployType: (agent.deployType === "deploy"
+            ? "docker"
+            : agent.deployType) as "docker" | "binary",
+          port: 22,
+          ...(agent.authMethod === "key"
+            ? { sshKey: agent.sshKey }
+            : { password: agent.password }),
+        })),
+      };
 
-      // TODO: Реальный API вызов для развертывания агентов
-      // Пока выводим список подключенных агентов
-      setSubmitMessage(
-        `Успешно подключено ${currentAgents.length} агент(ов). Серверы: ${agents.length}`,
-      );
-      setAgents([createEmptyAgentConfig()]);
+      // Вызываем API для развертывания агентов
+      const response = await agentApiService.deployAgents(deployData);
+
+      // Формируем сообщение о результатах
+      const successCount = response.results.filter(
+        (r: DeployResult) => r.success,
+      ).length;
+      const failCount = response.results.length - successCount;
+
+      if (failCount === 0) {
+        setSubmitMessage(
+          `Успешно развернуто ${successCount} агент(ов) на ${agents.length} сервер(ах)`,
+        );
+        setAgents([createEmptyAgentConfig()]);
+      } else {
+        const errorMsg = response.results
+          .filter((r: DeployResult) => !r.success)
+          .map(
+            (r: DeployResult) => `${r.ip}: ${r.error || "Неизвестная ошибка"}`,
+          )
+          .join("\n");
+        setSubmitMessage(`Успешно: ${successCount}, Ошибки: ${failCount}`);
+        setSubmitError(`Ошибки при развертывании:\n${errorMsg}`);
+      }
     } catch (error) {
       setSubmitError(
         error instanceof Error
           ? error.message
-          : "Ошибка при подключении к серверам",
+          : "Ошибка при развертывании агентов",
       );
     } finally {
       setIsSubmitting(false);
@@ -167,20 +199,26 @@ export const AddAgentsPage: React.FC = () => {
                 color: "var(--success-text)",
               }}
             >
-              {submitMessage}
+              <div className="flex items-start gap-2">
+                <FiCheck className="mt-0.5 flex-shrink-0" size={16} />
+                <span>{submitMessage}</span>
+              </div>
             </div>
           )}
 
           {submitError && (
             <div
-              className="mb-6 p-4 rounded-lg border text-sm"
+              className="mb-6 p-4 rounded-lg border text-sm whitespace-pre-wrap"
               style={{
                 backgroundColor: "var(--error-bg)",
                 borderColor: "var(--error-border)",
                 color: "var(--error-text)",
               }}
             >
-              {submitError}
+              <div className="flex items-start gap-2">
+                <FiAlertCircle className="mt-0.5 flex-shrink-0" size={16} />
+                <span>{submitError}</span>
+              </div>
             </div>
           )}
 

frontend/src/pages/admin.page.tsx

@@ -0,0 +1,730 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { agentApiService } from "@/modules/agent";
+import type { TokenUser, TokenCreate, TokenUpdatePermissions, TokenPasswordReset } from "@/modules/agent";
+import { FiUsers, FiUserPlus, FiEdit2, FiTrash2, FiUnlock, FiLock, FiKey, FiX, FiCheck, FiSearch } from "react-icons/fi";
+
+export const AdminPage: React.FC = () => {
+  const [users, setUsers] = useState<TokenUser[]>([]);
+  const [inactiveUsers, setInactiveUsers] = useState<TokenUser[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<"active" | "inactive">("active");
+  const [searchQuery, setSearchQuery] = useState("");
+  
+  // Modal states
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showPasswordModal, setShowPasswordModal] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<TokenUser | null>(null);
+  
+  // Form states
+  const [createData, setCreateData] = useState<TokenCreate>({
+    login: "",
+    name: "",
+    last_name: "",
+    password: "",
+    permission_admin: false,
+    permission_manage_agent: false,
+    permission_view: false,
+    is_active: false,
+  });
+  
+  const [editData, setEditData] = useState<TokenUpdatePermissions>({
+    is_active: false,
+    permission_admin: false,
+    permission_manage_agent: false,
+    permission_view: false,
+  });
+  
+  const [passwordData, setPasswordData] = useState<TokenPasswordReset>({
+    new_password: "",
+  });
+
+  const fetchUsers = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const [active, inactive] = await Promise.all([
+        agentApiService.getUsers(),
+        agentApiService.getInactiveUsers(),
+      ]);
+      setUsers(active);
+      setInactiveUsers(inactive);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ошибка при загрузке пользователей");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  const handleCreateUser = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    try {
+      await agentApiService.createUser(createData);
+      setSuccessMessage("Пользователь успешно создан");
+      setShowCreateModal(false);
+      setCreateData({
+        login: "",
+        name: "",
+        last_name: "",
+        password: "",
+        permission_admin: false,
+        permission_manage_agent: false,
+        permission_view: false,
+        is_active: false,
+      });
+      await fetchUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ошибка при создании пользователя");
+    }
+  };
+
+  const handleUpdatePermissions = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedUser) return;
+    
+    setError(null);
+    try {
+      await agentApiService.updateUserPermissions(selectedUser.login, editData);
+      setSuccessMessage("Права пользователя обновлены");
+      setShowEditModal(false);
+      await fetchUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ошибка при обновлении прав");
+    }
+  };
+
+  const handleResetPassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedUser) return;
+    
+    setError(null);
+    try {
+      await agentApiService.resetUserPassword(selectedUser.login, passwordData);
+      setSuccessMessage("Пароль изменен");
+      setShowPasswordModal(false);
+      setPasswordData({ new_password: "" });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ошибка при сбросе пароля");
+    }
+  };
+
+  const handleActivateUser = async (login: string) => {
+    setError(null);
+    try {
+      await agentApiService.activateUser(login);
+      setSuccessMessage("Пользователь активирован");
+      await fetchUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ошибка при активации пользователя");
+    }
+  };
+
+  const handleDeactivateUser = async (login: string) => {
+    setError(null);
+    try {
+      await agentApiService.deactivateUser(login);
+      setSuccessMessage("Пользователь деактивирован");
+      await fetchUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ошибка при деактивации пользователя");
+    }
+  };
+
+  const handleDeleteUser = async (login: string) => {
+    if (!confirm(`Вы уверены, что хотите удалить пользователя ${login}?`)) return;
+    
+    setError(null);
+    try {
+      await agentApiService.deleteUser(login);
+      setSuccessMessage("Пользователь удален");
+      await fetchUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ошибка при удалении пользователя");
+    }
+  };
+
+  const openEditModal = (user: TokenUser) => {
+    setSelectedUser(user);
+    setEditData({
+      is_active: user.is_active,
+      permission_admin: user.permission_admin,
+      permission_manage_agent: user.permission_manage_agent,
+      permission_view: user.permission_view,
+    });
+    setShowEditModal(true);
+  };
+
+  const openPasswordModal = (user: TokenUser) => {
+    setSelectedUser(user);
+    setPasswordData({ new_password: "" });
+    setShowPasswordModal(true);
+  };
+
+  const filteredUsers = (activeTab === "active" ? users : inactiveUsers).filter(
+    (user) =>
+      user.login.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.last_name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const inputStyle: React.CSSProperties = {
+    width: "100%",
+    padding: "10px 12px",
+    border: "1px solid var(--border)",
+    borderRadius: "8px",
+    backgroundColor: "var(--input-bg)",
+    color: "var(--text-primary)",
+    fontSize: "14px",
+  };
+
+  const labelStyle: React.CSSProperties = {
+    display: "block",
+    marginBottom: "8px",
+    color: "var(--text-secondary)",
+    fontSize: "14px",
+    fontWeight: 500,
+  };
+
+  const buttonBaseStyle: React.CSSProperties = {
+    padding: "8px 16px",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "14px",
+    fontWeight: 500,
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+  };
+
+  return (
+    <div
+      className="min-h-screen py-8 px-4"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <div style={{ maxWidth: "1200px", margin: "0 auto" }}>
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-4 mb-4">
+            <div
+              className="w-14 h-14 rounded-xl flex items-center justify-center"
+              style={{ backgroundColor: "var(--bg-secondary)" }}
+            >
+              <FiUsers className="w-7 h-7" style={{ color: "var(--accent)" }} />
+            </div>
+            <div>
+              <h1
+                className="text-3xl font-bold mb-1"
+                style={{ color: "var(--text-primary)" }}
+              >
+                Управление пользователями
+              </h1>
+              <p style={{ color: "var(--text-secondary)", fontSize: "16px" }}>
+                Администрирование учетных записей
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Messages */}
+        {successMessage && (
+          <div
+            className="mb-6 p-4 rounded-lg border text-sm"
+            style={{
+              backgroundColor: "var(--success-bg)",
+              borderColor: "var(--success-border)",
+              color: "var(--success-text)",
+            }}
+          >
+            <div className="flex items-center justify-between">
+              <span>{successMessage}</span>
+              <button onClick={() => setSuccessMessage(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "inherit" }}>
+                <FiX size={16} />
+              </button>
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div
+            className="mb-6 p-4 rounded-lg border text-sm"
+            style={{
+              backgroundColor: "var(--error-bg)",
+              borderColor: "var(--error-border)",
+              color: "var(--error-text)",
+            }}
+          >
+            <div className="flex items-center justify-between">
+              <span>{error}</span>
+              <button onClick={() => setError(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "inherit" }}>
+                <FiX size={16} />
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Tabs and Actions */}
+        <div className="mb-6">
+          <div className="flex items-center justify-between mb-4">
+            {/* Tabs */}
+            <div className="flex gap-2">
+              <button
+                onClick={() => setActiveTab("active")}
+                className="px-4 py-2 rounded-lg border transition-all font-medium"
+                style={{
+                  backgroundColor: activeTab === "active" ? "var(--accent)" : "var(--input-bg)",
+                  color: activeTab === "active" ? "var(--accent-text)" : "var(--text-primary)",
+                  borderColor: activeTab === "active" ? "var(--accent)" : "var(--border)",
+                }}
+              >
+                Активные ({users.length})
+              </button>
+              <button
+                onClick={() => setActiveTab("inactive")}
+                className="px-4 py-2 rounded-lg border transition-all font-medium"
+                style={{
+                  backgroundColor: activeTab === "inactive" ? "var(--accent)" : "var(--input-bg)",
+                  color: activeTab === "inactive" ? "var(--accent-text)" : "var(--text-primary)",
+                  borderColor: activeTab === "inactive" ? "var(--accent)" : "var(--border)",
+                }}
+              >
+                Неактивные ({inactiveUsers.length})
+              </button>
+            </div>
+
+            {/* Create Button */}
+            <button
+              onClick={() => setShowCreateModal(true)}
+              className="flex items-center gap-2 px-4 py-2 rounded-lg transition-all font-medium"
+              style={{
+                backgroundColor: "var(--button-primary)",
+                color: "var(--button-primary-text)",
+                boxShadow: "0 4px 14px var(--shadow-color)",
+              }}
+            >
+              <FiUserPlus size={16} />
+              Создать пользователя
+            </button>
+          </div>
+
+          {/* Search */}
+          <div className="relative">
+            <FiSearch
+              style={{
+                position: "absolute",
+                left: "12px",
+                top: "50%",
+                transform: "translateY(-50%)",
+                color: "var(--text-muted)",
+              }}
+            />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Поиск по логину, имени или фамилии..."
+              className="w-full pl-10 pr-4 py-2.5 rounded-lg border"
+              style={{
+                backgroundColor: "var(--input-bg)",
+                borderColor: "var(--border)",
+                color: "var(--text-primary)",
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Users Table */}
+        {isLoading ? (
+          <div className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
+            Загрузка...
+          </div>
+        ) : filteredUsers.length === 0 ? (
+          <div
+            className="text-center py-12 rounded-xl border border-dashed"
+            style={{ color: "var(--text-muted)", borderColor: "var(--border)" }}
+          >
+            Пользователи не найдены
+          </div>
+        ) : (
+          <div
+            className="rounded-xl border overflow-hidden"
+            style={{
+              backgroundColor: "var(--card-bg)",
+              borderColor: "var(--border)",
+            }}
+          >
+            <table className="w-full">
+              <thead>
+                <tr style={{ backgroundColor: "var(--bg-secondary)" }}>
+                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Логин</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Имя</th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Фамилия</th>
+                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Админ</th>
+                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Управление</th>
+                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Просмотр</th>
+                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Действия</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredUsers.map((user, index) => (
+                  <tr
+                    key={user.id}
+                    className="border-t"
+                    style={{
+                      borderColor: "var(--border)",
+                      backgroundColor: index % 2 === 0 ? "var(--card-bg)" : "var(--bg-secondary)",
+                    }}
+                  >
+                    <td className="px-4 py-3 font-mono text-sm" style={{ color: "var(--text-primary)" }}>{user.login}</td>
+                    <td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>{user.name}</td>
+                    <td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>{user.last_name}</td>
+                    <td className="px-4 py-3 text-center">
+                      {user.permission_admin ? (
+                        <FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
+                      ) : (
+                        <FiX style={{ color: "var(--error-text)", display: "inline" }} />
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-center">
+                      {user.permission_manage_agent ? (
+                        <FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
+                      ) : (
+                        <FiX style={{ color: "var(--error-text)", display: "inline" }} />
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-center">
+                      {user.permission_view ? (
+                        <FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
+                      ) : (
+                        <FiX style={{ color: "var(--error-text)", display: "inline" }} />
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-center">
+                      <div className="flex items-center justify-center gap-2">
+                        <button
+                          onClick={() => openEditModal(user)}
+                          className="p-2 rounded-lg transition-all"
+                          style={{
+                            backgroundColor: "var(--accent)",
+                            color: "var(--accent-text)",
+                          }}
+                          title="Редактировать права"
+                        >
+                          <FiEdit2 size={14} />
+                        </button>
+                        <button
+                          onClick={() => openPasswordModal(user)}
+                          className="p-2 rounded-lg transition-all"
+                          style={{
+                            backgroundColor: "var(--warning-bg)",
+                            color: "var(--warning-text)",
+                          }}
+                          title="Сбросить пароль"
+                        >
+                          <FiKey size={14} />
+                        </button>
+                        {activeTab === "active" ? (
+                          <button
+                            onClick={() => handleDeactivateUser(user.login)}
+                            className="p-2 rounded-lg transition-all"
+                            style={{
+                              backgroundColor: "var(--warning-bg)",
+                              color: "var(--warning-text)",
+                            }}
+                            title="Деактивировать"
+                          >
+                            <FiLock size={14} />
+                          </button>
+                        ) : (
+                          <button
+                            onClick={() => handleActivateUser(user.login)}
+                            className="p-2 rounded-lg transition-all"
+                            style={{
+                              backgroundColor: "var(--success-bg)",
+                              color: "var(--success-text)",
+                              border: "1px solid var(--success-border)",
+                            }}
+                            title="Активировать"
+                          >
+                            <FiUnlock size={14} />
+                          </button>
+                        )}
+                        <button
+                          onClick={() => handleDeleteUser(user.login)}
+                          className="p-2 rounded-lg transition-all"
+                          style={{
+                            backgroundColor: "var(--error-bg)",
+                            color: "var(--error-text)",
+                            border: "1px solid var(--error-border)",
+                          }}
+                          title="Удалить"
+                        >
+                          <FiTrash2 size={14} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Create User Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div
+            className="rounded-2xl shadow-2xl border w-full max-w-md"
+            style={{ backgroundColor: "var(--card-bg)" }}
+          >
+            <div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
+              <h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>Создать пользователя</h2>
+              <button onClick={() => setShowCreateModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
+                <FiX size={24} />
+              </button>
+            </div>
+            <form onSubmit={handleCreateUser} className="p-6 space-y-4">
+              <div>
+                <label style={labelStyle}>Логин *</label>
+                <input
+                  type="text"
+                  value={createData.login}
+                  onChange={(e) => setCreateData({ ...createData, login: e.target.value })}
+                  required
+                  style={inputStyle}
+                />
+              </div>
+              <div>
+                <label style={labelStyle}>Имя *</label>
+                <input
+                  type="text"
+                  value={createData.name}
+                  onChange={(e) => setCreateData({ ...createData, name: e.target.value })}
+                  required
+                  style={inputStyle}
+                />
+              </div>
+              <div>
+                <label style={labelStyle}>Фамилия *</label>
+                <input
+                  type="text"
+                  value={createData.last_name}
+                  onChange={(e) => setCreateData({ ...createData, last_name: e.target.value })}
+                  required
+                  style={inputStyle}
+                />
+              </div>
+              <div>
+                <label style={labelStyle}>Пароль *</label>
+                <input
+                  type="password"
+                  value={createData.password}
+                  onChange={(e) => setCreateData({ ...createData, password: e.target.value })}
+                  required
+                  style={inputStyle}
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={createData.permission_admin}
+                    onChange={(e) => setCreateData({ ...createData, permission_admin: e.target.checked })}
+                  />
+                  <span style={{ color: "var(--text-primary)" }}>Администратор</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={createData.permission_manage_agent}
+                    onChange={(e) => setCreateData({ ...createData, permission_manage_agent: e.target.checked })}
+                  />
+                  <span style={{ color: "var(--text-primary)" }}>Управление агентами</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={createData.permission_view}
+                    onChange={(e) => setCreateData({ ...createData, permission_view: e.target.checked })}
+                  />
+                  <span style={{ color: "var(--text-primary)" }}>Просмотр</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={createData.is_active}
+                    onChange={(e) => setCreateData({ ...createData, is_active: e.target.checked })}
+                  />
+                  <span style={{ color: "var(--text-primary)" }}>Активен сразу</span>
+                </label>
+              </div>
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowCreateModal(false)}
+                  className="flex-1 px-4 py-2 rounded-lg border transition-all"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    color: "var(--text-primary)",
+                  }}
+                >
+                  Отмена
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 rounded-lg transition-all"
+                  style={{
+                    backgroundColor: "var(--button-primary)",
+                    color: "var(--button-primary-text)",
+                  }}
+                >
+                  Создать
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Permissions Modal */}
+      {showEditModal && selectedUser && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div
+            className="rounded-2xl shadow-2xl border w-full max-w-md"
+            style={{ backgroundColor: "var(--card-bg)" }}
+          >
+            <div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
+              <h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>
+                Редактировать: {selectedUser.login}
+              </h2>
+              <button onClick={() => setShowEditModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
+                <FiX size={24} />
+              </button>
+            </div>
+            <form onSubmit={handleUpdatePermissions} className="p-6 space-y-4">
+              <div className="space-y-2">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={editData.permission_admin || false}
+                    onChange={(e) => setEditData({ ...editData, permission_admin: e.target.checked })}
+                  />
+                  <span style={{ color: "var(--text-primary)" }}>Администратор</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={editData.permission_manage_agent || false}
+                    onChange={(e) => setEditData({ ...editData, permission_manage_agent: e.target.checked })}
+                  />
+                  <span style={{ color: "var(--text-primary)" }}>Управление агентами</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={editData.permission_view || false}
+                    onChange={(e) => setEditData({ ...editData, permission_view: e.target.checked })}
+                  />
+                  <span style={{ color: "var(--text-primary)" }}>Просмотр</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={editData.is_active || false}
+                    onChange={(e) => setEditData({ ...editData, is_active: e.target.checked })}
+                  />
+                  <span style={{ color: "var(--text-primary)" }}>Активен</span>
+                </label>
+              </div>
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowEditModal(false)}
+                  className="flex-1 px-4 py-2 rounded-lg border transition-all"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    color: "var(--text-primary)",
+                  }}
+                >
+                  Отмена
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 rounded-lg transition-all"
+                  style={{
+                    backgroundColor: "var(--button-primary)",
+                    color: "var(--button-primary-text)",
+                  }}
+                >
+                  Сохранить
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Reset Password Modal */}
+      {showPasswordModal && selectedUser && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div
+            className="rounded-2xl shadow-2xl border w-full max-w-md"
+            style={{ backgroundColor: "var(--card-bg)" }}
+          >
+            <div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
+              <h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>
+                Сброс пароля: {selectedUser.login}
+              </h2>
+              <button onClick={() => setShowPasswordModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
+                <FiX size={24} />
+              </button>
+            </div>
+            <form onSubmit={handleResetPassword} className="p-6 space-y-4">
+              <div>
+                <label style={labelStyle}>Новый пароль *</label>
+                <input
+                  type="password"
+                  value={passwordData.new_password}
+                  onChange={(e) => setPasswordData({ new_password: e.target.value })}
+                  required
+                  style={inputStyle}
+                />
+              </div>
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowPasswordModal(false)}
+                  className="flex-1 px-4 py-2 rounded-lg border transition-all"
+                  style={{
+                    backgroundColor: "var(--input-bg)",
+                    color: "var(--text-primary)",
+                  }}
+                >
+                  Отмена
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 rounded-lg transition-all"
+                  style={{
+                    backgroundColor: "var(--button-primary)",
+                    color: "var(--button-primary-text)",
+                  }}
+                >
+                  Сбросить
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};