d3m0k1d/HellreigN
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: adminka2

Browse Source
This commit is contained in:
nikita
2026-04-04 21:41:48 +03:00
parent c6a9907822
commit d46d0f8253
6 changed files with 710 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/modules/admin/AdminPanel.tsx
+112 -14
View File
@@ -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
+88
View File
@@ -0,0 +1,88 @@
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() },
});
},
};
frontend/src/modules/admin/components/CreateUserModal.tsx
+310
View File
@@ -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
+80 -45
View File
@@ -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
View File
@@ -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
+119 -59
View File
@@ -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",
});
}
},
}));