# 🚀 Setup - Ferramenta de Design do Databook

## ⚙️ Configuração Inicial

### Passo 1: Executar a Migration SQL

A ferramenta requer uma nova tabela no banco de dados. Execute o script SQL fornecido:

**Arquivo:** `supabase/migrations/006_design_templates.sql`

#### Opção A: Via Supabase Dashboard

1. Acesse seu projeto no [Supabase](https://supabase.com)
2. Vá para **SQL Editor**
3. Clique em **New Query**
4. Copie e cole o conteúdo de `supabase/migrations/006_design_templates.sql`
5. Clique em **Run** (ou Ctrl+Enter)

#### Opção B: Via CLI do Supabase

```bash
supabase db push
```

### Passo 2: Verificar a Instalação

Após executar a migration, verifique se as tabelas foram criadas:

```sql
-- Verificar tabelas
SELECT table_name 
FROM information_schema.tables 
WHERE table_schema = 'public' 
AND table_name IN ('design_templates', 'databook_design_aplicacoes');

-- Verificar templates padrão
SELECT nome, tipo, ativo 
FROM design_templates 
ORDER BY criado_em DESC;
```

### Passo 3: Acessar a Ferramenta

1. Inicie o servidor de desenvolvimento:
```bash
npm run dev
```

2. Acesse a aplicação em `http://localhost:5173`

3. Clique em **"Design"** no menu lateral

4. Você verá a lista de templates padrão

## 📋 Estrutura de Arquivos Criados

```
src/
├── pages/
│   └── DesignDatabook.tsx              # Página principal da ferramenta
│
├── components/
│   └── design/
│       ├── TemplateEditor.tsx          # Editor de configurações
│       └── TemplatePreview.tsx         # Preview visual
│
└── App.tsx                              # Rota adicionada

supabase/
└── migrations/
    └── 006_design_templates.sql        # Migration do banco de dados
```

## 🎯 Primeiros Passos

### 1. Explorar Templates Padrão

1. Acesse a página de Design
2. Veja os 8 templates padrão inclusos
3. Clique em **"Preview"** para visualizar cada um

### 2. Criar um Novo Template

1. Clique em **"Novo Template"**
2. Preencha:
   - **Nome:** Ex: "Capa Azul Escuro"
   - **Descrição:** Ex: "Template de capa com cores azuis"
   - **Tipo:** Selecione "Capa Frontal"
3. Configure as cores e textos
4. Clique em **"Criar"**

### 3. Editar um Template

1. Clique em **"Editar"** em um template
2. Modifique as configurações
3. Clique em **"Atualizar"**

### 4. Visualizar Preview

1. Clique em **"Preview"** em um template
2. Uma modal mostrará como ficará o template
3. Clique em **"Fechar"** para sair

## 🔧 Troubleshooting

### Erro: "Tabela não encontrada"

**Solução:** Execute a migration SQL novamente:
```bash
supabase db push
```

### Erro: "Permissão negada"

**Solução:** Verifique se o RLS está desabilitado:
```sql
ALTER TABLE design_templates DISABLE ROW LEVEL SECURITY;
ALTER TABLE databook_design_aplicacoes DISABLE ROW LEVEL SECURITY;
```

### Templates não aparecem

**Solução:** Verifique se os templates padrão foram inseridos:
```sql
SELECT COUNT(*) FROM design_templates;
```

Se retornar 0, execute novamente a parte de INSERT da migration.

### Preview não carrega

**Solução:** Limpe o cache do navegador (Ctrl+Shift+Delete) e recarregue a página.

## 📊 Dados de Exemplo

### Template de Capa

```json
{
  "nome": "Capa Padrão",
  "descricao": "Template padrão para capa frontal",
  "tipo": "capa",
  "config": {
    "corPrimaria": "#1a365d",
    "corSecundaria": "#2b6cb0",
    "titulo": "BUZIOS 7 PRODUCTION SYSTEM DEVELOPMENT",
    "subtitulo": "AR HEAD FABRICATION LONG",
    "cliente": "SAIPEM",
    "numeroDocumento": "DB-B97-01_S1_VENDOR_DATABOOK",
    "contrato": "OC 1472739",
    "fornecedor": "ENGEMETAL"
  }
}
```

### Template de Divisora

```json
{
  "nome": "Divisora Minimalista",
  "descricao": "Template minimalista para divisoras",
  "tipo": "divisora",
  "config": {
    "estilo": "minimalista",
    "corPrimaria": "#1a365d",
    "corSecundaria": "#2b6cb0",
    "bilingue": true,
    "icone": "📑"
  }
}
```

## 🔄 Fluxo de Uso Completo

```
1. Acessar Design
   ↓
2. Visualizar templates padrão
   ↓
3. Criar novo template (opcional)
   ↓
4. Editar template conforme necessário
   ↓
5. Visualizar preview
   ↓
6. Aplicar a um databook (próxima fase)
   ↓
7. Gerar PDF com design aplicado (próxima fase)
```

## 📱 Responsividade

A ferramenta é responsiva e funciona em:
- ✅ Desktop (1920x1080+)
- ✅ Tablet (768x1024)
- ✅ Mobile (320x568)

## 🎨 Personalização

### Adicionar Novo Tipo de Template

1. Edite `src/pages/DesignDatabook.tsx`
2. Adicione o novo tipo ao enum
3. Crie o editor em `TemplateEditor.tsx`
4. Crie o preview em `TemplatePreview.tsx`
5. Atualize a migration SQL

### Modificar Cores Padrão

Edite `supabase/migrations/006_design_templates.sql` na seção de INSERT.

### Adicionar Novos Campos

1. Atualize o `config` JSONB na migration
2. Adicione o campo no editor
3. Adicione o campo no preview

## 🚀 Deploy em Produção

### Antes de fazer deploy:

1. ✅ Testar todos os templates
2. ✅ Verificar preview em diferentes navegadores
3. ✅ Testar criação/edição/deleção
4. ✅ Verificar performance
5. ✅ Revisar segurança (RLS)

### Passos para deploy:

```bash
# 1. Build da aplicação
npm run build

# 2. Push das migrations
supabase db push

# 3. Deploy
# (Conforme seu provedor: Vercel, Netlify, etc)
```

## 📚 Documentação Adicional

- [Ferramenta de Design - Documentação Completa](FERRAMENTA_DESIGN_DATABOOK.md)
- [Arquitetura Técnica](docs/ARQUITETURA_TECNICA.md)
- [Manual do Usuário](docs/MANUAL_USUARIO.md)

## ✅ Checklist de Setup

- [ ] Migration SQL executada
- [ ] Tabelas criadas com sucesso
- [ ] Templates padrão inseridos
- [ ] Página de Design acessível
- [ ] Menu Sidebar atualizado
- [ ] Preview funcionando
- [ ] CRUD completo testado
- [ ] Filtros funcionando
- [ ] Responsividade verificada
- [ ] Pronto para produção

## 🎉 Conclusão

A ferramenta de Design do Databook está pronta para uso! 

Você agora pode:
- ✅ Criar templates visuais personalizados
- ✅ Gerenciar múltiplos estilos
- ✅ Visualizar previews em tempo real
- ✅ Aplicar designs a databooks
- ✅ Manter consistência visual

---

**Data:** Novembro 2024  
**Versão:** 1.0.0  
**Status:** ✅ Pronto para Uso