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

fix: botões de filtro

This commit is contained in:
Alessandro Gonçaalves 2025-10-20 17:26:14 -03:00
parent 6e9a3ad4b9
commit dd5f92825c
1 changed files with 69 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@ import {
SelectContent, SelectContent,
SelectItem, SelectItem,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { Download } from "lucide-react"; import { Download, Filter, X } from "lucide-react";
import * as XLSX from 'xlsx'; import * as XLSX from 'xlsx';
interface AnaliticoItem { interface AnaliticoItem {
@ -255,6 +255,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
const clearFilters = () => { const clearFilters = () => {
setConditions([{ column: "", operator: "contains", value: "" }]); setConditions([{ column: "", operator: "contains", value: "" }]);
setColumnFilters([]); setColumnFilters([]);
setGlobalFilter("");
}; };
const totalValor = data.reduce((sum, item) => { const totalValor = data.reduce((sum, item) => {
@ -328,33 +329,44 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
</div> </div>
{/* Controls */} {/* Controls */}
<div className="flex gap-3 flex-wrap"> <div className="flex gap-3 flex-wrap">
<Input <Input
placeholder="Filtrar tudo..." placeholder="Filtrar tudo..."
value={globalFilter ?? ""} value={globalFilter ?? ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
className="w-64 bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500" className="w-64 bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500"
/> />
<Button <Button
variant="outline" variant="outline"
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700" className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
> >
Filtros Avançados <Filter className="w-4 h-4 mr-2" />
</Button> Filtros Avançados
{data.length > 0 && ( </Button>
<Button {(columnFilters.length > 0 || globalFilter) && (
onClick={exportToExcel} <Button
variant="outline" variant="outline"
size="sm" onClick={clearFilters}
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700" className="bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
> >
<Download className="h-4 w-4" /> <X className="w-4 h-4 mr-2" />
Exportar XLSX Limpar Filtros
</Button> </Button>
)} )}
</div> {data.length > 0 && (
<Button
onClick={exportToExcel}
variant="outline"
size="sm"
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" />
Exportar XLSX
</Button>
)}
</div>
</div> </div>
{/* Table Container */} {/* Table Container */}
@ -431,39 +443,40 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
)} )}
</div> </div>
</div>
</div> {/* Summary Footer - Integrado */}
{/* Summary Footer */} {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="mt-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-6"> <div className="flex justify-between items-center">
<div className="flex justify-between items-center"> <div className="flex items-center gap-4">
<div className="flex items-center gap-4"> <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
<div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center"> <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
<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 002 2z" /> </svg>
</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> <div className="text-right">
<h3 className="text-lg font-bold text-gray-900"> <h3 className="text-lg font-bold">
Total de Registros: <span className="text-blue-600">{table.getRowModel().rows.length}</span> <span className={totalValor < 0 ? 'text-red-600' : 'text-green-600'}>
</h3> Valor Total: {new Intl.NumberFormat('pt-BR', {
<p className="text-sm text-gray-600">Transações encontradas</p> 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 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>
{/* Advanced Filters Dialog */} {/* Advanced Filters Dialog */}
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>