? Tela: Criar Novo Formando

?? Visão Geral da Tela

Formulário completo para cadastro manual de um novo formando com 9 seções organizadas, validação client-side e funcionalidades de preenchimento automático.

?? Elementos da Interface

1. Cabeçalho

• Título: "Cadastrar Novo Formando"
• Subtítulo: "Preencha os dados do formando"
• Botão Voltar: Retorna para listagem de formandos

2. Alertas de Feedback

• Erro (TempData): Alert vermelho dismissível
• Sucesso (JS): Alert verde com redirect automático

3. Seção 1: Dados da Turma

• Turma * (select): Dropdown com autocomplete (Choices.js)
• Status Inicial (select): Pendente ou Aprovado (padrão: Aprovado)

4. Seção 2: Dados Pessoais

Campos obrigatórios marcados com asterisco vermelho:

• Nome Completo * (input text)
• Nome Social (input text, opcional)
• Data de Nascimento * (input date)
• CPF * (input text com máscara 000.000.000-00)
• RG * (input text)
• Órgão Emissor (input text, ex: SSP/SP)
• Sexo * (select: Masculino, Feminino)
• Gênero (input text, opcional)
• Tipo de Formando * (select: Formando, Comissão) + texto de ajuda
• Estado Civil (select: Solteiro, Casado, Divorciado, Viúvo, União Estável)
• Nacionalidade (input text, padrão: "Brasileira")
• Naturalidade - Cidade (input text)
• Naturalidade - UF (input text, maxlength 2)
• Foto de Perfil (input file, formatos: JPG/PNG, max 5MB)

5. Seção 3: Dados de Contato

• E-mail * (input email)
• Celular * (input text com máscara (00) 00000-0000)
• Telefone Residencial (input text com máscara (00) 0000-0000)

6. Seção 4: Endereço

• CEP * (input text com máscara 00000-000) + Botão "Buscar CEP" (ViaCEP API)
• Rua * (input text, preenchido via CEP)
• Número * (input text)
• Complemento (input text)
• Bairro * (input text, preenchido via CEP)
• Cidade * (input text, preenchido via CEP)
• UF * (input text, maxlength 2, preenchido via CEP)

7. Seção 5: Dados de Filiação

• Nome da Mãe (input text)
• Status da Mãe (select: Viva, Falecida)
• Nome do Pai (input text)
• Status do Pai (select: Vivo, Falecido)

8. Seção 6: Responsável Financeiro

Botões de preenchimento automático:

• ?? Próprio Formando: Preenche com dados do formando (nome, CPF, telefone, e-mail)
• ?? Pai: Preenche com nome do pai (demais campos ficam vazios)
• ?? Mãe: Preenche com nome da mãe (demais campos ficam vazios)
• ?? Importar do Responsáveis: Abre modal para buscar responsáveis cadastrados

Campos:

• Nome * (input text)
• CPF * (input text com máscara)
• Telefone (input text com máscara)
• E-mail (input email)

9. Seção 7: Responsável Legal (se menor de idade)

Botão de importação:

• ?? Importar do Responsáveis: Abre modal para buscar responsáveis cadastrados

Campos:

• Nome (input text)
• CPF (input text com máscara)
• Telefone (input text com máscara)
• Parentesco (input text, ex: Pai, Mãe, Tio)

10. Seção 8: Observações

• Observações (textarea, 4 rows, opcional)

11. Botões de Ação (rodapé fixo)

• Cancelar: Botão secundário (redireciona para Index)
• Cadastrar Formando: Botão primário com spinner (estados: normal / processando)

? Funcionalidades Interativas

Máscaras de Entrada

• CPF: 000.000.000-00
• Telefone Celular: (00) 00000-0000
• Telefone Fixo: (00) 0000-0000
• CEP: 00000-000

Busca de CEP (ViaCEP)

• Ao clicar em "Buscar CEP" ou blur do campo CEP
• Valida se CEP tem 8 dígitos
• Faz requisição para ViaCEP API
• Preenche automaticamente: Rua, Bairro, Cidade, Estado, Complemento
• Foca no campo "Número" após preenchimento

Autocomplete de Turma (Choices.js)

• Busca em tempo real por nome ou código da turma
• Placeholder: "Selecione ou busque uma turma..."
• Search placeholder: "Digite o nome da turma ou código..."

Preenchimento Automático do Responsável Financeiro

Botão "Próprio Formando":

• Valida se nome completo foi preenchido
• Copia: Nome, CPF, Telefone, E-mail
• Feedback visual: Botão muda para verde "Preenchido!" por 2 segundos
• Alert de sucesso por 3 segundos

Botões "Pai" e "Mãe":

• Valida se nome do pai/mãe foi preenchido na seção de filiação
• Copia apenas o nome
• Limpa demais campos (CPF, telefone, e-mail)
• Feedback visual: Botão muda cor por 2 segundos
• Foca no campo CPF para continuar preenchimento

Modal de Importação de Responsável

Funcionalidades:

• Campo de busca com debounce de 500ms
• Requisição para /Guardians/Search?search=...
• Loading state durante requisição
• Tabela com: Nome, Email, CPF, Telefone, Botão Selecionar
• Empty state se não encontrar resultados
• Ao selecionar: preenche campos e fecha modal

Validação de Formulário

• Validação HTML5 nativa (required, email, date, etc.)
• Validação client-side antes do envio
• Mensagens de erro inline abaixo de cada campo

Envio AJAX do Formulário

• preventDefault() do evento submit
• FormData com todos os campos
• TipoFormando padrão: "formando" se não preenchido
• Header: X-Requested-With: XMLHttpRequest
• Estados do botão: Normal ? Loading ? Sucesso/Erro

?? Notificações e Feedback

• Sucesso: Alert verde "Formando cadastrado com sucesso! Redirecionando..." + redirect após 1.2s
• Erro: Alert vermelho com mensagem específica do servidor
• Validação: Alert amarelo "Preencha todos os campos obrigatórios"
• CEP não encontrado: Alert "CEP não encontrado"
• CEP inválido: Alert "CEP inválido"

?? Regras de Negócio

• Nome completo deve ter pelo menos 3 caracteres
• E-mail deve ser único dentro do tenant
• CPF deve ser válido (formato 000.000.000-00)
• Data de nascimento não pode ser futura
• Turma é obrigatória
• Responsável financeiro é obrigatório (nome e CPF)
• Foto de perfil: max 5MB, formatos JPG/PNG

?? Integração com API

Cadastro: POST /Formandos/Create (multipart/form-data)

Buscar CEP: GET https://viacep.com.br/ws/{cep}/json/

Buscar Responsáveis: GET /Guardians/Search?search={termo}

?? Responsividade

Desktop: Layout em 1 coluna com cards organizados

Mobile: Cards empilhados, botões de preenchimento automático em linha única