323 lines
16 KiB
TypeScript
323 lines
16 KiB
TypeScript
import React, { useState, useRef } from 'react';
|
|
import { Download, Upload, AlertTriangle, CheckCircle, Database, FileJson, Info, RefreshCw } from 'lucide-react';
|
|
import api from '../../services/api';
|
|
import { useOrganization } from '@clerk/clerk-react';
|
|
|
|
interface BackupStats {
|
|
projects: number;
|
|
inspections: number;
|
|
applicationRecords: number;
|
|
technicalDataSheets: number;
|
|
paintingSchemes: number;
|
|
parts: number;
|
|
instruments: number;
|
|
yieldStudies: number;
|
|
geometryTypes: number;
|
|
stockItems: number;
|
|
stockMovements: number;
|
|
}
|
|
|
|
interface BackupValidation {
|
|
valid: boolean;
|
|
isValidOrganization: boolean;
|
|
version: string;
|
|
timestamp: string;
|
|
organizationId: string;
|
|
stats: BackupStats;
|
|
message: string;
|
|
}
|
|
|
|
export const BackupRestore: React.FC = () => {
|
|
const { organization } = useOrganization();
|
|
const [isExporting, setIsExporting] = useState(false);
|
|
const [isImporting, setIsImporting] = useState(false);
|
|
const [validationResult, setValidationResult] = useState<BackupValidation | null>(null);
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleExport = async () => {
|
|
if (!organization) return;
|
|
|
|
setIsExporting(true);
|
|
try {
|
|
const response = await api.get('/backup/export', {
|
|
responseType: 'blob'
|
|
});
|
|
|
|
// Cria um link de download
|
|
const blob = new Blob([response.data], { type: 'application/json' });
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
|
|
// Nome do arquivo com timestamp
|
|
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
|
|
link.download = `backup_${organization.name}_${timestamp}.json`;
|
|
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
alert('✅ Backup exportado com sucesso!');
|
|
} catch (error) {
|
|
console.error('Erro ao exportar backup:', error);
|
|
alert('❌ Erro ao exportar backup. Verifique o console para mais detalhes.');
|
|
} finally {
|
|
setIsExporting(false);
|
|
}
|
|
};
|
|
|
|
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
setSelectedFile(file);
|
|
setValidationResult(null);
|
|
|
|
// Valida o arquivo
|
|
try {
|
|
const fileContent = await file.text();
|
|
const backupData = JSON.parse(fileContent);
|
|
|
|
const response = await api.post<BackupValidation>('/backup/validate', backupData);
|
|
setValidationResult(response.data);
|
|
} catch (error) {
|
|
console.error('Erro ao validar backup:', error);
|
|
alert('❌ Arquivo de backup inválido ou corrompido.');
|
|
setSelectedFile(null);
|
|
}
|
|
};
|
|
|
|
const handleImport = async () => {
|
|
if (!selectedFile || !validationResult?.valid) return;
|
|
|
|
const confirmed = window.confirm(
|
|
'⚠️ ATENÇÃO: Esta ação irá SUBSTITUIR TODOS os dados atuais pelos dados do backup.\n\n' +
|
|
'Todos os projetos, inspeções, fichas técnicas e demais informações atuais serão PERMANENTEMENTE EXCLUÍDOS.\n\n' +
|
|
'Tem certeza que deseja continuar?'
|
|
);
|
|
|
|
if (!confirmed) return;
|
|
|
|
const doubleConfirm = window.confirm(
|
|
'🔴 ÚLTIMA CONFIRMAÇÃO\n\n' +
|
|
'Esta é sua última chance de cancelar. Os dados atuais serão IRRECUPERÁVEIS após esta ação.\n\n' +
|
|
'Deseja realmente restaurar o backup?'
|
|
);
|
|
|
|
if (!doubleConfirm) return;
|
|
|
|
setIsImporting(true);
|
|
try {
|
|
const fileContent = await selectedFile.text();
|
|
const backupData = JSON.parse(fileContent);
|
|
|
|
await api.post('/backup/import', backupData);
|
|
|
|
alert('✅ Backup restaurado com sucesso! A página será recarregada.');
|
|
window.location.reload();
|
|
} catch (error: unknown) {
|
|
const err = error as { response?: { data?: { message?: string } }; message?: string };
|
|
console.error('Erro ao importar backup:', error);
|
|
alert(`❌ Erro ao restaurar backup: ${err.response?.data?.message || err.message || 'Erro desconhecido'}`);
|
|
} finally {
|
|
setIsImporting(false);
|
|
}
|
|
};
|
|
|
|
const formatDate = (isoString: string) => {
|
|
const date = new Date(isoString);
|
|
return date.toLocaleString('pt-BR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in slide-in-from-left-4 duration-300">
|
|
{/* Header Info */}
|
|
<div className="bg-amber-500/10 border border-amber-500/30 rounded-2xl p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center flex-shrink-0">
|
|
<AlertTriangle size={24} className="text-amber-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-bold text-text-main mb-2">Backup e Restauração de Dados</h3>
|
|
<p className="text-sm text-text-muted leading-relaxed">
|
|
Use esta ferramenta para criar cópias de segurança de todos os dados da organização ou restaurar dados de um backup anterior.
|
|
<strong className="text-amber-500"> Os backups são específicos para cada organização e não podem ser restaurados em outras organizações.</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Export Section */}
|
|
<div className="bg-surface rounded-2xl p-6 border border-border/40 space-y-6">
|
|
<div className="flex items-center gap-3 pb-4 border-b border-border/20">
|
|
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
|
|
<Download size={20} className="text-primary" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-bold text-text-main">Exportar Backup</h2>
|
|
<p className="text-xs text-text-muted">Baixe todos os dados em formato JSON</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-surface-soft rounded-xl border border-border/20">
|
|
<h3 className="text-sm font-bold text-text-main flex items-center gap-2 mb-2">
|
|
<Database size={16} className="text-primary" />
|
|
O que será exportado?
|
|
</h3>
|
|
<ul className="text-xs text-text-muted space-y-1 ml-6 list-disc">
|
|
<li>Todos os projetos e suas configurações</li>
|
|
<li>Inspeções e registros de aplicação</li>
|
|
<li>Fichas técnicas e esquemas de pintura</li>
|
|
<li>Peças, geometrias e instrumentos</li>
|
|
<li>Estudos de rendimento</li>
|
|
<li>Estoque e movimentações</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleExport}
|
|
disabled={isExporting}
|
|
className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-primary hover:bg-primary-dark text-white rounded-xl font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-primary/20"
|
|
>
|
|
{isExporting ? (
|
|
<>
|
|
<RefreshCw size={20} className="animate-spin" />
|
|
Gerando Backup...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Download size={20} />
|
|
Baixar Backup Agora
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<div className="p-3 bg-blue-500/10 border border-blue-500/30 rounded-xl">
|
|
<p className="text-xs text-blue-400 flex items-start gap-2">
|
|
<Info size={14} className="flex-shrink-0 mt-0.5" />
|
|
<span>
|
|
O arquivo será salvo no seu computador com a data e hora atual.
|
|
Guarde-o em local seguro (pendrive, nuvem, etc).
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Import Section */}
|
|
<div className="bg-surface rounded-2xl p-6 border border-border/40 space-y-6">
|
|
<div className="flex items-center gap-3 pb-4 border-b border-border/20">
|
|
<div className="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center">
|
|
<Upload size={20} className="text-amber-500" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-bold text-text-main">Restaurar Backup</h2>
|
|
<p className="text-xs text-text-muted">Carregue um arquivo de backup JSON</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<label className="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed border-border/40 rounded-2xl cursor-pointer hover:bg-surface-hover hover:border-primary/50 transition-all group">
|
|
<div className="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<FileJson className="w-12 h-12 text-text-muted group-hover:text-primary transition-colors mb-3" />
|
|
<p className="text-sm text-text-main font-bold">
|
|
{selectedFile ? selectedFile.name : 'Clique para selecionar o arquivo'}
|
|
</p>
|
|
<p className="text-xs text-text-muted mt-1">
|
|
{selectedFile ? `${(selectedFile.size / 1024).toFixed(2)} KB` : 'Arquivo JSON de backup'}
|
|
</p>
|
|
</div>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
className="hidden"
|
|
accept=".json,application/json"
|
|
onChange={handleFileSelect}
|
|
disabled={isImporting}
|
|
/>
|
|
</label>
|
|
|
|
{validationResult && (
|
|
<div className={`p-4 rounded-xl border ${validationResult.valid && validationResult.isValidOrganization
|
|
? 'bg-green-500/10 border-green-500/30'
|
|
: 'bg-red-500/10 border-red-500/30'
|
|
}`}>
|
|
<div className="flex items-start gap-3">
|
|
{validationResult.valid && validationResult.isValidOrganization ? (
|
|
<CheckCircle size={20} className="text-green-400 flex-shrink-0 mt-0.5" />
|
|
) : (
|
|
<AlertTriangle size={20} className="text-red-400 flex-shrink-0 mt-0.5" />
|
|
)}
|
|
<div className="flex-1 space-y-2">
|
|
<p className={`text-sm font-bold ${validationResult.valid && validationResult.isValidOrganization
|
|
? 'text-green-400'
|
|
: 'text-red-400'
|
|
}`}>
|
|
{validationResult.message}
|
|
</p>
|
|
{validationResult.valid && (
|
|
<div className="text-xs text-text-muted space-y-1">
|
|
<p><strong>Data do backup:</strong> {formatDate(validationResult.timestamp)}</p>
|
|
<p><strong>Versão:</strong> {validationResult.version}</p>
|
|
<div className="mt-2 pt-2 border-t border-border/20">
|
|
<p className="font-bold mb-1">Registros no backup:</p>
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-1">
|
|
<span>• Projetos: {validationResult.stats.projects}</span>
|
|
<span>• Inspeções: {validationResult.stats.inspections}</span>
|
|
<span>• Fichas: {validationResult.stats.technicalDataSheets}</span>
|
|
<span>• Esquemas: {validationResult.stats.paintingSchemes}</span>
|
|
<span>• Peças: {validationResult.stats.parts}</span>
|
|
<span>• Instrumentos: {validationResult.stats.instruments}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={handleImport}
|
|
disabled={!validationResult?.valid || !validationResult?.isValidOrganization || isImporting}
|
|
className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-red-500 hover:bg-red-600 text-white rounded-xl font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-red-500/20"
|
|
>
|
|
{isImporting ? (
|
|
<>
|
|
<RefreshCw size={20} className="animate-spin" />
|
|
Restaurando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<AlertTriangle size={20} />
|
|
Restaurar Backup
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<div className="p-3 bg-red-500/10 border border-red-500/30 rounded-xl">
|
|
<p className="text-xs text-red-400 flex items-start gap-2">
|
|
<AlertTriangle size={14} className="flex-shrink-0 mt-0.5" />
|
|
<span>
|
|
<strong>ATENÇÃO:</strong> Restaurar um backup irá SUBSTITUIR PERMANENTEMENTE todos os dados atuais.
|
|
Esta ação não pode ser desfeita!
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|