rl-core-front 0.7.0 → 0.8.0

package/src/components/app-shell.tsx

@@ -5,6 +5,7 @@ import {
   ChevronRight,
   History,
   LayoutDashboard,
+  ListChecks,
   LogOut,
   Menu,
   ScrollText,
@@ -51,6 +52,23 @@ interface NavItem {
   perm: string | string[] | null;
 }
 
+/**
+ * Item de menu que abre e fecha em vez de navegar.
+ *
+ * O "Administração" era isto escrito à mão dentro do componente; agora é só o
+ * primeiro cliente do grupo genérico, e o projeto declara os dele por
+ * `AppNavItem.children`.
+ */
+interface NavGroup {
+  key: string;
+  icon: React.ComponentType<{ className?: string }>;
+  children: NavItem[];
+}
+
+type NavEntry = NavItem | NavGroup;
+
+const isGroup = (entry: NavEntry): entry is NavGroup => "children" in entry;
+
 /**
  * Item de menu declarado pelo projeto.
  *
@@ -69,7 +87,14 @@ export interface AppNavItem {
    * funcionam — o projeto só precisa do dicionário quando for bilíngue.
    */
   label: string;
-  href: string;
+  /**
+   * Rota da tela. Opcional **só** em item com `children`: o pai de um grupo
+   * abre e fecha, não navega.
+   *
+   * Pai que navega e expande fica ambíguo no celular, onde o toque faz as duas
+   * coisas — por isso o grupo não herda rota de filho nenhum.
+   */
+  href?: string;
   icon: React.ComponentType<{ className?: string }>;
   /**
    * Permissão exigida para o item aparecer. Ausente, aparece para todos.
@@ -78,8 +103,34 @@ export interface AppNavItem {
    * atender dois escopos, como `users:read:any` e `users:read:team`.
    */
   permission?: string | string[] | null;
+  /**
+   * Telas filhas, recolhidas sob o pai — o mesmo comportamento que o grupo de
+   * administração já tinha.
+   *
+   * ```tsx
+   * { label: "nav.funkos", icon: Package, children: [
+   *     { label: "nav.funkosCollection", href: "/funkos", icon: Boxes },
+   *     { label: "nav.funkosCatalogs", href: "/funkos/catalogos", icon: Tags },
+   * ] }
+   * ```
+   *
+   * A permissão continua valendo por item: cada filho é filtrado pelo que
+   * declarou, e pai que ficou sem nenhum filho visível não é desenhado — grupo
+   * vazio é uma seta que não abre nada.
+   *
+   * Um nível só. Filho de filho não é menu lateral, é sitemap.
+   */
+  children?: AppNavItem[];
 }
 
+/** Item declarado pelo projeto no formato interno do menu. */
+const toNavItem = (item: AppNavItem & { href: string }): NavItem => ({
+  key: item.label,
+  href: item.href,
+  icon: item.icon,
+  perm: item.permission ?? null,
+});
+
 const DASHBOARD: NavItem = {
   key: "nav.dashboard",
   href: "/dashboard",
@@ -103,6 +154,14 @@ const ADMIN_CHILDREN: NavItem[] = [
   },
   { key: "nav.rbac", href: "/rbac", icon: ShieldCheck, perm: "roles:read:any" },
   { key: "nav.logs", href: "/logs", icon: ScrollText, perm: "audit:read:any" },
+  // Só aparece para quem opera a fila — em ambiente sem Redis ninguém tem a
+  // permissão, e o item some sozinho.
+  {
+    key: "nav.queues",
+    href: "/filas",
+    icon: ListChecks,
+    perm: "queues:read:any",
+  },
   // Restrito a administradores — só quem tem audit:read-trail:any (só Super Admin) vê este item.
   {
     key: "nav.audit",
@@ -157,18 +216,39 @@ export function AppShell({
     [user],
   );
 
-  // Os itens do projeto passam pelo mesmo filtro de permissão dos do core: um
-  // menu que mostra o que o usuário não pode abrir só entrega 403.
-  const projectItems = useMemo<NavItem[]>(
+  const adminGroup: NavGroup = {
+    key: "nav.admin",
+    icon: Settings,
+    children: adminChildren,
+  };
+
+  /**
+   * Os itens do projeto passam pelo mesmo filtro de permissão dos do core: um
+   * menu que mostra o que o usuário não pode abrir só entrega 403.
+   *
+   * O filtro é por item, inclusive dentro do grupo: um pai cujo último filho
+   * visível sumiu não é desenhado, e um pai sem `href` também não vira link
+   * solto — grupo vazio é uma seta que não abre nada.
+   */
+  const projectEntries = useMemo<NavEntry[]>(
     () =>
       (navItems ?? [])
         .filter((item) => allows(item.permission ?? null))
-        .map((item) => ({
-          key: item.label,
-          href: item.href,
-          icon: item.icon,
-          perm: item.permission ?? null,
-        })),
+        .map((item): NavEntry | null => {
+          if (item.children?.length) {
+            const children = item.children
+              .filter((child) => allows(child.permission ?? null))
+              .filter((child): child is AppNavItem & { href: string } =>
+                Boolean(child.href),
+              )
+              .map(toNavItem);
+            return children.length > 0
+              ? { key: item.label, icon: item.icon, children }
+              : null;
+          }
+          return item.href ? toNavItem({ ...item, href: item.href }) : null;
+        })
+        .filter((entry): entry is NavEntry => entry !== null),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [user, navItems],
   );
@@ -190,20 +270,39 @@ export function AppShell({
       DASHBOARD,
       PROFILE,
       ...ADMIN_CHILDREN,
-      ...(navItems ?? []).map((item) => ({
-        key: item.label,
-        href: item.href,
-        icon: item.icon,
-        perm: item.permission ?? null,
-      })),
+      // Achata pai e filhos: a rota de um filho precisa ser barrada como
+      // qualquer outra, e o pai de grupo não tem rota para checar.
+      ...(navItems ?? [])
+        .flatMap((item) => [item, ...(item.children ?? [])])
+        .filter((item): item is AppNavItem & { href: string } =>
+          Boolean(item.href),
+        )
+        .map(toNavItem),
     ];
     const current = known.find((item) => item.href === pathname);
     return current ? !allows(current.perm) : false;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user, navItems, pathname]);
 
-  const adminActive = adminChildren.some((c) => pathname === c.href);
-  const [adminOpen, setAdminOpen] = useState(adminActive);
+  /**
+   * Aberto/fechado por grupo, e não um booleano só como era com o
+   * "Administração" sozinho.
+   *
+   * Sem entrada no mapa, o grupo nasce aberto quando a rota atual é de um
+   * filho — o que o `adminActive` já fazia. A entrada aparece no primeiro
+   * clique: a partir daí manda a escolha do usuário, não a rota.
+   */
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({});
+
+  const isGroupOpen = (group: NavGroup): boolean =>
+    openGroups[group.key] ??
+    group.children.some((child) => pathname === child.href);
+
+  const toggleGroup = (group: NavGroup): void =>
+    setOpenGroups((current) => ({
+      ...current,
+      [group.key]: !isGroupOpen(group),
+    }));
 
   useEffect(() => {
     if (!loading && !user) {router.replace("/login");}
@@ -241,17 +340,29 @@ export function AppShell({
     item,
     mini,
     nested,
+    parentKey,
   }: {
     item: NavItem;
     mini: boolean;
     nested?: boolean;
+    /**
+     * Grupo a que o item pertence, só para o tooltip do modo recolhido.
+     *
+     * Ali os filhos aparecem soltos, sem o pai: "Catálogos" sozinho, ao lado de
+     * "Tarefas", não diria de quê. O caminho no tooltip resolve isso sem
+     * obrigar o rótulo a repetir o nome da feature no menu aberto.
+     */
+    parentKey?: string;
   }): JSX.Element => {
     const active = pathname === item.href;
     const Icon = item.icon;
+    const tooltip = parentKey
+      ? `${t(parentKey)} › ${t(item.key)}`
+      : t(item.key);
     return (
       <button
         onClick={() => go(item.href)}
-        title={mini ? t(item.key) : undefined}
+        title={mini ? tooltip : undefined}
         className={cn(
           "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
           mini && "justify-center px-2",
@@ -267,46 +378,70 @@ export function AppShell({
     );
   };
 
+  /**
+   * Um grupo do menu — o pai que abre e fecha, e os filhos indentados.
+   *
+   * Com a barra recolhida não há onde desenhar seta nem rótulo, então os
+   * filhos aparecem soltos, separados do resto; é o que o "Administração" já
+   * fazia, e agora vale para qualquer grupo.
+   */
+  const NavGroupBlock = ({
+    group,
+    mini,
+  }: {
+    group: NavGroup;
+    mini: boolean;
+  }): JSX.Element => {
+    const Icon = group.icon;
+    const open = isGroupOpen(group);
+    if (mini) {
+      return (
+        <>
+          <Separator className="my-2" />
+          {group.children.map((child) => (
+            <NavLink key={child.href} item={child} mini parentKey={group.key} />
+          ))}
+        </>
+      );
+    }
+    return (
+      <div className="mt-2">
+        <button
+          onClick={() => toggleGroup(group)}
+          className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+        >
+          <Icon className="h-5 w-5 shrink-0" />
+          <span className="flex-1 text-left">{t(group.key)}</span>
+          <ChevronRight
+            className={cn("h-4 w-4 transition-transform", open && "rotate-90")}
+          />
+        </button>
+        {open && (
+          <div className="mt-1 flex flex-col gap-1">
+            {group.children.map((child) => (
+              <NavLink key={child.href} item={child} mini={false} nested />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
   const NavContent = ({ mini }: { mini: boolean }): JSX.Element => (
     <div className="flex flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden p-3">
       <NavLink item={DASHBOARD} mini={mini} />
 
-      {projectItems.map((item) => (
-        <NavLink key={item.href} item={item} mini={mini} />
-      ))}
-
-      {adminChildren.length > 0 &&
-        (mini ? (
-          <>
-            <Separator className="my-2" />
-            {adminChildren.map((c) => (
-              <NavLink key={c.href} item={c} mini />
-            ))}
-          </>
+      {projectEntries.map((entry) =>
+        isGroup(entry) ? (
+          <NavGroupBlock key={entry.key} group={entry} mini={mini} />
         ) : (
-          <div className="mt-2">
-            <button
-              onClick={() => setAdminOpen((v) => !v)}
-              className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-            >
-              <Settings className="h-5 w-5 shrink-0" />
-              <span className="flex-1 text-left">{t("nav.admin")}</span>
-              <ChevronRight
-                className={cn(
-                  "h-4 w-4 transition-transform",
-                  adminOpen && "rotate-90",
-                )}
-              />
-            </button>
-            {adminOpen && (
-              <div className="mt-1 flex flex-col gap-1">
-                {adminChildren.map((c) => (
-                  <NavLink key={c.href} item={c} mini={false} nested />
-                ))}
-              </div>
-            )}
-          </div>
-        ))}
+          <NavLink key={entry.href} item={entry} mini={mini} />
+        ),
+      )}
+
+      {adminChildren.length > 0 && (
+        <NavGroupBlock group={adminGroup} mini={mini} />
+      )}
 
       <div className="mt-1">
         <NavLink item={PROFILE} mini={mini} />

package/src/components/ui/dialog.tsx

@@ -111,7 +111,15 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
   <div
     className={cn(
-      "flex shrink-0 flex-col-reverse gap-2 border-t border-border pt-4 sm:flex-row sm:justify-end",
+      // 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}
@@ -266,11 +274,14 @@ const DialogForm = React.forwardRef<
     >
       {/* `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. */}
-      {/* `px-1` reserva a folga que o anel de foco ocupa: o `ring` é
-          desenhado fora da borda do input, e sem essa margem o container
-          de scroll corta o anel do primeiro e do último campo.
-          `-mx-1` devolve o recuo para o conteúdo seguir alinhado. */}
-      <div className="-mx-1 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-1 [scrollbar-width:thin]">
+      {/* `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)}

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/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)),
+  };
+}