@visns-studio/visns-components 5.9.12 → 5.9.144

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -385,7 +385,6 @@ const CellWithTooltip = ({
     );
 };
 
-
 const DataGrid = forwardRef(
     (
         {
@@ -622,7 +621,6 @@ const DataGrid = forwardRef(
             if (ajaxSetting?.groupBy) {
                 groupsInitializedRef.current = false;
                 setCollapsedGroups({}); // Clear existing state when groupBy changes
-                
             }
         }, [ajaxSetting?.groupBy]);
 
@@ -746,7 +744,7 @@ const DataGrid = forwardRef(
                         setTableData(res.data);
                     }
                     dataRef.current = res.data;
-                    
+
                     // Force grid to recalculate row heights after data changes
                     // This helps with multi-line content timing without interfering with core mechanisms
                     setTimeout(() => {
@@ -1500,7 +1498,9 @@ const DataGrid = forwardRef(
                                     CustomFetch(
                                         s.url + '/' + d[form.primaryKey],
                                         s.method,
-                                        {},
+                                        {
+                                            ...s.data,
+                                        },
                                         function (result) {
                                             if (result.error === '') {
                                                 handleReload();
@@ -1673,10 +1673,15 @@ const DataGrid = forwardRef(
 
                 rowProps.onClick = (event) => {
                     // Check if this is a group row - group rows should only handle expand/collapse, not onRowClick
-                    const isGroupRow = rowProps.isGroupRow || 
-                                     rowProps.data?.__group || 
-                                     event.target.closest('.InovuaReactDataGrid__group-row') ||
-                                     event.target.closest('.InovuaReactDataGrid__group-cell');
+                    const isGroupRow =
+                        rowProps.isGroupRow ||
+                        rowProps.data?.__group ||
+                        event.target.closest(
+                            '.InovuaReactDataGrid__group-row'
+                        ) ||
+                        event.target.closest(
+                            '.InovuaReactDataGrid__group-cell'
+                        );
 
                     if (isGroupRow) {
                         // For group rows, only allow the original onClick handler (for expand/collapse)
@@ -2274,7 +2279,7 @@ const DataGrid = forwardRef(
                 // Apply immediately and with a conservative delay
                 applyGroupedStyling();
                 const timer1 = setTimeout(applyGroupedStyling, 100);
-                
+
                 return () => {
                     clearTimeout(timer1);
                 };
@@ -2296,9 +2301,140 @@ const DataGrid = forwardRef(
             let allow = true;
 
             if (s.active) {
+                // Helper function to get nested values for main active condition (searches for target value)
+                const getNestedValueForMain = (data, path, targetValue) => {
+                    if (Array.isArray(path)) {
+                        return path.reduce(
+                            (currentValue, key) =>
+                                currentValue && currentValue[key] !== undefined
+                                    ? currentValue[key]
+                                    : undefined,
+                            data
+                        );
+                    } else if (typeof path === 'string' && path.includes('.')) {
+                        const keys = path.split('.');
+                        let currentValue = data;
+
+                        for (let i = 0; i < keys.length; i++) {
+                            const key = keys[i];
+
+                            if (!currentValue) return undefined;
+
+                            // Handle array search pattern like "customers[].pivot.is_primary"
+                            if (key.includes('[]')) {
+                                const arrayKey = key.replace('[]', '');
+                                const remainingPath = keys
+                                    .slice(i + 1)
+                                    .join('.');
+
+                                if (Array.isArray(currentValue[arrayKey])) {
+                                    // Search through the array for the target value
+                                    for (const item of currentValue[arrayKey]) {
+                                        const result = remainingPath
+                                            ? getNestedValueForMain(
+                                                  item,
+                                                  remainingPath,
+                                                  targetValue
+                                              )
+                                            : item;
+                                        if (result === targetValue) {
+                                            return result;
+                                        }
+                                    }
+                                }
+                                return undefined;
+                            } else {
+                                currentValue = currentValue[key];
+                            }
+                        }
+
+                        return currentValue;
+                    } else {
+                        // Fallback to simple property access
+                        return data[path];
+                    }
+                };
+                
+                // Helper function to get nested values for additional conditions (returns first valid value)
+                const getNestedValueForAdditional = (data, path) => {
+                    if (Array.isArray(path)) {
+                        return path.reduce(
+                            (currentValue, key) =>
+                                currentValue && currentValue[key] !== undefined
+                                    ? currentValue[key]
+                                    : undefined,
+                            data
+                        );
+                    } else if (typeof path === 'string' && path.includes('.')) {
+                        const keys = path.split('.');
+                        let currentValue = data;
+
+                        for (let i = 0; i < keys.length; i++) {
+                            const key = keys[i];
+
+                            if (!currentValue) return undefined;
+
+                            // Handle array search pattern like "customers[].id"
+                            if (key.includes('[]')) {
+                                const arrayKey = key.replace('[]', '');
+                                const remainingPath = keys
+                                    .slice(i + 1)
+                                    .join('.');
+
+                                if (Array.isArray(currentValue[arrayKey])) {
+                                    // Return the first valid result from the array
+                                    for (const item of currentValue[arrayKey]) {
+                                        const result = remainingPath
+                                            ? getNestedValueForAdditional(
+                                                  item,
+                                                  remainingPath
+                                              )
+                                            : item;
+                                        if (result !== undefined) {
+                                            return result;
+                                        }
+                                    }
+                                }
+                                return undefined;
+                            } else {
+                                currentValue = currentValue[key];
+                            }
+                        }
+
+                        return currentValue;
+                    } else {
+                        // Fallback to simple property access
+                        return data[path];
+                    }
+                };
+
+                // Get the active value using nested path or simple property access
+                const activeValue = getNestedValueForMain(d, s.active.id, s.active.value);
+                const hasActiveProperty = activeValue !== undefined;
+
+                // Check additional conditions if they exist
+                const checkAdditionalConditions = () => {
+                    if (
+                        !s.active.additional ||
+                        !Array.isArray(s.active.additional)
+                    ) {
+                        return true; // No additional conditions, so they pass
+                    }
+
+                    // All additional conditions must be met
+                    return s.active.additional.every((condition) => {
+                        const conditionValue = getNestedValueForAdditional(d, condition.id);
+                        // Type-flexible comparison - convert both to strings for comparison
+                        return String(conditionValue) === String(condition.value);
+                    });
+                };
+
+                const additionalConditionsMet = checkAdditionalConditions();
+
                 if (
-                    d.hasOwnProperty(s.active.id) &&
-                    d[s.active.id] === s.active.value &&
+                    hasActiveProperty &&
+                    String(activeValue) === String(s.active.value) &&
+                    additionalConditionsMet &&
                     s.active.type !== 'greater' &&
                     s.active.type !== 'not null'
                 ) {
@@ -2307,14 +2443,16 @@ const DataGrid = forwardRef(
                     };
                 } else if (
                     s.active.type === 'greater' &&
-                    d[s.active.id] > s.active.value
+                    Number(activeValue) > Number(s.active.value) &&
+                    additionalConditionsMet
                 ) {
                     iconStyle = {
                         color: s.active.colour,
                     };
                 } else if (
                     s.active.type === 'not null' &&
-                    d[s.active.id] !== null
+                    activeValue !== null &&
+                    additionalConditionsMet
                 ) {
                     iconStyle = {
                         color: s.active.colour,

package/src/components/crm/Field.jsx

@@ -259,11 +259,13 @@ function Field({
                 if (Array.isArray(s.child)) {
                     s.child.forEach((a) => {
                         if (a) {
+                            console.info(a);
                             filter = {
                                 where: [
                                     {
                                         id: s.id,
                                         value: _inputValue,
+                                        ...(a.whereHas && { whereHas: a.whereHas }),
                                     },
                                 ],
                             };

package/src/components/crm/auth/styles/AuthForm.module.scss

@@ -0,0 +1,443 @@
+// Base layout styles
+.authLayout {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f9fafb;
+    padding: 1rem;
+}
+
+.authContainer {
+    width: 100%;
+    max-width: 500px;
+    
+    @media (max-width: 768px) {
+        max-width: 95%;
+        width: 95%;
+    }
+}
+
+.authWrapper {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    overflow: hidden;
+}
+
+.formContainer {
+    padding: 2.5rem;
+    
+    @media (max-width: 768px) {
+        padding: 2rem;
+    }
+    
+    @media (max-width: 480px) {
+        padding: 1.5rem;
+    }
+}
+
+.formContent {
+    width: 100%;
+}
+
+// Logo styles
+.logo {
+    display: block;
+    margin: 0 auto 2rem;
+    max-width: 150px;
+    height: auto;
+}
+
+// Typography
+.title {
+    text-align: center;
+    margin-bottom: 0.5rem;
+    color: #111827;
+    font-weight: 600;
+    font-size: 1.75rem;
+    line-height: 1.2;
+    
+    @media (max-width: 768px) {
+        font-size: 1.5rem;
+    }
+}
+
+.subtitle {
+    text-align: center;
+    margin-bottom: 2rem;
+    color: #6b7280;
+    font-size: 0.875rem;
+    line-height: 1.4;
+}
+
+// Form fields wrapper
+.formFields {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    
+    @media (max-width: 768px) {
+        gap: 1.5rem;
+    }
+}
+
+// Form group (wrapper for each field)
+.formGroup {
+    position: relative;
+    width: 100%;
+}
+
+// Input wrapper and styles
+.inputWrapper {
+    position: relative;
+    width: 100%;
+}
+
+.inputLabel {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #374151;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.input {
+    width: 100%;
+    padding: 1rem 2.5rem 1rem 1rem;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    transition: all 0.2s ease-in-out;
+    background-color: #ffffff;
+    color: #111827;
+    min-height: 48px;
+    
+    @media (max-width: 768px) {
+        font-size: 16px; /* Prevents zoom on iOS */
+        min-height: 52px;
+    }
+
+    &:focus {
+        outline: none;
+        border-color: var(--primary-color, #4f46e5);
+        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+    }
+
+    &::placeholder {
+        color: #9ca3af;
+        opacity: 1;
+    }
+
+    &:focus::placeholder {
+        opacity: 0.5;
+    }
+}
+
+.inputError {
+    border-color: #ef4444;
+    
+    &:focus {
+        border-color: #ef4444;
+        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+}
+
+.inputDisabled {
+    background-color: #f9fafb;
+    color: #9ca3af;
+    cursor: not-allowed;
+}
+
+.labelError {
+    color: #ef4444;
+}
+
+.inputIcon {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    pointer-events: none;
+    z-index: 2;
+}
+
+// Error message styles
+.errorMessage {
+    margin-top: 0.5rem;
+    color: #ef4444;
+    font-size: 0.875rem;
+    line-height: 1.4;
+}
+
+// Button styles
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 1rem 1.5rem;
+    border: none;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    position: relative;
+    text-decoration: none;
+    line-height: 1.2;
+    min-height: 48px;
+    
+    @media (max-width: 768px) {
+        min-height: 52px;
+        font-size: 1rem;
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+}
+
+.button--primary {
+    background-color: var(--primary-color, #4f46e5);
+    color: white;
+
+    &:hover:not(:disabled) {
+        background-color: var(--primary-color-dark, #3730a3);
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
+    }
+}
+
+.button--secondary {
+    background-color: #6b7280;
+    color: white;
+
+    &:hover:not(:disabled) {
+        background-color: #4b5563;
+    }
+}
+
+.button--outline {
+    background-color: transparent;
+    color: var(--primary-color, #4f46e5);
+    border: 2px solid var(--primary-color, #4f46e5);
+
+    &:hover:not(:disabled) {
+        background-color: var(--primary-color, #4f46e5);
+        color: white;
+    }
+}
+
+.button--danger {
+    background-color: #ef4444;
+    color: white;
+
+    &:hover:not(:disabled) {
+        background-color: #dc2626;
+    }
+}
+
+.button--success {
+    background-color: #10b981;
+    color: white;
+
+    &:hover:not(:disabled) {
+        background-color: #059669;
+    }
+}
+
+.button--small {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+}
+
+.button--medium {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+}
+
+.button--large {
+    padding: 1rem 2rem;
+    font-size: 1.125rem;
+}
+
+.button--fullWidth {
+    width: 100%;
+}
+
+.button--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.buttonText {
+    flex: 1;
+}
+
+.buttonIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.buttonSpinner {
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid transparent;
+    border-top: 2px solid currentColor;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+// Checkbox styles
+.checkboxGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.checkboxWrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.checkbox {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid #d1d5db;
+    border-radius: 4px;
+    background-color: white;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &:checked {
+        background-color: var(--primary-color, #4f46e5);
+        border-color: var(--primary-color, #4f46e5);
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+    }
+}
+
+.checkboxError {
+    border-color: #ef4444;
+}
+
+.checkboxDisabled {
+    background-color: #f9fafb;
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.checkboxLabel {
+    color: #374151;
+    font-size: 0.875rem;
+    cursor: pointer;
+    user-select: none;
+    line-height: 1.4;
+}
+
+.checkboxLabelDisabled {
+    color: #9ca3af;
+    cursor: not-allowed;
+}
+
+// Utility classes
+.divider {
+    position: relative;
+    margin: 1.5rem 0;
+    text-align: center;
+    color: #6b7280;
+    font-size: 0.875rem;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background-color: #e5e7eb;
+        z-index: 0;
+    }
+
+    span {
+        background-color: white;
+        padding: 0 1rem;
+        position: relative;
+        z-index: 1;
+    }
+}
+
+.linkButton {
+    background: none;
+    border: none;
+    color: var(--primary-color, #4f46e5);
+    text-decoration: underline;
+    cursor: pointer;
+    font-size: 0.875rem;
+    padding: 0;
+
+    &:hover {
+        color: var(--primary-color-dark, #3730a3);
+    }
+
+    &:focus {
+        outline: 2px solid var(--primary-color, #4f46e5);
+        outline-offset: 2px;
+    }
+}
+
+// Responsive design
+@media (max-width: 480px) {
+    .authLayout {
+        padding: 0.5rem;
+    }
+
+    .authContainer {
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .formContainer {
+        padding: 1.5rem;
+    }
+
+    .title {
+        font-size: 1.375rem;
+    }
+
+    .formFields {
+        gap: 1.25rem;
+    }
+    
+    .input {
+        padding: 1rem;
+        font-size: 16px;
+    }
+    
+    .button {
+        padding: 1rem;
+        font-size: 1rem;
+    }
+}

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

@@ -2127,6 +2127,41 @@ function GenericDetail({
                                 config.columns &&
                                 config.settings
                             ) {
+                                const processUrlParams = (obj) => {
+                                    if (Array.isArray(obj)) {
+                                        return obj.map(processUrlParams);
+                                    } else if (obj && typeof obj === 'object') {
+                                        const processed = {};
+                                        for (const [
+                                            key,
+                                            value,
+                                        ] of Object.entries(obj)) {
+                                            if (value === 'urlParam') {
+                                                processed[key] =
+                                                    routeParams[urlParam];
+                                            } else if (
+                                                typeof value === 'object' && value !== null
+                                            ) {
+                                                processed[key] =
+                                                    processUrlParams(value);
+                                            } else {
+                                                processed[key] = value;
+                                            }
+                                        }
+                                        return processed;
+                                    }
+                                    return obj;
+                                };
+
+                                const processedSettings = config.settings
+                                    ? processUrlParams(config.settings)
+                                    : config.settings;
+
+                                const processedConfig = {
+                                    ...config,
+                                    settings: processedSettings,
+                                };
+
                                 return (
                                     <>
                                         {activeTabConfig.dropzone &&
@@ -2292,7 +2327,7 @@ function GenericDetail({
                                         <div className={styles.grid__row}>
                                             <div className={styles.grid__full}>
                                                 <Table
-                                                    {...config}
+                                                    {...processedConfig}
                                                     ref={gridRef}
                                                     gridHeight={
                                                         windowHeight * 0.65