@visns-studio/visns-components 5.11.1 → 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

@@ -3,15 +3,15 @@ import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
     Bug,
     Calendar,
-    CreditCardAlt1,
-    Draft,
-    PeopleGroup,
-    Person,
+    CreditCard,
+    FileText,
+    Users,
+    User,
     Search,
-    SignOut,
+    LogOut,
     Shield,
     Image,
-} from 'akar-icons';
+} from 'lucide-react';
 import CustomFetch from './Fetch';
 import Notification from './Notification';
 import SwitchAccount from './SwitchAccount';
@@ -226,12 +226,12 @@ function Navigation({
         const iconComponents = {
             bug: Bug,
             calendar: Calendar,
-            draft: Draft,
+            draft: FileText,
             image: Image,
-            peopleGroup: PeopleGroup,
-            person: Person,
+            peopleGroup: Users,
+            person: User,
             shield: Shield,
-            signOut: SignOut,
+            signOut: LogOut,
         };
 
         // Check if the setting's URL matches the current page
@@ -256,7 +256,7 @@ function Navigation({
                         onClick={() => setShowBusinessCardOcr(true)}
                         className={activeClass}
                     >
-                        <CreditCardAlt1 size={20} />
+                        <CreditCard size={20} />
                     </button>
                 </li>
             );
@@ -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/Notification.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import { toast } from 'react-toastify';
-import { Bell, CircleX, Check } from 'akar-icons';
+import { Bell, X, Check } from 'lucide-react';
 import CustomFetch from './Fetch';
 import styles from './styles/Notification.module.scss';
 
@@ -351,7 +351,7 @@ function Notification(props) {
                                                 data-index={index}
                                                 aria-label="Dismiss notification"
                                             >
-                                                <CircleX
+                                                <X
                                                     size={18}
                                                     strokeWidth={2}
                                                 />

package/src/components/crm/QuickAction.jsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Popup from 'reactjs-popup';
-import { Search, Cross, Thunder } from 'akar-icons';
+import { Search, X, Zap } from 'lucide-react';
 
 import CustomFetch from './Fetch';
 import Form from './Form';
@@ -307,7 +307,7 @@ const QuickAction = ({ setting }) => {
                     data-tooltip-id="system-tooltip"
                     data-tooltip-content="Quick Actions"
                 >
-                    <Thunder strokeWidth={2} size={18} />
+                    <Zap strokeWidth={2} size={18} />
                 </span>
                 {setting.buttons.map((b) => (
                     <button
@@ -341,7 +341,7 @@ const QuickAction = ({ setting }) => {
                     />
                     <div className={styles.iconContainer}>
                         {search ? (
-                            <Cross
+                            <X
                                 strokeWidth={2}
                                 size={16}
                                 className={styles.searchIcon}

package/src/components/crm/SectionHeader.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChevronRight } from 'akar-icons';
+import { ChevronRight } from 'lucide-react';
 import styles from './styles/Field.module.scss';
 
 /**

package/src/components/crm/SwitchAccount.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ArrowCycle, ChevronVertical } from 'akar-icons';
+import { RotateCcw, ChevronUp } from 'lucide-react';
 import CustomFetch from './Fetch';
 import styles from './styles/SwitchAccount.module.scss';
 
@@ -83,7 +83,7 @@ function SwitchAccount({ setSystemAuth, setting, userProfile }) {
                 data-tooltip-id="system-tooltip"
                 data-tooltip-content={setting.label}
             >
-                <ArrowCycle size={16} verticalAlign="middle" />
+                <RotateCcw size={16} style={{ verticalAlign: 'middle' }} />
             </a>
 
             {show && (
@@ -113,9 +113,9 @@ function SwitchAccount({ setSystemAuth, setting, userProfile }) {
                                         >
                                             Select{' '}
                                             {`${ucfirst(setting.model)} `}
-                                            <ChevronVertical
+                                            <ChevronUp
                                                 size={16}
-                                                fill="#20004d"
+                                                color="#20004d"
                                             />
                                         </span>
                                     )}

package/src/components/crm/auth/ClientLogin.jsx

@@ -3,7 +3,7 @@ import '../../styles/global.css';
 import React, { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { Person } from 'akar-icons';
+import { User } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
@@ -106,7 +106,7 @@ const ClientLogin = ({ logo, setSystemAuth, urls = {} }) => {
                             autoComplete="email"
                         />
                         <span className={styles.inputIcon}>
-                            <Person strokeWidth={2} size={18} />
+                            <User strokeWidth={2} size={18} />
                         </span>
                     </div>
 

package/src/components/crm/auth/ClientOTPVerify.jsx

@@ -3,7 +3,7 @@ import '../../styles/global.css';
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { LockOff, ArrowLeft } from 'akar-icons';
+import { Lock, ArrowLeft } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
@@ -203,7 +203,7 @@ const ClientOTPVerify = ({
                             maxLength="6"
                         />
                         <span className={styles.inputIcon}>
-                            <LockOff strokeWidth={2} size={18} />
+                            <Lock strokeWidth={2} size={18} />
                         </span>
                     </div>
 

package/src/components/crm/auth/Login.jsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import Reveal from 'react-reveal/Reveal';
 import { toast } from 'react-toastify';
-import { Person, LockOff } from 'akar-icons';
+import { User, Lock } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
@@ -201,7 +201,7 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                             Email
                                         </span>
                                         <small>
-                                            <Person strokeWidth={2} size={18} />
+                                            <User strokeWidth={2} size={18} />
                                         </small>
                                     </label>
                                 </div>
@@ -222,7 +222,7 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                             Password
                                         </span>
                                         <small>
-                                            <LockOff
+                                            <Lock
                                                 strokeWidth={2}
                                                 size={18}
                                             />

package/src/components/crm/auth/Reset.jsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import Reveal from 'react-reveal/Reveal';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
-import { Person } from 'akar-icons';
+import { User } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
@@ -83,7 +83,7 @@ const Reset = ({ logo }) => {
                                             Email
                                         </span>
                                         <small>
-                                            <Person strokeWidth={2} size={18} />
+                                            <User strokeWidth={2} size={18} />
                                         </small>
                                     </label>
                                 </div>

package/src/components/crm/auth/TwoFactorAuth.jsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import Reveal from 'react-reveal/Reveal';
 import { toast } from 'react-toastify';
-import { LockOff } from 'akar-icons';
+import { Lock } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
@@ -290,7 +290,7 @@ const TwoFactorAuth = ({ logo, setSystemAuth, setUserProfile }) => {
                                             Verification Code
                                         </span>
                                         <small>
-                                            <LockOff
+                                            <Lock
                                                 strokeWidth={2}
                                                 size={18}
                                             />

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}
+        </>
     );
 };