@visns-studio/visns-components 5.9.9 → 5.9.10

package/src/components/crm/generic/GenericReportImproved.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import moment from 'moment';
@@ -13,16 +13,15 @@ import {
     Info,
     CircleCheck,
     CirclePlus,
-    BookOpen,
     Data,
     File,
-    SettingsVertical,
     Person,
     Calendar,
     Map,
     Tag,
     Money,
     ShippingBoxV1,
+    SettingsVertical,
     Cart,
     Newspaper,
 } from 'akar-icons';
@@ -30,7 +29,6 @@ import CustomFetch from '../Fetch';
 import Download from '../Download';
 import { saveAs } from 'file-saver';
 import Swal from 'sweetalert2';
-import GenericReport from './GenericReport';
 import styles from './styles/GenericReportImproved.module.scss';
 import './styles/SweetAlert.module.css';
 
@@ -737,21 +735,12 @@ const wizardSteps = [
     },
 ];
 
-// Legacy template reports (no longer used in UI but kept for backward compatibility)
-const reportTemplates = [];
-
 const GenericReportImproved = ({ setting = {}, definition = null }) => {
     // Extract settings with defaults
     const { tableUrl, columnUrl } = setting;
 
-    // Ref for tooltip element
-    const tooltipRef = React.useRef(null);
-
     // UI State
-    const [beginnerMode, setBeginnerMode] = useState(true);
     const [currentWizardStep, setCurrentWizardStep] = useState(0);
-    const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
-    // Removed selectedTemplate state as we now use saved reports instead of templates
     const [showTemplates, setShowTemplates] = useState(true);
 
     // State for database schema
@@ -784,7 +773,6 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
 
     // State for saved reports
     const [savedReports, setSavedReports] = useState([]);
-    const [selectedReport, setSelectedReport] = useState(null);
     const [loadedReportId, setLoadedReportId] = useState(null); // Track loaded report for overwrite functionality
     const [isLoadingReports, setIsLoadingReports] = useState(false);
 
@@ -792,15 +780,10 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
     const [suggestedJoins, setSuggestedJoins] = useState({});
     const [isLoadingSuggestedJoins, setIsLoadingSuggestedJoins] = useState({});
 
-    // State for toggling visibility of sections
-    const [showSuggestedRelationships, setShowSuggestedRelationships] =
-        useState({});
-    const [showJoinTables, setShowJoinTables] = useState(false);
-    const [showSortingSection, setShowSortingSection] = useState(false);
-    const [showFilteringSection, setShowFilteringSection] = useState(false);
-
     // State for sorting and filtering
     const [sortCriteria, setSortCriteria] = useState([]);
+    const [showSortingSection, setShowSortingSection] = useState(false);
+    const [showFilteringSection, setShowFilteringSection] = useState(false);
 
     // Enhanced filter criteria with visual builder support
     const [filterCriteria, setFilterCriteria] = useState({
@@ -815,30 +798,18 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
 
     // State for report execution
     const [totalResults, setTotalResults] = useState(0);
-    const [executedSql, setExecutedSql] = useState('');
-    const [showSqlPreview, setShowSqlPreview] = useState(false);
 
     // State for report preview
     const [previewData, setPreviewData] = useState([]);
     const [gridColumns, setGridColumns] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    const [hasAutoExecuted, setHasAutoExecuted] = useState(false);
 
-    // State for pagination - now using local pagination
+    // 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 [totalPages, setTotalPages] = useState(0);
-    const [allData, setAllData] = useState([]); // Store all fetched data for local pagination
-
-    // State for JSON field keys
-    const [jsonFieldKeys, setJsonFieldKeys] = useState({});
-    const [loadingJsonKeys, setLoadingJsonKeys] = useState({});
-    const [showJsonKeySelector, setShowJsonKeySelector] = useState({});
-
-    // State for suggested filters
-    const [suggestedFilters, setSuggestedFilters] = useState([]);
-    const [isGeneratingSuggestions, setIsGeneratingSuggestions] =
-        useState(false);
-    const [showSuggestedFilters, setShowSuggestedFilters] = useState(false);
+    const [totalCount, setTotalCount] = useState(0); // Total records from server
 
     // State for showing hidden fields
     const [showHiddenFields, setShowHiddenFields] = useState(false);
@@ -850,7 +821,6 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         reportsUrl = '/ajax/reportBuilder/reports',
         executeUrl = '/ajax/reportBuilder/execute',
         suggestedJoinsUrl = '/ajax/reportBuilder/getSuggestedJoins',
-        jsonFieldKeysUrl = '/ajax/reportBuilder/getJsonFieldKeys',
         exportUrl = '/ajax/reportBuilder/export',
     } = setting;
 
@@ -862,21 +832,21 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                 <div style="text-align: left; font-size: 14px; color: #4b5563;">
                     <div style="margin-bottom: 20px;">
                         <h4 style="color: #1f2937; margin-bottom: 10px;">Choose Your Path:</h4>
-                        
+
                         <div style="background: #f0f9ff; border: 1px solid #3b82f6; border-radius: 8px; padding: 12px; margin-bottom: 12px;">
                             <h5 style="color: #1e40af; margin: 0 0 8px 0;">🚀 Quick Start (Recommended)</h5>
-                            <p style="margin: 0;">Use a pre-built template to get started immediately. Perfect for common reports like client lists or recent invoices.</p>
+                            <p style="margin: 0;">Use a saved report to get started immediately. Perfect for common reports like client lists or recent invoices.</p>
                         </div>
-                        
+
                         <div style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px;">
                             <h5 style="color: #374151; margin: 0 0 8px 0;">✨ Custom Report</h5>
                             <p style="margin: 0;">Build your own report from scratch with our step-by-step wizard. We'll guide you through each step!</p>
                         </div>
                     </div>
-                    
+
                     <div style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 12px;">
                         <p style="margin: 0; color: #92400e;">
-                            <strong>💡 Tip:</strong> You can switch between Beginner and Advanced mode at any time using the toggle in the top right.
+                            <strong>💡 Tip:</strong> Follow the wizard steps to create professional reports quickly and easily.
                         </p>
                     </div>
                 </div>
@@ -901,7 +871,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
 
         // Show help on first load
         const hasSeenHelp = localStorage.getItem('reportBuilder_hasSeenHelp');
-        if (!hasSeenHelp && beginnerMode) {
+        if (!hasSeenHelp) {
             setTimeout(() => {
                 showGuidedHelp();
                 localStorage.setItem('reportBuilder_hasSeenHelp', 'true');
@@ -920,7 +890,6 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
     // Auto-select common columns when user reaches the columns step
     useEffect(() => {
         if (
-            beginnerMode &&
             selectedColumns.length === 0 &&
             tableColumns.length > 0 &&
             currentWizardStep === 2 // Step 3 is index 2 (columns step)
@@ -958,7 +927,6 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
     }, [
         tableColumns,
         selectedColumns.length,
-        beginnerMode,
         selectedTable,
         currentWizardStep,
     ]);
@@ -966,22 +934,23 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
     // Auto-execute report when user reaches step 5 (preview step)
     useEffect(() => {
         if (
-            beginnerMode &&
             currentWizardStep === 4 && // Step 5 is index 4 (preview step)
             selectedTable &&
             selectedColumns.length > 0 &&
             previewData.length === 0 && // Only if no data loaded yet
-            !isLoading
+            !isLoading &&
+            !hasAutoExecuted // Prevent infinite loops
         ) {
+            setHasAutoExecuted(true);
             executeReport();
         }
     }, [
         currentWizardStep,
-        beginnerMode,
         selectedTable,
         selectedColumns.length,
         previewData.length,
         isLoading,
+        hasAutoExecuted,
     ]);
 
     // Delete saved report
@@ -1041,6 +1010,8 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             ],
         });
         setSortCriteria([]);
+        setShowSortingSection(false);
+        setShowFilteringSection(false);
         setPreviewData([]);
         setGridColumns([]);
         setReportName('');
@@ -1050,6 +1021,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         setShowTemplates(true);
         setTableColumns([]);
         setAvailableTables([]);
+        setHasAutoExecuted(false); // Reset auto-execute flag
 
         toast.info(
             'Report builder reset. You can start creating a new report.'
@@ -1459,14 +1431,36 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         if (!tableName || !columnUrl) return;
 
         try {
-            const result = await CustomFetch(
-                `${columnUrl}/${tableName}`,
-                'GET'
+            // Use the same API format as fetchTableColumns
+            const result = await CustomFetch(columnUrl, 'POST', {
+                table: tableName,
+            });
+
+            console.log(
+                `Manual join columns API response for ${tableName}:`,
+                result
             );
-            if (result.data?.success && result.data.data) {
+
+            if (result.error) {
+                console.error(`Error fetching ${type} columns:`, result.error);
+            } else {
+                // Handle the response format similar to fetchTableColumns
+                let columnsData = [];
+                if (result.data?.success && result.data.data) {
+                    columnsData = result.data.data;
+                } else if (Array.isArray(result.data)) {
+                    columnsData = result.data;
+                } else if (Array.isArray(result)) {
+                    columnsData = result;
+                }
+
+                console.log(
+                    `Loaded ${columnsData.length} columns for ${type} table ${tableName}`
+                );
+
                 setManualJoinColumns((prev) => ({
                     ...prev,
-                    [type]: result.data.data,
+                    [type]: columnsData,
                 }));
             }
         } catch (error) {
@@ -1521,9 +1515,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         fetchTableColumns(tableName);
         fetchSuggestedJoins(tableName);
 
-        if (beginnerMode) {
-            goToNextStep(); // Now goes to relationships step
-        }
+        goToNextStep(); // Go to relationships step
     };
 
     // Column selection handler
@@ -1551,13 +1543,101 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         }
     };
 
-    // Execute report with local pagination - fetch all data at once
+    // Create dataSource function for server-side pagination (similar to DataGrid)
+    const dataSource = useCallback(
+        async ({ skip, limit, sortInfo, filterValue }) => {
+            if (!selectedTable || selectedColumns.length === 0) {
+                return { data: [], count: 0 };
+            }
+
+            try {
+                const page = Math.floor(skip / limit) + 1;
+
+                // Use the same payload format as GenericReport (with query wrapper)
+                const queryConfig = {
+                    mainTable: selectedTable,
+                    columns: selectedColumns.map((col) => ({
+                        table: col.table,
+                        column: col.column,
+                        alias: col.alias || col.displayName,
+                    })),
+                    joins: joins.map((join) => ({
+                        joinType: join.joinType,
+                        targetTable: join.targetTable,
+                        sourceColumn: join.sourceColumn,
+                        targetColumn: join.targetColumn,
+                    })),
+                    filters: flattenFilterCriteria(filterCriteria),
+                    sorting: sortCriteria,
+                };
+
+                // Add sorting from DataGrid if provided
+                if (sortInfo) {
+                    queryConfig.sorting = [
+                        {
+                            column: sortInfo.name,
+                            direction: sortInfo.dir === 1 ? 'asc' : 'desc',
+                        },
+                    ];
+                }
+
+                const reportConfig = {
+                    query: queryConfig,
+                    limit: limit,
+                    offset: skip,
+                    page: page,
+                };
+
+                const result = await CustomFetch(
+                    executeUrl,
+                    'POST',
+                    reportConfig
+                );
+
+                if (result.error) {
+                    console.error('Report execution error:', result.error);
+                    return { data: [], count: 0 };
+                } else if (result.data?.success) {
+                    const fetchedData = result.data.data || [];
+                    const totalRecords =
+                        result.data.total || fetchedData.length;
+
+                    // Update total count and results for display
+                    setTotalCount(totalRecords);
+                    setTotalResults(totalRecords);
+
+                    console.info(
+                        'Fetched data:',
+                        fetchedData.length,
+                        'of',
+                        totalRecords
+                    );
+
+                    return { data: fetchedData, count: totalRecords };
+                } else {
+                    console.error('Unexpected response format:', result);
+                    return { data: [], count: 0 };
+                }
+            } catch (error) {
+                console.error('Error in dataSource:', error);
+                return { data: [], count: 0 };
+            }
+        },
+        [
+            selectedTable,
+            selectedColumns,
+            joins,
+            filterCriteria,
+            sortCriteria,
+            executeUrl,
+        ]
+    );
+
+    // Execute report function for manual execution (creates grid columns)
     const executeReport = async () => {
         if (!selectedTable || selectedColumns.length === 0) {
             toast.warning(
-                beginnerMode
-                    ? 'Please select at least one field to include in your report.'
-                    : 'Please select a table and at least one column.'
+                'Please select at least one field to include in your report.'
             );
             return;
         }
@@ -1565,147 +1645,41 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         setIsLoading(true);
 
         try {
-            // Use the same payload format as GenericReport (with query wrapper)
-            const queryConfig = {
-                mainTable: selectedTable,
-                columns: selectedColumns.map((col) => ({
-                    table: col.table,
-                    column: col.column,
-                    alias: col.alias || col.displayName,
-                })),
-                joins: joins.map((join) => ({
-                    joinType: join.joinType,
-                    targetTable: join.targetTable,
-                    sourceColumn: join.sourceColumn,
-                    targetColumn: join.targetColumn,
-                })),
-                filters: flattenFilterCriteria(filterCriteria),
-                sorting: sortCriteria,
-            };
-
-            const reportConfig = {
-                query: queryConfig,
-                limit: 1000, // Fetch up to 1000 records for local pagination
-                offset: 0, // Always start from beginning
-            };
-
-            const result = await CustomFetch(executeUrl, 'POST', reportConfig);
-
-            if (result.error) {
-                toast.error(result.error);
-            } else if (result.data?.success) {
-                // Store all fetched data for local pagination
-                const allFetchedData = result.data.data || [];
-                setAllData(allFetchedData);
-                console.info('Fetched data:', allFetchedData.length);
-
-                setTotalResults(allFetchedData.length);
-                setExecutedSql(result.data.sql || '');
-
-                // Calculate total pages for local pagination
-                const calculatedTotalPages = Math.ceil(
-                    allFetchedData.length / pageSize
-                );
-
-                setTotalPages(calculatedTotalPages);
-                console.info('Total pages:', calculatedTotalPages);
-
-                setCurrentPage(1); // Reset to first page
+            // Fetch first page to get data structure for grid columns
+            const firstPageResult = await dataSource({
+                skip: 0,
+                limit: pageSize,
+                sortInfo: null,
+                filterValue: null,
+            });
 
-                // Set initial page data (first page)
-                const startIndex = 0;
-                const endIndex = Math.min(pageSize, allFetchedData.length);
-                setPreviewData(allFetchedData.slice(startIndex, endIndex));
+            if (firstPageResult.data && firstPageResult.data.length > 0) {
+                setPreviewData(firstPageResult.data);
 
                 // Create grid columns dynamically from actual data with smart formatting
-                if (result.data.data && result.data.data.length > 0) {
-                    const firstRow = result.data.data[0];
-                    const dynamicColumns = Object.keys(firstRow).map((key) => {
-                        // Find the column metadata from selected columns to get type information
-                        const columnMetadata = selectedColumns.find((col) => {
-                            // Handle both direct column names and aliased names
-                            return (
-                                col.column === key ||
-                                col.displayName === key ||
-                                key.includes(col.column) ||
-                                col.column.includes(key)
-                            );
-                        });
-
-                        // Check if any value in this column is JSON
-                        const hasJsonValues = result.data.data.some((row) => {
-                            return isJsonValue(row[key]);
-                        });
-
-                        // Try to find column type from table columns
-                        let columnType = 'varchar'; // default
-                        if (columnMetadata) {
-                            const tableColumn = tableColumns.find(
-                                (tc) => tc.name === columnMetadata.column
-                            );
-                            if (tableColumn) {
-                                columnType = tableColumn.type;
-                            } else {
-                                // Check in joined table columns
-                                joins.forEach((join) => {
-                                    if (join.availableColumns) {
-                                        const joinedColumn =
-                                            join.availableColumns.find(
-                                                (jc) =>
-                                                    jc.name ===
-                                                    columnMetadata.column
-                                            );
-                                        if (joinedColumn) {
-                                            columnType = joinedColumn.type;
-                                        }
-                                    }
-                                });
-                            }
-                        }
-
-                        return {
-                            name: key,
-                            header: formatName(key), // Use formatted name as header
-                            defaultFlex: 1,
-                            minWidth: hasJsonValues ? 250 : 100, // Wider columns for JSON data
-                            maxWidth: hasJsonValues ? 400 : undefined, // Max width for JSON columns
-                            render: ({ value }) => {
-                                // Use smart formatting for the cell value
-                                const formattedValue = formatSmartValue(
-                                    value,
-                                    key,
-                                    columnType
-                                );
-
-                                // For JSON content, wrap in a container that allows full height expansion
-                                if (isJsonValue(value)) {
-                                    return (
-                                        <div
-                                            style={{
-                                                whiteSpace: 'normal',
-                                                wordWrap: 'break-word',
-                                                lineHeight: '1.4',
-                                                padding: '4px 0',
-                                                width: '100%',
-                                            }}
-                                        >
-                                            {formattedValue}
-                                        </div>
-                                    );
-                                }
+                const firstRow = firstPageResult.data[0];
+                const dynamicColumns = Object.keys(firstRow).map((key) => {
+                    // Find the column metadata from selected columns to get type information
+                    const columnMetadata = selectedColumns.find((col) => {
+                        // Handle both direct column names and aliased names
+                        return (
+                            col.column === key ||
+                            col.displayName === key ||
+                            key.includes(col.column) ||
+                            col.column.includes(key)
+                        );
+                    });
 
-                                return formattedValue;
-                            },
-                        };
+                    // Check if any value in this column is JSON
+                    const hasJsonValues = firstPageResult.data.some((row) => {
+                        return isJsonValue(row[key]);
                     });
-                    setGridColumns(dynamicColumns);
-                } else {
-                    // Fallback to selected columns if no data
-                    const columns = selectedColumns.map((col) => {
-                        // Find column type from table columns
-                        let columnType = 'varchar';
+
+                    // Try to find column type from table columns with improved detection
+                    let columnType = 'varchar'; // default
+                    if (columnMetadata) {
                         const tableColumn = tableColumns.find(
-                            (tc) => tc.name === col.column
+                            (tc) => tc.name === columnMetadata.column
                         );
                         if (tableColumn) {
                             columnType = tableColumn.type;
@@ -1715,7 +1689,9 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                 if (join.availableColumns) {
                                     const joinedColumn =
                                         join.availableColumns.find(
-                                            (jc) => jc.name === col.column
+                                            (jc) =>
+                                                jc.name ===
+                                                columnMetadata.column
                                         );
                                     if (joinedColumn) {
                                         columnType = joinedColumn.type;
@@ -1723,67 +1699,154 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                 }
                             });
                         }
+                    }
 
-                        return {
-                            name: col.displayName || formatName(col.column),
-                            header: col.displayName || formatName(col.column),
-                            defaultFlex: 1,
-                            minWidth: 100,
-                            render: ({ value }) => {
-                                const formattedValue = formatSmartValue(
-                                    value,
-                                    col.column,
-                                    columnType
+                    // Enhanced column type detection for status fields
+                    if (!columnMetadata || columnType === 'varchar') {
+                        // Check if this looks like a status field based on column name
+                        const lowerKey = key.toLowerCase();
+                        if (
+                            lowerKey.includes('status') ||
+                            lowerKey.includes('active') ||
+                            lowerKey.includes('enabled') ||
+                            lowerKey.includes('disabled')
+                        ) {
+                            // Check if values look like boolean/status values
+                            const sampleValues = firstPageResult.data
+                                .slice(0, 5)
+                                .map((row) => row[key]);
+                            const hasStatusValues = sampleValues.some(
+                                (val) =>
+                                    val === 0 ||
+                                    val === 1 ||
+                                    val === '0' ||
+                                    val === '1' ||
+                                    val === true ||
+                                    val === false ||
+                                    val === 'true' ||
+                                    val === 'false'
+                            );
+                            if (hasStatusValues) {
+                                columnType = 'tinyint'; // This will trigger status formatting
+                            }
+                        }
+                    }
+
+                    return {
+                        name: key,
+                        header: formatName(key), // Use formatted name as header
+                        defaultFlex: 1,
+                        minWidth: hasJsonValues ? 250 : 100, // Wider columns for JSON data
+                        maxWidth: hasJsonValues ? 400 : undefined, // Max width for JSON columns
+                        render: ({ value }) => {
+                            // Use smart formatting for the cell value
+                            const formattedValue = formatSmartValue(
+                                value,
+                                key,
+                                columnType
+                            );
+
+                            // For JSON content, wrap in a container that allows full height expansion
+                            if (isJsonValue(value)) {
+                                return (
+                                    <div
+                                        style={{
+                                            whiteSpace: 'normal',
+                                            wordWrap: 'break-word',
+                                            lineHeight: '1.4',
+                                            padding: '4px 0',
+                                            width: '100%',
+                                        }}
+                                    >
+                                        {formattedValue}
+                                    </div>
                                 );
+                            }
 
-                                // For JSON content, wrap in a container that allows full height expansion
-                                if (isJsonValue(value)) {
-                                    return (
-                                        <div
-                                            style={{
-                                                whiteSpace: 'normal',
-                                                wordWrap: 'break-word',
-                                                lineHeight: '1.4',
-                                                padding: '4px 0',
-                                                width: '100%',
-                                            }}
-                                        >
-                                            {formattedValue}
-                                        </div>
-                                    );
+                            return formattedValue;
+                        },
+                    };
+                });
+                setGridColumns(dynamicColumns);
+            } else {
+                // Fallback to selected columns if no data
+                const columns = selectedColumns.map((col) => {
+                    // Find column type from table columns with enhanced detection
+                    let columnType = 'varchar';
+                    const tableColumn = tableColumns.find(
+                        (tc) => tc.name === col.column
+                    );
+                    if (tableColumn) {
+                        columnType = tableColumn.type;
+                    } else {
+                        // Check in joined table columns
+                        joins.forEach((join) => {
+                            if (join.availableColumns) {
+                                const joinedColumn = join.availableColumns.find(
+                                    (jc) => jc.name === col.column
+                                );
+                                if (joinedColumn) {
+                                    columnType = joinedColumn.type;
                                 }
+                            }
+                        });
+                    }
 
-                                return formattedValue;
-                            },
-                        };
-                    });
-                    setGridColumns(columns);
-                }
+                    // Enhanced column type detection for status fields
+                    if (columnType === 'varchar') {
+                        const lowerColumn = col.column.toLowerCase();
+                        if (
+                            lowerColumn.includes('status') ||
+                            lowerColumn.includes('active') ||
+                            lowerColumn.includes('enabled') ||
+                            lowerColumn.includes('disabled')
+                        ) {
+                            columnType = 'tinyint'; // This will trigger status formatting
+                        }
+                    }
 
-                if (
-                    beginnerMode &&
-                    currentWizardStep < wizardSteps.length - 1
-                ) {
-                    setCurrentWizardStep(wizardSteps.length - 1);
-                }
+                    return {
+                        name: col.displayName || formatName(col.column),
+                        header: col.displayName || formatName(col.column),
+                        defaultFlex: 1,
+                        minWidth: 100,
+                        render: ({ value }) => {
+                            const formattedValue = formatSmartValue(
+                                value,
+                                col.column,
+                                columnType
+                            );
+
+                            // For JSON content, wrap in a container that allows full height expansion
+                            if (isJsonValue(value)) {
+                                return (
+                                    <div
+                                        style={{
+                                            whiteSpace: 'normal',
+                                            wordWrap: 'break-word',
+                                            lineHeight: '1.4',
+                                            padding: '4px 0',
+                                            width: '100%',
+                                        }}
+                                    >
+                                        {formattedValue}
+                                    </div>
+                                );
+                            }
 
-                // Show success message with total records found
-                toast.success(`Found ${allFetchedData.length} records`);
+                            return formattedValue;
+                        },
+                    };
+                });
+                setGridColumns(columns);
+            }
 
-                // Show warning if we hit the 1000 record limit
-                if (allFetchedData.length === 1000) {
-                    toast.warning(
-                        'Showing first 1000 records. Consider adding filters to narrow your results.'
-                    );
-                }
-            } else {
-                toast.error(
-                    'Failed to execute report: ' +
-                        (result.data?.message ||
-                            result.message ||
-                            'Unknown error')
-                );
+            if (currentWizardStep < wizardSteps.length - 1) {
+                setCurrentWizardStep(wizardSteps.length - 1);
             }
+
+            // Show success message with total records found
+            toast.success(`Found ${firstPageResult.count} records`);
         } catch (error) {
             toast.error('Failed to execute report');
             console.error('Error executing report:', error);
@@ -1792,60 +1855,22 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         }
     };
 
-    // Local pagination handlers
-    const handlePageChange = (newPage) => {
-        if (
-            newPage >= 1 &&
-            newPage <= totalPages &&
-            newPage !== currentPage &&
-            allData.length > 0
-        ) {
-            setCurrentPage(newPage);
-
-            // Calculate slice indices for local pagination
-            const startIndex = (newPage - 1) * pageSize;
-            const endIndex = Math.min(startIndex + pageSize, allData.length);
-            setPreviewData(allData.slice(startIndex, endIndex));
-        }
-    };
-
-    const handlePageSizeChange = (newPageSize) => {
-        if (newPageSize !== pageSize && allData.length > 0) {
-            setPageSize(newPageSize);
-            setCurrentPage(1); // Reset to first page
-
-            // Recalculate total pages with new page size
-            const calculatedTotalPages = Math.ceil(
-                allData.length / newPageSize
-            );
-            setTotalPages(calculatedTotalPages);
-
-            // Update preview data for first page with new page size
-            const endIndex = Math.min(newPageSize, allData.length);
-            setPreviewData(allData.slice(0, endIndex));
-        }
-    };
-
     // Reset pagination when starting a new report
     const resetPagination = () => {
         setCurrentPage(1);
         setTotalPages(0);
         setPreviewData([]);
         setTotalResults(0);
-        setAllData([]);
+        setTotalCount(0);
     };
 
-    // Render the appropriate content based on mode
+    // Render the appropriate content
     const renderContent = () => {
-        if (beginnerMode && showTemplates) {
+        if (showTemplates) {
             return renderTemplateSelection();
         }
 
-        if (beginnerMode) {
-            return renderWizardMode();
-        }
-
-        return renderAdvancedMode();
+        return renderWizardMode();
     };
 
     // Load saved report configuration
@@ -1869,13 +1894,16 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
 
             if (config.joins) {
                 setJoins(config.joins);
-                config.joins.forEach((join) => {
+                // Fetch columns for each joined table
+                config.joins.forEach((join, index) => {
                     if (!availableTables.includes(join.targetTable)) {
                         setAvailableTables((prev) => [
                             ...prev,
                             join.targetTable,
                         ]);
                     }
+                    // Fetch columns for the joined table to populate availableColumns
+                    fetchJoinColumns(join.targetTable, index);
                 });
             }
 
@@ -1885,13 +1913,18 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
 
             if (config.sorting) {
                 setSortCriteria(config.sorting);
+                // Show sorting section if there are sort criteria
+                if (config.sorting.length > 0) {
+                    setShowSortingSection(true);
+                }
             }
 
             setReportName(report.label);
             setIsPublic(report.is_public || false);
             setLoadedReportId(report.id); // Track the loaded report ID for overwrite functionality
             setShowTemplates(false);
-            setCurrentWizardStep(2); // Start from columns step since table and relationships are already selected
+            // Set to the preview step (index 4) since the report is already configured
+            setCurrentWizardStep(4);
 
             toast.success(`Loaded report: ${report.label}`);
         } catch (error) {
@@ -2142,13 +2175,21 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
 
                     {/* Navigation buttons */}
                     <div className={styles.wizardNavigation}>
-                        <button
-                            className={`${styles.btn} ${styles.btnSecondary}`}
-                            onClick={goToPreviousStep}
-                            disabled={currentWizardStep === 0}
-                        >
-                            Previous
-                        </button>
+                        {currentWizardStep === 0 ? (
+                            <button
+                                className={`${styles.btn} ${styles.btnSecondary}`}
+                                onClick={startAgain}
+                            >
+                                Cancel
+                            </button>
+                        ) : (
+                            <button
+                                className={`${styles.btn} ${styles.btnSecondary}`}
+                                onClick={goToPreviousStep}
+                            >
+                                Previous
+                            </button>
+                        )}
 
                         {currentWizardStep === wizardSteps.length - 1 ? (
                             <button
@@ -2879,19 +2920,20 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                         }
                                     >
                                         <option value="">Select Table</option>
-                                        {availableTables
+                                        {/* Use all tables, not just availableTables */}
+                                        {tables
                                             .filter(
                                                 (table) =>
-                                                    table !==
+                                                    table.name !==
                                                     manualJoin.sourceTable
                                             )
                                             .map((table) => (
                                                 <option
-                                                    key={table}
-                                                    value={table}
+                                                    key={table.name}
+                                                    value={table.name}
                                                 >
                                                     {getTableDisplayName(
-                                                        table,
+                                                        table.name,
                                                         definition
                                                     )}
                                                 </option>
@@ -3306,14 +3348,299 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
 
         return (
             <div className={styles.filtersSection}>
+                {/* Sorting Section */}
+                <div className={styles.reportSection}>
+                    <div
+                        className={styles.sectionHeader}
+                        title={
+                            showSortingSection
+                                ? 'Hide sorting options'
+                                : 'Show sorting options'
+                        }
+                    >
+                        <h3
+                            onClick={() =>
+                                setShowSortingSection(!showSortingSection)
+                            }
+                            style={{ cursor: 'pointer' }}
+                        >
+                            Sorting
+                        </h3>
+                        <div className={styles.sectionHeaderActions}>
+                            <button
+                                className={styles.btn}
+                                onClick={handleAddSortCriterion}
+                                disabled={selectedColumns.length === 0}
+                            >
+                                Add Sort Criterion
+                            </button>
+                            <div
+                                className={`${styles.toggleBtn} ${
+                                    showSortingSection
+                                        ? styles.toggleBtnActive
+                                        : ''
+                                }`}
+                                onClick={() =>
+                                    setShowSortingSection(!showSortingSection)
+                                }
+                                style={{ cursor: 'pointer' }}
+                            >
+                                {showSortingSection ? '▲' : '▼'}
+                            </div>
+                        </div>
+                    </div>
+
+                    {showSortingSection && (
+                        <>
+                            {sortCriteria.length > 0 && (
+                                <div className={styles.filterGroup}>
+                                    <div className={styles.joinTablesContainer}>
+                                        {sortCriteria.map(
+                                            (criterion, index) => (
+                                                <div
+                                                    key={index}
+                                                    className={
+                                                        styles.joinSection
+                                                    }
+                                                    data-sort-index={index + 1}
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.joinHeader
+                                                        }
+                                                    >
+                                                        <h4
+                                                            data-sort-index={
+                                                                index + 1
+                                                            }
+                                                        >
+                                                            by{' '}
+                                                            {criterion.table &&
+                                                            criterion.column
+                                                                ? `${formatName(
+                                                                      criterion.table
+                                                                  )}.${formatName(
+                                                                      criterion.column
+                                                                  )}`
+                                                                : `Criterion #${
+                                                                      index + 1
+                                                                  }`}
+                                                        </h4>
+                                                        <button
+                                                            className={
+                                                                styles.removeJoinBtn
+                                                            }
+                                                            onClick={() =>
+                                                                handleRemoveSortCriterion(
+                                                                    index
+                                                                )
+                                                            }
+                                                            title="Remove Sort Criterion"
+                                                        >
+                                                            ×
+                                                        </button>
+                                                    </div>
+
+                                                    <div
+                                                        className={
+                                                            styles.joinGrid
+                                                        }
+                                                    >
+                                                        <div
+                                                            className={
+                                                                styles.joinGridColumn
+                                                            }
+                                                        >
+                                                            <div
+                                                                className={
+                                                                    styles.joinField
+                                                                }
+                                                            >
+                                                                <label>
+                                                                    Column:
+                                                                </label>
+                                                                <select
+                                                                    className={
+                                                                        styles.selectControl
+                                                                    }
+                                                                    value={
+                                                                        criterion.table &&
+                                                                        criterion.column
+                                                                            ? `${criterion.table}.${criterion.column}`
+                                                                            : ''
+                                                                    }
+                                                                    onChange={(
+                                                                        e
+                                                                    ) => {
+                                                                        if (
+                                                                            e
+                                                                                .target
+                                                                                .value
+                                                                        ) {
+                                                                            const dotIndex =
+                                                                                e.target.value.indexOf(
+                                                                                    '.'
+                                                                                );
+                                                                            if (
+                                                                                dotIndex !==
+                                                                                -1
+                                                                            ) {
+                                                                                const table =
+                                                                                    e.target.value.substring(
+                                                                                        0,
+                                                                                        dotIndex
+                                                                                    );
+                                                                                const column =
+                                                                                    e.target.value.substring(
+                                                                                        dotIndex +
+                                                                                            1
+                                                                                    );
+
+                                                                                handleSortCriterionChange(
+                                                                                    index,
+                                                                                    'column',
+                                                                                    ''
+                                                                                );
+                                                                                handleSortCriterionChange(
+                                                                                    index,
+                                                                                    'table',
+                                                                                    table
+                                                                                );
+                                                                                handleSortCriterionChange(
+                                                                                    index,
+                                                                                    'column',
+                                                                                    column
+                                                                                );
+                                                                            }
+                                                                        }
+                                                                    }}
+                                                                >
+                                                                    <option value="">
+                                                                        Select
+                                                                        Column
+                                                                    </option>
+                                                                    {/* Main table columns */}
+                                                                    <optgroup
+                                                                        label={`${formatName(
+                                                                            selectedTable
+                                                                        )} Columns`}
+                                                                    >
+                                                                        {tableColumns.map(
+                                                                            (
+                                                                                column
+                                                                            ) => (
+                                                                                <option
+                                                                                    key={`${selectedTable}.${column.name}`}
+                                                                                    value={`${selectedTable}.${column.name}`}
+                                                                                >
+                                                                                    {formatName(
+                                                                                        column.name
+                                                                                    )}
+                                                                                </option>
+                                                                            )
+                                                                        )}
+                                                                    </optgroup>
+
+                                                                    {/* Joined tables columns */}
+                                                                    {joins.map(
+                                                                        (
+                                                                            join,
+                                                                            joinIndex
+                                                                        ) =>
+                                                                            join.targetTable &&
+                                                                            join.availableColumns &&
+                                                                            join
+                                                                                .availableColumns
+                                                                                .length >
+                                                                                0 ? (
+                                                                                <optgroup
+                                                                                    key={`join-${joinIndex}`}
+                                                                                    label={`${formatName(
+                                                                                        join.targetTable
+                                                                                    )} Columns`}
+                                                                                >
+                                                                                    {join.availableColumns.map(
+                                                                                        (
+                                                                                            column
+                                                                                        ) => (
+                                                                                            <option
+                                                                                                key={`${join.targetTable}.${column.name}`}
+                                                                                                value={`${join.targetTable}.${column.name}`}
+                                                                                            >
+                                                                                                {formatName(
+                                                                                                    column.name
+                                                                                                )}
+                                                                                            </option>
+                                                                                        )
+                                                                                    )}
+                                                                                </optgroup>
+                                                                            ) : null
+                                                                    )}
+                                                                </select>
+                                                            </div>
+                                                        </div>
+
+                                                        <div
+                                                            className={
+                                                                styles.joinGridColumn
+                                                            }
+                                                        >
+                                                            <div
+                                                                className={
+                                                                    styles.joinField
+                                                                }
+                                                            >
+                                                                <label>
+                                                                    Direction:
+                                                                </label>
+                                                                <select
+                                                                    className={
+                                                                        styles.selectControl
+                                                                    }
+                                                                    value={
+                                                                        criterion.direction
+                                                                    }
+                                                                    onChange={(
+                                                                        e
+                                                                    ) =>
+                                                                        handleSortCriterionChange(
+                                                                            index,
+                                                                            'direction',
+                                                                            e
+                                                                                .target
+                                                                                .value
+                                                                        )
+                                                                    }
+                                                                >
+                                                                    <option value="ASC">
+                                                                        Ascending
+                                                                    </option>
+                                                                    <option value="DESC">
+                                                                        Descending
+                                                                    </option>
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            )
+                                        )}
+                                    </div>
+                                </div>
+                            )}
+                        </>
+                    )}
+                </div>
+
+                {/* Filtering Section */}
                 <div className={styles.helpBox}>
                     <Info size={20} />
                     <div>
-                        <h4>Advanced Filter Builder</h4>
+                        <h4>Filter Builder</h4>
                         <p>
-                            Create sophisticated filters with multiple groups
-                            and logical operators. Use filter groups to create
-                            complex conditions like "(A AND B) OR (C AND D)".
+                            Create filters to narrow down your results. Use
+                            filter groups to create complex conditions like "(A
+                            AND B) OR (C AND D)".
                         </p>
                     </div>
                 </div>
@@ -3685,6 +4012,48 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         );
     };
 
+    // Sorting functions (from original GenericReport)
+    // Add a new sort criterion
+    const handleAddSortCriterion = () => {
+        // Default to the first selected column if available
+        const defaultColumn =
+            selectedColumns.length > 0
+                ? {
+                      table: selectedColumns[0].table,
+                      column: selectedColumns[0].column,
+                      displayName: selectedColumns[0].displayName,
+                  }
+                : null;
+
+        const newSortCriterion = {
+            table: defaultColumn?.table || '',
+            column: defaultColumn?.column || '',
+            direction: 'ASC',
+        };
+
+        setSortCriteria([...sortCriteria, newSortCriterion]);
+        setShowSortingSection(true);
+    };
+
+    // Update a sort criterion
+    const handleSortCriterionChange = (index, field, value) => {
+        const updatedSortCriteria = [...sortCriteria];
+        updatedSortCriteria[index][field] = value;
+        setSortCriteria(updatedSortCriteria);
+    };
+
+    // Remove a sort criterion
+    const handleRemoveSortCriterion = (index) => {
+        const updatedSortCriteria = [...sortCriteria];
+        updatedSortCriteria.splice(index, 1);
+        setSortCriteria(updatedSortCriteria);
+
+        // Hide the section if no sort criteria remain
+        if (updatedSortCriteria.length === 0) {
+            setShowSortingSection(false);
+        }
+    };
+
     // Export report in different formats (replicating GenericReport pattern)
     const exportReport = async (format) => {
         if (!selectedTable || selectedColumns.length === 0) {
@@ -3882,6 +4251,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                         className={`${styles.btn} ${styles.btnPrimary}`}
                         onClick={() => {
                             resetPagination();
+                            setHasAutoExecuted(false); // Reset flag for manual execution
                             executeReport();
                         }}
                         disabled={isLoading}
@@ -3895,19 +4265,12 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                         <div className={styles.gridContainer}>
                             <ReactDataGrid
                                 columns={gridColumns}
-                                dataSource={previewData}
+                                dataSource={dataSource}
                                 style={{ height: 800 }}
-                                pagination="local"
+                                pagination
                                 limit={pageSize}
-                                skip={(currentPage - 1) * pageSize}
-                                count={totalResults}
                                 onLimitChange={(newLimit) => {
-                                    handlePageSizeChange(newLimit);
-                                }}
-                                onSkipChange={(newSkip) => {
-                                    const newPage =
-                                        Math.floor(newSkip / pageSize) + 1;
-                                    handlePageChange(newPage);
+                                    setPageSize(newLimit);
                                 }}
                                 pageSizes={[10, 15, 25, 50]}
                                 defaultLimit={25}
@@ -3936,6 +4299,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                     <button
                                         className={`${styles.btn} ${styles.btnSuccess}`}
                                         onClick={() => saveReport(false)}
+                                        style={{ marginRight: '10px' }}
                                     >
                                         <Save size={16} />
                                         {loadedReportId
@@ -4021,15 +4385,6 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         );
     };
 
-    // Render advanced mode (using original GenericReport)
-    const renderAdvancedMode = () => {
-        return (
-            <div className={styles.advancedMode}>
-                <GenericReport setting={setting} definition={definition} />
-            </div>
-        );
-    };
-
     return (
         <div className={styles.reportBuilder}>
             {/* Header */}
@@ -4044,29 +4399,6 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                         Help
                     </button>
                 </div>
-
-                <div className={styles.headerRight}>
-                    <div className={styles.modeToggle}>
-                        <span className={beginnerMode ? styles.active : ''}>
-                            <BookOpen size={16} />
-                            Beginner
-                        </span>
-                        <label className={styles.switch}>
-                            <input
-                                type="checkbox"
-                                checked={!beginnerMode}
-                                onChange={(e) =>
-                                    setBeginnerMode(!e.target.checked)
-                                }
-                            />
-                            <span className={styles.slider}></span>
-                        </label>
-                        <span className={!beginnerMode ? styles.active : ''}>
-                            <SettingsVertical size={16} />
-                            Advanced
-                        </span>
-                    </div>
-                </div>
             </div>
 
             {/* Main content */}