@visns-studio/visns-components 5.8.20 → 5.9.0

package/README.md

@@ -1375,6 +1375,155 @@ We welcome contributions! Please follow these steps:
 
 [MIT License](LICENSE)
 
+## Modal Actions in Components
+
+### Using Modal Actions in GenericQuote Component
+
+Modal actions allow you to open a form modal when a user clicks an action button. This is useful for collecting additional information from users or submitting data related to the quote.
+
+#### Implementation Methods
+
+There are two ways to implement this functionality:
+
+**1. Using the "addModal" type:**
+
+```javascript
+{
+  "id": "anyCustomId1",
+  "label": "Submit Form",
+  "type": "addModal",
+  "setting": {
+    // Form settings go here (see structure below)
+  }
+}
+```
+
+**2. Using the "modal" type (alternative approach):**
+
+```javascript
+{
+  "id": "anyCustomId2",
+  "label": "Submit Form",
+  "type": "modal",
+  "setting": {
+    // Form settings go here (see structure below)
+  }
+}
+```
+
+Both approaches are treated identically in the code.
+
+#### Form Settings Structure
+
+The `setting` property MUST follow this specific structure:
+
+```javascript
+"setting": {
+  // IMPORTANT: The 'create' property is required for the form to work properly
+  "create": {
+    "title": "Submit New Form",
+    "submitUrl": "/api/forms/submit",
+    "method": "POST"
+  },
+  // The 'fields' array is required to define the form fields
+  "fields": [
+    {
+      "id": "name",
+      "label": "Name",
+      "type": "text",
+      "required": "yes",
+      "size": "half"
+    },
+    {
+      "id": "email",
+      "label": "Email",
+      "type": "email",
+      "required": "yes",
+      "size": "half"
+    },
+    {
+      "id": "message",
+      "label": "Message",
+      "type": "textarea",
+      "required": "yes",
+      "size": "full"
+    }
+  ]
+}
+```
+
+#### Required Form Settings Properties
+
+-   `create`: Object containing settings for the create form (REQUIRED)
+
+    -   `title`: The title displayed at the top of the modal
+    -   `submitUrl`: The URL to submit the form data to
+    -   `method`: The HTTP method to use (POST, PUT, etc.)
+
+-   `fields`: Array of field objects that define the form fields (REQUIRED)
+    -   `id`: Unique identifier for the field
+    -   `label`: Display label for the field
+    -   `type`: Field type (text, email, textarea, select, etc.)
+    -   `required`: Whether the field is required ("yes" or "no")
+    -   `size`: Field size in the form layout ("full", "half", "quarter")
+    -   Additional properties depending on the field type
+
+## Troubleshooting
+
+### DataGrid Checkbox Issues
+
+#### Checkbox Cell Click Bug Fix
+
+**Problem:** Clicking anywhere within a checkbox cell (but outside the actual checkbox input) incorrectly cleared all other selected checkboxes, leaving only the clicked row selected.
+
+**Solution:** Enhanced click detection to distinguish between checkbox input clicks and cell area clicks. The fix ensures that both checkbox input clicks and cell area clicks behave identically - toggling only the specific row while maintaining all other selections.
+
+**Files Modified:**
+
+-   `src/components/crm/DataGrid.jsx` - Enhanced click handling logic
+-   `src/components/crm/styles/global-datagrid.css` - Improved cell styling
+
+#### Checkbox Improvements
+
+The DataGrid checkbox functionality has been enhanced with:
+
+-   Larger touch targets for better mobile usability
+-   Consistent behavior between input and cell area clicks
+-   Proper selection state management
+-   Improved visual feedback
+
+### Modal Action Troubleshooting
+
+If the modal doesn't open when clicking the action button, check the following:
+
+1. Make sure the action object has either:
+
+    - `id: "addModal"` or
+    - `type: "modal"`
+
+2. Check the browser console for any errors or debug messages
+
+3. **IMPORTANT**: Verify that the `setting` property has the REQUIRED structure:
+
+    - It MUST have a `create` object containing at least `title`, `submitUrl`, and `method`
+    - It MUST have a `fields` array with properly defined field objects
+
+4. If using the default form settings (without a custom `setting` property), make sure the component has valid form settings in its props.
+
+## Development Notes
+
+### DataGrid Layout Optimization
+
+The DataGrid component has been optimized for vertical space by conditionally relocating the auto refresh control when it's the sole UI control present. This provides better space utilization and cleaner interfaces.
+
+### Modal Alignment Implementation
+
+Modal components support vertical alignment configuration with the `verticalAlign` property. Setting `verticalAlign: 'top'` positions modals at 5vh from the top of the viewport for better user experience.
+
+### Grouping Investigation Results
+
+The ReactDataGrid's `defaultGroupBy` prop enables internal grouping functionality that creates collapsible group headers within the table structure. It does NOT create any external UI elements that need relocation, as all grouping controls are internal to the table component.
+
 ## Support
 
 For support, please contact the VISNS Studio team or open an issue on GitHub.

package/package.json

@@ -86,7 +86,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.8.20",
+    "version": "5.9.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -43,6 +43,7 @@ import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
 import Vapor from 'laravel-vapor';
 import Lightbox from 'yet-another-react-lightbox';
+import { Tooltip } from 'react-tooltip';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import {
@@ -146,6 +147,123 @@ const loadData = async (
     }
 };
 
+// Utility function to check if text content is truncated
+const isTextTruncated = (element) => {
+    if (!element) return false;
+    return (
+        element.scrollWidth > element.clientWidth ||
+        element.scrollHeight > element.clientHeight
+    );
+};
+
+// Utility function to format cell value for tooltip display
+const formatCellValueForTooltip = (value, columnType) => {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+
+    switch (columnType) {
+        case 'date':
+        case 'datetime':
+            if (
+                moment(value).isValid() &&
+                moment(value).format('YYYY-MM-DD') !== '1970-01-01'
+            ) {
+                return moment(value).format('DD-MM-YYYY HH:mm');
+            }
+            return String(value);
+        case 'currency':
+            return numeral(value).format('$0,0.00');
+        case 'number':
+            return numeral(value).format('0,0');
+        case 'boolean':
+            return value ? 'Yes' : 'No';
+        case 'richtext':
+            // Strip HTML tags for tooltip
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = value;
+            return tempDiv.textContent || tempDiv.innerText || '';
+        default:
+            return String(value);
+    }
+};
+
+// Component to wrap cell content with tooltip functionality
+const CellWithTooltip = ({
+    children,
+    value,
+    columnType = 'text',
+    className = '',
+}) => {
+    const cellRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipId] = useState(
+        () => `cell-tooltip-${Math.random().toString(36).substr(2, 9)}`
+    );
+
+    useEffect(() => {
+        const checkTruncation = () => {
+            if (cellRef.current) {
+                const isTruncated = isTextTruncated(cellRef.current);
+                setShowTooltip(isTruncated);
+            }
+        };
+
+        // Check truncation on mount and when content changes
+        checkTruncation();
+
+        // Also check on window resize
+        const handleResize = () => checkTruncation();
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [children, value]);
+
+    const tooltipContent = formatCellValueForTooltip(value, columnType);
+
+    // Only show tooltip if content is truncated and we have meaningful content
+    const shouldShowTooltip =
+        showTooltip && tooltipContent && tooltipContent.trim() !== '';
+
+    return (
+        <div
+            ref={cellRef}
+            className={className}
+            style={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                width: '100%',
+            }}
+            {...(shouldShowTooltip && {
+                'data-tooltip-id': tooltipId,
+                'data-tooltip-content': tooltipContent,
+            })}
+        >
+            {children}
+            {shouldShowTooltip && (
+                <Tooltip
+                    id={tooltipId}
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                        color: 'white',
+                        borderRadius: '6px',
+                        padding: '8px 12px',
+                        fontSize: '13px',
+                        maxWidth: '300px',
+                        wordWrap: 'break-word',
+                        zIndex: 9999,
+                    }}
+                    place="top"
+                    offset={5}
+                />
+            )}
+        </div>
+    );
+};
+
 const DataGrid = forwardRef(
     (
         {
@@ -378,6 +496,18 @@ const DataGrid = forwardRef(
                 }
 
                 sqlResult.then((res) => {
+                    // Sort data by grouping field if grouping is enabled
+                    if (ajaxSetting?.groupBy?.length > 0) {
+                        const groupField = ajaxSetting.groupBy[0]; // groupBy is array of strings
+                        res.data.sort((a, b) => {
+                            const aValue = a[groupField] || '';
+                            const bValue = b[groupField] || '';
+                            return aValue
+                                .toString()
+                                .localeCompare(bValue.toString());
+                        });
+                    }
+
                     if (setTotal) {
                         setTotal(res.count);
                     }
@@ -1538,10 +1668,11 @@ const DataGrid = forwardRef(
                                     'var(--light-bg-color, #f5f5f5)',
                                 borderRadius: '4px',
                                 padding: '4px',
-                                width: '22px',
-                                height: '22px',
+                                width: '28px',
+                                height: '28px',
                                 boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
                                 margin: '0 1px',
+                                cursor: 'pointer',
                             }}
                         >
                             <img
@@ -1550,8 +1681,8 @@ const DataGrid = forwardRef(
                                 data-tooltip-id="system-tooltip"
                                 data-tooltip-content={tooltipContent}
                                 style={{
-                                    maxHeight: '16px',
-                                    maxWidth: '16px',
+                                    maxHeight: '20px',
+                                    maxWidth: '20px',
                                     objectFit: 'contain',
                                 }}
                             />
@@ -1586,10 +1717,11 @@ const DataGrid = forwardRef(
                                         'var(--light-bg-color, #f5f5f5)',
                                     borderRadius: '4px',
                                     padding: '4px',
-                                    width: '22px',
-                                    height: '22px',
+                                    width: '28px',
+                                    height: '28px',
                                     boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
                                     margin: '0 1px',
+                                    cursor: 'pointer',
                                 }}
                             >
                                 <IconComponent
@@ -2133,7 +2265,14 @@ const DataGrid = forwardRef(
 
                                         const value = `${addressValue} ${stateValue}`;
 
-                                        return <span>{value}</span>;
+                                        return (
+                                            <CellWithTooltip
+                                                value={value}
+                                                columnType="address"
+                                            >
+                                                <span>{value}</span>
+                                            </CellWithTooltip>
+                                        );
                                     },
                                 };
                             case 'age':
@@ -2190,11 +2329,17 @@ const DataGrid = forwardRef(
                                     name: `${column.type}.${column.id}`,
                                     sortable: false,
                                     render: ({ data }) => {
-                                        if (data[column.id]) {
-                                            return 'Yes';
-                                        } else {
-                                            return 'No';
-                                        }
+                                        const value = data[column.id]
+                                            ? 'Yes'
+                                            : 'No';
+                                        return (
+                                            <CellWithTooltip
+                                                value={data[column.id]}
+                                                columnType="boolean"
+                                            >
+                                                <span>{value}</span>
+                                            </CellWithTooltip>
+                                        );
                                     },
                                 };
                             case 'coding':
@@ -2278,7 +2423,14 @@ const DataGrid = forwardRef(
                                                 data[column.id]
                                             ).format('$0,0.00');
 
-                                            return <span>{data}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="currency"
+                                                >
+                                                    <span>{data}</span>
+                                                </CellWithTooltip>
+                                            );
                                         } else {
                                             return null;
                                         }
@@ -2328,9 +2480,14 @@ const DataGrid = forwardRef(
                                             }
 
                                             return (
-                                                <span style={columnStyle}>
-                                                    {value}
-                                                </span>
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="date"
+                                                >
+                                                    <span style={columnStyle}>
+                                                        {value}
+                                                    </span>
+                                                </CellWithTooltip>
                                             );
                                         } else {
                                             return null;
@@ -2451,7 +2608,13 @@ const DataGrid = forwardRef(
                                                 }}
                                             >
                                                 <option value="">
-                                                    Select an Option
+                                                    Select{' '}
+                                                    {/^[aeiouAEIOU]/.test(
+                                                        column.label
+                                                    )
+                                                        ? 'an'
+                                                        : 'a'}{' '}
+                                                    {column.label}
                                                 </option>
                                                 {dropdownData[column.id] &&
                                                 dropdownData[column.id].length >
@@ -2505,7 +2668,7 @@ const DataGrid = forwardRef(
                                                                 data-tooltip-id={`system-tooltip`}
                                                                 data-tooltip-content={`Download File ${file.file_name}`}
                                                                 strokeWidth={2}
-                                                                size={18}
+                                                                size={14}
                                                                 className={
                                                                     styles.tdaction
                                                                 }
@@ -2537,7 +2700,7 @@ const DataGrid = forwardRef(
                                                                     .file_name
                                                             }`}
                                                             strokeWidth={2}
-                                                            size={18}
+                                                            size={14}
                                                             className={
                                                                 styles.tdaction
                                                             }
@@ -2622,7 +2785,14 @@ const DataGrid = forwardRef(
                                                     column.jsonData
                                                 ];
 
-                                            return <span>{data}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={data}
+                                                    columnType="json"
+                                                >
+                                                    <span>{data}</span>
+                                                </CellWithTooltip>
+                                            );
                                         } else {
                                             return null;
                                         }
@@ -2668,7 +2838,14 @@ const DataGrid = forwardRef(
                                                     ];
                                             }
 
-                                            return <span>{newData}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={newData}
+                                                    columnType="option"
+                                                >
+                                                    <span>{newData}</span>
+                                                </CellWithTooltip>
+                                            );
                                         } else {
                                             return null;
                                         }
@@ -2682,9 +2859,14 @@ const DataGrid = forwardRef(
                                     render: ({ data }) => {
                                         if (data) {
                                             return (
-                                                <span>
-                                                    {column.placeholder}
-                                                </span>
+                                                <CellWithTooltip
+                                                    value={column.placeholder}
+                                                    columnType="placeholder"
+                                                >
+                                                    <span>
+                                                        {column.placeholder}
+                                                    </span>
+                                                </CellWithTooltip>
                                             );
                                         } else {
                                             return null;
@@ -2772,7 +2954,14 @@ const DataGrid = forwardRef(
                                                     typeof value === 'string' ||
                                                     typeof value === 'number'
                                                 ) {
-                                                    return <span>{value}</span>;
+                                                    return (
+                                                        <CellWithTooltip
+                                                            value={value}
+                                                            columnType="relation"
+                                                        >
+                                                            <span>{value}</span>
+                                                        </CellWithTooltip>
+                                                    );
                                                 } else {
                                                     return null;
                                                 }
@@ -2923,7 +3112,14 @@ const DataGrid = forwardRef(
                                                 result += values.join('<br />');
                                             }
 
-                                            return <span>{parse(result)}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={result}
+                                                    columnType="relationArray"
+                                                >
+                                                    <span>{parse(result)}</span>
+                                                </CellWithTooltip>
+                                            );
                                             // }
                                         } else {
                                             let result = '';
@@ -2954,7 +3150,14 @@ const DataGrid = forwardRef(
                                                         : '';
                                             }
 
-                                            return <span>{parse(result)}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={result}
+                                                    columnType="relationArray"
+                                                >
+                                                    <span>{parse(result)}</span>
+                                                </CellWithTooltip>
+                                            );
                                         }
 
                                         return null;
@@ -2967,9 +3170,14 @@ const DataGrid = forwardRef(
                                     render: ({ data }) => {
                                         if (data && data[column.id]) {
                                             return (
-                                                <span>
-                                                    {parse(data[column.id])}
-                                                </span>
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="richtext"
+                                                >
+                                                    <span>
+                                                        {parse(data[column.id])}
+                                                    </span>
+                                                </CellWithTooltip>
                                             );
                                         } else {
                                             return null;
@@ -2990,7 +3198,14 @@ const DataGrid = forwardRef(
                                             }
                                         });
 
-                                        return <span>{stage}</span>;
+                                        return (
+                                            <CellWithTooltip
+                                                value={stage}
+                                                columnType="stage"
+                                            >
+                                                <span>{stage}</span>
+                                            </CellWithTooltip>
+                                        );
                                     },
                                 };
                             case 'time':
@@ -3014,7 +3229,14 @@ const DataGrid = forwardRef(
                                                     : 'hh:mm A'
                                             );
 
-                                            return <span>{data}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="time"
+                                                >
+                                                    <span>{data}</span>
+                                                </CellWithTooltip>
+                                            );
                                         } else {
                                             return null;
                                         }
@@ -3041,7 +3263,14 @@ const DataGrid = forwardRef(
                                                     : 'DD-MM-YYYY hh:mm A'
                                             );
 
-                                            return <span>{data}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="timer"
+                                                >
+                                                    <span>{data}</span>
+                                                </CellWithTooltip>
+                                            );
                                         } else {
                                             let shouldRenderButton = false;
 
@@ -3166,7 +3395,7 @@ const DataGrid = forwardRef(
                                                             data-tooltip-id="system-tooltip"
                                                             data-tooltip-content={`${column.label} Timer`}
                                                             strokeWidth={2}
-                                                            size={18}
+                                                            size={14}
                                                             style={{
                                                                 color: 'white',
                                                             }}
@@ -3467,14 +3696,21 @@ const DataGrid = forwardRef(
                                     render: ({ data }) => {
                                         if (data && data[column.id]) {
                                             return (
-                                                <span>
-                                                    <a
-                                                        href={data[column.id]}
-                                                        target="_blank"
-                                                    >
-                                                        Link
-                                                    </a>
-                                                </span>
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="url"
+                                                >
+                                                    <span>
+                                                        <a
+                                                            href={
+                                                                data[column.id]
+                                                            }
+                                                            target="_blank"
+                                                        >
+                                                            Link
+                                                        </a>
+                                                    </span>
+                                                </CellWithTooltip>
                                             );
                                         } else {
                                             return null;
@@ -3606,7 +3842,14 @@ const DataGrid = forwardRef(
                                             }
 
                                             return (
-                                                <span>{parse(content)}</span>
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="text"
+                                                >
+                                                    <span>
+                                                        {parse(content)}
+                                                    </span>
+                                                </CellWithTooltip>
                                             );
                                         } else {
                                             return null;
@@ -3840,7 +4083,7 @@ const DataGrid = forwardRef(
                 setLimit(ajaxSetting.take);
             } else {
                 const calculateRows = (height) =>
-                    Math.floor((height - 100) / 40);
+                    Math.floor((height - 100) / 32);
 
                 const rowCount = calculateRows(minHeight);
                 setLimit(rowCount);
@@ -3952,7 +4195,7 @@ const DataGrid = forwardRef(
                             }
                             headerProps={headerProps}
                             idProperty="id"
-                            minRowHeight={40}
+                            minRowHeight={32}
                             onFilterValueChange={(fv) => {
                                 handleFilterChange(fv, filterValue);
                             }}

package/src/components/crm/Field.jsx

@@ -1112,8 +1112,8 @@ function Field({
                                     ? settings.options
                                     : options
                             }
-                            isSearchable={settings.isSearchable || true}
-                            isCreatable={settings.isCreatable || false}
+                            isSearchable={settings.isSearchable ?? true}
+                            isCreatable={settings.isCreatable ?? false}
                             dataOptions={dataOptions}
                             style={style}
                         />

package/src/components/crm/MultiSelect.jsx

@@ -25,7 +25,9 @@ const CustomOption = (props) => {
             <div className={styles.option}>
                 <div className={styles.optionLabel}>{children}</div>
                 {data.description && (
-                    <div className={styles.optionDescription}>{data.description}</div>
+                    <div className={styles.optionDescription}>
+                        {data.description}
+                    </div>
                 )}
             </div>
         </components.Option>
@@ -40,7 +42,9 @@ const CustomMultiValue = (props) => {
             <div className={styles.multiValue}>
                 <div className={styles.multiValueLabel}>{children}</div>
                 {data.description && (
-                    <div className={styles.multiValueDescription}>{data.description}</div>
+                    <div className={styles.multiValueDescription}>
+                        {data.description}
+                    </div>
                 )}
             </div>
         </components.MultiValue>
@@ -111,14 +115,14 @@ function MultiSelect({
                 if (item.description) return item;
 
                 // Try to find a matching option with description
-                const matchingOption = selectOptions.find(opt =>
-                    opt.id === item.id || opt.value === item.id
+                const matchingOption = selectOptions.find(
+                    (opt) => opt.id === item.id || opt.value === item.id
                 );
 
                 if (matchingOption && matchingOption.description) {
                     return {
                         ...item,
-                        description: matchingOption.description
+                        description: matchingOption.description,
                     };
                 }
 
@@ -130,7 +134,11 @@ function MultiSelect({
                       const enrichedItem = findMatchingOption(a);
                       return {
                           value: enrichedItem.id,
-                          label: enrichedItem.label || enrichedItem.name || enrichedItem.description || 'Unknown',
+                          label:
+                              enrichedItem.label ||
+                              enrichedItem.name ||
+                              enrichedItem.description ||
+                              'Unknown',
                           // Make sure description is preserved
                           description: enrichedItem.description || null,
                           ...enrichedItem,
@@ -210,7 +218,7 @@ function MultiSelect({
             components={{
                 SelectList,
                 Option: CustomOption,
-                MultiValue: CustomMultiValue
+                MultiValue: CustomMultiValue,
             }}
             options={selectOptions}
             menuPortalTarget={document.body}
@@ -301,21 +309,33 @@ function MultiSelect({
                     padding: '2px 4px',
                     minHeight: '30px',
                     display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'flex-start',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: '#e2e8f0',
+                    borderRadius: '4px',
                 }),
                 multiValueLabel: (base) => ({
                     ...base,
-                    padding: '0',
+                    padding: '0 4px 0 0',
                     display: 'flex',
                     flexDirection: 'column',
-                    width: '100%',
+                    flex: '1',
+                    minWidth: '0',
                 }),
                 multiValueRemove: (base) => ({
                     ...base,
                     padding: '0 4px',
-                    alignSelf: 'flex-start',
-                    marginTop: '2px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    margin: '0',
+                    borderRadius: '0 4px 4px 0',
+                    backgroundColor: 'transparent',
+                    transition: 'background-color 0.2s ease',
+                    '&:hover': {
+                        backgroundColor: '#dc2626',
+                        color: 'white',
+                    },
                 }),
             }}
             value={selectValue}

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

@@ -21,19 +21,20 @@
     }
 }
 
-/* Clock button styles */
+/* Clock button styles - Compact version */
 .clockButton {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 4px;
+    width: 28px;
+    height: 28px;
+    border-radius: 3px;
     background-color: #2b6cb0; /* Matching blue from screenshot */
     border: none;
     cursor: pointer;
     transition: all 0.2s ease;
     margin: 0 auto;
+    padding: 0;
 
     &:hover {
         background-color: #2563a0; /* Slightly darker blue on hover */
@@ -109,13 +110,22 @@
     justify-content: flex-start;
     align-items: center;
     gap: 0.1rem;
+    padding: 3px 0;
 
     span {
         display: flex;
         align-items: center;
         position: relative;
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
+        padding: 3px;
+        cursor: pointer;
+        border-radius: 3px;
+        transition: background-color 0.2s ease;
+
+        &:hover {
+            background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
+        }
 
         svg {
             width: 18px;

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

@@ -32,8 +32,12 @@
 
 .multiValue {
     display: flex;
-    flex-direction: column;
-    gap: 1px;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    background-color: #e2e8f0;
+    border-radius: 4px;
+    padding: 2px 4px;
 }
 
 .multiValueLabel {
@@ -46,7 +50,12 @@
     color: rgba(0, 0, 0, 0.7); /* Darker color for better contrast */
     font-weight: 400;
     line-height: 1.1;
-    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white background */
+    background-color: rgba(
+        255,
+        255,
+        255,
+        0.7
+    ); /* Semi-transparent white background */
     padding: 1px 3px;
     border-radius: 2px;
     margin-top: 1px;
@@ -109,21 +118,34 @@
         padding: 2px 4px !important;
         min-height: 30px !important;
         display: flex !important;
-        flex-direction: column !important;
-        align-items: flex-start !important;
+        flex-direction: row !important;
+        align-items: center !important;
+        background-color: #e2e8f0 !important;
+        border-radius: 4px !important;
     }
 
     .visns-select__multi-value__label {
-        padding: 0 !important;
+        padding: 0 4px 0 0 !important;
         display: flex !important;
         flex-direction: column !important;
-        width: 100% !important;
+        flex: 1 !important;
+        min-width: 0 !important;
     }
 
     .visns-select__multi-value__remove {
         padding: 0 4px !important;
-        align-self: flex-start !important;
-        margin-top: 2px !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        margin: 0 !important;
+        border-radius: 0 4px 4px 0 !important;
+        background-color: transparent !important;
+        transition: background-color 0.2s ease !important;
+    }
+
+    .visns-select__multi-value__remove:hover {
+        background-color: #dc2626 !important;
+        color: white !important;
     }
 
     /* Fix for modals */

package/src/components/crm/styles/global-datagrid.css

@@ -21,9 +21,15 @@
     border-radius: 0 !important;
 }
 
-/* Ensure consistent border radius for cells */
+/* Ensure consistent border radius for cells and reduce padding for compact rows */
 .InovuaReactDataGrid__cell {
     border-radius: 0 !important;
+    padding: 6px 8px !important; /* Reduced from default padding */
+}
+
+/* Reduce header cell padding as well */
+.InovuaReactDataGrid__header-cell {
+    padding: 6px 8px !important;
 }
 
 /* Fix for focus outline */
@@ -33,9 +39,9 @@
     box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.2) !important;
 }
 
-/* Checkbox column improvements for touch devices */
+/* Checkbox column improvements for touch devices - Compact version */
 .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-    padding: 8px 12px !important;
+    padding: 6px 8px !important; /* Reduced padding for compact rows */
     min-width: 60px !important;
     width: 60px !important;
     max-width: 60px !important;
@@ -92,9 +98,9 @@
     background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1) !important;
 }
 
-/* Header checkbox improvements */
+/* Header checkbox improvements - Compact version */
 .InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column'] {
-    padding: 8px 12px !important;
+    padding: 6px 8px !important; /* Reduced padding for compact rows */
     min-width: 60px !important;
     width: 60px !important;
     max-width: 60px !important;
@@ -139,13 +145,13 @@
     background-color: inherit !important;
 }
 
-/* Mobile-specific improvements */
+/* Mobile-specific improvements - Compact version */
 @media (max-width: 768px) {
     .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
         min-width: 70px !important;
         width: 70px !important;
         max-width: 70px !important;
-        padding: 12px 16px !important;
+        padding: 8px 12px !important; /* Reduced padding for compact rows */
     }
 
     .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
@@ -168,7 +174,7 @@
         min-width: 70px !important;
         width: 70px !important;
         max-width: 70px !important;
-        padding: 12px 16px !important;
+        padding: 8px 12px !important; /* Reduced padding for compact rows */
     }
 
     .InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column']
@@ -178,10 +184,10 @@
     }
 }
 
-/* Touch device specific improvements */
+/* Touch device specific improvements - Compact version */
 @media (hover: none) and (pointer: coarse) {
     .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-        padding: 16px !important;
+        padding: 12px !important; /* Reduced padding for compact rows */
     }
 
     .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']

package/src/examples/MultiSelectStylingTest.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import MultiSelect from '../components/crm/MultiSelect';
+
+function MultiSelectStylingTest() {
+    const [selectedValues, setSelectedValues] = useState([]);
+    
+    const options = [
+        { id: 1, label: 'Customer Service Representative' },
+        { id: 2, label: 'Dashboard Administrator' },
+        { id: 3, label: 'Project Manager' },
+        { id: 4, label: 'Technical Support Specialist' },
+        { id: 5, label: 'Sales Representative' },
+        { id: 6, label: 'Quality Assurance Analyst' },
+        { id: 7, label: 'Business Development Manager' },
+        { id: 8, label: 'Software Engineer' }
+    ];
+    
+    const handleChange = (values) => {
+        setSelectedValues(values);
+    };
+    
+    return (
+        <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
+            <h1>MultiSelect Styling Test</h1>
+            <p>This test verifies that the delete/cross icons appear inline with the selected item text, not on a new line.</p>
+            
+            <div style={{ marginBottom: '20px' }}>
+                <h3>Test Case: Multi-Select with Long Labels</h3>
+                <p>Select multiple items to test the inline styling of delete icons:</p>
+                
+                <MultiSelect
+                    settings={{ 
+                        id: 'stylingTest',
+                        multi: true
+                    }}
+                    multi={true}
+                    options={options}
+                    inputValue={selectedValues}
+                    onChange={handleChange}
+                    placeholder="Select multiple roles..."
+                />
+            </div>
+            
+            <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
+                <h3>Expected Behavior:</h3>
+                <ul>
+                    <li>✅ Delete icons should appear on the same line as the text</li>
+                    <li>✅ Selected items should have a consistent height</li>
+                    <li>✅ Delete icons should be clickable and remove the item</li>
+                    <li>✅ Hover effect should work on delete icons</li>
+                    <li>✅ Multiple selections should wrap properly without excessive height</li>
+                </ul>
+            </div>
+            
+            <div style={{ marginTop: '20px' }}>
+                <h3>Selected Values:</h3>
+                <pre style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px', border: '1px solid #ddd' }}>
+                    {JSON.stringify(selectedValues, null, 2)}
+                </pre>
+            </div>
+            
+            <div style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>
+                <p><strong>Testing Instructions:</strong></p>
+                <ol>
+                    <li>Select 2-3 items from the dropdown</li>
+                    <li>Verify that delete icons (×) appear next to each selected item on the same line</li>
+                    <li>Hover over delete icons to see the red background effect</li>
+                    <li>Click delete icons to remove items</li>
+                    <li>Check that the component height doesn't grow unnecessarily</li>
+                </ol>
+            </div>
+        </div>
+    );
+}
+
+export default MultiSelectStylingTest;