@visns-studio/visns-components 5.15.10 → 5.15.11

package/src/components/oauth/DataPreviewModal.jsx

@@ -0,0 +1,372 @@
+import React, { useState, useEffect } from 'react';
+import { 
+    X, 
+    Download, 
+    RefreshCw, 
+    Plus, 
+    Edit, 
+    AlertTriangle,
+    CheckCircle,
+    Search,
+    Filter,
+    Eye,
+    EyeOff
+} from 'lucide-react';
+import styles from '../styles/DataPreviewModal.module.scss';
+
+const DataPreviewModal = ({
+    isOpen,
+    onClose,
+    provider,
+    dataType,
+    onConfirmSync
+}) => {
+    const [previewData, setPreviewData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [statusFilter, setStatusFilter] = useState('all');
+    const [showDetails, setShowDetails] = useState({});
+    const recordsPerPage = 20;
+
+    useEffect(() => {
+        if (isOpen && provider && dataType) {
+            loadPreviewData();
+        }
+    }, [isOpen, provider, dataType]);
+
+    const loadPreviewData = async () => {
+        setLoading(true);
+        try {
+            const response = await fetch(`/integrations/oauth/${provider.name}/preview-comprehensive`, {
+                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,
+                    include_all: true,
+                    include_status: true
+                }),
+            });
+            
+            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 toggleDetails = (recordId) => {
+        setShowDetails(prev => ({
+            ...prev,
+            [recordId]: !prev[recordId]
+        }));
+    };
+
+    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;
+        
+        // Filter by search term
+        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()))
+            );
+        }
+        
+        // Filter by status
+        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 handleConfirmSync = () => {
+        if (previewData?.summary?.total_changes > 0) {
+            onConfirmSync(dataType, {
+                confirmed: true,
+                preview_id: previewData.preview_id
+            });
+        }
+        onClose();
+    };
+
+    if (!isOpen) return null;
+
+    const filteredRecords = filterRecords(previewData?.records || []);
+    const paginatedRecords = paginateRecords(filteredRecords);
+    const totalPages = Math.ceil(filteredRecords.length / recordsPerPage);
+
+    return (
+        <div className={styles.modalOverlay} onClick={onClose}>
+            <div className={styles.modalContainer} onClick={(e) => e.stopPropagation()}>
+                {/* Header */}
+                <div className={styles.modalHeader}>
+                    <div className={styles.headerContent}>
+                        <h2>
+                            <Download size={20} />
+                            Data Preview: {dataType}
+                        </h2>
+                        <p className={styles.subtitle}>
+                            Review all records before importing from {provider.display_name}
+                        </p>
+                    </div>
+                    <button onClick={onClose} className={styles.closeButton}>
+                        <X size={20} />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className={styles.modalContent}>
+                    {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.summarySection}>
+                                <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>
+                            </div>
+
+                            {/* Filters and Search */}
+                            <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 List */}
+                            <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>
+                                                
+                                                <button 
+                                                    onClick={() => toggleDetails(record.id || index)}
+                                                    className={styles.toggleButton}
+                                                >
+                                                    {showDetails[record.id || index] ? (
+                                                        <>Hide Details <EyeOff size={14} /></>
+                                                    ) : (
+                                                        <>Show Details <Eye size={14} /></>
+                                                    )}
+                                                </button>
+                                            </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>
+
+                {/* Footer */}
+                <div className={styles.modalFooter}>
+                    <button onClick={onClose} className={styles.cancelButton}>
+                        Cancel
+                    </button>
+                    <button 
+                        onClick={handleConfirmSync} 
+                        className={styles.confirmButton}
+                        disabled={!previewData?.summary?.total_changes || loading}
+                    >
+                        <Download size={16} />
+                        Import {previewData?.summary?.total_changes || 0} Changes
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DataPreviewModal;