@visns-studio/visns-components 5.11.2 → 5.11.4

package/src/components/crm/MergeEntity.jsx

@@ -0,0 +1,1049 @@
+import React, {
+    useState,
+    useEffect,
+    useCallback,
+    useRef,
+    useMemo,
+    memo,
+} from 'react';
+import { toast } from 'react-toastify';
+import {
+    Search,
+    AlertTriangle,
+    Users,
+    ArrowRight,
+    CheckCircle,
+    XCircle,
+    Eye,
+    EyeOff,
+    Shuffle,
+} from 'lucide-react';
+import CustomFetch from './Fetch';
+import MultiSelect from './MultiSelect';
+import styles from './styles/MergeEntity.module.scss';
+
+// Separate component for search input to prevent unnecessary re-renders
+const SearchInput = memo(
+    ({ searchQuery, onSearchChange, placeholder, searchInputRef }) => {
+        return (
+            <div className={styles.searchField}>
+                <input
+                    ref={searchInputRef}
+                    type="text"
+                    value={searchQuery}
+                    placeholder={placeholder}
+                    onChange={onSearchChange}
+                    autoComplete="off"
+                    className={styles.searchInput}
+                />
+                <Search size={20} className={styles.searchIcon} />
+            </div>
+        );
+    },
+    // Custom comparison function to prevent re-renders on irrelevant prop changes
+    (prevProps, nextProps) => {
+        return (
+            prevProps.searchQuery === nextProps.searchQuery &&
+            prevProps.placeholder === nextProps.placeholder &&
+            prevProps.onSearchChange === nextProps.onSearchChange
+        );
+    }
+);
+
+// Completely isolated search results component
+const SearchResults = memo(
+    ({ searchResults, searchQuery, loading, config, onSelectEntity }) => {
+        if (searchResults.length > 0) {
+            return (
+                <div className={styles.searchResults}>
+                    <h5>
+                        {config.labels?.potentialDuplicates ||
+                            'Potential Duplicates Found'}
+                    </h5>
+                    {searchResults.map((entity) => (
+                        <div
+                            key={entity.id}
+                            className={styles.searchResult}
+                            onClick={() => onSelectEntity(entity)}
+                        >
+                            <div className={styles.resultInfo}>
+                                <div className={styles.resultName}>
+                                    {entity[config.displayField || 'name']}
+                                </div>
+                                {config.subDisplayFields && (
+                                    <div className={styles.resultDetails}>
+                                        {config.subDisplayFields.map(
+                                            (field) =>
+                                                entity[field] && (
+                                                    <span
+                                                        key={field}
+                                                        className={
+                                                            styles.resultDetail
+                                                        }
+                                                    >
+                                                        {entity[field]}
+                                                    </span>
+                                                )
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                            <ArrowRight
+                                size={16}
+                                className={styles.selectIcon}
+                            />
+                        </div>
+                    ))}
+                </div>
+            );
+        }
+
+        if (searchQuery.length > 0 && !loading) {
+            return (
+                <div className={styles.noResults}>
+                    {config.messages?.noDuplicates ||
+                        'No potential duplicates found. This entity appears to be unique.'}
+                </div>
+            );
+        }
+
+        return null;
+    },
+    // Prevent re-renders unless actual data changes
+    (prevProps, nextProps) => {
+        return (
+            prevProps.searchResults === nextProps.searchResults &&
+            prevProps.searchQuery === nextProps.searchQuery &&
+            prevProps.loading === nextProps.loading &&
+            prevProps.onSelectEntity === nextProps.onSelectEntity
+        );
+    }
+);
+
+// Completely isolated search container
+const SearchContainer = memo(({ 
+    searchQuery, 
+    onSearchChange, 
+    searchResults, 
+    loading, 
+    config, 
+    onSelectEntity,
+    placeholder,
+    searchInputRef
+}) => {
+    return (
+        <div className={styles.searchSection}>
+            <SearchInput
+                searchQuery={searchQuery}
+                onSearchChange={onSearchChange}
+                placeholder={placeholder}
+                searchInputRef={searchInputRef}
+            />
+            <SearchResults
+                searchResults={searchResults}
+                searchQuery={searchQuery}
+                loading={loading}
+                config={config}
+                onSelectEntity={onSelectEntity}
+            />
+        </div>
+    );
+});
+
+const MergeEntity = ({ endpoints, config, dataId, onUpdate = () => {} }) => {
+    const [step, setStep] = useState(1); // 1: Search, 2: Select, 3: Configure, 4: Complete
+    const [loading, setLoading] = useState(false);
+    const [searchResults, setSearchResults] = useState([]);
+    const [selectedEntity, setSelectedEntity] = useState(null);
+    const [sourceEntity, setSourceEntity] = useState(null);
+    const [targetEntity, setTargetEntity] = useState(null);
+    const [conflicts, setConflicts] = useState([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const searchInputRef = useRef(null);
+    const searchTimeoutRef = useRef(null);
+    const previousActiveElement = useRef(null);
+    const isSearching = useRef(false);
+    const [mergeOptions, setMergeOptions] = useState({
+        includeAllRelationships: true, // Include all relationships by default
+        attributes: [],
+        exclude: ['id', 'created_at', 'updated_at', 'deleted_at'],
+        overwriteWithNull: false,
+        mergeTimestamps: false,
+        prioritizeSource: true,
+    });
+    const [showAdvanced, setShowAdvanced] = useState(false);
+
+    // Replace placeholders in URLs
+    const processTemplate = (template, data = {}) => {
+        let processed = template;
+        processed = processed.replace(/\{dataId\}/g, dataId);
+        Object.keys(data).forEach((key) => {
+            const placeholder = new RegExp(`\\{${key}\\}`, 'g');
+            processed = processed.replace(placeholder, data[key]);
+        });
+        return processed;
+    };
+
+    // Load source entity details
+    const loadSourceEntity = async () => {
+        if (!endpoints.getEntity || !dataId) return;
+
+        try {
+            setLoading(true);
+            const url = processTemplate(
+                endpoints.getEntity.url || endpoints.getEntity
+            );
+            const method = endpoints.getEntity.method || 'GET';
+            const response = await CustomFetch(url, method);
+
+            const dataPath = config.dataPath || 'data';
+            const entityData = dataPath
+                .split('.')
+                .reduce((obj, key) => obj?.[key], response);
+            setSourceEntity(entityData);
+        } catch (error) {
+            toast.error(
+                config.messages?.loadError || 'Failed to load entity details'
+            );
+            console.error('Error loading source entity:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Search for potential duplicates
+    const searchDuplicates = useCallback(
+        async (searchQuery = '') => {
+            if (!endpoints.search) return;
+
+            try {
+                // Store the currently focused element before starting search
+                if (document.activeElement === searchInputRef.current) {
+                    previousActiveElement.current = searchInputRef.current;
+                    isSearching.current = true;
+                }
+                
+                setLoading(true);
+                const url = processTemplate(endpoints.search.url);
+                const method = endpoints.search.method || 'POST';
+                const params = {
+                    ...endpoints.search.params,
+                    search: searchQuery,
+                    exclude_id: dataId, // Exclude current entity from results
+                };
+
+                // Add search filters if provided - use configured search fields instead of invalid 'search' column
+                if (searchQuery.trim() && config.searchFields) {
+                    params.where = params.where || [];
+                    // Add OR conditions for each configured search field
+                    config.searchFields.forEach((field) => {
+                        params.where.push({
+                            id: field,
+                            value: searchQuery.trim(),
+                            operator: 'contains',
+                        });
+                    });
+                }
+
+                const response = await CustomFetch(url, method, params);
+                const dataPath = endpoints.search.dataPath || 'data';
+                const rawResults =
+                    dataPath
+                        .split('.')
+                        .reduce((obj, key) => obj?.[key], response) || [];
+
+                // Transform dropdown response format {id, label} to expected format
+                const transformedResults = rawResults.map((item) => {
+                    if (item.id && item.label) {
+                        // Transform dropdown format to entity format
+                        return {
+                            id: item.id,
+                            [config.displayField || 'name']: item.label,
+                            // Add any other fields that might be needed
+                            ...item,
+                        };
+                    }
+                    return item;
+                });
+
+                // Filter out the current entity from results to prevent self-merge
+                const filteredResults = transformedResults.filter(
+                    (result) =>
+                        result.id && result.id.toString() !== dataId.toString()
+                );
+
+                setSearchResults(filteredResults);
+            } catch (error) {
+                toast.error(
+                    config.messages?.searchError ||
+                        'Failed to search for duplicates'
+                );
+                console.error('Error searching duplicates:', error);
+            } finally {
+                setLoading(false);
+                
+                // Restore focus to search input after results are loaded
+                if (isSearching.current && previousActiveElement.current) {
+                    setTimeout(() => {
+                        try {
+                            previousActiveElement.current.focus();
+                            isSearching.current = false;
+                        } catch (e) {
+                            // Handle case where element no longer exists
+                        }
+                    }, 0);
+                }
+            }
+        },
+        [endpoints.search, config.searchFields, dataId, processTemplate]
+    );
+
+    // Load target entity details for step 2 preview
+    const loadTargetEntityDetails = useCallback(async (entityId) => {
+        console.log('=== LOAD TARGET ENTITY START ===');
+        console.log('Loading entity ID:', entityId);
+        console.log('Current source dataId:', dataId);
+        
+        if (!endpoints.getEntity) {
+            console.error('No getEntity endpoint configured');
+            return;
+        }
+
+        try {
+            // Use the entityId directly in the URL template
+            const urlTemplate = endpoints.getEntity.url || endpoints.getEntity;
+            const url = urlTemplate.replace(/\{dataId\}/g, entityId);
+            console.log('URL template:', urlTemplate);
+            console.log('Final URL:', url);
+            console.log('Method:', endpoints.getEntity.method || 'GET');
+            
+            const method = endpoints.getEntity.method || 'GET';
+            const response = await CustomFetch(url, method);
+            console.log('API Response:', response);
+
+            const dataPath = config.dataPath || 'data';
+            console.log('Data path:', dataPath);
+            const entityData = dataPath
+                .split('.')
+                .reduce((obj, key) => obj?.[key], response);
+            console.log('Extracted entity data:', entityData);
+            console.log('Entity data ID:', entityData?.id);
+            console.log('Does response ID match requested ID?', entityData?.id === entityId || entityData?.id?.toString() === entityId?.toString());
+
+            // Update the selectedEntity with full details for step 2 preview
+            setSelectedEntity(entityData);
+            console.log('=== LOAD TARGET ENTITY END ===\n');
+        } catch (error) {
+            console.error('Error loading target entity details:', error);
+            toast.error(
+                config.messages?.loadError ||
+                    'Failed to load target entity details'
+            );
+        }
+    }, [endpoints.getEntity, config.dataPath, dataId]);
+
+    // Memoized search change handler with stable reference
+    const handleSearchChange = useCallback(
+        (e) => {
+            const value = e.target.value;
+            setSearchQuery(value);
+            
+            // Mark that user is actively searching
+            isSearching.current = true;
+            previousActiveElement.current = e.target;
+            
+            // Debounce search to avoid excessive API calls
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+            searchTimeoutRef.current = setTimeout(() => {
+                searchDuplicatesRef.current(value);
+            }, 300);
+        },
+        [] // Remove searchDuplicates dependency to make it completely stable
+    );
+    
+    // Store searchDuplicates in ref to avoid dependency issues
+    const searchDuplicatesRef = useRef(searchDuplicates);
+    searchDuplicatesRef.current = searchDuplicates;
+
+    // Memoized entity selection handler
+    const handleSelectEntity = useCallback(async (entity) => {
+        console.log('=== ENTITY SELECTION START ===');
+        console.log('Selected entity from search:', entity);
+        console.log('Selected entity ID:', entity.id);
+        console.log('Current dataId (source):', dataId);
+        console.log('Are they the same?', entity.id === dataId || entity.id?.toString() === dataId?.toString());
+        
+        setSelectedEntity(entity);
+        setStep(2);
+        
+        // Load full entity details in the background
+        if (entity.id) {
+            console.log('About to load target entity details for ID:', entity.id);
+            await loadTargetEntityDetails(entity.id);
+        } else {
+            console.error('Selected entity has no ID:', entity);
+        }
+        console.log('=== ENTITY SELECTION END ===\n');
+    }, [loadTargetEntityDetails]);
+
+    // Auto-detect potential duplicates based on source entity
+    const autoDetectDuplicates = async () => {
+        if (!sourceEntity || !endpoints.detectDuplicates) {
+            // If no detect duplicates endpoint, skip auto-detection
+            console.info(
+                'No duplicate detection endpoint configured, skipping auto-detection'
+            );
+            return;
+        }
+
+        try {
+            setLoading(true);
+            const url = processTemplate(endpoints.detectDuplicates.url);
+            const method = endpoints.detectDuplicates.method || 'POST';
+            const params = {
+                ...endpoints.detectDuplicates.params,
+                entity_id: dataId,
+                fields: config.duplicateDetection?.fields || ['name', 'email'],
+            };
+
+            const response = await CustomFetch(url, method, params);
+            const dataPath = endpoints.detectDuplicates.dataPath || 'data';
+            const results =
+                dataPath
+                    .split('.')
+                    .reduce((obj, key) => obj?.[key], response) || [];
+
+            setSearchResults(results);
+            if (results.length > 0) {
+                toast.info(`Found ${results.length} potential duplicate(s)`);
+            }
+        } catch (error) {
+            console.warn('Auto-duplicate detection failed:', error);
+            // Don't show error toast for auto-detection failures
+            // Fallback to empty results - user can still search manually
+            setSearchResults([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Load target entity details and detect conflicts for step 3
+    const loadTargetEntity = async (entityId) => {
+        if (!endpoints.getEntity) return;
+
+        try {
+            setLoading(true);
+            const url = processTemplate(
+                endpoints.getEntity.url || endpoints.getEntity,
+                { dataId: entityId }
+            );
+            const method = endpoints.getEntity.method || 'GET';
+            const response = await CustomFetch(url, method);
+
+            const dataPath = config.dataPath || 'data';
+            const entityData = dataPath
+                .split('.')
+                .reduce((obj, key) => obj?.[key], response);
+            setTargetEntity(entityData);
+
+            // Detect conflicts
+            console.log('About to detect conflicts with:', {
+                sourceEntity,
+                targetEntity: entityData,
+                configConflictFields: config.conflictFields
+            });
+            detectConflicts(sourceEntity, entityData);
+            setStep(3);
+        } catch (error) {
+            toast.error(
+                config.messages?.loadError ||
+                    'Failed to load target entity details'
+            );
+            console.error('Error loading target entity:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Detect conflicts between source and target entities
+    const detectConflicts = (source, target) => {
+        console.log('=== CONFLICT DETECTION START ===');
+        console.log('Source entity:', source);
+        console.log('Target entity:', target);
+        console.log('Config conflict fields:', config.conflictFields);
+        
+        if (!source || !target) {
+            console.log('Missing source or target entity!');
+            setConflicts([]);
+            return;
+        }
+        
+        const conflictList = [];
+        
+        // Use all fields from both entities, or specific fields from config
+        const allFields = new Set([
+            ...Object.keys(source || {}),
+            ...Object.keys(target || {})
+        ]);
+        const fieldsToCheck = config.conflictFields || Array.from(allFields);
+        
+        console.log('Fields to check for conflicts:', fieldsToCheck);
+
+        fieldsToCheck.forEach((field) => {
+            const sourceValue = source?.[field];
+            const targetValue = target?.[field];
+            
+            // Normalize values - treat null, undefined, empty string, and 'N/A' as empty
+            const normalizeValue = (val) => {
+                if (!val || val === 'N/A' || val === '' || val === null || val === undefined) {
+                    return null;
+                }
+                return String(val).trim();
+            };
+            
+            const normalizedSource = normalizeValue(sourceValue);
+            const normalizedTarget = normalizeValue(targetValue);
+            
+            console.log(`\n--- Field: ${field} ---`);
+            console.log('Source value:', sourceValue);
+            console.log('Target value:', targetValue);
+            console.log('Normalized source:', normalizedSource);
+            console.log('Normalized target:', normalizedTarget);
+            console.log('Are they different?', normalizedSource !== normalizedTarget);
+            
+            // Detect conflict if values are different (including one being empty and other having value)
+            if (normalizedSource !== normalizedTarget) {
+                const conflict = {
+                    field,
+                    sourceValue: sourceValue || 'N/A',
+                    targetValue: targetValue || 'N/A',
+                    resolution: 'source', // Default to keeping source value
+                };
+                console.log('CONFLICT FOUND:', conflict);
+                conflictList.push(conflict);
+            }
+        });
+        
+        console.log('\n=== FINAL CONFLICT LIST ===');
+        console.log('Total conflicts found:', conflictList.length);
+        console.log('Conflicts:', conflictList);
+        console.log('=== CONFLICT DETECTION END ===\n');
+        
+        setConflicts(conflictList);
+    };
+
+    // Update conflict resolution
+    const updateConflictResolution = (field, resolution) => {
+        setConflicts((prev) =>
+            prev.map((conflict) =>
+                conflict.field === field
+                    ? { ...conflict, resolution }
+                    : conflict
+            )
+        );
+    };
+
+    // Perform the merge
+    const performMerge = async () => {
+        if (!endpoints.merge || !selectedEntity) return;
+
+        try {
+            setLoading(true);
+
+            // Prepare merge options based on conflict resolutions
+            const finalOptions = { ...mergeOptions };
+            
+            // Create explicit field overrides based on conflict resolutions
+            const fieldOverrides = {};
+            const excludeFields = [...(finalOptions.exclude || [])];
+            
+            console.log('=== MERGE CONFLICT RESOLUTION ===');
+            console.log('Conflicts to resolve:', conflicts);
+            console.log('Source entity (current):', sourceEntity);
+            console.log('Target entity (selected):', selectedEntity);
+
+            // Handle conflict resolutions by creating explicit field overrides
+            conflicts.forEach((conflict) => {
+                console.log(`Processing conflict for field: ${conflict.field}`);
+                console.log(`Resolution choice: ${conflict.resolution}`);
+                console.log(`Source value: "${conflict.sourceValue}"`);
+                console.log(`Target value: "${conflict.targetValue}"`);
+                
+                if (conflict.resolution === 'target') {
+                    // User chose to keep the target (selected entity) value
+                    // We need to explicitly set this field value in the source entity
+                    const targetValue = selectedEntity?.[conflict.field];
+                    fieldOverrides[conflict.field] = targetValue;
+                    console.log(`Will override ${conflict.field} with target value: "${targetValue}"`);
+                } else {
+                    // User chose to keep the source (current entity) value - this is default behavior
+                    console.log(`Keeping source value for ${conflict.field}: "${sourceEntity?.[conflict.field]}"`);
+                }
+            });
+
+            console.log('Final field overrides:', fieldOverrides);
+            console.log('=== END MERGE CONFLICT RESOLUTION ===');
+
+            const url = processTemplate(endpoints.merge.url);
+            const method = endpoints.merge.method || 'POST';
+            
+            // Map frontend options to backend expected format
+            const params = {
+                source_id: dataId, // Current entity is source
+                target_id: selectedEntity.id,
+                relationships: finalOptions.includeAllRelationships ? [] : (finalOptions.relationships || []), // Backend handles empty array as "all relationships"
+                attributes: finalOptions.attributes || [],
+                exclude: finalOptions.exclude || ['id', 'created_at', 'updated_at', 'deleted_at'],
+                overwriteWithNull: finalOptions.overwriteWithNull || false,
+                mergeTimestamps: finalOptions.mergeTimestamps || false,
+                field_overrides: fieldOverrides, // Send explicit field overrides
+                ...endpoints.merge.params,
+            };
+
+            console.log('Sending merge request with params:', params);
+            await CustomFetch(url, method, params);
+
+            toast.success(
+                config.messages?.mergeSuccess || 'Entities merged successfully'
+            );
+            setStep(4);
+            onUpdate();
+        } catch (error) {
+            toast.error(
+                config.messages?.mergeError || 'Failed to merge entities'
+            );
+            console.error('Error performing merge:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Reset workflow
+    const resetWorkflow = () => {
+        setStep(1);
+        setSearchResults([]);
+        setSelectedEntity(null);
+        setTargetEntity(null);
+        setConflicts([]);
+        setSearchQuery('');
+        setMergeOptions({
+            includeAllRelationships: true,
+            attributes: [],
+            exclude: ['id', 'created_at', 'updated_at', 'deleted_at'],
+            overwriteWithNull: false,
+            mergeTimestamps: false,
+            prioritizeSource: true,
+        });
+    };
+
+    useEffect(() => {
+        if (dataId) {
+            loadSourceEntity();
+        }
+    }, [dataId]);
+
+    useEffect(() => {
+        if (sourceEntity && step === 1) {
+            autoDetectDuplicates();
+        }
+    }, [sourceEntity, step]);
+
+    // Effect to maintain focus on search input during re-renders
+    useEffect(() => {
+        if (isSearching.current && searchInputRef.current && step === 1) {
+            searchInputRef.current.focus();
+        }
+    }, [searchResults, loading, step]);
+
+    if (loading) {
+        return (
+            <div className={styles.loading}>
+                {config.messages?.loading || 'Loading...'}
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <h3>
+                    <Shuffle
+                        size={20}
+                        style={{ marginRight: '8px', verticalAlign: 'middle' }}
+                    />
+                    {config.title || 'Merge Entity'}
+                </h3>
+                <p>
+                    {config.description ||
+                        'Merge this entity with another to eliminate duplicates'}
+                </p>
+            </div>
+
+            {/* Progress Steps */}
+            <div className={styles.progressSteps}>
+                {[
+                    { id: 1, label: 'Search', icon: Search },
+                    { id: 2, label: 'Select', icon: Users },
+                    { id: 3, label: 'Configure', icon: AlertTriangle },
+                    { id: 4, label: 'Complete', icon: CheckCircle },
+                ].map(({ id, label, icon: Icon }) => (
+                    <div
+                        key={id}
+                        className={`${styles.step} ${
+                            step >= id ? styles.active : ''
+                        } ${step === id ? styles.current : ''}`}
+                    >
+                        <Icon size={16} />
+                        <span>{label}</span>
+                    </div>
+                ))}
+            </div>
+
+            {/* Step 1: Search for Duplicates */}
+            {step === 1 && (
+                <div className={styles.stepContent}>
+                    <h4>
+                        {config.labels?.searchTitle || 'Search for Duplicates'}
+                    </h4>
+
+                    <div className={styles.searchSection}>
+                        <SearchInput
+                            searchQuery={searchQuery}
+                            onSearchChange={handleSearchChange}
+                            placeholder={
+                                config.labels?.searchPlaceholder ||
+                                'Search for potential duplicates...'
+                            }
+                            searchInputRef={searchInputRef}
+                        />
+                        <SearchResults
+                            searchResults={searchResults}
+                            searchQuery={searchQuery}
+                            loading={loading}
+                            config={config}
+                            onSelectEntity={handleSelectEntity}
+                        />
+                    </div>
+                </div>
+            )}
+
+            {/* Step 2: Confirm Selection */}
+            {step === 2 && selectedEntity && (
+                <div className={styles.stepContent}>
+                    <h4>
+                        {config.labels?.confirmSelection ||
+                            'Confirm Merge Target'}
+                    </h4>
+
+                    <div className={styles.selectionPreview}>
+                        <div className={styles.entityCard}>
+                            <h5>
+                                {config.labels?.sourceEntity ||
+                                    'Source Entity (Current)'}
+                            </h5>
+                            <div className={styles.entityDetails}>
+                                <div className={styles.entityName}>
+                                    {
+                                        sourceEntity?.[
+                                            config.displayField || 'name'
+                                        ]
+                                    }
+                                </div>
+                                {config.previewFields?.map((field) => (
+                                    <div
+                                        key={field.key}
+                                        className={styles.entityField}
+                                    >
+                                        <span className={styles.fieldLabel}>
+                                            {field.label}:
+                                        </span>
+                                        <span className={styles.fieldValue}>
+                                            {sourceEntity?.[field.key] || 'N/A'}
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        <ArrowRight size={24} className={styles.mergeArrow} />
+
+                        <div className={styles.entityCard}>
+                            <h5>
+                                {config.labels?.targetEntity ||
+                                    'Target Entity (Merge Into)'}
+                            </h5>
+                            <div className={styles.entityDetails}>
+                                <div className={styles.entityName}>
+                                    {
+                                        selectedEntity[
+                                            config.displayField || 'name'
+                                        ]
+                                    }
+                                </div>
+                                {config.previewFields?.map((field) => (
+                                    <div
+                                        key={field.key}
+                                        className={styles.entityField}
+                                    >
+                                        <span className={styles.fieldLabel}>
+                                            {field.label}:
+                                        </span>
+                                        <span className={styles.fieldValue}>
+                                            {selectedEntity[field.key] || 'N/A'}
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={styles.actionButtons}>
+                        <button
+                            className={styles.secondaryBtn}
+                            onClick={() => setStep(1)}
+                        >
+                            {config.labels?.back || 'Back'}
+                        </button>
+                        <button
+                            className={styles.primaryBtn}
+                            onClick={() => {
+                                console.log('Continue button clicked - detecting conflicts directly');
+                                setTargetEntity(selectedEntity);
+                                detectConflicts(sourceEntity, selectedEntity);
+                                setStep(3);
+                            }}
+                        >
+                            {config.labels?.continue || 'Continue'}
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {/* Step 3: Configure Merge (Conflicts & Options) */}
+            {step === 3 && (
+                <div className={styles.stepContent}>
+                    <h4>
+                        {config.labels?.conflictResolution ||
+                            'Configure Merge'}
+                    </h4>
+
+                    {conflicts.length > 0 ? (
+                        <div className={styles.conflictsSection}>
+                            <div className={styles.conflictNote}>
+                                <AlertTriangle size={16} />
+                                <span>
+                                    {config.messages?.conflictsFound ||
+                                        `Found ${conflicts.length} field(s) with different values. Choose which value to keep.`}
+                                </span>
+                            </div>
+
+                            {conflicts.map((conflict) => (
+                                <div
+                                    key={conflict.field}
+                                    className={styles.conflictItem}
+                                >
+                                    <div className={styles.conflictField}>
+                                        <strong>
+                                            {config.fieldLabels?.[
+                                                conflict.field
+                                            ] || conflict.field}
+                                        </strong>
+                                    </div>
+                                    <div className={styles.conflictOptions}>
+                                        <label
+                                            className={styles.conflictOption}
+                                        >
+                                            <input
+                                                type="radio"
+                                                name={`conflict-${conflict.field}`}
+                                                value="source"
+                                                checked={
+                                                    conflict.resolution ===
+                                                    'source'
+                                                }
+                                                onChange={() =>
+                                                    updateConflictResolution(
+                                                        conflict.field,
+                                                        'source'
+                                                    )
+                                                }
+                                            />
+                                            <div
+                                                className={styles.optionContent}
+                                            >
+                                                <span
+                                                    className={
+                                                        styles.optionLabel
+                                                    }
+                                                >
+                                                    Keep Current
+                                                </span>
+                                                <span
+                                                    className={
+                                                        styles.optionValue
+                                                    }
+                                                >
+                                                    {conflict.sourceValue}
+                                                </span>
+                                            </div>
+                                        </label>
+                                        <label
+                                            className={styles.conflictOption}
+                                        >
+                                            <input
+                                                type="radio"
+                                                name={`conflict-${conflict.field}`}
+                                                value="target"
+                                                checked={
+                                                    conflict.resolution ===
+                                                    'target'
+                                                }
+                                                onChange={() =>
+                                                    updateConflictResolution(
+                                                        conflict.field,
+                                                        'target'
+                                                    )
+                                                }
+                                            />
+                                            <div
+                                                className={styles.optionContent}
+                                            >
+                                                <span
+                                                    className={
+                                                        styles.optionLabel
+                                                    }
+                                                >
+                                                    Use Target
+                                                </span>
+                                                <span
+                                                    className={
+                                                        styles.optionValue
+                                                    }
+                                                >
+                                                    {conflict.targetValue}
+                                                </span>
+                                            </div>
+                                        </label>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ) : (
+                        <div className={styles.noConflicts}>
+                            <CheckCircle
+                                size={24}
+                                className={styles.successIcon}
+                            />
+                            <p>
+                                {config.messages?.noConflicts ||
+                                    'No conflicts detected. The merge can proceed safely.'}
+                            </p>
+                        </div>
+                    )}
+
+                    {/* Advanced Options */}
+                    <div className={styles.advancedSection}>
+                        <button
+                            className={styles.advancedToggle}
+                            onClick={() => setShowAdvanced(!showAdvanced)}
+                            aria-expanded={showAdvanced}
+                            aria-controls="advanced-options"
+                        >
+                            {showAdvanced ? (
+                                <EyeOff size={16} />
+                            ) : (
+                                <Eye size={16} />
+                            )}
+                            {config.labels?.advancedOptions ||
+                                'Advanced Options'}
+                        </button>
+
+                        {showAdvanced && (
+                            <div id="advanced-options" className={styles.advancedOptions}>
+                                <label className={styles.option}>
+                                    <input
+                                        type="checkbox"
+                                        checked={mergeOptions.mergeTimestamps}
+                                        onChange={(e) =>
+                                            setMergeOptions((prev) => ({
+                                                ...prev,
+                                                mergeTimestamps:
+                                                    e.target.checked,
+                                            }))
+                                        }
+                                    />
+                                    {config.labels?.mergeTimestamps ||
+                                        'Merge timestamp fields'}
+                                </label>
+
+                                <label className={styles.option}>
+                                    <input
+                                        type="checkbox"
+                                        checked={mergeOptions.overwriteWithNull}
+                                        onChange={(e) =>
+                                            setMergeOptions((prev) => ({
+                                                ...prev,
+                                                overwriteWithNull:
+                                                    e.target.checked,
+                                            }))
+                                        }
+                                    />
+                                    {config.labels?.overwriteWithNull ||
+                                        'Allow overwriting with null values'}
+                                </label>
+
+                                <div className={styles.note}>
+                                    <p>Note: All related data will be included in the merge automatically.</p>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    <div className={styles.actionButtons}>
+                        <button
+                            className={styles.secondaryBtn}
+                            onClick={() => setStep(2)}
+                        >
+                            {config.labels?.back || 'Back'}
+                        </button>
+                        <button
+                            className={styles.primaryBtn}
+                            onClick={performMerge}
+                        >
+                            {config.labels?.performMerge || 'Perform Merge'}
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {/* Step 4: Complete */}
+            {step === 4 && (
+                <div className={styles.stepContent}>
+                    <div className={styles.successMessage}>
+                        <CheckCircle size={48} className={styles.successIcon} />
+                        <h4>
+                            {config.labels?.mergeComplete || 'Merge Complete!'}
+                        </h4>
+                        <p>
+                            {config.messages?.mergeCompleteDescription ||
+                                'The entities have been successfully merged. The source entity data has been consolidated into the target entity.'}
+                        </p>
+
+                        <div className={styles.actionButtons}>
+                            <button
+                                className={styles.secondaryBtn}
+                                onClick={resetWorkflow}
+                            >
+                                {config.labels?.mergeAnother || 'Merge Another'}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default MergeEntity;