@visns-studio/visns-components 1.8.5 → 2.0.0

package/components/crm/{visns-multi-select.jsx → MultiSelect.jsx}

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import SelectList from "./visns-select-list";
+import SelectList from "./SelectList";
 import Select, { createFilter } from "react-select";
 
 function MultiSelect(props) {

package/components/crm/{visns-navigation.jsx → Navigation.jsx}

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import React, { useEffect, useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
     ArrowCycle,
     BookClose,
@@ -22,23 +22,23 @@ import {
     StatisticUp,
     Ticket,
     Utensils,
-} from "akar-icons";
+} from 'akar-icons';
 
-import CustomFetch from "./visns-fetch";
-import Notification from "./visns-notification";
+import CustomFetch from './Fetch';
+import Notification from './Notification';
 
 function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
     const location = useLocation();
     const navigate = useNavigate();
-    const currentPage = location.pathname.substr(1) || "dashboard";
+    const currentPage = location.pathname.substr(1) || 'dashboard';
     const [navData, setNavData] = useState(navConfig);
     const [isScrolled, setIsScrolled] = useState(false);
-    const appNavClasses = `app-nav ${isScrolled ? "navscrolled" : ""}`;
+    const appNavClasses = `app-nav ${isScrolled ? 'navscrolled' : ''}`;
 
     const handleLogout = () => {
-        CustomFetch("/logout", "GET", {}, () => {
+        CustomFetch('/logout', 'GET', {}, () => {
             setSystemAuth(false);
-            navigate("/login");
+            navigate('/login');
         });
     };
 
@@ -51,13 +51,13 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
             signOut: SignOut,
         };
 
-        if (n.id === "notifications") {
+        if (n.id === 'notifications') {
             return (
                 <li>
                     <Notification setSystemAuth={setSystemAuth} />
                 </li>
             );
-        } else if (n.id === "logout") {
+        } else if (n.id === 'logout') {
             const IconComponent = iconComponents[n.icon];
             return (
                 <li>
@@ -81,7 +81,7 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content={n.label}
                         className="tooltip"
-                        target={n.target ? n.target : "_self"}
+                        target={n.target ? n.target : '_self'}
                     >
                         <IconComponent size={19} strokeWidth={2} />
                     </Link>
@@ -225,7 +225,11 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
         setNavData((prevNavData) => {
             const updateNavItems = (nav) => {
                 const cleanUrl = (url) => {
-                    return url && url.startsWith("/") ? url.substr(1) : url;
+                    return url && url.startsWith('/')
+                        ? url.substr(1).split('/')[0]
+                        : url
+                        ? url.split('/')[0]
+                        : '';
                 };
 
                 const currentUrl = cleanUrl(currentPage);
@@ -237,9 +241,9 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
                             (child) => cleanUrl(child.url) === currentUrl
                         ))
                 ) {
-                    return { ...nav, class: "nav-item active" };
+                    return { ...nav, class: 'nav-item active' };
                 } else {
-                    return { ...nav, class: "nav-item" };
+                    return { ...nav, class: 'nav-item' };
                 }
             };
 
@@ -255,9 +259,9 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
             setIsScrolled(window.scrollY > 0);
         }
 
-        window.addEventListener("scroll", handleScroll);
+        window.addEventListener('scroll', handleScroll);
         return () => {
-            window.removeEventListener("scroll", handleScroll);
+            window.removeEventListener('scroll', handleScroll);
         };
     }, []);
 
@@ -273,7 +277,7 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
                     <ul className={appNavClasses}>
                         {navData.navigations.map((nav, navKey) =>
                             nav.permission === true ||
-                            nav.permissionKey === "" ? (
+                            nav.permissionKey === '' ? (
                                 <React.Fragment key={`nav-item-${navKey}`}>
                                     {renderNav(nav)}
                                 </React.Fragment>

package/components/crm/{visns-notification.jsx → Notification.jsx}

@@ -6,7 +6,7 @@ import { TooltipWrapper } from "react-tooltip";
 import { toast } from "react-toastify";
 import { Bell, CircleX } from "akar-icons";
 
-import CustomFetch from "./visns-fetch";
+import CustomFetch from "./Fetch";
 
 function Notification(props) {
     let interval;

package/components/crm/TableFilter.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+function TableFilter({ filters, setFilters, setSettings, type }) {
+    const filterTable = (e) => {
+        const { id, value, url } = e.target.dataset;
+
+        if (url && url !== '') {
+            window.open(url);
+        } else {
+            if (setSettings) {
+                setSettings((prevState) => {
+                    if (prevState.ajaxSetting) {
+                        let _where = prevState.ajaxSetting.where.reduce(
+                            (acc, a) => {
+                                if (
+                                    a.id === id &&
+                                    !acc.some((b) => b.id === id)
+                                ) {
+                                    acc.push({ id: id, value: value });
+                                } else {
+                                    acc.push(a);
+                                }
+                                return acc;
+                            },
+                            []
+                        );
+
+                        return {
+                            ...prevState,
+                            ajaxSetting: {
+                                ...prevState.ajaxSetting,
+                                where: _where,
+                            },
+                        };
+                    } else {
+                        let w = prevState.where.map((a) => {
+                            if (id === a.id) {
+                                return { ...a, value: value };
+                            }
+                            return a;
+                        });
+
+                        return { ...prevState, where: w };
+                    }
+                });
+            }
+        }
+
+        setFilters((prevFilters) => {
+            const tempFilters = prevFilters.map((item, index) => {
+                if (
+                    e.target.dataset.hasOwnProperty('value') &&
+                    parseInt(value) >= 0
+                ) {
+                    return {
+                        ...item,
+                        class:
+                            parseInt(value) === parseInt(item.value)
+                                ? type === 'simple'
+                                    ? 'activetab'
+                                    : 'subactive'
+                                : '',
+                        show: parseInt(value) === parseInt(item.value),
+                    };
+                } else {
+                    return {
+                        ...item,
+                        class:
+                            id === item.id
+                                ? type === 'simple'
+                                    ? 'activetab'
+                                    : 'subactive'
+                                : '',
+                        show: id === item.id,
+                    };
+                }
+            });
+
+            return [...tempFilters];
+        });
+    };
+
+    const renderContent = (d) => {
+        if (type === 'simple') {
+            return (
+                <li className={d.class}>
+                    <button
+                        data-id={d.id}
+                        data-value={d.hasOwnProperty('value') ? d.value : ''}
+                        data-url={d.url || ''}
+                        onClick={filterTable}
+                    >
+                        {d.label}
+                    </button>
+                </li>
+            );
+        } else {
+            return (
+                <li>
+                    <a
+                        data-id={d.id}
+                        data-value={d.hasOwnProperty('value') ? d.value : ''}
+                        data-url={d.url || ''}
+                        onClick={filterTable}
+                        className={d.class}
+                    >
+                        {d.label}
+                    </a>
+                </li>
+            );
+        }
+    };
+
+    return (
+        <ul>
+            {filters.map((item, key) => (
+                <React.Fragment key={'table-filter-' + key}>
+                    {renderContent(item)}
+                </React.Fragment>
+            ))}
+        </ul>
+    );
+}
+
+export default TableFilter;

package/components/crm/auth/Login.jsx

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
+import Reveal from "react-reveal/Reveal";
+import { toast } from "react-toastify";
+import { Person, LockOff } from "akar-icons";
+
+import CustomFetch from "../Fetch";
+
+const Login = ({ logo, setSystemAuth, setUserProfile }) => {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const [auth, setAuth] = useState({
+        email: "",
+        password: "",
+        location: location,
+    });
+
+    const [authClass, setAuthClass] = useState({
+        username: "",
+        password: "",
+    });
+
+    const handleChange = (e) => {
+        if (e) {
+            setAuth((prevState) => ({
+                ...prevState,
+                [e.target.name]: e.target.value,
+            }));
+        }
+    };
+
+    const handleSubmit = (e) => {
+        if (e) {
+            e.preventDefault();
+
+            CustomFetch(
+                "/login/authenticate",
+                "POST",
+                auth,
+                (result) => {
+                    if (result.error === "") {
+                        setUserProfile(result.user);
+                        setSystemAuth(true);
+
+                        if (
+                            result.previous?.state?.referrer &&
+                            result.previous.state.referrer !== ""
+                        ) {
+                            navigate(result.previous.state.referrer);
+                        } else {
+                            navigate("/");
+                        }
+                    } else {
+                        setSystemAuth(false);
+                        setAuthClass((prevState) => ({
+                            ...prevState,
+                            username: "inputError",
+                            password: "inputError",
+                        }));
+
+                        toast.error(
+                            "Could not log in with the supplied credentials, please try again."
+                        );
+                    }
+                },
+                (error) => {
+                    setAuthClass((prevState) => ({
+                        ...prevState,
+                        username: "inputError",
+                        password: "inputError",
+                    }));
+
+                    if (String(error) === "CSRF token mismatch.") {
+                        toast.error(
+                            "Auth token has timed out, please reload the page before attempting to log back in."
+                        );
+                    } else {
+                        toast.error(String(error));
+                    }
+                }
+            );
+        }
+    };
+
+    return (
+        <div className="lcontainer">
+            <div className="lwrap">
+                <aside className="aside"></aside>
+                <div className="logincontainer">
+                    <form onSubmit={handleSubmit}>
+                        <Reveal effect="fadeInUp">
+                            <div className="login">
+                                <img
+                                    src={logo}
+                                    alt="CRM"
+                                    className="loginlogo"
+                                />
+                                <div className="formItem fwItem">
+                                    <label className="fi__label">
+                                        <input
+                                            type="email"
+                                            name="email"
+                                            value={auth.email}
+                                            onChange={handleChange}
+                                            tabIndex="1"
+                                            className={authClass.username}
+                                            placeholder=" "
+                                        />
+                                        <span className="fi__span">Email</span>
+                                        <small>
+                                            <Person strokeWidth={2} size={18} />
+                                        </small>
+                                    </label>
+                                </div>
+                                <div className="formItem fwItem">
+                                    <label className="fi__label">
+                                        <input
+                                            type="password"
+                                            name="password"
+                                            value={auth.password}
+                                            onChange={handleChange}
+                                            tabIndex="2"
+                                            className={authClass.password}
+                                            placeholder=" "
+                                        />
+                                        <span className="fi__span">
+                                            Password
+                                        </span>
+                                        <small>
+                                            <LockOff
+                                                strokeWidth={2}
+                                                size={18}
+                                            />
+                                        </small>
+                                    </label>
+                                </div>
+                                <div className="formItem fwItem lastItem">
+                                    <button className="btn" type="submit">
+                                        Login
+                                    </button>
+                                </div>
+                                <div className="formItem fwItem lastItem forgotten">
+                                    <span>
+                                        Forgot your password?{" "}
+                                        <Link to="/reset">Click Here</Link>
+                                    </span>
+                                </div>
+                            </div>
+                        </Reveal>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Login;

package/components/crm/auth/Profile.jsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react';
+import PasswordStrengthBar from 'react-password-strength-bar';
+import { toast } from 'react-toastify';
+import CustomFetch from '../Fetch';
+import TableFilter from '../TableFilter';
+
+const Profile = ({ userProfile, setUserProfile }) => {
+    const [profile, setProfile] = useState({
+        name: '',
+        email: '',
+        password: '',
+    });
+
+    const [inputClasses, setInputClasses] = useState({
+        name: '',
+        email: '',
+    });
+
+    const [filters, setFilters] = useState([
+        {
+            id: 'overview',
+            show: true,
+            label: 'Overview',
+            class: 'subactive',
+        },
+    ]);
+
+    useEffect(() => {
+        setProfile({
+            name: userProfile.name,
+            email: userProfile.email,
+            password: '',
+        });
+    }, [userProfile]);
+
+    const handleChangeProfile = (e) => {
+        const { name, value } = e.target;
+        setProfile((prevProfile) => ({
+            ...prevProfile,
+            [name]: value,
+        }));
+    };
+
+    const handleSubmitProfile = (e) => {
+        e.preventDefault();
+
+        if (profile.name.trim() === '' || profile.email.trim() === '') {
+            setInputClasses({
+                name: profile.name.trim() === '' ? 'inputError' : '',
+                email: profile.email.trim() === '' ? 'inputError' : '',
+            });
+
+            toast.error('Please fill in all the required fields.');
+        } else {
+            CustomFetch(
+                `/ajax/users/${userProfile.id}`,
+                'PUT',
+                profile,
+                function (result) {
+                    setUserProfile(result.user);
+                    toast.success(
+                        'Your profile has been successfully updated.'
+                    );
+                }
+            );
+        }
+    };
+
+    const renderContent = (filter) => {
+        if (filter.show && filter.id === 'overview') {
+            return (
+                <div className="gridtxt" key={filter.id}>
+                    <div className="gridtxt__header">
+                        <span>Overview</span>
+                    </div>
+                    <div className="formcontainer">
+                        <form
+                            className="modalForm"
+                            onSubmit={handleSubmitProfile}
+                        >
+                            <div className="formItem">
+                                <label className="fi__label">
+                                    <input
+                                        type="text"
+                                        name="name"
+                                        onChange={handleChangeProfile}
+                                        className={inputClasses.name}
+                                        value={profile.name}
+                                    />
+                                    <span className="fi__span">Name *</span>
+                                </label>
+                            </div>
+                            <div className="formItem">
+                                <label className="fi__label">
+                                    <input
+                                        type="text"
+                                        name="email"
+                                        onChange={handleChangeProfile}
+                                        className={inputClasses.email}
+                                        value={profile.email}
+                                    />
+                                    <span className="fi__span">Email *</span>
+                                </label>
+                            </div>
+                            <div className="formItem">
+                                <label className="fi__label">
+                                    <span className="fi__span prefocus">
+                                        Password
+                                    </span>
+                                    <input
+                                        type="password"
+                                        name="password"
+                                        onChange={handleChangeProfile}
+                                    />
+                                    <PasswordStrengthBar
+                                        password={profile.password}
+                                    />
+                                </label>
+                            </div>
+                            <div className="formItem fwItem lastItem">
+                                <button className="btn modalsave" type="submit">
+                                    Update
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            );
+        }
+        return null;
+    };
+
+    return (
+        <div>
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full crmtitle">
+                        <h1>My Profile</h1>
+                    </div>
+                </div>
+            </div>
+            <div className="grid">
+                <div className="grid__subrow">
+                    <div className="grid__subnav">
+                        <TableFilter
+                            filters={filters}
+                            setFilters={setFilters}
+                        />
+                    </div>
+                    <div className="grid__subcontent">
+                        {filters.map((filter) => (
+                            <React.Fragment key={`filter-${filter.id}`}>
+                                {renderContent(filter)}
+                            </React.Fragment>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Profile;

package/components/crm/auth/Reset.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import Reveal from "react-reveal/Reveal";
+import { toast } from "react-toastify";
+import parse from "html-react-parser";
+import { Person } from "akar-icons";
+
+import CustomFetch from "../Fetch";
+
+const Reset = () => {
+    const [email, setEmail] = useState("");
+    const [emailClass, setEmailClass] = useState("");
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        if (email === "") {
+            const error = "Please type in your email address.";
+            setEmailClass("inputError");
+            toast.error(<div>{parse(error)}</div>);
+            return;
+        }
+
+        CustomFetch(
+            "/password/forgot",
+            "POST",
+            { email: email },
+            function (result) {
+                if (result.error === "") {
+                    setEmail(
+                        "You have successfully requested to reset your password, an email will be sent shortly. Please follow the instruction on the email."
+                    );
+                } else {
+                    toast.error(result.error);
+                }
+            }
+        );
+    };
+
+    return (
+        <div className="lcontainer">
+            <div className="lwrap">
+                <aside className="aside"></aside>
+                <div className="logincontainer">
+                    <form onSubmit={handleSubmit}>
+                        <Reveal effect="fadeInUp">
+                            <div className="login">
+                                <div className="formItem fwItem">
+                                    <h1>Forgot your password?</h1>
+                                </div>
+                                <div className="formItem fwItem">
+                                    <label className="fi__label">
+                                        <input
+                                            type="email"
+                                            name="email"
+                                            value={email}
+                                            onChange={(e) => {
+                                                setEmail(e.target.value);
+                                                setEmailClass("");
+                                            }}
+                                            tabIndex="1"
+                                            className={emailClass}
+                                        />
+                                        <span className="fi__span">Email</span>
+                                        <small>
+                                            <Person strokeWidth={2} size={18} />
+                                        </small>
+                                    </label>
+                                </div>
+                                <div className="formItem fwItem lastItem">
+                                    <button
+                                        className="btn"
+                                        type="submit"
+                                        tabIndex="2"
+                                    >
+                                        Reset Password
+                                    </button>
+                                </div>
+                            </div>
+                        </Reveal>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Reset;