?? Tela: Detalhes do Evento

?? Visão Geral da Tela

Tela de detalhes completa do evento com informações principais, participantes e botões de ação (Editar/Excluir). Usa ViewModel (EventoDetalhesViewModel) para combinar Evento + Participantes.

?? Elementos da Interface

1. Cabeçalho da Página

• Breadcrumb: Home ? Agenda ? Detalhes
• Título: Título do evento (ícone ti-calendar)
• Subtitle: "Criado por {CriadorNome} em {CreatedAt dd/MM/yyyy HH:mm}"
• Botões de ação:
  • Editar (warning, ícone ti-edit) - Link para /Agenda/Edit/{id}
  • Excluir (danger, ícone ti-trash) - Link para /Agenda/Delete/{id}
  • Voltar (secondary, ícone ti-arrow-left) - Link para /Agenda/Index

2. Layout da Tela

Grid com 2 colunas (gap-3):

• Sidebar esquerda (col-lg-4): Informações do evento + descrição
• Coluna principal (col-lg-8): Tabela de participantes

?? Sidebar: Informações do Evento

Card: Informações do Evento

Campo	Ícone	Formato
Data	ti-calendar	dd/MM/yyyy
Horário	ti-clock	HoraEvento ou "-"
Tipo	ti-tag	String do tipo
Local	ti-map-pin	String ou "-"
Turma	ti-school	TurmaNome ou "Geral"
Visibilidade	ti-eye	Badge "Público" (success) ou "Privado" (secondary)

Footer do Card

• Separador (hr)
• Texto muted small: "Atualizado em {UpdatedAt dd/MM/yyyy HH:mm}"

Card: Descrição (Condicional)

Exibido apenas se Model.Event.Descricao não estiver vazio/null:

• Título: "Descrição" (ícone ti-file-text)
• Conteúdo: Parágrafo text-muted com descrição completa

?? Coluna Principal: Participantes

Header do Card

• Título: "Participantes" (ícone ti-users)
• Badge: "X/Y confirmados" (bg-light-primary)
• Cálculo X: Count de participantes com Status = "confirmado" (case-insensitive)
• Cálculo Y: Total de participantes (Count)

Tabela de Participantes

Coluna	Conteúdo
Nome	p.Name
Email	p.Email ou "-"
Telefone	p.Phone ou "-"
Status	Badge colorido (success/warning/danger/secondary)
Confirmado em	p.ConfirmationDate (dd/MM/yyyy HH:mm) ou "-"

Badges de Status dos Participantes

Status (case-insensitive)	Label	Classe
confirmado	Confirmado	bg-light-success
pendente	Pendente	bg-light-warning
cancelado	Cancelado	bg-light-danger
Outros	Valor original	bg-light-secondary

Empty State (Participantes)

Exibido quando Model.Participants é null ou vazio:

• Ícone: ti-users (f-36, centralizado)
• Texto: "Nenhum participante encontrado."
• Estilo: text-center text-muted py-4

?? ViewModel: EventoDetalhesViewModel

public class EventoDetalhesViewModel
{
    public Evento Event { get; set; }
    public List<Participant> Participants { get; set; }
}

public class Participant
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
    public string Status { get; set; }
    public DateTime? ConfirmationDate { get; set; }
}
        

?? Regras de Negócio

• Evento deve existir e pertencer ao tenant
• Se evento não encontrado, redireciona para /Agenda/Index com erro
• Participantes são carregados via join ou query separada
• Contagem de confirmados usa StringComparison.OrdinalIgnoreCase
• Campos null exibem "-" ou "Geral" conforme contexto
• Descrição só renderiza card se tiver conteúdo
• Badge de visibilidade: IsPublico = true ? "Público", false ? "Privado"

?? Integração com API

GET /Agenda/Details/{id}

• Retorna view com Model (EventoDetalhesViewModel)
• Carrega Evento + lista de participantes
• Validação: Evento existe e pertence ao tenant
• Redirect para Index se não encontrado

?? Navegação

• Ao clicar em "Editar": Redireciona para /Agenda/Edit/{id}
• Ao clicar em "Excluir": Redireciona para /Agenda/Delete/{id}
• Ao clicar em "Voltar": Redireciona para /Agenda/Index
• Breadcrumb Home: /Dashboard/Index
• Breadcrumb Agenda: /Agenda/Index

?? Responsividade

• Layout 2 colunas em desktop (4/8), empilha em mobile
• Tabela de participantes: table-responsive (scrollável em mobile)
• Botões de ação: flex gap-2 (quebra linha em mobile se necessário)

?? Bibliotecas Externas

• Bootstrap 5: Grid, cards, badges, tables
• Tabler Icons: Ícones de interface