--- type: Entity layer: wiki tags: [stack, dashdescomplicar, painel, operacoes, tickets, procs] title: "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 - Activo