7.1 KiB
🧪 COMO TESTAR OS AJUSTES DE UX
🎯 TESTE 1: MENU ATIVO COM DESTAQUE AZUL
Passo a Passo:
-
Abra o navegador em:
http://localhost:5173 -
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)
-
Clique em "Recursos Humanos":
- O botão "Recursos Humanos" deve ficar AZUL
- O botão "Dashboard" deve voltar ao CINZA
-
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
-
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:
-
Faça login com usuário limitado
- Por exemplo: um usuário que não tem acesso ao setor "Financeiro"
-
Tente acessar uma página restrita:
- Digite na barra de endereço:
http://localhost:5173/financeiro - Pressione Enter
- Digite na barra de endereço:
-
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"
-
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
-
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):
- Abra
http://localhost:5173em tela normal - Sidebar deve estar sempre visível à esquerda
- Menu ativo deve estar azul
Mobile (Tela Pequena):
-
Redimensione o navegador para < 1024px
- Ou use DevTools (F12) → Toggle Device Toolbar (Ctrl+Shift+M)
-
Sidebar deve estar escondida
-
Deve aparecer um botão de menu (☰) no canto superior esquerdo
-
Clique no botão de menu:
- Drawer (gaveta) deve abrir da esquerda
- Menu ativo deve estar azul
-
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:
# 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:
- Sistema de autenticação estiver ativo
- 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:
- 0:00-0:05 - Página inicial, Dashboard azul
- 0:05-0:10 - Clica em RH, RH fica azul, Dashboard fica cinza
- 0:10-0:15 - Clica em Funcionários, RH continua azul
- 0:15-0:20 - Clica em TI, TI fica azul, RH fica cinza
- 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:
- ✅ Servidores estão rodando (Convex + Vite)
- ✅ Sem erros no console do navegador (F12)
- ✅ Arquivos foram salvos corretamente