@visns-studio/visns-components 5.11.1 → 5.11.2

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

@@ -4,30 +4,30 @@ import { toast } from 'react-toastify';
 import moment from 'moment';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import {
-    Question,
-    LinkChain,
+    HelpCircle as Question,
+    Link as LinkChain,
     Filter,
     Download as DownloadIcon,
     Save,
-    EyeOpen,
+    Eye as EyeOpen,
     Info,
-    CircleCheck,
-    CirclePlus,
-    Data,
+    CheckCircle as CircleCheck,
+    PlusCircle as CirclePlus,
+    Database as Data,
     File,
-    Person,
+    User as Person,
     Calendar,
-    Map,
+    MapPin as Map,
     Tag,
-    Money,
-    ShippingBoxV1,
-    SettingsVertical,
-    TriangleAlert,
-    Cart,
-    Newspaper,
+    DollarSign as Money,
+    Package as ShippingBoxV1,
+    MoreVertical as SettingsVertical,
+    AlertTriangle as TriangleAlert,
+    ShoppingCart as Cart,
+    FileText as Newspaper,
     ChevronDown,
     Rss,
-} from 'akar-icons';
+} from 'lucide-react';
 import CustomFetch from '../Fetch';
 import Download from '../Download';
 import { saveAs } from 'file-saver';
@@ -124,215 +124,6 @@ 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
@@ -1121,42 +912,225 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         exportUrl = '/ajax/reportBuilder/export',
     } = setting;
 
-    // Show guided help popup
+    // Simple icon helper using Unicode symbols for SweetAlert2
+    const getIcon = (iconName, color = '#6b7280', size = 16) => {
+        const icons = {
+            chart: '📊',
+            rocket: '🚀',
+            file: '📄',
+            cogs: '⚙️',
+            list: '📋',
+            database: '🗄️',
+            columns: '📝',
+            link: '🔗',
+            filter: '🔍',
+            download: '⬇️',
+            star: '⭐',
+            lightbulb: '💡',
+            users: '👥',
+            cart: '🛒',
+            money: '💰',
+            tasks: '✅',
+            settings: '🔧',
+            clock: '⏰',
+            question: '❓',
+            warning: '⚠️',
+            eye: '👁️'
+        };
+        
+        return `<span style="color: ${color}; font-size: ${size}px; margin-right: 6px; vertical-align: middle; display: inline-block;">${icons[iconName] || '📊'}</span>`;
+    };
+
+    // Show comprehensive help guide
     const showGuidedHelp = () => {
         Swal.fire({
-            title: '🎯 Quick Start Guide',
+            title: `<div style="display: flex; align-items: center; justify-content: center; gap: 8px;">${getIcon('chart', '#3b82f6', 24)}Complete Report Builder Guide</div>`,
             html: `
-                <div style="text-align: left; font-size: 14px; color: #4b5563;">
-                    <div style="margin-bottom: 20px;">
-                        <h4 style="color: #1f2937; margin-bottom: 10px;">Choose Your Path:</h4>
+                <div style="text-align: left; font-size: 13px; line-height: 1.5; color: #374151; max-height: 70vh; overflow-y: auto;">
+                    
+                    <!-- Quick Start Section -->
+                    <div style="margin-bottom: 24px;">
+                        <h3 style="color: #1f2937; margin: 0 0 12px 0; font-size: 16px; border-bottom: 2px solid #3b82f6; padding-bottom: 6px; display: flex; align-items: center; gap: 8px;">
+                            ${getIcon('rocket', '#3b82f6', 16)}
+                            Getting Started
+                        </h3>
+                        
+                        <div style="background: #f0f9ff; border-left: 4px solid #3b82f6; padding: 12px; margin-bottom: 12px;">
+                            <h4 style="color: #1e40af; margin: 0 0 8px 0; font-size: 14px; display: flex; align-items: center; gap: 6px;">
+                                ${getIcon('file', '#1e40af', 14)}
+                                Option 1: Use Saved Reports (Recommended)
+                            </h4>
+                            <p style="margin: 0 0 8px 0;">Click the "Templates" button to access pre-built reports for common needs like client lists, recent orders, or financial summaries.</p>
+                            <p style="margin: 0; font-style: italic; color: #1e40af;">Perfect for beginners and quick results!</p>
+                        </div>
+
+                        <div style="background: #f9fafb; border-left: 4px solid #6b7280; padding: 12px;">
+                            <h4 style="color: #374151; margin: 0 0 8px 0; font-size: 14px; display: flex; align-items: center; gap: 6px;">
+                                ${getIcon('cogs', '#374151', 14)}
+                                Option 2: Build Custom Report
+                            </h4>
+                            <p style="margin: 0;">Follow the 5-step wizard below to create exactly what you need.</p>
+                        </div>
+                    </div>
+
+                    <!-- Step-by-Step Guide -->
+                    <div style="margin-bottom: 24px;">
+                        <h3 style="color: #1f2937; margin: 0 0 12px 0; font-size: 16px; border-bottom: 2px solid #10b981; padding-bottom: 6px; display: flex; align-items: center; gap: 8px;">
+                            ${getIcon('list', '#10b981', 16)}
+                            5-Step Report Creation
+                        </h3>
+                        
+                        <!-- Step 1 -->
+                        <div style="background: #ecfdf5; border: 1px solid #10b981; border-radius: 8px; padding: 12px; margin-bottom: 12px;">
+                            <h4 style="color: #047857; margin: 0 0 8px 0; font-size: 14px; display: flex; align-items: center; gap: 6px;">
+                                ${getIcon('database', '#047857', 14)}
+                                Step 1: Choose Your Data Source
+                            </h4>
+                            <ul style="margin: 0; padding-left: 16px; color: #065f46;">
+                                <li>Select the main table (e.g., Clients, Orders, Invoices)</li>
+                                <li>This becomes the foundation of your report</li>
+                                <li>Look for the table icon to identify data types</li>
+                            </ul>
+                        </div>
+
+                        <!-- Step 2 -->
+                        <div style="background: #eff6ff; border: 1px solid #3b82f6; border-radius: 8px; padding: 12px; margin-bottom: 12px;">
+                            <h4 style="color: #1e40af; margin: 0 0 8px 0; font-size: 14px; display: flex; align-items: center; gap: 6px;">
+                                ${getIcon('columns', '#1e40af', 14)}
+                                Step 2: Select Columns
+                            </h4>
+                            <ul style="margin: 0; padding-left: 16px; color: #1e3a8a;">
+                                <li>Check the boxes for data you want to see</li>
+                                <li>Drag columns to reorder them</li>
+                                <li>Use "Select All" for comprehensive reports</li>
+                                <li>Preview shows how your data will look</li>
+                            </ul>
+                        </div>
+
+                        <!-- Step 3 -->
+                        <div style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 12px; margin-bottom: 12px;">
+                            <h4 style="color: #92400e; margin: 0 0 8px 0; font-size: 14px; display: flex; align-items: center; gap: 6px;">
+                                ${getIcon('link', '#92400e', 14)}
+                                Step 3: Add Relationships (Optional)
+                            </h4>
+                            <ul style="margin: 0; padding-left: 16px; color: #92400e;">
+                                <li>Connect related data (e.g., add customer names to invoices)</li>
+                                <li>We suggest common relationships automatically</li>
+                                <li>Click "Add Relationship" to connect more tables</li>
+                                <li>This enriches your report with additional context</li>
+                            </ul>
+                        </div>
 
-                        <div style="background: #f0f9ff; border: 1px solid #3b82f6; border-radius: 8px; padding: 12px; margin-bottom: 12px;">
-                            <h5 style="color: #1e40af; margin: 0 0 8px 0;">🚀 Quick Start (Recommended)</h5>
-                            <p style="margin: 0;">Use a saved report to get started immediately. Perfect for common reports like client lists or recent invoices.</p>
+                        <!-- Step 4 -->
+                        <div style="background: #fdf2f8; border: 1px solid #ec4899; border-radius: 8px; padding: 12px; margin-bottom: 12px;">
+                            <h4 style="color: #be185d; margin: 0 0 8px 0; font-size: 14px; display: flex; align-items: center; gap: 6px;">
+                                ${getIcon('filter', '#be185d', 14)}
+                                Step 4: Apply Filters (Optional)
+                            </h4>
+                            <ul style="margin: 0; padding-left: 16px; color: #be185d;">
+                                <li>Narrow down results (e.g., "Active clients only")</li>
+                                <li>Use AND/OR logic for complex conditions</li>
+                                <li>Group filters for advanced filtering</li>
+                                <li>Great for date ranges, status filters, etc.</li>
+                            </ul>
                         </div>
 
-                        <div style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px;">
-                            <h5 style="color: #374151; margin: 0 0 8px 0;">✨ Custom Report</h5>
-                            <p style="margin: 0;">Build your own report from scratch with our step-by-step wizard. We'll guide you through each step!</p>
+                        <!-- Step 5 -->
+                        <div style="background: #f3e8ff; border: 1px solid #8b5cf6; border-radius: 8px; padding: 12px;">
+                            <h4 style="color: #7c3aed; margin: 0 0 8px 0; font-size: 14px; display: flex; align-items: center; gap: 6px;">
+                                ${getIcon('download', '#7c3aed', 14)}
+                                Step 5: Generate & Export
+                            </h4>
+                            <ul style="margin: 0; padding-left: 16px; color: #7c3aed;">
+                                <li>Click "Generate Report" to see your data</li>
+                                <li>Review and refine as needed</li>
+                                <li>Export as Excel, CSV, or PDF</li>
+                                <li>Save the report template for future use</li>
+                            </ul>
                         </div>
                     </div>
 
-                    <div style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 12px;">
-                        <p style="margin: 0; color: #92400e;">
-                            <strong>💡 Tip:</strong> Follow the wizard steps to create professional reports quickly and easily.
-                        </p>
+                    <!-- Pro Tips Section -->
+                    <div style="margin-bottom: 20px;">
+                        <h3 style="color: #1f2937; margin: 0 0 12px 0; font-size: 16px; border-bottom: 2px solid #f59e0b; padding-bottom: 6px; display: flex; align-items: center; gap: 8px;">
+                            ${getIcon('star', '#f59e0b', 16)}
+                            Pro Tips
+                        </h3>
+                        
+                        <div style="background: #fffbeb; border: 1px solid #f59e0b; border-radius: 8px; padding: 12px;">
+                            <ul style="margin: 0; padding-left: 16px; color: #92400e;">
+                                <li><strong>Start Simple:</strong> Begin with basic reports, then add complexity</li>
+                                <li><strong>Use Previews:</strong> Check the preview before generating large reports</li>
+                                <li><strong>Save Templates:</strong> Save frequently used reports as templates</li>
+                                <li><strong>Date Filters:</strong> Use date ranges for better performance</li>
+                                <li><strong>Column Limits:</strong> Too many columns can slow down reports</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- Common Use Cases -->
+                    <div style="margin-bottom: 20px;">
+                        <h3 style="color: #1f2937; margin: 0 0 12px 0; font-size: 16px; border-bottom: 2px solid #10b981; padding-bottom: 6px; display: flex; align-items: center; gap: 8px;">
+                            ${getIcon('lightbulb', '#10b981', 16)}
+                            Common Report Examples
+                        </h3>
+                        
+                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+                            <div style="background: #f0fdf4; border: 1px solid #22c55e; border-radius: 6px; padding: 8px;">
+                                <strong style="color: #15803d;">${getIcon('users', '#15803d', 12)}Client List:</strong>
+                                <br><small style="color: #16a34a;">Clients table + Contact details</small>
+                            </div>
+                            <div style="background: #eff6ff; border: 1px solid #3b82f6; border-radius: 6px; padding: 8px;">
+                                <strong style="color: #1d4ed8;">${getIcon('cart', '#1d4ed8', 12)}Recent Orders:</strong>
+                                <br><small style="color: #2563eb;">Orders + Customer names + Date filter</small>
+                            </div>
+                            <div style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; padding: 8px;">
+                                <strong style="color: #d97706;">${getIcon('money', '#d97706', 12)}Financial Summary:</strong>
+                                <br><small style="color: #f59e0b;">Invoices + Payments + Date grouping</small>
+                            </div>
+                            <div style="background: #fdf2f8; border: 1px solid #ec4899; border-radius: 6px; padding: 8px;">
+                                <strong style="color: #db2777;">${getIcon('tasks', '#db2777', 12)}Active Projects:</strong>
+                                <br><small style="color: #ec4899;">Projects + Status filter + Team members</small>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Troubleshooting -->
+                    <div>
+                        <h3 style="color: #1f2937; margin: 0 0 12px 0; font-size: 16px; border-bottom: 2px solid #dc2626; padding-bottom: 6px; display: flex; align-items: center; gap: 8px;">
+                            ${getIcon('settings', '#dc2626', 16)}
+                            Common Issues
+                        </h3>
+                        
+                        <div style="background: #fef2f2; border: 1px solid #dc2626; border-radius: 8px; padding: 12px;">
+                            <div style="margin-bottom: 8px;">
+                                <strong style="color: #dc2626;">${getIcon('clock', '#dc2626', 12)}Report too slow?</strong>
+                                <span style="color: #991b1b;"> Add date filters or reduce columns</span>
+                            </div>
+                            <div style="margin-bottom: 8px;">
+                                <strong style="color: #dc2626;">${getIcon('question', '#dc2626', 12)}Missing data?</strong>
+                                <span style="color: #991b1b;"> Check relationships and join conditions</span>
+                            </div>
+                            <div style="margin-bottom: 8px;">
+                                <strong style="color: #dc2626;">${getIcon('warning', '#dc2626', 12)}Export failing?</strong>
+                                <span style="color: #991b1b;"> Try smaller date ranges or fewer rows</span>
+                            </div>
+                            <div>
+                                <strong style="color: #dc2626;">${getIcon('eye', '#dc2626', 12)}No data showing?</strong>
+                                <span style="color: #991b1b;"> Review your filter conditions</span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             `,
-            width: 500,
-            confirmButtonText: "Let's Get Started!",
-            confirmButtonColor: '#2563eb',
-            showCancelButton: true,
-            cancelButtonText: 'Skip Tour',
-            cancelButtonColor: '#6b7280',
-        }).then((result) => {
-            if (result.isConfirmed) {
-                setShowTemplates(true);
+            width: 800,
+            confirmButtonText: "Close",
+            confirmButtonColor: '#6b7280',
+            showCancelButton: false,
+            showDenyButton: false,
+            customClass: {
+                popup: 'comprehensive-help-modal',
+                htmlContainer: 'help-content-scrollable'
             }
         });
     };
@@ -1743,7 +1717,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             } else {
                 // Handle the response format similar to fetchTableColumns
                 let columnsData = [];
-                
+
                 if (result.data?.success && result.data?.data?.columns) {
                     // Primary format: {"success":true,"data":{"table":"contacts_tags","columns":[...]}}
                     columnsData = result.data.data.columns;
@@ -1767,10 +1741,13 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                         columnsData = fallback;
                     }
                 }
-                
+
                 // Ensure columnsData is always an array
                 if (!Array.isArray(columnsData)) {
-                    console.error(`Invalid columns data format for ${type} table:`, result);
+                    console.error(
+                        `Invalid columns data format for ${type} table:`,
+                        result
+                    );
                     columnsData = [];
                 }
 
@@ -1884,12 +1861,14 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                 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
+                (criteria) =>
+                    criteria.table === suggestion.table &&
+                    criteria.column === suggestion.column
             );
-            
+
             if (existingIndex >= 0) {
                 // Update existing sort
                 const updatedSort = [...sortCriteria];
@@ -1898,7 +1877,7 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                 toast.info(`Updated existing sort: ${suggestion.title}`);
             } else {
                 // Add new sort
-                setSortCriteria(prev => [...prev, newSortCriterion]);
+                setSortCriteria((prev) => [...prev, newSortCriterion]);
                 toast.success(`Applied sorting: ${suggestion.title}`);
             }
         } else if (suggestion.type === 'filter') {
@@ -1909,24 +1888,29 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                 operator: suggestion.operator,
                 value: suggestion.value,
             };
-            
-            setFilterCriteria(prev => {
+
+            setFilterCriteria((prev) => {
                 const updatedCriteria = { ...prev };
-                
+
                 // Ensure we have at least one group
-                if (!updatedCriteria.groups || updatedCriteria.groups.length === 0) {
-                    updatedCriteria.groups = [{
-                        operator: 'AND',
-                        filters: []
-                    }];
+                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}`);
         }
     };
@@ -3117,83 +3101,94 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                     <div className={styles.detectedJoins}>
                         <h3>Detected Connections</h3>
                         <p>
-                            We found these possible connections to other data source:
+                            We found these possible connections to other data
+                            source:
                         </p>
                         <div className={styles.detectionsGrid}>
-                        {tableSuggestions.map((suggestion, index) => (
-                            <div key={index} className={styles.detectionCard}>
-                                <div className={styles.detectionInfo}>
-                                    <div className={styles.detectionTitle}>
-                                        <LinkChain size={16} />
-                                        <span>
-                                            Connect to{' '}
-                                            {getSmartRelationshipName(
-                                                suggestion.targetTable,
-                                                definition
-                                            )}
-                                        </span>
-                                        <div
-                                            className={styles.confidenceRating}
-                                        >
-                                            {'⭐'.repeat(
-                                                Math.floor(
-                                                    suggestion.confidence / 20
-                                                )
-                                            )}
+                            {tableSuggestions.map((suggestion, index) => (
+                                <div
+                                    key={index}
+                                    className={styles.detectionCard}
+                                >
+                                    <div className={styles.detectionInfo}>
+                                        <div className={styles.detectionTitle}>
+                                            <LinkChain size={16} />
+                                            <span>
+                                                Connect to{' '}
+                                                {getSmartRelationshipName(
+                                                    suggestion.targetTable,
+                                                    definition
+                                                )}
+                                            </span>
+                                            <div
+                                                className={
+                                                    styles.confidenceRating
+                                                }
+                                            >
+                                                {'⭐'.repeat(
+                                                    Math.floor(
+                                                        suggestion.confidence /
+                                                            20
+                                                    )
+                                                )}
+                                            </div>
                                         </div>
+                                        <p
+                                            className={
+                                                styles.detectionDescription
+                                            }
+                                        >
+                                            {suggestion.description ||
+                                                `Link ${getTableDisplayName(
+                                                    selectedTable,
+                                                    definition
+                                                )} with ${getTableDisplayName(
+                                                    suggestion.targetTable,
+                                                    definition
+                                                )}`}
+                                        </p>
                                     </div>
-                                    <p className={styles.detectionDescription}>
-                                        {suggestion.description ||
-                                            `Link ${getTableDisplayName(
-                                                selectedTable,
-                                                definition
-                                            )} with ${getTableDisplayName(
-                                                suggestion.targetTable,
-                                                definition
-                                            )}`}
-                                    </p>
-                                </div>
-                                <button
-                                    className={`${styles.connectIconBtn} ${
-                                        joins.some(
+                                    <button
+                                        className={`${styles.connectIconBtn} ${
+                                            joins.some(
+                                                (j) =>
+                                                    j.targetTable ===
+                                                    suggestion.targetTable
+                                            )
+                                                ? styles.connected
+                                                : ''
+                                        }`}
+                                        onClick={() => addJoin(suggestion)}
+                                        disabled={joins.some(
                                             (j) =>
                                                 j.targetTable ===
                                                 suggestion.targetTable
-                                        )
-                                            ? styles.connected
-                                            : ''
-                                    }`}
-                                    onClick={() => addJoin(suggestion)}
-                                    disabled={joins.some(
-                                        (j) =>
-                                            j.targetTable ===
-                                            suggestion.targetTable
-                                    )}
-                                    title={
-                                        joins.some(
+                                        )}
+                                        title={
+                                            joins.some(
+                                                (j) =>
+                                                    j.targetTable ===
+                                                    suggestion.targetTable
+                                            )
+                                                ? 'Already connected'
+                                                : `Connect to ${getSmartRelationshipName(
+                                                      suggestion.targetTable,
+                                                      definition
+                                                  )}`
+                                        }
+                                    >
+                                        {joins.some(
                                             (j) =>
                                                 j.targetTable ===
                                                 suggestion.targetTable
-                                        )
-                                            ? 'Already connected'
-                                            : `Connect to ${getSmartRelationshipName(
-                                                  suggestion.targetTable,
-                                                  definition
-                                              )}`
-                                    }
-                                >
-                                    {joins.some(
-                                        (j) =>
-                                            j.targetTable ===
-                                            suggestion.targetTable
-                                    ) ? (
-                                        <CircleCheck size={20} />
-                                    ) : (
-                                        <LinkChain size={20} />
-                                    )}
-                                </button>
-                            </div>
-                        ))}
+                                        ) ? (
+                                            <CircleCheck size={20} />
+                                        ) : (
+                                            <LinkChain size={20} />
+                                        )}
+                                    </button>
+                                </div>
+                            ))}
                         </div>
                     </div>
                 )}
@@ -3214,7 +3209,11 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                     <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.
+                            <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>
 
@@ -3314,14 +3313,19 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                         disabled={!manualJoin.sourceTable}
                                     >
                                         <option value="">Select Column</option>
-                                        {Array.isArray(manualJoinColumns.source) && manualJoinColumns.source.map((col) => (
-                                            <option
-                                                key={col.name}
-                                                value={col.name}
-                                            >
-                                                {formatName(col.name)}
-                                            </option>
-                                        ))}
+                                        {Array.isArray(
+                                            manualJoinColumns.source
+                                        ) &&
+                                            manualJoinColumns.source.map(
+                                                (col) => (
+                                                    <option
+                                                        key={col.name}
+                                                        value={col.name}
+                                                    >
+                                                        {formatName(col.name)}
+                                                    </option>
+                                                )
+                                            )}
                                     </select>
                                 </div>
 
@@ -3373,14 +3377,19 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                         disabled={!manualJoin.targetTable}
                                     >
                                         <option value="">Select Column</option>
-                                        {Array.isArray(manualJoinColumns.target) && manualJoinColumns.target.map((col) => (
-                                            <option
-                                                key={col.name}
-                                                value={col.name}
-                                            >
-                                                {formatName(col.name)}
-                                            </option>
-                                        ))}
+                                        {Array.isArray(
+                                            manualJoinColumns.target
+                                        ) &&
+                                            manualJoinColumns.target.map(
+                                                (col) => (
+                                                    <option
+                                                        key={col.name}
+                                                        value={col.name}
+                                                    >
+                                                        {formatName(col.name)}
+                                                    </option>
+                                                )
+                                            )}
                                     </select>
                                 </div>
                             </div>
@@ -3763,101 +3772,254 @@ 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: []
+                filters: [],
             };
 
             if (!selectedTable || !tableColumns) return [];
 
             // Get table display name for better suggestions
-            const tableDisplayName = getTableDisplayName(selectedTable, definition);
-            
+            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'] },
-                
+                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'] },
-                
+                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'] },
-                
+                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'] },
-                
+                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'] },
-                
+                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'] },
-                
+                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'] },
-                
+                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'] },
+                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']
+                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());
+                    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());
+                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 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'
+                        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 => {
+            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
@@ -3870,43 +4032,52 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                 value: '1',
                                 title: 'Show only active records',
                                 description: `Filter to show only active ${tableDisplayName.toLowerCase()}`,
-                                reasoning: 'Focus on currently relevant records'
+                                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())) {
+
+                            if (
+                                ['leads', 'projects', 'tasks'].includes(
+                                    selectedTable.toLowerCase()
+                                )
+                            ) {
                                 statusSuggestions.push({
                                     value: 'active',
                                     title: 'Show active items',
-                                    description: `Show active ${tableDisplayName.toLowerCase()}`
+                                    description: `Show active ${tableDisplayName.toLowerCase()}`,
                                 });
                                 statusSuggestions.push({
                                     value: 'pending',
                                     title: 'Show pending items',
-                                    description: `Show pending ${tableDisplayName.toLowerCase()}`
+                                    description: `Show pending ${tableDisplayName.toLowerCase()}`,
                                 });
-                            } else if (['orders', 'bookings', 'invoices'].includes(selectedTable.toLowerCase())) {
+                            } else if (
+                                ['orders', 'bookings', 'invoices'].includes(
+                                    selectedTable.toLowerCase()
+                                )
+                            ) {
                                 statusSuggestions.push({
                                     value: 'confirmed',
                                     title: 'Show confirmed items',
-                                    description: `Show confirmed ${tableDisplayName.toLowerCase()}`
+                                    description: `Show confirmed ${tableDisplayName.toLowerCase()}`,
                                 });
                                 statusSuggestions.push({
                                     value: 'pending',
                                     title: 'Show pending items',
-                                    description: `Show pending ${tableDisplayName.toLowerCase()}`
+                                    description: `Show pending ${tableDisplayName.toLowerCase()}`,
                                 });
                             } else {
                                 statusSuggestions.push({
                                     value: 'active',
                                     title: 'Show active records',
-                                    description: `Show active ${tableDisplayName.toLowerCase()}`
+                                    description: `Show active ${tableDisplayName.toLowerCase()}`,
                                 });
                             }
-                            
-                            statusSuggestions.forEach(statusSug => {
+
+                            statusSuggestions.forEach((statusSug) => {
                                 suggestions.filters.push({
                                     type: 'filter',
                                     table: selectedTable,
@@ -3915,51 +4086,71 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                     value: statusSug.value,
                                     title: statusSug.title,
                                     description: statusSug.description,
-                                    reasoning: 'Filter by status to focus on specific record states'
+                                    reasoning:
+                                        'Filter by status to focus on specific record states',
                                 });
                             });
                         }
-                    } else if (['created_at', 'updated_at', 'date', 'due_date', 'deadline'].includes(columnLower)) {
+                    } 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`
+                                description: `Show ${tableDisplayName.toLowerCase()} from the last week`,
                             },
                             {
                                 days: 30,
-                                title: 'Last 30 days', 
-                                description: `Show ${tableDisplayName.toLowerCase()} from the last month`
+                                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`
-                            }
+                                description: `Show ${tableDisplayName.toLowerCase()} from the last quarter`,
+                            },
                         ];
-                        
-                        dateFilters.forEach(dateFilter => {
+
+                        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)})`,
+                                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'
+                                reasoning: 'Focus on recent activity and data',
                             });
                         });
-                    } else if (['priority', 'importance', 'urgency'].includes(columnLower)) {
+                    } 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' }
+                            {
+                                value: 'medium',
+                                title: 'Medium priority and above',
+                            },
+                            { value: 'urgent', title: 'Urgent items only' },
                         ];
-                        
-                        priorityFilters.forEach(priorityFilter => {
+
+                        priorityFilters.forEach((priorityFilter) => {
                             suggestions.filters.push({
                                 type: 'filter',
                                 table: selectedTable,
@@ -3967,11 +4158,16 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                 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'
+                                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)) {
+                    } else if (
+                        ['type', 'category', 'kind'].includes(columnLower)
+                    ) {
                         // Type/Category filters - generic suggestions
                         suggestions.filters.push({
                             type: 'filter',
@@ -3979,11 +4175,17 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                             column: columnName,
                             operator: '!=',
                             value: '',
-                            title: `Show records with ${formatName(columnName)}`,
-                            description: `Filter out records without a ${formatName(columnName)} specified`,
-                            reasoning: 'Focus on categorized records'
+                            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)) {
+                    } else if (
+                        ['email', 'phone', 'mobile'].includes(columnLower)
+                    ) {
                         // Contact information filters
                         suggestions.filters.push({
                             type: 'filter',
@@ -3992,10 +4194,20 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                             operator: '!=',
                             value: '',
                             title: `Has ${formatName(columnName)}`,
-                            description: `Show only records with ${formatName(columnName)} information`,
-                            reasoning: 'Focus on records with contact information'
+                            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)) {
+                    } else if (
+                        [
+                            'client_id',
+                            'user_id',
+                            'owner_id',
+                            'assigned_to',
+                        ].includes(columnLower)
+                    ) {
                         // Relationship filters
                         suggestions.filters.push({
                             type: 'filter',
@@ -4003,47 +4215,68 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                             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'
+                            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 => {
+            joins.forEach((join) => {
                 if (join.targetTable && join.availableColumns) {
-                    const joinTableDisplay = getTableDisplayName(join.targetTable, definition);
-                    
+                    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`
-                            });
+                    ['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 => {
+                    ['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'),
+                                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`
+                                description: `Filter by ${joinTableDisplay.toLowerCase()} ${formatName(
+                                    columnName
+                                )} in the last 30 days`,
+                                reasoning: `Focus on recent ${joinTableDisplay.toLowerCase()} activity`,
                             });
                         }
                     });
@@ -4051,49 +4284,56 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             });
 
             // Combine all suggestions into a single array (prioritize filters)
-            const allSuggestions = [...suggestions.sorting.slice(0, 3), ...suggestions.filters.slice(0, 5)];
+            const allSuggestions = [
+                ...suggestions.sorting.slice(0, 3),
+                ...suggestions.filters.slice(0, 5),
+            ];
 
             // Check which suggestions are already applied
-            const enhancedSuggestions = allSuggestions.map(suggestion => {
+            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
+                        (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
-                        )
-                    );
+                    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
+                    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
+            suggestions: smartSuggestions,
         });
 
         return (
@@ -4107,42 +4347,74 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                 Smart Suggestions
                             </h3>
                             <span className={styles.suggestionsCount}>
-                                {smartSuggestions.length} suggestion{smartSuggestions.length !== 1 ? 's' : ''}
+                                {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:
+                                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}>
+                                    <div
+                                        key={index}
+                                        className={styles.suggestionCard}
+                                    >
+                                        <div
+                                            className={styles.suggestionHeader}
+                                        >
+                                            <span
+                                                className={
+                                                    styles.suggestionTitle
+                                                }
+                                            >
                                                 {suggestion.title}
                                             </span>
-                                            <span className={styles.suggestionType}>
+                                            <span
+                                                className={
+                                                    styles.suggestionType
+                                                }
+                                            >
                                                 {suggestion.type}
                                             </span>
                                         </div>
-                                        
-                                        <p className={styles.suggestionDescription}>
+
+                                        <p
+                                            className={
+                                                styles.suggestionDescription
+                                            }
+                                        >
                                             {suggestion.description}
                                         </p>
-                                        
-                                        <div className={styles.suggestionActions}>
+
+                                        <div
+                                            className={styles.suggestionActions}
+                                        >
                                             <button
                                                 className={`${styles.btn} ${styles.btnPrimary}`}
-                                                onClick={() => applySuggestion(suggestion)}
-                                                disabled={suggestion.alreadyApplied}
+                                                onClick={() =>
+                                                    applySuggestion(suggestion)
+                                                }
+                                                disabled={
+                                                    suggestion.alreadyApplied
+                                                }
                                             >
-                                                {suggestion.alreadyApplied ? 'Applied' : 'Apply'}
+                                                {suggestion.alreadyApplied
+                                                    ? 'Applied'
+                                                    : 'Apply'}
                                             </button>
                                             {suggestion.reasoning && (
-                                                <span className={styles.suggestionReasoning}>
+                                                <span
+                                                    className={
+                                                        styles.suggestionReasoning
+                                                    }
+                                                >
                                                     {suggestion.reasoning}
                                                 </span>
                                             )}
@@ -4158,7 +4430,9 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                 <div className={styles.reportSection}>
                     <div
                         className={styles.sectionHeader}
-                        onClick={() => setShowSortingSection(!showSortingSection)}
+                        onClick={() =>
+                            setShowSortingSection(!showSortingSection)
+                        }
                         title={
                             showSortingSection
                                 ? 'Hide sorting options'
@@ -4200,95 +4474,143 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                             key={index}
                                             className={styles.sortingItem}
                                         >
-                                            <div className={styles.sortingHeader}>
+                                            <div
+                                                className={styles.sortingHeader}
+                                            >
                                                 <h4>
-                                                    Sort #{index + 1} - {criterion.table && criterion.column
-                                                        ? `${formatName(criterion.table)}.${formatName(criterion.column)}`
+                                                    Sort #{index + 1} -{' '}
+                                                    {criterion.table &&
+                                                    criterion.column
+                                                        ? `${formatName(
+                                                              criterion.table
+                                                          )}.${formatName(
+                                                              criterion.column
+                                                          )}`
                                                         : 'Configure column'}
                                                 </h4>
                                                 <button
-                                                    className={styles.removeSortBtn}
-                                                    onClick={() => handleRemoveSortCriterion(index)}
+                                                    className={
+                                                        styles.removeSortBtn
+                                                    }
+                                                    onClick={() =>
+                                                        handleRemoveSortCriterion(
+                                                            index
+                                                        )
+                                                    }
                                                     title="Remove Sort Criterion"
                                                 >
                                                     ×
                                                 </button>
                                             </div>
 
-                                            <div className={styles.sortingControls}>
-                                                <div className={styles.sortingField}>
+                                            <div
+                                                className={
+                                                    styles.sortingControls
+                                                }
+                                            >
+                                                <div
+                                                    className={
+                                                        styles.sortingField
+                                                    }
+                                                >
                                                     <label>Column:</label>
                                                     <select
-                                                        className={styles.sortingSelect}
-                                                                    value={
-                                                                        criterion.table &&
-                                                                        criterion.column
-                                                                            ? `${criterion.table}.${criterion.column}`
-                                                                            : ''
-                                                                    }
-                                                                    onChange={(
-                                                                        e
-                                                                    ) => {
-                                                                        if (
-                                                                            e
-                                                                                .target
-                                                                                .value
-                                                                        ) {
-                                                                            const dotIndex =
-                                                                                e.target.value.indexOf(
-                                                                                    '.'
-                                                                                );
-                                                                            if (
-                                                                                dotIndex !==
-                                                                                -1
-                                                                            ) {
-                                                                                const table =
-                                                                                    e.target.value.substring(
-                                                                                        0,
-                                                                                        dotIndex
-                                                                                    );
-                                                                                const column =
-                                                                                    e.target.value.substring(
-                                                                                        dotIndex +
-                                                                                            1
-                                                                                    );
-
-                                                                                handleSortCriterionChange(
-                                                                                    index,
-                                                                                    'column',
-                                                                                    ''
-                                                                                );
-                                                                                handleSortCriterionChange(
-                                                                                    index,
-                                                                                    'table',
-                                                                                    table
-                                                                                );
-                                                                                handleSortCriterionChange(
-                                                                                    index,
-                                                                                    'column',
-                                                                                    column
-                                                                                );
-                                                                            }
-                                                                        }
-                                                                    }}
-                                                                >
-                                                                    <option value="">
-                                                                        Select
-                                                                        Column
+                                                        className={
+                                                            styles.sortingSelect
+                                                        }
+                                                        value={
+                                                            criterion.table &&
+                                                            criterion.column
+                                                                ? `${criterion.table}.${criterion.column}`
+                                                                : ''
+                                                        }
+                                                        onChange={(e) => {
+                                                            if (
+                                                                e.target.value
+                                                            ) {
+                                                                const dotIndex =
+                                                                    e.target.value.indexOf(
+                                                                        '.'
+                                                                    );
+                                                                if (
+                                                                    dotIndex !==
+                                                                    -1
+                                                                ) {
+                                                                    const table =
+                                                                        e.target.value.substring(
+                                                                            0,
+                                                                            dotIndex
+                                                                        );
+                                                                    const column =
+                                                                        e.target.value.substring(
+                                                                            dotIndex +
+                                                                                1
+                                                                        );
+
+                                                                    handleSortCriterionChange(
+                                                                        index,
+                                                                        'column',
+                                                                        ''
+                                                                    );
+                                                                    handleSortCriterionChange(
+                                                                        index,
+                                                                        'table',
+                                                                        table
+                                                                    );
+                                                                    handleSortCriterionChange(
+                                                                        index,
+                                                                        'column',
+                                                                        column
+                                                                    );
+                                                                }
+                                                            }
+                                                        }}
+                                                    >
+                                                        <option value="">
+                                                            Select Column
+                                                        </option>
+                                                        {/* Main table columns */}
+                                                        <optgroup
+                                                            label={`${formatName(
+                                                                selectedTable
+                                                            )} Columns`}
+                                                        >
+                                                            {tableColumns.map(
+                                                                (column) => (
+                                                                    <option
+                                                                        key={`${selectedTable}.${column.name}`}
+                                                                        value={`${selectedTable}.${column.name}`}
+                                                                    >
+                                                                        {formatName(
+                                                                            column.name
+                                                                        )}
                                                                     </option>
-                                                                    {/* Main table columns */}
+                                                                )
+                                                            )}
+                                                        </optgroup>
+
+                                                        {/* Joined tables columns */}
+                                                        {joins.map(
+                                                            (join, joinIndex) =>
+                                                                join.targetTable &&
+                                                                join.availableColumns &&
+                                                                join
+                                                                    .availableColumns
+                                                                    .length >
+                                                                    0 ? (
                                                                     <optgroup
+                                                                        key={`join-${joinIndex}`}
                                                                         label={`${formatName(
-                                                                            selectedTable
+                                                                            join.targetTable
                                                                         )} Columns`}
                                                                     >
-                                                                        {tableColumns.map(
+                                                                        {join.availableColumns.map(
                                                                             (
                                                                                 column
                                                                             ) => (
                                                                                 <option
-                                                                                    key={`${selectedTable}.${column.name}`}
-                                                                                    value={`${selectedTable}.${column.name}`}
+                                                                                    key={`${join.targetTable}.${column.name}`}
+                                                                                    value={`${join.targetTable}.${column.name}`}
                                                                                 >
                                                                                     {formatName(
                                                                                         column.name
@@ -4297,70 +4619,38 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
                                                                             )
                                                                         )}
                                                                     </optgroup>
-
-                                                                    {/* Joined tables columns */}
-                                                                    {joins.map(
-                                                                        (
-                                                                            join,
-                                                                            joinIndex
-                                                                        ) =>
-                                                                            join.targetTable &&
-                                                                            join.availableColumns &&
-                                                                            join
-                                                                                .availableColumns
-                                                                                .length >
-                                                                                0 ? (
-                                                                                <optgroup
-                                                                                    key={`join-${joinIndex}`}
-                                                                                    label={`${formatName(
-                                                                                        join.targetTable
-                                                                                    )} Columns`}
-                                                                                >
-                                                                                    {join.availableColumns.map(
-                                                                                        (
-                                                                                            column
-                                                                                        ) => (
-                                                                                            <option
-                                                                                                key={`${join.targetTable}.${column.name}`}
-                                                                                                value={`${join.targetTable}.${column.name}`}
-                                                                                            >
-                                                                                                {formatName(
-                                                                                                    column.name
-                                                                                                )}
-                                                                                            </option>
-                                                                                        )
-                                                                                    )}
-                                                                                </optgroup>
-                                                                            ) : null
-                                                                    )}
-                                                                </select>
+                                                                ) : null
+                                                        )}
+                                                    </select>
                                                 </div>
 
-                                                <div className={styles.sortingField}>
+                                                <div
+                                                    className={
+                                                        styles.sortingField
+                                                    }
+                                                >
                                                     <label>Direction:</label>
                                                     <select
-                                                        className={styles.sortingSelect}
-                                                                    value={
-                                                                        criterion.direction
-                                                                    }
-                                                                    onChange={(
-                                                                        e
-                                                                    ) =>
-                                                                        handleSortCriterionChange(
-                                                                            index,
-                                                                            'direction',
-                                                                            e
-                                                                                .target
-                                                                                .value
-                                                                        )
-                                                                    }
-                                                                >
-                                                                    <option value="ASC">
-                                                                        Ascending
-                                                                    </option>
-                                                                    <option value="DESC">
-                                                                        Descending
-                                                                    </option>
+                                                        className={
+                                                            styles.sortingSelect
+                                                        }
+                                                        value={
+                                                            criterion.direction
+                                                        }
+                                                        onChange={(e) =>
+                                                            handleSortCriterionChange(
+                                                                index,
+                                                                'direction',
+                                                                e.target.value
+                                                            )
+                                                        }
+                                                    >
+                                                        <option value="ASC">
+                                                            Ascending
+                                                        </option>
+                                                        <option value="DESC">
+                                                            Descending
+                                                        </option>
                                                     </select>
                                                 </div>
                                             </div>
@@ -4876,9 +5166,15 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             console.log('Selected Columns:', selectedColumns);
             console.log('Joins:', joins);
             console.log('Filter Criteria:', filterCriteria);
-            console.log('Flattened Filters:', flattenFilterCriteria(filterCriteria));
+            console.log(
+                'Flattened Filters:',
+                flattenFilterCriteria(filterCriteria)
+            );
             console.log('Sort Criteria:', sortCriteria);
-            console.log('🚀 Final Payload:', JSON.stringify(exportData, null, 2));
+            console.log(
+                '🚀 Final Payload:',
+                JSON.stringify(exportData, null, 2)
+            );
             console.groupEnd();
 
             // Generate filename with timestamp
@@ -4895,12 +5191,15 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             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);
-                
+                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()}`);
@@ -4918,45 +5217,68 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             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(
+                    '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');
+                        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;
+                            console.log(
+                                '📄 Parsed JSON error data:',
+                                errorData
+                            );
+                            errorMessage =
+                                errorData.message ||
+                                errorData.error ||
+                                errorMessage;
                         } catch (jsonError) {
-                            console.error('❌ Failed to parse JSON from blob:', 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);
+                        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);
+                    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);
+                    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:
@@ -4967,10 +5289,10 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
             } else {
                 console.log('❌ No error.response available');
             }
-            
+
             console.log('🔔 Final error message:', errorMessage);
             console.groupEnd();
-            
+
             toast.error(errorMessage);
             console.error('Export error:', error);
         }
@@ -4988,15 +5310,13 @@ const GenericReportImproved = ({ setting = {}, definition = null }) => {
         // Determine if this is a save or save-as operation
         const isExistingReport = loadedReportId && !saveAs;
         const dialogTitle = isExistingReport ? 'Update Report' : 'Save Report';
-        const confirmButtonText = isExistingReport
-            ? 'Update'
-            : 'Save Report';
+        const confirmButtonText = isExistingReport ? 'Update' : 'Save Report';
 
         const result = await Swal.fire({
             title: dialogTitle,
             customClass: {
                 confirmButton: 'swal-button-fixed-width',
-                cancelButton: 'swal-button-fixed-width'
+                cancelButton: 'swal-button-fixed-width',
             },
             html: `
                 <div style="text-align: left;">