rl-core-front 0.14.3 → 0.15.0

package/src/components/ui/dialog.tsx

@@ -4,6 +4,11 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Expand, Shrink, X } from "lucide-react";
 import * as React from "react";
 
+import {
+  EXPAND_SHORTCUT_KEY,
+  EXPAND_SHORTCUT_LABEL,
+  useShortcut,
+} from "#core/hooks/use-shortcut";
 import { cn } from "#core/lib/utils";
 
 const Dialog = DialogPrimitive.Root;
@@ -203,6 +208,26 @@ const DialogContent = React.forwardRef<
   const [expanded, setExpanded] = React.useState(false);
   const [confirmandoSaida, setConfirmandoSaida] = React.useState(false);
 
+  const alternarTamanho = React.useCallback(
+    () => setExpanded((value) => !value),
+    [],
+  );
+
+  // O par do botão de ampliar, e o par do `Esc`: vale em qualquer lugar do
+  // modal, inclusive com o cursor num campo — atalho do modal que só funciona
+  // fora dos campos não serve, porque o modal é feito de campos.
+  //
+  // `Alt + Enter` não escreve nada, então vale igual dentro e fora dos campos —
+  // e o `preventDefault` do hook é o que impede o `Enter` de enviar o
+  // formulário junto. Desligado quando o modal não é ampliável: atalho que não
+  // faz nada é pior que atalho nenhum.
+  useShortcut(EXPAND_SHORTCUT_KEY, alternarTamanho, {
+    alt: true,
+    allowInDialog: true,
+    allowWhileTyping: true,
+    enabled: expandable,
+  });
+
   /**
    * Fecha de verdade, depois de confirmado.
    *
@@ -290,7 +315,8 @@ const DialogContent = React.forwardRef<
             {expandable && (
               <button
                 type="button"
-                onClick={() => setExpanded((value) => !value)}
+                onClick={alternarTamanho}
+                title={`${expanded ? "Restaurar" : "Ampliar"} (${EXPAND_SHORTCUT_LABEL})`}
                 className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 {expanded ? (

package/src/components/ui/index.ts

@@ -8,6 +8,7 @@ export * from "./checkbox";
 export * from "./column-visibility-modal";
 export * from "./combobox";
 export * from "./confirm-dialog";
+export * from "./create-button";
 export * from "./data-table";
 export * from "./date-picker";
 export * from "./date-range-picker";

package/src/components/ui/input.tsx

@@ -4,22 +4,79 @@ import * as React from "react";
 
 import { cn } from "#core/lib/utils";
 
-const Input = React.forwardRef<
-  HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
->(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
+/**
+ * O `prefix` sai do tipo base de propósito: o React o declara como `string`
+ * porque existe um `prefix` de RDFa em todo elemento HTML — atributo que
+ * ninguém escreve num `<input>`, e cujo tipo impediria passar um ícone aqui.
+ */
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+  /**
+   * Marca fixa colada à esquerda do campo — `R$`, `@`, `https://`.
+   *
+   * Dentro da borda, e não num rótulo acima: a unidade é do valor, e lida
+   * longe dele ela vira decoração que some quando o formulário fica cheio. É
+   * também o que evita quem digita repetir a marca no próprio texto.
+   */
+  prefix?: React.ReactNode;
+  /** Mesma ideia à direita — `%`, `kg`, `/mês`. */
+  suffix?: React.ReactNode;
+}
+
+/** A marca não é campo: não recebe clique nem foco, e o cursor vai para o input. */
+const Affix = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): React.JSX.Element => (
+  <span
+    aria-hidden
+    className={cn(
+      "pointer-events-none absolute inset-y-0 flex items-center text-sm text-muted-foreground",
+      className,
+    )}
+  >
+    {children}
+  </span>
+);
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, prefix, suffix, ...props }, ref) => {
+    const campo = (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+          // Abre espaço para a marca em vez de deixar o texto passar por baixo
+          // dela. Largura fixa e não `w-auto`: a marca é curta por definição, e
+          // medir a real exigiria ler o DOM a cada render.
+          prefix && "pl-10",
+          suffix && "pr-10",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+
+    // Sem marca o `<input>` volta a ser o elemento raiz: envolver todo campo
+    // do produto num `div` mudaria a largura de quem já usa `Input` dentro de
+    // um flex, e a maioria não tem marca nenhuma.
+    if (!prefix && !suffix) {
+      return campo;
+    }
+
+    return (
+      <div className="relative w-full">
+        {prefix && <Affix className="left-3">{prefix}</Affix>}
+        {campo}
+        {suffix && <Affix className="right-3">{suffix}</Affix>}
+      </div>
+    );
+  },
+);
 Input.displayName = "Input";
 
 export { Input };

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

@@ -7,6 +7,7 @@ import {
   QueueCounts,
   QueueJob,
   QueueJobState,
+  QueueName,
   queuesService,
 } from "#core/features/queues/services/queues.service";
 import { useLatestRequest } from "#core/hooks/use-latest-request";
@@ -27,12 +28,14 @@ export interface UseQueueJobsResult {
   page: number;
   pageSize: number;
   state: QueueJobState;
+  queue: QueueName;
   sorting: SortingState;
   loading: boolean;
   setPage: (page: number) => void;
   setPageSize: (size: number) => void;
   setSorting: (sorting: SortingState) => void;
   setState: (state: QueueJobState) => void;
+  setQueue: (queue: QueueName) => void;
   refresh: () => Promise<void>;
   retry: (id: string) => Promise<void>;
   remove: (id: string) => Promise<void>;
@@ -54,6 +57,7 @@ export function useQueueJobs(): UseQueueJobsResult {
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(20);
   const [state, setStateValue] = useState<QueueJobState>(QueueJobState.FAILED);
+  const [queue, setQueueValue] = useState<QueueName>(QueueName.JOBS);
   // Sem ordem escolhida, a lista sai na ordem do Redis — que é a mais recente
   // primeiro e não custa varredura nenhuma no backend.
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -67,6 +71,7 @@ export function useQueueJobs(): UseQueueJobsResult {
         run(() =>
           queuesService.list({
             state,
+            queue,
             page: page + 1,
             limit: pageSize,
             sortBy: sorting[0]?.id,
@@ -77,7 +82,7 @@ export function useQueueJobs(): UseQueueJobsResult {
               : undefined,
           }),
         ),
-        run(() => queuesService.counts()),
+        run(() => queuesService.counts(queue)),
       ]),
     );
     if (!result) {
@@ -91,7 +96,7 @@ export function useQueueJobs(): UseQueueJobsResult {
     if (summary) {
       setCounts(summary);
     }
-  }, [latest, run, state, page, pageSize, sorting]);
+  }, [latest, run, state, queue, page, pageSize, sorting]);
 
   useEffect(() => {
     void fetch();
@@ -104,6 +109,12 @@ export function useQueueJobs(): UseQueueJobsResult {
     setPage(0);
   };
 
+  /** Trocar de fila é trocar de conjunto inteiro: página e contadores vão junto. */
+  const setQueue = (next: QueueName): void => {
+    setQueueValue(next);
+    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.
@@ -120,14 +131,16 @@ export function useQueueJobs(): UseQueueJobsResult {
     page,
     pageSize,
     state,
+    queue,
     sorting,
     loading,
     setPage,
     setPageSize,
     setSorting,
     setState,
+    setQueue,
     refresh: fetch,
-    retry: (id) => act(queuesService.retry(id)),
-    remove: (id) => act(queuesService.remove(id)),
+    retry: (id) => act(queuesService.retry(id, queue)),
+    remove: (id) => act(queuesService.remove(id, queue)),
   };
 }

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

@@ -25,6 +25,7 @@ import { useQueueJobs } from "#core/features/queues/hooks/use-queue-jobs";
 import {
   QueueJob,
   QueueJobState,
+  QueueName,
 } from "#core/features/queues/services/queues.service";
 import { useConfirm } from "#core/hooks/use-confirm";
 
@@ -37,6 +38,12 @@ const STATE_LABEL: Record<QueueJobState, string> = {
   [QueueJobState.DELAYED]: "queues.stateDelayed",
 };
 
+/** Rótulo de cada fila. A geral e a de relatórios rodam em processos diferentes. */
+const QUEUE_LABEL: Record<QueueName, string> = {
+  [QueueName.JOBS]: "queues.queueJobs",
+  [QueueName.EXPORTS]: "queues.queueExports",
+};
+
 const STATE_VARIANT: Record<
   QueueJobState,
   "secondary" | "warning" | "success" | "destructive"
@@ -73,6 +80,15 @@ export function QueuesScreen(): JSX.Element {
     [t],
   );
 
+  const queueOptions = useMemo<SegmentedOption[]>(
+    () =>
+      Object.values(QueueName).map((value) => ({
+        value,
+        label: t(QUEUE_LABEL[value]),
+      })),
+    [t],
+  );
+
   /** Remover é sem volta: some da fila e não há de onde reprocessar depois. */
   const removeJob = async (id: string): Promise<void> => {
     const confirmed = await confirm({
@@ -133,6 +149,32 @@ export function QueuesScreen(): JSX.Element {
         meta: { label: t("queues.createdAt") },
         cell: ({ getValue }) => new Date(String(getValue())).toLocaleString(),
       },
+      {
+        accessorKey: "payload",
+        header: t("queues.payload"),
+        enableSorting: false,
+        // O conteúdo do job, cru. É o que responde *qual* pedido falhou, e não
+        // só *que* falhou — sem ele, um relatório que quebrou não diz qual
+        // recorte quebrou. Sai só aqui porque esta tela é de monitoramento do
+        // administrador, onde ver tudo é a função.
+        meta: { label: t("queues.payload") },
+        cell: ({ getValue }) => {
+          const payload = getValue();
+          if (payload == null) {
+            return "—";
+          }
+
+          const text = JSON.stringify(payload);
+          return (
+            <span
+              className="line-clamp-2 max-w-md font-mono text-xs"
+              title={text}
+            >
+              {text}
+            </span>
+          );
+        },
+      },
       {
         accessorKey: "failedReason",
         header: t("queues.reason"),
@@ -253,12 +295,20 @@ export function QueuesScreen(): JSX.Element {
         onSortingChange={onSortingChange}
         emptyMessage={t("queues.empty")}
         toolbar={
-          <SegmentedControl
-            value={queue.state}
-            onValueChange={(value) => queue.setState(value as QueueJobState)}
-            options={stateOptions}
-            label={t("queues.state")}
-          />
+          <div className="flex flex-wrap items-center gap-3">
+            <SegmentedControl
+              value={queue.queue}
+              onValueChange={(value) => queue.setQueue(value as QueueName)}
+              options={queueOptions}
+              label={t("queues.queue")}
+            />
+            <SegmentedControl
+              value={queue.state}
+              onValueChange={(value) => queue.setState(value as QueueJobState)}
+              options={stateOptions}
+              label={t("queues.state")}
+            />
+          </div>
         }
       />
 

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

@@ -24,6 +24,18 @@ export enum QueueJobState {
   DELAYED = "delayed",
 }
 
+/**
+ * As filas do sistema. Espelha o `QUEUE_NAMES` do backend.
+ *
+ * São duas porque a exportação roda em processo próprio: um worker do BullMQ
+ * puxa qualquer job da fila em que está registrado, e misturá-las faria o
+ * consumidor de relatórios roubar o trabalho de outra feature.
+ */
+export enum QueueName {
+  JOBS = "jobs",
+  EXPORTS = "exports",
+}
+
 export interface QueueJobsQuery {
   state: QueueJobState;
   page: number;
@@ -31,11 +43,14 @@ export interface QueueJobsQuery {
   /** Campo da whitelist do backend (`SORTABLE_JOB_FIELDS`). */
   sortBy?: string;
   sortDir?: "ASC" | "DESC";
+  queue?: QueueName;
 }
 
 export const queuesService = {
-  counts(): Promise<QueueCounts> {
-    return api.get<QueueCounts>("/queues/counts").then((r) => r.data);
+  counts(queue?: QueueName): Promise<QueueCounts> {
+    return api
+      .get<QueueCounts>("/queues/counts", { params: { queue } })
+      .then((r) => r.data);
   },
 
   /**
@@ -50,11 +65,15 @@ export const queuesService = {
       .then((r) => r.data);
   },
 
-  retry(id: string): Promise<void> {
-    return api.post(`/queues/jobs/${id}/retry`).then(() => undefined);
+  retry(id: string, queue?: QueueName): Promise<void> {
+    return api
+      .post(`/queues/jobs/${id}/retry`, undefined, { params: { queue } })
+      .then(() => undefined);
   },
 
-  remove(id: string): Promise<void> {
-    return api.delete(`/queues/jobs/${id}`).then(() => undefined);
+  remove(id: string, queue?: QueueName): Promise<void> {
+    return api
+      .delete(`/queues/jobs/${id}`, { params: { queue } })
+      .then(() => undefined);
   },
 };

package/src/features/shortcuts/components/shortcut-card.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { Badge, Card } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+
+export interface Shortcut {
+  /** Chave de i18n do nome. */
+  name: string;
+  /** As combinações que servem — mais de uma quando o teclado varia. */
+  combos: readonly (readonly string[])[];
+  /**
+   * Teclas em sequência, e não juntas.
+   *
+   * A diferença muda o desenho: `Alt + Enter` se aperta ao mesmo tempo e leva o
+   * `+`; `1` `1` são duas batidas seguidas e o `+` ali seria mentira.
+   */
+  sequence?: boolean;
+  /** Onde ele vale. */
+  where: string;
+  /** Quando ele **não** dispara — a metade que evita surpresa. */
+  caveat: string;
+  /** Observação de teclado, quando a tecla tem outro nome em algum sistema. */
+  note?: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+export interface ShortcutCardProps {
+  shortcut: Shortcut;
+}
+
+/** A tecla desenhada como tecla. */
+const Key = ({ children }: { children: string }): JSX.Element => (
+  <kbd className="inline-flex min-w-9 items-center justify-center rounded-md border border-b-2 border-border bg-muted px-2 py-1 font-mono text-sm font-semibold text-foreground shadow-sm">
+    {children}
+  </kbd>
+);
+
+/** Um atalho: o que faz, como se aperta, onde vale e onde não vale. */
+export function ShortcutCard({ shortcut }: ShortcutCardProps): JSX.Element {
+  const { t } = useI18n();
+  const Icon = shortcut.icon;
+
+  return (
+    <Card className="flex flex-col gap-4 p-5 transition-colors hover:border-primary/40">
+      <div className="flex items-center gap-2">
+        <span className="rounded-lg bg-primary/10 p-2 text-primary">
+          <Icon className="h-5 w-5" />
+        </span>
+        <h2 className="text-base font-semibold">{t(shortcut.name)}</h2>
+      </div>
+
+      {/* Combinações alternativas separadas por "ou": teclado não é um só, e
+          mostrar as duas evita a pergunta "por que não funciona aqui?". */}
+      <div className="flex flex-wrap items-center gap-2">
+        {shortcut.combos.map((combo, index) => (
+          <span key={combo.join("+")} className="flex items-center gap-2">
+            {index > 0 && (
+              <span className="text-xs text-muted-foreground">
+                {t("shortcuts.or")}
+              </span>
+            )}
+            <span className="flex items-center gap-1">
+              {combo.map((key, position) => (
+                <span
+                  key={`${key}-${position}`}
+                  className="flex items-center gap-1"
+                >
+                  {position > 0 && !shortcut.sequence && (
+                    <span className="text-muted-foreground">+</span>
+                  )}
+                  <Key>{key}</Key>
+                </span>
+              ))}
+            </span>
+            {shortcut.sequence && (
+              <span className="text-xs text-muted-foreground">
+                {t("shortcuts.twice")}
+              </span>
+            )}
+          </span>
+        ))}
+      </div>
+
+      <div className="flex flex-col gap-2 text-sm">
+        <p className="text-muted-foreground">{t(shortcut.where)}</p>
+        <Badge variant="secondary" className="w-fit font-normal">
+          {t(shortcut.caveat)}
+        </Badge>
+        {shortcut.note && (
+          <p className="text-xs text-muted-foreground">{t(shortcut.note)}</p>
+        )}
+      </div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,96 @@
+"use client";
+
+import {
+  CornerDownLeft,
+  Keyboard,
+  Maximize2,
+  PlusSquare,
+  XSquare,
+} from "lucide-react";
+import type { JSX } from "react";
+
+import { useI18n } from "#core/contexts";
+import {
+  Shortcut,
+  ShortcutCard,
+} from "#core/features/shortcuts/components/shortcut-card";
+import {
+  CREATE_SHORTCUT_KEYS,
+  EXPAND_SHORTCUT_LABEL,
+} from "#core/hooks/use-shortcut";
+
+/**
+ * As teclas saem das constantes do hook, e não escritas à mão.
+ *
+ * É o que impede esta tela de virar documentação mentirosa: trocar
+ * `CREATE_SHORTCUT_KEYS` muda o atalho e muda o que está escrito aqui, no mesmo
+ * gesto. Tela de ajuda que envelhece é pior que tela de ajuda nenhuma.
+ *
+ * `Enter` e `Esc` não têm constante porque não são código nosso: o primeiro é a
+ * submissão implícita do formulário HTML, o segundo é do próprio modal.
+ */
+const SHORTCUTS: Shortcut[] = [
+  {
+    name: "shortcuts.create.name",
+    combos: CREATE_SHORTCUT_KEYS.map((key) => [key, key]),
+    sequence: true,
+    where: "shortcuts.create.where",
+    caveat: "shortcuts.create.caveat",
+    icon: PlusSquare,
+  },
+  {
+    name: "shortcuts.expand.name",
+    combos: [EXPAND_SHORTCUT_LABEL.split(" + ")],
+    where: "shortcuts.expand.where",
+    caveat: "shortcuts.expand.caveat",
+    note: "shortcuts.expand.note",
+    icon: Maximize2,
+  },
+  {
+    name: "shortcuts.submit.name",
+    combos: [["Enter"]],
+    where: "shortcuts.submit.where",
+    caveat: "shortcuts.submit.caveat",
+    icon: CornerDownLeft,
+  },
+  {
+    name: "shortcuts.close.name",
+    combos: [["Esc"]],
+    where: "shortcuts.close.where",
+    caveat: "shortcuts.close.caveat",
+    icon: XSquare,
+  },
+];
+
+/**
+ * Atalhos de teclado do sistema.
+ *
+ * Existe porque atalho que só aparece no `title` de um botão não é descoberto:
+ * quem não passa o mouse ali nunca fica sabendo. Aqui eles têm um lugar, e o
+ * menu tem como apontar para ele.
+ */
+export function ShortcutsScreen(): JSX.Element {
+  const { t } = useI18n();
+
+  return (
+    <div>
+      <div className="mb-1 flex items-center gap-2">
+        <Keyboard className="h-7 w-7 text-primary" />
+        <h1 className="text-3xl font-bold">{t("shortcuts.title")}</h1>
+      </div>
+      <p className="mb-6 max-w-2xl text-sm text-muted-foreground">
+        {t("shortcuts.subtitle")}
+      </p>
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {SHORTCUTS.map((shortcut) => (
+          <ShortcutCard key={shortcut.name} shortcut={shortcut} />
+        ))}
+      </div>
+
+      <p className="mt-6 max-w-2xl text-xs text-muted-foreground">
+        {t("shortcuts.footer")}
+      </p>
+    </div>
+  );
+}

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

@@ -12,7 +12,6 @@ import {
   KeyRound,
   MailPlus,
   Pencil,
-  Plus,
   ShieldOff,
   Trash2,
 } from "lucide-react";
@@ -21,7 +20,14 @@ import { useMemo, useState } from "react";
 
 import { anyOrTeam } from "#core/_utils/permission";
 import { fullName } from "#core/_utils/user";
-import { Badge, Button, DataTable, DataTableFeatures, RowActions } from "#core/components/ui";
+import {
+  Badge,
+  Button,
+  CreateButton,
+  DataTable,
+  DataTableFeatures,
+  RowActions,
+} from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
 import { UserFormDialog } from "#core/features/users/components/user-form-dialog";
 import { useUsers } from "#core/features/users/hooks/use-users";
@@ -310,10 +316,10 @@ export function UsersScreen(): JSX.Element {
         filters={u.filters}
         toolbar={
           hasAnyPermission(...anyOrTeam("users:create")) && (
-            <Button onClick={openCreate}>
-              <Plus className="h-4 w-4" />
-              {t("users.newUser")}
-            </Button>
+            <CreateButton
+              label={t("users.newUser")}
+              onCreate={openCreate}
+            />
           )
         }
       />