diff --git a/src/app/DRE/analitico.tsx b/src/app/DRE/analitico.tsx index d2cd729..977cd59 100644 --- a/src/app/DRE/analitico.tsx +++ b/src/app/DRE/analitico.tsx @@ -481,12 +481,12 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { // Definir colunas do DataGridPro na ordem solicitada const columns = React.useMemo(() => { const dateCellRenderer = (params: any) => { - if (!params.value) return "-"; - try { - return new Date(params.value).toLocaleDateString("pt-BR"); - } catch (error) { - return params.value; - } + if (!params.value) return "-"; + try { + return new Date(params.value).toLocaleDateString("pt-BR"); + } catch (error) { + return params.value; + } }; const currencyCellRenderer = (params: any, showZero: boolean = false) => { @@ -609,40 +609,40 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { sortable: true, resizable: true, }, - { - field: "valor", - headerName: "Vl.Realizado", - type: "number" as const, - width: 140, - sortable: true, - resizable: true, + { + field: "valor", + headerName: "Vl.Realizado", + type: "number" as const, + width: 140, + sortable: true, + resizable: true, renderCell: (params: any) => currencyCellRenderer(params, true), }, - { - field: "valor_previsto", - headerName: "Vl.Previsto", - type: "number" as const, - width: 130, - sortable: true, - resizable: true, + { + field: "valor_previsto", + headerName: "Vl.Previsto", + type: "number" as const, + width: 130, + sortable: true, + resizable: true, renderCell: (params: any) => currencyCellRenderer(params, false), }, - { - field: "valor_confirmado", - headerName: "Vl.Confirmado", - type: "number" as const, - width: 140, - sortable: true, - resizable: true, + { + field: "valor_confirmado", + headerName: "Vl.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, + { + field: "valor_pago", + headerName: "Vl.Pago", + type: "number" as const, width: 120, - sortable: true, - resizable: true, + sortable: true, + resizable: true, renderCell: (params: any) => currencyCellRenderer(params, false), }, { @@ -823,10 +823,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { // Função para renderizar o conteúdo principal do componente (reutilizável) const renderAnaliticoContent = (isMaximized: boolean = false) => { - return ( + return ( <> - {/* Filtros Externos Ativos */} - {(filtrosExternos.dataInicio || filtrosExternos.centroCusto || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && ( + {/* Filtros Externos Ativos - Apenas quando maximizado */} + {isMaximized && (filtrosExternos.dataInicio || filtrosExternos.centroCusto || filtrosExternos.codigoGrupo || filtrosExternos.codigoConta) && (
Filtros aplicados pela tabela DRE Gerencial: @@ -854,72 +854,74 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
)} - - {/* Controls */} -
- {data.length > 0 && ( + + {/* Controls - Apenas quando maximizado */} + {isMaximized && ( +
+ {data.length > 0 && ( + + )} - )} - +
+ )} + + {/* DataGridPro */} + + +
+
+

+ Total de Registros: {sortedAndFilteredData.length} +

+
+ Valor Total: + {new Intl.NumberFormat("pt-BR", { + style: "currency", + currency: "BRL", + }).format(valorTotal)} + +
+
- {/* DataGridPro */} - - -
-
-

- Total de Registros: {sortedAndFilteredData.length} -

-
- Valor Total: - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(valorTotal)} - -
-
-
-
- row.id || `row-${row.recnum || Math.random()}`} - sx={{ - overflowAnchor: 'none', + row.id || `row-${row.recnum || Math.random()}`} + sx={{ + overflowAnchor: 'none', height: "100%", display: "flex", flexDirection: "column", @@ -943,7 +945,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { overflow: "hidden !important", position: "relative", zIndex: 100, - backgroundColor: "#f9fafb", + backgroundColor: "#f9fafb", flexShrink: 0, flexGrow: 0, }, @@ -951,8 +953,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { position: "relative !important", backgroundColor: "#f9fafb !important", zIndex: 100, - borderBottom: "1px solid #e5e7eb", - }, + borderBottom: "1px solid #e5e7eb", + }, "& .MuiDataGrid-columnHeader": { backgroundColor: "#f9fafb !important", }, @@ -962,10 +964,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { "& .MuiDataGrid-columnHeadersInner": { backgroundColor: "#f9fafb !important", }, - "& .MuiDataGrid-cell": { - borderBottom: "1px solid #f0f0f0", - 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, @@ -976,7 +978,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { flexDirection: "column", }, // Apenas o virtualScroller deve ter scroll - "& .MuiDataGrid-virtualScroller": { + "& .MuiDataGrid-virtualScroller": { overflowY: "auto !important", overflowX: "auto !important", height: "100% !important", @@ -1004,137 +1006,137 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) { }, "& .MuiDataGrid-row": { minWidth: "max-content", - }, - "& .MuiDataGrid-toolbarContainer": { - backgroundColor: "#f8fafc", - borderBottom: "1px solid #e5e7eb", - padding: "8px 16px", - }, + }, + "& .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", - }, - "& .MuiDataGrid-columnHeaderMenuButton": { - display: "none !important", - }, - "& .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", - alignItems: "center", - justifyContent: "space-between", - }, - }} - /> - + // Ocultar todos os ícones nativos das colunas + "& .MuiDataGrid-columnHeaderMenuContainer": { + display: "none !important", + }, + "& .MuiDataGrid-columnHeaderMenuButton": { + display: "none !important", + }, + "& .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", + alignItems: "center", + justifyContent: "space-between", + }, + }} + /> + {/* Card de Agregação Customizado */} - {sortedAndFilteredData.length > 0 && ( -
-
-
-
-
- Vl.Realizado: - - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(columnTotals.valor)} - -
- -
- Vl.Previsto: - - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(columnTotals.valor_previsto)} - -
- -
- Vl.Confirmado: - - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(columnTotals.valor_confirmado)} - -
- -
- Vl.Pago: - - {new Intl.NumberFormat("pt-BR", { - style: "currency", - currency: "BRL", - }).format(columnTotals.valor_pago)} - -
-
- -
- Total de Registros: {sortedAndFilteredData.length} -
-
-
-
- )} + {sortedAndFilteredData.length > 0 && ( +
+
+
+
+
+ Vl.Realizado: + + {new Intl.NumberFormat("pt-BR", { + style: "currency", + currency: "BRL", + }).format(columnTotals.valor)} +
- - + +
+ Vl.Previsto: + + {new Intl.NumberFormat("pt-BR", { + style: "currency", + currency: "BRL", + }).format(columnTotals.valor_previsto)} + +
+ +
+ Vl.Confirmado: + + {new Intl.NumberFormat("pt-BR", { + style: "currency", + currency: "BRL", + }).format(columnTotals.valor_confirmado)} + +
+ +
+ Vl.Pago: + + {new Intl.NumberFormat("pt-BR", { + style: "currency", + currency: "BRL", + }).format(columnTotals.valor_pago)} + +
+
+ +
+ Total de Registros: {sortedAndFilteredData.length} +
+
+
+
+ )} +
+ + ); }; diff --git a/src/app/DRE/teste.tsx b/src/app/DRE/teste.tsx index 7d24854..908c6bd 100644 --- a/src/app/DRE/teste.tsx +++ b/src/app/DRE/teste.tsx @@ -251,19 +251,6 @@ export default function Teste() { }); const [linhaSelecionada, setLinhaSelecionada] = useState(null); const [isAllExpanded, setIsAllExpanded] = useState(false); - - // Refs para sincronizar scroll vertical entre coluna fixa e valores - const descricaoScrollRef = React.useRef(null); - const valoresScrollRef = React.useRef(null); - - // Função para sincronizar scroll vertical - const syncScroll = (source: 'descricao' | 'valores') => { - if (source === 'descricao' && descricaoScrollRef.current && valoresScrollRef.current) { - valoresScrollRef.current.scrollTop = descricaoScrollRef.current.scrollTop; - } else if (source === 'valores' && descricaoScrollRef.current && valoresScrollRef.current) { - descricaoScrollRef.current.scrollTop = valoresScrollRef.current.scrollTop; - } - }; useEffect(() => { // Carregar períodos disponíveis da API @@ -2191,7 +2178,7 @@ export default function Teste() { if (isSelected) { style += - " bg-green-100 shadow-lg"; + " bg-gradient-to-r from-green-100 to-emerald-100 border-l-4 border-green-500 shadow-lg"; } switch (row.type) { @@ -2212,6 +2199,35 @@ export default function Teste() { } }; + // Função para obter o background da célula fixa baseado no tipo de linha + const getFixedCellBackground = (row: HierarchicalRow): string => { + const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${ + row.centro_custo || "" + }-${row.codigo_conta || ""}`; + const isSelected = linhaSelecionada === linhaId; + const isCalculado = row.isCalculado === true; + + if (isSelected) { + return "bg-gradient-to-r from-green-100 to-emerald-100"; + } + + switch (row.type) { + case "grupo": + if (isCalculado) { + return "bg-gradient-to-r from-blue-100 to-indigo-100"; + } + return "bg-gradient-to-r from-blue-50 to-indigo-50"; + case "subgrupo": + return "bg-gradient-to-r from-gray-50 to-blue-50"; + case "centro_custo": + return "bg-gradient-to-r from-gray-50 to-gray-100"; + case "conta": + return "bg-white"; + default: + return "bg-white"; + } + }; + const getIndentStyle = (level: number) => { return { paddingLeft: `${level * 20}px` }; }; @@ -2802,206 +2818,149 @@ export default function Teste() { {/* Table Container */} {filtrosAplicados && !loading && !error && (
- {/* Container com coluna fixa e scroll horizontal */} -
- {/* Coluna fixa - Descrição */} -
- {/* Header fixo da descrição */} -
-
- Descrição -
-
- {/* Corpo da descrição com scroll vertical */} -
syncScroll('descricao')} - > - {hierarchicalData.map((row, index) => { - const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`; - const isSelected = linhaSelecionada === linhaId; - return ( -
handleRowClick(row)} - > -
-
- {renderCellContent(row)} -
-
-
- ); - })} -
-
- - {/* Parte com scroll - Valores */} -
-
syncScroll('valores')} - > - - {/* Table Header */} - - - {mesesDisponiveis.map((mes) => ( - - - - - ))} - + ); + })} + +
- {mes} - - % - - Total + {/* Scroll Container - Apenas um container com scroll */} +
+ {/* Table */} + + {/* Table Header */} + + + + {mesesDisponiveis.map((mes) => ( + + - - - - {/* Table Body */} - - {hierarchicalData.map((row, index) => { - const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`; - const isSelected = linhaSelecionada === linhaId; - return ( - - {/* Colunas de valores por mês */} - {mesesDisponiveis.map((mes) => ( - - - + + + + + {/* Table Body */} + + {hierarchicalData.map((row, index) => { + const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`; + const isSelected = linhaSelecionada === linhaId; + return ( + + + + {/* Colunas de valores por mês */} + {mesesDisponiveis.map((mes) => ( + + + - - ))} - - {/* Coluna Total */} - - - {/* Coluna Percentual Total */} - + + ))} + + {/* Coluna Total */} + + + {/* Coluna Percentual Total */} + - - ); - })} - -
+ Descrição + + {mes} %
handleRowClick(row, mes)} - title={ - row.valoresPorMes && row.valoresPorMes[mes] - ? formatCurrency(row.valoresPorMes[mes]) - : "-" - } - > - {row.valoresPorMes && row.valoresPorMes[mes] - ? (() => { - const { formatted, isNegative } = - formatCurrencyWithColor(row.valoresPorMes[mes]); - return ( - - {formatted} - - ); - })() - : "-"} - handleRowClick(row, mes)} - title={ - row.percentuaisPorMes && - row.percentuaisPorMes[mes] !== undefined - ? `${row.percentuaisPorMes[mes].toFixed(1)}%` - : "-" - } - > - {row.percentuaisPorMes && + + ))} + + Total + + % +
handleRowClick(row)} + > +
+ {renderCellContent(row)} +
+ 		handleRowClick(row, mes)} + title={ + row.valoresPorMes && row.valoresPorMes[mes] + ? formatCurrency(row.valoresPorMes[mes]) + : "-" + } + > + {row.valoresPorMes && row.valoresPorMes[mes] + ? (() => { + const { formatted, isNegative } = + formatCurrencyWithColor(row.valoresPorMes[mes]); + return ( + + {formatted} + + ); + })() + : "-"} + handleRowClick(row, mes)} + title={ + row.percentuaisPorMes && row.percentuaisPorMes[mes] !== undefined ? `${row.percentuaisPorMes[mes].toFixed(1)}%` - : "-"} - handleRowClick(row)} - title={row.total ? formatCurrency(row.total) : "-"} - > - {(() => { - const { formatted, isNegative } = formatCurrencyWithColor( - row.total! - ); - return ( - - {formatted} - - ); - })()} - handleRowClick(row)} - title={ - row.percentualTotal !== undefined - ? `${row.percentualTotal.toFixed(1)}%` - : "-" - } - > - {row.percentualTotal !== undefined + : "-" + } + > + {row.percentuaisPorMes && + row.percentuaisPorMes[mes] !== undefined + ? `${row.percentuaisPorMes[mes].toFixed(1)}%` + : "-"} + handleRowClick(row)} + title={row.total ? formatCurrency(row.total) : "-"} + > + {(() => { + const { formatted, isNegative } = formatCurrencyWithColor( + row.total! + ); + return ( + + {formatted} + + ); + })()} + handleRowClick(row)} + title={ + row.percentualTotal !== undefined ? `${row.percentualTotal.toFixed(1)}%` - : "-"} -
-
- + : "-" + } + > + {row.percentualTotal !== undefined + ? `${row.percentualTotal.toFixed(1)}%` + : "-"} + +
)}