318 lines
13 KiB
React
318 lines
13 KiB
React
|
import React, { useState, useRef } from 'react'
|
||
|
|
import api from '../api.js'
|
||
|
|
import {
|
||
|
|
Download, Upload, Database, AlertTriangle, Check,
|
||
|
|
RefreshCw, FileJson, ShieldAlert, Info
|
||
|
|
} from 'lucide-react'
|
||
|
|
|
||
|
|
export default function Maintenance() {
|
||
|
|
const [exporting, setExporting] = useState(false)
|
||
|
|
const [importing, setImporting] = useState(false)
|
||
|
|
const [importMode, setImportMode] = useState('merge')
|
||
|
|
const [selectedFile, setSelectedFile] = useState(null)
|
||
|
|
const [previewData, setPreviewData] = useState(null)
|
||
|
|
const [previewError, setPreviewError] = useState('')
|
||
|
|
const [result, setResult] = useState(null)
|
||
|
|
const [error, setError] = useState('')
|
||
|
|
const fileRef = useRef()
|
||
|
|
|
||
|
|
// --- Export ---
|
||
|
|
const handleExport = async () => {
|
||
|
|
setExporting(true)
|
||
|
|
setError('')
|
||
|
|
try {
|
||
|
|
const { data } = await api.get('/maintenance/backup', { responseType: 'blob' })
|
||
|
|
const url = URL.createObjectURL(new Blob([data], { type: 'application/json' }))
|
||
|
|
const a = document.createElement('a')
|
||
|
|
a.href = url
|
||
|
|
a.download = `backup-${new Date().toISOString().split('T')[0]}.json`
|
||
|
|
a.click()
|
||
|
|
URL.revokeObjectURL(url)
|
||
|
|
} catch {
|
||
|
|
setError('Export failed. Please try again.')
|
||
|
|
} finally {
|
||
|
|
setExporting(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// --- File selection & preview ---
|
||
|
|
const handleFileChange = (e) => {
|
||
|
|
const file = e.target.files[0]
|
||
|
|
setSelectedFile(file || null)
|
||
|
|
setPreviewData(null)
|
||
|
|
setPreviewError('')
|
||
|
|
setResult(null)
|
||
|
|
setError('')
|
||
|
|
|
||
|
|
if (!file) return
|
||
|
|
|
||
|
|
const reader = new FileReader()
|
||
|
|
reader.onload = (ev) => {
|
||
|
|
try {
|
||
|
|
const parsed = JSON.parse(ev.target.result)
|
||
|
|
if (!parsed.fields || !parsed.contracts) {
|
||
|
|
setPreviewError('Invalid backup file: missing fields or contracts data.')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
setPreviewData(parsed)
|
||
|
|
} catch {
|
||
|
|
setPreviewError('Could not parse file — make sure it is a valid JSON backup.')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
reader.readAsText(file)
|
||
|
|
}
|
||
|
|
|
||
|
|
// --- Import ---
|
||
|
|
const handleImport = async () => {
|
||
|
|
if (!selectedFile || !previewData) return
|
||
|
|
setImporting(true)
|
||
|
|
setError('')
|
||
|
|
setResult(null)
|
||
|
|
|
||
|
|
const formData = new FormData()
|
||
|
|
formData.append('backup', selectedFile)
|
||
|
|
formData.append('mode', importMode)
|
||
|
|
|
||
|
|
try {
|
||
|
|
const { data } = await api.post('/maintenance/restore', formData, {
|
||
|
|
headers: { 'Content-Type': 'multipart/form-data' }
|
||
|
|
})
|
||
|
|
setResult(data)
|
||
|
|
setSelectedFile(null)
|
||
|
|
setPreviewData(null)
|
||
|
|
if (fileRef.current) fileRef.current.value = ''
|
||
|
|
} catch (err) {
|
||
|
|
setError(err.response?.data?.error || 'Import failed. Please try again.')
|
||
|
|
} finally {
|
||
|
|
setImporting(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const clearFile = () => {
|
||
|
|
setSelectedFile(null)
|
||
|
|
setPreviewData(null)
|
||
|
|
setPreviewError('')
|
||
|
|
setResult(null)
|
||
|
|
setError('')
|
||
|
|
if (fileRef.current) fileRef.current.value = ''
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-3xl">
|
||
|
|
<div className="mb-6">
|
||
|
|
<h2 className="text-2xl font-bold text-white">Maintenance</h2>
|
||
|
|
<p className="text-slate-400 text-sm mt-1">Export and import backups of your contracts and field definitions</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Success result */}
|
||
|
|
{result && (
|
||
|
|
<div className="bg-green-500/10 border border-green-500/30 rounded-xl p-4 mb-6 flex items-start gap-3">
|
||
|
|
<Check size={20} className="text-green-400 flex-shrink-0 mt-0.5" />
|
||
|
|
<div>
|
||
|
|
<p className="text-green-300 font-semibold">Restore completed successfully</p>
|
||
|
|
<p className="text-green-400/80 text-sm mt-1">
|
||
|
|
{result.fields_restored} field{result.fields_restored !== 1 ? 's' : ''} restored · {result.contracts_imported} contract{result.contracts_imported !== 1 ? 's' : ''} imported · Mode: <span className="capitalize">{result.mode}</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Global error */}
|
||
|
|
{error && (
|
||
|
|
<div className="bg-red-500/10 border border-red-500/30 rounded-xl p-4 mb-6 flex items-start gap-3">
|
||
|
|
<AlertTriangle size={20} className="text-red-400 flex-shrink-0 mt-0.5" />
|
||
|
|
<p className="text-red-400 text-sm">{error}</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Export section */}
|
||
|
|
<div className="bg-slate-900 rounded-2xl border border-slate-800 p-6 mb-5">
|
||
|
|
<div className="flex items-center gap-3 mb-4">
|
||
|
|
<div className="w-10 h-10 bg-indigo-500/20 rounded-xl flex items-center justify-center">
|
||
|
|
<Download size={20} className="text-indigo-400" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-bold text-white">Export Backup</h3>
|
||
|
|
<p className="text-slate-400 text-sm">Download a full JSON backup of all contracts and field definitions</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-slate-800/60 rounded-xl p-4 mb-5 flex items-start gap-3">
|
||
|
|
<Info size={15} className="text-slate-400 flex-shrink-0 mt-0.5" />
|
||
|
|
<p className="text-slate-400 text-sm">
|
||
|
|
The backup file includes all field definitions and every contract record. It does <strong className="text-slate-300">not</strong> include user accounts or passwords.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={handleExport}
|
||
|
|
disabled={exporting}
|
||
|
|
className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white px-5 py-2.5 rounded-xl text-sm font-semibold transition shadow-lg shadow-indigo-900/40"
|
||
|
|
>
|
||
|
|
{exporting ? <RefreshCw size={16} className="animate-spin" /> : <Download size={16} />}
|
||
|
|
{exporting ? 'Exporting...' : 'Download Backup'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Import section */}
|
||
|
|
<div className="bg-slate-900 rounded-2xl border border-slate-800 p-6">
|
||
|
|
<div className="flex items-center gap-3 mb-4">
|
||
|
|
<div className="w-10 h-10 bg-amber-500/20 rounded-xl flex items-center justify-center">
|
||
|
|
<Upload size={20} className="text-amber-400" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-bold text-white">Import Backup</h3>
|
||
|
|
<p className="text-slate-400 text-sm">Restore data from a previously exported backup file</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Import mode */}
|
||
|
|
<div className="mb-5">
|
||
|
|
<label className="block text-sm font-medium text-slate-400 mb-2">Import Mode</label>
|
||
|
|
<div className="grid grid-cols-2 gap-3">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setImportMode('merge')}
|
||
|
|
className={`text-left p-4 rounded-xl border transition ${
|
||
|
|
importMode === 'merge'
|
||
|
|
? 'border-indigo-500 bg-indigo-500/10'
|
||
|
|
: 'border-slate-700 hover:border-slate-600'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<p className={`text-sm font-semibold mb-1 ${importMode === 'merge' ? 'text-indigo-400' : 'text-white'}`}>
|
||
|
|
Merge
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-slate-400">Add backup records to existing data. Existing field definitions are updated if the key matches. Contracts are always appended.</p>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setImportMode('replace')}
|
||
|
|
className={`text-left p-4 rounded-xl border transition ${
|
||
|
|
importMode === 'replace'
|
||
|
|
? 'border-red-500 bg-red-500/10'
|
||
|
|
: 'border-slate-700 hover:border-slate-600'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<p className={`text-sm font-semibold mb-1 ${importMode === 'replace' ? 'text-red-400' : 'text-white'}`}>
|
||
|
|
Replace
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-slate-400">Delete all existing contracts and fields before importing. This cannot be undone.</p>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Replace warning */}
|
||
|
|
{importMode === 'replace' && (
|
||
|
|
<div className="bg-red-500/10 border border-red-500/30 rounded-xl p-4 mb-5 flex items-start gap-3">
|
||
|
|
<ShieldAlert size={18} className="text-red-400 flex-shrink-0 mt-0.5" />
|
||
|
|
<p className="text-red-400 text-sm">
|
||
|
|
<strong>Warning:</strong> Replace mode will permanently delete ALL existing contracts and field definitions before importing. This action cannot be undone.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* File upload */}
|
||
|
|
<div className="mb-5">
|
||
|
|
<label className="block text-sm font-medium text-slate-400 mb-2">Backup File</label>
|
||
|
|
<div
|
||
|
|
onClick={() => fileRef.current?.click()}
|
||
|
|
className={`border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition ${
|
||
|
|
selectedFile
|
||
|
|
? 'border-indigo-500/50 bg-indigo-500/5'
|
||
|
|
: 'border-slate-700 hover:border-slate-600 hover:bg-slate-800/30'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
accept=".json,application/json"
|
||
|
|
ref={fileRef}
|
||
|
|
onChange={handleFileChange}
|
||
|
|
className="hidden"
|
||
|
|
/>
|
||
|
|
{selectedFile ? (
|
||
|
|
<div className="flex items-center justify-center gap-3">
|
||
|
|
<FileJson size={24} className="text-indigo-400" />
|
||
|
|
<div className="text-left">
|
||
|
|
<p className="text-white text-sm font-medium">{selectedFile.name}</p>
|
||
|
|
<p className="text-slate-400 text-xs">{(selectedFile.size / 1024).toFixed(1)} KB</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div>
|
||
|
|
<FileJson size={32} className="text-slate-600 mx-auto mb-2" />
|
||
|
|
<p className="text-slate-400 text-sm">Click to select a <strong className="text-slate-300">.json</strong> backup file</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{previewError && (
|
||
|
|
<div className="mt-3 bg-red-500/10 border border-red-500/30 rounded-xl px-4 py-3 flex items-center gap-2">
|
||
|
|
<AlertTriangle size={14} className="text-red-400" />
|
||
|
|
<p className="text-red-400 text-sm">{previewError}</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Preview */}
|
||
|
|
{previewData && (
|
||
|
|
<div className="mb-5 bg-slate-800/60 rounded-xl p-4 border border-slate-700">
|
||
|
|
<p className="text-sm font-semibold text-white mb-3 flex items-center gap-2">
|
||
|
|
<Database size={14} className="text-slate-400" />Backup Preview
|
||
|
|
</p>
|
||
|
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
||
|
|
{[
|
||
|
|
{ label: 'Exported', value: previewData.exported_at ? new Date(previewData.exported_at).toLocaleString() : 'Unknown' },
|
||
|
|
{ label: 'Exported by', value: previewData.exported_by || 'Unknown' },
|
||
|
|
{ label: 'Fields', value: `${previewData.fields.length} field definition${previewData.fields.length !== 1 ? 's' : ''}` },
|
||
|
|
{ label: 'Contracts', value: `${previewData.contracts.length} record${previewData.contracts.length !== 1 ? 's' : ''}` },
|
||
|
|
].map(({ label, value }) => (
|
||
|
|
<div key={label} className="bg-slate-800 rounded-lg px-3 py-2.5">
|
||
|
|
<p className="text-xs text-slate-500 mb-0.5">{label}</p>
|
||
|
|
<p className="text-slate-200 text-sm font-medium">{value}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{previewData.fields.length > 0 && (
|
||
|
|
<div className="mt-3">
|
||
|
|
<p className="text-xs text-slate-500 mb-1.5">Fields in backup:</p>
|
||
|
|
<div className="flex flex-wrap gap-1.5">
|
||
|
|
{previewData.fields.map(f => (
|
||
|
|
<span key={f.field_key} className="text-xs bg-slate-700 text-slate-300 px-2.5 py-1 rounded-full">
|
||
|
|
{f.label}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="flex gap-3">
|
||
|
|
{selectedFile && (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={clearFile}
|
||
|
|
className="px-4 py-2.5 rounded-xl border border-slate-700 text-slate-400 hover:text-white transition text-sm font-medium"
|
||
|
|
>
|
||
|
|
Clear
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
<button
|
||
|
|
onClick={handleImport}
|
||
|
|
disabled={importing || !previewData}
|
||
|
|
className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition disabled:opacity-50 ${
|
||
|
|
importMode === 'replace'
|
||
|
|
? 'bg-red-600/80 hover:bg-red-600 text-white'
|
||
|
|
: 'bg-amber-600/80 hover:bg-amber-600 text-white'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{importing ? <RefreshCw size={16} className="animate-spin" /> : <Upload size={16} />}
|
||
|
|
{importing ? 'Importing...' : importMode === 'replace' ? 'Replace & Import' : 'Merge & Import'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|