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

package/src/components/crm/MultiSelect.jsx

@@ -1,54 +1,120 @@
-import React, { useEffect, useState } from 'react';
-import SelectList from './SelectList';
-import Select, { createFilter } from 'react-select';
+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 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(() => {
-        let _options = [];
+        if (JSON.stringify(selectOptions) !== JSON.stringify(memoizedOptions)) {
+            setSelectOptions(memoizedOptions);
+        }
+    }, [memoizedOptions, selectOptions]);
 
-        if (options.length > 0) {
-            options.forEach((a) => {
-                let _optionItem = {
-                    value: a.id,
-                    label: a.label,
-                };
+    // Set value when memoizedInputValue changes
+    useEffect(() => {
+        if (
+            JSON.stringify(selectValue) !== JSON.stringify(memoizedInputValue)
+        ) {
+            setSelectValue(memoizedInputValue);
+        }
+    }, [memoizedInputValue, selectValue]);
 
-                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 }
+            );
+
+            if (res && res.data) {
+                const newOption = {
+                    value: res.data.id,
+                    label: res.data.label || inputValue,
+                    description: res.data.description || 'Newly created item',
+                    ...res.data,
+                };
 
-                _options.push(_optionItem);
-            });
+                setSelectOptions((prevOptions) => [...prevOptions, newOption]);
+                setSelectValue((prevValues) =>
+                    multi ? [...prevValues, newOption] : [newOption]
+                );
 
-            setSelectOptions(_options);
+                onChange(
+                    multi ? [...selectValue, newOption] : newOption,
+                    { action: 'create-option' },
+                    settings.id
+                );
+            }
         }
-    }, [options]);
+    };
+
+    const SelectComponent = isCreatable ? CreatableSelect : Select;
 
     return (
-        <Select
-            closeMenuOnSelect={multi ? false : true}
+        <SelectComponent
+            closeMenuOnSelect={!multi}
             isClearable
             isSearchable
             isMulti={multi}
             filterOption={createFilter({ ignoreAccents: false })}
-            components={{ SelectList }}
+            components={{ Option: CustomOption }}
             options={selectOptions}
             onChange={(inputValue, action) => {
                 onChange(inputValue, action, settings.id);
@@ -69,8 +135,9 @@ function MultiSelect({
                             : '52px',
                 }),
             }}
-            value={inputValue}
-            placeholder={placeholder ? placeholder : 'Select...'}
+            value={selectValue}
+            onCreateOption={isCreatable ? handleCreate : undefined}
+            placeholder={placeholder || 'Select...'}
         />
     );
 }

package/src/components/crm/Navigation.jsx

@@ -1,45 +1,13 @@
 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';
@@ -294,47 +262,6 @@ 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')) {
@@ -375,15 +302,9 @@ function Navigation({
         return (
             <li className={navItemClasses}>
                 {n.url ? (
-                    <Link to={n.url}>
-                        <IconComponent strokeWidth={2} size={18} />
-                        {n.label}
-                    </Link>
+                    <Link to={n.url}>{n.label}</Link>
                 ) : (
-                    <span title={n.label}>
-                        <IconComponent strokeWidth={2} size={18} />
-                        {n.label}
-                    </span>
+                    <span title={n.label}>{n.label}</span>
                 )}
                 {renderChildren()}
             </li>

package/src/components/crm/QrCode.jsx

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

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

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

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

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

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

@@ -1,21 +1,22 @@
 .formItem {
     width: 50%;
-    padding: 0.5em;
     position: relative;
     box-sizing: border-box;
 
     .fi__label {
         position: relative;
+        display: flex;
+        align-items: center;
     }
 
     .fi__span {
         position: absolute;
         transition: all 200ms;
-        opacity: 0.8;
+        opacity: 1;
         left: 0;
-        padding: 19px 20px;
         transform-origin: top left;
         cursor: text;
+        padding: 0 1rem;
     }
 
     .fi__div {
@@ -23,14 +24,14 @@
         opacity: 0.8;
         left: 0;
         padding: 19px 13px;
-        border-radius: var(--br);
-        border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
+        border-radius: var(--radius);
+        border: 1px solid rgba(var(--paragraph-rgb), 0.15);
         box-shadow: none;
     }
 
     .fi__toggle {
         width: max-content;
-        padding: 0px 10px 0px 0;
+        padding: 0 10px 0 0;
         box-sizing: border-box;
         display: inline;
     }
@@ -43,45 +44,43 @@
     }
 }
 
-.fwItem {
-    flex-basis: 100%;
+.fwItem,
+.fwBuilderItem {
+    grid-column: 1 / -1;
+    width: 100%;
 }
 
-.lastItem {
-    .btn {
-        width: 100%;
-    }
+.lastItem .btn {
+    width: 100%;
 }
 
 .loginlogo {
     display: block;
     width: 100%;
-    max-width: 140px;
+    max-width: 200px;
     height: auto;
     margin: 0 auto;
     padding-bottom: 1rem;
 }
 
 .logincontainer {
+    width: 100%;
     min-height: 100vh;
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    align-content: center;
-    flex-wrap: wrap;
+    display: grid;
+    place-items: center;
+    padding: 1rem;
 }
 
 .login {
     width: 35rem;
-    height: auto;
     padding: 1rem;
     margin: 0;
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
 
     > .formItem {
-        padding: 0.25em 0;
+        padding: 0;
 
         small {
             position: absolute;
@@ -94,12 +93,11 @@
     }
 
     > .loginitem {
-        width: 100%;
+        grid-column: 1 / -1;
         padding: 0.25em 0;
 
         label {
             width: 100%;
-            padding-bottom: 0.25rem;
         }
 
         button {
@@ -108,27 +106,28 @@
     }
 }
 
-.forgotten {
-    span {
-        display: block;
-        text-align: center;
-        color: var(--paragraph-color);
-        padding: 1rem 0;
+.forgotten span {
+    display: block;
+    text-align: center;
+    color: var(--paragraph-color);
+    padding: 1rem 0;
 
-        a {
-            color: var(--highlight-color);
-            text-decoration: none;
-        }
+    a {
+        color: var(--secondary-color);
+        text-decoration: none;
     }
 }
 
 .lcontainer {
-    --sidebar-width: 35%;
     min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .lwrap {
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
 }
 
 .aside {
@@ -139,14 +138,6 @@
     width: var(--sidebar-width);
 }
 
-.fwItem {
-    flex-basis: 100%;
-}
-
-.lastItem .btn {
-    width: 100%;
-}
-
 .btn {
     width: max-content;
     display: inline-block;
@@ -154,51 +145,30 @@
     padding: 0.65rem 1rem;
     cursor: pointer;
     font-size: 1rem;
-    color: var(--tertiary-color);
+    color: var(--third-color);
     text-decoration: none;
     overflow: hidden;
     background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
+    border: 1px solid rgba(var(--primary-rgb), 1.1);
+    border-radius: var(--radius);
     outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1);
+
+    &:hover {
+        color: var(--bg-color);
+        background: var(--secondary-color);
+        border: 1px solid rgba(var(--secondary-rgb), 1.05);
+    }
 }
 
 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.75);
+    transform: translateY(-135%) translateX(10px) scale(0.9);
     opacity: 1;
-    padding: 0 4px;
-    background: var(--tertiary-color);
-    font-weight: 300;
-}
-
-@media (max-width: 1024px) {
-    body {
-        font-size: 85%;
-    }
-
-    .aside {
-        width: 100%;
-        transform: translateX(-2000px);
-        transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
-        will-change: transform;
-        z-index: 500;
-    }
-
-    .logincontainer {
-        min-height: 100vh;
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-content: center;
-        flex-wrap: wrap;
-    }
-
-    .login {
-        width: 95%;
-    }
+    padding: 0;
+    background: var(--bg-color);
+    font-weight: 400;
+    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
+    color: rgba(var(--paragraph-rgb), 0.65) !important;
 }