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)

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)

// 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

{
  "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

{
  "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

{
  "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:

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)

const response = await fetch('/api/pages/home');
const data = await response.json();
console.log(data.content.hero.title);

Atualizar conteúdo (admin)

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 🚀