@visns-studio/visns-components 4.4.10 → 4.4.11

package/components/crm/DataGrid.jsx

@@ -1,3 +1,5 @@
+import '../styles/global.css';
+
 import React, {
     forwardRef,
     useCallback,

package/components/crm/Field.jsx

@@ -1181,7 +1181,6 @@ function Field({
                                         <td
                                             key={`table-radio-cell-${settings.id}-${row.id}-${column.id}`}
                                         >
-                                            {console.info(column, row)}
                                             <input
                                                 type="checkbox"
                                                 name={row.id}

package/components/crm/Navigation.jsx

@@ -336,19 +336,21 @@ function Navigation({
     }, []);
 
     return layout === 'simple' || layout === 'cms' ? (
-        <div className="cwrap">
+        <div className={styles.cwrap}>
             <aside
                 className={
-                    isOpen ? 'aside--cms' : 'aside--cms aside--cms--open'
+                    isOpen
+                        ? `${styles['aside--cms']}`
+                        : `${styles['aside--cms']} ${styles['aside--cms--open']}`
                 }
             >
-                <div className="logo">
+                <div className={styles.logo}>
                     <Link to="/">
                         <img src={logo} alt="System Logo" />
                     </Link>
                 </div>
-                <div className="awrap">
-                    <nav className="navwrap">
+                <div className={styles.awrap}>
+                    <nav className={styles.navwrap}>
                         <ul className={appNavClasses}>
                             {navData.navigations.map((nav, navKey) =>
                                 nav.permission === true ||
@@ -362,13 +364,15 @@ function Navigation({
                     </nav>
                 </div>
             </aside>
-            <main className="content">
-                <div className="content-header">
+            <main className={styles.content}>
+                <div className={styles['content-header']}>
                     {searchComponent}
-                    <div className="content-title">
+                    <div className={styles['content-title']}>
                         <button
                             className={
-                                isOpen ? 'mobmenu' : 'mobmenu mobmenu--open'
+                                isOpen
+                                    ? `${styles.mobmenu}`
+                                    : `${styles.mobmenu} ${styles['mobmenu--open']}`
                             }
                             onClick={() => setOpen(!isOpen)}
                         >
@@ -380,7 +384,7 @@ function Navigation({
                             <span></span>
                         </button>
                     </div>
-                    <div className="hactions">
+                    <div className={styles['hactions-alternate']}>
                         <ul>
                             {navData.settings.map((setting, settingKey) =>
                                 setting.permission === true ? (

package/components/crm/auth/Login.jsx

@@ -135,10 +135,6 @@ const Login = ({ loginBg, logo, providers, setSystemAuth, setUserProfile }) => {
         }
     };
 
-    useEffect(() => {
-        console.info(loginBg, 'test111');
-    }, [loginBg]);
-
     return (
         <div className={styles.lcontainer}>
             <div className={styles.lwrap}>

package/components/crm/generic/GenericAuth.jsx

@@ -71,7 +71,6 @@ const GenericAuth = ({
 
     useEffect(() => {
         updateAuthStatus();
-        console.info(loginBg, 'test222');
     }, [isAuthenticated]);
 
     return (

package/components/crm/generic/GenericDetail.jsx

@@ -25,7 +25,13 @@ import TableFilter from '../TableFilter';
 
 import styles from './styles/GenericDetail.module.css';
 
-function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
+function GenericDetail({
+    extraUrlParam,
+    layout = 'full',
+    setting,
+    urlParam,
+    userProfile,
+}) {
     const gridRef = useRef(null);
     const currentConfigRef = useRef(null);
     const routeParams = useParams();
@@ -39,7 +45,6 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
     /** General States */
     const [activeStage, setActiveStage] = useState('');
     const [config, setConfig] = useState({});
-    const [currentConfig, setCurrentConfig] = useState({});
     const [data, setData] = useState({});
     const [dataReload, setDataReload] = useState(0);
     const [rowsSelected, setRowsSelected] = useState({});
@@ -1343,7 +1348,13 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
         <>
             <div className={styles.grid}>
                 <div className={styles.grid__row}>
-                    <div className={`${styles.grid__full} ${styles.crmtitle}`}>
+                    <div
+                        className={`${styles.grid__full} ${
+                            layout === 'full'
+                                ? styles.crmtitle
+                                : styles['crmtitle--alternate']
+                        }`}
+                    >
                         <Breadcrumb data={data} page={page} />
                         {total > 0 && (
                             <div className={styles.titleInfo}>

package/components/crm/generic/GenericIndex.jsx

@@ -275,7 +275,9 @@ function GenericIndex({ layout = 'full', setting, userProfile }) {
             );
         } else {
             return (
-                <div className="grid__full">{renderContentBasedOnType()}</div>
+                <div className={styles.grid__full}>
+                    {renderContentBasedOnType()}
+                </div>
             );
         }
     }, [layout, subnav, setSubnav, setConfig, renderTable]);
@@ -284,9 +286,15 @@ function GenericIndex({ layout = 'full', setting, userProfile }) {
         <>
             <div className={styles.grid}>
                 <div className={styles.grid__row}>
-                    <div className={`${styles.grid__full} ${styles.crmtitle}`}>
+                    <div
+                        className={`${styles.grid__full} ${
+                            layout === 'full'
+                                ? styles.crmtitle
+                                : styles.crmtitleSimple
+                        }`}
+                    >
                         <h1>{setting.page?.title}</h1>
-                        <div className="titleInfo">
+                        <div className={styles.titleInfo}>
                             <span>
                                 [<strong>{total}</strong> Total{' '}
                                 {setting.page?.title}]

package/components/crm/generic/GenericMain.jsx

@@ -1,3 +1,5 @@
+import '../../styles/global.css';
+
 import React, { useState } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 
@@ -65,7 +67,7 @@ const GenericMain = ({
         });
     };
 
-    return (
+    return layout === 'full' ? (
         <div>
             <header
                 className={
@@ -100,6 +102,27 @@ const GenericMain = ({
                 </div>
             </main>
         </div>
+    ) : (
+        <Navigation
+            layout={layout}
+            logo={logo}
+            navConfig={navigation}
+            setSystemAuth={setSystemAuth}
+            themeType={themeType}
+            userProfile={userProfile}
+        >
+            <div className={styles['content-main']} id="app">
+                <div className={styles.paddingSimple}>
+                    <Routes>
+                        {renderRoutes(routeConfig)}
+                        {/* Add a wildcard route for handling unknown paths */}
+                        <Route path="*" element={<Navigate to="/" replace />} />
+                    </Routes>
+                </div>
+                <Call incomingCallData={incomingCallData} />
+                <Loader />
+            </div>
+        </Navigation>
     );
 };
 

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

@@ -241,6 +241,42 @@
     }
 }
 
+.crmtitle--alternate {
+    border: none;
+    min-height: auto;
+    padding: 5px 20px;
+    margin: 0;
+    background: var(--tertiary-color);
+    border-radius: var(--br);
+    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    h1 {
+        color: var(--paragraph-color);
+        font-weight: 700;
+        font-size: 1.15em;
+        margin: 0;
+        padding: 0.65rem 0;
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+
+        a {
+            text-decoration: none;
+            color: var(--primary-color);
+        }
+
+        svg {
+            position: relative;
+            top: 0;
+            margin: 0 0.5rem;
+            max-width: 15px;
+        }
+    }
+}
+
 .titleInfo {
     position: absolute;
     right: 2em;
@@ -576,3 +612,27 @@
 .oppdets {
     line-height: 1.475em;
 }
+
+.btn {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.65rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    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);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+    font-size: 1.25em;
+}
+
+.btn:hover {
+    color: var(--primary-color);
+    background: var(--highlight-color);
+    border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
+}

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

@@ -177,6 +177,26 @@
     margin: 0 0.25rem;
 }
 
+.crmtitleSimple {
+    border: none;
+    min-height: auto;
+    padding: 0.65rem 1rem;
+    margin-bottom: 0.15rem;
+    background: var(--tertiary-color);
+    border-radius: var(--br);
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+
+    h1 {
+        font-size: 1.25rem;
+        margin: 0;
+        padding: 0;
+    }
+}
+
 .titleInfo {
     position: absolute;
     right: 2em;

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

@@ -85,3 +85,7 @@
 .padding {
     padding: 5em 1em 1em 1em;
 }
+
+.paddingSimple {
+    padding: 1rem;
+}

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

@@ -14,19 +14,18 @@
     outline: none;
     transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
     font-size: 1.25em;
+}
 
-    &:hover {
-        color: var(--primary-color);
-        background: var(--highlight-color);
-        border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
-    }
+.btn:hover {
+    color: var(--primary-color);
+    background: var(--highlight-color);
+    border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
 }
-.vs-datagrid--row {
-    &:hover {
-        .InovuaReactDataGrid__row-cell-wrap {
-            background: rgb(240, 240, 240) !important;
-            cursor: pointer;
-        }
+
+.vs-datagrid--row:hover {
+    .InovuaReactDataGrid__row-cell-wrap {
+        background: rgb(240, 240, 240) !important;
+        cursor: pointer;
     }
 }
 
@@ -39,17 +38,13 @@
     color: var(--primary-color) !important;
 }
 
-.InovuaReactDataGrid__row-hover-target {
-    &:hover {
-        color: black !important;
-        background: rgb(240, 240, 240) !important;
-    }
+.InovuaReactDataGrid__row-hover-target:hover {
+    color: black !important;
+    background: rgb(240, 240, 240) !important;
 }
 
-.InovuaReactDataGrid__row {
-    &:hover {
-        cursor: pointer;
-    }
+.InovuaReactDataGrid__row:hover {
+    cursor: pointer;
 }
 
 #smartTableSearchInput {
@@ -58,17 +53,17 @@
     border-radius: var(--br);
     color: var(--paragraph-color);
     padding: 10px 10px 10px 35px;
+}
 
-    &:focus {
-        border: 1px solid lighten(#474747, 10%);
-        box-shadow: none;
-        transform: translateY(0);
-    }
+#smartTableSearchInput:focus {
+    border: 1px solid lighten(#474747, 10%);
+    box-shadow: none;
+    transform: translateY(0);
+}
 
-    &:hover {
-        box-shadow: none;
-        transform: translateY(0);
-    }
+#smartTableSearchInput:hover {
+    box-shadow: none;
+    transform: translateY(0);
 }
 
 .filterInput--alt {

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

@@ -337,3 +337,240 @@
         transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
     }
 }
+
+/** Simple Layout */
+.cwrap {
+    display: flex;
+}
+
+.aside--cms {
+    background: var(--nav-bg);
+    position: fixed;
+    overflow: hidden;
+    height: 100%;
+    width: var(--sidebar-width);
+}
+
+.aside--cms--open {
+    transform: translateX(0);
+    transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.aside--cms .logo {
+    width: 100%;
+    position: relative;
+    background: rgba(var(--tertiary-color-rgb), 0.95);
+    height: 50px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.cwrap .logo img {
+    width: 100%;
+    max-width: 90px;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+.awrap {
+    width: 100%;
+    position: relative;
+    padding: 1rem 0;
+}
+
+.navwrap {
+    width: 100%;
+    position: relative;
+}
+
+.aside--cms .awrap .navwrap .app-nav {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item {
+    width: 100%;
+    cursor: pointer;
+    box-sizing: border-box;
+    position: relative;
+    border-radius: var(--br);
+    overflow: hidden;
+    padding: 0.15rem 0.45rem;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item a {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    color: var(--tertiary-color);
+    box-sizing: border-box;
+    padding: 0.5rem 1rem;
+    line-height: 1.25;
+    text-decoration: none;
+    background: var(--nav-bg);
+    outline: none;
+    border-radius: var(--br);
+    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item a > svg {
+    position: relative;
+    right: 8px;
+    opacity: 1;
+    transition: opacity 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    color: var(--highlight-color);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item:hover a,
+.aside--cms .awrap .navwrap .app-nav .nav-item.active a {
+    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    background: rgba(var(--tertiary-color-rgb), 0.05);
+    color: var(--highlight-color);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item:hover a > svg,
+.aside--cms .awrap .navwrap .app-nav .nav-item.active a > svg {
+    opacity: 1;
+    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item:hover ul {
+    display: block;
+    opacity: 1;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item.active a {
+    background: rgba(var(--tertiary-color-rgb), 0.075);
+    color: var(--highlight-color);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item span {
+    display: block;
+    color: rgba(var(--paragraph-color-rgb), 0.3);
+    box-sizing: border-box;
+    padding: 1.25em 0.85em;
+    line-height: 1.25;
+    text-decoration: none;
+    background: var(--primary-color);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item span:hover {
+    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+    background: rgba(var(--primary-color-rgb), 1.05);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item > ul {
+    width: 200px;
+    position: absolute;
+    height: auto;
+    margin: 0;
+    padding: 0.25em;
+    list-style: none;
+    display: none;
+    opacity: 0;
+    background: var(---primary-color);
+    border-radius: 5px;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item > ul li {
+    display: block;
+    position: relative;
+    margin-bottom: 2px;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item > ul li:last-of-type {
+    margin-bottom: 0;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item > ul li a {
+    width: 100%;
+    padding: 8px 20px;
+    box-sizing: border-box;
+    display: block;
+    text-decoration: none;
+    background: rgba(var(--primary-color-rgb), 0.92);
+    color: var(---tertiary-color);
+    border-radius: 3px;
+    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+    outline: none;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item > ul li:hover a {
+    background: rgba(var(--secondary-color-rgb), 0.75);
+    color: var(---primary-color);
+    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.content {
+    margin-left: var(--sidebar-width);
+    flex-grow: 1;
+
+    .content-header {
+        background: var(--tertiary-color);
+        box-sizing: border-box;
+        padding: 0.15rem;
+        height: 50px;
+        box-shadow: 1px 0px 0px rgba(255, 255, 255, 1);
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .content-title {
+        width: max-content;
+        padding: 0 1rem;
+
+        h1 {
+            padding: 0;
+            margin: 0;
+            font-size: 1em;
+            line-height: 1.25;
+            color: var(--paragraph-color);
+            font-weight: 300;
+        }
+
+        .mobmenu {
+            display: none;
+            visibility: hidden;
+        }
+    }
+
+    .content-actions {
+        width: max-content;
+
+        ul {
+            display: flex;
+            padding: 0;
+            margin: 0;
+            list-style: none;
+            justify-content: flex-end;
+
+            li {
+                padding: 0 10px;
+                text-align: center;
+
+                i {
+                    font-size: 1.25em;
+                }
+
+                a {
+                    text-decoration: none;
+                    color: var(--paragraph-color);
+                }
+            }
+        }
+    }
+
+    .content-main {
+        background: rgba(var(--tertiary-color-rgb), 1.05);
+    }
+}

package/components/styles/global.css

@@ -13,7 +13,7 @@
 
 body {
     font-size: 100%;
-    background: var(--tertiary-color);
+    background: var(--tertiary-color-dark, var(--tertiary-color));
     font-family: 'Barlow', sans-serif;
     font-weight: 300;
     font-style: normal;

package/package.json

@@ -58,7 +58,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.4.10",
+    "version": "4.4.11",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {