?? Tela: Wizard de Criação de Turma

?? Visão Geral da Tela

Wizard guiado em 5 etapas para criar uma turma completa, incluindo vinculação de planos, extras, formandos e eventos. Tempo estimado: ~7 minutos.

?? Elementos da Interface

1. Hero Section

• Título: "Wizard de Criação de Turma"
• Descrição: "Configure turma, planos, extras, formandos e eventos em 5 passos intuitivos"
• Estatísticas: 5 Etapas | ~7min tempo estimado
• Fundo: Gradiente roxo com efeito radial

2. Stepper (Sidebar Esquerda)

5 cards de navegação vertical:

1. Dados da Turma - Identidade e configurações
2. Planos - Selecione planos existentes
3. Extras - Complementos exclusivos
4. Formandos - Cadastre ou prepare importação
5. Eventos - Planejamento inicial

3. Passo 1: Dados da Turma

Campos:

• Nome da Turma * (input large)
• Curso * (input com datalist de sugestões)
• Instituição * (input com datalist de sugestões)
• Ano de Formatura *
• Status (select: ativa, planejamento, concluída, pausada)
• Máximo de Formandos (padrão: 120)
• Cidade, Estado, Cor do Tema
• Coordenador, Contato do Coordenador
• Toggle: Aceita Inscrições
• Toggle: Requer Contrato (se marcado, exibe textarea de contrato)
• Observações internas (textarea)

4. Passo 2: Planos

• Busca: Input com ícone de lupa
• Contador: Badge "X selecionados"
• Botão Limpar Seleção
• Cards de Planos:
  • Nome do plano (destaque se popular)
  • Descrição
  • Categoria (tag)
  • Preço formatado em BRL
  • Número de parcelas
  • Clique para selecionar (borda azul)

5. Passo 3: Extras

• Mesma estrutura do Passo 2
• Filtro por nome ou categoria
• Cards selecionáveis de extras
• Informação de quantidade mínima

6. Passo 4: Formandos (Opcional)

Cadastro Rápido:

• Nome completo
• E-mail
• CPF
• Botão: Adicionar

Lista de Formandos Adicionados:

• Pills com nome, e-mail, CPF
• Botão de excluir em cada item

Importação Opcional:

• Upload de arquivo .xlsx ou .xls
• Máximo 5MB
• Será processado após criação da turma

7. Passo 5: Eventos (Opcional)

Templates Sugeridos:

• Cards com eventos pré-configurados
• Botão "Usar template" preenche formulário

Formulário de Evento:

• Tipo do evento *
• Data
• Status (planejamento, em execução, concluído)
• Local
• Responsável
• Observações
• Botão: Adicionar evento

8. Navegação do Wizard

• Botão Voltar: Retorna ao passo anterior (desabilitado no passo 1)
• Botão Avançar: Vai para próximo passo
• Último passo: "Concluir wizard" com ícone de confete

9. Card de Resultado (após conclusão)

• Status: Badge verde "Concluído" ou amarelo "Concluído com alertas"
• Resumo:
  • Turma criada (nome e ID)
  • Planos & Extras vinculados
  • Formandos adicionados
  • Eventos criados
• Erros/Alertas: Lista detalhada de falhas (se houver)
• Redirect automático: Após 2 segundos para Details da turma

? Funcionalidades Interativas

Stepper Inteligente

• Passo ativo: Borda azul + sombra
• Passos completos: Fundo degradê roxo
• Clique no stepper para navegar

Validação por Passo

• Passo 1: Valida campos obrigatórios antes de avançar
• Demais passos: Opcionais, podem ser pulados

Autocomplete

• Campo Curso: Busca automática de cursos cadastrados no tenant
• Campo Instituição: Busca automática de instituições
• Permite digitar novos valores

Color Picker

• Cor padrão: #5a67d8
• Seletor visual de cor

?? Notificações e Feedback

• Durante processamento: Botão mostra spinner + "Processando..."
• Sucesso: Card de resultado com resumo
• Erro: Alert com mensagem específica
• Validação: Alert "Preencha todos os campos obrigatórios"

?? Regras de Negócio

• Apenas Passo 1 é obrigatório
• Formandos e eventos podem ser adicionados depois
• Planos e extras são vinculados em lote
• Importação de formandos é processada em background após criação
• Se houver erros em vínculos, turma é criada mesmo assim
• Erros são reportados no card de resultado

?? Integração com API

Bootstrap: GET /api/admin/turmas/wizard (carrega planos, extras, templates)

Submissão: POST /api/admin/turmas/wizard

Payload:

{
  "turma": { ...dados do passo 1 },
  "planos": ["id1", "id2"],
  "extras": ["id1", "id2"],
  "formandos": [{nome, email, cpf}, ...],
  "eventos": [{tipo, data, status, local, responsavel, obs}, ...]
}

?? Responsividade

Desktop: Layout 2 colunas (stepper + conteúdo)

Mobile: Stepper empilhado acima, cards em 1 coluna