@visns-studio/visns-components 6.1.7 → 6.2.0

package/src/components/generic/SectionGroupedReport.jsx

@@ -1,13 +1,118 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { ChevronDown, ChevronRight, MessageSquare } from 'lucide-react';
-import { formatCellValue, getNestedValue } from './shared/groupingUtils';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { formatCellValue } from './shared/groupingUtils';
 import debugLog from '../utils/debugLog';
 import './groupedReport.css';
 
+// Resolve a dotted path against nested objects, e.g. 'adviser.name'.
+const getNestedProperty = (obj, path) => {
+    return path.split('.').reduce((current, key) => {
+        return current && current[key] !== undefined ? current[key] : undefined;
+    }, obj);
+};
+
+// The same logical column can arrive under a handful of key shapes depending
+// on which backend produced the rows, so exact-key candidates are tried in
+// priority order. `column.key` is the explicit opt-out: when the caller knows
+// the row key it wins over every heuristic below it.
+const CANDIDATE_KEY_BUILDERS = [
+    (column) => column.key,
+    (column) => column.displayName,
+    (column) => (column.displayName ? `\`${column.displayName}\`` : null),
+    (column) =>
+        column.table && column.column
+            ? `${column.table}_${column.column}`
+            : null,
+    (column) =>
+        column.table && column.column
+            ? `\`${column.table}_${column.column}\``
+            : null,
+    (column) => column.column,
+    (column) => (column.column ? `\`${column.column}\`` : null),
+    (column) => column.id,
+];
+
+// Dotted paths are walked into nested objects rather than looked up literally.
+const buildNestedPatterns = (column) => {
+    const patterns = [];
+
+    if (column.table && column.column) {
+        patterns.push(
+            `${column.table}.${column.column}`,
+            `${column.table}.${column.column}.name`,
+            `${column.table}.${column.column}.label`
+        );
+    }
+
+    if (typeof column.column === 'string' && column.column.includes('.')) {
+        patterns.push(column.column);
+    }
+
+    return patterns;
+};
+
+const resolveColumnValue = (row, column) => {
+    for (const buildKey of CANDIDATE_KEY_BUILDERS) {
+        const key = buildKey(column);
+        if (key && row[key] !== undefined) {
+            return row[key];
+        }
+    }
+
+    const nestedPatterns = buildNestedPatterns(column);
+    for (const pattern of nestedPatterns) {
+        const nestedValue = getNestedProperty(row, pattern);
+        if (nestedValue !== undefined) {
+            return nestedValue;
+        }
+    }
+
+    // Last resort: any row key that case-insensitively mentions the column.
+    const needles = [column.column, column.displayName, column.header]
+        .filter((name) => typeof name === 'string' && name !== '')
+        .map((name) => name.toLowerCase());
+    const matchedKey = Object.keys(row).find((key) =>
+        needles.some((needle) => key.toLowerCase().includes(needle))
+    );
+    if (matchedKey) {
+        return row[matchedKey];
+    }
+
+    if (Object.keys(row).length > 0) {
+        debugLog('Grouped report: no value found for column', {
+            column: column.header || column.displayName || column.column,
+            availableKeys: Object.keys(row),
+            testedPatterns: nestedPatterns,
+        });
+    }
+
+    return undefined;
+};
+
+const getRowClassName = (row, config) => {
+    if (row.__empty_row__) {
+        return `empty-row empty-row--${config.emptyRowStyle || 'light'}`;
+    }
+    return 'data-row';
+};
+
+// Columns may carry no table/column at all (semantic mode supplies key/header
+// only), so React keys fall back through whatever identifies the column.
+const getColumnKey = (col, colIndex) =>
+    col.key || col.displayName || col.column || colIndex;
+
+const renderCellValue = (row, column) => {
+    if (row.__empty_row__) {
+        return '';
+    }
+
+    return formatCellValue(resolveColumnValue(row, column), column);
+};
+
 const SectionGroupedReport = ({ data, config, columns, onExport }) => {
     const [collapsedGroups, setCollapsedGroups] = useState(new Set());
-    
+
     const toggleGroupCollapse = (groupName) => {
         const newCollapsed = new Set(collapsedGroups);
         if (newCollapsed.has(groupName)) {
@@ -17,178 +122,10 @@ const SectionGroupedReport = ({ data, config, columns, onExport }) => {
         }
         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]];
-            }
-        }
-        
-        if (
-            value === undefined &&
-            !row.__empty_row__ &&
-            Object.keys(row).length > 0
-        ) {
-            debugLog('Grouped report: no value found for column', {
-                column: column.displayName || column.column,
-                availableKeys: Object.keys(row),
-                testedPatterns: nestedPatterns,
-            });
-        }
 
-        return formatCellValue(value, column);
-    };
-    
-    const getRowClassName = (row, config) => {
-        if (row.__empty_row__) {
-            return `empty-row empty-row--${config.emptyRowStyle || 'light'}`;
-        }
-        return 'data-row';
-    };
-    
     const renderExportButton = () => {
         if (!onExport) return null;
-        
+
         return (
             <div className="grouped-report-actions">
                 <button
@@ -202,18 +139,19 @@ const SectionGroupedReport = ({ data, config, columns, onExport }) => {
             </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)
+                        {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
@@ -224,7 +162,9 @@ const SectionGroupedReport = ({ data, config, columns, onExport }) => {
                         index={groupIndex}
                         renderCellValue={renderCellValue}
                         isCollapsed={collapsedGroups.has(group.groupName)}
-                        onToggleCollapse={() => toggleGroupCollapse(group.groupName)}
+                        onToggleCollapse={() =>
+                            toggleGroupCollapse(group.groupName)
+                        }
                     />
                 ))}
             </div>
@@ -232,19 +172,19 @@ const SectionGroupedReport = ({ data, config, columns, onExport }) => {
     );
 };
 
-const GroupSection = ({ group, config, columns, index, renderCellValue, isCollapsed, onToggleCollapse }) => {
+const GroupSection = ({
+    group,
+    config,
+    columns,
+    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';
-    };
-    
+
     return (
         <div className={`group-section ${headerStyleClass}`}>
             <button
@@ -273,62 +213,92 @@ const GroupSection = ({ group, config, columns, index, renderCellValue, isCollap
                     )}
                 </span>
             </button>
-            
+
             {!isCollapsed && (
-            <div className="group-content">
-                <div className="table-container">
-                    <table className="group-table">
-                    <thead>
-                        <tr>
-                            {columns.map((col, colIndex) => (
-                                <th
-                                    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' : ''}
+                <div className="group-content">
+                    <div className="table-container">
+                        <table className="group-table">
+                            <thead>
+                                <tr>
+                                    {columns.map((col, colIndex) => (
+                                        <th
+                                            key={getColumnKey(col, colIndex)}
+                                            className={
+                                                col.required
+                                                    ? 'required-column'
+                                                    : ''
+                                            }
+                                        >
+                                            {col.header ||
+                                                col.displayName ||
+                                                col.column}
+                                        </th>
+                                    ))}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {allRows.map((row, rowIndex) => (
+                                    <tr
+                                        key={
+                                            row.id ||
+                                            `${group.groupName}_row_${rowIndex}`
+                                        }
+                                        className={getRowClassName(row, config)}
                                     >
-                                        {renderCellValue(row, col)}
-                                    </td>
+                                        {columns.map((col, colIndex) => (
+                                            <td
+                                                key={`${rowIndex}_${getColumnKey(
+                                                    col,
+                                                    colIndex
+                                                )}`}
+                                                className={
+                                                    col.required
+                                                        ? 'required-column'
+                                                        : ''
+                                                }
+                                            >
+                                                {renderCellValue(row, col)}
+                                            </td>
+                                        ))}
+                                    </tr>
                                 ))}
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
-            </div>
             )}
         </div>
     );
 };
 
+// Columns stay intentionally loose: callers supply either the legacy
+// table/column pair or a semantic key/header pair, and unknown extras are fine.
+const columnsPropType = PropTypes.arrayOf(
+    PropTypes.shape({
+        key: PropTypes.string,
+        header: PropTypes.string,
+        displayName: PropTypes.string,
+        table: PropTypes.string,
+        column: PropTypes.string,
+        required: PropTypes.bool,
+        type: PropTypes.string,
+    })
+);
+
 SectionGroupedReport.propTypes = {
     data: PropTypes.shape({
         groups: PropTypes.array,
         totalGroups: PropTypes.number,
-        totalRecords: PropTypes.number
+        totalRecords: PropTypes.number,
     }).isRequired,
     config: PropTypes.shape({
         groupDisplayName: PropTypes.string,
         showGroupTotals: PropTypes.bool,
         groupHeaderStyle: PropTypes.string,
-        emptyRowStyle: PropTypes.string
+        emptyRowStyle: PropTypes.string,
     }).isRequired,
-    columns: PropTypes.array.isRequired,
-    onExport: PropTypes.func
+    columns: columnsPropType.isRequired,
+    onExport: PropTypes.func,
 };
 
 GroupSection.propTypes = {
@@ -338,11 +308,14 @@ GroupSection.propTypes = {
         rows: PropTypes.array,
         emptyRows: PropTypes.array,
         totalRows: PropTypes.number,
-        maxRows: PropTypes.number
+        maxRows: PropTypes.number,
     }).isRequired,
     config: PropTypes.object.isRequired,
-    columns: PropTypes.array.isRequired,
-    index: PropTypes.number.isRequired
+    columns: columnsPropType.isRequired,
+    index: PropTypes.number,
+    renderCellValue: PropTypes.func.isRequired,
+    isCollapsed: PropTypes.bool,
+    onToggleCollapse: PropTypes.func,
 };
 
-export default SectionGroupedReport;
+export default SectionGroupedReport;

package/src/components/generic/reportSemanticSteps/SemanticEntityStep.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CheckCircle } from 'lucide-react';
+import { listEntities } from '../reportSemantics';
+import styles from '../../styles/ReportSemantic.module.scss';
+
+/**
+ * Step 1 in semantic mode: pick the thing the report is about.
+ *
+ * Only business labels and descriptions are shown — the entity id is never
+ * rendered, because it is an opaque server handle.
+ */
+const SemanticEntityStep = ({ model, selectedEntity, onSelect }) => {
+    const entities = listEntities(model);
+
+    if (entities.length === 0) {
+        return (
+            <div className={styles.empty}>
+                No data is available to report on yet.
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles.section}>
+            <div className={styles.sectionIntro}>
+                <h3>What is this report about?</h3>
+                <p>
+                    Pick the main thing you want to list. You can pull in
+                    related information at the next step.
+                </p>
+            </div>
+
+            <div className={styles.cardGrid}>
+                {entities.map((entity) => {
+                    const isSelected = entity.id === selectedEntity;
+                    return (
+                        <button
+                            key={entity.id}
+                            type="button"
+                            className={`${styles.card} ${
+                                isSelected ? styles.selected : ''
+                            }`}
+                            aria-pressed={isSelected}
+                            onClick={() => onSelect(entity.id)}
+                        >
+                            <span className={styles.cardTitle}>
+                                <span>{entity.plural}</span>
+                                {isSelected && <CheckCircle size={16} />}
+                            </span>
+                            {entity.description && (
+                                <span className={styles.cardDescription}>
+                                    {entity.description}
+                                </span>
+                            )}
+                            <span className={styles.cardMeta}>
+                                {entity.fieldCount} details available
+                                {entity.relationCount > 0
+                                    ? ` · ${entity.relationCount} related areas`
+                                    : ''}
+                            </span>
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+SemanticEntityStep.propTypes = {
+    model: PropTypes.object,
+    selectedEntity: PropTypes.string,
+    onSelect: PropTypes.func.isRequired,
+};
+
+SemanticEntityStep.defaultProps = {
+    model: null,
+    selectedEntity: '',
+};
+
+export default SemanticEntityStep;