From 5ab2e45966a586b7b7f1f6d0c5548bde0328311e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alessandro=20Gon=C3=A7aalves?= <suporte.appeduca@gmail.com>
Date: Wed, 10 Dec 2025 09:00:06 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adicionada=20a=20coluna=20de=20totaliza?=
 =?UTF-8?q?dor=20por=20per=C3=ADodo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/dre-filial/teste.tsx | 187 ++++++++++++++++++++++++-----------
 1 file changed, 127 insertions(+), 60 deletions(-)

diff --git a/src/app/dre-filial/teste.tsx b/src/app/dre-filial/teste.tsx
index 44e706c..30b6780 100644
--- a/src/app/dre-filial/teste.tsx
+++ b/src/app/dre-filial/teste.tsx
@@ -102,42 +102,97 @@ const TableRow = memo(({
       </td>
       
       {/* Colunas de valores por mês e por filial - cada filial tem suas próprias colunas */}
-      {mesesDisponiveis.map((mes) => 
-        ((filtrosAplicados && filiaisSelecionadas.length > 0) ? filiaisSelecionadas : (opcoesFiliais.length > 0 ? opcoesFiliais : [''])).map((filial: string) => {
-          // Só exibir se a filial estiver selecionada ou se não houver filtros aplicados
-          if (filtrosAplicados && filiaisSelecionadas.length > 0 && !filiaisSelecionadas.includes(filial)) {
-            return null;
-          }
-          return (
-          <React.Fragment key={`${mes}-${filial || 'default'}`}>
-            <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, filial)}
-              title={
-                filial && row.valoresPorMesPorFilial?.[mes]?.[filial] !== undefined
-                  ? formatCurrency(row.valoresPorMesPorFilial[mes][filial])
-                  : row.valoresPorMes?.[mes] !== undefined
-                  ? formatCurrency(row.valoresPorMes[mes])
-                  : "-"
+      {mesesDisponiveis.map((mes) => {
+        const filiaisParaMes = (filtrosAplicados && filiaisSelecionadas.length > 0) 
+          ? filiaisSelecionadas 
+          : (opcoesFiliais.length > 0 ? opcoesFiliais : ['']);
+        
+        return (
+          <React.Fragment key={mes}>
+            {/* Colunas de filiais para este mês */}
+            {filiaisParaMes.map((filial: string) => {
+              // Só exibir se a filial estiver selecionada ou se não houver filtros aplicados
+              if (filtrosAplicados && filiaisSelecionadas.length > 0 && !filiaisSelecionadas.includes(filial)) {
+                return null;
               }
+              return (
+                <React.Fragment key={`${mes}-${filial || 'default'}`}>
+                  <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, filial)}
+                    title={
+                      filial && row.valoresPorMesPorFilial?.[mes]?.[filial] !== undefined
+                        ? formatCurrency(row.valoresPorMesPorFilial[mes][filial])
+                        : row.valoresPorMes?.[mes] !== undefined
+                        ? formatCurrency(row.valoresPorMes[mes])
+                        : "-"
+                    }
+                  >
+                    {filial && row.valoresPorMesPorFilial?.[mes]?.[filial] !== undefined && row.valoresPorMesPorFilial[mes][filial] !== 0 ? (
+                      (() => {
+                        const valor = row.valoresPorMesPorFilial[mes][filial];
+                        const { formatted, isNegative } = formatCurrencyWithColor(valor);
+                        return (
+                          <span
+                            className={
+                              isNegative
+                                ? "text-red-600 font-bold"
+                                : "text-gray-900"
+                            }
+                          >
+                            {formatted}
+                          </span>
+                        );
+                      })()
+                    ) : !filial && row.valoresPorMes?.[mes] !== undefined ? (
+                      (() => {
+                        const { formatted, isNegative } = formatCurrencyWithColor(row.valoresPorMes[mes]);
+                        return (
+                          <span
+                            className={
+                              isNegative
+                                ? "text-red-600 font-bold"
+                                : "text-gray-900"
+                            }
+                          >
+                            {formatted}
+                          </span>
+                        );
+                      })()
+                    ) : (
+                      <span className="text-gray-400">-</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, filial)}
+                    title={
+                      filial && row.percentuaisPorMesPorFilial?.[mes]?.[filial] !== undefined
+                        ? `${row.percentuaisPorMesPorFilial[mes][filial].toFixed(1)}%`
+                        : row.percentuaisPorMes?.[mes] !== undefined
+                        ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
+                        : "-"
+                    }
+                  >
+                    {filial && row.percentuaisPorMesPorFilial?.[mes]?.[filial] !== undefined && row.percentuaisPorMesPorFilial[mes][filial] !== 0 ? (
+                      `${row.percentuaisPorMesPorFilial[mes][filial].toFixed(1)}%`
+                    ) : !filial && row.percentuaisPorMes?.[mes] !== undefined ? (
+                      `${row.percentuaisPorMes[mes].toFixed(1)}%`
+                    ) : (
+                      <span className="text-gray-400">-</span>
+                    )}
+                  </td>
+                </React.Fragment>
+              );
+            })}
+            
+            {/* Colunas de totalizador para este mês */}
+            <td
+              className="px-2 py-1 text-right font-bold cursor-pointer hover:bg-green-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[120px] min-w-[120px] bg-green-50/30"
+              onClick={() => handleRowClick(row, mes)}
+              title={row.valoresPorMes?.[mes] !== undefined ? formatCurrency(row.valoresPorMes[mes]) : "-"}
             >
-              {filial && row.valoresPorMesPorFilial?.[mes]?.[filial] !== undefined && row.valoresPorMesPorFilial[mes][filial] !== 0 ? (
-                (() => {
-                  const valor = row.valoresPorMesPorFilial[mes][filial];
-                  const { formatted, isNegative } = formatCurrencyWithColor(valor);
-                  return (
-                    <span
-                      className={
-                        isNegative
-                          ? "text-red-600 font-bold"
-                          : "text-gray-900"
-                      }
-                    >
-                      {formatted}
-                    </span>
-                  );
-                })()
-              ) : !filial && row.valoresPorMes?.[mes] !== undefined ? (
+              {row.valoresPorMes?.[mes] !== undefined ? (
                 (() => {
                   const { formatted, isNegative } = formatCurrencyWithColor(row.valoresPorMes[mes]);
                   return (
@@ -145,7 +200,7 @@ const TableRow = memo(({
                       className={
                         isNegative
                           ? "text-red-600 font-bold"
-                          : "text-gray-900"
+                          : "text-green-700 font-bold"
                       }
                     >
                       {formatted}
@@ -157,28 +212,21 @@ const TableRow = memo(({
               )}
             </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, filial)}
+              className="px-2 py-1 text-center font-bold cursor-pointer hover:bg-green-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden w-[100px] min-w-[100px] bg-green-50/30"
+              onClick={() => handleRowClick(row, mes)}
               title={
-                filial && row.percentuaisPorMesPorFilial?.[mes]?.[filial] !== undefined
-                  ? `${row.percentuaisPorMesPorFilial[mes][filial].toFixed(1)}%`
-                  : row.percentuaisPorMes?.[mes] !== undefined
+                row.percentuaisPorMes?.[mes] !== undefined
                   ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
                   : "-"
               }
             >
-              {filial && row.percentuaisPorMesPorFilial?.[mes]?.[filial] !== undefined && row.percentuaisPorMesPorFilial[mes][filial] !== 0 ? (
-                `${row.percentuaisPorMesPorFilial[mes][filial].toFixed(1)}%`
-              ) : !filial && row.percentuaisPorMes?.[mes] !== undefined ? (
-                `${row.percentuaisPorMes[mes].toFixed(1)}%`
-              ) : (
-                <span className="text-gray-400">-</span>
-              )}
+              {row.percentuaisPorMes?.[mes] !== undefined
+                ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
+                : <span className="text-gray-400">-</span>}
             </td>
           </React.Fragment>
         );
-        })
-      )}
+      })}
       
       {/* Coluna Total */}
       <td
@@ -1431,20 +1479,39 @@ export default function Teste() {
                   <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) => 
-                    ((filtrosAplicados && filiaisSelecionadas.length > 0) ? filiaisSelecionadas : (opcoesFiliais.length > 0 ? opcoesFiliais : [''])).map((filial: string) => (
-                      <React.Fragment key={`${mes}-${filial || 'default'}`}>
-                        <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}{filial && <><br/>
-                          <span className="text-[10px] font-normal text-gray-600">Filial - {filial}</span></>}
+                  {mesesDisponiveis.map((mes) => {
+                    const filiaisParaMes = (filtrosAplicados && filiaisSelecionadas.length > 0) 
+                      ? filiaisSelecionadas 
+                      : (opcoesFiliais.length > 0 ? opcoesFiliais : ['']);
+                    
+                    return (
+                      <React.Fragment key={mes}>
+                        {/* Cabeçalhos de filiais para este mês */}
+                        {filiaisParaMes.map((filial: string) => (
+                          <React.Fragment key={`${mes}-${filial || 'default'}`}>
+                            <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}{filial && <><br/>
+                              <span className="text-[10px] font-normal text-gray-600">Filial - {filial}</span></>}
+                            </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">
+                             %{filial && <><br/>
+                             <span className="text-[10px] font-normal text-gray-600">Filial - {filial}</span></>}
+                            </th>
+                          </React.Fragment>
+                        ))}
+                        
+                        {/* Cabeçalhos de totalizador para este mês */}
+                        <th className="px-2 py-2 text-right text-xs font-bold text-green-700 uppercase tracking-wide w-[120px] min-w-[120px] bg-gradient-to-r from-green-50 to-emerald-50">
+                          {mes}<br/>
+                          <span className="text-[10px] font-normal text-green-600">Total</span>
                         </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">
-                         %{filial && <><br/>
-                         <span className="text-[10px] font-normal text-gray-600">Filial - {filial}</span></>}
+                        <th className="px-2 py-2 text-center text-xs font-bold text-green-700 uppercase tracking-wide w-[100px] min-w-[100px] bg-gradient-to-r from-green-50 to-emerald-50">
+                          %<br/>
+                          <span className="text-[10px] font-normal text-green-600">Total</span>
                         </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>