@visns-studio/visns-components 5.0.3 → 5.0.5

package/src/components/crm/Form.jsx

@@ -215,9 +215,9 @@ function Form({
         const handleSelectOption = () => {
             updateFormData({ [id]: inputValue });
 
-            // Update any matching form data properties
-            Object.keys(inputValue).forEach((key) => {
-                if (formData.hasOwnProperty(key)) {
+            // Update any matching form data properties except for the second item
+            Object.keys(inputValue).forEach((key, index) => {
+                if (index !== 1 && formData.hasOwnProperty(key)) {
                     updateFormData({ [key]: inputValue[key] });
                 }
             });
@@ -287,6 +287,7 @@ function Form({
         // Switch cases to handle different actions
         switch (action.action) {
             case 'select-option':
+            case 'create-option': // New case to handle create-option
                 handleSelectOption();
                 break;
             case 'clear':
@@ -584,44 +585,44 @@ function Form({
 
                 if (['create', 'update'].includes(formType)) {
                     fields.forEach((item) => {
+                        // Skip createOnly fields if formType is 'update'
                         if (formType === 'update' && item.createOnly) {
                             return;
                         }
 
+                        // Check if the item is required
                         if (item.required) {
-                            if (
-                                formData[item.id] === null ||
-                                formData[item.id] === ''
-                            ) {
+                            // Check if formData[item.id] is null, undefined, or an empty string
+                            if (!formData[item.id]) {
+                                // Check for required_check dependency
                                 if (
-                                    item.hasOwnProperty('required_check') &&
                                     item.required_check &&
                                     !formData[item.required_check]
                                 ) {
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 } else {
-                                    console.info('b', formData, item.id);
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 }
                             } else {
-                                _inputClass[item.id] = '';
+                                _inputClass[item.id] = ''; // Clear error class if valid
                             }
                         } else if (
-                            item.hasOwnProperty('required_rely') &&
                             item.required_rely &&
                             formData[item.required_rely] &&
-                            (formData[item.id] === null ||
-                                formData[item.id] === '')
+                            !formData[item.id]
                         ) {
+                            // Check if the dependent required field is empty when it should be filled
                             validation += `${item.label} is a required field.<br/>`;
                             _inputClass[item.id] = styles.inputError;
                         } else {
-                            _inputClass[item.id] = '';
+                            _inputClass[item.id] = ''; // Clear error class if not required
                         }
                     });
 
+                    console.info(_inputClass);
+
                     setInputClass(_inputClass);
                 }
 
@@ -1371,7 +1372,10 @@ function Form({
                 <div className={styles.modal}>
                     <div className={styles.modal__header}>
                         <h1>{formSettings[formType]?.title}</h1>
-                        <button className={styles.modal__close} onClick={closeModal}>
+                        <button
+                            className={styles.modal__close}
+                            onClick={closeModal}
+                        >
                             <CircleX strokeWidth={2} size={24} />
                         </button>
                     </div>

package/src/components/crm/MultiSelect.jsx

@@ -1,54 +1,109 @@
 import React, { useEffect, useState } from 'react';
+import CustomFetch from './Fetch';
 import SelectList from './SelectList';
-import Select, { createFilter } from 'react-select';
+import Select, { createFilter, components } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
 import styles from './styles/AsyncSelect.module.scss';
 
+// Custom Option component to add a second line of text
+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([]);
 
     useEffect(() => {
-        let _options = [];
+        const _options = Array.isArray(options)
+            ? options.map((a) => ({
+                  value: a.id,
+                  label: a.label || a.name || a.description || 'Unknown',
+                  description: a.description || '', // Include description field
+                  ...a,
+              }))
+            : [];
+        setSelectOptions(_options);
+    }, [options]);
 
-        if (options.length > 0) {
-            options.forEach((a) => {
-                let _optionItem = {
-                    value: a.id,
-                    label: a.label,
-                };
+    useEffect(() => {
+        const normalizeInputValue = (value) => {
+            // Ensure value is an array, wrapping single items if necessary
+            return Array.isArray(value) ? value : value ? [value] : [];
+        };
+
+        const _values = normalizeInputValue(inputValue).map((a) => ({
+            value: a.id,
+            label: a.label || a.name || a.description || 'Unknown',
+            description: a.description || '', // Include description field
+            ...a,
+        }));
 
-                Object.keys(a).forEach((b) => {
-                    if (b !== 'id') {
-                        _optionItem = {
-                            ..._optionItem,
-                            [b]: a[b],
-                        };
-                    }
-                });
+        setSelectValue(_values);
+    }, [inputValue]);
 
-                _options.push(_optionItem);
-            });
+    const handleCreate = async (inputValue) => {
+        if (creatableConfig.url && creatableConfig.method) {
+            const res = await CustomFetch(
+                creatableConfig.url,
+                creatableConfig.method,
+                { label: inputValue }
+            );
 
-            setSelectOptions(_options);
+            if (res && res.data) {
+                const newOption = {
+                    value: res.data.id,
+                    label: res.data.label || inputValue,
+                    description: res.data.description || 'Newly created item', // Default description for new items
+                    ...res.data,
+                };
+
+                // Update options and trigger onChange with the new option
+                setSelectOptions((prevOptions) => [...prevOptions, newOption]);
+                setSelectValue((prevValues) =>
+                    multi ? [...prevValues, newOption] : [newOption]
+                );
+
+                // Trigger onChange with the new option
+                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 }} // Use the custom Option component
             options={selectOptions}
             onChange={(inputValue, action) => {
                 onChange(inputValue, action, settings.id);
@@ -69,7 +124,8 @@ function MultiSelect({
                             : '52px',
                 }),
             }}
-            value={inputValue}
+            value={selectValue}
+            onCreateOption={isCreatable ? handleCreate : undefined} // Only add if creatable
             placeholder={placeholder ? placeholder : 'Select...'}
         />
     );

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

@@ -12,7 +12,7 @@
     .fi__span {
         position: absolute;
         transition: all 200ms;
-        opacity: 0.8;
+        opacity: 1;
         left: 0;
         transform-origin: top left;
         cursor: text;
@@ -164,10 +164,11 @@
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
 select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-110%) translateX(10px) scale(0.75);
+    transform: translateY(-135%) translateX(10px) scale(0.9);
     opacity: 1;
     padding: 0;
     background: var(--bg-color);
-    font-weight: 300;
+    font-weight: 400;
     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.75);
+    transform: translateY(-40%) translateX(10px) scale(0.9);
     opacity: 1;
-    padding: 0 4px;
+    padding: 0 0.25rem;
     background: var(--tertiary-color);
-    font-weight: 300;
+    font-weight: 400;
     border-radius: var(--br);
 }
 
@@ -111,30 +111,72 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .grid__subcontent {
-    flex: 0 1 85%;
-    background: white;
+    flex: 0 1 80%;
+    background: var(--tertiary-color);
     border-radius: var(--br);
-    border: 1px solid var(--border-color);
+    border: 1px solid rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
-    padding: 0;
-    margin: 0.5rem 0;
+    padding: 2px;
+    margin: 8px 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: var(--border-color);
+    background: rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
+    border-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
     color: var(--paragraph-color);
-    position: relative;
+}
+
+.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);
 }
 
 .formcontainer {
@@ -277,7 +319,7 @@ select:not(:placeholder-shown) + .fi__span {
         a {
             text-decoration: none;
             color: var(--secondary-color);
-            font-weight: 300;
+            font-weight: 400;
         }
 
         svg {

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

@@ -10,6 +10,7 @@ import Dropzone from 'react-dropzone';
 import { confirmAlert } from 'react-confirm-alert';
 import truncate from 'truncate';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { saveAs } from 'file-saver';
 import { toast } from 'react-toastify';
 import {
     CircleCheck,
@@ -75,6 +76,8 @@ function GenericDetail({
             if (activeTab) {
                 const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
 
+                console.info(tabs);
+
                 if (type === 'view') {
                     setActiveStage(stage.id);
                 } else {
@@ -95,6 +98,32 @@ function GenericDetail({
 
                         if (res.data.error === '') {
                             handleReload();
+                            toast.success('Stage updated successfully');
+                        } else {
+                            toast.error(res.data.error);
+                        }
+                    } else if (
+                        stages &&
+                        stages.url &&
+                        stages.url !== '' &&
+                        stages.key &&
+                        stages.key !== '' &&
+                        stages.urlParam &&
+                        stages.urlParam !== ''
+                    ) {
+                        const url = `${stages.url}/${routeParams[urlParam]}`;
+
+                        const res = await CustomFetch(
+                            url,
+                            stages.method || 'POST',
+                            {
+                                [stages.key]: stage.id,
+                            }
+                        );
+
+                        if (res.data.error === '') {
+                            handleReload();
+                            toast.success('Stage updated successfully');
                         } else {
                             toast.error(res.data.error);
                         }
@@ -436,10 +465,32 @@ function GenericDetail({
                 if (activeTabConfig && activeTabConfig.type) {
                     switch (activeTabConfig.type) {
                         case 'dropzone':
-                            const downloadFile = (id) => {
-                                window.open(
-                                    `/ajax/files/download/${id}/${activeTabConfig.folder}`
-                                );
+                            const downloadFile = (file) => {
+                                const { id, file_url, file_name } = file;
+
+                                // If file_url exists, use it for the download, else use the id to download
+                                const urlToDownload =
+                                    file_url || `/ajax/files/download/${id}`;
+
+                                // Use fetch to retrieve the file as a blob
+                                fetch(urlToDownload, {
+                                    method: 'GET',
+                                    headers: {
+                                        'Content-Type':
+                                            'application/octet-stream', // Specify content type as binary
+                                    },
+                                })
+                                    .then((response) => response.blob()) // Convert response to Blob
+                                    .then((blob) => {
+                                        // Use FileSaver to download the file with the specified name
+                                        saveAs(blob, file_name);
+                                    })
+                                    .catch((error) => {
+                                        console.error(
+                                            'Error downloading the file:',
+                                            error
+                                        );
+                                    });
                             };
 
                             const deleteFile = (e, id, name) => {
@@ -521,9 +572,13 @@ function GenericDetail({
                                                         key: response.key,
                                                         bucket: response.bucket,
                                                         filename: file.name,
+                                                        file_name: file.name,
                                                         filesize: file.size,
+                                                        file_size: file.size,
                                                         extension:
                                                             response.extension,
+                                                        file_extension:
+                                                            response.extension,
                                                         file_relationship:
                                                             activeTabConfig.file_relationship,
                                                     };
@@ -533,9 +588,30 @@ function GenericDetail({
                                                         'PUT',
                                                         requestBody,
                                                         (res) => {
-                                                            setFiles(
-                                                                res.data.files
-                                                            );
+                                                            if (
+                                                                activeTabConfig.file_relationship &&
+                                                                res.data[
+                                                                    activeTabConfig
+                                                                        .file_relationship
+                                                                ]
+                                                            ) {
+                                                                setFiles(
+                                                                    res.data[
+                                                                        activeTabConfig
+                                                                            .file_relationship
+                                                                    ]
+                                                                );
+                                                            } else {
+                                                                if (
+                                                                    res?.data
+                                                                        ?.files
+                                                                ) {
+                                                                    setFiles(
+                                                                        res.data
+                                                                            .files
+                                                                    );
+                                                                }
+                                                            }
                                                         }
                                                     );
                                                 });
@@ -635,7 +711,7 @@ function GenericDetail({
                                                             <li
                                                                 onClick={() => {
                                                                     downloadFile(
-                                                                        a.id
+                                                                        a
                                                                     );
                                                                 }}
                                                                 key={'tf-' + b}
@@ -1377,8 +1453,17 @@ function GenericDetail({
 
                     tabs.forEach((tab) => {
                         if (tab.type && tab.type === 'dropzone') {
-                            if (res.files) {
-                                setFiles(res.files);
+                            if (
+                                tab.file_relationship &&
+                                tab.file_relationship !== ''
+                            ) {
+                                if (res[tab.file_relationship]) {
+                                    setFiles(res[tab.file_relationship]);
+                                }
+                            } else {
+                                if (res.files) {
+                                    setFiles(res.files);
+                                }
                             }
                         }
                     });
@@ -1454,10 +1539,6 @@ function GenericDetail({
                             <div className={styles.oppstatus}>
                                 <ul className={styles.opppath}>
                                     {stages.data.map((stage) => {
-                                        if (!stage.id) {
-                                            return null; // Skip rendering this stage
-                                        }
-
                                         const isStageComplete =
                                             data[stages.key] >= stage.id;