@visns-studio/visns-components 5.14.10 → 5.14.11

package/README.md

@@ -2889,7 +2889,7 @@ Response:
 
 ### Report Builder Component
 
-#### GenericReport (Enhanced v5.10.11+)
+#### GenericReport (Enhanced v5.12.2+)
 
 A powerful and enhanced report building component that provides an intuitive wizard-based interface for creating custom reports. The component has been significantly improved with new features and better user experience.
 
@@ -2909,16 +2909,19 @@ A powerful and enhanced report building component that provides an intuitive wiz
 
 **Major Enhancements:**
 
--   **5-Step Wizard Interface**: Guided workflow with visual progress indicators
+-   **6-Step Wizard Interface**: Guided workflow with visual progress indicators
 -   **Business Templates**: Pre-built report templates for common business scenarios
+-   **Custom Grouping**: Create grouped reports with flexible configuration options
+-   **Smart Data Formatting**: Intelligent formatting for JSON, boolean, ABN/ACN, and numeric data
+-   **Custom API Endpoints**: Override default URLs with template or custom endpoints
 -   **Calculated Fields**: Create custom formulas and calculations within reports
 -   **Smart Column Selection**: Automatic suggestions based on table relationships
 -   **Enhanced Filtering**: Advanced filter options with AND/OR logic and grouping
--   **Live Preview**: Real-time preview of report data as you build
+-   **Live Preview**: Real-time preview of report data with grouped/table view toggle
 -   **Intelligent Currency Formatting**: Automatic detection and formatting of monetary fields
 -   **Expandable Field Summary**: View selected fields in a collapsible overview
--   **Template Management**: Save, load, and share report templates
--   **Multiple Export Formats**: Export to Excel, CSV, PDF with formatting options
+-   **Template Management**: Save, load, and share report templates with custom configurations
+-   **Multiple Export Formats**: Export to Excel, CSV, PDF with proper formatting preservation
 
 **New Features in Recent Updates:**
 
@@ -2960,13 +2963,54 @@ A powerful and enhanced report building component that provides an intuitive wiz
    - Expandable selected fields summary
    - Step-by-step guidance with tooltips and help text
 
-**The 5-Step Wizard Process:**
+5. **Custom Grouping & Reporting (v5.12.0+)**:
+   ```jsx
+   // Create custom grouped reports with flexible configuration
+   {
+       enabled: true,
+       groupByField: 'facilities.label',
+       groupDisplayName: 'Facility',
+       sortBy: 'facilities.label',
+       sortDirection: 'asc',
+       rowsPerGroup: 10,
+       showGroupTotals: true,
+       groupHeaderStyle: 'primary'
+   }
+   ```
+   - Build grouped reports with custom field selection
+   - Flexible grouping options with configurable display
+   - Support for both predefined templates and custom grouping
+   - Toggle between grouped and regular table views
+
+6. **Smart Data Formatting (v5.12.1+)**:
+   - **JSON Data**: Automatically parses and displays JSON strings in readable key-value format
+   - **Boolean Values**: Shows "Yes/No" with color coding instead of true/false
+   - **Status Columns**: Detects status fields and displays "Active/Inactive" with colors
+   - **ABN/ACN Numbers**: Formats Australian Business/Company Numbers (12 345 678 901 / 123 456 789)
+   - **Numeric Values**: Applies locale-specific number formatting with thousands separators
+   - **Null Values**: Shows em dash (—) with italic styling for empty values
+
+7. **Custom API Endpoints (v5.12.2+)**:
+   ```jsx
+   // Override default API endpoints for specialized handling
+   customUrls: {
+       executeUrl: '/api/custom-reports/execute',
+       exportUrl: '/api/custom-reports/export'
+   }
+   ```
+   - **URL Priority**: Custom > Template > Default
+   - **Template Support**: Respects `executeUrl` and `exportUrl` from business templates
+   - **Flexible Configuration**: Override URLs at report level for specialized requirements
+   - **Persistent Settings**: Custom URLs save with reports for reuse
+
+**The 6-Step Wizard Process:**
 
 1. **Select Data Source**: Choose main table and review business templates
 2. **Choose Columns**: Select specific data fields with drag-and-drop reordering
 3. **Add Relationships**: Connect related tables with automatic join suggestions
 4. **Apply Filters**: Set conditions and date ranges with advanced logic
-5. **Generate & Export**: Preview results and export in multiple formats
+5. **Configure Grouping**: Set up custom grouping options and API endpoints (optional)
+6. **Generate & Export**: Preview results and export in multiple formats
 
 **API Integration:**
 

package/package.json

@@ -89,7 +89,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.14.10",
+    "version": "5.14.11",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/columns/ColumnRenderers.jsx

@@ -9,6 +9,7 @@ import {
     getRelationshipPath,
     DEFAULT_INTELLIGENT_SORTING_CONFIG,
 } from '../../utils/relationshipSortingUtils';
+import { formatCellContent } from '../generic/shared/formatters';
 
 // Stage Toggle Utility Functions
 const buildToggleUrl = (urlTemplate, stageItem, rowData) => {
@@ -145,10 +146,11 @@ export const renderBooleanColumn = ({
         name: `${column.type}.${column.id}`,
         sortable: true,
         render: ({ data }) => {
-            const value = data[column.id] ? 'Yes' : 'No';
+            const rawValue = data[column.id];
+            const formattedValue = formatCellContent(rawValue, { ...column, type: 'boolean' });
             return (
-                <CellWithTooltip value={data[column.id]} columnType="boolean">
-                    <span>{value}</span>
+                <CellWithTooltip value={rawValue} columnType="boolean">
+                    <span>{formattedValue}</span>
                 </CellWithTooltip>
             );
         },
@@ -202,9 +204,17 @@ export const renderDateColumn = ({
                 moment(data[column.id]).isValid() &&
                 moment(data[column.id]).format('YYYY-MM-DD') !== '1970-01-01'
             ) {
-                const value = moment(data[column.id]).format(
-                    column.format || 'DD-MM-YYYY'
-                );
+                // Smart date/datetime detection
+                const momentValue = moment(data[column.id]);
+                const hasTime = momentValue.format('HH:mm:ss') !== '00:00:00';
+                
+                let format = column.format;
+                if (!format) {
+                    // Auto-detect format based on whether there's a time component
+                    format = hasTime ? 'DD-MM-YYYY HH:mm' : 'DD-MM-YYYY';
+                }
+                
+                const value = momentValue.format(format);
                 let columnStyle = {};
 
                 if (

package/src/components/generic/GenericReport.jsx

@@ -4,6 +4,7 @@ import { toast } from 'react-toastify';
 import moment from 'moment';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import GroupedReportRenderer from './GroupedReportRenderer';
+import { formatCellContent } from './shared/formatters';
 import {
     HelpCircle as Question,
     Link as LinkChain,
@@ -30,6 +31,7 @@ import {
     Rss,
     Globe,
     Lock,
+    Database,
 } from 'lucide-react';
 import CustomFetch from '../Fetch';
 import Download from '../Download';
@@ -1042,7 +1044,7 @@ const GenericReportImproved = ({
 
     // State for pagination - now using server-side pagination
     const [currentPage, setCurrentPage] = useState(1);
-    const [pageSize, setPageSize] = useState(25); // Default to 25 for better UX
+    const [pageSize, setPageSize] = useState(10); // Default to 10 to reduce scrolling
     const [totalPages, setTotalPages] = useState(0);
     const [totalCount, setTotalCount] = useState(0); // Total records from server
 
@@ -1416,13 +1418,30 @@ const GenericReportImproved = ({
         currentWizardStep,
     ]);
 
+    // Reset auto-execute flag when user navigates away from preview step
+    useEffect(() => {
+        if (currentWizardStep !== 5) {
+            setHasAutoExecuted(false);
+        }
+    }, [currentWizardStep]);
+
+    // Reset auto-execute flag when report configuration changes
+    useEffect(() => {
+        setHasAutoExecuted(false);
+    }, [
+        selectedTable,
+        selectedColumns.length,
+        filterCriteria,
+        joins.length,
+        groupingConfig,
+    ]);
+
     // Auto-execute report when user reaches step 5 (preview step)
     useEffect(() => {
         if (
             currentWizardStep === 5 && // Step 6 is index 5 (preview step)
             selectedTable &&
             selectedColumns.length > 0 &&
-            previewData.length === 0 && // Only if no data loaded yet
             !isLoading &&
             !hasAutoExecuted // Prevent infinite loops
         ) {
@@ -1433,7 +1452,6 @@ const GenericReportImproved = ({
         currentWizardStep,
         selectedTable,
         selectedColumns.length,
-        previewData.length,
         isLoading,
         hasAutoExecuted,
     ]);
@@ -2541,16 +2559,16 @@ const GenericReportImproved = ({
                 }
             } else {
                 // Regular non-grouped report
-                const firstPageResult = await dataSource({
-                    skip: 0,
+                const currentPageResult = await dataSource({
+                    skip: (currentPage - 1) * pageSize,
                     limit: pageSize,
                     sortInfo: null,
                     filterValue: null,
                 });
 
-                if (firstPageResult.data && firstPageResult.data.length > 0) {
-                    setPreviewData(firstPageResult.data);
-                    fetchedDataCount = firstPageResult.data.length;
+                if (currentPageResult.data && currentPageResult.data.length > 0) {
+                    setPreviewData(currentPageResult.data);
+                    fetchedDataCount = currentPageResult.data.length;
                 }
             }
 
@@ -2749,10 +2767,9 @@ const GenericReportImproved = ({
                 setCurrentWizardStep(wizardSteps.length - 1);
             }
 
-            // Show success message with available data count
-            console.log('🎯 [DEBUG] Final fetchedDataCount before toast:', fetchedDataCount);
+            // Report executed successfully
+            console.log('🎯 [DEBUG] Final fetchedDataCount:', fetchedDataCount);
             console.log('🎯 [DEBUG] Type of fetchedDataCount:', typeof fetchedDataCount);
-            toast.success(`Found ${fetchedDataCount} records`);
         } catch (error) {
             toast.error('Failed to execute report');
             console.error('Error executing report:', error);
@@ -2966,32 +2983,49 @@ const GenericReportImproved = ({
                 setSelectedColumns(formattedColumns);
             }
 
-            // Apply quick filters as default filter criteria
-            if (template.quickFilters) {
-                const defaultFilters = template.quickFilters
-                    .filter(
-                        (filter) =>
-                            filter.value && filter.value !== 'current_user'
-                    ) // Skip user-specific filters for now
-                    .map((filter) => ({
-                        id: filter.id,
-                        field: filter.field,
-                        operator: filter.operator || '=',
-                        value: filter.value,
-                        label: filter.label,
-                    }));
+            // Apply template quick filters as default filters
+            if (template.quickFilters && template.quickFilters.length > 0) {
+                const updatedFilterCriteria = {
+                    operator: 'AND',
+                    groups: [
+                        {
+                            operator: 'AND',
+                            filters: [],
+                        },
+                    ],
+                };
 
-                if (defaultFilters.length > 0) {
-                    setFilterCriteria({
-                        operator: 'AND',
-                        groups: [
-                            {
-                                operator: 'AND',
-                                filters: defaultFilters,
-                            },
-                        ],
-                    });
-                }
+                template.quickFilters.forEach((quickFilter) => {
+                    let filterValue = convertDynamicDateValue(quickFilter.value);
+
+                    // Parse the field to extract table and column
+                    const fieldParts = quickFilter.field.split('.');
+                    const table = fieldParts[0];
+                    const column = fieldParts.slice(1).join('.'); // Handle cases like "leads.user.name"
+
+                    // Convert date range objects to comma-separated string for BETWEEN operator
+                    if (quickFilter.type === 'date_range' && typeof filterValue === 'object' && filterValue.start && filterValue.end) {
+                        filterValue = `${filterValue.start},${filterValue.end}`;
+                    }
+
+                    const newFilter = {
+                        id: `template_${quickFilter.id}_${Date.now()}`,
+                        field: quickFilter.field,
+                        table: table,
+                        column: column,
+                        operator:
+                            quickFilter.operator ||
+                            (quickFilter.type === 'date_range' ? 'BETWEEN' : '='),
+                        value: filterValue,
+                        label: quickFilter.label,
+                        type: quickFilter.type,
+                    };
+
+                    updatedFilterCriteria.groups[0].filters.push(newFilter);
+                });
+
+                setFilterCriteria(updatedFilterCriteria);
+                
             }
 
             // Apply template grouping configuration
@@ -4641,32 +4675,26 @@ const GenericReportImproved = ({
         handleRemoveFilterCriterion(groupIndex, filterIndex);
     };
 
-    // Apply template-based quick filter
-    const applyTemplateQuickFilter = (quickFilter) => {
-        let filterValue = quickFilter.value;
-
-        // Handle dynamic date ranges
-        switch (quickFilter.value) {
+    // Helper function to convert dynamic date values to actual date ranges
+    const convertDynamicDateValue = (value) => {
+        switch (value) {
             case 'current_week':
-                filterValue = {
+                return {
                     start: moment().startOf('week').format('YYYY-MM-DD'),
                     end: moment().endOf('week').format('YYYY-MM-DD'),
                 };
-                break;
             case 'next_30_days':
-                filterValue = {
+                return {
                     start: moment().format('YYYY-MM-DD'),
                     end: moment().add(30, 'days').format('YYYY-MM-DD'),
                 };
-                break;
             case 'last_30_days':
-                filterValue = {
+                return {
                     start: moment().subtract(30, 'days').format('YYYY-MM-DD'),
                     end: moment().format('YYYY-MM-DD'),
                 };
-                break;
             case 'last_quarter':
-                filterValue = {
+                return {
                     start: moment()
                         .subtract(1, 'quarter')
                         .startOf('quarter')
@@ -4676,9 +4704,8 @@ const GenericReportImproved = ({
                         .endOf('quarter')
                         .format('YYYY-MM-DD'),
                 };
-                break;
             case 'last_year':
-                filterValue = {
+                return {
                     start: moment()
                         .subtract(1, 'year')
                         .startOf('year')
@@ -4688,12 +4715,44 @@ const GenericReportImproved = ({
                         .endOf('year')
                         .format('YYYY-MM-DD'),
                 };
-                break;
+            case 'today':
+                return moment().format('YYYY-MM-DD');
+            case 'yesterday':
+                return moment().subtract(1, 'day').format('YYYY-MM-DD');
+            case 'current_month':
+                return {
+                    start: moment().startOf('month').format('YYYY-MM-DD'),
+                    end: moment().endOf('month').format('YYYY-MM-DD'),
+                };
+            case 'current_year':
+                return {
+                    start: moment().startOf('year').format('YYYY-MM-DD'),
+                    end: moment().endOf('year').format('YYYY-MM-DD'),
+                };
+            default:
+                return value; // Return original value if no conversion needed
+        }
+    };
+
+    // Apply template-based quick filter
+    const applyTemplateQuickFilter = (quickFilter) => {
+        let filterValue = convertDynamicDateValue(quickFilter.value);
+
+        // Parse the field to extract table and column
+        const fieldParts = quickFilter.field.split('.');
+        const table = fieldParts[0];
+        const column = fieldParts.slice(1).join('.'); // Handle cases like "leads.user.name"
+
+        // Convert date range objects to comma-separated string for BETWEEN operator
+        if (quickFilter.type === 'date_range' && typeof filterValue === 'object' && filterValue.start && filterValue.end) {
+            filterValue = `${filterValue.start},${filterValue.end}`;
         }
 
         const newFilter = {
             id: `template_${quickFilter.id}_${Date.now()}`,
             field: quickFilter.field,
+            table: table,
+            column: column,
             operator:
                 quickFilter.operator ||
                 (quickFilter.type === 'date_range' ? 'BETWEEN' : '='),
@@ -5510,6 +5569,7 @@ const GenericReportImproved = ({
             suggestions: smartSuggestions,
         });
 
+
         return (
             <div className={styles.filtersSection}>
                 {/* Template Quick Filters */}
@@ -7039,49 +7099,51 @@ const GenericReportImproved = ({
                         </div>
                     )}
 
-                    {/* Custom URLs Configuration */}
-                    <div className={styles.customUrlsSection}>
-                        <h4 className={styles.sectionTitle}>Custom API Endpoints (Optional)</h4>
-                        <p className={styles.helpText}>
-                            Override default API endpoints for specialized report handling
-                        </p>
-                        
-                        <div className={styles.optionsGrid}>
-                            <div className={styles.formGroup}>
-                                <label className={styles.formLabel}>Custom Execute URL</label>
-                                <input
-                                    type="text"
-                                    value={customUrls.executeUrl}
-                                    onChange={(e) => setCustomUrls({
-                                        ...customUrls,
-                                        executeUrl: e.target.value
-                                    })}
-                                    placeholder="/api/custom-reports/execute"
-                                    className={styles.formInput}
-                                />
-                                <p className={styles.fieldHelp}>
-                                    Custom endpoint for report execution (overrides template and default URLs)
-                                </p>
-                            </div>
+                    {/* Custom URLs Configuration - Only show when grouping is enabled */}
+                    {groupingConfig.enabled && (
+                        <div className={styles.customUrlsSection}>
+                            <h4 className={styles.sectionTitle}>Custom API Endpoints (Optional)</h4>
+                            <p className={styles.helpText}>
+                                Override default API endpoints for specialized report handling
+                            </p>
                             
-                            <div className={styles.formGroup}>
-                                <label className={styles.formLabel}>Custom Export URL</label>
-                                <input
-                                    type="text"
-                                    value={customUrls.exportUrl}
-                                    onChange={(e) => setCustomUrls({
-                                        ...customUrls,
-                                        exportUrl: e.target.value
-                                    })}
-                                    placeholder="/api/custom-reports/export"
-                                    className={styles.formInput}
-                                />
-                                <p className={styles.fieldHelp}>
-                                    Custom endpoint for report exports (for server-side exports)
-                                </p>
+                            <div className={styles.optionsGrid}>
+                                <div className={styles.formGroup}>
+                                    <label className={styles.formLabel}>Custom Execute URL</label>
+                                    <input
+                                        type="text"
+                                        value={customUrls.executeUrl}
+                                        onChange={(e) => setCustomUrls({
+                                            ...customUrls,
+                                            executeUrl: e.target.value
+                                        })}
+                                        placeholder="/api/custom-reports/execute"
+                                        className={styles.formInput}
+                                    />
+                                    <p className={styles.fieldHelp}>
+                                        Custom endpoint for report execution (overrides template and default URLs)
+                                    </p>
+                                </div>
+                                
+                                <div className={styles.formGroup}>
+                                    <label className={styles.formLabel}>Custom Export URL</label>
+                                    <input
+                                        type="text"
+                                        value={customUrls.exportUrl}
+                                        onChange={(e) => setCustomUrls({
+                                            ...customUrls,
+                                            exportUrl: e.target.value
+                                        })}
+                                        placeholder="/api/custom-reports/export"
+                                        className={styles.formInput}
+                                    />
+                                    <p className={styles.fieldHelp}>
+                                        Custom endpoint for report exports (for server-side exports)
+                                    </p>
+                                </div>
                             </div>
                         </div>
-                    </div>
+                    )}
                 </div>
             </div>
         );
@@ -7279,13 +7341,60 @@ const GenericReportImproved = ({
                                                                                 <span style={{color: '#6c757d', fontWeight: '500'}}>No</span>;
                                                                         }
                                                                         
-                                                                        // Handle numeric values
+                                                                        // Handle numeric values (but exclude potential boolean columns)
                                                                         if (typeof value === 'number' && !col.name.toLowerCase().includes('status')) {
-                                                                            return value.toLocaleString();
+                                                                            const columnName = col.name.toLowerCase();
+                                                                            // Don't format as numbers if they might be boolean values
+                                                                            const mightBeBoolean = (value === 0 || value === 1) && (
+                                                                                columnName.includes('is_') || columnName.includes('has_') || columnName.includes('confirmed') || 
+                                                                                columnName.includes('active') || columnName.includes('enabled') || columnName.includes('completed') ||
+                                                                                columnName.includes('stage') || columnName.includes('final') || columnName.includes('flag') ||
+                                                                                columnName.includes('approved') || columnName.includes('verified') || columnName.includes('sent') ||
+                                                                                columnName.endsWith('?')
+                                                                            );
+                                                                            
+                                                                            if (!mightBeBoolean) {
+                                                                                return value.toLocaleString();
+                                                                            }
                                                                         }
                                                                         
-                                                                        // Default string handling
-                                                                        return value;
+                                                                        // Use formatCellContent for all other values including dates and smart boolean formatting
+                                                                        const formattedValue = formatCellContent(value, {
+                                                                            id: col.name,
+                                                                            name: col.name,
+                                                                            // Get type from template column definition if available, otherwise infer
+                                                                            type: (() => {
+                                                                                // First try to find type from template's defaultColumns
+                                                                                if (selectedTemplate?.defaultColumns) {
+                                                                                    const templateColumn = selectedTemplate.defaultColumns.find(
+                                                                                        tc => `${tc.table}.${tc.column}` === col.name || tc.column === col.name
+                                                                                    );
+                                                                                    if (templateColumn?.type) {
+                                                                                        return templateColumn.type;
+                                                                                    }
+                                                                                }
+                                                                                
+                                                                                // Fallback to column name-based type inference
+                                                                                const columnName = col.name.toLowerCase();
+                                                                                // Date column detection
+                                                                                if (columnName.includes('date') || columnName.includes('time') || columnName.includes('created_at') || columnName.includes('updated_at')) {
+                                                                                    return 'date';
+                                                                                }
+                                                                                // Boolean column detection - enhanced logic
+                                                                                if (columnName.includes('is_') || columnName.includes('has_') || columnName.includes('confirmed') || 
+                                                                                    columnName.includes('active') || columnName.includes('enabled') || columnName.includes('completed') ||
+                                                                                    columnName.includes('stage') || columnName.includes('final') || columnName.includes('flag') ||
+                                                                                    columnName.includes('approved') || columnName.includes('verified') || columnName.includes('sent') ||
+                                                                                    columnName.endsWith('?') || // Handle columns like "Confirmed?"
+                                                                                    (typeof value === 'number' && (value === 0 || value === 1)) ||
+                                                                                    (typeof value === 'string' && (value === '0' || value === '1'))) {
+                                                                                    return 'boolean';
+                                                                                }
+                                                                                return undefined; // Let formatCellContent auto-detect
+                                                                            })()
+                                                                        });
+                                                                        
+                                                                        return formattedValue;
                                                                     })()}
                                                                 </td>
                                                             ))}
@@ -7295,6 +7404,148 @@ const GenericReportImproved = ({
                                             </tbody>
                                         </table>
                                     </div>
+                                    
+                                    {/* Pagination Controls */}
+                                    {previewData.length > 0 && (
+                                        <div className={styles.paginationContainer}>
+                                            <div className={styles.paginationInfo}>
+                                                {(() => {
+                                                    const startRecord = Math.min((currentPage - 1) * pageSize + 1, totalCount);
+                                                    const endRecord = Math.min(currentPage * pageSize, totalCount);
+                                                    return `Showing ${startRecord}-${endRecord} of ${totalCount} records`;
+                                                })()}
+                                            </div>
+                                            
+                                            <div className={styles.paginationControls}>
+                                                <div className={styles.pageSizeSelector}>
+                                                    <label>Show:</label>
+                                                    <select
+                                                        value={pageSize}
+                                                        onChange={(e) => {
+                                                            const newPageSize = parseInt(e.target.value);
+                                                            setPageSize(newPageSize);
+                                                            setCurrentPage(1); // Reset to first page
+                                                            // Re-execute the report with new page size
+                                                            if (previewData.length > 0) {
+                                                                executeReport();
+                                                            }
+                                                        }}
+                                                        className={styles.pageSizeSelect}
+                                                    >
+                                                        <option value={10}>10</option>
+                                                        <option value={25}>25</option>
+                                                        <option value={50}>50</option>
+                                                        <option value={100}>100</option>
+                                                        <option value={250}>250</option>
+                                                    </select>
+                                                    <span>records</span>
+                                                </div>
+                                                
+                                                <div className={styles.pageNavigation}>
+                                                    <button
+                                                        onClick={() => {
+                                                            if (currentPage > 1) {
+                                                                const newPage = currentPage - 1;
+                                                                setCurrentPage(newPage);
+                                                                executeReport();
+                                                            }
+                                                        }}
+                                                        disabled={currentPage <= 1}
+                                                        className={`${styles.pageBtn} ${currentPage <= 1 ? styles.disabled : ''}`}
+                                                    >
+                                                        ‹ Previous
+                                                    </button>
+                                                    
+                                                    <div className={styles.pageNumbers}>
+                                                        {(() => {
+                                                            const maxPagesToShow = 5;
+                                                            const totalPages = Math.ceil(totalCount / pageSize);
+                                                            let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+                                                            let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+                                                            
+                                                            // Adjust start if we're near the end
+                                                            if (endPage - startPage < maxPagesToShow - 1) {
+                                                                startPage = Math.max(1, endPage - maxPagesToShow + 1);
+                                                            }
+                                                            
+                                                            const pages = [];
+                                                            
+                                                            // Add first page and ellipsis if needed
+                                                            if (startPage > 1) {
+                                                                pages.push(
+                                                                    <button
+                                                                        key={1}
+                                                                        onClick={() => {
+                                                                            setCurrentPage(1);
+                                                                            executeReport();
+                                                                        }}
+                                                                        className={`${styles.pageBtn} ${1 === currentPage ? styles.active : ''}`}
+                                                                    >
+                                                                        1
+                                                                    </button>
+                                                                );
+                                                                if (startPage > 2) {
+                                                                    pages.push(<span key="start-ellipsis" className={styles.ellipsis}>...</span>);
+                                                                }
+                                                            }
+                                                            
+                                                            // Add visible page numbers
+                                                            for (let i = startPage; i <= endPage; i++) {
+                                                                pages.push(
+                                                                    <button
+                                                                        key={i}
+                                                                        onClick={() => {
+                                                                            setCurrentPage(i);
+                                                                            executeReport();
+                                                                        }}
+                                                                        className={`${styles.pageBtn} ${i === currentPage ? styles.active : ''}`}
+                                                                    >
+                                                                        {i}
+                                                                    </button>
+                                                                );
+                                                            }
+                                                            
+                                                            // Add ellipsis and last page if needed
+                                                            if (endPage < totalPages) {
+                                                                if (endPage < totalPages - 1) {
+                                                                    pages.push(<span key="end-ellipsis" className={styles.ellipsis}>...</span>);
+                                                                }
+                                                                pages.push(
+                                                                    <button
+                                                                        key={totalPages}
+                                                                        onClick={() => {
+                                                                            setCurrentPage(totalPages);
+                                                                            executeReport();
+                                                                        }}
+                                                                        className={`${styles.pageBtn} ${totalPages === currentPage ? styles.active : ''}`}
+                                                                    >
+                                                                        {totalPages}
+                                                                    </button>
+                                                                );
+                                                            }
+                                                            
+                                                            return pages;
+                                                        })()}
+                                                    </div>
+                                                    
+                                                    <button
+                                                        onClick={() => {
+                                                            const totalPages = Math.ceil(totalCount / pageSize);
+                                                            if (currentPage < totalPages) {
+                                                                const newPage = currentPage + 1;
+                                                                setCurrentPage(newPage);
+                                                                executeReport();
+                                                            }
+                                                        }}
+                                                        disabled={currentPage >= Math.ceil(totalCount / pageSize)}
+                                                        className={`${styles.pageBtn} ${currentPage >= Math.ceil(totalCount / pageSize) ? styles.disabled : ''}`}
+                                                    >
+                                                        Next ›
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
                                 </div>
                             </div>
                         </div>
@@ -7332,6 +7583,29 @@ const GenericReportImproved = ({
                         </div>
                     </>
                 )}
+
+                {/* Show no data message when no results found */}
+                {!groupedData && previewData.length === 0 && !isLoading && selectedTable && selectedColumns.length > 0 && (
+                    <div className={styles.noDataContainer}>
+                        <div className={styles.noDataMessage}>
+                            <div className={styles.noDataIcon}>
+                                <Database size={48} />
+                            </div>
+                            <h3 className={styles.noDataTitle}>No Data Found</h3>
+                            <p className={styles.noDataText}>
+                                No records match the selected filters and criteria.
+                            </p>
+                            <div className={styles.noDataSuggestions}>
+                                <p><strong>Try:</strong></p>
+                                <ul>
+                                    <li>Adjusting or removing filters</li>
+                                    <li>Selecting a broader date range</li>
+                                    <li>Checking if data exists for the selected table</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                )}
             </div>
         );
     };

package/src/components/generic/shared/formatters.js

@@ -2,6 +2,132 @@ import parse from 'html-react-parser';
 import moment from 'moment';
 import numeral from 'numeral';
 
+/**
+ * Smart boolean/binary value interpreter based on column name and context
+ * @param {string|number} value - The value (0/1, true/false, etc.)
+ * @param {Object} column - Column configuration with id/name
+ * @returns {string} Human-friendly representation
+ */
+const interpretBooleanValue = (value, column) => {
+    const columnName = (column.id || column.name || '').toLowerCase();
+    const isTrue = value === 1 || value === true || value === 'true' || value === 'yes' || value === 'Yes';
+    const isFalse = value === 0 || value === false || value === 'false' || value === 'no' || value === 'No';
+    
+    if (!isTrue && !isFalse) return value; // Return original if not clearly boolean
+    
+    // Contextual interpretations based on column name patterns
+    const interpretations = {
+        // Status/State patterns
+        'active': { true: 'Active', false: 'Inactive' },
+        'enabled': { true: 'Enabled', false: 'Disabled' },
+        'status': { true: 'Active', false: 'Inactive' },
+        'visible': { true: 'Visible', false: 'Hidden' },
+        'published': { true: 'Published', false: 'Draft' },
+        'public': { true: 'Public', false: 'Private' },
+        'live': { true: 'Live', false: 'Offline' },
+        
+        // Completion/Progress patterns
+        'completed': { true: 'Completed', false: 'Pending' },
+        'finished': { true: 'Finished', false: 'In Progress' },
+        'done': { true: 'Done', false: 'To Do' },
+        'complete': { true: 'Complete', false: 'Incomplete' },
+        'resolved': { true: 'Resolved', false: 'Open' },
+        'closed': { true: 'Closed', false: 'Open' },
+        
+        // Approval/Verification patterns
+        'approved': { true: 'Approved', false: 'Pending' },
+        'verified': { true: 'Verified', false: 'Unverified' },
+        'confirmed': { true: 'Confirmed', false: 'Unconfirmed' },
+        'accepted': { true: 'Accepted', false: 'Rejected' },
+        'valid': { true: 'Valid', false: 'Invalid' },
+        
+        // Access/Permission patterns
+        'allowed': { true: 'Allowed', false: 'Denied' },
+        'permitted': { true: 'Permitted', false: 'Restricted' },
+        'authorized': { true: 'Authorized', false: 'Unauthorized' },
+        'locked': { true: 'Locked', false: 'Unlocked' },
+        
+        // Notification/Communication patterns
+        'sent': { true: 'Sent', false: 'Not Sent' },
+        'delivered': { true: 'Delivered', false: 'Pending' },
+        'read': { true: 'Read', false: 'Unread' },
+        'notified': { true: 'Notified', false: 'Not Notified' },
+        
+        // Business/Financial patterns
+        'paid': { true: 'Paid', false: 'Unpaid' },
+        'invoiced': { true: 'Invoiced', false: 'Not Invoiced' },
+        'billed': { true: 'Billed', false: 'Unbilled' },
+        'taxable': { true: 'Taxable', false: 'Tax Free' },
+        
+        // Quality/Condition patterns
+        'available': { true: 'Available', false: 'Unavailable' },
+        'ready': { true: 'Ready', false: 'Not Ready' },
+        'urgent': { true: 'Urgent', false: 'Normal' },
+        'priority': { true: 'High Priority', false: 'Normal Priority' },
+        'critical': { true: 'Critical', false: 'Normal' },
+        
+        // Agreement/Contract patterns
+        'signed': { true: 'Signed', false: 'Unsigned' },
+        'executed': { true: 'Executed', false: 'Draft' },
+        'expired': { true: 'Expired', false: 'Current' },
+        
+        // Project/Work patterns
+        'assigned': { true: 'Assigned', false: 'Unassigned' },
+        'allocated': { true: 'Allocated', false: 'Available' },
+        'booked': { true: 'Booked', false: 'Available' },
+        'scheduled': { true: 'Scheduled', false: 'Unscheduled' },
+        'stage': { true: 'Completed', false: 'Pending' },
+        'final': { true: 'Completed', false: 'Incomplete' },
+        'finished': { true: 'Finished', false: 'In Progress' },
+        'done': { true: 'Done', false: 'To Do' },
+        
+        // System/Technical patterns
+        'online': { true: 'Online', false: 'Offline' },
+        'connected': { true: 'Connected', false: 'Disconnected' },
+        'synced': { true: 'Synced', false: 'Not Synced' },
+        'backup': { true: 'Backed Up', false: 'Not Backed Up' },
+    };
+    
+    // Try to find a match based on column name
+    for (const [pattern, values] of Object.entries(interpretations)) {
+        if (columnName.includes(pattern)) {
+            return isTrue ? values.true : values.false;
+        }
+    }
+    
+    // Special handling for specific common patterns
+    if (columnName.includes('is_') || columnName.startsWith('has_') || columnName.endsWith('_flag')) {
+        // Extract the meaningful part
+        const meaningfulPart = columnName
+            .replace(/^(is_|has_)/, '')
+            .replace(/_flag$/, '')
+            .replace(/_/g, ' ')
+            .replace(/\b\w/g, l => l.toUpperCase()); // Title case
+        
+        return isTrue ? meaningfulPart : `Not ${meaningfulPart}`;
+    }
+    
+    // Default fallback - still better than raw 0/1
+    return isTrue ? 'Yes' : 'No';
+};
+
+/**
+ * Auto-detect appropriate date format based on value content
+ * @param {*} value - The date value to analyze
+ * @param {string} fallbackFormat - Default format if detection fails
+ * @returns {string} Appropriate moment.js format string
+ */
+export const autoDetectDateFormat = (value, fallbackFormat = 'DD-MM-YYYY') => {
+    if (!value || !moment(value).isValid()) {
+        return fallbackFormat;
+    }
+    
+    const momentValue = moment(value);
+    const hasTime = momentValue.format('HH:mm:ss') !== '00:00:00';
+    
+    return hasTime ? 'DD-MM-YYYY HH:mm' : 'DD-MM-YYYY';
+};
+
 /**
  * Format quarter columns with status, contacts, and reasons in tooltips
  * @param {*} value - The date value
@@ -29,7 +155,7 @@ const formatQuarterWithStatus = (value, column, row) => {
     // If status is 'sent' and we have a date
     if (status === 'sent' && value) {
         const formattedDate = moment(value).isValid() 
-            ? moment(value).format('DD/MM/YYYY')
+            ? moment(value).format('DD-MM-YYYY')
             : value;
         
         const contactCount = Array.isArray(contacts) ? contacts.length : 0;
@@ -71,7 +197,7 @@ const formatQuarterWithStatus = (value, column, row) => {
     // If we have a date but no clear status (legacy data)
     if (value) {
         const formattedDate = moment(value).isValid() 
-            ? moment(value).format('DD/MM/YYYY')
+            ? moment(value).format('DD-MM-YYYY')
             : value;
         
         const contactCount = Array.isArray(contacts) ? contacts.length : 0;
@@ -125,11 +251,11 @@ export const formatCellContent = (value, column, row = null) => {
     switch (valueType) {
         case 'date':
             return moment(value).isValid()
-                ? moment(value).format(column.format || 'DD/MM/YYYY')
+                ? moment(value).format(column.format || autoDetectDateFormat(value, 'DD-MM-YYYY'))
                 : value;
         case 'datetime':
             return moment(value).isValid()
-                ? moment(value).format(column.format || 'DD/MM/YYYY HH:mm')
+                ? moment(value).format(column.format || autoDetectDateFormat(value, 'DD-MM-YYYY HH:mm'))
                 : value;
         case 'currency':
             return numeral(value).format(column.format || '$0,0.00');
@@ -139,25 +265,7 @@ export const formatCellContent = (value, column, row = null) => {
                 ? numeral(value).format(column.format || '0,0')
                 : value;
         case 'boolean':
-            if (
-                value === 1 ||
-                value === true ||
-                value === 'true' ||
-                value === 'yes' ||
-                value === 'Yes'
-            ) {
-                return 'Yes';
-            }
-            if (
-                value === 0 ||
-                value === false ||
-                value === 'false' ||
-                value === 'no' ||
-                value === 'No'
-            ) {
-                return 'No';
-            }
-            return value;
+            return interpretBooleanValue(value, column);
         case 'year':
             // Special handling for year values
             return value.toString();
@@ -174,6 +282,27 @@ export const formatCellContent = (value, column, row = null) => {
             // Parse rich text content
             return parse(String(value));
         default:
+            // Check if this might be a boolean value based on its content
+            if ((value === 0 || value === 1) && column.id) {
+                // Only apply smart boolean interpretation if the column name suggests it's boolean
+                const columnName = (column.id || column.name || '').toLowerCase();
+                const booleanIndicators = [
+                    'is_', 'has_', 'can_', 'should_', 'will_', 'did_',
+                    'active', 'enabled', 'completed', 'confirmed', 'approved', 'verified',
+                    'sent', 'delivered', 'paid', 'signed', 'expired', 'urgent', 'critical',
+                    'public', 'visible', 'available', 'ready', 'locked', 'online',
+                    '_flag', '_status', '_state'
+                ];
+                
+                const seemsBooleanish = booleanIndicators.some(indicator => 
+                    columnName.includes(indicator)
+                );
+                
+                if (seemsBooleanish) {
+                    return interpretBooleanValue(value, column);
+                }
+            }
+            
             // For text values, check if it contains HTML tags
             if (
                 typeof value === 'string' &&

package/src/components/styles/GenericReport.module.scss

@@ -3503,3 +3503,331 @@
     border-radius: var(--radius);
     border: 1px solid var(--border-color);
 }
+
+/* Enhanced Pagination Styles */
+.paginationContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px 20px;
+    background-color: var(--tertiary-color);
+    border-top: 1px solid var(--border-color);
+    border-radius: 0 0 var(--radius) var(--radius);
+}
+
+.paginationInfo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.875rem;
+    color: var(--paragraph-color);
+    font-weight: 500;
+    margin: 0;
+    padding: 0;
+    background: none;
+    border: none;
+}
+
+.paginationControls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+    
+    @media (max-width: 768px) {
+        flex-direction: column;
+        gap: 12px;
+    }
+}
+
+.pageSizeSelector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.875rem;
+    color: var(--paragraph-color);
+    
+    label {
+        font-weight: 500;
+        color: var(--header-color);
+        margin: 0;
+    }
+    
+    span {
+        font-weight: 400;
+        color: var(--paragraph-color);
+    }
+}
+
+.pageSizeSelect {
+    padding: 6px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    background-color: var(--bg-color);
+    color: var(--header-color);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    
+    &:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
+    }
+    
+    &:hover {
+        border-color: var(--primary-color);
+    }
+}
+
+.pageNavigation {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    @media (max-width: 768px) {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+.pageNumbers {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    
+    @media (max-width: 480px) {
+        gap: 2px;
+    }
+}
+
+.pageBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 36px;
+    padding: 0 8px;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-color);
+    color: var(--paragraph-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    user-select: none;
+    
+    &:hover:not(.disabled) {
+        background-color: var(--secondary-color);
+        border-color: var(--primary-color);
+        color: var(--header-color);
+        transform: translateY(-1px);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    
+    &:active:not(.disabled) {
+        transform: translateY(0);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+    
+    &.active {
+        background-color: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+        font-weight: 600;
+        box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.3);
+        
+        &:hover {
+            background-color: var(--primary-dark-color);
+            transform: none;
+        }
+    }
+    
+    &.disabled {
+        background-color: var(--tertiary-color);
+        border-color: var(--border-color);
+        color: var(--disabled-color, #9CA3AF);
+        cursor: not-allowed;
+        opacity: 0.6;
+        
+        &:hover {
+            transform: none;
+            box-shadow: none;
+            background-color: var(--tertiary-color);
+            border-color: var(--border-color);
+        }
+    }
+    
+    @media (max-width: 480px) {
+        min-width: 32px;
+        height: 32px;
+        font-size: 0.8rem;
+        padding: 0 6px;
+    }
+}
+
+.ellipsis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 36px;
+    color: var(--paragraph-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    user-select: none;
+    
+    @media (max-width: 480px) {
+        min-width: 24px;
+        height: 32px;
+        font-size: 0.8rem;
+    }
+}
+
+/* Pagination animations */
+@keyframes paginationSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.paginationContainer {
+    animation: paginationSlideIn 0.3s ease-out;
+}
+
+/* Loading state for pagination */
+.paginationContainer.loading {
+    opacity: 0.6;
+    pointer-events: none;
+    
+    .pageBtn {
+        cursor: wait;
+    }
+    
+    .pageSizeSelect {
+        cursor: wait;
+    }
+}
+
+/* Enhanced accessibility */
+.pageBtn:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.pageSizeSelect:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* No Data Message Styles */
+.noDataContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+    padding: 40px 20px;
+}
+
+.noDataMessage {
+    text-align: center;
+    max-width: 500px;
+    padding: 40px;
+    background-color: var(--tertiary-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    box-shadow: var(--box-shadow-small);
+}
+
+.noDataIcon {
+    margin-bottom: 20px;
+    opacity: 0.7;
+    color: var(--paragraph-color);
+    
+    svg {
+        width: 48px;
+        height: 48px;
+    }
+}
+
+.noDataTitle {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--header-color);
+    margin: 0 0 12px 0;
+}
+
+.noDataText {
+    font-size: 1rem;
+    color: var(--paragraph-color);
+    margin: 0 0 24px 0;
+    line-height: 1.5;
+}
+
+.noDataSuggestions {
+    text-align: left;
+    background-color: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 20px;
+    margin-top: 20px;
+    
+    p {
+        margin: 0 0 12px 0;
+        font-weight: 600;
+        color: var(--header-color);
+        font-size: 0.9rem;
+    }
+    
+    ul {
+        margin: 0;
+        padding-left: 20px;
+        color: var(--paragraph-color);
+        
+        li {
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+            line-height: 1.4;
+            
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+/* Responsive adjustments for no data message */
+@media (max-width: 768px) {
+    .noDataContainer {
+        min-height: 300px;
+        padding: 20px 15px;
+    }
+    
+    .noDataMessage {
+        padding: 30px 20px;
+    }
+    
+    .noDataIcon {
+        margin-bottom: 16px;
+        
+        svg {
+            width: 40px;
+            height: 40px;
+        }
+    }
+    
+    .noDataTitle {
+        font-size: 1.3rem;
+    }
+    
+    .noDataText {
+        font-size: 0.9rem;
+    }
+}