@visns-studio/visns-components 5.0.1-8.1 → 5.0.1

package/src/components/crm/MultiSelect.jsx

@@ -1,120 +1,54 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import CustomFetch from './Fetch';
-import Select, { createFilter, components } from 'react-select';
-import CreatableSelect from 'react-select/creatable';
+import React, { useEffect, useState } from 'react';
+import SelectList from './SelectList';
+import Select, { createFilter } from 'react-select';
 import styles from './styles/AsyncSelect.module.scss';
 
-const CustomOption = (props) => (
-    <components.Option {...props}>
-        <div>
-            {props.data.label}
-            {props.data.description && props.data.description !== '' && (
-                <div style={{ fontSize: '0.85em', color: '#888' }}>
-                    {props.data.description}
-                </div>
-            )}
-        </div>
-    </components.Option>
-);
-
 function MultiSelect({
     className,
-    inputValue = [],
+    inputValue,
     multi,
     onChange,
-    options = [],
+    options,
     placeholder,
     settings,
     style,
-    isCreatable = false,
-    creatableConfig = {},
 }) {
     const [selectOptions, setSelectOptions] = useState([]);
-    const [selectValue, setSelectValue] = useState([]);
-
-    // Memoize transformed options
-    const memoizedOptions = useMemo(() => {
-        return options
-            .filter((a) => a?.label || a?.name || a?.description) // Filter out options with no label, name, or description
-            .map((a) => ({
-                value: a?.id,
-                label: a?.label || a?.name || a?.description || 'Unknown',
-                description: a?.description || '',
-                ...a,
-            }));
-    }, [options]);
-
-    // Memoize transformed input values
-    const memoizedInputValue = useMemo(() => {
-        const normalizeInputValue = (value) =>
-            Array.isArray(value) ? value : value ? [value] : [];
-
-        return normalizeInputValue(inputValue)
-            .filter((a) => a?.label || a?.name || a?.description) // Filter out values with no label, name, or description
-            .map((a) => ({
-                value: a?.id,
-                label: a?.label || a?.name || a?.description || 'Unknown',
-                description: a?.description || '',
-                ...a,
-            }));
-    }, [inputValue]);
-
-    // Set options when memoizedOptions changes
-    useEffect(() => {
-        if (JSON.stringify(selectOptions) !== JSON.stringify(memoizedOptions)) {
-            setSelectOptions(memoizedOptions);
-        }
-    }, [memoizedOptions, selectOptions]);
 
-    // Set value when memoizedInputValue changes
     useEffect(() => {
-        if (
-            JSON.stringify(selectValue) !== JSON.stringify(memoizedInputValue)
-        ) {
-            setSelectValue(memoizedInputValue);
-        }
-    }, [memoizedInputValue, selectValue]);
+        let _options = [];
 
-    const handleCreate = async (inputValue) => {
-        if (creatableConfig.url && creatableConfig.method) {
-            const res = await CustomFetch(
-                creatableConfig.url,
-                creatableConfig.method,
-                { label: inputValue }
-            );
-
-            if (res && res.data) {
-                const newOption = {
-                    value: res.data.id,
-                    label: res.data.label || inputValue,
-                    description: res.data.description || 'Newly created item',
-                    ...res.data,
+        if (options.length > 0) {
+            options.forEach((a) => {
+                let _optionItem = {
+                    value: a.id,
+                    label: a.label,
                 };
 
-                setSelectOptions((prevOptions) => [...prevOptions, newOption]);
-                setSelectValue((prevValues) =>
-                    multi ? [...prevValues, newOption] : [newOption]
-                );
+                Object.keys(a).forEach((b) => {
+                    if (b !== 'id') {
+                        _optionItem = {
+                            ..._optionItem,
+                            [b]: a[b],
+                        };
+                    }
+                });
 
-                onChange(
-                    multi ? [...selectValue, newOption] : newOption,
-                    { action: 'create-option' },
-                    settings.id
-                );
-            }
-        }
-    };
+                _options.push(_optionItem);
+            });
 
-    const SelectComponent = isCreatable ? CreatableSelect : Select;
+            setSelectOptions(_options);
+        }
+    }, [options]);
 
     return (
-        <SelectComponent
-            closeMenuOnSelect={!multi}
+        <Select
+            closeMenuOnSelect={multi ? false : true}
             isClearable
             isSearchable
             isMulti={multi}
             filterOption={createFilter({ ignoreAccents: false })}
-            components={{ Option: CustomOption }}
+            components={{ SelectList }}
             options={selectOptions}
             onChange={(inputValue, action) => {
                 onChange(inputValue, action, settings.id);
@@ -135,9 +69,8 @@ function MultiSelect({
                             : '52px',
                 }),
             }}
-            value={selectValue}
-            onCreateOption={isCreatable ? handleCreate : undefined}
-            placeholder={placeholder || 'Select...'}
+            value={inputValue}
+            placeholder={placeholder ? placeholder : 'Select...'}
         />
     );
 }

package/src/components/crm/Navigation.jsx

@@ -1,13 +1,45 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
+    ArrowCycle,
+    BookClose,
+    BookOpen,
+    Briefcase,
     Bug,
     Calendar,
+    ChatDots,
+    Clipboard,
+    DoubleSword,
     Draft,
+    Envelope,
+    File,
+    Folder,
+    FolderAdd,
+    Gear,
+    Grid,
+    Home,
+    HomeAlt1,
+    Inbox,
+    Info,
+    LightBulb,
+    Microphone,
+    Money,
+    Newspaper,
+    Paper,
+    PeopleGroup,
+    PeopleMultiple,
     Person,
+    Question,
+    QuestionFill,
     Search,
+    SettingsVertical,
+    ShippingBoxV1,
     SignOut,
     Shield,
+    StatisticUp,
+    TextAlignLeft,
+    Ticket,
+    Utensils,
 } from 'akar-icons';
 import CustomFetch from './Fetch';
 import Notification from './Notification';
@@ -262,6 +294,47 @@ function Navigation({
     };
 
     const renderNav = (n) => {
+        const iconComponents = {
+            arrowCycle: ArrowCycle,
+            bookClose: BookClose,
+            bookOpen: BookOpen,
+            briefcase: Briefcase,
+            calendar: Calendar,
+            chatDots: ChatDots,
+            clipboard: Clipboard,
+            doubleSword: DoubleSword,
+            draft: Draft,
+            envelope: Envelope,
+            file: File,
+            folder: Folder,
+            folderAdd: FolderAdd,
+            gear: Gear,
+            grid: Grid,
+            home: Home,
+            homeAlt1: HomeAlt1,
+            inbox: Inbox,
+            info: Info,
+            lightBulb: LightBulb,
+            microphone: Microphone,
+            money: Money,
+            newspaper: Newspaper,
+            paper: Paper,
+            peopleGroup: PeopleGroup,
+            peopleMultiple: PeopleMultiple,
+            question: Question,
+            questionFill: QuestionFill,
+            search: Search,
+            settingsVertical: SettingsVertical,
+            signOut: SignOut,
+            shippingBoxV1: ShippingBoxV1,
+            statisticUp: StatisticUp,
+            textAlignLeft: TextAlignLeft,
+            ticket: Ticket,
+            utensils: Utensils,
+        };
+
+        const IconComponent = iconComponents[n.icon];
+
         let navItemClasses;
 
         if (n.class.includes('active')) {
@@ -302,9 +375,15 @@ function Navigation({
         return (
             <li className={navItemClasses}>
                 {n.url ? (
-                    <Link to={n.url}>{n.label}</Link>
+                    <Link to={n.url}>
+                        <IconComponent strokeWidth={2} size={18} />
+                        {n.label}
+                    </Link>
                 ) : (
-                    <span title={n.label}>{n.label}</span>
+                    <span title={n.label}>
+                        <IconComponent strokeWidth={2} size={18} />
+                        {n.label}
+                    </span>
                 )}
                 {renderChildren()}
             </li>

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/auth/Login.jsx

@@ -28,15 +28,7 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
         let content =
             providers && providers.length > 0 ? (
                 <div className="formItem fwItem lastItem forgotten">
-                    <span
-                        style={{
-                            display: 'block',
-                            textAlign: 'center',
-                            width: '100%',
-                        }}
-                    >
-                        OR
-                    </span>
+                    <span>OR</span>
                 </div>
             ) : null;
 

package/src/components/crm/auth/Profile.jsx

@@ -101,12 +101,10 @@ const Profile = ({ userProfile, setUserProfile }) => {
                 payload
             );
 
-            const updatedUserData = res.data.user ? res.data.user : res.data;
-
             setUserProfile((prevState) => ({
                 ...prevState,
-                name: updatedUserData.name,
-                signature: updatedUserData.signature,
+                name: res.data.user.name,
+                signature: res.data.user.signature,
             }));
             toast.success('Your profile has been successfully updated.');
         } catch (err) {

package/src/components/crm/auth/styles/Login.module.scss

@@ -12,7 +12,7 @@
     .fi__span {
         position: absolute;
         transition: all 200ms;
-        opacity: 1;
+        opacity: 0.8;
         left: 0;
         transform-origin: top left;
         cursor: text;
@@ -164,11 +164,10 @@
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
 select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-135%) translateX(10px) scale(0.9);
+    transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
     background: var(--bg-color);
-    font-weight: 400;
+    font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
-    color: rgba(var(--paragraph-rgb), 0.65) !important;
 }

package/src/components/crm/auth/styles/Profile.module.scss

@@ -3,11 +3,11 @@
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
 select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.9);
+    transform: translateY(-40%) translateX(10px) scale(0.75);
     opacity: 1;
-    padding: 0 0.25rem;
+    padding: 0 4px;
     background: var(--tertiary-color);
-    font-weight: 400;
+    font-weight: 300;
     border-radius: var(--br);
 }
 
@@ -111,72 +111,30 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .grid__subcontent {
-    flex: 0 1 80%;
-    background: var(--tertiary-color);
+    flex: 0 1 85%;
+    background: white;
     border-radius: var(--br);
-    border: 1px solid rgba(var(--primary-rgb), 0.05);
+    border: 1px solid var(--border-color);
     box-sizing: border-box;
-    padding: 2px;
-    margin: 8px 0;
+    padding: 0;
+    margin: 0.5rem 0;
     height: auto;
     position: relative;
 }
 
-.grid__subcontent h2 {
-    color: var(--primary-color);
-    font-size: 1.35em;
-    padding: 0;
-    margin: 0 0 30px 0;
-}
-
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: rgba(var(--primary-rgb), 0.05);
+    background: var(--border-color);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-radius: var(--br);
+    border-top-left-radius: var(--br);
+    border-top-right-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
     color: var(--paragraph-color);
-}
-
-.gridtxt__header span {
-    font-weight: 700;
-}
-
-.gridtxt > ul {
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: row;
-    flex-wrap: wrap;
-    list-style: none;
-    box-sizing: border-box;
-    padding: 0.85rem;
-    margin: 0;
-}
-
-.gridtxt > ul li {
-    flex: 0 0 calc(50% - 10px);
-    padding: 0.85rem;
-    box-sizing: border-box;
-    border: 1px solid rgba(var(--primary-rgb), 0.095);
-    color: var(--paragraph-color);
-    background: rgba(var(--primary-rgb), 0.015);
-    margin: 5px;
-    border-radius: var(--br);
-    line-height: 1.45;
-    font-size: 1rem;
-}
-
-.gridtxt > ul .fw-grid-item {
-    flex: 0 0 calc(100% - 10px);
-}
-
-.gridtxt > ul .notecolor {
-    border: 1px solid var(--secondary-color);
+    position: relative;
 }
 
 .formcontainer {
@@ -205,7 +163,7 @@ select:not(:placeholder-shown) + .fi__span {
 .fi__span {
     position: absolute;
     transition: all 200ms;
-    opacity: 1;
+    opacity: 0.8;
     left: 0;
     padding: 19px 20px;
     transform-origin: top left;
@@ -319,7 +277,7 @@ select:not(:placeholder-shown) + .fi__span {
         a {
             text-decoration: none;
             color: var(--secondary-color);
-            font-weight: 400;
+            font-weight: 300;
         }
 
         svg {

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

@@ -51,11 +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') {