feat: implement comprehensive chat system with user presence management, notification handling, and avatar integration; enhance UI components for improved user experience

2025-10-28 11:57:54 -03:00
parent 81e6eb4a42
commit ee2c9c3ae0
47 changed files with 8274 additions and 195 deletions
--- a/PROBLEMAS_PERFIL_IDENTIFICADOS.md
+++ b/PROBLEMAS_PERFIL_IDENTIFICADOS.md
@@ -0,0 +1,269 @@
+# 🐛 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`
+
+```typescript
+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`:**
+
+```typescript
+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:
+
+```typescript
+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`:**
+
+```typescript
+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:
+```bash
+# 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:
+```bash
+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`
+