rl-core-front 0.15.1 → 0.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.15.1",
+  "version": "0.15.4",
   "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

@@ -854,6 +854,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/exports/{jobId}/status": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["ExportController_status"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/exports/{jobId}": {
         parameters: {
             query?: never;
@@ -1499,6 +1515,17 @@ export interface components {
             /** @example funkos */
             name: string;
         };
+        ExportStatusResponse: {
+            /** @enum {string} */
+            state: "waiting" | "active" | "completed" | "failed" | "delayed" | "unknown";
+            /** @example 12000 */
+            processed: number;
+            /** @example 25000 */
+            totalRows: number | null;
+            /** @example funkos_2026-09-05.xlsx */
+            fileName: string | null;
+            errorMessage: string | null;
+        };
         StreamableFile: Record<string, never>;
         JobProgressResponse: {
             /** @example 120 */
@@ -3202,6 +3229,27 @@ export interface operations {
             };
         };
     };
+    ExportController_status: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                jobId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ExportStatusResponse"];
+                };
+            };
+        };
+    };
     ExportController_download: {
         parameters: {
             query?: never;

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

@@ -30,7 +30,7 @@ import {
   SlidersHorizontal,
 } from "lucide-react";
 import type { JSX, PointerEvent as ReactPointerEvent } from "react";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 
 import { countConditions } from "#core/_utils/advanced-filter";
 import { activeFilterCount } from "#core/_utils/filter";
@@ -146,8 +146,12 @@ function columnLabel<T extends RowData>(
   id: string,
 ): string {
   const meta = col.meta as DataTableColumnMeta | undefined;
-  if (meta?.label) {return meta.label;}
-  if (typeof col.header === "string") {return col.header;}
+  if (meta?.label) {
+    return meta.label;
+  }
+  if (typeof col.header === "string") {
+    return col.header;
+  }
   return id;
 }
 
@@ -188,6 +192,24 @@ export function DataTable<T extends RowData>({
   /** A linha na mão e a linha embaixo do dedo, enquanto o arrasto dura. */
   const [draggedRow, setDraggedRow] = useState<string | null>(null);
   const [targetRow, setTargetRow] = useState<string | null>(null);
+  /*
+    Quanto a linha já subiu ou desceu, em pixels.
+
+    É o que faz a linha viajar junto com o dedo, como o card do quadro viaja
+    com o cursor. Sem isso o único sinal de que há um arrasto acontecendo é o
+    destaque na linha de destino, e quem arrasta fica sem saber se pegou a
+    linha certa — ou se pegou alguma.
+  */
+  const [dragOffset, setDragOffset] = useState(0);
+  const dragStartY = useRef(0);
+  /*
+    A altura da linha na mão, medida no momento em que ela é pega.
+
+    É o tanto que as linhas do caminho se afastam para abrir o buraco onde ela
+    vai cair. Medida e não fixa: a altura de uma linha depende do conteúdo, e um
+    número chutado abriria um vão maior ou menor que a linha que vem.
+  */
+  const [dragHeight, setDragHeight] = useState(0);
 
   const { hiddenColumns, saveHiddenColumns } = useColumnVisibility(storageKey);
   const columnVisibility = useMemo<ColumnVisibilityState>(() => {
@@ -268,30 +290,75 @@ export function DataTable<T extends RowData>({
       // A captura mantém os eventos na alça mesmo com o dedo já longe dela;
       // sem ela, o arrasto morre no primeiro pixel fora do botão.
       event.currentTarget.setPointerCapture(event.pointerId);
+      setDragHeight(
+        event.currentTarget.closest("tr")?.getBoundingClientRect().height ?? 0,
+      );
+      dragStartY.current = event.clientY;
+      setDragOffset(0);
       setDraggedRow(rowId);
       setTargetRow(rowId);
     };
 
   /**
-   * Que linha está embaixo do ponteiro.
+   * Onde a linha está agora: quantas linhas ela já subiu ou desceu.
    *
-   * Pelo ponto e não pelo alvo do evento: com a captura ativa, todo `move`
-   * chega na alça de origem, e é o `elementFromPoint` que sabe onde o dedo
-   * está de verdade.
+   * Conta pelo deslocamento, e não por quem está embaixo do ponteiro. Quem
+   * está embaixo do ponteiro é a **própria linha arrastada** — ela viaja com o
+   * dedo —, e perguntar ao ponto devolvia origem e destino iguais: o arrasto
+   * terminava sem gravar nada. Além disso as linhas paradas se movem para
+   * abrir o vão, então o que o ponto responde muda durante o gesto e a
+   * escolha do destino ficaria oscilando entre duas linhas.
    */
   const moveRowDrag = (event: ReactPointerEvent<HTMLButtonElement>): void => {
-    if (!draggedRow) {
+    if (!draggedRow || dragHeight === 0) {
       return;
     }
 
-    const under = document
-      .elementFromPoint(event.clientX, event.clientY)
-      ?.closest("tr[data-row-id]");
-    const id = under?.getAttribute("data-row-id");
+    const offset = event.clientY - dragStartY.current;
+    setDragOffset(offset);
+
+    const rows = table.getRowModel().rows;
+    const from = rows.findIndex((row) => row.id === draggedRow);
+    // Meia linha de deslocamento já troca de lugar: é o ponto em que a linha
+    // arrastada cobre mais a vizinha do que o próprio lugar de origem.
+    const destino = Math.min(
+      Math.max(from + Math.round(offset / dragHeight), 0),
+      rows.length - 1,
+    );
 
-    if (id) {
-      setTargetRow(id);
+    setTargetRow(rows[destino]?.id ?? draggedRow);
+  };
+
+  /** Onde a linha saiu e onde ela está agora, na página desenhada. */
+  const draggedIndex = table
+    .getRowModel()
+    .rows.findIndex((row) => row.id === draggedRow);
+  const targetIndex = table
+    .getRowModel()
+    .rows.findIndex((row) => row.id === targetRow);
+
+  /**
+   * Quanto uma linha parada se desloca para abrir o buraco.
+   *
+   * As linhas entre a origem e o destino sobem (ou descem) a altura de uma
+   * linha, e o vão aparece exatamente onde a linha vai cair. É isso que
+   * responde "para onde isto está indo" durante o gesto — um traço de destino
+   * diz o mesmo em teoria, mas exige ler a tabela para achá-lo.
+   */
+  const rowShift = (index: number): number => {
+    if (draggedRow === null || draggedIndex < 0 || targetIndex < 0) {
+      return 0;
     }
+
+    if (index > draggedIndex && index <= targetIndex) {
+      return -dragHeight;
+    }
+
+    if (index >= targetIndex && index < draggedIndex) {
+      return dragHeight;
+    }
+
+    return 0;
   };
 
   /** Soltou: avisa quem chamou e devolve a tabela ao estado parado. */
@@ -302,6 +369,7 @@ export function DataTable<T extends RowData>({
 
     setDraggedRow(null);
     setTargetRow(null);
+    setDragOffset(0);
   };
 
   const filtersEnabled = Boolean(filters);
@@ -435,63 +503,88 @@ export function DataTable<T extends RowData>({
               </TableRow>
             )}
             {!loading &&
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-row-id={row.id}
-                  className={cn(
-                    // A linha na mão fica esmaecida no lugar de origem e a de
-                    // destino se acende: são as duas pontas do gesto, e sem a
-                    // segunda não dá para saber onde a linha vai cair.
-                    draggedRow === row.id && "opacity-40",
-                    draggedRow && targetRow === row.id && draggedRow !== row.id
-                      ? "bg-accent"
-                      : undefined,
-                  )}
-                >
-                  {reorderable && (
-                    <TableCell className="w-px pr-0">
-                      <button
-                        type="button"
-                        aria-label={t("table.reorder")}
-                        title={
-                          canReorder
-                            ? t("table.reorder")
-                            : t("table.reorderSorted")
-                        }
-                        disabled={!canReorder}
-                        // `touch-none` é o que impede a página de rolar embaixo
-                        // do dedo enquanto a linha viaja.
-                        className={cn(
-                          "flex touch-none items-center text-muted-foreground",
-                          canReorder
-                            ? "cursor-grab active:cursor-grabbing hover:text-foreground"
-                            : "cursor-not-allowed opacity-30",
-                        )}
-                        onPointerDown={
-                          canReorder ? startRowDrag(row.id) : undefined
-                        }
-                        onPointerMove={canReorder ? moveRowDrag : undefined}
-                        onPointerUp={canReorder ? endRowDrag : undefined}
-                        onPointerCancel={canReorder ? endRowDrag : undefined}
+              table.getRowModel().rows.map((row, index) => {
+                const dragging = draggedRow === row.id;
+                const shift = dragging ? 0 : rowShift(index);
+
+                return (
+                  <TableRow
+                    key={row.id}
+                    data-row-id={row.id}
+                    className={cn(
+                      // A linha viaja com o dedo, destacada do resto da tabela —
+                      // é o que diz que o arrasto pegou, e qual linha pegou.
+                      dragging &&
+                        "relative z-20 bg-card shadow-xl ring-1 ring-primary/50",
+                      draggedRow !== null && "select-none",
+                      /*
+                        A transição existe só enquanto o arrasto dura, e só nas
+                        linhas paradas: na que segue o dedo ela viraria atraso,
+                        e depois de soltar ela animaria a volta ao zero por
+                        cima da lista já reordenada — dois movimentos ao mesmo
+                        tempo, que é o tremor que se vê ao largar a linha.
+                      */
+                      draggedRow !== null &&
+                        !dragging &&
+                        "transition-transform duration-200",
+                    )}
+                    style={
+                      dragging
+                        ? {
+                            // O `scale` é o "levantou da mesa": a linha na mão
+                            // fica maior que as paradas, como o card que sai
+                            // da coluna no quadro.
+                            transform: `translateY(${dragOffset}px) scale(1.01)`,
+                          }
+                        : shift !== 0
+                          ? { transform: `translateY(${shift}px)` }
+                          : undefined
+                    }
+                  >
+                    {reorderable && (
+                      <TableCell className="w-px pr-0">
+                        <button
+                          type="button"
+                          aria-label={t("table.reorder")}
+                          title={
+                            canReorder
+                              ? t("table.reorder")
+                              : t("table.reorderSorted")
+                          }
+                          disabled={!canReorder}
+                          // `touch-none` é o que impede a página de rolar embaixo
+                          // do dedo enquanto a linha viaja.
+                          className={cn(
+                            "flex touch-none items-center text-muted-foreground",
+                            canReorder
+                              ? "cursor-grab active:cursor-grabbing hover:text-foreground"
+                              : "cursor-not-allowed opacity-30",
+                          )}
+                          onPointerDown={
+                            canReorder ? startRowDrag(row.id) : undefined
+                          }
+                          onPointerMove={canReorder ? moveRowDrag : undefined}
+                          onPointerUp={canReorder ? endRowDrag : undefined}
+                          onPointerCancel={canReorder ? endRowDrag : undefined}
+                        >
+                          <GripVertical className="h-4 w-4" />
+                        </button>
+                      </TableCell>
+                    )}
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        className={shrinkClass(cell.column.columnDef)}
                       >
-                        <GripVertical className="h-4 w-4" />
-                      </button>
-                    </TableCell>
-                  )}
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell
-                      key={cell.id}
-                      className={shrinkClass(cell.column.columnDef)}
-                    >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))}
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })}
           </TableBody>
         </Table>
 

package/src/components/ui/export-button.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Download, Loader2 } from "lucide-react";
+import * as React from "react";
+
+import { Button, type ButtonProps } from "#core/components/ui/button";
+import { useI18n, useToast } from "#core/contexts";
+import { type ExportQuery, useExport } from "#core/hooks/use-export";
+
+export interface ExportButtonProps extends Omit<ButtonProps, "children"> {
+  /** Nome do relatório — o `:handler` da rota, declarado pelo `ExportHandler`. */
+  handler: string;
+  /** O recorte da tela. O relatório sai com o mesmo filtro que a listagem mostra. */
+  query?: ExportQuery;
+  /** Texto do botão. Ausente, "Exportar". */
+  label?: string;
+}
+
+/**
+ * Baixa a listagem em planilha.
+ *
+ * O relatório é gerado fora da requisição, então o botão não trava a tela: ele
+ * vira contador de linhas enquanto o arquivo é escrito e baixa sozinho no fim.
+ * Fica desabilitado durante a geração porque um segundo pedido só faria a mesma
+ * planilha duas vezes. A falha vira toast aqui dentro — a tela que usa o botão
+ * não escreve tratamento de erro nenhum.
+ */
+const ExportButton = React.forwardRef<HTMLButtonElement, ExportButtonProps>(
+  ({ handler, query, label, variant = "outline", ...props }, ref) => {
+    const { t } = useI18n();
+    const { notify } = useToast();
+    const { request, generating, processed } = useExport();
+
+    // O aviso é do botão, não da tela: quem usa o componente não deveria
+    // precisar escrever tratamento de erro para ganhar o comportamento.
+    const run = async (): Promise<void> => {
+      try {
+        await request(handler, query);
+      } catch (error) {
+        notify((error as Error).message || t("export.failed"), "error");
+      }
+    };
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        disabled={generating}
+        onClick={() => void run()}
+        {...props}
+      >
+        {generating ? (
+          <>
+            <Loader2 className="h-4 w-4 animate-spin" />
+            {processed > 0
+              ? t("export.progress", { rows: processed.toLocaleString() })
+              : t("export.starting")}
+          </>
+        ) : (
+          <>
+            <Download className="h-4 w-4" />
+            {label ?? t("export.label")}
+          </>
+        )}
+      </Button>
+    );
+  },
+);
+ExportButton.displayName = "ExportButton";
+
+export { ExportButton };

package/src/components/ui/index.ts

@@ -14,6 +14,7 @@ export * from "./date-picker";
 export * from "./date-range-picker";
 export * from "./dialog";
 export * from "./dropdown-menu";
+export * from "./export-button";
 export * from "./field";
 export * from "./filter-field";
 export * from "./filter-group";

package/src/hooks/use-export.ts

@@ -0,0 +1,139 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { api } from "#core/_services/api/axios.factory";
+
+/** De quanto em quanto tempo a tela pergunta como está o relatório. */
+const POLL_INTERVAL_MS = 1500;
+
+/** O recorte que vai junto — o mesmo da listagem. */
+export interface ExportQuery {
+  filter?: string;
+  search?: string;
+  sortBy?: string;
+  sortDir?: "ASC" | "DESC";
+}
+
+interface ExportStatus {
+  state: "waiting" | "active" | "completed" | "failed" | "delayed" | "unknown";
+  processed: number;
+  totalRows: number | null;
+  fileName: string | null;
+  errorMessage: string | null;
+}
+
+export interface UseExportResult {
+  /** Pede o relatório. Devolve quando ele terminou — ou lança, se falhou. */
+  request: (handler: string, query?: ExportQuery) => Promise<void>;
+  /** Há um relatório sendo gerado agora. */
+  generating: boolean;
+  /** Linhas já escritas. Sem total: em stream ele só é conhecido no fim. */
+  processed: number;
+}
+
+/**
+ * Pede um relatório e o entrega quando fica pronto.
+ *
+ * Por consulta, e não por socket: o único evento que interessa aqui é "acabou",
+ * e perguntar de segundo em segundo custa menos que manter um caminho de tempo
+ * real que precisa de rede de segurança de qualquer forma — aba reaberta,
+ * conexão caída. A contagem de linhas vem de carona na mesma resposta.
+ *
+ * ```tsx
+ * const { request, generating } = useExport();
+ * <Button disabled={generating} onClick={() => request("funkos", { filter })}>
+ * ```
+ */
+export function useExport(): UseExportResult {
+  const [generating, setGenerating] = useState(false);
+  const [processed, setProcessed] = useState(0);
+
+  // Evita continuar perguntando por um relatório de uma tela que já saiu.
+  const activeRef = useRef(true);
+
+  useEffect(() => {
+    activeRef.current = true;
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  const request = useCallback(
+    async (handler: string, query: ExportQuery = {}): Promise<void> => {
+      setGenerating(true);
+      setProcessed(0);
+
+      try {
+        const { data } = await api.post<{ jobId: string }>(
+          `/exports/${handler}`,
+          query,
+        );
+
+        const status = await waitUntilDone(data.jobId, activeRef, setProcessed);
+
+        if (!status) {
+          return;
+        }
+        if (status.state === "failed") {
+          throw new Error(status.errorMessage ?? "A geração do relatório falhou");
+        }
+
+        await download(data.jobId, status.fileName);
+      } finally {
+        setGenerating(false);
+      }
+    },
+    [],
+  );
+
+  return { request, generating, processed };
+}
+
+const waitUntilDone = async (
+  jobId: string,
+  active: { current: boolean },
+  onProgress: (processed: number) => void,
+): Promise<ExportStatus | null> => {
+  for (;;) {
+    if (!active.current) {
+      return null;
+    }
+
+    const { data } = await api.get<ExportStatus>(`/exports/${jobId}/status`);
+    onProgress(data.processed);
+
+    if (data.state === "completed" || data.state === "failed") {
+      return data;
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
+  }
+};
+
+/**
+ * Baixa o arquivo.
+ *
+ * Por `blob`, e não por um `<a href>` apontando para a rota: ela é autenticada,
+ * e link puro não manda cookie de API em outra origem — viria 401. O
+ * `revokeObjectURL` devolve a memória do blob, que senão fica presa até a aba
+ * fechar.
+ */
+const download = async (
+  jobId: string,
+  fileName: string | null,
+): Promise<void> => {
+  const { data } = await api.get<Blob>(`/exports/${jobId}`, {
+    responseType: "blob",
+  });
+
+  const url = URL.createObjectURL(data);
+  const link = document.createElement("a");
+
+  link.href = url;
+  link.download = fileName ?? "relatorio.xlsx";
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+};

package/src/i18n/messages/en.ts

@@ -147,6 +147,12 @@ export const en: Messages = {
     footer:
       "Two keys open the create form because keyboards differ: the backslash moves around depending on the layout, while the number is always in the same place.",
   },
+  export: {
+    label: "Export",
+    starting: "Generating...",
+    progress: "{rows} rows",
+    failed: "Could not generate the report",
+  },
   table: {
     columns: "Columns",
     columnsButton: "Columns",

package/src/i18n/messages/pt.ts

@@ -149,6 +149,12 @@ export const pt = {
     footer:
       "Duas teclas para abrir o cadastro porque o teclado não é um só: a barra invertida muda de lugar conforme o layout, e o número está sempre na mesma posição. Já o atalho de ampliar leva Alt porque precisa valer dentro dos campos — e uma tecla que escreve não pode servir de comando ali.",
   },
+  export: {
+    label: "Exportar",
+    starting: "Gerando...",
+    progress: "{rows} linhas",
+    failed: "Não foi possível gerar o relatório",
+  },
   table: {
     columns: "Colunas",
     columnsButton: "Colunas",

package/src/index.ts

@@ -72,6 +72,7 @@ export {
 // Hooks de listagem, requisição e filtro
 // ---------------------------------------------------------------------------
 export type { CreateButtonProps } from "#core/components/ui/create-button";
+export type { ExportButtonProps } from "#core/components/ui/export-button";
 export type { UseColumnVisibilityResult } from "#core/hooks/use-column-visibility";
 export { useColumnVisibility } from "#core/hooks/use-column-visibility";
 export type {
@@ -80,6 +81,8 @@ export type {
   UseConfirmResult,
 } from "#core/hooks/use-confirm";
 export { useConfirm } from "#core/hooks/use-confirm";
+export type { ExportQuery, UseExportResult } from "#core/hooks/use-export";
+export { useExport } from "#core/hooks/use-export";
 export type { UseFilterSchemaResult } from "#core/hooks/use-filter-schema";
 export { useFilterSchema } from "#core/hooks/use-filter-schema";
 export type { FilterMode, FiltersState } from "#core/hooks/use-filters";