fix: filtro
This commit is contained in:
Alessandro Gonçaalves
parent
7758ad5abe
commit
1de1031fbc
|
|
@ -1,6 +1,8 @@
|
|||
{
|
||||
"extends": "next/core-web-vitals",
|
||||
"rules": {
|
||||
"@typescript-eslint/no-explicit-any": "off"
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/no-unused-vars": "off",
|
||||
"@typescript-eslint/no-empty-object-type": "off"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -114,7 +114,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{
|
||||
accessorKey: "data_competencia",
|
||||
header: "Data Comp.",
|
||||
cell: ({ getValue }: any) => {
|
||||
filterFn: "advancedText",
|
||||
cell: ({ getValue }: { getValue: () => string }) => {
|
||||
const value = getValue();
|
||||
return new Date(value).toLocaleDateString('pt-BR');
|
||||
}
|
||||
|
|
@ -122,7 +123,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{
|
||||
accessorKey: "data_vencimento",
|
||||
header: "Data Venc.",
|
||||
cell: ({ getValue }: any) => {
|
||||
filterFn: "advancedText",
|
||||
cell: ({ getValue }: { getValue: () => string }) => {
|
||||
const value = getValue();
|
||||
return new Date(value).toLocaleDateString('pt-BR');
|
||||
}
|
||||
|
|
@ -130,20 +132,22 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{
|
||||
accessorKey: "data_caixa",
|
||||
header: "Data Caixa",
|
||||
cell: ({ getValue }: any) => {
|
||||
filterFn: "advancedText",
|
||||
cell: ({ getValue }: { getValue: () => string }) => {
|
||||
const value = getValue();
|
||||
return new Date(value).toLocaleDateString('pt-BR');
|
||||
}
|
||||
},
|
||||
{ accessorKey: "codigo_fornecedor", header: "Cód. Fornec." },
|
||||
{ accessorKey: "nome_fornecedor", header: "Fornecedor" },
|
||||
{ accessorKey: "codigo_centrocusto", header: "Cód. Centro" },
|
||||
{ accessorKey: "codigo_conta", header: "Cód. Conta" },
|
||||
{ accessorKey: "conta", header: "Conta" },
|
||||
{ accessorKey: "codigo_fornecedor", header: "Cód. Fornec.", filterFn: "advancedText" },
|
||||
{ accessorKey: "nome_fornecedor", header: "Fornecedor", filterFn: "advancedText" },
|
||||
{ accessorKey: "codigo_centrocusto", header: "Cód. Centro", filterFn: "advancedText" },
|
||||
{ accessorKey: "codigo_conta", header: "Cód. Conta", filterFn: "advancedText" },
|
||||
{ accessorKey: "conta", header: "Conta", filterFn: "advancedText" },
|
||||
{
|
||||
accessorKey: "valor",
|
||||
header: "Valor",
|
||||
cell: ({ getValue }: any) => {
|
||||
filterFn: "advancedText",
|
||||
cell: ({ getValue }: { getValue: () => number }) => {
|
||||
const value = getValue();
|
||||
const formatted = new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
|
|
@ -157,9 +161,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
);
|
||||
}
|
||||
},
|
||||
{ accessorKey: "historico", header: "Histórico" },
|
||||
{ accessorKey: "historico2", header: "Histórico 2" },
|
||||
{ accessorKey: "recnum", header: "Recnum" },
|
||||
{ accessorKey: "historico", header: "Histórico", filterFn: "advancedText" },
|
||||
{ accessorKey: "historico2", header: "Histórico 2", filterFn: "advancedText" },
|
||||
{ accessorKey: "recnum", header: "Recnum", filterFn: "advancedText" },
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
|
@ -228,9 +232,15 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
}, []);
|
||||
|
||||
const applyFilters = () => {
|
||||
const filters = conditions
|
||||
.filter((c) => c.column && (c.operator === "empty" || c.operator === "notEmpty" || (c.value ?? "") !== ""))
|
||||
.map((c) => ({ id: c.column, value: { operator: c.operator, value: c.value } }));
|
||||
const validConditions = conditions.filter((c) =>
|
||||
c.column && (c.operator === "empty" || c.operator === "notEmpty" || (c.value ?? "") !== "")
|
||||
);
|
||||
|
||||
const filters = validConditions.map((c) => ({
|
||||
id: c.column,
|
||||
value: { operator: c.operator, value: c.value }
|
||||
}));
|
||||
|
||||
setColumnFilters(filters);
|
||||
setOpen(false);
|
||||
};
|
||||
|
|
@ -336,16 +346,16 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex-1 bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||||
<table className="min-w-full border-collapse table-fixed">
|
||||
<thead
|
||||
className={`bg-gradient-to-r from-blue-50 to-indigo-50 sticky top-0 z-20 transition-all duration-200 ${isScrolled ? "shadow-lg" : "shadow-sm"}`}
|
||||
>
|
||||
{table.getHeaderGroups().map((hg: any) => (
|
||||
{table.getHeaderGroups().map((hg) => (
|
||||
<tr key={hg.id}>
|
||||
{hg.headers.map((header: any) => {
|
||||
{hg.headers.map((header) => {
|
||||
const sorted = header.column.getIsSorted();
|
||||
return (
|
||||
<th
|
||||
|
|
@ -356,7 +366,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-semibold text-gray-800 text-sm uppercase tracking-wide truncate">
|
||||
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</span>
|
||||
</span>
|
||||
<div className="flex flex-col flex-shrink-0">
|
||||
{sorted === "asc" ? (
|
||||
<ChevronUp className="w-4 h-4 text-blue-600" />
|
||||
|
|
@ -367,9 +377,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
<ChevronUp className="w-3 h-3 -mb-1" />
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
|
|
@ -389,7 +399,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
<span className="text-gray-500 font-medium">Carregando dados analíticos...</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : virtualRows.length === 0 ? (
|
||||
|
|
@ -400,13 +410,13 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-gray-500 font-medium">Nenhum dado analítico encontrado para os filtros aplicados.</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
virtualRows.map((virtualRow: any) => {
|
||||
virtualRows.map((virtualRow) => {
|
||||
const row = table.getRowModel().rows[virtualRow.index];
|
||||
return (
|
||||
<tr
|
||||
|
|
@ -422,7 +432,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
tableLayout: "fixed",
|
||||
}}
|
||||
>
|
||||
{row.getVisibleCells().map((cell: any, cellIndex: number) => (
|
||||
{row.getVisibleCells().map((cell, cellIndex) => (
|
||||
<td
|
||||
key={cell.id}
|
||||
className={`px-4 py-3 text-sm whitespace-nowrap overflow-hidden ${
|
||||
|
|
@ -430,11 +440,11 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
} ${
|
||||
cell.column.id === 'valor' ? 'text-right font-semibold' : ''
|
||||
}`}
|
||||
title={cell.getValue()}
|
||||
title={String(cell.getValue())}
|
||||
>
|
||||
<div className="truncate">
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
|
|
@ -446,16 +456,16 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{data.length > 0 && (
|
||||
{data.length > 0 && (
|
||||
<div className="mt-6 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl shadow-sm">
|
||||
<div className="flex justify-between items-center">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -469,13 +479,13 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
style: 'currency',
|
||||
currency: 'BRL',
|
||||
}).format(totalValor)}
|
||||
</span>
|
||||
</h3>
|
||||
</span>
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">Soma de todos os valores</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-2xl w-full mx-4 bg-white">
|
||||
|
|
@ -502,11 +512,11 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
<SelectValue placeholder="Selecione a coluna" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{columns.map((col: any) => (
|
||||
<SelectItem key={col.accessorKey} value={col.accessorKey}>
|
||||
{col.header}
|
||||
</SelectItem>
|
||||
))}
|
||||
{columns.map((col) => (
|
||||
<SelectItem key={col.accessorKey} value={col.accessorKey}>
|
||||
{col.header}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
@ -589,7 +599,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
Adicionar condição
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex gap-3 pt-6 border-t border-gray-200">
|
||||
<Button
|
||||
|
|
|
|||
Loading…
Reference in New Issue