vendaweb-api/src/app/DRE/teste.tsx

"use client";

import { LoaderPinwheel } from "lucide-react";
import { useEffect, useState } from "react";
import AnaliticoComponent from "./analitico";

interface DREItem {
  codfilial: string;
  data_competencia: string;
  data_cai: string;
  grupo: string;
  subgrupo: string;
  centro_custo: string;
  codigo_conta: number;
  conta: string;
  valor: string;
}

interface HierarchicalRow {
  type: "grupo" | "subgrupo" | "centro_custo" | "conta";
  level: number;
  grupo?: string;
  subgrupo?: string;
  centro_custo?: string;
  conta?: string;
  codigo_conta?: number;
  total?: number;
  isExpanded?: boolean;
  valoresPorMes?: Record<string, number>;
  percentuaisPorMes?: Record<string, number>;
}

export default function Teste() {
  const [data, setData] = useState<DREItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
  const [expandedSubgrupos, setExpandedSubgrupos] = useState<Set<string>>(
    new Set()
  );
  const [expandedCentros, setExpandedCentros] = useState<Set<string>>(
    new Set()
  );
  const [mesesDisponiveis, setMesesDisponiveis] = useState<string[]>([]);

  // Estados para analítico
  const [analiticoFiltros, setAnaliticoFiltros] = useState({
    dataInicio: "",
    dataFim: "",
    centroCusto: "",
    codigoGrupo: "",
    codigoSubgrupo: "",
    codigoConta: "",
  });
  const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await fetch("/api/dre");

      if (!response.ok) {
        throw new Error(`Erro ao carregar dados: ${response.status}`);
      }

      const result = await response.json();
      setData(result);

      // Extrair meses únicos dos dados
      const meses = [
        ...new Set(
          result.map((item: DREItem) => {
            const dataCompetencia = new Date(item.data_competencia);
            return `${dataCompetencia.getFullYear()}-${String(
              dataCompetencia.getMonth() + 1
            ).padStart(2, "0")}`;
          })
        ),
      ].sort() as string[];

      setMesesDisponiveis(meses);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro desconhecido");
    } finally {
      setLoading(false);
    }
  };

  const formatCurrency = (value: string | number) => {
    const numValue = typeof value === "string" ? parseFloat(value) : value;
    return numValue.toLocaleString("pt-BR", {
      style: "currency",
      currency: "BRL",
    });
  };

  const formatCurrencyWithColor = (value: string | number) => {
    const numValue = typeof value === "string" ? parseFloat(value) : value;
    const formatted = formatCurrency(value);
    const isNegative = numValue < 0;
    return { formatted, isNegative };
  };

  // Função para extrair códigos dos grupos e subgrupos
  const extractCodes = (grupo: string, subgrupo?: string) => {
    const grupoMatch = grupo.match(/^(\d+)/);
    const codigoGrupo = grupoMatch ? grupoMatch[1] : "";

    let codigoSubgrupo = "";
    if (subgrupo) {
      // Primeiro tenta extrair código numérico (ex: "001.008 - LOJA 8" -> "001.008")
      const subgrupoMatch = subgrupo.match(/^(\d+(?:\.\d+)+)/);
      if (subgrupoMatch) {
        codigoSubgrupo = subgrupoMatch[1];
      } else {
        // Se não tem código numérico, usa a descrição completa (ex: "DESPESAS ADMINISTRATIVAS")
        codigoSubgrupo = subgrupo;
      }
    }

    return { codigoGrupo, codigoSubgrupo };
  };

  // Função para lidar com clique nas linhas
  const handleRowClick = (row: HierarchicalRow, mesSelecionado?: string) => {
    if (!data.length) return;

    // Pegar todas as datas disponíveis para definir o período
    const datas = data.map((item) => item.data_competencia);
    const dataInicio = Math.min(...datas.map((d) => new Date(d).getTime()));
    const dataFim = Math.max(...datas.map((d) => new Date(d).getTime()));

    const dataInicioStr = new Date(dataInicio).toISOString().substring(0, 7); // YYYY-MM
    const dataFimStr = new Date(dataFim).toISOString().substring(0, 7); // YYYY-MM

    const { codigoGrupo, codigoSubgrupo } = extractCodes(
      row.grupo || "",
      row.subgrupo
    );

    // Criar um identificador único para a linha
    const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${
      row.centro_custo || ""
    }-${row.codigo_conta || ""}`;
    setLinhaSelecionada(linhaId);

    // Se um mês específico foi selecionado, usar apenas esse mês
    const dataInicioFiltro = mesSelecionado || dataInicioStr;
    const dataFimFiltro = mesSelecionado || dataFimStr;

    setAnaliticoFiltros({
      dataInicio: dataInicioFiltro,
      dataFim: dataFimFiltro,
      centroCusto: row.centro_custo || "",
      codigoGrupo,
      codigoSubgrupo,
      codigoConta: row.codigo_conta?.toString() || "",
    });
  };

  const toggleGroup = (grupo: string) => {
    const newExpanded = new Set(expandedGroups);
    if (newExpanded.has(grupo)) {
      newExpanded.delete(grupo);
    } else {
      newExpanded.add(grupo);
    }
    setExpandedGroups(newExpanded);
  };

  const toggleSubgrupo = (subgrupo: string) => {
    const newExpanded = new Set(expandedSubgrupos);
    if (newExpanded.has(subgrupo)) {
      newExpanded.delete(subgrupo);
    } else {
      newExpanded.add(subgrupo);
    }
    setExpandedSubgrupos(newExpanded);
  };

  const toggleCentro = (centro: string) => {
    const newExpanded = new Set(expandedCentros);
    if (newExpanded.has(centro)) {
      newExpanded.delete(centro);
    } else {
      newExpanded.add(centro);
    }
    setExpandedCentros(newExpanded);
  };

  const calcularValoresPorMes = (items: DREItem[]): Record<string, number> => {
    const valoresPorMes: Record<string, number> = {};

    items.forEach((item) => {
      const dataCompetencia = new Date(item.data_competencia);
      const anoMes = `${dataCompetencia.getFullYear()}-${String(
        dataCompetencia.getMonth() + 1
      ).padStart(2, "0")}`;

      if (!valoresPorMes[anoMes]) {
        valoresPorMes[anoMes] = 0;
      }
      valoresPorMes[anoMes] += parseFloat(item.valor);
    });

    return valoresPorMes;
  };

  // Função para calcular percentuais baseado no grupo 03 como referência
  const calcularPercentuaisPorMes = (
    valoresPorMes: Record<string, number>,
    grupo: string
  ): Record<string, number> => {
    const percentuais: Record<string, number> = {};

    // Se for o grupo 03, retorna 100% para todos os meses
    if (grupo.includes("03")) {
      Object.keys(valoresPorMes).forEach((mes) => {
        percentuais[mes] = 100;
      });
      return percentuais;
    }

    // Para outros grupos, calcular percentual baseado no grupo 03
    Object.keys(valoresPorMes).forEach((mes) => {
      const valorAtual = valoresPorMes[mes];

      // Encontrar o valor do grupo 03 para o mesmo mês
      const grupo03Items = data.filter((item) => {
        const dataCompetencia = new Date(item.data_competencia);
        const anoMes = `${dataCompetencia.getFullYear()}-${String(
          dataCompetencia.getMonth() + 1
        ).padStart(2, "0")}`;
        return anoMes === mes && item.grupo.includes("03");
      });

      const valorGrupo03 = grupo03Items.reduce(
        (sum, item) => sum + parseFloat(item.valor),
        0
      );

      if (valorGrupo03 !== 0) {
        percentuais[mes] = (valorAtual / valorGrupo03) * 100;
      } else {
        percentuais[mes] = 0;
      }
    });

    return percentuais;
  };

  const buildHierarchicalData = (): HierarchicalRow[] => {
    const rows: HierarchicalRow[] = [];

    // Agrupar por grupo, mas tratar grupo 05 como subgrupo do grupo 04
    const grupos = data.reduce((acc, item) => {
      // Se for grupo 05, adicionar ao grupo 04 como subgrupo
      if (item.grupo.includes("05")) {
        // Encontrar grupo 04 existente ou criar um
        const grupo04Key = Object.keys(acc).find((key) => key.includes("04"));
        if (grupo04Key) {
          acc[grupo04Key].push(item);
        } else {
          // Se não existe grupo 04, criar um grupo especial
          const grupo04Nome =
            Object.keys(acc).find((key) => key.includes("04")) ||
            "04 - GRUPO 04";
          if (!acc[grupo04Nome]) {
            acc[grupo04Nome] = [];
          }
          acc[grupo04Nome].push(item);
        }
      } else {
        // Para outros grupos, agrupar normalmente
        if (!acc[item.grupo]) {
          acc[item.grupo] = [];
        }
        acc[item.grupo].push(item);
      }
      return acc;
    }, {} as Record<string, DREItem[]>);

    // Ordenar grupos
    const sortedGrupos = Object.entries(grupos).sort(([a], [b]) =>
      a.localeCompare(b)
    );

    sortedGrupos.forEach(([grupo, items]) => {
      const totalGrupo = items.reduce(
        (sum, item) => sum + parseFloat(item.valor),
        0
      );

      // Linha do grupo
      const valoresPorMes = calcularValoresPorMes(items);
      rows.push({
        type: "grupo",
        level: 0,
        grupo,
        total: totalGrupo,
        isExpanded: expandedGroups.has(grupo),
        valoresPorMes,
        percentuaisPorMes: calcularPercentuaisPorMes(valoresPorMes, grupo),
      });

      if (expandedGroups.has(grupo)) {
        // Agrupar por subgrupo dentro do grupo
        const subgrupos = items.reduce((acc, item) => {
          // Se o item originalmente era do grupo 05, agrupar tudo sob o nome do grupo 05
          if (item.grupo.includes("05")) {
            const subgrupoKey = item.grupo; // Usar o nome completo do grupo 05
            if (!acc[subgrupoKey]) {
              acc[subgrupoKey] = [];
            }
            acc[subgrupoKey].push(item);
          } else {
            // Para outros itens, agrupar normalmente por subgrupo
            if (!acc[item.subgrupo]) {
              acc[item.subgrupo] = [];
            }
            acc[item.subgrupo].push(item);
          }
          return acc;
        }, {} as Record<string, DREItem[]>);

        // Ordenar subgrupos
        const sortedSubgrupos = Object.entries(subgrupos).sort(([a], [b]) =>
          a.localeCompare(b)
        );

        sortedSubgrupos.forEach(([subgrupo, subgrupoItems]) => {
          const totalSubgrupo = subgrupoItems.reduce(
            (sum, item) => sum + parseFloat(item.valor),
            0
          );

          // Linha do subgrupo
          const valoresSubgrupoPorMes = calcularValoresPorMes(subgrupoItems);
          rows.push({
            type: "subgrupo",
            level: 1,
            grupo,
            subgrupo,
            total: totalSubgrupo,
            isExpanded: expandedSubgrupos.has(`${grupo}-${subgrupo}`),
            valoresPorMes: valoresSubgrupoPorMes,
            percentuaisPorMes: calcularPercentuaisPorMes(
              valoresSubgrupoPorMes,
              grupo
            ),
          });

          if (expandedSubgrupos.has(`${grupo}-${subgrupo}`)) {
            // Agrupar por centro de custo dentro do subgrupo
            const centros = subgrupoItems.reduce((acc, item) => {
              if (!acc[item.centro_custo]) {
                acc[item.centro_custo] = [];
              }
              acc[item.centro_custo].push(item);
              return acc;
            }, {} as Record<string, DREItem[]>);

            // Ordenar centros de custo
            const sortedCentros = Object.entries(centros).sort(([a], [b]) =>
              a.localeCompare(b)
            );

            sortedCentros.forEach(([centro, centroItems]) => {
              const totalCentro = centroItems.reduce(
                (sum, item) => sum + parseFloat(item.valor),
                0
              );

              // Linha do centro de custo
              const valoresCentroPorMes = calcularValoresPorMes(centroItems);
              rows.push({
                type: "centro_custo",
                level: 2,
                grupo,
                subgrupo,
                centro_custo: centro,
                total: totalCentro,
                isExpanded: expandedCentros.has(
                  `${grupo}-${subgrupo}-${centro}`
                ),
                valoresPorMes: valoresCentroPorMes,
                percentuaisPorMes: calcularPercentuaisPorMes(
                  valoresCentroPorMes,
                  grupo
                ),
              });

              if (expandedCentros.has(`${grupo}-${subgrupo}-${centro}`)) {
                // Agrupar por conta dentro do centro de custo
                const contas = centroItems.reduce((acc, item) => {
                  if (!acc[item.conta]) {
                    acc[item.conta] = [];
                  }
                  acc[item.conta].push(item);
                  return acc;
                }, {} as Record<string, DREItem[]>);

                // Ordenar contas
                const sortedContas = Object.entries(contas).sort(([a], [b]) =>
                  a.localeCompare(b)
                );

                sortedContas.forEach(([conta, contaItems]) => {
                  const totalConta = contaItems.reduce(
                    (sum, item) => sum + parseFloat(item.valor),
                    0
                  );

                  // Linha da conta (sem ano/mês no nome)
                  const valoresContaPorMes = calcularValoresPorMes(contaItems);
                  rows.push({
                    type: "conta",
                    level: 3,
                    grupo,
                    subgrupo,
                    centro_custo: centro,
                    conta,
                    codigo_conta: contaItems[0].codigo_conta,
                    total: totalConta,
                    valoresPorMes: valoresContaPorMes,
                    percentuaisPorMes: calcularPercentuaisPorMes(
                      valoresContaPorMes,
                      grupo
                    ),
                  });
                });
              }
            });
          }
        });
      }
    });

    return rows;
  };

  const getRowStyle = (row: HierarchicalRow) => {
    const baseStyle =
      "transition-all duration-200 hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/30";

    // Criar identificador único para a linha
    const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${
      row.centro_custo || ""
    }-${row.codigo_conta || ""}`;
    const isSelected = linhaSelecionada === linhaId;

    let style = baseStyle;

    if (isSelected) {
      style +=
        " bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500 shadow-lg";
    }

    switch (row.type) {
      case "grupo":
        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`;
      case "centro_custo":
        return `${style} bg-gradient-to-r from-gray-50/20 to-gray-100/10 font-medium text-gray-700`;
      case "conta":
        return `${style} bg-white font-normal text-gray-600`;
      default:
        return style;
    }
  };

  const getIndentStyle = (level: number) => {
    return { paddingLeft: `${level * 20}px` };
  };

  const renderCellContent = (row: HierarchicalRow) => {
    switch (row.type) {
      case "grupo":
        return (
          <div className="flex items-center gap-3 whitespace-nowrap">
            <button
              onClick={() => toggleGroup(row.grupo!)}
              className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
            >
              <span className="text-blue-600 font-bold text-sm">
                {row.isExpanded ? "▼" : "▶"}
              </span>
            </button>
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
            >
              <span className="font-bold text-gray-900">{row.grupo}</span>
            </button>
          </div>
        );
      case "subgrupo":
        return (
          <div className="flex items-center gap-3 whitespace-nowrap">
            <button
              onClick={() => toggleSubgrupo(`${row.grupo}-${row.subgrupo}`)}
              className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
            >
              <span className="text-blue-600 font-bold text-sm">
                {row.isExpanded ? "▼" : "▶"}
              </span>
            </button>
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
            >
              <span className="font-semibold text-gray-800">
                {row.subgrupo}
              </span>
            </button>
          </div>
        );
      case "centro_custo":
        return (
          <div className="flex items-center gap-3 whitespace-nowrap">
            <button
              onClick={() =>
                toggleCentro(`${row.grupo}-${row.subgrupo}-${row.centro_custo}`)
              }
              className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
            >
              <span className="text-blue-600 font-bold text-sm">
                {row.isExpanded ? "▼" : "▶"}
              </span>
            </button>
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
            >
              <span className="font-medium text-gray-700">
                {row.centro_custo}
              </span>
            </button>
          </div>
        );
      case "conta":
        return (
          <div className="flex items-center gap-3 whitespace-nowrap">
            <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
              <span className="text-gray-400 font-bold text-lg">•</span>
            </div>
            <button
              onClick={() => handleRowClick(row)}
              className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
            >
              <span className="font-normal text-gray-600">{row.conta}</span>
            </button>
          </div>
        );
      default:
        return null;
    }
  };

  if (loading) {
    return (
      <div className="w-full max-w-7xl mx-auto p-6">
        <div className="mb-6">
          <div className="flex items-center gap-3 mb-4">
            {/* <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
              <svg
                className="w-7 h-7 text-white"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                />
              </svg>
            </div> */}
            <div>
              <h1 className="text-2xl font-bold text-gray-900">
                DRE Gerencial
              </h1>
              <p className="text-sm text-gray-500">
                Demonstração do Resultado do Exercício
              </p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-12">
          <div className="flex flex-col items-center justify-center">
            <div className="w-16 h-16 bg-gradient-to-r from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mb-4">
              <LoaderPinwheel className="h-8 w-8 text-blue-600 animate-spin" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900 mb-2">
              Carregando dados...
            </h3>
            <p className="text-sm text-gray-500">
              Aguarde enquanto processamos as informações
            </p>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="w-full max-w-7xl mx-auto p-6">
        <div className="mb-6">
          <div className="flex items-center gap-3 mb-4">
            {/* <div className="w-12 h-12 bg-gradient-to-r from-red-600 to-red-500 rounded-xl flex items-center justify-center shadow-lg">
              <svg
                className="w-7 h-7 text-white"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
                />
              </svg>
            </div> */}
            <div>
              <h1 className="text-2xl font-bold text-gray-900">
                DRE Gerencial
              </h1>
              <p className="text-sm text-gray-500">
                Demonstração do Resultado do Exercício
              </p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-xl border border-red-200 p-8">
          <div className="flex flex-col items-center text-center">
            <div className="w-16 h-16 bg-gradient-to-r from-red-100 to-red-50 rounded-full flex items-center justify-center mb-4">
              <svg
                className="w-8 h-8 text-red-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
                />
              </svg>
            </div>
            <h3 className="text-lg font-semibold text-red-900 mb-2">
              Erro ao carregar DRE Gerencial
            </h3>
            <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3 max-w-md">
              {error}
            </p>
          </div>
        </div>
      </div>
    );
  }

  const hierarchicalData = buildHierarchicalData();

  return (
    <div className="w-full max-w-none mx-auto p-6">
      {/* Header Section */}
      <div className="mb-6">
        <div className="flex items-center gap-3 mb-4">
          {/* <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
            <svg
              className="w-7 h-7 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
              />
            </svg>
          </div> */}
          <div>
            <h1 className="text-2xl font-bold text-gray-900">DRE Gerencial</h1>
            <p className="text-sm text-gray-500">
              Demonstração do Resultado do Exercício
            </p>
          </div>
        </div>
      </div>

      {/* Table Container */}
      <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>
              </div>
            ))}
            <div className="flex-1 min-w-[120px] text-right">Total</div>
          </div>
        </div>

        {/* Table Body */}
        <div className="max-h-[500px] overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
          {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(
                row
              )}`}
            >
              <div
                className="flex-1 min-w-[300px] max-w-[400px] whitespace-nowrap overflow-hidden"
                style={getIndentStyle(row.level)}
              >
                {renderCellContent(row)}
              </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 font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
                    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>
                          );
                        })()
                      : "-"}
                  </div>
                  <div
                    className="flex-1 min-w-[100px] text-center font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
                    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)}%`
                      : "-"}
                  </div>
                </div>
              ))}
              <div
                className="flex-1 min-w-[120px] text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
                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>
                  );
                })()}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Componente Analítico */}
      {!loading && data.length > 0 && (
        <AnaliticoComponent filtros={analiticoFiltros} />
      )}
    </div>
  );
}