blixify-ui-web 0.1.77 → 0.1.78

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

@@ -63,10 +63,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTemplate = exports.additionalSelect = exports.loadingSelect = void 0;
+var react_1 = require("@headlessui/react");
 var outline_1 = require("@heroicons/react/24/outline");
 var solid_1 = require("@heroicons/react/24/solid");
 var moment_1 = __importDefault(require("moment"));
-var react_1 = __importStar(require("react"));
+var react_2 = __importStar(require("react"));
 var uuid_1 = require("uuid");
 var button_1 = require("../../action/button");
 var iconButton_1 = require("../../action/iconButton");
@@ -133,65 +134,65 @@ 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...")));
+exports.loadingSelect = (react_2.default.createElement("div", { className: "flex flex-row" },
+    react_2.default.createElement(loading_1.Loading, { sizeClassName: "h-5 w-5" }),
+    react_2.default.createElement("p", { className: "ml-1" }, "Loading...")));
+exports.additionalSelect = (react_2.default.createElement("div", { className: "flex flex-row" },
+    react_2.default.createElement(solid_1.MagnifyingGlassIcon, { className: "h-5 w-5" }),
+    react_2.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 modalFormInputRefs = props.model.map(function () { return (0, react_1.createRef)(); });
+    var formRef = (0, react_2.createRef)();
+    var objectFormRef = (0, react_2.createRef)();
+    var modalFormInputRefs = props.model.map(function () { return (0, react_2.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];
+    var typingTimeout = (0, react_2.useRef)();
+    var _h = (0, react_2.useState)(false), loading = _h[0], setLoading = _h[1];
+    var _j = (0, react_2.useState)(), notification = _j[0], setNotification = _j[1];
     //INFO : Used by List
-    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];
+    var _k = (0, react_2.useState)(""), filterSearch = _k[0], setFilterSearch = _k[1];
+    var _l = (0, react_2.useState)(""), filterSearchParams = _l[0], setFilterSearchParams = _l[1];
+    var _m = (0, react_2.useState)(""), filterSelection = _m[0], setFilterSelection = _m[1];
+    var _o = (0, react_2.useState)(""), filterReference = _o[0], setFilterReference = _o[1];
+    var _p = (0, react_2.useState)(""), filterReferenceSearch = _p[0], setFilterReferenceSearch = _p[1];
+    var _q = (0, react_2.useState)([]), filterReferenceList = _q[0], setFilterReferenceList = _q[1];
+    var _r = (0, react_2.useState)(true), tableLoading = _r[0], setTableLoading = _r[1];
+    var _s = (0, react_2.useState)(""), cursor = _s[0], setCursor = _s[1];
+    var _t = (0, react_2.useState)(""), lastCursor = _t[0], setLastCursor = _t[1];
+    var _u = (0, react_2.useState)([]), tableData = _u[0], setTableData = _u[1];
+    var _v = (0, react_2.useState)(0), size = _v[0], setSize = _v[1];
+    var _w = (0, react_2.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)({
+    var _x = (0, react_2.useState)(null), csvFile = _x[0], setCSVFile = _x[1];
+    var _y = (0, react_2.useState)([]), csvFileData = _y[0], setCSVFileData = _y[1];
+    var _z = (0, react_2.useState)(0), stepCSVIndex = _z[0], setStepCSVIndex = _z[1];
+    var _0 = (0, react_2.useState)({}), listCSVMapAttribute = _0[0], setListCSVMapAttribute = _0[1];
+    var _1 = (0, react_2.useState)({}), listCSVObjAttribute = _1[0], setListCSVObjAttribute = _1[1];
+    var _2 = (0, react_2.useState)([]), csvAPIAttribute = _2[0], setCSVAPIAttribute = _2[1];
+    var _3 = (0, react_2.useState)(""), exportLink = _3[0], setExportLink = _3[1];
+    var _4 = (0, react_2.useState)([]), exportReferenceList = _4[0], setExportReferenceList = _4[1];
+    var _5 = (0, react_2.useState)(""), exportReferenceSearch = _5[0], setExportReferenceSearch = _5[1];
+    var _6 = (0, react_2.useState)([]), queryList = _6[0], setQueryList = _6[1];
+    var _7 = (0, react_2.useState)(false), queryModal = _7[0], setQueryModal = _7[1];
+    var _8 = (0, react_2.useState)({
         queryId: "",
         type: "=",
         value: "",
     }), 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 _9 = (0, react_2.useState)(false), modalVisible = _9[0], setModalVisible = _9[1];
+    var _10 = (0, react_2.useState)(false), deleteModal = _10[0], setDeleteModal = _10[1];
+    var _11 = (0, react_2.useState)(false), excelModal = _11[0], setExcelModal = _11[1];
+    var _12 = (0, react_2.useState)(false), exportExcel = _12[0], setExportExcel = _12[1];
+    var _13 = (0, react_2.useState)({}), selectedData = _13[0], setSelectedData = _13[1];
+    var _14 = (0, react_2.useState)(""), selectedObjectStructureId = _14[0], setSelectedObjectStructureId = _14[1];
+    var _15 = (0, react_2.useState)(""), selectedObjectId = _15[0], setSelectedObjectId = _15[1];
+    var _16 = (0, react_2.useState)({}), selectedObjectData = _16[0], setSelectedObjectData = _16[1];
+    var _17 = (0, react_2.useState)(false), referenceLoading = _17[0], setReferenceLoading = _17[1];
+    var _18 = (0, react_2.useState)({}), referencesOptions = _18[0], setReferencesOptions = _18[1];
+    var _19 = (0, react_2.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);
@@ -211,7 +212,7 @@ function DataTemplate(props) {
             },
         },
     ];
-    (0, react_1.useEffect)(function () {
+    (0, react_2.useEffect)(function () {
         switch (props.type) {
             case "read":
             case "update":
@@ -229,7 +230,7 @@ function DataTemplate(props) {
                 break;
         }
     }, [props.type, props.id]);
-    (0, react_1.useEffect)(function () {
+    (0, react_2.useEffect)(function () {
         var handleGetExportReferenceList = function () { return __awaiter(_this, void 0, void 0, function () {
             var referenceOptionsList;
             var _this = this;
@@ -1529,7 +1530,7 @@ function DataTemplate(props) {
     var renderStepCSV = function () {
         switch (stepCSVIndex) {
             case 0:
-                return (react_1.default.createElement(uploadInput_1.UploadInput, { label: "Please insert a csv file", fileDescription: "CSV file thats doesn't exceeds 30MB and row not more than 100 data", accept: ".csv", hidePreview: true, onChange: handleOnChangeCSV }));
+                return (react_2.default.createElement(uploadInput_1.UploadInput, { label: "Please insert a csv file", fileDescription: "CSV file thats doesn't exceeds 30MB and row not more than 100 data", accept: ".csv", hidePreview: true, onChange: handleOnChangeCSV }));
             case 1:
                 var filterOptions_1 = [];
                 props.model.map(function (eachData) {
@@ -1542,7 +1543,7 @@ function DataTemplate(props) {
                     }
                     return "";
                 });
-                return (react_1.default.createElement(react_1.default.Fragment, null, csvFileData.length > 0 && (react_1.default.createElement("div", { className: "pb-32" }, Object.entries(csvFileData[0]).map(function (eachRow, index) {
+                return (react_2.default.createElement(react_2.default.Fragment, null, csvFileData.length > 0 && (react_2.default.createElement("div", { className: "pb-32" }, Object.entries(csvFileData[0]).map(function (eachRow, index) {
                     var eachKey = eachRow[0];
                     var clonedListValue = JSON.parse(JSON.stringify(listCSVMapAttribute));
                     var selectedObjectModel = props.model.find(function (eachModel) {
@@ -1550,24 +1551,24 @@ function DataTemplate(props) {
                             eachModel.type === "listObject") ||
                             eachModel.type === "object");
                     });
-                    return (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("div", { className: "mt-6 grid grid-cols-3 items-center" },
+                    return (react_2.default.createElement(react_2.default.Fragment, null,
+                        react_2.default.createElement("div", { className: "mt-6 grid grid-cols-3 items-center" },
                             eachKey,
-                            react_1.default.createElement(select_1.Select, { containerClassName: selectedObjectModel ? "ml-2" : "ml-2 col-span-2", label: "", options: filterOptions_1, value: clonedListValue[index], onChange: function (value) {
+                            react_2.default.createElement(select_1.Select, { containerClassName: selectedObjectModel ? "ml-2" : "ml-2 col-span-2", label: "", options: filterOptions_1, value: clonedListValue[index], onChange: function (value) {
                                     var clonedListValueAttribute = JSON.parse(JSON.stringify(listCSVMapAttribute));
                                     clonedListValueAttribute[index] = value;
                                     setListCSVMapAttribute(clonedListValueAttribute);
                                 } }),
-                            selectedObjectModel && (react_1.default.createElement(select_1.Select, { containerClassName: "ml-4", label: "", options: (0, utils_1.renderObjectOptions)(selectedObjectModel.objectData), value: listCSVObjAttribute[index], onChange: function (value) {
+                            selectedObjectModel && (react_2.default.createElement(select_1.Select, { containerClassName: "ml-4", label: "", options: (0, utils_1.renderObjectOptions)(selectedObjectModel.objectData), value: listCSVObjAttribute[index], onChange: function (value) {
                                     var clonedListObjectValueAttribute = JSON.parse(JSON.stringify(listCSVObjAttribute));
                                     clonedListObjectValueAttribute[index] = value;
                                     setListCSVObjAttribute(clonedListObjectValueAttribute);
                                 } })))));
                 })))));
             case 2:
-                return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", { className: "mx-auto flex flex-col mt-2" }, "Mapped Column"),
-                    react_1.default.createElement(table_1.Table, { loading: false, data: renderExcelReviewData(), hidePagination: true, limit: csvAPIAttribute.length + 1, header: [
+                return (react_2.default.createElement(react_2.default.Fragment, null,
+                    react_2.default.createElement("div", { className: "mx-auto flex flex-col mt-2" }, "Mapped Column"),
+                    react_2.default.createElement(table_1.Table, { loading: false, data: renderExcelReviewData(), hidePagination: true, limit: csvAPIAttribute.length + 1, header: [
                             { key: "header", title: "Excel Column" },
                             { key: "detail", title: "Mapping Column" },
                         ] })));
@@ -1591,12 +1592,12 @@ function DataTemplate(props) {
     var renderQueryModalContent = function () {
         var _a, _b;
         var queryValueInput = [];
-        var formInputRef = Object.values(queryInput).map(function () { return (0, react_1.createRef)(); });
+        var formInputRef = Object.values(queryInput).map(function () { return (0, react_2.createRef)(); });
         var modelType = (_b = (_a = props.model.find(function (eachModel) { return eachModel.id === queryInput.queryId; })) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : "string";
         switch (modelType) {
             case "listReference":
             case "reference":
-                queryValueInput.push(react_1.default.createElement(select_1.Select, { id: "value", ref: formInputRef[2], value: queryInput.value, label: "Value", options: exportReferenceList !== null && exportReferenceList !== void 0 ? exportReferenceList : [], onSearch: function (value) {
+                queryValueInput.push(react_2.default.createElement(select_1.Select, { id: "value", ref: formInputRef[2], value: queryInput.value, label: "Value", options: exportReferenceList !== null && exportReferenceList !== void 0 ? exportReferenceList : [], onSearch: function (value) {
                         setExportReferenceSearch(value);
                     }, onChange: function (value) {
                         var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
@@ -1605,7 +1606,7 @@ function DataTemplate(props) {
                     } }));
                 break;
             case "date":
-                queryValueInput.push(react_1.default.createElement(datePicker_1.InputDatePicker, { id: "value", ref: formInputRef[2], value: queryInput.value
+                queryValueInput.push(react_2.default.createElement(datePicker_1.InputDatePicker, { id: "value", ref: formInputRef[2], value: queryInput.value
                         ? (0, moment_1.default)(queryInput.value).toDate()
                         : (0, moment_1.default)().toDate(), onChange: function (id, date) {
                         var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
@@ -1614,7 +1615,7 @@ function DataTemplate(props) {
                     } }));
                 break;
             default:
-                queryValueInput.push(react_1.default.createElement(textInput_1.TextInput, { id: "value", ref: formInputRef[2], value: queryInput.value, label: "Value", type: "text", placeholder: "eg. Type", onChange: function (e) {
+                queryValueInput.push(react_2.default.createElement(textInput_1.TextInput, { id: "value", ref: formInputRef[2], value: queryInput.value, label: "Value", type: "text", placeholder: "eg. Type", onChange: function (e) {
                         var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
                         clonedQueryInput[e.target.id] = e.target.value;
                         setQueryInput(clonedQueryInput);
@@ -1623,7 +1624,7 @@ function DataTemplate(props) {
         }
         if (queryInput.type === "><") {
             queryValueInput.pop();
-            queryValueInput.push(react_1.default.createElement(datePicker_1.InputDatePicker, { id: "value", ref: formInputRef[2], range: true, startDate: (0, moment_1.default)(queryInput.value[0]).toDate(), endDate: (0, moment_1.default)(queryInput.value[1]).toDate(), onChange: function (id, date, type) {
+            queryValueInput.push(react_2.default.createElement(datePicker_1.InputDatePicker, { id: "value", ref: formInputRef[2], range: true, startDate: (0, moment_1.default)(queryInput.value[0]).toDate(), endDate: (0, moment_1.default)(queryInput.value[1]).toDate(), onChange: function (id, date, type) {
                     var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
                     if (type === "start")
                         clonedQueryInput[id][0] = (0, moment_1.default)(date).toISOString();
@@ -1632,9 +1633,9 @@ function DataTemplate(props) {
                     setQueryInput(clonedQueryInput);
                 } }));
         }
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(form_1.Form, { ref: formRef, refList: formInputRef, handleComplete: handlePushQueryList, className: "mt-6 grid grid-cols-1 gap-5" },
-                react_1.default.createElement(select_1.Select, { id: "queryId", ref: formInputRef[0], value: queryInput.queryId, label: "Column ID", options: renderQueryIdOptions(), onChange: function (value) { return __awaiter(_this, void 0, void 0, function () {
+        return (react_2.default.createElement(react_2.default.Fragment, null,
+            react_2.default.createElement(form_1.Form, { ref: formRef, refList: formInputRef, handleComplete: handlePushQueryList, className: "mt-6 grid grid-cols-1 gap-5" },
+                react_2.default.createElement(select_1.Select, { id: "queryId", ref: formInputRef[0], value: queryInput.queryId, label: "Column ID", options: renderQueryIdOptions(), onChange: function (value) { return __awaiter(_this, void 0, void 0, function () {
                         var clonedQueryInput;
                         return __generator(this, function (_a) {
                             clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
@@ -1644,15 +1645,15 @@ function DataTemplate(props) {
                             return [2 /*return*/];
                         });
                     }); } }),
-                react_1.default.createElement(select_1.Select, { id: "type", ref: formInputRef[1], value: queryInput.type, label: "Condition", options: queryType, onChange: function (value) {
+                react_2.default.createElement(select_1.Select, { id: "type", ref: formInputRef[1], value: queryInput.type, label: "Condition", options: queryType, onChange: function (value) {
                         var clonedQueryInput = JSON.parse(JSON.stringify(queryInput));
                         clonedQueryInput["type"] = value;
                         clonedQueryInput["value"] = "";
                         setQueryInput(clonedQueryInput);
                     } }),
                 queryValueInput),
-            react_1.default.createElement("div", { className: "flex flex-row justify-end pt-4" },
-                react_1.default.createElement(button_1.Button, { className: "mt-4", text: "Add", size: "small", type: "normal", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+            react_2.default.createElement("div", { className: "flex flex-row justify-end pt-4" },
+                react_2.default.createElement(button_1.Button, { className: "mt-4", text: "Add", size: "small", type: "normal", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
                         var _a;
                         return __generator(this, function (_b) {
                             switch (_b.label) {
@@ -1670,25 +1671,25 @@ function DataTemplate(props) {
         queryList.map(function (data, index) {
             if (queryList.length > 1) {
                 var upData_1 = index === queryList.length - 1;
-                sortComponent = (react_1.default.createElement("div", { className: "cursor-pointer ml-2", onClick: function () {
+                sortComponent = (react_2.default.createElement("div", { className: "cursor-pointer ml-2", onClick: function () {
                         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" }))));
+                    } }, upData_1 ? (react_2.default.createElement(outline_1.ArrowUpIcon, { className: "h-5 w-5 block text-primary-600" })) : (react_2.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 () {
+                view: (react_2.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 () {
+                    react_2.default.createElement(outline_1.EyeIcon, { className: "h-5 w-5 block text-primary-600" }))),
+                del: (react_2.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" }))),
+                    react_2.default.createElement(outline_1.TrashIcon, { className: "h-5 w-5 block text-primary-600" }))),
             });
             return "";
         });
@@ -1727,8 +1728,8 @@ function DataTemplate(props) {
     };
     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)));
+            return (react_2.default.createElement("div", { key: eachKeys, className: "bg-primary-600 text-white rounded m-0.5" },
+                react_2.default.createElement("p", { className: "text-xs px-2 py-1 text-wrap" }, eachKeys)));
         });
     };
     var renderDataTemplateForm = function (data, model, formInputRef, isObject, isObjectList) {
@@ -1750,7 +1751,7 @@ function DataTemplate(props) {
                     : 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 : {
+                    inputList.push(react_2.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: "",
@@ -1760,14 +1761,14 @@ function DataTemplate(props) {
                     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 () {
+                    inputList.push(react_2.default.createElement(react_2.default.Fragment, null,
+                        react_2.default.createElement("label", { className: "block text-sm font-medium text-gray-700" }, label),
+                        react_2.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"))));
+                            } }, objectValue.length > 0 ? (react_2.default.createElement("div", { className: "flex overflow-hidden flex-row" }, renderObjectTags(eachAttribute.id))) : ("Fill details"))));
                     break;
                 case "list":
                 case "multipleList":
@@ -1790,13 +1791,13 @@ function DataTemplate(props) {
                             }
                         });
                     }
-                    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) {
+                    inputList.push(react_2.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: [
+                    inputList.push(react_2.default.createElement(select_1.Select, { ref: eachAttribute.optional ? null : formInputRef[index], id: eachAttribute.id, value: value, label: label, options: [
                             {
                                 key: "true",
                                 label: "True",
@@ -1824,15 +1825,15 @@ function DataTemplate(props) {
                                 : (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 }));
+                    inputList.push(react_2.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 }));
+                    inputList.push(react_2.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
+                    inputList.push(react_2.default.createElement(react_2.default.Fragment, null,
+                        react_2.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);
@@ -1857,15 +1858,15 @@ function DataTemplate(props) {
                             }); }, 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 }));
+                    inputList.push(react_2.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 }));
+                    inputList.push(react_2.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 (react_2.default.createElement("div", { key: index, className: "col-span-4 sm:col-span-2" }, eachInput));
         });
     };
     var renderDetailListData = function () {
@@ -1929,7 +1930,7 @@ function DataTemplate(props) {
                                         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" }));
+                                        eachNewList[eachKey] = (react_2.default.createElement("img", { src: url, alt: "", className: "w-10 h-10 object-contain" }));
                                         break;
                                     case "date":
                                         eachNewList[eachKey] =
@@ -1965,27 +1966,27 @@ function DataTemplate(props) {
                         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 () {
+                return (react_2.default.createElement(react_2.default.Fragment, null, !list_2[eachListObject.id] && type === "update" ? (react_2.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 () {
+                    react_2.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_2.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_2.default.createElement("span", { className: "mt-2 block text-sm font-medium text-gray-900" },
+                        "Create a new ", "".concat(eachListObject.name.toLocaleLowerCase())))) : (react_2.default.createElement(react_2.default.Fragment, null, list_2[eachListObject.id] && (react_2.default.createElement(react_2.default.Fragment, null,
+                    react_2.default.createElement("div", { className: "flex justify-between mt-5" },
+                        react_2.default.createElement("h3", { className: "text-md leading-6 font-medium text-gray-900 sm:text-lg" }, eachListObject.name),
+                        type === "update" && (react_2.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_2.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) {
+                    react_2.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 react_2.default.createElement(react_2.default.Fragment, null);
         }
     };
     var renderContent = function () {
@@ -2020,8 +2021,8 @@ function DataTemplate(props) {
                     href: "#",
                     current: true,
                 });
-                return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
+                return (react_2.default.createElement(react_2.default.Fragment, null,
+                    react_2.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
                             dbModule: dbModule,
                             dbType: props.server,
                             dbCollection: props.collectionId,
@@ -2030,17 +2031,17 @@ function DataTemplate(props) {
                             type: "get",
                             id: props.id,
                         }, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError }),
-                    !loading && (react_1.default.createElement(react_1.default.Fragment, null,
-                        props.breadcrumb && (react_1.default.createElement(breadcrumb_1.Breadcrumb, { pages: pages, linkType: props.linkType, custom: props.custom, className: "mb-5" })),
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement("div", { className: "flex flex-col py-2 justify-between sm:items-center sm:flex-row" },
-                                react_1.default.createElement("div", { className: "flex flex-col" },
-                                    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 () {
+                    !loading && (react_2.default.createElement(react_2.default.Fragment, null,
+                        props.breadcrumb && (react_2.default.createElement(breadcrumb_1.Breadcrumb, { pages: pages, linkType: props.linkType, custom: props.custom, className: "mb-5" })),
+                        react_2.default.createElement("div", null,
+                            react_2.default.createElement("div", { className: "flex flex-col py-2 justify-between sm:items-center sm:flex-row" },
+                                react_2.default.createElement("div", { className: "flex flex-col" },
+                                    react_2.default.createElement("p", { className: "text-xl font-medium" }, props.title),
+                                    react_2.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
+                                props.deleteBtn && (react_2.default.createElement(button_1.Button, { text: "Delete", className: "ml-0 mt-5 sm:mt-0 sm:ml-5", type: "danger", onClick: function () {
                                         setDeleteModal(true);
                                     } })))),
-                        react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom }),
+                        react_2.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom }),
                         renderTabContent(tabs, props.type, viewType)))));
             case "update":
                 pages.push({
@@ -2048,8 +2049,8 @@ function DataTemplate(props) {
                     href: "#",
                     current: true,
                 });
-                return (react_1.default.createElement(react_1.default.Fragment, null,
-                    props.id && props.id !== "new" && props.model.length > 1 && (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
+                return (react_2.default.createElement(react_2.default.Fragment, null,
+                    props.id && props.id !== "new" && props.model.length > 1 && (react_2.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
                             dbModule: dbModule,
                             dbType: props.server,
                             dbCollection: props.collectionId,
@@ -2058,18 +2059,18 @@ function DataTemplate(props) {
                             type: "get",
                             id: props.id,
                         }, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
-                    props.breadcrumb && (react_1.default.createElement(breadcrumb_1.Breadcrumb, { pages: pages, linkType: props.linkType, custom: props.custom, className: "mb-5" })),
-                    react_1.default.createElement("div", { className: "flex flex-col py-2 justify-between sm:items-center sm:flex-row" },
-                        react_1.default.createElement("div", { className: "flex flex-col" },
-                            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 () {
+                    props.breadcrumb && (react_2.default.createElement(breadcrumb_1.Breadcrumb, { pages: pages, linkType: props.linkType, custom: props.custom, className: "mb-5" })),
+                    react_2.default.createElement("div", { className: "flex flex-col py-2 justify-between sm:items-center sm:flex-row" },
+                        react_2.default.createElement("div", { className: "flex flex-col" },
+                            react_2.default.createElement("p", { className: "text-xl font-medium" }, props.title),
+                            react_2.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
+                        props.deleteBtn && (react_2.default.createElement(button_1.Button, { text: "Delete", className: "ml-0 mt-5 sm:mt-0 sm:ml-5", type: "danger", onClick: function () {
                                 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)),
-                    react_1.default.createElement("div", { className: "pt-8 flex justify-end" },
-                        react_1.default.createElement(button_1.Button, { text: "Submit", type: "normal", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                    react_2.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_2.default.createElement("div", { className: "mt-8" }, renderListObject(props.type)),
+                    react_2.default.createElement("div", { className: "pt-8 flex justify-end" },
+                        react_2.default.createElement(button_1.Button, { text: "Submit", type: "normal", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
                                 var _a;
                                 return __generator(this, function (_b) {
                                     switch (_b.label) {
@@ -2081,8 +2082,8 @@ function DataTemplate(props) {
                                 });
                             }); } }))));
             case "list":
-                return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
+                return (react_2.default.createElement(react_2.default.Fragment, null,
+                    react_2.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
                             dbModule: dbModule,
                             dbType: props.server,
                             dbCollection: props.collectionId,
@@ -2094,24 +2095,24 @@ function DataTemplate(props) {
                             sort: (_d = props.sort) !== null && _d !== void 0 ? _d : undefined,
                             limit: limit,
                         }, onChangeData: handleGetListData, onError: handleGetItemError }),
-                    react_1.default.createElement("div", { className: "flex flex-col py-2 md:items-center md:flex-row" },
-                        react_1.default.createElement("div", { className: "flex flex-col" },
-                            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)),
-                        react_1.default.createElement("div", { className: "grow" }),
-                        react_1.default.createElement("div", { className: "flex flex-col space-y-3 items-center justify-center mt-3 md:space-x-3 md:space-y-0 md:flex-row md:mt-0 md:mx-3" }, renderSearchFilterComponents()),
-                        react_1.default.createElement("div", { className: "flex flex-row items-center justify-content mt-2 sm:mr-5 md:mt-0" },
-                            react_1.default.createElement(link_1.Link, { className: "mr-2", href: "".concat(props.localURLEndpoint, "?data=new&type=update&collection=").concat(props.collectionId), linkType: props.linkType, custom: props.custom },
-                                react_1.default.createElement(button_1.Button, { text: "Add", type: "normal" })),
-                            react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }) }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (react_1.default.createElement(react_1.default.Fragment, null,
-                                    react_1.default.createElement("span", { className: "w-40 text-gray-700 block py-3 text-sm text-center cursor-pointer hover:bg-gray-100", onClick: eachPopup.onClick }, eachPopup.text))); })), lib: {
+                    react_2.default.createElement("div", { className: "flex flex-col py-2 md:items-center md:flex-row" },
+                        react_2.default.createElement("div", { className: "flex flex-col" },
+                            react_2.default.createElement("p", { className: "text-xl font-medium" }, props.title),
+                            react_2.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
+                        react_2.default.createElement("div", { className: "grow" }),
+                        react_2.default.createElement("div", { className: "flex flex-col space-y-3 items-center justify-center mt-3 md:space-x-3 md:space-y-0 md:flex-row md:mt-0 md:mx-3" }, renderSearchFilterComponents()),
+                        react_2.default.createElement("div", { className: "flex flex-row items-center justify-content mt-2 sm:mr-5 md:mt-0" },
+                            react_2.default.createElement(link_1.Link, { className: "mr-2", href: "".concat(props.localURLEndpoint, "?data=new&type=update&collection=").concat(props.collectionId), linkType: props.linkType, custom: props.custom },
+                                react_2.default.createElement(button_1.Button, { text: "Add", type: "normal" })),
+                            react_2.default.createElement(popUp_1.PopUp, { ctaComp: react_2.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_2.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }) }), renderComp: react_2.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (react_2.default.createElement(react_1.Menu.Item, null,
+                                    react_2.default.createElement("span", { className: "w-40 text-gray-700 block py-3 text-sm text-center cursor-pointer hover:bg-gray-100", onClick: eachPopup.onClick }, eachPopup.text))); })), lib: {
                                     Menu: (_e = props === null || props === void 0 ? void 0 : props.lib) === null || _e === void 0 ? void 0 : _e.Menu,
                                     Transition: (_f = props === null || props === void 0 ? void 0 : props.lib) === null || _f === void 0 ? void 0 : _f.Transition,
                                 } }))),
-                    react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom }),
+                    react_2.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom }),
                     renderTabContent(tabs, props.type, viewType)));
             default:
-                return react_1.default.createElement(react_1.default.Fragment, null);
+                return react_2.default.createElement(react_2.default.Fragment, null);
         }
     };
     var renderSearchFilterConditions = function () {
@@ -2182,14 +2183,14 @@ function DataTemplate(props) {
                         });
                         return null;
                     });
-                    searchFilterList.push(react_1.default.createElement(select_1.Select, { label: "", options: filterOptions_2, value: filterSelection, onChange: function (value) {
+                    searchFilterList.push(react_2.default.createElement(select_1.Select, { label: "", options: filterOptions_2, value: filterSelection, onChange: function (value) {
                             handleClearDataByFilter();
                             setFilterSelection(value);
                         } }));
                     break;
                 case "reference":
-                    searchFilterList.push(react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
+                    searchFilterList.push(react_2.default.createElement(react_2.default.Fragment, null,
+                        react_2.default.createElement(readQueryHoc_1.ReadQueryHoc, { database: {
                                 dbModule: dbModule,
                                 dbType: props.server,
                                 dbCollection: (_b = eachSettings.spaceId) !== null && _b !== void 0 ? _b : "",
@@ -2223,7 +2224,7 @@ function DataTemplate(props) {
                                     setFilterReferenceList(options_1);
                                 }
                             } }),
-                        react_1.default.createElement(select_1.Select, { label: "", options: filterReferenceList, value: filterReference, onChange: function (value) {
+                        react_2.default.createElement(select_1.Select, { label: "", options: filterReferenceList, value: filterReference, onChange: function (value) {
                                 handleClearDataByFilter();
                                 setFilterReference(value);
                             }, onSearch: function (value) {
@@ -2232,13 +2233,13 @@ function DataTemplate(props) {
                     break;
                 case "search":
                     searchQueryExist = true;
-                    searchFilterList.push(react_1.default.createElement(textInput_1.TextInput, { containerClassName: "w-full", placeholder: "Search by ".concat(eachSettings.value), label: "", type: "text", value: filterSearch, onChange: handleNameSearch }));
+                    searchFilterList.push(react_2.default.createElement(textInput_1.TextInput, { containerClassName: "w-full", placeholder: "Search by ".concat(eachSettings.value), label: "", type: "text", value: filterSearch, onChange: handleNameSearch }));
                     break;
             }
             return null;
         });
         if (!searchQueryExist && props.server === "mongoServer") {
-            searchFilterList.push(react_1.default.createElement(textInput_1.TextInput, { containerClassName: "w-full", placeholder: "Search", label: "", type: "text", value: filterSearch, onChange: handleNameSearch }));
+            searchFilterList.push(react_2.default.createElement(textInput_1.TextInput, { containerClassName: "w-full", placeholder: "Search", label: "", type: "text", value: filterSearch, onChange: handleNameSearch }));
         }
         return searchFilterList;
     };
@@ -2257,25 +2258,25 @@ function DataTemplate(props) {
         });
         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) {
+                return (react_2.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: {
+                return (react_2.default.createElement(react_2.default.Fragment, null,
+                    react_2.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))));
+                    react_2.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 : "" }));
+                return (react_2.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 react_2.default.createElement(react_2.default.Fragment, null, selectedTabData.renderComp());
             }
         }
         return null;
@@ -2283,13 +2284,13 @@ function DataTemplate(props) {
     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" }));
+            var correctIcon = (react_2.default.createElement(outline_1.CheckCircleIcon, { className: "w-10 h-10 text-primary-600" }));
+            var incorrectIcon = (react_2.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: {
+            return (react_2.default.createElement(notification_1.Notification, { icon: notification.type ? correctIcon : incorrectIcon, notificationAttribute: {
                     title: notification.title,
                     desc: notification.msg,
                     visible: true,
@@ -2305,17 +2306,17 @@ function DataTemplate(props) {
     var renderModalContent = function () {
         var _a;
         if (loading) {
-            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"),
-                    react_1.default.createElement("div", { className: "mt-2" },
-                        react_1.default.createElement("p", { className: "text-sm text-gray-500" }, "Please wait while we are proccessing your request")))));
+            return (react_2.default.createElement("div", { className: "mt-5" },
+                react_2.default.createElement(loading_1.Loading, null),
+                react_2.default.createElement("div", { className: "mt-3 text-center sm:mt-5" },
+                    react_2.default.createElement("h3", { className: "text-lg leading-6 font-medium text-gray-900", id: "modal-title" }, "Loading"),
+                    react_2.default.createElement("div", { className: "mt-2" },
+                        react_2.default.createElement("p", { className: "text-sm text-gray-500" }, "Please wait while we are proccessing your request")))));
         }
         else if (excelModal) {
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement(stepper_1.Stepper, { steps: [
+            return (react_2.default.createElement(react_2.default.Fragment, null,
+                react_2.default.createElement("div", null,
+                    react_2.default.createElement(stepper_1.Stepper, { steps: [
                             {
                                 title: "Select a file",
                             },
@@ -2326,24 +2327,24 @@ function DataTemplate(props) {
                                 title: "Review and Upload",
                             },
                         ], className: "mt-5", horizontal: true, stepIndex: stepCSVIndex, onChange: function () { }, disabled: true })),
-                react_1.default.createElement("div", { className: "mt-5" }, renderStepCSV()),
-                react_1.default.createElement("div", { className: "mt-5 flex justify-end" },
-                    stepCSVIndex > 0 && (react_1.default.createElement(button_1.Button, { className: "mr-10 flex justify-end", text: "Back", type: "normal", onClick: function () {
+                react_2.default.createElement("div", { className: "mt-5" }, renderStepCSV()),
+                react_2.default.createElement("div", { className: "mt-5 flex justify-end" },
+                    stepCSVIndex > 0 && (react_2.default.createElement(button_1.Button, { className: "mr-10 flex justify-end", text: "Back", type: "normal", onClick: function () {
                             setStepCSVIndex(stepCSVIndex - 1);
                         } })),
-                    react_1.default.createElement(button_1.Button, { text: "".concat(stepCSVIndex < 2 ? "Next" : "Submit"), type: "normal", onClick: handleStepCSV }))));
+                    react_2.default.createElement(button_1.Button, { text: "".concat(stepCSVIndex < 2 ? "Next" : "Submit"), type: "normal", onClick: handleStepCSV }))));
         }
         else if (exportExcel) {
-            return (react_1.default.createElement(react_1.default.Fragment, null, exportLink ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(emptyState_1.EmptyState, { icon: react_1.default.createElement(outline_1.CheckCircleIcon, { className: "w-20 h-20 text-primary-600" }), text: "Data have been successfully exported on ".concat(exportLink), callToAction: react_1.default.createElement("div", null,
-                        react_1.default.createElement(link_1.Link, { href: exportLink },
-                            react_1.default.createElement(button_1.Button, { text: "Download", type: "normal", size: "small" }))) }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("p", { className: "text-gray-600 text-sm pt-2 mb-4" }, "Export your data to .csv format to be viewable on Excel. Filter your data exported based on conditions by creating queries at the table below"),
-                react_1.default.createElement("div", { className: "flex justify-end items-center" },
-                    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: handleQueryModal })),
-                react_1.default.createElement(table_1.Table, { className: "mt-5", header: queryTableHeader, data: renderQueryData(), loading: false }),
-                react_1.default.createElement("div", { className: "flex mt-5 justify-end " },
-                    react_1.default.createElement(button_1.Button, { className: "mt-4", text: "Submit", size: "small", type: "normal", onClick: handleExportCSVData }))))));
+            return (react_2.default.createElement(react_2.default.Fragment, null, exportLink ? (react_2.default.createElement(react_2.default.Fragment, null,
+                react_2.default.createElement(emptyState_1.EmptyState, { icon: react_2.default.createElement(outline_1.CheckCircleIcon, { className: "w-20 h-20 text-primary-600" }), text: "Data have been successfully exported on ".concat(exportLink), callToAction: react_2.default.createElement("div", null,
+                        react_2.default.createElement(link_1.Link, { href: exportLink },
+                            react_2.default.createElement(button_1.Button, { text: "Download", type: "normal", size: "small" }))) }))) : (react_2.default.createElement(react_2.default.Fragment, null,
+                react_2.default.createElement("p", { className: "text-gray-600 text-sm pt-2 mb-4" }, "Export your data to .csv format to be viewable on Excel. Filter your data exported based on conditions by creating queries at the table below"),
+                react_2.default.createElement("div", { className: "flex justify-end items-center" },
+                    react_2.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_2.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: handleQueryModal })),
+                react_2.default.createElement(table_1.Table, { className: "mt-5", header: queryTableHeader, data: renderQueryData(), loading: false }),
+                react_2.default.createElement("div", { className: "flex mt-5 justify-end " },
+                    react_2.default.createElement(button_1.Button, { className: "mt-4", text: "Submit", size: "small", type: "normal", onClick: handleExportCSVData }))))));
         }
         else {
             var filterObjectModel = props.model.find(function (eachModel) {
@@ -2351,15 +2352,15 @@ function DataTemplate(props) {
             });
             if (filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) {
                 var objectFormInputRefs = filterObjectModel.objectData.map(function () {
-                    return (0, react_1.createRef)();
+                    return (0, react_2.createRef)();
                 });
-                return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(form_1.Form, { className: "mt-6 grid grid-cols-4 gap-6 pb-20", ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType }, renderDataTemplateForm(selectedObjectData, (_a = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _a !== void 0 ? _a : [], objectFormInputRefs, true, filterObjectModel.type === "listObject")),
-                    react_1.default.createElement("div", { className: "pt-8 flex justify-end" },
+                return (react_2.default.createElement(react_2.default.Fragment, null,
+                    react_2.default.createElement(form_1.Form, { className: "mt-6 grid grid-cols-4 gap-6 pb-20", ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType }, renderDataTemplateForm(selectedObjectData, (_a = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _a !== void 0 ? _a : [], objectFormInputRefs, true, filterObjectModel.type === "listObject")),
+                    react_2.default.createElement("div", { className: "pt-8 flex justify-end" },
                         filterObjectModel.type === "listObject" &&
                             selectedObjectId &&
-                            props.type !== "read" && (react_1.default.createElement(button_1.Button, { className: "mr-5", text: "Delete", type: "danger", onClick: handleRemoveObjectListData })),
-                        react_1.default.createElement(button_1.Button, { text: "".concat(props.type === "read" ? "Close" : "Submit"), type: "normal", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                            props.type !== "read" && (react_2.default.createElement(button_1.Button, { className: "mr-5", text: "Delete", type: "danger", onClick: handleRemoveObjectListData })),
+                        react_2.default.createElement(button_1.Button, { text: "".concat(props.type === "read" ? "Close" : "Submit"), type: "normal", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
                                 var _a;
                                 return __generator(this, function (_b) {
                                     switch (_b.label) {
@@ -2372,21 +2373,21 @@ function DataTemplate(props) {
                             }); } }))));
             }
             else {
-                return react_1.default.createElement(react_1.default.Fragment, null);
+                return react_2.default.createElement(react_2.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 () {
+        return (react_2.default.createElement(react_2.default.Fragment, null,
+            react_2.default.createElement("div", { className: "px-3 sm:px-0" },
+                react_2.default.createElement("div", { className: "flex" },
+                    react_2.default.createElement("h2", { className: "mt-2 mb-2 text-xl font-bold text-gray-900" }, "Delete Confirmation")),
+                react_2.default.createElement("p", { className: "mt-2 mb-2" }, "Are you sure you want to delete this data?"),
+                react_2.default.createElement("div", { className: "flex flex-row space-x-2 mt-6 pt-5 justify-end" },
+                    react_2.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 () {
+                    react_2.default.createElement(button_1.Button, { text: "Delete", size: "small", type: "danger", onClick: function () {
                             handleRemoveSelectedData();
                         } })))));
     };
@@ -2403,16 +2404,16 @@ function DataTemplate(props) {
     var handleClosePopUpModal = function () {
         handlePopUpModal(false);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_2.default.createElement(react_2.default.Fragment, null,
         renderNotification("root"),
-        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
+        react_2.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 () { }
                 : 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 () {
+                    : handleClosePopUpModal, notification: react_2.default.createElement(react_2.default.Fragment, null, renderNotification("modal")) }),
+        react_2.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")) }),
+            }, notification: react_2.default.createElement(react_2.default.Fragment, null, renderNotification("modal")) }),
         renderContent()));
 }
 exports.DataTemplate = DataTemplate;