joelson
/
vendaweb-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: correção da tabela sintetica

This commit is contained in:
Alessandro Gonçaalves 2025-10-23 14:44:56 -03:00
parent a0b2e91d6a
commit 36693f2013
1 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/app/DRE/teste.tsx
View File

@ -83,24 +83,22 @@ const TableRow = memo(({
formatCurrencyWithColor: (value: number) => { formatted: string; isNegative: boolean }; formatCurrencyWithColor: (value: number) => { formatted: string; isNegative: boolean };
}) => { }) => {
return ( return (
<div <tr
key={index} className={`text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(
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(
row row
)}`} )}`}
> >
<div <td className="px-4 py-1 w-[300px] min-w-[300px] whitespace-nowrap overflow-hidden">
className="flex-1 min-w-[300px] max-w-[400px] whitespace-nowrap overflow-hidden" <div style={getIndentStyle(row.level)}>
style={getIndentStyle(row.level)}
>
{renderCellContent(row)} {renderCellContent(row)}
</div> </div>
</td>
{/* Colunas de valores por mês */} {/* Colunas de valores por mês */}
{mesesDisponiveis.map((mes) => ( {mesesDisponiveis.map((mes) => (
<div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2"> <React.Fragment key={mes}>
<div <td
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" 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)} onClick={() => handleRowClick(row, mes)}
title={ title={
row.valoresPorMes && row.valoresPorMes[mes] row.valoresPorMes && row.valoresPorMes[mes]
@ -125,9 +123,9 @@ const TableRow = memo(({
); );
})() })()
: "-"} : "-"}
</div> </td>
<div <td
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" 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)} onClick={() => handleRowClick(row, mes)}
title={ title={
row.percentuaisPorMes && row.percentuaisPorMes &&
@ -140,13 +138,13 @@ const TableRow = memo(({
row.percentuaisPorMes[mes] !== undefined row.percentuaisPorMes[mes] !== undefined
? `${row.percentuaisPorMes[mes].toFixed(1)}%` ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
: "-"} : "-"}
</div> </td>
</div> </React.Fragment>
))} ))}
{/* Coluna Total */} {/* Coluna Total */}
<div <td
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" 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)} onClick={() => handleRowClick(row)}
title={row.total ? formatCurrency(row.total) : "-"} title={row.total ? formatCurrency(row.total) : "-"}
> >
@ -164,8 +162,8 @@ const TableRow = memo(({
</span> </span>
); );
})()} })()}
</div> </td>
</div> </tr>
); );
}); });
@ -1855,27 +1853,35 @@ export default function Teste() {
{/* Table Container */} {/* Table Container */}
{filtrosAplicados && !loading && !error && ( {filtrosAplicados && !loading && !error && (
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"> <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 */} {/* 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"> <thead>
<div className="flex items-center justify-between px-4 py-1"> <tr className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
<div className="flex items-center gap-2 text-xs font-semibold text-gray-700 uppercase tracking-wide"> <th className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px]">
<div className="flex-1 min-w-[300px] max-w-[400px]">Descrição</div> Descrição
</th>
{mesesDisponiveis.map((mes) => ( {mesesDisponiveis.map((mes) => (
<div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2"> <React.Fragment key={mes}>
<div className="flex-1 min-w-[120px] text-right">{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]">
<div className="flex-1 min-w-[100px] text-center text-xs text-gray-500"> {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]">
% %
</div> </th>
</div> </React.Fragment>
))} ))}
<div className="flex-1 min-w-[120px] text-right">Total</div> <th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px]">
</div> Total
</div> </th>
</div> </tr>
</thead>
{/* Table Body */} {/* Table Body */}
<div className="max-h-[500px] overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100"> <tbody>
{hierarchicalData.map((row, index) => ( {hierarchicalData.map((row, index) => (
<TableRow <TableRow
key={index} key={index}
@ -1892,6 +1898,8 @@ export default function Teste() {
formatCurrencyWithColor={formatCurrencyWithColor} formatCurrencyWithColor={formatCurrencyWithColor}
/> />
))} ))}
</tbody>
</table>
</div> </div>
</div> </div>
)} )}