Dashboard de Logística
O Dashboard de Logística (/admin/logistics) é uma visão de tela cheia dedicada ao acompanhamento geoespacial de todas as entregas ativas. Ele oferece mapa interativo com agrupamento de filiais, rotas em tempo real e modo demo para demonstrações.
Acesso
Menu lateral → Operações → Logística (ícone de rota).
Requer permissão orders.view.all.
Layout
┌────────────────────────────────────┬──────────────────┐
│ │ [Ao Vivo][Demo] │
│ │ 10 entregas │
│ MAPA (70%) │ ── Cards ── │
│ │ #0001 Rafael │
│ │ Pinheiros ~12m │
│ │ ── Filiais ── │
└────────────────────────────────────┴──────────────────┘- Mapa (esquerda, 70%) — Mapbox GL com estilo noturno. Centraliza automaticamente na filial HQ ou na primeira filial com coordenadas cadastradas.
- Painel lateral (direita, 30%) — Toggle Live/Demo, lista de pedidos com ETA, seção de filiais recolhível.
Mapa
Filiais (Clustering)
As filiais são exibidas como marcadores dourados com ícone de casa. Quando várias filiais estão próximas no zoom atual, são agrupadas em um círculo escuro com a contagem.
- Clique no cluster → mapa aproxima e expande os marcadores individuais.
- Hover em filial individual → tooltip com o nome da filial.
- A filial HQ recebe o símbolo
★.
Entregadores
Cada entregador ativo aparece como um ponto dourado com seta indicando a direção do movimento (bearing). A posição é atualizada via WebSocket (/delivery namespace) com suavização EMA — sem saltos bruscos mesmo em áreas urbanas densas.
Rotas (LOD — Level of Detail)
Por padrão, nenhuma rota é desenhada. As rotas aparecem apenas quando um pedido é selecionado.
Ao selecionar um pedido (no mapa ou no painel lateral):
| Status | Cor da rota |
|---|---|
| Em Entrega | Ouro rgba(197,160,89,0.65) |
| Próximo ao destino | Verde rgba(16,185,129,0.70) |
| Atrasado | Vermelho rgba(239,68,68,0.65) |
A rota vai da filial de origem (coordenadas do banco de dados) até o endereço de entrega. Requer VITE_MAPBOX_TOKEN com escopo directions:read.
Popup de ETA
Ao passar o mouse sobre um entregador, aparece um popup com:
- Número do pedido (monospace)
- Nome do cliente/entregador
- ETA em minutos (dourado, destaque)
- Status atual
Toggle Ao Vivo / Demo
No topo do painel lateral há um toggle de modo:
| Modo | Comportamento |
|---|---|
| Ao Vivo | Dados reais via WebSocket + polling REST a cada 30s |
| Demo | 10 entregas simuladas que se movem no mapa a partir das filiais reais |
Modo Demo
O modo Demo usa as coordenadas reais das filiais cadastradas no banco de dados como ponto de origem. Se não houver filiais com coordenadas, usa dados de exemplo em São Paulo.
As entregas simuladas têm comportamentos diferentes conforme o status:
| Status | Velocidade de animação |
|---|---|
| Em Entrega | ~1,8s por passo |
| Próximo ao destino | ~1,1s por passo (acelerado) |
| Atrasado | ~4,5s por passo (lento, com variação) |
Não é necessário token Mapbox com scope de directions para o modo Demo — as rotas são pré-calculadas localmente.
Centro do Mapa
O mapa centraliza automaticamente:
- Filial marcada como HQ (se tiver coordenadas cadastradas)
- Primeira filial ativa com coordenadas
- Fallback: São Paulo (hardcoded)
Para que o mapa centralize corretamente, cadastre latitude/longitude nas filiais em Filiais & Terminais → editar filial.
Requisitos Técnicos
| Item | Valor |
|---|---|
| Permissão | orders.view.all |
| Variável de ambiente | VITE_MAPBOX_TOKEN (escopo styles:read mínimo; directions:read para rotas ao vivo) |
| WebSocket | /delivery namespace — evento adminLocationUpdate |
| Polling REST | GET /t/:slug/delivery/active-locations (30s) |
| Filiais | GET /t/:slug/admin/branches |
Diferença entre Logística e Rastreamento
| Funcionalidade | Logística /admin/logistics | Rastreamento /admin/delivery-tracking |
|---|---|---|
| Layout | Tela cheia, mapa 70% | AdminPageLayout padrão |
| Sidebar | Cards com ETA + filiais | DataTable com colunas |
| Filtro de status | No painel lateral | FilterChips no cabeçalho |
| Toggle Demo | ✓ | ✓ |
| Rotas no mapa | ✓ (seleção por pedido) | ✓ (seleção por pedido) |
| Melhor para | Visão operacional ao vivo | Análise detalhada com filtros |