8.2 KiB

Raw Permalink Blame History

🔧 Ajustes Pendentes - Financeiro V2 - Cruzamentos

📊 Contexto

Os cruzamentos já estão usando corretamente a rota /extrato/apresentar:

Receitas: tipoOperacao === 'C' ✅
Despesas: tipoOperacao === 'D' ✅

✅ Implementado

CruzamentoView (Receitas)

Estados de filtros adicionados
Lógica de filtragem implementada (dadosFiltrados)
KPIs recalculados (kpisFiltrados)
Gráficos atualizados para usar dados filtrados

🚧 Pendente

1. CruzamentoView (Receitas) - Finalizar UI

1.1. Adicionar Import do Select

// Linha 19, após Badge
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

1.2. Substituir Barra de Filtros (linhas 223-253)

Substituir o conteúdo atual por:

{/* Filter & Summary Bar */}
<div className="bg-[#0f172a]/60 backdrop-blur-xl p-3 sm:p-4 rounded-xl sm:rounded-2xl border border-slate-800/50 flex flex-col gap-3 shadow-2xl relative z-10">
    {/* Primeira Linha: Filtros de Período */}
    <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 flex-1 min-w-0">
        <div className="flex items-center gap-2">
            <div className="p-2 bg-slate-900 rounded-lg border border-slate-800 shrink-0">
                <Filter className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-emerald-400" />
            </div>
            <Select value={filtroTipo} onValueChange={setFiltroTipo}>
                <SelectTrigger className="h-8 w-28 bg-slate-900/50 border-slate-800 text-[10px] sm:text-[11px] font-bold text-white">
                    <SelectValue />
                </SelectTrigger>
                <SelectContent>
                    <SelectItem value="mes">Por Mês</SelectItem>
                    <SelectItem value="ano">Por Ano</SelectItem>
                    <SelectItem value="todos">Todos</SelectItem>
                </SelectContent>
            </Select>
        </div>
        
        {filtroTipo === 'mes' && (
            <div className="flex items-center gap-2">
                <Select value={filtroMes} onValueChange={setFiltroMes}>
                    <SelectTrigger className="h-8 w-32 bg-slate-900/50 border-slate-800 text-[10px] sm:text-[11px] font-bold text-white">
                        <SelectValue placeholder="Selecione o mês" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="01">Janeiro</SelectItem>
                        <SelectItem value="02">Fevereiro</SelectItem>
                        <SelectItem value="03">Março</SelectItem>
                        <SelectItem value="04">Abril</SelectItem>
                        <SelectItem value="05">Maio</SelectItem>
                        <SelectItem value="06">Junho</SelectItem>
                        <SelectItem value="07">Julho</SelectItem>
                        <SelectItem value="08">Agosto</SelectItem>
                        <SelectItem value="09">Setembro</SelectItem>
                        <SelectItem value="10">Outubro</SelectItem>
                        <SelectItem value="11">Novembro</SelectItem>
                        <SelectItem value="12">Dezembro</SelectItem>
                    </SelectContent>
                </Select>
            </div>
        )}
        
        {(filtroTipo === 'mes' || filtroTipo === 'ano') && (
            <div className="flex items-center gap-2">
                <Select value={filtroAno} onValueChange={setFiltroAno}>
                    <SelectTrigger className="h-8 w-24 bg-slate-900/50 border-slate-800 text-[10px] sm:text-[11px] font-bold text-white">
                        <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="2024">2024</SelectItem>
                        <SelectItem value="2025">2025</SelectItem>
                        <SelectItem value="2026">2026</SelectItem>
                    </SelectContent>
                </Select>
            </div>
        )}
    </div>
    
    {/* Segunda Linha: Filtro de Caixa */}
    <div className="flex items-center gap-2 flex-wrap">
        <span className="text-[10px] font-bold text-slate-500 uppercase">Caixa:</span>
        <Select value={filtroCaixa} onValueChange={setFiltroCaixa}>
            <SelectTrigger className="h-8 w-40 bg-slate-900/50 border-slate-800 text-[10px] sm:text-[11px] font-bold text-white">
                <SelectValue />
            </SelectTrigger>
            <SelectContent>
                <SelectItem value="todos">Todas as Caixas</SelectItem>
                <SelectItem value="1">Caixa 1</SelectItem>
                <SelectItem value="2">Caixa 2</SelectItem>
                <SelectItem value="3">Caixa 3</SelectItem>
                <SelectItem value="4">Caixa 4</SelectItem>
                <SelectItem value="5">Caixa 5</SelectItem>
            </SelectContent>
        </Select>
        <Badge variant="outline" className="h-8 px-3 rounded-lg bg-emerald-500/10 border-emerald-500/20 text-emerald-400 text-[10px] font-bold">
            {dadosFiltrados.length} registros
        </Badge>
    </div>
</div>

1.3. Atualizar KPIs para usar kpisFiltrados (linhas 257-281)

Substituir:

kpis?.totalRecebido por kpisFiltrados?.totalRecebido
kpis?.totalPendente por kpisFiltrados?.totalPendente
kpis?.totalGeral por kpisFiltrados?.totalGeral

2. CruzamentoDespesasView (Despesas)

Aplicar as mesmas mudanças no arquivo contas-pagar/CruzamentoDespesasView.jsx:

2.1. Adicionar Estados de Filtros (após linha 84)

// Estados para filtros
const [filtroMes, setFiltroMes] = React.useState('');
const [filtroAno, setFiltroAno] = React.useState(new Date().getFullYear().toString());
const [filtroCaixa, setFiltroCaixa] = React.useState('todos');
const [filtroTipo, setFiltroTipo] = React.useState('mes'); // 'mes' | 'ano' | 'todos'

2.2. Adicionar Lógica de Filtragem

// Dados filtrados baseados nos filtros ativos
const dadosExecutadosFiltrados = React.useMemo(() => {
    if (!Array.isArray(despesasExecutadas)) return [];
    
    return despesasExecutadas.filter(item => {
        // Filtro por período
        if (filtroTipo === 'mes' && filtroMes && filtroAno) {
            const dataItem = item?.dataEntrada || item?.data || '';
            const [ano, mes] = dataItem.split('-');
            if (ano !== filtroAno || mes !== filtroMes) return false;
        } else if (filtroTipo === 'ano' && filtroAno) {
            const dataItem = item?.dataEntrada || item?.data || '';
            const [ano] = dataItem.split('-');
            if (ano !== filtroAno) return false;
        }
        
        // Filtro por caixa
        if (filtroCaixa !== 'todos' && item?.caixinha) {
            if (item.caixinha !== filtroCaixa) return false;
        }
        
        return true;
    });
}, [despesasExecutadas, filtroMes, filtroAno, filtroCaixa, filtroTipo]);

// KPIs recalculados
const kpisFiltrados = React.useMemo(() => {
    const totalExecutado = dadosExecutadosFiltrados.reduce((acc, item) => acc + (item.valor || 0), 0);
    
    return {
        totalPlanejado: 0,
        totalExecutado,
        variacao: totalExecutado,
        percentualVariacao: 0
    };
}, [dadosExecutadosFiltrados]);

2.3. Atualizar useMemo para usar dados filtrados

Substituir todas as referências a despesasExecutadas por dadosExecutadosFiltrados nos cálculos de:

comparativoCategoria
timelineData
categoriaData

2.4. Adicionar mesma UI de filtros (linhas 172-207)

2.5. Atualizar KPIs para usar kpisFiltrados

🎯 Resultado Esperado

Após implementar essas mudanças:

✅ Filtros de mês/ano funcionais
✅ Filtro de caixa funcional
✅ KPIs atualizados dinamicamente conforme filtros
✅ Gráficos refletindo apenas dados filtrados
✅ Contador de registros filtrados visível
✅ Dados sempre vindos de /extrato/apresentar

📌 Observações

O campo caixinha pode não estar presente em todos os registros do extrato. Ajustar conforme necessário.
Os filtros são client-side. Para grandes volumes de dados, considerar filtros server-side.
O estado inicial do filtro de mês está vazio - o usuário precisa selecionar.
Considerar adicionar um botão "Limpar Filtros" para melhor UX.

8.2 KiB Raw Permalink Blame History