---
type: Entity
layer: wiki
tags: [stack, dashdescomplicar, painel, dashboard, home]
title: "Painel-Dashboard"
---

# Painel-Dashboard

Página principal (home) do DashDescomplicar. Hero stats agregados do Desk CRM com resumo do dia, tarefas, tickets, leads, projectos, pipeline e métricas de tempo.

## Responsabilidades

- **Hero Stats**: 5 métricas principais com sparklines, gradientes e tendências
- **Resumo do Dia**: Data formatada PT-PT, eventos hoje, tarefas urgentes/alta, tickets abertos
- **Tarefas**: Urgentes (priority 4), Alta (priority 3), Vencidas, Em Testes, Esta Semana
- **Leads**: Contactar, Follow-up, Proposta — com pipeline stage
- **Projectos**: Lista de projectos activos com progresso
- **Calendário**: Eventos de hoje e da semana (Google Calendar via Desk)
- **Timesheet**: Horas registadas hoje/semana
- **Billing 360**: Facturação do mês com progress ring
- **Pipeline**: Leads em pipeline por stage
- **Monday Mood**: Frase motivacional (apenas às segundas)

## Stack

- **React 19** + TypeScript 5.6
- **Framer Motion**: Stagger + spring + hover animations
- **Lucide React**: 25+ ícones (Calendar, AlertTriangle, Clock, RefreshCw, etc.)
- **Tailwind CSS**: Glass cards, gradientes, status pills
- **Recharts**: Sparkline (mini gráfico de tendência)

## Componentes

- `HeroStat`: Métrica grande com ícone, gradiente, sparkline, tendência
- `GlassCard`: Card com accent color e contador
- `Sparkline`: Mini gráfico SVG de tendência
- `StatusPill`: Badge de status (emerald, amber, red)
- `ProgressRing`: Anel de progresso SVG circular
- `SummaryWidget`: Widget bento-style com resumo do dia
- `ListItem`: Item de lista com hover e badges

## Tipos

- `DashboardData`: date, day_of_week, is_monday, monday_mood, tarefas (urgente, alta, vencidas, em_testes, esta_semana), tickets (abertos, alta_prioridade), leads (contactar, proposta, followup), projectos[], pipeline[], eventos (hoje[], semana[]), timesheet (hoje, semana), billing_360, resumo

## API Consumida

| API | Rota | Dados |
|---|---|---|
| Dashboard | `GET /api/dashboard` | 16 queries paralelas ao Desk CRM |

## Localizações

- **Código**: `src/App.tsx` (função App(), linhas 416-818 + mock data)
- **Rota**: `/`

## Dependências

- **Express-API**: Rota `/api/dashboard` (16 queries)
- **MySQL-Pool**: Dados do Desk CRM (tarefas, tickets, leads, projectos, calendário, timesheet, facturação)
- **Dashboard-Engine**: Layout (sidebar + header)

## Estado

- Activo