fix: ajuste no botão limpar filtros

This commit is contained in:
Alessandro Gonçaalves 2025-10-23 11:39:13 -03:00
parent 0679d9d0cf
commit 833715876b
1 changed files with 55 additions and 13 deletions

View File

@ -308,6 +308,26 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
})); }));
}, []); }, []);
// Função para contar filtros aplicados
const getFilterCount = React.useCallback(() => {
let count = 0;
// Contar filtros de coluna
count += Object.keys(columnFilters).length;
// Contar filtro global
if (globalFilter && globalFilter.trim() !== "") {
count += 1;
}
// Contar filtros externos (se aplicáveis)
if (filtrosExternos.codigoConta || filtrosExternos.centroCusto) {
count += 1;
}
return count;
}, [columnFilters, globalFilter, filtrosExternos]);
// Função para limpar todos os filtros // Função para limpar todos os filtros
const clearAllFilters = React.useCallback(() => { const clearAllFilters = React.useCallback(() => {
setColumnFilters({}); setColumnFilters({});
@ -477,7 +497,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
currency: "BRL", currency: "BRL",
}).format(numValue); }).format(numValue);
return ( return (
<span className={numValue < 0 ? "text-red-600" : "text-gray-900"}> <span className={`text-sm font-semibold ${numValue < 0 ? "text-red-600" : "text-gray-900"}`}>
{formatted} {formatted}
</span> </span>
); );
@ -501,7 +521,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
currency: "BRL", currency: "BRL",
}).format(numValue); }).format(numValue);
return ( return (
<span className={numValue < 0 ? "text-red-600" : "text-gray-900"}> <span className={`text-sm font-semibold ${numValue < 0 ? "text-red-600" : "text-gray-900"}`}>
{formatted} {formatted}
</span> </span>
); );
@ -525,7 +545,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
currency: "BRL", currency: "BRL",
}).format(numValue); }).format(numValue);
return ( return (
<span className={numValue < 0 ? "text-red-600" : "text-gray-900"}> <span className={`text-sm font-semibold ${numValue < 0 ? "text-red-600" : "text-gray-900"}`}>
{formatted} {formatted}
</span> </span>
); );
@ -549,7 +569,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
currency: "BRL", currency: "BRL",
}).format(numValue); }).format(numValue);
return ( return (
<span className={numValue < 0 ? "text-red-600" : "text-gray-900"}> <span className={`text-sm font-semibold ${numValue < 0 ? "text-red-600" : "text-gray-900"}`}>
{formatted} {formatted}
</span> </span>
); );
@ -644,6 +664,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
}); });
}, [filteredData, columnSorts]); }, [filteredData, columnSorts]);
// Calcular valor total dos dados filtrados
const valorTotal = React.useMemo(() => {
return sortedAndFilteredData.reduce((sum, item) => sum + (Number(item.valor) || 0), 0);
}, [sortedAndFilteredData]);
// Exportação XLSX // Exportação XLSX
const exportToExcel = () => { const exportToExcel = () => {
@ -675,9 +699,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
const ws = XLSX.utils.json_to_sheet(exportData); const ws = XLSX.utils.json_to_sheet(exportData);
const resumoData = [ const resumoData = [
{ Métrica: "Total de Registros", Valor: data.length }, { Métrica: "Total de Registros", Valor: sortedAndFilteredData.length },
{ Métrica: "Valor Total", Valor: "Calculado pelo DataGrid" }, { Métrica: "Valor Total", Valor: valorTotal },
{ Métrica: "Filtros Aplicados", Valor: "Sim" }, { Métrica: "Filtros Aplicados", Valor: Object.keys(columnFilters).length > 0 ? "Sim" : "Não" },
]; ];
const wsResumo = XLSX.utils.json_to_sheet(resumoData); const wsResumo = XLSX.utils.json_to_sheet(resumoData);
@ -768,10 +792,15 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<Button <Button
variant="outline" variant="outline"
onClick={clearFilters} onClick={clearFilters}
className="bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700" className="bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700 flex items-center gap-2"
> >
<X className="w-4 h-4 mr-2" /> <X className="w-4 h-4" />
Limpar Filtros Limpar Filtros
{getFilterCount() > 0 && (
<span className="bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-semibold">
{getFilterCount()}
</span>
)}
</Button> </Button>
)} )}
{data.length > 0 && ( {data.length > 0 && (
@ -784,6 +813,11 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
Limpar Filtros 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>
<Button <Button
onClick={exportToExcel} onClick={exportToExcel}
@ -807,11 +841,14 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<h2 className="text-lg font-semibold"> <h2 className="text-lg font-semibold">
Total de Registros: <span className="text-blue-600">{data.length}</span> Total de Registros: <span className="text-blue-600">{sortedAndFilteredData.length}</span>
</h2> </h2>
<div className="text-sm text-gray-600"> <div className="text-sm text-gray-600">
Valor Total: <span className="font-bold text-green-600"> Valor Total: <span className={`font-bold ${valorTotal < 0 ? 'text-red-600' : 'text-green-600'}`}>
Calculado pelo DataGrid Premium {new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
}).format(valorTotal)}
</span> </span>
</div> </div>
</div> </div>
@ -1053,9 +1090,14 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<Button <Button
variant="outline" variant="outline"
onClick={clearFilters} onClick={clearFilters}
className="flex-1 border-gray-300 text-gray-700 hover:bg-gray-50" className="flex-1 border-gray-300 text-gray-700 hover:bg-gray-50 flex items-center justify-center gap-2"
> >
Limpar filtros avançados Limpar filtros avançados
{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>
<Button <Button
onClick={applyFilters} onClick={applyFilters}