Frontend

Organização

Cada feature fica em src/features/<feature> com:

• pages;
• components;
• hooks;
• services;
• schemas;
• types;
• constants, quando necessário.

Rotas em src/app devem ser wrappers finos para páginas de feature.

Formulários

Use React Hook Form + Zod.

Padrões importantes:

• campos condicionais com .refine() ou .superRefine();
• transformação de payload com .transform() quando o backend espera outro formato;
• schema de edição separado quando nem todos os campos são obrigatórios;
• modal de descarte apenas quando houver dirty state real.

Cache

Use os hooks compartilhados sobre TanStack Query.

Ao alterar dados relacionados, invalide todos os caches afetados:

• candidatura altera vaga e candidato;
• restrição de candidato altera listas de candidatos, detalhes e vagas abertas com aquele candidato;
• edição de cliente pode alterar listas, detalhe e regionais;
• cargo/permissão pode alterar usuários e visibilidade.

Interface

• Preserve o padrão visual adotado nas telas recentes de vagas, clientes, candidatos, usuários e chamados.
• Prefira filtros úteis a textos explicativos.
• Evite cards aninhados e espaçamentos exagerados no começo de modais.
• Use termos de produto: Regional, não Client Unit.
• Em telas administrativas, deixe claro o que é edição de cadastro e o que é contrato técnico do sistema.

Referências:

• Funcionalidades
• Validação de Formulários
• TanStack Query