blixify-ui-web 1.2.155 → 1.2.158

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

@@ -69,13 +69,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __asyncValues = (this && this.__asyncValues) || function (o) {
-    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -160,6 +153,9 @@ var newPagination_1 = require("../../display/newPagination");
 var pagination_1 = require("./pagination");
 var referenceModal_1 = require("./referenceModal");
 var settingsModal_1 = require("./settingsModal");
+var chartView_1 = require("./chartView");
+var referenceScan_1 = require("./referenceScan");
+var relatedRecords_1 = require("./relatedRecords");
 var flexFilter_1 = require("../flexFilter");
 var viewStatePersistence_1 = require("./viewStatePersistence");
 var permissions_1 = require("./permissions");
@@ -216,10 +212,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, _80, _81, _82, _83, _84;
+    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, _85, _86, _87, _88, _89, _90, _91, _92;
     // 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 _85 = (0, react_1.useState)(false), drawerPageView = _85[0], setDrawerPageView = _85[1];
+    var _93 = (0, react_1.useState)(false), drawerPageView = _93[0], setDrawerPageView = _93[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.
@@ -301,18 +297,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             initialFilterReferenceDate: initialFilterReferenceDate,
         };
     };
-    var _86 = intialiseDefaultFilterValues(), initialFilterSearch = _86.initialFilterSearch, initialFilterSearchParams = _86.initialFilterSearchParams, initialFilterSelection = _86.initialFilterSelection, initialFilterReference = _86.initialFilterReference, initialFilterReferenceDate = _86.initialFilterReferenceDate;
+    var _94 = intialiseDefaultFilterValues(), initialFilterSearch = _94.initialFilterSearch, initialFilterSearchParams = _94.initialFilterSearchParams, initialFilterSelection = _94.initialFilterSelection, initialFilterReference = _94.initialFilterReference, initialFilterReferenceDate = _94.initialFilterReferenceDate;
     // INFO: Persist view state hook — handles storage read/write for filter/sort/column state
-    var _87 = (0, viewStatePersistence_1.usePersistedViewState)({
+    var _95 = (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 = _87.persistedState, isPersistEnabled = _87.isEnabled, handleSaveView = _87.handleSaveView, handleRegisterViewSnapshot = _87.handleRegisterViewSnapshot;
+    }), rawPersistedState = _95.persistedState, isPersistEnabled = _95.isEnabled, handleSaveView = _95.handleSaveView, handleRegisterViewSnapshot = _95.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 _88 = (0, react_1.useState)(false), loading = _88[0], setLoading = _88[1];
-    var _89 = (0, react_1.useState)(), notification = _89[0], setNotification = _89[1];
+    var _96 = (0, react_1.useState)(false), loading = _96[0], setLoading = _96[1];
+    var _97 = (0, react_1.useState)(), notification = _97[0], setNotification = _97[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 () {
@@ -322,62 +318,62 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return function () { return clearTimeout(timer); };
     }, [notification]);
     //INFO : Used by List
-    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)
+    var _98 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _d !== void 0 ? _d : initialFilterSearch), filterSearch = _98[0], setFilterSearch = _98[1];
+    var _99 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _e !== void 0 ? _e : initialFilterSearchParams), filterSearchParams = _99[0], setFilterSearchParams = _99[1];
+    var _100 = (0, react_1.useState)((_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _f !== void 0 ? _f : initialFilterSelection), filterSelection = _100[0], setFilterSelection = _100[1];
+    var _101 = (0, react_1.useState)((_g = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _g !== void 0 ? _g : initialFilterReference), filterReference = _101[0], setFilterReference = _101[1];
+    var _102 = (0, react_1.useState)({}), filterReferenceSearch = _102[0], setFilterReferenceSearch = _102[1];
+    var _103 = (0, react_1.useState)({}), filterReferenceList = _103[0], setFilterReferenceList = _103[1];
+    var _104 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
         ? (0, viewStatePersistence_1.parseDateFilterState)(persistedState.filterReferenceDate)
-        : 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];
+        : initialFilterReferenceDate), filterReferenceDate = _104[0], setFilterReferenceDate = _104[1];
+    var _105 = (0, react_1.useState)(true), tableLoading = _105[0], setTableLoading = _105[1];
+    var _106 = (0, react_1.useState)(""), cursor = _106[0], setCursor = _106[1];
+    var _107 = (0, react_1.useState)(""), lastCursor = _107[0], setLastCursor = _107[1];
+    var _108 = (0, react_1.useState)([]), tableData = _108[0], setTableData = _108[1];
+    var _109 = (0, react_1.useState)([]), spaceTableData = _109[0], setSpaceTableData = _109[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 _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];
+    var _110 = (0, react_1.useState)(0), size = _110[0], setSize = _110[1];
+    var _111 = (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 = _111[0], setPageIndex = _111[1];
+    var _112 = (0, react_1.useState)([]), selectedIds = _112[0], setSelectedIds = _112[1];
+    var _113 = (0, react_1.useState)(false), selectAll = _113[0], setSelectAll = _113[1];
+    var _114 = (0, react_1.useState)(""), deletePasscode = _114[0], setDeletePasscode = _114[1];
+    var _115 = (0, react_1.useState)(""), deletePasscodeInput = _115[0], setDeletePasscodeInput = _115[1];
+    var _116 = (0, react_1.useState)(""), deleteFeedId = _116[0], setDeleteFeedId = _116[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 _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];
+    var _117 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _l !== void 0 ? _l : undefined), persistedSort = _117[0], setPersistedSort = _117[1];
+    var _118 = (0, react_1.useState)(false), filterDraft = _118[0], setFilterDraft = _118[1];
+    var _119 = (0, react_1.useState)(false), addTabModal = _119[0], setAddTabModal = _119[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 _112 = (0, react_1.useState)(function () {
+    var _120 = (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 = _112[0], setSelectedTab = _112[1];
-    var _113 = (0, react_1.useState)("dayGridMonth"), calendarView = _113[0], setCalendarView = _113[1];
+    }), selectedTab = _120[0], setSelectedTab = _120[1];
+    var _121 = (0, react_1.useState)("dayGridMonth"), calendarView = _121[0], setCalendarView = _121[1];
     // INFO: bareNewDTW calendar viewSwitch mode — drives the NewCalendar variant
     // (calendarView above drives the matching range query)
-    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 _122 = (0, react_1.useState)("month"), newCalendarViewMode = _122[0], setNewCalendarViewMode = _122[1];
+    var _123 = (0, react_1.useState)(new Date()), calendarTabMonth = _123[0], setCalendarTabMonth = _123[1];
     // INFO: defaultViewSwitch picks the opening view only — the tab re-inits
     // whenever its settings change, and that must not undo the user's switch
     var calendarViewInitRef = (0, react_1.useRef)(false);
-    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)({
+    var _124 = (0, react_1.useState)(true), kanbanDroppable = _124[0], setKanbanDroppable = _124[1];
+    var _125 = (0, react_1.useState)([]), kanbanOptions = _125[0], setKanbanOptions = _125[1];
+    var _126 = (0, react_1.useState)(false), queryForm = _126[0], setQueryForm = _126[1];
+    var _127 = (0, react_1.useState)(false), batchUpdateModal = _127[0], setBatchUpdateModal = _127[1];
+    var _128 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _120[0], setBatchUpdateData = _120[1];
-    var _121 = (0, react_1.useState)(function () {
+    }), batchUpdateData = _128[0], setBatchUpdateData = _128[1];
+    var _129 = (0, react_1.useState)(function () {
         var baseModel = (props === null || props === void 0 ? void 0 : props.model) || [];
         if (!persistedState)
             return baseModel;
@@ -403,8 +399,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             });
         }
         return model;
-    }), 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];
+    }), structure = _129[0], setStructure = _129[1];
+    var _130 = (0, react_1.useState)(((_m = props === null || props === void 0 ? void 0 : props.organise) === null || _m === void 0 ? void 0 : _m.additionalQuery) || []), additionalQuery = _130[0], setAdditionalQuery = _130[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 = [
@@ -415,9 +411,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             value: undefined,
         },
     ];
-    var _123 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _131 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFilters = _123[0], setFlexFilters = _123[1];
+        : defaultFlexFilterRow), flexFilters = _131[0], setFlexFilters = _131[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);
@@ -430,109 +426,110 @@ 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 _124 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _132 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : 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];
+        : defaultFlexFilterRow), flexFiltersDebounced = _132[0], setFlexFiltersDebounced = _132[1];
+    var _133 = (0, react_1.useState)({}), flexFilterReferenceOptions = _133[0], setFlexFilterReferenceOptions = _133[1];
+    var _134 = (0, react_1.useState)({}), flexFilterReferenceSearch = _134[0], setFlexFilterReferenceSearch = _134[1];
+    var _135 = (0, react_1.useState)(false), flexFilterModalOpen = _135[0], setFlexFilterModalOpen = _135[1];
+    var _136 = (0, react_1.useState)(false), viewSettingsModalOpen = _136[0], setViewSettingsModalOpen = _136[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 _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];
+    var _137 = (0, react_1.useState)((_o = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _o !== void 0 ? _o : []), userHiddenColumnIds = _137[0], setUserHiddenColumnIds = _137[1];
+    var _138 = (0, react_1.useState)(""), columnSearch = _138[0], setColumnSearch = _138[1];
+    var _139 = (0, react_1.useState)([]), savedViews = _139[0], setSavedViews = _139[1];
+    var _140 = (0, react_1.useState)(null), activeSavedViewId = _140[0], setActiveSavedViewId = _140[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 _141 = (0, react_1.useState)(null), savedViewName = _141[0], setSavedViewName = _141[1];
+    var _142 = (0, react_1.useState)(null), deletingSavedViewId = _142[0], setDeletingSavedViewId = _142[1];
+    var _143 = (0, react_1.useState)(null), draggingColumnId = _143[0], setDraggingColumnId = _143[1];
     var columnRowRefs = (0, react_1.useRef)({});
     //INFO : Used by Auth
-    var _136 = (0, react_1.useState)({
+    var _144 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
         create: false,
-    }), authMethods = _136[0], setAuthMethods = _136[1];
-    var _137 = (0, react_1.useState)(""), selectedAuthMethod = _137[0], setSelectedAuthMethod = _137[1];
+    }), authMethods = _144[0], setAuthMethods = _144[1];
+    var _145 = (0, react_1.useState)(""), selectedAuthMethod = _145[0], setSelectedAuthMethod = _145[1];
     // INFO: Used by Activity Log
-    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];
+    var _146 = (0, react_1.useState)(false), activityModal = _146[0], setActivityModal = _146[1];
+    var _147 = (0, react_1.useState)(""), activityId = _147[0], setActivityId = _147[1];
     //INFO : Used by Export
-    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 _148 = (0, react_1.useState)(null), csvFile = _148[0], setCSVFile = _148[1];
+    var _149 = (0, react_1.useState)([]), csvFileData = _149[0], setCSVFileData = _149[1];
+    var _150 = (0, react_1.useState)(0), stepCSVIndex = _150[0], setStepCSVIndex = _150[1];
+    var _151 = (0, react_1.useState)({}), listCSVMapAttribute = _151[0], setListCSVMapAttribute = _151[1];
+    var _152 = (0, react_1.useState)({}), listCSVObjAttribute = _152[0], setListCSVObjAttribute = _152[1];
+    var _153 = (0, react_1.useState)([]), csvAPIAttribute = _153[0], setCSVAPIAttribute = _153[1];
+    var _154 = (0, react_1.useState)(((_p = props.devSettings.currentUser) === null || _p === void 0 ? void 0 : _p.userEmail) || ""), exportCSVEmail = _154[0], setExportCSVEmail = _154[1];
+    var _155 = (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 = _155[0], setExportPDFTitle = _155[1];
+    var _156 = (0, react_1.useState)(false), exportPDFLoading = _156[0], setExportPDFLoading = _156[1];
+    var _157 = (0, react_1.useState)(false), exportReadPDFLoading = _157[0], setExportReadPDFLoading = _157[1];
+    var _158 = (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 = _158[0], setExportSumAttributeIds = _158[1];
+    var _159 = (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 = _159[0], setHideSubItems = _159[1];
+    var _160 = (0, react_1.useState)([]), importTableData = _160[0], setImportTableData = _160[1];
+    var _161 = (0, react_1.useState)([]), queryList = _161[0], setQueryList = _161[1];
+    var _162 = (0, react_1.useState)(undefined), allQueryList = _162[0], setAllQueryList = _162[1];
+    var _163 = (0, react_1.useState)(-1), queryIndex = _163[0], setQueryIndex = _163[1];
+    var _164 = (0, react_1.useState)((_y = props.organise) === null || _y === void 0 ? void 0 : _y.groupBy), groupId = _164[0], setGroupId = _164[1];
+    var _165 = (0, react_1.useState)(""), readTabSection = _165[0], setReadTabSection = _165[1];
+    var _166 = (0, react_1.useState)(false), readFloatingNav = _166[0], setReadFloatingNav = _166[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    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 _167 = (0, react_1.useState)(false), modalVisible = _167[0], setModalVisible = _167[1];
+    var _168 = (0, react_1.useState)(false), deleteModal = _168[0], setDeleteModal = _168[1];
+    var _169 = (0, react_1.useState)(false), excelModal = _169[0], setExcelModal = _169[1];
+    var _170 = (0, react_1.useState)(false), exportExcel = _170[0], setExportExcel = _170[1];
+    var _171 = (0, react_1.useState)(""), exportType = _171[0], setExportType = _171[1];
+    var _172 = (0, react_1.useState)(false), exportQR = _172[0], setExportQR = _172[1];
+    var _173 = (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 = _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)({
+    }), activeTab = _173[0], setActiveTab = _173[1];
+    var _174 = (0, react_1.useState)(false), signatureSigning = _174[0], setSignatureSigning = _174[1];
+    var _175 = (0, react_1.useState)({}), selectedData = _175[0], setSelectedData = _175[1];
+    var _176 = (0, react_1.useState)(""), selectedObjectStructureId = _176[0], setSelectedObjectStructureId = _176[1];
+    var _177 = (0, react_1.useState)(""), selectedObjectId = _177[0], setSelectedObjectId = _177[1];
+    var _178 = (0, react_1.useState)(""), selectedListAddressId = _178[0], setSelectedListAddressId = _178[1];
+    var _179 = (0, react_1.useState)(-1), selectedListAddressIndex = _179[0], setSelectedListAddressIndex = _179[1];
+    var _180 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), 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)({
+    }), selectedListAddress = _180[0], setSelectedListAddress = _180[1];
+    var _181 = (0, react_1.useState)({}), selectedObjectData = _181[0], setSelectedObjectData = _181[1];
+    var _182 = (0, react_1.useState)(null), objectCellEdit = _182[0], setObjectCellEdit = _182[1];
+    var _183 = (0, react_1.useState)(false), referenceLoading = _183[0], setReferenceLoading = _183[1];
+    var _184 = (0, react_1.useState)({}), referencesOptions = _184[0], setReferencesOptions = _184[1];
+    var _185 = (0, react_1.useState)({}), referencesDetails = _185[0], setReferencesDetails = _185[1];
+    var _186 = (0, react_1.useState)({}), listReferencesOptions = _186[0], setListReferencesOptions = _186[1];
+    var _187 = (0, react_1.useState)({}), referenceDeleteTableData = _187[0], setReferenceDeleteTableData = _187[1];
+    var _188 = (0, react_1.useState)([]), relatedSections = _188[0], setRelatedSections = _188[1];
+    var _189 = (0, react_1.useState)(0), referenceDeleteIndex = _189[0], setReferenceDeleteIndex = _189[1];
+    var _190 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), 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];
+    }), referenceCreationModal = _190[0], setReferenceCreationModal = _190[1];
+    var _191 = (0, react_1.useState)({}), referenceModelSchema = _191[0], setReferenceSchema = _191[1];
+    var _192 = (0, react_1.useState)([]), kanbanChecked = _192[0], setKanbanChecked = _192[1];
     //INFO : Offline
-    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];
+    var _193 = (0, react_1.useState)(0), offlineDataLength = _193[0], setOfflineDataLength = _193[1];
+    var _194 = (0, react_1.useState)(false), offlineModal = _194[0], setOfflineModal = _194[1];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    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];
+    var _195 = (0, react_1.useState)(false), isLive = _195[0], setIsLive = _195[1];
+    var _196 = (0, react_1.useState)(false), isLiveOffline = _196[0], setIsLiveOffline = _196[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 _188 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _188[0], setIsNetworkOffline = _188[1];
+    var _197 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _197[0], setIsNetworkOffline = _197[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -653,23 +650,108 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var isFirebase = isFirebaseClient || devSettings.server === "fbServer";
     var dbModule = isFirebaseClient ? (_4 = props.lib) === null || _4 === void 0 ? void 0 : _4.firebase : (_5 = props.lib) === null || _5 === void 0 ? void 0 : _5.axios;
     var schemaPresent = props.devSettings.schemaEndpoint ? true : false;
+    var selectedRelated = resolvedType === "read"
+        ? relatedSections.find(function (eachSection) { return eachSection.id === viewType; })
+        : undefined;
+    // INFO: each other space whose rows point at this record becomes a tab of
+    // the read view, so the counts are taken with the record — one schema query
+    // plus one single-row query per referencing column. The rows themselves load
+    // when their tab opens.
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var mounted = true;
+        if (resolvedType !== "read" ||
+            !props.id ||
+            !((_a = props.organise) === null || _a === void 0 ? void 0 : _a.showRelatedTab)) {
+            setRelatedSections([]);
+            return;
+        }
+        var handleLoadRelated = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var sources, referenceSources, counts, handleIsShared;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, (0, referenceScan_1.handleListReferenceSources)({
+                            dbModule: dbModule,
+                            devSettings: props.devSettings,
+                            space: props.space,
+                            bareReferenceDel: (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareReferenceDel,
+                        })];
+                    case 1:
+                        sources = _b.sent();
+                        referenceSources = sources.filter(function (eachSource) {
+                            return eachSource.column.type === "reference" ||
+                                eachSource.column.type === "listReference";
+                        });
+                        return [4 /*yield*/, Promise.all(referenceSources.map(function (eachSource) {
+                                var _a;
+                                return (0, referenceScan_1.handleCountReferences)({
+                                    dbModule: dbModule,
+                                    devSettings: props.devSettings,
+                                    source: eachSource,
+                                    recordId: (_a = props.id) !== null && _a !== void 0 ? _a : "",
+                                });
+                            }))];
+                    case 2:
+                        counts = _b.sent();
+                        handleIsShared = function (collectionId) {
+                            return referenceSources.filter(function (eachSource) { return eachSource.collectionId === collectionId; }).length > 1;
+                        };
+                        return [2 /*return*/, referenceSources
+                                .map(function (eachSource, index) { return ({
+                                id: "blixify_related_".concat(eachSource.collectionId, "_").concat(eachSource.column.id),
+                                label: handleIsShared(eachSource.collectionId)
+                                    ? "".concat(eachSource.collectionName, " \u00B7 ").concat(eachSource.column.name)
+                                    : eachSource.collectionName,
+                                source: eachSource,
+                                count: counts[index],
+                            }); })
+                                .filter(function (eachSection) { return eachSection.count > 0; })];
+                }
+            });
+        }); };
+        handleLoadRelated()
+            .then(function (sections) {
+            if (mounted)
+                setRelatedSections(sections);
+        })
+            .catch(function () {
+            if (mounted)
+                setRelatedSections([]);
+        });
+        return function () {
+            mounted = false;
+        };
+        /* eslint-disable */
+    }, [
+        resolvedType,
+        props.id,
+        (_6 = props.space) === null || _6 === void 0 ? void 0 : _6._id,
+        props.devSettings.schemaEndpoint,
+        (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.showRelatedTab,
+    ]);
+    /* eslint-enable */
     // INFO: the view settings panel (columns, sort, rows per page) is standard on
     // the new DTW; bareViewSettings stays the opt-in for legacy and bare DTWs
-    var isViewSettingsEnabled = ((_6 = props.bareSettings) === null || _6 === void 0 ? void 0 : _6.bareViewSettings) || ((_7 = props.bareSettings) === null || _7 === void 0 ? void 0 : _7.bareNewDTW)
+    var isViewSettingsEnabled = ((_8 = props.bareSettings) === null || _8 === void 0 ? void 0 : _8.bareViewSettings) || ((_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.bareNewDTW)
         ? true
         : false;
     // INFO: a consumer that wires onChangeHide owns the hide at schema level
     // (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;
+    var isSchemaHideMode = ((_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.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 _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 _198 = (0, react_1.useState)((_12 = (_11 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _11 !== void 0 ? _11 : props.limit) !== null && _12 !== void 0 ? _12 : 10), pageLimit = _198[0], setPageLimit = _198[1];
     var limit = pageLimit;
-    var isSavedViewsEnabled = !!((_11 = props.organise) === null || _11 === void 0 ? void 0 : _11.savedViews) && resolvedType === "list";
+    var isSavedViewsEnabled = !!((_13 = props.organise) === null || _13 === void 0 ? void 0 : _13.savedViews) && resolvedType === "list";
+    // INFO: an app that stores views takes over from this browser's storage, so
+    // every view is the team's and nothing is kept locally
+    var isAppViews = ((_14 = props.organise) === null || _14 === void 0 ? void 0 : _14.sharedViews) !== undefined ||
+        !!((_15 = props.organise) === null || _15 === void 0 ? void 0 : _15.onChangeSharedViews);
     // 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 activeSortId = (isInternalSort && persistedSort) || ((_16 = props.organise) === null || _16 === void 0 ? void 0 : _16.sort);
     var handleSortColumn = function (value) {
         var _a, _b, _c, _d;
         if (isInternalSort)
@@ -685,18 +767,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         setCursor("");
         setLastCursor("");
     };
-    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;
+    var _199 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _199.canUpdateRecord, canInlineUpdate = _199.canInlineUpdate, canBatchUpdate = _199.canBatchUpdate, canDeleteRecord = _199.canDeleteRecord;
+    var isEditor = ((_17 = props.edit) === null || _17 === void 0 ? void 0 : _17.allEditable) ? true : false;
+    var isOffline = (_18 = props.bareSettings) === null || _18 === void 0 ? void 0 : _18.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 && ((_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 isOfflineNetworkListener = isOffline && ((_19 = props.bareSettings) === null || _19 === void 0 ? void 0 : _19.bareOfflineNetworkListener);
+    var showId = (_20 = props.space) === null || _20 === void 0 ? void 0 : _20.showId;
     var remainId = showId || selectedObjectStructureId ? true : false;
-    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) {
+    var idField = ((_21 = props.space) === null || _21 === void 0 ? void 0 : _21.idField) || ((_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.idField);
+    var pipeline = (_23 = props === null || props === void 0 ? void 0 : props.space) === null || _23 === void 0 ? void 0 : _23.pipeline;
+    if ((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareListPipeline) {
         pipeline = pipeline
             ? __spreadArray(__spreadArray([], pipeline, true), props.bareSettings.bareListPipeline, true) : props.bareSettings.bareListPipeline;
     }
@@ -709,24 +791,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 = (_24 = (_23 = ((_22 = (_21 = props.organise) === null || _21 === void 0 ? void 0 : _21.extendedTabs) !== null && _22 !== void 0 ? _22 : []).find(function (eachTab) {
+    var fileViewColumnId = (_28 = (_27 = ((_26 = (_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.extendedTabs) !== null && _26 !== void 0 ? _26 : []).find(function (eachTab) {
         return eachTab.viewType === "file" &&
             (0, utils_1.lowercaseTextToId)(eachTab.name) === viewType;
-    })) === 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;
+    })) === null || _27 === void 0 ? void 0 : _27.fileSettings) === null || _28 === void 0 ? void 0 : _28.columnId;
+    var hasNavigation = ((_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.handleNavigate) ? true : false;
     var formColumn = "grid-cols-12";
-    var useMobileView = (_27 = (_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareUpdateMobileView) !== null && _27 !== void 0 ? _27 : false;
+    var useMobileView = (_31 = (_30 = props.bareSettings) === null || _30 === void 0 ? void 0 : _30.bareUpdateMobileView) !== null && _31 !== void 0 ? _31 : false;
     var gridGap = useMobileView ? "gap-x-6 gap-y-2 md:gap-y-6" : "gap-6";
-    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)
+    var isActivityLog = (((_33 = (_32 = props.edit) === null || _32 === void 0 ? void 0 : _32.activityLog) === null || _33 === void 0 ? void 0 : _33.enableComments) &&
+        ((_34 = props.edit) === null || _34 === void 0 ? void 0 : _34.activityLog.commentCollectionId)) ||
+        (((_36 = (_35 = props.edit) === null || _35 === void 0 ? void 0 : _35.activityLog) === null || _36 === void 0 ? void 0 : _36.enableLogs) &&
+            ((_37 = props.edit) === null || _37 === void 0 ? void 0 : _37.activityLog.logsCollectionId));
+    var customPaginationSize = ((_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.customPaginationCount)
         ? props.organise.customPaginationCount(size)
         : undefined;
     //TODO : Code - Pass ...devSettings, search dbEndpoint:
     var writeServerQuery = new writeQuery_1.WriteQuery({
-        dbModule: (_35 = props.lib) === null || _35 === void 0 ? void 0 : _35.axios,
+        dbModule: (_39 = props.lib) === null || _39 === void 0 ? void 0 : _39.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -734,7 +816,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var readServerQuery = new readQuery_1.ReadQuery({
-        dbModule: (_36 = props.lib) === null || _36 === void 0 ? void 0 : _36.axios,
+        dbModule: (_40 = props.lib) === null || _40 === void 0 ? void 0 : _40.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -742,9 +824,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var moreButtonPopUp = [
-        ((_37 = props.edit) === null || _37 === void 0 ? void 0 : _37.allEditable) &&
+        ((_41 = props.edit) === null || _41 === void 0 ? void 0 : _41.allEditable) &&
             !isFirebase &&
-            !((_39 = (_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.exportSettings) === null || _39 === void 0 ? void 0 : _39.hideImportCSV)
+            !((_43 = (_42 = props.organise) === null || _42 === void 0 ? void 0 : _42.exportSettings) === null || _43 === void 0 ? void 0 : _43.hideImportCSV)
             ? {
                 text: "Import Excel",
                 onClick: function () {
@@ -753,7 +835,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_41 = (_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.exportSettings) === null || _41 === void 0 ? void 0 : _41.hideExportCSV)
+        !((_45 = (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.exportSettings) === null || _45 === void 0 ? void 0 : _45.hideExportCSV)
             ? {
                 text: "Export CSV",
                 onClick: function () {
@@ -763,7 +845,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_43 = (_42 = props.organise) === null || _42 === void 0 ? void 0 : _42.exportSettings) === null || _43 === void 0 ? void 0 : _43.hideExportExcel)
+        !((_47 = (_46 = props.organise) === null || _46 === void 0 ? void 0 : _46.exportSettings) === null || _47 === void 0 ? void 0 : _47.hideExportExcel)
             ? {
                 text: "Export Excel",
                 onClick: function () {
@@ -773,7 +855,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_45 = (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.exportSettings) === null || _45 === void 0 ? void 0 : _45.hideExportPDF)
+        !((_49 = (_48 = props.organise) === null || _48 === void 0 ? void 0 : _48.exportSettings) === null || _49 === void 0 ? void 0 : _49.hideExportPDF)
             ? {
                 text: "Export PDF",
                 onClick: function () {
@@ -783,7 +865,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_47 = (_46 = props.organise) === null || _46 === void 0 ? void 0 : _46.exportSettings) === null || _47 === void 0 ? void 0 : _47.hideExportQR)
+        !((_51 = (_50 = props.organise) === null || _50 === void 0 ? void 0 : _50.exportSettings) === null || _51 === void 0 ? void 0 : _51.hideExportQR)
             ? {
                 text: "Export QR",
                 onClick: function () {
@@ -793,7 +875,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_49 = (_48 = props.organise) === null || _48 === void 0 ? void 0 : _48.exportSettings) === null || _49 === void 0 ? void 0 : _49.hideExportQR)
+        !((_53 = (_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.exportSettings) === null || _53 === void 0 ? void 0 : _53.hideExportQR)
             ? {
                 text: "Export QR(Data)",
                 onClick: function () {
@@ -803,7 +885,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_51 = (_50 = props.organise) === null || _50 === void 0 ? void 0 : _50.exportSettings) === null || _51 === void 0 ? void 0 : _51.hideExportPrint)
+        !((_55 = (_54 = props.organise) === null || _54 === void 0 ? void 0 : _54.exportSettings) === null || _55 === void 0 ? void 0 : _55.hideExportPrint)
             ? {
                 text: "Print",
                 onClick: function () {
@@ -813,7 +895,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_53 = (_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.exportSettings) === null || _53 === void 0 ? void 0 : _53.hideExportDraft)
+        !((_57 = (_56 = props.organise) === null || _56 === void 0 ? void 0 : _56.exportSettings) === null || _57 === void 0 ? void 0 : _57.hideExportDraft)
             ? {
                 text: filterDraft ? "Show All Items" : "Filter Draft",
                 onClick: function () {
@@ -822,7 +904,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             : null,
     ].filter(Boolean);
-    if ((_54 = props.organise) === null || _54 === void 0 ? void 0 : _54.moreSettings)
+    if ((_58 = props.organise) === null || _58 === void 0 ? void 0 : _58.moreSettings)
         moreButtonPopUp = moreButtonPopUp.concat(props.organise.moreSettings);
     //=====================================================================================
     //SECTION: User Column Visibility Handlers
@@ -1133,11 +1215,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     //=====================================================================================
     //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);
+    var savedViewsKey = (0, viewStatePersistence_1.buildSavedViewsKey)(props.collectionId, (_59 = props.organise) === null || _59 === void 0 ? void 0 : _59.persistKey, (_60 = devSettings.currentUser) === null || _60 === void 0 ? void 0 : _60.userEmail);
     (0, react_1.useEffect)(function () {
-        if (isSavedViewsEnabled)
+        if (isSavedViewsEnabled && !isAppViews)
             setSavedViews((0, viewStatePersistence_1.handleReadSavedViews)(savedViewsKey));
-    }, [isSavedViewsEnabled, savedViewsKey]);
+    }, [isSavedViewsEnabled, isAppViews, savedViewsKey]);
     // INFO: views belong to a tab, so another tab starts with none selected
     (0, react_1.useEffect)(function () {
         setActiveSavedViewId(null);
@@ -1161,7 +1243,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // 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;
+        var _a, _b, _c, _d;
         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;
@@ -1173,9 +1255,64 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 locked: true,
             });
         })
-            .filter(function (eachView) { return eachView.tabId === viewType; }), true), savedViews.filter(function (eachView) { return eachView.tabId === viewType; }), true);
+            .filter(function (eachView) { return eachView.tabId === viewType; }), true), (isAppViews
+            ? ((_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.sharedViews) !== null && _d !== void 0 ? _d : [])
+                .filter(function (eachView) { return eachView.tabId === viewType; })
+                .map(function (eachView) {
+                var _a;
+                return (__assign(__assign({}, eachView), { locked: !((_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeSharedViews) }));
+            })
+            : 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 : [])
+    // INFO: the app owns the list, so each change hands it the whole list to
+    // store; nothing is written to this browser. A second change before the app
+    // passes the list back builds on the one just sent, not the stale prop.
+    var lastSentSharedViewsRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        lastSentSharedViewsRef.current = null;
+    }, [(_61 = props.organise) === null || _61 === void 0 ? void 0 : _61.sharedViews]);
+    var handleStoreSharedViews = function (update) {
+        var _a, _b, _c;
+        if (!((_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeSharedViews))
+            return;
+        var views = update((_c = (_b = lastSentSharedViewsRef.current) !== null && _b !== void 0 ? _b : props.organise.sharedViews) !== null && _c !== void 0 ? _c : []);
+        lastSentSharedViewsRef.current = views;
+        props.organise.onChangeSharedViews(views);
+    };
+    // INFO: the list opens on initialSavedViewId, or else on the ★ default
+    // view. It settles once — when the view it names has arrived, so a default
+    // the app loads after mount still applies — and is never applied over a
+    // view already picked or a state persistViewState restored. A view that no
+    // longer exists, or is on another tab, leaves the list on All.
+    var openingViewSettledRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        if (!isSavedViewsEnabled || openingViewSettledRef.current)
+            return;
+        if (activeSavedViewId !== null || (isPersistEnabled && rawPersistedState)) {
+            openingViewSettledRef.current = true;
+            return;
+        }
+        var wantedId = (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.initialSavedViewId) !== null && _b !== void 0 ? _b : (_c = props.organise) === null || _c === void 0 ? void 0 : _c.defaultSavedViewId;
+        if (!wantedId)
+            return;
+        // INFO: the app's views may still be loading
+        if (isAppViews && ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.sharedViews) === undefined)
+            return;
+        openingViewSettledRef.current = true;
+        var view = handleGetTabSavedViews().find(function (eachView) { return eachView.id === wantedId; });
+        if (view)
+            handleApplySavedView(view, true);
+        /* eslint-disable */
+    }, [
+        isSavedViewsEnabled,
+        (_62 = props.organise) === null || _62 === void 0 ? void 0 : _62.initialSavedViewId,
+        (_63 = props.organise) === null || _63 === void 0 ? void 0 : _63.defaultSavedViewId,
+        (_64 = props.organise) === null || _64 === void 0 ? void 0 : _64.sharedViews,
+        savedViews,
+    ]);
+    /* eslint-enable */
+    var defaultSavedViewIds = ((_66 = (_65 = props.organise) === null || _65 === void 0 ? void 0 : _65.defaultSavedViews) !== null && _66 !== void 0 ? _66 : [])
         .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
@@ -1208,7 +1345,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             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) {
+    // INFO: isOpening — the list opening on a view tells the host nothing new,
+    // so its sort is not handed back (a host saving sort would write it on
+    // every open)
+    var handleApplySavedView = function (view, isOpening) {
         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));
@@ -1226,7 +1366,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             : 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 : {}))
+        if (!isOpening &&
+            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);
@@ -1261,13 +1403,32 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         setSavedViews(views);
         (0, viewStatePersistence_1.handleWriteSavedViews)(savedViewsKey, views);
     };
-    // INFO: a name already used on this tab is overwritten
+    // INFO: a name already used on this tab is overwritten, in the list the
+    // view is saved to
     var handleSaveSavedView = function (name) {
         var trimmed = name.trim();
         if (!trimmed)
             return;
         var state = (0, viewStatePersistence_1.handlePickViewState)(handleBuildViewSnapshot());
         var savedId = "";
+        if (isAppViews) {
+            handleStoreSharedViews(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);
+            return;
+        }
         handleStoreSavedViews(function (views) {
             var existing = views.find(function (eachView) { return eachView.tabId === viewType && eachView.name === trimmed; });
             var saved = existing
@@ -1284,6 +1445,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     var handleUpdateSavedView = function (id) {
         var state = (0, viewStatePersistence_1.handlePickViewState)(handleBuildViewSnapshot());
+        if (isAppViews) {
+            handleStoreSharedViews(function (views) {
+                return views.map(function (eachView) {
+                    return eachView.id === id ? __assign(__assign({}, eachView), { state: state }) : eachView;
+                });
+            });
+            return;
+        }
         handleStoreSavedViews(function (views) {
             return views.map(function (eachView) {
                 return eachView.id === id ? __assign(__assign({}, eachView), { state: state }) : eachView;
@@ -1291,9 +1460,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     };
     var handleDeleteSavedView = function (id) {
-        handleStoreSavedViews(function (views) {
-            return views.filter(function (eachView) { return eachView.id !== id; });
-        });
+        var _a, _b, _c;
+        // INFO: a deleted default leaves the list opening on All
+        if (id === ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.defaultSavedViewId))
+            (_c = (_b = props.organise) === null || _b === void 0 ? void 0 : _b.onChangeDefaultSavedViewId) === null || _c === void 0 ? void 0 : _c.call(_b, null);
+        if (isAppViews)
+            handleStoreSharedViews(function (views) {
+                return views.filter(function (eachView) { return eachView.id !== id; });
+            });
+        else
+            handleStoreSavedViews(function (views) {
+                return views.filter(function (eachView) { return eachView.id !== id; });
+            });
         if (activeSavedViewId === id)
             setActiveSavedViewId(null);
         setDeletingSavedViewId(null);
@@ -1382,7 +1560,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, (_59 = props.organise) === null || _59 === void 0 ? void 0 : _59.persistKey]);
+    }, [props.collectionId, (_67 = props.organise) === null || _67 === void 0 ? void 0 : _67.persistKey]);
     /* eslint-enable */
     // INFO: wait a frame — rows land in state one tick before layout
     (0, react_1.useEffect)(function () {
@@ -1417,7 +1595,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     (0, react_1.useEffect)(function () {
         handleOfflinePrefetch();
         /* eslint-disable */
-    }, [props.collectionId, (_60 = props.bareSettings) === null || _60 === void 0 ? void 0 : _60.bareOffline]);
+    }, [props.collectionId, (_68 = props.bareSettings) === null || _68 === void 0 ? void 0 : _68.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
@@ -1437,7 +1615,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }, interval);
         return function () { return clearInterval(timer); };
         /* eslint-disable */
-    }, [(_61 = props.bareSettings) === null || _61 === void 0 ? void 0 : _61.barePollingInterval, isLive, isNetworkOffline]);
+    }, [(_69 = props.bareSettings) === null || _69 === void 0 ? void 0 : _69.barePollingInterval, isLive, isNetworkOffline]);
     /* eslint-enable */
     // INFO: Pub/Sub → SSE live-stream — driven by bareSettings.bareSocketName
     // EventSource URL: {sseEndpoint}/{room}?bm_apiToken={token}
@@ -1479,7 +1657,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         };
         /* eslint-disable */
     }, [
-        (_62 = props.bareSettings) === null || _62 === void 0 ? void 0 : _62.bareSocketName,
+        (_70 = props.bareSettings) === null || _70 === void 0 ? void 0 : _70.bareSocketName,
         props.collectionId,
         props.devSettings.sseEndpoint,
         props.devSettings.dbAPIToken,
@@ -1731,10 +1909,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         props.collectionId,
         props.model,
         props.localURLEndpoint,
-        (_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,
+        (_71 = props.organise) === null || _71 === void 0 ? void 0 : _71.extendedTabs,
+        (_72 = props.organise) === null || _72 === void 0 ? void 0 : _72.viewId,
+        (_73 = props.organise) === null || _73 === void 0 ? void 0 : _73.additionalQuery,
+        (_74 = props.organise) === null || _74 === void 0 ? void 0 : _74.groupBy,
         resolvedType,
     ]);
     /**
@@ -1875,7 +2053,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             };
         }, 100);
         return function () { return clearTimeout(timeoutId); };
-    }, [(_67 = props.organise) === null || _67 === void 0 ? void 0 : _67.showReadFloatingNav, resolvedType, props.id, loading]);
+    }, [(_75 = props.organise) === null || _75 === void 0 ? void 0 : _75.showReadFloatingNav, resolvedType, props.id, loading]);
     (0, react_1.useEffect)(function () {
         if (resolvedType !== "read")
             return;
@@ -4180,16 +4358,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleCheckDeleteReference = function (selectedData, multipleDelete) { return __awaiter(void 0, void 0, void 0, function () {
-        var existDataIds, existsData, handleFindReference_1, collectionIdList_1, columnIdList_1, collectionNameList_1, refStructureList_1, schemaQuery, schemaRes, spaceList, err_14;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var existDataIds, existsData, handleFindReference_1, referenceSources_1, err_14;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
                     existDataIds = [];
                     existsData = {};
-                    _c.label = 1;
+                    _d.label = 1;
                 case 1:
-                    _c.trys.push([1, 10, , 11]);
+                    _d.trys.push([1, 4, , 5]);
                     handleFindReference_1 = function (data, referenceStructure, space, spaceId, spaceName) { return __awaiter(void 0, void 0, void 0, function () {
                         var referenceRQ, currentReferenceSelectedList;
                         var _a, _b, _c, _d, _e, _f;
@@ -4207,13 +4385,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     return [4 /*yield*/, referenceRQ.call({
                                             type: "list",
                                             query: [
-                                                {
-                                                    type: (referenceStructure === null || referenceStructure === void 0 ? void 0 : referenceStructure.type) === "listReference" ? "in" : "=",
-                                                    value: (referenceStructure === null || referenceStructure === void 0 ? void 0 : referenceStructure.type) === "listReference"
-                                                        ? [data[serverId]]
-                                                        : data[serverId],
-                                                    queryId: referenceStructure === null || referenceStructure === void 0 ? void 0 : referenceStructure.id,
-                                                },
+                                                (0, referenceScan_1.handleBuildReferenceQuery)(referenceStructure, data[serverId]),
                                             ],
                                         })];
                                 case 1:
@@ -4235,159 +4407,44 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                         });
                     }); };
-                    if (!!schemaPresent) return [3 /*break*/, 6];
-                    if (!(((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareReferenceDel) &&
-                        props.bareSettings.bareReferenceDel.length > 0)) return [3 /*break*/, 4];
-                    collectionIdList_1 = [];
-                    columnIdList_1 = [];
-                    collectionNameList_1 = [];
-                    refStructureList_1 = [];
-                    props.bareSettings.bareReferenceDel.map(function (eachRef) {
-                        collectionIdList_1.push(eachRef.collectionId);
-                        columnIdList_1.push(eachRef.columnId);
-                        collectionNameList_1.push(eachRef.collectionName);
-                        refStructureList_1.push(eachRef.schema);
-                        return null;
-                    });
-                    if (!(collectionIdList_1.length > 0 && columnIdList_1.length > 0)) return [3 /*break*/, 3];
+                    if (!schemaPresent && !((_b = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareReferenceDel) === null || _b === void 0 ? void 0 : _b.length)) {
+                        if (multipleDelete) {
+                            return [2 /*return*/, selectedData
+                                    .filter(function (eachData) {
+                                    return !existDataIds.includes(eachData[serverId]);
+                                })
+                                    .map(function (eachData) { return eachData[serverId]; })];
+                        }
+                        else
+                            return [2 /*return*/, selectedData];
+                    }
+                    return [4 /*yield*/, (0, referenceScan_1.handleListReferenceSources)({
+                            dbModule: dbModule,
+                            devSettings: props.devSettings,
+                            space: props.space,
+                            bareReferenceDel: (_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareReferenceDel,
+                        })];
+                case 2:
+                    referenceSources_1 = _d.sent();
                     return [4 /*yield*/, Promise.all(selectedData.map(function (eachData) { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
-                                    case 0: return [4 /*yield*/, Promise.all(collectionIdList_1.map(function (eachCollectionId, index) { return __awaiter(void 0, void 0, void 0, function () {
-                                            var selectedRefStructure, selectedColumn;
-                                            return __generator(this, function (_a) {
-                                                switch (_a.label) {
-                                                    case 0:
-                                                        selectedRefStructure = refStructureList_1[index];
-                                                        if (!(selectedRefStructure &&
-                                                            selectedRefStructure.length > 0)) return [3 /*break*/, 2];
-                                                        selectedColumn = selectedRefStructure.find(function (eachField) { return eachField.id === columnIdList_1[index]; });
-                                                        if (!selectedColumn) return [3 /*break*/, 2];
-                                                        return [4 /*yield*/, handleFindReference_1(eachData, selectedColumn, undefined, eachCollectionId, collectionNameList_1[index])];
-                                                    case 1:
-                                                        _a.sent();
-                                                        _a.label = 2;
-                                                    case 2: return [2 /*return*/];
-                                                }
-                                            });
-                                        }); }))];
+                                    case 0: return [4 /*yield*/, Promise.all(referenceSources_1.map(function (eachSource) {
+                                            return handleFindReference_1(eachData, eachSource.column, undefined, eachSource.collectionId, eachSource.collectionName);
+                                        }))];
                                     case 1:
                                         _a.sent();
                                         return [2 /*return*/];
                                 }
                             });
                         }); }))];
-                case 2:
-                    _c.sent();
-                    _c.label = 3;
-                case 3: return [3 /*break*/, 5];
+                case 3:
+                    _d.sent();
+                    return [3 /*break*/, 5];
                 case 4:
-                    if (multipleDelete) {
-                        return [2 /*return*/, selectedData
-                                .filter(function (eachData) {
-                                return !existDataIds.includes(eachData[serverId]);
-                            })
-                                .map(function (eachData) { return eachData[serverId]; })];
-                    }
-                    else
-                        return [2 /*return*/, selectedData];
-                    _c.label = 5;
-                case 5: return [3 /*break*/, 9];
-                case 6:
-                    schemaQuery = new readQuery_1.ReadQuery({
-                        dbModule: dbModule,
-                        dbType: props.devSettings.server,
-                        dbCollection: "spaces",
-                        dbEndpoint: props.devSettings.schemaEndpoint,
-                        dbAPIToken: props.devSettings.schemaEndpointToken,
-                    });
-                    return [4 /*yield*/, schemaQuery.call({
-                            query: [
-                                {
-                                    type: "=",
-                                    queryId: "workspaceId",
-                                    value: (_b = props.space) === null || _b === void 0 ? void 0 : _b.workspaceId,
-                                },
-                                {
-                                    type: "=",
-                                    queryId: "type",
-                                    value: "datasheet",
-                                },
-                            ],
-                            type: "list",
-                        })];
-                case 7:
-                    schemaRes = _c.sent();
-                    spaceList = schemaRes === null || schemaRes === void 0 ? void 0 : schemaRes.data;
-                    return [4 /*yield*/, Promise.all(spaceList.map(function (eachSpace) { return __awaiter(void 0, void 0, void 0, function () {
-                            var reference;
-                            var _a;
-                            return __generator(this, function (_b) {
-                                switch (_b.label) {
-                                    case 0:
-                                        reference = (_a = eachSpace.structure) === null || _a === void 0 ? void 0 : _a.filter(function (eacStructure) {
-                                            var _a;
-                                            return eacStructure.referenceSpaceId === ((_a = props.space) === null || _a === void 0 ? void 0 : _a._id);
-                                        });
-                                        if (!(reference && reference.length > 0)) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, Promise.all(selectedData.map(function (eachData) { return __awaiter(void 0, void 0, void 0, function () {
-                                                var _a, reference_1, reference_1_1, eachReferenceStructure, e_1_1;
-                                                var _b, e_1, _c, _d;
-                                                return __generator(this, function (_e) {
-                                                    switch (_e.label) {
-                                                        case 0:
-                                                            _e.trys.push([0, 6, 7, 12]);
-                                                            _a = true, reference_1 = __asyncValues(reference);
-                                                            _e.label = 1;
-                                                        case 1: return [4 /*yield*/, reference_1.next()];
-                                                        case 2:
-                                                            if (!(reference_1_1 = _e.sent(), _b = reference_1_1.done, !_b)) return [3 /*break*/, 5];
-                                                            _d = reference_1_1.value;
-                                                            _a = false;
-                                                            eachReferenceStructure = _d;
-                                                            return [4 /*yield*/, handleFindReference_1(eachData, eachReferenceStructure, eachSpace)];
-                                                        case 3:
-                                                            _e.sent();
-                                                            _e.label = 4;
-                                                        case 4:
-                                                            _a = true;
-                                                            return [3 /*break*/, 1];
-                                                        case 5: return [3 /*break*/, 12];
-                                                        case 6:
-                                                            e_1_1 = _e.sent();
-                                                            e_1 = { error: e_1_1 };
-                                                            return [3 /*break*/, 12];
-                                                        case 7:
-                                                            _e.trys.push([7, , 10, 11]);
-                                                            if (!(!_a && !_b && (_c = reference_1.return))) return [3 /*break*/, 9];
-                                                            return [4 /*yield*/, _c.call(reference_1)];
-                                                        case 8:
-                                                            _e.sent();
-                                                            _e.label = 9;
-                                                        case 9: return [3 /*break*/, 11];
-                                                        case 10:
-                                                            if (e_1) throw e_1.error;
-                                                            return [7 /*endfinally*/];
-                                                        case 11: return [7 /*endfinally*/];
-                                                        case 12: return [2 /*return*/];
-                                                    }
-                                                });
-                                            }); }))];
-                                    case 1:
-                                        _b.sent();
-                                        _b.label = 2;
-                                    case 2: return [2 /*return*/];
-                                }
-                            });
-                        }); }))];
-                case 8:
-                    _c.sent();
-                    _c.label = 9;
-                case 9: return [3 /*break*/, 11];
-                case 10:
-                    err_14 = _c.sent();
-                    return [3 /*break*/, 11];
-                case 11:
+                    err_14 = _d.sent();
+                    return [3 /*break*/, 5];
+                case 5:
                     setReferenceDeleteTableData(existsData);
                     return [2 /*return*/, selectedData
                             .filter(function (eachData) {
@@ -7606,7 +7663,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     })) })) }));
     };
     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, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45;
         var isBottom = ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionBottom) ? true : false;
         var tabs = renderTabs();
         var pages = [
@@ -7646,16 +7703,22 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     props.title && (react_1.default.createElement("p", { className: "text-xl font-medium ".concat(((_h = props.organise) === null || _h === void 0 ? void 0 : _h.darkMode) ? "text-white" : "") }, props.title)),
                                     props.description && (react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)))),
                                 renderActionButtons(resolvedType))),
-                        (schemaPresent || ((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.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: (_k = props.organise) === null || _k === void 0 ? void 0 : _k.darkMode })),
+                        (schemaPresent ||
+                            ((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareReadListTabs) ||
+                            relatedSections.length > 0) && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_k = props.organise) === null || _k === void 0 ? void 0 : _k.darkMode })),
                         ((_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareReadComponentPos) === "top" &&
                             renderBareReadComp(),
-                        ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareUpdateActionTop) && renderReadBar(),
+                        ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareUpdateActionTop) &&
+                            !selectedRelated &&
+                            renderReadBar(),
                         anyAuthMethod && (react_1.default.createElement("div", { className: "bg-primary-100 text-gray-700 mt-3 px-5 py-3 rounded" }, renderAuthContent())),
                         react_1.default.createElement("div", { ref: exportReadPDFRef },
-                            !((_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareReadComponentHide) && (react_1.default.createElement("div", null, renderTabContent(tabs, resolvedType, viewType))),
-                            ((_p = props.bareSettings) === null || _p === void 0 ? void 0 : _p.bareReadComponentPos) !== "top" &&
+                            selectedRelated ? (react_1.default.createElement(relatedRecords_1.RelatedRecords, { key: "".concat(props.id, "-").concat(selectedRelated.id), source: selectedRelated.source, recordId: (_o = props.id) !== null && _o !== void 0 ? _o : "", renderList: renderRelatedList })) : (!((_p = props.bareSettings) === null || _p === void 0 ? void 0 : _p.bareReadComponentHide) && (react_1.default.createElement("div", null, renderTabContent(tabs, resolvedType, viewType)))),
+                            ((_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareReadComponentPos) !== "top" &&
                                 renderBareReadComp()),
-                        !((_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareUpdateActionTop) && renderReadBar()))));
+                        !((_r = props.bareSettings) === null || _r === void 0 ? void 0 : _r.bareUpdateActionTop) &&
+                            !selectedRelated &&
+                            renderReadBar()))));
             case "update":
                 if (props.id !== "new") {
                     pages.push({
@@ -7665,12 +7728,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     });
                 }
                 pages.push({
-                    name: (_t = selectedData === null || selectedData === void 0 ? void 0 : selectedData[(_s = (_r = props.organise) === null || _r === void 0 ? void 0 : _r.breadcrumbAttributeId) !== null && _s !== void 0 ? _s : serverId]) !== null && _t !== void 0 ? _t : (props.id ? props.id : "new"),
+                    name: (_u = selectedData === null || selectedData === void 0 ? void 0 : selectedData[(_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.breadcrumbAttributeId) !== null && _t !== void 0 ? _t : serverId]) !== null && _u !== void 0 ? _u : (props.id ? props.id : "new"),
                     href: "#",
                     current: true,
                 });
                 var filterModel_1 = [];
-                var disabledOnEnter_1 = (_v = (_u = props.organise) === null || _u === void 0 ? void 0 : _u.disabledOnEnter) !== null && _v !== void 0 ? _v : false;
+                var disabledOnEnter_1 = (_w = (_v = props.organise) === null || _v === void 0 ? void 0 : _v.disabledOnEnter) !== null && _w !== void 0 ? _w : false;
                 structure.map(function (eachModel) {
                     var _a;
                     var present = false;
@@ -7783,12 +7846,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }
                     }
                 };
-                var hasTabAlign_1 = ((_w = props.organise) === null || _w === void 0 ? void 0 : _w.tabAlign) || ((_x = props.space) === null || _x === void 0 ? void 0 : _x.tabAlign);
-                var leftTabAlign = ((_y = props.organise) === null || _y === void 0 ? void 0 : _y.tabAlign) === "left" ||
-                    ((_z = props.space) === null || _z === void 0 ? void 0 : _z.tabAlign) === "left";
-                var topTabAlign = ((_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.tabAlign) === "top" || ((_1 = props.space) === null || _1 === void 0 ? void 0 : _1.tabAlign) === "top";
-                var stepperTabAlign = ((_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.tabAlign) === "stepper" ||
-                    ((_3 = props.space) === null || _3 === void 0 ? void 0 : _3.tabAlign) === "stepper";
+                var hasTabAlign_1 = ((_x = props.organise) === null || _x === void 0 ? void 0 : _x.tabAlign) || ((_y = props.space) === null || _y === void 0 ? void 0 : _y.tabAlign);
+                var leftTabAlign = ((_z = props.organise) === null || _z === void 0 ? void 0 : _z.tabAlign) === "left" ||
+                    ((_0 = props.space) === null || _0 === void 0 ? void 0 : _0.tabAlign) === "left";
+                var topTabAlign = ((_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.tabAlign) === "top" || ((_2 = props.space) === null || _2 === void 0 ? void 0 : _2.tabAlign) === "top";
+                var stepperTabAlign = ((_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.tabAlign) === "stepper" ||
+                    ((_4 = props.space) === null || _4 === void 0 ? void 0 : _4.tabAlign) === "stepper";
                 var uniqueTabIds_2 = Array.from(new Set(filterModel_1
                     .map(function (item) { return item.tabId; })
                     .filter(function (id) { return id !== undefined; })));
@@ -7797,7 +7860,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 if (shouldIncludeOthers) {
                     uniqueTabIds_2.push("");
                 }
-                var customTabComponent_1 = (_6 = (_5 = (_4 = props.bareSettings) === null || _4 === void 0 ? void 0 : _4.bareUpdateTabComponent) === null || _5 === void 0 ? void 0 : _5.call(_4, uniqueTabIds_2)) !== null && _6 !== void 0 ? _6 : [];
+                var customTabComponent_1 = (_7 = (_6 = (_5 = props.bareSettings) === null || _5 === void 0 ? void 0 : _5.bareUpdateTabComponent) === null || _6 === void 0 ? void 0 : _6.call(_5, uniqueTabIds_2)) !== null && _7 !== void 0 ? _7 : [];
                 var stepperSteps = uniqueTabIds_2.map(function (eachTabId) {
                     var _a, _b;
                     var customTabMatch = customTabComponent_1.find(function (eachTab) { return eachTab.tabId === eachTabId; });
@@ -7832,7 +7895,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     props.id && props.id !== "new" && structure.length >= 1 && (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: readQueryHocRef, database: {
                             dbModule: dbModule,
                             dbType: devSettings.server,
-                            dbCollection: (_8 = (_7 = props === null || props === void 0 ? void 0 : props.space) === null || _7 === void 0 ? void 0 : _7.pipelineDefaultSpaceId) !== null && _8 !== void 0 ? _8 : props.collectionId,
+                            dbCollection: (_9 = (_8 = props === null || props === void 0 ? void 0 : props.space) === null || _8 === void 0 ? void 0 : _8.pipelineDefaultSpaceId) !== null && _9 !== void 0 ? _9 : props.collectionId,
                             dbEndpoint: devSettings.dbEndpoint,
                             dbAPIToken: devSettings.dbAPIToken,
                             dbUserToken: devSettings.dbUserToken,
@@ -7840,11 +7903,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             type: "get",
                             id: props.id,
                             pipeline: pipeline,
-                        }, offline: ((_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.bareOffline) && isNetworkOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
+                        }, offline: ((_10 = props.bareSettings) === null || _10 === void 0 ? void 0 : _10.bareOffline) && isNetworkOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
                     renderBreadcrumb(pages),
                     react_1.default.createElement("div", { className: "flex flex-col py-2 sm:items-center sm:flex-row" },
                         (props.title || props.description) && (react_1.default.createElement("div", { className: "flex flex-col w-full" },
-                            props.title && (react_1.default.createElement("p", { className: "text-xl font-medium ".concat(((_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.darkMode) ? "text-white" : "") }, props.title)),
+                            props.title && (react_1.default.createElement("p", { className: "text-xl font-medium ".concat(((_11 = props.organise) === null || _11 === void 0 ? void 0 : _11.darkMode) ? "text-white" : "") }, props.title)),
                             props.description && (react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)))),
                         (!isBottom || hasTabAlign_1 || resolvedType === "update") &&
                             renderActionButtons(resolvedType, hasTabAlign_1, uniqueTabIds_2)),
@@ -7863,10 +7926,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     var tabId = uniqueTabIds_2[stepIndex];
                                     handleUpdateTabId(tabId);
                                 } })),
-                            ((_11 = props.bareSettings) === null || _11 === void 0 ? void 0 : _11.bareUpdateComponentAbove) &&
-                                ((_12 = props.bareSettings) === null || _12 === void 0 ? void 0 : _12.bareUpdateComponent) &&
-                                ((_13 = props.bareSettings) === null || _13 === void 0 ? void 0 : _13.bareUpdateComponent(selectedData, handleResolveRawData())),
-                            ((_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareUpdateActionTop) &&
+                            ((_12 = props.bareSettings) === null || _12 === void 0 ? void 0 : _12.bareUpdateComponentAbove) &&
+                                ((_13 = props.bareSettings) === null || _13 === void 0 ? void 0 : _13.bareUpdateComponent) &&
+                                ((_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareUpdateComponent(selectedData, handleResolveRawData())),
+                            ((_15 = props.bareSettings) === null || _15 === void 0 ? void 0 : _15.bareUpdateActionTop) &&
                                 renderStepBar(uniqueTabIds_2),
                             react_1.default.createElement(form_1.Form, { className: "mt-6", ref: formRef, refList: __spreadArray(__spreadArray([], modalFormInputRefs, true), flexTableRefs, true), handleComplete: handleSubmit, disabledOnEnter: disabledOnEnter_1, handleOnFailValidation: handleOnFailValidation },
                                 uniqueTabIds_2.map(function (tabId) {
@@ -7888,8 +7951,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                             ((_c = (_b = props.organise) === null || _b === void 0 ? void 0 : _b.tabDescriptions) === null || _c === void 0 ? void 0 : _c[tabId]) && (react_1.default.createElement("p", { className: "text-sm mt-0.5 ".concat(((_d = props.organise) === null || _d === void 0 ? void 0 : _d.darkMode) ? "text-gray-400" : "text-gray-500") }, props.organise.tabDescriptions[tabId])))),
                                         renderDataTemplateFormContent(selectedData, filterByTab, modalFormInputRefs, false, false, undefined, undefined)));
                                 }),
-                                !((_15 = props.bareSettings) === null || _15 === void 0 ? void 0 : _15.bareUpdateComponentAbove) &&
-                                    ((_16 = props.bareSettings) === null || _16 === void 0 ? void 0 : _16.bareUpdateComponent) && (
+                                !((_16 = props.bareSettings) === null || _16 === void 0 ? void 0 : _16.bareUpdateComponentAbove) &&
+                                    ((_17 = props.bareSettings) === null || _17 === void 0 ? void 0 : _17.bareUpdateComponent) && (
                                 // INFO: the form is a grid-cols-12. A child with no column span is one
                                 // column, and a grid item cannot shrink below its longest word, so on a
                                 // phone it wraps one word per line. `contents` takes this wrapper out of
@@ -7899,20 +7962,20 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 react_1.default.createElement("div", { className: "contents [&>*:not([class*=col-span])]:col-span-12" }, props.bareSettings.bareUpdateComponent(selectedData, handleResolveRawData())))),
                             react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(resolvedType)),
                             react_1.default.createElement("div", { className: "mt-8" }, renderListObject(resolvedType)),
-                            !((_17 = props.bareSettings) === null || _17 === void 0 ? void 0 : _17.bareUpdateActionTop) &&
+                            !((_18 = props.bareSettings) === null || _18 === void 0 ? void 0 : _18.bareUpdateActionTop) &&
                                 renderStepBar(uniqueTabIds_2),
                             isBottom &&
                                 resolvedType !== "update" &&
                                 renderActionButtons(resolvedType, hasTabAlign_1, uniqueTabIds_2)))) : (react_1.default.createElement("div", null,
-                        ((_18 = props.bareSettings) === null || _18 === void 0 ? void 0 : _18.bareUpdateComponentAbove) &&
-                            ((_19 = props.bareSettings) === null || _19 === void 0 ? void 0 : _19.bareUpdateComponent) &&
-                            ((_20 = props.bareSettings) === null || _20 === void 0 ? void 0 : _20.bareUpdateComponent(selectedData, handleResolveRawData())),
-                        ((_21 = props.bareSettings) === null || _21 === void 0 ? void 0 : _21.bareUpdateActionTop) &&
+                        ((_19 = props.bareSettings) === null || _19 === void 0 ? void 0 : _19.bareUpdateComponentAbove) &&
+                            ((_20 = props.bareSettings) === null || _20 === void 0 ? void 0 : _20.bareUpdateComponent) &&
+                            ((_21 = props.bareSettings) === null || _21 === void 0 ? void 0 : _21.bareUpdateComponent(selectedData, handleResolveRawData())),
+                        ((_22 = props.bareSettings) === null || _22 === void 0 ? void 0 : _22.bareUpdateActionTop) &&
                             renderStepBar(uniqueTabIds_2),
                         react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " ").concat(gridGap, " mt-6"), ref: formRef, refList: __spreadArray(__spreadArray([], modalFormInputRefs, true), flexTableRefs, true), handleComplete: handleSubmit, disabledOnEnter: disabledOnEnter_1, handleOnFailValidation: handleOnFailValidation },
                             renderDataTemplateFormContent(selectedData, filterModel_1, modalFormInputRefs, false, false),
-                            !((_22 = props.bareSettings) === null || _22 === void 0 ? void 0 : _22.bareUpdateComponentAbove) &&
-                                ((_23 = props.bareSettings) === null || _23 === void 0 ? void 0 : _23.bareUpdateComponent) && (
+                            !((_23 = props.bareSettings) === null || _23 === void 0 ? void 0 : _23.bareUpdateComponentAbove) &&
+                                ((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareUpdateComponent) && (
                             // INFO: the form is a grid-cols-12. A child with no column span is one
                             // column, and a grid item cannot shrink below its longest word, so on a
                             // phone it wraps one word per line. `contents` takes this wrapper out of
@@ -7922,7 +7985,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             react_1.default.createElement("div", { className: "contents [&>*:not([class*=col-span])]:col-span-12" }, props.bareSettings.bareUpdateComponent(selectedData, handleResolveRawData())))),
                         react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(resolvedType)),
                         react_1.default.createElement("div", { className: "mt-8" }, renderListObject(resolvedType)),
-                        !((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareUpdateActionTop) &&
+                        !((_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareUpdateActionTop) &&
                             renderStepBar(uniqueTabIds_2)))));
             case "list":
             case "union":
@@ -7931,20 +7994,20 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 var actionComponent = renderActionButtons(resolvedType);
                 // INFO: active flex filter count for the icon badge + floating search.
                 // Counts query output so the badge matches what's actually filtered.
-                var activeFlexFilterCount_1 = ((_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareFlexFilters)
+                var activeFlexFilterCount_1 = ((_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareFlexFilters)
                     ? (0, listModule_1.renderFlexFilterConditions)(flexFilters, structure).length
                     : 0;
                 var listReadQueryHOC = (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: listRQueryHocRef, database: {
                         dbModule: dbModule,
                         dbType: devSettings.server,
-                        dbCollection: (_27 = (_26 = props === null || props === void 0 ? void 0 : props.space) === null || _26 === void 0 ? void 0 : _26.pipelineDefaultSpaceId) !== null && _27 !== void 0 ? _27 : props.collectionId,
+                        dbCollection: (_28 = (_27 = props === null || props === void 0 ? void 0 : props.space) === null || _27 === void 0 ? void 0 : _27.pipelineDefaultSpaceId) !== null && _28 !== void 0 ? _28 : props.collectionId,
                         dbEndpoint: devSettings.dbEndpoint,
                         dbAPIToken: devSettings.dbAPIToken,
                         dbUserToken: devSettings.dbUserToken,
-                    }, cond: handleReadQueryHocCond(), offline: ((_28 = props.bareSettings) === null || _28 === void 0 ? void 0 : _28.bareOffline) && isNetworkOffline, onChangeData: function (data, cond) {
+                    }, cond: handleReadQueryHocCond(), offline: ((_29 = props.bareSettings) === null || _29 === void 0 ? void 0 : _29.bareOffline) && isNetworkOffline, onChangeData: function (data, cond) {
                         handleGetListData(data, "", "", cond);
                     }, onError: handleGetItemError }));
-                if ((_29 = props.renderSettings) === null || _29 === void 0 ? void 0 : _29.renderListUI) {
+                if ((_30 = props.renderSettings) === null || _30 === void 0 ? void 0 : _30.renderListUI) {
                     return (react_1.default.createElement(react_1.default.Fragment, null,
                         listReadQueryHOC,
                         props.renderSettings.renderListUI(actionComponent, filterComponent_1, dataComponent)));
@@ -8156,47 +8219,47 @@ 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(((_30 = props.bareSettings) === null || _30 === void 0 ? void 0 : _30.bareCompactMode)
+                    react_1.default.createElement("div", { className: "flex py-2 ".concat(((_31 = props.bareSettings) === null || _31 === void 0 ? void 0 : _31.bareCompactMode)
                             ? // INFO: the grow spacer is hidden on phones (search lives in
                                 // the floating bar), so the row itself pushes the actions right
                                 "w-full flex-row flex-wrap sm:flex-nowrap items-end justify-between sm:justify-start"
                             : "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 ".concat(((_31 = props.organise) === null || _31 === void 0 ? void 0 : _31.darkMode) ? "text-white" : "") }, props.title),
-                                ((_32 = props.bareSettings) === null || _32 === void 0 ? void 0 : _32.bareSocketName) &&
+                                react_1.default.createElement("p", { className: "text-xl font-medium ".concat(((_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.darkMode) ? "text-white" : "") }, props.title),
+                                ((_33 = props.bareSettings) === null || _33 === void 0 ? void 0 : _33.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")),
-                                ((_33 = props.bareSettings) === null || _33 === void 0 ? void 0 : _33.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" },
+                                ((_34 = props.bareSettings) === null || _34 === void 0 ? void 0 : _34.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: ((_34 = props.bareSettings) === null || _34 === void 0 ? void 0 : _34.bareCompactMode)
+                        react_1.default.createElement("div", { className: ((_35 = props.bareSettings) === null || _35 === void 0 ? void 0 : _35.bareCompactMode)
                                 ? "hidden sm:block grow"
                                 : "grow" }),
                         react_1.default.createElement("div", { className: "ml-auto flex flex-row items-end" },
                             renderListFilterElements(),
                             renderListActionElements())),
                     renderListNewRowFilterElements(),
-                    (schemaPresent || ((_35 = props.bareSettings) === null || _35 === void 0 ? void 0 : _35.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: (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.darkMode })),
+                    (schemaPresent || ((_36 = props.bareSettings) === null || _36 === void 0 ? void 0 : _36.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: (_37 = props.organise) === null || _37 === void 0 ? void 0 : _37.darkMode })),
                     renderScopedTabContent(tabs, resolvedType, viewType),
-                    ((_37 = props.bareSettings) === null || _37 === void 0 ? void 0 : _37.bareListMobileFloatingSearch) && (react_1.default.createElement("div", { className: "h-28 md:hidden", "aria-hidden": "true" })),
-                    ((_38 = props.bareSettings) === null || _38 === void 0 ? void 0 : _38.bareListMobileFloatingSearch) &&
+                    ((_38 = props.bareSettings) === null || _38 === void 0 ? void 0 : _38.bareListMobileFloatingSearch) && (react_1.default.createElement("div", { className: "h-28 md:hidden", "aria-hidden": "true" })),
+                    ((_39 = props.bareSettings) === null || _39 === void 0 ? void 0 : _39.bareListMobileFloatingSearch) &&
                         (0, listModule_1.renderFloatingMobileSearch)({
                             filterSearch: filterSearch,
                             handleNameSearch: handleNameSearch,
                             onFilterClick: function () { return setFlexFilterModalOpen(true); },
-                            hideSearch: (_39 = props.organise) === null || _39 === void 0 ? void 0 : _39.hideSearch,
-                            darkMode: (_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.darkMode,
-                            floatingOffset: (_41 = props.bareSettings) === null || _41 === void 0 ? void 0 : _41.bareListFloatingActionOffset,
-                            hideFilter: !((_42 = props.bareSettings) === null || _42 === void 0 ? void 0 : _42.bareFlexFilters),
-                            activeFilterCount: ((_43 = props.bareSettings) === null || _43 === void 0 ? void 0 : _43.bareFlexFilters)
+                            hideSearch: (_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.hideSearch,
+                            darkMode: (_41 = props.organise) === null || _41 === void 0 ? void 0 : _41.darkMode,
+                            floatingOffset: (_42 = props.bareSettings) === null || _42 === void 0 ? void 0 : _42.bareListFloatingActionOffset,
+                            hideFilter: !((_43 = props.bareSettings) === null || _43 === void 0 ? void 0 : _43.bareFlexFilters),
+                            activeFilterCount: ((_44 = props.bareSettings) === null || _44 === void 0 ? void 0 : _44.bareFlexFilters)
                                 ? activeFlexFilterCount_1
                                 : undefined,
                             // INFO: Hides when items are selected so NewTable's multi-action bar takes over.
-                            hidden: selectAll || ((_44 = selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) !== null && _44 !== void 0 ? _44 : 0) > 0,
+                            hidden: selectAll || ((_45 = selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) !== null && _45 !== void 0 ? _45 : 0) > 0,
                         })));
             default:
                 return react_1.default.createElement(react_1.default.Fragment, null);
@@ -8508,7 +8571,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         if (((_a = props.organise) === null || _a === void 0 ? void 0 : _a.extendedTabs) &&
             ((_b = props.organise.extendedTabs) === null || _b === void 0 ? void 0 : _b.length) > 0) {
             (_c = props.organise) === null || _c === void 0 ? void 0 : _c.extendedTabs.map(function (eachTab) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 var hrefPoint = "".concat(props.localURLEndpoint, "?type=").concat(resolvedType, "&collection=").concat(props.collectionId);
                 if (props.id)
                     hrefPoint += "&data=".concat(props.id);
@@ -8533,6 +8596,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     // still unwound the column (it reads the raw extendedTabs) while
                     // the tile had no column to read and every file said "Attachment".
                     fileSettings: (_f = eachTab.fileSettings) !== null && _f !== void 0 ? _f : undefined,
+                    chartSettings: (_g = eachTab.chartSettings) !== null && _g !== void 0 ? _g : undefined,
                 };
                 if (eachTab.viewType === "iframe") {
                     if (typeof eachTab.src === "string") {
@@ -8547,7 +8611,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }
                 if (eachTab.type === resolvedType) {
                     tabs.push(__assign(__assign(__assign({}, tabData), (isEditor &&
-                        ((_g = props.organise) === null || _g === void 0 ? void 0 : _g.onChangeTabs) && {
+                        ((_h = props.organise) === null || _h === void 0 ? void 0 : _h.onChangeTabs) && {
                         action: (react_1.default.createElement("span", { role: "button", "data-testid": "tab-default-".concat(tabData.id), "aria-label": eachTab.defaultTab
                                 ? "Opens by default"
                                 : "Open this tab by default", className: "ml-2 self-center ".concat(eachTab.defaultTab
@@ -8557,8 +8621,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 e.preventDefault();
                                 handleToggleDefaultTab(eachTab.name);
                             } }, eachTab.defaultTab ? (react_1.default.createElement(HeroIcons.BookmarkIcon, { className: "h-4 w-4" })) : (react_1.default.createElement(BookmarkIcon_1.default, { className: "h-4 w-4" })))),
-                    })), (!((_h = props.edit) === null || _h === void 0 ? void 0 : _h.disabledTabsDeleteBtn) &&
-                        ((_j = props.organise) === null || _j === void 0 ? void 0 : _j.onChangeTabs) && {
+                    })), (!((_j = props.edit) === null || _j === void 0 ? void 0 : _j.disabledTabsDeleteBtn) &&
+                        ((_k = props.organise) === null || _k === void 0 ? void 0 : _k.onChangeTabs) && {
                         del: (react_1.default.createElement(outline_1.XMarkIcon, { className: "h-4 w-4 ml-2 self-center text-red-600 hover:text-red-400 ", onClick: function (e) {
                                 e.stopPropagation();
                                 e.preventDefault();
@@ -8569,6 +8633,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 return null;
             });
         }
+        if (resolvedType === "read")
+            relatedSections.forEach(function (eachSection) {
+                return tabs.push({
+                    id: eachSection.id,
+                    name: "".concat(eachSection.label, " (").concat(eachSection.count, ")"),
+                    href: "".concat(props.localURLEndpoint, "?data=").concat(props.id, "&type=read&collection=").concat(props.collectionId, "&view=").concat(eachSection.id),
+                });
+            });
         if (isEditor)
             if (!((_d = props.organise) === null || _d === void 0 ? void 0 : _d.hideNewTabs) && !((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareReadListTabs))
                 tabs.push({
@@ -8613,6 +8685,32 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         var nextTabs = ((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.extendedTabs) !== null && _b !== void 0 ? _b : []).map(function (eachTab) { return (__assign(__assign({}, eachTab), { defaultTab: eachTab.name === name ? !eachTab.defaultTab : false })); });
         (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.onChangeTabs) === null || _d === void 0 ? void 0 : _d.call(_c, nextTabs);
     };
+    var handleChangeTabCharts = function (tabName, charts) {
+        var _a, _b, _c, _d;
+        var nextTabs = ((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.extendedTabs) !== null && _b !== void 0 ? _b : []).map(function (eachTab) {
+            return eachTab.name === tabName
+                ? __assign(__assign({}, eachTab), { chartSettings: charts }) : eachTab;
+        });
+        (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.onChangeTabs) === null || _d === void 0 ? void 0 : _d.call(_c, nextTabs);
+    };
+    // INFO: the other space's own Data Template, narrowed to the rows that point
+    // at this record and read-only. Without a schema endpoint it carries no tabs
+    // of its own, and a picked row opens in place instead of navigating away, so
+    // this record's tabs stay put.
+    var renderRelatedList = function (source, query, openId, onOpen) {
+        var _a, _b, _c;
+        return (react_1.default.createElement(exports.DataTemplate, { title: "", description: "", type: openId ? "read" : "list", id: openId, collectionId: source.collectionId, model: source.schema, localURLEndpoint: props.localURLEndpoint, devSettings: __assign(__assign({}, props.devSettings), { schemaEndpoint: "" }), lib: props.lib, organise: {
+                darkMode: (_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode,
+                darkModeBg: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.darkModeBg,
+                breadcrumbType: "hidden",
+                handleNavigate: function (type, selectedId) {
+                    return onOpen(type === "read" && selectedId ? selectedId : "");
+                },
+            }, bareSettings: {
+                bareListFilterQuery: query,
+                bareNewDTW: (_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareNewDTW,
+            } }));
+    };
     var renderAddMathColumn = function (id, onClose) {
         var _a, _b, _c;
         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 }));
@@ -9033,14 +9131,31 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     // INFO: `hidden` keeps the markers out of space-y spacing
     var renderSavedViews = function () {
-        var _a;
+        var _a, _b, _c, _d, _e, _f;
         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 currentState = (0, viewStatePersistence_1.handlePickViewState)(handleBuildViewSnapshot());
+        // INFO: compared in a shape both sides share — a stored order is kept to
+        // the columns that still exist, with new ones after in model order, and
+        // hides only count where a view can apply them (schema-hide mode)
+        var modelIds = ((_a = props.model) !== null && _a !== void 0 ? _a : []).map(function (eachColumn) { return eachColumn.id; });
+        var handleComparable = function (state) {
+            var _a;
+            var kept = ((_a = state.columnOrder) !== null && _a !== void 0 ? _a : []).filter(function (eachId) {
+                return modelIds.includes(eachId);
+            });
+            return __assign(__assign({}, state), { columnOrder: __spreadArray(__spreadArray([], kept, true), modelIds.filter(function (eachId) { return !kept.includes(eachId); }), true), hiddenColumnIds: isSchemaHideMode ? state.hiddenColumnIds : undefined });
+        };
+        var handleIsOnState = function (state) {
+            return (0, viewStatePersistence_1.handleIsSameViewState)(handleComparable(currentState), handleComparable((0, viewStatePersistence_1.handlePickViewState)(handleResolveViewState(state))));
+        };
+        var isModified = !!activeView && !handleIsOnState(activeView.state);
+        var defaultViewId = (_c = (_b = props.organise) === null || _b === void 0 ? void 0 : _b.defaultSavedViewId) !== null && _c !== void 0 ? _c : null;
+        var canStarViews = !!((_d = props.organise) === null || _d === void 0 ? void 0 : _d.onChangeDefaultSavedViewId);
+        var canSaveViews = !isAppViews || !!((_e = props.organise) === null || _e === void 0 ? void 0 : _e.onChangeSharedViews);
+        var darkMode = (_f = props.organise) === null || _f === void 0 ? void 0 : _f.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"
@@ -9062,8 +9177,17 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     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.id === defaultViewId && !canStarViews ? "★ " : "",
                         eachView.name,
                         eachView.id === (activeView === null || activeView === void 0 ? void 0 : activeView.id) && isModified ? " •" : ""),
+                    canStarViews && (react_1.default.createElement("button", { type: "button", "aria-label": eachView.id === defaultViewId
+                            ? "Stop opening on ".concat(eachView.name)
+                            : "Open on ".concat(eachView.name, " for everyone"), "data-testid": "dtw-saved-view-star-".concat(eachView.id), className: eachView.id === defaultViewId
+                            ? "text-yellow-500"
+                            : "text-gray-400 hover:text-yellow-500", onClick: function () {
+                            var _a, _b;
+                            return (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeDefaultSavedViewId) === null || _b === void 0 ? void 0 : _b.call(_a, eachView.id === defaultViewId ? null : eachView.id);
+                        } }, eachView.id === defaultViewId ? "★" : "☆")),
                     !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" })))));
             }),
@@ -9071,7 +9195,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 "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")) : (
+            !canSaveViews ? null : 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) {
@@ -9098,7 +9222,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         renderTabContent(tabs, dataType, requestedViewType),
         react_1.default.createElement("span", { ref: scrollScopeEndRef, hidden: true, "aria-hidden": "true" }))); };
     var renderTabContent = function (tabs, dataType, requestedViewType) {
-        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;
+        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;
         var matchedTab = tabs.find(function (eachTab) { return eachTab.id === requestedViewType; });
         /**
          * INFO: a list tab must not supply the content of a read view. The selected
@@ -10017,6 +10141,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
                     } }));
             }
+            else if (selectedTabData.viewType === "chart") {
+                return (react_1.default.createElement(chartView_1.ChartView, { charts: (_60 = selectedTabData.chartSettings) !== null && _60 !== void 0 ? _60 : [], structure: structure, collectionId: props.collectionId, devSettings: props.devSettings, filterQuery: (_61 = renderImpSearchFilterConditions()) !== null && _61 !== void 0 ? _61 : [], editable: isEditor, darkMode: (_62 = props.organise) === null || _62 === void 0 ? void 0 : _62.darkMode, darkModeBg: (_63 = props.organise) === null || _63 === void 0 ? void 0 : _63.darkModeBg, onChangeCharts: ((_64 = props.organise) === null || _64 === void 0 ? void 0 : _64.onChangeTabs)
+                        ? function (charts) {
+                            return handleChangeTabCharts(selectedTabData.name, charts);
+                        }
+                        : undefined }));
+            }
             else if (selectedTabData.renderComp) {
                 return react_1.default.createElement(react_1.default.Fragment, null, selectedTabData.renderComp());
             }
@@ -10142,7 +10273,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         } }))))));
         }
         else if (addTabModal) {
-            return (react_1.default.createElement(settingsModal_1.TabModal, { type: resolvedType, tabs: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.extendedTabs, onChangeTabs: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.onChangeTabs, model: structure, renderReferenceLabelOptions: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.renderReferenceLabelOptions, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.TabModal, { type: resolvedType, tabs: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.extendedTabs, onChangeTabs: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.onChangeTabs, model: structure, collectionId: props.collectionId, renderReferenceLabelOptions: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.renderReferenceLabelOptions, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
@@ -10497,7 +10628,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_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 () {
+        ((_77 = (_76 = props.renderSettings) === null || _76 === void 0 ? void 0 : _76.renderLoadingUI) === null || _77 === void 0 ? void 0 : _77.call(_76)) && loading ? ((_78 = props.renderSettings) === null || _78 === void 0 ? void 0 : _78.renderLoadingUI()) : (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, maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
                 var _a, _b;
                 if (loading)
                     return;
@@ -10508,7 +10639,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: (_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 () {
+        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, 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];
@@ -10524,19 +10655,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: (_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 () {
+        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, 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: (_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 () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_85 = props.organise) === null || _85 === void 0 ? void 0 : _85.darkMode, darkModeBg: (_86 = props.organise) === null || _86 === void 0 ? void 0 : _86.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: (_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 () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_87 = props.organise) === null || _87 === void 0 ? void 0 : _87.darkMode, darkModeBg: (_88 = props.organise) === null || _88 === void 0 ? void 0 : _88.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: (_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 () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_89 = props.organise) === null || _89 === void 0 ? void 0 : _89.darkMode, darkModeBg: (_90 = props.organise) === null || _90 === void 0 ? void 0 : _90.darkModeBg, title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
                 var _a, _b;
                 if (props.space)
                     return (react_1.default.createElement(authModal_1.AuthModal, { space: props.space, userId: (_a = props.id) !== null && _a !== void 0 ? _a : "", client: (_b = props.lib) === null || _b === void 0 ? void 0 : _b.axios, type: selectedAuthMethod, authMethods: authMethods, onComplete: handleAuthComplete }));
@@ -10544,7 +10675,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }, onClose: function () {
                 setSelectedAuthMethod("");
             } }),
-        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 () {
+        isActivityLog && (react_1.default.createElement(modal_1.Modal, { darkMode: (_91 = props.organise) === null || _91 === void 0 ? void 0 : _91.darkMode, darkModeBg: (_92 = props.organise) === null || _92 === void 0 ? void 0 : _92.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