@visns-studio/visns-components 5.0.2 → 5.0.4

package/package.json

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

package/src/components/crm/Form.jsx

@@ -584,44 +584,44 @@ function Form({
 
                 if (['create', 'update'].includes(formType)) {
                     fields.forEach((item) => {
+                        // Skip createOnly fields if formType is 'update'
                         if (formType === 'update' && item.createOnly) {
                             return;
                         }
 
+                        // Check if the item is required
                         if (item.required) {
-                            if (
-                                formData[item.id] === null ||
-                                formData[item.id] === ''
-                            ) {
+                            // Check if formData[item.id] is null, undefined, or an empty string
+                            if (!formData[item.id]) {
+                                // Check for required_check dependency
                                 if (
-                                    item.hasOwnProperty('required_check') &&
                                     item.required_check &&
                                     !formData[item.required_check]
                                 ) {
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 } else {
-                                    console.info('b', formData, item.id);
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 }
                             } else {
-                                _inputClass[item.id] = '';
+                                _inputClass[item.id] = ''; // Clear error class if valid
                             }
                         } else if (
-                            item.hasOwnProperty('required_rely') &&
                             item.required_rely &&
                             formData[item.required_rely] &&
-                            (formData[item.id] === null ||
-                                formData[item.id] === '')
+                            !formData[item.id]
                         ) {
+                            // Check if the dependent required field is empty when it should be filled
                             validation += `${item.label} is a required field.<br/>`;
                             _inputClass[item.id] = styles.inputError;
                         } else {
-                            _inputClass[item.id] = '';
+                            _inputClass[item.id] = ''; // Clear error class if not required
                         }
                     });
 
+                    console.info(_inputClass);
+
                     setInputClass(_inputClass);
                 }
 
@@ -1371,7 +1371,10 @@ function Form({
                 <div className={styles.modal}>
                     <div className={styles.modal__header}>
                         <h1>{formSettings[formType]?.title}</h1>
-                        <button className={styles.modal__close} onClick={closeModal}>
+                        <button
+                            className={styles.modal__close}
+                            onClick={closeModal}
+                        >
                             <CircleX strokeWidth={2} size={24} />
                         </button>
                     </div>

package/src/components/crm/Navigation.jsx

@@ -9,6 +9,7 @@ import {
     Calendar,
     ChatDots,
     Clipboard,
+    CloudUpload,
     DoubleSword,
     Draft,
     Envelope,
@@ -294,6 +295,48 @@ function Navigation({
     };
 
     const renderNav = (n) => {
+        const iconComponents = {
+            arrowCycle: ArrowCycle,
+            bookClose: BookClose,
+            bookOpen: BookOpen,
+            briefcase: Briefcase,
+            calendar: Calendar,
+            chatDots: ChatDots,
+            clipboard: Clipboard,
+            cloudUpload: CloudUpload,
+            doubleSword: DoubleSword,
+            draft: Draft,
+            envelope: Envelope,
+            file: File,
+            folder: Folder,
+            folderAdd: FolderAdd,
+            gear: Gear,
+            grid: Grid,
+            home: Home,
+            homeAlt1: HomeAlt1,
+            inbox: Inbox,
+            info: Info,
+            lightBulb: LightBulb,
+            microphone: Microphone,
+            money: Money,
+            newspaper: Newspaper,
+            paper: Paper,
+            peopleGroup: PeopleGroup,
+            peopleMultiple: PeopleMultiple,
+            question: Question,
+            questionFill: QuestionFill,
+            search: Search,
+            settingsVertical: SettingsVertical,
+            signOut: SignOut,
+            shippingBoxV1: ShippingBoxV1,
+            statisticUp: StatisticUp,
+            textAlignLeft: TextAlignLeft,
+            ticket: Ticket,
+            utensils: Utensils,
+        };
+
+        const IconComponent = iconComponents[n.icon];
+
         let navItemClasses;
 
         if (n.class.includes('active')) {

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

@@ -111,30 +111,72 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .grid__subcontent {
-    flex: 0 1 85%;
-    background: white;
+    flex: 0 1 80%;
+    background: var(--tertiary-color);
     border-radius: var(--br);
-    border: 1px solid var(--border-color);
+    border: 1px solid rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
-    padding: 0;
-    margin: 0.5rem 0;
+    padding: 2px;
+    margin: 8px 0;
     height: auto;
     position: relative;
 }
 
+.grid__subcontent h2 {
+    color: var(--primary-color);
+    font-size: 1.35em;
+    padding: 0;
+    margin: 0 0 30px 0;
+}
+
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: var(--border-color);
+    background: rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
+    border-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
     color: var(--paragraph-color);
-    position: relative;
+}
+
+.gridtxt__header span {
+    font-weight: 700;
+}
+
+.gridtxt > ul {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    box-sizing: border-box;
+    padding: 0.85rem;
+    margin: 0;
+}
+
+.gridtxt > ul li {
+    flex: 0 0 calc(50% - 10px);
+    padding: 0.85rem;
+    box-sizing: border-box;
+    border: 1px solid rgba(var(--primary-rgb), 0.095);
+    color: var(--paragraph-color);
+    background: rgba(var(--primary-rgb), 0.015);
+    margin: 5px;
+    border-radius: var(--br);
+    line-height: 1.45;
+    font-size: 1rem;
+}
+
+.gridtxt > ul .fw-grid-item {
+    flex: 0 0 calc(100% - 10px);
+}
+
+.gridtxt > ul .notecolor {
+    border: 1px solid var(--secondary-color);
 }
 
 .formcontainer {
@@ -163,7 +205,7 @@ select:not(:placeholder-shown) + .fi__span {
 .fi__span {
     position: absolute;
     transition: all 200ms;
-    opacity: 0.8;
+    opacity: 1;
     left: 0;
     padding: 19px 20px;
     transform-origin: top left;

package/src/components/crm/generic/styles/GenericDetail.module.scss

@@ -136,15 +136,14 @@
 
 .grid__subcontent {
     flex: 0 1 80%;
-    background: var(--item-color);
+    background: var(--tertiary-color);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    border: 1px solid rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 2px;
     margin: 8px 0;
     height: auto;
     position: relative;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
 .grid__subcontent h2 {
@@ -157,10 +156,10 @@
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: rgba(var(--item-color-rgb), 1.05);
+    background: rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-radius: 0;
+    border-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
@@ -187,12 +186,13 @@
     flex: 0 0 calc(50% - 10px);
     padding: 0.85rem;
     box-sizing: border-box;
-    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
+    border: 1px solid rgba(var(--primary-rgb), 0.095);
     color: var(--paragraph-color);
-    background: rgba(var(--tertiary-color-rgb), 0.95);
+    background: rgba(var(--primary-rgb), 0.015);
     margin: 5px;
     border-radius: var(--br);
     line-height: 1.45;
+    font-size: 1rem;
 }
 
 .gridtxt > ul .fw-grid-item {
@@ -561,4 +561,48 @@
     color: var(--primary-color);
     background: var(--highlight-color);
     border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
+}
+
+.crmtitle {
+    min-height: auto;
+    padding: 1rem;
+    margin: 0;
+    background: white;
+    border-radius: var(--br);
+    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    h1 {
+        font-weight: 700;
+        font-size: 1.25rem;
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+
+        a {
+            text-decoration: none;
+            color: var(--secondary-color);
+            font-weight: 300;
+        }
+
+        svg {
+            color: rgba(var(--primary-rgb), 0.5);
+            position: relative;
+            top: 2px;
+            margin: 0 0.5rem;
+            max-width: 15px;
+        }
+    }
+
+    .titleInfo {
+        width: max-content;
+    }
+    
+    .titleInfo span {
+        font-size: 0.875em;
+        color: rgba(var(--paragraph-color-rgb), 0.65);
+    }
 }

package/src/components/crm/generic/styles/GenericDynamic.module.scss

@@ -111,13 +111,13 @@
 }
 
 .grid__subcontent {
-    flex: 0 1 85%;
-    background: white;
+    flex: 0 1 80%;
+    background: var(--tertiary-color);
     border-radius: var(--br);
-    border: 1px solid var(--border-color);
+    border: 1px solid rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
-    padding: 0;
-    margin: 5px;
+    padding: 2px;
+    margin: 8px 0;
     height: auto;
     position: relative;
 }
@@ -132,36 +132,43 @@
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: var(--border-color);
+    background: rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
+    border-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
     color: var(--paragraph-color);
-    position: relative;
 }
 
 .gridtxt__header span {
     font-weight: 700;
 }
 
-.gridtxt__header .btn {
-    font-size: 0.85em;
-    padding: 0.25em;
+.gridtxt > ul {
+    width: 100%;
     display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    float: left;
-    position: relative;
-    top: -4px;
+    justify-content: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    box-sizing: border-box;
+    padding: 0.85rem;
+    margin: 0;
 }
 
-.gridtxt__header .btn svg {
-    max-width: 15px;
-    margin-right: 5px;
+.gridtxt > ul li {
+    flex: 0 0 calc(50% - 10px);
+    padding: 0.85rem;
+    box-sizing: border-box;
+    border: 1px solid rgba(var(--primary-rgb), 0.095);
+    color: var(--paragraph-color);
+    background: rgba(var(--primary-rgb), 0.015);
+    margin: 5px;
+    border-radius: var(--br);
+    line-height: 1.45;
+    font-size: 1rem;
 }
 
 .formcontainer {
@@ -305,9 +312,9 @@ input[type='file']:hover {
 .fi__span {
     position: absolute;
     transition: all 200ms;
-    opacity: 0.8;
+    opacity: 1;
     left: 0;
-    padding: 19px 20px;
+    padding: 0 1rem;
     transform-origin: top left;
     cursor: text;
 }
@@ -369,7 +376,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
 }
@@ -378,7 +385,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
 }
@@ -434,49 +441,6 @@ select:not(:placeholder-shown) + .fi__span {
     border-color: red !important;
 }
 
-.AutocompletePlace {
-    position: relative;
-}
-
-.AutocompletePlace svg {
-    position: absolute;
-    right: 0.5em;
-    top: 0.5em;
-    color: var(--paragraph-color);
-    cursor: pointer;
-}
-
-.AutocompletePlace .toggleActive {
-    color: var(--highlight-color);
-}
-
-.AutocompletePlace-input {
-    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
-    height: 51.5px;
-}
-
-.AutocompletePlace-results {
-    position: absolute;
-    background-color: white;
-    padding: 0;
-    margin: 0;
-    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
-    border-radius: var(--br);
-    overflow: hidden;
-    z-index: 999;
-}
-
-.AutocompletePlace-items {
-    list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
-    cursor: pointer;
-    padding: 10px 10px;
-}
-
-.AutocompletePlace-items:hover {
-    background-color: rgba(var(--paragraph-color-rgb), 0.065);
-}
-
 .react-datepicker-wrapper {
     width: 100% !important;
 }

package/src/components/crm/generic/styles/GenericFormBuilder.module.scss

@@ -506,49 +506,6 @@ select:not(:placeholder-shown) + .fi__span {
     border-color: red !important;
 }
 
-.AutocompletePlace {
-    position: relative;
-}
-
-.AutocompletePlace svg {
-    position: absolute;
-    right: 0.5em;
-    top: 0.5em;
-    color: var(--paragraph-color);
-    cursor: pointer;
-}
-
-.AutocompletePlace .toggleActive {
-    color: var(--highlight-color);
-}
-
-.AutocompletePlace-input {
-    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
-    height: 51.5px;
-}
-
-.AutocompletePlace-results {
-    position: absolute;
-    background-color: white;
-    padding: 0;
-    margin: 0;
-    border: 1px solid rgba(var(--primary-color), 0.25);
-    border-radius: var(--br);
-    overflow: hidden;
-    z-index: 999;
-}
-
-.AutocompletePlace-items {
-    list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
-    cursor: pointer;
-    padding: 10px 10px;
-}
-
-.AutocompletePlace-items:hover {
-    background-color: rgba(var(--paragraph-color-rgb), 0.065);
-}
-
 .react-datepicker-wrapper {
     width: 100% !important;
 }

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

@@ -4,41 +4,33 @@
 
 .AutocompletePlace {
     position: relative;
+    width: 100%;
 
     > svg {
         position: absolute;
         right: 0.5em;
-        top: 0.5em;
-        color: var(--primary-color);
+        top: 0.95rem;
+        color: var(--paragraph-color);
         cursor: pointer;
     }
-}
 
-.AutocompletePlace.toggleActive {
-    color: var(--highlight-color);
+    .toggleActive {
+        color: var(--secondary-color);
+    }
 }
 
 .AutocompletePlace-input {
     padding: 0.65rem 3rem 0.65rem 0.95rem !important;
-}
-
-.AutocompletePlace-results {
-    position: absolute;
-    background-color: white;
-    padding: 0;
-    margin: 0;
-    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
-    border-radius: var(--br);
-    overflow: hidden;
+    height: 38px;
 }
 
 .AutocompletePlace-items {
     list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
+    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
     cursor: pointer;
-    padding: 10px 10px;
-}
+    padding: 5px;
 
-.AutocompletePlace-items:hover {
-    background-color: rgba(var(--primary-color-rgb), 0.065);
+    &:hover {
+        background-color: rgba(var(--paragraph-rgb), 0.065);
+    }
 }

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

@@ -52,7 +52,7 @@
     .fi__span {
         position: absolute;
         transition: all 200ms;
-        opacity: 0.8;
+        opacity: 1;
         left: 0;
         transform-origin: top left;
         cursor: text;
@@ -131,7 +131,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
 }
@@ -140,7 +140,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
     z-index: 999;

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

@@ -27,7 +27,7 @@
     .fi__span {
         position: absolute;
         transition: all 200ms;
-        opacity: 0.8;
+        opacity: 1;
         left: 0;
         transform-origin: top left;
         cursor: text;
@@ -105,7 +105,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
 }
@@ -114,7 +114,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
     z-index: 999;
@@ -265,4 +265,4 @@ input[type='file'] {
             border-radius: var(--br);
         }
     }
-}
+}

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

@@ -828,56 +828,4 @@
             max-width: 20px;
         }
     }
-}
-
-.AutocompletePlace-results {
-    z-index: 999;
-}
-
-.AutocompletePlace {
-    position: relative;
-
-    > svg {
-        position: absolute;
-        right: 0.5em;
-        top: 0.5em;
-        color: var(--paragraph-color);
-        cursor: pointer;
-    }
-
-    .toggleActive {
-        color: var(--secondary-color);
-    }
-}
-
-.AutocompletePlace-input {
-    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
-    height: 38px;
-}
-
-.AutocompletePlace-results {
-    width: 400px;
-    position: absolute;
-    background-color: var(--tertiary-color);
-    padding: 0;
-    margin: 0;
-    border: 1px solid rgba(var(--primary-rgb), 0.25);
-    border-radius: var(--br);
-    overflow: hidden;
-
-    ul {
-        padding: 0;
-        margin: 0;
-    }
-}
-
-.AutocompletePlace-items {
-    list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
-    cursor: pointer;
-    padding: 10px 10px;
-
-    &:hover {
-        background-color: rgba(var(--paragraph-rgb), 0.065);
-    }
-}
+}

package/src/components/styles/global.css

@@ -110,4 +110,51 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 .popup-content {
     border-radius: var(--br);
     padding: 0 !important;
+}
+
+.AutocompletePlace-results {
+    z-index: 999;
+    width: 500px;
+    position: absolute;
+    background-color: var(--tertiary-color);
+    padding: 0;
+    margin: 0;
+    border: 1px solid rgba(var(--primary-rgb), 0.25);
+    border-radius: var(--br);
+    overflow: hidden;
+    font-size: 1rem;
+    max-height: 150px;
+    overflow-y: auto;
+
+
+    ul {
+        font-size: 1rem;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.vs-datagrid--row:hover {
+    .InovuaReactDataGrid__row-cell-wrap {
+        background: rgb(240, 240, 240) !important;
+        cursor: pointer;
+    }
+}
+
+.InovuaReactDataGrid {
+    letter-spacing: 0.015rem !important;
+    color: black !important;
+}
+
+.InovuaReactDataGrid__header {
+    color: var(--primary-color) !important;
+}
+
+.InovuaReactDataGrid__row-hover-target:hover {
+    color: black !important;
+    background: rgb(240, 240, 240) !important;
+}
+
+.InovuaReactDataGrid__row:hover {
+    cursor: pointer;
 }