@visns-studio/visns-components 5.14.8 → 5.14.10

package/src/components/generic/GroupedReportRenderer.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SectionGroupedReport from './SectionGroupedReport';
+import './groupedReport.css';
+
+const GroupedReportRenderer = ({ data, config, columns, onExport }) => {
+    const renderByType = () => {
+        switch (config.type) {
+            case 'sections':
+                return (
+                    <SectionGroupedReport 
+                        data={data} 
+                        config={config} 
+                        columns={columns}
+                        onExport={onExport}
+                    />
+                );
+            // Future grouping types can be added here
+            case 'accordion':
+            case 'cards':
+            case 'nested_table':
+            default:
+                return (
+                    <SectionGroupedReport 
+                        data={data} 
+                        config={config} 
+                        columns={columns}
+                        onExport={onExport}
+                    />
+                );
+        }
+    };
+    
+    if (!data.grouped || !data.groups) {
+        return (
+            <div className="grouped-report-error">
+                <p>Error: Invalid grouped data structure</p>
+            </div>
+        );
+    }
+    
+    return (
+        <div className={`grouped-report grouped-report--${config.type || 'sections'}`}>
+            {data.groups.length === 0 ? (
+                <div className="grouped-report-empty">
+                    <p>No data available for the selected criteria.</p>
+                </div>
+            ) : (
+                renderByType()
+            )}
+        </div>
+    );
+};
+
+GroupedReportRenderer.propTypes = {
+    data: PropTypes.shape({
+        grouped: PropTypes.bool.isRequired,
+        groups: PropTypes.arrayOf(PropTypes.shape({
+            groupName: PropTypes.string.isRequired,
+            groupDisplayName: PropTypes.string.isRequired,
+            rows: PropTypes.array.isRequired,
+            emptyRows: PropTypes.array.isRequired,
+            totalRows: PropTypes.number.isRequired,
+            maxRows: PropTypes.number.isRequired,
+            hasData: PropTypes.bool.isRequired
+        })).isRequired,
+        totalGroups: PropTypes.number.isRequired,
+        totalRecords: PropTypes.number.isRequired
+    }).isRequired,
+    config: PropTypes.shape({
+        type: PropTypes.string,
+        groupDisplayName: PropTypes.string,
+        showGroupTotals: PropTypes.bool,
+        groupHeaderStyle: PropTypes.string,
+        emptyRowStyle: PropTypes.string
+    }).isRequired,
+    columns: PropTypes.arrayOf(PropTypes.shape({
+        table: PropTypes.string.isRequired,
+        column: PropTypes.string.isRequired,
+        displayName: PropTypes.string.isRequired,
+        required: PropTypes.bool,
+        type: PropTypes.string
+    })).isRequired,
+    onExport: PropTypes.func
+};
+
+GroupedReportRenderer.defaultProps = {
+    onExport: null
+};
+
+export default GroupedReportRenderer;

package/src/components/generic/SectionGroupedReport.jsx

@@ -0,0 +1,388 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { ChevronDown, ChevronRight, MessageSquare } from 'lucide-react';
+import { formatCellValue, getNestedValue } from './shared/groupingUtils';
+import './groupedReport.css';
+
+const SectionGroupedReport = ({ data, config, columns, onExport }) => {
+    const [collapsedGroups, setCollapsedGroups] = useState(new Set());
+    
+    const toggleGroupCollapse = (groupName) => {
+        const newCollapsed = new Set(collapsedGroups);
+        if (newCollapsed.has(groupName)) {
+            newCollapsed.delete(groupName);
+        } else {
+            newCollapsed.add(groupName);
+        }
+        setCollapsedGroups(newCollapsed);
+    };
+    // Helper function to get nested object property
+    const getNestedProperty = (obj, path) => {
+        return path.split('.').reduce((current, key) => {
+            return current && current[key] !== undefined ? current[key] : undefined;
+        }, obj);
+    };
+    
+    const renderCellValue = (row, column) => {
+        if (row.__empty_row__) {
+            return '';
+        }
+        
+        // Try multiple field access patterns to find the data
+        let value;
+        
+        // First try displayName with backticks (as seen in debug)
+        if (column.displayName && row[`\`${column.displayName}\``] !== undefined) {
+            value = row[`\`${column.displayName}\``];
+        }
+        // Then try displayName without backticks
+        else if (column.displayName && row[column.displayName] !== undefined) {
+            value = row[column.displayName];
+        }
+        // Then try table_column format
+        else if (column.table && row[`${column.table}_${column.column}`] !== undefined) {
+            value = row[`${column.table}_${column.column}`];
+        }
+        // Try column with table prefix and backticks
+        else if (column.table && row[`\`${column.table}_${column.column}\``] !== undefined) {
+            value = row[`\`${column.table}_${column.column}\``];
+        }
+        // Then try just column name
+        else if (row[column.column] !== undefined) {
+            value = row[column.column];
+        }
+        // Try column with backticks
+        else if (row[`\`${column.column}\``] !== undefined) {
+            value = row[`\`${column.column}\``];
+        }
+        // Handle calculated fields
+        else if (column.id && row[column.id] !== undefined) {
+            value = row[column.id];
+        }
+        // Try nested property access based on common patterns
+        let nestedPatterns = [];
+        if (column.table && column.column) {
+            // Try patterns like lead.client.name, users.name, etc.
+            nestedPatterns = [
+                `${column.table}.${column.column}`,
+                `${column.table}.${column.column}.name`,
+                `${column.table}.${column.column}.label`,
+                column.displayName === 'User' ? 'lead.client.name' : null,
+                column.displayName === 'Project' ? 'lead.project_name' : null,
+                column.displayName === 'Start Date' ? 'lead.start_date' : null,
+                column.displayName === 'End Date' ? 'lead.end_date' : null,
+                column.displayName === 'Database Updated' ? 'lead.updated_at' : null,
+                column.displayName === 'Comments' ? 'lead.comments' : null,
+                // Try alternative field patterns
+                column.column === 'name' && column.table === 'users' ? 'lead.client.name' : null,
+                column.column === 'updated_at' && column.table === 'leads' ? 'lead.updated_at' : null
+            ].filter(Boolean);
+            
+            for (const pattern of nestedPatterns) {
+                const nestedValue = getNestedProperty(row, pattern);
+                if (nestedValue !== undefined) {
+                    value = nestedValue;
+                    break;
+                }
+            }
+        }
+        
+        // Special handling for Comments field (appears in multiple formats)
+        if (value === undefined && column.displayName === 'Comments') {
+            value = row['Comments'] || row['comments'] || row['latest_comment'] || '';
+        }
+        
+        // Format Comments field with enhanced styling
+        if (column.displayName === 'Comments' && value) {
+            const comments = value.split('• ').filter(comment => comment.trim());
+            
+            return (
+                <div style={{ 
+                    display: 'flex', 
+                    alignItems: 'flex-start', 
+                    gap: '8px',
+                    maxWidth: '300px' 
+                }}>
+                    <MessageSquare 
+                        size={16} 
+                        style={{ 
+                            marginTop: '4px', 
+                            color: '#3b82f6', 
+                            flexShrink: 0 
+                        }} 
+                    />
+                    <div style={{ 
+                        flex: 1,
+                        fontSize: '13px',
+                        lineHeight: '1.5'
+                    }}>
+                        {comments.length > 1 ? (
+                            <div>
+                                {comments.map((comment, index) => (
+                                    <div 
+                                        key={index}
+                                        style={{
+                                            marginBottom: index < comments.length - 1 ? '8px' : '0',
+                                            padding: '6px 10px',
+                                            backgroundColor: '#f8fafc',
+                                            border: '1px solid #e2e8f0',
+                                            borderRadius: '6px',
+                                            fontSize: '12px',
+                                            color: '#475569'
+                                        }}
+                                    >
+                                        {comment.trim()}
+                                    </div>
+                                ))}
+                            </div>
+                        ) : (
+                            <div style={{
+                                padding: '6px 10px',
+                                backgroundColor: '#f8fafc',
+                                border: '1px solid #e2e8f0',
+                                borderRadius: '6px',
+                                fontSize: '12px',
+                                color: '#475569'
+                            }}>
+                                {value}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            );
+        }
+        
+        // Try to find any key that contains the column name
+        if (value === undefined) {
+            const possibleKeys = Object.keys(row).filter(key => 
+                key.toLowerCase().includes(column.column?.toLowerCase()) ||
+                key.toLowerCase().includes(column.displayName?.toLowerCase())
+            );
+            if (possibleKeys.length > 0) {
+                value = row[possibleKeys[0]];
+            }
+        }
+        
+        // Debug specific failing columns
+        if (value === undefined && !row.__empty_row__ && Object.keys(row).length > 0) {
+            const logKey = column.displayName || column.column;
+            if (['User', 'Database Updated', 'Comments'].includes(logKey)) {
+                if (!window.debugLogCount) window.debugLogCount = {};
+                if (!window.debugLogCount[logKey] || window.debugLogCount[logKey] < 2) {
+                    window.debugLogCount[logKey] = (window.debugLogCount[logKey] || 0) + 1;
+                    console.log(`❌ [DEBUG] ${logKey} field missing:`, {
+                        column: logKey,
+                        columnTable: column.table,
+                        columnColumn: column.column,
+                        availableKeys: Object.keys(row),
+                        testedPatterns: nestedPatterns || 'No nested patterns tried'
+                    });
+                }
+            }
+        }
+        
+        return formatCellValue(value, column);
+    };
+    
+    const getRowClassName = (row, config) => {
+        if (row.__empty_row__) {
+            return `empty-row empty-row--${config.emptyRowStyle || 'light'}`;
+        }
+        return 'data-row';
+    };
+    
+    const renderGroupStats = (group, config) => {
+        if (!config.showGroupTotals) return null;
+        
+        return (
+            <span className="group-stats">
+                ({group.totalRows}/{group.maxRows})
+            </span>
+        );
+    };
+    
+    const renderExportButton = () => {
+        if (!onExport) return null;
+        
+        return (
+            <div className="grouped-report-actions">
+                <button 
+                    className="btn btn-export"
+                    onClick={() => onExport(data)}
+                    title="Export grouped report"
+                >
+                    Export
+                </button>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="section-grouped-report">
+            <div className="grouped-report-header">
+                <div className="grouped-report-summary">
+                    <span className="summary-text">
+                        {data.totalRecords} records across {data.totalGroups} {config.groupDisplayName?.toLowerCase() || 'group'}(s)
+                    </span>
+                </div>
+                {renderExportButton()}
+            </div>
+            
+            <div className="grouped-report-content">
+                {data.groups.map((group, groupIndex) => (
+                    <GroupSection
+                        key={group.groupName}
+                        group={group}
+                        config={config}
+                        columns={columns}
+                        index={groupIndex}
+                        renderCellValue={renderCellValue}
+                        isCollapsed={collapsedGroups.has(group.groupName)}
+                        onToggleCollapse={() => toggleGroupCollapse(group.groupName)}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+const GroupSection = ({ group, config, columns, index, renderCellValue, isCollapsed, onToggleCollapse }) => {
+    const allRows = [...group.rows, ...group.emptyRows];
+    const headerStyleClass = `group-section--${config.groupHeaderStyle || 'primary'}`;
+    
+    const getRowClassName = (row, config) => {
+        if (row.__empty_row__) {
+            return `empty-row empty-row--${config.emptyRowStyle || 'light'}`;
+        }
+        return 'data-row';
+    };
+    
+    // Only log the first group to avoid spam
+    if (index === 0) {
+        console.log('🔍 [DEBUG] First group sample data:', {
+            groupName: group.groupName,
+            availableFields: group.rows[0] ? Object.keys(group.rows[0]) : [],
+            sampleValues: group.rows[0] ? Object.entries(group.rows[0]).slice(0, 5).reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {}) : 'No data'
+        });
+    }
+    
+    return (
+        <div className={`group-section ${headerStyleClass}`}>
+            <div 
+                className="group-header"
+                onClick={onToggleCollapse}
+                style={{ 
+                    cursor: 'pointer', 
+                    userSelect: 'none',
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: '12px 16px',
+                    backgroundColor: '#4a5568',
+                    color: 'white',
+                    borderRadius: '4px',
+                    marginBottom: isCollapsed ? '0' : '8px'
+                }}
+            >
+                <div style={{ marginRight: '8px' }}>
+                    {isCollapsed ? <ChevronRight size={20} /> : <ChevronDown size={20} />}
+                </div>
+                <div className="group-header-content" style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
+                    <span className="group-title" style={{ fontWeight: 'bold' }}>
+                        {config.groupDisplayName || 'Group'}: {group.groupDisplayName}
+                    </span>
+                </div>
+            </div>
+            
+            {!isCollapsed && (
+            <div className="group-content">
+                <div className="table-container" style={{
+                    overflowX: 'auto',
+                    overflowY: 'auto',
+                    maxHeight: '80vh',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px'
+                }}>
+                    <table className="group-table" style={{
+                        minWidth: '100%',
+                        width: 'max-content'
+                    }}>
+                    <thead style={{
+                        position: 'sticky',
+                        top: 0,
+                        backgroundColor: '#f8f9fa',
+                        zIndex: 10,
+                        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+                    }}>
+                        <tr>
+                            {columns.map((col, colIndex) => (
+                                <th style={{
+                                    padding: '12px 8px',
+                                    borderBottom: '2px solid #dee2e6',
+                                    fontWeight: 'bold',
+                                    whiteSpace: 'nowrap',
+                                    backgroundColor: '#f8f9fa'
+                                }} 
+                                    key={`${col.table}_${col.column}_${colIndex}`}
+                                    className={col.required ? 'required-column' : ''}
+                                >
+                                    {col.displayName}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {allRows.map((row, rowIndex) => (
+                            <tr 
+                                key={row.id || `${group.groupName}_row_${rowIndex}`}
+                                className={getRowClassName(row, config)}
+                            >
+                                {columns.map((col, colIndex) => (
+                                    <td 
+                                        key={`${col.table}_${col.column}_${rowIndex}_${colIndex}`}
+                                        className={col.required ? 'required-column' : ''}
+                                    >
+                                        {renderCellValue(row, col)}
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+                </div>
+            </div>
+            )}
+        </div>
+    );
+};
+
+SectionGroupedReport.propTypes = {
+    data: PropTypes.shape({
+        groups: PropTypes.array.isRequired,
+        totalGroups: PropTypes.number.isRequired,
+        totalRecords: PropTypes.number.isRequired
+    }).isRequired,
+    config: PropTypes.shape({
+        groupDisplayName: PropTypes.string,
+        showGroupTotals: PropTypes.bool,
+        groupHeaderStyle: PropTypes.string,
+        emptyRowStyle: PropTypes.string
+    }).isRequired,
+    columns: PropTypes.array.isRequired,
+    onExport: PropTypes.func
+};
+
+GroupSection.propTypes = {
+    group: PropTypes.shape({
+        groupName: PropTypes.string.isRequired,
+        groupDisplayName: PropTypes.string.isRequired,
+        rows: PropTypes.array.isRequired,
+        emptyRows: PropTypes.array.isRequired,
+        totalRows: PropTypes.number.isRequired,
+        maxRows: PropTypes.number.isRequired
+    }).isRequired,
+    config: PropTypes.object.isRequired,
+    columns: PropTypes.array.isRequired,
+    index: PropTypes.number.isRequired
+};
+
+export default SectionGroupedReport;

package/src/components/generic/StandardModal.jsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import Popup from 'reactjs-popup';
+import { X } from 'lucide-react';
+import formStyles from '../styles/Form.module.scss';
+
+/**
+ * StandardModal Component
+ * 
+ * A reusable modal component that standardizes the look and feel across all components.
+ * Uses the same styles as GenericIndex, GenericDetail, and DataGrid via Form.module.scss.
+ * 
+ * @param {Object} props
+ * @param {boolean} props.isOpen - Whether the modal is open
+ * @param {Function} props.onClose - Function to call when modal should close
+ * @param {string} props.title - Modal title (only used if showHeader is true)
+ * @param {React.ReactNode} props.children - Modal content
+ * @param {string} props.size - Modal size: 'small', 'medium', 'large' (default: 'medium')
+ * @param {boolean} props.closeOnDocumentClick - Whether to close on outside click (default: true)
+ * @param {boolean} props.closeOnEscape - Whether to close on escape key (default: true)
+ * @param {string} props.verticalAlign - Vertical alignment: 'center', 'top' (default: 'center')
+ * @param {boolean} props.showHeader - Whether to show modal header (default: false, because Form components have their own headers)
+ * @param {Object} props.customStyles - Custom styles to override defaults
+ */
+const StandardModal = ({
+    isOpen,
+    onClose,
+    title,
+    children,
+    size = 'medium',
+    closeOnDocumentClick = true,
+    closeOnEscape = true,
+    verticalAlign = 'center',
+    showHeader = false,
+    customStyles = {}
+}) => {
+    // Apply vertical alignment class if needed
+    const getModalClasses = () => {
+        let classes = formStyles.modal;
+        if (verticalAlign === 'top') {
+            classes += ' modal-top-aligned';
+        }
+        return classes;
+    };
+
+    // Get size-based styles for the popup content
+    const getContentStyle = () => {
+        const baseStyle = {
+            ...customStyles.modal
+        };
+
+        // Apply size-based styles
+        switch (size) {
+            case 'small':
+                return {
+                    ...baseStyle,
+                    width: '400px',
+                    minWidth: '400px',
+                    maxWidth: '600px'
+                };
+            case 'large':
+                return {
+                    ...baseStyle,
+                    width: '95vw',
+                    minWidth: '800px',
+                    maxWidth: '1600px'
+                };
+            case 'medium':
+            default:
+                // Use the same dimensions as modalWide class (original modal sizing)
+                return {
+                    ...baseStyle,
+                    width: '90vw',
+                    minWidth: '600px',
+                    maxWidth: '1400px'
+                };
+        }
+    };
+
+    return (
+        <Popup
+            open={isOpen}
+            onClose={onClose}
+            modal
+            closeOnDocumentClick={closeOnDocumentClick}
+            closeOnEscape={closeOnEscape}
+            contentStyle={getContentStyle()}
+        >
+            <div className={formStyles.modalwrap}>
+                <div 
+                    className={getModalClasses()}
+                >
+                    {showHeader && (
+                        <div className={formStyles.modal__header} style={customStyles.header}>
+                            <h1 style={customStyles.title}>{title}</h1>
+                            <button
+                                className={formStyles.modal__close}
+                                onClick={onClose}
+                                style={customStyles.closeButton}
+                                type="button"
+                                aria-label="Close modal"
+                            >
+                                <X strokeWidth={1} size={24} />
+                            </button>
+                        </div>
+                    )}
+                    {showHeader ? (
+                        <div className={formStyles.modal__content} style={customStyles.content}>
+                            {children}
+                        </div>
+                    ) : (
+                        children
+                    )}
+                </div>
+            </div>
+        </Popup>
+    );
+};
+
+export default StandardModal;