DashDescomplicar/okf/entidades/Painel-N8n.md

type, layer, tags, title

type	layer	tags	title
Entity	wiki	stack dashdescomplicar painel n8n automacoes workflows	Painel-N8n

Painel-N8n

Painel de monitorização de workflows n8n (Camada 2 — Determinístico). Exibe estado de todos os workflows, execuções recentes e falhas.

Responsabilidades

• Métricas Principais: Total Workflows, Activos, Inactivos, Falhas (24h)
• Lista de Workflows: Nome, estado (activo/inactivo), última execução, duração, tags
• Status Badges: Sucesso (emerald), Erro (red), Running, Pendente
• Formatação: Duração em ms/s/min, datas em locale PT-PT
• Cache: Dados com cache de 300s no backend

Stack

• React 19 + TypeScript 5.6
• Framer Motion: Stagger animations
• Lucide React: GitBranch, Play, Pause, CheckCircle2, XCircle, Clock, AlertTriangle
• Tailwind CSS: Glass cards, highlight para falhas (borda red)

Tipos

• N8nWorkflow: id, name, active, last_execution (status, started_at, finished_at, duration_ms), tags
• N8nDashboard: total, active, inactive, failed_24h, workflows[], last_updated

Componentes

• StatCard: Métrica agregada com highlight condicional (red se falhas > 0)
• StatusBadge: Pill com ícone e cor por status
• formatDuration, formatDate, formatLastUpdated: Utilitários PT-PT

API Consumida

API	Rota	Dados
n8n	GET /api/n8n	Workflows + execuções (cache 300s)

Localizações

• Código: src/pages/N8nMonitor.tsx (382 linhas)
• Rota: /n8n

Dependências

• Integracao-N8n-API: n8n REST API (automator.descomplicar.pt)
• Express-API: Rota /api/n8n
• Dashboard-Engine: Layout, navegação

Estado

• Activo