From 0c40dbadfcf0449197d0695a8732360a4e10a8d9 Mon Sep 17 00:00:00 2001
From: Erik <erik@octtoengenharia.com>
Date: Sat, 7 Mar 2026 18:04:56 -0300
Subject: [PATCH] feat: implement cms backup (export/import) and admin
 interface

---
 frontend/src/app/admin/backup/page.tsx     | 185 +++++++++++++++++++++
 frontend/src/app/admin/layout.tsx          |  21 +--
 frontend/src/app/api/admin/backup/route.ts | 133 +++++++++++++++
 3 files changed, 329 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/app/admin/backup/page.tsx
 create mode 100644 frontend/src/app/api/admin/backup/route.ts

diff --git a/frontend/src/app/admin/backup/page.tsx b/frontend/src/app/admin/backup/page.tsx
new file mode 100644
index 0000000..07b9cfc
--- /dev/null
+++ b/frontend/src/app/admin/backup/page.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { useState } from 'react';
+import { useToast } from '@/contexts/ToastContext';
+import { useConfirm } from '@/contexts/ConfirmContext';
+
+export default function BackupPage() {
+    const [isExporting, setIsExporting] = useState(false);
+    const [isImporting, setIsImporting] = useState(false);
+    const { success, error } = useToast();
+    const { confirm } = useConfirm();
+
+    const handleExport = async () => {
+        setIsExporting(true);
+        try {
+            const response = await fetch('/api/admin/backup');
+            if (!response.ok) throw new Error('Falha ao exportar backup');
+
+            const data = await response.json();
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `backup-occto-cms-${new Date().toISOString().split('T')[0]}.json`;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+
+            success('Backup exportado com sucesso!');
+        } catch (err) {
+            console.error(err);
+            error('Erro ao exportar backup. Tente novamente.');
+        } finally {
+            setIsExporting(false);
+        }
+    };
+
+    const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        const confirmed = await confirm({
+            title: 'Confirmar Importação',
+            message: 'Isso irá substituir ou atualizar os dados existentes (Projetos, Serviços, Páginas e Configurações). Deseja continuar?',
+            confirmText: 'Importar',
+            cancelText: 'Cancelar',
+            type: 'warning'
+        });
+
+        if (!confirmed) {
+            e.target.value = '';
+            return;
+        }
+
+        setIsImporting(true);
+        try {
+            const reader = new FileReader();
+            reader.onload = async (event) => {
+                try {
+                    const content = event.target?.result as string;
+                    const backupData = JSON.parse(content);
+
+                    const response = await fetch('/api/admin/backup', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(backupData),
+                    });
+
+                    if (response.ok) {
+                        success('Backup importado com sucesso!');
+                        // Opcional: recarregar a página para ver mudanças
+                        setTimeout(() => window.location.reload(), 1500);
+                    } else {
+                        const data = await response.json();
+                        error(data.error || 'Erro ao importar backup');
+                    }
+                } catch (err) {
+                    error('Arquivo de backup inválido.');
+                } finally {
+                    setIsImporting(false);
+                }
+            };
+            reader.readAsText(file);
+        } catch (err) {
+            error('Erro ao ler arquivo.');
+            setIsImporting(false);
+        }
+
+        e.target.value = '';
+    };
+
+    return (
+        <div className="max-w-4xl mx-auto">
+            <div className="mb-8">
+                <h1 className="text-3xl font-bold text-secondary dark:text-white mb-2">Backup do Sistema</h1>
+                <p className="text-gray-500 dark:text-gray-400">
+                    Gerencie a segurança dos seus dados. Você pode exportar todos os conteúdos do CMS para um arquivo local ou restaurar um backup anterior.
+                </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Export Card */}
+                <div className="bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-2xl p-6 shadow-sm flex flex-col">
+                    <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
+                        <i className="ri-download-cloud-2-line text-2xl"></i>
+                    </div>
+                    <h2 className="text-xl font-bold text-secondary dark:text-white mb-2">Exportar Dados</h2>
+                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6 flex-1">
+                        Cria um arquivo JSON contendo todos os projetos, serviços, textos de páginas e configurações globais. Ideal para salvar o progresso atual.
+                    </p>
+                    <button
+                        onClick={handleExport}
+                        disabled={isExporting}
+                        className="w-full py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 active:scale-[0.98] transition-all flex items-center justify-center gap-2 disabled:opacity-50"
+                    >
+                        {isExporting ? (
+                            <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                        ) : (
+                            <i className="ri-file-download-line text-xl"></i>
+                        )}
+                        {isExporting ? 'Exportando...' : 'Baixar Backup'}
+                    </button>
+                </div>
+
+                {/* Import Card */}
+                <div className="bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-2xl p-6 shadow-sm flex flex-col">
+                    <div className="w-12 h-12 bg-amber-500/10 rounded-xl flex items-center justify-center text-amber-500 mb-4">
+                        <i className="ri-upload-cloud-2-line text-2xl"></i>
+                    </div>
+                    <h2 className="text-xl font-bold text-secondary dark:text-white mb-2">Restaurar Backup</h2>
+                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6 flex-1">
+                        Importe um arquivo de backup previamente exportado. <span className="text-amber-500 font-medium font-bold">Atenção:</span> Isso irá substituir ou atualizar os dados existentes.
+                    </p>
+                    <label className="w-full py-3 border-2 border-dashed border-gray-200 dark:border-white/10 text-gray-600 dark:text-gray-400 rounded-xl font-bold hover:bg-gray-50 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-2 cursor-pointer">
+                        {isImporting ? (
+                            <div className="w-5 h-5 border-2 border-primary/30 border-t-primary rounded-full animate-spin"></div>
+                        ) : (
+                            <i className="ri-file-upload-line text-xl"></i>
+                        )}
+                        {isImporting ? 'Importando...' : 'Selecionar Arquivo'}
+                        <input
+                            type="file"
+                            accept=".json"
+                            onChange={handleImport}
+                            disabled={isImporting}
+                            className="hidden"
+                        />
+                    </label>
+                </div>
+            </div>
+
+            {/* Info Section */}
+            <div className="mt-8 bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/20 rounded-2xl p-6">
+                <h3 className="text-blue-800 dark:text-blue-300 font-bold flex items-center gap-2 mb-3">
+                    <i className="ri-information-line text-xl"></i>
+                    O que está incluído no backup?
+                </h3>
+                <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {[
+                        'Todos os Projetos Detalhados',
+                        'Lista de Serviços e Descrições',
+                        'Textos e Traduções de Todas as Páginas',
+                        'Configurações Globais (Redes Sociais, Contato)',
+                        'Estrutura de Categorias e Status',
+                        'Referências de Imagens (URLs)'
+                    ].map((item, i) => (
+                        <li key={i} className="flex items-center gap-2 text-sm text-blue-700/80 dark:text-blue-400/80">
+                            <i className="ri-check-line text-blue-500"></i>
+                            {item}
+                        </li>
+                    ))}
+                </ul>
+                <div className="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-900/30 rounded-lg">
+                    <p className="text-xs text-amber-700 dark:text-amber-400 flex gap-2">
+                        <i className="ri-error-warning-line"></i>
+                        <span>
+                            <strong>Nota importante:</strong> O backup contém os <strong>links</strong> das imagens. Se as imagens originais forem deletadas do servidor, elas não aparecerão mesmo restaurando o backup.
+                        </span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/app/admin/layout.tsx b/frontend/src/app/admin/layout.tsx
index 7dfaab4..d4a4817 100644
--- a/frontend/src/app/admin/layout.tsx
+++ b/frontend/src/app/admin/layout.tsx
@@ -251,6 +251,7 @@ export default function AdminLayout({
     { icon: 'ri-pages-line', label: 'Páginas', href: '/admin/paginas' },
     { icon: 'ri-message-3-line', label: 'Mensagens', href: '/admin/mensagens' },
     { icon: 'ri-user-settings-line', label: 'Usuários', href: '/admin/usuarios' },
+    { icon: 'ri-database-2-line', label: 'Backup', href: '/admin/backup' },
     { icon: 'ri-settings-3-line', label: 'Configurações', href: '/admin/configuracoes' },
   ];
 
@@ -263,11 +264,11 @@ export default function AdminLayout({
         <div className="h-20 flex items-center justify-center border-b border-gray-200 dark:border-white/10">
           <Link href="/admin" className="flex items-center gap-3">
             {logo ? (
-              <Image 
-                src={logo} 
-                alt="OCCTO Engenharia" 
-                width={isSidebarOpen ? 120 : 32} 
-                height={40} 
+              <Image
+                src={logo}
+                alt="OCCTO Engenharia"
+                width={isSidebarOpen ? 120 : 32}
+                height={40}
                 className="object-contain h-10 w-auto"
                 unoptimized
               />
@@ -289,8 +290,8 @@ export default function AdminLayout({
           {menuItems.map((item) => {
             const isActive = pathname === item.href;
             return (
-              <Link 
-                key={item.href} 
+              <Link
+                key={item.href}
                 href={item.href}
                 className={`flex items-center gap-3 px-3 py-3 rounded-xl transition-all group ${isActive ? 'bg-primary text-white shadow-lg shadow-primary/20' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5'}`}
               >
@@ -302,7 +303,7 @@ export default function AdminLayout({
         </nav>
 
         <div className="p-4 border-t border-gray-200 dark:border-white/10">
-          <button 
+          <button
             onClick={handleLogout}
             className="w-full flex items-center gap-3 px-3 py-3 rounded-xl text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10 transition-colors cursor-pointer"
           >
@@ -316,7 +317,7 @@ export default function AdminLayout({
       <div className={`flex-1 flex flex-col min-h-screen transition-all duration-300 ${isSidebarOpen ? 'md:ml-64' : 'md:ml-20'}`}>
         {/* Header */}
         <header className="h-20 bg-white dark:bg-secondary border-b border-gray-200 dark:border-white/10 sticky top-0 z-40 px-6 flex items-center justify-between">
-          <button 
+          <button
             onClick={() => setIsSidebarOpen(!isSidebarOpen)}
             className="w-10 h-10 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 flex items-center justify-center text-gray-600 dark:text-gray-300 transition-colors cursor-pointer"
           >
@@ -325,7 +326,7 @@ export default function AdminLayout({
 
           <div className="flex items-center gap-4">
             {/* Dark Mode Toggle */}
-            <button 
+            <button
               onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
               className="w-10 h-10 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 flex items-center justify-center text-gray-600 dark:text-yellow-400 transition-colors cursor-pointer"
               aria-label="Alternar tema"
diff --git a/frontend/src/app/api/admin/backup/route.ts b/frontend/src/app/api/admin/backup/route.ts
new file mode 100644
index 0000000..ada0b91
--- /dev/null
+++ b/frontend/src/app/api/admin/backup/route.ts
@@ -0,0 +1,133 @@
+import { NextRequest, NextResponse } from 'next/server';
+import prisma from '@/lib/prisma';
+import { cookies } from 'next/headers';
+import jwt from 'jsonwebtoken';
+
+async function authenticate() {
+    const cookieStore = await cookies();
+    const token = cookieStore.get('auth_token')?.value;
+
+    if (!token) return null;
+
+    try {
+        const decoded = jwt.verify(token, process.env.JWT_SECRET!) as { userId: string };
+        const user = await prisma.user.findUnique({
+            where: { id: decoded.userId },
+            select: { id: true, email: true, name: true }
+        });
+        return user;
+    } catch {
+        return null;
+    }
+}
+
+// GET /api/admin/backup - Exportar todos os dados do CMS
+export async function GET() {
+    try {
+        const user = await authenticate();
+        if (!user) {
+            return NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
+        }
+
+        const projects = await prisma.project.findMany();
+        const services = await prisma.service.findMany();
+        const pageContents = await prisma.pageContent.findMany();
+        const settings = await prisma.settings.findFirst();
+
+        const backupData = {
+            version: '1.0',
+            timestamp: new Date().toISOString(),
+            projects,
+            services,
+            pageContents,
+            settings,
+        };
+
+        return NextResponse.json(backupData);
+    } catch (error) {
+        console.error('Erro ao exportar backup:', error);
+        return NextResponse.json({ error: 'Erro ao processar exportação' }, { status: 500 });
+    }
+}
+
+// POST /api/admin/backup - Importar dados do CMS
+export async function POST(request: NextRequest) {
+    try {
+        const user = await authenticate();
+        if (!user) {
+            return NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
+        }
+
+        const backupData = await request.json();
+
+        if (!backupData || typeof backupData !== 'object') {
+            return NextResponse.json({ error: 'Dados de backup inválidos' }, { status: 400 });
+        }
+
+        // Usar transação para garantir consistência
+        await prisma.$transaction(async (tx) => {
+            // 1. Importar Projetos
+            if (Array.isArray(backupData.projects)) {
+                for (const project of backupData.projects) {
+                    const { id, createdAt, updatedAt, ...data } = project;
+                    await tx.project.upsert({
+                        where: { id: id },
+                        create: { id, ...data },
+                        update: data,
+                    });
+                }
+            }
+
+            // 2. Importar Serviços
+            if (Array.isArray(backupData.services)) {
+                for (const service of backupData.services) {
+                    const { id, createdAt, updatedAt, ...data } = service;
+                    await tx.service.upsert({
+                        where: { id: id },
+                        create: { id, ...data },
+                        update: data,
+                    });
+                }
+            }
+
+            // 3. Importar Conteúdo de Páginas
+            if (Array.isArray(backupData.pageContents)) {
+                for (const content of backupData.pageContents) {
+                    const { id, updatedAt, ...data } = content;
+                    await tx.pageContent.upsert({
+                        where: { slug_locale: { slug: data.slug, locale: data.locale } },
+                        create: { ...data },
+                        update: data,
+                    });
+                }
+            }
+
+            // 4. Importar Configurações
+            if (backupData.settings) {
+                const { id, updatedAt, ...data } = backupData.settings;
+                const currentSettings = await tx.settings.findFirst();
+
+                if (currentSettings) {
+                    await tx.settings.update({
+                        where: { id: currentSettings.id },
+                        data: data,
+                    });
+                } else {
+                    await tx.settings.create({
+                        data: data,
+                    });
+                }
+            }
+        });
+
+        return NextResponse.json({
+            success: true,
+            message: 'Backup importado com sucesso!'
+        });
+    } catch (error) {
+        console.error('Erro ao importar backup:', error);
+        return NextResponse.json({
+            error: 'Erro ao processar importação. Verifique se o formato do arquivo é válido.'
+        }, { status: 500 });
+    }
+}