feat: adminka

2026-04-04 18:13:54 +03:00
parent 78f35f6811
commit 3430070df8
7 changed files with 350 additions and 728 deletions
@@ -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>
+  );
+};