@visns-studio/visns-components 5.14.9 → 5.14.11

package/src/components/generic/GenericReport.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import moment from 'moment';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
+import GroupedReportRenderer from './GroupedReportRenderer';
+import { formatCellContent } from './shared/formatters';
 import {
     HelpCircle as Question,
     Link as LinkChain,
@@ -29,13 +31,16 @@ import {
     Rss,
     Globe,
     Lock,
+    Database,
 } from 'lucide-react';
 import CustomFetch from '../Fetch';
 import Download from '../Download';
 import { saveAs } from 'file-saver';
+import * as XLSX from 'xlsx';
 import Swal from 'sweetalert2';
 import styles from '../styles/GenericReport.module.scss';
 import '../styles/SweetAlert.module.css';
+import './groupedReport.css';
 
 // Icon mapping for common table types
 const tableIcons = {
@@ -907,6 +912,22 @@ const wizardSteps = [
             tip: 'Filters help you focus on specific data, like only active customers or recent transactions.',
         },
     },
+    {
+        id: 'grouping',
+        title: 'Group Configuration',
+        icon: Data,
+        description: 'Organize data into groups (optional)',
+        guidance: {
+            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)',
+                'Configure group display options and styling',
+                'Skip this step for a standard table report',
+            ],
+            tip: 'Grouping is perfect for reports like "Projects by Facility" or "Sales by Region".',
+        },
+    },
     {
         id: 'preview',
         title: 'Preview & Save',
@@ -1016,13 +1037,14 @@ const GenericReportImproved = ({
 
     // State for report preview
     const [previewData, setPreviewData] = useState([]);
+    const [groupedData, setGroupedData] = useState(null);
     const [gridColumns, setGridColumns] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [hasAutoExecuted, setHasAutoExecuted] = useState(false);
 
     // State for pagination - now using server-side pagination
     const [currentPage, setCurrentPage] = useState(1);
-    const [pageSize, setPageSize] = useState(25); // Default to 25 for better UX
+    const [pageSize, setPageSize] = useState(10); // Default to 10 to reduce scrolling
     const [totalPages, setTotalPages] = useState(0);
     const [totalCount, setTotalCount] = useState(0); // Total records from server
 
@@ -1039,6 +1061,27 @@ const GenericReportImproved = ({
     });
     const [customCalculatedFields, setCustomCalculatedFields] = useState([]);
 
+    // State for group configuration
+    const [groupingConfig, setGroupingConfig] = useState({
+        enabled: false,
+        groupByField: '',
+        groupDisplayName: '',
+        sortBy: '',
+        sortDirection: 'asc',
+        rowsPerGroup: 10,
+        showEmptyRows: false,
+        showGroupTotals: true,
+        expandable: true,
+        groupHeaderStyle: 'primary',
+        emptyRowStyle: 'light'
+    });
+
+    // State for custom URLs
+    const [customUrls, setCustomUrls] = useState({
+        executeUrl: '',
+        exportUrl: ''
+    });
+
     // Note: Removed table search functionality to simplify user experience
 
     // Extract additional settings with defaults
@@ -1375,13 +1418,30 @@ const GenericReportImproved = ({
         currentWizardStep,
     ]);
 
+    // Reset auto-execute flag when user navigates away from preview step
+    useEffect(() => {
+        if (currentWizardStep !== 5) {
+            setHasAutoExecuted(false);
+        }
+    }, [currentWizardStep]);
+
+    // Reset auto-execute flag when report configuration changes
+    useEffect(() => {
+        setHasAutoExecuted(false);
+    }, [
+        selectedTable,
+        selectedColumns.length,
+        filterCriteria,
+        joins.length,
+        groupingConfig,
+    ]);
+
     // Auto-execute report when user reaches step 5 (preview step)
     useEffect(() => {
         if (
-            currentWizardStep === 4 && // Step 5 is index 4 (preview step)
+            currentWizardStep === 5 && // Step 6 is index 5 (preview step)
             selectedTable &&
             selectedColumns.length > 0 &&
-            previewData.length === 0 && // Only if no data loaded yet
             !isLoading &&
             !hasAutoExecuted // Prevent infinite loops
         ) {
@@ -1392,7 +1452,6 @@ const GenericReportImproved = ({
         currentWizardStep,
         selectedTable,
         selectedColumns.length,
-        previewData.length,
         isLoading,
         hasAutoExecuted,
     ]);
@@ -1496,8 +1555,10 @@ const GenericReportImproved = ({
                 return selectedColumns.length > 0;
             case 'filters':
                 return true; // Optional step
+            case 'grouping':
+                return true; // Optional step - always complete (user can skip or configure)
             case 'preview':
-                return previewData.length > 0;
+                return previewData.length > 0 || groupedData !== null;
             default:
                 return false;
         }
@@ -2191,12 +2252,80 @@ const GenericReportImproved = ({
 
     // Create dataSource function for server-side pagination (similar to DataGrid)
     const dataSource = useCallback(
-        async ({ skip, limit, sortInfo, filterValue }) => {
+        async ({ skip, limit, sortInfo, filterValue, grouping, template }) => {
             if (!selectedTable || selectedColumns.length === 0) {
                 return { data: [], count: 0 };
             }
 
             try {
+                // Check if this is a grouped report
+                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;
+                    
+                    // Debug logging
+                    console.log('🔍 [DEBUG] Grouped Report Detected:', {
+                        selectedTemplate: selectedTemplate?.id,
+                        isDynamicTemplate,
+                        template,
+                        customExecuteUrl: customUrls.executeUrl,
+                        templateExecuteUrl: selectedTemplate?.executeUrl,
+                        defaultExecuteUrl: executeUrl,
+                        finalExecuteUrl: templateExecuteUrl,
+                        isGroupedReport,
+                        templateGroupingConfig: selectedTemplate?.grouping,
+                        customGroupingConfig: groupingConfig,
+                        usingCustomUrl: !!customUrls.executeUrl,
+                        usingTemplateExecuteUrl: !!selectedTemplate?.executeUrl
+                    });
+
+                    let payload;
+                    
+                    if (isDynamicTemplate) {
+                        // For dynamic templates, send the complete template configuration
+                        payload = {
+                            dynamic_template: template,
+                            table: selectedTable,
+                            columns: selectedColumns,
+                            joins: joins,
+                            filters: flattenFilterCriteria(filterCriteria),
+                            sorting: sortCriteria
+                        };
+                    } else {
+                        // For predefined templates, use the existing approach
+                        payload = {
+                            template_id: selectedTemplate?.id || 'utilization_planning',
+                            filters: []
+                        };
+                    }
+                    
+                    console.log('🚀 [DEBUG] Sending grouped report request:', {
+                        url: templateExecuteUrl,
+                        method: 'POST',
+                        payload
+                    });
+
+                    const result = await CustomFetch(
+                        templateExecuteUrl,
+                        'POST',
+                        payload
+                    );
+
+                    console.log('📊 [DEBUG] Grouped report response:', result);
+
+                    if (result.error) {
+                        console.error('❌ Grouped report execution error:', result.error);
+                        return { data: [], count: 0 };
+                    }
+
+                    return result;
+                }
+
                 const page = Math.floor(skip / limit) + 1;
 
                 // Use the same payload format as GenericReport (with query wrapper)
@@ -2250,8 +2379,21 @@ const GenericReportImproved = ({
                     page: page,
                 };
 
+                // Priority: custom URL > template URL > default URL
+                const finalExecuteUrl = customUrls.executeUrl || selectedTemplate?.executeUrl || executeUrl;
+                
+                console.log('🔍 [DEBUG] Regular Report API Call:', {
+                    selectedTemplate: selectedTemplate?.id,
+                    customExecuteUrl: customUrls.executeUrl,
+                    templateExecuteUrl: selectedTemplate?.executeUrl,
+                    defaultExecuteUrl: executeUrl,
+                    finalExecuteUrl,
+                    usingCustomUrl: !!customUrls.executeUrl,
+                    usingTemplateExecuteUrl: !!selectedTemplate?.executeUrl
+                });
+
                 const result = await CustomFetch(
-                    executeUrl,
+                    finalExecuteUrl,
                     'POST',
                     reportConfig
                 );
@@ -2292,11 +2434,23 @@ const GenericReportImproved = ({
             filterCriteria,
             sortCriteria,
             executeUrl,
+            selectedTemplate,
+            groupingConfig,
+            customUrls,
         ]
     );
 
     // Execute report function for manual execution (creates grid columns)
     const executeReport = async () => {
+        console.log('🎯 [DEBUG] executeReport called:', {
+            selectedTable,
+            selectedColumns: selectedColumns.length,
+            selectedTemplate: selectedTemplate?.id,
+            hasGrouping: selectedTemplate?.grouping?.enabled,
+            executeUrl,
+            setting
+        });
+
         if (!selectedTable || selectedColumns.length === 0) {
             toast.warning(
                 'Please select at least one field to include in your report.'
@@ -2305,22 +2459,127 @@ const GenericReportImproved = ({
         }
 
         setIsLoading(true);
+        setGroupedData(null); // Reset grouped data
 
         try {
-            // Fetch first page to get data structure for grid columns
-            const firstPageResult = await dataSource({
-                skip: 0,
-                limit: pageSize,
-                sortInfo: null,
-                filterValue: null,
+            // Check if selected template has grouping enabled OR custom grouping is enabled
+            const hasTemplateGrouping = selectedTemplate?.grouping?.enabled;
+            const hasCustomGrouping = groupingConfig.enabled;
+            const hasGrouping = hasTemplateGrouping || hasCustomGrouping;
+            let fetchedDataCount = 0;
+            
+            console.log('📋 [DEBUG] Template analysis:', {
+                selectedTemplate,
+                hasTemplateGrouping,
+                hasCustomGrouping,
+                hasGrouping,
+                customGroupingConfig: groupingConfig,
+                templateGroupingConfig: selectedTemplate?.grouping
             });
+            console.log('🎯 [DEBUG] Initial fetchedDataCount:', fetchedDataCount);
+            
+            if (hasGrouping) {
+                // Determine which grouping configuration to use
+                let effectiveGrouping;
+                let dynamicTemplate;
+                
+                if (hasCustomGrouping && groupingConfig.groupByField) {
+                    // Create dynamic template with custom grouping configuration
+                    dynamicTemplate = {
+                        id: `custom_grouped_${Date.now()}`,
+                        name: reportName || 'Custom Grouped Report',
+                        mainTable: selectedTable,
+                        defaultColumns: selectedColumns,
+                        calculatedFields: customCalculatedFields,
+                        grouping: {
+                            enabled: true,
+                            type: 'sections',
+                            groupByField: groupingConfig.groupByField,
+                            groupDisplayName: groupingConfig.groupDisplayName,
+                            sortBy: groupingConfig.groupByField, // Use same field for sorting
+                            sortDirection: groupingConfig.sortDirection,
+                            rowsPerGroup: groupingConfig.rowsPerGroup,
+                            showEmptyRows: groupingConfig.showEmptyRows,
+                            showGroupTotals: groupingConfig.showGroupTotals,
+                            expandable: groupingConfig.expandable,
+                            groupHeaderStyle: groupingConfig.groupHeaderStyle,
+                            emptyRowStyle: groupingConfig.emptyRowStyle
+                        }
+                    };
+                    effectiveGrouping = dynamicTemplate.grouping;
+                    
+                    console.log('🏗️ [DEBUG] Created dynamic template for custom grouping:', dynamicTemplate);
+                } else if (hasCustomGrouping && !groupingConfig.groupByField) {
+                    // Custom grouping enabled but no field selected - show error and fallback to regular report
+                    toast.error('Please select a field to group by before executing the report.');
+                    console.log('⚠️ [DEBUG] Custom grouping enabled but no groupByField selected');
+                    setIsLoading(false);
+                    return;
+                } else {
+                    // Use existing template grouping
+                    effectiveGrouping = selectedTemplate.grouping;
+                    console.log('📋 [DEBUG] Using template grouping:', effectiveGrouping);
+                }
+                
+                // For grouped reports, fetch data with reasonable limit
+                const groupedResult = await dataSource({
+                    skip: 0,
+                    limit: 1000, // Maximum allowed limit
+                    sortInfo: null,
+                    filterValue: null,
+                    grouping: effectiveGrouping,
+                    template: dynamicTemplate // Pass dynamic template if created
+                });
+                
+                console.log('🎯 [DEBUG] Full API Response:', groupedResult);
+                console.log('🎯 [DEBUG] groupedResult.data:', groupedResult.data);
+                console.log('🎯 [DEBUG] groupedResult.data.grouped:', groupedResult.data?.grouped);
+                console.log('🎯 [DEBUG] groupedResult.data.groupedData:', groupedResult.data?.groupedData);
+
+                if (groupedResult.data?.grouped && groupedResult.data?.groupedData?.groups) {
+                    console.log('✅ Processing grouped report');
+                    setGroupedData(groupedResult.data); // Store entire response with grouped flag
+                    setPreviewData([]); // Clear regular preview data
+                    // Get the count from the fetched grouped data
+                    console.log('🎯 [DEBUG] Before assignment - groupedResult.data.groupedData.totalRecords:', groupedResult.data.groupedData?.totalRecords);
+                    fetchedDataCount = groupedResult.data.groupedData?.totalRecords || 0;
+                    console.log('🎯 [DEBUG] After assignment - fetchedDataCount:', fetchedDataCount);
+                    console.log('🔢 [DEBUG] Grouped data count:', {
+                        totalRecords: groupedResult.data.groupedData?.totalRecords,
+                        fetchedDataCount,
+                        hasGroups: !!groupedResult.data.groupedData?.groups
+                    });
+                } 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);
+                    setPreviewData(fallbackData);
+                    fetchedDataCount = fallbackData.length;
+                }
+            } else {
+                // Regular non-grouped report
+                const currentPageResult = await dataSource({
+                    skip: (currentPage - 1) * pageSize,
+                    limit: pageSize,
+                    sortInfo: null,
+                    filterValue: null,
+                });
 
-            if (firstPageResult.data && firstPageResult.data.length > 0) {
-                setPreviewData(firstPageResult.data);
+                if (currentPageResult.data && currentPageResult.data.length > 0) {
+                    setPreviewData(currentPageResult.data);
+                    fetchedDataCount = currentPageResult.data.length;
+                }
+            }
 
-                // Create grid columns dynamically from actual data with smart formatting
-                const firstRow = firstPageResult.data[0];
-                const dynamicColumns = Object.keys(firstRow).map((key) => {
+            // 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
@@ -2333,7 +2592,7 @@ const GenericReportImproved = ({
                     });
 
                     // Check if any value in this column is JSON
-                    const hasJsonValues = firstPageResult.data.some((row) => {
+                    const hasJsonValues = dataToProcess.some((row) => {
                         return isJsonValue(row[key]);
                     });
 
@@ -2428,11 +2687,11 @@ const GenericReportImproved = ({
                             return formattedValue;
                         },
                     };
-                });
-                setGridColumns(dynamicColumns);
-            } else {
-                // Fallback to selected columns if no data
-                const columns = selectedColumns.map((col) => {
+                    });
+                    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(
@@ -2468,7 +2727,7 @@ const GenericReportImproved = ({
                     }
 
                     return {
-                        name: col.displayName || formatName(col.column),
+                        name: col.displayName || `${col.table}.${col.column}`,
                         header: col.displayName || formatName(col.column),
                         defaultFlex: 1,
                         minWidth: 100,
@@ -2499,16 +2758,18 @@ const GenericReportImproved = ({
                             return formattedValue;
                         },
                     };
-                });
-                setGridColumns(columns);
+                    });
+                    setGridColumns(columns);
+                }
             }
 
             if (currentWizardStep < wizardSteps.length - 1) {
                 setCurrentWizardStep(wizardSteps.length - 1);
             }
 
-            // Show success message with total records found
-            toast.success(`Found ${firstPageResult.count} records`);
+            // Report executed successfully
+            console.log('🎯 [DEBUG] Final fetchedDataCount:', fetchedDataCount);
+            console.log('🎯 [DEBUG] Type of fetchedDataCount:', typeof fetchedDataCount);
         } catch (error) {
             toast.error('Failed to execute report');
             console.error('Error executing report:', error);
@@ -2597,12 +2858,54 @@ const GenericReportImproved = ({
                 }
             }
 
+            // Restore grouping configuration
+            if (config.grouping) {
+                setGroupingConfig({
+                    enabled: config.isGrouped || false,
+                    groupByField: config.grouping.groupByField || '',
+                    groupDisplayName: config.grouping.groupDisplayName || '',
+                    sortBy: config.grouping.sortBy || '',
+                    sortDirection: config.grouping.sortDirection || 'asc',
+                    rowsPerGroup: config.grouping.rowsPerGroup || 10,
+                    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'
+                });
+            } else {
+                // Reset grouping config if not present in saved report
+                setGroupingConfig({
+                    enabled: false,
+                    groupByField: '',
+                    groupDisplayName: '',
+                    sortBy: '',
+                    sortDirection: 'asc',
+                    rowsPerGroup: 10,
+                    showEmptyRows: false,
+                    showGroupTotals: true,
+                    expandable: true,
+                    groupHeaderStyle: 'primary',
+                    emptyRowStyle: 'light'
+                });
+            }
+
+            // Restore custom calculated fields if present
+            if (config.customCalculatedFields) {
+                setCustomCalculatedFields(config.customCalculatedFields);
+            }
+
+            // Restore custom URLs if present
+            if (config.customUrls) {
+                setCustomUrls(config.customUrls);
+            }
+
             setReportName(report.label);
             setIsPublic(report.is_public || false);
             setLoadedReportId(report.id); // Track the loaded report ID for overwrite functionality
             setShowTemplates(false);
-            // Set to the preview step (index 4) since the report is already configured
-            setCurrentWizardStep(4);
+            // Set to the preview step (index 5) since the report is already configured
+            setCurrentWizardStep(5);
 
             toast.success(`Loaded report: ${report.label}`);
         } catch (error) {
@@ -2614,6 +2917,13 @@ const GenericReportImproved = ({
     // Load business template configuration
     const loadBusinessTemplate = async (template) => {
         try {
+            console.log('🏗️ [DEBUG] Loading business template:', {
+                templateId: template.id,
+                templateName: template.name,
+                hasGrouping: template.grouping?.enabled,
+                groupingConfig: template.grouping
+            });
+            
             setSelectedTemplate(template);
 
             // Set main table
@@ -2673,32 +2983,87 @@ const GenericReportImproved = ({
                 setSelectedColumns(formattedColumns);
             }
 
-            // Apply quick filters as default filter criteria
-            if (template.quickFilters) {
-                const defaultFilters = template.quickFilters
-                    .filter(
-                        (filter) =>
-                            filter.value && filter.value !== 'current_user'
-                    ) // Skip user-specific filters for now
-                    .map((filter) => ({
-                        id: filter.id,
-                        field: filter.field,
-                        operator: filter.operator || '=',
-                        value: filter.value,
-                        label: filter.label,
-                    }));
+            // Apply template quick filters as default filters
+            if (template.quickFilters && template.quickFilters.length > 0) {
+                const updatedFilterCriteria = {
+                    operator: 'AND',
+                    groups: [
+                        {
+                            operator: 'AND',
+                            filters: [],
+                        },
+                    ],
+                };
 
-                if (defaultFilters.length > 0) {
-                    setFilterCriteria({
-                        operator: 'AND',
-                        groups: [
-                            {
-                                operator: 'AND',
-                                filters: defaultFilters,
-                            },
-                        ],
-                    });
-                }
+                template.quickFilters.forEach((quickFilter) => {
+                    let filterValue = convertDynamicDateValue(quickFilter.value);
+
+                    // Parse the field to extract table and column
+                    const fieldParts = quickFilter.field.split('.');
+                    const table = fieldParts[0];
+                    const column = fieldParts.slice(1).join('.'); // Handle cases like "leads.user.name"
+
+                    // Convert date range objects to comma-separated string for BETWEEN operator
+                    if (quickFilter.type === 'date_range' && typeof filterValue === 'object' && filterValue.start && filterValue.end) {
+                        filterValue = `${filterValue.start},${filterValue.end}`;
+                    }
+
+                    const newFilter = {
+                        id: `template_${quickFilter.id}_${Date.now()}`,
+                        field: quickFilter.field,
+                        table: table,
+                        column: column,
+                        operator:
+                            quickFilter.operator ||
+                            (quickFilter.type === 'date_range' ? 'BETWEEN' : '='),
+                        value: filterValue,
+                        label: quickFilter.label,
+                        type: quickFilter.type,
+                    };
+
+                    updatedFilterCriteria.groups[0].filters.push(newFilter);
+                });
+
+                setFilterCriteria(updatedFilterCriteria);
+                
+            }
+
+            // Apply template grouping configuration
+            if (template.grouping && template.grouping.enabled) {
+                setGroupingConfig({
+                    enabled: template.grouping.enabled || false,
+                    groupByField: template.grouping.groupByField || '',
+                    groupDisplayName: template.grouping.groupDisplayName || '',
+                    sortBy: template.grouping.sortBy || '',
+                    sortDirection: template.grouping.sortDirection || 'asc',
+                    rowsPerGroup: template.grouping.rowsPerGroup || 10,
+                    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'
+                });
+                
+                console.log('🏗️ [DEBUG] Applied template grouping config:', {
+                    enabled: template.grouping.enabled,
+                    groupByField: template.grouping.groupByField,
+                    groupDisplayName: template.grouping.groupDisplayName
+                });
+            } else {
+                // Reset grouping config if template doesn't have grouping
+                setGroupingConfig({
+                    enabled: false,
+                    groupByField: '',
+                    groupDisplayName: '',
+                    sortBy: '',
+                    sortDirection: 'asc',
+                    rowsPerGroup: 10,
+                    showEmptyRows: false,
+                    showGroupTotals: true,
+                    expandable: true,
+                    groupHeaderStyle: 'primary',
+                    emptyRowStyle: 'light'
+                });
             }
 
             // Set report name based on template
@@ -3080,6 +3445,8 @@ const GenericReportImproved = ({
                 return renderColumnSelection();
             case 'filters':
                 return renderFilters();
+            case 'grouping':
+                return renderGrouping();
             case 'preview':
                 return renderPreview();
             default:
@@ -4308,32 +4675,26 @@ const GenericReportImproved = ({
         handleRemoveFilterCriterion(groupIndex, filterIndex);
     };
 
-    // Apply template-based quick filter
-    const applyTemplateQuickFilter = (quickFilter) => {
-        let filterValue = quickFilter.value;
-
-        // Handle dynamic date ranges
-        switch (quickFilter.value) {
+    // Helper function to convert dynamic date values to actual date ranges
+    const convertDynamicDateValue = (value) => {
+        switch (value) {
             case 'current_week':
-                filterValue = {
+                return {
                     start: moment().startOf('week').format('YYYY-MM-DD'),
                     end: moment().endOf('week').format('YYYY-MM-DD'),
                 };
-                break;
             case 'next_30_days':
-                filterValue = {
+                return {
                     start: moment().format('YYYY-MM-DD'),
                     end: moment().add(30, 'days').format('YYYY-MM-DD'),
                 };
-                break;
             case 'last_30_days':
-                filterValue = {
+                return {
                     start: moment().subtract(30, 'days').format('YYYY-MM-DD'),
                     end: moment().format('YYYY-MM-DD'),
                 };
-                break;
             case 'last_quarter':
-                filterValue = {
+                return {
                     start: moment()
                         .subtract(1, 'quarter')
                         .startOf('quarter')
@@ -4343,9 +4704,8 @@ const GenericReportImproved = ({
                         .endOf('quarter')
                         .format('YYYY-MM-DD'),
                 };
-                break;
             case 'last_year':
-                filterValue = {
+                return {
                     start: moment()
                         .subtract(1, 'year')
                         .startOf('year')
@@ -4355,12 +4715,44 @@ const GenericReportImproved = ({
                         .endOf('year')
                         .format('YYYY-MM-DD'),
                 };
-                break;
+            case 'today':
+                return moment().format('YYYY-MM-DD');
+            case 'yesterday':
+                return moment().subtract(1, 'day').format('YYYY-MM-DD');
+            case 'current_month':
+                return {
+                    start: moment().startOf('month').format('YYYY-MM-DD'),
+                    end: moment().endOf('month').format('YYYY-MM-DD'),
+                };
+            case 'current_year':
+                return {
+                    start: moment().startOf('year').format('YYYY-MM-DD'),
+                    end: moment().endOf('year').format('YYYY-MM-DD'),
+                };
+            default:
+                return value; // Return original value if no conversion needed
+        }
+    };
+
+    // Apply template-based quick filter
+    const applyTemplateQuickFilter = (quickFilter) => {
+        let filterValue = convertDynamicDateValue(quickFilter.value);
+
+        // Parse the field to extract table and column
+        const fieldParts = quickFilter.field.split('.');
+        const table = fieldParts[0];
+        const column = fieldParts.slice(1).join('.'); // Handle cases like "leads.user.name"
+
+        // Convert date range objects to comma-separated string for BETWEEN operator
+        if (quickFilter.type === 'date_range' && typeof filterValue === 'object' && filterValue.start && filterValue.end) {
+            filterValue = `${filterValue.start},${filterValue.end}`;
         }
 
         const newFilter = {
             id: `template_${quickFilter.id}_${Date.now()}`,
             field: quickFilter.field,
+            table: table,
+            column: column,
             operator:
                 quickFilter.operator ||
                 (quickFilter.type === 'date_range' ? 'BETWEEN' : '='),
@@ -5177,6 +5569,7 @@ const GenericReportImproved = ({
             suggestions: smartSuggestions,
         });
 
+
         return (
             <div className={styles.filtersSection}>
                 {/* Template Quick Filters */}
@@ -6078,9 +6471,22 @@ const GenericReportImproved = ({
 
             console.log('📁 Generated filename:', fileName);
 
+            // Priority: custom export URL > template export URL > default export URL
+            const finalExportUrl = customUrls.exportUrl || selectedTemplate?.exportUrl || exportUrl;
+            
+            console.log('🔍 [DEBUG] Export API Call:', {
+                selectedTemplate: selectedTemplate?.id,
+                customExportUrl: customUrls.exportUrl,
+                templateExportUrl: selectedTemplate?.exportUrl,
+                defaultExportUrl: exportUrl,
+                finalExportUrl,
+                usingCustomExportUrl: !!customUrls.exportUrl,
+                usingTemplateExportUrl: !!selectedTemplate?.exportUrl
+            });
+
             // Use Download component which handles error checking and blob download properly
-            console.log('📡 Making request to:', exportUrl);
-            const result = await Download(exportUrl, 'POST', exportData);
+            console.log('📡 Making request to:', finalExportUrl);
+            const result = await Download(finalExportUrl, 'POST', exportData);
 
             console.log('Download component returned result:', result);
 
@@ -6185,6 +6591,183 @@ const GenericReportImproved = ({
         }
     };
 
+    // Handle grouped report export to Excel
+    const handleRegularExport = async () => {
+        if (previewData.length === 0) {
+            toast.error('No data available to export');
+            return;
+        }
+
+        try {
+            // Use the existing client-side Excel export functionality
+            await exportReport('excel');
+        } catch (error) {
+            console.error('Regular export failed:', error);
+            toast.error('Export failed. Please try again.');
+        }
+    };
+
+    const handleGroupedExport = async () => {
+        if (!selectedTemplate) {
+            toast.error('No template selected for export');
+            return;
+        }
+
+        // Debug logging to understand the groupedData state
+        console.log('🔍 [DEBUG] Export function called with:', {
+            groupedData: groupedData,
+            hasGroupedData: !!groupedData,
+            hasGroups: !!(groupedData && groupedData.groups),
+            groupsLength: groupedData && groupedData.groups ? groupedData.groups.length : 'undefined',
+            selectedColumns: selectedColumns,
+            selectedTemplate: selectedTemplate?.name
+        });
+
+        // Check the correct path: groupedData.groupedData.groups
+        const actualGroups = groupedData?.groupedData?.groups;
+        if (!groupedData || !actualGroups || actualGroups.length === 0) {
+            console.error('❌ [DEBUG] Export failed - no grouped data:', {
+                groupedData: groupedData,
+                hasGroupedData: !!groupedData,
+                hasGroupedDataProperty: !!(groupedData && groupedData.groupedData),
+                hasGroups: !!(groupedData && groupedData.groupedData && groupedData.groupedData.groups),
+                groupsLength: actualGroups ? actualGroups.length : 'undefined'
+            });
+            toast.error('No grouped data available for export');
+            return;
+        }
+
+        try {
+            toast.info('Generating Excel export...');
+
+            // Create workbook and worksheet
+            const workbook = XLSX.utils.book_new();
+            const worksheetData = [];
+
+            // Add headers
+            const headers = selectedColumns.map(col => col.displayName || col.column);
+            worksheetData.push(headers);
+
+            // Helper function to get cell value (same logic as SectionGroupedReport)
+            const getCellValue = (row, column) => {
+                if (row.__empty_row__) return '';
+
+                let value;
+
+                // Try multiple field access patterns
+                if (column.displayName && row[`\`${column.displayName}\``] !== undefined) {
+                    value = row[`\`${column.displayName}\``];
+                } else if (column.displayName && row[column.displayName] !== undefined) {
+                    value = row[column.displayName];
+                } 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) {
+                    value = row[`\`${column.table}_${column.column}\``];
+                } else if (row[column.column] !== undefined) {
+                    value = row[column.column];
+                } else if (row[`\`${column.column}\``] !== undefined) {
+                    value = row[`\`${column.column}\``];
+                } else if (column.id && row[column.id] !== undefined) {
+                    value = row[column.id];
+                }
+
+                // 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' 
+                            ? moment(value).format('DD/MM/YYYY')
+                            : moment(value).format('DD/MM/YYYY HH:mm:ss');
+                    }
+                }
+
+                // Handle Comments field - strip HTML and formatting
+                if (column.displayName === 'Comments' && value) {
+                    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'))) {
+                    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)}`;
+                    }
+                }
+
+                // Handle ACN (Australian Company Number) columns for export
+                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 String(value);
+            };
+
+            // Add data for each group
+            actualGroups.forEach((group, groupIndex) => {
+                // Add group header row
+                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));
+                    worksheetData.push(dataRow);
+                });
+
+                // Add separator row between groups (except for last group)
+                if (groupIndex < actualGroups.length - 1) {
+                    worksheetData.push(Array(headers.length).fill(''));
+                }
+            });
+
+            // Create worksheet from data
+            const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
+
+            // Set column widths based on content
+            const colWidths = selectedColumns.map(column => {
+                switch (column.displayName) {
+                    case 'Comments': return { wch: 40 };
+                    case 'Project':
+                    case 'Project Name': return { wch: 25 };
+                    case 'User':
+                    case 'Assigned User': return { wch: 20 };
+                    case 'Start Date':
+                    case 'End Date':
+                    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' });
+            
+            saveAs(blob, filename);
+            toast.success('Excel export completed successfully!');
+
+        } catch (error) {
+            console.error('Export error:', error);
+            toast.error(`Export failed: ${error.message}`);
+        }
+    };
+
     // Save report configuration (with save/save-as functionality)
     const saveReport = async (saveAs = false) => {
         if (!reportName.trim()) {
@@ -6262,6 +6845,10 @@ const GenericReportImproved = ({
                         joins: joins,
                         filters: filterCriteria,
                         sorting: sortCriteria,
+                        grouping: groupingConfig.enabled ? groupingConfig : null,
+                        isGrouped: groupingConfig.enabled,
+                        customCalculatedFields: customCalculatedFields,
+                        customUrls: customUrls,
                     },
                 };
 
@@ -6314,6 +6901,254 @@ const GenericReportImproved = ({
         }
     };
 
+    // Render grouping configuration
+    const renderGrouping = () => {
+        return (
+            <div className={styles.groupingSection}>
+                <div className={styles.sectionContent}>
+                    <div className={styles.groupingToggle}>
+                        <label className={styles.toggleLabel}>
+                            <input
+                                type="checkbox"
+                                checked={groupingConfig.enabled}
+                                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>
+                        </label>
+                        <p className={styles.helpText}>
+                            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>
+                                <select
+                                    value={groupingConfig.groupByField}
+                                    onChange={(e) => {
+                                        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';
+                                        
+                                        setGroupingConfig({
+                                            ...groupingConfig,
+                                            groupByField: e.target.value,
+                                            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>
+                                        );
+                                    })}
+                                </select>
+                                <p className={styles.fieldHelp}>
+                                    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>
+                                <input
+                                    type="text"
+                                    value={groupingConfig.groupDisplayName}
+                                    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")
+                                </p>
+                            </div>
+                            
+                            {/* Advanced Group Options */}
+                            <div className={styles.advancedGroupOptions}>
+                                <h4 className={styles.sectionTitle}>Advanced Options</h4>
+                                
+                                <div className={styles.optionsGrid}>
+                                    <div className={styles.formGroup}>
+                                        <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
+                                            })}
+                                            className={styles.formInput}
+                                        />
+                                    </div>
+                                    
+                                    <div className={styles.formGroup}>
+                                        <label className={styles.formLabel}>Group Header Style</label>
+                                        <select
+                                            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>
+                                        </select>
+                                    </div>
+                                    
+                                    <div className={styles.formGroup}>
+                                        <label className={styles.formLabel}>Sort Direction</label>
+                                        <select
+                                            value={groupingConfig.sortDirection}
+                                            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>
+                                        </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
+                                            })}
+                                        />
+                                        <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
+                                            })}
+                                        />
+                                        <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
+                                            })}
+                                        />
+                                        <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>
+                                    <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'}
+                                        </p>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {/* Custom URLs Configuration - Only show when grouping is enabled */}
+                    {groupingConfig.enabled && (
+                        <div className={styles.customUrlsSection}>
+                            <h4 className={styles.sectionTitle}>Custom API Endpoints (Optional)</h4>
+                            <p className={styles.helpText}>
+                                Override default API endpoints for specialized report handling
+                            </p>
+                            
+                            <div className={styles.optionsGrid}>
+                                <div className={styles.formGroup}>
+                                    <label className={styles.formLabel}>Custom Execute URL</label>
+                                    <input
+                                        type="text"
+                                        value={customUrls.executeUrl}
+                                        onChange={(e) => setCustomUrls({
+                                            ...customUrls,
+                                            executeUrl: e.target.value
+                                        })}
+                                        placeholder="/api/custom-reports/execute"
+                                        className={styles.formInput}
+                                    />
+                                    <p className={styles.fieldHelp}>
+                                        Custom endpoint for report execution (overrides template and default URLs)
+                                    </p>
+                                </div>
+                                
+                                <div className={styles.formGroup}>
+                                    <label className={styles.formLabel}>Custom Export URL</label>
+                                    <input
+                                        type="text"
+                                        value={customUrls.exportUrl}
+                                        onChange={(e) => setCustomUrls({
+                                            ...customUrls,
+                                            exportUrl: e.target.value
+                                        })}
+                                        placeholder="/api/custom-reports/export"
+                                        className={styles.formInput}
+                                    />
+                                    <p className={styles.fieldHelp}>
+                                        Custom endpoint for report exports (for server-side exports)
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
     // Render preview
     const renderPreview = () => {
         return (
@@ -6330,34 +7165,389 @@ 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) && (
+                        <div className={styles.viewToggle}>
+                            <span className={styles.viewLabel}>View:</span>
+                            <button
+                                className={`${styles.btn} ${styles.btnSecondary} ${
+                                    groupedData ? styles.active : ''
+                                }`}
+                                onClick={() => {
+                                    if (!groupedData && previewData.length > 0) {
+                                        // Switch to grouped view
+                                        executeReport();
+                                    }
+                                }}
+                                disabled={isLoading}
+                                title="Show grouped report"
+                            >
+                                📊 Grouped
+                            </button>
+                            <button
+                                className={`${styles.btn} ${styles.btnSecondary} ${
+                                    !groupedData ? styles.active : ''
+                                }`}
+                                onClick={() => {
+                                    if (groupedData) {
+                                        // Switch to regular table view
+                                        setGroupedData(null);
+                                        if (previewData.length === 0) {
+                                            executeReport();
+                                        }
+                                    }
+                                }}
+                                disabled={isLoading}
+                                title="Show regular table"
+                            >
+                                📋 Table
+                            </button>
+                        </div>
+                    )}
                 </div>
 
-                {previewData.length > 0 && (
+                {/* Render grouped report if available */}
+                {(() => {
+                    console.log('🎯 [DEBUG] Render check - groupedData:', groupedData);
+                    console.log('🎯 [DEBUG] Render check - groupedData?.grouped:', groupedData?.grouped);
+                    console.log('🎯 [DEBUG] Render check - selectedColumns:', selectedColumns);
+                    return groupedData && groupedData.grouped;
+                })() && (
+                    <div className={styles.groupedReportContainer}>
+                        <GroupedReportRenderer 
+                            data={{
+                                ...groupedData.groupedData,
+                                grouped: true
+                            }}
+                            config={
+                                groupingConfig.enabled 
+                                    ? groupingConfig 
+                                    : selectedTemplate?.grouping || {}
+                            }
+                            columns={selectedColumns}
+                            onExport={(data) => {
+                                handleGroupedExport();
+                            }}
+                        />
+                    </div>
+                )}
+
+                {/* Render regular grid if no grouping */}
+                {!groupedData && previewData.length > 0 && (
                     <>
                         <div className={styles.gridContainer}>
-                            <ReactDataGrid
-                                columns={gridColumns}
-                                dataSource={dataSource}
-                                style={{ height: 800 }}
-                                pagination
-                                limit={pageSize}
-                                onLimitChange={(newLimit) => {
-                                    setPageSize(newLimit);
-                                }}
-                                pageSizes={[10, 15, 25, 50]}
-                                defaultLimit={25}
-                                // Row height configuration for JSON content
-                                rowHeight={null} // Allow dynamic row height
-                                estimatedRowHeight={60} // Estimated height for performance
-                                minRowHeight={40} // Minimum row height
-                                // No maxRowHeight to allow full expansion for JSON content
-                                // Enable text wrapping and proper sizing
-                                showCellBorders="horizontal"
-                                showZebraRows={false}
-                                // Ensure proper rendering of content
-                                virtualizeColumns={false}
-                                enableRowspan={false}
-                            />
+                            <div className="grouped-report">
+                                <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>
+                                        </div>
+                                        <div className="grouped-report-actions">
+                                            <button 
+                                                className="btn btn-export"
+                                                onClick={() => handleRegularExport()}
+                                                disabled={isLoading || previewData.length === 0}
+                                                title="Export report data as Excel file"
+                                            >
+                                                Export
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div className="grouped-table-container">
+                                        <table className="grouped-table">
+                                            <thead>
+                                                <tr>
+                                                    {(() => {
+                                                        const headerColumns = previewData.length > 0 ? Object.keys(previewData[0]).map(key => ({name: key, header: key.replace(/\./g, ' ')})) : gridColumns;
+                                                        return headerColumns.map((col, index) => (
+                                                            <th key={index} className="table-header">
+                                                                {col.header || col.name}
+                                                            </th>
+                                                        ));
+                                                    })()}
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {(() => {
+                                                    console.log(`🎯 [DEBUG] Rendering ${previewData.length} table rows`);
+                                                    // Always use response keys as fallback instead of gridColumns that might have wrong names
+                                                    const actualColumns = previewData.length > 0 ? Object.keys(previewData[0]).map(key => ({name: key, header: key.replace(/\./g, ' ')})) : gridColumns;
+                                                    console.log(`🎯 [DEBUG] Using columns:`, actualColumns);
+                                                    return previewData.map((row, rowIndex) => (
+                                                        <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();
+                                                                            }
+                                                                        }
+                                                                        
+                                                                        // Use formatCellContent for all other values including dates and smart boolean formatting
+                                                                        const formattedValue = formatCellContent(value, {
+                                                                            id: col.name,
+                                                                            name: col.name,
+                                                                            // Get type from template column definition if available, otherwise infer
+                                                                            type: (() => {
+                                                                                // First try to find type from template's defaultColumns
+                                                                                if (selectedTemplate?.defaultColumns) {
+                                                                                    const templateColumn = selectedTemplate.defaultColumns.find(
+                                                                                        tc => `${tc.table}.${tc.column}` === col.name || tc.column === col.name
+                                                                                    );
+                                                                                    if (templateColumn?.type) {
+                                                                                        return templateColumn.type;
+                                                                                    }
+                                                                                }
+                                                                                
+                                                                                // Fallback to column name-based type inference
+                                                                                const columnName = col.name.toLowerCase();
+                                                                                // Date column detection
+                                                                                if (columnName.includes('date') || columnName.includes('time') || columnName.includes('created_at') || columnName.includes('updated_at')) {
+                                                                                    return 'date';
+                                                                                }
+                                                                                // Boolean column detection - enhanced logic
+                                                                                if (columnName.includes('is_') || columnName.includes('has_') || columnName.includes('confirmed') || 
+                                                                                    columnName.includes('active') || columnName.includes('enabled') || columnName.includes('completed') ||
+                                                                                    columnName.includes('stage') || columnName.includes('final') || columnName.includes('flag') ||
+                                                                                    columnName.includes('approved') || columnName.includes('verified') || columnName.includes('sent') ||
+                                                                                    columnName.endsWith('?') || // Handle columns like "Confirmed?"
+                                                                                    (typeof value === 'number' && (value === 0 || value === 1)) ||
+                                                                                    (typeof value === 'string' && (value === '0' || value === '1'))) {
+                                                                                    return 'boolean';
+                                                                                }
+                                                                                return undefined; // Let formatCellContent auto-detect
+                                                                            })()
+                                                                        });
+                                                                        
+                                                                        return formattedValue;
+                                                                    })()}
+                                                                </td>
+                                                            ))}
+                                                        </tr>
+                                                    ));
+                                                })()}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    
+                                    {/* Pagination Controls */}
+                                    {previewData.length > 0 && (
+                                        <div className={styles.paginationContainer}>
+                                            <div className={styles.paginationInfo}>
+                                                {(() => {
+                                                    const startRecord = Math.min((currentPage - 1) * pageSize + 1, totalCount);
+                                                    const endRecord = Math.min(currentPage * pageSize, totalCount);
+                                                    return `Showing ${startRecord}-${endRecord} of ${totalCount} records`;
+                                                })()}
+                                            </div>
+                                            
+                                            <div className={styles.paginationControls}>
+                                                <div className={styles.pageSizeSelector}>
+                                                    <label>Show:</label>
+                                                    <select
+                                                        value={pageSize}
+                                                        onChange={(e) => {
+                                                            const newPageSize = parseInt(e.target.value);
+                                                            setPageSize(newPageSize);
+                                                            setCurrentPage(1); // Reset to first page
+                                                            // Re-execute the report with new page size
+                                                            if (previewData.length > 0) {
+                                                                executeReport();
+                                                            }
+                                                        }}
+                                                        className={styles.pageSizeSelect}
+                                                    >
+                                                        <option value={10}>10</option>
+                                                        <option value={25}>25</option>
+                                                        <option value={50}>50</option>
+                                                        <option value={100}>100</option>
+                                                        <option value={250}>250</option>
+                                                    </select>
+                                                    <span>records</span>
+                                                </div>
+                                                
+                                                <div className={styles.pageNavigation}>
+                                                    <button
+                                                        onClick={() => {
+                                                            if (currentPage > 1) {
+                                                                const newPage = currentPage - 1;
+                                                                setCurrentPage(newPage);
+                                                                executeReport();
+                                                            }
+                                                        }}
+                                                        disabled={currentPage <= 1}
+                                                        className={`${styles.pageBtn} ${currentPage <= 1 ? styles.disabled : ''}`}
+                                                    >
+                                                        ‹ Previous
+                                                    </button>
+                                                    
+                                                    <div className={styles.pageNumbers}>
+                                                        {(() => {
+                                                            const maxPagesToShow = 5;
+                                                            const totalPages = Math.ceil(totalCount / pageSize);
+                                                            let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+                                                            let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+                                                            
+                                                            // Adjust start if we're near the end
+                                                            if (endPage - startPage < maxPagesToShow - 1) {
+                                                                startPage = Math.max(1, endPage - maxPagesToShow + 1);
+                                                            }
+                                                            
+                                                            const pages = [];
+                                                            
+                                                            // Add first page and ellipsis if needed
+                                                            if (startPage > 1) {
+                                                                pages.push(
+                                                                    <button
+                                                                        key={1}
+                                                                        onClick={() => {
+                                                                            setCurrentPage(1);
+                                                                            executeReport();
+                                                                        }}
+                                                                        className={`${styles.pageBtn} ${1 === currentPage ? styles.active : ''}`}
+                                                                    >
+                                                                        1
+                                                                    </button>
+                                                                );
+                                                                if (startPage > 2) {
+                                                                    pages.push(<span key="start-ellipsis" className={styles.ellipsis}>...</span>);
+                                                                }
+                                                            }
+                                                            
+                                                            // Add visible page numbers
+                                                            for (let i = startPage; i <= endPage; i++) {
+                                                                pages.push(
+                                                                    <button
+                                                                        key={i}
+                                                                        onClick={() => {
+                                                                            setCurrentPage(i);
+                                                                            executeReport();
+                                                                        }}
+                                                                        className={`${styles.pageBtn} ${i === currentPage ? styles.active : ''}`}
+                                                                    >
+                                                                        {i}
+                                                                    </button>
+                                                                );
+                                                            }
+                                                            
+                                                            // Add ellipsis and last page if needed
+                                                            if (endPage < totalPages) {
+                                                                if (endPage < totalPages - 1) {
+                                                                    pages.push(<span key="end-ellipsis" className={styles.ellipsis}>...</span>);
+                                                                }
+                                                                pages.push(
+                                                                    <button
+                                                                        key={totalPages}
+                                                                        onClick={() => {
+                                                                            setCurrentPage(totalPages);
+                                                                            executeReport();
+                                                                        }}
+                                                                        className={`${styles.pageBtn} ${totalPages === currentPage ? styles.active : ''}`}
+                                                                    >
+                                                                        {totalPages}
+                                                                    </button>
+                                                                );
+                                                            }
+                                                            
+                                                            return pages;
+                                                        })()}
+                                                    </div>
+                                                    
+                                                    <button
+                                                        onClick={() => {
+                                                            const totalPages = Math.ceil(totalCount / pageSize);
+                                                            if (currentPage < totalPages) {
+                                                                const newPage = currentPage + 1;
+                                                                setCurrentPage(newPage);
+                                                                executeReport();
+                                                            }
+                                                        }}
+                                                        disabled={currentPage >= Math.ceil(totalCount / pageSize)}
+                                                        className={`${styles.pageBtn} ${currentPage >= Math.ceil(totalCount / pageSize) ? styles.disabled : ''}`}
+                                                    >
+                                                        Next ›
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
                         </div>
 
                         <div className={styles.reportActions}>
@@ -6390,69 +7580,32 @@ const GenericReportImproved = ({
                                 </div>
                             </div>
 
-                            <div className={styles.exportOptions}>
-                                <h3>Export Your Report</h3>
-                                <p>
-                                    Download your report data in various
-                                    formats.
-                                </p>
-                                <div className={styles.exportButtons}>
-                                    <button
-                                        className={`${styles.btn} ${styles.btnExportExcel}`}
-                                        onClick={() => exportReport('excel')}
-                                        disabled={
-                                            isLoading ||
-                                            !reportName ||
-                                            !reportName.trim()
-                                        }
-                                        title={
-                                            !reportName
-                                                ? 'Please save your report first'
-                                                : ''
-                                        }
-                                    >
-                                        <DownloadIcon size={16} />
-                                        Export as Excel
-                                    </button>
-                                    <button
-                                        className={`${styles.btn} ${styles.btnExportCsv}`}
-                                        onClick={() => exportReport('csv')}
-                                        disabled={
-                                            isLoading ||
-                                            !reportName ||
-                                            !reportName.trim()
-                                        }
-                                        title={
-                                            !reportName
-                                                ? 'Please save your report first'
-                                                : ''
-                                        }
-                                    >
-                                        <DownloadIcon size={16} />
-                                        Export as CSV
-                                    </button>
-                                    <button
-                                        className={`${styles.btn} ${styles.btnExportPdf}`}
-                                        onClick={() => exportReport('pdf')}
-                                        disabled={
-                                            isLoading ||
-                                            !reportName ||
-                                            !reportName.trim()
-                                        }
-                                        title={
-                                            !reportName
-                                                ? 'Please save your report first'
-                                                : ''
-                                        }
-                                    >
-                                        <DownloadIcon size={16} />
-                                        Export as PDF
-                                    </button>
-                                </div>
-                            </div>
                         </div>
                     </>
                 )}
+
+                {/* Show no data message when no results found */}
+                {!groupedData && previewData.length === 0 && !isLoading && selectedTable && selectedColumns.length > 0 && (
+                    <div className={styles.noDataContainer}>
+                        <div className={styles.noDataMessage}>
+                            <div className={styles.noDataIcon}>
+                                <Database size={48} />
+                            </div>
+                            <h3 className={styles.noDataTitle}>No Data Found</h3>
+                            <p className={styles.noDataText}>
+                                No records match the selected filters and criteria.
+                            </p>
+                            <div className={styles.noDataSuggestions}>
+                                <p><strong>Try:</strong></p>
+                                <ul>
+                                    <li>Adjusting or removing filters</li>
+                                    <li>Selecting a broader date range</li>
+                                    <li>Checking if data exists for the selected table</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                )}
             </div>
         );
     };