feat: add countdown timer and redirect functionality on access denial in MenuProtection component; enhance Sidebar menu item styling and active state handling
This commit is contained in:
255
COMO_TESTAR_AJUSTES.md
Normal file
255
COMO_TESTAR_AJUSTES.md
Normal file
@@ -0,0 +1,255 @@
|
||||
# 🧪 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
|
||||
|
||||
Reference in New Issue
Block a user