@visns-studio/visns-components 5.10.6 → 5.10.8

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

@@ -22,8 +22,11 @@ import {
     Money,
     ShippingBoxV1,
     SettingsVertical,
+    TriangleAlert,
     Cart,
     Newspaper,
+    ChevronDown,
+    Rss,
 } from 'akar-icons';
 import CustomFetch from '../Fetch';
 import Download from '../Download';
@@ -121,6 +124,300 @@ const getTableDescription = (tableName, definition) => {
     return `Table: ${tableName}`;
 };
 
+/* This function has been moved inside renderFilters() to access state variables
+const getSmartSuggestions = (selectedTable, joins, tableColumns, definition) => {
+    const suggestions = {
+        sorting: [],
+        filters: []
+    };
+
+    if (!selectedTable || !tableColumns) return suggestions;
+
+    // Get table display name for better suggestions
+    const tableDisplayName = getTableDisplayName(selectedTable, definition);
+    
+    // Define smart patterns based on table types and common business logic
+    const tablePatterns = {
+        // User/Client related tables
+        users: { priority: ['name', 'created_at', 'updated_at', 'email'], filters: ['active', 'status', 'created_at'] },
+        clients: { priority: ['name', 'created_at', 'updated_at', 'email'], filters: ['active', 'status', 'created_at'] },
+        contacts: { priority: ['name', 'email', 'created_at'], filters: ['active', 'client_id'] },
+        
+        // Project/Lead related tables
+        leads: { priority: ['created_at', 'updated_at', 'name', 'status'], filters: ['status', 'source', 'likelihood', 'created_at'] },
+        projects: { priority: ['created_at', 'deadline', 'name', 'status'], filters: ['status', 'priority', 'created_at'] },
+        surveys: { priority: ['created_at', 'updated_at', 'status'], filters: ['status', 'type', 'created_at'] },
+        
+        // Location related tables
+        sites: { priority: ['name', 'address', 'created_at'], filters: ['active', 'state', 'client_id'] },
+        locations: { priority: ['name', 'address', 'created_at'], filters: ['active', 'state'] },
+        
+        // Reference/lookup tables
+        industries: { priority: ['name', 'id'], filters: [] },
+        sources: { priority: ['name', 'id'], filters: ['active'] },
+        actions: { priority: ['name', 'priority'], filters: ['active'] },
+        tags: { priority: ['name', 'created_at'], filters: ['active'] },
+        
+        // Document/content tables
+        documents: { priority: ['created_at', 'name', 'type'], filters: ['type', 'status', 'created_at'] },
+        notes: { priority: ['created_at', 'updated_at'], filters: ['created_at', 'user_id'] },
+        
+        // Transactional tables
+        bookings: { priority: ['date', 'created_at', 'status'], filters: ['status', 'date', 'facility_id'] },
+        facilities: { priority: ['name', 'type', 'rate'], filters: ['type', 'available'] },
+    };
+
+    // Find matching pattern for current table
+    let pattern = null;
+    const lowerTableName = selectedTable.toLowerCase();
+    
+    // Direct match
+    if (tablePatterns[lowerTableName]) {
+        pattern = tablePatterns[lowerTableName];
+    } else {
+        // Partial match (e.g., client_notes matches clients pattern)
+        for (const [key, value] of Object.entries(tablePatterns)) {
+            if (lowerTableName.includes(key) || key.includes(lowerTableName)) {
+                pattern = value;
+                break;
+            }
+        }
+    }
+
+    // Generate sorting suggestions
+    if (pattern) {
+        // Use pattern-based priorities
+        pattern.priority.forEach((columnName, index) => {
+            const column = tableColumns.find(col => 
+                col.name.toLowerCase() === columnName.toLowerCase() ||
+                col.name.toLowerCase().includes(columnName.toLowerCase())
+            );
+            if (column) {
+                suggestions.sorting.push({
+                    table: selectedTable,
+                    column: column.name,
+                    direction: columnName.includes('created_at') || columnName.includes('updated_at') || columnName.includes('date') ? 'DESC' : 'ASC',
+                    priority: index + 1,
+                    reason: `Common sorting for ${tableDisplayName}`
+                });
+            }
+        });
+    } else {
+        // Fallback: Common column patterns
+        const commonSortColumns = [
+            { patterns: ['created_at', 'created'], direction: 'DESC', reason: 'Most recent first' },
+            { patterns: ['updated_at', 'updated', 'modified'], direction: 'DESC', reason: 'Recently updated first' },
+            { patterns: ['name', 'title', 'label'], direction: 'ASC', reason: 'Alphabetical order' },
+            { patterns: ['date', 'due_date', 'deadline'], direction: 'DESC', reason: 'Latest dates first' },
+            { patterns: ['priority', 'order', 'sequence'], direction: 'ASC', reason: 'By priority' },
+            { patterns: ['status'], direction: 'ASC', reason: 'By status' }
+        ];
+
+        commonSortColumns.forEach((sortOption, index) => {
+            const column = tableColumns.find(col => 
+                sortOption.patterns.some(pattern => 
+                    col.name.toLowerCase().includes(pattern)
+                )
+            );
+            if (column) {
+                suggestions.sorting.push({
+                    table: selectedTable,
+                    column: column.name,
+                    direction: sortOption.direction,
+                    priority: index + 1,
+                    reason: sortOption.reason
+                });
+            }
+        });
+    }
+
+    // Generate filter suggestions
+    if (pattern) {
+        pattern.filters.forEach(columnName => {
+            const column = tableColumns.find(col => 
+                col.name.toLowerCase() === columnName.toLowerCase() ||
+                col.name.toLowerCase().includes(columnName.toLowerCase())
+            );
+            if (column) {
+                // Determine appropriate filter based on column type and name
+                let filterType = 'equals';
+                let suggestedValue = '';
+                let reason = `Filter by ${formatName(column.name)}`;
+
+                if (column.name.toLowerCase().includes('status')) {
+                    suggestedValue = 'active';
+                    reason = 'Show only active records';
+                } else if (column.name.toLowerCase().includes('created_at')) {
+                    filterType = 'date_range';
+                    suggestedValue = 'last_30_days';
+                    reason = 'Recent records (last 30 days)';
+                } else if (column.name.toLowerCase().includes('active')) {
+                    suggestedValue = '1';
+                    reason = 'Show only active records';
+                }
+
+                suggestions.filters.push({
+                    table: selectedTable,
+                    column: column.name,
+                    operator: filterType,
+                    value: suggestedValue,
+                    reason: reason
+                });
+            }
+        });
+    }
+
+    // Add relationship-based suggestions
+    joins.forEach(join => {
+        if (join.availableColumns && join.availableColumns.length > 0) {
+            // Add sorting suggestions from joined tables
+            const joinTableName = join.targetTable.toLowerCase();
+            if (tablePatterns[joinTableName]) {
+                const joinPattern = tablePatterns[joinTableName];
+                joinPattern.priority.slice(0, 2).forEach((columnName, index) => {
+                    const column = join.availableColumns.find(col => 
+                        col.name.toLowerCase().includes(columnName.toLowerCase())
+                    );
+                    if (column) {
+                        suggestions.sorting.push({
+                            table: join.targetTable,
+                            column: column.name,
+                            direction: columnName.includes('created_at') || columnName.includes('date') ? 'DESC' : 'ASC',
+                            priority: suggestions.sorting.length + index + 1,
+                            reason: `Sort by ${getSmartRelationshipName(join.targetTable, definition)}`
+                        });
+                    }
+                });
+            }
+        }
+    });
+
+    // Limit suggestions to top 3-4 items each
+    suggestions.sorting = suggestions.sorting.slice(0, 4);
+    suggestions.filters = suggestions.filters.slice(0, 3);
+
+    // Combine all suggestions into a single array
+    const allSuggestions = [...suggestions.sorting, ...suggestions.filters];
+
+    // Check which suggestions are already applied
+    const enhancedSuggestions = allSuggestions.map(suggestion => {
+        let alreadyApplied = false;
+        
+        if (suggestion.type === 'sorting') {
+            // Check if this sort criterion already exists
+            alreadyApplied = sortCriteria.some(
+                criteria => criteria.table === suggestion.table && 
+                           criteria.column === suggestion.column &&
+                           criteria.direction === suggestion.direction
+            );
+        } else if (suggestion.type === 'filter') {
+            // Check if this filter already exists in any group
+            alreadyApplied = filterCriteria.groups && filterCriteria.groups.some(group =>
+                group.filters.some(filter =>
+                    filter.table === suggestion.table &&
+                    filter.column === suggestion.column &&
+                    filter.operator === suggestion.operator &&
+                    filter.value === suggestion.value
+                )
+            );
+        }
+        
+        return {
+            ...suggestion,
+            alreadyApplied
+        };
+    });
+
+    // Return prioritized suggestions (max 6-8 for clean interface)
+    return enhancedSuggestions.slice(0, 8);
+};
+*/
+
+// Smart naming for suggested relationships
+const getSmartRelationshipName = (tableName, definition) => {
+    // First try to get the defined label
+    const definedName = getTableDisplayName(tableName, definition);
+    if (definedName !== formatName(tableName)) {
+        return definedName;
+    }
+
+    // Smart mapping for common relationship patterns
+    const smartMappings = {
+        // Handle client_* tables by using the User label from clients table
+        client_agreements: () => {
+            const clientLabel = getTableDisplayName('clients', definition);
+            return `${clientLabel} Agreements`;
+        },
+        client_insurances: () => {
+            const clientLabel = getTableDisplayName('clients', definition);
+            return `${clientLabel} Insurances`;
+        },
+        client_notes: () => {
+            const clientLabel = getTableDisplayName('clients', definition);
+            return `${clientLabel} Notes`;
+        },
+        client_documents: () => {
+            const clientLabel = getTableDisplayName('clients', definition);
+            return `${clientLabel} Documents`;
+        },
+        client_contracts: () => {
+            const clientLabel = getTableDisplayName('clients', definition);
+            return `${clientLabel} Contracts`;
+        },
+        // Handle other common patterns
+        user_permissions: () => {
+            const clientLabel = getTableDisplayName('clients', definition);
+            return `${clientLabel} Permissions`;
+        },
+        contact_notes: 'Contact Notes',
+        site_documents: () => {
+            const siteLabel = getTableDisplayName('sites', definition);
+            return `${siteLabel} Documents`;
+        },
+        lead_notes: () => {
+            const leadLabel = getTableDisplayName('leads', definition);
+            return `${leadLabel} Notes`;
+        },
+        project_documents: 'Project Documents',
+        survey_responses: 'Survey Responses',
+        // Add more patterns as needed
+    };
+
+    // Check if we have a smart mapping for this table
+    if (smartMappings[tableName]) {
+        const mapping = smartMappings[tableName];
+        return typeof mapping === 'function' ? mapping() : mapping;
+    }
+
+    // If no smart mapping, try to detect patterns and apply main table label
+    if (tableName.includes('client_') || tableName.includes('clients_')) {
+        const clientLabel = getTableDisplayName('clients', definition);
+        const suffix = tableName.replace(/^clients?_/, '');
+        return `${clientLabel} ${formatName(suffix)}`;
+    }
+
+    if (tableName.includes('contact_') || tableName.includes('contacts_')) {
+        const contactLabel = getTableDisplayName('contacts', definition);
+        const suffix = tableName.replace(/^contacts?_/, '');
+        return `${contactLabel} ${formatName(suffix)}`;
+    }
+
+    if (tableName.includes('site_') || tableName.includes('sites_')) {
+        const siteLabel = getTableDisplayName('sites', definition);
+        const suffix = tableName.replace(/^sites?_/, '');
+        return `${siteLabel} ${formatName(suffix)}`;
+    }
+
+    if (tableName.includes('lead_') || tableName.includes('leads_')) {
+        const leadLabel = getTableDisplayName('leads', definition);
+        const suffix = tableName.replace(/^leads?_/, '');
+        return `${leadLabel} ${formatName(suffix)}`;
+    }
+
+    // Fallback to formatted name
+    return formatName(tableName);
+};
+
 // Utility function to format names from camelCase or snake_case to user-friendly format
 const formatName = (name) => {
     if (!name) return '';
@@ -776,9 +1073,9 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
     const [loadedReportId, setLoadedReportId] = useState(null); // Track loaded report for overwrite functionality
     const [isLoadingReports, setIsLoadingReports] = useState(false);
 
-    // State for suggested joins
-    const [suggestedJoins, setSuggestedJoins] = useState({});
-    const [isLoadingSuggestedJoins, setIsLoadingSuggestedJoins] = useState({});
+    // State for detected joins
+    const [detectedJoins, setDetectedJoins] = useState({});
+    const [isLoadingDetectedJoins, setIsLoadingDetectedJoins] = useState({});
 
     // State for sorting and filtering
     const [sortCriteria, setSortCriteria] = useState([]);
@@ -820,7 +1117,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
     const {
         reportsUrl = '/ajax/reportBuilder/reports',
         executeUrl = '/ajax/reportBuilder/execute',
-        suggestedJoinsUrl = '/ajax/reportBuilder/getSuggestedJoins',
+        detectedJoinsUrl = '/ajax/reportBuilder/getSuggestedJoins',
         exportUrl = '/ajax/reportBuilder/export',
     } = setting;
 
@@ -883,9 +1180,9 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
     useEffect(() => {
         if (selectedTable) {
             fetchTableColumns(selectedTable);
-            fetchSuggestedJoins(selectedTable);
+            fetchDetectedJoins(selectedTable);
         }
-    }, [selectedTable, columnUrl, suggestedJoinsUrl]);
+    }, [selectedTable, columnUrl, detectedJoinsUrl]);
 
     // Auto-select common columns when user reaches the columns step
     useEffect(() => {
@@ -1236,26 +1533,26 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         }
     };
 
-    // Fetch suggested joins for a table
-    const fetchSuggestedJoins = async (tableName) => {
-        if (!tableName || !suggestedJoinsUrl) {
+    // Fetch detected joins for a table
+    const fetchDetectedJoins = async (tableName) => {
+        if (!tableName || !detectedJoinsUrl) {
             console.warn(
-                'Missing tableName or suggestedJoinsUrl for fetchSuggestedJoins'
+                'Missing tableName or detectedJoinsUrl for fetchDetectedJoins'
             );
             return;
         }
 
-        setIsLoadingSuggestedJoins({
-            ...isLoadingSuggestedJoins,
+        setIsLoadingDetectedJoins({
+            ...isLoadingDetectedJoins,
             [tableName]: true,
         });
 
         try {
-            const result = await CustomFetch(suggestedJoinsUrl, 'POST', {
+            const result = await CustomFetch(detectedJoinsUrl, 'POST', {
                 table: tableName,
             });
 
-            console.log('Suggested joins API response:', result); // Debug log
+            console.log('Detected joins API response:', result); // Debug log
 
             if (result.error) {
                 toast.error(result.error);
@@ -1296,34 +1593,34 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                     });
 
                     console.log(
-                        `Found ${filteredJoins.length} suggested joins for ${tableName}:`,
+                        `Found ${filteredJoins.length} detected joins for ${tableName}:`,
                         filteredJoins
                     );
 
-                    setSuggestedJoins({
-                        ...suggestedJoins,
+                    setDetectedJoins({
+                        ...detectedJoins,
                         [tableName]: filteredJoins,
                     });
                 } else {
                     console.warn(
-                        'No valid suggested joins found or invalid response format:',
+                        'No valid detected joins found or invalid response format:',
                         result
                     );
-                    setSuggestedJoins({
-                        ...suggestedJoins,
+                    setDetectedJoins({
+                        ...detectedJoins,
                         [tableName]: [],
                     });
                 }
             }
         } catch (error) {
-            console.error('Error fetching suggested joins:', error);
-            setSuggestedJoins({
-                ...suggestedJoins,
+            console.error('Error fetching detected joins:', error);
+            setDetectedJoins({
+                ...detectedJoins,
                 [tableName]: [],
             });
         } finally {
-            setIsLoadingSuggestedJoins({
-                ...isLoadingSuggestedJoins,
+            setIsLoadingDetectedJoins({
+                ...isLoadingDetectedJoins,
                 [tableName]: false,
             });
         }
@@ -1446,12 +1743,35 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             } else {
                 // Handle the response format similar to fetchTableColumns
                 let columnsData = [];
-                if (result.data?.success && result.data.data) {
+                
+                if (result.data?.success && result.data?.data?.columns) {
+                    // Primary format: {"success":true,"data":{"table":"contacts_tags","columns":[...]}}
+                    columnsData = result.data.data.columns;
+                } else if (result.columns) {
+                    // Direct format: {"columns": [...]}
+                    columnsData = result.columns;
+                } else if (result.data?.columns) {
+                    // Alternative format: {"data": {"columns": [...]}}
+                    columnsData = result.data.columns;
+                } else if (result.data?.success && result.data.data) {
+                    // Legacy format
                     columnsData = result.data.data;
                 } else if (Array.isArray(result.data)) {
                     columnsData = result.data;
                 } else if (Array.isArray(result)) {
                     columnsData = result;
+                } else {
+                    // Fallback formats
+                    const fallback = result.data?.data || result.data;
+                    if (Array.isArray(fallback)) {
+                        columnsData = fallback;
+                    }
+                }
+                
+                // Ensure columnsData is always an array
+                if (!Array.isArray(columnsData)) {
+                    console.error(`Invalid columns data format for ${type} table:`, result);
+                    columnsData = [];
                 }
 
                 console.log(
@@ -1465,6 +1785,11 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             }
         } catch (error) {
             console.error(`Error fetching ${type} columns:`, error);
+            // Ensure state remains consistent even on error
+            setManualJoinColumns((prev) => ({
+                ...prev,
+                [type]: [],
+            }));
         }
     };
 
@@ -1488,10 +1813,17 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             targetColumn: manualJoin.targetColumn,
             joinType: manualJoin.joinType,
             isManual: true,
+            availableColumns: [], // Add columns array like suggested relationships
         };
 
         setJoins([...joins, newJoin]);
 
+        // Fetch columns for the joined table (same as suggested relationships)
+        if (!availableTables.includes(manualJoin.targetTable)) {
+            setAvailableTables([...availableTables, manualJoin.targetTable]);
+            fetchJoinColumns(manualJoin.targetTable, joins.length); // Use current joins.length as index
+        }
+
         // Reset form and hide it
         setManualJoin({
             sourceTable: '',
@@ -1513,7 +1845,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         setJoins([]);
         setAvailableTables([tableName]);
         fetchTableColumns(tableName);
-        fetchSuggestedJoins(tableName);
+        fetchDetectedJoins(tableName);
 
         goToNextStep(); // Go to relationships step
     };
@@ -1543,6 +1875,62 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         }
     };
 
+    // Apply smart suggestion to the report configuration
+    const applySuggestion = (suggestion) => {
+        if (suggestion.type === 'sorting') {
+            // Add sorting criterion
+            const newSortCriterion = {
+                table: suggestion.table,
+                column: suggestion.column,
+                direction: suggestion.direction,
+            };
+            
+            // Check if this sort already exists
+            const existingIndex = sortCriteria.findIndex(
+                (criteria) => criteria.table === suggestion.table && criteria.column === suggestion.column
+            );
+            
+            if (existingIndex >= 0) {
+                // Update existing sort
+                const updatedSort = [...sortCriteria];
+                updatedSort[existingIndex] = newSortCriterion;
+                setSortCriteria(updatedSort);
+                toast.info(`Updated existing sort: ${suggestion.title}`);
+            } else {
+                // Add new sort
+                setSortCriteria(prev => [...prev, newSortCriterion]);
+                toast.success(`Applied sorting: ${suggestion.title}`);
+            }
+        } else if (suggestion.type === 'filter') {
+            // Add filter criterion to the first filter group (or create one if none exists)
+            const newFilterCriterion = {
+                table: suggestion.table,
+                column: suggestion.column,
+                operator: suggestion.operator,
+                value: suggestion.value,
+            };
+            
+            setFilterCriteria(prev => {
+                const updatedCriteria = { ...prev };
+                
+                // Ensure we have at least one group
+                if (!updatedCriteria.groups || updatedCriteria.groups.length === 0) {
+                    updatedCriteria.groups = [{
+                        operator: 'AND',
+                        filters: []
+                    }];
+                }
+                
+                // Add to first group
+                updatedCriteria.groups[0].filters.push(newFilterCriterion);
+                
+                return updatedCriteria;
+            });
+            
+            toast.success(`Applied filter: ${suggestion.title}`);
+        }
+    };
+
     // Create dataSource function for server-side pagination (similar to DataGrid)
     const dataSource = useCallback(
         async ({ skip, limit, sortInfo, filterValue }) => {
@@ -1885,7 +2273,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                 setSelectedTable(config.mainTable);
                 setAvailableTables([config.mainTable]);
                 fetchTableColumns(config.mainTable);
-                fetchSuggestedJoins(config.mainTable);
+                fetchDetectedJoins(config.mainTable);
             }
 
             if (config.columns) {
@@ -2177,14 +2565,14 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                     <div className={styles.wizardNavigation}>
                         {currentWizardStep === 0 ? (
                             <button
-                                className={`${styles.btn} ${styles.btnSecondary}`}
+                                className={`${styles.btn} ${styles.btnCancel}`}
                                 onClick={startAgain}
                             >
                                 Cancel
                             </button>
                         ) : (
                             <button
-                                className={`${styles.btn} ${styles.btnSecondary}`}
+                                className={`${styles.btn} ${styles.btnPrevious}`}
                                 onClick={goToPreviousStep}
                             >
                                 Previous
@@ -2193,7 +2581,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
 
                         {currentWizardStep === wizardSteps.length - 1 ? (
                             <button
-                                className={`${styles.btn} ${styles.btnSecondary}`}
+                                className={`${styles.btn} ${styles.btnStartAgain}`}
                                 onClick={startAgain}
                             >
                                 Start Again
@@ -2672,8 +3060,8 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
 
     // Render relationships (simplified)
     const renderRelationships = () => {
-        const tableSuggestions = suggestedJoins[selectedTable] || [];
-        const isLoading = isLoadingSuggestedJoins[selectedTable] || false;
+        const tableSuggestions = detectedJoins[selectedTable] || [];
+        const isLoading = isLoadingDetectedJoins[selectedTable] || false;
 
         return (
             <div className={styles.relationshipsSection}>
@@ -2724,21 +3112,22 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                     </div>
                 )}
 
-                {/* Suggested Relationships */}
+                {/* Detected Relationships */}
                 {tableSuggestions.length > 0 && (
-                    <div className={styles.suggestedJoins}>
-                        <h3>Suggested Connections</h3>
+                    <div className={styles.detectedJoins}>
+                        <h3>Detected Connections</h3>
                         <p>
-                            We found these possible connections to other data:
+                            We found these possible connections to other data source:
                         </p>
+                        <div className={styles.detectionsGrid}>
                         {tableSuggestions.map((suggestion, index) => (
-                            <div key={index} className={styles.suggestionCard}>
-                                <div className={styles.suggestionInfo}>
-                                    <div className={styles.suggestionTitle}>
+                            <div key={index} className={styles.detectionCard}>
+                                <div className={styles.detectionInfo}>
+                                    <div className={styles.detectionTitle}>
                                         <LinkChain size={16} />
                                         <span>
                                             Connect to{' '}
-                                            {getTableDisplayName(
+                                            {getSmartRelationshipName(
                                                 suggestion.targetTable,
                                                 definition
                                             )}
@@ -2753,7 +3142,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                             )}
                                         </div>
                                     </div>
-                                    <p className={styles.suggestionDescription}>
+                                    <p className={styles.detectionDescription}>
                                         {suggestion.description ||
                                             `Link ${getTableDisplayName(
                                                 selectedTable,
@@ -2765,24 +3154,47 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                     </p>
                                 </div>
                                 <button
-                                    className={`${styles.btn} ${styles.btnPrimary}`}
+                                    className={`${styles.connectIconBtn} ${
+                                        joins.some(
+                                            (j) =>
+                                                j.targetTable ===
+                                                suggestion.targetTable
+                                        )
+                                            ? styles.connected
+                                            : ''
+                                    }`}
                                     onClick={() => addJoin(suggestion)}
                                     disabled={joins.some(
                                         (j) =>
                                             j.targetTable ===
                                             suggestion.targetTable
                                     )}
+                                    title={
+                                        joins.some(
+                                            (j) =>
+                                                j.targetTable ===
+                                                suggestion.targetTable
+                                        )
+                                            ? 'Already connected'
+                                            : `Connect to ${getSmartRelationshipName(
+                                                  suggestion.targetTable,
+                                                  definition
+                                              )}`
+                                    }
                                 >
                                     {joins.some(
                                         (j) =>
                                             j.targetTable ===
                                             suggestion.targetTable
-                                    )
-                                        ? 'Connected'
-                                        : 'Connect'}
+                                    ) ? (
+                                        <CircleCheck size={20} />
+                                    ) : (
+                                        <LinkChain size={20} />
+                                    )}
                                 </button>
                             </div>
                         ))}
+                        </div>
                     </div>
                 )}
 
@@ -2799,6 +3211,12 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                         Can't find the connection you need? Create a custom
                         relationship between tables.
                     </p>
+                    <div className={styles.advancedWarning}>
+                        <TriangleAlert size={16} />
+                        <span>
+                            <strong>Advanced Feature:</strong> Manual relationships require understanding of database table structures and foreign key relationships. Only create manual relationships if you understand how database tables connect.
+                        </span>
+                    </div>
 
                     {!showManualJoinForm ? (
                         <button
@@ -2896,7 +3314,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                         disabled={!manualJoin.sourceTable}
                                     >
                                         <option value="">Select Column</option>
-                                        {manualJoinColumns.source.map((col) => (
+                                        {Array.isArray(manualJoinColumns.source) && manualJoinColumns.source.map((col) => (
                                             <option
                                                 key={col.name}
                                                 value={col.name}
@@ -2955,7 +3373,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                         disabled={!manualJoin.targetTable}
                                     >
                                         <option value="">Select Column</option>
-                                        {manualJoinColumns.target.map((col) => (
+                                        {Array.isArray(manualJoinColumns.target) && manualJoinColumns.target.map((col) => (
                                             <option
                                                 key={col.name}
                                                 value={col.name}
@@ -3345,47 +3763,430 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
     // Advanced filter rendering (from original GenericReport)
     const renderFilters = () => {
         const availableColumns = getAvailableFilterColumns();
+        
+        // Smart suggestions for sorting and filtering based on table type and relationships
+        const getSmartSuggestions = () => {
+            const suggestions = {
+                sorting: [],
+                filters: []
+            };
+
+            if (!selectedTable || !tableColumns) return [];
+
+            // Get table display name for better suggestions
+            const tableDisplayName = getTableDisplayName(selectedTable, definition);
+            
+            // Define smart patterns based on table types and common business logic
+            const tablePatterns = {
+                // User/Client related tables
+                users: { priority: ['name', 'created_at', 'updated_at', 'email'], filters: ['active', 'status', 'created_at', 'email', 'role'] },
+                clients: { priority: ['name', 'created_at', 'updated_at', 'email'], filters: ['active', 'status', 'created_at', 'email', 'phone', 'type'] },
+                contacts: { priority: ['name', 'email', 'created_at'], filters: ['active', 'client_id', 'email', 'phone', 'created_at'] },
+                
+                // Project/Lead related tables
+                leads: { priority: ['created_at', 'updated_at', 'name', 'status'], filters: ['status', 'source', 'priority', 'created_at', 'assigned_to', 'email'] },
+                projects: { priority: ['created_at', 'deadline', 'name', 'status'], filters: ['status', 'priority', 'created_at', 'due_date', 'client_id', 'assigned_to'] },
+                tasks: { priority: ['created_at', 'deadline', 'priority'], filters: ['status', 'priority', 'assigned_to', 'created_at', 'due_date'] },
+                surveys: { priority: ['created_at', 'updated_at', 'status'], filters: ['status', 'type', 'created_at', 'active'] },
+                
+                // Location related tables
+                sites: { priority: ['name', 'address', 'created_at'], filters: ['active', 'state', 'client_id', 'type', 'status'] },
+                locations: { priority: ['name', 'address', 'created_at'], filters: ['active', 'state', 'type', 'status'] },
+                
+                // Reference/lookup tables
+                industries: { priority: ['name', 'id'], filters: ['active'] },
+                sources: { priority: ['name', 'id'], filters: ['active', 'type'] },
+                actions: { priority: ['name', 'priority'], filters: ['active', 'priority', 'type'] },
+                tags: { priority: ['name', 'created_at'], filters: ['active', 'type', 'category'] },
+                
+                // Document/content tables
+                documents: { priority: ['created_at', 'name', 'type'], filters: ['type', 'status', 'created_at', 'category', 'owner_id'] },
+                notes: { priority: ['created_at', 'updated_at'], filters: ['created_at', 'user_id', 'type', 'priority'] },
+                
+                // Communication tables
+                emails: { priority: ['created_at', 'subject'], filters: ['status', 'created_at', 'from_email', 'to_email', 'type'] },
+                calls: { priority: ['created_at', 'duration'], filters: ['status', 'created_at', 'type', 'outcome'] },
+                messages: { priority: ['created_at', 'subject'], filters: ['status', 'created_at', 'type', 'priority'] },
+                
+                // Transactional tables
+                orders: { priority: ['created_at', 'status', 'total'], filters: ['status', 'created_at', 'client_id', 'type'] },
+                invoices: { priority: ['created_at', 'due_date', 'status'], filters: ['status', 'created_at', 'due_date', 'client_id'] },
+                bookings: { priority: ['date', 'created_at', 'status'], filters: ['status', 'date', 'created_at', 'client_id', 'type'] },
+                facilities: { priority: ['name', 'type', 'rate'], filters: ['type', 'active', 'status', 'category'] },
+                
+                // Financial tables
+                payments: { priority: ['created_at', 'amount', 'status'], filters: ['status', 'created_at', 'method', 'type'] },
+                transactions: { priority: ['created_at', 'amount', 'type'], filters: ['type', 'status', 'created_at', 'category'] },
+            };
+
+            // Get the pattern for this table or fall back to generic patterns
+            const pattern = tablePatterns[selectedTable] || {
+                priority: ['created_at', 'updated_at', 'name', 'title', 'id'],
+                filters: ['status', 'active', 'created_at']
+            };
+
+            // Helper function to check if column exists in the table
+            const columnExists = (columnName, table = selectedTable) => {
+                if (table === selectedTable) {
+                    return tableColumns.some(col => col.name.toLowerCase() === columnName.toLowerCase());
+                }
+                // Check joined tables
+                const join = joins.find(j => j.targetTable === table);
+                return join && join.availableColumns && join.availableColumns.some(col => col.name.toLowerCase() === columnName.toLowerCase());
+            };
+
+            // Generate sorting suggestions
+            pattern.priority.forEach((columnName) => {
+                if (columnExists(columnName)) {
+                    const isDateColumn = ['created_at', 'updated_at', 'date', 'deadline', 'due_date'].includes(columnName.toLowerCase());
+                    const direction = isDateColumn ? 'desc' : 'asc';
+                    
+                    suggestions.sorting.push({
+                        type: 'sorting',
+                        table: selectedTable,
+                        column: columnName,
+                        direction: direction,
+                        title: `Sort by ${formatName(columnName)} (${direction === 'desc' ? 'Newest First' : 'A-Z'})`,
+                        description: `Order results by ${formatName(columnName)} in ${direction === 'desc' ? 'descending' : 'ascending'} order`,
+                        reasoning: isDateColumn ? 'Show most recent records first' : 'Alphabetical ordering for easy browsing'
+                    });
+                }
+            });
+
+            // Generate filter suggestions
+            pattern.filters.forEach(columnName => {
+                if (columnExists(columnName)) {
+                    const columnLower = columnName.toLowerCase();
+                    
+                    // Special handling for common filter types
+                    if (['active', 'status'].includes(columnLower)) {
+                        // Active/Status filters
+                        if (columnLower === 'active') {
+                            suggestions.filters.push({
+                                type: 'filter',
+                                table: selectedTable,
+                                column: columnName,
+                                operator: '=',
+                                value: '1',
+                                title: 'Show only active records',
+                                description: `Filter to show only active ${tableDisplayName.toLowerCase()}`,
+                                reasoning: 'Focus on currently relevant records'
+                            });
+                        } else if (columnLower === 'status') {
+                            // Multiple status suggestions based on table type
+                            const statusSuggestions = [];
+                            
+                            if (['leads', 'projects', 'tasks'].includes(selectedTable.toLowerCase())) {
+                                statusSuggestions.push({
+                                    value: 'active',
+                                    title: 'Show active items',
+                                    description: `Show active ${tableDisplayName.toLowerCase()}`
+                                });
+                                statusSuggestions.push({
+                                    value: 'pending',
+                                    title: 'Show pending items',
+                                    description: `Show pending ${tableDisplayName.toLowerCase()}`
+                                });
+                            } else if (['orders', 'bookings', 'invoices'].includes(selectedTable.toLowerCase())) {
+                                statusSuggestions.push({
+                                    value: 'confirmed',
+                                    title: 'Show confirmed items',
+                                    description: `Show confirmed ${tableDisplayName.toLowerCase()}`
+                                });
+                                statusSuggestions.push({
+                                    value: 'pending',
+                                    title: 'Show pending items',
+                                    description: `Show pending ${tableDisplayName.toLowerCase()}`
+                                });
+                            } else {
+                                statusSuggestions.push({
+                                    value: 'active',
+                                    title: 'Show active records',
+                                    description: `Show active ${tableDisplayName.toLowerCase()}`
+                                });
+                            }
+                            
+                            statusSuggestions.forEach(statusSug => {
+                                suggestions.filters.push({
+                                    type: 'filter',
+                                    table: selectedTable,
+                                    column: columnName,
+                                    operator: '=',
+                                    value: statusSug.value,
+                                    title: statusSug.title,
+                                    description: statusSug.description,
+                                    reasoning: 'Filter by status to focus on specific record states'
+                                });
+                            });
+                        }
+                    } else if (['created_at', 'updated_at', 'date', 'due_date', 'deadline'].includes(columnLower)) {
+                        // Date-based filters
+                        const dateFilters = [
+                            {
+                                days: 7,
+                                title: 'Last 7 days',
+                                description: `Show ${tableDisplayName.toLowerCase()} from the last week`
+                            },
+                            {
+                                days: 30,
+                                title: 'Last 30 days', 
+                                description: `Show ${tableDisplayName.toLowerCase()} from the last month`
+                            },
+                            {
+                                days: 90,
+                                title: 'Last 3 months',
+                                description: `Show ${tableDisplayName.toLowerCase()} from the last quarter`
+                            }
+                        ];
+                        
+                        dateFilters.forEach(dateFilter => {
+                            suggestions.filters.push({
+                                type: 'filter',
+                                table: selectedTable,
+                                column: columnName,
+                                operator: '>=',
+                                value: moment().subtract(dateFilter.days, 'days').format('YYYY-MM-DD'),
+                                title: `${dateFilter.title} (${formatName(columnName)})`,
+                                description: dateFilter.description,
+                                reasoning: 'Focus on recent activity and data'
+                            });
+                        });
+                    } else if (['priority', 'importance', 'urgency'].includes(columnLower)) {
+                        // Priority-based filters
+                        const priorityFilters = [
+                            { value: 'high', title: 'High priority only' },
+                            { value: 'medium', title: 'Medium priority and above' },
+                            { value: 'urgent', title: 'Urgent items only' }
+                        ];
+                        
+                        priorityFilters.forEach(priorityFilter => {
+                            suggestions.filters.push({
+                                type: 'filter',
+                                table: selectedTable,
+                                column: columnName,
+                                operator: '=',
+                                value: priorityFilter.value,
+                                title: priorityFilter.title,
+                                description: `Filter to show ${priorityFilter.value} priority ${tableDisplayName.toLowerCase()}`,
+                                reasoning: 'Focus on high-priority items that need attention'
+                            });
+                        });
+                    } else if (['type', 'category', 'kind'].includes(columnLower)) {
+                        // Type/Category filters - generic suggestions
+                        suggestions.filters.push({
+                            type: 'filter',
+                            table: selectedTable,
+                            column: columnName,
+                            operator: '!=',
+                            value: '',
+                            title: `Show records with ${formatName(columnName)}`,
+                            description: `Filter out records without a ${formatName(columnName)} specified`,
+                            reasoning: 'Focus on categorized records'
+                        });
+                    } else if (['email', 'phone', 'mobile'].includes(columnLower)) {
+                        // Contact information filters
+                        suggestions.filters.push({
+                            type: 'filter',
+                            table: selectedTable,
+                            column: columnName,
+                            operator: '!=',
+                            value: '',
+                            title: `Has ${formatName(columnName)}`,
+                            description: `Show only records with ${formatName(columnName)} information`,
+                            reasoning: 'Focus on records with contact information'
+                        });
+                    } else if (['client_id', 'user_id', 'owner_id', 'assigned_to'].includes(columnLower)) {
+                        // Relationship filters
+                        suggestions.filters.push({
+                            type: 'filter',
+                            table: selectedTable,
+                            column: columnName,
+                            operator: '!=',
+                            value: '',
+                            title: `Has ${formatName(columnName.replace('_id', ''))}`,
+                            description: `Show only records with an assigned ${formatName(columnName.replace('_id', ''))}`,
+                            reasoning: 'Focus on records with assigned relationships'
+                        });
+                    }
+                }
+            });
+
+            // Add filter suggestions from joined tables
+            joins.forEach(join => {
+                if (join.targetTable && join.availableColumns) {
+                    const joinTableDisplay = getTableDisplayName(join.targetTable, definition);
+                    
+                    // Add filter suggestions from joined tables
+                    ['status', 'active', 'type', 'priority'].forEach(columnName => {
+                        if (columnExists(columnName, join.targetTable)) {
+                            suggestions.filters.push({
+                                type: 'filter',
+                                table: join.targetTable,
+                                column: columnName,
+                                operator: '=',
+                                value: columnName === 'active' ? '1' : 'active',
+                                title: `Filter by ${joinTableDisplay} ${formatName(columnName)}`,
+                                description: `Show records based on ${formatName(columnName)} from connected ${joinTableDisplay.toLowerCase()}`,
+                                reasoning: `Use related ${joinTableDisplay.toLowerCase()} data for filtering`
+                            });
+                        }
+                    });
+                    
+                    // Add date filters for joined tables
+                    ['created_at', 'updated_at'].forEach(columnName => {
+                        if (columnExists(columnName, join.targetTable)) {
+                            suggestions.filters.push({
+                                type: 'filter',
+                                table: join.targetTable,
+                                column: columnName,
+                                operator: '>=',
+                                value: moment().subtract(30, 'days').format('YYYY-MM-DD'),
+                                title: `Recent ${joinTableDisplay} (Last 30 days)`,
+                                description: `Filter by ${joinTableDisplay.toLowerCase()} ${formatName(columnName)} in the last 30 days`,
+                                reasoning: `Focus on recent ${joinTableDisplay.toLowerCase()} activity`
+                            });
+                        }
+                    });
+                }
+            });
+
+            // Combine all suggestions into a single array (prioritize filters)
+            const allSuggestions = [...suggestions.sorting.slice(0, 3), ...suggestions.filters.slice(0, 5)];
+
+            // Check which suggestions are already applied
+            const enhancedSuggestions = allSuggestions.map(suggestion => {
+                let alreadyApplied = false;
+                
+                if (suggestion.type === 'sorting') {
+                    // Check if this sort criterion already exists
+                    alreadyApplied = sortCriteria.some(
+                        criteria => criteria.table === suggestion.table && 
+                                   criteria.column === suggestion.column &&
+                                   criteria.direction === suggestion.direction
+                    );
+                } else if (suggestion.type === 'filter') {
+                    // Check if this filter already exists in any group
+                    alreadyApplied = filterCriteria.groups && filterCriteria.groups.some(group =>
+                        group.filters.some(filter =>
+                            filter.table === suggestion.table &&
+                            filter.column === suggestion.column &&
+                            filter.operator === suggestion.operator &&
+                            filter.value === suggestion.value
+                        )
+                    );
+                }
+                
+                return {
+                    ...suggestion,
+                    alreadyApplied
+                };
+            });
+
+            // Return prioritized suggestions (max 6-8 for clean interface)
+            return enhancedSuggestions.slice(0, 8);
+        };
+        
+        const smartSuggestions = getSmartSuggestions();
+        
+        // Debug logging to check if suggestions are generated
+        console.log('Smart suggestions debug:', {
+            selectedTable,
+            tableColumns: tableColumns?.length,
+            smartSuggestions: smartSuggestions?.length,
+            suggestions: smartSuggestions
+        });
 
         return (
             <div className={styles.filtersSection}>
+                {/* Smart Suggestions Section */}
+                {smartSuggestions.length > 0 && (
+                    <div className={styles.reportSection}>
+                        <div className={styles.sectionHeader}>
+                            <h3>
+                                <Rss size={20} />
+                                Smart Suggestions
+                            </h3>
+                            <span className={styles.suggestionsCount}>
+                                {smartSuggestions.length} suggestion{smartSuggestions.length !== 1 ? 's' : ''}
+                            </span>
+                        </div>
+                        
+                        <div className={styles.smartSuggestionsContainer}>
+                            <p className={styles.suggestionsIntro}>
+                                Based on your selected data source "{formatName(selectedTable)}" and relationships, 
+                                here are some recommended sorting and filtering options:
+                            </p>
+                            
+                            <div className={styles.suggestionsGrid}>
+                                {smartSuggestions.map((suggestion, index) => (
+                                    <div key={index} className={styles.suggestionCard}>
+                                        <div className={styles.suggestionHeader}>
+                                            <span className={styles.suggestionTitle}>
+                                                {suggestion.title}
+                                            </span>
+                                            <span className={styles.suggestionType}>
+                                                {suggestion.type}
+                                            </span>
+                                        </div>
+                                        
+                                        <p className={styles.suggestionDescription}>
+                                            {suggestion.description}
+                                        </p>
+                                        
+                                        <div className={styles.suggestionActions}>
+                                            <button
+                                                className={`${styles.btn} ${styles.btnPrimary}`}
+                                                onClick={() => applySuggestion(suggestion)}
+                                                disabled={suggestion.alreadyApplied}
+                                            >
+                                                {suggestion.alreadyApplied ? 'Applied' : 'Apply'}
+                                            </button>
+                                            {suggestion.reasoning && (
+                                                <span className={styles.suggestionReasoning}>
+                                                    {suggestion.reasoning}
+                                                </span>
+                                            )}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                )}
+
                 {/* Sorting Section */}
                 <div className={styles.reportSection}>
                     <div
                         className={styles.sectionHeader}
+                        onClick={() => setShowSortingSection(!showSortingSection)}
                         title={
                             showSortingSection
                                 ? 'Hide sorting options'
                                 : 'Show sorting options'
                         }
                     >
-                        <h3
-                            onClick={() =>
-                                setShowSortingSection(!showSortingSection)
-                            }
-                            style={{ cursor: 'pointer' }}
-                        >
+                        <h3>
+                            <Data size={20} />
                             Sorting
                         </h3>
                         <div className={styles.sectionHeaderActions}>
                             <button
-                                className={styles.btn}
-                                onClick={handleAddSortCriterion}
+                                className={`${styles.btn} ${styles.btnSecondary}`}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleAddSortCriterion();
+                                }}
                                 disabled={selectedColumns.length === 0}
                             >
-                                Add Sort Criterion
+                                <CirclePlus size={16} />
+                                Add Sort
                             </button>
                             <div
-                                className={`${styles.toggleBtn} ${
-                                    showSortingSection
-                                        ? styles.toggleBtnActive
-                                        : ''
+                                className={`${styles.streamlinedToggle} ${
+                                    showSortingSection ? styles.expanded : ''
                                 }`}
-                                onClick={() =>
-                                    setShowSortingSection(!showSortingSection)
-                                }
-                                style={{ cursor: 'pointer' }}
                             >
-                                {showSortingSection ? '▲' : '▼'}
+                                <ChevronDown size={16} />
                             </div>
                         </div>
                     </div>
@@ -3393,76 +4194,32 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                     {showSortingSection && (
                         <>
                             {sortCriteria.length > 0 && (
-                                <div className={styles.filterGroup}>
-                                    <div className={styles.joinTablesContainer}>
-                                        {sortCriteria.map(
-                                            (criterion, index) => (
-                                                <div
-                                                    key={index}
-                                                    className={
-                                                        styles.joinSection
-                                                    }
-                                                    data-sort-index={index + 1}
+                                <div className={styles.sortingContainer}>
+                                    {sortCriteria.map((criterion, index) => (
+                                        <div
+                                            key={index}
+                                            className={styles.sortingItem}
+                                        >
+                                            <div className={styles.sortingHeader}>
+                                                <h4>
+                                                    Sort #{index + 1} - {criterion.table && criterion.column
+                                                        ? `${formatName(criterion.table)}.${formatName(criterion.column)}`
+                                                        : 'Configure column'}
+                                                </h4>
+                                                <button
+                                                    className={styles.removeSortBtn}
+                                                    onClick={() => handleRemoveSortCriterion(index)}
+                                                    title="Remove Sort Criterion"
                                                 >
-                                                    <div
-                                                        className={
-                                                            styles.joinHeader
-                                                        }
-                                                    >
-                                                        <h4
-                                                            data-sort-index={
-                                                                index + 1
-                                                            }
-                                                        >
-                                                            by{' '}
-                                                            {criterion.table &&
-                                                            criterion.column
-                                                                ? `${formatName(
-                                                                      criterion.table
-                                                                  )}.${formatName(
-                                                                      criterion.column
-                                                                  )}`
-                                                                : `Criterion #${
-                                                                      index + 1
-                                                                  }`}
-                                                        </h4>
-                                                        <button
-                                                            className={
-                                                                styles.removeJoinBtn
-                                                            }
-                                                            onClick={() =>
-                                                                handleRemoveSortCriterion(
-                                                                    index
-                                                                )
-                                                            }
-                                                            title="Remove Sort Criterion"
-                                                        >
-                                                            ×
-                                                        </button>
-                                                    </div>
+                                                    ×
+                                                </button>
+                                            </div>
 
-                                                    <div
-                                                        className={
-                                                            styles.joinGrid
-                                                        }
-                                                    >
-                                                        <div
-                                                            className={
-                                                                styles.joinGridColumn
-                                                            }
-                                                        >
-                                                            <div
-                                                                className={
-                                                                    styles.joinField
-                                                                }
-                                                            >
-                                                                <label>
-                                                                    Column:
-                                                                </label>
-                                                                <select
-                                                                    className={
-                                                                        styles.selectControl
-                                                                    }
+                                            <div className={styles.sortingControls}>
+                                                <div className={styles.sortingField}>
+                                                    <label>Column:</label>
+                                                    <select
+                                                        className={styles.sortingSelect}
                                                                     value={
                                                                         criterion.table &&
                                                                         criterion.column
@@ -3577,26 +4334,12 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                                                             ) : null
                                                                     )}
                                                                 </select>
-                                                            </div>
-                                                        </div>
+                                                </div>
 
-                                                        <div
-                                                            className={
-                                                                styles.joinGridColumn
-                                                            }
-                                                        >
-                                                            <div
-                                                                className={
-                                                                    styles.joinField
-                                                                }
-                                                            >
-                                                                <label>
-                                                                    Direction:
-                                                                </label>
-                                                                <select
-                                                                    className={
-                                                                        styles.selectControl
-                                                                    }
+                                                <div className={styles.sortingField}>
+                                                    <label>Direction:</label>
+                                                    <select
+                                                        className={styles.sortingSelect}
                                                                     value={
                                                                         criterion.direction
                                                                     }
@@ -3618,14 +4361,11 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                                                     <option value="DESC">
                                                                         Descending
                                                                     </option>
-                                                                </select>
-                                                            </div>
-                                                        </div>
-                                                    </div>
+                                                    </select>
                                                 </div>
-                                            )
-                                        )}
-                                    </div>
+                                            </div>
+                                        </div>
+                                    ))}
                                 </div>
                             )}
                         </>
@@ -4054,7 +4794,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         }
     };
 
-    // Export report in different formats (replicating GenericReport pattern)
+    // Export report in different formats with proper binary handling
     const exportReport = async (format) => {
         if (!selectedTable || selectedColumns.length === 0) {
             toast.error('Please generate a report first before exporting.');
@@ -4066,6 +4806,41 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             return;
         }
 
+        // Check for large datasets when exporting to PDF
+        if (format === 'pdf' && previewData.length > 1000) {
+            const result = await Swal.fire({
+                title: '⚠️ Large Dataset Warning',
+                html: `
+                    <div style="text-align: left;">
+                        <p>You are trying to export <strong>${previewData.length} rows</strong> to PDF.</p>
+                        <p>Large PDF exports may:</p>
+                        <ul>
+                            <li>Take a long time to generate</li>
+                            <li>Use significant server memory</li>
+                            <li>Result in very large files</li>
+                            <li>Potentially fail due to memory limits</li>
+                        </ul>
+                        <p><strong>Recommendations:</strong></p>
+                        <ul>
+                            <li>Apply filters to reduce the dataset</li>
+                            <li>Use Excel/CSV format for large exports</li>
+                            <li>Limit to first 1000 rows for PDF</li>
+                        </ul>
+                    </div>
+                `,
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonText: 'Export Anyway',
+                cancelButtonText: 'Cancel',
+                confirmButtonColor: '#d33',
+                cancelButtonColor: '#3085d6',
+            });
+
+            if (!result.isConfirmed) {
+                return;
+            }
+        }
+
         try {
             // Use exact same payload format as GenericReport
             const queryConfig = {
@@ -4077,6 +4852,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                 })),
                 joins: joins.map((join) => ({
                     joinType: join.joinType,
+                    sourceTable: join.sourceTable || selectedTable,
                     targetTable: join.targetTable,
                     sourceColumn: join.sourceColumn,
                     targetColumn: join.targetColumn,
@@ -4090,6 +4866,21 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                 format: format === 'excel' ? 'xlsx' : format, // Convert excel to xlsx
             };
 
+            // DEBUG: Log the complete request payload
+            console.group('🐛 PDF Export Debug');
+            console.log('📋 Export Request Details:');
+            console.log('URL:', exportUrl);
+            console.log('Format:', format);
+            console.log('Report Name:', reportName);
+            console.log('Selected Table:', selectedTable);
+            console.log('Selected Columns:', selectedColumns);
+            console.log('Joins:', joins);
+            console.log('Filter Criteria:', filterCriteria);
+            console.log('Flattened Filters:', flattenFilterCriteria(filterCriteria));
+            console.log('Sort Criteria:', sortCriteria);
+            console.log('🚀 Final Payload:', JSON.stringify(exportData, null, 2));
+            console.groupEnd();
+
             // Generate filename with timestamp
             const timestamp = moment().format('YYYY-MM-DD_HH-mm-ss');
             const fileName = `${reportName.replace(
@@ -4097,20 +4888,90 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                 '_'
             )}_${timestamp}.${format === 'excel' ? 'xlsx' : format}`;
 
-            // Use Download component like GenericReport
+            console.log('📁 Generated filename:', fileName);
+
+            // Use Download component which handles error checking and blob download properly
+            console.log('📡 Making request to:', exportUrl);
             const result = await Download(exportUrl, 'POST', exportData);
 
+            console.log('✅ Download component returned result:', result);
+            
             if (result && result.data) {
+                console.log('✅ Result has data, triggering download');
+                console.log('📄 Result data type:', typeof result.data);
+                console.log('📄 Result data instanceof Blob:', result.data instanceof Blob);
+                
                 // Use saveAs to trigger download
                 saveAs(result.data, fileName);
                 toast.success(`Report exported as ${format.toUpperCase()}`);
             } else {
+                console.error('❌ No result data received');
+                console.log('Full result object:', result);
                 toast.error(
                     `Failed to export report as ${format.toUpperCase()}`
                 );
             }
         } catch (error) {
-            toast.error(`Failed to export report as ${format.toUpperCase()}`);
+            // Handle binary error responses properly
+            console.group('❌ Export Error Debug');
+            console.error('Error object:', error);
+            console.log('Error name:', error.name);
+            console.log('Error message:', error.message);
+            console.log('Error stack:', error.stack);
+            
+            let errorMessage = `Failed to export report as ${format.toUpperCase()}`;
+            
+            if (error.response) {
+                console.log('📡 Error response received');
+                console.log('Response status:', error.response.status);
+                console.log('Response statusText:', error.response.statusText);
+                console.log('Response headers:', error.response.headers);
+                console.log('Response data type:', typeof error.response.data);
+                console.log('Response data instanceof Blob:', error.response.data instanceof Blob);
+                console.log('Raw response data:', error.response.data);
+                
+                if (error.response.data instanceof Blob) {
+                    // If error response is a blob, try to read it as text
+                    try {
+                        console.log('🔍 Attempting to parse blob error response');
+                        const errorText = await error.response.data.text();
+                        console.log('📄 Blob content as text:', errorText);
+                        
+                        try {
+                            const errorData = JSON.parse(errorText);
+                            console.log('📄 Parsed JSON error data:', errorData);
+                            errorMessage = errorData.message || errorData.error || errorMessage;
+                        } catch (jsonError) {
+                            console.error('❌ Failed to parse JSON from blob:', jsonError);
+                            errorMessage = errorText || errorMessage;
+                        }
+                    } catch (parseError) {
+                        // If parsing fails, use default message
+                        console.error('❌ Could not parse error response blob:', parseError);
+                    }
+                } else if (error.response.data && error.response.data.message) {
+                    console.log('📄 Using error.response.data.message:', error.response.data.message);
+                    errorMessage = error.response.data.message;
+                } else if (error.response.data && error.response.data.error) {
+                    console.log('📄 Using error.response.data.error:', error.response.data.error);
+                    errorMessage = error.response.data.error;
+                }
+                
+                // Handle specific 500 errors with empty response (likely memory issues)
+                if (error.response.status === 500 && !error.response.data) {
+                    errorMessage = `Server error during ${format.toUpperCase()} generation. This may be due to:
+                    • Large dataset size (${previewData.length} rows)
+                    • Memory limitations on the server
+                    • Try reducing the dataset or using Excel/CSV format`;
+                }
+            } else {
+                console.log('❌ No error.response available');
+            }
+            
+            console.log('🔔 Final error message:', errorMessage);
+            console.groupEnd();
+            
+            toast.error(errorMessage);
             console.error('Export error:', error);
         }
     };
@@ -4128,11 +4989,15 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         const isExistingReport = loadedReportId && !saveAs;
         const dialogTitle = isExistingReport ? 'Update Report' : 'Save Report';
         const confirmButtonText = isExistingReport
-            ? 'Update Report'
+            ? 'Update'
             : 'Save Report';
 
         const result = await Swal.fire({
             title: dialogTitle,
+            customClass: {
+                confirmButton: 'swal-button-fixed-width',
+                cancelButton: 'swal-button-fixed-width'
+            },
             html: `
                 <div style="text-align: left;">
                     ${
@@ -4326,7 +5191,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                 </p>
                                 <div className={styles.exportButtons}>
                                     <button
-                                        className={`${styles.btn} ${styles.btnSecondary}`}
+                                        className={`${styles.btn} ${styles.btnExportExcel}`}
                                         onClick={() => exportReport('excel')}
                                         disabled={
                                             isLoading ||
@@ -4343,7 +5208,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                         Export as Excel
                                     </button>
                                     <button
-                                        className={`${styles.btn} ${styles.btnSecondary}`}
+                                        className={`${styles.btn} ${styles.btnExportCsv}`}
                                         onClick={() => exportReport('csv')}
                                         disabled={
                                             isLoading ||
@@ -4360,7 +5225,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                         Export as CSV
                                     </button>
                                     <button
-                                        className={`${styles.btn} ${styles.btnSecondary}`}
+                                        className={`${styles.btn} ${styles.btnExportPdf}`}
                                         onClick={() => exportReport('pdf')}
                                         disabled={
                                             isLoading ||