fix: calculo do dao card totalizador

This commit is contained in:
Alessandro Gonçaalves 2025-10-20 17:43:04 -03:00
parent 35aca238ea
commit f342929539
1 changed files with 57 additions and 41 deletions

View File

@ -284,11 +284,27 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
setGlobalFilter(""); setGlobalFilter("");
}; };
const totalValor = data.reduce((sum, item) => { const [totalValor, setTotalValor] = React.useState(0);
React.useEffect(() => {
// Usar dados filtrados da tabela em vez dos dados originais
const filteredData = table.getRowModel().rows.map(row => row.original);
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:', {
totalRows: table.getRowModel().rows.length,
originalDataLength: data.length,
newTotal,
columnFilters: columnFilters.length,
globalFilter
});
setTotalValor(newTotal);
}, [table, data, columnFilters, globalFilter]);
const exportToExcel = () => { const exportToExcel = () => {
if (data.length === 0) return; if (data.length === 0) return;
@ -402,17 +418,17 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
Limpar Filtros Limpar Filtros
</Button> </Button>
)} )}
{data.length > 0 && ( {data.length > 0 && (
<Button <Button
onClick={exportToExcel} onClick={exportToExcel}
variant="outline" variant="outline"
size="sm" size="sm"
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700" className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700"
> >
<Download className="h-4 w-4" /> <Download className="h-4 w-4" />
Exportar XLSX Exportar XLSX
</Button> </Button>
)} )}
</div> </div>
</div> </div>
@ -432,8 +448,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<div className="col-span-2">Conta</div> <div className="col-span-2">Conta</div>
<div className="col-span-1 text-right">Valor</div> <div className="col-span-1 text-right">Valor</div>
<div className="col-span-1">Recnum</div> <div className="col-span-1">Recnum</div>
</div>
</div> </div>
</div>
{/* Table Body */} {/* Table Body */}
<div <div
@ -449,8 +465,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<div className="text-center"> <div className="text-center">
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div> <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
<p className="text-gray-500">Carregando dados...</p> <p className="text-gray-500">Carregando dados...</p>
</div> </div>
</div> </div>
) : virtualRows.length === 0 ? ( ) : virtualRows.length === 0 ? (
<div className="flex items-center justify-center h-64"> <div className="flex items-center justify-center h-64">
<div className="text-center"> <div className="text-center">
@ -468,10 +484,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/> />
</svg> </svg>
</div> </div>
<p className="text-gray-500">Nenhum dado encontrado</p> <p className="text-gray-500">Nenhum dado encontrado</p>
</div> </div>
</div> </div>
) : ( ) : (
<div <div
className="relative" className="relative"
@ -489,38 +505,38 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{new Date( {new Date(
row.original.data_competencia row.original.data_competencia
).toLocaleDateString("pt-BR")} ).toLocaleDateString("pt-BR")}
</div> </div>
<div className="col-span-1 text-gray-600"> <div className="col-span-1 text-gray-600">
{new Date( {new Date(
row.original.data_vencimento row.original.data_vencimento
).toLocaleDateString("pt-BR")} ).toLocaleDateString("pt-BR")}
</div> </div>
<div className="col-span-1 text-gray-600"> <div className="col-span-1 text-gray-600">
{new Date(row.original.data_caixa).toLocaleDateString( {new Date(row.original.data_caixa).toLocaleDateString(
"pt-BR" "pt-BR"
)} )}
</div> </div>
<div className="col-span-1 font-medium text-gray-900"> <div className="col-span-1 font-medium text-gray-900">
{row.original.codigo_fornecedor} {row.original.codigo_fornecedor}
</div> </div>
<div <div
className="col-span-2 text-gray-700 truncate" className="col-span-2 text-gray-700 truncate"
title={row.original.nome_fornecedor} title={row.original.nome_fornecedor}
> >
{row.original.nome_fornecedor} {row.original.nome_fornecedor}
</div> </div>
<div className="col-span-1 text-gray-600"> <div className="col-span-1 text-gray-600">
{row.original.codigo_centrocusto} {row.original.codigo_centrocusto}
</div> </div>
<div className="col-span-1 text-gray-600"> <div className="col-span-1 text-gray-600">
{row.original.codigo_conta} {row.original.codigo_conta}
</div> </div>
<div <div
className="col-span-2 text-gray-700 truncate" className="col-span-2 text-gray-700 truncate"
title={row.original.conta} title={row.original.conta}
> >
{row.original.conta} {row.original.conta}
</div> </div>
<div <div
className={`col-span-1 text-right font-semibold ${ className={`col-span-1 text-right font-semibold ${
row.original.valor < 0 row.original.valor < 0
@ -532,16 +548,16 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
style: "currency", style: "currency",
currency: "BRL", currency: "BRL",
}).format(row.original.valor)} }).format(row.original.valor)}
</div> </div>
<div className="col-span-1 text-gray-500"> <div className="col-span-1 text-gray-500">
{row.original.recnum} {row.original.recnum}
</div> </div>
</div> </div>
); );
})} })}
</div> </div>
)} )}
</div> </div>
{/* Summary Footer - Integrado */} {/* Summary Footer - Integrado */}
{data.length > 0 && ( {data.length > 0 && (
@ -573,12 +589,12 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600">
Transações encontradas Transações encontradas
</p> </p>
</div> </div>
</div> </div>
<div className="text-right"> <div className="text-right">
<h3 className="text-lg font-bold"> <h3 className="text-lg font-bold">
<span <span
className={ className={
totalValor < 0 ? "text-red-600" : "text-green-600" totalValor < 0 ? "text-red-600" : "text-green-600"
} }
> >
@ -587,14 +603,14 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
style: "currency", style: "currency",
currency: "BRL", currency: "BRL",
}).format(totalValor)} }).format(totalValor)}
</span> </span>
</h3> </h3>
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600">
Soma de todos os valores Soma de todos os valores
</p> </p>
</div> </div>
</div>
</div> </div>
</div>
)} )}
</div> </div>
</div> </div>
@ -640,7 +656,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="flex-1"> <div className="flex-1">
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700 mb-1">
@ -668,7 +684,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<SelectItem value="notEmpty">não está vazio</SelectItem> <SelectItem value="notEmpty">não está vazio</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
{!( {!(
cond.operator === "empty" || cond.operator === "notEmpty" cond.operator === "empty" || cond.operator === "notEmpty"
@ -687,7 +703,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
placeholder="Digite o valor" placeholder="Digite o valor"
className="w-full bg-white border-gray-300" className="w-full bg-white border-gray-300"
/> />
</div> </div>
)} )}
{conditions.length > 1 && ( {conditions.length > 1 && (
@ -703,8 +719,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
> >
</Button> </Button>
</div> </div>
)} )}
</div> </div>
))} ))}