DashDescomplicar/okf/entidades/Painel-Financeiro.md

type, layer, tags, title

type	layer	tags	title
Entity	wiki	stack dashdescomplicar painel financeiro metricas	Painel-Financeiro

Painel-Financeiro

Painel de métricas financeiras do negócio Descomplicar®. Exibe receitas, despesas e lucro com gráficos de evolução e distribuição por categoria.

Responsabilidades

• Métricas Principais: Vendas Mês, Vendas Ano, Despesas Mês, Despesas Ano, Lucro/Prejuízo
• Gráfico de Evolução: Receita vs Despesa (últimos 12 meses) — Recharts BarChart
• Distribuição: Despesas por categoria (pie chart visual)
• Formatação: EUR com locale pt-PT (formatEUR)
• Estados: Loading (pulse animation), Empty (null check), Error (console)

Stack

• React 19 + TypeScript 5.6
• Recharts 3: BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend
• Framer Motion: Stagger animations
• Lucide React: DollarSign, TrendingUp, TrendingDown, Receipt, PiggyBank
• Tailwind CSS: Glass cards, status colors (emerald para lucro, red para prejuízo)

Tipos

• FinancialData: vendas_mes, vendas_ano, despesas_mes, despesas_ano, lucro_mes, lucro_ano, categorias[] (name, value), evolucao[] (mes, receita, despesa)

Componentes

• StatCard: Card de métrica com label, valor formatado, ícone, cor
• CustomTooltip: Tooltip do Recharts com formatação EUR
• formatEUR: Conversor para locale PT-PT

API Consumida

API	Rota	Dados
Financial	GET /api/financial	Agregados de vendas/despesas MySQL

Fontes de Dados (via API)

• tblinvoices: Facturas (não-draft, não-canceladas) — vendas mês/ano, evolução 12 meses
• tblexpenses: Despesas — despesas mês/ano, categorias, evolução 12 meses
• tblexpenses_categories: JOIN para nomes de categorias

Localizações

• Código: src/pages/Financial.tsx (251 linhas)
• Rota: /financial

Dependências

• Express-API: Rota /api/financial
• MySQL-Pool: Dados de facturação do Desk CRM
• Dashboard-Engine: Layout, navegação

Estado

• Activo