@visns-studio/visns-components 5.11.8 → 5.11.10

package/package.json

@@ -16,7 +16,7 @@
         "@uiw/react-color": "^2.6.0",
         "@visns-studio/visns-datagrid-community": "^1.0.14",
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
-        "@vitejs/plugin-react": "^4.5.2",
+        "@vitejs/plugin-react": "^4.6.0",
         "add": "^2.0.6",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.8",
+    "version": "5.11.10",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Field.jsx

@@ -549,10 +549,10 @@ function Field({
                 );
             case 'async-dropdown-ajax':
                 return (
-                    <div className={styles.dropdownContainer}>
+                    <div className={`${styles.dropdownContainer} ${settings.create ? styles.hasButton : ''}`}>
                         <VisnsAsyncSelect
                             settings={settings}
-                            className={inputClass[settings.id]}
+                            className={`${inputClass[settings.id]} ${settings.create ? styles.selectFullWidth : ''}`}
                             multi={
                                 settings.hasOwnProperty('multi')
                                     ? settings.multi
@@ -568,6 +568,35 @@ function Field({
                             dataOptions={dataOptions}
                             isCreatable={settings.isCreatable || false}
                         />
+                        {settings.create && (
+                            <button
+                                className={styles.buttonRight}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    let allow = false;
+
+                                    if (settings.create.parent_id) {
+                                        if (
+                                            formData[settings.create.parent_id]
+                                        ) {
+                                            allow = true;
+                                        }
+                                    } else {
+                                        allow = true;
+                                    }
+
+                                    if (allow) {
+                                        handleAddEntry(settings.create);
+                                    } else {
+                                        toast.warning(
+                                            'Please select a parent item first'
+                                        );
+                                    }
+                                }}
+                            >
+                                <CirclePlus strokeWidth={2} size={16} />
+                            </button>
+                        )}
                     </div>
                 );
             case 'canvas':
@@ -778,7 +807,7 @@ function Field({
             case 'dropdown':
             case 'dropdown-ajax':
                 return (
-                    <div className={styles.dropdownContainer}>
+                    <div className={`${styles.dropdownContainer} ${settings.create ? styles.hasButton : ''}`}>
                         <Select
                             settings={settings}
                             className={
@@ -1287,7 +1316,7 @@ function Field({
             case 'multi-dropdown':
             case 'multi-dropdown-ajax':
                 return (
-                    <div className={styles.dropdownContainer}>
+                    <div className={`${styles.dropdownContainer} ${settings.create ? styles.hasButton : ''}`}>
                         <MultiSelect
                             settings={settings}
                             className={
@@ -2257,8 +2286,178 @@ function Field({
         }
     };
 
-    const handleReload = () => {
+    const handleReload = (createdItem = null) => {
         setCounter(counter + 1);
+        
+        // Auto-select the newly created item if provided
+        if (createdItem && onChange) {
+            console.log('Auto-selecting created item:', createdItem);
+            
+            // Analyze existing options to understand the expected format
+            const analyzeOptionsFormat = () => {
+                let existingOptions = [];
+                
+                // Get options based on dropdown type
+                if (['dropdown', 'multi-dropdown'].includes(settings.type) && settings.options) {
+                    existingOptions = settings.options;
+                } else if (['dropdown-ajax', 'multi-dropdown-ajax', 'async-dropdown-ajax'].includes(settings.type) && options) {
+                    existingOptions = options;
+                }
+                
+                if (existingOptions.length === 0) return null;
+                
+                // Analyze the first few options to understand the label pattern
+                const sampleOption = existingOptions[0];
+                return {
+                    hasLabel: !!sampleOption.label,
+                    hasName: !!sampleOption.name,
+                    hasFirstname: !!(sampleOption.firstname || sampleOption.surname),
+                    hasTitle: !!sampleOption.title,
+                    hasDescription: !!sampleOption.description,
+                    labelPattern: sampleOption.label || sampleOption.name || 'name'
+                };
+            };
+            
+            const formatAnalysis = analyzeOptionsFormat();
+            
+            // Determine the label for the created item based on existing options format or common patterns
+            const getItemLabel = (item) => {
+                // If we have format analysis, try to match the existing pattern
+                if (formatAnalysis) {
+                    if (formatAnalysis.hasLabel && item.label) return item.label;
+                    if (formatAnalysis.hasName && item.name) return item.name;
+                    if (formatAnalysis.hasFirstname && (item.firstname || item.surname)) {
+                        return `${item.firstname || ''} ${item.surname || ''}`.trim();
+                    }
+                    if (formatAnalysis.hasTitle && item.title) return item.title;
+                    if (formatAnalysis.hasDescription && item.description) return item.description;
+                }
+                
+                // Fallback to common patterns
+                if (item.label) return item.label;
+                if (item.name) return item.name;
+                if (item.firstname || item.surname) {
+                    return `${item.firstname || ''} ${item.surname || ''}`.trim();
+                }
+                if (item.title) return item.title;
+                if (item.description) return item.description;
+                return `Item ${item.id}`;
+            };
+            
+            const itemLabel = getItemLabel(createdItem);
+            
+            // Create a properly formatted item for MultiSelect/Select components
+            // Match the format of existing options as closely as possible
+            const formattedItem = {
+                id: createdItem.id,
+                value: createdItem.id,
+                label: itemLabel,
+                ...createdItem // Preserve all original properties
+            };
+            
+            console.log('Format analysis:', formatAnalysis);
+            console.log('Formatted item for selection:', formattedItem);
+            
+            // For different dropdown types, handle the selection appropriately
+            if (['dropdown', 'dropdown-ajax'].includes(settings.type)) {
+                // For single select fields
+                if (onChangeSelect) {
+                    onChangeSelect(formattedItem, { name: settings.id });
+                }
+                // Also update form data with the ID for single selects
+                if (setFormData) {
+                    setFormData((prevState) => ({
+                        ...prevState,
+                        [settings.id]: createdItem.id
+                    }));
+                }
+            } else if (['multi-dropdown', 'multi-dropdown-ajax', 'async-dropdown-ajax'].includes(settings.type)) {
+                // For multi-select fields, we need to handle existing selections
+                if (onChangeSelect) {
+                    // Get current value to determine if it's multi-select
+                    const currentValue = inputValue || [];
+                    let newValue;
+                    
+                    if (settings.hasOwnProperty('multi') && settings.multi === false) {
+                        // Single select in multi-dropdown component
+                        newValue = formattedItem;
+                    } else {
+                        // True multi-select - add to existing selections
+                        const currentArray = Array.isArray(currentValue) ? currentValue : 
+                                           (currentValue ? [currentValue] : []);
+                        
+                        // Check if item already exists (avoid duplicates)
+                        const existsIndex = currentArray.findIndex(item => 
+                            (item.id && item.id === createdItem.id) || 
+                            (item.value && item.value === createdItem.id)
+                        );
+                        
+                        if (existsIndex === -1) {
+                            // Add new item to the array
+                            newValue = [...currentArray, formattedItem];
+                        } else {
+                            // Replace existing item
+                            newValue = [...currentArray];
+                            newValue[existsIndex] = formattedItem;
+                        }
+                    }
+                    
+                    onChangeSelect(newValue, { name: settings.id });
+                }
+                
+                // Update form data with the appropriate format
+                if (setFormData) {
+                    setFormData((prevState) => {
+                        const currentValue = prevState[settings.id] || [];
+                        const currentArray = Array.isArray(currentValue) ? currentValue : 
+                                           (currentValue ? [currentValue] : []);
+                        
+                        // Check if we're in multi mode
+                        if (settings.hasOwnProperty('multi') && settings.multi === false) {
+                            return {
+                                ...prevState,
+                                [settings.id]: formattedItem
+                            };
+                        } else {
+                            // Check for duplicates
+                            const existsIndex = currentArray.findIndex(item => 
+                                (item.id && item.id === createdItem.id) || 
+                                (item.value && item.value === createdItem.id)
+                            );
+                            
+                            let newArray;
+                            if (existsIndex === -1) {
+                                newArray = [...currentArray, formattedItem];
+                            } else {
+                                newArray = [...currentArray];
+                                newArray[existsIndex] = formattedItem;
+                            }
+                            
+                            return {
+                                ...prevState,
+                                [settings.id]: newArray
+                            };
+                        }
+                    });
+                }
+            } else {
+                // For regular input fields, use onChange
+                const syntheticEvent = {
+                    target: {
+                        dataset: { name: settings.id },
+                        value: createdItem.id
+                    }
+                };
+                onChange(syntheticEvent);
+                
+                if (setFormData) {
+                    setFormData((prevState) => ({
+                        ...prevState,
+                        [settings.id]: createdItem.id
+                    }));
+                }
+            }
+        }
     };
 
     useEffect(() => {
@@ -2294,6 +2493,8 @@ function Field({
                 open={childFormShow}
                 onClose={childFormClose}
                 closeOnDocumentClick={false}
+                overlayStyle={{ zIndex: 10001 }}
+                contentStyle={{ zIndex: 10002 }}
             >
                 <Form
                     ajaxSetting={childForm.ajaxSetting}
@@ -2309,12 +2510,15 @@ function Field({
                     paramValue={null}
                     style={style}
                     updateForm={setChildForm}
+                    userProfile={userProfile}
                 />
             </Popup>
             <Popup
                 open={canvasPopupOpen}
                 onClose={() => setCanvasPopupOpen(false)}
                 closeOnDocumentClick={false}
+                overlayStyle={{ zIndex: 10001 }}
+                contentStyle={{ zIndex: 10002 }}
             >
                 <div className={`${styles.modalwrap} ${styles['top--modal']}`}>
                     <div className={styles.modal}>

package/src/components/crm/Form.jsx

@@ -1068,7 +1068,11 @@ function Form({
                                     location.reload();
                                 }, 1000);
                             }
-                            if (fetchTable) fetchTable();
+                            if (fetchTable) {
+                                // Pass the created item data to fetchTable for auto-selection
+                                const createdItem = res.data.data || res.data;
+                                fetchTable(createdItem);
+                            }
                             if (closeModal) {
                                 closeModal();
                                 if (type === 'saveAnother') {
@@ -1107,7 +1111,10 @@ function Form({
 
                                         if (resSaveAnother.data.error === '') {
                                             toast.success(saveAnother.message);
-                                            fetchTable();
+                                            if (fetchTable) {
+                                                const createdItem = res.data.data || res.data;
+                                                fetchTable(createdItem);
+                                            }
                                         }
                                     } else {
                                         fetchData();

package/src/components/crm/MultiSelect.jsx

@@ -62,6 +62,43 @@ const CustomMultiValue = (props) => {
     );
 };
 
+// Custom MultiValueRemove component with debug logging
+const CustomMultiValueRemove = (props) => {
+    const { innerProps, data } = props;
+    
+    return (
+        <components.MultiValueRemove 
+            {...props} 
+            innerProps={{
+                ...innerProps,
+                onClick: (e) => {
+                    console.log('MultiSelect: Remove button clicked for item:', data);
+                    console.log('MultiSelect: Event details:', e);
+                    
+                    // Prevent event bubbling
+                    e.stopPropagation();
+                    e.preventDefault();
+                    
+                    // Call the original handler
+                    if (innerProps && innerProps.onClick) {
+                        console.log('MultiSelect: Calling original onClick handler');
+                        innerProps.onClick(e);
+                    } else {
+                        console.log('MultiSelect: No original onClick handler found');
+                    }
+                },
+                onMouseDown: (e) => {
+                    console.log('MultiSelect: Remove button mouse down');
+                    e.stopPropagation();
+                    if (innerProps && innerProps.onMouseDown) {
+                        innerProps.onMouseDown(e);
+                    }
+                }
+            }}
+        />
+    );
+};
+
 function MultiSelect({
     className,
     inputValue = [], // Default to an empty array
@@ -230,12 +267,22 @@ function MultiSelect({
                 SelectList,
                 Option: CustomOption,
                 MultiValue: (props) => <CustomMultiValue {...props} settings={settings} />,
+                MultiValueRemove: CustomMultiValueRemove,
             }}
             options={selectOptions}
             menuPortalTarget={document.body}
             menuPlacement={menuPlacement}
             onMenuOpen={handleMenuOpen}
             onChange={(inputValue, action) => {
+                // Debug logging for delete actions
+                if (action.action === 'remove-value') {
+                    console.log('MultiSelect: Individual item delete:', {
+                        removedValue: action.removedValue,
+                        newValue: inputValue,
+                        action: action
+                    });
+                }
+                
                 // Special handling for limit=1: keep only the most recent selection
                 if (
                     settings.limit === 1 &&
@@ -333,7 +380,7 @@ function MultiSelect({
                     flex: '1',
                     minWidth: '0',
                 }),
-                multiValueRemove: (base) => ({
+                multiValueRemove: (base, state) => ({
                     ...base,
                     padding: '0 4px',
                     display: 'flex',
@@ -341,12 +388,12 @@ function MultiSelect({
                     justifyContent: 'center',
                     margin: '0',
                     borderRadius: '0 4px 4px 0',
-                    backgroundColor: 'transparent',
-                    transition: 'background-color 0.2s ease',
-                    '&:hover': {
-                        backgroundColor: '#dc2626',
-                        color: 'white',
-                    },
+                    backgroundColor: state.isFocused ? '#dc2626' : 'transparent',
+                    color: state.isFocused ? 'white' : '#666',
+                    transition: 'all 0.2s ease',
+                    cursor: 'pointer',
+                    minWidth: '16px',
+                    minHeight: '16px',
                 }),
             }}
             value={selectValue}

package/src/components/crm/QuickAction.jsx

@@ -408,7 +408,21 @@ const QuickAction = ({ setting }) => {
                 </div>
             </div>
 
-            <Popup open={modalShow} onClose={modalClose}>
+            <Popup 
+                open={modalShow} 
+                onClose={modalClose}
+                closeOnDocumentClick={false}
+                contentStyle={{
+                    width: '80vw',
+                    maxWidth: '1200px',
+                    minWidth: '600px',
+                    padding: 0,
+                    border: 'none',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                    maxHeight: '90vh',
+                }}
+            >
                 <Form
                     closeModal={modalClose}
                     fetchTable={() => {}}

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

@@ -1355,7 +1355,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
             )}
             <div className={styles.grid} ref={container}>
                 {renderWidgets()}
-                <Popup open={modalShow} onClose={closeModal}>
+                <Popup open={modalShow} onClose={closeModal} closeOnDocumentClick={false}>
                     <div className="modalwrap top--modal modalWide">
                         <div className="modal">
                             <div className="modal__header">

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

@@ -20,6 +20,54 @@ import SortableTableBody from './SortableQuoteItems';
 
 import styles from './styles/GenericQuote.module.scss';
 
+// Isolated Proposal Preview Component
+function ProposalPreviewFrame({ content }) {
+    const iframeRef = React.useRef(null);
+
+    React.useEffect(() => {
+        if (iframeRef.current && content) {
+            const iframe = iframeRef.current;
+            const doc = iframe.contentDocument || iframe.contentWindow.document;
+            
+            // Write the complete HTML document to iframe
+            doc.open();
+            doc.write(content);
+            doc.close();
+            
+            // Optional: Add responsive styling to iframe body
+            const style = doc.createElement('style');
+            style.textContent = `
+                body {
+                    margin: 0;
+                    padding: 20px;
+                    font-family: Arial, sans-serif;
+                    background: white;
+                    overflow-x: auto;
+                }
+                * {
+                    box-sizing: border-box;
+                }
+            `;
+            doc.head.appendChild(style);
+        }
+    }, [content]);
+
+    return (
+        <iframe
+            ref={iframeRef}
+            className={styles.proposalPreview}
+            title="Proposal Preview"
+            sandbox="allow-same-origin"
+            style={{
+                width: '100%',
+                height: '100%',
+                border: 'none',
+                background: 'white'
+            }}
+        />
+    );
+}
+
 function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
     const routeParams = useParams();
     const navigate = useNavigate();
@@ -835,7 +883,7 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                     proposal_section_type: data.proposal_section_type || 'content',
                 },
                 template_id: parseInt(selectedTemplate),
-                filename: `proposal-${data.id || 'draft'}-${new Date().toISOString().split('T')[0]}.pdf`,
+                filename: `${(data.customer?.name || 'Customer').replace(/[/\\?%*:|"<>]/g, '-')} - Proposal #${data.id || 'draft'} - ${(data.label || 'Quote').replace(/[/\\?%*:|"<>]/g, '-')}.pdf`,
                 download: true,
                 paper: 'a4',
                 orientation: 'portrait'
@@ -844,7 +892,7 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
             // Create a form for file download
             const form = document.createElement('form');
             form.method = 'POST';
-            form.action = '/ajax/pdf/generate-proposal';
+            form.action = `/ajax/quotes/${data.id}/generate-proposal`;
             form.style.display = 'none';
 
             // Add CSRF token
@@ -1454,10 +1502,7 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                             <X size={16} aria-hidden="true" />
                         </button>
                     </div>
-                    <div 
-                        className={styles.proposalPreview}
-                        dangerouslySetInnerHTML={{ __html: proposalPreview }}
-                    />
+                    <ProposalPreviewFrame content={proposalPreview} />
                 </div>
             )}
 

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

@@ -179,8 +179,10 @@
     border: 1px solid #e9ecef;
     border-radius: 8px;
     background: white;
-    max-height: 1200px; /* Double the previous height */
-    overflow: hidden;
+    height: auto;
+    min-height: 1100px;
+    max-height: none; /* Remove height restriction */
+    overflow: visible; /* Allow content to be visible */
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
@@ -213,225 +215,16 @@
 }
 
 .proposalPreview {
-    /* Container styles - only affect this container */
-    padding: 20px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    max-height: 1000px;
+    /* Iframe container styles - content is completely isolated */
+    width: 100% !important;
+    height: 1000px !important;
+    min-height: 1000px !important;
+    max-height: none !important;
     background: white;
     box-sizing: border-box;
-    position: relative;
-    
-    /* Isolate content styles using descendant selectors */
-    
-    /* Reset and apply clean typography for proposal content */
-    & * {
-        font-family: inherit;
-        color: inherit;
-    }
-    
-    /* Base content styling */
-    font-family: 'Times', 'Times New Roman', serif;
-    font-size: 14px;
-    line-height: 1.6;
-    color: #333;
-    
-    /* Headings */
-    & h1, & h2, & h3, & h4, & h5, & h6 {
-        font-family: 'Arial', 'Helvetica', sans-serif;
-        font-weight: bold;
-        color: #333;
-        margin-top: 0;
-        margin-bottom: 15px;
-        line-height: 1.2;
-    }
-    
-    & h1 { 
-        font-size: 28px; 
-        margin-bottom: 20px;
-        margin-top: 0;
-    }
-    & h2 { 
-        font-size: 24px; 
-        margin-top: 30px;
-        margin-bottom: 15px;
-    }
-    & h3 { 
-        font-size: 20px; 
-        margin-top: 25px;
-        margin-bottom: 12px;
-    }
-    & h4 { font-size: 18px; margin-bottom: 12px; }
-    & h5 { font-size: 16px; margin-bottom: 10px; }
-    & h6 { font-size: 14px; margin-bottom: 10px; }
-    
-    /* Paragraphs and text */
-    & p {
-        font-family: 'Times', 'Times New Roman', serif;
-        font-size: 14px;
-        line-height: 1.6;
-        margin: 0 0 12px 0;
-        color: #333;
-    }
-    
-    /* Page breaks */
-    & .page-break, & [style*="page-break"] {
-        margin-top: 40px;
-        padding-top: 40px;
-        border-top: 2px dashed #ccc;
-    }
-    
-    /* Tables */
-    & table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: 15px 0;
-        font-family: 'Arial', 'Helvetica', sans-serif;
-        border: 2px solid #333333;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        
-        & th, & td {
-            padding: 14px;
-            border: 1px solid #333333;
-            text-align: left;
-            font-size: 14px;
-            line-height: 1.4;
-            color: #333;
-            vertical-align: middle;
-        }
-        
-        & th {
-            background: #4fbfa5 !important;
-            color: white !important;
-            font-weight: bold;
-        }
-        
-        & td {
-            background: white;
-            font-weight: 500;
-        }
-        
-        & tr:nth-child(even) td {
-            background: #f9f9f9;
-        }
-        
-        & tfoot tr {
-            background: #f3f4f6;
-            
-            & td {
-                font-weight: bold;
-                border-top: 2px solid #333333;
-            }
-            
-            &:last-child {
-                background: #333333 !important;
-                
-                & td {
-                    color: white !important;
-                    font-weight: bold;
-                }
-            }
-        }
-    }
-    
-    /* Lists */
-    & ul, & ol {
-        font-family: 'Times', 'Times New Roman', serif;
-        font-size: 14px;
-        line-height: 1.6;
-        margin: 12px 0;
-        padding-left: 25px;
-        color: #333;
-        
-        & li {
-            margin: 8px 0;
-            color: #333;
-        }
-    }
-    
-    /* Text formatting */
-    & strong, & b {
-        font-weight: bold;
-    }
-    
-    & em, & i {
-        font-style: italic;
-    }
-    
-    /* Images */
-    & img {
-        max-width: 100%;
-        height: auto;
-        margin: 10px 0;
-    }
-    
-    /* Divs and sections */
-    & div {
-        margin-bottom: 0;
-    }
-    
-    /* Override any branding classes that might interfere */
-    & .primary-bg, & .secondary-bg, & .accent-bg,
-    & .primary-text, & .secondary-text, & .accent-text {
-        color: #333 !important;
-        background: transparent !important;
-    }
-    
-    /* Terms and conditions specific styling */
-    & .terms-section, & .terms-conditions-section, & [class*="terms"] {
-        margin: 20px 0;
-        padding: 15px;
-        border: 1px solid #ddd;
-        background: #f9f9f9;
-        
-        & h1, & h2, & h3, & h4 {
-            margin-top: 15px;
-            margin-bottom: 10px;
-            color: #333;
-            
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-        
-        & h1 {
-            font-size: 24px;
-            border-bottom: 2px solid #333;
-            padding-bottom: 10px;
-        }
-        
-        & h3 {
-            font-size: 16px;
-            margin-top: 20px;
-        }
-        
-        & p {
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            margin-bottom: 12px;
-            text-align: justify;
-            hyphens: auto;
-        }
-        
-        & .terms-content {
-            max-width: none;
-            overflow: visible;
-        }
-    }
-    
-    /* Ensure all content is visible and not truncated */
-    & * {
-        max-height: none !important;
-        overflow: visible !important;
-        text-overflow: clip !important;
-    }
-    
-    /* Special handling for long content */
-    & div, & section {
-        overflow: visible;
-        height: auto;
-        max-height: none;
-    }
+    border: none;
+    border-radius: 4px;
+    display: block !important;
 }
 
 /* Content Editor Styles */
@@ -1419,12 +1212,18 @@
         background-color: #f3f4f6;
     }
     
+    .subtotalLabel,
+    .subtotalValue {
+        color: #333 !important;
+    }
+    
     &:last-child {
         background-color: #333333 !important;
         
         .subtotalLabel,
         .subtotalValue {
             color: white !important;
+            background-color: #333333 !important;
         }
     }
 }
@@ -1436,6 +1235,7 @@
     color: #374151;
     font-size: 14px;
     border: 1px solid #333333;
+    background: inherit;
 }
 
 .subtotalValue {
@@ -1446,6 +1246,7 @@
     font-size: 14px;
     white-space: nowrap;
     border: 1px solid #333333;
+    background: inherit;
 }
 
 /* Responsive styles */

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

@@ -20,8 +20,9 @@
     border-radius: var(--br, 8px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     overflow: hidden;
-    max-width: 95vw;
-    width: 800px;
+    width: 80vw;
+    max-width: 1200px;
+    min-width: 600px;
     max-height: 90vh;
     display: flex;
     flex-direction: column;

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

@@ -3,28 +3,118 @@
     width: 100%;
 }
 
+/* Only apply flex layout when there's a create button */
+.dropdownContainer:has(.buttonRight) {
+    display: flex;
+    align-items: stretch;
+}
+
 .selectFullWidth {
     width: 90%;
 }
 
+/* Only style the select when there's a create button */
+.dropdownContainer:has(.buttonRight) .selectFullWidth {
+    flex: 1;
+    width: auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+/* Ensure the select component inside container integrates seamlessly - only when button exists */
+.dropdownContainer:has(.buttonRight) .selectFullWidth > div,
+.dropdownContainer:has(.buttonRight) .selectFullWidth .visns-select__control,
+.dropdownContainer:has(.buttonRight) .selectFullWidth select {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-right: none !important;
+}
+
+.dropdownContainer:has(.buttonRight) .selectFullWidth .visns-select__control--is-focused,
+.dropdownContainer:has(.buttonRight) .selectFullWidth select:focus {
+    border-right: none !important;
+    box-shadow: none !important;
+}
+
+/* Ensure consistent height between select and button */
+.dropdownContainer:has(.buttonRight) .selectFullWidth select {
+    height: auto;
+    min-height: 3.1rem; /* Match typical input height */
+}
+
 .buttonRight {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 42px;
+    min-height: 3.1rem;
+    background: rgba(var(--primary-color-rgb), 0.08);
+    color: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
+    border-left: none;
+    border-top-right-radius: var(--br);
+    border-bottom-right-radius: var(--br);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    outline: none;
+    padding: 0;
+    position: relative;
+}
+
+.buttonRight::before {
+    content: '';
     position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
+    top: 20%;
+    left: 0;
+    width: 1px;
+    height: 60%;
+    background: rgba(var(--primary-color-rgb), 0.15);
+}
+
+.buttonRight:hover {
     background: var(--primary-color);
     color: var(--secondary-color);
-    padding: 1rem 0.5rem;
-    border: none;
-    border-radius: var(--br);
-    cursor: pointer;
-    transition: background 0.3s;
+    border-color: var(--primary-color);
 }
 
-.buttonRight:hover {
-    background: var(--secondary-color);
-    color: var(--primary-color);
+.buttonRight:hover::before {
+    display: none;
+}
+
+.buttonRight:focus {
+    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
+}
+
+/* Fallback for browsers that don't support :has() */
+.dropdownContainer.hasButton {
+    display: flex;
+    align-items: stretch;
+}
+
+.dropdownContainer.hasButton .selectFullWidth {
+    flex: 1;
+    width: auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.dropdownContainer.hasButton .selectFullWidth > div,
+.dropdownContainer.hasButton .selectFullWidth .visns-select__control,
+.dropdownContainer.hasButton .selectFullWidth select {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-right: none !important;
+}
+
+.dropdownContainer.hasButton .selectFullWidth .visns-select__control--is-focused,
+.dropdownContainer.hasButton .selectFullWidth select:focus {
+    border-right: none !important;
+    box-shadow: none !important;
+}
+
+.dropdownContainer.hasButton .selectFullWidth select {
+    height: auto;
+    min-height: 3.1rem;
 }
 
 .formcontainer {

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

@@ -158,12 +158,33 @@
         margin: 0 !important;
         border-radius: 0 4px 4px 0 !important;
         background-color: transparent !important;
-        transition: background-color 0.2s ease !important;
+        transition: all 0.2s ease !important;
+        cursor: pointer !important;
+        pointer-events: auto !important;
+        position: relative !important;
+        z-index: 10 !important;
+        min-width: 20px !important;
+        min-height: 20px !important;
+        border: 1px solid transparent !important;
     }
 
     .visns-select__multi-value__remove:hover {
         background-color: #dc2626 !important;
         color: white !important;
+        border-color: #dc2626 !important;
+    }
+
+    .visns-select__multi-value__remove:focus {
+        background-color: #dc2626 !important;
+        color: white !important;
+        border-color: #dc2626 !important;
+        outline: none !important;
+    }
+
+    .visns-select__multi-value__remove:active {
+        background-color: #b91c1c !important;
+        color: white !important;
+        transform: scale(0.95) !important;
     }
 
     /* Fix for modals */