From 4849b1d7e5b2b2ba7eaec130505119e9259bb8cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alessandro=20Gon=C3=A7aalves?= <suporte.appeduca@gmail.com>
Date: Mon, 10 Nov 2025 12:57:28 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20fixar=20coluna=20descri=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/DRE/teste.tsx | 220 +++++++++++++++++++++++++++++++++---------
 1 file changed, 175 insertions(+), 45 deletions(-)

diff --git a/src/app/DRE/teste.tsx b/src/app/DRE/teste.tsx
index 9685173..0c7ef9b 100644
--- a/src/app/DRE/teste.tsx
+++ b/src/app/DRE/teste.tsx
@@ -251,6 +251,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
@@ -2789,55 +2802,172 @@ 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 */}
-          <div className="overflow-auto max-h-[500px]" style={{ scrollbarWidth: 'thin' }}>
-            {/* Table */}
-            <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">
-                        {mes}
+          {/* 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">
+              {/* 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">
+                      {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
                       </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
-                  </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) => (
-                  <TableRow
-                    key={index}
-                    row={row}
-                    index={index}
-                    toggleGroup={toggleGroup}
-                    toggleCentro={toggleCentro}
-                    handleRowClick={handleRowClick}
-                    getRowStyle={getRowStyle}
-                    getIndentStyle={getIndentStyle}
-                    renderCellContent={renderCellContent}
-                    mesesDisponiveis={mesesDisponiveis}
-                    formatCurrency={formatCurrency}
-                    formatCurrencyWithColor={formatCurrencyWithColor}
-                  />
-                ))}
-              </tbody>
-            </table>
+                    </tr>
+                  </thead>
+                  
+                  {/* Table Body */}
+                  <tbody>
+                    {hierarchicalData.map((row, index) => (
+                      <tr
+                        key={index}
+                        className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
+                        style={{ height: '40px' }}
+                      >
+                        {/* 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', verticalAlign: 'middle' }}
+                              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', 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>
       )}