@visns-studio/visns-components 4.7.1 → 4.7.3

package/src/components/crm/Notification.jsx

@@ -0,0 +1,197 @@
+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.scss';
+
+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/src/components/crm/QrCode.jsx

@@ -0,0 +1,83 @@
+import { useEffect, useRef, useState } from 'react';
+import ReactToPrint from 'react-to-print';
+
+import CustomFetch from './Fetch';
+import styles from './styles/QrCode.module.scss';
+
+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/src/components/crm/Select.jsx

@@ -0,0 +1,58 @@
+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/src/components/crm/SelectList.jsx

@@ -0,0 +1,21 @@
+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/src/components/crm/TableFilter.jsx

@@ -0,0 +1,198 @@
+import React, { useState, useEffect, useRef } from 'react';
+import styles from './styles/TableFilter.module.scss';
+
+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;