From 860271b13f73cf25eaeb75f71c45c3e87e87fbc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alessandro=20Gon=C3=A7aalves?= <suporte.appeduca@gmail.com>
Date: Mon, 10 Nov 2025 16:49:22 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20corre=C3=A7=C3=A3o=20de=20alinhamento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/DRE/teste.tsx | 373 +++++++++++++++++++-----------------------
 1 file changed, 166 insertions(+), 207 deletions(-)

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<string | null>(null);
   const [isAllExpanded, setIsAllExpanded] = useState(false);
-  
-  // Refs para sincronizar scroll vertical entre coluna fixa e valores
-  const descricaoScrollRef = React.useRef<HTMLDivElement>(null);
-  const valoresScrollRef = React.useRef<HTMLDivElement>(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 && (
         <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
-          {/* Container com coluna fixa e scroll horizontal */}
-          <div className="flex max-h-[500px] overflow-hidden">
-            {/* Coluna fixa - Descrição */}
-            <div className="flex-shrink-0 border-r border-gray-200" style={{ minWidth: '300px', width: 'auto' }}>
-              {/* Header fixo da descrição */}
-              <div className="sticky top-0 z-20 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
-                <div className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide whitespace-nowrap">
-                  Descrição
-                </div>
-              </div>
-              {/* Corpo da descrição com scroll vertical */}
-              <div 
-                ref={descricaoScrollRef}
-                className="overflow-y-auto max-h-[500px] [&::-webkit-scrollbar]:hidden" 
-                style={{ 
-                  scrollbarWidth: 'none',
-                  msOverflowStyle: 'none',
-                }}
-                onScroll={() => 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 (
-                    <div
-                      key={index}
-                      className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)} cursor-pointer`}
-                      style={{ 
-                        height: '40px', 
-                        minHeight: '40px',
-                        maxHeight: '40px',
-                        display: 'flex', 
-                        alignItems: 'center', 
-                        minWidth: 'max-content',
-                        boxSizing: 'border-box',
-                        borderLeft: isSelected ? '4px solid rgb(34 197 94)' : 'none',
-                      }}
-                      onClick={() => handleRowClick(row)}
-                    >
-                      <div 
-                        className="py-1 whitespace-nowrap flex items-center h-full w-full" 
-                        style={{ 
-                          minWidth: 'max-content', 
-                          height: '100%',
-                          paddingLeft: isSelected ? 'calc(1rem - 4px)' : '1rem',
-                          paddingRight: '1rem',
-                        }}
-                      >
-                        <div style={getIndentStyle(row.level)} className="flex items-center h-full">
-                          {renderCellContent(row)}
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-            
-            {/* Parte com scroll - Valores */}
-            <div className="flex-1 overflow-hidden">
-              <div 
-                ref={valoresScrollRef}
-                className="overflow-x-auto overflow-y-auto max-h-[500px]" 
-                style={{ scrollbarWidth: 'thin' }}
-                onScroll={() => syncScroll('valores')}
-              >
-                <table className="w-full border-collapse">
-                  {/* Table Header */}
-                  <thead className="sticky top-0 z-10 bg-gradient-to-r from-blue-50 to-indigo-50">
-                    <tr className="border-b border-gray-200">
-                      {mesesDisponiveis.map((mes) => (
-                        <React.Fragment key={mes}>
-                          <th className="px-2 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
-                            {mes}
-                          </th>
-                          <th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
-                            %
-                          </th>
-                        </React.Fragment>
-                      ))}
-                      <th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
-                        Total
+          {/* Scroll Container - Apenas um container com scroll */}
+          <div
+            className="overflow-x-auto overflow-y-auto max-h-[500px]"
+            style={{ scrollbarWidth: 'thin' }}
+          >
+            {/* Table */}
+            <table
+              className="w-full border-collapse"
+              style={{ minWidth: 'max-content' }}
+            >
+              {/* Table Header */}
+              <thead className="sticky top-0 z-10 bg-gradient-to-r from-blue-50 to-indigo-50">
+                <tr className="border-b border-gray-200">
+                  <th className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px] bg-gradient-to-r from-blue-50 to-indigo-50 sticky left-0 z-20 shadow-[2px_0_4px_rgba(0,0,0,0.1)]">
+                    Descrição
+                  </th>
+                  {mesesDisponiveis.map((mes) => (
+                    <React.Fragment key={mes}>
+                      <th className="px-2 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
+                        {mes}
                       </th>
                       <th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
                         %
                       </th>
-                    </tr>
-                  </thead>
-                  
-                  {/* Table Body */}
-                  <tbody>
-                    {hierarchicalData.map((row, index) => {
-                      const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`;
-                      const isSelected = linhaSelecionada === linhaId;
-                      return (
-                        <tr
-                          key={index}
-                          className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
-                          style={{ 
-                            height: '40px',
-                            minHeight: '40px',
-                            maxHeight: '40px',
-                            boxSizing: 'border-box',
-                          }}
-                        >
-                        {/* Colunas de valores por mês */}
-                        {mesesDisponiveis.map((mes) => (
-                          <React.Fragment key={mes}>
-                            <td
-                              className="px-2 py-1 text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px]"
-                              style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
-                              onClick={() => 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 (
-                                      <span
-                                        className={
-                                          isNegative
-                                            ? "text-red-600 font-bold"
-                                            : "text-gray-900"
-                                        }
-                                      >
-                                        {formatted}
-                                      </span>
-                                    );
-                                  })()
-                                : "-"}
-                            </td>
-                            <td
-                              className="px-2 py-1 text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[100px] min-w-[100px]"
-                              style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
-                              onClick={() => handleRowClick(row, mes)}
-                              title={
-                                row.percentuaisPorMes &&
-                                row.percentuaisPorMes[mes] !== undefined
-                                  ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
-                                  : "-"
-                              }
-                            >
-                              {row.percentuaisPorMes &&
+                    </React.Fragment>
+                  ))}
+                  <th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-blue-50 to-indigo-50">
+                    Total
+                  </th>
+                  <th className="px-2 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-blue-50 to-indigo-50">
+                    %
+                  </th>
+                </tr>
+              </thead>
+
+              {/* Table Body */}
+              <tbody>
+                {hierarchicalData.map((row, index) => {
+                  const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`;
+                  const isSelected = linhaSelecionada === linhaId;
+                  return (
+                    <tr
+                      key={index}
+                      className={`text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
+                    >
+                      <td
+                        className={`px-4 py-1 w-[300px] min-w-[300px] whitespace-nowrap overflow-hidden sticky left-0 z-10 ${getFixedCellBackground(row)} shadow-[2px_0_4px_rgba(0,0,0,0.05)] cursor-pointer`}
+                        onClick={() => handleRowClick(row)}
+                      >
+                        <div style={getIndentStyle(row.level)}>
+                          {renderCellContent(row)}
+                        </div>
+                      </td>
+
+                      {/* Colunas de valores por mês */}
+                      {mesesDisponiveis.map((mes) => (
+                        <React.Fragment key={mes}>
+                          <td
+                            className="px-2 py-1 text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px]"
+                            onClick={() => 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 (
+                                    <span
+                                      className={
+                                        isNegative
+                                          ? "text-red-600 font-bold"
+                                          : "text-gray-900"
+                                      }
+                                    >
+                                      {formatted}
+                                    </span>
+                                  );
+                                })()
+                              : "-"}
+                          </td>
+                          <td
+                            className="px-2 py-1 text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[100px] min-w-[100px]"
+                            onClick={() => handleRowClick(row, mes)}
+                            title={
+                              row.percentuaisPorMes &&
                               row.percentuaisPorMes[mes] !== undefined
                                 ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
-                                : "-"}
-                            </td>
-                          </React.Fragment>
-                        ))}
-                        
-                        {/* Coluna Total */}
-                        <td
-                          className="px-4 py-1 text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px]"
-                          style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
-                          onClick={() => handleRowClick(row)}
-                          title={row.total ? formatCurrency(row.total) : "-"}
-                        >
-                          {(() => {
-                            const { formatted, isNegative } = formatCurrencyWithColor(
-                              row.total!
-                            );
-                            return (
-                              <span
-                                className={
-                                  isNegative ? "text-red-600 font-bold" : "text-gray-900"
-                                }
-                              >
-                                {formatted}
-                              </span>
-                            );
-                          })()}
-                        </td>
-                        
-                        {/* Coluna Percentual Total */}
-                        <td
-                          className="px-2 py-1 text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[100px] min-w-[100px]"
-                          style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
-                          onClick={() => handleRowClick(row)}
-                          title={
-                            row.percentualTotal !== undefined
-                              ? `${row.percentualTotal.toFixed(1)}%`
-                              : "-"
-                          }
-                        >
-                          {row.percentualTotal !== undefined
+                                : "-"
+                            }
+                          >
+                            {row.percentuaisPorMes &&
+                            row.percentuaisPorMes[mes] !== undefined
+                              ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
+                              : "-"}
+                          </td>
+                        </React.Fragment>
+                      ))}
+
+                      {/* Coluna Total */}
+                      <td
+                        className="px-4 py-1 text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px]"
+                        onClick={() => handleRowClick(row)}
+                        title={row.total ? formatCurrency(row.total) : "-"}
+                      >
+                        {(() => {
+                          const { formatted, isNegative } = formatCurrencyWithColor(
+                            row.total!
+                          );
+                          return (
+                            <span
+                              className={
+                                isNegative ? "text-red-600 font-bold" : "text-gray-900"
+                              }
+                            >
+                              {formatted}
+                            </span>
+                          );
+                        })()}
+                      </td>
+
+                      {/* Coluna Percentual Total */}
+                      <td
+                        className="px-2 py-1 text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[100px] min-w-[100px]"
+                        onClick={() => handleRowClick(row)}
+                        title={
+                          row.percentualTotal !== undefined
                             ? `${row.percentualTotal.toFixed(1)}%`
-                            : "-"}
-                        </td>
-                      </tr>
-                    );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            </div>
+                            : "-"
+                        }
+                      >
+                        {row.percentualTotal !== undefined
+                          ? `${row.percentualTotal.toFixed(1)}%`
+                          : "-"}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
           </div>
         </div>
       )}