SeConectai_Web/Schema/05-motor-do-formulario-briefing.md

05 — Motor do formulário do briefing

Contexto do projeto (leia sempre)

Sistema web "Briefing de Site" da SeConectai: o cliente se cadastra e depois preenche o briefing de criação do site, com um botão Ajuda em cada pergunta que abre um popup com o texto do guia auxiliar. O dono (Tiago) acompanha tudo por um painel admin. Stack fixa: Next.js 14+ (App Router) + TypeScript, PostgreSQL 16, Prisma, Tailwind + shadcn/ui, React Hook Form + Zod, Auth.js v5 (Credentials, estratégia JWT), Docker Compose. Idioma da interface: pt-BR. Regras gerais: leia 00-arquitetura-briefing-site.md e 99-progresso.md antes de começar; não avance se a etapa anterior estiver incompleta; ao terminar, devolva o 99-progresso.md atualizado. Não invente dependências fora da stack. Nada de senhas de clientes em lugar nenhum.

Pré-requisito

Etapas 01–04 concluídas.

Tarefa

1. Criar briefing: botão "Iniciar meu briefing" cria Briefing RASCUNHO. Os campos do cabeçalho do documento original (Empresa/Marca, Responsável, Data, Contato) são pré-preenchidos com os dados do cadastro e exibidos na primeira tela, editáveis.
2. Tela de abertura /briefings/[id]: mostra o "Como preencher" e o aviso de senhas (vindos de Configuracao), lista das 19 seções com progresso por seção (respondidas/total) e botão "Continuar de onde parei".
3. Tela de seção /briefings/[id]/[secao]: título e descrição da seção; cada pergunta renderizada por components/form/PerguntaField.tsx, escolhendo o componente pelo tipo:
   • TEXTAREA: textarea com contador discreto.
   • RADIO: grupo de opções (uma escolha).
   • CHECKBOX: múltipla escolha.
   • ANEXO: tratado na etapa 08 (aqui, deixar placeholder). Se permiteComplemento, exibir abaixo um campo curto "Complemento / outro". O rótulo mostra rotulo, e dica aparece como texto de apoio. Cada pergunta tem espaço reservado para o botão Ajuda (etapa 06).
4. Navegação: Anterior/Próxima seção, menu lateral (drawer no celular) com as 19 seções e indicadores de concluída/parcial; barra de progresso geral.
5. Estado: React Hook Form por seção; valores iniciais carregados de Resposta. Persistência vem na etapa 07.
6. "Respondida": considerar respondida se houver texto não vazio ou ao menos uma opção marcada. Perguntas não são obrigatórias por padrão (obrigatoria=false); o documento aceita "Não se aplica" / "A definir" — exibir esses dois como atalhos (chips) em campos de texto que preenchem o valor ao toque.

Critérios de aceite

• As 19 seções renderizam a partir do banco, sem campo escrito à mão.
• Os 4 tipos funcionam com os valores corretos (inclusive complemento).
• Navegação entre seções e progresso corretos; usável em tela de 360 px.
• Cliente não consegue abrir briefing de outro cliente (404).

Atualize 99-progresso.md (05).