feat: add frontend import UI (refs #26)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
374
frontend/src/features/settings/components/ImportDialog.tsx
Normal file
374
frontend/src/features/settings/components/ImportDialog.tsx
Normal file
@@ -0,0 +1,374 @@
|
||||
/**
|
||||
* @ai-summary Import dialog component
|
||||
* @ai-context Multi-step dialog: upload -> preview -> confirm -> progress -> results
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useImportPreview, useImportUserData } from '../hooks/useImportUserData';
|
||||
import { ImportPreview, ImportResult } from '../types/import.types';
|
||||
|
||||
interface ImportDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
file: File | null;
|
||||
}
|
||||
|
||||
type ImportStep = 'upload' | 'preview' | 'confirm' | 'progress' | 'results';
|
||||
|
||||
export const ImportDialog: React.FC<ImportDialogProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
file,
|
||||
}) => {
|
||||
const [step, setStep] = useState<ImportStep>('upload');
|
||||
const [preview, setPreview] = useState<ImportPreview | null>(null);
|
||||
const [mode, setMode] = useState<'merge' | 'replace'>('merge');
|
||||
const [result, setResult] = useState<ImportResult | null>(null);
|
||||
|
||||
const previewMutation = useImportPreview();
|
||||
const importMutation = useImportUserData();
|
||||
|
||||
const handleGeneratePreview = async () => {
|
||||
if (!file) return;
|
||||
|
||||
setStep('preview');
|
||||
try {
|
||||
const previewData = await previewMutation.mutateAsync(file);
|
||||
setPreview(previewData);
|
||||
setStep('confirm');
|
||||
} catch {
|
||||
// Error handled by mutation hook
|
||||
setStep('upload');
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmImport = async () => {
|
||||
if (!file) return;
|
||||
|
||||
setStep('progress');
|
||||
try {
|
||||
const importResult = await importMutation.mutateAsync({ file, mode });
|
||||
setResult(importResult);
|
||||
setStep('results');
|
||||
} catch {
|
||||
// Error handled by mutation hook
|
||||
setStep('confirm');
|
||||
}
|
||||
};
|
||||
|
||||
// Reset state when dialog opens
|
||||
useEffect(() => {
|
||||
if (isOpen && file) {
|
||||
setStep('upload');
|
||||
setPreview(null);
|
||||
setMode('merge');
|
||||
setResult(null);
|
||||
// Automatically start preview generation
|
||||
handleGeneratePreview();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isOpen, file]);
|
||||
|
||||
const handleClose = () => {
|
||||
setStep('upload');
|
||||
setPreview(null);
|
||||
setMode('merge');
|
||||
setResult(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const formatBytes = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-black/70 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white dark:bg-scuro rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<h3 className="text-lg font-semibold text-slate-800 dark:text-avus mb-4">
|
||||
Import Data
|
||||
</h3>
|
||||
|
||||
{/* Step 1: Upload */}
|
||||
{step === 'upload' && file && (
|
||||
<div>
|
||||
<p className="text-slate-600 dark:text-titanio mb-4">
|
||||
File selected: {file.name} ({formatBytes(file.size)})
|
||||
</p>
|
||||
<div className="flex justify-end space-x-3 mt-6">
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg font-medium"
|
||||
style={{ minHeight: '44px', minWidth: '44px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Preview (Loading) */}
|
||||
{step === 'preview' && (
|
||||
<div>
|
||||
<div className="flex flex-col items-center justify-center py-8">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mb-4"></div>
|
||||
<p className="text-slate-600 dark:text-titanio">
|
||||
Analyzing import file...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Confirm */}
|
||||
{step === 'confirm' && preview && (
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h4 className="font-semibold text-slate-800 dark:text-avus mb-3">
|
||||
Import Summary
|
||||
</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600 dark:text-titanio">Vehicles:</span>
|
||||
<span className="font-medium text-slate-800 dark:text-avus">
|
||||
{preview.manifest.contents.vehicles.count}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600 dark:text-titanio">Fuel Logs:</span>
|
||||
<span className="font-medium text-slate-800 dark:text-avus">
|
||||
{preview.manifest.contents.fuelLogs.count}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600 dark:text-titanio">
|
||||
Maintenance Records:
|
||||
</span>
|
||||
<span className="font-medium text-slate-800 dark:text-avus">
|
||||
{preview.manifest.contents.maintenanceRecords.count}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600 dark:text-titanio">
|
||||
Maintenance Schedules:
|
||||
</span>
|
||||
<span className="font-medium text-slate-800 dark:text-avus">
|
||||
{preview.manifest.contents.maintenanceSchedules.count}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600 dark:text-titanio">Documents:</span>
|
||||
<span className="font-medium text-slate-800 dark:text-avus">
|
||||
{preview.manifest.contents.documents.count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{preview.conflicts.vehicles > 0 && (
|
||||
<div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
|
||||
<p className="text-sm text-yellow-800 dark:text-yellow-300">
|
||||
<strong>Conflicts detected:</strong> {preview.conflicts.vehicles}{' '}
|
||||
vehicle(s) with matching VINs already exist.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{preview.manifest.warnings.length > 0 && (
|
||||
<div className="mt-4 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
|
||||
<p className="text-sm font-medium text-orange-800 dark:text-orange-300 mb-2">
|
||||
Warnings:
|
||||
</p>
|
||||
<ul className="text-sm text-orange-700 dark:text-orange-400 list-disc list-inside">
|
||||
{preview.manifest.warnings.map((warning, idx) => (
|
||||
<li key={idx}>{warning}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<h4 className="font-semibold text-slate-800 dark:text-avus mb-3">
|
||||
Import Mode
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-start space-x-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="mode"
|
||||
value="merge"
|
||||
checked={mode === 'merge'}
|
||||
onChange={() => setMode('merge')}
|
||||
className="mt-1"
|
||||
style={{ minWidth: '20px', minHeight: '20px' }}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-slate-800 dark:text-avus">
|
||||
Merge (Recommended)
|
||||
</p>
|
||||
<p className="text-sm text-slate-600 dark:text-titanio">
|
||||
Keep existing data and add new items. Update matching VINs.
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
<label className="flex items-start space-x-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="mode"
|
||||
value="replace"
|
||||
checked={mode === 'replace'}
|
||||
onChange={() => setMode('replace')}
|
||||
className="mt-1"
|
||||
style={{ minWidth: '20px', minHeight: '20px' }}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-slate-800 dark:text-avus">
|
||||
Replace All
|
||||
</p>
|
||||
<p className="text-sm text-slate-600 dark:text-titanio">
|
||||
Delete all existing data and replace with imported data.
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3 mt-6">
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg font-medium"
|
||||
style={{ minHeight: '44px', minWidth: '44px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirmImport}
|
||||
className="px-4 py-2 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors dark:bg-primary-600 dark:hover:bg-primary-700"
|
||||
style={{ minHeight: '44px', minWidth: '44px' }}
|
||||
>
|
||||
{mode === 'replace' ? 'Replace All Data' : 'Import'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 4: Progress */}
|
||||
{step === 'progress' && (
|
||||
<div>
|
||||
<div className="flex flex-col items-center justify-center py-8">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mb-4"></div>
|
||||
<p className="text-slate-600 dark:text-titanio">
|
||||
Importing data... This may take a few minutes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 5: Results */}
|
||||
{step === 'results' && result && (
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<div
|
||||
className={`p-4 rounded-lg mb-4 ${
|
||||
result.success
|
||||
? 'bg-green-50 dark:bg-green-900/20'
|
||||
: 'bg-red-50 dark:bg-red-900/20'
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`font-semibold ${
|
||||
result.success
|
||||
? 'text-green-800 dark:text-green-300'
|
||||
: 'text-red-800 dark:text-red-300'
|
||||
}`}
|
||||
>
|
||||
{result.success
|
||||
? 'Import completed successfully!'
|
||||
: 'Import completed with errors'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4 className="font-semibold text-slate-800 dark:text-avus mb-3">
|
||||
Import Summary
|
||||
</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600 dark:text-titanio">
|
||||
Mode:
|
||||
</span>
|
||||
<span className="font-medium text-slate-800 dark:text-avus capitalize">
|
||||
{result.mode}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600 dark:text-titanio">
|
||||
Imported:
|
||||
</span>
|
||||
<span className="font-medium text-green-600 dark:text-green-400">
|
||||
{result.summary.imported}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600 dark:text-titanio">
|
||||
Updated:
|
||||
</span>
|
||||
<span className="font-medium text-blue-600 dark:text-blue-400">
|
||||
{result.summary.updated}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600 dark:text-titanio">
|
||||
Skipped:
|
||||
</span>
|
||||
<span className="font-medium text-gray-600 dark:text-gray-400">
|
||||
{result.summary.skipped}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{result.summary.errors.length > 0 && (
|
||||
<div className="mt-4 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
|
||||
<p className="text-sm font-medium text-red-800 dark:text-red-300 mb-2">
|
||||
Errors:
|
||||
</p>
|
||||
<ul className="text-sm text-red-700 dark:text-red-400 list-disc list-inside max-h-40 overflow-y-auto">
|
||||
{result.summary.errors.map((error, idx) => (
|
||||
<li key={idx}>{error}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.warnings.length > 0 && (
|
||||
<div className="mt-4 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
|
||||
<p className="text-sm font-medium text-orange-800 dark:text-orange-300 mb-2">
|
||||
Warnings:
|
||||
</p>
|
||||
<ul className="text-sm text-orange-700 dark:text-orange-400 list-disc list-inside">
|
||||
{result.warnings.map((warning, idx) => (
|
||||
<li key={idx}>{warning}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end mt-6">
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="px-4 py-2 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors dark:bg-primary-600 dark:hover:bg-primary-700"
|
||||
style={{ minHeight: '44px', minWidth: '44px' }}
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user