AgentHub/client/src/components/settings/UsersSettings.tsx

/**
 * @file UsersSettings.tsx
 * @description Settings → Users, server mode only and only for an admin or
 * analyst (docs/SERVER-MODE.md): every account with its role, state,
 * workspaces, sessions and the tokens/$ it used in the last 7 and 30 days
 * (`GET /api/users`), and the audit log of staff reads of members' sessions
 * (`GET /api/users/audit`). Read-only — accounts are managed with
 * `agenthub users …` on the host.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { api, type ServerUserUsage, type AuditEntry } from "../../lib/api";
import { fmt, fmtCost, formatDateTime } from "../../lib/format";
import { SettingsSection } from "./SettingsRow";

export function UsersSettings() {
  const { t } = useTranslation("settings");
  const [users, setUsers] = useState<ServerUserUsage[] | null>(null);
  const [audit, setAudit] = useState<AuditEntry[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    api.users
      .list()
      .then((r) => setUsers(r.users))
      .catch((e: Error) => setError(e.message));
    api.users
      .audit()
      .then((r) => setAudit(r.entries))
      .catch(() => setAudit([]));
  }, []);

  return (
    <>
      <SettingsSection title={t("users.title")} description={t("users.description")}>
        {error && (
          <p role="alert" className="py-2 text-xs text-status-danger">
            {error}
          </p>
        )}
        {users && (
          <div className="overflow-x-auto">
            <table className="w-full text-sm" data-testid="users-table">
              <thead className="text-left text-[11px] uppercase text-fg-muted">
                <tr>
                  <th className="py-2 pr-3 font-medium">{t("users.name")}</th>
                  <th className="py-2 pr-3 font-medium">{t("users.role")}</th>
                  <th className="py-2 pr-3 text-right font-medium">{t("users.workspaces")}</th>
                  <th className="py-2 pr-3 text-right font-medium">{t("users.sessions")}</th>
                  <th className="py-2 pr-3 text-right font-medium">{t("users.last7d")}</th>
                  <th className="py-2 text-right font-medium">{t("users.last30d")}</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border/60">
                {users.map((u) => (
                  <tr key={u.id} className={u.disabled ? "text-fg-muted" : "text-fg-secondary"}>
                    <td className="py-2 pr-3">
                      {u.username}
                      {u.disabled && (
                        <span className="ml-2 text-[11px]">({t("users.disabled")})</span>
                      )}
                    </td>
                    <td className="py-2 pr-3">{u.role}</td>
                    <td className="py-2 pr-3 text-right tabular-nums">{u.workspaces}</td>
                    <td className="py-2 pr-3 text-right tabular-nums">{u.sessions}</td>
                    <td
                      className="py-2 pr-3 text-right tabular-nums"
                      title={t("users.tokens", { n: fmt(u.last7d.tokens) })}
                    >
                      {fmtCost(u.last7d.cost)}
                    </td>
                    <td
                      className="py-2 text-right tabular-nums"
                      title={t("users.tokens", { n: fmt(u.last30d.tokens) })}
                    >
                      {fmtCost(u.last30d.cost)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
        <p className="pt-2 text-[11px] text-fg-muted">{t("users.manageHint")}</p>
      </SettingsSection>
      <SettingsSection title={t("users.auditTitle")} description={t("users.auditDescription")}>
        {audit?.length === 0 && (
          <p className="py-2 text-sm text-fg-muted">{t("users.auditEmpty")}</p>
        )}
        {audit && audit.length > 0 && (
          <ul className="divide-y divide-border/60 text-xs" data-testid="audit-list">
            {audit.map((a) => (
              <li key={a.id} className="flex gap-3 py-1.5">
                <span className="w-36 flex-shrink-0 text-fg-muted">{formatDateTime(a.at)}</span>
                <span className="w-40 flex-shrink-0 text-fg-secondary">
                  {a.reader} → {a.owner}
                </span>
                <span className="min-w-0 truncate font-mono text-fg-muted">{a.path}</span>
              </li>
            ))}
          </ul>
        )}
      </SettingsSection>
    </>
  );
}