Merge pull request #48 from JurunenseDevInterno/feat-visao-entidade-analitica

fix: correção tabela analitica

src/app/dre-entidade/analitico.tsx

@@ -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",
+        headerName: "Cod. Fornec",
-        width: 120,
+        width: 100,
         sortable: true,
         resizable: true,
       },
       {
         field: "nome_fornecedor",
         headerName: "Fornecedor",
-        flex: 1,
+        width: 200,
-        minWidth: 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,
+        width: 180,
-        minWidth: 200,
         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,
+        width: 200,
-        minWidth: 180,
         sortable: true,
         resizable: true,
       },
-        {
+      {
-          field: "valor",
+        field: "valor",
-          headerName: "Vl.Realizado",
+        headerName: "VI.Realizado",
-          type: "number" as const,
+        type: "number" as const,
-          width: 140,
+        width: 120,
-          sortable: true,
+        sortable: true,
-          resizable: true,
+        resizable: true,
         renderCell: (params: any) => currencyCellRenderer(params, true),
       },
-        {
+      {
-          field: "valor_previsto",
+        field: "valor_previsto",
-          headerName: "Vl.Previsto",
+        headerName: "VI.Pr",
-          type: "number" as const,
+        type: "number" as const,
-          width: 130,
+        width: 85,
-          sortable: true,
+        sortable: true,
-          resizable: true,
+        resizable: true,
         renderCell: (params: any) => currencyCellRenderer(params, false),
       },
-        {
+      {
-          field: "valor_confirmado",
+        field: "valor_confirmado",
-          headerName: "Vl.Confirmado",
+        headerName: "VI.Confirmado",
-          type: "number" as const,
+        type: "number" as const,
-          width: 140,
+        width: 125,
-          sortable: true,
+        sortable: true,
-          resizable: true,
+        resizable: true,
-        renderCell: (params: any) => currencyCellRenderer(params, false),
-      },
-        {
-          field: "valor_pago",
-          headerName: "Vl.Pago",
-          type: "number" as const,
-        width: 120,
-          sortable: true,
-          resizable: true,
         renderCell: (params: any) => currencyCellRenderer(params, false),
       },
       {
         field: "historico",
-        headerName: "Historico",
+        headerName: "Histórico",
-        flex: 1,
+        width: 250,
-        minWidth: 250,
-        sortable: true,
-        resizable: true,
-      },
-      {
-        field: "historico2",
-        headerName: "Historico 2",
-        flex: 1,
-        minWidth: 300,
         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-6 mb-3 pb-3 border-b border-gray-200">
-            <div className="flex items-center gap-4">
+            <div className="text-sm font-medium text-gray-700">
-              <h2 className="text-lg font-semibold">
+              <span className="font-semibold">Total de Registros:</span>{" "}
-                Total de Registros: <span className="text-blue-600">{sortedAndFilteredData.length}</span>
+              <span className="text-blue-600 font-bold">{sortedAndFilteredData.length}</span>
-              </h2>
+            </div>
-              <div className="text-sm text-gray-600">
+            <div className="text-sm font-medium text-gray-700">
-                Valor Total: <span className={`font-bold ${valorTotal < 0 ? 'text-red-600' : 'text-green-600'}`}>
+              <span className="font-semibold">Valor Total:</span>{" "}
-                  {new Intl.NumberFormat("pt-BR", {
+              <span className={`font-bold ${valorTotal < 0 ? 'text-red-600' : 'text-gray-900'}`}>
-                    style: "currency",
+                {new Intl.NumberFormat("pt-BR", {
-                    currency: "BRL",
+                  style: "currency",
-                  }).format(valorTotal)}
+                  currency: "BRL",
-                </span>
+                }).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,101 +937,46 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
               disableVirtualization={false}
               getRowId={(row: any) => row.id || `row-${row.recnum || Math.random()}`}
               sx={{
-                overflowAnchor: 'none',
+                height: "100%",
-                  height: "100%",
+                width: "100%",
-                  display: "flex",
+                "& .MuiDataGrid-root": {
-                  flexDirection: "column",
+                  border: "none",
-                  "& .MuiDataGrid-root": {
+                },
-                    display: "flex",
+                "& .MuiDataGrid-columnHeaders": {
-                    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,
-                  },
-                  "& .MuiDataGrid-columnHeaders": {
-                    position: "relative !important",
-                    backgroundColor: "#f9fafb !important",
-                    zIndex: 100,
                   borderBottom: "1px solid #e5e7eb",
                 },
-                  "& .MuiDataGrid-columnHeader": {
+                "& .MuiDataGrid-columnHeader": {
-                    backgroundColor: "#f9fafb !important",
+                  backgroundColor: "#f9fafb !important",
-                  },
+                  fontWeight: 600,
-                  "& .MuiDataGrid-columnHeaderRow": {
+                  fontSize: "0.875rem",
-                    backgroundColor: "#f9fafb !important",
+                },
-                  },
-                  "& .MuiDataGrid-columnHeadersInner": {
-                    backgroundColor: "#f9fafb !important",
-                  },
                 "& .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",
+                  scrollbarWidth: "thin",
-                    overflowX: "auto !important",
+                  "&::-webkit-scrollbar": {
-                    height: "100% !important",
+                    width: "8px",
-                    flex: 1,
+                    height: "8px",
-                    overflowAnchor: 'none',
-                    // Garantir que a barra de scroll seja visível
-                    scrollbarWidth: "thin",
-                    "&::-webkit-scrollbar": {
-                      height: "8px",
-                      width: "8px",
-                    },
-                    "&::-webkit-scrollbar-track": {
-                      background: "#f1f1f1",
-                    },
-                    "&::-webkit-scrollbar-thumb": {
-                      background: "#888",
-                      borderRadius: "4px",
-                    },
-                    "&::-webkit-scrollbar-thumb:hover": {
-                      background: "#555",
-                    },
                   },
-                  "& .MuiDataGrid-virtualScrollerContent": {
+                  "&::-webkit-scrollbar-track": {
-                    minWidth: "max-content",
+                    background: "#f1f1f1",
+                  },
+                  "&::-webkit-scrollbar-thumb": {
+                    background: "#888",
+                    borderRadius: "4px",
+                  },
+                  "&::-webkit-scrollbar-thumb:hover": {
+                    background: "#555",
                   },
-                  "& .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",