@visns-studio/visns-components 5.14.11 → 5.14.13

package/src/components/generic/GenericReport.jsx

@@ -2,7 +2,6 @@ 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 {
@@ -918,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)',
@@ -1073,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
@@ -2259,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,
@@ -2281,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 = {
@@ -2294,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(
@@ -2319,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 };
                     }
 
@@ -2380,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,
@@ -2389,7 +2400,7 @@ const GenericReportImproved = ({
                     defaultExecuteUrl: executeUrl,
                     finalExecuteUrl,
                     usingCustomUrl: !!customUrls.executeUrl,
-                    usingTemplateExecuteUrl: !!selectedTemplate?.executeUrl
+                    usingTemplateExecuteUrl: !!selectedTemplate?.executeUrl,
                 });
 
                 const result = await CustomFetch(
@@ -2448,7 +2459,7 @@ const GenericReportImproved = ({
             selectedTemplate: selectedTemplate?.id,
             hasGrouping: selectedTemplate?.grouping?.enabled,
             executeUrl,
-            setting
+            setting,
         });
 
         if (!selectedTable || selectedColumns.length === 0) {
@@ -2467,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 = {
@@ -2503,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,
@@ -2528,32 +2552,55 @@ 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;
                 }
@@ -2566,7 +2613,10 @@ const GenericReportImproved = ({
                     filterValue: null,
                 });
 
-                if (currentPageResult.data && currentPageResult.data.length > 0) {
+                if (
+                    currentPageResult.data &&
+                    currentPageResult.data.length > 0
+                ) {
                     setPreviewData(currentPageResult.data);
                     fetchedDataCount = currentPageResult.data.length;
                 }
@@ -2575,32 +2625,127 @@ const GenericReportImproved = ({
             // 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;
+                                        }
+                                    }
+                                });
+                            }
+                        }
+
+                        // 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
+                                );
 
-                    // Try to find column type from table columns with improved detection
-                    let columnType = 'varchar'; // default
-                    if (columnMetadata) {
+                                // 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;
@@ -2610,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;
@@ -2620,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);
                 }
@@ -2769,7 +2821,10 @@ const GenericReportImproved = ({
 
             // Report executed successfully
             console.log('🎯 [DEBUG] Final fetchedDataCount:', fetchedDataCount);
-            console.log('🎯 [DEBUG] Type of fetchedDataCount:', typeof fetchedDataCount);
+            console.log(
+                '🎯 [DEBUG] Type of fetchedDataCount:',
+                typeof fetchedDataCount
+            );
         } catch (error) {
             toast.error('Failed to execute report');
             console.error('Error executing report:', error);
@@ -2870,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
@@ -2886,7 +2942,7 @@ const GenericReportImproved = ({
                     showGroupTotals: true,
                     expandable: true,
                     groupHeaderStyle: 'primary',
-                    emptyRowStyle: 'light'
+                    emptyRowStyle: 'light',
                 });
             }
 
@@ -2921,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
@@ -2996,7 +3052,9 @@ const GenericReportImproved = ({
                 };
 
                 template.quickFilters.forEach((quickFilter) => {
-                    let filterValue = convertDynamicDateValue(quickFilter.value);
+                    let filterValue = convertDynamicDateValue(
+                        quickFilter.value
+                    );
 
                     // Parse the field to extract table and column
                     const fieldParts = quickFilter.field.split('.');
@@ -3004,7 +3062,12 @@ const GenericReportImproved = ({
                     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) {
+                    if (
+                        quickFilter.type === 'date_range' &&
+                        typeof filterValue === 'object' &&
+                        filterValue.start &&
+                        filterValue.end
+                    ) {
                         filterValue = `${filterValue.start},${filterValue.end}`;
                     }
 
@@ -3015,7 +3078,9 @@ const GenericReportImproved = ({
                         column: column,
                         operator:
                             quickFilter.operator ||
-                            (quickFilter.type === 'date_range' ? 'BETWEEN' : '='),
+                            (quickFilter.type === 'date_range'
+                                ? 'BETWEEN'
+                                : '='),
                         value: filterValue,
                         label: quickFilter.label,
                         type: quickFilter.type,
@@ -3025,7 +3090,6 @@ const GenericReportImproved = ({
                 });
 
                 setFilterCriteria(updatedFilterCriteria);
-                
             }
 
             // Apply template grouping configuration
@@ -3040,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
@@ -3062,7 +3127,7 @@ const GenericReportImproved = ({
                     showGroupTotals: true,
                     expandable: true,
                     groupHeaderStyle: 'primary',
-                    emptyRowStyle: 'light'
+                    emptyRowStyle: 'light',
                 });
             }
 
@@ -4744,7 +4809,12 @@ const GenericReportImproved = ({
         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) {
+        if (
+            quickFilter.type === 'date_range' &&
+            typeof filterValue === 'object' &&
+            filterValue.start &&
+            filterValue.end
+        ) {
             filterValue = `${filterValue.start},${filterValue.end}`;
         }
 
@@ -5569,7 +5639,6 @@ const GenericReportImproved = ({
             suggestions: smartSuggestions,
         });
 
-
         return (
             <div className={styles.filtersSection}>
                 {/* Template Quick Filters */}
@@ -6472,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,
@@ -6481,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
@@ -6618,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
@@ -6629,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;
@@ -6645,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)
@@ -6655,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];
@@ -6673,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');
                     }
@@ -6685,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)}`;
                     }
                 }
 
@@ -6712,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);
                 });
 
@@ -6734,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}`);
@@ -6845,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,
@@ -6911,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>
@@ -7102,43 +7331,56 @@ const GenericReportImproved = ({
                     {/* Custom URLs Configuration - Only show when grouping is enabled */}
                     {groupingConfig.enabled && (
                         <div className={styles.customUrlsSection}>
-                            <h4 className={styles.sectionTitle}>Custom API Endpoints (Optional)</h4>
+                            <h4 className={styles.sectionTitle}>
+                                Custom API Endpoints (Optional)
+                            </h4>
                             <p className={styles.helpText}>
-                                Override default API endpoints for specialized report handling
+                                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>
+                                    <label className={styles.formLabel}>
+                                        Custom Execute URL
+                                    </label>
                                     <input
                                         type="text"
                                         value={customUrls.executeUrl}
-                                        onChange={(e) => setCustomUrls({
-                                            ...customUrls,
-                                            executeUrl: e.target.value
-                                        })}
+                                        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)
+                                        Custom endpoint for report execution
+                                        (overrides template and default URLs)
                                     </p>
                                 </div>
-                                
+
                                 <div className={styles.formGroup}>
-                                    <label className={styles.formLabel}>Custom Export URL</label>
+                                    <label className={styles.formLabel}>
+                                        Custom Export URL
+                                    </label>
                                     <input
                                         type="text"
                                         value={customUrls.exportUrl}
-                                        onChange={(e) => setCustomUrls({
-                                            ...customUrls,
-                                            exportUrl: e.target.value
-                                        })}
+                                        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)
+                                        Custom endpoint for report exports (for
+                                        server-side exports)
                                     </p>
                                 </div>
                             </div>
@@ -7165,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();
                                     }
@@ -7186,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
@@ -7209,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}
@@ -7241,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
@@ -7260,285 +7524,858 @@ 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>;
-                                                                            }
-                                                                        }
-                                                                        
-                                                                        // 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();
+                                                    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
                                                                             }
-                                                                        }
-                                                                        
-                                                                        // 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
+                                                                            className="table-cell"
+                                                                        >
+                                                                            {(() => {
+                                                                                const value =
+                                                                                    row[
+                                                                                        col
+                                                                                            .name
+                                                                                    ];
+
+                                                                                // Handle null/undefined
+                                                                                if (
+                                                                                    value ===
+                                                                                        null ||
+                                                                                    value ===
+                                                                                        undefined
+                                                                                ) {
+                                                                                    return (
+                                                                                        <span
+                                                                                            style={{
+                                                                                                color: '#6c757d',
+                                                                                                fontStyle:
+                                                                                                    'italic',
+                                                                                            }}
+                                                                                        >
+                                                                                            —
+                                                                                        </span>
                                                                                     );
-                                                                                    if (templateColumn?.type) {
-                                                                                        return templateColumn.type;
+                                                                                }
+
+                                                                                // 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>
+                                                                                        );
                                                                                     }
                                                                                 }
-                                                                                
-                                                                                // 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';
+
+                                                                                // 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>
+                                                                                    );
                                                                                 }
-                                                                                // 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';
+
+                                                                                // 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();
+                                                                                    }
                                                                                 }
-                                                                                return undefined; // Let formatCellContent auto-detect
-                                                                            })()
-                                                                        });
-                                                                        
-                                                                        return formattedValue;
-                                                                    })()}
-                                                                </td>
-                                                            ))}
-                                                        </tr>
-                                                    ));
+
+                                                                                // 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}>
+                                        <div
+                                            className={
+                                                styles.paginationContainer
+                                            }
+                                        >
+                                            <div
+                                                className={
+                                                    styles.paginationInfo
+                                                }
+                                            >
                                                 {(() => {
-                                                    const startRecord = Math.min((currentPage - 1) * pageSize + 1, totalCount);
-                                                    const endRecord = Math.min(currentPage * pageSize, totalCount);
+                                                    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}>
+
+                                            <div
+                                                className={
+                                                    styles.paginationControls
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        styles.pageSizeSelector
+                                                    }
+                                                >
                                                     <label>Show:</label>
                                                     <select
                                                         value={pageSize}
                                                         onChange={(e) => {
-                                                            const newPageSize = parseInt(e.target.value);
-                                                            setPageSize(newPageSize);
+                                                            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) {
+                                                            if (
+                                                                previewData.length >
+                                                                0
+                                                            ) {
                                                                 executeReport();
                                                             }
                                                         }}
-                                                        className={styles.pageSizeSelect}
+                                                        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>
+                                                        <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}>
+
+                                                <div
+                                                    className={
+                                                        styles.pageNavigation
+                                                    }
+                                                >
                                                     <button
                                                         onClick={() => {
-                                                            if (currentPage > 1) {
-                                                                const newPage = currentPage - 1;
-                                                                setCurrentPage(newPage);
+                                                            if (
+                                                                currentPage > 1
+                                                            ) {
+                                                                const newPage =
+                                                                    currentPage -
+                                                                    1;
+                                                                setCurrentPage(
+                                                                    newPage
+                                                                );
                                                                 executeReport();
                                                             }
                                                         }}
-                                                        disabled={currentPage <= 1}
-                                                        className={`${styles.pageBtn} ${currentPage <= 1 ? styles.disabled : ''}`}
+                                                        disabled={
+                                                            currentPage <= 1
+                                                        }
+                                                        className={`${
+                                                            styles.pageBtn
+                                                        } ${
+                                                            currentPage <= 1
+                                                                ? styles.disabled
+                                                                : ''
+                                                        }`}
                                                     >
                                                         ‹ Previous
                                                     </button>
-                                                    
-                                                    <div className={styles.pageNumbers}>
+
+                                                    <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);
-                                                            
+                                                            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);
+                                                            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);
+                                                                            setCurrentPage(
+                                                                                1
+                                                                            );
                                                                             executeReport();
                                                                         }}
-                                                                        className={`${styles.pageBtn} ${1 === currentPage ? styles.active : ''}`}
+                                                                        className={`${
+                                                                            styles.pageBtn
+                                                                        } ${
+                                                                            1 ===
+                                                                            currentPage
+                                                                                ? styles.active
+                                                                                : ''
+                                                                        }`}
                                                                     >
                                                                         1
                                                                     </button>
                                                                 );
-                                                                if (startPage > 2) {
-                                                                    pages.push(<span key="start-ellipsis" className={styles.ellipsis}>...</span>);
+                                                                if (
+                                                                    startPage >
+                                                                    2
+                                                                ) {
+                                                                    pages.push(
+                                                                        <span
+                                                                            key="start-ellipsis"
+                                                                            className={
+                                                                                styles.ellipsis
+                                                                            }
+                                                                        >
+                                                                            ...
+                                                                        </span>
+                                                                    );
                                                                 }
                                                             }
-                                                            
+
                                                             // Add visible page numbers
-                                                            for (let i = startPage; i <= endPage; i++) {
+                                                            for (
+                                                                let i =
+                                                                    startPage;
+                                                                i <= endPage;
+                                                                i++
+                                                            ) {
                                                                 pages.push(
                                                                     <button
                                                                         key={i}
                                                                         onClick={() => {
-                                                                            setCurrentPage(i);
+                                                                            setCurrentPage(
+                                                                                i
+                                                                            );
                                                                             executeReport();
                                                                         }}
-                                                                        className={`${styles.pageBtn} ${i === currentPage ? styles.active : ''}`}
+                                                                        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>);
+                                                            if (
+                                                                endPage <
+                                                                totalPages
+                                                            ) {
+                                                                if (
+                                                                    endPage <
+                                                                    totalPages -
+                                                                        1
+                                                                ) {
+                                                                    pages.push(
+                                                                        <span
+                                                                            key="end-ellipsis"
+                                                                            className={
+                                                                                styles.ellipsis
+                                                                            }
+                                                                        >
+                                                                            ...
+                                                                        </span>
+                                                                    );
                                                                 }
                                                                 pages.push(
                                                                     <button
-                                                                        key={totalPages}
+                                                                        key={
+                                                                            totalPages
+                                                                        }
                                                                         onClick={() => {
-                                                                            setCurrentPage(totalPages);
+                                                                            setCurrentPage(
+                                                                                totalPages
+                                                                            );
                                                                             executeReport();
                                                                         }}
-                                                                        className={`${styles.pageBtn} ${totalPages === currentPage ? styles.active : ''}`}
+                                                                        className={`${
+                                                                            styles.pageBtn
+                                                                        } ${
+                                                                            totalPages ===
+                                                                            currentPage
+                                                                                ? styles.active
+                                                                                : ''
+                                                                        }`}
                                                                     >
-                                                                        {totalPages}
+                                                                        {
+                                                                            totalPages
+                                                                        }
                                                                     </button>
                                                                 );
                                                             }
-                                                            
+
                                                             return pages;
                                                         })()}
                                                     </div>
-                                                    
+
                                                     <button
                                                         onClick={() => {
-                                                            const totalPages = Math.ceil(totalCount / pageSize);
-                                                            if (currentPage < totalPages) {
-                                                                const newPage = currentPage + 1;
-                                                                setCurrentPage(newPage);
+                                                            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 : ''}`}
+                                                        disabled={
+                                                            currentPage >=
+                                                            Math.ceil(
+                                                                totalCount /
+                                                                    pageSize
+                                                            )
+                                                        }
+                                                        className={`${
+                                                            styles.pageBtn
+                                                        } ${
+                                                            currentPage >=
+                                                            Math.ceil(
+                                                                totalCount /
+                                                                    pageSize
+                                                            )
+                                                                ? styles.disabled
+                                                                : ''
+                                                        }`}
                                                     >
                                                         Next ›
                                                     </button>
@@ -7579,33 +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>
+                {!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>
-                )}
+                    )}
             </div>
         );
     };