11 KiB
11 KiB
🎯 Guia Visual - Como Acessar o Sistema de Dados
📍 Onde Encontrar os Controles
1. Botão no Header (Recomendado) 🗄️
┌─────────────────────────────────────────────────────────────┐
│ 🏗️ AÇO CALC PRO │
│ Plataforma Técnica... │
│ │
│ [🔍 Buscar] [📖 Manual] [📋 Histórico] [⭐ Favoritos] │
│ [⚙️ Admin] [🗄️ Dados] [✅ Cache Ativo] [🎯 Expert] [🌙] │
│ ↑ ↑ │
│ │ └─ Badge de Status │
│ └─ CLIQUE AQUI! │
└─────────────────────────────────────────────────────────────┘
Localização: Canto superior direito, botão roxo com ícone 🗄️
Texto: "Dados"
Cor: Gradiente roxo (destaca dos outros botões)
2. Badge de Status do Cache ✅
┌─────────────────────────────────────────────────────────────┐
│ Header Actions: │
│ [...] [🗄️ Dados] [✅ Cache Ativo] [🎯 Expert] [🌙] │
│ ↑ │
│ └─ CLIQUE AQUI TAMBÉM! │
└─────────────────────────────────────────────────────────────┘
Localização: Ao lado do botão "Dados"
Estados:
- ⏳ Carregando... (cinza) - Inicializando
- ✅ Cache Ativo (verde) - Dados prontos
- ❌ Sem Cache (vermelho) - Precisa carregar
Ação: Clique para abrir o painel de administração
3. Botão Flutuante (FAB) 🗄️
┌─────────┐
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ 🗄️ │ ← CLIQUE AQUI!
└─────────┘
Localização: Canto inferior direito (flutuante)
Cor: Gradiente roxo
Sempre visível: Sim, em todas as páginas
Hover: Gira 15° e aumenta
4. Atalho de Teclado ⌨️
Ctrl + Shift + D
Funciona: Em qualquer lugar da aplicação
Ação: Abre o painel de administração instantaneamente
🎨 Painel de Administração
Quando você clicar em qualquer um dos controles acima, verá:
┌─────────────────────────────────────────────────────────────┐
│ 🗄️ Administração de Dados [×] │
├─────────────────────────────────────────────────────────────┤
│ │
│ 📊 Status do Sistema │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Versão: 1.0.0 │ Cache: ✅ Ativo │ Última: hoje │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ⚡ Ações Rápidas │
│ [🔄 Atualizar Todos] [🗑️ Limpar Cache] │
│ [📤 Exportar] [🔍 Verificar Integridade] │
│ │
│ 📋 Status por Tipo de Perfil │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Tipo │ Status │ Itens │ Ações │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ Cantoneiras │ ✅ Cached │ 39 │ [🔄] [🗑️] │ │
│ │ Barras │ ✅ Cached │ 25 │ [🔄] [🗑️] │ │
│ │ Tubos │ ❌ Vazio │ 0 │ [🔄] [🗑️] │ │
│ │ ... │ ... │ ... │ ... │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 📝 Log de Atividades │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ ✅ Última atualização: 08/11/2025 14:30 │ │
│ │ 📊 Tipos carregados: 10/10 │ │
│ │ ❌ Erros: 0 │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ [Fechar] │
└─────────────────────────────────────────────────────────────┘
🚀 Como Usar - Passo a Passo
Primeira Vez:
- Abra a aplicação no navegador
- Aguarde o carregamento (você verá ⏳ Carregando...)
- Observe o badge mudar para ✅ Cache Ativo
- Clique no botão 🗄️ Dados (header) ou no FAB (canto)
- Veja o painel com todas as informações
Para Atualizar Dados:
- Clique em 🗄️ Dados
- Clique em "🔄 Atualizar Todos os Dados"
- Confirme a ação
- Aguarde o processamento
- Veja o log de atividades com resultados
Para Limpar Cache:
- Clique em 🗄️ Dados
- Clique em "🗑️ Limpar Cache"
- Confirme a ação
- Recarregue a página (dados serão recarregados)
Para Verificar Status:
-
Olhe o badge no header
- ✅ Verde = Tudo OK
- ❌ Vermelho = Precisa carregar
- ⏳ Cinza = Carregando
-
Ou clique em 🗄️ Dados para ver detalhes completos
🎯 Atalhos Rápidos
| Ação | Método |
|---|---|
| Abrir painel | Clique em 🗄️ Dados (header) |
| Abrir painel | Clique no FAB (canto inferior direito) |
| Abrir painel | Clique no badge ✅ Cache Ativo |
| Abrir painel | Pressione Ctrl + Shift + D |
| Ver status | Olhe o badge no header |
| Atualizar dados | Painel → 🔄 Atualizar Todos |
| Limpar cache | Painel → 🗑️ Limpar Cache |
🔍 Indicadores Visuais
Badge de Status:
⏳ Carregando... → Sistema inicializando
✅ Cache Ativo → Dados prontos para uso
❌ Sem Cache → Precisa carregar dados
⚠️ Erro → Problema detectado
Cores:
🟢 Verde → Tudo funcionando
🔴 Vermelho → Atenção necessária
🟡 Amarelo → Carregando/Processando
🟣 Roxo → Botões de administração
📱 Responsivo
Desktop:
- ✅ Botão no header
- ✅ Badge de status
- ✅ FAB no canto
- ✅ Atalho de teclado
Tablet:
- ✅ Botão no header (menor)
- ✅ Badge de status
- ✅ FAB no canto (menor)
Mobile:
- ✅ FAB no canto (adaptado)
- ⚠️ Header pode estar colapsado
🎨 Personalização
Mudar Posição do FAB:
No style.css, procure .fab-data-admin e altere:
/* Canto inferior esquerdo */
.fab-data-admin {
bottom: 24px;
left: 24px; /* em vez de right */
}
/* Canto superior direito */
.fab-data-admin {
top: 24px;
right: 24px; /* em vez de bottom */
}
Mudar Cor do FAB:
.fab-data-admin {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); /* Vermelho */
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); /* Verde */
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); /* Rosa */
}
Desabilitar FAB:
No index.html, remova ou comente:
<!-- Botão Flutuante de Administração de Dados -->
<!-- <button class="fab-data-admin" onclick="abrirPainelDados()" ...>...</button> -->
🐛 Troubleshooting
Botão não aparece?
- Verifique se os scripts foram carregados
- Abra console (F12) e procure erros
- Recarregue a página (Ctrl+F5)
Badge mostra "Erro"?
- Abra o painel de administração
- Clique em "Verificar Integridade"
- Veja o log de erros
- Tente "Atualizar Todos os Dados"
FAB não funciona?
- Verifique se o CSS foi carregado
- Procure por conflitos de z-index
- Teste em modo anônimo do navegador
Atalho não funciona?
- Certifique-se de usar
Ctrl + Shift + D(maiúsculo) - Verifique se não há conflito com atalhos do navegador
- Teste em outra página da aplicação
✅ Checklist de Verificação
Após implementar, verifique:
- Botão 🗄️ Dados aparece no header
- Badge de status aparece e atualiza
- FAB aparece no canto inferior direito
- Clicar em qualquer controle abre o painel
- Atalho Ctrl+Shift+D funciona
- Painel mostra informações corretas
- Ações do painel funcionam
- Badge atualiza automaticamente
- Visual está consistente com o tema
- Funciona em mobile
🎉 Pronto!
Agora você tem 4 formas diferentes de acessar o sistema de administração de dados:
- 🗄️ Botão no Header (mais visível)
- ✅ Badge de Status (informativo)
- 🗄️ FAB Flutuante (sempre acessível)
- ⌨️ Atalho de Teclado (mais rápido)
Escolha o que preferir e comece a usar! 🚀