@visns-studio/visns-components 4.3.12 → 4.4.0

package/components/crm/Navigation.jsx

@@ -7,7 +7,7 @@ import {
     Briefcase,
     Bug,
     Calendar,
-    CHatDots,
+    ChatDots,
     Clipboard,
     DoubleSword,
     Draft,
@@ -39,11 +39,11 @@ import {
     TextAlignLeft,
     Ticket,
     Utensils,
-    ChatDots,
 } from 'akar-icons';
-
 import CustomFetch from './Fetch';
 import Notification from './Notification';
+import classNames from 'classnames';
+import styles from './styles/Navigation.module.css';
 
 function Navigation({
     children,
@@ -57,10 +57,13 @@ function Navigation({
     const location = useLocation();
     const navigate = useNavigate();
     const currentPage = location.pathname.substr(1) || 'dashboard';
-    const [isOpen, setOpen] = useState('false');
+    const [isOpen, setOpen] = useState(false);
     const [isScrolled, setIsScrolled] = useState(false);
     const [navData, setNavData] = useState(navConfig);
-    const appNavClasses = `app-nav ${isScrolled ? 'navscrolled' : ''}`;
+
+    const appNavClasses = classNames(styles['app-nav'], {
+        [styles['navscrolled']]: isScrolled,
+    });
 
     const handleLogout = () => {
         CustomFetch('/logout', 'GET', {}, () => {
@@ -150,7 +153,7 @@ function Navigation({
             questionFill: QuestionFill,
             settingsVertical: SettingsVertical,
             signOut: SignOut,
-            shippingboxv1: ShippingBoxV1,
+            shippingBoxV1: ShippingBoxV1,
             statisticUp: StatisticUp,
             textAlignLeft: TextAlignLeft,
             ticket: Ticket,
@@ -158,16 +161,19 @@ function Navigation({
         };
 
         const IconComponent = iconComponents[n.icon];
+        const navItemClasses = classNames(
+            n.class.split(' ').map((cls) => styles[cls])
+        );
 
         const renderChildren = () => {
             if (n.children && n.children.length > 0) {
                 return (
-                    <ul>
+                    <ul className={styles.subnav}>
                         {n.children.map(
                             (child, childKey) =>
                                 child.permission === true && (
                                     <li
-                                        className="sub-nav-item"
+                                        className={styles['sub-nav-item']}
                                         key={`nav-child-${childKey}`}
                                     >
                                         <Link
@@ -186,7 +192,7 @@ function Navigation({
         };
 
         return (
-            <li className={n.class}>
+            <li className={navItemClasses}>
                 {n.url ? (
                     <Link to={n.url}>
                         <IconComponent strokeWidth={2} size={18} />
@@ -231,7 +237,6 @@ function Navigation({
                         const matchingPermission = permissions.includes(
                             nav.permissionKey
                         );
-
                         return {
                             ...nav,
                             permission: matchingPermission,
@@ -250,7 +255,6 @@ function Navigation({
                     const matchingPermission = permissions.includes(
                         nav.permissionKey
                     );
-
                     return {
                         ...nav,
                         permission: matchingPermission,
@@ -281,14 +285,12 @@ function Navigation({
     useEffect(() => {
         setNavData((prevNavData) => {
             const updateNavItems = (nav) => {
-                const cleanUrl = (url) => {
-                    return url && url.startsWith('/')
+                const cleanUrl = (url) =>
+                    url && url.startsWith('/')
                         ? url.substr(1).split('/')[0]
                         : url
                         ? url.split('/')[0]
                         : '';
-                };
-
                 const currentUrl = cleanUrl(currentPage);
                 const navUrl = nav.url
                     ? cleanUrl(nav.url)
@@ -325,8 +327,6 @@ function Navigation({
         return () => {
             window.removeEventListener('scroll', handleScroll);
         };
-
-        console.info(layout);
     }, []);
 
     return layout === 'simple' || layout === 'cms' ? (
@@ -338,7 +338,7 @@ function Navigation({
             >
                 <div className="logo">
                     <Link to="/">
-                        <img src={logo} alt="Visns Studio CRM" />
+                        <img src={logo} alt="System Logo" />
                     </Link>
                 </div>
                 <div className="awrap">
@@ -364,9 +364,7 @@ function Navigation({
                             className={
                                 isOpen ? 'mobmenu' : 'mobmenu mobmenu--open'
                             }
-                            onClick={() => {
-                                setOpen(!isOpen);
-                            }}
+                            onClick={() => setOpen(!isOpen)}
                         >
                             <span></span>
                             <span></span>
@@ -394,38 +392,35 @@ function Navigation({
             </main>
         </div>
     ) : (
-        <header className="header">
-            <div className="hwrap">
-                <div className="logo">
-                    <Link to="/">
-                        <img src={logo} alt="Visns Studio CRM" />
-                    </Link>
-                </div>
-                <div className="navwrap">
-                    <ul className={appNavClasses}>
-                        {navData.navigations.map((nav, navKey) =>
-                            nav.permission === true ||
-                            nav.permissionKey === '' ? (
-                                <React.Fragment key={`nav-item-${navKey}`}>
-                                    {renderNav(nav)}
-                                </React.Fragment>
-                            ) : null
-                        )}
-                    </ul>
-                </div>
-                <div className="hactions">
-                    <ul>
-                        {navData.settings.map((setting, settingKey) =>
-                            setting.permission === true ? (
-                                <React.Fragment key={`setting-${settingKey}`}>
-                                    {renderSetting(setting)}
-                                </React.Fragment>
-                            ) : null
-                        )}
-                    </ul>
-                </div>
+        <div className={styles.hwrap}>
+            <div className={styles.logo}>
+                <Link to="/">
+                    <img src={logo} alt="System Logo" />
+                </Link>
+            </div>
+            <div className={styles.navwrap}>
+                <ul className={appNavClasses}>
+                    {navData.navigations.map((nav, navKey) =>
+                        nav.permission === true || nav.permissionKey === '' ? (
+                            <React.Fragment key={`nav-item-${navKey}`}>
+                                {renderNav(nav)}
+                            </React.Fragment>
+                        ) : null
+                    )}
+                </ul>
             </div>
-        </header>
+            <div className={styles.hactions}>
+                <ul>
+                    {navData.settings.map((setting, settingKey) =>
+                        setting.permission === true ? (
+                            <React.Fragment key={`setting-${settingKey}`}>
+                                {renderSetting(setting)}
+                            </React.Fragment>
+                        ) : null
+                    )}
+                </ul>
+            </div>
+        </div>
     );
 }
 

package/components/crm/Notification.jsx

@@ -2,22 +2,15 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import parse from 'html-react-parser';
-import { TooltipWrapper } from 'react-tooltip';
 import { toast } from 'react-toastify';
 import { Bell, CircleX } from 'akar-icons';
-
 import CustomFetch from './Fetch';
+import styles from './styles/Notification.module.css';
 
 function Notification(props) {
     let interval;
     const navigate = useNavigate();
     const wrapperRef = useRef(null);
-    const [containerClass] = useState('notibox');
-    const [divClass] = useState('notibox-item');
-    const [iconBellBlinkClass] = useState('cis-bell-exclamation noti');
-    const [iconBellClass] = useState('cis-bell-exclamation');
-    const [iconXClass] = useState('cis-x-circle noti-read');
-    const [actionClass] = useState('notibox-actions');
     const [items, setItems] = useState([]);
     const [show, setShow] = useState(false);
     const { setSystemAuth } = props;
@@ -37,7 +30,6 @@ function Notification(props) {
                     if (error === 'Unauthenticated.') {
                         setSystemAuth(false);
                     }
-
                     toast.error(String(error));
                 }
             }
@@ -62,9 +54,7 @@ function Notification(props) {
             setItems(array);
         }
 
-        let formData = {
-            id: id,
-        };
+        let formData = { id: id };
 
         CustomFetch(
             '/ajax/user/notification/markasread',
@@ -82,30 +72,22 @@ function Notification(props) {
         let array = items;
         setItems([]);
 
-        {
-            array.map((item) => {
-                let formData = {
-                    id: item.id,
-                };
-
-                CustomFetch(
-                    '/ajax/user/notification/markasread',
-                    'POST',
-                    formData,
-                    function () {
-                        fetchNotification();
-                    }
-                );
-            });
-        }
+        array.map((item) => {
+            let formData = { id: item.id };
+
+            CustomFetch(
+                '/ajax/user/notification/markasread',
+                'POST',
+                formData,
+                function () {
+                    fetchNotification();
+                }
+            );
+        });
     };
 
     const toggleNotification = () => {
-        if (show === false) {
-            setShow(true);
-        } else {
-            setShow(false);
-        }
+        setShow(!show);
     };
 
     const showAllNotifications = () => {
@@ -126,8 +108,7 @@ function Notification(props) {
 
         return function cleanup() {
             clearInterval(interval);
-
-            document.addEventListener('mousedown', handleClick, false);
+            document.removeEventListener('mousedown', handleClick, false);
         };
     }, []);
 
@@ -143,22 +124,29 @@ function Notification(props) {
                     size={19}
                     strokeWidth={2}
                     className={
-                        items.length > 0 ? iconBellBlinkClass : iconBellClass
+                        items.length > 0
+                            ? styles.noti
+                            : styles['cis-bell-exclamation']
                     }
                 />
             </a>
 
-            {show === true ? (
+            {show && (
                 <div ref={wrapperRef}>
                     {items.length > 0 ? (
-                        <div className={containerClass}>
-                            <div className="notiscrollwrap">
+                        <div className={styles.notibox}>
+                            <div className={styles.notiscrollwrap}>
                                 {items.map((item, index) => (
-                                    <div className={divClass} key={item.id}>
+                                    <div
+                                        className={styles['notibox-item']}
+                                        key={item.id}
+                                    >
                                         <Bell
                                             size={19}
                                             strokeWidth={2}
-                                            className={iconBellClass}
+                                            className={
+                                                styles.cisBellExclamation
+                                            }
                                         />{' '}
                                         {parse(item.data.label)}{' '}
                                         <span>
@@ -173,13 +161,13 @@ function Notification(props) {
                                                 size={24}
                                                 data-id={item.id}
                                                 data-index={index}
-                                                className={iconXClass}
+                                                className={styles.notiRead}
                                             />
                                         </button>
                                     </div>
                                 ))}
                             </div>
-                            <div className={actionClass}>
+                            <div className={styles['notibox-actions']}>
                                 <button onClick={showAllNotifications}>
                                     View All
                                 </button>
@@ -189,11 +177,11 @@ function Notification(props) {
                             </div>
                         </div>
                     ) : (
-                        <div className={containerClass}>
-                            <div className={divClass}>
+                        <div className={styles.notibox}>
+                            <div className={styles['notibox-item']}>
                                 No new notifications available.
                             </div>
-                            <div className={actionClass}>
+                            <div className={styles['notibox-actions']}>
                                 <button onClick={showAllNotifications}>
                                     View All
                                 </button>
@@ -201,8 +189,6 @@ function Notification(props) {
                         </div>
                     )}
                 </div>
-            ) : (
-                <div></div>
             )}
         </>
     );

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

@@ -0,0 +1,260 @@
+.hwrap {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.hwrap .logo {
+    width: 100px;
+    padding: 0 1rem 0 0.5rem;
+    margin: 0;
+    line-height: 1.45;
+}
+
+.hwrap .logo img {
+    width: 100%;
+    max-width: 80px;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+.branding {
+    margin: 0;
+    padding: 0;
+    font-weight: 700;
+    letter-spacing: -1px;
+    text-align: center;
+}
+
+.branding .highlight {
+    color: white;
+}
+
+.branding .light {
+    font-weight: 300;
+    color: var(--secondary-color);
+}
+
+.navwrap {
+    flex: 1;
+}
+
+.app-nav {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    padding: 0.85rem 0;
+    margin: 0;
+    list-style: none;
+    align-items: center;
+}
+
+.nav-item {
+    cursor: pointer;
+    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+    box-sizing: border-box;
+    position: relative;
+}
+
+.nav-item a {
+    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);
+    color: var(--tertiary-color);
+}
+
+.nav-item:hover a svg,
+.nav-item.active a svg {
+    color: var(--secondary-color);
+}
+
+.nav-item:hover ul,
+.nav-item.active ul {
+    opacity: 1;
+}
+
+.nav-item:hover ul {
+    display: block;
+}
+
+.nav-item.active a,
+.nav-item.active span {
+    background: var(--primary-color-lighter);
+    color: var(--tertiary-color);
+}
+
+.nav-item span svg {
+    color: var(--secondary-color);
+}
+
+.nav-item.active a svg,
+.nav-item.active span svg {
+    color: var(--secondary-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);
+}
+
+.nav-item ul {
+    width: 200px;
+    position: absolute;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: none;
+    opacity: 0;
+    background: rgba(var(--primary-color-rgb), 0.75);
+    border-radius: 5px;
+}
+
+.nav-item ul li {
+    display: block;
+    position: relative;
+    margin: 1px 0;
+}
+
+.nav-item ul li:last-of-type {
+    margin-bottom: 0;
+}
+
+.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.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);
+}
+
+.navscrolled .nav-item span {
+    padding: 0.25em 1em;
+    transition: all 0.15s 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;
+}
+
+.hactions > ul li {
+    margin: 0 5px;
+}
+
+.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;
+}
+
+.hactions > ul a:hover {
+    background: var(--primary-color-lighter);
+    transition: all 0.65s 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);
+}
+
+.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;
+}
+
+.hactions button:hover {
+    background: var(--primary-color-lighter);
+    transition: all 0.65s 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);
+}

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

@@ -0,0 +1,129 @@
+.notibox {
+    background: #fff;
+    border: 1px solid var(--primary-color-lighter);
+    border-top-color: rgb(204, 204, 204);
+    border-right-color: rgb(204, 204, 204);
+    border-bottom-color: rgb(204, 204, 204);
+    border-left-color: rgb(204, 204, 204);
+    border-color: rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    display: block;
+    opacity: 1;
+    outline: none;
+    overflow: hidden;
+    position: absolute;
+    padding: 6px;
+    border-radius: var(--br);
+    width: 550px;
+    overflow-y: scroll;
+    transform: translateX(-470px);
+    text-align: left;
+    color: var(--paragraph-color);
+    box-sizing: border-box;
+    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+    z-index: 999;
+}
+
+.notibox .notiscrollwrap {
+    max-height: 190px;
+    overflow-y: auto;
+}
+
+.notibox .notibox-item {
+    width: 100%;
+    display: block;
+    background: #f0f0f0;
+    border-radius: var(--br);
+    padding: 9px 36px 8px 6px;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+    position: relative;
+}
+
+.notibox .notibox-item span {
+    color: var(--paragraph-color);
+    font-size: 80%;
+}
+
+.notibox .notibox-item > button {
+    position: absolute;
+    right: 6px;
+    top: 5px;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    background: none;
+    border: none;
+}
+
+.notibox .notibox-item > button svg {
+    width: 100%;
+    max-width: 20px;
+}
+
+.notibox .notibox-item .noti-read {
+    color: var(--primary-color);
+}
+
+.notibox .notibox-item .cis-bell-exclamation {
+    display: none;
+    visibility: hidden;
+}
+
+.notibox .notibox-actions {
+    width: 100%;
+    display: block;
+    border-top: 1px solid darken(#f0f0f0, 5%);
+    padding: 10px 0 5px 0;
+    margin-top: 10px;
+}
+
+.notibox .notibox-actions button {
+    display: inline-block;
+    border-radius: 6px;
+    border: 1px solid var(--primary-color-lighter);
+    margin-right: 5px;
+    padding: 8px;
+    font-size: 0.875em;
+    outline: none;
+    color: var(--tertiary-color);
+    background: var(--primary-color);
+}
+
+.notilink {
+    background: none;
+    padding: 0;
+    line-height: inherit;
+    border-radius: 0;
+    color: inherit;
+    display: inline;
+    text-decoration: underline;
+    border: none;
+    font-weight: 700;
+    text-decoration: none;
+}
+
+.notilink:hover {
+    background: none;
+    color: var(--secondary-color);
+}
+
+.noti {
+    animation: notification 1s infinite;
+}
+
+@keyframes notification {
+    0% {
+        color: var(--secondary-color);
+        opacity: 0;
+    }
+    50% {
+        color: #c0ff52;
+        opacity: 1;
+    }
+    100% {
+        color: var(--secondary-color);
+        opacity: 0;
+    }
+}

package/package.json

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