@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/crm/DataGrid.jsx

@@ -1,2701 +0,0 @@
-import '../styles/global.css';
-
-import React, {
-    forwardRef,
-    useCallback,
-    useEffect,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from 'react';
-import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
-import debounce from 'lodash.debounce';
-import moment from 'moment';
-import numeral from 'numeral';
-import Popup from 'reactjs-popup';
-import parse from 'html-react-parser';
-import { saveAs } from 'file-saver';
-import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter';
-import SelectFilter from '@inovua/reactdatagrid-community/SelectFilter';
-import DateFilter from '@inovua/reactdatagrid-community/DateFilter';
-import ReactDataGrid from '@inovua/reactdatagrid-community';
-// import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
-// import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
-// import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
-// import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
-import { Gallery } from 'react-grid-gallery';
-import { confirmAlert } from 'react-confirm-alert';
-import { toast } from 'react-toastify';
-import {
-    Alarm,
-    ArrowCounterClockwise,
-    Backspace,
-    Check,
-    CircleCheck,
-    CircleX,
-    Clock,
-    CloudDownload,
-    Copy,
-    Edit,
-    Envelope,
-    Folder,
-    Image,
-    Inbox,
-    LinkOut,
-    LockOn,
-    Network,
-    Ribbon,
-    Search,
-    ShippingBoxV1,
-    SoundOn,
-    TriangleAlert,
-} from 'akar-icons';
-import styles from './styles/DataGrid.module.css';
-
-import '@inovua/reactdatagrid-community/index.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
-
-import CustomFetch from './Fetch';
-import Download from './Download';
-import Form from './Form';
-import _ from 'lodash';
-
-const loadData = async (
-    { skip, limit, sortInfo, filterValue },
-    search,
-    ajaxSetting
-) => {
-    const url = ajaxSetting.url;
-    const page = Math.floor(skip / limit) + 1;
-    const params = { page, sortInfo, take: limit, search: search, where: [] };
-
-    if (sortInfo) {
-        params.sortBy = sortInfo.name;
-        params.sort = sortInfo.dir === 1 ? 'asc' : 'desc';
-    }
-
-    if (ajaxSetting && ajaxSetting.where) {
-        params.where = ajaxSetting.where;
-    }
-
-    if (filterValue) {
-        filterValue.forEach((fv) => {
-            const identifier = fv.key ? fv.key : fv.name;
-            const existingIndex = params.where.findIndex(
-                (w) => w.id === identifier
-            );
-
-            if (fv.value !== null && fv.value !== '') {
-                if (existingIndex !== -1) {
-                    params.where[existingIndex].value = fv.value;
-                } else {
-                    params.where.push({
-                        id: identifier,
-                        value: fv.value,
-                        operator: fv.operator,
-                    });
-                }
-            } else {
-                if (existingIndex !== -1) {
-                    params.where.splice(existingIndex, 1);
-                }
-            }
-        });
-    }
-
-    try {
-        const response = await axios.post(url, params);
-        const { data, total } = response.data;
-        return { data, count: total };
-    } catch (error) {
-        console.error('Error fetching data:', error);
-        return { data: [], count: 0 };
-    }
-};
-
-const DataGrid = forwardRef(
-    (
-        {
-            ajaxSetting,
-            api,
-            columns,
-            form,
-            gridHeight,
-            mapbox,
-            pageData,
-            pageSetting,
-            paramValue,
-            settings,
-            setConfig,
-            setFilterData,
-            setTotal,
-            setRowsSelected,
-            style,
-            tableSetting,
-            userProfile = null,
-        },
-        ref
-    ) => {
-        const navigate = useNavigate();
-
-        /** Audio */
-        const audioRef = useRef(null);
-        const [audioSource, setAudioSource] = useState('');
-
-        useEffect(() => {
-            if (audioSource) {
-                audioRef.current.play();
-            }
-        }, [audioSource]);
-
-        /** Gallery Modal States */
-        const [modalGalleryShow, setModalGalleryShow] = useState(false);
-        const [galleryData, setGalleryData] = useState([]);
-
-        /** Gallery Modal Functions */
-        const modalGalleryOpen = () => {
-            setModalGalleryShow(true);
-        };
-
-        const modalGalleryClose = () => {
-            setModalGalleryShow(false);
-        };
-
-        /** Modal States */
-        const [formData, setFormData] = useState({});
-        const [formType, setFormType] = useState('');
-        const [formId, setFormId] = useState(0);
-        const [modalShow, setModalShow] = useState(false);
-
-        /** Modal Functions */
-        const modalOpen = (formType, formId) => {
-            setModalShow(true);
-            setFormType(formType);
-            setFormId(formId);
-        };
-
-        const modalClose = () => {
-            setModalShow(false);
-        };
-
-        useEffect(() => {
-            setFormData(form);
-        }, [form]);
-
-        /** Table States */
-        const dataRef = useRef(null);
-        const [dSearch, setDSearch] = useState('');
-        const dataSource = useCallback(
-            (params) => {
-                const sqlResult = loadData(params, dSearch, ajaxSetting);
-                if (setFilterData && params.filterValue) {
-                    setFilterData(params.filterValue);
-                }
-
-                sqlResult.then((res) => {
-                    if (setTotal) {
-                        setTotal(res.count);
-                    }
-                    setDataCount(res.count);
-
-                    dataRef.current = res.data;
-                });
-
-                return sqlResult;
-            },
-            [ajaxSetting, dSearch]
-        );
-        const [filterDataSource, setFilterDataSource] = useState([]);
-        const [filterValue, setFilterValue] = useState([]);
-        const [gridColumns, setGridColumns] = useState([]);
-        const gridRef = useRef(null);
-        const [limit, setLimit] = useState(0);
-        const [search, setSearch] = useState('');
-        const [selected, setSelected] = useState({});
-
-        /** Table Functions */
-        useImperativeHandle(ref, () => ({
-            reload: () => {
-                handleReload();
-            },
-            reset: (filter) => {
-                handleReset(filter);
-            },
-        }));
-
-        const handleDownload = async (d) => {
-            const toastId = toast.loading('Starting download please wait...');
-
-            try {
-                const res = await Download(
-                    `/ajax/files/download/${d.id}/null`,
-                    'GET',
-                    {}
-                );
-
-                if (res.data.error) {
-                    toast.error(res.data.error);
-                } else {
-                    // Assuming the response contains a Blob or similar data
-                    if (res.data && res.data instanceof Blob) {
-                        const fileName = `${d.file_name}`;
-                        saveAs(res.data, fileName);
-                    } else {
-                        // Handle the case where the response is not a Blob
-                        toast.error('Invalid file format received.');
-                    }
-                }
-            } catch (error) {
-                console.info(error);
-            } finally {
-                // Dismiss the loading toast in the finally block to ensure it's always dismissed
-                toast.dismiss(toastId);
-            }
-        };
-
-        const handleTimer = async (id, key) => {
-            try {
-                const res = await CustomFetch(`${form.url}/${id}`, 'PUT', {
-                    [key]: moment().toDate(),
-                });
-
-                if (res.data.error === '') {
-                    toast.success('Timer has been updated.');
-
-                    handleReload();
-                } else {
-                    toast.error(res.data.error);
-                }
-            } catch (error) {
-                console.info(error);
-            }
-        };
-
-        const handleSelectionChange = useCallback(
-            (param) => {
-                if (param.selected === true) {
-                    const s = {};
-
-                    param.data.forEach((obj) => {
-                        s[obj.id] = obj;
-                    });
-
-                    setSelected(s);
-                } else if (typeof param.selected === 'object') {
-                    // Assuming param.selected is an object where keys are the ids of the selections
-                    const selectedKey = Object.keys(param.selected)[0]; // Get the key of the selected object
-                    const isSelectedAlready =
-                        selected.hasOwnProperty(selectedKey); // Check if this key is already in selected
-
-                    if (isSelectedAlready) {
-                        // If the key already exists, reset selected
-                        setSelected({});
-                    } else {
-                        // If it does not exist, update selected with the new object
-                        setSelected((prevSelected) => ({
-                            ...prevSelected,
-                            [selectedKey]: param.selected[selectedKey],
-                        }));
-                    }
-                } else {
-                    // Handle other cases as needed
-                    setSelected(param.selected);
-                }
-            },
-            [selected]
-        ); // Including selected in the dependency array
-
-        const findUpdatedFilter = (filters, currentValues) => {
-            for (const filter of filters) {
-                const matchingCurrentValue = currentValues.find(
-                    (currentValue) => currentValue.name === filter.name
-                );
-
-                if (
-                    matchingCurrentValue &&
-                    filter.value !== matchingCurrentValue.value
-                ) {
-                    return {
-                        key: filter.key || '',
-                        name: filter.name,
-                        oldValue: matchingCurrentValue.value,
-                        newValue: filter.value,
-                    };
-                }
-            }
-
-            return null; // No changes found
-        };
-
-        const handleFilterChange = useCallback((filters, currentValues) => {
-            const updatedFilter = findUpdatedFilter(filters, currentValues);
-            let updatedFilters = filters;
-            let resetMappings = [];
-
-            filters.forEach((filter) => {
-                if (filter.reset?.length > 0) {
-                    filter.reset.forEach((childId) => {
-                        resetMappings.push({ childId, parentId: filter.name });
-                    });
-                }
-            });
-
-            filters.forEach((filter, index) => {
-                if (
-                    filter.key &&
-                    resetMappings.some(
-                        (mapping) => mapping.childId === filter.key
-                    )
-                ) {
-                    resetMappings.forEach((mapping) => {
-                        if (
-                            updatedFilter &&
-                            mapping.childId === filter.key &&
-                            mapping.parentId === updatedFilter.name
-                        ) {
-                            updatedFilters[index].value = '';
-                            gridRef.current.setColumnFilterValue(
-                                updatedFilters[index].name,
-                                null
-                            );
-                        }
-                    });
-                }
-            });
-
-            setFilterValue(filters);
-        }, []);
-
-        const handleChangeSearch = (e) => {
-            const { value } = e.target;
-            setSearch(value);
-        };
-
-        const handleSettingClick = (s, d) => {
-            switch (s.id) {
-                case 'activate':
-                    CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
-                        toast.success(result.message);
-                    });
-                    break;
-                case 'oauth2':
-                    let oauth2Payload = d;
-
-                    if (s.key?.detailKey?.length > 0) {
-                        for (const k of s.key.detailKey) {
-                            if (oauth2Payload?.[k]) {
-                                oauth2Payload = oauth2Payload[k];
-                            } else {
-                                oauth2Payload = undefined;
-                                break;
-                            }
-                        }
-                    }
-                    CustomFetch(
-                        s.key.redirect,
-                        'POST',
-                        { ...oauth2Payload, id: d.id },
-                        (result) => {
-                            if (result.url !== '') {
-                                window.location.href = result.url;
-                            } else {
-                                toast.error(
-                                    'An error occurred while processing the request.'
-                                );
-                            }
-                        }
-                    );
-                    break;
-                case 'delete':
-                    const getDataId = () => {
-                        for (const item of ajaxSetting.where) {
-                            if (
-                                item.hasOwnProperty('urlParam') &&
-                                item.urlParam === 'dataId'
-                            ) {
-                                return item.value;
-                            }
-                        }
-                        return 0;
-                    };
-
-                    confirmAlert({
-                        title: 'Delete Item',
-                        message:
-                            s.description && s.description !== ''
-                                ? s.description
-                                : `Are you sure you want to delete ${
-                                      d.name
-                                          ? d.name
-                                          : d.label
-                                          ? d.label
-                                          : 'this item'
-                                  }?`,
-                        buttons: [
-                            {
-                                label: 'Yes',
-                                onClick: () => {
-                                    let deleteForm = {
-                                        url: '',
-                                        method: 'DELETE',
-                                        payload: {},
-                                    };
-
-                                    if (
-                                        form.hasOwnProperty('json') &&
-                                        form.json === true
-                                    ) {
-                                        deleteForm.url = `${form.url}/jsonDelete`;
-                                        deleteForm.method = 'POST';
-                                        deleteForm.payload = {
-                                            id: d[form.primaryKey],
-                                            dataId: getDataId(),
-                                        };
-                                    } else {
-                                        deleteForm.url = `${form.url}/${
-                                            d[form.primaryKey]
-                                        }`;
-                                    }
-
-                                    CustomFetch(
-                                        deleteForm.url,
-                                        deleteForm.method,
-                                        deleteForm.payload,
-                                        (result) => {
-                                            if (result.error === '') {
-                                                handleReload();
-
-                                                toast.success(
-                                                    `The selected item has been deleted.`
-                                                );
-                                            } else {
-                                                toast.error(
-                                                    <div>
-                                                        {parse(result.error)}
-                                                    </div>
-                                                );
-                                            }
-                                        }
-                                    );
-                                },
-                            },
-                            {
-                                label: 'No',
-                                onClick: () => close(),
-                            },
-                        ],
-                    });
-                    break;
-                case 'envelope':
-                    CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
-                        toast.success(result.message);
-                    });
-                    break;
-                case 'gallery':
-                    // Function to access nested property using a series of keys
-                    const getNestedValue = (data, keys) =>
-                        keys.reduce(
-                            (currentValue, key) =>
-                                currentValue && currentValue[key] !== undefined
-                                    ? currentValue[key]
-                                    : undefined,
-                            data
-                        );
-
-                    // Extracting nested value using predefined keys from 's.relation'
-                    const nestedValue = getNestedValue(d, s.relation);
-
-                    // Mapping nested values to create gallery array with source and captions
-                    const galleryArray = nestedValue.map((item) => ({
-                        src: item[s.key],
-                        caption: item.file_name,
-                    }));
-
-                    setGalleryData(galleryArray);
-
-                    modalGalleryOpen();
-                    break;
-                case 'link':
-                    const url = `${s.baseUrl}/${d[s.key]}`;
-                    navigator.clipboard.writeText(url).then(
-                        () => {
-                            toast.success(
-                                'URL has been copied to your clipboard.'
-                            );
-                        },
-                        () => {
-                            toast.warning('Failed to copy URL to clipboard.');
-                        }
-                    );
-                    break;
-                case 'sound':
-                    const soundRelation = s.relation.reduce((acc, id) => {
-                        if (acc === '') {
-                            return d[id];
-                        } else {
-                            if (acc && acc[id]) {
-                                return acc[id];
-                            } else {
-                                return '';
-                            }
-                        }
-                    }, '');
-
-                    if (soundRelation && soundRelation[s.key] && s.url) {
-                        CustomFetch(
-                            `${s.url}/${soundRelation[s.key]}`,
-                            'POST',
-                            {},
-                            (res) => {
-                                if (res && res !== '') {
-                                    setAudioSource(res);
-                                }
-                            }
-                        );
-                    }
-                    break;
-                case 'update':
-                    modalOpen('update', d.id);
-                    break;
-                default:
-                    confirmAlert({
-                        title: s.title,
-                        message: '',
-                        buttons: [
-                            {
-                                label: 'Yes',
-                                onClick: () =>
-                                    CustomFetch(
-                                        s.url + '/' + d[form.primaryKey],
-                                        s.method,
-                                        {},
-                                        function (result) {
-                                            if (result.error === '') {
-                                                handleReload();
-
-                                                toast.success(String(s.title));
-                                            } else {
-                                                toast.error(
-                                                    <div>
-                                                        {parse(result.error)}
-                                                    </div>
-                                                );
-                                            }
-                                        }
-                                    ),
-                            },
-                            {
-                                label: 'No',
-                                onClick: () => close(),
-                            },
-                        ],
-                    });
-                    break;
-            }
-        };
-
-        const handleReset = (filter) => {
-            if (filter && filter.length > 0) {
-                filter.forEach((f) => {
-                    gridRef.current.setColumnFilterValue(f.name, f.value);
-                });
-
-                setFilterData(filter);
-            }
-        };
-
-        const handleReload = () => {
-            gridRef.current.paginationProps.reload();
-        };
-
-        const handleSort = (value) => {
-            if (setConfig) {
-                setConfig((prevState) => {
-                    const { id, dir } = value || {}; // Destructure id and dir from value (if provided)
-                    const sortBy = id || null;
-                    const sort = dir === 1 ? 'asc' : dir === -1 ? 'desc' : null;
-
-                    return {
-                        ...prevState,
-                        ajaxSetting: {
-                            ...prevState.ajaxSetting,
-                            sortBy,
-                            sort,
-                        },
-                    };
-                });
-            }
-        };
-
-        const onRowClick = useCallback((rowProps, event) => {
-            const cellElement = event.target.closest(
-                '.InovuaReactDataGrid__cell'
-            );
-            const columnIndex = Array.from(
-                cellElement.parentNode.children
-            ).indexOf(cellElement);
-
-            if (
-                rowProps.columns.length > 1 &&
-                columnIndex === rowProps.columns.length - 1
-            ) {
-                // Handle last column click
-            } else {
-                const column = rowProps.columns[columnIndex];
-
-                if (column.type !== 'dropdown') {
-                    if (column.id !== '__checkbox-column') {
-                        if (column.link && column.link.url) {
-                            const fileRelationArray = column.id.split('.');
-                            const linkUrl = column.link.url;
-                            const linkKey =
-                                rowProps.columns[columnIndex].link.key;
-                            const rowData = rowProps.data[linkKey];
-
-                            if (column.link.hasOwnProperty('folder')) {
-                                const linkFolder =
-                                    rowProps.columns[columnIndex].link.folder;
-
-                                if (rowProps.data[fileRelationArray[0]]) {
-                                    if (linkFolder !== '') {
-                                        window.open(
-                                            `${linkUrl}${rowData}/${linkFolder}`
-                                        );
-                                    } else {
-                                        window.open(`${linkUrl}${rowData}`);
-                                    }
-                                }
-                            } else {
-                                navigate(`${linkUrl}${rowData}`);
-                            }
-                        } else if (column.link && column.link.popup) {
-                            const linkPopup = column.link.popup;
-                            const linkKey =
-                                rowProps.columns[columnIndex].link.key;
-                            const rowData = rowProps.data[linkKey];
-
-                            window.open(
-                                `${linkPopup}/${rowData}`,
-                                '',
-                                'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
-                            );
-                        } else {
-                            const updateSetting = settings.find(
-                                (setting) => setting.id === 'update'
-                            );
-
-                            if (updateSetting) {
-                                modalOpen(
-                                    'update',
-                                    rowProps.data[form.primaryKey]
-                                );
-                            }
-                        }
-                    }
-                }
-            }
-        }, []);
-
-        const onRenderRow = useCallback((rowProps) => {
-            // save the original handlers to be called later
-            const { onClick } = rowProps;
-
-            rowProps.onClick = (event) => {
-                onRowClick(rowProps, event);
-
-                const cellElement = event.target.closest(
-                    '.InovuaReactDataGrid__cell'
-                );
-                const columnIndex = Array.from(
-                    cellElement.parentNode.children
-                ).indexOf(cellElement);
-
-                const column = rowProps.columns[columnIndex];
-
-                if (column.id === '__checkbox-column') {
-                    if (onClick) {
-                        onClick(event);
-                    }
-                }
-            };
-        }, []);
-
-        const exportTrigger = async () => {
-            try {
-                toast.success('Starting export please wait...');
-
-                let payload;
-
-                if (form.export.useData) {
-                    payload = { data: dataRef.current };
-                } else {
-                    payload = {
-                        filter: filterValue,
-                        paramId: paramValue || '',
-                    };
-                }
-
-                const res = await Download(form.export.url, 'POST', payload);
-
-                if (res.data.error) {
-                    toast.error(res.data.error);
-                } else {
-                    // Assuming the response contains a Blob or similar data
-                    if (res.data && res.data instanceof Blob) {
-                        const fileName = `${form.export.filename}`;
-                        saveAs(res.data, fileName);
-                    } else {
-                        // Handle the case where the response is not a Blob
-                        toast.error('Invalid file format received.');
-                    }
-                }
-            } catch (error) {
-                console.info(error);
-            }
-        };
-
-        const sortTrigger = () => {
-            let baseUrl = form.url.replace('/ajax', '');
-            let sortUrl = paramValue
-                ? `${baseUrl}/${paramValue}/sort`
-                : `${baseUrl}/sort`;
-
-            if (form.sort?.url) {
-                sortUrl = form.sort.url;
-            }
-
-            const newState = {
-                form,
-                page: {
-                    data: pageData,
-                    setting: pageSetting,
-                },
-                paramValue,
-            };
-
-            navigate(sortUrl, { state: newState });
-        };
-
-        const renderCreateButton = () => {
-            if (form.createDisable && form.createDisable === true) {
-                return null;
-            }
-
-            return (
-                <div className={styles['filterAction--alt']}>
-                    {form.export && form.export.url && (
-                        <button className={styles.btn} onClick={exportTrigger}>
-                            Export
-                        </button>
-                    )}
-                    {form.sort && form.sort.title && (
-                        <button className={styles.btn} onClick={sortTrigger}>
-                            <div className="icon-plus"></div> Sort Order
-                        </button>
-                    )}
-
-                    {(form.create &&
-                        form.create.title &&
-                        form.create.title !== '') ||
-                    (form.url && form.create?.title !== '') ? (
-                        <button
-                            className={styles.btn}
-                            onClick={(e) => {
-                                e.preventDefault();
-
-                                if (form.create) {
-                                    if (form.create.url) {
-                                        navigate(form.create.url);
-                                    } else {
-                                        modalOpen('create', 0);
-                                    }
-                                } else {
-                                    if (form.url) {
-                                        window.open(
-                                            form.url,
-                                            '',
-                                            'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
-                                        );
-                                    }
-                                }
-                            }}
-                        >
-                            <div className="icon-plus"></div> Create
-                        </button>
-                    ) : form.url && form.modal === false ? (
-                        <button
-                            className={styles.btn}
-                            onClick={(e) => {
-                                e.preventDefault();
-
-                                window.open(
-                                    form.url,
-                                    '',
-                                    'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
-                                );
-                            }}
-                        >
-                            <div className="icon-plus"></div> Create
-                        </button>
-                    ) : null}
-                </div>
-            );
-        };
-
-        const renderSearch = () => {
-            const isSearchEnabled = !(form.searchDisable === true);
-            const isCreateDisabled = form.createDisable === true;
-
-            if (isSearchEnabled) {
-                return (
-                    <div className={styles['filterInput--alt']}>
-                        <div className={styles['icon-search']}>
-                            <Search strokeWidth={2} size={18} />
-                        </div>
-                        <input
-                            type="text"
-                            placeholder="Search"
-                            value={search}
-                            onChange={handleChangeSearch}
-                        />
-                    </div>
-                );
-            } else if (!isCreateDisabled) {
-                return (
-                    <div
-                        className={styles['filterInput--alt']}
-                        style={{
-                            height: style.data_grid_search_height
-                                ? style.data_grid_search_height
-                                : '58px',
-                        }}
-                    ></div>
-                );
-            }
-
-            return null; // Return null if neither search is enabled nor create is disabled
-        };
-
-        const renderRowContextMenu = useCallback(
-            (menuProps, { rowProps }) => {
-                if (form && form.newTabUrl && form.newTabUrl !== '') {
-                    menuProps.autoDismiss = true;
-                    menuProps.items = [
-                        {
-                            label: 'Open Link in a New Tab',
-                            onClick: () => {
-                                window.open(
-                                    `${form.newTabUrl}${
-                                        rowProps.data[form.primaryKey]
-                                    }`
-                                );
-                            },
-                        },
-                    ];
-                }
-            },
-            [form]
-        );
-
-        const handleCoding = (c, data) => {
-            const icons = [];
-            const assetPath =
-                import.meta.env.REACT_APP_ASSET_PATH !== undefined
-                    ? import.meta.env.REACT_APP_ASSET_PATH
-                    : '';
-
-            const addIcon = (src, icon, alt, tooltipContent, key) => {
-                if (src && src !== '') {
-                    icons.push(
-                        <img
-                            src={`${assetPath}${src}`}
-                            alt={alt}
-                            data-tooltip-id="system-tooltip"
-                            data-tooltip-content={tooltipContent}
-                            key={key}
-                        />
-                    );
-                } else {
-                    let IconComponent = null;
-
-                    if (icon === 'archive') {
-                        IconComponent = ShippingBoxV1;
-                    } else if (icon === 'folder') {
-                        IconComponent = Folder;
-                    } else if (icon === 'inbox') {
-                        IconComponent = Inbox;
-                    } else if (icon === 'network') {
-                        IconComponent = Network;
-                    } else if (icon === 'urgent') {
-                        IconComponent = TriangleAlert;
-                    }
-
-                    if (IconComponent) {
-                        icons.push(
-                            <IconComponent
-                                data-tooltip-id="system-tooltip"
-                                data-tooltip-content={tooltipContent}
-                                strokeWidth={2}
-                                size={18}
-                                className={styles.tdaction}
-                                key={key}
-                            />
-                        );
-                    }
-                }
-            };
-
-            c.config.forEach((config, configKey) => {
-                const fieldValue = config.id.reduce((acc, id) => {
-                    if (acc === '') {
-                        return data[id];
-                    } else {
-                        return acc ? acc[id] : '';
-                    }
-                }, '');
-
-                const iconData = config.icons.find(
-                    (icon) => icon.value === fieldValue
-                );
-
-                if (
-                    iconData &&
-                    (iconData.src || iconData.icon) &&
-                    iconData.alt &&
-                    iconData.tooltipContent
-                ) {
-                    addIcon(
-                        iconData.src ? iconData.src : null,
-                        iconData.icon ? iconData.icon : null,
-                        iconData.alt,
-                        iconData.tooltipContent,
-                        `coding-${config.id[0]}-${configKey}`
-                    );
-                }
-            });
-
-            return icons;
-        };
-
-        /** Table Hooks */
-        useEffect(() => {
-            if (setRowsSelected) {
-                setRowsSelected(selected);
-            }
-        }, [selected]);
-
-        useEffect(() => {
-            const delayedSetDSearch = debounce(() => {
-                setDSearch(search);
-            }, 300); // Adjust the delay (in milliseconds) according to your needs
-
-            delayedSetDSearch();
-
-            return delayedSetDSearch.cancel; // Cleanup the debounce timer on unmount
-        }, [search, setDSearch]);
-
-        const renderSetting = (s, d) => {
-            let iconStyle = {};
-            let allow = true;
-
-            if (s.active) {
-                if (
-                    d.hasOwnProperty(s.active.id) &&
-                    d[s.active.id] === s.active.value &&
-                    s.active.type !== 'greater' &&
-                    s.active.type !== 'not null'
-                ) {
-                    iconStyle = {
-                        color: s.active.colour,
-                    };
-                } else if (
-                    s.active.type === 'greater' &&
-                    d[s.active.id] > s.active.value
-                ) {
-                    iconStyle = {
-                        color: s.active.colour,
-                    };
-                } else if (
-                    s.active.type === 'not null' &&
-                    d[s.active.id] !== null
-                ) {
-                    iconStyle = {
-                        color: s.active.colour,
-                    };
-                } else {
-                    iconStyle = {
-                        color: '',
-                    };
-                }
-            }
-
-            const handleIconClick = (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleSettingClick(s, d);
-            };
-
-            const tooltipContent =
-                iconStyle && iconStyle.color ? s.active.title : s.title;
-
-            if (s.hide && s.hide.id && s.hide.value >= 0) {
-                if (
-                    d.hasOwnProperty(s.hide.id) &&
-                    parseInt(d[s.hide.id]) === parseInt(s.hide.value)
-                ) {
-                    allow = false;
-                }
-            }
-
-            if (s.id === 'oauth2') {
-                let tmpCheckValue = d;
-
-                if (s.key?.check?.length > 0) {
-                    for (const k of s.key.check) {
-                        if (tmpCheckValue?.[k]) {
-                            tmpCheckValue = tmpCheckValue[k];
-                        } else {
-                            tmpCheckValue = undefined;
-                            break;
-                        }
-                    }
-                }
-
-                if (!tmpCheckValue) {
-                    allow = false;
-                }
-            }
-
-            if (allow) {
-                switch (s.id) {
-                    case 'activate':
-                        return getIconComponent(CircleCheck);
-                    case 'archive':
-                        return getIconComponent(ShippingBoxV1);
-                    case 'oauth2':
-                        return getIconComponent(LockOn);
-                    case 'complete':
-                        return getIconComponent(Check);
-                    case 'copy':
-                        return getIconComponent(Copy);
-                    case 'delete':
-                        return getIconComponent(Backspace);
-                    case 'envelope':
-                        return getIconComponent(Envelope);
-                    case 'family':
-                        return getIconComponent(Network);
-                    case 'gallery':
-                        return getIconComponent(Image);
-                    case 'link':
-                        return getIconComponent(LinkOut);
-                    case 'primary':
-                        return getIconComponent(Ribbon);
-                    case 'restore':
-                        return getIconComponent(ArrowCounterClockwise);
-                    case 'sound':
-                        return getIconComponent(SoundOn);
-                    case 'ssa':
-                        return getIconComponent(Clock);
-                    case 'update':
-                        return getIconComponent(Edit);
-                    default:
-                        return null;
-                }
-            } else {
-                return null;
-            }
-
-            function getIconComponent(IconComponent) {
-                return (
-                    <span key={`setting-${s.id}`} onClick={handleIconClick}>
-                        <IconComponent
-                            data-tooltip-id="system-tooltip"
-                            data-tooltip-content={tooltipContent}
-                            strokeWidth={2}
-                            size={18}
-                            className={styles.tdaction}
-                            style={iconStyle}
-                        />
-                    </span>
-                );
-            }
-        };
-
-        const renderColumnContextMenu = useCallback(
-            (menuProps, { cellProps }) => {
-                const filteredItems = menuProps.items
-                    .map((item, key) => {
-                        if (key >= 6 && key <= 9) {
-                            return null; // Skip items with keys 6-9 [lock columns setting]
-                        }
-                        return item;
-                    })
-                    .filter(Boolean); // Filter out any null items
-
-                menuProps.items = filteredItems;
-            },
-            []
-        );
-
-        const handleDropdownUpdate = async (id, url, method, value) => {
-            try {
-                const res = await CustomFetch(url, method, {
-                    [id]: value,
-                });
-
-                if (res.data.error === '') {
-                    handleReload();
-                } else {
-                    toast.error(res.data.error);
-                }
-            } catch (err) {
-                console.error(err);
-            }
-        };
-
-        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
-                }
-            });
-        };
-
-        useEffect(() => {
-            const dropdownFetches = columns
-                .filter((column) => column.type === 'dropdown')
-                .map((column) =>
-                    getDropdownData(column.id, column.url, column.fields)
-                );
-
-            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 = {};
-
-                                if (
-                                    column.styleCondition &&
-                                    column.styleCondition.key
-                                ) {
-                                    if (value) {
-                                        columnStyle = {
-                                            ...(column.style ?? {}),
-                                            margin: '0px',
-                                        };
-                                    }
-                                } else {
-                                    columnStyle = {
-                                        ...(column.style ?? {}),
-                                        margin: '0px',
-                                    };
-                                }
-
-                                return columnStyle;
-                            },
-                            type: column.type,
-                        };
-
-                        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;
-                        }
-
-                        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 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>;
-                                        } 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 = {};
-
-                                            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,
-                                                    };
-                                                }
-                                            }
-
-                                            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'
-                                            )}`;
-                                        }
-
-                                        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 {
-                                    ...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 (
-                                                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={
-                                                                    styles.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={
-                                                                styles.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 === '') {
-                                                if (data[id]) {
-                                                    return data[id];
-                                                } else {
-                                                    return '';
-                                                }
-                                            } else {
-                                                if (acc && acc[id]) {
-                                                    return acc[id];
-                                                } else {
-                                                    return '';
-                                                }
-                                            }
-                                        }, '');
-
-                                        if (value) {
-                                            if (Array.isArray(value)) {
-                                                if (value[0]) {
-                                                    value = value[0];
-                                                }
-                                            }
-
-                                            if (
-                                                Array.isArray(column.nameFrom)
-                                            ) {
-                                                value = column.nameFrom
-                                                    .map(
-                                                        (nf) =>
-                                                            value?.[nf] ?? ''
-                                                    )
-                                                    .join(' ');
-                                            } else {
-                                                if (
-                                                    value &&
-                                                    value.hasOwnProperty(
-                                                        column.nameFrom
-                                                    )
-                                                ) {
-                                                    value =
-                                                        value[column.nameFrom];
-                                                }
-                                            }
-
-                                            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 (typeof value === 'string') {
-                                                    return <span>{value}</span>;
-                                                } else {
-                                                    return null;
-                                                }
-                                            }
-                                        } 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 (
-                                            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[
-                                                                        a
-                                                                    ]
-                                                                ) {
-                                                                    childValue =
-                                                                        childValue[
-                                                                            a
-                                                                        ];
-                                                                }
-                                                            }
-                                                        );
-
-                                                        if (childValue) {
-                                                            const propertyValues =
-                                                                nameProperties
-                                                                    .map(
-                                                                        (
-                                                                            prop
-                                                                        ) =>
-                                                                            childValue[
-                                                                                prop
-                                                                            ]
-                                                                    )
-                                                                    .filter(
-                                                                        (
-                                                                            value
-                                                                        ) =>
-                                                                            value !==
-                                                                                undefined &&
-                                                                            value !==
-                                                                                null
-                                                                    );
-                                                            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 {
-                                                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]
-                                                                : '',
-                                                        ''
-                                                    );
-
-                                                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>{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;
-
-                                            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={styles.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={
-                                                                styles.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 {
-                                    ...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 }) => {
-                                return (
-                                    <div className={styles.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;
-                            }
-
-                            let filterValue = '';
-
-                            if (column.filter.hasOwnProperty('value')) {
-                                if (
-                                    column.filter.value === '' &&
-                                    column.filter.param === 'profileId' &&
-                                    userProfile?.id
-                                ) {
-                                    filterValue = userProfile.id;
-                                } else {
-                                    filterValue = column.filter.value;
-                                }
-                            }
-
-                            return {
-                                key: column.filter.key
-                                    ? column.filter.key
-                                    : null,
-                                name: filterName,
-                                operator: column.filter.operator,
-                                type: column.filter.type,
-                                value: filterValue,
-                                reset: column.filter.reset
-                                    ? column.filter.reset
-                                    : [],
-                            };
-                        });
-
-                    setFilterValue(newFilterValue);
-                    setSelected([]);
-                })
-                .catch((error) => {
-                    console.error('Error in fetching dropdown data: ', error);
-                });
-        }, [columns, filterDataSource]);
-
-        useEffect(() => {
-            if (setFilterData) {
-                setFilterData(filterValue);
-            }
-        }, [filterValue]);
-
-        const createFilterName = (column) => {
-            let filterName = Array.isArray(column.id)
-                ? column.id.join('.') + '.'
-                : column.id;
-
-            if (column.nameFrom) {
-                filterName += column.nameFrom;
-            }
-
-            if (column.jsonData) {
-                filterName += column.jsonData;
-            }
-
-            return filterName;
-        };
-
-        const updateFilterDataSource = (filterName, data) => {
-            const filterIndex = filterDataSource.findIndex(
-                (filter) => filter.id === filterName
-            );
-
-            if (filterIndex >= 0) {
-                const updatedFilter = {
-                    ...filterDataSource[filterIndex],
-                    dataset: data,
-                };
-                setFilterDataSource([
-                    ...filterDataSource.slice(0, filterIndex),
-                    updatedFilter,
-                    ...filterDataSource.slice(filterIndex + 1),
-                ]);
-            } else {
-                const newFilter = {
-                    id: filterName,
-                    dataset: data,
-                };
-                setFilterDataSource((prevState) => [...prevState, newFilter]);
-            }
-        };
-
-        useEffect(() => {
-            columns.forEach((column) => {
-                if (column.filter && column.filter.url) {
-                    const filterWhere = {
-                        ...(column.filter.where && {
-                            where: column.filter.where,
-                        }),
-                        ...(column.filter.fields && {
-                            fields: column.filter.fields,
-                        }),
-                        ...(column.filter.order && {
-                            order: column.filter.order,
-                        }),
-                        ...(column.filter.orderBy && {
-                            orderBy: column.filter.orderBy,
-                        }),
-                    };
-
-                    CustomFetch(
-                        column.filter.url,
-                        'POST',
-                        filterWhere,
-                        (res) => {
-                            const filterName = createFilterName(column);
-                            updateFilterDataSource(filterName, res.data);
-                        }
-                    );
-                } else if (column.filter && column.filter.options) {
-                    const filterName = createFilterName(column);
-                    updateFilterDataSource(filterName, column.filter.options);
-                }
-            });
-
-            setSelected([]);
-        }, [columns]);
-
-        // Data Grid Styling
-        const [windowHeight, setWindowHeight] = useState(window.innerHeight);
-        const [dataCount, setDataCount] = useState(0);
-        const [gridStyle, setGridStyle] = useState({
-            minHeight:
-                gridHeight && gridHeight > 0
-                    ? gridHeight
-                    : dataCount > 5
-                    ? dataCount > 8
-                        ? windowHeight * 0.7 > 550
-                            ? windowHeight * 0.7
-                            : 550
-                        : 450
-                    : 400,
-            boxShadow: 'none',
-        });
-        const headerProps = {
-            style: style ? style : {},
-        };
-
-        useEffect(() => {
-            const getMinimumHeight = () => {
-                if (gridHeight > 0) return gridHeight;
-                if (dataCount > 0) {
-                    if (dataCount <= 5) return 400;
-                    if (dataCount <= 8) return 450;
-                }
-                return Math.max(window.innerHeight * 0.7, 550);
-            };
-
-            const minHeight = getMinimumHeight();
-            setGridStyle((prevState) => ({ ...prevState, minHeight }));
-
-            if (ajaxSetting?.take >= 35) {
-                setLimit(ajaxSetting.take);
-            } else {
-                const calculateRows = (height) =>
-                    Math.floor((height - 100) / 40);
-
-                const rowCount = calculateRows(minHeight);
-                setLimit(rowCount);
-            }
-        }, [dataCount, gridHeight, window.innerHeight]);
-
-        useEffect(() => {
-            const handleResize = () => {
-                setWindowHeight(window.innerHeight);
-            };
-
-            window.addEventListener('resize', handleResize);
-
-            // Clean up the event listener
-            return () => {
-                window.removeEventListener('resize', handleResize);
-            };
-        }, []);
-
-        return (
-            <>
-                {renderSearch()}
-                {renderCreateButton()}
-                {limit && limit > 0 ? (
-                    <>
-                        <ReactDataGrid
-                            {...tableSetting}
-                            columns={gridColumns}
-                            dataSource={dataSource}
-                            filterValue={filterValue}
-                            limit={limit}
-                            enableColumnAutosize={false}
-                            enableColumnFilterContextMenu={false}
-                            handle={(ref) =>
-                                (gridRef.current = ref ? ref.current : null)
-                            }
-                            headerProps={headerProps}
-                            idProperty="id"
-                            minRowHeight={40}
-                            onFilterValueChange={(fv) => {
-                                handleFilterChange(fv, filterValue);
-                            }}
-                            onLimitChange={setLimit}
-                            onSelectionChange={handleSelectionChange}
-                            onSortInfoChange={handleSort}
-                            onRenderRow={onRenderRow}
-                            pagination
-                            renderRowContextMenu={renderRowContextMenu}
-                            renderColumnContextMenu={renderColumnContextMenu}
-                            rowClassName="vs-datagrid--row"
-                            rowHeight={null}
-                            selected={selected}
-                            showZebraRows={true}
-                            showActiveRowIndicator={false}
-                            sortInfo={
-                                ajaxSetting.sortBy && ajaxSetting.sort
-                                    ? {
-                                          name: ajaxSetting.sortBy,
-                                          dir:
-                                              ajaxSetting.sort === 'asc'
-                                                  ? 1
-                                                  : -1,
-                                      }
-                                    : null
-                            }
-                            style={gridStyle}
-                        />
-                    </>
-                ) : null}
-                {audioSource && <audio src={audioSource} ref={audioRef} />}
-                <Popup
-                    open={modalShow}
-                    onClose={modalClose}
-                    closeOnDocumentClick={false}
-                    nested
-                >
-                    <Form
-                        ajaxSetting={ajaxSetting}
-                        api={api}
-                        closeModal={modalClose}
-                        columnId={formId}
-                        fetchTable={handleReload}
-                        formSettings={formData}
-                        formType={formType}
-                        gridRef={gridRef}
-                        mapbox={mapbox}
-                        modalOpen={modalOpen}
-                        paramValue={paramValue}
-                        style={style}
-                        updateForm={setFormData}
-                    />
-                </Popup>
-                <Popup
-                    open={modalGalleryShow}
-                    onClose={modalGalleryClose}
-                    closeOnDocumentClick={false}
-                >
-                    <div
-                        className={`${styles.modalwrap} ${styles['top--modal']}`}
-                    >
-                        <div className={styles.modal}>
-                            <div className={styles.modal__header}>
-                                <h1>Gallery</h1>
-                                <button
-                                    className={styles.modal__close}
-                                    onClick={modalGalleryClose}
-                                >
-                                    <CircleX strokeWidth={1} size={24} />
-                                </button>
-                            </div>
-                            <div className={styles.modal__content}>
-                                <div className={styles.formcontainer}>
-                                    <Gallery
-                                        images={galleryData}
-                                        enableImageSelection={false}
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </Popup>
-            </>
-        );
-    }
-);
-
-export default DataGrid;