Merge pull request #14 from JurunenseDevInterno/dev

Dev

src/app/DRE/teste.tsx

@@ -83,24 +83,22 @@ const TableRow = memo(({
   formatCurrencyWithColor: (value: number) => { formatted: string; isNegative: boolean };
 }) => {
   return (
-    <div
-      key={index}
-      className={`flex items-center gap-2 px-4 py-1 text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(
+    <tr
+      className={`text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(
         row
       )}`}
     >
-      <div
-        className="flex-1 min-w-[300px] max-w-[400px] whitespace-nowrap overflow-hidden"
-        style={getIndentStyle(row.level)}
-      >
-        {renderCellContent(row)}
-      </div>
+      <td className="px-4 py-1 w-[300px] min-w-[300px] whitespace-nowrap overflow-hidden">
+        <div style={getIndentStyle(row.level)}>
+          {renderCellContent(row)}
+        </div>
+      </td>
       
       {/* Colunas de valores por mês */}
       {mesesDisponiveis.map((mes) => (
-        <div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
-          <div
-            className="flex-1 min-w-[120px] text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
+        <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]"
             onClick={() => handleRowClick(row, mes)}
             title={
               row.valoresPorMes && row.valoresPorMes[mes]
@@ -125,9 +123,9 @@ const TableRow = memo(({
                   );
                 })()
               : "-"}
-          </div>
-          <div
-            className="flex-1 min-w-[100px] text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
+          </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)}
             title={
               row.percentuaisPorMes &&
@@ -140,13 +138,13 @@ const TableRow = memo(({
             row.percentuaisPorMes[mes] !== undefined
               ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
               : "-"}
-          </div>
-        </div>
+          </td>
+        </React.Fragment>
       ))}
       
       {/* Coluna Total */}
-      <div
-        className="flex-1 min-w-[120px] text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
+      <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]"
         onClick={() => handleRowClick(row)}
         title={row.total ? formatCurrency(row.total) : "-"}
       >
@@ -164,8 +162,8 @@ const TableRow = memo(({
             </span>
           );
         })()}
-      </div>
-    </div>
+      </td>
+    </tr>
   );
 });
 
@@ -1772,8 +1770,8 @@ export default function Teste() {
                       : "🏢 Centros de Custo → 📄 Contas"
                     }
                   </div>
+                  </div>
                 </div>
-              </div>
 
               <SheetFooter className="flex gap-2">
                 {/* <Button variant="outline" onClick={limparFiltros} className="flex-1">
@@ -1788,8 +1786,8 @@ export default function Teste() {
               </SheetFooter>
             </SheetContent>
           </Sheet>
-          </div>
-        </div>
+              </div>
+            </div>
       </div>
 
       {/* Loading quando aplicando filtros */}
@@ -1855,43 +1853,53 @@ export default function Teste() {
 
       {/* Table Container */}
       {filtrosAplicados && !loading && !error && (
-        <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
-        {/* Table Header */}
-        <div className="p-2 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20">
-          <div className="flex items-center justify-between px-4 py-1">
-            <div className="flex items-center gap-2 text-xs font-semibold text-gray-700 uppercase tracking-wide">
-              <div className="flex-1 min-w-[300px] max-w-[400px]">Descrição</div>
-              {mesesDisponiveis.map((mes) => (
-                <div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
-                  <div className="flex-1 min-w-[120px] text-right">{mes}</div>
-                  <div className="flex-1 min-w-[100px] text-center text-xs text-gray-500">
-                  %
-                  </div>
-                </div>
-              ))}
-              <div className="flex-1 min-w-[120px] text-right">Total</div>
-              </div>
-            </div>
-        </div>
-
-        {/* Table Body */}
-        <div className="max-h-[500px] overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
-          {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}
-            />
-          ))}
+        <div className="bg-white rounded-xl shadow-lg border border-gray-200">
+          {/* Scroll Container */}
+          <div className="overflow-x-auto overflow-y-auto max-h-[500px]">
+            {/* Table */}
+            <table className="w-full border-collapse">
+              {/* Table Header */}
+              <thead>
+                <tr className="bg-gradient-to-r from-blue-50 to-indigo-50 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]">
+                    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]">
+                        {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]">
+                        %
+                      </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]">
+                    Total
+                  </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>
         </div>
       </div>
       )}