DashDescomplicar/okf/entidades/Dashboard-Engine.md

type, layer, tags, title

type	layer	tags	title
Entity	wiki	stack dashdescomplicar engine frontend core	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