@visns-studio/visns-components 5.11.9 → 5.11.11

package/README.md

@@ -321,6 +321,7 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 - **Extensibility**: Easy to add new column types or modify existing ones
 - **Maintainability**: Centralized location for all column rendering logic
 - **Performance**: Optimized rendering for each specific column type
+- **Intelligent Sorting**: Automatic detection of sortable relationship and JSON fields
 
 **Supported Column Types:**
 - `boolean` - Yes/No display with tooltips
@@ -354,6 +355,133 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 
 All column renderers are exported from `@visns-studio/visns-components` and can be used individually or as part of the DataGrid component.
 
+#### Intelligent Relationship Sorting
+
+The DataGrid component includes intelligent sorting capabilities that automatically detect and enable sorting for relationship and JSON fields. This feature works seamlessly with the backend `HasRelationshipSorting` trait.
+
+**Automatic Sortable Detection:**
+
+```jsx
+// The DataGrid automatically detects sortable fields based on naming patterns
+<DataGrid
+    columns={[
+        {
+            name: 'user.profile.name',     // Relationship field - automatically sortable
+            headerName: 'User Name',
+            nameFrom: ['user', 'profile', 'name']
+        },
+        {
+            name: 'settings.theme',        // JSON field - automatically sortable  
+            headerName: 'Theme Preference',
+            nameFrom: ['settings', 'theme']
+        },
+        {
+            name: 'client.company',        // BelongsTo relationship - automatically sortable
+            headerName: 'Company',
+            nameFrom: ['client', 'company']
+        }
+    ]}
+    settings={{
+        intelligentSorting: true  // Enable intelligent sorting (default: true)
+    }}
+/>
+```
+
+**Manual Sortable Control:**
+
+```jsx
+// Override automatic detection with explicit sortable configuration
+<DataGrid
+    columns={[
+        {
+            name: 'user.profile.name',
+            headerName: 'User Name',
+            sortable: true,  // Explicitly enable sorting
+            nameFrom: ['user', 'profile', 'name']
+        },
+        {
+            name: 'complex.calculation',
+            headerName: 'Complex Field',
+            sortable: false, // Explicitly disable sorting
+            nameFrom: ['complex', 'calculation']
+        }
+    ]}
+/>
+```
+
+**Supported Sorting Patterns:**
+
+The intelligent sorting system recognizes these field patterns as sortable:
+
+- **Relationship Fields**: `user.profile.name`, `order.customer.company`
+- **JSON Fields**: `settings.theme`, `metadata.tags`, `data.preferences.language`
+- **Standard Fields**: Any direct model attribute
+- **Nested Relationships**: `post.author.profile.display_name`
+
+**Field Name Detection:**
+
+The sorting system intelligently determines sortable fields using:
+
+1. **nameFrom Array**: Primary method for complex field paths
+   ```jsx
+   nameFrom: ['user', 'profile', 'full_name']  // → user.profile.full_name
+   ```
+
+2. **Dot Notation**: Direct string paths
+   ```jsx
+   name: 'client.address.city'  // → client.address.city
+   ```
+
+3. **Pattern Recognition**: Automatic detection of common relationship patterns
+   - Fields ending with `_id` that have corresponding relationships
+   - JSON field patterns like `data.*`, `settings.*`, `metadata.*`
+   - Nested object notation
+
+**Configuration Options:**
+
+```jsx
+<DataGrid
+    settings={{
+        // Global intelligent sorting toggle
+        intelligentSorting: true,  // default: true
+        
+        // Additional sorting configuration
+        sortingConfig: {
+            // Custom sortable field patterns
+            additionalPatterns: [
+                /^custom_data\./,   // Match custom_data.* fields
+                /^config\./         // Match config.* fields
+            ],
+            
+            // Fields to exclude from automatic sorting
+            excludePatterns: [
+                /^temp\./,          // Exclude temp.* fields
+                /^cache\./          // Exclude cache.* fields
+            ]
+        }
+    }}
+/>
+```
+
+**Backend Integration:**
+
+The frontend intelligent sorting works seamlessly with the backend `HasRelationshipSorting` trait:
+
+```jsx
+// Frontend automatically generates these API calls:
+// GET /ajax/users/table?orderBy=profile.name&order=asc
+// GET /ajax/orders/table?orderBy=customer.company&order=desc
+// GET /ajax/products/table?orderBy=metadata.category&order=asc
+```
+
+**Benefits:**
+
+- **Zero Configuration**: Most relationship and JSON fields work automatically
+- **Performance Optimized**: Uses backend subqueries instead of joins
+- **Type Safety**: Automatic validation of sortable field patterns
+- **Fallback Support**: Graceful handling of unsupported sort fields
+- **Developer Friendly**: Clear visual indicators for sortable columns
+
 #### DataGrid Props
 
 | Prop                  | Description                                | Type     | Default |

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.9",
+    "version": "5.11.11",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -41,6 +41,7 @@ import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import { toast } from 'react-toastify';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
+import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../../utils/relationshipSortingUtils';
 import {
     AlarmClock,
     RotateCcw,
@@ -2592,6 +2593,7 @@ const DataGrid = forwardRef(
                                     filterEditor,
                                     filterEditorProps,
                                     relationName,
+                                    intelligentSortingConfig: tableSetting?.intelligentSorting || DEFAULT_INTELLIGENT_SORTING_CONFIG,
                                 });
                             case 'relationArray':
                                 return renderRelationArrayColumn({
@@ -2600,6 +2602,7 @@ const DataGrid = forwardRef(
                                     filterEditor,
                                     filterEditorProps,
                                     relationName,
+                                    intelligentSortingConfig: tableSetting?.intelligentSorting || DEFAULT_INTELLIGENT_SORTING_CONFIG,
                                 });
                             case 'richtext':
                                 return renderRichTextColumn({

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/columns/ColumnRenderers.jsx

@@ -4,6 +4,11 @@ import parse from 'html-react-parser';
 import { Download, AlarmClock } from 'lucide-react';
 import { toast } from 'react-toastify';
 import CellWithTooltip from '../cells/CellWithTooltip';
+import {
+    isRelationshipColumnSortable,
+    getRelationshipPath,
+    DEFAULT_INTELLIGENT_SORTING_CONFIG,
+} from '../../../utils/relationshipSortingUtils';
 
 // Boolean Column Renderer
 export const renderBooleanColumn = ({
@@ -17,7 +22,7 @@ export const renderBooleanColumn = ({
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
         name: `${column.type}.${column.id}`,
-        sortable: false,
+        sortable: true,
         render: ({ data }) => {
             const value = data[column.id] ? 'Yes' : 'No';
             return (
@@ -146,7 +151,7 @@ export const renderArrayCountColumn = ({ column, commonProps }) => {
     return {
         ...commonProps,
         name: `${column.type}.${column.id}`,
-        sortable: false,
+        sortable: true,
         render: ({ data }) => {
             if (data && data[column.id]) {
                 return data[column.id].length;
@@ -713,11 +718,39 @@ export const renderRelationColumn = ({
     filterEditor,
     filterEditorProps,
     relationName,
+    intelligentSortingConfig = DEFAULT_INTELLIGENT_SORTING_CONFIG,
 }) => {
+    // Intelligent sorting detection
+    const isSortable = isRelationshipColumnSortable(
+        column,
+        intelligentSortingConfig
+    );
+
+    // Log sorting analysis in development
+    if (
+        intelligentSortingConfig.logAnalysis &&
+        process.env.NODE_ENV === 'development'
+    ) {
+        const relationshipPath = getRelationshipPath(column);
+        console.log(
+            `Relationship sorting analysis for "${relationshipPath}":`,
+            {
+                sortable: isSortable,
+                fieldName: column.nameFrom,
+                relationshipDepth: Array.isArray(column.id)
+                    ? column.id.length
+                    : 1,
+                explicitSortable: column.hasOwnProperty('sortable')
+                    ? column.sortable
+                    : 'not specified',
+            }
+        );
+    }
+
     return {
         ...commonProps,
         name: relationName,
-        sortable: false,
+        sortable: isSortable,
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
         render: ({ data }) => {
@@ -770,18 +803,22 @@ export const renderRelationColumn = ({
                         // Check if the value is a hex color and render with color preview
                         const isHexColor = (str) => {
                             if (!str || typeof str !== 'string') return false;
-                            return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(str);
+                            return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(
+                                str
+                            );
                         };
 
                         if (isHexColor(value)) {
                             return (
                                 <div className="relation-color-container">
-                                    <div 
+                                    <div
                                         className="relation-color-preview"
                                         style={{ backgroundColor: value }}
                                         title={`Color: ${value}`}
                                     ></div>
-                                    <span className="relation-color-text">{value}</span>
+                                    <span className="relation-color-text">
+                                        {value}
+                                    </span>
                                 </div>
                             );
                         }
@@ -812,11 +849,39 @@ export const renderRelationArrayColumn = ({
     filterEditor,
     filterEditorProps,
     relationName,
+    intelligentSortingConfig = DEFAULT_INTELLIGENT_SORTING_CONFIG,
 }) => {
+    // Intelligent sorting detection for relation arrays
+    const isSortable = isRelationshipColumnSortable(
+        column,
+        intelligentSortingConfig
+    );
+
+    // Log sorting analysis in development
+    if (
+        intelligentSortingConfig.logAnalysis &&
+        process.env.NODE_ENV === 'development'
+    ) {
+        const relationshipPath = getRelationshipPath(column);
+        console.log(
+            `Relationship array sorting analysis for "${relationshipPath}":`,
+            {
+                sortable: isSortable,
+                fieldName: column.nameFrom,
+                relationshipDepth: Array.isArray(column.id)
+                    ? column.id.length
+                    : 1,
+                explicitSortable: column.hasOwnProperty('sortable')
+                    ? column.sortable
+                    : 'not specified',
+            }
+        );
+    }
+
     return {
         ...commonProps,
         name: relationName,
-        sortable: false,
+        sortable: isSortable,
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
         render: ({ data }) => {
@@ -1284,7 +1349,7 @@ export const renderCreatedByColumn = ({ column, commonProps }) => {
     return {
         ...commonProps,
         name: `${column.type}.${column.id}`,
-        sortable: false,
+        sortable: true,
         render: ({ data }) => {
             if (
                 data.audits[0] &&

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/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 */

package/src/utils/relationshipSortingFallback.js

@@ -0,0 +1,37 @@
+/**
+ * Fallback version that restores original behavior
+ */
+
+export const DEFAULT_INTELLIGENT_SORTING_CONFIG = {
+    enableIntelligentSorting: false, // Disabled by default for safety
+    maxRelationshipDepth: 3,
+    customSortableFields: [],
+    customUnsortableFields: [],
+    respectExplicitSortable: true,
+    logAnalysis: false
+};
+
+export const isRelationshipColumnSortable = (column, options = {}) => {
+    // If intelligent sorting is disabled, use original behavior
+    if (options.enableIntelligentSorting === false) {
+        // Original behavior: return false for relation columns unless explicitly set
+        return column.sortable === true;
+    }
+    
+    // Respect explicit configuration
+    if (column.hasOwnProperty('sortable')) {
+        return column.sortable === true;
+    }
+    
+    // Default to false (original behavior) for safety
+    return false;
+};
+
+export const getRelationshipPath = (column) => {
+    if (!Array.isArray(column.id)) {
+        return column.nameFrom || 'unknown';
+    }
+    
+    const relationPath = column.id.join('.');
+    return column.nameFrom ? `${relationPath}.${column.nameFrom}` : relationPath;
+};

package/src/utils/relationshipSortingUtils.js

@@ -0,0 +1,289 @@
+/**
+ * Intelligent Relationship Sorting Utilities
+ * 
+ * Automatically determines if relationship columns should be sortable
+ * based on column configuration patterns and field types.
+ */
+
+/**
+ * Fields that are typically sortable
+ */
+const SORTABLE_FIELD_PATTERNS = [
+    // Text fields
+    'name', 'title', 'label', 'description', 'email', 'username', 'slug',
+    'first_name', 'last_name', 'full_name', 'display_name', 'company_name',
+    'organization', 'department', 'position', 'role', 'status', 'type',
+    'category', 'tag', 'code', 'reference', 'identifier', 'serial',
+    
+    // Date fields  
+    'created_at', 'updated_at', 'deleted_at', 'published_at', 'expires_at',
+    'start_date', 'end_date', 'due_date', 'birth_date', 'date', 'timestamp',
+    
+    // Numeric fields
+    'id', 'order', 'sort_order', 'priority', 'weight', 'score', 'rating',
+    'amount', 'price', 'cost', 'total', 'quantity', 'count', 'number',
+    'percentage', 'rate', 'value', 'balance', 'age', 'duration',
+    
+    // Boolean/Status fields (often useful for sorting)
+    'active', 'enabled', 'visible', 'published', 'featured', 'verified',
+    'approved', 'completed', 'archived', 'deleted'
+];
+
+/**
+ * Fields that should NOT be sortable
+ */
+const UNSORTABLE_FIELD_PATTERNS = [
+    // Large text/blob fields
+    'content', 'body', 'text', 'html', 'markdown', 'notes', 'comments',
+    'description_long', 'bio', 'about', 'details', 'message', 'review',
+    
+    // Binary/complex data
+    'data', 'metadata', 'settings', 'config', 'options', 'attributes',
+    'properties', 'json', 'xml', 'blob', 'binary', 'file', 'image',
+    'photo', 'avatar', 'logo', 'attachment', 'upload',
+    
+    // Sensitive fields
+    'password', 'token', 'key', 'secret', 'hash', 'signature', 'checksum'
+];
+
+/**
+ * Relationship depth limits for sorting
+ */
+const MAX_RELATIONSHIP_DEPTH = 3;
+
+/**
+ * Determines if a relationship column should be sortable based on intelligent analysis
+ * 
+ * @param {Object} column - Column configuration object
+ * @param {Object} options - Additional options for sorting intelligence
+ * @returns {boolean} - Whether the column should be sortable
+ */
+export const isRelationshipColumnSortable = (column, options = {}) => {
+    const {
+        enableIntelligentSorting = true,
+        maxRelationshipDepth = MAX_RELATIONSHIP_DEPTH,
+        customSortableFields = [],
+        customUnsortableFields = [],
+        respectExplicitSortable = true
+    } = options;
+
+    // If intelligent sorting is disabled, fall back to explicit configuration
+    if (!enableIntelligentSorting) {
+        return column.sortable === true;
+    }
+
+    // Respect explicit sortable configuration if specified
+    if (respectExplicitSortable && column.hasOwnProperty('sortable')) {
+        return column.sortable === true;
+    }
+
+    // Only analyze relation and relationArray types
+    if (!['relation', 'relationArray'].includes(column.type)) {
+        return false;
+    }
+
+    // Check relationship depth
+    const relationshipDepth = Array.isArray(column.id) ? column.id.length : 1;
+    if (relationshipDepth > maxRelationshipDepth) {
+        console.warn(`Relationship depth ${relationshipDepth} exceeds maximum ${maxRelationshipDepth} for sorting: ${getRelationshipPath(column)}`);
+        return false;
+    }
+
+    // Analyze the target field name
+    let fieldName = column.nameFrom;
+    if (!fieldName) {
+        return false;
+    }
+    
+    // Handle array nameFrom (for relationArray columns)
+    if (Array.isArray(fieldName)) {
+        // Use the first field name for analysis
+        fieldName = fieldName[0];
+        if (!fieldName) {
+            return false;
+        }
+    }
+
+    // Check custom configurations first
+    const customSortable = [...SORTABLE_FIELD_PATTERNS, ...customSortableFields];
+    const customUnsortable = [...UNSORTABLE_FIELD_PATTERNS, ...customUnsortableFields];
+
+    // Explicit unsortable fields take precedence
+    if (isFieldInPatterns(fieldName, customUnsortable)) {
+        return false;
+    }
+
+    // Check if field matches sortable patterns
+    if (isFieldInPatterns(fieldName, customSortable)) {
+        return true;
+    }
+
+    // Analyze field name patterns for common sortable types
+    return analyzeFieldNamePattern(fieldName);
+};
+
+/**
+ * Checks if a field name matches any of the given patterns
+ * 
+ * @param {string} fieldName - The field name to check
+ * @param {Array} patterns - Array of patterns to match against
+ * @returns {boolean} - Whether the field matches any pattern
+ */
+const isFieldInPatterns = (fieldName, patterns) => {
+    // Ensure fieldName is a string
+    if (typeof fieldName !== 'string') {
+        return false;
+    }
+    
+    const normalizedFieldName = fieldName.toLowerCase();
+    
+    return patterns.some(pattern => {
+        const normalizedPattern = pattern.toLowerCase();
+        
+        // Exact match
+        if (normalizedFieldName === normalizedPattern) {
+            return true;
+        }
+        
+        // Contains pattern (for composite field names)
+        if (normalizedFieldName.includes(normalizedPattern)) {
+            return true;
+        }
+        
+        // Pattern contains field name (for abbreviated fields)
+        if (normalizedPattern.includes(normalizedFieldName)) {
+            return true;
+        }
+        
+        return false;
+    });
+};
+
+/**
+ * Analyzes field name patterns to determine if they're likely sortable
+ * 
+ * @param {string} fieldName - The field name to analyze
+ * @returns {boolean} - Whether the field appears to be sortable
+ */
+const analyzeFieldNamePattern = (fieldName) => {
+    const normalizedName = fieldName.toLowerCase();
+    
+    // Date-like patterns
+    if (/_at$|_date$|date_|_time$|time_/.test(normalizedName)) {
+        return true;
+    }
+    
+    // ID patterns
+    if (/^id$|_id$|^uuid$|_uuid$/.test(normalizedName)) {
+        return true;
+    }
+    
+    // Name patterns
+    if (/name|title|label/.test(normalizedName)) {
+        return true;
+    }
+    
+    // Order/priority patterns
+    if (/order|priority|sort|rank|position|sequence/.test(normalizedName)) {
+        return true;
+    }
+    
+    // Status patterns
+    if (/status|state|active|enabled|visible/.test(normalizedName)) {
+        return true;
+    }
+    
+    // Numeric patterns
+    if (/amount|price|cost|total|count|number|quantity|score|rating/.test(normalizedName)) {
+        return true;
+    }
+    
+    // Default to false for unknown patterns to be conservative
+    return false;
+};
+
+/**
+ * Constructs the relationship path for a column (for logging/debugging)
+ * 
+ * @param {Object} column - Column configuration object
+ * @returns {string} - The relationship path (e.g., "user.profile.name")
+ */
+export const getRelationshipPath = (column) => {
+    if (!Array.isArray(column.id)) {
+        return column.nameFrom || 'unknown';
+    }
+    
+    const relationPath = column.id.join('.');
+    return column.nameFrom ? `${relationPath}.${column.nameFrom}` : relationPath;
+};
+
+/**
+ * Analyzes all relationship columns in a column configuration array
+ * and provides sorting recommendations
+ * 
+ * @param {Array} columns - Array of column configuration objects
+ * @param {Object} options - Options for analysis
+ * @returns {Object} - Analysis results with recommendations
+ */
+export const analyzeRelationshipSorting = (columns, options = {}) => {
+    const results = {
+        totalRelationColumns: 0,
+        sortableRelationColumns: 0,
+        unsortableRelationColumns: 0,
+        recommendations: [],
+        sortableColumns: [],
+        unsortableColumns: []
+    };
+    
+    columns.forEach(column => {
+        if (['relation', 'relationArray'].includes(column.type)) {
+            results.totalRelationColumns++;
+            
+            const isSortable = isRelationshipColumnSortable(column, options);
+            const relationshipPath = getRelationshipPath(column);
+            
+            if (isSortable) {
+                results.sortableRelationColumns++;
+                results.sortableColumns.push({
+                    column,
+                    path: relationshipPath,
+                    reason: 'Matches sortable field pattern'
+                });
+            } else {
+                results.unsortableRelationColumns++;
+                results.unsortableColumns.push({
+                    column,
+                    path: relationshipPath,
+                    reason: 'Does not match sortable patterns or exceeds depth limit'
+                });
+            }
+        }
+    });
+    
+    // Generate recommendations
+    if (results.unsortableRelationColumns > 0) {
+        results.recommendations.push(
+            `Consider adding explicit sortable: true to ${results.unsortableRelationColumns} relationship columns if sorting is needed`
+        );
+    }
+    
+    if (results.sortableRelationColumns > 10) {
+        results.recommendations.push(
+            'Large number of sortable relationship columns detected - consider performance impact'
+        );
+    }
+    
+    return results;
+};
+
+/**
+ * Default configuration for intelligent sorting
+ */
+export const DEFAULT_INTELLIGENT_SORTING_CONFIG = {
+    enableIntelligentSorting: true,
+    maxRelationshipDepth: MAX_RELATIONSHIP_DEPTH,
+    customSortableFields: [],
+    customUnsortableFields: [],
+    respectExplicitSortable: true,
+    logAnalysis: process.env.NODE_ENV === 'development'
+};

package/src/utils/relationshipSortingUtilsSimple.js

@@ -0,0 +1,51 @@
+/**
+ * Simplified version for testing import issues
+ */
+
+export const DEFAULT_INTELLIGENT_SORTING_CONFIG = {
+    enableIntelligentSorting: true,
+    maxRelationshipDepth: 3,
+    customSortableFields: [],
+    customUnsortableFields: [],
+    respectExplicitSortable: true,
+    logAnalysis: false
+};
+
+export const isRelationshipColumnSortable = (column, options = {}) => {
+    // Simple implementation for testing
+    if (options.enableIntelligentSorting === false) {
+        return column.sortable === true;
+    }
+    
+    if (column.hasOwnProperty('sortable')) {
+        return column.sortable === true;
+    }
+    
+    // Basic field name analysis
+    const fieldName = column.nameFrom;
+    if (!fieldName) return false;
+    
+    const sortablePatterns = ['name', 'title', 'email', 'created_at', 'updated_at', 'id'];
+    const unsortablePatterns = ['bio', 'content', 'data', 'notes', 'description'];
+    
+    const normalizedName = fieldName.toLowerCase();
+    
+    if (unsortablePatterns.some(pattern => normalizedName.includes(pattern))) {
+        return false;
+    }
+    
+    if (sortablePatterns.some(pattern => normalizedName.includes(pattern))) {
+        return true;
+    }
+    
+    return false;
+};
+
+export const getRelationshipPath = (column) => {
+    if (!Array.isArray(column.id)) {
+        return column.nameFrom || 'unknown';
+    }
+    
+    const relationPath = column.id.join('.');
+    return column.nameFrom ? `${relationPath}.${column.nameFrom}` : relationPath;
+};