fix: correções de inicialização da rota /dre-filial
This commit is contained in:
Alessandro Gonçaalves
parent
ccedcebfd0
commit
c5090a29a6
|
|
@ -0,0 +1,255 @@
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { executeOracleQuery } from '@/db/oracle';
|
||||||
|
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
console.log('🔄 Buscando dados analíticos do Oracle (Filial)...');
|
||||||
|
console.log('📋 URL completa:', request.url);
|
||||||
|
console.log('🔍 Query params:', request.nextUrl.searchParams.toString());
|
||||||
|
console.log('📊 Headers:', Object.fromEntries(request.headers.entries()));
|
||||||
|
|
||||||
|
// Extrair parâmetros de query
|
||||||
|
const searchParams = request.nextUrl.searchParams;
|
||||||
|
const dataInicio = searchParams.get('dataInicio');
|
||||||
|
const dataFim = searchParams.get('dataFim');
|
||||||
|
const centroCusto = searchParams.get('centroCusto');
|
||||||
|
const codigoGrupo = searchParams.get('codigoGrupo');
|
||||||
|
const codigoSubgrupo = searchParams.get('codigoSubgrupo');
|
||||||
|
const codigoConta = searchParams.get('codigoConta');
|
||||||
|
|
||||||
|
// Parâmetros para exclusão de valores específicos
|
||||||
|
const excluirCentroCusto = searchParams.get('excluirCentroCusto');
|
||||||
|
const excluirCodigoConta = searchParams.get('excluirCodigoConta');
|
||||||
|
|
||||||
|
// Novos parâmetros para códigos selecionados no filtro
|
||||||
|
const codigosCentrosCustoSelecionados = searchParams.get('codigosCentrosCustoSelecionados');
|
||||||
|
const codigosContasSelecionadas = searchParams.get('codigosContasSelecionadas');
|
||||||
|
|
||||||
|
console.log('🎯 Filtros recebidos na API:', {
|
||||||
|
dataInicio,
|
||||||
|
dataFim,
|
||||||
|
centroCusto,
|
||||||
|
codigoGrupo,
|
||||||
|
codigoSubgrupo,
|
||||||
|
codigoConta,
|
||||||
|
excluirCentroCusto,
|
||||||
|
excluirCodigoConta,
|
||||||
|
codigosCentrosCustoSelecionados,
|
||||||
|
codigosContasSelecionadas
|
||||||
|
});
|
||||||
|
console.log('🔍 Verificação específica de centroCusto:', {
|
||||||
|
centroCusto,
|
||||||
|
tipo: typeof centroCusto,
|
||||||
|
vazio: centroCusto === null || centroCusto === undefined || centroCusto === '',
|
||||||
|
codigosCentrosCustoSelecionados,
|
||||||
|
codigosCentrosCustoSelecionadosVazio: !codigosCentrosCustoSelecionados || codigosCentrosCustoSelecionados === ''
|
||||||
|
});
|
||||||
|
|
||||||
|
// Construir query SQL com filtros usando a view VB_DRE_FILIAL_DESPESA_ANALITICO
|
||||||
|
let sql = `SELECT * FROM VB_DRE_FILIAL_DESPESA_ANALITICO WHERE 1=1`;
|
||||||
|
const params: any[] = [];
|
||||||
|
let paramIndex = 1;
|
||||||
|
|
||||||
|
// Filtro por período (usando ANOMESCOMP)
|
||||||
|
if (dataInicio && dataFim) {
|
||||||
|
sql += ` AND ANOMESCOMP >= :${paramIndex} AND ANOMESCOMP <= :${paramIndex + 1}`;
|
||||||
|
params.push(dataInicio, dataFim);
|
||||||
|
paramIndex += 2;
|
||||||
|
console.log('📅 Adicionando filtro de período:', dataInicio, 'a', dataFim);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filtro por código do grupo
|
||||||
|
if (codigoGrupo) {
|
||||||
|
sql += ` AND CODGRUPO = :${paramIndex}`;
|
||||||
|
params.push(codigoGrupo);
|
||||||
|
paramIndex++;
|
||||||
|
console.log('📊 Adicionando filtro de grupo:', codigoGrupo);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filtro por subgrupo (DIRETO, INDIRETO, SEM CC, etc.)
|
||||||
|
if (codigoSubgrupo) {
|
||||||
|
sql += ` AND SUBGRUPO = :${paramIndex}`;
|
||||||
|
params.push(codigoSubgrupo);
|
||||||
|
paramIndex++;
|
||||||
|
console.log('📊 Adicionando filtro de subgrupo:', codigoSubgrupo);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filtro por código da conta
|
||||||
|
if (codigoConta) {
|
||||||
|
sql += ` AND CODCONTA = :${paramIndex}`;
|
||||||
|
params.push(codigoConta);
|
||||||
|
paramIndex++;
|
||||||
|
console.log('💰 Adicionando filtro de conta:', codigoConta);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filtro por códigos de centros de custo selecionados no filtro
|
||||||
|
// Se houver codigosCentrosCustoSelecionados E centroCusto individual, incluir ambos
|
||||||
|
console.log('🔍 Antes de aplicar filtro de centro de custo:', {
|
||||||
|
codigosCentrosCustoSelecionados,
|
||||||
|
centroCusto,
|
||||||
|
codigosCentrosCustoSelecionadosVazio: !codigosCentrosCustoSelecionados || codigosCentrosCustoSelecionados.trim() === '',
|
||||||
|
centroCustoVazio: !centroCusto || centroCusto.trim() === '',
|
||||||
|
centroCustoLength: centroCusto?.length,
|
||||||
|
codigosCentrosCustoSelecionadosLength: codigosCentrosCustoSelecionados?.length
|
||||||
|
});
|
||||||
|
|
||||||
|
// IMPORTANTE: Quando centroCusto individual é fornecido (clique na célula), ele tem PRIORIDADE ABSOLUTA
|
||||||
|
// e deve filtrar APENAS por ele, ignorando codigosCentrosCustoSelecionados do filtro geral
|
||||||
|
if (centroCusto && centroCusto.trim() !== '') {
|
||||||
|
// Quando há centroCusto individual (clique na célula), usar APENAS ele
|
||||||
|
// Ignorar codigosCentrosCustoSelecionados do filtro geral para garantir filtro preciso
|
||||||
|
sql += ` AND CODIGOCENTROCUSTO = :${paramIndex}`;
|
||||||
|
params.push(centroCusto);
|
||||||
|
paramIndex++;
|
||||||
|
console.log('🏢 PRIORIDADE: Filtrando APENAS por centroCusto individual (clique na célula):', centroCusto);
|
||||||
|
console.log('⚠️ Ignorando codigosCentrosCustoSelecionados do filtro geral quando há centroCusto individual');
|
||||||
|
console.log('📝 SQL após adicionar filtro =:', sql.substring(0, 200) + '...');
|
||||||
|
} else if (codigosCentrosCustoSelecionados && codigosCentrosCustoSelecionados.trim() !== '') {
|
||||||
|
// Se só codigosCentrosCustoSelecionados existe (sem clique na célula), usar ele
|
||||||
|
const codigosArray = codigosCentrosCustoSelecionados.split(',').filter(c => c.trim() !== '');
|
||||||
|
if (codigosArray.length > 0) {
|
||||||
|
const placeholders = codigosArray.map(() => `:${paramIndex++}`).join(',');
|
||||||
|
sql += ` AND CODIGOCENTROCUSTO IN (${placeholders})`;
|
||||||
|
params.push(...codigosArray);
|
||||||
|
console.log('🏢 Filtrando por códigos de centros de custo selecionados (filtro geral):', codigosArray);
|
||||||
|
console.log('📝 SQL após adicionar filtro IN:', sql.substring(0, 200) + '...');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('⚠️ Nenhum filtro de centro de custo aplicado - ambos estão vazios');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Exclusão de centro de custo específico (quando desmarcado)
|
||||||
|
// Só aplicar se não houver codigosCentrosCustoSelecionados, para evitar conflito
|
||||||
|
if (excluirCentroCusto && !codigosCentrosCustoSelecionados) {
|
||||||
|
sql += ` AND CODIGOCENTROCUSTO != :${paramIndex}`;
|
||||||
|
params.push(excluirCentroCusto);
|
||||||
|
paramIndex++;
|
||||||
|
console.log('🚫 Excluindo centro de custo:', excluirCentroCusto);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Exclusão de código de conta específico (quando desmarcado)
|
||||||
|
if (excluirCodigoConta) {
|
||||||
|
sql += ` AND CODCONTA != :${paramIndex}`;
|
||||||
|
params.push(excluirCodigoConta);
|
||||||
|
paramIndex++;
|
||||||
|
console.log('🚫 Excluindo código de conta:', excluirCodigoConta);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filtro por códigos de contas selecionadas no filtro
|
||||||
|
if (codigosContasSelecionadas) {
|
||||||
|
const codigosArray = codigosContasSelecionadas.split(',');
|
||||||
|
const placeholders = codigosArray.map(() => `:${paramIndex++}`).join(',');
|
||||||
|
sql += ` AND CODCONTA IN (${placeholders})`;
|
||||||
|
params.push(...codigosArray);
|
||||||
|
console.log('💰 Filtrando por códigos de contas:', codigosArray);
|
||||||
|
}
|
||||||
|
|
||||||
|
sql += ` ORDER BY DTVENC, CODFORNEC, CODCONTA`;
|
||||||
|
|
||||||
|
// Log detalhado da query SQL final
|
||||||
|
console.log('═══════════════════════════════════════════════════════════════');
|
||||||
|
console.log('🗄️ QUERY SQL FINAL:');
|
||||||
|
console.log('═══════════════════════════════════════════════════════════════');
|
||||||
|
console.log(sql);
|
||||||
|
console.log('═══════════════════════════════════════════════════════════════');
|
||||||
|
console.log('📋 PARÂMETROS FINAIS (na ordem dos placeholders :1, :2, :3, ...):');
|
||||||
|
console.log('═══════════════════════════════════════════════════════════════');
|
||||||
|
params.forEach((param, index) => {
|
||||||
|
console.log(` :${index + 1} = ${param} (${typeof param})`);
|
||||||
|
});
|
||||||
|
console.log('═══════════════════════════════════════════════════════════════');
|
||||||
|
console.log('📊 RESUMO DOS FILTROS APLICADOS:');
|
||||||
|
console.log('═══════════════════════════════════════════════════════════════');
|
||||||
|
console.log({
|
||||||
|
temPeriodo: dataInicio && dataFim,
|
||||||
|
periodo: dataInicio && dataFim ? `${dataInicio} a ${dataFim}` : 'N/A',
|
||||||
|
temCodigoGrupo: !!codigoGrupo,
|
||||||
|
codigoGrupo: codigoGrupo || 'N/A',
|
||||||
|
temCodigoSubgrupo: !!codigoSubgrupo,
|
||||||
|
codigoSubgrupo: codigoSubgrupo || 'N/A',
|
||||||
|
temCentroCusto: !!centroCusto,
|
||||||
|
centroCusto: centroCusto || 'N/A',
|
||||||
|
temCodigosCentrosCustoSelecionados: !!codigosCentrosCustoSelecionados,
|
||||||
|
codigosCentrosCustoSelecionados: codigosCentrosCustoSelecionados || 'N/A',
|
||||||
|
temCodigoConta: !!codigoConta,
|
||||||
|
codigoConta: codigoConta || 'N/A',
|
||||||
|
temCodigosContasSelecionadas: !!codigosContasSelecionadas,
|
||||||
|
codigosContasSelecionadas: codigosContasSelecionadas || 'N/A',
|
||||||
|
temExcluirCentroCusto: !!excluirCentroCusto,
|
||||||
|
excluirCentroCusto: excluirCentroCusto || 'N/A',
|
||||||
|
temExcluirCodigoConta: !!excluirCodigoConta,
|
||||||
|
excluirCodigoConta: excluirCodigoConta || 'N/A'
|
||||||
|
});
|
||||||
|
console.log('═══════════════════════════════════════════════════════════════');
|
||||||
|
|
||||||
|
// Se há centroCusto individual, destacar especialmente
|
||||||
|
if (centroCusto && centroCusto.trim() !== '') {
|
||||||
|
console.log('🎯 FILTRO INDIVIDUAL DE CENTRO DE CUSTO ATIVO (clique na célula)');
|
||||||
|
console.log(` Centro de Custo: ${centroCusto}`);
|
||||||
|
console.log(' ⚠️ Este filtro tem PRIORIDADE sobre codigosCentrosCustoSelecionados');
|
||||||
|
}
|
||||||
|
console.log('═══════════════════════════════════════════════════════════════');
|
||||||
|
|
||||||
|
const data = await executeOracleQuery(sql, params);
|
||||||
|
|
||||||
|
console.log('✅ Query executada com sucesso:', data.length, 'registros encontrados');
|
||||||
|
console.log('📝 Primeiros 3 registros:', data.slice(0, 3));
|
||||||
|
|
||||||
|
// Transformar os dados do Oracle para o formato esperado pelo componente
|
||||||
|
// Usando a view VB_DRE_FILIAL_DESPESA_ANALITICO
|
||||||
|
const transformedData = data.map((item: any) => {
|
||||||
|
return {
|
||||||
|
codigo_grupo: item.CODGRUPO || "",
|
||||||
|
codigo_subgrupo: item.SUBGRUPO || "", // SUBGRUPO existe na nova view
|
||||||
|
codigo_fornecedor: item.CODFORNEC || "",
|
||||||
|
nome_fornecedor: item.FORNECEDOR || "",
|
||||||
|
id: item.NUMLANC || 0,
|
||||||
|
codfilial: item.FILIAL || "001", // Usar FILIAL da view
|
||||||
|
recnum: item.NUMLANC || 0,
|
||||||
|
data_competencia: item.ANOMESCOMP || "",
|
||||||
|
data_vencimento: item.DTVENC ? new Date(item.DTVENC).toISOString().split('T')[0] : "",
|
||||||
|
data_pagamento: item.DTPAGTO ? new Date(item.DTPAGTO).toISOString().split('T')[0] : "",
|
||||||
|
data_caixa: item.DTCAIXA ? new Date(item.DTCAIXA).toISOString().split('T')[0] : "",
|
||||||
|
codigo_conta: item.CODCONTA || "",
|
||||||
|
conta: item.CONTA || "",
|
||||||
|
codigo_centrocusto: item.CODIGOCENTROCUSTO || "",
|
||||||
|
centro_custo: item.CENTROCUSTO || "",
|
||||||
|
valor: item.VLREALIZADO !== null && item.VLREALIZADO !== undefined ? Number(item.VLREALIZADO) : 0,
|
||||||
|
historico: item.HISTORICO || "",
|
||||||
|
historico2: item.HISTORICO2 || "",
|
||||||
|
created_at: new Date().toISOString(),
|
||||||
|
updated_at: new Date().toISOString(),
|
||||||
|
// Campos adicionais do Oracle
|
||||||
|
entidade: item.ENTIDADE || "",
|
||||||
|
tipo_parceiro: item.TIPOPARCEIRO || "",
|
||||||
|
valor_previsto: item.VLPREVISTO !== null && item.VLPREVISTO !== undefined ? Number(item.VLPREVISTO) : 0,
|
||||||
|
valor_confirmado: item.VLCONFIRMADO !== null && item.VLCONFIRMADO !== undefined ? Number(item.VLCONFIRMADO) : 0,
|
||||||
|
valor_pago: item.VLPAGO !== null && item.VLPAGO !== undefined ? Number(item.VLPAGO) : 0,
|
||||||
|
numero_lancamento: item.NUMLANC || 0,
|
||||||
|
ano_mes_comp: item.ANOMESCOMP || "",
|
||||||
|
codgrupo: item.CODGRUPO || "",
|
||||||
|
// Novos campos
|
||||||
|
data_lancamento: item.DTLANC ? new Date(item.DTLANC).toISOString().split('T')[0] : "",
|
||||||
|
data_compensacao: item.DTCOMPENSACAO ? new Date(item.DTCOMPENSACAO).toISOString().split('T')[0] : "",
|
||||||
|
data_pagto: item.DTPAGTO ? new Date(item.DTPAGTO).toISOString().split('T')[0] : ""
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('🔄 Dados transformados:', transformedData.length, 'registros');
|
||||||
|
console.log('📝 Primeiros 3 transformados:', transformedData.slice(0, 3));
|
||||||
|
|
||||||
|
return NextResponse.json(transformedData);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('❌ Erro ao buscar dados analíticos do Oracle (Filial):', error);
|
||||||
|
|
||||||
|
return NextResponse.json(
|
||||||
|
{
|
||||||
|
success: false,
|
||||||
|
error: error instanceof Error ? error.message : 'Erro desconhecido',
|
||||||
|
details: error instanceof Error ? error.stack : undefined
|
||||||
|
},
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { executeOracleQuery } from '@/db/oracle';
|
||||||
|
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
console.log('🔄 Buscando dados DRE do Oracle (Filial) - Views VB_DRE_FILIAL_*...');
|
||||||
|
|
||||||
|
// Query para buscar dados das views VB_DRE_FILIAL_CMV, VB_DRE_FILIAL_DESPESA e VB_DRE_FILIAL_FATLIQ
|
||||||
|
const sql = `SELECT *
|
||||||
|
FROM (
|
||||||
|
SELECT 'CMV' AS TIPO,
|
||||||
|
"DATA",
|
||||||
|
CODGRUPO, GRUPO, FILIAL, CODCONTA, CONTA, VALOR
|
||||||
|
FROM SEVEN.VB_DRE_FILIAL_CMV
|
||||||
|
UNION ALL
|
||||||
|
SELECT 'DESPESA' AS TIPO,
|
||||||
|
"DATA",
|
||||||
|
CODGRUPO, GRUPO, FILIAL, CODCONTA, CONTA, VALOR
|
||||||
|
FROM SEVEN.VB_DRE_FILIAL_DESPESA
|
||||||
|
UNION ALL
|
||||||
|
SELECT 'FATLIQ' AS TIPO,
|
||||||
|
"DATA",
|
||||||
|
CODGRUPO, GRUPO, FILIAL, CODCONTA, CONTA, VALOR
|
||||||
|
FROM SEVEN.VB_DRE_FILIAL_FATLIQ
|
||||||
|
) X
|
||||||
|
ORDER BY CODGRUPO, CODCONTA`;
|
||||||
|
|
||||||
|
const data = await executeOracleQuery(sql);
|
||||||
|
|
||||||
|
console.log('✅ Query executada com sucesso:', data.length, 'registros encontrados');
|
||||||
|
|
||||||
|
// Debug: Verificar estrutura dos dados
|
||||||
|
if (data.length > 0) {
|
||||||
|
console.log('🔍 Primeiro registro do Oracle:', Object.keys(data[0]));
|
||||||
|
console.log('🔍 Primeiro registro completo:', data[0]);
|
||||||
|
console.log('🔍 Valores únicos de CODGRUPO:', [...new Set(data.map((item: any) => item.CODGRUPO).filter(Boolean))]);
|
||||||
|
console.log('🔍 Valores únicos de FILIAL:', [...new Set(data.map((item: any) => item.FILIAL).filter(Boolean))]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Transformar os dados do Oracle para o formato esperado pelo componente
|
||||||
|
const transformedData = data.map((item: any) => {
|
||||||
|
// Converter DATA para formato YYYY-MM se necessário
|
||||||
|
let dataCompetencia = item.DATA;
|
||||||
|
if (dataCompetencia) {
|
||||||
|
// Se DATA for uma string no formato YYYY-MM, usar diretamente
|
||||||
|
if (typeof dataCompetencia === 'string' && dataCompetencia.match(/^\d{4}-\d{2}$/)) {
|
||||||
|
// Já está no formato correto
|
||||||
|
} else if (dataCompetencia instanceof Date) {
|
||||||
|
// Se for Date, converter para YYYY-MM
|
||||||
|
const year = dataCompetencia.getFullYear();
|
||||||
|
const month = String(dataCompetencia.getMonth() + 1).padStart(2, '0');
|
||||||
|
dataCompetencia = `${year}-${month}`;
|
||||||
|
} else {
|
||||||
|
// Tentar converter string de data para YYYY-MM
|
||||||
|
try {
|
||||||
|
const date = new Date(dataCompetencia);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
dataCompetencia = `${year}-${month}`;
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('⚠️ Erro ao converter DATA:', dataCompetencia);
|
||||||
|
dataCompetencia = "2023-03"; // Valor padrão
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
dataCompetencia = "2023-03"; // Valor padrão
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
codfilial: item.FILIAL || "001",
|
||||||
|
data_competencia: dataCompetencia,
|
||||||
|
data_cai: dataCompetencia,
|
||||||
|
grupo: item.GRUPO || "", // GRUPO (nome)
|
||||||
|
codigo_grupo: item.CODGRUPO || "", // CODGRUPO (código)
|
||||||
|
codigo_conta: parseInt(item.CODCONTA) || 0, // Converter CODCONTA para número
|
||||||
|
conta: item.CONTA || "", // CONTA
|
||||||
|
valor: item.VALOR?.toString() || "0", // Converter VALOR para string
|
||||||
|
codgrupo: item.CODGRUPO || "", // CODGRUPO
|
||||||
|
tipo: item.TIPO || "", // TIPO (CMV, DESPESA, FATLIQ)
|
||||||
|
filial: item.FILIAL || "", // FILIAL
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('✅ Dados transformados:', transformedData.length, 'registros');
|
||||||
|
console.log('🔍 Exemplo de registro transformado:', transformedData[0]);
|
||||||
|
|
||||||
|
return NextResponse.json(transformedData);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('❌ Erro ao buscar dados DRE do Oracle:', error);
|
||||||
|
|
||||||
|
return NextResponse.json(
|
||||||
|
{
|
||||||
|
success: false,
|
||||||
|
error: error instanceof Error ? error.message : 'Erro desconhecido',
|
||||||
|
details: error instanceof Error ? error.stack : undefined
|
||||||
|
},
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,997 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { DataGridPremium, GridToolbar, GridColDef, GridFilterModel } from "@mui/x-data-grid-premium";
|
||||||
|
import { LicenseInfo } from '@mui/x-license-pro';
|
||||||
|
|
||||||
|
// Garantir que a licença seja aplicada no componente atualização de licença
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
try {
|
||||||
|
const PERPETUAL_LICENSE_KEY = 'e0d9bb8070ce0054c9d9ecb6e82cb58fTz0wLEU9MzI0NzIxNDQwMDAwMDAsUz1wcmVtaXVtLExNPXBlcnBldHVhbCxLVj0y';
|
||||||
|
LicenseInfo.setLicenseKey(PERPETUAL_LICENSE_KEY);
|
||||||
|
console.log('✅ Licença MUI X aplicada no componente Analítico');
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('⚠️ Erro ao aplicar licença no componente:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogFooter,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerDescription,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerTitle,
|
||||||
|
DrawerTrigger,
|
||||||
|
} from "@/components/ui/drawer";
|
||||||
|
import { Download, Filter, X, Search, ArrowUpDown, ArrowUp, ArrowDown, Maximize2, Minimize2 } from "lucide-react";
|
||||||
|
import * as XLSX from "xlsx";
|
||||||
|
|
||||||
|
interface AnaliticoItem {
|
||||||
|
codigo_grupo: string;
|
||||||
|
codigo_subgrupo: string;
|
||||||
|
codigo_fornecedor: string;
|
||||||
|
nome_fornecedor: string;
|
||||||
|
id: number;
|
||||||
|
codfilial: string;
|
||||||
|
recnum: number;
|
||||||
|
data_competencia: string;
|
||||||
|
data_vencimento: string;
|
||||||
|
data_pagamento: string;
|
||||||
|
data_caixa: string;
|
||||||
|
codigo_conta: string;
|
||||||
|
conta: string;
|
||||||
|
codigo_centrocusto: string;
|
||||||
|
centro_custo?: string;
|
||||||
|
valor: number;
|
||||||
|
historico: string;
|
||||||
|
historico2: string;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
// Campos adicionais do Oracle
|
||||||
|
entidade?: string;
|
||||||
|
tipo_parceiro?: string;
|
||||||
|
valor_previsto?: number;
|
||||||
|
valor_confirmado?: number;
|
||||||
|
valor_pago?: number;
|
||||||
|
numero_lancamento?: number;
|
||||||
|
ano_mes_comp?: string;
|
||||||
|
codgrupo?: string;
|
||||||
|
grupo?: string;
|
||||||
|
filial?: string;
|
||||||
|
tipo?: string;
|
||||||
|
// Novos campos
|
||||||
|
data_lancamento?: string;
|
||||||
|
data_compensacao?: string;
|
||||||
|
data_pagto?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AnaliticoProps {
|
||||||
|
filtros: {
|
||||||
|
dataInicio: string;
|
||||||
|
dataFim: string;
|
||||||
|
codigoGrupo?: string;
|
||||||
|
codigoConta?: string;
|
||||||
|
linhaSelecionada?: string;
|
||||||
|
excluirCodigoConta?: string;
|
||||||
|
codigosContasSelecionadas?: string;
|
||||||
|
filial?: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Componente de filtro customizado estilo Excel
|
||||||
|
interface ExcelFilterProps {
|
||||||
|
column: GridColDef;
|
||||||
|
data: any[];
|
||||||
|
filteredData: any[]; // Dados filtrados para mostrar apenas valores disponíveis
|
||||||
|
onFilterChange: (field: string, values: string[]) => void;
|
||||||
|
onSortChange: (field: string, direction: 'asc' | 'desc' | null) => void;
|
||||||
|
currentFilter?: string[];
|
||||||
|
currentSort?: 'asc' | 'desc' | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ExcelFilter: React.FC<ExcelFilterProps> = ({
|
||||||
|
column,
|
||||||
|
data,
|
||||||
|
filteredData,
|
||||||
|
onFilterChange,
|
||||||
|
onSortChange,
|
||||||
|
currentFilter = [],
|
||||||
|
currentSort = null,
|
||||||
|
}) => {
|
||||||
|
const [isOpen, setIsOpen] = React.useState(false);
|
||||||
|
const [searchTerm, setSearchTerm] = React.useState("");
|
||||||
|
const [selectedValues, setSelectedValues] = React.useState<string[]>(currentFilter);
|
||||||
|
const [selectAll, setSelectAll] = React.useState(false);
|
||||||
|
|
||||||
|
// Sincronizar selectedValues com currentFilter quando ele mudar
|
||||||
|
React.useEffect(() => {
|
||||||
|
setSelectedValues(currentFilter);
|
||||||
|
}, [currentFilter]);
|
||||||
|
|
||||||
|
// Obter valores únicos da coluna baseado nos dados filtrados
|
||||||
|
const uniqueValues = React.useMemo(() => {
|
||||||
|
const values = filteredData
|
||||||
|
.map((row) => {
|
||||||
|
const value = row[column.field];
|
||||||
|
if (value === null || value === undefined) return "";
|
||||||
|
return String(value);
|
||||||
|
})
|
||||||
|
.filter((value, index, self) => self.indexOf(value) === index && value !== "")
|
||||||
|
.sort();
|
||||||
|
|
||||||
|
return values;
|
||||||
|
}, [filteredData, column.field]);
|
||||||
|
|
||||||
|
// Filtrar valores baseado na busca
|
||||||
|
const filteredValues = React.useMemo(() => {
|
||||||
|
if (!searchTerm) return uniqueValues;
|
||||||
|
return uniqueValues.filter((value) =>
|
||||||
|
value.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
);
|
||||||
|
}, [uniqueValues, searchTerm]);
|
||||||
|
|
||||||
|
const handleSelectAll = (checked: boolean) => {
|
||||||
|
if (checked) {
|
||||||
|
setSelectedValues(filteredValues);
|
||||||
|
setSelectAll(true);
|
||||||
|
} else {
|
||||||
|
setSelectedValues([]);
|
||||||
|
setSelectAll(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleValueToggle = (value: string, checked: boolean) => {
|
||||||
|
let newValues: string[];
|
||||||
|
if (checked) {
|
||||||
|
newValues = [...selectedValues, value];
|
||||||
|
} else {
|
||||||
|
newValues = selectedValues.filter((v) => v !== value);
|
||||||
|
}
|
||||||
|
setSelectedValues(newValues);
|
||||||
|
setSelectAll(newValues.length === filteredValues.length && filteredValues.length > 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleApply = () => {
|
||||||
|
onFilterChange(column.field, selectedValues);
|
||||||
|
setIsOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClear = () => {
|
||||||
|
setSelectedValues([]);
|
||||||
|
setSelectAll(false);
|
||||||
|
onFilterChange(column.field, []);
|
||||||
|
setIsOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSort = (direction: 'asc' | 'desc') => {
|
||||||
|
onSortChange(column.field, direction);
|
||||||
|
setIsOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0 hover:bg-gray-200 rounded-sm"
|
||||||
|
onClick={() => setIsOpen(true)}
|
||||||
|
>
|
||||||
|
<ArrowUpDown className="h-3 w-3 text-gray-600" />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="text-sm font-medium">
|
||||||
|
Filtrar por "{column.headerName}"
|
||||||
|
</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Opções de ordenação */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs font-medium text-gray-600">Ordenar</div>
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 text-xs"
|
||||||
|
onClick={() => handleSort('asc')}
|
||||||
|
>
|
||||||
|
<ArrowUp className="h-3 w-3 mr-1" />
|
||||||
|
A a Z
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 text-xs"
|
||||||
|
onClick={() => handleSort('desc')}
|
||||||
|
>
|
||||||
|
<ArrowDown className="h-3 w-3 mr-1" />
|
||||||
|
Z a A
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t pt-2">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 text-xs text-red-600 hover:text-red-700"
|
||||||
|
onClick={handleClear}
|
||||||
|
>
|
||||||
|
<X className="h-3 w-3 mr-1" />
|
||||||
|
Limpar Filtro
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Barra de pesquisa */}
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
|
||||||
|
<Input
|
||||||
|
placeholder="Pesquisar"
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="pl-8 h-8 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lista de valores com checkboxes */}
|
||||||
|
<div className="max-h-60 overflow-y-auto border rounded-md">
|
||||||
|
<div className="p-2">
|
||||||
|
<div className="flex items-center space-x-2 py-1">
|
||||||
|
<Checkbox
|
||||||
|
id="select-all"
|
||||||
|
checked={selectAll}
|
||||||
|
onCheckedChange={handleSelectAll}
|
||||||
|
/>
|
||||||
|
<label htmlFor="select-all" className="text-sm font-medium">
|
||||||
|
(Selecionar Tudo)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filteredValues.map((value) => (
|
||||||
|
<div key={value} className="flex items-center space-x-2 py-1">
|
||||||
|
<Checkbox
|
||||||
|
id={`value-${value}`}
|
||||||
|
checked={selectedValues.includes(value)}
|
||||||
|
onCheckedChange={(checked: boolean) => handleValueToggle(value, checked)}
|
||||||
|
/>
|
||||||
|
<label htmlFor={`value-${value}`} className="text-sm">
|
||||||
|
{value}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Botões de ação */}
|
||||||
|
<DialogFooter className="flex space-x-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={() => setIsOpen(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" onClick={handleApply}>
|
||||||
|
OK
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
||||||
|
const [data, setData] = React.useState<AnaliticoItem[]>([]);
|
||||||
|
const [loading, setLoading] = React.useState(false);
|
||||||
|
const [globalFilter, setGlobalFilter] = React.useState("");
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const [drawerOpen, setDrawerOpen] = React.useState(false);
|
||||||
|
const [columnFilters, setColumnFilters] = React.useState<Record<string, string[]>>({});
|
||||||
|
const [columnSorts, setColumnSorts] = React.useState<Record<string, 'asc' | 'desc' | null>>({});
|
||||||
|
const [conditions, setConditions] = React.useState([
|
||||||
|
{ column: "", operator: "contains", value: "" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Estados para o card de agregação customizado (simplificado)
|
||||||
|
const [aggregationCardRef, setAggregationCardRef] = React.useState<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
// Estado para armazenar filtros externos (vindos do teste.tsx)
|
||||||
|
const [filtrosExternos, setFiltrosExternos] = React.useState(filtros);
|
||||||
|
|
||||||
|
// Funções para gerenciar filtros customizados
|
||||||
|
const handleColumnFilterChange = React.useCallback((field: string, values: string[]) => {
|
||||||
|
setColumnFilters(prev => ({
|
||||||
|
...prev,
|
||||||
|
[field]: values
|
||||||
|
}));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleColumnSortChange = React.useCallback((field: string, direction: 'asc' | 'desc' | null) => {
|
||||||
|
setColumnSorts(prev => ({
|
||||||
|
...prev,
|
||||||
|
[field]: direction
|
||||||
|
}));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Função para contar filtros aplicados (apenas filtros internos do modal customizado)
|
||||||
|
const getFilterCount = React.useCallback(() => {
|
||||||
|
let count = 0;
|
||||||
|
|
||||||
|
// Contar filtros de coluna (filtros do modal customizado)
|
||||||
|
count += Object.keys(columnFilters).length;
|
||||||
|
|
||||||
|
// Contar filtro global (se aplicável)
|
||||||
|
if (globalFilter && globalFilter.trim() !== "") {
|
||||||
|
count += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return count;
|
||||||
|
}, [columnFilters, globalFilter]);
|
||||||
|
|
||||||
|
// Função para limpar todos os filtros internos (mantém filtros externos)
|
||||||
|
const clearAllFilters = React.useCallback(() => {
|
||||||
|
setColumnFilters({});
|
||||||
|
setColumnSorts({});
|
||||||
|
setGlobalFilter("");
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Atualizar filtros externos quando os props mudarem
|
||||||
|
React.useEffect(() => {
|
||||||
|
console.log('🔄 Analítico - useEffect dos filtros chamado');
|
||||||
|
console.log('📋 Filtros recebidos via props:', filtros);
|
||||||
|
setFiltrosExternos(filtros);
|
||||||
|
}, [filtros]);
|
||||||
|
|
||||||
|
const fetchData = React.useCallback(async () => {
|
||||||
|
console.log('🔄 Analítico - fetchData chamado');
|
||||||
|
console.log('📋 Filtros externos recebidos:', filtrosExternos);
|
||||||
|
|
||||||
|
if (!filtrosExternos.dataInicio || !filtrosExternos.dataFim) {
|
||||||
|
console.log('⚠️ Sem dataInicio ou dataFim, limpando dados');
|
||||||
|
setData([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
|
||||||
|
if (filtrosExternos.dataInicio) {
|
||||||
|
params.append('dataInicio', filtrosExternos.dataInicio);
|
||||||
|
}
|
||||||
|
if (filtrosExternos.dataFim) {
|
||||||
|
params.append('dataFim', filtrosExternos.dataFim);
|
||||||
|
}
|
||||||
|
if (filtrosExternos.codigoGrupo) {
|
||||||
|
params.append('codigoGrupo', filtrosExternos.codigoGrupo);
|
||||||
|
}
|
||||||
|
if (filtrosExternos.codigoConta) {
|
||||||
|
params.append('codigoConta', filtrosExternos.codigoConta);
|
||||||
|
}
|
||||||
|
if (filtrosExternos.filial) {
|
||||||
|
params.append('filial', filtrosExternos.filial);
|
||||||
|
}
|
||||||
|
if (filtrosExternos.excluirCodigoConta) {
|
||||||
|
params.append('excluirCodigoConta', filtrosExternos.excluirCodigoConta);
|
||||||
|
}
|
||||||
|
if (filtrosExternos.codigosContasSelecionadas) {
|
||||||
|
params.append('codigosContasSelecionadas', filtrosExternos.codigosContasSelecionadas);
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `/api/analitico-filial-oracle?${params.toString()}`;
|
||||||
|
console.log('🌐 Fazendo requisição para:', url);
|
||||||
|
console.log('📋 Parâmetros enviados:', {
|
||||||
|
dataInicio: filtrosExternos.dataInicio,
|
||||||
|
dataFim: filtrosExternos.dataFim,
|
||||||
|
codigoGrupo: filtrosExternos.codigoGrupo,
|
||||||
|
codigoConta: filtrosExternos.codigoConta,
|
||||||
|
filial: filtrosExternos.filial,
|
||||||
|
codigosContasSelecionadas: filtrosExternos.codigosContasSelecionadas
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await fetch(url);
|
||||||
|
if (response.ok) {
|
||||||
|
const result = await response.json();
|
||||||
|
console.log('✅ Resposta da API recebida:', result.length, 'registros');
|
||||||
|
console.log('📝 Primeiros 2 registros:', result.slice(0, 2));
|
||||||
|
setData(result as AnaliticoItem[]);
|
||||||
|
} else {
|
||||||
|
console.error("❌ Erro ao buscar dados:", await response.text());
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("❌ Erro ao buscar dados:", error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [filtrosExternos]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
}, [fetchData]);
|
||||||
|
|
||||||
|
// Filtrar dados baseado nos filtros de coluna
|
||||||
|
const filteredData = React.useMemo(() => {
|
||||||
|
if (!data || data.length === 0) return data;
|
||||||
|
|
||||||
|
return data.filter((row) => {
|
||||||
|
return Object.entries(columnFilters).every(([field, filterValues]) => {
|
||||||
|
if (!filterValues || filterValues.length === 0) return true;
|
||||||
|
|
||||||
|
const cellValue = (row as any)[field];
|
||||||
|
const stringValue = cellValue === null || cellValue === undefined ? "" : String(cellValue);
|
||||||
|
|
||||||
|
return filterValues.includes(stringValue);
|
||||||
|
});
|
||||||
|
}).map((row, index) => ({
|
||||||
|
...row,
|
||||||
|
id: `filtered-${row.id || row.recnum || index}` // Garantir ID único e estável
|
||||||
|
}));
|
||||||
|
}, [data, columnFilters]);
|
||||||
|
|
||||||
|
// Função para renderizar header com filtro Excel
|
||||||
|
const renderHeaderWithFilter = React.useCallback((column: GridColDef) => {
|
||||||
|
return (params: any) => (
|
||||||
|
<div className="flex items-center justify-between w-full">
|
||||||
|
<span className="text-sm font-medium">{column.headerName}</span>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<ExcelFilter
|
||||||
|
column={column}
|
||||||
|
data={data}
|
||||||
|
filteredData={filteredData}
|
||||||
|
onFilterChange={handleColumnFilterChange}
|
||||||
|
onSortChange={handleColumnSortChange}
|
||||||
|
currentFilter={columnFilters[column.field] || []}
|
||||||
|
currentSort={columnSorts[column.field] || null}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}, [data, filteredData, columnFilters, columnSorts, handleColumnFilterChange, handleColumnSortChange]);
|
||||||
|
|
||||||
|
// Definir colunas do DataGridPro na ordem solicitada
|
||||||
|
const columns = React.useMemo(() => {
|
||||||
|
const dateCellRenderer = (params: any) => {
|
||||||
|
if (!params.value) return "-";
|
||||||
|
try {
|
||||||
|
return new Date(params.value).toLocaleDateString("pt-BR");
|
||||||
|
} catch (error) {
|
||||||
|
return params.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const currencyCellRenderer = (params: any, showZero: boolean = false) => {
|
||||||
|
const value = params.value;
|
||||||
|
if (value === null || value === undefined || value === "") return "-";
|
||||||
|
if (!showZero && value === 0) return "-";
|
||||||
|
const numValue = typeof value === "string" ? parseFloat(value) : Number(value);
|
||||||
|
if (isNaN(numValue)) return "-";
|
||||||
|
const formatted = new Intl.NumberFormat("pt-BR", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "BRL",
|
||||||
|
}).format(numValue);
|
||||||
|
return (
|
||||||
|
<span className={`text-sm font-semibold ${numValue < 0 ? "text-red-600" : "text-gray-900"}`}>
|
||||||
|
{formatted}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const baseColumns = [
|
||||||
|
{
|
||||||
|
field: "ano_mes_comp",
|
||||||
|
headerName: "Ano/Mês Comp",
|
||||||
|
width: 110,
|
||||||
|
sortable: true,
|
||||||
|
resizable: true,
|
||||||
|
renderCell: (params: any) => params.value || "-",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "filial",
|
||||||
|
headerName: "Filial",
|
||||||
|
width: 90,
|
||||||
|
sortable: true,
|
||||||
|
resizable: true,
|
||||||
|
renderCell: (params: any) => params.value || "-",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "codigo_grupo",
|
||||||
|
headerName: "Cod.Grupo",
|
||||||
|
width: 100,
|
||||||
|
sortable: true,
|
||||||
|
resizable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "grupo",
|
||||||
|
headerName: "Grupo",
|
||||||
|
width: 200,
|
||||||
|
sortable: true,
|
||||||
|
resizable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "codigo_conta",
|
||||||
|
headerName: "Cod.Conta",
|
||||||
|
width: 100,
|
||||||
|
sortable: true,
|
||||||
|
resizable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "conta",
|
||||||
|
headerName: "Conta",
|
||||||
|
width: 200,
|
||||||
|
sortable: true,
|
||||||
|
resizable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "valor",
|
||||||
|
headerName: "VI.Realizado",
|
||||||
|
type: "number" as const,
|
||||||
|
width: 120,
|
||||||
|
sortable: true,
|
||||||
|
resizable: true,
|
||||||
|
renderCell: (params: any) => currencyCellRenderer(params, true),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "tipo",
|
||||||
|
headerName: "Tipo",
|
||||||
|
width: 95,
|
||||||
|
sortable: true,
|
||||||
|
resizable: true,
|
||||||
|
renderCell: (params: any) => params.value || "-",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Adicionar renderHeader com filtro Excel para todas as colunas
|
||||||
|
return baseColumns.map((col) => ({
|
||||||
|
...col,
|
||||||
|
renderHeader: renderHeaderWithFilter(col),
|
||||||
|
}));
|
||||||
|
}, [renderHeaderWithFilter]);
|
||||||
|
|
||||||
|
// Ordenar dados baseado na ordenação de coluna
|
||||||
|
const sortedAndFilteredData = React.useMemo(() => {
|
||||||
|
if (!filteredData || filteredData.length === 0) return filteredData;
|
||||||
|
|
||||||
|
const sortField = Object.keys(columnSorts).find(field => columnSorts[field] !== null);
|
||||||
|
if (!sortField || !columnSorts[sortField]) return filteredData;
|
||||||
|
|
||||||
|
return [...filteredData].sort((a, b) => {
|
||||||
|
const aValue = (a as any)[sortField];
|
||||||
|
const bValue = (b as any)[sortField];
|
||||||
|
|
||||||
|
// Converter para string para comparação
|
||||||
|
const aString = aValue === null || aValue === undefined ? "" : String(aValue);
|
||||||
|
const bString = bValue === null || bValue === undefined ? "" : String(bValue);
|
||||||
|
|
||||||
|
if (columnSorts[sortField] === 'asc') {
|
||||||
|
return aString.localeCompare(bString);
|
||||||
|
} else {
|
||||||
|
return bString.localeCompare(aString);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [filteredData, columnSorts]);
|
||||||
|
|
||||||
|
// Calcular valor total dos dados filtrados
|
||||||
|
const valorTotal = React.useMemo(() => {
|
||||||
|
return sortedAndFilteredData.reduce((sum, item) => sum + (Number(item.valor) || 0), 0);
|
||||||
|
}, [sortedAndFilteredData]);
|
||||||
|
|
||||||
|
// Limpar filtros de colunas que não têm mais valores disponíveis
|
||||||
|
React.useEffect(() => {
|
||||||
|
const updatedFilters = { ...columnFilters };
|
||||||
|
let hasChanges = false;
|
||||||
|
|
||||||
|
Object.keys(columnFilters).forEach(field => {
|
||||||
|
const currentFilterValues = columnFilters[field] || [];
|
||||||
|
if (currentFilterValues.length === 0) return;
|
||||||
|
|
||||||
|
// Obter valores únicos disponíveis para esta coluna nos dados filtrados
|
||||||
|
const availableValues = filteredData
|
||||||
|
.map(row => {
|
||||||
|
const value = (row as any)[field];
|
||||||
|
return value === null || value === undefined ? "" : String(value);
|
||||||
|
})
|
||||||
|
.filter((value, index, self) => self.indexOf(value) === index && value !== "");
|
||||||
|
|
||||||
|
// Filtrar apenas os valores que ainda estão disponíveis
|
||||||
|
const validFilterValues = currentFilterValues.filter(value =>
|
||||||
|
availableValues.includes(value)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (validFilterValues.length !== currentFilterValues.length) {
|
||||||
|
if (validFilterValues.length === 0) {
|
||||||
|
delete updatedFilters[field];
|
||||||
|
} else {
|
||||||
|
updatedFilters[field] = validFilterValues;
|
||||||
|
}
|
||||||
|
hasChanges = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (hasChanges) {
|
||||||
|
setColumnFilters(updatedFilters);
|
||||||
|
}
|
||||||
|
}, [filteredData, columnFilters]);
|
||||||
|
|
||||||
|
// Exportação XLSX - Exporta exatamente as colunas e valores da grid
|
||||||
|
const exportToExcel = () => {
|
||||||
|
if (sortedAndFilteredData.length === 0) return;
|
||||||
|
|
||||||
|
// Funções auxiliares para formatar valores exatamente como na grid
|
||||||
|
const formatCurrencyValue = (value: any, showZero: boolean = false): string | number => {
|
||||||
|
if (value === null || value === undefined || value === "") return "-";
|
||||||
|
const numValue = typeof value === "string" ? parseFloat(value) : Number(value);
|
||||||
|
if (isNaN(numValue)) return "-";
|
||||||
|
if (!showZero && numValue === 0) return "-";
|
||||||
|
// Para Excel, retornar o número formatado como string (mantém o formato de moeda)
|
||||||
|
return new Intl.NumberFormat("pt-BR", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "BRL",
|
||||||
|
}).format(numValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatCellValue = (column: GridColDef, item: any): any => {
|
||||||
|
const value = item[column.field];
|
||||||
|
|
||||||
|
// Se a coluna tem renderCell, aplicar a mesma lógica
|
||||||
|
if (column.renderCell) {
|
||||||
|
// Para valores monetários
|
||||||
|
if (column.field === "valor") {
|
||||||
|
return formatCurrencyValue(value, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Para campos que retornam "-" se vazios
|
||||||
|
if (column.field === "filial" || column.field === "ano_mes_comp" ||
|
||||||
|
column.field === "tipo") {
|
||||||
|
return value || "-";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Valor padrão
|
||||||
|
return value ?? "";
|
||||||
|
};
|
||||||
|
|
||||||
|
// Criar dados de exportação usando as colunas da grid na ordem exata
|
||||||
|
const exportData = sortedAndFilteredData.map((item) => {
|
||||||
|
const row: Record<string, any> = {};
|
||||||
|
|
||||||
|
// Iterar sobre as colunas na ordem da grid
|
||||||
|
columns.forEach((column) => {
|
||||||
|
const headerName = column.headerName || column.field;
|
||||||
|
row[headerName] = formatCellValue(column, item);
|
||||||
|
});
|
||||||
|
|
||||||
|
return row;
|
||||||
|
});
|
||||||
|
|
||||||
|
const wb = XLSX.utils.book_new();
|
||||||
|
const ws = XLSX.utils.json_to_sheet(exportData);
|
||||||
|
|
||||||
|
const resumoData = [
|
||||||
|
{ Métrica: "Total de Registros", Valor: sortedAndFilteredData.length },
|
||||||
|
{ Métrica: "Valor Total", Valor: valorTotal },
|
||||||
|
{ Métrica: "Filtros Aplicados", Valor: Object.keys(columnFilters).length > 0 ? "Sim" : "Não" },
|
||||||
|
];
|
||||||
|
const wsResumo = XLSX.utils.json_to_sheet(resumoData);
|
||||||
|
|
||||||
|
XLSX.utils.book_append_sheet(wb, ws, "Dados Analíticos");
|
||||||
|
XLSX.utils.book_append_sheet(wb, wsResumo, "Resumo");
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const timestamp = now.toISOString().slice(0, 19).replace(/:/g, "-");
|
||||||
|
const fileName = `analitico_filial_${timestamp}.xlsx`;
|
||||||
|
|
||||||
|
XLSX.writeFile(wb, fileName);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Aplicar filtros avançados
|
||||||
|
const applyFilters = () => {
|
||||||
|
// Implementar lógica de filtros avançados se necessário
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearFilters = () => {
|
||||||
|
setConditions([{ column: "", operator: "contains", value: "" }]);
|
||||||
|
setGlobalFilter("");
|
||||||
|
};
|
||||||
|
|
||||||
|
// Função para renderizar o conteúdo principal do componente (reutilizável)
|
||||||
|
const renderAnaliticoContent = (isMaximized: boolean = false) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Filtros Externos Ativos - Apenas quando maximizado */}
|
||||||
|
{isMaximized && (filtrosExternos.dataInicio || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && (
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||||
|
<span className="text-sm font-medium text-blue-900">Filtros aplicados pela tabela DRE Filial:</span>
|
||||||
|
<div className="flex flex-wrap gap-2 text-xs text-blue-800">
|
||||||
|
{filtrosExternos.dataInicio && filtrosExternos.dataFim && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||||
|
Período: {filtrosExternos.dataInicio} a {filtrosExternos.dataFim}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{filtrosExternos.codigoGrupo && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||||
|
Grupo: {filtrosExternos.codigoGrupo}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{filtrosExternos.codigoConta && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||||
|
Conta: {filtrosExternos.codigoConta}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Controls - Apenas quando maximizado */}
|
||||||
|
{isMaximized && (
|
||||||
|
<div className="flex gap-2 flex-wrap mb-4">
|
||||||
|
{data.length > 0 && (
|
||||||
|
<Button
|
||||||
|
onClick={clearAllFilters}
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
Limpar Filtros
|
||||||
|
{getFilterCount() > 0 && (
|
||||||
|
<span className="bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center font-semibold">
|
||||||
|
{getFilterCount()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
onClick={exportToExcel}
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={sortedAndFilteredData.length === 0}
|
||||||
|
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<Download className="h-4 w-4" />
|
||||||
|
Exportar XLSX
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* DataGridPro */}
|
||||||
|
<Card className={`w-full shadow-lg rounded-2xl ${isMaximized ? 'h-[calc(96vh-280px)]' : 'h-[40vh]'}`} style={{ overflowAnchor: 'none' }}>
|
||||||
|
<CardContent className="p-4 h-full" style={{ overflowAnchor: 'none' }}>
|
||||||
|
<div className="flex items-center gap-6 mb-3 pb-3 border-b border-gray-200">
|
||||||
|
<div className="text-sm font-medium text-gray-700">
|
||||||
|
<span className="font-semibold">Total de Registros:</span>{" "}
|
||||||
|
<span className="text-blue-600 font-bold">{sortedAndFilteredData.length}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-medium text-gray-700">
|
||||||
|
<span className="font-semibold">Valor Total:</span>{" "}
|
||||||
|
<span className={`font-bold ${valorTotal < 0 ? 'text-red-600' : 'text-gray-900'}`}>
|
||||||
|
{new Intl.NumberFormat("pt-BR", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "BRL",
|
||||||
|
}).format(valorTotal)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative" }}>
|
||||||
|
<DataGridPremium
|
||||||
|
key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
|
||||||
|
rows={sortedAndFilteredData}
|
||||||
|
columns={columns}
|
||||||
|
loading={loading}
|
||||||
|
disableRowSelectionOnClick
|
||||||
|
density="compact"
|
||||||
|
slots={{ toolbar: GridToolbar }}
|
||||||
|
disableColumnMenu={true}
|
||||||
|
disableColumnSorting={true}
|
||||||
|
pagination={false}
|
||||||
|
disableVirtualization={false}
|
||||||
|
getRowId={(row: any) => row.id || `row-${row.recnum || Math.random()}`}
|
||||||
|
sx={{
|
||||||
|
height: "100%",
|
||||||
|
width: "100%",
|
||||||
|
"& .MuiDataGrid-root": {
|
||||||
|
border: "none",
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-columnHeaders": {
|
||||||
|
backgroundColor: "#f9fafb",
|
||||||
|
borderBottom: "1px solid #e5e7eb",
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-columnHeader": {
|
||||||
|
backgroundColor: "#f9fafb !important",
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-cell": {
|
||||||
|
borderBottom: "1px solid #f0f0f0",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-virtualScroller": {
|
||||||
|
scrollbarWidth: "thin",
|
||||||
|
"&::-webkit-scrollbar": {
|
||||||
|
width: "8px",
|
||||||
|
height: "8px",
|
||||||
|
},
|
||||||
|
"&::-webkit-scrollbar-track": {
|
||||||
|
background: "#f1f1f1",
|
||||||
|
},
|
||||||
|
"&::-webkit-scrollbar-thumb": {
|
||||||
|
background: "#888",
|
||||||
|
borderRadius: "4px",
|
||||||
|
},
|
||||||
|
"&::-webkit-scrollbar-thumb:hover": {
|
||||||
|
background: "#555",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-toolbarContainer": {
|
||||||
|
backgroundColor: "#f8fafc",
|
||||||
|
borderBottom: "1px solid #e5e7eb",
|
||||||
|
padding: "8px 16px",
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-columnHeaderMenuContainer": {
|
||||||
|
display: "none !important",
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-columnHeaderMenuButton": {
|
||||||
|
display: "none !important",
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-columnHeaderSortIcon": {
|
||||||
|
display: "none !important",
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-footerContainer": {
|
||||||
|
display: "none !important",
|
||||||
|
},
|
||||||
|
"& .MuiDataGrid-columnHeaderTitleContainer": {
|
||||||
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full max-w-none mx-auto p-2" style={{ overflowAnchor: 'none' }}>
|
||||||
|
{/* Header Section */}
|
||||||
|
<div className="mb-2">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">
|
||||||
|
Análise Analítica{filtros.linhaSelecionada ? ` - ${filtros.linhaSelecionada}` : ""}
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
Relatório detalhado de transações
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filtros Externos Ativos - Centralizado */}
|
||||||
|
{(filtrosExternos.dataInicio || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||||
|
<span className="text-sm font-medium text-blue-900">Filtros aplicados pela tabela DRE Filial:</span>
|
||||||
|
<div className="flex flex-wrap gap-2 text-xs text-blue-800">
|
||||||
|
{filtrosExternos.dataInicio && filtrosExternos.dataFim && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||||
|
Período: {filtrosExternos.dataInicio} a {filtrosExternos.dataFim}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{filtrosExternos.codigoGrupo && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||||
|
Grupo: {filtrosExternos.codigoGrupo}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{filtrosExternos.codigoConta && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 rounded">
|
||||||
|
Conta: {filtrosExternos.codigoConta}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Controls */}
|
||||||
|
<div className="flex gap-2 flex-wrap">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{data.length > 0 && (
|
||||||
|
<Button
|
||||||
|
onClick={clearAllFilters}
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
Limpar Filtros
|
||||||
|
{getFilterCount() > 0 && (
|
||||||
|
<span className="bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center font-semibold">
|
||||||
|
{getFilterCount()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
onClick={exportToExcel}
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={sortedAndFilteredData.length === 0}
|
||||||
|
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<Download className="h-4 w-4" />
|
||||||
|
Exportar XLSX
|
||||||
|
</Button>
|
||||||
|
<Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
|
||||||
|
<DrawerTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
|
||||||
|
>
|
||||||
|
<Maximize2 className="h-4 w-4" />
|
||||||
|
Maximizar
|
||||||
|
</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerContent className="max-h-[96vh] h-[96vh]">
|
||||||
|
<DrawerHeader className="flex-shrink-0">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<DrawerTitle className="text-2xl font-bold text-gray-900">
|
||||||
|
Análise Analítica{filtros.linhaSelecionada ? ` - ${filtros.linhaSelecionada}` : ""}
|
||||||
|
</DrawerTitle>
|
||||||
|
<DrawerDescription>
|
||||||
|
Relatório detalhado de transações - Versão Maximizada
|
||||||
|
</DrawerDescription>
|
||||||
|
</div>
|
||||||
|
<DrawerClose asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
|
||||||
|
>
|
||||||
|
<Minimize2 className="h-4 w-4" />
|
||||||
|
Minimizar
|
||||||
|
</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</div>
|
||||||
|
</DrawerHeader>
|
||||||
|
<div className="flex-1 overflow-y-auto px-4 pb-4">
|
||||||
|
{renderAnaliticoContent(true)}
|
||||||
|
</div>
|
||||||
|
</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Conteúdo Principal - Versão Normal */}
|
||||||
|
{renderAnaliticoContent(false)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import Teste from './teste';
|
||||||
|
|
||||||
|
export default function DreFilialPage() {
|
||||||
|
return (
|
||||||
|
<div className="w-full min-h-screen p-1">
|
||||||
|
<Teste />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue