# 🧪 COMO TESTAR OS AJUSTES DE UX

## 🎯 TESTE 1: MENU ATIVO COM DESTAQUE AZUL

### Passo a Passo:

1. **Abra o navegador em:** `http://localhost:5173`

2. **Observe o Sidebar (menu lateral esquerdo):**
   - O botão "Dashboard" deve estar **AZUL** (background azul sólido)
   - Os outros menus devem estar **CINZA** (background cinza claro)

3. **Clique em "Recursos Humanos":**
   - O botão "Recursos Humanos" deve ficar **AZUL**
   - O botão "Dashboard" deve voltar ao **CINZA**

4. **Navegue para qualquer sub-rota de RH:**
   - Exemplo: Clique em "Funcionários" no menu de RH
   - URL: `http://localhost:5173/recursos-humanos/funcionarios`
   - O botão "Recursos Humanos" deve **CONTINUAR AZUL**

5. **Teste outros setores:**
   - Clique em "Tecnologia da Informação"
   - O botão "TI" deve ficar **AZUL**
   - "Recursos Humanos" deve voltar ao **CINZA**

### ✅ O que você deve ver:

**Menu Ativo (AZUL):**
- Background: Azul sólido
- Texto: Branco
- Borda: Azul
- Levemente maior que os outros (escala 105%)
- Sombra mais pronunciada

**Menu Inativo (CINZA):**
- Background: Gradiente cinza claro
- Texto: Cor padrão (escuro)
- Borda: Azul transparente
- Tamanho normal
- Sombra suave

---

## 🎯 TESTE 2: ACESSO NEGADO COM CONTADOR DE 3 SEGUNDOS

### Passo a Passo:

**⚠️ IMPORTANTE:** Como o sistema de autenticação está temporariamente desabilitado, vou explicar como testar quando for reativado.

### Quando a Autenticação Estiver Ativa:

1. **Faça login com usuário limitado**
   - Por exemplo: um usuário que não tem acesso ao setor "Financeiro"

2. **Tente acessar uma página restrita:**
   - Digite na barra de endereço: `http://localhost:5173/financeiro`
   - Pressione Enter

3. **Observe a tela de "Acesso Negado":**
   
   **Você deve ver:**
   - ❌ Ícone de erro vermelho
   - 📝 Título: "Acesso Negado"
   - 📄 Mensagem: "Você não tem permissão para acessar esta página."
   - ⏰ **Contador regressivo:** "Redirecionando em **3** segundos..."
   - 🔵 Botão: "Voltar Agora"

4. **Aguarde e observe o contador:**
   - Segundo 1: "Redirecionando em **3** segundos..."
   - Segundo 2: "Redirecionando em **2** segundos..."
   - Segundo 3: "Redirecionando em **1** segundo..."
   - Após 3 segundos: Redirecionamento automático para o Dashboard

5. **Teste o botão "Voltar Agora":**
   - Repita o teste
   - Antes de terminar os 3 segundos, clique em "Voltar Agora"
   - Deve redirecionar **imediatamente** sem esperar

### ✅ O que você deve ver:

```
┌─────────────────────────────────────┐
│         🔴 (Ícone de Erro)          │
│                                     │
│         Acesso Negado               │
│                                     │
│  Você não tem permissão para        │
│  acessar esta página.               │
│                                     │
│  ⏰ Redirecionando em 3 segundos... │
│                                     │
│    [ Voltar Agora ]                 │
│                                     │
└─────────────────────────────────────┘
```

**Depois de 1 segundo:**
```
⏰ Redirecionando em 2 segundos...
```

**Depois de 2 segundos:**
```
⏰ Redirecionando em 1 segundo...
```

**Depois de 3 segundos:**
```
→ Redirecionamento para Dashboard
```

---

## 🎯 TESTE 3: RESPONSIVIDADE (MOBILE)

### Desktop (Tela Grande):

1. Abra `http://localhost:5173` em tela normal
2. Sidebar deve estar **sempre visível** à esquerda
3. Menu ativo deve estar **azul**

### Mobile (Tela Pequena):

1. Redimensione o navegador para < 1024px
   - Ou use DevTools (F12) → Toggle Device Toolbar (Ctrl+Shift+M)

2. Sidebar deve estar **escondida**

3. Deve aparecer um **botão de menu** (☰) no canto superior esquerdo

4. Clique no botão de menu:
   - Drawer (gaveta) deve abrir da esquerda
   - Menu ativo deve estar **azul**

5. Navegue entre menus:
   - O menu ativo deve mudar de cor
   - Drawer deve fechar automaticamente ao clicar em um menu

---

## 📸 CAPTURAS DE TELA ESPERADAS

### 1. Dashboard Ativo (Menu Azul):
```
Sidebar:
├── [ Dashboard ]  ← AZUL (você está aqui)
├── [ Recursos Humanos ]  ← CINZA
├── [ Financeiro ]  ← CINZA
├── [ Controladoria ]  ← CINZA
└── ...
```

### 2. Recursos Humanos Ativo:
```
Sidebar:
├── [ Dashboard ]  ← CINZA
├── [ Recursos Humanos ]  ← AZUL (você está aqui)
├── [ Financeiro ]  ← CINZA
├── [ Controladoria ]  ← CINZA
└── ...
```

### 3. Sub-rota de RH (Funcionários):
```
URL: /recursos-humanos/funcionarios

Sidebar:
├── [ Dashboard ]  ← CINZA
├── [ Recursos Humanos ]  ← AZUL (ainda azul!)
├── [ Financeiro ]  ← CINZA
├── [ Controladoria ]  ← CINZA
└── ...
```

---

## 🐛 POSSÍVEIS PROBLEMAS E SOLUÇÕES

### Problema 1: Menu não fica azul
**Causa:** Servidor não foi reiniciado após as alterações

**Solução:**
```powershell
# Terminal do Frontend (Ctrl+C para parar)
# Depois reinicie:
cd "C:\Users\Deyvison\OneDrive\Desktop\Secretaria de Esportes\Tecnologia da Informacao\SGSE\sgse-app\apps\web"
npm run dev
```

### Problema 2: Contador não aparece
**Causa:** Sistema de autenticação está desabilitado

**Solução:**
- Isso é esperado! O contador só aparece quando:
  1. Sistema de autenticação estiver ativo
  2. Usuário tentar acessar página sem permissão

### Problema 3: Vejo erro no console
**Causa:** Hot Module Replacement (HMR) do Vite

**Solução:**
- Pressione F5 para recarregar a página completamente
- O erro deve desaparecer

---

## ✅ CHECKLIST DE VALIDAÇÃO

Use este checklist para confirmar que tudo está funcionando:

### Menu Ativo:
- [ ] Dashboard fica azul quando em "/"
- [ ] Setor fica azul quando acessado
- [ ] Setor continua azul em sub-rotas
- [ ] Apenas um menu fica azul por vez
- [ ] Transição é suave (300ms)
- [ ] Texto fica branco quando ativo
- [ ] Funciona em desktop
- [ ] Funciona em mobile (drawer)

### Acesso Negado (quando auth ativo):
- [ ] Contador aparece
- [ ] Inicia em 3 segundos
- [ ] Decrementa a cada segundo (3, 2, 1)
- [ ] Redirecionamento após 3 segundos
- [ ] Botão "Voltar Agora" funciona
- [ ] Ícone de relógio aparece
- [ ] Mensagem é clara e legível

---

## 🎬 VÍDEO DE DEMONSTRAÇÃO (ESPERADO)

Se você gravar sua tela testando, deve ver:

1. **0:00-0:05** - Página inicial, Dashboard azul
2. **0:05-0:10** - Clica em RH, RH fica azul, Dashboard fica cinza
3. **0:10-0:15** - Clica em Funcionários, RH continua azul
4. **0:15-0:20** - Clica em TI, TI fica azul, RH fica cinza
5. **0:20-0:25** - Clica em Dashboard, Dashboard fica azul, TI fica cinza

**Tudo deve ser fluido e profissional!**

---

## 🚀 PRONTO PARA TESTAR!

Abra o navegador e siga os passos acima. Se tudo funcionar conforme descrito, os ajustes foram implementados com sucesso! 🎉

Se encontrar qualquer problema, verifique:
1. ✅ Servidores estão rodando (Convex + Vite)
2. ✅ Sem erros no console do navegador (F12)
3. ✅ Arquivos foram salvos corretamente