@visns-studio/visns-components 6.1.4 → 6.1.5

package/src/components/generic/GenericReport.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import moment from 'moment';
@@ -34,6 +34,7 @@ import {
 } from 'lucide-react';
 import CustomFetch from '../Fetch';
 import Download from '../Download';
+import debugLog from '../utils/debugLog';
 import { saveAs } from 'file-saver';
 import * as XLSX from 'xlsx';
 import Swal from 'sweetalert2';
@@ -287,6 +288,31 @@ const formatName = (name) => {
         .join(' ');
 };
 
+// A saved report's `detail` arrives as either a JSON string or an object,
+// and older rows can hold malformed JSON — never let that reach the renderer.
+const parseReportDetail = (detail) => {
+    if (!detail) return null;
+    if (typeof detail !== 'string') {
+        return typeof detail === 'object' ? detail : null;
+    }
+    try {
+        const parsed = JSON.parse(detail);
+        return parsed && typeof parsed === 'object' ? parsed : null;
+    } catch (error) {
+        debugLog('Could not parse saved report detail:', error);
+        return null;
+    }
+};
+
+// Escape values interpolated into SweetAlert HTML strings
+const escapeHtml = (value) =>
+    String(value ?? '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+
 // 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);
@@ -747,8 +773,9 @@ const formatSmartValue = (value, columnName, columnType) => {
 
 // Smart field filtering - hide technical fields by default
 const shouldHideField = (fieldName, fieldType) => {
-    const name = fieldName.toLowerCase();
-    const type = fieldType.toLowerCase();
+    if (!fieldName) return false;
+    const name = String(fieldName).toLowerCase();
+    const type = String(fieldType || '').toLowerCase();
 
     // Hide foreign keys and primary key IDs (confusing for non-dev users)
     if (name.endsWith('_id') || name === 'id') return true;
@@ -828,9 +855,10 @@ const categorizeFields = (columns, showHiddenFields = false) => {
         other: [],
     };
 
-    columns.forEach((column) => {
-        const name = column.name.toLowerCase();
-        const type = column.type.toLowerCase();
+    (columns || []).forEach((column) => {
+        if (!column || !column.name) return;
+        const name = String(column.name).toLowerCase();
+        const type = String(column.type || '').toLowerCase();
 
         // Check if field should be hidden
         if (shouldHideField(column.name, column.type)) {
@@ -1022,8 +1050,14 @@ const GenericReportImproved = ({
     const [selectedTable, setSelectedTable] = useState(null);
     const [tableColumns, setTableColumns] = useState([]);
     const [isLoadingTables, setIsLoadingTables] = useState(false);
+    const [isLoadingColumns, setIsLoadingColumns] = useState(false);
     const [isLoadingJoinColumns, setIsLoadingJoinColumns] = useState(false);
 
+    // Human-readable failure messages per fetch step (null = no failure)
+    const [tablesError, setTablesError] = useState(null);
+    const [columnsError, setColumnsError] = useState(null);
+    const [reportsError, setReportsError] = useState(null);
+
     // State for report configuration
     const [selectedColumns, setSelectedColumns] = useState([]);
     const [availableTables, setAvailableTables] = useState([]);
@@ -1126,11 +1160,7 @@ const GenericReportImproved = ({
         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');
@@ -1509,11 +1539,46 @@ const GenericReportImproved = ({
         hasAutoExecuted,
     ]);
 
+    // Escape closes whichever modal is open
+    useEffect(() => {
+        if (!showCalculatedFieldModal && !showRowExclusionModal) return undefined;
+
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Escape') return;
+            if (showCalculatedFieldModal) {
+                handleCalculatedFieldCancel();
+            } else {
+                setShowRowExclusionModal(false);
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [showCalculatedFieldModal, showRowExclusionModal]);
+
+    // Move focus into a modal when it opens so keyboard users start inside it
+    const calculatedFieldModalRef = React.useRef(null);
+    const rowExclusionModalRef = React.useRef(null);
+
+    useEffect(() => {
+        if (showCalculatedFieldModal) {
+            calculatedFieldModalRef.current?.focus();
+        }
+    }, [showCalculatedFieldModal]);
+
+    useEffect(() => {
+        if (showRowExclusionModal) {
+            rowExclusionModalRef.current?.focus();
+        }
+    }, [showRowExclusionModal]);
+
     // Delete saved report
     const deleteReport = async (reportId, reportLabel) => {
         const result = await Swal.fire({
             title: 'Delete Report',
-            html: `Are you sure you want to delete "<strong>${reportLabel}</strong>"?<br><br>This action cannot be undone.`,
+            html: `Are you sure you want to delete "<strong>${escapeHtml(
+                reportLabel
+            )}</strong>"?<br><br>This action cannot be undone.`,
             icon: 'warning',
             showCancelButton: true,
             confirmButtonText: 'Yes, Delete',
@@ -1545,18 +1610,13 @@ const GenericReportImproved = ({
                 }
             } catch (error) {
                 toast.error('Failed to delete report');
-                console.error('Delete error:', error);
+                debugLog('Delete error:', error);
             }
         }
     };
 
     // Start again function to reset wizard to home
     const startAgain = () => {
-        console.log('🔄 [DEBUG] StartAgain called - BEFORE reset:', {
-            selectedTemplate: selectedTemplate?.id,
-            customUrls: customUrls,
-            groupingConfig: groupingConfig,
-        });
 
         // Reset wizard state
         setCurrentWizardStep(0);
@@ -1664,12 +1724,6 @@ const GenericReportImproved = ({
         // 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.'
         );
@@ -1711,12 +1765,16 @@ const GenericReportImproved = ({
     // Fetch database tables from the API
     const fetchDatabaseTables = async () => {
         if (!tableUrl) {
-            console.warn('No tableUrl provided to fetch database tables');
+            debugLog('No tableUrl provided to fetch database tables');
             setIsLoadingTables(false);
+            setTablesError(
+                'No data source endpoint is configured for this report builder.'
+            );
             return;
         }
 
         setIsLoadingTables(true);
+        setTablesError(null);
 
         // List of tables to hide from the report builder
         const hiddenTables = [
@@ -1738,6 +1796,7 @@ const GenericReportImproved = ({
             const result = await CustomFetch(tableUrl, 'POST', {});
 
             if (result.error) {
+                setTablesError(result.error);
                 toast.error(result.error);
             } else {
                 // Handle response format like the working advanced mode
@@ -1746,7 +1805,10 @@ const GenericReportImproved = ({
 
                 // Ensure tableData is an array
                 if (!Array.isArray(tableData)) {
-                    console.error('Unexpected table data format:', tableData);
+                    debugLog('Unexpected table data format:', tableData);
+                    setTablesError(
+                        'The data source list came back in an unexpected format.'
+                    );
                     toast.error('Unexpected response format from table API');
                     return;
                 }
@@ -1755,8 +1817,9 @@ const GenericReportImproved = ({
                 let filteredTables = tableData
                     .filter((table) => {
                         const tableName =
-                            typeof table === 'string' ? table : table.name;
+                            typeof table === 'string' ? table : table?.name;
                         return (
+                            typeof tableName === 'string' &&
                             !hiddenTables.includes(tableName) &&
                             !tableName.includes('_')
                         );
@@ -1786,16 +1849,18 @@ const GenericReportImproved = ({
                 // Sort alphabetically
                 filteredTables.sort((a, b) => a.name.localeCompare(b.name));
 
-                console.log('Loaded tables:', filteredTables);
                 setTables(filteredTables);
 
                 if (filteredTables.length === 0) {
-                    console.warn('No tables available after filtering');
+                    debugLog('No tables available after filtering');
                 }
             }
         } catch (error) {
+            setTablesError(
+                'We could not load the available data sources. Please try again.'
+            );
             toast.error('Failed to load database tables');
-            console.error('Error fetching tables:', error);
+            debugLog('Error fetching tables:', error);
         } finally {
             setIsLoadingTables(false);
         }
@@ -1805,16 +1870,16 @@ const GenericReportImproved = ({
     const fetchTableColumns = async (tableName) => {
         if (!tableName || !columnUrl) return;
 
-        setIsLoadingTables(true);
+        setIsLoadingColumns(true);
+        setColumnsError(null);
 
         try {
             const result = await CustomFetch(columnUrl, 'POST', {
                 table: tableName,
             });
 
-            console.log('Column API Response:', result); // Debug log
-
             if (result.error) {
+                setColumnsError(result.error);
                 toast.error(result.error);
             } else {
                 // Handle the specific response format from getTableColumns (like GenericReport)
@@ -1839,23 +1904,28 @@ const GenericReportImproved = ({
 
                 if (Array.isArray(columnsData) && columnsData.length > 0) {
                     setTableColumns(columnsData);
-                    console.log('Loaded columns:', columnsData);
 
                     // Note: Auto-selection of columns removed since user should choose relationships first,
                     // then select columns in step 3
                 } else {
-                    console.error('Invalid columns data format:', result);
+                    debugLog('Invalid columns data format:', result);
                     setTableColumns([]);
+                    setColumnsError(
+                        'No fields were returned for this data source.'
+                    );
                     toast.error(
                         'Failed to load columns. Please check the table configuration.'
                     );
                 }
             }
         } catch (error) {
+            setColumnsError(
+                'We could not load the fields for this data source. Please try again.'
+            );
             toast.error('Failed to load table columns');
-            console.error('Error fetching columns:', error);
+            debugLog('Error fetching columns:', error);
         } finally {
-            setIsLoadingTables(false);
+            setIsLoadingColumns(false);
         }
     };
 
@@ -1864,22 +1934,29 @@ const GenericReportImproved = ({
         if (!reportsUrl) return;
 
         setIsLoadingReports(true);
+        setReportsError(null);
 
         try {
             const result = await CustomFetch(reportsUrl, 'GET');
 
             if (result.error) {
+                setReportsError(result.error);
                 toast.error(result.error);
-            } else if (result.data?.success && result.data?.data) {
-                setSavedReports(result.data.data);
-            } else if (result.reports) {
-                setSavedReports(result.reports);
-            } else if (result.data) {
-                setSavedReports(result.data);
+                return;
             }
+
+            const reportList =
+                (result.data?.success && result.data?.data) ||
+                result.reports ||
+                result.data;
+
+            setSavedReports(Array.isArray(reportList) ? reportList : []);
         } catch (error) {
+            setReportsError(
+                'We could not load your saved reports. Please try again.'
+            );
             toast.error('Failed to load saved reports');
-            console.error('Error fetching reports:', error);
+            debugLog('Error fetching reports:', error);
         } finally {
             setIsLoadingReports(false);
         }
@@ -1888,23 +1965,20 @@ const GenericReportImproved = ({
     // Fetch detected joins for a table
     const fetchDetectedJoins = async (tableName) => {
         if (!tableName || !detectedJoinsUrl) {
-            console.warn(
+            debugLog(
                 'Missing tableName or detectedJoinsUrl for fetchDetectedJoins'
             );
             return;
         }
 
-        setIsLoadingDetectedJoins({
-            ...isLoadingDetectedJoins,
-            [tableName]: true,
-        });
+        setIsLoadingDetectedJoins((prev) => ({ ...prev, [tableName]: true }));
 
         try {
             const result = await CustomFetch(detectedJoinsUrl, 'POST', {
                 table: tableName,
             });
 
-            console.log('Detected joins API response:', result); // Debug log
+             // Debug log
 
             if (result.error) {
                 toast.error(result.error);
@@ -1944,37 +2018,26 @@ const GenericReportImproved = ({
                         );
                     });
 
-                    console.log(
-                        `Found ${filteredJoins.length} detected joins for ${tableName}:`,
-                        filteredJoins
-                    );
-
-                    setDetectedJoins({
-                        ...detectedJoins,
+                    setDetectedJoins((prev) => ({
+                        ...prev,
                         [tableName]: filteredJoins,
-                    });
+                    }));
                 } else {
-                    console.warn(
+                    debugLog(
                         'No valid detected joins found or invalid response format:',
                         result
                     );
-                    setDetectedJoins({
-                        ...detectedJoins,
-                        [tableName]: [],
-                    });
+                    setDetectedJoins((prev) => ({ ...prev, [tableName]: [] }));
                 }
             }
         } catch (error) {
-            console.error('Error fetching detected joins:', error);
-            setDetectedJoins({
-                ...detectedJoins,
-                [tableName]: [],
-            });
+            debugLog('Error fetching detected joins:', error);
+            setDetectedJoins((prev) => ({ ...prev, [tableName]: [] }));
         } finally {
-            setIsLoadingDetectedJoins({
-                ...isLoadingDetectedJoins,
+            setIsLoadingDetectedJoins((prev) => ({
+                ...prev,
                 [tableName]: false,
-            });
+            }));
         }
     };
 
@@ -2014,7 +2077,7 @@ const GenericReportImproved = ({
     // Fetch columns for a joined table (similar to GenericReport)
     const fetchJoinColumns = async (tableName, joinIndex) => {
         if (!tableName || !columnUrl) {
-            console.warn('Missing tableName or columnUrl for fetchJoinColumns');
+            debugLog('Missing tableName or columnUrl for fetchJoinColumns');
             return;
         }
 
@@ -2055,11 +2118,8 @@ const GenericReportImproved = ({
                         return updatedJoins;
                     });
 
-                    console.log(
-                        `Loaded ${columnsData.length} columns for joined table ${tableName}`
-                    );
                 } else {
-                    console.error(
+                    debugLog(
                         'Invalid columns data format for joined table:',
                         result
                     );
@@ -2070,7 +2130,7 @@ const GenericReportImproved = ({
             }
         } catch (error) {
             toast.error(`Failed to load columns for joined table ${tableName}`);
-            console.error('Error fetching join columns:', error);
+            debugLog('Error fetching join columns:', error);
         } finally {
             setIsLoadingJoinColumns(false);
         }
@@ -2106,13 +2166,8 @@ const GenericReportImproved = ({
                 table: tableName,
             });
 
-            console.log(
-                `Manual join columns API response for ${tableName}:`,
-                result
-            );
-
             if (result.error) {
-                console.error(`Error fetching ${type} columns:`, result.error);
+                debugLog(`Error fetching ${type} columns:`, result.error);
             } else {
                 // Handle the response format similar to fetchTableColumns
                 let columnsData = [];
@@ -2143,24 +2198,20 @@ const GenericReportImproved = ({
 
                 // Ensure columnsData is always an array
                 if (!Array.isArray(columnsData)) {
-                    console.error(
+                    debugLog(
                         `Invalid columns data format for ${type} table:`,
                         result
                     );
                     columnsData = [];
                 }
 
-                console.log(
-                    `Loaded ${columnsData.length} columns for ${type} table ${tableName}`
-                );
-
                 setManualJoinColumns((prev) => ({
                     ...prev,
                     [type]: columnsData,
                 }));
             }
         } catch (error) {
-            console.error(`Error fetching ${type} columns:`, error);
+            debugLog(`Error fetching ${type} columns:`, error);
             // Ensure state remains consistent even on error
             setManualJoinColumns((prev) => ({
                 ...prev,
@@ -2220,8 +2271,8 @@ const GenericReportImproved = ({
         setSelectedColumns([]);
         setJoins([]);
         setAvailableTables([tableName]);
-        fetchTableColumns(tableName);
-        fetchDetectedJoins(tableName);
+        // Columns and suggested joins are fetched by the selectedTable effect —
+        // calling them here as well doubled every request.
 
         goToNextStep(); // Go to relationships step
     };
@@ -2390,25 +2441,24 @@ const GenericReportImproved = ({
             };
 
             setFilterCriteria((prev) => {
-                const updatedCriteria = { ...prev };
+                const groups = prev?.groups?.length
+                    ? prev.groups
+                    : [{ operator: 'AND', filters: [] }];
 
-                // Ensure we have at least one group
-                if (
-                    !updatedCriteria.groups ||
-                    updatedCriteria.groups.length === 0
-                ) {
-                    updatedCriteria.groups = [
-                        {
-                            operator: 'AND',
-                            filters: [],
-                        },
-                    ];
-                }
-
-                // Add to first group
-                updatedCriteria.groups[0].filters.push(newFilterCriterion);
-
-                return updatedCriteria;
+                return {
+                    operator: prev?.operator || 'AND',
+                    groups: groups.map((group, index) =>
+                        index === 0
+                            ? {
+                                  ...group,
+                                  filters: [
+                                      ...(group.filters || []),
+                                      newFilterCriterion,
+                                  ],
+                              }
+                            : group
+                    ),
+                };
             });
 
             toast.success(`Applied filter: ${suggestion.title}`);
@@ -2437,22 +2487,6 @@ const GenericReportImproved = ({
                         selectedTemplate?.executeUrl ||
                         executeUrl;
 
-                    // Debug logging
-                    console.log('🔍 [DEBUG] Grouped Report Detected:', {
-                        selectedTemplate: selectedTemplate?.id,
-                        isDynamicTemplate,
-                        template,
-                        customExecuteUrl: customUrls.executeUrl,
-                        templateExecuteUrl: selectedTemplate?.executeUrl,
-                        defaultExecuteUrl: executeUrl,
-                        finalExecuteUrl: templateExecuteUrl,
-                        isGroupedReport,
-                        templateGroupingConfig: selectedTemplate?.grouping,
-                        customGroupingConfig: groupingConfig,
-                        usingCustomUrl: !!customUrls.executeUrl,
-                        usingTemplateExecuteUrl: !!selectedTemplate?.executeUrl,
-                    });
-
                     let payload;
 
                     if (isDynamicTemplate) {
@@ -2479,20 +2513,8 @@ const GenericReportImproved = ({
                             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
-                        console.log('🚨 [DEBUG] Using predefined template approach:', {
-                            selectedTemplate: selectedTemplate,
-                            selectedTemplateId: selectedTemplate?.id,
-                            fallbackId: 'utilization_planning',
-                            finalTemplateId: selectedTemplate?.id || 'utilization_planning',
-                        });
                         
                         payload = {
                             template_id:
@@ -2501,23 +2523,15 @@ const GenericReportImproved = ({
                         };
                     }
 
-                    console.log('🚀 [DEBUG] Sending grouped report request:', {
-                        url: templateExecuteUrl,
-                        method: 'POST',
-                        payload,
-                    });
-
                     const result = await CustomFetch(
                         templateExecuteUrl,
                         'POST',
                         payload
                     );
 
-                    console.log('📊 [DEBUG] Grouped report response:', result);
-
                     if (result.error) {
-                        console.error(
-                            '❌ Grouped report execution error:',
+                        debugLog(
+                            'Grouped report execution error:',
                             result.error
                         );
                         return { data: [], count: 0 };
@@ -2529,18 +2543,6 @@ 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,
@@ -2564,13 +2566,6 @@ const GenericReportImproved = ({
                             type: col.type,
                         };
 
-                        // Log calculated fields specifically
-                        if (col.isCalculated) {
-                            console.log(
-                                'Frontend sending calculated field:',
-                                column
-                            );
-                        }
 
                         return column;
                     }),
@@ -2586,16 +2581,6 @@ const GenericReportImproved = ({
                     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 = [
@@ -2619,16 +2604,6 @@ const GenericReportImproved = ({
                     selectedTemplate?.executeUrl ||
                     executeUrl;
 
-                console.log('🔍 [DEBUG] Regular Report API Call:', {
-                    selectedTemplate: selectedTemplate?.id,
-                    customExecuteUrl: customUrls.executeUrl,
-                    templateExecuteUrl: selectedTemplate?.executeUrl,
-                    defaultExecuteUrl: executeUrl,
-                    finalExecuteUrl,
-                    usingCustomUrl: !!customUrls.executeUrl,
-                    usingTemplateExecuteUrl: !!selectedTemplate?.executeUrl,
-                });
-
                 const result = await CustomFetch(
                     finalExecuteUrl,
                     'POST',
@@ -2636,7 +2611,7 @@ const GenericReportImproved = ({
                 );
 
                 if (result.error) {
-                    console.error('Report execution error:', result.error);
+                    debugLog('Report execution error:', result.error);
                     return { data: [], count: 0 };
                 } else if (result.data?.success) {
                     const fetchedData = result.data.data || [];
@@ -2647,20 +2622,13 @@ const GenericReportImproved = ({
                     setTotalCount(totalRecords);
                     setTotalResults(totalRecords);
 
-                    console.info(
-                        'Fetched data:',
-                        fetchedData.length,
-                        'of',
-                        totalRecords
-                    );
-
                     return { data: fetchedData, count: totalRecords };
                 } else {
-                    console.error('Unexpected response format:', result);
+                    debugLog('Unexpected response format:', result);
                     return { data: [], count: 0 };
                 }
             } catch (error) {
-                console.error('Error in dataSource:', error);
+                debugLog('Error in dataSource:', error);
                 return { data: [], count: 0 };
             }
         },
@@ -2678,20 +2646,11 @@ const GenericReportImproved = ({
     );
 
     // Execute report function for manual execution (creates grid columns)
-    const executeReport = async () => {
-        console.log('🎯 [DEBUG] executeReport called:', {
-            selectedTable,
-            selectedColumns: selectedColumns.length,
-            selectedTemplate: selectedTemplate?.id,
-            hasGrouping: selectedTemplate?.grouping?.enabled,
-            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);
+    const executeReport = async ({ page, size } = {}) => {
+        // Pagination handlers pass the page/size they just set: reading them from
+        // state here would use the value from the render that queued the update.
+        const pageToLoad = page || currentPage;
+        const sizeToLoad = size || pageSize;
 
         if (!selectedTable || selectedColumns.length === 0) {
             toast.warning(
@@ -2708,20 +2667,7 @@ const GenericReportImproved = ({
             const hasTemplateGrouping = selectedTemplate?.grouping?.enabled;
             const hasCustomGrouping = groupingConfig.enabled;
             const hasGrouping = hasTemplateGrouping || hasCustomGrouping;
-            let fetchedDataCount = 0;
-
-            console.log('📋 [DEBUG] Template analysis:', {
-                selectedTemplate,
-                hasTemplateGrouping,
-                hasCustomGrouping,
-                hasGrouping,
-                customGroupingConfig: groupingConfig,
-                templateGroupingConfig: selectedTemplate?.grouping,
-            });
-            console.log(
-                '🎯 [DEBUG] Initial fetchedDataCount:',
-                fetchedDataCount
-            );
+            let fetchedRows = [];
 
             if (hasGrouping) {
                 // Determine which grouping configuration to use
@@ -2753,27 +2699,16 @@ const GenericReportImproved = ({
                     };
                     effectiveGrouping = dynamicTemplate.grouping;
 
-                    console.log(
-                        '🏗️ [DEBUG] Created dynamic template for custom grouping:',
-                        dynamicTemplate
-                    );
                 } else if (hasCustomGrouping && !groupingConfig.groupByField) {
                     // Custom grouping enabled but no field selected - show error and fallback to regular report
                     toast.error(
                         'Please select a field to group by before executing the report.'
                     );
-                    console.log(
-                        '⚠️ [DEBUG] Custom grouping enabled but no groupByField selected'
-                    );
                     setIsLoading(false);
                     return;
                 } else {
                     // Use existing template grouping
                     effectiveGrouping = selectedTemplate.grouping;
-                    console.log(
-                        '📋 [DEBUG] Using template grouping:',
-                        effectiveGrouping
-                    );
                 }
 
                 // For grouped reports, fetch data with reasonable limit
@@ -2786,76 +2721,48 @@ const GenericReportImproved = ({
                     template: dynamicTemplate, // Pass dynamic template if created
                 });
 
-                console.log('🎯 [DEBUG] Full API Response:', groupedResult);
-                console.log(
-                    '🎯 [DEBUG] groupedResult.data:',
-                    groupedResult.data
-                );
-                console.log(
-                    '🎯 [DEBUG] groupedResult.data.grouped:',
-                    groupedResult.data?.grouped
-                );
-                console.log(
-                    '🎯 [DEBUG] groupedResult.data.groupedData:',
-                    groupedResult.data?.groupedData
-                );
-
                 if (
                     groupedResult.data?.grouped &&
                     groupedResult.data?.groupedData?.groups
                 ) {
-                    console.log('✅ Processing grouped report');
                     setGroupedData(groupedResult.data); // Store entire response with grouped flag
                     setPreviewData([]); // Clear regular preview data
-                    // Get the count from the fetched grouped data
-                    console.log(
-                        '🎯 [DEBUG] Before assignment - groupedResult.data.groupedData.totalRecords:',
-                        groupedResult.data.groupedData?.totalRecords
-                    );
-                    fetchedDataCount =
+
+                    // Keep the record counters in step with the grouped result
+                    const groupedTotal =
                         groupedResult.data.groupedData?.totalRecords || 0;
-                    console.log(
-                        '🎯 [DEBUG] After assignment - fetchedDataCount:',
-                        fetchedDataCount
-                    );
-                    console.log('🔢 [DEBUG] Grouped data count:', {
-                        totalRecords:
-                            groupedResult.data.groupedData?.totalRecords,
-                        fetchedDataCount,
-                        hasGroups: !!groupedResult.data.groupedData?.groups,
-                    });
+                    setTotalResults(groupedTotal);
+                    setTotalCount(groupedTotal);
                 } else {
                     // Fallback to regular display if server doesn't support grouping
-                    console.log('⚠️ Fallback to regular display');
-                    const fallbackData = groupedResult.data?.data || [];
-                    console.log(
-                        '🎯 [DEBUG] Fallback data length:',
-                        fallbackData.length
-                    );
+                    const fallbackData = Array.isArray(groupedResult.data?.data)
+                        ? groupedResult.data.data
+                        : [];
+                    fetchedRows = fallbackData;
                     setPreviewData(fallbackData);
-                    fetchedDataCount = fallbackData.length;
+                    setTotalResults(fallbackData.length);
+                    setTotalCount(fallbackData.length);
                 }
             } else {
                 // Regular non-grouped report
                 const currentPageResult = await dataSource({
-                    skip: (currentPage - 1) * pageSize,
-                    limit: pageSize,
+                    skip: (pageToLoad - 1) * sizeToLoad,
+                    limit: sizeToLoad,
                     sortInfo: null,
                     filterValue: null,
                 });
 
-                if (
-                    currentPageResult.data &&
-                    currentPageResult.data.length > 0
-                ) {
-                    setPreviewData(currentPageResult.data);
-                    fetchedDataCount = currentPageResult.data.length;
-                }
+                fetchedRows = Array.isArray(currentPageResult.data)
+                    ? currentPageResult.data
+                    : [];
+                setPreviewData(fetchedRows);
             }
 
             // Create grid columns for regular reports only
             if (!hasGrouping) {
-                const dataToProcess = previewData.length > 0 ? previewData : [];
+                // Use the rows we just fetched — previewData still holds the
+                // previous render's value at this point.
+                const dataToProcess = fetchedRows;
 
                 if (dataToProcess.length > 0) {
                     // Create grid columns dynamically from actual data with smart formatting
@@ -2970,15 +2877,17 @@ const GenericReportImproved = ({
                         };
                     });
                     setGridColumns(dynamicColumns);
+                } else if (
+                    !Array.isArray(selectedColumns) ||
+                    selectedColumns.length === 0
+                ) {
+                    debugLog(
+                        'selectedColumns is not a valid array:',
+                        selectedColumns
+                    );
+                    setGridColumns([]);
                 } else {
                     // Fallback to selected columns if no data
-                    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
@@ -3049,13 +2958,23 @@ const GenericReportImproved = ({
 
                                     return formattedValue;
                                 } catch (renderError) {
-                                    console.warn('🚨 Cell render error:', renderError, 'for value:', value);
+                                    debugLog(
+                                        'Cell render error:',
+                                        renderError,
+                                        'for value:',
+                                        value
+                                    );
                                     return String(value || '');
                                 }
                             },
                         };
                         } catch (colError) {
-                            console.warn('🚨 Column mapping error:', colError, 'for column:', col);
+                            debugLog(
+                                'Column mapping error:',
+                                colError,
+                                'for column:',
+                                col
+                            );
                             return {
                                 name: `error_col_${index}`,
                                 header: 'Error Column',
@@ -3074,25 +2993,8 @@ const GenericReportImproved = ({
             }
 
             // Report executed successfully
-            console.log('🎯 [DEBUG] Final fetchedDataCount:', fetchedDataCount);
-            console.log(
-                '🎯 [DEBUG] Type of fetchedDataCount:',
-                typeof fetchedDataCount
-            );
         } catch (error) {
-            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();
+            debugLog('Error executing report:', error);
             
             // Only show toast error for actual failures, not for successful pagination
             if (!error.message?.includes('successful')) {
@@ -3124,23 +3026,24 @@ const GenericReportImproved = ({
     // Load saved report configuration
     const loadSavedReport = (report) => {
         try {
-            const config =
-                typeof report.detail === 'string'
-                    ? JSON.parse(report.detail)
-                    : report.detail;
+            const config = parseReportDetail(report?.detail);
+
+            if (!config) {
+                toast.error('This report has no saved configuration.');
+                return;
+            }
 
             if (config.mainTable) {
                 setSelectedTable(config.mainTable);
                 setAvailableTables([config.mainTable]);
-                fetchTableColumns(config.mainTable);
-                fetchDetectedJoins(config.mainTable);
+                // The selectedTable effect fetches columns and suggested joins.
             }
 
-            if (config.columns) {
+            if (Array.isArray(config.columns)) {
                 setSelectedColumns(config.columns);
             }
 
-            if (config.joins) {
+            if (Array.isArray(config.joins)) {
                 setJoins(config.joins);
                 // Fetch columns for each joined table
                 config.joins.forEach((join, index) => {
@@ -3157,7 +3060,6 @@ const GenericReportImproved = ({
 
             // Restore unique field configuration if it exists
             if (config.unique) {
-                console.log('🔄 [RESTORE] Restoring unique field config:', config.unique);
                 setUniqueFieldConfig(config.unique);
             }
 
@@ -3242,19 +3144,13 @@ const GenericReportImproved = ({
             toast.success(`Loaded report: ${report.label}`);
         } catch (error) {
             toast.error('Failed to load report configuration');
-            console.error('Error loading report:', error);
+            debugLog('Error loading report:', error);
         }
     };
 
     // Load business template configuration
     const loadBusinessTemplate = async (template) => {
         try {
-            console.log('🏗️ [DEBUG] Loading business template:', {
-                templateId: template.id,
-                templateName: template.name,
-                hasGrouping: template.grouping?.enabled,
-                groupingConfig: template.grouping,
-            });
 
             setSelectedTemplate(template);
 
@@ -3385,11 +3281,6 @@ const GenericReportImproved = ({
                     emptyRowStyle: template.grouping.emptyRowStyle || 'light',
                 });
 
-                console.log('🏗️ [DEBUG] Applied template grouping config:', {
-                    enabled: template.grouping.enabled,
-                    groupByField: template.grouping.groupByField,
-                    groupDisplayName: template.grouping.groupDisplayName,
-                });
             } else {
                 // Reset grouping config if template doesn't have grouping
                 setGroupingConfig({
@@ -3418,7 +3309,7 @@ const GenericReportImproved = ({
             toast.success(`Loaded template: ${template.name}`);
         } catch (error) {
             toast.error('Failed to load template configuration');
-            console.error('Error loading template:', error);
+            debugLog('Error loading template:', error);
         }
     };
 
@@ -3450,69 +3341,109 @@ const GenericReportImproved = ({
                         </div>
                     </div>
 
-                    {/* Business Templates Section */}
-                    <div className={styles.businessTemplatesSection}>
-                        <h3>Business Report Templates</h3>
-                        <p>
-                            Pre-configured reports for common business scenarios
-                        </p>
-                        <div className={styles.templatesGrid}>
-                            {businessTemplates.map((template) => {
-                                const TemplateIcon = getTemplateIcon(
-                                    template.icon
-                                );
-                                return (
-                                    <div
-                                        key={template.id}
-                                        className={styles.templateCard}
-                                        onClick={() =>
-                                            loadBusinessTemplate(template)
-                                        }
-                                    >
-                                        <div className={styles.templateIcon}>
-                                            <TemplateIcon size={24} />
-                                        </div>
-                                        <div className={styles.templateContent}>
-                                            <h4>{template.name}</h4>
-                                            <p>{template.description}</p>
+                    {/* Business Templates Section — hidden when the host app
+                        ships no templates, so the panel is never empty */}
+                    {businessTemplates.length > 0 && (
+                        <div className={styles.businessTemplatesSection}>
+                            <h3>Business Report Templates</h3>
+                            <p>
+                                Pre-configured reports for common business
+                                scenarios
+                            </p>
+                            <div className={styles.templatesGrid}>
+                                {businessTemplates.map((template) => {
+                                    const TemplateIcon = getTemplateIcon(
+                                        template.icon
+                                    );
+                                    const tags = Array.isArray(template.tags)
+                                        ? template.tags
+                                        : [];
+                                    return (
+                                        <div
+                                            key={template.id}
+                                            className={styles.templateCard}
+                                            onClick={() =>
+                                                loadBusinessTemplate(template)
+                                            }
+                                        >
                                             <div
-                                                className={styles.templateTags}
+                                                className={styles.templateIcon}
                                             >
-                                                {template.tags.map(
-                                                    (tag, index) => (
-                                                        <span
-                                                            key={index}
-                                                            className={
-                                                                styles.templateTag
-                                                            }
-                                                        >
-                                                            {tag}
-                                                        </span>
-                                                    )
+                                                <TemplateIcon size={24} />
+                                            </div>
+                                            <div
+                                                className={
+                                                    styles.templateContent
+                                                }
+                                            >
+                                                <h4>{template.name}</h4>
+                                                <p>{template.description}</p>
+                                                {tags.length > 0 && (
+                                                    <div
+                                                        className={
+                                                            styles.templateTags
+                                                        }
+                                                    >
+                                                        {tags.map(
+                                                            (tag, index) => (
+                                                                <span
+                                                                    key={index}
+                                                                    className={
+                                                                        styles.templateTag
+                                                                    }
+                                                                >
+                                                                    {tag}
+                                                                </span>
+                                                            )
+                                                        )}
+                                                    </div>
                                                 )}
                                             </div>
+                                            {template.category && (
+                                                <div
+                                                    className={
+                                                        styles.templateCategory
+                                                    }
+                                                >
+                                                    {template.category}
+                                                </div>
+                                            )}
                                         </div>
-                                        <div
-                                            className={styles.templateCategory}
-                                        >
-                                            {template.category}
-                                        </div>
-                                    </div>
-                                );
-                            })}
+                                    );
+                                })}
+                            </div>
                         </div>
-                    </div>
+                    )}
 
                     {/* Saved Reports List */}
                     {isLoadingReports ? (
                         <div className={styles.loading}>
                             Loading your saved reports...
                         </div>
+                    ) : reportsError ? (
+                        <div className={styles.errorPanel} role="alert">
+                            <TriangleAlert size={20} />
+                            <div>
+                                <h3>Saved reports unavailable</h3>
+                                <p>{reportsError}</p>
+                            </div>
+                            <button
+                                type="button"
+                                className={styles.retryButton}
+                                onClick={fetchSavedReports}
+                            >
+                                Try again
+                            </button>
+                        </div>
                     ) : savedReports.length > 0 ? (
                         <div className={styles.savedReportsSection}>
                             <h3>Your Saved Reports ({savedReports.length})</h3>
                             <div className={styles.reportsGrid}>
-                                {savedReports.map((report) => (
+                                {savedReports.map((report) => {
+                                    const reportMainTable =
+                                        parseReportDetail(report.detail)
+                                            ?.mainTable || '';
+                                    return (
                                     <div
                                         key={report.id}
                                         className={styles.reportCard}
@@ -3566,7 +3497,7 @@ const GenericReportImproved = ({
                                                     </span>
                                                 </div>
                                             </div>
-                                            {report.detail && (
+                                            {reportMainTable && (
                                                 <div
                                                     className={
                                                         styles.reportTableInfo
@@ -3587,13 +3518,7 @@ const GenericReportImproved = ({
                                                             }}
                                                         />
                                                         {formatName(
-                                                            typeof report.detail ===
-                                                                'string'
-                                                                ? JSON.parse(
-                                                                      report.detail
-                                                                  ).mainTable
-                                                                : report.detail
-                                                                      .mainTable
+                                                            reportMainTable
                                                         )}
                                                     </span>
                                                 </div>
@@ -3608,6 +3533,7 @@ const GenericReportImproved = ({
                                         </div>
                                         <div className={styles.reportActions}>
                                             <button
+                                                type="button"
                                                 className={
                                                     styles.deleteReportBtn
                                                 }
@@ -3624,7 +3550,8 @@ const GenericReportImproved = ({
                                             </button>
                                         </div>
                                     </div>
-                                ))}
+                                    );
+                                })}
                             </div>
                         </div>
                     ) : (
@@ -3664,10 +3591,24 @@ const GenericReportImproved = ({
                                 className={`${styles.wizardStep} ${
                                     isActive ? styles.active : ''
                                 } ${isComplete ? styles.complete : ''}`}
+                                role="button"
+                                tabIndex={index <= currentWizardStep ? 0 : -1}
+                                aria-current={isActive ? 'step' : undefined}
+                                aria-disabled={index > currentWizardStep}
                                 onClick={() =>
                                     index <= currentWizardStep &&
                                     setCurrentWizardStep(index)
                                 }
+                                onKeyDown={(event) => {
+                                    if (
+                                        (event.key === 'Enter' ||
+                                            event.key === ' ') &&
+                                        index <= currentWizardStep
+                                    ) {
+                                        event.preventDefault();
+                                        setCurrentWizardStep(index);
+                                    }
+                                }}
                             >
                                 <div className={styles.stepIcon}>
                                     {isComplete && !isActive ? (
@@ -3739,6 +3680,7 @@ const GenericReportImproved = ({
                     <div className={styles.wizardNavigation}>
                         {currentWizardStep === 0 ? (
                             <button
+                                type="button"
                                 className={`${styles.btn} ${styles.btnCancel}`}
                                 onClick={startAgain}
                             >
@@ -3746,6 +3688,7 @@ const GenericReportImproved = ({
                             </button>
                         ) : (
                             <button
+                                type="button"
                                 className={`${styles.btn} ${styles.btnPrevious}`}
                                 onClick={goToPreviousStep}
                             >
@@ -3755,6 +3698,7 @@ const GenericReportImproved = ({
 
                         {currentWizardStep === wizardSteps.length - 1 ? (
                             <button
+                                type="button"
                                 className={`${styles.btn} ${styles.btnStartAgain}`}
                                 onClick={startAgain}
                             >
@@ -3762,6 +3706,7 @@ const GenericReportImproved = ({
                             </button>
                         ) : (
                             <button
+                                type="button"
                                 className={`${styles.btn} ${styles.btnPrimary}`}
                                 onClick={goToNextStep}
                                 disabled={!isStepComplete(currentStep.id)}
@@ -3803,6 +3748,21 @@ const GenericReportImproved = ({
                     <div className={styles.loading}>
                         Loading available tables...
                     </div>
+                ) : tablesError ? (
+                    <div className={styles.errorPanel} role="alert">
+                        <TriangleAlert size={20} />
+                        <div>
+                            <h3>Data sources unavailable</h3>
+                            <p>{tablesError}</p>
+                        </div>
+                        <button
+                            type="button"
+                            className={styles.retryButton}
+                            onClick={fetchDatabaseTables}
+                        >
+                            Try again
+                        </button>
+                    </div>
                 ) : tables.length === 0 ? (
                     <div className={styles.noTables}>
                         <Data size={48} />
@@ -3834,9 +3794,21 @@ const GenericReportImproved = ({
                                         className={`${styles.tableCard} ${
                                             isSelected ? styles.selected : ''
                                         }`}
+                                        role="button"
+                                        tabIndex={0}
+                                        aria-pressed={isSelected}
                                         onClick={() =>
                                             handleTableSelect(table.name)
                                         }
+                                        onKeyDown={(event) => {
+                                            if (
+                                                event.key === 'Enter' ||
+                                                event.key === ' '
+                                            ) {
+                                                event.preventDefault();
+                                                handleTableSelect(table.name);
+                                            }
+                                        }}
                                     >
                                         <div className={styles.tableCardIcon}>
                                             <TableIcon size={24} />
@@ -3877,44 +3849,23 @@ const GenericReportImproved = ({
         );
     };
 
-    // Render column selection
-    const renderColumnSelection = () => {
-        // Add loading check at the beginning
-        if (isLoadingTables || isLoadingJoinColumns) {
-            return (
-                <div className={styles.loading}>
-                    Loading table columns
-                    {isLoadingJoinColumns ? ' from joined tables' : ''}...
-                </div>
-            );
-        }
-
-        if (tableColumns.length === 0) {
-            return (
-                <div className={styles.noColumns}>
-                    <Data size={48} />
-                    <h3>No Columns Available</h3>
-                    <p>
-                        No columns found for the selected table. Please try
-                        selecting a different table or check your configuration.
-                    </p>
-                </div>
-            );
-        }
+    // Field pickers for the column step. Memoised because the step re-renders on
+    // every checkbox toggle and these lists only change when the schema does.
+    const allAvailableColumns = useMemo(() => {
+        if (!selectedTable) return [];
 
-        // Get all available tables for disambiguation
+        // Table names used for display disambiguation
         const allAvailableTables = [
             selectedTable,
             ...joins.map((join) => join.targetTable),
-        ];
+        ].map((name) => ({ name }));
 
-        // Get all available columns (main table + joined tables)
-        const allAvailableColumns = [
+        const sections = [
             {
                 tableName: selectedTable,
                 displayName: getUniqueTableDisplayName(
                     selectedTable,
-                    allAvailableTables.map((t) => ({ name: t })),
+                    allAvailableTables,
                     definition
                 ),
                 columns: tableColumns,
@@ -3924,7 +3875,7 @@ const GenericReportImproved = ({
                 tableName: join.targetTable,
                 displayName: getUniqueTableDisplayName(
                     join.targetTable,
-                    allAvailableTables.map((t) => ({ name: t })),
+                    allAvailableTables,
                     definition
                 ),
                 columns: join.availableColumns || [],
@@ -3932,18 +3883,13 @@ const GenericReportImproved = ({
             })),
         ];
 
-        // Add calculated fields if template is selected or custom fields exist
-        const templateCalculatedFields =
-            selectedTemplate && selectedTemplate.calculatedFields
-                ? selectedTemplate.calculatedFields
-                : [];
         const allCalculatedFields = [
-            ...templateCalculatedFields,
+            ...(selectedTemplate?.calculatedFields || []),
             ...customCalculatedFields,
         ];
 
         if (allCalculatedFields.length > 0) {
-            const calculatedFields = {
+            sections.push({
                 tableName: 'calculated',
                 displayName: 'Calculated Fields',
                 columns: allCalculatedFields.map((calc) => ({
@@ -3954,16 +3900,77 @@ const GenericReportImproved = ({
                     isCalculated: true,
                 })),
                 isCalculated: true,
-            };
-            allAvailableColumns.push(calculatedFields);
+            });
         }
 
-        // Use enhanced categorization with smart filtering for main table
-        const mainTableCategories = categorizeFields(
-            tableColumns,
-            showHiddenFields
-        );
-        const mainHiddenCount = mainTableCategories.hidden.length;
+        return sections;
+    }, [
+        selectedTable,
+        tableColumns,
+        joins,
+        definition,
+        selectedTemplate,
+        customCalculatedFields,
+    ]);
+
+    const mainTableCategories = useMemo(
+        () => categorizeFields(tableColumns, showHiddenFields),
+        [tableColumns, showHiddenFields]
+    );
+
+    // categorizeFields only collects hidden fields when they are being shown,
+    // so the toggle's counter has to be derived from the raw column list.
+    const mainHiddenCount = useMemo(
+        () =>
+            (tableColumns || []).filter((col) =>
+                shouldHideField(col?.name, col?.type)
+            ).length,
+        [tableColumns]
+    );
+
+    // Render column selection
+    const renderColumnSelection = () => {
+        // Add loading check at the beginning
+        if (isLoadingColumns || isLoadingJoinColumns) {
+            return (
+                <div className={styles.loading}>
+                    Loading table columns
+                    {isLoadingJoinColumns ? ' from joined tables' : ''}...
+                </div>
+            );
+        }
+
+        if (columnsError) {
+            return (
+                <div className={styles.errorPanel} role="alert">
+                    <TriangleAlert size={20} />
+                    <div>
+                        <h3>Fields unavailable</h3>
+                        <p>{columnsError}</p>
+                    </div>
+                    <button
+                        type="button"
+                        className={styles.retryButton}
+                        onClick={() => fetchTableColumns(selectedTable)}
+                    >
+                        Try again
+                    </button>
+                </div>
+            );
+        }
+
+        if (tableColumns.length === 0) {
+            return (
+                <div className={styles.noColumns}>
+                    <Data size={48} />
+                    <h3>No Columns Available</h3>
+                    <p>
+                        No columns found for the selected table. Please try
+                        selecting a different table or check your configuration.
+                    </p>
+                </div>
+            );
+        }
 
         const categoryInfo = {
             essential: {
@@ -4025,6 +4032,7 @@ const GenericReportImproved = ({
                     </p>
                     <div className={styles.quickActions}>
                         <button
+                            type="button"
                             className={styles.linkButton}
                             onClick={() => {
                                 const allVisibleColumns = [];
@@ -4073,6 +4081,7 @@ const GenericReportImproved = ({
                             Select All Visible
                         </button>
                         <button
+                            type="button"
                             className={styles.linkButton}
                             onClick={() => setSelectedColumns([])}
                         >
@@ -4080,6 +4089,7 @@ const GenericReportImproved = ({
                         </button>
                         {mainHiddenCount > 0 && (
                             <button
+                                type="button"
                                 className={styles.linkButton}
                                 onClick={() =>
                                     setShowHiddenFields(!showHiddenFields)
@@ -4484,19 +4494,12 @@ const GenericReportImproved = ({
                                     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}>
@@ -4512,27 +4515,21 @@ const GenericReportImproved = ({
                             
                             {uniqueFieldConfig.enabled && (
                                 <div className={styles.uniqueFieldSelector}>
-                                    <label className={styles.fieldLabel}>
+                                    <label
+                                        className={styles.fieldLabel}
+                                        htmlFor="unique-field-select"
+                                    >
                                         Select field to make unique:
                                     </label>
                                     <select
+                                        id="unique-field-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
@@ -4564,7 +4561,9 @@ const GenericReportImproved = ({
     // Render relationships (simplified)
     const renderRelationships = () => {
         const tableSuggestions = detectedJoins[selectedTable] || [];
-        const isLoading = isLoadingDetectedJoins[selectedTable] || false;
+        // Named apart from the report-execution `isLoading` state it shadowed
+        const isLoadingSuggestions =
+            isLoadingDetectedJoins[selectedTable] || false;
 
         return (
             <div className={styles.relationshipsSection}>
@@ -4605,6 +4604,7 @@ const GenericReportImproved = ({
                                     </span>
                                 </div>
                                 <button
+                                    type="button"
                                     className={styles.removeJoinBtn}
                                     onClick={() => removeJoin(index)}
                                 >
@@ -4615,8 +4615,14 @@ const GenericReportImproved = ({
                     </div>
                 )}
 
+                {isLoadingSuggestions && (
+                    <div className={styles.loading}>
+                        Finding possible connections...
+                    </div>
+                )}
+
                 {/* Detected Relationships */}
-                {tableSuggestions.length > 0 && (
+                {!isLoadingSuggestions && tableSuggestions.length > 0 && (
                     <div className={styles.detectedJoins}>
                         <h3>Detected Connections</h3>
                         <p>
@@ -4639,18 +4645,21 @@ const GenericReportImproved = ({
                                                     definition
                                                 )}
                                             </span>
-                                            <div
-                                                className={
-                                                    styles.confidenceRating
-                                                }
-                                            >
-                                                {'⭐'.repeat(
-                                                    Math.floor(
-                                                        suggestion.confidence /
-                                                            20
-                                                    )
-                                                )}
-                                            </div>
+                                            {suggestion.confidence != null && (
+                                                <span
+                                                    className={
+                                                        styles.confidenceRating
+                                                    }
+                                                    title={`Confidence: ${Math.round(
+                                                        suggestion.confidence
+                                                    )}%`}
+                                                >
+                                                    {Math.round(
+                                                        suggestion.confidence
+                                                    )}
+                                                    % match
+                                                </span>
+                                            )}
                                         </div>
                                         <p
                                             className={
@@ -4668,6 +4677,7 @@ const GenericReportImproved = ({
                                         </p>
                                     </div>
                                     <button
+                                        type="button"
                                         className={`${styles.connectIconBtn} ${
                                             joins.some(
                                                 (j) =>
@@ -4712,9 +4722,13 @@ const GenericReportImproved = ({
                     </div>
                 )}
 
-                {isLoading && (
-                    <div className={styles.loading}>
-                        Finding possible connections...
+                {!isLoadingSuggestions && tableSuggestions.length === 0 && (
+                    <div className={styles.emptyState}>
+                        <p>
+                            No connections were detected for{' '}
+                            {getTableDisplayName(selectedTable, definition)}.
+                            You can add one manually below, or skip this step.
+                        </p>
                     </div>
                 )}
 
@@ -4738,6 +4752,7 @@ const GenericReportImproved = ({
 
                     {!showManualJoinForm ? (
                         <button
+                            type="button"
                             className={`${styles.btn} ${styles.btnSecondary}`}
                             onClick={() => {
                                 setShowManualJoinForm(true);
@@ -4915,6 +4930,7 @@ const GenericReportImproved = ({
 
                             <div className={styles.manualJoinActions}>
                                 <button
+                                    type="button"
                                     className={`${styles.btn} ${styles.btnPrimary}`}
                                     onClick={addManualJoin}
                                     disabled={
@@ -4927,6 +4943,7 @@ const GenericReportImproved = ({
                                     Add Relationship
                                 </button>
                                 <button
+                                    type="button"
                                     className={`${styles.btn} ${styles.btnSecondary}`}
                                     onClick={() => {
                                         setShowManualJoinForm(false);
@@ -4957,6 +4974,7 @@ const GenericReportImproved = ({
                         {getTableDisplayName(selectedTable, definition)} table.
                     </p>
                     <button
+                        type="button"
                         className={`${styles.btn} ${styles.btnSecondary}`}
                         onClick={goToNextStep}
                     >
@@ -5107,9 +5125,23 @@ const GenericReportImproved = ({
 
     // Legacy functions for backward compatibility
     const addFilter = (filter) => {
-        const updatedCriteria = { ...filterCriteria };
-        updatedCriteria.groups[0].filters.push(filter);
-        setFilterCriteria(updatedCriteria);
+        setFilterCriteria((prev) => {
+            const groups = prev?.groups?.length
+                ? prev.groups
+                : [{ operator: 'AND', filters: [] }];
+
+            return {
+                operator: prev?.operator || 'AND',
+                groups: groups.map((group, index) =>
+                    index === 0
+                        ? {
+                              ...group,
+                              filters: [...(group.filters || []), filter],
+                          }
+                        : group
+                ),
+            };
+        });
     };
 
     const removeFilter = (groupIndex, filterIndex) => {
@@ -5241,6 +5273,7 @@ const GenericReportImproved = ({
                 <div className={styles.quickFiltersGrid}>
                     {selectedTemplate.quickFilters.map((quickFilter) => (
                         <button
+                            type="button"
                             key={quickFilter.id}
                             className={styles.quickFilterBtn}
                             onClick={() =>
@@ -5389,13 +5422,27 @@ const GenericReportImproved = ({
 
     // Update filter value
     const updateFilter = (groupIndex, filterIndex, field, value) => {
-        const updatedCriteria = { ...filterCriteria };
-        updatedCriteria.groups[groupIndex].filters[filterIndex][field] = value;
-        setFilterCriteria(updatedCriteria);
+        setFilterCriteria((prev) => ({
+            ...prev,
+            groups: (prev.groups || []).map((group, gIndex) =>
+                gIndex === groupIndex
+                    ? {
+                          ...group,
+                          filters: (group.filters || []).map(
+                              (filter, fIndex) =>
+                                  fIndex === filterIndex
+                                      ? { ...filter, [field]: value }
+                                      : filter
+                          ),
+                      }
+                    : group
+            ),
+        }));
     };
 
-    // Get available columns for filters
-    const getAvailableFilterColumns = () => {
+    // Get available columns for filters. Memoised: the filter step, the sort
+    // step and the grouping step each ask for this list on every render.
+    const availableFilterColumns = useMemo(() => {
         const allColumns = [];
 
         // Add main table columns
@@ -5437,13 +5484,15 @@ const GenericReportImproved = ({
         });
 
         return allColumns;
-    };
+    }, [tableColumns, joins, selectedTable, definition]);
+
+    const getAvailableFilterColumns = () => availableFilterColumns;
 
     // Advanced filter rendering (from original GenericReport)
     const renderFilters = () => {
         // Ensure filterCriteria has proper structure
         if (!filterCriteria || !filterCriteria.groups) {
-            console.error(
+            debugLog(
                 'FilterCriteria is not properly structured, reinitializing...'
             );
             setFilterCriteria({
@@ -6017,14 +6066,6 @@ const GenericReportImproved = ({
 
         const smartSuggestions = getSmartSuggestions();
 
-        // Debug logging to check if suggestions are generated
-        console.log('Smart suggestions debug:', {
-            selectedTable,
-            tableColumns: tableColumns?.length,
-            smartSuggestions: smartSuggestions?.length,
-            suggestions: smartSuggestions,
-        });
-
         return (
             <div className={styles.filtersSection}>
                 {/* Template Quick Filters */}
@@ -6089,6 +6130,7 @@ const GenericReportImproved = ({
                                             className={styles.suggestionActions}
                                         >
                                             <button
+                                                type="button"
                                                 className={`${styles.btn} ${styles.btnPrimary}`}
                                                 onClick={() =>
                                                     applySuggestion(suggestion)
@@ -6137,6 +6179,7 @@ const GenericReportImproved = ({
                         </h3>
                         <div className={styles.sectionHeaderActions}>
                             <button
+                                type="button"
                                 className={`${styles.btn} ${styles.btnSecondary}`}
                                 onClick={(e) => {
                                     e.stopPropagation();
@@ -6181,6 +6224,7 @@ const GenericReportImproved = ({
                                                         : 'Configure column'}
                                                 </h4>
                                                 <button
+                                                    type="button"
                                                     className={
                                                         styles.removeSortBtn
                                                     }
@@ -6205,8 +6249,13 @@ const GenericReportImproved = ({
                                                         styles.sortingField
                                                     }
                                                 >
-                                                    <label>Column:</label>
+                                                    <label
+                                                        htmlFor={`sort-column-${index}`}
+                                                    >
+                                                        Column:
+                                                    </label>
                                                     <select
+                                                        id={`sort-column-${index}`}
                                                         className={
                                                             styles.sortingSelect
                                                         }
@@ -6321,8 +6370,13 @@ const GenericReportImproved = ({
                                                         styles.sortingField
                                                     }
                                                 >
-                                                    <label>Direction:</label>
+                                                    <label
+                                                        htmlFor={`sort-direction-${index}`}
+                                                    >
+                                                        Direction:
+                                                    </label>
                                                     <select
+                                                        id={`sort-direction-${index}`}
                                                         className={
                                                             styles.sortingSelect
                                                         }
@@ -6407,6 +6461,7 @@ const GenericReportImproved = ({
 
                     <div className={styles.filterActionButtons}>
                         <button
+                            type="button"
                             className={`${styles.btn} ${styles.btnPrimary}`}
                             onClick={handleAddFilterGroup}
                             disabled={selectedColumns.length === 0}
@@ -6475,6 +6530,7 @@ const GenericReportImproved = ({
 
                                 <div className={styles.filterGroupActions}>
                                     <button
+                                        type="button"
                                         className={`${styles.btn} ${styles.btnSecondary}`}
                                         onClick={() =>
                                             handleAddFilterCriterion(groupIndex)
@@ -6486,6 +6542,7 @@ const GenericReportImproved = ({
                                     {filterCriteria.groups &&
                                         filterCriteria.groups.length > 1 && (
                                             <button
+                                                type="button"
                                                 className={styles.removeJoinBtn}
                                                 onClick={() =>
                                                     handleRemoveFilterGroup(
@@ -6532,6 +6589,7 @@ const GenericReportImproved = ({
                                                               }`}
                                                     </h4>
                                                     <button
+                                                        type="button"
                                                         className={
                                                             styles.removeJoinBtn
                                                         }
@@ -6558,8 +6616,13 @@ const GenericReportImproved = ({
                                                             styles.filterField
                                                         }
                                                     >
-                                                        <label>Column:</label>
+                                                        <label
+                                                            htmlFor={`filter-column-${groupIndex}-${filterIndex}`}
+                                                        >
+                                                            Column:
+                                                        </label>
                                                         <select
+                                                            id={`filter-column-${groupIndex}-${filterIndex}`}
                                                             className={
                                                                 styles.filterSelect
                                                             }
@@ -6637,8 +6700,13 @@ const GenericReportImproved = ({
                                                             styles.filterField
                                                         }
                                                     >
-                                                        <label>Operator:</label>
+                                                        <label
+                                                            htmlFor={`filter-operator-${groupIndex}-${filterIndex}`}
+                                                        >
+                                                            Operator:
+                                                        </label>
                                                         <select
+                                                            id={`filter-operator-${groupIndex}-${filterIndex}`}
                                                             className={
                                                                 styles.filterSelect
                                                             }
@@ -6711,10 +6779,13 @@ const GenericReportImproved = ({
                                                                 styles.filterField
                                                             }
                                                         >
-                                                            <label>
+                                                            <label
+                                                                htmlFor={`filter-value-${groupIndex}-${filterIndex}`}
+                                                            >
                                                                 Value:
                                                             </label>
                                                             <input
+                                                                id={`filter-value-${groupIndex}-${filterIndex}`}
                                                                 type="text"
                                                                 className={
                                                                     styles.filterInput
@@ -6768,6 +6839,7 @@ const GenericReportImproved = ({
                         records.
                     </p>
                     <button
+                        type="button"
                         className={`${styles.btn} ${styles.btnSecondary}`}
                         onClick={goToNextStep}
                     >
@@ -6906,41 +6978,11 @@ const GenericReportImproved = ({
                 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
             };
 
-            // DEBUG: Log the complete request payload
-            console.group('🐛 PDF Export Debug');
-            console.log('Export Request Details:');
-            console.log('URL:', exportUrl);
-            console.log('Format:', format);
-            console.log('Report Name:', reportName);
-            console.log('Selected Table:', selectedTable);
-            console.log('Selected Columns:', selectedColumns);
-            console.log('Joins:', joins);
-            console.log('Filter Criteria:', filterCriteria);
-            console.log(
-                'Flattened Filters:',
-                flattenFilterCriteria(filterCriteria)
-            );
-            console.log('Sort Criteria:', sortCriteria);
-            console.log(
-                '🚀 Final Payload:',
-                JSON.stringify(exportData, null, 2)
-            );
-            console.groupEnd();
-
             // Generate filename with timestamp
             const timestamp = moment().format('YYYY-MM-DD_HH-mm-ss');
             const fileName = `${reportName.replace(
@@ -6948,109 +6990,57 @@ const GenericReportImproved = ({
                 '_'
             )}_${timestamp}.${format === 'excel' ? 'xlsx' : format}`;
 
-            console.log('📁 Generated filename:', fileName);
-
             // Priority: custom export URL > template export URL > default export URL
             const finalExportUrl =
                 customUrls.exportUrl ||
                 selectedTemplate?.exportUrl ||
                 exportUrl;
 
-            console.log('🔍 [DEBUG] Export API Call:', {
-                selectedTemplate: selectedTemplate?.id,
-                customExportUrl: customUrls.exportUrl,
-                templateExportUrl: selectedTemplate?.exportUrl,
-                defaultExportUrl: exportUrl,
-                finalExportUrl,
-                usingCustomExportUrl: !!customUrls.exportUrl,
-                usingTemplateExportUrl: !!selectedTemplate?.exportUrl,
-            });
-
             // Use Download component which handles error checking and blob download properly
-            console.log('📡 Making request to:', finalExportUrl);
             const result = await Download(finalExportUrl, 'POST', exportData);
 
-            console.log('Download component returned result:', result);
-
             if (result && result.data) {
-                console.log('Result has data, triggering download');
-                console.log('Result data type:', typeof result.data);
-                console.log(
-                    'Result data instanceof Blob:',
-                    result.data instanceof Blob
-                );
-
-                // Use saveAs to trigger download
                 saveAs(result.data, fileName);
                 toast.success(`Report exported as ${format.toUpperCase()}`);
             } else {
-                console.error('❌ No result data received');
-                console.log('Full result object:', result);
+                debugLog('Export returned no data', result);
                 toast.error(
                     `Failed to export report as ${format.toUpperCase()}`
                 );
             }
         } catch (error) {
-            // Handle binary error responses properly
-            console.group('❌ Export Error Debug');
-            console.error('Error object:', error);
-            console.log('Error name:', error.name);
-            console.log('Error message:', error.message);
-            console.log('Error stack:', error.stack);
-
+            // Errors may arrive as binary blobs — unwrap them for a readable message
             let errorMessage = `Failed to export report as ${format.toUpperCase()}`;
 
             if (error.response) {
-                console.log('📡 Error response received');
-                console.log('Response status:', error.response.status);
-                console.log('Response statusText:', error.response.statusText);
-                console.log('Response headers:', error.response.headers);
-                console.log('Response data type:', typeof error.response.data);
-                console.log(
-                    'Response data instanceof Blob:',
-                    error.response.data instanceof Blob
-                );
-                console.log('Raw response data:', error.response.data);
-
                 if (error.response.data instanceof Blob) {
                     // If error response is a blob, try to read it as text
                     try {
-                        console.log('Attempting to parse blob error response');
                         const errorText = await error.response.data.text();
-                        console.log('Blob content as text:', errorText);
 
                         try {
                             const errorData = JSON.parse(errorText);
-                            console.log('Parsed JSON error data:', errorData);
                             errorMessage =
                                 errorData.message ||
                                 errorData.error ||
                                 errorMessage;
                         } catch (jsonError) {
-                            console.error(
-                                '❌ Failed to parse JSON from blob:',
+                            debugLog(
+                                'Export error blob was not JSON:',
                                 jsonError
                             );
                             errorMessage = errorText || errorMessage;
                         }
                     } catch (parseError) {
                         // If parsing fails, use default message
-                        console.error(
-                            '❌ Could not parse error response blob:',
+                        debugLog(
+                            'Could not read export error response:',
                             parseError
                         );
                     }
                 } else if (error.response.data && error.response.data.message) {
-                    console.log(
-                        'Using error.response.data.message:',
-                        error.response.data.message
-                    );
                     errorMessage = error.response.data.message;
                 } else if (error.response.data && error.response.data.error) {
-                    console.log(
-                        'Using error.response.data.error:',
-                        error.response.data.error
-                    );
                     errorMessage = error.response.data.error;
                 }
 
@@ -7061,27 +7051,29 @@ const GenericReportImproved = ({
                     • Memory limitations on the server
                     • Try reducing the dataset or using Excel/CSV format`;
                 }
-            } else {
-                console.log('❌ No error.response available');
             }
 
-            console.log('🔔 Final error message:', errorMessage);
-            console.groupEnd();
-
             toast.error(errorMessage);
-            console.error('Export error:', error);
+            debugLog('Export error:', error);
         }
     };
 
     // Handle row exclusion modal
-    const handleExportWithExclusion = (exportType = 'regular') => {
-        if (previewData.length === 0) {
+    const handleExportWithExclusion = (requestedType = 'regular') => {
+        const hasRows =
+            requestedType === 'grouped'
+                ? (groupedData?.groupedData?.groups || []).some(
+                      (group) => (group.rows || []).length > 0
+                  )
+                : previewData.length > 0;
+
+        if (!hasRows) {
             toast.error('No data available to export');
             return;
         }
 
         setShowRowExclusionModal(true);
-        setExportType(exportType);
+        setExportType(requestedType);
     };
 
     const confirmExportWithExclusion = async () => {
@@ -7121,21 +7113,12 @@ const GenericReportImproved = ({
         }
 
         try {
-            // Temporarily replace previewData with filtered data for export
-            const originalPreviewData = previewData;
-            setPreviewData(filteredData);
-            
-            // Use the existing client-side Excel export functionality
+            // Excluded rows are sent to the server as part of the query payload
+            // (see queryConfig.excludedRows), so the preview state stays untouched.
             await exportReport('excel');
-            
-            // Restore original data
-            setPreviewData(originalPreviewData);
         } catch (error) {
-            console.error('Regular export failed:', error);
+            debugLog('Regular export failed:', error);
             toast.error('Export failed. Please try again.');
-            
-            // Restore original data on error as well
-            setPreviewData(previewData);
         }
     };
 
@@ -7145,44 +7128,25 @@ const GenericReportImproved = ({
 
     // Perform the actual grouped export
     const performGroupedExport = async () => {
-        if (!selectedTemplate) {
-            toast.error('No template selected for export');
-            return;
-        }
+        // A grouped report can come from a business template or from the
+        // wizard's own grouping step, so fall back through both.
+        const exportTitle =
+            selectedTemplate?.name ||
+            reportName ||
+            (selectedTable ? `${formatName(selectedTable)} Report` : 'Report');
 
-        // Debug logging to understand the groupedData state
-        console.log('🔍 [DEBUG] Export function called with:', {
-            groupedData: groupedData,
-            hasGroupedData: !!groupedData,
-            hasGroups: !!(groupedData && groupedData.groups),
-            groupsLength:
-                groupedData && groupedData.groups
-                    ? groupedData.groups.length
-                    : 'undefined',
-            selectedColumns: selectedColumns,
-            selectedTemplate: selectedTemplate?.name,
-        });
-
-        // Check the correct path: groupedData.groupedData.groups
         const actualGroups = groupedData?.groupedData?.groups;
-        if (!groupedData || !actualGroups || actualGroups.length === 0) {
-            console.error('❌ [DEBUG] Export failed - no grouped data:', {
-                groupedData: groupedData,
-                hasGroupedData: !!groupedData,
-                hasGroupedDataProperty: !!(
-                    groupedData && groupedData.groupedData
-                ),
-                hasGroups: !!(
-                    groupedData &&
-                    groupedData.groupedData &&
-                    groupedData.groupedData.groups
-                ),
-                groupsLength: actualGroups ? actualGroups.length : 'undefined',
-            });
+        if (!Array.isArray(actualGroups) || actualGroups.length === 0) {
+            debugLog('Grouped export skipped — no grouped data:', groupedData);
             toast.error('No grouped data available for export');
             return;
         }
 
+        if (!Array.isArray(selectedColumns) || selectedColumns.length === 0) {
+            toast.error('No fields selected to export');
+            return;
+        }
+
         try {
             toast.info('Generating Excel export...');
 
@@ -7245,7 +7209,7 @@ const GenericReportImproved = ({
 
                 // Handle Comments field - strip HTML and formatting
                 if (column.displayName === 'Comments' && value) {
-                    return value
+                    return String(value)
                         .replace(/• /g, '')
                         .replace(/<[^>]*>/g, '')
                         .trim();
@@ -7290,13 +7254,18 @@ const GenericReportImproved = ({
             actualGroups.forEach((group, groupIndex) => {
                 // Add group header row
                 const groupDisplayName =
-                    selectedTemplate?.grouping?.groupDisplayName || 'Group';
+                    selectedTemplate?.grouping?.groupDisplayName ||
+                    groupingConfig.groupDisplayName ||
+                    'Group';
                 const groupHeaderRow = Array(headers.length).fill('');
                 groupHeaderRow[0] = `${groupDisplayName}: ${group.groupDisplayName}`;
                 worksheetData.push(groupHeaderRow);
 
                 // Add data rows for this group (excluding excluded rows)
-                const allRows = [...group.rows, ...(group.emptyRows || [])];
+                const allRows = [
+                    ...(group.rows || []),
+                    ...(group.emptyRows || []),
+                ];
                 allRows.forEach((row, rowIndex) => {
                     // Create a unique identifier for the row
                     const rowId = row.id || `group-${groupIndex}-row-${rowIndex}`;
@@ -7343,14 +7312,17 @@ const GenericReportImproved = ({
             worksheet['!cols'] = colWidths;
 
             // Add worksheet to workbook
-            const sheetName = selectedTemplate.name || 'Grouped Report';
+            // Excel sheet names are capped at 31 chars and reject [ ] : * ? / \\
+            const sheetName =
+                exportTitle.replace(/[[\]:*?/\\]/g, ' ').slice(0, 31) ||
+                'Grouped Report';
             XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
 
             // Generate file and download
-            const filename = `${selectedTemplate.name.replace(
+            const filename = `${exportTitle.replace(
                 /[^a-zA-Z0-9]/g,
                 '_'
-            )}_grouped_report_${new Date().toISOString().split('T')[0]}.xlsx`;
+            )}_grouped_report_${moment().format('YYYY-MM-DD')}.xlsx`;
             const excelBuffer = XLSX.write(workbook, {
                 bookType: 'xlsx',
                 type: 'array',
@@ -7362,7 +7334,7 @@ const GenericReportImproved = ({
             saveAs(blob, filename);
             toast.success('Excel export completed successfully!');
         } catch (error) {
-            console.error('Export error:', error);
+            debugLog('Export error:', error);
             toast.error(`Export failed: ${error.message}`);
         }
     };
@@ -7391,9 +7363,9 @@ const GenericReportImproved = ({
                 <div style="text-align: left;">
                     ${
                         isExistingReport
-                            ? `<div style="background: #e3f2fd; border: 1px solid #2196f3; border-radius: 4px; padding: 12px; margin-bottom: 16px;">
-                            <strong><TriangleAlert size={16} style={{ marginRight: '4px', verticalAlign: 'middle' }} />This will overwrite the existing report:</strong><br>
-                            "${reportName}"
+                            ? `<div style="background: var(--bg-color, #f7f7f8); border: 1px solid var(--border-color, #e1e1e1); border-radius: var(--br, 5px); padding: 12px; margin-bottom: 16px;">
+                            <strong>This will overwrite the existing report:</strong><br>
+                            "${escapeHtml(reportName)}"
                         </div>`
                             : ''
                     }
@@ -7401,14 +7373,16 @@ const GenericReportImproved = ({
                     <input 
                         id="report-name" 
                         type="text" 
-                        value="${
+                        value="${escapeHtml(
                             saveAs
                                 ? `${reportName} (Copy)`
                                 : reportName ||
-                                  `${formatName(
-                                      selectedTable
-                                  )} Report - ${moment().format('YYYY-MM-DD')}`
-                        }"
+                                      `${formatName(
+                                          selectedTable
+                                      )} Report - ${moment().format(
+                                          'YYYY-MM-DD'
+                                      )}`
+                        )}"
                         style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 16px;"
                     />
                     <label style="display: flex; align-items: center; gap: 8px;">
@@ -7426,9 +7400,16 @@ const GenericReportImproved = ({
             preConfirm: () => {
                 const reportNameInput = document.getElementById('report-name');
                 const isPublicInput = document.getElementById('is-public');
+                const name = (reportNameInput?.value || '').trim();
+
+                if (!name) {
+                    Swal.showValidationMessage('Please enter a report name');
+                    return false;
+                }
+
                 return {
-                    name: reportNameInput.value,
-                    isPublic: isPublicInput.checked,
+                    name,
+                    isPublic: !!isPublicInput?.checked,
                 };
             },
         });
@@ -7498,7 +7479,7 @@ const GenericReportImproved = ({
                 }
             } catch (error) {
                 toast.error('Failed to save report');
-                console.error('Save error:', error);
+                debugLog('Save error:', error);
             }
         }
     };
@@ -7543,10 +7524,14 @@ const GenericReportImproved = ({
                         <div className={styles.groupingOptions}>
                             {/* Group By Field Selection */}
                             <div className={styles.formGroup}>
-                                <label className={styles.formLabel}>
+                                <label
+                                    className={styles.formLabel}
+                                    htmlFor="grouping-field"
+                                >
                                     Group By Field *
                                 </label>
                                 <select
+                                    id="grouping-field"
                                     value={groupingConfig.groupByField}
                                     onChange={(e) => {
                                         const selectedOption =
@@ -7599,10 +7584,14 @@ const GenericReportImproved = ({
 
                             {/* Group Display Name */}
                             <div className={styles.formGroup}>
-                                <label className={styles.formLabel}>
+                                <label
+                                    className={styles.formLabel}
+                                    htmlFor="grouping-display-name"
+                                >
                                     Group Display Name
                                 </label>
                                 <input
+                                    id="grouping-display-name"
                                     type="text"
                                     value={groupingConfig.groupDisplayName}
                                     onChange={(e) =>
@@ -7628,10 +7617,14 @@ const GenericReportImproved = ({
 
                                 <div className={styles.optionsGrid}>
                                     <div className={styles.formGroup}>
-                                        <label className={styles.formLabel}>
+                                        <label
+                                            className={styles.formLabel}
+                                            htmlFor="grouping-rows-per-group"
+                                        >
                                             Rows Per Group
                                         </label>
                                         <input
+                                            id="grouping-rows-per-group"
                                             type="number"
                                             min="1"
                                             max="100"
@@ -7650,10 +7643,14 @@ const GenericReportImproved = ({
                                     </div>
 
                                     <div className={styles.formGroup}>
-                                        <label className={styles.formLabel}>
+                                        <label
+                                            className={styles.formLabel}
+                                            htmlFor="grouping-header-style"
+                                        >
                                             Group Header Style
                                         </label>
                                         <select
+                                            id="grouping-header-style"
                                             value={
                                                 groupingConfig.groupHeaderStyle
                                             }
@@ -7682,10 +7679,14 @@ const GenericReportImproved = ({
                                     </div>
 
                                     <div className={styles.formGroup}>
-                                        <label className={styles.formLabel}>
+                                        <label
+                                            className={styles.formLabel}
+                                            htmlFor="grouping-sort-direction"
+                                        >
                                             Sort Direction
                                         </label>
                                         <select
+                                            id="grouping-sort-direction"
                                             value={groupingConfig.sortDirection}
                                             onChange={(e) =>
                                                 setGroupingConfig({
@@ -7815,10 +7816,14 @@ const GenericReportImproved = ({
 
                             <div className={styles.optionsGrid}>
                                 <div className={styles.formGroup}>
-                                    <label className={styles.formLabel}>
+                                    <label
+                                        className={styles.formLabel}
+                                        htmlFor="custom-execute-url"
+                                    >
                                         Custom Execute URL
                                     </label>
                                     <input
+                                        id="custom-execute-url"
                                         type="text"
                                         value={customUrls.executeUrl}
                                         onChange={(e) =>
@@ -7837,10 +7842,14 @@ const GenericReportImproved = ({
                                 </div>
 
                                 <div className={styles.formGroup}>
-                                    <label className={styles.formLabel}>
+                                    <label
+                                        className={styles.formLabel}
+                                        htmlFor="custom-export-url"
+                                    >
                                         Custom Export URL
                                     </label>
                                     <input
+                                        id="custom-export-url"
                                         type="text"
                                         value={customUrls.exportUrl}
                                         onChange={(e) =>
@@ -7865,17 +7874,30 @@ const GenericReportImproved = ({
         );
     };
 
+    // Column set for the preview table. The response keys are authoritative —
+    // gridColumns is only a fallback for the "no rows yet" case.
+    const previewColumns = useMemo(() => {
+        if (previewData.length > 0 && previewData[0]) {
+            return Object.keys(previewData[0]).map((key) => ({
+                name: key,
+                header: key.replace(/\./g, ' '),
+            }));
+        }
+        return Array.isArray(gridColumns) ? gridColumns : [];
+    }, [previewData, gridColumns]);
+
     // Render preview
     const renderPreview = () => {
         return (
             <div className={styles.previewSection}>
                 <div className={styles.previewActions}>
                     <button
+                        type="button"
                         className={`${styles.btn} ${styles.btnPrimary}`}
                         onClick={() => {
                             resetPagination();
                             // Don't reset hasAutoExecuted to avoid triggering useEffect
-                            executeReport();
+                            executeReport({ page: 1 });
                         }}
                         disabled={isLoading}
                     >
@@ -7888,6 +7910,7 @@ const GenericReportImproved = ({
                         <div className={styles.viewToggle}>
                             <span className={styles.viewLabel}>View:</span>
                             <button
+                                type="button"
                                 className={`${styles.btn} ${
                                     styles.btnSecondary
                                 } ${groupedData ? styles.active : ''}`}
@@ -7903,9 +7926,10 @@ const GenericReportImproved = ({
                                 disabled={isLoading}
                                 title="Show grouped report"
                             >
-                                📊 Grouped
+                                Grouped
                             </button>
                             <button
+                                type="button"
                                 className={`${styles.btn} ${
                                     styles.btnSecondary
                                 } ${!groupedData ? styles.active : ''}`}
@@ -7921,28 +7945,20 @@ const GenericReportImproved = ({
                                 disabled={isLoading}
                                 title="Show regular table"
                             >
-                                📋 Table
+                                Table
                             </button>
                         </div>
                     )}
                 </div>
 
+                {isLoading && (
+                    <div className={styles.loading}>
+                        Running your report...
+                    </div>
+                )}
+
                 {/* Render grouped report if available */}
-                {(() => {
-                    console.log(
-                        '🎯 [DEBUG] Render check - groupedData:',
-                        groupedData
-                    );
-                    console.log(
-                        '🎯 [DEBUG] Render check - groupedData?.grouped:',
-                        groupedData?.grouped
-                    );
-                    console.log(
-                        '🎯 [DEBUG] Render check - selectedColumns:',
-                        selectedColumns
-                    );
-                    return groupedData && groupedData.grouped;
-                })() && (
+                {!isLoading && groupedData?.grouped && groupedData.groupedData && (
                     <div className={styles.groupedReportContainer}>
                         <GroupedReportRenderer
                             data={{
@@ -7955,15 +7971,13 @@ const GenericReportImproved = ({
                                     : selectedTemplate?.grouping || {}
                             }
                             columns={selectedColumns}
-                            onExport={(data) => {
-                                handleGroupedExport();
-                            }}
+                            onExport={handleGroupedExport}
                         />
                     </div>
                 )}
 
                 {/* Render regular grid if no grouping */}
-                {!groupedData && previewData.length > 0 && (
+                {!isLoading && !groupedData && previewData.length > 0 && (
                     <>
                         <div className={styles.gridContainer}>
                             <div className="grouped-report">
@@ -7979,6 +7993,7 @@ const GenericReportImproved = ({
                                         </div>
                                         <div className="grouped-report-actions">
                                             <button
+                                                type="button"
                                                 className="btn btn-export"
                                                 onClick={() =>
                                                     handleRegularExport()
@@ -7997,67 +8012,27 @@ const GenericReportImproved = ({
                                         <table className="grouped-table">
                                             <thead>
                                                 <tr>
-                                                    {(() => {
-                                                        const headerColumns =
-                                                            previewData.length >
-                                                            0
-                                                                ? Object.keys(
-                                                                      previewData[0]
-                                                                  ).map(
-                                                                      (
-                                                                          key
-                                                                      ) => ({
-                                                                          name: key,
-                                                                          header: key.replace(
-                                                                              /\./g,
-                                                                              ' '
-                                                                          ),
-                                                                      })
-                                                                  )
-                                                                : gridColumns;
-                                                        return headerColumns.map(
-                                                            (col, index) => (
-                                                                <th
-                                                                    key={index}
-                                                                    className="table-header"
-                                                                >
-                                                                    {col.header ||
-                                                                        col.name}
-                                                                </th>
-                                                            )
-                                                        );
-                                                    })()}
+                                                    {previewColumns.map(
+                                                        (col, index) => (
+                                                            <th
+                                                                key={index}
+                                                                className="table-header"
+                                                            >
+                                                                {col.header ||
+                                                                    col.name}
+                                                            </th>
+                                                        )
+                                                    )}
                                                 </tr>
                                             </thead>
                                             <tbody>
-                                                {(() => {
-                                                    console.log(
-                                                        `🎯 [DEBUG] Rendering ${previewData.length} table rows`
-                                                    );
-                                                    // Always use response keys as fallback instead of gridColumns that might have wrong names
-                                                    const actualColumns =
-                                                        previewData.length > 0
-                                                            ? Object.keys(
-                                                                  previewData[0]
-                                                              ).map((key) => ({
-                                                                  name: key,
-                                                                  header: key.replace(
-                                                                      /\./g,
-                                                                      ' '
-                                                                  ),
-                                                              }))
-                                                            : gridColumns;
-                                                    console.log(
-                                                        `🎯 [DEBUG] Using columns:`,
-                                                        actualColumns
-                                                    );
-                                                    return previewData.map(
-                                                        (row, rowIndex) => (
+                                                {previewData.map(
+                                                    (row, rowIndex) => (
                                                             <tr
                                                                 key={rowIndex}
                                                                 className="data-row"
                                                             >
-                                                                {actualColumns.map(
+                                                                {previewColumns.map(
                                                                     (
                                                                         col,
                                                                         colIndex
@@ -8522,8 +8497,7 @@ const GenericReportImproved = ({
                                                                 )}
                                                             </tr>
                                                         )
-                                                    );
-                                                })()}
+                                                )}
                                             </tbody>
                                         </table>
                                     </div>
@@ -8566,8 +8540,11 @@ const GenericReportImproved = ({
                                                         styles.pageSizeSelector
                                                     }
                                                 >
-                                                    <label>Show:</label>
+                                                    <label htmlFor="preview-page-size">
+                                                        Show:
+                                                    </label>
                                                     <select
+                                                        id="preview-page-size"
                                                         value={pageSize}
                                                         onChange={(e) => {
                                                             const newPageSize =
@@ -8578,13 +8555,15 @@ const GenericReportImproved = ({
                                                             setPageSize(
                                                                 newPageSize
                                                             );
-                                                            setCurrentPage(1); // Reset to first page
-                                                            // Re-execute the report with new page size
+                                                            setCurrentPage(1);
                                                             if (
                                                                 previewData.length >
                                                                 0
                                                             ) {
-                                                                executeReport();
+                                                                executeReport({
+                                                                    page: 1,
+                                                                    size: newPageSize,
+                                                                });
                                                             }
                                                         }}
                                                         className={
@@ -8616,6 +8595,7 @@ const GenericReportImproved = ({
                                                     }
                                                 >
                                                     <button
+                                                        type="button"
                                                         onClick={() => {
                                                             if (
                                                                 currentPage > 1
@@ -8626,7 +8606,9 @@ const GenericReportImproved = ({
                                                                 setCurrentPage(
                                                                     newPage
                                                                 );
-                                                                executeReport();
+                                                                executeReport({
+                                                                    page: newPage,
+                                                                });
                                                             }
                                                         }}
                                                         disabled={
@@ -8694,12 +8676,17 @@ const GenericReportImproved = ({
                                                             if (startPage > 1) {
                                                                 pages.push(
                                                                     <button
+                                                                        type="button"
                                                                         key={1}
                                                                         onClick={() => {
                                                                             setCurrentPage(
                                                                                 1
                                                                             );
-                                                                            executeReport();
+                                                                            executeReport(
+                                                                                {
+                                                                                    page: 1,
+                                                                                }
+                                                                            );
                                                                         }}
                                                                         className={`${
                                                                             styles.pageBtn
@@ -8739,12 +8726,17 @@ const GenericReportImproved = ({
                                                             ) {
                                                                 pages.push(
                                                                     <button
+                                                                        type="button"
                                                                         key={i}
                                                                         onClick={() => {
                                                                             setCurrentPage(
                                                                                 i
                                                                             );
-                                                                            executeReport();
+                                                                            executeReport(
+                                                                                {
+                                                                                    page: i,
+                                                                                }
+                                                                            );
                                                                         }}
                                                                         className={`${
                                                                             styles.pageBtn
@@ -8783,6 +8775,7 @@ const GenericReportImproved = ({
                                                                 }
                                                                 pages.push(
                                                                     <button
+                                                                        type="button"
                                                                         key={
                                                                             totalPages
                                                                         }
@@ -8790,7 +8783,11 @@ const GenericReportImproved = ({
                                                                             setCurrentPage(
                                                                                 totalPages
                                                                             );
-                                                                            executeReport();
+                                                                            executeReport(
+                                                                                {
+                                                                                    page: totalPages,
+                                                                                }
+                                                                            );
                                                                         }}
                                                                         className={`${
                                                                             styles.pageBtn
@@ -8813,6 +8810,7 @@ const GenericReportImproved = ({
                                                     </div>
 
                                                     <button
+                                                        type="button"
                                                         onClick={() => {
                                                             const totalPages =
                                                                 Math.ceil(
@@ -8829,7 +8827,9 @@ const GenericReportImproved = ({
                                                                 setCurrentPage(
                                                                     newPage
                                                                 );
-                                                                executeReport();
+                                                                executeReport({
+                                                                    page: newPage,
+                                                                });
                                                             }
                                                         }}
                                                         disabled={
@@ -8870,6 +8870,7 @@ const GenericReportImproved = ({
                                 </p>
                                 <div className={styles.saveButtons}>
                                     <button
+                                        type="button"
                                         className={`${styles.btn} ${styles.btnSuccess}`}
                                         onClick={() => saveReport(false)}
                                         style={{ marginRight: '10px' }}
@@ -8881,6 +8882,7 @@ const GenericReportImproved = ({
                                     </button>
                                     {loadedReportId && (
                                         <button
+                                            type="button"
                                             className={`${styles.btn} ${styles.btnSecondary}`}
                                             onClick={() => saveReport(true)}
                                         >
@@ -8939,6 +8941,7 @@ const GenericReportImproved = ({
                 <div className={styles.headerLeft}>
                     <h1>Report Builder</h1>
                     <button
+                        type="button"
                         className={styles.helpButton}
                         onClick={showGuidedHelp}
                     >
@@ -8953,13 +8956,31 @@ const GenericReportImproved = ({
 
             {/* Calculated Field Modal */}
             {showCalculatedFieldModal && (
-                <div className={styles.modalOverlay}>
-                    <div className={styles.calculatedFieldModal}>
+                <div
+                    className={styles.modalOverlay}
+                    onMouseDown={(e) => {
+                        if (e.target === e.currentTarget) {
+                            handleCalculatedFieldCancel();
+                        }
+                    }}
+                >
+                    <div
+                        className={styles.calculatedFieldModal}
+                        role="dialog"
+                        aria-modal="true"
+                        aria-labelledby="calculated-field-modal-title"
+                        ref={calculatedFieldModalRef}
+                        tabIndex={-1}
+                    >
                         <div className={styles.modalHeader}>
-                            <h3>Add Calculated Field</h3>
+                            <h3 id="calculated-field-modal-title">
+                                Add Calculated Field
+                            </h3>
                             <button
+                                type="button"
                                 className={styles.modalCloseButton}
                                 onClick={handleCalculatedFieldCancel}
+                                aria-label="Close"
                             >
                                 ✕
                             </button>
@@ -9056,12 +9077,14 @@ const GenericReportImproved = ({
 
                         <div className={styles.modalFooter}>
                             <button
+                                type="button"
                                 className={styles.cancelButton}
                                 onClick={handleCalculatedFieldCancel}
                             >
                                 Cancel
                             </button>
                             <button
+                                type="button"
                                 className={styles.addButton}
                                 onClick={handleCalculatedFieldSubmit}
                             >
@@ -9074,14 +9097,32 @@ const GenericReportImproved = ({
 
             {/* Row Exclusion Modal */}
             {showRowExclusionModal && (
-                <div className={styles.modalOverlay}>
-                    <div className={styles.rowExclusionModal}>
+                <div
+                    className={styles.modalOverlay}
+                    onMouseDown={(e) => {
+                        if (e.target === e.currentTarget) {
+                            setShowRowExclusionModal(false);
+                        }
+                    }}
+                >
+                    <div
+                        className={styles.rowExclusionModal}
+                        role="dialog"
+                        aria-modal="true"
+                        aria-labelledby="row-exclusion-modal-title"
+                        ref={rowExclusionModalRef}
+                        tabIndex={-1}
+                    >
                         <div className={styles.modalHeader}>
-                            <h3>Select Rows to Exclude</h3>
+                            <h3 id="row-exclusion-modal-title">
+                                Select Rows to Exclude
+                            </h3>
                             <p>Choose which rows you don't want to include in the export</p>
                             <button
+                                type="button"
                                 className={styles.modalCloseButton}
                                 onClick={() => setShowRowExclusionModal(false)}
+                                aria-label="Close"
                             >
                                 ✕
                             </button>
@@ -9171,12 +9212,14 @@ const GenericReportImproved = ({
 
                         <div className={styles.modalFooter}>
                             <button
+                                type="button"
                                 className={styles.cancelButton}
                                 onClick={() => setShowRowExclusionModal(false)}
                             >
                                 Cancel
                             </button>
                             <button
+                                type="button"
                                 className={styles.confirmButton}
                                 onClick={confirmExportWithExclusion}
                             >