@visns-studio/visns-components 5.10.10 → 5.11.1

package/README.md

@@ -93,6 +93,91 @@ const App = () => {
 export default App;
 ```
 
+## New Modular Architecture (v5.10.11+)
+
+### GenericIndex Component Refactoring
+
+Starting from version 5.10.11, the GenericIndex component has been refactored for better maintainability and reusability:
+
+**Before**: Single monolithic component (2,281 lines)
+**After**: Modular architecture with separated concerns
+
+#### New Components
+
+The refactoring introduced two new standalone components that can be used independently:
+
+**GenericGrid** - Standalone grid component with full data management capabilities:
+
+```jsx
+import { GenericGrid } from 'visns-components';
+
+<GenericGrid 
+  config={{
+    settings: { 
+      fetch: { 
+        url: '/api/data',
+        method: 'POST',
+        params: { filter: 'active' }
+      }
+    },
+    columns: [
+      { name: 'id', header: 'ID', type: 'number' },
+      { name: 'name', header: 'Name', type: 'text' },
+      { name: 'date', header: 'Date', type: 'date' }
+    ]
+  }}
+  userProfile={userProfile}
+  onDataChange={(data) => console.log('Data updated:', data)}
+  onRowClick={(row) => console.log('Row clicked:', row)}
+/>
+```
+
+**GenericReportForm** - Standalone export form component:
+
+```jsx
+import { GenericReportForm } from 'visns-components';
+
+<GenericReportForm 
+  config={{
+    form: {
+      title: 'Export Data',
+      description: 'Select your export criteria below',
+      filters: [
+        { id: 'startDate', type: 'date', label: 'Start Date', required: true },
+        { id: 'endDate', type: 'date', label: 'End Date', required: true },
+        { id: 'format', type: 'dropdown', label: 'Format', options: [
+          { value: 'csv', label: 'CSV' },
+          { value: 'xlsx', label: 'Excel' }
+        ]}
+      ],
+      url: '/api/export',
+      method: 'POST',
+      filename: 'export.csv'
+    }
+  }}
+  userProfile={userProfile}
+  onExport={(formData) => customExportHandler(formData)}
+  onFormChange={(formData) => console.log('Form changed:', formData)}
+/>
+```
+
+#### Benefits of the Refactoring
+
+- **Reduced complexity**: GenericIndex reduced from 2,281 to 1,031 lines (55% reduction)
+- **Enhanced reusability**: Grid and form components can be used independently
+- **Better maintainability**: Focused components are easier to debug and modify
+- **Improved testing**: Components can be unit tested separately
+- **Backward compatibility**: All existing GenericIndex usage remains unchanged
+
+#### Shared Utilities
+
+The refactoring also introduced shared utility functions:
+
+- **`shared/formatters.js`**: Cell content formatting and styling utilities
+- **`shared/gridUtils.js`**: Data operations (sorting, filtering, transformations)
+
+These utilities are available for use in custom components and provide consistent functionality across the library.
+
 ## Component Documentation
 
 ### Authentication Components

package/package.json

@@ -24,17 +24,17 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.17.0",
+        "framer-motion": "^12.18.1",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "moment": "^2.30.1",
-        "motion": "^12.17.0",
+        "motion": "^12.18.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
         "quill-image-uploader": "^1.3.0",
-        "react-big-calendar": "^1.19.2",
+        "react-big-calendar": "^1.19.3",
         "react-color": "^2.19.3",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^8.4.0",
@@ -53,7 +53,7 @@
         "react-to-print": "^3.1.0",
         "react-toastify": "^11.0.5",
         "react-toggle": "^4.1.3",
-        "react-tooltip": "^5.29.0",
+        "react-tooltip": "^5.29.1",
         "react-window": "^1.8.11",
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
@@ -65,7 +65,7 @@
         "validator": "^13.15.15",
         "vite": "^6.3.5",
         "yarn": "^1.22.22",
-        "yet-another-react-lightbox": "^3.23.2"
+        "yet-another-react-lightbox": "^3.23.3"
     },
     "devDependencies": {
         "@babel/core": "^7.27.4",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.10.10",
+    "version": "5.11.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/cms/DataGrid.jsx

@@ -763,9 +763,89 @@ const DataGrid = ({
                                 data[column.id] &&
                                 data[column.id][column.jsonData]
                             ) {
-                                data = data[column.id][column.jsonData];
-
-                                return <span>{data}</span>;
+                                const jsonValue = data[column.id][column.jsonData];
+                                
+                                if (!jsonValue) return null;
+                                
+                                try {
+                                    const jsonData = typeof jsonValue === 'string' ? JSON.parse(jsonValue) : jsonValue;
+                                    
+                                    // Check if this looks like a question/answer format
+                                    const isQuestionAnswerFormat = Object.values(jsonData).every(item => 
+                                        item && typeof item === 'object' && 
+                                        (item.hasOwnProperty('question') || item.hasOwnProperty('answer'))
+                                    );
+                                    
+                                    if (isQuestionAnswerFormat) {
+                                        return (
+                                            <div style={{ fontSize: '0.8rem' }}>
+                                                {Object.entries(jsonData).map(([key, item]) => {
+                                                    if (!item || typeof item !== 'object') return null;
+                                                    
+                                                    const question = item.question || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                                                    const answer = item.answer !== undefined ? 
+                                                        (typeof item.answer === 'boolean' ? (item.answer ? 'Yes' : 'No') : String(item.answer)) : 
+                                                        'N/A';
+                                                    
+                                                    return (
+                                                        <div key={key} style={{ marginBottom: '0.3rem' }}>
+                                                            <div style={{ fontWeight: '600', color: 'var(--primary-color)', marginBottom: '0.1rem', fontSize: '0.75rem' }}>
+                                                                {question.length > 60 ? question.substring(0, 60) + '...' : question}
+                                                            </div>
+                                                            <div style={{ marginLeft: '0.5rem', color: 'var(--paragraph-color)', fontSize: '0.75rem' }}>
+                                                                {answer}
+                                                            </div>
+                                                        </div>
+                                                    );
+                                                })}
+                                            </div>
+                                        );
+                                    }
+                                    
+                                    // Check if this is a simple key-value object
+                                    const isSimpleKeyValue = Object.values(jsonData).every(val => 
+                                        typeof val !== 'object' || val === null
+                                    );
+                                    
+                                    if (isSimpleKeyValue) {
+                                        return (
+                                            <div style={{ fontSize: '0.8rem' }}>
+                                                {Object.entries(jsonData).slice(0, 3).map(([key, val]) => (
+                                                    <div key={key} style={{ marginBottom: '0.2rem', display: 'flex', gap: '0.3rem' }}>
+                                                        <strong style={{ color: 'var(--primary-color)', fontSize: '0.7rem' }}>
+                                                            {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:
+                                                        </strong>
+                                                        <span style={{ color: 'var(--paragraph-color)', fontSize: '0.7rem' }}>
+                                                            {val !== null && val !== undefined ? 
+                                                            (typeof val === 'boolean' ? (val ? 'Yes' : 'No') : String(val).substring(0, 20)) : 
+                                                            'N/A'}
+                                                        </span>
+                                                    </div>
+                                                ))}
+                                                {Object.keys(jsonData).length > 3 && (
+                                                    <div style={{ fontSize: '0.65rem', color: 'var(--secondary-color)', fontStyle: 'italic' }}>
+                                                        +{Object.keys(jsonData).length - 3} more...
+                                                    </div>
+                                                )}
+                                            </div>
+                                        );
+                                    }
+                                    
+                                    // For complex nested objects, show a summary
+                                    const keyCount = Object.keys(jsonData).length;
+                                    return (
+                                        <div style={{ fontSize: '0.75rem', color: 'var(--paragraph-color)', fontStyle: 'italic' }}>
+                                            JSON ({keyCount} {keyCount === 1 ? 'property' : 'properties'})
+                                        </div>
+                                    );
+                                    
+                                } catch (error) {
+                                    // If parsing fails, show raw value truncated
+                                    const displayValue = typeof jsonValue === 'string' && jsonValue.length > 30 
+                                        ? jsonValue.substring(0, 30) + '...' 
+                                        : jsonValue;
+                                    return <span style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--paragraph-color)' }}>{displayValue}</span>;
+                                }
                             } else {
                                 return null;
                             }

package/src/components/crm/columns/ColumnRenderers.jsx

@@ -376,13 +376,108 @@ export const renderJsonColumn = ({ column, commonProps }) => {
                 data[column.id][column.jsonData]
             ) {
                 const jsonValue = data[column.id][column.jsonData];
+                
+                if (!jsonValue) return null;
+                
+                let displayContent;
+                let tooltipValue = jsonValue;
+                
+                try {
+                    const jsonData = typeof jsonValue === 'string' ? JSON.parse(jsonValue) : jsonValue;
+                    
+                    // Check if this looks like a question/answer format
+                    const isQuestionAnswerFormat = Object.values(jsonData).every(item => 
+                        item && typeof item === 'object' && 
+                        (item.hasOwnProperty('question') || item.hasOwnProperty('answer'))
+                    );
+                    
+                    if (isQuestionAnswerFormat) {
+                        const entries = Object.entries(jsonData);
+                        if (entries.length === 1) {
+                            const [key, item] = entries[0];
+                            const question = item.question || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            const answer = item.answer !== undefined ? 
+                                (typeof item.answer === 'boolean' ? (item.answer ? 'Yes' : 'No') : String(item.answer)) : 
+                                'N/A';
+                            
+                            displayContent = (
+                                <div style={{ fontSize: '0.8rem' }}>
+                                    <div style={{ fontWeight: '600', color: 'var(--primary-color)', marginBottom: '0.1rem', fontSize: '0.75rem' }}>
+                                        {question.length > 50 ? question.substring(0, 50) + '...' : question}
+                                    </div>
+                                    <div style={{ color: 'var(--paragraph-color)', fontSize: '0.75rem' }}>
+                                        {answer}
+                                    </div>
+                                </div>
+                            );
+                        } else {
+                            displayContent = (
+                                <div style={{ fontSize: '0.75rem', color: 'var(--paragraph-color)' }}>
+                                    Q&A ({entries.length} items)
+                                </div>
+                            );
+                        }
+                        tooltipValue = JSON.stringify(jsonData, null, 2);
+                    }
+                    // Check if this is a simple key-value object
+                    else if (Object.values(jsonData).every(val => typeof val !== 'object' || val === null)) {
+                        const entries = Object.entries(jsonData);
+                        if (entries.length <= 2) {
+                            displayContent = (
+                                <div style={{ fontSize: '0.8rem' }}>
+                                    {entries.map(([key, val]) => (
+                                        <div key={key} style={{ marginBottom: '0.1rem', display: 'flex', gap: '0.3rem' }}>
+                                            <strong style={{ color: 'var(--primary-color)', fontSize: '0.7rem' }}>
+                                                {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:
+                                            </strong>
+                                            <span style={{ color: 'var(--paragraph-color)', fontSize: '0.7rem' }}>
+                                                {val !== null && val !== undefined ? 
+                                                (typeof val === 'boolean' ? (val ? 'Yes' : 'No') : String(val).substring(0, 15)) : 
+                                                'N/A'}
+                                            </span>
+                                        </div>
+                                    ))}
+                                </div>
+                            );
+                        } else {
+                            displayContent = (
+                                <div style={{ fontSize: '0.75rem', color: 'var(--paragraph-color)' }}>
+                                    Data ({entries.length} properties)
+                                </div>
+                            );
+                        }
+                        tooltipValue = JSON.stringify(jsonData, null, 2);
+                    }
+                    // For complex nested objects
+                    else {
+                        const keyCount = Object.keys(jsonData).length;
+                        displayContent = (
+                            <div style={{ fontSize: '0.75rem', color: 'var(--paragraph-color)', fontStyle: 'italic' }}>
+                                JSON ({keyCount} {keyCount === 1 ? 'property' : 'properties'})
+                            </div>
+                        );
+                        tooltipValue = JSON.stringify(jsonData, null, 2);
+                    }
+                    
+                } catch (error) {
+                    // If parsing fails, show truncated raw value
+                    const displayValue = typeof jsonValue === 'string' && jsonValue.length > 30 
+                        ? jsonValue.substring(0, 30) + '...' 
+                        : jsonValue;
+                    displayContent = (
+                        <span style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--paragraph-color)' }}>
+                            {displayValue}
+                        </span>
+                    );
+                    tooltipValue = jsonValue;
+                }
 
                 return (
                     <CellWithTooltip
-                        value={jsonValue}
+                        value={tooltipValue}
                         columnType="json"
                     >
-                        <span>{jsonValue}</span>
+                        {displayContent}
                     </CellWithTooltip>
                 );
             } else {