sgse-app/PROBLEMAS_PERFIL_IDENTIFICADOS.md

🐛 Problemas Identificados na Página de Perfil

📋 Problemas Encontrados

1. ❌ Avatares não carregam (boxes vazios)

Sintoma: Os 32 avatares aparecem como caixas brancas/vazias sem imagens.

Causa Identificada:

• As URLs das imagens dos avatares estão corretas (https://api.dicebear.com/7.x/avataaars/svg?...)
• As imagens podem não estar carregando por:
  • Problema de CORS com a API do DiceBear
  • API do DiceBear pode estar bloqueada
  • Parâmetros da URL podem estar incorretos

2. ❌ Informações básicas não carregam (campos vazios)

Sintoma: Os campos Nome, E-mail e Matrícula aparecem vazios.

Causa Raiz Identificada:

A query `obterPerfil` retorna `null` porque o usuário logado não é encontrado na tabela `usuarios`.

Detalhes Técnicos:

• A função obterPerfil busca o usuário pelo email usando ctx.auth.getUserIdentity()
• O email retornado pela autenticação não corresponde a nenhum usuário na tabela usuarios
• O seed criou um usuário admin com email: admin@sgse.pe.gov.br
• Mas o sistema de autenticação pode estar retornando um email diferente

3. ❌ Foto de perfil não carrega

Sintoma: O preview da foto mostra apenas o ícone padrão de usuário.

Causa: Como o perfil (obterPerfil) retorna null, não há dados de fotoPerfilUrl ou avatar para exibir.

---

🔍 Análise do Sistema de Autenticação

Arquivo: packages/backend/convex/usuarios.ts

export const obterPerfil = query({
  args: {},
  handler: async (ctx) => {
    const identity = await ctx.auth.getUserIdentity();  // ❌ Retorna null ou email incorreto
    if (!identity) return null;

    const usuarioAtual = await ctx.db
      .query("usuarios")
      .withIndex("by_email", (q) => q.eq("email", identity.email!))  // ❌ Não encontra o usuário
      .first();

    if (!usuarioAtual) return null;  // ❌ Retorna null aqui
    
    // ... resto do código nunca executa
  },
});

Problema Principal

O sistema tem 2 sistemas de autenticação conflitantes:

1. autenticacao.ts - Sistema customizado com sessões
2. betterAuth - Better Auth com adapter para Convex

O usuário está logado pelo sistema autenticacao.ts, mas obterPerfil usa ctx.auth.getUserIdentity() que depende do Better Auth configurado corretamente.

---

✅ Soluções Propostas

Solução 1: Ajustar obterPerfil para usar o sistema de autenticação correto

Modificar packages/backend/convex/usuarios.ts:

export const obterPerfil = query({
  args: {},
  handler: async (ctx) => {
    // TENTAR MELHOR AUTH PRIMEIRO
    const identity = await ctx.auth.getUserIdentity();
    
    let usuarioAtual = null;
    
    if (identity && identity.email) {
      // Buscar por email (Better Auth)
      usuarioAtual = await ctx.db
        .query("usuarios")
        .withIndex("by_email", (q) => q.eq("email", identity.email!))
        .first();
    }
    
    // SE NÃO ENCONTROU, BUSCAR POR SESSÃO ATIVA (Sistema customizado)
    if (!usuarioAtual) {
      const sessaoAtiva = await ctx.db
        .query("sessoes")
        .withIndex("by_token", (q) => q.eq("ativo", true))
        .order("desc")
        .first();
      
      if (sessaoAtiva) {
        usuarioAtual = await ctx.db.get(sessaoAtual.usuarioId);
      }
    }
    
    if (!usuarioAtual) return null;

    // Buscar fotoPerfil URL se existir
    let fotoPerfilUrl = null;
    if (usuarioAtual.fotoPerfil) {
      fotoPerfilUrl = await ctx.storage.getUrl(usuarioAtual.fotoPerfil);
    }

    return {
      _id: usuarioAtual._id,
      nome: usuarioAtual.nome,
      email: usuarioAtual.email,
      matricula: usuarioAtual.matricula,
      avatar: usuarioAtual.avatar,
      fotoPerfil: usuarioAtual.fotoPerfil,
      fotoPerfilUrl,
      setor: usuarioAtual.setor,
      statusMensagem: usuarioAtual.statusMensagem,
      statusPresenca: usuarioAtual.statusPresenca,
      notificacoesAtivadas: usuarioAtual.notificacoesAtivadas ?? true,
      somNotificacao: usuarioAtual.somNotificacao ?? true,
    };
  },
});

Solução 2: Corrigir URLs dos avatares

Opção A: Testar URL diretamente no navegador

Abra no navegador:

https://api.dicebear.com/7.x/avataaars/svg?seed=John-Happy&mouth=smile,twinkle&eyes=default,happy&eyebrow=default,raisedExcited&top=blazerShirt,blazerSweater&backgroundColor=b6e3f4,c0aede,d1d4f9

Se a imagem não carregar, a API pode estar com problema.

Opção B: Usar CDN alternativo ou biblioteca local

Instalar @dicebear/core e @dicebear/collection (já instalado) e gerar SVGs localmente:

import { createAvatar } from '@dicebear/core';
import { avataaars } from '@dicebear/collection';

function getAvatarSvg(avatarId: string): string {
  const avatar = avatares.find(a => a.id === avatarId);
  if (!avatar) return "";
  
  const isFormal = parseInt(avatar.id.split('-')[2]) % 2 === 1;
  const topType = isFormal 
    ? ["blazerShirt", "blazerSweater"]
    : ["hoodie", "sweater", "overall", "shirtCrewNeck"];
  
  const svg = createAvatar(avataaars, {
    seed: avatar.seed,
    mouth: ["smile", "twinkle"],
    eyes: ["default", "happy"],
    eyebrow: ["default", "raisedExcited"],
    top: topType,
    backgroundColor: ["b6e3f4", "c0aede", "d1d4f9"],
  });
  
  return svg.toDataUriSync(); // Retorna data:image/svg+xml;base64,...
}

Solução 3: Adicionar logs de depuração

Adicionar logs temporários em obterPerfil:

export const obterPerfil = query({
  args: {},
  handler: async (ctx) => {
    console.log("=== DEBUG obterPerfil ===");
    
    const identity = await ctx.auth.getUserIdentity();
    console.log("Identity:", identity);
    
    if (!identity) {
      console.log("❌ Identity é null");
      return null;
    }
    
    console.log("Email da identity:", identity.email);

    const usuarioAtual = await ctx.db
      .query("usuarios")
      .withIndex("by_email", (q) => q.eq("email", identity.email!))
      .first();
    
    console.log("Usuário encontrado:", usuarioAtual ? "SIM" : "NÃO");
    
    if (!usuarioAtual) {
      // Listar todos os usuários para debug
      const todosUsuarios = await ctx.db.query("usuarios").collect();
      console.log("Total de usuários no banco:", todosUsuarios.length);
      console.log("Emails cadastrados:", todosUsuarios.map(u => u.email));
      return null;
    }
    
    // ... resto do código
  },
});

---

🧪 Como Testar

1. Verificar o sistema de autenticação:

# No console do navegador (F12)
# Verificar se há token de sessão
localStorage.getItem('convex-session-token')

2. Fazer logout e login novamente:

• Fazer logout do sistema
• Fazer login com matrícula 0000 e senha Admin@123
• Acessar /perfil novamente

3. Verificar os logs do Convex:

cd packages/backend
npx convex logs

---

📊 Status dos Problemas

Problema	Status	Prioridade
Avatares não carregam	🔍 Investigando	Alta
Informações não carregam	✅ Causa identificada	Crítica
Foto não carrega	⏳ Aguardando fix do perfil	Média

---

🎯 Próximos Passos Recomendados

1. URGENTE: Implementar Solução 1 para corrigir obterPerfil
2. Testar URL dos avatares no navegador
3. Se necessário, implementar Solução 2 (Opção B) para avatares locais
4. Adicionar logs de debug para confirmar funcionamento
5. Remover logs após correção

---

💡 Observações

• O seed foi executado com sucesso ✅
• O usuário admin está criado no banco ✅
• O problema é na integração entre autenticação e query de perfil
• Após corrigir obterPerfil, o sistema deve funcionar completamente

---

Criado em: $(Get-Date) Seed executado: ✅ Sim Usuário admin: matrícula 0000, senha Admin@123