fix: calculo do dao card totalizador
This commit is contained in:
parent
35aca238ea
commit
f342929539
|
|
@ -284,12 +284,28 @@ 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>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue