# 🧪 Teste do Sistema de Chat

## ✅ Upload de Foto de Perfil - Implementado!

### Como testar:
1. Faça login no sistema
2. Clique no ícone de usuário (canto superior direito)
3. Selecione **"Perfil"**
4. Passe o mouse sobre a foto/avatar
5. Clique no botão de câmera que aparece
6. Selecione uma imagem (JPG, PNG ou GIF até 5MB)
7. A foto será carregada automaticamente!

### O que foi implementado:
- ✅ Avatar maior (24x24 → w-24 h-24) com ring colorido
- ✅ Botão de edição aparece ao passar o mouse (efeito hover)
- ✅ Modal dedicado para upload de foto
- ✅ Preview da foto atual
- ✅ Validação de tipo e tamanho de arquivo
- ✅ Loading indicator durante upload
- ✅ **CARGO/FUNÇÃO** aparece em destaque abaixo do nome
- ✅ Status de férias exibido como badge
- ✅ Atualização automática do perfil após upload

---

## 📱 Teste do Chat Entre Usuários

### Pré-requisitos:
Para testar o chat, você precisa de **2 usuários diferentes** cadastrados no sistema.

### Passo a Passo:

#### 1️⃣ **Preparar 2 usuários**

**Usuário 1 - Admin/TI:**
- Login: (seu usuário atual)
- Acesse: TI > Usuários
- Crie um segundo usuário de teste se não existir

**Usuário 2 - Teste:**
- Matricula: 999999
- Nome: João Teste
- Email: joao.teste@exemplo.com
- Senha inicial: senha123

#### 2️⃣ **Abrir Chat Widget**

1. Faça login com o **Usuário 1**
2. No canto inferior direito, clique no **botão roxo flutuante** 💬
3. O chat deve abrir

#### 3️⃣ **Iniciar Conversa**

1. Clique em **"Nova Conversa"** ou no ícone de "+"
2. Selecione **"João Teste"** (Usuário 2) da lista
3. Digite uma mensagem: "Olá, esta é uma mensagem de teste!"
4. Pressione Enter ou clique em Enviar

#### 4️⃣ **Verificar Recebimento** (em outra aba/navegador)

1. Abra uma nova janela/aba **anônima/privada**
2. Faça login com o **Usuário 2** (joao.teste@exemplo.com)
3. Veja o sino de notificações 🔔 no canto superior direito
   - Deve aparecer um contador vermelho com "1"
4. Clique no sino para ver a notificação
5. Clique na notificação ou abra o chat
6. Responda: "Recebi sua mensagem!"

#### 5️⃣ **Confirmar Sincronização**

1. Volte para a aba do **Usuário 1**
2. Você deve ver a resposta aparecer automaticamente (real-time)
3. O sino deve notificar a nova mensagem

---

## 🔍 Funcionalidades do Chat para Testar:

### ✅ Conversas 1-para-1
- Enviar mensagem
- Receber mensagem em tempo real
- Marcar como lida
- Buscar usuários

### ✅ Notificações
- Contador no sino 🔔
- Notificação ao receber mensagem
- Som de notificação (se habilitado)
- Badge "não lida" nas conversas

### ✅ Interface
- Lista de conversas
- Busca de usuários
- Avatares com foto ou iniciais
- Timestamp das mensagens
- Status online/offline (se implementado)
- Chat flutuante no canto direito

---

## 🐛 Problemas Comuns:

### Chat não abre
- ✅ RESOLVIDO: z-index ajustado para 99999
- Verifique se o widget está visível no canto inferior direito

### Mensagem não chega
- Verifique se ambos os usuários estão logados
- Abra o Console (F12) e veja se há erros
- Confirme que o Convex está rodando

### Notificação não aparece
- Verifique se está na aba correta do usuário
- Recarregue a página (F5)
- Confira as permissões do navegador

---

## 📸 Capturas de Tela Esperadas:

### Perfil atualizado:
```
┌─────────────────────────────────────┐
│  [FOTO]     João Silva              │
│   📷       Desenvolvedor Senior     │  ← CARGO
│           joao@exemplo.com          │
│           🏷️ TI_MASTER 👥 Equipe TI │
└─────────────────────────────────────┘
```

### Chat Widget:
```
                          [Botão Chat 💬]
                          ┌──────────────┐
                          │ Conversas    │
                          ├──────────────┤
                          │ 👤 João      │
                          │    Olá!      │
                          │    12:30     │
                          ├──────────────┤
                          │ 👤 Maria     │
                          │    OK!       │
                          │    11:15     │
                          └──────────────┘
```

---

## ✨ Conclusão

Se todos os testes passarem, você terá:
- ✅ Upload de foto de perfil funcionando
- ✅ Cargo exibido no perfil
- ✅ Chat em tempo real entre usuários
- ✅ Notificações funcionando
- ✅ Interface moderna e responsiva

**Boa sorte nos testes! 🚀**