@visns-studio/visns-components 5.11.21 → 5.11.22

package/src/components/cms/DataGrid.jsx

@@ -1,1652 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-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 '@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 { toast } from 'react-toastify';
-import Toggle from 'react-toggle';
-import fetchUtil from '../../utils/fetchUtil';
-import { confirmDialog } from '../utils/ConfirmDialog';
-import {
-    Trash2 as Backspace,
-    Check,
-    Clock,
-    Download as CloudDownload,
-    Copy,
-    Edit,
-    Folder,
-    Inbox,
-    Network,
-    Award as Ribbon,
-    Search,
-    Package as ShippingBoxV1,
-    ToggleLeft as ToggleOff,
-    ToggleRight as ToggleOnFill,
-    AlertTriangle as TriangleAlert,
-} from 'lucide-react';
-
-import '@visns-studio/visns-datagrid-enterprise/index.css';
-import 'react-toggle/style.css';
-
-import CustomFetch from '../crm/Fetch';
-import Form from './Form';
-import { extractColumnsMetadata, isColumnSortable } from '../../utils/columnsMetadataUtils';
-
-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 fetchUtil.post(url, params);
-        const { data, total } = response.data;
-        
-        // Extract columns metadata if available
-        const metadata = extractColumnsMetadata(response);
-        
-        return { data, count: total, metadata };
-    } catch (error) {
-        console.error('Error fetching data:', error);
-        return { data: [], count: 0, metadata: {} };
-    }
-};
-
-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);
-                // Update metadata when data is loaded
-                if (res.metadata) {
-                    setColumnsMetadata(res.metadata);
-                }
-            });
-
-            return sqlResult.then(res => ({
-                data: res.data,
-                count: res.count
-            }));
-        },
-        [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('');
-    const [columnsMetadata, setColumnsMetadata] = 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':
-                confirmDialog({
-                    title: 'Delete Item',
-                    message: `Are you sure you want to delete ${
-                        d.name ? d.name : d.label ? d.label : 'this item'
-                    }?`,
-                    data: d, // Pass the row data
-                    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:
-                confirmDialog({
-                    title: s.title,
-                    message: '',
-                    data: d, // Pass the row data
-                    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) => {
-            // Safely get cell element and column index
-            const cellElement = event.target.closest(
-                '.InovuaReactDataGrid__cell'
-            );
-            
-            // Return early if we can't find the cell element
-            if (!cellElement || !cellElement.parentNode) {
-                // Fallback: open edit modal if available
-                const updateSetting = settings.find(setting => setting.id === 'update');
-                if (updateSetting && form.primaryKey && rowProps.data[form.primaryKey]) {
-                    modalOpen('update', rowProps.data[form.primaryKey]);
-                }
-                return;
-            }
-
-            const columnIndex = Array.from(
-                cellElement.parentNode.children
-            ).indexOf(cellElement);
-
-            // Return early if column index is invalid
-            if (columnIndex === -1 || !rowProps.columns[columnIndex]) {
-                // Fallback: open edit modal if available
-                const updateSetting = settings.find(setting => setting.id === 'update');
-                if (updateSetting && form.primaryKey && rowProps.data[form.primaryKey]) {
-                    modalOpen('update', rowProps.data[form.primaryKey]);
-                }
-                return;
-            }
-
-            let proceed = true;
-
-            // Check if clicked column is a toggle type
-            columns.forEach((a, b) => {
-                if (
-                    a.id === rowProps.columns[columnIndex].id &&
-                    a.type === 'toggle'
-                ) {
-                    proceed = false;
-                }
-            });
-
-            if (proceed) {
-                // Check if column has navigation link
-                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,
-                                },
-                            }
-                        );
-                    }
-                } else {
-                    // Fallback: open edit modal if no navigation link is configured
-                    const updateSetting = settings.find(setting => setting.id === 'update');
-                    if (updateSetting && form.primaryKey && rowProps.data[form.primaryKey]) {
-                        modalOpen('update', rowProps.data[form.primaryKey]);
-                    }
-                }
-            }
-        },
-        [form, settings, modalOpen]
-    );
-
-    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;
-
-            // Check if column is sortable based on metadata
-            const columnKey = column.id;
-            const sortable = isColumnSortable(columnKey, columnsMetadata);
-            
-            const commonProps = {
-                header: column.label,
-                defaultFlex: 1,
-                sortable: sortable,
-                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]
-                            ) {
-                                const jsonValue = data[column.id][column.jsonData];
-                                
-                                if (!jsonValue) return null;
-                                
-                                try {
-                                    const jsonData = typeof jsonValue === 'string' ? JSON.parse(jsonValue) : jsonValue;
-                                    
-                                    // Check if this looks like a question/answer format
-                                    const isQuestionAnswerFormat = Object.values(jsonData).every(item => 
-                                        item && typeof item === 'object' && 
-                                        (item.hasOwnProperty('question') || item.hasOwnProperty('answer'))
-                                    );
-                                    
-                                    if (isQuestionAnswerFormat) {
-                                        return (
-                                            <div style={{ fontSize: '0.8rem' }}>
-                                                {Object.entries(jsonData).map(([key, item]) => {
-                                                    if (!item || typeof item !== 'object') return null;
-                                                    
-                                                    const question = item.question || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-                                                    const answer = item.answer !== undefined ? 
-                                                        (typeof item.answer === 'boolean' ? (item.answer ? 'Yes' : 'No') : String(item.answer)) : 
-                                                        'N/A';
-                                                    
-                                                    return (
-                                                        <div key={key} style={{ marginBottom: '0.3rem' }}>
-                                                            <div style={{ fontWeight: '600', color: 'var(--primary-color)', marginBottom: '0.1rem', fontSize: '0.75rem' }}>
-                                                                {question.length > 60 ? question.substring(0, 60) + '...' : question}
-                                                            </div>
-                                                            <div style={{ marginLeft: '0.5rem', color: 'var(--paragraph-color)', fontSize: '0.75rem' }}>
-                                                                {answer}
-                                                            </div>
-                                                        </div>
-                                                    );
-                                                })}
-                                            </div>
-                                        );
-                                    }
-                                    
-                                    // Check if this is a simple key-value object
-                                    const isSimpleKeyValue = Object.values(jsonData).every(val => 
-                                        typeof val !== 'object' || val === null
-                                    );
-                                    
-                                    if (isSimpleKeyValue) {
-                                        return (
-                                            <div style={{ fontSize: '0.8rem' }}>
-                                                {Object.entries(jsonData).slice(0, 3).map(([key, val]) => (
-                                                    <div key={key} style={{ marginBottom: '0.2rem', display: 'flex', gap: '0.3rem' }}>
-                                                        <strong style={{ color: 'var(--primary-color)', fontSize: '0.7rem' }}>
-                                                            {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:
-                                                        </strong>
-                                                        <span style={{ color: 'var(--paragraph-color)', fontSize: '0.7rem' }}>
-                                                            {val !== null && val !== undefined ? 
-                                                            (typeof val === 'boolean' ? (val ? 'Yes' : 'No') : String(val).substring(0, 20)) : 
-                                                            'N/A'}
-                                                        </span>
-                                                    </div>
-                                                ))}
-                                                {Object.keys(jsonData).length > 3 && (
-                                                    <div style={{ fontSize: '0.65rem', color: 'var(--secondary-color)', fontStyle: 'italic' }}>
-                                                        +{Object.keys(jsonData).length - 3} more...
-                                                    </div>
-                                                )}
-                                            </div>
-                                        );
-                                    }
-                                    
-                                    // For complex nested objects, show a summary
-                                    const keyCount = Object.keys(jsonData).length;
-                                    return (
-                                        <div style={{ fontSize: '0.75rem', color: 'var(--paragraph-color)', fontStyle: 'italic' }}>
-                                            JSON ({keyCount} {keyCount === 1 ? 'property' : 'properties'})
-                                        </div>
-                                    );
-                                    
-                                } catch (error) {
-                                    // If parsing fails, show raw value truncated
-                                    const displayValue = typeof jsonValue === 'string' && jsonValue.length > 30 
-                                        ? jsonValue.substring(0, 30) + '...' 
-                                        : jsonValue;
-                                    return <span style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--paragraph-color)' }}>{displayValue}</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();
-
-                                        // Actions that should have confirmation dialogs
-                                        const actionsRequiringConfirmation = [
-                                            'complete',
-                                            'primary',
-                                            'ssa',
-                                        ];
-
-                                        // If this action requires confirmation and is not delete (which has its own confirmation)
-                                        if (
-                                            actionsRequiringConfirmation.includes(
-                                                setting.id
-                                            ) &&
-                                            setting.id !== 'delete'
-                                        ) {
-                                            // Get tooltip content for the message
-                                            const tooltipContent =
-                                                setting.active &&
-                                                data.hasOwnProperty(
-                                                    setting.active.id
-                                                ) &&
-                                                data[setting.active.id] ===
-                                                    setting.active.value
-                                                    ? setting.active.title
-                                                    : setting.title;
-
-                                            // Create a message based on the tooltip
-                                            let message = `Are you sure you want to ${tooltipContent.toLowerCase()}?`;
-
-                                            // Add item identifier if available
-                                            const itemName =
-                                                data.name ||
-                                                data.label ||
-                                                data.title ||
-                                                data.id;
-                                            if (itemName) {
-                                                message += ` Item: "${itemName}"`;
-                                            }
-
-                                            // Show confirmation dialog
-                                            confirmDialog({
-                                                title: tooltipContent,
-                                                message: message,
-                                                data: data,
-                                                buttons: [
-                                                    {
-                                                        label: 'Yes',
-                                                        onClick: () =>
-                                                            handleSettingClick(
-                                                                setting,
-                                                                data
-                                                            ),
-                                                    },
-                                                    {
-                                                        label: 'No',
-                                                        onClick: () => {},
-                                                    },
-                                                ],
-                                            });
-                                        } else {
-                                            // For actions that don't need confirmation or already have it (delete)
-                                            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, columnsMetadata]);
-
-    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;