rl-core-front 0.1.0

package/src/contexts/socket-context.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import type { JSX } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { io, Socket } from "socket.io-client";
+
+import { useAuth } from "#core/contexts/auth-context";
+
+export type SocketStatus = "connecting" | "connected" | "disconnected";
+
+/** Envelope com que o backend embrulha todo evento (ver socketEvent.envelope.ts). */
+export interface SocketEvent<T> {
+  v: number;
+  event: string;
+  emittedAt: string;
+  data: T;
+}
+
+type Handler = (payload: SocketEvent<unknown>) => void;
+
+export interface SocketContextType {
+  status: SocketStatus;
+  /**
+   * Assina um evento e devolve a função de cancelar. Devolver o cancelamento
+   * evita o vazamento clássico de assinar no efeito e esquecer de remover.
+   */
+  on: <T>(event: string, handler: (data: T) => void) => () => void;
+  /**
+   * Cresce a cada reconexão. Quem manteve estado local usa isso como gatilho
+   * para recarregar — enquanto o socket esteve fora, eventos se perderam.
+   */
+  reconnectCount: number;
+}
+
+const SocketContext = createContext<SocketContextType | undefined>(undefined);
+
+const SOCKET_URL =
+  process.env.NEXT_PUBLIC_SOCKET_URL ?? "http://localhost:3108";
+const NAMESPACE = "/notifications";
+
+/**
+ * Conexão única de socket da aplicação.
+ *
+ * Uma só, no provider: cada tela abrir a sua multiplicaria conexões por aba e
+ * espalharia a lógica de reconexão.
+ *
+ * Autentica sozinho — o cookie httpOnly de sessão viaja no handshake por causa
+ * do `withCredentials`. Não há token para o JS ler nem repassar.
+ */
+export function SocketProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
+  const { user } = useAuth();
+  const [status, setStatus] = useState<SocketStatus>("disconnected");
+  const [reconnectCount, setReconnectCount] = useState(0);
+  const socketRef = useRef<Socket | null>(null);
+
+  /**
+   * Assinaturas ficam aqui, não só no socket.
+   *
+   * Efeito de filho roda antes do efeito do pai: quem assina no mount o faz
+   * quando o socket ainda não existe. Guardar o registro e reaplicá-lo na
+   * criação é o que impede essas assinaturas de se perderem — e é o mesmo
+   * caminho que as repõe quando o usuário troca de sessão.
+   */
+  const handlersRef = useRef(new Map<string, Set<Handler>>());
+
+  // Sem sessão não há o que conectar: o handshake seria recusado e o
+  // socket.io entraria em ciclo de retentativa.
+  const userId = user?.id;
+
+  useEffect(() => {
+    if (!userId) {
+      return;
+    }
+
+    setStatus("connecting");
+    const socket = io(`${SOCKET_URL}${NAMESPACE}`, {
+      withCredentials: true,
+      transports: ["websocket"],
+      reconnectionDelay: 2000,
+    });
+    socketRef.current = socket;
+
+    handlersRef.current.forEach((handlers, event) => {
+      handlers.forEach((handler) => socket.on(event, handler));
+    });
+
+    let hadConnected = false;
+    socket.on("connect", () => {
+      setStatus("connected");
+      // A primeira conexão não é reconexão — só as seguintes indicam janela
+      // sem eventos a recuperar.
+      if (hadConnected) {
+        setReconnectCount((count) => count + 1);
+      }
+      hadConnected = true;
+    });
+    socket.on("disconnect", () => setStatus("disconnected"));
+    socket.on("connect_error", () => setStatus("disconnected"));
+
+    return () => {
+      socket.removeAllListeners();
+      socket.disconnect();
+      socketRef.current = null;
+      setStatus("disconnected");
+    };
+  }, [userId]);
+
+  const on = useCallback(
+    <T,>(event: string, handler: (data: T) => void): (() => void) => {
+      const wrapped: Handler = (payload) => handler(payload.data as T);
+
+      const forEvent = handlersRef.current.get(event) ?? new Set<Handler>();
+      forEvent.add(wrapped);
+      handlersRef.current.set(event, forEvent);
+      socketRef.current?.on(event, wrapped);
+
+      return () => {
+        forEvent.delete(wrapped);
+        socketRef.current?.off(event, wrapped);
+      };
+    },
+    [],
+  );
+
+  const value = useMemo<SocketContextType>(
+    () => ({ status, reconnectCount, on }),
+    [status, reconnectCount, on],
+  );
+
+  return (
+    <SocketContext.Provider value={value}>{children}</SocketContext.Provider>
+  );
+}
+
+export function useSocket(): SocketContextType {
+  const ctx = useContext(SocketContext);
+  if (!ctx) {
+    throw new Error("useSocket deve ser usado dentro de SocketProvider");
+  }
+  return ctx;
+}

package/src/contexts/toast-context.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import type { JSX } from "react";
+import { createContext, useCallback, useContext } from "react";
+import { toast } from "sonner";
+
+import { Toaster } from "#core/components/ui";
+
+export type ToastSeverity = "success" | "info" | "warning" | "error";
+
+export interface ToastContextType {
+  notify: (message: string, severity?: ToastSeverity) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export function ToastProvider({ children }: { children: React.ReactNode }): JSX.Element {
+  const notify = useCallback(
+    (message: string, severity: ToastSeverity = "info") => {
+      if (severity === "success") {toast.success(message);}
+      else if (severity === "error") {toast.error(message);}
+      else if (severity === "warning") {toast.warning(message);}
+      else {toast.info(message);}
+    },
+    [],
+  );
+
+  return (
+    <ToastContext.Provider value={{ notify }}>
+      {children}
+      <Toaster />
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextType {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {throw new Error("useToast deve ser usado dentro de ToastProvider");}
+  return ctx;
+}

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

@@ -0,0 +1,299 @@
+"use client";
+
+import type {
+  ColumnDef,
+  OnChangeFn,
+  PaginationState,
+  SortingState,
+} from "@tanstack/react-table";
+import { Eye } from "lucide-react";
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+
+import { formatDateTime, isIsoDateTime } from "#core/_utils/format";
+import {
+  Badge,
+  Button,
+  Checkbox,
+  DataTable,
+  DataTableFeatures,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  RowActions,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import { useAuditTrail } from "#core/features/audit/hooks/use-audit-trail";
+import {
+  AuditAction,
+  AuditDataChange,
+} from "#core/features/audit/services/audit.service";
+
+/**
+ * Campos de controle interno: aparecem no diff porque a auditoria versiona a
+ * linha inteira, mas não são informação de negócio. Ficam escondidos por padrão.
+ */
+const TECHNICAL_FIELDS = new Set([
+  "failedLoginAttempts",
+  "createdAt",
+  "updatedAt",
+  "deletedAt",
+  "passwordChangedAt",
+  "password",
+  "twoFactorSecret",
+  "backupCodes",
+  "mustChangePassword",
+]);
+
+interface DiffRow {
+  field: string;
+  before: string;
+  after: string;
+  technical: boolean;
+}
+
+type Translate = (key: string) => string;
+
+function formatValue(
+  value: unknown,
+  locale: string,
+  t: Translate,
+): string {
+  if (value === null || value === undefined) {
+    return "—";
+  }
+  if (typeof value === "boolean") {
+    return value ? t("common.yes") : t("common.no");
+  }
+  if (isIsoDateTime(value)) {
+    return formatDateTime(value, locale);
+  }
+  if (typeof value === "object") {
+    // Indentado: objeto e array em uma linha só ficavam ilegíveis no modal.
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value);
+}
+
+function diffRows(
+  item: AuditDataChange,
+  locale: string,
+  t: Translate,
+): DiffRow[] {
+  const keys = new Set([
+    ...Object.keys(item.oldData ?? {}),
+    ...Object.keys(item.newData ?? {}),
+  ]);
+  return Array.from(keys).map((field) => ({
+    field,
+    before: formatValue(item.oldData?.[field], locale, t),
+    after: formatValue(item.newData?.[field], locale, t),
+    technical: TECHNICAL_FIELDS.has(field),
+  }));
+}
+
+function actionVariant(
+  action: AuditAction,
+): "success" | "warning" | "destructive" {
+  if (action === "CREATE") {return "success";}
+  if (action === "DELETE") {return "destructive";}
+  return "warning";
+}
+
+export function AuditScreen(): JSX.Element {
+  const { t, locale } = useI18n();
+  const trail = useAuditTrail();
+  const [detail, setDetail] = useState<AuditDataChange | null>(null);
+  const [showTechnical, setShowTechnical] = useState(false);
+
+  /** Rótulo do campo; sem tradução cadastrada, mostra o nome cru da coluna. */
+  const fieldLabel = (field: string): string => {
+    const key = `auditFields.${field}`;
+    const label = t(key);
+    return label === key ? field : label;
+  };
+
+  const actionLabel = (action: AuditAction): string =>
+    action === "CREATE"
+      ? t("auditTrail.actionCreate")
+      : action === "DELETE"
+        ? t("auditTrail.actionDelete")
+        : t("auditTrail.actionUpdate");
+
+  const columns = useMemo<
+    ColumnDef<DataTableFeatures, AuditDataChange, unknown>[]
+  >(
+    () => [
+      {
+        accessorKey: "createdAt",
+        header: t("auditTrail.date"),
+        meta: { label: t("auditTrail.date") },
+        cell: ({ getValue }) => formatDateTime(String(getValue()), locale),
+      },
+      {
+        accessorKey: "entity",
+        header: t("auditTrail.entity"),
+        meta: { label: t("auditTrail.entity") },
+      },
+      {
+        accessorKey: "action",
+        header: t("auditTrail.action"),
+        meta: { label: t("auditTrail.action") },
+        cell: ({ row }) => (
+          <Badge variant={actionVariant(row.original.action)}>
+            {actionLabel(row.original.action)}
+          </Badge>
+        ),
+      },
+      {
+        id: "user",
+        header: t("auditTrail.user"),
+        meta: { label: t("auditTrail.user") },
+        enableSorting: false,
+        cell: ({ row }) =>
+          row.original.user?.name ?? t("auditTrail.systemUser"),
+      },
+      {
+        accessorKey: "ipAddress",
+        header: t("auditTrail.ip"),
+        meta: { label: t("auditTrail.ip") },
+        enableSorting: false,
+        cell: ({ getValue }) => (
+          <span className="font-mono text-xs">{String(getValue() ?? "—")}</span>
+        ),
+      },
+      {
+        id: "actions",
+        header: () => <div className="text-center">{t("common.actions")}</div>,
+        meta: { shrink: true },
+        enableHiding: false,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <RowActions>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setDetail(row.original)}
+            >
+              <Eye className="h-4 w-4" />
+              {t("auditTrail.viewChanges")}
+            </Button>
+          </RowActions>
+        ),
+      },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, locale],
+  );
+
+  const allRows = detail ? diffRows(detail, locale, t) : [];
+  const rows = showTechnical ? allRows : allRows.filter((r) => !r.technical);
+  const hiddenCount = allRows.length - rows.length;
+
+  const pagination: PaginationState = {
+    pageIndex: trail.page,
+    pageSize: trail.pageSize,
+  };
+  const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    if (next.pageSize !== trail.pageSize) {
+      trail.setPageSize(next.pageSize);
+      trail.setPage(0);
+    } else if (next.pageIndex !== trail.page) {
+      trail.setPage(next.pageIndex);
+    }
+  };
+  const onSortingChange: OnChangeFn<SortingState> = (updater) => {
+    const next =
+      typeof updater === "function" ? updater(trail.sorting) : updater;
+    trail.setSorting(next);
+    trail.setPage(0);
+  };
+
+  return (
+    <div>
+      <h1 className="mb-1 text-3xl font-bold">{t("auditTrail.title")}</h1>
+      <p className="mb-4 text-sm text-muted-foreground">
+        {t("auditTrail.subtitle")}
+      </p>
+
+      <DataTable
+        columns={columns}
+        data={trail.rows}
+        getRowId={(r) => r.id}
+        storageKey="audit-trail"
+        loading={trail.loading}
+        manualPagination
+        rowCount={trail.total}
+        pagination={pagination}
+        onPaginationChange={onPaginationChange}
+        manualSorting
+        sorting={trail.sorting}
+        onSortingChange={onSortingChange}
+        filters={trail.filters}
+      />
+
+      <Dialog open={!!detail} onOpenChange={(o) => !o && setDetail(null)}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {t("auditTrail.changesTitle")} — {detail?.entity} (
+              {detail && actionLabel(detail.action)})
+            </DialogTitle>
+          </DialogHeader>
+          {detail && (
+            <div className="max-h-[60vh] overflow-y-auto">
+              {rows.length === 0 ? (
+                <p className="text-sm text-muted-foreground">
+                  {t("auditTrail.noFields")}
+                </p>
+              ) : (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{t("auditTrail.field")}</TableHead>
+                      <TableHead>{t("auditTrail.before")}</TableHead>
+                      <TableHead>{t("auditTrail.after")}</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {rows.map((d) => (
+                      <TableRow key={d.field}>
+                        <TableCell className="font-medium">
+                          {fieldLabel(d.field)}
+                        </TableCell>
+                        <TableCell className="whitespace-pre-wrap text-destructive/90">
+                          {d.before}
+                        </TableCell>
+                        <TableCell className="whitespace-pre-wrap text-success">
+                          {d.after}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
+            </div>
+          )}
+          {detail && (hiddenCount > 0 || showTechnical) && (
+            <label className="flex cursor-pointer items-center gap-2 text-sm text-muted-foreground">
+              <Checkbox
+                checked={showTechnical}
+                onCheckedChange={(checked) => setShowTechnical(!!checked)}
+              />
+              {t("auditTrail.showTechnical")}
+              {hiddenCount > 0 && ` (${hiddenCount})`}
+            </label>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/features/audit/hooks/use-audit-trail.ts

@@ -0,0 +1,68 @@
+"use client";
+
+import type { SortingState } from "@tanstack/react-table";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+
+import {
+  AuditDataChange,
+  auditService,
+} from "#core/features/audit/services/audit.service";
+import type { FiltersState } from "#core/hooks/use-filters";
+import { useListQuery } from "#core/hooks/use-list-query";
+import { useRequest } from "#core/hooks/use-request";
+
+export interface UseAuditTrailResult {
+  rows: AuditDataChange[];
+  total: number;
+  page: number;
+  pageSize: number;
+  sorting: SortingState;
+  loading: boolean;
+  setPage: Dispatch<SetStateAction<number>>;
+  setPageSize: Dispatch<SetStateAction<number>>;
+  setSorting: Dispatch<SetStateAction<SortingState>>;
+  /** Filtros dinâmicos — repassar para o `DataTable`. */
+  filters: FiltersState;
+  refresh: () => Promise<void>;
+}
+
+export function useAuditTrail(): UseAuditTrailResult {
+  const { run, loading } = useRequest();
+
+  const list = useListQuery("/audit/data-changes/filter-schema", 20);
+
+  const [rows, setRows] = useState<AuditDataChange[]>([]);
+  const [total, setTotal] = useState(0);
+
+  const fetch = useCallback(async () => {
+    const res = await run(() => auditService.listDataChanges(list.query));
+    if (res) {
+      setRows(res.items);
+      setTotal(res.meta.total);
+    }
+  }, [run, list.query]);
+
+  useEffect(() => {
+    void fetch();
+  }, [fetch]);
+
+  return {
+    rows,
+    total,
+    page: list.page,
+    pageSize: list.pageSize,
+    sorting: list.sorting,
+    loading,
+    setPage: list.setPage,
+    setPageSize: list.setPageSize,
+    setSorting: list.setSorting,
+    filters: list.filters,
+    refresh: fetch,
+  };
+}

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

@@ -0,0 +1,24 @@
+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";
+
+/** Tipos derivados do `openapi.json` (§5) — não redigitar a forma da resposta. */
+export type AuditAction = components["schemas"]["AuditDataChangeResponse"]["action"];
+export type AuditUserRef = components["schemas"]["AuditUserRefResponse"];
+export type AuditDataChange = components["schemas"]["AuditDataChangeResponse"];
+
+export interface Paginated<T> {
+  items: T[];
+  meta: components["schemas"]["PaginationMetaResponse"];
+}
+
+export const auditService = {
+  listDataChanges(query: ListQuery) {
+    return api
+      .get<Paginated<AuditDataChange>>("/audit/data-changes", {
+        params: toListParams(query),
+      })
+      .then((r) => r.data);
+  },
+};

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

@@ -0,0 +1,73 @@
+"use client";
+
+import { ShieldCheck } from "lucide-react";
+import type { JSX } from "react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+
+export function DashboardScreen(): JSX.Element {
+  const { user } = useAuth();
+  const { t } = useI18n();
+
+  return (
+    <div>
+      <h1 className="mb-6 text-3xl font-bold">
+        {t("dashboard.welcome", { name: user?.name ?? "" })}
+      </h1>
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {t("dashboard.roles")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-wrap gap-2">
+            {user?.roles.map((r) => (
+              <Badge key={r}>{r}</Badge>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {t("dashboard.permissions")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-4xl font-bold">
+              {user?.permissions.length ?? 0}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {t("dashboard.security")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Badge
+              variant={user?.twoFactorEnabled ? "success" : "warning"}
+              className="gap-1"
+            >
+              <ShieldCheck className="h-3.5 w-3.5" />
+              {user?.twoFactorEnabled
+                ? t("dashboard.twoFactorActive")
+                : t("dashboard.twoFactorPending")}
+            </Badge>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}