@visns-studio/visns-components 5.8.19 → 5.9.0

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/generic/GenericDetail.jsx

@@ -17,6 +17,20 @@ import '../../styles/global.css';
  *     // other form properties
  *   }
  * }
+ *
+ * Modal Vertical Alignment:
+ * To position the modal toward the top of the viewport instead of center, add the `verticalAlign: "top"` property to the form object.
+ * Example:
+ * {
+ *   id: 'overview',
+ *   type: 'overview',
+ *   form: {
+ *     verticalAlign: "top",
+ *     primaryKey: "id",
+ *     url: "/ajax/jobs",
+ *     // other form properties
+ *   }
+ * }
  */
 
 import React, { useEffect, useRef, useState } from 'react';
@@ -2753,9 +2767,25 @@ function GenericDetail({
                 open={modalShow}
                 onClose={modalClose}
                 closeOnDocumentClick={false}
-                contentStyle={{ width: '80vw', maxWidth: '1200px' }}
+                contentStyle={{
+                    width: '80vw',
+                    maxWidth: '1200px',
+                    ...(formData.verticalAlign === 'top' && {
+                        position: 'fixed',
+                        top: '5vh',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        margin: '0',
+                    }),
+                }}
             >
-                <div className="modalwrap top--modal modalWide">
+                <div
+                    className={`modalwrap top--modal modalWide ${
+                        formData.verticalAlign === 'top'
+                            ? 'modal-top-aligned'
+                            : ''
+                    }`}
+                >
                     <div className="modal">
                         <Form
                             closeModal={modalClose}

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;
@@ -594,6 +604,19 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 
+/* Relocated auto-refresh controls (when placed at bottom) */
+.autoRefreshContainerRelocated {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 15px;
+    height: 38px;
+    background-color: #f9fafb;
+    border: 1px solid #d1d5db;
+    border-radius: var(--br, 4px);
+    margin: 0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
 .autoRefreshLabel {
     display: flex;
     align-items: center;
@@ -720,6 +743,15 @@
     }
 }
 
+/* Bottom container for relocated controls */
+.dataGridBottomContainer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 8px;
+    padding: 0 5px;
+}
+
 /* Original filter input styles kept for backward compatibility */
 .filterInput {
     display: flex;

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/TableFilter.module.scss

@@ -193,7 +193,38 @@
 }
 
 /* Media queries for responsive design */
-@media (max-width: 1024px) {
+
+/* Tablet view (961px to 1024px) - Keep filter expanded in left container */
+@media (max-width: 1024px) and (min-width: 961px) {
+    /* Ensure filter remains visible and properly styled for tablets */
+    .tableFilter {
+        display: block;
+        /* Maintain normal styling for tablet view */
+    }
+
+    .mobileToggle {
+        display: none; /* Hide hamburger menu on tablets */
+    }
+
+    /* Slightly adjust padding for better tablet experience */
+    .parentLink {
+        padding: 9px 16px;
+        font-size: 0.9rem;
+    }
+
+    .link {
+        padding: 9px 16px;
+        font-size: 0.85rem;
+    }
+
+    .childLink {
+        padding: 7px 16px 7px 26px;
+        font-size: 0.85rem;
+    }
+}
+
+/* Phone view (960px and below) - Use hamburger menu when navigation moves to top */
+@media (max-width: 960px) {
     .mobileToggle {
         display: flex;
     }

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 */
@@ -32,3 +38,171 @@
     outline: none !important;
     box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.2) !important;
 }
+
+/* Checkbox column improvements for touch devices - Compact version */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
+    padding: 6px 8px !important; /* Reduced padding for compact rows */
+    min-width: 60px !important;
+    width: 60px !important;
+    max-width: 60px !important;
+    position: relative !important;
+    cursor: pointer !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    /* Ensure the entire cell is clickable */
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+}
+
+/* Improve checkbox touch targets */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    input[type='checkbox'] {
+    width: 20px !important;
+    height: 20px !important;
+    margin: 0 !important;
+    cursor: pointer !important;
+    position: relative !important;
+    z-index: 2 !important;
+}
+
+/* Create larger touch target area around checkbox */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    .InovuaReactDataGrid__checkbox-wrapper,
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    .InovuaReactDataGrid__checkbox {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-height: 44px !important;
+    min-width: 44px !important;
+    padding: 12px !important;
+    margin: -12px !important;
+    cursor: pointer !important;
+    border-radius: 4px !important;
+    transition: background-color 0.2s ease !important;
+}
+
+/* Touch-friendly hover effect for the entire cell */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']:hover {
+    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.05) !important;
+}
+
+/* Touch-friendly hover effect for checkbox wrapper */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    .InovuaReactDataGrid__checkbox-wrapper:hover,
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    .InovuaReactDataGrid__checkbox:hover {
+    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1) !important;
+}
+
+/* Header checkbox improvements - Compact version */
+.InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column'] {
+    padding: 6px 8px !important; /* Reduced padding for compact rows */
+    min-width: 60px !important;
+    width: 60px !important;
+    max-width: 60px !important;
+}
+
+.InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column']
+    input[type='checkbox'] {
+    width: 20px !important;
+    height: 20px !important;
+    margin: 0 !important;
+    cursor: pointer !important;
+}
+
+/* Prevent text selection in checkbox column */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+}
+
+/* Additional checkbox styling for better UX */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    .InovuaReactDataGrid__cell-content {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 100% !important;
+    height: 100% !important;
+}
+
+/* Focus styles for accessibility */
+.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+    input[type='checkbox']:focus {
+    outline: 2px solid rgba(var(--primary-rgb, 59, 130, 246), 0.5) !important;
+    outline-offset: 2px !important;
+}
+
+/* Ensure checkbox column doesn't interfere with row hover */
+.InovuaReactDataGrid__row:hover
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
+    background-color: inherit !important;
+}
+
+/* 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: 8px 12px !important; /* Reduced padding for compact rows */
+    }
+
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        input[type='checkbox'] {
+        width: 24px !important;
+        height: 24px !important;
+    }
+
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        .InovuaReactDataGrid__checkbox-wrapper,
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        .InovuaReactDataGrid__checkbox {
+        min-height: 48px !important;
+        min-width: 48px !important;
+        padding: 16px !important;
+        margin: -16px !important;
+    }
+
+    .InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column'] {
+        min-width: 70px !important;
+        width: 70px !important;
+        max-width: 70px !important;
+        padding: 8px 12px !important; /* Reduced padding for compact rows */
+    }
+
+    .InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column']
+        input[type='checkbox'] {
+        width: 24px !important;
+        height: 24px !important;
+    }
+}
+
+/* Touch device specific improvements - Compact version */
+@media (hover: none) and (pointer: coarse) {
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
+        padding: 12px !important; /* Reduced padding for compact rows */
+    }
+
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        input[type='checkbox'] {
+        width: 28px !important;
+        height: 28px !important;
+    }
+
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        .InovuaReactDataGrid__checkbox-wrapper,
+    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+        .InovuaReactDataGrid__checkbox {
+        min-height: 52px !important;
+        min-width: 52px !important;
+        padding: 18px !important;
+        margin: -18px !important;
+    }
+}

package/src/components/styles/global.css

@@ -228,6 +228,35 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     max-width: 1200px !important;
 }
 
+/* Top-aligned modal styles */
+.modal-top-aligned {
+    max-height: 90vh !important;
+    overflow-y: auto !important;
+}
+
+/* Ensure modal content is scrollable when top-aligned */
+.modal-top-aligned .modal__content {
+    max-height: calc(90vh - 60px) !important;
+    overflow-y: auto !important;
+}
+
+/* Responsive adjustments for top-aligned modals */
+@media (max-width: 768px) {
+    .popup-content[style*='top: 5vh'] {
+        top: 2vh !important;
+        width: 95vw !important;
+        max-width: none !important;
+    }
+
+    .modal-top-aligned {
+        max-height: 95vh !important;
+    }
+
+    .modal-top-aligned .modal__content {
+        max-height: calc(95vh - 60px) !important;
+    }
+}
+
 .AutocompletePlace-results {
     z-index: 999;
     width: 500px;