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

fix: correção de alinhamento

This commit is contained in:
Alessandro Gonçaalves 2025-11-10 16:49:22 -03:00
parent 568faff395
commit 860271b13f
1 changed files with 166 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -251,19 +251,6 @@ export default function Teste() {
}); });
const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null); const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
const [isAllExpanded, setIsAllExpanded] = useState(false); 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(() => { useEffect(() => {
// Carregar períodos disponíveis da API // Carregar períodos disponíveis da API
@ -2191,7 +2178,7 @@ export default function Teste() {
if (isSelected) { if (isSelected) {
style += style +=
" bg-green-100 shadow-lg"; " bg-gradient-to-r from-green-100 to-emerald-100 border-l-4 border-green-500 shadow-lg";
} }
switch (row.type) { switch (row.type) {
@ -2212,6 +2199,35 @@ export default function Teste() {
} }
}; };
// Função para obter o background da célula fixa baseado no tipo de linha
const getFixedCellBackground = (row: HierarchicalRow): string => {
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${
row.centro_custo || ""
}-${row.codigo_conta || ""}`;
const isSelected = linhaSelecionada === linhaId;
const isCalculado = row.isCalculado === true;
if (isSelected) {
return "bg-gradient-to-r from-green-100 to-emerald-100";
}
switch (row.type) {
case "grupo":
if (isCalculado) {
return "bg-gradient-to-r from-blue-100 to-indigo-100";
}
return "bg-gradient-to-r from-blue-50 to-indigo-50";
case "subgrupo":
return "bg-gradient-to-r from-gray-50 to-blue-50";
case "centro_custo":
return "bg-gradient-to-r from-gray-50 to-gray-100";
case "conta":
return "bg-white";
default:
return "bg-white";
}
};
const getIndentStyle = (level: number) => { const getIndentStyle = (level: number) => {
return { paddingLeft: `${level * 20}px` }; return { paddingLeft: `${level * 20}px` };
}; };
@ -2802,206 +2818,149 @@ 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 overflow-hidden">
{/* Container com coluna fixa e scroll horizontal */} {/* Scroll Container - Apenas um container com scroll */}
<div className="flex max-h-[500px] overflow-hidden"> <div
{/* Coluna fixa - Descrição */} className="overflow-x-auto overflow-y-auto max-h-[500px]"
<div className="flex-shrink-0 border-r border-gray-200" style={{ minWidth: '300px', width: 'auto' }}> style={{ scrollbarWidth: 'thin' }}
{/* Header fixo da descrição */} >
<div className="sticky top-0 z-20 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200"> {/* Table */}
<div className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide whitespace-nowrap"> <table
Descrição className="w-full border-collapse"
</div> style={{ minWidth: 'max-content' }}
</div> >
{/* Corpo da descrição com scroll vertical */} {/* Table Header */}
<div <thead className="sticky top-0 z-10 bg-gradient-to-r from-blue-50 to-indigo-50">
ref={descricaoScrollRef} <tr className="border-b border-gray-200">
className="overflow-y-auto max-h-[500px] [&::-webkit-scrollbar]:hidden" <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)]">
style={{ Descrição
scrollbarWidth: 'none', </th>
msOverflowStyle: 'none', {mesesDisponiveis.map((mes) => (
}} <React.Fragment key={mes}>
onScroll={() => syncScroll('descricao')} <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}
{hierarchicalData.map((row, index) => {
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`;
const isSelected = linhaSelecionada === linhaId;
return (
<div
key={index}
className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)} cursor-pointer`}
style={{
height: '40px',
minHeight: '40px',
maxHeight: '40px',
display: 'flex',
alignItems: 'center',
minWidth: 'max-content',
boxSizing: 'border-box',
borderLeft: isSelected ? '4px solid rgb(34 197 94)' : 'none',
}}
onClick={() => handleRowClick(row)}
>
<div
className="py-1 whitespace-nowrap flex items-center h-full w-full"
style={{
minWidth: 'max-content',
height: '100%',
paddingLeft: isSelected ? 'calc(1rem - 4px)' : '1rem',
paddingRight: '1rem',
}}
>
<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>
<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 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> </th>
</tr> </React.Fragment>
</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">
{/* Table Body */} Total
<tbody> </th>
{hierarchicalData.map((row, index) => { <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">
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`; %
const isSelected = linhaSelecionada === linhaId; </th>
return ( </tr>
<tr </thead>
key={index}
className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`} {/* Table Body */}
style={{ <tbody>
height: '40px', {hierarchicalData.map((row, index) => {
minHeight: '40px', const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`;
maxHeight: '40px', const isSelected = linhaSelecionada === linhaId;
boxSizing: 'border-box', return (
}} <tr
> key={index}
{/* Colunas de valores por mês */} className={`text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
{mesesDisponiveis.map((mes) => ( >
<React.Fragment key={mes}> <td
<td className={`px-4 py-1 w-[300px] min-w-[300px] whitespace-nowrap overflow-hidden sticky left-0 z-10 ${getFixedCellBackground(row)} shadow-[2px_0_4px_rgba(0,0,0,0.05)] cursor-pointer`}
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)}
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }} >
onClick={() => handleRowClick(row, mes)} <div style={getIndentStyle(row.level)}>
title={ {renderCellContent(row)}
row.valoresPorMes && row.valoresPorMes[mes] </div>
? formatCurrency(row.valoresPorMes[mes]) </td>
: "-"
} {/* Colunas de valores por mês */}
> {mesesDisponiveis.map((mes) => (
{row.valoresPorMes && row.valoresPorMes[mes] <React.Fragment key={mes}>
? (() => { <td
const { formatted, isNegative } = 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]"
formatCurrencyWithColor(row.valoresPorMes[mes]); onClick={() => handleRowClick(row, mes)}
return ( title={
<span row.valoresPorMes && row.valoresPorMes[mes]
className={ ? formatCurrency(row.valoresPorMes[mes])
isNegative : "-"
? "text-red-600 font-bold" }
: "text-gray-900" >
} {row.valoresPorMes && row.valoresPorMes[mes]
> ? (() => {
{formatted} const { formatted, isNegative } =
</span> formatCurrencyWithColor(row.valoresPorMes[mes]);
); return (
})() <span
: "-"} className={
</td> isNegative
<td ? "text-red-600 font-bold"
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]" : "text-gray-900"
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }} }
onClick={() => handleRowClick(row, mes)} >
title={ {formatted}
row.percentuaisPorMes && </span>
row.percentuaisPorMes[mes] !== undefined );
? `${row.percentuaisPorMes[mes].toFixed(1)}%` })()
: "-" : "-"}
} </td>
> <td
{row.percentuaisPorMes && 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 &&
row.percentuaisPorMes[mes] !== undefined row.percentuaisPorMes[mes] !== undefined
? `${row.percentuaisPorMes[mes].toFixed(1)}%` ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
: "-"} : "-"
</td> }
</React.Fragment> >
))} {row.percentuaisPorMes &&
row.percentuaisPorMes[mes] !== undefined
{/* Coluna Total */} ? `${row.percentuaisPorMes[mes].toFixed(1)}%`
<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]" </td>
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }} </React.Fragment>
onClick={() => handleRowClick(row)} ))}
title={row.total ? formatCurrency(row.total) : "-"}
> {/* Coluna Total */}
{(() => { <td
const { formatted, isNegative } = formatCurrencyWithColor( 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]"
row.total! onClick={() => handleRowClick(row)}
); title={row.total ? formatCurrency(row.total) : "-"}
return ( >
<span {(() => {
className={ const { formatted, isNegative } = formatCurrencyWithColor(
isNegative ? "text-red-600 font-bold" : "text-gray-900" row.total!
} );
> return (
{formatted} <span
</span> className={
); isNegative ? "text-red-600 font-bold" : "text-gray-900"
})()} }
</td> >
{formatted}
{/* Coluna Percentual Total */} </span>
<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', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }} </td>
onClick={() => handleRowClick(row)}
title={ {/* Coluna Percentual Total */}
row.percentualTotal !== undefined <td
? `${row.percentualTotal.toFixed(1)}%` 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)}
} title={
> row.percentualTotal !== undefined
{row.percentualTotal !== undefined
? `${row.percentualTotal.toFixed(1)}%` ? `${row.percentualTotal.toFixed(1)}%`
: "-"} : "-"
</td> }
</tr> >
); {row.percentualTotal !== undefined
})} ? `${row.percentualTotal.toFixed(1)}%`
</tbody> : "-"}
</table> </td>
</div> </tr>
</div> );
})}
</tbody>
</table>
</div> </div>
</div> </div>
)} )}