@visns-studio/visns-components 5.15.9 → 5.15.11

package/src/components/generic/GenericReport.jsx

@@ -1082,6 +1082,20 @@ const GenericReportImproved = ({
         exportUrl: '',
     });
 
+    // State for unique field selection and row exclusion
+    const [uniqueFieldConfig, setUniqueFieldConfig] = useState({
+        enabled: false,
+        selectedField: '',
+    });
+    
+    // Debug logging for uniqueFieldConfig changes
+    useEffect(() => {
+        console.log('🔍 [EFFECT] uniqueFieldConfig changed:', uniqueFieldConfig);
+    }, [uniqueFieldConfig]);
+    const [excludedRows, setExcludedRows] = useState(new Set());
+    const [showRowExclusionModal, setShowRowExclusionModal] = useState(false);
+    const [exportType, setExportType] = useState('regular');
+
     // Note: Removed table search functionality to simplify user experience
 
     // Extract additional settings with defaults
@@ -2291,6 +2305,17 @@ const GenericReportImproved = ({
                     let payload;
 
                     if (isDynamicTemplate) {
+                        // Enhanced unique field configuration for grouped templates
+                        const groupedUniqueConfig = uniqueFieldConfig.enabled && uniqueFieldConfig.selectedField ? {
+                            enabled: true,
+                            field: uniqueFieldConfig.selectedField,
+                            distinct: true,
+                            distinctField: uniqueFieldConfig.selectedField
+                        } : { 
+                            enabled: false,
+                            distinct: false 
+                        };
+
                         // For dynamic templates, send the complete template configuration
                         payload = {
                             dynamic_template: template,
@@ -2299,7 +2324,16 @@ const GenericReportImproved = ({
                             joins: joins,
                             filters: flattenFilterCriteria(filterCriteria),
                             sorting: sortCriteria,
+                            // Enhanced unique field configuration
+                            unique: groupedUniqueConfig,
                         };
+
+                        // Debug log for grouped reports
+                        if (uniqueFieldConfig.enabled) {
+                            console.group('🔍 [DEBUG] Grouped Report - Unique Field Configuration');
+                            console.log('Grouped unique config:', groupedUniqueConfig);
+                            console.groupEnd();
+                        }
                     } else {
                         // For predefined templates, use the existing approach
                         payload = {
@@ -2337,6 +2371,28 @@ const GenericReportImproved = ({
                 const page = Math.floor(skip / limit) + 1;
 
                 // Use the same payload format as GenericReport (with query wrapper)
+                // Debug the unique field state at query time
+                console.group('🔍 [DEBUG] DataSource - Unique Field State Check');
+                console.log('uniqueFieldConfig:', uniqueFieldConfig);
+                console.log('uniqueFieldConfig.enabled:', uniqueFieldConfig.enabled);
+                console.log('uniqueFieldConfig.selectedField:', uniqueFieldConfig.selectedField);
+                console.log('Condition evaluation:', uniqueFieldConfig.enabled && uniqueFieldConfig.selectedField);
+                
+                // Check DOM state vs React state
+                const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+                console.log('🔍 [DEBUG] All checkboxes in DOM:', Array.from(checkboxes).map((cb, i) => `${i}: ${cb.checked}`));
+                console.groupEnd();
+
+                const uniqueConfig = uniqueFieldConfig.enabled && uniqueFieldConfig.selectedField ? {
+                    enabled: true,
+                    field: uniqueFieldConfig.selectedField,
+                    distinct: true, // Explicit DISTINCT flag
+                    distinctField: uniqueFieldConfig.selectedField
+                } : { 
+                    enabled: false,
+                    distinct: false 
+                };
+
                 const queryConfig = {
                     mainTable: selectedTable,
                     columns: selectedColumns.map((col) => {
@@ -2368,8 +2424,20 @@ const GenericReportImproved = ({
                     })),
                     filters: flattenFilterCriteria(filterCriteria),
                     sorting: sortCriteria,
+                    // Enhanced unique field configuration
+                    unique: uniqueConfig,
                 };
 
+                // Debug log for unique field configuration
+                if (uniqueFieldConfig.enabled) {
+                    console.group('🔍 [DEBUG] Unique Field Configuration');
+                    console.log('Unique config enabled:', uniqueFieldConfig.enabled);
+                    console.log('Selected field:', uniqueFieldConfig.selectedField);
+                    console.log('Query unique config:', uniqueConfig);
+                    console.log('Expected SQL: SELECT DISTINCT', uniqueFieldConfig.selectedField, '...');
+                    console.groupEnd();
+                }
+
                 // Add sorting from DataGrid if provided
                 if (sortInfo) {
                     queryConfig.sorting = [
@@ -2461,6 +2529,11 @@ const GenericReportImproved = ({
             executeUrl,
             setting,
         });
+        
+        // CRITICAL DEBUG: Check uniqueFieldConfig state at execute time
+        console.log('🚨 [CRITICAL] uniqueFieldConfig at executeReport start:', uniqueFieldConfig);
+        console.log('🚨 [CRITICAL] uniqueFieldConfig.enabled:', uniqueFieldConfig.enabled);
+        console.log('🚨 [CRITICAL] uniqueFieldConfig.selectedField:', uniqueFieldConfig.selectedField);
 
         if (!selectedTable || selectedColumns.length === 0) {
             toast.warning(
@@ -2885,6 +2958,12 @@ const GenericReportImproved = ({
                 });
             }
 
+            // Restore unique field configuration if it exists
+            if (config.unique) {
+                console.log('🔄 [RESTORE] Restoring unique field config:', config.unique);
+                setUniqueFieldConfig(config.unique);
+            }
+
             if (config.filters) {
                 // Ensure filters have the proper structure
                 if (config.filters.groups) {
@@ -4181,6 +4260,96 @@ const GenericReportImproved = ({
                         )}
                     </div>
                 )}
+
+                {/* Unique Field Configuration */}
+                {selectedColumns.length > 0 && (
+                    <div className={styles.uniqueFieldConfig}>
+                        <div className={styles.configHeader}>
+                            <h4>
+                                <Filter size={16} />
+                                Remove Duplicates (Optional)
+                            </h4>
+                            <p>Use SQL DISTINCT to prevent duplicate rows based on a specific field</p>
+                        </div>
+                        <div className={styles.configContent}>
+                            <label className={styles.checkboxLabel}>
+                                <input
+                                    type="checkbox"
+                                    checked={uniqueFieldConfig.enabled}
+                                    onChange={(e) => {
+                                        console.log('🔍 [DEBUG] Unique field toggled:', e.target.checked);
+                                        console.log('🔍 [DEBUG] Current uniqueFieldConfig before change:', uniqueFieldConfig);
+                                        const newConfig = {
+                                            ...uniqueFieldConfig,
+                                            enabled: e.target.checked,
+                                            selectedField: e.target.checked ? uniqueFieldConfig.selectedField : ''
+                                        };
+                                        console.log('🔍 [DEBUG] New unique field config:', newConfig);
+                                        setUniqueFieldConfig(newConfig);
+                                        // Log immediately after setState
+                                        setTimeout(() => {
+                                            console.log('🔍 [DEBUG] State after setTimeout:', uniqueFieldConfig);
+                                        }, 100);
+                                    }}
+                                />
+                                <span className={styles.checkboxText}>
+                                    Enable DISTINCT filtering
+                                    {uniqueFieldConfig.enabled && uniqueFieldConfig.selectedField && (
+                                        <span className={styles.activeIndicator}>
+                                            <CircleCheck size={12} />
+                                            Active on {uniqueFieldConfig.selectedField}
+                                        </span>
+                                    )}
+                                </span>
+                            </label>
+                            
+                            {uniqueFieldConfig.enabled && (
+                                <div className={styles.uniqueFieldSelector}>
+                                    <label className={styles.fieldLabel}>
+                                        Select field to make unique:
+                                    </label>
+                                    <select
+                                        value={uniqueFieldConfig.selectedField}
+                                        onChange={(e) => {
+                                            console.log('🔍 [DEBUG] Unique field selected:', e.target.value);
+                                            console.log('🔍 [DEBUG] Available dropdown options:', Array.from(e.target.options).map(opt => ({value: opt.value, text: opt.text})));
+                                            console.log('🔍 [DEBUG] Selected option text:', e.target.options[e.target.selectedIndex]?.text);
+                                            console.log('🔍 [DEBUG] Current uniqueFieldConfig before field change:', uniqueFieldConfig);
+                                            console.log('🔍 [DEBUG] Current selectedColumns:', selectedColumns);
+                                            const newConfig = {
+                                                ...uniqueFieldConfig,
+                                                selectedField: e.target.value
+                                            };
+                                            console.log('🔍 [DEBUG] Updated unique field config with selected field:', newConfig);
+                                            setUniqueFieldConfig(newConfig);
+                                            // Log immediately after setState
+                                            setTimeout(() => {
+                                                console.log('🔍 [DEBUG] Field state after setTimeout:', uniqueFieldConfig);
+                                            }, 100);
+                                        }}
+                                        className={styles.fieldSelect}
+                                        required
+                                    >
+                                        <option value="">Choose a field...</option>
+                                        {selectedColumns.map((col) => (
+                                            <option 
+                                                key={`${col.table}-${col.column}`}
+                                                value={`${col.table}.${col.column}`}
+                                            >
+                                                {col.displayName || col.column} ({col.table})
+                                            </option>
+                                        ))}
+                                    </select>
+                                    <div className={styles.fieldHelp}>
+                                        <strong>SQL Impact:</strong> This will add DISTINCT to your query based on the selected field.
+                                        <br />
+                                        <code>SELECT DISTINCT {uniqueFieldConfig.selectedField || '[field]'}, ... FROM {selectedTable}</code>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
             </div>
         );
     };
@@ -6483,6 +6652,17 @@ const GenericReportImproved = ({
 
         try {
             // Use exact same payload format as GenericReport
+            // Enhanced unique field configuration for exports
+            const exportUniqueConfig = uniqueFieldConfig.enabled && uniqueFieldConfig.selectedField ? {
+                enabled: true,
+                field: uniqueFieldConfig.selectedField,
+                distinct: true,
+                distinctField: uniqueFieldConfig.selectedField
+            } : { 
+                enabled: false,
+                distinct: false 
+            };
+
             const queryConfig = {
                 mainTable: selectedTable,
                 columns: selectedColumns.map((col) => ({
@@ -6503,8 +6683,21 @@ const GenericReportImproved = ({
                 })),
                 filters: flattenFilterCriteria(filterCriteria),
                 sorting: sortCriteria,
+                // Enhanced unique field configuration
+                unique: exportUniqueConfig,
+                // Add excluded rows for server-side filtering
+                excludedRows: Array.from(excludedRows),
             };
 
+            // Debug log for exports
+            if (uniqueFieldConfig.enabled) {
+                console.group('🔍 [DEBUG] Export - Unique Field Configuration');
+                console.log('Export format:', format);
+                console.log('Export unique config:', exportUniqueConfig);
+                console.log('Query config:', queryConfig);
+                console.groupEnd();
+            }
+
             const exportData = {
                 query: queryConfig,
                 format: format === 'excel' ? 'xlsx' : format, // Convert excel to xlsx
@@ -6663,23 +6856,78 @@ const GenericReportImproved = ({
         }
     };
 
-    // Handle grouped report export to Excel
-    const handleRegularExport = async () => {
+    // Handle row exclusion modal
+    const handleExportWithExclusion = (exportType = 'regular') => {
         if (previewData.length === 0) {
             toast.error('No data available to export');
             return;
         }
 
+        setShowRowExclusionModal(true);
+        setExportType(exportType);
+    };
+
+    const confirmExportWithExclusion = async () => {
+        setShowRowExclusionModal(false);
+        
+        if (exportType === 'grouped') {
+            await performGroupedExport();
+        } else {
+            await performRegularExport();
+        }
+    };
+
+    // Handle grouped report export to Excel
+    const handleRegularExport = async () => {
+        handleExportWithExclusion('regular');
+    };
+
+    // Filter out excluded rows from preview data
+    const getFilteredPreviewData = () => {
+        if (excludedRows.size === 0) {
+            return previewData;
+        }
+        
+        return previewData.filter((row, index) => {
+            const rowId = row.id || `preview-row-${index}`;
+            return !excludedRows.has(rowId);
+        });
+    };
+
+    // Perform the actual regular export
+    const performRegularExport = async () => {
+        const filteredData = getFilteredPreviewData();
+        
+        if (filteredData.length === 0) {
+            toast.error('No data available to export after exclusions');
+            return;
+        }
+
         try {
+            // Temporarily replace previewData with filtered data for export
+            const originalPreviewData = previewData;
+            setPreviewData(filteredData);
+            
             // Use the existing client-side Excel export functionality
             await exportReport('excel');
+            
+            // Restore original data
+            setPreviewData(originalPreviewData);
         } catch (error) {
             console.error('Regular export failed:', error);
             toast.error('Export failed. Please try again.');
+            
+            // Restore original data on error as well
+            setPreviewData(previewData);
         }
     };
 
     const handleGroupedExport = async () => {
+        handleExportWithExclusion('grouped');
+    };
+
+    // Perform the actual grouped export
+    const performGroupedExport = async () => {
         if (!selectedTemplate) {
             toast.error('No template selected for export');
             return;
@@ -6830,9 +7078,17 @@ const GenericReportImproved = ({
                 groupHeaderRow[0] = `${groupDisplayName}: ${group.groupDisplayName}`;
                 worksheetData.push(groupHeaderRow);
 
-                // Add data rows for this group
+                // Add data rows for this group (excluding excluded rows)
                 const allRows = [...group.rows, ...(group.emptyRows || [])];
-                allRows.forEach((row) => {
+                allRows.forEach((row, rowIndex) => {
+                    // Create a unique identifier for the row
+                    const rowId = row.id || `group-${groupIndex}-row-${rowIndex}`;
+                    
+                    // Skip excluded rows
+                    if (excludedRows.has(rowId)) {
+                        return;
+                    }
+                    
                     const dataRow = selectedColumns.map((column) =>
                         getCellValue(row, column)
                     );
@@ -6977,6 +7233,7 @@ const GenericReportImproved = ({
                         isGrouped: groupingConfig.enabled,
                         customCalculatedFields: customCalculatedFields,
                         customUrls: customUrls,
+                        unique: uniqueFieldConfig,
                     },
                 };
 
@@ -7400,7 +7657,7 @@ const GenericReportImproved = ({
                         className={`${styles.btn} ${styles.btnPrimary}`}
                         onClick={() => {
                             resetPagination();
-                            setHasAutoExecuted(false); // Reset flag for manual execution
+                            // Don't reset hasAutoExecuted to avoid triggering useEffect
                             executeReport();
                         }}
                         disabled={isLoading}
@@ -8597,6 +8854,123 @@ const GenericReportImproved = ({
                     </div>
                 </div>
             )}
+
+            {/* Row Exclusion Modal */}
+            {showRowExclusionModal && (
+                <div className={styles.modalOverlay}>
+                    <div className={styles.rowExclusionModal}>
+                        <div className={styles.modalHeader}>
+                            <h3>Select Rows to Exclude</h3>
+                            <p>Choose which rows you don't want to include in the export</p>
+                            <button
+                                className={styles.modalCloseButton}
+                                onClick={() => setShowRowExclusionModal(false)}
+                            >
+                                ✕
+                            </button>
+                        </div>
+
+                        <div className={styles.modalBody}>
+                            <div className={styles.rowExclusionList}>
+                                {(exportType === 'grouped' && groupedData?.groupedData?.groups ? 
+                                    groupedData.groupedData.groups.flatMap((group, groupIndex) =>
+                                        [...group.rows, ...(group.emptyRows || [])].map((row, rowIndex) => {
+                                            const rowId = row.id || `group-${groupIndex}-row-${rowIndex}`;
+                                            const isExcluded = excludedRows.has(rowId);
+                                            
+                                            return (
+                                                <label key={rowId} className={styles.rowExclusionItem}>
+                                                    <input
+                                                        type="checkbox"
+                                                        checked={isExcluded}
+                                                        onChange={(e) => {
+                                                            const newExcludedRows = new Set(excludedRows);
+                                                            if (e.target.checked) {
+                                                                newExcludedRows.add(rowId);
+                                                            } else {
+                                                                newExcludedRows.delete(rowId);
+                                                            }
+                                                            setExcludedRows(newExcludedRows);
+                                                        }}
+                                                    />
+                                                    <div className={styles.rowPreview}>
+                                                        {selectedColumns.slice(0, 3).map((col) => {
+                                                            const value = row[col.displayName] || row[col.column] || row[`${col.table}_${col.column}`] || '';
+                                                            return (
+                                                                <span key={col.column} className={styles.rowValue}>
+                                                                    {String(value).substring(0, 50)}{String(value).length > 50 ? '...' : ''}
+                                                                </span>
+                                                            );
+                                                        })}
+                                                    </div>
+                                                </label>
+                                            );
+                                        })
+                                    )
+                                    :
+                                    previewData.map((row, index) => {
+                                        const rowId = row.id || `preview-row-${index}`;
+                                        const isExcluded = excludedRows.has(rowId);
+                                        
+                                        return (
+                                            <label key={rowId} className={styles.rowExclusionItem}>
+                                                <input
+                                                    type="checkbox"
+                                                    checked={isExcluded}
+                                                    onChange={(e) => {
+                                                        const newExcludedRows = new Set(excludedRows);
+                                                        if (e.target.checked) {
+                                                            newExcludedRows.add(rowId);
+                                                        } else {
+                                                            newExcludedRows.delete(rowId);
+                                                        }
+                                                        setExcludedRows(newExcludedRows);
+                                                    }}
+                                                />
+                                                <div className={styles.rowPreview}>
+                                                    {selectedColumns.slice(0, 3).map((col) => {
+                                                        const value = row[col.displayName] || row[col.column] || row[`${col.table}_${col.column}`] || '';
+                                                        return (
+                                                            <span key={col.column} className={styles.rowValue}>
+                                                                {String(value).substring(0, 50)}{String(value).length > 50 ? '...' : ''}
+                                                            </span>
+                                                        );
+                                                    })}
+                                                </div>
+                                            </label>
+                                        );
+                                    })
+                                )}
+                            </div>
+                            
+                            <div className={styles.exclusionSummary}>
+                                <p>
+                                    {excludedRows.size} of {(exportType === 'grouped' && groupedData?.groupedData?.groups ? 
+                                        groupedData.groupedData.groups.reduce((total, group) => total + group.rows.length + (group.emptyRows?.length || 0), 0)
+                                        : previewData.length)} rows will be excluded from export
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className={styles.modalFooter}>
+                            <button
+                                className={styles.cancelButton}
+                                onClick={() => setShowRowExclusionModal(false)}
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                className={styles.confirmButton}
+                                onClick={confirmExportWithExclusion}
+                            >
+                                Export ({(exportType === 'grouped' && groupedData?.groupedData?.groups ? 
+                                    groupedData.groupedData.groups.reduce((total, group) => total + group.rows.length + (group.emptyRows?.length || 0), 0) - excludedRows.size
+                                    : previewData.length - excludedRows.size)} rows)
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };