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

fix: correção tabela analitica

This commit is contained in:
Alessandro Gonçaalves 2025-11-21 17:56:37 -03:00
parent 0c9564a55d
commit d46ccae602
1 changed files with 141 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

305
src/app/dre-entidade/analitico.tsx
View File

@ -523,89 +523,31 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
};
const baseColumns = [
{
field: "data_lancamento",
headerName: "Dt Lanc",
width: 120,
sortable: true,
resizable: true,
renderCell: dateCellRenderer,
},
{
field: "data_compensacao",
headerName: "Dt Comp",
width: 120,
sortable: true,
resizable: true,
renderCell: dateCellRenderer,
},
{
field: "data_vencimento",
headerName: "Dt Venc",
width: 120,
sortable: true,
resizable: true,
renderCell: dateCellRenderer,
},
{
field: "data_caixa",
headerName: "Dt Caixa",
width: 120,
sortable: true,
resizable: true,
renderCell: dateCellRenderer,
},
{
field: "data_pagto",
headerName: "Dt Pagto",
width: 120,
sortable: true,
resizable: true,
renderCell: dateCellRenderer,
},
{
field: "entidade",
headerName: "Entidade",
width: 100,
sortable: true,
resizable: true,
renderCell: (params: any) => params.value || "-",
},
{
field: "tipo_parceiro",
headerName: "Tipo Parc",
width: 120,
sortable: true,
resizable: true,
renderCell: (params: any) => params.value || "-",
},
{
field: "codigo_fornecedor",
headerName: "Cod.Fornec",
width: 120,
headerName: "Cod. Fornec",
width: 100,
sortable: true,
resizable: true,
},
{
field: "nome_fornecedor",
headerName: "Fornecedor",
flex: 1,
minWidth: 200,
width: 200,
sortable: true,
resizable: true,
},
{
field: "codigo_centrocusto",
headerName: "Cod.CC",
width: 100,
width: 90,
sortable: true,
resizable: true,
},
{
field: "centro_custo",
headerName: "Centro Custo",
flex: 1,
minWidth: 200,
width: 180,
sortable: true,
resizable: true,
renderCell: (params: any) => params.value || "-",
@ -613,78 +555,131 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{
field: "codigo_conta",
headerName: "Cod.Conta",
width: 120,
width: 100,
sortable: true,
resizable: true,
},
{
field: "conta",
headerName: "Conta",
flex: 1,
minWidth: 180,
width: 200,
sortable: true,
resizable: true,
},
{
field: "valor",
headerName: "Vl.Realizado",
headerName: "VI.Realizado",
type: "number" as const,
width: 140,
width: 120,
sortable: true,
resizable: true,
renderCell: (params: any) => currencyCellRenderer(params, true),
},
{
field: "valor_previsto",
headerName: "Vl.Previsto",
headerName: "VI.Pr",
type: "number" as const,
width: 130,
width: 85,
sortable: true,
resizable: true,
renderCell: (params: any) => currencyCellRenderer(params, false),
},
{
field: "valor_confirmado",
headerName: "Vl.Confirmado",
headerName: "VI.Confirmado",
type: "number" as const,
width: 140,
sortable: true,
resizable: true,
renderCell: (params: any) => currencyCellRenderer(params, false),
},
{
field: "valor_pago",
headerName: "Vl.Pago",
type: "number" as const,
width: 120,
width: 125,
sortable: true,
resizable: true,
renderCell: (params: any) => currencyCellRenderer(params, false),
},
{
field: "historico",
headerName: "Historico",
flex: 1,
minWidth: 250,
sortable: true,
resizable: true,
},
{
field: "historico2",
headerName: "Historico 2",
flex: 1,
minWidth: 300,
headerName: "Histórico",
width: 250,
sortable: true,
resizable: true,
},
{
field: "numero_lancamento",
headerName: "Num.Lanc",
headerName: "ID",
width: 100,
sortable: true,
resizable: true,
renderCell: (params: any) => params.value || "-",
},
{
field: "data_lancamento",
headerName: "Dt Lanc",
width: 95,
sortable: true,
resizable: true,
renderCell: dateCellRenderer,
},
{
field: "data_compensacao",
headerName: "Dt Comp",
width: 95,
sortable: true,
resizable: true,
renderCell: dateCellRenderer,
},
{
field: "data_vencimento",
headerName: "Dt Venc",
width: 95,
sortable: true,
resizable: true,
renderCell: dateCellRenderer,
},
{
field: "data_caixa",
headerName: "Dt Caixa",
width: 95,
sortable: true,
resizable: true,
renderCell: dateCellRenderer,
},
{
field: "data_pagto",
headerName: "Dt Pagto",
width: 95,
sortable: true,
resizable: true,
renderCell: dateCellRenderer,
},
{
field: "entidade",
headerName: "Entidade",
width: 90,
sortable: true,
resizable: true,
renderCell: (params: any) => params.value || "-",
},
{
field: "tipo_parceiro",
headerName: "Tipo Parc",
width: 95,
sortable: true,
resizable: true,
renderCell: (params: any) => params.value || "-",
},
{
field: "valor_pago",
headerName: "VI.Pago",
type: "number" as const,
width: 100,
sortable: true,
resizable: true,
renderCell: (params: any) => currencyCellRenderer(params, false),
},
{
field: "historico2",
headerName: "Histórico 2",
width: 250,
sortable: true,
resizable: true,
},
];
// Adicionar renderHeader com filtro Excel para todas as colunas
@ -911,23 +906,23 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{/* DataGridPro */}
<Card className={`w-full shadow-lg rounded-2xl ${isMaximized ? 'h-[calc(96vh-280px)]' : 'h-[40vh]'}`} style={{ overflowAnchor: 'none' }}>
<CardContent className="p-4 h-full" style={{ overflowAnchor: 'none' }}>
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-4">
<h2 className="text-lg font-semibold">
Total de Registros: <span className="text-blue-600">{sortedAndFilteredData.length}</span>
</h2>
<div className="text-sm text-gray-600">
Valor Total: <span className={`font-bold ${valorTotal < 0 ? 'text-red-600' : 'text-green-600'}`}>
<div className="flex items-center gap-6 mb-3 pb-3 border-b border-gray-200">
<div className="text-sm font-medium text-gray-700">
<span className="font-semibold">Total de Registros:</span>{" "}
<span className="text-blue-600 font-bold">{sortedAndFilteredData.length}</span>
</div>
<div className="text-sm font-medium text-gray-700">
<span className="font-semibold">Valor Total:</span>{" "}
<span className={`font-bold ${valorTotal < 0 ? 'text-red-600' : 'text-gray-900'}`}>
{new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
}).format(valorTotal)}
</span>
</div>
</div>
</div>
<div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative", display: "flex", flexDirection: "column" }}>
<div style={{ height: "calc(100% - 2rem)", width: "100%", position: "relative" }}>
<DataGridPremium
key={`datagrid-${sortedAndFilteredData.length}-${Object.keys(columnFilters).length}`}
rows={sortedAndFilteredData}
@ -942,74 +937,29 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
disableVirtualization={false}
getRowId={(row: any) => row.id || `row-${row.recnum || Math.random()}`}
sx={{
overflowAnchor: 'none',
height: "100%",
display: "flex",
flexDirection: "column",
width: "100%",
"& .MuiDataGrid-root": {
display: "flex",
flexDirection: "column",
height: "100%",
flex: 1,
overflow: "hidden",
},
"& .MuiDataGrid-main": {
overflow: "hidden !important",
position: "relative",
height: "100%",
display: "flex",
flexDirection: "column",
flex: 1,
},
// Container dos headers - DEVE FICAR FIXO (não rola)
"& .MuiDataGrid-container--top": {
overflow: "hidden !important",
position: "relative",
zIndex: 100,
backgroundColor: "#f9fafb",
flexShrink: 0,
flexGrow: 0,
border: "none",
},
"& .MuiDataGrid-columnHeaders": {
position: "relative !important",
backgroundColor: "#f9fafb !important",
zIndex: 100,
backgroundColor: "#f9fafb",
borderBottom: "1px solid #e5e7eb",
},
"& .MuiDataGrid-columnHeader": {
backgroundColor: "#f9fafb !important",
},
"& .MuiDataGrid-columnHeaderRow": {
backgroundColor: "#f9fafb !important",
},
"& .MuiDataGrid-columnHeadersInner": {
backgroundColor: "#f9fafb !important",
fontWeight: 600,
fontSize: "0.875rem",
},
"& .MuiDataGrid-cell": {
borderBottom: "1px solid #f0f0f0",
fontSize: "0.875rem",
},
// Container do virtualScroller - deve ter scroll e ocupar espaço restante
"& .MuiDataGrid-container--bottom": {
flex: 1,
overflow: "hidden !important",
position: "relative",
minHeight: 0,
display: "flex",
flexDirection: "column",
},
// Apenas o virtualScroller deve ter scroll
"& .MuiDataGrid-virtualScroller": {
overflowY: "auto !important",
overflowX: "auto !important",
height: "100% !important",
flex: 1,
overflowAnchor: 'none',
// Garantir que a barra de scroll seja visível
scrollbarWidth: "thin",
"&::-webkit-scrollbar": {
height: "8px",
width: "8px",
height: "8px",
},
"&::-webkit-scrollbar-track": {
background: "#f1f1f1",
@ -1022,21 +972,11 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
background: "#555",
},
},
"& .MuiDataGrid-virtualScrollerContent": {
minWidth: "max-content",
},
"& .MuiDataGrid-row": {
minWidth: "max-content",
},
"& .MuiDataGrid-toolbarContainer": {
backgroundColor: "#f8fafc",
borderBottom: "1px solid #e5e7eb",
padding: "8px 16px",
},
"& .MuiDataGrid-scrollbar": {
display: "none",
},
// Ocultar todos os ícones nativos das colunas
"& .MuiDataGrid-columnHeaderMenuContainer": {
display: "none !important",
},
@ -1046,48 +986,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
"& .MuiDataGrid-columnHeaderSortIcon": {
display: "none !important",
},
"& .MuiDataGrid-columnHeaderSortIconContainer": {
display: "none !important",
},
"& .MuiDataGrid-iconButtonContainer": {
display: "none !important",
},
"& .MuiDataGrid-columnHeaderSeparator": {
display: "none !important",
},
"& .MuiDataGrid-columnHeaderSortButton": {
display: "none !important",
},
// Ocultar qualquer ícone de menu adicional
"& .MuiDataGrid-menuIcon": {
display: "none !important",
},
"& .MuiDataGrid-menuIconButton": {
display: "none !important",
},
"& .MuiDataGrid-columnHeaderMenuIcon": {
display: "none !important",
},
"& .MuiDataGrid-columnHeaderMenuIconButton": {
display: "none !important",
},
"& .MuiDataGrid-menuContainer": {
display: "none !important",
},
"& .MuiDataGrid-menu": {
display: "none !important",
},
// Ocultar footer de paginação
"& .MuiDataGrid-footerContainer": {
display: "none !important",
},
"& .MuiDataGrid-pagination": {
display: "none !important",
},
"& .MuiTablePagination-root": {
display: "none !important",
},
// Garantir que nosso botão customizado apareça
"& .MuiDataGrid-columnHeaderTitleContainer": {
width: "100%",
display: "flex",