@visns-studio/visns-components 5.15.21 → 5.15.23

package/src/components/ImportWizardModal.jsx

@@ -0,0 +1,627 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    X,
+    Upload,
+    ArrowRight,
+    ArrowLeft,
+    CheckCircle,
+    AlertTriangle,
+    FileText,
+    Eye,
+    Download,
+    RefreshCw,
+    Zap
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { useDropzone } from 'react-dropzone';
+import StandardModal from './generic/StandardModal';
+import Select from './Select';
+import CustomFetch from './Fetch';
+import styles from './styles/ImportWizardModal.module.scss';
+
+const ImportWizardModal = ({
+    isOpen,
+    onClose,
+    modelConfig = [],
+    importUrl,
+    onComplete,
+    title = "Import Data",
+    targetModel,
+    parentId = null,
+    relationKey = null
+}) => {
+    const [currentStep, setCurrentStep] = useState(1);
+    const [loading, setLoading] = useState(false);
+    const [uploadedFile, setUploadedFile] = useState(null);
+    const [fileData, setFileData] = useState(null);
+    const [columnMapping, setColumnMapping] = useState({});
+    const [previewData, setPreviewData] = useState([]);
+    const [validationSummary, setValidationSummary] = useState(null);
+    const [importResults, setImportResults] = useState(null);
+
+    const steps = [
+        {
+            id: 1,
+            title: 'Upload File',
+            description: 'Upload your CSV or Excel file',
+            icon: <Upload size={20} />
+        },
+        {
+            id: 2,
+            title: 'Map Columns',
+            description: 'Map file columns to data fields',
+            icon: <ArrowRight size={20} />
+        },
+        {
+            id: 3,
+            title: 'Preview Data',
+            description: 'Review mapped data before import',
+            icon: <Eye size={20} />
+        },
+        {
+            id: 4,
+            title: 'Import',
+            description: 'Import data to system',
+            icon: <Zap size={20} />
+        }
+    ];
+
+    // Reset state when modal opens/closes
+    useEffect(() => {
+        if (isOpen) {
+            resetWizard();
+        }
+    }, [isOpen]);
+
+    const resetWizard = () => {
+        setCurrentStep(1);
+        setUploadedFile(null);
+        setFileData(null);
+        setColumnMapping({});
+        setPreviewData([]);
+        setValidationSummary(null);
+        setImportResults(null);
+    };
+
+    // File upload dropzone configuration
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        accept: {
+            'text/csv': ['.csv'],
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+            'application/vnd.ms-excel': ['.xls']
+        },
+        maxFiles: 1,
+        maxSize: 10 * 1024 * 1024, // 10MB
+        onDrop: handleFileUpload,
+        disabled: loading
+    });
+
+    async function handleFileUpload(acceptedFiles) {
+        if (acceptedFiles.length === 0) return;
+        
+        const file = acceptedFiles[0];
+        setUploadedFile(file);
+        setLoading(true);
+
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            const response = await CustomFetch('/ajax/import/parse-file', {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (response.success) {
+                setFileData(response.data);
+                
+                // Auto-suggest column mappings
+                await getSuggestedMappings(response.data.headers);
+                
+                setCurrentStep(2);
+                toast.success(`File parsed successfully! Found ${response.data.total_rows} rows.`);
+            } else {
+                toast.error(response.message || 'Failed to parse file');
+            }
+        } catch (error) {
+            console.error('File upload error:', error);
+            toast.error('Error uploading file');
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    async function getSuggestedMappings(headers) {
+        try {
+            const response = await CustomFetch('/ajax/import/column-suggestions', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    headers: headers,
+                    model_fields: modelConfig
+                })
+            });
+
+            if (response.success) {
+                setColumnMapping(response.suggestions);
+            }
+        } catch (error) {
+            console.error('Error getting suggestions:', error);
+        }
+    }
+
+    const handleMappingChange = (fileColumn, modelField) => {
+        setColumnMapping(prev => ({
+            ...prev,
+            [fileColumn]: modelField
+        }));
+    };
+
+    const getRequiredFields = () => {
+        return modelConfig.filter(field => field.required).map(field => field.id);
+    };
+
+    const getMappedFields = () => {
+        return Object.values(columnMapping).filter(field => field);
+    };
+
+    const getUnmappedRequiredFields = () => {
+        const requiredFields = getRequiredFields();
+        const mappedFields = getMappedFields();
+        return requiredFields.filter(field => !mappedFields.includes(field));
+    };
+
+    const canProceedToPreview = () => {
+        return getUnmappedRequiredFields().length === 0;
+    };
+
+    async function handlePreviewMapping() {
+        if (!canProceedToPreview()) {
+            toast.error('Please map all required fields before proceeding');
+            return;
+        }
+
+        setLoading(true);
+        
+        try {
+            const formData = new FormData();
+            formData.append('file', uploadedFile);
+            formData.append('mapping', JSON.stringify(columnMapping));
+            formData.append('model_config', JSON.stringify(modelConfig));
+
+            const response = await CustomFetch('/ajax/import/preview-mapping', {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (response.success) {
+                setPreviewData(response.preview);
+                setValidationSummary(response.validation_summary);
+                setCurrentStep(3);
+            } else {
+                toast.error(response.message || 'Failed to preview data');
+            }
+        } catch (error) {
+            console.error('Preview error:', error);
+            toast.error('Error previewing data');
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    async function handleImport() {
+        setLoading(true);
+        
+        try {
+            const formData = new FormData();
+            formData.append('file', uploadedFile);
+            formData.append('mapping', JSON.stringify(columnMapping));
+            formData.append('model_config', JSON.stringify(modelConfig));
+            formData.append('target_model', targetModel);
+            if (parentId) formData.append('parent_id', parentId.toString());
+            if (relationKey) formData.append('relation_key', relationKey);
+
+            const response = await CustomFetch('/ajax/import/process', {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (response.success) {
+                setImportResults(response);
+                setCurrentStep(4);
+                toast.success(`Import completed! ${response.imported} records imported successfully.`);
+            } else {
+                toast.error(response.message || 'Import failed');
+            }
+        } catch (error) {
+            console.error('Import error:', error);
+            toast.error('Error during import');
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    const handleClose = () => {
+        if (importResults && importResults.imported > 0 && onComplete) {
+            onComplete();
+        }
+        onClose();
+    };
+
+    const canGoNext = () => {
+        switch (currentStep) {
+            case 1: return fileData !== null;
+            case 2: return canProceedToPreview();
+            case 3: return validationSummary && validationSummary.valid_rows > 0;
+            default: return false;
+        }
+    };
+
+    const handleNext = () => {
+        switch (currentStep) {
+            case 2:
+                handlePreviewMapping();
+                break;
+            case 3:
+                handleImport();
+                break;
+            default:
+                setCurrentStep(prev => prev + 1);
+        }
+    };
+
+    const handleBack = () => {
+        setCurrentStep(prev => Math.max(1, prev - 1));
+    };
+
+    const renderStepIndicator = () => (
+        <div className={styles.stepIndicator}>
+            {steps.map((step, index) => (
+                <div key={step.id} className={styles.stepContainer}>
+                    <div className={`${styles.step} ${currentStep >= step.id ? styles.active : ''}`}>
+                        {step.icon}
+                    </div>
+                    <div className={styles.stepInfo}>
+                        <div className={styles.stepTitle}>{step.title}</div>
+                        <div className={styles.stepDescription}>{step.description}</div>
+                    </div>
+                    {index < steps.length - 1 && (
+                        <div className={`${styles.stepConnector} ${currentStep > step.id ? styles.completed : ''}`} />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+
+    const renderUploadStep = () => (
+        <div className={styles.uploadStep}>
+            <div {...getRootProps()} className={`${styles.dropzone} ${isDragActive ? styles.active : ''}`}>
+                <input {...getInputProps()} />
+                <Upload size={48} className={styles.uploadIcon} />
+                <h3>Drop your file here, or click to browse</h3>
+                <p>Supports CSV, XLS, and XLSX files (max 10MB)</p>
+                {uploadedFile && (
+                    <div className={styles.fileInfo}>
+                        <FileText size={20} />
+                        <span>{uploadedFile.name}</span>
+                    </div>
+                )}
+            </div>
+            
+            <div className={styles.templateSection}>
+                <h4>Need a template?</h4>
+                <p>Download a template with the correct column headers:</p>
+                <button 
+                    type="button" 
+                    className={styles.templateButton}
+                    onClick={() => downloadTemplate()}
+                >
+                    <Download size={16} />
+                    Download Template
+                </button>
+            </div>
+        </div>
+    );
+
+    const downloadTemplate = () => {
+        const headers = modelConfig.map(field => field.label);
+        const csvContent = headers.join(',') + '\n';
+        const blob = new Blob([csvContent], { type: 'text/csv' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${title.toLowerCase().replace(/\s+/g, '_')}_template.csv`;
+        a.click();
+        window.URL.revokeObjectURL(url);
+    };
+
+    const renderMappingStep = () => (
+        <div className={styles.mappingStep}>
+            <div className={styles.mappingHeader}>
+                <h3>Map File Columns to Data Fields</h3>
+                <p>Match columns from your file to the appropriate data fields. Required fields are marked with *</p>
+            </div>
+            
+            <div className={styles.mappingContainer}>
+                <div className={styles.mappingList}>
+                    {fileData.headers.map(header => (
+                        <div key={header} className={styles.mappingRow}>
+                            <div className={styles.fileColumn}>
+                                <strong>{header}</strong>
+                                {fileData.sample_data.length > 0 && (
+                                    <div className={styles.sampleValue}>
+                                        Example: "{fileData.sample_data[0][header] || 'N/A'}"
+                                    </div>
+                                )}
+                            </div>
+                            
+                            <ArrowRight size={20} className={styles.arrow} />
+                            
+                            <div className={styles.fieldColumn}>
+                                <Select
+                                    value={columnMapping[header] || ''}
+                                    onChange={(value) => handleMappingChange(header, value)}
+                                    options={[
+                                        { value: '', label: 'Skip Column' },
+                                        ...modelConfig.map(field => ({
+                                            value: field.id,
+                                            label: `${field.label}${field.required ? ' *' : ''}`,
+                                            disabled: getMappedFields().includes(field.id) && columnMapping[header] !== field.id
+                                        }))
+                                    ]}
+                                    placeholder="Select field..."
+                                />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+                
+                <div className={styles.mappingSummary}>
+                    <h4>Mapping Summary</h4>
+                    <div className={styles.summaryItem}>
+                        <span>Total Columns:</span>
+                        <span>{fileData.headers.length}</span>
+                    </div>
+                    <div className={styles.summaryItem}>
+                        <span>Mapped Columns:</span>
+                        <span>{getMappedFields().length}</span>
+                    </div>
+                    <div className={styles.summaryItem}>
+                        <span>Required Fields:</span>
+                        <span>{getRequiredFields().length}</span>
+                    </div>
+                    
+                    {getUnmappedRequiredFields().length > 0 && (
+                        <div className={styles.missingFields}>
+                            <AlertTriangle size={16} />
+                            <div>
+                                <strong>Missing Required Fields:</strong>
+                                <ul>
+                                    {getUnmappedRequiredFields().map(field => {
+                                        const fieldConfig = modelConfig.find(f => f.id === field);
+                                        return <li key={field}>{fieldConfig?.label || field}</li>;
+                                    })}
+                                </ul>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+
+    const renderPreviewStep = () => (
+        <div className={styles.previewStep}>
+            <div className={styles.previewHeader}>
+                <h3>Data Preview</h3>
+                <p>Review the mapped data before importing. Only the first 10 rows are shown.</p>
+            </div>
+            
+            {validationSummary && (
+                <div className={styles.validationSummary}>
+                    <div className={styles.summaryCards}>
+                        <div className={styles.summaryCard}>
+                            <CheckCircle size={24} className={styles.successIcon} />
+                            <div>
+                                <div className={styles.number}>{validationSummary.valid_rows}</div>
+                                <div className={styles.label}>Valid Rows</div>
+                            </div>
+                        </div>
+                        
+                        <div className={styles.summaryCard}>
+                            <AlertTriangle size={24} className={styles.warningIcon} />
+                            <div>
+                                <div className={styles.number}>{validationSummary.invalid_rows}</div>
+                                <div className={styles.label}>Invalid Rows</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    {validationSummary.errors.length > 0 && (
+                        <div className={styles.errorList}>
+                            <h4>Validation Errors:</h4>
+                            <div className={styles.errors}>
+                                {validationSummary.errors.slice(0, 5).map((error, index) => (
+                                    <div key={index} className={styles.errorItem}>
+                                        <strong>Row {error.row}:</strong>
+                                        <ul>
+                                            {error.errors.map((err, i) => <li key={i}>{err}</li>)}
+                                        </ul>
+                                    </div>
+                                ))}
+                                {validationSummary.errors.length > 5 && (
+                                    <div className={styles.moreErrors}>
+                                        ... and {validationSummary.errors.length - 5} more errors
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+            
+            <div className={styles.previewTable}>
+                <div className={styles.tableContainer}>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Status</th>
+                                {getMappedFields().map(field => {
+                                    const fieldConfig = modelConfig.find(f => f.id === field);
+                                    return <th key={field}>{fieldConfig?.label || field}</th>;
+                                })}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {previewData.map((row, index) => (
+                                <tr key={index} className={row.valid ? styles.validRow : styles.invalidRow}>
+                                    <td>
+                                        {row.valid ? (
+                                            <CheckCircle size={16} className={styles.successIcon} />
+                                        ) : (
+                                            <AlertTriangle size={16} className={styles.errorIcon} />
+                                        )}
+                                    </td>
+                                    {getMappedFields().map(field => (
+                                        <td key={field}>{row.mapped[field] || '-'}</td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    );
+
+    const renderImportStep = () => (
+        <div className={styles.importStep}>
+            {loading ? (
+                <div className={styles.importing}>
+                    <RefreshCw size={48} className={styles.spinner} />
+                    <h3>Importing data...</h3>
+                    <p>Please wait while we process your data.</p>
+                </div>
+            ) : (
+                <div className={styles.importResults}>
+                    <CheckCircle size={64} className={styles.successIcon} />
+                    <h3>Import Completed!</h3>
+                    
+                    {importResults && (
+                        <div className={styles.resultsSummary}>
+                            <div className={styles.resultsGrid}>
+                                <div className={styles.resultItem}>
+                                    <div className={styles.resultNumber}>{importResults.imported}</div>
+                                    <div className={styles.resultLabel}>Records Imported</div>
+                                </div>
+                                
+                                <div className={styles.resultItem}>
+                                    <div className={styles.resultNumber}>{importResults.errors?.length || 0}</div>
+                                    <div className={styles.resultLabel}>Errors</div>
+                                </div>
+                                
+                                <div className={styles.resultItem}>
+                                    <div className={styles.resultNumber}>{importResults.skipped}</div>
+                                    <div className={styles.resultLabel}>Skipped</div>
+                                </div>
+                            </div>
+                            
+                            {importResults.errors && importResults.errors.length > 0 && (
+                                <div className={styles.importErrors}>
+                                    <h4>Import Errors:</h4>
+                                    <div className={styles.errorList}>
+                                        {importResults.errors.slice(0, 5).map((error, index) => (
+                                            <div key={index} className={styles.errorItem}>
+                                                <strong>Row {error.row}:</strong>
+                                                <ul>
+                                                    {error.errors.map((err, i) => <li key={i}>{err}</li>)}
+                                                </ul>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+
+    const renderCurrentStep = () => {
+        switch (currentStep) {
+            case 1: return renderUploadStep();
+            case 2: return renderMappingStep();
+            case 3: return renderPreviewStep();
+            case 4: return renderImportStep();
+            default: return null;
+        }
+    };
+
+    return (
+        <StandardModal
+            isOpen={isOpen}
+            onClose={handleClose}
+            title={title}
+            size="xl"
+            className={styles.importWizardModal}
+        >
+            <div className={styles.modalContent}>
+                {renderStepIndicator()}
+                
+                <div className={styles.stepContent}>
+                    {renderCurrentStep()}
+                </div>
+                
+                <div className={styles.modalFooter}>
+                    <div className={styles.footerLeft}>
+                        {currentStep > 1 && currentStep < 4 && (
+                            <button
+                                type="button"
+                                onClick={handleBack}
+                                className={styles.backButton}
+                                disabled={loading}
+                            >
+                                <ArrowLeft size={16} />
+                                Back
+                            </button>
+                        )}
+                    </div>
+                    
+                    <div className={styles.footerRight}>
+                        {currentStep < 4 ? (
+                            <button
+                                type="button"
+                                onClick={handleNext}
+                                className={styles.nextButton}
+                                disabled={!canGoNext() || loading}
+                            >
+                                {loading ? (
+                                    <>
+                                        <RefreshCw size={16} className={styles.spinner} />
+                                        Processing...
+                                    </>
+                                ) : (
+                                    <>
+                                        {currentStep === 3 ? 'Import' : 'Next'}
+                                        <ArrowRight size={16} />
+                                    </>
+                                )}
+                            </button>
+                        ) : (
+                            <button
+                                type="button"
+                                onClick={handleClose}
+                                className={styles.finishButton}
+                            >
+                                Finish
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </StandardModal>
+    );
+};
+
+export default ImportWizardModal;