fix: fixar coluna descrição

src/app/DRE/teste.tsx

@@ -252,6 +252,19 @@ 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();
@@ -2789,16 +2802,51 @@ export default function Teste() {
       {/* Table Container */}
       {filtrosAplicados && !loading && !error && (
         <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
-          {/* Scroll Container - Apenas um container com scroll */}
+          {/* Container com coluna fixa e scroll horizontal */}
-          <div className="overflow-auto max-h-[500px]" style={{ scrollbarWidth: 'thin' }}>
+          <div className="flex max-h-[500px] overflow-hidden">
-            {/* Table */}
+            {/* Coluna fixa - Descrição */}
+            <div className="flex-shrink-0 border-r border-gray-200">
+              {/* 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 w-[300px] min-w-[300px]">
+                  Descrição
+                </div>
+              </div>
+              {/* Corpo da descrição com scroll vertical */}
+              <div 
+                ref={descricaoScrollRef}
+                className="overflow-y-auto max-h-[500px]" 
+                style={{ scrollbarWidth: 'thin' }}
+                onScroll={() => syncScroll('descricao')}
+              >
+                {hierarchicalData.map((row, index) => (
+                  <div
+                    key={index}
+                    className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
+                    style={{ height: '40px', display: 'flex', alignItems: 'center' }}
+                  >
+                    <div className="px-4 py-1 w-[300px] min-w-[300px] whitespace-nowrap overflow-hidden flex items-center h-full">
+                      <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">
-                  <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">
-                    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">
@@ -2821,25 +2869,107 @@ export default function Teste() {
                   {/* Table Body */}
                   <tbody>
                     {hierarchicalData.map((row, index) => (
-                  <TableRow
+                      <tr
                         key={index}
-                    row={row}
+                        className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
-                    index={index}
+                        style={{ height: '40px' }}
-                    toggleGroup={toggleGroup}
+                      >
-                    toggleCentro={toggleCentro}
+                        {/* Colunas de valores por mês */}
-                    handleRowClick={handleRowClick}
+                        {mesesDisponiveis.map((mes) => (
-                    getRowStyle={getRowStyle}
+                          <React.Fragment key={mes}>
-                    getIndentStyle={getIndentStyle}
+                            <td
-                    renderCellContent={renderCellContent}
+                              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]"
-                    mesesDisponiveis={mesesDisponiveis}
+                              style={{ height: '40px', verticalAlign: 'middle' }}
-                    formatCurrency={formatCurrency}
+                              onClick={() => handleRowClick(row, mes)}
-                    formatCurrencyWithColor={formatCurrencyWithColor}
+                              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', verticalAlign: 'middle' }}
+                              onClick={() => handleRowClick(row, mes)}
+                              title={
+                                row.percentuaisPorMes &&
+                                row.percentuaisPorMes[mes] !== undefined
+                                  ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
+                                  : "-"
+                              }
+                            >
+                              {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', verticalAlign: 'middle' }}
+                          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', verticalAlign: 'middle' }}
+                          onClick={() => handleRowClick(row)}
+                          title={
+                            row.percentualTotal !== undefined
+                              ? `${row.percentualTotal.toFixed(1)}%`
+                              : "-"
+                          }
+                        >
+                          {row.percentualTotal !== undefined
+                            ? `${row.percentualTotal.toFixed(1)}%`
+                            : "-"}
+                        </td>
+                      </tr>
                     ))}
                   </tbody>
                 </table>
               </div>
             </div>
+          </div>
+        </div>
       )}
 
       {/* Componente Analítico - Sempre renderizado para evitar violação das Rules of Hooks */}