@visns-studio/visns-components 5.8.9 → 5.8.11

package/package.json

@@ -82,7 +82,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.8.9",
+    "version": "5.8.11",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -2221,6 +2221,8 @@ const DataGrid = forwardRef(
                                     name: column.id,
                                     filterEditor: filterEditor,
                                     filterEditorProps: filterEditorProps,
+                                    defaultWidth: 120, // Set default width for date columns
+                                    minWidth: 120, // Set minimum width for date columns
                                     render: ({ data }) => {
                                         if (
                                             data &&
@@ -2272,6 +2274,8 @@ const DataGrid = forwardRef(
                                     name: `${column.id[0]}.${column.id[1]}.`,
                                     filterEditor: filterEditor,
                                     filterEditorProps: filterEditorProps,
+                                    defaultWidth: 200, // Set default width for daterange columns
+                                    minWidth: 200, // Set minimum width for daterange columns
                                     render: ({ data }) => {
                                         if (
                                             data &&
@@ -2316,6 +2320,8 @@ const DataGrid = forwardRef(
                                     name: column.id,
                                     filterEditor: filterEditor,
                                     filterEditorProps: filterEditorProps,
+                                    defaultWidth: 160, // Set default width for datetime columns
+                                    minWidth: 160, // Set minimum width for datetime columns
                                     render: ({ data }) => {
                                         if (
                                             data &&
@@ -3511,6 +3517,11 @@ const DataGrid = forwardRef(
                                                 content = content
                                                     .replace(/<p>/g, '')
                                                     .replace(/<\/p>/g, '<br>');
+
+                                                // Ensure <br /> tags are properly handled (convert to <br> for consistency)
+                                                content = content
+                                                    .replace(/<br \/>/g, '<br>')
+                                                    .replace(/<br\/>/g, '<br>');
                                             }
 
                                             // If truncate has a value, limit content to specified number of characters

package/src/components/crm/generic/GenericIndex.jsx

@@ -312,7 +312,27 @@ const Grid = ({ config, userProfile }) => {
                     return value;
                 }
                 return value;
+            case 'html':
+                // Explicitly parse HTML content
+                return parse(String(value));
+            case 'richtext':
+                // Parse rich text content
+                return parse(String(value));
             default:
+                // For text values, check if it contains HTML tags
+                if (
+                    typeof value === 'string' &&
+                    (value.includes('<br') ||
+                        value.includes('<p>') ||
+                        value.includes('<div') ||
+                        value.includes('<span'))
+                ) {
+                    // Ensure <br /> tags are properly handled
+                    const processedValue = String(value)
+                        .replace(/<br \/>/g, '<br>')
+                        .replace(/<br\/>/g, '<br>');
+                    return parse(processedValue);
+                }
                 return value;
         }
     };
@@ -1218,22 +1238,39 @@ const Grid = ({ config, userProfile }) => {
                                                                   )}
                                                               </span>
                                                           ) : (
-                                                              formatCellContent(
-                                                                  row[
-                                                                      header.key
-                                                                  ],
-                                                                  {
-                                                                      type:
-                                                                          header.type ||
-                                                                          (typeof row[
-                                                                              header
-                                                                                  .key
-                                                                          ] ===
-                                                                          'number'
-                                                                              ? 'number'
-                                                                              : ''),
+                                                              <span
+                                                                  className={
+                                                                      styles.cellContent
+                                                                  }
+                                                                  data-type={
+                                                                      header.type ||
+                                                                      (typeof row[
+                                                                          header
+                                                                              .key
+                                                                      ] ===
+                                                                      'number'
+                                                                          ? 'number'
+                                                                          : '')
                                                                   }
-                                                              )
+                                                              >
+                                                                  {formatCellContent(
+                                                                      row[
+                                                                          header
+                                                                              .key
+                                                                      ],
+                                                                      {
+                                                                          type:
+                                                                              header.type ||
+                                                                              (typeof row[
+                                                                                  header
+                                                                                      .key
+                                                                              ] ===
+                                                                              'number'
+                                                                                  ? 'number'
+                                                                                  : ''),
+                                                                      }
+                                                                  )}
+                                                              </span>
                                                           )
                                                       ) : header.onClick ? (
                                                           <span
@@ -1256,10 +1293,24 @@ const Grid = ({ config, userProfile }) => {
                                                   key={`cell-${rowIndex}-${colIndex}`}
                                                   className={styles.gridCell}
                                               >
-                                                  {formatCellContent(
-                                                      row[col.name],
-                                                      col
-                                                  )}
+                                                  <span
+                                                      className={
+                                                          styles.cellContent
+                                                      }
+                                                      data-type={
+                                                          col.type ||
+                                                          (typeof row[
+                                                              col.name
+                                                          ] === 'number'
+                                                              ? 'number'
+                                                              : '')
+                                                      }
+                                                  >
+                                                      {formatCellContent(
+                                                          row[col.name],
+                                                          col
+                                                      )}
+                                                  </span>
                                               </td>
                                           ))}
                                 </tr>

package/src/components/crm/generic/GenericReport.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import moment from 'moment';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
@@ -582,10 +583,13 @@ const flattenFilterCriteria = (filterCriteria) => {
     return [];
 };
 
-const GenericReport = ({ setting = {} }) => {
+const GenericReport = ({ setting = {}, definition = null }) => {
     // Extract settings with defaults
     const { tableUrl, columnUrl } = setting;
 
+    // Ref for tooltip element
+    const tooltipRef = React.useRef(null);
+
     // Help functions for showing popups
     const showReportBuilderHelp = () => {
         Swal.fire({
@@ -863,6 +867,81 @@ const GenericReport = ({ setting = {} }) => {
         fetchSavedReports();
     }, []);
 
+    // Effect to handle tooltip positioning
+    useEffect(() => {
+        // Create tooltip element if it doesn't exist
+        if (!tooltipRef.current) {
+            const tooltip = document.createElement('div');
+            tooltip.className = styles.tableTooltip;
+            document.body.appendChild(tooltip);
+            tooltipRef.current = tooltip;
+        }
+
+        // Function to show tooltip
+        const showTooltip = (e) => {
+            const target = e.target.closest('[data-tooltip]');
+            if (!target) return;
+
+            const tooltip = tooltipRef.current;
+            const tooltipText = target.getAttribute('data-tooltip');
+
+            if (!tooltipText) return;
+
+            tooltip.textContent = tooltipText;
+            tooltip.classList.add(styles.visible);
+
+            // Calculate position
+            const rect = target.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+
+            // Default position above the element
+            let top = rect.top - tooltipRect.height - 10;
+            let left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+
+            // Check if tooltip would go off the top of the screen
+            if (top < 10) {
+                // Position below the element instead
+                top = rect.bottom + 10;
+            }
+
+            // Check if tooltip would go off the left of the screen
+            if (left < 10) {
+                left = 10;
+            }
+
+            // Check if tooltip would go off the right of the screen
+            if (left + tooltipRect.width > window.innerWidth - 10) {
+                left = window.innerWidth - tooltipRect.width - 10;
+            }
+
+            tooltip.style.top = `${top}px`;
+            tooltip.style.left = `${left}px`;
+        };
+
+        // Function to hide tooltip
+        const hideTooltip = () => {
+            if (tooltipRef.current) {
+                tooltipRef.current.classList.remove(styles.visible);
+            }
+        };
+
+        // Add event listeners for tooltip
+        document.addEventListener('mouseover', showTooltip);
+        document.addEventListener('mouseout', hideTooltip);
+
+        // Cleanup function
+        return () => {
+            document.removeEventListener('mouseover', showTooltip);
+            document.removeEventListener('mouseout', hideTooltip);
+
+            // Remove tooltip element when component unmounts
+            if (tooltipRef.current) {
+                document.body.removeChild(tooltipRef.current);
+                tooltipRef.current = null;
+            }
+        };
+    }, [styles.tableTooltip, styles.visible]);
+
     // Fetch table columns when a table is selected
     useEffect(() => {
         if (selectedTable) {
@@ -943,12 +1022,27 @@ const GenericReport = ({ setting = {} }) => {
                 const tablesData = res.data?.data || res.data;
 
                 if (Array.isArray(tablesData)) {
-                    // Filter out the hidden tables and pivot tables (tables with underscore in name)
-                    const filteredTables = tablesData.filter(
+                    // First filter out the hidden tables and pivot tables (tables with underscore in name)
+                    let filteredTables = tablesData.filter(
                         (table) =>
                             !hiddenTables.includes(table.name) &&
                             !table.name.includes('_')
                     );
+
+                    // If definition prop is provided, only show tables that are in the definition
+                    if (
+                        definition &&
+                        definition.tables &&
+                        definition.tables.length > 0
+                    ) {
+                        const definitionTableIds = definition.tables.map(
+                            (t) => t.id
+                        );
+                        filteredTables = filteredTables.filter((table) =>
+                            definitionTableIds.includes(table.name)
+                        );
+                    }
+
                     setTables(filteredTables);
                 } else {
                     console.error('Invalid tables data format:', tablesData);
@@ -3461,21 +3555,49 @@ const GenericReport = ({ setting = {} }) => {
                                 Loading tables...
                             </div>
                         ) : tables && tables.length > 0 ? (
-                            tables.map((table) => (
-                                <div
-                                    key={table.name}
-                                    className={`${styles.tableItem} ${
-                                        selectedTable === table.name
-                                            ? styles.tableItemSelected
-                                            : ''
-                                    }`}
-                                    onClick={() =>
-                                        handleTableSelect(table.name)
+                            tables.map((table) => {
+                                // Find description from definition if available
+                                let description = '';
+                                if (definition && definition.tables) {
+                                    const tableDefinition =
+                                        definition.tables.find(
+                                            (t) => t.id === table.name
+                                        );
+                                    if (tableDefinition) {
+                                        description =
+                                            tableDefinition.description || '';
                                     }
-                                >
-                                    {formatName(table.name)}
-                                </div>
-                            ))
+                                }
+
+                                return (
+                                    <div
+                                        key={table.name}
+                                        className={`${styles.tableItem} ${
+                                            selectedTable === table.name
+                                                ? styles.tableItemSelected
+                                                : ''
+                                        }`}
+                                        onClick={() =>
+                                            handleTableSelect(table.name)
+                                        }
+                                        data-tooltip={description}
+                                    >
+                                        {definition && definition.tables
+                                            ? (() => {
+                                                  const tableDefinition =
+                                                      definition.tables.find(
+                                                          (t) =>
+                                                              t.id ===
+                                                              table.name
+                                                      );
+                                                  return tableDefinition
+                                                      ? tableDefinition.label
+                                                      : formatName(table.name);
+                                              })()
+                                            : formatName(table.name)}
+                                    </div>
+                                );
+                            })
                         ) : (
                             <div className={styles.emptyMessage}>
                                 No tables available
@@ -6074,4 +6196,18 @@ const GenericReport = ({ setting = {} }) => {
     );
 };
 
+// PropTypes
+GenericReport.propTypes = {
+    setting: PropTypes.object,
+    definition: PropTypes.shape({
+        tables: PropTypes.arrayOf(
+            PropTypes.shape({
+                id: PropTypes.string.isRequired,
+                label: PropTypes.string.isRequired,
+                description: PropTypes.string,
+            })
+        ),
+    }),
+};
+
 export default GenericReport;

package/src/components/crm/generic/styles/GenericIndex.module.scss

@@ -508,6 +508,33 @@
     color: var(--paragraph-color, #212529);
 }
 
+.cellContent {
+    display: inline-block;
+    width: 100%;
+
+    /* Ensure date fields have uniform width */
+    &[data-type='date'] {
+        min-width: 120px;
+        width: 120px;
+        max-width: 120px;
+        display: inline-block;
+    }
+
+    &[data-type='datetime'] {
+        min-width: 160px;
+        width: 160px;
+        max-width: 160px;
+        display: inline-block;
+    }
+
+    /* Ensure <br> tags are properly displayed */
+    br {
+        display: block;
+        content: '';
+        margin-top: 5px;
+    }
+}
+
 .clickableCell {
     cursor: pointer;
     transition: background-color 0.2s ease;

package/src/components/crm/generic/styles/GenericReport.module.scss

@@ -262,6 +262,33 @@
     text-align: center;
     word-break: break-word;
     height: 100%;
+    position: relative;
+}
+
+// Custom tooltip implementation
+.tableTooltip {
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.85);
+    color: white;
+    padding: 10px 14px;
+    border-radius: 6px;
+    font-size: 0.9em;
+    line-height: 1.4;
+    white-space: normal;
+    width: 300px;
+    max-width: 80vw;
+    z-index: 9999;
+    text-align: left;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+
+    &.visible {
+        opacity: 1;
+        visibility: visible;
+    }
 }
 
 .tableItem:hover {

package/src/components/crm/styles/DataGrid.module.scss

@@ -502,6 +502,32 @@
     padding-right: 10px;
 }
 
+/* Date field styling for uniform width */
+:global {
+    /* Target date cells specifically */
+    .InovuaReactDataGrid__cell[data-column-id*='date'],
+    .InovuaReactDataGrid__cell[data-column-id*='Date'] {
+        min-width: 120px !important;
+        width: 120px !important;
+        max-width: 120px !important;
+    }
+
+    /* Target datetime cells specifically */
+    .InovuaReactDataGrid__cell[data-column-id*='datetime'],
+    .InovuaReactDataGrid__cell[data-column-id*='Datetime'] {
+        min-width: 160px !important;
+        width: 160px !important;
+        max-width: 160px !important;
+    }
+
+    /* Target daterange cells specifically */
+    .InovuaReactDataGrid__cell[data-column-id*='daterange'] {
+        min-width: 200px !important;
+        width: 200px !important;
+        max-width: 200px !important;
+    }
+}
+
 .searchContainer {
     display: flex;
     align-items: center;