C4 - Nível 3 (Componentes Frontend)

Objetivo

Descrever os componentes internos do frontend web com base na arquitetura modular atual e nas rotas efetivamente registradas.

Composição de rotas

Arquivos fonte: src/routes/*.tsx + src/App.tsx

• publicRoutes: home, auth, design-system, not-found
• sharedRoutes: dashboard, onboarding, profile, appointments, chat, notifications
• clientRoutes: ciclos, saúde, pagamentos, cursos, profissionais
• professionalRoutes: pacientes, agenda, crm, financeiro, cursos
• adminRoutes: gestão, billings admin, dashboard drilldown, módulos, cursos admin

App.tsx aplica ProtectedRoute quando protection está definido.

Arquitetura por submódulo

Padrão dinâmico:

• page.tsx (orquestra)
• hooks/* (estado, query/mutation)
• services/* (acesso HTTP)
• view.tsx (render puro)
• components/*
• types.ts e mappers.ts (quando necessário)

Fluxo obrigatório:

• page -> hook -> service
• view <- page

Componentes transversais

• ProtectedRoute: auth + role + requiredModule + regra de onboarding profissional
• ProfileRouter: roteamento de perfil por tipo de usuário
• routePreload.ts: prefetch por perfil/módulo
• AccessibilityPanel: controles de acessibilidade globais

Quality gates arquiteturais

Scripts de enforcement:

• check:deps:modules
• check:deps:modules:strict

Regras checadas incluem:

• view sem useQuery/useMutation
• view sem import de service/API local
• service sem import de hook/view
• page orquestrando via hook

Riscos técnicos

• existência de pastas globais legadas (src/hooks, src/mappers, src/types, src/services) pode gerar acoplamento se não houver disciplina de fronteira.