rl-core-front 0.4.0 → 0.5.0

package/src/features/profile/profile-screen.tsx

@@ -4,7 +4,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Camera, ShieldCheck, Trash2 } from "lucide-react";
 import type { JSX } from "react";
 import { useEffect, useRef, useState } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import * as yup from "yup";
 
 import { api } from "#core/_services/api/axios.factory";
@@ -106,8 +106,13 @@ export function ProfileScreen(): JSX.Element {
   const {
     register,
     handleSubmit,
+    control,
     formState: { errors },
   } = useForm({ resolver: yupResolver(schema) });
+  const [newPassword = "", confirm = ""] = useWatch({
+    control,
+    name: ["newPassword", "confirm"],
+  });
   const onChangePassword = handleSubmit(async (data) => {
     const res = await password.run(
       () => authService.changePassword(data.currentPassword, data.newPassword),
@@ -314,6 +319,7 @@ export function ProfileScreen(): JSX.Element {
                 >
                   <PasswordField
                     error={!!errors.newPassword}
+                    rulesFor={newPassword}
                     {...register("newPassword")}
                   />
                 </Field>
@@ -323,6 +329,7 @@ export function ProfileScreen(): JSX.Element {
                 >
                   <PasswordField
                     error={!!errors.confirm}
+                    rulesFor={confirm}
                     {...register("confirm")}
                   />
                 </Field>

package/src/features/rbac/panels/groups-panel.tsx

@@ -5,6 +5,7 @@ import { Pencil, Plus, Trash2 } from "lucide-react";
 import type { JSX } from "react";
 import { useEffect, useMemo, useState } from "react";
 
+import { fullName } from "#core/_utils/user";
 import {
   Button,
   Checkbox,
@@ -20,11 +21,7 @@ import {
   Input,
   Label,
   RowActions,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+  SimpleSelect,
 } from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
 import { RecordAuditButton } from "#core/features/audit/components";
@@ -33,11 +30,19 @@ import {
   rbacService,
   Role,
 } from "#core/features/rbac/services/rbac.service";
+import type { User } from "#core/features/users/services/users.service";
+import { usersService } from "#core/features/users/services/users.service";
 import { useConfirm } from "#core/hooks/use-confirm";
 import { RequestOperation, useRequest } from "#core/hooks/use-request";
 
 const TYPES = ["company", "department", "team"];
 
+/**
+ * Quantos candidatos a gerente o `<select>` carrega. Lista longa em combo não
+ * se navega — passando disso, o caminho é a busca da tela de usuários.
+ */
+const MANAGER_OPTIONS_LIMIT = 100;
+
 export function GroupsPanel(): JSX.Element {
   const { run, loading } = useRequest();
   const { t } = useI18n();
@@ -45,22 +50,29 @@ export function GroupsPanel(): JSX.Element {
   const { hasPermission } = useAuth();
   const [rows, setRows] = useState<Group[]>([]);
   const [roles, setRoles] = useState<Role[]>([]);
+  const [candidates, setCandidates] = useState<User[]>([]);
   const [open, setOpen] = useState(false);
   const [editing, setEditing] = useState<Group | null>(null);
   const [form, setForm] = useState({
     name: "",
     description: "",
     type: "team",
+    managerId: "",
     roleIds: [] as string[],
   });
 
   const load = async (): Promise<void> => {
-    const [g, r] = await Promise.all([
+    const [g, r, u] = await Promise.all([
       run(() => rbacService.listGroups()),
       run(() => rbacService.listRoles()),
+      // Quem pode virar gerente. Uma página basta: o `<select>` não é lugar de
+      // paginar, e quem tem centenas de candidatos gerencia isto pela busca da
+      // tela de usuários, não aqui.
+      run(() => usersService.list({ page: 0, limit: MANAGER_OPTIONS_LIMIT })),
     ]);
     if (g) {setRows(g);}
     if (r) {setRoles(r);}
+    if (u) {setCandidates(u.items);}
   };
   useEffect(() => {
     void load();
@@ -69,7 +81,13 @@ export function GroupsPanel(): JSX.Element {
 
   const openNew = (): void => {
     setEditing(null);
-    setForm({ name: "", description: "", type: "team", roleIds: [] });
+    setForm({
+      name: "",
+      description: "",
+      type: "team",
+      managerId: "",
+      roleIds: [],
+    });
     setOpen(true);
   };
   const openEdit = (g: Group): void => {
@@ -78,17 +96,21 @@ export function GroupsPanel(): JSX.Element {
       name: g.name,
       description: g.description ?? "",
       type: g.type,
+      managerId: g.managerId ?? "",
       roleIds: g.roles?.map((r) => r.id) ?? [],
     });
     setOpen(true);
   };
 
   const save = async (): Promise<void> => {
+    // `""` é "sem gerente": vai como null explícito, que é o que o backend
+    // entende como remover — omitir manteria o gerente atual.
+    const payload = { ...form, managerId: form.managerId || null };
     const res = editing
-      ? await run(() => rbacService.updateGroup(editing.id, form), {
+      ? await run(() => rbacService.updateGroup(editing.id, payload), {
           success: RequestOperation.Update,
         })
-      : await run(() => rbacService.createGroup(form), {
+      : await run(() => rbacService.createGroup(payload), {
           success: RequestOperation.Create,
         });
     if (res) {
@@ -135,6 +157,18 @@ export function GroupsPanel(): JSX.Element {
         meta: { label: t("users.name") },
       },
       { accessorKey: "type", header: "Tipo", meta: { label: "Tipo" } },
+      {
+        id: "manager",
+        header: t("rbac.manager"),
+        meta: { label: t("rbac.manager") },
+        enableSorting: false,
+        // Sem gerente, o escopo `team` não alcança ninguém aqui dentro — e é
+        // exatamente isso que o traço precisa deixar visível na listagem.
+        cell: ({ row }) => {
+          const manager = candidates.find((c) => c.id === row.original.managerId);
+          return manager ? fullName(manager) : "—";
+        },
+      },
       {
         accessorKey: "description",
         header: "Descrição",
@@ -218,22 +252,23 @@ export function GroupsPanel(): JSX.Element {
                 }
               />
             </Field>
+            <Field label={t("rbac.manager")}>
+              <SimpleSelect
+                value={form.managerId}
+                onChange={(managerId) => setForm({ ...form, managerId })}
+                emptyLabel={t("rbac.noManager")}
+                options={candidates.map((c) => ({
+                  value: c.id,
+                  label: fullName(c),
+                }))}
+              />
+            </Field>
             <Field label="Tipo">
-              <Select
+              <SimpleSelect
                 value={form.type}
-                onValueChange={(v) => setForm({ ...form, type: v })}
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {TYPES.map((ty) => (
-                    <SelectItem key={ty} value={ty}>
-                      {ty}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                onChange={(type) => setForm({ ...form, type })}
+                options={TYPES.map((ty) => ({ value: ty, label: ty }))}
+              />
             </Field>
             <div className="space-y-2">
               <Label>Papéis</Label>

package/src/features/rbac/panels/roles-panel.tsx

@@ -67,7 +67,7 @@ export function RolesPanel(): JSX.Element {
     setForm({
       name: role.name,
       description: role.description ?? "",
-      permissionIds: role.permissions.map((p) => p.id),
+      permissionIds: (role.permissions ?? []).map((p) => p.id),
     });
     setOpen(true);
   };
@@ -156,7 +156,7 @@ export function RolesPanel(): JSX.Element {
                 {role.description}
               </p>
               <div className="flex flex-wrap gap-1">
-                {role.permissions.map((p) => (
+                {(role.permissions ?? []).map((p) => (
                   <Badge key={p.id} variant="outline">
                     {p.code}
                   </Badge>

package/src/features/rbac/services/rbac.service.ts

@@ -1,32 +1,26 @@
 import { api } from "#core/_services/api/axios.factory";
+import type { components } from "#core/_services/api/schema";
 
-export interface Permission {
-  id: string;
-  code: string;
-  description?: string | null;
-  isActive: boolean;
-}
-export interface Role {
-  id: string;
-  name: string;
-  description?: string | null;
-  isActive: boolean;
-  permissions: Permission[];
-}
-export interface Group {
-  id: string;
-  name: string;
-  description?: string | null;
-  type: string;
-  isActive: boolean;
-  roles?: Role[];
-}
-export interface RbacCatalogItem {
-  id: string;
-  name: string;
-  description?: string | null;
-  isActive: boolean;
-}
+/** Tipos derivados do `openapi.json` (§5) — não redigitar a forma da resposta. */
+export type Permission = components["schemas"]["PermissionResponse"];
+export type Role = components["schemas"]["RoleResponse"];
+export type Group = components["schemas"]["GroupResponse"];
+export type Resource = components["schemas"]["ResourceResponse"];
+export type Action = components["schemas"]["ActionResponse"];
+export type Scope = components["schemas"]["ScopeResponse"];
+
+/** Conjunto fechado do backend (`groups.type`) — nunca `string` livre. */
+export type GroupType = components["schemas"]["GroupType"];
+
+/**
+ * Item de qualquer um dos três catálogos, para o `CatalogPanel` que serve aos
+ * três.
+ *
+ * É união, e não um tipo só: os três têm a mesma forma hoje, mas o painel
+ * genérico só pode tocar o que os três **continuarem** tendo em comum. No dia
+ * em que `Scope` ganhar um campo, o TypeScript cobra em vez de deixar passar.
+ */
+export type RbacCatalogItem = Resource | Action | Scope;
 
 export const rbacService = {
   // Roles
@@ -62,6 +56,7 @@ export const rbacService = {
     name: string;
     description?: string;
     type?: string;
+    managerId?: string | null;
     roleIds?: string[];
   }) => api.post<Group>("/rbac/groups", data).then((r) => r.data),
   updateGroup: (
@@ -70,6 +65,7 @@ export const rbacService = {
       name?: string;
       description?: string;
       type?: string;
+      managerId?: string | null;
       roleIds?: string[];
     },
   ) => api.patch<Group>(`/rbac/groups/${id}`, data).then((r) => r.data),

package/src/features/recovery/reset-password-screen.tsx

@@ -4,7 +4,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { useRouter, useSearchParams } from "next/navigation";
 import type { JSX } from "react";
 import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import * as yup from "yup";
 
 import {
@@ -14,7 +14,13 @@ import {
 } from "#core/_services/auth";
 import { STRONG_PASSWORD_REGEX } from "#core/_utils/password";
 import { BrandHeader, PasswordField } from "#core/components";
-import { Alert, Button, Card, Field, Spinner } from "#core/components/ui";
+import {
+  Alert,
+  Button,
+  Card,
+  Field,
+  Spinner,
+} from "#core/components/ui";
 import { useI18n } from "#core/contexts";
 import { useRequest } from "#core/hooks/use-request";
 
@@ -68,10 +74,16 @@ export function ResetPasswordScreen(): JSX.Element {
   const {
     register,
     handleSubmit,
+    control,
     formState: { errors },
   } = useForm<{ newPassword: string; confirm: string }>({
     resolver: yupResolver(schema),
   });
+  // Os dois campos numa leitura só — cada um mostra as exigências no foco.
+  const [newPassword = "", confirm = ""] = useWatch({
+    control,
+    name: ["newPassword", "confirm"],
+  });
 
   const onSubmit = async (data: { newPassword: string; confirm: string }): Promise<void> => {
     const res = await run(
@@ -138,6 +150,7 @@ export function ResetPasswordScreen(): JSX.Element {
                 >
                   <PasswordField
                     error={!!errors.newPassword}
+                    rulesFor={newPassword}
                     {...register("newPassword")}
                   />
                 </Field>
@@ -147,6 +160,7 @@ export function ResetPasswordScreen(): JSX.Element {
                 >
                   <PasswordField
                     error={!!errors.confirm}
+                    rulesFor={confirm}
                     {...register("confirm")}
                   />
                 </Field>

package/src/features/users/components/user-form-dialog.tsx

@@ -20,11 +20,13 @@ import {
   Field,
   Input,
   Label,
+  SimpleSelect,
 } from "#core/components/ui";
-import { useI18n } from "#core/contexts";
+import { useAuth, useI18n } from "#core/contexts";
 import { RecordAuditButton } from "#core/features/audit/components";
 import {
   CreateUserPayload,
+  ManagedGroup,
   Role,
   User,
 } from "#core/features/users/services/users.service";
@@ -33,6 +35,8 @@ interface Props {
   open: boolean;
   loading: boolean;
   roles: Role[];
+  /** Grupos que o ator gerencia — usados só quando ele cria pelo escopo `team`. */
+  managedGroups?: ManagedGroup[];
   editing?: User | null;
   onClose: () => void;
   onSubmit: (data: CreateUserPayload, id?: string) => Promise<boolean>;
@@ -42,13 +46,24 @@ export function UserFormDialog({
   open,
   loading,
   roles,
+  managedGroups = [],
   editing,
   onClose,
   onSubmit,
 }: Props): JSX.Element {
   const { t } = useI18n();
+  const { hasPermission } = useAuth();
   const isEdit = !!editing;
 
+  // Papel é coisa de administrador (§ `users:promote:any`). Para o gerente o
+  // bloco nem aparece: marcar qualquer papel voltaria 403 do backend, e um
+  // campo que só serve para dar erro é pior que campo nenhum.
+  const canPromote = hasPermission("users:promote:any");
+  // O admin cria sem grupo; o gerente precisa dizer em qual time a pessoa
+  // entra, senão ela nasceria fora do alcance dele.
+  const mustPickGroup =
+    !isEdit && !hasPermission("users:create:any") && managedGroups.length > 0;
+
   const schema = yup.object({
     name: yup.string().required(t("validation.required")).min(2),
     lastName: yup.string().optional(),
@@ -58,6 +73,9 @@ export function UserFormDialog({
       .required(t("validation.required"))
       .email(t("validation.email")),
     roleIds: yup.array().of(yup.string()).optional(),
+    groupId: mustPickGroup
+      ? yup.string().required(t("validation.required"))
+      : yup.string().optional(),
   });
 
   const {
@@ -74,6 +92,8 @@ export function UserFormDialog({
       phone: "",
       email: "",
       roleIds: [] as string[],
+      // Gerenciando um time só, não há escolha a fazer: já vem marcado.
+      groupId: managedGroups.length === 1 ? managedGroups[0].id : "",
     },
   });
 
@@ -85,9 +105,10 @@ export function UserFormDialog({
         phone: editing?.phone ?? "",
         email: editing?.email ?? "",
         roleIds: editing?.roles?.map((r) => r.id) ?? [],
+        groupId: managedGroups.length === 1 ? managedGroups[0].id : "",
       });
     }
-  }, [open, editing, reset]);
+  }, [open, editing, reset, managedGroups]);
 
   const submit = handleSubmit(async (data) => {
     const payload: CreateUserPayload = {
@@ -97,6 +118,7 @@ export function UserFormDialog({
       email: data.email,
       // o schema Yup infere (string | undefined)[]; aqui estreitamos sem cast
       roleIds: data.roleIds?.filter((id): id is string => !!id),
+      groupIds: data.groupId ? [data.groupId] : undefined,
     };
     const ok = await onSubmit(payload, editing?.id);
     if (ok) {onClose();}
@@ -139,6 +161,30 @@ export function UserFormDialog({
               <Alert variant="info">{t("users.passwordByEmailHint")}</Alert>
             )}
 
+            {mustPickGroup && (
+              <Controller
+                name="groupId"
+                control={control}
+                render={({ field }) => (
+                  <Field
+                    label={t("users.team")}
+                    error={errors.groupId?.message}
+                  >
+                    <SimpleSelect
+                      value={field.value ?? ""}
+                      onChange={field.onChange}
+                      placeholder={t("users.selectTeam")}
+                      options={managedGroups.map((group) => ({
+                        value: group.id,
+                        label: group.name,
+                      }))}
+                    />
+                  </Field>
+                )}
+              />
+            )}
+
+            {canPromote && (
             <Controller
               name="roleIds"
               control={control}
@@ -171,6 +217,7 @@ export function UserFormDialog({
               );
             }}
           />
+            )}
           </div>
 
           <DialogFooter className="gap-2 sm:justify-between">

package/src/features/users/hooks/use-users.ts

@@ -9,9 +9,10 @@ import {
   useState,
 } from "react";
 
-import { useI18n } from "#core/contexts";
+import { useAuth, useI18n } from "#core/contexts";
 import {
   CreateUserPayload,
+  ManagedGroup,
   Role,
   UpdateUserPayload,
   User,
@@ -24,6 +25,8 @@ import { RequestOperation, useRequest } from "#core/hooks/use-request";
 export interface UseUsersResult {
   rows: User[];
   roles: Role[];
+  /** Grupos que o próprio usuário gerencia — vazio para quem não gerencia. */
+  managedGroups: ManagedGroup[];
   total: number;
   page: number;
   pageSize: number;
@@ -53,11 +56,13 @@ export function useUsers(): UseUsersResult {
   // spinner da tabela — que não recarrega quando a ação não muda nenhuma coluna.
   const { run: runAction, loading: acting } = useRequest();
   const { t } = useI18n();
+  const { hasPermission } = useAuth();
 
   const list = useListQuery("/users/filter-schema");
 
   const [rows, setRows] = useState<User[]>([]);
   const [roles, setRoles] = useState<Role[]>([]);
+  const [managedGroups, setManagedGroups] = useState<ManagedGroup[]>([]);
   const [total, setTotal] = useState(0);
 
   const fetch = useCallback(async () => {
@@ -79,6 +84,14 @@ export function useUsers(): UseUsersResult {
 
   useEffect(() => {
     void run(() => usersService.listRoles()).then((r) => r && setRoles(r));
+    // Só para quem cria pelo escopo `team`: quem tem `users:create:any` não
+    // escolhe grupo no formulário, e buscar a lista seria uma requisição a
+    // mais em toda abertura da tela para nada.
+    if (!hasPermission("users:create:any")) {
+      void run(() => usersService.listManagedGroups()).then(
+        (g) => g && setManagedGroups(g),
+      );
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -164,6 +177,7 @@ export function useUsers(): UseUsersResult {
   return {
     rows,
     roles,
+    managedGroups,
     total,
     page: list.page,
     pageSize: list.pageSize,

package/src/features/users/services/users.service.ts

@@ -10,6 +10,7 @@ import type { components } from "#core/_services/api/schema";
 export type Role = components["schemas"]["UserRoleResponse"];
 export type User = components["schemas"]["UserResponse"];
 export type PaginationMeta = components["schemas"]["PaginationMetaResponse"];
+export type ManagedGroup = components["schemas"]["GroupResponse"];
 
 export interface Paginated<T> {
   items: T[];
@@ -26,6 +27,13 @@ export interface CreateUserPayload {
   phone?: string;
   email: string;
   roleIds?: string[];
+  /**
+   * Em que grupos o usuário nasce.
+   *
+   * Obrigatório para quem cria pelo escopo `team` e gerencia mais de um grupo
+   * — o backend responde `GROUP_REQUIRED` quando falta.
+   */
+  groupIds?: string[];
 }
 
 export interface UpdateUserPayload {
@@ -80,4 +88,12 @@ export const usersService = {
   listRoles() {
     return api.get<Role[]>("/rbac/roles").then((r) => r.data);
   },
+
+  /**
+   * Os grupos que o próprio usuário gerencia — é o que o gerente escolhe ao
+   * criar alguém. Vem vazio para quem não gerencia nada, inclusive o admin.
+   */
+  listManagedGroups() {
+    return api.get<ManagedGroup[]>("/rbac/groups/managed").then((r) => r.data);
+  },
 };

package/src/features/users/users-screen.tsx

@@ -19,6 +19,8 @@ import {
 import type { JSX } from "react";
 import { useMemo, useState } from "react";
 
+import { anyOrTeam } from "#core/_utils/permission";
+import { fullName } from "#core/_utils/user";
 import { Badge, Button, DataTable, DataTableFeatures, RowActions } from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
 import { UserFormDialog } from "#core/features/users/components/user-form-dialog";
@@ -31,18 +33,23 @@ import { useConfirm } from "#core/hooks/use-confirm";
 
 export function UsersScreen(): JSX.Element {
   const u = useUsers();
-  const { hasPermission } = useAuth();
+  const { hasPermission, hasAnyPermission } = useAuth();
   const { t } = useI18n();
   const { confirm, confirmDialog } = useConfirm();
   const [formOpen, setFormOpen] = useState(false);
   const [editing, setEditing] = useState<User | null>(null);
 
-  const canUpdate = hasPermission("users:update:any");
-  const canReset2fa = hasPermission("users:update:any");
-  const canReset = hasPermission("users:reset-password:any");
-  const canDeactivate = hasPermission("users:deactivate:any");
+  // `:any` ou `:team` habilitam o mesmo botão: quem só tem `:team` recebe do
+  // backend uma lista que já é só a equipe dele, então tudo que ele enxerga
+  // aqui é coisa que ele pode mexer. Quem manda no alcance é o servidor — isto
+  // decide apenas se o ícone aparece.
+  const canUpdate = hasAnyPermission(...anyOrTeam("users:update"));
+  const canReset = hasAnyPermission(...anyOrTeam("users:reset-password"));
+  // Reset de 2FA anda com o reset de senha: as duas devolvem o acesso a alguém.
+  const canReset2fa = canReset;
+  const canDeactivate = hasAnyPermission(...anyOrTeam("users:deactivate"));
   const canDelete = hasPermission("users:delete:any");
-  const canInvite = hasPermission("users:invite:any");
+  const canInvite = hasAnyPermission(...anyOrTeam("users:invite"));
   const showActions =
     canUpdate ||
     canInvite ||
@@ -72,10 +79,7 @@ export function UsersScreen(): JSX.Element {
         accessorKey: "name",
         header: t("users.name"),
         meta: { label: t("users.name") },
-        cell: ({ row }) =>
-          [row.original.name, row.original.lastName]
-            .filter(Boolean)
-            .join(" "),
+        cell: ({ row }) => fullName(row.original),
       },
       {
         accessorKey: "email",
@@ -225,7 +229,7 @@ export function UsersScreen(): JSX.Element {
                   {item.isActive ? (
                     <Ban className="h-4 w-4" />
                   ) : (
-                    <CheckCircle2 className="h-4 w-4 text-success" />
+                    <CheckCircle2 className="h-4 w-4 text-success-strong" />
                   )}
                 </Button>
               )}
@@ -307,7 +311,7 @@ export function UsersScreen(): JSX.Element {
         onSortingChange={onSortingChange}
         filters={u.filters}
         toolbar={
-          hasPermission("users:create:any") && (
+          hasAnyPermission(...anyOrTeam("users:create")) && (
             <Button onClick={openCreate}>
               <Plus className="h-4 w-4" />
               {t("users.newUser")}
@@ -319,6 +323,7 @@ export function UsersScreen(): JSX.Element {
       <UserFormDialog
         open={formOpen}
         loading={u.acting}
+        managedGroups={u.managedGroups}
         roles={u.roles}
         editing={editing}
         onClose={() => setFormOpen(false)}