?? Tela: Listagem de Eventos da Agenda

?? Visão Geral da Tela

A tela de Agenda é uma interface completa para visualização e gerenciamento de eventos das turmas. Oferece 3 modos de visualização: Calendário (FullCalendar interativo), Listagem (tabela detalhada) e Timeline (linha do tempo visual).

?? Elementos da Interface

1. Hero Section (Cabeçalho Principal)

• Badge: "Agenda inteligente" com ícone sparkles
• Título: "Planejamento completo em um só lugar"
• Subtitle dinâmico: Exibe quantidade de eventos futuros organizados por status, turma e tipo
• Botão primário: "+ Adicionar Agenda" (redireciona para /Agenda/Create)
• Ilustração: Ícone de calendário com fundo gradient

2. Cards de Estatísticas (4 cards)

Card	Métrica	Ícone	Cor
Total de Eventos	Contador absoluto	ti-calendar-event	Primary (Azul)
Próximos Eventos	Eventos futuros (data >= hoje)	ti-calendar-check	Success (Verde)
Eventos Hoje	Eventos com data = hoje	ti-sun	Warning (Amarelo)
Turmas com Eventos	Turmas distintas com eventos	ti-school	Info (Ciano)

3. Barra de Visualizações (View Toggle)

Grupo de 3 botões pill com ícones para alternar entre visualizações:

• Calendário (ti-calendar-week) - Ativo por padrão
• Listagem (ti-list-details) - Tabela completa
• Timeline (ti-timeline) - Linha do tempo

4. Painel de Filtros (5 campos)

• Busca por evento: Input text (busca em título, descrição, local)
• Tipo de evento: Select com tipos dinâmicos do ViewBag.EventTypes
• Status: Select (Agendado, Confirmado, Cancelado, Concluído)
• Turma: Select com ViewBag.Turmas (ordenado por nome, com curso)
• Data específica: Input date + Botão "Limpar" filtros

5. Legenda de Status

Dots coloridos com labels:

• ? Agendado (Primary)
• ? Confirmado (Success)
• ? Hoje (Warning)
• ? Cancelado (Danger)
• ? Concluído (Secondary)

?? Visualização: Calendário (Padrão)

FullCalendar 6.1.8

• Locale: pt-br
• Views: dayGridMonth (padrão), timeGridWeek, listWeek
• Toolbar: prev/next/today (esquerda), título (centro), botões de view (direita)
• Cores personalizadas: Baseadas em status (via CSS classes)
• Eventos: Exibidos como cards coloridos com emoji + título + horário
• Interatividade:
  • dateClick: Seleciona data e renderiza eventos do dia abaixo do calendário
  • eventClick: Seleciona evento e renderiza detalhes mini-card
  • eventDidMount: Aplica classes de status para cores customizadas

Eventos do Dia Selecionado (Mini-Cards)

Abaixo do calendário, exibe lista horizontal de mini-cards para eventos do dia clicado:

• Emoji: Baseado em tipo (?? formatura, ?? festa, ?? reunião, etc.)
• Título do evento
• Meta: Horário (início-fim), local (se disponível), badge de status
• Badge de tipo: Pill com label do tipo
• Accent color: Barra superior colorida baseada em tipo

?? Visualização: Listagem

Tabela Responsiva

Coluna	Conteúdo
Evento	Avatar com emoji + título + badges (tipo, hoje/próximo, descrição truncada)
Data	Data formatada (dd/MM/yyyy) + dia da semana (por extenso)
Horário	Início-Fim (ou "Horário a definir") + local (se disponível)
Turma	Badge com ícone de escola + nome da turma
Status	Badge colorido com ícone + label
Participação	Progress bar (confirmados/capacidade) com % - Se capacidade null, exibe "-"
Ações	Botões: Ver detalhes (eye), Editar (edit)

Empty State (Lista)

Exibido quando nenhum evento corresponde aos filtros:

• Ícone: ti-calendar-off (opacidade 35%)
• Título: "Sem eventos por aqui"
• Texto: Instruções para aplicar outros filtros ou criar evento

?? Visualização: Timeline

Linha do Tempo Vertical

• Linha central: Gradient vertical (primary ? secondary)
• Markers: Círculos coloridos (baseados em tipo de evento) com border branco e shadow
• Cards de evento:
  • Título + badge de status (no header)
  • Data por extenso (dia da semana, dia, mês, ano)
  • Descrição do evento (se disponível)
  • Meta: Horário, local, turma, tipo (com ícones)

Empty State (Timeline)

Exibido quando nenhum evento corresponde aos filtros:

• Ícone: ti-timeline (opacidade 35%)
• Título: "Timeline vazia"
• Texto: Instruções sobre filtros atuais

?? Sistema de Cores e Tipos

Paleta de Tipos (typePalette)

Tipo (key)	Label	Cor	Emoji
meeting / reuniao	Reunião	#667eea	??
rehearsal / ensaio	Ensaio	#f093fb	??
graduation / colacao	Formatura	#43e97b	??
party / festa	Festa	#4facfe	??
workshop	Workshop	#ff9f43	???
planning	Planejamento	#ffb74d	??
producao	Produção	#26c6da	???
default	Evento	#6c757d	??

Tipos Dinâmicos

Tipos não mapeados (vindos de ViewBag.EventTypes) recebem cores e emojis ciclados de arrays pré-definidos.

Paleta de Status (statusPalette)

Status	Label	Badge Class	Ícone
agendado	Agendado	badge-soft-primary	ti-calendar-stats
confirmado	Confirmado	badge-soft-success	ti-check
cancelado	Cancelado	badge-soft-danger	ti-circle-x
concluido	Concluído	badge-soft-secondary	ti-checks

?? Funcionalidades JavaScript

Funções de Normalização

• normalizeString: Lowercase + remove acentos + trim
• normalizeTime: Converte diversos formatos (HH:mm:ss, Date, string) para HH:mm
• parseDateOnly: Extrai date sem hora de diversos formatos
• formatDateDisplay: Converte yyyy-MM-dd para dd/MM/yyyy

Funções de Renderização

• renderSelectedDayEvents(): Renderiza mini-cards de eventos do dia selecionado
• renderList(): Renderiza tabela de listagem com todos os eventos filtrados
• renderTimeline(): Renderiza timeline vertical com eventos filtrados
• buildCalendarEvents(): Transforma eventos em formato FullCalendar
• updateCalendarEvents(): Remove e re-adiciona eventos no calendário

Sistema de Filtros

• applyFilters(): Filtra eventos baseado em 5 critérios (busca, tipo, status, turma, data)
• updateStats(): Recalcula estatísticas baseado em eventos filtrados
• updateFilterInfo(): Exibe mensagem "X de Y eventos após aplicar os filtros"
• Debounce: Filtros de input tem delay de 50ms para performance

Troca de Visualizações

• Botões com data-view (calendar, list, timeline)
• Toggle de classes .active e .d-none
• Renderização específica ao trocar para cada view
• FullCalendar só é inicializado quando view=calendar

?? Notificações e Feedback

Info de Filtros

Exibido abaixo dos filtros quando algum filtro está ativo: "X de Y eventos após aplicar os filtros."

Empty States

3 empty states diferentes (calendário, lista, timeline) com ícones e mensagens contextuais.

?? Regras de Negócio

• Eventos sem título são exibidos como "Evento sem título"
• Eventos sem turma são exibidos como "Evento geral"
• Eventos sem horário exibem "Horário a definir"
• Eventos sem local exibem campo vazio ou "Local a definir" (dependendo do contexto)
• Eventos passados são marcados com badge "Realizado"
• Eventos de hoje são marcados com badge "Hoje" (warning)
• Eventos futuros são marcados com badge "Próximo"
• Participação só é exibida se capacidadeMaxima for informada
• Data selecionada é mantida ao aplicar filtros (se ainda existir evento naquela data)
• Calendário navega automaticamente para a data selecionada

?? Integração com API

GET /Agenda/Index: Retorna Model (List<Evento>) + ViewBag.EventTypes + ViewBag.Turmas

?? Navegação

• Ao clicar em "+ Adicionar Agenda": Redireciona para /Agenda/Create
• Ao clicar em "Ver detalhes" (listagem): Redireciona para /Agenda/Details/{id}
• Ao clicar em "Editar" (listagem): Redireciona para /Agenda/Edit/{id}
• Home (breadcrumb): /Dashboard
• Agenda (breadcrumb): /Agenda/Index

?? Responsividade

• Hero: Centralizado em mobile, horizontal em desktop
• Stats cards: 1 coluna (mobile) ? 2 colunas (tablet) ? 4 colunas (desktop)
• Filtros: Empilhados em mobile, grid responsivo em desktop
• Tabela: Scrollável horizontalmente em mobile
• Timeline: Padding reduzido em mobile
• Mini-cards: Flex-wrap com scroll horizontal em mobile

?? Bibliotecas Externas

• FullCalendar 6.1.8: Calendário interativo
• Bootstrap 5: Grid, cards, badges, modals
• Tabler Icons: Ícones de interface