@visns-studio/visns-components 4.3.12 → 4.4.1

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

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import ReactToPrint from 'react-to-print';
 
 import CustomFetch from './Fetch';
+import styles from './styles/QrCode.module.css';
 
 const QrCode = ({ config, dataId }) => {
     const printComponentRef = useRef();
@@ -27,11 +28,11 @@ const QrCode = ({ config, dataId }) => {
 
     return (
         <>
-            <div className="gridtxt" ref={printComponentRef}>
+            <div className={styles.gridtxt} ref={printComponentRef}>
                 {qrCodeData.logo && qrCodeData.logo !== '' && (
-                    <ul className="customer__overview">
+                    <ul className={styles.customer__overview}>
                         <li
-                            className="fw-grid-item"
+                            className={styles['fw-grid-item']}
                             style={{
                                 textAlign: 'center',
                             }}
@@ -44,9 +45,9 @@ const QrCode = ({ config, dataId }) => {
                         </li>
                     </ul>
                 )}
-                <ul className="customer__overview">
+                <ul className={styles.customer__overview}>
                     <li
-                        className="fw-grid-item"
+                        className={styles['fw-grid-item']}
                         style={{
                             textAlign: 'center',
                         }}
@@ -54,9 +55,9 @@ const QrCode = ({ config, dataId }) => {
                         {qrCodeData.title}
                     </li>
                 </ul>
-                <ul className="customer__overview">
+                <ul className={styles.customer__overview}>
                     <li
-                        className="fw-grid-item"
+                        className={styles['fw-grid-item']}
                         style={{ textAlign: 'center' }}
                     >
                         {qrCodeData.qrCode && qrCodeData.qrCode !== '' && (
@@ -69,7 +70,7 @@ const QrCode = ({ config, dataId }) => {
                     </li>
                 </ul>
             </div>
-            <div className="polActions">
+            <div className={styles.polActions}>
                 <ReactToPrint
                     trigger={() => <button className="btn">Print</button>}
                     content={() => printComponentRef.current}

package/components/crm/auth/Profile.jsx

@@ -1,4 +1,5 @@
 // src/components/Profile.jsx
+import '../../styles/global.css';
 
 import React, { useState, useEffect, useRef } from 'react';
 import PasswordStrengthBar from 'react-password-strength-bar';
@@ -129,7 +130,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
                                         type="text"
                                         name="name"
                                         onChange={handleChangeProfile}
-                                        className={inputClasses.name}
+                                        className={`${styles.input} ${inputClasses.name}`}
                                         value={profile.name}
                                     />
                                     <span className={styles.fi__span}>
@@ -143,7 +144,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
                                         type="text"
                                         name="email"
                                         readOnly
-                                        className={inputClasses.email}
+                                        className={`${styles.input} ${inputClasses.email}`}
                                         value={profile.email}
                                     />
                                     <span className={styles.fi__span}>
@@ -163,7 +164,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
                                         name="password"
                                         onChange={handleChangeProfile}
                                         value={profile.password}
-                                        className={inputClasses.password}
+                                        className={`${styles.input} ${inputClasses.password}`}
                                     />
                                     <PasswordStrengthBar
                                         password={profile.password}
@@ -182,9 +183,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
                                         name="password_confirmation"
                                         onChange={handleChangeProfile}
                                         value={profile.password_confirmation}
-                                        className={
-                                            inputClasses.password_confirmation
-                                        }
+                                        className={`${styles.input} ${inputClasses.password_confirmation}`}
                                     />
                                 </label>
                             </div>

package/components/crm/auth/styles/Profile.module.css

@@ -1,5 +1,16 @@
 /* Profile.module.css */
 
+input:not(:placeholder-shown) + .fi__span,
+textarea:not(:placeholder-shown) + .fi__span,
+select:not(:placeholder-shown) + .fi__span {
+    transform: translateY(-40%) translateX(10px) scale(0.75);
+    opacity: 1;
+    padding: 0 4px;
+    background: var(--tertiary-color);
+    font-weight: 300;
+    border-radius: var(--br);
+}
+
 .grid {
     width: 100%;
     display: flex;
@@ -136,8 +147,9 @@
     z-index: 500;
 }
 
-input[type='text'],
-input[type='password'] {
+.input,
+.textarea,
+.select {
     background: var(--item-color);
     border-radius: var(--br);
     border: 1px solid transparent;
@@ -149,28 +161,19 @@ input[type='password'] {
     transition: box-shadow 0.15s linear;
 }
 
-input[type='text']:hover,
-input[type='password']:hover {
+.input:hover,
+.textarea:hover,
+.select:hover {
     border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
     transition: border 0.15s linear;
 }
 
-input[type='text']:focus,
-input[type='password']:focus {
+.input:focus,
+.textarea:focus,
+.select:focus {
     border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
 }
 
-input:not(:placeholder-shown) + .fi__span,
-textarea:not(:placeholder-shown) + .fi__span,
-select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
-    opacity: 1;
-    padding: 0 4px;
-    background: var(--tertiary-color);
-    font-weight: 300;
-    border-radius: var(--br);
-}
-
 .sigcanvas {
     border: 2px solid #ccc;
     border-radius: 10px;

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

@@ -0,0 +1,12 @@
+.visns__ms {
+    input {
+        &:hover {
+            box-shadow: none !important;
+            transition: box-shadow 0.15s linear !important;
+        }
+
+        &:focus {
+            box-shadow: none !important;
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+.AutocompletePlace-results {
+    z-index: 999;
+}
+
+.AutocompletePlace {
+    position: relative;
+
+    > svg {
+        position: absolute;
+        right: 0.5em;
+        top: 0.5em;
+        color: var(--primary-color);
+        cursor: pointer;
+    }
+}
+
+.AutocompletePlace.toggleActive {
+    color: var(--highlight-color);
+}
+
+.AutocompletePlace-input {
+    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
+}
+
+.AutocompletePlace-results {
+    position: absolute;
+    background-color: white;
+    padding: 0;
+    margin: 0;
+    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
+    border-radius: var(--br);
+    overflow: hidden;
+}
+
+.AutocompletePlace-items {
+    list-style: none;
+    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
+    cursor: pointer;
+    padding: 10px 10px;
+
+    &:hover {
+        background-color: rgba(var(--primary-color-rgb), 0.065);
+    }
+}