@visns-studio/visns-components 5.11.2 → 5.11.4

package/src/components/crm/MultiSelect.jsx

@@ -36,16 +36,27 @@ const CustomOption = (props) => {
 
 // Custom MultiValue component to display description for selected values
 const CustomMultiValue = (props) => {
-    const { children, data, ...rest } = props;
+    const { children, data, removeProps, settings, ...rest } = props;
+    
     return (
         <components.MultiValue {...rest}>
             <div className={styles.multiValue}>
-                <div className={styles.multiValueLabel}>{children}</div>
+                <div className={styles.multiValueLabel}>
+                    {children}
+                    {data.is_primary && settings?.primaryField && (
+                        <span className={styles.primaryIndicator}>Primary</span>
+                    )}
+                </div>
                 {data.description && (
                     <div className={styles.multiValueDescription}>
                         {data.description}
                     </div>
                 )}
+                {data.relationship_type && settings?.relationshipTypes && (
+                    <div className={styles.relationshipType}>
+                        {data.relationship_type}
+                    </div>
+                )}
             </div>
         </components.MultiValue>
     );
@@ -218,7 +229,7 @@ function MultiSelect({
             components={{
                 SelectList,
                 Option: CustomOption,
-                MultiValue: CustomMultiValue,
+                MultiValue: (props) => <CustomMultiValue {...props} settings={settings} />,
             }}
             options={selectOptions}
             menuPortalTarget={document.body}

package/src/components/crm/Navigation.jsx

@@ -183,6 +183,7 @@ function Navigation({
     setSystemAuth,
     themeType,
     userProfile,
+    debugIcons = false, // Add debug flag
 }) {
     const [search, setSearch] = useState('');
     const [searchResultShow, setSearchResultShow] = useState(false);
@@ -197,6 +198,7 @@ function Navigation({
     const [isScrolled, setIsScrolled] = useState(false);
     const [navData, setNavData] = useState(navConfig);
     const [showBusinessCardOcr, setShowBusinessCardOcr] = useState(false);
+    const actionItemsRef = useRef(null);
 
     const appNavClasses = styles['app-nav'];
 
@@ -289,15 +291,14 @@ function Navigation({
             const IconComponent = iconComponents[n.icon];
 
             return (
-                <li className={activeClass}>
-                    {' '}
-                    {/* Apply active class to the list item */}
+                <li>
                     <Link
                         to={n.url}
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content={n.label}
-                        className={`tooltip ${activeClass}`} // Apply active class to the link
+                        className={`${activeClass}`}
                         target={n.target ? n.target : '_self'}
+                        title={n.label}
                     >
                         <IconComponent size={19} strokeWidth={2} />
                     </Link>
@@ -533,13 +534,65 @@ function Navigation({
     useEffect(() => {
         function handleScroll() {
             setIsScrolled(window.scrollY > 0);
+
+            // Debug logging for icon visibility
+            if (debugIcons && actionItemsRef.current) {
+                const anchors = actionItemsRef.current.querySelectorAll('a');
+                const buttons =
+                    actionItemsRef.current.querySelectorAll('button');
+
+                console.log('=== SCROLL DEBUG ===');
+                console.log('Scroll Y:', window.scrollY);
+                console.log('Anchors found:', anchors.length);
+                console.log('Buttons found:', buttons.length);
+
+                anchors.forEach((anchor, index) => {
+                    const rect = anchor.getBoundingClientRect();
+                    const computedStyle = window.getComputedStyle(anchor);
+                    console.log(`Anchor ${index}:`, {
+                        visible: rect.width > 0 && rect.height > 0,
+                        position: {
+                            top: rect.top,
+                            left: rect.left,
+                            width: rect.width,
+                            height: rect.height,
+                        },
+                        zIndex: computedStyle.zIndex,
+                        display: computedStyle.display,
+                        visibility: computedStyle.visibility,
+                        opacity: computedStyle.opacity,
+                        transform: computedStyle.transform,
+                        contain: computedStyle.contain,
+                    });
+                });
+
+                buttons.forEach((button, index) => {
+                    const rect = button.getBoundingClientRect();
+                    const computedStyle = window.getComputedStyle(button);
+                    console.log(`Button ${index}:`, {
+                        visible: rect.width > 0 && rect.height > 0,
+                        position: {
+                            top: rect.top,
+                            left: rect.left,
+                            width: rect.width,
+                            height: rect.height,
+                        },
+                        zIndex: computedStyle.zIndex,
+                        display: computedStyle.display,
+                        visibility: computedStyle.visibility,
+                        opacity: computedStyle.opacity,
+                        transform: computedStyle.transform,
+                        contain: computedStyle.contain,
+                    });
+                });
+            }
         }
 
         window.addEventListener('scroll', handleScroll);
         return () => {
             window.removeEventListener('scroll', handleScroll);
         };
-    }, []);
+    }, [debugIcons]);
 
     return layout === 'simple' || layout === 'cms' ? (
         <div className={styles.cwrap}>
@@ -602,7 +655,12 @@ function Navigation({
                             <span></span>
                         </button>
                     </div>
-                    <div className={styles['hactions-alternate']}>
+                    <div
+                        className={`${styles['hactions-alternate']} ${
+                            debugIcons ? styles['debug-icons'] : ''
+                        }`}
+                        ref={actionItemsRef}
+                    >
                         <ul>
                             {navData.settings.map((setting, settingKey) =>
                                 setting.permission === true ? (
@@ -654,11 +712,12 @@ function Navigation({
                 </ul>
             </div>
             <div
-                className={
+                className={`${
                     themeType === 'alternate'
                         ? styles['hactions-alternate']
                         : styles.hactions
-                }
+                } ${debugIcons ? styles['debug-icons'] : ''}`}
+                ref={actionItemsRef}
             >
                 <ul>
                     {navData.settings.map((setting, settingKey) =>

package/src/components/crm/cells/CellWithTooltip.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Tooltip } from 'react-tooltip';
 import moment from 'moment';
 import numeral from 'numeral';
@@ -103,35 +104,41 @@ const CellWithTooltip = ({
             width: '100%',
         };
 
+    // Render tooltip using createPortal to escape stacking contexts
+    const tooltipPortal = shouldShowTooltip && createPortal(
+        <Tooltip
+            id={tooltipId}
+            style={{
+                backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                color: 'white',
+                borderRadius: '6px',
+                padding: '8px 12px',
+                fontSize: '13px',
+                maxWidth: '500px',
+                wordWrap: 'break-word',
+                zIndex: 9999, // Slightly lower since we're now at document.body level
+            }}
+            place="top"
+            offset={5}
+        />,
+        document.body
+    );
+
     return (
-        <div
-            ref={cellRef}
-            className={className}
-            style={cellStyles}
-            {...(shouldShowTooltip && {
-                'data-tooltip-id': tooltipId,
-                'data-tooltip-html': tooltipContent,
-            })}
-        >
-            {children}
-            {shouldShowTooltip && (
-                <Tooltip
-                    id={tooltipId}
-                    style={{
-                        backgroundColor: 'rgba(0, 0, 0, 0.9)',
-                        color: 'white',
-                        borderRadius: '6px',
-                        padding: '8px 12px',
-                        fontSize: '13px',
-                        maxWidth: '500px',
-                        wordWrap: 'break-word',
-                        zIndex: 1000,
-                    }}
-                    place="top"
-                    offset={5}
-                />
-            )}
-        </div>
+        <>
+            <div
+                ref={cellRef}
+                className={className}
+                style={cellStyles}
+                {...(shouldShowTooltip && {
+                    'data-tooltip-id': tooltipId,
+                    'data-tooltip-html': tooltipContent,
+                })}
+            >
+                {children}
+            </div>
+            {tooltipPortal}
+        </>
     );
 };
 

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

@@ -63,10 +63,12 @@ import 'react-big-calendar/lib/css/react-big-calendar.css';
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
 
 import Breadcrumb from '../Breadcrumb';
+import AssociationManager from '../AssociationManager';
 import CustomFetch from '../Fetch';
 import Form from '../Form';
 import GenericDynamic from './GenericDynamic';
 import GenericEditableTable from './GenericEditableTable';
+import MergeEntity from '../MergeEntity';
 import MultiSelect from '../MultiSelect';
 import QrCode from '../QrCode';
 import Table from '../DataGrid';
@@ -2490,6 +2492,29 @@ function GenericDetail({
                                     setData={setData}
                                 />
                             );
+                        case 'custom':
+                            // Handle custom components
+                            if (activeTabConfig.component === 'AssociationManager' || activeTabConfig.component === 'ClientAssociationManager') {
+                                return (
+                                    <AssociationManager
+                                        endpoints={activeTabConfig.endpoints}
+                                        config={activeTabConfig.config}
+                                        dataId={routeParams[urlParam]}
+                                        onUpdate={handleReload}
+                                    />
+                                );
+                            }
+                            if (activeTabConfig.component === 'MergeEntity') {
+                                return (
+                                    <MergeEntity
+                                        endpoints={activeTabConfig.endpoints}
+                                        config={activeTabConfig.config}
+                                        dataId={routeParams[urlParam]}
+                                        onUpdate={handleReload}
+                                    />
+                                );
+                            }
+                            return null;
                         default:
                             return null;
                     }