fix: botões de filtro
This commit is contained in:
Alessandro Gonçaalves
parent
6e9a3ad4b9
commit
dd5f92825c
|
|
@ -24,7 +24,7 @@ import {
|
|||
SelectContent,
|
||||
SelectItem,
|
||||
} from "@/components/ui/select";
|
||||
import { Download } from "lucide-react";
|
||||
import { Download, Filter, X } from "lucide-react";
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
interface AnaliticoItem {
|
||||
|
|
@ -255,6 +255,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
const clearFilters = () => {
|
||||
setConditions([{ column: "", operator: "contains", value: "" }]);
|
||||
setColumnFilters([]);
|
||||
setGlobalFilter("");
|
||||
};
|
||||
|
||||
const totalValor = data.reduce((sum, item) => {
|
||||
|
|
@ -328,33 +329,44 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<Input
|
||||
placeholder="Filtrar tudo..."
|
||||
value={globalFilter ?? ""}
|
||||
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"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setOpen(true)}
|
||||
className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
|
||||
>
|
||||
Filtros Avançados
|
||||
</Button>
|
||||
{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>
|
||||
{/* Controls */}
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<Input
|
||||
placeholder="Filtrar tudo..."
|
||||
value={globalFilter ?? ""}
|
||||
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"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setOpen(true)}
|
||||
className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
|
||||
>
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filtros Avançados
|
||||
</Button>
|
||||
{(columnFilters.length > 0 || globalFilter) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={clearFilters}
|
||||
className="bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Limpar Filtros
|
||||
</Button>
|
||||
)}
|
||||
{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>
|
||||
|
||||
{/* Table Container */}
|
||||
|
|
@ -431,39 +443,40 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Summary Footer */}
|
||||
{data.length > 0 && (
|
||||
<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 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">
|
||||
<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 002 2z" />
|
||||
</svg>
|
||||
|
||||
{/* 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 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">
|
||||
<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>
|
||||
<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 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 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>
|
||||
|
||||
{/* Advanced Filters Dialog */}
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue