Merge branch 'frontend' of https://gitea.d3m0k1d.ru/d3m0k1d/HellreigN into frontend

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

@@ -15,6 +15,7 @@ import {
 import { useAgentStore } from "@/app/providers/layout/store/agent.store";
 import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 import { Graph, type GraphData } from "@/modules/graph";
+import { adminApi } from "@/modules/admin/api/admin.api";
 
 interface SidebarProps {
   isOpen?: boolean;
@@ -36,6 +37,12 @@ export const Sidebar: React.FC<SidebarProps> = ({
     new Set(agents.map((a) => a.label)),
   );
 
+  // Token generation state
+  const [tokenLabel, setTokenLabel] = useState("");
+  const [generatedToken, setGeneratedToken] = useState<string | null>(null);
+  const [tokenGenerating, setTokenGenerating] = useState(false);
+  const [tokenError, setTokenError] = useState<string | null>(null);
+
   const toggleAgent = (label: string) => {
     setExpandedAgents((prev) => {
       const next = new Set(prev);
@@ -90,13 +97,38 @@ export const Sidebar: React.FC<SidebarProps> = ({
   }, [agents]);
 
   const handleCopyToken = () => {
-    if (token) {
-      navigator.clipboard.writeText(token);
+    const tokenToCopy = generatedToken || token;
+    if (tokenToCopy) {
+      navigator.clipboard.writeText(tokenToCopy);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     }
   };
 
+  const handleGenerateToken = async () => {
+    if (!tokenLabel.trim()) return;
+    setTokenGenerating(true);
+    setTokenError(null);
+    try {
+      const newToken = await adminApi.generateToken(tokenLabel.trim());
+      setGeneratedToken(newToken);
+    } catch (e) {
+      setTokenError(
+        e instanceof Error ? e.message : "Failed to generate token",
+      );
+    } finally {
+      setTokenGenerating(false);
+    }
+  };
+
+  const handleCloseTokenModal = () => {
+    setShowTokenModal(false);
+    setTokenLabel("");
+    setGeneratedToken(null);
+    setTokenError(null);
+    setCopied(false);
+  };
+
   if (!isOpen) {
     return (
       <button
@@ -439,7 +471,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
         <div
           className="fixed inset-0 z-[60] flex items-center justify-center p-4"
           style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
-          onClick={() => setShowTokenModal(false)}
+          onClick={handleCloseTokenModal}
         >
           <div
             className="w-full max-w-md rounded-xl shadow-2xl border"
@@ -459,11 +491,11 @@ export const Sidebar: React.FC<SidebarProps> = ({
                   className="text-sm font-semibold"
                   style={{ color: "var(--text-primary)" }}
                 >
-                  Ваш токен доступа
+                  Генерация токена
                 </h2>
               </div>
               <button
-                onClick={() => setShowTokenModal(false)}
+                onClick={handleCloseTokenModal}
                 className="p-1 rounded transition-colors"
                 style={{ color: "var(--text-secondary)" }}
               >
@@ -472,27 +504,72 @@ export const Sidebar: React.FC<SidebarProps> = ({
             </div>
 
             <div className="p-4 space-y-3">
-              <div>
-                <label
-                  className="block text-xs font-medium mb-2"
-                  style={{ color: "var(--text-secondary)" }}
-                >
-                  Токен
-                </label>
+              {/* Error */}
+              {tokenError && (
                 <div
-                  className="flex items-center gap-2 rounded-lg p-3 border"
+                  className="text-xs p-2 rounded"
                   style={{
-                    backgroundColor: "var(--bg-secondary)",
-                    borderColor: "var(--border)",
+                    backgroundColor: "rgba(239,68,68,0.1)",
+                    border: "1px solid rgba(239,68,68,0.3)",
+                    color: "var(--error-text, #ef4444)",
                   }}
                 >
-                  <code
-                    className="flex-1 text-xs font-mono break-all"
-                    style={{ color: "var(--text-primary)" }}
+                  {tokenError}
+                </div>
+              )}
+
+              {/* Label input */}
+              {!generatedToken && (
+                <div>
+                  <label
+                    className="block text-xs font-medium mb-2"
+                    style={{ color: "var(--text-secondary)" }}
                   >
-                    {token || "Токен не найден"}
-                  </code>
-                  {token && (
+                    Имя токена
+                  </label>
+                  <input
+                    type="text"
+                    value={tokenLabel}
+                    onChange={(e) => setTokenLabel(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && tokenLabel.trim()) {
+                        handleGenerateToken();
+                      }
+                    }}
+                    placeholder="Введите имя..."
+                    autoFocus
+                    className="w-full px-3 py-2 rounded-lg border text-sm focus:outline-none transition-all"
+                    style={{
+                      backgroundColor: "var(--input-bg)",
+                      borderColor: "var(--border)",
+                      color: "var(--text-primary)",
+                    }}
+                  />
+                </div>
+              )}
+
+              {/* Generated token */}
+              {generatedToken && (
+                <div>
+                  <label
+                    className="block text-xs font-medium mb-2"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    Токен
+                  </label>
+                  <div
+                    className="flex items-center gap-2 rounded-lg p-3 border"
+                    style={{
+                      backgroundColor: "var(--bg-secondary)",
+                      borderColor: "var(--border)",
+                    }}
+                  >
+                    <code
+                      className="flex-1 text-xs font-mono break-all"
+                      style={{ color: "var(--text-primary)" }}
+                    >
+                      {generatedToken}
+                    </code>
                     <button
                       onClick={handleCopyToken}
                       className="p-1.5 rounded transition-colors"
@@ -507,20 +584,56 @@ export const Sidebar: React.FC<SidebarProps> = ({
                         <FaCopy size={12} />
                       )}
                     </button>
-                  )}
+                  </div>
                 </div>
-              </div>
+              )}
 
-              <button
-                onClick={() => setShowTokenModal(false)}
-                className="w-full py-2 rounded-lg text-xs font-medium transition-colors"
-                style={{
-                  backgroundColor: "var(--accent)",
-                  color: "var(--accent-text)",
-                }}
-              >
-                Закрыть
-              </button>
+              {/* Buttons */}
+              <div className="flex gap-2">
+                {generatedToken && (
+                  <button
+                    onClick={() => {
+                      setGeneratedToken(null);
+                      setTokenLabel("");
+                    }}
+                    className="flex-1 py-2 rounded-lg text-xs font-medium transition-colors"
+                    style={{
+                      backgroundColor: "var(--bg-secondary)",
+                      color: "var(--text-primary)",
+                      border: "1px solid var(--border)",
+                    }}
+                  >
+                    Новый токен
+                  </button>
+                )}
+                <button
+                  onClick={
+                    generatedToken ? handleCloseTokenModal : handleGenerateToken
+                  }
+                  disabled={tokenGenerating || !tokenLabel.trim()}
+                  className="flex-1 py-2 rounded-lg text-xs font-medium transition-colors"
+                  style={{
+                    backgroundColor:
+                      tokenGenerating || (!generatedToken && !tokenLabel.trim())
+                        ? "var(--bg-secondary)"
+                        : "var(--accent)",
+                    color:
+                      tokenGenerating || (!generatedToken && !tokenLabel.trim())
+                        ? "var(--text-muted)"
+                        : "var(--accent-text)",
+                    cursor:
+                      tokenGenerating || (!generatedToken && !tokenLabel.trim())
+                        ? "default"
+                        : "pointer",
+                  }}
+                >
+                  {tokenGenerating
+                    ? "Генерация..."
+                    : generatedToken
+                      ? "Готово"
+                      : "Создать"}
+                </button>
+              </div>
             </div>
           </div>
         </div>

frontend/src/modules/admin/AdminPanel.tsx

@@ -1,10 +1,26 @@
-import React from "react";
-import { FaUsers, FaShieldAlt } from "react-icons/fa";
+import React, { useEffect, useState } from "react";
+import {
+  FaUsers,
+  FaShieldAlt,
+  FaSpinner,
+  FaExclamationCircle,
+  FaPlus,
+} from "react-icons/fa";
 import { useAdminStore } from "./store/useAdminStore";
 import { UserCard } from "./components/UserCard";
+import { CreateUserModal } from "./components/CreateUserModal";
 
 export const AdminPanel: React.FC = () => {
   const users = useAdminStore((s) => s.users);
+  const loading = useAdminStore((s) => s.loading);
+  const error = useAdminStore((s) => s.error);
+  const fetchUsers = useAdminStore((s) => s.fetchUsers);
+
+  const [showCreateModal, setShowCreateModal] = useState(false);
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
 
   const activeCount = users.filter((u) => u.is_active).length;
 
@@ -45,24 +61,106 @@ export const AdminPanel: React.FC = () => {
               Управление пользователями
             </h1>
             <span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
-              {activeCount} / {users.length} активных
+              {loading
+                ? "Загрузка..."
+                : `${activeCount} / ${users.length} активных`}
             </span>
           </div>
         </div>
+
+        <button
+          onClick={() => setShowCreateModal(true)}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            padding: "8px 16px",
+            backgroundColor: "var(--accent)",
+            color: "var(--accent-text)",
+            border: "none",
+            borderRadius: "6px",
+            cursor: "pointer",
+            fontSize: "13px",
+            fontWeight: 500,
+          }}
+        >
+          <FaPlus size={12} />
+          Добавить
+        </button>
       </div>
 
+      {/* Error */}
+      {error && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "12px",
+            backgroundColor: "rgba(239,68,68,0.1)",
+            border: "1px solid rgba(239,68,68,0.3)",
+            borderRadius: "8px",
+            color: "var(--error-text, #ef4444)",
+            marginBottom: "16px",
+          }}
+        >
+          <FaExclamationCircle />
+          <span style={{ fontSize: "13px" }}>{error}</span>
+        </div>
+      )}
+
+      {/* Loading */}
+      {loading && users.length === 0 && (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            padding: "60px 0",
+          }}
+        >
+          <FaSpinner
+            className="animate-spin"
+            size={24}
+            style={{ color: "var(--accent)" }}
+          />
+        </div>
+      )}
+
       {/* Users list */}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "12px",
-        }}
-      >
-        {users.map((user) => (
-          <UserCard key={user.id} user={user} />
-        ))}
-      </div>
+      {!loading && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+          }}
+        >
+          {users.map((user) => (
+            <UserCard key={user.id} user={user} />
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loading && users.length === 0 && (
+        <div
+          style={{
+            textAlign: "center",
+            padding: "40px 0",
+            color: "var(--text-muted)",
+          }}
+        >
+          <p style={{ fontSize: "14px" }}>
+            Нет зарегистрированных пользователей
+          </p>
+        </div>
+      )}
+
+      {/* Create user modal */}
+      <CreateUserModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+      />
     </div>
   );
 };

frontend/src/modules/admin/api/admin.api.ts

@@ -0,0 +1,97 @@
+import { apiClient } from "@/shared/api/axios.instance";
+
+const getAuthHeader = () => {
+  const raw = localStorage.getItem("auth-storage");
+  if (raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed?.state?.token) return `bearer ${parsed.state.token}`;
+    } catch {}
+  }
+  return "";
+};
+
+export interface AdminUserDto {
+  id: number;
+  login: string;
+  name: string;
+  last_name: string;
+  is_active: boolean;
+  permission_admin: boolean;
+  permission_manage_agent: boolean;
+  permission_view: boolean;
+  token: string;
+}
+
+export interface CreateUserPayload {
+  login: string;
+  name: string;
+  last_name: string;
+  password: string;
+  is_active: boolean;
+  permission_admin: boolean;
+  permission_manage_agent: boolean;
+  permission_view: boolean;
+}
+
+export interface PermissionsPayload {
+  is_active: boolean;
+  permission_admin: boolean;
+  permission_manage_agent: boolean;
+  permission_view: boolean;
+}
+
+export const adminApi = {
+  getUsers: async (): Promise<AdminUserDto[]> => {
+    const res = await apiClient.get<AdminUserDto[]>("/auth/tokens", {
+      headers: { Authorization: getAuthHeader() },
+    });
+    return res.data;
+  },
+
+  createUser: async (payload: CreateUserPayload): Promise<void> => {
+    await apiClient.post("/auth/token", payload, {
+      headers: { Authorization: getAuthHeader() },
+    });
+  },
+
+  deleteUser: async (login: string): Promise<void> => {
+    await apiClient.delete(`/auth/tokens/${login}`, {
+      headers: { Authorization: getAuthHeader() },
+    });
+  },
+
+  activateUser: async (login: string): Promise<void> => {
+    await apiClient.post(
+      `/auth/users/${login}/activate`,
+      {},
+      { headers: { Authorization: getAuthHeader() } },
+    );
+  },
+
+  deactivateUser: async (login: string): Promise<void> => {
+    await apiClient.post(
+      `/auth/users/${login}/deactivate`,
+      {},
+      { headers: { Authorization: getAuthHeader() } },
+    );
+  },
+
+  updatePermissions: async (
+    login: string,
+    payload: PermissionsPayload,
+  ): Promise<void> => {
+    await apiClient.put(`/auth/users/${login}/permissions`, payload, {
+      headers: { Authorization: getAuthHeader() },
+    });
+  },
+
+  generateToken: async (label: string): Promise<string> => {
+    const res = await apiClient.post<{ token: string }>(
+      "/agents/register-token",
+      { label },
+      { headers: { Authorization: getAuthHeader() } },
+    );
+    return res.data.token;
+  },
+};

frontend/src/modules/admin/components/CreateUserModal.tsx

@@ -0,0 +1,310 @@
+import React, { useState } from "react";
+import { FaTimes, FaPlus } from "react-icons/fa";
+import { useAdminStore } from "../store/useAdminStore";
+
+interface CreateUserModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const CreateUserModal: React.FC<CreateUserModalProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const createUser = useAdminStore((s) => s.createUser);
+
+  const [form, setForm] = useState({
+    login: "",
+    name: "",
+    last_name: "",
+    password: "",
+    is_active: true,
+    permission_admin: false,
+    permission_manage_agent: false,
+    permission_view: true,
+  });
+
+  const [loading, setLoading] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async () => {
+    if (!form.login || !form.password) return;
+    setLoading(true);
+    await createUser(form);
+    setLoading(false);
+    setForm({
+      login: "",
+      name: "",
+      last_name: "",
+      password: "",
+      is_active: true,
+      permission_admin: false,
+      permission_manage_agent: false,
+      permission_view: true,
+    });
+    onClose();
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0,0,0,0.6)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 2000,
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          backgroundColor: "var(--card-bg)",
+          borderRadius: "8px",
+          padding: "24px",
+          minWidth: "380px",
+          border: "1px solid var(--border)",
+          boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: "20px",
+          }}
+        >
+          <h3
+            style={{
+              margin: 0,
+              fontSize: "16px",
+              fontWeight: 600,
+              color: "var(--text-primary)",
+            }}
+          >
+            Создать пользователя
+          </h3>
+          <button
+            onClick={onClose}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "var(--text-secondary)",
+              cursor: "pointer",
+              padding: "4px",
+            }}
+          >
+            <FaTimes size={14} />
+          </button>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+          {/* Login */}
+          <div>
+            <label
+              style={{
+                fontSize: "12px",
+                color: "var(--text-secondary)",
+                marginBottom: "4px",
+                display: "block",
+              }}
+            >
+              Логин
+            </label>
+            <input
+              type="text"
+              value={form.login}
+              onChange={(e) => setForm({ ...form, login: e.target.value })}
+              style={{
+                width: "100%",
+                padding: "8px",
+                backgroundColor: "var(--input-bg)",
+                border: "1px solid var(--border)",
+                borderRadius: "6px",
+                color: "var(--text-primary)",
+                fontSize: "13px",
+                outline: "none",
+              }}
+            />
+          </div>
+
+          {/* Password */}
+          <div>
+            <label
+              style={{
+                fontSize: "12px",
+                color: "var(--text-secondary)",
+                marginBottom: "4px",
+                display: "block",
+              }}
+            >
+              Пароль
+            </label>
+            <input
+              type="password"
+              value={form.password}
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+              style={{
+                width: "100%",
+                padding: "8px",
+                backgroundColor: "var(--input-bg)",
+                border: "1px solid var(--border)",
+                borderRadius: "6px",
+                color: "var(--text-primary)",
+                fontSize: "13px",
+                outline: "none",
+              }}
+            />
+          </div>
+
+          {/* Name + Last name */}
+          <div style={{ display: "flex", gap: "8px" }}>
+            <div style={{ flex: 1 }}>
+              <label
+                style={{
+                  fontSize: "12px",
+                  color: "var(--text-secondary)",
+                  marginBottom: "4px",
+                  display: "block",
+                }}
+              >
+                Имя
+              </label>
+              <input
+                type="text"
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+                style={{
+                  width: "100%",
+                  padding: "8px",
+                  backgroundColor: "var(--input-bg)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "6px",
+                  color: "var(--text-primary)",
+                  fontSize: "13px",
+                  outline: "none",
+                }}
+              />
+            </div>
+            <div style={{ flex: 1 }}>
+              <label
+                style={{
+                  fontSize: "12px",
+                  color: "var(--text-secondary)",
+                  marginBottom: "4px",
+                  display: "block",
+                }}
+              >
+                Фамилия
+              </label>
+              <input
+                type="text"
+                value={form.last_name}
+                onChange={(e) =>
+                  setForm({ ...form, last_name: e.target.value })
+                }
+                style={{
+                  width: "100%",
+                  padding: "8px",
+                  backgroundColor: "var(--input-bg)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "6px",
+                  color: "var(--text-primary)",
+                  fontSize: "13px",
+                  outline: "none",
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Permissions */}
+          <div style={{ paddingTop: "8px" }}>
+            <label
+              style={{
+                fontSize: "12px",
+                color: "var(--text-secondary)",
+                marginBottom: "8px",
+                display: "block",
+              }}
+            >
+              Разрешения
+            </label>
+            <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+              {[
+                { key: "is_active", label: "Active" },
+                { key: "permission_view", label: "View" },
+                { key: "permission_manage_agent", label: "Manage Agent" },
+                { key: "permission_admin", label: "Admin" },
+              ].map(({ key, label }) => (
+                <label
+                  key={key}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    cursor: "pointer",
+                    fontSize: "12px",
+                    color: "var(--text-secondary)",
+                    userSelect: "none",
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    checked={
+                      form[key as keyof typeof form] as boolean
+                    }
+                    onChange={(e) =>
+                      setForm({ ...form, [key]: e.target.checked })
+                    }
+                    style={{ accentColor: "var(--accent)" }}
+                  />
+                  {label}
+                </label>
+              ))}
+            </div>
+          </div>
+
+          {/* Submit */}
+          <button
+            onClick={handleSubmit}
+            disabled={loading || !form.login || !form.password}
+            style={{
+              marginTop: "8px",
+              padding: "10px",
+              backgroundColor:
+                loading || !form.login || !form.password
+                  ? "var(--bg-secondary)"
+                  : "var(--accent)",
+              color:
+                loading || !form.login || !form.password
+                  ? "var(--text-muted)"
+                  : "var(--accent-text)",
+              border: "none",
+              borderRadius: "6px",
+              cursor:
+                loading || !form.login || !form.password
+                  ? "default"
+                  : "pointer",
+              fontSize: "13px",
+              fontWeight: 500,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "6px",
+            }}
+          >
+            <FaPlus size={12} />
+            {loading ? "Создание..." : "Создать"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/modules/admin/components/UserCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { FaUser, FaCheck, FaTimes } from "react-icons/fa";
+import { FaUser, FaCheck, FaTrash } from "react-icons/fa";
 import type { AdminUser, PermissionKey } from "../types";
 import { useAdminStore } from "../store/useAdminStore";
 
@@ -14,8 +14,10 @@ const permissions: { key: PermissionKey; label: string }[] = [
 ];
 
 export const UserCard: React.FC<UserCardProps> = ({ user }) => {
+  const users = useAdminStore((s) => s.users);
   const toggleActive = useAdminStore((s) => s.toggleActive);
   const togglePermission = useAdminStore((s) => s.togglePermission);
+  const deleteUser = useAdminStore((s) => s.deleteUser);
 
   return (
     <div
@@ -28,7 +30,7 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
         opacity: user.is_active ? 1 : 0.6,
       }}
     >
-      {/* Header: User info + Active toggle */}
+      {/* Header: User info + Active toggle + Delete */}
       <div
         style={{
           display: "flex",
@@ -74,49 +76,79 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
           </div>
         </div>
 
-        {/* Active toggle */}
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-          }}
-        >
-          <span
-            style={{
-              fontSize: "11px",
-              color: user.is_active
-                ? "var(--success-text, #22c55e)"
-                : "var(--error-text, #ef4444)",
-            }}
-          >
-            {user.is_active ? "Active" : "Inactive"}
-          </span>
-          <button
-            onClick={() => toggleActive(user.id)}
-            style={{
-              width: "40px",
-              height: "22px",
-              borderRadius: "11px",
-              border: "none",
-              backgroundColor: user.is_active ? "#22c55e" : "#6b7280",
-              cursor: "pointer",
-              position: "relative",
-              transition: "background-color 0.2s",
-            }}
-          >
-            <div
+        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+          {/* Active toggle */}
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <span
               style={{
-                width: "16px",
-                height: "16px",
-                borderRadius: "50%",
-                backgroundColor: "#fff",
-                position: "absolute",
-                top: "3px",
-                left: user.is_active ? "21px" : "3px",
-                transition: "left 0.2s",
+                fontSize: "11px",
+                color: user.is_active
+                  ? "var(--success-text, #22c55e)"
+                  : "var(--error-text, #ef4444)",
               }}
-            />
+            >
+              {user.is_active ? "Active" : "Inactive"}
+            </span>
+            <button
+              onClick={() => toggleActive(user.id, user.login, user.is_active)}
+              style={{
+                width: "40px",
+                height: "22px",
+                borderRadius: "11px",
+                border: "none",
+                backgroundColor: user.is_active ? "#22c55e" : "#6b7280",
+                cursor: "pointer",
+                position: "relative",
+                transition: "background-color 0.2s",
+              }}
+            >
+              <div
+                style={{
+                  width: "16px",
+                  height: "16px",
+                  borderRadius: "50%",
+                  backgroundColor: "#fff",
+                  position: "absolute",
+                  top: "3px",
+                  left: user.is_active ? "21px" : "3px",
+                  transition: "left 0.2s",
+                }}
+              />
+            </button>
+          </div>
+
+          {/* Delete button */}
+          <button
+            onClick={() => {
+              if (window.confirm(`Удалить пользователя "${user.login}"?`)) {
+                deleteUser(user.id, user.login);
+              }
+            }}
+            title="Удалить"
+            style={{
+              background: "transparent",
+              border: "1px solid transparent",
+              color: "var(--text-muted)",
+              cursor: "pointer",
+              padding: "6px",
+              borderRadius: "6px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "all 0.15s",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = "var(--error-text, #ef4444)";
+              e.currentTarget.style.backgroundColor = "rgba(239,68,68,0.1)";
+              e.currentTarget.style.borderColor = "rgba(239,68,68,0.3)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = "var(--text-muted)";
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.borderColor = "transparent";
+            }}
+          >
+            <FaTrash size={13} />
           </button>
         </div>
       </div>
@@ -144,7 +176,7 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
             }}
           >
             <div
-              onClick={() => togglePermission(user.id, key)}
+              onClick={() => togglePermission(user.id, user.login, key, users)}
               style={{
                 width: "18px",
                 height: "18px",
@@ -160,7 +192,10 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
               }}
             >
               {user[key] && (
-                <FaCheck size={10} style={{ color: "var(--accent-text, #fff)" }} />
+                <FaCheck
+                  size={10}
+                  style={{ color: "var(--accent-text, #fff)" }}
+                />
               )}
             </div>
             {label}

frontend/src/modules/admin/index.ts

@@ -1,3 +1,4 @@
 export { AdminPanel } from "./AdminPanel";
 export { useAdminStore } from "./store/useAdminStore";
+export { adminApi } from "./api/admin.api";
 export type { AdminUser } from "./types";

frontend/src/modules/admin/store/useAdminStore.ts

@@ -1,69 +1,129 @@
 import { create } from "zustand";
 import type { AdminUser, PermissionKey } from "../types";
-
-const mockUsers: AdminUser[] = [
-  {
-    id: "1",
-    login: "admin",
-    name: "Иван",
-    last_name: "Петров",
-    is_active: true,
-    permission_admin: true,
-    permission_manage_agent: true,
-    permission_view: true,
-  },
-  {
-    id: "2",
-    login: "operator",
-    name: "Анна",
-    last_name: "Сидорова",
-    is_active: true,
-    permission_admin: false,
-    permission_manage_agent: true,
-    permission_view: true,
-  },
-  {
-    id: "3",
-    login: "viewer",
-    name: "Сергей",
-    last_name: "Козлов",
-    is_active: true,
-    permission_admin: false,
-    permission_manage_agent: false,
-    permission_view: true,
-  },
-  {
-    id: "4",
-    login: "dev_user",
-    name: "Мария",
-    last_name: "Новикова",
-    is_active: false,
-    permission_admin: false,
-    permission_manage_agent: true,
-    permission_view: true,
-  },
-];
+import { adminApi } from "../api/admin.api";
+import type { CreateUserPayload } from "../api/admin.api";
 
 interface AdminState {
   users: AdminUser[];
-  toggleActive: (id: string) => void;
-  togglePermission: (id: string, permission: PermissionKey) => void;
+  loading: boolean;
+  error: string | null;
+  fetchUsers: () => Promise<void>;
+  createUser: (payload: CreateUserPayload) => Promise<void>;
+  deleteUser: (id: string, login: string) => Promise<void>;
+  toggleActive: (id: string, login: string, current: boolean) => Promise<void>;
+  togglePermission: (
+    id: string,
+    login: string,
+    permission: PermissionKey,
+    users: AdminUser[],
+  ) => Promise<void>;
 }
 
-export const useAdminStore = create<AdminState>((set) => ({
-  users: mockUsers,
+export const useAdminStore = create<AdminState>((set, get) => ({
+  users: [],
+  loading: false,
+  error: null,
 
-  toggleActive: (id: string) =>
-    set((state) => ({
-      users: state.users.map((u) =>
-        u.id === id ? { ...u, is_active: !u.is_active } : u,
-      ),
-    })),
+  fetchUsers: async () => {
+    set({ loading: true, error: null });
+    try {
+      const data = await adminApi.getUsers();
+      set({
+        users: data.map((u) => ({
+          id: String(u.id),
+          login: u.login,
+          name: u.name,
+          last_name: u.last_name,
+          is_active: u.is_active,
+          permission_admin: u.permission_admin,
+          permission_manage_agent: u.permission_manage_agent,
+          permission_view: u.permission_view,
+        })),
+        loading: false,
+      });
+    } catch (e) {
+      set({
+        error: e instanceof Error ? e.message : "Failed to fetch users",
+        loading: false,
+      });
+    }
+  },
 
-  togglePermission: (id: string, permission: PermissionKey) =>
-    set((state) => ({
-      users: state.users.map((u) =>
-        u.id === id ? { ...u, [permission]: !u[permission] } : u,
-      ),
-    })),
+  createUser: async (payload) => {
+    try {
+      await adminApi.createUser(payload);
+      await get().fetchUsers();
+    } catch (e) {
+      set({ error: e instanceof Error ? e.message : "Failed to create user" });
+    }
+  },
+
+  deleteUser: async (id, login) => {
+    try {
+      await adminApi.deleteUser(login);
+      set((state) => ({
+        users: state.users.filter((u) => u.id !== id),
+      }));
+    } catch (e) {
+      set({ error: e instanceof Error ? e.message : "Failed to delete user" });
+    }
+  },
+
+  toggleActive: async (id, login, current) => {
+    try {
+      if (current) {
+        await adminApi.deactivateUser(login);
+      } else {
+        await adminApi.activateUser(login);
+      }
+      set((state) => ({
+        users: state.users.map((u) =>
+          u.id === id ? { ...u, is_active: !current } : u,
+        ),
+      }));
+    } catch (e) {
+      set({
+        error: e instanceof Error ? e.message : "Failed to toggle active",
+      });
+    }
+  },
+
+  togglePermission: async (id, login, permission, users) => {
+    const user = users.find((u) => u.id === id);
+    if (!user) return;
+
+    const newPermissions = {
+      is_active: user.is_active,
+      permission_admin:
+        permission === "permission_admin"
+          ? !user.permission_admin
+          : user.permission_admin,
+      permission_manage_agent:
+        permission === "permission_manage_agent"
+          ? !user.permission_manage_agent
+          : user.permission_manage_agent,
+      permission_view:
+        permission === "permission_view"
+          ? !user.permission_view
+          : user.permission_view,
+    };
+
+    try {
+      await adminApi.updatePermissions(login, newPermissions);
+      set((state) => ({
+        users: state.users.map((u) =>
+          u.id === id
+            ? {
+                ...u,
+                [permission]: !u[permission],
+              }
+            : u,
+        ),
+      }));
+    } catch (e) {
+      set({
+        error: e instanceof Error ? e.message : "Failed to update permissions",
+      });
+    }
+  },
 }));

frontend/src/modules/graph/components/GraphControls.tsx

@@ -52,7 +52,7 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
   return (
     <div className="flex items-center justify-end gap-2 mt-2">
       {/* Режим создания связи */}
-      <button
+      {/* <button
         onClick={toggleLinkMode}
         className="flex w-full items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
         style={{
@@ -62,7 +62,7 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
       >
         <FiLink />
         <span>{isLinkMode ? "Создание связи..." : "Добавить связь"}</span>
-      </button>
+      </button> */}
 
       {/* Зум + */}
       <button