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

fix: filtro

This commit is contained in:
Alessandro Gonçaalves 2025-10-20 13:03:14 -03:00
parent 7758ad5abe
commit 1de1031fbc
2 changed files with 56 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.json
View File

@ -1,6 +1,8 @@
{ {
"extends": "next/core-web-vitals", "extends": "next/core-web-vitals",
"rules": { "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"
} }
} }

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

@ -114,7 +114,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{ {
accessorKey: "data_competencia", accessorKey: "data_competencia",
header: "Data Comp.", header: "Data Comp.",
cell: ({ getValue }: any) => { filterFn: "advancedText",
cell: ({ getValue }: { getValue: () => string }) => {
const value = getValue(); const value = getValue();
return new Date(value).toLocaleDateString('pt-BR'); return new Date(value).toLocaleDateString('pt-BR');
} }
@ -122,7 +123,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{ {
accessorKey: "data_vencimento", accessorKey: "data_vencimento",
header: "Data Venc.", header: "Data Venc.",
cell: ({ getValue }: any) => { filterFn: "advancedText",
cell: ({ getValue }: { getValue: () => string }) => {
const value = getValue(); const value = getValue();
return new Date(value).toLocaleDateString('pt-BR'); return new Date(value).toLocaleDateString('pt-BR');
} }
@ -130,20 +132,22 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{ {
accessorKey: "data_caixa", accessorKey: "data_caixa",
header: "Data Caixa", header: "Data Caixa",
cell: ({ getValue }: any) => { filterFn: "advancedText",
cell: ({ getValue }: { getValue: () => string }) => {
const value = getValue(); const value = getValue();
return new Date(value).toLocaleDateString('pt-BR'); return new Date(value).toLocaleDateString('pt-BR');
} }
}, },
{ accessorKey: "codigo_fornecedor", header: "Cód. Fornec." }, { accessorKey: "codigo_fornecedor", header: "Cód. Fornec.", filterFn: "advancedText" },
{ accessorKey: "nome_fornecedor", header: "Fornecedor" }, { accessorKey: "nome_fornecedor", header: "Fornecedor", filterFn: "advancedText" },
{ accessorKey: "codigo_centrocusto", header: "Cód. Centro" }, { accessorKey: "codigo_centrocusto", header: "Cód. Centro", filterFn: "advancedText" },
{ accessorKey: "codigo_conta", header: "Cód. Conta" }, { accessorKey: "codigo_conta", header: "Cód. Conta", filterFn: "advancedText" },
{ accessorKey: "conta", header: "Conta" }, { accessorKey: "conta", header: "Conta", filterFn: "advancedText" },
{ {
accessorKey: "valor", accessorKey: "valor",
header: "Valor", header: "Valor",
cell: ({ getValue }: any) => { filterFn: "advancedText",
cell: ({ getValue }: { getValue: () => number }) => {
const value = getValue(); const value = getValue();
const formatted = new Intl.NumberFormat('pt-BR', { const formatted = new Intl.NumberFormat('pt-BR', {
style: 'currency', style: 'currency',
@ -157,9 +161,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
); );
} }
}, },
{ accessorKey: "historico", header: "Histórico" }, { accessorKey: "historico", header: "Histórico", filterFn: "advancedText" },
{ accessorKey: "historico2", header: "Histórico 2" }, { accessorKey: "historico2", header: "Histórico 2", filterFn: "advancedText" },
{ accessorKey: "recnum", header: "Recnum" }, { accessorKey: "recnum", header: "Recnum", filterFn: "advancedText" },
], ],
[] []
); );
@ -228,9 +232,15 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
}, []); }, []);
const applyFilters = () => { const applyFilters = () => {
const filters = conditions const validConditions = conditions.filter((c) =>
.filter((c) => c.column && (c.operator === "empty" || c.operator === "notEmpty" || (c.value ?? "") !== "")) c.column && (c.operator === "empty" || c.operator === "notEmpty" || (c.value ?? "") !== "")
.map((c) => ({ id: c.column, value: { operator: c.operator, value: c.value } })); );
const filters = validConditions.map((c) => ({
id: c.column,
value: { operator: c.operator, value: c.value }
}));
setColumnFilters(filters); setColumnFilters(filters);
setOpen(false); setOpen(false);
}; };
@ -336,16 +346,16 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</Button> </Button>
)} )}
</div> </div>
</div> </div>
<div className="relative flex-1 bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden"> <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"> <table className="min-w-full border-collapse table-fixed">
<thead <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"}`} 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}> <tr key={hg.id}>
{hg.headers.map((header: any) => { {hg.headers.map((header) => {
const sorted = header.column.getIsSorted(); const sorted = header.column.getIsSorted();
return ( return (
<th <th
@ -356,7 +366,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<span className="font-semibold text-gray-800 text-sm uppercase tracking-wide truncate"> <span className="font-semibold text-gray-800 text-sm uppercase tracking-wide truncate">
{flexRender(header.column.columnDef.header, header.getContext())} {flexRender(header.column.columnDef.header, header.getContext())}
</span> </span>
<div className="flex flex-col flex-shrink-0"> <div className="flex flex-col flex-shrink-0">
{sorted === "asc" ? ( {sorted === "asc" ? (
<ChevronUp className="w-4 h-4 text-blue-600" /> <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" /> <ChevronUp className="w-3 h-3 -mb-1" />
<ChevronDown className="w-3 h-3" /> <ChevronDown className="w-3 h-3" />
</div> </div>
)} )}
</div> </div>
</div> </div>
</th> </th>
); );
})} })}
@ -389,7 +399,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
<div className="flex flex-col items-center gap-3"> <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> <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> <span className="text-gray-500 font-medium">Carregando dados analíticos...</span>
</div> </div>
</td> </td>
</tr> </tr>
) : virtualRows.length === 0 ? ( ) : 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"> <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" /> <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> </svg>
</div> </div>
<span className="text-gray-500 font-medium">Nenhum dado analítico encontrado para os filtros aplicados.</span> <span className="text-gray-500 font-medium">Nenhum dado analítico encontrado para os filtros aplicados.</span>
</div> </div>
</td> </td>
</tr> </tr>
) : ( ) : (
virtualRows.map((virtualRow: any) => { virtualRows.map((virtualRow) => {
const row = table.getRowModel().rows[virtualRow.index]; const row = table.getRowModel().rows[virtualRow.index];
return ( return (
<tr <tr
@ -422,7 +432,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
tableLayout: "fixed", tableLayout: "fixed",
}} }}
> >
{row.getVisibleCells().map((cell: any, cellIndex: number) => ( {row.getVisibleCells().map((cell, cellIndex) => (
<td <td
key={cell.id} key={cell.id}
className={`px-4 py-3 text-sm whitespace-nowrap overflow-hidden ${ 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' : '' cell.column.id === 'valor' ? 'text-right font-semibold' : ''
}`} }`}
title={cell.getValue()} title={String(cell.getValue())}
> >
<div className="truncate"> <div className="truncate">
{flexRender(cell.column.columnDef.cell, cell.getContext())} {flexRender(cell.column.columnDef.cell, cell.getContext())}
</div> </div>
</td> </td>
))} ))}
</tr> </tr>
@ -446,16 +456,16 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
</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="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="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 002 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>
<div> <div>
<h3 className="text-lg font-bold text-gray-900"> <h3 className="text-lg font-bold text-gray-900">
Total de Registros: <span className="text-blue-600">{table.getRowModel().rows.length}</span> Total de Registros: <span className="text-blue-600">{table.getRowModel().rows.length}</span>
</h3> </h3>
@ -469,13 +479,13 @@ 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">Soma de todos os valores</p> <p className="text-sm text-gray-600">Soma de todos os valores</p>
</div>
</div> </div>
</div> </div>
)} </div>
)}
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-2xl w-full mx-4 bg-white"> <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" /> <SelectValue placeholder="Selecione a coluna" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{columns.map((col: any) => ( {columns.map((col) => (
<SelectItem key={col.accessorKey} value={col.accessorKey}> <SelectItem key={col.accessorKey} value={col.accessorKey}>
{col.header} {col.header}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@ -589,7 +599,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
Adicionar condição Adicionar condição
</Button> </Button>
</div> </div>
</div> </div>
<DialogFooter className="flex gap-3 pt-6 border-t border-gray-200"> <DialogFooter className="flex gap-3 pt-6 border-t border-gray-200">
<Button <Button