---
type: Entity
layer: wiki
tags: [stack, dashdescomplicar, painel, n8n, automacoes, workflows]
title: "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