@visns-studio/visns-components 5.11.2 → 5.11.3

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

@@ -289,15 +289,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={`tooltip ${activeClass}`}
                         target={n.target ? n.target : '_self'}
+                        title={n.label}
                     >
                         <IconComponent size={19} strokeWidth={2} />
                     </Link>

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;
                     }

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

@@ -0,0 +1,364 @@
+.container {
+    padding: 20px;
+    background: var(--bg-color);
+    border-radius: var(--radius);
+    box-shadow: var(--box-shadow-small);
+}
+
+.header {
+    margin-bottom: 30px;
+    border-bottom: 1px solid rgba(var(--paragraph-rgb), 0.15);
+    padding-bottom: 15px;
+
+    h3 {
+        margin: 0 0 5px 0;
+        color: var(--primary-color);
+        font-size: 1.4em;
+        font-weight: 600;
+    }
+
+    p {
+        margin: 0;
+        color: var(--paragraph-color);
+        font-size: 0.9em;
+        opacity: 0.8;
+    }
+}
+
+.loading {
+    text-align: center;
+    padding: 40px;
+    color: var(--paragraph-color);
+    opacity: 0.7;
+}
+
+/* Multiple Primary Warning */
+.multiplePrimaryWarning {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px;
+    margin-bottom: 24px;
+    background: rgba(255, 193, 7, 0.1);
+    border: 1px solid rgba(255, 193, 7, 0.3);
+    border-left: 4px solid rgba(255, 193, 7, 1);
+    border-radius: var(--radius);
+    color: #856404;
+
+    .warningContent {
+        flex: 1;
+
+        strong {
+            display: block;
+            margin-bottom: 4px;
+            font-size: 0.95em;
+        }
+
+        p {
+            margin: 0 0 12px 0;
+            font-size: 0.85em;
+            line-height: 1.4;
+            opacity: 0.9;
+        }
+    }
+}
+
+.clearAllPrimaryBtn {
+    padding: 6px 12px;
+    background: rgba(255, 193, 7, 1);
+    color: #fff;
+    border: none;
+    border-radius: var(--radius);
+    font-size: 0.8em;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba(255, 173, 7, 1);
+        transform: translateY(-1px);
+    }
+}
+
+/* Existing Associations */
+.existingAssociations {
+    margin-bottom: 40px;
+
+    h4 {
+        margin: 0 0 15px 0;
+        color: var(--secondary-color);
+        font-size: 1.1em;
+        font-weight: 500;
+    }
+}
+
+.noAssociations {
+    padding: 20px;
+    text-align: center;
+    color: var(--paragraph-color);
+    background: rgba(var(--paragraph-rgb), 0.05);
+    border-radius: var(--radius);
+    font-style: italic;
+    opacity: 0.8;
+}
+
+.associationsList {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.associationItem {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    border: 1px solid rgba(var(--paragraph-rgb), 0.15);
+    border-radius: var(--radius);
+    background: var(--tertiary-color);
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba(var(--paragraph-rgb), 0.05);
+        border-color: rgba(var(--paragraph-rgb), 0.25);
+    }
+
+    &.primary {
+        border-color: var(--primary-color);
+        background: rgba(var(--primary-rgb), 0.1);
+
+        &:hover {
+            background: rgba(var(--primary-rgb), 0.15);
+        }
+    }
+}
+
+.associationInfo {
+    flex: 1;
+
+    .entityName {
+        font-weight: 600;
+        color: var(--secondary-color);
+        margin-bottom: 4px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .primaryBadge {
+        background: var(--primary-color);
+        color: var(--bg-color);
+        padding: 2px 6px;
+        border-radius: var(--radius);
+        font-size: 0.75em;
+        font-weight: 500;
+        text-transform: uppercase;
+    }
+
+    .relationshipInfo {
+        margin-bottom: 4px;
+
+        .relationshipType {
+            color: var(--paragraph-color);
+            font-weight: 500;
+            text-transform: capitalize;
+        }
+
+        .notes {
+            color: var(--paragraph-color);
+            font-size: 0.9em;
+            opacity: 0.7;
+        }
+    }
+
+    .associatedAt {
+        color: var(--paragraph-color);
+        font-size: 0.8em;
+        opacity: 0.6;
+    }
+}
+
+.associationActions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.setPrimaryBtn,
+.removePrimaryBtn,
+.removeBtn,
+.associateBtn {
+    padding: 6px 12px;
+    border: none;
+    border-radius: var(--radius);
+    font-size: 0.85em;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-weight: 500;
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+}
+
+.setPrimaryBtn {
+    background: var(--highlight-color);
+    color: #ffffff;
+
+    &:hover:not(:disabled) {
+        background: #0056b3;
+        color: #ffffff;
+        transform: translateY(-1px);
+    }
+}
+
+.removePrimaryBtn {
+    background: rgba(108, 117, 125, 1);
+    color: var(--bg-color);
+
+    &:hover:not(:disabled) {
+        background: rgba(90, 98, 104, 1);
+        transform: translateY(-1px);
+    }
+}
+
+.removeBtn {
+    background: rgba(220, 53, 69, 1);
+    color: var(--bg-color);
+
+    &:hover:not(:disabled) {
+        background: rgba(200, 35, 51, 1);
+        transform: translateY(-1px);
+    }
+}
+
+.associateBtn {
+    background: var(--primary-color);
+    color: var(--bg-color);
+    padding: 10px 20px;
+    font-size: 0.9em;
+
+    &:hover:not(:disabled) {
+        background: rgba(var(--primary-rgb), 0.9);
+        transform: translateY(-1px);
+    }
+}
+
+/* New Association Form */
+.newAssociation {
+    border-top: 1px solid rgba(var(--paragraph-rgb), 0.15);
+    padding-top: 30px;
+
+    h4 {
+        margin: 0 0 20px 0;
+        color: var(--secondary-color);
+        font-size: 1.1em;
+        font-weight: 500;
+    }
+}
+
+.associationForm {
+    background: rgba(var(--paragraph-rgb), 0.05);
+    padding: 20px;
+    border-radius: var(--radius);
+    border: 1px solid rgba(var(--paragraph-rgb), 0.1);
+}
+
+.formRow {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+        gap: 15px;
+    }
+}
+
+.formField {
+    flex: 1;
+
+    label {
+        display: block;
+        margin-bottom: 5px;
+        color: var(--secondary-color);
+        font-weight: 500;
+        font-size: 0.9em;
+
+        input[type="checkbox"] {
+            margin-right: 8px;
+        }
+    }
+}
+
+.selectField,
+.textField {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid rgba(var(--paragraph-rgb), 0.25);
+    border-radius: var(--radius);
+    background: var(--bg-color);
+    font-size: 0.9em;
+    color: var(--paragraph-color);
+    transition: all 0.2s ease;
+
+    &:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
+    }
+}
+
+.textareaField {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid rgba(var(--paragraph-rgb), 0.25);
+    border-radius: var(--radius);
+    background: var(--bg-color);
+    font-size: 0.9em;
+    color: var(--paragraph-color);
+    resize: vertical;
+    min-height: 60px;
+    transition: all 0.2s ease;
+
+    &:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
+    }
+}
+
+.formActions {
+    margin-top: 20px;
+    text-align: right;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 15px;
+    }
+
+    .associationItem {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+    }
+
+    .associationActions {
+        align-self: flex-end;
+    }
+
+    .formActions {
+        text-align: center;
+    }
+
+    .associateBtn {
+        width: 100%;
+    }
+}