@visns-studio/visns-components 5.9.7 → 5.9.9

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

@@ -0,0 +1,4083 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { toast } from 'react-toastify';
+import moment from 'moment';
+import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
+import {
+    Question,
+    LinkChain,
+    Filter,
+    Download as DownloadIcon,
+    Save,
+    EyeOpen,
+    Info,
+    CircleCheck,
+    CirclePlus,
+    BookOpen,
+    Data,
+    File,
+    SettingsVertical,
+    Person,
+    Calendar,
+    Map,
+    Tag,
+    Money,
+    ShippingBoxV1,
+    Cart,
+    Newspaper,
+} from 'akar-icons';
+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';
+
+// Icon mapping for common table types
+const tableIcons = {
+    // People/User related
+    clients: Person,
+    users: Person,
+    contacts: Person,
+    employees: Person,
+    customers: Person,
+    staff: Person,
+
+    // Product/Service related
+    products: ShippingBoxV1,
+    services: Newspaper,
+    items: ShippingBoxV1,
+    inventory: ShippingBoxV1,
+
+    // Financial
+    invoices: Money,
+    payments: Money,
+    orders: Cart,
+    transactions: Money,
+    quotes: File,
+
+    // Location
+    sites: Map,
+    locations: Map,
+    addresses: Map,
+
+    // Time
+    appointments: Calendar,
+    events: Calendar,
+    schedules: Calendar,
+
+    // Other
+    categories: Tag,
+    tags: Tag,
+    notes: File,
+    documents: File,
+    settings: SettingsVertical,
+
+    // Default
+    default: Data,
+};
+
+// Get icon for a table name
+const getTableIcon = (tableName) => {
+    const lowerName = tableName.toLowerCase();
+
+    // Check for exact matches first
+    if (tableIcons[lowerName]) {
+        return tableIcons[lowerName];
+    }
+
+    // Check for partial matches
+    for (const [key, icon] of Object.entries(tableIcons)) {
+        if (lowerName.includes(key) || key.includes(lowerName)) {
+            return icon;
+        }
+    }
+
+    return tableIcons.default;
+};
+
+// Get table display name using definition or formatted name
+const getTableDisplayName = (tableName, definition) => {
+    if (definition && definition.tables) {
+        const tableDefinition = definition.tables.find(
+            (t) => t.id === tableName
+        );
+        if (tableDefinition) {
+            return tableDefinition.label;
+        }
+    }
+    return formatName(tableName);
+};
+
+// Get table description from definition
+const getTableDescription = (tableName, definition) => {
+    if (definition && definition.tables) {
+        const tableDefinition = definition.tables.find(
+            (t) => t.id === tableName
+        );
+        if (tableDefinition && tableDefinition.description) {
+            return tableDefinition.description;
+        }
+    }
+    return `Table: ${tableName}`;
+};
+
+// Utility function to format names from camelCase or snake_case to user-friendly format
+const formatName = (name) => {
+    if (!name) return '';
+
+    // Replace underscores and hyphens with spaces
+    let formatted = name.replace(/[_-]/g, ' ');
+
+    // Insert space before capital letters (for camelCase)
+    formatted = formatted.replace(/([A-Z])/g, ' $1');
+
+    // Trim extra spaces, capitalize first letter of each word
+    return formatted
+        .trim()
+        .split(' ')
+        .map(
+            (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+        )
+        .join(' ');
+};
+
+// User-friendly terminology mapping
+const friendlyTerms = {
+    // Database terms
+    join: 'Connect Related Data',
+    joined: 'Connected',
+    relationship: 'Connection',
+    relationships: 'Connections',
+    'foreign key': 'LinkChain',
+    'primary key': 'Unique ID',
+    operators: 'How to Compare',
+    'execute query': 'Preview Report',
+    sql: 'Database Query',
+
+    // Actions
+    execute: 'Preview',
+    query: 'Report',
+
+    // Field types
+    varchar: 'Text',
+    int: 'Number',
+    datetime: 'Date & Time',
+    boolean: 'Yes/No',
+    text: 'Long Text',
+    decimal: 'Decimal Number',
+
+    // Operators
+    '=': 'is exactly',
+    '!=': 'is not',
+    LIKE: 'contains',
+    'NOT LIKE': 'does not contain',
+    '>': 'is greater than',
+    '<': 'is less than',
+    '>=': 'is at least',
+    '<=': 'is at most',
+    'IS NULL': 'is empty',
+    'IS NOT NULL': 'has a value',
+};
+
+// Get user-friendly term
+const getFriendlyTerm = (term) => {
+    if (!term) return '';
+    const lower = term.toLowerCase();
+    return friendlyTerms[lower] || friendlyTerms[term] || term;
+};
+
+// Format JSON key to be more human-readable (from original GenericReport)
+const formatJsonKey = (key) => {
+    if (!key) return key;
+
+    // Convert snake_case to Title Case
+    return key
+        .split('_')
+        .map(
+            (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+        )
+        .join(' ');
+};
+
+// Check if a value is JSON (from original GenericReport)
+const isJsonValue = (value) => {
+    if (!value) return false;
+
+    // Check if it's a string that looks like JSON
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        return (
+            (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+            (trimmed.startsWith('[') && trimmed.endsWith(']'))
+        );
+    }
+
+    // Check if it's already an object (parsed JSON)
+    return typeof value === 'object' && value !== null;
+};
+
+// Transform JSON object to have human-readable keys (from original GenericReport)
+const transformJsonForDisplay = (json) => {
+    if (!json || typeof json !== 'object') return json;
+
+    // For arrays, transform each item
+    if (Array.isArray(json)) {
+        return json.map((item) => transformJsonForDisplay(item));
+    }
+
+    // For objects, transform keys
+    const result = {};
+
+    for (const key in json) {
+        if (Object.prototype.hasOwnProperty.call(json, key)) {
+            const value = json[key];
+            const formattedKey = formatJsonKey(key);
+
+            // Recursively transform nested objects
+            result[formattedKey] =
+                typeof value === 'object' && value !== null
+                    ? transformJsonForDisplay(value)
+                    : value;
+        }
+    }
+
+    return result;
+};
+
+// Render JSON data in a human-friendly format (from original GenericReport)
+const renderJsonData = (jsonData) => {
+    if (!jsonData || typeof jsonData !== 'object') return String(jsonData);
+
+    // Human-friendly format
+    // For simple objects with just a few key-value pairs, render as a list
+    const entries = Object.entries(jsonData);
+
+    return (
+        <div className={styles.humanJsonContainer}>
+            {entries.map(([key, value], index) => {
+                // Format the key to be more readable
+                const formattedKey = formatJsonKey(key);
+
+                // Handle different value types
+                let displayValue;
+                if (value === null || value === undefined) {
+                    displayValue = 'N/A';
+                } else if (typeof value === 'boolean') {
+                    displayValue = value ? 'Yes' : 'No';
+                } else if (typeof value === 'number') {
+                    // Format numbers nicely
+                    displayValue = value.toLocaleString();
+                } else if (Array.isArray(value)) {
+                    // For arrays, join the values with commas
+                    displayValue = value
+                        .map((item) =>
+                            typeof item === 'object' && item !== null
+                                ? '[Object]'
+                                : String(item)
+                        )
+                        .join(', ');
+                } else if (typeof value === 'object') {
+                    // For nested objects, show a placeholder
+                    displayValue = '[Object]';
+                } else {
+                    displayValue = String(value);
+                }
+
+                return (
+                    <div key={index} className={styles.humanJsonRow}>
+                        <span className={styles.humanJsonKey}>
+                            {formattedKey + ': '}
+                        </span>
+                        <span className={styles.humanJsonValue}>
+                            {displayValue}
+                        </span>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+// Smart format for boolean and status values (from original GenericReport)
+const formatSmartValue = (value, columnName, columnType) => {
+    // Skip null/undefined values
+    if (value === null || value === undefined) {
+        return '';
+    }
+
+    // Handle JSON values first
+    if (isJsonValue(value)) {
+        try {
+            // For JSON objects/arrays, format them nicely
+            let jsonValue;
+
+            // Parse the JSON if it's a string
+            if (typeof value === 'string') {
+                try {
+                    jsonValue = JSON.parse(value);
+                } catch (e) {
+                    return String(value);
+                }
+            } else {
+                jsonValue = value;
+            }
+
+            // Transform JSON to have human-readable keys
+            const transformedJson = transformJsonForDisplay(jsonValue);
+
+            // Just return the human-friendly format
+            return renderJsonData(transformedJson);
+        } catch (e) {
+            return String(value);
+        }
+    }
+
+    // Handle date/datetime formatting first
+    if (
+        columnType &&
+        (columnType.includes('date') || columnType.includes('time'))
+    ) {
+        try {
+            const date = new Date(value);
+            if (!isNaN(date.getTime())) {
+                // Check if it's a datetime or just date
+                const hasTime =
+                    columnType.includes('datetime') ||
+                    columnType.includes('timestamp') ||
+                    (typeof value === 'string' && value.includes(':'));
+
+                if (hasTime) {
+                    // Format as d-m-Y H:i A (Australian datetime format)
+                    return date
+                        .toLocaleString('en-AU', {
+                            day: '2-digit',
+                            month: '2-digit',
+                            year: 'numeric',
+                            hour: '2-digit',
+                            minute: '2-digit',
+                            hour12: true,
+                        })
+                        .replace(/\//g, '-');
+                } else {
+                    // Format as d-m-Y (Australian date format)
+                    return date
+                        .toLocaleDateString('en-AU', {
+                            day: '2-digit',
+                            month: '2-digit',
+                            year: 'numeric',
+                        })
+                        .replace(/\//g, '-');
+                }
+            }
+        } catch (e) {
+            // If date parsing fails, continue with other formatting
+        }
+    }
+
+    // Convert to string for comparison
+    const strValue = String(value).toLowerCase();
+    const lowerColumnName = columnName.toLowerCase();
+
+    // Handle boolean values (0/1) in status columns
+    if (
+        (columnType === 'tinyint' ||
+            columnType === 'boolean' ||
+            columnType === 'bit') &&
+        (strValue === '0' ||
+            strValue === '1' ||
+            strValue === 'true' ||
+            strValue === 'false')
+    ) {
+        const boolValue = strValue === '1' || strValue === 'true';
+
+        // Status-specific formatting
+        if (lowerColumnName.includes('status')) {
+            return (
+                <span
+                    className={boolValue ? 'status-active' : 'status-inactive'}
+                    style={{
+                        color: boolValue ? '#16a34a' : '#dc2626',
+                        fontWeight: '500',
+                        padding: '2px 8px',
+                        borderRadius: '12px',
+                        backgroundColor: boolValue ? '#dcfce7' : '#fef2f2',
+                        fontSize: '0.75rem',
+                    }}
+                >
+                    {boolValue ? 'Active' : 'Inactive'}
+                </span>
+            );
+        }
+
+        // Completion-specific formatting
+        if (
+            lowerColumnName.includes('complete') ||
+            lowerColumnName.includes('completed') ||
+            lowerColumnName.includes('done') ||
+            lowerColumnName.includes('finished')
+        ) {
+            return (
+                <span
+                    style={{
+                        color: boolValue ? '#16a34a' : '#dc2626',
+                        fontWeight: '500',
+                    }}
+                >
+                    {boolValue ? 'Yes' : 'No'}
+                </span>
+            );
+        }
+
+        // Enabled/disabled formatting
+        if (
+            lowerColumnName.includes('enable') ||
+            lowerColumnName.includes('enabled') ||
+            lowerColumnName.includes('disable') ||
+            lowerColumnName.includes('disabled')
+        ) {
+            return (
+                <span
+                    style={{
+                        color: boolValue ? '#16a34a' : '#dc2626',
+                        fontWeight: '500',
+                        padding: '2px 8px',
+                        borderRadius: '12px',
+                        backgroundColor: boolValue ? '#dcfce7' : '#fef2f2',
+                        fontSize: '0.75rem',
+                    }}
+                >
+                    {boolValue ? 'Enabled' : 'Disabled'}
+                </span>
+            );
+        }
+
+        // Approved/rejected formatting
+        if (
+            lowerColumnName.includes('approve') ||
+            lowerColumnName.includes('approved') ||
+            lowerColumnName.includes('reject') ||
+            lowerColumnName.includes('rejected')
+        ) {
+            return (
+                <span
+                    style={{
+                        color: boolValue ? '#16a34a' : '#dc2626',
+                        fontWeight: '500',
+                        padding: '2px 8px',
+                        borderRadius: '12px',
+                        backgroundColor: boolValue ? '#dcfce7' : '#fef2f2',
+                        fontSize: '0.75rem',
+                    }}
+                >
+                    {boolValue ? 'Approved' : 'Rejected'}
+                </span>
+            );
+        }
+
+        // Verified formatting
+        if (
+            lowerColumnName.includes('verify') ||
+            lowerColumnName.includes('verified')
+        ) {
+            return (
+                <span
+                    style={{
+                        color: boolValue ? '#16a34a' : '#dc2626',
+                        fontWeight: '500',
+                        padding: '2px 8px',
+                        borderRadius: '12px',
+                        backgroundColor: boolValue ? '#dcfce7' : '#fef2f2',
+                        fontSize: '0.75rem',
+                    }}
+                >
+                    {boolValue ? 'Verified' : 'Not Verified'}
+                </span>
+            );
+        }
+
+        // Default boolean formatting
+        return (
+            <span
+                style={{
+                    color: boolValue ? '#16a34a' : '#dc2626',
+                    fontWeight: '500',
+                }}
+            >
+                {boolValue ? 'Yes' : 'No'}
+            </span>
+        );
+    }
+
+    // Return the original value if no smart formatting applies
+    return value;
+};
+
+// Smart field filtering - hide technical fields by default
+const shouldHideField = (fieldName, fieldType) => {
+    const name = fieldName.toLowerCase();
+    const type = fieldType.toLowerCase();
+
+    // Hide foreign keys (except main 'id')
+    if (name.endsWith('_id') && name !== 'id') return true;
+
+    // Hide UUIDs
+    if (name.includes('uuid') || type.includes('uuid')) return true;
+
+    // Hide technical timestamps
+    if (['updated_at', 'deleted_at'].includes(name)) return true;
+
+    // Hide Laravel/system fields
+    if (
+        [
+            'remember_token',
+            'email_verified_at',
+            'password',
+            'password_hash',
+        ].includes(name)
+    )
+        return true;
+
+    // Hide pivot table fields
+    if (name.includes('pivot_')) return true;
+
+    // Hide technical fields
+    if (name.startsWith('_') || name.includes('hash') || name.includes('token'))
+        return true;
+
+    return false;
+};
+
+// Flatten filter criteria to match GenericReport format
+const flattenFilterCriteria = (filterCriteria) => {
+    if (
+        !filterCriteria ||
+        !filterCriteria.groups ||
+        filterCriteria.groups.length === 0
+    ) {
+        return [];
+    }
+
+    const flatFilters = [];
+
+    filterCriteria.groups.forEach((group) => {
+        if (group.filters && group.filters.length > 0) {
+            group.filters.forEach((filter) => {
+                if (
+                    filter.table &&
+                    filter.column &&
+                    filter.operator &&
+                    filter.value !== undefined
+                ) {
+                    flatFilters.push({
+                        table: filter.table,
+                        column: filter.column,
+                        operator: filter.operator,
+                        value: filter.value,
+                    });
+                }
+            });
+        }
+    });
+
+    return flatFilters;
+};
+
+// Enhanced field categorization with better grouping
+const categorizeFields = (columns, showHiddenFields = false) => {
+    const categories = {
+        essential: [],
+        descriptive: [],
+        contact: [],
+        financial: [],
+        dates: [],
+        status: [],
+        hidden: [],
+        other: [],
+    };
+
+    columns.forEach((column) => {
+        const name = column.name.toLowerCase();
+        const type = column.type.toLowerCase();
+
+        // Check if field should be hidden
+        if (shouldHideField(column.name, column.type)) {
+            if (showHiddenFields) {
+                categories.hidden.push(column);
+            }
+            return; // Skip hidden fields
+        }
+
+        // Categorize visible fields
+        if (name === 'id' || name.includes('name') || name.includes('title')) {
+            categories.essential.push(column);
+        } else if (
+            name.includes('email') ||
+            name.includes('phone') ||
+            name.includes('contact') ||
+            name.includes('address')
+        ) {
+            categories.contact.push(column);
+        } else if (
+            name.includes('description') ||
+            name.includes('note') ||
+            name.includes('comment') ||
+            name.includes('detail')
+        ) {
+            categories.descriptive.push(column);
+        } else if (type.includes('date') || type.includes('time')) {
+            categories.dates.push(column);
+        } else if (
+            name.includes('price') ||
+            name.includes('cost') ||
+            name.includes('amount') ||
+            name.includes('total') ||
+            name.includes('fee')
+        ) {
+            categories.financial.push(column);
+        } else if (
+            name.includes('status') ||
+            name.includes('active') ||
+            name.includes('enabled') ||
+            name.startsWith('is_') ||
+            type.includes('boolean') ||
+            type.includes('enum')
+        ) {
+            categories.status.push(column);
+        } else {
+            categories.other.push(column);
+        }
+    });
+
+    return categories;
+};
+
+// Wizard steps with detailed guidance - reordered for better UX
+const wizardSteps = [
+    {
+        id: 'table',
+        title: 'Select Your Data',
+        icon: Data,
+        description: 'Choose what type of information you want to report on',
+        guidance: {
+            summary: 'Pick the main data source for your report',
+            howTo: [
+                'Review the list of available data tables below',
+                'Each table represents a different type of information in your system',
+                'Click on the table that contains the main data you want to analyze',
+                'The table name shows both a user-friendly name and the technical name',
+            ],
+            tip: 'Choose the table with the primary information you want to report on. You can connect related data in the next step.',
+        },
+    },
+    {
+        id: 'relationships',
+        title: 'Add Related Data',
+        icon: LinkChain,
+        description: 'Include information from related areas (optional)',
+        guidance: {
+            summary: 'Connect additional data to enrich your report',
+            howTo: [
+                'Review suggested connections we found automatically',
+                'Click "Connect" on relationships that add value to your report',
+                'Connected tables will provide additional fields in the next step',
+                'Skip this step if you only need data from your main table',
+            ],
+            tip: 'Relationships help you get more complete information, like adding customer names to invoice data.',
+        },
+    },
+    {
+        id: 'columns',
+        title: 'Choose Information',
+        icon: File,
+        description: 'Select which details you want to see',
+        guidance: {
+            summary: 'Select the specific fields to include in your report',
+            howTo: [
+                'Review fields from your main table and any connected tables',
+                'Check the boxes next to fields you want to include',
+                'Use "Select All" to include everything, or start fresh with "Clear All"',
+                'Fields are organized by categories to make selection easier',
+            ],
+            tip: 'Include key identifiers (like names or IDs) and the specific data you want to analyze.',
+        },
+    },
+    {
+        id: 'filters',
+        title: 'Filter Results',
+        icon: Filter,
+        description: 'Narrow down to specific records (optional)',
+        guidance: {
+            summary: 'Apply filters to show only the records you need',
+            howTo: [
+                'Create custom filters using any field from your selected tables',
+                'Use Quick Filters for common scenarios like "Last 30 Days"',
+                'Click "Add Filter" to create detailed filtering conditions',
+                'Skip this step to include all available records',
+            ],
+            tip: 'Filters help you focus on specific data, like only active customers or recent transactions.',
+        },
+    },
+    {
+        id: 'preview',
+        title: 'Preview & Save',
+        icon: EyeOpen,
+        description: 'Review your report and save for future use',
+        guidance: {
+            summary: 'Generate, review, and save your custom report',
+            howTo: [
+                'Click "Generate Report" to see your data',
+                'Review the results in the table below',
+                'Save your report configuration for future use',
+                'Export your data in Excel, CSV, or PDF format',
+            ],
+            tip: 'Saving your report lets you run it again later with updated data, or share it with others.',
+        },
+    },
+];
+
+// 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
+    const [tables, setTables] = useState([]);
+    const [selectedTable, setSelectedTable] = useState(null);
+    const [tableColumns, setTableColumns] = useState([]);
+    const [isLoadingTables, setIsLoadingTables] = useState(false);
+    const [isLoadingJoinColumns, setIsLoadingJoinColumns] = useState(false);
+
+    // State for report configuration
+    const [selectedColumns, setSelectedColumns] = useState([]);
+    const [availableTables, setAvailableTables] = useState([]);
+    const [joins, setJoins] = useState([]);
+    const [reportName, setReportName] = useState('');
+    const [isPublic, setIsPublic] = useState(false);
+
+    // State for manual relationship creation
+    const [showManualJoinForm, setShowManualJoinForm] = useState(false);
+    const [manualJoin, setManualJoin] = useState({
+        sourceTable: '',
+        targetTable: '',
+        sourceColumn: '',
+        targetColumn: '',
+        joinType: 'INNER JOIN',
+    });
+    const [manualJoinColumns, setManualJoinColumns] = useState({
+        source: [],
+        target: [],
+    });
+
+    // 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);
+
+    // State for suggested joins
+    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([]);
+
+    // Enhanced filter criteria with visual builder support
+    const [filterCriteria, setFilterCriteria] = useState({
+        operator: 'AND',
+        groups: [
+            {
+                operator: 'AND',
+                filters: [],
+            },
+        ],
+    });
+
+    // 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);
+
+    // State for pagination - now using local 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);
+
+    // State for showing hidden fields
+    const [showHiddenFields, setShowHiddenFields] = useState(false);
+
+    // Note: Removed table search functionality to simplify user experience
+
+    // Extract additional settings with defaults
+    const {
+        reportsUrl = '/ajax/reportBuilder/reports',
+        executeUrl = '/ajax/reportBuilder/execute',
+        suggestedJoinsUrl = '/ajax/reportBuilder/getSuggestedJoins',
+        jsonFieldKeysUrl = '/ajax/reportBuilder/getJsonFieldKeys',
+        exportUrl = '/ajax/reportBuilder/export',
+    } = setting;
+
+    // Show guided help popup
+    const showGuidedHelp = () => {
+        Swal.fire({
+            title: '🎯 Quick Start Guide',
+            html: `
+                <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>
+                        </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.
+                        </p>
+                    </div>
+                </div>
+            `,
+            width: 500,
+            confirmButtonText: "Let's Get Started!",
+            confirmButtonColor: '#2563eb',
+            showCancelButton: true,
+            cancelButtonText: 'Skip Tour',
+            cancelButtonColor: '#6b7280',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                setShowTemplates(true);
+            }
+        });
+    };
+
+    // Initialize component
+    useEffect(() => {
+        fetchDatabaseTables();
+        fetchSavedReports();
+
+        // Show help on first load
+        const hasSeenHelp = localStorage.getItem('reportBuilder_hasSeenHelp');
+        if (!hasSeenHelp && beginnerMode) {
+            setTimeout(() => {
+                showGuidedHelp();
+                localStorage.setItem('reportBuilder_hasSeenHelp', 'true');
+            }, 500);
+        }
+    }, [tableUrl, reportsUrl]); // Add dependencies to ensure re-fetch when URLs change
+
+    // Fetch columns when table is selected (like advanced mode)
+    useEffect(() => {
+        if (selectedTable) {
+            fetchTableColumns(selectedTable);
+            fetchSuggestedJoins(selectedTable);
+        }
+    }, [selectedTable, columnUrl, suggestedJoinsUrl]);
+
+    // 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)
+        ) {
+            const commonColumns = [
+                'id',
+                'name',
+                'title',
+                'email',
+                'status',
+                'created_at',
+            ];
+            const autoSelect = tableColumns
+                .filter(
+                    (col) =>
+                        commonColumns.includes(col.name.toLowerCase()) &&
+                        !shouldHideField(col.name, col.type)
+                )
+                .map((col) => ({
+                    table: selectedTable,
+                    column: col.name,
+                    displayName: formatName(col.name),
+                }));
+
+            if (autoSelect.length > 0) {
+                setSelectedColumns(autoSelect);
+                toast.info(
+                    `We've pre-selected some common fields for you. You can add or remove fields as needed.`,
+                    {
+                        autoClose: 5000,
+                    }
+                );
+            }
+        }
+    }, [
+        tableColumns,
+        selectedColumns.length,
+        beginnerMode,
+        selectedTable,
+        currentWizardStep,
+    ]);
+
+    // 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
+        ) {
+            executeReport();
+        }
+    }, [
+        currentWizardStep,
+        beginnerMode,
+        selectedTable,
+        selectedColumns.length,
+        previewData.length,
+        isLoading,
+    ]);
+
+    // Delete saved report
+    const deleteReport = async (reportId, reportLabel) => {
+        const result = await Swal.fire({
+            title: 'Delete Report',
+            html: `Are you sure you want to delete "<strong>${reportLabel}</strong>"?<br><br>This action cannot be undone.`,
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Yes, Delete',
+            cancelButtonText: 'Cancel',
+            confirmButtonColor: '#ef4444',
+            cancelButtonColor: '#6b7280',
+        });
+
+        if (result.isConfirmed) {
+            try {
+                const deleteResult = await CustomFetch(
+                    `${reportsUrl}/${reportId}`,
+                    'DELETE'
+                );
+
+                if (deleteResult.error) {
+                    toast.error(deleteResult.error);
+                } else if (deleteResult.data?.success || deleteResult.success) {
+                    toast.success(
+                        `Report "${reportLabel}" deleted successfully`
+                    );
+                    fetchSavedReports(); // Refresh the list
+                } else {
+                    toast.error(
+                        deleteResult.data?.message ||
+                            deleteResult.message ||
+                            'Failed to delete report'
+                    );
+                }
+            } catch (error) {
+                toast.error('Failed to delete report');
+                console.error('Delete error:', error);
+            }
+        }
+    };
+
+    // Start again function to reset wizard to home
+    const startAgain = () => {
+        // Reset all state
+        setSelectedTable(null);
+        setSelectedColumns([]);
+        setJoins([]);
+        setFilterCriteria({
+            operator: 'AND',
+            groups: [
+                {
+                    operator: 'AND',
+                    filters: [],
+                },
+            ],
+        });
+        setSortCriteria([]);
+        setPreviewData([]);
+        setGridColumns([]);
+        setReportName('');
+        setIsPublic(false);
+        setLoadedReportId(null); // Reset loaded report ID
+        setCurrentWizardStep(0);
+        setShowTemplates(true);
+        setTableColumns([]);
+        setAvailableTables([]);
+
+        toast.info(
+            'Report builder reset. You can start creating a new report.'
+        );
+    };
+
+    // Wizard navigation
+    const goToNextStep = () => {
+        if (currentWizardStep < wizardSteps.length - 1) {
+            setCurrentWizardStep(currentWizardStep + 1);
+        }
+    };
+
+    const goToPreviousStep = () => {
+        if (currentWizardStep > 0) {
+            setCurrentWizardStep(currentWizardStep - 1);
+        }
+    };
+
+    // Check if current step is complete
+    const isStepComplete = (stepId) => {
+        switch (stepId) {
+            case 'table':
+                return !!selectedTable;
+            case 'relationships':
+                return true; // Optional step
+            case 'columns':
+                return selectedColumns.length > 0;
+            case 'filters':
+                return true; // Optional step
+            case 'preview':
+                return previewData.length > 0;
+            default:
+                return false;
+        }
+    };
+
+    // Fetch database tables from the API
+    const fetchDatabaseTables = async () => {
+        if (!tableUrl) {
+            console.warn('No tableUrl provided to fetch database tables');
+            setIsLoadingTables(false);
+            return;
+        }
+
+        setIsLoadingTables(true);
+
+        // List of tables to hide from the report builder
+        const hiddenTables = [
+            'audits',
+            'crm_settings',
+            'two_factor_remember_tokens',
+            'system_requests',
+            'migrations',
+            'password_resets',
+            'personal_access_tokens',
+            'sessions',
+            'cache',
+            'jobs',
+            'failed_jobs',
+        ];
+
+        try {
+            // Use POST method to match the working advanced mode
+            const result = await CustomFetch(tableUrl, 'POST', {});
+
+            if (result.error) {
+                toast.error(result.error);
+            } else {
+                // Handle response format like the working advanced mode
+                let tableData =
+                    result.data?.data || result.data || result.tables || result;
+
+                // Ensure tableData is an array
+                if (!Array.isArray(tableData)) {
+                    console.error('Unexpected table data format:', tableData);
+                    toast.error('Unexpected response format from table API');
+                    return;
+                }
+
+                // Filter out hidden tables and tables with underscores (like advanced mode)
+                let filteredTables = tableData
+                    .filter((table) => {
+                        const tableName =
+                            typeof table === 'string' ? table : table.name;
+                        return (
+                            !hiddenTables.includes(tableName) &&
+                            !tableName.includes('_')
+                        );
+                    })
+                    .map((table) => {
+                        // Normalize table format
+                        if (typeof table === 'string') {
+                            return { name: table };
+                        }
+                        return table;
+                    });
+
+                // Apply definition-based filtering and renaming (like GenericReport)
+                if (
+                    definition &&
+                    definition.tables &&
+                    definition.tables.length > 0
+                ) {
+                    const definitionTableIds = definition.tables.map(
+                        (t) => t.id
+                    );
+                    filteredTables = filteredTables.filter((table) =>
+                        definitionTableIds.includes(table.name)
+                    );
+                }
+
+                // Sort alphabetically
+                filteredTables.sort((a, b) => a.name.localeCompare(b.name));
+
+                console.log('Loaded tables:', filteredTables);
+                setTables(filteredTables);
+
+                if (filteredTables.length === 0) {
+                    console.warn('No tables available after filtering');
+                }
+            }
+        } catch (error) {
+            toast.error('Failed to load database tables');
+            console.error('Error fetching tables:', error);
+        } finally {
+            setIsLoadingTables(false);
+        }
+    };
+
+    // Fetch table columns when a table is selected
+    const fetchTableColumns = async (tableName) => {
+        if (!tableName || !columnUrl) return;
+
+        setIsLoadingTables(true);
+
+        try {
+            const result = await CustomFetch(columnUrl, 'POST', {
+                table: tableName,
+            });
+
+            console.log('Column API Response:', result); // Debug log
+
+            if (result.error) {
+                toast.error(result.error);
+            } else {
+                // Handle the specific response format from getTableColumns (like GenericReport)
+                let columnsData = null;
+
+                if (result.data?.success && result.data?.data?.columns) {
+                    // Primary format: {"success":true,"data":{"table":"contacts_tags","columns":[...]}}
+                    columnsData = result.data.data.columns;
+                } else if (result.columns) {
+                    // Direct format: {"columns": [...]}
+                    columnsData = result.columns;
+                } else if (result.data?.columns) {
+                    // Alternative format: {"data": {"columns": [...]}}
+                    columnsData = result.data.columns;
+                } else {
+                    // Fallback formats
+                    const fallback = result.data?.data || result.data;
+                    if (Array.isArray(fallback)) {
+                        columnsData = fallback;
+                    }
+                }
+
+                if (Array.isArray(columnsData) && columnsData.length > 0) {
+                    setTableColumns(columnsData);
+                    console.log('Loaded columns:', columnsData);
+
+                    // Note: Auto-selection of columns removed since user should choose relationships first,
+                    // then select columns in step 3
+                } else {
+                    console.error('Invalid columns data format:', result);
+                    setTableColumns([]);
+                    toast.error(
+                        'Failed to load columns. Please check the table configuration.'
+                    );
+                }
+            }
+        } catch (error) {
+            toast.error('Failed to load table columns');
+            console.error('Error fetching columns:', error);
+        } finally {
+            setIsLoadingTables(false);
+        }
+    };
+
+    // Fetch saved reports
+    const fetchSavedReports = async () => {
+        if (!reportsUrl) return;
+
+        setIsLoadingReports(true);
+
+        try {
+            const result = await CustomFetch(reportsUrl, 'GET');
+
+            if (result.error) {
+                toast.error(result.error);
+            } else if (result.data?.success && result.data?.data) {
+                setSavedReports(result.data.data);
+            } else if (result.reports) {
+                setSavedReports(result.reports);
+            } else if (result.data) {
+                setSavedReports(result.data);
+            }
+        } catch (error) {
+            toast.error('Failed to load saved reports');
+            console.error('Error fetching reports:', error);
+        } finally {
+            setIsLoadingReports(false);
+        }
+    };
+
+    // Fetch suggested joins for a table
+    const fetchSuggestedJoins = async (tableName) => {
+        if (!tableName || !suggestedJoinsUrl) {
+            console.warn(
+                'Missing tableName or suggestedJoinsUrl for fetchSuggestedJoins'
+            );
+            return;
+        }
+
+        setIsLoadingSuggestedJoins({
+            ...isLoadingSuggestedJoins,
+            [tableName]: true,
+        });
+
+        try {
+            const result = await CustomFetch(suggestedJoinsUrl, 'POST', {
+                table: tableName,
+            });
+
+            console.log('Suggested joins API response:', result); // Debug log
+
+            if (result.error) {
+                toast.error(result.error);
+            } else {
+                // Handle response format like GenericReport (robust parsing)
+                let joinsData = null;
+
+                if (result.data?.success && result.data?.data?.suggestedJoins) {
+                    // Primary format: {"success":true,"data":{"suggestedJoins":[...]}}
+                    joinsData = result.data.data.suggestedJoins;
+                } else if (result.suggestedJoins) {
+                    // Direct format: {"suggestedJoins": [...]}
+                    joinsData = result.suggestedJoins;
+                } else if (result.data?.suggestedJoins) {
+                    // Alternative format: {"data": {"suggestedJoins": [...]}}
+                    joinsData = result.data.suggestedJoins;
+                } else {
+                    // Fallback formats
+                    const fallback = result.data?.data || result.data;
+                    if (Array.isArray(fallback)) {
+                        joinsData = fallback;
+                    }
+                }
+
+                if (Array.isArray(joinsData)) {
+                    // Filter out unwanted joins (like safebook)
+                    const filteredJoins = joinsData.filter((join) => {
+                        return !(
+                            (join.sourceTable &&
+                                join.sourceTable
+                                    .toLowerCase()
+                                    .includes('safebook')) ||
+                            (join.targetTable &&
+                                join.targetTable
+                                    .toLowerCase()
+                                    .includes('safebook'))
+                        );
+                    });
+
+                    console.log(
+                        `Found ${filteredJoins.length} suggested joins for ${tableName}:`,
+                        filteredJoins
+                    );
+
+                    setSuggestedJoins({
+                        ...suggestedJoins,
+                        [tableName]: filteredJoins,
+                    });
+                } else {
+                    console.warn(
+                        'No valid suggested joins found or invalid response format:',
+                        result
+                    );
+                    setSuggestedJoins({
+                        ...suggestedJoins,
+                        [tableName]: [],
+                    });
+                }
+            }
+        } catch (error) {
+            console.error('Error fetching suggested joins:', error);
+            setSuggestedJoins({
+                ...suggestedJoins,
+                [tableName]: [],
+            });
+        } finally {
+            setIsLoadingSuggestedJoins({
+                ...isLoadingSuggestedJoins,
+                [tableName]: false,
+            });
+        }
+    };
+
+    // Add join relationship
+    const addJoin = (joinData) => {
+        const newJoin = { ...joinData, availableColumns: [] };
+        setJoins([...joins, newJoin]);
+
+        // Fetch columns for the joined table if not already available
+        if (!availableTables.includes(joinData.targetTable)) {
+            setAvailableTables([...availableTables, joinData.targetTable]);
+            fetchJoinColumns(joinData.targetTable, joins.length); // Use current joins.length as index
+        }
+    };
+
+    // Fetch columns for a joined table (similar to GenericReport)
+    const fetchJoinColumns = async (tableName, joinIndex) => {
+        if (!tableName || !columnUrl) {
+            console.warn('Missing tableName or columnUrl for fetchJoinColumns');
+            return;
+        }
+
+        setIsLoadingJoinColumns(true);
+
+        try {
+            const result = await CustomFetch(columnUrl, 'POST', {
+                table: tableName,
+            });
+
+            if (result.error) {
+                toast.error(result.error);
+            } else {
+                // Handle the specific response format from getTableColumns
+                let columnsData = null;
+
+                if (result.data?.success && result.data?.data?.columns) {
+                    columnsData = result.data.data.columns;
+                } else if (result.columns) {
+                    columnsData = result.columns;
+                } else if (result.data?.columns) {
+                    columnsData = result.data.columns;
+                } else {
+                    const fallback = result.data?.data || result.data;
+                    if (Array.isArray(fallback)) {
+                        columnsData = fallback;
+                    }
+                }
+
+                if (Array.isArray(columnsData) && columnsData.length > 0) {
+                    // Update the join with available columns
+                    setJoins((prevJoins) => {
+                        const updatedJoins = [...prevJoins];
+                        if (updatedJoins[joinIndex]) {
+                            updatedJoins[joinIndex].availableColumns =
+                                columnsData;
+                        }
+                        return updatedJoins;
+                    });
+
+                    console.log(
+                        `Loaded ${columnsData.length} columns for joined table ${tableName}`
+                    );
+                } else {
+                    console.error(
+                        'Invalid columns data format for joined table:',
+                        result
+                    );
+                    toast.error(
+                        `Failed to load columns for ${tableName}. Please check the table configuration.`
+                    );
+                }
+            }
+        } catch (error) {
+            toast.error(`Failed to load columns for joined table ${tableName}`);
+            console.error('Error fetching join columns:', error);
+        } finally {
+            setIsLoadingJoinColumns(false);
+        }
+    };
+
+    // Remove join relationship
+    const removeJoin = (joinIndex) => {
+        const updatedJoins = joins.filter((_, index) => index !== joinIndex);
+        setJoins(updatedJoins);
+    };
+
+    // Manual relationship creation functions
+    const handleManualJoinChange = (field, value) => {
+        setManualJoin((prev) => ({
+            ...prev,
+            [field]: value,
+        }));
+
+        // Fetch columns when table selection changes
+        if (field === 'sourceTable' && value) {
+            fetchManualJoinColumns(value, 'source');
+        } else if (field === 'targetTable' && value) {
+            fetchManualJoinColumns(value, 'target');
+        }
+    };
+
+    const fetchManualJoinColumns = async (tableName, type) => {
+        if (!tableName || !columnUrl) return;
+
+        try {
+            const result = await CustomFetch(
+                `${columnUrl}/${tableName}`,
+                'GET'
+            );
+            if (result.data?.success && result.data.data) {
+                setManualJoinColumns((prev) => ({
+                    ...prev,
+                    [type]: result.data.data,
+                }));
+            }
+        } catch (error) {
+            console.error(`Error fetching ${type} columns:`, error);
+        }
+    };
+
+    const addManualJoin = () => {
+        if (
+            !manualJoin.sourceTable ||
+            !manualJoin.targetTable ||
+            !manualJoin.sourceColumn ||
+            !manualJoin.targetColumn
+        ) {
+            toast.warning(
+                'Please fill in all fields for the manual relationship.'
+            );
+            return;
+        }
+
+        const newJoin = {
+            sourceTable: manualJoin.sourceTable,
+            targetTable: manualJoin.targetTable,
+            sourceColumn: manualJoin.sourceColumn,
+            targetColumn: manualJoin.targetColumn,
+            joinType: manualJoin.joinType,
+            isManual: true,
+        };
+
+        setJoins([...joins, newJoin]);
+
+        // Reset form and hide it
+        setManualJoin({
+            sourceTable: '',
+            targetTable: '',
+            sourceColumn: '',
+            targetColumn: '',
+            joinType: 'INNER JOIN',
+        });
+        setManualJoinColumns({ source: [], target: [] });
+        setShowManualJoinForm(false);
+
+        toast.success('Manual relationship added successfully!');
+    };
+
+    // Table selection handler
+    const handleTableSelect = (tableName) => {
+        setSelectedTable(tableName);
+        setSelectedColumns([]);
+        setJoins([]);
+        setAvailableTables([tableName]);
+        fetchTableColumns(tableName);
+        fetchSuggestedJoins(tableName);
+
+        if (beginnerMode) {
+            goToNextStep(); // Now goes to relationships step
+        }
+    };
+
+    // Column selection handler
+    const handleColumnToggle = (column, tableName = selectedTable) => {
+        const columnId = `${tableName}.${column.name}`;
+        const isSelected = selectedColumns.some(
+            (col) => `${col.table}.${col.column}` === columnId
+        );
+
+        if (isSelected) {
+            setSelectedColumns(
+                selectedColumns.filter(
+                    (col) => `${col.table}.${col.column}` !== columnId
+                )
+            );
+        } else {
+            setSelectedColumns([
+                ...selectedColumns,
+                {
+                    table: tableName,
+                    column: column.name,
+                    displayName: formatName(column.name),
+                },
+            ]);
+        }
+    };
+
+    // Execute report with local pagination - fetch all data at once
+    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.'
+            );
+            return;
+        }
+
+        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
+
+                // Set initial page data (first page)
+                const startIndex = 0;
+                const endIndex = Math.min(pageSize, allFetchedData.length);
+                setPreviewData(allFetchedData.slice(startIndex, endIndex));
+
+                // 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>
+                                    );
+                                }
+
+                                return formattedValue;
+                            },
+                        };
+                    });
+                    setGridColumns(dynamicColumns);
+                } else {
+                    // Fallback to selected columns if no data
+                    const columns = selectedColumns.map((col) => {
+                        // Find column type from table columns
+                        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 {
+                            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>
+                                    );
+                                }
+
+                                return formattedValue;
+                            },
+                        };
+                    });
+                    setGridColumns(columns);
+                }
+
+                if (
+                    beginnerMode &&
+                    currentWizardStep < wizardSteps.length - 1
+                ) {
+                    setCurrentWizardStep(wizardSteps.length - 1);
+                }
+
+                // Show success message with total records found
+                toast.success(`Found ${allFetchedData.length} records`);
+
+                // 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')
+                );
+            }
+        } catch (error) {
+            toast.error('Failed to execute report');
+            console.error('Error executing report:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // 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([]);
+    };
+
+    // Render the appropriate content based on mode
+    const renderContent = () => {
+        if (beginnerMode && showTemplates) {
+            return renderTemplateSelection();
+        }
+
+        if (beginnerMode) {
+            return renderWizardMode();
+        }
+
+        return renderAdvancedMode();
+    };
+
+    // Load saved report configuration
+    const loadSavedReport = (report) => {
+        try {
+            const config =
+                typeof report.detail === 'string'
+                    ? JSON.parse(report.detail)
+                    : report.detail;
+
+            if (config.mainTable) {
+                setSelectedTable(config.mainTable);
+                setAvailableTables([config.mainTable]);
+                fetchTableColumns(config.mainTable);
+                fetchSuggestedJoins(config.mainTable);
+            }
+
+            if (config.columns) {
+                setSelectedColumns(config.columns);
+            }
+
+            if (config.joins) {
+                setJoins(config.joins);
+                config.joins.forEach((join) => {
+                    if (!availableTables.includes(join.targetTable)) {
+                        setAvailableTables((prev) => [
+                            ...prev,
+                            join.targetTable,
+                        ]);
+                    }
+                });
+            }
+
+            if (config.filters) {
+                setFilterCriteria(config.filters);
+            }
+
+            if (config.sorting) {
+                setSortCriteria(config.sorting);
+            }
+
+            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
+
+            toast.success(`Loaded report: ${report.label}`);
+        } catch (error) {
+            toast.error('Failed to load report configuration');
+            console.error('Error loading report:', error);
+        }
+    };
+
+    // Render saved reports dashboard
+    const renderTemplateSelection = () => {
+        return (
+            <div className={styles.templateSelection}>
+                <div className={styles.templateHeader}>
+                    <h2>Choose a Starting Point</h2>
+                    <p>
+                        Select a saved report to modify, or create a new one
+                        from scratch
+                    </p>
+                </div>
+
+                <div className={styles.reportsDashboard}>
+                    {/* Create New Report Option */}
+                    <div className={styles.newReportSection}>
+                        <div
+                            className={styles.newReportCard}
+                            onClick={() => setShowTemplates(false)}
+                        >
+                            <CirclePlus size={32} />
+                            <h4>Create New Report</h4>
+                            <p>
+                                Build a custom report from scratch with our
+                                guided wizard
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Saved Reports List */}
+                    {isLoadingReports ? (
+                        <div className={styles.loading}>
+                            Loading your saved reports...
+                        </div>
+                    ) : savedReports.length > 0 ? (
+                        <div className={styles.savedReportsSection}>
+                            <h3>Your Saved Reports ({savedReports.length})</h3>
+                            <div className={styles.reportsGrid}>
+                                {savedReports.map((report) => (
+                                    <div
+                                        key={report.id}
+                                        className={styles.reportCard}
+                                    >
+                                        <div
+                                            className={styles.reportCardContent}
+                                            onClick={() =>
+                                                loadSavedReport(report)
+                                            }
+                                        >
+                                            <div
+                                                className={styles.reportHeader}
+                                            >
+                                                <h4 title={report.label}>
+                                                    {report.label}
+                                                </h4>
+                                                <div
+                                                    className={
+                                                        styles.reportMeta
+                                                    }
+                                                >
+                                                    <span
+                                                        className={
+                                                            styles.reportVisibility
+                                                        }
+                                                    >
+                                                        {report.is_public
+                                                            ? '🌐'
+                                                            : '🔒'}
+                                                    </span>
+                                                    <span
+                                                        className={
+                                                            styles.reportDate
+                                                        }
+                                                    >
+                                                        {moment(
+                                                            report.created_at
+                                                        ).fromNow()}
+                                                    </span>
+                                                </div>
+                                            </div>
+                                            {report.detail && (
+                                                <div
+                                                    className={
+                                                        styles.reportTableInfo
+                                                    }
+                                                >
+                                                    <span
+                                                        className={
+                                                            styles.reportTable
+                                                        }
+                                                    >
+                                                        📊{' '}
+                                                        {formatName(
+                                                            typeof report.detail ===
+                                                                'string'
+                                                                ? JSON.parse(
+                                                                      report.detail
+                                                                  ).mainTable
+                                                                : report.detail
+                                                                      .mainTable
+                                                        )}
+                                                    </span>
+                                                </div>
+                                            )}
+                                            <div
+                                                className={
+                                                    styles.reportClickHint
+                                                }
+                                            >
+                                                Click to load and edit
+                                            </div>
+                                        </div>
+                                        <div className={styles.reportActions}>
+                                            <button
+                                                className={
+                                                    styles.deleteReportBtn
+                                                }
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    deleteReport(
+                                                        report.id,
+                                                        report.label
+                                                    );
+                                                }}
+                                                title="Delete this report"
+                                            >
+                                                ×
+                                            </button>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    ) : (
+                        <div className={styles.noReports}>
+                            <Data size={48} />
+                            <h3>No Saved Reports</h3>
+                            <p>
+                                You haven't created any reports yet. Click
+                                "Create New Report" to get started!
+                            </p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    // Render wizard mode
+    const renderWizardMode = () => {
+        const currentStep = wizardSteps[currentWizardStep];
+        const StepIcon = currentStep.icon;
+
+        return (
+            <div className={styles.wizardMode}>
+                {/* Progress bar */}
+                <div className={styles.wizardProgress}>
+                    {wizardSteps.map((step, index) => {
+                        const StepIcon = step.icon;
+                        const isActive = index === currentWizardStep;
+                        const isComplete =
+                            index < currentWizardStep ||
+                            isStepComplete(step.id);
+
+                        return (
+                            <div
+                                key={step.id}
+                                className={`${styles.wizardStep} ${
+                                    isActive ? styles.active : ''
+                                } ${isComplete ? styles.complete : ''}`}
+                                onClick={() =>
+                                    index <= currentWizardStep &&
+                                    setCurrentWizardStep(index)
+                                }
+                            >
+                                <div className={styles.stepIcon}>
+                                    {isComplete && !isActive ? (
+                                        <CircleCheck size={20} />
+                                    ) : (
+                                        <StepIcon size={20} />
+                                    )}
+                                </div>
+                                <div className={styles.stepInfo}>
+                                    <span className={styles.stepTitle}>
+                                        {step.title}
+                                    </span>
+                                    <span className={styles.stepDescription}>
+                                        {step.description}
+                                    </span>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                {/* Step content */}
+                <div className={styles.wizardContent}>
+                    <div className={styles.stepHeader}>
+                        <div className={styles.stepNumber}>
+                            {currentWizardStep + 1}
+                        </div>
+                        <div className={styles.stepHeaderContent}>
+                            <div className={styles.stepIcon}>
+                                <StepIcon size={24} />
+                            </div>
+                            <div className={styles.stepHeaderText}>
+                                <h2>{currentStep.title}</h2>
+                                <p>{currentStep.description}</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Step Guidance */}
+                    {currentStep.guidance && (
+                        <div className={styles.stepGuidance}>
+                            <div className={styles.guidanceContent}>
+                                <h3>{currentStep.guidance.summary}</h3>
+                                <div className={styles.howToSteps}>
+                                    <h4>How to complete this step:</h4>
+                                    <ol>
+                                        {currentStep.guidance.howTo.map(
+                                            (step, index) => (
+                                                <li key={index}>{step}</li>
+                                            )
+                                        )}
+                                    </ol>
+                                </div>
+                                {currentStep.guidance.tip && (
+                                    <div className={styles.guidanceTip}>
+                                        <Info size={16} />
+                                        <span>{currentStep.guidance.tip}</span>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+
+                    <div className={styles.stepBody}>
+                        {renderWizardStepContent(currentStep.id)}
+                    </div>
+
+                    {/* Navigation buttons */}
+                    <div className={styles.wizardNavigation}>
+                        <button
+                            className={`${styles.btn} ${styles.btnSecondary}`}
+                            onClick={goToPreviousStep}
+                            disabled={currentWizardStep === 0}
+                        >
+                            Previous
+                        </button>
+
+                        {currentWizardStep === wizardSteps.length - 1 ? (
+                            <button
+                                className={`${styles.btn} ${styles.btnSecondary}`}
+                                onClick={startAgain}
+                            >
+                                Start Again
+                            </button>
+                        ) : (
+                            <button
+                                className={`${styles.btn} ${styles.btnPrimary}`}
+                                onClick={goToNextStep}
+                                disabled={!isStepComplete(currentStep.id)}
+                            >
+                                Next
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    // Render wizard step content
+    const renderWizardStepContent = (stepId) => {
+        switch (stepId) {
+            case 'table':
+                return renderTableSelection();
+            case 'relationships':
+                return renderRelationships();
+            case 'columns':
+                return renderColumnSelection();
+            case 'filters':
+                return renderFilters();
+            case 'preview':
+                return renderPreview();
+            default:
+                return null;
+        }
+    };
+
+    // Render table selection - simple list format
+    const renderTableSelection = () => {
+        return (
+            <div className={styles.tableSelection}>
+                {isLoadingTables ? (
+                    <div className={styles.loading}>
+                        Loading available tables...
+                    </div>
+                ) : tables.length === 0 ? (
+                    <div className={styles.noTables}>
+                        <Data size={48} />
+                        <h3>No Data Available</h3>
+                        <p>
+                            No database tables are available. Please check your
+                            configuration or contact your administrator.
+                        </p>
+                    </div>
+                ) : (
+                    <div className={styles.simpleTableList}>
+                        <div className={styles.tableGrid}>
+                            {tables.map((table) => {
+                                const TableIcon = getTableIcon(table.name);
+                                const isSelected = selectedTable === table.name;
+                                const displayName = getTableDisplayName(
+                                    table.name,
+                                    definition
+                                );
+                                const description = getTableDescription(
+                                    table.name,
+                                    definition
+                                );
+
+                                return (
+                                    <div
+                                        key={table.name}
+                                        className={`${styles.tableCard} ${
+                                            isSelected ? styles.selected : ''
+                                        }`}
+                                        onClick={() =>
+                                            handleTableSelect(table.name)
+                                        }
+                                    >
+                                        <div className={styles.tableCardIcon}>
+                                            <TableIcon size={24} />
+                                        </div>
+                                        <div className={styles.tableCardInfo}>
+                                            <h4>{displayName}</h4>
+                                            <p>{description}</p>
+                                        </div>
+                                        {isSelected && (
+                                            <div
+                                                className={
+                                                    styles.tableCardCheck
+                                                }
+                                            >
+                                                <CircleCheck size={20} />
+                                            </div>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+
+                        {selectedTable && (
+                            <div className={styles.selectedTableInfo}>
+                                <CircleCheck size={16} />
+                                <span>
+                                    Selected:{' '}
+                                    {getTableDisplayName(
+                                        selectedTable,
+                                        definition
+                                    )}
+                                </span>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    // Render column selection
+    const renderColumnSelection = () => {
+        // Add loading check at the beginning
+        if (isLoadingTables || isLoadingJoinColumns) {
+            return (
+                <div className={styles.loading}>
+                    Loading table columns
+                    {isLoadingJoinColumns ? ' from joined tables' : ''}...
+                </div>
+            );
+        }
+
+        if (tableColumns.length === 0) {
+            return (
+                <div className={styles.noColumns}>
+                    <Data size={48} />
+                    <h3>No Columns Available</h3>
+                    <p>
+                        No columns found for the selected table. Please try
+                        selecting a different table or check your configuration.
+                    </p>
+                </div>
+            );
+        }
+
+        // Get all available columns (main table + joined tables)
+        const allAvailableColumns = [
+            {
+                tableName: selectedTable,
+                displayName: getTableDisplayName(selectedTable, definition),
+                columns: tableColumns,
+                isMainTable: true,
+            },
+            ...joins.map((join) => ({
+                tableName: join.targetTable,
+                displayName: getTableDisplayName(join.targetTable, definition),
+                columns: join.availableColumns || [],
+                isMainTable: false,
+            })),
+        ];
+
+        // Use enhanced categorization with smart filtering for main table
+        const mainTableCategories = categorizeFields(
+            tableColumns,
+            showHiddenFields
+        );
+        const mainHiddenCount = mainTableCategories.hidden.length;
+
+        const categoryInfo = {
+            essential: {
+                name: 'Essential Info',
+                icon: Tag,
+                description: 'Key identifiers and names',
+            },
+            contact: {
+                name: 'Contact Details',
+                icon: Person,
+                description: 'Email, phone, and addresses',
+            },
+            descriptive: {
+                name: 'Descriptions',
+                icon: File,
+                description: 'Notes and detailed information',
+            },
+            financial: {
+                name: 'Financial',
+                icon: Money,
+                description: 'Prices, costs, and amounts',
+            },
+            dates: {
+                name: 'Dates',
+                icon: Calendar,
+                description: 'Important dates and times',
+            },
+            status: {
+                name: 'Status & Settings',
+                icon: Newspaper,
+                description: 'Current state and flags',
+            },
+            hidden: {
+                name: 'Technical Fields',
+                icon: SettingsVertical,
+                description: 'System and technical fields',
+            },
+            other: {
+                name: 'Other Fields',
+                icon: Data,
+                description: 'Additional information',
+            },
+        };
+
+        return (
+            <div className={styles.columnSelection}>
+                <div className={styles.columnSelectionHeader}>
+                    <p>
+                        Select information from your chosen tables.
+                        {allAvailableColumns.length > 1 && (
+                            <>
+                                {' '}
+                                You can select from {
+                                    allAvailableColumns.length
+                                }{' '}
+                                tables.
+                            </>
+                        )}
+                    </p>
+                    <div className={styles.quickActions}>
+                        <button
+                            className={styles.linkButton}
+                            onClick={() => {
+                                const allVisibleColumns = [];
+                                allAvailableColumns.forEach((tableData) => {
+                                    const visibleColumns = tableData.columns
+                                        .filter(
+                                            (col) =>
+                                                !shouldHideField(
+                                                    col.name,
+                                                    col.type
+                                                )
+                                        )
+                                        .map((col) => ({
+                                            table: tableData.tableName,
+                                            column: col.name,
+                                            displayName: formatName(col.name),
+                                        }));
+                                    allVisibleColumns.push(...visibleColumns);
+                                });
+                                setSelectedColumns(allVisibleColumns);
+                            }}
+                        >
+                            Select All Visible
+                        </button>
+                        <button
+                            className={styles.linkButton}
+                            onClick={() => setSelectedColumns([])}
+                        >
+                            Clear All
+                        </button>
+                        {mainHiddenCount > 0 && (
+                            <button
+                                className={styles.linkButton}
+                                onClick={() =>
+                                    setShowHiddenFields(!showHiddenFields)
+                                }
+                            >
+                                {showHiddenFields ? 'Hide' : 'Show'} Technical
+                                Fields ({mainHiddenCount})
+                            </button>
+                        )}
+                    </div>
+                </div>
+
+                <div className={styles.tableColumnSections}>
+                    {allAvailableColumns.map((tableData) => (
+                        <div
+                            key={tableData.tableName}
+                            className={styles.tableSection}
+                        >
+                            <div className={styles.tableSectionHeader}>
+                                <h3>
+                                    {tableData.displayName}
+                                    {!tableData.isMainTable && ' (Connected)'}
+                                </h3>
+                                <span className={styles.tableColumnCount}>
+                                    {
+                                        tableData.columns.filter((col) =>
+                                            tableData.isMainTable
+                                                ? !shouldHideField(
+                                                      col.name,
+                                                      col.type
+                                                  ) || showHiddenFields
+                                                : !shouldHideField(
+                                                      col.name,
+                                                      col.type
+                                                  )
+                                        ).length
+                                    }{' '}
+                                    fields
+                                </span>
+                            </div>
+
+                            {tableData.isMainTable ? (
+                                // Main table: use categorization
+                                <div className={styles.columnCategories}>
+                                    {Object.entries(mainTableCategories).map(
+                                        ([category, columns]) => {
+                                            if (columns.length === 0)
+                                                return null;
+
+                                            const info = categoryInfo[category];
+                                            const CategoryIcon = info.icon;
+
+                                            return (
+                                                <div
+                                                    key={category}
+                                                    className={
+                                                        styles.columnCategory
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.categoryHeader
+                                                        }
+                                                    >
+                                                        <CategoryIcon
+                                                            size={20}
+                                                        />
+                                                        <div>
+                                                            <h4>{info.name}</h4>
+                                                            <span>
+                                                                {
+                                                                    info.description
+                                                                }
+                                                            </span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div
+                                                        className={
+                                                            styles.columnList
+                                                        }
+                                                    >
+                                                        {columns.map(
+                                                            (column) => {
+                                                                const isSelected =
+                                                                    selectedColumns.some(
+                                                                        (col) =>
+                                                                            col.table ===
+                                                                                selectedTable &&
+                                                                            col.column ===
+                                                                                column.name
+                                                                    );
+
+                                                                return (
+                                                                    <label
+                                                                        key={
+                                                                            column.name
+                                                                        }
+                                                                        className={
+                                                                            styles.columnItem
+                                                                        }
+                                                                    >
+                                                                        <input
+                                                                            type="checkbox"
+                                                                            checked={
+                                                                                isSelected
+                                                                            }
+                                                                            onChange={() =>
+                                                                                handleColumnToggle(
+                                                                                    column,
+                                                                                    selectedTable
+                                                                                )
+                                                                            }
+                                                                        />
+                                                                        <span
+                                                                            className={
+                                                                                styles.columnName
+                                                                            }
+                                                                        >
+                                                                            {formatName(
+                                                                                column.name
+                                                                            )}
+                                                                        </span>
+                                                                        <span
+                                                                            className={
+                                                                                styles.columnType
+                                                                            }
+                                                                        >
+                                                                            {getFriendlyTerm(
+                                                                                column.type
+                                                                            )}
+                                                                        </span>
+                                                                    </label>
+                                                                );
+                                                            }
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            );
+                                        }
+                                    )}
+                                </div>
+                            ) : (
+                                // Joined tables: simple list
+                                <div className={styles.columnList}>
+                                    {tableData.columns
+                                        .filter(
+                                            (col) =>
+                                                !shouldHideField(
+                                                    col.name,
+                                                    col.type
+                                                )
+                                        )
+                                        .map((column) => {
+                                            const isSelected =
+                                                selectedColumns.some(
+                                                    (col) =>
+                                                        col.table ===
+                                                            tableData.tableName &&
+                                                        col.column ===
+                                                            column.name
+                                                );
+
+                                            return (
+                                                <label
+                                                    key={column.name}
+                                                    className={
+                                                        styles.columnItem
+                                                    }
+                                                >
+                                                    <input
+                                                        type="checkbox"
+                                                        checked={isSelected}
+                                                        onChange={() =>
+                                                            handleColumnToggle(
+                                                                column,
+                                                                tableData.tableName
+                                                            )
+                                                        }
+                                                    />
+                                                    <span
+                                                        className={
+                                                            styles.columnName
+                                                        }
+                                                    >
+                                                        {formatName(
+                                                            column.name
+                                                        )}
+                                                    </span>
+                                                    <span
+                                                        className={
+                                                            styles.columnType
+                                                        }
+                                                    >
+                                                        {getFriendlyTerm(
+                                                            column.type
+                                                        )}
+                                                    </span>
+                                                </label>
+                                            );
+                                        })}
+                                </div>
+                            )}
+                        </div>
+                    ))}
+                </div>
+
+                {selectedColumns.length > 0 && (
+                    <div className={styles.selectedSummary}>
+                        <strong>
+                            {selectedColumns.length} fields selected
+                        </strong>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    // Render relationships (simplified)
+    const renderRelationships = () => {
+        const tableSuggestions = suggestedJoins[selectedTable] || [];
+        const isLoading = isLoadingSuggestedJoins[selectedTable] || false;
+
+        return (
+            <div className={styles.relationshipsSection}>
+                <div className={styles.helpBox}>
+                    <Info size={20} />
+                    <div>
+                        <h4>What are relationships?</h4>
+                        <p>
+                            Relationships allow you to include information from
+                            related data. For example, if you're reporting on
+                            invoices, you might want to include the client's
+                            name from the clients table.
+                        </p>
+                    </div>
+                </div>
+
+                {/* Current Joins */}
+                {joins.length > 0 && (
+                    <div className={styles.currentJoins}>
+                        <h3>Connected Data</h3>
+                        {joins.map((join, index) => (
+                            <div key={index} className={styles.joinItem}>
+                                <div className={styles.joinInfo}>
+                                    <span className={styles.joinDescription}>
+                                        {getTableDisplayName(
+                                            selectedTable,
+                                            definition
+                                        )}{' '}
+                                        →{' '}
+                                        {getTableDisplayName(
+                                            join.targetTable,
+                                            definition
+                                        )}
+                                    </span>
+                                    <span className={styles.joinDetails}>
+                                        via {formatName(join.sourceColumn)} →{' '}
+                                        {formatName(join.targetColumn)}
+                                    </span>
+                                </div>
+                                <button
+                                    className={styles.removeJoinBtn}
+                                    onClick={() => removeJoin(index)}
+                                >
+                                    ×
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {/* Suggested Relationships */}
+                {tableSuggestions.length > 0 && (
+                    <div className={styles.suggestedJoins}>
+                        <h3>Suggested Connections</h3>
+                        <p>
+                            We found these possible connections to other data:
+                        </p>
+                        {tableSuggestions.map((suggestion, index) => (
+                            <div key={index} className={styles.suggestionCard}>
+                                <div className={styles.suggestionInfo}>
+                                    <div className={styles.suggestionTitle}>
+                                        <LinkChain size={16} />
+                                        <span>
+                                            Connect to{' '}
+                                            {getTableDisplayName(
+                                                suggestion.targetTable,
+                                                definition
+                                            )}
+                                        </span>
+                                        <div
+                                            className={styles.confidenceRating}
+                                        >
+                                            {'⭐'.repeat(
+                                                Math.floor(
+                                                    suggestion.confidence / 20
+                                                )
+                                            )}
+                                        </div>
+                                    </div>
+                                    <p className={styles.suggestionDescription}>
+                                        {suggestion.description ||
+                                            `Link ${getTableDisplayName(
+                                                selectedTable,
+                                                definition
+                                            )} with ${getTableDisplayName(
+                                                suggestion.targetTable,
+                                                definition
+                                            )}`}
+                                    </p>
+                                </div>
+                                <button
+                                    className={`${styles.btn} ${styles.btnPrimary}`}
+                                    onClick={() => addJoin(suggestion)}
+                                    disabled={joins.some(
+                                        (j) =>
+                                            j.targetTable ===
+                                            suggestion.targetTable
+                                    )}
+                                >
+                                    {joins.some(
+                                        (j) =>
+                                            j.targetTable ===
+                                            suggestion.targetTable
+                                    )
+                                        ? 'Connected'
+                                        : 'Connect'}
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {isLoading && (
+                    <div className={styles.loading}>
+                        Finding possible connections...
+                    </div>
+                )}
+
+                {/* Manual Relationship Creation */}
+                <div className={styles.manualJoinSection}>
+                    <h3>Create Manual Relationship</h3>
+                    <p>
+                        Can't find the connection you need? Create a custom
+                        relationship between tables.
+                    </p>
+
+                    {!showManualJoinForm ? (
+                        <button
+                            className={`${styles.btn} ${styles.btnSecondary}`}
+                            onClick={() => {
+                                setShowManualJoinForm(true);
+                                setManualJoin((prev) => ({
+                                    ...prev,
+                                    sourceTable: selectedTable,
+                                }));
+                                if (selectedTable) {
+                                    fetchManualJoinColumns(
+                                        selectedTable,
+                                        'source'
+                                    );
+                                }
+                            }}
+                        >
+                            <CirclePlus size={16} />
+                            Add Manual Relationship
+                        </button>
+                    ) : (
+                        <div className={styles.manualJoinForm}>
+                            <div className={styles.manualJoinGrid}>
+                                <div className={styles.manualJoinField}>
+                                    <label>Join Type:</label>
+                                    <select
+                                        className={styles.filterSelect}
+                                        value={manualJoin.joinType}
+                                        onChange={(e) =>
+                                            handleManualJoinChange(
+                                                'joinType',
+                                                e.target.value
+                                            )
+                                        }
+                                    >
+                                        <option value="INNER JOIN">
+                                            Inner Join (Required match)
+                                        </option>
+                                        <option value="LEFT JOIN">
+                                            Left Join (Optional match)
+                                        </option>
+                                        <option value="RIGHT JOIN">
+                                            Right Join
+                                        </option>
+                                        <option value="FULL JOIN">
+                                            Full Join
+                                        </option>
+                                    </select>
+                                </div>
+
+                                <div className={styles.manualJoinField}>
+                                    <label>Source Table:</label>
+                                    <select
+                                        className={styles.filterSelect}
+                                        value={manualJoin.sourceTable}
+                                        onChange={(e) =>
+                                            handleManualJoinChange(
+                                                'sourceTable',
+                                                e.target.value
+                                            )
+                                        }
+                                    >
+                                        <option value={selectedTable}>
+                                            {getTableDisplayName(
+                                                selectedTable,
+                                                definition
+                                            )}
+                                        </option>
+                                        {joins.map((join, idx) => (
+                                            <option
+                                                key={idx}
+                                                value={join.targetTable}
+                                            >
+                                                {getTableDisplayName(
+                                                    join.targetTable,
+                                                    definition
+                                                )}
+                                            </option>
+                                        ))}
+                                    </select>
+                                </div>
+
+                                <div className={styles.manualJoinField}>
+                                    <label>Source Column:</label>
+                                    <select
+                                        className={styles.filterSelect}
+                                        value={manualJoin.sourceColumn}
+                                        onChange={(e) =>
+                                            handleManualJoinChange(
+                                                'sourceColumn',
+                                                e.target.value
+                                            )
+                                        }
+                                        disabled={!manualJoin.sourceTable}
+                                    >
+                                        <option value="">Select Column</option>
+                                        {manualJoinColumns.source.map((col) => (
+                                            <option
+                                                key={col.name}
+                                                value={col.name}
+                                            >
+                                                {formatName(col.name)}
+                                            </option>
+                                        ))}
+                                    </select>
+                                </div>
+
+                                <div className={styles.manualJoinField}>
+                                    <label>Target Table:</label>
+                                    <select
+                                        className={styles.filterSelect}
+                                        value={manualJoin.targetTable}
+                                        onChange={(e) =>
+                                            handleManualJoinChange(
+                                                'targetTable',
+                                                e.target.value
+                                            )
+                                        }
+                                    >
+                                        <option value="">Select Table</option>
+                                        {availableTables
+                                            .filter(
+                                                (table) =>
+                                                    table !==
+                                                    manualJoin.sourceTable
+                                            )
+                                            .map((table) => (
+                                                <option
+                                                    key={table}
+                                                    value={table}
+                                                >
+                                                    {getTableDisplayName(
+                                                        table,
+                                                        definition
+                                                    )}
+                                                </option>
+                                            ))}
+                                    </select>
+                                </div>
+
+                                <div className={styles.manualJoinField}>
+                                    <label>Target Column:</label>
+                                    <select
+                                        className={styles.filterSelect}
+                                        value={manualJoin.targetColumn}
+                                        onChange={(e) =>
+                                            handleManualJoinChange(
+                                                'targetColumn',
+                                                e.target.value
+                                            )
+                                        }
+                                        disabled={!manualJoin.targetTable}
+                                    >
+                                        <option value="">Select Column</option>
+                                        {manualJoinColumns.target.map((col) => (
+                                            <option
+                                                key={col.name}
+                                                value={col.name}
+                                            >
+                                                {formatName(col.name)}
+                                            </option>
+                                        ))}
+                                    </select>
+                                </div>
+                            </div>
+
+                            <div className={styles.manualJoinActions}>
+                                <button
+                                    className={`${styles.btn} ${styles.btnPrimary}`}
+                                    onClick={addManualJoin}
+                                    disabled={
+                                        !manualJoin.sourceTable ||
+                                        !manualJoin.targetTable ||
+                                        !manualJoin.sourceColumn ||
+                                        !manualJoin.targetColumn
+                                    }
+                                >
+                                    Add Relationship
+                                </button>
+                                <button
+                                    className={`${styles.btn} ${styles.btnSecondary}`}
+                                    onClick={() => {
+                                        setShowManualJoinForm(false);
+                                        setManualJoin({
+                                            sourceTable: '',
+                                            targetTable: '',
+                                            sourceColumn: '',
+                                            targetColumn: '',
+                                            joinType: 'INNER JOIN',
+                                        });
+                                        setManualJoinColumns({
+                                            source: [],
+                                            target: [],
+                                        });
+                                    }}
+                                >
+                                    Cancel
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                <div className={styles.skipOption}>
+                    <p>
+                        This is an optional step. You can skip it if you only
+                        need data from the{' '}
+                        {getTableDisplayName(selectedTable, definition)} table.
+                    </p>
+                    <button
+                        className={`${styles.btn} ${styles.btnSecondary}`}
+                        onClick={goToNextStep}
+                    >
+                        Skip This Step
+                    </button>
+                </div>
+            </div>
+        );
+    };
+
+    // Advanced filter management functions (from original GenericReport)
+
+    // Add a new filter group
+    const handleAddFilterGroup = () => {
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+        updatedFilterCriteria.groups.push({
+            operator: 'AND',
+            filters: [],
+        });
+        setFilterCriteria(updatedFilterCriteria);
+        setShowFilteringSection(true);
+    };
+
+    // Remove a filter group
+    const handleRemoveFilterGroup = (groupIndex) => {
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+        updatedFilterCriteria.groups.splice(groupIndex, 1);
+
+        if (updatedFilterCriteria.groups.length === 0) {
+            updatedFilterCriteria.groups.push({
+                operator: 'AND',
+                filters: [],
+            });
+        }
+
+        setFilterCriteria(updatedFilterCriteria);
+
+        const allGroupsEmpty = updatedFilterCriteria.groups.every(
+            (group) => group.filters.length === 0
+        );
+
+        if (allGroupsEmpty) {
+            setShowFilteringSection(false);
+        }
+    };
+
+    // Add a filter criterion to a group
+    const handleAddFilterCriterion = (groupIndex = 0) => {
+        const defaultColumn =
+            selectedColumns.length > 0
+                ? {
+                      table: selectedColumns[0].table,
+                      column: selectedColumns[0].column,
+                      displayName: selectedColumns[0].displayName,
+                  }
+                : null;
+
+        const newFilterCriterion = {
+            table: defaultColumn?.table || '',
+            column: defaultColumn?.column || '',
+            operator: '=',
+            value: '',
+        };
+
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+        updatedFilterCriteria.groups[groupIndex].filters.push(
+            newFilterCriterion
+        );
+        setFilterCriteria(updatedFilterCriteria);
+        setShowFilteringSection(true);
+    };
+
+    // Remove a filter criterion
+    const handleRemoveFilterCriterion = (groupIndex, filterIndex) => {
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+        updatedFilterCriteria.groups[groupIndex].filters.splice(filterIndex, 1);
+        setFilterCriteria(updatedFilterCriteria);
+
+        const allGroupsEmpty = updatedFilterCriteria.groups.every(
+            (group) => group.filters.length === 0
+        );
+
+        if (allGroupsEmpty) {
+            setShowFilteringSection(false);
+        }
+    };
+
+    // Update filter criterion
+    const handleFilterCriterionChange = (
+        groupIndex,
+        filterIndex,
+        field,
+        value
+    ) => {
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+        updatedFilterCriteria.groups[groupIndex].filters[filterIndex][field] =
+            value;
+        setFilterCriteria(updatedFilterCriteria);
+    };
+
+    // Update main filter operator (AND/OR between groups)
+    const handleMainFilterOperatorChange = (newOperator) => {
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+        updatedFilterCriteria.operator = newOperator;
+        setFilterCriteria(updatedFilterCriteria);
+    };
+
+    // Update filter group operator (AND/OR within group)
+    const handleFilterGroupOperatorChange = (groupIndex, newOperator) => {
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+        updatedFilterCriteria.groups[groupIndex].operator = newOperator;
+        setFilterCriteria(updatedFilterCriteria);
+    };
+
+    // Apply suggested filter
+    const applySuggestedFilter = (suggestedFilter) => {
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+
+        if (updatedFilterCriteria.groups.length === 0) {
+            updatedFilterCriteria.groups.push({
+                operator: 'AND',
+                filters: [],
+            });
+        }
+
+        updatedFilterCriteria.groups[0].filters.push(suggestedFilter.filter);
+        setFilterCriteria(updatedFilterCriteria);
+        setShowFilteringSection(true);
+
+        toast.success(`Added filter: ${suggestedFilter.name}`);
+    };
+
+    // Legacy functions for backward compatibility
+    const addFilter = (filter) => {
+        const updatedCriteria = { ...filterCriteria };
+        updatedCriteria.groups[0].filters.push(filter);
+        setFilterCriteria(updatedCriteria);
+    };
+
+    const removeFilter = (groupIndex, filterIndex) => {
+        handleRemoveFilterCriterion(groupIndex, filterIndex);
+    };
+
+    // Add quick filter based on common patterns
+    const addQuickFilter = (type) => {
+        const availableColumns = [...selectedColumns];
+        joins.forEach((join) => {
+            // Add columns from joined tables (simplified)
+            availableColumns.push({
+                table: join.targetTable,
+                column: 'status',
+                displayName: 'Status',
+            });
+        });
+
+        let filter = null;
+
+        switch (type) {
+            case 'last30days':
+                const dateColumn = availableColumns.find(
+                    (col) =>
+                        col.column.toLowerCase().includes('date') ||
+                        col.column.toLowerCase().includes('created_at')
+                );
+                if (dateColumn) {
+                    filter = {
+                        table: dateColumn.table,
+                        column: dateColumn.column,
+                        operator: '>=',
+                        value: moment()
+                            .subtract(30, 'days')
+                            .format('YYYY-MM-DD'),
+                    };
+                }
+                break;
+            case 'active':
+                const statusColumn = availableColumns.find(
+                    (col) =>
+                        col.column.toLowerCase().includes('status') ||
+                        col.column.toLowerCase().includes('active')
+                );
+                if (statusColumn) {
+                    filter = {
+                        table: statusColumn.table,
+                        column: statusColumn.column,
+                        operator: '=',
+                        value: '1',
+                    };
+                }
+                break;
+            case 'my_records':
+                const userColumn = availableColumns.find(
+                    (col) =>
+                        col.column.toLowerCase().includes('user_id') ||
+                        col.column.toLowerCase().includes('created_by')
+                );
+                if (userColumn) {
+                    filter = {
+                        table: userColumn.table,
+                        column: userColumn.column,
+                        operator: '=',
+                        value: 'current_user', // This would be replaced by backend
+                    };
+                }
+                break;
+        }
+
+        if (filter) {
+            addFilter(filter);
+            toast.success('Filter added successfully!');
+        } else {
+            toast.warning('No suitable column found for this filter type.');
+        }
+    };
+
+    // Add custom filter
+    const addCustomFilter = () => {
+        // Get all available columns from all tables
+        const allColumns = [];
+
+        // Add main table columns
+        tableColumns.forEach((col) => {
+            allColumns.push({
+                table: selectedTable,
+                tableName: getTableDisplayName(selectedTable, definition),
+                column: col.name,
+                columnName: formatName(col.name),
+                type: col.type,
+            });
+        });
+
+        // Add joined table columns
+        joins.forEach((join) => {
+            if (join.availableColumns) {
+                join.availableColumns.forEach((col) => {
+                    allColumns.push({
+                        table: join.targetTable,
+                        tableName: getTableDisplayName(
+                            join.targetTable,
+                            definition
+                        ),
+                        column: col.name,
+                        columnName: formatName(col.name),
+                        type: col.type,
+                    });
+                });
+            }
+        });
+
+        if (allColumns.length === 0) {
+            toast.warning(
+                'No columns available for filtering. Please select tables and columns first.'
+            );
+            return;
+        }
+
+        const newFilter = {
+            table: allColumns[0].table,
+            column: allColumns[0].column,
+            operator: '=',
+            value: '',
+        };
+
+        const updatedCriteria = { ...filterCriteria };
+        updatedCriteria.groups[0].filters.push(newFilter);
+        setFilterCriteria(updatedCriteria);
+    };
+
+    // Update filter value
+    const updateFilter = (groupIndex, filterIndex, field, value) => {
+        const updatedCriteria = { ...filterCriteria };
+        updatedCriteria.groups[groupIndex].filters[filterIndex][field] = value;
+        setFilterCriteria(updatedCriteria);
+    };
+
+    // Get available columns for filters
+    const getAvailableFilterColumns = () => {
+        const allColumns = [];
+
+        // Add main table columns
+        tableColumns.forEach((col) => {
+            if (!shouldHideField(col.name, col.type)) {
+                allColumns.push({
+                    table: selectedTable,
+                    tableName: getTableDisplayName(selectedTable, definition),
+                    column: col.name,
+                    columnName: formatName(col.name),
+                    type: col.type,
+                });
+            }
+        });
+
+        // Add joined table columns
+        joins.forEach((join) => {
+            if (join.availableColumns) {
+                join.availableColumns.forEach((col) => {
+                    if (!shouldHideField(col.name, col.type)) {
+                        allColumns.push({
+                            table: join.targetTable,
+                            tableName: getTableDisplayName(
+                                join.targetTable,
+                                definition
+                            ),
+                            column: col.name,
+                            columnName: formatName(col.name),
+                            type: col.type,
+                        });
+                    }
+                });
+            }
+        });
+
+        return allColumns;
+    };
+
+    // Advanced filter rendering (from original GenericReport)
+    const renderFilters = () => {
+        const availableColumns = getAvailableFilterColumns();
+
+        return (
+            <div className={styles.filtersSection}>
+                <div className={styles.helpBox}>
+                    <Info size={20} />
+                    <div>
+                        <h4>Advanced 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)".
+                        </p>
+                    </div>
+                </div>
+
+                {/* Main Filter Operator */}
+                <div className={styles.filterOperatorContainer}>
+                    <div className={styles.mainFilterOperator}>
+                        <label>Match:</label>
+                        <div className={styles.operatorOptions}>
+                            <div
+                                className={`${styles.operatorOption} ${
+                                    filterCriteria.operator === 'AND'
+                                        ? styles.operatorOptionSelected
+                                        : ''
+                                }`}
+                                onClick={() =>
+                                    handleMainFilterOperatorChange('AND')
+                                }
+                            >
+                                <div className={styles.operatorName}>ALL</div>
+                                <div className={styles.operatorDescription}>
+                                    All filter groups must match
+                                </div>
+                            </div>
+                            <div
+                                className={`${styles.operatorOption} ${
+                                    filterCriteria.operator === 'OR'
+                                        ? styles.operatorOptionSelected
+                                        : ''
+                                }`}
+                                onClick={() =>
+                                    handleMainFilterOperatorChange('OR')
+                                }
+                            >
+                                <div className={styles.operatorName}>ANY</div>
+                                <div className={styles.operatorDescription}>
+                                    Any filter group can match
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={styles.filterActionButtons}>
+                        <button
+                            className={`${styles.btn} ${styles.btnPrimary}`}
+                            onClick={handleAddFilterGroup}
+                            disabled={selectedColumns.length === 0}
+                        >
+                            Add Filter Group
+                        </button>
+                    </div>
+                </div>
+
+                {/* Filter Groups */}
+                {filterCriteria.groups.map((group, groupIndex) => (
+                    <div
+                        key={`group-${groupIndex}`}
+                        className={styles.filterGroup}
+                    >
+                        <div className={styles.filterGroupHeader}>
+                            <div className={styles.filterGroupTitle}>
+                                <h4>Filter Group {groupIndex + 1}</h4>
+                                <div className={styles.filterGroupOperator}>
+                                    <label>Match:</label>
+                                    <div className={styles.operatorButtonGroup}>
+                                        <button
+                                            type="button"
+                                            className={`${
+                                                styles.operatorButton
+                                            } ${
+                                                group.operator === 'AND'
+                                                    ? styles.operatorButtonSelected
+                                                    : ''
+                                            }`}
+                                            onClick={() =>
+                                                handleFilterGroupOperatorChange(
+                                                    groupIndex,
+                                                    'AND'
+                                                )
+                                            }
+                                        >
+                                            ALL
+                                        </button>
+                                        <button
+                                            type="button"
+                                            className={`${
+                                                styles.operatorButton
+                                            } ${
+                                                group.operator === 'OR'
+                                                    ? styles.operatorButtonSelected
+                                                    : ''
+                                            }`}
+                                            onClick={() =>
+                                                handleFilterGroupOperatorChange(
+                                                    groupIndex,
+                                                    'OR'
+                                                )
+                                            }
+                                        >
+                                            ANY
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className={styles.filterGroupActions}>
+                                <button
+                                    className={`${styles.btn} ${styles.btnSecondary}`}
+                                    onClick={() =>
+                                        handleAddFilterCriterion(groupIndex)
+                                    }
+                                    disabled={selectedColumns.length === 0}
+                                >
+                                    Add Filter
+                                </button>
+                                {filterCriteria.groups.length > 1 && (
+                                    <button
+                                        className={styles.removeJoinBtn}
+                                        onClick={() =>
+                                            handleRemoveFilterGroup(groupIndex)
+                                        }
+                                        title="Remove Filter Group"
+                                    >
+                                        ×
+                                    </button>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Filter Criteria in Group */}
+                        {group.filters.length > 0 ? (
+                            <div className={styles.filterCriteriaContainer}>
+                                {group.filters.map((criterion, filterIndex) => (
+                                    <div
+                                        key={`filter-${groupIndex}-${filterIndex}`}
+                                        className={styles.filterCriterion}
+                                    >
+                                        <div
+                                            className={
+                                                styles.filterCriterionHeader
+                                            }
+                                        >
+                                            <h4>
+                                                Filter {filterIndex + 1}:{' '}
+                                                {criterion.table &&
+                                                criterion.column
+                                                    ? `${formatName(
+                                                          criterion.table
+                                                      )}.${formatName(
+                                                          criterion.column
+                                                      )}`
+                                                    : `Criterion #${
+                                                          filterIndex + 1
+                                                      }`}
+                                            </h4>
+                                            <button
+                                                className={styles.removeJoinBtn}
+                                                onClick={() =>
+                                                    handleRemoveFilterCriterion(
+                                                        groupIndex,
+                                                        filterIndex
+                                                    )
+                                                }
+                                                title="Remove Filter Criterion"
+                                            >
+                                                ×
+                                            </button>
+                                        </div>
+
+                                        <div
+                                            className={
+                                                styles.filterCriterionFields
+                                            }
+                                        >
+                                            {/* Table.Column Selection */}
+                                            <div className={styles.filterField}>
+                                                <label>Column:</label>
+                                                <select
+                                                    className={
+                                                        styles.filterSelect
+                                                    }
+                                                    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
+                                                                    );
+                                                                handleFilterCriterionChange(
+                                                                    groupIndex,
+                                                                    filterIndex,
+                                                                    'table',
+                                                                    table
+                                                                );
+                                                                handleFilterCriterionChange(
+                                                                    groupIndex,
+                                                                    filterIndex,
+                                                                    'column',
+                                                                    column
+                                                                );
+                                                            }
+                                                        }
+                                                    }}
+                                                >
+                                                    <option value="">
+                                                        Select a column...
+                                                    </option>
+                                                    {availableColumns.map(
+                                                        (col) => (
+                                                            <option
+                                                                key={`${col.table}.${col.column}`}
+                                                                value={`${col.table}.${col.column}`}
+                                                            >
+                                                                {col.tableName}.
+                                                                {col.columnName}
+                                                            </option>
+                                                        )
+                                                    )}
+                                                </select>
+                                            </div>
+
+                                            {/* Operator Selection */}
+                                            <div className={styles.filterField}>
+                                                <label>Operator:</label>
+                                                <select
+                                                    className={
+                                                        styles.filterSelect
+                                                    }
+                                                    value={criterion.operator}
+                                                    onChange={(e) =>
+                                                        handleFilterCriterionChange(
+                                                            groupIndex,
+                                                            filterIndex,
+                                                            'operator',
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                >
+                                                    <option value="=">
+                                                        equals
+                                                    </option>
+                                                    <option value="!=">
+                                                        does not equal
+                                                    </option>
+                                                    <option value="LIKE">
+                                                        contains
+                                                    </option>
+                                                    <option value="NOT LIKE">
+                                                        does not contain
+                                                    </option>
+                                                    <option value=">">
+                                                        greater than
+                                                    </option>
+                                                    <option value="<">
+                                                        less than
+                                                    </option>
+                                                    <option value=">=">
+                                                        greater than or equal to
+                                                    </option>
+                                                    <option value="<=">
+                                                        less than or equal to
+                                                    </option>
+                                                    <option value="IN">
+                                                        is one of
+                                                    </option>
+                                                    <option value="NOT IN">
+                                                        is not one of
+                                                    </option>
+                                                    <option value="BETWEEN">
+                                                        is between
+                                                    </option>
+                                                    <option value="IS NULL">
+                                                        is empty
+                                                    </option>
+                                                    <option value="IS NOT NULL">
+                                                        is not empty
+                                                    </option>
+                                                </select>
+                                            </div>
+
+                                            {/* Value Input */}
+                                            {![
+                                                'IS NULL',
+                                                'IS NOT NULL',
+                                            ].includes(criterion.operator) && (
+                                                <div
+                                                    className={
+                                                        styles.filterField
+                                                    }
+                                                >
+                                                    <label>Value:</label>
+                                                    <input
+                                                        type="text"
+                                                        className={
+                                                            styles.filterInput
+                                                        }
+                                                        value={
+                                                            criterion.value ||
+                                                            ''
+                                                        }
+                                                        onChange={(e) =>
+                                                            handleFilterCriterionChange(
+                                                                groupIndex,
+                                                                filterIndex,
+                                                                'value',
+                                                                e.target.value
+                                                            )
+                                                        }
+                                                        placeholder={
+                                                            criterion.operator ===
+                                                            'BETWEEN'
+                                                                ? 'Enter values separated by comma (e.g., 10,100)'
+                                                                : criterion.operator ===
+                                                                      'IN' ||
+                                                                  criterion.operator ===
+                                                                      'NOT IN'
+                                                                ? 'Enter values separated by comma'
+                                                                : 'Enter filter value'
+                                                        }
+                                                    />
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : (
+                            <div className={styles.emptyFilterGroup}>
+                                <p>
+                                    No filters in this group. Click "Add Filter"
+                                    to add one.
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                ))}
+
+                <div className={styles.skipOption}>
+                    <p>
+                        This is an optional step. You can skip it to see all
+                        records.
+                    </p>
+                    <button
+                        className={`${styles.btn} ${styles.btnSecondary}`}
+                        onClick={goToNextStep}
+                    >
+                        Skip Filters
+                    </button>
+                </div>
+            </div>
+        );
+    };
+
+    // Export report in different formats (replicating GenericReport pattern)
+    const exportReport = async (format) => {
+        if (!selectedTable || selectedColumns.length === 0) {
+            toast.error('Please generate a report first before exporting.');
+            return;
+        }
+
+        if (!reportName || !reportName.trim()) {
+            toast.error('Please save your report first before exporting.');
+            return;
+        }
+
+        try {
+            // Use exact same payload format as GenericReport
+            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 exportData = {
+                query: queryConfig,
+                format: format === 'excel' ? 'xlsx' : format, // Convert excel to xlsx
+            };
+
+            // Generate filename with timestamp
+            const timestamp = moment().format('YYYY-MM-DD_HH-mm-ss');
+            const fileName = `${reportName.replace(
+                /[^a-zA-Z0-9]/g,
+                '_'
+            )}_${timestamp}.${format === 'excel' ? 'xlsx' : format}`;
+
+            // Use Download component like GenericReport
+            const result = await Download(exportUrl, 'POST', exportData);
+
+            if (result && result.data) {
+                // Use saveAs to trigger download
+                saveAs(result.data, fileName);
+                toast.success(`Report exported as ${format.toUpperCase()}`);
+            } else {
+                toast.error(
+                    `Failed to export report as ${format.toUpperCase()}`
+                );
+            }
+        } catch (error) {
+            toast.error(`Failed to export report as ${format.toUpperCase()}`);
+            console.error('Export error:', error);
+        }
+    };
+
+    // Save report configuration (with save/save-as functionality)
+    const saveReport = async (saveAs = false) => {
+        if (!reportName.trim()) {
+            const defaultName = `${formatName(
+                selectedTable
+            )} Report - ${moment().format('YYYY-MM-DD')}`;
+            setReportName(defaultName);
+        }
+
+        // Determine if this is a save or save-as operation
+        const isExistingReport = loadedReportId && !saveAs;
+        const dialogTitle = isExistingReport ? 'Update Report' : 'Save Report';
+        const confirmButtonText = isExistingReport
+            ? 'Update Report'
+            : 'Save Report';
+
+        const result = await Swal.fire({
+            title: dialogTitle,
+            html: `
+                <div style="text-align: left;">
+                    ${
+                        isExistingReport
+                            ? `<div style="background: #e3f2fd; border: 1px solid #2196f3; border-radius: 4px; padding: 12px; margin-bottom: 16px;">
+                            <strong>⚠️ This will overwrite the existing report:</strong><br>
+                            "${reportName}"
+                        </div>`
+                            : ''
+                    }
+                    <label for="report-name" style="display: block; margin-bottom: 8px; font-weight: 500;">Report Name:</label>
+                    <input 
+                        id="report-name" 
+                        type="text" 
+                        value="${
+                            saveAs
+                                ? `${reportName} (Copy)`
+                                : reportName ||
+                                  `${formatName(
+                                      selectedTable
+                                  )} Report - ${moment().format('YYYY-MM-DD')}`
+                        }"
+                        style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 16px;"
+                    />
+                    <label style="display: flex; align-items: center; gap: 8px;">
+                        <input type="checkbox" id="is-public" ${
+                            isPublic ? 'checked' : ''
+                        } />
+                        <span>Make this report public (visible to other users)</span>
+                    </label>
+                </div>
+            `,
+            showCancelButton: true,
+            confirmButtonText: confirmButtonText,
+            cancelButtonText: 'Cancel',
+            confirmButtonColor: isExistingReport ? '#ff9800' : '#2563eb',
+            preConfirm: () => {
+                const reportNameInput = document.getElementById('report-name');
+                const isPublicInput = document.getElementById('is-public');
+                return {
+                    name: reportNameInput.value,
+                    isPublic: isPublicInput.checked,
+                };
+            },
+        });
+
+        if (result.isConfirmed) {
+            try {
+                const reportConfig = {
+                    label: result.value.name,
+                    is_public: result.value.isPublic,
+                    detail: {
+                        mainTable: selectedTable,
+                        columns: selectedColumns,
+                        joins: joins,
+                        filters: filterCriteria,
+                        sorting: sortCriteria,
+                    },
+                };
+
+                let saveResult;
+                if (isExistingReport) {
+                    // Update existing report using PUT
+                    saveResult = await CustomFetch(
+                        `${reportsUrl}/${loadedReportId}`,
+                        'PUT',
+                        reportConfig
+                    );
+                } else {
+                    // Create new report using POST
+                    saveResult = await CustomFetch(
+                        reportsUrl,
+                        'POST',
+                        reportConfig
+                    );
+                }
+
+                if (saveResult.error) {
+                    toast.error(saveResult.error);
+                } else if (saveResult.data?.success || saveResult.success) {
+                    const successMessage = isExistingReport
+                        ? 'Report updated successfully!'
+                        : 'Report saved successfully!';
+                    toast.success(successMessage);
+                    setReportName(result.value.name);
+                    setIsPublic(result.value.isPublic);
+
+                    // If this was a save-as operation, update the loaded report ID
+                    if (saveAs && saveResult.data?.data?.id) {
+                        setLoadedReportId(saveResult.data.data.id);
+                    } else if (!isExistingReport && saveResult.data?.data?.id) {
+                        setLoadedReportId(saveResult.data.data.id);
+                    }
+
+                    fetchSavedReports(); // Refresh the saved reports list
+                } else {
+                    toast.error(
+                        saveResult.data?.message ||
+                            saveResult.message ||
+                            'Failed to save report'
+                    );
+                }
+            } catch (error) {
+                toast.error('Failed to save report');
+                console.error('Save error:', error);
+            }
+        }
+    };
+
+    // Render preview
+    const renderPreview = () => {
+        return (
+            <div className={styles.previewSection}>
+                <div className={styles.previewActions}>
+                    <button
+                        className={`${styles.btn} ${styles.btnPrimary}`}
+                        onClick={() => {
+                            resetPagination();
+                            executeReport();
+                        }}
+                        disabled={isLoading}
+                    >
+                        {isLoading ? 'Loading...' : 'Generate Report'}
+                    </button>
+                </div>
+
+                {previewData.length > 0 && (
+                    <>
+                        <div className={styles.gridContainer}>
+                            <ReactDataGrid
+                                columns={gridColumns}
+                                dataSource={previewData}
+                                style={{ height: 800 }}
+                                pagination="local"
+                                limit={pageSize}
+                                skip={(currentPage - 1) * pageSize}
+                                count={totalResults}
+                                onLimitChange={(newLimit) => {
+                                    handlePageSizeChange(newLimit);
+                                }}
+                                onSkipChange={(newSkip) => {
+                                    const newPage =
+                                        Math.floor(newSkip / pageSize) + 1;
+                                    handlePageChange(newPage);
+                                }}
+                                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>
+
+                        <div className={styles.reportActions}>
+                            <div className={styles.saveSection}>
+                                <h3>Save Your Report</h3>
+                                <p>
+                                    Save this report configuration to use again
+                                    later.
+                                </p>
+                                <div className={styles.saveButtons}>
+                                    <button
+                                        className={`${styles.btn} ${styles.btnSuccess}`}
+                                        onClick={() => saveReport(false)}
+                                    >
+                                        <Save size={16} />
+                                        {loadedReportId
+                                            ? 'Update Report'
+                                            : 'Save Report'}
+                                    </button>
+                                    {loadedReportId && (
+                                        <button
+                                            className={`${styles.btn} ${styles.btnSecondary}`}
+                                            onClick={() => saveReport(true)}
+                                        >
+                                            <Save size={16} />
+                                            Save As New
+                                        </button>
+                                    )}
+                                </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.btnSecondary}`}
+                                        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.btnSecondary}`}
+                                        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.btnSecondary}`}
+                                        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>
+                    </>
+                )}
+            </div>
+        );
+    };
+
+    // 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 */}
+            <div className={styles.header}>
+                <div className={styles.headerLeft}>
+                    <h1>Report Builder</h1>
+                    <button
+                        className={styles.helpButton}
+                        onClick={showGuidedHelp}
+                    >
+                        <Question size={16} />
+                        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 */}
+            <div className={styles.content}>{renderContent()}</div>
+        </div>
+    );
+};
+
+GenericReportImproved.propTypes = {
+    setting: PropTypes.object,
+    definition: PropTypes.object,
+};
+
+export default GenericReportImproved;