Merge pull request #38 from JurunenseDevInterno/dev

Dev

src/app/DRE/teste.tsx

@@ -56,6 +56,7 @@ interface HierarchicalRow {
   percentuaisPorMes?: Record<string, number>;
   percentualTotal?: number;
   isCalculado?: boolean;
+  entidades?: string;
 }
 
 // Componente memoizado para linhas da tabela
@@ -250,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
@@ -726,6 +740,7 @@ export default function Teste() {
         'Conta': row.conta || '',
         'Código Centro': row.codigo_centro_custo || '',
         'Código Conta': row.codigo_conta || '',
+        'Entidade': row.entidades || '',
         'Total': row.total || 0,
       };
 
@@ -756,6 +771,7 @@ export default function Teste() {
       { wch: 35 },  // Conta
       { wch: 15 },  // Código Centro
       { wch: 12 },  // Código Conta
+      { wch: 20 },  // Entidade
       { wch: 15 },  // Total
     ];
     
@@ -1019,6 +1035,7 @@ export default function Teste() {
             valoresPorMes: valoresContaPorMes,
             percentuaisPorMes: calcularPercentuaisPorMes(valoresContaPorMes, grupo),
             percentualTotal: calcularPercentualTotal(totalConta, grupo),
+            entidades: contaItems[0]?.entidades || "",
           });
 
           // Agrupar por centro de custo dentro da conta
@@ -1057,6 +1074,7 @@ export default function Teste() {
               valoresPorMes: valoresCentroPorMes,
               percentuaisPorMes: calcularPercentuaisPorMes(valoresCentroPorMes, grupo),
               percentualTotal: calcularPercentualTotal(totalCentro, grupo),
+              entidades: centroItems[0]?.entidades || "",
             });
           });
         });
@@ -1098,6 +1116,7 @@ export default function Teste() {
             valoresPorMes: valoresCentroPorMes,
             percentuaisPorMes: calcularPercentuaisPorMes(valoresCentroPorMes, grupo),
             percentualTotal: calcularPercentualTotal(totalCentro, grupo),
+            entidades: centroItems[0]?.entidades || "",
           });
 
           // Agrupar por conta dentro do centro de custo
@@ -1136,6 +1155,7 @@ export default function Teste() {
               valoresPorMes: valoresContaPorMes,
               percentuaisPorMes: calcularPercentuaisPorMes(valoresContaPorMes, grupo),
               percentualTotal: calcularPercentualTotal(totalConta, grupo),
+              entidades: contaItems[0]?.entidades || "",
             });
           });
         });
@@ -2782,55 +2802,175 @@ 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 */}
-            <table className="w-full border-collapse">
+            <div className="flex-shrink-0 border-r border-gray-200">
-              {/* Table Header */}
+              {/* Header fixo da descrição */}
-              <thead className="sticky top-0 z-10 bg-gradient-to-r from-blue-50 to-indigo-50">
+              <div className="sticky top-0 z-20 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
-                <tr className="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]">
-                  <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
-                    Descrição
+                </div>
-                  </th>
+              </div>
-                  {mesesDisponiveis.map((mes) => (
+              {/* Corpo da descrição com scroll vertical */}
-                    <React.Fragment key={mes}>
+              <div 
-                      <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">
+                ref={descricaoScrollRef}
-                        {mes}
+                className="overflow-y-auto max-h-[500px] [&::-webkit-scrollbar]:hidden" 
+                style={{ 
+                  scrollbarWidth: 'none',
+                  msOverflowStyle: 'none',
+                }}
+                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>
+                    </tr>
-                  ))}
+                  </thead>
-                  <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
+                  {/* Table Body */}
-                  </th>
+                  <tbody>
-                  <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">
+                    {hierarchicalData.map((row, index) => (
-                    %
+                      <tr
-                  </th>
+                        key={index}
-                </tr>
+                        className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
-              </thead>
+                        style={{ height: '40px' }}
-              
+                      >
-              {/* Table Body */}
+                        {/* Colunas de valores por mês */}
-              <tbody>
+                        {mesesDisponiveis.map((mes) => (
-                {hierarchicalData.map((row, index) => (
+                          <React.Fragment key={mes}>
-                  <TableRow
+                            <td
-                    key={index}
+                              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]"
-                    row={row}
+                              style={{ height: '40px', verticalAlign: 'middle' }}
-                    index={index}
+                              onClick={() => handleRowClick(row, mes)}
-                    toggleGroup={toggleGroup}
+                              title={
-                    toggleCentro={toggleCentro}
+                                row.valoresPorMes && row.valoresPorMes[mes]
-                    handleRowClick={handleRowClick}
+                                  ? formatCurrency(row.valoresPorMes[mes])
-                    getRowStyle={getRowStyle}
+                                  : "-"
-                    getIndentStyle={getIndentStyle}
+                              }
-                    renderCellContent={renderCellContent}
+                            >
-                    mesesDisponiveis={mesesDisponiveis}
+                              {row.valoresPorMes && row.valoresPorMes[mes]
-                    formatCurrency={formatCurrency}
+                                ? (() => {
-                    formatCurrencyWithColor={formatCurrencyWithColor}
+                                    const { formatted, isNegative } =
-                  />
+                                      formatCurrencyWithColor(row.valoresPorMes[mes]);
-                ))}
+                                    return (
-              </tbody>
+                                      <span
-            </table>
+                                        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>
       )}