SteelBase/public/docs-historicos/DEBUG-CANTONEIRAS.md

# 🐛 Debug - Cantoneiras Não Carregam

## 🔍 Checklist de Verificação

### 1. Abrir Console do Navegador
Pressione `F12` e vá para a aba "Console"

### 2. Verificar Mensagens de Inicialização

Ao carregar a página, você deve ver:

```
✅ Data Manager carregado e disponível globalmente
🗄️ Inicializando Data Manager v1.0.0
📥 Cache vazio ou desatualizado. Carregando dados...
🔄 Iniciando atualização completa dos dados...
📊 Carregando Cantoneiras...
✅ Cantoneiras: 39 itens carregados
```

**Se NÃO ver essas mensagens:**
- ❌ Scripts não foram carregados corretamente
- ❌ Verifique se os arquivos existem em `js/database/`

### 3. Acessar Menu Cantoneiras

Clique em: **MATERIAIS** → **Catálogo de Perfis** → **Cantoneiras**

No console, você deve ver:

```
📊 carregarCantoneiras() - INICIANDO
🔍 Verificando disponibilidade:
  - carregarCantoneirasV2: function
  - window.dataManager: object
  - exibirCantoneirasV2: function
✅ Usando Data Manager V2
🔧 carregarCantoneirasV2() - Nova versão com Data Manager
✅ Elemento tbody encontrado
📊 Carregando cantoneiras do banco de dados...
✅ 39 cantoneiras carregadas do Data Manager
📋 Exibindo 39 cantoneiras na tabela
✅ Tabela atualizada com sucesso
```

### 4. Verificar Erros Comuns

#### Erro: "dataManager não existe"
**Causa**: Script não carregado ou erro de inicialização  
**Solução**:
```javascript
// No console, execute:
console.log('Data Manager:', window.dataManager);
console.log('Funções V2:', typeof carregarCantoneirasV2);
```

Se retornar `undefined`, recarregue a página com `Ctrl + F5`

#### Erro: "cantoneiras-tbody não encontrado"
**Causa**: Elemento HTML não existe ou timing incorreto  
**Solução**:
```javascript
// No console, execute:
console.log('Tbody:', document.getElementById('cantoneiras-tbody'));
```

Se retornar `null`, o HTML não foi renderizado ainda.

#### Erro: "HTTP 404" ao carregar CSV
**Causa**: Arquivo CSV não existe  
**Solução**: Verificar se existe `BD/perfis/cantoneiras_brasil_completo.csv`

#### Erro: "Parsing error" no CSV
**Causa**: Formato do CSV incorreto  
**Solução**: Verificar se CSV tem cabeçalho correto

---

## 🔧 Testes Manuais no Console

### Teste 1: Verificar Data Manager
```javascript
// Copie e cole no console:
console.log('=== TESTE DATA MANAGER ===');
console.log('1. Data Manager existe?', !!window.dataManager);
console.log('2. Versão:', window.dataManager?.version);
console.log('3. Stats:', window.dataManager?.getCacheStats());
```

**Resultado esperado:**
```
=== TESTE DATA MANAGER ===
1. Data Manager existe? true
2. Versão: 1.0.0
3. Stats: {version: "1.0.0", hasCache: true, ...}
```

### Teste 2: Verificar Funções V2
```javascript
console.log('=== TESTE FUNÇÕES V2 ===');
console.log('1. carregarCantoneirasV2:', typeof carregarCantoneirasV2);
console.log('2. exibirCantoneirasV2:', typeof exibirCantoneirasV2);
console.log('3. filtrarCantoneirasV2:', typeof filtrarCantoneirasV2);
```

**Resultado esperado:**
```
=== TESTE FUNÇÕES V2 ===
1. carregarCantoneirasV2: function
2. exibirCantoneirasV2: function
3. filtrarCantoneirasV2: function
```

### Teste 3: Carregar Dados Manualmente
```javascript
// Forçar carregamento:
await window.dataManager.getData('cantoneiras').then(dados => {
    console.log('✅ Dados carregados:', dados.length, 'itens');
    console.log('Primeiro item:', dados[0]);
});
```

**Resultado esperado:**
```
✅ Dados carregados: 39 itens
Primeiro item: {id: "l25_25_3", nome: "L25x25x3", ...}
```

### Teste 4: Exibir na Tabela Manualmente
```javascript
// Carregar e exibir:
await carregarCantoneirasV2();
```

**Resultado esperado:**
- Tabela preenchida com 39 linhas
- Dados visíveis

---

## 🚨 Soluções Rápidas

### Solução 1: Recarregar Scripts
```javascript
// No console:
location.reload(true); // Força reload sem cache
```

### Solução 2: Limpar Cache e Recarregar
```javascript
// No console:
localStorage.clear();
location.reload();
```

### Solução 3: Forçar Atualização de Dados
```javascript
// No console:
await window.dataManager.updateAllData();
```

### Solução 4: Carregar Método Legado
```javascript
// No console:
async function carregarLegado() {
    const response = await fetch('BD/perfis/cantoneiras_brasil_completo.csv');
    const csvText = await response.text();
    const linhas = csvText.trim().split('\n');
    
    const dados = [];
    for (let i = 1; i < linhas.length; i++) {
        const linha = linhas[i].trim();
        if (!linha) continue;
        
        const colunas = linha.split(',');
        if (colunas.length >= 9) {
            dados.push({
                id: colunas[0].trim(),
                nome: colunas[1].trim(),
                lado_mm: parseFloat(colunas[2]),
                espessura_mm: parseFloat(colunas[3]),
                peso_kg_m: parseFloat(colunas[4]),
                area_cm2: parseFloat(colunas[5]),
                momento_inercia_cm4: parseFloat(colunas[6]),
                raio_giracao_cm: parseFloat(colunas[7]),
                tipo: colunas[8].trim()
            });
        }
    }
    
    console.log('✅ Carregado:', dados.length, 'cantoneiras');
    
    // Exibir na tabela
    const tbody = document.getElementById('cantoneiras-tbody');
    if (tbody) {
        tbody.innerHTML = dados.map(item => `
            <tr>
                <td><strong>${item.nome}</strong></td>
                <td>${item.lado_mm}</td>
                <td>${item.espessura_mm}</td>
                <td>${item.peso_kg_m.toFixed(2)}</td>
                <td>${item.area_cm2.toFixed(2)}</td>
                <td>${item.momento_inercia_cm4.toFixed(2)}</td>
                <td>${item.raio_giracao_cm.toFixed(2)}</td>
                <td><span class="badge">${item.tipo}</span></td>
                <td><button class="btn btn-sm">Ver</button></td>
            </tr>
        `).join('');
        console.log('✅ Tabela preenchida!');
    } else {
        console.error('❌ Elemento tbody não encontrado!');
    }
}

// Executar:
await carregarLegado();
```

---

## 📋 Checklist de Arquivos

Verifique se estes arquivos existem:

- [ ] `js/database/data-manager.js`
- [ ] `js/database/perfis-loader.js`
- [ ] `js/database/admin-panel.js`
- [ ] `BD/perfis/cantoneiras_brasil_completo.csv`

### Verificar no Console:
```javascript
// Verificar se scripts foram carregados:
console.log('Scripts carregados:');
console.log('- data-manager.js:', !!window.dataManager);
console.log('- perfis-loader.js:', typeof carregarCantoneirasV2);
console.log('- admin-panel.js:', typeof abrirPainelDados);
```

---

## 🎯 Ordem de Carregamento Correta

No `index.html`, os scripts devem estar nesta ordem:

```html
<!-- 1. Data Manager (PRIMEIRO) -->
<script src="js/database/data-manager.js"></script>

<!-- 2. Perfis Loader (SEGUNDO) -->
<script src="js/database/perfis-loader.js"></script>

<!-- 3. Admin Panel (TERCEIRO) -->
<script src="js/database/admin-panel.js"></script>

<!-- 4. App.js (QUARTO) -->
<script src="app.js"></script>

<!-- 5. Perfis Catalog (QUINTO) -->
<script src="js/sections/perfis-catalog.js"></script>
```

---

## 🔍 Debug Avançado

### Ativar Logs Detalhados:
```javascript
// No console, antes de carregar cantoneiras:
window.DEBUG_MODE = true;
```

### Verificar Ordem de Execução:
```javascript
console.log('=== ORDEM DE CARREGAMENTO ===');
console.log('1. Data Manager:', !!window.dataManager);
console.log('2. Perfis Loader:', typeof carregarCantoneirasV2);
console.log('3. Admin Panel:', typeof abrirPainelDados);
console.log('4. App.js:', typeof showSection);
console.log('5. Perfis Catalog:', typeof getCantoneirasContent);
```

### Verificar Timing:
```javascript
// Medir tempo de carregamento:
console.time('Carregamento Cantoneiras');
await carregarCantoneiras();
console.timeEnd('Carregamento Cantoneiras');
```

---

## ✅ Resultado Esperado

Quando tudo estiver funcionando, você verá:

1. **No Console**:
   - ✅ Mensagens de inicialização
   - ✅ Dados carregados
   - ✅ Tabela atualizada
   - ❌ Nenhum erro

2. **Na Tela**:
   - ✅ Tabela com 39 cantoneiras
   - ✅ Dados corretos (nome, dimensões, peso)
   - ✅ Badges coloridos
   - ✅ Botões funcionando

3. **No Header**:
   - ✅ Badge mostra "✅ Cache Ativo"
   - ✅ Botão 🗄️ Dados visível

---

## 📞 Se Nada Funcionar

Execute este comando no console para diagnóstico completo:

```javascript
console.log('=== DIAGNÓSTICO COMPLETO ===');
console.log('\n1. SCRIPTS:');
console.log('  Data Manager:', !!window.dataManager);
console.log('  Perfis Loader:', typeof carregarCantoneirasV2);
console.log('  Admin Panel:', typeof abrirPainelDados);

console.log('\n2. ELEMENTOS HTML:');
console.log('  tbody:', !!document.getElementById('cantoneiras-tbody'));
console.log('  badge:', !!document.getElementById('cache-status-badge'));
console.log('  fab:', !!document.querySelector('.fab-data-admin'));

console.log('\n3. CACHE:');
const stats = window.dataManager?.getCacheStats();
console.log('  Tem cache?', stats?.hasCache);
console.log('  Cantoneiras:', stats?.types?.cantoneiras);

console.log('\n4. ARQUIVOS:');
fetch('BD/perfis/cantoneiras_brasil_completo.csv')
    .then(r => console.log('  CSV existe?', r.ok))
    .catch(e => console.log('  CSV erro:', e.message));

console.log('\n5. FUNÇÕES:');
console.log('  carregarCantoneiras:', typeof carregarCantoneiras);
console.log('  exibirCantoneiras:', typeof exibirCantoneiras);
console.log('  filtrarCantoneiras:', typeof filtrarCantoneiras);
```

Copie o resultado e me envie para análise!

---

**Boa sorte com o debug! 🐛🔧**