@visns-studio/visns-components 4.4.9 → 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

@@ -1152,9 +1152,9 @@ function Field({
                         <thead>
                             <tr>
                                 <th></th>
-                                {tableRadioColumns.map((column, columnKey) => (
+                                {tableRadioColumns.map((column) => (
                                     <th
-                                        key={`${settings.id}-${columnKey.id}`}
+                                        key={`${settings.id}-${column.id}`}
                                         style={{
                                             width: '250px',
                                             whiteSpace: 'nowrap',
@@ -1166,9 +1166,9 @@ function Field({
                             </tr>
                         </thead>
                         <tbody>
-                            {tableRadioRows.map((row, rowKey) => (
+                            {tableRadioRows.map((row) => (
                                 <tr
-                                    key={`table-radio-row-${settings.id}-${rowKey}`}
+                                    key={`table-radio-row-${settings.id}-${row.id}`}
                                 >
                                     <td
                                         style={{
@@ -1177,27 +1177,24 @@ function Field({
                                     >
                                         {row.label}
                                     </td>
-                                    {tableRadioColumns.map(
-                                        (column, columnKey) => (
-                                            <td
-                                                key={`table-radio-cell-${settings.id}-${rowKey}-${columnKey}`}
-                                            >
-                                                <input
-                                                    type="checkbox"
-                                                    name={row.id}
-                                                    data-id={settings.id}
-                                                    onChange={
-                                                        onChangeTableRadio
-                                                    }
-                                                    checked={
-                                                        row.value === true
-                                                            ? true
-                                                            : false
-                                                    }
-                                                />
-                                            </td>
-                                        )
-                                    )}
+                                    {tableRadioColumns.map((column) => (
+                                        <td
+                                            key={`table-radio-cell-${settings.id}-${row.id}-${column.id}`}
+                                        >
+                                            <input
+                                                type="checkbox"
+                                                name={row.id}
+                                                data-row-id={row.id}
+                                                data-column-id={column.id}
+                                                data-id={settings.id}
+                                                onChange={onChangeTableRadio}
+                                                checked={
+                                                    row.value?.[column.id] ===
+                                                    true
+                                                }
+                                            />
+                                        </td>
+                                    ))}
                                 </tr>
                             ))}
                         </tbody>

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/GenericDynamic.jsx

@@ -213,16 +213,11 @@ const GenericDynamic = ({
 
     const handleChangeTableRadio = (e) => {
         const {
-            name,
-            dataset: { id },
+            dataset: { id, rowId, columnId },
         } = e.target;
 
-        // console.info('Checkbox changed:', { name, id });
-
         setActiveForm((prevActiveForm) => {
-            // console.info('Previous activeForm:', prevActiveForm);
-
-            // Find the form that matches the given id
+            // Find the form element that matches the given id
             const formKey = Object.keys(prevActiveForm).find(
                 (key) => prevActiveForm[key].id === id
             );
@@ -234,15 +229,21 @@ const GenericDynamic = ({
                 return prevActiveForm;
             }
 
-            // console.info('Found formKey:', formKey);
-
             // Create a new rows array with toggled value properties
-            const updatedRows = prevActiveForm[formKey].rows.map((row) => ({
-                ...row,
-                value: row.id === name ? !row.value : row.value ?? false, // Toggle value if it exists, else set default to false
-            }));
-
-            // console.info('Updated rows:', updatedRows);
+            const updatedRows = prevActiveForm[formKey].rows.map((row) => {
+                if (row.id === rowId) {
+                    // Ensure the value is an object to handle multiple columns
+                    const updatedValue = {
+                        ...row.value,
+                        [columnId]: !row.value?.[columnId], // Toggle the specific column value
+                    };
+                    return {
+                        ...row,
+                        value: updatedValue,
+                    };
+                }
+                return row;
+            });
 
             // Return the updated activeForm state
             return {
@@ -255,6 +256,10 @@ const GenericDynamic = ({
         });
     };
 
+    useEffect(() => {
+        console.info(activeForm);
+    }, [activeForm]);
+
     const handleChangeAddTableTextRow = (id) => {
         setActiveForm((prevActiveForm) => {
             // Find the key of the form that matches the id
@@ -577,7 +582,7 @@ const GenericDynamic = ({
             if (templateStatus) {
                 if (multiple) {
                     if (activeForm.hasOwnProperty('id') === false) {
-                        handleAddNewForm(false);
+                        // handleAddNewForm(false);
                     }
                 } else {
                     if (Object.keys(activeForm).length === 0) {

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.9",
+    "version": "4.4.11",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {