@visns-studio/visns-components 5.4.19 → 5.5.0

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

@@ -0,0 +1,2158 @@
+import React, { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import moment from 'moment';
+import ReactDataGrid from '@inovua/reactdatagrid-community';
+import { CircleX } from 'akar-icons';
+import CustomFetch from '../Fetch';
+import Download from '../Download';
+import { saveAs } from 'file-saver';
+import styles from './styles/GenericReport.module.scss';
+
+// Utility function to format names from camelCase or snake_case to Title Case with spaces
+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(' ');
+};
+
+// Format relationship description to be more user-friendly
+const formatRelationshipDescription = (
+    description,
+    simplified = false,
+    joinData = null
+) => {
+    if (!description) return '';
+
+    // For tooltip (full description)
+    if (!simplified) {
+        // Replace technical terms with more user-friendly ones
+        let formatted = description
+            // Replace table.column references with formatted names
+            .replace(/([a-z_]+)\.([a-z_]+)/gi, (_, table, column) => {
+                return `${formatName(table)}.${formatName(column)}`;
+            })
+            // Replace "references" with "links to"
+            .replace(/references/gi, 'links to')
+            // Replace "_id" with empty string in column names
+            .replace(/(\s)Id/g, '');
+
+        return formatted;
+    }
+
+    // For simplified display in the UI
+    // If we have the full join data, use it to create a more descriptive name
+    if (joinData) {
+        const { sourceTable, targetTable, joinType, isFirstPartOfManyToMany } =
+            joinData;
+
+        // Handle many-to-many relationships with pivot tables
+        if (isFirstPartOfManyToMany && joinData.secondJoin) {
+            const finalTargetTable = joinData.secondJoin.targetTable;
+            return `${formatName(sourceTable)} ↔ ${formatName(
+                finalTargetTable
+            )}`;
+        }
+
+        // Handle regular joins based on join type
+        if (joinType.includes('LEFT')) {
+            return `${formatName(sourceTable)} → ${formatName(targetTable)}`;
+        } else if (joinType.includes('RIGHT')) {
+            return `${formatName(sourceTable)} ← ${formatName(targetTable)}`;
+        } else if (joinType.includes('INNER')) {
+            return `${formatName(sourceTable)} ⟷ ${formatName(targetTable)}`;
+        }
+
+        // Default case - just show the relationship
+        return `${formatName(sourceTable)} - ${formatName(targetTable)}`;
+    }
+
+    // Extract table names from the description if no join data
+    const sourceTablePattern = /([a-z_]+)\./i;
+    const targetTablePattern = /references\s+([a-z_]+)\./i;
+
+    const sourceMatch = description.match(sourceTablePattern);
+    const targetMatch = description.match(targetTablePattern);
+
+    if (sourceMatch && targetMatch) {
+        const sourceTable = sourceMatch[1];
+        const targetTable = targetMatch[1];
+
+        // Check if this is a pivot table description
+        if (description.includes('pivot table')) {
+            return `${formatName(sourceTable)} ↔ ${formatName(targetTable)}`;
+        }
+
+        // Regular relationship
+        return `${formatName(sourceTable)} → ${formatName(targetTable)}`;
+    }
+
+    // Fallback to just the table name if we can't parse the relationship
+    const tablePattern = /([a-z_]+)\.(client_id|id)/gi;
+    const matches = [...description.matchAll(tablePattern)];
+
+    if (matches.length >= 1) {
+        // Get the first table name (source table)
+        const sourceTable = matches[0][1];
+        return formatName(sourceTable);
+    }
+
+    // Final fallback to the standard formatting if all patterns don't match
+    return description
+        .replace(/([a-z_]+)\.([a-z_]+)/gi, (_, table) => {
+            return `${formatName(table)}`;
+        })
+        .replace(/references.+/gi, '')
+        .replace(/links to.+/gi, '')
+        .trim();
+};
+
+// Format snake_case to human readable text
+const formatJsonKey = (key) => {
+    if (!key) return '';
+
+    // Replace underscores with spaces and capitalize each word
+    return key
+        .split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+};
+
+// Transform JSON object to have human-readable keys
+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;
+};
+
+// Check if a value is JSON
+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;
+};
+
+const GenericReport = ({ setting = {} }) => {
+    // Extract settings with defaults
+    const { tableUrl, columnUrl } = setting;
+
+    // No mock data - component will rely on API responses
+
+    // 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 saved reports
+    const [savedReports, setSavedReports] = useState([]);
+    const [selectedReport, setSelectedReport] = useState(null);
+    const [isLoadingReports, setIsLoadingReports] = useState(false);
+
+    // State for suggested joins
+    const [suggestedJoins, setSuggestedJoins] = useState({});
+    const [isLoadingSuggestedJoins, setIsLoadingSuggestedJoins] = useState({});
+
+    // State for report execution
+    const [totalResults, setTotalResults] = useState(0);
+    const [executedSql, setExecutedSql] = useState('');
+
+    // State for report preview
+    const [previewData, setPreviewData] = useState([]);
+    const [gridColumns, setGridColumns] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Extract additional settings with defaults
+    const {
+        reportsUrl = '/ajax/reportBuilder/reports',
+        executeUrl = '/ajax/reportBuilder/execute',
+        suggestedJoinsUrl = '/ajax/reportBuilder/getSuggestedJoins',
+    } = setting;
+
+    // Fetch all database tables and saved reports on component mount
+    useEffect(() => {
+        fetchDatabaseTables();
+        fetchSavedReports();
+    }, []);
+
+    // Fetch table columns when a table is selected
+    useEffect(() => {
+        if (selectedTable) {
+            fetchTableColumns(selectedTable);
+            fetchSuggestedJoins(selectedTable, 'main');
+        }
+    }, [selectedTable]);
+
+    // Update available tables for joins
+    useEffect(() => {
+        if (tables.length > 0 && selectedTable) {
+            const availableTablesToJoin = tables.filter(
+                (table) => table.name !== selectedTable
+            );
+            setAvailableTables(availableTablesToJoin);
+        }
+    }, [tables, selectedTable]);
+
+    // Fetch columns for all joined tables whenever joins change
+    useEffect(() => {
+        if (joins.length > 0) {
+            joins.forEach((join, index) => {
+                if (
+                    join.targetTable &&
+                    (!join.availableColumns ||
+                        join.availableColumns.length === 0)
+                ) {
+                    fetchJoinTableColumns(join.targetTable, index);
+                }
+
+                // Fetch suggested joins for the target table if we haven't already
+                if (join.targetTable && !suggestedJoins[join.targetTable]) {
+                    fetchSuggestedJoins(join.targetTable, join.targetTable);
+                }
+            });
+        }
+    }, [joins, suggestedJoins]);
+
+    // Fetch database tables from the API
+    const fetchDatabaseTables = async () => {
+        setIsLoadingTables(true);
+
+        if (tableUrl) {
+            try {
+                // Use CustomFetch to make a POST request to the API
+                const res = await CustomFetch(tableUrl, 'POST', {});
+
+                // Check if the response has a data property
+                const tablesData = res.data?.data || res.data;
+
+                if (Array.isArray(tablesData)) {
+                    setTables(tablesData);
+                } else {
+                    console.error('Invalid tables data format:', tablesData);
+                    setTables([]);
+                    toast.error(
+                        'Failed to load tables. Please check API configuration.'
+                    );
+                }
+            } catch (error) {
+                console.error('Error fetching tables:', error);
+                setTables([]);
+                toast.error(
+                    'Failed to load tables. Please check API connection.'
+                );
+            } finally {
+                setIsLoadingTables(false);
+            }
+        } else {
+            // No tableUrl provided
+            setTables([]);
+            toast.error(
+                'Table URL not configured. Please set the tableUrl property.'
+            );
+            setIsLoadingTables(false);
+        }
+    };
+
+    // Fetch suggested joins for a table
+    const fetchSuggestedJoins = async (tableName, tableKey) => {
+        // Update loading state for this specific table
+        setIsLoadingSuggestedJoins((prev) => ({
+            ...prev,
+            [tableKey]: true,
+        }));
+
+        try {
+            const res = await CustomFetch(suggestedJoinsUrl, 'POST', {
+                table: tableName,
+            });
+
+            if (res.data?.success && res.data?.data?.suggestedJoins) {
+                // Update suggested joins for this specific table
+                setSuggestedJoins((prev) => ({
+                    ...prev,
+                    [tableKey]: res.data.data.suggestedJoins,
+                }));
+            } else {
+                // Set empty array for this table
+                setSuggestedJoins((prev) => ({
+                    ...prev,
+                    [tableKey]: [],
+                }));
+                console.warn(
+                    `No suggested joins found for table ${tableName} or invalid response format`
+                );
+            }
+        } catch (error) {
+            console.error(
+                `Error fetching suggested joins for table ${tableName}:`,
+                error
+            );
+            // Set empty array for this table on error
+            setSuggestedJoins((prev) => ({
+                ...prev,
+                [tableKey]: [],
+            }));
+            toast.error(
+                `Failed to load suggested joins for table ${formatName(
+                    tableName
+                )}`
+            );
+        } finally {
+            // Update loading state for this specific table
+            setIsLoadingSuggestedJoins((prev) => ({
+                ...prev,
+                [tableKey]: false,
+            }));
+        }
+    };
+
+    // Fetch table columns from the API or use mock data
+    const fetchTableColumns = async (tableName) => {
+        setIsLoading(true);
+
+        if (tableUrl) {
+            try {
+                // Use the columnUrl if provided, otherwise construct it from tableUrl
+                let columnsUrl;
+                if (columnUrl) {
+                    columnsUrl = columnUrl;
+                } else {
+                    // Fallback to constructing URL from tableUrl
+                    const baseUrl = tableUrl.split('/').slice(0, -1).join('/');
+                    columnsUrl = `${baseUrl}/getColumns/${tableName}`;
+                }
+
+                // Use CustomFetch to make a POST request to the API
+                const res = await CustomFetch(columnsUrl, 'POST', {
+                    table: tableName,
+                });
+
+                // Handle the specific response format from getTableColumns
+                // Example: {"success":true,"data":{"table":"contacts_tags","columns":[...]}}
+                if (res.data?.success && res.data?.data?.columns) {
+                    // Extract columns from the nested structure
+                    setTableColumns(res.data.data.columns);
+                } else {
+                    // Fallback to previous format handling
+                    const columnsData = res.data?.data || res.data;
+
+                    if (Array.isArray(columnsData)) {
+                        setTableColumns(columnsData);
+                    } else {
+                        console.error(
+                            'Invalid columns data format:',
+                            columnsData
+                        );
+                        setTableColumns([]);
+                        toast.error(
+                            'Failed to load columns. Please check API response format.'
+                        );
+                    }
+                }
+            } catch (error) {
+                console.error('Error fetching columns:', error);
+                setTableColumns([]);
+                toast.error(
+                    'Failed to load columns. Please check API connection.'
+                );
+            } finally {
+                setIsLoading(false);
+            }
+        } else {
+            // No tableUrl provided
+            setTableColumns([]);
+            toast.error(
+                'Column URL not configured. Please set the tableUrl or columnUrl property.'
+            );
+            setIsLoading(false);
+        }
+    };
+
+    // Reset the report form
+    const handleResetForm = () => {
+        setSelectedTable(null);
+        setSelectedColumns([]);
+        setJoins([]);
+        setReportName('');
+        setIsPublic(false);
+        setSelectedReport(null);
+        setPreviewData([]);
+        setExecutedSql('');
+        setTotalResults(0);
+    };
+
+    // Handle table selection
+    const handleTableSelect = (tableName) => {
+        // If a report is currently selected, clear it
+        if (selectedReport) {
+            setSelectedReport(null);
+            setReportName('');
+            setIsPublic(false);
+        }
+
+        setSelectedTable(tableName);
+        setSelectedColumns([]);
+        setJoins([]);
+    };
+
+    // Handle column selection
+    const handleColumnSelect = (column, tableName = selectedTable) => {
+        const columnWithTable = {
+            table: tableName,
+            column: column.name,
+            displayName: `${formatName(tableName)}.${formatName(column.name)}`,
+            rawDisplayName: `${tableName}.${column.name}`,
+            dataType: column.type,
+        };
+
+        // Check if column is already selected
+        const isAlreadySelected = selectedColumns.some(
+            (col) => col.table === tableName && col.column === column.name
+        );
+
+        if (!isAlreadySelected) {
+            setSelectedColumns([...selectedColumns, columnWithTable]);
+        }
+    };
+
+    // Handle removing a selected column
+    const handleRemoveColumn = (index) => {
+        const updatedColumns = [...selectedColumns];
+        updatedColumns.splice(index, 1);
+        setSelectedColumns(updatedColumns);
+    };
+
+    // State for drag and drop
+    const [draggedItemIndex, setDraggedItemIndex] = useState(null);
+
+    // Handle drag start for column reordering
+    const handleDragStart = (e, index) => {
+        setDraggedItemIndex(index);
+        e.dataTransfer.setData('text/plain', index);
+        e.dataTransfer.effectAllowed = 'move';
+
+        // Add a delay to apply the dragging class
+        setTimeout(() => {
+            e.target.classList.add(styles.dragging);
+        }, 0);
+    };
+
+    // Handle drag end
+    const handleDragEnd = (e) => {
+        setDraggedItemIndex(null);
+        e.target.classList.remove(styles.dragging);
+    };
+
+    // Handle drag over for column reordering
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        e.currentTarget.classList.add(styles.dragOver);
+    };
+
+    // Handle drag leave
+    const handleDragLeave = (e) => {
+        e.currentTarget.classList.remove(styles.dragOver);
+    };
+
+    // Handle drop for column reordering
+    const handleDrop = (e, targetIndex) => {
+        e.preventDefault();
+        e.currentTarget.classList.remove(styles.dragOver);
+
+        const sourceIndex = parseInt(e.dataTransfer.getData('text/plain'), 10);
+
+        if (sourceIndex === targetIndex) return;
+
+        const updatedColumns = [...selectedColumns];
+        const [movedColumn] = updatedColumns.splice(sourceIndex, 1);
+        updatedColumns.splice(targetIndex, 0, movedColumn);
+
+        setSelectedColumns(updatedColumns);
+    };
+
+    // Add a new join
+    const handleAddJoin = () => {
+        const newJoin = {
+            sourceTable: selectedTable,
+            targetTable: '',
+            sourceColumn: '',
+            targetColumn: '',
+            joinType: 'INNER JOIN',
+        };
+
+        setJoins([...joins, newJoin]);
+    };
+
+    // Add a suggested join
+    const handleAddSuggestedJoin = (suggestedJoin) => {
+        // Check if this is a many-to-many relationship with a pivot table
+        if (suggestedJoin.isFirstPartOfManyToMany && suggestedJoin.secondJoin) {
+            // Add two joins for many-to-many relationships
+            const firstJoin = {
+                sourceTable: suggestedJoin.sourceTable,
+                sourceColumn: suggestedJoin.sourceColumn,
+                targetTable: suggestedJoin.targetTable,
+                targetColumn: suggestedJoin.targetColumn,
+                joinType: suggestedJoin.joinType,
+                description: suggestedJoin.description,
+            };
+
+            const secondJoin = {
+                sourceTable: suggestedJoin.secondJoin.sourceTable,
+                sourceColumn: suggestedJoin.secondJoin.sourceColumn,
+                targetTable: suggestedJoin.secondJoin.targetTable,
+                targetColumn: suggestedJoin.secondJoin.targetColumn,
+                joinType: suggestedJoin.secondJoin.joinType,
+                description: suggestedJoin.secondJoin.description,
+            };
+
+            setJoins([...joins, firstJoin, secondJoin]);
+            toast.success('Added many-to-many relationship with pivot table');
+
+            // Fetch columns for both target tables
+            fetchJoinTableColumns(suggestedJoin.targetTable, joins.length);
+            if (suggestedJoin.secondJoin.targetTable) {
+                fetchJoinTableColumns(
+                    suggestedJoin.secondJoin.targetTable,
+                    joins.length + 1
+                );
+            }
+        } else {
+            // Add a single join for regular relationships
+            const newJoin = {
+                sourceTable: suggestedJoin.sourceTable,
+                sourceColumn: suggestedJoin.sourceColumn,
+                targetTable: suggestedJoin.targetTable,
+                targetColumn: suggestedJoin.targetColumn,
+                joinType: suggestedJoin.joinType,
+                description: suggestedJoin.description,
+            };
+
+            setJoins([...joins, newJoin]);
+            toast.success('Added suggested join');
+
+            // Fetch columns for the target table
+            if (suggestedJoin.targetTable) {
+                fetchJoinTableColumns(suggestedJoin.targetTable, joins.length);
+            }
+        }
+    };
+
+    // Update join configuration
+    const handleJoinChange = (index, field, value) => {
+        const updatedJoins = [...joins];
+        updatedJoins[index][field] = value;
+        setJoins(updatedJoins);
+
+        // If target table changed, fetch its columns
+        if (field === 'targetTable' && value) {
+            fetchJoinTableColumns(value, index);
+        }
+    };
+
+    // Fetch columns for a join table
+    const fetchJoinTableColumns = async (tableName, joinIndex) => {
+        setIsLoadingJoinColumns(true);
+
+        if (tableUrl) {
+            try {
+                // Use the columnUrl if provided, otherwise construct it from tableUrl
+                let columnsUrl;
+                if (columnUrl) {
+                    columnsUrl = columnUrl;
+                } else {
+                    // Fallback to constructing URL from tableUrl
+                    const baseUrl = tableUrl.split('/').slice(0, -1).join('/');
+                    columnsUrl = `${baseUrl}/getColumns/${tableName}`;
+                }
+
+                // Use CustomFetch to make a POST request to the API
+                const res = await CustomFetch(columnsUrl, 'POST', {
+                    table: tableName,
+                });
+
+                // Store columns in the join object
+                const updatedJoins = [...joins];
+
+                // Handle the specific response format from getTableColumns
+                // Example: {"success":true,"data":{"table":"contacts_tags","columns":[...]}}
+                if (res.data?.success && res.data?.data?.columns) {
+                    // Extract columns from the nested structure
+                    updatedJoins[joinIndex].availableColumns =
+                        res.data.data.columns;
+                } else {
+                    // Fallback to previous format handling
+                    const columnsData = res.data?.data || res.data;
+
+                    if (Array.isArray(columnsData)) {
+                        updatedJoins[joinIndex].availableColumns = columnsData;
+                    } else {
+                        console.error(
+                            'Invalid columns data format:',
+                            columnsData
+                        );
+                        updatedJoins[joinIndex].availableColumns = [];
+                        toast.error(
+                            'Failed to load join columns. Please check API response format.'
+                        );
+                    }
+                }
+
+                setJoins(updatedJoins);
+            } catch (error) {
+                console.error('Error fetching join columns:', error);
+                const updatedJoins = [...joins];
+                updatedJoins[joinIndex].availableColumns = [];
+                toast.error(
+                    'Failed to load join columns. Please check API connection.'
+                );
+                setJoins(updatedJoins);
+            } finally {
+                setIsLoadingJoinColumns(false);
+            }
+        } else {
+            // No tableUrl provided
+            const updatedJoins = [...joins];
+            updatedJoins[joinIndex].availableColumns = [];
+            toast.error(
+                'Join column URL not configured. Please set the tableUrl or columnUrl property.'
+            );
+            setJoins(updatedJoins);
+            setIsLoadingJoinColumns(false);
+        }
+    };
+
+    // Remove a join
+    const handleRemoveJoin = (index) => {
+        const updatedJoins = [...joins];
+        updatedJoins.splice(index, 1);
+        setJoins(updatedJoins);
+    };
+
+    // Delete a saved report
+    const handleDeleteReport = async (reportId) => {
+        if (!reportId) return;
+
+        setIsLoading(true);
+
+        try {
+            const res = await CustomFetch(
+                `${reportsUrl}/${reportId}`,
+                'DELETE'
+            );
+
+            if (res.data?.success) {
+                toast.success('Report deleted successfully');
+
+                // Refresh saved reports list
+                fetchSavedReports();
+
+                // If the deleted report is currently selected, reset the form
+                if (selectedReport && selectedReport.id === reportId) {
+                    setSelectedReport(null);
+                    setReportName('');
+                    setIsPublic(false);
+                    setSelectedColumns([]);
+                    setJoins([]);
+                }
+            } else {
+                toast.error(
+                    'Failed to delete report: ' +
+                        (res.data?.message || 'Unknown error')
+                );
+            }
+        } catch (error) {
+            console.error('Error deleting report:', error);
+            toast.error('Failed to delete report');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // Export report as CSV or Excel
+    const handleExportReport = async (format = 'csv') => {
+        if (selectedColumns.length === 0) {
+            toast.error('Please select at least one column for your report');
+            return;
+        }
+
+        if (!reportName) {
+            toast.error('Please enter a name for your report');
+            return;
+        }
+
+        setIsLoading(true);
+        const toastId = toast.loading(
+            `Exporting report as ${format.toUpperCase()}...`
+        );
+
+        try {
+            // Prepare query configuration
+            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: [],
+                sorting: [],
+            };
+
+            // Prepare export request data
+            const exportData = {
+                query: queryConfig,
+                format: format,
+            };
+
+            // If we have a selected report, include its ID
+            if (selectedReport && selectedReport.id) {
+                exportData.report_id = selectedReport.id;
+            }
+
+            // Use Download utility for file downloads
+            const res = await Download(
+                '/ajax/reportBuilder/export',
+                'POST',
+                exportData
+            );
+
+            if (res.data instanceof Blob) {
+                // Create a date-based filename if not using a saved report
+                const date = moment().format('YYYYMMDD');
+                const fileName = `${date}_${reportName}.${format}`;
+
+                // Use FileSaver.js to save the file
+                saveAs(res.data, fileName);
+
+                toast.update(toastId, {
+                    render: `Report exported successfully as ${format.toUpperCase()}`,
+                    type: 'success',
+                    isLoading: false,
+                    autoClose: 5000,
+                    closeButton: true,
+                });
+            } else {
+                throw new Error('Invalid response format');
+            }
+        } catch (error) {
+            console.error('Error exporting report:', error);
+            toast.update(toastId, {
+                render: `Failed to export report: ${
+                    error.message || 'Unknown error'
+                }`,
+                type: 'error',
+                isLoading: false,
+                autoClose: 5000,
+                closeButton: true,
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // Fetch saved reports from the API
+    const fetchSavedReports = async () => {
+        setIsLoadingReports(true);
+
+        try {
+            const res = await CustomFetch(reportsUrl, 'GET');
+            const reportsData = res.data?.data || [];
+            setSavedReports(reportsData);
+        } catch (error) {
+            console.error('Error fetching saved reports:', error);
+            toast.error('Failed to load saved reports');
+        } finally {
+            setIsLoadingReports(false);
+        }
+    };
+
+    // Load a saved report
+    const handleLoadReport = async (reportId) => {
+        setIsLoading(true);
+
+        try {
+            const res = await CustomFetch(`${reportsUrl}/${reportId}`, 'GET');
+            const reportData = res.data?.data;
+
+            if (reportData) {
+                setSelectedReport(reportData);
+                setReportName(reportData.label);
+                setIsPublic(reportData.is_public);
+
+                // Load report configuration
+                const detail = reportData.detail || {};
+
+                // Set main table
+                const mainTable = detail.mainTable;
+                if (mainTable) {
+                    setSelectedTable(mainTable);
+                    await fetchTableColumns(mainTable);
+                }
+
+                // Set columns
+                if (detail.columns && Array.isArray(detail.columns)) {
+                    // Map the columns to match our expected format
+                    const formattedColumns = detail.columns.map((col) => ({
+                        table: col.table,
+                        column: col.column,
+                        displayName:
+                            col.alias ||
+                            `${formatName(col.table)}.${formatName(
+                                col.column
+                            )}`,
+                        rawDisplayName: `${col.table}.${col.column}`,
+                        dataType: col.type || 'string',
+                    }));
+                    setSelectedColumns(formattedColumns);
+                }
+
+                // Set joins
+                if (detail.joins && Array.isArray(detail.joins)) {
+                    setJoins(detail.joins);
+                }
+
+                toast.success(
+                    `Report "${reportData.label}" loaded successfully`
+                );
+            } else {
+                toast.error('Failed to load report: Invalid data format');
+            }
+        } catch (error) {
+            console.error('Error loading report:', error);
+            toast.error('Failed to load report');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // Execute a report query
+    const handleExecuteQuery = async (reportId) => {
+        // If a reportId is provided and it's different from the currently selected report,
+        // load that report first
+        if (
+            typeof reportId === 'number' &&
+            (!selectedReport || selectedReport.id !== reportId)
+        ) {
+            try {
+                // First check if the report is already in the savedReports list
+                const reportToLoad = savedReports.find(
+                    (report) => report.id === reportId
+                );
+
+                if (reportToLoad) {
+                    // If we have the report data already, just select it
+                    setSelectedReport(reportToLoad);
+                    setReportName(reportToLoad.label);
+                    setIsPublic(reportToLoad.is_public);
+
+                    // Load report configuration
+                    const detail = reportToLoad.detail || {};
+
+                    // Set main table
+                    const mainTable = detail.mainTable;
+                    if (mainTable) {
+                        setSelectedTable(mainTable);
+                        await fetchTableColumns(mainTable);
+                    }
+
+                    // Set columns
+                    if (detail.columns && Array.isArray(detail.columns)) {
+                        // Map the columns to match our expected format
+                        const formattedColumns = detail.columns.map((col) => ({
+                            table: col.table,
+                            column: col.column,
+                            displayName:
+                                col.alias ||
+                                `${formatName(col.table)}.${formatName(
+                                    col.column
+                                )}`,
+                            rawDisplayName: `${col.table}.${col.column}`,
+                            dataType: col.type || 'string',
+                        }));
+                        setSelectedColumns(formattedColumns);
+                    }
+
+                    // Set joins
+                    if (detail.joins && Array.isArray(detail.joins)) {
+                        setJoins(detail.joins);
+                    }
+
+                    // Wait a moment for state to update
+                    await new Promise((resolve) => setTimeout(resolve, 300));
+                } else {
+                    // If we don't have the report data, fetch it
+                    await handleLoadReport(reportId);
+                    // Wait a moment for state to update
+                    await new Promise((resolve) => setTimeout(resolve, 300));
+                }
+            } catch (error) {
+                console.error('Error loading report before execution:', error);
+                toast.error('Failed to load report for execution');
+                return;
+            }
+        }
+
+        if (selectedColumns.length === 0) {
+            toast.error('Please select at least one column for your report');
+            return;
+        }
+
+        setIsLoading(true);
+        toast.info('Executing query...');
+
+        try {
+            // Prepare query configuration
+            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: [],
+                sorting: [],
+            };
+
+            // Execute query
+            const res = await CustomFetch(executeUrl, 'POST', {
+                query: queryConfig,
+                limit: 100,
+                offset: 0,
+            });
+
+            if (res.data?.success) {
+                setTotalResults(res.data.total || 0);
+                setExecutedSql(res.data.sql || '');
+                setPreviewData(res.data.data || []);
+
+                // Generate columns for the data grid
+                if (res.data.data && res.data.data.length > 0) {
+                    const firstRow = res.data.data[0];
+                    const gridCols = Object.keys(firstRow).map((key) => {
+                        // Check if any value in this column is JSON
+                        const hasJsonValues = res.data.data.some((row) => {
+                            return isJsonValue(row[key]);
+                        });
+
+                        return {
+                            name: key,
+                            header: key,
+                            defaultFlex: 1,
+                            minWidth: hasJsonValues ? 250 : 120,
+                            // Add a custom renderer for JSON values
+                            render: ({ value }) => {
+                                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);
+
+                                        // Create a more compact representation for display
+                                        const formattedJson = JSON.stringify(
+                                            transformedJson,
+                                            null,
+                                            2
+                                        );
+
+                                        // Truncate if too long
+                                        const isTruncated =
+                                            formattedJson.length > 300;
+                                        const displayJson = isTruncated
+                                            ? formattedJson.substring(0, 300) +
+                                              '...\n}'
+                                            : formattedJson;
+
+                                        // Apply syntax highlighting to JSON
+                                        // This function adds CSS classes to different parts of the JSON
+                                        // which are styled in GenericReport.module.scss
+                                        const highlightJson = (json) => {
+                                            // Simple regex-based JSON syntax highlighting
+                                            return (
+                                                json
+                                                    // Highlight keys (before the colon) - blue color
+                                                    .replace(
+                                                        /"([^"]+)"\s*:/g,
+                                                        '"<span class="json-key">$1</span>":'
+                                                    )
+                                                    // Highlight string values - green color
+                                                    .replace(
+                                                        /:\s*"([^"]*)"/g,
+                                                        ': "<span class="json-string">$1</span>"'
+                                                    )
+                                                    // Highlight numeric values - purple color
+                                                    .replace(
+                                                        /:\s*([0-9]+(\.[0-9]+)?)/g,
+                                                        ': <span class="json-number">$1</span>'
+                                                    )
+                                                    // Highlight boolean values - amber color
+                                                    .replace(
+                                                        /:\s*(true|false)/g,
+                                                        ': <span class="json-boolean">$1</span>'
+                                                    )
+                                                    // Highlight null values - red color
+                                                    .replace(
+                                                        /:\s*(null)/g,
+                                                        ': <span class="json-null">$1</span>'
+                                                    )
+                                            );
+                                        };
+
+                                        return (
+                                            <div className={styles.jsonPreview}>
+                                                <pre
+                                                    dangerouslySetInnerHTML={{
+                                                        __html: highlightJson(
+                                                            displayJson
+                                                        ),
+                                                    }}
+                                                />
+                                                {isTruncated && (
+                                                    <div
+                                                        className={
+                                                            styles.jsonTruncated
+                                                        }
+                                                    >
+                                                        (truncated)
+                                                    </div>
+                                                )}
+                                            </div>
+                                        );
+                                    } catch (e) {
+                                        return String(value);
+                                    }
+                                }
+                                return value;
+                            },
+                        };
+                    });
+                    setGridColumns(gridCols);
+                }
+
+                toast.success('Query executed successfully');
+            } else {
+                toast.error(
+                    'Failed to execute query: ' +
+                        (res.data?.message || 'Unknown error')
+                );
+            }
+        } catch (error) {
+            console.error('Error executing query:', error);
+            toast.error('Failed to execute query');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // Save report configuration to the API
+    const handleSaveReport = async () => {
+        if (selectedColumns.length === 0) {
+            toast.error('Please select at least one column for your report');
+            return;
+        }
+
+        if (!reportName) {
+            toast.error('Please enter a name for your report');
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            // Prepare report configuration
+            const reportConfig = {
+                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: [],
+                sorting: [],
+            };
+
+            // Determine if we're updating or creating a new report
+            let url = reportsUrl;
+            let method = 'POST';
+            let data = {
+                label: reportName,
+                detail: reportConfig,
+                is_public: isPublic,
+            };
+
+            if (selectedReport && selectedReport.id) {
+                url = `${reportsUrl}/${selectedReport.id}`;
+                method = 'PUT';
+            }
+
+            // Save report
+            const res = await CustomFetch(url, method, data);
+
+            if (res.data?.success) {
+                toast.success(
+                    `Report "${reportName}" ${
+                        selectedReport ? 'updated' : 'saved'
+                    } successfully`
+                );
+
+                // Refresh saved reports list
+                fetchSavedReports();
+
+                // If it's a new report, update selectedReport
+                if (!selectedReport && res.data.data) {
+                    setSelectedReport(res.data.data);
+                }
+            } else {
+                toast.error(
+                    'Failed to save report: ' +
+                        (res.data?.message || 'Unknown error')
+                );
+            }
+        } catch (error) {
+            console.error('Error saving report:', error);
+            toast.error('Failed to save report');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <>
+            <div className={styles.grid__full}>
+                <div className={styles.crmtitle}>
+                    <h1>Report Builder</h1>
+                    <div className={styles.titleInfo}>
+                        <span>
+                            Create custom reports by selecting tables, columns,
+                            and configuring joins
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div className={styles.grid__subrow}>
+                <div className={styles.grid__subnav}>
+                    <div className={styles.sectionTitle}>Available Tables</div>
+                    <div className={styles.tableList}>
+                        {isLoadingTables ? (
+                            <div className={styles.emptyMessage}>
+                                Loading tables...
+                            </div>
+                        ) : tables && tables.length > 0 ? (
+                            tables.map((table) => (
+                                <div
+                                    key={table.name}
+                                    className={`${styles.tableItem} ${
+                                        selectedTable === table.name
+                                            ? styles.tableItemSelected
+                                            : ''
+                                    }`}
+                                    onClick={() =>
+                                        handleTableSelect(table.name)
+                                    }
+                                >
+                                    {formatName(table.name)}
+                                </div>
+                            ))
+                        ) : (
+                            <div className={styles.emptyMessage}>
+                                No tables available
+                            </div>
+                        )}
+                    </div>
+
+                    {selectedTable && (
+                        <>
+                            <div className={styles.sectionTitle}>
+                                Main Table Columns
+                            </div>
+                            {isLoading ? (
+                                <p className={styles.emptyMessage}>
+                                    Loading columns...
+                                </p>
+                            ) : tableColumns && tableColumns.length > 0 ? (
+                                <div className={styles.columnList}>
+                                    {tableColumns.map((column) => (
+                                        <div
+                                            key={`${selectedTable}-${column.name}`}
+                                            className={styles.columnItem}
+                                            onClick={() =>
+                                                handleColumnSelect(column)
+                                            }
+                                        >
+                                            <input
+                                                type="checkbox"
+                                                checked={selectedColumns.some(
+                                                    (col) =>
+                                                        col.table ===
+                                                            selectedTable &&
+                                                        col.column ===
+                                                            column.name
+                                                )}
+                                                readOnly
+                                            />
+                                            <span>
+                                                {formatName(column.name)}
+                                            </span>
+                                            <small>
+                                                ({column.type || column.label})
+                                            </small>
+                                        </div>
+                                    ))}
+                                </div>
+                            ) : (
+                                <p className={styles.emptyMessage}>
+                                    No columns available for this table.
+                                </p>
+                            )}
+
+                            {/* Joined Tables Columns */}
+                            {joins.length > 0 && (
+                                <>
+                                    <div className={styles.sectionTitle}>
+                                        Joined Tables Columns
+                                    </div>
+                                    {isLoadingJoinColumns ? (
+                                        <p className={styles.emptyMessage}>
+                                            Loading joined table columns...
+                                        </p>
+                                    ) : (
+                                        joins.map((join, joinIndex) =>
+                                            join.targetTable &&
+                                            join.availableColumns &&
+                                            join.availableColumns.length > 0 ? (
+                                                <div
+                                                    key={`join-${joinIndex}`}
+                                                    className={
+                                                        styles.joinedTableSection
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.joinedTableHeader
+                                                        }
+                                                    >
+                                                        {formatName(
+                                                            join.targetTable
+                                                        )}
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            styles.columnList
+                                                        }
+                                                    >
+                                                        {join.availableColumns.map(
+                                                            (column) => (
+                                                                <div
+                                                                    key={`${join.targetTable}-${column.name}`}
+                                                                    className={
+                                                                        styles.columnItem
+                                                                    }
+                                                                    onClick={() =>
+                                                                        handleColumnSelect(
+                                                                            column,
+                                                                            join.targetTable
+                                                                        )
+                                                                    }
+                                                                >
+                                                                    <input
+                                                                        type="checkbox"
+                                                                        checked={selectedColumns.some(
+                                                                            (
+                                                                                col
+                                                                            ) =>
+                                                                                col.table ===
+                                                                                    join.targetTable &&
+                                                                                col.column ===
+                                                                                    column.name
+                                                                        )}
+                                                                        readOnly
+                                                                    />
+                                                                    <span>
+                                                                        {formatName(
+                                                                            column.name
+                                                                        )}
+                                                                    </span>
+                                                                    <small>
+                                                                        (
+                                                                        {column.type ||
+                                                                            column.label}
+                                                                        )
+                                                                    </small>
+                                                                </div>
+                                                            )
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            ) : null
+                                        )
+                                    )}
+                                </>
+                            )}
+                        </>
+                    )}
+                </div>
+
+                <div className={styles.grid__subcontent}>
+                    <div className={styles.reportBuilder}>
+                        <div className={styles.reportSection}>
+                            <div className={styles.formGroup}>
+                                <label htmlFor="reportName">Report Name</label>
+                                <input
+                                    id="reportName"
+                                    type="text"
+                                    className={styles.formControl}
+                                    value={reportName}
+                                    onChange={(e) =>
+                                        setReportName(e.target.value)
+                                    }
+                                    placeholder="Enter a name for your report"
+                                />
+                            </div>
+
+                            <div className={styles.formGroup}>
+                                <div className={styles.checkboxContainer}>
+                                    <input
+                                        id="isPublic"
+                                        type="checkbox"
+                                        checked={isPublic}
+                                        onChange={(e) =>
+                                            setIsPublic(e.target.checked)
+                                        }
+                                    />
+                                    <label htmlFor="isPublic">
+                                        Make report public
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div className={styles.savedReportsSection}>
+                                <div className={styles.sectionHeader}>
+                                    <h3>Saved Reports</h3>
+                                    <button
+                                        className={`${styles.btn} ${styles.btnSmall}`}
+                                        onClick={handleResetForm}
+                                    >
+                                        New Report
+                                    </button>
+                                </div>
+                                {isLoadingReports ? (
+                                    <p className={styles.emptyMessage}>
+                                        Loading reports...
+                                    </p>
+                                ) : savedReports.length > 0 ? (
+                                    <div className={styles.savedReportsList}>
+                                        {savedReports.map((report) => (
+                                            <div
+                                                key={report.id}
+                                                className={`${
+                                                    styles.savedReportItem
+                                                } ${
+                                                    selectedReport &&
+                                                    selectedReport.id ===
+                                                        report.id
+                                                        ? styles.selectedReportItem
+                                                        : ''
+                                                }`}
+                                            >
+                                                <div
+                                                    className={
+                                                        styles.reportInfo
+                                                    }
+                                                    onClick={() =>
+                                                        handleLoadReport(
+                                                            report.id
+                                                        )
+                                                    }
+                                                >
+                                                    <span
+                                                        className={
+                                                            styles.reportName
+                                                        }
+                                                    >
+                                                        {report.label}
+                                                    </span>
+                                                    {report.is_public && (
+                                                        <span
+                                                            className={
+                                                                styles.publicBadge
+                                                            }
+                                                        >
+                                                            Public
+                                                        </span>
+                                                    )}
+                                                </div>
+                                                <div
+                                                    className={
+                                                        styles.reportActions
+                                                    }
+                                                >
+                                                    <button
+                                                        className={
+                                                            styles.actionBtn
+                                                        }
+                                                        onClick={(e) => {
+                                                            e.stopPropagation(); // Prevent triggering the load report action
+                                                            handleExecuteQuery(
+                                                                report.id
+                                                            );
+                                                        }}
+                                                        title="Execute Report"
+                                                    >
+                                                        ▶
+                                                    </button>
+                                                    <button
+                                                        className={`${styles.actionBtn} ${styles.deleteBtn}`}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation(); // Prevent triggering the load report action
+                                                            handleDeleteReport(
+                                                                report.id
+                                                            );
+                                                        }}
+                                                        title="Delete Report"
+                                                    >
+                                                        ×
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                ) : (
+                                    <p className={styles.emptyMessage}>
+                                        No saved reports found.
+                                    </p>
+                                )}
+                            </div>
+
+                            <h3>Selected Columns</h3>
+                            {selectedColumns.length > 0 ? (
+                                <div className={styles.selectedColumns}>
+                                    {selectedColumns.map((column, index) => (
+                                        <div
+                                            key={index}
+                                            className={`${
+                                                styles.selectedColumnItem
+                                            } ${
+                                                draggedItemIndex === index
+                                                    ? styles.dragging
+                                                    : ''
+                                            }`}
+                                            draggable
+                                            onDragStart={(e) =>
+                                                handleDragStart(e, index)
+                                            }
+                                            onDragEnd={handleDragEnd}
+                                            onDragOver={handleDragOver}
+                                            onDragLeave={handleDragLeave}
+                                            onDrop={(e) => handleDrop(e, index)}
+                                        >
+                                            <div
+                                                className={styles.dragHandle}
+                                                title="Drag to reorder"
+                                            >
+                                                ⋮⋮
+                                            </div>
+                                            <span>{column.displayName}</span>
+                                            <div
+                                                className={styles.columnActions}
+                                            >
+                                                <button
+                                                    className={styles.removeBtn}
+                                                    onClick={() =>
+                                                        handleRemoveColumn(
+                                                            index
+                                                        )
+                                                    }
+                                                    aria-label="Remove column"
+                                                    title="Remove"
+                                                >
+                                                    <CircleX size={16} />
+                                                </button>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            ) : (
+                                <p className={styles.emptyMessage}>
+                                    No columns selected. Select a table and its
+                                    columns from the left panel.
+                                </p>
+                            )}
+                        </div>
+
+                        {joins.length > 0 && (
+                            <div className={styles.reportSection}>
+                                <h3>Join Tables</h3>
+                                {selectedTable &&
+                                    joins.map((join, index) => (
+                                        <div
+                                            key={index}
+                                            className={styles.joinSection}
+                                        >
+                                            <div className={styles.joinHeader}>
+                                                <h4>
+                                                    {join.targetTable
+                                                        ? `${formatName(
+                                                              join.sourceTable
+                                                          )} ${join.joinType.replace(
+                                                              ' JOIN',
+                                                              ''
+                                                          )} ${formatName(
+                                                              join.targetTable
+                                                          )}`
+                                                        : `Join #${index + 1}`}
+                                                </h4>
+                                                <button
+                                                    className={
+                                                        styles.removeJoinBtn
+                                                    }
+                                                    onClick={() =>
+                                                        handleRemoveJoin(index)
+                                                    }
+                                                    title="Remove Join"
+                                                >
+                                                    ×
+                                                </button>
+                                            </div>
+
+                                            <div className={styles.joinGrid}>
+                                                <div
+                                                    className={
+                                                        styles.joinGridColumn
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.joinField
+                                                        }
+                                                    >
+                                                        <label>
+                                                            Join Type:
+                                                        </label>
+                                                        <select
+                                                            className={
+                                                                styles.selectControl
+                                                            }
+                                                            value={
+                                                                join.joinType
+                                                            }
+                                                            onChange={(e) =>
+                                                                handleJoinChange(
+                                                                    index,
+                                                                    'joinType',
+                                                                    e.target
+                                                                        .value
+                                                                )
+                                                            }
+                                                        >
+                                                            <option value="INNER JOIN">
+                                                                INNER JOIN
+                                                            </option>
+                                                            <option value="LEFT JOIN">
+                                                                LEFT JOIN
+                                                            </option>
+                                                            <option value="RIGHT JOIN">
+                                                                RIGHT JOIN
+                                                            </option>
+                                                            <option value="FULL JOIN">
+                                                                FULL JOIN
+                                                            </option>
+                                                        </select>
+                                                    </div>
+
+                                                    <div
+                                                        className={
+                                                            styles.joinField
+                                                        }
+                                                    >
+                                                        <label>
+                                                            Source Table:
+                                                        </label>
+                                                        <input
+                                                            type="text"
+                                                            className={
+                                                                styles.formControl
+                                                            }
+                                                            value={formatName(
+                                                                join.sourceTable
+                                                            )}
+                                                            readOnly
+                                                        />
+                                                    </div>
+
+                                                    <div
+                                                        className={
+                                                            styles.joinField
+                                                        }
+                                                    >
+                                                        <label>
+                                                            Source Column:
+                                                        </label>
+                                                        <select
+                                                            className={
+                                                                styles.selectControl
+                                                            }
+                                                            value={
+                                                                join.sourceColumn
+                                                            }
+                                                            onChange={(e) =>
+                                                                handleJoinChange(
+                                                                    index,
+                                                                    'sourceColumn',
+                                                                    e.target
+                                                                        .value
+                                                                )
+                                                            }
+                                                        >
+                                                            <option value="">
+                                                                Select Column
+                                                            </option>
+                                                            {tableColumns.map(
+                                                                (column) => (
+                                                                    <option
+                                                                        key={
+                                                                            column.name
+                                                                        }
+                                                                        value={
+                                                                            column.name
+                                                                        }
+                                                                    >
+                                                                        {formatName(
+                                                                            column.name
+                                                                        )}
+                                                                    </option>
+                                                                )
+                                                            )}
+                                                        </select>
+                                                    </div>
+                                                </div>
+
+                                                <div
+                                                    className={
+                                                        styles.joinGridColumn
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.joinField
+                                                        }
+                                                    >
+                                                        <label>
+                                                            Target Table:
+                                                        </label>
+                                                        <select
+                                                            className={
+                                                                styles.selectControl
+                                                            }
+                                                            value={
+                                                                join.targetTable
+                                                            }
+                                                            onChange={(e) =>
+                                                                handleJoinChange(
+                                                                    index,
+                                                                    'targetTable',
+                                                                    e.target
+                                                                        .value
+                                                                )
+                                                            }
+                                                        >
+                                                            <option value="">
+                                                                Select Table
+                                                            </option>
+                                                            {availableTables.map(
+                                                                (table) => (
+                                                                    <option
+                                                                        key={
+                                                                            table.name
+                                                                        }
+                                                                        value={
+                                                                            table.name
+                                                                        }
+                                                                    >
+                                                                        {formatName(
+                                                                            table.name
+                                                                        )}
+                                                                    </option>
+                                                                )
+                                                            )}
+                                                        </select>
+                                                    </div>
+
+                                                    {join.targetTable &&
+                                                        join.availableColumns && (
+                                                            <div
+                                                                className={
+                                                                    styles.joinField
+                                                                }
+                                                            >
+                                                                <label>
+                                                                    Target
+                                                                    Column:
+                                                                </label>
+                                                                <select
+                                                                    className={
+                                                                        styles.selectControl
+                                                                    }
+                                                                    value={
+                                                                        join.targetColumn
+                                                                    }
+                                                                    onChange={(
+                                                                        e
+                                                                    ) =>
+                                                                        handleJoinChange(
+                                                                            index,
+                                                                            'targetColumn',
+                                                                            e
+                                                                                .target
+                                                                                .value
+                                                                        )
+                                                                    }
+                                                                >
+                                                                    <option value="">
+                                                                        Select
+                                                                        Column
+                                                                    </option>
+                                                                    {join.availableColumns.map(
+                                                                        (
+                                                                            column
+                                                                        ) => (
+                                                                            <option
+                                                                                key={
+                                                                                    column.name
+                                                                                }
+                                                                                value={
+                                                                                    column.name
+                                                                                }
+                                                                            >
+                                                                                {formatName(
+                                                                                    column.name
+                                                                                )}
+                                                                            </option>
+                                                                        )
+                                                                    )}
+                                                                </select>
+                                                            </div>
+                                                        )}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
+                            </div>
+                        )}
+
+                        <div className={styles.addJoinButtonContainer}>
+                            {selectedTable && (
+                                <>
+                                    <button
+                                        className={styles.btn}
+                                        onClick={handleAddJoin}
+                                    >
+                                        Add Manual Relationship
+                                    </button>
+
+                                    {/* Main table suggested relationships */}
+                                    {suggestedJoins['main'] &&
+                                        suggestedJoins['main'].length > 0 && (
+                                            <div
+                                                className={
+                                                    styles.suggestedJoinsSection
+                                                }
+                                            >
+                                                <h4>
+                                                    Suggested Relationships for{' '}
+                                                    {formatName(selectedTable)}
+                                                </h4>
+                                                <p className={styles.helpText}>
+                                                    Auto-detected based on
+                                                    database structure.
+                                                    <span
+                                                        className={
+                                                            styles.ratingInfo
+                                                        }
+                                                    >
+                                                        ⭐⭐⭐ = High confidence
+                                                        | ⭐⭐ = Medium
+                                                        confidence | ⭐ = Low
+                                                        confidence
+                                                    </span>
+                                                </p>
+                                                <div
+                                                    className={
+                                                        styles.suggestedJoinsList
+                                                    }
+                                                >
+                                                    {suggestedJoins['main'].map(
+                                                        (join, index) => (
+                                                            <div
+                                                                key={index}
+                                                                className={
+                                                                    styles.suggestedJoinItem
+                                                                }
+                                                                title={formatRelationshipDescription(
+                                                                    join.description,
+                                                                    false,
+                                                                    join
+                                                                )}
+                                                            >
+                                                                <div
+                                                                    className={
+                                                                        styles.suggestedJoinInfo
+                                                                    }
+                                                                >
+                                                                    <span
+                                                                        className={
+                                                                            styles.suggestedJoinDescription
+                                                                        }
+                                                                    >
+                                                                        {formatRelationshipDescription(
+                                                                            join.description,
+                                                                            true,
+                                                                            join
+                                                                        )}
+                                                                    </span>
+                                                                    <span
+                                                                        className={
+                                                                            styles.confidenceBadge
+                                                                        }
+                                                                    >
+                                                                        {join.confidence ===
+                                                                        'high'
+                                                                            ? '⭐⭐⭐'
+                                                                            : join.confidence ===
+                                                                              'medium'
+                                                                            ? '⭐⭐'
+                                                                            : '⭐'}
+                                                                    </span>
+                                                                </div>
+                                                                <button
+                                                                    className={
+                                                                        styles.addSuggestedJoinBtn
+                                                                    }
+                                                                    onClick={() =>
+                                                                        handleAddSuggestedJoin(
+                                                                            join
+                                                                        )
+                                                                    }
+                                                                    title="Add this relationship"
+                                                                >
+                                                                    Add
+                                                                </button>
+                                                            </div>
+                                                        )
+                                                    )}
+                                                </div>
+                                            </div>
+                                        )}
+
+                                    {isLoadingSuggestedJoins['main'] && (
+                                        <div className={styles.loadingMessage}>
+                                            Loading suggested relationships for{' '}
+                                            {formatName(selectedTable)}...
+                                        </div>
+                                    )}
+
+                                    {/* Joined tables suggested relationships */}
+                                    {joins.map(
+                                        (join, joinIndex) =>
+                                            join.targetTable && (
+                                                <div
+                                                    key={`suggested-joins-${joinIndex}`}
+                                                >
+                                                    {suggestedJoins[
+                                                        join.targetTable
+                                                    ] &&
+                                                        suggestedJoins[
+                                                            join.targetTable
+                                                        ].length > 0 && (
+                                                            <div
+                                                                className={
+                                                                    styles.suggestedJoinsSection
+                                                                }
+                                                            >
+                                                                <h4>
+                                                                    Suggested
+                                                                    Relationships
+                                                                    for{' '}
+                                                                    {formatName(
+                                                                        join.targetTable
+                                                                    )}
+                                                                </h4>
+                                                                <div
+                                                                    className={
+                                                                        styles.suggestedJoinsList
+                                                                    }
+                                                                >
+                                                                    {suggestedJoins[
+                                                                        join
+                                                                            .targetTable
+                                                                    ].map(
+                                                                        (
+                                                                            suggestedJoin,
+                                                                            index
+                                                                        ) => (
+                                                                            <div
+                                                                                key={
+                                                                                    index
+                                                                                }
+                                                                                className={
+                                                                                    styles.suggestedJoinItem
+                                                                                }
+                                                                                title={formatRelationshipDescription(
+                                                                                    suggestedJoin.description,
+                                                                                    false,
+                                                                                    suggestedJoin
+                                                                                )}
+                                                                            >
+                                                                                <div
+                                                                                    className={
+                                                                                        styles.suggestedJoinInfo
+                                                                                    }
+                                                                                >
+                                                                                    <span
+                                                                                        className={
+                                                                                            styles.suggestedJoinDescription
+                                                                                        }
+                                                                                    >
+                                                                                        {formatRelationshipDescription(
+                                                                                            suggestedJoin.description,
+                                                                                            true,
+                                                                                            suggestedJoin
+                                                                                        )}
+                                                                                    </span>
+                                                                                    <span
+                                                                                        className={
+                                                                                            styles.confidenceBadge
+                                                                                        }
+                                                                                    >
+                                                                                        {suggestedJoin.confidence ===
+                                                                                        'high'
+                                                                                            ? '⭐⭐⭐'
+                                                                                            : suggestedJoin.confidence ===
+                                                                                              'medium'
+                                                                                            ? '⭐⭐'
+                                                                                            : '⭐'}
+                                                                                    </span>
+                                                                                </div>
+                                                                                <button
+                                                                                    className={
+                                                                                        styles.addSuggestedJoinBtn
+                                                                                    }
+                                                                                    onClick={() =>
+                                                                                        handleAddSuggestedJoin(
+                                                                                            suggestedJoin
+                                                                                        )
+                                                                                    }
+                                                                                    title="Add this relationship"
+                                                                                >
+                                                                                    Add
+                                                                                </button>
+                                                                            </div>
+                                                                        )
+                                                                    )}
+                                                                </div>
+                                                            </div>
+                                                        )}
+
+                                                    {isLoadingSuggestedJoins[
+                                                        join.targetTable
+                                                    ] && (
+                                                        <div
+                                                            className={
+                                                                styles.loadingMessage
+                                                            }
+                                                        >
+                                                            Loading suggested
+                                                            relationships for{' '}
+                                                            {formatName(
+                                                                join.targetTable
+                                                            )}
+                                                            ...
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            )
+                                    )}
+                                </>
+                            )}
+                        </div>
+
+                        <div className={styles.actionButtons}>
+                            <button
+                                className={styles.btn}
+                                onClick={handleExecuteQuery}
+                                disabled={
+                                    isLoading || selectedColumns.length === 0
+                                }
+                            >
+                                Execute Query
+                            </button>
+
+                            <button
+                                className={`${styles.btn} ${styles.btnSecondary}`}
+                                onClick={() => handleExportReport('csv')}
+                                disabled={
+                                    isLoading ||
+                                    selectedColumns.length === 0 ||
+                                    !reportName
+                                }
+                            >
+                                Export as CSV
+                            </button>
+                            <button
+                                className={`${styles.btn} ${styles.btnSecondary}`}
+                                onClick={() => handleExportReport('xlsx')}
+                                disabled={
+                                    isLoading ||
+                                    selectedColumns.length === 0 ||
+                                    !reportName
+                                }
+                            >
+                                Export as Excel
+                            </button>
+                            <button
+                                className={`${styles.btn} ${styles.btnPrimary}`}
+                                onClick={handleSaveReport}
+                                disabled={
+                                    isLoading ||
+                                    selectedColumns.length === 0 ||
+                                    !reportName
+                                }
+                            >
+                                {selectedReport
+                                    ? 'Update Report'
+                                    : 'Save Report'}
+                            </button>
+                            {selectedReport && (
+                                <button
+                                    className={`${styles.btn} ${styles.btnDanger}`}
+                                    onClick={() =>
+                                        handleDeleteReport(selectedReport.id)
+                                    }
+                                    disabled={isLoading}
+                                >
+                                    Delete Report
+                                </button>
+                            )}
+                        </div>
+                        {previewData.length > 0 && (
+                            <div className={styles.previewSection}>
+                                <h3>
+                                    Report Preview{' '}
+                                    {totalResults > 0 &&
+                                        `(${previewData.length} of ${totalResults} results)`}
+                                </h3>
+                                <ReactDataGrid
+                                    idProperty="id"
+                                    columns={gridColumns}
+                                    dataSource={previewData}
+                                    style={{ minHeight: 600 }}
+                                    pagination
+                                    limit={15}
+                                    rowHeight={null}
+                                    estimatedRowHeight={60}
+                                    showCellBorders="horizontal"
+                                    showZebraRows
+                                />
+                            </div>
+                        )}
+
+                        {executedSql && (
+                            <div className={styles.sqlSection}>
+                                <h3>Executed SQL</h3>
+                                <div className={styles.sqlContainer}>
+                                    <pre>{executedSql}</pre>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default GenericReport;