55 lines
1.9 KiB
Markdown
55 lines
1.9 KiB
Markdown
# Plano de Ajuste - Ambiente Financeiro V2
|
|
|
|
## Resumo
|
|
Este documento detalha as alterações necessárias para alimentar os gráficos do painel financeiro utilizando os endpoints de backend especificados.
|
|
|
|
## 1. Ajuste nos Serviços de Integração (`extratoService.js`)
|
|
|
|
Precisamos adicionar/atualizar os métodos para consumir as novas rotas:
|
|
|
|
### Endpoints
|
|
* **Fluxo Diário**: Utilizar a rota existente `/extrato/fluxo` e processar o array `diario`.
|
|
* **Receitas (Planejado vs Executado)**: Nova rota `/extrato/planejado/grafico`.
|
|
* **Despesas (Planejado vs Executado)**: Nova rota `/extrato/despesas/grafico`.
|
|
|
|
### Implementação
|
|
Criar os seguintes métodos no `extratoService`:
|
|
```javascript
|
|
// Buscar dados comparativos de Receitas
|
|
fetchReceitasPlanejadasGrafico: (params) => api.get('/extrato/planejado/grafico', { params })
|
|
|
|
// Buscar dados comparativos de Despesas
|
|
fetchDespesasPlanejadasGrafico: (params) => api.get('/extrato/despesas/grafico', { params })
|
|
```
|
|
|
|
## 2. Processamento de Dados (`useDashboard.js`)
|
|
|
|
O hook `useDashboard` será responsável por formatar os dados para o `recharts`.
|
|
|
|
### Fluxo de Recebimentos (Entradas)
|
|
* **Fonte**: `fluxo.diario`
|
|
* **Filtro**: `tipoOperacao === 'C'`
|
|
* **Formato para Gráfico**:
|
|
```javascript
|
|
{
|
|
name: 'DD/MM',
|
|
valor: 1234.56
|
|
}
|
|
```
|
|
|
|
### Fluxo de Despesas (Saídas)
|
|
* **Fonte**: `fluxo.diario`
|
|
* **Filtro**: `tipoOperacao === 'D'`
|
|
|
|
## 3. Componentes Visuais (`DashboardView.jsx`)
|
|
|
|
Novos gráficos ou atualização dos existentes:
|
|
1. **Gráfico de Recebimentos (Diário)**: Barra ou Linha (Verde/Emerald).
|
|
2. **Gráfico de Despesas (Diário)**: Barra ou Linha (Vermelho/Rose).
|
|
3. **Comparativo Planejado vs Executado**: Gráfico de barras agrupadas ou composto.
|
|
|
|
## Próximos Passos
|
|
1. Implementar métodos no service.
|
|
2. Atualizar hook para buscar e processar dados.
|
|
3. Inserir gráficos na View.
|