feat: implement professional avatar system with 30 3D realistic avatars inspired by cinema; enhance upload functionality and user experience with instant updates and improved UI components

ATUALIZACOES_PERFIL_E_CHAT.md

@@ -0,0 +1,253 @@
+# 📋 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:
+```svelte
+{#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:
+```typescript
+// 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.
+