67 lines
2.4 KiB
Markdown
67 lines
2.4 KiB
Markdown
---
|
|
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
|