---
name: Monitoramento de Aulas v2 — Timeline + Tabs
description: Tela /direcao/monitoramento com grid responsivo, timeline de eventos do app professor e abas (Ao vivo / Agendadas / Concluídas / Faltas / Todas).
type: project
originSessionId: 86576285-fa7a-44f0-8ed3-9a88bcd27a8e
---
## Monitoramento v2 (2026-05-05)

### Layout
- **Grid responsivo**: 3 colunas em xl, 2 em md, 1 em mobile
- **5 abas** com contadores (persistidas em `localStorage.monitor_aba`):
  - Ao vivo (em_andamento) — DEFAULT
  - Agendadas
  - Concluídas
  - Faltas/Cancel.
  - Todas
- **Refresh** automático a cada 10s (era 15s)

### Cada card mostra
- Header: avatar inicial + nome professor → aluno + status badge
- Cronômetro grande (verde<85%, amarelo 85-100%, vermelho >100%)
- Barra de progresso
- **Timeline cronológica** com 6 tipos de evento:
  - 📅 Aula agendada (created_at)
  - 👤 Professor chegou (professor_presente_em) — com link Google Maps se tem geo
  - ▶️ Aula iniciada (inicio_real)
  - ⏸️ Pausada (aula_pausas.inicio_pausa)
  - ▶️ Retomada (aula_pausas.fim_pausa) — mostra duração da pausa
  - ✅ Finalizada (fim_real)

### Backend
- `ApiProfessorController::adminMonitoramento` retorna `eventos[]` cronologicamente ordenado
- Cada aula em andamento tem `segundos_efetivos` calculado com `timestampBrasilia()` (resolveu bug de 3h)

### JS — calibração de relógio
**Importante:** ambos `calibrarRelogio()` e `calcularTempoEfetivo()` agora usam `'-03:00'` (horário Brasília). Antes um usava `Z` e outro `-03:00` causando 0:00 no timer.

**Why:** dashboard de monitoramento estratégico para a direção saber em tempo real o que está acontecendo nas aulas.

**How to apply:** se adicionar novo tipo de evento na aula, incluir no array `$eventos` em `adminMonitoramento` com `tipo`, `icone`, `cor`, `rotulo`, `horario`, `detalhe`, e mapear ícone/cor no JS `ICONES`/`CORES_BG`.