octto-engenharia/docs/cms-documentation.md

# Sistema de Gerenciamento de Conteúdo - OCCTO Engenharia

## 📋 Visão Geral

Sistema completo para o cliente editar dinamicamente o conteúdo das páginas do site através do painel administrativo.

## ✅ Componentes Implementados

### 1. Banco de Dados (Prisma)
- **Modelo**: `PageContent`
  - `id`: ID único (CUID)
  - `slug`: Identificador da página (único) - Ex: 'home', 'sobre', 'contato'
  - `content`: JSON com todo o conteúdo editável da página
  - `updatedAt`: Data da última atualização

### 2. API Routes
- **GET `/api/pages`** - Lista todas as páginas (público)
- **GET `/api/pages/[slug]`** - Busca página específica (público)
- **PUT `/api/pages/[slug]`** - Atualiza conteúdo (admin apenas, requer autenticação)
- **DELETE `/api/pages/[slug]`** - Deleta página (admin apenas)

### 3. Painel Administrativo

#### `/admin/paginas`
Lista de páginas disponíveis para edição:
- ✅ Home (página inicial)
- ✅ Sobre (sobre nós)
- ✅ Contato (informações de contato)

Mostra status de cada página (configurada ou não) e data da última atualização.

#### `/admin/paginas/home`
Interface de edição da página inicial com seções:

**Banner Principal (Hero)**
- Título principal
- Subtítulo
- Texto do botão

**Números em Destaque (Stats)**
- Clientes atendidos
- Projetos realizados
- Anos de experiência

**Chamada para Ação (CTA)**
- Título da chamada
- Texto de apoio
- Texto do botão

### 4. Frontend Público

#### Hook Customizado: `usePageContent(slug)`
```typescript
const { content, loading, error } = usePageContent('home');
```

Busca conteúdo dinâmico do banco de dados. Se não existir, usa as traduções como fallback.

#### Integração na Home (`page.tsx`)
```typescript
// Usa conteúdo do banco ou fallback para traduções
const hero = content?.hero || {
  title: t('home.hero.title'),
  subtitle: t('home.hero.subtitle'),
  buttonText: t('home.hero.cta_primary')
};
```

## 🎯 Como Usar (Cliente)

### 1. Acessar Painel Admin
1. Fazer login em `/acesso`
2. Ir para "Páginas" no menu lateral

### 2. Editar Conteúdo
1. Clicar na página desejada (ex: "Página Inicial")
2. Editar os campos de texto
3. Clicar em "Salvar Alterações"

### 3. Ver Resultado
As alterações aparecem imediatamente no site público!

## 🔐 Segurança

- ✅ Apenas usuários autenticados podem editar
- ✅ JWT token validado em todas as requisições de edição
- ✅ Rotas GET são públicas (para o site exibir)
- ✅ Rotas PUT/DELETE exigem autenticação

## 💾 Estrutura do Conteúdo (JSON)

### Home
```json
{
  "hero": {
    "title": "Título do banner",
    "subtitle": "Subtítulo explicativo",
    "buttonText": "Texto do botão"
  },
  "stats": {
    "clients": "500+",
    "projects": "1200+",
    "years": "15"
  },
  "cta": {
    "title": "Título da chamada",
    "text": "Texto explicativo",
    "button": "Texto do botão"
  }
}
```

### Sobre
```json
{
  "hero": {
    "title": "Sobre a OCCTO",
    "subtitle": "Descrição breve"
  },
  "mission": {
    "title": "Nossa Missão",
    "text": "Texto completo"
  },
  "vision": {
    "title": "Nossa Visão",
    "text": "Texto completo"
  },
  "values": {
    "title": "Nossos Valores",
    "items": ["Item 1", "Item 2", "Item 3"]
  }
}
```

### Contato
```json
{
  "hero": {
    "title": "Entre em Contato",
    "subtitle": "Texto de apoio"
  },
  "info": {
    "address": {
      "street": "Rua, número",
      "neighborhood": "Bairro",
      "city": "Cidade",
      "state": "UF",
      "zip": "CEP"
    },
    "phone": "(11) 9999-9999",
    "email": "contato@occto.com.br",
    "hours": "Horário de atendimento"
  }
}
```

## 🌱 Dados Iniciais (Seed)

Execute para criar dados de exemplo:
```bash
npx prisma db seed
```

Cria automaticamente:
- ✅ Usuário admin (admin@occto.com / admin)
- ✅ Página Home com conteúdo inicial
- ✅ Página Sobre com conteúdo inicial
- ✅ Página Contato com conteúdo inicial

## 🚀 Próximos Passos

### Páginas ainda não implementadas:
- [ ] `/admin/paginas/sobre` - Editar página Sobre
- [ ] `/admin/paginas/contato` - Editar página Contato

### Funcionalidades futuras:
- [ ] Upload de imagens do banner (MinIO)
- [ ] Editor WYSIWYG para textos longos
- [ ] Preview antes de salvar
- [ ] Histórico de alterações
- [ ] Multi-idioma (PT/EN/ES) editável

## 📝 Exemplo de Uso da API

### Buscar conteúdo da home (público)
```javascript
const response = await fetch('/api/pages/home');
const data = await response.json();
console.log(data.content.hero.title);
```

### Atualizar conteúdo (admin)
```javascript
const response = await fetch('/api/pages/home', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    content: {
      hero: {
        title: 'Novo título',
        subtitle: 'Novo subtítulo',
        buttonText: 'Novo botão'
      },
      stats: {...},
      cta: {...}
    }
  })
});
```

## 🎨 Interface Admin

- Design moderno com Tailwind CSS
- Dark mode suportado
- Ícones RemixIcon
- Toast notifications globais
- Loading states em todas as ações
- Formulários validados

## ✨ Destaques

1. **Simples para o cliente**: Interface intuitiva, sem necessidade de conhecimento técnico
2. **Seguro**: Autenticação JWT, validação de dados
3. **Rápido**: Alterações instantâneas, sem deploy necessário
4. **Flexível**: JSON permite adicionar novos campos facilmente
5. **Escalável**: Fácil adicionar novas páginas editáveis

---

**Desenvolvido para OCCTO Engenharia** 🚀