??? Tela: Detalhes do Formando

Rota: /Formandos/Details/:id

Tipo: Visualização somente leitura com cards informativos

Permissão necessária: Administrador, Gerente ou Coordenador

?? Visão Geral da Tela

Página de visualização completa de todos os dados do formando em formato somente leitura, com design elegante em cards organizados por categoria de informação.

?? Elementos da Interface

1. Hero Section com Avatar

  • Breadcrumb: Formandos › Detalhes
  • Avatar circular: 120px com:
    • Foto do formando (se disponível)
    • Inicial do nome em gradiente (se sem foto)
    • Borda de 3px + sombra
    • Efeito hover: translateY(-2px) + sombra maior
  • Nome principal: Tipografia grande (2.5rem, peso 300)
  • Nome social: Se preenchido, exibe abaixo com ícone de coração rosa
  • Meta badges:
    • Turma + código (ou "Turma não vinculada")
    • Curso (ou "Curso não informado")
    • Instituição (ou "Instituição não informada")
    • Ano de formatura (ou "—")
  • Status chips:
    • Status do formando (Aprovado/Pendente/Rejeitado) com cor correspondente
    • Tipo (Formando/Comissão/Formando Infantil) com ícone
  • Botões de ação (topo direito):
    • ? Voltar para lista
    • ?? Editar
    • ??? Excluir

2. Layout em 2 Colunas

Coluna Principal (col-xxl-8): 6 cards de informações

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

3. Card: Identificação

Grade de definições (dl/dt/dd):

  • Nome completo
  • Nome social (se preenchido)
  • Data de nascimento + Idade calculada (ex: "01/01/2000 (26 anos)")
  • CPF
  • RG + Órgão emissor
  • Sexo
  • Gênero (se preenchido)
  • Estado civil
  • Nacionalidade
  • Naturalidade (Cidade/UF)

4. Card: Contato e Redes Sociais

  • E-mail pessoal (clicável)
  • Celular (clicável com tel:)
  • Telefone residencial (se preenchido)
  • Instagram (link para perfil)
  • LinkedIn (link para perfil)

5. Card: Endereço

  • CEP
  • Logradouro, Número, Complemento
  • Bairro
  • Cidade/UF

6. Card: Filiação e Emergência

  • Nome da mãe + Status (Viva/Falecida)
  • Nome do pai + Status (Vivo/Falecido)
  • Contato de emergência (Nome, Telefone, Relação)

7. Card: Saúde e Preferências

  • Tipo sanguíneo
  • Alergias
  • Restrições alimentares
  • Necessidades especiais
  • Observações médicas
  • Tamanho da camisa
  • Tamanho da beca
  • Tamanho do sapato
  • Camisa personalizada (badge verde se true)
  • Preferência de pagamento

8. Card: Responsáveis

Seção: Responsável Financeiro

  • Nome
  • CPF
  • RG
  • Telefone
  • E-mail

Divider horizontal pontilhado

Seção: Responsável Legal

  • Menor de idade? (badge verde "Sim" ou cinza "Não")
  • Nome
  • CPF
  • RG
  • Telefone
  • E-mail
  • Parentesco

9. Sidebar: Card de Status

  • Status atual (badge grande com cor)
  • Tipo de formando (badge com ícone)
  • Lista de checks:
    • Cadastro criado em [data]
    • Última atualização em [data]
    • Contrato: [Aceito em data] ou [Pendente]

10. Sidebar: Card de Turma

  • Nome da turma
  • Código da turma
  • Curso
  • Instituição
  • Ano de formatura
  • Botão: "Ver turma completa"

11. Sidebar: Card de Ações Rápidas

  • ?? Editar formando
  • ?? Gerar contrato
  • ?? Enviar e-mail
  • ?? Enviar SMS

12. Sidebar: Card de Observações

  • Observações administrativas (textarea readonly ou texto)
  • Se vazio: mensagem "Nenhuma observação registrada"

? Funcionalidades Interativas

Cálculo Automático de Idade

  • Calcula idade baseado em data de nascimento
  • Considera ano bissexto
  • Se idade < 0, exibe 0
  • Formato: "DD/MM/AAAA (XX anos)"

Links Clicáveis

  • E-mail: mailto:email@exemplo.com
  • Telefone: tel:+5511987654321
  • Instagram: https://instagram.com/usuario
  • LinkedIn: URL completo

Badges Dinâmicos

Status do Formando:

  • Aprovado: Verde com ícone de check
  • Pendente: Amarelo com ícone de relógio
  • Rejeitado: Vermelho com ícone de X

Tipo de Formando:

  • Formando: Azul com ícone de escola
  • Comissão: Ciano com ícone de usuários
  • Formando Infantil: Amarelo com ícone de bebê

Status do Contrato:

  • Aceito: Verde com data de aceite
  • Pendente: Cinza com texto "Aguardando aceite"

Campos Vazios

Se um campo não estiver preenchido, exibe:

  • "Não informado" (texto em cinza)
  • "—" (para campos numéricos ou datas)

?? Notificações e Feedback

  • Sucesso (TempData): Alert verde dismissível no topo
  • Erro (TempData): Alert vermelho dismissível no topo

?? Regras de Negócio

  • Apenas formandos do tenant logado podem ser visualizados
  • Idade é calculada dinamicamente no servidor (Razor)
  • Tipo "Formando Infantil" sobrescreve campo TipoFormando se IsCadastroInfantil == true
  • Todos os dados são somente leitura (não há inputs editáveis)

?? Navegação

  • Ao clicar em "Voltar": Redireciona para /Formandos/Index
  • Ao clicar em "Editar": Vai para /Formandos/Edit/:id
  • Ao clicar em "Excluir": Modal de confirmação + POST para /Formandos/Delete/:id
  • Ao clicar em "Ver turma completa": Vai para /Turmas/Details/:turmaId

?? Responsividade

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

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