@visns-studio/visns-components 1.8.5 → 2.0.0

package/components/crm/auth/Verify.jsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import parse from 'html-react-parser';
+import validator from 'validator';
+import Reveal from 'react-reveal/Reveal';
+
+import CustomFetch from '../Fetch';
+
+const Verify = () => {
+    const navigate = useNavigate();
+    const { code } = useParams();
+
+    const [formData, setFormData] = useState({
+        password: '',
+        passwordRepeat: '',
+        passwordClass: '',
+        passwordRepeatClass: '',
+    });
+
+    const { password, passwordRepeat, passwordClass, passwordRepeatClass } =
+        formData;
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData((prevFormData) => ({
+            ...prevFormData,
+            [name]: value,
+            passwordClass: '',
+            passwordRepeatClass: '',
+        }));
+    };
+
+    const validatePassword = () => {
+        let _error = '';
+
+        if (password === '') {
+            _error = 'Please type in your new password.';
+            setFormData((prevFormData) => ({
+                ...prevFormData,
+                passwordClass: 'inputError',
+            }));
+        } else {
+            if (password !== passwordRepeat) {
+                _error =
+                    'The password does not match, please re-type the password.';
+                setFormData((prevFormData) => ({
+                    ...prevFormData,
+                    passwordClass: 'inputError',
+                    passwordRepeatClass: 'inputError',
+                }));
+            } else {
+                if (!validator.isStrongPassword(password)) {
+                    _error =
+                        'Your password is too weak it must contain the following:<br />- Must contain at least 8 characters.<br />- Must contain at least one uppercase letter.<br />- Must contain at least one lowercase letter.<br />- Must contain at least one number.<br />- Must contain at least one symbol.<br />';
+                }
+            }
+        }
+
+        return _error;
+    };
+
+    const handleSubmit = (e) => {
+        if (e) {
+            e.preventDefault();
+            const errorMsg = validatePassword();
+
+            if (errorMsg === '') {
+                CustomFetch(
+                    '/password/reset',
+                    'POST',
+                    {
+                        code: code,
+                        password: password,
+                        password_confirmation: passwordRepeat,
+                    },
+                    function (result) {
+                        if (result.error === '') {
+                            toast.success(
+                                'You have successfully set a new password, please use your new password to login into the system.'
+                            );
+
+                            navigate('/login');
+                        } else {
+                            toast.error(result.error);
+                        }
+                    }
+                );
+            } else {
+                toast.error(<div>{parse(errorMsg)}</div>);
+            }
+        }
+    };
+
+    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>Reset your password</h1>
+                                </div>
+                                {errorMsg === '' ? (
+                                    <>
+                                        <div className="formItem fwItem">
+                                            <label className="fi__label">
+                                                <input
+                                                    type="password"
+                                                    name="password"
+                                                    value={password}
+                                                    onChange={handleInputChange}
+                                                    tabIndex="1"
+                                                    className={passwordClass}
+                                                />
+                                                <span className="fi__span">
+                                                    Password
+                                                </span>
+                                            </label>
+                                        </div>
+                                        <div className="formItem fwItem">
+                                            <label className="fi__label">
+                                                <input
+                                                    type="password"
+                                                    name="passwordRepeat"
+                                                    value={passwordRepeat}
+                                                    onChange={handleInputChange}
+                                                    tabIndex="2"
+                                                    className={
+                                                        passwordRepeatClass
+                                                    }
+                                                />
+                                                <span className="fi__span">
+                                                    Re-type Password
+                                                </span>
+                                            </label>
+                                        </div>
+                                        <div className="formItem fwItem lastItem">
+                                            <button
+                                                className="btn"
+                                                type="submit"
+                                                tabIndex="3"
+                                            >
+                                                Reset
+                                            </button>
+                                        </div>
+                                    </>
+                                ) : (
+                                    <p>{errorMsg}</p>
+                                )}
+                            </div>
+                        </Reveal>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Verify;

package/components/crm/generic/GenericDetail.jsx

@@ -0,0 +1,380 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import moment from 'moment';
+import parse from 'html-react-parser';
+import Popup from 'reactjs-popup';
+import { CircleChevronRight } from 'akar-icons';
+
+import CustomFetch from '../Fetch';
+import Form from '../Form';
+import Table from '../DataGrid';
+import TableFilter from '../TableFilter';
+
+function GenericDetail({ setting, urlParam, userProfile }) {
+    const routeParams = useParams();
+    const { filters, page, tabs } = setting;
+
+    /** General States */
+    const [config, setConfig] = useState({});
+    const [data, setData] = useState({});
+    const [dataReload, setDataReload] = useState(0);
+    const [subnav, setSubnav] = useState(filters || []);
+    const [total, setTotal] = useState(0);
+
+    /** General Functions */
+    const handleReload = () => {
+        const min = 0;
+        const max = 999999999;
+        const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
+
+        setDataReload(randomNumber);
+    };
+
+    const getValueFromData = (data, path, id) => {
+        let value =
+            path.reduce(
+                (result, key) =>
+                    result
+                        ? Array.isArray(result[key])
+                            ? result[key][0]
+                            : result[key]
+                        : '',
+                data
+            ) ?? '';
+
+        if (value) {
+            if (Array.isArray(id)) {
+                return id.map((key) => value[key]).join(' ');
+            } else {
+                return value[id];
+            }
+        } else {
+            return '';
+        }
+    };
+
+    const formatDate = (date) => {
+        return date && moment(date).format('DD-MM-YYYY') !== '01-01-1970'
+            ? moment(date).format('DD-MM-YYYY')
+            : '';
+    };
+
+    const renderValue = (item, data) => {
+        const { type, id, relation, size } = item;
+        const value =
+            relation && relation.length > 0
+                ? getValueFromData(data, [...relation], id)
+                : getValueFromData(data, [], id);
+
+        const stringValue = String(value ? value : ''); // Convert value to a string
+
+        switch (type) {
+            case 'date':
+                return formatDate(value);
+            case 'exist':
+                return value ? 'Yes' : 'No';
+            case 'latest_notes':
+                const noteData = data?.[id]?.[0];
+                const name = noteData?.user?.name ?? '';
+                const description = noteData?.description ?? '';
+                const created_at = noteData?.created_at ?? '';
+                const formattedDate = formatDate(created_at);
+
+                if (name !== '' && description !== '' && formattedDate !== '') {
+                    return parse(
+                        `<br /><p>${name} - ${formattedDate}</p><p>${description}</p>`
+                    );
+                } else {
+                    return null;
+                }
+            default:
+                return size === 'full' && stringValue
+                    ? parse(`<br /><p>${stringValue}</p>`)
+                    : stringValue;
+        }
+    };
+
+    const renderContent = () => {
+        if (subnav && subnav.length > 0) {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
+
+                if (activeTabConfig && activeTabConfig.type) {
+                    switch (activeTabConfig.type) {
+                        case 'form':
+                            return (
+                                <div className="gridtxt">
+                                    <div className="gridtxt__header">
+                                        <span>{activeTabConfig.title}</span>
+                                    </div>
+                                    <Form
+                                        columnId={routeParams[urlParam]}
+                                        formSettings={activeTabConfig.form}
+                                        formType="update"
+                                        style={
+                                            userProfile?.settings?.style || {}
+                                        }
+                                        updateForm={setFormData}
+                                        type="inline"
+                                    />
+                                </div>
+                            );
+                        case 'overview':
+                            return (
+                                <>
+                                    <div className="gridactions">
+                                        <ul>
+                                            <li>
+                                                <button
+                                                    className="btn"
+                                                    onClick={() =>
+                                                        modalOpen(
+                                                            'update',
+                                                            routeParams[
+                                                                urlParam
+                                                            ]
+                                                        )
+                                                    }
+                                                >
+                                                    Edit
+                                                </button>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div className="gridtxt">
+                                        {activeTabConfig.sections.map(
+                                            (section, sectionIndex) => (
+                                                <React.Fragment
+                                                    key={`section-${activeTabConfig.id}-${sectionIndex}`}
+                                                >
+                                                    <div className="gridtxt__header">
+                                                        <span>
+                                                            {section.title}
+                                                        </span>
+                                                    </div>
+                                                    {section.content &&
+                                                        section.content.length >
+                                                            0 && (
+                                                            <ul className="customer__overview">
+                                                                {section.content.map(
+                                                                    (
+                                                                        item,
+                                                                        itemKey
+                                                                    ) => (
+                                                                        <li
+                                                                            key={`li-${item.id}-${itemKey}`}
+                                                                            className={
+                                                                                item.size ===
+                                                                                'full'
+                                                                                    ? 'fw-grid-item notecolor'
+                                                                                    : null
+                                                                            }
+                                                                        >
+                                                                            <strong>
+                                                                                {
+                                                                                    item.label
+                                                                                }
+
+                                                                                :
+                                                                            </strong>{' '}
+                                                                            {renderValue(
+                                                                                item,
+                                                                                data
+                                                                            )}
+                                                                        </li>
+                                                                    )
+                                                                )}
+                                                            </ul>
+                                                        )}
+                                                </React.Fragment>
+                                            )
+                                        )}
+                                    </div>
+                                </>
+                            );
+                        case 'table':
+                            if (
+                                config.ajaxSetting &&
+                                config.form &&
+                                config.columns &&
+                                config.settings
+                            ) {
+                                return (
+                                    <Table
+                                        {...config}
+                                        setConfig={setConfig}
+                                        setTotal={setTotal}
+                                        style={
+                                            userProfile?.settings?.style || {}
+                                        }
+                                    />
+                                );
+                            } else {
+                                return null;
+                            }
+                        default:
+                            return null;
+                    }
+                }
+            }
+        }
+    };
+
+    /** General Hooks */
+    useEffect(() => {
+        if (tabs && tabs.length > 0) {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
+
+                const applyUrlParamsToData = (data) => {
+                    return data.map((item) => {
+                        return {
+                            ...item,
+                            value:
+                                item.hasOwnProperty('value') &&
+                                item.urlParam &&
+                                routeParams[item.urlParam]
+                                    ? routeParams[item.urlParam]
+                                    : item.value,
+                        };
+                    });
+                };
+
+                if (activeTabConfig) {
+                    switch (activeTabConfig.type) {
+                        case 'table':
+                            if (
+                                activeTabConfig.ajaxSetting &&
+                                activeTabConfig.ajaxSetting.where &&
+                                activeTabConfig.ajaxSetting.where.length > 0
+                            ) {
+                                const updatedAjaxSetting = {
+                                    ...activeTabConfig.ajaxSetting,
+                                    where: applyUrlParamsToData(
+                                        activeTabConfig.ajaxSetting.where
+                                    ),
+                                };
+                                const updatedForm = {
+                                    ...activeTabConfig.form,
+                                    fields: applyUrlParamsToData(
+                                        activeTabConfig.form.fields
+                                    ),
+                                };
+                                setConfig({
+                                    ajaxSetting: updatedAjaxSetting,
+                                    form: updatedForm,
+                                    columns: activeTabConfig.columns,
+                                    settings: activeTabConfig.settings,
+                                });
+                            }
+                            break;
+                        case 'overview':
+                            setConfig({});
+                            if (activeTabConfig.form) {
+                                setFormData(activeTabConfig.form);
+                            }
+                            break;
+                        default:
+                            setConfig({});
+                            break;
+                    }
+                }
+            }
+        }
+    }, [subnav, tabs, routeParams]);
+
+    useEffect(() => {
+        if (routeParams[urlParam] && routeParams[urlParam] > 0) {
+            CustomFetch(
+                `${page.fetchUrl}/${routeParams[urlParam]}`,
+                'GET',
+                {},
+                (res) => {
+                    setData(res);
+                }
+            );
+        }
+    }, [routeParams, dataReload]);
+
+    /** Modal States */
+    const [formData, setFormData] = useState({});
+    const [formType, setFormType] = useState('');
+    const [formId, setFormId] = useState(0);
+    const [modalShow, setModalShow] = useState(false);
+
+    /** Modal Functions */
+    const modalOpen = (formType, formId) => {
+        setModalShow(true);
+        setFormType(formType);
+        setFormId(formId);
+    };
+
+    const modalClose = () => {
+        setModalShow(false);
+    };
+
+    return (
+        <>
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full crmtitle">
+                        <h1>
+                            <Link
+                                to={
+                                    page && page.previousUrl
+                                        ? page.previousUrl
+                                        : null
+                                }
+                            >
+                                {page && page.title ? page.title : null}
+                            </Link>{' '}
+                            <CircleChevronRight strokeWidth={2} size={18} />{' '}
+                            {data && data[page.titleKey]
+                                ? data[page.titleKey]
+                                : null}
+                        </h1>
+                        {total > 0 && (
+                            <div className="titleInfo">
+                                <span>
+                                    [<strong>{total}</strong> Total]
+                                </span>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <div className="grid">
+                <div className="grid__subrow">
+                    <div className="grid__subnav">
+                        <TableFilter filters={subnav} setFilters={setSubnav} />
+                    </div>
+                    <div className="grid__subcontent">
+                        {config ? renderContent() : null}
+                    </div>
+                </div>
+            </div>
+
+            <Popup
+                open={modalShow}
+                onClose={modalClose}
+                closeOnDocumentClick={false}
+            >
+                <Form
+                    closeModal={modalClose}
+                    columnId={formId}
+                    fetchTable={handleReload}
+                    formSettings={formData}
+                    formType={formType}
+                    style={userProfile?.settings?.style || {}}
+                    updateForm={setFormData}
+                />
+            </Popup>
+        </>
+    );
+}
+
+export default GenericDetail;

package/components/crm/generic/GenericIndex.jsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import Table from '../DataGrid';
+import TableFilter from '../TableFilter';
+
+function GenericIndex({ setting, userProfile }) {
+    const { filters, page, tabs, ajaxSetting, form, columns, settings } =
+        setting;
+
+    const [config, setConfig] = useState({});
+    const [subnav, setSubnav] = useState(filters || []);
+    const [total, setTotal] = useState(0);
+    const pageTitle = page?.title;
+
+    useEffect(() => {
+        if (!tabs || tabs.length === 0) {
+            setConfig(() => ({
+                ajaxSetting,
+                form,
+                columns,
+                settings,
+            }));
+        }
+
+        setSubnav(filters);
+    }, [setting]);
+
+    useEffect(() => {
+        if (tabs && tabs.length > 0) {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
+
+                if (activeTabConfig) {
+                    setConfig(() => ({
+                        ajaxSetting: activeTabConfig.ajaxSetting,
+                        form: activeTabConfig.form,
+                        columns: activeTabConfig.columns,
+                        settings: activeTabConfig.settings,
+                    }));
+                }
+            }
+        }
+    }, [subnav, tabs]);
+
+    return (
+        <>
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full crmtitle">
+                        <h1>{pageTitle}</h1>
+                        <div className="titleInfo">
+                            <span>
+                                [<strong>{total}</strong> Total {pageTitle}]
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {config.ajaxSetting &&
+                config.form &&
+                config.columns &&
+                config.settings && (
+                    <>
+                        <div className="grid">
+                            <div className="grid__row">
+                                {subnav && subnav.length > 0 ? (
+                                    <>
+                                        <div className="grid__subnav">
+                                            <TableFilter
+                                                filters={subnav}
+                                                setFilters={setSubnav}
+                                                setSettings={setConfig}
+                                            />
+                                        </div>
+                                        <div className="grid__subcontent">
+                                            <Table
+                                                {...config}
+                                                setConfig={setConfig}
+                                                setTotal={setTotal}
+                                                style={
+                                                    userProfile?.settings
+                                                        ?.style || {}
+                                                }
+                                            />
+                                        </div>
+                                    </>
+                                ) : (
+                                    <div className="grid__full">
+                                        <Table
+                                            {...config}
+                                            setConfig={setConfig}
+                                            setTotal={setTotal}
+                                            style={
+                                                userProfile?.settings?.style ||
+                                                {}
+                                            }
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        <Outlet />
+                    </>
+                )}
+        </>
+    );
+}
+
+export default GenericIndex;