rl-core-front 0.3.0 → 0.5.0

package/src/features/logs/panels/request-logs-panel.tsx

@@ -6,11 +6,29 @@ import type {
   PaginationState,
   SortingState,
 } from "@tanstack/react-table";
+import { Eye } from "lucide-react";
 import type { JSX } from "react";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
-import { Badge, DataTable, DataTableFeatures } from "#core/components/ui";
+import {
+  Badge,
+  Button,
+  DataTable,
+  DataTableFeatures,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  RowActions,
+  SegmentedControl,
+  SegmentedOption,
+} from "#core/components/ui";
 import { useI18n } from "#core/contexts";
+import {
+  ErrorType,
+  ErrorTypeLabelKey,
+} from "#core/features/logs/enums/error-type.enum";
+import { RequestOutcomeLabelKey } from "#core/features/logs/enums/request-outcome.enum";
 import { useRequestLogs } from "#core/features/logs/hooks/use-request-logs";
 import { RequestLog } from "#core/features/logs/services/logs.service";
 
@@ -24,9 +42,46 @@ function statusVariant(
   return "secondary";
 }
 
+/**
+ * Nenhum segmento aceso.
+ *
+ * Não é opção do controle — some do filtro só quem limpar o desfecho pelo
+ * painel lateral, e aí nenhum segmento fica marcado.
+ */
+const NO_OUTCOME = "";
+
+/**
+ * Log de requisição — um painel só.
+ *
+ * Eram dois (requisições e erros) enquanto eram duas tabelas. Hoje é uma linha
+ * por requisição, e quem separa sucesso de erro é o desfecho na barra.
+ */
 export function RequestLogsPanel(): JSX.Element {
   const { t } = useI18n();
   const logs = useRequestLogs();
+  const [detail, setDetail] = useState<RequestLog | null>(null);
+
+  // O atalho não é um segundo caminho de filtro (§11): ele escreve no mesmo
+  // estado do painel lateral, então o chip aparece, a URL guarda e o painel
+  // mostra o mesmo valor. É atalho para o campo do catálogo, não um filtro
+  // paralelo.
+  const outcome = logs.filters.values.outcome?.values?.[0] ?? NO_OUTCOME;
+  const setOutcome = (value: string): void => {
+    logs.filters.setValues({
+      ...logs.filters.values,
+      outcome: { values: [value] },
+    });
+    logs.setPage(0);
+  };
+
+  const outcomeOptions = useMemo<SegmentedOption[]>(
+    () =>
+      Object.entries(RequestOutcomeLabelKey).map(([value, key]) => ({
+        value,
+        label: t(key),
+      })),
+    [t],
+  );
 
   const columns = useMemo<ColumnDef<DataTableFeatures, RequestLog, unknown>[]>(
     () => [
@@ -37,12 +92,17 @@ export function RequestLogsPanel(): JSX.Element {
         cell: ({ getValue }) => new Date(String(getValue())).toLocaleString(),
       },
       {
-        accessorKey: "action",
+        id: "route",
         header: t("logs.route"),
         meta: { label: t("logs.route") },
         enableSorting: false,
-        cell: ({ getValue }) => (
-          <span className="font-mono text-xs">{String(getValue())}</span>
+        // A ação nomeada (`@Auditable("Login")`) diz mais que o caminho; sem
+        // ela, o caminho é o que identifica a requisição.
+        cell: ({ row }) => (
+          <span className="font-mono text-xs">
+            {row.original.action ??
+              `${row.original.method ?? ""} ${row.original.path ?? "—"}`}
+          </span>
         ),
       },
       {
@@ -54,6 +114,16 @@ export function RequestLogsPanel(): JSX.Element {
           return <Badge variant={statusVariant(status)}>{status ?? "—"}</Badge>;
         },
       },
+      {
+        accessorKey: "errorType",
+        header: t("logs.type"),
+        meta: { label: t("logs.type") },
+        enableSorting: false,
+        cell: ({ getValue }) => {
+          const type = getValue() as ErrorType | null;
+          return type == null ? "—" : t(ErrorTypeLabelKey[type]);
+        },
+      },
       {
         accessorKey: "durationMs",
         header: t("logs.duration"),
@@ -71,16 +141,26 @@ export function RequestLogsPanel(): JSX.Element {
         cell: ({ row }) => row.original.user?.name ?? t("logs.systemUser"),
       },
       {
-        accessorKey: "ipAddress",
-        header: t("logs.ip"),
-        meta: { label: t("logs.ip") },
+        id: "actions",
+        header: () => <div className="text-center">{t("common.actions")}</div>,
+        meta: { shrink: true },
+        enableHiding: false,
         enableSorting: false,
-        cell: ({ getValue }) => (
-          <span className="font-mono text-xs">{String(getValue() ?? "—")}</span>
+        cell: ({ row }) => (
+          <RowActions>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setDetail(row.original)}
+            >
+              <Eye className="h-4 w-4" />
+              {t("logs.viewDetails")}
+            </Button>
+          </RowActions>
         ),
       },
     ],
-     
+
     [t],
   );
 
@@ -105,20 +185,92 @@ export function RequestLogsPanel(): JSX.Element {
   };
 
   return (
-    <DataTable
-      columns={columns}
-      data={logs.rows}
-      getRowId={(r) => r.id}
-      storageKey="logs-requests"
-      loading={logs.loading}
-      manualPagination
-      rowCount={logs.total}
-      pagination={pagination}
-      onPaginationChange={onPaginationChange}
-      manualSorting
-      sorting={logs.sorting}
-      onSortingChange={onSortingChange}
+    <>
+      <DataTable
+        columns={columns}
+        data={logs.rows}
+        getRowId={(r) => r.id}
+        storageKey="logs-requests"
+        loading={logs.loading}
+        manualPagination
+        rowCount={logs.total}
+        pagination={pagination}
+        onPaginationChange={onPaginationChange}
+        manualSorting
+        sorting={logs.sorting}
+        onSortingChange={onSortingChange}
         filters={logs.filters}
-    />
+        // O desfecho é escolhido na barra: no painel e no chip seria a mesma
+        // coisa em três lugares. Continua no catálogo, que é quem serializa.
+        hiddenFilterFields={["outcome"]}
+        toolbar={
+          <SegmentedControl
+            // Altura dos botões `sm` de Filtros/Colunas, que dividem a linha.
+            className="h-9"
+            label={t("logs.outcome")}
+            options={outcomeOptions}
+            value={outcome}
+            onValueChange={setOutcome}
+          />
+        }
+      />
+
+      <Dialog open={!!detail} onOpenChange={(o) => !o && setDetail(null)}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {t("logs.detailsTitle")}
+              {detail?.statusCode != null && ` (${detail.statusCode})`}
+            </DialogTitle>
+          </DialogHeader>
+          {detail && (
+            <div className="flex min-w-0 flex-col gap-3 text-sm">
+              <div>
+                <span className="font-medium">{t("logs.route")}: </span>
+                <span className="font-mono text-xs">
+                  {detail.method} {detail.path}
+                </span>
+              </div>
+              {detail.errorMessage && (
+                <div>
+                  <span className="font-medium">{t("logs.message")}: </span>
+                  {detail.errorMessage}
+                </div>
+              )}
+              {detail.errorCode && (
+                <div>
+                  <span className="font-medium">{t("logs.errorCode")}: </span>
+                  <span className="font-mono text-xs">{detail.errorCode}</span>
+                </div>
+              )}
+              <div>
+                <span className="font-medium">{t("logs.user")}: </span>
+                {detail.user?.name ?? t("logs.systemUser")}
+              </div>
+              <div>
+                <span className="font-medium">{t("logs.requestId")}: </span>
+                <span className="font-mono text-xs">
+                  {detail.requestId ?? "—"}
+                </span>
+              </div>
+              {detail.userAgent && (
+                <div className="min-w-0">
+                  <span className="font-medium">{t("logs.userAgent")}: </span>
+                  <span className="font-mono text-xs">{detail.userAgent}</span>
+                </div>
+              )}
+              {detail.errorStack && (
+                <div className="min-w-0">
+                  <p className="mb-1 font-medium">{t("logs.stackTrace")}</p>
+                  <pre className="max-h-64 min-w-0 max-w-full overflow-auto rounded-md bg-muted p-3 text-xs">
+                    {detail.errorStack}
+                  </pre>
+                </div>
+              )}
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

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

@@ -1,68 +1,30 @@
 import { api } from "#core/_services/api/axios.factory";
 import type { ListQuery } from "#core/_services/api/list-query";
 import { toListParams } from "#core/_services/api/list-query";
+import type { components } from "#core/_services/api/schema";
 
-export type ErrorType =
-  | "VALIDATION"
-  | "AUTH"
-  | "NOT_FOUND"
-  | "RATE_LIMIT"
-  | "DATABASE"
-  | "INTEGRATION"
-  | "INTERNAL";
-
-export interface LogUserRef {
-  id: string;
-  name: string;
-  email: string;
-}
-
-export interface RequestLog {
-  id: string;
-  createdAt: string;
-  userId?: string | null;
-  action: string;
-  method?: string | null;
-  path?: string | null;
-  ipAddress?: string | null;
-  statusCode?: number | null;
-  durationMs?: number | null;
-  requestId?: string | null;
-  user?: LogUserRef | null;
-}
-
-export interface ErrorLog {
-  id: string;
-  createdAt: string;
-  statusCode?: number | null;
-  type: ErrorType;
-  message: string;
-  stack?: string | null;
-  method?: string | null;
-  path?: string | null;
-  userId?: string | null;
-  ipAddress?: string | null;
-  requestId?: string | null;
-  user?: LogUserRef | null;
-}
+/** Tipos derivados do `openapi.json` (§5) — não redigitar a forma da resposta. */
+export type RequestLog = components["schemas"]["RequestLogResponse"];
+export type LogUserRef = components["schemas"]["AuditUserRefResponse"];
 
 export interface Paginated<T> {
   items: T[];
-  meta: { total: number; page: number; limit: number; totalPages: number };
+  meta: components["schemas"]["PaginationMetaResponse"];
 }
 
 export const logsService = {
+  /**
+   * Log de requisição — uma rota só.
+   *
+   * Antes eram `/audit/changes` e `/audit/errors`, duas tabelas com nove
+   * colunas iguais. Agora é uma linha por requisição, e a distinção entre
+   * sucesso e erro é o filtro `outcome`.
+   */
   listRequests(query: ListQuery) {
     return api
-      .get<Paginated<RequestLog>>("/audit/changes", {
+      .get<Paginated<RequestLog>>("/audit/requests", {
         params: toListParams(query),
       })
       .then((r) => r.data);
   },
-
-  listErrors(query: ListQuery) {
-    return api
-      .get<Paginated<ErrorLog>>("/audit/errors", { params: toListParams(query) })
-      .then((r) => r.data);
-  },
 };

package/src/features/notifications/components/notification-item.tsx

@@ -5,17 +5,19 @@ import type { JSX } from "react";
 
 import { formatDateTime } from "#core/_utils/format";
 import { useI18n } from "#core/contexts";
-import type {
-  NotificationType,
-  UserNotification,
-} from "#core/features/notifications/services/notifications.service";
+import { NotificationType } from "#core/features/notifications/enums/notification-type.enum";
+import type { UserNotification } from "#core/features/notifications/services/notifications.service";
 import { cn } from "#core/lib/utils";
 
 const ICONS: Record<NotificationType, JSX.Element> = {
-  INFO: <Info className="h-4 w-4 text-sky-500" />,
-  SUCCESS: <CheckCircle2 className="h-4 w-4 text-emerald-500" />,
-  WARNING: <AlertTriangle className="h-4 w-4 text-amber-500" />,
-  ERROR: <XCircle className="h-4 w-4 text-destructive" />,
+  [NotificationType.INFO]: <Info className="h-4 w-4 text-sky-500" />,
+  [NotificationType.SUCCESS]: (
+    <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+  ),
+  [NotificationType.WARNING]: (
+    <AlertTriangle className="h-4 w-4 text-amber-500" />
+  ),
+  [NotificationType.ERROR]: <XCircle className="h-4 w-4 text-destructive" />,
 };
 
 export interface NotificationItemProps {

package/src/features/notifications/enums/notification-type.enum.ts

@@ -0,0 +1,8 @@
+// Severidade da notificação (espelha o NotificationType do backend:
+// notifications.type) — define ícone e cor.
+export enum NotificationType {
+  INFO = 0,
+  SUCCESS = 1,
+  WARNING = 2,
+  ERROR = 3,
+}

package/src/features/profile/force-password-change.tsx

@@ -2,13 +2,18 @@
 
 import { yupResolver } from "@hookform/resolvers/yup";
 import type { JSX } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import * as yup from "yup";
 
 import { authService } from "#core/_services/auth";
 import { STRONG_PASSWORD_REGEX } from "#core/_utils/password";
 import { PasswordField } from "#core/components";
-import { Alert, Button, Card, Field } from "#core/components/ui";
+import {
+  Alert,
+  Button,
+  Card,
+  Field,
+} from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
 import { useRequest } from "#core/hooks/use-request";
 
@@ -36,8 +41,13 @@ export function ForcePasswordChange({
   const {
     register,
     handleSubmit,
+    control,
     formState: { errors },
   } = useForm({ resolver: yupResolver(schema) });
+  const [newPassword = "", confirm = ""] = useWatch({
+    control,
+    name: ["newPassword", "confirm"],
+  });
 
   const onSubmit = handleSubmit(async (data) => {
     const res = await run(
@@ -81,6 +91,7 @@ export function ForcePasswordChange({
           >
             <PasswordField
               error={!!errors.newPassword}
+              rulesFor={newPassword}
               {...register("newPassword")}
             />
           </Field>
@@ -88,7 +99,11 @@ export function ForcePasswordChange({
             label={t("profile.confirmPassword")}
             error={errors.confirm?.message}
           >
-            <PasswordField error={!!errors.confirm} {...register("confirm")} />
+            <PasswordField
+              error={!!errors.confirm}
+              rulesFor={confirm}
+              {...register("confirm")}
+            />
           </Field>
           <Button type="submit" size="lg" disabled={loading}>
             {loading ? t("common.loading") : t("profile.changePassword")}

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>
@@ -339,7 +346,8 @@ export function ProfileScreen(): JSX.Element {
 
       {/* diálogo: pede código TOTP para regenerar backup codes */}
       <Dialog open={regenOpen} onOpenChange={(o) => !o && setRegenOpen(false)}>
-        <DialogContent className="max-w-sm">
+        {/* Confirmação: um campo de seis dígitos não tem o que ampliar. */}
+        <DialogContent className="max-w-sm" expandable={false}>
           <DialogHeader>
             <DialogTitle>{t("auth.backupTitle")}</DialogTitle>
           </DialogHeader>

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,23 +21,28 @@ 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";
 import {
   Group,
   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();
@@ -44,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();
@@ -68,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 => {
@@ -77,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) {
@@ -134,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",
@@ -217,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>
@@ -251,13 +287,25 @@ export function GroupsPanel(): JSX.Element {
                 ))}
               </div>
             </div>
-            <DialogFooter className="gap-2">
-              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
-                {t("common.cancel")}
-              </Button>
-              <Button type="submit" disabled={loading}>
-                {t("common.save")}
-              </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="Group" entityId={editing.id} />
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setOpen(false)}
+                >
+                  {t("common.cancel")}
+                </Button>
+                <Button type="submit" disabled={loading}>
+                  {t("common.save")}
+                </Button>
+              </div>
             </DialogFooter>
           </DialogForm>
         </DialogContent>