blixify-ui-web 0.1.76 → 0.1.77

package/lib/components/data/dataTemplate/index.js

@@ -62,7 +62,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTemplate = void 0;
+exports.DataTemplate = exports.additionalSelect = exports.loadingSelect = void 0;
 var outline_1 = require("@heroicons/react/24/outline");
 var solid_1 = require("@heroicons/react/24/solid");
 var moment_1 = __importDefault(require("moment"));
@@ -133,57 +133,66 @@ var queryType = [
         label: "><",
     },
 ];
+exports.loadingSelect = (react_1.default.createElement("div", { className: "flex flex-row" },
+    react_1.default.createElement(loading_1.Loading, { sizeClassName: "h-5 w-5" }),
+    react_1.default.createElement("p", { className: "ml-1" }, "Loading...")));
+exports.additionalSelect = (react_1.default.createElement("div", { className: "flex flex-row" },
+    react_1.default.createElement(solid_1.MagnifyingGlassIcon, { className: "h-5 w-5" }),
+    react_1.default.createElement("p", { className: "ml-1" }, "Search for more...")));
 function DataTemplate(props) {
     var _this = this;
     var _a, _b, _c, _d, _e, _f, _g;
     var formRef = (0, react_1.createRef)();
     var objectFormRef = (0, react_1.createRef)();
-    var typingTimeout = (0, react_1.useRef)();
     var modalFormInputRefs = props.model.map(function () { return (0, react_1.createRef)(); });
     var limit = props.limit ? props.limit : 10;
+    var typingTimeout = (0, react_1.useRef)();
     var _h = (0, react_1.useState)(false), loading = _h[0], setLoading = _h[1];
+    var _j = (0, react_1.useState)(), notification = _j[0], setNotification = _j[1];
     //INFO : Used by List
-    var _j = (0, react_1.useState)(""), filterSearch = _j[0], setFilterSearch = _j[1];
-    var _k = (0, react_1.useState)(""), filterSearchParams = _k[0], setFilterSearchParams = _k[1];
-    var _l = (0, react_1.useState)(""), filterSelection = _l[0], setFilterSelection = _l[1];
-    var _m = (0, react_1.useState)(""), filterReference = _m[0], setFilterReference = _m[1];
-    var _o = (0, react_1.useState)(""), filterReferenceSearch = _o[0], setFilterReferenceSearch = _o[1];
-    var _p = (0, react_1.useState)([]), filterReferenceList = _p[0], setFilterReferenceList = _p[1];
-    var _q = (0, react_1.useState)(true), tableLoading = _q[0], setTableLoading = _q[1];
-    var _r = (0, react_1.useState)(""), cursor = _r[0], setCursor = _r[1];
-    var _s = (0, react_1.useState)(""), lastCursor = _s[0], setLastCursor = _s[1];
-    var _t = (0, react_1.useState)([]), data = _t[0], setData = _t[1];
-    var _u = (0, react_1.useState)(0), size = _u[0], setSize = _u[1];
-    var _v = (0, react_1.useState)(0), pageIndex = _v[0], setPageIndex = _v[1];
-    var _w = (0, react_1.useState)(null), csvFile = _w[0], setCSVFile = _w[1];
-    var _x = (0, react_1.useState)([]), csvFileData = _x[0], setCSVFileData = _x[1];
-    var _y = (0, react_1.useState)(0), stepCSVIndex = _y[0], setStepCSVIndex = _y[1];
-    var _z = (0, react_1.useState)({}), listCSVMapAttribute = _z[0], setListCSVMapAttribute = _z[1];
-    var _0 = (0, react_1.useState)({}), listCSVObjAttribute = _0[0], setListCSVObjAttribute = _0[1];
-    var _1 = (0, react_1.useState)([]), csvAPIAttribute = _1[0], setCSVAPIAttribute = _1[1];
-    var _2 = (0, react_1.useState)(""), exportLink = _2[0], setExportLink = _2[1];
-    var _3 = (0, react_1.useState)([]), exportReferenceList = _3[0], setExportReferenceList = _3[1];
-    var _4 = (0, react_1.useState)(""), exportReferenceSearch = _4[0], setExportReferenceSearch = _4[1];
-    var _5 = (0, react_1.useState)(), notification = _5[0], setNotification = _5[1];
-    //INFO : Used by Read
-    //INFO : Used by Update
-    var _6 = (0, react_1.useState)(false), modalVisible = _6[0], setModalVisible = _6[1];
-    var _7 = (0, react_1.useState)(false), excelModal = _7[0], setExcelModal = _7[1];
-    var _8 = (0, react_1.useState)(false), exportExcel = _8[0], setExportExcel = _8[1];
-    var _9 = (0, react_1.useState)({}), selectedData = _9[0], setSelectedData = _9[1];
-    var _10 = (0, react_1.useState)(""), selectedObjectStructureId = _10[0], setSelectedObjectStructureId = _10[1];
-    var _11 = (0, react_1.useState)(""), selectedObjectId = _11[0], setSelectedObjectId = _11[1];
-    var _12 = (0, react_1.useState)({}), selectedObjectData = _12[0], setSelectedObjectData = _12[1];
-    var _13 = (0, react_1.useState)({}), referenceModelSchema = _13[0], setReferenceSchema = _13[1];
-    var _14 = (0, react_1.useState)({}), referenceOptions = _14[0], setReferenceOptions = _14[1];
-    var _15 = (0, react_1.useState)({}), referenceSearchText = _15[0], setReferenceSearchText = _15[1];
-    var _16 = (0, react_1.useState)([]), queryList = _16[0], setQueryList = _16[1];
-    var _17 = (0, react_1.useState)(false), queryModal = _17[0], setQueryModal = _17[1];
-    var _18 = (0, react_1.useState)({
+    var _k = (0, react_1.useState)(""), filterSearch = _k[0], setFilterSearch = _k[1];
+    var _l = (0, react_1.useState)(""), filterSearchParams = _l[0], setFilterSearchParams = _l[1];
+    var _m = (0, react_1.useState)(""), filterSelection = _m[0], setFilterSelection = _m[1];
+    var _o = (0, react_1.useState)(""), filterReference = _o[0], setFilterReference = _o[1];
+    var _p = (0, react_1.useState)(""), filterReferenceSearch = _p[0], setFilterReferenceSearch = _p[1];
+    var _q = (0, react_1.useState)([]), filterReferenceList = _q[0], setFilterReferenceList = _q[1];
+    var _r = (0, react_1.useState)(true), tableLoading = _r[0], setTableLoading = _r[1];
+    var _s = (0, react_1.useState)(""), cursor = _s[0], setCursor = _s[1];
+    var _t = (0, react_1.useState)(""), lastCursor = _t[0], setLastCursor = _t[1];
+    var _u = (0, react_1.useState)([]), tableData = _u[0], setTableData = _u[1];
+    var _v = (0, react_1.useState)(0), size = _v[0], setSize = _v[1];
+    var _w = (0, react_1.useState)(0), pageIndex = _w[0], setPageIndex = _w[1];
+    //INFO : Used by Export
+    var _x = (0, react_1.useState)(null), csvFile = _x[0], setCSVFile = _x[1];
+    var _y = (0, react_1.useState)([]), csvFileData = _y[0], setCSVFileData = _y[1];
+    var _z = (0, react_1.useState)(0), stepCSVIndex = _z[0], setStepCSVIndex = _z[1];
+    var _0 = (0, react_1.useState)({}), listCSVMapAttribute = _0[0], setListCSVMapAttribute = _0[1];
+    var _1 = (0, react_1.useState)({}), listCSVObjAttribute = _1[0], setListCSVObjAttribute = _1[1];
+    var _2 = (0, react_1.useState)([]), csvAPIAttribute = _2[0], setCSVAPIAttribute = _2[1];
+    var _3 = (0, react_1.useState)(""), exportLink = _3[0], setExportLink = _3[1];
+    var _4 = (0, react_1.useState)([]), exportReferenceList = _4[0], setExportReferenceList = _4[1];
+    var _5 = (0, react_1.useState)(""), exportReferenceSearch = _5[0], setExportReferenceSearch = _5[1];
+    var _6 = (0, react_1.useState)([]), queryList = _6[0], setQueryList = _6[1];
+    var _7 = (0, react_1.useState)(false), queryModal = _7[0], setQueryModal = _7[1];
+    var _8 = (0, react_1.useState)({
         queryId: "",
         type: "=",
         value: "",
-    }), queryInput = _18[0], setQueryInput = _18[1];
+    }), queryInput = _8[0], setQueryInput = _8[1];
+    //INFO : Used by Read
+    //INFO : Used by Update
+    var _9 = (0, react_1.useState)(false), modalVisible = _9[0], setModalVisible = _9[1];
+    var _10 = (0, react_1.useState)(false), deleteModal = _10[0], setDeleteModal = _10[1];
+    var _11 = (0, react_1.useState)(false), excelModal = _11[0], setExcelModal = _11[1];
+    var _12 = (0, react_1.useState)(false), exportExcel = _12[0], setExportExcel = _12[1];
+    var _13 = (0, react_1.useState)({}), selectedData = _13[0], setSelectedData = _13[1];
+    var _14 = (0, react_1.useState)(""), selectedObjectStructureId = _14[0], setSelectedObjectStructureId = _14[1];
+    var _15 = (0, react_1.useState)(""), selectedObjectId = _15[0], setSelectedObjectId = _15[1];
+    var _16 = (0, react_1.useState)({}), selectedObjectData = _16[0], setSelectedObjectData = _16[1];
+    var _17 = (0, react_1.useState)(false), referenceLoading = _17[0], setReferenceLoading = _17[1];
+    var _18 = (0, react_1.useState)({}), referencesOptions = _18[0], setReferencesOptions = _18[1];
+    var _19 = (0, react_1.useState)({}), referenceModelSchema = _19[0], setReferenceSchema = _19[1];
+    var serverId = props.server === "mongoServer" ? "_id" : "id";
     var dbModule = props.server === "firebase" ? (_a = props.lib) === null || _a === void 0 ? void 0 : _a.firebase : (_b = props.lib) === null || _b === void 0 ? void 0 : _b.axios;
     var writeServerQuery = new writeQuery_1.WriteQuery((_c = props.lib) === null || _c === void 0 ? void 0 : _c.axios, props.server, props.collectionId, props.dbEndpoint);
     var moreButtonPopUp = [
@@ -206,6 +215,8 @@ function DataTemplate(props) {
         switch (props.type) {
             case "read":
             case "update":
+                setExcelModal(false);
+                setExportExcel(false);
                 setSelectedData({});
                 setSelectedObjectData({});
                 if (props.id !== "new" && props.id !== "") {
@@ -214,6 +225,7 @@ function DataTemplate(props) {
                 }
                 break;
             case "list":
+                setReferencesOptions({});
                 break;
         }
     }, [props.type, props.id]);
@@ -253,7 +265,7 @@ function DataTemplate(props) {
                                             referenceData.data.map(function (eachData) {
                                                 var _a, _b;
                                                 var data = JSON.parse(JSON.stringify(eachData));
-                                                var id = props.server === "mongoServer" ? data["_id"] : data["id"];
+                                                var id = data[serverId];
                                                 referenceOptionsList.push({
                                                     key: id,
                                                     label: (_b = data[(_a = eachModel.referenceLabel) !== null && _a !== void 0 ? _a : ""]) !== null && _b !== void 0 ? _b : id,
@@ -295,13 +307,184 @@ function DataTemplate(props) {
         props.dbEndpoint,
         props.model,
         props.server,
+        serverId,
     ]);
-    var queryIdOptions = [];
-    //SECTION - List
+    //=====================================================================================
+    //SECTION: Handle Reference
+    //=====================================================================================
+    var handleRetrieveObjectReferenceOptions = function (eachModel, referencesOptions, selectedData, prefix, listObject, searchText) { return __awaiter(_this, void 0, void 0, function () {
+        var optionList_1, referenceRQ_1, selectionRes, selectedDataValue, currentRes_1, queryValue, res, modelId, err_1;
+        var _this = this;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _c.trys.push([0, 6, , 7]);
+                    optionList_1 = [];
+                    referenceRQ_1 = new readQuery_1.ReadQuery(dbModule, props.server, (_a = eachModel.referenceSpaceId) !== null && _a !== void 0 ? _a : "", props.dbEndpoint);
+                    return [4 /*yield*/, referenceRQ_1.call({
+                            type: "list",
+                            limit: 10,
+                            query: searchText
+                                ? [
+                                    {
+                                        type: "search",
+                                        value: searchText,
+                                        searchIds: [(_b = eachModel.referenceLabel) !== null && _b !== void 0 ? _b : "", serverId],
+                                    },
+                                ]
+                                : undefined,
+                        })];
+                case 1:
+                    selectionRes = _c.sent();
+                    selectedDataValue = [];
+                    if (listObject)
+                        selectedDataValue = selectedData[prefix !== null && prefix !== void 0 ? prefix : ""];
+                    else if (prefix)
+                        selectedDataValue = selectedData[prefix][eachModel.id];
+                    else
+                        selectedDataValue = selectedData[eachModel.id];
+                    currentRes_1 = [];
+                    if (!(selectedData && selectedDataValue)) return [3 /*break*/, 5];
+                    if (!(listObject && Array.isArray(selectedDataValue))) return [3 /*break*/, 3];
+                    return [4 /*yield*/, Promise.all(selectedDataValue.map(function (eachData) { return __awaiter(_this, void 0, void 0, function () {
+                            var queryValue, res;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        queryValue = Array.isArray(eachData[eachModel.id])
+                                            ? eachData[eachModel.id]
+                                            : [eachData[eachModel.id]];
+                                        return [4 /*yield*/, referenceRQ_1.call({
+                                                type: "list",
+                                                query: [{ type: "in", value: queryValue, queryId: serverId }],
+                                            })];
+                                    case 1:
+                                        res = _a.sent();
+                                        if (res === null || res === void 0 ? void 0 : res.data)
+                                            currentRes_1.push.apply(currentRes_1, res.data);
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); }))];
+                case 2:
+                    _c.sent();
+                    return [3 /*break*/, 5];
+                case 3:
+                    queryValue = Array.isArray(selectedDataValue)
+                        ? selectedDataValue
+                        : [selectedDataValue];
+                    return [4 /*yield*/, referenceRQ_1.call({
+                            type: "list",
+                            query: [{ type: "in", value: queryValue, queryId: serverId }],
+                        })];
+                case 4:
+                    res = _c.sent();
+                    currentRes_1 = res === null || res === void 0 ? void 0 : res.data;
+                    _c.label = 5;
+                case 5:
+                    if (selectionRes === null || selectionRes === void 0 ? void 0 : selectionRes.data) {
+                        selectionRes.data.map(function (eachData) {
+                            var _a, _b;
+                            var id = eachData[serverId];
+                            var eachDataJSON = JSON.parse(JSON.stringify(eachData));
+                            if (!optionList_1.some(function (eachData) { return eachData.key === id; })) {
+                                optionList_1.push({
+                                    key: eachData._id,
+                                    label: (_b = eachDataJSON[(_a = eachModel.referenceLabel) !== null && _a !== void 0 ? _a : ""]) !== null && _b !== void 0 ? _b : eachData._id,
+                                });
+                            }
+                            return null;
+                        });
+                    }
+                    if (currentRes_1) {
+                        currentRes_1.map(function (eachData) {
+                            var _a, _b;
+                            var id = eachData[serverId];
+                            var eachDataJSON = JSON.parse(JSON.stringify(eachData));
+                            if (!optionList_1.some(function (eachData) { return eachData.key === id; })) {
+                                optionList_1.push({
+                                    key: eachData._id,
+                                    label: (_b = eachDataJSON[(_a = eachModel.referenceLabel) !== null && _a !== void 0 ? _a : ""]) !== null && _b !== void 0 ? _b : eachData._id,
+                                });
+                            }
+                            return null;
+                        });
+                    }
+                    modelId = prefix ? "".concat(prefix, ".").concat(eachModel.id) : eachModel.id;
+                    referencesOptions[modelId] = optionList_1;
+                    return [3 /*break*/, 7];
+                case 6:
+                    err_1 = _c.sent();
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleRetrieveReferenceOptions = function (selectedData) { return __awaiter(_this, void 0, void 0, function () {
+        var options, err_2;
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    options = {};
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, Promise.all(props.model.map(function (eachModel) { return __awaiter(_this, void 0, void 0, function () {
+                            var _this = this;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        if (!(eachModel.type === "reference" ||
+                                            eachModel.type === "listReference")) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, handleRetrieveObjectReferenceOptions(eachModel, options, selectedData)];
+                                    case 1:
+                                        _a.sent();
+                                        return [3 /*break*/, 4];
+                                    case 2:
+                                        if (!((eachModel.type === "object" || eachModel.type === "listObject") &&
+                                            eachModel.objectData)) return [3 /*break*/, 4];
+                                        return [4 /*yield*/, Promise.all(eachModel.objectData.map(function (eachObjectData) { return __awaiter(_this, void 0, void 0, function () {
+                                                return __generator(this, function (_a) {
+                                                    switch (_a.label) {
+                                                        case 0:
+                                                            if (!(eachObjectData.type === "reference" ||
+                                                                eachObjectData.type === "listReference")) return [3 /*break*/, 2];
+                                                            return [4 /*yield*/, handleRetrieveObjectReferenceOptions(eachObjectData, options, selectedData, eachModel.id, eachModel.type === "listObject")];
+                                                        case 1:
+                                                            _a.sent();
+                                                            _a.label = 2;
+                                                        case 2: return [2 /*return*/];
+                                                    }
+                                                });
+                                            }); }))];
+                                    case 3:
+                                        _a.sent();
+                                        _a.label = 4;
+                                    case 4: return [2 /*return*/];
+                                }
+                            });
+                        }); }))];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_2 = _a.sent();
+                    return [3 /*break*/, 4];
+                case 4:
+                    setReferencesOptions(options);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    //=====================================================================================
+    //SECTION: Handle List
+    //=====================================================================================
     var handlePagination = function (value) {
         if (props.server === "mongoServer") {
             setTableLoading(true);
-            setData([]);
+            setTableData([]);
         }
         if (typeof value === "number") {
             setPageIndex(value);
@@ -311,7 +494,7 @@ function DataTemplate(props) {
                 //INFO : Retrieve latest cursor data from Firebase only
                 if (props.server !== "mongoServer" &&
                     cursor &&
-                    (pageIndex + 1) * limit + 1 > data.length) {
+                    (pageIndex + 1) * limit + 1 > tableData.length) {
                     setLastCursor(cursor);
                 }
                 setPageIndex(pageIndex + 1);
@@ -336,7 +519,7 @@ function DataTemplate(props) {
                     return [4 /*yield*/, handleListResponse];
                 case 2:
                     dataList = _b.sent();
-                    setData(dataList);
+                    setTableData(dataList);
                     setSize(responseData.count);
                     _b.label = 3;
                 case 3: return [3 /*break*/, 7];
@@ -347,7 +530,7 @@ function DataTemplate(props) {
                     dataList = _b.sent();
                     _b.label = 6;
                 case 6:
-                    setData(filterSearchParams ? dataList : dataList.concat(data));
+                    setTableData(filterSearchParams ? dataList : dataList.concat(tableData));
                     setCursor(responseData.count);
                     _b.label = 7;
                 case 7:
@@ -356,38 +539,22 @@ function DataTemplate(props) {
             }
         });
     }); };
-    var handleExportCSVData = function () { return __awaiter(_this, void 0, void 0, function () {
-        var res, err_1;
-        var _a, _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0:
-                    _d.trys.push([0, 2, , 3]);
-                    setLoading(true);
-                    return [4 /*yield*/, ((_b = (_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios) === null || _b === void 0 ? void 0 : _b.post("".concat(props.schemaEndpoint, "/csv/export"), {
-                            data: { spaceId: props.collectionId, query: queryList },
-                        }, {
-                            headers: {
-                                "Content-Type": "multipart/form-data",
-                            },
-                        }))];
-                case 1:
-                    res = _d.sent();
-                    setExportLink((_c = res === null || res === void 0 ? void 0 : res.data.link) !== null && _c !== void 0 ? _c : "");
-                    setNotification({
-                        type: true,
-                        title: "Export Successfully",
-                        msg: "A download link had been generated.",
-                    });
-                    setLoading(false);
-                    return [3 /*break*/, 3];
-                case 2:
-                    err_1 = _d.sent();
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); };
+    var handleClearDataByFilter = function () {
+        setTableData([]);
+        setPageIndex(0);
+        setTableLoading(true);
+    };
+    var handleNameSearch = function (e) {
+        setFilterSearch(e.target.value);
+        handleClearDataByFilter();
+        if (typingTimeout.current) {
+            clearTimeout(typingTimeout.current);
+            typingTimeout.current = null;
+        }
+        typingTimeout.current = setTimeout(function () {
+            setFilterSearchParams(e.target.value);
+        }, 500);
+    };
     var handleGetItemError = function () {
         setTableLoading(false);
         setModalVisible(false);
@@ -396,547 +563,180 @@ function DataTemplate(props) {
             handleNavigate();
         }
     };
-    //SECTION - CSV
-    var handleOnChangeCSV = function (e) {
-        var _a;
-        var file = e.target.files[0];
-        if (file) {
-            setCSVFile(file);
-            (_a = props.lib) === null || _a === void 0 ? void 0 : _a.papaParser.parse(file, {
-                header: true,
-                dynamicTyping: true,
-                complete: function (results) {
-                    if (results.data && results.data.length < 100)
-                        setCSVFileData(results.data);
-                    else
-                        setNotification({
-                            type: false,
-                            title: "Import Error",
-                            msg: "Data is more than 100 rows",
-                        });
-                },
-            });
-            setStepCSVIndex(1);
+    //=====================================================================================
+    //SECTION: Handle Object
+    //=====================================================================================
+    // TODO - Remove Root Folder of the Object List Image
+    var handleRemoveObjectListData = function () {
+        var clonedSelectedData = handleClonedDataAttribute(selectedData, props.model);
+        if (selectedObjectId) {
+            var index = clonedSelectedData[selectedObjectStructureId].findIndex(function (eachData) { return eachData.id === selectedObjectId; });
+            if (index !== -1) {
+                clonedSelectedData[selectedObjectStructureId].splice(index, 1);
+            }
+            setSelectedObjectId("");
+            setSelectedData(clonedSelectedData);
+            handlePopUpModal(false);
+        }
+    };
+    var handleSubmitObjectDataType = function () {
+        var _a, _b;
+        var clonedSelectedData = handleClonedDataAttribute(selectedData, props.model);
+        var filterObjectModel = props.model.find(function (eachModel) {
+            return eachModel.id === selectedObjectStructureId;
+        });
+        var clonedSelectedObjectData = handleClonedDataAttribute(selectedObjectData, (_a = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _a !== void 0 ? _a : [], true, true);
+        if (!clonedSelectedObjectData["id"]) {
+            clonedSelectedObjectData["id"] = (0, uuid_1.v4)();
+        }
+        if ((filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.type) === "listObject") {
+            if (selectedObjectId) {
+                var index = clonedSelectedData[selectedObjectStructureId].findIndex(function (eachData) { return eachData.id === selectedObjectId; });
+                if (index !== -1) {
+                    clonedSelectedData[selectedObjectStructureId][index] =
+                        clonedSelectedObjectData;
+                }
+                setSelectedObjectId("");
+                setSelectedData(clonedSelectedData);
+            }
+            else {
+                if (Array.isArray(clonedSelectedData[selectedObjectStructureId])) {
+                    clonedSelectedData[selectedObjectStructureId].push(clonedSelectedObjectData);
+                    setSelectedData(clonedSelectedData);
+                }
+                else {
+                    clonedSelectedData[selectedObjectStructureId] = [
+                        clonedSelectedObjectData,
+                    ];
+                    setSelectedData(clonedSelectedData);
+                }
+            }
         }
         else {
-            setNotification({
-                type: false,
-                title: "Import Error",
-                msg: "No file is selected",
-            });
+            var clonedSelectedObjectData_1 = handleClonedDataAttribute(selectedObjectData, (_b = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _b !== void 0 ? _b : []);
+            clonedSelectedData[selectedObjectStructureId] = clonedSelectedObjectData_1;
+            setSelectedData(clonedSelectedData);
         }
+        handlePopUpModal(false);
     };
-    var handleStepCSV = function () { return __awaiter(_this, void 0, void 0, function () {
-        var csvList_1, _loop_1, _i, _a, _b, eachKey, eachValue, valid_1, errorValue_1, response, err_2;
-        var _c, _d, _e, _f, _g;
-        return __generator(this, function (_h) {
-            switch (_h.label) {
+    //TODO: Bug, try to solve clicking List Object too fast
+    var handleSelectListObjectData = function (id, structureId) {
+        var filterObjectModel = props.model.find(function (eachModel) {
+            return eachModel.id === structureId;
+        });
+        if ((filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.type) === "listObject") {
+            var selectedObjectListData = selectedData[structureId].find(function (eachData) { return eachData.id === id; });
+            setSelectedObjectId(id);
+            setSelectedObjectStructureId(structureId);
+            setSelectedObjectData(selectedObjectListData);
+            setModalVisible(true);
+        }
+    };
+    //=====================================================================================
+    //SECTION: Handle Assets
+    //=====================================================================================
+    var handleUploadAxios = function (eachImageEndpoint, assetParentId, assetCollectionName, assetFileName, file) { return __awaiter(_this, void 0, void 0, function () {
+        var responseData, err_3;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
-                    _h.trys.push([0, 6, , 7]);
-                    if (!(stepCSVIndex === 0)) return [3 /*break*/, 1];
-                    if (csvFileData.length > 0 && csvFile)
-                        setStepCSVIndex(stepCSVIndex + 1);
-                    else
-                        throw new Error("Please upload a .CSV file");
-                    return [3 /*break*/, 5];
+                    _c.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, ((_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios.post((_b = eachImageEndpoint + "/upload") !== null && _b !== void 0 ? _b : "", {
+                            file: file,
+                            data: {
+                                assetParentId: assetParentId,
+                                assetCollectionName: assetCollectionName,
+                                assetFileName: assetFileName,
+                            },
+                        }, {
+                            headers: {
+                                "Content-Type": "multipart/form-data",
+                            },
+                        }))];
                 case 1:
-                    if (!(stepCSVIndex === 1)) return [3 /*break*/, 3];
-                    csvList_1 = [];
-                    _loop_1 = function (eachKey, eachValue) {
-                        if (eachKey && eachValue && typeof eachValue === "string") {
-                            var selectedModel = props.model.find(function (eachModel) {
-                                return eachModel.id === eachValue;
-                            });
-                            if ((selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "object" ||
-                                (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "listObject") {
-                                var selectedObjectModel = (_c = selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.objectData) === null || _c === void 0 ? void 0 : _c.find(function (eachModel) {
-                                    return eachModel.id === eachValue;
-                                });
-                                csvList_1.push({
-                                    id: (_d = listCSVObjAttribute[eachKey]) !== null && _d !== void 0 ? _d : "",
-                                    ori: Number(eachKey),
-                                    type: "object",
-                                    objectId: eachValue,
-                                    objectValueType: (_e = selectedObjectModel === null || selectedObjectModel === void 0 ? void 0 : selectedObjectModel.type) !== null && _e !== void 0 ? _e : "string",
-                                });
-                            }
-                            else if ((selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "image") {
-                                csvList_1.push({
-                                    id: eachValue !== null && eachValue !== void 0 ? eachValue : "",
-                                    ori: Number(eachKey),
-                                    type: "image",
-                                    imageCollectionName: selectedModel.imageCollectionName,
-                                    imageFileName: selectedModel.imageFileName,
-                                    imageEndpoint: selectedModel.imageEndpoint,
-                                });
-                            }
-                            else {
-                                csvList_1.push({
-                                    id: eachValue !== null && eachValue !== void 0 ? eachValue : "",
-                                    ori: Number(eachKey),
-                                    type: (_f = selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) !== null && _f !== void 0 ? _f : "string",
-                                });
-                            }
-                        }
-                    };
-                    for (_i = 0, _a = Object.entries(listCSVMapAttribute); _i < _a.length; _i++) {
-                        _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
-                        _loop_1(eachKey, eachValue);
-                    }
-                    valid_1 = true;
-                    errorValue_1 = "";
-                    return [4 /*yield*/, Promise.all(props.model.map(function (eachEachModel) {
-                            if (eachEachModel.id === "_id" || eachEachModel.id === "id") {
-                                return "";
-                            }
-                            if (!eachEachModel.optional) {
-                                // INFO : Validate and compare the modal with csv list and return true if > 1 consist within
-                                var innearValidation = csvList_1.some(function (eachCsvList) {
-                                    if (eachCsvList.type === "object" ||
-                                        eachCsvList.type === "listObject") {
-                                        return eachEachModel.id === eachCsvList.objectId;
-                                    }
-                                    else {
-                                        return eachEachModel.id === eachCsvList.id;
-                                    }
-                                });
-                                if (!innearValidation) {
-                                    errorValue_1 = errorValue_1 + "<" + eachEachModel.id + ">";
-                                    valid_1 = false;
-                                }
-                            }
-                            return null;
-                        }))];
+                    responseData = _c.sent();
+                    return [2 /*return*/, responseData];
                 case 2:
-                    _h.sent();
-                    if (!valid_1) {
-                        throw new Error("Please select how you want to map your data to ".concat(errorValue_1));
-                    }
-                    else {
-                        setCSVAPIAttribute(csvList_1);
-                        setStepCSVIndex(stepCSVIndex + 1);
-                    }
-                    return [3 /*break*/, 5];
-                case 3:
-                    if (!(stepCSVIndex === 2)) return [3 /*break*/, 5];
-                    // INFO - Call Space Excel API
-                    setLoading(true);
-                    return [4 /*yield*/, ((_g = props.lib) === null || _g === void 0 ? void 0 : _g.axios.post("".concat(props.schemaEndpoint, "/csv/import"), {
-                            data: {
-                                parsedDataStructure: csvAPIAttribute,
-                                spaceId: props.collectionId,
-                            },
-                            file: csvFile,
-                        }, {
-                            headers: {
-                                "Content-Type": "multipart/form-data",
-                            },
-                        }))];
-                case 4:
-                    response = _h.sent();
-                    setLoading(false);
-                    if (response.data) {
-                        setNotification({
-                            type: true,
-                            title: "Data has been imported successfully",
-                            msg: response.data.msg,
-                        });
-                        handlePopUpModal(false);
-                        setTimeout(function () {
-                            window.location.reload();
-                        }, 1500);
-                    }
-                    _h.label = 5;
-                case 5: return [3 /*break*/, 7];
-                case 6:
-                    err_2 = _h.sent();
-                    setNotification({
-                        type: false,
-                        title: "Import Error",
-                        msg: err_2.message,
-                    });
-                    return [3 /*break*/, 7];
-                case 7: return [2 /*return*/];
+                    err_3 = _c.sent();
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
             }
         });
     }); };
-    var handleQueryModal = function () {
-        setQueryModal(!queryModal);
-        setQueryInput({
-            queryId: "",
-            type: "=",
-            value: "",
-        });
-        setExportReferenceList([]);
-        setExportReferenceSearch("");
-    };
-    var handleCloneQueryList = function () {
-        var _a;
-        var clonedQueryInput = (_a = JSON.parse(JSON.stringify(queryList))) !== null && _a !== void 0 ? _a : [];
-        clonedQueryInput.map(function (eachQuery) {
-            var tempValue = eachQuery.value;
-            if (tempValue === "false" || tempValue === "true") {
-                tempValue = tempValue === "false" ? false : true;
-            }
-            else if (!isNaN(tempValue)) {
-                tempValue = Number(tempValue);
-            }
-            eachQuery.value = tempValue;
-            return null;
-        });
-        return clonedQueryInput;
-    };
-    var handlePushQueryList = function () {
-        var tempQueryList = handleCloneQueryList();
-        if (!tempQueryList.some(function (eachQuery) { return eachQuery.queryId === queryInput.queryId; })) {
-            var tempValue = queryInput.value;
-            if (tempValue === "false" || tempValue === "true") {
-                tempValue = tempValue === "false" ? false : true;
-            }
-            else if (!isNaN(tempValue)) {
-                tempValue = Number(tempValue);
-            }
-            queryInput.value = tempValue;
-            tempQueryList.push(queryInput);
-            setQueryModal(!queryModal);
-            setQueryList(tempQueryList);
-            setQueryInput({
-                queryId: "",
-                type: "=",
-                value: "",
-            });
-        }
-        else {
-            // NOTIFICATION - CONISTS
-            setNotification({
-                type: false,
-                title: "Export Failed",
-                msg: "Please check again your query attribute.",
-            });
-        }
-    };
-    var handleViewQuery = function (index) {
-        handleQueryModal();
-        setQueryInput(queryList[index]);
-    };
-    var handleSortQuery = function (index, sortType) {
-        var _a;
-        var sortList = JSON.parse(JSON.stringify(queryList));
-        var ascIndex = sortType === "up" ? index - 1 : index + 1;
-        _a = [
-            sortList[ascIndex],
-            sortList[index],
-        ], sortList[index] = _a[0], sortList[ascIndex] = _a[1];
-        setQueryList(sortList);
-    };
-    //Section - Update
-    var handleRetrieveSelectedData = function (responseData) { return __awaiter(_this, void 0, void 0, function () {
-        var dummyRespData, dummyReferenceModelSchema, newRespData, _a;
-        var _b, _c, _d;
-        return __generator(this, function (_e) {
-            switch (_e.label) {
-                case 0:
-                    if (!responseData.data) return [3 /*break*/, 4];
-                    dummyRespData = JSON.parse(JSON.stringify(responseData.data), utils_2.jsonReviver);
-                    dummyReferenceModelSchema = JSON.parse(JSON.stringify(referenceModelSchema));
-                    if (!(props.type === "read")) return [3 /*break*/, 2];
-                    return [4 /*yield*/, (0, utils_2.handleRetrieveDeepModel)(dummyRespData, (_b = props.model) !== null && _b !== void 0 ? _b : [], dbModule, props.server, props.dbEndpoint, props.schemaEndpoint, (_c = props.imageEndpoint) !== null && _c !== void 0 ? _c : "", (_d = props.id) !== null && _d !== void 0 ? _d : "", dummyReferenceModelSchema, setReferenceSchema)];
+    var handleUploadObjectImage = function (id) { return __awaiter(_this, void 0, void 0, function () {
+        var clonedSelectedData, uploadObjectAttribute, objectAttribute, _loop_1, _i, _a, _b, eachKey, eachValue;
+        var _this = this;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, handleUploadListObjectImage(id)];
                 case 1:
-                    _a = _e.sent();
-                    return [3 /*break*/, 3];
+                    clonedSelectedData = _c.sent();
+                    uploadObjectAttribute = {};
+                    objectAttribute = props.model.filter(function (eachAttribute) {
+                        return eachAttribute.type === "object";
+                    });
+                    if (!(objectAttribute.length > 0)) return [3 /*break*/, 5];
+                    objectAttribute.map(function (eachObject) {
+                        var _a;
+                        var filterImageObjectData = (_a = eachObject.objectData) === null || _a === void 0 ? void 0 : _a.filter(function (eachAttribute) {
+                            return (eachAttribute.type === "image" || eachAttribute.type === "file");
+                        });
+                        uploadObjectAttribute[eachObject.id] = filterImageObjectData;
+                        return null;
+                    });
+                    _loop_1 = function (eachKey, eachValue) {
+                        return __generator(this, function (_d) {
+                            switch (_d.label) {
+                                case 0:
+                                    if (!Array.isArray(eachValue)) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, Promise.all(eachValue.map(function (eachImage) { return __awaiter(_this, void 0, void 0, function () {
+                                            var responseData;
+                                            var _a, _b;
+                                            return __generator(this, function (_c) {
+                                                switch (_c.label) {
+                                                    case 0:
+                                                        if (!(typeof selectedData[eachKey][eachImage.id] === "string")) return [3 /*break*/, 1];
+                                                        return [2 /*return*/];
+                                                    case 1:
+                                                        if (!(selectedData[eachKey][eachImage.id] instanceof File)) return [3 /*break*/, 3];
+                                                        return [4 /*yield*/, handleUploadAxios((_a = eachImage.imageEndpoint) !== null && _a !== void 0 ? _a : "", eachKey, eachImage.imageCollectionName + "/" + id, (_b = eachImage.imageFileName) !== null && _b !== void 0 ? _b : "", selectedData[eachKey][eachImage.id])];
+                                                    case 2:
+                                                        responseData = _c.sent();
+                                                        if (responseData.data) {
+                                                            clonedSelectedData[eachKey][eachImage.id] =
+                                                                responseData.data.data;
+                                                        }
+                                                        _c.label = 3;
+                                                    case 3: return [2 /*return*/, null];
+                                                }
+                                            });
+                                        }); }))];
+                                case 1:
+                                    _d.sent();
+                                    _d.label = 2;
+                                case 2: return [2 /*return*/];
+                            }
+                        });
+                    };
+                    _i = 0, _a = Object.entries(uploadObjectAttribute);
+                    _c.label = 2;
                 case 2:
-                    _a = dummyRespData;
-                    _e.label = 3;
+                    if (!(_i < _a.length)) return [3 /*break*/, 5];
+                    _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
+                    return [5 /*yield**/, _loop_1(eachKey, eachValue)];
                 case 3:
-                    newRespData = _a;
-                    setSelectedData(newRespData);
-                    _e.label = 4;
+                    _c.sent();
+                    _c.label = 4;
                 case 4:
-                    setModalVisible(false);
-                    setLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleClonedDataAttribute = function (selectedData, model, force, isRemainId) {
-        var defaultValue = selectedData;
-        var clonedSelectedData = JSON.parse(JSON.stringify(selectedData));
-        model.map(function (eachAttribute) {
-            var _a, _b;
-            if (eachAttribute.id === "_id" || eachAttribute.id === "id") {
-                return null;
-            }
-            switch (eachAttribute.type) {
-                case "date":
-                    if (defaultValue[eachAttribute.id]) {
-                        clonedSelectedData[eachAttribute.id] = (0, moment_1.default)(defaultValue[eachAttribute.id]).toDate();
-                    }
-                    break;
-                case "boolean":
-                    //INFO : Force is only called during submission, some casting may affect UI
-                    if (force) {
-                        if (defaultValue[eachAttribute.id] === "true") {
-                            clonedSelectedData[eachAttribute.id] = true;
-                        }
-                        else if (defaultValue[eachAttribute.id] === "false") {
-                            clonedSelectedData[eachAttribute.id] = false;
-                        }
-                    }
-                    break;
-                case "listObject":
-                    clonedSelectedData[eachAttribute.id] =
-                        (_a = defaultValue[eachAttribute.id]) !== null && _a !== void 0 ? _a : [];
-                    break;
-                case "object":
-                    if (force)
-                        clonedSelectedData[eachAttribute.id] =
-                            (_b = defaultValue[eachAttribute.id]) !== null && _b !== void 0 ? _b : {};
-                    else
-                        clonedSelectedData[eachAttribute.id] =
-                            defaultValue[eachAttribute.id];
-                    break;
-                case "image":
-                case "file":
-                    clonedSelectedData[eachAttribute.id] = defaultValue[eachAttribute.id];
-                    break;
-                case "number":
-                    if (defaultValue[eachAttribute.id]) {
-                        clonedSelectedData[eachAttribute.id] = Number(defaultValue[eachAttribute.id]);
-                    }
-                    break;
-            }
-            return null;
-        });
-        if (!isRemainId) {
-            delete clonedSelectedData["id"];
-            delete clonedSelectedData["_id"];
-        }
-        return clonedSelectedData;
-    };
-    var handleOnChangeData = function () {
-        var _a;
-        if (modalVisible && selectedObjectStructureId) {
-            var filterObjectModel = props.model.find(function (eachModel) {
-                return eachModel.id === selectedObjectStructureId;
-            });
-            return {
-                data: selectedObjectData,
-                model: (_a = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _a !== void 0 ? _a : [],
-            };
-        }
-        else {
-            return {
-                data: selectedData,
-                model: props.model,
-            };
-        }
-    };
-    var handleUpdateChangeData = function (data) {
-        if (modalVisible && selectedObjectStructureId) {
-            setSelectedObjectData(data);
-        }
-        else {
-            setSelectedData(data);
-        }
-    };
-    var handleOnChangeFile = function (e) {
-        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
-        var clonedData = handleClonedDataAttribute(data, model);
-        clonedData[e.target.id] =
-            e.target.files.length > 0 ? e.target.files[0] : undefined;
-        handleUpdateChangeData(clonedData);
-    };
-    var handleOnChangeAddress = function (id, address) {
-        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
-        var clonedData = handleClonedDataAttribute(data, model);
-        clonedData[id] = address;
-        handleUpdateChangeData(clonedData);
-    };
-    var handleOnChangeText = function (e) {
-        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
-        var clonedData = handleClonedDataAttribute(data, model);
-        clonedData[e.target.id] = e.target.value;
-        handleUpdateChangeData(clonedData);
-    };
-    var handleOnChangeSelect = function (id, value) {
-        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
-        var clonedData = handleClonedDataAttribute(data, model);
-        clonedData[id] = value;
-        handleUpdateChangeData(clonedData);
-    };
-    var handleOnChangeDate = function (id, value) {
-        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
-        var clonedData = handleClonedDataAttribute(data, model);
-        clonedData[id] = value;
-        handleUpdateChangeData(clonedData);
-    };
-    //SECTION - Reference
-    var handleSearchReferenceOptions = function (id, searchText) {
-        var clonedSearchText = JSON.parse(JSON.stringify(referenceSearchText));
-        clonedSearchText[id] = searchText;
-        setReferenceSearchText(clonedSearchText);
-    };
-    var handleGetReferenceOptions = function (dataList, dataStructure, label, currentData) { return __awaiter(_this, void 0, void 0, function () {
-        var optionList_1, clonedReferrenceOptions, referenceRQ, res, err_3;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    _b.trys.push([0, 3, , 4]);
-                    optionList_1 = [];
-                    clonedReferrenceOptions = JSON.parse(JSON.stringify(referenceOptions));
-                    dataList.data.map(function (eachData) {
-                        var _a;
-                        var eachDataJSON = JSON.parse(JSON.stringify(eachData));
-                        optionList_1.push({
-                            key: eachData._id,
-                            label: (_a = eachDataJSON[label]) !== null && _a !== void 0 ? _a : eachData._id,
-                        });
-                        return null;
-                    });
-                    if (!currentData) return [3 /*break*/, 2];
-                    referenceRQ = new readQuery_1.ReadQuery(dbModule, props.server, (_a = dataStructure.referenceSpaceId) !== null && _a !== void 0 ? _a : "", props.dbEndpoint);
-                    return [4 /*yield*/, referenceRQ.call({
-                            type: "list",
-                            query: [
-                                {
-                                    type: "in",
-                                    queryId: props.server === "mongoServer" ? "_id" : "id",
-                                    value: Array.isArray(currentData) ? currentData : [currentData],
-                                },
-                            ],
-                        })];
-                case 1:
-                    res = _b.sent();
-                    if (res === null || res === void 0 ? void 0 : res.data) {
-                        res.data.map(function (eachData) {
-                            var _a;
-                            var id = props.server === "mongoServer" ? eachData._id : eachData.id;
-                            var eachDataJSON = JSON.parse(JSON.stringify(eachData));
-                            if (!optionList_1.some(function (eachData) { return eachData.key === id; })) {
-                                optionList_1.push({
-                                    key: eachData._id,
-                                    label: (_a = eachDataJSON[label]) !== null && _a !== void 0 ? _a : eachData._id,
-                                });
-                            }
-                            return null;
-                        });
-                    }
-                    _b.label = 2;
-                case 2:
-                    clonedReferrenceOptions[dataStructure.id] = optionList_1;
-                    setReferenceOptions(clonedReferrenceOptions);
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_3 = _b.sent();
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
-    //SECTION - Assets
-    var handleUploadAxios = function (eachImageEndpoint, assetParentId, assetCollectionName, assetFileName, file) { return __awaiter(_this, void 0, void 0, function () {
-        var responseData, err_4;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    _c.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, ((_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios.post((_b = eachImageEndpoint + "/upload") !== null && _b !== void 0 ? _b : "", {
-                            file: file,
-                            data: {
-                                assetParentId: assetParentId,
-                                assetCollectionName: assetCollectionName,
-                                assetFileName: assetFileName,
-                            },
-                        }, {
-                            headers: {
-                                "Content-Type": "multipart/form-data",
-                            },
-                        }))];
-                case 1:
-                    responseData = _c.sent();
-                    return [2 /*return*/, responseData];
-                case 2:
-                    err_4 = _c.sent();
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleUploadObjectImage = function (id) { return __awaiter(_this, void 0, void 0, function () {
-        var clonedSelectedData, uploadObjectAttribute, objectAttribute, _loop_2, _i, _a, _b, eachKey, eachValue;
-        var _this = this;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0: return [4 /*yield*/, handleUploadListObjectImage(id)];
-                case 1:
-                    clonedSelectedData = _c.sent();
-                    uploadObjectAttribute = {};
-                    objectAttribute = props.model.filter(function (eachAttribute) {
-                        return eachAttribute.type === "object";
-                    });
-                    if (!(objectAttribute.length > 0)) return [3 /*break*/, 5];
-                    objectAttribute.map(function (eachObject) {
-                        var _a;
-                        var filterImageObjectData = (_a = eachObject.objectData) === null || _a === void 0 ? void 0 : _a.filter(function (eachAttribute) {
-                            return (eachAttribute.type === "image" || eachAttribute.type === "file");
-                        });
-                        uploadObjectAttribute[eachObject.id] = filterImageObjectData;
-                        return null;
-                    });
-                    _loop_2 = function (eachKey, eachValue) {
-                        return __generator(this, function (_d) {
-                            switch (_d.label) {
-                                case 0:
-                                    if (!Array.isArray(eachValue)) return [3 /*break*/, 2];
-                                    return [4 /*yield*/, Promise.all(eachValue.map(function (eachImage) { return __awaiter(_this, void 0, void 0, function () {
-                                            var responseData;
-                                            var _a, _b;
-                                            return __generator(this, function (_c) {
-                                                switch (_c.label) {
-                                                    case 0:
-                                                        if (!(typeof selectedData[eachKey][eachImage.id] === "string")) return [3 /*break*/, 1];
-                                                        return [2 /*return*/];
-                                                    case 1:
-                                                        if (!(selectedData[eachKey][eachImage.id] instanceof File)) return [3 /*break*/, 3];
-                                                        return [4 /*yield*/, handleUploadAxios((_a = eachImage.imageEndpoint) !== null && _a !== void 0 ? _a : "", eachKey, eachImage.imageCollectionName + "/" + id, (_b = eachImage.imageFileName) !== null && _b !== void 0 ? _b : "", selectedData[eachKey][eachImage.id])];
-                                                    case 2:
-                                                        responseData = _c.sent();
-                                                        if (responseData.data) {
-                                                            clonedSelectedData[eachKey][eachImage.id] =
-                                                                responseData.data.data;
-                                                        }
-                                                        _c.label = 3;
-                                                    case 3: return [2 /*return*/, null];
-                                                }
-                                            });
-                                        }); }))];
-                                case 1:
-                                    _d.sent();
-                                    _d.label = 2;
-                                case 2: return [2 /*return*/];
-                            }
-                        });
-                    };
-                    _i = 0, _a = Object.entries(uploadObjectAttribute);
-                    _c.label = 2;
-                case 2:
-                    if (!(_i < _a.length)) return [3 /*break*/, 5];
-                    _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
-                    return [5 /*yield**/, _loop_2(eachKey, eachValue)];
-                case 3:
-                    _c.sent();
-                    _c.label = 4;
-                case 4:
-                    _i++;
-                    return [3 /*break*/, 2];
-                case 5: return [2 /*return*/, clonedSelectedData];
+                    _i++;
+                    return [3 /*break*/, 2];
+                case 5: return [2 /*return*/, clonedSelectedData];
             }
         });
     }); };
     var handleUploadListObjectImage = function (id) { return __awaiter(_this, void 0, void 0, function () {
-        var clonedSelectedData, uploadObjectAttribute, objectAttribute, _loop_3, _i, _a, _b, eachKey, eachValue;
+        var clonedSelectedData, uploadObjectAttribute, objectAttribute, _loop_2, _i, _a, _b, eachKey, eachValue;
         var _this = this;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -955,7 +755,7 @@ function DataTemplate(props) {
                         uploadObjectAttribute[eachObject.id] = filterImageObjectData;
                         return null;
                     });
-                    _loop_3 = function (eachKey, eachValue) {
+                    _loop_2 = function (eachKey, eachValue) {
                         return __generator(this, function (_d) {
                             switch (_d.label) {
                                 case 0:
@@ -1014,7 +814,7 @@ function DataTemplate(props) {
                 case 1:
                     if (!(_i < _a.length)) return [3 /*break*/, 4];
                     _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
-                    return [5 /*yield**/, _loop_3(eachKey, eachValue)];
+                    return [5 /*yield**/, _loop_2(eachKey, eachValue)];
                 case 2:
                     _c.sent();
                     _c.label = 3;
@@ -1064,7 +864,7 @@ function DataTemplate(props) {
         });
     }); };
     var handleRemoveImageAxios = function (imageEndpoint, assetParentId, assetCollectionName, assetFileName) { return __awaiter(_this, void 0, void 0, function () {
-        var err_5;
+        var err_4;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -1085,7 +885,7 @@ function DataTemplate(props) {
                     _c.sent();
                     return [3 /*break*/, 3];
                 case 2:
-                    err_5 = _c.sent();
+                    err_4 = _c.sent();
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
@@ -1118,7 +918,7 @@ function DataTemplate(props) {
         });
     }); };
     var handleRemoveObjectImage = function () { return __awaiter(_this, void 0, void 0, function () {
-        var uploadObjectAttribute, objectAttribute, _loop_4, _i, _a, _b, eachKey, eachValue;
+        var uploadObjectAttribute, objectAttribute, _loop_3, _i, _a, _b, eachKey, eachValue;
         var _this = this;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -1136,7 +936,7 @@ function DataTemplate(props) {
                         uploadObjectAttribute[eachObject.id] = filterImageObjectData;
                         return null;
                     });
-                    _loop_4 = function (eachKey, eachValue) {
+                    _loop_3 = function (eachKey, eachValue) {
                         return __generator(this, function (_d) {
                             switch (_d.label) {
                                 case 0:
@@ -1164,7 +964,7 @@ function DataTemplate(props) {
                 case 1:
                     if (!(_i < _a.length)) return [3 /*break*/, 4];
                     _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
-                    return [5 /*yield**/, _loop_4(eachKey, eachValue)];
+                    return [5 /*yield**/, _loop_3(eachKey, eachValue)];
                 case 2:
                     _c.sent();
                     _c.label = 3;
@@ -1175,80 +975,11 @@ function DataTemplate(props) {
             }
         });
     }); };
-    //SECTION - Object
-    // TODO - Remove Root Folder of the Object List Image
-    var handleRemoveObjectListData = function () {
-        var clonedSelectedData = handleClonedDataAttribute(selectedData, props.model);
-        if (selectedObjectId) {
-            var index = clonedSelectedData[selectedObjectStructureId].findIndex(function (eachData) { return eachData.id === selectedObjectId; });
-            if (index !== -1) {
-                clonedSelectedData[selectedObjectStructureId].splice(index, 1);
-            }
-            setSelectedObjectId("");
-            setSelectedData(clonedSelectedData);
-            handlePopUpModal(false);
-        }
-    };
-    var handleSubmitObjectDataType = function () {
-        var _a, _b;
-        var clonedSelectedData = handleClonedDataAttribute(selectedData, props.model);
-        var filterObjectModel = props.model.find(function (eachModel) {
-            return eachModel.id === selectedObjectStructureId;
-        });
-        var clonedSelectedObjectData = handleClonedDataAttribute(selectedObjectData, (_a = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _a !== void 0 ? _a : [], true, true);
-        if (!clonedSelectedObjectData["id"]) {
-            clonedSelectedObjectData["id"] = (0, uuid_1.v4)();
-        }
-        if ((filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.type) === "listObject") {
-            if (selectedObjectId) {
-                var index = clonedSelectedData[selectedObjectStructureId].findIndex(function (eachData) { return eachData.id === selectedObjectId; });
-                if (index !== -1) {
-                    clonedSelectedData[selectedObjectStructureId][index] =
-                        clonedSelectedObjectData;
-                }
-                setSelectedObjectId("");
-                setSelectedData(clonedSelectedData);
-            }
-            else {
-                if (Array.isArray(clonedSelectedData[selectedObjectStructureId])) {
-                    clonedSelectedData[selectedObjectStructureId].push(clonedSelectedObjectData);
-                    setSelectedData(clonedSelectedData);
-                }
-                else {
-                    clonedSelectedData[selectedObjectStructureId] = [
-                        clonedSelectedObjectData,
-                    ];
-                    setSelectedData(clonedSelectedData);
-                }
-            }
-        }
-        else {
-            var clonedSelectedObjectData_1 = handleClonedDataAttribute(selectedObjectData, (_b = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _b !== void 0 ? _b : []);
-            clonedSelectedData[selectedObjectStructureId] = clonedSelectedObjectData_1;
-            setSelectedData(clonedSelectedData);
-        }
-        handlePopUpModal(false);
-    };
-    var handleSelectListObjectData = function (id, structureId) {
-        var filterObjectModel = props.model.find(function (eachModel) {
-            return eachModel.id === structureId;
-        });
-        if ((filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.type) === "listObject") {
-            var selectedObjectListData = selectedData[structureId].find(function (eachData) { return eachData.id === id; });
-            setSelectedObjectId(id);
-            setSelectedObjectStructureId(structureId);
-            setSelectedObjectData(selectedObjectListData);
-            setModalVisible(true);
-        }
-        else {
-            setSelectedObjectStructureId(structureId);
-            setSelectedObjectData(selectedData[structureId]);
-            setModalVisible(true);
-        }
-    };
-    //SECTION - CRUD
+    //=====================================================================================
+    //SECTION: Handle CRUD
+    //=====================================================================================
     var handleRemoveSelectedData = function () { return __awaiter(_this, void 0, void 0, function () {
-        var selectedId, res, err_6;
+        var selectedId, res, err_5;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -1256,7 +987,7 @@ function DataTemplate(props) {
                     selectedId = props.id;
                     if (!selectedId) return [3 /*break*/, 4];
                     setLoading(true);
-                    setModalVisible(true);
+                    setDeleteModal(true);
                     return [4 /*yield*/, handleRemoveImage()];
                 case 1:
                     _a.sent();
@@ -1274,8 +1005,8 @@ function DataTemplate(props) {
                     _a.label = 4;
                 case 4: return [3 /*break*/, 6];
                 case 5:
-                    err_6 = _a.sent();
-                    setModalVisible(false);
+                    err_5 = _a.sent();
+                    setDeleteModal(false);
                     setLoading(false);
                     return [3 /*break*/, 6];
                 case 6: return [2 /*return*/];
@@ -1283,7 +1014,7 @@ function DataTemplate(props) {
         });
     }); };
     var handleSubmit = function () { return __awaiter(_this, void 0, void 0, function () {
-        var selectedId, id, createSelectedData, res, err_7;
+        var selectedId, id, createSelectedData, res, err_6;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -1298,12 +1029,7 @@ function DataTemplate(props) {
                     createSelectedData = _b.sent();
                     res = "";
                     if (!(selectedId === "new")) return [3 /*break*/, 3];
-                    if (props.server === "mongoServer") {
-                        createSelectedData["_id"] = id;
-                    }
-                    else {
-                        createSelectedData["id"] = id;
-                    }
+                    createSelectedData[serverId] = id;
                     return [4 /*yield*/, writeServerQuery.call("create", {
                             data: createSelectedData,
                         })];
@@ -1332,7 +1058,7 @@ function DataTemplate(props) {
                     }
                     return [3 /*break*/, 7];
                 case 6:
-                    err_7 = _b.sent();
+                    err_6 = _b.sent();
                     setModalVisible(false);
                     setLoading(false);
                     return [3 /*break*/, 7];
@@ -1340,390 +1066,454 @@ function DataTemplate(props) {
             }
         });
     }); };
-    //SECTION - Utils
-    var handlePopUpModal = function (modalVisible) {
-        setModalVisible(modalVisible);
-        if (!modalVisible) {
-            setTimeout(function () {
-                setExcelModal(false);
-                setExportExcel(false);
-                setSelectedObjectStructureId("");
-                setSelectedObjectData({});
-                setStepCSVIndex(0);
-                setCSVFile(null);
-                setCSVFileData([]);
-                setListCSVMapAttribute({});
-                setListCSVObjAttribute({});
-                setCSVAPIAttribute([]);
-                setExportLink("");
-                setQueryList([]);
-            }, 500);
-        }
-    };
-    var handleNavigate = function (link) {
-        var _a, _b, _c;
-        var href = link !== null && link !== void 0 ? link : "".concat(props.localURLEndpoint, "?type=list&collection=").concat(props.collectionId);
-        if ((_a = props.lib) === null || _a === void 0 ? void 0 : _a.navigateNext) {
-            props.lib.navigateNext.push(href);
-        }
-        else if ((_b = props.lib) === null || _b === void 0 ? void 0 : _b.navigate) {
-            (_c = props.lib) === null || _c === void 0 ? void 0 : _c.navigate(href);
-        }
-        else if (window) {
-            window.location.replace(href);
-        }
-    };
-    var handleClearDataByFilter = function () {
-        setData([]);
-        setPageIndex(0);
-        setTableLoading(true);
-    };
-    var handleNameSearch = function (e) {
-        setFilterSearch(e.target.value);
-        handleClearDataByFilter();
-        if (typingTimeout.current) {
-            clearTimeout(typingTimeout.current);
-            typingTimeout.current = null;
-        }
-        typingTimeout.current = setTimeout(function () {
-            setFilterSearchParams(e.target.value);
-        }, 500);
-    };
-    var renderTableHeader = function () {
-        var tableHeader = [];
-        props.model.map(function (eachAttribute) {
-            if (eachAttribute.id === "baseUpdatedAt" ||
-                eachAttribute.type === "listObject" ||
-                eachAttribute.hide) {
+    var handleRetrieveSelectedData = function (responseData) { return __awaiter(_this, void 0, void 0, function () {
+        var dummyRespData, dummyReferenceModelSchema, newRespData, _a;
+        var _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    if (!responseData.data) return [3 /*break*/, 4];
+                    dummyRespData = JSON.parse(JSON.stringify(responseData.data), utils_2.jsonReviver);
+                    dummyReferenceModelSchema = JSON.parse(JSON.stringify(referenceModelSchema));
+                    if (!(props.type === "read")) return [3 /*break*/, 2];
+                    return [4 /*yield*/, (0, utils_2.handleRetrieveDeepModel)(dummyRespData, (_b = props.model) !== null && _b !== void 0 ? _b : [], dbModule, props.server, props.dbEndpoint, props.schemaEndpoint, (_c = props.imageEndpoint) !== null && _c !== void 0 ? _c : "", (_d = props.id) !== null && _d !== void 0 ? _d : "", dummyReferenceModelSchema, setReferenceSchema)];
+                case 1:
+                    _a = _e.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = dummyRespData;
+                    _e.label = 3;
+                case 3:
+                    newRespData = _a;
+                    setSelectedData(newRespData);
+                    handleRetrieveReferenceOptions(newRespData);
+                    _e.label = 4;
+                case 4:
+                    setModalVisible(false);
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClonedDataAttribute = function (selectedData, model, force, isRemainId) {
+        var defaultValue = selectedData;
+        var clonedSelectedData = JSON.parse(JSON.stringify(selectedData));
+        model.map(function (eachAttribute) {
+            var _a, _b;
+            if (eachAttribute.id === "_id" || eachAttribute.id === "id") {
                 return null;
             }
-            tableHeader.push({
-                key: eachAttribute.id,
-                title: eachAttribute.name,
-            });
+            switch (eachAttribute.type) {
+                case "date":
+                    if (defaultValue[eachAttribute.id]) {
+                        clonedSelectedData[eachAttribute.id] = (0, moment_1.default)(defaultValue[eachAttribute.id]).toDate();
+                    }
+                    break;
+                case "boolean":
+                    //INFO : Force is only called during submission, some casting may affect UI
+                    if (force) {
+                        if (defaultValue[eachAttribute.id] === "true") {
+                            clonedSelectedData[eachAttribute.id] = true;
+                        }
+                        else if (defaultValue[eachAttribute.id] === "false") {
+                            clonedSelectedData[eachAttribute.id] = false;
+                        }
+                    }
+                    break;
+                case "listObject":
+                    clonedSelectedData[eachAttribute.id] =
+                        (_a = defaultValue[eachAttribute.id]) !== null && _a !== void 0 ? _a : [];
+                    break;
+                case "object":
+                    if (force)
+                        clonedSelectedData[eachAttribute.id] =
+                            (_b = defaultValue[eachAttribute.id]) !== null && _b !== void 0 ? _b : {};
+                    else
+                        clonedSelectedData[eachAttribute.id] =
+                            defaultValue[eachAttribute.id];
+                    break;
+                case "image":
+                case "file":
+                    clonedSelectedData[eachAttribute.id] = defaultValue[eachAttribute.id];
+                    break;
+                case "number":
+                    if (defaultValue[eachAttribute.id]) {
+                        clonedSelectedData[eachAttribute.id] = Number(defaultValue[eachAttribute.id]);
+                    }
+                    break;
+            }
             return null;
         });
-        tableHeader.push({
-            key: "update",
-            title: "Update",
-        });
-        return tableHeader;
+        if (!isRemainId) {
+            delete clonedSelectedData["id"];
+            delete clonedSelectedData["_id"];
+        }
+        return clonedSelectedData;
     };
-    var renderCursor = function () {
-        if (props.server === "mongoServer") {
-            return pageIndex === 0 ? undefined : pageIndex * limit;
+    var handleOnChangeData = function () {
+        var _a;
+        if (modalVisible && selectedObjectStructureId) {
+            var filterObjectModel = props.model.find(function (eachModel) {
+                return eachModel.id === selectedObjectStructureId;
+            });
+            return {
+                data: selectedObjectData,
+                model: (_a = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _a !== void 0 ? _a : [],
+            };
         }
         else {
-            return lastCursor ? undefined : lastCursor;
+            return {
+                data: selectedData,
+                model: props.model,
+            };
         }
     };
-    var renderObjectTags = function (id) {
-        return Object.keys(selectedData[id]).map(function (eachKeys) {
-            return (react_1.default.createElement("div", { key: eachKeys, className: "bg-primary-600 text-white rounded m-0.5" },
-                react_1.default.createElement("p", { className: "text-xs px-2 py-1 text-wrap" }, eachKeys)));
-        });
+    var handleUpdateChangeData = function (data) {
+        if (modalVisible && selectedObjectStructureId) {
+            setSelectedObjectData(data);
+        }
+        else {
+            setSelectedData(data);
+        }
     };
-    var renderDataTemplateForm = function (data, model, formInputRef, isObject, isObjectList) {
-        var inputList = [];
-        //INFO : filteredModel is to secure the formInputRef[index] will not have any issue
-        var filteredModel = model.filter(function (eachAttribute) {
-            //INFO - Default Model Contain Id While Object Type Don't have
-            return eachAttribute.id !== "_id" && eachAttribute.id !== "id";
-        });
-        filteredModel.map(function (eachAttribute, index) {
-            //INFO - Default Model Contain Id While Object Type Don't have
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-            var clonedSelectedData = handleClonedDataAttribute(data, model);
-            var clonedReferenceOptions = JSON.parse(JSON.stringify(referenceOptions));
-            var clonedReferenceSearchText = JSON.parse(JSON.stringify(referenceSearchText));
-            var label = eachAttribute.name + (!eachAttribute.optional ? " (*)" : "");
-            var disabled = props.type === "read"
-                ? true
-                : props.type === "update" && props.id === "new"
-                    ? false
-                    : eachAttribute.disabled;
-            switch (eachAttribute.type) {
-                case "address":
-                    inputList.push(react_1.default.createElement(address_1.Address, { id: eachAttribute.id, label: label, value: (_a = clonedSelectedData[eachAttribute.id]) !== null && _a !== void 0 ? _a : {
-                            lat: 0,
-                            lng: 0,
-                            name: "",
-                        }, onChange: function (address) {
-                            handleOnChangeAddress(eachAttribute.id, address);
-                        }, ref: eachAttribute.optional ? null : formInputRef[index], disabled: disabled }));
-                    break;
-                case "object":
-                    var objectValue = Object.values((_b = clonedSelectedData[eachAttribute.id]) !== null && _b !== void 0 ? _b : {});
-                    inputList.push(react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700" }, label),
-                        react_1.default.createElement("div", { className: "block bg-white w-full border cursor-pointer border-gray-300 text-gray-300 text-left rounded-md mt-1 px-5 py-3 text-base focus:border-primary-500 focus:outline-none", onClick: function () {
-                                var _a;
-                                setSelectedObjectStructureId(eachAttribute.id);
-                                setSelectedObjectData((_a = clonedSelectedData[eachAttribute.id]) !== null && _a !== void 0 ? _a : {});
-                                handlePopUpModal(true);
-                            } }, objectValue.length > 0 ? (react_1.default.createElement("div", { className: "flex overflow-hidden flex-row" }, renderObjectTags(eachAttribute.id))) : ("Fill details"))));
-                    break;
-                case "list":
-                case "multipleList":
-                    var optionList_2 = eachAttribute.listSelection
-                        ? (_c = eachAttribute.listSelection) === null || _c === void 0 ? void 0 : _c.map(function (eachAttribute) {
-                            return {
-                                key: eachAttribute,
-                                label: eachAttribute,
-                            };
-                        })
-                        : [];
-                    if (clonedSelectedData[eachAttribute.id]) {
-                        var selectedList = clonedSelectedData[eachAttribute.id];
-                        var selectedKeys = Array.isArray(selectedList)
-                            ? selectedList
-                            : [selectedList];
-                        selectedKeys.forEach(function (key) {
-                            if (!optionList_2.some(function (item) { return item.key === key; })) {
-                                optionList_2.push({ key: key, label: key });
-                            }
-                        });
-                    }
-                    inputList.push(react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: (_d = clonedSelectedData[eachAttribute.id]) !== null && _d !== void 0 ? _d : (eachAttribute.type === "list" ? "" : []), label: label, options: optionList_2, onChange: function (value) {
-                            handleOnChangeSelect(eachAttribute.id, value);
-                        }, disabled: disabled }));
-                    break;
-                case "boolean":
-                    var value = (_e = clonedSelectedData[eachAttribute.id]) === null || _e === void 0 ? void 0 : _e.toString();
-                    inputList.push(react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: value, label: label, options: [
-                            {
-                                key: "true",
-                                label: "True",
-                            },
-                            {
-                                key: "false",
-                                label: "False",
-                            },
-                        ], onChange: function (value) {
-                            handleOnChangeSelect(eachAttribute.id, value);
-                        }, disabled: disabled }));
-                    break;
-                case "image":
-                case "file":
-                    var hasImageToken = typeof clonedSelectedData[eachAttribute.id] === "string";
-                    var url = void 0;
-                    if (hasImageToken) {
-                        url = isObject
-                            ? isObjectList
-                                ? (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName +
-                                    "%2F" +
-                                    props.id +
-                                    "%2F" +
-                                    selectedObjectId, selectedObjectStructureId, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id])
-                                : (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName + "%2F" + props.id, selectedObjectStructureId, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id])
-                            : (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName, props.id, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id]);
-                    }
-                    inputList.push(react_1.default.createElement(uploadInput_1.UploadInput, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, label: label, hidePreview: eachAttribute.type === "image" ? false : true, file: (_f = url !== null && url !== void 0 ? url : clonedSelectedData[eachAttribute.id]) !== null && _f !== void 0 ? _f : "", accept: eachAttribute.type === "image" ? ".png,.jpg,.jpe,.tiff" : ".pdf", fileDescription: eachAttribute.type === "image" ? undefined : "PDF up to 30MB", maxFileSize: props.maxFileSize, onChange: handleOnChangeFile, disabled: disabled }));
-                    break;
-                case "number":
-                    inputList.push(react_1.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], type: "number", value: (_g = clonedSelectedData[eachAttribute.id]) !== null && _g !== void 0 ? _g : "", placeholder: label, label: label, onChange: handleOnChangeText, disabled: disabled }));
-                    break;
-                case "reference":
-                case "listReference":
-                    var referenceLabel_1 = (_h = eachAttribute.referenceLabel) !== null && _h !== void 0 ? _h : "";
-                    inputList.push(react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
-                                dbModule: dbModule,
-                                dbType: props.server,
-                                dbCollection: (_j = eachAttribute.referenceSpaceId) !== null && _j !== void 0 ? _j : "",
-                                dbEndpoint: props.dbEndpoint,
-                            }, cond: {
-                                type: "list",
-                                query: clonedReferenceSearchText[eachAttribute.id]
-                                    ? [
-                                        {
-                                            type: "search",
-                                            searchIds: [referenceLabel_1],
-                                            value: clonedReferenceSearchText[eachAttribute.id],
-                                        },
-                                    ]
-                                    : undefined,
-                                limit: limit,
-                            }, onChangeData: function (data) {
-                                handleGetReferenceOptions(data, eachAttribute, referenceLabel_1, clonedSelectedData[eachAttribute.id]);
-                            } }),
-                        react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: (_k = clonedSelectedData[eachAttribute.id]) !== null && _k !== void 0 ? _k : (eachAttribute.type === "reference" ? "" : []), label: label, options: (_l = clonedReferenceOptions[eachAttribute.id]) !== null && _l !== void 0 ? _l : [], onChange: function (value) {
-                                handleOnChangeSelect(eachAttribute.id, value);
-                            }, onSearch: function (value) {
-                                handleSearchReferenceOptions(eachAttribute.id, value);
-                            }, disabled: disabled })));
-                    break;
-                case "string":
-                    inputList.push(react_1.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], type: "text", value: (_m = clonedSelectedData[eachAttribute.id]) !== null && _m !== void 0 ? _m : "", placeholder: label, label: label, onChange: handleOnChangeText, disabled: disabled }));
-                    break;
-                case "date":
-                    inputList.push(react_1.default.createElement(datePicker_1.InputDatePicker, { title: label, id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], onChange: handleOnChangeDate, value: clonedSelectedData[eachAttribute.id], disabled: disabled }));
-                    break;
-            }
-            return null;
-        });
-        return inputList.map(function (eachInput, index) {
-            return (react_1.default.createElement("div", { key: index, className: "col-span-4 sm:col-span-2" }, eachInput));
-        });
+    var handleOnChangeFile = function (e) {
+        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
+        var clonedData = handleClonedDataAttribute(data, model);
+        clonedData[e.target.id] =
+            e.target.files.length > 0 ? e.target.files[0] : undefined;
+        handleUpdateChangeData(clonedData);
     };
-    var renderTabContent = function (tabs, dataType, viewType) {
-        var _a, _b, _c, _d;
-        var selectedTabData = tabs.find(function (eachTab) {
-            if (eachTab.id === viewType) {
-                return eachTab;
-            }
-            else {
-                return null;
-            }
-        });
-        if (viewType === "general") {
-            if (dataType === "list") {
-                return (react_1.default.createElement(table_1.Table, { paginationType: props.server === "mongoServer" ? "page" : "cursor", data: data, size: size, limit: limit, cursor: cursor, loading: tableLoading, header: renderTableHeader(), pageIndex: pageIndex, onClickRow: function (id) {
-                        handleNavigate("".concat(props.localURLEndpoint, "?data=").concat(id, "&type=read&collection=").concat(props.collectionId, "&view=general"));
-                    }, linkType: props.linkType, custom: props.custom, newTabUrl: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: handlePagination, className: "mt-5" }));
-            }
-            else if (dataType === "read") {
-                return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(detailList_1.DetailList, { lib: {
-                            Dialog: (_a = props.lib) === null || _a === void 0 ? void 0 : _a.Dialog,
-                            Transition: (_b = props.lib) === null || _b === void 0 ? void 0 : _b.Transition,
-                        }, model: props.model, referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: "General Details", list: renderDetailListData() }),
-                    react_1.default.createElement("div", { className: "mt-8" }, renderListObject(dataType))));
-            }
-        }
-        else if (selectedTabData) {
-            if (selectedTabData.iframeSrc) {
-                return (react_1.default.createElement("iframe", { className: "w-full mt-5", style: { height: "70vh" }, src: (_c = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.iframeSrc) !== null && _c !== void 0 ? _c : "", title: (_d = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.id) !== null && _d !== void 0 ? _d : "" }));
-            }
-            else if (selectedTabData.renderComp) {
-                return react_1.default.createElement(react_1.default.Fragment, null, selectedTabData.renderComp());
-            }
-        }
-        return null;
+    var handleOnChangeAddress = function (id, address) {
+        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
+        var clonedData = handleClonedDataAttribute(data, model);
+        clonedData[id] = address;
+        handleUpdateChangeData(clonedData);
     };
-    var renderDetailListData = function () {
+    var handleOnChangeText = function (e) {
+        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
+        var clonedData = handleClonedDataAttribute(data, model);
+        clonedData[e.target.id] = e.target.value;
+        handleUpdateChangeData(clonedData);
+    };
+    var handleOnChangeSelect = function (id, value) {
+        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
+        var clonedData = handleClonedDataAttribute(data, model);
+        clonedData[id] = value;
+        handleUpdateChangeData(clonedData);
+    };
+    var handleOnChangeDate = function (id, value) {
+        var _a = handleOnChangeData(), data = _a.data, model = _a.model;
+        var clonedData = handleClonedDataAttribute(data, model);
+        clonedData[id] = value;
+        handleUpdateChangeData(clonedData);
+    };
+    //=====================================================================================
+    //SECTION: Handle CSV
+    //=====================================================================================
+    var handleOnChangeCSV = function (e) {
         var _a;
-        var detailList = [];
-        var _loop_5 = function (eachKey, eachValue) {
-            if (eachKey !== "id" &&
-                eachKey !== "_id" &&
-                eachKey !== "baseUpdatedAt") {
-                var filterModel = props.model.find(function (eachAttribute) {
-                    return eachAttribute.id === eachKey;
-                });
-                detailList.push({
-                    title: (_a = filterModel === null || filterModel === void 0 ? void 0 : filterModel.name) !== null && _a !== void 0 ? _a : "",
-                    text: eachValue,
-                });
-            }
-        };
-        for (var _i = 0, _b = Object.entries(selectedData); _i < _b.length; _i++) {
-            var _c = _b[_i], eachKey = _c[0], eachValue = _c[1];
-            _loop_5(eachKey, eachValue);
+        var file = e.target.files[0];
+        if (file) {
+            setCSVFile(file);
+            (_a = props.lib) === null || _a === void 0 ? void 0 : _a.papaParser.parse(file, {
+                header: true,
+                dynamicTyping: true,
+                complete: function (results) {
+                    if (results.data && results.data.length < 100)
+                        setCSVFileData(results.data);
+                    else
+                        setNotification({
+                            type: false,
+                            title: "Import Error",
+                            msg: "Data is more than 100 rows",
+                        });
+                },
+            });
+            setStepCSVIndex(1);
+        }
+        else {
+            setNotification({
+                type: false,
+                title: "Import Error",
+                msg: "No file is selected",
+            });
         }
-        return detailList;
     };
-    var renderListObject = function (type) {
-        var isListObject = props.model.filter(function (eachAttribute) { return eachAttribute.type === "listObject"; });
-        if (isListObject.length > 0) {
-            var list_2 = {};
-            var clonedSelectedData_1 = handleClonedDataAttribute(selectedData, props.model);
-            return isListObject.map(function (eachListObject) {
-                var _a;
-                if (clonedSelectedData_1[eachListObject.id]) {
-                    clonedSelectedData_1[eachListObject.id].map(function (eachObject) {
-                        var eachNewList = {
-                            id: "",
-                            title: "",
-                        };
-                        var isTitle = true;
-                        var _loop_6 = function (eachKey, eachValue) {
-                            if (eachListObject.objectData) {
-                                var model = eachListObject.objectData.find(function (eachAttribute) {
-                                    return eachAttribute.id === eachKey;
+    var handleStepCSV = function () { return __awaiter(_this, void 0, void 0, function () {
+        var csvList_1, _loop_4, _i, _a, _b, eachKey, eachValue, valid_1, errorValue_1, response, err_7;
+        var _c, _d, _e, _f, _g;
+        return __generator(this, function (_h) {
+            switch (_h.label) {
+                case 0:
+                    _h.trys.push([0, 6, , 7]);
+                    if (!(stepCSVIndex === 0)) return [3 /*break*/, 1];
+                    if (csvFileData.length > 0 && csvFile)
+                        setStepCSVIndex(stepCSVIndex + 1);
+                    else
+                        throw new Error("Please upload a .CSV file");
+                    return [3 /*break*/, 5];
+                case 1:
+                    if (!(stepCSVIndex === 1)) return [3 /*break*/, 3];
+                    csvList_1 = [];
+                    _loop_4 = function (eachKey, eachValue) {
+                        if (eachKey && eachValue && typeof eachValue === "string") {
+                            var selectedModel = props.model.find(function (eachModel) {
+                                return eachModel.id === eachValue;
+                            });
+                            if ((selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "object" ||
+                                (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "listObject") {
+                                var selectedObjectModel = (_c = selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.objectData) === null || _c === void 0 ? void 0 : _c.find(function (eachModel) {
+                                    return eachModel.id === eachValue;
+                                });
+                                csvList_1.push({
+                                    id: (_d = listCSVObjAttribute[eachKey]) !== null && _d !== void 0 ? _d : "",
+                                    ori: Number(eachKey),
+                                    type: "object",
+                                    objectId: eachValue,
+                                    objectValueType: (_e = selectedObjectModel === null || selectedObjectModel === void 0 ? void 0 : selectedObjectModel.type) !== null && _e !== void 0 ? _e : "string",
+                                });
+                            }
+                            else if ((selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "image") {
+                                csvList_1.push({
+                                    id: eachValue !== null && eachValue !== void 0 ? eachValue : "",
+                                    ori: Number(eachKey),
+                                    type: "image",
+                                    imageCollectionName: selectedModel.imageCollectionName,
+                                    imageFileName: selectedModel.imageFileName,
+                                    imageEndpoint: selectedModel.imageEndpoint,
+                                });
+                            }
+                            else {
+                                csvList_1.push({
+                                    id: eachValue !== null && eachValue !== void 0 ? eachValue : "",
+                                    ori: Number(eachKey),
+                                    type: (_f = selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) !== null && _f !== void 0 ? _f : "string",
                                 });
-                                switch (model === null || model === void 0 ? void 0 : model.type) {
-                                    case "string":
-                                        isTitle
-                                            ? (eachNewList["title"] =
-                                                typeof eachValue === "string" ? eachValue : "")
-                                            : (eachNewList[eachKey] = model.name + " : " + eachValue);
-                                        isTitle = false;
-                                        break;
-                                    case "image":
-                                        var url = void 0;
-                                        if (typeof eachValue === "string") {
-                                            url = (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, model.imageCollectionName +
-                                                "%2F" +
-                                                props.id +
-                                                "%2F" +
-                                                eachObject.id, eachListObject.id, model.imageFileName, eachValue);
-                                        }
-                                        else if (eachValue instanceof File) {
-                                            url = URL.createObjectURL(eachValue);
-                                        }
-                                        eachNewList[eachKey] = (react_1.default.createElement("img", { src: url, alt: "", className: "w-10 h-10 object-contain" }));
-                                        break;
-                                    case "date":
-                                        eachNewList[eachKey] =
-                                            (model === null || model === void 0 ? void 0 : model.name) +
-                                                " : " +
-                                                (0, utils_1.renderEachRowDataBasedOnDataType)(eachValue);
-                                        break;
-                                    case "address":
-                                    case "object":
-                                    case "reference":
-                                        break;
-                                    default:
-                                        if (eachKey === "id" && typeof eachValue === "string") {
-                                            eachNewList[eachKey] = eachValue;
-                                        }
-                                        else {
-                                            eachNewList[eachKey] = (model === null || model === void 0 ? void 0 : model.name) + " : " + eachValue;
-                                        }
-                                        break;
-                                }
                             }
-                        };
-                        for (var _i = 0, _a = Object.entries(eachObject); _i < _a.length; _i++) {
-                            var _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
-                            _loop_6(eachKey, eachValue);
-                        }
-                        if (list_2[eachListObject.id]) {
-                            list_2[eachListObject.id].push(eachNewList);
-                        }
-                        else {
-                            list_2[eachListObject.id] = [eachNewList];
                         }
-                        return null;
+                    };
+                    for (_i = 0, _a = Object.entries(listCSVMapAttribute); _i < _a.length; _i++) {
+                        _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
+                        _loop_4(eachKey, eachValue);
+                    }
+                    valid_1 = true;
+                    errorValue_1 = "";
+                    return [4 /*yield*/, Promise.all(props.model.map(function (eachEachModel) {
+                            if (eachEachModel.id === "_id" || eachEachModel.id === "id") {
+                                return "";
+                            }
+                            if (!eachEachModel.optional) {
+                                // INFO : Validate and compare the modal with csv list and return true if > 1 consist within
+                                var innearValidation = csvList_1.some(function (eachCsvList) {
+                                    if (eachCsvList.type === "object" ||
+                                        eachCsvList.type === "listObject") {
+                                        return eachEachModel.id === eachCsvList.objectId;
+                                    }
+                                    else {
+                                        return eachEachModel.id === eachCsvList.id;
+                                    }
+                                });
+                                if (!innearValidation) {
+                                    errorValue_1 = errorValue_1 + "<" + eachEachModel.id + ">";
+                                    valid_1 = false;
+                                }
+                            }
+                            return null;
+                        }))];
+                case 2:
+                    _h.sent();
+                    if (!valid_1) {
+                        throw new Error("Please select how you want to map your data to ".concat(errorValue_1));
+                    }
+                    else {
+                        setCSVAPIAttribute(csvList_1);
+                        setStepCSVIndex(stepCSVIndex + 1);
+                    }
+                    return [3 /*break*/, 5];
+                case 3:
+                    if (!(stepCSVIndex === 2)) return [3 /*break*/, 5];
+                    // INFO - Call Space Excel API
+                    setLoading(true);
+                    return [4 /*yield*/, ((_g = props.lib) === null || _g === void 0 ? void 0 : _g.axios.post("".concat(props.schemaEndpoint, "/csv/import"), {
+                            data: {
+                                parsedDataStructure: csvAPIAttribute,
+                                spaceId: props.collectionId,
+                            },
+                            file: csvFile,
+                        }, {
+                            headers: {
+                                "Content-Type": "multipart/form-data",
+                            },
+                        }))];
+                case 4:
+                    response = _h.sent();
+                    setLoading(false);
+                    if (response.data) {
+                        setNotification({
+                            type: true,
+                            title: "Data has been imported successfully",
+                            msg: response.data.msg,
+                        });
+                        handlePopUpModal(false);
+                        setTimeout(function () {
+                            window.location.reload();
+                        }, 1500);
+                    }
+                    _h.label = 5;
+                case 5: return [3 /*break*/, 7];
+                case 6:
+                    err_7 = _h.sent();
+                    setNotification({
+                        type: false,
+                        title: "Import Error",
+                        msg: err_7.message,
                     });
-                }
-                return (react_1.default.createElement(react_1.default.Fragment, null, !list_2[eachListObject.id] && type === "update" ? (react_1.default.createElement("button", { type: "button", className: "mt-5 relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center", onClick: function () {
-                        setSelectedObjectStructureId(eachListObject.id);
-                        handlePopUpModal(true);
-                    } },
-                    react_1.default.createElement("svg", { className: "mx-auto h-12 w-12 text-gray-400", stroke: "currentColor", fill: "none", viewBox: "0 0 48 48", "aria-hidden": "true" },
-                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 14v20c0 4.418 7.163 8 16 8 1.381 0 2.721-.087 4-.252M8 14c0 4.418 7.163 8 16 8s16-3.582 16-8M8 14c0-4.418 7.163-8 16-8s16 3.582 16 8m0 0v14m0-4c0 4.418-7.163 8-16 8S8 28.418 8 24m32 10v6m0 0v6m0-6h6m-6 0h-6" })),
-                    react_1.default.createElement("span", { className: "mt-2 block text-sm font-medium text-gray-900" },
-                        "Create a new ", "".concat(eachListObject.name.toLocaleLowerCase())))) : (react_1.default.createElement(react_1.default.Fragment, null, list_2[eachListObject.id] && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", { className: "flex justify-between mt-5" },
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement("h3", { className: "text-md leading-6 font-medium text-gray-900 sm:text-lg" }, eachListObject.name),
-                            react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
-                        type === "update" && (react_1.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_1.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: function () {
-                                setSelectedObjectStructureId(eachListObject.id);
-                                handlePopUpModal(true);
-                            } }))),
-                    react_1.default.createElement(list_1.List, { className: "mt-5", list: (_a = list_2[eachListObject.id]) !== null && _a !== void 0 ? _a : [], loading: false, onClickRow: function (id) {
-                            handleSelectListObjectData(id, eachListObject.id);
-                        } })))))));
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleExportCSVData = function () { return __awaiter(_this, void 0, void 0, function () {
+        var res, err_8;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    _d.trys.push([0, 2, , 3]);
+                    setLoading(true);
+                    return [4 /*yield*/, ((_b = (_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios) === null || _b === void 0 ? void 0 : _b.post("".concat(props.schemaEndpoint, "/csv/export"), {
+                            data: { spaceId: props.collectionId, query: queryList },
+                        }, {
+                            headers: {
+                                "Content-Type": "multipart/form-data",
+                            },
+                        }))];
+                case 1:
+                    res = _d.sent();
+                    setExportLink((_c = res === null || res === void 0 ? void 0 : res.data.link) !== null && _c !== void 0 ? _c : "");
+                    setNotification({
+                        type: true,
+                        title: "Export Successfully",
+                        msg: "A download link had been generated.",
+                    });
+                    setLoading(false);
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_8 = _d.sent();
+                    setLoading(false);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleQueryModal = function () {
+        setQueryModal(!queryModal);
+        setQueryInput({
+            queryId: "",
+            type: "=",
+            value: "",
+        });
+        setExportReferenceList([]);
+        setExportReferenceSearch("");
+    };
+    var handleCloneQueryList = function () {
+        var _a;
+        var clonedQueryInput = (_a = JSON.parse(JSON.stringify(queryList))) !== null && _a !== void 0 ? _a : [];
+        clonedQueryInput.map(function (eachQuery) {
+            var tempValue = eachQuery.value;
+            if (tempValue === "false" || tempValue === "true") {
+                tempValue = tempValue === "false" ? false : true;
+            }
+            else if (!isNaN(tempValue)) {
+                tempValue = Number(tempValue);
+            }
+            eachQuery.value = tempValue;
+            return null;
+        });
+        return clonedQueryInput;
+    };
+    var handlePushQueryList = function () {
+        var tempQueryList = handleCloneQueryList();
+        if (!tempQueryList.some(function (eachQuery) { return eachQuery.queryId === queryInput.queryId; })) {
+            var tempValue = queryInput.value;
+            if (tempValue === "false" || tempValue === "true") {
+                tempValue = tempValue === "false" ? false : true;
+            }
+            else if (!isNaN(tempValue)) {
+                tempValue = Number(tempValue);
+            }
+            queryInput.value = tempValue;
+            tempQueryList.push(queryInput);
+            setQueryModal(!queryModal);
+            setQueryList(tempQueryList);
+            setQueryInput({
+                queryId: "",
+                type: "=",
+                value: "",
             });
         }
         else {
-            return react_1.default.createElement(react_1.default.Fragment, null);
+            // NOTIFICATION - CONISTS
+            setNotification({
+                type: false,
+                title: "Export Failed",
+                msg: "Please check again your query attribute.",
+            });
+        }
+    };
+    var handleViewQuery = function (index) {
+        handleQueryModal();
+        setQueryInput(queryList[index]);
+    };
+    var handleSortQuery = function (index, sortType) {
+        var _a;
+        var sortList = JSON.parse(JSON.stringify(queryList));
+        var ascIndex = sortType === "up" ? index - 1 : index + 1;
+        _a = [
+            sortList[ascIndex],
+            sortList[index],
+        ], sortList[index] = _a[0], sortList[ascIndex] = _a[1];
+        setQueryList(sortList);
+    };
+    //=====================================================================================
+    //SECTION: Handle Utils
+    //=====================================================================================
+    var handlePopUpModal = function (modalVisible) {
+        setModalVisible(modalVisible);
+        if (!modalVisible) {
+            setTimeout(function () {
+                setExcelModal(false);
+                setExportExcel(false);
+                setSelectedObjectId("");
+                setSelectedObjectStructureId("");
+                setSelectedObjectData({});
+                setStepCSVIndex(0);
+                setCSVFile(null);
+                setCSVFileData([]);
+                setListCSVMapAttribute({});
+                setListCSVObjAttribute({});
+                setCSVAPIAttribute([]);
+                setExportLink("");
+                setQueryList([]);
+            }, 500);
+        }
+    };
+    var handleNavigate = function (link) {
+        var _a, _b, _c;
+        var href = link !== null && link !== void 0 ? link : "".concat(props.localURLEndpoint, "?type=list&collection=").concat(props.collectionId);
+        if ((_a = props.lib) === null || _a === void 0 ? void 0 : _a.navigateNext) {
+            props.lib.navigateNext.push(href);
+        }
+        else if ((_b = props.lib) === null || _b === void 0 ? void 0 : _b.navigate) {
+            (_c = props.lib) === null || _c === void 0 ? void 0 : _c.navigate(href);
+        }
+        else if (window) {
+            window.location.replace(href);
         }
     };
-    //SECTION - CSV
+    //=====================================================================================
+    //SECTION: Render CSV
+    //=====================================================================================
     var renderExcelReviewData = function () {
         var header = Object.keys(csvFileData[0]);
         var dataList = [];
@@ -1786,6 +1576,7 @@ function DataTemplate(props) {
         }
     };
     var renderQueryIdOptions = function () {
+        var queryIdOptions = [];
         props.model.map(function (data) {
             if (data.id !== "_id" && data.id !== "id") {
                 queryIdOptions.push({
@@ -1883,47 +1674,319 @@ function DataTemplate(props) {
                         handleSortQuery(index, upData_1 ? "up" : "down");
                     } }, upData_1 ? (react_1.default.createElement(outline_1.ArrowUpIcon, { className: "h-5 w-5 block text-primary-600" })) : (react_1.default.createElement(outline_1.ArrowDownIcon, { className: "h-5 w-5 block text-primary-600" }))));
             }
-            queryStructureView.push({
-                key: index,
-                name: data.queryId,
-                value: data.value,
-                sort: sortComponent,
-                view: (react_1.default.createElement("div", { className: "cursor-pointer ml-2", onClick: function () {
-                        handleViewQuery(index);
-                    } },
-                    react_1.default.createElement(outline_1.EyeIcon, { className: "h-5 w-5 block text-primary-600" }))),
-                del: (react_1.default.createElement("div", { className: "cursor-pointer ml-2", onClick: function () {
-                        var temp = JSON.parse(JSON.stringify(queryList));
-                        temp.splice(index, 1);
-                        setQueryList(temp);
-                    } },
-                    react_1.default.createElement(outline_1.TrashIcon, { className: "h-5 w-5 block text-primary-600" }))),
-            });
-            return "";
+            queryStructureView.push({
+                key: index,
+                name: data.queryId,
+                value: data.value,
+                sort: sortComponent,
+                view: (react_1.default.createElement("div", { className: "cursor-pointer ml-2", onClick: function () {
+                        handleViewQuery(index);
+                    } },
+                    react_1.default.createElement(outline_1.EyeIcon, { className: "h-5 w-5 block text-primary-600" }))),
+                del: (react_1.default.createElement("div", { className: "cursor-pointer ml-2", onClick: function () {
+                        var temp = JSON.parse(JSON.stringify(queryList));
+                        temp.splice(index, 1);
+                        setQueryList(temp);
+                    } },
+                    react_1.default.createElement(outline_1.TrashIcon, { className: "h-5 w-5 block text-primary-600" }))),
+            });
+            return "";
+        });
+        return queryStructureView;
+    };
+    //=====================================================================================
+    //SECTION: Render CRUD
+    //=====================================================================================
+    var renderTableHeader = function () {
+        var tableHeader = [];
+        props.model.map(function (eachAttribute) {
+            if (eachAttribute.id === "baseUpdatedAt" ||
+                eachAttribute.type === "listObject" ||
+                eachAttribute.hide) {
+                return null;
+            }
+            tableHeader.push({
+                key: eachAttribute.id,
+                title: eachAttribute.name,
+            });
+            return null;
+        });
+        tableHeader.push({
+            key: "update",
+            title: "Update",
+        });
+        return tableHeader;
+    };
+    var renderCursor = function () {
+        if (props.server === "mongoServer") {
+            return pageIndex === 0 ? undefined : pageIndex * limit;
+        }
+        else {
+            return lastCursor ? undefined : lastCursor;
+        }
+    };
+    var renderObjectTags = function (id) {
+        return Object.keys(selectedData[id]).map(function (eachKeys) {
+            return (react_1.default.createElement("div", { key: eachKeys, className: "bg-primary-600 text-white rounded m-0.5" },
+                react_1.default.createElement("p", { className: "text-xs px-2 py-1 text-wrap" }, eachKeys)));
+        });
+    };
+    var renderDataTemplateForm = function (data, model, formInputRef, isObject, isObjectList) {
+        var inputList = [];
+        //INFO : filteredModel is to secure the formInputRef[index] will not have any issue
+        var filteredModel = model.filter(function (eachAttribute) {
+            //INFO - Default Model Contain Id While Object Type Don't have
+            return eachAttribute.id !== "_id" && eachAttribute.id !== "id";
+        });
+        filteredModel.forEach(function (eachAttribute, index) {
+            //INFO - Default Model Contain Id While Object Type Don't have
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var clonedSelectedData = handleClonedDataAttribute(data, model);
+            var label = eachAttribute.name + (!eachAttribute.optional ? " (*)" : "");
+            var disabled = props.type === "read"
+                ? true
+                : props.type === "update" && props.id === "new"
+                    ? false
+                    : eachAttribute.disabled;
+            switch (eachAttribute.type) {
+                case "address":
+                    inputList.push(react_1.default.createElement(address_1.Address, { id: eachAttribute.id, label: label, value: (_a = clonedSelectedData[eachAttribute.id]) !== null && _a !== void 0 ? _a : {
+                            lat: 0,
+                            lng: 0,
+                            name: "",
+                        }, onChange: function (address) {
+                            handleOnChangeAddress(eachAttribute.id, address);
+                        }, ref: eachAttribute.optional ? null : formInputRef[index], disabled: disabled }));
+                    break;
+                case "object":
+                    var objectValue = Object.values((_b = clonedSelectedData[eachAttribute.id]) !== null && _b !== void 0 ? _b : {});
+                    inputList.push(react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700" }, label),
+                        react_1.default.createElement("div", { className: "block bg-white w-full border cursor-pointer border-gray-300 text-gray-300 text-left rounded-md mt-1 px-5 py-3 text-base focus:border-primary-500 focus:outline-none", onClick: function () {
+                                var _a;
+                                setSelectedObjectStructureId(eachAttribute.id);
+                                setSelectedObjectData((_a = clonedSelectedData[eachAttribute.id]) !== null && _a !== void 0 ? _a : {});
+                                handlePopUpModal(true);
+                            } }, objectValue.length > 0 ? (react_1.default.createElement("div", { className: "flex overflow-hidden flex-row" }, renderObjectTags(eachAttribute.id))) : ("Fill details"))));
+                    break;
+                case "list":
+                case "multipleList":
+                    var optionList_2 = eachAttribute.listSelection
+                        ? (_c = eachAttribute.listSelection) === null || _c === void 0 ? void 0 : _c.map(function (eachAttribute) {
+                            return {
+                                key: eachAttribute,
+                                label: eachAttribute,
+                            };
+                        })
+                        : [];
+                    if (clonedSelectedData[eachAttribute.id]) {
+                        var selectedList = clonedSelectedData[eachAttribute.id];
+                        var selectedKeys = Array.isArray(selectedList)
+                            ? selectedList
+                            : [selectedList];
+                        selectedKeys.forEach(function (key) {
+                            if (!optionList_2.some(function (item) { return item.key === key; })) {
+                                optionList_2.push({ key: key, label: key });
+                            }
+                        });
+                    }
+                    inputList.push(react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: (_d = clonedSelectedData[eachAttribute.id]) !== null && _d !== void 0 ? _d : (eachAttribute.type === "list" ? "" : []), label: label, options: optionList_2, onChange: function (value) {
+                            handleOnChangeSelect(eachAttribute.id, value);
+                        }, disabled: disabled }));
+                    break;
+                case "boolean":
+                    var value = (_e = clonedSelectedData[eachAttribute.id]) === null || _e === void 0 ? void 0 : _e.toString();
+                    inputList.push(react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: value, label: label, options: [
+                            {
+                                key: "true",
+                                label: "True",
+                            },
+                            {
+                                key: "false",
+                                label: "False",
+                            },
+                        ], onChange: function (value) {
+                            handleOnChangeSelect(eachAttribute.id, value);
+                        }, disabled: disabled }));
+                    break;
+                case "image":
+                case "file":
+                    var hasImageToken = typeof clonedSelectedData[eachAttribute.id] === "string";
+                    var url = void 0;
+                    if (hasImageToken) {
+                        url = isObject
+                            ? isObjectList
+                                ? (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName +
+                                    "%2F" +
+                                    props.id +
+                                    "%2F" +
+                                    selectedObjectId, selectedObjectStructureId, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id])
+                                : (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName + "%2F" + props.id, selectedObjectStructureId, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id])
+                            : (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, eachAttribute.imageCollectionName, props.id, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id]);
+                    }
+                    inputList.push(react_1.default.createElement(uploadInput_1.UploadInput, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, label: label, hidePreview: eachAttribute.type === "image" ? false : true, file: (_f = url !== null && url !== void 0 ? url : clonedSelectedData[eachAttribute.id]) !== null && _f !== void 0 ? _f : "", accept: eachAttribute.type === "image" ? ".png,.jpg,.jpe,.tiff" : ".pdf", fileDescription: eachAttribute.type === "image" ? undefined : "PDF up to 30MB", maxFileSize: props.maxFileSize, onChange: handleOnChangeFile, disabled: disabled }));
+                    break;
+                case "number":
+                    inputList.push(react_1.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], type: "number", value: (_g = clonedSelectedData[eachAttribute.id]) !== null && _g !== void 0 ? _g : "", placeholder: label, label: label, onChange: handleOnChangeText, disabled: disabled }));
+                    break;
+                case "reference":
+                case "listReference":
+                    inputList.push(react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: (_h = clonedSelectedData[eachAttribute.id]) !== null && _h !== void 0 ? _h : (eachAttribute.type === "reference" ? "" : []), label: label, options: isObject
+                                ? referencesOptions[selectedObjectStructureId + "." + eachAttribute.id]
+                                : (_j = referencesOptions[eachAttribute.id]) !== null && _j !== void 0 ? _j : [], onChange: function (value) {
+                                handleOnChangeSelect(eachAttribute.id, value);
+                            }, additional: referenceLoading ? exports.loadingSelect : exports.additionalSelect, onSearch: function (value) { return __awaiter(_this, void 0, void 0, function () {
+                                var clonedReferencesOptions, filterObjectModel;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            setReferenceLoading(true);
+                                            clonedReferencesOptions = JSON.parse(JSON.stringify(referencesOptions));
+                                            filterObjectModel = props.model.find(function (eachModel) {
+                                                return eachModel.id === selectedObjectStructureId;
+                                            });
+                                            return [4 /*yield*/, handleRetrieveObjectReferenceOptions(eachAttribute, clonedReferencesOptions, clonedSelectedData, selectedObjectStructureId, (filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.type) === "listObject", value)];
+                                        case 1:
+                                            _a.sent();
+                                            setReferencesOptions(clonedReferencesOptions);
+                                            setReferenceLoading(false);
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); }, disabled: disabled })));
+                    break;
+                case "string":
+                    inputList.push(react_1.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], type: "text", value: (_k = clonedSelectedData[eachAttribute.id]) !== null && _k !== void 0 ? _k : "", placeholder: label, label: label, onChange: handleOnChangeText, disabled: disabled }));
+                    break;
+                case "date":
+                    inputList.push(react_1.default.createElement(datePicker_1.InputDatePicker, { title: label, id: eachAttribute.id, ref: eachAttribute.optional ? null : formInputRef[index], onChange: handleOnChangeDate, value: clonedSelectedData[eachAttribute.id], disabled: disabled }));
+                    break;
+            }
+        });
+        return inputList.map(function (eachInput, index) {
+            return (react_1.default.createElement("div", { key: index, className: "col-span-4 sm:col-span-2" }, eachInput));
         });
-        return queryStructureView;
     };
-    var renderNotification = function (location) {
+    var renderDetailListData = function () {
         var _a;
-        if (notification) {
-            var correctIcon = (react_1.default.createElement(outline_1.CheckCircleIcon, { className: "w-10 h-10 text-primary-600" }));
-            var incorrectIcon = (react_1.default.createElement(outline_1.XCircleIcon, { className: "w-10 h-10 text-primary-600" }));
-            if (location === "modal" && !modalVisible)
-                return null;
-            if (location === "root" && modalVisible)
-                return null;
-            return (react_1.default.createElement(notification_1.Notification, { icon: notification.type ? correctIcon : incorrectIcon, notificationAttribute: {
-                    title: notification.title,
-                    desc: notification.msg,
-                    visible: true,
-                }, lib: {
-                    Transition: (_a = props.lib) === null || _a === void 0 ? void 0 : _a.Transition,
-                }, onClose: function () {
-                    setNotification(null);
-                    return "";
-                } }));
+        var detailList = [];
+        var _loop_5 = function (eachKey, eachValue) {
+            if (eachKey !== "id" &&
+                eachKey !== "_id" &&
+                eachKey !== "baseUpdatedAt") {
+                var filterModel = props.model.find(function (eachAttribute) {
+                    return eachAttribute.id === eachKey;
+                });
+                detailList.push({
+                    title: (_a = filterModel === null || filterModel === void 0 ? void 0 : filterModel.name) !== null && _a !== void 0 ? _a : "",
+                    text: eachValue,
+                });
+            }
+        };
+        for (var _i = 0, _b = Object.entries(selectedData); _i < _b.length; _i++) {
+            var _c = _b[_i], eachKey = _c[0], eachValue = _c[1];
+            _loop_5(eachKey, eachValue);
+        }
+        return detailList;
+    };
+    var renderListObject = function (type) {
+        var isListObject = props.model.filter(function (eachAttribute) { return eachAttribute.type === "listObject"; });
+        if (isListObject.length > 0) {
+            var list_2 = {};
+            var clonedSelectedData_1 = handleClonedDataAttribute(selectedData, props.model);
+            return isListObject.map(function (eachListObject) {
+                var _a;
+                if (clonedSelectedData_1[eachListObject.id]) {
+                    clonedSelectedData_1[eachListObject.id].map(function (eachObject) {
+                        var eachNewList = {
+                            id: "",
+                            title: "",
+                        };
+                        var isTitle = true;
+                        var _loop_6 = function (eachKey, eachValue) {
+                            if (eachListObject.objectData) {
+                                var model = eachListObject.objectData.find(function (eachAttribute) {
+                                    return eachAttribute.id === eachKey;
+                                });
+                                switch (model === null || model === void 0 ? void 0 : model.type) {
+                                    case "string":
+                                        isTitle
+                                            ? (eachNewList["title"] =
+                                                typeof eachValue === "string" ? eachValue : "")
+                                            : (eachNewList[eachKey] = model.name + " : " + eachValue);
+                                        isTitle = false;
+                                        break;
+                                    case "image":
+                                        var url = void 0;
+                                        if (typeof eachValue === "string") {
+                                            url = (0, utils_2.renderImageUrlFromPath)(props.imageEndpoint, model.imageCollectionName +
+                                                "%2F" +
+                                                props.id +
+                                                "%2F" +
+                                                eachObject.id, eachListObject.id, model.imageFileName, eachValue);
+                                        }
+                                        else if (eachValue instanceof File) {
+                                            url = URL.createObjectURL(eachValue);
+                                        }
+                                        eachNewList[eachKey] = (react_1.default.createElement("img", { src: url, alt: "", className: "w-10 h-10 object-contain" }));
+                                        break;
+                                    case "date":
+                                        eachNewList[eachKey] =
+                                            (model === null || model === void 0 ? void 0 : model.name) +
+                                                " : " +
+                                                (0, utils_1.renderEachRowDataBasedOnDataType)(eachValue);
+                                        break;
+                                    case "address":
+                                    case "object":
+                                    case "reference":
+                                        break;
+                                    default:
+                                        if (eachKey === "id" && typeof eachValue === "string") {
+                                            eachNewList[eachKey] = eachValue;
+                                        }
+                                        else {
+                                            eachNewList[eachKey] = (model === null || model === void 0 ? void 0 : model.name) + " : " + eachValue;
+                                        }
+                                        break;
+                                }
+                            }
+                        };
+                        for (var _i = 0, _a = Object.entries(eachObject); _i < _a.length; _i++) {
+                            var _b = _a[_i], eachKey = _b[0], eachValue = _b[1];
+                            _loop_6(eachKey, eachValue);
+                        }
+                        if (list_2[eachListObject.id]) {
+                            list_2[eachListObject.id].push(eachNewList);
+                        }
+                        else {
+                            list_2[eachListObject.id] = [eachNewList];
+                        }
+                        return null;
+                    });
+                }
+                return (react_1.default.createElement(react_1.default.Fragment, null, !list_2[eachListObject.id] && type === "update" ? (react_1.default.createElement("button", { type: "button", className: "mt-5 relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center", onClick: function () {
+                        setSelectedObjectStructureId(eachListObject.id);
+                        handlePopUpModal(true);
+                    } },
+                    react_1.default.createElement("svg", { className: "mx-auto h-12 w-12 text-gray-400", stroke: "currentColor", fill: "none", viewBox: "0 0 48 48", "aria-hidden": "true" },
+                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 14v20c0 4.418 7.163 8 16 8 1.381 0 2.721-.087 4-.252M8 14c0 4.418 7.163 8 16 8s16-3.582 16-8M8 14c0-4.418 7.163-8 16-8s16 3.582 16 8m0 0v14m0-4c0 4.418-7.163 8-16 8S8 28.418 8 24m32 10v6m0 0v6m0-6h6m-6 0h-6" })),
+                    react_1.default.createElement("span", { className: "mt-2 block text-sm font-medium text-gray-900" },
+                        "Create a new ", "".concat(eachListObject.name.toLocaleLowerCase())))) : (react_1.default.createElement(react_1.default.Fragment, null, list_2[eachListObject.id] && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { className: "flex justify-between mt-5" },
+                        react_1.default.createElement("h3", { className: "text-md leading-6 font-medium text-gray-900 sm:text-lg" }, eachListObject.name),
+                        type === "update" && (react_1.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_1.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: function () {
+                                setSelectedObjectStructureId(eachListObject.id);
+                                handlePopUpModal(true);
+                            } }))),
+                    react_1.default.createElement(list_1.List, { className: "mt-5", list: (_a = list_2[eachListObject.id]) !== null && _a !== void 0 ? _a : [], loading: false, onClickRow: function (id) {
+                            handleSelectListObjectData(id, eachListObject.id);
+                        } })))))));
+            });
+        }
+        else {
+            return react_1.default.createElement(react_1.default.Fragment, null);
         }
-        return null;
     };
     var renderContent = function () {
         var _a, _b, _c, _d, _e, _f;
@@ -1975,7 +2038,7 @@ function DataTemplate(props) {
                                     react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
                                     react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
                                 props.deleteBtn && (react_1.default.createElement(button_1.Button, { text: "Delete", className: "ml-0 mt-5 sm:mt-0 sm:ml-5", type: "danger", onClick: function () {
-                                        handlePopUpModal(true);
+                                        setDeleteModal(true);
                                     } })))),
                         react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom }),
                         renderTabContent(tabs, props.type, viewType)))));
@@ -1986,7 +2049,7 @@ function DataTemplate(props) {
                     current: true,
                 });
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    props.id && props.id !== "new" && (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
+                    props.id && props.id !== "new" && props.model.length > 1 && (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
                             dbModule: dbModule,
                             dbType: props.server,
                             dbCollection: props.collectionId,
@@ -2001,7 +2064,7 @@ function DataTemplate(props) {
                             react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
                             react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
                         props.deleteBtn && (react_1.default.createElement(button_1.Button, { text: "Delete", className: "ml-0 mt-5 sm:mt-0 sm:ml-5", type: "danger", onClick: function () {
-                                handlePopUpModal(true);
+                                setDeleteModal(true);
                             } }))),
                     react_1.default.createElement(form_1.Form, { className: "mt-6 grid grid-cols-4 gap-6", ref: formRef, refList: modalFormInputRefs, handleComplete: handleSubmit }, renderDataTemplateForm(selectedData, props.model, modalFormInputRefs)),
                     react_1.default.createElement("div", { className: "mt-8" }, renderListObject(props.type)),
@@ -2056,17 +2119,17 @@ function DataTemplate(props) {
         var searchQueryExist = false;
         props.additionalQuery.map(function (eachSettings) {
             if (eachSettings.type === "list" && filterSelection) {
-                var currentValue = eachSettings.value;
-                if (currentValue === "false" || currentValue === "true") {
-                    currentValue = currentValue === "false" ? false : true;
+                var currentSelection = filterSelection;
+                if (currentSelection === "false" || currentSelection === "true") {
+                    currentSelection = currentSelection === "false" ? false : true;
                 }
-                else if (!isNaN(currentValue)) {
-                    currentValue = Number(currentValue);
+                else if (!isNaN(currentSelection)) {
+                    currentSelection = Number(currentSelection);
                 }
                 query.push({
                     type: "=",
                     queryId: eachSettings.value,
-                    value: filterSelection,
+                    value: currentSelection,
                 });
             }
             else if (eachSettings.type === "reference" && filterReference)
@@ -2179,10 +2242,70 @@ function DataTemplate(props) {
         }
         return searchFilterList;
     };
+    //=====================================================================================
+    //SECTION: Render Utils
+    //=====================================================================================
+    var renderTabContent = function (tabs, dataType, viewType) {
+        var _a, _b, _c, _d;
+        var selectedTabData = tabs.find(function (eachTab) {
+            if (eachTab.id === viewType) {
+                return eachTab;
+            }
+            else {
+                return null;
+            }
+        });
+        if (viewType === "general") {
+            if (dataType === "list") {
+                return (react_1.default.createElement(table_1.Table, { paginationType: props.server === "mongoServer" ? "page" : "cursor", data: tableData, size: size, limit: limit, cursor: cursor, loading: tableLoading, header: renderTableHeader(), pageIndex: pageIndex, onClickRow: function (id) {
+                        handleNavigate("".concat(props.localURLEndpoint, "?data=").concat(id, "&type=read&collection=").concat(props.collectionId, "&view=general"));
+                    }, linkType: props.linkType, custom: props.custom, newTabUrl: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: handlePagination, className: "mt-5" }));
+            }
+            else if (dataType === "read") {
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(detailList_1.DetailList, { lib: {
+                            Dialog: (_a = props.lib) === null || _a === void 0 ? void 0 : _a.Dialog,
+                            Transition: (_b = props.lib) === null || _b === void 0 ? void 0 : _b.Transition,
+                        }, model: props.model, referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: "General Details", list: renderDetailListData() }),
+                    react_1.default.createElement("div", { className: "mt-8" }, renderListObject(dataType))));
+            }
+        }
+        else if (selectedTabData) {
+            if (selectedTabData.iframeSrc) {
+                return (react_1.default.createElement("iframe", { className: "w-full mt-5", style: { height: "70vh" }, src: (_c = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.iframeSrc) !== null && _c !== void 0 ? _c : "", title: (_d = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.id) !== null && _d !== void 0 ? _d : "" }));
+            }
+            else if (selectedTabData.renderComp) {
+                return react_1.default.createElement(react_1.default.Fragment, null, selectedTabData.renderComp());
+            }
+        }
+        return null;
+    };
+    var renderNotification = function (location) {
+        var _a;
+        if (notification) {
+            var correctIcon = (react_1.default.createElement(outline_1.CheckCircleIcon, { className: "w-10 h-10 text-primary-600" }));
+            var incorrectIcon = (react_1.default.createElement(outline_1.XCircleIcon, { className: "w-10 h-10 text-primary-600" }));
+            if (location === "modal" && !modalVisible)
+                return null;
+            if (location === "root" && modalVisible)
+                return null;
+            return (react_1.default.createElement(notification_1.Notification, { icon: notification.type ? correctIcon : incorrectIcon, notificationAttribute: {
+                    title: notification.title,
+                    desc: notification.msg,
+                    visible: true,
+                }, lib: {
+                    Transition: (_a = props.lib) === null || _a === void 0 ? void 0 : _a.Transition,
+                }, onClose: function () {
+                    setNotification(null);
+                    return "";
+                } }));
+        }
+        return null;
+    };
     var renderModalContent = function () {
         var _a;
         if (loading) {
-            return (react_1.default.createElement(react_1.default.Fragment, null,
+            return (react_1.default.createElement("div", { className: "mt-5" },
                 react_1.default.createElement(loading_1.Loading, null),
                 react_1.default.createElement("div", { className: "mt-3 text-center sm:mt-5" },
                     react_1.default.createElement("h3", { className: "text-lg leading-6 font-medium text-gray-900", id: "modal-title" }, "Loading"),
@@ -2249,37 +2372,47 @@ function DataTemplate(props) {
                             }); } }))));
             }
             else {
-                return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", { className: "px-3 sm:px-0" },
-                        react_1.default.createElement("div", { className: "flex" },
-                            react_1.default.createElement("h2", { className: "mt-2 mb-2 text-xl font-bold text-gray-900" }, "Delete Confirmation")),
-                        react_1.default.createElement("p", { className: "mt-2 mb-2" }, "Are you sure you want to delete this data?"),
-                        react_1.default.createElement("div", { className: "flex flex-row space-x-2 mt-6 pt-5 justify-end" },
-                            react_1.default.createElement(button_1.Button, { text: "Close", size: "small", type: "light", onClick: function () {
-                                    handlePopUpModal(false);
-                                } }),
-                            react_1.default.createElement(button_1.Button, { text: "Delete", size: "small", type: "danger", onClick: function () {
-                                    handleRemoveSelectedData();
-                                } })))));
+                return react_1.default.createElement(react_1.default.Fragment, null);
             }
         }
     };
+    var renderDeleteModalContent = function () {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "px-3 sm:px-0" },
+                react_1.default.createElement("div", { className: "flex" },
+                    react_1.default.createElement("h2", { className: "mt-2 mb-2 text-xl font-bold text-gray-900" }, "Delete Confirmation")),
+                react_1.default.createElement("p", { className: "mt-2 mb-2" }, "Are you sure you want to delete this data?"),
+                react_1.default.createElement("div", { className: "flex flex-row space-x-2 mt-6 pt-5 justify-end" },
+                    react_1.default.createElement(button_1.Button, { text: "Close", size: "small", type: "light", onClick: function () {
+                            handlePopUpModal(false);
+                        } }),
+                    react_1.default.createElement(button_1.Button, { text: "Delete", size: "small", type: "danger", onClick: function () {
+                            handleRemoveSelectedData();
+                        } })))));
+    };
     var renderModalTitle = function () {
         if (excelModal)
             return "Import CSV";
+        else if (queryModal)
+            return "Create a new Query";
         else if (exportExcel)
             return "Export CSV";
         else
             return "";
     };
+    var handleClosePopUpModal = function () {
+        handlePopUpModal(false);
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        react_1.default.createElement(modal_1.Modal, { open: modalVisible, title: renderModalTitle(), lib: { Dialog: (_d = props.lib) === null || _d === void 0 ? void 0 : _d.Dialog, Transition: (_e = props.lib) === null || _e === void 0 ? void 0 : _e.Transition }, renderContent: renderModalContent, onClose: loading
+        react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId ? "2xl" : undefined, open: modalVisible || queryModal, title: renderModalTitle(), lib: { Dialog: (_d = props.lib) === null || _d === void 0 ? void 0 : _d.Dialog, Transition: (_e = props.lib) === null || _e === void 0 ? void 0 : _e.Transition }, renderContent: queryModal ? renderQueryModalContent : renderModalContent, onClose: loading
                 ? function () { }
-                : function () {
-                    handlePopUpModal(false);
-                }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
-        react_1.default.createElement(modal_1.Modal, { title: "Create a new Query", open: queryModal, lib: { Dialog: (_f = props.lib) === null || _f === void 0 ? void 0 : _f.Dialog, Transition: (_g = props.lib) === null || _g === void 0 ? void 0 : _g.Transition }, renderContent: renderQueryModalContent, onClose: handleQueryModal, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
+                : queryModal
+                    ? handleQueryModal
+                    : handleClosePopUpModal, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
+        react_1.default.createElement(modal_1.Modal, { open: deleteModal, lib: { Dialog: (_f = props.lib) === null || _f === void 0 ? void 0 : _f.Dialog, Transition: (_g = props.lib) === null || _g === void 0 ? void 0 : _g.Transition }, renderContent: renderDeleteModalContent, onClose: function () {
+                setDeleteModal(!deleteModal);
+            }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
         renderContent()));
 }
 exports.DataTemplate = DataTemplate;