@visns-studio/visns-components 4.4.5 → 4.4.7

package/components/crm/Fetch.jsx

@@ -16,6 +16,30 @@ const CustomFetch = (
         'Content-Type': 'application/json',
     };
 
+    const MAX_PAYLOAD_SIZE = 4.5 * 1024 * 1024; // 4.5MB in bytes
+
+    // Estimate headers size
+    const headersSize = JSON.stringify(headers).length;
+
+    // Estimate cookies size (if any)
+    const cookies = document.cookie;
+    const cookiesSize = cookies ? cookies.length : 0;
+
+    // Check payload size
+    const payloadSize = new Blob([JSON.stringify(formData)]).size;
+    const totalRequestSize = payloadSize + headersSize + cookiesSize;
+
+    if (totalRequestSize > MAX_PAYLOAD_SIZE) {
+        const errorMessage =
+            'The request is too large. Please try again with a smaller payload.';
+        if (errorCallback) {
+            errorCallback(errorMessage);
+        } else {
+            toast.error(errorMessage);
+        }
+        return Promise.reject(new Error(errorMessage));
+    }
+
     if (method.toUpperCase() === 'PUT' || method.toUpperCase() === 'PATCH') {
         formData = {
             ...formData,

package/components/crm/Field.jsx

@@ -1,3 +1,5 @@
+import '../styles/global.css';
+
 import React, { useEffect, useRef, useState } from 'react';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';

package/components/crm/Navigation.jsx

@@ -42,7 +42,6 @@ import {
 } from 'akar-icons';
 import CustomFetch from './Fetch';
 import Notification from './Notification';
-import classNames from 'classnames';
 import styles from './styles/Navigation.module.css';
 
 function Navigation({
@@ -52,6 +51,7 @@ function Navigation({
     navConfig,
     searchComponent,
     setSystemAuth,
+    themeType,
     userProfile,
 }) {
     const location = useLocation();
@@ -61,9 +61,9 @@ function Navigation({
     const [isScrolled, setIsScrolled] = useState(false);
     const [navData, setNavData] = useState(navConfig);
 
-    const appNavClasses = classNames(styles['app-nav'], {
-        [styles['navscrolled']]: isScrolled,
-    });
+    const appNavClasses = isScrolled
+        ? styles['navscrolled']
+        : styles['app-nav'];
 
     const handleLogout = () => {
         CustomFetch('/logout', 'GET', {}, () => {
@@ -161,21 +161,29 @@ function Navigation({
         };
 
         const IconComponent = iconComponents[n.icon];
-        const navItemClasses = classNames(
-            n.class.split(' ').map((cls) => styles[cls])
-        );
+        let navItemClasses;
+
+        if (n.class.includes('active')) {
+            console.info(n);
+            navItemClasses =
+                themeType === 'alternate'
+                    ? `${styles['nav-item-alternate']} ${styles.active}`
+                    : `${styles['nav-item']} ${styles.active}`;
+        } else {
+            navItemClasses =
+                themeType === 'alternate'
+                    ? styles['nav-item-alternate']
+                    : styles['nav-item'];
+        }
 
         const renderChildren = () => {
             if (n.children && n.children.length > 0) {
                 return (
-                    <ul className={styles.subnav}>
+                    <ul>
                         {n.children.map(
                             (child, childKey) =>
                                 child.permission === true && (
-                                    <li
-                                        className={styles['sub-nav-item']}
-                                        key={`nav-child-${childKey}`}
-                                    >
+                                    <li key={`nav-child-${childKey}`}>
                                         <Link
                                             to={child.url}
                                             title={child.label}
@@ -302,7 +310,7 @@ function Navigation({
                     navUrl === currentUrl ||
                     (nav.children &&
                         nav.children.some(
-                            (child) => cleanUrl(child.url) === currentUrl
+                            (child) => child.url === `/${currentPage}`
                         ))
                 ) {
                     return { ...nav, class: 'nav-item active' };
@@ -409,7 +417,13 @@ function Navigation({
                     )}
                 </ul>
             </div>
-            <div className={styles.hactions}>
+            <div
+                className={
+                    themeType === 'alternate'
+                        ? styles['hactions-alternate']
+                        : styles.hactions
+                }
+            >
                 <ul>
                     {navData.settings.map((setting, settingKey) =>
                         setting.permission === true ? (

package/components/crm/auth/Login.jsx

@@ -1,3 +1,5 @@
+import '../../styles/global.css';
+
 import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import Reveal from 'react-reveal/Reveal';

package/components/crm/auth/Reset.jsx

@@ -1,3 +1,5 @@
+import '../../styles/global.css';
+
 import React, { useState } from 'react';
 import Reveal from 'react-reveal/Reveal';
 import { toast } from 'react-toastify';

package/components/crm/auth/Verify.jsx

@@ -1,3 +1,5 @@
+import '../../styles/global.css';
+
 import React, { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';

package/components/crm/generic/GenericAuth.jsx

@@ -39,6 +39,7 @@ const GenericAuth = ({
     providers,
     navigation,
     routeConfig,
+    themeType = 'primary',
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
@@ -123,6 +124,7 @@ const GenericAuth = ({
                                 routeConfig={routeConfig}
                                 setUserProfile={setUserProfile}
                                 setSystemAuth={setIsAuthenticated}
+                                themeType={themeType}
                                 userProfile={userProfile}
                             />
                         }

package/components/crm/generic/GenericDetail.jsx

@@ -1,3 +1,5 @@
+import '../../styles/global.css';
+
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import moment from 'moment';

package/components/crm/generic/GenericIndex.jsx

@@ -1,3 +1,5 @@
+import '../../styles/global.css';
+
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { toast } from 'react-toastify';

package/components/crm/generic/GenericMain.jsx

@@ -14,6 +14,7 @@ const GenericMain = ({
     routeConfig,
     setSystemAuth,
     setUserProfile,
+    themeType,
     userProfile,
 }) => {
     const [incomingCallData, setIncomingCallData] = useState({});
@@ -66,12 +67,19 @@ const GenericMain = ({
 
     return (
         <div>
-            <header className={styles.header}>
+            <header
+                className={
+                    themeType === 'alternate'
+                        ? styles.headerAlternate
+                        : styles.header
+                }
+            >
                 <Navigation
                     layout={layout}
                     logo={logo}
                     navConfig={navigation}
                     setSystemAuth={setSystemAuth}
+                    themeType={themeType}
                     userProfile={userProfile}
                 />
             </header>

package/components/crm/generic/styles/GenericMain.module.css

@@ -8,6 +8,16 @@
     box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
+.headerAlternate {
+    background: white;
+    color: var(--paragraph-color);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 995;
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+}
+
 .content {
     display: flex;
     flex: 1;

package/components/crm/styles/Navigation.module.css

@@ -50,100 +50,84 @@
     align-items: center;
 }
 
-.nav-item {
+.app-nav .nav-item,
+.app-nav .nav-item-alternate {
     cursor: pointer;
     transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
     box-sizing: border-box;
     position: relative;
 }
 
-.nav-item a {
+.app-nav .nav-item a,
+.app-nav .nav-item-alternate a,
+.app-nav .nav-item span,
+.app-nav .nav-item-alternate span {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     gap: 0.25rem;
-    color: var(--tertiary-color);
     box-sizing: border-box;
     padding: 0.5em;
-    margin: 0 0.25em;
     text-decoration: none;
-    background: var(--primary-color);
     outline: none;
     border-radius: var(--br);
     transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.nav-item a svg {
-    color: var(--secondary-color);
-    display: block;
-    width: 100%;
-    max-width: 15px;
-    height: auto;
-    position: relative;
-}
-
-.nav-item:hover a,
-.nav-item.active a {
-    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
-    background: var(--primary-color-lighter);
+.app-nav .nav-item a,
+.app-nav .nav-item span {
     color: var(--tertiary-color);
+    background: var(--primary-color);
 }
 
-.nav-item:hover a svg,
-.nav-item.active a svg {
+.app-nav .nav-item a svg,
+.app-nav .nav-item span svg {
     color: var(--secondary-color);
 }
 
-.nav-item:hover ul,
-.nav-item.active ul {
-    opacity: 1;
+.app-nav .nav-item-alternate a,
+.app-nav .nav-item-alternate span {
+    color: var(--paragraph-color);
+    background: white;
 }
 
-.nav-item:hover ul {
-    display: block;
+.app-nav .nav-item-alternate a svg,
+.app-nav .nav-item-alternate span svg {
+    color: var(--highlight-color);
 }
 
-.nav-item.active a,
-.nav-item.active span {
-    background: var(--primary-color-lighter);
+.app-nav .nav-item:hover a,
+.app-nav .nav-item.active a,
+.app-nav .nav-item:hover span,
+.app-nav .nav-item.active span {
+    background: rgba(var(--primary-color-rgb), 0.97);
     color: var(--tertiary-color);
 }
 
-.nav-item span svg {
+.app-nav .nav-item:hover a svg,
+.app-nav .nav-item.active a svg,
+.app-nav .nav-item:hover span svg,
+.app-nav .nav-item.active span svg {
     color: var(--secondary-color);
 }
 
-.nav-item.active a svg,
-.nav-item.active span svg {
-    color: var(--secondary-color);
+.app-nav .nav-item-alternate:hover a,
+.app-nav .nav-item-alternate.active a,
+.app-nav .nav-item-alternate:hover span,
+.app-nav .nav-item-alternate.active span {
+    background: rgba(238, 238, 238, 0.5);
+    color: var(--paragraph-color);
 }
 
-.nav-item span {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    gap: 0.25rem;
-    color: var(--tertiary-color);
-    box-sizing: border-box;
-    padding: 0.5em;
-    line-height: 1.25;
-    text-decoration: none;
-    background: var(--primary-color);
-    border-radius: var(--br);
-    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.nav-item span:hover {
-    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
-    background: var(--primary-color-lighter);
-    color: var(--tertiary-color);
-}
-
-.nav-item span:hover svg {
-    color: var(--secondary-color);
+.app-nav .nav-item-alternate:hover a svg,
+.app-nav .nav-item-alternate.active a svg,
+.app-nav .nav-item-alternate:hover span svg,
+.app-nav .nav-item-alternate.active span svg {
+    color: var(--highlight-color);
 }
 
-.nav-item ul {
+.app-nav .nav-item > ul,
+.app-nav .nav-item-alternate > ul {
     width: 200px;
     position: absolute;
     height: auto;
@@ -156,105 +140,200 @@
     border-radius: 5px;
 }
 
-.nav-item ul li {
+.app-nav .nav-item > ul li,
+.app-nav .nav-item-alternate > ul li {
     display: block;
     position: relative;
     margin: 1px 0;
 }
 
-.nav-item ul li:last-of-type {
+.app-nav .nav-item > ul li:last-of-type,
+.app-nav .nav-item-alternate > ul li:last-of-type {
     margin-bottom: 0;
 }
 
-.nav-item ul li a {
+.app-nav .nav-item > ul li a,
+.app-nav .nav-item-alternate > ul li a {
     width: 100%;
     padding: 8px 20px;
     box-sizing: border-box;
     display: block;
     text-decoration: none;
-    background: rgba(var(--primary-color-rgb), 0.9);
-    color: var(--tertiary-color);
     border-radius: 3px;
     transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
     outline: none;
     margin: 0;
 }
 
-.nav-item ul li:hover a {
-    background: rgba(var(--primary-color-rgb), 0.8);
-    color: var(--highlight-color);
-    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.navscrolled .nav-item a {
-    padding: 0.25em 1em;
-    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+.app-nav .nav-item > ul li a {
+    background: rgba(var(--primary-color-rgb), 0.9);
+    color: var(--tertiary-color);
 }
 
-.navscrolled .nav-item span {
-    padding: 0.25em 1em;
-    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+.app-nav .nav-item-alternate > ul li a {
+    background: rgba(var(--alternate-background-color-rgb), 0.9);
+    color: var(--alternate-paragraph-color);
 }
 
-.hactions > ul {
-    list-style: none;
-    display: flex;
-    padding: 0 1rem 0 0;
-    margin: 0;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
-.hactions > ul li {
-    margin: 0 5px;
+.app-nav .nav-item > ul li:hover a,
+.app-nav .nav-item-alternate > ul li:hover a {
+    background: rgba(var(--primary-color-rgb), 1.05);
+    color: var(--highlight-color);
 }
 
-.hactions > ul a {
-    color: var(--tertiary-color);
-    box-sizing: border-box;
-    padding: 0.35rem;
-    text-decoration: none;
-    background: none;
-    border: 2px solid var(--primary-color-lighter);
-    border-radius: 100%;
-    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
-    display: flex;
-    align-items: center;
+.app-nav .nav-item-alternate > ul li:hover a {
+    background: rgba(var(--alternate-background-color-rgb), 1.05);
+    color: var(--alternate-highlight-color);
 }
 
-.hactions > ul a:hover {
-    background: var(--primary-color-lighter);
-    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+.app-nav .nav-item > ul li:hover a svg,
+.app-nav .nav-item-alternate > ul li:hover a svg {
+    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.hactions > ul a:hover svg {
-    color: var(--highlight-color);
-    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+.app-nav .nav-item::before,
+.app-nav .nav-item a::before .navscrolled .nav-item a {
+    padding: 0.25em 1em;
+    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.hactions button {
-    color: var(--tertiary-color);
-    box-sizing: border-box;
-    padding: 0.35rem;
-    text-decoration: none;
-    background: none;
-    border: 1px solid var(--primary-color-lighter);
-    border-radius: 100%;
-    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
-    display: flex;
-    align-items: center;
-    outline: none;
-    appearance: none;
+.app-nav .nav-item:hover > ul,
+.app-nav .nav-item-alternate:hover > ul {
+    display: block;
+    opacity: 1;
 }
 
-.hactions button:hover {
-    background: var(--primary-color-lighter);
-    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+.navscrolled .nav-item span {
+    padding: 0.25em 1em;
+    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.hactions button:hover svg {
-    color: var(--highlight-color);
-    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+.hactions {
+    > ul {
+        list-style: none;
+        display: flex;
+        padding: 0 1rem 0 0;
+        margin: 0;
+        flex-wrap: nowrap;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    > ul li {
+        margin: 0 5px;
+    }
+
+    > ul a {
+        color: var(--tertiary-color);
+        box-sizing: border-box;
+        padding: 0.35rem;
+        text-decoration: none;
+        background: none;
+        border: 2px solid var(--primary-color-lighter);
+        border-radius: 100%;
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+        display: flex;
+        align-items: center;
+    }
+
+    > ul a:hover {
+        background: var(--primary-color-lighter);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    > ul a:hover svg {
+        color: var(--highlight-color);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    button {
+        color: var(--tertiary-color);
+        box-sizing: border-box;
+        padding: 0.35rem;
+        text-decoration: none;
+        background: none;
+        border: 1px solid var(--primary-color-lighter);
+        border-radius: 100%;
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+        display: flex;
+        align-items: center;
+        outline: none;
+        appearance: none;
+    }
+
+    button:hover {
+        background: var(--primary-color-lighter);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    button:hover svg {
+        color: var(--highlight-color);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+}
+
+.hactions-alternate {
+    > ul {
+        list-style: none;
+        display: flex;
+        padding: 0 1rem 0 0;
+        margin: 0;
+        flex-wrap: nowrap;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    > ul li {
+        margin: 0 5px;
+    }
+
+    > ul a {
+        color: var(--paragraph-color);
+        box-sizing: border-box;
+        padding: 0.35rem;
+        text-decoration: none;
+        background: none;
+        border: 2px solid var(--primary-color-lighter);
+        border-radius: 100%;
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+        display: flex;
+        align-items: center;
+    }
+
+    > ul a:hover {
+        background: var(--primary-color-lighter);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    > ul a:hover svg {
+        color: var(--highlight-color);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    button {
+        color: var(--paragraph-color);
+        box-sizing: border-box;
+        padding: 0.35rem;
+        text-decoration: none;
+        background: none;
+        border: 1px solid var(--primary-color-lighter);
+        border-radius: 100%;
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+        display: flex;
+        align-items: center;
+        outline: none;
+        appearance: none;
+    }
+
+    button:hover {
+        background: var(--primary-color-lighter);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    button:hover svg {
+        color: var(--highlight-color);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
 }

package/components/styles/global.css

@@ -1,3 +1,55 @@
+@import '@fontsource/barlow/index.css';
+@import '@fontsource/barlow/300.css';
+@import '@fontsource/barlow/700.css';
+
+/* Apply the crop mixin manually */
+.crop::before {
+    content: '';
+    display: block;
+    height: 0;
+    width: 0;
+    margin-top: calc((1 - 1.25) * 0.5em);
+}
+
+body {
+    font-size: 100%;
+    background: var(--tertiary-color);
+    font-family: 'Barlow', sans-serif;
+    font-weight: 300;
+    font-style: normal;
+    letter-spacing: 0.018em;
+}
+
+.loginbg {
+    background: var(--tertiary-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-size: 1.675em;
+    color: var(--primary-color);
+    font-weight: 700;
+    font-style: normal;
+}
+
+p {
+    font-weight: 300;
+    font-style: normal;
+    margin: 0 0 calc(var(--padding) / 2); /* Replace with actual padding value */
+    color: var(--paragraph-color);
+}
+
+p::before {
+    content: '';
+    display: block;
+    height: 0;
+    width: 0;
+    margin-top: calc((1 - 1.25) * 0.5em);
+}
+
 textarea,
 select,
 input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
@@ -13,19 +65,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     box-shadow: none;
     padding: 1rem;
     outline: none;
-    width: 100%;
+    /* width: 100%; */
     box-sizing: border-box;
     background: rgba(white, 0.5);
     color: var(--paragraph-color);
     transition: border 0.15s linear;
-    font-size: 1.25em;
-
-    &:hover {
-        border: 1px solid var(--primary-color);
-        transition: border 0.15s linear;
-    }
-
-    &:focus {
-        border: 1px solid var(--primary-color);
-    }
 }

package/package.json

@@ -1,5 +1,6 @@
 {
     "dependencies": {
+        "@fontsource/barlow": "^5.0.13",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@nivo/bar": "^0.87.0",
         "@nivo/core": "^0.87.0",
@@ -13,7 +14,7 @@
         "axios": "^1.7.2",
         "dayjs": "^1.11.11",
         "file-saver": "^2.0.5",
-        "framer-motion": "^11.2.14",
+        "framer-motion": "^11.3.4",
         "html-react-parser": "^5.1.10",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
@@ -57,7 +58,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.4.5",
+    "version": "4.4.7",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {