blixify-ui-web 1.2.53 → 1.2.55

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

@@ -150,8 +150,8 @@ var socket_1 = require("./socket");
 var pagination_1 = require("./pagination");
 var referenceModal_1 = require("./referenceModal");
 var settingsModal_1 = require("./settingsModal");
-var flexFilterModel_1 = require("./flexFilterModel");
-var flexFilterModule_1 = require("./flexFilterModule");
+var flexFilter_1 = require("../flexFilter");
+var viewStatePersistence_1 = require("./viewStatePersistence");
 // INFO: builds the notification message for a failed write. Callers must gate on
 // `err.response` alone, never on a specific status — a catch that only handles 400 shows
 // the user nothing at all for any other status, so a write silently disappears. A 5xx is
@@ -167,7 +167,7 @@ var handleGetWriteErrorMessage = function (response) {
     return "Please contact our administrator for assistance or try your request again later. We apologize for any inconvenience";
 };
 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;
+    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, _46, _47, _48, _49;
     var intialiseDefaultFilterValues = function () {
         var _a;
         var initialFilterSearch = {};
@@ -228,159 +228,195 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             initialFilterReferenceDate: initialFilterReferenceDate,
         };
     };
-    var _42 = intialiseDefaultFilterValues(), initialFilterSearch = _42.initialFilterSearch, initialFilterSearchParams = _42.initialFilterSearchParams, initialFilterSelection = _42.initialFilterSelection, initialFilterReference = _42.initialFilterReference, initialFilterReferenceDate = _42.initialFilterReferenceDate;
-    var _43 = (0, react_1.useState)(false), loading = _43[0], setLoading = _43[1];
-    var _44 = (0, react_1.useState)(), notification = _44[0], setNotification = _44[1];
+    var _50 = intialiseDefaultFilterValues(), initialFilterSearch = _50.initialFilterSearch, initialFilterSearchParams = _50.initialFilterSearchParams, initialFilterSelection = _50.initialFilterSelection, initialFilterReference = _50.initialFilterReference, initialFilterReferenceDate = _50.initialFilterReferenceDate;
+    // INFO: Persist view state hook — handles storage read/write for filter/sort/column state
+    var _51 = (0, viewStatePersistence_1.usePersistedViewState)({
+        mode: (_a = props.organise) === null || _a === void 0 ? void 0 : _a.persistViewState,
+        collectionId: props.collectionId,
+        uniqueLabel: props.uniqueLabel,
+        type: props.type,
+    }), persistedState = _51.persistedState, isPersistEnabled = _51.isEnabled, handleSaveView = _51.handleSaveView;
+    var _52 = (0, react_1.useState)(false), loading = _52[0], setLoading = _52[1];
+    var _53 = (0, react_1.useState)(), notification = _53[0], setNotification = _53[1];
     //INFO : Used by List
-    var _45 = (0, react_1.useState)(initialFilterSearch), filterSearch = _45[0], setFilterSearch = _45[1];
-    var _46 = (0, react_1.useState)(initialFilterSearchParams), filterSearchParams = _46[0], setFilterSearchParams = _46[1];
-    var _47 = (0, react_1.useState)(initialFilterSelection), filterSelection = _47[0], setFilterSelection = _47[1];
-    var _48 = (0, react_1.useState)(initialFilterReference), filterReference = _48[0], setFilterReference = _48[1];
-    var _49 = (0, react_1.useState)({}), filterReferenceSearch = _49[0], setFilterReferenceSearch = _49[1];
-    var _50 = (0, react_1.useState)({}), filterReferenceList = _50[0], setFilterReferenceList = _50[1];
-    var _51 = (0, react_1.useState)(initialFilterReferenceDate), filterReferenceDate = _51[0], setFilterReferenceDate = _51[1];
-    var _52 = (0, react_1.useState)(true), tableLoading = _52[0], setTableLoading = _52[1];
-    var _53 = (0, react_1.useState)(""), cursor = _53[0], setCursor = _53[1];
-    var _54 = (0, react_1.useState)(""), lastCursor = _54[0], setLastCursor = _54[1];
-    var _55 = (0, react_1.useState)([]), tableData = _55[0], setTableData = _55[1];
-    var _56 = (0, react_1.useState)([]), spaceTableData = _56[0], setSpaceTableData = _56[1];
-    var _57 = (0, react_1.useState)(0), size = _57[0], setSize = _57[1];
-    var _58 = (0, react_1.useState)((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0), pageIndex = _58[0], setPageIndex = _58[1];
-    var _59 = (0, react_1.useState)([]), selectedIds = _59[0], setSelectedIds = _59[1];
-    var _60 = (0, react_1.useState)(false), selectAll = _60[0], setSelectAll = _60[1];
-    var _61 = (0, react_1.useState)(""), deletePasscode = _61[0], setDeletePasscode = _61[1];
-    var _62 = (0, react_1.useState)(""), deletePasscodeInput = _62[0], setDeletePasscodeInput = _62[1];
-    var _63 = (0, react_1.useState)(""), deleteFeedId = _63[0], setDeleteFeedId = _63[1];
+    var _54 = (0, react_1.useState)((_b = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _b !== void 0 ? _b : initialFilterSearch), filterSearch = _54[0], setFilterSearch = _54[1];
+    var _55 = (0, react_1.useState)((_c = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _c !== void 0 ? _c : initialFilterSearchParams), filterSearchParams = _55[0], setFilterSearchParams = _55[1];
+    var _56 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _d !== void 0 ? _d : initialFilterSelection), filterSelection = _56[0], setFilterSelection = _56[1];
+    var _57 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _e !== void 0 ? _e : initialFilterReference), filterReference = _57[0], setFilterReference = _57[1];
+    var _58 = (0, react_1.useState)({}), filterReferenceSearch = _58[0], setFilterReferenceSearch = _58[1];
+    var _59 = (0, react_1.useState)({}), filterReferenceList = _59[0], setFilterReferenceList = _59[1];
+    var _60 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
+        ? (0, viewStatePersistence_1.parseDateFilterState)(persistedState.filterReferenceDate)
+        : initialFilterReferenceDate), filterReferenceDate = _60[0], setFilterReferenceDate = _60[1];
+    var _61 = (0, react_1.useState)(true), tableLoading = _61[0], setTableLoading = _61[1];
+    var _62 = (0, react_1.useState)(""), cursor = _62[0], setCursor = _62[1];
+    var _63 = (0, react_1.useState)(""), lastCursor = _63[0], setLastCursor = _63[1];
+    var _64 = (0, react_1.useState)([]), tableData = _64[0], setTableData = _64[1];
+    var _65 = (0, react_1.useState)([]), spaceTableData = _65[0], setSpaceTableData = _65[1];
+    var _66 = (0, react_1.useState)(0), size = _66[0], setSize = _66[1];
+    var _67 = (0, react_1.useState)((_h = (_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _f !== void 0 ? _f : (_g = props.organise) === null || _g === void 0 ? void 0 : _g.pageIndex) !== null && _h !== void 0 ? _h : 0), pageIndex = _67[0], setPageIndex = _67[1];
+    var _68 = (0, react_1.useState)([]), selectedIds = _68[0], setSelectedIds = _68[1];
+    var _69 = (0, react_1.useState)(false), selectAll = _69[0], setSelectAll = _69[1];
+    var _70 = (0, react_1.useState)(""), deletePasscode = _70[0], setDeletePasscode = _70[1];
+    var _71 = (0, react_1.useState)(""), deletePasscodeInput = _71[0], setDeletePasscodeInput = _71[1];
+    var _72 = (0, react_1.useState)(""), deleteFeedId = _72[0], setDeleteFeedId = _72[1];
     //INFO : Used by List Organise
-    var _64 = (0, react_1.useState)(false), sortModal = _64[0], setSortModal = _64[1];
-    var _65 = (0, react_1.useState)(false), filterModal = _65[0], setFilterModal = _65[1];
-    var _66 = (0, react_1.useState)(false), filterDraft = _66[0], setFilterDraft = _66[1];
-    var _67 = (0, react_1.useState)(false), addTabModal = _67[0], setAddTabModal = _67[1];
-    var _68 = (0, react_1.useState)(false), overviewModal = _68[0], setOverviewModal = _68[1];
+    var _73 = (0, react_1.useState)(false), sortModal = _73[0], setSortModal = _73[1];
+    var _74 = (0, react_1.useState)(false), filterModal = _74[0], setFilterModal = _74[1];
+    // INFO: Internal sort state that overrides props.organise?.sort when
+    // persistViewState is enabled and a persisted sort exists
+    var _75 = (0, react_1.useState)((_j = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _j !== void 0 ? _j : undefined), persistedSort = _75[0], setPersistedSort = _75[1];
+    var _76 = (0, react_1.useState)(false), filterDraft = _76[0], setFilterDraft = _76[1];
+    var _77 = (0, react_1.useState)(false), addTabModal = _77[0], setAddTabModal = _77[1];
+    var _78 = (0, react_1.useState)(false), overviewModal = _78[0], setOverviewModal = _78[1];
     //INFO : resolve the initial tab synchronously so the mount cond is already
     // tab-scoped — an empty initial tab caused a second wasted list fetch
-    var _69 = (0, react_1.useState)(function () {
+    var _79 = (0, react_1.useState)(function () {
         var _a, _b;
         return (0, listModule_1.renderSelectedRefreshTab)(props.localURLEndpoint, props.type, props.collectionId, props.id, (_a = props.organise) === null || _a === void 0 ? void 0 : _a.extendedTabs, (_b = props.organise) === null || _b === void 0 ? void 0 : _b.viewId);
-    }), selectedTab = _69[0], setSelectedTab = _69[1];
-    var _70 = (0, react_1.useState)("dayGridMonth"), calendarView = _70[0], setCalendarView = _70[1];
+    }), selectedTab = _79[0], setSelectedTab = _79[1];
+    var _80 = (0, react_1.useState)("dayGridMonth"), calendarView = _80[0], setCalendarView = _80[1];
     // INFO: bareNewDTW calendar viewSwitch mode — drives the NewCalendar variant
     // (calendarView above drives the matching range query)
-    var _71 = (0, react_1.useState)("month"), newCalendarViewMode = _71[0], setNewCalendarViewMode = _71[1];
-    var _72 = (0, react_1.useState)(new Date()), calendarTabMonth = _72[0], setCalendarTabMonth = _72[1];
-    var _73 = (0, react_1.useState)(true), kanbanDroppable = _73[0], setKanbanDroppable = _73[1];
-    var _74 = (0, react_1.useState)([]), kanbanOptions = _74[0], setKanbanOptions = _74[1];
-    var _75 = (0, react_1.useState)(false), queryForm = _75[0], setQueryForm = _75[1];
-    var _76 = (0, react_1.useState)(false), batchUpdateModal = _76[0], setBatchUpdateModal = _76[1];
-    var _77 = (0, react_1.useState)({
+    var _81 = (0, react_1.useState)("month"), newCalendarViewMode = _81[0], setNewCalendarViewMode = _81[1];
+    var _82 = (0, react_1.useState)(new Date()), calendarTabMonth = _82[0], setCalendarTabMonth = _82[1];
+    var _83 = (0, react_1.useState)(true), kanbanDroppable = _83[0], setKanbanDroppable = _83[1];
+    var _84 = (0, react_1.useState)([]), kanbanOptions = _84[0], setKanbanOptions = _84[1];
+    var _85 = (0, react_1.useState)(false), queryForm = _85[0], setQueryForm = _85[1];
+    var _86 = (0, react_1.useState)(false), batchUpdateModal = _86[0], setBatchUpdateModal = _86[1];
+    var _87 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _77[0], setBatchUpdateData = _77[1];
-    var _78 = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.model) || []), structure = _78[0], setStructure = _78[1];
-    var _79 = (0, react_1.useState)(((_c = props === null || props === void 0 ? void 0 : props.organise) === null || _c === void 0 ? void 0 : _c.additionalQuery) || []), additionalQuery = _79[0], setAdditionalQuery = _79[1];
+    }), batchUpdateData = _87[0], setBatchUpdateData = _87[1];
+    var _88 = (0, react_1.useState)(function () {
+        var baseModel = (props === null || props === void 0 ? void 0 : props.model) || [];
+        if (!persistedState)
+            return baseModel;
+        // INFO: Apply persisted column visibility (hiddenColumnIds) and order (columnOrder)
+        var model = baseModel.map(function (col) {
+            var _a, _b;
+            return (__assign(__assign({}, col), { hide: ((_a = persistedState.hiddenColumnIds) === null || _a === void 0 ? void 0 : _a.includes(col.id))
+                    ? true
+                    : ((_b = col.hide) !== null && _b !== void 0 ? _b : false) }));
+        });
+        if (persistedState.columnOrder && persistedState.columnOrder.length > 0) {
+            // INFO: Filter out stale IDs that no longer exist in the model
+            var modelIds_1 = new Set(model.map(function (col) { return col.id; }));
+            var validOrder = persistedState.columnOrder.filter(function (id) {
+                return modelIds_1.has(id);
+            });
+            var orderMap_1 = new Map(validOrder.map(function (id, idx) { return [id, idx]; }));
+            model = __spreadArray([], model, true).sort(function (a, b) {
+                var _a, _b;
+                var aIdx = (_a = orderMap_1.get(a.id)) !== null && _a !== void 0 ? _a : Infinity;
+                var bIdx = (_b = orderMap_1.get(b.id)) !== null && _b !== void 0 ? _b : Infinity;
+                return aIdx - bIdx;
+            });
+        }
+        return model;
+    }), structure = _88[0], setStructure = _88[1];
+    var _89 = (0, react_1.useState)(((_k = props === null || props === void 0 ? void 0 : props.organise) === null || _k === void 0 ? void 0 : _k.additionalQuery) || []), additionalQuery = _89[0], setAdditionalQuery = _89[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 _80 = (0, react_1.useState)([
+    var defaultFlexFilterRow = [
         {
             id: "flex-filter-init-row",
             columnId: "",
             operator: "=",
             value: undefined,
         },
-    ]), flexFilters = _80[0], setFlexFilters = _80[1];
+    ];
+    var _90 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+        ? persistedState.flexFilters
+        : defaultFlexFilterRow), flexFilters = _90[0], setFlexFilters = _90[1];
     // INFO: Debounced version of flexFilters used by renderImpSearchFilterConditions
     // to prevent API calls on every keystroke when typing in value inputs
-    var _81 = (0, react_1.useState)([
-        {
-            id: "flex-filter-init-row",
-            columnId: "",
-            operator: "=",
-            value: undefined,
-        },
-    ]), flexFiltersDebounced = _81[0], setFlexFiltersDebounced = _81[1];
-    var _82 = (0, react_1.useState)({}), flexFilterReferenceOptions = _82[0], setFlexFilterReferenceOptions = _82[1];
-    var _83 = (0, react_1.useState)({}), flexFilterReferenceSearch = _83[0], setFlexFilterReferenceSearch = _83[1];
-    var _84 = (0, react_1.useState)(false), flexFilterModalOpen = _84[0], setFlexFilterModalOpen = _84[1];
+    var _91 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+        ? persistedState.flexFilters
+        : defaultFlexFilterRow), flexFiltersDebounced = _91[0], setFlexFiltersDebounced = _91[1];
+    var _92 = (0, react_1.useState)({}), flexFilterReferenceOptions = _92[0], setFlexFilterReferenceOptions = _92[1];
+    var _93 = (0, react_1.useState)({}), flexFilterReferenceSearch = _93[0], setFlexFilterReferenceSearch = _93[1];
+    var _94 = (0, react_1.useState)(false), flexFilterModalOpen = _94[0], setFlexFilterModalOpen = _94[1];
     //INFO : Used by Auth
-    var _85 = (0, react_1.useState)({
+    var _95 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
         create: false,
-    }), authMethods = _85[0], setAuthMethods = _85[1];
-    var _86 = (0, react_1.useState)(""), selectedAuthMethod = _86[0], setSelectedAuthMethod = _86[1];
+    }), authMethods = _95[0], setAuthMethods = _95[1];
+    var _96 = (0, react_1.useState)(""), selectedAuthMethod = _96[0], setSelectedAuthMethod = _96[1];
     // INFO: Used by Activity Log
-    var _87 = (0, react_1.useState)(false), activityModal = _87[0], setActivityModal = _87[1];
-    var _88 = (0, react_1.useState)(""), activityId = _88[0], setActivityId = _88[1];
+    var _97 = (0, react_1.useState)(false), activityModal = _97[0], setActivityModal = _97[1];
+    var _98 = (0, react_1.useState)(""), activityId = _98[0], setActivityId = _98[1];
     //INFO : Used by Export
-    var _89 = (0, react_1.useState)(null), csvFile = _89[0], setCSVFile = _89[1];
-    var _90 = (0, react_1.useState)([]), csvFileData = _90[0], setCSVFileData = _90[1];
-    var _91 = (0, react_1.useState)(0), stepCSVIndex = _91[0], setStepCSVIndex = _91[1];
-    var _92 = (0, react_1.useState)({}), listCSVMapAttribute = _92[0], setListCSVMapAttribute = _92[1];
-    var _93 = (0, react_1.useState)({}), listCSVObjAttribute = _93[0], setListCSVObjAttribute = _93[1];
-    var _94 = (0, react_1.useState)([]), csvAPIAttribute = _94[0], setCSVAPIAttribute = _94[1];
-    var _95 = (0, react_1.useState)(((_d = props.devSettings.currentUser) === null || _d === void 0 ? void 0 : _d.userEmail) || ""), exportCSVEmail = _95[0], setExportCSVEmail = _95[1];
-    var _96 = (0, react_1.useState)(((_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.exportSettings) === null || _f === void 0 ? void 0 : _f.defaultExportPDFName) || ""), exportPDFTitle = _96[0], setExportPDFTitle = _96[1];
-    var _97 = (0, react_1.useState)(false), exportPDFLoading = _97[0], setExportPDFLoading = _97[1];
-    var _98 = (0, react_1.useState)(false), exportReadPDFLoading = _98[0], setExportReadPDFLoading = _98[1];
-    var _99 = (0, react_1.useState)((_j = (_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.exportSettings) === null || _h === void 0 ? void 0 : _h.sumColumnId) !== null && _j !== void 0 ? _j : []), exportSumAttributeIds = _99[0], setExportSumAttributeIds = _99[1];
-    var _100 = (0, react_1.useState)((_m = (_l = (_k = props.organise) === null || _k === void 0 ? void 0 : _k.exportSettings) === null || _l === void 0 ? void 0 : _l.hideSubItems) !== null && _m !== void 0 ? _m : false), hideSubItems = _100[0], setHideSubItems = _100[1];
-    var _101 = (0, react_1.useState)([]), importTableData = _101[0], setImportTableData = _101[1];
-    var _102 = (0, react_1.useState)([]), queryList = _102[0], setQueryList = _102[1];
-    var _103 = (0, react_1.useState)(undefined), allQueryList = _103[0], setAllQueryList = _103[1];
-    var _104 = (0, react_1.useState)(-1), queryIndex = _104[0], setQueryIndex = _104[1];
-    var _105 = (0, react_1.useState)((_o = props.organise) === null || _o === void 0 ? void 0 : _o.groupBy), groupId = _105[0], setGroupId = _105[1];
-    var _106 = (0, react_1.useState)(""), readTabSection = _106[0], setReadTabSection = _106[1];
-    var _107 = (0, react_1.useState)(false), readFloatingNav = _107[0], setReadFloatingNav = _107[1];
+    var _99 = (0, react_1.useState)(null), csvFile = _99[0], setCSVFile = _99[1];
+    var _100 = (0, react_1.useState)([]), csvFileData = _100[0], setCSVFileData = _100[1];
+    var _101 = (0, react_1.useState)(0), stepCSVIndex = _101[0], setStepCSVIndex = _101[1];
+    var _102 = (0, react_1.useState)({}), listCSVMapAttribute = _102[0], setListCSVMapAttribute = _102[1];
+    var _103 = (0, react_1.useState)({}), listCSVObjAttribute = _103[0], setListCSVObjAttribute = _103[1];
+    var _104 = (0, react_1.useState)([]), csvAPIAttribute = _104[0], setCSVAPIAttribute = _104[1];
+    var _105 = (0, react_1.useState)(((_l = props.devSettings.currentUser) === null || _l === void 0 ? void 0 : _l.userEmail) || ""), exportCSVEmail = _105[0], setExportCSVEmail = _105[1];
+    var _106 = (0, react_1.useState)(((_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.defaultExportPDFName) || ""), exportPDFTitle = _106[0], setExportPDFTitle = _106[1];
+    var _107 = (0, react_1.useState)(false), exportPDFLoading = _107[0], setExportPDFLoading = _107[1];
+    var _108 = (0, react_1.useState)(false), exportReadPDFLoading = _108[0], setExportReadPDFLoading = _108[1];
+    var _109 = (0, react_1.useState)((_r = (_q = (_p = props.organise) === null || _p === void 0 ? void 0 : _p.exportSettings) === null || _q === void 0 ? void 0 : _q.sumColumnId) !== null && _r !== void 0 ? _r : []), exportSumAttributeIds = _109[0], setExportSumAttributeIds = _109[1];
+    var _110 = (0, react_1.useState)((_u = (_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.exportSettings) === null || _t === void 0 ? void 0 : _t.hideSubItems) !== null && _u !== void 0 ? _u : false), hideSubItems = _110[0], setHideSubItems = _110[1];
+    var _111 = (0, react_1.useState)([]), importTableData = _111[0], setImportTableData = _111[1];
+    var _112 = (0, react_1.useState)([]), queryList = _112[0], setQueryList = _112[1];
+    var _113 = (0, react_1.useState)(undefined), allQueryList = _113[0], setAllQueryList = _113[1];
+    var _114 = (0, react_1.useState)(-1), queryIndex = _114[0], setQueryIndex = _114[1];
+    var _115 = (0, react_1.useState)((_v = props.organise) === null || _v === void 0 ? void 0 : _v.groupBy), groupId = _115[0], setGroupId = _115[1];
+    var _116 = (0, react_1.useState)(""), readTabSection = _116[0], setReadTabSection = _116[1];
+    var _117 = (0, react_1.useState)(false), readFloatingNav = _117[0], setReadFloatingNav = _117[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _108 = (0, react_1.useState)(false), modalVisible = _108[0], setModalVisible = _108[1];
-    var _109 = (0, react_1.useState)(false), deleteModal = _109[0], setDeleteModal = _109[1];
-    var _110 = (0, react_1.useState)(false), excelModal = _110[0], setExcelModal = _110[1];
-    var _111 = (0, react_1.useState)(false), exportExcel = _111[0], setExportExcel = _111[1];
-    var _112 = (0, react_1.useState)(""), exportType = _112[0], setExportType = _112[1];
-    var _113 = (0, react_1.useState)(false), exportQR = _113[0], setExportQR = _113[1];
-    var _114 = (0, react_1.useState)(function () {
+    var _118 = (0, react_1.useState)(false), modalVisible = _118[0], setModalVisible = _118[1];
+    var _119 = (0, react_1.useState)(false), deleteModal = _119[0], setDeleteModal = _119[1];
+    var _120 = (0, react_1.useState)(false), excelModal = _120[0], setExcelModal = _120[1];
+    var _121 = (0, react_1.useState)(false), exportExcel = _121[0], setExportExcel = _121[1];
+    var _122 = (0, react_1.useState)(""), exportType = _122[0], setExportType = _122[1];
+    var _123 = (0, react_1.useState)(false), exportQR = _123[0], setExportQR = _123[1];
+    var _124 = (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 = _114[0], setActiveTab = _114[1];
-    var _115 = (0, react_1.useState)(false), signatureSigning = _115[0], setSignatureSigning = _115[1];
-    var _116 = (0, react_1.useState)({}), selectedData = _116[0], setSelectedData = _116[1];
-    var _117 = (0, react_1.useState)(""), selectedObjectStructureId = _117[0], setSelectedObjectStructureId = _117[1];
-    var _118 = (0, react_1.useState)(""), selectedObjectId = _118[0], setSelectedObjectId = _118[1];
-    var _119 = (0, react_1.useState)(""), selectedListAddressId = _119[0], setSelectedListAddressId = _119[1];
-    var _120 = (0, react_1.useState)(-1), selectedListAddressIndex = _120[0], setSelectedListAddressIndex = _120[1];
-    var _121 = (0, react_1.useState)({
+    }), activeTab = _124[0], setActiveTab = _124[1];
+    var _125 = (0, react_1.useState)(false), signatureSigning = _125[0], setSignatureSigning = _125[1];
+    var _126 = (0, react_1.useState)({}), selectedData = _126[0], setSelectedData = _126[1];
+    var _127 = (0, react_1.useState)(""), selectedObjectStructureId = _127[0], setSelectedObjectStructureId = _127[1];
+    var _128 = (0, react_1.useState)(""), selectedObjectId = _128[0], setSelectedObjectId = _128[1];
+    var _129 = (0, react_1.useState)(""), selectedListAddressId = _129[0], setSelectedListAddressId = _129[1];
+    var _130 = (0, react_1.useState)(-1), selectedListAddressIndex = _130[0], setSelectedListAddressIndex = _130[1];
+    var _131 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _121[0], setSelectedListAddress = _121[1];
-    var _122 = (0, react_1.useState)({}), selectedObjectData = _122[0], setSelectedObjectData = _122[1];
-    var _123 = (0, react_1.useState)(false), referenceLoading = _123[0], setReferenceLoading = _123[1];
-    var _124 = (0, react_1.useState)({}), referencesOptions = _124[0], setReferencesOptions = _124[1];
-    var _125 = (0, react_1.useState)({}), referencesDetails = _125[0], setReferencesDetails = _125[1];
-    var _126 = (0, react_1.useState)({}), referenceDeleteTableData = _126[0], setReferenceDeleteTableData = _126[1];
-    var _127 = (0, react_1.useState)(0), referenceDeleteIndex = _127[0], setReferenceDeleteIndex = _127[1];
-    var _128 = (0, react_1.useState)({
+    }), selectedListAddress = _131[0], setSelectedListAddress = _131[1];
+    var _132 = (0, react_1.useState)({}), selectedObjectData = _132[0], setSelectedObjectData = _132[1];
+    var _133 = (0, react_1.useState)(false), referenceLoading = _133[0], setReferenceLoading = _133[1];
+    var _134 = (0, react_1.useState)({}), referencesOptions = _134[0], setReferencesOptions = _134[1];
+    var _135 = (0, react_1.useState)({}), referencesDetails = _135[0], setReferencesDetails = _135[1];
+    var _136 = (0, react_1.useState)({}), referenceDeleteTableData = _136[0], setReferenceDeleteTableData = _136[1];
+    var _137 = (0, react_1.useState)(0), referenceDeleteIndex = _137[0], setReferenceDeleteIndex = _137[1];
+    var _138 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _128[0], setReferenceCreationModal = _128[1];
-    var _129 = (0, react_1.useState)({}), referenceModelSchema = _129[0], setReferenceSchema = _129[1];
-    var _130 = (0, react_1.useState)([]), kanbanChecked = _130[0], setKanbanChecked = _130[1];
+    }), referenceCreationModal = _138[0], setReferenceCreationModal = _138[1];
+    var _139 = (0, react_1.useState)({}), referenceModelSchema = _139[0], setReferenceSchema = _139[1];
+    var _140 = (0, react_1.useState)([]), kanbanChecked = _140[0], setKanbanChecked = _140[1];
     //INFO : Offline
-    var _131 = (0, react_1.useState)(0), offlineDataLength = _131[0], setOfflineDataLength = _131[1];
-    var _132 = (0, react_1.useState)(false), offlineModal = _132[0], setOfflineModal = _132[1];
+    var _141 = (0, react_1.useState)(0), offlineDataLength = _141[0], setOfflineDataLength = _141[1];
+    var _142 = (0, react_1.useState)(false), offlineModal = _142[0], setOfflineModal = _142[1];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    var _133 = (0, react_1.useState)(false), isLive = _133[0], setIsLive = _133[1];
-    var _134 = (0, react_1.useState)(false), isLiveOffline = _134[0], setIsLiveOffline = _134[1];
+    var _143 = (0, react_1.useState)(false), isLive = _143[0], setIsLive = _143[1];
+    var _144 = (0, react_1.useState)(false), isLiveOffline = _144[0], setIsLiveOffline = _144[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 _135 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _135[0], setIsNetworkOffline = _135[1];
+    var _145 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _145[0], setIsNetworkOffline = _145[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -414,6 +450,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // socket merges, prefills). When true, the next changedAttributeIds from the useEffect should NOT
     // be added to dirtyFields because the change was programmatic, not user-driven.
     var programmaticUpdateRef = (0, react_1.useRef)(false);
+    // INFO: tracks whether the initial mount has completed — used to skip
+    // overwriting persisted structure with props.model on the first render
+    var persistedViewMountedRef = (0, react_1.useRef)(false);
     var formRef = (0, react_1.createRef)();
     var objectFormRef = (0, react_1.createRef)();
     var listAddressFromRef = (0, react_1.createRef)();
@@ -453,40 +492,47 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var isSubmittingRef = (0, react_1.useRef)(false);
     var devSettings = props.devSettings;
     var serverId = (0, utils_1.parseServerId)(devSettings.server);
-    var viewType = (_q = (_p = props.organise) === null || _p === void 0 ? void 0 : _p.viewId) !== null && _q !== void 0 ? _q : "general";
+    var viewType = (_x = (_w = props.organise) === null || _w === void 0 ? void 0 : _w.viewId) !== null && _x !== void 0 ? _x : "general";
     var isFirebaseClient = devSettings.server === "firebase";
     var isFirebase = isFirebaseClient || devSettings.server === "fbServer";
-    var dbModule = isFirebaseClient ? (_r = props.lib) === null || _r === void 0 ? void 0 : _r.firebase : (_s = props.lib) === null || _s === void 0 ? void 0 : _s.axios;
+    var dbModule = isFirebaseClient ? (_y = props.lib) === null || _y === void 0 ? void 0 : _y.firebase : (_z = props.lib) === null || _z === void 0 ? void 0 : _z.axios;
     var schemaPresent = props.devSettings.schemaEndpoint ? true : false;
     var limit = props.limit ? props.limit : 10;
-    var isEditor = ((_t = props.edit) === null || _t === void 0 ? void 0 : _t.allEditable) ? true : false;
-    var isOffline = (_u = props.bareSettings) === null || _u === void 0 ? void 0 : _u.bareOffline;
+    var activeSortId = (isPersistEnabled && persistedSort) || ((_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.sort);
+    var handleSortColumn = function (value) {
+        var _a, _b;
+        if (isPersistEnabled)
+            setPersistedSort(value);
+        (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeSort) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+    };
+    var isEditor = ((_1 = props.edit) === null || _1 === void 0 ? void 0 : _1.allEditable) ? true : false;
+    var isOffline = (_2 = props.bareSettings) === null || _2 === void 0 ? void 0 : _2.bareOffline;
     // 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 && ((_v = props.bareSettings) === null || _v === void 0 ? void 0 : _v.bareOfflineNetworkListener);
-    var showId = (_w = props.space) === null || _w === void 0 ? void 0 : _w.showId;
+    var isOfflineNetworkListener = isOffline && ((_3 = props.bareSettings) === null || _3 === void 0 ? void 0 : _3.bareOfflineNetworkListener);
+    var showId = (_4 = props.space) === null || _4 === void 0 ? void 0 : _4.showId;
     var remainId = showId || selectedObjectStructureId ? true : false;
-    var idField = ((_x = props.space) === null || _x === void 0 ? void 0 : _x.idField) || ((_y = props.organise) === null || _y === void 0 ? void 0 : _y.idField);
-    var pipeline = (_z = props === null || props === void 0 ? void 0 : props.space) === null || _z === void 0 ? void 0 : _z.pipeline;
-    if ((_0 = props.bareSettings) === null || _0 === void 0 ? void 0 : _0.bareListPipeline) {
+    var idField = ((_5 = props.space) === null || _5 === void 0 ? void 0 : _5.idField) || ((_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.idField);
+    var pipeline = (_7 = props === null || props === void 0 ? void 0 : props.space) === null || _7 === void 0 ? void 0 : _7.pipeline;
+    if ((_8 = props.bareSettings) === null || _8 === void 0 ? void 0 : _8.bareListPipeline) {
         pipeline = pipeline
             ? __spreadArray(__spreadArray([], pipeline, true), props.bareSettings.bareListPipeline, true) : props.bareSettings.bareListPipeline;
     }
-    var hasNavigation = ((_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.handleNavigate) ? true : false;
+    var hasNavigation = ((_9 = props.organise) === null || _9 === void 0 ? void 0 : _9.handleNavigate) ? true : false;
     var formColumn = "grid-cols-12";
-    var useMobileView = (_3 = (_2 = props.bareSettings) === null || _2 === void 0 ? void 0 : _2.bareUpdateMobileView) !== null && _3 !== void 0 ? _3 : false;
+    var useMobileView = (_11 = (_10 = props.bareSettings) === null || _10 === void 0 ? void 0 : _10.bareUpdateMobileView) !== null && _11 !== void 0 ? _11 : false;
     var gridGap = useMobileView ? "gap-x-6 gap-y-2 md:gap-y-6" : "gap-6";
-    var isActivityLog = (((_5 = (_4 = props.edit) === null || _4 === void 0 ? void 0 : _4.activityLog) === null || _5 === void 0 ? void 0 : _5.enableComments) &&
-        ((_6 = props.edit) === null || _6 === void 0 ? void 0 : _6.activityLog.commentCollectionId)) ||
-        (((_8 = (_7 = props.edit) === null || _7 === void 0 ? void 0 : _7.activityLog) === null || _8 === void 0 ? void 0 : _8.enableLogs) &&
-            ((_9 = props.edit) === null || _9 === void 0 ? void 0 : _9.activityLog.logsCollectionId));
-    var customPaginationSize = ((_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.customPaginationCount)
+    var isActivityLog = (((_13 = (_12 = props.edit) === null || _12 === void 0 ? void 0 : _12.activityLog) === null || _13 === void 0 ? void 0 : _13.enableComments) &&
+        ((_14 = props.edit) === null || _14 === void 0 ? void 0 : _14.activityLog.commentCollectionId)) ||
+        (((_16 = (_15 = props.edit) === null || _15 === void 0 ? void 0 : _15.activityLog) === null || _16 === void 0 ? void 0 : _16.enableLogs) &&
+            ((_17 = props.edit) === null || _17 === void 0 ? void 0 : _17.activityLog.logsCollectionId));
+    var customPaginationSize = ((_18 = props.organise) === null || _18 === void 0 ? void 0 : _18.customPaginationCount)
         ? props.organise.customPaginationCount(size)
         : undefined;
     //TODO : Code - Pass ...devSettings, search dbEndpoint:
     var writeServerQuery = new writeQuery_1.WriteQuery({
-        dbModule: (_11 = props.lib) === null || _11 === void 0 ? void 0 : _11.axios,
+        dbModule: (_19 = props.lib) === null || _19 === void 0 ? void 0 : _19.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -494,7 +540,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var readServerQuery = new readQuery_1.ReadQuery({
-        dbModule: (_12 = props.lib) === null || _12 === void 0 ? void 0 : _12.axios,
+        dbModule: (_20 = props.lib) === null || _20 === void 0 ? void 0 : _20.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -502,9 +548,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var moreButtonPopUp = [
-        ((_13 = props.edit) === null || _13 === void 0 ? void 0 : _13.allEditable) &&
+        ((_21 = props.edit) === null || _21 === void 0 ? void 0 : _21.allEditable) &&
             !isFirebase &&
-            !((_15 = (_14 = props.organise) === null || _14 === void 0 ? void 0 : _14.exportSettings) === null || _15 === void 0 ? void 0 : _15.hideImportCSV)
+            !((_23 = (_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.exportSettings) === null || _23 === void 0 ? void 0 : _23.hideImportCSV)
             ? {
                 text: "Import Excel",
                 onClick: function () {
@@ -513,7 +559,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_17 = (_16 = props.organise) === null || _16 === void 0 ? void 0 : _16.exportSettings) === null || _17 === void 0 ? void 0 : _17.hideExportCSV)
+        !((_25 = (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.exportSettings) === null || _25 === void 0 ? void 0 : _25.hideExportCSV)
             ? {
                 text: "Export CSV",
                 onClick: function () {
@@ -523,7 +569,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_19 = (_18 = props.organise) === null || _18 === void 0 ? void 0 : _18.exportSettings) === null || _19 === void 0 ? void 0 : _19.hideExportExcel)
+        !((_27 = (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.exportSettings) === null || _27 === void 0 ? void 0 : _27.hideExportExcel)
             ? {
                 text: "Export Excel",
                 onClick: function () {
@@ -533,7 +579,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_21 = (_20 = props.organise) === null || _20 === void 0 ? void 0 : _20.exportSettings) === null || _21 === void 0 ? void 0 : _21.hideExportPDF)
+        !((_29 = (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.exportSettings) === null || _29 === void 0 ? void 0 : _29.hideExportPDF)
             ? {
                 text: "Export PDF",
                 onClick: function () {
@@ -543,7 +589,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_23 = (_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.exportSettings) === null || _23 === void 0 ? void 0 : _23.hideExportQR)
+        !((_31 = (_30 = props.organise) === null || _30 === void 0 ? void 0 : _30.exportSettings) === null || _31 === void 0 ? void 0 : _31.hideExportQR)
             ? {
                 text: "Export QR",
                 onClick: function () {
@@ -553,7 +599,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_25 = (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.exportSettings) === null || _25 === void 0 ? void 0 : _25.hideExportQR)
+        !((_33 = (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.exportSettings) === null || _33 === void 0 ? void 0 : _33.hideExportQR)
             ? {
                 text: "Export QR(Data)",
                 onClick: function () {
@@ -563,7 +609,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_27 = (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.exportSettings) === null || _27 === void 0 ? void 0 : _27.hideExportPrint)
+        !((_35 = (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.exportSettings) === null || _35 === void 0 ? void 0 : _35.hideExportPrint)
             ? {
                 text: "Print",
                 onClick: function () {
@@ -573,7 +619,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_29 = (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.exportSettings) === null || _29 === void 0 ? void 0 : _29.hideExportDraft)
+        !((_37 = (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.exportSettings) === null || _37 === void 0 ? void 0 : _37.hideExportDraft)
             ? {
                 text: filterDraft ? "Show All Items" : "Filter Draft",
                 onClick: function () {
@@ -582,7 +628,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             : null,
     ].filter(Boolean);
-    if ((_30 = props.organise) === null || _30 === void 0 ? void 0 : _30.moreSettings)
+    if ((_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.moreSettings)
         moreButtonPopUp = moreButtonPopUp.concat(props.organise.moreSettings);
     //=====================================================================================
     //SECTION: Flex Filter Handlers
@@ -622,6 +668,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         handleClearFlexFilterTypingTimeout();
         setFlexFilters(updatedFilters);
         setFlexFiltersDebounced(updatedFilters);
+        setPageIndex(0);
     };
     var handleFlexFilterClearAll = function () {
         // INFO: Reset to one empty row so the UI never shows a blank state
@@ -631,6 +678,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         handleClearFlexFilterTypingTimeout();
         setFlexFilters(updatedFilters);
         setFlexFiltersDebounced(updatedFilters);
+        setPageIndex(0);
     };
     var handleFlexFilterColumnChange = function (filterId, columnId) {
         var updatedFilters = flexFilters.map(function (f) {
@@ -638,7 +686,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 return f;
             // INFO: Reset operator and value when column changes since available operators differ per type
             var ds = structure.find(function (s) { return s.id === columnId; });
-            var operators = ds ? flexFilterModel_1.FLEX_FILTER_OPERATOR_MAP[ds.type] : undefined;
+            var operators = ds ? flexFilter_1.FLEX_FILTER_OPERATOR_MAP[ds.type] : undefined;
             var defaultOperator = operators && operators.length > 0 ? operators[0] : "=";
             return __assign(__assign({}, f), { columnId: columnId, operator: defaultOperator, value: undefined });
         });
@@ -667,6 +715,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         handleClearFlexFilterTypingTimeout();
         flexFilterTypingTimeout.current = setTimeout(function () {
             setFlexFiltersDebounced(updatedFilters);
+            setPageIndex(0);
         }, 500);
     };
     var handleFlexFilterReferenceOptionsLoaded = function (columnId, options) {
@@ -727,6 +776,48 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         isLive: isLive,
         isLiveOffline: isLiveOffline,
     }); });
+    // INFO: Auto-save view state to storage whenever filters, sort, page index,
+    // or column visibility change. Active for both "persistent" and "session" modes.
+    var persistSaveInitialised = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (!isPersistEnabled)
+            return;
+        // INFO: Skip the first invocation — deps have hydrated initial values from storage,
+        // writing them back immediately is wasteful and can trigger referential loops.
+        if (!persistSaveInitialised.current) {
+            persistSaveInitialised.current = true;
+            return;
+        }
+        handleSaveView({
+            filterSearchParams: filterSearchParams,
+            filterSelection: filterSelection,
+            filterReference: filterReference,
+            filterReferenceDate: (0, viewStatePersistence_1.serializeDateFilterState)(filterReferenceDate),
+            flexFilters: flexFiltersDebounced.some(function (eachFilter) {
+                return eachFilter.columnId && eachFilter.operator && eachFilter.value;
+            })
+                ? flexFiltersDebounced.filter(function (eachFilter) {
+                    return eachFilter.columnId && eachFilter.operator && eachFilter.value;
+                })
+                : undefined,
+            sort: persistedSort !== null && persistedSort !== void 0 ? persistedSort : (_a = props.organise) === null || _a === void 0 ? void 0 : _a.sort,
+            // INFO: scroll mode always starts from page 0 on reload — persisting
+            // a mid-scroll pageIndex would skip rows on next hydration.
+            pageIndex: renderCheckScrollMode() ? 0 : pageIndex,
+            hiddenColumnIds: structure.filter(function (col) { return col.hide; }).map(function (col) { return col.id; }),
+            columnOrder: structure.map(function (col) { return col.id; }),
+        });
+    }, [
+        filterSearchParams,
+        filterSelection,
+        filterReference,
+        filterReferenceDate,
+        flexFiltersDebounced,
+        pageIndex,
+        structure,
+        persistedSort,
+    ]);
     (0, react_1.useEffect)(function () {
         handleCheckOfflineDataLength();
         /* eslint-disable */
@@ -738,7 +829,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     (0, react_1.useEffect)(function () {
         handleOfflinePrefetch();
         /* eslint-disable */
-    }, [props.collectionId, (_31 = props.bareSettings) === null || _31 === void 0 ? void 0 : _31.bareOffline]);
+    }, [props.collectionId, (_39 = props.bareSettings) === null || _39 === void 0 ? void 0 : _39.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
@@ -758,7 +849,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }, interval);
         return function () { return clearInterval(timer); };
         /* eslint-disable */
-    }, [(_32 = props.bareSettings) === null || _32 === void 0 ? void 0 : _32.barePollingInterval, isLive, isNetworkOffline]);
+    }, [(_40 = props.bareSettings) === null || _40 === void 0 ? void 0 : _40.barePollingInterval, isLive, isNetworkOffline]);
     /* eslint-enable */
     // INFO: Pub/Sub → SSE live-stream — driven by bareSettings.bareSocketName
     // EventSource URL: {sseEndpoint}/{room}?bm_apiToken={token}
@@ -800,7 +891,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         };
         /* eslint-disable */
     }, [
-        (_33 = props.bareSettings) === null || _33 === void 0 ? void 0 : _33.bareSocketName,
+        (_41 = props.bareSettings) === null || _41 === void 0 ? void 0 : _41.bareSocketName,
         props.collectionId,
         props.devSettings.sseEndpoint,
         props.devSettings.dbAPIToken,
@@ -994,8 +1085,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }
             });
         }); };
-        // INFO : Set Updated Structure
-        setStructure((_a = props.model) !== null && _a !== void 0 ? _a : []);
+        // INFO : Set Updated Structure — skip on initial mount when persistViewState
+        // restored column visibility/order from localStorage
+        if (!isPersistEnabled ||
+            !persistedState ||
+            persistedViewMountedRef.current) {
+            setStructure((_a = props.model) !== null && _a !== void 0 ? _a : []);
+        }
+        persistedViewMountedRef.current = true;
         setAdditionalQuery((_c = (_b = props.organise) === null || _b === void 0 ? void 0 : _b.additionalQuery) !== null && _c !== void 0 ? _c : []);
         setGroupId((_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.groupBy) !== null && _e !== void 0 ? _e : "");
         setExportPDFTitle((_h = (_g = (_f = props.organise) === null || _f === void 0 ? void 0 : _f.exportSettings) === null || _g === void 0 ? void 0 : _g.defaultExportPDFName) !== null && _h !== void 0 ? _h : "");
@@ -1033,10 +1130,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         props.collectionId,
         props.model,
         props.localURLEndpoint,
-        (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.extendedTabs,
-        (_35 = props.organise) === null || _35 === void 0 ? void 0 : _35.viewId,
-        (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.additionalQuery,
-        (_37 = props.organise) === null || _37 === void 0 ? void 0 : _37.groupBy,
+        (_42 = props.organise) === null || _42 === void 0 ? void 0 : _42.extendedTabs,
+        (_43 = props.organise) === null || _43 === void 0 ? void 0 : _43.viewId,
+        (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.additionalQuery,
+        (_45 = props.organise) === null || _45 === void 0 ? void 0 : _45.groupBy,
         props.type,
     ]);
     (0, react_1.useEffect)(function () {
@@ -1126,7 +1223,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             };
         }, 100);
         return function () { return clearTimeout(timeoutId); };
-    }, [(_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.showReadFloatingNav, props.type, props.id, loading]);
+    }, [(_46 = props.organise) === null || _46 === void 0 ? void 0 : _46.showReadFloatingNav, props.type, props.id, loading]);
     (0, react_1.useEffect)(function () {
         if (props.type !== "read")
             return;
@@ -1592,8 +1689,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // useEffect to re-run (which would tear down and rebuild the EventSource).
     handleApplyEnvelopeRef.current = handleApplyEnvelope;
     var handleReadQueryHocSort = function (query) {
-        var _a, _b;
-        var sort = (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.sort) !== null && _b !== void 0 ? _b : undefined;
+        // INFO: Use persisted sort when persistViewState is active, otherwise fall back to prop sort
+        var sort = activeSortId || undefined;
         if (isFirebase) {
             query === null || query === void 0 ? void 0 : query.map(function (eachQuery) {
                 var _a, _b;
@@ -1917,8 +2014,15 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         else {
                             newTableData = [];
                             newPrettierTableData = [];
+                            // INFO: Replace (not append) when any filter is active and we're at
+                            // the start of the result set — covers search, reference, and flex filters.
                             if ((Object.values(filterSearchParams).some(function (eachValue) { return eachValue && eachValue.length > 0; }) ||
-                                Object.values(filterReference).some(function (eachValue) { return eachValue && eachValue.length > 0; })) &&
+                                Object.values(filterReference).some(function (eachValue) { return eachValue && eachValue.length > 0; }) ||
+                                flexFiltersDebounced.some(function (eachFilter) {
+                                    return eachFilter.columnId &&
+                                        eachFilter.operator &&
+                                        eachFilter.value;
+                                })) &&
                                 pageIndex === 0) {
                                 newTableData = dataList;
                                 newPrettierTableData = prettierDataList;
@@ -6421,7 +6525,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             authList));
     };
     var renderContent = function () {
-        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;
+        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;
         var isBottom = ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionBottom) ? true : false;
         var tabs = renderTabs();
         var pages = [
@@ -6708,23 +6812,29 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 var filterComponent_1 = renderSearchContent();
                 var dataComponent = renderTabContent(tabs, props.type, viewType);
                 var actionComponent = renderActionButtons(props.type);
+                // INFO: Active flex filter count — used by both the filter icon badge and floating search bar
+                var activeFlexFilterCount_1 = ((_19 = props.bareSettings) === null || _19 === void 0 ? void 0 : _19.bareFlexFilters)
+                    ? flexFilters.filter(function (eachFilter) {
+                        return eachFilter.columnId && eachFilter.operator && eachFilter.value;
+                    }).length
+                    : 0;
                 var listReadQueryHOC = (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: listRQueryHocRef, database: {
                         dbModule: dbModule,
                         dbType: devSettings.server,
-                        dbCollection: (_20 = (_19 = props === null || props === void 0 ? void 0 : props.space) === null || _19 === void 0 ? void 0 : _19.pipelineDefaultSpaceId) !== null && _20 !== void 0 ? _20 : props.collectionId,
+                        dbCollection: (_21 = (_20 = props === null || props === void 0 ? void 0 : props.space) === null || _20 === void 0 ? void 0 : _20.pipelineDefaultSpaceId) !== null && _21 !== void 0 ? _21 : props.collectionId,
                         dbEndpoint: devSettings.dbEndpoint,
                         dbAPIToken: devSettings.dbAPIToken,
                         dbUserToken: devSettings.dbUserToken,
-                    }, cond: handleReadQueryHocCond(), offline: ((_21 = props.bareSettings) === null || _21 === void 0 ? void 0 : _21.bareOffline) && isNetworkOffline, onChangeData: function (data) {
+                    }, cond: handleReadQueryHocCond(), offline: ((_22 = props.bareSettings) === null || _22 === void 0 ? void 0 : _22.bareOffline) && isNetworkOffline, onChangeData: function (data) {
                         handleGetListData(data, "", "");
                     }, onError: handleGetItemError }));
-                if ((_22 = props.renderSettings) === null || _22 === void 0 ? void 0 : _22.renderListUI) {
+                if ((_23 = props.renderSettings) === null || _23 === void 0 ? void 0 : _23.renderListUI) {
                     return (react_1.default.createElement(react_1.default.Fragment, null,
                         listReadQueryHOC,
                         props.renderSettings.renderListUI(actionComponent, filterComponent_1, dataComponent)));
                 }
                 var renderListFilterElements = function () {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
                     // INFO: When bareListFilterAsPopup is true, filters are shown in a popup instead.
                     if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterAsPopup)
                         return null;
@@ -6741,14 +6851,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             filterComponent_1.length > 0 &&
                             !((_d = props.organise) === null || _d === void 0 ? void 0 : _d.hideSearch)) {
                             var searchInput = filterComponent_1[filterComponent_1.length - 1];
-                            return (react_1.default.createElement("div", { className: "flex-1 sm:flex-none sm:w-64 min-w-0 mr-3" }, searchInput));
+                            return (react_1.default.createElement("div", { className: "flex-1 sm:flex-none sm:w-64 min-w-0 mr-3".concat(((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareListMobileFloatingSearch)
+                                    ? " hidden md:block"
+                                    : "") }, searchInput));
                         }
                         return null;
                     }
                     var filterElementList = [];
-                    if (!((_e = props.organise) === null || _e === void 0 ? void 0 : _e.filterComponentNewRow)) {
-                        if ((_f = props.organise) === null || _f === void 0 ? void 0 : _f.showGroupByFeature) {
-                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_m = (_j = (_h = (_g = props === null || props === void 0 ? void 0 : props.organise) === null || _g === void 0 ? void 0 : _g.renderGroupByOptions) === null || _h === void 0 ? void 0 : _h.call(_g)) !== null && _j !== void 0 ? _j : (_l = (_k = props === null || props === void 0 ? void 0 : props.organise) === null || _k === void 0 ? void 0 : _k.renderReferenceLabelOptions) === null || _l === void 0 ? void 0 : _l.call(_k, props.collectionId, true)) !== null && _m !== void 0 ? _m : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
+                    if (!((_f = props.organise) === null || _f === void 0 ? void 0 : _f.filterComponentNewRow)) {
+                        if ((_g = props.organise) === null || _g === void 0 ? void 0 : _g.showGroupByFeature) {
+                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_o = (_k = (_j = (_h = props === null || props === void 0 ? void 0 : props.organise) === null || _h === void 0 ? void 0 : _h.renderGroupByOptions) === null || _j === void 0 ? void 0 : _j.call(_h)) !== null && _k !== void 0 ? _k : (_m = (_l = props === null || props === void 0 ? void 0 : props.organise) === null || _l === void 0 ? void 0 : _l.renderReferenceLabelOptions) === null || _m === void 0 ? void 0 : _m.call(_l, props.collectionId, true)) !== null && _o !== void 0 ? _o : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
                         }
                         if (filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
@@ -6818,11 +6930,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             filterComponent_1.length > 0
                             ? filterComponent_1[filterComponent_1.length - 1]
                             : undefined;
-                        var flexFilterLength_1 = (_k = flexFilters.filter(function (eachFilter) {
-                            return eachFilter.columnId && eachFilter.operator && eachFilter.value;
-                        })) === null || _k === void 0 ? void 0 : _k.length;
-                        if (!((_l = props.organise) === null || _l === void 0 ? void 0 : _l.hideSearch) &&
-                            ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareListFilterAsPopup) &&
+                        var flexFilterLength_1 = activeFlexFilterCount_1;
+                        if (!((_k = props.organise) === null || _k === void 0 ? void 0 : _k.hideSearch) &&
+                            ((_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareListFilterAsPopup) &&
                             (filterSearchParams === null || filterSearchParams === void 0 ? void 0 : filterSearchParams["search"]))
                             flexFilterLength_1 += 1;
                         var flexFilterIconBtn = function (mobile) {
@@ -6832,11 +6942,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         };
                         // INFO: Desktop — PopUp (hidden on mobile)
                         actionElementList.push(react_1.default.createElement("div", { className: "hidden md:block" },
-                            react_1.default.createElement(popUp_1.PopUp, { ctaComp: flexFilterIconBtn(), renderComp: (0, flexFilterModule_1.renderFlexFilterPopupContent)(flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareListFilterQuery, searchInput, (_p = props.bareSettings) === null || _p === void 0 ? void 0 : _p.bareListFilterAddComponent), anchor: "right", excludePortalIds: ["datepicker-portal", "select-portal"], lib: { Transition: (_q = props === null || props === void 0 ? void 0 : props.lib) === null || _q === void 0 ? void 0 : _q.Transition } })));
+                            react_1.default.createElement(popUp_1.PopUp, { ctaComp: flexFilterIconBtn(), renderComp: (0, flexFilter_1.renderFlexFilterPopupContent)(flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareListFilterQuery, searchInput, (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareListFilterAddComponent), anchor: "right", excludePortalIds: ["datepicker-portal", "select-portal"], lib: { Transition: (_p = props === null || props === void 0 ? void 0 : props.lib) === null || _p === void 0 ? void 0 : _p.Transition } })));
                         // INFO: Mobile — IconButton that opens a Modal (hidden on desktop)
                         actionElementList.push(react_1.default.createElement("div", { className: "block md:hidden" },
-                            flexFilterIconBtn(true),
-                            (0, flexFilterModule_1.renderFlexFilterModal)(flexFilterModalOpen, flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, function () { return setFlexFilterModalOpen(false); }, (_r = props.bareSettings) === null || _r === void 0 ? void 0 : _r.bareListFilterQuery, searchInput, (_s = props.bareSettings) === null || _s === void 0 ? void 0 : _s.bareListFilterAddComponent)));
+                            !((_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareListMobileFloatingSearch) &&
+                                flexFilterIconBtn(true),
+                            (0, flexFilter_1.renderFlexFilterModal)(flexFilterModalOpen, flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, function () { return setFlexFilterModalOpen(false); }, (_r = props.bareSettings) === null || _r === void 0 ? void 0 : _r.bareListFilterQuery, searchInput, (_s = props.bareSettings) === null || _s === void 0 ? void 0 : _s.bareListFilterAddComponent)));
                     }
                     if (!isBottom) {
                         var actionBtns = renderActionButtons(props.type);
@@ -6893,30 +7004,53 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 };
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     listReadQueryHOC,
-                    react_1.default.createElement("div", { className: "flex py-2 ".concat(((_23 = props.bareSettings) === null || _23 === void 0 ? void 0 : _23.bareCompactMode)
+                    react_1.default.createElement("div", { className: "flex py-2 ".concat(((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareCompactMode)
                             ? "w-full flex-row flex-wrap sm:flex-nowrap items-end"
                             : "flex-col md:items-end md:flex-row") },
                         (props.title || props.description) && (react_1.default.createElement("div", { className: "flex flex-col" },
                             props.title && (react_1.default.createElement("div", { className: "flex items-center gap-2" },
                                 react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
-                                ((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareSocketName) &&
+                                ((_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareSocketName) &&
                                     isLive &&
                                     !isLiveOffline && (react_1.default.createElement("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700" },
                                     react_1.default.createElement("span", { className: "h-1.5 w-1.5 rounded-full bg-green-500" }),
                                     "LIVE")),
-                                ((_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareSocketName) && isLiveOffline && (react_1.default.createElement("span", { className: "inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700" },
+                                ((_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareSocketName) && isLiveOffline && (react_1.default.createElement("span", { className: "inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700" },
                                     react_1.default.createElement("span", { className: "h-1.5 w-1.5 rounded-full bg-orange-400" }),
                                     "OFFLINE")))),
                             props.description && (react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)))),
-                        react_1.default.createElement("div", { className: ((_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareCompactMode)
+                        react_1.default.createElement("div", { className: ((_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.bareCompactMode)
                                 ? "hidden sm:block grow"
                                 : "grow" }),
                         renderListFilterElements(),
                         renderListActionElements()),
                     renderListNewRowFilterElements(),
-                    (schemaPresent || ((_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.bareReadListTabs)) && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.darkMode })),
+                    (schemaPresent || ((_28 = props.bareSettings) === null || _28 === void 0 ? void 0 : _28.bareReadListTabs)) && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.darkMode })),
                     renderTabContent(tabs, props.type, viewType),
-                    isBottom && renderActionButtons(props.type, true)));
+                    isBottom && renderActionButtons(props.type, true),
+                    ((_30 = props.bareSettings) === null || _30 === void 0 ? void 0 : _30.bareListMobileFloatingSearch) &&
+                        (0, listModule_1.renderFloatingMobileSearch)({
+                            filterSearch: filterSearch,
+                            handleNameSearch: handleNameSearch,
+                            onFilterClick: function () {
+                                var _a;
+                                if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareFlexFilters) {
+                                    setFlexFilterModalOpen(true);
+                                }
+                                else {
+                                    handlePopUpModal(true, "filter");
+                                }
+                            },
+                            hideSearch: (_31 = props.organise) === null || _31 === void 0 ? void 0 : _31.hideSearch,
+                            darkMode: (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.darkMode,
+                            floatingOffset: (_33 = props.bareSettings) === null || _33 === void 0 ? void 0 : _33.bareListFloatingActionOffset,
+                            hideFilter: !((_34 = props.bareSettings) === null || _34 === void 0 ? void 0 : _34.bareFlexFilters),
+                            activeFilterCount: ((_35 = props.bareSettings) === null || _35 === void 0 ? void 0 : _35.bareFlexFilters)
+                                ? activeFlexFilterCount_1
+                                : undefined,
+                            // INFO: Hides when items are selected so NewTable's multi-action bar takes over.
+                            hidden: selectAll || ((_36 = selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) !== null && _36 !== void 0 ? _36 : 0) > 0,
+                        })));
             default:
                 return react_1.default.createElement(react_1.default.Fragment, null);
         }
@@ -7274,7 +7408,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, _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;
+        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;
         if (groupId) {
             var groupAttributeDS_1 = structure.find(function (eachDS) { return eachDS.id === groupId; });
             var groupedSpaceTableData = spaceTableData.reduce(function (acc, eachData) {
@@ -7302,7 +7436,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             else {
                 return Object.entries(groupedSpaceTableData).map(function (_a) {
-                    var _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;
+                    var _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;
                     var eachKey = _a[0], eachValue = _a[1];
                     var dataList = eachValue;
                     var ids = (dataList === null || dataList === void 0 ? void 0 : dataList.map(function (eachData) { return eachData._id; })) || [];
@@ -7347,10 +7481,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 filterEnabled: ((_w = props.bareSettings) === null || _w === void 0 ? void 0 : _w.bareFlexFilters)
                                     ? false
                                     : (_x = props.organise) === null || _x === void 0 ? void 0 : _x.advFilterEnabled,
-                                sortId: (_y = props.organise) === null || _y === void 0 ? void 0 : _y.sort,
-                                sortOptions: (_0 = (_z = props.organise) === null || _z === void 0 ? void 0 : _z.renderReferenceLabelOptions) === null || _0 === void 0 ? void 0 : _0.call(_z),
-                                onSortColumn: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.onChangeSort,
-                                onDragColumn: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.onChangeDrag,
+                                sortId: activeSortId,
+                                sortOptions: (_z = (_y = props.organise) === null || _y === void 0 ? void 0 : _y.renderReferenceLabelOptions) === null || _z === void 0 ? void 0 : _z.call(_y),
+                                onSortColumn: handleSortColumn,
+                                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 {
@@ -7367,7 +7501,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     return renderSearchContent(newQuery);
                                 },
                             }, editable: {
-                                active: ((_3 = props.edit) === null || _3 === void 0 ? void 0 : _3.listEditable) && !props.edit.disabledUpdate
+                                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 () {
@@ -7381,7 +7515,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     });
                                 }); },
                             }, addable: {
-                                active: ((_4 = props.edit) === null || _4 === void 0 ? void 0 : _4.listAddable) ? true : false,
+                                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) {
@@ -7392,7 +7526,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         }
                                     });
                                 }); },
-                            }, darkMode: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkMode, hidePagination: true, disableEllipsisOnLongWord: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.disableEllipsisOnLongWord })));
+                            }, darkMode: (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.darkMode, hidePagination: true, disableEllipsisOnLongWord: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.disableEllipsisOnLongWord })));
                 });
             }
         }
@@ -7456,10 +7590,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         filterEnabled: ((_w = props.bareSettings) === null || _w === void 0 ? void 0 : _w.bareFlexFilters)
                             ? false
                             : (_x = props.organise) === null || _x === void 0 ? void 0 : _x.advFilterEnabled,
-                        sortId: (_y = props.organise) === null || _y === void 0 ? void 0 : _y.sort,
-                        sortOptions: (_0 = (_z = props.organise) === null || _z === void 0 ? void 0 : _z.renderReferenceLabelOptions) === null || _0 === void 0 ? void 0 : _0.call(_z),
-                        onSortColumn: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.onChangeSort,
-                        onDragColumn: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.onChangeDrag,
+                        sortId: activeSortId,
+                        sortOptions: (_z = (_y = props.organise) === null || _y === void 0 ? void 0 : _y.renderReferenceLabelOptions) === null || _z === void 0 ? void 0 : _z.call(_y),
+                        onSortColumn: handleSortColumn,
+                        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 {
@@ -7476,7 +7610,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             return renderSearchContent(newQuery);
                         },
                     }, editable: {
-                        active: ((_3 = props.edit) === null || _3 === void 0 ? void 0 : _3.listEditable) && !props.edit.disabledUpdate
+                        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 () {
@@ -7490,7 +7624,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             });
                         }); },
                     }, addable: {
-                        active: ((_4 = props.edit) === null || _4 === void 0 ? void 0 : _4.listAddable) ? true : false,
+                        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) {
@@ -7501,27 +7635,27 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 }
                             });
                         }); },
-                    }, darkMode: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkMode, hidePagination: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.disableEllipsisOnLongWord, pinColumns: (_8 = props.bareSettings) === null || _8 === void 0 ? void 0 : _8.bareListTablePinColumns }));
+                    }, 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: (_10 = (_9 = props.organise) === null || _9 === void 0 ? void 0 : _9.disableSelectFullData) === null || _10 === void 0 ? void 0 : _10.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+            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 &&
-                        !((_11 = props.edit) === null || _11 === void 0 ? void 0 : _11.disabledUpdate) &&
-                        !((_12 = props.bareSettings) === null || _12 === void 0 ? void 0 : _12.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();
                             } }))),
-                    ((_13 = props.edit) === null || _13 === void 0 ? void 0 : _13.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 && !((_14 = props.edit) === null || _14 === void 0 ? void 0 : _14.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);
                         } })),
-                    ((_15 = props.bareSettings) === null || _15 === void 0 ? void 0 : _15.bareListMultipleSelectAddtionalActions) &&
-                        ((_17 = (_16 = props.bareSettings) === null || _16 === void 0 ? void 0 : _16.bareListMultipleSelectAddtionalActions) === null || _17 === void 0 ? void 0 : _17.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 : []);
@@ -7529,20 +7663,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: (_19 = (_18 = props.newTabUrl) === null || _18 === void 0 ? void 0 : _18.default) !== null && _19 !== void 0 ? _19 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_21 = (_20 = props.newTabUrl) === null || _20 === void 0 ? void 0 : _20.addons) !== null && _21 !== void 0 ? _21 : "&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: (_22 = props.lib) === null || _22 === void 0 ? void 0 : _22.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.fixedPagination, advSettings: {
-                    addColumnEnabled: (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.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: (_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.advDragEnabled,
-                    sortEnabled: (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.advSortEnabled,
-                    filterEnabled: ((_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.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
-                        : (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.advFilterEnabled,
-                    sortId: (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.sort,
-                    sortOptions: (_31 = (_30 = props.organise) === null || _30 === void 0 ? void 0 : _30.renderReferenceLabelOptions) === null || _31 === void 0 ? void 0 : _31.call(_30),
-                    onSortColumn: (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.onChangeSort,
-                    onDragColumn: (_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.onChangeDrag,
+                        : (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.advFilterEnabled,
+                    sortId: activeSortId,
+                    sortOptions: (_28 = (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.renderReferenceLabelOptions) === null || _28 === void 0 ? void 0 : _28.call(_27),
+                    onSortColumn: handleSortColumn,
+                    onDragColumn: (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.onChangeDrag,
                     filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                         var _a;
                         return {
@@ -7559,7 +7693,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return renderSearchContent(newQuery);
                     },
                 }, editable: {
-                    active: ((_34 = props.edit) === null || _34 === void 0 ? void 0 : _34.listEditable) && !props.edit.disabledUpdate
+                    active: ((_30 = props.edit) === null || _30 === void 0 ? void 0 : _30.listEditable) && !props.edit.disabledUpdate
                         ? true
                         : false,
                     onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -7573,7 +7707,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         });
                     }); },
                 }, addable: {
-                    active: ((_35 = props.edit) === null || _35 === void 0 ? void 0 : _35.listAddable) ? true : false,
+                    active: ((_31 = props.edit) === null || _31 === void 0 ? void 0 : _31.listAddable) ? true : false,
                     onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
@@ -7584,7 +7718,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                         });
                     }); },
-                }, darkMode: (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.darkMode, hidePagination: (_37 = props.organise) === null || _37 === void 0 ? void 0 : _37.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.disableEllipsisOnLongWord }));
+                }, darkMode: (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.darkMode, hidePagination: (_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.disableEllipsisOnLongWord }));
         }
     };
     var renderTabContent = function (tabs, dataType, viewType) {
@@ -8240,7 +8374,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return null;
     };
     var renderModalContent = function () {
-        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;
+        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;
         if (loading) {
             return (react_1.default.createElement("div", { className: "mt-5" },
                 react_1.default.createElement(loading_1.Loading, null),
@@ -8330,22 +8464,27 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         } }))))));
         }
         else if (sortModal) {
-            return (react_1.default.createElement(settingsModal_1.SortModal, { sort: (_p = props.organise) === null || _p === void 0 ? void 0 : _p.sort, onChangeSort: (_q = props.organise) === null || _q === void 0 ? void 0 : _q.onChangeSort, renderReferenceLabelOptions: (_r = props.organise) === null || _r === void 0 ? void 0 : _r.renderReferenceLabelOptions, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.SortModal, { sort: activeSortId, onChangeSort: handleSortColumn, renderReferenceLabelOptions: (_p = props.organise) === null || _p === void 0 ? void 0 : _p.renderReferenceLabelOptions, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
         else if (overviewModal) {
-            return (react_1.default.createElement(settingsModal_1.OverviewModal, { model: structure, referenceSchema: referenceModelSchema, setReferenceSchema: setReferenceSchema, onChangeHide: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.onChangeHide, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.OverviewModal, { model: structure, referenceSchema: referenceModelSchema, setReferenceSchema: setReferenceSchema, onChangeHide: function (updatedModel) {
+                    var _a, _b;
+                    // INFO: Update internal structure state so persistence captures the change
+                    setStructure(updatedModel);
+                    (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeHide) === null || _b === void 0 ? void 0 : _b.call(_a, updatedModel);
+                }, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
         else if (filterModal) {
-            return (react_1.default.createElement(settingsModal_1.FilterModal, { server: props.devSettings.server, filter: additionalQuery, model: props.model, onChangeFilter: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.onChangeFilter, renderReferenceLabelOptions: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.renderReferenceLabelOptions, renderReferenceSpaceOptions: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.renderReferenceSpaceOptions, setNotification: setNotification, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.FilterModal, { server: props.devSettings.server, filter: additionalQuery, model: props.model, onChangeFilter: (_q = props.organise) === null || _q === void 0 ? void 0 : _q.onChangeFilter, renderReferenceLabelOptions: (_r = props.organise) === null || _r === void 0 ? void 0 : _r.renderReferenceLabelOptions, renderReferenceSpaceOptions: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.renderReferenceSpaceOptions, setNotification: setNotification, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
         else if (addTabModal) {
-            return (react_1.default.createElement(settingsModal_1.TabModal, { type: props.type, tabs: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.extendedTabs, onChangeTabs: (_x = props.organise) === null || _x === void 0 ? void 0 : _x.onChangeTabs, model: structure, renderReferenceLabelOptions: (_y = props.organise) === null || _y === void 0 ? void 0 : _y.renderReferenceLabelOptions, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.TabModal, { type: props.type, tabs: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.extendedTabs, onChangeTabs: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.onChangeTabs, model: structure, renderReferenceLabelOptions: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.renderReferenceLabelOptions, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
@@ -8407,7 +8546,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 return eachModel.id === selectedObjectStructureId;
             });
             if (filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) {
-                var modalModel_1 = (_z = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _z !== void 0 ? _z : [];
+                var modalModel_1 = (_w = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _w !== void 0 ? _w : [];
                 var handleOnFailValidation = function (refList) {
                     var _a, _b;
                     if ((refList === null || refList === void 0 ? void 0 : refList.length) > 0) {
@@ -8479,16 +8618,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         disabledOnEnter_2 = true;
                     return null;
                 });
-                if ((_0 = props.bareSettings) === null || _0 === void 0 ? void 0 : _0.bareListObjectHandleData) {
+                if ((_x = props.bareSettings) === null || _x === void 0 ? void 0 : _x.bareListObjectHandleData) {
                     var listObjectViewType = props.type === "read"
                         ? "read"
                         : selectedObjectId
                             ? "update"
                             : "new";
-                    (_2 = (_1 = props.bareSettings) === null || _1 === void 0 ? void 0 : _1.bareListObjectHandleData) === null || _2 === void 0 ? void 0 : _2.call(_1, listObjectViewType, selectedObjectData);
+                    (_z = (_y = props.bareSettings) === null || _y === void 0 ? void 0 : _y.bareListObjectHandleData) === null || _z === void 0 ? void 0 : _z.call(_y, listObjectViewType, selectedObjectData);
                 }
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " ").concat(gridGap, " pb-32 mt-6 sm:pb-36"), ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType, disabledOnEnter: disabledOnEnter_2, handleOnFailValidation: handleOnFailValidation }, renderDataTemplateFormContent(selectedObjectData, (_3 = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _3 !== void 0 ? _3 : [], objectFormInputRefs, true, filterObjectModel.type === "listObject", undefined, filterObjectModel.type === "listObject"
+                    react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " ").concat(gridGap, " pb-32 mt-6 sm:pb-36"), ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType, disabledOnEnter: disabledOnEnter_2, handleOnFailValidation: handleOnFailValidation }, renderDataTemplateFormContent(selectedObjectData, (_0 = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _0 !== void 0 ? _0 : [], objectFormInputRefs, true, filterObjectModel.type === "listObject", undefined, filterObjectModel.type === "listObject"
                         ? selectedData
                         : undefined)),
                     react_1.default.createElement("div", { className: "flex justify-end pt-8" },
@@ -8701,7 +8840,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_40 = (_39 = props.renderSettings) === null || _39 === void 0 ? void 0 : _39.renderLoadingUI) === null || _40 === void 0 ? void 0 : _40.call(_39)) && loading ? ((_41 = props.renderSettings) === null || _41 === void 0 ? void 0 : _41.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
+        ((_48 = (_47 = props.renderSettings) === null || _47 === void 0 ? void 0 : _47.renderLoadingUI) === null || _48 === void 0 ? void 0 : _48.call(_47)) && loading ? ((_49 = props.renderSettings) === null || _49 === void 0 ? void 0 : _49.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;