type, layer, tags, title
| type |
layer |
tags |
title |
| Entity |
wiki |
| stack |
| dashdescomplicar |
| painel |
| operacoes |
| tickets |
| procs |
|
Painel-Operacoes |
Painel-Operacoes
Painel de gestão operacional via Desk CRM. Exibe tickets abertos, prioridades, distribuição por departamento e cobertura de PROCs.
Responsabilidades
- Tickets: Total abertos (Open, In Progress, Answered), Alta Prioridade, Tempo Médio Resposta (90 dias)
- Distribuição: Tickets por departamento (gráfico de barras)
- Cobertura PROCs: Barra de progresso por departamento com percentagem
- Thresholds: ≥80% verde, ≥50% amarelo, <50% vermelho
Stack
- React 19 + TypeScript 5.6
- Recharts 3: BarChart para tickets por departamento
- Framer Motion: Stagger animations
- Lucide React: Ticket, AlertTriangle, Clock, FileText, Building2
- Tailwind CSS: Glass cards, progress bars coloridas
Tipos
TicketsByDept: dept, count
CoverageItem: dept, procs, total_expected, pct
OperationsData: tickets (open, high_priority, avg_response_hours, by_department), procedures (total, departments, coverage)
Componentes
StatCard: Métrica com label, valor, ícone, cor
ProgressBar: Barra de progresso com cor condicional (emerald ≥80%, amber ≥50%, red <50%)
CustomTooltip: Tooltip do Recharts
Cobertura de PROCs (Dados Estáticos)
| Departamento |
PROCs |
Esperado |
% |
| D7 — Tecnologia |
18 |
20 |
90% |
| D6 — Gestão |
8 |
10 |
80% |
| D1 — Comercial |
5 |
8 |
62% |
| D5 — Marketing |
5 |
8 |
62% |
| Cross-Departamental |
5 |
6 |
83% |
| D3 — Contabilidade |
3 |
5 |
60% |
| D2 — Suporte |
3 |
6 |
50% |
| D4 — RH |
1 |
4 |
25% |
API Consumida
| API |
Rota |
Dados |
| Operations |
GET /api/operations |
Tickets Desk CRM + cobertura PROCs |
Localizações
- Código:
src/pages/Operations.tsx (323 linhas)
- Rota:
/operations
Dependências
- Express-API: Rota
/api/operations
- MySQL-Pool: Dados de tickets do Desk CRM
- Dashboard-Engine: Layout, navegação
Estado