nikita
@@ -0,0 +1,68 @@
|
||||
import React from "react";
|
||||
import { FaUsers, FaShieldAlt } from "react-icons/fa";
|
||||
import { useAdminStore } from "./store/useAdminStore";
|
||||
import { UserCard } from "./components/UserCard";
|
||||
|
||||
export const AdminPanel: React.FC = () => {
|
||||
const users = useAdminStore((s) => s.users);
|
||||
|
||||
const activeCount = users.filter((u) => u.is_active).length;
|
||||
|
||||
return (
|
||||
<div style={{ padding: "24px", maxWidth: "900px", margin: "0 auto" }}>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "24px",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
borderRadius: "8px",
|
||||
backgroundColor: "var(--accent)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<FaShieldAlt size={18} style={{ color: "var(--accent-text)" }} />
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
fontWeight: 600,
|
||||
color: "var(--text-primary)",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
Управление пользователями
|
||||
</h1>
|
||||
<span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
|
||||
{activeCount} / {users.length} активных
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Users list */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "12px",
|
||||
}}
|
||||
>
|
||||
{users.map((user) => (
|
||||
<UserCard key={user.id} user={user} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,172 @@
|
||||
import React from "react";
|
||||
import { FaUser, FaCheck, FaTimes } from "react-icons/fa";
|
||||
import type { AdminUser, PermissionKey } from "../types";
|
||||
import { useAdminStore } from "../store/useAdminStore";
|
||||
|
||||
interface UserCardProps {
|
||||
user: AdminUser;
|
||||
}
|
||||
|
||||
const permissions: { key: PermissionKey; label: string }[] = [
|
||||
{ key: "permission_view", label: "View" },
|
||||
{ key: "permission_manage_agent", label: "Manage Agent" },
|
||||
{ key: "permission_admin", label: "Admin" },
|
||||
];
|
||||
|
||||
export const UserCard: React.FC<UserCardProps> = ({ user }) => {
|
||||
const toggleActive = useAdminStore((s) => s.toggleActive);
|
||||
const togglePermission = useAdminStore((s) => s.togglePermission);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "16px",
|
||||
backgroundColor: "var(--card-bg)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "8px",
|
||||
transition: "all 0.2s",
|
||||
opacity: user.is_active ? 1 : 0.6,
|
||||
}}
|
||||
>
|
||||
{/* Header: User info + Active toggle */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "16px",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: user.is_active
|
||||
? "var(--accent)"
|
||||
: "var(--text-muted)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<FaUser size={16} style={{ color: "var(--card-bg)" }} />
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
fontWeight: 600,
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
>
|
||||
{user.name} {user.last_name}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "var(--text-secondary)",
|
||||
}}
|
||||
>
|
||||
{user.login}
|
||||
</div>
|
||||
</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
|
||||
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>
|
||||
</div>
|
||||
|
||||
{/* Permissions */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "16px",
|
||||
paddingTop: "12px",
|
||||
borderTop: "1px solid var(--border)",
|
||||
}}
|
||||
>
|
||||
{permissions.map(({ key, label }) => (
|
||||
<label
|
||||
key={key}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "12px",
|
||||
color: "var(--text-secondary)",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={() => togglePermission(user.id, key)}
|
||||
style={{
|
||||
width: "18px",
|
||||
height: "18px",
|
||||
borderRadius: "4px",
|
||||
border: "1px solid",
|
||||
borderColor: user[key] ? "var(--accent)" : "var(--border)",
|
||||
backgroundColor: user[key] ? "var(--accent)" : "transparent",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
transition: "all 0.15s",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{user[key] && (
|
||||
<FaCheck size={10} style={{ color: "var(--accent-text, #fff)" }} />
|
||||
)}
|
||||
</div>
|
||||
{label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
export { AdminPanel } from "./AdminPanel";
|
||||
export { useAdminStore } from "./store/useAdminStore";
|
||||
export type { AdminUser } from "./types";
|
||||
@@ -0,0 +1,69 @@
|
||||
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,
|
||||
},
|
||||
];
|
||||
|
||||
interface AdminState {
|
||||
users: AdminUser[];
|
||||
toggleActive: (id: string) => void;
|
||||
togglePermission: (id: string, permission: PermissionKey) => void;
|
||||
}
|
||||
|
||||
export const useAdminStore = create<AdminState>((set) => ({
|
||||
users: mockUsers,
|
||||
|
||||
toggleActive: (id: string) =>
|
||||
set((state) => ({
|
||||
users: state.users.map((u) =>
|
||||
u.id === id ? { ...u, is_active: !u.is_active } : u,
|
||||
),
|
||||
})),
|
||||
|
||||
togglePermission: (id: string, permission: PermissionKey) =>
|
||||
set((state) => ({
|
||||
users: state.users.map((u) =>
|
||||
u.id === id ? { ...u, [permission]: !u[permission] } : u,
|
||||
),
|
||||
})),
|
||||
}));
|
||||
@@ -0,0 +1,15 @@
|
||||
export interface AdminUser {
|
||||
id: string;
|
||||
login: string;
|
||||
name: string;
|
||||
last_name: string;
|
||||
is_active: boolean;
|
||||
permission_admin: boolean;
|
||||
permission_manage_agent: boolean;
|
||||
permission_view: boolean;
|
||||
}
|
||||
|
||||
export type PermissionKey =
|
||||
| "permission_admin"
|
||||
| "permission_manage_agent"
|
||||
| "permission_view";
|
||||
Reference in New Issue
Block a user