Arquitetura do frontend

O cliente é uma SPA em React 19 e TypeScript, construída com Vite. TanStack Router define as rotas, TanStack Query gerencia dados remotos e Zustand mantém estados locais específicos. Os componentes de interface usam Tailwind CSS e uma base shadcn.

flowchart TB
    U[Usuário no navegador] --> R[TanStack Router]
    R --> G[Guarda de autenticação e permissões]
    G --> P[Páginas e features React]
    P --> Q[TanStack Query]
    P --> S[Estado local / Zustand]
    P --> L[localStorage: sessão e rascunhos]
    Q --> F[apiFetch]
    F --> A[API Procon Flow /v1]

Organização

• src/routes/: composição de rotas e políticas de acesso.
• src/features/: funcionalidades isoladas por domínio.
• src/components/ui/: vocabulário visual compartilhado.
• src/lib/: cliente HTTP, ambiente e utilitários transversais.
• src/features/shared/: tabelas, filtros, providers e tipos reutilizados.

Fronteiras

As rotas devem permanecer finas: validam parâmetros, aplicam guardas e entregam a tela. Regras e chamadas de API pertencem à feature correspondente. Componentes compartilhados só devem receber comportamento que já é usado em mais de um domínio.

Autenticação

O token de acesso é persistido no localStorage. O cliente HTTP tenta renovar a sessão em POST /v1/auth/refresh quando necessário. Ao sair, o armazenamento local é limpo; isso também remove preferências e rascunhos locais.