@visns-studio/visns-components 5.14.10 → 5.14.12

package/src/components/generic/GenericReport.jsx

@@ -2,8 +2,8 @@ import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import moment from 'moment';
-import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import GroupedReportRenderer from './GroupedReportRenderer';
+import { formatCellContent } from './shared/formatters';
 import {
     HelpCircle as Question,
     Link as LinkChain,
@@ -30,6 +30,7 @@ import {
     Rss,
     Globe,
     Lock,
+    Database,
 } from 'lucide-react';
 import CustomFetch from '../Fetch';
 import Download from '../Download';
@@ -916,7 +917,8 @@ const wizardSteps = [
         icon: Data,
         description: 'Organize data into groups (optional)',
         guidance: {
-            summary: 'Group your data by a specific field for better organization',
+            summary:
+                'Group your data by a specific field for better organization',
             howTo: [
                 'Enable grouping to organize data into sections',
                 'Choose which field to group by (e.g., Department, Category, Status)',
@@ -1042,7 +1044,7 @@ const GenericReportImproved = ({
 
     // State for pagination - now using server-side pagination
     const [currentPage, setCurrentPage] = useState(1);
-    const [pageSize, setPageSize] = useState(25); // Default to 25 for better UX
+    const [pageSize, setPageSize] = useState(10); // Default to 10 to reduce scrolling
     const [totalPages, setTotalPages] = useState(0);
     const [totalCount, setTotalCount] = useState(0); // Total records from server
 
@@ -1071,13 +1073,13 @@ const GenericReportImproved = ({
         showGroupTotals: true,
         expandable: true,
         groupHeaderStyle: 'primary',
-        emptyRowStyle: 'light'
+        emptyRowStyle: 'light',
     });
 
     // State for custom URLs
     const [customUrls, setCustomUrls] = useState({
         executeUrl: '',
-        exportUrl: ''
+        exportUrl: '',
     });
 
     // Note: Removed table search functionality to simplify user experience
@@ -1416,13 +1418,30 @@ const GenericReportImproved = ({
         currentWizardStep,
     ]);
 
+    // Reset auto-execute flag when user navigates away from preview step
+    useEffect(() => {
+        if (currentWizardStep !== 5) {
+            setHasAutoExecuted(false);
+        }
+    }, [currentWizardStep]);
+
+    // Reset auto-execute flag when report configuration changes
+    useEffect(() => {
+        setHasAutoExecuted(false);
+    }, [
+        selectedTable,
+        selectedColumns.length,
+        filterCriteria,
+        joins.length,
+        groupingConfig,
+    ]);
+
     // Auto-execute report when user reaches step 5 (preview step)
     useEffect(() => {
         if (
             currentWizardStep === 5 && // Step 6 is index 5 (preview step)
             selectedTable &&
             selectedColumns.length > 0 &&
-            previewData.length === 0 && // Only if no data loaded yet
             !isLoading &&
             !hasAutoExecuted // Prevent infinite loops
         ) {
@@ -1433,7 +1452,6 @@ const GenericReportImproved = ({
         currentWizardStep,
         selectedTable,
         selectedColumns.length,
-        previewData.length,
         isLoading,
         hasAutoExecuted,
     ]);
@@ -2241,15 +2259,19 @@ const GenericReportImproved = ({
 
             try {
                 // Check if this is a grouped report
-                const isGroupedReport = grouping?.enabled || selectedTemplate?.grouping?.enabled;
-                
+                const isGroupedReport =
+                    grouping?.enabled || selectedTemplate?.grouping?.enabled;
+
                 if (isGroupedReport) {
                     // Check if we're using a dynamic template (custom grouping) or predefined template
                     const isDynamicTemplate = !!template;
-                    
+
                     // Priority: custom URL > template URL > default URL
-                    const templateExecuteUrl = customUrls.executeUrl || selectedTemplate?.executeUrl || executeUrl;
-                    
+                    const templateExecuteUrl =
+                        customUrls.executeUrl ||
+                        selectedTemplate?.executeUrl ||
+                        executeUrl;
+
                     // Debug logging
                     console.log('🔍 [DEBUG] Grouped Report Detected:', {
                         selectedTemplate: selectedTemplate?.id,
@@ -2263,11 +2285,11 @@ const GenericReportImproved = ({
                         templateGroupingConfig: selectedTemplate?.grouping,
                         customGroupingConfig: groupingConfig,
                         usingCustomUrl: !!customUrls.executeUrl,
-                        usingTemplateExecuteUrl: !!selectedTemplate?.executeUrl
+                        usingTemplateExecuteUrl: !!selectedTemplate?.executeUrl,
                     });
 
                     let payload;
-                    
+
                     if (isDynamicTemplate) {
                         // For dynamic templates, send the complete template configuration
                         payload = {
@@ -2276,20 +2298,21 @@ const GenericReportImproved = ({
                             columns: selectedColumns,
                             joins: joins,
                             filters: flattenFilterCriteria(filterCriteria),
-                            sorting: sortCriteria
+                            sorting: sortCriteria,
                         };
                     } else {
                         // For predefined templates, use the existing approach
                         payload = {
-                            template_id: selectedTemplate?.id || 'utilization_planning',
-                            filters: []
+                            template_id:
+                                selectedTemplate?.id || 'utilization_planning',
+                            filters: [],
                         };
                     }
-                    
+
                     console.log('🚀 [DEBUG] Sending grouped report request:', {
                         url: templateExecuteUrl,
                         method: 'POST',
-                        payload
+                        payload,
                     });
 
                     const result = await CustomFetch(
@@ -2301,7 +2324,10 @@ const GenericReportImproved = ({
                     console.log('📊 [DEBUG] Grouped report response:', result);
 
                     if (result.error) {
-                        console.error('❌ Grouped report execution error:', result.error);
+                        console.error(
+                            '❌ Grouped report execution error:',
+                            result.error
+                        );
                         return { data: [], count: 0 };
                     }
 
@@ -2362,8 +2388,11 @@ const GenericReportImproved = ({
                 };
 
                 // Priority: custom URL > template URL > default URL
-                const finalExecuteUrl = customUrls.executeUrl || selectedTemplate?.executeUrl || executeUrl;
-                
+                const finalExecuteUrl =
+                    customUrls.executeUrl ||
+                    selectedTemplate?.executeUrl ||
+                    executeUrl;
+
                 console.log('🔍 [DEBUG] Regular Report API Call:', {
                     selectedTemplate: selectedTemplate?.id,
                     customExecuteUrl: customUrls.executeUrl,
@@ -2371,7 +2400,7 @@ const GenericReportImproved = ({
                     defaultExecuteUrl: executeUrl,
                     finalExecuteUrl,
                     usingCustomUrl: !!customUrls.executeUrl,
-                    usingTemplateExecuteUrl: !!selectedTemplate?.executeUrl
+                    usingTemplateExecuteUrl: !!selectedTemplate?.executeUrl,
                 });
 
                 const result = await CustomFetch(
@@ -2430,7 +2459,7 @@ const GenericReportImproved = ({
             selectedTemplate: selectedTemplate?.id,
             hasGrouping: selectedTemplate?.grouping?.enabled,
             executeUrl,
-            setting
+            setting,
         });
 
         if (!selectedTable || selectedColumns.length === 0) {
@@ -2449,22 +2478,25 @@ const GenericReportImproved = ({
             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
+                templateGroupingConfig: selectedTemplate?.grouping,
             });
-            console.log('🎯 [DEBUG] Initial fetchedDataCount:', fetchedDataCount);
-            
+            console.log(
+                '🎯 [DEBUG] Initial fetchedDataCount:',
+                fetchedDataCount
+            );
+
             if (hasGrouping) {
                 // Determine which grouping configuration to use
                 let effectiveGrouping;
                 let dynamicTemplate;
-                
+
                 if (hasCustomGrouping && groupingConfig.groupByField) {
                     // Create dynamic template with custom grouping configuration
                     dynamicTemplate = {
@@ -2485,24 +2517,34 @@ const GenericReportImproved = ({
                             showGroupTotals: groupingConfig.showGroupTotals,
                             expandable: groupingConfig.expandable,
                             groupHeaderStyle: groupingConfig.groupHeaderStyle,
-                            emptyRowStyle: groupingConfig.emptyRowStyle
-                        }
+                            emptyRowStyle: groupingConfig.emptyRowStyle,
+                        },
                     };
                     effectiveGrouping = dynamicTemplate.grouping;
-                    
-                    console.log('🏗️ [DEBUG] Created dynamic template for custom grouping:', dynamicTemplate);
+
+                    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');
+                    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);
+                    console.log(
+                        '📋 [DEBUG] Using template grouping:',
+                        effectiveGrouping
+                    );
                 }
-                
+
                 // For grouped reports, fetch data with reasonable limit
                 const groupedResult = await dataSource({
                     skip: 0,
@@ -2510,79 +2552,200 @@ const GenericReportImproved = ({
                     sortInfo: null,
                     filterValue: null,
                     grouping: effectiveGrouping,
-                    template: dynamicTemplate // Pass dynamic template if created
+                    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);
+                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) {
+                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 = groupedResult.data.groupedData?.totalRecords || 0;
-                    console.log('🎯 [DEBUG] After assignment - fetchedDataCount:', fetchedDataCount);
+                    console.log(
+                        '🎯 [DEBUG] Before assignment - groupedResult.data.groupedData.totalRecords:',
+                        groupedResult.data.groupedData?.totalRecords
+                    );
+                    fetchedDataCount =
+                        groupedResult.data.groupedData?.totalRecords || 0;
+                    console.log(
+                        '🎯 [DEBUG] After assignment - fetchedDataCount:',
+                        fetchedDataCount
+                    );
                     console.log('🔢 [DEBUG] Grouped data count:', {
-                        totalRecords: groupedResult.data.groupedData?.totalRecords,
+                        totalRecords:
+                            groupedResult.data.groupedData?.totalRecords,
                         fetchedDataCount,
-                        hasGroups: !!groupedResult.data.groupedData?.groups
+                        hasGroups: !!groupedResult.data.groupedData?.groups,
                     });
                 } 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);
+                    console.log(
+                        '🎯 [DEBUG] Fallback data length:',
+                        fallbackData.length
+                    );
                     setPreviewData(fallbackData);
                     fetchedDataCount = fallbackData.length;
                 }
             } else {
                 // Regular non-grouped report
-                const firstPageResult = await dataSource({
-                    skip: 0,
+                const currentPageResult = await dataSource({
+                    skip: (currentPage - 1) * pageSize,
                     limit: pageSize,
                     sortInfo: null,
                     filterValue: null,
                 });
 
-                if (firstPageResult.data && firstPageResult.data.length > 0) {
-                    setPreviewData(firstPageResult.data);
-                    fetchedDataCount = firstPageResult.data.length;
+                if (
+                    currentPageResult.data &&
+                    currentPageResult.data.length > 0
+                ) {
+                    setPreviewData(currentPageResult.data);
+                    fetchedDataCount = currentPageResult.data.length;
                 }
             }
 
             // Create grid columns for regular reports only
             if (!hasGrouping) {
                 const dataToProcess = previewData.length > 0 ? previewData : [];
-                
+
                 if (dataToProcess.length > 0) {
                     // Create grid columns dynamically from actual data with smart formatting
                     const firstRow = dataToProcess[0];
                     const dynamicColumns = Object.keys(firstRow).map((key) => {
-                    // Find the column metadata from selected columns to get type information
-                    const columnMetadata = selectedColumns.find((col) => {
-                        // Handle both direct column names and aliased names
-                        return (
-                            col.column === key ||
-                            col.displayName === key ||
-                            key.includes(col.column) ||
-                            col.column.includes(key)
-                        );
-                    });
+                        // Find the column metadata from selected columns to get type information
+                        const columnMetadata = selectedColumns.find((col) => {
+                            // Handle both direct column names and aliased names
+                            return (
+                                col.column === key ||
+                                col.displayName === key ||
+                                key.includes(col.column) ||
+                                col.column.includes(key)
+                            );
+                        });
 
-                    // Check if any value in this column is JSON
-                    const hasJsonValues = dataToProcess.some((row) => {
-                        return isJsonValue(row[key]);
-                    });
+                        // Check if any value in this column is JSON
+                        const hasJsonValues = dataToProcess.some((row) => {
+                            return isJsonValue(row[key]);
+                        });
+
+                        // Try to find column type from table columns with improved detection
+                        let columnType = 'varchar'; // default
+                        if (columnMetadata) {
+                            const tableColumn = tableColumns.find(
+                                (tc) => tc.name === columnMetadata.column
+                            );
+                            if (tableColumn) {
+                                columnType = tableColumn.type;
+                            } else {
+                                // Check in joined table columns
+                                joins.forEach((join) => {
+                                    if (join.availableColumns) {
+                                        const joinedColumn =
+                                            join.availableColumns.find(
+                                                (jc) =>
+                                                    jc.name ===
+                                                    columnMetadata.column
+                                            );
+                                        if (joinedColumn) {
+                                            columnType = joinedColumn.type;
+                                        }
+                                    }
+                                });
+                            }
+                        }
 
-                    // Try to find column type from table columns with improved detection
-                    let columnType = 'varchar'; // default
-                    if (columnMetadata) {
+                        // Enhanced column type detection for status fields
+                        if (!columnMetadata || columnType === 'varchar') {
+                            // Check if this looks like a status field based on column name
+                            const lowerKey = key.toLowerCase();
+                            if (
+                                lowerKey.includes('status') ||
+                                lowerKey.includes('active') ||
+                                lowerKey.includes('enabled') ||
+                                lowerKey.includes('disabled')
+                            ) {
+                                // Check if values look like boolean/status values
+                                const sampleValues = firstPageResult.data
+                                    .slice(0, 5)
+                                    .map((row) => row[key]);
+                                const hasStatusValues = sampleValues.some(
+                                    (val) =>
+                                        val === 0 ||
+                                        val === 1 ||
+                                        val === '0' ||
+                                        val === '1' ||
+                                        val === true ||
+                                        val === false ||
+                                        val === 'true' ||
+                                        val === 'false'
+                                );
+                                if (hasStatusValues) {
+                                    columnType = 'tinyint'; // This will trigger status formatting
+                                }
+                            }
+                        }
+
+                        return {
+                            name: key,
+                            header: formatName(key), // Use formatted name as header
+                            defaultFlex: 1,
+                            minWidth: hasJsonValues ? 250 : 100, // Wider columns for JSON data
+                            maxWidth: hasJsonValues ? 400 : undefined, // Max width for JSON columns
+                            render: ({ value }) => {
+                                // Use smart formatting for the cell value
+                                const formattedValue = formatSmartValue(
+                                    value,
+                                    key,
+                                    columnType
+                                );
+
+                                // For JSON content, wrap in a container that allows full height expansion
+                                if (isJsonValue(value)) {
+                                    return (
+                                        <div
+                                            style={{
+                                                whiteSpace: 'normal',
+                                                wordWrap: 'break-word',
+                                                lineHeight: '1.4',
+                                                padding: '4px 0',
+                                                width: '100%',
+                                            }}
+                                        >
+                                            {formattedValue}
+                                        </div>
+                                    );
+                                }
+
+                                return formattedValue;
+                            },
+                        };
+                    });
+                    setGridColumns(dynamicColumns);
+                } else {
+                    // Fallback to selected columns if no data
+                    const columns = selectedColumns.map((col) => {
+                        // Find column type from table columns with enhanced detection
+                        let columnType = 'varchar';
                         const tableColumn = tableColumns.find(
-                            (tc) => tc.name === columnMetadata.column
+                            (tc) => tc.name === col.column
                         );
                         if (tableColumn) {
                             columnType = tableColumn.type;
@@ -2592,9 +2755,7 @@ const GenericReportImproved = ({
                                 if (join.availableColumns) {
                                     const joinedColumn =
                                         join.availableColumns.find(
-                                            (jc) =>
-                                                jc.name ===
-                                                columnMetadata.column
+                                            (jc) => jc.name === col.column
                                         );
                                     if (joinedColumn) {
                                         columnType = joinedColumn.type;
@@ -2602,144 +2763,53 @@ const GenericReportImproved = ({
                                 }
                             });
                         }
-                    }
 
-                    // Enhanced column type detection for status fields
-                    if (!columnMetadata || columnType === 'varchar') {
-                        // Check if this looks like a status field based on column name
-                        const lowerKey = key.toLowerCase();
-                        if (
-                            lowerKey.includes('status') ||
-                            lowerKey.includes('active') ||
-                            lowerKey.includes('enabled') ||
-                            lowerKey.includes('disabled')
-                        ) {
-                            // Check if values look like boolean/status values
-                            const sampleValues = firstPageResult.data
-                                .slice(0, 5)
-                                .map((row) => row[key]);
-                            const hasStatusValues = sampleValues.some(
-                                (val) =>
-                                    val === 0 ||
-                                    val === 1 ||
-                                    val === '0' ||
-                                    val === '1' ||
-                                    val === true ||
-                                    val === false ||
-                                    val === 'true' ||
-                                    val === 'false'
-                            );
-                            if (hasStatusValues) {
+                        // Enhanced column type detection for status fields
+                        if (columnType === 'varchar') {
+                            const lowerColumn = col.column.toLowerCase();
+                            if (
+                                lowerColumn.includes('status') ||
+                                lowerColumn.includes('active') ||
+                                lowerColumn.includes('enabled') ||
+                                lowerColumn.includes('disabled')
+                            ) {
                                 columnType = 'tinyint'; // This will trigger status formatting
                             }
                         }
-                    }
-
-                    return {
-                        name: key,
-                        header: formatName(key), // Use formatted name as header
-                        defaultFlex: 1,
-                        minWidth: hasJsonValues ? 250 : 100, // Wider columns for JSON data
-                        maxWidth: hasJsonValues ? 400 : undefined, // Max width for JSON columns
-                        render: ({ value }) => {
-                            // Use smart formatting for the cell value
-                            const formattedValue = formatSmartValue(
-                                value,
-                                key,
-                                columnType
-                            );
 
-                            // For JSON content, wrap in a container that allows full height expansion
-                            if (isJsonValue(value)) {
-                                return (
-                                    <div
-                                        style={{
-                                            whiteSpace: 'normal',
-                                            wordWrap: 'break-word',
-                                            lineHeight: '1.4',
-                                            padding: '4px 0',
-                                            width: '100%',
-                                        }}
-                                    >
-                                        {formattedValue}
-                                    </div>
+                        return {
+                            name:
+                                col.displayName || `${col.table}.${col.column}`,
+                            header: col.displayName || formatName(col.column),
+                            defaultFlex: 1,
+                            minWidth: 100,
+                            render: ({ value }) => {
+                                const formattedValue = formatSmartValue(
+                                    value,
+                                    col.column,
+                                    columnType
                                 );
-                            }
 
-                            return formattedValue;
-                        },
-                    };
-                    });
-                    setGridColumns(dynamicColumns);
-                } else {
-                    // Fallback to selected columns if no data
-                    const columns = selectedColumns.map((col) => {
-                    // Find column type from table columns with enhanced detection
-                    let columnType = 'varchar';
-                    const tableColumn = tableColumns.find(
-                        (tc) => tc.name === col.column
-                    );
-                    if (tableColumn) {
-                        columnType = tableColumn.type;
-                    } else {
-                        // Check in joined table columns
-                        joins.forEach((join) => {
-                            if (join.availableColumns) {
-                                const joinedColumn = join.availableColumns.find(
-                                    (jc) => jc.name === col.column
-                                );
-                                if (joinedColumn) {
-                                    columnType = joinedColumn.type;
+                                // For JSON content, wrap in a container that allows full height expansion
+                                if (isJsonValue(value)) {
+                                    return (
+                                        <div
+                                            style={{
+                                                whiteSpace: 'normal',
+                                                wordWrap: 'break-word',
+                                                lineHeight: '1.4',
+                                                padding: '4px 0',
+                                                width: '100%',
+                                            }}
+                                        >
+                                            {formattedValue}
+                                        </div>
+                                    );
                                 }
-                            }
-                        });
-                    }
-
-                    // Enhanced column type detection for status fields
-                    if (columnType === 'varchar') {
-                        const lowerColumn = col.column.toLowerCase();
-                        if (
-                            lowerColumn.includes('status') ||
-                            lowerColumn.includes('active') ||
-                            lowerColumn.includes('enabled') ||
-                            lowerColumn.includes('disabled')
-                        ) {
-                            columnType = 'tinyint'; // This will trigger status formatting
-                        }
-                    }
-
-                    return {
-                        name: col.displayName || `${col.table}.${col.column}`,
-                        header: col.displayName || formatName(col.column),
-                        defaultFlex: 1,
-                        minWidth: 100,
-                        render: ({ value }) => {
-                            const formattedValue = formatSmartValue(
-                                value,
-                                col.column,
-                                columnType
-                            );
 
-                            // For JSON content, wrap in a container that allows full height expansion
-                            if (isJsonValue(value)) {
-                                return (
-                                    <div
-                                        style={{
-                                            whiteSpace: 'normal',
-                                            wordWrap: 'break-word',
-                                            lineHeight: '1.4',
-                                            padding: '4px 0',
-                                            width: '100%',
-                                        }}
-                                    >
-                                        {formattedValue}
-                                    </div>
-                                );
-                            }
-
-                            return formattedValue;
-                        },
-                    };
+                                return formattedValue;
+                            },
+                        };
                     });
                     setGridColumns(columns);
                 }
@@ -2749,10 +2819,12 @@ const GenericReportImproved = ({
                 setCurrentWizardStep(wizardSteps.length - 1);
             }
 
-            // Show success message with available data count
-            console.log('🎯 [DEBUG] Final fetchedDataCount before toast:', fetchedDataCount);
-            console.log('🎯 [DEBUG] Type of fetchedDataCount:', typeof fetchedDataCount);
-            toast.success(`Found ${fetchedDataCount} records`);
+            // Report executed successfully
+            console.log('🎯 [DEBUG] Final fetchedDataCount:', fetchedDataCount);
+            console.log(
+                '🎯 [DEBUG] Type of fetchedDataCount:',
+                typeof fetchedDataCount
+            );
         } catch (error) {
             toast.error('Failed to execute report');
             console.error('Error executing report:', error);
@@ -2853,8 +2925,9 @@ const GenericReportImproved = ({
                     showEmptyRows: config.grouping.showEmptyRows || false,
                     showGroupTotals: config.grouping.showGroupTotals || true,
                     expandable: config.grouping.expandable || true,
-                    groupHeaderStyle: config.grouping.groupHeaderStyle || 'primary',
-                    emptyRowStyle: config.grouping.emptyRowStyle || 'light'
+                    groupHeaderStyle:
+                        config.grouping.groupHeaderStyle || 'primary',
+                    emptyRowStyle: config.grouping.emptyRowStyle || 'light',
                 });
             } else {
                 // Reset grouping config if not present in saved report
@@ -2869,7 +2942,7 @@ const GenericReportImproved = ({
                     showGroupTotals: true,
                     expandable: true,
                     groupHeaderStyle: 'primary',
-                    emptyRowStyle: 'light'
+                    emptyRowStyle: 'light',
                 });
             }
 
@@ -2904,9 +2977,9 @@ const GenericReportImproved = ({
                 templateId: template.id,
                 templateName: template.name,
                 hasGrouping: template.grouping?.enabled,
-                groupingConfig: template.grouping
+                groupingConfig: template.grouping,
             });
-            
+
             setSelectedTemplate(template);
 
             // Set main table
@@ -2966,32 +3039,57 @@ const GenericReportImproved = ({
                 setSelectedColumns(formattedColumns);
             }
 
-            // Apply quick filters as default filter criteria
-            if (template.quickFilters) {
-                const defaultFilters = template.quickFilters
-                    .filter(
-                        (filter) =>
-                            filter.value && filter.value !== 'current_user'
-                    ) // Skip user-specific filters for now
-                    .map((filter) => ({
-                        id: filter.id,
-                        field: filter.field,
-                        operator: filter.operator || '=',
-                        value: filter.value,
-                        label: filter.label,
-                    }));
+            // Apply template quick filters as default filters
+            if (template.quickFilters && template.quickFilters.length > 0) {
+                const updatedFilterCriteria = {
+                    operator: 'AND',
+                    groups: [
+                        {
+                            operator: 'AND',
+                            filters: [],
+                        },
+                    ],
+                };
 
-                if (defaultFilters.length > 0) {
-                    setFilterCriteria({
-                        operator: 'AND',
-                        groups: [
-                            {
-                                operator: 'AND',
-                                filters: defaultFilters,
-                            },
-                        ],
-                    });
-                }
+                template.quickFilters.forEach((quickFilter) => {
+                    let filterValue = convertDynamicDateValue(
+                        quickFilter.value
+                    );
+
+                    // Parse the field to extract table and column
+                    const fieldParts = quickFilter.field.split('.');
+                    const table = fieldParts[0];
+                    const column = fieldParts.slice(1).join('.'); // Handle cases like "leads.user.name"
+
+                    // Convert date range objects to comma-separated string for BETWEEN operator
+                    if (
+                        quickFilter.type === 'date_range' &&
+                        typeof filterValue === 'object' &&
+                        filterValue.start &&
+                        filterValue.end
+                    ) {
+                        filterValue = `${filterValue.start},${filterValue.end}`;
+                    }
+
+                    const newFilter = {
+                        id: `template_${quickFilter.id}_${Date.now()}`,
+                        field: quickFilter.field,
+                        table: table,
+                        column: column,
+                        operator:
+                            quickFilter.operator ||
+                            (quickFilter.type === 'date_range'
+                                ? 'BETWEEN'
+                                : '='),
+                        value: filterValue,
+                        label: quickFilter.label,
+                        type: quickFilter.type,
+                    };
+
+                    updatedFilterCriteria.groups[0].filters.push(newFilter);
+                });
+
+                setFilterCriteria(updatedFilterCriteria);
             }
 
             // Apply template grouping configuration
@@ -3006,14 +3104,15 @@ const GenericReportImproved = ({
                     showEmptyRows: template.grouping.showEmptyRows || false,
                     showGroupTotals: template.grouping.showGroupTotals || true,
                     expandable: template.grouping.expandable !== false, // Default true
-                    groupHeaderStyle: template.grouping.groupHeaderStyle || 'primary',
-                    emptyRowStyle: template.grouping.emptyRowStyle || 'light'
+                    groupHeaderStyle:
+                        template.grouping.groupHeaderStyle || 'primary',
+                    emptyRowStyle: template.grouping.emptyRowStyle || 'light',
                 });
-                
+
                 console.log('🏗️ [DEBUG] Applied template grouping config:', {
                     enabled: template.grouping.enabled,
                     groupByField: template.grouping.groupByField,
-                    groupDisplayName: template.grouping.groupDisplayName
+                    groupDisplayName: template.grouping.groupDisplayName,
                 });
             } else {
                 // Reset grouping config if template doesn't have grouping
@@ -3028,7 +3127,7 @@ const GenericReportImproved = ({
                     showGroupTotals: true,
                     expandable: true,
                     groupHeaderStyle: 'primary',
-                    emptyRowStyle: 'light'
+                    emptyRowStyle: 'light',
                 });
             }
 
@@ -4641,32 +4740,26 @@ const GenericReportImproved = ({
         handleRemoveFilterCriterion(groupIndex, filterIndex);
     };
 
-    // Apply template-based quick filter
-    const applyTemplateQuickFilter = (quickFilter) => {
-        let filterValue = quickFilter.value;
-
-        // Handle dynamic date ranges
-        switch (quickFilter.value) {
+    // Helper function to convert dynamic date values to actual date ranges
+    const convertDynamicDateValue = (value) => {
+        switch (value) {
             case 'current_week':
-                filterValue = {
+                return {
                     start: moment().startOf('week').format('YYYY-MM-DD'),
                     end: moment().endOf('week').format('YYYY-MM-DD'),
                 };
-                break;
             case 'next_30_days':
-                filterValue = {
+                return {
                     start: moment().format('YYYY-MM-DD'),
                     end: moment().add(30, 'days').format('YYYY-MM-DD'),
                 };
-                break;
             case 'last_30_days':
-                filterValue = {
+                return {
                     start: moment().subtract(30, 'days').format('YYYY-MM-DD'),
                     end: moment().format('YYYY-MM-DD'),
                 };
-                break;
             case 'last_quarter':
-                filterValue = {
+                return {
                     start: moment()
                         .subtract(1, 'quarter')
                         .startOf('quarter')
@@ -4676,9 +4769,8 @@ const GenericReportImproved = ({
                         .endOf('quarter')
                         .format('YYYY-MM-DD'),
                 };
-                break;
             case 'last_year':
-                filterValue = {
+                return {
                     start: moment()
                         .subtract(1, 'year')
                         .startOf('year')
@@ -4688,12 +4780,49 @@ const GenericReportImproved = ({
                         .endOf('year')
                         .format('YYYY-MM-DD'),
                 };
-                break;
+            case 'today':
+                return moment().format('YYYY-MM-DD');
+            case 'yesterday':
+                return moment().subtract(1, 'day').format('YYYY-MM-DD');
+            case 'current_month':
+                return {
+                    start: moment().startOf('month').format('YYYY-MM-DD'),
+                    end: moment().endOf('month').format('YYYY-MM-DD'),
+                };
+            case 'current_year':
+                return {
+                    start: moment().startOf('year').format('YYYY-MM-DD'),
+                    end: moment().endOf('year').format('YYYY-MM-DD'),
+                };
+            default:
+                return value; // Return original value if no conversion needed
+        }
+    };
+
+    // Apply template-based quick filter
+    const applyTemplateQuickFilter = (quickFilter) => {
+        let filterValue = convertDynamicDateValue(quickFilter.value);
+
+        // Parse the field to extract table and column
+        const fieldParts = quickFilter.field.split('.');
+        const table = fieldParts[0];
+        const column = fieldParts.slice(1).join('.'); // Handle cases like "leads.user.name"
+
+        // Convert date range objects to comma-separated string for BETWEEN operator
+        if (
+            quickFilter.type === 'date_range' &&
+            typeof filterValue === 'object' &&
+            filterValue.start &&
+            filterValue.end
+        ) {
+            filterValue = `${filterValue.start},${filterValue.end}`;
         }
 
         const newFilter = {
             id: `template_${quickFilter.id}_${Date.now()}`,
             field: quickFilter.field,
+            table: table,
+            column: column,
             operator:
                 quickFilter.operator ||
                 (quickFilter.type === 'date_range' ? 'BETWEEN' : '='),
@@ -6412,8 +6541,11 @@ const GenericReportImproved = ({
             console.log('📁 Generated filename:', fileName);
 
             // Priority: custom export URL > template export URL > default export URL
-            const finalExportUrl = customUrls.exportUrl || selectedTemplate?.exportUrl || exportUrl;
-            
+            const finalExportUrl =
+                customUrls.exportUrl ||
+                selectedTemplate?.exportUrl ||
+                exportUrl;
+
             console.log('🔍 [DEBUG] Export API Call:', {
                 selectedTemplate: selectedTemplate?.id,
                 customExportUrl: customUrls.exportUrl,
@@ -6421,7 +6553,7 @@ const GenericReportImproved = ({
                 defaultExportUrl: exportUrl,
                 finalExportUrl,
                 usingCustomExportUrl: !!customUrls.exportUrl,
-                usingTemplateExportUrl: !!selectedTemplate?.exportUrl
+                usingTemplateExportUrl: !!selectedTemplate?.exportUrl,
             });
 
             // Use Download component which handles error checking and blob download properly
@@ -6558,9 +6690,12 @@ const GenericReportImproved = ({
             groupedData: groupedData,
             hasGroupedData: !!groupedData,
             hasGroups: !!(groupedData && groupedData.groups),
-            groupsLength: groupedData && groupedData.groups ? groupedData.groups.length : 'undefined',
+            groupsLength:
+                groupedData && groupedData.groups
+                    ? groupedData.groups.length
+                    : 'undefined',
             selectedColumns: selectedColumns,
-            selectedTemplate: selectedTemplate?.name
+            selectedTemplate: selectedTemplate?.name,
         });
 
         // Check the correct path: groupedData.groupedData.groups
@@ -6569,9 +6704,15 @@ const GenericReportImproved = ({
             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'
+                hasGroupedDataProperty: !!(
+                    groupedData && groupedData.groupedData
+                ),
+                hasGroups: !!(
+                    groupedData &&
+                    groupedData.groupedData &&
+                    groupedData.groupedData.groups
+                ),
+                groupsLength: actualGroups ? actualGroups.length : 'undefined',
             });
             toast.error('No grouped data available for export');
             return;
@@ -6585,7 +6726,9 @@ const GenericReportImproved = ({
             const worksheetData = [];
 
             // Add headers
-            const headers = selectedColumns.map(col => col.displayName || col.column);
+            const headers = selectedColumns.map(
+                (col) => col.displayName || col.column
+            );
             worksheetData.push(headers);
 
             // Helper function to get cell value (same logic as SectionGroupedReport)
@@ -6595,13 +6738,25 @@ const GenericReportImproved = ({
                 let value;
 
                 // Try multiple field access patterns
-                if (column.displayName && row[`\`${column.displayName}\``] !== undefined) {
+                if (
+                    column.displayName &&
+                    row[`\`${column.displayName}\``] !== undefined
+                ) {
                     value = row[`\`${column.displayName}\``];
-                } else if (column.displayName && row[column.displayName] !== undefined) {
+                } else if (
+                    column.displayName &&
+                    row[column.displayName] !== undefined
+                ) {
                     value = row[column.displayName];
-                } else if (column.table && row[`${column.table}_${column.column}`] !== undefined) {
+                } else if (
+                    column.table &&
+                    row[`${column.table}_${column.column}`] !== undefined
+                ) {
                     value = row[`${column.table}_${column.column}`];
-                } else if (column.table && row[`\`${column.table}_${column.column}\``] !== undefined) {
+                } else if (
+                    column.table &&
+                    row[`\`${column.table}_${column.column}\``] !== undefined
+                ) {
                     value = row[`\`${column.table}_${column.column}\``];
                 } else if (row[column.column] !== undefined) {
                     value = row[column.column];
@@ -6613,11 +6768,11 @@ const GenericReportImproved = ({
 
                 // Format the value
                 if (value === null || value === undefined) return '';
-                
+
                 // Handle dates
                 if (column.type === 'date' || column.type === 'datetime') {
                     if (value && moment(value).isValid()) {
-                        return column.type === 'date' 
+                        return column.type === 'date'
                             ? moment(value).format('DD/MM/YYYY')
                             : moment(value).format('DD/MM/YYYY HH:mm:ss');
                     }
@@ -6625,24 +6780,41 @@ const GenericReportImproved = ({
 
                 // Handle Comments field - strip HTML and formatting
                 if (column.displayName === 'Comments' && value) {
-                    return value.replace(/• /g, '').replace(/<[^>]*>/g, '').trim();
+                    return value
+                        .replace(/• /g, '')
+                        .replace(/<[^>]*>/g, '')
+                        .trim();
                 }
 
                 // Handle ABN (Australian Business Number) columns for export
-                if ((column.displayName && column.displayName.toLowerCase().includes('abn')) || 
-                    (column.column && column.column.toLowerCase().includes('abn'))) {
+                if (
+                    (column.displayName &&
+                        column.displayName.toLowerCase().includes('abn')) ||
+                    (column.column &&
+                        column.column.toLowerCase().includes('abn'))
+                ) {
                     const cleanABN = String(value).replace(/\s/g, '');
                     if (cleanABN.length === 11 && /^\d{11}$/.test(cleanABN)) {
-                        return `${cleanABN.slice(0,2)} ${cleanABN.slice(2,5)} ${cleanABN.slice(5,8)} ${cleanABN.slice(8,11)}`;
+                        return `${cleanABN.slice(0, 2)} ${cleanABN.slice(
+                            2,
+                            5
+                        )} ${cleanABN.slice(5, 8)} ${cleanABN.slice(8, 11)}`;
                     }
                 }
 
                 // Handle ACN (Australian Company Number) columns for export
-                if ((column.displayName && column.displayName.toLowerCase().includes('acn')) || 
-                    (column.column && column.column.toLowerCase().includes('acn'))) {
+                if (
+                    (column.displayName &&
+                        column.displayName.toLowerCase().includes('acn')) ||
+                    (column.column &&
+                        column.column.toLowerCase().includes('acn'))
+                ) {
                     const cleanACN = String(value).replace(/\s/g, '');
                     if (cleanACN.length === 9 && /^\d{9}$/.test(cleanACN)) {
-                        return `${cleanACN.slice(0,3)} ${cleanACN.slice(3,6)} ${cleanACN.slice(6,9)}`;
+                        return `${cleanACN.slice(0, 3)} ${cleanACN.slice(
+                            3,
+                            6
+                        )} ${cleanACN.slice(6, 9)}`;
                     }
                 }
 
@@ -6652,15 +6824,18 @@ const GenericReportImproved = ({
             // Add data for each group
             actualGroups.forEach((group, groupIndex) => {
                 // Add group header row
-                const groupDisplayName = selectedTemplate?.grouping?.groupDisplayName || 'Group';
+                const groupDisplayName =
+                    selectedTemplate?.grouping?.groupDisplayName || 'Group';
                 const groupHeaderRow = Array(headers.length).fill('');
                 groupHeaderRow[0] = `${groupDisplayName}: ${group.groupDisplayName}`;
                 worksheetData.push(groupHeaderRow);
 
                 // Add data rows for this group
                 const allRows = [...group.rows, ...(group.emptyRows || [])];
-                allRows.forEach(row => {
-                    const dataRow = selectedColumns.map(column => getCellValue(row, column));
+                allRows.forEach((row) => {
+                    const dataRow = selectedColumns.map((column) =>
+                        getCellValue(row, column)
+                    );
                     worksheetData.push(dataRow);
                 });
 
@@ -6674,34 +6849,45 @@ const GenericReportImproved = ({
             const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
 
             // Set column widths based on content
-            const colWidths = selectedColumns.map(column => {
+            const colWidths = selectedColumns.map((column) => {
                 switch (column.displayName) {
-                    case 'Comments': return { wch: 40 };
+                    case 'Comments':
+                        return { wch: 40 };
                     case 'Project':
-                    case 'Project Name': return { wch: 25 };
+                    case 'Project Name':
+                        return { wch: 25 };
                     case 'User':
-                    case 'Assigned User': return { wch: 20 };
+                    case 'Assigned User':
+                        return { wch: 20 };
                     case 'Start Date':
                     case 'End Date':
-                    case 'Database Updated': return { wch: 15 };
-                    default: return { wch: 18 };
+                    case 'Database Updated':
+                        return { wch: 15 };
+                    default:
+                        return { wch: 18 };
                 }
             });
             worksheet['!cols'] = colWidths;
 
-
             // Add worksheet to workbook
             const sheetName = selectedTemplate.name || 'Grouped Report';
             XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
 
             // Generate file and download
-            const filename = `${selectedTemplate.name.replace(/[^a-zA-Z0-9]/g, '_')}_grouped_report_${new Date().toISOString().split('T')[0]}.xlsx`;
-            const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
-            const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-            
+            const filename = `${selectedTemplate.name.replace(
+                /[^a-zA-Z0-9]/g,
+                '_'
+            )}_grouped_report_${new Date().toISOString().split('T')[0]}.xlsx`;
+            const excelBuffer = XLSX.write(workbook, {
+                bookType: 'xlsx',
+                type: 'array',
+            });
+            const blob = new Blob([excelBuffer], {
+                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            });
+
             saveAs(blob, filename);
             toast.success('Excel export completed successfully!');
-
         } catch (error) {
             console.error('Export error:', error);
             toast.error(`Export failed: ${error.message}`);
@@ -6785,7 +6971,9 @@ const GenericReportImproved = ({
                         joins: joins,
                         filters: filterCriteria,
                         sorting: sortCriteria,
-                        grouping: groupingConfig.enabled ? groupingConfig : null,
+                        grouping: groupingConfig.enabled
+                            ? groupingConfig
+                            : null,
                         isGrouped: groupingConfig.enabled,
                         customCalculatedFields: customCalculatedFields,
                         customUrls: customUrls,
@@ -6851,187 +7039,288 @@ const GenericReportImproved = ({
                             <input
                                 type="checkbox"
                                 checked={groupingConfig.enabled}
-                                onChange={(e) => setGroupingConfig({
-                                    ...groupingConfig,
-                                    enabled: e.target.checked,
-                                    // Reset fields when disabled
-                                    ...(e.target.checked ? {} : {
-                                        groupByField: '',
-                                        groupDisplayName: ''
+                                onChange={(e) =>
+                                    setGroupingConfig({
+                                        ...groupingConfig,
+                                        enabled: e.target.checked,
+                                        // Reset fields when disabled
+                                        ...(e.target.checked
+                                            ? {}
+                                            : {
+                                                  groupByField: '',
+                                                  groupDisplayName: '',
+                                              }),
                                     })
-                                })}
+                                }
                                 className={styles.toggleInput}
                             />
                             <span className={styles.toggleCheckbox}></span>
-                            <span className={styles.toggleText}>Enable Grouping</span>
+                            <span className={styles.toggleText}>
+                                Enable Grouping
+                            </span>
                         </label>
                         <p className={styles.helpText}>
-                            Group data by a field to organize results into sections (e.g., "Projects by Facility")
+                            Group data by a field to organize results into
+                            sections (e.g., "Projects by Facility")
                         </p>
                     </div>
-                    
+
                     {groupingConfig.enabled && (
                         <div className={styles.groupingOptions}>
                             {/* Group By Field Selection */}
                             <div className={styles.formGroup}>
-                                <label className={styles.formLabel}>Group By Field *</label>
+                                <label className={styles.formLabel}>
+                                    Group By Field *
+                                </label>
                                 <select
                                     value={groupingConfig.groupByField}
                                     onChange={(e) => {
-                                        const selectedOption = e.target.selectedOptions[0];
-                                        const fieldDisplayName = selectedOption?.text || '';
+                                        const selectedOption =
+                                            e.target.selectedOptions[0];
+                                        const fieldDisplayName =
+                                            selectedOption?.text || '';
                                         // Extract table name for display
-                                        const tableMatch = fieldDisplayName.match(/^([^.]+)\./);
-                                        const tableName = tableMatch ? tableMatch[1] : 'Group';
-                                        
+                                        const tableMatch =
+                                            fieldDisplayName.match(
+                                                /^([^.]+)\./
+                                            );
+                                        const tableName = tableMatch
+                                            ? tableMatch[1]
+                                            : 'Group';
+
                                         setGroupingConfig({
                                             ...groupingConfig,
                                             groupByField: e.target.value,
-                                            groupDisplayName: groupingConfig.groupDisplayName || tableName,
-                                            sortBy: e.target.value // Auto-set sort field
+                                            groupDisplayName:
+                                                groupingConfig.groupDisplayName ||
+                                                tableName,
+                                            sortBy: e.target.value, // Auto-set sort field
                                         });
                                     }}
                                     className={styles.formSelect}
                                 >
-                                    <option value="">Select field to group by...</option>
-                                    {getAvailableFilterColumns().map((col, index) => {
-                                        const fieldValue = `${col.table}.${col.column}`;
-                                        const displayName = `${col.tableName}.${col.columnName}`;
-                                        return (
-                                            <option key={index} value={fieldValue}>
-                                                {displayName}
-                                            </option>
-                                        );
-                                    })}
+                                    <option value="">
+                                        Select field to group by...
+                                    </option>
+                                    {getAvailableFilterColumns().map(
+                                        (col, index) => {
+                                            const fieldValue = `${col.table}.${col.column}`;
+                                            const displayName = `${col.tableName}.${col.columnName}`;
+                                            return (
+                                                <option
+                                                    key={index}
+                                                    value={fieldValue}
+                                                >
+                                                    {displayName}
+                                                </option>
+                                            );
+                                        }
+                                    )}
                                 </select>
                                 <p className={styles.fieldHelp}>
-                                    Choose the field that contains the categories you want to group by
+                                    Choose the field that contains the
+                                    categories you want to group by
                                 </p>
                             </div>
-                            
+
                             {/* Group Display Name */}
                             <div className={styles.formGroup}>
-                                <label className={styles.formLabel}>Group Display Name</label>
+                                <label className={styles.formLabel}>
+                                    Group Display Name
+                                </label>
                                 <input
                                     type="text"
                                     value={groupingConfig.groupDisplayName}
-                                    onChange={(e) => setGroupingConfig({
-                                        ...groupingConfig,
-                                        groupDisplayName: e.target.value
-                                    })}
+                                    onChange={(e) =>
+                                        setGroupingConfig({
+                                            ...groupingConfig,
+                                            groupDisplayName: e.target.value,
+                                        })
+                                    }
                                     placeholder="e.g., Facility, Department, Category"
                                     className={styles.formInput}
                                 />
                                 <p className={styles.fieldHelp}>
-                                    What to call each group in the report (e.g., "Facility: Main Building")
+                                    What to call each group in the report (e.g.,
+                                    "Facility: Main Building")
                                 </p>
                             </div>
-                            
+
                             {/* Advanced Group Options */}
                             <div className={styles.advancedGroupOptions}>
-                                <h4 className={styles.sectionTitle}>Advanced Options</h4>
-                                
+                                <h4 className={styles.sectionTitle}>
+                                    Advanced Options
+                                </h4>
+
                                 <div className={styles.optionsGrid}>
                                     <div className={styles.formGroup}>
-                                        <label className={styles.formLabel}>Rows Per Group</label>
+                                        <label className={styles.formLabel}>
+                                            Rows Per Group
+                                        </label>
                                         <input
                                             type="number"
                                             min="1"
                                             max="100"
                                             value={groupingConfig.rowsPerGroup}
-                                            onChange={(e) => setGroupingConfig({
-                                                ...groupingConfig,
-                                                rowsPerGroup: parseInt(e.target.value) || 10
-                                            })}
+                                            onChange={(e) =>
+                                                setGroupingConfig({
+                                                    ...groupingConfig,
+                                                    rowsPerGroup:
+                                                        parseInt(
+                                                            e.target.value
+                                                        ) || 10,
+                                                })
+                                            }
                                             className={styles.formInput}
                                         />
                                     </div>
-                                    
+
                                     <div className={styles.formGroup}>
-                                        <label className={styles.formLabel}>Group Header Style</label>
+                                        <label className={styles.formLabel}>
+                                            Group Header Style
+                                        </label>
                                         <select
-                                            value={groupingConfig.groupHeaderStyle}
-                                            onChange={(e) => setGroupingConfig({
-                                                ...groupingConfig,
-                                                groupHeaderStyle: e.target.value
-                                            })}
+                                            value={
+                                                groupingConfig.groupHeaderStyle
+                                            }
+                                            onChange={(e) =>
+                                                setGroupingConfig({
+                                                    ...groupingConfig,
+                                                    groupHeaderStyle:
+                                                        e.target.value,
+                                                })
+                                            }
                                             className={styles.formSelect}
                                         >
-                                            <option value="primary">Primary (Blue)</option>
-                                            <option value="secondary">Secondary (Gray)</option>
-                                            <option value="success">Success (Green)</option>
-                                            <option value="warning">Warning (Orange)</option>
+                                            <option value="primary">
+                                                Primary (Blue)
+                                            </option>
+                                            <option value="secondary">
+                                                Secondary (Gray)
+                                            </option>
+                                            <option value="success">
+                                                Success (Green)
+                                            </option>
+                                            <option value="warning">
+                                                Warning (Orange)
+                                            </option>
                                         </select>
                                     </div>
-                                    
+
                                     <div className={styles.formGroup}>
-                                        <label className={styles.formLabel}>Sort Direction</label>
+                                        <label className={styles.formLabel}>
+                                            Sort Direction
+                                        </label>
                                         <select
                                             value={groupingConfig.sortDirection}
-                                            onChange={(e) => setGroupingConfig({
-                                                ...groupingConfig,
-                                                sortDirection: e.target.value
-                                            })}
+                                            onChange={(e) =>
+                                                setGroupingConfig({
+                                                    ...groupingConfig,
+                                                    sortDirection:
+                                                        e.target.value,
+                                                })
+                                            }
                                             className={styles.formSelect}
                                         >
-                                            <option value="asc">Ascending (A-Z)</option>
-                                            <option value="desc">Descending (Z-A)</option>
+                                            <option value="asc">
+                                                Ascending (A-Z)
+                                            </option>
+                                            <option value="desc">
+                                                Descending (Z-A)
+                                            </option>
                                         </select>
                                     </div>
                                 </div>
-                                
+
                                 <div className={styles.checkboxGrid}>
                                     <label className={styles.checkboxLabel}>
                                         <input
                                             type="checkbox"
-                                            checked={groupingConfig.showEmptyRows}
-                                            onChange={(e) => setGroupingConfig({
-                                                ...groupingConfig,
-                                                showEmptyRows: e.target.checked
-                                            })}
+                                            checked={
+                                                groupingConfig.showEmptyRows
+                                            }
+                                            onChange={(e) =>
+                                                setGroupingConfig({
+                                                    ...groupingConfig,
+                                                    showEmptyRows:
+                                                        e.target.checked,
+                                                })
+                                            }
                                         />
-                                        <span className={styles.checkboxText}>Show Empty Rows</span>
+                                        <span className={styles.checkboxText}>
+                                            Show Empty Rows
+                                        </span>
                                     </label>
-                                    
+
                                     <label className={styles.checkboxLabel}>
                                         <input
                                             type="checkbox"
-                                            checked={groupingConfig.showGroupTotals}
-                                            onChange={(e) => setGroupingConfig({
-                                                ...groupingConfig,
-                                                showGroupTotals: e.target.checked
-                                            })}
+                                            checked={
+                                                groupingConfig.showGroupTotals
+                                            }
+                                            onChange={(e) =>
+                                                setGroupingConfig({
+                                                    ...groupingConfig,
+                                                    showGroupTotals:
+                                                        e.target.checked,
+                                                })
+                                            }
                                         />
-                                        <span className={styles.checkboxText}>Show Group Totals</span>
+                                        <span className={styles.checkboxText}>
+                                            Show Group Totals
+                                        </span>
                                     </label>
-                                    
+
                                     <label className={styles.checkboxLabel}>
                                         <input
                                             type="checkbox"
                                             checked={groupingConfig.expandable}
-                                            onChange={(e) => setGroupingConfig({
-                                                ...groupingConfig,
-                                                expandable: e.target.checked
-                                            })}
+                                            onChange={(e) =>
+                                                setGroupingConfig({
+                                                    ...groupingConfig,
+                                                    expandable:
+                                                        e.target.checked,
+                                                })
+                                            }
                                         />
-                                        <span className={styles.checkboxText}>Collapsible Groups</span>
+                                        <span className={styles.checkboxText}>
+                                            Collapsible Groups
+                                        </span>
                                     </label>
                                 </div>
                             </div>
-                            
+
                             {/* Grouping Preview */}
                             {groupingConfig.groupByField && (
                                 <div className={styles.groupingPreview}>
-                                    <h4 className={styles.sectionTitle}>Configuration Preview</h4>
+                                    <h4 className={styles.sectionTitle}>
+                                        Configuration Preview
+                                    </h4>
                                     <div className={styles.previewBox}>
-                                        <p><strong>Group By:</strong> {groupingConfig.groupByField}</p>
-                                        <p><strong>Display Name:</strong> {groupingConfig.groupDisplayName || 'Group'}</p>
-                                        <p><strong>Sort:</strong> {groupingConfig.sortDirection === 'asc' ? 'Ascending' : 'Descending'}</p>
                                         <p>
-                                            <strong>Options:</strong> 
-                                            {groupingConfig.showEmptyRows && ' Empty Rows'}
-                                            {groupingConfig.showGroupTotals && ' Group Totals'}
-                                            {groupingConfig.expandable && ' Collapsible'}
+                                            <strong>Group By:</strong>{' '}
+                                            {groupingConfig.groupByField}
+                                        </p>
+                                        <p>
+                                            <strong>Display Name:</strong>{' '}
+                                            {groupingConfig.groupDisplayName ||
+                                                'Group'}
+                                        </p>
+                                        <p>
+                                            <strong>Sort:</strong>{' '}
+                                            {groupingConfig.sortDirection ===
+                                            'asc'
+                                                ? 'Ascending'
+                                                : 'Descending'}
+                                        </p>
+                                        <p>
+                                            <strong>Options:</strong>
+                                            {groupingConfig.showEmptyRows &&
+                                                ' Empty Rows'}
+                                            {groupingConfig.showGroupTotals &&
+                                                ' Group Totals'}
+                                            {groupingConfig.expandable &&
+                                                ' Collapsible'}
                                         </p>
                                     </div>
                                 </div>
@@ -7039,49 +7328,64 @@ const GenericReportImproved = ({
                         </div>
                     )}
 
-                    {/* Custom URLs Configuration */}
-                    <div className={styles.customUrlsSection}>
-                        <h4 className={styles.sectionTitle}>Custom API Endpoints (Optional)</h4>
-                        <p className={styles.helpText}>
-                            Override default API endpoints for specialized report handling
-                        </p>
-                        
-                        <div className={styles.optionsGrid}>
-                            <div className={styles.formGroup}>
-                                <label className={styles.formLabel}>Custom Execute URL</label>
-                                <input
-                                    type="text"
-                                    value={customUrls.executeUrl}
-                                    onChange={(e) => setCustomUrls({
-                                        ...customUrls,
-                                        executeUrl: e.target.value
-                                    })}
-                                    placeholder="/api/custom-reports/execute"
-                                    className={styles.formInput}
-                                />
-                                <p className={styles.fieldHelp}>
-                                    Custom endpoint for report execution (overrides template and default URLs)
-                                </p>
-                            </div>
-                            
-                            <div className={styles.formGroup}>
-                                <label className={styles.formLabel}>Custom Export URL</label>
-                                <input
-                                    type="text"
-                                    value={customUrls.exportUrl}
-                                    onChange={(e) => setCustomUrls({
-                                        ...customUrls,
-                                        exportUrl: e.target.value
-                                    })}
-                                    placeholder="/api/custom-reports/export"
-                                    className={styles.formInput}
-                                />
-                                <p className={styles.fieldHelp}>
-                                    Custom endpoint for report exports (for server-side exports)
-                                </p>
+                    {/* Custom URLs Configuration - Only show when grouping is enabled */}
+                    {groupingConfig.enabled && (
+                        <div className={styles.customUrlsSection}>
+                            <h4 className={styles.sectionTitle}>
+                                Custom API Endpoints (Optional)
+                            </h4>
+                            <p className={styles.helpText}>
+                                Override default API endpoints for specialized
+                                report handling
+                            </p>
+
+                            <div className={styles.optionsGrid}>
+                                <div className={styles.formGroup}>
+                                    <label className={styles.formLabel}>
+                                        Custom Execute URL
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={customUrls.executeUrl}
+                                        onChange={(e) =>
+                                            setCustomUrls({
+                                                ...customUrls,
+                                                executeUrl: e.target.value,
+                                            })
+                                        }
+                                        placeholder="/api/custom-reports/execute"
+                                        className={styles.formInput}
+                                    />
+                                    <p className={styles.fieldHelp}>
+                                        Custom endpoint for report execution
+                                        (overrides template and default URLs)
+                                    </p>
+                                </div>
+
+                                <div className={styles.formGroup}>
+                                    <label className={styles.formLabel}>
+                                        Custom Export URL
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={customUrls.exportUrl}
+                                        onChange={(e) =>
+                                            setCustomUrls({
+                                                ...customUrls,
+                                                exportUrl: e.target.value,
+                                            })
+                                        }
+                                        placeholder="/api/custom-reports/export"
+                                        className={styles.formInput}
+                                    />
+                                    <p className={styles.fieldHelp}>
+                                        Custom endpoint for report exports (for
+                                        server-side exports)
+                                    </p>
+                                </div>
                             </div>
                         </div>
-                    </div>
+                    )}
                 </div>
             </div>
         );
@@ -7103,17 +7407,21 @@ const GenericReportImproved = ({
                     >
                         {isLoading ? 'Loading...' : 'Generate Report'}
                     </button>
-                    
+
                     {/* View Toggle Button - only show if both grouped and regular data are available */}
-                    {(groupingConfig.enabled || selectedTemplate?.grouping?.enabled) && (
+                    {(groupingConfig.enabled ||
+                        selectedTemplate?.grouping?.enabled) && (
                         <div className={styles.viewToggle}>
                             <span className={styles.viewLabel}>View:</span>
                             <button
-                                className={`${styles.btn} ${styles.btnSecondary} ${
-                                    groupedData ? styles.active : ''
-                                }`}
+                                className={`${styles.btn} ${
+                                    styles.btnSecondary
+                                } ${groupedData ? styles.active : ''}`}
                                 onClick={() => {
-                                    if (!groupedData && previewData.length > 0) {
+                                    if (
+                                        !groupedData &&
+                                        previewData.length > 0
+                                    ) {
                                         // Switch to grouped view
                                         executeReport();
                                     }
@@ -7124,9 +7432,9 @@ const GenericReportImproved = ({
                                 📊 Grouped
                             </button>
                             <button
-                                className={`${styles.btn} ${styles.btnSecondary} ${
-                                    !groupedData ? styles.active : ''
-                                }`}
+                                className={`${styles.btn} ${
+                                    styles.btnSecondary
+                                } ${!groupedData ? styles.active : ''}`}
                                 onClick={() => {
                                     if (groupedData) {
                                         // Switch to regular table view
@@ -7147,20 +7455,29 @@ const GenericReportImproved = ({
 
                 {/* 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);
+                    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;
                 })() && (
                     <div className={styles.groupedReportContainer}>
-                        <GroupedReportRenderer 
+                        <GroupedReportRenderer
                             data={{
                                 ...groupedData.groupedData,
-                                grouped: true
+                                grouped: true,
                             }}
                             config={
-                                groupingConfig.enabled 
-                                    ? groupingConfig 
+                                groupingConfig.enabled
+                                    ? groupingConfig
                                     : selectedTemplate?.grouping || {}
                             }
                             columns={selectedColumns}
@@ -7179,14 +7496,23 @@ const GenericReportImproved = ({
                                 <div className="grouped-report-section">
                                     <div className="grouped-report-header">
                                         <div className="grouped-report-summary">
-                                            <h3 className="group-title">Report Results</h3>
-                                            <span className="group-stats">({previewData.length} records)</span>
+                                            <h3 className="group-title">
+                                                Report Results
+                                            </h3>
+                                            <span className="group-stats">
+                                                ({previewData.length} records)
+                                            </span>
                                         </div>
                                         <div className="grouped-report-actions">
-                                            <button 
+                                            <button
                                                 className="btn btn-export"
-                                                onClick={() => handleRegularExport()}
-                                                disabled={isLoading || previewData.length === 0}
+                                                onClick={() =>
+                                                    handleRegularExport()
+                                                }
+                                                disabled={
+                                                    isLoading ||
+                                                    previewData.length === 0
+                                                }
                                                 title="Export report data as Excel file"
                                             >
                                                 Export
@@ -7198,103 +7524,865 @@ const GenericReportImproved = ({
                                             <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>
-                                                        ));
+                                                        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>
+                                                            )
+                                                        );
                                                     })()}
                                                 </tr>
                                             </thead>
                                             <tbody>
                                                 {(() => {
-                                                    console.log(`🎯 [DEBUG] Rendering ${previewData.length} table rows`);
+                                                    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) => (
-                                                        <tr key={rowIndex} className="data-row">
-                                                            {actualColumns.map((col, colIndex) => (
-                                                                <td key={colIndex} className="table-cell">
-                                                                    {(() => {
-                                                                        const value = row[col.name];
-                                                                        
-                                                                        // Handle null/undefined
-                                                                        if (value === null || value === undefined) {
-                                                                            return <span style={{color: '#6c757d', fontStyle: 'italic'}}>—</span>;
-                                                                        }
-                                                                        
-                                                                        // Handle JSON strings
-                                                                        if (typeof value === 'string' && value.startsWith('{') && value.endsWith('}')) {
-                                                                            try {
-                                                                                const parsed = JSON.parse(value);
-                                                                                return (
-                                                                                    <div style={{fontSize: '0.85em', lineHeight: '1.3'}}>
-                                                                                        {Object.entries(parsed).map(([key, val]) => (
-                                                                                            <div key={key} style={{marginBottom: '2px'}}>
-                                                                                                <strong>{key.replace(/_/g, ' ')}:</strong> {val || '—'}
-                                                                                            </div>
-                                                                                        ))}
-                                                                                    </div>
-                                                                                );
-                                                                            } catch (e) {
-                                                                                return value;
-                                                                            }
-                                                                        }
-                                                                        
-                                                                        // Handle ABN (Australian Business Number) columns
-                                                                        if (col.name.toLowerCase().includes('abn') && value) {
-                                                                            const cleanABN = String(value).replace(/\s/g, ''); // Remove spaces, convert to string
-                                                                            if (cleanABN.length === 11 && /^\d{11}$/.test(cleanABN)) {
-                                                                                // Format as XX XXX XXX XXX
-                                                                                const formatted = `${cleanABN.slice(0,2)} ${cleanABN.slice(2,5)} ${cleanABN.slice(5,8)} ${cleanABN.slice(8,11)}`;
-                                                                                return <span style={{fontFamily: 'monospace', fontWeight: '500', color: '#495057'}}>{formatted}</span>;
-                                                                            }
-                                                                        }
-                                                                        
-                                                                        // Handle ACN (Australian Company Number) columns
-                                                                        if (col.name.toLowerCase().includes('acn') && value) {
-                                                                            const cleanACN = String(value).replace(/\s/g, ''); // Remove spaces, convert to string
-                                                                            if (cleanACN.length === 9 && /^\d{9}$/.test(cleanACN)) {
-                                                                                // Format as XXX XXX XXX
-                                                                                const formatted = `${cleanACN.slice(0,3)} ${cleanACN.slice(3,6)} ${cleanACN.slice(6,9)}`;
-                                                                                return <span style={{fontFamily: 'monospace', fontWeight: '500', color: '#495057'}}>{formatted}</span>;
-                                                                            }
-                                                                        }
-                                                                        
-                                                                        // Handle status/boolean-like columns  
-                                                                        if (col.name.toLowerCase().includes('status')) {
-                                                                            if (value === 1 || value === '1' || value === true) {
-                                                                                return <span style={{color: '#28a745', fontWeight: '500'}}>Active</span>;
-                                                                            } else if (value === 0 || value === '0' || value === false) {
-                                                                                return <span style={{color: '#6c757d', fontWeight: '500'}}>Inactive</span>;
+                                                    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) => (
+                                                            <tr
+                                                                key={rowIndex}
+                                                                className="data-row"
+                                                            >
+                                                                {actualColumns.map(
+                                                                    (
+                                                                        col,
+                                                                        colIndex
+                                                                    ) => (
+                                                                        <td
+                                                                            key={
+                                                                                colIndex
                                                                             }
-                                                                        }
-                                                                        
-                                                                        // Handle other boolean values
-                                                                        if (typeof value === 'boolean') {
-                                                                            return value ? 
-                                                                                <span style={{color: '#28a745', fontWeight: '500'}}>Yes</span> : 
-                                                                                <span style={{color: '#6c757d', fontWeight: '500'}}>No</span>;
-                                                                        }
-                                                                        
-                                                                        // Handle numeric values
-                                                                        if (typeof value === 'number' && !col.name.toLowerCase().includes('status')) {
-                                                                            return value.toLocaleString();
-                                                                        }
-                                                                        
-                                                                        // Default string handling
-                                                                        return value;
-                                                                    })()}
-                                                                </td>
-                                                            ))}
-                                                        </tr>
-                                                    ));
+                                                                            className="table-cell"
+                                                                        >
+                                                                            {(() => {
+                                                                                const value =
+                                                                                    row[
+                                                                                        col
+                                                                                            .name
+                                                                                    ];
+
+                                                                                // Handle null/undefined
+                                                                                if (
+                                                                                    value ===
+                                                                                        null ||
+                                                                                    value ===
+                                                                                        undefined
+                                                                                ) {
+                                                                                    return (
+                                                                                        <span
+                                                                                            style={{
+                                                                                                color: '#6c757d',
+                                                                                                fontStyle:
+                                                                                                    'italic',
+                                                                                            }}
+                                                                                        >
+                                                                                            —
+                                                                                        </span>
+                                                                                    );
+                                                                                }
+
+                                                                                // Handle JSON strings
+                                                                                if (
+                                                                                    typeof value ===
+                                                                                        'string' &&
+                                                                                    value.startsWith(
+                                                                                        '{'
+                                                                                    ) &&
+                                                                                    value.endsWith(
+                                                                                        '}'
+                                                                                    )
+                                                                                ) {
+                                                                                    try {
+                                                                                        const parsed =
+                                                                                            JSON.parse(
+                                                                                                value
+                                                                                            );
+                                                                                        return (
+                                                                                            <div
+                                                                                                style={{
+                                                                                                    fontSize:
+                                                                                                        '0.85em',
+                                                                                                    lineHeight:
+                                                                                                        '1.3',
+                                                                                                }}
+                                                                                            >
+                                                                                                {Object.entries(
+                                                                                                    parsed
+                                                                                                ).map(
+                                                                                                    ([
+                                                                                                        key,
+                                                                                                        val,
+                                                                                                    ]) => (
+                                                                                                        <div
+                                                                                                            key={
+                                                                                                                key
+                                                                                                            }
+                                                                                                            style={{
+                                                                                                                marginBottom:
+                                                                                                                    '2px',
+                                                                                                            }}
+                                                                                                        >
+                                                                                                            <strong>
+                                                                                                                {key.replace(
+                                                                                                                    /_/g,
+                                                                                                                    ' '
+                                                                                                                )}
+                                                                                                                :
+                                                                                                            </strong>{' '}
+                                                                                                            {val ||
+                                                                                                                '—'}
+                                                                                                        </div>
+                                                                                                    )
+                                                                                                )}
+                                                                                            </div>
+                                                                                        );
+                                                                                    } catch (e) {
+                                                                                        return value;
+                                                                                    }
+                                                                                }
+
+                                                                                // Handle ABN (Australian Business Number) columns
+                                                                                if (
+                                                                                    col.name
+                                                                                        .toLowerCase()
+                                                                                        .includes(
+                                                                                            'abn'
+                                                                                        ) &&
+                                                                                    value
+                                                                                ) {
+                                                                                    const cleanABN =
+                                                                                        String(
+                                                                                            value
+                                                                                        ).replace(
+                                                                                            /\s/g,
+                                                                                            ''
+                                                                                        ); // Remove spaces, convert to string
+                                                                                    if (
+                                                                                        cleanABN.length ===
+                                                                                            11 &&
+                                                                                        /^\d{11}$/.test(
+                                                                                            cleanABN
+                                                                                        )
+                                                                                    ) {
+                                                                                        // Format as XX XXX XXX XXX
+                                                                                        const formatted = `${cleanABN.slice(
+                                                                                            0,
+                                                                                            2
+                                                                                        )} ${cleanABN.slice(
+                                                                                            2,
+                                                                                            5
+                                                                                        )} ${cleanABN.slice(
+                                                                                            5,
+                                                                                            8
+                                                                                        )} ${cleanABN.slice(
+                                                                                            8,
+                                                                                            11
+                                                                                        )}`;
+                                                                                        return (
+                                                                                            <span
+                                                                                                style={{
+                                                                                                    fontFamily:
+                                                                                                        'monospace',
+                                                                                                    fontWeight:
+                                                                                                        '500',
+                                                                                                    color: '#495057',
+                                                                                                }}
+                                                                                            >
+                                                                                                {
+                                                                                                    formatted
+                                                                                                }
+                                                                                            </span>
+                                                                                        );
+                                                                                    }
+                                                                                }
+
+                                                                                // Handle ACN (Australian Company Number) columns
+                                                                                if (
+                                                                                    col.name
+                                                                                        .toLowerCase()
+                                                                                        .includes(
+                                                                                            'acn'
+                                                                                        ) &&
+                                                                                    value
+                                                                                ) {
+                                                                                    const cleanACN =
+                                                                                        String(
+                                                                                            value
+                                                                                        ).replace(
+                                                                                            /\s/g,
+                                                                                            ''
+                                                                                        ); // Remove spaces, convert to string
+                                                                                    if (
+                                                                                        cleanACN.length ===
+                                                                                            9 &&
+                                                                                        /^\d{9}$/.test(
+                                                                                            cleanACN
+                                                                                        )
+                                                                                    ) {
+                                                                                        // Format as XXX XXX XXX
+                                                                                        const formatted = `${cleanACN.slice(
+                                                                                            0,
+                                                                                            3
+                                                                                        )} ${cleanACN.slice(
+                                                                                            3,
+                                                                                            6
+                                                                                        )} ${cleanACN.slice(
+                                                                                            6,
+                                                                                            9
+                                                                                        )}`;
+                                                                                        return (
+                                                                                            <span
+                                                                                                style={{
+                                                                                                    fontFamily:
+                                                                                                        'monospace',
+                                                                                                    fontWeight:
+                                                                                                        '500',
+                                                                                                    color: '#495057',
+                                                                                                }}
+                                                                                            >
+                                                                                                {
+                                                                                                    formatted
+                                                                                                }
+                                                                                            </span>
+                                                                                        );
+                                                                                    }
+                                                                                }
+
+                                                                                // Handle status/boolean-like columns
+                                                                                if (
+                                                                                    col.name
+                                                                                        .toLowerCase()
+                                                                                        .includes(
+                                                                                            'status'
+                                                                                        )
+                                                                                ) {
+                                                                                    if (
+                                                                                        value ===
+                                                                                            1 ||
+                                                                                        value ===
+                                                                                            '1' ||
+                                                                                        value ===
+                                                                                            true
+                                                                                    ) {
+                                                                                        return (
+                                                                                            <span
+                                                                                                style={{
+                                                                                                    color: '#28a745',
+                                                                                                    fontWeight:
+                                                                                                        '500',
+                                                                                                }}
+                                                                                            >
+                                                                                                Active
+                                                                                            </span>
+                                                                                        );
+                                                                                    } else if (
+                                                                                        value ===
+                                                                                            0 ||
+                                                                                        value ===
+                                                                                            '0' ||
+                                                                                        value ===
+                                                                                            false
+                                                                                    ) {
+                                                                                        return (
+                                                                                            <span
+                                                                                                style={{
+                                                                                                    color: '#6c757d',
+                                                                                                    fontWeight:
+                                                                                                        '500',
+                                                                                                }}
+                                                                                            >
+                                                                                                Inactive
+                                                                                            </span>
+                                                                                        );
+                                                                                    }
+                                                                                }
+
+                                                                                // Handle other boolean values
+                                                                                if (
+                                                                                    typeof value ===
+                                                                                    'boolean'
+                                                                                ) {
+                                                                                    return value ? (
+                                                                                        <span
+                                                                                            style={{
+                                                                                                color: '#28a745',
+                                                                                                fontWeight:
+                                                                                                    '500',
+                                                                                            }}
+                                                                                        >
+                                                                                            Yes
+                                                                                        </span>
+                                                                                    ) : (
+                                                                                        <span
+                                                                                            style={{
+                                                                                                color: '#6c757d',
+                                                                                                fontWeight:
+                                                                                                    '500',
+                                                                                            }}
+                                                                                        >
+                                                                                            No
+                                                                                        </span>
+                                                                                    );
+                                                                                }
+
+                                                                                // Handle numeric values (but exclude potential boolean columns)
+                                                                                if (
+                                                                                    typeof value ===
+                                                                                        'number' &&
+                                                                                    !col.name
+                                                                                        .toLowerCase()
+                                                                                        .includes(
+                                                                                            'status'
+                                                                                        )
+                                                                                ) {
+                                                                                    const columnName =
+                                                                                        col.name.toLowerCase();
+                                                                                    // Don't format as numbers if they might be boolean values
+                                                                                    const mightBeBoolean =
+                                                                                        (value ===
+                                                                                            0 ||
+                                                                                            value ===
+                                                                                                1) &&
+                                                                                        (columnName.includes(
+                                                                                            'is_'
+                                                                                        ) ||
+                                                                                            columnName.includes(
+                                                                                                'has_'
+                                                                                            ) ||
+                                                                                            columnName.includes(
+                                                                                                'confirmed'
+                                                                                            ) ||
+                                                                                            columnName.includes(
+                                                                                                'active'
+                                                                                            ) ||
+                                                                                            columnName.includes(
+                                                                                                'enabled'
+                                                                                            ) ||
+                                                                                            columnName.includes(
+                                                                                                'completed'
+                                                                                            ) ||
+                                                                                            columnName.includes(
+                                                                                                'stage'
+                                                                                            ) ||
+                                                                                            columnName.includes(
+                                                                                                'final'
+                                                                                            ) ||
+                                                                                            columnName.includes(
+                                                                                                'flag'
+                                                                                            ) ||
+                                                                                            columnName.includes(
+                                                                                                'approved'
+                                                                                            ) ||
+                                                                                            columnName.includes(
+                                                                                                'verified'
+                                                                                            ) ||
+                                                                                            columnName.includes(
+                                                                                                'sent'
+                                                                                            ) ||
+                                                                                            columnName.endsWith(
+                                                                                                '?'
+                                                                                            ));
+
+                                                                                    if (
+                                                                                        !mightBeBoolean
+                                                                                    ) {
+                                                                                        return value.toLocaleString();
+                                                                                    }
+                                                                                }
+
+                                                                                // Use formatCellContent for all other values including dates and smart boolean formatting
+                                                                                const formattedValue =
+                                                                                    formatCellContent(
+                                                                                        value,
+                                                                                        {
+                                                                                            id: col.name,
+                                                                                            name: col.name,
+                                                                                            // Get type from template column definition if available, otherwise infer
+                                                                                            type: (() => {
+                                                                                                // First try to find type from template's defaultColumns
+                                                                                                if (
+                                                                                                    selectedTemplate?.defaultColumns
+                                                                                                ) {
+                                                                                                    const templateColumn =
+                                                                                                        selectedTemplate.defaultColumns.find(
+                                                                                                            (
+                                                                                                                tc
+                                                                                                            ) =>
+                                                                                                                `${tc.table}.${tc.column}` ===
+                                                                                                                    col.name ||
+                                                                                                                tc.column ===
+                                                                                                                    col.name
+                                                                                                        );
+                                                                                                    if (
+                                                                                                        templateColumn?.type
+                                                                                                    ) {
+                                                                                                        return templateColumn.type;
+                                                                                                    }
+                                                                                                }
+
+                                                                                                // Fallback to column name-based type inference
+                                                                                                const columnName =
+                                                                                                    col.name.toLowerCase();
+                                                                                                // Date column detection
+                                                                                                if (
+                                                                                                    columnName.includes(
+                                                                                                        'date'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'time'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'created_at'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'updated_at'
+                                                                                                    )
+                                                                                                ) {
+                                                                                                    return 'date';
+                                                                                                }
+                                                                                                // Boolean column detection - enhanced logic
+                                                                                                if (
+                                                                                                    columnName.includes(
+                                                                                                        'is_'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'has_'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'confirmed'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'active'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'enabled'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'completed'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'stage'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'final'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'flag'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'approved'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'verified'
+                                                                                                    ) ||
+                                                                                                    columnName.includes(
+                                                                                                        'sent'
+                                                                                                    ) ||
+                                                                                                    columnName.endsWith(
+                                                                                                        '?'
+                                                                                                    ) || // Handle columns like "Confirmed?"
+                                                                                                    (typeof value ===
+                                                                                                        'number' &&
+                                                                                                        (value ===
+                                                                                                            0 ||
+                                                                                                            value ===
+                                                                                                                1)) ||
+                                                                                                    (typeof value ===
+                                                                                                        'string' &&
+                                                                                                        (value ===
+                                                                                                            '0' ||
+                                                                                                            value ===
+                                                                                                                '1'))
+                                                                                                ) {
+                                                                                                    return 'boolean';
+                                                                                                }
+                                                                                                return undefined; // Let formatCellContent auto-detect
+                                                                                            })(),
+                                                                                        }
+                                                                                    );
+
+                                                                                return formattedValue;
+                                                                            })()}
+                                                                        </td>
+                                                                    )
+                                                                )}
+                                                            </tr>
+                                                        )
+                                                    );
                                                 })()}
                                             </tbody>
                                         </table>
                                     </div>
+
+                                    {/* Pagination Controls */}
+                                    {previewData.length > 0 && (
+                                        <div
+                                            className={
+                                                styles.paginationContainer
+                                            }
+                                        >
+                                            <div
+                                                className={
+                                                    styles.paginationInfo
+                                                }
+                                            >
+                                                {(() => {
+                                                    const startRecord =
+                                                        Math.min(
+                                                            (currentPage - 1) *
+                                                                pageSize +
+                                                                1,
+                                                            totalCount
+                                                        );
+                                                    const endRecord = Math.min(
+                                                        currentPage * pageSize,
+                                                        totalCount
+                                                    );
+                                                    return `Showing ${startRecord}-${endRecord} of ${totalCount} records`;
+                                                })()}
+                                            </div>
+
+                                            <div
+                                                className={
+                                                    styles.paginationControls
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        styles.pageSizeSelector
+                                                    }
+                                                >
+                                                    <label>Show:</label>
+                                                    <select
+                                                        value={pageSize}
+                                                        onChange={(e) => {
+                                                            const newPageSize =
+                                                                parseInt(
+                                                                    e.target
+                                                                        .value
+                                                                );
+                                                            setPageSize(
+                                                                newPageSize
+                                                            );
+                                                            setCurrentPage(1); // Reset to first page
+                                                            // Re-execute the report with new page size
+                                                            if (
+                                                                previewData.length >
+                                                                0
+                                                            ) {
+                                                                executeReport();
+                                                            }
+                                                        }}
+                                                        className={
+                                                            styles.pageSizeSelect
+                                                        }
+                                                    >
+                                                        <option value={10}>
+                                                            10
+                                                        </option>
+                                                        <option value={25}>
+                                                            25
+                                                        </option>
+                                                        <option value={50}>
+                                                            50
+                                                        </option>
+                                                        <option value={100}>
+                                                            100
+                                                        </option>
+                                                        <option value={250}>
+                                                            250
+                                                        </option>
+                                                    </select>
+                                                    <span>records</span>
+                                                </div>
+
+                                                <div
+                                                    className={
+                                                        styles.pageNavigation
+                                                    }
+                                                >
+                                                    <button
+                                                        onClick={() => {
+                                                            if (
+                                                                currentPage > 1
+                                                            ) {
+                                                                const newPage =
+                                                                    currentPage -
+                                                                    1;
+                                                                setCurrentPage(
+                                                                    newPage
+                                                                );
+                                                                executeReport();
+                                                            }
+                                                        }}
+                                                        disabled={
+                                                            currentPage <= 1
+                                                        }
+                                                        className={`${
+                                                            styles.pageBtn
+                                                        } ${
+                                                            currentPage <= 1
+                                                                ? styles.disabled
+                                                                : ''
+                                                        }`}
+                                                    >
+                                                        ‹ Previous
+                                                    </button>
+
+                                                    <div
+                                                        className={
+                                                            styles.pageNumbers
+                                                        }
+                                                    >
+                                                        {(() => {
+                                                            const maxPagesToShow = 5;
+                                                            const totalPages =
+                                                                Math.ceil(
+                                                                    totalCount /
+                                                                        pageSize
+                                                                );
+                                                            let startPage =
+                                                                Math.max(
+                                                                    1,
+                                                                    currentPage -
+                                                                        Math.floor(
+                                                                            maxPagesToShow /
+                                                                                2
+                                                                        )
+                                                                );
+                                                            let endPage =
+                                                                Math.min(
+                                                                    totalPages,
+                                                                    startPage +
+                                                                        maxPagesToShow -
+                                                                        1
+                                                                );
+
+                                                            // Adjust start if we're near the end
+                                                            if (
+                                                                endPage -
+                                                                    startPage <
+                                                                maxPagesToShow -
+                                                                    1
+                                                            ) {
+                                                                startPage =
+                                                                    Math.max(
+                                                                        1,
+                                                                        endPage -
+                                                                            maxPagesToShow +
+                                                                            1
+                                                                    );
+                                                            }
+
+                                                            const pages = [];
+
+                                                            // Add first page and ellipsis if needed
+                                                            if (startPage > 1) {
+                                                                pages.push(
+                                                                    <button
+                                                                        key={1}
+                                                                        onClick={() => {
+                                                                            setCurrentPage(
+                                                                                1
+                                                                            );
+                                                                            executeReport();
+                                                                        }}
+                                                                        className={`${
+                                                                            styles.pageBtn
+                                                                        } ${
+                                                                            1 ===
+                                                                            currentPage
+                                                                                ? styles.active
+                                                                                : ''
+                                                                        }`}
+                                                                    >
+                                                                        1
+                                                                    </button>
+                                                                );
+                                                                if (
+                                                                    startPage >
+                                                                    2
+                                                                ) {
+                                                                    pages.push(
+                                                                        <span
+                                                                            key="start-ellipsis"
+                                                                            className={
+                                                                                styles.ellipsis
+                                                                            }
+                                                                        >
+                                                                            ...
+                                                                        </span>
+                                                                    );
+                                                                }
+                                                            }
+
+                                                            // Add visible page numbers
+                                                            for (
+                                                                let i =
+                                                                    startPage;
+                                                                i <= endPage;
+                                                                i++
+                                                            ) {
+                                                                pages.push(
+                                                                    <button
+                                                                        key={i}
+                                                                        onClick={() => {
+                                                                            setCurrentPage(
+                                                                                i
+                                                                            );
+                                                                            executeReport();
+                                                                        }}
+                                                                        className={`${
+                                                                            styles.pageBtn
+                                                                        } ${
+                                                                            i ===
+                                                                            currentPage
+                                                                                ? styles.active
+                                                                                : ''
+                                                                        }`}
+                                                                    >
+                                                                        {i}
+                                                                    </button>
+                                                                );
+                                                            }
+
+                                                            // Add ellipsis and last page if needed
+                                                            if (
+                                                                endPage <
+                                                                totalPages
+                                                            ) {
+                                                                if (
+                                                                    endPage <
+                                                                    totalPages -
+                                                                        1
+                                                                ) {
+                                                                    pages.push(
+                                                                        <span
+                                                                            key="end-ellipsis"
+                                                                            className={
+                                                                                styles.ellipsis
+                                                                            }
+                                                                        >
+                                                                            ...
+                                                                        </span>
+                                                                    );
+                                                                }
+                                                                pages.push(
+                                                                    <button
+                                                                        key={
+                                                                            totalPages
+                                                                        }
+                                                                        onClick={() => {
+                                                                            setCurrentPage(
+                                                                                totalPages
+                                                                            );
+                                                                            executeReport();
+                                                                        }}
+                                                                        className={`${
+                                                                            styles.pageBtn
+                                                                        } ${
+                                                                            totalPages ===
+                                                                            currentPage
+                                                                                ? styles.active
+                                                                                : ''
+                                                                        }`}
+                                                                    >
+                                                                        {
+                                                                            totalPages
+                                                                        }
+                                                                    </button>
+                                                                );
+                                                            }
+
+                                                            return pages;
+                                                        })()}
+                                                    </div>
+
+                                                    <button
+                                                        onClick={() => {
+                                                            const totalPages =
+                                                                Math.ceil(
+                                                                    totalCount /
+                                                                        pageSize
+                                                                );
+                                                            if (
+                                                                currentPage <
+                                                                totalPages
+                                                            ) {
+                                                                const newPage =
+                                                                    currentPage +
+                                                                    1;
+                                                                setCurrentPage(
+                                                                    newPage
+                                                                );
+                                                                executeReport();
+                                                            }
+                                                        }}
+                                                        disabled={
+                                                            currentPage >=
+                                                            Math.ceil(
+                                                                totalCount /
+                                                                    pageSize
+                                                            )
+                                                        }
+                                                        className={`${
+                                                            styles.pageBtn
+                                                        } ${
+                                                            currentPage >=
+                                                            Math.ceil(
+                                                                totalCount /
+                                                                    pageSize
+                                                            )
+                                                                ? styles.disabled
+                                                                : ''
+                                                        }`}
+                                                    >
+                                                        Next ›
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
                                 </div>
                             </div>
                         </div>
@@ -7328,10 +8416,44 @@ const GenericReportImproved = ({
                                     )}
                                 </div>
                             </div>
-
                         </div>
                     </>
                 )}
+
+                {/* Show no data message when no results found */}
+                {!groupedData &&
+                    previewData.length === 0 &&
+                    !isLoading &&
+                    selectedTable &&
+                    selectedColumns.length > 0 && (
+                        <div className={styles.noDataContainer}>
+                            <div className={styles.noDataMessage}>
+                                <div className={styles.noDataIcon}>
+                                    <Database size={48} />
+                                </div>
+                                <h3 className={styles.noDataTitle}>
+                                    No Data Found
+                                </h3>
+                                <p className={styles.noDataText}>
+                                    No records match the selected filters and
+                                    criteria.
+                                </p>
+                                <div className={styles.noDataSuggestions}>
+                                    <p>
+                                        <strong>Try:</strong>
+                                    </p>
+                                    <ul>
+                                        <li>Adjusting or removing filters</li>
+                                        <li>Selecting a broader date range</li>
+                                        <li>
+                                            Checking if data exists for the
+                                            selected table
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    )}
             </div>
         );
     };