rl-core-front 0.6.0 → 0.8.0

package/src/components/app-shell.tsx

@@ -5,6 +5,7 @@ import {
   ChevronRight,
   History,
   LayoutDashboard,
+  ListChecks,
   LogOut,
   Menu,
   ScrollText,
@@ -36,6 +37,7 @@ import {
 } from "#core/components/ui";
 import { UserAvatar } from "#core/components/user-avatar";
 import { useAuth, useBrand, useI18n } from "#core/contexts";
+import { ForbiddenScreen } from "#core/features/errors/forbidden-screen";
 import { NotificationsCenter } from "#core/features/notifications/notifications-center";
 import { ForcePasswordChange } from "#core/features/profile/force-password-change";
 import { cn } from "#core/lib/utils";
@@ -50,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.
  *
@@ -68,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.
@@ -77,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",
@@ -102,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",
@@ -115,9 +175,21 @@ export interface AppShellProps {
   children: React.ReactNode;
   /** Telas do projeto no menu, entre o dashboard e o grupo de administração. */
   navItems?: AppNavItem[];
+  /**
+   * O que mostrar quando a rota atual exige permissão que o usuário não tem.
+   *
+   * Padrão: a `ForbiddenScreen` do core. Passe outra para trocar a tela sem
+   * abrir mão do bloqueio — que é o ponto: esconder o item do menu não impede
+   * ninguém de digitar a URL.
+   */
+  forbidden?: React.ReactNode;
 }
 
-export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
+export function AppShell({
+  children,
+  navItems,
+  forbidden,
+}: AppShellProps): JSX.Element {
   const { user, loading, logout, hasPermission } = useAuth();
   const { t } = useI18n();
   const brand = useBrand();
@@ -144,23 +216,93 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
     [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],
   );
-  const adminActive = adminChildren.some((c) => pathname === c.href);
-  const [adminOpen, setAdminOpen] = useState(adminActive);
+  /**
+   * A rota atual exige permissão que o usuário não tem?
+   *
+   * Percorre **todas** as rotas conhecidas, não só as que sobreviveram ao
+   * filtro do menu: é justamente a que foi filtrada que precisa ser barrada
+   * aqui. Esconder o item nunca impediu ninguém de digitar a URL — sem este
+   * bloqueio a tela montava, chamava a API, tomava 403 e virava uma página
+   * vazia com um toast, em vez de dizer que falta acesso.
+   *
+   * Rota que não está em lista nenhuma passa: o shell não sabe o que ela exige,
+   * e chutar bloqueio esconderia tela legítima do projeto que não declarou
+   * `navItems`.
+   */
+  const routeBlocked = useMemo(() => {
+    const known: NavItem[] = [
+      DASHBOARD,
+      PROFILE,
+      ...ADMIN_CHILDREN,
+      // 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]);
+
+  /**
+   * 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");}
@@ -198,17 +340,29 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
     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",
@@ -224,46 +378,70 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
     );
   };
 
+  /**
+   * 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} />
@@ -379,8 +557,8 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
         )}
       >
         <div className="p-4 md:p-8">
-          <Breadcrumbs />
-          {children}
+          {!routeBlocked && <Breadcrumbs />}
+          {routeBlocked ? (forbidden ?? <ForbiddenScreen />) : children}
         </div>
       </main>
     </div>

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

@@ -103,6 +103,15 @@ interface DataTableProps<T extends RowData> {
    * não os desmarca ao aplicar nem ao limpar: não são dele.
    */
   hiddenFilterFields?: string[];
+  /**
+   * Texto da tabela vazia, quando a listagem sabe algo que a tabela não sabe.
+   *
+   * Sem isto, "Nenhum registro" é a resposta para tudo — inclusive para
+   * listagem podada por permissão, onde os registros existem e é o alcance de
+   * quem olha que não chega neles. Uma tela vazia que não diz o motivo é
+   * indistinguível de bug, e manda o usuário procurar defeito onde não há.
+   */
+  emptyMessage?: string;
 }
 
 /** Extras que uma coluna pode declarar em `meta`. */
@@ -154,6 +163,7 @@ export function DataTable<T extends RowData>({
   enableSorting = true,
   filters,
   hiddenFilterFields,
+  emptyMessage,
 }: DataTableProps<T>): JSX.Element {
   const { t } = useI18n();
   const [colsOpen, setColsOpen] = useState(false);
@@ -232,6 +242,13 @@ export function DataTable<T extends RowData>({
         : 0
       : activeFilterCount(filters.values, hiddenFilterFields);
 
+  // Vazio com filtro aplicado não é "não há registros", é "não há *estes*
+  // registros" — e a diferença decide se o usuário vai limpar o filtro ou
+  // procurar um bug.
+  const emptyText =
+    emptyMessage ??
+    (activeFilters > 0 ? t("table.emptyFiltered") : t("table.empty"));
+
   return (
     <div>
       <div className="mb-3 flex items-center justify-between gap-2">
@@ -323,7 +340,7 @@ export function DataTable<T extends RowData>({
                   colSpan={colSpan}
                   className="h-24 text-center text-muted-foreground"
                 >
-                  {t("table.empty")}
+                  {emptyText}
                 </TableCell>
               </TableRow>
             )}