diff --git a/src/app/DRE/analitico.tsx b/src/app/DRE/analitico.tsx index e9c425c..716c3c1 100644 --- a/src/app/DRE/analitico.tsx +++ b/src/app/DRE/analitico.tsx @@ -7,6 +7,7 @@ import { getSortedRowModel, getFilteredRowModel, ColumnFiltersState, + ColumnSizingState, } from "@tanstack/react-table"; import { useVirtualizer } from "@tanstack/react-virtual"; import { Input } from "@/components/ui/input"; @@ -76,6 +77,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { const [loading, setLoading] = React.useState(false); const [globalFilter, setGlobalFilter] = React.useState(""); const [columnFilters, setColumnFilters] = React.useState([]); + const [columnSizing, setColumnSizing] = React.useState({}); const [open, setOpen] = React.useState(false); const [conditions, setConditions] = React.useState([ { column: "", operator: "contains", value: "" }, @@ -154,6 +156,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { accessorKey: "data_vencimento", header: "Data de Vencimento", filterFn: "advancedText", + size: 140, + minSize: 100, + maxSize: 200, cell: ({ getValue }: { getValue: () => string }) => { const value = getValue(); return new Date(value).toLocaleDateString("pt-BR"); @@ -163,6 +168,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { accessorKey: "data_caixa", header: "Data de Caixa", filterFn: "advancedText", + size: 120, + minSize: 100, + maxSize: 180, cell: ({ getValue }: { getValue: () => string }) => { const value = getValue(); return new Date(value).toLocaleDateString("pt-BR"); @@ -172,6 +180,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { accessorKey: "entidade", header: "Entidade", filterFn: "advancedText", + size: 120, + minSize: 80, + maxSize: 200, cell: ({ getValue }: { getValue: () => string }) => { const value = getValue(); return value || "-"; @@ -181,31 +192,49 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { accessorKey: "codigo_fornecedor", header: "Código do Fornecedor", filterFn: "advancedText", + size: 120, + minSize: 100, + maxSize: 150, }, { accessorKey: "nome_fornecedor", header: "Nome do Fornecedor", filterFn: "advancedText", + size: 220, + minSize: 150, + maxSize: 400, }, { accessorKey: "codigo_centrocusto", header: "Centro de Custo", filterFn: "advancedText", + size: 140, + minSize: 100, + maxSize: 200, }, { accessorKey: "codigo_conta", header: "Código da Conta", filterFn: "advancedText", + size: 130, + minSize: 100, + maxSize: 180, }, { accessorKey: "conta", header: "Nome da Conta", filterFn: "advancedText", + size: 160, + minSize: 120, + maxSize: 300, }, { accessorKey: "valor", header: "Valor Realizado", filterFn: "advancedText", + size: 130, + minSize: 100, + maxSize: 200, cell: ({ getValue }: { getValue: () => number }) => { const value = getValue(); const formatted = new Intl.NumberFormat("pt-BR", { @@ -224,6 +253,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { accessorKey: "valor_previsto", header: "Valor Previsto", filterFn: "advancedText", + size: 120, + minSize: 100, + maxSize: 180, cell: ({ getValue }: { getValue: () => number }) => { const value = getValue(); if (!value || value === 0) return "-"; @@ -243,6 +275,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { accessorKey: "valor_confirmado", header: "Valor Confirmado", filterFn: "advancedText", + size: 130, + minSize: 100, + maxSize: 200, cell: ({ getValue }: { getValue: () => number }) => { const value = getValue(); if (!value || value === 0) return "-"; @@ -262,6 +297,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { accessorKey: "valor_pago", header: "Valor Pago", filterFn: "advancedText", + size: 140, + minSize: 100, + maxSize: 200, cell: ({ getValue }: { getValue: () => number }) => { const value = getValue(); if (!value || value === 0) return "-"; @@ -281,16 +319,25 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { accessorKey: "historico", header: "Histórico", filterFn: "advancedText", + size: 320, + minSize: 200, + maxSize: 500, }, { accessorKey: "historico2", header: "Histórico 2", filterFn: "advancedText", + size: 500, + minSize: 300, + maxSize: 800, }, { accessorKey: "numero_lancamento", header: "Número do Lançamento", filterFn: "advancedText", + size: 30, + minSize: 20, + maxSize: 50, cell: ({ getValue }: { getValue: () => number }) => { const value = getValue(); return value || "-"; @@ -342,13 +389,16 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { const table = useReactTable({ data, columns: columns as any, - state: { globalFilter, columnFilters }, + state: { globalFilter, columnFilters, columnSizing }, onGlobalFilterChange: setGlobalFilter, onColumnFiltersChange: setColumnFilters, + onColumnSizingChange: setColumnSizing, filterFns, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getSortedRowModel: getSortedRowModel(), + enableColumnResizing: true, + columnResizeMode: 'onChange', }); const parentRef = React.useRef(null); @@ -643,38 +693,28 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { {/* Table Header */}
-
- Data de Vencimento + {table.getHeaderGroups().map(headerGroup => ( + headerGroup.headers.map(header => ( +
+ {header.isPlaceholder ? null : ( +
+ {String(header.column.columnDef.header)} + {header.column.getCanResize() && ( +
+ )}
-
Data de Caixa
-
Entidade
-
- Cód. Fornec -
-
- Nome do Fornecedor -
-
Centro de Custo
-
Código da Conta
-
Nome da Conta
-
- Valor Realizado -
-
- Valor Previsto -
-
- Valor Confirmado -
-
- Valor Pago -
-
-
Histórico
-
Histórico 2
-
- Número do Lançamento + )}
+ )) + ))}
@@ -692,8 +732,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {

Carregando dados...

-
-
+
+
) : virtualRows.length === 0 ? (
@@ -711,10 +751,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { 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" /> -
+

Nenhum dado encontrado

- - + + ) : (
-
- {new Date( - row.original.data_vencimento - ).toLocaleDateString("pt-BR")} + {row.getVisibleCells().map(cell => ( +
+ {String(cell.renderValue() || '')}
-
- {new Date(row.original.data_caixa).toLocaleDateString( - "pt-BR" - )} + ))}
-
- {row.original.entidade || "-"} -
-
- {row.original.codigo_fornecedor} -
-
- {row.original.nome_fornecedor} -
-
- {row.original.codigo_centrocusto} -
-
- {row.original.codigo_conta} -
-
- {row.original.conta} -
-
- {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(row.original.valor)} -
-
- {row.original.valor_previsto && row.original.valor_previsto !== 0 ? ( - - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(row.original.valor_previsto)} - - ) : ( - - - )} -
-
- {row.original.valor_confirmado && row.original.valor_confirmado !== 0 ? ( - - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(row.original.valor_confirmado)} - - ) : ( - - - )} -
-
- {row.original.valor_pago && row.original.valor_pago !== 0 ? ( - - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(row.original.valor_pago)} - - ) : ( - - - )} -
-
-
- {row.original.historico} -
-
- {row.original.historico2} -
-
- {row.original.numero_lancamento || "-"} -
-
); })}
)} - + {/* Footer com Totalizador das Colunas */} - {data.length > 0 && ( + {data.length > 0 && (
-
- TOTAL: {table.getRowModel().rows.length} registros -
-
-
-
-
-
-
-
-
- {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(columnTotals.valorRealizado)} -
-
- {columnTotals.valorPrevisto !== 0 ? ( - - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(columnTotals.valorPrevisto)} + {table.getHeaderGroups().map(headerGroup => ( + headerGroup.headers.map((header, index) => ( +
+ {index === 0 && ( + + TOTAL: {table.getRowModel().rows.length} registros + + )} + {index === 8 && ( + + {new Intl.NumberFormat("pt-BR", { + style: "currency", + currency: "BRL", + }).format(columnTotals.valorRealizado)} + + )} + {index === 9 && ( + + {columnTotals.valorPrevisto !== 0 ? ( + + {new Intl.NumberFormat("pt-BR", { + style: "currency", + currency: "BRL", + }).format(columnTotals.valorPrevisto)} + + ) : ( + - + )} + + )} + {index === 10 && ( + + {columnTotals.valorConfirmado !== 0 ? ( + + {new Intl.NumberFormat("pt-BR", { + style: "currency", + currency: "BRL", + }).format(columnTotals.valorConfirmado)} + + ) : ( + - + )} + + )} + {index === 11 && ( + + {columnTotals.valorPago !== 0 ? ( + + {new Intl.NumberFormat("pt-BR", { + style: "currency", + currency: "BRL", + }).format(columnTotals.valorPago)} + + ) : ( + - + )} - ) : ( - - - )} + )}
-
- {columnTotals.valorConfirmado !== 0 ? ( - - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(columnTotals.valorConfirmado)} - - ) : ( - - - )} + )) + ))}
-
- {columnTotals.valorPago !== 0 ? ( - - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(columnTotals.valorPago)} - - ) : ( - - - )} -
-
-
-
-
-
-
- )} +
+ )} {/* Summary Footer - Integrado */} { diff --git a/src/app/DRE/teste.tsx b/src/app/DRE/teste.tsx index cab67c1..9eff842 100644 --- a/src/app/DRE/teste.tsx +++ b/src/app/DRE/teste.tsx @@ -176,10 +176,8 @@ export default function Teste() { const meses = [ ...new Set( result.map((item: DREItem) => { - const dataCompetencia = new Date(item.data_competencia); - return `${dataCompetencia.getFullYear()}-${String( - dataCompetencia.getMonth() + 1 - ).padStart(2, "0")}`; + // Usar diretamente o valor de data_competencia que já vem no formato YYYY-MM + return item.data_competencia; }) ), ].sort() as string[]; @@ -489,10 +487,8 @@ export default function Teste() { const valoresPorMes: Record = {}; items.forEach((item) => { - const dataCompetencia = new Date(item.data_competencia); - const anoMes = `${dataCompetencia.getFullYear()}-${String( - dataCompetencia.getMonth() + 1 - ).padStart(2, "0")}`; + // Usar diretamente o valor de data_competencia que já vem no formato YYYY-MM + const anoMes = item.data_competencia; if (!valoresPorMes[anoMes]) { valoresPorMes[anoMes] = 0; @@ -524,11 +520,8 @@ export default function Teste() { // Encontrar o valor do grupo 03 para o mesmo mês const grupo03Items = data.filter((item) => { - const dataCompetencia = new Date(item.data_competencia); - const anoMes = `${dataCompetencia.getFullYear()}-${String( - dataCompetencia.getMonth() + 1 - ).padStart(2, "0")}`; - return anoMes === mes && item.grupo.includes("03"); + // Usar diretamente o valor de data_competencia que já vem no formato YYYY-MM + return item.data_competencia === mes && item.grupo.includes("03"); }); const valorGrupo03 = grupo03Items.reduce( @@ -1201,7 +1194,7 @@ export default function Teste() { {filtrosAplicados && !loading && !error && (
{/* Table Header */} -
+
Descrição