# 📋 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.