# 📊 Diagrama Visual do Sistema de Banco de Dados

## 🏗️ Arquitetura Geral

```
┌─────────────────────────────────────────────────────────────┐
│                    APLICAÇÃO WEB                             │
│                   (index.html)                               │
└─────────────────────────────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│                  SISTEMA DE SCRIPTS                          │
├─────────────────────────────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │ Data Manager │  │Perfis Loader │  │ Admin Panel  │      │
│  │   (Core)     │  │  (UI Logic)  │  │    (Admin)   │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
│         │                  │                  │              │
│         └──────────────────┴──────────────────┘              │
│                            │                                 │
└────────────────────────────┼─────────────────────────────────┘
                            │
                ┌───────────┴───────────┐
                │                       │
                ▼                       ▼
        ┌──────────────┐        ┌──────────────┐
        │ localStorage │        │  CSV Files   │
        │   (Cache)    │        │  (BD/perfis) │
        └──────────────┘        └──────────────┘
```

---

## 🔄 Fluxo de Dados Completo

```
INICIALIZAÇÃO
═════════════

1. Página Carrega
   │
   ├─> Carrega data-manager.js
   │   │
   │   └─> new DataManager()
   │       │
   │       └─> init()
   │           │
   │           ├─> getMetadata()
   │           │   │
   │           │   ├─> Cache existe? ──YES──> Dados prontos ✅
   │           │   │
   │           │   └─> NO ──> updateAllData()
   │           │               │
   │           │               ├─> loadCSV('cantoneiras')
   │           │               ├─> loadCSV('barras_redondas')
   │           │               ├─> loadCSV('tubos_circulares')
   │           │               ├─> ... (10 tipos)
   │           │               │
   │           │               └─> saveToCache()
   │           │                   │
   │           │                   └─> localStorage.setItem()
   │           │
   │           └─> Dados prontos ✅
   │
   ├─> Carrega perfis-loader.js
   │   └─> Funções disponíveis
   │
   └─> Carrega admin-panel.js
       └─> Funções disponíveis


CARREGAMENTO DE CATÁLOGO
═════════════════════════

2. Usuário Acessa Catálogo
   │
   └─> showSection('catalogo-perfis')
       │
       └─> getCantoneirasContent()
           │
           └─> HTML renderizado
               │
               └─> carregarCantoneiras()
                   │
                   └─> carregarCantoneirasV2()
                       │
                       ├─> dataManager.getData('cantoneiras')
                       │   │
                       │   ├─> loadFromCache()
                       │   │   │
                       │   │   ├─> Cache existe? ──YES──> Retorna dados ⚡
                       │   │   │
                       │   │   └─> NO ──> loadCSV()
                       │   │               │
                       │   │               └─> saveToCache()
                       │   │
                       │   └─> Retorna dados
                       │
                       └─> exibirCantoneirasV2(dados)
                           │
                           └─> Tabela preenchida ✅


FILTROS E BUSCAS
════════════════

3. Usuário Aplica Filtro
   │
   └─> filtrarCantoneirasV2()
       │
       ├─> Obter valores dos filtros
       │   ├─> Tamanho
       │   ├─> Peso máximo
       │   └─> Busca por nome
       │
       ├─> dataManager.filterData(dados, filtros)
       │   └─> Filtra em memória ⚡
       │
       ├─> dataManager.searchData(dados, busca)
       │   └─> Busca em memória ⚡
       │
       └─> exibirCantoneirasV2(filtrados)
           └─> Tabela atualizada ✅


ADMINISTRAÇÃO
═════════════

4. Usuário Abre Painel Admin
   │
   └─> abrirPainelDados()
       │
       ├─> getCacheStats()
       │   │
       │   ├─> getMetadata()
       │   └─> loadFromCache() para cada tipo
       │
       ├─> Renderiza modal com:
       │   ├─> Status do sistema
       │   ├─> Tabela de tipos
       │   ├─> Botões de ação
       │   └─> Log de atividades
       │
       └─> Modal exibido ✅

5. Usuário Atualiza Dados
   │
   └─> atualizarTodosDados()
       │
       └─> dataManager.updateAllData()
           │
           ├─> Para cada tipo:
           │   ├─> loadCSV()
           │   └─> saveToCache()
           │
           └─> updateMetadata()
               └─> Dados atualizados ✅
```

---

## 💾 Estrutura do Cache (localStorage)

```
localStorage
├─ acoCalcPro_metadata
│  └─ {
│      version: "1.0.0",
│      lastUpdate: 1234567890,
│      results: { success: [...], errors: [...] },
│      totalTypes: 10,
│      successCount: 10,
│      errorCount: 0
│     }
│
├─ acoCalcPro_cache_cantoneiras
│  └─ [
│      {
│        id: "CANT001",
│        nome: "L25x25x3",
│        lado_mm: 25,
│        espessura_mm: 3,
│        peso_kg_m: 1.11,
│        area_cm2: 1.42,
│        momento_inercia_cm4: 0.48,
│        raio_giracao_cm: 0.58,
│        tipo: "Pequena",
│        _metadata: {
│          source: "BD/perfis/cantoneiras_brasil_completo.csv",
│          loadedAt: "2025-01-01T12:00:00.000Z",
│          version: "1.0.0"
│        }
│      },
│      ...
│     ]
│
├─ acoCalcPro_cache_barras_redondas
│  └─ [...]
│
├─ acoCalcPro_cache_tubos_circulares
│  └─ [...]
│
└─ ... (outros tipos)
```

---

## 🔍 Fluxo de Decisão do Cache

```
getData(tipo)
    │
    ▼
loadFromCache(tipo)
    │
    ├─ Cache existe?
    │  │
    │  ├─ SIM ──> Retorna dados ⚡ (50ms)
    │  │
    │  └─ NÃO ──> loadCSV(config)
    │             │
    │             ├─ fetch(csv)
    │             │  │
    │             │  ├─ Sucesso ──> Processa CSV
    │             │  │              │
    │             │  │              ├─ Parse linhas
    │             │  │              ├─ Converte tipos
    │             │  │              ├─ Adiciona metadata
    │             │  │              │
    │             │  │              └─> saveToCache()
    │             │  │                  │
    │             │  │                  └─> Retorna dados ✅ (500ms)
    │             │  │
    │             │  └─ Erro ──> throw Error ❌
    │             │
    │             └─ Retorna dados
    │
    └─ Retorna dados
```

---

## ⏱️ Timeline de Performance

```
PRIMEIRA CARGA (Sem Cache)
═══════════════════════════

0ms     ├─ Página carrega
        │
50ms    ├─ Data Manager inicializa
        │
100ms   ├─ Verifica cache (vazio)
        │
150ms   ├─ Inicia carregamento de CSVs
        │
200ms   ├─ Fetch cantoneiras.csv
        │
300ms   ├─ Processa CSV
        │
400ms   ├─ Salva no cache
        │
500ms   └─ Dados prontos ✅


SEGUNDA CARGA (Com Cache)
══════════════════════════

0ms     ├─ Página carrega
        │
50ms    ├─ Data Manager inicializa
        │
60ms    ├─ Verifica cache (existe!)
        │
70ms    ├─ Carrega do localStorage
        │
80ms    └─ Dados prontos ✅ (10x mais rápido!)


FILTROS (Em Memória)
════════════════════

0ms     ├─ Usuário aplica filtro
        │
5ms     ├─ filterData() processa
        │
10ms    └─ Tabela atualizada ✅ (instantâneo!)
```

---

## 🎯 Componentes e Responsabilidades

```
┌─────────────────────────────────────────────────────────────┐
│                     DATA MANAGER                             │
├─────────────────────────────────────────────────────────────┤
│  Responsabilidades:                                          │
│  • Gerenciar cache (localStorage)                           │
│  • Carregar e processar CSVs                                │
│  • Validar e normalizar dados                               │
│  • Filtrar e buscar dados                                   │
│  • Controlar versionamento                                  │
│  • Gerenciar TTL (24 horas)                                 │
│                                                              │
│  Métodos Principais:                                         │
│  • getData(tipo)                                            │
│  • filterData(dados, filtros)                               │
│  • searchData(dados, termo)                                 │
│  • updateAllData()                                          │
│  • clearCache()                                             │
│  • getCacheStats()                                          │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                    PERFIS LOADER                             │
├─────────────────────────────────────────────────────────────┤
│  Responsabilidades:                                          │
│  • Carregar dados via Data Manager                          │
│  • Exibir dados na interface                                │
│  • Gerenciar estado da UI (loading, erro)                   │
│  • Aplicar filtros e buscas                                 │
│  • Atualizar contadores                                     │
│                                                              │
│  Funções Principais:                                         │
│  • carregarCantoneirasV2()                                  │
│  • exibirCantoneirasV2(dados)                               │
│  • filtrarCantoneirasV2()                                   │
│  • limparFiltrosCantoneirasV2()                             │
│  • atualizarDadosCantoneiras()                              │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                     ADMIN PANEL                              │
├─────────────────────────────────────────────────────────────┤
│  Responsabilidades:                                          │
│  • Interface de administração                               │
│  • Visualizar status do sistema                             │
│  • Executar ações de manutenção                             │
│  • Exibir logs e estatísticas                               │
│  • Exportar dados                                           │
│                                                              │
│  Funções Principais:                                         │
│  • abrirPainelDados()                                       │
│  • atualizarTodosDados()                                    │
│  • limparCacheCompleto()                                    │
│  • verificarIntegridade()                                   │
│  • exportarDados()                                          │
└─────────────────────────────────────────────────────────────┘
```

---

## 🔄 Ciclo de Vida dos Dados

```
CRIAÇÃO
═══════
CSV criado/atualizado
    │
    └─> Armazenado em BD/perfis/

CARREGAMENTO
════════════
Primeira vez ou cache expirado
    │
    ├─> fetch(csv)
    ├─> parse()
    ├─> validate()
    ├─> normalize()
    └─> saveToCache()

CACHE
═════
Dados em localStorage
    │
    ├─> Válido por 24 horas
    ├─> Versionado
    └─> Pode ser limpo manualmente

USO
═══
Aplicação usa dados
    │
    ├─> getData() ──> loadFromCache()
    ├─> filterData()
    └─> searchData()

ATUALIZAÇÃO
═══════════
Manual ou automática (TTL)
    │
    ├─> clearCache()
    ├─> loadCSV()
    └─> saveToCache()

EXPIRAÇÃO
═════════
Após 24 horas ou mudança de versão
    │
    └─> needsUpdate() ──> true
        │
        └─> updateAllData()
```

---

## 📊 Métricas de Performance

```
OPERAÇÃO                    TEMPO       MELHORIA
═══════════════════════════════════════════════════
Primeira carga              500ms       Baseline
Segunda carga (cache)       50ms        10x ⚡
Filtro por tipo            10ms        50x ⚡
Busca por nome             10ms        50x ⚡
Limpar filtros             5ms         100x ⚡
Atualizar dados            500ms       N/A
Limpar cache               50ms        N/A
Verificar integridade      100ms       N/A
Exportar dados             200ms       N/A
```

---

## 🎨 Interface Visual

```
┌─────────────────────────────────────────────────────────────┐
│  HEADER                                          [🗄️] [🌙]  │
├─────────────────────────────────────────────────────────────┤
│  SIDEBAR          │  MAIN CONTENT                           │
│                   │                                          │
│  📐 MATERIAIS     │  ┌────────────────────────────────────┐ │
│  ├─ Catálogo ◄───┼──┤ 📐 Cantoneiras - Catálogo          │ │
│  ├─ CEV          │  │                                      │ │
│  └─ Seletor      │  │  🔍 Filtros                         │ │
│                   │  │  ┌──────────────────────────────┐  │ │
│  🔩 CONEXÕES      │  │  │ Tamanho: [Todos ▼]          │  │ │
│  ├─ Parafusos    │  │  │ Peso Max: [____]             │  │ │
│  └─ Furação      │  │  │ Busca: [____]                │  │ │
│                   │  │  └──────────────────────────────┘  │ │
│  🔥 SOLDAGEM      │  │                                      │ │
│  ├─ Pré-aquec.   │  │  📊 Tabela (39 modelos)             │ │
│  └─ Consumo      │  │  ┌──────────────────────────────┐  │ │
│                   │  │  │ Nome │ Lado │ Esp │ Peso ... │  │ │
│  🔬 ENSAIOS       │  │  ├──────────────────────────────┤  │ │
│  ├─ Dureza       │  │  │ L25  │ 25   │ 3   │ 1.11 ... │  │ │
│  └─ Charpy       │  │  │ L25  │ 25   │ 4   │ 1.42 ... │  │ │
│                   │  │  │ ...                          │  │ │
│  🎨 PINTURA       │  │  └──────────────────────────────┘  │ │
│  └─ Consumo      │  │                                      │ │
│                   │  │  Total: 39 modelos                  │ │
│  💰 ORÇAMENTO     │  └────────────────────────────────────┘ │
│  └─ Detalhado    │                                          │
│                   │                                          │
└───────────────────┴──────────────────────────────────────────┘
                                                    [🗄️ FAB]
```

---

**Sistema completo e documentado! 🎉**