@visns-studio/visns-components 4.7.2 → 4.7.4

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

@@ -0,0 +1,1909 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import Popup from 'reactjs-popup';
+import { arrayMoveImmutable } from 'array-move';
+import { confirmAlert } from 'react-confirm-alert';
+import parse from 'html-react-parser';
+import Toggle from 'react-toggle';
+import { toast } from 'react-toastify';
+import { v4 as uuidv4 } from 'uuid';
+import { Editor } from '@tinymce/tinymce-react';
+import { CircleChevronRight, CirclePlus, CircleX, TrashCan } from 'akar-icons';
+
+import 'react-toggle/style.css';
+import 'react-datepicker/dist/react-datepicker.css';
+import 'react-confirm-alert/src/react-confirm-alert.css';
+
+import Breadcrumb from '../Breadcrumb';
+import CustomFetch from '../Fetch';
+import SortableList from '../../../components/cms/sorting/List';
+
+import styles from './styles/GenericFormBuilder.module.scss'; // Import the CSS module
+
+function GenericFormBuilder({ setting, urlParam, userProfile }) {
+    const editorRef = useRef(null);
+    const routeParams = useParams();
+
+    const { dynamicDropdowns, fetchUrl, fields, parentUrl, formTitle } =
+        setting;
+
+    const { dataId } = useParams();
+    const [data, setData] = useState({});
+    const [dataField, setDataField] = useState({
+        id: '',
+        label: '',
+        description: '',
+        type: '',
+        options: [],
+        rows: [],
+        size: 'half',
+        required: 'no',
+    });
+    const [dataOption, setDataOption] = useState({
+        id: '',
+        label: '',
+        type: '',
+    });
+    const [fieldTypes, setFieldTypes] = useState([
+        { value: 'checkbox', label: 'Checkbox' },
+        { value: 'html5_date', label: 'Date' },
+        { value: 'html5_datetime', label: 'Date & Time' },
+        { value: 'dropdown', label: 'Dropdown' },
+        ...(dynamicDropdowns && dynamicDropdowns.length > 0
+            ? [{ value: 'dynamicDropdown', label: 'Dynamic Dropdown' }]
+            : []),
+        { value: 'dynamicdata', label: 'Dynamic Data' },
+        { value: 'file', label: 'File' },
+        { value: 'plaintextheading', label: 'Heading' },
+        { value: 'image', label: 'Image' },
+        { value: 'number', label: 'Number' },
+        { value: 'plaintext', label: 'Plain Text' },
+        { value: 'section', label: 'Section' },
+        { value: 'signature', label: 'Signature' },
+        { value: 'table_radio', label: 'Table (Radio)' },
+        { value: 'table_text', label: 'Table (Custom)' },
+        { value: 'text', label: 'Text' },
+        { value: 'textarea', label: 'Textarea' },
+        { value: 'html5_time', label: 'Time' },
+        { value: 'toggle', label: 'Toggle' },
+    ]);
+    const [rowOption, setRowOption] = useState({
+        id: '',
+        label: '',
+    });
+    const [modalShow, setModalShow] = useState(false);
+    const [modalType, setModalType] = useState({
+        type: 'create',
+        key: '',
+    });
+    const [modalFormShow, setModalFormShow] = useState(false);
+    const [roles, setRoles] = useState([]);
+
+    /** Data Option Functionalities */
+    const handleDataOption = (e) => {
+        const { name, value } = e.target;
+
+        setDataOption((items) => ({
+            ...items,
+            [name]: value,
+            id: `${slugify(value)}-`,
+        }));
+    };
+
+    const handleAddOption = (e) => {
+        e.preventDefault();
+
+        if (dataOption.label !== '') {
+            const isLabelUnique = !dataField.options.some(
+                (option) => option.label === dataOption.label
+            );
+
+            if (isLabelUnique) {
+                setDataField((items) => ({
+                    ...items,
+                    options: [...items.options, dataOption],
+                }));
+
+                setDataOption(() => ({
+                    id: '',
+                    label: '',
+                    type: '',
+                }));
+            } else {
+                toast.warn('Option label must be unique.');
+            }
+        } else {
+            toast.warn('Please enter a label for the option.');
+        }
+    };
+
+    const handleDeleteOption = (e) => {
+        e.preventDefault();
+
+        const { counter } = e.target.dataset;
+
+        setDataField((prevState) => {
+            const options = prevState.options.slice();
+            options.splice(counter, 1);
+
+            return {
+                ...prevState,
+                options: options,
+            };
+        });
+    };
+
+    /** Row Option Functionalities */
+    const handleRowOption = (e) => {
+        const { name, value } = e.target;
+
+        setRowOption((items) => ({
+            ...items,
+            [name]: value,
+            id: `${slugify(value)}-`,
+        }));
+    };
+
+    const handleAddRowOption = (e) => {
+        e.preventDefault();
+
+        // Initialize rows if it doesn't exist
+        if (!dataField.rows) {
+            setDataField((items) => ({
+                ...items,
+                rows: [],
+            }));
+        }
+
+        if (rowOption.label !== '') {
+            const isLabelUnique = dataField.rows
+                ? !dataField.rows.some(
+                      (option) => option.label === rowOption.label
+                  )
+                : true;
+
+            if (isLabelUnique) {
+                setDataField((items) => ({
+                    ...items,
+                    rows: [...(items.rows || []), rowOption],
+                }));
+
+                setRowOption(() => ({
+                    id: '',
+                    label: '',
+                }));
+            } else {
+                toast.warn('Option label must be unique.');
+            }
+        } else {
+            toast.warn('Please enter a label for the option.');
+        }
+    };
+
+    const handleDeleteRowOption = (e) => {
+        e.preventDefault();
+
+        const { counter } = e.target.dataset;
+
+        setDataField((prevState) => {
+            const rows = prevState.rows.slice();
+            rows.splice(counter, 1);
+
+            return {
+                ...prevState,
+                rows: rows,
+            };
+        });
+    };
+
+    /** Field Functionalities */
+    const onSortEnd = ({ oldIndex, newIndex }) => {
+        const newData = arrayMoveImmutable(data.detail, oldIndex, newIndex);
+
+        setData((items) => ({
+            ...items,
+            detail: newData,
+        }));
+    };
+
+    const handleCloseModal = () => {
+        setModalShow(false);
+        setDataField(() => ({
+            label: '',
+            type: '',
+            options: [],
+            rows: [],
+            size: 'half',
+            required: 'no',
+        }));
+        setModalType(() => ({
+            type: 'create',
+            key: '',
+        }));
+    };
+
+    const handleOpenModal = () => {
+        setModalShow(true);
+    };
+
+    const slugify = (text) => {
+        return text.replace(/\s+/g, '-').toLowerCase();
+    };
+
+    const handleChangeForm = (e) => {
+        if (e) {
+            const { name, value } = e.target;
+            const updatedValue = name === 'id' ? slugify(value) : value;
+
+            setDataField((items) => ({
+                ...items,
+                [name]: updatedValue,
+            }));
+
+            if (name === 'label') {
+                setDataField((items) => ({
+                    ...items,
+                    id: slugify(value),
+                }));
+            }
+        }
+    };
+
+    const handleChangeFormRichEditor = (e, value, name) => {
+        setDataField((items) => ({
+            ...items,
+            [name]: value,
+        }));
+    };
+
+    const handleEdit = (key) => {
+        const { detail } = data;
+
+        setDataField(() => ({
+            ...detail[key],
+        }));
+
+        setModalType(() => ({
+            type: 'update',
+            key: key,
+        }));
+
+        handleOpenModal();
+    };
+
+    const handleDeleteField = (id, label) => {
+        confirmAlert({
+            title: `Delete "${label}" Field`,
+            message: 'Are you sure you want to delete this field?',
+            buttons: [
+                {
+                    label: 'Yes',
+                    onClick: () => {
+                        const index = data.detail.findIndex(
+                            (item) => item.id === id
+                        );
+
+                        if (index > -1) {
+                            let newDetail = [...data.detail];
+                            newDetail.splice(index, 1);
+
+                            setData((items) => ({
+                                ...items,
+                                detail: newDetail,
+                            }));
+
+                            handleCloseModal();
+                        }
+                    },
+                },
+                {
+                    label: 'No',
+                    onClick: () => close(),
+                },
+            ],
+        });
+    };
+
+    const handleSaveField = (e) => {
+        if (e) {
+            e.preventDefault();
+        }
+
+        let field = dataField;
+
+        field.id = formatFieldId(field.id);
+
+        let errorMessage = validateField(field);
+
+        if (errorMessage === '') {
+            saveFieldData(field);
+            handleCloseModal();
+        } else {
+            displayErrorMessage(errorMessage);
+        }
+    };
+
+    const formatFieldId = (id) => {
+        return id.includes('::') ? id : `${id}::${uuidv4()}`;
+    };
+
+    const validateField = (field) => {
+        let errors = [];
+
+        if (!isIdValid(field.id)) {
+            errors.push('Please enter a unique id for the field.');
+        }
+
+        if (field.type === 'plaintext') {
+            if (!field.label || field.label === '') {
+                errors.push('Please enter a label for the field.');
+            }
+
+            if (!field.description || field.description === '') {
+                errors.push('Please enter a description for the field.');
+            }
+        } else {
+            if (!field.label || field.label === '') {
+                errors.push('Please enter a label for the field.');
+            }
+        }
+
+        if (field.type === '') {
+            errors.push('Please select a type for the field.');
+        } else if (
+            field.type === 'dropdown' &&
+            (!field.options || field.options.length === 0)
+        ) {
+            errors.push('Please add options for the dropdown.');
+        } else if (
+            field.type === 'table_text' &&
+            (!field.options || field.options.length === 0)
+        ) {
+            errors.push('Please add options for the table.');
+        } else if (field.type === 'table_radio') {
+            if (!field.options || field.options.length === 0) {
+                errors.push('Please add options for the table.');
+            }
+            if (!field.rows || field.rows.length === 0) {
+                errors.push('Please add rows for the table.');
+            }
+        }
+
+        if (!field.size || field.size === '') {
+            errors.push('Please select a size for the field.');
+        }
+
+        if (field.required === '') {
+            errors.push('Is the field a required field?');
+        }
+
+        return errors.join('<br />');
+    };
+
+    const isIdValid = (id) => {
+        if (id === '') {
+            return false;
+        }
+        if (
+            modalType.type === 'create' ||
+            id !== data.detail[modalType.key]?.id
+        ) {
+            return data.detail
+                ? data.detail.every((field) => field.id !== id)
+                : true;
+        }
+        return true;
+    };
+
+    const saveFieldData = (field) => {
+        let newDetail =
+            modalType.type === 'create'
+                ? [...(data.detail || []), field]
+                : data.detail.map((f, index) =>
+                      index === modalType.key ? field : f
+                  );
+
+        setData((items) => ({
+            ...items,
+            detail: newDetail,
+        }));
+    };
+
+    const displayErrorMessage = (errorMessage) => {
+        toast.error(<div>{parse(errorMessage)}</div>);
+    };
+
+    /** Form Functionalities */
+    const renderClassName = (d) => {
+        const sizeClassMap = {
+            full: styles.fwBuilderItem,
+            half: styles.halfBuilderItem,
+            quarter: styles.qtrBuilderItem,
+        };
+
+        return `${styles.formBuilderItem} ${
+            sizeClassMap[d.size] || styles.halfBuilderItem
+        }`;
+    };
+
+    const renderField = (field) => {
+        switch (field.type) {
+            case 'checkbox':
+                return (
+                    <label className={styles.fi__label}>
+                        <span className={styles.fi__spancheckbox}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                        {field.options.length > 0 ? (
+                            <div className={styles.fi__optionscontainer}>
+                                {field.options.map((option, index) => (
+                                    <div
+                                        key={`${field.id}-checkbox-option-${index}`}
+                                        className={styles.fi__checkboxcontainer}
+                                    >
+                                        <input
+                                            type="checkbox"
+                                            className={
+                                                styles.fi__customcheckbox
+                                            }
+                                        />
+                                        <label
+                                            className={styles.fi__checkboxlabel}
+                                        >
+                                            {option.label}
+                                        </label>{' '}
+                                    </div>
+                                ))}
+                            </div>
+                        ) : null}
+                    </label>
+                );
+            case 'date':
+                return (
+                    <label className={styles.fi__label}>
+                        <input type="date" />
+                        <span className={styles.fi__span}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'datetime':
+                return (
+                    <label className={styles.fi__label}>
+                        <input type="datetime-local" />
+                        <span className={styles.fi__span}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'dropdown':
+            case 'dynamicDropdown':
+                return (
+                    <label className={styles.fi__label}>
+                        <select>
+                            <option>Please Select an Option</option>
+                        </select>
+                        <span className={styles.fi__span}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'dynamicdata':
+                return (
+                    <label className={styles.fi__label}>
+                        <strong>{field.label}</strong> [Dynamic Data]
+                    </label>
+                );
+            case 'file':
+                return (
+                    <label className={styles.fi__label}>
+                        <input type="file" />
+                        <span className={styles.fi__span}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'image':
+                return (
+                    <label className={styles.fi__label}>
+                        <input type="file" />
+                        <span className={styles.fi__span}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'plaintextheading':
+                return (
+                    <label className={styles.fi__label}>
+                        <h2>{field.label}</h2>
+                    </label>
+                );
+            case 'plaintext':
+                return (
+                    <label className={styles.fi__label}>
+                        {field.description ? parse(field.description) : null}
+                    </label>
+                );
+            case 'number':
+                return (
+                    <label className={styles.fi__label}>
+                        <input type="number" />
+                        <span className={styles.fi__span}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'section':
+                return (
+                    <div className={styles.gridtxt__header}>
+                        <span>{field.label}</span>
+                    </div>
+                );
+            case 'signature':
+                return (
+                    <label className={styles.fi__label}>
+                        <span
+                            className={`${styles.fi__span} ${styles.prefocus}`}
+                        >
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                        <button
+                            type="button"
+                            className={styles.signButton}
+                            onClick={() => {
+                                // Handle signature logic here
+                            }}
+                        >
+                            Click to Sign
+                        </button>
+                        <div className={styles.signaturePlaceholder}>
+                            <p>
+                                <strong>Name:</strong> [Placeholder]
+                            </p>
+                            <p>
+                                <strong>Date:</strong> [Placeholder]
+                            </p>
+                        </div>
+                    </label>
+                );
+            case 'table_radio':
+                return (
+                    <label className={styles.fi__label}>
+                        <table className={styles.contentTable}>
+                            <thead>
+                                <tr>
+                                    <th></th>
+                                    {field.options.map((option, index) => (
+                                        <th
+                                            key={`${field.id}-table-text-option-${index}`}
+                                        >
+                                            {option.label}
+                                        </th>
+                                    ))}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {field.rows.map((row, rowKey) => (
+                                    <tr
+                                        key={`${field.id}-table-text-row-data-${rowKey}`}
+                                    >
+                                        <td>{row.label}</td>
+                                        {field.options.map(
+                                            (option, optionKey) => (
+                                                <td
+                                                    key={`${field.id}-table-text-data-${optionKey}-${rowKey}`}
+                                                ></td>
+                                            )
+                                        )}
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                        <span
+                            className={`${styles.fi__span} ${styles.prefocus}`}
+                        >
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'table_text':
+                return (
+                    <label className={styles.fi__label}>
+                        <table className={styles.contentTable}>
+                            <thead>
+                                <tr>
+                                    {field.options.map((option, index) => (
+                                        <th
+                                            key={`${field.id}-table-text-option-${index}`}
+                                        >
+                                            {option.label}
+                                        </th>
+                                    ))}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    {field.options.map((option, index) => (
+                                        <td
+                                            key={`${field.id}-table-text-data-${index}`}
+                                        >
+                                            [Placeholder Data]
+                                        </td>
+                                    ))}
+                                </tr>
+                            </tbody>
+                        </table>
+                        <span
+                            className={`${styles.fi__span} ${styles.prefocus}`}
+                        >
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'textarea':
+                return (
+                    <label className={styles.fi__label}>
+                        <textarea rows="5"></textarea>
+                        <span className={styles.fi__span}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'time':
+                return (
+                    <label className={styles.fi__label}>
+                        <input type="time" />
+                        <span className={styles.fi__span}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+            case 'toggle':
+                return (
+                    <div>
+                        <Toggle />
+                        <span className={styles.fi__toggletxt}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </div>
+                );
+            default:
+                return (
+                    <label className={styles.fi__label}>
+                        <input type="text" />
+                        <span className={styles.fi__span}>
+                            {field.label}{' '}
+                            {field.required === 'yes' ? '*' : null}
+                        </span>
+                    </label>
+                );
+        }
+    };
+
+    const handleCloseModalForm = () => {
+        setModalFormShow(false);
+    };
+
+    const handleOpenModalForm = () => {
+        setModalFormShow(true);
+    };
+
+    const handleChange = (e) => {
+        if (e) {
+            const { name, value } = e.target;
+
+            setData((prevState) => ({
+                ...prevState,
+                [name]: value,
+            }));
+        }
+    };
+
+    const handleSubmit = async (e) => {
+        try {
+            if (e) {
+                e.preventDefault();
+
+                let _error = '';
+
+                if (data.label === '') {
+                    _error += 'Please a label for the form.<br />';
+                }
+
+                if (_error === '') {
+                    const res = await CustomFetch(
+                        `${fetchUrl}/${dataId}`,
+                        'PUT',
+                        {
+                            ...data,
+                        }
+                    );
+
+                    if (res.data.error === '') {
+                        toast.success(
+                            "You have successfully updated the form's detail."
+                        );
+
+                        handleCloseModalForm();
+                    } else {
+                        toast.error(String(res.data.error));
+                    }
+                } else {
+                    toast.error(<div>{parse(_error)}</div>);
+                }
+            }
+        } catch (err) {
+            toast.error(`Error: ${err}`);
+        }
+    };
+
+    const fetchData = async () => {
+        try {
+            const res = await CustomFetch(
+                `${fetchUrl}/${routeParams[urlParam]}`,
+                'GET',
+                {}
+            );
+
+            setData(res.data);
+        } catch (err) {
+            toast.error(`Error: ${err}`);
+        }
+    };
+
+    const saveOnSort = async () => {
+        try {
+            const res = await CustomFetch(
+                `${fetchUrl}/sort/${dataId}`,
+                'POST',
+                {
+                    detail: data.detail,
+                }
+            );
+
+            if (res.data.error !== '') {
+                toast.error(String(res.data.error));
+            }
+        } catch (err) {
+            toast.error(`Error: ${err}`);
+        }
+    };
+
+    const fetchRoles = async () => {
+        try {
+            const res = await CustomFetch('/ajax/roles/dropdown', 'POST', {});
+
+            setRoles(res.data.data);
+        } catch (err) {
+            console.info(err);
+        }
+    };
+
+    useEffect(() => {
+        if (data.detail && data.detail.length > 0) {
+            saveOnSort();
+        }
+    }, [data.detail]);
+
+    useEffect(() => {
+        fetchData();
+        fetchRoles();
+    }, []);
+
+    return (
+        <div>
+            <div className={styles.grid__row}>
+                <div className={`${styles.grid__full} ${styles.crmtitle}`}>
+                    <Breadcrumb
+                        data={data}
+                        page={{
+                            previousUrl: parentUrl,
+                            title: 'Forms',
+                            titleKey: 'label',
+                        }}
+                    />
+                </div>
+            </div>
+            <div className={styles.grid}>
+                <div className={styles.grid__subrow}>
+                    <div className={styles.grid__subnav}>
+                        {data.detail && data.detail.length > 0 ? (
+                            <SortableList
+                                handleClick={handleEdit}
+                                handleDelete={handleDeleteField}
+                                items={data.detail}
+                                onSortEnd={onSortEnd}
+                                axis="xy"
+                                helperClass={styles.dragitem}
+                                transitionDuration={250}
+                                showImage={false}
+                                useDragHandle
+                            />
+                        ) : null}
+                    </div>
+                    <div className={styles.grid__subcontent}>
+                        <div className={styles.formSplit}>
+                            <div className={styles.gridtxt__header}>
+                                <span>{formTitle ? formTitle : null}</span>
+                            </div>
+                            {data.detail && data.detail.length > 0 ? (
+                                <div className={styles.modal__content}>
+                                    <div className={styles.formcontainer}>
+                                        <form className={styles.modalForm}>
+                                            {data.detail.map((a, b) => (
+                                                <div
+                                                    key={`form-preview-field-${b}`}
+                                                    className={renderClassName(
+                                                        a
+                                                    )}
+                                                    style={{
+                                                        minHeight: '64.2px',
+                                                    }}
+                                                >
+                                                    {renderField(a)}
+                                                </div>
+                                            ))}
+                                        </form>
+                                    </div>
+                                </div>
+                            ) : null}
+                        </div>
+                        <div className={styles.polActions}>
+                            <button
+                                className={styles.btn}
+                                onClick={handleOpenModal}
+                            >
+                                Add Field
+                            </button>
+                            <button
+                                className={styles.btn}
+                                onClick={handleOpenModalForm}
+                            >
+                                Edit Form
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <Popup
+                open={modalShow}
+                onClose={handleCloseModal}
+                closeOnDocumentClick={false}
+            >
+                <div className={styles.modalwrap}>
+                    <div className={styles.modal}>
+                        <div className={styles.modal__header}>
+                            <h1>
+                                {modalType.type === 'create'
+                                    ? 'Add new Field'
+                                    : 'Update existing Field'}
+                            </h1>
+                            <button
+                                className={styles.modal__close}
+                                onClick={handleCloseModal}
+                            >
+                                <CircleX strokeWidth={1} size={24} />
+                            </button>
+                        </div>
+                        <div className={styles.modal__content}>
+                            <div className={styles.formcontainer}>
+                                <form className={styles.modalForm}>
+                                    <div className={styles.formItem}>
+                                        <label className={styles.fi__label}>
+                                            <select
+                                                name="type"
+                                                value={dataField.type}
+                                                onChange={handleChangeForm}
+                                            >
+                                                <option>
+                                                    Please Select an Option
+                                                </option>
+                                                {fieldTypes.map(
+                                                    (item, itemKey) => (
+                                                        <option
+                                                            value={item.value}
+                                                            key={`${item.value}-${itemKey}`}
+                                                        >
+                                                            {item.label}
+                                                        </option>
+                                                    )
+                                                )}
+                                            </select>
+                                            <span className={styles.fi__span}>
+                                                Type *
+                                            </span>
+                                        </label>
+                                    </div>
+                                    <div className={styles.formItem}>
+                                        <label className={styles.fi__label}>
+                                            <input
+                                                type="text"
+                                                name="label"
+                                                value={
+                                                    dataField.label
+                                                        ? dataField.label
+                                                        : ''
+                                                }
+                                                onChange={handleChangeForm}
+                                                placeholder=" "
+                                            />
+                                            <span className={styles.fi__span}>
+                                                Label *
+                                            </span>
+                                        </label>
+                                    </div>
+                                    {dataField.type === 'dynamicdata' && (
+                                        <div className={styles.formItem}>
+                                            <label className={styles.fi__label}>
+                                                <select
+                                                    name="dynamicfield"
+                                                    value={
+                                                        dataField.dynamicfield
+                                                    }
+                                                    onChange={handleChangeForm}
+                                                >
+                                                    <option value="">
+                                                        Please select an option
+                                                    </option>
+                                                    {fields.map((category) => (
+                                                        <optgroup
+                                                            label={
+                                                                category.label
+                                                            }
+                                                            key={`dynamic-field-category-${category.id}`}
+                                                        >
+                                                            {category.data.map(
+                                                                (field) => (
+                                                                    <option
+                                                                        value={`${category.id}::${field.value}`}
+                                                                        key={`dynamic-field-category-${category.id}-${field.value}`}
+                                                                    >
+                                                                        {
+                                                                            field.label
+                                                                        }
+                                                                    </option>
+                                                                )
+                                                            )}
+                                                        </optgroup>
+                                                    ))}
+                                                </select>
+                                                <span
+                                                    className={styles.fi__span}
+                                                >
+                                                    Dynamic Field *
+                                                </span>
+                                            </label>
+                                        </div>
+                                    )}
+                                    {dataField.type === 'dynamicDropdown' && (
+                                        <div className={styles.formItem}>
+                                            <label className={styles.fi__label}>
+                                                <select
+                                                    name="dynamicDropdown"
+                                                    value={
+                                                        dataField.dynamicDropdown
+                                                    }
+                                                    onChange={handleChangeForm}
+                                                >
+                                                    <option value="">
+                                                        Please select an option
+                                                    </option>
+                                                    {dynamicDropdowns.map(
+                                                        (
+                                                            dropdown,
+                                                            dropdownKey
+                                                        ) => (
+                                                            <option
+                                                                value={`${dropdown.url}`}
+                                                                key={`dynamic-dropdown-${dropdownKey}`}
+                                                            >
+                                                                {dropdown.label}
+                                                            </option>
+                                                        )
+                                                    )}
+                                                </select>
+                                                <span
+                                                    className={styles.fi__span}
+                                                >
+                                                    Dropdown *
+                                                </span>
+                                            </label>
+                                        </div>
+                                    )}
+
+                                    <div className={styles.formItem}>
+                                        <label className={styles.fi__label}>
+                                            <select
+                                                name="size"
+                                                value={dataField.size}
+                                                onChange={handleChangeForm}
+                                            >
+                                                <option>
+                                                    Please Select an Option
+                                                </option>
+                                                <option value="quarter">
+                                                    Quarter
+                                                </option>
+                                                <option value="half">
+                                                    Half
+                                                </option>
+                                                <option value="full">
+                                                    Full
+                                                </option>
+                                            </select>
+                                            <span className={styles.fi__span}>
+                                                Size *
+                                            </span>
+                                        </label>
+                                    </div>
+                                    <div className={styles.formItem}>
+                                        <label className={styles.fi__label}>
+                                            <select
+                                                name="required"
+                                                value={dataField.required}
+                                                onChange={handleChangeForm}
+                                            >
+                                                {dataField.type ===
+                                                'section' ? (
+                                                    <option value="no">
+                                                        No
+                                                    </option>
+                                                ) : (
+                                                    <>
+                                                        <option>
+                                                            Please Select an
+                                                            Option
+                                                        </option>
+                                                        <option value="no">
+                                                            No
+                                                        </option>
+                                                        <option value="yes">
+                                                            Yes
+                                                        </option>
+                                                    </>
+                                                )}
+                                            </select>
+                                            <span className={styles.fi__span}>
+                                                Required? *
+                                            </span>
+                                        </label>
+                                    </div>
+
+                                    {dataField.type === 'image' && (
+                                        <div className={styles.formItem}>
+                                            <label className={styles.fi__label}>
+                                                <select
+                                                    name="image_qty"
+                                                    value={dataField.image_qty}
+                                                    onChange={handleChangeForm}
+                                                >
+                                                    <option>
+                                                        Please Select an Option
+                                                    </option>
+                                                    <option value="single">
+                                                        Single
+                                                    </option>
+                                                    <option value="bulk">
+                                                        Bulk
+                                                    </option>
+                                                </select>
+                                                <span
+                                                    className={styles.fi__span}
+                                                >
+                                                    Single or Bulk Image?
+                                                </span>
+                                            </label>
+                                        </div>
+                                    )}
+
+                                    {dataField.type === 'plaintext' && (
+                                        <div
+                                            className={`${styles.formItem} ${styles.fwItem}`}
+                                        >
+                                            <label className={styles.fi__label}>
+                                                <Editor
+                                                    tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
+                                                    licenseKey="gpl"
+                                                    onEditorChange={(
+                                                        value,
+                                                        e
+                                                    ) => {
+                                                        handleChangeFormRichEditor(
+                                                            e,
+                                                            value,
+                                                            'description'
+                                                        );
+                                                    }}
+                                                    onInit={(evt, editor) =>
+                                                        (editorRef.current =
+                                                            editor)
+                                                    }
+                                                    value={
+                                                        dataField.description ||
+                                                        ''
+                                                    }
+                                                    init={{
+                                                        branding: false,
+                                                        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 }',
+                                                    }}
+                                                />
+                                                <span
+                                                    className={styles.fi__span}
+                                                >
+                                                    Description *
+                                                </span>
+                                            </label>
+                                        </div>
+                                    )}
+
+                                    {[
+                                        'checkbox',
+                                        'dropdown',
+                                        'table_radio',
+                                    ].includes(dataField.type) ? (
+                                        <div
+                                            className={`${styles.formItem} ${styles.fwItem}`}
+                                        >
+                                            <table
+                                                className={styles.contentTable}
+                                            >
+                                                <thead
+                                                    className={
+                                                        styles.gridHeaders
+                                                    }
+                                                >
+                                                    <tr>
+                                                        <th
+                                                            style={{
+                                                                width: '450px',
+                                                            }}
+                                                        >
+                                                            {dataField.type ===
+                                                                'table_text' ||
+                                                            dataField.type ===
+                                                                'table_radio'
+                                                                ? 'Column Header'
+                                                                : 'Label'}
+                                                        </th>
+                                                        <th></th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    {dataField.options.length >
+                                                    0 ? (
+                                                        dataField.options.map(
+                                                            (
+                                                                option,
+                                                                optionKey
+                                                            ) => (
+                                                                <tr
+                                                                    key={`option-${optionKey}`}
+                                                                >
+                                                                    <td>
+                                                                        <input
+                                                                            type="text"
+                                                                            value={
+                                                                                option.label
+                                                                            }
+                                                                            onChange={(
+                                                                                e
+                                                                            ) => {
+                                                                                const newOptions =
+                                                                                    [
+                                                                                        ...dataField.options,
+                                                                                    ];
+                                                                                newOptions[
+                                                                                    optionKey
+                                                                                ].label =
+                                                                                    e.target.value;
+                                                                                setDataField(
+                                                                                    (
+                                                                                        items
+                                                                                    ) => ({
+                                                                                        ...items,
+                                                                                        options:
+                                                                                            newOptions,
+                                                                                    })
+                                                                                );
+                                                                            }}
+                                                                        />
+                                                                    </td>
+                                                                    <td
+                                                                        style={{
+                                                                            textAlign:
+                                                                                'center',
+                                                                        }}
+                                                                    >
+                                                                        <button
+                                                                            className={
+                                                                                styles.btn
+                                                                            }
+                                                                            style={{
+                                                                                padding:
+                                                                                    '5px 20px',
+                                                                            }}
+                                                                            onClick={
+                                                                                handleDeleteOption
+                                                                            }
+                                                                            data-counter={
+                                                                                optionKey
+                                                                            }
+                                                                            data-tooltip-id="system-tooltip"
+                                                                            data-tooltip-content={
+                                                                                'Delete Option'
+                                                                            }
+                                                                        >
+                                                                            <TrashCan
+                                                                                strokeWidth={
+                                                                                    2
+                                                                                }
+                                                                                size={
+                                                                                    12
+                                                                                }
+                                                                            />
+                                                                        </button>
+                                                                    </td>
+                                                                </tr>
+                                                            )
+                                                        )
+                                                    ) : (
+                                                        <tr>
+                                                            <td colSpan="2">
+                                                                No entry have
+                                                                been added.
+                                                            </td>
+                                                        </tr>
+                                                    )}
+                                                </tbody>
+                                                <tfoot>
+                                                    <tr>
+                                                        <td>
+                                                            <input
+                                                                type="text"
+                                                                style={{
+                                                                    padding:
+                                                                        '5px',
+                                                                    height: '52px',
+                                                                    padding:
+                                                                        '1rem',
+                                                                }}
+                                                                name="label"
+                                                                onChange={
+                                                                    handleDataOption
+                                                                }
+                                                                value={
+                                                                    dataOption.label
+                                                                }
+                                                                placeholder="Column Header"
+                                                            />
+                                                        </td>
+                                                        <td
+                                                            style={{
+                                                                textAlign:
+                                                                    'center',
+                                                            }}
+                                                        >
+                                                            <button
+                                                                className={
+                                                                    styles.btn
+                                                                }
+                                                                style={{
+                                                                    padding:
+                                                                        '5px 20px',
+                                                                }}
+                                                                onClick={
+                                                                    handleAddOption
+                                                                }
+                                                                data-tooltip-id="system-tooltip"
+                                                                data-tooltip-content={
+                                                                    'Add Option'
+                                                                }
+                                                            >
+                                                                <CirclePlus
+                                                                    strokeWidth={
+                                                                        2
+                                                                    }
+                                                                    size={12}
+                                                                />
+                                                            </button>
+                                                        </td>
+                                                    </tr>
+                                                </tfoot>
+                                            </table>
+                                        </div>
+                                    ) : null}
+
+                                    {['table_text'].includes(dataField.type) ? (
+                                        <div
+                                            className={`${styles.formItem} ${styles.fwItem}`}
+                                        >
+                                            <table
+                                                className={styles.contentTable}
+                                            >
+                                                <thead
+                                                    className={
+                                                        styles.gridHeaders
+                                                    }
+                                                >
+                                                    <tr>
+                                                        <th
+                                                            style={{
+                                                                width: '450px',
+                                                            }}
+                                                        >
+                                                            Column Header
+                                                        </th>
+                                                        <th>Column Type</th>
+                                                        <th></th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    {dataField.options.length >
+                                                    0 ? (
+                                                        dataField.options.map(
+                                                            (
+                                                                option,
+                                                                optionKey
+                                                            ) => (
+                                                                <tr
+                                                                    key={`option-${optionKey}`}
+                                                                >
+                                                                    <td>
+                                                                        <input
+                                                                            type="text"
+                                                                            value={
+                                                                                option.label
+                                                                            }
+                                                                            onChange={(
+                                                                                e
+                                                                            ) => {
+                                                                                const newOptions =
+                                                                                    [
+                                                                                        ...dataField.options,
+                                                                                    ];
+                                                                                newOptions[
+                                                                                    optionKey
+                                                                                ].label =
+                                                                                    e.target.value;
+                                                                                setDataField(
+                                                                                    (
+                                                                                        items
+                                                                                    ) => ({
+                                                                                        ...items,
+                                                                                        options:
+                                                                                            newOptions,
+                                                                                    })
+                                                                                );
+                                                                            }}
+                                                                        />
+                                                                    </td>
+                                                                    <td>
+                                                                        <select
+                                                                            value={
+                                                                                option.type
+                                                                            }
+                                                                            onChange={(
+                                                                                e
+                                                                            ) => {
+                                                                                const newOptions =
+                                                                                    [
+                                                                                        ...dataField.options,
+                                                                                    ];
+                                                                                newOptions[
+                                                                                    optionKey
+                                                                                ].type =
+                                                                                    e.target.value;
+                                                                                setDataField(
+                                                                                    (
+                                                                                        items
+                                                                                    ) => ({
+                                                                                        ...items,
+                                                                                        options:
+                                                                                            newOptions,
+                                                                                    })
+                                                                                );
+                                                                            }}
+                                                                        >
+                                                                            {fieldTypes
+                                                                                .filter(
+                                                                                    (
+                                                                                        item
+                                                                                    ) =>
+                                                                                        ![
+                                                                                            'checkbox',
+                                                                                            'dropdown',
+                                                                                            'dynamicdata',
+                                                                                            'signature',
+                                                                                            'table',
+                                                                                        ].some(
+                                                                                            (
+                                                                                                keyword
+                                                                                            ) =>
+                                                                                                item.value.includes(
+                                                                                                    keyword
+                                                                                                )
+                                                                                        )
+                                                                                )
+                                                                                .map(
+                                                                                    (
+                                                                                        item,
+                                                                                        itemKey
+                                                                                    ) => (
+                                                                                        <option
+                                                                                            value={
+                                                                                                item.value
+                                                                                            }
+                                                                                            key={`type-form-${item.value}-${itemKey}`}
+                                                                                        >
+                                                                                            {
+                                                                                                item.label
+                                                                                            }
+                                                                                        </option>
+                                                                                    )
+                                                                                )}
+                                                                        </select>
+                                                                    </td>
+                                                                    <td
+                                                                        style={{
+                                                                            textAlign:
+                                                                                'center',
+                                                                        }}
+                                                                    >
+                                                                        <button
+                                                                            className={
+                                                                                styles.btn
+                                                                            }
+                                                                            style={{
+                                                                                padding:
+                                                                                    '5px 20px',
+                                                                            }}
+                                                                            onClick={
+                                                                                handleDeleteOption
+                                                                            }
+                                                                            data-counter={
+                                                                                optionKey
+                                                                            }
+                                                                            data-tooltip-id="system-tooltip"
+                                                                            data-tooltip-content={
+                                                                                'Delete Option'
+                                                                            }
+                                                                        >
+                                                                            <TrashCan
+                                                                                strokeWidth={
+                                                                                    2
+                                                                                }
+                                                                                size={
+                                                                                    12
+                                                                                }
+                                                                            />
+                                                                        </button>
+                                                                    </td>
+                                                                </tr>
+                                                            )
+                                                        )
+                                                    ) : (
+                                                        <tr>
+                                                            <td colSpan="3">
+                                                                No entry has
+                                                                been added.
+                                                            </td>
+                                                        </tr>
+                                                    )}
+                                                </tbody>
+                                                <tfoot>
+                                                    <tr>
+                                                        <td>
+                                                            <input
+                                                                type="text"
+                                                                style={{
+                                                                    padding:
+                                                                        '5px',
+                                                                    height: '52px',
+                                                                    padding:
+                                                                        '1rem',
+                                                                }}
+                                                                name="label"
+                                                                onChange={
+                                                                    handleDataOption
+                                                                }
+                                                                value={
+                                                                    dataOption.label
+                                                                }
+                                                                placeholder="Column Header"
+                                                            />
+                                                        </td>
+                                                        <td>
+                                                            <select
+                                                                name="type"
+                                                                value={
+                                                                    dataOption.type
+                                                                }
+                                                                onChange={
+                                                                    handleDataOption
+                                                                }
+                                                            >
+                                                                <option>
+                                                                    Please
+                                                                    Select an
+                                                                    Option
+                                                                </option>
+                                                                {fieldTypes
+                                                                    .filter(
+                                                                        (
+                                                                            item
+                                                                        ) =>
+                                                                            ![
+                                                                                'checkbox',
+                                                                                'dropdown',
+                                                                                'dynamicdata',
+                                                                                'signature',
+                                                                                'table',
+                                                                            ].some(
+                                                                                (
+                                                                                    keyword
+                                                                                ) =>
+                                                                                    item.value.includes(
+                                                                                        keyword
+                                                                                    )
+                                                                            )
+                                                                    )
+                                                                    .map(
+                                                                        (
+                                                                            item,
+                                                                            itemKey
+                                                                        ) => (
+                                                                            <option
+                                                                                value={
+                                                                                    item.value
+                                                                                }
+                                                                                key={`type-${item.value}-${itemKey}`}
+                                                                            >
+                                                                                {
+                                                                                    item.label
+                                                                                }
+                                                                            </option>
+                                                                        )
+                                                                    )}
+                                                            </select>
+                                                        </td>
+                                                        <td
+                                                            style={{
+                                                                textAlign:
+                                                                    'center',
+                                                            }}
+                                                        >
+                                                            <button
+                                                                className={
+                                                                    styles.btn
+                                                                }
+                                                                style={{
+                                                                    padding:
+                                                                        '5px 20px',
+                                                                }}
+                                                                onClick={
+                                                                    handleAddOption
+                                                                }
+                                                                data-tooltip-id="system-tooltip"
+                                                                data-tooltip-content={
+                                                                    'Add Option'
+                                                                }
+                                                            >
+                                                                <CirclePlus
+                                                                    strokeWidth={
+                                                                        2
+                                                                    }
+                                                                    size={12}
+                                                                />
+                                                            </button>
+                                                        </td>
+                                                    </tr>
+                                                </tfoot>
+                                            </table>
+                                        </div>
+                                    ) : null}
+
+                                    {['signature'].includes(dataField.type) ? (
+                                        <div className={styles.formItem}>
+                                            <label className={styles.fi__label}>
+                                                <select
+                                                    name="role"
+                                                    value={dataField.role}
+                                                    onChange={handleChangeForm}
+                                                >
+                                                    <option>
+                                                        No Role Associated
+                                                    </option>
+                                                    {roles.map(
+                                                        (role, roleKey) => (
+                                                            <option
+                                                                value={role.id}
+                                                                key={roleKey}
+                                                            >
+                                                                {role.label}
+                                                            </option>
+                                                        )
+                                                    )}
+                                                </select>
+                                                <span
+                                                    className={styles.fi__span}
+                                                >
+                                                    Single or Bulk Image?
+                                                </span>
+                                            </label>
+                                        </div>
+                                    ) : null}
+
+                                    {['table_radio'].includes(
+                                        dataField.type
+                                    ) ? (
+                                        <div
+                                            className={`${styles.formItem} ${styles.fwItem}`}
+                                        >
+                                            <table
+                                                className={styles.contentTable}
+                                            >
+                                                <thead
+                                                    className={
+                                                        styles.gridHeaders
+                                                    }
+                                                >
+                                                    <tr>
+                                                        <th
+                                                            style={{
+                                                                width: '450px',
+                                                            }}
+                                                        >
+                                                            Row Label
+                                                        </th>
+                                                        <th></th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    {dataField.rows?.length >
+                                                    0 ? (
+                                                        dataField.rows.map(
+                                                            (row, rowKey) => (
+                                                                <tr
+                                                                    key={`row-${rowKey}`}
+                                                                >
+                                                                    <td>
+                                                                        <input
+                                                                            type="text"
+                                                                            value={
+                                                                                row.label
+                                                                            }
+                                                                            onChange={(
+                                                                                e
+                                                                            ) => {
+                                                                                const newRows =
+                                                                                    [
+                                                                                        ...dataField.rows,
+                                                                                    ];
+                                                                                newRows[
+                                                                                    rowKey
+                                                                                ].label =
+                                                                                    e.target.value;
+                                                                                setDataField(
+                                                                                    (
+                                                                                        items
+                                                                                    ) => ({
+                                                                                        ...items,
+                                                                                        rows: newRows,
+                                                                                    })
+                                                                                );
+                                                                            }}
+                                                                        />
+                                                                    </td>
+                                                                    <td
+                                                                        style={{
+                                                                            textAlign:
+                                                                                'center',
+                                                                        }}
+                                                                    >
+                                                                        <button
+                                                                            className={
+                                                                                styles.btn
+                                                                            }
+                                                                            style={{
+                                                                                padding:
+                                                                                    '5px 20px',
+                                                                            }}
+                                                                            onClick={
+                                                                                handleDeleteRowOption
+                                                                            }
+                                                                            data-counter={
+                                                                                rowKey
+                                                                            }
+                                                                            data-tooltip-id="system-tooltip"
+                                                                            data-tooltip-content={
+                                                                                'Delete Option'
+                                                                            }
+                                                                        >
+                                                                            <TrashCan
+                                                                                strokeWidth={
+                                                                                    2
+                                                                                }
+                                                                                size={
+                                                                                    12
+                                                                                }
+                                                                            />
+                                                                        </button>
+                                                                    </td>
+                                                                </tr>
+                                                            )
+                                                        )
+                                                    ) : (
+                                                        <tr>
+                                                            <td colSpan="2">
+                                                                No entry has
+                                                                been added.
+                                                            </td>
+                                                        </tr>
+                                                    )}
+                                                </tbody>
+                                                <tfoot>
+                                                    <tr>
+                                                        <td>
+                                                            <input
+                                                                type="text"
+                                                                style={{
+                                                                    padding:
+                                                                        '5px',
+                                                                }}
+                                                                name="label"
+                                                                onChange={
+                                                                    handleRowOption
+                                                                }
+                                                                value={
+                                                                    rowOption.label
+                                                                }
+                                                            />
+                                                        </td>
+                                                        <td
+                                                            style={{
+                                                                textAlign:
+                                                                    'center',
+                                                            }}
+                                                        >
+                                                            <button
+                                                                className={
+                                                                    styles.btn
+                                                                }
+                                                                style={{
+                                                                    padding:
+                                                                        '5px 20px',
+                                                                }}
+                                                                onClick={
+                                                                    handleAddRowOption
+                                                                }
+                                                                data-tooltip-id="system-tooltip"
+                                                                data-tooltip-content={
+                                                                    'Add Option'
+                                                                }
+                                                            >
+                                                                <CirclePlus
+                                                                    strokeWidth={
+                                                                        2
+                                                                    }
+                                                                    size={12}
+                                                                />
+                                                            </button>
+                                                        </td>
+                                                    </tr>
+                                                </tfoot>
+                                            </table>
+                                        </div>
+                                    ) : null}
+
+                                    <div
+                                        className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
+                                    >
+                                        <button
+                                            className={`${styles.btn}`}
+                                            onClick={handleSaveField}
+                                        >
+                                            Save
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Popup>
+
+            <Popup
+                open={modalFormShow}
+                onClose={handleCloseModalForm}
+                closeOnDocumentClick={false}
+            >
+                <div className={styles.modalwrap}>
+                    <div className={styles.modal}>
+                        <div className={styles.modal__header}>
+                            <h1>Update Form Detail</h1>
+                            <button
+                                className={styles.modal__close}
+                                onClick={handleCloseModalForm}
+                            >
+                                <CircleX strokeWidth={1} size={24} />
+                            </button>
+                        </div>
+                        <div className={styles.modal__content}>
+                            <div className={styles.formcontainer}>
+                                <form className={styles.modalForm}>
+                                    <div className={styles.formItem}>
+                                        <label className={styles.fi__label}>
+                                            <input
+                                                type="text"
+                                                name="label"
+                                                value={
+                                                    data.label ? data.label : ''
+                                                }
+                                                onChange={handleChange}
+                                            />
+                                            <span className={styles.fi__span}>
+                                                Label *
+                                            </span>
+                                        </label>
+                                    </div>
+                                    <div
+                                        className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
+                                    >
+                                        <button
+                                            className={`${styles.btn}`}
+                                            onClick={handleSubmit}
+                                        >
+                                            Save
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Popup>
+        </div>
+    );
+}
+
+export default GenericFormBuilder;