@visns-studio/visns-components 5.14.9 → 5.14.11

package/src/components/generic/groupedReport.css

@@ -0,0 +1,307 @@
+/* Grouped Report Base Styles */
+.grouped-report {
+    --group-header-bg-primary: #2c5282;
+    --group-header-bg-secondary: #4a5568;
+    --group-header-bg-success: #38a169;
+    --group-header-bg-warning: #d69e2e;
+    --group-header-bg-danger: #e53e3e;
+    --group-header-color: white;
+    --empty-row-bg-light: #f8f9fa;
+    --empty-row-bg-transparent: transparent;
+    --border-color: #dee2e6;
+    --border-color-light: #e2e8f0;
+    --text-muted: #6c757d;
+}
+
+.grouped-report * {
+    box-sizing: border-box;
+}
+
+/* Report Header */
+.grouped-report-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background-color: #f8f9fa;
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-color);
+}
+
+.grouped-report-summary {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.summary-text {
+    font-weight: 500;
+    color: var(--text-muted);
+}
+
+.grouped-report-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.btn-export {
+    background-color: #0d6efd;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background-color 0.15s ease-in-out;
+}
+
+.btn-export:hover {
+    background-color: #0b5ed7;
+}
+
+/* Section-based Grouping */
+.section-grouped-report {
+    width: 100%;
+}
+
+.grouped-report--sections .group-section {
+    margin-bottom: 2rem;
+    page-break-inside: avoid;
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+/* Group Headers */
+.group-header {
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--group-header-color);
+}
+
+.group-header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.group-title {
+    font-size: 1rem;
+    margin: 0;
+}
+
+.group-stats {
+    font-size: 0.875rem;
+    font-weight: 400;
+    opacity: 0.9;
+}
+
+/* Group Header Styles */
+.group-section--primary .group-header {
+    background-color: var(--group-header-bg-primary);
+}
+
+.group-section--secondary .group-header {
+    background-color: var(--group-header-bg-secondary);
+}
+
+.group-section--success .group-header {
+    background-color: var(--group-header-bg-success);
+}
+
+.group-section--warning .group-header {
+    background-color: var(--group-header-bg-warning);
+}
+
+.group-section--danger .group-header {
+    background-color: var(--group-header-bg-danger);
+}
+
+/* Group Content */
+.group-content {
+    background-color: white;
+}
+
+.group-table,
+.grouped-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0;
+}
+
+.group-table thead th,
+.grouped-table thead th {
+    background-color: #f8f9fa;
+    color: #495057;
+    font-weight: 600;
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 2px solid var(--border-color);
+    border-right: 1px solid var(--border-color-light);
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.group-table thead th:last-child,
+.grouped-table thead th:last-child {
+    border-right: none;
+}
+
+.group-table thead th.required-column,
+.grouped-table thead th.required-column {
+    background-color: #e3f2fd;
+    font-weight: 700;
+}
+
+.group-table tbody td,
+.grouped-table tbody td {
+    padding: 0.75rem;
+    border-bottom: 1px solid var(--border-color-light);
+    border-right: 1px solid var(--border-color-light);
+    vertical-align: top;
+    font-size: 0.875rem;
+}
+
+.group-table tbody td:last-child,
+.grouped-table tbody td:last-child {
+    border-right: none;
+}
+
+.group-table tbody td.required-column,
+.grouped-table tbody td.required-column {
+    font-weight: 500;
+}
+
+/* Data Rows */
+.data-row {
+    background-color: white;
+    transition: background-color 0.15s ease-in-out;
+}
+
+.data-row:hover {
+    background-color: #f8f9fa;
+}
+
+.data-row:nth-child(even) {
+    background-color: #fbfcfd;
+}
+
+.data-row:nth-child(even):hover {
+    background-color: #f1f3f4;
+}
+
+/* Empty Rows */
+.empty-row td {
+    height: 2.5rem;
+    min-height: 2.5rem;
+    border-bottom: 1px solid var(--border-color-light);
+}
+
+.empty-row--light {
+    background-color: var(--empty-row-bg-light);
+}
+
+.empty-row--transparent {
+    background-color: var(--empty-row-bg-transparent);
+}
+
+.empty-row--striped:nth-child(even) {
+    background-color: #f8f9fa;
+}
+
+/* Empty State */
+.grouped-report-empty {
+    text-align: center;
+    padding: 3rem;
+    color: var(--text-muted);
+    background-color: #f8f9fa;
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+}
+
+.grouped-report-error {
+    text-align: center;
+    padding: 2rem;
+    color: #dc3545;
+    background-color: #f8d7da;
+    border: 1px solid #f5c6cb;
+    border-radius: 0.5rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .grouped-report-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+    
+    .group-table,
+    .grouped-table {
+        font-size: 0.75rem;
+    }
+    
+    .group-table thead th,
+    .group-table tbody td,
+    .grouped-table thead th,
+    .grouped-table tbody td {
+        padding: 0.5rem;
+    }
+    
+    .group-header {
+        padding: 0.5rem;
+    }
+    
+    .group-title {
+        font-size: 0.875rem;
+    }
+    
+    .group-stats {
+        font-size: 0.75rem;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .grouped-report-actions {
+        display: none;
+    }
+    
+    .group-section {
+        page-break-inside: avoid;
+        margin-bottom: 1rem;
+        border: 1px solid #000;
+    }
+    
+    .group-header {
+        background-color: #000 !important;
+        color: white !important;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+    
+    .group-table,
+    .grouped-table {
+        border-collapse: collapse;
+    }
+    
+    .group-table thead th,
+    .group-table tbody td,
+    .grouped-table thead th,
+    .grouped-table tbody td {
+        border: 1px solid #000;
+    }
+    
+    .empty-row--light {
+        background-color: #f0f0f0 !important;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+}

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/generic/shared/groupingUtils.js

@@ -0,0 +1,118 @@
+export const getNestedValue = (obj, path) => {
+    if (typeof path === 'string') {
+        path = path.split('.');
+    }
+    return path.reduce((current, key) => current?.[key], obj) || '';
+};
+
+export const formatCellValue = (value, column) => {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+    
+    switch (column.type) {
+        case 'date':
+            return new Date(value).toLocaleDateString();
+        case 'datetime':
+            return new Date(value).toLocaleString();
+        case 'decimal':
+            return parseFloat(value).toFixed(2);
+        case 'integer':
+            return parseInt(value).toLocaleString();
+        case 'currency':
+            return new Intl.NumberFormat('en-AU', {
+                style: 'currency',
+                currency: 'AUD'
+            }).format(value);
+        default:
+            return value.toString();
+    }
+};
+
+export const sortGroups = (groups, sortDirection = 'asc', customOrder = null) => {
+    if (customOrder) {
+        return groups.sort((a, b) => {
+            const aIndex = customOrder.indexOf(a.groupName);
+            const bIndex = customOrder.indexOf(b.groupName);
+            
+            // If both found in custom order, sort by position
+            if (aIndex !== -1 && bIndex !== -1) {
+                return aIndex - bIndex;
+            }
+            
+            // If only one found, prioritize it
+            if (aIndex !== -1) return -1;
+            if (bIndex !== -1) return 1;
+            
+            // If neither found, sort alphabetically
+            return sortDirection === 'asc' 
+                ? a.groupName.localeCompare(b.groupName)
+                : b.groupName.localeCompare(a.groupName);
+        });
+    }
+    
+    return groups.sort((a, b) => {
+        return sortDirection === 'asc'
+            ? a.groupName.localeCompare(b.groupName)
+            : b.groupName.localeCompare(a.groupName);
+    });
+};
+
+export const processGroupData = (data, groupingConfig) => {
+    if (!data || !Array.isArray(data) || !groupingConfig?.enabled) {
+        return {
+            grouped: false,
+            data: data || []
+        };
+    }
+    
+    const { groupByField, rowsPerGroup = 10, showEmptyRows = true } = groupingConfig;
+    
+    // Group data by the specified field
+    const grouped = data.reduce((acc, row) => {
+        const groupValue = getNestedValue(row, groupByField) || 'Unassigned';
+        if (!acc[groupValue]) {
+            acc[groupValue] = [];
+        }
+        acc[groupValue].push(row);
+        return acc;
+    }, {});
+    
+    // Process each group
+    const processedGroups = Object.keys(grouped).map(groupName => {
+        const rows = grouped[groupName];
+        const emptyRows = [];
+        
+        if (showEmptyRows && rows.length < rowsPerGroup) {
+            const emptyRowsCount = rowsPerGroup - rows.length;
+            for (let i = 0; i < emptyRowsCount; i++) {
+                emptyRows.push({ __empty_row__: true, id: `empty_${groupName}_${i}` });
+            }
+        }
+        
+        return {
+            groupName,
+            groupDisplayName: groupName,
+            rows,
+            emptyRows,
+            totalRows: rows.length,
+            maxRows: rowsPerGroup,
+            hasData: rows.length > 0
+        };
+    });
+    
+    // Sort groups
+    const sortedGroups = sortGroups(
+        processedGroups, 
+        groupingConfig.sortDirection,
+        groupingConfig.customGroupOrder
+    );
+    
+    return {
+        grouped: true,
+        groupingConfig,
+        groups: sortedGroups,
+        totalGroups: sortedGroups.length,
+        totalRecords: data.length
+    };
+};