✅ Restauração do código oficial do GPI-JWT-V3
This commit is contained in:
322
src/client/components/admin/BackupRestore.tsx
Normal file
322
src/client/components/admin/BackupRestore.tsx
Normal file
@@ -0,0 +1,322 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Download, Upload, AlertTriangle, CheckCircle, Database, FileJson, Info, RefreshCw } from 'lucide-react';
|
||||
import api from '../../services/api';
|
||||
import { useAuth } from '../../context/useAuth';
|
||||
|
||||
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 { appUser } = useAuth();
|
||||
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 (!appUser) 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_gpi_${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 do sistema ou restaurar dados de um backup anterior.
|
||||
<strong className="text-amber-500"> Os backups são específicos para cada instalação e podem não ser compatíveis entre versões diferentes se houver mudanças estruturais.</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
|
||||
? '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 ? (
|
||||
<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
|
||||
? '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 || 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>
|
||||
);
|
||||
};
|
||||
205
src/client/components/admin/GeometrySettings.tsx
Normal file
205
src/client/components/admin/GeometrySettings.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Plus, Pencil, Trash2, Box, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '../Button';
|
||||
import { Modal } from '../Modal';
|
||||
import { Input } from '../Input';
|
||||
import * as geometryService from '../../services/geometryTypeService';
|
||||
import type { GeometryType } from '../../types';
|
||||
import { useAuth } from '../../context/useAuth';
|
||||
|
||||
export const GeometrySettings: React.FC = () => {
|
||||
const { appUser } = useAuth();
|
||||
const [types, setTypes] = useState<GeometryType[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingItem, setEditingItem] = useState<GeometryType | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
name: '',
|
||||
efficiencyLoss: '20'
|
||||
});
|
||||
|
||||
const fetchTypes = React.useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await geometryService.getAllTypes();
|
||||
setTypes(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching geometry types', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (appUser) {
|
||||
fetchTypes();
|
||||
}
|
||||
}, [appUser, fetchTypes]);
|
||||
|
||||
const handleOpenModal = (item?: GeometryType) => {
|
||||
if (item) {
|
||||
setEditingItem(item);
|
||||
setForm({ name: item.name, efficiencyLoss: (item.efficiencyLoss ?? 0).toString() });
|
||||
} else {
|
||||
setEditingItem(null);
|
||||
setForm({ name: '', efficiencyLoss: '20' });
|
||||
}
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
name: form.name,
|
||||
efficiencyLoss: parseFloat(form.efficiencyLoss) || 0
|
||||
};
|
||||
|
||||
if (editingItem) {
|
||||
await geometryService.updateType(editingItem.id || editingItem._id!, payload);
|
||||
} else {
|
||||
await geometryService.createType(payload);
|
||||
}
|
||||
setIsModalOpen(false);
|
||||
fetchTypes();
|
||||
} catch (error) {
|
||||
console.error('Error saving type', error);
|
||||
alert('Erro ao salvar tipo de geometria');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Tem certeza que deseja excluir? Isso pode afetar peças criadas com este tipo.')) return;
|
||||
try {
|
||||
await geometryService.deleteType(id);
|
||||
fetchTypes();
|
||||
} catch (error) {
|
||||
console.error('Error deleting type', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestoreDefaults = async () => {
|
||||
if (!confirm('Isso irá apagar todos os tipos atuais e restaurar a lista padrão com 20% de perda. Continuar?')) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
await geometryService.restoreDefaults();
|
||||
fetchTypes();
|
||||
} catch (error) {
|
||||
console.error('Error restoring defaults', error);
|
||||
alert('Erro ao restaurar padrões');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in slide-in-from-left-4 duration-300">
|
||||
<div className="flex justify-between items-center bg-surface-soft/30 p-6 rounded-2xl border border-border/20">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<Box size={24} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-text-main">Tipos de Geometria/Peças</h2>
|
||||
<p className="text-sm text-text-muted">Gerencie a lista padrão de peças e suas perdas de eficiência</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" onClick={handleRestoreDefaults} title="Restaurar lista original">
|
||||
<RefreshCw size={20} className={loading ? 'animate-spin' : ''} />
|
||||
</Button>
|
||||
<Button onClick={() => handleOpenModal()}>
|
||||
<Plus className="w-5 h-5 mr-2" /> Novo Tipo
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface rounded-2xl border border-border/40 overflow-hidden shadow-soft">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<RefreshCw size={32} className="animate-spin text-primary" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border/40 bg-surface-soft">
|
||||
<th className="text-left px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Nome da Geometria</th>
|
||||
<th className="text-left px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Perda de Eficiência (%)</th>
|
||||
<th className="text-right px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/40">
|
||||
{types.map((type) => (
|
||||
<tr key={type.id || type._id} className="hover:bg-surface-hover transition-colors">
|
||||
<td className="px-6 py-4 font-semibold text-text-main">{type.name}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20">
|
||||
{type.efficiencyLoss}%
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right flex justify-end gap-2">
|
||||
<button
|
||||
onClick={() => handleOpenModal(type)}
|
||||
className="p-2 text-text-muted hover:text-primary hover:bg-primary/5 rounded-lg transition-all"
|
||||
title="Editar"
|
||||
>
|
||||
<Pencil size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(type.id || type._id!)}
|
||||
className="p-2 text-text-muted hover:text-error hover:bg-error/5 rounded-lg transition-all"
|
||||
title="Excluir"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{types.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={3} className="px-6 py-12 text-center text-text-muted">
|
||||
Nenhum tipo cadastrado.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title={editingItem ? 'Editar Tipo' : 'Novo Tipo de Geometria'}>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Input
|
||||
name="name"
|
||||
label="Nome (Ex: Vigas médias)"
|
||||
value={form.name}
|
||||
onChange={e => setForm({ ...form, name: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
name="efficiencyLoss"
|
||||
label="Perda de Eficiência (%)"
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0"
|
||||
max="100"
|
||||
value={form.efficiencyLoss}
|
||||
onChange={e => setForm({ ...form, efficiencyLoss: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<div className="flex justify-end gap-2 mt-6">
|
||||
<Button type="button" variant="ghost" onClick={() => setIsModalOpen(false)} disabled={saving}>Cancelar</Button>
|
||||
<Button type="submit" disabled={saving}>{saving ? 'Salvando...' : 'Salvar'}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user