@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/crm/Notification.jsx

@@ -1,197 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import moment from 'moment';
-import parse from 'html-react-parser';
-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 [items, setItems] = useState([]);
-    const [show, setShow] = useState(false);
-    const { setSystemAuth } = props;
-
-    const fetchNotification = () => {
-        CustomFetch(
-            '/ajax/user/notifications',
-            'POST',
-            {},
-            function (result) {
-                setItems(result.data);
-            },
-            function (error) {
-                if (String(error) === 'CSRF token mismatch.') {
-                    window.open('/login');
-                } else {
-                    if (error === 'Unauthenticated.') {
-                        setSystemAuth(false);
-                    }
-                    toast.error(String(error));
-                }
-            }
-        );
-    };
-
-    const handleClick = (e) => {
-        if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
-            setShow(false);
-        }
-    };
-
-    const markAsRead = (e) => {
-        e.preventDefault();
-
-        let array = items;
-        let index = e.target.dataset.index;
-        let id = e.target.dataset.id;
-
-        if (index >= 0) {
-            array.splice(index, 1);
-            setItems(array);
-        }
-
-        let formData = { id: id };
-
-        CustomFetch(
-            '/ajax/user/notification/markasread',
-            'POST',
-            formData,
-            function () {
-                fetchNotification();
-            }
-        );
-    };
-
-    const markAllAsRead = (e) => {
-        e.preventDefault();
-
-        let array = items;
-        setItems([]);
-
-        array.map((item) => {
-            let formData = { id: item.id };
-
-            CustomFetch(
-                '/ajax/user/notification/markasread',
-                'POST',
-                formData,
-                function () {
-                    fetchNotification();
-                }
-            );
-        });
-    };
-
-    const toggleNotification = () => {
-        setShow(!show);
-    };
-
-    const showAllNotifications = () => {
-        navigate('/notifications');
-        setShow(false);
-    };
-
-    useEffect(() => {
-        fetchNotification();
-
-        interval = setInterval(() => {
-            if (!document.hidden) {
-                fetchNotification();
-            }
-        }, 60000);
-
-        document.addEventListener('mousedown', handleClick, false);
-
-        return function cleanup() {
-            clearInterval(interval);
-            document.removeEventListener('mousedown', handleClick, false);
-        };
-    }, []);
-
-    return (
-        <>
-            <a
-                href="#"
-                onClick={toggleNotification}
-                data-tooltip-id="system-tooltip"
-                data-tooltip-content="Notification"
-            >
-                <Bell
-                    size={19}
-                    strokeWidth={2}
-                    className={
-                        items.length > 0
-                            ? styles.noti
-                            : styles['cis-bell-exclamation']
-                    }
-                />
-            </a>
-
-            {show && (
-                <div ref={wrapperRef}>
-                    {items.length > 0 ? (
-                        <div className={styles.notibox}>
-                            <div className={styles.notiscrollwrap}>
-                                {items.map((item, index) => (
-                                    <div
-                                        className={styles['notibox-item']}
-                                        key={item.id}
-                                    >
-                                        <Bell
-                                            size={19}
-                                            strokeWidth={2}
-                                            className={
-                                                styles.cisBellExclamation
-                                            }
-                                        />{' '}
-                                        {parse(item.data.label)}{' '}
-                                        <span>
-                                            [
-                                            {moment(item.created_at).format(
-                                                'DD/MM - H:mma'
-                                            )}
-                                            ]
-                                        </span>{' '}
-                                        <button onClick={markAsRead}>
-                                            <CircleX
-                                                size={24}
-                                                data-id={item.id}
-                                                data-index={index}
-                                                className={styles.notiRead}
-                                            />
-                                        </button>
-                                    </div>
-                                ))}
-                            </div>
-                            <div className={styles['notibox-actions']}>
-                                <button onClick={showAllNotifications}>
-                                    View All
-                                </button>
-                                <button onClick={markAllAsRead}>
-                                    Clear All
-                                </button>
-                            </div>
-                        </div>
-                    ) : (
-                        <div className={styles.notibox}>
-                            <div className={styles['notibox-item']}>
-                                No new notifications available.
-                            </div>
-                            <div className={styles['notibox-actions']}>
-                                <button onClick={showAllNotifications}>
-                                    View All
-                                </button>
-                            </div>
-                        </div>
-                    )}
-                </div>
-            )}
-        </>
-    );
-}
-
-export default Notification;

package/components/crm/QrCode.jsx

@@ -1,83 +0,0 @@
-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();
-    const [qrCodeData, setQrCodeData] = useState({
-        logo: '',
-        qrCode: '',
-        title: '',
-    });
-
-    const fetchQrCode = async ({ url }) => {
-        try {
-            const res = await CustomFetch(`${url}/${dataId}`, 'POST', {});
-
-            setQrCodeData((prevState) => ({ ...prevState, ...res.data }));
-        } catch (error) {
-            console.error(error);
-        }
-    };
-
-    useEffect(() => {
-        fetchQrCode(config);
-    }, []);
-
-    return (
-        <>
-            <div className={styles.gridtxt} ref={printComponentRef}>
-                {qrCodeData.logo && qrCodeData.logo !== '' && (
-                    <ul className={styles.customer__overview}>
-                        <li
-                            className={styles['fw-grid-item']}
-                            style={{
-                                textAlign: 'center',
-                            }}
-                        >
-                            <img
-                                src={qrCodeData.logo}
-                                alt="Dawn Projects"
-                                width="40%"
-                            />
-                        </li>
-                    </ul>
-                )}
-                <ul className={styles.customer__overview}>
-                    <li
-                        className={styles['fw-grid-item']}
-                        style={{
-                            textAlign: 'center',
-                        }}
-                    >
-                        {qrCodeData.title}
-                    </li>
-                </ul>
-                <ul className={styles.customer__overview}>
-                    <li
-                        className={styles['fw-grid-item']}
-                        style={{ textAlign: 'center' }}
-                    >
-                        {qrCodeData.qrCode && qrCodeData.qrCode !== '' && (
-                            <img
-                                src={`data:image/svg+xml;base64, ${qrCodeData.qrCode}`}
-                                alt="SVG Image"
-                                width="80%"
-                            />
-                        )}
-                    </li>
-                </ul>
-            </div>
-            <div className={styles.polActions}>
-                <ReactToPrint
-                    trigger={() => <button className="btn">Print</button>}
-                    content={() => printComponentRef.current}
-                />
-            </div>
-        </>
-    );
-};
-
-export default QrCode;

package/components/crm/Select.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-const Select = (props) => {
-    const { className, dataOptions, inputValue, onChange, options, settings } =
-        props;
-
-    return (
-        <select
-            data-name={settings.id}
-            className={className}
-            onChange={onChange}
-            value={inputValue}
-            data-show={settings.show ? JSON.stringify(settings.show) : ''}
-        >
-            <option value="">
-                {settings.placeholder
-                    ? settings.placeholder
-                    : 'Please select an option'}
-            </option>
-            {options.map((item, index) =>
-                item.options ? (
-                    item.options.length > 0 ? ( // Check if the item contains nested options (indicating an optgroup)
-                        <optgroup
-                            key={settings.id + '-' + item.id}
-                            label={item.label}
-                        >
-                            {item.options.map((subItem, subIndex) => (
-                                <option
-                                    key={
-                                        settings.id +
-                                        '-' +
-                                        item.id +
-                                        '-' +
-                                        subItem.id
-                                    }
-                                    value={subItem.id}
-                                    {...dataOptions[subIndex]}
-                                >
-                                    {subItem.label}
-                                </option>
-                            ))}
-                        </optgroup>
-                    ) : null
-                ) : (
-                    <option
-                        key={settings.id + '-' + item.id}
-                        value={item.id}
-                        {...dataOptions[index]}
-                    >
-                        {item.label}
-                    </option>
-                )
-            )}
-        </select>
-    );
-};
-
-export default Select;

package/components/crm/SelectList.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { FixedSizeList } from 'react-window';
-
-function SelectList(props) {
-    const { options, children, maxHeight, getValue } = props;
-    const [value] = getValue();
-    const initialOffset = options.indexOf(value) * 50;
-
-    return (
-        <FixedSizeList
-            height={maxHeight}
-            itemCount={children.length}
-            itemSize={height}
-            initialScrollOffset={initialOffset}
-        >
-            {({ index, style }) => <div style={style}>{children[index]}</div>}
-        </FixedSizeList>
-    );
-}
-
-export default SelectList;

package/components/crm/TableFilter.jsx

@@ -1,198 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import styles from './styles/TableFilter.module.css';
-
-function TableFilter({
-    collapsible = false,
-    filters,
-    setFilters,
-    setSettings,
-    type,
-}) {
-    const [visibleChildren, setVisibleChildren] = useState(null);
-    const isFirstRender = useRef(true);
-
-    useEffect(() => {
-        if (
-            isFirstRender.current &&
-            filters.length > 0 &&
-            filters[0].children &&
-            filters[0].children.length > 0
-        ) {
-            setVisibleChildren(filters[0].id);
-            isFirstRender.current = false;
-        }
-    }, [filters]);
-
-    const filterTable = (e) => {
-        const { id, parent, filtertype, url, value } = e.target.dataset;
-
-        const updateFilter = (filter) => {
-            let isActive = false;
-
-            if (filter.hasOwnProperty('value')) {
-                isActive = parseInt(value) === parseInt(filter.value);
-            } else {
-                isActive = filter.id === id;
-            }
-
-            const isParent =
-                parent && filtertype === 'children' && filter.id === parent;
-
-            const updatedChildren = isParent
-                ? filter.children.map((child) => ({
-                      ...child,
-                      class: child.id === id ? 'subactivechildren' : '',
-                      show: child.id === id ? true : false,
-                  }))
-                : filter.children
-                ? filter.children.map((child, childKey) => ({
-                      ...child,
-                      class:
-                          childKey === 0 && isActive ? 'subactivechildren' : '',
-                      show: childKey === 0 && isActive ? true : false,
-                  }))
-                : [];
-
-            return {
-                ...filter,
-                class:
-                    isActive || isParent
-                        ? type === 'simple'
-                            ? 'activetab'
-                            : 'subactive'
-                        : '',
-                show: isActive || isParent,
-                children: updatedChildren,
-            };
-        };
-
-        setFilters((prevFilters) => prevFilters.map(updateFilter));
-
-        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
-                            ? prevState.where.map((a) => {
-                                  if (id === a.id) {
-                                      return { ...a, value: value };
-                                  }
-                                  return a;
-                              })
-                            : [];
-
-                        return { ...prevState, where: w };
-                    }
-                });
-            }
-        }
-
-        // Handle collapsible functionality
-        if (collapsible && filtertype === 'parent') {
-            setVisibleChildren(id);
-        }
-    };
-
-    const renderContent = (d) => {
-        const parentClass = `${styles.link} ${styles[d.class] || ''}`;
-        const childClass = (child) =>
-            `${styles.link} ${styles[child.class] || ''}`;
-
-        if (type === 'simple') {
-            return (
-                <li className={styles[d.class]}>
-                    <button
-                        data-id={d.id}
-                        data-filtertype="parent"
-                        data-url={d.url || ''}
-                        data-value={d.hasOwnProperty('value') ? d.value : ''}
-                        onClick={filterTable}
-                    >
-                        {d.label}
-                    </button>
-                </li>
-            );
-        } else {
-            return (
-                <li>
-                    <a
-                        data-id={d.id}
-                        data-filtertype="parent"
-                        data-url={d.url || ''}
-                        data-value={d.hasOwnProperty('value') ? d.value : ''}
-                        onClick={filterTable}
-                        className={parentClass}
-                    >
-                        {d.label}
-                    </a>
-                    {d.children && d.children.length > 0 && (
-                        <ul
-                            className={`${styles.collapsibleMenu} ${
-                                visibleChildren === d.id
-                                    ? styles.visibleMenu
-                                    : ''
-                            }`}
-                        >
-                            {d.children.map((child, key) => (
-                                <li key={`table-filter-child-${d.id}-${key}`}>
-                                    <a
-                                        className={childClass(child)}
-                                        data-id={child.id}
-                                        data-value={
-                                            child.hasOwnProperty('value')
-                                                ? child.value
-                                                : ''
-                                        }
-                                        data-url={child.url || ''}
-                                        data-filtertype="children"
-                                        data-parent={d.id}
-                                        onClick={filterTable}
-                                    >
-                                        {child.label}
-                                    </a>
-                                </li>
-                            ))}
-                        </ul>
-                    )}
-                </li>
-            );
-        }
-    };
-
-    return (
-        <ul className={styles.tableFilter}>
-            {filters.map((item, key) => (
-                <React.Fragment key={'table-filter-' + key}>
-                    {renderContent(item)}
-                </React.Fragment>
-            ))}
-        </ul>
-    );
-}
-
-export default TableFilter;