blixify-ui-web 1.2.22 → 1.2.24

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

@@ -117,6 +117,10 @@ var modal_1 = require("../../display/modal");
 var notification_1 = require("../../display/notification");
 var stepper_1 = require("../../display/stepper");
 var table_1 = require("../../display/table");
+var newTable_1 = require("../../display/newTable");
+var newList_1 = require("../../display/newList");
+var newKanban_1 = require("../../display/newKanban");
+var newCalendar_1 = require("../../display/newCalendar");
 var address_1 = require("../../input/address");
 var canvas_1 = require("../../input/canvas");
 var form_1 = require("../../input/form");
@@ -149,7 +153,7 @@ var settingsModal_1 = require("./settingsModal");
 var flexFilterModel_1 = require("./flexFilterModel");
 var flexFilterModule_1 = require("./flexFilterModule");
 exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45;
     var intialiseDefaultFilterValues = function () {
         var _a;
         var initialFilterSearch = {};
@@ -210,143 +214,143 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             initialFilterReferenceDate: initialFilterReferenceDate,
         };
     };
-    var _45 = intialiseDefaultFilterValues(), initialFilterSearch = _45.initialFilterSearch, initialFilterSearchParams = _45.initialFilterSearchParams, initialFilterSelection = _45.initialFilterSelection, initialFilterReference = _45.initialFilterReference, initialFilterReferenceDate = _45.initialFilterReferenceDate;
-    var _46 = (0, react_1.useState)(false), loading = _46[0], setLoading = _46[1];
-    var _47 = (0, react_1.useState)(), notification = _47[0], setNotification = _47[1];
+    var _46 = intialiseDefaultFilterValues(), initialFilterSearch = _46.initialFilterSearch, initialFilterSearchParams = _46.initialFilterSearchParams, initialFilterSelection = _46.initialFilterSelection, initialFilterReference = _46.initialFilterReference, initialFilterReferenceDate = _46.initialFilterReferenceDate;
+    var _47 = (0, react_1.useState)(false), loading = _47[0], setLoading = _47[1];
+    var _48 = (0, react_1.useState)(), notification = _48[0], setNotification = _48[1];
     //INFO : Used by List
-    var _48 = (0, react_1.useState)(initialFilterSearch), filterSearch = _48[0], setFilterSearch = _48[1];
-    var _49 = (0, react_1.useState)(initialFilterSearchParams), filterSearchParams = _49[0], setFilterSearchParams = _49[1];
-    var _50 = (0, react_1.useState)(initialFilterSelection), filterSelection = _50[0], setFilterSelection = _50[1];
-    var _51 = (0, react_1.useState)(initialFilterReference), filterReference = _51[0], setFilterReference = _51[1];
-    var _52 = (0, react_1.useState)({}), filterReferenceSearch = _52[0], setFilterReferenceSearch = _52[1];
-    var _53 = (0, react_1.useState)({}), filterReferenceList = _53[0], setFilterReferenceList = _53[1];
-    var _54 = (0, react_1.useState)(initialFilterReferenceDate), filterReferenceDate = _54[0], setFilterReferenceDate = _54[1];
-    var _55 = (0, react_1.useState)(true), tableLoading = _55[0], setTableLoading = _55[1];
-    var _56 = (0, react_1.useState)(""), cursor = _56[0], setCursor = _56[1];
-    var _57 = (0, react_1.useState)(""), lastCursor = _57[0], setLastCursor = _57[1];
-    var _58 = (0, react_1.useState)([]), tableData = _58[0], setTableData = _58[1];
-    var _59 = (0, react_1.useState)([]), spaceTableData = _59[0], setSpaceTableData = _59[1];
-    var _60 = (0, react_1.useState)(0), size = _60[0], setSize = _60[1];
-    var _61 = (0, react_1.useState)((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0), pageIndex = _61[0], setPageIndex = _61[1];
-    var _62 = (0, react_1.useState)([]), selectedIds = _62[0], setSelectedIds = _62[1];
-    var _63 = (0, react_1.useState)(false), selectAll = _63[0], setSelectAll = _63[1];
-    var _64 = (0, react_1.useState)(""), deletePasscode = _64[0], setDeletePasscode = _64[1];
-    var _65 = (0, react_1.useState)(""), deletePasscodeInput = _65[0], setDeletePasscodeInput = _65[1];
-    var _66 = (0, react_1.useState)(""), deleteFeedId = _66[0], setDeleteFeedId = _66[1];
+    var _49 = (0, react_1.useState)(initialFilterSearch), filterSearch = _49[0], setFilterSearch = _49[1];
+    var _50 = (0, react_1.useState)(initialFilterSearchParams), filterSearchParams = _50[0], setFilterSearchParams = _50[1];
+    var _51 = (0, react_1.useState)(initialFilterSelection), filterSelection = _51[0], setFilterSelection = _51[1];
+    var _52 = (0, react_1.useState)(initialFilterReference), filterReference = _52[0], setFilterReference = _52[1];
+    var _53 = (0, react_1.useState)({}), filterReferenceSearch = _53[0], setFilterReferenceSearch = _53[1];
+    var _54 = (0, react_1.useState)({}), filterReferenceList = _54[0], setFilterReferenceList = _54[1];
+    var _55 = (0, react_1.useState)(initialFilterReferenceDate), filterReferenceDate = _55[0], setFilterReferenceDate = _55[1];
+    var _56 = (0, react_1.useState)(true), tableLoading = _56[0], setTableLoading = _56[1];
+    var _57 = (0, react_1.useState)(""), cursor = _57[0], setCursor = _57[1];
+    var _58 = (0, react_1.useState)(""), lastCursor = _58[0], setLastCursor = _58[1];
+    var _59 = (0, react_1.useState)([]), tableData = _59[0], setTableData = _59[1];
+    var _60 = (0, react_1.useState)([]), spaceTableData = _60[0], setSpaceTableData = _60[1];
+    var _61 = (0, react_1.useState)(0), size = _61[0], setSize = _61[1];
+    var _62 = (0, react_1.useState)((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0), pageIndex = _62[0], setPageIndex = _62[1];
+    var _63 = (0, react_1.useState)([]), selectedIds = _63[0], setSelectedIds = _63[1];
+    var _64 = (0, react_1.useState)(false), selectAll = _64[0], setSelectAll = _64[1];
+    var _65 = (0, react_1.useState)(""), deletePasscode = _65[0], setDeletePasscode = _65[1];
+    var _66 = (0, react_1.useState)(""), deletePasscodeInput = _66[0], setDeletePasscodeInput = _66[1];
+    var _67 = (0, react_1.useState)(""), deleteFeedId = _67[0], setDeleteFeedId = _67[1];
     //INFO : Used by List Organise
-    var _67 = (0, react_1.useState)(false), sortModal = _67[0], setSortModal = _67[1];
-    var _68 = (0, react_1.useState)(false), filterModal = _68[0], setFilterModal = _68[1];
-    var _69 = (0, react_1.useState)(false), filterDraft = _69[0], setFilterDraft = _69[1];
-    var _70 = (0, react_1.useState)(false), addTabModal = _70[0], setAddTabModal = _70[1];
-    var _71 = (0, react_1.useState)(false), overviewModal = _71[0], setOverviewModal = _71[1];
-    var _72 = (0, react_1.useState)(props.defaultTab
+    var _68 = (0, react_1.useState)(false), sortModal = _68[0], setSortModal = _68[1];
+    var _69 = (0, react_1.useState)(false), filterModal = _69[0], setFilterModal = _69[1];
+    var _70 = (0, react_1.useState)(false), filterDraft = _70[0], setFilterDraft = _70[1];
+    var _71 = (0, react_1.useState)(false), addTabModal = _71[0], setAddTabModal = _71[1];
+    var _72 = (0, react_1.useState)(false), overviewModal = _72[0], setOverviewModal = _72[1];
+    var _73 = (0, react_1.useState)(props.defaultTab
         ? (0, listModule_1.renderSelectedRefreshTab)(props.localURLEndpoint, props.type, props.collectionId, props.id, (_c = props.organise) === null || _c === void 0 ? void 0 : _c.extendedTabs, (_d = props.organise) === null || _d === void 0 ? void 0 : _d.viewId)
-        : ""), selectedTab = _72[0], setSelectedTab = _72[1];
-    var _73 = (0, react_1.useState)("dayGridMonth"), calendarView = _73[0], setCalendarView = _73[1];
-    var _74 = (0, react_1.useState)(new Date()), calendarTabMonth = _74[0], setCalendarTabMonth = _74[1];
-    var _75 = (0, react_1.useState)(true), kanbanDroppable = _75[0], setKanbanDroppable = _75[1];
-    var _76 = (0, react_1.useState)([]), kanbanOptions = _76[0], setKanbanOptions = _76[1];
-    var _77 = (0, react_1.useState)(false), queryForm = _77[0], setQueryForm = _77[1];
-    var _78 = (0, react_1.useState)(false), batchUpdateModal = _78[0], setBatchUpdateModal = _78[1];
-    var _79 = (0, react_1.useState)({
+        : ""), selectedTab = _73[0], setSelectedTab = _73[1];
+    var _74 = (0, react_1.useState)("dayGridMonth"), calendarView = _74[0], setCalendarView = _74[1];
+    var _75 = (0, react_1.useState)(new Date()), calendarTabMonth = _75[0], setCalendarTabMonth = _75[1];
+    var _76 = (0, react_1.useState)(true), kanbanDroppable = _76[0], setKanbanDroppable = _76[1];
+    var _77 = (0, react_1.useState)([]), kanbanOptions = _77[0], setKanbanOptions = _77[1];
+    var _78 = (0, react_1.useState)(false), queryForm = _78[0], setQueryForm = _78[1];
+    var _79 = (0, react_1.useState)(false), batchUpdateModal = _79[0], setBatchUpdateModal = _79[1];
+    var _80 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _79[0], setBatchUpdateData = _79[1];
-    var _80 = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.model) || []), structure = _80[0], setStructure = _80[1];
-    var _81 = (0, react_1.useState)(((_e = props === null || props === void 0 ? void 0 : props.organise) === null || _e === void 0 ? void 0 : _e.additionalQuery) || []), additionalQuery = _81[0], setAdditionalQuery = _81[1];
+    }), batchUpdateData = _80[0], setBatchUpdateData = _80[1];
+    var _81 = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.model) || []), structure = _81[0], setStructure = _81[1];
+    var _82 = (0, react_1.useState)(((_e = props === null || props === void 0 ? void 0 : props.organise) === null || _e === void 0 ? void 0 : _e.additionalQuery) || []), additionalQuery = _82[0], setAdditionalQuery = _82[1];
     // INFO: State for user-configurable flex filters (Monday.com-style)
     // INFO: Initialize with one empty row so users see inputs immediately without clicking "Add Filter"
-    var _82 = (0, react_1.useState)([
+    var _83 = (0, react_1.useState)([
         {
             id: "flex-filter-init-row",
             columnId: "",
             operator: "=",
             value: undefined,
         },
-    ]), flexFilters = _82[0], setFlexFilters = _82[1];
-    var _83 = (0, react_1.useState)({}), flexFilterReferenceOptions = _83[0], setFlexFilterReferenceOptions = _83[1];
-    var _84 = (0, react_1.useState)({}), flexFilterReferenceSearch = _84[0], setFlexFilterReferenceSearch = _84[1];
-    var _85 = (0, react_1.useState)(false), flexFilterModalOpen = _85[0], setFlexFilterModalOpen = _85[1];
+    ]), flexFilters = _83[0], setFlexFilters = _83[1];
+    var _84 = (0, react_1.useState)({}), flexFilterReferenceOptions = _84[0], setFlexFilterReferenceOptions = _84[1];
+    var _85 = (0, react_1.useState)({}), flexFilterReferenceSearch = _85[0], setFlexFilterReferenceSearch = _85[1];
+    var _86 = (0, react_1.useState)(false), flexFilterModalOpen = _86[0], setFlexFilterModalOpen = _86[1];
     //INFO : Used by Auth
-    var _86 = (0, react_1.useState)({
+    var _87 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
         create: false,
-    }), authMethods = _86[0], setAuthMethods = _86[1];
-    var _87 = (0, react_1.useState)(""), selectedAuthMethod = _87[0], setSelectedAuthMethod = _87[1];
+    }), authMethods = _87[0], setAuthMethods = _87[1];
+    var _88 = (0, react_1.useState)(""), selectedAuthMethod = _88[0], setSelectedAuthMethod = _88[1];
     // INFO: Used by Activity Log
-    var _88 = (0, react_1.useState)(false), activityModal = _88[0], setActivityModal = _88[1];
-    var _89 = (0, react_1.useState)(""), activityId = _89[0], setActivityId = _89[1];
+    var _89 = (0, react_1.useState)(false), activityModal = _89[0], setActivityModal = _89[1];
+    var _90 = (0, react_1.useState)(""), activityId = _90[0], setActivityId = _90[1];
     //INFO : Used by Export
-    var _90 = (0, react_1.useState)(null), csvFile = _90[0], setCSVFile = _90[1];
-    var _91 = (0, react_1.useState)([]), csvFileData = _91[0], setCSVFileData = _91[1];
-    var _92 = (0, react_1.useState)(0), stepCSVIndex = _92[0], setStepCSVIndex = _92[1];
-    var _93 = (0, react_1.useState)({}), listCSVMapAttribute = _93[0], setListCSVMapAttribute = _93[1];
-    var _94 = (0, react_1.useState)({}), listCSVObjAttribute = _94[0], setListCSVObjAttribute = _94[1];
-    var _95 = (0, react_1.useState)([]), csvAPIAttribute = _95[0], setCSVAPIAttribute = _95[1];
-    var _96 = (0, react_1.useState)(((_f = props.devSettings.currentUser) === null || _f === void 0 ? void 0 : _f.userEmail) || ""), exportCSVEmail = _96[0], setExportCSVEmail = _96[1];
-    var _97 = (0, react_1.useState)(((_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.exportSettings) === null || _h === void 0 ? void 0 : _h.defaultExportPDFName) || ""), exportPDFTitle = _97[0], setExportPDFTitle = _97[1];
-    var _98 = (0, react_1.useState)(false), exportPDFLoading = _98[0], setExportPDFLoading = _98[1];
-    var _99 = (0, react_1.useState)(false), exportReadPDFLoading = _99[0], setExportReadPDFLoading = _99[1];
-    var _100 = (0, react_1.useState)((_l = (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.sumColumnId) !== null && _l !== void 0 ? _l : []), exportSumAttributeIds = _100[0], setExportSumAttributeIds = _100[1];
-    var _101 = (0, react_1.useState)((_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.hideSubItems) !== null && _p !== void 0 ? _p : false), hideSubItems = _101[0], setHideSubItems = _101[1];
-    var _102 = (0, react_1.useState)([]), importTableData = _102[0], setImportTableData = _102[1];
-    var _103 = (0, react_1.useState)([]), queryList = _103[0], setQueryList = _103[1];
-    var _104 = (0, react_1.useState)(undefined), allQueryList = _104[0], setAllQueryList = _104[1];
-    var _105 = (0, react_1.useState)(-1), queryIndex = _105[0], setQueryIndex = _105[1];
-    var _106 = (0, react_1.useState)((_q = props.organise) === null || _q === void 0 ? void 0 : _q.groupBy), groupId = _106[0], setGroupId = _106[1];
-    var _107 = (0, react_1.useState)(""), readTabSection = _107[0], setReadTabSection = _107[1];
-    var _108 = (0, react_1.useState)(false), readFloatingNav = _108[0], setReadFloatingNav = _108[1];
+    var _91 = (0, react_1.useState)(null), csvFile = _91[0], setCSVFile = _91[1];
+    var _92 = (0, react_1.useState)([]), csvFileData = _92[0], setCSVFileData = _92[1];
+    var _93 = (0, react_1.useState)(0), stepCSVIndex = _93[0], setStepCSVIndex = _93[1];
+    var _94 = (0, react_1.useState)({}), listCSVMapAttribute = _94[0], setListCSVMapAttribute = _94[1];
+    var _95 = (0, react_1.useState)({}), listCSVObjAttribute = _95[0], setListCSVObjAttribute = _95[1];
+    var _96 = (0, react_1.useState)([]), csvAPIAttribute = _96[0], setCSVAPIAttribute = _96[1];
+    var _97 = (0, react_1.useState)(((_f = props.devSettings.currentUser) === null || _f === void 0 ? void 0 : _f.userEmail) || ""), exportCSVEmail = _97[0], setExportCSVEmail = _97[1];
+    var _98 = (0, react_1.useState)(((_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.exportSettings) === null || _h === void 0 ? void 0 : _h.defaultExportPDFName) || ""), exportPDFTitle = _98[0], setExportPDFTitle = _98[1];
+    var _99 = (0, react_1.useState)(false), exportPDFLoading = _99[0], setExportPDFLoading = _99[1];
+    var _100 = (0, react_1.useState)(false), exportReadPDFLoading = _100[0], setExportReadPDFLoading = _100[1];
+    var _101 = (0, react_1.useState)((_l = (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.sumColumnId) !== null && _l !== void 0 ? _l : []), exportSumAttributeIds = _101[0], setExportSumAttributeIds = _101[1];
+    var _102 = (0, react_1.useState)((_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.hideSubItems) !== null && _p !== void 0 ? _p : false), hideSubItems = _102[0], setHideSubItems = _102[1];
+    var _103 = (0, react_1.useState)([]), importTableData = _103[0], setImportTableData = _103[1];
+    var _104 = (0, react_1.useState)([]), queryList = _104[0], setQueryList = _104[1];
+    var _105 = (0, react_1.useState)(undefined), allQueryList = _105[0], setAllQueryList = _105[1];
+    var _106 = (0, react_1.useState)(-1), queryIndex = _106[0], setQueryIndex = _106[1];
+    var _107 = (0, react_1.useState)((_q = props.organise) === null || _q === void 0 ? void 0 : _q.groupBy), groupId = _107[0], setGroupId = _107[1];
+    var _108 = (0, react_1.useState)(""), readTabSection = _108[0], setReadTabSection = _108[1];
+    var _109 = (0, react_1.useState)(false), readFloatingNav = _109[0], setReadFloatingNav = _109[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _109 = (0, react_1.useState)(false), modalVisible = _109[0], setModalVisible = _109[1];
-    var _110 = (0, react_1.useState)(false), deleteModal = _110[0], setDeleteModal = _110[1];
-    var _111 = (0, react_1.useState)(false), excelModal = _111[0], setExcelModal = _111[1];
-    var _112 = (0, react_1.useState)(false), exportExcel = _112[0], setExportExcel = _112[1];
-    var _113 = (0, react_1.useState)(""), exportType = _113[0], setExportType = _113[1];
-    var _114 = (0, react_1.useState)(false), exportQR = _114[0], setExportQR = _114[1];
-    var _115 = (0, react_1.useState)(function () {
+    var _110 = (0, react_1.useState)(false), modalVisible = _110[0], setModalVisible = _110[1];
+    var _111 = (0, react_1.useState)(false), deleteModal = _111[0], setDeleteModal = _111[1];
+    var _112 = (0, react_1.useState)(false), excelModal = _112[0], setExcelModal = _112[1];
+    var _113 = (0, react_1.useState)(false), exportExcel = _113[0], setExportExcel = _113[1];
+    var _114 = (0, react_1.useState)(""), exportType = _114[0], setExportType = _114[1];
+    var _115 = (0, react_1.useState)(false), exportQR = _115[0], setExportQR = _115[1];
+    var _116 = (0, react_1.useState)(function () {
         var _a, _b;
         var firstTabId = (_b = (_a = structure.find(function (item) { return item.tabId; })) === null || _a === void 0 ? void 0 : _a.tabId) !== null && _b !== void 0 ? _b : "";
         return firstTabId;
-    }), activeTab = _115[0], setActiveTab = _115[1];
-    var _116 = (0, react_1.useState)(false), signatureSigning = _116[0], setSignatureSigning = _116[1];
-    var _117 = (0, react_1.useState)({}), selectedData = _117[0], setSelectedData = _117[1];
-    var _118 = (0, react_1.useState)(""), selectedObjectStructureId = _118[0], setSelectedObjectStructureId = _118[1];
-    var _119 = (0, react_1.useState)(""), selectedObjectId = _119[0], setSelectedObjectId = _119[1];
-    var _120 = (0, react_1.useState)(""), selectedListAddressId = _120[0], setSelectedListAddressId = _120[1];
-    var _121 = (0, react_1.useState)(-1), selectedListAddressIndex = _121[0], setSelectedListAddressIndex = _121[1];
-    var _122 = (0, react_1.useState)({
+    }), activeTab = _116[0], setActiveTab = _116[1];
+    var _117 = (0, react_1.useState)(false), signatureSigning = _117[0], setSignatureSigning = _117[1];
+    var _118 = (0, react_1.useState)({}), selectedData = _118[0], setSelectedData = _118[1];
+    var _119 = (0, react_1.useState)(""), selectedObjectStructureId = _119[0], setSelectedObjectStructureId = _119[1];
+    var _120 = (0, react_1.useState)(""), selectedObjectId = _120[0], setSelectedObjectId = _120[1];
+    var _121 = (0, react_1.useState)(""), selectedListAddressId = _121[0], setSelectedListAddressId = _121[1];
+    var _122 = (0, react_1.useState)(-1), selectedListAddressIndex = _122[0], setSelectedListAddressIndex = _122[1];
+    var _123 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _122[0], setSelectedListAddress = _122[1];
-    var _123 = (0, react_1.useState)({}), selectedObjectData = _123[0], setSelectedObjectData = _123[1];
-    var _124 = (0, react_1.useState)(false), referenceLoading = _124[0], setReferenceLoading = _124[1];
-    var _125 = (0, react_1.useState)({}), referencesOptions = _125[0], setReferencesOptions = _125[1];
-    var _126 = (0, react_1.useState)({}), referencesDetails = _126[0], setReferencesDetails = _126[1];
-    var _127 = (0, react_1.useState)({}), referenceDeleteTableData = _127[0], setReferenceDeleteTableData = _127[1];
-    var _128 = (0, react_1.useState)(0), referenceDeleteIndex = _128[0], setReferenceDeleteIndex = _128[1];
-    var _129 = (0, react_1.useState)({
+    }), selectedListAddress = _123[0], setSelectedListAddress = _123[1];
+    var _124 = (0, react_1.useState)({}), selectedObjectData = _124[0], setSelectedObjectData = _124[1];
+    var _125 = (0, react_1.useState)(false), referenceLoading = _125[0], setReferenceLoading = _125[1];
+    var _126 = (0, react_1.useState)({}), referencesOptions = _126[0], setReferencesOptions = _126[1];
+    var _127 = (0, react_1.useState)({}), referencesDetails = _127[0], setReferencesDetails = _127[1];
+    var _128 = (0, react_1.useState)({}), referenceDeleteTableData = _128[0], setReferenceDeleteTableData = _128[1];
+    var _129 = (0, react_1.useState)(0), referenceDeleteIndex = _129[0], setReferenceDeleteIndex = _129[1];
+    var _130 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _129[0], setReferenceCreationModal = _129[1];
-    var _130 = (0, react_1.useState)({}), referenceModelSchema = _130[0], setReferenceSchema = _130[1];
-    var _131 = (0, react_1.useState)([]), kanbanChecked = _131[0], setKanbanChecked = _131[1];
+    }), referenceCreationModal = _130[0], setReferenceCreationModal = _130[1];
+    var _131 = (0, react_1.useState)({}), referenceModelSchema = _131[0], setReferenceSchema = _131[1];
+    var _132 = (0, react_1.useState)([]), kanbanChecked = _132[0], setKanbanChecked = _132[1];
     //INFO : Offline
-    var _132 = (0, react_1.useState)(0), offlineDataLength = _132[0], setOfflineDataLength = _132[1];
-    var _133 = (0, react_1.useState)(false), offlineModal = _133[0], setOfflineModal = _133[1];
+    var _133 = (0, react_1.useState)(0), offlineDataLength = _133[0], setOfflineDataLength = _133[1];
+    var _134 = (0, react_1.useState)(false), offlineModal = _134[0], setOfflineModal = _134[1];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    var _134 = (0, react_1.useState)(false), isLive = _134[0], setIsLive = _134[1];
-    var _135 = (0, react_1.useState)(false), isLiveOffline = _135[0], setIsLiveOffline = _135[1];
+    var _135 = (0, react_1.useState)(false), isLive = _135[0], setIsLive = _135[1];
+    var _136 = (0, react_1.useState)(false), isLiveOffline = _136[0], setIsLiveOffline = _136[1];
     // INFO: true when navigator is offline — used to switch ReadQueryHoc between
     // server reads (online, full pagination) and IndexedDB reads (offline, cached data).
     // Independent of SSE status so it works even when bareSocketName is not set.
-    var _136 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _136[0], setIsNetworkOffline = _136[1];
+    var _137 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _137[0], setIsNetworkOffline = _137[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -426,29 +430,33 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var limit = props.limit ? props.limit : 10;
     var isEditor = ((_v = props.edit) === null || _v === void 0 ? void 0 : _v.allEditable) ? true : false;
     var isOffline = (_w = props.bareSettings) === null || _w === void 0 ? void 0 : _w.bareOffline;
-    var showId = (_x = props.space) === null || _x === void 0 ? void 0 : _x.showId;
+    // INFO: when bareOfflineNetworkAware is true, the save path is also gated on
+    // the live network state — online saves go to the server even if bareOffline
+    // is true, offline saves go to IDB as normal.
+    var isOfflineNetworkListener = isOffline && ((_x = props.bareSettings) === null || _x === void 0 ? void 0 : _x.bareOfflineNetworkListener);
+    var showId = (_y = props.space) === null || _y === void 0 ? void 0 : _y.showId;
     var remainId = showId || selectedObjectStructureId ? true : false;
-    var idField = ((_y = props.space) === null || _y === void 0 ? void 0 : _y.idField) || ((_z = props.organise) === null || _z === void 0 ? void 0 : _z.idField);
-    var pipeline = (_0 = props === null || props === void 0 ? void 0 : props.space) === null || _0 === void 0 ? void 0 : _0.pipeline;
-    if ((_1 = props.bareSettings) === null || _1 === void 0 ? void 0 : _1.bareListPipeline) {
+    var idField = ((_z = props.space) === null || _z === void 0 ? void 0 : _z.idField) || ((_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.idField);
+    var pipeline = (_1 = props === null || props === void 0 ? void 0 : props.space) === null || _1 === void 0 ? void 0 : _1.pipeline;
+    if ((_2 = props.bareSettings) === null || _2 === void 0 ? void 0 : _2.bareListPipeline) {
         pipeline = pipeline
             ? __spreadArray(__spreadArray([], pipeline, true), props.bareSettings.bareListPipeline, true) : props.bareSettings.bareListPipeline;
     }
-    var hasNavigation = ((_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.handleNavigate) ? true : false;
-    var columnType = (_4 = (_3 = props.bareSettings) === null || _3 === void 0 ? void 0 : _3.bareUpdateColumnType) !== null && _4 !== void 0 ? _4 : "two";
+    var hasNavigation = ((_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.handleNavigate) ? true : false;
+    var columnType = (_5 = (_4 = props.bareSettings) === null || _4 === void 0 ? void 0 : _4.bareUpdateColumnType) !== null && _5 !== void 0 ? _5 : "two";
     var formColumn = columnType === "one" ? "grid-cols-2" : "grid-cols-4";
-    var useMobileView = (_6 = (_5 = props.bareSettings) === null || _5 === void 0 ? void 0 : _5.bareUpdateMobileView) !== null && _6 !== void 0 ? _6 : false;
+    var useMobileView = (_7 = (_6 = props.bareSettings) === null || _6 === void 0 ? void 0 : _6.bareUpdateMobileView) !== null && _7 !== void 0 ? _7 : false;
     var gridGap = useMobileView ? "gap-x-6 gap-y-2 md:gap-y-6" : "gap-6";
-    var isActivityLog = (((_8 = (_7 = props.edit) === null || _7 === void 0 ? void 0 : _7.activityLog) === null || _8 === void 0 ? void 0 : _8.enableComments) &&
-        ((_9 = props.edit) === null || _9 === void 0 ? void 0 : _9.activityLog.commentCollectionId)) ||
-        (((_11 = (_10 = props.edit) === null || _10 === void 0 ? void 0 : _10.activityLog) === null || _11 === void 0 ? void 0 : _11.enableLogs) &&
-            ((_12 = props.edit) === null || _12 === void 0 ? void 0 : _12.activityLog.logsCollectionId));
-    var customPaginationSize = ((_13 = props.organise) === null || _13 === void 0 ? void 0 : _13.customPaginationCount)
+    var isActivityLog = (((_9 = (_8 = props.edit) === null || _8 === void 0 ? void 0 : _8.activityLog) === null || _9 === void 0 ? void 0 : _9.enableComments) &&
+        ((_10 = props.edit) === null || _10 === void 0 ? void 0 : _10.activityLog.commentCollectionId)) ||
+        (((_12 = (_11 = props.edit) === null || _11 === void 0 ? void 0 : _11.activityLog) === null || _12 === void 0 ? void 0 : _12.enableLogs) &&
+            ((_13 = props.edit) === null || _13 === void 0 ? void 0 : _13.activityLog.logsCollectionId));
+    var customPaginationSize = ((_14 = props.organise) === null || _14 === void 0 ? void 0 : _14.customPaginationCount)
         ? props.organise.customPaginationCount(size)
         : undefined;
     //TODO : Code - Pass ...devSettings, search dbEndpoint:
     var writeServerQuery = new writeQuery_1.WriteQuery({
-        dbModule: (_14 = props.lib) === null || _14 === void 0 ? void 0 : _14.axios,
+        dbModule: (_15 = props.lib) === null || _15 === void 0 ? void 0 : _15.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -456,7 +464,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var readServerQuery = new readQuery_1.ReadQuery({
-        dbModule: (_15 = props.lib) === null || _15 === void 0 ? void 0 : _15.axios,
+        dbModule: (_16 = props.lib) === null || _16 === void 0 ? void 0 : _16.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -464,9 +472,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var moreButtonPopUp = [
-        ((_16 = props.edit) === null || _16 === void 0 ? void 0 : _16.allEditable) &&
+        ((_17 = props.edit) === null || _17 === void 0 ? void 0 : _17.allEditable) &&
             !isFirebase &&
-            !((_18 = (_17 = props.organise) === null || _17 === void 0 ? void 0 : _17.exportSettings) === null || _18 === void 0 ? void 0 : _18.hideImportCSV)
+            !((_19 = (_18 = props.organise) === null || _18 === void 0 ? void 0 : _18.exportSettings) === null || _19 === void 0 ? void 0 : _19.hideImportCSV)
             ? {
                 text: "Import Excel",
                 onClick: function () {
@@ -475,7 +483,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_20 = (_19 = props.organise) === null || _19 === void 0 ? void 0 : _19.exportSettings) === null || _20 === void 0 ? void 0 : _20.hideExportCSV)
+        !((_21 = (_20 = props.organise) === null || _20 === void 0 ? void 0 : _20.exportSettings) === null || _21 === void 0 ? void 0 : _21.hideExportCSV)
             ? {
                 text: "Export CSV",
                 onClick: function () {
@@ -485,7 +493,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_22 = (_21 = props.organise) === null || _21 === void 0 ? void 0 : _21.exportSettings) === null || _22 === void 0 ? void 0 : _22.hideExportExcel)
+        !((_23 = (_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.exportSettings) === null || _23 === void 0 ? void 0 : _23.hideExportExcel)
             ? {
                 text: "Export Excel",
                 onClick: function () {
@@ -495,7 +503,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_24 = (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.exportSettings) === null || _24 === void 0 ? void 0 : _24.hideExportPDF)
+        !((_25 = (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.exportSettings) === null || _25 === void 0 ? void 0 : _25.hideExportPDF)
             ? {
                 text: "Export PDF",
                 onClick: function () {
@@ -505,7 +513,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_26 = (_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.exportSettings) === null || _26 === void 0 ? void 0 : _26.hideExportQR)
+        !((_27 = (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.exportSettings) === null || _27 === void 0 ? void 0 : _27.hideExportQR)
             ? {
                 text: "Export QR",
                 onClick: function () {
@@ -515,7 +523,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_28 = (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.exportSettings) === null || _28 === void 0 ? void 0 : _28.hideExportQR)
+        !((_29 = (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.exportSettings) === null || _29 === void 0 ? void 0 : _29.hideExportQR)
             ? {
                 text: "Export QR(Data)",
                 onClick: function () {
@@ -525,7 +533,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_30 = (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.exportSettings) === null || _30 === void 0 ? void 0 : _30.hideExportPrint)
+        !((_31 = (_30 = props.organise) === null || _30 === void 0 ? void 0 : _30.exportSettings) === null || _31 === void 0 ? void 0 : _31.hideExportPrint)
             ? {
                 text: "Print",
                 onClick: function () {
@@ -535,7 +543,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_32 = (_31 = props.organise) === null || _31 === void 0 ? void 0 : _31.exportSettings) === null || _32 === void 0 ? void 0 : _32.hideExportDraft)
+        !((_33 = (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.exportSettings) === null || _33 === void 0 ? void 0 : _33.hideExportDraft)
             ? {
                 text: filterDraft ? "Show All Items" : "Filter Draft",
                 onClick: function () {
@@ -544,7 +552,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             : null,
     ].filter(Boolean);
-    if ((_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.moreSettings)
+    if ((_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.moreSettings)
         moreButtonPopUp = moreButtonPopUp.concat(props.organise.moreSettings);
     //=====================================================================================
     //SECTION: Flex Filter Handlers
@@ -667,7 +675,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     (0, react_1.useEffect)(function () {
         handleOfflinePrefetch();
         /* eslint-disable */
-    }, [props.collectionId, (_34 = props.bareSettings) === null || _34 === void 0 ? void 0 : _34.bareOffline]);
+    }, [props.collectionId, (_35 = props.bareSettings) === null || _35 === void 0 ? void 0 : _35.bareOffline]);
     /* eslint-enable */
     // INFO: MRQ polling — calls handleRefresh every N ms (e.g. 1500) as a fallback.
     // Calls through handleRefreshRef so the interval always dispatches the latest
@@ -687,7 +695,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }, interval);
         return function () { return clearInterval(timer); };
         /* eslint-disable */
-    }, [(_35 = props.bareSettings) === null || _35 === void 0 ? void 0 : _35.barePollingInterval, isLive, isNetworkOffline]);
+    }, [(_36 = props.bareSettings) === null || _36 === void 0 ? void 0 : _36.barePollingInterval, isLive, isNetworkOffline]);
     /* eslint-enable */
     // INFO: Pub/Sub → SSE live-stream — driven by bareSettings.bareSocketName
     // EventSource URL: {sseEndpoint}/{room}?bm_apiToken={token}
@@ -729,7 +737,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         };
         /* eslint-disable */
     }, [
-        (_36 = props.bareSettings) === null || _36 === void 0 ? void 0 : _36.bareSocketName,
+        (_37 = props.bareSettings) === null || _37 === void 0 ? void 0 : _37.bareSocketName,
         props.collectionId,
         props.devSettings.sseEndpoint,
         props.devSettings.dbAPIToken,
@@ -958,10 +966,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         props.collectionId,
         props.model,
         props.localURLEndpoint,
-        (_37 = props.organise) === null || _37 === void 0 ? void 0 : _37.extendedTabs,
-        (_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.viewId,
-        (_39 = props.organise) === null || _39 === void 0 ? void 0 : _39.additionalQuery,
-        (_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.groupBy,
+        (_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.extendedTabs,
+        (_39 = props.organise) === null || _39 === void 0 ? void 0 : _39.viewId,
+        (_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.additionalQuery,
+        (_41 = props.organise) === null || _41 === void 0 ? void 0 : _41.groupBy,
         props.type,
     ]);
     (0, react_1.useEffect)(function () {
@@ -1051,7 +1059,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             };
         }, 100);
         return function () { return clearTimeout(timeoutId); };
-    }, [(_41 = props.organise) === null || _41 === void 0 ? void 0 : _41.showReadFloatingNav, props.type, props.id, loading]);
+    }, [(_42 = props.organise) === null || _42 === void 0 ? void 0 : _42.showReadFloatingNav, props.type, props.id, loading]);
     (0, react_1.useEffect)(function () {
         if (props.type !== "read")
             return;
@@ -1324,81 +1332,128 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     //   list          → mutate tableData row(s) in-place; drive IndexedDB offline store
     //   read / update → push update into selectedData; on delete navigate back to list
     var handleApplyEnvelope = function (envelope) { return __awaiter(void 0, void 0, void 0, function () {
-        var isListView, _a, record_1, record_2, record, deletedId_1, snapData_1, record_3, safeFields_1, record, record;
+        var isListView, prettifyRecords, _a, record_1, rawRecord, prettyRecord, record_2, idx, mergedRaw, prettyRecord, newTableData, newSpaceTableData, record, deletedId_1, newTableData, newSpaceTableData, snapData, rawMap_1, changedRecords_1, prettyMap_1, prettyChanged, newTableData, newSpaceTableData, record_3, safeFields_1, record, record;
         var _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
                     isListView = props.type === "list";
-                    if (!isListView) return [3 /*break*/, 10];
+                    if (!isListView) return [3 /*break*/, 13];
+                    prettifyRecords = function (records) { return __awaiter(void 0, void 0, void 0, function () {
+                        var resolved;
+                        var _a, _b, _c, _d, _e, _f;
+                        return __generator(this, function (_g) {
+                            switch (_g.label) {
+                                case 0:
+                                    if (!isOffline) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, handleResolveOfflineReferences(records)];
+                                case 1:
+                                    resolved = _g.sent();
+                                    return [2 /*return*/, resolved.map(function (eachData) {
+                                            var _a, _b;
+                                            var tempData = __assign({}, eachData);
+                                            (0, listModule_1.handleDataEditButton)(tempData, (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate, (_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareListActionBtns);
+                                            return tempData;
+                                        })];
+                                case 2: return [2 /*return*/, (0, listModule_1.handleListDataBasedOnModel)(records, props.devSettings, (_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios, structure, (_b = props.organise) === null || _b === void 0 ? void 0 : _b.handleNavigate, ((_c = props.organise) === null || _c === void 0 ? void 0 : _c.viewId) === "general", setActivityModal, setActivityId, isActivityLog ? (_d = props.edit) === null || _d === void 0 ? void 0 : _d.activityLog : undefined, (_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareListActionBtns, (_f = props.edit) === null || _f === void 0 ? void 0 : _f.disabledUpdate)];
+                            }
+                        });
+                    }); };
                     _a = envelope.type;
                     switch (_a) {
                         case "insert": return [3 /*break*/, 1];
-                        case "update": return [3 /*break*/, 3];
-                        case "delete": return [3 /*break*/, 5];
-                        case "snapshot": return [3 /*break*/, 7];
+                        case "update": return [3 /*break*/, 4];
+                        case "delete": return [3 /*break*/, 7];
+                        case "snapshot": return [3 /*break*/, 9];
                     }
-                    return [3 /*break*/, 9];
+                    return [3 /*break*/, 12];
                 case 1:
                     record_1 = envelope.payload;
-                    setTableData(function (prev) {
-                        if (prev.some(function (r) { return r._id === record_1._id; }))
-                            return prev;
-                        return __spreadArray([record_1], prev, true); // INFO: prepend — newest row at top
-                    });
-                    return [4 /*yield*/, indexedDb_1.indexedDb.handleUpsertLive(props.collectionId, record_1)];
+                    // INFO: skip if this record is already present (dedup)
+                    if (tableData.some(function (r) { return r._id === record_1._id; }))
+                        return [3 /*break*/, 12];
+                    rawRecord = __assign({}, record_1);
+                    if (rawRecord["_id"] && !rawRecord["id"]) {
+                        rawRecord["id"] = rawRecord["_id"];
+                    }
+                    return [4 /*yield*/, prettifyRecords([rawRecord])];
                 case 2:
-                    _c.sent();
-                    return [3 /*break*/, 9];
+                    prettyRecord = (_c.sent())[0];
+                    // INFO: prepend to both lists so the newest row appears at the top,
+                    // keeping tableData and spaceTableData positionally identical.
+                    handleSetListData(__spreadArray([rawRecord], tableData, true), __spreadArray([prettyRecord], spaceTableData, true));
+                    return [4 /*yield*/, indexedDb_1.indexedDb.handleUpsertLive(props.collectionId, record_1)];
                 case 3:
+                    _c.sent();
+                    return [3 /*break*/, 12];
+                case 4:
                     record_2 = envelope.payload;
-                    setTableData(function (prev) {
-                        var idx = prev.findIndex(function (r) { return r._id === record_2._id; });
-                        if (idx < 0)
-                            return prev; // INFO: row not in current page — skip
-                        var next = __spreadArray([], prev, true);
-                        next[idx] = __assign(__assign({}, next[idx]), record_2);
-                        return next;
-                    });
+                    idx = tableData.findIndex(function (r) { return r._id === record_2._id; });
+                    if (idx < 0)
+                        return [3 /*break*/, 12]; // INFO: row not in current page — skip
+                    mergedRaw = __assign(__assign({}, tableData[idx]), record_2);
+                    if (mergedRaw["_id"] && !mergedRaw["id"]) {
+                        mergedRaw["id"] = mergedRaw["_id"];
+                    }
+                    return [4 /*yield*/, prettifyRecords([mergedRaw])];
+                case 5:
+                    prettyRecord = (_c.sent())[0];
+                    newTableData = __spreadArray([], tableData, true);
+                    newSpaceTableData = __spreadArray([], spaceTableData, true);
+                    newTableData[idx] = mergedRaw;
+                    newSpaceTableData[idx] = prettyRecord;
+                    handleSetListData(newTableData, newSpaceTableData);
                     return [4 /*yield*/, indexedDb_1.indexedDb.handleUpsertLive(props.collectionId, record_2)];
-                case 4:
+                case 6:
                     _c.sent();
-                    return [3 /*break*/, 9];
-                case 5:
+                    return [3 /*break*/, 12];
+                case 7:
                     record = envelope.payload;
                     deletedId_1 = record._id;
-                    setTableData(function (prev) {
-                        return prev.filter(function (r) { return r._id !== deletedId_1; });
-                    });
+                    newTableData = tableData.filter(function (r) { return r._id !== deletedId_1; });
+                    newSpaceTableData = spaceTableData.filter(function (_, i) { var _a; return ((_a = tableData[i]) === null || _a === void 0 ? void 0 : _a._id) !== deletedId_1; });
+                    handleSetListData(newTableData, newSpaceTableData);
                     return [4 /*yield*/, indexedDb_1.indexedDb.handleDeleteLive(props.collectionId, deletedId_1)];
-                case 6:
+                case 8:
                     _c.sent();
-                    return [3 /*break*/, 9];
-                case 7:
-                    snapData_1 = Array.isArray(envelope.payload)
+                    return [3 /*break*/, 12];
+                case 9:
+                    snapData = Array.isArray(envelope.payload)
                         ? envelope.payload
                         : [envelope.payload];
-                    setTableData(function (prev) {
-                        var map = new Map(prev.map(function (r) { return [r._id, r]; }));
-                        snapData_1.forEach(function (r) {
-                            return map.set(r._id, __assign(__assign({}, map.get(r._id)), r));
-                        });
-                        return Array.from(map.values());
+                    rawMap_1 = new Map(tableData.map(function (r) { return [r._id, r]; }));
+                    changedRecords_1 = [];
+                    snapData.forEach(function (r) {
+                        var merged = __assign(__assign({}, rawMap_1.get(r._id)), r);
+                        if (merged["_id"] && !merged["id"])
+                            merged["id"] = merged["_id"];
+                        rawMap_1.set(r._id, merged);
+                        changedRecords_1.push(merged);
+                    });
+                    prettyMap_1 = new Map(tableData.map(function (r, i) { return [r._id, spaceTableData[i]]; }));
+                    return [4 /*yield*/, prettifyRecords(changedRecords_1)];
+                case 10:
+                    prettyChanged = _c.sent();
+                    prettyChanged.forEach(function (pretty, i) {
+                        prettyMap_1.set(changedRecords_1[i]._id, pretty);
                     });
+                    newTableData = Array.from(rawMap_1.values());
+                    newSpaceTableData = newTableData.map(function (r) { var _a; return (_a = prettyMap_1.get(r._id)) !== null && _a !== void 0 ? _a : r; });
+                    handleSetListData(newTableData, newSpaceTableData);
                     // INFO: persist reconciled docs to IndexedDB so offline mode stays
                     // consistent after a snapshot — mirrors what insert/update/delete do
                     // via handleUpsertLive.
-                    return [4 /*yield*/, Promise.all(snapData_1.map(function (r) {
+                    return [4 /*yield*/, Promise.all(snapData.map(function (r) {
                             return indexedDb_1.indexedDb.handleUpsertLive(props.collectionId, r);
                         }))];
-                case 8:
+                case 11:
                     // INFO: persist reconciled docs to IndexedDB so offline mode stays
                     // consistent after a snapshot — mirrors what insert/update/delete do
                     // via handleUpsertLive.
                     _c.sent();
-                    return [3 /*break*/, 9];
-                case 9: return [3 /*break*/, 11];
-                case 10:
+                    return [3 /*break*/, 12];
+                case 12: return [3 /*break*/, 14];
+                case 13:
                     // INFO: read / update view — push update into form; navigate away on delete
                     switch (envelope.type) {
                         case "update": {
@@ -1459,8 +1514,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             // handle collection-level rooms that may broadcast all event types.
                             break;
                     }
-                    _c.label = 11;
-                case 11: return [2 /*return*/];
+                    _c.label = 14;
+                case 14: return [2 /*return*/];
             }
         });
     }); };
@@ -2548,8 +2603,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         }); }))];
                                 case 2:
                                     _c.sent();
-                                    hadValidEntries = uploadedData_1.length > 0 ||
-                                        selectedField["upload"].length === 0;
+                                    hadValidEntries = uploadedData_1.length > 0 || selectedField["upload"].length === 0;
                                     if (!hadValidEntries)
                                         return [2 /*return*/, selectedField];
                                     return [2 /*return*/, selectedField["data"].concat(uploadedData_1)];
@@ -3719,17 +3773,17 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleSubmitData = function (type, rowId, columnId, data, offlineId, isOfflineUpdate, isDraft) { return __awaiter(void 0, void 0, void 0, function () {
-        var selectedId, id, createSelectedData_1, uniqueDataStructure, uniqueColumnId, res, offlineDataResp, offlineData, clonedForOffline, tempData, selectedIndex_3, err_20, isExistingDoc, newRecordData_1, changedAttributeIds, baseDraftValue, hasBaseDraftChange, offlineDataResp, clonedForOffline, tempData, selectedIndex_4, offlineData, err_21, dataToSubmit_2, changedAttributeIds, baseDraftValue, hasBaseDraftChange, operationType, selectedIndex_5, dataId, err_22, offlineDataResp, offlineData, clonedForOffline, tempData, selectedIndex_6, _a;
-        var _b, _c;
-        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-        return __generator(this, function (_w) {
-            switch (_w.label) {
+        var selectedId, id, createSelectedData_1, uniqueDataStructure, uniqueColumnId, res, offlineDataResp, offlineData, clonedForOffline, tempData, selectedIndex_3, err_20, isExistingDoc, newRecordData_1, changedAttributeIds, baseDraftValue, hasBaseDraftChange, offlineDataResp, clonedForOffline, tempData, selectedIndex_4, offlineData, err_21, dataToSubmit_2, changedAttributeIds, baseDraftValue, hasBaseDraftChange, operationType, selectedIndex_5, wentToServer, dataId, err_22, offlineDataResp, offlineData, clonedForOffline, tempData, selectedIndex_6, _a;
+        var _b, _c, _d;
+        var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        return __generator(this, function (_y) {
+            switch (_y.label) {
                 case 0:
                     selectedId = "";
                     id = "";
-                    _w.label = 1;
+                    _y.label = 1;
                 case 1:
-                    _w.trys.push([1, 37, , 43]);
+                    _y.trys.push([1, 39, , 45]);
                     if (type === "update")
                         selectedId = rowId !== null && rowId !== void 0 ? rowId : "";
                     else if (type === "create")
@@ -3747,24 +3801,26 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             id = (0, uuid_1.v4)();
                     }
                     else
-                        id = (_d = props.id) !== null && _d !== void 0 ? _d : "";
+                        id = (_e = props.id) !== null && _e !== void 0 ? _e : "";
                     if (offlineId) {
                         selectedId = offlineId;
                         id = offlineId;
                     }
-                    if (!(isOffline && !offlineId)) return [3 /*break*/, 2];
+                    if (!(isOffline &&
+                        !(isOfflineNetworkListener && !isNetworkOffline) &&
+                        !offlineId)) return [3 /*break*/, 2];
                     createSelectedData_1 = selectedData;
                     return [3 /*break*/, 4];
                 case 2: return [4 /*yield*/, handleUploadImage(id, data)];
                 case 3:
-                    createSelectedData_1 = _w.sent();
-                    _w.label = 4;
+                    createSelectedData_1 = _y.sent();
+                    _y.label = 4;
                 case 4:
                     uniqueDataStructure = structure.filter(function (eachStructure) {
                         return eachStructure.unique;
                     });
                     uniqueColumnId = uniqueDataStructure.length > 0 ? uniqueDataStructure[0].id : undefined;
-                    if ((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareUpdatePrefill) {
+                    if ((_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareUpdatePrefill) {
                         props.bareSettings.bareUpdatePrefill(selectedData).map(function (eachField) {
                             var key = eachField.key, value = eachField.value;
                             createSelectedData_1[key] = value;
@@ -3778,13 +3834,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     if (isDraft)
                         createSelectedData_1["baseDraft"] = true;
                     if (!isOffline) return [3 /*break*/, 10];
-                    _w.label = 5;
+                    _y.label = 5;
                 case 5:
-                    _w.trys.push([5, 8, , 9]);
+                    _y.trys.push([5, 8, , 9]);
                     return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
                 case 6:
-                    offlineDataResp = _w.sent();
-                    offlineData = (_f = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _f !== void 0 ? _f : [];
+                    offlineDataResp = _y.sent();
+                    offlineData = (_g = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _g !== void 0 ? _g : [];
                     clonedForOffline = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, true, showId);
                     tempData = (0, updateModule_1.handleParseOfflineWrite)(clonedForOffline, structure);
                     // INFO: Stamp the _id on the offline entry so subsequent saves can find and update it
@@ -3827,22 +3883,22 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             type: props.collectionId,
                         })];
                 case 7:
-                    _w.sent();
+                    _y.sent();
                     res = true;
                     return [3 /*break*/, 9];
                 case 8:
-                    err_20 = _w.sent();
+                    err_20 = _y.sent();
                     return [3 /*break*/, 9];
                 case 9: return [3 /*break*/, 16];
                 case 10:
                     if (!((idField && selectedData[idField]) ||
-                        ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareUpsertPartialUpdate))) return [3 /*break*/, 12];
-                    isExistingDoc = ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareUpsertPartialUpdate) &&
+                        ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareUpsertPartialUpdate))) return [3 /*break*/, 12];
+                    isExistingDoc = ((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareUpsertPartialUpdate) &&
                         loadedSelectedData.current != null;
                     if (isExistingDoc) {
                         changedAttributeIds = (0, updateModule_1.compareUpdatedFields)(loadedSelectedData.current, createSelectedData_1).changedAttributeIds;
                         baseDraftValue = isDraft ? true : false;
-                        hasBaseDraftChange = ((_k = (_j = loadedSelectedData.current) === null || _j === void 0 ? void 0 : _j["baseDraft"]) !== null && _k !== void 0 ? _k : false) !==
+                        hasBaseDraftChange = ((_l = (_k = loadedSelectedData.current) === null || _k === void 0 ? void 0 : _k["baseDraft"]) !== null && _l !== void 0 ? _l : false) !==
                             baseDraftValue;
                         // INFO: if nothing changed (including baseDraft), skip the write
                         if (changedAttributeIds.length === 0 && !hasBaseDraftChange)
@@ -3893,7 +3949,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             upsert: true,
                         })];
                 case 11:
-                    res = _w.sent();
+                    res = _y.sent();
                     return [3 /*break*/, 16];
                 case 12:
                     // INFO: stepper create guard — if a create is already in-flight, queue this
@@ -3913,7 +3969,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         })];
                 case 13:
                     //INFO: [CREATE] Create new data
-                    res = _w.sent();
+                    res = _y.sent();
                     if (!(selectedId === "new")) return [3 /*break*/, 16];
                     isCreatingRef.current = false;
                     if (!pendingDraftSaveRef.current) return [3 /*break*/, 15];
@@ -3925,21 +3981,23 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         })];
                 case 14:
                     // INFO: replay as update — inflightIdRef.current holds the real _id
-                    _w.sent();
-                    _w.label = 15;
+                    _y.sent();
+                    _y.label = 15;
                 case 15:
                     inflightIdRef.current = "";
-                    _w.label = 16;
+                    _y.label = 16;
                 case 16: return [3 /*break*/, 25];
                 case 17:
                     if (!selectedId) return [3 /*break*/, 25];
-                    if (!(isOffline && !offlineId)) return [3 /*break*/, 23];
-                    _w.label = 18;
+                    if (!(isOffline &&
+                        !(isOfflineNetworkListener && !isNetworkOffline) &&
+                        !offlineId)) return [3 /*break*/, 23];
+                    _y.label = 18;
                 case 18:
-                    _w.trys.push([18, 21, , 22]);
+                    _y.trys.push([18, 21, , 22]);
                     return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
                 case 19:
-                    offlineDataResp = _w.sent();
+                    offlineDataResp = _y.sent();
                     clonedForOffline = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, true, showId);
                     tempData = (0, updateModule_1.handleParseOfflineWrite)(clonedForOffline, structure);
                     tempData[serverId] = selectedId;
@@ -3951,7 +4009,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     tempData.syncStatus = "pending";
                     tempData.baseOnline = true; // INFO: existing server doc, updated offline
                     selectedIndex_4 = -1;
-                    offlineData = (_l = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _l !== void 0 ? _l : [];
+                    offlineData = (_m = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _m !== void 0 ? _m : [];
                     offlineData.map(function (eachOfflineData, index) {
                         var offlineDataId = eachOfflineData[serverId];
                         if (selectedId === offlineDataId)
@@ -3981,11 +4039,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             type: props.collectionId,
                         })];
                 case 20:
-                    _w.sent();
+                    _y.sent();
                     res = true;
                     return [3 /*break*/, 22];
                 case 21:
-                    err_21 = _w.sent();
+                    err_21 = _y.sent();
                     return [3 /*break*/, 22];
                 case 22: return [3 /*break*/, 25];
                 case 23:
@@ -3994,10 +4052,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             _b[columnId] = createSelectedData_1[columnId],
                             _b);
                     }
-                    else if ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareUpsertPartialUpdate) {
-                        changedAttributeIds = (0, updateModule_1.compareUpdatedFields)((_o = loadedSelectedData.current) !== null && _o !== void 0 ? _o : {}, createSelectedData_1).changedAttributeIds;
+                    else if ((_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareUpsertPartialUpdate) {
+                        changedAttributeIds = (0, updateModule_1.compareUpdatedFields)((_p = loadedSelectedData.current) !== null && _p !== void 0 ? _p : {}, createSelectedData_1).changedAttributeIds;
                         baseDraftValue = isDraft ? true : false;
-                        hasBaseDraftChange = ((_q = (_p = loadedSelectedData.current) === null || _p === void 0 ? void 0 : _p["baseDraft"]) !== null && _q !== void 0 ? _q : false) !==
+                        hasBaseDraftChange = ((_r = (_q = loadedSelectedData.current) === null || _q === void 0 ? void 0 : _q["baseDraft"]) !== null && _r !== void 0 ? _r : false) !==
                             baseDraftValue;
                         // INFO: if nothing changed (including baseDraft), skip the write entirely
                         if (changedAttributeIds.length === 0 && !hasBaseDraftChange)
@@ -4066,13 +4124,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             // doesn't exist yet (covers deterministicId passed directly as props.id).
                             // Also applies to offline upload path so the doc is created if it was
                             // deleted between the existence check and the write call.
-                            upsert: ((_r = props.bareSettings) === null || _r === void 0 ? void 0 : _r.bareUpsertPartialUpdate) && !isOfflineUpdate
+                            upsert: ((_s = props.bareSettings) === null || _s === void 0 ? void 0 : _s.bareUpsertPartialUpdate) && !isOfflineUpdate
                                 ? true
                                 : undefined,
                         })];
                 case 24:
-                    res = _w.sent();
-                    _w.label = 25;
+                    res = _y.sent();
+                    _y.label = 25;
                 case 25:
                     if (!(type === "update" || type === "create")) return [3 /*break*/, 33];
                     if (!res) return [3 /*break*/, 32];
@@ -4088,28 +4146,37 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     });
                     return [4 /*yield*/, handleGetListData({ data: tableData[selectedIndex_5] }, "update", rowId)];
                 case 26:
-                    _w.sent();
-                    _w.label = 27;
+                    _y.sent();
+                    _y.label = 27;
                 case 27: return [3 /*break*/, 30];
                 case 28: return [4 /*yield*/, handleGetListData({ data: [createSelectedData_1] }, "create")];
                 case 29:
-                    _w.sent();
-                    _w.label = 30;
+                    _y.sent();
+                    _y.label = 30;
                 case 30:
-                    if (!((_s = props.bareSettings) === null || _s === void 0 ? void 0 : _s.bareUpdateHandlePostComplete)) return [3 /*break*/, 32];
+                    if (!((_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareUpdateHandlePostComplete)) return [3 /*break*/, 32];
                     return [4 /*yield*/, props.bareSettings.bareUpdateHandlePostComplete(__assign((_c = {}, _c[serverId] = id, _c), createSelectedData_1))];
                 case 31:
-                    _w.sent();
-                    _w.label = 32;
-                case 32: return [3 /*break*/, 36];
+                    _y.sent();
+                    _y.label = 32;
+                case 32: return [3 /*break*/, 38];
                 case 33:
                     createSelectedData_1[serverId] = id;
                     if (!!isOffline) return [3 /*break*/, 35];
                     return [4 /*yield*/, handleGetListData({ data: [createSelectedData_1] }, selectedId === "new" ? "create" : "update", id)];
                 case 34:
-                    _w.sent();
-                    _w.label = 35;
+                    _y.sent();
+                    _y.label = 35;
                 case 35:
+                    wentToServer = res &&
+                        !offlineId &&
+                        (!isOffline || (isOfflineNetworkListener && !isNetworkOffline));
+                    if (!(wentToServer && ((_u = props.bareSettings) === null || _u === void 0 ? void 0 : _u.bareUpdateHandlePostComplete))) return [3 /*break*/, 37];
+                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePostComplete(__assign((_d = {}, _d[serverId] = id, _d), createSelectedData_1))];
+                case 36:
+                    _y.sent();
+                    _y.label = 37;
+                case 37:
                     setNotification({
                         type: true,
                         title: props.id === "new"
@@ -4119,12 +4186,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             ? "Data sucessfully created"
                             : "Data sucessfully updated",
                     });
-                    _w.label = 36;
-                case 36:
+                    _y.label = 38;
+                case 38:
                     dataId = res ? id : "";
                     return [2 /*return*/, dataId];
-                case 37:
-                    err_22 = _w.sent();
+                case 39:
+                    err_22 = _y.sent();
                     console.log("error", err_22);
                     // INFO: clear in-flight guard on failure so the next save retries as a create
                     if (isCreatingRef.current) {
@@ -4132,18 +4199,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         pendingDraftSaveRef.current = false;
                         inflightIdRef.current = "";
                     }
-                    if (!(((_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareOffline) &&
+                    if (!(((_v = props.bareSettings) === null || _v === void 0 ? void 0 : _v.bareOffline) &&
                         id &&
                         !offlineId &&
                         !isOfflineUpdate &&
-                        !err_22.response)) return [3 /*break*/, 42];
-                    _w.label = 38;
-                case 38:
-                    _w.trys.push([38, 41, , 42]);
+                        !err_22.response)) return [3 /*break*/, 44];
+                    _y.label = 40;
+                case 40:
+                    _y.trys.push([40, 43, , 44]);
                     return [4 /*yield*/, indexedDb_1.indexedDb.getValue("local", props.collectionId)];
-                case 39:
-                    offlineDataResp = _w.sent();
-                    offlineData = (_u = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _u !== void 0 ? _u : [];
+                case 41:
+                    offlineDataResp = _y.sent();
+                    offlineData = (_w = offlineDataResp === null || offlineDataResp === void 0 ? void 0 : offlineDataResp.data) !== null && _w !== void 0 ? _w : [];
                     clonedForOffline = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, true, showId);
                     tempData = (0, updateModule_1.handleParseOfflineWrite)(clonedForOffline, structure);
                     if (!tempData[serverId])
@@ -4179,8 +4246,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             data: offlineData,
                             type: props.collectionId,
                         })];
-                case 40:
-                    _w.sent();
+                case 42:
+                    _y.sent();
                     setNotification({
                         type: false,
                         title: selectedId === "new"
@@ -4191,12 +4258,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     handleCheckOfflineDataLength();
                     // INFO: return id so handleSubmit can navigate as if the save succeeded
                     return [2 /*return*/, id];
-                case 41:
-                    _a = _w.sent();
-                    return [3 /*break*/, 42];
-                case 42:
+                case 43:
+                    _a = _y.sent();
+                    return [3 /*break*/, 44];
+                case 44:
                     if (err_22.response && err_22.response.status === 400) {
-                        if (typeof ((_v = err_22.response.data) === null || _v === void 0 ? void 0 : _v.err) === "string")
+                        if (typeof ((_x = err_22.response.data) === null || _x === void 0 ? void 0 : _x.err) === "string")
                             setNotification({
                                 type: false,
                                 title: "Error",
@@ -4209,8 +4276,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 msg: "Please contact our administrator for assistance or try your request again later. We apologize for any inconvenience",
                             });
                     }
-                    return [3 /*break*/, 43];
-                case 43: return [2 /*return*/];
+                    return [3 /*break*/, 45];
+                case 45: return [2 /*return*/];
             }
         });
     }); };
@@ -7147,7 +7214,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return (react_1.default.createElement(settingsModal_1.ExpressionModal, { selectedId: id, model: structure, renderReferenceLabelOptions: (_a = props.organise) === null || _a === void 0 ? void 0 : _a.renderReferenceLabelOptions, renderReferenceSpaceOptions: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.renderReferenceSpaceOptions, onAddModelSchema: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.onAddColumns, onClose: onClose }));
     };
     var renderGroupTable = function (multipleSelect) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36;
         if (groupId) {
             var groupAttributeDS_1 = structure.find(function (eachDS) { return eachDS.id === groupId; });
             var groupedSpaceTableData = spaceTableData.reduce(function (acc, eachData) {
@@ -7270,25 +7337,131 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
         }
         else {
-            return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.disableSelectFullData) === null || _b === void 0 ? void 0 : _b.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+            // INFO: when bareNewDTW is enabled, render NewTable instead of legacy Table
+            if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW) {
+                return (react_1.default.createElement(newTable_1.NewTable, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_c = (_b = props.organise) === null || _b === void 0 ? void 0 : _b.disableSelectFullData) === null || _c === void 0 ? void 0 : _c.table, mobileView: (_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareListMobileView, mobileTooltip: (_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareMobileTooltip, multiActionFloatingBtns: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], (!((_f = props.edit) === null || _f === void 0 ? void 0 : _f.disabledUpdate) &&
+                        !((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareHideTableExtraMultipleAction)
+                        ? [
+                            {
+                                id: "draft",
+                                btnText: "Change to Draft",
+                                onClick: function () { return handleBatchDraftData(); },
+                                hide: selectedIds.length === 0,
+                            },
+                            {
+                                id: "clone",
+                                btnText: "Clone Items",
+                                onClick: function () { return handleCloneSelectedData(); },
+                                hide: selectedIds.length === 0,
+                            },
+                        ]
+                        : []), true), (((_h = props.edit) === null || _h === void 0 ? void 0 : _h.deleteBtn)
+                        ? [
+                            {
+                                id: "delete",
+                                btnText: "Delete",
+                                onClick: function () {
+                                    handleGenerateDeletePasscode();
+                                    setDeleteModal(true);
+                                },
+                            },
+                        ]
+                        : []), true), (!isFirebase && !((_j = props.edit) === null || _j === void 0 ? void 0 : _j.disableBatchUpdate)
+                        ? [
+                            {
+                                id: "update",
+                                btnText: "Update",
+                                onClick: function () { return setBatchUpdateModal(true); },
+                            },
+                        ]
+                        : []), true), (((_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareListMultipleSelectAddtionalActions)
+                        ? props.bareSettings.bareListMultipleSelectAddtionalActions.map(function (eachButton) { return ({
+                            id: "dt-list-multi-action-btn-" + eachButton.text,
+                            btnText: eachButton.text,
+                            onClick: function () {
+                                var _a, _b;
+                                return (_a = eachButton.onClick) === null || _a === void 0 ? void 0 : _a.call(eachButton, selectedIds, selectAll, (_b = renderImpSearchFilterConditions()) !== null && _b !== void 0 ? _b : []);
+                            },
+                        }); })
+                        : []), true), handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), pageIndex: pageIndex !== null && pageIndex !== void 0 ? pageIndex : 0, onClickRow: function (id) {
+                        var _a, _b;
+                        (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
+                    }, linkType: props.linkType, custom: props.custom, newTabUrl: (_m = (_l = props.newTabUrl) === null || _l === void 0 ? void 0 : _l.default) !== null && _m !== void 0 ? _m : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_p = (_o = props.newTabUrl) === null || _o === void 0 ? void 0 : _o.addons) !== null && _p !== void 0 ? _p : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                        handlePagination(value);
+                    }, className: "mt-5", devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_q = props.organise) === null || _q === void 0 ? void 0 : _q.fixedPagination, advSettings: {
+                        addColumnEnabled: (_r = props.organise) === null || _r === void 0 ? void 0 : _r.addColumnEnabled,
+                        renderAddColumnElements: renderAddMathColumn,
+                        dragEnabled: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.advDragEnabled,
+                        sortEnabled: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.advSortEnabled,
+                        filterEnabled: ((_u = props.bareSettings) === null || _u === void 0 ? void 0 : _u.bareFlexFilters)
+                            ? false
+                            : (_v = props.organise) === null || _v === void 0 ? void 0 : _v.advFilterEnabled,
+                        sortId: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.sort,
+                        sortOptions: (_y = (_x = props.organise) === null || _x === void 0 ? void 0 : _x.renderReferenceLabelOptions) === null || _y === void 0 ? void 0 : _y.call(_x),
+                        onSortColumn: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.onChangeSort,
+                        onDragColumn: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.onChangeDrag,
+                        filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
+                            var _a;
+                            return {
+                                key: eachQuery.value,
+                                label: (_a = eachQuery.label) !== null && _a !== void 0 ? _a : "",
+                            };
+                        }),
+                        renderFilterElements: function (id) {
+                            var selectedQuery = additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.filter(function (eachQuery) {
+                                return eachQuery.value === id;
+                            });
+                            var selectedModelList = structure.filter(function (eachModel) { return eachModel.id === id; });
+                            var newQuery = (0, listModule_1.renderSearchAdditionalQueries)(selectedModelList, selectedQuery);
+                            return renderSearchContent(newQuery);
+                        },
+                    }, editable: {
+                        active: ((_1 = props.edit) === null || _1 === void 0 ? void 0 : _1.listEditable) && !props.edit.disabledUpdate
+                            ? true
+                            : false,
+                        onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, handleSubmitData("update", rowId, columnId, data)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); },
+                    }, addable: {
+                        active: ((_2 = props.edit) === null || _2 === void 0 ? void 0 : _2.listAddable) ? true : false,
+                        onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, handleSubmitData("create", "", "", data)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); },
+                    }, darkMode: (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.darkMode, hidePagination: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.disableEllipsisOnLongWord, pinColumns: (_6 = props.bareSettings) === null || _6 === void 0 ? void 0 : _6.bareListTablePinColumns }));
+            }
+            return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_8 = (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.disableSelectFullData) === null || _8 === void 0 ? void 0 : _8.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                     selectedIds.length > 0 &&
-                        !((_c = props.edit) === null || _c === void 0 ? void 0 : _c.disabledUpdate) &&
-                        !((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
+                        !((_9 = props.edit) === null || _9 === void 0 ? void 0 : _9.disabledUpdate) &&
+                        !((_10 = props.bareSettings) === null || _10 === void 0 ? void 0 : _10.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Change to Draft", disable: loading, onClick: function () {
                                 handleBatchDraftData();
                             } }),
                         react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Clone Items", disable: loading, onClick: function () {
                                 handleCloneSelectedData();
                             } }))),
-                    ((_e = props.edit) === null || _e === void 0 ? void 0 : _e.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
+                    ((_11 = props.edit) === null || _11 === void 0 ? void 0 : _11.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
                             handleGenerateDeletePasscode();
                             setDeleteModal(true);
                         } })),
-                    !isFirebase && !((_f = props.edit) === null || _f === void 0 ? void 0 : _f.disableBatchUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
+                    !isFirebase && !((_12 = props.edit) === null || _12 === void 0 ? void 0 : _12.disableBatchUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
                             setBatchUpdateModal(true);
                         } })),
-                    ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListMultipleSelectAddtionalActions) &&
-                        ((_j = (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareListMultipleSelectAddtionalActions) === null || _j === void 0 ? void 0 : _j.map(function (eachButton) {
+                    ((_13 = props.bareSettings) === null || _13 === void 0 ? void 0 : _13.bareListMultipleSelectAddtionalActions) &&
+                        ((_15 = (_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareListMultipleSelectAddtionalActions) === null || _15 === void 0 ? void 0 : _15.map(function (eachButton) {
                             return (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm ".concat(eachButton.className), text: eachButton.text, onClick: function () {
                                     var _a, _b;
                                     (_a = eachButton.onClick) === null || _a === void 0 ? void 0 : _a.call(eachButton, selectedIds, selectAll, (_b = renderImpSearchFilterConditions()) !== null && _b !== void 0 ? _b : []);
@@ -7296,20 +7469,20 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }))), handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), pageIndex: pageIndex !== null && pageIndex !== void 0 ? pageIndex : 0, onClickRow: function (id) {
                     var _a, _b;
                     (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                }, linkType: props.linkType, custom: props.custom, newTabUrl: (_l = (_k = props.newTabUrl) === null || _k === void 0 ? void 0 : _k.default) !== null && _l !== void 0 ? _l : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_o = (_m = props.newTabUrl) === null || _m === void 0 ? void 0 : _m.addons) !== null && _o !== void 0 ? _o : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                }, linkType: props.linkType, custom: props.custom, newTabUrl: (_17 = (_16 = props.newTabUrl) === null || _16 === void 0 ? void 0 : _16.default) !== null && _17 !== void 0 ? _17 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_19 = (_18 = props.newTabUrl) === null || _18 === void 0 ? void 0 : _18.addons) !== null && _19 !== void 0 ? _19 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                     handlePagination(value);
-                }, className: "mt-5", lib: { axios: (_p = props.lib) === null || _p === void 0 ? void 0 : _p.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_q = props.organise) === null || _q === void 0 ? void 0 : _q.fixedPagination, advSettings: {
-                    addColumnEnabled: (_r = props.organise) === null || _r === void 0 ? void 0 : _r.addColumnEnabled,
+                }, className: "mt-5", lib: { axios: (_20 = props.lib) === null || _20 === void 0 ? void 0 : _20.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_21 = props.organise) === null || _21 === void 0 ? void 0 : _21.fixedPagination, advSettings: {
+                    addColumnEnabled: (_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.addColumnEnabled,
                     renderAddColumnElements: renderAddMathColumn,
-                    dragEnabled: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.advDragEnabled,
-                    sortEnabled: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.advSortEnabled,
-                    filterEnabled: ((_u = props.bareSettings) === null || _u === void 0 ? void 0 : _u.bareFlexFilters)
+                    dragEnabled: (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.advDragEnabled,
+                    sortEnabled: (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.advSortEnabled,
+                    filterEnabled: ((_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareFlexFilters)
                         ? false
-                        : (_v = props.organise) === null || _v === void 0 ? void 0 : _v.advFilterEnabled,
-                    sortId: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.sort,
-                    sortOptions: (_y = (_x = props.organise) === null || _x === void 0 ? void 0 : _x.renderReferenceLabelOptions) === null || _y === void 0 ? void 0 : _y.call(_x),
-                    onSortColumn: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.onChangeSort,
-                    onDragColumn: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.onChangeDrag,
+                        : (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.advFilterEnabled,
+                    sortId: (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.sort,
+                    sortOptions: (_29 = (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.renderReferenceLabelOptions) === null || _29 === void 0 ? void 0 : _29.call(_28),
+                    onSortColumn: (_30 = props.organise) === null || _30 === void 0 ? void 0 : _30.onChangeSort,
+                    onDragColumn: (_31 = props.organise) === null || _31 === void 0 ? void 0 : _31.onChangeDrag,
                     filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                         var _a;
                         return {
@@ -7326,7 +7499,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return renderSearchContent(newQuery);
                     },
                 }, editable: {
-                    active: ((_1 = props.edit) === null || _1 === void 0 ? void 0 : _1.listEditable) && !props.edit.disabledUpdate
+                    active: ((_32 = props.edit) === null || _32 === void 0 ? void 0 : _32.listEditable) && !props.edit.disabledUpdate
                         ? true
                         : false,
                     onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -7340,7 +7513,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         });
                     }); },
                 }, addable: {
-                    active: ((_2 = props.edit) === null || _2 === void 0 ? void 0 : _2.listAddable) ? true : false,
+                    active: ((_33 = props.edit) === null || _33 === void 0 ? void 0 : _33.listAddable) ? true : false,
                     onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
@@ -7351,11 +7524,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                         });
                     }); },
-                }, darkMode: (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.darkMode, hidePagination: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.disableEllipsisOnLongWord }));
+                }, darkMode: (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.darkMode, hidePagination: (_35 = props.organise) === null || _35 === void 0 ? void 0 : _35.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.disableEllipsisOnLongWord }));
         }
     };
     var renderTabContent = function (tabs, dataType, viewType) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29;
         var selectedTabData = tabs.find(function (eachTab) {
             if (eachTab.id === viewType) {
                 return eachTab;
@@ -7536,27 +7709,50 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }
             }
             else if (selectedTabData.viewType === "list") {
+                // INFO: when bareNewDTW is enabled, render NewList instead of legacy List
+                if ((_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareNewDTW) {
+                    return (react_1.default.createElement(newList_1.NewList, { paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_s = (_r = props.organise) === null || _r === void 0 ? void 0 : _r.disableSelectFullData) === null || _s === void 0 ? void 0 : _s.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                            selectedIds.length > 0 && !((_t = props.edit) === null || _t === void 0 ? void 0 : _t.disabledUpdate) && (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Change to Draft", disable: loading, onClick: function () {
+                                        handleBatchDraftData();
+                                    } }),
+                                react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Clone Items", disable: loading, onClick: function () {
+                                        handleCloneSelectedData();
+                                    } }))),
+                            ((_u = props.edit) === null || _u === void 0 ? void 0 : _u.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
+                                    handleGenerateDeletePasscode();
+                                    setDeleteModal(true);
+                                } })),
+                            !isFirebase && !((_v = props.edit) === null || _v === void 0 ? void 0 : _v.disabledUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
+                                    setBatchUpdateModal(true);
+                                } }))), onClickRow: function (id) {
+                            var _a, _b;
+                            (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_x = (_w = props.newTabUrl) === null || _w === void 0 ? void 0 : _w.default) !== null && _x !== void 0 ? _x : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_z = (_y = props.newTabUrl) === null || _y === void 0 ? void 0 : _y.addons) !== null && _z !== void 0 ? _z : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                            handlePagination(value);
+                        }, darkMode: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.darkMode, className: "mt-5", hidePagination: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.hidePagination, customPaginationSize: customPaginationSize, mobileTooltip: (_2 = props.bareSettings) === null || _2 === void 0 ? void 0 : _2.bareListMobileTooltip }));
+                }
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(list_1.List, { paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.disableSelectFullData) === null || _r === void 0 ? void 0 : _r.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
-                            selectedIds.length > 0 && !((_s = props.edit) === null || _s === void 0 ? void 0 : _s.disabledUpdate) && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(list_1.List, { paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_4 = (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.disableSelectFullData) === null || _4 === void 0 ? void 0 : _4.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                            selectedIds.length > 0 && !((_5 = props.edit) === null || _5 === void 0 ? void 0 : _5.disabledUpdate) && (react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Change to Draft", disable: loading, onClick: function () {
                                         handleBatchDraftData();
                                     } }),
                                 react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Clone Items", disable: loading, onClick: function () {
                                         handleCloneSelectedData();
                                     } }))),
-                            ((_t = props.edit) === null || _t === void 0 ? void 0 : _t.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
+                            ((_6 = props.edit) === null || _6 === void 0 ? void 0 : _6.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
                                     handleGenerateDeletePasscode();
                                     setDeleteModal(true);
                                 } })),
-                            !isFirebase && !((_u = props.edit) === null || _u === void 0 ? void 0 : _u.disabledUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
+                            !isFirebase && !((_7 = props.edit) === null || _7 === void 0 ? void 0 : _7.disabledUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
                                     setBatchUpdateModal(true);
                                 } }))), onClickRow: function (id) {
                             var _a, _b;
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_w = (_v = props.newTabUrl) === null || _v === void 0 ? void 0 : _v.default) !== null && _w !== void 0 ? _w : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_y = (_x = props.newTabUrl) === null || _x === void 0 ? void 0 : _x.addons) !== null && _y !== void 0 ? _y : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_9 = (_8 = props.newTabUrl) === null || _8 === void 0 ? void 0 : _8.default) !== null && _9 !== void 0 ? _9 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_11 = (_10 = props.newTabUrl) === null || _10 === void 0 ? void 0 : _10.addons) !== null && _11 !== void 0 ? _11 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, className: "mt-5", hidePagination: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.hidePagination, customPaginationSize: customPaginationSize })));
+                        }, className: "mt-5", hidePagination: (_12 = props.organise) === null || _12 === void 0 ? void 0 : _12.hidePagination, customPaginationSize: customPaginationSize })));
             }
             else if (selectedTabData.viewType === "grid") {
                 var isScrollMode = renderCheckScrollMode();
@@ -7564,9 +7760,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     react_1.default.createElement(grid_1.Grid, { paginationType: renderResolvedPaginationType(), data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, horizontalScroll: isScrollMode, pageIndex: pageIndex, onClickData: function (id) {
                             var _a, _b;
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_1 = (_0 = props.newTabUrl) === null || _0 === void 0 ? void 0 : _0.default) !== null && _1 !== void 0 ? _1 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_3 = (_2 = props.newTabUrl) === null || _2 === void 0 ? void 0 : _2.addons) !== null && _3 !== void 0 ? _3 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_14 = (_13 = props.newTabUrl) === null || _13 === void 0 ? void 0 : _13.default) !== null && _14 !== void 0 ? _14 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_16 = (_15 = props.newTabUrl) === null || _15 === void 0 ? void 0 : _15.addons) !== null && _16 !== void 0 ? _16 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, imgContain: selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.gridContain, gridColClassName: (_4 = props.bareSettings) === null || _4 === void 0 ? void 0 : _4.bareListGridColClassName, className: "mt-5", hidePagination: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.hidePagination, customPaginationSize: customPaginationSize })));
+                        }, imgContain: selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.gridContain, gridColClassName: (_17 = props.bareSettings) === null || _17 === void 0 ? void 0 : _17.bareListGridColClassName, className: "mt-5", hidePagination: (_18 = props.organise) === null || _18 === void 0 ? void 0 : _18.hidePagination, customPaginationSize: customPaginationSize })));
             }
             else if (selectedTabData.viewType === "calendar") {
                 var calendarSettings_1 = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.calendarSettings;
@@ -7660,7 +7856,38 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }
                     return eventAvailabilities;
                 };
-                return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement(calendar_1.Calendar, { currentDate: calendarTabMonth, calendarView: (_6 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.defaultView) !== null && _6 !== void 0 ? _6 : calendarView, handleMonthChange: function (date) {
+                // INFO: when bareNewDTW is enabled, render NewCalendar instead of legacy Calendar
+                if ((_19 = props.bareSettings) === null || _19 === void 0 ? void 0 : _19.bareNewDTW) {
+                    var newCalendarEvents = renderEventAvailabilities().map(function (ev) {
+                        var _a, _b, _c, _d;
+                        return ({
+                            id: (_a = ev.id) !== null && _a !== void 0 ? _a : "",
+                            title: (_b = ev.title) !== null && _b !== void 0 ? _b : "",
+                            start: (_d = (_c = ev.start) !== null && _c !== void 0 ? _c : ev.date) !== null && _d !== void 0 ? _d : new Date(),
+                            end: ev.end,
+                            type: ev.status,
+                            color: ev.bgColor,
+                            bgColor: ev.bgColor,
+                            hoverColor: ev.hoverColor,
+                            textColor: ev.textColor,
+                            status: ev.status,
+                            date: ev.date,
+                        });
+                    });
+                    return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement(newCalendar_1.NewCalendar, { variant: "fullMonth", events: newCalendarEvents, selectedDate: calendarTabMonth, onSelectDate: function (date) {
+                            var startOfMonth = (0, dayjs_1.default)(calendarTabMonth).startOf("month");
+                            var endOfMonth = (0, dayjs_1.default)(calendarTabMonth).endOf("month");
+                            if (!(0, dayjs_1.default)(date).isBetween(startOfMonth, endOfMonth)) {
+                                setTableLoading(true);
+                            }
+                            setCalendarTabMonth(date);
+                        }, onClickEvent: function (event) {
+                            var _a, _b;
+                            if (event.id)
+                                (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", event.id, "general");
+                        }, darkMode: (_20 = props.organise) === null || _20 === void 0 ? void 0 : _20.darkMode, className: "w-full" }))));
+                }
+                return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement(calendar_1.Calendar, { currentDate: calendarTabMonth, calendarView: (_21 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.defaultView) !== null && _21 !== void 0 ? _21 : calendarView, handleMonthChange: function (date) {
                         var startOfMonth = (0, dayjs_1.default)(calendarTabMonth).startOf("month");
                         var endOfMonth = (0, dayjs_1.default)(calendarTabMonth).endOf("month");
                         if (!(0, dayjs_1.default)(date).isBetween(startOfMonth, endOfMonth)) {
@@ -7678,7 +7905,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             else if (selectedTabData.viewType === "feeds") {
                 var contentList_1 = [];
                 var feedsSettings_1 = selectedTabData.feedsSettings;
-                var customFeedsData = (_7 = feedsSettings_1 === null || feedsSettings_1 === void 0 ? void 0 : feedsSettings_1.customFeedsData) === null || _7 === void 0 ? void 0 : _7.call(feedsSettings_1, tableData, spaceTableData);
+                var customFeedsData = (_22 = feedsSettings_1 === null || feedsSettings_1 === void 0 ? void 0 : feedsSettings_1.customFeedsData) === null || _22 === void 0 ? void 0 : _22.call(feedsSettings_1, tableData, spaceTableData);
                 if (customFeedsData && customFeedsData.length > 0) {
                     customFeedsData.map(function (eachData) {
                         var _a, _b, _c, _d;
@@ -7719,11 +7946,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     });
                 }
                 return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement("div", { className: "p-4 bg-white rounded-lg" },
-                    react_1.default.createElement(feeds_1.Feeds, { bold: true, content: contentList_1, darkMode: (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.darkMode }),
+                    react_1.default.createElement(feeds_1.Feeds, { bold: true, content: contentList_1, darkMode: (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.darkMode }),
                     react_1.default.createElement("div", { className: "my-10" }),
-                    contentList_1.length > 0 && !((_9 = props.organise) === null || _9 === void 0 ? void 0 : _9.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: renderResolvedPaginationType(), handleUpdatePageIndex: function (value) {
+                    contentList_1.length > 0 && !((_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: renderResolvedPaginationType(), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, darkMode: (_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.darkMode, customPaginationSize: customPaginationSize }))))));
+                        }, darkMode: (_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.darkMode, customPaginationSize: customPaginationSize }))))));
             }
             else if (selectedTabData.viewType === "map") {
                 var mapSettings_1 = selectedTabData.mapSettings;
@@ -7822,7 +8049,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             else if (selectedTabData.viewType === "kanban") {
                 var kanbanSettings = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.kanbanSettings;
-                var kanbanTitle_2 = (_11 = kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.title) !== null && _11 !== void 0 ? _11 : "";
+                var kanbanTitle_2 = (_26 = kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.title) !== null && _26 !== void 0 ? _26 : "";
                 var nullColumn_1 = false;
                 var groupBy_1 = [];
                 var groupLabel_1 = [];
@@ -7842,6 +8069,21 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return null;
                 });
                 var kanbanData = renderGridAndListData("", "kanban", kanbanTitle_2, kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.useColumnName);
+                // INFO: when bareNewDTW is enabled, render NewKanban instead of legacy Kanban
+                if ((_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.bareNewDTW) {
+                    return (react_1.default.createElement(newKanban_1.NewKanban, { className: "inline-flex", data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
+                            ? "Data has exceeded limit, please apply filters"
+                            : "", groupCluster: kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.groupCluster, draggable: true, droppable: kanbanDroppable, mobileView: (_28 = props.bareSettings) === null || _28 === void 0 ? void 0 : _28.bareListMobileView, onUpdateData: function (cardId, _fromCol, toCol) {
+                            var _a;
+                            setKanbanDroppable(false);
+                            handleSubmitData("update", cardId, kanbanTitle_2, (_a = {},
+                                _a[kanbanTitle_2] = toCol,
+                                _a)).then(function () { return setKanbanDroppable(true); });
+                        }, onClickData: function (id) {
+                            var _a, _b;
+                            (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
+                        }, darkMode: (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.darkMode }));
+                }
                 return (react_1.default.createElement(kanban_1.Kanban, { className: "inline-flex", data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
                         ? "Data has exceeded limit, please apply filters"
                         : "", groupCluster: kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.groupCluster, draggable: true, droppable: kanbanDroppable, onUpdateData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -8354,7 +8596,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_43 = (_42 = props.renderSettings) === null || _42 === void 0 ? void 0 : _42.renderLoadingUI) === null || _43 === void 0 ? void 0 : _43.call(_42)) && loading ? ((_44 = props.renderSettings) === null || _44 === void 0 ? void 0 : _44.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
+        ((_44 = (_43 = props.renderSettings) === null || _43 === void 0 ? void 0 : _43.renderLoadingUI) === null || _44 === void 0 ? void 0 : _44.call(_43)) && loading ? ((_45 = props.renderSettings) === null || _45 === void 0 ? void 0 : _45.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
                 var _a, _b;
                 if (loading)
                     return;