# 🌐 Site / Catálogo - Guia de Configuração

## 📋 Visão Geral

O módulo **Site / Catálogo** permite gerenciar quais produtos do seu estoque serão exibidos no catálogo online, com controle total sobre visibilidade, preços e configurações.

## 🚀 Instalação e Configuração

### 1. Executar Script SQL

Primeiro, execute o script SQL no Supabase para adicionar o campo de visibilidade:

```bash
# Acesse o SQL Editor do Supabase e execute:
sql/add-catalogo-visibility.sql
```

Este script adiciona:
- Campo `visivel_catalogo` na tabela produtos
- Índice para melhor performance
- Define todos os produtos existentes como visíveis por padrão

### 2. Acessar o Menu

Após executar o script, o novo menu estará disponível:

1. Faça login no sistema
2. Clique em **"Site / Catalogo"** no menu lateral
3. Configure as opções do catálogo

## ⚙️ Funcionalidades

### Configurações do Catálogo

**URL do Site**
- Defina a URL onde o catálogo será publicado
- Exemplo: `https://liberikids.com.br`

**Status do Catálogo**
- ✅ **Ativo**: Catálogo está disponível online
- ❌ **Inativo**: Catálogo está offline para manutenção

**Exibir Preços**
- ✅ Mostrar preços dos produtos no catálogo
- ❌ Ocultar preços (apenas mostrar produtos)

**Exibir Estoque**
- ✅ Mostrar quantidade em estoque
- ❌ Ocultar informações de estoque

### Gerenciamento de Produtos

#### Estatísticas

O sistema exibe três métricas principais:

📦 **Total de Produtos**: Todos os produtos cadastrados
👁️ **Produtos Visíveis**: Produtos mostrados no catálogo
🙈 **Produtos Ocultos**: Produtos não visíveis no catálogo

#### Controle de Visibilidade

Para cada produto, você pode:

**Tornar Visível** 👁️
- Clique no botão "Oculto" para tornar o produto visível
- Produto aparecerá destacado e disponível no catálogo

**Tornar Oculto** 🙈
- Clique no botão "Visível" para ocultar o produto
- Produto fica esmaecido e não aparece no catálogo online

## 📊 Estrutura de Dados

### Tabela: produtos

```sql
visivel_catalogo BOOLEAN DEFAULT true
```

- `true`: Produto visível no catálogo
- `false`: Produto oculto do catálogo

### Tabela: configuracoes

```sql
chave: 'catalogo_config'
valor: {
  catalogoAtivo: boolean,
  urlSite: string,
  exibirPrecos: boolean,
  exibirEstoque: boolean
}
```

## 🔌 API Endpoints

### GET /api/configuracoes/catalogo
Busca as configurações do catálogo

**Resposta:**
```json
{
  "catalogoAtivo": false,
  "urlSite": "",
  "exibirPrecos": true,
  "exibirEstoque": false
}
```

### POST /api/configuracoes/catalogo
Salva as configurações do catálogo

**Body:**
```json
{
  "catalogoAtivo": true,
  "urlSite": "https://liberikids.com.br",
  "exibirPrecos": true,
  "exibirEstoque": false
}
```

### PATCH /api/produtos/:id/visibilidade
Atualiza a visibilidade de um produto

**Body:**
```json
{
  "visivelCatalogo": true
}
```

**Resposta:**
```json
{
  "success": true,
  "message": "Produto visível no catálogo",
  "produto": { ... }
}
```

## 🎨 Layout do Catálogo

### Grid de Produtos

Cada produto exibe:

1. **Imagem do Produto**
   - Imagem principal ou ícone de placeholder
   - 200px de altura

2. **Informações**
   - Nome do produto
   - Descrição (máximo 2 linhas)
   - Preço de venda
   - Quantidade em estoque

3. **Botão de Visibilidade**
   - 🟢 Verde: Produto visível
   - ⚪ Cinza: Produto oculto

### Estados Visuais

**Produto Visível**
- Fundo branco
- Borda normal
- Botão verde "Visível"

**Produto Oculto**
- Opacidade reduzida (50%)
- Botão cinza "Oculto"

## 🔧 Troubleshooting

### Campo visivel_catalogo não existe

**Erro:**
```
column "visivel_catalogo" does not exist
```

**Solução:**
Execute o script SQL:
```bash
sql/add-catalogo-visibility.sql
```

### Produtos não aparecem

**Verificar:**
1. Campo `visivel_catalogo = true` no banco
2. Campo `ativo = true` no banco
3. Produto tem variações cadastradas

### API não responde

**Verificar:**
1. Servidor está rodando (porta 5000)
2. Supabase está configurado corretamente
3. Variáveis de ambiente estão corretas

## 📝 Fluxo de Uso

### Para Administradores

1. Acesse **Site / Catalogo**
2. Configure as opções gerais
3. Revise os produtos cadastrados
4. Oculte produtos sem estoque ou inativos
5. Salve as configurações
6. Ative o catálogo quando pronto

### Para o Catálogo Online

1. Sistema busca apenas produtos com `visivel_catalogo = true`
2. Respeita configurações de exibição (preços, estoque)
3. Mostra produtos ordenados por data de cadastro
4. Exibe imagens e descrições conforme cadastrado

## 🎯 Boas Práticas

### Visibilidade de Produtos

✅ **Manter Visível:**
- Produtos com estoque disponível
- Produtos com fotos de qualidade
- Produtos com descrições completas
- Produtos da estação atual

❌ **Manter Oculto:**
- Produtos sem estoque
- Produtos descontinuados
- Produtos sem foto
- Produtos em processo de cadastro

### Configurações

**Desenvolvimento:**
- Catálogo: Inativo
- Exibir Preços: Sim
- Exibir Estoque: Sim

**Produção:**
- Catálogo: Ativo
- Exibir Preços: Conforme estratégia
- Exibir Estoque: Não (para evitar frustração)

## 📱 Responsividade

O layout é totalmente responsivo:

**Desktop (> 768px)**
- Grid de 3-4 colunas
- Botões grandes e visíveis

**Mobile (< 768px)**
- Grid de 1 coluna
- Cards otimizados para toque
- Botões expandidos

## 🔐 Segurança

- Apenas administradores logados podem:
  - Acessar o painel de catálogo
  - Modificar configurações
  - Alterar visibilidade de produtos

- O catálogo público terá acesso somente leitura

## 🎨 Personalização

### Cores

As cores podem ser alteradas em:
```css
/client/src/styles/site-catalogo.css
```

Principais variáveis:
- `#667eea` - Cor primária (roxo)
- `#48bb78` - Sucesso (verde)
- `#ed8936` - Aviso (laranja)

### Textos

Textos podem ser alterados em:
```javascript
/client/src/pages/SiteCatalogo.js
```

## 📊 Métricas

O sistema exibe:
- Total de produtos cadastrados
- Produtos visíveis no catálogo
- Produtos ocultos do catálogo

Útil para:
- Acompanhar o crescimento do catálogo
- Identificar produtos que precisam de atenção
- Tomar decisões sobre quais produtos promover

## 🚀 Próximos Passos

Após configurar o Site / Catálogo, você pode:

1. Integrar com um site WordPress
2. Criar uma landing page personalizada
3. Exportar dados para redes sociais
4. Gerar QR Code para o catálogo
5. Criar materiais de marketing

---

**Desenvolvido para Liberi Kids - Moda Infantil** 👶✨