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

View File

@ -100,6 +100,7 @@ export default function Teste() {
codigoGrupo: "", codigoGrupo: "",
codigoSubgrupo: "", codigoSubgrupo: "",
codigoConta: "", codigoConta: "",
linhaSelecionada: "", // Adicionar informação da linha selecionada
}); });
const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null); const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
@ -270,6 +271,7 @@ export default function Teste() {
codigoGrupo, codigoGrupo,
codigoSubgrupo, codigoSubgrupo,
codigoConta: row.codigo_conta?.toString() || "", 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); console.log('🎯 Novos filtros para analítico:', novosFiltros);
@ -740,6 +742,9 @@ export default function Teste() {
}-${row.codigo_conta || ""}`; }-${row.codigo_conta || ""}`;
const isSelected = linhaSelecionada === linhaId; const isSelected = linhaSelecionada === linhaId;
// Verificar se é um grupo calculado
const isCalculado = row.isCalculado === true;
let style = baseStyle; let style = baseStyle;
if (isSelected) { if (isSelected) {
@ -749,6 +754,10 @@ export default function Teste() {
switch (row.type) { switch (row.type) {
case "grupo": 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`; 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": case "subgrupo":
return `${style} bg-gradient-to-r from-gray-50/30 to-blue-50/20 font-semibold text-gray-800`; return `${style} bg-gradient-to-r from-gray-50/30 to-blue-50/20 font-semibold text-gray-800`;
@ -1193,7 +1202,8 @@ export default function Teste() {
<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">
{/* Table Header */} {/* 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="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 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> <div className="flex-1 min-w-[300px] max-w-[400px]">Descrição</div>
{mesesDisponiveis.map((mes) => ( {mesesDisponiveis.map((mes) => (
<div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2"> <div key={mes} className="flex min-w-[240px] max-w-[300px] gap-2">
@ -1205,6 +1215,50 @@ export default function Teste() {
))} ))}
<div className="flex-1 min-w-[120px] text-right">Total</div> <div className="flex-1 min-w-[120px] text-right">Total</div>
</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> </div>
{/* Table Body */} {/* Table Body */}
@ -1212,7 +1266,7 @@ export default function Teste() {
{hierarchicalData.map((row, index) => ( {hierarchicalData.map((row, index) => (
<div <div
key={index} 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 row
)}`} )}`}
> >