305 lines
11 KiB
Markdown
305 lines
11 KiB
Markdown
# 🎯 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:
|
||
|
||
1. **Abra a aplicação** no navegador
|
||
2. **Aguarde** o carregamento (você verá ⏳ Carregando...)
|
||
3. **Observe** o badge mudar para ✅ Cache Ativo
|
||
4. **Clique** no botão 🗄️ Dados (header) ou no FAB (canto)
|
||
5. **Veja** o painel com todas as informações
|
||
|
||
### Para Atualizar Dados:
|
||
|
||
1. **Clique** em 🗄️ Dados
|
||
2. **Clique** em "🔄 Atualizar Todos os Dados"
|
||
3. **Confirme** a ação
|
||
4. **Aguarde** o processamento
|
||
5. **Veja** o log de atividades com resultados
|
||
|
||
### Para Limpar Cache:
|
||
|
||
1. **Clique** em 🗄️ Dados
|
||
2. **Clique** em "🗑️ Limpar Cache"
|
||
3. **Confirme** a ação
|
||
4. **Recarregue** a página (dados serão recarregados)
|
||
|
||
### Para Verificar Status:
|
||
|
||
1. **Olhe** o badge no header
|
||
- ✅ Verde = Tudo OK
|
||
- ❌ Vermelho = Precisa carregar
|
||
- ⏳ Cinza = Carregando
|
||
|
||
2. **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:
|
||
|
||
```css
|
||
/* 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:
|
||
|
||
```css
|
||
.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:
|
||
|
||
```html
|
||
<!-- Botão Flutuante de Administração de Dados -->
|
||
<!-- <button class="fab-data-admin" onclick="abrirPainelDados()" ...>...</button> -->
|
||
```
|
||
|
||
---
|
||
|
||
## 🐛 Troubleshooting
|
||
|
||
### Botão não aparece?
|
||
1. Verifique se os scripts foram carregados
|
||
2. Abra console (F12) e procure erros
|
||
3. Recarregue a página (Ctrl+F5)
|
||
|
||
### Badge mostra "Erro"?
|
||
1. Abra o painel de administração
|
||
2. Clique em "Verificar Integridade"
|
||
3. Veja o log de erros
|
||
4. Tente "Atualizar Todos os Dados"
|
||
|
||
### FAB não funciona?
|
||
1. Verifique se o CSS foi carregado
|
||
2. Procure por conflitos de z-index
|
||
3. Teste em modo anônimo do navegador
|
||
|
||
### Atalho não funciona?
|
||
1. Certifique-se de usar `Ctrl + Shift + D` (maiúsculo)
|
||
2. Verifique se não há conflito com atalhos do navegador
|
||
3. 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:
|
||
|
||
1. 🗄️ **Botão no Header** (mais visível)
|
||
2. ✅ **Badge de Status** (informativo)
|
||
3. 🗄️ **FAB Flutuante** (sempre acessível)
|
||
4. ⌨️ **Atalho de Teclado** (mais rápido)
|
||
|
||
**Escolha o que preferir e comece a usar! 🚀**
|