sgse-app/ATUALIZACOES_PERFIL_E_CHAT.md

📋 Atualizações: Perfil e Chat

✅ O que foi implementado:

1️⃣ Upload de Foto de Perfil

Frontend (apps/web/src/routes/(dashboard)/perfil/+page.svelte):

• ✅ Avatar maior com ring colorido
• ✅ Botão de edição visível ao passar o mouse (hover effect)
• ✅ Modal dedicado para upload de foto
• ✅ Preview da foto atual antes do upload
• ✅ Validação de tipo (imagens apenas) e tamanho (máx 5MB)
• ✅ Loading indicator durante o upload
• ✅ Mensagens de erro amigáveis
• ✅ Atualização automática do perfil após upload bem-sucedido

Backend:

• ✅ Já existente: api.usuarios.gerarUrlUploadFotoPerfil
• ✅ Já existente: api.usuarios.atualizarPerfil
• ✅ Já existente: Storage no Convex para imagens

Store (apps/web/src/lib/stores/auth.svelte.ts):

• ✅ Adicionados campos avatar, fotoPerfil, fotoPerfilUrl na interface Usuario
• ✅ Método refresh() para atualizar dados do perfil sem relogar

---

2️⃣ Exibição do Cargo/Função

Localização:

Na página de perfil, abaixo do nome, aparece em destaque:

João Silva
Desenvolvedor Senior  ← CARGO EM DESTAQUE
joao@exemplo.com

Implementação:

{#if funcionario?.descricaoCargo}
  <p class="text-lg font-semibold text-base-content/80 mt-1">
    {funcionario.descricaoCargo}
  </p>
{/if}

• ✅ Fonte maior (text-lg)
• ✅ Negrito (font-semibold)
• ✅ Posicionado entre o nome e o email
• ✅ Só aparece se o cargo foi cadastrado

---

3️⃣ Sistema de Chat

Status: ✅ Já estava implementado e funcionando!

Funcionalidades disponíveis:

• ✅ Chat widget flutuante no canto inferior direito
• ✅ Conversas 1-para-1 entre usuários
• ✅ Notificações em tempo real
• ✅ Sino com contador de mensagens não lidas
• ✅ Avatar/foto dos usuários nas conversas
• ✅ Timestamps das mensagens
• ✅ Busca de usuários
• ✅ Interface moderna e responsiva

Backend do Chat (packages/backend/convex/chat.ts):

• ✅ criarConversa - Criar nova conversa
• ✅ enviarMensagem - Enviar mensagem
• ✅ listarConversas - Listar conversas do usuário
• ✅ listarMensagens - Listar mensagens de uma conversa
• ✅ marcarComoLida - Marcar mensagens como lidas
• ✅ obterNaoLidas - Contar mensagens não lidas

---

🎯 Como usar:

Upload de Foto:

1. Login → Canto superior direito → Perfil
2. Passar mouse sobre o avatar
3. Clicar no botão de câmera 📷
4. Selecionar imagem
5. Aguardar upload
6. ✅ Foto atualizada!

Ver Cargo:

1. Login → Canto superior direito → Perfil
2. O cargo aparece automaticamente abaixo do nome
3. Nota: O cargo precisa ter sido preenchido no cadastro do funcionário

Testar Chat:

1. Criar 2 usuários no sistema (ou usar 2 existentes)
2. Fazer login com Usuário 1
3. Clicar no botão roxo flutuante 💬 (canto inferior direito)
4. Iniciar conversa com Usuário 2
5. Enviar mensagem
6. Em outra aba/navegador, fazer login com Usuário 2
7. Ver notificação no sino 🔔
8. Responder mensagem
9. Voltar para Usuário 1 e ver resposta em tempo real

---

🗂️ Arquivos Modificados:

Frontend:

1. apps/web/src/routes/(dashboard)/perfil/+page.svelte

   • Header redesenhado com avatar maior
   • Botão de edição com hover
   • Modal de upload de foto
   • Exibição do cargo em destaque
   • Badges de status e time

2. apps/web/src/lib/stores/auth.svelte.ts

   • Adicionados campos de foto na interface Usuario
   • Método refresh() para atualização do perfil

Documentação:

3. TESTE_CHAT_SISTEMA.md - Guia completo de testes
4. ATUALIZACOES_PERFIL_E_CHAT.md - Este arquivo (resumo)

---

🎨 Design Atualizado:

Antes:

[Ícone] Nome
        email

Depois:

┌─────────────────────────────────────────────┐
│ [FOTO GRANDE]    João Silva                 │
│    (com 📷)      Desenvolvedor Senior       │  ← NOVO!
│                  joao@exemplo.com            │
│                  🏷️ TI  👥 Equipe Dev       │
│                  🏖️ Em Férias (se aplicável)│
└─────────────────────────────────────────────┘

Melhorias visuais:

• Avatar 50% maior (w-24 h-24)
• Ring colorido ao redor da foto
• Botão de edição com animação hover
• Cargo em fonte grande e negrito
• Badges organizados e informativos
• Layout mais espaçado e legível

---

🔧 Detalhes Técnicos:

Upload de Foto:

// Fluxo:
1. handleUploadFoto() → Validar arquivo
2. api.usuarios.gerarUrlUploadFotoPerfil() → Gerar URL
3. fetch(uploadUrl, {body: file}) → Upload para Convex Storage
4. api.usuarios.atualizarPerfil({fotoPerfil: storageId}) → Salvar ID
5. authStore.refresh() → Atualizar store local
6. ✅ Foto aparece automaticamente

Validações:

• Tipo: apenas image/* (JPG, PNG, GIF, etc.)
• Tamanho: máximo 5MB
• Tratamento de erros com mensagens amigáveis
• Loading state durante upload

Storage:

• Convex File Storage (_storage table)
• URLs assinadas com expiração
• Suporte a qualquer formato de imagem

---

📝 Notas Importantes:

1. Cargo não aparece?

   • Certifique-se de que o campo descricaoCargo foi preenchido no cadastro do funcionário
   • Vá em: Recursos Humanos > Funcionários > Cadastro/Edição

2. Foto não carrega?

   • Verifique o tamanho do arquivo (máx 5MB)
   • Confirme que é uma imagem válida
   • Abra o console (F12) para ver erros

3. Chat não funciona?

   • Confirme que o Convex está rodando
   • Verifique se ambos os usuários estão logados
   • O chat precisa de 2 usuários diferentes para testar

4. authStore.refresh() demora?

   • É normal, pois faz uma query ao Convex
   • O loading indicator mostra o progresso
   • Após o upload, pode levar 1-2 segundos

---

✅ Checklist de Teste:

Upload de Foto:

• Passar mouse sobre avatar mostra botão de câmera
• Clicar no botão abre modal
• Modal mostra preview da foto atual
• Selecionar imagem válida funciona
• Selecionar arquivo muito grande mostra erro
• Selecionar arquivo não-imagem mostra erro
• Loading aparece durante upload
• Foto atualiza automaticamente após upload
• Fechar modal sem upload não quebra nada

Exibição do Cargo:

• Cargo aparece abaixo do nome
• Fonte é maior e em negrito
• Se não houver cargo, nada quebra
• Layout fica bonito e organizado

Chat (entre 2 usuários):

• Botão flutuante aparece no canto inferior direito
• Clicar abre o chat
• Pode criar nova conversa
• Pode selecionar usuário da lista
• Enviar mensagem funciona
• Mensagem aparece instantaneamente
• Outro usuário recebe notificação
• Sino mostra contador correto
• Clicar na notificação abre o chat
• Resposta aparece em tempo real
• Avatar/foto aparece corretamente

---

🚀 Próximos Passos (Opcional):

Funcionalidades que poderiam ser adicionadas:

• Crop/resize da imagem antes do upload
• Escolher entre foto customizada ou avatares pré-definidos
• Histórico de fotos anteriores
• Galeria de avatares do sistema
• Compressão automática de imagens grandes
• Upload via drag & drop
• Câmera web para tirar foto diretamente

---

Tudo pronto! 🎉 Siga o guia TESTE_CHAT_SISTEMA.md para testar passo a passo.