?? Tela: Listagem de Formandos

?? Visão Geral da Tela

Tela principal de gerenciamento de formandos com listagem completa, filtros avançados, aprovação em massa e exportação de dados.

?? Elementos da Interface

1. Hero Section (Cabeçalho Destacado)

• Título: "Gestão de Formandos"
• Contador principal: Total de formandos no sistema (número grande)
• Subtítulo: "Gerencie aprovações, contratos e cadastros com filtros inteligentes"
• Fundo: Gradiente roxo (667eea ? 764ba2)
• Botões de ação:
  • ? Novo Formando
  • ?? Exportar (Excel com filtros aplicados)

2. Cards de Estatísticas (4 cards)

Card	Métrica	Descrição
? Pendentes	Número absoluto	Formandos aguardando revisão administrativa
? Aprovados	Número + indicador	Formandos aprovados, prontos para onboarding
? Rejeitados	Número + indicador	Cadastros rejeitados (revisar justificativas)
?? Taxa de Aprovação	Percentual	% de aprovados sobre total (meta: 85%)

3. Barra de Filtros Avançados

• Status: Dropdown (Todos, Pendentes, Aprovados, Rejeitados)
• Tipo: Dropdown (Todos, Formando, Comissão, Formando Infantil)
• Turma / Código: Campo de texto (ID ou código)
• Busca: Campo de texto (busca por nome, e-mail, CPF ou telefone)
• Botões:
  • ?? Filtrar (aplica filtros)
  • ?? Limpar (remove todos os filtros)
• Pills de filtros ativos: Exibe pills azuis para cada filtro aplicado

4. Tabela de Dados

Tabela responsiva com as seguintes colunas:

Coluna	Conteúdo	Visibilidade
Formando	Avatar ou inicial + Nome completo + CPF + Badge de nome social	Sempre visível
Contato	E-mail + Celular + Instagram	Desktop (d-none d-lg-table-cell)
Turma	Nome da turma + Código + Curso	Tablet+ (d-none d-md-table-cell)
Status	Badge: Aprovado (verde) / Pendente (amarelo) / Rejeitado (vermelho)	Sempre visível
Tipo	Badge: Formando / Comissão / Formando Infantil	Tablet+ (d-none d-md-table-cell)
Contrato	Status do contrato + Link para visualizar + Info de camisa personalizada	Desktop (d-none d-lg-table-cell)
Cadastro	Data de criação + Data de atualização	Desktop (d-none d-lg-table-cell)
Ações	Botões de ação (ver abaixo)	Sempre visível

5. Botões de Ação por Linha

Cada linha possui os seguintes botões:

• ? Aprovar: Aparece apenas para formandos pendentes (modal de confirmação)
• ??? Ver detalhes: Abre tela de detalhes completos
• ?? Editar informações: Abre formulário de edição
• ??? Excluir formando: Remove cadastro (confirmação via SweetAlert2)

6. Estado Vazio

Quando não há formandos:

• Ícone: ti-users-off (ícone grande centralizado)
• Título: "Nenhum formando encontrado"
• Descrição: "Ajuste os filtros ou inicie um novo cadastro"
• Botão: "Cadastrar primeiro formando" (primário)

? Funcionalidades Interativas

Aprovação de Formando (SweetAlert2)

• Modal de confirmação: "Aprovar formando?"
• Loading state: "Aprovando formando..."
• Sucesso: Toast verde + reload da página
• Erro: Toast vermelho com mensagem de erro

Exclusão de Formando (SweetAlert2)

• Modal de confirmação: "Excluir formando?" + "Esta ação não pode ser desfeita"
• Loading state: "Excluindo formando..."
• Sucesso: Toast verde + reload da página
• Erro: Toast vermelho com mensagem de erro

Exportação

• Botão "Exportar" chama /Formandos/ExportarExcel
• Inclui filtros aplicados na URL (status, turmaId, search, tipoFormando)
• Gera arquivo Excel com os dados filtrados

?? Notificações e Feedback

• Sucesso ao aprovar: Toast verde "Formando aprovado com sucesso"
• Erro ao aprovar: Toast vermelho com mensagem específica
• Sucesso ao excluir: Toast verde "Formando excluído com sucesso"
• Erro ao excluir: Toast vermelho com mensagem específica

?? Regras de Negócio

• Apenas formandos do tenant logado são exibidos (multi-tenancy)
• Botão "Aprovar" só aparece para formandos pendentes
• Status do contrato é calculado dinamicamente (com base em última assinatura)
• Taxa de aprovação é calculada em tempo real
• Formandos infantis são identificados por flag específica

?? Integração com API

Aprovar: POST /Formandos/Approve/:id

Excluir: POST /Formandos/Delete/:id

Exportar: GET /Formandos/ExportarExcel?status=...&turmaId=...&search=...&tipoFormando=...

?? Responsividade

Desktop (> 1200px): Todas as colunas visíveis

Tablet (768px - 1200px): Oculta colunas "Contato", "Contrato" e "Cadastro"

Mobile (< 768px): Exibe cards no lugar da tabela (implementação futura)

?? Navegação

• Ao clicar em "Novo Formando": Vai para /Formandos/Create
• Ao clicar em "Exportar": Download direto do arquivo Excel
• Ao clicar em "Ver detalhes": Vai para /Formandos/Details/:id
• Ao clicar em "Editar": Vai para /Formandos/Edit/:id