rl-core-front 0.3.0 → 0.5.0

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,10 +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";
@@ -32,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>;
@@ -41,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(),
@@ -57,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 {
@@ -73,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 : "",
     },
   });
 
@@ -84,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 = {
@@ -96,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();}
@@ -138,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}
@@ -170,15 +217,24 @@ export function UserFormDialog({
               );
             }}
           />
+            )}
           </div>
 
-          <DialogFooter className="gap-2">
-            <Button type="button" variant="outline" onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button type="submit" disabled={loading}>
-              {isEdit ? t("common.save") : t("common.create")}
-            </Button>
+          <DialogFooter className="gap-2 sm:justify-between">
+            {/* Só na edição: registro que ainda não existe não tem histórico. */}
+            <div>
+              {editing && (
+                <RecordAuditButton entity="User" entityId={editing.id} />
+              )}
+            </div>
+            <div className="flex gap-2">
+              <Button type="button" variant="outline" onClick={onClose}>
+                {t("common.cancel")}
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {isEdit ? t("common.save") : t("common.create")}
+              </Button>
+            </div>
           </DialogFooter>
         </DialogForm>
       </DialogContent>

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 () => {
@@ -68,12 +73,25 @@ export function useUsers(): UseUsersResult {
     }
   }, [run, list.query]);
 
+  // Não busca antes da URL ser lida: a query sairia sem o filtro, e essa
+  // resposta pode chegar depois da certa e pintar a tela com tudo.
   useEffect(() => {
+    if (!list.ready) {
+      return;
+    }
     void fetch();
-  }, [fetch]);
+  }, [fetch, list.ready]);
 
   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
   }, []);
 
@@ -159,11 +177,14 @@ export function useUsers(): UseUsersResult {
   return {
     rows,
     roles,
+    managedGroups,
     total,
     page: list.page,
     pageSize: list.pageSize,
     sorting: list.sorting,
-    loading,
+    // Esperar o catálogo também é carregar: sem isso a tabela pisca
+    // "Nenhum registro" antes da primeira busca sair.
+    loading: loading || !list.ready,
     acting,
     setPage: list.setPage,
     setPageSize: list.setPageSize,

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)}

package/src/hooks/use-column-visibility.ts

@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useState } from "react";
 
+import { safeStorage } from "#core/_utils/storage";
+
 const STORAGE_PREFIX = "cols:";
 
 export interface UseColumnVisibilityResult {
@@ -20,10 +22,13 @@ export function useColumnVisibility(
   const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
 
   useEffect(() => {
-    if (!storageKey || typeof window === "undefined") {return;}
+    if (!storageKey) {return;}
+    const raw = safeStorage.get(`${STORAGE_PREFIX}${storageKey}`);
+    if (!raw) {return;}
     try {
-      const raw = window.localStorage.getItem(`${STORAGE_PREFIX}${storageKey}`);
-      if (raw) {setHiddenColumns(JSON.parse(raw));}
+      // O `try` que sobrou é do JSON: o acesso ao armazenamento já é seguro,
+      // mas o conteúdo pode estar corrompido por uma versão anterior da tela.
+      setHiddenColumns(JSON.parse(raw));
     } catch {
       setHiddenColumns([]);
     }
@@ -37,15 +42,11 @@ export function useColumnVisibility(
   const saveHiddenColumns = useCallback(
     (nextHidden: string[]) => {
       setHiddenColumns(nextHidden);
-      if (!storageKey || typeof window === "undefined") {return;}
-      try {
-        window.localStorage.setItem(
-          `${STORAGE_PREFIX}${storageKey}`,
-          JSON.stringify(nextHidden),
-        );
-      } catch {
-        /* ignore */
-      }
+      if (!storageKey) {return;}
+      safeStorage.set(
+        `${STORAGE_PREFIX}${storageKey}`,
+        JSON.stringify(nextHidden),
+      );
     },
     [storageKey],
   );

package/src/hooks/use-countdown.ts

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export interface UseCountdownResult {
+  /** Segundos restantes, nunca negativo. */
+  remaining: number;
+  /** `mm:ss` pronto para exibir. */
+  formatted: string;
+  /** Chegou a zero. */
+  expired: boolean;
+}
+
+const format = (totalSeconds: number): string => {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+};
+
+/**
+ * Contagem regressiva em segundos.
+ *
+ * Conta pelo relógio, não somando ticks: um intervalo de 1s atrasa quando a aba
+ * fica em segundo plano, e o tempo iria derretendo. O instante-alvo é fixado
+ * uma vez, dentro do efeito, e cada tique só relê a diferença — voltar para a
+ * aba mostra o tempo real, não o que o timer conseguiu contar.
+ *
+ * `seconds` nulo (prazo ainda desconhecido) deixa o contador parado em zero sem
+ * marcar como expirado.
+ *
+ * O relógio é lido só no efeito e no callback do intervalo: `Date.now()` é
+ * impuro e durante o render produziria resultado instável a cada re-render.
+ */
+export function useCountdown(seconds: number | null): UseCountdownResult {
+  /*
+   * Guarda de que prazo veio a contagem. Sem isso, trocar `seconds` deixaria o
+   * valor do prazo anterior à mostra até o primeiro tique — e um zero herdado
+   * marcaria como expirado um contador que acabou de começar.
+   */
+  const [tick, setTick] = useState<{ source: number | null; value: number }>({
+    source: seconds,
+    value: seconds ?? 0,
+  });
+
+  useEffect(() => {
+    if (seconds === null) {
+      return;
+    }
+    const deadline = Date.now() + seconds * 1000;
+    const id = setInterval(
+      () =>
+        setTick({
+          source: seconds,
+          value: Math.max(0, Math.round((deadline - Date.now()) / 1000)),
+        }),
+      1000,
+    );
+    return () => clearInterval(id);
+  }, [seconds]);
+
+  // Enquanto o tique ainda é do prazo anterior, vale o prazo cheio recebido.
+  const remaining =
+    seconds === null ? 0 : tick.source === seconds ? tick.value : seconds;
+
+  return {
+    remaining,
+    formatted: format(remaining),
+    expired: seconds !== null && remaining === 0,
+  };
+}

package/src/hooks/use-filters.ts

@@ -32,6 +32,15 @@ export interface FiltersState {
   validation: AdvancedValidation;
   /** JSON pronto para a query — `undefined` quando não há filtro. */
   filter: string | undefined;
+  /**
+   * A URL já foi lida e o `filter` abaixo é o definitivo.
+   *
+   * Antes disso `filter` é `undefined` porque ninguém leu a querystring ainda —
+   * e não porque a listagem esteja sem filtro. Quem busca precisa esperar, ou
+   * dispara uma consulta sem filtro cuja resposta pode chegar depois da certa e
+   * pintar a tela com tudo.
+   */
+  hydrated: boolean;
 }
 
 const QUERY_PARAM = "filter";
@@ -57,8 +66,16 @@ const writeToUrl = (encoded: string | undefined): void => {
  * Espelhar na URL faz o filtro sobreviver ao F5 e virar link compartilhável.
  * O espelho é `replaceState` e não `router.replace`: o filtro não é navegação,
  * e trocá-lo não deve empilhar histórico nem refazer o render da rota.
+ *
+ * `defaultValues` é o filtro de quem chega sem `?filter=` na URL — a listagem
+ * abre já filtrada. Vale só na hidratação: link com filtro manda, e limpar os
+ * filtros continua limpando (o padrão volta no F5 seguinte, que é o que
+ * "padrão" quer dizer).
  */
-export function useFilters(schemaUrl: string): FiltersState {
+export function useFilters(
+  schemaUrl: string,
+  defaultValues?: FilterValues,
+): FiltersState {
   const { schema, loading } = useFilterSchema(schemaUrl);
 
   const [mode, setModeState] = useState<FilterMode>("simple");
@@ -82,9 +99,14 @@ export function useFilters(schemaUrl: string): FiltersState {
       }
     } else if (raw) {
       setValuesState(parseFilterValues(raw, schema));
+    } else if (defaultValues) {
+      // Espelha na URL como qualquer outro filtro: sem isso a tela mostraria
+      // um estado que o link não carrega.
+      setValuesState(defaultValues);
+      writeToUrl(buildFilter(defaultValues, schema));
     }
     setHydrated(true);
-  }, [hydrated, loading, schema]);
+  }, [hydrated, loading, schema, defaultValues]);
 
   const setValues = useCallback(
     (next: FilterValues): void => {
@@ -144,5 +166,6 @@ export function useFilters(schemaUrl: string): FiltersState {
     setTree,
     validation,
     filter,
+    hydrated,
   };
 }