Compare commits
2 Commits
bcca8fa298
...
e3fae7a02c
| Author | SHA1 | Date | |
|---|---|---|---|
| e3fae7a02c | |||
| d46d0f8253 |
@@ -1,10 +1,26 @@
|
|||||||
import React from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { FaUsers, FaShieldAlt } from "react-icons/fa";
|
import {
|
||||||
|
FaUsers,
|
||||||
|
FaShieldAlt,
|
||||||
|
FaSpinner,
|
||||||
|
FaExclamationCircle,
|
||||||
|
FaPlus,
|
||||||
|
} from "react-icons/fa";
|
||||||
import { useAdminStore } from "./store/useAdminStore";
|
import { useAdminStore } from "./store/useAdminStore";
|
||||||
import { UserCard } from "./components/UserCard";
|
import { UserCard } from "./components/UserCard";
|
||||||
|
import { CreateUserModal } from "./components/CreateUserModal";
|
||||||
|
|
||||||
export const AdminPanel: React.FC = () => {
|
export const AdminPanel: React.FC = () => {
|
||||||
const users = useAdminStore((s) => s.users);
|
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;
|
const activeCount = users.filter((u) => u.is_active).length;
|
||||||
|
|
||||||
@@ -45,24 +61,106 @@ export const AdminPanel: React.FC = () => {
|
|||||||
Управление пользователями
|
Управление пользователями
|
||||||
</h1>
|
</h1>
|
||||||
<span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
|
<span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
|
||||||
{activeCount} / {users.length} активных
|
{loading
|
||||||
|
? "Загрузка..."
|
||||||
|
: `${activeCount} / ${users.length} активных`}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</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 */}
|
{/* Users list */}
|
||||||
<div
|
{!loading && (
|
||||||
style={{
|
<div
|
||||||
display: "flex",
|
style={{
|
||||||
flexDirection: "column",
|
display: "flex",
|
||||||
gap: "12px",
|
flexDirection: "column",
|
||||||
}}
|
gap: "12px",
|
||||||
>
|
}}
|
||||||
{users.map((user) => (
|
>
|
||||||
<UserCard key={user.id} user={user} />
|
{users.map((user) => (
|
||||||
))}
|
<UserCard key={user.id} user={user} />
|
||||||
</div>
|
))}
|
||||||
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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() },
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import React from "react";
|
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 type { AdminUser, PermissionKey } from "../types";
|
||||||
import { useAdminStore } from "../store/useAdminStore";
|
import { useAdminStore } from "../store/useAdminStore";
|
||||||
|
|
||||||
@@ -14,8 +14,10 @@ const permissions: { key: PermissionKey; label: string }[] = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export const UserCard: React.FC<UserCardProps> = ({ user }) => {
|
export const UserCard: React.FC<UserCardProps> = ({ user }) => {
|
||||||
|
const users = useAdminStore((s) => s.users);
|
||||||
const toggleActive = useAdminStore((s) => s.toggleActive);
|
const toggleActive = useAdminStore((s) => s.toggleActive);
|
||||||
const togglePermission = useAdminStore((s) => s.togglePermission);
|
const togglePermission = useAdminStore((s) => s.togglePermission);
|
||||||
|
const deleteUser = useAdminStore((s) => s.deleteUser);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -28,7 +30,7 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
|
|||||||
opacity: user.is_active ? 1 : 0.6,
|
opacity: user.is_active ? 1 : 0.6,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Header: User info + Active toggle */}
|
{/* Header: User info + Active toggle + Delete */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
@@ -74,49 +76,79 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Active toggle */}
|
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
||||||
<div
|
{/* Active toggle */}
|
||||||
style={{
|
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||||||
display: "flex",
|
<span
|
||||||
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
|
|
||||||
style={{
|
style={{
|
||||||
width: "16px",
|
fontSize: "11px",
|
||||||
height: "16px",
|
color: user.is_active
|
||||||
borderRadius: "50%",
|
? "var(--success-text, #22c55e)"
|
||||||
backgroundColor: "#fff",
|
: "var(--error-text, #ef4444)",
|
||||||
position: "absolute",
|
|
||||||
top: "3px",
|
|
||||||
left: user.is_active ? "21px" : "3px",
|
|
||||||
transition: "left 0.2s",
|
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
{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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -144,7 +176,7 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
onClick={() => togglePermission(user.id, key)}
|
onClick={() => togglePermission(user.id, user.login, key, users)}
|
||||||
style={{
|
style={{
|
||||||
width: "18px",
|
width: "18px",
|
||||||
height: "18px",
|
height: "18px",
|
||||||
@@ -160,7 +192,10 @@ export const UserCard: React.FC<UserCardProps> = ({ user }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{user[key] && (
|
{user[key] && (
|
||||||
<FaCheck size={10} style={{ color: "var(--accent-text, #fff)" }} />
|
<FaCheck
|
||||||
|
size={10}
|
||||||
|
style={{ color: "var(--accent-text, #fff)" }}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{label}
|
{label}
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
export { AdminPanel } from "./AdminPanel";
|
export { AdminPanel } from "./AdminPanel";
|
||||||
export { useAdminStore } from "./store/useAdminStore";
|
export { useAdminStore } from "./store/useAdminStore";
|
||||||
|
export { adminApi } from "./api/admin.api";
|
||||||
export type { AdminUser } from "./types";
|
export type { AdminUser } from "./types";
|
||||||
|
|||||||
@@ -1,69 +1,129 @@
|
|||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
import type { AdminUser, PermissionKey } from "../types";
|
import type { AdminUser, PermissionKey } from "../types";
|
||||||
|
import { adminApi } from "../api/admin.api";
|
||||||
const mockUsers: AdminUser[] = [
|
import type { CreateUserPayload } from "../api/admin.api";
|
||||||
{
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
interface AdminState {
|
interface AdminState {
|
||||||
users: AdminUser[];
|
users: AdminUser[];
|
||||||
toggleActive: (id: string) => void;
|
loading: boolean;
|
||||||
togglePermission: (id: string, permission: PermissionKey) => void;
|
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) => ({
|
export const useAdminStore = create<AdminState>((set, get) => ({
|
||||||
users: mockUsers,
|
users: [],
|
||||||
|
loading: false,
|
||||||
|
error: null,
|
||||||
|
|
||||||
toggleActive: (id: string) =>
|
fetchUsers: async () => {
|
||||||
set((state) => ({
|
set({ loading: true, error: null });
|
||||||
users: state.users.map((u) =>
|
try {
|
||||||
u.id === id ? { ...u, is_active: !u.is_active } : u,
|
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) =>
|
createUser: async (payload) => {
|
||||||
set((state) => ({
|
try {
|
||||||
users: state.users.map((u) =>
|
await adminApi.createUser(payload);
|
||||||
u.id === id ? { ...u, [permission]: !u[permission] } : u,
|
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",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
}));
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user