# 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.