@visns-studio/visns-components 5.15.10 → 5.15.12

package/src/components/oauth/DataSyncWizard.jsx

@@ -0,0 +1,850 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    ArrowLeft,
+    ArrowRight,
+    Download,
+    RefreshCw,
+    Plus,
+    Edit,
+    AlertTriangle,
+    CheckCircle,
+    Search,
+    Filter,
+    Eye,
+    EyeOff,
+    Settings,
+    FileText,
+    Zap,
+    Link,
+    X,
+    UserX,
+    Users
+} from 'lucide-react';
+import styles from '../styles/DataSyncWizard.module.scss';
+
+const DataSyncWizard = ({
+    provider,
+    dataType,
+    onCancel,
+    onComplete
+}) => {
+    const [currentStep, setCurrentStep] = useState(1);
+    const [previewData, setPreviewData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [syncSettings, setSyncSettings] = useState({
+        include_new: true,
+        include_updates: true,
+        skip_duplicates: true,
+        batch_size: 50
+    });
+    
+    // Pagination and filtering for step 2
+    const [currentPage, setCurrentPage] = useState(1);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [statusFilter, setStatusFilter] = useState('all');
+    const [showDetails, setShowDetails] = useState({});
+    const [manualMatches, setManualMatches] = useState({});
+    const [showMatchModal, setShowMatchModal] = useState(null);
+    const [skippedRecords, setSkippedRecords] = useState(new Set());
+    const [showDuplicateModal, setShowDuplicateModal] = useState(null);
+    const recordsPerPage = 20;
+
+    const steps = [
+        {
+            id: 1,
+            title: 'Configure Sync',
+            description: 'Choose what data to synchronize',
+            icon: <Settings size={20} />
+        },
+        {
+            id: 2,
+            title: 'Preview Changes',
+            description: 'Review all records before importing',
+            icon: <Eye size={20} />
+        },
+        {
+            id: 3,
+            title: 'Confirm & Sync',
+            description: 'Final confirmation and execution',
+            icon: <Zap size={20} />
+        }
+    ];
+
+    useEffect(() => {
+        if (currentStep === 2 && !previewData) {
+            loadPreviewData();
+        }
+    }, [currentStep]);
+
+    const loadPreviewData = async () => {
+        setLoading(true);
+        try {
+            const response = await fetch(`/integrations/oauth/${provider.name}/preview`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token\"]')?.getAttribute('content'),
+                },
+                credentials: 'same-origin',
+                body: JSON.stringify({
+                    data_type: dataType,
+                    options: { 
+                        limit: 50,  // Get more records for preview
+                        include_all: true,
+                        include_status: true,
+                        settings: syncSettings 
+                    }
+                }),
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            setPreviewData(data);
+        } catch (error) {
+            console.error('Preview failed:', error);
+            setPreviewData({
+                success: false,
+                error: error.message
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleNext = () => {
+        if (currentStep < steps.length) {
+            setCurrentStep(currentStep + 1);
+        }
+    };
+
+    const handleBack = () => {
+        if (currentStep > 1) {
+            setCurrentStep(currentStep - 1);
+        }
+    };
+
+    const handleComplete = async () => {
+        try {
+            setLoading(true);
+            
+            // Filter records to only include non-skipped ones
+            const recordsToSync = previewData.records.filter(record => 
+                !skippedRecords.has(record.id)
+            );
+            
+            // Make direct API call to sync endpoint
+            const response = await fetch(`/integrations/oauth/${provider.name}/sync`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'),
+                },
+                credentials: 'same-origin',
+                body: JSON.stringify({
+                    type: dataType,
+                    confirmed: true,
+                    preview_id: previewData.preview_id,
+                    settings: syncSettings,
+                    records: recordsToSync,
+                    skipped_records: Array.from(skippedRecords),
+                    manual_matches: manualMatches
+                }),
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.message || `HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                // Call the onComplete callback with the results
+                await onComplete(dataType, result);
+            } else {
+                throw new Error(result.message || 'Sync failed');
+            }
+        } catch (error) {
+            console.error('Sync failed:', error);
+            // Still call onComplete to notify parent of failure
+            await onComplete(dataType, {
+                success: false,
+                message: error.message,
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const toggleDetails = (recordId) => {
+        setShowDetails(prev => ({
+            ...prev,
+            [recordId]: !prev[recordId]
+        }));
+    };
+
+    const skipRecord = (recordId) => {
+        setSkippedRecords(prev => new Set([...prev, recordId]));
+    };
+
+    const unSkipRecord = (recordId) => {
+        setSkippedRecords(prev => {
+            const newSet = new Set(prev);
+            newSet.delete(recordId);
+            return newSet;
+        });
+    };
+
+    const findPotentialDuplicates = (record) => {
+        if (!previewData?.records) return [];
+        
+        const currentRecordId = record.id;
+        const recordName = record.display_name?.toLowerCase() || '';
+        
+        return previewData.records.filter(r => {
+            if (r.id === currentRecordId) return false;
+            
+            const otherName = r.display_name?.toLowerCase() || '';
+            if (!recordName || !otherName) return false;
+            
+            // Simple similarity check - names that share words or one is contained in the other
+            const recordWords = recordName.split(/\s+/);
+            const otherWords = otherName.split(/\s+/);
+            
+            // Check if any word matches or if one name contains the other
+            const hasCommonWord = recordWords.some(word => 
+                otherWords.some(otherWord => 
+                    word.length > 2 && otherWord.length > 2 && 
+                    (word.includes(otherWord) || otherWord.includes(word))
+                )
+            );
+            
+            return hasCommonWord || recordName.includes(otherName) || otherName.includes(recordName);
+        });
+    };
+
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case 'new':
+                return <Plus size={16} className={styles.statusIconNew} />;
+            case 'update':
+                return <Edit size={16} className={styles.statusIconUpdate} />;
+            case 'skip':
+                return <AlertTriangle size={16} className={styles.statusIconSkip} />;
+            default:
+                return <CheckCircle size={16} className={styles.statusIconDefault} />;
+        }
+    };
+
+    const getStatusBadge = (status) => {
+        const baseClass = styles.statusBadge;
+        switch (status) {
+            case 'new':
+                return `${baseClass} ${styles.statusNew}`;
+            case 'update':
+                return `${baseClass} ${styles.statusUpdate}`;
+            case 'skip':
+                return `${baseClass} ${styles.statusSkip}`;
+            default:
+                return `${baseClass} ${styles.statusDefault}`;
+        }
+    };
+
+    const filterRecords = (records) => {
+        if (!records) return [];
+        
+        let filtered = records;
+        
+        if (searchTerm) {
+            filtered = filtered.filter(record => 
+                JSON.stringify(record.data).toLowerCase().includes(searchTerm.toLowerCase()) ||
+                (record.existing_data && JSON.stringify(record.existing_data).toLowerCase().includes(searchTerm.toLowerCase()))
+            );
+        }
+        
+        if (statusFilter !== 'all') {
+            filtered = filtered.filter(record => record.sync_status === statusFilter);
+        }
+        
+        return filtered;
+    };
+
+    const paginateRecords = (records) => {
+        const startIndex = (currentPage - 1) * recordsPerPage;
+        return records.slice(startIndex, startIndex + recordsPerPage);
+    };
+
+    const filteredRecords = filterRecords(previewData?.records || []);
+    const paginatedRecords = paginateRecords(filteredRecords);
+    const totalPages = Math.ceil(filteredRecords.length / recordsPerPage);
+
+    const renderStep1 = () => (
+        <div className={styles.stepContent}>
+            <div className={styles.stepHeader}>
+                <div className={styles.stepIcon}>
+                    <Settings size={24} />
+                </div>
+                <div className={styles.stepInfo}>
+                    <h2>Configure Sync Settings</h2>
+                    <p>Choose how to synchronize {dataType} from {provider.display_name}</p>
+                </div>
+            </div>
+
+            <div className={styles.settingsGrid}>
+                <div className={styles.settingCard}>
+                    <div className={styles.settingHeader}>
+                        <Plus size={20} />
+                        <h3>New Records</h3>
+                    </div>
+                    <p>Import records that don't exist in the CRM</p>
+                    <label className={styles.toggle}>
+                        <input 
+                            type="checkbox" 
+                            checked={syncSettings.include_new}
+                            onChange={(e) => setSyncSettings(prev => ({...prev, include_new: e.target.checked}))}
+                        />
+                        <span className={styles.slider}></span>
+                    </label>
+                </div>
+
+                <div className={styles.settingCard}>
+                    <div className={styles.settingHeader}>
+                        <Edit size={20} />
+                        <h3>Update Existing</h3>
+                    </div>
+                    <p>Update records that already exist in the CRM</p>
+                    <label className={styles.toggle}>
+                        <input 
+                            type="checkbox" 
+                            checked={syncSettings.include_updates}
+                            onChange={(e) => setSyncSettings(prev => ({...prev, include_updates: e.target.checked}))}
+                        />
+                        <span className={styles.slider}></span>
+                    </label>
+                </div>
+
+                <div className={styles.settingCard}>
+                    <div className={styles.settingHeader}>
+                        <AlertTriangle size={20} />
+                        <h3>Skip Duplicates</h3>
+                    </div>
+                    <p>Skip records that appear to be duplicates</p>
+                    <label className={styles.toggle}>
+                        <input 
+                            type="checkbox" 
+                            checked={syncSettings.skip_duplicates}
+                            onChange={(e) => setSyncSettings(prev => ({...prev, skip_duplicates: e.target.checked}))}
+                        />
+                        <span className={styles.slider}></span>
+                    </label>
+                </div>
+
+                <div className={styles.settingCard}>
+                    <div className={styles.settingHeader}>
+                        <Zap size={20} />
+                        <h3>Batch Size</h3>
+                    </div>
+                    <p>Number of records to process at once</p>
+                    <select 
+                        value={syncSettings.batch_size}
+                        onChange={(e) => setSyncSettings(prev => ({...prev, batch_size: parseInt(e.target.value)}))}
+                        className={styles.batchSelect}
+                    >
+                        <option value={25}>25 records</option>
+                        <option value={50}>50 records</option>
+                        <option value={100}>100 records</option>
+                        <option value={200}>200 records</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    );
+
+    const renderStep2 = () => (
+        <div className={styles.stepContent}>
+            <div className={styles.stepHeader}>
+                <div className={styles.stepIcon}>
+                    <Eye size={24} />
+                </div>
+                <div className={styles.stepInfo}>
+                    <h2>Preview Changes</h2>
+                    <p>Review all records that will be synchronized</p>
+                </div>
+            </div>
+
+            {loading ? (
+                <div className={styles.loadingState}>
+                    <RefreshCw size={32} className={styles.spinner} />
+                    <p>Analyzing all records...</p>
+                </div>
+            ) : previewData?.success === false ? (
+                <div className={styles.errorState}>
+                    <AlertTriangle size={32} />
+                    <h3>Preview Failed</h3>
+                    <p>{previewData.error}</p>
+                    <button onClick={loadPreviewData} className={styles.retryButton}>
+                        Try Again
+                    </button>
+                </div>
+            ) : previewData ? (
+                <>
+                    {/* Summary Stats */}
+                    <div className={styles.summaryGrid}>
+                        <div className={styles.summaryCard}>
+                            <div className={styles.summaryIcon}>
+                                <Plus size={20} />
+                            </div>
+                            <div className={styles.summaryContent}>
+                                <span className={styles.summaryNumber}>
+                                    {previewData.summary?.new_records || 0}
+                                </span>
+                                <span className={styles.summaryLabel}>New Records</span>
+                            </div>
+                        </div>
+                        
+                        <div className={styles.summaryCard}>
+                            <div className={styles.summaryIcon}>
+                                <Edit size={20} />
+                            </div>
+                            <div className={styles.summaryContent}>
+                                <span className={styles.summaryNumber}>
+                                    {previewData.summary?.updates || 0}
+                                </span>
+                                <span className={styles.summaryLabel}>Updates</span>
+                            </div>
+                        </div>
+                        
+                        <div className={styles.summaryCard}>
+                            <div className={styles.summaryIcon}>
+                                <AlertTriangle size={20} />
+                            </div>
+                            <div className={styles.summaryContent}>
+                                <span className={styles.summaryNumber}>
+                                    {previewData.summary?.skipped || 0}
+                                </span>
+                                <span className={styles.summaryLabel}>Skipped</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Filters */}
+                    <div className={styles.filtersSection}>
+                        <div className={styles.searchBox}>
+                            <Search size={16} />
+                            <input
+                                type="text"
+                                placeholder="Search records..."
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                            />
+                        </div>
+                        
+                        <div className={styles.filterBox}>
+                            <Filter size={16} />
+                            <select 
+                                value={statusFilter} 
+                                onChange={(e) => setStatusFilter(e.target.value)}
+                            >
+                                <option value="all">All Records</option>
+                                <option value="new">New Only</option>
+                                <option value="update">Updates Only</option>
+                                <option value="skip">Skipped Only</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    {/* Records */}
+                    <div className={styles.recordsSection}>
+                        {paginatedRecords.length === 0 ? (
+                            <div className={styles.emptyState}>
+                                <p>No records match your current filters</p>
+                            </div>
+                        ) : (
+                            paginatedRecords.map((record, index) => (
+                                <div key={record.id || index} className={styles.recordCard}>
+                                    <div className={styles.recordHeader}>
+                                        <div className={styles.recordInfo}>
+                                            <span className={getStatusBadge(record.sync_status)}>
+                                                {getStatusIcon(record.sync_status)}
+                                                {record.sync_status?.toUpperCase() || 'UNKNOWN'}
+                                            </span>
+                                            <span className={styles.recordTitle}>
+                                                {record.display_name || record.data?.name || record.data?.email || `Record ${index + 1}`}
+                                            </span>
+                                        </div>
+                                        
+                                        <div className={styles.recordActions}>
+                                            {/* Skip/UnSkip Button - Allow for all record types including 'skip' */}
+                                            {(record.sync_status === 'update' || record.sync_status === 'new' || record.sync_status === 'skip') && (
+                                                <>
+                                                    {skippedRecords.has(record.id || index) ? (
+                                                        <button 
+                                                            onClick={() => unSkipRecord(record.id || index)}
+                                                            className={styles.unSkipButton}
+                                                            title="Include this record in sync"
+                                                        >
+                                                            <CheckCircle size={14} /> Include
+                                                        </button>
+                                                    ) : record.sync_status === 'skip' ? (
+                                                        <button 
+                                                            onClick={() => unSkipRecord(record.id || index)}
+                                                            className={styles.includeButton}
+                                                            title="Include this skipped record in sync to link with Zoho ID"
+                                                        >
+                                                            <CheckCircle size={14} /> Link ID
+                                                        </button>
+                                                    ) : (
+                                                        <button 
+                                                            onClick={() => skipRecord(record.id || index)}
+                                                            className={styles.skipButton}
+                                                            title="Skip this record to prevent data loss"
+                                                        >
+                                                            <UserX size={14} /> Skip
+                                                        </button>
+                                                    )}
+                                                </>
+                                            )}
+                                            
+                                            {/* Duplicate Detection for NEW records */}
+                                            {record.sync_status === 'new' && !skippedRecords.has(record.id || index) && (
+                                                <>
+                                                    {findPotentialDuplicates(record).length > 0 && (
+                                                        <button 
+                                                            onClick={() => setShowDuplicateModal({record, duplicates: findPotentialDuplicates(record)})}
+                                                            className={styles.duplicateButton}
+                                                            title="Potential duplicates found"
+                                                        >
+                                                            <Users size={14} /> Duplicates
+                                                        </button>
+                                                    )}
+                                                    
+                                                    <button 
+                                                        onClick={() => setShowMatchModal(record.id || index)}
+                                                        className={styles.linkButton}
+                                                        title="Link to existing record"
+                                                    >
+                                                        <Link size={14} /> Link
+                                                    </button>
+                                                </>
+                                            )}
+                                            
+                                            <button 
+                                                onClick={() => toggleDetails(record.id || index)}
+                                                className={styles.toggleButton}
+                                            >
+                                                {showDetails[record.id || index] ? (
+                                                    <>Details <EyeOff size={14} /></>
+                                                ) : (
+                                                    <>Details <Eye size={14} /></>
+                                                )}
+                                            </button>
+                                        </div>
+                                    </div>
+                                    
+                                    {record.sync_status === 'update' && record.changes && (
+                                        <div className={styles.changesPreview}>
+                                            <strong>Changes:</strong>
+                                            <ul>
+                                                {record.changes.map((change, i) => (
+                                                    <li key={i}>
+                                                        <span className={styles.fieldName}>{change.field}:</span>
+                                                        <span className={styles.oldValue}>{change.old_value}</span>
+                                                        →
+                                                        <span className={styles.newValue}>{change.new_value}</span>
+                                                    </li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    )}
+                                    
+                                    {showDetails[record.id || index] && (
+                                        <div className={styles.recordDetails}>
+                                            <div className={styles.dataSection}>
+                                                <h4>External Data (from {provider.display_name})</h4>
+                                                <pre className={styles.jsonData}>
+                                                    {JSON.stringify(record.data, null, 2)}
+                                                </pre>
+                                            </div>
+                                            
+                                            {record.existing_data && (
+                                                <div className={styles.dataSection}>
+                                                    <h4>Current CRM Data</h4>
+                                                    <pre className={styles.jsonData}>
+                                                        {JSON.stringify(record.existing_data, null, 2)}
+                                                    </pre>
+                                                </div>
+                                            )}
+                                        </div>
+                                    )}
+                                </div>
+                            ))
+                        )}
+                    </div>
+
+                    {/* Pagination */}
+                    {totalPages > 1 && (
+                        <div className={styles.paginationSection}>
+                            <button 
+                                onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+                                disabled={currentPage === 1}
+                                className={styles.paginationButton}
+                            >
+                                Previous
+                            </button>
+                            
+                            <span className={styles.paginationInfo}>
+                                Page {currentPage} of {totalPages} ({filteredRecords.length} records)
+                            </span>
+                            
+                            <button 
+                                onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
+                                disabled={currentPage === totalPages}
+                                className={styles.paginationButton}
+                            >
+                                Next
+                            </button>
+                        </div>
+                    )}
+                </>
+            ) : null}
+        </div>
+    );
+
+    const renderStep3 = () => {
+        // Calculate dynamic counts based on current selections
+        const recordsToSync = previewData?.records?.filter(record => 
+            !skippedRecords.has(record.id)
+        ) || [];
+        
+        const dynamicCounts = {
+            new: recordsToSync.filter(r => r.sync_status === 'new').length,
+            updates: recordsToSync.filter(r => r.sync_status === 'update').length,
+            linked: recordsToSync.filter(r => r.sync_status === 'skip').length, // Skip records being included = linked
+            skipped: (previewData?.records?.length || 0) - recordsToSync.length
+        };
+        
+        const totalChanges = dynamicCounts.new + dynamicCounts.updates + dynamicCounts.linked;
+        
+        return (
+            <div className={styles.stepContent}>
+                <div className={styles.stepHeader}>
+                    <div className={styles.stepIcon}>
+                        <Zap size={24} />
+                    </div>
+                    <div className={styles.stepInfo}>
+                        <h2>Confirm & Execute Sync</h2>
+                        <p>Ready to import {totalChanges} changes</p>
+                    </div>
+                </div>
+
+                <div className={styles.confirmationSection}>
+                    <div className={styles.confirmationCard}>
+                        <FileText size={48} />
+                        <h3>Sync Summary</h3>
+                        <div className={styles.confirmationStats}>
+                            <div className={styles.stat}>
+                                <span className={styles.statNumber}>{dynamicCounts.new}</span>
+                                <span className={styles.statLabel}>New</span>
+                            </div>
+                            <div className={styles.stat}>
+                                <span className={styles.statNumber}>{dynamicCounts.updates}</span>
+                                <span className={styles.statLabel}>Updates</span>
+                            </div>
+                            <div className={styles.stat}>
+                                <span className={styles.statNumber}>{dynamicCounts.linked}</span>
+                                <span className={styles.statLabel}>Linked</span>
+                            </div>
+                            <div className={styles.stat}>
+                                <span className={styles.statNumber}>{dynamicCounts.skipped}</span>
+                                <span className={styles.statLabel}>Skipped</span>
+                            </div>
+                        </div>
+                        
+                        <div className={styles.warningBox}>
+                            <AlertTriangle size={20} />
+                            <p>This action cannot be undone. Please ensure you have reviewed all changes.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className={styles.wizardContainer}>
+            {/* Progress Steps */}
+            <div className={styles.progressSteps}>
+                {steps.map((step, index) => (
+                    <div 
+                        key={step.id}
+                        className={`${styles.progressStep} ${
+                            currentStep === step.id ? styles.active : 
+                            currentStep > step.id ? styles.completed : ''
+                        }`}
+                    >
+                        <div className={styles.stepNumber}>
+                            {currentStep > step.id ? <CheckCircle size={20} /> : step.icon}
+                        </div>
+                        <div className={styles.stepDetails}>
+                            <h4>{step.title}</h4>
+                            <p>{step.description}</p>
+                        </div>
+                        {index < steps.length - 1 && <div className={styles.progressLine} />}
+                    </div>
+                ))}
+            </div>
+
+            {/* Step Content */}
+            <div className={styles.wizardContent}>
+                {currentStep === 1 && renderStep1()}
+                {currentStep === 2 && renderStep2()}
+                {currentStep === 3 && renderStep3()}
+            </div>
+
+            {/* Navigation */}
+            <div className={styles.wizardNavigation}>
+                <button 
+                    onClick={onCancel}
+                    className={styles.cancelButton}
+                >
+                    Cancel
+                </button>
+                
+                <div className={styles.navigationButtons}>
+                    {currentStep > 1 && (
+                        <button 
+                            onClick={handleBack}
+                            className={styles.backButton}
+                            disabled={loading}
+                        >
+                            <ArrowLeft size={16} />
+                            Back
+                        </button>
+                    )}
+                    
+                    {currentStep < steps.length ? (
+                        <button 
+                            onClick={handleNext}
+                            className={styles.nextButton}
+                            disabled={loading || (currentStep === 2 && !previewData?.success)}
+                        >
+                            Next
+                            <ArrowRight size={16} />
+                        </button>
+                    ) : (
+                        <button 
+                            onClick={handleComplete}
+                            className={styles.completeButton}
+                            disabled={loading || (!previewData?.summary?.total_changes && !previewData?.records?.some(r => !skippedRecords.has(r.id)))}
+                        >
+                            <Download size={16} />
+                            {loading ? 'Syncing...' : `Import ${
+                                (previewData?.records?.filter(record => !skippedRecords.has(record.id)) || []).length
+                            } Changes`}
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {/* Manual Match Modal */}
+            {showMatchModal && (
+                <div className={styles.matchModal} onClick={() => setShowMatchModal(null)}>
+                    <div className={styles.matchModalContent} onClick={(e) => e.stopPropagation()}>
+                        <h3>Link Record to Existing Entry</h3>
+                        <p>
+                            This feature allows you to manually link this external record to an existing record in your CRM 
+                            instead of creating a new one. This is useful when the automatic matching didn't detect a duplicate.
+                        </p>
+                        <p><strong>Note:</strong> This is a placeholder for the manual matching interface. 
+                        The full implementation would include search functionality to find and select existing records.</p>
+                        
+                        <div className={styles.matchModalActions}>
+                            <button 
+                                onClick={() => setShowMatchModal(null)}
+                                className={styles.cancelButton}
+                            >
+                                Cancel
+                            </button>
+                            <button 
+                                onClick={() => {
+                                    // Here you would implement the actual matching logic
+                                    console.log('Manual match for record:', showMatchModal);
+                                    setShowMatchModal(null);
+                                }}
+                                className={styles.confirmButton}
+                            >
+                                Link Record
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Duplicate Detection Modal */}
+            {showDuplicateModal && (
+                <div className={styles.matchModal} onClick={() => setShowDuplicateModal(null)}>
+                    <div className={styles.matchModalContent} onClick={(e) => e.stopPropagation()}>
+                        <h3>Potential Duplicates Found</h3>
+                        <p>
+                            The following records might be duplicates of "<strong>{showDuplicateModal.record.display_name}</strong>":
+                        </p>
+                        
+                        <div className={styles.duplicatesList}>
+                            {showDuplicateModal.duplicates.map((duplicate, index) => (
+                                <div key={duplicate.id || index} className={styles.duplicateItem}>
+                                    <div className={styles.duplicateInfo}>
+                                        <span className={styles.duplicateName}>{duplicate.display_name}</span>
+                                        <span className={`${styles.duplicateStatus} ${duplicate.sync_status === 'new' ? styles.statusNew : duplicate.sync_status === 'update' ? styles.statusUpdate : styles.statusSkip}`}>
+                                            {duplicate.sync_status.toUpperCase()}
+                                        </span>
+                                    </div>
+                                    <div className={styles.duplicateActions}>
+                                        <button 
+                                            onClick={() => {
+                                                skipRecord(duplicate.id || `dup_${index}`);
+                                                console.log('Skipped duplicate:', duplicate.display_name);
+                                            }}
+                                            className={styles.skipDuplicateButton}
+                                        >
+                                            Skip This
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                        
+                        <div className={styles.matchModalActions}>
+                            <button 
+                                onClick={() => setShowDuplicateModal(null)}
+                                className={styles.cancelButton}
+                            >
+                                Keep All
+                            </button>
+                            <button 
+                                onClick={() => {
+                                    // Skip all duplicates except the first one
+                                    showDuplicateModal.duplicates.forEach((dup, index) => {
+                                        if (index > 0) {
+                                            skipRecord(dup.id || `dup_${index}`);
+                                        }
+                                    });
+                                    setShowDuplicateModal(null);
+                                }}
+                                className={styles.confirmButton}
+                            >
+                                Skip Duplicates
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default DataSyncWizard;