@visns-studio/visns-components 5.8.10 → 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.10",
+    "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/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/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 {