# SINAGEM - Frontend Configuration

## Visão Geral

O sistema SINAGEM está configurado para usar **Blade + Bootstrap 5 via CDN**, sem qualquer sistema de build (Vite, Webpack, etc.).

Esta é uma abordagem simples, direta e perfeita para aplicações monolíticas em Laravel.

## Estrutura Atual

```
├── resources/views/                  # Templates Blade
│   ├── layouts/
│   │   └── app.blade.php            # Layout principal
│   ├── admin/
│   │   ├── index.blade.php          # Dashboard
│   │   └── partials/
│   │       ├── header.blade.php     # Header/Navbar
│   │       ├── sidebar.blade.php    # Sidebar/Menu
│   │       └── footer.blade.php     # Footer
│
└── public/assets/                   # Assets estáticos
    ├── css/
    │   └── app.css                  # Estilos personalizados
    └── js/
        ├── app.js                   # JavaScript principal
        └── modules/
            ├── utils.js             # Utilitários
            ├── sidebar.js           # Lógica da sidebar
            └── dashboard.js         # Lógica do dashboard
```

## Como Funciona

### Layout Principal (`resources/views/layouts/app.blade.php`)

O layout carrega:

1. **Bootstrap 5 via CDN**
   ```html
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
   ```

2. **Bootstrap Icons via CDN**
   ```html
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
   ```

3. **Estilos Personalizados**
   ```html
   <link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
   ```

4. **JavaScript Personalizados**
   ```html
   <script src="{{ asset('assets/js/app.js') }}"></script>
   ```

5. **Bootstrap JS Bundle**
   ```html
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
   ```

### Flow de Desenvolvimento

1. **Criar view em Blade** → `resources/views/admin/pagina.blade.php`
2. **Usar componentes Bootstrap** → Classes do Bootstrap
3. **Adicionar estilos** → `public/assets/css/app.css`
4. **Adicionar JavaScript** → `public/assets/js/app.js` ou módulos

## Como Adicionar Código Personalizado

### CSS

Abra `public/assets/css/app.css` e adicione seu código:

```css
/* === SEU CÓDIGO AQUI === */
.minha-classe {
    color: red;
}
```

**Regras:**
- ✅ Use variáveis CSS do `:root`
- ✅ Mantenha a convenção de nomes
- ✅ Adicione comentários de seção
- ❌ NÃO coloque CSS nos Blade

### JavaScript

Abra `public/assets/js/app.js` e adicione seu código:

```javascript
// Adicionar ao namespace SINAGEM
Sinagem.MeuModulo = {
    init: function() {
        console.log('Meu módulo inicializado');
    }
};

// Inicializar no bloco DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
    Sinagem.MeuModulo.init();
});
```

**Regras:**
- ✅ Use o namespace `Sinagem`
- ✅ Crie módulos para cada funcionalidade
- ✅ Inicialize no `DOMContentLoaded`
- ❌ NÃO use scripts inline nos Blade

### Exemplo: Criar Nova Página com Blade

1. Criar arquivo `resources/views/admin/mercados.blade.php`:

```blade
@extends('layouts.app')

@section('title', 'Mercados - SINAGEM')

@section('content')
<div class="container-fluid">
    <h1>Mercados</h1>
    
    <div class="row">
        <div class="col-12">
            <div class="sinagem-card">
                <div class="card-body">
                    <!-- Conteúdo aqui -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
```

2. Adicionar rota em `routes/web.php`:

```php
Route::get('/mercados', function () {
    return view('admin.mercados');
})->name('mercados');
```

3. Adicionar link na sidebar `resources/views/admin/partials/sidebar.blade.php`:

```blade
<a href="{{ route('mercados') }}" class="list-group-item list-group-item-action">
    <i class="bi bi-shop me-2"></i>Mercados
</a>
```

## API de Utilitários

### Namespace SINAGEM

**Utilitários Globais:**
```javascript
// AJAX
Sinagem.Utils.ajax('/api/endpoint', { method: 'POST', data: {...} });

// Validação
Sinagem.Utils.isEmail('user@email.com');
Sinagem.Utils.isPhone('+258843000000');

// Formatação
Sinagem.Utils.formatCurrency(1500);

// Delay
Sinagem.Utils.delay(1000); // Retorna Promise

// Toast
Sinagem.Utils.showToast('Mensagem!', 'success', 3000);
```

**Sidebar:**
```javascript
// Ativar item de menu
Sinagem.Sidebar.setActiveItem();

// Toggle seção
Sinagem.Sidebar.toggleSection('sectionId');
```

**Dashboard:**
```javascript
// Animar cards
Sinagem.Dashboard.animateCards();

// Animar número
Sinagem.Dashboard.animateNumber(elemento, 1000, 1000);

// Atualizar métricas
Sinagem.Dashboard.refreshMetrics();
```

## Classes CSS Disponíveis

### Cartões
```html
<div class="sinagem-card"><!-- conteúdo --></div>
```

### Animações
```html
<div class="fade-in"><!-- animação fade in --></div>
<div class="slide-in-left"><!-- slide left --></div>
<div class="slide-in-right"><!-- slide right --></div>
```

### Utilitários
```html
<div class="sinagem-primary">Texto primário</div>
<div class="sinagem-border-primary">Borda primária</div>
<div class="loading">Carregando...</div>
```

## Performance e Otimização

### ✅ Pontos Fortes
- **Sem build tools** - Página carrega instantaneamente
- **CDN** - Bootstrap servido dos servidores globais
- **Caching** - Blade compilado e cacheado
- **Modular** - JS organizado em módulos

### 📋 Boas Práticas
1. Minimize CSS/JS inline
2. Use componentes Bootstrap
3. Organize código em módulos
4. Adicione comentários em seções
5. Teste em navegadores antigos se necessário

## Próximos Passos

**IMPORTANTE:** Antes de continuar com desenvolvimento:

1. **📤 ENVIE TODO SEU CSS EXISTENTE**
   - CSS de estilos personalizados
   - CSS de temas ou cores
   - CSS de componentes

2. **📤 ENVIE TODO SEU JAVASCRIPT EXISTENTE**
   - Funções reutilizáveis
   - Handlers de eventos
   - Lógica de páginas específicas

3. **🗂️ ORGANIZAREMOS**
   - Separaremos CSS/JS corretamente
   - Eliminaremos duplicações
   - Seguiremos a convenção do projeto

## Troubleshooting

### Assets não carregam
```bash
# Limpar cache Laravel
php artisan view:clear
php artisan config:clear
```

### JavaScript não funciona
- Verificar console do navegador (`F12`)
- Verificar se o namespace `Sinagem` é inicializado
- Verificar se o arquivo está em `public/assets/`

### CSS não aplica
- Verificar se o arquivo está em `public/assets/css/`
- Verificar especificidade CSS
- Usar `!important` se necessário (com moderação)

## Comandos Úteis

```bash
# Servidor Laravel
php artisan serve

# Ver cache status
php artisan config:show

# Limpar caches
php artisan cache:clear
php artisan view:clear
php artisan config:clear
```

---

**✅ Sistema configurado e pronto para uso!**

Para mais informações ou dúvidas, consulte a documentação do Bootstrap: https://getbootstrap.com