256 lines
7.1 KiB
Markdown
256 lines
7.1 KiB
Markdown
# 🧪 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
|
|
|