@visns-studio/visns-components 3.7.8 → 3.7.9

package/components/crm/DataGrid.jsx

@@ -179,7 +179,6 @@ const DataGrid = forwardRef(
             },
             [ajaxSetting, dataReload, dSearch]
         );
-        const [dropdownData, setDropdownData] = useState({});
         const [filterDataSource, setFilterDataSource] = useState([]);
         const [filterValue, setFilterValue] = useState([]);
         const [gridColumns, setGridColumns] = useState([]);
@@ -1052,24 +1051,6 @@ const DataGrid = forwardRef(
             []
         );
 
-        const getDropdownData = async (id, url, fields) => {
-            try {
-                // Check if the data for the given id already exists
-                if (!dropdownData[id]) {
-                    const res = await CustomFetch(url, 'POST', {
-                        fields: fields,
-                    });
-
-                    setDropdownData((prevState) => ({
-                        ...prevState,
-                        [id]: res.data.data,
-                    }));
-                }
-            } catch (err) {
-                console.error(err);
-            }
-        };
-
         const handleDropdownUpdate = async (id, url, method, value) => {
             try {
                 const res = await CustomFetch(url, method, {
@@ -1092,1128 +1073,1271 @@ const DataGrid = forwardRef(
             }
         };
 
-        useEffect(() => {
-            columns.forEach((column) => {
-                switch (column.type) {
-                    case 'dropdown':
-                        getDropdownData(column.id, column.url, column.fields);
-                        break;
+        const getDropdownData = async (ids, url, fields) => {
+            // Concatenate id array into a single string if it's an array
+            const uniqueId = Array.isArray(ids) ? ids.join('') : ids;
+
+            // Return a promise that includes the concatenated uniqueId in the resolution
+            return new Promise(async (resolve, reject) => {
+                try {
+                    const res = await CustomFetch(url, 'POST', { fields });
+                    resolve({ [uniqueId]: res.data.data }); // Correctly use uniqueId as the key
+                } catch (err) {
+                    console.error(err);
+                    reject(err); // Reject the promise if there's an error
                 }
             });
-        }, [columns]);
+        };
 
         useEffect(() => {
-            const renderColumn = (column) => {
-                let childValue;
-                let date;
-                let filterEditor = null;
-                let filterEditorProps = null;
-                let fileUrl = null;
-                let icons = [];
-                let relationName;
-                let selectedDataSource = null;
-                let stage;
-                let columnStyle;
-                let value;
-
-                const commonProps = {
-                    header: column.label,
-                    defaultFlex: 1,
-                    link: column.link ?? {},
-                    minWidth: column.minWidth ?? undefined,
-                    maxWidth: column.maxWidth ?? undefined,
-                    textAlign: column.textAlign ?? undefined,
-                    textVerticalAlign:
-                        style && style.text_vertical_align
-                            ? style.text_vertical_align
-                            : 'center',
-                    style: (cellProps) => {
-                        const { id, value } = cellProps;
-                        let columnStyle = {};
-
-                        if (
-                            column.styleCondition &&
-                            column.styleCondition.key
-                        ) {
-                            if (value) {
-                                columnStyle = {
-                                    ...(column.style ?? {}),
-                                    margin: '0px',
-                                };
-                            }
-                        } else {
-                            columnStyle = {
-                                ...(column.style ?? {}),
-                                margin: '0px',
-                            };
-                        }
-
-                        return columnStyle;
-                    },
-                    type: column.type,
-                };
+            const dropdownFetches = columns
+                .filter((column) => column.type === 'dropdown')
+                .map((column) =>
+                    getDropdownData(column.id, column.url, column.fields)
+                );
 
-                switch (column.type) {
-                    case 'relation':
-                    case 'relationArray':
-                        relationName = column.id.reduce(
-                            (acc, id) => acc + `${id}.`,
-                            ''
-                        );
-                        relationName += column.nameFrom;
+            Promise.all(dropdownFetches)
+                .then((results) => {
+                    // Merge all resolved objects into a single object
+                    const dropdownData = results.reduce((acc, result) => {
+                        return { ...acc, ...result };
+                    }, {});
+
+                    const renderColumn = (column) => {
+                        let childValue;
+                        let columnId;
+                        let date;
+                        let filterEditor = null;
+                        let filterEditorProps = null;
+                        let fileUrl = null;
+                        let icons = [];
+                        let relationName;
+                        let selectedDataSource = null;
+                        let stage;
+                        let columnStyle;
+                        let value;
+
+                        const commonProps = {
+                            header: column.label,
+                            defaultFlex: 1,
+                            link: column.link ?? {},
+                            minWidth: column.minWidth ?? undefined,
+                            maxWidth: column.maxWidth ?? undefined,
+                            textAlign: column.textAlign ?? undefined,
+                            textVerticalAlign:
+                                style && style.text_vertical_align
+                                    ? style.text_vertical_align
+                                    : 'center',
+                            style: (cellProps) => {
+                                const { id, value } = cellProps;
+                                let columnStyle = {};
 
-                        selectedDataSource = filterDataSource.reduce(
-                            (acc, fds) => {
-                                if (fds.id === relationName) {
-                                    return fds.dataset;
-                                }
-                                return acc;
-                            },
-                            null
-                        );
-                        break;
-                    default:
-                        selectedDataSource = filterDataSource.reduce(
-                            (acc, fds) => {
-                                if (fds.id === column.id) {
-                                    return fds.dataset;
+                                if (
+                                    column.styleCondition &&
+                                    column.styleCondition.key
+                                ) {
+                                    if (value) {
+                                        columnStyle = {
+                                            ...(column.style ?? {}),
+                                            margin: '0px',
+                                        };
+                                    }
+                                } else {
+                                    columnStyle = {
+                                        ...(column.style ?? {}),
+                                        margin: '0px',
+                                    };
                                 }
-                                return acc;
+
+                                return columnStyle;
                             },
-                            null
-                        );
-                        break;
-                }
+                            type: column.type,
+                        };
 
-                if (column.filter && column.filter.type) {
-                    switch (column.filter.type) {
-                        case 'date':
-                            filterEditor = DateFilter;
-                            filterEditorProps = (props, { index }) => {
-                                return {
-                                    dateFormat: 'DD-MM-YYYY',
-                                    placeholder: column.filter.placeholder
-                                        ? column.filter.placeholder
-                                        : 'Select Date',
-                                };
-                            };
-                            break;
-                        case 'number':
-                            filterEditor = NumberFilter;
-                            break;
-                        case 'select':
-                            filterEditor = SelectFilter;
-                            filterEditorProps = {
-                                multiple: column.filter.operator === 'inlist',
-                                wrapMultiple:
-                                    column.filter.operator !== 'inlist',
-                                placeholder: column.filter.placeholder
-                                    ? column.filter.placeholder
-                                    : 'All Options',
-                                dataSource: selectedDataSource,
-                            };
-                            break;
-                        default:
+                        switch (column.type) {
+                            case 'relation':
+                            case 'relationArray':
+                                relationName = column.id.reduce(
+                                    (acc, id) => acc + `${id}.`,
+                                    ''
+                                );
+                                relationName += column.nameFrom;
+
+                                selectedDataSource = filterDataSource.reduce(
+                                    (acc, fds) => {
+                                        if (fds.id === relationName) {
+                                            return fds.dataset;
+                                        }
+                                        return acc;
+                                    },
+                                    null
+                                );
+                                break;
+                            default:
+                                selectedDataSource = filterDataSource.reduce(
+                                    (acc, fds) => {
+                                        if (fds.id === column.id) {
+                                            return fds.dataset;
+                                        }
+                                        return acc;
+                                    },
+                                    null
+                                );
+                                break;
+                        }
+
+                        if (column.filter && column.filter.type) {
+                            switch (column.filter.type) {
+                                case 'date':
+                                    filterEditor = DateFilter;
+                                    filterEditorProps = (props, { index }) => {
+                                        return {
+                                            dateFormat: 'DD-MM-YYYY',
+                                            placeholder: column.filter
+                                                .placeholder
+                                                ? column.filter.placeholder
+                                                : 'Select Date',
+                                        };
+                                    };
+                                    break;
+                                case 'number':
+                                    filterEditor = NumberFilter;
+                                    break;
+                                case 'select':
+                                    filterEditor = SelectFilter;
+                                    filterEditorProps = {
+                                        multiple:
+                                            column.filter.operator === 'inlist',
+                                        wrapMultiple:
+                                            column.filter.operator !== 'inlist',
+                                        placeholder: column.filter.placeholder
+                                            ? column.filter.placeholder
+                                            : 'All Options',
+                                        dataSource: selectedDataSource,
+                                    };
+                                    break;
+                                default:
+                                    filterEditor = null;
+                                    filterEditorProps = null;
+                                    break;
+                            }
+                        } else {
                             filterEditor = null;
                             filterEditorProps = null;
-                            break;
-                    }
-                } else {
-                    filterEditor = null;
-                    filterEditorProps = null;
-                }
-
-                switch (column.type) {
-                    case 'address':
-                        return {
-                            ...commonProps,
-                            name: `${column.type}.${column.id}`,
-                            filterEditor: filterEditor,
-                            filterEditorProps: filterEditorProps,
-                            render: ({ data }) => {
-                                const addressFields = [
-                                    'address1',
-                                    'address2',
-                                    'suburb',
-                                    'postcode',
-                                ];
+                        }
 
-                                const addressValue = addressFields
-                                    .filter((field) => data[field])
-                                    .map((field) => data[field])
-                                    .join(' ');
+                        switch (column.type) {
+                            case 'address':
+                                return {
+                                    ...commonProps,
+                                    name: `${column.type}.${column.id}`,
+                                    filterEditor: filterEditor,
+                                    filterEditorProps: filterEditorProps,
+                                    render: ({ data }) => {
+                                        const addressFields = [
+                                            'address1',
+                                            'address2',
+                                            'suburb',
+                                            'postcode',
+                                        ];
+
+                                        const addressValue = addressFields
+                                            .filter((field) => data[field])
+                                            .map((field) => data[field])
+                                            .join(' ');
 
-                                const stateValue =
-                                    data.state?.name || data.state || '';
+                                        const stateValue =
+                                            data.state?.name ||
+                                            data.state ||
+                                            '';
 
-                                const value = `${addressValue} ${stateValue}`;
+                                        const value = `${addressValue} ${stateValue}`;
 
-                                return <span>{value}</span>;
-                            },
-                        };
-                    case 'age':
-                        return {
-                            ...commonProps,
-                            type: 'number',
-                            filterEditor: filterEditor,
-                            name: `${column.type}.${column.id}`,
-                            render: ({ data }) => {
-                                value = column.id.reduce((acc, id) => {
-                                    if (acc === '') {
-                                        return data[id];
-                                    } else {
-                                        return acc ? acc[id] : '';
-                                    }
-                                }, '');
-
-                                if (value !== '' && value !== null) {
-                                    date = moment(value);
-
-                                    return (
-                                        <span>
-                                            {moment().diff(
-                                                date,
-                                                column.duration
-                                                    ? column.duration
-                                                    : 'years'
-                                            )}
-                                        </span>
-                                    );
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'arrayCount':
-                        return {
-                            ...commonProps,
-                            name: `${column.type}.${column.id}`,
-                            sortable: false,
-                            render: ({ data }) => {
-                                if (data && data[column.id]) {
-                                    return data[column.id].length;
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'boolean':
-                        return {
-                            ...commonProps,
-                            name: `${column.type}.${column.id}`,
-                            sortable: false,
-                            render: ({ data }) => {
-                                if (data[column.id]) {
-                                    return 'Yes';
-                                } else {
-                                    return 'No';
-                                }
-                            },
-                        };
-                    case 'coding':
-                        return {
-                            ...commonProps,
-                            name: `${column.type}.${column.id}`,
-                            sortable: false,
-                            render: ({ data }) => {
-                                if (data) {
-                                    return handleCoding(column, data);
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'colour':
-                        return {
-                            ...commonProps,
-                            name: `${column.type}.${column.id}`,
-                            sortable: false,
-                            render: ({ data }) => {
-                                if (data && data[column.id]) {
-                                    return (
-                                        <div
-                                            style={{
-                                                width: '25px',
-                                                height: '25px',
-                                                borderRadius: '10px',
-                                                overflow: 'hidden',
-                                            }}
-                                        >
-                                            <div
-                                                style={{
-                                                    background:
-                                                        data[column.id] +
-                                                        ' none repeat scroll 0% 0%',
-                                                    height: '100%',
-                                                    width: '100%',
-                                                    cursor: 'pointer',
-                                                    position: 'relative',
-                                                    outline:
-                                                        'currentcolor none medium',
-                                                }}
-                                            ></div>
-                                        </div>
-                                    );
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'created_by':
-                        return {
-                            ...commonProps,
-                            name: `${column.type}.${column.id}`,
-                            sortable: false,
-                            render: ({ data }) => {
-                                if (
-                                    data.audits[0] &&
-                                    data.audits[0].user &&
-                                    data.audits[0].user.name
-                                ) {
-                                    value = data.audits[0].user.name;
+                                        return <span>{value}</span>;
+                                    },
+                                };
+                            case 'age':
+                                return {
+                                    ...commonProps,
+                                    type: 'number',
+                                    filterEditor: filterEditor,
+                                    name: `${column.type}.${column.id}`,
+                                    render: ({ data }) => {
+                                        value = column.id.reduce((acc, id) => {
+                                            if (acc === '') {
+                                                return data[id];
+                                            } else {
+                                                return acc ? acc[id] : '';
+                                            }
+                                        }, '');
+
+                                        if (value !== '' && value !== null) {
+                                            date = moment(value);
+
+                                            return (
+                                                <span>
+                                                    {moment().diff(
+                                                        date,
+                                                        column.duration
+                                                            ? column.duration
+                                                            : 'years'
+                                                    )}
+                                                </span>
+                                            );
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'arrayCount':
+                                return {
+                                    ...commonProps,
+                                    name: `${column.type}.${column.id}`,
+                                    sortable: false,
+                                    render: ({ data }) => {
+                                        if (data && data[column.id]) {
+                                            return data[column.id].length;
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'boolean':
+                                return {
+                                    ...commonProps,
+                                    name: `${column.type}.${column.id}`,
+                                    sortable: false,
+                                    render: ({ data }) => {
+                                        if (data[column.id]) {
+                                            return 'Yes';
+                                        } else {
+                                            return 'No';
+                                        }
+                                    },
+                                };
+                            case 'coding':
+                                return {
+                                    ...commonProps,
+                                    name: `${column.type}.${column.id}`,
+                                    sortable: false,
+                                    render: ({ data }) => {
+                                        if (data) {
+                                            return handleCoding(column, data);
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'colour':
+                                return {
+                                    ...commonProps,
+                                    name: `${column.type}.${column.id}`,
+                                    sortable: false,
+                                    render: ({ data }) => {
+                                        if (data && data[column.id]) {
+                                            return (
+                                                <div
+                                                    style={{
+                                                        width: '25px',
+                                                        height: '25px',
+                                                        borderRadius: '10px',
+                                                        overflow: 'hidden',
+                                                    }}
+                                                >
+                                                    <div
+                                                        style={{
+                                                            background:
+                                                                data[
+                                                                    column.id
+                                                                ] +
+                                                                ' none repeat scroll 0% 0%',
+                                                            height: '100%',
+                                                            width: '100%',
+                                                            cursor: 'pointer',
+                                                            position:
+                                                                'relative',
+                                                            outline:
+                                                                'currentcolor none medium',
+                                                        }}
+                                                    ></div>
+                                                </div>
+                                            );
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'created_by':
+                                return {
+                                    ...commonProps,
+                                    name: `${column.type}.${column.id}`,
+                                    sortable: false,
+                                    render: ({ data }) => {
+                                        if (
+                                            data.audits[0] &&
+                                            data.audits[0].user &&
+                                            data.audits[0].user.name
+                                        ) {
+                                            value = data.audits[0].user.name;
 
-                                    return <span>{value}</span>;
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'currency':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            render: ({ data }) => {
-                                if (data) {
-                                    data = numeral(data[column.id]).format(
-                                        '$0,0.00'
-                                    );
+                                            return <span>{value}</span>;
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'currency':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    render: ({ data }) => {
+                                        if (data) {
+                                            data = numeral(
+                                                data[column.id]
+                                            ).format('$0,0.00');
+
+                                            return <span>{data}</span>;
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'date':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    filterEditor: filterEditor,
+                                    filterEditorProps: filterEditorProps,
+                                    render: ({ data }) => {
+                                        if (
+                                            data &&
+                                            data[column.id] &&
+                                            moment(data[column.id]).isValid() &&
+                                            moment(data[column.id]).format(
+                                                'YYYY-MM-DD'
+                                            ) !== '1970-01-01'
+                                        ) {
+                                            const value = moment(
+                                                data[column.id]
+                                            ).format(
+                                                column.format || 'DD-MM-YYYY'
+                                            );
+                                            columnStyle = {};
 
-                                    return <span>{data}</span>;
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'date':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            filterEditor: filterEditor,
-                            filterEditorProps: filterEditorProps,
-                            render: ({ data }) => {
-                                if (
-                                    data &&
-                                    data[column.id] &&
-                                    moment(data[column.id]).isValid() &&
-                                    moment(data[column.id]).format(
-                                        'YYYY-MM-DD'
-                                    ) !== '1970-01-01'
-                                ) {
-                                    const value = moment(
-                                        data[column.id]
-                                    ).format(column.format || 'DD-MM-YYYY');
-                                    columnStyle = {};
+                                            if (
+                                                column.active &&
+                                                column.active.id &&
+                                                column.active.value ===
+                                                    'expired'
+                                            ) {
+                                                if (
+                                                    data[column.active.id] &&
+                                                    moment(
+                                                        data[column.active.id]
+                                                    ).isBefore(moment())
+                                                ) {
+                                                    columnStyle = {
+                                                        color: column.active
+                                                            .colour,
+                                                    };
+                                                }
+                                            }
 
-                                    if (
-                                        column.active &&
-                                        column.active.id &&
-                                        column.active.value === 'expired'
-                                    ) {
+                                            return (
+                                                <span style={columnStyle}>
+                                                    {value}
+                                                </span>
+                                            );
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'daterange':
+                                return {
+                                    ...commonProps,
+                                    name: `${column.id[0]}.${column.id[1]}.`,
+                                    filterEditor: filterEditor,
+                                    filterEditorProps: filterEditorProps,
+                                    render: ({ data }) => {
                                         if (
-                                            data[column.active.id] &&
+                                            data &&
+                                            data[column.id[0]] &&
                                             moment(
-                                                data[column.active.id]
-                                            ).isBefore(moment())
+                                                data[column.id[0]]
+                                            ).isValid() &&
+                                            moment(data[column.id[0]]).format(
+                                                'YYYY-MM-DD'
+                                            ) !== '1970-01-01'
                                         ) {
-                                            columnStyle = {
-                                                color: column.active.colour,
-                                            };
+                                            value = moment(
+                                                data[column.id[0]]
+                                            ).format(
+                                                column.format || 'DD-MM-YYYY'
+                                            );
                                         }
-                                    }
 
-                                    return (
-                                        <span style={columnStyle}>{value}</span>
-                                    );
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'daterange':
-                        return {
-                            ...commonProps,
-                            name: `${column.id[0]}.${column.id[1]}.`,
-                            filterEditor: filterEditor,
-                            filterEditorProps: filterEditorProps,
-                            render: ({ data }) => {
-                                if (
-                                    data &&
-                                    data[column.id[0]] &&
-                                    moment(data[column.id[0]]).isValid() &&
-                                    moment(data[column.id[0]]).format(
-                                        'YYYY-MM-DD'
-                                    ) !== '1970-01-01'
-                                ) {
-                                    value = moment(data[column.id[0]]).format(
-                                        column.format || 'DD-MM-YYYY'
-                                    );
-                                }
+                                        if (
+                                            data &&
+                                            data[column.id[1]] &&
+                                            moment(
+                                                data[column.id[1]]
+                                            ).isValid() &&
+                                            moment(data[column.id[1]]).format(
+                                                'YYYY-MM-DD'
+                                            ) !== '1970-01-01'
+                                        ) {
+                                            value += ` - ${moment(
+                                                data[column.id[1]]
+                                            ).format(
+                                                column.format || 'DD-MM-YYYY'
+                                            )}`;
+                                        }
 
-                                if (
-                                    data &&
-                                    data[column.id[1]] &&
-                                    moment(data[column.id[1]]).isValid() &&
-                                    moment(data[column.id[1]]).format(
-                                        'YYYY-MM-DD'
-                                    ) !== '1970-01-01'
-                                ) {
-                                    value += ` - ${moment(
-                                        data[column.id[1]]
-                                    ).format(column.format || 'DD-MM-YYYY')}`;
-                                }
+                                        return <span>{value}</span>;
+                                    },
+                                };
+                            case 'datetime':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    filterEditor: filterEditor,
+                                    filterEditorProps: filterEditorProps,
+                                    render: ({ data }) => {
+                                        if (
+                                            data &&
+                                            data[column.id] &&
+                                            moment(data[column.id]).isValid() &&
+                                            moment(data[column.id]).format(
+                                                'YYYY-MM-DD'
+                                            ) !== '1970-01-01'
+                                        ) {
+                                            data = moment(
+                                                data[column.id]
+                                            ).format(
+                                                column.format
+                                                    ? column.format
+                                                    : 'DD-MM-YYYY hh:mm A'
+                                            );
 
-                                return <span>{value}</span>;
-                            },
-                        };
-                    case 'datetime':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            filterEditor: filterEditor,
-                            filterEditorProps: filterEditorProps,
-                            render: ({ data }) => {
-                                if (
-                                    data &&
-                                    data[column.id] &&
-                                    moment(data[column.id]).isValid() &&
-                                    moment(data[column.id]).format(
-                                        'YYYY-MM-DD'
-                                    ) !== '1970-01-01'
-                                ) {
-                                    data = moment(data[column.id]).format(
-                                        column.format
-                                            ? column.format
-                                            : 'DD-MM-YYYY hh:mm A'
-                                    );
+                                            return <span>{data}</span>;
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'dropdown':
+                                columnId = Array.isArray(column.id)
+                                    ? column.id.join('-')
+                                    : column.id;
 
-                                    return <span>{data}</span>;
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'dropdown':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            render: ({ data }) => {
-                                return (
-                                    <select
-                                        name={column.id}
-                                        value={data[column.id]?.id || ''}
-                                        style={{ padding: '7px' }}
-                                        onChange={(e) => {
-                                            e.preventDefault();
+                                return {
+                                    ...commonProps,
+                                    name: columnId,
+                                    render: ({ data }) => {
+                                        return (
+                                            <select
+                                                name={column.id}
+                                                value={
+                                                    data[column.id]?.id || ''
+                                                }
+                                                style={{ padding: '7px' }}
+                                                onChange={(e) => {
+                                                    e.preventDefault();
 
+                                                    if (
+                                                        (column.update?.key,
+                                                        column.update?.url,
+                                                        column.update?.method)
+                                                    ) {
+                                                        handleDropdownUpdate(
+                                                            column.update.key,
+                                                            `${column.update.url}/${data.id}`,
+                                                            column.update
+                                                                .method,
+                                                            e.target.value
+                                                        );
+                                                    }
+                                                }}
+                                            >
+                                                <option value="">
+                                                    Select an Option
+                                                </option>
+                                                {dropdownData[column.id] &&
+                                                dropdownData[column.id].length >
+                                                    0
+                                                    ? dropdownData[
+                                                          column.id
+                                                      ].map((option, index) => (
+                                                          <option
+                                                              value={option.id}
+                                                              key={index}
+                                                          >
+                                                              {option.label}
+                                                          </option>
+                                                      ))
+                                                    : null}
+                                            </select>
+                                        );
+                                    },
+                                };
+                            case 'file':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    sortable: false,
+                                    render: ({ data }) => {
+                                        if (data && data[column.id]) {
+                                            // Check if the data is an array of files
                                             if (
-                                                (column.update?.key,
-                                                column.update?.url,
-                                                column.update?.method)
+                                                Array.isArray(data[column.id])
                                             ) {
-                                                handleDropdownUpdate(
-                                                    column.update.key,
-                                                    `${column.update.url}/${data.id}`,
-                                                    column.update.method,
-                                                    e.target.value
+                                                // Return a span for each file in the array with added margin
+                                                return data[column.id].map(
+                                                    (file, index) => (
+                                                        <span
+                                                            key={index} // Use index as a key; consider using unique ids if available
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                e.preventDefault();
+                                                                handleDownload(
+                                                                    file
+                                                                );
+                                                            }}
+                                                            style={{
+                                                                marginRight:
+                                                                    '10px',
+                                                                display:
+                                                                    'inline-block',
+                                                            }} // Added margin right and display style
+                                                        >
+                                                            <CloudDownload
+                                                                data-tooltip-id={`system-tooltip`}
+                                                                data-tooltip-content={`Download File ${file.file_name}`}
+                                                                strokeWidth={2}
+                                                                size={18}
+                                                                className="tdaction"
+                                                            />
+                                                        </span>
+                                                    )
+                                                );
+                                            } else {
+                                                // Return a single span for a single file with added margin
+                                                return (
+                                                    <span
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            e.preventDefault();
+                                                            handleDownload(
+                                                                data[column.id]
+                                                            );
+                                                        }}
+                                                        style={{
+                                                            marginRight: '10px',
+                                                            display:
+                                                                'inline-block',
+                                                        }} // Added margin right and display style for consistency
+                                                    >
+                                                        <CloudDownload
+                                                            data-tooltip-id="system-tooltip"
+                                                            data-tooltip-content={`Download File ${
+                                                                data[column.id]
+                                                                    .file_name
+                                                            }`}
+                                                            strokeWidth={2}
+                                                            size={18}
+                                                            className="tdaction"
+                                                        />
+                                                    </span>
                                                 );
                                             }
-                                        }}
-                                    >
-                                        <option value="">
-                                            Select an Option
-                                        </option>
-                                        {dropdownData[column.id] &&
-                                        dropdownData[column.id].length > 0
-                                            ? dropdownData[column.id].map(
-                                                  (option, index) => (
-                                                      <option
-                                                          value={option.id}
-                                                          key={index}
-                                                      >
-                                                          {option.label}
-                                                      </option>
-                                                  )
-                                              )
-                                            : null}
-                                    </select>
-                                );
-                            },
-                        };
-                    case 'file':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            sortable: false,
-                            render: ({ data }) => {
-                                if (data && data[column.id]) {
-                                    // Check if the data is an array of files
-                                    if (Array.isArray(data[column.id])) {
-                                        // Return a span for each file in the array with added margin
-                                        return data[column.id].map(
-                                            (file, index) => (
-                                                <span
-                                                    key={index} // Use index as a key; consider using unique ids if available
-                                                    onClick={(e) => {
-                                                        e.stopPropagation();
-                                                        e.preventDefault();
-                                                        handleDownload(file);
-                                                    }}
-                                                    style={{
-                                                        marginRight: '10px',
-                                                        display: 'inline-block',
-                                                    }} // Added margin right and display style
-                                                >
-                                                    <CloudDownload
-                                                        data-tooltip-id={`system-tooltip`}
-                                                        data-tooltip-content={`Download File ${file.file_name}`}
-                                                        strokeWidth={2}
-                                                        size={18}
-                                                        className="tdaction"
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'icons':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    sortable: false,
+                                    render: ({ data }) => {
+                                        icons = [];
+
+                                        if (
+                                            column.icons &&
+                                            column.icons.length > 0
+                                        ) {
+                                            column.icons.forEach((icon) => {
+                                                icons.push(
+                                                    <img
+                                                        src={icon.url}
+                                                        alt={icon.name}
+                                                        data-tooltip-id="system-tooltip"
+                                                        data-tooltip-content={
+                                                            icon.name
+                                                        }
                                                     />
-                                                </span>
-                                            )
-                                        );
-                                    } else {
-                                        // Return a single span for a single file with added margin
-                                        return (
-                                            <span
-                                                onClick={(e) => {
-                                                    e.stopPropagation();
-                                                    e.preventDefault();
-                                                    handleDownload(
-                                                        data[column.id]
-                                                    );
-                                                }}
-                                                style={{
-                                                    marginRight: '10px',
-                                                    display: 'inline-block',
-                                                }} // Added margin right and display style for consistency
-                                            >
-                                                <CloudDownload
-                                                    data-tooltip-id="system-tooltip"
-                                                    data-tooltip-content={`Download File ${
-                                                        data[column.id]
-                                                            .file_name
-                                                    }`}
-                                                    strokeWidth={2}
-                                                    size={18}
-                                                    className="tdaction"
-                                                />
-                                            </span>
-                                        );
-                                    }
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'icons':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            sortable: false,
-                            render: ({ data }) => {
-                                icons = [];
-
-                                if (column.icons && column.icons.length > 0) {
-                                    column.icons.forEach((icon) => {
-                                        icons.push(
-                                            <img
-                                                src={icon.url}
-                                                alt={icon.name}
-                                                data-tooltip-id="system-tooltip"
-                                                data-tooltip-content={icon.name}
-                                            />
-                                        );
-                                    });
-                                }
-
-                                if (data) {
-                                    return <span>{icons}</span>;
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'image':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            render: ({ data }) => {
-                                if (data && data[column.id]) {
-                                    fileUrl =
-                                        data[column.id][0]?.file_url ||
-                                        data[column.id]?.file_url;
-
-                                    if (fileUrl) {
-                                        return (
-                                            <span>
-                                                {parse(
-                                                    `<img width="150" src="${fileUrl}" />`
-                                                )}
-                                            </span>
-                                        );
-                                    }
-                                }
-
-                                return null;
-                            },
-                        };
-                    case 'json':
-                        return {
-                            ...commonProps,
-                            name: `${column.id}.${column.jsonData}`,
-                            render: ({ data }) => {
-                                if (
-                                    data &&
-                                    data[column.id] &&
-                                    data[column.id][column.jsonData]
-                                ) {
-                                    data = data[column.id][column.jsonData];
-
-                                    return <span>{data}</span>;
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'number':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            type: 'number',
-                        };
-                    case 'option':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            filterEditor: filterEditor,
-                            filterEditorProps: filterEditorProps,
-                            render: ({ data }) => {
-                                let newData;
-
-                                if (
-                                    data &&
-                                    column.options &&
-                                    column.options[data[column.id]]
-                                ) {
-                                    if (
-                                        column.key &&
-                                        data[column.key] > 0 &&
-                                        column.options[
-                                            data[column.id]
-                                        ].includes('#')
-                                    ) {
-                                        newData = column.options[
-                                            data[column.id]
-                                        ].replace(/#/g, data[column.key]);
-                                    } else {
-                                        newData =
-                                            column.options[data[column.id]];
-                                    }
+                                                );
+                                            });
+                                        }
 
-                                    return <span>{newData}</span>;
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'placeholder':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            sortable: false,
-                            render: ({ data }) => {
-                                if (data) {
-                                    return <span>{column.placeholder}</span>;
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'relation':
-                        return {
-                            ...commonProps,
-                            name: relationName,
-                            sortable: false,
-                            filterEditor: filterEditor,
-                            filterEditorProps: filterEditorProps,
-                            render: ({ data }) => {
-                                value = column.id.reduce((acc, id) => {
-                                    if (acc === '') {
-                                        return data[id];
-                                    } else {
-                                        if (acc && acc[id]) {
-                                            return acc[id];
+                                        if (data) {
+                                            return <span>{icons}</span>;
                                         } else {
-                                            return '';
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'image':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    render: ({ data }) => {
+                                        if (data && data[column.id]) {
+                                            fileUrl =
+                                                data[column.id][0]?.file_url ||
+                                                data[column.id]?.file_url;
+
+                                            if (fileUrl) {
+                                                return (
+                                                    <span>
+                                                        {parse(
+                                                            `<img width="150" src="${fileUrl}" />`
+                                                        )}
+                                                    </span>
+                                                );
+                                            }
                                         }
-                                    }
-                                }, '');
-
-                                if (value) {
-                                    if (Array.isArray(value)) {
-                                        value = value[0];
-                                    }
 
-                                    if (Array.isArray(column.nameFrom)) {
-                                        value = column.nameFrom
-                                            .map((nf) => value[nf])
-                                            .join(' ');
-                                    } else {
+                                        return null;
+                                    },
+                                };
+                            case 'json':
+                                return {
+                                    ...commonProps,
+                                    name: `${column.id}.${column.jsonData}`,
+                                    render: ({ data }) => {
                                         if (
-                                            value &&
-                                            value.hasOwnProperty(
-                                                column.nameFrom
-                                            )
+                                            data &&
+                                            data[column.id] &&
+                                            data[column.id][column.jsonData]
                                         ) {
-                                            value = value[column.nameFrom];
+                                            data =
+                                                data[column.id][
+                                                    column.jsonData
+                                                ];
+
+                                            return <span>{data}</span>;
+                                        } else {
+                                            return null;
                                         }
-                                    }
+                                    },
+                                };
+                            case 'number':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    type: 'number',
+                                };
+                            case 'option':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    filterEditor: filterEditor,
+                                    filterEditorProps: filterEditorProps,
+                                    render: ({ data }) => {
+                                        let newData;
 
-                                    if (
-                                        column.placeholder &&
-                                        column.placeholder !== ''
-                                    ) {
-                                        return (
-                                            <span>{column.placeholder}</span>
-                                        );
-                                    } else {
-                                        if (column.hasOwnProperty('format')) {
-                                            if (column.format) {
-                                                value =
-                                                    moment(value).format(
-                                                        'DD-MM-YYYY'
-                                                    );
+                                        if (
+                                            data &&
+                                            column.options &&
+                                            column.options[data[column.id]]
+                                        ) {
+                                            if (
+                                                column.key &&
+                                                data[column.key] > 0 &&
+                                                column.options[
+                                                    data[column.id]
+                                                ].includes('#')
+                                            ) {
+                                                newData = column.options[
+                                                    data[column.id]
+                                                ].replace(
+                                                    /#/g,
+                                                    data[column.key]
+                                                );
+                                            } else {
+                                                newData =
+                                                    column.options[
+                                                        data[column.id]
+                                                    ];
                                             }
+
+                                            return <span>{newData}</span>;
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'placeholder':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    sortable: false,
+                                    render: ({ data }) => {
+                                        if (data) {
+                                            return (
+                                                <span>
+                                                    {column.placeholder}
+                                                </span>
+                                            );
+                                        } else {
+                                            return null;
                                         }
+                                    },
+                                };
+                            case 'relation':
+                                return {
+                                    ...commonProps,
+                                    name: relationName,
+                                    sortable: false,
+                                    filterEditor: filterEditor,
+                                    filterEditorProps: filterEditorProps,
+                                    render: ({ data }) => {
+                                        value = column.id.reduce((acc, id) => {
+                                            if (acc === '') {
+                                                return data[id];
+                                            } else {
+                                                if (acc && acc[id]) {
+                                                    return acc[id];
+                                                } else {
+                                                    return '';
+                                                }
+                                            }
+                                        }, '');
 
-                                        return <span>{value}</span>;
-                                    }
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'relationArray':
-                        return {
-                            ...commonProps,
-                            name: relationName,
-                            sortable: false,
-                            filterEditor: filterEditor,
-                            filterEditorProps: filterEditorProps,
-                            render: ({ data }) => {
-                                const relationValue = column.id.reduce(
-                                    (acc, id) =>
-                                        acc === ''
-                                            ? data[id]
-                                            : acc && acc[id]
-                                            ? acc[id]
-                                            : '',
-                                    ''
-                                );
+                                        if (value) {
+                                            if (Array.isArray(value)) {
+                                                value = value[0];
+                                            }
 
-                                if (
-                                    relationValue &&
-                                    Array.isArray(relationValue) &&
-                                    relationValue.length > 0
-                                ) {
-                                    const nameProperties = Array.isArray(
-                                        column.nameFrom
-                                    )
-                                        ? column.nameFrom
-                                        : [column.nameFrom];
-
-                                    const values = relationValue
-                                        .map((rv) => {
                                             if (
-                                                column.childId &&
-                                                Array.isArray(column.childId)
+                                                Array.isArray(column.nameFrom)
                                             ) {
-                                                childValue = rv;
+                                                value = column.nameFrom
+                                                    .map((nf) => value[nf])
+                                                    .join(' ');
+                                            } else {
+                                                if (
+                                                    value &&
+                                                    value.hasOwnProperty(
+                                                        column.nameFrom
+                                                    )
+                                                ) {
+                                                    value =
+                                                        value[column.nameFrom];
+                                                }
+                                            }
 
-                                                column.childId.forEach((a) => {
-                                                    if (childValue[a]) {
-                                                        childValue =
-                                                            childValue[a];
+                                            if (
+                                                column.placeholder &&
+                                                column.placeholder !== ''
+                                            ) {
+                                                return (
+                                                    <span>
+                                                        {column.placeholder}
+                                                    </span>
+                                                );
+                                            } else {
+                                                if (
+                                                    column.hasOwnProperty(
+                                                        'format'
+                                                    )
+                                                ) {
+                                                    if (column.format) {
+                                                        value =
+                                                            moment(
+                                                                value
+                                                            ).format(
+                                                                'DD-MM-YYYY'
+                                                            );
                                                     }
-                                                });
+                                                }
+
+                                                return <span>{value}</span>;
+                                            }
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'relationArray':
+                                return {
+                                    ...commonProps,
+                                    name: relationName,
+                                    sortable: false,
+                                    filterEditor: filterEditor,
+                                    filterEditorProps: filterEditorProps,
+                                    render: ({ data }) => {
+                                        const relationValue = column.id.reduce(
+                                            (acc, id) =>
+                                                acc === ''
+                                                    ? data[id]
+                                                    : acc && acc[id]
+                                                    ? acc[id]
+                                                    : '',
+                                            ''
+                                        );
 
-                                                if (childValue) {
-                                                    const propertyValues =
-                                                        nameProperties
-                                                            .map(
-                                                                (prop) =>
+                                        if (
+                                            relationValue &&
+                                            Array.isArray(relationValue) &&
+                                            relationValue.length > 0
+                                        ) {
+                                            const nameProperties =
+                                                Array.isArray(column.nameFrom)
+                                                    ? column.nameFrom
+                                                    : [column.nameFrom];
+
+                                            const values = relationValue
+                                                .map((rv) => {
+                                                    if (
+                                                        column.childId &&
+                                                        Array.isArray(
+                                                            column.childId
+                                                        )
+                                                    ) {
+                                                        childValue = rv;
+
+                                                        column.childId.forEach(
+                                                            (a) => {
+                                                                if (
                                                                     childValue[
-                                                                        prop
+                                                                        a
                                                                     ]
-                                                            )
-                                                            .filter(
-                                                                (value) =>
-                                                                    value !==
-                                                                        undefined &&
-                                                                    value !==
-                                                                        null
+                                                                ) {
+                                                                    childValue =
+                                                                        childValue[
+                                                                            a
+                                                                        ];
+                                                                }
+                                                            }
+                                                        );
+
+                                                        if (childValue) {
+                                                            const propertyValues =
+                                                                nameProperties
+                                                                    .map(
+                                                                        (
+                                                                            prop
+                                                                        ) =>
+                                                                            childValue[
+                                                                                prop
+                                                                            ]
+                                                                    )
+                                                                    .filter(
+                                                                        (
+                                                                            value
+                                                                        ) =>
+                                                                            value !==
+                                                                                undefined &&
+                                                                            value !==
+                                                                                null
+                                                                    );
+                                                            return propertyValues.join(
+                                                                ' '
                                                             );
-                                                    return propertyValues.join(
-                                                        ' '
+                                                        }
+                                                    } else {
+                                                        const propertyValues =
+                                                            nameProperties
+                                                                .map(
+                                                                    (prop) =>
+                                                                        rv[prop]
+                                                                )
+                                                                .filter(
+                                                                    (value) =>
+                                                                        value !==
+                                                                            undefined &&
+                                                                        value !==
+                                                                            null
+                                                                );
+                                                        return propertyValues.join(
+                                                            ' '
+                                                        );
+                                                    }
+                                                })
+                                                .filter(
+                                                    (value) => value !== ''
+                                                );
+
+                                            // if (values.length > 0) {
+                                            let result = '';
+
+                                            if (
+                                                column.relation?.id &&
+                                                column.relation?.key
+                                            ) {
+                                                const relationValue =
+                                                    column.relation.key.reduce(
+                                                        (acc, id) =>
+                                                            acc === ''
+                                                                ? data[id]
+                                                                : acc && acc[id]
+                                                                ? acc[id]
+                                                                : '',
+                                                        ''
                                                     );
+
+                                                result = `${
+                                                    relationValue[
+                                                        column.relation.id
+                                                    ]
+                                                }<br />`;
+                                            }
+
+                                            if (
+                                                column.where &&
+                                                column.where.id &&
+                                                column.where.value
+                                            ) {
+                                                if (
+                                                    data[column.where.id] ===
+                                                    column.where.value
+                                                ) {
+                                                    result +=
+                                                        values.join('<br />');
                                                 }
                                             } else {
-                                                const propertyValues =
-                                                    nameProperties
-                                                        .map((prop) => rv[prop])
-                                                        .filter(
-                                                            (value) =>
-                                                                value !==
-                                                                    undefined &&
-                                                                value !== null
-                                                        );
-                                                return propertyValues.join(' ');
+                                                result += values.join('<br />');
                                             }
-                                        })
-                                        .filter((value) => value !== '');
 
-                                    // if (values.length > 0) {
-                                    let result = '';
+                                            return <span>{parse(result)}</span>;
+                                            // }
+                                        } else {
+                                            let result = '';
 
-                                    if (
-                                        column.relation?.id &&
-                                        column.relation?.key
-                                    ) {
-                                        const relationValue =
-                                            column.relation.key.reduce(
-                                                (acc, id) =>
-                                                    acc === ''
-                                                        ? data[id]
-                                                        : acc && acc[id]
-                                                        ? acc[id]
-                                                        : '',
-                                                ''
-                                            );
+                                            if (
+                                                column.relation?.id &&
+                                                column.relation?.key
+                                            ) {
+                                                const relationValue =
+                                                    column.relation.key.reduce(
+                                                        (acc, id) =>
+                                                            acc === ''
+                                                                ? data[id]
+                                                                : acc && acc[id]
+                                                                ? acc[id]
+                                                                : '',
+                                                        ''
+                                                    );
 
-                                        result = `${
-                                            relationValue[column.relation.id]
-                                        }<br />`;
-                                    }
+                                                result =
+                                                    relationValue &&
+                                                    relationValue[
+                                                        column.relation.id
+                                                    ]
+                                                        ? relationValue[
+                                                              column.relation.id
+                                                          ]
+                                                        : '';
+                                            }
 
-                                    if (
-                                        column.where &&
-                                        column.where.id &&
-                                        column.where.value
-                                    ) {
-                                        if (
-                                            data[column.where.id] ===
-                                            column.where.value
-                                        ) {
-                                            result += values.join('<br />');
+                                            return <span>{parse(result)}</span>;
                                         }
-                                    } else {
-                                        result += values.join('<br />');
-                                    }
-
-                                    return <span>{parse(result)}</span>;
-                                    // }
-                                } else {
-                                    let result = '';
 
-                                    if (
-                                        column.relation?.id &&
-                                        column.relation?.key
-                                    ) {
-                                        const relationValue =
-                                            column.relation.key.reduce(
-                                                (acc, id) =>
-                                                    acc === ''
-                                                        ? data[id]
-                                                        : acc && acc[id]
-                                                        ? acc[id]
-                                                        : '',
-                                                ''
+                                        return null;
+                                    },
+                                };
+                            case 'richtext':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    render: ({ data }) => {
+                                        if (data && data[column.id]) {
+                                            return (
+                                                <span>
+                                                    {parse(data[column.id])}
+                                                </span>
                                             );
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'stage':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    sortable: false,
+                                    render: ({ data }) => {
+                                        stage = '';
+
+                                        column.keyIds.forEach((a, b) => {
+                                            if (data[a] === 1) {
+                                                stage = column.valueIds[b];
+                                            }
+                                        });
 
-                                        result =
-                                            relationValue &&
-                                            relationValue[column.relation.id]
-                                                ? relationValue[
-                                                      column.relation.id
-                                                  ]
-                                                : '';
-                                    }
-
-                                    return <span>{parse(result)}</span>;
-                                }
-
-                                return null;
-                            },
-                        };
-                    case 'richtext':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            render: ({ data }) => {
-                                if (data && data[column.id]) {
-                                    return (
-                                        <span>{parse(data[column.id])}</span>
-                                    );
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'stage':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            sortable: false,
-                            render: ({ data }) => {
-                                stage = '';
-
-                                column.keyIds.forEach((a, b) => {
-                                    if (data[a] === 1) {
-                                        stage = column.valueIds[b];
-                                    }
-                                });
-
-                                return <span>{stage}</span>;
-                            },
-                        };
-                    case 'time':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            render: ({ data }) => {
-                                if (
-                                    data &&
-                                    data[column.id] &&
-                                    moment(data[column.id]).isValid() &&
-                                    moment(data[column.id]).format(
-                                        'YYYY-MM-DD'
-                                    ) !== '1970-01-01'
-                                ) {
-                                    data = moment(data[column.id]).format(
-                                        column.format
-                                            ? column.format
-                                            : 'hh:mm A'
-                                    );
+                                        return <span>{stage}</span>;
+                                    },
+                                };
+                            case 'time':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    render: ({ data }) => {
+                                        if (
+                                            data &&
+                                            data[column.id] &&
+                                            moment(data[column.id]).isValid() &&
+                                            moment(data[column.id]).format(
+                                                'YYYY-MM-DD'
+                                            ) !== '1970-01-01'
+                                        ) {
+                                            data = moment(
+                                                data[column.id]
+                                            ).format(
+                                                column.format
+                                                    ? column.format
+                                                    : 'hh:mm A'
+                                            );
 
-                                    return <span>{data}</span>;
-                                } else {
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'timer':
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            render: ({ data }) => {
-                                if (
-                                    data &&
-                                    data[column.id] &&
-                                    moment(data[column.id]).isValid() &&
-                                    moment(data[column.id]).format(
-                                        'YYYY-MM-DD'
-                                    ) !== '1970-01-01'
-                                ) {
-                                    data = moment(data[column.id]).format(
-                                        column.format
-                                            ? column.format
-                                            : 'DD-MM-YYYY hh:mm A'
-                                    );
+                                            return <span>{data}</span>;
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'timer':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    render: ({ data }) => {
+                                        if (
+                                            data &&
+                                            data[column.id] &&
+                                            moment(data[column.id]).isValid() &&
+                                            moment(data[column.id]).format(
+                                                'YYYY-MM-DD'
+                                            ) !== '1970-01-01'
+                                        ) {
+                                            data = moment(
+                                                data[column.id]
+                                            ).format(
+                                                column.format
+                                                    ? column.format
+                                                    : 'DD-MM-YYYY hh:mm A'
+                                            );
 
-                                    return <span>{data}</span>;
-                                } else {
-                                    let shouldRenderButton = false;
+                                            return <span>{data}</span>;
+                                        } else {
+                                            let shouldRenderButton = false;
 
-                                    if (
-                                        !column.hasOwnProperty('require') ||
-                                        column.require.length === 0
-                                    ) {
-                                        shouldRenderButton = true;
-                                    } else {
-                                        for (const req of column.require) {
-                                            if (req.hasOwnProperty('id')) {
-                                                const hasValue =
-                                                    req.hasOwnProperty('value');
-                                                if (
-                                                    (hasValue &&
-                                                        data[req.id] ===
-                                                            req.value) ||
-                                                    (!hasValue && data[req.id])
-                                                ) {
-                                                    shouldRenderButton = true;
-                                                } else {
-                                                    shouldRenderButton = false;
-                                                    break;
+                                            if (
+                                                !column.hasOwnProperty(
+                                                    'require'
+                                                ) ||
+                                                column.require.length === 0
+                                            ) {
+                                                shouldRenderButton = true;
+                                            } else {
+                                                for (const req of column.require) {
+                                                    if (
+                                                        req.hasOwnProperty('id')
+                                                    ) {
+                                                        const hasValue =
+                                                            req.hasOwnProperty(
+                                                                'value'
+                                                            );
+                                                        if (
+                                                            (hasValue &&
+                                                                data[req.id] ===
+                                                                    req.value) ||
+                                                            (!hasValue &&
+                                                                data[req.id])
+                                                        ) {
+                                                            shouldRenderButton = true;
+                                                        } else {
+                                                            shouldRenderButton = false;
+                                                            break;
+                                                        }
+                                                    }
                                                 }
                                             }
-                                        }
-                                    }
 
-                                    if (shouldRenderButton) {
-                                        return (
-                                            <button
-                                                className="btn"
-                                                style={{
-                                                    padding:
-                                                        '0.2em 1em 0.05em 1em',
-                                                }}
-                                                onClick={(e) => {
-                                                    e.stopPropagation();
-                                                    e.preventDefault();
+                                            if (shouldRenderButton) {
+                                                return (
+                                                    <button
+                                                        className="btn"
+                                                        style={{
+                                                            padding:
+                                                                '0.2em 1em 0.05em 1em',
+                                                        }}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            e.preventDefault();
+
+                                                            // Check if every required field in column.validate exists and is truthy in data
+                                                            const isValid =
+                                                                column.validate?.every(
+                                                                    (v) =>
+                                                                        data[v]
+                                                                ) ?? true;
+
+                                                            if (isValid) {
+                                                                handleTimer(
+                                                                    data[
+                                                                        form
+                                                                            .primaryKey
+                                                                    ],
+                                                                    column.id
+                                                                );
+                                                            } else {
+                                                                toast.error(
+                                                                    'Please complete the required fields before starting the timer.'
+                                                                );
+                                                            }
+                                                        }}
+                                                    >
+                                                        <Alarm
+                                                            data-tooltip-id="system-tooltip"
+                                                            data-tooltip-content={`${column.label} Timer`}
+                                                            strokeWidth={2}
+                                                            size={18}
+                                                            className="tdaction"
+                                                        />
+                                                    </button>
+                                                );
+                                            }
 
-                                                    // Check if every required field in column.validate exists and is truthy in data
-                                                    const isValid =
-                                                        column.validate?.every(
-                                                            (v) => data[v]
-                                                        ) ?? true;
-
-                                                    if (isValid) {
-                                                        handleTimer(
-                                                            data[
-                                                                form.primaryKey
-                                                            ],
-                                                            column.id
-                                                        );
-                                                    } else {
-                                                        toast.error(
-                                                            'Please complete the required fields before starting the timer.'
-                                                        );
-                                                    }
-                                                }}
-                                            >
-                                                <Alarm
-                                                    data-tooltip-id="system-tooltip"
-                                                    data-tooltip-content={`${column.label} Timer`}
-                                                    strokeWidth={2}
-                                                    size={18}
-                                                    className="tdaction"
-                                                />
-                                            </button>
-                                        );
-                                    }
+                                            return null;
+                                        }
+                                    },
+                                };
+                            case 'url':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    render: ({ data }) => {
+                                        if (data && data[column.id]) {
+                                            return (
+                                                <span>
+                                                    <a
+                                                        href={data[column.id]}
+                                                        target="_blank"
+                                                    >
+                                                        Link
+                                                    </a>
+                                                </span>
+                                            );
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                            default:
+                                columnId = Array.isArray(column.id)
+                                    ? column.id.join('-')
+                                    : column.id;
 
-                                    return null;
-                                }
-                            },
-                        };
-                    case 'url':
-                        return {
-                            ...commonProps,
-                            name: column.id,
+                                return {
+                                    ...commonProps,
+                                    name: columnId,
+                                    filterEditor: filterEditor,
+                                    filterEditorProps: filterEditorProps,
+                                    render: ({ data }) => {
+                                        if (
+                                            data &&
+                                            data[column.id] &&
+                                            data[column.id] !== ''
+                                        ) {
+                                            return (
+                                                <span>
+                                                    {parse(
+                                                        String(data[column.id])
+                                                    )}
+                                                </span>
+                                            );
+                                        } else {
+                                            return null;
+                                        }
+                                    },
+                                };
+                        }
+                    };
+
+                    const newColumns = columns.map(renderColumn);
+
+                    if (settings.length > 0) {
+                        newColumns.push({
+                            name: 'setting',
+                            header: 'Action',
+                            defaultWidth: 100,
+                            textAlign: 'center',
+                            textVerticalAlign:
+                                style && style.text_vertical_align
+                                    ? style.text_vertical_align
+                                    : 'center',
                             render: ({ data }) => {
-                                if (data && data[column.id]) {
-                                    return (
-                                        <span>
-                                            <a
-                                                href={data[column.id]}
-                                                target="_blank"
-                                            >
-                                                Link
-                                            </a>
-                                        </span>
-                                    );
-                                } else {
-                                    return null;
-                                }
+                                return (
+                                    <div className="tdactions">
+                                        {settings.map((setting) =>
+                                            renderSetting(setting, data)
+                                        )}
+                                    </div>
+                                );
                             },
-                        };
-                    default:
-                        return {
-                            ...commonProps,
-                            name: column.id,
-                            filterEditor: filterEditor,
-                            filterEditorProps: filterEditorProps,
-                            render: ({ data }) => {
-                                if (
-                                    data &&
-                                    data[column.id] &&
-                                    data[column.id] !== ''
-                                ) {
-                                    return (
-                                        <span>
-                                            {parse(String(data[column.id]))}
-                                        </span>
-                                    );
+                        });
+                    }
+
+                    setGridColumns(newColumns);
+
+                    const newFilterValue = columns
+                        .filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
+                        .map((column) => {
+                            // Map these filtered columns to a new object array
+                            let filterName = '';
+                            if (Array.isArray(column.id)) {
+                                filterName = column.id.reduce(
+                                    (acc, id) => acc + `${id}.`,
+                                    ''
+                                );
+                            } else {
+                                if (column.type === 'address') {
+                                    filterName = `address.${column.id}`;
                                 } else {
-                                    return null;
+                                    filterName = column.id;
                                 }
-                            },
-                        };
-                }
-            };
-
-            const newColumns = columns.map(renderColumn);
-
-            if (settings.length > 0) {
-                newColumns.push({
-                    name: 'setting',
-                    header: 'Action',
-                    defaultWidth: 100,
-                    textAlign: 'center',
-                    textVerticalAlign:
-                        style && style.text_vertical_align
-                            ? style.text_vertical_align
-                            : 'center',
-                    render: ({ data }) => {
-                        return (
-                            <div className="tdactions">
-                                {settings.map((setting) =>
-                                    renderSetting(setting, data)
-                                )}
-                            </div>
-                        );
-                    },
-                });
-            }
+                            }
 
-            setGridColumns(newColumns);
-
-            const newFilterValue = columns
-                .filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
-                .map((column) => {
-                    // Map these filtered columns to a new object array
-                    let filterName = '';
-                    if (Array.isArray(column.id)) {
-                        filterName = column.id.reduce(
-                            (acc, id) => acc + `${id}.`,
-                            ''
-                        );
-                    } else {
-                        if (column.type === 'address') {
-                            filterName = `address.${column.id}`;
-                        } else {
-                            filterName = column.id;
-                        }
-                    }
+                            if (column.nameFrom) {
+                                filterName += column.nameFrom;
+                            }
 
-                    if (column.nameFrom) {
-                        filterName += column.nameFrom;
-                    }
+                            return {
+                                key: column.filter.key
+                                    ? column.filter.key
+                                    : null,
+                                name: filterName,
+                                operator: column.filter.operator,
+                                type: column.filter.type,
+                                value: column.filter.value
+                                    ? column.filter.value
+                                    : '',
+                                reset: column.filter.reset
+                                    ? column.filter.reset
+                                    : [],
+                            };
+                        });
 
-                    return {
-                        key: column.filter.key ? column.filter.key : null,
-                        name: filterName,
-                        operator: column.filter.operator,
-                        type: column.filter.type,
-                        value: column.filter.value ? column.filter.value : '',
-                        reset: column.filter.reset ? column.filter.reset : [],
-                    };
+                    setFilterValue(newFilterValue);
+                    setSelected([]);
+                })
+                .catch((error) => {
+                    console.error('Error in fetching dropdown data: ', error);
                 });
-
-            setFilterValue(newFilterValue);
-            setSelected([]);
         }, [columns, filterDataSource]);
 
         useEffect(() => {
@@ -2420,6 +2544,7 @@ const DataGrid = forwardRef(
                         formSettings={formData}
                         formType={formType}
                         mapbox={mapbox}
+                        paramValue={paramValue}
                         style={style}
                         updateForm={setFormData}
                     />