@visns-studio/visns-components 4.10.47 → 5.0.0

package/src/components/crm/MultiSelect.jsx

@@ -1,94 +1,49 @@
-import React, { useEffect, useState, useRef } from 'react';
-import CustomFetch from './Fetch';
+import React, { useEffect, useState } from 'react';
 import SelectList from './SelectList';
 import Select, { createFilter } from 'react-select';
-import CreatableSelect from 'react-select/creatable';
 import styles from './styles/AsyncSelect.module.scss';
 
 function MultiSelect({
     className,
-    inputValue = [], // Default to an empty array
+    inputValue,
     multi,
     onChange,
-    options = [], // Default to an empty array
+    options,
     placeholder,
     settings,
     style,
-    isCreatable = false,
-    creatableConfig = {},
 }) {
     const [selectOptions, setSelectOptions] = useState([]);
-    const [selectValue, setSelectValue] = useState([]);
-    const prevInputValueRef = useRef();
 
     useEffect(() => {
-        const _options = Array.isArray(options)
-            ? options.map((a) => ({
-                  value: a.id,
-                  label: a.label || a.name || a.description || 'Unknown',
-                  ...a,
-              }))
-            : [];
-        setSelectOptions(_options);
-    }, [options]);
+        let _options = [];
 
-    useEffect(() => {
-        // Only update if `inputValue` content has changed
-        if (
-            JSON.stringify(prevInputValueRef.current) !==
-            JSON.stringify(inputValue)
-        ) {
-            const _values = Array.isArray(inputValue)
-                ? inputValue.map((a) => ({
-                      value: a.id,
-                      label: a.label || a.name || a.description || 'Unknown',
-                      ...a,
-                  }))
-                : inputValue && typeof inputValue === 'object'
-                ? [
-                      {
-                          value: inputValue.id,
-                          label:
-                              inputValue.label ||
-                              inputValue.name ||
-                              inputValue.description ||
-                              'Unknown',
-                          ...inputValue,
-                      },
-                  ]
-                : [];
+        if (options.length > 0) {
+            options.forEach((a) => {
+                let _optionItem = {
+                    value: a.id,
+                    label: a.label,
+                };
 
-            setSelectValue(_values);
-            prevInputValueRef.current = inputValue;
-        }
-    }, [inputValue]);
+                Object.keys(a).forEach((b) => {
+                    if (b !== 'id') {
+                        _optionItem = {
+                            ..._optionItem,
+                            [b]: a[b],
+                        };
+                    }
+                });
 
-    const handleCreate = async (inputValue) => {
-        if (creatableConfig.url && creatableConfig.method) {
-            const res = await CustomFetch(
-                creatableConfig.url,
-                creatableConfig.method,
-                { label: inputValue }
-            );
+                _options.push(_optionItem);
+            });
 
-            if (res && res.data) {
-                const newOption = {
-                    value: res.data.id,
-                    label: res.data.label || inputValue,
-                    ...res.data,
-                };
-
-                setSelectOptions((prevOptions) => [...prevOptions, newOption]);
-                setSelectValue((prevValues) => [...prevValues, newOption]);
-            }
+            setSelectOptions(_options);
         }
-    };
-
-    const SelectComponent = isCreatable ? CreatableSelect : Select;
+    }, [options]);
 
     return (
-        <SelectComponent
-            closeMenuOnSelect={!multi}
+        <Select
+            closeMenuOnSelect={multi ? false : true}
             isClearable
             isSearchable
             isMulti={multi}
@@ -114,8 +69,7 @@ function MultiSelect({
                             : '52px',
                 }),
             }}
-            value={selectValue}
-            onCreateOption={handleCreate}
+            value={inputValue}
             placeholder={placeholder ? placeholder : 'Select...'}
         />
     );

package/src/components/crm/Navigation.jsx

@@ -9,7 +9,6 @@ import {
     Calendar,
     ChatDots,
     Clipboard,
-    CloudUpload,
     DoubleSword,
     Draft,
     Envelope,
@@ -236,8 +235,6 @@ function Navigation({
     };
 
     const renderSetting = (n) => {
-        const isActive = location.pathname === n.url; // Check if current path matches setting URL
-
         const iconComponents = {
             bug: Bug,
             calendar: Calendar,
@@ -247,18 +244,15 @@ function Navigation({
             signOut: SignOut,
         };
 
-        const IconComponent = iconComponents[n.icon];
-        const settingClasses = isActive ? `${styles.active}` : ''; // Add active class if URLs match
-
         if (n.id === 'notifications') {
             return (
-                <li className={settingClasses}>
+                <li>
                     <Notification setSystemAuth={setSystemAuth} />
                 </li>
             );
         } else if (n.id === 'switchAccount') {
             return (
-                <li className={settingClasses}>
+                <li>
                     <SwitchAccount
                         setSystemAuth={setSystemAuth}
                         setting={n}
@@ -267,8 +261,9 @@ function Navigation({
                 </li>
             );
         } else if (n.id === 'logout') {
+            const IconComponent = iconComponents[n.icon];
             return (
-                <li className={settingClasses}>
+                <li>
                     <button
                         title={n.label}
                         data-tooltip-id="system-tooltip"
@@ -280,8 +275,10 @@ function Navigation({
                 </li>
             );
         } else {
+            const IconComponent = iconComponents[n.icon];
+
             return (
-                <li className={settingClasses}>
+                <li>
                     <Link
                         to={n.url}
                         data-tooltip-id="system-tooltip"
@@ -305,7 +302,6 @@ function Navigation({
             calendar: Calendar,
             chatDots: ChatDots,
             clipboard: Clipboard,
-            cloudUpload: CloudUpload,
             doubleSword: DoubleSword,
             draft: Draft,
             envelope: Envelope,

package/src/components/crm/QrCode.jsx

@@ -1,12 +1,11 @@
 import { useEffect, useRef, useState } from 'react';
-import { useReactToPrint } from 'react-to-print';
+import ReactToPrint from 'react-to-print';
 
 import CustomFetch from './Fetch';
 import styles from './styles/QrCode.module.scss';
 
 const QrCode = ({ config, dataId }) => {
-    const contentRef = useRef(null);
-    const reactToPrintFn = useReactToPrint({ contentRef });
+    const printComponentRef = useRef();
     const [qrCodeData, setQrCodeData] = useState({
         logo: '',
         qrCode: '',
@@ -27,13 +26,9 @@ const QrCode = ({ config, dataId }) => {
         fetchQrCode(config);
     }, []);
 
-    useEffect(() => {
-        console.info(qrCodeData);
-    }, [qrCodeData]);
-
     return (
         <>
-            <div className={styles.gridtxt} ref={contentRef}>
+            <div className={styles.gridtxt} ref={printComponentRef}>
                 {qrCodeData.logo && qrCodeData.logo !== '' && (
                     <ul className={styles.customer__overview}>
                         <li
@@ -57,7 +52,7 @@ const QrCode = ({ config, dataId }) => {
                             textAlign: 'center',
                         }}
                     >
-                        {qrCodeData.title || ''}
+                        {qrCodeData.title}
                     </li>
                 </ul>
                 <ul className={styles.customer__overview}>
@@ -76,9 +71,10 @@ const QrCode = ({ config, dataId }) => {
                 </ul>
             </div>
             <div className={styles.polActions}>
-                <button className={styles.btn} onClick={() => reactToPrintFn()}>
-                    Print
-                </button>
+                <ReactToPrint
+                    trigger={() => <button className="btn">Print</button>}
+                    content={() => printComponentRef.current}
+                />
             </div>
         </>
     );

package/src/components/crm/QuickAction.jsx

@@ -398,6 +398,7 @@ const QuickAction = ({ childRef, navConfig }) => {
                 <button
                     onClick={() => {
                         if (location.pathname === '/leads/create') {
+                            console.info('aa');
                             childRef.current.contactOpen();
                         } else {
                             contactModalOpen('create', 0);

package/src/components/crm/generic/GenericAuth.jsx

@@ -51,12 +51,8 @@ const GenericAuth = ({
     const updateAuthStatus = async () => {
         try {
             const { data } = await CustomFetch('/ajax/user/profile', 'GET');
-
-            if (data && data.id) {
-                setUserProfile(data);
-                setIsAuthenticated(true);
-            }
-
+            setUserProfile(data);
+            setIsAuthenticated(true);
             setIsLoading(false);
 
             if (location.pathname.split('/')[1] === 'login') {

package/src/components/crm/generic/GenericDashboard.jsx

@@ -1,352 +1,42 @@
-import React, { useEffect, useState } from 'react';
-import { ResponsiveBar } from '@nivo/bar';
-import Select from 'react-select';
-import styles from './styles/GenericDashboard.module.scss';
+import React, { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import CustomFetch from '../../crm/Fetch';
 
-import CustomFetch from '../Fetch';
-
-function GenericDashboard({ setting, userProfile }) {
+const GenericDashboard = ({ userProfile }) => {
     const [data, setData] = useState([]);
-    const [dropdown, setDropdown] = useState({ filters: [] });
-    const [selectedFilters, setSelectedFilters] = useState({});
-    const [filterValues, setFilterValues] = useState({});
-    const [errorMessage, setErrorMessage] = useState('');
-
-    const customStyles = {
-        control: (base) => ({
-            ...base,
-            height: '51px',
-            minHeight: '51px',
-            padding: '0',
-            borderColor: '#ced4da',
-            borderRadius: '5px',
-            boxShadow: 'none',
-            '&:hover': {
-                borderColor: '#80bdff',
-            },
-        }),
-        valueContainer: (base) => ({
-            ...base,
-            height: '51px',
-            padding: '0 8px',
-            display: 'flex',
-            alignItems: 'center',
-        }),
-    };
-
-    const fetchDropdownData = async () => {
-        try {
-            const response = await CustomFetch(
-                setting.api.dropdownUrl,
-                'POST',
-                {}
-            );
-            setDropdown((prevState) => ({
-                ...prevState,
-                filters: response?.data?.data || [],
-            }));
-        } catch (error) {
-            console.error('Error fetching dropdown data:', error);
-        }
-    };
-
-    const fetchData = async () => {
-        try {
-            const filters = Object.keys(filterValues).reduce((acc, key) => {
-                if (filterValues[key]) {
-                    acc[key] = filterValues[key];
-                }
-                return acc;
-            }, {});
-
-            const response = await CustomFetch(
-                setting.api.fetchDataUrl,
-                'POST',
-                filters
-            );
-            setData(response?.data?.data || []);
-        } catch (error) {
-            console.error('Error fetching data:', error);
-        }
-    };
-
-    const handleFilterChange = (filterId, value) => {
-        setFilterValues((prevValues) => ({
-            ...prevValues,
-            [filterId]: value,
-        }));
-    };
-
-    useEffect(() => {
-        fetchDropdownData();
-    }, []);
-
-    useEffect(() => {
-        fetchData();
-    }, [filterValues]);
 
     return (
-        <div className={styles.grid}>
-            <div className={styles.filterContainer}>
-                <div className={styles.filterHeader}>
-                    <h3>{setting.filters?.title || 'Filters'}</h3>
-                </div>
-                <div className={styles.filterFields}>
-                    {setting.filters?.filters?.map((filter, index) => {
-                        switch (filter.type) {
-                            case 'dateRange':
-                                return (
-                                    <div
-                                        key={index}
-                                        className={styles.filterField}
-                                    >
-                                        <label htmlFor={filter.startDateId}>
-                                            {filter.startDateLabel ||
-                                                'Start Date'}
-                                        </label>
-                                        <input
-                                            id={filter.startDateId}
-                                            type="date"
-                                            value={
-                                                filterValues[
-                                                    filter.startDateId
-                                                ] || ''
-                                            }
-                                            onChange={(e) =>
-                                                handleFilterChange(
-                                                    filter.startDateId,
-                                                    e.target.value
-                                                )
-                                            }
-                                        />
-                                        <label htmlFor={filter.endDateId}>
-                                            {filter.endDateLabel || 'End Date'}
-                                        </label>
-                                        <input
-                                            id={filter.endDateId}
-                                            type="date"
-                                            value={
-                                                filterValues[
-                                                    filter.endDateId
-                                                ] || ''
-                                            }
-                                            onChange={(e) =>
-                                                handleFilterChange(
-                                                    filter.endDateId,
-                                                    e.target.value
-                                                )
-                                            }
-                                        />
-                                    </div>
-                                );
-                            case 'dropdown':
-                                return (
-                                    <div
-                                        key={index}
-                                        className={styles.filterField}
-                                    >
-                                        <label htmlFor={filter.id}>
-                                            {filter.label || 'Select Option'}
-                                        </label>
-                                        <Select
-                                            id={filter.id}
-                                            isMulti={filter.isMulti}
-                                            options={dropdown.filters.map(
-                                                (option) => ({
-                                                    value: option.id,
-                                                    label: option.label,
-                                                })
-                                            )}
-                                            styles={customStyles}
-                                            value={selectedFilters[filter.id]}
-                                            onChange={(value) =>
-                                                handleFilterChange(
-                                                    filter.id,
-                                                    value
-                                                )
-                                            }
-                                        />
-                                    </div>
-                                );
-                            default:
-                                return null;
-                        }
-                    })}
-                    <div className={styles.filterActions}>
-                        <button onClick={fetchData} className="btn btn-primary">
-                            {setting.filters?.applyButtonLabel ||
-                                'Apply Filters'}
-                        </button>
-                        <button
-                            onClick={() => {
-                                setFilterValues({});
-                                setErrorMessage('');
-                            }}
-                            className="btn btn-secondary"
-                        >
-                            {setting.filters?.clearButtonLabel ||
-                                'Clear Filters'}
-                        </button>
+        <div className="grid">
+            <div className="grid__row">
+                <div className="grid__three dashtopwidge">
+                    <div className="dashtopwidge__left">
+                        <h2>
+                            Current
+                            <span>
+                                <strong>Enquiries</strong>
+                            </span>
+                        </h2>
+                    </div>
+                    <div className="dashtopwidge__right">
+                        <span>0</span>
                     </div>
                 </div>
-                {errorMessage && (
-                    <div className={styles.errorMessage}>
-                        <p>{errorMessage}</p>
+                <div className="grid__three dashtopwidge">
+                    <div className="dashtopwidge__left">
+                        <h2>
+                            Current{' '}
+                            <span>
+                                <strong>Enquiries</strong>
+                            </span>
+                        </h2>
                     </div>
-                )}
+                    <div className="dashtopwidge__right">
+                        <span>0</span>
+                    </div>
+                </div>
             </div>
-
-            {setting.widgets?.map((widget, index) => {
-                switch (widget.type) {
-                    case 'chart':
-                        return (
-                            <div key={index} className={styles.grid__row}>
-                                <div className={styles.grid__dashfull}>
-                                    <div className={styles.widgetTitle}>
-                                        <h2>
-                                            {widget.title || 'Chart Widget'}
-                                        </h2>
-                                    </div>
-                                    <div style={{ height: 600 }}>
-                                        {data.length > 0 ? (
-                                            <ResponsiveBar
-                                                data={data}
-                                                keys={widget.keys || []}
-                                                indexBy={
-                                                    widget.indexBy ||
-                                                    'supervisor'
-                                                }
-                                                margin={
-                                                    widget.margin || {
-                                                        top: 20,
-                                                        right: 200,
-                                                        bottom: 110,
-                                                        left: 80,
-                                                    }
-                                                }
-                                                padding={0.2}
-                                                valueScale={{ type: 'linear' }}
-                                                indexScale={{
-                                                    type: 'band',
-                                                    round: true,
-                                                }}
-                                                colors={{
-                                                    scheme:
-                                                        widget.colorScheme ||
-                                                        'set3',
-                                                }}
-                                                borderColor={{
-                                                    from: 'color',
-                                                    modifiers: [
-                                                        ['darker', 1.6],
-                                                    ],
-                                                }}
-                                                axisBottom={
-                                                    widget.axisBottom || {
-                                                        tickSize: 5,
-                                                        tickPadding: 5,
-                                                        tickRotation: 45,
-                                                    }
-                                                }
-                                                axisLeft={
-                                                    widget.axisLeft || {
-                                                        tickSize: 5,
-                                                        tickPadding: 5,
-                                                    }
-                                                }
-                                                legends={widget.legends || []}
-                                            />
-                                        ) : (
-                                            <div>Loading chart...</div>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    case 'table':
-                        return (
-                            <div key={index} className={styles.grid__row}>
-                                <div className={styles.grid__dashfull}>
-                                    <div className={styles.widgetTitle}>
-                                        <h2>
-                                            {widget.title || 'Table Widget'}
-                                        </h2>
-                                    </div>
-                                    <div className={styles.tableContainer}>
-                                        {data.length > 0 ? (
-                                            <table>
-                                                <thead>
-                                                    <tr>
-                                                        <th>
-                                                            {widget.tableHeader ||
-                                                                'Data'}
-                                                        </th>
-                                                        {data.map(
-                                                            (row, index) => (
-                                                                <th key={index}>
-                                                                    {
-                                                                        row.supervisor
-                                                                    }
-                                                                </th>
-                                                            )
-                                                        )}
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    {widget.keys?.map(
-                                                        (key, index) => {
-                                                            let total = 0;
-                                                            return (
-                                                                <tr key={index}>
-                                                                    <td>
-                                                                        {key}
-                                                                    </td>
-                                                                    {data.map(
-                                                                        (
-                                                                            row
-                                                                        ) => {
-                                                                            const count =
-                                                                                row[
-                                                                                    key
-                                                                                ] ||
-                                                                                0;
-                                                                            total +=
-                                                                                count;
-                                                                            return (
-                                                                                <td
-                                                                                    key={
-                                                                                        row.supervisor
-                                                                                    }
-                                                                                >
-                                                                                    {
-                                                                                        count
-                                                                                    }
-                                                                                </td>
-                                                                            );
-                                                                        }
-                                                                    )}
-                                                                    <td>
-                                                                        {total}
-                                                                    </td>
-                                                                </tr>
-                                                            );
-                                                        }
-                                                    )}
-                                                </tbody>
-                                            </table>
-                                        ) : (
-                                            <div>No data available</div>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    default:
-                        return null;
-                }
-            })}
         </div>
     );
-}
+};
 
 export default GenericDashboard;