Frontend Web - Estado Atual (2026-03-10)¶

Este documento consolida o estado atual do frontend web em billings-ease-web na data 2026-03-10.

Atualização incremental (2026-03-10)¶

layout persistente no router raiz com Route element={<Layout/>} e renderização de páginas via Outlet;
sidebar migrada para árvore colapsável com múltiplos níveis e persistência por perfil em localStorage;
hubs adicionados para reduzir ruído de navegação:
/admin/marketplace
/professional/educacional
/client/aprendizado
tours contextuais adicionados/adaptados para hubs de admin/profissional/cliente;
command palette global (⌘K/Ctrl+K) com:
índice baseado na navegação filtrada por permissão,
ações rápidas (tour, perfil, logout),
agrupamento visual por seção (Ações/Páginas).

Fonte de verdade¶

Rotas: src/routes/*.tsx
Composição da aplicação: src/App.tsx
Guardas e autorização: src/components/ProtectedRoute.tsx + src/contexts/AuthContext.tsx
Regras arquiteturais: scripts/check-modules-architecture.sh

Arquitetura vigente¶

O frontend foi consolidado em arquitetura orientada a módulos:

src/modules/<dominio>/<submodulo>/...
padrão principal por submódulo dinâmico:
page.tsx (orquestração)
hooks/* (estado, query/mutation, handlers)
services/* (integração HTTP e regras de acesso a dados)
view.tsx (render puro)
components/* (blocos de UI)
types.ts (tipos locais)
mappers.ts (quando há transformação de DTO)

Fluxo de dependência obrigatório¶

page -> hook -> service
view <- page
proibido:
service importar hook ou view
hook importar view
view importar service

Situação de módulos¶

Domínios ativos em src/modules:

admin (com submódulos por contexto: billings, courses, dashboard, module-management)
auth
client
courses
cycles
design-system
finance
management
payments
professional
profile
public
shared

Observação: existem diretórios globais legados (src/hooks, src/mappers, src/types, src/services) ainda em uso pontual para infraestrutura compartilhada. O padrão de feature novo está em src/modules/**.

Roteamento e perfis¶

As rotas são compostas em src/routes/index.ts por:

publicRoutes
sharedRoutes
adminRoutes
professionalRoutes
clientRoutes

A proteção é aplicada por ProtectedRoute com suporte a:

autenticação
requiredRole
requiredModule
regras de onboarding para profissional

Controle de módulos no web¶

O web consome snapshot de módulos e aplica:

ocultação de navegação
bloqueio por requiredModule
prefetch condicionado por módulos

Endpoint utilizado no fluxo atual:

GET /users/me/modules

Qualidade e gates¶

Scripts de validação ativos no package.json (pnpm):

pnpm check:deps:modules
pnpm check:deps:modules:strict
pnpm lint
pnpm build
pnpm test
pnpm test:coverage

Status operacional¶

arquitetura modular em produção no código
rotas públicas e protegidas carregadas com lazy()
prefetch de rotas por perfil e módulo em src/routes/routePreload.ts
design system navegável por rotas públicas (/design-system/*)
navegação lateral por árvore colapsável com persistência de grupos por perfil
command palette integrada ao layout (atalho global e botão no header/sidebar)

LGPD no web (estado atual)¶

Implementado no módulo compartilhado src/modules/shared/privacy:

central LGPD (/privacy) com resumo de solicitações;
visualização consolidada (/my-data);
exportação (/data-export) com polling de status e download;
exclusão (/delete-account) com confirmação de protocolo;
consentimentos (/consents) e histórico;
protocolos (/lgpd/requests);
preferências de cookies (/cookie-preferences).

Comportamentos relevantes:

resumo reidrata a última exportação após refresh;
correção de e-mail exige senha atual e confirmação por e-mail;
ao receber 403 Usuario inativo, o interceptor limpa sessão e redireciona para login.