feat: implement cms backup (export/import) and admin interface
This commit is contained in:
Erik
185
frontend/src/app/admin/backup/page.tsx
Normal file
185
frontend/src/app/admin/backup/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
|
||||
133
frontend/src/app/api/admin/backup/route.ts
Normal file
133
frontend/src/app/api/admin/backup/route.ts
Normal file
@@ -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 });
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user