@visns-studio/visns-components 4.6.11 → 4.6.13

package/components/crm/DataGrid.jsx

@@ -756,20 +756,25 @@ const DataGrid = forwardRef(
         };
 
         const sortTrigger = () => {
-            const url = form.url.replace('/ajax', '');
+            let baseUrl = form.url.replace('/ajax', '');
+            let sortUrl = paramValue
+                ? `${baseUrl}/${paramValue}/sort`
+                : `${baseUrl}/sort`;
+
+            if (form.sort?.url) {
+                sortUrl = form.sort.url;
+            }
 
             const newState = {
-                form: form,
+                form,
                 page: {
                     data: pageData,
                     setting: pageSetting,
                 },
-                paramValue: paramValue,
+                paramValue,
             };
 
-            navigate(`${url}/${paramValue}/sort`, {
-                state: newState,
-            });
+            navigate(sortUrl, { state: newState });
         };
 
         const renderCreateButton = () => {

package/components/crm/Form.jsx

@@ -545,7 +545,6 @@ function Form({
                 e.preventDefault();
 
                 const { type } = e.target.dataset;
-
                 let fields = formSettings.fields;
                 let _inputClass = inputClass;
                 let validation = '';
@@ -556,86 +555,39 @@ function Form({
                             return;
                         }
 
-                        if (item.required === true) {
-                            if (
-                                formData[item.id] === '' ||
-                                formData[item.id] === undefined
-                            ) {
+                        if (item.required) {
+                            if (!formData[item.id]) {
                                 if (
                                     item.hasOwnProperty('required_check') &&
-                                    item.required_check !== ''
+                                    item.required_check &&
+                                    !formData[item.required_check]
                                 ) {
-                                    if (formData[item.required_check] === '') {
-                                        if (
-                                            !validation.includes(
-                                                item.label +
-                                                    ' is a required field.<br/>'
-                                            )
-                                        ) {
-                                            validation +=
-                                                item.label +
-                                                ' is a required field.<br/>';
-                                        }
-                                        _inputClass[item.id] =
-                                            styles.inputError;
-                                    }
+                                    validation += `${item.label} is a required field.<br/>`;
+                                    _inputClass[item.id] = styles.inputError;
                                 } else {
-                                    if (
-                                        !validation.includes(
-                                            item.label +
-                                                ' is a required field.<br/>'
-                                        )
-                                    ) {
-                                        validation +=
-                                            item.label +
-                                            ' is a required field.<br/>';
-                                    }
+                                    validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 }
                             } else {
-                                if (
-                                    item.hasOwnProperty('required_check') &&
-                                    item.required_check !== ''
-                                ) {
-                                    _inputClass[item.required_check] = '';
-                                }
                                 _inputClass[item.id] = '';
                             }
+                        } else if (
+                            item.hasOwnProperty('required_rely') &&
+                            item.required_rely &&
+                            formData[item.required_rely] &&
+                            !formData[item.id]
+                        ) {
+                            validation += `${item.label} is a required field.<br/>`;
+                            _inputClass[item.id] = styles.inputError;
                         } else {
-                            if (
-                                item.hasOwnProperty('required_rely') &&
-                                item.required_rely !== ''
-                            ) {
-                                if (formData[item.required_rely] === '') {
-                                    _inputClass[item.id] = '';
-                                } else {
-                                    if (formData[item.id] === '') {
-                                        if (
-                                            !validation.includes(
-                                                item.label +
-                                                    ' is a required field.<br/>'
-                                            )
-                                        ) {
-                                            validation +=
-                                                item.label +
-                                                ' is a required field.<br/>';
-                                        }
-                                        _inputClass[item.id] =
-                                            styles.inputError;
-                                    } else {
-                                        _inputClass[item.id] = '';
-                                    }
-                                }
-                            } else {
-                                _inputClass[item.id] = '';
-                            }
+                            _inputClass[item.id] = '';
                         }
                     });
 
                     setInputClass(_inputClass);
                 }
 
-                if (validation !== '') {
+                if (validation) {
                     toast.error(<div>{parse(validation)}</div>);
                 } else {
                     let url = formSettings.url;
@@ -652,32 +604,26 @@ function Form({
                     } else {
                         switch (formType) {
                             case 'create':
-                                if (
-                                    formSettings.hasOwnProperty('json') &&
-                                    formSettings.json === true
-                                ) {
+                                if (formSettings.json) {
                                     url += '/jsonStore';
                                 }
                                 break;
                             case 'update':
                             case 'delete':
-                                if (
-                                    formSettings.hasOwnProperty('json') &&
-                                    formSettings.json === true
-                                ) {
-                                    if (formType === 'update') {
-                                        url += `/jsonUpdate`;
-                                    } else {
-                                        url += `/jsonDelete/${
-                                            formData[formSettings.primaryKey]
-                                        }`;
-                                    }
+                                if (formSettings.json) {
+                                    url +=
+                                        formType === 'update'
+                                            ? '/jsonUpdate'
+                                            : `/jsonDelete/${
+                                                  formData[
+                                                      formSettings.primaryKey
+                                                  ]
+                                              }`;
                                 } else {
                                     url += `/${
                                         formData[formSettings.primaryKey]
                                     }`;
                                 }
-
                                 method =
                                     formType === 'update' ? 'PUT' : 'DELETE';
                                 break;
@@ -686,46 +632,37 @@ function Form({
 
                     if (!_.isEmpty(formData)) {
                         Object.keys(formData).forEach((item) => {
-                            if (
-                                formData[item] !== undefined &&
-                                (item === 'file' ||
-                                    (formData[item] instanceof File &&
-                                        formData[item] !== null))
-                            ) {
+                            if (formData[item] instanceof File) {
                                 fileUpload = true;
                                 fileKey = item;
                             }
                         });
                     }
 
-                    if (fileUpload === true && formData[fileKey] !== null) {
+                    if (fileUpload && formData[fileKey]) {
                         if (Array.isArray(formData[fileKey])) {
-                            const files = formData[fileKey];
-
-                            const uploadPromises = files.map(async (file) => {
-                                const fileRes = await Vapor.store(file, {
-                                    progress: (progress) => {
-                                        setUploadProgress(progress * 100);
-                                    },
-                                });
-
-                                return {
-                                    uuid: fileRes.uuid,
-                                    key: fileRes.key,
-                                    bucket: fileRes.bucket,
-                                    filename: file.name,
-                                    filesize: file.size,
-                                    extension: fileRes.extension,
-                                    file_relationship: fileKey,
-                                };
-                            });
-
-                            const uploadedFiles = await Promise.all(
+                            const uploadPromises = formData[fileKey].map(
+                                async (file) => {
+                                    const fileRes = await Vapor.store(file, {
+                                        progress: (progress) => {
+                                            setUploadProgress(progress * 100);
+                                        },
+                                    });
+                                    return {
+                                        uuid: fileRes.uuid,
+                                        key: fileRes.key,
+                                        bucket: fileRes.bucket,
+                                        filename: file.name,
+                                        filesize: file.size,
+                                        extension: fileRes.extension,
+                                        file_relationship: fileKey,
+                                    };
+                                }
+                            );
+                            formData['uploadedFiles'] = await Promise.all(
                                 uploadPromises
                             );
-
-                            formData['uploadedFiles'] = uploadedFiles;
-                        } else if (formData[fileKey] instanceof File) {
+                        } else {
                             const fileRes = await Vapor.store(
                                 formData[fileKey],
                                 {
@@ -734,7 +671,6 @@ function Form({
                                     },
                                 }
                             );
-
                             formData['uuid'] = fileRes.uuid;
                             formData['key'] = fileRes.key;
                             formData['bucket'] = fileRes.bucket;
@@ -745,60 +681,40 @@ function Form({
                         }
                     }
 
-                    const fieldMap = formSettings.fields.reduce(
-                        (acc, field) => {
-                            acc[field.id] = field;
-                            return acc;
-                        },
-                        {}
-                    );
-
-                    let payload = { ...formData };
-                    Object.keys(formData).forEach((key) => {
-                        const value = formData[key];
-                        const field = fieldMap[key];
-
-                        if (field && field.type === 'multi-dropdown-ajax') {
-                            if (
-                                typeof value === 'object' &&
-                                value !== null &&
-                                'value' in value &&
-                                'label' in value
-                            ) {
-                                payload[key] = value.value;
-                            }
+                    // Transform keys with dots into nested objects
+                    const payload = Object.keys(formData).reduce((acc, key) => {
+                        if (key.includes('.')) {
+                            const [root, sub] = key.split('.');
+                            if (!acc[root]) acc[root] = {};
+                            acc[root][sub] = formData[key];
+                        } else {
+                            acc[key] = formData[key];
                         }
-                    });
+                        return acc;
+                    }, {});
+
+                    console.info(payload);
 
                     const res = await CustomFetch(url, method, payload);
 
                     if (res.data.error === '') {
-                        if (fetchTable) {
-                            fetchTable();
-                        }
-
+                        if (fetchTable) fetchTable();
                         if (closeModal) {
                             closeModal();
-
                             if (type === 'saveAnother') {
                                 fetchData();
                                 modalOpen('create', 0);
                             }
                         }
-
                         toast.success(
-                            formSettings?.save?.toast?.success
-                                ? formSettings.save.toast.success
-                                : 'Entry successfully saved into the system.'
+                            formSettings?.save?.toast?.success ||
+                                'Entry successfully saved into the system.'
                         );
 
-                        if (
-                            formSettings.hasOwnProperty('redirect') &&
-                            formSettings.redirect &&
-                            res.data.data &&
-                            res.data.data.id
-                        ) {
-                            navigate(formSettings.redirect + res.data.data.id);
+                        if (formSettings.redirect && res.data.data?.id) {
+                            navigate(
+                                `${formSettings.redirect}${res.data.data.id}`
+                            );
                         }
 
                         if (res.data.redirect) {
@@ -806,30 +722,26 @@ function Form({
                         }
 
                         if (
-                            formSettings?.save?.return?.type &&
+                            formSettings?.save?.return?.type === 'table' &&
                             formSettings?.save?.return?.param
                         ) {
-                            if (formSettings.save.return.type === 'table') {
-                                if (
-                                    result &&
-                                    result[formSettings.save.return.param]
-                                        .length > 0
-                                ) {
-                                    const td = parseTableData(
-                                        result[formSettings.save.return.param]
-                                    );
-
-                                    setTableData((prevState) => ({
-                                        ...prevState,
-                                        ...td,
-                                    }));
-                                } else {
-                                    setTableData((prevState) => ({
-                                        ...prevState,
-                                        columns: [],
-                                        dataSource: [],
-                                    }));
-                                }
+                            if (
+                                res.data[formSettings.save.return.param]
+                                    ?.length > 0
+                            ) {
+                                const td = parseTableData(
+                                    res.data[formSettings.save.return.param]
+                                );
+                                setTableData((prevState) => ({
+                                    ...prevState,
+                                    ...td,
+                                }));
+                            } else {
+                                setTableData((prevState) => ({
+                                    ...prevState,
+                                    columns: [],
+                                    dataSource: [],
+                                }));
                             }
                         }
                     }

package/components/crm/generic/GenericSort.jsx

@@ -1,12 +1,22 @@
 import React, { useState, useEffect } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { arrayMoveImmutable } from 'array-move';
 import { toast } from 'react-toastify';
-import { CircleChevronRight } from 'akar-icons';
 import CustomFetch from '../../crm/Fetch';
-import SortableList from '../../cms/sorting/List';
+import SortableList from '../sorting/List';
+import Breadcrumb from '../Breadcrumb';
 import styles from './styles/GenericSort.module.css';
 
+// Utility function to convert camelCase to space-separated words with uppercase first letters
+function camelCaseToUcFirst(str) {
+    return str
+        .replace(/([A-Z])/g, ' $1') // Add a space before each uppercase letter
+        .replace(/^./, function (str) {
+            return str.toUpperCase();
+        }) // Capitalize the first letter
+        .trim(); // Remove leading and trailing whitespace
+}
+
 const ChildSort = ({ item, url }) => {
     const [data, setData] = useState(item.child);
 
@@ -17,13 +27,14 @@ const ChildSort = ({ item, url }) => {
     useEffect(() => {
         if (data.length > 0) {
             CustomFetch(
-                url + '/sort_update',
+                `${url}/sort_update`,
                 'POST',
                 {
                     list: data,
                 },
                 function (result) {
                     if (result.error === '') {
+                        toast.success('Sort updated successfully');
                     } else {
                         toast.error(String(result.error));
                     }
@@ -47,15 +58,18 @@ const ChildSort = ({ item, url }) => {
     );
 };
 
-const GenericSort = ({ category = false }) => {
+const GenericSort = ({ category = false, layout = 'full' }) => {
     const location = useLocation();
+    const routeParams = useParams();
     const {
         form,
-        page: { data, setting },
+        page = {}, // Provide a default empty object for page
         paramValue,
-    } = location.state;
+    } = location.state || {}; // Safely access location.state
+
     const [sortData, setSortData] = useState([]);
-    const url = form.url;
+    const url = form?.url;
+    const data = page?.data || {}; // Safely access data from page, default to an empty object
 
     const onSortEnd = ({ oldIndex, newIndex }) => {
         setSortData((prevItem) =>
@@ -68,7 +82,7 @@ const GenericSort = ({ category = false }) => {
             let fetchUrl = url;
             let payload = {};
 
-            if (form.json) {
+            if (form?.json) {
                 fetchUrl = fetchUrl + '/jsonSortList';
                 payload.id = paramValue;
             } else {
@@ -76,7 +90,6 @@ const GenericSort = ({ category = false }) => {
             }
 
             const res = await CustomFetch(fetchUrl, 'POST', payload);
-
             setSortData(res.data);
         } catch (err) {
             console.log(err);
@@ -90,7 +103,7 @@ const GenericSort = ({ category = false }) => {
                 list: sortData,
             };
 
-            if (form.json) {
+            if (form?.json) {
                 fetchUrl = fetchUrl + '/jsonSortUpdate';
                 payload.id = paramValue;
             } else {
@@ -123,37 +136,23 @@ const GenericSort = ({ category = false }) => {
         <>
             <div className={styles.grid}>
                 <div className={styles.grid__row}>
-                    <div className={`${styles.grid__full} ${styles.crmtitle}`}>
-                        <h1>
-                            <Link
-                                to={
-                                    setting && setting.previousUrl
-                                        ? setting.previousUrl
-                                        : null
-                                }
-                            >
-                                {setting && setting.title
-                                    ? setting.title
-                                    : null}
-                            </Link>{' '}
-                            {data && data[setting.titleKey] ? (
-                                <Link
-                                    to={
-                                        setting && setting.previousUrl
-                                            ? `${setting.previousUrl}/${paramValue}`
-                                            : null
-                                    }
-                                >
-                                    <CircleChevronRight
-                                        strokeWidth={2}
-                                        size={18}
-                                    />{' '}
-                                    {data[setting.titleKey]}{' '}
-                                </Link>
-                            ) : null}
-                            <CircleChevronRight strokeWidth={2} size={18} />{' '}
-                            {form?.sort?.title}
-                        </h1>
+                    <div
+                        className={`${styles.grid__full} ${
+                            layout === 'full'
+                                ? styles.crmtitle
+                                : styles.crmtitleSimple
+                        }`}
+                    >
+                        <Breadcrumb
+                            data={{
+                                label: camelCaseToUcFirst(routeParams.dataId),
+                            }} // Use utility function here
+                            page={{
+                                parentTitle: 'Settings',
+                                parentUrl: '/settings',
+                                titleKey: 'label',
+                            }}
+                        />
                     </div>
                 </div>
             </div>
@@ -165,7 +164,7 @@ const GenericSort = ({ category = false }) => {
                                 items={sortData}
                                 onSortEnd={onSortEnd}
                                 axis="xy"
-                                helperClass="dragitem"
+                                helperClass={styles.dragitem}
                                 transitionDuration={250}
                                 useDragHandle
                             />

package/components/crm/generic/styles/GenericSort.module.css

@@ -34,7 +34,7 @@
     min-height: auto;
     padding: 5px 20px;
     margin: 0;
-    background: var(--primary-color);
+    background: var(--tertiary-color);
     border-radius: var(--br);
     border: 1px solid rgba(var(--item-color-rgb), 1.15);
     position: relative;
@@ -42,7 +42,6 @@
     align-items: center;
 
     h1 {
-        color: var(--background-color);
         font-weight: 700;
         font-size: 1.15em;
         margin: 0;
@@ -53,11 +52,11 @@
 
         a {
             text-decoration: none;
-            color: var(--secondary-color);
+            color: rgba(var(--secondary-color-rgb), 1.1);
         }
 
         svg {
-            color: rgba(var(--tertiary-color-rgb), 0.5);
+            color: rgba(var(--primary-color-rgb), 0.25);
             position: relative;
             top: 0;
             margin: 0 0.5rem;
@@ -65,3 +64,60 @@
         }
     }
 }
+
+.dragitem {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    border-radius: 5px;
+    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+    box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.25);
+    padding: 1.25rem;
+    box-sizing: border-box;
+    cursor: grab;
+    list-style: none;
+    color: var(--paragraph-color);
+
+    svg {
+        width: 100%;
+        max-width: 18px;
+        position: absolute;
+        left: 5px;
+        top: 5px;
+    }
+
+    .pencil-edit {
+        width: 100%;
+        max-width: 18px;
+        position: absolute;
+        left: 5px;
+        top: 30px;
+    }
+
+    .trash-delete {
+        width: 100%;
+        max-width: 18px;
+        position: absolute;
+        left: 5px;
+        top: 60px;
+    }
+
+    .sortimg {
+        width: 50px;
+        position: relative;
+        height: 50px;
+        margin-left: auto;
+        border-radius: 5px;
+        overflow: hidden;
+
+        img {
+            display: block;
+            object-fit: cover;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+    }
+}

package/components/crm/sorting/Item.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { SortableElement, sortableHandle } from 'react-sortable-hoc';
+import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+
+import styles from './styles/Item.module.css';
+
+const DragHandle = sortableHandle(() => (
+    <ChevronVertical className="drag-handle" strokeWidth={1} size={26} />
+));
+
+// Utility function to truncate text
+const truncateText = (text, maxLength) => {
+    if (text && text.length > maxLength) {
+        return `${text.substring(0, maxLength)}...`;
+    }
+    return text;
+};
+
+const SortableItem = ({
+    containerIndex,
+    handleClick,
+    handleEdit,
+    handleDelete,
+    showImage,
+    value,
+}) => {
+    const renderImage = (d) => {
+        let htmlContainer = '';
+
+        if (showImage) {
+            const imageUrl = d.image_url || d.file_url;
+            htmlContainer = imageUrl ? (
+                <div className={styles.sortimg}>
+                    <img src={imageUrl} alt="" />
+                </div>
+            ) : (
+                <div className={styles.sortimg}>
+                    {/* Placeholder image */}
+                    <img
+                        src="data:image/png;base64,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"
+                        alt="Placeholder"
+                    />
+                </div>
+            );
+        }
+
+        return htmlContainer;
+    };
+
+    const renderEditButton = () => {
+        if (!handleEdit) return null;
+
+        if (showImage) {
+            if (
+                value.hasOwnProperty('file_title') &&
+                value.hasOwnProperty('file_description')
+            ) {
+                return <EditButton />;
+            }
+            return null;
+        }
+
+        return <EditButton />;
+    };
+
+    const EditButton = () => (
+        <Pencil
+            className={styles['pencil-edit']}
+            strokeWidth={1}
+            size={26}
+            onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleEdit(value);
+            }}
+        />
+    );
+
+    return (
+        <li
+            onClick={(e) => {
+                e.preventDefault();
+                if (handleClick) {
+                    handleClick(containerIndex);
+                }
+            }}
+        >
+            <DragHandle />
+            {truncateText(
+                value.label || value.file_title || value.file_name,
+                30
+            )}
+
+            {renderImage(value)}
+
+            {renderEditButton()}
+
+            {handleDelete && (
+                <TrashCan
+                    className={styles['trash-delete']}
+                    strokeWidth={1}
+                    size={26}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleDelete(
+                            value.id || containerIndex,
+                            value.label || value.file_name
+                        );
+                    }}
+                />
+            )}
+        </li>
+    );
+};
+
+export default SortableElement(SortableItem);

package/components/crm/sorting/List.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import VisnsSortableItem from './Item';
+import { SortableContainer } from 'react-sortable-hoc';
+
+import styles from './styles/List.module.css';
+
+const SortableList = ({
+    handleClick,
+    handleDelete,
+    handleEdit,
+    items,
+    showImage,
+}) => {
+    return (
+        <ul className={styles.sortlist}>
+            {items.map((value, index) => (
+                <VisnsSortableItem
+                    key={`item-${index}`}
+                    containerIndex={index}
+                    index={index}
+                    handleClick={handleClick}
+                    handleDelete={handleDelete}
+                    handleEdit={handleEdit}
+                    showImage={showImage}
+                    value={value}
+                />
+            ))}
+        </ul>
+    );
+};
+
+export default SortableContainer(SortableList);

package/components/crm/sorting/styles/Item.module.css

@@ -0,0 +1,68 @@
+.sortlist {
+    width: 100%;
+    display: grid;
+    grid-gap: 0.5rem;
+    grid-template-columns: repeat(4, 1fr);
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    li {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        border-radius: 5px;
+        border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+        box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
+        padding: 1.25rem;
+        box-sizing: border-box;
+        cursor: pointer;
+        list-style: none;
+        position: relative;
+        color: var(--paragraph-color);
+        user-select: none;
+
+        svg {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 5px;
+        }
+
+        .pencil-edit {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 30px;
+        }
+
+        .trash-delete {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 60px;
+        }
+    }
+
+    .sortimg {
+        width: 50px;
+        position: relative;
+        height: 50px;
+        margin-left: auto;
+        border-radius: 5px;
+        overflow: hidden;
+
+        img {
+            display: block;
+            object-fit: cover;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+    }
+}

package/components/crm/sorting/styles/List.module.css

@@ -0,0 +1,68 @@
+.sortlist {
+    width: 100%;
+    display: grid;
+    grid-gap: 0.5rem;
+    grid-template-columns: repeat(4, 1fr);
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    li {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        border-radius: 5px;
+        border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+        box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
+        padding: 1.25rem;
+        box-sizing: border-box;
+        cursor: pointer;
+        list-style: none;
+        position: relative;
+        color: var(--paragraph-color);
+        user-select: none;
+
+        svg {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 5px;
+        }
+
+        .pencil-edit {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 30px;
+        }
+
+        .trash-delete {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 60px;
+        }
+    }
+
+    .sortimg {
+        width: 50px;
+        position: relative;
+        height: 50px;
+        margin-left: auto;
+        border-radius: 5px;
+        overflow: hidden;
+
+        img {
+            display: block;
+            object-fit: cover;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+    }
+}

package/components/crm/styles/Field.module.css

@@ -160,7 +160,7 @@ select:not(:placeholder-shown) + .fi__span {
     ):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):hover {
-    border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
+    border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
     transition: border 0.15s linear;
 }
 
@@ -172,7 +172,7 @@ select:not(:placeholder-shown) + .fi__span {
     ):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):focus {
-    border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
+    border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
 }
 
 input[type='file'] {

package/package.json

@@ -59,7 +59,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.6.11",
+    "version": "4.6.13",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {