nikita
173 lines
4.8 KiB
TypeScript
173 lines
4.8 KiB
TypeScript
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>
|
|
);
|
|
};
|