@visns-studio/visns-components 6.1.4 → 6.1.5

package/src/components/generic/GroupedReportRenderer.jsx

@@ -5,7 +5,7 @@ import './groupedReport.css';
 
 const GroupedReportRenderer = ({ data, config, columns, onExport }) => {
     const renderByType = () => {
-        switch (config.type) {
+        switch (config?.type) {
             case 'sections':
                 return (
                     <SectionGroupedReport 
@@ -31,16 +31,19 @@ const GroupedReportRenderer = ({ data, config, columns, onExport }) => {
         }
     };
     
-    if (!data.grouped || !data.groups) {
+    if (!data || !data.grouped || !Array.isArray(data.groups)) {
         return (
-            <div className="grouped-report-error">
-                <p>Error: Invalid grouped data structure</p>
+            <div className="grouped-report-error" role="alert">
+                <p>
+                    This grouped report could not be displayed — the data came
+                    back in an unexpected shape.
+                </p>
             </div>
         );
     }
-    
+
     return (
-        <div className={`grouped-report grouped-report--${config.type || 'sections'}`}>
+        <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>
@@ -53,34 +56,28 @@ const GroupedReportRenderer = ({ data, config, columns, onExport }) => {
 };
 
 GroupedReportRenderer.propTypes = {
+    // Shapes are validated at runtime above: a malformed payload renders the
+    // error state rather than throwing, so these stay intentionally loose.
     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,
+        grouped: PropTypes.bool,
+        groups: PropTypes.array,
+        totalGroups: PropTypes.number,
+        totalRecords: PropTypes.number
+    }),
     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,
+        table: PropTypes.string,
+        column: PropTypes.string,
+        displayName: PropTypes.string,
         required: PropTypes.bool,
         type: PropTypes.string
-    })).isRequired,
+    })),
     onExport: PropTypes.func
 };
 

package/src/components/generic/SectionGroupedReport.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { ChevronDown, ChevronRight, MessageSquare } from 'lucide-react';
 import { formatCellValue, getNestedValue } from './shared/groupingUtils';
+import debugLog from '../utils/debugLog';
 import './groupedReport.css';
 
 const SectionGroupedReport = ({ data, config, columns, onExport }) => {
@@ -163,24 +164,18 @@ const SectionGroupedReport = ({ data, config, columns, onExport }) => {
             }
         }
         
-        // 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'
-                    });
-                }
-            }
+        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);
     };
     
@@ -191,22 +186,13 @@ const SectionGroupedReport = ({ data, config, columns, onExport }) => {
         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 
+                <button
+                    type="button"
                     className="btn btn-export"
                     onClick={() => onExport(data)}
                     title="Export grouped report"
@@ -229,7 +215,7 @@ const SectionGroupedReport = ({ data, config, columns, onExport }) => {
             </div>
             
             <div className="grouped-report-content">
-                {data.groups.map((group, groupIndex) => (
+                {(data.groups || []).map((group, groupIndex) => (
                     <GroupSection
                         key={group.groupName}
                         group={group}
@@ -247,8 +233,10 @@ const SectionGroupedReport = ({ data, config, columns, onExport }) => {
 };
 
 const GroupSection = ({ group, config, columns, index, renderCellValue, isCollapsed, onToggleCollapse }) => {
-    const allRows = [...group.rows, ...group.emptyRows];
-    const headerStyleClass = `group-section--${config.groupHeaderStyle || 'primary'}`;
+    const allRows = [...(group.rows || []), ...(group.emptyRows || [])];
+    const headerStyleClass = `group-section--${
+        config.groupHeaderStyle || 'primary'
+    }`;
     
     const getRowClassName = (row, config) => {
         if (row.__empty_row__) {
@@ -257,71 +245,43 @@ const GroupSection = ({ group, config, columns, index, renderCellValue, isCollap
         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 
+            <button
+                type="button"
                 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'
-                }}
+                aria-expanded={!isCollapsed}
             >
-                <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 className="group-header-toggle" aria-hidden="true">
+                    {isCollapsed ? (
+                        <ChevronRight size={18} />
+                    ) : (
+                        <ChevronDown size={18} />
+                    )}
+                </span>
+                <span className="group-header-content">
+                    <span className="group-title">
+                        {config.groupDisplayName || 'Group'}:{' '}
+                        {group.groupDisplayName}
                     </span>
-                </div>
-            </div>
+                    {config.showGroupTotals && (
+                        <span className="group-stats">
+                            {group.totalRows ?? (group.rows || []).length}
+                            {group.maxRows ? ` / ${group.maxRows}` : ''}
+                        </span>
+                    )}
+                </span>
+            </button>
             
             {!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)'
-                    }}>
+                <div className="table-container">
+                    <table className="group-table">
+                    <thead>
                         <tr>
                             {columns.map((col, colIndex) => (
-                                <th style={{
-                                    padding: '12px 8px',
-                                    borderBottom: '2px solid #dee2e6',
-                                    fontWeight: 'bold',
-                                    whiteSpace: 'nowrap',
-                                    backgroundColor: '#f8f9fa'
-                                }} 
+                                <th
                                     key={`${col.table}_${col.column}_${colIndex}`}
                                     className={col.required ? 'required-column' : ''}
                                 >
@@ -357,9 +317,9 @@ const GroupSection = ({ group, config, columns, index, renderCellValue, isCollap
 
 SectionGroupedReport.propTypes = {
     data: PropTypes.shape({
-        groups: PropTypes.array.isRequired,
-        totalGroups: PropTypes.number.isRequired,
-        totalRecords: PropTypes.number.isRequired
+        groups: PropTypes.array,
+        totalGroups: PropTypes.number,
+        totalRecords: PropTypes.number
     }).isRequired,
     config: PropTypes.shape({
         groupDisplayName: PropTypes.string,
@@ -373,12 +333,12 @@ SectionGroupedReport.propTypes = {
 
 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
+        groupName: PropTypes.string,
+        groupDisplayName: PropTypes.string,
+        rows: PropTypes.array,
+        emptyRows: PropTypes.array,
+        totalRows: PropTypes.number,
+        maxRows: PropTypes.number
     }).isRequired,
     config: PropTypes.object.isRequired,
     columns: PropTypes.array.isRequired,