Merge pull request #37 from JurunenseDevInterno/feat-fixar-coluna-linha-sintectico
Feat fixar coluna linha sintectico
This commit is contained in:
Alessandro Gonçalves
GitHub
commit
5402940900
|
|
@ -56,6 +56,7 @@ interface HierarchicalRow {
|
|||
percentuaisPorMes?: Record<string, number>;
|
||||
percentualTotal?: number;
|
||||
isCalculado?: boolean;
|
||||
entidades?: string;
|
||||
}
|
||||
|
||||
// Componente memoizado para linhas da tabela
|
||||
|
|
@ -251,6 +252,19 @@ export default function Teste() {
|
|||
const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
|
||||
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(() => {
|
||||
// Carregar períodos disponíveis da API
|
||||
carregarPeriodosDisponiveis();
|
||||
|
|
@ -726,6 +740,7 @@ export default function Teste() {
|
|||
'Conta': row.conta || '',
|
||||
'Código Centro': row.codigo_centro_custo || '',
|
||||
'Código Conta': row.codigo_conta || '',
|
||||
'Entidade': row.entidades || '',
|
||||
'Total': row.total || 0,
|
||||
};
|
||||
|
||||
|
|
@ -756,6 +771,7 @@ export default function Teste() {
|
|||
{ wch: 35 }, // Conta
|
||||
{ wch: 15 }, // Código Centro
|
||||
{ wch: 12 }, // Código Conta
|
||||
{ wch: 20 }, // Entidade
|
||||
{ wch: 15 }, // Total
|
||||
];
|
||||
|
||||
|
|
@ -1019,6 +1035,7 @@ export default function Teste() {
|
|||
valoresPorMes: valoresContaPorMes,
|
||||
percentuaisPorMes: calcularPercentuaisPorMes(valoresContaPorMes, grupo),
|
||||
percentualTotal: calcularPercentualTotal(totalConta, grupo),
|
||||
entidades: contaItems[0]?.entidades || "",
|
||||
});
|
||||
|
||||
// Agrupar por centro de custo dentro da conta
|
||||
|
|
@ -1057,6 +1074,7 @@ export default function Teste() {
|
|||
valoresPorMes: valoresCentroPorMes,
|
||||
percentuaisPorMes: calcularPercentuaisPorMes(valoresCentroPorMes, grupo),
|
||||
percentualTotal: calcularPercentualTotal(totalCentro, grupo),
|
||||
entidades: centroItems[0]?.entidades || "",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1098,6 +1116,7 @@ export default function Teste() {
|
|||
valoresPorMes: valoresCentroPorMes,
|
||||
percentuaisPorMes: calcularPercentuaisPorMes(valoresCentroPorMes, grupo),
|
||||
percentualTotal: calcularPercentualTotal(totalCentro, grupo),
|
||||
entidades: centroItems[0]?.entidades || "",
|
||||
});
|
||||
|
||||
// Agrupar por conta dentro do centro de custo
|
||||
|
|
@ -1136,6 +1155,7 @@ export default function Teste() {
|
|||
valoresPorMes: valoresContaPorMes,
|
||||
percentuaisPorMes: calcularPercentuaisPorMes(valoresContaPorMes, grupo),
|
||||
percentualTotal: calcularPercentualTotal(totalConta, grupo),
|
||||
entidades: contaItems[0]?.entidades || "",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -2782,55 +2802,175 @@ export default function Teste() {
|
|||
{/* Table Container */}
|
||||
{filtrosAplicados && !loading && !error && (
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
|
||||
{/* Scroll Container - Apenas um container com scroll */}
|
||||
<div className="overflow-auto max-h-[500px]" style={{ scrollbarWidth: 'thin' }}>
|
||||
{/* Table */}
|
||||
<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">
|
||||
<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">
|
||||
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] bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
{mes}
|
||||
{/* Container com coluna fixa e scroll horizontal */}
|
||||
<div className="flex max-h-[500px] overflow-hidden">
|
||||
{/* Coluna fixa - Descrição */}
|
||||
<div className="flex-shrink-0 border-r border-gray-200">
|
||||
{/* 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">
|
||||
<div className="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wide w-[300px] min-w-[300px]">
|
||||
Descrição
|
||||
</div>
|
||||
</div>
|
||||
{/* Corpo da descrição com scroll vertical */}
|
||||
<div
|
||||
ref={descricaoScrollRef}
|
||||
className="overflow-y-auto max-h-[500px] [&::-webkit-scrollbar]:hidden"
|
||||
style={{
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none',
|
||||
}}
|
||||
onScroll={() => syncScroll('descricao')}
|
||||
>
|
||||
{hierarchicalData.map((row, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
|
||||
style={{ height: '40px', display: 'flex', alignItems: 'center' }}
|
||||
>
|
||||
<div className="px-4 py-1 w-[300px] min-w-[300px] whitespace-nowrap overflow-hidden flex items-center h-full">
|
||||
<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 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 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>
|
||||
</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>
|
||||
{/* Table Body */}
|
||||
<tbody>
|
||||
{hierarchicalData.map((row, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className={`text-sm border-b border-gray-100 transition-all duration-200 ease-in-out ${getRowStyle(row)}`}
|
||||
style={{ height: '40px' }}
|
||||
>
|
||||
{/* Colunas de valores por mês */}
|
||||
{mesesDisponiveis.map((mes) => (
|
||||
<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]"
|
||||
style={{ height: '40px', verticalAlign: 'middle' }}
|
||||
onClick={() => handleRowClick(row, mes)}
|
||||
title={
|
||||
row.valoresPorMes && row.valoresPorMes[mes]
|
||||
? formatCurrency(row.valoresPorMes[mes])
|
||||
: "-"
|
||||
}
|
||||
>
|
||||
{row.valoresPorMes && row.valoresPorMes[mes]
|
||||
? (() => {
|
||||
const { formatted, isNegative } =
|
||||
formatCurrencyWithColor(row.valoresPorMes[mes]);
|
||||
return (
|
||||
<span
|
||||
className={
|
||||
isNegative
|
||||
? "text-red-600 font-bold"
|
||||
: "text-gray-900"
|
||||
}
|
||||
>
|
||||
{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]"
|
||||
style={{ height: '40px', verticalAlign: 'middle' }}
|
||||
onClick={() => handleRowClick(row, mes)}
|
||||
title={
|
||||
row.percentuaisPorMes &&
|
||||
row.percentuaisPorMes[mes] !== undefined
|
||||
? `${row.percentuaisPorMes[mes].toFixed(1)}%`
|
||||
: "-"
|
||||
}
|
||||
>
|
||||
{row.percentuaisPorMes &&
|
||||
row.percentuaisPorMes[mes] !== undefined
|
||||
? `${row.percentuaisPorMes[mes].toFixed(1)}%`
|
||||
: "-"}
|
||||
</td>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* Coluna Total */}
|
||||
<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]"
|
||||
style={{ height: '40px', verticalAlign: 'middle' }}
|
||||
onClick={() => handleRowClick(row)}
|
||||
title={row.total ? formatCurrency(row.total) : "-"}
|
||||
>
|
||||
{(() => {
|
||||
const { formatted, isNegative } = formatCurrencyWithColor(
|
||||
row.total!
|
||||
);
|
||||
return (
|
||||
<span
|
||||
className={
|
||||
isNegative ? "text-red-600 font-bold" : "text-gray-900"
|
||||
}
|
||||
>
|
||||
{formatted}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</td>
|
||||
|
||||
{/* Coluna Percentual Total */}
|
||||
<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', verticalAlign: 'middle' }}
|
||||
onClick={() => handleRowClick(row)}
|
||||
title={
|
||||
row.percentualTotal !== undefined
|
||||
? `${row.percentualTotal.toFixed(1)}%`
|
||||
: "-"
|
||||
}
|
||||
>
|
||||
{row.percentualTotal !== undefined
|
||||
? `${row.percentualTotal.toFixed(1)}%`
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue