76 lines
2.9 KiB
Markdown
76 lines
2.9 KiB
Markdown
---
|
||
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`
|