@visns-studio/visns-components 4.7.1 → 4.7.3

package/src/components/crm/Field.jsx

@@ -0,0 +1,1557 @@
+import '../styles/global.css';
+
+import React, { useEffect, useRef, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import _ from 'lodash';
+import Toggle from 'react-toggle';
+import moment from 'moment';
+import parse from 'html-react-parser';
+import Popup from 'reactjs-popup';
+import { BlockPicker } from 'react-color';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { NumericFormat, PatternFormat } from 'react-number-format';
+import { Editor } from '@tinymce/tinymce-react';
+import { CirclePlus, CloudDownload, Copy, TrashCan } from 'akar-icons';
+import { toast } from 'react-toastify';
+import styles from './styles/Field.module.scss';
+
+import CustomFetch from './Fetch';
+import Form from './Form';
+import MultiSelect from './MultiSelect';
+import Select from './Select';
+import VisnsAsyncSelect from './AsyncSelect';
+import VisnsAutocomplete from './Autocomplete';
+import VisnsDropZone from '../cms/DropZone';
+
+import 'react-toggle/style.css';
+import 'react-datepicker/dist/react-datepicker.css';
+
+function Field({
+    api,
+    autocompleteCallback,
+    childDropdownCallback,
+    fetchData,
+    formData,
+    inputValue,
+    inputClass,
+    mapbox,
+    onChange,
+    onChangeCheckbox,
+    onChangeColour,
+    onChangeDate,
+    onChangeNumberFormat,
+    onChangeSelect,
+    onChangeSignature,
+    onChangeRicheditor,
+    onChangeTableRadio,
+    onChangeAddTableTextRow,
+    onChangeTableText,
+    onChangeToggle,
+    onFileDownload,
+    setFormData,
+    settings,
+    style,
+    userProfile = null,
+}) {
+    const editorRef = useRef(null);
+    const fileImageInputRef = useRef(null);
+    const [colorPickerShow, setColorPickerShow] = useState(false);
+    const [counter, setCounter] = useState(0);
+    const [dataOptions, setDataOptions] = useState([]);
+    const [formItemStyle, setFormItemStyle] = useState({});
+    const [formItemClass, setFormItemClass] = useState('');
+    const [options, setOptions] = useState([]);
+
+    const cover = {
+        position: 'fixed',
+        top: '0px',
+        right: '0px',
+        bottom: '0px',
+        left: '0px',
+    };
+    const popover = {
+        position: 'absolute',
+        zIndex: '2',
+        left: '20px',
+        marginTop: '6px',
+    };
+
+    useEffect(() => {
+        const fetchOptions = () => {
+            let filter = {};
+            if (settings.where?.length > 0) {
+                filter = {
+                    where: settings.where,
+                };
+            }
+
+            if (settings.fields?.length > 0) {
+                filter.fields = settings.fields;
+            }
+
+            if (
+                settings.order &&
+                settings.order.sortBy &&
+                settings.order.sort
+            ) {
+                filter.sortBy = settings.order.sortBy;
+                filter.sort = settings.order.sort;
+            }
+
+            CustomFetch(settings.url, 'POST', filter, function (result) {
+                setOptions(result.data);
+
+                let dataArray = [];
+
+                result.data.forEach((a) => {
+                    let _tempObject = a;
+
+                    if (!_.isEmpty(_tempObject)) {
+                        let modifiedObject = {};
+
+                        Object.keys(_tempObject).forEach(function (c) {
+                            if (c !== 'id' && c !== 'label') {
+                                modifiedObject['data-' + c] = _tempObject[c];
+                            }
+                        });
+
+                        dataArray.push(modifiedObject);
+                    }
+                });
+
+                if (dataArray.length > 0) {
+                    setDataOptions(dataArray);
+                }
+            });
+        };
+
+        switch (settings.type) {
+            case 'hidden':
+                setFormItemStyle({
+                    display: 'none',
+                });
+                break;
+            case 'dropdown-ajax':
+            case 'multi-dropdown-ajax':
+            case 'radio-ajax':
+                fetchOptions();
+                break;
+            default:
+                break;
+        }
+
+        switch (settings.size) {
+            case 'full':
+                setFormItemClass(`${styles.formItem} ${styles.fwItem}`);
+                break;
+            case 'quarter':
+                setFormItemClass(`${styles.formItem} ${styles.qtrItem}`);
+                break;
+            default:
+                setFormItemClass(`${styles.formItem}`);
+                break;
+        }
+    }, [settings, counter]);
+
+    useEffect(() => {
+        const fetchChildDropdownData = () => {
+            let filter = {};
+
+            if (settings.child && inputValue) {
+                let _inputValue = inputValue.value
+                    ? inputValue.value
+                    : inputValue;
+
+                if (_inputValue > 0) {
+                    if (Array.isArray(settings.child)) {
+                        settings.child.forEach((a) => {
+                            filter = {
+                                where: [
+                                    {
+                                        id: settings.id,
+                                        value: _inputValue,
+                                    },
+                                ],
+                            };
+
+                            if (a.fields) {
+                                filter.fields = a.fields;
+                            }
+
+                            if (a.orderBy) {
+                                filter.orderBy = a.orderBy;
+                            }
+
+                            CustomFetch(
+                                a.url,
+                                'POST',
+                                filter,
+                                function (result) {
+                                    childDropdownCallback({
+                                        id: a.id,
+                                        data: result.data,
+                                    });
+                                }
+                            );
+                        });
+                    } else {
+                        filter = {
+                            where: [
+                                {
+                                    id: settings.id,
+                                    value: _inputValue,
+                                },
+                            ],
+                        };
+
+                        if (settings.fields) {
+                            filter.fields = settings.fields;
+                        }
+
+                        if (settings.orderBy) {
+                            filter.orderBy = settings.orderBy;
+                        }
+
+                        CustomFetch(
+                            settings.child.url,
+                            'POST',
+                            filter,
+                            function (result) {
+                                childDropdownCallback({
+                                    id: settings.child.id,
+                                    data: result.data,
+                                });
+                            }
+                        );
+                    }
+                }
+            }
+        };
+
+        fetchChildDropdownData();
+    }, [inputValue, settings, counter]);
+
+    useEffect(() => {
+        const processOptions = () => {
+            if (settings.options?.length > 0) {
+                let dataArray = [];
+
+                settings.options.forEach((a) => {
+                    let _tempObject = a;
+
+                    if (!_.isEmpty(_tempObject)) {
+                        let modifiedObject = {};
+
+                        Object.keys(_tempObject).forEach(function (c) {
+                            if (c !== 'id' && c !== 'label') {
+                                modifiedObject['data-' + c] = _tempObject[c];
+                            }
+                        });
+
+                        dataArray.push(modifiedObject);
+                    }
+                });
+
+                if (dataArray.length > 0) {
+                    setDataOptions(dataArray);
+                }
+            }
+        };
+
+        processOptions();
+    }, [settings.options, settings]);
+
+    const renderLabel = () => {
+        if (
+            [
+                'address',
+                'async-dropdown-ajax',
+                'checkbox',
+                'colour',
+                'copytoclipboard',
+                'date',
+                'datetime',
+                'dropdown',
+                'dropdown-ajax',
+                'dynamicdata',
+                'file',
+                'gallery',
+                'image',
+                'multi-dropdown',
+                'multi-dropdown-ajax',
+                'plaindate',
+                'plaindatetime',
+                'plainrelation',
+                'plainrelationarray',
+                'radio',
+                'radio-ajax',
+                'richeditor',
+                'signature',
+                'table_radio',
+                'table_text',
+                'time',
+            ].includes(settings.type)
+        ) {
+            return (
+                <span className={`${styles.fi__span} ${styles.prefocus}`}>
+                    {settings.label} {settings.required ? '*' : ''}
+                </span>
+            );
+        } else if (['plaintext'].includes(settings.type)) {
+            if (settings.description) {
+                return (
+                    <span>
+                        {settings.description
+                            ? parse(settings.description)
+                            : ''}
+                    </span>
+                );
+            } else {
+                return (
+                    <span className={`${styles.fi__span} ${styles.prefocus}`}>
+                        {settings.label} {settings.required ? '*' : ''}
+                    </span>
+                );
+            }
+        } else if (['plaintextheading'].includes(settings.type)) {
+            return <h2>{settings.label ? settings.label : ''}</h2>;
+        }
+    };
+
+    const renderRelationText = (value) => {
+        let text = '';
+
+        const processKeys = (obj) => {
+            let tmpValue = obj;
+            settings.keys.forEach((key) => {
+                tmpValue = tmpValue[key];
+            });
+            return tmpValue;
+        };
+
+        if (Array.isArray(value) && value[0] && settings.keys) {
+            text = processKeys(value[0]);
+        } else if (typeof value === 'object' && value !== null) {
+            text = processKeys(value);
+        }
+
+        return text;
+    };
+
+    const renderRelationArrayText = (value) => {
+        let text = '';
+
+        if (value && settings.nameFrom) {
+            value.forEach((a, b) => {
+                if (b > 0) {
+                    text += ', ';
+                }
+
+                text += a[settings.nameFrom];
+            });
+        }
+
+        return text;
+    };
+
+    const renderInput = () => {
+        switch (settings.type) {
+            case 'address':
+                return (
+                    <VisnsAutocomplete
+                        api="pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg"
+                        country="AU"
+                        field={settings.id}
+                        inputValue={inputValue}
+                        mapbox={mapbox}
+                        onSelect={autocompleteCallback}
+                        setFormData={setFormData}
+                        style={style}
+                    />
+                );
+            case 'async-dropdown-ajax':
+                return (
+                    <VisnsAsyncSelect
+                        settings={settings}
+                        className={inputClass[settings.id]}
+                        multi={
+                            settings.hasOwnProperty('multi')
+                                ? settings.multi
+                                : false
+                        }
+                        onChange={onChangeSelect}
+                        inputValue={
+                            inputValue === null || inputValue === undefined
+                                ? ''
+                                : inputValue
+                        }
+                        options={options}
+                        dataOptions={dataOptions}
+                    />
+                );
+            case 'checkbox':
+                return settings.options?.length > 0 ? (
+                    <div
+                        className="fi__optionscontainer"
+                        style={{ paddingTop: '10px' }}
+                    >
+                        {settings.options.map((option, index) => (
+                            <div
+                                key={`${settings.id}-checkbox-option-${index}`}
+                                className="fi__checkboxcontainer"
+                            >
+                                <input
+                                    name={settings.id}
+                                    data-name={settings.id}
+                                    type="checkbox"
+                                    className="fi__customcheckbox"
+                                    value={option.label}
+                                    checked={inputValue[index]}
+                                    onChange={onChangeCheckbox}
+                                />
+                                <label className="fi__checkboxlabel">
+                                    {option.label}
+                                </label>{' '}
+                            </div>
+                        ))}
+                    </div>
+                ) : null;
+            case 'colour':
+                return (
+                    <div className="cpicker">
+                        <div
+                            className="cpicker__box"
+                            style={
+                                inputValue && inputValue !== 'null'
+                                    ? { background: inputValue }
+                                    : {}
+                            }
+                        ></div>
+                        <div className="cpicker__btn">
+                            <button
+                                onClick={(e) => {
+                                    e.preventDefault();
+
+                                    setColorPickerShow(
+                                        colorPickerShow === true ? false : true
+                                    );
+                                }}
+                            >
+                                Pick Color
+                            </button>
+                            {colorPickerShow === true ? (
+                                <div style={popover}>
+                                    <div
+                                        style={cover}
+                                        onClick={() => {
+                                            setColorPickerShow(false);
+                                        }}
+                                    />
+
+                                    <BlockPicker
+                                        color={
+                                            inputValue && inputValue !== 'null'
+                                                ? inputValue
+                                                : ''
+                                        }
+                                        onChangeComplete={(color, event) => {
+                                            onChangeColour(
+                                                event,
+                                                color,
+                                                settings.id
+                                            );
+                                        }}
+                                    />
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+                );
+            case 'copytoclipboard':
+                return (
+                    <>
+                        <input
+                            type={settings.type}
+                            data-name={settings.id}
+                            className={inputClass[settings.id]}
+                            value={
+                                inputValue && inputValue !== 'null'
+                                    ? inputValue
+                                    : ''
+                            }
+                            readOnly
+                        />
+                        <CopyToClipboard
+                            text={
+                                inputValue && inputValue !== 'null'
+                                    ? inputValue
+                                    : ''
+                            }
+                            onCopy={() => console.info('copied')}
+                        >
+                            <Copy
+                                data-tooltip-id="system-tooltip"
+                                data-tooltip-content="Copy to Clipboard"
+                                strokeWidth={2}
+                                size={24}
+                            />
+                        </CopyToClipboard>
+                    </>
+                );
+            case 'currency':
+                return (
+                    <NumericFormat
+                        data-name={settings.id}
+                        className={inputClass[settings.id]}
+                        onValueChange={(values) => {
+                            onChangeNumberFormat(values, settings.id);
+                        }}
+                        thousandSeparator={true}
+                        prefix={'$'}
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
+                    />
+                );
+            case 'decimal':
+            case 'number':
+                return (
+                    <NumericFormat
+                        data-name={settings.id}
+                        className={inputClass[settings.id]}
+                        onValueChange={(values) => {
+                            onChangeNumberFormat(values, settings.id);
+                        }}
+                        thousandSeparator={
+                            settings.hasOwnProperty('thousandSeperator')
+                                ? settings.thousandSeperator
+                                : true
+                        }
+                        decimalSeparator={
+                            settings.type === 'decimal' ? '.' : '.'
+                        }
+                        decimalScale={settings.type === 'decimal' ? 2 : 2}
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
+                    />
+                );
+            case 'dropdown':
+            case 'dropdown-ajax':
+                return (
+                    <div className={styles.dropdownContainer}>
+                        <Select
+                            settings={settings}
+                            className={
+                                settings.create ? styles.selectFullWidth : ''
+                            }
+                            onChange={onChange}
+                            inputValue={inputValue === null ? '' : inputValue}
+                            options={
+                                settings.type === 'dropdown'
+                                    ? settings.options
+                                    : options
+                            }
+                            dataOptions={dataOptions}
+                        />
+
+                        {settings.create && (
+                            <button
+                                className={styles.buttonRight}
+                                onClick={(e) => {
+                                    e.preventDefault();
+
+                                    handleAddEntry(settings.create);
+                                }}
+                            >
+                                <CirclePlus strokeWidth={2} size={16} />
+                            </button>
+                        )}
+                    </div>
+                );
+            case 'dynamicdata':
+                return (
+                    <div
+                        className="fi__div"
+                        style={
+                            settings.height
+                                ? {
+                                      height: settings.height,
+                                      paddingTop: '10px',
+                                      marginLeft: '13px',
+                                  }
+                                : {
+                                      paddingTop: '10px',
+                                      marginLeft: '13px',
+                                  }
+                        }
+                    >
+                        {inputValue && inputValue !== 'null' ? inputValue : ''}
+                    </div>
+                );
+            case 'file':
+                if (
+                    settings.hasOwnProperty('multiple') &&
+                    settings.multiple === true
+                ) {
+                    return (
+                        <>
+                            <input
+                                type="file"
+                                multiple
+                                data-name={settings.id}
+                                className={inputClass[settings.id]}
+                                onChange={onChange}
+                            />
+                            {inputValue && inputValue.length > 0 && (
+                                <ul className="file-list">
+                                    {inputValue.map((file, index) => (
+                                        <li
+                                            key={`file-${settings.id}-${index}`}
+                                        >
+                                            {file.name}
+                                            <button
+                                                className="trash-button"
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+
+                                                    const updatedFiles =
+                                                        inputValue.filter(
+                                                            (_, fileIndex) =>
+                                                                fileIndex !==
+                                                                index
+                                                        );
+
+                                                    setFormData(
+                                                        (prevFormData) => ({
+                                                            ...prevFormData,
+                                                            [settings.id]:
+                                                                updatedFiles,
+                                                        })
+                                                    );
+                                                }}
+                                            >
+                                                <TrashCan
+                                                    data-tooltip-id="system-tooltip"
+                                                    data-tooltip-content="Remove File"
+                                                    strokeWidth={2}
+                                                    size={24}
+                                                />
+                                            </button>
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                        </>
+                    );
+                } else {
+                    return (
+                        <div
+                            style={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                            }}
+                        >
+                            <label
+                                htmlFor={settings.id}
+                                style={{
+                                    padding: '6px 12px',
+                                    border: '1px solid #ccc',
+                                    display: 'inline-block',
+                                    backgroundColor: '#f8f8f8',
+                                    cursor: 'pointer',
+                                }}
+                            >
+                                {inputValue?.filename
+                                    ? 'Replace File...'
+                                    : 'Choose file...'}
+                            </label>
+                            <input
+                                id={settings.id}
+                                data-name={settings.id}
+                                name={settings.id}
+                                type="file"
+                                className={inputClass[settings.id]}
+                                onChange={onChange}
+                                style={{ display: 'none' }}
+                            />
+                            <span style={{ marginLeft: '10px' }}>
+                                {inputValue
+                                    ? inputValue.filename
+                                        ? inputValue.filename
+                                        : inputValue.name
+                                        ? inputValue.name
+                                        : ''
+                                    : ''}
+                            </span>
+                            {inputValue &&
+                                inputValue.key &&
+                                inputValue.uuid && (
+                                    <div
+                                        style={{
+                                            marginLeft: '10px',
+                                            cursor: 'pointer',
+                                        }}
+                                        data-tooltip-id="system-tooltip"
+                                        data-tooltip-content={
+                                            inputValue.filename
+                                        }
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            onFileDownload(inputValue);
+                                        }}
+                                    >
+                                        <CloudDownload size={24} />
+                                    </div>
+                                )}
+                        </div>
+                    );
+                }
+            case 'gallery':
+                let htmlContainer = '';
+
+                if (formData[settings.key] && formData[settings.key] > 0) {
+                    const dropzoneUrl = `${settings.url}/${
+                        formData[settings.key]
+                    }`;
+
+                    htmlContainer = (
+                        <VisnsDropZone
+                            fetchData={fetchData}
+                            files={formData[settings.id]}
+                            settings={{
+                                url: dropzoneUrl,
+                                method: settings.method,
+                                type: 'gallery',
+                                data: settings.data,
+                            }}
+                        />
+                    );
+                }
+
+                return htmlContainer;
+            case 'html5_date':
+                return (
+                    <input
+                        type="date"
+                        data-name={settings.id}
+                        className={inputClass[settings.id]}
+                        placeholder=" "
+                        onChange={onChange}
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
+                        autoComplete="off"
+                    />
+                );
+            case 'html5_datetime':
+                return (
+                    <input
+                        type="datetime-local"
+                        data-name={settings.id}
+                        className={inputClass[settings.id]}
+                        placeholder=" "
+                        onChange={onChange}
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
+                        autoComplete="off"
+                    />
+                );
+            case 'html5_time':
+                return (
+                    <input
+                        type="time"
+                        data-name={settings.id}
+                        className={inputClass[settings.id]}
+                        placeholder=" "
+                        onChange={onChange}
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
+                        autoComplete="off"
+                    />
+                );
+            case 'image':
+                return (
+                    <div
+                        style={{
+                            position: 'relative',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            cursor: 'pointer',
+                        }}
+                    >
+                        <input
+                            type="file"
+                            data-name={settings.id}
+                            className={inputClass[settings.id]}
+                            onChange={onChange}
+                            ref={fileImageInputRef}
+                            style={{
+                                position: 'absolute',
+                                left: 0,
+                                top: 0,
+                                width: '100%',
+                                height: '100%',
+                                opacity: 0,
+                                cursor: 'pointer',
+                            }}
+                        />
+                        {inputValue.imageSrc ? (
+                            <img
+                                src={inputValue.imageSrc}
+                                alt="Uploaded"
+                                style={{
+                                    marginLeft: '10px',
+                                    maxHeight: '100px',
+                                }}
+                            />
+                        ) : (
+                            <img
+                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAJ3UlEQVR4nO3b60/aXhwG8KflJijIJQgTt8y5mLkxl73w//8HzBbdXLLFqJsg3rjKnUJ/L0wJpYUC9ovbL8/nlRbac077tOf0tCiHh4c6iFymPncF6P+JwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEvEfmhiBahNiQpEAAAAASUVORK5CYII="
+                                alt="Placeholder"
+                            />
+                        )}
+                    </div>
+                );
+            case 'json':
+                return (
+                    <input
+                        type={settings.type}
+                        data-name={settings.id}
+                        data-parent={settings.parent}
+                        className={inputClass[settings.id]}
+                        placeholder=" "
+                        onChange={onChange}
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
+                        autoComplete="off"
+                    />
+                );
+            case 'line-break':
+                return (
+                    <div className="formbreak">
+                        <span>
+                            {settings.label}{' '}
+                            {settings.required === true ? '*' : ''}
+                        </span>
+                    </div>
+                );
+            case 'mobile':
+            case 'phone':
+                return (
+                    <PatternFormat
+                        className={inputClass[settings.id]}
+                        onValueChange={(values) => {
+                            onChangeNumberFormat(values, settings.id);
+                        }}
+                        format={
+                            settings.type === 'phone'
+                                ? '## #### ####'
+                                : '#### ### ###'
+                        }
+                        allowEmptyFormatting
+                        mask="_"
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
+                    />
+                );
+            case 'multi-dropdown':
+            case 'multi-dropdown-ajax':
+                return (
+                    <div className={styles.dropdownContainer}>
+                        <MultiSelect
+                            settings={settings}
+                            className={
+                                settings.create ? styles.selectFullWidth : ''
+                            }
+                            multi={
+                                settings.hasOwnProperty('multi')
+                                    ? settings.multi
+                                    : false
+                            }
+                            onChange={onChangeSelect}
+                            inputValue={
+                                inputValue === null || inputValue === undefined
+                                    ? ''
+                                    : inputValue
+                            }
+                            options={
+                                settings.type === 'multi-dropdown'
+                                    ? settings.options
+                                    : options
+                            }
+                            dataOptions={dataOptions}
+                            style={style}
+                        />
+                        {settings.create && (
+                            <button
+                                className={styles.buttonRight}
+                                onClick={(e) => {
+                                    e.preventDefault();
+
+                                    handleAddEntry(settings.create);
+                                }}
+                            >
+                                <CirclePlus strokeWidth={2} size={16} />
+                            </button>
+                        )}
+                    </div>
+                );
+            case 'percentage':
+                return (
+                    <NumericFormat
+                        data-name={settings.id}
+                        className={inputClass[settings.id]}
+                        onValueChange={(values) => {
+                            onChangeNumberFormat(values, settings.id);
+                        }}
+                        thousandSeparator={true}
+                        suffix={'%'}
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
+                    />
+                );
+            case 'plaintext':
+                return (
+                    <div
+                        className="fi__div"
+                        style={
+                            settings.height
+                                ? {
+                                      height: settings.height,
+                                      paddingTop: '10px',
+                                      marginLeft: '13px',
+                                  }
+                                : {
+                                      paddingTop: '10px',
+                                      marginLeft: '13px',
+                                  }
+                        }
+                    >
+                        {inputValue && inputValue !== 'null' ? inputValue : ''}
+                    </div>
+                );
+            case 'plaintextheading':
+                return (
+                    <div
+                        className="fi__div"
+                        style={
+                            settings.height
+                                ? {
+                                      height: settings.height,
+                                  }
+                                : {}
+                        }
+                    >
+                        {inputValue && inputValue !== 'null'
+                            ? `<h2>${inputValue}</h2>`
+                            : ''}
+                    </div>
+                );
+            case 'plainrelation':
+                return (
+                    <div
+                        className="fi__div"
+                        style={
+                            settings.height
+                                ? {
+                                      height: settings.height,
+                                  }
+                                : {}
+                        }
+                    >
+                        {renderRelationText(inputValue)}
+                    </div>
+                );
+            case 'plainrelationarray':
+                return (
+                    <div
+                        className="fi__div"
+                        style={
+                            settings.height
+                                ? {
+                                      height: settings.height,
+                                  }
+                                : {}
+                        }
+                    >
+                        {renderRelationArrayText(inputValue)}
+                    </div>
+                );
+            case 'plaindate':
+                return (
+                    <div
+                        className="fi__div"
+                        style={
+                            settings.height
+                                ? {
+                                      height: settings.height,
+                                  }
+                                : {}
+                        }
+                    >
+                        {inputValue && inputValue !== 'null'
+                            ? moment(inputValue).format('DD-MM-YYYY')
+                            : ''}
+                    </div>
+                );
+            case 'plaindatetime':
+                return (
+                    <div
+                        className="fi__div"
+                        style={
+                            settings.height ? { height: settings.height } : {}
+                        }
+                    >
+                        {inputValue && inputValue !== 'null'
+                            ? moment(inputValue).format('DD-MM-YYYY hh:mm A')
+                            : ''}
+                    </div>
+                );
+            case 'radio':
+                return settings.options?.length > 0 ? (
+                    <div className="fi__optionscontainer">
+                        {settings.options.map((option, index) => (
+                            <div
+                                key={`${settings.id}-checkbox-option-${index}`}
+                                className="fi__checkboxcontainer"
+                            >
+                                <input
+                                    name={settings.id}
+                                    data-name={settings.id}
+                                    type="radio"
+                                    className="fi__customcheckbox"
+                                    value={option.id}
+                                    checked={
+                                        parseInt(inputValue) ===
+                                        parseInt(option.id)
+                                    }
+                                    onChange={onChange}
+                                />
+                                <label className="fi__checkboxlabel">
+                                    {option.label}
+                                </label>{' '}
+                            </div>
+                        ))}
+                    </div>
+                ) : null;
+            case 'radio-ajax':
+                return options?.length > 0 ? (
+                    <div className="fi__optionscontainer">
+                        {options.map((option, index) => (
+                            <div
+                                key={`${settings.id}-checkbox-option-${index}`}
+                                className="fi__checkboxcontainer"
+                            >
+                                <input
+                                    name={settings.id}
+                                    data-name={settings.id}
+                                    type="radio"
+                                    className="fi__customcheckbox"
+                                    value={option.id}
+                                    checked={
+                                        parseInt(inputValue) ===
+                                        parseInt(option.id)
+                                    }
+                                    onChange={onChange}
+                                />
+                                <label className="fi__checkboxlabel">
+                                    {option.label}
+                                </label>{' '}
+                            </div>
+                        ))}
+                    </div>
+                ) : null;
+            case 'richeditor':
+                return (
+                    <Editor
+                        tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
+                        licenseKey="gpl"
+                        onEditorChange={(value, e) => {
+                            onChangeRicheditor(e, value, settings.id);
+                        }}
+                        onInit={(evt, editor) => (editorRef.current = editor)}
+                        value={inputValue || ''}
+                        init={{
+                            branding: false,
+                            height: settings.height ? settings.height : 500,
+                            menubar: false,
+                            plugins: [
+                                'advlist',
+                                'autolink',
+                                'lists',
+                                'link',
+                                'image',
+                                'charmap',
+                                'preview',
+                                'anchor',
+                                'searchreplace',
+                                'visualblocks',
+                                'code',
+                                'fullscreen',
+                                'insertdatetime',
+                                'media',
+                                'table',
+                                'code',
+                            ],
+                            toolbar:
+                                'undo redo | blocks | ' +
+                                'bold italic forecolor | alignleft aligncenter ' +
+                                'alignright alignjustify | bullist numlist outdent indent | ' +
+                                'removeformat | table',
+                            content_style:
+                                'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+                        }}
+                    />
+                );
+            case 'signature':
+                return (
+                    <>
+                        {inputValue.signature ? (
+                            <div className={styles.signaturePlaceholder}>
+                                <img
+                                    src={inputValue.signature}
+                                    alt="Signature"
+                                    className={styles.signatureImage}
+                                />
+                                <p>
+                                    <strong>Name:</strong>{' '}
+                                    {inputValue.name ? inputValue.name : null}
+                                </p>
+                                <p>
+                                    <strong>Date:</strong>{' '}
+                                    {inputValue.date
+                                        ? moment(inputValue.date).format(
+                                              'DD-MM-YYYY'
+                                          )
+                                        : null}
+                                </p>
+                            </div>
+                        ) : (
+                            <button
+                                type="button"
+                                className={styles.signButton}
+                                onClick={(e) => {
+                                    e.preventDefault();
+
+                                    if (settings.role) {
+                                        if (
+                                            userProfile?.roles[0]?.name ===
+                                            settings.role
+                                        ) {
+                                            onChangeSignature(settings.id);
+                                        } else {
+                                            toast.error(
+                                                `A user with the role of ${settings.role} is required to sign this document`
+                                            );
+                                        }
+                                    } else {
+                                        onChangeSignature(settings.id);
+                                    }
+                                }}
+                            >
+                                Click to Sign
+                            </button>
+                        )}
+                    </>
+                );
+            case 'table_radio':
+                let tableRadioColumns = [];
+                let tableRadioRows = [];
+
+                for (const key in formData) {
+                    if (formData[key].id === settings.id) {
+                        if (formData[key].hasOwnProperty('options')) {
+                            tableRadioColumns = formData[key].options;
+                            tableRadioRows = formData[key].rows;
+                            break; // Assuming there's only one match needed, break out of the loop
+                        }
+                    }
+                }
+
+                return (
+                    <table className={styles.contentTable}>
+                        <thead>
+                            <tr>
+                                <th></th>
+                                {tableRadioColumns.map((column) => (
+                                    <th
+                                        key={`${settings.id}-${column.id}`}
+                                        style={{
+                                            width: '250px',
+                                            whiteSpace: 'nowrap',
+                                        }}
+                                    >
+                                        {column.label}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {tableRadioRows.map((row) => (
+                                <tr
+                                    key={`table-radio-row-${settings.id}-${row.id}`}
+                                >
+                                    <td
+                                        style={{
+                                            whiteSpace: 'nowrap',
+                                        }}
+                                    >
+                                        {row.label}
+                                    </td>
+                                    {tableRadioColumns.map((column) => (
+                                        <td
+                                            key={`table-radio-cell-${settings.id}-${row.id}-${column.id}`}
+                                        >
+                                            <input
+                                                type="checkbox"
+                                                name={row.id}
+                                                data-row-id={row.id}
+                                                data-column-id={column.id}
+                                                data-id={settings.id}
+                                                onChange={onChangeTableRadio}
+                                                checked={
+                                                    row.value?.[column.id] ===
+                                                    true
+                                                }
+                                            />
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                );
+            case 'table_text':
+                let tableTextColumns = [];
+                let tableTextValues = [];
+
+                for (const key in formData) {
+                    if (formData[key].id === settings.id) {
+                        if (formData[key].hasOwnProperty('options')) {
+                            tableTextColumns = formData[key].options;
+                            tableTextValues = formData[key].value;
+                            break; // Assuming there's only one match needed, break out of the loop
+                        }
+                    }
+                }
+                return (
+                    <table className={styles.contentTable}>
+                        <thead>
+                            <tr>
+                                {tableTextColumns.map((column, columnKey) => (
+                                    <th
+                                        key={`${settings.id}-${column.id}-${columnKey}`}
+                                    >
+                                        {column.label}
+                                    </th>
+                                ))}
+                                <th style={{ textAlign: 'center' }}>
+                                    <CirclePlus
+                                        onClick={() => {
+                                            onChangeAddTableTextRow(
+                                                settings.id
+                                            );
+                                        }}
+                                        size={24}
+                                        data-id={settings.id}
+                                    />
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {tableTextValues?.length > 0 &&
+                                tableTextValues?.map((row, rowKey) => (
+                                    <tr
+                                        key={`${settings.id}-${row.id}-${rowKey}-row`}
+                                    >
+                                        {row?.map((cell, cellKey) => (
+                                            <td
+                                                key={`${settings.id}}-${cellKey}-input`}
+                                            >
+                                                {tableTextColumns[cellKey]
+                                                    .type === 'checkbox' ? (
+                                                    <input
+                                                        type={'checkbox'}
+                                                        checked={cell || false}
+                                                        data-id={settings.id}
+                                                        onChange={(e) =>
+                                                            onChangeTableText(
+                                                                e,
+                                                                rowKey,
+                                                                cellKey
+                                                            )
+                                                        }
+                                                    />
+                                                ) : (
+                                                    <input
+                                                        type={'text'}
+                                                        value={cell || ''}
+                                                        data-id={settings.id}
+                                                        onChange={(e) =>
+                                                            onChangeTableText(
+                                                                e,
+                                                                rowKey,
+                                                                cellKey
+                                                            )
+                                                        }
+                                                    />
+                                                )}
+                                            </td>
+                                        ))}
+                                    </tr>
+                                ))}
+                        </tbody>
+                    </table>
+                );
+            case 'textarea':
+                return (
+                    <textarea
+                        data-name={settings.id}
+                        className={inputClass[settings.id]}
+                        onChange={onChange}
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
+                        style={{ height: '200px' }}
+                    ></textarea>
+                );
+            case 'text':
+            case 'password':
+                return (
+                    <input
+                        type={settings.type}
+                        data-name={settings.id}
+                        className={inputClass[settings.id]}
+                        placeholder=" "
+                        onChange={onChange}
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
+                        readOnly={settings.readOnly ? settings.readOnly : false}
+                        autoComplete="off"
+                    />
+                );
+            default:
+                return '';
+        }
+    };
+
+    const renderFieldLabel = () => {
+        if (
+            ![
+                'address',
+                'async-dropdown-ajax',
+                'checkbox',
+                'colour',
+                'copytoclipboard',
+                'date',
+                'datetime',
+                'dropdown',
+                'dropdown-ajax',
+                'dynamicdata',
+                'file',
+                'gallery',
+                'image',
+                'line-break',
+                'multi-dropdown',
+                'multi-dropdown-ajax',
+                'plaindate',
+                'plaindatetime',
+                'plainrelation',
+                'plainrelationarray',
+                'plaintext',
+                'plaintextheading',
+                'radio',
+                'radio-ajax',
+                'richeditor',
+                'signature',
+                'table_radio',
+                'table_text',
+                'time',
+                'toggle',
+            ].includes(settings.type)
+        ) {
+            return (
+                <span className={styles.fi__span}>
+                    {settings.label} {settings.required ? '*' : ''}
+                </span>
+            );
+        }
+    };
+
+    const renderAdditionalContainer = () => {
+        switch (settings.type) {
+            case 'date':
+            case 'datetime':
+                return (
+                    <DatePicker
+                        dateFormat={
+                            settings.format
+                                ? settings.format
+                                : settings.type === 'datetime'
+                                ? 'dd-MM-yyyy hh:mm aa'
+                                : 'dd-MM-yyyy'
+                        }
+                        isClearable
+                        className={inputClass[settings.id]}
+                        selected={inputValue || ''}
+                        showMonthDropdown
+                        showYearDropdown
+                        scrollableYearDropdown
+                        onChange={(date) => onChangeDate(date, settings.id)}
+                        showTimeSelect={settings.type === 'datetime'}
+                        showTimeSelectOnly={settings.type === 'time'}
+                        timeIntervals={
+                            settings.type === 'time' ? 15 : undefined
+                        }
+                        timeCaption={
+                            settings.type === 'time' ? 'Time' : undefined
+                        }
+                        shouldCloseOnSelect={true}
+                    />
+                );
+            case 'time':
+                return (
+                    <DatePicker
+                        dateFormat="hh:mm aa"
+                        isClearable
+                        className={inputClass[settings.id]}
+                        selected={inputValue || ''}
+                        showMonthDropdown
+                        showYearDropdown
+                        scrollableYearDropdown
+                        onChange={(date) => onChangeDate(date, settings.id)}
+                        showTimeSelect={true}
+                        showTimeSelectOnly={true}
+                        timeIntervals={15}
+                        timeCaption={'Time'}
+                        shouldCloseOnSelect={true}
+                    />
+                );
+            case 'toggle':
+                return (
+                    <div>
+                        <Toggle
+                            name={settings.id}
+                            data-name={settings.id}
+                            data-show={
+                                settings.show
+                                    ? JSON.stringify(settings.show)
+                                    : ''
+                            }
+                            checked={
+                                inputValue !== undefined
+                                    ? inputValue === ''
+                                        ? false
+                                        : inputValue === 'on'
+                                        ? false
+                                        : inputValue
+                                    : false
+                            }
+                            onChange={onChangeToggle}
+                        />
+                        <span className={styles.fi__toggletxt}>
+                            {settings.label} {settings.required ? '*' : ''}
+                        </span>
+                    </div>
+                );
+            default:
+                return '';
+        }
+    };
+
+    /** Child Form */
+    const [childForm, setChildForm] = useState({});
+    const [childFormShow, setChildFormShow] = useState(false);
+
+    const childFormClose = () => {
+        setChildFormShow(false);
+        setChildForm({});
+    };
+
+    const childFormOpen = () => {
+        setChildFormShow(true);
+    };
+
+    const handleAddEntry = (form) => {
+        if (form) {
+            let f = form;
+
+            form.fields.forEach((item, itemKey) => {
+                if (item.hasOwnProperty('dataId') && formData[item.dataId]) {
+                    f.fields[itemKey].value = formData[item.dataId].value
+                        ? formData[item.dataId].value
+                        : formData[item.dataId];
+                }
+            });
+
+            setChildForm(f);
+            childFormOpen();
+        }
+    };
+
+    const handleReload = () => {
+        setCounter(counter + 1);
+    };
+
+    return (
+        <div className={formItemClass} style={formItemStyle}>
+            <label className={styles.fi__label}>
+                {renderLabel()}
+                {renderInput()}
+                {renderFieldLabel()}
+            </label>
+            {renderAdditionalContainer()}
+            <Popup
+                open={childFormShow}
+                onClose={childFormClose}
+                closeOnDocumentClick={false}
+            >
+                <Form
+                    ajaxSetting={childForm.ajaxSetting}
+                    api={api}
+                    closeModal={childFormClose}
+                    columnId={0}
+                    fetchTable={handleReload}
+                    formSettings={childForm}
+                    formType={'create'}
+                    gridRef={null}
+                    mapbox={null}
+                    modalOpen={childFormOpen}
+                    paramValue={null}
+                    style={style}
+                    updateForm={setChildForm}
+                />
+            </Popup>
+        </div>
+    );
+}
+
+export default Field;