req-118: Novo Layout Administrativo em Tailwind CSS, Menu Interativo e Modernização do Painel de Perfil com Gestão de Sessões

• Status do intake: ready-for-intake

• Data: 2026-08-17 (atualizado em 2026-08-18)

• Origem: solicitação do usuário para criação de layout administrativo nativo em Tailwind CSS, suporte completo a controles de menu e migração do módulo perfil-usuario com gestão de sessões ativas

• Classificação: novo layout administrativo, menu dinâmico Tailwind, modernização de UI/UX, segurança de sessões

• Batch candidato: BATCH-119

1. Contexto e Objetivos

O painel de perfil de usuário e o sistema administrativo atualmente operam sob o layout legado layout-administrativo-do-gestor e o componente menu-principal-sistema, que dependem inteiramente das classes do Fomantic-UI.

Para garantir que a modernização do perfil-usuario e dos próximos módulos não conflite com a base legada, o sistema deve:

1. Preservar os layouts legados (layout-administrativo-do-gestor) para garantir compatibilidade retroativa com os módulos que ainda não foram migrados;

2. Criar o novo layout administrativo em Tailwind CSS (layout-administrativo-tailwind em pt-br e en), com topo moderno, avatar, logo, overlay responsivo mobile e contêiner fluido;

3. Reconstruir o Menu Administrativo e seus controles em Tailwind CSS:

   • Botão toggle de abrir/fechar menu;

   • Botões de ação rápida: Acessar Site (external-link), Dashboard 3D (box/cube) e Fechar Menu (x);

   • Campo de busca/filtro de módulos em tempo real com feedback de lista vazia;

   • Alça de redimensionamento manual da largura do menu (menu-resize-handle) com comportamento de arrastar e soltar (drag & drop) em JavaScript nativo e persistência da preferência de largura;

   • Rodapé da barra lateral com badge de versão do Gestor;

4. Reconstruir o Painel perfil-usuario em Abas Modernas (Tailwind CSS) com gestão de sessões ativas e dispositivos conectados (usuarios_tokens).

2. Escopo Técnico Requerido

Módulo 1: Criação do Layout Administrativo em Tailwind CSS (layout-administrativo-tailwind)

• Arquivos:

  • gestor/resources/pt-br/layouts/layout-administrativo-tailwind/layout-administrativo-tailwind.html e .css

  • gestor/resources/en/layouts/layout-administrativo-tailwind/layout-administrativo-tailwind.html e .css

• Especificação da Estrutura:

  • Topo com logo Conn2Flow, perfil do usuário com avatar e botão de menu mobile;

  • Sidebar com container de controles, busca de módulos, lista hierárquica e handle de redimensionamento;

  • Dimmer / loader de carregamento de página em Tailwind (animate-spin + backdrop);

  • Inclusão dos scripts de controle de redimensionamento e ancoragem do menu em JavaScript Vanilla.

Módulo 2: Componente do Menu Administrativo e Integração com gestor.php

• Arquivos:

  • gestor/resources/pt-br/components/menu-principal-sistema-tailwind/ (e en/)

  • gestor/gestor.php na função gestor_pagina_menu()

• Implementação:

  • Permitir que gestor_pagina_menu() identifique o framework do layout ativo (tailwindcss vs legado) e renderize a árvore de categorias/módulos autorizados com classes utilitárias modernas;

  • JavaScript de filtro em tempo real sem Fomantic-UI (#gestor-menu-filtro), ocultando itens que não correspondam à busca;

  • Implementação do menu-resize-handle: escuta de eventos mousedown, mousemove e mouseup limitando larguras mínima (ex: 220px) e máxima (ex: 450px) e salvando a largura no localStorage.

Módulo 3: Reestruturação do Painel do Perfil em Abas (perfil-usuario)

• Arquivos:

  • gestor/modulos/perfil-usuario/resources/pt-br/pages/perfil-usuario/perfil-usuario.html e .precompiled.css

  • gestor/modulos/perfil-usuario/resources/en/pages/perfil-usuario/perfil-usuario.html e .precompiled.css

  • gestor/modulos/perfil-usuario/perfil-usuario.js e perfil-usuario.php

• Abas Nativas:

  • Tab 1: Dados Pessoais / Conta: Nome completo (primeiro, meio, último), nome da conta, e-mail, nome de usuário, alteração de senha com medidor de força de senha em tempo real;

  • Tab 2: Segurança & 2FA:

  • Status do 2FA;

  • Ativação/desativação de TOTP via Aplicativo Autenticador (com QR Code SVG e chave manual formatada);

  • Ativação/desativação de 2FA por E-mail com envio de código de teste;

  • Gerenciamento de vínculos com Contas Sociais (Google, Meta);

  • Tab 3: Sessões & Dispositivos: Lista de acessos ativos com badges ("Sessão Atual", "Windows - Chrome", IP, data) e botões de revogação.

Módulo 4: Gerenciamento de Sessões no Core (gestor/bibliotecas/usuario.php)

• Implementar:

  • usuario_sessoes_listar(int $id_usuario, ?string $token_atual_pubID = null): array: Lê a tabela usuarios_tokens, parseia o user_agent para extrair browser/OS amigáveis e marca a sessão ativa;

  • usuario_sessao_revogar(string $pubID, int $id_usuario): bool: Remove o token específico;

  • usuario_sessoes_revogar_outras(string $token_atual_pubID, int $id_usuario): bool: Remove todas as sessões exceto a atual.

• Endpoints AJAX correspondentes no perfil-usuario.php.

3. Critérios de Aceite e Validação

1. Layout legado layout-administrativo-do-gestor inalterado e preservado para os módulos legados.

2. Novo layout layout-administrativo-tailwind renderizado com perfeição em desktop, tablet e mobile.

3. Menu administrativo em Tailwind com controles funcionais (abrir, fechar, redimensionar com menu-resize-handle, acessar site, dashboard 3D, filtro de busca de módulos).

4. Página perfil-usuario operando sob o novo layout Tailwind com navegação entre abas sem reload.

5. Lista de sessões ativas funcional, permitindo revogar sessões individuais ou todas as outras com feedback visual instantâneo.

6. Testes unitários PHP (composer test) e Vitest (npx vitest run) 100% verdes.