blixify-ui-web 1.2.123 → 1.2.125

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

@@ -200,10 +200,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // Every read of the view type below uses resolvedType. The distinction matters
     // most in effect dependency arrays — following props.type there would leave
     // the list never refetching while the panel is open, which fails silently.
-    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, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79;
+    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, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84;
     // INFO: the panel cannot navigate its way out — handleNavigate("read") is
     // routed straight back into it — so expand-to-full-page is local state.
-    var _80 = (0, react_1.useState)(false), drawerPageView = _80[0], setDrawerPageView = _80[1];
+    var _85 = (0, react_1.useState)(false), drawerPageView = _85[0], setDrawerPageView = _85[1];
     // INFO: the panel keeps rendering the record it was opened with rather than
     // live props. Without this, navigating back to the list would re-render the
     // still-mounted panel as a second list behind the overlay.
@@ -285,18 +285,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             initialFilterReferenceDate: initialFilterReferenceDate,
         };
     };
-    var _81 = intialiseDefaultFilterValues(), initialFilterSearch = _81.initialFilterSearch, initialFilterSearchParams = _81.initialFilterSearchParams, initialFilterSelection = _81.initialFilterSelection, initialFilterReference = _81.initialFilterReference, initialFilterReferenceDate = _81.initialFilterReferenceDate;
+    var _86 = intialiseDefaultFilterValues(), initialFilterSearch = _86.initialFilterSearch, initialFilterSearchParams = _86.initialFilterSearchParams, initialFilterSelection = _86.initialFilterSelection, initialFilterReference = _86.initialFilterReference, initialFilterReferenceDate = _86.initialFilterReferenceDate;
     // INFO: Persist view state hook — handles storage read/write for filter/sort/column state
-    var _82 = (0, viewStatePersistence_1.usePersistedViewState)({
+    var _87 = (0, viewStatePersistence_1.usePersistedViewState)({
         mode: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.persistViewState,
         collectionId: props.collectionId,
         persistKey: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.persistKey,
         type: resolvedType,
-    }), rawPersistedState = _82.persistedState, isPersistEnabled = _82.isEnabled, handleSaveView = _82.handleSaveView, handleRegisterViewSnapshot = _82.handleRegisterViewSnapshot;
+    }), rawPersistedState = _87.persistedState, isPersistEnabled = _87.isEnabled, handleSaveView = _87.handleSaveView, handleRegisterViewSnapshot = _87.handleRegisterViewSnapshot;
     // INFO: drop stored filters/sort on removed columns — they would empty the table
     var persistedState = (0, react_1.useMemo)(function () { return (0, viewStatePersistence_1.handlePruneStaleColumns)(rawPersistedState, props.model); }, [rawPersistedState, props.model]);
-    var _83 = (0, react_1.useState)(false), loading = _83[0], setLoading = _83[1];
-    var _84 = (0, react_1.useState)(), notification = _84[0], setNotification = _84[1];
+    var _88 = (0, react_1.useState)(false), loading = _88[0], setLoading = _88[1];
+    var _89 = (0, react_1.useState)(), notification = _89[0], setNotification = _89[1];
     // INFO: a success toast is confirmation, not a decision — it clears itself so
     // it never sits on the floating step bar; errors stay until dismissed
     (0, react_1.useEffect)(function () {
@@ -306,59 +306,59 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return function () { return clearTimeout(timer); };
     }, [notification]);
     //INFO : Used by List
-    var _85 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _d !== void 0 ? _d : initialFilterSearch), filterSearch = _85[0], setFilterSearch = _85[1];
-    var _86 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _e !== void 0 ? _e : initialFilterSearchParams), filterSearchParams = _86[0], setFilterSearchParams = _86[1];
-    var _87 = (0, react_1.useState)((_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _f !== void 0 ? _f : initialFilterSelection), filterSelection = _87[0], setFilterSelection = _87[1];
-    var _88 = (0, react_1.useState)((_g = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _g !== void 0 ? _g : initialFilterReference), filterReference = _88[0], setFilterReference = _88[1];
-    var _89 = (0, react_1.useState)({}), filterReferenceSearch = _89[0], setFilterReferenceSearch = _89[1];
-    var _90 = (0, react_1.useState)({}), filterReferenceList = _90[0], setFilterReferenceList = _90[1];
-    var _91 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
+    var _90 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _d !== void 0 ? _d : initialFilterSearch), filterSearch = _90[0], setFilterSearch = _90[1];
+    var _91 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _e !== void 0 ? _e : initialFilterSearchParams), filterSearchParams = _91[0], setFilterSearchParams = _91[1];
+    var _92 = (0, react_1.useState)((_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _f !== void 0 ? _f : initialFilterSelection), filterSelection = _92[0], setFilterSelection = _92[1];
+    var _93 = (0, react_1.useState)((_g = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _g !== void 0 ? _g : initialFilterReference), filterReference = _93[0], setFilterReference = _93[1];
+    var _94 = (0, react_1.useState)({}), filterReferenceSearch = _94[0], setFilterReferenceSearch = _94[1];
+    var _95 = (0, react_1.useState)({}), filterReferenceList = _95[0], setFilterReferenceList = _95[1];
+    var _96 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
         ? (0, viewStatePersistence_1.parseDateFilterState)(persistedState.filterReferenceDate)
-        : initialFilterReferenceDate), filterReferenceDate = _91[0], setFilterReferenceDate = _91[1];
-    var _92 = (0, react_1.useState)(true), tableLoading = _92[0], setTableLoading = _92[1];
-    var _93 = (0, react_1.useState)(""), cursor = _93[0], setCursor = _93[1];
-    var _94 = (0, react_1.useState)(""), lastCursor = _94[0], setLastCursor = _94[1];
-    var _95 = (0, react_1.useState)([]), tableData = _95[0], setTableData = _95[1];
-    var _96 = (0, react_1.useState)([]), spaceTableData = _96[0], setSpaceTableData = _96[1];
+        : initialFilterReferenceDate), filterReferenceDate = _96[0], setFilterReferenceDate = _96[1];
+    var _97 = (0, react_1.useState)(true), tableLoading = _97[0], setTableLoading = _97[1];
+    var _98 = (0, react_1.useState)(""), cursor = _98[0], setCursor = _98[1];
+    var _99 = (0, react_1.useState)(""), lastCursor = _99[0], setLastCursor = _99[1];
+    var _100 = (0, react_1.useState)([]), tableData = _100[0], setTableData = _100[1];
+    var _101 = (0, react_1.useState)([]), spaceTableData = _101[0], setSpaceTableData = _101[1];
     // INFO: a save resolves after later renders, so it reads the table from here —
     // the state it closed over can predate an earlier save on the same row
     var tableDataRef = (0, react_1.useRef)([]);
     var spaceTableDataRef = (0, react_1.useRef)([]);
     tableDataRef.current = tableData;
     spaceTableDataRef.current = spaceTableData;
-    var _97 = (0, react_1.useState)(0), size = _97[0], setSize = _97[1];
-    var _98 = (0, react_1.useState)((_k = (_h = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _h !== void 0 ? _h : (_j = props.organise) === null || _j === void 0 ? void 0 : _j.pageIndex) !== null && _k !== void 0 ? _k : 0), pageIndex = _98[0], setPageIndex = _98[1];
-    var _99 = (0, react_1.useState)([]), selectedIds = _99[0], setSelectedIds = _99[1];
-    var _100 = (0, react_1.useState)(false), selectAll = _100[0], setSelectAll = _100[1];
-    var _101 = (0, react_1.useState)(""), deletePasscode = _101[0], setDeletePasscode = _101[1];
-    var _102 = (0, react_1.useState)(""), deletePasscodeInput = _102[0], setDeletePasscodeInput = _102[1];
-    var _103 = (0, react_1.useState)(""), deleteFeedId = _103[0], setDeleteFeedId = _103[1];
+    var _102 = (0, react_1.useState)(0), size = _102[0], setSize = _102[1];
+    var _103 = (0, react_1.useState)((_k = (_h = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _h !== void 0 ? _h : (_j = props.organise) === null || _j === void 0 ? void 0 : _j.pageIndex) !== null && _k !== void 0 ? _k : 0), pageIndex = _103[0], setPageIndex = _103[1];
+    var _104 = (0, react_1.useState)([]), selectedIds = _104[0], setSelectedIds = _104[1];
+    var _105 = (0, react_1.useState)(false), selectAll = _105[0], setSelectAll = _105[1];
+    var _106 = (0, react_1.useState)(""), deletePasscode = _106[0], setDeletePasscode = _106[1];
+    var _107 = (0, react_1.useState)(""), deletePasscodeInput = _107[0], setDeletePasscodeInput = _107[1];
+    var _108 = (0, react_1.useState)(""), deleteFeedId = _108[0], setDeleteFeedId = _108[1];
     //INFO : Used by List Organise
     // INFO: Internal sort state that overrides props.organise?.sort when
     // persistViewState is enabled and a persisted sort exists
-    var _104 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _l !== void 0 ? _l : undefined), persistedSort = _104[0], setPersistedSort = _104[1];
-    var _105 = (0, react_1.useState)(false), filterDraft = _105[0], setFilterDraft = _105[1];
-    var _106 = (0, react_1.useState)(false), addTabModal = _106[0], setAddTabModal = _106[1];
+    var _109 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _l !== void 0 ? _l : undefined), persistedSort = _109[0], setPersistedSort = _109[1];
+    var _110 = (0, react_1.useState)(false), filterDraft = _110[0], setFilterDraft = _110[1];
+    var _111 = (0, react_1.useState)(false), addTabModal = _111[0], setAddTabModal = _111[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 _107 = (0, react_1.useState)(function () {
+    var _112 = (0, react_1.useState)(function () {
         var _a, _b;
         return (0, listModule_1.renderSelectedRefreshTab)(props.localURLEndpoint, resolvedType, 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 = _107[0], setSelectedTab = _107[1];
-    var _108 = (0, react_1.useState)("dayGridMonth"), calendarView = _108[0], setCalendarView = _108[1];
+    }), selectedTab = _112[0], setSelectedTab = _112[1];
+    var _113 = (0, react_1.useState)("dayGridMonth"), calendarView = _113[0], setCalendarView = _113[1];
     // INFO: bareNewDTW calendar viewSwitch mode — drives the NewCalendar variant
     // (calendarView above drives the matching range query)
-    var _109 = (0, react_1.useState)("month"), newCalendarViewMode = _109[0], setNewCalendarViewMode = _109[1];
-    var _110 = (0, react_1.useState)(new Date()), calendarTabMonth = _110[0], setCalendarTabMonth = _110[1];
-    var _111 = (0, react_1.useState)(true), kanbanDroppable = _111[0], setKanbanDroppable = _111[1];
-    var _112 = (0, react_1.useState)([]), kanbanOptions = _112[0], setKanbanOptions = _112[1];
-    var _113 = (0, react_1.useState)(false), queryForm = _113[0], setQueryForm = _113[1];
-    var _114 = (0, react_1.useState)(false), batchUpdateModal = _114[0], setBatchUpdateModal = _114[1];
-    var _115 = (0, react_1.useState)({
+    var _114 = (0, react_1.useState)("month"), newCalendarViewMode = _114[0], setNewCalendarViewMode = _114[1];
+    var _115 = (0, react_1.useState)(new Date()), calendarTabMonth = _115[0], setCalendarTabMonth = _115[1];
+    var _116 = (0, react_1.useState)(true), kanbanDroppable = _116[0], setKanbanDroppable = _116[1];
+    var _117 = (0, react_1.useState)([]), kanbanOptions = _117[0], setKanbanOptions = _117[1];
+    var _118 = (0, react_1.useState)(false), queryForm = _118[0], setQueryForm = _118[1];
+    var _119 = (0, react_1.useState)(false), batchUpdateModal = _119[0], setBatchUpdateModal = _119[1];
+    var _120 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _115[0], setBatchUpdateData = _115[1];
-    var _116 = (0, react_1.useState)(function () {
+    }), batchUpdateData = _120[0], setBatchUpdateData = _120[1];
+    var _121 = (0, react_1.useState)(function () {
         var baseModel = (props === null || props === void 0 ? void 0 : props.model) || [];
         if (!persistedState)
             return baseModel;
@@ -384,8 +384,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             });
         }
         return model;
-    }), structure = _116[0], setStructure = _116[1];
-    var _117 = (0, react_1.useState)(((_m = props === null || props === void 0 ? void 0 : props.organise) === null || _m === void 0 ? void 0 : _m.additionalQuery) || []), additionalQuery = _117[0], setAdditionalQuery = _117[1];
+    }), structure = _121[0], setStructure = _121[1];
+    var _122 = (0, react_1.useState)(((_m = props === null || props === void 0 ? void 0 : props.organise) === null || _m === void 0 ? void 0 : _m.additionalQuery) || []), additionalQuery = _122[0], setAdditionalQuery = _122[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 defaultFlexFilterRow = [
@@ -396,9 +396,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             value: undefined,
         },
     ];
-    var _118 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _123 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFilters = _118[0], setFlexFilters = _118[1];
+        : defaultFlexFilterRow), flexFilters = _123[0], setFlexFilters = _123[1];
     // INFO: always-current mirror of flexFilters, read by the imperative apply/
     // clear methods so chained calls in one tick aren't stale.
     var flexFiltersRef = (0, react_1.useRef)(flexFilters);
@@ -411,104 +411,109 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     }, [flexFilters]);
     // INFO: Debounced version of flexFilters used by renderImpSearchFilterConditions
     // to prevent API calls on every keystroke when typing in value inputs
-    var _119 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _124 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFiltersDebounced = _119[0], setFlexFiltersDebounced = _119[1];
-    var _120 = (0, react_1.useState)({}), flexFilterReferenceOptions = _120[0], setFlexFilterReferenceOptions = _120[1];
-    var _121 = (0, react_1.useState)({}), flexFilterReferenceSearch = _121[0], setFlexFilterReferenceSearch = _121[1];
-    var _122 = (0, react_1.useState)(false), flexFilterModalOpen = _122[0], setFlexFilterModalOpen = _122[1];
-    var _123 = (0, react_1.useState)(false), viewSettingsModalOpen = _123[0], setViewSettingsModalOpen = _123[1];
+        : defaultFlexFilterRow), flexFiltersDebounced = _124[0], setFlexFiltersDebounced = _124[1];
+    var _125 = (0, react_1.useState)({}), flexFilterReferenceOptions = _125[0], setFlexFilterReferenceOptions = _125[1];
+    var _126 = (0, react_1.useState)({}), flexFilterReferenceSearch = _126[0], setFlexFilterReferenceSearch = _126[1];
+    var _127 = (0, react_1.useState)(false), flexFilterModalOpen = _127[0], setFlexFilterModalOpen = _127[1];
+    var _128 = (0, react_1.useState)(false), viewSettingsModalOpen = _128[0], setViewSettingsModalOpen = _128[1];
     // INFO: Columns the end user chose to hide (bareSettings.bareViewSettings).
     // Deliberately kept out of `structure`: the props-sync effect below resets
     // structure to props.model whenever props change, which would wipe the
     // choice, and the persist effect derives schema-level hiddenColumnIds from
     // structure — writing user hides there would blur the two concepts.
-    var _124 = (0, react_1.useState)((_o = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _o !== void 0 ? _o : []), userHiddenColumnIds = _124[0], setUserHiddenColumnIds = _124[1];
-    var _125 = (0, react_1.useState)(""), columnSearch = _125[0], setColumnSearch = _125[1];
-    var _126 = (0, react_1.useState)(null), draggingColumnId = _126[0], setDraggingColumnId = _126[1];
+    var _129 = (0, react_1.useState)((_o = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _o !== void 0 ? _o : []), userHiddenColumnIds = _129[0], setUserHiddenColumnIds = _129[1];
+    var _130 = (0, react_1.useState)(""), columnSearch = _130[0], setColumnSearch = _130[1];
+    var _131 = (0, react_1.useState)([]), savedViews = _131[0], setSavedViews = _131[1];
+    var _132 = (0, react_1.useState)(null), activeSavedViewId = _132[0], setActiveSavedViewId = _132[1];
+    // INFO: null while the name box is closed
+    var _133 = (0, react_1.useState)(null), savedViewName = _133[0], setSavedViewName = _133[1];
+    var _134 = (0, react_1.useState)(null), deletingSavedViewId = _134[0], setDeletingSavedViewId = _134[1];
+    var _135 = (0, react_1.useState)(null), draggingColumnId = _135[0], setDraggingColumnId = _135[1];
     var columnRowRefs = (0, react_1.useRef)({});
     //INFO : Used by Auth
-    var _127 = (0, react_1.useState)({
+    var _136 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
         create: false,
-    }), authMethods = _127[0], setAuthMethods = _127[1];
-    var _128 = (0, react_1.useState)(""), selectedAuthMethod = _128[0], setSelectedAuthMethod = _128[1];
+    }), authMethods = _136[0], setAuthMethods = _136[1];
+    var _137 = (0, react_1.useState)(""), selectedAuthMethod = _137[0], setSelectedAuthMethod = _137[1];
     // INFO: Used by Activity Log
-    var _129 = (0, react_1.useState)(false), activityModal = _129[0], setActivityModal = _129[1];
-    var _130 = (0, react_1.useState)(""), activityId = _130[0], setActivityId = _130[1];
+    var _138 = (0, react_1.useState)(false), activityModal = _138[0], setActivityModal = _138[1];
+    var _139 = (0, react_1.useState)(""), activityId = _139[0], setActivityId = _139[1];
     //INFO : Used by Export
-    var _131 = (0, react_1.useState)(null), csvFile = _131[0], setCSVFile = _131[1];
-    var _132 = (0, react_1.useState)([]), csvFileData = _132[0], setCSVFileData = _132[1];
-    var _133 = (0, react_1.useState)(0), stepCSVIndex = _133[0], setStepCSVIndex = _133[1];
-    var _134 = (0, react_1.useState)({}), listCSVMapAttribute = _134[0], setListCSVMapAttribute = _134[1];
-    var _135 = (0, react_1.useState)({}), listCSVObjAttribute = _135[0], setListCSVObjAttribute = _135[1];
-    var _136 = (0, react_1.useState)([]), csvAPIAttribute = _136[0], setCSVAPIAttribute = _136[1];
-    var _137 = (0, react_1.useState)(((_p = props.devSettings.currentUser) === null || _p === void 0 ? void 0 : _p.userEmail) || ""), exportCSVEmail = _137[0], setExportCSVEmail = _137[1];
-    var _138 = (0, react_1.useState)(((_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.defaultExportPDFName) || ""), exportPDFTitle = _138[0], setExportPDFTitle = _138[1];
-    var _139 = (0, react_1.useState)(false), exportPDFLoading = _139[0], setExportPDFLoading = _139[1];
-    var _140 = (0, react_1.useState)(false), exportReadPDFLoading = _140[0], setExportReadPDFLoading = _140[1];
-    var _141 = (0, react_1.useState)((_u = (_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.exportSettings) === null || _t === void 0 ? void 0 : _t.sumColumnId) !== null && _u !== void 0 ? _u : []), exportSumAttributeIds = _141[0], setExportSumAttributeIds = _141[1];
-    var _142 = (0, react_1.useState)((_x = (_w = (_v = props.organise) === null || _v === void 0 ? void 0 : _v.exportSettings) === null || _w === void 0 ? void 0 : _w.hideSubItems) !== null && _x !== void 0 ? _x : false), hideSubItems = _142[0], setHideSubItems = _142[1];
-    var _143 = (0, react_1.useState)([]), importTableData = _143[0], setImportTableData = _143[1];
-    var _144 = (0, react_1.useState)([]), queryList = _144[0], setQueryList = _144[1];
-    var _145 = (0, react_1.useState)(undefined), allQueryList = _145[0], setAllQueryList = _145[1];
-    var _146 = (0, react_1.useState)(-1), queryIndex = _146[0], setQueryIndex = _146[1];
-    var _147 = (0, react_1.useState)((_y = props.organise) === null || _y === void 0 ? void 0 : _y.groupBy), groupId = _147[0], setGroupId = _147[1];
-    var _148 = (0, react_1.useState)(""), readTabSection = _148[0], setReadTabSection = _148[1];
-    var _149 = (0, react_1.useState)(false), readFloatingNav = _149[0], setReadFloatingNav = _149[1];
+    var _140 = (0, react_1.useState)(null), csvFile = _140[0], setCSVFile = _140[1];
+    var _141 = (0, react_1.useState)([]), csvFileData = _141[0], setCSVFileData = _141[1];
+    var _142 = (0, react_1.useState)(0), stepCSVIndex = _142[0], setStepCSVIndex = _142[1];
+    var _143 = (0, react_1.useState)({}), listCSVMapAttribute = _143[0], setListCSVMapAttribute = _143[1];
+    var _144 = (0, react_1.useState)({}), listCSVObjAttribute = _144[0], setListCSVObjAttribute = _144[1];
+    var _145 = (0, react_1.useState)([]), csvAPIAttribute = _145[0], setCSVAPIAttribute = _145[1];
+    var _146 = (0, react_1.useState)(((_p = props.devSettings.currentUser) === null || _p === void 0 ? void 0 : _p.userEmail) || ""), exportCSVEmail = _146[0], setExportCSVEmail = _146[1];
+    var _147 = (0, react_1.useState)(((_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.defaultExportPDFName) || ""), exportPDFTitle = _147[0], setExportPDFTitle = _147[1];
+    var _148 = (0, react_1.useState)(false), exportPDFLoading = _148[0], setExportPDFLoading = _148[1];
+    var _149 = (0, react_1.useState)(false), exportReadPDFLoading = _149[0], setExportReadPDFLoading = _149[1];
+    var _150 = (0, react_1.useState)((_u = (_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.exportSettings) === null || _t === void 0 ? void 0 : _t.sumColumnId) !== null && _u !== void 0 ? _u : []), exportSumAttributeIds = _150[0], setExportSumAttributeIds = _150[1];
+    var _151 = (0, react_1.useState)((_x = (_w = (_v = props.organise) === null || _v === void 0 ? void 0 : _v.exportSettings) === null || _w === void 0 ? void 0 : _w.hideSubItems) !== null && _x !== void 0 ? _x : false), hideSubItems = _151[0], setHideSubItems = _151[1];
+    var _152 = (0, react_1.useState)([]), importTableData = _152[0], setImportTableData = _152[1];
+    var _153 = (0, react_1.useState)([]), queryList = _153[0], setQueryList = _153[1];
+    var _154 = (0, react_1.useState)(undefined), allQueryList = _154[0], setAllQueryList = _154[1];
+    var _155 = (0, react_1.useState)(-1), queryIndex = _155[0], setQueryIndex = _155[1];
+    var _156 = (0, react_1.useState)((_y = props.organise) === null || _y === void 0 ? void 0 : _y.groupBy), groupId = _156[0], setGroupId = _156[1];
+    var _157 = (0, react_1.useState)(""), readTabSection = _157[0], setReadTabSection = _157[1];
+    var _158 = (0, react_1.useState)(false), readFloatingNav = _158[0], setReadFloatingNav = _158[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _150 = (0, react_1.useState)(false), modalVisible = _150[0], setModalVisible = _150[1];
-    var _151 = (0, react_1.useState)(false), deleteModal = _151[0], setDeleteModal = _151[1];
-    var _152 = (0, react_1.useState)(false), excelModal = _152[0], setExcelModal = _152[1];
-    var _153 = (0, react_1.useState)(false), exportExcel = _153[0], setExportExcel = _153[1];
-    var _154 = (0, react_1.useState)(""), exportType = _154[0], setExportType = _154[1];
-    var _155 = (0, react_1.useState)(false), exportQR = _155[0], setExportQR = _155[1];
-    var _156 = (0, react_1.useState)(function () {
+    var _159 = (0, react_1.useState)(false), modalVisible = _159[0], setModalVisible = _159[1];
+    var _160 = (0, react_1.useState)(false), deleteModal = _160[0], setDeleteModal = _160[1];
+    var _161 = (0, react_1.useState)(false), excelModal = _161[0], setExcelModal = _161[1];
+    var _162 = (0, react_1.useState)(false), exportExcel = _162[0], setExportExcel = _162[1];
+    var _163 = (0, react_1.useState)(""), exportType = _163[0], setExportType = _163[1];
+    var _164 = (0, react_1.useState)(false), exportQR = _164[0], setExportQR = _164[1];
+    var _165 = (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 = _156[0], setActiveTab = _156[1];
-    var _157 = (0, react_1.useState)(false), signatureSigning = _157[0], setSignatureSigning = _157[1];
-    var _158 = (0, react_1.useState)({}), selectedData = _158[0], setSelectedData = _158[1];
-    var _159 = (0, react_1.useState)(""), selectedObjectStructureId = _159[0], setSelectedObjectStructureId = _159[1];
-    var _160 = (0, react_1.useState)(""), selectedObjectId = _160[0], setSelectedObjectId = _160[1];
-    var _161 = (0, react_1.useState)(""), selectedListAddressId = _161[0], setSelectedListAddressId = _161[1];
-    var _162 = (0, react_1.useState)(-1), selectedListAddressIndex = _162[0], setSelectedListAddressIndex = _162[1];
-    var _163 = (0, react_1.useState)({
+    }), activeTab = _165[0], setActiveTab = _165[1];
+    var _166 = (0, react_1.useState)(false), signatureSigning = _166[0], setSignatureSigning = _166[1];
+    var _167 = (0, react_1.useState)({}), selectedData = _167[0], setSelectedData = _167[1];
+    var _168 = (0, react_1.useState)(""), selectedObjectStructureId = _168[0], setSelectedObjectStructureId = _168[1];
+    var _169 = (0, react_1.useState)(""), selectedObjectId = _169[0], setSelectedObjectId = _169[1];
+    var _170 = (0, react_1.useState)(""), selectedListAddressId = _170[0], setSelectedListAddressId = _170[1];
+    var _171 = (0, react_1.useState)(-1), selectedListAddressIndex = _171[0], setSelectedListAddressIndex = _171[1];
+    var _172 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _163[0], setSelectedListAddress = _163[1];
-    var _164 = (0, react_1.useState)({}), selectedObjectData = _164[0], setSelectedObjectData = _164[1];
-    var _165 = (0, react_1.useState)(null), objectCellEdit = _165[0], setObjectCellEdit = _165[1];
-    var _166 = (0, react_1.useState)(false), referenceLoading = _166[0], setReferenceLoading = _166[1];
-    var _167 = (0, react_1.useState)({}), referencesOptions = _167[0], setReferencesOptions = _167[1];
-    var _168 = (0, react_1.useState)({}), referencesDetails = _168[0], setReferencesDetails = _168[1];
-    var _169 = (0, react_1.useState)({}), listReferencesOptions = _169[0], setListReferencesOptions = _169[1];
-    var _170 = (0, react_1.useState)({}), referenceDeleteTableData = _170[0], setReferenceDeleteTableData = _170[1];
-    var _171 = (0, react_1.useState)(0), referenceDeleteIndex = _171[0], setReferenceDeleteIndex = _171[1];
-    var _172 = (0, react_1.useState)({
+    }), selectedListAddress = _172[0], setSelectedListAddress = _172[1];
+    var _173 = (0, react_1.useState)({}), selectedObjectData = _173[0], setSelectedObjectData = _173[1];
+    var _174 = (0, react_1.useState)(null), objectCellEdit = _174[0], setObjectCellEdit = _174[1];
+    var _175 = (0, react_1.useState)(false), referenceLoading = _175[0], setReferenceLoading = _175[1];
+    var _176 = (0, react_1.useState)({}), referencesOptions = _176[0], setReferencesOptions = _176[1];
+    var _177 = (0, react_1.useState)({}), referencesDetails = _177[0], setReferencesDetails = _177[1];
+    var _178 = (0, react_1.useState)({}), listReferencesOptions = _178[0], setListReferencesOptions = _178[1];
+    var _179 = (0, react_1.useState)({}), referenceDeleteTableData = _179[0], setReferenceDeleteTableData = _179[1];
+    var _180 = (0, react_1.useState)(0), referenceDeleteIndex = _180[0], setReferenceDeleteIndex = _180[1];
+    var _181 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _172[0], setReferenceCreationModal = _172[1];
-    var _173 = (0, react_1.useState)({}), referenceModelSchema = _173[0], setReferenceSchema = _173[1];
-    var _174 = (0, react_1.useState)([]), kanbanChecked = _174[0], setKanbanChecked = _174[1];
+    }), referenceCreationModal = _181[0], setReferenceCreationModal = _181[1];
+    var _182 = (0, react_1.useState)({}), referenceModelSchema = _182[0], setReferenceSchema = _182[1];
+    var _183 = (0, react_1.useState)([]), kanbanChecked = _183[0], setKanbanChecked = _183[1];
     //INFO : Offline
-    var _175 = (0, react_1.useState)(0), offlineDataLength = _175[0], setOfflineDataLength = _175[1];
-    var _176 = (0, react_1.useState)(false), offlineModal = _176[0], setOfflineModal = _176[1];
+    var _184 = (0, react_1.useState)(0), offlineDataLength = _184[0], setOfflineDataLength = _184[1];
+    var _185 = (0, react_1.useState)(false), offlineModal = _185[0], setOfflineModal = _185[1];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    var _177 = (0, react_1.useState)(false), isLive = _177[0], setIsLive = _177[1];
-    var _178 = (0, react_1.useState)(false), isLiveOffline = _178[0], setIsLiveOffline = _178[1];
+    var _186 = (0, react_1.useState)(false), isLive = _186[0], setIsLive = _186[1];
+    var _187 = (0, react_1.useState)(false), isLiveOffline = _187[0], setIsLiveOffline = _187[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 _179 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _179[0], setIsNetworkOffline = _179[1];
+    var _188 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _188[0], setIsNetworkOffline = _188[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -582,6 +587,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var exportCSVEmailInputRef = (0, react_1.createRef)();
     var readQueryHocRef = (0, react_1.useRef)(null);
     var listRQueryHocRef = (0, react_1.useRef)(null);
+    // INFO: the list request as it was before a saved view was applied; checked
+    // after the next render to tell whether the view changed what is fetched
+    var pendingViewCondKeyRef = (0, react_1.useRef)(null);
+    // INFO: the schema's own columns while a saved view overlays hide/order on
+    // screen; null when nothing is overlaid and structure is the schema itself
+    var schemaStructureRef = (0, react_1.useRef)(null);
     var typingTimeout = (0, react_1.useRef)(null);
     var flexFilterTypingTimeout = (0, react_1.useRef)(null);
     var mapViewRef = (0, react_1.useRef)(null);
@@ -629,32 +640,35 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         ? true
         : false;
     // INFO: a consumer that wires onChangeHide owns the hide at schema level
-    // (Space, Sun Luan) — toggling writes to the model and calls back. Without it
+    // (shared by every user) — toggling writes to the model and calls back. Without it
     // the hide is this user's own and lives in userHiddenColumnIds.
     var isSchemaHideMode = ((_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.onChangeHide) ? true : false;
     // INFO: rows per page is a view setting the user can change, so it starts from
     // the persisted value and falls back to the consumer's limit
-    var _180 = (0, react_1.useState)((_10 = (_9 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _9 !== void 0 ? _9 : props.limit) !== null && _10 !== void 0 ? _10 : 10), pageLimit = _180[0], setPageLimit = _180[1];
+    var _189 = (0, react_1.useState)((_10 = (_9 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _9 !== void 0 ? _9 : props.limit) !== null && _10 !== void 0 ? _10 : 10), pageLimit = _189[0], setPageLimit = _189[1];
     var limit = pageLimit;
-    var activeSortId = (isPersistEnabled && persistedSort) || ((_11 = props.organise) === null || _11 === void 0 ? void 0 : _11.sort);
+    var isSavedViewsEnabled = !!((_11 = props.organise) === null || _11 === void 0 ? void 0 : _11.savedViews) && resolvedType === "list";
+    // INFO: a saved view carries its sort, so the sort is held here as with persistViewState
+    var isInternalSort = isPersistEnabled || isSavedViewsEnabled;
+    var activeSortId = (isInternalSort && persistedSort) || ((_12 = props.organise) === null || _12 === void 0 ? void 0 : _12.sort);
     var handleSortColumn = function (value) {
         var _a, _b;
-        if (isPersistEnabled)
+        if (isInternalSort)
             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 _181 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _181.canUpdateRecord, canInlineUpdate = _181.canInlineUpdate, canBatchUpdate = _181.canBatchUpdate, canDeleteRecord = _181.canDeleteRecord;
-    var isEditor = ((_12 = props.edit) === null || _12 === void 0 ? void 0 : _12.allEditable) ? true : false;
-    var isOffline = (_13 = props.bareSettings) === null || _13 === void 0 ? void 0 : _13.bareOffline;
+    var _190 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _190.canUpdateRecord, canInlineUpdate = _190.canInlineUpdate, canBatchUpdate = _190.canBatchUpdate, canDeleteRecord = _190.canDeleteRecord;
+    var isEditor = ((_13 = props.edit) === null || _13 === void 0 ? void 0 : _13.allEditable) ? true : false;
+    var isOffline = (_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.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 && ((_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareOfflineNetworkListener);
-    var showId = (_15 = props.space) === null || _15 === void 0 ? void 0 : _15.showId;
+    var isOfflineNetworkListener = isOffline && ((_15 = props.bareSettings) === null || _15 === void 0 ? void 0 : _15.bareOfflineNetworkListener);
+    var showId = (_16 = props.space) === null || _16 === void 0 ? void 0 : _16.showId;
     var remainId = showId || selectedObjectStructureId ? true : false;
-    var idField = ((_16 = props.space) === null || _16 === void 0 ? void 0 : _16.idField) || ((_17 = props.organise) === null || _17 === void 0 ? void 0 : _17.idField);
-    var pipeline = (_18 = props === null || props === void 0 ? void 0 : props.space) === null || _18 === void 0 ? void 0 : _18.pipeline;
-    if ((_19 = props.bareSettings) === null || _19 === void 0 ? void 0 : _19.bareListPipeline) {
+    var idField = ((_17 = props.space) === null || _17 === void 0 ? void 0 : _17.idField) || ((_18 = props.organise) === null || _18 === void 0 ? void 0 : _18.idField);
+    var pipeline = (_19 = props === null || props === void 0 ? void 0 : props.space) === null || _19 === void 0 ? void 0 : _19.pipeline;
+    if ((_20 = props.bareSettings) === null || _20 === void 0 ? void 0 : _20.bareListPipeline) {
         pipeline = pipeline
             ? __spreadArray(__spreadArray([], pipeline, true), props.bareSettings.bareListPipeline, true) : props.bareSettings.bareListPipeline;
     }
@@ -667,24 +681,24 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
      * three records came back instead of five files, and each tile received the
      * whole array rather than one file, so every one of them read "Attachment".
      */
-    var fileViewColumnId = (_23 = (_22 = ((_21 = (_20 = props.organise) === null || _20 === void 0 ? void 0 : _20.extendedTabs) !== null && _21 !== void 0 ? _21 : []).find(function (eachTab) {
+    var fileViewColumnId = (_24 = (_23 = ((_22 = (_21 = props.organise) === null || _21 === void 0 ? void 0 : _21.extendedTabs) !== null && _22 !== void 0 ? _22 : []).find(function (eachTab) {
         return eachTab.viewType === "file" &&
             (0, utils_1.lowercaseTextToId)(eachTab.name) === viewType;
-    })) === null || _22 === void 0 ? void 0 : _22.fileSettings) === null || _23 === void 0 ? void 0 : _23.columnId;
-    var hasNavigation = ((_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.handleNavigate) ? true : false;
+    })) === null || _23 === void 0 ? void 0 : _23.fileSettings) === null || _24 === void 0 ? void 0 : _24.columnId;
+    var hasNavigation = ((_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.handleNavigate) ? true : false;
     var formColumn = "grid-cols-12";
-    var useMobileView = (_26 = (_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareUpdateMobileView) !== null && _26 !== void 0 ? _26 : false;
+    var useMobileView = (_27 = (_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareUpdateMobileView) !== null && _27 !== void 0 ? _27 : false;
     var gridGap = useMobileView ? "gap-x-6 gap-y-2 md:gap-y-6" : "gap-6";
-    var isActivityLog = (((_28 = (_27 = props.edit) === null || _27 === void 0 ? void 0 : _27.activityLog) === null || _28 === void 0 ? void 0 : _28.enableComments) &&
-        ((_29 = props.edit) === null || _29 === void 0 ? void 0 : _29.activityLog.commentCollectionId)) ||
-        (((_31 = (_30 = props.edit) === null || _30 === void 0 ? void 0 : _30.activityLog) === null || _31 === void 0 ? void 0 : _31.enableLogs) &&
-            ((_32 = props.edit) === null || _32 === void 0 ? void 0 : _32.activityLog.logsCollectionId));
-    var customPaginationSize = ((_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.customPaginationCount)
+    var isActivityLog = (((_29 = (_28 = props.edit) === null || _28 === void 0 ? void 0 : _28.activityLog) === null || _29 === void 0 ? void 0 : _29.enableComments) &&
+        ((_30 = props.edit) === null || _30 === void 0 ? void 0 : _30.activityLog.commentCollectionId)) ||
+        (((_32 = (_31 = props.edit) === null || _31 === void 0 ? void 0 : _31.activityLog) === null || _32 === void 0 ? void 0 : _32.enableLogs) &&
+            ((_33 = props.edit) === null || _33 === void 0 ? void 0 : _33.activityLog.logsCollectionId));
+    var customPaginationSize = ((_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.customPaginationCount)
         ? props.organise.customPaginationCount(size)
         : undefined;
     //TODO : Code - Pass ...devSettings, search dbEndpoint:
     var writeServerQuery = new writeQuery_1.WriteQuery({
-        dbModule: (_34 = props.lib) === null || _34 === void 0 ? void 0 : _34.axios,
+        dbModule: (_35 = props.lib) === null || _35 === void 0 ? void 0 : _35.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -692,7 +706,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var readServerQuery = new readQuery_1.ReadQuery({
-        dbModule: (_35 = props.lib) === null || _35 === void 0 ? void 0 : _35.axios,
+        dbModule: (_36 = props.lib) === null || _36 === void 0 ? void 0 : _36.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -700,9 +714,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var moreButtonPopUp = [
-        ((_36 = props.edit) === null || _36 === void 0 ? void 0 : _36.allEditable) &&
+        ((_37 = props.edit) === null || _37 === void 0 ? void 0 : _37.allEditable) &&
             !isFirebase &&
-            !((_38 = (_37 = props.organise) === null || _37 === void 0 ? void 0 : _37.exportSettings) === null || _38 === void 0 ? void 0 : _38.hideImportCSV)
+            !((_39 = (_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.exportSettings) === null || _39 === void 0 ? void 0 : _39.hideImportCSV)
             ? {
                 text: "Import Excel",
                 onClick: function () {
@@ -711,7 +725,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_40 = (_39 = props.organise) === null || _39 === void 0 ? void 0 : _39.exportSettings) === null || _40 === void 0 ? void 0 : _40.hideExportCSV)
+        !((_41 = (_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.exportSettings) === null || _41 === void 0 ? void 0 : _41.hideExportCSV)
             ? {
                 text: "Export CSV",
                 onClick: function () {
@@ -721,7 +735,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_42 = (_41 = props.organise) === null || _41 === void 0 ? void 0 : _41.exportSettings) === null || _42 === void 0 ? void 0 : _42.hideExportExcel)
+        !((_43 = (_42 = props.organise) === null || _42 === void 0 ? void 0 : _42.exportSettings) === null || _43 === void 0 ? void 0 : _43.hideExportExcel)
             ? {
                 text: "Export Excel",
                 onClick: function () {
@@ -731,7 +745,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_44 = (_43 = props.organise) === null || _43 === void 0 ? void 0 : _43.exportSettings) === null || _44 === void 0 ? void 0 : _44.hideExportPDF)
+        !((_45 = (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.exportSettings) === null || _45 === void 0 ? void 0 : _45.hideExportPDF)
             ? {
                 text: "Export PDF",
                 onClick: function () {
@@ -741,7 +755,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_46 = (_45 = props.organise) === null || _45 === void 0 ? void 0 : _45.exportSettings) === null || _46 === void 0 ? void 0 : _46.hideExportQR)
+        !((_47 = (_46 = props.organise) === null || _46 === void 0 ? void 0 : _46.exportSettings) === null || _47 === void 0 ? void 0 : _47.hideExportQR)
             ? {
                 text: "Export QR",
                 onClick: function () {
@@ -751,7 +765,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_48 = (_47 = props.organise) === null || _47 === void 0 ? void 0 : _47.exportSettings) === null || _48 === void 0 ? void 0 : _48.hideExportQR)
+        !((_49 = (_48 = props.organise) === null || _48 === void 0 ? void 0 : _48.exportSettings) === null || _49 === void 0 ? void 0 : _49.hideExportQR)
             ? {
                 text: "Export QR(Data)",
                 onClick: function () {
@@ -761,7 +775,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_50 = (_49 = props.organise) === null || _49 === void 0 ? void 0 : _49.exportSettings) === null || _50 === void 0 ? void 0 : _50.hideExportPrint)
+        !((_51 = (_50 = props.organise) === null || _50 === void 0 ? void 0 : _50.exportSettings) === null || _51 === void 0 ? void 0 : _51.hideExportPrint)
             ? {
                 text: "Print",
                 onClick: function () {
@@ -771,7 +785,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_52 = (_51 = props.organise) === null || _51 === void 0 ? void 0 : _51.exportSettings) === null || _52 === void 0 ? void 0 : _52.hideExportDraft)
+        !((_53 = (_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.exportSettings) === null || _53 === void 0 ? void 0 : _53.hideExportDraft)
             ? {
                 text: filterDraft ? "Show All Items" : "Filter Draft",
                 onClick: function () {
@@ -780,20 +794,35 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             : null,
     ].filter(Boolean);
-    if ((_53 = props.organise) === null || _53 === void 0 ? void 0 : _53.moreSettings)
+    if ((_54 = props.organise) === null || _54 === void 0 ? void 0 : _54.moreSettings)
         moreButtonPopUp = moreButtonPopUp.concat(props.organise.moreSettings);
     //=====================================================================================
     //SECTION: User Column Visibility Handlers
     //=====================================================================================
-    var handleToggleUserHiddenColumn = function (columnId) {
+    // INFO: a write-back carries the schema's columns plus the user's one change,
+    // never the hide/order a personal saved view put on screen
+    var handleUpdateSchemaStructure = function (update) {
         var _a;
+        var schemaColumns = update((_a = schemaStructureRef.current) !== null && _a !== void 0 ? _a : structure);
+        if (schemaStructureRef.current)
+            schemaStructureRef.current = schemaColumns;
+        return schemaColumns;
+    };
+    var handleToggleUserHiddenColumn = function (columnId) {
+        var _a, _b;
         if ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeHide) {
-            var updatedModel = structure.map(function (eachColumn) {
-                return eachColumn.id === columnId
-                    ? __assign(__assign({}, eachColumn), { hide: !eachColumn.hide }) : eachColumn;
+            var nextHide_1 = !((_b = structure.find(function (eachColumn) { return eachColumn.id === columnId; })) === null || _b === void 0 ? void 0 : _b.hide);
+            var handleSetHide = function (columns) {
+                return columns.map(function (eachColumn) {
+                    return eachColumn.id === columnId
+                        ? __assign(__assign({}, eachColumn), { hide: nextHide_1 }) : eachColumn;
+                });
+            };
+            setStructure(handleSetHide(structure));
+            props.organise.onChangeHide(handleUpdateSchemaStructure(handleSetHide), {
+                columnId: columnId,
+                hide: nextHide_1,
             });
-            setStructure(updatedModel);
-            props.organise.onChangeHide(updatedModel);
             return;
         }
         setUserHiddenColumnIds(function (prevIds) {
@@ -805,9 +834,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var handleShowAllUserHiddenColumns = function () {
         var _a;
         if ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeHide) {
-            var updatedModel = structure.map(function (eachColumn) { return (__assign(__assign({}, eachColumn), { hide: false })); });
-            setStructure(updatedModel);
-            props.organise.onChangeHide(updatedModel);
+            var handleShowAll = function (columns) {
+                return columns.map(function (eachColumn) { return (__assign(__assign({}, eachColumn), { hide: false })); });
+            };
+            setStructure(handleShowAll(structure));
+            props.organise.onChangeHide(handleUpdateSchemaStructure(handleShowAll), {
+                showAll: true,
+            });
             return;
         }
         setUserHiddenColumnIds([]);
@@ -818,15 +851,21 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         var _a, _b;
         if (dragId === dropId)
             return;
-        var dragIndex = structure.findIndex(function (eachCol) { return eachCol.id === dragId; });
-        var dropIndex = structure.findIndex(function (eachCol) { return eachCol.id === dropId; });
-        if (dragIndex < 0 || dropIndex < 0)
+        var handleMove = function (columns) {
+            var dragIndex = columns.findIndex(function (eachCol) { return eachCol.id === dragId; });
+            var dropIndex = columns.findIndex(function (eachCol) { return eachCol.id === dropId; });
+            if (dragIndex < 0 || dropIndex < 0)
+                return columns;
+            var moved = __spreadArray([], columns, true);
+            var dragged = moved.splice(dragIndex, 1)[0];
+            moved.splice(dropIndex, 0, dragged);
+            return moved;
+        };
+        var updatedModel = handleMove(structure);
+        if (updatedModel === structure)
             return;
-        var updatedModel = __spreadArray([], structure, true);
-        var moved = updatedModel.splice(dragIndex, 1)[0];
-        updatedModel.splice(dropIndex, 0, moved);
         setStructure(updatedModel);
-        (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeDrag) === null || _b === void 0 ? void 0 : _b.call(_a, dragId, dropId, updatedModel.map(function (eachCol) { return ({
+        (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeDrag) === null || _b === void 0 ? void 0 : _b.call(_a, dragId, dropId, handleUpdateSchemaStructure(handleMove).map(function (eachCol) { return ({
             key: eachCol.id,
             title: eachCol.name,
         }); }));
@@ -1056,13 +1095,181 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 ? flexFiltersDebounced.filter(function (eachFilter) {
                     return (0, flexFilter_1.isFlexFilterActive)(eachFilter, structure);
                 })
-                : undefined, sort: persistedSort !== null && persistedSort !== void 0 ? persistedSort : (_a = props.organise) === null || _a === void 0 ? void 0 : _a.sort, 
+                : undefined, sort: persistedSort !== null && persistedSort !== void 0 ? persistedSort : (_a = props.organise) === null || _a === void 0 ? void 0 : _a.sort, pageLimit: pageLimit, 
             // INFO: scroll mode reloads from page 0; the anchor restores the position
             pageIndex: renderCheckScrollMode() ? 0 : pageIndex, hiddenColumnIds: structure.filter(function (col) { return col.hide; }).map(function (col) { return col.id; }), 
             // INFO: raw, so switching bareViewSettings off does not wipe the user's choice
             userHiddenColumnIds: userHiddenColumnIds, columnOrder: structure.map(function (col) { return col.id; }) }, scrollCaptureRef.current));
     };
     handleRegisterViewSnapshot(handleBuildViewSnapshot);
+    //=====================================================================================
+    //SECTION: Saved Views
+    //=====================================================================================
+    var savedViewsKey = (0, viewStatePersistence_1.buildSavedViewsKey)(props.collectionId, (_55 = props.organise) === null || _55 === void 0 ? void 0 : _55.persistKey, (_56 = devSettings.currentUser) === null || _56 === void 0 ? void 0 : _56.userEmail);
+    (0, react_1.useEffect)(function () {
+        if (isSavedViewsEnabled)
+            setSavedViews((0, viewStatePersistence_1.handleReadSavedViews)(savedViewsKey));
+    }, [isSavedViewsEnabled, savedViewsKey]);
+    // INFO: views belong to a tab, so another tab starts with none selected
+    (0, react_1.useEffect)(function () {
+        setActiveSavedViewId(null);
+        setSavedViewName(null);
+        setDeletingSavedViewId(null);
+    }, [viewType]);
+    // INFO: a view can change the saved state without changing the request —
+    // rows per page on a calendar, map or grouped tab (no limit is sent), or a
+    // filter with no value. ReadQueryHoc only reads when its cond changes, so
+    // the loading set by the apply would never clear; ask for the read here.
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (pendingViewCondKeyRef.current === null)
+            return;
+        var isSameRequest = pendingViewCondKeyRef.current ===
+            JSON.stringify(handleReadQueryHocCond());
+        pendingViewCondKeyRef.current = null;
+        if (isSameRequest)
+            (_a = listRQueryHocRef.current) === null || _a === void 0 ? void 0 : _a.handleRefresh();
+    });
+    // INFO: fallback ids are numbered over the full list, before the tab filter,
+    // so one default view keeps the same id on every tab it shows on
+    var handleGetTabSavedViews = function () {
+        var _a, _b;
+        return __spreadArray(__spreadArray([], ((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.defaultSavedViews) !== null && _b !== void 0 ? _b : [])
+            .map(function (eachView, index) {
+            var _a, _b;
+            return ({
+                id: (_a = eachView.id) !== null && _a !== void 0 ? _a : "default-".concat(index),
+                name: eachView.name,
+                tabId: (_b = eachView.tabId) !== null && _b !== void 0 ? _b : viewType,
+                state: eachView.state,
+                locked: true,
+            });
+        })
+            .filter(function (eachView) { return eachView.tabId === viewType; }), true), savedViews.filter(function (eachView) { return eachView.tabId === viewType; }), true);
+    };
+    var defaultSavedViewIds = ((_58 = (_57 = props.organise) === null || _57 === void 0 ? void 0 : _57.defaultSavedViews) !== null && _58 !== void 0 ? _58 : [])
+        .map(function (eachView) { var _a; return (_a = eachView.id) !== null && _a !== void 0 ? _a : ""; })
+        .join("|");
+    // INFO: keyed on the ids, not the array, so an inline literal passed on every
+    // render does not repeat the warning on every render
+    (0, react_1.useEffect)(function () {
+        var ids = defaultSavedViewIds.split("|").filter(Boolean);
+        var repeated = ids.filter(function (eachId, index) { return ids.indexOf(eachId) !== index; });
+        if (repeated.length > 0)
+            console.warn("DataTemplate: defaultSavedViews ids must be unique, repeated: ".concat(Array.from(new Set(repeated)).join(", ")));
+    }, [defaultSavedViewIds]);
+    // INFO: a view is the defaults overridden by its own fields, so a field it
+    // leaves out is reset rather than carried over from whatever was on screen
+    var handleResolveViewState = function (state) {
+        var _a, _b, _c, _d;
+        var model = (_a = props.model) !== null && _a !== void 0 ? _a : [];
+        return ((_d = (0, viewStatePersistence_1.handlePruneStaleColumns)(__assign({ filterSearchParams: initialFilterSearchParams, filterSelection: initialFilterSelection, filterReference: initialFilterReference, filterReferenceDate: (0, viewStatePersistence_1.serializeDateFilterState)(initialFilterReferenceDate), sort: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.sort, pageLimit: (_c = props.limit) !== null && _c !== void 0 ? _c : 10, userHiddenColumnIds: [], hiddenColumnIds: model
+                .filter(function (eachColumn) { return eachColumn.hide; })
+                .map(function (eachColumn) { return eachColumn.id; }), columnOrder: model.map(function (eachColumn) { return eachColumn.id; }) }, (state !== null && state !== void 0 ? state : {})), model)) !== null && _d !== void 0 ? _d : {});
+    };
+    var handleApplyViewColumns = function (columns, state) {
+        var _a;
+        var order = new Map(((_a = state.columnOrder) !== null && _a !== void 0 ? _a : []).map(function (eachId, index) { return [eachId, index]; }));
+        var ordered = __spreadArray([], columns, true).sort(function (a, b) { var _a, _b; return ((_a = order.get(a.id)) !== null && _a !== void 0 ? _a : order.size) - ((_b = order.get(b.id)) !== null && _b !== void 0 ? _b : order.size); });
+        // INFO: schema-level hides move only in schema-hide mode, and only on this
+        // screen — a personal view never writes back through onChangeHide
+        if (!isSchemaHideMode || !state.hiddenColumnIds)
+            return ordered;
+        return ordered.map(function (eachColumn) {
+            var _a, _b;
+            return (__assign(__assign({}, eachColumn), { hide: (_b = (_a = state.hiddenColumnIds) === null || _a === void 0 ? void 0 : _a.includes(eachColumn.id)) !== null && _b !== void 0 ? _b : false }));
+        });
+    };
+    var handleApplySavedView = function (view) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var next = handleResolveViewState((_a = view === null || view === void 0 ? void 0 : view.state) !== null && _a !== void 0 ? _a : null);
+        var isQueryChanged = !(0, viewStatePersistence_1.handleIsSameViewState)((0, viewStatePersistence_1.handlePickQueryState)(handleBuildViewSnapshot()), (0, viewStatePersistence_1.handlePickQueryState)(next));
+        handleClearFlexFilterTypingTimeout();
+        if (typingTimeout.current) {
+            clearTimeout(typingTimeout.current);
+            typingTimeout.current = null;
+        }
+        setFilterSearch((_b = next.filterSearchParams) !== null && _b !== void 0 ? _b : {});
+        setFilterSearchParams((_c = next.filterSearchParams) !== null && _c !== void 0 ? _c : {});
+        setFilterSelection(((_d = next.filterSelection) !== null && _d !== void 0 ? _d : {}));
+        setFilterReference(((_e = next.filterReference) !== null && _e !== void 0 ? _e : {}));
+        setFilterReferenceDate(next.filterReferenceDate
+            ? (0, viewStatePersistence_1.parseDateFilterState)(next.filterReferenceDate)
+            : initialFilterReferenceDate);
+        handleCommitFlexFilters(((_f = next.flexFilters) === null || _f === void 0 ? void 0 : _f.length) ? next.flexFilters : defaultFlexFilterRow);
+        setPersistedSort(next.sort);
+        if (next.sort && !(0, viewStatePersistence_1.handleIsSameViewState)(next.sort, activeSortId !== null && activeSortId !== void 0 ? activeSortId : {}))
+            (_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.onChangeSort) === null || _h === void 0 ? void 0 : _h.call(_g, next.sort);
+        if (next.pageLimit)
+            setPageLimit(next.pageLimit);
+        setUserHiddenColumnIds((_j = next.userHiddenColumnIds) !== null && _j !== void 0 ? _j : []);
+        if (view) {
+            if (!schemaStructureRef.current)
+                schemaStructureRef.current = structure;
+        }
+        else {
+            schemaStructureRef.current = null;
+        }
+        setStructure(function (prev) { return handleApplyViewColumns(prev, next); });
+        if (isQueryChanged) {
+            // INFO: the list loads until a new read lands; whether the request itself
+            // changed is only known after this render, so the effect below compares
+            pendingViewCondKeyRef.current = JSON.stringify(handleReadQueryHocCond());
+            handleClearDataByFilter();
+            if (pageIndex !== 0)
+                (_l = (_k = props.organise) === null || _k === void 0 ? void 0 : _k.onChangePagination) === null || _l === void 0 ? void 0 : _l.call(_k, 0);
+            (_o = (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareListHandleFilter) === null || _o === void 0 ? void 0 : _o.call(_m, (_p = next.filterSearchParams) !== null && _p !== void 0 ? _p : {}, (_q = next.filterSelection) !== null && _q !== void 0 ? _q : {}, next.filterReferenceDate
+                ? (0, viewStatePersistence_1.parseDateFilterState)(next.filterReferenceDate)
+                : initialFilterReferenceDate, (_r = next.filterReference) !== null && _r !== void 0 ? _r : {});
+        }
+        setActiveSavedViewId((_s = view === null || view === void 0 ? void 0 : view.id) !== null && _s !== void 0 ? _s : null);
+        setDeletingSavedViewId(null);
+    };
+    // INFO: re-read storage before each write so a change made in another browser
+    // tab on the same list is kept rather than overwritten by this tab's copy;
+    // with storage unavailable the in-memory list is the only copy, so it is used
+    var handleStoreSavedViews = function (update) {
+        var views = update((0, viewStatePersistence_1.handleReadSavedViews)(savedViewsKey, savedViews));
+        setSavedViews(views);
+        (0, viewStatePersistence_1.handleWriteSavedViews)(savedViewsKey, views);
+    };
+    // INFO: a name already used on this tab is overwritten
+    var handleSaveSavedView = function (name) {
+        var trimmed = name.trim();
+        if (!trimmed)
+            return;
+        var state = (0, viewStatePersistence_1.handlePickViewState)(handleBuildViewSnapshot());
+        var savedId = "";
+        handleStoreSavedViews(function (views) {
+            var existing = views.find(function (eachView) { return eachView.tabId === viewType && eachView.name === trimmed; });
+            var saved = existing
+                ? __assign(__assign({}, existing), { state: state }) : { id: (0, uuid_1.v4)(), name: trimmed, tabId: viewType, state: state };
+            savedId = saved.id;
+            return existing
+                ? views.map(function (eachView) {
+                    return eachView.id === existing.id ? saved : eachView;
+                })
+                : __spreadArray(__spreadArray([], views, true), [saved], false);
+        });
+        setActiveSavedViewId(savedId);
+        setSavedViewName(null);
+    };
+    var handleUpdateSavedView = function (id) {
+        var state = (0, viewStatePersistence_1.handlePickViewState)(handleBuildViewSnapshot());
+        handleStoreSavedViews(function (views) {
+            return views.map(function (eachView) {
+                return eachView.id === id ? __assign(__assign({}, eachView), { state: state }) : eachView;
+            });
+        });
+    };
+    var handleDeleteSavedView = function (id) {
+        handleStoreSavedViews(function (views) {
+            return views.filter(function (eachView) { return eachView.id !== id; });
+        });
+        if (activeSavedViewId === id)
+            setActiveSavedViewId(null);
+        setDeletingSavedViewId(null);
+    };
     // INFO: called in the row click, while the list is still mounted and scrolled
     var handleCaptureListScroll = function (recordId) {
         var _a, _b;
@@ -1124,6 +1331,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         structure,
         persistedSort,
         userHiddenColumnIds,
+        pageLimit,
     ]);
     /* eslint-enable */
     // INFO: re-arm on leaving the list, so each return from a record restores once
@@ -1146,7 +1354,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         var isOtherListReturn = !(0, viewStatePersistence_1.handleIsLastDrill)(props.collectionId, (_c = props.organise) === null || _c === void 0 ? void 0 : _c.persistKey);
         scrollRestoredRef.current = isSwitch || isOtherListReturn;
         /* eslint-disable */
-    }, [props.collectionId, (_54 = props.organise) === null || _54 === void 0 ? void 0 : _54.persistKey]);
+    }, [props.collectionId, (_59 = props.organise) === null || _59 === void 0 ? void 0 : _59.persistKey]);
     /* eslint-enable */
     // INFO: wait a frame — rows land in state one tick before layout
     (0, react_1.useEffect)(function () {
@@ -1181,7 +1389,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     (0, react_1.useEffect)(function () {
         handleOfflinePrefetch();
         /* eslint-disable */
-    }, [props.collectionId, (_55 = props.bareSettings) === null || _55 === void 0 ? void 0 : _55.bareOffline]);
+    }, [props.collectionId, (_60 = props.bareSettings) === null || _60 === void 0 ? void 0 : _60.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
@@ -1201,7 +1409,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }, interval);
         return function () { return clearInterval(timer); };
         /* eslint-disable */
-    }, [(_56 = props.bareSettings) === null || _56 === void 0 ? void 0 : _56.barePollingInterval, isLive, isNetworkOffline]);
+    }, [(_61 = props.bareSettings) === null || _61 === void 0 ? void 0 : _61.barePollingInterval, isLive, isNetworkOffline]);
     /* eslint-enable */
     // INFO: Pub/Sub → SSE live-stream — driven by bareSettings.bareSocketName
     // EventSource URL: {sseEndpoint}/{room}?bm_apiToken={token}
@@ -1243,7 +1451,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         };
         /* eslint-disable */
     }, [
-        (_57 = props.bareSettings) === null || _57 === void 0 ? void 0 : _57.bareSocketName,
+        (_62 = props.bareSettings) === null || _62 === void 0 ? void 0 : _62.bareSocketName,
         props.collectionId,
         props.devSettings.sseEndpoint,
         props.devSettings.dbAPIToken,
@@ -1449,6 +1657,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             !persistedState ||
             persistedViewMountedRef.current) {
             setStructure((_a = props.model) !== null && _a !== void 0 ? _a : []);
+            schemaStructureRef.current = null;
         }
         persistedViewMountedRef.current = true;
         setAdditionalQuery((_c = (_b = props.organise) === null || _b === void 0 ? void 0 : _b.additionalQuery) !== null && _c !== void 0 ? _c : []);
@@ -1488,10 +1697,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         props.collectionId,
         props.model,
         props.localURLEndpoint,
-        (_58 = props.organise) === null || _58 === void 0 ? void 0 : _58.extendedTabs,
-        (_59 = props.organise) === null || _59 === void 0 ? void 0 : _59.viewId,
-        (_60 = props.organise) === null || _60 === void 0 ? void 0 : _60.additionalQuery,
-        (_61 = props.organise) === null || _61 === void 0 ? void 0 : _61.groupBy,
+        (_63 = props.organise) === null || _63 === void 0 ? void 0 : _63.extendedTabs,
+        (_64 = props.organise) === null || _64 === void 0 ? void 0 : _64.viewId,
+        (_65 = props.organise) === null || _65 === void 0 ? void 0 : _65.additionalQuery,
+        (_66 = props.organise) === null || _66 === void 0 ? void 0 : _66.groupBy,
         resolvedType,
     ]);
     /**
@@ -1632,7 +1841,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             };
         }, 100);
         return function () { return clearTimeout(timeoutId); };
-    }, [(_62 = props.organise) === null || _62 === void 0 ? void 0 : _62.showReadFloatingNav, resolvedType, props.id, loading]);
+    }, [(_67 = props.organise) === null || _67 === void 0 ? void 0 : _67.showReadFloatingNav, resolvedType, props.id, loading]);
     (0, react_1.useEffect)(function () {
         if (resolvedType !== "read")
             return;
@@ -8736,7 +8945,68 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     // INFO: `hidden` keeps the markers out of space-y spacing
+    var renderSavedViews = function () {
+        var _a;
+        if (!isSavedViewsEnabled)
+            return null;
+        var views = handleGetTabSavedViews();
+        var activeView = views.find(function (eachView) { return eachView.id === activeSavedViewId; });
+        var isModified = !!activeView &&
+            !(0, viewStatePersistence_1.handleIsSameViewState)((0, viewStatePersistence_1.handlePickViewState)(handleBuildViewSnapshot()), (0, viewStatePersistence_1.handlePickViewState)(handleResolveViewState(activeView.state)));
+        var darkMode = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode;
+        var renderChipClass = function (active) {
+            return "inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-medium ".concat(active
+                ? "border-primary-500 bg-primary-50 text-primary-700"
+                : darkMode
+                    ? "border-gray-600 text-gray-200 hover:bg-gray-700"
+                    : "border-gray-300 text-gray-600 hover:bg-gray-50");
+        };
+        var actionClass = "text-xs font-medium ".concat(darkMode ? "text-primary-300" : "text-primary-600", " hover:underline");
+        return (react_1.default.createElement("div", { "data-testid": "dtw-saved-views", className: "mt-3 flex flex-wrap items-center gap-2" },
+            react_1.default.createElement("span", { className: "text-xs font-medium ".concat(darkMode ? "text-gray-400" : "text-gray-500") }, "Views"),
+            react_1.default.createElement("button", { type: "button", "data-testid": "dtw-saved-view-all", className: renderChipClass(!activeView), onClick: function () { return handleApplySavedView(null); } }, "All"),
+            views.map(function (eachView) {
+                return deletingSavedViewId === eachView.id ? (react_1.default.createElement("span", { key: eachView.id, className: renderChipClass(false) },
+                    "Delete \u201C",
+                    eachView.name,
+                    "\u201D?",
+                    react_1.default.createElement("button", { type: "button", "data-testid": "dtw-saved-view-confirm-delete-".concat(eachView.id), className: "font-semibold text-red-600", onClick: function () { return handleDeleteSavedView(eachView.id); } }, "Delete"),
+                    react_1.default.createElement("button", { type: "button", className: "text-gray-500", onClick: function () { return setDeletingSavedViewId(null); } }, "Keep"))) : (react_1.default.createElement("span", { key: eachView.id, className: renderChipClass(eachView.id === (activeView === null || activeView === void 0 ? void 0 : activeView.id)) },
+                    react_1.default.createElement("button", { type: "button", "data-testid": "dtw-saved-view-".concat(eachView.id), title: eachView.id === (activeView === null || activeView === void 0 ? void 0 : activeView.id) && isModified
+                            ? "Changed since saved"
+                            : undefined, onClick: function () { return handleApplySavedView(eachView); } },
+                        eachView.name,
+                        eachView.id === (activeView === null || activeView === void 0 ? void 0 : activeView.id) && isModified ? " •" : ""),
+                    !eachView.locked && (react_1.default.createElement("button", { type: "button", "aria-label": "Delete ".concat(eachView.name), "data-testid": "dtw-saved-view-delete-".concat(eachView.id), onClick: function () { return setDeletingSavedViewId(eachView.id); } },
+                        react_1.default.createElement(outline_1.XMarkIcon, { className: "h-3.5 w-3.5" })))));
+            }),
+            activeView && isModified && !activeView.locked && (react_1.default.createElement("button", { type: "button", "data-testid": "dtw-saved-view-update", className: actionClass, onClick: function () { return handleUpdateSavedView(activeView.id); } },
+                "Update \u201C",
+                activeView.name,
+                "\u201D")),
+            savedViewName === null ? (react_1.default.createElement("button", { type: "button", "data-testid": "dtw-saved-view-new", className: actionClass, onClick: function () { return setSavedViewName(""); } }, "+ Save view")) : (
+            // INFO: a form, so a mobile keyboard's Done saves the view; stopPropagation
+            // keeps the submit from reaching any form around the template
+            react_1.default.createElement("form", { "data-testid": "dtw-saved-view-form", className: "flex items-center gap-1", onSubmit: function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleSaveSavedView(savedViewName);
+                } },
+                react_1.default.createElement(textInput_1.TextInput, { id: "dtw-saved-view-name", type: "text", label: "", size: "xs", autoFocus: true, enterKeyHint: "done", darkMode: darkMode, value: savedViewName, placeholder: "View name", containerClassName: "w-32 sm:w-44", onChange: function (event) { return setSavedViewName(event.target.value); }, onKeyDown: function (event) {
+                        if (event.key === "Escape")
+                            setSavedViewName(null);
+                        // INFO: some mobile keyboards send only the keyCode
+                        if (event.key === "Enter" || event.keyCode === 13) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            handleSaveSavedView(savedViewName);
+                        }
+                    } }),
+                react_1.default.createElement("button", { type: "submit", className: actionClass }, "Save"),
+                react_1.default.createElement("button", { type: "button", className: "text-xs text-gray-500", onClick: function () { return setSavedViewName(null); } }, "Cancel")))));
+    };
     var renderScopedTabContent = function (tabs, dataType, requestedViewType) { return (react_1.default.createElement(react_1.default.Fragment, null,
+        renderSavedViews(),
         react_1.default.createElement("span", { ref: scrollScopeStartRef, hidden: true, "aria-hidden": "true" }),
         renderTabContent(tabs, dataType, requestedViewType),
         react_1.default.createElement("span", { ref: scrollScopeEndRef, hidden: true, "aria-hidden": "true" }))); };
@@ -9465,36 +9735,39 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 var kanbanData = renderGridAndListData("", "kanban", kanbanTitle_2, kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.useColumnName);
                 // INFO: when bareNewDTW is enabled, render NewKanban instead of legacy Kanban
                 if ((_54 = props.bareSettings) === null || _54 === void 0 ? void 0 : _54.bareNewDTW) {
-                    return (react_1.default.createElement(newKanban_1.NewKanban, { className: "inline-flex", data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
-                            ? "Data has exceeded limit, please apply filters"
-                            : "", groupCluster: kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.groupCluster, draggable: canUpdateRecord, droppable: canUpdateRecord && kanbanDroppable, mobileView: (_55 = props.bareSettings) === null || _55 === void 0 ? void 0 : _55.bareListMobileView, onUpdateData: canUpdateRecord
-                            ? function (cardId, _fromCol, toCol) { return __awaiter(void 0, void 0, void 0, function () {
-                                var _a;
-                                return __generator(this, function (_b) {
-                                    switch (_b.label) {
-                                        case 0:
-                                            setKanbanDroppable(false);
-                                            _b.label = 1;
-                                        case 1:
-                                            _b.trys.push([1, , 3, 4]);
-                                            return [4 /*yield*/, handleSubmitData("update", cardId, kanbanTitle_2, (_a = {},
-                                                    _a[kanbanTitle_2] = toCol,
-                                                    _a))];
-                                        case 2:
-                                            _b.sent();
-                                            return [3 /*break*/, 4];
-                                        case 3:
-                                            setKanbanDroppable(true);
-                                            return [7 /*endfinally*/];
-                                        case 4: return [2 /*return*/];
-                                    }
-                                });
-                            }); }
-                            : undefined, onClickData: function (id) {
-                            var _a, _b;
-                            handleCaptureListScroll(id);
-                            (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, darkMode: (_56 = props.organise) === null || _56 === void 0 ? void 0 : _56.darkMode, darkModeBg: (_57 = props.organise) === null || _57 === void 0 ? void 0 : _57.darkModeBg }));
+                    return (
+                    // INFO: the same top spacing as the table, list and grid
+                    react_1.default.createElement("div", { className: "mt-5" },
+                        react_1.default.createElement(newKanban_1.NewKanban, { className: "inline-flex", data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
+                                ? "Data has exceeded limit, please apply filters"
+                                : "", groupCluster: kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.groupCluster, draggable: canUpdateRecord, droppable: canUpdateRecord && kanbanDroppable, mobileView: (_55 = props.bareSettings) === null || _55 === void 0 ? void 0 : _55.bareListMobileView, onUpdateData: canUpdateRecord
+                                ? function (cardId, _fromCol, toCol) { return __awaiter(void 0, void 0, void 0, function () {
+                                    var _a;
+                                    return __generator(this, function (_b) {
+                                        switch (_b.label) {
+                                            case 0:
+                                                setKanbanDroppable(false);
+                                                _b.label = 1;
+                                            case 1:
+                                                _b.trys.push([1, , 3, 4]);
+                                                return [4 /*yield*/, handleSubmitData("update", cardId, kanbanTitle_2, (_a = {},
+                                                        _a[kanbanTitle_2] = toCol,
+                                                        _a))];
+                                            case 2:
+                                                _b.sent();
+                                                return [3 /*break*/, 4];
+                                            case 3:
+                                                setKanbanDroppable(true);
+                                                return [7 /*endfinally*/];
+                                            case 4: return [2 /*return*/];
+                                        }
+                                    });
+                                }); }
+                                : undefined, onClickData: function (id) {
+                                var _a, _b;
+                                handleCaptureListScroll(id);
+                                (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
+                            }, darkMode: (_56 = props.organise) === null || _56 === void 0 ? void 0 : _56.darkMode, darkModeBg: (_57 = props.organise) === null || _57 === void 0 ? void 0 : _57.darkModeBg })));
                 }
                 return (react_1.default.createElement(kanban_1.Kanban, { className: "inline-flex", data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
                         ? "Data has exceeded limit, please apply filters"
@@ -10007,7 +10280,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_64 = (_63 = props.renderSettings) === null || _63 === void 0 ? void 0 : _63.renderLoadingUI) === null || _64 === void 0 ? void 0 : _64.call(_63)) && loading ? ((_65 = props.renderSettings) === null || _65 === void 0 ? void 0 : _65.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { darkMode: (_66 = props.organise) === null || _66 === void 0 ? void 0 : _66.darkMode, darkModeBg: (_67 = props.organise) === null || _67 === void 0 ? void 0 : _67.darkModeBg, maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
+        ((_69 = (_68 = props.renderSettings) === null || _68 === void 0 ? void 0 : _68.renderLoadingUI) === null || _69 === void 0 ? void 0 : _69.call(_68)) && loading ? ((_70 = props.renderSettings) === null || _70 === void 0 ? void 0 : _70.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { darkMode: (_71 = props.organise) === null || _71 === void 0 ? void 0 : _71.darkMode, darkModeBg: (_72 = props.organise) === null || _72 === void 0 ? void 0 : _72.darkModeBg, maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
                 var _a, _b;
                 if (loading)
                     return;
@@ -10018,7 +10291,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     setExportCSVEmail((_b = (_a = props.devSettings.currentUser) === null || _a === void 0 ? void 0 : _a.userEmail) !== null && _b !== void 0 ? _b : "");
                 }
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) })),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_68 = props.organise) === null || _68 === void 0 ? void 0 : _68.darkMode, darkModeBg: (_69 = props.organise) === null || _69 === void 0 ? void 0 : _69.darkModeBg, maxWidth: "2xl", open: referenceCreationModal.id ? true : false, renderContent: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_73 = props.organise) === null || _73 === void 0 ? void 0 : _73.darkMode, darkModeBg: (_74 = props.organise) === null || _74 === void 0 ? void 0 : _74.darkModeBg, maxWidth: "2xl", open: referenceCreationModal.id ? true : false, renderContent: function () {
                 return (react_1.default.createElement(referenceModal_1.ReferenceModal, { referenceModelSchema: referenceModelSchema, referenceDataStructure: referenceCreationModal, devSettings: props.devSettings, handleCreateRefId: function (dataId) {
                         if (dataId) {
                             var currentValue = selectedData[referenceCreationModal.id];
@@ -10034,19 +10307,19 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }, onClose: function () {
                 setReferenceCreationModal({ id: "", name: "", type: "string" });
             } }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_70 = props.organise) === null || _70 === void 0 ? void 0 : _70.darkMode, darkModeBg: (_71 = props.organise) === null || _71 === void 0 ? void 0 : _71.darkModeBg, maxWidth: "2xl", open: Object.keys(referenceDeleteTableData).length > 0, renderContent: renderReferenceDeleteTable, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_75 = props.organise) === null || _75 === void 0 ? void 0 : _75.darkMode, darkModeBg: (_76 = props.organise) === null || _76 === void 0 ? void 0 : _76.darkModeBg, maxWidth: "2xl", open: Object.keys(referenceDeleteTableData).length > 0, renderContent: renderReferenceDeleteTable, onClose: function () {
                 setReferenceDeleteTableData({});
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_72 = props.organise) === null || _72 === void 0 ? void 0 : _72.darkMode, darkModeBg: (_73 = props.organise) === null || _73 === void 0 ? void 0 : _73.darkModeBg, open: deleteModal, renderContent: renderDeleteModalContent, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_77 = props.organise) === null || _77 === void 0 ? void 0 : _77.darkMode, darkModeBg: (_78 = props.organise) === null || _78 === void 0 ? void 0 : _78.darkModeBg, open: deleteModal, renderContent: renderDeleteModalContent, onClose: function () {
                 setDeletePasscodeInput("");
                 setDeleteModal(!deleteModal);
                 setDeleteFeedId("");
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_74 = props.organise) === null || _74 === void 0 ? void 0 : _74.darkMode, darkModeBg: (_75 = props.organise) === null || _75 === void 0 ? void 0 : _75.darkModeBg, open: batchUpdateModal, renderContent: renderBatchUpdateModalContent, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_79 = props.organise) === null || _79 === void 0 ? void 0 : _79.darkMode, darkModeBg: (_80 = props.organise) === null || _80 === void 0 ? void 0 : _80.darkModeBg, open: batchUpdateModal, renderContent: renderBatchUpdateModalContent, onClose: function () {
                 setBatchUpdateData({ columnId: "", columnData: {} });
                 setBatchUpdateModal(false);
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_76 = props.organise) === null || _76 === void 0 ? void 0 : _76.darkMode, darkModeBg: (_77 = props.organise) === null || _77 === void 0 ? void 0 : _77.darkModeBg, title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_81 = props.organise) === null || _81 === void 0 ? void 0 : _81.darkMode, darkModeBg: (_82 = props.organise) === null || _82 === void 0 ? void 0 : _82.darkModeBg, title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
                 var _a;
                 if (props.space)
                     return (react_1.default.createElement(authModal_1.AuthModal, { space: props.space, userId: (_a = props.id) !== null && _a !== void 0 ? _a : "", type: selectedAuthMethod, authMethods: authMethods, onComplete: handleAuthComplete }));
@@ -10054,7 +10327,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }, onClose: function () {
                 setSelectedAuthMethod("");
             } }),
-        isActivityLog && (react_1.default.createElement(modal_1.Modal, { darkMode: (_78 = props.organise) === null || _78 === void 0 ? void 0 : _78.darkMode, darkModeBg: (_79 = props.organise) === null || _79 === void 0 ? void 0 : _79.darkModeBg, open: activityModal, title: "Activity Log", renderContent: function () {
+        isActivityLog && (react_1.default.createElement(modal_1.Modal, { darkMode: (_83 = props.organise) === null || _83 === void 0 ? void 0 : _83.darkMode, darkModeBg: (_84 = props.organise) === null || _84 === void 0 ? void 0 : _84.darkModeBg, open: activityModal, title: "Activity Log", renderContent: function () {
                 var _a, _b;
                 return (react_1.default.createElement(activityModal_1.ActivityModal, { title: props.title && typeof props.title === "string"
                         ? props.title