?? Tela: Editar Formando

Rota: /Formandos/Edit/:id

Tipo: Formulário extenso de edição

Permissão necessária: Administrador ou Gerente

?? Visão Geral da Tela

Formulário completo para edição de formando existente com 11 seções organizadas, validação em tempo real, progress bar e funcionalidades avançadas de UX.

?? Elementos da Interface

1. Hero Section Elegante

  • Breadcrumb: Formandos › Detalhes › Editar
  • Avatar circular: 60px com inicial ou foto do formando
  • Nome principal: Tipografia grande (2.25rem, peso 300)
  • Nome social: Se preenchido, exibe abaixo com ícone de coração
  • Meta badges:
    • Turma + código
    • Curso
    • Instituição
    • Ano de formatura
  • Botões de ação (topo direito):
    • ? Voltar
    • ??? Ver detalhes
    • ??? Excluir (modal de confirmação)

2. Barra de Progresso

  • Exibe % de preenchimento de campos obrigatórios
  • Atualiza em tempo real conforme o usuário preenche
  • Gradiente roxo (667eea ? 764ba2)

3. Layout em 2 Colunas

Coluna Principal (col-xxl-8): 8 seções de formulário

Sidebar (col-xxl-4): 2 cards de resumo (sticky)

4. Seção 1: Identificação

  • Nome completo * (input text)
  • Nome social (input text + texto de ajuda)
  • Data de nascimento * (input date)
  • CPF * (input text com máscara)
  • RG (input text)
  • Órgão emissor (input text)
  • Sexo (select: Masculino, Feminino, Prefiro não informar)
  • Gênero (input text com placeholder)
  • 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)
  • Naturalidade - cidade (input text)
  • Naturalidade - UF (input text, maxlength 2)

5. Seção 2: Contato e Redes

  • E-mail * (input email)
  • Celular * (input text com máscara)
  • Telefone residencial (input text com máscara)
  • Instagram (input text com prefixo @)
  • LinkedIn (input text com placeholder de URL)

6. Seção 3: Endereço

  • CEP (input text com máscara + busca automática)
  • Logradouro (input text)
  • Número (input text)
  • Complemento (input text)
  • Bairro (input text)
  • Cidade (input text)
  • Estado - UF (input text, maxlength 2)

7. Seção 4: Filiação e Contato de Emergência

  • Nome da mãe (input text)
  • Status da mãe (select: Viva, Falecida)
  • Nome do pai (input text)
  • Status do pai (select: Vivo, Falecido)
  • Contato de emergência - nome (input text)
  • Contato de emergência - telefone (input text com máscara)
  • Contato de emergência - relação (input text)

8. Seção 5: Saúde, Vestimenta e Preferências

  • Preferência de pagamento (select: Boleto, Cartão, PIX, Débito automático, Outro)
  • Tipo sanguíneo (select: A+, A-, B+, B-, AB+, AB-, O+, O-)
  • Tamanho da camisa (input text)
  • Tamanho da beca (input text)
  • Tamanho do sapato (input text)
  • Solicitou camisa personalizada (toggle switch)
  • Alergias (textarea, 2 rows)
  • Restrições alimentares (textarea, 2 rows)
  • Necessidades especiais (textarea, 2 rows)
  • Observações médicas (textarea, 2 rows)

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

Botões de preenchimento automático:

  • ?? Próprio Formando
  • ?? Pai
  • ?? Mãe
  • ?? Importar do Responsáveis

Campos:

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

10. Seção 7: Responsável Legal

Botão de importação:

  • ?? Importar do Responsáveis

Toggle:

  • Formando é menor de idade (toggle switch)

Campos:

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

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

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

12. Sidebar: Card de Resumo

  • Cadastro criado (data formatada)
  • Última atualização (data formatada)
  • Status (capitalizado)
  • Contrato (Aceito ou Pendente)

13. Sidebar: Card de Turma Vinculada

  • Nome da turma + código
  • Curso
  • Instituição
  • Ano de formatura

14. Rodapé Fixo (Sticky Actions)

  • Cancelar: Botão outline secundário (redireciona para Details)
  • Salvar mudanças: Botão primário com gradiente

? Funcionalidades Interativas

Progress Bar Inteligente

  • Calcula % de campos obrigatórios preenchidos
  • Atualiza em tempo real (listeners em todos os inputs)
  • Considera checkboxes e selects

Máscaras de Entrada (JavaScript)

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

Busca Automática de CEP

  • Evento blur no campo CEP
  • Valida se CEP tem 8 dígitos
  • Requisição para ViaCEP API
  • Preenche automaticamente: Rua, Bairro, Cidade, Estado

Autocomplete em Selects (Choices.js)

Aplicado em 7 selects:

  • sexoSelect
  • tipoFormandoSelect
  • estadoCivilSelect
  • maeStatusSelect
  • paiStatusSelect
  • tipoSanguineoSelect
  • preferenciaPagamentoSelect

Configuração: busca habilitada, sem ordenação, placeholder customizado

Validação em Tempo Real

  • Campos obrigatórios marcados com *
  • Evento blur adiciona classe is-invalid se vazio
  • Evento input remove is-invalid e adiciona is-valid se preenchido
  • Scroll automático para primeiro erro ao enviar formulário

Modal de Confirmação de Exclusão

  • Modal customizado (não usa SweetAlert2)
  • Título: "Confirmar Exclusão" com ícone de alerta
  • Alert amarelo: "Atenção! Esta ação não pode ser desfeita"
  • Descrição: "Tem certeza que deseja excluir este formando?"
  • Nota: "Todos os dados relacionados também serão removidos"
  • Botões: Cancelar (secundário) / Sim, excluir (danger)

Efeito Ripple em Botões

  • Animação de onda ao clicar em qualquer botão
  • Criada dinamicamente via JavaScript
  • Duração: 600ms

Atalhos de Teclado

  • Ctrl + S: Salvar formulário

?? Notificações e Feedback

  • Sucesso ao salvar: Alert verde + redirect para Details
  • Erro ao salvar: Alert vermelho com mensagem específica
  • Sucesso ao excluir: Toast + redirect para Index
  • Erro de validação: Scroll para primeiro campo inválido

?? Regras de Negócio

  • Campos obrigatórios marcados com * devem ser preenchidos
  • CodigoTurmaId e UsuarioId são hidden (não editáveis)
  • Toggles (CamisaPersonalizada, IsMenorIdade) têm hidden input com valor "false"
  • E-mail deve ser único dentro do tenant
  • CPF deve ser válido

?? Integração com API

Salvar: POST /Formandos/Edit/:id

Excluir: GET /Formandos/Delete/:id

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

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

?? Responsividade

Desktop (> 1200px): Layout 2 colunas (col-xxl-8 + col-xxl-4)

Tablet/Mobile: Layout 1 coluna empilhada, sidebar não é sticky