rl-core-front 0.19.8 → 0.19.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.19.8",
+  "version": "0.19.9",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/_services/api/schema.d.ts

@@ -1746,6 +1746,26 @@ export interface components {
             /** Format: date-time */
             finishedAt: string | null;
         };
+        QueueStateCountsResponse: {
+            /** @example 3 */
+            waiting: number;
+            /** @example 1 */
+            active: number;
+            /** @example 128 */
+            completed: number;
+            /** @example 2 */
+            failed: number;
+            /** @example 0 */
+            delayed: number;
+        };
+        QueueCountsRowResponse: {
+            /**
+             * @example exports
+             * @enum {string}
+             */
+            queue: "jobs" | "exports" | "images";
+            counts: components["schemas"]["QueueStateCountsResponse"];
+        };
         QueueCountsResponse: {
             /** @example 3 */
             waiting: number;
@@ -1757,10 +1777,16 @@ export interface components {
             failed: number;
             /** @example 0 */
             delayed: number;
+            byQueue: components["schemas"]["QueueCountsRowResponse"][];
         };
         QueueJobResponse: {
             /** @example 42 */
             id: string;
+            /**
+             * @example exports
+             * @enum {string}
+             */
+            queue: "jobs" | "exports" | "images";
             /** @example funkos:import */
             name: string;
             /** @example failed */
@@ -1773,15 +1799,27 @@ export interface components {
              *       "fileName": "funkos_2026-09-04.xlsx"
              *     }
              */
-            payload: Record<string, never> | null;
+            payload: {
+                [key: string]: unknown;
+            } | null;
             /** @example 2 */
             attemptsMade: number;
+            /** @example 3 */
+            maxAttempts: number;
             /** @example 69 */
             percent: number | null;
+            /** @example 5000 linha(s) */
+            progressMessage: string | null;
             failedReason: string | null;
+            stacktrace: string[] | null;
+            result: {
+                [key: string]: unknown;
+            } | null;
             /** Format: date-time */
             createdAt: string;
             /** Format: date-time */
+            startedAt: string | null;
+            /** Format: date-time */
             finishedAt: string | null;
         };
         PaginatedQueueJobsResponse: {
@@ -3658,7 +3696,7 @@ export interface operations {
     QueueAdminController_counts: {
         parameters: {
             query?: {
-                queue?: "jobs" | "exports" | "images";
+                queue?: "jobs" | "exports" | "images" | "all";
             };
             header?: never;
             path?: never;
@@ -3682,9 +3720,9 @@ export interface operations {
                 state: "waiting" | "active" | "completed" | "failed" | "delayed";
                 page: string;
                 limit: string;
-                sortBy?: "name" | "attemptsMade" | "percent" | "createdAt" | "failedReason";
+                sortBy?: "name" | "queue" | "attemptsMade" | "percent" | "createdAt" | "failedReason";
                 sortDir?: "ASC" | "DESC";
-                queue?: "jobs" | "exports" | "images";
+                queue?: "jobs" | "exports" | "images" | "all";
             };
             header?: never;
             path?: never;

package/src/_utils/format.ts

@@ -25,6 +25,7 @@ export function formatDateTime(value: string | Date, locale: string): string {
   }).format(date);
 }
 
+const SECOND_MS = 1000;
 const MINUTE_MS = 60_000;
 const HOUR_MS = 60 * MINUTE_MS;
 
@@ -83,6 +84,42 @@ export function formatRelativeTime(
 }
 
 /** Aplica máscara de telefone BR enquanto digita: (00) 00000-0000 */
+/**
+ * Quanto durou, entre dois instantes ISO — "162ms", "4.2s", "1m 33s".
+ *
+ * A ponta final aberta é de propósito: sem ela, conta até agora, que é o que
+ * responde "está travado?" sobre algo ainda em andamento. Sem a ponta inicial
+ * não há duração — não começou.
+ */
+export function formatDuration(
+  startedAt: string | null,
+  finishedAt: string | null,
+): string | null {
+  if (!startedAt) {
+    return null;
+  }
+  const started = new Date(startedAt).getTime();
+  const ended = finishedAt ? new Date(finishedAt).getTime() : Date.now();
+
+  if (Number.isNaN(started) || Number.isNaN(ended)) {
+    return null;
+  }
+
+  const ms = Math.max(0, ended - started);
+
+  if (ms < SECOND_MS) {
+    return `${ms}ms`;
+  }
+  if (ms < MINUTE_MS) {
+    return `${(ms / SECOND_MS).toFixed(1)}s`;
+  }
+
+  const minutes = Math.floor(ms / MINUTE_MS);
+  const seconds = Math.round((ms % MINUTE_MS) / SECOND_MS);
+
+  return `${minutes}m ${seconds}s`;
+}
+
 export function maskPhoneBR(value: string): string {
   const d = value.replace(/\D/g, "").slice(0, 11);
   if (d.length <= 2) {return d.replace(/(\d{0,2})/, "($1");}

package/src/components/ui/data-table.tsx

@@ -299,6 +299,23 @@ interface DataTableProps<T extends RowData> {
    * uma parcela dela.
    */
   highlightGroupKey?: string | null;
+  /**
+   * O detalhe da linha, aberto embaixo dela no clique.
+   *
+   * Para o dado que não cabe em célula e não merece uma tela: o motivo inteiro
+   * de uma falha, o payload de um job, o rastro de um erro. A alternativa é
+   * cortar com reticências e pôr o resto num `title` — que some ao mover o
+   * mouse, não dá para copiar e não existe no celular.
+   *
+   * Uma linha aberta por vez, de propósito: abrir a segunda fecha a primeira.
+   * Duas abertas deslocam a lista para os dois lados e a comparação que
+   * justificaria isso se faz melhor voltando à tabela.
+   *
+   * Sem esta prop nada muda — tabela sem detalhe não ganha coluna nem clique.
+   * Com ela, a linha inteira é o gatilho, menos o que já é clicável dentro
+   * dela: o menu de ações continua sendo o menu de ações.
+   */
+  renderRowDetail?: (row: T) => React.ReactNode;
 }
 
 /** Uma seção da listagem, como o cabeçalho de grupo a recebe. */
@@ -606,9 +623,12 @@ export function DataTable<T extends RowData>({
   defaultCollapsedGroups,
   highlightRowId = null,
   highlightGroupKey = null,
+  renderRowDetail,
 }: DataTableProps<T>): JSX.Element {
   const { t } = useI18n();
   const [colsOpen, setColsOpen] = useState(false);
+  /** A linha aberta, por id do TanStack. Uma por vez — ver `renderRowDetail`. */
+  const [openRow, setOpenRow] = useState<string | null>(null);
   /** As seções fechadas, por chave. */
   const [collapsedGroups, setCollapsedGroups] = useState<string[]>(
     () => defaultCollapsedGroups ?? [],
@@ -898,8 +918,31 @@ export function DataTable<T extends RowData>({
         ? atual.filter((fechada) => fechada !== key)
         : [...atual, key],
     );
+  const expandable = Boolean(renderRowDetail);
   const colSpan =
-    (table.getVisibleLeafColumns().length || 1) + (reorderable ? 1 : 0);
+    (table.getVisibleLeafColumns().length || 1) +
+    (reorderable ? 1 : 0) +
+    (expandable ? 1 : 0);
+
+  const toggleRow = (rowId: string): void =>
+    setOpenRow((atual) => (atual === rowId ? null : rowId));
+
+  /*
+    O clique na linha abre o detalhe — menos quando nasceu num controle.
+
+    A linha carrega botões de verdade (o menu de ações, um link para o registro
+    de origem), e sem esta guarda clicar em "Remover" também abriria o detalhe:
+    o diálogo de confirmação subiria com a linha se expandindo atrás dele.
+  */
+  const onRowClick =
+    (rowId: string) =>
+    (event: ReactMouseEvent<HTMLTableRowElement>): void => {
+      const target = event.target as HTMLElement;
+      if (target.closest("button, a, input, select, textarea, [role='menuitem']")) {
+        return;
+      }
+      toggleRow(rowId);
+    };
 
   const startRowDrag =
     (rowId: string) =>
@@ -1184,6 +1227,11 @@ export function DataTable<T extends RowData>({
                       <span className="sr-only">{t("table.reorder")}</span>
                     </TableHead>
                   )}
+                  {expandable && (
+                    <TableHead className="w-px">
+                      <span className="sr-only">{t("table.detail")}</span>
+                    </TableHead>
+                  )}
                   {hg.headers.map((header) => {
                     const canSort = header.column.getCanSort();
                     const sorted = header.column.getIsSorted();
@@ -1293,12 +1341,20 @@ export function DataTable<T extends RowData>({
                       const index = section.offset + indexNaSecao;
                       const dragging = draggedRow === row.id;
                       const shift = dragging ? 0 : rowShift(index);
+                      const open = expandable && openRow === row.id;
 
                       return (
+                        <Fragment key={row.id}>
                         <TableRow
-                          key={row.id}
                           data-row-id={row.id}
+                          aria-expanded={expandable ? open : undefined}
+                          onClick={expandable ? onRowClick(row.id) : undefined}
                           className={cn(
+                            expandable && "cursor-pointer",
+                            // A linha aberta acesa e sem borda de baixo: é o
+                            // que a amarra ao próprio detalhe, em vez de os
+                            // dois parecerem dois registros.
+                            open && "bg-primary/[0.07] hover:bg-primary/[0.07] [&>td]:border-b-0",
                             // A linha viaja com o dedo, destacada do resto da tabela —
                             // é o que diz que o arrasto pegou, e qual linha pegou.
                             dragging &&
@@ -1373,6 +1429,24 @@ export function DataTable<T extends RowData>({
                               </button>
                             </TableCell>
                           )}
+                          {expandable && (
+                            <TableCell className="w-px pr-0">
+                              <button
+                                type="button"
+                                aria-label={t("table.detail")}
+                                aria-expanded={open}
+                                className="flex items-center text-muted-foreground hover:text-foreground"
+                                onClick={() => toggleRow(row.id)}
+                              >
+                                <ChevronRight
+                                  className={cn(
+                                    "h-4 w-4 transition-transform",
+                                    open && "rotate-90",
+                                  )}
+                                />
+                              </button>
+                            </TableCell>
+                          )}
                           {row.getVisibleCells().map((cell) => (
                             <TableCell
                               key={cell.id}
@@ -1385,6 +1459,23 @@ export function DataTable<T extends RowData>({
                             </TableCell>
                           ))}
                         </TableRow>
+
+                        {/* O detalhe atravessa a tabela inteira: dentro de uma
+                            coluna ele herdaria a largura dela, e o texto que
+                            justifica abri-lo é justamente o que não cabe. */}
+                        {open && renderRowDetail && (
+                          <TableRow className="hover:bg-transparent">
+                            <TableCell
+                              colSpan={colSpan}
+                              className="bg-muted/40 p-0 align-top"
+                            >
+                              <div className="px-4 py-4">
+                                {renderRowDetail(row.original)}
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        )}
+                        </Fragment>
                       );
                     })}
                   </Fragment>
@@ -1398,6 +1489,7 @@ export function DataTable<T extends RowData>({
                     {/* A coluna da alça não tem fechamento, mas precisa da
                         célula: sem ela a linha inteira sobe uma casa. */}
                     {reorderable && <TableCell className="w-px" />}
+                    {expandable && <TableCell className="w-px" />}
                     {grupo.headers.map((header) => (
                       <TableCell
                         key={header.id}

package/src/components/ui/segmented-control.tsx

@@ -9,6 +9,20 @@ import { TRACK_CLASS, TRACK_ITEM_CLASS } from "./track.styles";
 export interface SegmentedOption {
   value: string;
   label: string;
+  /**
+   * Quantos itens a opção tem — uma pílula depois do rótulo.
+   *
+   * Para o controle que escolhe *onde olhar*: numa tela de filas, o número ao
+   * lado de cada fila diz qual tem falha antes de alguém clicar, e sem ele
+   * descobrir isso é abrir uma por uma. Não vale como enfeite — opção sem
+   * quantidade própria fica sem a pílula, e não com zero.
+   */
+  count?: number;
+  /**
+   * `danger` quando o número é o problema, e não só o tamanho: falha, pendência
+   * vencida. `neutral` é o padrão.
+   */
+  countTone?: "neutral" | "danger";
 }
 
 export interface SegmentedControlProps
@@ -69,6 +83,25 @@ export const SegmentedControl = ({
         className={cn(TRACK_ITEM_CLASS, fullWidth && "flex-1")}
       >
         {option.label}
+        {option.count !== undefined && (
+          <>
+            {/* O espaço é do nome acessível, não do desenho: sem ele o leitor
+                de tela anuncia "Imagens2" — a pílula encosta no rótulo porque
+                são dois nós de texto vizinhos. O afastamento visual é o
+                `ml-1.5`. */}
+            {" "}
+            <span
+              className={cn(
+                "ml-1.5 rounded-full px-1.5 text-[11px] font-semibold tabular-nums",
+                option.countTone === "danger" && option.count > 0
+                  ? "bg-destructive/15 text-destructive"
+                  : "bg-muted text-muted-foreground",
+              )}
+            >
+              {option.count}
+            </span>
+          </>
+        )}
       </button>
     ))}
   </div>

package/src/features/queues/components/index.ts

@@ -0,0 +1,2 @@
+export type { QueueJobDetailProps } from "./queue-job-detail";
+export { QueueJobDetail } from "./queue-job-detail";

package/src/features/queues/components/queue-job-detail.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { Copy, RotateCcw, Trash2 } from "lucide-react";
+import type { JSX } from "react";
+
+import { formatDateTime, formatDuration } from "#core/_utils/format";
+import { Button } from "#core/components/ui/button";
+import { useI18n, useToast } from "#core/contexts";
+import {
+  QueueJob,
+  QueueJobState,
+} from "#core/features/queues/services/queues.service";
+
+export interface QueueJobDetailProps {
+  job: QueueJob;
+  /** Quem não tem `queues:manage:any` lê o detalhe, mas não age sobre ele. */
+  canManage: boolean;
+  onRetry: (job: QueueJob) => void;
+  onRemove: (job: QueueJob) => void;
+}
+
+/**
+ * O job por inteiro, aberto embaixo da linha.
+ *
+ * Existe porque a tabela cortava o motivo da falha em duas linhas e deixava o
+ * texto inteiro num `title` do navegador — que some ao mover o mouse, não dá
+ * para copiar e não existe no celular. E o `stacktrace`, que o BullMQ grava no
+ * Redis, não chegava a aparecer: sem ele a tela diz *que* quebrou e nunca
+ * *onde*, sendo que quem opera a fila é exatamente quem vai consertar a causa.
+ *
+ * A fila não repete aqui: a linha continua visível logo acima, com o chip dela.
+ */
+export function QueueJobDetail({
+  job,
+  canManage,
+  onRetry,
+  onRemove,
+}: QueueJobDetailProps): JSX.Element {
+  const { t, locale } = useI18n();
+  const { notify } = useToast();
+
+  /** O que se cola num chamado: identidade do job, motivo e rastro. */
+  const copyError = async (): Promise<void> => {
+    const text = [
+      `${job.name} #${job.id} (${job.queue})`,
+      job.failedReason,
+      job.stacktrace?.join("\n\n"),
+    ]
+      .filter(Boolean)
+      .join("\n\n");
+
+    /*
+      A área de transferência não existe em toda origem: fora de HTTPS o
+      `navigator.clipboard` é `undefined`, e o erro engolido deixaria o botão
+      indistinguível de um botão quebrado. Avisar é o mínimo — o texto continua
+      na tela, selecionável.
+    */
+    try {
+      await navigator.clipboard.writeText(text);
+      notify(t("queues.copied"), "success");
+    } catch {
+      notify(t("queues.copyFailed"), "error");
+    }
+  };
+
+  const duration = formatDuration(job.startedAt, job.finishedAt);
+
+  return (
+    <div className="grid gap-4">
+      <dl className="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-4">
+        <Fact
+          label={t("queues.attempts")}
+          value={t("queues.attemptsOf", {
+            made: String(job.attemptsMade),
+            max: String(job.maxAttempts),
+          })}
+        />
+        <Fact
+          label={t("queues.createdAt")}
+          value={formatDateTime(job.createdAt, locale)}
+        />
+        <Fact
+          label={t("queues.finishedAt")}
+          value={job.finishedAt ? formatDateTime(job.finishedAt, locale) : "—"}
+        />
+        <Fact label={t("queues.duration")} value={duration ?? "—"} />
+      </dl>
+
+      {job.failedReason && (
+        <DetailField label={t("queues.reason")}>
+          <p className="rounded-md border border-destructive/30 bg-destructive/[0.08] px-3 py-2.5 text-sm font-medium text-destructive">
+            {job.failedReason}
+          </p>
+        </DetailField>
+      )}
+
+      {job.progressMessage && (
+        <DetailField label={t("queues.progress")}>
+          <p className="text-sm">
+            {job.percent === null
+              ? job.progressMessage
+              : `${job.percent}% — ${job.progressMessage}`}
+          </p>
+        </DetailField>
+      )}
+
+      <DetailField label={t("queues.payload")}>
+        <Block text={JSON.stringify(job.payload, null, 2)} />
+      </DetailField>
+
+      {job.result !== null && (
+        <DetailField label={t("queues.result")}>
+          <Block text={JSON.stringify(job.result, null, 2)} />
+        </DetailField>
+      )}
+
+      {/* Um rastro por tentativa, do mais recente para o mais antigo — é o que
+          distingue "quebrou três vezes pelo mesmo motivo" de "quebrou por
+          outro depois de reprocessar". */}
+      {job.stacktrace?.map((trace, index) => (
+        <DetailField
+          key={index}
+          label={
+            job.stacktrace && job.stacktrace.length > 1
+              ? t("queues.stacktraceAttempt", { n: String(index + 1) })
+              : t("queues.stacktrace")
+          }
+        >
+          <Block text={trace} tone="bad" />
+        </DetailField>
+      ))}
+
+      <div className="flex flex-wrap gap-2">
+        {job.failedReason && (
+          <Button variant="outline" size="sm" onClick={() => void copyError()}>
+            <Copy className="h-4 w-4" />
+            {t("queues.copyError")}
+          </Button>
+        )}
+        {canManage && (
+          <>
+            {/* Só o que falhou. O `retry()` do BullMQ tira o job do conjunto
+                `failed`, e pedi-lo para um job concluído ou ainda na fila
+                estoura no próprio Redis — o job não está lá. */}
+            {job.state === QueueJobState.FAILED && (
+              <Button variant="outline" size="sm" onClick={() => onRetry(job)}>
+                <RotateCcw className="h-4 w-4" />
+                {t("queues.retry")}
+              </Button>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-destructive"
+              onClick={() => onRemove(job)}
+            >
+              <Trash2 className="h-4 w-4" />
+              {t("common.delete")}
+            </Button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const CAPTION_CLASS =
+  "text-[10.5px] font-semibold uppercase tracking-wider text-muted-foreground";
+
+/** Um par rótulo/valor da grade do topo. */
+const Fact = ({
+  label,
+  value,
+}: {
+  label: string;
+  value: string;
+}): JSX.Element => (
+  <div className="grid gap-0.5">
+    <dt className={CAPTION_CLASS}>{label}</dt>
+    <dd className="text-sm tabular-nums">{value}</dd>
+  </div>
+);
+
+/**
+ * Legenda em cima de um bloco qualquer.
+ *
+ * Não é o `Field` de `components/ui`: aquele veste controle de formulário, com
+ * `Label` e linha de erro. Este é leitura.
+ */
+const DetailField = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}): JSX.Element => (
+  <div className="grid gap-1.5">
+    <span className={CAPTION_CLASS}>{label}</span>
+    {children}
+  </div>
+);
+
+/**
+ * Texto técnico como ele é: fonte mono, quebra de linha preservada e rolagem
+ * própria. O teto de altura existe para um rastro de vinte linhas não empurrar
+ * o resto da lista para fora da tela.
+ */
+const Block = ({
+  text,
+  tone,
+}: {
+  text: string;
+  tone?: "bad";
+}): JSX.Element => (
+  <pre
+    className={
+      tone === "bad"
+        ? "max-h-52 overflow-auto rounded-md border border-destructive/30 bg-destructive/[0.06] px-3 py-2.5 font-mono text-[11.5px] leading-relaxed"
+        : "max-h-52 overflow-auto rounded-md border bg-card px-3 py-2.5 font-mono text-[11.5px] leading-relaxed"
+    }
+  >
+    {text}
+  </pre>
+);