@visns-studio/visns-components 5.15.16 → 5.15.18

package/package.json

@@ -7,7 +7,7 @@
         "@fontsource/barlow": "^5.2.6",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
-        "@mapbox/mapbox-gl-geocoder": "^5.1.0",
+        "@mapbox/mapbox-gl-geocoder": "^5.1.1",
         "@nivo/bar": "^0.99.0",
         "@nivo/core": "^0.99.0",
         "@nivo/line": "^0.99.0",
@@ -24,7 +24,7 @@
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
         "browser-image-compression": "^2.0.2",
-        "dayjs": "^1.11.13",
+        "dayjs": "^1.11.14",
         "fabric": "^6.7.1",
         "file-saver": "^2.0.5",
         "framer-motion": "^12.23.12",
@@ -32,7 +32,7 @@
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
-        "lucide-react": "^0.541.0",
+        "lucide-react": "^0.542.0",
         "mapbox-gl": "^3.14.0",
         "moment": "^2.30.1",
         "motion": "^12.23.12",
@@ -64,7 +64,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.4",
+        "sweetalert2": "^11.22.5",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
@@ -86,7 +86,7 @@
         "mini-css-extract-plugin": "^2.9.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.90.0",
+        "sass": "^1.91.0",
         "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.16",
+    "version": "5.15.18",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/generic/GenericReport.jsx

@@ -287,6 +287,45 @@ const formatName = (name) => {
         .join(' ');
 };
 
+// Enhanced function to format pivot field names with context from end table
+const formatPivotFieldName = (fieldName, pivotTableName, joins, definition = null) => {
+    if (!fieldName || !pivotTableName) return formatName(fieldName);
+    
+    // Find if this pivot table has an associated end table through joins
+    const pivotJoin = joins.find(join => 
+        join.targetTable === pivotTableName && join.autoIncludeEndTable
+    );
+    
+    if (pivotJoin && pivotJoin.endTable) {
+        // Get a user-friendly name for the end table
+        const endTableDisplay = getTableDisplayName(pivotJoin.endTable, definition);
+        
+        // Create contextual field names for common pivot fields
+        const contextualMappings = {
+            'area': `${endTableDisplay} Area`,
+            'duration': `${endTableDisplay} Duration`, 
+            'qty': `${endTableDisplay} Quantity`,
+            'quantity': `${endTableDisplay} Quantity`,
+            'start_date': `${endTableDisplay} Start Date`,
+            'end_date': `${endTableDisplay} End Date`,
+            'detail': `${endTableDisplay} Details`,
+            'notes': `${endTableDisplay} Notes`,
+            'status': `${endTableDisplay} Status`,
+        };
+        
+        const lowercaseField = fieldName.toLowerCase();
+        if (contextualMappings[lowercaseField]) {
+            return contextualMappings[lowercaseField];
+        }
+        
+        // For other fields, just prefix with end table name
+        return `${endTableDisplay} ${formatName(fieldName)}`;
+    }
+    
+    // Fallback to regular formatting
+    return formatName(fieldName);
+};
+
 // User-friendly terminology mapping
 const friendlyTerms = {
     // Database terms
@@ -1513,10 +1552,49 @@ const GenericReportImproved = ({
 
     // Start again function to reset wizard to home
     const startAgain = () => {
-        // Reset all state
+        console.log('🔄 [DEBUG] StartAgain called - BEFORE reset:', {
+            selectedTemplate: selectedTemplate?.id,
+            customUrls: customUrls,
+            groupingConfig: groupingConfig,
+        });
+
+        // Reset wizard state
+        setCurrentWizardStep(0);
+        setShowTemplates(true);
+        setShowBusinessTemplates(false);
+        
+        // CRITICAL FIX: Reset template selection
+        setSelectedTemplate(null);
+        
+        // Reset database schema state
         setSelectedTable(null);
+        setTableColumns([]);
+        setAvailableTables([]);
+        setDetectedJoins({});
+        setIsLoadingDetectedJoins({});
+        
+        // Reset report configuration
         setSelectedColumns([]);
         setJoins([]);
+        setReportName('');
+        setIsPublic(false);
+        setLoadedReportId(null);
+        
+        // Reset manual relationship state
+        setShowManualJoinForm(false);
+        setManualJoin({
+            sourceTable: '',
+            targetTable: '',
+            sourceColumn: '',
+            targetColumn: '',
+            joinType: 'INNER JOIN',
+        });
+        setManualJoinColumns({
+            source: [],
+            target: [],
+        });
+        
+        // Reset sorting and filtering
         setFilterCriteria({
             operator: 'AND',
             groups: [
@@ -1529,16 +1607,68 @@ const GenericReportImproved = ({
         setSortCriteria([]);
         setShowSortingSection(false);
         setShowFilteringSection(false);
+        setShowSelectedFields(false);
+        
+        // CRITICAL FIX: Reset grouping configuration
+        setGroupingConfig({
+            enabled: false,
+            groupByField: '',
+            groupDisplayName: '',
+            sortBy: '',
+            sortDirection: 'asc',
+            rowsPerGroup: 10,
+            showEmptyRows: false,
+            showGroupTotals: false,
+            expandable: true,
+            groupHeaderStyle: 'primary',
+            emptyRowStyle: 'light',
+        });
+        
+        // CRITICAL FIX: Reset custom URLs
+        setCustomUrls({
+            executeUrl: '',
+            exportUrl: '',
+        });
+        
+        // Reset report execution and preview
         setPreviewData([]);
+        setGroupedData(null);
         setGridColumns([]);
-        setReportName('');
-        setIsPublic(false);
-        setLoadedReportId(null); // Reset loaded report ID
-        setCurrentWizardStep(0);
-        setShowTemplates(true);
-        setTableColumns([]);
-        setAvailableTables([]);
-        setHasAutoExecuted(false); // Reset auto-execute flag
+        setTotalResults(0);
+        setHasAutoExecuted(false);
+        
+        // Reset pagination
+        setCurrentPage(1);
+        setPageSize(10);
+        setTotalPages(0);
+        setTotalCount(0);
+        
+        // Reset calculated fields
+        setCustomCalculatedFields([]);
+        setCalculatedFieldForm({
+            displayName: '',
+            formula: '',
+            type: 'decimal',
+        });
+        setShowCalculatedFieldModal(false);
+        
+        // Reset unique fields and exclusions
+        setUniqueFieldConfig({
+            enabled: false,
+            selectedField: '',
+        });
+        setExcludedRows(new Set());
+        setShowRowExclusionModal(false);
+        setExportType('regular');
+        
+        // Reset UI state
+        setShowHiddenFields(false);
+
+        console.log('✅ [DEBUG] StartAgain completed - AFTER reset:', {
+            selectedTemplate: null,
+            customUrls: { executeUrl: '', exportUrl: '' },
+            groupingConfig: { enabled: false },
+        });
 
         toast.info(
             'Report builder reset. You can start creating a new report.'
@@ -1851,11 +1981,32 @@ const GenericReportImproved = ({
     // Add join relationship
     const addJoin = (joinData) => {
         const newJoin = { ...joinData, availableColumns: [] };
-        setJoins([...joins, newJoin]);
+        const joinsToAdd = [newJoin];
+        
+        // If this is a pivot relationship with auto-include end table, add both joins automatically
+        if (joinData.autoIncludeEndTable && joinData.secondJoin) {
+            const endTableJoin = { 
+                ...joinData.secondJoin, 
+                availableColumns: [],
+                isAutoIncludedEndTable: true 
+            };
+            joinsToAdd.push(endTableJoin);
+            
+            // Add end table to available tables list
+            if (!availableTables.includes(joinData.secondJoin.targetTable)) {
+                setAvailableTables(prev => [...prev, joinData.secondJoin.targetTable]);
+                // Fetch columns for the end table as well
+                setTimeout(() => {
+                    fetchJoinColumns(joinData.secondJoin.targetTable, joins.length + 1);
+                }, 100);
+            }
+        }
+        
+        setJoins([...joins, ...joinsToAdd]);
 
-        // Fetch columns for the joined table if not already available
+        // Fetch columns for the pivot table if not already available
         if (!availableTables.includes(joinData.targetTable)) {
-            setAvailableTables([...availableTables, joinData.targetTable]);
+            setAvailableTables(prev => [...prev, joinData.targetTable]);
             fetchJoinColumns(joinData.targetTable, joins.length); // Use current joins.length as index
         }
     };
@@ -2336,6 +2487,13 @@ const GenericReportImproved = ({
                         }
                     } else {
                         // For predefined templates, use the existing approach
+                        console.log('🚨 [DEBUG] Using predefined template approach:', {
+                            selectedTemplate: selectedTemplate,
+                            selectedTemplateId: selectedTemplate?.id,
+                            fallbackId: 'utilization_planning',
+                            finalTemplateId: selectedTemplate?.id || 'utilization_planning',
+                        });
+                        
                         payload = {
                             template_id:
                                 selectedTemplate?.id || 'utilization_planning',
@@ -2756,7 +2914,7 @@ const GenericReportImproved = ({
                                 lowerKey.includes('disabled')
                             ) {
                                 // Check if values look like boolean/status values
-                                const sampleValues = firstPageResult.data
+                                const sampleValues = dataToProcess
                                     .slice(0, 5)
                                     .map((row) => row[key]);
                                 const hasStatusValues = sampleValues.some(
@@ -2814,7 +2972,15 @@ const GenericReportImproved = ({
                     setGridColumns(dynamicColumns);
                 } else {
                     // Fallback to selected columns if no data
-                    const columns = selectedColumns.map((col) => {
+                    console.log('🔧 [DEBUG] Creating fallback columns from selectedColumns:', selectedColumns);
+                    if (!Array.isArray(selectedColumns) || selectedColumns.length === 0) {
+                        console.warn('⚠️ selectedColumns is not a valid array:', selectedColumns);
+                        setGridColumns([]);
+                        return;
+                    }
+                    
+                    const columns = selectedColumns.map((col, index) => {
+                        try {
                         // Find column type from table columns with enhanced detection
                         let columnType = 'varchar';
                         const tableColumn = tableColumns.find(
@@ -2852,37 +3018,52 @@ const GenericReportImproved = ({
 
                         return {
                             name:
-                                col.displayName || `${col.table}.${col.column}`,
-                            header: col.displayName || formatName(col.column),
+                                col.displayName || `${col.table || 'unknown'}.${col.column}`,
+                            header: col.displayName || formatName(col.column || 'Unknown Column'),
                             defaultFlex: 1,
                             minWidth: 100,
                             render: ({ value }) => {
-                                const formattedValue = formatSmartValue(
-                                    value,
-                                    col.column,
-                                    columnType
-                                );
-
-                                // For JSON content, wrap in a container that allows full height expansion
-                                if (isJsonValue(value)) {
-                                    return (
-                                        <div
-                                            style={{
-                                                whiteSpace: 'normal',
-                                                wordWrap: 'break-word',
-                                                lineHeight: '1.4',
-                                                padding: '4px 0',
-                                                width: '100%',
-                                            }}
-                                        >
-                                            {formattedValue}
-                                        </div>
+                                try {
+                                    const formattedValue = formatSmartValue(
+                                        value,
+                                        col.column,
+                                        columnType
                                     );
-                                }
 
-                                return formattedValue;
+                                    // For JSON content, wrap in a container that allows full height expansion
+                                    if (isJsonValue(value)) {
+                                        return (
+                                            <div
+                                                style={{
+                                                    whiteSpace: 'normal',
+                                                    wordWrap: 'break-word',
+                                                    lineHeight: '1.4',
+                                                    padding: '4px 0',
+                                                    width: '100%',
+                                                }}
+                                            >
+                                                {formattedValue}
+                                            </div>
+                                        );
+                                    }
+
+                                    return formattedValue;
+                                } catch (renderError) {
+                                    console.warn('🚨 Cell render error:', renderError, 'for value:', value);
+                                    return String(value || '');
+                                }
                             },
                         };
+                        } catch (colError) {
+                            console.warn('🚨 Column mapping error:', colError, 'for column:', col);
+                            return {
+                                name: `error_col_${index}`,
+                                header: 'Error Column',
+                                defaultFlex: 1,
+                                minWidth: 100,
+                                render: () => 'Error',
+                            };
+                        }
                     });
                     setGridColumns(columns);
                 }
@@ -2899,8 +3080,24 @@ const GenericReportImproved = ({
                 typeof fetchedDataCount
             );
         } catch (error) {
-            toast.error('Failed to execute report');
+            console.group('🚨 [ERROR] executeReport failed');
             console.error('Error executing report:', error);
+            console.log('Error name:', error.name);
+            console.log('Error message:', error.message);
+            console.log('Error stack:', error.stack);
+            console.log('Current state at error:', {
+                selectedTable,
+                selectedColumns: selectedColumns.length,
+                hasGrouping: selectedTemplate?.grouping?.enabled || groupingConfig.enabled,
+                currentPage,
+                pageSize,
+            });
+            console.groupEnd();
+            
+            // Only show toast error for actual failures, not for successful pagination
+            if (!error.message?.includes('successful')) {
+                toast.error(`Failed to execute report: ${error.message || 'Unknown error'}`);
+            }
         } finally {
             setIsLoading(false);
         }
@@ -5142,6 +5339,11 @@ const GenericReportImproved = ({
         joins.forEach((join) => {
             if (join.availableColumns) {
                 join.availableColumns.forEach((col) => {
+                    // Use enhanced pivot field naming for pivot tables
+                    const columnName = join.isPivotRelationship 
+                        ? formatPivotFieldName(col.name, join.targetTable, joins, definition)
+                        : formatName(col.name);
+                        
                     allColumns.push({
                         table: join.targetTable,
                         tableName: getTableDisplayName(
@@ -5149,7 +5351,7 @@ const GenericReportImproved = ({
                             definition
                         ),
                         column: col.name,
-                        columnName: formatName(col.name),
+                        columnName: columnName,
                         type: col.type,
                     });
                 });
@@ -5204,6 +5406,11 @@ const GenericReportImproved = ({
             if (join.availableColumns) {
                 join.availableColumns.forEach((col) => {
                     if (!shouldHideField(col.name, col.type)) {
+                        // Use enhanced pivot field naming for pivot tables
+                        const columnName = join.isPivotRelationship 
+                            ? formatPivotFieldName(col.name, join.targetTable, joins, definition)
+                            : formatName(col.name);
+                            
                         allColumns.push({
                             table: join.targetTable,
                             tableName: getTableDisplayName(
@@ -5211,7 +5418,7 @@ const GenericReportImproved = ({
                                 definition
                             ),
                             column: col.name,
-                            columnName: formatName(col.name),
+                            columnName: columnName,
                             type: col.type,
                         });
                     }