@visns-studio/visns-components 4.10.9 → 4.10.11

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -628,7 +628,6 @@ const DataGrid = forwardRef(
                     break;
                 case 'view':
                     modalJsonOpen();
-                    console.info(d[s.key], s.headers);
                     setJsonData((prevState) => ({
                         ...prevState,
                         data: d[s.key],
@@ -2723,10 +2722,6 @@ const DataGrid = forwardRef(
             style: style ? style : {},
         };
 
-        useEffect(() => {
-            console.info(jsonData);
-        }, [jsonData]);
-
         useEffect(() => {
             const getMinimumHeight = () => {
                 if (gridHeight > 0) return gridHeight;

package/src/components/crm/Field.jsx

@@ -1433,7 +1433,9 @@ function Field({
                                 <th></th>
                                 {tableRadioColumns.map((column, columnKey) => (
                                     <th
-                                        key={`${settings.id}-${column.id}`}
+                                        key={`${settings.id}-${
+                                            column.id
+                                        }-${Math.random()}`}
                                         style={{
                                             width: '250px',
                                             whiteSpace: 'nowrap',
@@ -1467,7 +1469,13 @@ function Field({
                                     </td>
                                     {tableRadioColumns.map((cell, cellKey) => (
                                         <td
-                                            key={`table-radio-cell-${settings.id}-${row.id}-${cell.id}`}
+                                            key={`table-radio-cell-${
+                                                settings.id
+                                            }-${row.id}-${
+                                                cell.id
+                                            }-${Math.random()
+                                                .toString(36)
+                                                .substr(2, 9)}`}
                                             style={{
                                                 textAlign:
                                                     tableRadioColumns[cellKey]

package/src/components/crm/Navigation.jsx

@@ -236,6 +236,10 @@ function Navigation({
     };
 
     const renderSetting = (n) => {
+        const isActive = location.pathname === n.url; // Check if current path matches setting URL
+
+        console.info(location.pathname, n);
+
         const iconComponents = {
             bug: Bug,
             calendar: Calendar,
@@ -245,15 +249,18 @@ function Navigation({
             signOut: SignOut,
         };
 
+        const IconComponent = iconComponents[n.icon];
+        const settingClasses = isActive ? `${styles.active}` : ''; // Add active class if URLs match
+
         if (n.id === 'notifications') {
             return (
-                <li>
+                <li className={settingClasses}>
                     <Notification setSystemAuth={setSystemAuth} />
                 </li>
             );
         } else if (n.id === 'switchAccount') {
             return (
-                <li>
+                <li className={settingClasses}>
                     <SwitchAccount
                         setSystemAuth={setSystemAuth}
                         setting={n}
@@ -262,9 +269,8 @@ function Navigation({
                 </li>
             );
         } else if (n.id === 'logout') {
-            const IconComponent = iconComponents[n.icon];
             return (
-                <li>
+                <li className={settingClasses}>
                     <button
                         title={n.label}
                         data-tooltip-id="system-tooltip"
@@ -276,10 +282,8 @@ function Navigation({
                 </li>
             );
         } else {
-            const IconComponent = iconComponents[n.icon];
-
             return (
-                <li>
+                <li className={settingClasses}>
                     <Link
                         to={n.url}
                         data-tooltip-id="system-tooltip"

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

@@ -38,6 +38,7 @@ function GenericDetail({
     layout = 'full',
     setting,
     setActiveNav = null,
+    themeType,
     urlParam,
     userProfile,
 }) {
@@ -1499,7 +1500,13 @@ function GenericDetail({
 
             <div className={styles.grid}>
                 <div className={styles.grid__subrow}>
-                    <div className={styles.grid__subnav}>
+                    <div
+                        className={
+                            themeType === 'alternate'
+                                ? styles.grid__subnav__alternate
+                                : styles.grid__subnav
+                        }
+                    >
                         <TableFilter filters={subnav} setFilters={setSubnav} />
                     </div>
                     <div className={styles.grid__subcontent}>

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

@@ -631,17 +631,19 @@ const GenericDynamic = ({
                     }
                 }
             } else {
-                if (data[type].hasOwnProperty('id')) {
+                let formData = data[type][0] ? data[type][0] : data[type];
+
+                if (formData.hasOwnProperty('id')) {
                     if (
                         Object.keys(activeForm).length === 0 &&
                         templateStatus &&
-                        data[type][0]
+                        formData[0]
                     ) {
-                        setActiveForm(data[type][0]);
+                        setActiveForm(formData[0]);
                         setActiveFormKey(0);
                     }
                 } else {
-                    setActiveForm(data[type]);
+                    setActiveForm(formData);
                     setActiveFormKey(0);
                 }
             }

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

@@ -127,6 +127,57 @@
     color: var(--background-color);
 }
 
+.grid__subnav__alternate {
+    flex: 1;
+    background: rgba(var(--item-color-rgb), 0.05);
+    border-radius: var(--br);
+    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    box-sizing: border-box;
+    padding: 5px;
+    margin: 8px 0;
+    height: auto;
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+}
+
+.grid__subnav__alternate > ul {
+    width: 100%;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.grid__subnav__alternate > ul li {
+    width: 100%;
+    margin-bottom: 3px;
+}
+
+.grid__subnav__alternate > ul li a {
+    width: 100%;
+    padding: 8px 20px;
+    box-sizing: border-box;
+    display: block;
+    text-decoration: none;
+    background: rgba(var(--item-color-rgb), 1.05);
+    color: var(--secondary-color);
+    border-radius: 5px;
+    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+    outline: none;
+    cursor: pointer;
+}
+
+.grid__subnav__alternate > ul li:hover a {
+    background: var(--primary-color);
+    color: var(--secondary-color);
+}
+
+.grid__subnav__alternate > ul li .subactive {
+    font-weight: 700;
+    background: var(--primary-color);
+    color: var(--secondary-color);
+}
+
 .grid__minheight {
     min-height: 300px;
 }

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

@@ -22,31 +22,6 @@
     }
 }
 
-.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;
-}
-
 #smartTableSearchInput {
     background: #eeeeee;
     border: 1px solid rgba(var(--table-color-rgb), 1.1);

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

@@ -238,12 +238,15 @@
         align-items: center;
     }
 
-    > ul a:hover {
+    /* Hover and Active States for <a> */
+    > ul a:hover,
+    > ul a.active {
         background: var(--primary-color-lighter);
         transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
     }
 
-    > ul a:hover svg {
+    > ul a:hover svg,
+    > ul a.active svg {
         color: var(--highlight-color);
         transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
     }
@@ -263,12 +266,15 @@
         appearance: none;
     }
 
-    button:hover {
+    /* Hover and Active States for button */
+    button:hover,
+    button.active {
         background: var(--primary-color-lighter);
         transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
     }
 
-    button:hover svg {
+    button:hover svg,
+    button.active svg {
         color: var(--highlight-color);
         transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
     }