@visns-studio/visns-components 4.7.2 → 4.7.3

package/src/components/cms/DataGrid.jsx

@@ -0,0 +1,1461 @@
+import React, { useCallback, useEffect, 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 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 { confirmAlert } from 'react-confirm-alert';
+import { toast } from 'react-toastify';
+import Toggle from 'react-toggle';
+import {
+    Backspace,
+    Check,
+    Clock,
+    CloudDownload,
+    Copy,
+    Edit,
+    Folder,
+    Inbox,
+    Network,
+    Ribbon,
+    Search,
+    ShippingBoxV1,
+    ToggleOff,
+    ToggleOnFill,
+    TriangleAlert,
+} from 'akar-icons';
+
+import '@inovua/reactdatagrid-community/index.css';
+import 'react-confirm-alert/src/react-confirm-alert.css';
+import 'react-toggle/style.css';
+
+import CustomFetch from '../crm/Fetch';
+import Form from './Form';
+
+const loadData = async (
+    { skip, limit, sortInfo, currentData, filterValue, groupBy },
+    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 = ({
+    ajaxSetting,
+    columns,
+    form,
+    gridHeight,
+    settings,
+    setFilterData,
+    setConfig,
+    style,
+}) => {
+    const navigate = useNavigate();
+
+    /** Modal States */
+    const [formData, setFormData] = useState(form);
+    const [formType, setFormType] = useState('');
+    const [formId, setFormId] = useState(0);
+    const [modalShow, setModalShow] = useState(false);
+
+    /** Modal Functions */
+    const childDropdownCallback = (data) => {
+        let _form = { ...formData };
+
+        if (formData.fields.length > 0) {
+            formData.fields.forEach((a, b) => {
+                if (a.id === data.id) {
+                    _form.fields[b].options = data.data;
+                }
+            });
+        }
+
+        setFormData(_form);
+    };
+
+    const modalOpen = (formType, formId) => {
+        setModalShow(true);
+        setFormType(formType);
+        setFormId(formId);
+    };
+
+    const modalClose = () => {
+        setModalShow(false);
+    };
+
+    useEffect(() => {
+        setFormData(form);
+    }, [form]);
+
+    /** Table States */
+    const [dataReload, setDataReload] = useState(0);
+    const [dSearch, setDSearch] = useState('');
+    const data = useCallback(
+        (params) => {
+            const sqlResult = loadData(params, dSearch, ajaxSetting);
+
+            sqlResult.then((res) => {
+                setDataCount(res.count);
+            });
+
+            return sqlResult;
+        },
+        [ajaxSetting, dataReload, dSearch]
+    );
+    const [filterDataSource, setFilterDataSource] = useState([]);
+    const [filterValue, setFilterValue] = useState([]);
+    const [gridColumns, setGridColumns] = useState([]);
+    const [limit, setLimit] = useState(ajaxSetting.take || 10);
+    const [search, setSearch] = useState('');
+
+    /** Table Functions */
+    const handleChangeSearch = (e) => {
+        const { value } = e.target;
+        setSearch(value);
+    };
+
+    const handleSettingClick = (s, d) => {
+        switch (s.id) {
+            case 'update':
+                modalOpen('update', d.id);
+                break;
+            case 'delete':
+                confirmAlert({
+                    title: 'Delete Item',
+                    message: `Are you sure you want to delete ${
+                        d.name ? d.name : d.label ? d.label : 'this item'
+                    }?`,
+                    buttons: [
+                        {
+                            label: 'Yes',
+                            onClick: () =>
+                                CustomFetch(
+                                    form.url + '/' + d[form.primaryKey],
+                                    'DELETE',
+                                    {},
+                                    (result) => {
+                                        if (result.error === '') {
+                                            const min = 0;
+                                            const max = 999999999;
+                                            const randomNumber = Math.floor(
+                                                Math.random() *
+                                                    (max - min + 1) +
+                                                    min
+                                            );
+
+                                            setDataReload(randomNumber);
+
+                                            toast.success(
+                                                `The selected item has been deleted.`
+                                            );
+                                        } else {
+                                            toast.error(String(result.error));
+                                        }
+                                    }
+                                ),
+                        },
+                        {
+                            label: 'No',
+                            onClick: () => close(),
+                        },
+                    ],
+                });
+                break;
+            default:
+                confirmAlert({
+                    title: s.title,
+                    message: '',
+                    buttons: [
+                        {
+                            label: 'Yes',
+                            onClick: () =>
+                                CustomFetch(
+                                    s.url + '/' + d[form.primaryKey],
+                                    s.method,
+                                    {},
+                                    function (result) {
+                                        if (result.error === '') {
+                                            const min = 0;
+                                            const max = 999999999;
+                                            const randomNumber = Math.floor(
+                                                Math.random() *
+                                                    (max - min + 1) +
+                                                    min
+                                            );
+
+                                            setDataReload(randomNumber);
+
+                                            toast.success(String(s.title));
+                                        } else {
+                                            toast.error(String(result.error));
+                                        }
+                                    }
+                                ),
+                        },
+                        {
+                            label: 'No',
+                            onClick: () => close(),
+                        },
+                    ],
+                });
+                break;
+        }
+    };
+
+    const handleReload = () => {
+        const min = 0;
+        const max = 999999999;
+        const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
+
+        setDataReload(randomNumber);
+    };
+
+    const handleSort = (value) => {
+        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);
+
+            let proceed = true;
+
+            columns.forEach((a, b) => {
+                if (
+                    a.id === rowProps.columns[columnIndex].id &&
+                    a.type === 'toggle'
+                ) {
+                    proceed = false;
+                }
+            });
+
+            if (proceed) {
+                if (
+                    rowProps.columns[columnIndex].link &&
+                    rowProps.columns[columnIndex].link.url
+                ) {
+                    if (rowProps.columns[columnIndex].link.folder) {
+                        window.location.href =
+                            rowProps.columns[columnIndex].link.url +
+                            rowProps.data[
+                                rowProps.columns[columnIndex].link.key
+                            ] +
+                            '/' +
+                            rowProps.columns[columnIndex].link.folder;
+                    } else {
+                        navigate(
+                            `${rowProps.columns[columnIndex].link.url}${
+                                rowProps.data[
+                                    rowProps.columns[columnIndex].link.key
+                                ]
+                            }`,
+                            {
+                                state: {
+                                    form: form,
+                                },
+                            }
+                        );
+                    }
+                }
+            }
+        },
+        [form]
+    );
+
+    const onRenderRow = useCallback((rowProps) => {
+        // save the original handlers to be called later
+        const { onClick } = rowProps;
+
+        rowProps.onClick = (event) => {
+            onRowClick(rowProps, event);
+            if (onClick) {
+                onClick(event);
+            }
+        };
+    }, []);
+
+    const sortTrigger = () => {
+        const url = form.url.replace('/ajax', '');
+        const newState = {
+            form: form,
+        };
+
+        navigate(`${url}/sort`, {
+            state: newState,
+        });
+    };
+
+    /** Table Hooks */
+    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 = {};
+
+        if (s.active) {
+            if (
+                d.hasOwnProperty(s.active.id) &&
+                !s.active.hasOwnProperty('type') &&
+                d[s.active.id] === s.active.value
+            ) {
+                iconStyle = {
+                    color: s.active.colour,
+                };
+            } else if (s.active.hasOwnProperty('type')) {
+                switch (s.active.type) {
+                    case 'greater':
+                        if (d[s.active.id] > s.active.value) {
+                            iconStyle = {
+                                color: s.active.colour,
+                            };
+                        }
+                        break;
+                    case 'not null':
+                        if (d[s.active.id] !== null) {
+                            iconStyle = {
+                                color: s.active.colour,
+                            };
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+
+        const getIconComponent = (IconComponent) => (
+            <IconComponent
+                data-tooltip-id="system-tooltip"
+                data-tooltip-content={
+                    iconStyle && iconStyle.color ? s.active.title : s.title
+                }
+                strokeWidth={2}
+                size={18}
+                className="tdaction"
+                style={iconStyle}
+            />
+        );
+
+        switch (s.id) {
+            case 'complete':
+                return getIconComponent(Check);
+            case 'delete':
+                return getIconComponent(Backspace);
+            case 'primary':
+                return getIconComponent(Ribbon);
+            case 'ssa':
+                return getIconComponent(Clock);
+            case 'update':
+                return getIconComponent(Edit);
+            default:
+                return null;
+        }
+    };
+
+    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;
+    }, []);
+
+    useEffect(() => {
+        const renderColumn = (column) => {
+            let childValue;
+            let date;
+            let filterEditor = null;
+            let filterEditorProps = null;
+            let icons = [];
+            let relationName;
+            let selectedDataSource = null;
+            let stage;
+            let style;
+            let value;
+
+            const commonProps = {
+                header: column.label,
+                defaultFlex: 1,
+                link: column.link ? column.link : {},
+                minWidth:
+                    column.minWidth && column.minWidth > 0
+                        ? column.minWidth
+                        : undefined,
+                maxWidth:
+                    column.maxWidth && column.maxWidth > 0
+                        ? column.maxWidth
+                        : undefined,
+            };
+
+            switch (column.type) {
+                case 'address':
+                    return {
+                        ...commonProps,
+                        name: `${column.type}.${column.id}`,
+                        render: ({ data }) => {
+                            if (data.address1) {
+                                value += `${data.address1} `;
+                            }
+
+                            if (data.address2) {
+                                value += `${data.address2} `;
+                            }
+
+                            if (data.suburb) {
+                                value += `${data.suburb} `;
+                            }
+
+                            if (data.postcode) {
+                                value += `${data.postcode} `;
+                            }
+                        },
+                    };
+                case 'age':
+                    return {
+                        ...commonProps,
+                        name: `${column.type}.${column.id}`,
+                        render: ({ data }) => {
+                            value = column.id.reduce((acc, id) => {
+                                if (acc === '') {
+                                    return data[id];
+                                } else {
+                                    return 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 'coding':
+                    return {
+                        ...commonProps,
+                        name: 'audits.name',
+                        sortable: false,
+                        render: ({ data }) => {
+                            if (data) {
+                                return handleCoding(column, data);
+                            } else {
+                                return null;
+                            }
+                        },
+                    };
+                case 'created_by':
+                    return {
+                        ...commonProps,
+                        name: 'audits.name',
+                        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':
+                    if (column.filter && column.filter.type) {
+                        filterEditor = DateFilter;
+                        filterEditorProps = (props, { index }) => {
+                            return {
+                                dateFormat: 'DD-MM-YYYY',
+                                placeholder: 'All Dates',
+                            };
+                        };
+                    } else {
+                        filterEditor = null;
+                        filterEditorProps = null;
+                    }
+
+                    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'
+                                );
+                                style = {};
+
+                                if (
+                                    column.active &&
+                                    column.active.id &&
+                                    column.active.value === 'expired'
+                                ) {
+                                    if (
+                                        data[column.active.id] &&
+                                        moment(data[column.active.id]).isBefore(
+                                            moment()
+                                        )
+                                    ) {
+                                        style = {
+                                            color: column.active.colour,
+                                        };
+                                    }
+                                }
+
+                                return <span style={style}>{value}</span>;
+                            } else {
+                                return null;
+                            }
+                        },
+                    };
+                case 'datetime':
+                    if (column.filter && column.filter.type) {
+                        filterEditor = DateFilter;
+                        filterEditorProps = (props, { index }) => {
+                            return {
+                                dateFormat: 'DD-MM-YYYY',
+                                placeholder: 'All Dates',
+                            };
+                        };
+                    } else {
+                        filterEditor = null;
+                        filterEditorProps = null;
+                    }
+
+                    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 'file':
+                    return {
+                        ...commonProps,
+                        name: column.id,
+                        sortable: false,
+                        render: ({ data }) => {
+                            if (data) {
+                                return (
+                                    <span>
+                                        <CloudDownload
+                                            data-tooltip-id="system-tooltip"
+                                            data-tooltip-content="Download File"
+                                            strokeWidth={2}
+                                            size={18}
+                                            className="tdaction"
+                                        />
+                                    </span>
+                                );
+                            } else {
+                                return null;
+                            }
+                        },
+                    };
+                case 'icons':
+                    return {
+                        ...commonProps,
+                        name: column.id,
+                        sortable: false,
+                        render: ({ data }) => {
+                            icons = [];
+
+                            if (column.icons && column.icons.length > 0) {
+                                column.icons.forEach((icon) => {
+                                    icons.push(
+                                        <img
+                                            src={icon.url}
+                                            alt={icon.name}
+                                            data-tooltip-id="system-tooltip"
+                                            data-tooltip-content={icon.name}
+                                        />
+                                    );
+                                });
+                            }
+
+                            if (data) {
+                                return <span>{icons}</span>;
+                            } else {
+                                return null;
+                            }
+                        },
+                    };
+                case 'image':
+                    return {
+                        ...commonProps,
+                        name: column.id,
+                        render: ({ data }) => {
+                            if (data && data[column.id]) {
+                                const 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':
+                    selectedDataSource = filterDataSource.reduce((acc, fds) => {
+                        if (fds.id === column.id) {
+                            return fds.dataset;
+                        }
+                        return acc;
+                    }, null);
+
+                    if (
+                        column.filter &&
+                        column.filter.type &&
+                        column.filter.type === 'select'
+                    ) {
+                        filterEditor = SelectFilter;
+                        filterEditorProps = {
+                            placeholder: column.filter.placeholder
+                                ? column.filter.placeholder
+                                : 'All Options',
+                            dataSource: selectedDataSource,
+                        };
+                    } else {
+                        filterEditor = null;
+                        filterEditorProps = null;
+                    }
+
+                    return {
+                        ...commonProps,
+                        name: column.id,
+                        filterEditor: filterEditor,
+                        filterEditorProps: filterEditorProps,
+                        render: ({ data }) => {
+                            if (
+                                data &&
+                                column.options &&
+                                column.options[data[column.id]]
+                            ) {
+                                data = column.options[data[column.id]];
+
+                                return <span>{data}</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':
+                    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);
+
+                    if (
+                        column.filter &&
+                        column.filter.type &&
+                        column.filter.type === 'select'
+                    ) {
+                        filterEditor = SelectFilter;
+                        filterEditorProps = {
+                            placeholder: column.filter.placeholder
+                                ? column.filter.placeholder
+                                : 'All Options',
+                            dataSource: selectedDataSource,
+                        };
+                    } else {
+                        filterEditor = null;
+                        filterEditorProps = null;
+                    }
+
+                    return {
+                        ...commonProps,
+                        name: relationName,
+                        sortable: false,
+                        filterEditor: filterEditor,
+                        filterEditorProps: filterEditorProps,
+                        render: ({ data }) => {
+                            value = column.id.reduce((acc, id) => {
+                                if (acc === '') {
+                                    return data[id];
+                                } else {
+                                    if (acc && acc[id]) {
+                                        return acc[id];
+                                    } else {
+                                        return '';
+                                    }
+                                }
+                            }, '');
+
+                            if (value) {
+                                if (Array.isArray(column.nameFrom)) {
+                                    value = column.nameFrom
+                                        .map((nf) => value[nf])
+                                        .join(' ');
+                                } else {
+                                    value = value[column.nameFrom];
+                                }
+
+                                if (
+                                    column.placeholder &&
+                                    column.placeholder !== ''
+                                ) {
+                                    return <span>{column.placeholder}</span>;
+                                } else {
+                                    return <span>{value}</span>;
+                                }
+                            } else {
+                                return null;
+                            }
+                        },
+                    };
+                case 'relationArray':
+                    relationName =
+                        column.id.reduce((acc, id) => acc + `${id}.`, '') +
+                        column.nameFrom;
+
+                    selectedDataSource = filterDataSource.reduce((acc, fds) => {
+                        if (fds.id === relationName) {
+                            return fds.dataset;
+                        }
+                        return acc;
+                    }, null);
+
+                    if (
+                        column.filter &&
+                        column.filter.type &&
+                        column.filter.type === 'select'
+                    ) {
+                        filterEditor = SelectFilter;
+                        filterEditorProps = {
+                            placeholder: column.filter.placeholder
+                                ? column.filter.placeholder
+                                : 'All Options',
+                            dataSource: selectedDataSource,
+                        };
+                    } else {
+                        filterEditor = null;
+                        filterEditorProps = null;
+                    }
+
+                    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)) {
+                                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>;
+                                }
+                            }
+
+                            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 'toggle':
+                    return {
+                        ...commonProps,
+                        name: column.id,
+                        render: ({ data }) => {
+                            return (
+                                <Toggle
+                                    name={column.id}
+                                    checked={
+                                        data[column.id] === 1 ? true : false
+                                    }
+                                    onChange={() => {
+                                        CustomFetch(
+                                            `${column.url}/${data.id}`,
+                                            'POST',
+                                            {
+                                                [column.id]:
+                                                    data[column.id] === 1
+                                                        ? 0
+                                                        : 1,
+                                            },
+                                            (res) => {
+                                                if (res.error === '') {
+                                                    handleReload();
+                                                } else {
+                                                    toast.error(res.error);
+                                                }
+                                            }
+                                        );
+                                    }}
+                                />
+                            );
+                        },
+                    };
+                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:
+                    selectedDataSource = filterDataSource.reduce((acc, fds) => {
+                        if (fds.id === column.id) {
+                            return fds.dataset;
+                        }
+                        return acc;
+                    }, null);
+
+                    if (column.filter && column.filter.type) {
+                        switch (column.filter.type) {
+                            case 'select':
+                                filterEditor = SelectFilter;
+                                filterEditorProps = {
+                                    placeholder: column.filter.placeholder
+                                        ? column.filter.placeholder
+                                        : 'All Options',
+                                    dataSource: selectedDataSource,
+                                };
+                                break;
+                            default:
+                                filterEditor = null;
+                                filterEditorProps = null;
+                                break;
+                        }
+                    } else {
+                        filterEditor = null;
+                        filterEditorProps = null;
+                    }
+
+                    return {
+                        ...commonProps,
+                        name: column.id,
+                        filterEditor: filterEditor,
+                        filterEditorProps: filterEditorProps,
+                    };
+            }
+        };
+
+        const newColumns = columns.map(renderColumn);
+
+        if (settings.length > 0) {
+            newColumns.push({
+                name: 'setting',
+                header: 'Action',
+                defaultWidth: 100,
+                textAlign: 'center',
+                render: ({ data }) => {
+                    return (
+                        <div className="tdactions">
+                            {settings.map((setting) => (
+                                <span
+                                    key={`setting-${setting.id}`}
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleSettingClick(setting, data);
+                                    }}
+                                >
+                                    {renderSetting(setting, data)}
+                                </span>
+                            ))}
+                        </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
+                const filterName = Array.isArray(column.id)
+                    ? column.id.reduce((acc, id) => acc + `${id}.`, '') +
+                      column.nameFrom
+                    : column.id;
+
+                return {
+                    key: column.filter.key ? column.filter.key : null,
+                    name: filterName,
+                    operator: column.filter.operator,
+                    type: column.filter.type,
+                    value: column.filter.value ? column.filter.value : '',
+                };
+            });
+
+        setFilterValue(newFilterValue);
+    }, [columns, filterDataSource]);
+
+    useEffect(() => {
+        if (setFilterData) {
+            setFilterData(filterValue);
+        }
+    }, [filterValue]);
+
+    useEffect(() => {
+        columns.forEach((column) => {
+            if (column.filter && column.filter.url) {
+                CustomFetch(
+                    column.filter.url,
+                    'POST',
+                    column.filter.where ? { where: column.filter.where } : {},
+                    (res) => {
+                        const filterName = Array.isArray(column.id)
+                            ? column.id.reduce(
+                                  (acc, id) => acc + `${id}.`,
+                                  ''
+                              ) + column.nameFrom
+                            : column.id;
+
+                        const filterIndex = filterDataSource.findIndex(
+                            (filter) => filter.id === filterName
+                        );
+
+                        if (filterIndex >= 0) {
+                            const updatedFilter = {
+                                ...filterDataSource[filterIndex],
+                                dataset: res.data,
+                            };
+                            const updatedDataSource = [
+                                ...filterDataSource.slice(0, filterIndex),
+                                updatedFilter,
+                                ...filterDataSource.slice(filterIndex + 1),
+                            ];
+                            setFilterDataSource(updatedDataSource);
+                        } else {
+                            const newFilter = {
+                                id: filterName,
+                                dataset: res.data,
+                            };
+                            setFilterDataSource((prevState) => [
+                                ...prevState,
+                                newFilter,
+                            ]);
+                        }
+                    }
+                );
+            } else if (column.filter && column.filter.options) {
+                const filterName = Array.isArray(column.id)
+                    ? column.id.reduce((acc, id) => acc + `${id}.`, '') +
+                      column.nameFrom
+                    : column.id;
+
+                const newFilter = {
+                    id: filterName,
+                    dataset: column.filter.options,
+                };
+
+                setFilterDataSource((prevState) => [...prevState, newFilter]);
+            }
+        });
+    }, []);
+
+    // 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(() => {
+        setGridStyle((prevState) => ({
+            ...prevState,
+            minHeight:
+                gridHeight && gridHeight > 0
+                    ? gridHeight
+                    : dataCount > 5
+                    ? dataCount > 8
+                        ? windowHeight * 0.7 > 550
+                            ? windowHeight * 0.7
+                            : 550
+                        : 450
+                    : 400,
+        }));
+
+        let dgHeight =
+            gridHeight && gridHeight > 0
+                ? gridHeight
+                : dataCount > 5
+                ? dataCount > 8
+                    ? windowHeight * 0.7 > 550
+                        ? windowHeight * 0.7
+                        : 550
+                    : 450
+                : 400;
+
+        let rowCount = Math.floor((dgHeight - 100) / 40);
+        setLimit(rowCount);
+    }, [dataCount]);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowHeight(window.innerHeight);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        // Clean up the event listener
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
+    return (
+        <>
+            <div className="filterInput--alt">
+                <div className="icon-search">
+                    <Search strokeWidth={2} size={18} />
+                </div>
+                <input
+                    type="text"
+                    placeholder="Search"
+                    value={search}
+                    onChange={handleChangeSearch}
+                />
+            </div>
+            <div className="filterAction--alt">
+                {form.sort && form.sort.title && (
+                    <button className="btn" onClick={sortTrigger}>
+                        <div className="icon-plus"></div> Sort Order
+                    </button>
+                )}
+
+                {form.create && form.create.title && (
+                    <button
+                        className="btn"
+                        onClick={() => {
+                            let _url = form.url.replace('/ajax', '');
+
+                            navigate(_url + '/create', {
+                                state: {
+                                    form: formData,
+                                },
+                            });
+                        }}
+                    >
+                        <div className="icon-plus"></div> Create
+                    </button>
+                )}
+            </div>
+            <ReactDataGrid
+                columns={gridColumns}
+                dataSource={data}
+                filterValue={filterValue}
+                enableColumnAutosize={false}
+                enableColumnFilterContextMenu={false}
+                enableSelection={false}
+                headerProps={headerProps}
+                idProperty={`visns-datagrid-${ajaxSetting.url.replace(
+                    /\//g,
+                    '-'
+                )}`}
+                limit={limit}
+                minRowHeight={40}
+                onFilterValueChange={setFilterValue}
+                onLimitChange={setLimit}
+                onSortInfoChange={handleSort}
+                onRenderRow={onRenderRow}
+                pagination
+                renderColumnContextMenu={renderColumnContextMenu}
+                rowHeight={null}
+                showZebraRows={true}
+                sortInfo={
+                    ajaxSetting.sortBy && ajaxSetting.sort
+                        ? {
+                              name: ajaxSetting.sortBy,
+                              dir: ajaxSetting.sort === 'asc' ? 1 : -1,
+                          }
+                        : null
+                }
+                style={gridStyle}
+            />
+            <Popup
+                open={modalShow}
+                onClose={modalClose}
+                closeOnDocumentClick={false}
+            >
+                <Form
+                    closeModal={modalClose}
+                    fetchTable={handleReload}
+                    formSettings={formData}
+                    formType={formType}
+                    updateForm={setFormData}
+                    columnId={formId}
+                    childDropdownCallback={childDropdownCallback}
+                />
+            </Popup>
+        </>
+    );
+};
+
+export default DataGrid;