Requisição 124 — Correções no Layout Administrativo Tailwind, Menu do Gestor, Histórico do Perfil e Identidade Visual Azul Conn2Flow no Core

Esta especificação define os requisitos para um conjunto de correções de layout, menu administrativo, histórico de alterações e padronização da paleta visual azul do Conn2Flow nas páginas de autenticação e perfil do Core.

1. Contexto e Motivação

Durante os testes de homologação no repositório conn2flow (Core), foram identificados os seguintes pontos de ajuste:

1. Sobreposição do Editbar: O c2f-site-toolbar (editbar de ~30px fixo no topo) sobrepõe o cabeçalho no layout administrativo Tailwind (layout-administrativo-tailwind).

2. Ícones Ausentes no Menu do Core: Módulos como Módulos de IA, Prompts de IA, Formulários Definições, Formulários Envios, Atualização, modulos, modulos_grupos e modulos_operacoes não possuem ícones definidos nos catálogos Fomantic e Lucide.

3. Buraco Lateral ao Recolher o Menu: Ao clicar em data-admin-abrir para recolher a barra lateral, o conteúdo principal não se expande até a borda esquerda, mantendo uma margem em branco equivalente à largura do menu.

4. Botão "Sair" Cortado no Menu: O scroll da barra lateral não permite rolar até o final absoluto, cortando o botão "Sair" (signout/) em cerca de 20~30px.

5. Bloco de Histórico no Perfil: A tabela de histórico com o marcador #historico# está aparecendo em todas as abas do perfil de usuário com o token cru não resolvido.

6. Paleta de Cores das Páginas de Auth e Perfil no Core: As páginas de autenticação pública (signin/, forgot-password/, signup/, redefine-password/, etc.) e os botões/indicadores do perfil de usuário no Core herdaram tons verdes ([REDACTED]). O Core deve utilizar a paleta oficial azul Conn2Flow: rgb(30, 45, 74), rgb(27, 171, 198) e rgb(203, 203, 203).

2. Escopo Técnico e Frentes de Implementação

Frente 1: Compensação de Topo para o Editbar no layout-administrativo-tailwind

• Arquivos: gestor/resources/pt-br/layouts/layout-administrativo-tailwind/ e gestor.php.

• Solução:

  • Quando a barra de edição (c2f-site-toolbar) estiver ativa (ou classe/flag de toolbar presente), aplicar um deslocamento superior de compensação (pt-[30px] ou top-[30px]) no cabeçalho e container do layout administrativo Tailwind, evitando sobreposição de elementos.

Frente 2: Completude dos Ícones do Menu Administrativo no Core

• Arquivos: Banco de dados (modulos), migração Phinx (se aplicável) e descritores modulos/*.json.

• Solução:

  • Definir e registrar os pares de ícones corretos para todos os módulos do Core que estão sem ícone:

  • Módulos de IA, Prompts de IA, Formulários Definições, Formulários Envios, Atualização, modulos, modulos_grupos, modulos_operacoes.

  • Garantir preenchimento nos dois catálogos: icone (Fomantic UI) e icone_tailwind (Lucide Icons).

Frente 3: Expansão do Conteúdo Principal ao Colapsar o Menu Lateral

• Arquivos: layout-administrativo-tailwind e gestor/assets/global/admin-tailwind.js.

• Solução:

  • Ao alternar o estado do menu pelo botão data-admin-abrir, sincronizar a classe do container principal (#paginaCont / <main>), removendo o padding/margin esquerdo (lg:pl-64 / lg:ml-64) quando o menu estiver recolhido, para que o conteúdo ocupe toda a largura da tela até os cantos.

Frente 4: Scroll Completo do Rodapé do Menu (Botão "Sair")

• Arquivos: layout-administrativo-tailwind e componentes de menu.

• Solução:

  • Adicionar padding inferior adequado (pb-12 a pb-16) no elemento <nav> ou container rolável da sidebar, garantindo que o usuário consiga rolar até o fim e visualizar o botão "Sair" e as informações de versão com conforto visual.

Frente 5: Tratamento do Bloco de Histórico no Perfil de Usuário

• Arquivos: gestor/modulos/perfil-usuario/ (perfil-usuario.php e templates).

• Solução:

  • Isolar a renderização da tabela de histórico para que ela só seja exibida na aba correspondente (ex: aba de Dados) quando houver histórico cadastrado.

  • Tratar o token #historico# para que nunca seja exibido como texto cru na tela.

Frente 6: Identidade Visual Azul Conn2Flow nas Telas Públicas e Perfil

• Arquivos: gestor/modulos/perfil-usuario/resources/pt-br/pages/ (acessar-sistema, esqueceu-a-senha, cadastrar-no-sistema, redefinir-senha, signin-2fa, etc.) e componentes do perfil.

• Solução:

  • Substituir classes e variáveis de cor verde (emerald/green) pela paleta azul Conn2Flow:

  • Cores Oficiais: rgb(30, 45, 74) (c2f-dark), rgb(27, 171, 198) (c2f-blue), rgb(203, 203, 203) (c2f-border).

  • Botões Primários: bg-sky-600 hover:bg-sky-700 ou bg-[#1babce] hover:bg-[#1594af] com texto branco.

  • Links e Destaques: text-sky-600 hover:text-sky-700 ou text-[#1babce].

  • Anéis de Foco: focus:border-sky-600 focus:ring-sky-600/20.

  • Abas Ativas do Perfil: indicador ativo da aba em tom azul Conn2Flow.

3. Critérios de Aceite

1. Editbar sem Sobreposição: Com o editbar ativo, o cabeçalho do layout administrativo Tailwind é deslocado para baixo e permanece totalmente visível e clicável.

2. Ícones Completos: Todos os módulos do Core listados possuem ícones válidos em Fomantic e Lucide no menu administrativo.

3. Colapso Suave do Menu: O conteúdo da página se expande para ocupar 100% da tela ao recolher o menu lateral, sem deixar buraco vazio.

4. Visibilidade do Botão Sair: O botão "Sair" no rodapé do menu é acessível e totalmente visível ao final da rolagem.

5. Histórico Saneado: A tabela de histórico não aparece em abas indevidas e o marcador #historico# é tratado corretamente.

6. Paleta Azul Conn2Flow: Todas as páginas de autenticação pública e o perfil no Core utilizam os tons de azul Conn2Flow (rgb(30, 45, 74) / rgb(27, 171, 198)).

7. Testes e Lints: npm run test (Vitest), composer test (PHPUnit) e php -l 100% verdes.