Visualização de Rede de Indicações

Uma das funcionalidades mais poderosas do Rafobase é a visualização de rede, que permite enxergar graficamente como seus membros estão conectados através de indicações.

🎯 O Que É?

A visualização de rede é um grafo interativo onde:

• Nós (círculos) = Membros do programa
• Edges (linhas) = Indicações entre membros
• Tamanho do nó = Número de indicações que o membro fez
• Cor do nó = Performance relativa

Isso permite identificar rapidamente:

• 🌟 Super indicadores: Membros que trazem muitos novos clientes
• 🔗 Clusters: Grupos de membros conectados
• 📈 Crescimento orgânico: Como a rede se expande naturalmente

🖼️ Componentes Visuais

Nós (Membros)

Cada membro é representado por um nó circular:

┌─────────────────┐
│   João Silva    │  ← Nome do membro
│   NUT-JOAO-A7X  │  ← Código de cupom
│   12 indicações │  ← Número de vendas atribuídas
└─────────────────┘

Tamanho: Proporcional ao número de indicações

• Pequeno: 0-2 indicações
• Médio: 3-9 indicações
• Grande: 10+ indicações

Cores:

• 🟢 Verde: Alta performance (>= 10 indicações)
• 🟡 Amarelo: Média performance (3-9 indicações)
• ⚪ Cinza: Baixa performance (1-2 indicações)
• 🔵 Azul: Nó selecionado

Edges (Conexões)

Linhas que conectam indicador → indicado.

Membro A ──────► Membro B
         (indicou)

Tipos de linha:

• Sólida: Indicação aprovada
• Tracejada: Indicação pendente
• Vermelha: Indicação rejeitada

Direção: A seta aponta de quem indicou para quem foi indicado.

🎮 Interatividade

Navegação

Zoom

• Scroll do mouse: In/Out
• Controles na tela: Botões +/-
• Pinch gesture (mobile/trackpad)

Pan (Mover)

• Arraste o background do grafo
• Toque e arraste (mobile)

Seleção

• Clique em um nó para destacá-lo
• Mostra conexões diretas
• Exibe tooltip com detalhes

Tooltips

Passe o mouse sobre um nó para ver:

┌────────────────────────┐
│ João Silva             │
│ NUT-JOAO-A7X           │
│                        │
│ Indicações: 12         │
│ Carteira: R$ 340,00    │
│ Status: Active         │
│ Cadastro: 15/01/2026   │
└────────────────────────┘

🔧 Funcionalidades

Auto-Layout

O grafo usa o algoritmo Dagre para organizar automaticamente os nós:

• Minimiza cruzamentos de linhas
• Agrupa membros relacionados
• Cria hierarquia visual (indicadores principais no topo)

Botão "Re-organizar": Recalcula o layout se você mover nós manualmente.

Filtros

Mínimo de Indicações

Exibir apenas membros com pelo menos X indicações:

┌─────────────────────────┐
│ Mínimo de indicações: 1 │ ← Slider
└─────────────────────────┘

Uso:

• 1: Mostra todos os membros com pelo menos 1 indicação
• 5: Mostra apenas membros com 5+ indicações (super indicadores)
• 10: Mostra apenas top performers

Status de Indicação

Filtrar por status das indicações:

• Todas: Mostra todas as conexões
• Aprovadas: Apenas indicações aprovadas
• Pendentes: Apenas indicações aguardando aprovação
• Rejeitadas: Apenas indicações rejeitadas

Busca

Campo de busca para encontrar membro específico:

Exportação

Captura de Tela: Baixa imagem PNG do grafo atual

Exportar Dados: Download JSON com estrutura da rede para análise externa

📊 Casos de Uso

1. Identificar Super Indicadores

Objetivo: Encontrar membros que trazem muitos clientes

Como:

1. Aplique filtro de mínimo 5 indicações
2. Procure nós grandes e verdes
3. Clique para ver detalhes
4. Considere recompensas especiais para esses membros

2. Detectar Clusters

Objetivo: Identificar grupos fechados de indicações

Como:

1. Visualize toda a rede (filtro mínimo = 1)
2. Procure áreas densamente conectadas
3. Clusters podem indicar:
   • Comunidades específicas
   • Possível fraude (se todos se indicam mutuamente)

3. Acompanhar Crescimento

Objetivo: Ver como a rede cresce ao longo do tempo

Como:

1. Use filtro de data (se disponível)
2. Compare snapshots semanais/mensais
3. Identifique momentos de crescimento acelerado
4. Relacione com campanhas ou ações de marketing

4. Validar Indicações Suspeitas

Objetivo: Investigar possível fraude

Como:

1. Filtre por "Rejeitadas" ou "Pendentes"
2. Procure padrões circulares (A → B → C → A)
3. Verifique se há auto-indicação (loops)
4. Use como evidência para decisões manuais

🛠️ Tecnologia

Stack

A visualização é construída com:

• React Flow (@xyflow/react): Biblioteca de grafos interativos
• Dagre: Algoritmo de layout automático
• Framer Motion: Animações suaves
• TanStack Query: Cache e sincronização de dados

Performance

Otimizações:

• Virtualização: Renderiza apenas nós visíveis no viewport
• Debounce: Filtros não sobrecarregam o servidor
• Memoização: Re-renders minimizados

Limites:

• Recomendado: Até 500 nós simultâneos
• Máximo testado: 1000+ nós (pode ficar lento)
• Solução: Use filtros para reduzir nós exibidos

🔌 API Endpoint

O grafo consome dados do endpoint:

GET /admin/referral-network

Query Parameters:

• status: Filtrar por status (approved, pending, rejected)
• minReferrals: Mínimo de indicações (padrão: 1)

Resposta:

{
  "nodes": [
    {
      "id": "mem_abc123",
      "name": "João Silva",
      "couponCode": "NUT-JOAO-A7X",
      "referralCount": 12,
      "walletBalance": 340.0,
      "status": "active"
    }
  ],
  "edges": [
    {
      "id": "edge_1",
      "source": "mem_abc123",
      "target": "mem_def456",
      "referralStatus": "approved"
    }
  ]
}

💡 Dicas

Para Melhor Visualização

1. Use filtros: Não tente visualizar 1000 membros de uma vez
2. Foque em super indicadores: Filtro mínimo 5+ é um bom ponto de partida
3. Regular o zoom: Afaste para visão geral, aproxime para detalhes
4. Cores importam: Verde = foco, cinza = oportunidade de melhoria

Para Análise

1. Compare períodos: Tire screenshots semanais para comparar crescimento
2. Identifique hubs: Membros centrais são valiosos para o programa
3. Monitore pendentes: Use filtro "pending" para aprovar/rejeitar rapidamente
4. Investigue anomalias: Clusters muito densos podem ser fraude

🚀 Próximos Passos

Recursos planejados para futuras versões:

• Filtro por data de indicação
• Animação de crescimento ao longo do tempo (timeline)
• Métricas agregadas do cluster selecionado
• Exportação para ferramentas de análise de redes (Gephi, etc.)
• Detecção automática de comunidades

📚 Recursos Relacionados

• Conceito: Membros
• Conceito: Indicações
• Painel Administrativo
• React Flow Documentation