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

Merge pull request #14 from JurunenseDevInterno/dev 

Dev
This commit is contained in:
Alessandro Gonçalves 2025-10-23 14:46:31 -03:00 committed by GitHub
parent abaf9ab85e 2eb9e6367c
commit bbe90fe2da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
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)}
> </div>
{renderCellContent(row)} </td>
</div>
{/* 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>
); );
}); });
@ -1772,8 +1770,8 @@ export default function Teste() {
: "🏢 Centros de Custo → 📄 Contas" : "🏢 Centros de Custo → 📄 Contas"
} }
</div> </div>
</div>
</div> </div>
</div>
<SheetFooter className="flex gap-2"> <SheetFooter className="flex gap-2">
{/* <Button variant="outline" onClick={limparFiltros} className="flex-1"> {/* <Button variant="outline" onClick={limparFiltros} className="flex-1">
@ -1788,8 +1786,8 @@ export default function Teste() {
</SheetFooter> </SheetFooter>
</SheetContent> </SheetContent>
</Sheet> </Sheet>
</div> </div>
</div> </div>
</div> </div>
{/* Loading quando aplicando filtros */} {/* Loading quando aplicando filtros */}
@ -1855,43 +1853,53 @@ 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">
{/* Table Header */} {/* Scroll Container */}
<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="overflow-x-auto overflow-y-auto max-h-[500px]">
<div className="flex items-center justify-between px-4 py-1"> {/* Table */}
<div className="flex items-center gap-2 text-xs font-semibold text-gray-700 uppercase tracking-wide"> <table className="w-full border-collapse">
<div className="flex-1 min-w-[300px] max-w-[400px]">Descrição</div> {/* Table Header */}
{mesesDisponiveis.map((mes) => ( <thead>
<div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2"> <tr className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200">
<div className="flex-1 min-w-[120px] text-right">{mes}</div> <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-[100px] text-center text-xs text-gray-500"> Descrição
% </th>
</div> {mesesDisponiveis.map((mes) => (
</div> <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]">
<div className="flex-1 min-w-[120px] text-right">Total</div> {mes}
</div> </th>
</div> <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>
{/* Table Body */} </React.Fragment>
<div className="max-h-[500px] overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100"> ))}
{hierarchicalData.map((row, index) => ( <th className="px-4 py-2 text-right text-xs font-semibold text-gray-700 uppercase tracking-wide w-[120px] min-w-[120px]">
<TableRow Total
key={index} </th>
row={row} </tr>
index={index} </thead>
toggleGroup={toggleGroup}
toggleCentro={toggleCentro} {/* Table Body */}
handleRowClick={handleRowClick} <tbody>
getRowStyle={getRowStyle} {hierarchicalData.map((row, index) => (
getIndentStyle={getIndentStyle} <TableRow
renderCellContent={renderCellContent} key={index}
mesesDisponiveis={mesesDisponiveis} row={row}
formatCurrency={formatCurrency} index={index}
formatCurrencyWithColor={formatCurrencyWithColor} toggleGroup={toggleGroup}
/> toggleCentro={toggleCentro}
))} handleRowClick={handleRowClick}
getRowStyle={getRowStyle}
getIndentStyle={getIndentStyle}
renderCellContent={renderCellContent}
mesesDisponiveis={mesesDisponiveis}
formatCurrency={formatCurrency}
formatCurrencyWithColor={formatCurrencyWithColor}
/>
))}
</tbody>
</table>
</div> </div>
</div> </div>
)} )}