fix: correção de alinhamento
This commit is contained in:
Alessandro Gonçaalves
parent
568faff395
commit
860271b13f
|
|
@ -252,19 +252,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
|
||||||
carregarPeriodosDisponiveis();
|
carregarPeriodosDisponiveis();
|
||||||
|
|
@ -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">
|
||||||
|
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>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
{/* Table Body */}
|
{/* Table Body */}
|
||||||
<tbody>
|
<tbody>
|
||||||
{hierarchicalData.map((row, index) => {
|
{hierarchicalData.map((row, index) => {
|
||||||
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`;
|
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${row.centro_custo || ""}-${row.codigo_conta || ""}`;
|
||||||
const isSelected = linhaSelecionada === linhaId;
|
const isSelected = linhaSelecionada === linhaId;
|
||||||
return (
|
return (
|
||||||
<tr
|
<tr
|
||||||
key={index}
|
key={index}
|
||||||
className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
|
className={`text-sm border-b border-gray-100 hover:bg-gray-50 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
|
||||||
style={{
|
>
|
||||||
height: '40px',
|
<td
|
||||||
minHeight: '40px',
|
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`}
|
||||||
maxHeight: '40px',
|
onClick={() => handleRowClick(row)}
|
||||||
boxSizing: 'border-box',
|
>
|
||||||
}}
|
<div style={getIndentStyle(row.level)}>
|
||||||
>
|
{renderCellContent(row)}
|
||||||
{/* Colunas de valores por mês */}
|
</div>
|
||||||
{mesesDisponiveis.map((mes) => (
|
</td>
|
||||||
<React.Fragment key={mes}>
|
|
||||||
<td
|
{/* Colunas de valores por mês */}
|
||||||
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]"
|
{mesesDisponiveis.map((mes) => (
|
||||||
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
|
<React.Fragment key={mes}>
|
||||||
onClick={() => handleRowClick(row, mes)}
|
<td
|
||||||
title={
|
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.valoresPorMes && row.valoresPorMes[mes]
|
onClick={() => handleRowClick(row, mes)}
|
||||||
? formatCurrency(row.valoresPorMes[mes])
|
title={
|
||||||
: "-"
|
row.valoresPorMes && row.valoresPorMes[mes]
|
||||||
}
|
? formatCurrency(row.valoresPorMes[mes])
|
||||||
>
|
: "-"
|
||||||
{row.valoresPorMes && row.valoresPorMes[mes]
|
}
|
||||||
? (() => {
|
>
|
||||||
const { formatted, isNegative } =
|
{row.valoresPorMes && row.valoresPorMes[mes]
|
||||||
formatCurrencyWithColor(row.valoresPorMes[mes]);
|
? (() => {
|
||||||
return (
|
const { formatted, isNegative } =
|
||||||
<span
|
formatCurrencyWithColor(row.valoresPorMes[mes]);
|
||||||
className={
|
return (
|
||||||
isNegative
|
<span
|
||||||
? "text-red-600 font-bold"
|
className={
|
||||||
: "text-gray-900"
|
isNegative
|
||||||
}
|
? "text-red-600 font-bold"
|
||||||
>
|
: "text-gray-900"
|
||||||
{formatted}
|
}
|
||||||
</span>
|
>
|
||||||
);
|
{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]"
|
</td>
|
||||||
style={{ height: '40px', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
|
<td
|
||||||
onClick={() => handleRowClick(row, mes)}
|
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]"
|
||||||
title={
|
onClick={() => handleRowClick(row, mes)}
|
||||||
row.percentuaisPorMes &&
|
title={
|
||||||
row.percentuaisPorMes[mes] !== undefined
|
row.percentuaisPorMes &&
|
||||||
? `${row.percentuaisPorMes[mes].toFixed(1)}%`
|
|
||||||
: "-"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{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
|
||||||
|
? `${row.percentuaisPorMes[mes].toFixed(1)}%`
|
||||||
|
: "-"}
|
||||||
|
</td>
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
{/* Coluna Total */}
|
{/* Coluna Total */}
|
||||||
<td
|
<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]"
|
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', minHeight: '40px', maxHeight: '40px', verticalAlign: 'middle', boxSizing: 'border-box' }}
|
onClick={() => handleRowClick(row)}
|
||||||
onClick={() => handleRowClick(row)}
|
title={row.total ? formatCurrency(row.total) : "-"}
|
||||||
title={row.total ? formatCurrency(row.total) : "-"}
|
>
|
||||||
>
|
{(() => {
|
||||||
{(() => {
|
const { formatted, isNegative } = formatCurrencyWithColor(
|
||||||
const { formatted, isNegative } = formatCurrencyWithColor(
|
row.total!
|
||||||
row.total!
|
);
|
||||||
);
|
return (
|
||||||
return (
|
<span
|
||||||
<span
|
className={
|
||||||
className={
|
isNegative ? "text-red-600 font-bold" : "text-gray-900"
|
||||||
isNegative ? "text-red-600 font-bold" : "text-gray-900"
|
}
|
||||||
}
|
>
|
||||||
>
|
{formatted}
|
||||||
{formatted}
|
</span>
|
||||||
</span>
|
);
|
||||||
);
|
})()}
|
||||||
})()}
|
</td>
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Coluna Percentual Total */}
|
{/* Coluna Percentual Total */}
|
||||||
<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]"
|
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' }}
|
onClick={() => handleRowClick(row)}
|
||||||
onClick={() => handleRowClick(row)}
|
title={
|
||||||
title={
|
row.percentualTotal !== undefined
|
||||||
row.percentualTotal !== undefined
|
|
||||||
? `${row.percentualTotal.toFixed(1)}%`
|
|
||||||
: "-"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{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>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue