From 64ef0892edf56a01a208cfdb3fd443d559184a74 Mon Sep 17 00:00:00 2001 From: Matheus Date: Sun, 30 Aug 2026 20:14:16 -0300 Subject: [PATCH] =?UTF-8?q?feat(nav):=20menu=20em=20acorde=C3=A3o=20?= =?UTF-8?q?=E2=80=94=20cada=20grupo=20abre/fecha=20independente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Pedido do usuário: "usar o modelo de arcordeon no menu para que eu poder reocler cada sub menu" — os 6 grupos com sub-itens (Discador, Call Center, Telefonia, IA, Relatórios, Administração) ficavam sempre todos abertos ao mesmo tempo, sem jeito de recolher. NavList (compartilhado entre sidebar desktop, drawer mobile, Platform e Tenant) ganhou estado de abrir/fechar por seção — não é exclusivo (abrir um grupo não fecha os outros). Chevron gira 180° indicando estado; aria-expanded no botão do cabeçalho. Default: só o grupo que contém a rota atual começa aberto, os demais começam fechados — resolve "menu cheio demais" sem esconder onde o usuário está agora. Estado é local (não persiste num F5 de propósito, mas sobrevive à navegação entre páginas normalmente, já que o layout não remonta em troca de rota client-side). Testado com Playwright de verdade: seção sem rota ativa começa aria-expanded="false", clicar abre, clicar de novo fecha. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01BFaBaBSQGhyXGEgtTYZGV8 --- TODO.md | 82 +++++++++++++++++++ .../src/components/shell/nav-list.tsx | 40 +++++++-- 2 files changed, 117 insertions(+), 5 deletions(-) diff --git a/TODO.md b/TODO.md index 5a9103d..ff9a865 100644 --- a/TODO.md +++ b/TODO.md @@ -2217,6 +2217,88 @@ para fazer o fluxo de maneira visual usando nodeRED") já embute essas coordenadas nos props iniciais do componente — não só a API, o carregamento real da tela também foi verificado +## PHASE 62 — 3 achados reais reportados pelo usuário numa mensagem só: +fila sem edição, agente sem jeito de ficar online, destino de rota de +entrada em texto livre +- [x] **Filas sem edição**: `queues.controller.ts` só tinha create/list/ + delete — nunca existiu `PATCH`. Adicionado `UpdateQueueDto` + + `PATCH /queues/:id` (mesmos campos do create) e um botão "Editar" + por linha na tela (formulário inline reaproveitando o mesmo + componente do "Nova fila"). Testado com Playwright de verdade: + abrir o form pré-preenchido com os valores reais, editar, salvar, + confirmar que a tabela atualizou +- [x] **"Não achei como deixar o agente online"**: os endpoints + `/agents/me/login|pause|resume|logout` sempre existiram (desde uma + fase anterior), mas NENHUMA tela chamava eles — só existia o CRUD + admin de Agentes (criar o vínculo usuário+ramal), nunca um controle + pro próprio usuário logado ficar disponível. Faltavam também + `GET /agents/me` (pra saber SE tem agente vinculado e qual o + estado) e `GET /agents/me/pause-reasons` (motivos de pausa sem + exigir `agents.view`, que listaria TODOS os agentes do tenant — + permissão que o role "agent" nunca teve e não devia ganhar só pra + isso). Widget novo na topbar (`AgentStatusWidget`, visível em + qualquer página) só aparece pra quem tem Agent vinculado; mostra + estado atual + botões Entrar/Pausar/Retomar/Sair +- [x] Achado real construindo o widget: as Server Actions de + login/logout/pause/resume exportadas como arrow function que só + repassavam argumentos quebravam em runtime ("Server Actions must + be async functions") — o MESMO bug já documentado antes nesta + sessão (wizard de campanhas). Corrigido declarando como + `async function` de verdade +- [x] Testado ponta a ponta com Playwright, logado como um agente de + teste de verdade (usuário novo, role "agent", Agent vinculado a um + ramal real): Offline → clicar "Entrar" → Disponível → "Pausar" + + escolher motivo → Em pausa → "Retomar" → Disponível → "Sair" → + Offline, tudo pela tela, sem nenhuma chamada de API manual +- [x] **Destino de rota de entrada era texto livre**: agora um dropdown + de "Tipo de destino" (Ramal/IVR/Fila/Grupo de ramais) + um segundo + dropdown listando as opções reais do tenant pra cada tipo. Isso + exigiu construir de verdade 2 mecanismos de dialplan que NUNCA + tinham sido testados (fila e grupo não eram destinos possíveis até + aqui, só ficavam bonitos na tela se eu não tivesse implementado + certo): + - `InboundRoute.destinationType` (novo enum) decide como + `buildInboundRouteXml` (packages/telephony) interpreta o + destino — `callcenter` (nova application no allowlist, mesmo + risco zero de `pickup`) pra QUEUE, `bridge` multi-leg + (`user/A@domain,user/B@domain,...`) pra CALL_GROUP + - CALL_GROUP nunca salva um snapshot dos membros: `apps/ + freeswitch-config` resolve a lista de ramais do grupo TODA VEZ + que uma chamada de entrada chega, então trocar quem está no + grupo já vale na próxima chamada, sem re-salvar a rota + - EXTENSION/IVR continuam usando exatamente o mesmo `transfer` já + testado nas PHASEs 56/58 — nenhuma mudança de comportamento +- [x] Testado ponta a ponta com chamadas reais nos 2 mecanismos novos: + **fila** — softphone externo discou o DID, `show channels` + confirmou a chamada dentro da application `callcenter` com o nome + certo da fila (`@`); **grupo** — 2 ramais reais + registrados no mesmo `callGroup`, a chamada de entrada tocou nos + DOIS AO MESMO TEMPO (confirmado via `show channels`, mesmo + `call_uuid` nas duas legs `RINGING`), atender em um cancelou o + outro automaticamente — ring group de verdade, não só um bridge + pra um único ramal +- [ ] Grupo de ramais só é alcançável por Rota de Entrada — não existe + (e não foi pedido) um jeito de discar um grupo de dentro do + dialplan "default" via feature code + +## PHASE 63 — Menu em acordeão (pedido do usuário: "usar o modelo de +arcordeon no menu para que eu poder reocler cada sub menu") +- [x] `NavList` (compartilhado entre sidebar desktop e drawer mobile, + Platform e Tenant) ganhou estado de abrir/fechar por seção — cada + grupo (Discador, Call Center, Telefonia, IA, Relatórios, + Administração) alterna independente dos outros (não é exclusivo: + abrir um não fecha os demais). Chevron gira 180° indicando estado; + `aria-expanded` no botão do cabeçalho +- [x] Default: só o grupo que contém a rota atual começa aberto, os + demais começam fechados — resolve a reclamação de "menu cheio + demais" sem esconder onde o usuário está agora. Estado é local + (não persiste num F5 de propósito) mas sobrevive à navegação entre + páginas normalmente, porque o layout que contém a sidebar não + remonta em troca de rota client-side +- [x] Testado com Playwright de verdade: seção sem rota ativa começa + `aria-expanded="false"`, clicar abre (`true`), clicar de novo fecha + (`false`) + --- ## Riscos conhecidos diff --git a/apps/frontend/src/components/shell/nav-list.tsx b/apps/frontend/src/components/shell/nav-list.tsx index e4f4870..1243870 100644 --- a/apps/frontend/src/components/shell/nav-list.tsx +++ b/apps/frontend/src/components/shell/nav-list.tsx @@ -1,7 +1,9 @@ "use client"; +import { useState } from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; +import { ChevronDown } from "lucide-react"; import { cn } from "@/lib/utils"; import type { NavSection } from "./nav-types"; @@ -12,6 +14,25 @@ import type { NavSection } from "./nav-types"; export function NavList({ items, collapsed = false, onNavigate }: { items: NavSection[]; collapsed?: boolean; onNavigate?: () => void }) { const pathname = usePathname(); + // Acordeão (pedido do usuário: "poder recolher cada sub menu") — cada + // grupo abre/fecha independente dos outros, não é exclusivo (abrir um + // não fecha os demais). Default: só o grupo com a rota atual começa + // aberto — os outros começam fechados, já que a lista completa de + // grupos nunca cabe sem rolar. Estado local (não persiste num F5 de + // propósito: sobrevive normalmente à navegação entre páginas, porque o + // layout que contém a sidebar não remonta em troca de rota client-side). + const [openSections, setOpenSections] = useState>(() => + Object.fromEntries( + items + .filter((s) => s.children) + .map((s) => [s.label, s.children!.some((leaf) => leaf.href && pathname.startsWith(leaf.href))]), + ), + ); + + function toggleSection(label: string) { + setOpenSections((prev) => ({ ...prev, [label]: !prev[label] })); + } + return (
    {items.map((section) => { @@ -60,19 +81,28 @@ export function NavList({ items, collapsed = false, onNavigate }: { items: NavSe } const sectionHasActiveChild = section.children?.some((leaf) => leaf.href && pathname.startsWith(leaf.href)); + const isOpen = collapsed || (openSections[section.label] ?? false); return (
  • -
    toggleSection(section.label)} + aria-expanded={isOpen} className={cn( - "flex items-center gap-3 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide", + "flex w-full items-center gap-3 rounded-md px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors hover:bg-muted", sectionHasActiveChild ? "text-foreground" : "text-muted-foreground/70", )} > - {!collapsed && {section.label}} -
    - {!collapsed && section.children && ( + {!collapsed && ( + <> + {section.label} + + + )} + + {!collapsed && isOpen && section.children && (
      {section.children.map((leaf) => { const leafActive = leaf.href && pathname.startsWith(leaf.href);