fix: correção de alinhamento

src/app/DRE/teste.tsx

@@ -252,19 +252,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
     carregarPeriodosDisponiveis();
@@ -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,76 +2818,22 @@ 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 */}
+          {/* Scroll Container - Apenas um container com scroll */}
-          <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 */}
+            <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">
@@ -2899,20 +2861,22 @@ export default function Teste() {
                   return (
                     <tr
                       key={index}
-                          className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
+                      className={`text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
-                          style={{ 
-                            height: '40px',
-                            minHeight: '40px',
-                            maxHeight: '40px',
-                            boxSizing: 'border-box',
-                          }}
                     >
+                      <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]"
-                              style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
                             onClick={() => handleRowClick(row, mes)}
                             title={
                               row.valoresPorMes && row.valoresPorMes[mes]
@@ -2940,7 +2904,6 @@ export default function Teste() {
                           </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 &&
@@ -2960,7 +2923,6 @@ export default function Teste() {
                       {/* 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) : "-"}
                       >
@@ -2983,7 +2945,6 @@ export default function Teste() {
                       {/* 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
@@ -3002,8 +2963,6 @@ export default function Teste() {
             </table>
           </div>
         </div>
-          </div>
-        </div>
       )}
 
       {/* Componente Analítico - Sempre renderizado para evitar violação das Rules of Hooks */}