@visns-studio/visns-components 5.12.10 → 5.12.12

package/package.json

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

package/src/components/DataGrid.jsx

@@ -1928,6 +1928,20 @@ const DataGrid = forwardRef(
             let iconStyle = {};
             let allow = true;
 
+            // Check role-based permissions if roles are specified
+            if (s.roles && Array.isArray(s.roles) && s.roles.length > 0) {
+                // Check if user has any of the required roles
+                const hasRequiredRole = s.roles.some((requiredRole) =>
+                    userProfile?.roles?.some(
+                        (userRole) => userRole.name === requiredRole
+                    )
+                );
+
+                if (!hasRequiredRole) {
+                    allow = false;
+                }
+            }
+
             if (s.active) {
                 // Helper function to get nested values for main active condition (searches for target value)
                 const getNestedValueForMain = (data, path, targetValue) => {
@@ -2836,7 +2850,25 @@ const DataGrid = forwardRef(
 
                     const newColumns = columns.map(renderColumn);
 
-                    if (settings.length > 0) {
+                    // Function to check if any settings would be visible for any row
+                    const hasVisibleSettings = () => {
+                        if (settings.length === 0) return false;
+                        
+                        // Check if any setting would be visible based on role permissions
+                        return settings.some(setting => {
+                            // Check role-based permissions
+                            if (setting.roles && Array.isArray(setting.roles) && setting.roles.length > 0) {
+                                const hasRequiredRole = setting.roles.some(requiredRole => 
+                                    userProfile?.roles?.some(userRole => userRole.name === requiredRole)
+                                );
+                                return hasRequiredRole;
+                            }
+                            // If no roles specified, setting is visible
+                            return true;
+                        });
+                    };
+
+                    if (hasVisibleSettings()) {
                         newColumns.push({
                             name: 'setting',
                             header: 'Action',

package/src/components/generic/GenericEditableTable.jsx

@@ -59,13 +59,35 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
             <div className={styles.cpicker__btn}>
                 <button
                     ref={buttonRef}
-                    style={value ? { background: value } : {}}
+                    style={value ? { 
+                        background: value,
+                        border: '1px solid rgba(0,0,0,0.2)',
+                        borderRadius: '3px',
+                        width: '20px',
+                        height: '20px',
+                        padding: '0',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    } : {
+                        background: 'transparent',
+                        border: '1px solid rgba(0,0,0,0.2)',
+                        borderRadius: '3px',
+                        width: '20px',
+                        height: '20px',
+                        padding: '0',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }}
                     onClick={(e) => {
                         e.preventDefault();
                         setColorPickerShow(!colorPickerShow);
                     }}
                 >
-                    <Droplets size={20} style={{ color: 'black' }} />
+                    <Droplets size={16} style={{ color: value ? 'white' : 'black' }} />
                 </button>
 
                 {colorPickerShow &&
@@ -124,6 +146,7 @@ const GenericEditableTable = ({
     const isInitialLoad = useRef(true);
     const { columns, rows, form, title } = schedulingConfig;
     const hasCategory = rows && rows.categoryKey; // Only group if defined
+    const hasColourColumn = columns.some(col => col.id === 'colours');
 
     // dataSets: each item => { created_at: string, data: array of rows }
     const [dataSets, setDataSets] = useState([]);
@@ -203,12 +226,11 @@ const GenericEditableTable = ({
     const sortBySortOrder = (dataArray) =>
         [...dataArray].sort((a, b) => a.sort_order - b.sort_order);
 
-    // Return background color if there's a column of type 'colour'
+    // Return background color from row_colour field or colours column
     const getRowBackground = (entry) => {
-        const colourColumn = columns.find((col) => col.type === 'colour');
-        return colourColumn && entry[colourColumn.id]
-            ? entry[colourColumn.id]
-            : undefined;
+        // Check if there's a colour picked from the colours column
+        const coloursValue = entry.colours || entry.row_colour;
+        return coloursValue ? `${coloursValue}40` : undefined; // Add 40% opacity
     };
 
     // Calculate total for columns of type 'total'
@@ -623,16 +645,26 @@ const GenericEditableTable = ({
     const renderScheduledTableField = (entry, column, keyCounter) => {
         if (!entry || !column) return null;
 
+        // Special handling for colours column regardless of type
+        if (column.id === 'colours') {
+            return (
+                <ColourPicker
+                    value={entry[column.id] || ''}
+                    columnId={column.id}
+                    keyCounter={keyCounter}
+                    onChange={(value, fieldId, keyCounter) => {
+                        // Update both the colours field and row_colour for row highlighting
+                        handleFieldChange(value, fieldId, keyCounter);
+                        handleFieldChange(value, 'row_colour', keyCounter);
+                    }}
+                />
+            );
+        }
+
         switch (column.type) {
             case 'colour':
-                return (
-                    <ColourPicker
-                        value={entry[column.id] || ''}
-                        columnId={column.id}
-                        keyCounter={keyCounter}
-                        onChange={handleFieldChange}
-                    />
-                );
+                // For other colour columns, picker is rendered in the action column
+                return null;
             case 'currency':
             case 'number':
                 return (
@@ -752,18 +784,27 @@ const GenericEditableTable = ({
     // Render new row field
     const renderNewRowField = (newRowData, column, groupId = null) => {
         const value = newRowData ? newRowData[column.id] : '';
+        
+        // Special handling for colours column regardless of type
+        if (column.id === 'colours') {
+            return (
+                <ColourPicker
+                    value={value || ''}
+                    columnId={column.id}
+                    keyCounter={0}
+                    onChange={(val, colId) => {
+                        // Update both the colours field and row_colour for row highlighting
+                        handleNewFieldChange(val, colId, groupId);
+                        handleNewFieldChange(val, 'row_colour', groupId);
+                    }}
+                />
+            );
+        }
+        
         switch (column.type) {
             case 'colour':
-                return (
-                    <ColourPicker
-                        value={value}
-                        columnId={column.id}
-                        keyCounter={0}
-                        onChange={(val) =>
-                            handleNewFieldChange(val, column.id, groupId)
-                        }
-                    />
-                );
+                // For other colour columns, picker is rendered in the action column
+                return null;
             case 'currency':
             case 'number':
                 return (
@@ -1027,6 +1068,14 @@ const GenericEditableTable = ({
                                                 <div
                                                     className={styles.tdactions}
                                                 >
+                                                    {!hasColourColumn && (
+                                                        <ColourPicker
+                                                            value={entry.row_colour || ''}
+                                                            columnId={'row_colour'}
+                                                            keyCounter={entry.keyCounter}
+                                                            onChange={handleFieldChange}
+                                                        />
+                                                    )}
                                                     {idx > 0 && (
                                                         <ArrowUp
                                                             size={16}
@@ -1173,6 +1222,14 @@ const GenericEditableTable = ({
                                 ))}
                                 <td>
                                     <div className={styles.tdactions}>
+                                        {!hasColourColumn && (
+                                            <ColourPicker
+                                                value={entry.row_colour || ''}
+                                                columnId={'row_colour'}
+                                                keyCounter={idx}
+                                                onChange={handleFieldChange}
+                                            />
+                                        )}
                                         {idx > 0 && (
                                             <ArrowUp
                                                 size={16}

package/src/components/styles/GenericEditableTable.module.scss

@@ -1,47 +1,124 @@
 .schedulingTable {
     width: 100%;
     border-collapse: collapse;
-    margin: 0.5em 0; // Reduced margin
+    margin: 0.1em 0; // Minimal margin
 
     th,
     td {
-        padding: 0.2rem; // Reduced padding for cells
+        padding: 0.08rem 0.25rem; // Ultra-compact padding for cells
         text-align: left;
         border: 1px solid rgba(var(--primary-rgb), 0.1);
+        line-height: 1; // Minimal line height
+        vertical-align: middle; // Ensure vertical alignment
+        height: 22px; // Fixed row height
+    }
+    
+    // Additional high-specificity selectors to override any global styles
+    td input,
+    td select,
+    th input,
+    th select {
+        padding: 0.05rem 0.2rem !important;
+        margin: 0 !important;
+        font-size: 0.7rem !important;
+        height: 18px !important;
+        line-height: 1 !important;
+        border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
+        box-sizing: border-box !important;
+        border-radius: 2px !important;
+        width: 100% !important;
+        appearance: none !important;
+        background: white !important;
+    }
+    
+    td select,
+    th select {
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L1 4h10z" fill="%23666"/></svg>') !important;
+        background-repeat: no-repeat !important;
+        background-position: right 0.2rem center !important;
+        background-size: 8px !important;
+        padding: 0.05rem 1rem 0.05rem 0.2rem !important;
+        cursor: pointer !important;
+        
+        &::-ms-expand {
+            display: none !important;
+        }
     }
 
     th {
-        padding: 0.25rem 0.5rem; // Less padding than before
-        font-size: 0.9rem; // Slightly smaller font size
+        padding: 0.1rem 0.25rem; // Ultra-compact header padding
+        font-size: 0.75rem; // Smaller font size
         font-weight: bold;
         background-color: var(--primary-color);
         color: white;
         text-align: center;
+        height: 24px; // Fixed header height
     }
 
     td {
         background-color: rgba(var(--primary-rgb), 0.05);
+        
+        /* Ensure action column cells don't inherit row background */
+        &:has(.tdactions) {
+            background: rgba(var(--primary-rgb), 0.05) !important;
+        }
     }
 
-    /* Compact styling for native input and select elements */
+    /* Ultra-compact styling for native input and select elements - override global styles */
     input,
     select {
-        padding: 0.25rem 0.5rem;
-        margin: 0;
-        font-size: 0.85rem;
-        height: 28px;
-        line-height: 1;
-        border: 1px solid rgba(var(--primary-rgb), 0.1);
-        box-sizing: border-box;
+        padding: 0.05rem 0.2rem !important; // Force minimal padding, override global styles
+        margin: 0 !important;
+        font-size: 0.7rem !important; // Smaller font
+        height: 18px !important; // Minimal height
+        line-height: 1 !important;
+        border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
+        box-sizing: border-box !important;
+        border-radius: 2px !important; // Smaller border radius
+        width: 100% !important;
+        appearance: none !important; // Remove default dropdown arrow for consistency
+        background: white !important;
+        
+        // Custom dropdown arrow for select elements
+        &[type="select"],
+        &:not([type]) {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L1 4h10z" fill="%23666"/></svg>') !important;
+            background-repeat: no-repeat !important;
+            background-position: right 0.2rem center !important;
+            background-size: 8px !important;
+            padding-right: 1rem !important;
+        }
+    }
+    
+    // Specific styling for select elements to match inputs exactly - with !important to override globals
+    select {
+        appearance: none !important;
+        background: white !important;
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L1 4h10z" fill="%23666"/></svg>') !important;
+        background-repeat: no-repeat !important;
+        background-position: right 0.2rem center !important;
+        background-size: 8px !important;
+        padding: 0.05rem 1rem 0.05rem 0.2rem !important; // Force specific padding values
+        cursor: pointer !important;
+        
+        // Remove default arrow on different browsers
+        &::-ms-expand {
+            display: none !important;
+        }
+        
+        &:focus {
+            outline: none !important;
+            border-color: var(--primary-color) !important;
+        }
     }
 }
 
 .categoryRow {
     background-color: rgba(var(--primary-rgb), 0.15);
-    font-size: 1rem; // Reduced font size
+    font-size: 0.9rem; // Further reduced font size
     font-weight: bold;
     text-align: left;
-    padding: 0.5rem 0.75rem; // Reduced padding
+    padding: 0.35rem 0.5rem; // Further reduced padding
     border-bottom: 2px solid var(--primary-color);
     color: var(--primary-color);
 }
@@ -156,17 +233,22 @@
     width: max-content;
     display: inline-block;
     position: relative;
-    padding: 0.4rem 0.75rem; /* Reduced padding for a compact look */
+    padding: 0.2rem 0.4rem; /* Ultra-minimal padding */
     cursor: pointer;
-    font-size: 1rem; /* Slightly smaller font size */
+    font-size: 0.75rem; /* Even smaller font size */
     color: var(--tertiary-color);
     text-decoration: none;
     overflow: hidden;
     background: var(--primary-color);
     border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
+    border-radius: 2px; /* Smaller border radius */
     outline: none;
     transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+    height: 20px; /* Match input height */
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &:hover {
         color: var(--primary-color);
@@ -181,18 +263,48 @@
     flex-wrap: nowrap;
     justify-content: flex-start;
     align-items: center;
-    gap: 0.1rem;
+    gap: 0.05rem; // Reduced gap
+    background: transparent !important; /* Ensure no background color interference */
 
     span {
         display: flex;
         align-items: center;
         position: relative;
-        width: 16px;
-        height: 16px;
+        width: 14px; // Smaller icons
+        height: 14px;
 
         svg {
-            width: 16px;
+            width: 14px;
+            height: 14px;
+        }
+    }
+}
+
+/* Color picker specific styling */
+.cpicker {
+    display: flex;
+    align-items: center;
+    
+    &__btn {
+        display: flex;
+        align-items: center;
+        
+        button {
+            margin: 0;
+            outline: none;
+            transition: all 0.2s ease;
+            width: 16px; // Smaller color picker button
             height: 16px;
+            
+            &:hover {
+                opacity: 0.8;
+                transform: scale(1.05);
+            }
+            
+            svg {
+                width: 12px; // Smaller icon
+                height: 12px;
+            }
         }
     }
 }
@@ -221,8 +333,8 @@
     background-color: rgba(var(--secondary-rgb), 0.15);
     font-weight: bold;
     text-align: right;
-    padding: 0.5em; // Reduced padding
-    font-size: 0.8rem; // Reduced font size
+    padding: 0.3em; // Further reduced padding
+    font-size: 0.75rem; // Further reduced font size
     color: var(--primary-color);
     border-top: 2px solid var(--primary-color);
 }
@@ -403,23 +515,53 @@
     }
 }
 
-/* Compact styling for react-select components */
+/* Ultra-compact styling for react-select components to match native elements */
 .react-select__control {
-    min-height: 28px;
+    min-height: 18px; // Match native input height exactly
     padding: 0;
-    font-size: 0.85rem;
+    font-size: 0.7rem; // Match native input font size
     border: 1px solid rgba(var(--primary-rgb), 0.1);
     box-sizing: border-box;
+    border-radius: 2px;
+    background: white;
+    
+    &:hover {
+        border-color: rgba(var(--primary-rgb), 0.2);
+    }
+    
+    &--is-focused {
+        border-color: var(--primary-color);
+        box-shadow: none;
+    }
 }
 
 .react-select__value-container {
-    padding: 0 0.5rem;
+    padding: 0.05rem 0.2rem; // Match native input padding exactly
     margin: 0;
 }
 
 .react-select__input {
     margin: 0;
     padding: 0;
+    
+    input {
+        font-size: 0.7rem !important;
+        height: 16px;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.react-select__single-value {
+    font-size: 0.7rem;
+    margin: 0;
+    color: inherit;
+}
+
+.react-select__placeholder {
+    font-size: 0.7rem;
+    margin: 0;
+    color: #999;
 }
 
 .react-select__indicator-separator {
@@ -427,7 +569,92 @@
 }
 
 .react-select__indicators {
-    padding: 0 0.25rem;
+    padding: 0 0.2rem; // Match native select padding
+    height: 16px;
+    
+    svg {
+        width: 8px; // Match native select arrow size
+        height: 8px;
+        color: #666;
+    }
+}
+
+.react-select__dropdown-indicator {
+    padding: 0;
+}
+
+/* Ultra-compact styling for MultiSelect components to match native inputs */
+.selectFullWidth {
+    width: 100%;
+    
+    .react-select__control {
+        min-height: 18px; // Match native input height
+        height: 18px;
+        font-size: 0.7rem; // Match native input font size
+        border: 1px solid rgba(var(--primary-rgb), 0.1);
+        border-radius: 2px;
+        background: white;
+        
+        &:hover {
+            border-color: rgba(var(--primary-rgb), 0.2);
+        }
+        
+        &--is-focused {
+            border-color: var(--primary-color);
+            box-shadow: none;
+        }
+    }
+    
+    .react-select__value-container {
+        padding: 0.05rem 0.2rem; // Match native input padding
+        height: 16px;
+        display: flex;
+        align-items: center;
+    }
+    
+    .react-select__single-value {
+        font-size: 0.7rem; // Match native input font size
+        margin: 0;
+        color: inherit;
+    }
+    
+    .react-select__placeholder {
+        font-size: 0.7rem; // Match native input font size
+        margin: 0;
+        color: #999;
+    }
+    
+    .react-select__input-container {
+        height: 16px;
+        padding: 0;
+        margin: 0;
+        
+        input {
+            font-size: 0.7rem !important;
+            height: 16px;
+            padding: 0;
+            margin: 0;
+        }
+    }
+    
+    .react-select__indicators {
+        height: 16px;
+        padding: 0 0.2rem; // Match native select padding
+    }
+    
+    .react-select__dropdown-indicator {
+        padding: 0;
+        
+        svg {
+            width: 8px; // Match native select arrow size
+            height: 8px;
+            color: #666;
+        }
+    }
+    
+    .react-select__indicator-separator {
+        display: none;
+    }
 }
 
 .newRow {
@@ -437,6 +664,47 @@
     ); /* Slightly lighter background */
     border-top: 1px dashed rgba(var(--primary-rgb), 0.3);
     border-bottom: 1px dashed rgba(var(--primary-rgb), 0.3);
+    
+    /* Ultra-compact styling for new row inputs and selects - force override globals */
+    input,
+    select {
+        height: 18px !important; // Consistent height
+        padding: 0.05rem 0.2rem !important; // Force override global padding
+        font-size: 0.7rem !important;
+        appearance: none !important;
+        background: white !important;
+        margin: 0 !important;
+        line-height: 1 !important;
+        border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
+        box-sizing: border-box !important;
+        border-radius: 2px !important;
+        width: 100% !important;
+        
+        // Ensure selects have dropdown arrow
+        &[type="select"],
+        &:not([type]) {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L1 4h10z" fill="%23666"/></svg>') !important;
+            background-repeat: no-repeat !important;
+            background-position: right 0.2rem center !important;
+            background-size: 8px !important;
+            padding-right: 1rem !important;
+        }
+    }
+    
+    select {
+        appearance: none !important;
+        background: white !important;
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L1 4h10z" fill="%23666"/></svg>') !important;
+        background-repeat: no-repeat !important;
+        background-position: right 0.2rem center !important;
+        background-size: 8px !important;
+        padding: 0.05rem 1rem 0.05rem 0.2rem !important; // Force specific padding
+        cursor: pointer !important;
+        
+        &::-ms-expand {
+            display: none !important;
+        }
+    }
 }
 
 .datasetSelector {