joelson
/
vendaweb-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: criação do footer totalizador na tabela analitica

This commit is contained in:
Alessandro Gonçaalves 2025-10-20 18:57:27 -03:00
parent e160f66eb3
commit d2c468dddb
1 changed files with 204 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
src/app/DRE/analitico.tsx
View File

@ -157,7 +157,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{ {
accessorKey: "conta", accessorKey: "conta",
header: "Nome da Conta", header: "Nome da Conta",
filterFn: "advancedText" filterFn: "advancedText",
}, },
{ {
accessorKey: "valor", accessorKey: "valor",
@ -312,32 +312,50 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
React.useEffect(() => { React.useEffect(() => {
// Usar dados filtrados da tabela em vez dos dados originais // Usar dados filtrados da tabela em vez dos dados originais
const filteredData = table.getRowModel().rows.map(row => row.original); const filteredData = table.getRowModel().rows.map((row) => row.original);
const newTotal = filteredData.reduce((sum, item) => { const newTotal = filteredData.reduce((sum, item) => {
const valor = const valor =
typeof item.valor === "string" ? parseFloat(item.valor) : item.valor; typeof item.valor === "string" ? parseFloat(item.valor) : item.valor;
return sum + (isNaN(valor) ? 0 : valor); return sum + (isNaN(valor) ? 0 : valor);
}, 0); }, 0);
console.log('🔄 Calculando total:', { console.log("🔄 Calculando total:", {
totalRows: table.getRowModel().rows.length, totalRows: table.getRowModel().rows.length,
originalDataLength: data.length, originalDataLength: data.length,
newTotal, newTotal,
columnFilters: columnFilters.length, columnFilters: columnFilters.length,
globalFilter globalFilter,
}); });
setTotalValor(newTotal); setTotalValor(newTotal);
}, [table, data, columnFilters, globalFilter]); }, [table, data, columnFilters, globalFilter]);
// Calcular totais das colunas de valores para o footer - mesmo princípio do Valor Total
const columnTotals = React.useMemo(() => {
// Usar dados filtrados da tabela em vez dos dados originais - MESMA LÓGICA DO totalValor
const filteredData = table.getRowModel().rows.map((row) => row.original);
const valorRealizado = filteredData.reduce((sum, item) => {
const valor =
typeof item.valor === "string" ? parseFloat(item.valor) : item.valor;
return sum + (isNaN(valor) ? 0 : valor);
}, 0);
return {
valorRealizado,
valorPrevisto: 0, // Sempre 0 pois não há dados
valorConfirmado: 0, // Sempre 0 pois não há dados
valorPago: 0, // Sempre 0 pois não há dados
};
}, [table]);
const exportToExcel = () => { const exportToExcel = () => {
if (data.length === 0) return; if (data.length === 0) return;
// Usar dados filtrados da tabela em vez dos dados originais // Usar dados filtrados da tabela em vez dos dados originais
const filteredData = table.getRowModel().rows.map(row => row.original); const filteredData = table.getRowModel().rows.map((row) => row.original);
if (filteredData.length === 0) { if (filteredData.length === 0) {
alert('Nenhum dado filtrado para exportar'); alert("Nenhum dado filtrado para exportar");
return; return;
} }
@ -371,7 +389,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
const resumoData = [ const resumoData = [
{ Métrica: "Total de Registros", Valor: filteredData.length }, { Métrica: "Total de Registros", Valor: filteredData.length },
{ Métrica: "Valor Total", Valor: totalValor }, { Métrica: "Valor Total", Valor: totalValor },
{ Métrica: "Filtros Aplicados", Valor: columnFilters.length > 0 || globalFilter ? "Sim" : "Não" }, {
Métrica: "Filtros Aplicados",
Valor: columnFilters.length > 0 || globalFilter ? "Sim" : "Não",
},
]; ];
const wsResumo = XLSX.utils.json_to_sheet(resumoData); const wsResumo = XLSX.utils.json_to_sheet(resumoData);
@ -383,7 +404,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
const now = new Date(); const now = new Date();
const timestamp = now.toISOString().slice(0, 19).replace(/:/g, "-"); const timestamp = now.toISOString().slice(0, 19).replace(/:/g, "-");
const hasFilters = columnFilters.length > 0 || globalFilter; const hasFilters = columnFilters.length > 0 || globalFilter;
const fileName = `analitico${hasFilters ? '_filtrado' : ''}_${timestamp}.xlsx`; const fileName = `analitico${
hasFilters ? "_filtrado" : ""
}_${timestamp}.xlsx`;
// Fazer download // Fazer download
XLSX.writeFile(wb, fileName); XLSX.writeFile(wb, fileName);
@ -472,21 +495,37 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{/* Table Header */} {/* Table Header */}
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20"> <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20">
<div className="flex items-center px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wide"> <div className="flex items-center px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wide">
<div className="w-[140px] whitespace-nowrap">Data de Vencimento</div> <div className="w-[140px] whitespace-nowrap">
Data de Vencimento
</div>
<div className="w-[120px] whitespace-nowrap">Data de Caixa</div> <div className="w-[120px] whitespace-nowrap">Data de Caixa</div>
<div className="w-[100px] whitespace-nowrap">Entidade</div> <div className="w-[100px] whitespace-nowrap">Entidade</div>
<div className="w-[160px] whitespace-nowrap">Código do Fornecedor</div> <div className="w-[160px] whitespace-nowrap">
<div className="w-[220px] whitespace-nowrap">Nome do Fornecedor</div> Código do Fornecedor
</div>
<div className="w-[220px] whitespace-nowrap">
Nome do Fornecedor
</div>
<div className="w-[140px] whitespace-nowrap">Centro de Custo</div> <div className="w-[140px] whitespace-nowrap">Centro de Custo</div>
<div className="w-[130px] whitespace-nowrap">Código da Conta</div> <div className="w-[130px] whitespace-nowrap">Código da Conta</div>
<div className="w-[160px] whitespace-nowrap">Nome da Conta</div> <div className="w-[160px] whitespace-nowrap">Nome da Conta</div>
<div className="w-[130px] whitespace-nowrap text-right">Valor Realizado</div> <div className="w-[130px] whitespace-nowrap text-right">
<div className="w-[120px] whitespace-nowrap text-right">Valor Previsto</div> Valor Realizado
<div className="w-[130px] whitespace-nowrap text-right">Valor Confirmado</div> </div>
<div className="w-[110px] whitespace-nowrap text-right">Valor Pago</div> <div className="w-[120px] whitespace-nowrap text-right">
Valor Previsto
</div>
<div className="w-[130px] whitespace-nowrap text-right">
Valor Confirmado
</div>
<div className="w-[110px] whitespace-nowrap text-right">
Valor Pago
</div>
<div className="w-[200px] whitespace-nowrap">Histórico</div> <div className="w-[200px] whitespace-nowrap">Histórico</div>
<div className="w-[200px] whitespace-nowrap">Histórico 2</div> <div className="w-[200px] whitespace-nowrap">Histórico 2</div>
<div className="w-[50px] whitespace-nowrap">Número do Lançamento</div> <div className="w-[50px] whitespace-nowrap">
Número do Lançamento
</div>
</div> </div>
</div> </div>
@ -550,7 +589,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
"pt-BR" "pt-BR"
)} )}
</div> </div>
<div className="w-[100px] text-gray-500 whitespace-nowrap">-</div> <div className="w-[100px] text-gray-500 whitespace-nowrap">
-
</div>
<div className="w-[160px] font-medium text-gray-900 whitespace-nowrap"> <div className="w-[160px] font-medium text-gray-900 whitespace-nowrap">
{row.original.codigo_fornecedor} {row.original.codigo_fornecedor}
</div> </div>
@ -584,16 +625,30 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
currency: "BRL", currency: "BRL",
}).format(row.original.valor)} }).format(row.original.valor)}
</div> </div>
<div className="w-[120px] text-gray-500 text-right whitespace-nowrap">-</div> <div className="w-[120px] text-gray-500 text-right whitespace-nowrap">
<div className="w-[130px] text-gray-500 text-right whitespace-nowrap">-</div> -
<div className="w-[110px] text-gray-500 text-right whitespace-nowrap">-</div> </div>
<div className="w-[200px] text-gray-700 truncate" title={row.original.historico}> <div className="w-[130px] text-gray-500 text-right whitespace-nowrap">
-
</div>
<div className="w-[110px] text-gray-500 text-right whitespace-nowrap">
-
</div>
<div
className="w-[200px] text-gray-700 truncate"
title={row.original.historico}
>
{row.original.historico} {row.original.historico}
</div> </div>
<div className="w-[200px] text-gray-700 truncate" title={row.original.historico2}> <div
className="w-[200px] text-gray-700 truncate"
title={row.original.historico2}
>
{row.original.historico2} {row.original.historico2}
</div> </div>
<div className="w-[50px] text-gray-500 whitespace-nowrap">-</div> <div className="w-[50px] text-gray-500 whitespace-nowrap">
-
</div>
</div> </div>
); );
})} })}
@ -601,59 +656,88 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
)} )}
</div> </div>
{/* Summary Footer - Integrado */} {/* Footer com Totalizador das Colunas */}
{data.length > 0 && ( {data.length > 0 && (
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-t border-blue-200 p-6"> <div className="bg-gradient-to-r from-gray-50 to-gray-100 border-t border-gray-200 sticky bottom-0 z-10">
<div className="flex justify-between items-center"> <div className="flex items-center px-4 py-3 text-sm font-semibold text-gray-900">
<div className="flex items-center gap-4"> <div className="w-[140px] whitespace-nowrap text-gray-600">
{/* <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center"> TOTAL: {table.getRowModel().rows.length} registros
<svg
className="w-6 h-6 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
/>
</svg>
</div> */}
<div>
<h3 className="text-lg font-bold text-gray-900">
Total de Registros:{" "}
<span className="text-blue-600">
{table.getRowModel().rows.length}
</span>
</h3>
<p className="text-sm text-gray-600">
Transações encontradas
</p>
</div> </div>
</div> <div className="w-[120px] whitespace-nowrap"></div>
<div className="text-right"> <div className="w-[100px] whitespace-nowrap"></div>
<h3 className="text-lg font-bold"> <div className="w-[160px] whitespace-nowrap"></div>
<span <div className="w-[220px] whitespace-nowrap"></div>
className={ <div className="w-[140px] whitespace-nowrap"></div>
totalValor < 0 ? "text-red-600" : "text-green-600" <div className="w-[130px] whitespace-nowrap"></div>
} <div className="w-[160px] whitespace-nowrap"></div>
<div
className={`w-[130px] text-right font-bold whitespace-nowrap ${
columnTotals.valorRealizado < 0
? "text-red-600"
: "text-green-600"
}`}
> >
Valor Total:{" "}
{new Intl.NumberFormat("pt-BR", { {new Intl.NumberFormat("pt-BR", {
style: "currency", style: "currency",
currency: "BRL", currency: "BRL",
}).format(totalValor)} }).format(columnTotals.valorRealizado)}
</span>
</h3>
<p className="text-sm text-gray-600">
Soma de todos os valores
</p>
</div> </div>
<div className="w-[120px] text-right whitespace-nowrap text-gray-500">
-
</div>
<div className="w-[130px] text-right whitespace-nowrap text-gray-500">
-
</div>
<div className="w-[110px] text-right whitespace-nowrap text-gray-500">
-
</div>
<div className="w-[200px] whitespace-nowrap"></div>
<div className="w-[200px] whitespace-nowrap"></div>
<div className="w-[50px] whitespace-nowrap"></div>
</div> </div>
</div> </div>
)} )}
{/* Summary Footer - Integrado */}
{
// data.length > 0 && (
// <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-t border-blue-200 p-6">
// <div className="flex justify-between items-center">
// <div className="flex items-center gap-4">
// <div>
// <h3 className="text-lg font-bold text-gray-900">
// Total de Registros:{" "}
// <span className="text-blue-600">
// {table.getRowModel().rows.length}
// </span>
// </h3>
// <p className="text-sm text-gray-600">
// Transações encontradas
// </p>
// </div>
// </div>
// <div className="text-right">
// <h3 className="text-lg font-bold">
// <span
// className={
// totalValor < 0 ? "text-red-600" : "text-green-600"
// }
// >
// Valor Total:{" "}
// {new Intl.NumberFormat("pt-BR", {
// style: "currency",
// currency: "BRL",
// }).format(totalValor)}
// </span>
// </h3>
// <p className="text-sm text-gray-600">
// Soma de todos os valores
// </p>
// </div>
// </div>
// </div>
// )
}
</div> </div>
</div> </div>