---
type: Entity
layer: wiki
tags: [stack, dashdescomplicar, engine, frontend, core]
title: "Dashboard-Engine"
---

# Dashboard-Engine

Motor central da aplicação DashDescomplicar. Orquestra layout, navegação, autenticação e ciclo de dados entre API e painéis.

## Responsabilidades

- **Layout**: Sidebar (9 itens) + Main Content area com glass-morphism design
- **Roteamento**: React Router DOM 7 — `/` (Dashboard), `/monitor`, `/financial`, `/mcps`, `/n8n`, `/paperclip`, `/ai`, `/operations`, `/sessions`
- **Autenticação**: OIDC opcional (`react-oidc-context`) + rate-limit (100 req/15min)
- **Data Fetching**: `useEffect` + `useCallback` com reconnection logic
- **Componentes Compartilhados**: `HeroStat`, `GlassCard`, `Sparkline`, `StatusPill`, `ProgressRing`, `ListItem`, `SummaryWidget`
- **Animações**: Framer Motion (`containerVariants`, `itemVariants` com stagger)
- **Dashboard Principal**: 16 queries paralelas ao Desk CRM (tarefas, tickets, leads, projectos, calendário, pipeline, timesheet, billing 360)

## Stack

- **React 19** + TypeScript 5.9
- **Vite 7** (build, proxy `/api` → `localhost:3001`)
- **Tailwind CSS 4** (glass-card, dark theme)
- **Framer Motion 12** (stagger animations, spring physics)
- **Lucide React** (ícones — 25+ importados)
- **Recharts 3** (gráficos: Bar, Pie, Line, Sparkline)
- **React Router DOM 7** (BrowserRouter, Routes, Link)

## Localizações

- **Código**: `Dev/DashDescomplicar/src/App.tsx` (894 linhas)
- **Layout**: `src/components/Layout.tsx` (sidebar, navegação)
- **Deploy**: `dash.descomplicar.pt` (EasyPanel Swarm)
- **Repo**: `git.descomplicar.pt/ealmeida/DashDescomplicar`
- **Proxy Dev**: Vite proxy `/api` → `http://localhost:3001`

## Arquitectura de Componentes

```
App.tsx
├── Layout.tsx (sidebar + Outlet)
│   ├── Logo + Nome
│   ├── NavItem ×9 (Dashboard, Monitor, Financial, MCPs, n8n, Paperclip, AI, Operations, Sessions)
│   └── Footer (versão, status)
├── Páginas (lazy-loaded via React Router)
│   ├── Dashboard (/) — App.tsx interno
│   ├── Monitor (/monitor)
│   ├── Financial (/financial)
│   ├── McpMonitor (/mcps)
│   ├── N8nMonitor (/n8n)
│   ├── Paperclip (/paperclip)
│   ├── AiOverview (/ai)
│   ├── Operations (/operations)
│   ├── Sessions (/sessions)
│   └── SessionDetail (/sessions/:id)
└── Componentes compartilhados
    ├── GlassCard, HeroStat, Sparkline
    ├── StatusPill, ProgressRing
    └── SummaryWidget, ListItem
```

## Dependências

- **Express-API**: 15 endpoints REST para dados
- **CSR-Integration**: Camada de fetch, cache, reconnection
- **Metrics**: Telemetria de renderização e interacção
- **Todos os 9 painéis**: Renderizados via React Router

## Fornece a

- **Todos os painéis**: Layout, navegação, autenticação
- **Utilizador**: Interface unificada `dash.descomplicar.pt`