fix:linha calculado bg

This commit is contained in:
Alessandro Gonçaalves 2025-10-21 17:57:58 -03:00
parent 69a66a6cab
commit 461f8966ab
2 changed files with 65 additions and 10 deletions

View File

@ -67,6 +67,7 @@ interface AnaliticoProps {
codigoGrupo?: string;
codigoSubgrupo?: string;
codigoConta?: string;
linhaSelecionada?: string; // Adicionar propriedade para linha selecionada
};
}
@ -563,7 +564,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> */}
<div>
<h1 className="text-2xl font-bold text-gray-900">
Análise Analítica
Análise Analítica{filtros.linhaSelecionada ? ` - ${filtros.linhaSelecionada}` : ""}
</h1>
<p className="text-sm text-gray-500">
Relatório detalhado de transações

View File

@ -100,6 +100,7 @@ export default function Teste() {
codigoGrupo: "",
codigoSubgrupo: "",
codigoConta: "",
linhaSelecionada: "", // Adicionar informação da linha selecionada
});
const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
@ -270,6 +271,7 @@ export default function Teste() {
codigoGrupo,
codigoSubgrupo,
codigoConta: row.codigo_conta?.toString() || "",
linhaSelecionada: row.grupo || row.subgrupo || row.centro_custo || row.conta || "", // Incluir informação da linha selecionada
};
console.log('🎯 Novos filtros para analítico:', novosFiltros);
@ -740,6 +742,9 @@ export default function Teste() {
}-${row.codigo_conta || ""}`;
const isSelected = linhaSelecionada === linhaId;
// Verificar se é um grupo calculado
const isCalculado = row.isCalculado === true;
let style = baseStyle;
if (isSelected) {
@ -749,6 +754,10 @@ export default function Teste() {
switch (row.type) {
case "grupo":
if (isCalculado) {
// Destacar grupos calculados com cor mais vibrante
return `${style} bg-gradient-to-r from-amber-100/80 to-yellow-100/80 font-bold text-gray-900 border-b-2 border-amber-300 shadow-sm`;
}
return `${style} bg-gradient-to-r from-blue-50/20 to-indigo-50/20 font-bold text-gray-900 border-b-2 border-blue-200`;
case "subgrupo":
return `${style} bg-gradient-to-r from-gray-50/30 to-blue-50/20 font-semibold text-gray-800`;
@ -1041,7 +1050,7 @@ export default function Teste() {
Limpar
</Button>
</div>
</div>
</div>
<div className="max-h-32 overflow-y-auto border rounded-md p-2 space-y-2">
{opcoesContas.map(conta => (
<div key={conta} className="flex items-center space-x-2">
@ -1193,17 +1202,62 @@ export default function Teste() {
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
{/* Table Header */}
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20">
<div className="flex items-center gap-4 px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wide">
<div className="flex-1 min-w-[300px] max-w-[400px]">Descrição</div>
{mesesDisponiveis.map((mes) => (
<div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
<div className="flex-1 min-w-[120px] text-right">{mes}</div>
<div className="flex-1 min-w-[100px] text-center text-xs text-gray-500">
<div className="flex items-center justify-between px-4 py-2">
<div className="flex items-center gap-4 text-xs font-semibold text-gray-700 uppercase tracking-wide">
<div className="flex-1 min-w-[300px] max-w-[400px]">Descrição</div>
{mesesDisponiveis.map((mes) => (
<div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
<div className="flex-1 min-w-[120px] text-right">{mes}</div>
<div className="flex-1 min-w-[100px] text-center text-xs text-gray-500">
%
</div>
</div>
))}
<div className="flex-1 min-w-[120px] text-right">Total</div>
<div className="flex-1 min-w-[120px] text-right">Total</div>
</div>
{/* Botões de controle */}
<div className="flex gap-2 ml-4">
<Button
variant="outline"
size="sm"
onClick={() => {
// Expandir todos os grupos
const todosGrupos = hierarchicalData
.filter(row => row.type === "grupo")
.map(row => row.grupo!);
setExpandedGroups(new Set(todosGrupos));
// Expandir todos os subgrupos
const todosSubgrupos = hierarchicalData
.filter(row => row.type === "subgrupo")
.map(row => `${row.grupo}-${row.subgrupo}`);
setExpandedSubgrupos(new Set(todosSubgrupos));
// Expandir todos os centros de custo
const todosCentros = hierarchicalData
.filter(row => row.type === "centro_custo")
.map(row => `${row.grupo}-${row.subgrupo}-${row.centro_custo}`);
setExpandedCentros(new Set(todosCentros));
}}
className="text-xs h-6 px-2"
>
Expandir Tudo
</Button>
<Button
variant="outline"
size="sm"
onClick={() => {
// Recolher tudo
setExpandedGroups(new Set());
setExpandedSubgrupos(new Set());
setExpandedCentros(new Set());
}}
className="text-xs h-6 px-2"
>
Recolher Tudo
</Button>
</div>
</div>
</div>
@ -1212,7 +1266,7 @@ export default function Teste() {
{hierarchicalData.map((row, index) => (
<div
key={index}
className={`flex items-center gap-4 px-4 py-3 text-sm border-b border-gray-100 hover:bg-gray-50 transition-colors ${getRowStyle(
className={`flex items-center gap-4 px-4 py-2 text-sm border-b border-gray-100 hover:bg-gray-50 transition-colors ${getRowStyle(
row
)}`}
>