@visns-studio/visns-components 4.6.13 → 4.7.1

package/components/crm/Form.jsx

@@ -1,1409 +0,0 @@
-import '../styles/global.css';
-
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { motion } from 'framer-motion';
-import { toast } from 'react-toastify';
-import { saveAs } from 'file-saver';
-import moment from 'moment';
-import parse from 'html-react-parser';
-import _ from 'lodash';
-import ReactDataGrid from '@inovua/reactdatagrid-community';
-import { CircleX } from 'akar-icons';
-import { confirmAlert } from 'react-confirm-alert';
-
-import '@inovua/reactdatagrid-community/index.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
-
-import CustomFetch from './Fetch';
-import Download from './Download';
-import Field from './Field';
-import Table from './DataGrid';
-
-import styles from './styles/Form.module.css';
-
-function Form({
-    ajaxSetting,
-    api,
-    closeModal,
-    columnId,
-    formType,
-    formSettings,
-    fetchTable,
-    mapbox,
-    modalOpen,
-    paramValue,
-    style,
-    type,
-    updateForm,
-    userProfile,
-}) {
-    const navigate = useNavigate();
-    const [fetchTrigger, setFetchTrigger] = useState(false);
-    const [formData, setFormData] = useState({});
-    const [inputClass, setInputClass] = useState({});
-    const [tableData, setTableData] = useState({ columns: [], dataSource: [] });
-    const [uploadProgress, setUploadProgress] = useState(0);
-
-    const childDropdownCallback = (data) => {
-        let _form = { ...formSettings };
-
-        if (formSettings.fields.length > 0) {
-            formSettings.fields.forEach((a, b) => {
-                if (a.id === data.id) {
-                    _form.fields[b].options = data.data;
-                }
-            });
-        }
-
-        if (updateForm) {
-            updateForm(_form);
-        }
-    };
-
-    const handleChange = (e) => {
-        const id = e.target.dataset.jsonkey || e.target.dataset.name;
-        const value = e.target.value;
-        const parent = e.target.dataset.parent ? e.target.dataset.parent : '';
-        let _dataset = {};
-
-        if (e.target[e.target.selectedIndex]) {
-            _dataset = e.target[e.target.selectedIndex].dataset;
-        }
-
-        if (e.target.files) {
-            setFormData((prevState) => ({
-                ...prevState,
-                [id]:
-                    e.target.files.length > 1
-                        ? Array.from(e.target.files)
-                        : e.target.files[0],
-            }));
-        } else {
-            if (parent) {
-                setFormData((prevState) => ({
-                    ...prevState,
-                    [parent]: {
-                        ...prevState[parent],
-                        [id]: value,
-                    },
-                }));
-            } else {
-                setFormData((prevState) => ({
-                    ...prevState,
-                    [id]: value,
-                }));
-            }
-        }
-
-        if (!_.isEmpty(_dataset)) {
-            Object.keys(_dataset).forEach((c) => {
-                if (formData.hasOwnProperty(c)) {
-                    setFormData((prevState) => ({
-                        ...prevState,
-                        [c]: _dataset[c],
-                    }));
-                }
-            });
-        }
-
-        if (e.target.dataset.hasOwnProperty('show')) {
-            const _show =
-                e.target.dataset.show !== ''
-                    ? JSON.parse(e.target.dataset.show)
-                    : [];
-
-            if (_show.length > 0) {
-                _show.forEach((showObject) => {
-                    if (
-                        showObject.hasOwnProperty('id') &&
-                        showObject.hasOwnProperty('value')
-                    ) {
-                        if (
-                            showObject.id !== '' &&
-                            showObject.value.length > 0
-                        ) {
-                            const _fields = formSettings.fields;
-                            let _counter;
-                            _fields.forEach((a, b) => {
-                                if (a.id === showObject.id) {
-                                    _counter = b;
-                                }
-                            });
-
-                            const _valueChecker = parseInt(e.target.value);
-
-                            _fields[_counter].hide = !(
-                                _counter >= 0 &&
-                                showObject.value.includes(_valueChecker)
-                            );
-
-                            if (updateForm) {
-                                updateForm((prevState) => ({
-                                    ...prevState,
-                                    fields: _fields,
-                                }));
-                            }
-                        }
-                    }
-                });
-            }
-        }
-    };
-
-    const handleChangeCheckbox = (e) => {
-        const { checked, name, value } = e.target;
-
-        setFormData((prevFormData) => ({
-            ...prevFormData,
-            [name]: checked
-                ? [...prevFormData.options, value]
-                : prevFormData.options.filter((item) => item !== value),
-        }));
-    };
-
-    const handleChangeColour = (event, color, id) => {
-        if (color && event && id) {
-            setFormData((prevState) => ({
-                ...prevState,
-                [id]: color.hex,
-            }));
-        }
-    };
-
-    const handleChangeNumberFormat = (value, id) => {
-        setFormData((prevState) => ({
-            ...prevState,
-            [id]: value.value,
-        }));
-    };
-
-    const handleChangeDate = (date, id) => {
-        setFormData((prevState) => ({
-            ...prevState,
-            [id]: date,
-        }));
-    };
-
-    const handleChangeRicheditor = (e, value, id) => {
-        if (e) {
-            setFormData((prevState) => ({
-                ...prevState,
-                [id]: value,
-            }));
-        }
-    };
-
-    const handleChangeSelect = (inputValue, action, id) => {
-        const updateFormData = (update) => {
-            setFormData((prevState) => ({
-                ...prevState,
-                ...update,
-            }));
-        };
-
-        switch (action.action) {
-            case 'select-option':
-                updateFormData({ [id]: inputValue });
-
-                Object.keys(inputValue).forEach((a) => {
-                    if (formData.hasOwnProperty(a)) {
-                        updateFormData({ [a]: inputValue[a] });
-                    }
-                });
-
-                formSettings.fields.forEach((f) => {
-                    if (f.id === id && f.trigger) {
-                        switch (f.trigger.type) {
-                            case 'addDays':
-                                let newDate = moment();
-                                let add = false;
-
-                                if (
-                                    inputValue.no_of_days &&
-                                    parseFloat(inputValue.no_of_days) > 0
-                                ) {
-                                    newDate.add(
-                                        parseFloat(inputValue.no_of_days),
-                                        'days'
-                                    );
-                                    add = true;
-                                }
-
-                                if (
-                                    inputValue.no_of_hours &&
-                                    parseFloat(inputValue.no_of_hours) > 0
-                                ) {
-                                    newDate.add(
-                                        parseFloat(inputValue.no_of_hours),
-                                        'hours'
-                                    );
-                                    add = true;
-                                }
-
-                                if (add) {
-                                    updateFormData({
-                                        [f.trigger.id]: newDate.toDate(),
-                                    });
-                                }
-                                break;
-                            case 'setContent':
-                                updateFormData({
-                                    [f.trigger.id]: inputValue[f.trigger.key],
-                                });
-                                break;
-                        }
-                    }
-                });
-                break;
-            case 'clear':
-                updateFormData({ [id]: '' });
-                break;
-            case 'remove-value':
-                updateFormData({ [id]: inputValue });
-                break;
-        }
-    };
-
-    const handleChangeSignature = (e) => {
-        if (e) {
-            e.preventDefault();
-        }
-
-        console.info(`Debug Mode: ${userProfile}`);
-    };
-
-    const handleChangeToggle = (e) => {
-        if (!e) {
-            return;
-        }
-
-        const id = e.target.dataset.jsonkey || e.target.dataset.name;
-
-        if (formData.hasOwnProperty(id)) {
-            setFormData((prevState) => ({
-                ...prevState,
-                [id]: e.target.checked,
-            }));
-        }
-
-        const updateFormData = (dataToUpdate) => {
-            setFormData((prevState) => ({
-                ...prevState,
-                ...dataToUpdate,
-            }));
-        };
-
-        const updatePostalData = (checked) => {
-            const postalData = checked
-                ? {
-                      postal_address1: formData.address1,
-                      postal_address2: formData.address2,
-                      postal_suburb: formData.suburb,
-                      postal_postcode: formData.postcode,
-                      postal_state: formData.state,
-                      postal_country: formData.country,
-                  }
-                : {
-                      postal_address1: '',
-                      postal_address2: '',
-                      postal_suburb: '',
-                      postal_postcode: '',
-                      postal_state: '',
-                      postal_country: '',
-                  };
-
-            updateFormData(postalData);
-        };
-
-        if (id === 'same_address') {
-            updatePostalData(e.target.checked);
-        }
-
-        if (e.target.dataset.show) {
-            const _show = e.target.dataset.show
-                ? JSON.parse(e.target.dataset.show)
-                : [];
-
-            if (_show.length > 0) {
-                const updatedFields = formSettings.fields.map((field) => {
-                    const showObject = _show.find(
-                        (showItem) => showItem.id === field.id
-                    );
-                    if (
-                        showObject &&
-                        showObject.value &&
-                        showObject.value.length > 0
-                    ) {
-                        field.hide = !showObject.value.includes(
-                            e.target.checked
-                        );
-                    }
-                    return field;
-                });
-
-                if (updateForm) {
-                    updateForm((prevState) => ({
-                        ...prevState,
-                        fields: updatedFields,
-                    }));
-                }
-            }
-        }
-    };
-
-    const handleFileDownload = async (d) => {
-        try {
-            console.info(d);
-        } catch (error) {
-            console.error(error);
-        }
-    };
-
-    const autocompleteSelect = (place, id) => {
-        const { address, text, context } = place;
-
-        const address1 = address
-            ? text
-                ? `${address} ${text}`
-                : address
-            : text;
-        const address2 = '';
-        const suburb = context[1]?.text || '';
-        const postcode = context[0]?.text || '';
-
-        const [state, country] =
-            context.length === 5
-                ? [context[3]?.text, context[4]?.text]
-                : [context[2]?.text, context[3]?.text];
-
-        const formDataUpdate = {
-            address1,
-            address2,
-            suburb,
-            postcode,
-            state,
-            country,
-        };
-
-        if (formData.same_address === true || id !== 'address1') {
-            Object.assign(formDataUpdate, {
-                postal_address1: address1,
-                postal_address2: address2,
-                postal_suburb: suburb,
-                postal_postcode: postcode,
-                postal_state: state,
-                postal_country: country,
-            });
-        }
-
-        setFormData((prevState) => ({
-            ...prevState,
-            ...formDataUpdate,
-        }));
-    };
-
-    const parseTableData = (d) => {
-        const dataSource = d;
-        const keys = Object.keys(dataSource[0]);
-        let columns = [];
-
-        keys.forEach((key) => {
-            columns.push({
-                name: key,
-                header: transformKey(key),
-                defaultFlex: 1,
-            });
-        });
-
-        return { columns, dataSource };
-    };
-
-    const renderInputValue = (i, f) => {
-        let value = '';
-
-        if (i.hasOwnProperty('parent') && i.parent) {
-            if (f[i.parent]) {
-                value = i.hasOwnProperty('key')
-                    ? f[i.parent][i.key]
-                    : f[i.parent][i.id];
-            }
-        } else {
-            value = i.hasOwnProperty('key') ? f[i.key] : f[i.id];
-        }
-
-        return value;
-    };
-
-    // Helper function to transform snake_case to Title Case
-    const transformKey = (key) => {
-        return key
-            .replace(/_/g, ' ')
-            .split(' ')
-            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    };
-
-    const handleDownload = async (e) => {
-        try {
-            if (e) {
-                e.preventDefault();
-            }
-
-            const extension = formSettings.download.extension;
-            const filename = formSettings.download.filename;
-            const method = 'POST';
-            const url = formSettings.download.url;
-
-            const res = await Download(url, method, formData);
-
-            const blob = new Blob([res.data], {
-                type: 'application/octet-stream',
-            });
-            saveAs(blob, `${filename}.${extension}`);
-        } catch (error) {
-            console.error(error);
-        }
-    };
-
-    const handleSort = async (e) => {
-        try {
-            if (e) {
-                e.preventDefault();
-            }
-
-            const url = formSettings.sortButton.url;
-            const method = 'POST';
-
-            const res = await CustomFetch(url, method, {
-                id: formData[formSettings.primaryKey],
-            });
-
-            if (res.data.error === '') {
-                toast.success('Files successfully sorted by name.');
-
-                fetchData();
-            }
-        } catch (err) {
-            console.info(err);
-        }
-    };
-
-    const handleCustom = async (s) => {
-        const executeRequest = async () => {
-            try {
-                const url = formSettings.customButton.url;
-                const method = 'POST';
-
-                const res = await CustomFetch(url, method, {
-                    id: formData[formSettings.primaryKey],
-                });
-
-                if (res.data.error === '') {
-                    if (res.data.message) {
-                        toast.success(res.data.message);
-                    }
-
-                    fetchData();
-                } else {
-                    toast.error(res.data.error);
-                }
-            } catch (error) {
-                console.error('Request failed:', error);
-            }
-        };
-
-        try {
-            if (s.customButton.confirmation) {
-                confirmAlert({
-                    title: '',
-                    message:
-                        s.customButton.confirmation.message ||
-                        'Are you sure you want to proceed?',
-                    buttons: [
-                        {
-                            label: 'Yes',
-                            onClick: executeRequest,
-                        },
-                        {
-                            label: 'No',
-                            onClick: () => close(),
-                        },
-                    ],
-                });
-            } else {
-                await executeRequest();
-            }
-        } catch (err) {
-            console.error('An error occurred:', err);
-        }
-    };
-
-    const handleSubmit = async (e) => {
-        try {
-            if (e) {
-                e.preventDefault();
-
-                const { type } = e.target.dataset;
-                let fields = formSettings.fields;
-                let _inputClass = inputClass;
-                let validation = '';
-
-                if (['create', 'update'].includes(formType)) {
-                    fields.forEach((item) => {
-                        if (formType === 'update' && item.createOnly) {
-                            return;
-                        }
-
-                        if (item.required) {
-                            if (!formData[item.id]) {
-                                if (
-                                    item.hasOwnProperty('required_check') &&
-                                    item.required_check &&
-                                    !formData[item.required_check]
-                                ) {
-                                    validation += `${item.label} is a required field.<br/>`;
-                                    _inputClass[item.id] = styles.inputError;
-                                } else {
-                                    validation += `${item.label} is a required field.<br/>`;
-                                    _inputClass[item.id] = styles.inputError;
-                                }
-                            } else {
-                                _inputClass[item.id] = '';
-                            }
-                        } else if (
-                            item.hasOwnProperty('required_rely') &&
-                            item.required_rely &&
-                            formData[item.required_rely] &&
-                            !formData[item.id]
-                        ) {
-                            validation += `${item.label} is a required field.<br/>`;
-                            _inputClass[item.id] = styles.inputError;
-                        } else {
-                            _inputClass[item.id] = '';
-                        }
-                    });
-
-                    setInputClass(_inputClass);
-                }
-
-                if (validation) {
-                    toast.error(<div>{parse(validation)}</div>);
-                } else {
-                    let url = formSettings.url;
-                    let method = 'POST';
-                    let fileUpload = false;
-                    let fileKey = '';
-
-                    if (formSettings.customUrl && formSettings.customMethod) {
-                        url = formSettings.customUrl;
-                        if (formSettings.customDataId) {
-                            url += `/${formData[formSettings.primaryKey]}`;
-                        }
-                        method = formSettings.customMethod;
-                    } else {
-                        switch (formType) {
-                            case 'create':
-                                if (formSettings.json) {
-                                    url += '/jsonStore';
-                                }
-                                break;
-                            case 'update':
-                            case 'delete':
-                                if (formSettings.json) {
-                                    url +=
-                                        formType === 'update'
-                                            ? '/jsonUpdate'
-                                            : `/jsonDelete/${
-                                                  formData[
-                                                      formSettings.primaryKey
-                                                  ]
-                                              }`;
-                                } else {
-                                    url += `/${
-                                        formData[formSettings.primaryKey]
-                                    }`;
-                                }
-                                method =
-                                    formType === 'update' ? 'PUT' : 'DELETE';
-                                break;
-                        }
-                    }
-
-                    if (!_.isEmpty(formData)) {
-                        Object.keys(formData).forEach((item) => {
-                            if (formData[item] instanceof File) {
-                                fileUpload = true;
-                                fileKey = item;
-                            }
-                        });
-                    }
-
-                    if (fileUpload && formData[fileKey]) {
-                        if (Array.isArray(formData[fileKey])) {
-                            const uploadPromises = formData[fileKey].map(
-                                async (file) => {
-                                    const fileRes = await Vapor.store(file, {
-                                        progress: (progress) => {
-                                            setUploadProgress(progress * 100);
-                                        },
-                                    });
-                                    return {
-                                        uuid: fileRes.uuid,
-                                        key: fileRes.key,
-                                        bucket: fileRes.bucket,
-                                        filename: file.name,
-                                        filesize: file.size,
-                                        extension: fileRes.extension,
-                                        file_relationship: fileKey,
-                                    };
-                                }
-                            );
-                            formData['uploadedFiles'] = await Promise.all(
-                                uploadPromises
-                            );
-                        } else {
-                            const fileRes = await Vapor.store(
-                                formData[fileKey],
-                                {
-                                    progress: (progress) => {
-                                        setUploadProgress(progress * 100);
-                                    },
-                                }
-                            );
-                            formData['uuid'] = fileRes.uuid;
-                            formData['key'] = fileRes.key;
-                            formData['bucket'] = fileRes.bucket;
-                            formData['filename'] = formData[fileKey].name;
-                            formData['filesize'] = formData[fileKey].size;
-                            formData['extension'] = fileRes.extension;
-                            formData['file_relationship'] = fileKey;
-                        }
-                    }
-
-                    // Transform keys with dots into nested objects
-                    const payload = Object.keys(formData).reduce((acc, key) => {
-                        if (key.includes('.')) {
-                            const [root, sub] = key.split('.');
-                            if (!acc[root]) acc[root] = {};
-                            acc[root][sub] = formData[key];
-                        } else {
-                            acc[key] = formData[key];
-                        }
-                        return acc;
-                    }, {});
-
-                    console.info(payload);
-
-                    const res = await CustomFetch(url, method, payload);
-
-                    if (res.data.error === '') {
-                        if (fetchTable) fetchTable();
-                        if (closeModal) {
-                            closeModal();
-                            if (type === 'saveAnother') {
-                                fetchData();
-                                modalOpen('create', 0);
-                            }
-                        }
-                        toast.success(
-                            formSettings?.save?.toast?.success ||
-                                'Entry successfully saved into the system.'
-                        );
-
-                        if (formSettings.redirect && res.data.data?.id) {
-                            navigate(
-                                `${formSettings.redirect}${res.data.data.id}`
-                            );
-                        }
-
-                        if (res.data.redirect) {
-                            navigate(res.data.redirect);
-                        }
-
-                        if (
-                            formSettings?.save?.return?.type === 'table' &&
-                            formSettings?.save?.return?.param
-                        ) {
-                            if (
-                                res.data[formSettings.save.return.param]
-                                    ?.length > 0
-                            ) {
-                                const td = parseTableData(
-                                    res.data[formSettings.save.return.param]
-                                );
-                                setTableData((prevState) => ({
-                                    ...prevState,
-                                    ...td,
-                                }));
-                            } else {
-                                setTableData((prevState) => ({
-                                    ...prevState,
-                                    columns: [],
-                                    dataSource: [],
-                                }));
-                            }
-                        }
-                    }
-                }
-            }
-        } catch (err) {
-            console.error(err);
-        }
-    };
-
-    const fetchData = async () => {
-        let _formData = { ...formData };
-
-        if (formSettings.fields.length > 0) {
-            formSettings.fields.forEach((item) => {
-                const { id, value, type, parent, urlParam } = item;
-                let newValue = value;
-
-                if (urlParam) {
-                    newValue = paramValue;
-                }
-
-                if (parent) {
-                    _formData[parent] = {
-                        ..._formData[parent],
-                        [id]: newValue ? newValue : '',
-                    };
-                } else {
-                    if (newValue !== '') {
-                        if (['date', 'datetime'].includes(type)) {
-                            _formData[id] =
-                                newValue instanceof Date
-                                    ? newValue
-                                    : moment(newValue).toDate();
-                        } else {
-                            _formData[id] = newValue;
-                        }
-                    } else {
-                        _formData[id] = '';
-                    }
-                }
-            });
-        }
-
-        if (formType !== 'create' && columnId > 0) {
-            try {
-                let urlSuffix,
-                    method,
-                    payload = {};
-
-                const getDataId = () => {
-                    for (const item of ajaxSetting.where) {
-                        if (
-                            item.hasOwnProperty('urlParam') &&
-                            item.urlParam === 'dataId'
-                        ) {
-                            return item.value;
-                        }
-                    }
-                    return 0;
-                };
-
-                if (
-                    formSettings.hasOwnProperty('json') &&
-                    formSettings.json === true
-                ) {
-                    let dataId = getDataId();
-
-                    urlSuffix = '/jsonGet';
-                    method = 'POST';
-                    payload = { id: columnId, dataId };
-                } else {
-                    urlSuffix = `/${columnId}`;
-                    method = 'GET';
-                }
-
-                const url = `${formSettings.url}${urlSuffix}`;
-                const result = await CustomFetch(url, method, payload);
-
-                const data = result.hasOwnProperty('data')
-                    ? result.data
-                    : result;
-
-                const updatedFormData = { ..._formData };
-
-                Object.keys(updatedFormData).forEach((item) => {
-                    let tempRes = '';
-                    let tempResKey = '';
-                    let field = formSettings.fields.find((f) => f.id === item);
-
-                    if (data[item] === undefined) {
-                        if (field && field.hasOwnProperty('relation')) {
-                            let tempRes = data[field.relation];
-
-                            if (
-                                [
-                                    'multi-dropdown',
-                                    'multi-dropdown-ajax',
-                                    'async-dropdown-ajax',
-                                ].includes(field.type) &&
-                                Array.isArray(tempRes)
-                            ) {
-                                tempRes = tempRes.map((a) => ({
-                                    value: a.name,
-                                    label: a.name,
-                                }));
-                            }
-
-                            if (tempRes) {
-                                const relationFrom = field.hasOwnProperty(
-                                    'relation_from'
-                                )
-                                    ? field.relation_from
-                                    : field.id;
-                                tempRes = Array.isArray(tempRes)
-                                    ? tempRes[0][relationFrom]
-                                    : tempRes[relationFrom];
-                            } else {
-                                tempRes = '';
-                            }
-
-                            updatedFormData[item] = tempRes;
-                        }
-
-                        if (
-                            field &&
-                            field.hasOwnProperty('relation') &&
-                            [
-                                'multi-dropdown',
-                                'multi-dropdown-ajax',
-                                'async-dropdown-ajax',
-                            ].includes(field.type)
-                        ) {
-                            let tempObj = data;
-                            let tempRes = {};
-
-                            const relationLength = Array.isArray(field.relation)
-                                ? field.relation.length
-                                : 1;
-                            for (let i = 0; i < relationLength; i++) {
-                                tempObj = tempObj[field.relation[i]];
-                            }
-
-                            if (tempObj !== undefined && tempObj !== null) {
-                                let labelValue;
-
-                                if (Array.isArray(field.relationName)) {
-                                    labelValue = field.relationName.map(
-                                        (name) => `${tempObj[name]} `
-                                    );
-                                } else {
-                                    labelValue = tempObj[field.relationName];
-                                }
-
-                                tempRes = {
-                                    value: tempObj.id,
-                                    label: labelValue,
-                                };
-                            }
-
-                            updatedFormData[field.id] = tempRes;
-                        }
-
-                        if (
-                            field &&
-                            field.hasOwnProperty('relation') &&
-                            ['address', 'text'].includes(field.type)
-                        ) {
-                            let tempObj = data;
-                            let tempRes = '';
-
-                            const relationLength = Array.isArray(field.relation)
-                                ? field.relation.length
-                                : 1;
-                            for (let i = 0; i < relationLength; i++) {
-                                tempObj = tempObj[field.relation[i]];
-                            }
-
-                            if (tempObj !== undefined && tempObj !== null) {
-                                let labelValue;
-
-                                if (Array.isArray(field.relationName)) {
-                                    labelValue = field.relationName.map(
-                                        (name) => `${tempObj[name]} `
-                                    );
-                                } else {
-                                    labelValue = tempObj[field.relationName];
-                                }
-
-                                tempRes = labelValue;
-                            }
-
-                            updatedFormData[field.id] = tempRes;
-                        }
-
-                        if (field && field.hasOwnProperty('parent')) {
-                            let tempObj = data;
-                            let tempRes = '';
-
-                            tempRes = tempObj[field.parent][field.id];
-
-                            updatedFormData[field.parent][field.id] = tempRes;
-                        }
-
-                        if (item.includes('.')) {
-                            let keys = item.split('.');
-
-                            let value = data;
-
-                            for (let key of keys) {
-                                value = value[key];
-                            }
-
-                            updatedFormData[item] = value;
-                        }
-                    } else {
-                        if (
-                            field &&
-                            ['date', 'datetime', 'time'].includes(field.type)
-                        ) {
-                            if (data[item] === null || data[item] === '') {
-                                updatedFormData[item] = '';
-                            } else {
-                                const momentDate = moment(data[item]);
-                                updatedFormData[item] = momentDate.isValid()
-                                    ? momentDate.toDate()
-                                    : null;
-                            }
-                        } else if (
-                            field &&
-                            field.hasOwnProperty('relation') &&
-                            !field.multi
-                        ) {
-                            const relationTypes = [
-                                'dropdown-ajax',
-                                'multi-dropdown',
-                                'multi-dropdown-ajax',
-                                'async-dropdown-ajax',
-                            ];
-
-                            if (relationTypes.includes(field.type)) {
-                                let relationLength = Array.isArray(
-                                    field.relation
-                                )
-                                    ? field.relation.length
-                                    : 1;
-                                let tempObj = data;
-                                let relationFound = false;
-
-                                for (let i = 0; i < relationLength; i++) {
-                                    if (tempObj[field.relation[i]]) {
-                                        relationFound = true;
-                                        tempObj = tempObj[field.relation[i]];
-                                    }
-                                }
-
-                                if (relationFound === false) {
-                                    tempObj = {};
-                                }
-
-                                let labelValue;
-
-                                if (Array.isArray(field.relationName)) {
-                                    labelValue = field.relationName.map(
-                                        (name) => `${tempObj[name]} `
-                                    );
-                                } else {
-                                    labelValue = tempObj[field.relationName];
-                                }
-
-                                tempRes =
-                                    tempObj !== undefined &&
-                                    tempObj !== null &&
-                                    tempObj.id
-                                        ? {
-                                              value: tempObj.id,
-                                              label: labelValue,
-                                          }
-                                        : {};
-
-                                tempResKey = field.id;
-                            }
-                        } else {
-                            updatedFormData[item] = data[item];
-                        }
-                    }
-
-                    if (
-                        item === tempResKey &&
-                        tempRes &&
-                        tempRes.hasOwnProperty('value') &&
-                        tempRes.hasOwnProperty('label')
-                    ) {
-                        updatedFormData[item] = tempRes;
-                    }
-                });
-
-                setFormData(updatedFormData);
-
-                setFetchTrigger(!fetchTrigger);
-            } catch (error) {
-                toast.error('Failed to fetch data:', error);
-            }
-        } else {
-            setFormData(_formData);
-        }
-    };
-
-    useEffect(() => {
-        fetchData();
-    }, []);
-
-    useEffect(() => {
-        formSettings.fields.forEach((field) => {
-            const showConditions = field.show || [];
-
-            showConditions.forEach((showObject) => {
-                const { id, value } = showObject;
-
-                if (id !== '' && value.length > 0) {
-                    const targetField = formSettings.fields.find(
-                        (f) => f.id === id
-                    );
-
-                    if (targetField) {
-                        const valueChecker = formData[field.id];
-
-                        if (valueChecker) {
-                            const shouldShow =
-                                valueChecker && value.includes(valueChecker);
-
-                            targetField.hide = !shouldShow;
-
-                            if (updateForm) {
-                                updateForm((prevState) => ({
-                                    ...prevState,
-                                    fields: [...formSettings.fields],
-                                }));
-                            }
-                        }
-                    }
-                }
-            });
-        });
-    }, [fetchTrigger]);
-
-    if (type && type === 'inline') {
-        return (
-            <div className={styles.formcontainer}>
-                <form className={styles.modalForm}>
-                    {formSettings.fields.map((item, index) => {
-                        if (item.hasOwnProperty('hide') && item.hide === true) {
-                            return null;
-                        }
-                        if (
-                            item.hasOwnProperty('createOnly') &&
-                            item.createOnly === true &&
-                            formType === 'update'
-                        ) {
-                            return null;
-                        }
-                        if (
-                            item.hasOwnProperty('updateOnly') &&
-                            item.updateOnly === true &&
-                            formType === 'create'
-                        ) {
-                            return null;
-                        }
-
-                        switch (item.type) {
-                            case 'table':
-                                let ajaxSetting = item.ajaxSetting;
-
-                                item.ajaxSetting.where.forEach((a, b) => {
-                                    if (a.urlParam) {
-                                        ajaxSetting.where[b].value = paramValue;
-                                    }
-                                });
-
-                                return (
-                                    <div
-                                        className={styles.grid__full}
-                                        key={
-                                            index +
-                                            '-fields-' +
-                                            (item.hasOwnProperty('key')
-                                                ? item.id + '-' + item.key
-                                                : item.id)
-                                        }
-                                    >
-                                        <Table
-                                            ajaxSetting={ajaxSetting}
-                                            form={item.form}
-                                            columns={item.columns}
-                                            mapbox={mapbox}
-                                            paramValue={paramValue}
-                                            settings={item.settings}
-                                            style={
-                                                userProfile?.settings?.style ||
-                                                {}
-                                            }
-                                        />
-                                    </div>
-                                );
-                            default:
-                                return (
-                                    <Field
-                                        api={api}
-                                        autocompleteCallback={
-                                            autocompleteSelect
-                                        }
-                                        childDropdownCallback={
-                                            childDropdownCallback
-                                        }
-                                        fetchData={fetchData}
-                                        formData={formData}
-                                        inputClass={inputClass}
-                                        inputValue={renderInputValue(
-                                            item,
-                                            formData
-                                        )}
-                                        key={
-                                            index +
-                                            '-fields-' +
-                                            (item.hasOwnProperty('key')
-                                                ? item.id + '-' + item.key
-                                                : item.id)
-                                        }
-                                        mapbox={mapbox}
-                                        onChange={handleChange}
-                                        onChangeCheckbox={handleChangeCheckbox}
-                                        onChangeDate={handleChangeDate}
-                                        onChangeNumberFormat={
-                                            handleChangeNumberFormat
-                                        }
-                                        onChangeRicheditor={
-                                            handleChangeRicheditor
-                                        }
-                                        onChangeSelect={handleChangeSelect}
-                                        onChangeSignature={
-                                            handleChangeSignature
-                                        }
-                                        onChangeToggle={handleChangeToggle}
-                                        settings={item}
-                                        setFormData={setFormData}
-                                        style={style}
-                                        uploadProgress={uploadProgress}
-                                        userProfile={userProfile}
-                                    />
-                                );
-                        }
-                    })}
-                    <div className={`${styles.formItem} ${styles.fwItem}`}>
-                        <motion.div
-                            className={styles.progress__bar}
-                            initial={{ width: '0%' }}
-                            animate={{ width: uploadProgress + '%' }}
-                            transition={{
-                                duration: 3,
-                                ease: [0.165, 0.84, 0.44, 1.0],
-                            }}
-                        />
-                    </div>
-                    {tableData?.dataSource?.length > 0 && (
-                        <div className={`${styles.formItem} ${styles.fwItem}`}>
-                            <ReactDataGrid
-                                idProperty="form-table-result"
-                                columns={tableData.columns}
-                                dataSource={tableData.dataSource}
-                                style={{ minHeight: 550 }}
-                                showActiveRowIndicator={false}
-                            />
-                        </div>
-                    )}
-                </form>
-                <div className={styles.polActions}>
-                    {formSettings.hasOwnProperty('customButton') &&
-                    formSettings.customButton.url ? (
-                        <button
-                            className={styles.btn}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                handleCustom(formSettings);
-                            }}
-                        >
-                            {formSettings.customButton.label
-                                ? formSettings.customButton.label
-                                : 'Sort'}
-                        </button>
-                    ) : null}
-
-                    {formSettings?.download?.button?.label && (
-                        <button className={styles.btn} onClick={handleDownload}>
-                            {formSettings.download.button.label}
-                        </button>
-                    )}
-
-                    {formSettings.hasOwnProperty('sortButton') &&
-                    formSettings.sortButton.url ? (
-                        <button className={styles.btn} onClick={handleSort}>
-                            {formSettings.sortButton.label
-                                ? formSettings.sortButton.label
-                                : 'Sort'}
-                        </button>
-                    ) : null}
-
-                    <button className={styles.btn} onClick={handleSubmit}>
-                        {formSettings?.save?.button?.label
-                            ? formSettings.save.button.label
-                            : 'Save'}
-                    </button>
-                </div>
-            </div>
-        );
-    } else {
-        return (
-            <div className="modalwrap top--modal">
-                <div className="modal">
-                    <div className="modal__header">
-                        <h1>{formSettings[formType]?.title}</h1>
-                        <button className="modal__close" onClick={closeModal}>
-                            <CircleX strokeWidth={1} size={24} />
-                        </button>
-                    </div>
-                    <div className="modal__content">
-                        <div className={styles.formcontainer}>
-                            <form className={styles.modalForm}>
-                                {formSettings?.fields?.map((item, index) => {
-                                    if (
-                                        item.hasOwnProperty('hide') &&
-                                        item.hide === true
-                                    ) {
-                                        return null;
-                                    }
-                                    if (
-                                        item.hasOwnProperty('createOnly') &&
-                                        item.createOnly === true &&
-                                        formType === 'update'
-                                    ) {
-                                        return null;
-                                    }
-                                    if (
-                                        item.hasOwnProperty('updateOnly') &&
-                                        item.updateOnly === true &&
-                                        formType === 'create'
-                                    ) {
-                                        return null;
-                                    }
-
-                                    return (
-                                        <Field
-                                            api={api}
-                                            autocompleteCallback={
-                                                autocompleteSelect
-                                            }
-                                            childDropdownCallback={
-                                                childDropdownCallback
-                                            }
-                                            fetchData={fetchData}
-                                            formData={formData}
-                                            inputClass={inputClass}
-                                            inputValue={renderInputValue(
-                                                item,
-                                                formData
-                                            )}
-                                            key={
-                                                index +
-                                                '-fields-' +
-                                                (item.hasOwnProperty('key')
-                                                    ? item.id + '-' + item.key
-                                                    : item.id)
-                                            }
-                                            mapbox={mapbox}
-                                            onChange={handleChange}
-                                            onChangeCheckbox={
-                                                handleChangeCheckbox
-                                            }
-                                            onChangeColour={handleChangeColour}
-                                            onChangeDate={handleChangeDate}
-                                            onChangeNumberFormat={
-                                                handleChangeNumberFormat
-                                            }
-                                            onChangeRicheditor={
-                                                handleChangeRicheditor
-                                            }
-                                            onChangeSignature={
-                                                handleChangeSignature
-                                            }
-                                            onChangeSelect={handleChangeSelect}
-                                            onChangeToggle={handleChangeToggle}
-                                            onFileDownload={handleFileDownload}
-                                            settings={item}
-                                            setFormData={setFormData}
-                                            style={style}
-                                            uploadProgress={uploadProgress}
-                                            userProfile={userProfile}
-                                        />
-                                    );
-                                })}
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
-                                >
-                                    <motion.div
-                                        className={styles.progress__bar}
-                                        initial={{ width: '0%' }}
-                                        animate={{
-                                            width: uploadProgress + '%',
-                                        }}
-                                        transition={{
-                                            duration: 3,
-                                            ease: [0.165, 0.84, 0.44, 1.0],
-                                        }}
-                                    />
-                                </div>
-                                {formType === 'create' &&
-                                formSettings.create?.hasOwnProperty(
-                                    'saveAnother'
-                                ) ? (
-                                    <>
-                                        <div
-                                            className={`${styles.formItem} ${styles.lastItem}`}
-                                        >
-                                            <button
-                                                className={styles.btn}
-                                                onClick={handleSubmit}
-                                                data-type="save"
-                                            >
-                                                Save & Close
-                                            </button>
-                                        </div>
-                                        <div
-                                            className={`${styles.formItem} ${styles.lastItem}`}
-                                        >
-                                            <button
-                                                className={styles.btn}
-                                                onClick={handleSubmit}
-                                                data-type="saveAnother"
-                                            >
-                                                Save & Create Another
-                                            </button>
-                                        </div>
-                                    </>
-                                ) : (
-                                    <div
-                                        className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
-                                    >
-                                        <button
-                                            className={styles.btn}
-                                            onClick={handleSubmit}
-                                            data-type="save"
-                                        >
-                                            Save
-                                        </button>
-                                    </div>
-                                )}
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default Form;