rl-core-front 0.6.0 → 0.8.0

package/src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Maximize2, Minimize2, X } from "lucide-react";
+import { Expand, Shrink, X } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "#core/lib/utils";
@@ -83,6 +83,61 @@ const expandedWidth = (className?: string): string => {
   return WIDTH_SCALE[Math.min(index + EXPAND_STEPS, last)];
 };
 
+/**
+ * Cabeçalho e rodapé vêm antes de `DialogContent`/`DialogForm` porque os dois
+ * procuram por eles entre os próprios filhos. A busca é pelo `displayName`, e
+ * não pela referência do componente: o pacote é publicado em código-fonte e
+ * resolvido por subpath (`#core/*`), então o consumidor pode acabar com outra
+ * instância do módulo — aí `child.type === DialogHeader` é falso mesmo sendo o
+ * mesmo componente, e o cabeçalho cai silenciosamente no corpo, desalinhado.
+ */
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
+  <div
+    className={cn(
+      "flex min-w-0 flex-col space-y-1.5 text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
+  <div
+    className={cn(
+      // O `-mb-2` é correção óptica, não capricho: o espaçamento em volta das
+      // duas linhas já é simétrico (16px de cada lado), e as bordas do modal
+      // também (24px). O rodapé parece mais alto porque um botão tem 40px e o
+      // título tem 18 — e o botão ainda carrega ar interno próprio, que o
+      // título não tem. Comer 8px da borda de baixo aproxima os dois blocos
+      // sem encostar o botão na linha, que é o que aconteceria mexendo no
+      // `pt-4`. Fica no rodapé, e não no `p-6` do conteúdo, para modal sem
+      // rodapé seguir com a borda inteira.
+      "-mb-2 flex shrink-0 flex-col-reverse gap-2 border-t border-border pt-4 sm:flex-row sm:justify-end",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+/** Acha um filho pelo `displayName` — ver a nota acima. */
+const indexOfChild = (
+  items: React.ReactNode[],
+  displayName: string,
+): number =>
+  items.findIndex(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.type as { displayName?: string })?.displayName === displayName,
+  );
+
 export interface DialogContentProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
   /**
@@ -98,19 +153,30 @@ export interface DialogContentProps
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, children, expandable = true, ...props }, ref) => {
+>(({ className, children, expandable = true, onOpenAutoFocus, ...props }, ref) => {
   // Reinicia a cada montagem: o Radix desmonta o conteúdo ao fechar, então
   // reabrir traz o modal no tamanho normal — modal pequeno que volta ampliado
   // surpreende quem o abriu.
   const [expanded, setExpanded] = React.useState(false);
 
+  // O cabeçalho sai da lista para dividir a primeira linha com os botões; o
+  // resto segue na ordem em que o chamador escreveu.
+  const items = React.Children.toArray(children);
+  const headerAt = indexOfChild(items, "DialogHeader");
+  const header = headerAt >= 0 ? items[headerAt] : null;
+  const body = headerAt >= 0 ? items.filter((_, i) => i !== headerAt) : items;
+
   return (
     <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 overflow-y-auto",
+          // `flex flex-col` + `overflow-hidden`: o scroll é do corpo, não do
+          // modal inteiro. Com `overflow-y-auto` aqui, título e botões rolavam
+          // junto e sumiam — quem descia até o fim de uma lista longa perdia o
+          // "Salvar" de vista.
+          "fixed left-[50%] top-[50%] z-50 flex flex-col translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 overflow-hidden",
           "w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] rounded-xl",
           DEFAULT_WIDTH,
           className,
@@ -118,31 +184,56 @@ const DialogContent = React.forwardRef<
           // o chamador declarou, e só enquanto estiver ampliado.
           expanded && expandedWidth(className),
         )}
+        onOpenAutoFocus={(event) => {
+          onOpenAutoFocus?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          // O Radix foca o primeiro elemento focável, e desde que os botões de
+          // ampliar/fechar entraram no cabeçalho esse primeiro passou a ser o
+          // de ampliar — abrir o modal e teclar Enter maximizava a janela em
+          // vez de enviar o formulário. Quando há campo, o foco é dele.
+          const conteudo = event.target as HTMLElement | null;
+          const primeiroCampo = conteudo?.querySelector<HTMLElement>(
+            "form input:not([type='hidden']), form textarea, form select",
+          );
+          if (primeiroCampo) {
+            event.preventDefault();
+            primeiroCampo.focus();
+          }
+        }}
         {...props}
       >
-        {children}
-        <div className="absolute right-4 top-4 flex items-center gap-2">
-          {expandable && (
-            <button
-              type="button"
-              onClick={() => setExpanded((value) => !value)}
-              className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring"
-            >
-              {expanded ? (
-                <Minimize2 className="h-4 w-4" />
-              ) : (
-                <Maximize2 className="h-4 w-4" />
-              )}
-              <span className="sr-only">
-                {expanded ? "Restaurar" : "Ampliar"}
-              </span>
-            </button>
-          )}
-          <DialogPrimitive.Close className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
-            <X className="h-4 w-4" />
-            <span className="sr-only">Fechar</span>
-          </DialogPrimitive.Close>
+        {/* Título e botões na mesma linha de um flex, em vez de os botões
+            flutuarem `absolute`: posicionados por coordenada eles nunca
+            batiam com a altura do título — mudava o tamanho da fonte e o
+            alinhamento saía. Aqui `items-center` resolve sozinho. */}
+        <div className="flex shrink-0 items-center justify-between gap-4 border-b border-border pb-4">
+          <div className="min-w-0 flex-1">{header}</div>
+          <div className="flex items-center gap-2">
+            {expandable && (
+              <button
+                type="button"
+                onClick={() => setExpanded((value) => !value)}
+                className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {expanded ? (
+                  <Shrink className="h-4 w-4" />
+                ) : (
+                  <Expand className="h-4 w-4" />
+                )}
+                <span className="sr-only">
+                  {expanded ? "Restaurar" : "Ampliar"}
+                </span>
+              </button>
+            )}
+            <DialogPrimitive.Close className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+              <X className="h-4 w-4" />
+              <span className="sr-only">Fechar</span>
+            </DialogPrimitive.Close>
+          </div>
         </div>
+        {body}
       </DialogPrimitive.Content>
     </DialogPortal>
   );
@@ -152,48 +243,52 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 /**
  * Corpo do modal como formulário — é o que faz o `Enter` submeter.
  * O `preventDefault` fica aqui porque, sem ele, o Enter recarrega a página.
- * O `DialogFooter` com o botão `type="submit"` precisa ficar dentro deste form.
+ *
+ * O `DialogFooter` é separado dos demais filhos e fica **fora da área
+ * rolável**, ainda dentro do `<form>`. As duas metades importam: fora do
+ * scroll porque `sticky` deixa o conteúdo correr por baixo dos botões — com
+ * fundo próprio ele só disfarça, e qualquer filho com fundo ou `z-index`
+ * atravessa; dentro do `<form>` porque é lá que mora o `type="submit"`, e
+ * tirá-lo dali quebraria o Enter, que é a razão de este componente existir.
+ *
+ * A separação é feita aqui, e não pedida ao chamador, para os oito modais que
+ * já existem continuarem escritos como estão.
  */
 const DialogForm = React.forwardRef<
   HTMLFormElement,
   React.ComponentPropsWithoutRef<"form">
->(({ className, onSubmit, ...props }, ref) => (
-  <form
-    ref={ref}
-    onSubmit={(e) => {
-      e.preventDefault();
-      onSubmit?.(e);
-    }}
-    className={cn("flex flex-col gap-4", className)}
-    {...props}
-  />
-));
-DialogForm.displayName = "DialogForm";
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
-  <div
-    className={cn("flex flex-col space-y-1.5 text-left", className)}
-    {...props}
-  />
-);
-DialogHeader.displayName = "DialogHeader";
+>(({ className, onSubmit, children, ...props }, ref) => {
+  const items = React.Children.toArray(children);
+  const footerAt = indexOfChild(items, "DialogFooter");
+  const hasFooter = footerAt >= 0;
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
+  return (
+    <form
+      ref={ref}
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit?.(e);
+      }}
+      className={cn("flex min-h-0 flex-1 flex-col gap-4", className)}
+      {...props}
+    >
+      {/* `min-h-0` é o que permite encolher dentro do flex e ativar o scroll:
+          sem ele o corpo assume a altura do conteúdo e estoura o modal. */}
+      {/* `p-1` reserva a folga que o anel de foco ocupa: o `ring` é
+          desenhado fora da borda do input (`ring-2` + `ring-offset-1` = 3px),
+          e sem essa margem o container de scroll corta o anel.
+          Nos dois eixos: na horizontal cortava o lado dos campos, e na
+          vertical cortava a borda de baixo do último campo — que é o que
+          aparece em todo modal com um campo colado no rodapé.
+          `-m-1` devolve o recuo para o conteúdo seguir alinhado. */}
+      <div className="-m-1 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-1 [scrollbar-width:thin]">
+        {hasFooter ? items.slice(0, footerAt) : items}
+      </div>
+      {hasFooter && items.slice(footerAt)}
+    </form>
+  );
+});
+DialogForm.displayName = "DialogForm";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,

package/src/components/ui/index.ts

@@ -17,6 +17,7 @@ export * from "./filter-group";
 export * from "./filter-rule";
 export * from "./filter-sheet";
 export * from "./input";
+export * from "./job-progress";
 export * from "./label";
 export * from "./password-requirements";
 export * from "./row-actions";

package/src/components/ui/job-progress.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { AlertTriangle, CheckCircle2 } from "lucide-react";
+import type { JSX } from "react";
+
+import { Alert } from "#core/components/ui/alert";
+import { Spinner } from "#core/components/ui/spinner";
+import { useI18n } from "#core/contexts";
+import type { JobState } from "#core/hooks/use-job-progress";
+import { cn } from "#core/lib/utils";
+
+export interface JobProgressProps {
+  state: JobState;
+  /** Inteiro de 0 a 100. */
+  percent: number;
+  processed: number;
+  total: number;
+  /** O que o processador está fazendo agora, quando ele diz. */
+  message?: string | null;
+  error?: { code: string | null; message: string } | null;
+  /** Substitui o texto de conclusão — a feature costuma ter algo melhor a dizer. */
+  successMessage?: string;
+  className?: string;
+}
+
+/**
+ * Barra de um job em segundo plano.
+ *
+ * Existe no core para que cada feature com importação, exportação ou relatório
+ * não redesenhe o mesmo par barra + contagem. Não conhece job nenhum: recebe o
+ * que o `useJobProgress` devolve.
+ */
+export function JobProgress({
+  state,
+  percent,
+  processed,
+  total,
+  message,
+  error,
+  successMessage,
+  className,
+}: JobProgressProps): JSX.Element | null {
+  const { t } = useI18n();
+
+  if (state === "idle") {
+    return null;
+  }
+
+  if (state === "failed") {
+    return (
+      <Alert
+        variant="error"
+        icon={<AlertTriangle />}
+        className={className}
+      >
+        {error?.message ?? t("job.failed")}
+      </Alert>
+    );
+  }
+
+  if (state === "completed") {
+    return (
+      <Alert
+        variant="success"
+        icon={<CheckCircle2 />}
+        className={className}
+      >
+        {successMessage ?? t("job.completed")}
+      </Alert>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Spinner className="h-4 w-4" />
+        <span className="flex-1 truncate">{message ?? t("job.running")}</span>
+        {/* Contagem ao lado do percentual: em importação, "120 de 175" diz
+            mais sobre o que falta do que "69%". */}
+        {total > 0 && (
+          <span className="tabular-nums">
+            {processed} / {total}
+          </span>
+        )}
+      </div>
+      <div
+        className="h-2 w-full overflow-hidden rounded-full bg-muted"
+        role="progressbar"
+        aria-valuenow={percent}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        <div
+          className="h-full rounded-full bg-primary transition-[width] duration-300"
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/ui/sheet.tsx

@@ -45,7 +45,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
         <X className="h-4 w-4" />
         <span className="sr-only">Fechar</span>
       </DialogPrimitive.Close>

package/src/features/errors/error-state.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import type { JSX } from "react";
+
+import { Button } from "#core/components/ui";
+
+export interface ErrorStateProps {
+  icon: LucideIcon;
+  code: string;
+  title: string;
+  description: string;
+  /** Ação principal. Sem ela a tela é só o aviso — usado onde não há para onde voltar. */
+  action?: { label: string; onClick: () => void };
+}
+
+/**
+ * O corpo comum das telas de erro (403, 404).
+ *
+ * Existe para as duas não divergirem: são a mesma peça com ícone e texto
+ * diferentes, e escritas separadas elas viram dois desenhos parecidos-mas-não-
+ * iguais na primeira vez que alguém ajusta só uma.
+ *
+ * Não depende do `AppShell`: a 404 do Next é capturada na raiz do app, fora da
+ * área autenticada, e uma tela de erro que só funciona logado não serve para o
+ * caso mais comum — link velho aberto por quem nem sessão tem.
+ */
+export function ErrorState({
+  icon: Icon,
+  code,
+  title,
+  description,
+  action,
+}: ErrorStateProps): JSX.Element {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-6 text-center">
+      <div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+        <Icon className="h-8 w-8 text-muted-foreground" />
+      </div>
+
+      <p className="mb-2 font-mono text-sm text-muted-foreground">{code}</p>
+      <h1 className="mb-3 text-2xl font-bold">{title}</h1>
+      <p className="mb-8 max-w-md text-sm text-muted-foreground">
+        {description}
+      </p>
+
+      {action && <Button onClick={action.onClick}>{action.label}</Button>}
+    </div>
+  );
+}

package/src/features/errors/forbidden-screen.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ShieldOff } from "lucide-react";
+import { useRouter } from "next/navigation";
+import type { JSX } from "react";
+
+import { useI18n } from "#core/contexts";
+import { ErrorState } from "#core/features/errors/error-state";
+
+/**
+ * 403 — a pessoa está autenticada, mas a tela não é dela.
+ *
+ * Diz que **falta permissão**, e não que a página não existe: quem chegou aqui
+ * costuma ter recebido o link de alguém, e "peça acesso a um administrador" é a
+ * única instrução acionável. Fingir 404 esconderia o motivo e transformaria um
+ * pedido de acesso de um minuto em suporte.
+ *
+ * O `AppShell` a mostra sozinho quando a rota exige permissão que falta; o
+ * projeto troca por outra passando `forbidden` ao shell.
+ */
+export function ForbiddenScreen(): JSX.Element {
+  const { t } = useI18n();
+  const router = useRouter();
+
+  return (
+    <ErrorState
+      icon={ShieldOff}
+      code="403"
+      title={t("errors.forbiddenTitle")}
+      description={t("errors.forbiddenDescription")}
+      action={{
+        label: t("errors.backToDashboard"),
+        onClick: () => router.push("/dashboard"),
+      }}
+    />
+  );
+}

package/src/features/errors/not-found-screen.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { FileQuestion } from "lucide-react";
+import { useRouter } from "next/navigation";
+import type { JSX } from "react";
+
+import { useI18n } from "#core/contexts";
+import { ErrorState } from "#core/features/errors/error-state";
+
+/**
+ * 404 no tema do sistema.
+ *
+ * O projeto adota criando `src/app/not-found.tsx` com uma linha
+ * (`export { NotFoundScreen as default } from "rl-core-front"`) — ou escreve a
+ * própria no lugar, já que `not-found.tsx` é rota especial do Next e pertence
+ * ao projeto. Sem isso vale a página padrão do Next: fundo branco, texto em
+ * inglês, ignorando tema e marca.
+ */
+export function NotFoundScreen(): JSX.Element {
+  const { t } = useI18n();
+  const router = useRouter();
+
+  return (
+    <ErrorState
+      icon={FileQuestion}
+      code="404"
+      title={t("errors.notFoundTitle")}
+      description={t("errors.notFoundDescription")}
+      action={{
+        label: t("errors.backToDashboard"),
+        onClick: () => router.push("/dashboard"),
+      }}
+    />
+  );
+}

package/src/features/queues/hooks/use-queue-jobs.ts

@@ -0,0 +1,103 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  QueueCounts,
+  QueueJob,
+  QueueJobState,
+  queuesService,
+} from "#core/features/queues/services/queues.service";
+import { useRequest } from "#core/hooks/use-request";
+
+const EMPTY_COUNTS: QueueCounts = {
+  waiting: 0,
+  active: 0,
+  completed: 0,
+  failed: 0,
+  delayed: 0,
+};
+
+export interface UseQueueJobsResult {
+  rows: QueueJob[];
+  counts: QueueCounts;
+  total: number;
+  page: number;
+  pageSize: number;
+  state: QueueJobState;
+  loading: boolean;
+  setPage: (page: number) => void;
+  setPageSize: (size: number) => void;
+  setState: (state: QueueJobState) => void;
+  refresh: () => Promise<void>;
+  retry: (id: string) => Promise<void>;
+  remove: (id: string) => Promise<void>;
+}
+
+/**
+ * A fila como a tela de administração a vê.
+ *
+ * Abre em `failed` de propósito: quem entra aqui está atrás do que deu errado.
+ * O que está andando bem não precisa de tela.
+ */
+export function useQueueJobs(): UseQueueJobsResult {
+  const { run, loading } = useRequest();
+
+  const [rows, setRows] = useState<QueueJob[]>([]);
+  const [counts, setCounts] = useState<QueueCounts>(EMPTY_COUNTS);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(20);
+  const [state, setStateValue] = useState<QueueJobState>(QueueJobState.FAILED);
+
+  const fetch = useCallback(async (): Promise<void> => {
+    const [list, summary] = await Promise.all([
+      // O `page` da tabela é base zero; o da API, base um.
+      run(() => queuesService.list({ state, page: page + 1, limit: pageSize })),
+      run(() => queuesService.counts()),
+    ]);
+    if (list) {
+      setRows(list.items);
+      setTotal(list.meta.total);
+    }
+    if (summary) {
+      setCounts(summary);
+    }
+  }, [run, state, page, pageSize]);
+
+  useEffect(() => {
+    void fetch();
+  }, [fetch]);
+
+  const setState = (next: QueueJobState): void => {
+    setStateValue(next);
+    // Página 3 de "falhos" não existe em "concluídos": trocar de estado sem
+    // voltar ao começo abriria uma página vazia.
+    setPage(0);
+  };
+
+  /**
+   * Depois de reprocessar ou remover, relê a lista **e** os contadores: o job
+   * mudou de estado, e a tela ficaria mostrando o que já não está ali.
+   */
+  const act = async (action: Promise<void>): Promise<void> => {
+    await action;
+    await fetch();
+  };
+
+  return {
+    rows,
+    counts,
+    total,
+    page,
+    pageSize,
+    state,
+    loading,
+    setPage,
+    setPageSize,
+    setState,
+    refresh: fetch,
+    retry: (id) => act(queuesService.retry(id)),
+    remove: (id) => act(queuesService.remove(id)),
+  };
+}