feat(frontend): Administração > Usuários e Perfis (convidar, trocar papel)
POST /users (convidar) fecha uma lacuna real: até aqui só dava pra adicionar alguém a um tenant criando o tenant inteiro ou via script. Se o e-mail já existe na plataforma, só adiciona membership+role (sem tocar na senha); se não existe, cria a conta com senha gerada e revelada uma única vez. PATCH /users/:id/role troca o papel (substitui, 1 papel por tenant). GET /roles novo (tenant-facing) — versão de /platform/roles filtrada só pras roles de escopo TENANT, sem expor que platform_super_admin existe. Frontend: /app/administracao/usuarios (convidar com papel, trocar papel de qualquer membro exceto o próprio usuário logado) e /perfis (o que cada papel pode fazer, só leitura). Testado ponta a ponta contra a API real: convidada conta nova com senha revelada, convidado usuário com papel Agente, trocado pra Supervisor via PATCH, confirmado persistido. Perfis mostra as 3 roles de tenant certas. Smoke test nas 19 telas do tenant + 10 telas platform, todas 200. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BFaBaBSQGhyXGEgtTYZGV8
This commit is contained in:
15
apps/frontend/src/app/app/administracao/perfis/page.tsx
Normal file
15
apps/frontend/src/app/app/administracao/perfis/page.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { requireSession } from "@/lib/session";
|
||||
import { apiFetch } from "@/lib/api";
|
||||
import { PerfisView } from "./perfis-view";
|
||||
|
||||
interface TenantRole {
|
||||
key: string;
|
||||
name: string;
|
||||
permissionKeys: string[];
|
||||
}
|
||||
|
||||
export default async function PerfisPage() {
|
||||
const session = await requireSession();
|
||||
const roles = await apiFetch<TenantRole[]>("/roles", session.accessToken);
|
||||
return <PerfisView roles={roles} />;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { ShieldCheck } from "lucide-react";
|
||||
import { Panel } from "@/components/ui/panel";
|
||||
import { Pill } from "@/components/ui/pill";
|
||||
|
||||
interface TenantRole {
|
||||
key: string;
|
||||
name: string;
|
||||
permissionKeys: string[];
|
||||
}
|
||||
|
||||
export function PerfisView({ roles }: { roles: TenantRole[] }) {
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-foreground">Perfis</h1>
|
||||
<p className="mt-1 max-w-2xl text-sm text-muted-foreground">
|
||||
O que cada papel pode fazer neste tenant (agente.md secao 142-145) — use isso pra decidir qual papel dar
|
||||
a alguém em Administração > Usuários. Papéis são definidos pelo sistema, sem criar um customizado
|
||||
ainda.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{roles.map((role) => (
|
||||
<Panel key={role.key}>
|
||||
<div className="flex items-center gap-2 border-b border-border px-5 py-4">
|
||||
<ShieldCheck className="h-4 w-4 text-muted-foreground" aria-hidden />
|
||||
<h2 className="text-sm font-semibold text-foreground">{role.name}</h2>
|
||||
<span className="text-xs text-muted-foreground">{role.permissionKeys.length} permission(ões)</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5 p-5">
|
||||
{role.permissionKeys.map((key) => (
|
||||
<Pill key={key}>{key}</Pill>
|
||||
))}
|
||||
</div>
|
||||
</Panel>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
apps/frontend/src/app/app/administracao/usuarios/actions.ts
Normal file
52
apps/frontend/src/app/app/administracao/usuarios/actions.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
"use server";
|
||||
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { requireSession } from "@/lib/session";
|
||||
import { apiFetch, ApiError } from "@/lib/api";
|
||||
|
||||
function extractErrorMessage(err: unknown): string {
|
||||
if (err instanceof ApiError) {
|
||||
try {
|
||||
const parsed = JSON.parse(err.message);
|
||||
if (Array.isArray(parsed.message)) return parsed.message.join(" ");
|
||||
if (typeof parsed.message === "string") return parsed.message;
|
||||
} catch {
|
||||
// corpo não era JSON
|
||||
}
|
||||
return err.message || "Falha inesperada na API.";
|
||||
}
|
||||
return "Falha inesperada. Tente novamente.";
|
||||
}
|
||||
|
||||
export interface InviteUserInput {
|
||||
email: string;
|
||||
name: string;
|
||||
roleKey: string;
|
||||
}
|
||||
|
||||
export interface InviteUserResult {
|
||||
user: { id: string; email: string; name: string };
|
||||
temporaryPassword: string | null;
|
||||
}
|
||||
|
||||
export async function inviteUser(input: InviteUserInput): Promise<({ ok: true } & InviteUserResult) | { ok: false; error: string }> {
|
||||
const session = await requireSession();
|
||||
try {
|
||||
const result = await apiFetch<InviteUserResult>("/users", session.accessToken, { method: "POST", body: JSON.stringify(input) });
|
||||
revalidatePath("/app/administracao/usuarios");
|
||||
return { ok: true, ...result };
|
||||
} catch (err) {
|
||||
return { ok: false, error: extractErrorMessage(err) };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateUserRole(id: string, roleKey: string): Promise<{ ok: true } | { ok: false; error: string }> {
|
||||
const session = await requireSession();
|
||||
try {
|
||||
await apiFetch<void>(`/users/${id}/role`, session.accessToken, { method: "PATCH", body: JSON.stringify({ roleKey }) });
|
||||
revalidatePath("/app/administracao/usuarios");
|
||||
return { ok: true };
|
||||
} catch (err) {
|
||||
return { ok: false, error: extractErrorMessage(err) };
|
||||
}
|
||||
}
|
||||
11
apps/frontend/src/app/app/administracao/usuarios/page.tsx
Normal file
11
apps/frontend/src/app/app/administracao/usuarios/page.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { requireSession } from "@/lib/session";
|
||||
import { apiFetch } from "@/lib/api";
|
||||
import type { TenantMember } from "@/lib/admin-types";
|
||||
import { UsuariosView } from "./usuarios-view";
|
||||
|
||||
export default async function AdminUsuariosPage() {
|
||||
const session = await requireSession();
|
||||
const members = await apiFetch<TenantMember[]>("/users", session.accessToken);
|
||||
const me = await apiFetch<{ id: string }>("/auth/me", session.accessToken);
|
||||
return <UsuariosView members={members} currentUserId={me.id} />;
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Check, Plus, User as UserIcon, X } from "lucide-react";
|
||||
import { Panel, PanelHeader } from "@/components/ui/panel";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input, Select, FieldLabel } from "@/components/ui/input";
|
||||
import { Pill } from "@/components/ui/pill";
|
||||
import { SecretReveal } from "@/components/ui/secret-reveal";
|
||||
import { TBody, TD, TH, THead, TR, Table } from "@/components/ui/table";
|
||||
import { TENANT_ROLE_OPTIONS, type TenantMember } from "@/lib/admin-types";
|
||||
import { inviteUser, updateUserRole } from "./actions";
|
||||
|
||||
export function UsuariosView({ members, currentUserId }: { members: TenantMember[]; currentUserId: string }) {
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-foreground">Usuários</h1>
|
||||
<p className="mt-1 max-w-2xl text-sm text-muted-foreground">
|
||||
Quem tem acesso a este tenant (agente.md secao 141, 169) — convidar um e-mail novo cria a conta (senha
|
||||
revelada uma única vez); um e-mail já existente na plataforma só ganha acesso a este tenant, sem mexer
|
||||
na senha dele.
|
||||
</p>
|
||||
</div>
|
||||
<Button type="button" onClick={() => setShowForm((s) => !s)}>
|
||||
{showForm ? <X className="h-4 w-4" aria-hidden /> : <Plus className="h-4 w-4" aria-hidden />}
|
||||
{showForm ? "Cancelar" : "Convidar usuário"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{showForm && <InviteForm onDone={() => setShowForm(false)} />}
|
||||
|
||||
<Panel>
|
||||
<PanelHeader title="Usuários deste tenant" description={`${members.length} usuário(s)`} />
|
||||
<Table>
|
||||
<THead>
|
||||
<TR>
|
||||
<TH>Nome</TH>
|
||||
<TH>E-mail</TH>
|
||||
<TH>Status</TH>
|
||||
<TH>Papel</TH>
|
||||
</TR>
|
||||
</THead>
|
||||
<TBody>
|
||||
{members.map((m) => (
|
||||
<MemberRow key={m.id} member={m} isSelf={m.id === currentUserId} />
|
||||
))}
|
||||
</TBody>
|
||||
</Table>
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InviteForm({ onDone }: { onDone: () => void }) {
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [roleKey, setRoleKey] = useState(TENANT_ROLE_OPTIONS[2].key);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [created, setCreated] = useState<{ email: string; temporaryPassword: string | null } | null>(null);
|
||||
|
||||
function onSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
if (!email.trim() || !name.trim()) {
|
||||
setError("E-mail e nome são obrigatórios.");
|
||||
return;
|
||||
}
|
||||
startTransition(async () => {
|
||||
const result = await inviteUser({ email: email.trim(), name: name.trim(), roleKey });
|
||||
if (!result.ok) {
|
||||
setError(result.error);
|
||||
return;
|
||||
}
|
||||
setCreated({ email: result.user.email, temporaryPassword: result.temporaryPassword });
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
if (created) {
|
||||
return (
|
||||
<Panel className="space-y-4 p-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-status-green/15 text-status-green">
|
||||
<Check className="h-5 w-5" aria-hidden />
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{created.temporaryPassword ? "Usuário criado" : "Acesso concedido"}: {created.email}
|
||||
</p>
|
||||
{!created.temporaryPassword && (
|
||||
<p className="text-sm text-muted-foreground">E-mail já existia na plataforma — senha dele não foi alterada.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{created.temporaryPassword && <SecretReveal label="Senha temporária" value={created.temporaryPassword} />}
|
||||
<div className="flex justify-end">
|
||||
<Button type="button" size="sm" onClick={onDone}>
|
||||
Fechar
|
||||
</Button>
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Panel className="p-5">
|
||||
<form onSubmit={onSubmit} noValidate className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div>
|
||||
<FieldLabel htmlFor="iu-name">Nome</FieldLabel>
|
||||
<Input id="iu-name" value={name} onChange={(e) => setName(e.target.value)} disabled={pending} />
|
||||
</div>
|
||||
<div>
|
||||
<FieldLabel htmlFor="iu-email">E-mail</FieldLabel>
|
||||
<Input id="iu-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={pending} />
|
||||
</div>
|
||||
<div>
|
||||
<FieldLabel htmlFor="iu-role">Papel</FieldLabel>
|
||||
<Select id="iu-role" value={roleKey} onChange={(e) => setRoleKey(e.target.value)} disabled={pending}>
|
||||
{TENANT_ROLE_OPTIONS.map((r) => (
|
||||
<option key={r.key} value={r.key}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
{error && (
|
||||
<p role="alert" className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? "Convidando…" : "Convidar"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
function MemberRow({ member, isSelf }: { member: TenantMember; isSelf: boolean }) {
|
||||
const router = useRouter();
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [roleKey, setRoleKey] = useState(member.role?.key ?? TENANT_ROLE_OPTIONS[2].key);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [pending, startTransition] = useTransition();
|
||||
|
||||
function onSave() {
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
const result = await updateUserRole(member.id, roleKey);
|
||||
if (!result.ok) {
|
||||
setError(result.error);
|
||||
return;
|
||||
}
|
||||
setEditing(false);
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<TR>
|
||||
<TD>
|
||||
<span className="flex items-center gap-2 font-medium text-foreground">
|
||||
<UserIcon className="h-3.5 w-3.5 text-muted-foreground" aria-hidden />
|
||||
{member.name}
|
||||
</span>
|
||||
</TD>
|
||||
<TD className="text-muted-foreground">{member.email}</TD>
|
||||
<TD>
|
||||
<Pill tone={member.status === "ACTIVE" ? "accent" : "neutral"}>{member.status === "ACTIVE" ? "Ativo" : "Desabilitado"}</Pill>
|
||||
</TD>
|
||||
<TD>
|
||||
{editing ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Select value={roleKey} onChange={(e) => setRoleKey(e.target.value)} className="h-8 w-40" disabled={pending}>
|
||||
{TENANT_ROLE_OPTIONS.map((r) => (
|
||||
<option key={r.key} value={r.key}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<Button type="button" size="sm" onClick={onSave} disabled={pending}>
|
||||
{pending ? "…" : "Salvar"}
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)} disabled={pending}>
|
||||
Cancelar
|
||||
</Button>
|
||||
{error && <span className="text-xs text-destructive">{error}</span>}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Pill>{member.role?.name ?? "sem papel"}</Pill>
|
||||
{!isSelf && (
|
||||
<Button type="button" variant="ghost" size="sm" onClick={() => setEditing(true)}>
|
||||
Trocar
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TD>
|
||||
</TR>
|
||||
);
|
||||
}
|
||||
@@ -162,6 +162,18 @@ export const TENANT_NAV: NavSection[] = [
|
||||
{
|
||||
label: "Administração",
|
||||
icon: ShieldCheck,
|
||||
children: [{ label: "Usuários" }, { label: "Perfis" }, { label: "Configurações" }],
|
||||
children: [
|
||||
{
|
||||
label: "Usuários",
|
||||
href: "/app/administracao/usuarios",
|
||||
description: "Quem tem acesso a este tenant — convidar e trocar papel",
|
||||
},
|
||||
{
|
||||
label: "Perfis",
|
||||
href: "/app/administracao/perfis",
|
||||
description: "O que cada papel pode fazer neste tenant",
|
||||
},
|
||||
{ label: "Configurações" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
18
apps/frontend/src/lib/admin-types.ts
Normal file
18
apps/frontend/src/lib/admin-types.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export interface RoleInfo {
|
||||
key: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface TenantMember {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
status: "ACTIVE" | "DISABLED";
|
||||
role: RoleInfo | null;
|
||||
}
|
||||
|
||||
export const TENANT_ROLE_OPTIONS: { key: string; name: string }[] = [
|
||||
{ key: "tenant_admin", name: "Tenant Admin" },
|
||||
{ key: "supervisor", name: "Supervisor" },
|
||||
{ key: "agent", name: "Agente" },
|
||||
];
|
||||
Reference in New Issue
Block a user