@visns-studio/visns-components 1.7.1 → 1.7.2

package/components/crm/visns-data-grid.jsx

@@ -1,9 +1,9 @@
 import React, {
-	forwardRef,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useState,
+    forwardRef,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useState,
 } from "react";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
@@ -19,20 +19,20 @@ import ReactDataGrid from "@inovua/reactdatagrid-community";
 import { confirmAlert } from "react-confirm-alert";
 import { toast } from "react-toastify";
 import {
-	ArrowCounterClockwise,
-	Backspace,
-	Check,
-	Clock,
-	CloudDownload,
-	Copy,
-	Edit,
-	Folder,
-	Inbox,
-	Network,
-	Ribbon,
-	Search,
-	ShippingBoxV1,
-	TriangleAlert,
+    ArrowCounterClockwise,
+    Backspace,
+    Check,
+    Clock,
+    CloudDownload,
+    Copy,
+    Edit,
+    Folder,
+    Inbox,
+    Network,
+    Ribbon,
+    Search,
+    ShippingBoxV1,
+    TriangleAlert,
 } from "akar-icons";
 
 import "@inovua/reactdatagrid-community/index.css";
@@ -42,1726 +42,1726 @@ import CustomFetch from "./visns-fetch";
 import Form from "./visns-form";
 
 const loadData = async (
-	{ skip, limit, sortInfo, currentData, filterValue, groupBy },
-	search,
-	ajaxSetting
+    { 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 url = ajaxSetting.url;
+    const page = Math.floor(skip / limit) + 1;
+    const params = { page, sortInfo, take: limit, search: search, where: [] };
+
+    if (sortInfo) {
+        params.sortBy = sortInfo.name;
+        params.sort = sortInfo.dir === 1 ? "asc" : "desc";
+    }
+
+    if (ajaxSetting && ajaxSetting.where) {
+        params.where = ajaxSetting.where;
+    }
+
+    if (filterValue) {
+        filterValue.forEach((fv) => {
+            const identifier = fv.key ? fv.key : fv.name;
+            const existingIndex = params.where.findIndex(
+                (w) => w.id === identifier
+            );
+
+            if (fv.value !== null && fv.value !== "") {
+                if (existingIndex !== -1) {
+                    params.where[existingIndex].value = fv.value;
+                } else {
+                    params.where.push({
+                        id: identifier,
+                        value: fv.value,
+                        operator: fv.operator,
+                    });
+                }
+            } else {
+                if (existingIndex !== -1) {
+                    params.where.splice(existingIndex, 1);
+                }
+            }
+        });
+    }
+
+    try {
+        const response = await axios.post(url, params);
+        const { data, total } = response.data;
+        return { data, count: total };
+    } catch (error) {
+        console.error("Error fetching data:", error);
+        return { data: [], count: 0 };
+    }
 };
 
 const DataGrid = forwardRef(
-	(
-		{
-			ajaxSetting,
-			form,
-			columns,
-			settings,
-			setFilterData,
-			setTotal,
-			style,
-			tableFilters,
-			historySearch,
-			historyUrl,
-		},
-		ref
-	) => {
-		const navigate = useNavigate();
-
-		/** Modal States */
-		const [formData, setFormData] = useState({});
-		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);
-
-				if (setFilterData && params.filterValue) {
-					setFilterData([params.filterValue]);
-				}
-
-				sqlResult.then((res) => {
-					if (setTotal) {
-						setTotal(res.count);
-					}
-					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("");
-		const sortInfo =
-			ajaxSetting.sortBy && ajaxSetting.sort
-				? {
-						name: ajaxSetting.sortBy,
-						dir: ajaxSetting.sort === "asc" ? 1 : -1,
-				  }
-				: null;
-
-		/** Table Functions */
-		useImperativeHandle(ref, () => ({
-			reload: () => {
-				handleReload();
-			},
-		}));
-
-		const handleFilterChange = (d) => {
-			setFilterValue(d);
-		};
-
-		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(
-													<div>
-														{parse(result.error)}
-													</div>
-												);
-											}
-										}
-									),
-							},
-							{
-								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(
-													<div>
-														{parse(result.error)}
-													</div>
-												);
-											}
-										}
-									),
-							},
-							{
-								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 onRowClick = useCallback((rowProps, event) => {
-			const cellElement = event.target.closest(
-				".InovuaReactDataGrid__cell"
-			);
-			const columnIndex = Array.from(
-				cellElement.parentNode.children
-			).indexOf(cellElement);
-
-			if (columnIndex === rowProps.columns.length - 1) {
-			} else {
-				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
-								]
-							}`
-						);
-					}
-				} else if (rowProps.columns[columnIndex].link.popup) {
-					window.open(
-						`${rowProps.columns[columnIndex].link.popup}/${
-							rowProps.data[
-								rowProps.columns[columnIndex].link.key
-							]
-						}`,
-						"",
-						"width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
-					);
-				} else {
-					modalOpen("update", rowProps.data[form.primaryKey]);
-				}
-			}
-		}, []);
-
-		const onRenderRow = useCallback((rowProps) => {
-			// save the original handlers to be called later
-			const { onClick } = rowProps;
-
-			rowProps.onClick = (event) => {
-				onRowClick(rowProps, event);
-				if (onClick) {
-					onClick(event);
-				}
-			};
-		}, []);
-
-		const renderCreateButton = () => {
-			if (form.createDisable && form.createDisable === true) {
-				return null;
-			}
-
-			return (
-				<div className="filterAction--alt">
-					<button
-						className="btn"
-						onClick={() => {
-							if (form.create) {
-								modalOpen("create", 0);
-							} else {
-								if (form.url) {
-									window.open(
-										form.url,
-										"",
-										"width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
-									);
-								}
-							}
-						}}
-					>
-						<div className="icon-plus"></div> Create
-					</button>
-				</div>
-			);
-		};
-
-		const renderSearch = () => {
-			const searchEnable = !(
-				form.searchDisable && form.searchDisable === true
-			);
-
-			return searchEnable ? (
-				<div className="filterInput--alt">
-					<div className="icon-search">
-						<Search strokeWidth={2} size={18} />
-					</div>
-					<input
-						type="text"
-						placeholder="Search"
-						value={search}
-						onChange={handleChangeSearch}
-					/>
-				</div>
-			) : null;
-		};
-
-		const handleCoding = (c, data) => {
-			const icons = [];
-			const assetPath =
-				import.meta.env.REACT_APP_ASSET_PATH !== undefined
-					? import.meta.env.REACT_APP_ASSET_PATH
-					: "";
-
-			const addIcon = (src, icon, alt, tooltipContent, key) => {
-				if (src && src !== "") {
-					icons.push(
-						<img
-							src={`${assetPath}${src}`}
-							alt={alt}
-							data-tooltip-id="system-tooltip"
-							data-tooltip-content={tooltipContent}
-							key={key}
-						/>
-					);
-				} else {
-					let IconComponent = null;
-
-					if (icon === "archive") {
-						IconComponent = ShippingBoxV1;
-					} else if (icon === "folder") {
-						IconComponent = Folder;
-					} else if (icon === "inbox") {
-						IconComponent = Inbox;
-					} else if (icon === "network") {
-						IconComponent = Network;
-					} else if (icon === "urgent") {
-						IconComponent = TriangleAlert;
-					}
-
-					if (IconComponent) {
-						icons.push(
-							<IconComponent
-								data-tooltip-id="system-tooltip"
-								data-tooltip-content={tooltipContent}
-								strokeWidth={2}
-								size={18}
-								className="tdaction"
-								key={key}
-							/>
-						);
-					}
-				}
-			};
-
-			c.config.forEach((config, configKey) => {
-				const fieldValue = config.id.reduce((acc, id) => {
-					if (acc === "") {
-						return data[id];
-					} else {
-						return acc[id];
-					}
-				}, "");
-
-				const iconData = config.icons.find(
-					(icon) => icon.value === fieldValue
-				);
-
-				if (
-					iconData &&
-					(iconData.src || iconData.icon) &&
-					iconData.alt &&
-					iconData.tooltipContent
-				) {
-					addIcon(
-						iconData.src ? iconData.src : null,
-						iconData.icon ? iconData.icon : null,
-						iconData.alt,
-						iconData.tooltipContent,
-						`coding-${config.id[0]}-${configKey}`
-					);
-				}
-			});
-
-			return icons;
-		};
-
-		/** Table Hooks */
-		useEffect(() => {
-			const delayedSetDSearch = debounce(() => {
-				setDSearch(search);
-			}, 300); // Adjust the delay (in milliseconds) according to your needs
-
-			delayedSetDSearch();
-
-			return delayedSetDSearch.cancel; // Cleanup the debounce timer on unmount
-		}, [search, setDSearch]);
-
-		const renderSetting = (s, d) => {
-			let iconStyle = {};
-			let allow = true;
-
-			if (s.active) {
-				if (
-					d.hasOwnProperty(s.active.id) &&
-					d[s.active.id] === s.active.value
-				) {
-					iconStyle = {
-						color: s.active.colour,
-					};
-				} else if (
-					s.active.type === "greater" &&
-					d[s.active.id] > s.active.value
-				) {
-					iconStyle = {
-						color: s.active.colour,
-					};
-				} else if (
-					s.active.type === "not null" &&
-					d[s.active.id] !== null
-				) {
-					iconStyle = {
-						color: s.active.colour,
-					};
-				}
-			}
-
-			const handleIconClick = (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				handleSettingClick(s, d);
-			};
-
-			const tooltipContent =
-				iconStyle && iconStyle.color ? s.active.title : s.title;
-
-			if (s.hide && s.hide.id && s.hide.value >= 0) {
-				if (
-					d.hasOwnProperty(s.hide.id) &&
-					d[s.hide.id] === s.hide.value
-				) {
-					allow = false;
-				}
-			}
-
-			if (allow) {
-				switch (s.id) {
-					case "archive":
-						return getIconComponent(ShippingBoxV1);
-					case "complete":
-						return getIconComponent(Check);
-					case "copy":
-						return getIconComponent(Copy);
-					case "delete":
-						return getIconComponent(Backspace);
-					case "family":
-						return getIconComponent(Network);
-					case "primary":
-						return getIconComponent(Ribbon);
-					case "restore":
-						return getIconComponent(ArrowCounterClockwise);
-					case "ssa":
-						return getIconComponent(Clock);
-					case "update":
-						return getIconComponent(Edit);
-					default:
-						return null;
-				}
-			} else {
-				return null;
-			}
-
-			function getIconComponent(IconComponent) {
-				return (
-					<span key={`setting-${s.id}`} onClick={handleIconClick}>
-						<IconComponent
-							data-tooltip-id="system-tooltip"
-							data-tooltip-content={tooltipContent}
-							strokeWidth={2}
-							size={18}
-							className="tdaction"
-							style={iconStyle}
-						/>
-					</span>
-				);
-			}
-		};
-
-		const renderColumnContextMenu = useCallback(
-			(menuProps, { cellProps }) => {
-				const filteredItems = menuProps.items
-					.map((item, key) => {
-						if (key >= 6 && key <= 9) {
-							return null; // Skip items with keys 6-9 [lock columns setting]
-						}
-						return item;
-					})
-					.filter(Boolean); // Filter out any null items
-
-				menuProps.items = filteredItems;
-			},
-			[]
-		);
-
-		useEffect(() => {
-			const renderColumn = (column) => {
-				let childValue;
-				let date;
-				let filterEditor = null;
-				let filterEditorProps = null;
-				let fileUrl = null;
-				let icons = [];
-				let relationName;
-				let selectedDataSource = null;
-				let stage;
-				let 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 }) => {
-								value = "";
-
-								if (data.address1) {
-									value += `${data.address1} `;
-								}
-
-								if (data.address2) {
-									value += `${data.address2} `;
-								}
-
-								if (data.suburb) {
-									value += `${data.suburb} `;
-								}
-
-								if (data.postcode) {
-									value += `${data.postcode} `;
-								}
-
-								return <span>{value}</span>;
-							},
-						};
-					case "age":
-						if (column.filter && column.filter.type) {
-							switch (column.filter.type) {
-								case "number":
-									filterEditor = NumberFilter;
-									break;
-								default:
-									filterEditor = null;
-									break;
-							}
-						} else {
-							filterEditor = null;
-						}
-
-						return {
-							...commonProps,
-							type: "number",
-							filterEditor: filterEditor,
-							name: `${column.type}.${column.id}`,
-							render: ({ data }) => {
-								value = column.id.reduce((acc, id) => {
-									if (acc === "") {
-										return data[id];
-									} else {
-										return acc[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: `${column.type}.${column.id}`,
-							sortable: false,
-							render: ({ data }) => {
-								if (data) {
-									return handleCoding(column, data);
-								} else {
-									return null;
-								}
-							},
-						};
-					case "colour":
-						return {
-							...commonProps,
-							name: `${column.type}.${column.id}`,
-							sortable: false,
-							render: ({ data }) => {
-								if (data && data[column.id]) {
-									return (
-										<div
-											style={{
-												width: "25px",
-												height: "25px",
-												borderRadius: "10px",
-												overflow: "hidden",
-											}}
-										>
-											<div
-												style={{
-													background:
-														data[column.id] +
-														" none repeat scroll 0% 0%",
-													height: "100%",
-													width: "100%",
-													cursor: "pointer",
-													position: "relative",
-													outline:
-														"currentcolor none medium",
-												}}
-											></div>
-										</div>
-									);
-								} else {
-									return null;
-								}
-							},
-						};
-					case "created_by":
-						return {
-							...commonProps,
-							name: `${column.type}.${column.id}`,
-							sortable: false,
-							render: ({ data }) => {
-								if (
-									data.audits[0] &&
-									data.audits[0].user &&
-									data.audits[0].user.name
-								) {
-									value = data.audits[0].user.name;
-
-									return <span>{value}</span>;
-								} else {
-									return null;
-								}
-							},
-						};
-					case "currency":
-						return {
-							...commonProps,
-							name: column.id,
-							render: ({ data }) => {
-								if (data) {
-									data = numeral(data[column.id]).format(
-										"$0,0.00"
-									);
-
-									return <span>{data}</span>;
-								} else {
-									return null;
-								}
-							},
-						};
-					case "date":
-						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 "daterange":
-						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[0]}.${column.id[1]}.`,
-							filterEditor: filterEditor,
-							filterEditorProps: filterEditorProps,
-							render: ({ data }) => {
-								if (
-									data &&
-									data[column.id[0]] &&
-									moment(data[column.id[0]]).isValid() &&
-									moment(data[column.id[0]]).format(
-										"YYYY-MM-DD"
-									) !== "1970-01-01"
-								) {
-									value = moment(data[column.id[0]]).format(
-										column.format || "DD-MM-YYYY"
-									);
-								}
-
-								if (
-									data &&
-									data[column.id[1]] &&
-									moment(data[column.id[1]]).isValid() &&
-									moment(data[column.id[1]]).format(
-										"YYYY-MM-DD"
-									) !== "1970-01-01"
-								) {
-									value += ` - ${moment(
-										data[column.id[1]]
-									).format(column.format || "DD-MM-YYYY")}`;
-								}
-
-								return <span>{value}</span>;
-							},
-						};
-					case "datetime":
-						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,
-							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 = {
-								multiple:
-									column.filter.operator === "inlist"
-										? true
-										: false,
-								wrapMultiple:
-									column.filter.operator === "inlist"
-										? false
-										: true,
-								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 = {
-								multiple:
-									column.filter.operator === "inlist"
-										? true
-										: false,
-								wrapMultiple:
-									column.filter.operator === "inlist"
-										? false
-										: true,
-								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) &&
-									relationValue.length > 0
-								) {
-									const nameProperties = Array.isArray(
-										column.nameFrom
-									)
-										? column.nameFrom
-										: [column.nameFrom];
-
-									const values = relationValue
-										.map((rv) => {
-											if (
-												column.childId &&
-												Array.isArray(column.childId)
-											) {
-												childValue = rv;
-
-												column.childId.forEach((a) => {
-													if (childValue[a]) {
-														childValue =
-															childValue[a];
-													}
-												});
-
-												if (childValue) {
-													const propertyValues =
-														nameProperties
-															.map(
-																(prop) =>
-																	childValue[
-																		prop
-																	]
-															)
-															.filter(
-																(value) =>
-																	value !==
-																		undefined &&
-																	value !==
-																		null
-															);
-													return propertyValues.join(
-														" "
-													);
-												}
-											} else {
-												const propertyValues =
-													nameProperties
-														.map((prop) => rv[prop])
-														.filter(
-															(value) =>
-																value !==
-																	undefined &&
-																value !== null
-														);
-												return propertyValues.join(" ");
-											}
-										})
-										.filter((value) => value !== "");
-
-									// if (values.length > 0) {
-									let result = "";
-
-									if (
-										column.relation?.id &&
-										column.relation?.key
-									) {
-										const relationValue =
-											column.relation.key.reduce(
-												(acc, id) =>
-													acc === ""
-														? data[id]
-														: acc && acc[id]
-														? acc[id]
-														: "",
-												""
-											);
-
-										result = `${
-											relationValue[column.relation.id]
-										}<br />`;
-									}
-
-									if (
-										column.where &&
-										column.where.id &&
-										column.where.value
-									) {
-										if (
-											data[column.where.id] ===
-											column.where.value
-										) {
-											result += values.join("<br />");
-										}
-									} else {
-										result += values.join("<br />");
-									}
-
-									return <span>{parse(result)}</span>;
-									// }
-								} else {
-									let result = "";
-
-									if (
-										column.relation?.id &&
-										column.relation?.key
-									) {
-										const relationValue =
-											column.relation.key.reduce(
-												(acc, id) =>
-													acc === ""
-														? data[id]
-														: acc && acc[id]
-														? acc[id]
-														: "",
-												""
-											);
-
-										result =
-											relationValue &&
-											relationValue[column.relation.id]
-												? relationValue[
-														column.relation.id
-												  ]
-												: "";
-									}
-
-									return <span>{parse(result)}</span>;
-								}
-
-								return null;
-							},
-						};
-					case "richtext":
-						return {
-							...commonProps,
-							name: column.id,
-							render: ({ data }) => {
-								if (data && data[column.id]) {
-									return (
-										<span>{parse(data[column.id])}</span>
-									);
-								} else {
-									return null;
-								}
-							},
-						};
-					case "stage":
-						return {
-							...commonProps,
-							name: column.id,
-							sortable: false,
-							render: ({ data }) => {
-								stage = "";
-
-								column.keyIds.forEach((a, b) => {
-									if (data[a] === 1) {
-										stage = column.valueIds[b];
-									}
-								});
-
-								return <span>{stage}</span>;
-							},
-						};
-					case "time":
-						return {
-							...commonProps,
-							name: column.id,
-							render: ({ data }) => {
-								if (
-									data &&
-									data[column.id] &&
-									moment(data[column.id]).isValid() &&
-									moment(data[column.id]).format(
-										"YYYY-MM-DD"
-									) !== "1970-01-01"
-								) {
-									data = moment(data[column.id]).format(
-										column.format
-											? column.format
-											: "hh:mm A"
-									);
-
-									return <span>{data}</span>;
-								} else {
-									return null;
-								}
-							},
-						};
-					case "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 = {
-										multiple:
-											column.filter.operator === "inlist"
-												? true
-												: false,
-										wrapMultiple:
-											column.filter.operator === "inlist"
-												? false
-												: true,
-										placeholder: column.filter.placeholder
-											? column.filter.placeholder
-											: "All Options",
-										dataSource: selectedDataSource,
-									};
-									break;
-								case "date":
-									filterEditor = DateFilter;
-									filterEditorProps = (props, { index }) => {
-										return {
-											dateFormat: "DD-MM-YYYY",
-											placeholder: "All Dates",
-										};
-									};
-								case "number":
-									filterEditor = NumberFilter;
-									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) =>
-									renderSetting(setting, data)
-								)}
-							</div>
-						);
-					},
-				});
-			}
-
-			setGridColumns(newColumns);
-
-			const newFilterValue = columns
-				.filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
-				.map((column) => {
-					// Map these filtered columns to a new object array
-					let filterName = "";
-					if (Array.isArray(column.id)) {
-						filterName = column.id.reduce(
-							(acc, id) => acc + `${id}.`,
-							""
-						);
-					} else {
-						filterName = column.id;
-					}
-
-					if (column.nameFrom) {
-						filterName += column.nameFrom;
-					}
-
-					return {
-						key: column.filter.key ? column.filter.key : null,
-						name: filterName,
-						operator: column.filter.operator,
-						type: column.filter.type,
-						value: column.filter.value ? column.filter.value : "",
-					};
-				});
-
-			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) => {
-							let filterName;
-
-							if (Array.isArray(column.id)) {
-								const concatenatedIds = column.id.reduce(
-									(acc, id) => acc + `${id}.`,
-									""
-								);
-
-								filterName = column.nameFrom
-									? concatenatedIds + column.nameFrom
-									: concatenatedIds;
-							} else {
-								filterName = column.nameFrom
-									? column.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) {
-					let filterName = Array.isArray(column.id)
-						? column.id.reduce((acc, id) => acc + `${id}.`, "")
-						: column.id;
-
-					if (column.nameFrom) {
-						filterName += column.nameFrom;
-					}
-
-					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:
-				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:
-					dataCount > 5
-						? dataCount > 8
-							? windowHeight * 0.7 > 550
-								? windowHeight * 0.7
-								: 550
-							: 450
-						: 400,
-			}));
-
-			let dgHeight =
-				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 (
-			<>
-				{renderSearch()}
-				{renderCreateButton()}
-				<ReactDataGrid
-					columns={gridColumns}
-					dataSource={data}
-					filterValue={filterValue}
-					limit={limit}
-					defaultSortInfo={sortInfo}
-					enableColumnAutosize={false}
-					enableColumnFilterContextMenu={false}
-					enableSelection={false}
-					headerProps={headerProps}
-					idProperty={`visns-datagrid-${ajaxSetting.url.replace(
-						/\//g,
-						"-"
-					)}`}
-					minRowHeight={40}
-					onFilterValueChange={setFilterValue}
-					onLimitChange={setLimit}
-					onRenderRow={onRenderRow}
-					pagination
-					renderColumnContextMenu={renderColumnContextMenu}
-					rowHeight={null}
-					showZebraRows={true}
-					style={gridStyle}
-				/>
-				<Popup
-					open={modalShow}
-					onClose={modalClose}
-					closeOnDocumentClick={false}
-				>
-					<Form
-						closeModal={modalClose}
-						fetchTable={handleReload}
-						formSettings={formData}
-						formType={formType}
-						updateForm={setFormData}
-						columnId={formId}
-						childDropdownCallback={childDropdownCallback}
-						style={style}
-					/>
-				</Popup>
-			</>
-		);
-	}
+    (
+        {
+            ajaxSetting,
+            form,
+            columns,
+            settings,
+            setFilterData,
+            setTotal,
+            style,
+            tableFilters,
+            historySearch,
+            historyUrl,
+        },
+        ref
+    ) => {
+        const navigate = useNavigate();
+
+        /** Modal States */
+        const [formData, setFormData] = useState({});
+        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);
+
+                if (setFilterData && params.filterValue) {
+                    setFilterData([params.filterValue]);
+                }
+
+                sqlResult.then((res) => {
+                    if (setTotal) {
+                        setTotal(res.count);
+                    }
+                    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("");
+        const sortInfo =
+            ajaxSetting.sortBy && ajaxSetting.sort
+                ? {
+                      name: ajaxSetting.sortBy,
+                      dir: ajaxSetting.sort === "asc" ? 1 : -1,
+                  }
+                : null;
+
+        /** Table Functions */
+        useImperativeHandle(ref, () => ({
+            reload: () => {
+                handleReload();
+            },
+        }));
+
+        const handleFilterChange = (d) => {
+            setFilterValue(d);
+        };
+
+        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(
+                                                    <div>
+                                                        {parse(result.error)}
+                                                    </div>
+                                                );
+                                            }
+                                        }
+                                    ),
+                            },
+                            {
+                                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(
+                                                    <div>
+                                                        {parse(result.error)}
+                                                    </div>
+                                                );
+                                            }
+                                        }
+                                    ),
+                            },
+                            {
+                                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 onRowClick = useCallback((rowProps, event) => {
+            const cellElement = event.target.closest(
+                ".InovuaReactDataGrid__cell"
+            );
+            const columnIndex = Array.from(
+                cellElement.parentNode.children
+            ).indexOf(cellElement);
+
+            if (columnIndex === rowProps.columns.length - 1) {
+            } else {
+                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
+                                ]
+                            }`
+                        );
+                    }
+                } else if (rowProps.columns[columnIndex].link.popup) {
+                    window.open(
+                        `${rowProps.columns[columnIndex].link.popup}/${
+                            rowProps.data[
+                                rowProps.columns[columnIndex].link.key
+                            ]
+                        }`,
+                        "",
+                        "width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
+                    );
+                } else {
+                    modalOpen("update", rowProps.data[form.primaryKey]);
+                }
+            }
+        }, []);
+
+        const onRenderRow = useCallback((rowProps) => {
+            // save the original handlers to be called later
+            const { onClick } = rowProps;
+
+            rowProps.onClick = (event) => {
+                onRowClick(rowProps, event);
+                if (onClick) {
+                    onClick(event);
+                }
+            };
+        }, []);
+
+        const renderCreateButton = () => {
+            if (form.createDisable && form.createDisable === true) {
+                return null;
+            }
+
+            return (
+                <div className="filterAction--alt">
+                    <button
+                        className="btn"
+                        onClick={() => {
+                            if (form.create) {
+                                modalOpen("create", 0);
+                            } else {
+                                if (form.url) {
+                                    window.open(
+                                        form.url,
+                                        "",
+                                        "width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
+                                    );
+                                }
+                            }
+                        }}
+                    >
+                        <div className="icon-plus"></div> Create
+                    </button>
+                </div>
+            );
+        };
+
+        const renderSearch = () => {
+            const searchEnable = !(
+                form.searchDisable && form.searchDisable === true
+            );
+
+            return searchEnable ? (
+                <div className="filterInput--alt">
+                    <div className="icon-search">
+                        <Search strokeWidth={2} size={18} />
+                    </div>
+                    <input
+                        type="text"
+                        placeholder="Search"
+                        value={search}
+                        onChange={handleChangeSearch}
+                    />
+                </div>
+            ) : null;
+        };
+
+        const handleCoding = (c, data) => {
+            const icons = [];
+            const assetPath =
+                import.meta.env.REACT_APP_ASSET_PATH !== undefined
+                    ? import.meta.env.REACT_APP_ASSET_PATH
+                    : "";
+
+            const addIcon = (src, icon, alt, tooltipContent, key) => {
+                if (src && src !== "") {
+                    icons.push(
+                        <img
+                            src={`${assetPath}${src}`}
+                            alt={alt}
+                            data-tooltip-id="system-tooltip"
+                            data-tooltip-content={tooltipContent}
+                            key={key}
+                        />
+                    );
+                } else {
+                    let IconComponent = null;
+
+                    if (icon === "archive") {
+                        IconComponent = ShippingBoxV1;
+                    } else if (icon === "folder") {
+                        IconComponent = Folder;
+                    } else if (icon === "inbox") {
+                        IconComponent = Inbox;
+                    } else if (icon === "network") {
+                        IconComponent = Network;
+                    } else if (icon === "urgent") {
+                        IconComponent = TriangleAlert;
+                    }
+
+                    if (IconComponent) {
+                        icons.push(
+                            <IconComponent
+                                data-tooltip-id="system-tooltip"
+                                data-tooltip-content={tooltipContent}
+                                strokeWidth={2}
+                                size={18}
+                                className="tdaction"
+                                key={key}
+                            />
+                        );
+                    }
+                }
+            };
+
+            c.config.forEach((config, configKey) => {
+                const fieldValue = config.id.reduce((acc, id) => {
+                    if (acc === "") {
+                        return data[id];
+                    } else {
+                        return acc[id];
+                    }
+                }, "");
+
+                const iconData = config.icons.find(
+                    (icon) => icon.value === fieldValue
+                );
+
+                if (
+                    iconData &&
+                    (iconData.src || iconData.icon) &&
+                    iconData.alt &&
+                    iconData.tooltipContent
+                ) {
+                    addIcon(
+                        iconData.src ? iconData.src : null,
+                        iconData.icon ? iconData.icon : null,
+                        iconData.alt,
+                        iconData.tooltipContent,
+                        `coding-${config.id[0]}-${configKey}`
+                    );
+                }
+            });
+
+            return icons;
+        };
+
+        /** Table Hooks */
+        useEffect(() => {
+            const delayedSetDSearch = debounce(() => {
+                setDSearch(search);
+            }, 300); // Adjust the delay (in milliseconds) according to your needs
+
+            delayedSetDSearch();
+
+            return delayedSetDSearch.cancel; // Cleanup the debounce timer on unmount
+        }, [search, setDSearch]);
+
+        const renderSetting = (s, d) => {
+            let iconStyle = {};
+            let allow = true;
+
+            if (s.active) {
+                if (
+                    d.hasOwnProperty(s.active.id) &&
+                    d[s.active.id] === s.active.value
+                ) {
+                    iconStyle = {
+                        color: s.active.colour,
+                    };
+                } else if (
+                    s.active.type === "greater" &&
+                    d[s.active.id] > s.active.value
+                ) {
+                    iconStyle = {
+                        color: s.active.colour,
+                    };
+                } else if (
+                    s.active.type === "not null" &&
+                    d[s.active.id] !== null
+                ) {
+                    iconStyle = {
+                        color: s.active.colour,
+                    };
+                }
+            }
+
+            const handleIconClick = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleSettingClick(s, d);
+            };
+
+            const tooltipContent =
+                iconStyle && iconStyle.color ? s.active.title : s.title;
+
+            if (s.hide && s.hide.id && s.hide.value >= 0) {
+                if (
+                    d.hasOwnProperty(s.hide.id) &&
+                    d[s.hide.id] === s.hide.value
+                ) {
+                    allow = false;
+                }
+            }
+
+            if (allow) {
+                switch (s.id) {
+                    case "archive":
+                        return getIconComponent(ShippingBoxV1);
+                    case "complete":
+                        return getIconComponent(Check);
+                    case "copy":
+                        return getIconComponent(Copy);
+                    case "delete":
+                        return getIconComponent(Backspace);
+                    case "family":
+                        return getIconComponent(Network);
+                    case "primary":
+                        return getIconComponent(Ribbon);
+                    case "restore":
+                        return getIconComponent(ArrowCounterClockwise);
+                    case "ssa":
+                        return getIconComponent(Clock);
+                    case "update":
+                        return getIconComponent(Edit);
+                    default:
+                        return null;
+                }
+            } else {
+                return null;
+            }
+
+            function getIconComponent(IconComponent) {
+                return (
+                    <span key={`setting-${s.id}`} onClick={handleIconClick}>
+                        <IconComponent
+                            data-tooltip-id="system-tooltip"
+                            data-tooltip-content={tooltipContent}
+                            strokeWidth={2}
+                            size={18}
+                            className="tdaction"
+                            style={iconStyle}
+                        />
+                    </span>
+                );
+            }
+        };
+
+        const renderColumnContextMenu = useCallback(
+            (menuProps, { cellProps }) => {
+                const filteredItems = menuProps.items
+                    .map((item, key) => {
+                        if (key >= 6 && key <= 9) {
+                            return null; // Skip items with keys 6-9 [lock columns setting]
+                        }
+                        return item;
+                    })
+                    .filter(Boolean); // Filter out any null items
+
+                menuProps.items = filteredItems;
+            },
+            []
+        );
+
+        useEffect(() => {
+            const renderColumn = (column) => {
+                let childValue;
+                let date;
+                let filterEditor = null;
+                let filterEditorProps = null;
+                let fileUrl = null;
+                let icons = [];
+                let relationName;
+                let selectedDataSource = null;
+                let stage;
+                let 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 }) => {
+                                value = "";
+
+                                if (data.address1) {
+                                    value += `${data.address1} `;
+                                }
+
+                                if (data.address2) {
+                                    value += `${data.address2} `;
+                                }
+
+                                if (data.suburb) {
+                                    value += `${data.suburb} `;
+                                }
+
+                                if (data.postcode) {
+                                    value += `${data.postcode} `;
+                                }
+
+                                return <span>{value}</span>;
+                            },
+                        };
+                    case "age":
+                        if (column.filter && column.filter.type) {
+                            switch (column.filter.type) {
+                                case "number":
+                                    filterEditor = NumberFilter;
+                                    break;
+                                default:
+                                    filterEditor = null;
+                                    break;
+                            }
+                        } else {
+                            filterEditor = null;
+                        }
+
+                        return {
+                            ...commonProps,
+                            type: "number",
+                            filterEditor: filterEditor,
+                            name: `${column.type}.${column.id}`,
+                            render: ({ data }) => {
+                                value = column.id.reduce((acc, id) => {
+                                    if (acc === "") {
+                                        return data[id];
+                                    } else {
+                                        return acc[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: `${column.type}.${column.id}`,
+                            sortable: false,
+                            render: ({ data }) => {
+                                if (data) {
+                                    return handleCoding(column, data);
+                                } else {
+                                    return null;
+                                }
+                            },
+                        };
+                    case "colour":
+                        return {
+                            ...commonProps,
+                            name: `${column.type}.${column.id}`,
+                            sortable: false,
+                            render: ({ data }) => {
+                                if (data && data[column.id]) {
+                                    return (
+                                        <div
+                                            style={{
+                                                width: "25px",
+                                                height: "25px",
+                                                borderRadius: "10px",
+                                                overflow: "hidden",
+                                            }}
+                                        >
+                                            <div
+                                                style={{
+                                                    background:
+                                                        data[column.id] +
+                                                        " none repeat scroll 0% 0%",
+                                                    height: "100%",
+                                                    width: "100%",
+                                                    cursor: "pointer",
+                                                    position: "relative",
+                                                    outline:
+                                                        "currentcolor none medium",
+                                                }}
+                                            ></div>
+                                        </div>
+                                    );
+                                } else {
+                                    return null;
+                                }
+                            },
+                        };
+                    case "created_by":
+                        return {
+                            ...commonProps,
+                            name: `${column.type}.${column.id}`,
+                            sortable: false,
+                            render: ({ data }) => {
+                                if (
+                                    data.audits[0] &&
+                                    data.audits[0].user &&
+                                    data.audits[0].user.name
+                                ) {
+                                    value = data.audits[0].user.name;
+
+                                    return <span>{value}</span>;
+                                } else {
+                                    return null;
+                                }
+                            },
+                        };
+                    case "currency":
+                        return {
+                            ...commonProps,
+                            name: column.id,
+                            render: ({ data }) => {
+                                if (data) {
+                                    data = numeral(data[column.id]).format(
+                                        "$0,0.00"
+                                    );
+
+                                    return <span>{data}</span>;
+                                } else {
+                                    return null;
+                                }
+                            },
+                        };
+                    case "date":
+                        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 "daterange":
+                        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[0]}.${column.id[1]}.`,
+                            filterEditor: filterEditor,
+                            filterEditorProps: filterEditorProps,
+                            render: ({ data }) => {
+                                if (
+                                    data &&
+                                    data[column.id[0]] &&
+                                    moment(data[column.id[0]]).isValid() &&
+                                    moment(data[column.id[0]]).format(
+                                        "YYYY-MM-DD"
+                                    ) !== "1970-01-01"
+                                ) {
+                                    value = moment(data[column.id[0]]).format(
+                                        column.format || "DD-MM-YYYY"
+                                    );
+                                }
+
+                                if (
+                                    data &&
+                                    data[column.id[1]] &&
+                                    moment(data[column.id[1]]).isValid() &&
+                                    moment(data[column.id[1]]).format(
+                                        "YYYY-MM-DD"
+                                    ) !== "1970-01-01"
+                                ) {
+                                    value += ` - ${moment(
+                                        data[column.id[1]]
+                                    ).format(column.format || "DD-MM-YYYY")}`;
+                                }
+
+                                return <span>{value}</span>;
+                            },
+                        };
+                    case "datetime":
+                        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,
+                            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 = {
+                                multiple:
+                                    column.filter.operator === "inlist"
+                                        ? true
+                                        : false,
+                                wrapMultiple:
+                                    column.filter.operator === "inlist"
+                                        ? false
+                                        : true,
+                                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 = {
+                                multiple:
+                                    column.filter.operator === "inlist"
+                                        ? true
+                                        : false,
+                                wrapMultiple:
+                                    column.filter.operator === "inlist"
+                                        ? false
+                                        : true,
+                                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) &&
+                                    relationValue.length > 0
+                                ) {
+                                    const nameProperties = Array.isArray(
+                                        column.nameFrom
+                                    )
+                                        ? column.nameFrom
+                                        : [column.nameFrom];
+
+                                    const values = relationValue
+                                        .map((rv) => {
+                                            if (
+                                                column.childId &&
+                                                Array.isArray(column.childId)
+                                            ) {
+                                                childValue = rv;
+
+                                                column.childId.forEach((a) => {
+                                                    if (childValue[a]) {
+                                                        childValue =
+                                                            childValue[a];
+                                                    }
+                                                });
+
+                                                if (childValue) {
+                                                    const propertyValues =
+                                                        nameProperties
+                                                            .map(
+                                                                (prop) =>
+                                                                    childValue[
+                                                                        prop
+                                                                    ]
+                                                            )
+                                                            .filter(
+                                                                (value) =>
+                                                                    value !==
+                                                                        undefined &&
+                                                                    value !==
+                                                                        null
+                                                            );
+                                                    return propertyValues.join(
+                                                        " "
+                                                    );
+                                                }
+                                            } else {
+                                                const propertyValues =
+                                                    nameProperties
+                                                        .map((prop) => rv[prop])
+                                                        .filter(
+                                                            (value) =>
+                                                                value !==
+                                                                    undefined &&
+                                                                value !== null
+                                                        );
+                                                return propertyValues.join(" ");
+                                            }
+                                        })
+                                        .filter((value) => value !== "");
+
+                                    // if (values.length > 0) {
+                                    let result = "";
+
+                                    if (
+                                        column.relation?.id &&
+                                        column.relation?.key
+                                    ) {
+                                        const relationValue =
+                                            column.relation.key.reduce(
+                                                (acc, id) =>
+                                                    acc === ""
+                                                        ? data[id]
+                                                        : acc && acc[id]
+                                                        ? acc[id]
+                                                        : "",
+                                                ""
+                                            );
+
+                                        result = `${
+                                            relationValue[column.relation.id]
+                                        }<br />`;
+                                    }
+
+                                    if (
+                                        column.where &&
+                                        column.where.id &&
+                                        column.where.value
+                                    ) {
+                                        if (
+                                            data[column.where.id] ===
+                                            column.where.value
+                                        ) {
+                                            result += values.join("<br />");
+                                        }
+                                    } else {
+                                        result += values.join("<br />");
+                                    }
+
+                                    return <span>{parse(result)}</span>;
+                                    // }
+                                } else {
+                                    let result = "";
+
+                                    if (
+                                        column.relation?.id &&
+                                        column.relation?.key
+                                    ) {
+                                        const relationValue =
+                                            column.relation.key.reduce(
+                                                (acc, id) =>
+                                                    acc === ""
+                                                        ? data[id]
+                                                        : acc && acc[id]
+                                                        ? acc[id]
+                                                        : "",
+                                                ""
+                                            );
+
+                                        result =
+                                            relationValue &&
+                                            relationValue[column.relation.id]
+                                                ? relationValue[
+                                                      column.relation.id
+                                                  ]
+                                                : "";
+                                    }
+
+                                    return <span>{parse(result)}</span>;
+                                }
+
+                                return null;
+                            },
+                        };
+                    case "richtext":
+                        return {
+                            ...commonProps,
+                            name: column.id,
+                            render: ({ data }) => {
+                                if (data && data[column.id]) {
+                                    return (
+                                        <span>{parse(data[column.id])}</span>
+                                    );
+                                } else {
+                                    return null;
+                                }
+                            },
+                        };
+                    case "stage":
+                        return {
+                            ...commonProps,
+                            name: column.id,
+                            sortable: false,
+                            render: ({ data }) => {
+                                stage = "";
+
+                                column.keyIds.forEach((a, b) => {
+                                    if (data[a] === 1) {
+                                        stage = column.valueIds[b];
+                                    }
+                                });
+
+                                return <span>{stage}</span>;
+                            },
+                        };
+                    case "time":
+                        return {
+                            ...commonProps,
+                            name: column.id,
+                            render: ({ data }) => {
+                                if (
+                                    data &&
+                                    data[column.id] &&
+                                    moment(data[column.id]).isValid() &&
+                                    moment(data[column.id]).format(
+                                        "YYYY-MM-DD"
+                                    ) !== "1970-01-01"
+                                ) {
+                                    data = moment(data[column.id]).format(
+                                        column.format
+                                            ? column.format
+                                            : "hh:mm A"
+                                    );
+
+                                    return <span>{data}</span>;
+                                } else {
+                                    return null;
+                                }
+                            },
+                        };
+                    case "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 = {
+                                        multiple:
+                                            column.filter.operator === "inlist"
+                                                ? true
+                                                : false,
+                                        wrapMultiple:
+                                            column.filter.operator === "inlist"
+                                                ? false
+                                                : true,
+                                        placeholder: column.filter.placeholder
+                                            ? column.filter.placeholder
+                                            : "All Options",
+                                        dataSource: selectedDataSource,
+                                    };
+                                    break;
+                                case "date":
+                                    filterEditor = DateFilter;
+                                    filterEditorProps = (props, { index }) => {
+                                        return {
+                                            dateFormat: "DD-MM-YYYY",
+                                            placeholder: "All Dates",
+                                        };
+                                    };
+                                case "number":
+                                    filterEditor = NumberFilter;
+                                    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) =>
+                                    renderSetting(setting, data)
+                                )}
+                            </div>
+                        );
+                    },
+                });
+            }
+
+            setGridColumns(newColumns);
+
+            const newFilterValue = columns
+                .filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
+                .map((column) => {
+                    // Map these filtered columns to a new object array
+                    let filterName = "";
+                    if (Array.isArray(column.id)) {
+                        filterName = column.id.reduce(
+                            (acc, id) => acc + `${id}.`,
+                            ""
+                        );
+                    } else {
+                        filterName = column.id;
+                    }
+
+                    if (column.nameFrom) {
+                        filterName += column.nameFrom;
+                    }
+
+                    return {
+                        key: column.filter.key ? column.filter.key : null,
+                        name: filterName,
+                        operator: column.filter.operator,
+                        type: column.filter.type,
+                        value: column.filter.value ? column.filter.value : "",
+                    };
+                });
+
+            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) => {
+                            let filterName;
+
+                            if (Array.isArray(column.id)) {
+                                const concatenatedIds = column.id.reduce(
+                                    (acc, id) => acc + `${id}.`,
+                                    ""
+                                );
+
+                                filterName = column.nameFrom
+                                    ? concatenatedIds + column.nameFrom
+                                    : concatenatedIds;
+                            } else {
+                                filterName = column.nameFrom
+                                    ? column.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) {
+                    let filterName = Array.isArray(column.id)
+                        ? column.id.reduce((acc, id) => acc + `${id}.`, "")
+                        : column.id;
+
+                    if (column.nameFrom) {
+                        filterName += column.nameFrom;
+                    }
+
+                    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:
+                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:
+                    dataCount > 5
+                        ? dataCount > 8
+                            ? windowHeight * 0.7 > 550
+                                ? windowHeight * 0.7
+                                : 550
+                            : 450
+                        : 400,
+            }));
+
+            let dgHeight =
+                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 (
+            <>
+                {renderSearch()}
+                {renderCreateButton()}
+                <ReactDataGrid
+                    columns={gridColumns}
+                    dataSource={data}
+                    filterValue={filterValue}
+                    limit={limit}
+                    defaultSortInfo={sortInfo}
+                    enableColumnAutosize={false}
+                    enableColumnFilterContextMenu={false}
+                    enableSelection={false}
+                    headerProps={headerProps}
+                    idProperty={`visns-datagrid-${ajaxSetting.url.replace(
+                        /\//g,
+                        "-"
+                    )}`}
+                    minRowHeight={40}
+                    onFilterValueChange={setFilterValue}
+                    onLimitChange={setLimit}
+                    onRenderRow={onRenderRow}
+                    pagination
+                    renderColumnContextMenu={renderColumnContextMenu}
+                    rowHeight={null}
+                    showZebraRows={true}
+                    style={gridStyle}
+                />
+                <Popup
+                    open={modalShow}
+                    onClose={modalClose}
+                    closeOnDocumentClick={false}
+                >
+                    <Form
+                        closeModal={modalClose}
+                        fetchTable={handleReload}
+                        formSettings={formData}
+                        formType={formType}
+                        updateForm={setFormData}
+                        columnId={formId}
+                        childDropdownCallback={childDropdownCallback}
+                        style={style}
+                    />
+                </Popup>
+            </>
+        );
+    }
 );
 
 export default DataGrid;