blixify-ui-web 1.2.60 → 1.2.64

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

@@ -108,6 +108,7 @@ var calendar_1 = require("../../display/calendar");
 var detailList_1 = require("../../display/detailList");
 var emptyState_1 = require("../../display/emptyState");
 var feeds_1 = require("../../display/feeds");
+var newFeeds_1 = require("../../display/newFeeds");
 var grid_1 = require("../../display/grid");
 var kanban_1 = require("../../display/kanban");
 var list_1 = require("../../display/list");
@@ -147,6 +148,7 @@ var authModal_1 = require("./authModal");
 var dataStateModel_1 = require("./dataStateModel");
 var indexedDb_1 = require("./indexedDb");
 var socket_1 = require("./socket");
+var newPagination_1 = require("../../display/newPagination");
 var pagination_1 = require("./pagination");
 var referenceModal_1 = require("./referenceModal");
 var settingsModal_1 = require("./settingsModal");
@@ -166,8 +168,20 @@ var handleGetWriteErrorMessage = function (response) {
         return response.data.err;
     return "Please contact our administrator for assistance or try your request again later. We apologize for any inconvenience";
 };
+// INFO: apps hide the library's action buttons by returning an empty fragment
+// from bareUpdateActionComponent — an empty fragment must not leave an empty
+// floating bar behind
+var handleIsEmptyElement = function (element) {
+    var _a;
+    return element === undefined ||
+        element === null ||
+        element === false ||
+        (react_1.default.isValidElement(element) &&
+            element.type === react_1.default.Fragment &&
+            !((_a = element.props) === null || _a === void 0 ? void 0 : _a.children));
+};
 exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50;
+    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 intialiseDefaultFilterValues = function () {
         var _a;
         var initialFilterSearch = {};
@@ -228,67 +242,75 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             initialFilterReferenceDate: initialFilterReferenceDate,
         };
     };
-    var _51 = intialiseDefaultFilterValues(), initialFilterSearch = _51.initialFilterSearch, initialFilterSearchParams = _51.initialFilterSearchParams, initialFilterSelection = _51.initialFilterSelection, initialFilterReference = _51.initialFilterReference, initialFilterReferenceDate = _51.initialFilterReferenceDate;
+    var _65 = intialiseDefaultFilterValues(), initialFilterSearch = _65.initialFilterSearch, initialFilterSearchParams = _65.initialFilterSearchParams, initialFilterSelection = _65.initialFilterSelection, initialFilterReference = _65.initialFilterReference, initialFilterReferenceDate = _65.initialFilterReferenceDate;
     // INFO: Persist view state hook — handles storage read/write for filter/sort/column state
-    var _52 = (0, viewStatePersistence_1.usePersistedViewState)({
+    var _66 = (0, viewStatePersistence_1.usePersistedViewState)({
         mode: (_a = props.organise) === null || _a === void 0 ? void 0 : _a.persistViewState,
         collectionId: props.collectionId,
         uniqueLabel: props.uniqueLabel,
         type: props.type,
-    }), persistedState = _52.persistedState, isPersistEnabled = _52.isEnabled, handleSaveView = _52.handleSaveView;
-    var _53 = (0, react_1.useState)(false), loading = _53[0], setLoading = _53[1];
-    var _54 = (0, react_1.useState)(), notification = _54[0], setNotification = _54[1];
+    }), persistedState = _66.persistedState, isPersistEnabled = _66.isEnabled, handleSaveView = _66.handleSaveView;
+    var _67 = (0, react_1.useState)(false), loading = _67[0], setLoading = _67[1];
+    var _68 = (0, react_1.useState)(), notification = _68[0], setNotification = _68[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 () {
+        if (!(notification === null || notification === void 0 ? void 0 : notification.type))
+            return;
+        var timer = setTimeout(function () { return setNotification(null); }, 4000);
+        return function () { return clearTimeout(timer); };
+    }, [notification]);
     //INFO : Used by List
-    var _55 = (0, react_1.useState)((_b = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _b !== void 0 ? _b : initialFilterSearch), filterSearch = _55[0], setFilterSearch = _55[1];
-    var _56 = (0, react_1.useState)((_c = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _c !== void 0 ? _c : initialFilterSearchParams), filterSearchParams = _56[0], setFilterSearchParams = _56[1];
-    var _57 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _d !== void 0 ? _d : initialFilterSelection), filterSelection = _57[0], setFilterSelection = _57[1];
-    var _58 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _e !== void 0 ? _e : initialFilterReference), filterReference = _58[0], setFilterReference = _58[1];
-    var _59 = (0, react_1.useState)({}), filterReferenceSearch = _59[0], setFilterReferenceSearch = _59[1];
-    var _60 = (0, react_1.useState)({}), filterReferenceList = _60[0], setFilterReferenceList = _60[1];
-    var _61 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
+    var _69 = (0, react_1.useState)((_b = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _b !== void 0 ? _b : initialFilterSearch), filterSearch = _69[0], setFilterSearch = _69[1];
+    var _70 = (0, react_1.useState)((_c = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _c !== void 0 ? _c : initialFilterSearchParams), filterSearchParams = _70[0], setFilterSearchParams = _70[1];
+    var _71 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _d !== void 0 ? _d : initialFilterSelection), filterSelection = _71[0], setFilterSelection = _71[1];
+    var _72 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _e !== void 0 ? _e : initialFilterReference), filterReference = _72[0], setFilterReference = _72[1];
+    var _73 = (0, react_1.useState)({}), filterReferenceSearch = _73[0], setFilterReferenceSearch = _73[1];
+    var _74 = (0, react_1.useState)({}), filterReferenceList = _74[0], setFilterReferenceList = _74[1];
+    var _75 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
         ? (0, viewStatePersistence_1.parseDateFilterState)(persistedState.filterReferenceDate)
-        : initialFilterReferenceDate), filterReferenceDate = _61[0], setFilterReferenceDate = _61[1];
-    var _62 = (0, react_1.useState)(true), tableLoading = _62[0], setTableLoading = _62[1];
-    var _63 = (0, react_1.useState)(""), cursor = _63[0], setCursor = _63[1];
-    var _64 = (0, react_1.useState)(""), lastCursor = _64[0], setLastCursor = _64[1];
-    var _65 = (0, react_1.useState)([]), tableData = _65[0], setTableData = _65[1];
-    var _66 = (0, react_1.useState)([]), spaceTableData = _66[0], setSpaceTableData = _66[1];
-    var _67 = (0, react_1.useState)(0), size = _67[0], setSize = _67[1];
-    var _68 = (0, react_1.useState)((_h = (_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _f !== void 0 ? _f : (_g = props.organise) === null || _g === void 0 ? void 0 : _g.pageIndex) !== null && _h !== void 0 ? _h : 0), pageIndex = _68[0], setPageIndex = _68[1];
-    var _69 = (0, react_1.useState)([]), selectedIds = _69[0], setSelectedIds = _69[1];
-    var _70 = (0, react_1.useState)(false), selectAll = _70[0], setSelectAll = _70[1];
-    var _71 = (0, react_1.useState)(""), deletePasscode = _71[0], setDeletePasscode = _71[1];
-    var _72 = (0, react_1.useState)(""), deletePasscodeInput = _72[0], setDeletePasscodeInput = _72[1];
-    var _73 = (0, react_1.useState)(""), deleteFeedId = _73[0], setDeleteFeedId = _73[1];
+        : initialFilterReferenceDate), filterReferenceDate = _75[0], setFilterReferenceDate = _75[1];
+    var _76 = (0, react_1.useState)(true), tableLoading = _76[0], setTableLoading = _76[1];
+    var _77 = (0, react_1.useState)(""), cursor = _77[0], setCursor = _77[1];
+    var _78 = (0, react_1.useState)(""), lastCursor = _78[0], setLastCursor = _78[1];
+    var _79 = (0, react_1.useState)([]), tableData = _79[0], setTableData = _79[1];
+    var _80 = (0, react_1.useState)([]), spaceTableData = _80[0], setSpaceTableData = _80[1];
+    var _81 = (0, react_1.useState)(0), size = _81[0], setSize = _81[1];
+    var _82 = (0, react_1.useState)((_h = (_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _f !== void 0 ? _f : (_g = props.organise) === null || _g === void 0 ? void 0 : _g.pageIndex) !== null && _h !== void 0 ? _h : 0), pageIndex = _82[0], setPageIndex = _82[1];
+    var _83 = (0, react_1.useState)([]), selectedIds = _83[0], setSelectedIds = _83[1];
+    var _84 = (0, react_1.useState)(false), selectAll = _84[0], setSelectAll = _84[1];
+    var _85 = (0, react_1.useState)(""), deletePasscode = _85[0], setDeletePasscode = _85[1];
+    var _86 = (0, react_1.useState)(""), deletePasscodeInput = _86[0], setDeletePasscodeInput = _86[1];
+    var _87 = (0, react_1.useState)(""), deleteFeedId = _87[0], setDeleteFeedId = _87[1];
     //INFO : Used by List Organise
-    var _74 = (0, react_1.useState)(false), sortModal = _74[0], setSortModal = _74[1];
-    var _75 = (0, react_1.useState)(false), filterModal = _75[0], setFilterModal = _75[1];
+    var _88 = (0, react_1.useState)(false), sortModal = _88[0], setSortModal = _88[1];
+    var _89 = (0, react_1.useState)(false), filterModal = _89[0], setFilterModal = _89[1];
     // INFO: Internal sort state that overrides props.organise?.sort when
     // persistViewState is enabled and a persisted sort exists
-    var _76 = (0, react_1.useState)((_j = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _j !== void 0 ? _j : undefined), persistedSort = _76[0], setPersistedSort = _76[1];
-    var _77 = (0, react_1.useState)(false), filterDraft = _77[0], setFilterDraft = _77[1];
-    var _78 = (0, react_1.useState)(false), addTabModal = _78[0], setAddTabModal = _78[1];
-    var _79 = (0, react_1.useState)(false), overviewModal = _79[0], setOverviewModal = _79[1];
+    var _90 = (0, react_1.useState)((_j = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _j !== void 0 ? _j : undefined), persistedSort = _90[0], setPersistedSort = _90[1];
+    var _91 = (0, react_1.useState)(false), filterDraft = _91[0], setFilterDraft = _91[1];
+    var _92 = (0, react_1.useState)(false), addTabModal = _92[0], setAddTabModal = _92[1];
+    var _93 = (0, react_1.useState)(false), overviewModal = _93[0], setOverviewModal = _93[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 _80 = (0, react_1.useState)(function () {
+    var _94 = (0, react_1.useState)(function () {
         var _a, _b;
         return (0, listModule_1.renderSelectedRefreshTab)(props.localURLEndpoint, props.type, props.collectionId, props.id, (_a = props.organise) === null || _a === void 0 ? void 0 : _a.extendedTabs, (_b = props.organise) === null || _b === void 0 ? void 0 : _b.viewId);
-    }), selectedTab = _80[0], setSelectedTab = _80[1];
-    var _81 = (0, react_1.useState)("dayGridMonth"), calendarView = _81[0], setCalendarView = _81[1];
+    }), selectedTab = _94[0], setSelectedTab = _94[1];
+    var _95 = (0, react_1.useState)("dayGridMonth"), calendarView = _95[0], setCalendarView = _95[1];
     // INFO: bareNewDTW calendar viewSwitch mode — drives the NewCalendar variant
     // (calendarView above drives the matching range query)
-    var _82 = (0, react_1.useState)("month"), newCalendarViewMode = _82[0], setNewCalendarViewMode = _82[1];
-    var _83 = (0, react_1.useState)(new Date()), calendarTabMonth = _83[0], setCalendarTabMonth = _83[1];
-    var _84 = (0, react_1.useState)(true), kanbanDroppable = _84[0], setKanbanDroppable = _84[1];
-    var _85 = (0, react_1.useState)([]), kanbanOptions = _85[0], setKanbanOptions = _85[1];
-    var _86 = (0, react_1.useState)(false), queryForm = _86[0], setQueryForm = _86[1];
-    var _87 = (0, react_1.useState)(false), batchUpdateModal = _87[0], setBatchUpdateModal = _87[1];
-    var _88 = (0, react_1.useState)({
+    var _96 = (0, react_1.useState)("month"), newCalendarViewMode = _96[0], setNewCalendarViewMode = _96[1];
+    var _97 = (0, react_1.useState)(new Date()), calendarTabMonth = _97[0], setCalendarTabMonth = _97[1];
+    var _98 = (0, react_1.useState)(true), kanbanDroppable = _98[0], setKanbanDroppable = _98[1];
+    var _99 = (0, react_1.useState)([]), kanbanOptions = _99[0], setKanbanOptions = _99[1];
+    var _100 = (0, react_1.useState)(false), queryForm = _100[0], setQueryForm = _100[1];
+    var _101 = (0, react_1.useState)(false), batchUpdateModal = _101[0], setBatchUpdateModal = _101[1];
+    var _102 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _88[0], setBatchUpdateData = _88[1];
-    var _89 = (0, react_1.useState)(function () {
+    }), batchUpdateData = _102[0], setBatchUpdateData = _102[1];
+    var _103 = (0, react_1.useState)(function () {
         var baseModel = (props === null || props === void 0 ? void 0 : props.model) || [];
         if (!persistedState)
             return baseModel;
@@ -314,8 +336,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             });
         }
         return model;
-    }), structure = _89[0], setStructure = _89[1];
-    var _90 = (0, react_1.useState)(((_k = props === null || props === void 0 ? void 0 : props.organise) === null || _k === void 0 ? void 0 : _k.additionalQuery) || []), additionalQuery = _90[0], setAdditionalQuery = _90[1];
+    }), structure = _103[0], setStructure = _103[1];
+    var _104 = (0, react_1.useState)(((_k = props === null || props === void 0 ? void 0 : props.organise) === null || _k === void 0 ? void 0 : _k.additionalQuery) || []), additionalQuery = _104[0], setAdditionalQuery = _104[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 = [
@@ -326,105 +348,105 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             value: undefined,
         },
     ];
-    var _91 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _105 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFilters = _91[0], setFlexFilters = _91[1];
+        : defaultFlexFilterRow), flexFilters = _105[0], setFlexFilters = _105[1];
     // INFO: Debounced version of flexFilters used by renderImpSearchFilterConditions
     // to prevent API calls on every keystroke when typing in value inputs
-    var _92 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _106 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFiltersDebounced = _92[0], setFlexFiltersDebounced = _92[1];
-    var _93 = (0, react_1.useState)({}), flexFilterReferenceOptions = _93[0], setFlexFilterReferenceOptions = _93[1];
-    var _94 = (0, react_1.useState)({}), flexFilterReferenceSearch = _94[0], setFlexFilterReferenceSearch = _94[1];
-    var _95 = (0, react_1.useState)(false), flexFilterModalOpen = _95[0], setFlexFilterModalOpen = _95[1];
+        : defaultFlexFilterRow), flexFiltersDebounced = _106[0], setFlexFiltersDebounced = _106[1];
+    var _107 = (0, react_1.useState)({}), flexFilterReferenceOptions = _107[0], setFlexFilterReferenceOptions = _107[1];
+    var _108 = (0, react_1.useState)({}), flexFilterReferenceSearch = _108[0], setFlexFilterReferenceSearch = _108[1];
+    var _109 = (0, react_1.useState)(false), flexFilterModalOpen = _109[0], setFlexFilterModalOpen = _109[1];
     // INFO: Columns the end user chose to hide (organise.hideColumnEnabled).
     // 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 _96 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _l !== void 0 ? _l : []), userHiddenColumnIds = _96[0], setUserHiddenColumnIds = _96[1];
+    var _110 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _l !== void 0 ? _l : []), userHiddenColumnIds = _110[0], setUserHiddenColumnIds = _110[1];
     //INFO : Used by Auth
-    var _97 = (0, react_1.useState)({
+    var _111 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
         create: false,
-    }), authMethods = _97[0], setAuthMethods = _97[1];
-    var _98 = (0, react_1.useState)(""), selectedAuthMethod = _98[0], setSelectedAuthMethod = _98[1];
+    }), authMethods = _111[0], setAuthMethods = _111[1];
+    var _112 = (0, react_1.useState)(""), selectedAuthMethod = _112[0], setSelectedAuthMethod = _112[1];
     // INFO: Used by Activity Log
-    var _99 = (0, react_1.useState)(false), activityModal = _99[0], setActivityModal = _99[1];
-    var _100 = (0, react_1.useState)(""), activityId = _100[0], setActivityId = _100[1];
+    var _113 = (0, react_1.useState)(false), activityModal = _113[0], setActivityModal = _113[1];
+    var _114 = (0, react_1.useState)(""), activityId = _114[0], setActivityId = _114[1];
     //INFO : Used by Export
-    var _101 = (0, react_1.useState)(null), csvFile = _101[0], setCSVFile = _101[1];
-    var _102 = (0, react_1.useState)([]), csvFileData = _102[0], setCSVFileData = _102[1];
-    var _103 = (0, react_1.useState)(0), stepCSVIndex = _103[0], setStepCSVIndex = _103[1];
-    var _104 = (0, react_1.useState)({}), listCSVMapAttribute = _104[0], setListCSVMapAttribute = _104[1];
-    var _105 = (0, react_1.useState)({}), listCSVObjAttribute = _105[0], setListCSVObjAttribute = _105[1];
-    var _106 = (0, react_1.useState)([]), csvAPIAttribute = _106[0], setCSVAPIAttribute = _106[1];
-    var _107 = (0, react_1.useState)(((_m = props.devSettings.currentUser) === null || _m === void 0 ? void 0 : _m.userEmail) || ""), exportCSVEmail = _107[0], setExportCSVEmail = _107[1];
-    var _108 = (0, react_1.useState)(((_p = (_o = props.organise) === null || _o === void 0 ? void 0 : _o.exportSettings) === null || _p === void 0 ? void 0 : _p.defaultExportPDFName) || ""), exportPDFTitle = _108[0], setExportPDFTitle = _108[1];
-    var _109 = (0, react_1.useState)(false), exportPDFLoading = _109[0], setExportPDFLoading = _109[1];
-    var _110 = (0, react_1.useState)(false), exportReadPDFLoading = _110[0], setExportReadPDFLoading = _110[1];
-    var _111 = (0, react_1.useState)((_s = (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.sumColumnId) !== null && _s !== void 0 ? _s : []), exportSumAttributeIds = _111[0], setExportSumAttributeIds = _111[1];
-    var _112 = (0, react_1.useState)((_v = (_u = (_t = props.organise) === null || _t === void 0 ? void 0 : _t.exportSettings) === null || _u === void 0 ? void 0 : _u.hideSubItems) !== null && _v !== void 0 ? _v : false), hideSubItems = _112[0], setHideSubItems = _112[1];
-    var _113 = (0, react_1.useState)([]), importTableData = _113[0], setImportTableData = _113[1];
-    var _114 = (0, react_1.useState)([]), queryList = _114[0], setQueryList = _114[1];
-    var _115 = (0, react_1.useState)(undefined), allQueryList = _115[0], setAllQueryList = _115[1];
-    var _116 = (0, react_1.useState)(-1), queryIndex = _116[0], setQueryIndex = _116[1];
-    var _117 = (0, react_1.useState)((_w = props.organise) === null || _w === void 0 ? void 0 : _w.groupBy), groupId = _117[0], setGroupId = _117[1];
-    var _118 = (0, react_1.useState)(""), readTabSection = _118[0], setReadTabSection = _118[1];
-    var _119 = (0, react_1.useState)(false), readFloatingNav = _119[0], setReadFloatingNav = _119[1];
+    var _115 = (0, react_1.useState)(null), csvFile = _115[0], setCSVFile = _115[1];
+    var _116 = (0, react_1.useState)([]), csvFileData = _116[0], setCSVFileData = _116[1];
+    var _117 = (0, react_1.useState)(0), stepCSVIndex = _117[0], setStepCSVIndex = _117[1];
+    var _118 = (0, react_1.useState)({}), listCSVMapAttribute = _118[0], setListCSVMapAttribute = _118[1];
+    var _119 = (0, react_1.useState)({}), listCSVObjAttribute = _119[0], setListCSVObjAttribute = _119[1];
+    var _120 = (0, react_1.useState)([]), csvAPIAttribute = _120[0], setCSVAPIAttribute = _120[1];
+    var _121 = (0, react_1.useState)(((_m = props.devSettings.currentUser) === null || _m === void 0 ? void 0 : _m.userEmail) || ""), exportCSVEmail = _121[0], setExportCSVEmail = _121[1];
+    var _122 = (0, react_1.useState)(((_p = (_o = props.organise) === null || _o === void 0 ? void 0 : _o.exportSettings) === null || _p === void 0 ? void 0 : _p.defaultExportPDFName) || ""), exportPDFTitle = _122[0], setExportPDFTitle = _122[1];
+    var _123 = (0, react_1.useState)(false), exportPDFLoading = _123[0], setExportPDFLoading = _123[1];
+    var _124 = (0, react_1.useState)(false), exportReadPDFLoading = _124[0], setExportReadPDFLoading = _124[1];
+    var _125 = (0, react_1.useState)((_s = (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.sumColumnId) !== null && _s !== void 0 ? _s : []), exportSumAttributeIds = _125[0], setExportSumAttributeIds = _125[1];
+    var _126 = (0, react_1.useState)((_v = (_u = (_t = props.organise) === null || _t === void 0 ? void 0 : _t.exportSettings) === null || _u === void 0 ? void 0 : _u.hideSubItems) !== null && _v !== void 0 ? _v : false), hideSubItems = _126[0], setHideSubItems = _126[1];
+    var _127 = (0, react_1.useState)([]), importTableData = _127[0], setImportTableData = _127[1];
+    var _128 = (0, react_1.useState)([]), queryList = _128[0], setQueryList = _128[1];
+    var _129 = (0, react_1.useState)(undefined), allQueryList = _129[0], setAllQueryList = _129[1];
+    var _130 = (0, react_1.useState)(-1), queryIndex = _130[0], setQueryIndex = _130[1];
+    var _131 = (0, react_1.useState)((_w = props.organise) === null || _w === void 0 ? void 0 : _w.groupBy), groupId = _131[0], setGroupId = _131[1];
+    var _132 = (0, react_1.useState)(""), readTabSection = _132[0], setReadTabSection = _132[1];
+    var _133 = (0, react_1.useState)(false), readFloatingNav = _133[0], setReadFloatingNav = _133[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _120 = (0, react_1.useState)(false), modalVisible = _120[0], setModalVisible = _120[1];
-    var _121 = (0, react_1.useState)(false), deleteModal = _121[0], setDeleteModal = _121[1];
-    var _122 = (0, react_1.useState)(false), excelModal = _122[0], setExcelModal = _122[1];
-    var _123 = (0, react_1.useState)(false), exportExcel = _123[0], setExportExcel = _123[1];
-    var _124 = (0, react_1.useState)(""), exportType = _124[0], setExportType = _124[1];
-    var _125 = (0, react_1.useState)(false), exportQR = _125[0], setExportQR = _125[1];
-    var _126 = (0, react_1.useState)(function () {
+    var _134 = (0, react_1.useState)(false), modalVisible = _134[0], setModalVisible = _134[1];
+    var _135 = (0, react_1.useState)(false), deleteModal = _135[0], setDeleteModal = _135[1];
+    var _136 = (0, react_1.useState)(false), excelModal = _136[0], setExcelModal = _136[1];
+    var _137 = (0, react_1.useState)(false), exportExcel = _137[0], setExportExcel = _137[1];
+    var _138 = (0, react_1.useState)(""), exportType = _138[0], setExportType = _138[1];
+    var _139 = (0, react_1.useState)(false), exportQR = _139[0], setExportQR = _139[1];
+    var _140 = (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 = _126[0], setActiveTab = _126[1];
-    var _127 = (0, react_1.useState)(false), signatureSigning = _127[0], setSignatureSigning = _127[1];
-    var _128 = (0, react_1.useState)({}), selectedData = _128[0], setSelectedData = _128[1];
-    var _129 = (0, react_1.useState)(""), selectedObjectStructureId = _129[0], setSelectedObjectStructureId = _129[1];
-    var _130 = (0, react_1.useState)(""), selectedObjectId = _130[0], setSelectedObjectId = _130[1];
-    var _131 = (0, react_1.useState)(""), selectedListAddressId = _131[0], setSelectedListAddressId = _131[1];
-    var _132 = (0, react_1.useState)(-1), selectedListAddressIndex = _132[0], setSelectedListAddressIndex = _132[1];
-    var _133 = (0, react_1.useState)({
+    }), activeTab = _140[0], setActiveTab = _140[1];
+    var _141 = (0, react_1.useState)(false), signatureSigning = _141[0], setSignatureSigning = _141[1];
+    var _142 = (0, react_1.useState)({}), selectedData = _142[0], setSelectedData = _142[1];
+    var _143 = (0, react_1.useState)(""), selectedObjectStructureId = _143[0], setSelectedObjectStructureId = _143[1];
+    var _144 = (0, react_1.useState)(""), selectedObjectId = _144[0], setSelectedObjectId = _144[1];
+    var _145 = (0, react_1.useState)(""), selectedListAddressId = _145[0], setSelectedListAddressId = _145[1];
+    var _146 = (0, react_1.useState)(-1), selectedListAddressIndex = _146[0], setSelectedListAddressIndex = _146[1];
+    var _147 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _133[0], setSelectedListAddress = _133[1];
-    var _134 = (0, react_1.useState)({}), selectedObjectData = _134[0], setSelectedObjectData = _134[1];
-    var _135 = (0, react_1.useState)(null), objectCellEdit = _135[0], setObjectCellEdit = _135[1];
-    var _136 = (0, react_1.useState)(false), referenceLoading = _136[0], setReferenceLoading = _136[1];
-    var _137 = (0, react_1.useState)({}), referencesOptions = _137[0], setReferencesOptions = _137[1];
-    var _138 = (0, react_1.useState)({}), referencesDetails = _138[0], setReferencesDetails = _138[1];
-    var _139 = (0, react_1.useState)({}), listReferencesOptions = _139[0], setListReferencesOptions = _139[1];
-    var _140 = (0, react_1.useState)({}), referenceDeleteTableData = _140[0], setReferenceDeleteTableData = _140[1];
-    var _141 = (0, react_1.useState)(0), referenceDeleteIndex = _141[0], setReferenceDeleteIndex = _141[1];
-    var _142 = (0, react_1.useState)({
+    }), selectedListAddress = _147[0], setSelectedListAddress = _147[1];
+    var _148 = (0, react_1.useState)({}), selectedObjectData = _148[0], setSelectedObjectData = _148[1];
+    var _149 = (0, react_1.useState)(null), objectCellEdit = _149[0], setObjectCellEdit = _149[1];
+    var _150 = (0, react_1.useState)(false), referenceLoading = _150[0], setReferenceLoading = _150[1];
+    var _151 = (0, react_1.useState)({}), referencesOptions = _151[0], setReferencesOptions = _151[1];
+    var _152 = (0, react_1.useState)({}), referencesDetails = _152[0], setReferencesDetails = _152[1];
+    var _153 = (0, react_1.useState)({}), listReferencesOptions = _153[0], setListReferencesOptions = _153[1];
+    var _154 = (0, react_1.useState)({}), referenceDeleteTableData = _154[0], setReferenceDeleteTableData = _154[1];
+    var _155 = (0, react_1.useState)(0), referenceDeleteIndex = _155[0], setReferenceDeleteIndex = _155[1];
+    var _156 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _142[0], setReferenceCreationModal = _142[1];
-    var _143 = (0, react_1.useState)({}), referenceModelSchema = _143[0], setReferenceSchema = _143[1];
-    var _144 = (0, react_1.useState)([]), kanbanChecked = _144[0], setKanbanChecked = _144[1];
+    }), referenceCreationModal = _156[0], setReferenceCreationModal = _156[1];
+    var _157 = (0, react_1.useState)({}), referenceModelSchema = _157[0], setReferenceSchema = _157[1];
+    var _158 = (0, react_1.useState)([]), kanbanChecked = _158[0], setKanbanChecked = _158[1];
     //INFO : Offline
-    var _145 = (0, react_1.useState)(0), offlineDataLength = _145[0], setOfflineDataLength = _145[1];
-    var _146 = (0, react_1.useState)(false), offlineModal = _146[0], setOfflineModal = _146[1];
+    var _159 = (0, react_1.useState)(0), offlineDataLength = _159[0], setOfflineDataLength = _159[1];
+    var _160 = (0, react_1.useState)(false), offlineModal = _160[0], setOfflineModal = _160[1];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    var _147 = (0, react_1.useState)(false), isLive = _147[0], setIsLive = _147[1];
-    var _148 = (0, react_1.useState)(false), isLiveOffline = _148[0], setIsLiveOffline = _148[1];
+    var _161 = (0, react_1.useState)(false), isLive = _161[0], setIsLive = _161[1];
+    var _162 = (0, react_1.useState)(false), isLiveOffline = _162[0], setIsLiveOffline = _162[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 _149 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _149[0], setIsNetworkOffline = _149[1];
+    var _163 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _163[0], setIsNetworkOffline = _163[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -462,6 +484,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // overwriting persisted structure with props.model on the first render
     var persistedViewMountedRef = (0, react_1.useRef)(false);
     var formRef = (0, react_1.createRef)();
+    // INFO: a draft written because the user moved to another step is routine —
+    // the toast is reserved for an explicit Save; the ref is read by the draft
+    // notification and reset straight after
+    var silentDraftRef = (0, react_1.useRef)(false);
     var objectFormRef = (0, react_1.createRef)();
     var listAddressFromRef = (0, react_1.createRef)();
     var listAddressInputRef = (0, react_1.createRef)();
@@ -1468,7 +1494,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             switch (_a.label) {
                 case 0:
                     refFields = structure.filter(function (s) {
-                        return (utils_1.REFERENCE_DATA_TYPES.includes(s.type)) &&
+                        return utils_1.REFERENCE_DATA_TYPES.includes(s.type) &&
                             s.referenceSpaceId &&
                             s.referenceLabel;
                     });
@@ -1948,8 +1974,15 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var handleSeedListReferenceOptions = function (details) {
         var seeded = {};
         Object.entries(details !== null && details !== void 0 ? details : {}).forEach(function (_a) {
+            var _b, _c;
             var eachKey = _a[0], eachDocs = _a[1];
-            var model = structure.find(function (eachModel) { return eachModel.id === eachKey; });
+            // INFO: "careExpert.organisationId" points at a reference nested in an
+            // object — resolve its label settings from the object's own structure
+            var _d = eachKey.split("."), objectId = _d[0], subId = _d[1];
+            var model = subId
+                ? (_c = (_b = structure
+                    .find(function (eachModel) { return eachModel.id === objectId; })) === null || _b === void 0 ? void 0 : _b.objectData) === null || _c === void 0 ? void 0 : _c.find(function (eachSub) { return eachSub.id === subId; })
+                : structure.find(function (eachModel) { return eachModel.id === eachKey; });
             if (!model || !Array.isArray(eachDocs))
                 return;
             seeded[eachKey] = eachDocs.map(function (eachDoc) {
@@ -2160,20 +2193,20 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0:
-                                        if (!((utils_1.REFERENCE_DATA_TYPES.includes(eachModel.type)) &&
+                                        if (!(utils_1.REFERENCE_DATA_TYPES.includes(eachModel.type) &&
                                             eachModel.referenceMapColumnId)) return [3 /*break*/, 2];
                                         return [4 /*yield*/, (0, updateModule_1.handleRetrieveObjectReferenceOptions)(eachModel, clonedOptions_1, clonedDetails_1, selectedData, dbModule, devSettings, undefined, undefined, undefined, undefined, props.type === "read")];
                                     case 1:
                                         _a.sent();
                                         _a.label = 2;
                                     case 2:
-                                        if (!((utils_1.OBJECT_DATA_TYPES.includes(eachModel.type)) &&
+                                        if (!(utils_1.OBJECT_DATA_TYPES.includes(eachModel.type) &&
                                             eachModel.objectData)) return [3 /*break*/, 4];
                                         return [4 /*yield*/, Promise.all(eachModel.objectData.map(function (eachObjectData) { return __awaiter(void 0, void 0, void 0, function () {
                                                 return __generator(this, function (_a) {
                                                     switch (_a.label) {
                                                         case 0:
-                                                            if (!((utils_1.REFERENCE_DATA_TYPES.includes(eachObjectData.type)) &&
+                                                            if (!(utils_1.REFERENCE_DATA_TYPES.includes(eachObjectData.type) &&
                                                                 eachObjectData.referenceMapColumnId)) return [3 /*break*/, 2];
                                                             return [4 /*yield*/, (0, updateModule_1.handleRetrieveObjectReferenceOptions)(eachObjectData, clonedOptions_1, clonedDetails_1, selectedData, dbModule, devSettings, eachModel.id, eachModel.type === "listObject", selectedData, undefined, props.type === "read")];
                                                         case 1:
@@ -3024,7 +3057,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 case 1:
                     _a.sent();
                     multiImageAttribute = model.filter(function (eachAttribute) {
-                        return (utils_1.MULTIPLE_ASSET_DATA_TYPES.includes(eachAttribute.type));
+                        return utils_1.MULTIPLE_ASSET_DATA_TYPES.includes(eachAttribute.type);
                     });
                     return [4 /*yield*/, Promise.all(multiImageAttribute.map(function (eachImage) { return __awaiter(void 0, void 0, void 0, function () {
                             var _a, _b, _c, _d;
@@ -4431,15 +4464,19 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _x.sent();
                     _x.label = 37;
                 case 37:
-                    setNotification({
-                        type: true,
-                        title: props.id === "new"
-                            ? "Created Successfully"
-                            : "Updated Successfully",
-                        msg: props.id === "new"
-                            ? "Data sucessfully created"
-                            : "Data sucessfully updated",
-                    });
+                    // INFO: a draft save announces itself (or stays silent on a step
+                    // change) further up — this toast is for a real update only
+                    if (!isDraft) {
+                        setNotification({
+                            type: true,
+                            title: props.id === "new"
+                                ? "Created Successfully"
+                                : "Updated Successfully",
+                            msg: props.id === "new"
+                                ? "Data sucessfully created"
+                                : "Data sucessfully updated",
+                        });
+                    }
                     _x.label = 38;
                 case 38:
                     dataId = res ? id : "";
@@ -4665,11 +4702,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         if (props.id === "new" || !props.id) {
                             (_g = (_f = props.organise) === null || _f === void 0 ? void 0 : _f.handleNavigate) === null || _g === void 0 ? void 0 : _g.call(_f, "update", res, (_h = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.id) !== null && _h !== void 0 ? _h : "general");
                         }
-                        setNotification({
-                            type: true,
-                            title: "Draft Saved",
-                            msg: "Your changes have been saved",
-                        });
+                        if (silentDraftRef.current) {
+                            silentDraftRef.current = false;
+                        }
+                        else {
+                            setNotification({
+                                type: true,
+                                title: "Draft Saved",
+                                msg: "Your changes have been saved",
+                            });
+                        }
                     }
                     else {
                         // INFO: Non-draft (final submit) — reset dirty tracking and rebase baseline.
@@ -4767,7 +4809,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         // INFO: convert raw docs to Option[] format so reference Select
                                         // components receive { key, label, secondaryLabel } as expected
                                         // (mirrors the shape handleRetrieveObjectReferenceOptions builds online)
-                                        if ((utils_1.REFERENCE_DATA_TYPES.includes(eachModel.type)) &&
+                                        if (utils_1.REFERENCE_DATA_TYPES.includes(eachModel.type) &&
                                             eachModel.referenceLabel) {
                                             clonedReferencesOptions_1[eachModel.id] = offlineData.map(function (r) {
                                                 var _a, _b, _c, _d;
@@ -5225,13 +5267,15 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             var selectedModel = structure.find(function (eachModel) {
                                 return eachModel.id === eachValue;
                             });
-                            if ((selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "object" || (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "listObject") {
+                            if ((selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "object" ||
+                                (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "listObject") {
                                 var selectedObjectModel = (_c = selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.objectData) === null || _c === void 0 ? void 0 : _c.find(function (eachModel) {
                                     return eachModel.id === listCSVObjAttribute[eachKey];
                                 });
                                 if ((selectedObjectModel === null || selectedObjectModel === void 0 ? void 0 : selectedObjectModel.type) === "image" ||
                                     (selectedObjectModel === null || selectedObjectModel === void 0 ? void 0 : selectedObjectModel.type) === "file" ||
-                                    (selectedObjectModel === null || selectedObjectModel === void 0 ? void 0 : selectedObjectModel.type) === "multipleImage" || (selectedObjectModel === null || selectedObjectModel === void 0 ? void 0 : selectedObjectModel.type) === "multipleFile") {
+                                    (selectedObjectModel === null || selectedObjectModel === void 0 ? void 0 : selectedObjectModel.type) === "multipleImage" ||
+                                    (selectedObjectModel === null || selectedObjectModel === void 0 ? void 0 : selectedObjectModel.type) === "multipleFile") {
                                     csvList_1.push({
                                         id: (_d = listCSVObjAttribute[eachKey]) !== null && _d !== void 0 ? _d : "",
                                         ori: Number(eachKey),
@@ -5255,7 +5299,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                             else if ((selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "image" ||
                                 (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "file" ||
-                                (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "multipleImage" || (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "multipleFile") {
+                                (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "multipleImage" ||
+                                (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.type) === "multipleFile") {
                                 csvList_1.push({
                                     id: eachValue !== null && eachValue !== void 0 ? eachValue : "",
                                     ori: Number(eachKey),
@@ -6163,7 +6208,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var renderDetailListData = function (model) {
         var detailList = [];
         model
-            .filter(function (eachAttribute) { return !utils_1.NON_DETAIL_LIST_DATA_TYPES.includes(eachAttribute.type); })
+            .filter(function (eachAttribute) {
+            return !utils_1.NON_DETAIL_LIST_DATA_TYPES.includes(eachAttribute.type);
+        })
             .map(function (eachAttribute) {
             var _a, _b, _c, _d, _e, _f;
             var selectedDataKey = Object.keys(selectedData).find(function (eachKey) { return eachKey === eachAttribute.id; });
@@ -6330,7 +6377,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
         var clonedSelectedData = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, false, remainId);
         isListObject.map(function (eachListObject) {
-            var _a, _b;
+            var _a, _b, _c;
             var flexTableRefIndex = props.model
                 .filter(function (model) { return model.type === "listObject" && model.listFlexTable; })
                 .findIndex(function (model) { return model.id === eachListObject.id; });
@@ -6339,6 +6386,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 tabId: eachListObject.tabId,
                 activeTab: activeTab,
                 hasTabAlign: !!hasTabAlign,
+                darkMode: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkMode,
             }));
             return null;
         });
@@ -6431,90 +6479,199 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // INFO: placement is decided by the caller (see isBottom in renderContent), so this only
     // builds the buttons. It previously took an isBottom argument purely to add a top margin
     // to the list's create button when that button was pushed below the table.
-    var renderActionButtons = function (type, hasTabAlign, uniqueTabIds) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    // INFO: the labelled footer of a multi-tab update form — Previous, a step
+    // counter, then the same Save / Submit the header offers and a Continue
+    // button that reuses the bareSaveOnTabChange draft-save. Replaces the bare
+    // chevron icons, which gave no sense of position in a long form.
+    // INFO: bareUpdateActionBottom opts out of the floating pill — a short form
+    // inside a modal reads better with a plain button row than a card inside a
+    // card; tabbed and long forms keep the sticky bar so Submit stays reachable
+    var handleActionBarClassName = function (justifyEnd) {
+        var _a, _b, _c, _d, _e;
+        var layout = "mt-6 flex flex-row items-center gap-2 whitespace-nowrap".concat(justifyEnd ? " justify-end" : "");
+        if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionBottom)
+            return "".concat(layout).concat(((_b = props.organise) === null || _b === void 0 ? void 0 : _b.darkMode) ? " text-white" : "");
+        var surface = ((_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkMode)
+            ? "border-gray-700 ".concat((_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.darkModeBg) !== null && _e !== void 0 ? _e : "bg-gray-900/95", " text-white")
+            : "border-gray-200 bg-white/95";
+        return "sticky bottom-3 z-20 -mx-2 ".concat(layout, " rounded-2xl border ").concat(surface, " px-3 py-2 shadow-lg backdrop-blur sm:mx-0 sm:px-4");
+    };
+    var renderStepBar = function (uniqueTabIds) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var hasTabAlign = ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.tabAlign) || ((_b = props.space) === null || _b === void 0 ? void 0 : _b.tabAlign);
+        if (props.type !== "update")
+            return null;
+        // INFO: navigation only makes sense with more than one tab; the actions
+        // are the same floating bar on every update form
+        var isTabbed = !!hasTabAlign && uniqueTabIds.length > 1;
+        var currentTabIndex = uniqueTabIds.findIndex(function (tabId) { return tabId === (activeTab || ""); });
+        var isFirst = currentTabIndex <= 0;
+        var isLast = currentTabIndex >= uniqueTabIds.length - 1;
+        var handleMoveTab = function (direction) { return __awaiter(void 0, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareSaveOnTabChange)) return [3 /*break*/, 2];
+                        // INFO: the form's save resolves before the request does, so the flag
+                        // is consumed by the notification itself; the timer only covers a save
+                        // that never reaches it (validation stop, network error)
+                        silentDraftRef.current = true;
+                        setTimeout(function () {
+                            silentDraftRef.current = false;
+                        }, 5000);
+                        return [4 /*yield*/, handleFormSaveDraft()];
+                    case 1:
+                        _b.sent();
+                        _b.label = 2;
+                    case 2:
+                        handleUpdateTabId(uniqueTabIds[currentTabIndex + direction]);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        var bareActionComponent = (_e = (_d = (_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareUpdateActionComponent) === null || _d === void 0 ? void 0 : _d.call(_c, selectedData, formRef)) !== null && _e !== void 0 ? _e : undefined;
+        var hasCustomActions = !!bareActionComponent && !handleIsEmptyElement(bareActionComponent);
+        var hasActions = bareActionComponent ? hasCustomActions : true;
+        var showDelete = !!((_f = props.edit) === null || _f === void 0 ? void 0 : _f.deleteBtn) && isEditor && props.id !== "new";
+        if (!isTabbed && !hasActions && !showDelete)
+            return null;
+        return (
+        // INFO: sticky, not fixed — it stays visible on a long tab yet never
+        // covers content that is not the form's own
+        // INFO: one row at every width — a phone keeps the whole bar under
+        // 60px, so it never hides the field being edited. Left cluster is
+        // navigation (Previous · counter · Next), right cluster is actions
+        // (Save · Submit or the caller's own component)
+        react_1.default.createElement("div", { "data-testid": "dtw-step-bar", className: handleActionBarClassName(false) },
+            isTabbed && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "sm:hidden" },
+                    react_1.default.createElement(iconButton_1.IconButton, { testId: "dtw-previous-icon", size: "small", background: "bg-white border border-gray-300 hover:bg-gray-50", icon: react_1.default.createElement(HeroIcons.ChevronLeftIcon, { className: "w-5 h-5 text-gray-700" }), disabled: isFirst, onClick: function () { return handleMoveTab(-1); } })),
+                react_1.default.createElement("div", { className: "hidden sm:block" },
+                    react_1.default.createElement(button_1.Button, { id: "dtw-previous", text: "Previous", type: "light", size: "small", icon: react_1.default.createElement(HeroIcons.ChevronLeftIcon, { className: "w-4 h-4" }), disable: isFirst, onClick: function () { return handleMoveTab(-1); } })),
+                react_1.default.createElement("span", { "data-testid": "dtw-step-counter", className: "text-xs text-gray-500 sm:text-sm" },
+                    react_1.default.createElement("span", { className: "sm:hidden" },
+                        currentTabIndex + 1,
+                        "/",
+                        uniqueTabIds.length),
+                    react_1.default.createElement("span", { className: "hidden sm:inline" },
+                        "Step ",
+                        currentTabIndex + 1,
+                        " of ",
+                        uniqueTabIds.length)),
+                react_1.default.createElement("div", { className: "sm:hidden" },
+                    react_1.default.createElement(iconButton_1.IconButton, { testId: "dtw-next-icon", size: "small", background: isLast
+                            ? "bg-gray-100 border border-gray-200"
+                            : "bg-white border border-gray-300 hover:bg-gray-50", icon: react_1.default.createElement(HeroIcons.ChevronRightIcon, { className: "w-5 h-5 ".concat(isLast ? "text-gray-400" : "text-gray-700") }), disabled: isLast, onClick: function () { return handleMoveTab(1); } })),
+                react_1.default.createElement("div", { className: "hidden sm:block" },
+                    react_1.default.createElement(button_1.Button, { id: "dtw-continue", text: "Next", type: "light", size: "small", disable: isLast, onClick: function () { return handleMoveTab(1); } })))),
+            react_1.default.createElement("div", { className: "flex-1" }),
+            react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
+                ((_g = props.edit) === null || _g === void 0 ? void 0 : _g.deleteBtn) && isEditor && props.id !== "new" && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { className: "sm:hidden" },
+                        react_1.default.createElement(iconButton_1.IconButton, { testId: "dtw-delete-icon", size: "small", background: "bg-white border border-red-200 hover:bg-red-50", icon: react_1.default.createElement(HeroIcons.TrashIcon, { className: "w-5 h-5 text-red-600" }), onClick: function () {
+                                setDeleteModal(true);
+                            } })),
+                    react_1.default.createElement("div", { className: "hidden sm:block" },
+                        react_1.default.createElement(button_1.Button, { id: "dtw-delete", text: "Delete", type: "light", size: "small", className: "!text-red-600", onClick: function () {
+                                setDeleteModal(true);
+                            } })))),
+                hasCustomActions && bareActionComponent,
+                !bareActionComponent && ((_h = props.edit) === null || _h === void 0 ? void 0 : _h.enableUpdateDraft) && (react_1.default.createElement(button_1.Button, { id: "dtw-step-save", text: "Save", type: "light", size: "small", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, handleFormSaveDraft()];
+                                case 1:
+                                    _a.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); } })),
+                !bareActionComponent && (react_1.default.createElement(button_1.Button, { id: "dtw-step-submit", text: "Submit", type: "normal", size: "small", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, handleFormSubmit()];
+                                case 1:
+                                    _a.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); } })))));
+    };
+    // INFO: the read view's floating bar — the same pill as the update form,
+    // carrying Update (or the caller's own component), Export PDF and Log
+    var renderReadBar = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (props.type !== "read")
+            return null;
         var bareActionComponent = (_c = (_b = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionComponent) === null || _b === void 0 ? void 0 : _b.call(_a, selectedData, formRef)) !== null && _c !== void 0 ? _c : undefined;
-        if (type === "read") {
-            return (react_1.default.createElement("div", { className: "flex flex-row mt-3 sm:ml-3 sm:mt-0" },
-                bareActionComponent,
-                ((_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.exportSettings) === null || _e === void 0 ? void 0 : _e.enableExportReadPDF) && (react_1.default.createElement(button_1.Button, { type: "normal", text: "Export PDF", className: "mr-3", onClick: handleExportReadPDF })),
-                isActivityLog && (react_1.default.createElement(button_1.Button, { type: "normal", text: "Log", onClick: function () { return setActivityModal(true); }, className: !bareActionComponent ? "mr-3" : "" })),
-                !bareActionComponent && !((_f = props.edit) === null || _f === void 0 ? void 0 : _f.disabledUpdate) && (react_1.default.createElement("div", { className: "w-xs" }, hasNavigation ? (react_1.default.createElement(button_1.Button, { id: "dtw-update", text: "Update", className: "w-full", type: "normal", onClick: function () {
+        var hasCustomActions = !!bareActionComponent && !handleIsEmptyElement(bareActionComponent);
+        var showUpdate = !bareActionComponent && !((_d = props.edit) === null || _d === void 0 ? void 0 : _d.disabledUpdate);
+        var showExport = !!((_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.exportSettings) === null || _f === void 0 ? void 0 : _f.enableExportReadPDF);
+        var showDelete = !!((_g = props.edit) === null || _g === void 0 ? void 0 : _g.deleteBtn) && isEditor && props.id !== "new";
+        if (!hasCustomActions &&
+            !showUpdate &&
+            !showExport &&
+            !isActivityLog &&
+            !showDelete)
+            return null;
+        return (react_1.default.createElement("div", { "data-testid": "dtw-read-bar", className: handleActionBarClassName(true) },
+            ((_h = props.edit) === null || _h === void 0 ? void 0 : _h.deleteBtn) && isEditor && props.id !== "new" && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "sm:hidden" },
+                    react_1.default.createElement(iconButton_1.IconButton, { testId: "dtw-delete-icon", size: "small", background: "bg-white border border-red-200 hover:bg-red-50", icon: react_1.default.createElement(HeroIcons.TrashIcon, { className: "w-5 h-5 text-red-600" }), onClick: function () {
+                            setDeleteModal(true);
+                        } })),
+                react_1.default.createElement("div", { className: "hidden sm:block" },
+                    react_1.default.createElement(button_1.Button, { id: "dtw-delete", text: "Delete", type: "light", size: "small", className: "!text-red-600", onClick: function () {
+                            setDeleteModal(true);
+                        } })))),
+            showExport && (react_1.default.createElement(button_1.Button, { type: "light", text: "Export PDF", size: "small", onClick: handleExportReadPDF })),
+            isActivityLog && (react_1.default.createElement(button_1.Button, { type: "light", text: "Log", size: "small", onClick: function () { return setActivityModal(true); } })),
+            hasCustomActions && bareActionComponent,
+            showUpdate &&
+                (hasNavigation ? (react_1.default.createElement(button_1.Button, { id: "dtw-update", text: "Update", type: "normal", size: "small", onClick: function () {
                         var _a, _b;
                         (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "update", props.id);
-                    } })) : (react_1.default.createElement(link_1.Link, { className: "w-full", href: "".concat(props.localURLEndpoint, "?data=").concat(props.id, "&type=update&collection=").concat(props.collectionId, "&view=general"), linkType: props.linkType, custom: props.custom },
-                    react_1.default.createElement(button_1.Button, { id: "dtw-update", text: "Update", className: "w-full", type: "normal" }))))),
-                ((_g = props.edit) === null || _g === void 0 ? void 0 : _g.deleteBtn) && (react_1.default.createElement(button_1.Button, { id: "dtw-delete", text: "Delete", className: "w-xs ml-3", type: "danger", onClick: function () {
-                        setDeleteModal(true);
-                    } }))));
+                    } })) : (react_1.default.createElement(link_1.Link, { href: "".concat(props.localURLEndpoint, "?data=").concat(props.id, "&type=update&collection=").concat(props.collectionId, "&view=general"), linkType: props.linkType, custom: props.custom },
+                    react_1.default.createElement(button_1.Button, { id: "dtw-update", text: "Update", type: "normal", size: "small" }))))));
+    };
+    // INFO: tab navigation moved to renderStepBar — the alignment and tab ids
+    // are still accepted so existing call sites stay unchanged
+    // INFO: a tabbed update form has exactly one action bar — the sticky step bar
+    // under the form. Its header row keeps only Delete, a destructive action that
+    // should not sit at the end of a "continue, continue" flow.
+    var renderActionButtons = function (type, _hasTabAlign, _uniqueTabIds) {
+        var _a, _b, _c, _d, _e, _f;
+        var bareActionComponent = (_c = (_b = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionComponent) === null || _b === void 0 ? void 0 : _b.call(_a, selectedData, formRef)) !== null && _c !== void 0 ? _c : undefined;
+        // INFO: every update form carries Save / Submit in the floating bar, so
+        // the header keeps only Delete
+        var isTabbedUpdate = type === "update";
+        if (type === "read") {
+            // INFO: every read-view action, Delete included, lives in the floating bar
+            return null;
         }
         else if (type === "update") {
-            var currentTabIndex_1 = (uniqueTabIds || []).findIndex(function (tabId) { return tabId === (activeTab || ""); });
-            return (react_1.default.createElement("div", { className: "flex flex-row h-fit w-full mt-5 sm:justify-end sm:mt-0" },
-                bareActionComponent ? (bareActionComponent) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    hasTabAlign && (uniqueTabIds || []).length > 1 && (react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(HeroIcons.ChevronLeftIcon, { className: "w-5 h-5 text-primary-500" }), onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
-                            var previousTabId;
-                            var _a;
-                            return __generator(this, function (_b) {
-                                switch (_b.label) {
-                                    case 0:
-                                        if (!(currentTabIndex_1 > 0)) return [3 /*break*/, 3];
-                                        if (!((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareSaveOnTabChange)) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, handleFormSaveDraft()];
-                                    case 1:
-                                        _b.sent();
-                                        _b.label = 2;
-                                    case 2:
-                                        previousTabId = (uniqueTabIds || [])[currentTabIndex_1 - 1];
-                                        handleUpdateTabId(previousTabId);
-                                        _b.label = 3;
-                                    case 3: return [2 /*return*/];
-                                }
-                            });
-                        }); }, disabled: currentTabIndex_1 <= 0, className: "mr-3", background: "bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800" })),
-                    ((_h = props.edit) === null || _h === void 0 ? void 0 : _h.enableUpdateDraft) && (react_1.default.createElement(button_1.Button, { id: "dtw-save", text: "Save", type: "light", className: "w-xs mr-3", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, handleFormSaveDraft()];
-                                    case 1:
-                                        _a.sent();
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); } })),
-                    react_1.default.createElement(button_1.Button, { id: "dtw-submit", text: "Submit", type: "normal", className: "w-xs", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, handleFormSubmit()];
-                                    case 1:
-                                        _a.sent();
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); } }),
-                    hasTabAlign && (uniqueTabIds || []).length > 1 && (react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(HeroIcons.ChevronRightIcon, { className: "w-5 h-5 text-primary-500" }), onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
-                            var nextTabId;
-                            var _a;
-                            return __generator(this, function (_b) {
-                                switch (_b.label) {
-                                    case 0:
-                                        if (!(currentTabIndex_1 < (uniqueTabIds || []).length - 1)) return [3 /*break*/, 3];
-                                        if (!((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareSaveOnTabChange)) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, handleFormSaveDraft()];
-                                    case 1:
-                                        _b.sent();
-                                        _b.label = 2;
-                                    case 2:
-                                        nextTabId = (uniqueTabIds || [])[currentTabIndex_1 + 1];
-                                        handleUpdateTabId(nextTabId);
-                                        _b.label = 3;
-                                    case 3: return [2 /*return*/];
-                                }
-                            });
-                        }); }, disabled: currentTabIndex_1 >= (uniqueTabIds || []).length - 1, className: "ml-2", background: "bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800" })))),
-                ((_j = props.edit) === null || _j === void 0 ? void 0 : _j.deleteBtn) && isEditor && props.id !== "new" && (react_1.default.createElement(button_1.Button, { id: "dtw-delete", text: "Delete", type: "danger", className: "w-xs ml-3", onClick: function () {
-                        setDeleteModal(true);
-                    } }))));
+            return (react_1.default.createElement("div", { className: "flex flex-row h-fit w-full mt-5 sm:justify-end sm:mt-0" }, isTabbedUpdate ? null : bareActionComponent ? (bareActionComponent) : (react_1.default.createElement(react_1.default.Fragment, null,
+                ((_d = props.edit) === null || _d === void 0 ? void 0 : _d.enableUpdateDraft) && (react_1.default.createElement(button_1.Button, { id: "dtw-save", text: "Save", type: "light", className: "w-xs mr-3", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, handleFormSaveDraft()];
+                                case 1:
+                                    _a.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); } })),
+                react_1.default.createElement(button_1.Button, { id: "dtw-submit", text: "Submit", type: "normal", className: "w-xs", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, handleFormSubmit()];
+                                case 1:
+                                    _a.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); } })))));
         }
         else if (type === "list") {
             var listActionBtns = [];
@@ -6524,7 +6681,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             if (bareActionComponent) {
                 listActionBtns.push(bareActionComponent);
             }
-            else if (((_k = props.edit) === null || _k === void 0 ? void 0 : _k.allEditable) || ((_l = props.edit) === null || _l === void 0 ? void 0 : _l.createBtn)) {
+            else if (((_e = props.edit) === null || _e === void 0 ? void 0 : _e.allEditable) || ((_f = props.edit) === null || _f === void 0 ? void 0 : _f.createBtn)) {
                 listActionBtns.push(react_1.default.createElement(react_1.default.Fragment, null,
                     hasNavigation ? (react_1.default.createElement(iconButton_1.IconButton, { testId: "dtw-create", icon: react_1.default.createElement(outline_1.PlusIcon, { className: "h-7 w-7 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: function () {
                             var _a, _b;
@@ -6656,7 +6813,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             authList));
     };
     var renderContent = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36;
+        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;
         var isBottom = ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionBottom) ? true : false;
         var tabs = renderTabs();
         var pages = [
@@ -6693,20 +6850,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         react_1.default.createElement("div", null,
                             react_1.default.createElement("div", { className: "flex flex-col sm:py-2 sm:items-center sm:flex-row ".concat(hasReadHeading ? "justify-between" : "sm:justify-end") },
                                 hasReadHeading && (react_1.default.createElement("div", { className: "flex flex-col" },
-                                    props.title && (react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title)),
+                                    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)))),
-                                !isBottom && renderActionButtons(props.type))),
-                        (schemaPresent || ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.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: (_j = props.organise) === null || _j === void 0 ? void 0 : _j.darkMode })),
-                        ((_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareReadComponentPos) === "top" &&
+                                renderActionButtons(props.type))),
+                        (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 })),
+                        ((_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareReadComponentPos) === "top" &&
                             renderBareReadComp(),
                         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 },
-                            !((_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareReadComponentHide) && (react_1.default.createElement("div", null, renderTabContent(tabs, props.type, viewType))),
-                            ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareReadComponentPos) !== "top" &&
+                            !((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareReadComponentHide) && (react_1.default.createElement("div", null, renderTabContent(tabs, props.type, viewType))),
+                            ((_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareReadComponentPos) !== "top" &&
                                 renderBareReadComp()),
-                        isBottom && (
-                        // INFO: matches the update view's bottom bar, which is already sm:justify-end
-                        react_1.default.createElement("div", { className: "flex sm:justify-end" }, renderActionButtons(props.type)))))));
+                        renderReadBar()))));
             case "update":
                 if (props.id !== "new") {
                     pages.push({
@@ -6716,12 +6871,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     });
                 }
                 pages.push({
-                    name: (_q = selectedData === null || selectedData === void 0 ? void 0 : selectedData[(_p = (_o = props.organise) === null || _o === void 0 ? void 0 : _o.breadcrumbAttributeId) !== null && _p !== void 0 ? _p : serverId]) !== null && _q !== void 0 ? _q : (props.id ? props.id : "new"),
+                    name: (_r = selectedData === null || selectedData === void 0 ? void 0 : selectedData[(_q = (_p = props.organise) === null || _p === void 0 ? void 0 : _p.breadcrumbAttributeId) !== null && _q !== void 0 ? _q : serverId]) !== null && _r !== void 0 ? _r : (props.id ? props.id : "new"),
                     href: "#",
                     current: true,
                 });
                 var filterModel_1 = [];
-                var disabledOnEnter_1 = (_s = (_r = props.organise) === null || _r === void 0 ? void 0 : _r.disabledOnEnter) !== null && _s !== void 0 ? _s : false;
+                var disabledOnEnter_1 = (_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.disabledOnEnter) !== null && _t !== void 0 ? _t : false;
                 structure.map(function (eachModel) {
                     var _a;
                     var present = false;
@@ -6834,12 +6989,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }
                     }
                 };
-                var hasTabAlign_1 = ((_t = props.organise) === null || _t === void 0 ? void 0 : _t.tabAlign) || ((_u = props.space) === null || _u === void 0 ? void 0 : _u.tabAlign);
-                var leftTabAlign = ((_v = props.organise) === null || _v === void 0 ? void 0 : _v.tabAlign) === "left" ||
-                    ((_w = props.space) === null || _w === void 0 ? void 0 : _w.tabAlign) === "left";
-                var topTabAlign = ((_x = props.organise) === null || _x === void 0 ? void 0 : _x.tabAlign) === "top" || ((_y = props.space) === null || _y === void 0 ? void 0 : _y.tabAlign) === "top";
-                var stepperTabAlign = ((_z = props.organise) === null || _z === void 0 ? void 0 : _z.tabAlign) === "stepper" ||
-                    ((_0 = props.space) === null || _0 === void 0 ? void 0 : _0.tabAlign) === "stepper";
+                var hasTabAlign_1 = ((_u = props.organise) === null || _u === void 0 ? void 0 : _u.tabAlign) || ((_v = props.space) === null || _v === void 0 ? void 0 : _v.tabAlign);
+                var leftTabAlign = ((_w = props.organise) === null || _w === void 0 ? void 0 : _w.tabAlign) === "left" ||
+                    ((_x = props.space) === null || _x === void 0 ? void 0 : _x.tabAlign) === "left";
+                var topTabAlign = ((_y = props.organise) === null || _y === void 0 ? void 0 : _y.tabAlign) === "top" || ((_z = props.space) === null || _z === void 0 ? void 0 : _z.tabAlign) === "top";
+                var stepperTabAlign = ((_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.tabAlign) === "stepper" ||
+                    ((_1 = props.space) === null || _1 === void 0 ? void 0 : _1.tabAlign) === "stepper";
                 var uniqueTabIds_2 = Array.from(new Set(filterModel_1
                     .map(function (item) { return item.tabId; })
                     .filter(function (id) { return id !== undefined; })));
@@ -6848,11 +7003,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 if (shouldIncludeOthers) {
                     uniqueTabIds_2.push("");
                 }
-                var customTabComponent_1 = (_3 = (_2 = (_1 = props.bareSettings) === null || _1 === void 0 ? void 0 : _1.bareUpdateTabComponent) === null || _2 === void 0 ? void 0 : _2.call(_1, uniqueTabIds_2)) !== null && _3 !== void 0 ? _3 : [];
+                var customTabComponent_1 = (_4 = (_3 = (_2 = props.bareSettings) === null || _2 === void 0 ? void 0 : _2.bareUpdateTabComponent) === null || _3 === void 0 ? void 0 : _3.call(_2, uniqueTabIds_2)) !== null && _4 !== void 0 ? _4 : [];
                 var stepperSteps = uniqueTabIds_2.map(function (eachTabId) {
+                    var _a, _b;
                     var customTabMatch = customTabComponent_1.find(function (eachTab) { return eachTab.tabId === eachTabId; });
                     return {
                         title: eachTabId ? eachTabId : "Others",
+                        shortTitle: (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.tabShortLabels) === null || _b === void 0 ? void 0 : _b[eachTabId],
                         description: "",
                         icon: customTabMatch === null || customTabMatch === void 0 ? void 0 : customTabMatch.icon,
                         skip: (customTabMatch === null || customTabMatch === void 0 ? void 0 : customTabMatch.skip) ? true : false,
@@ -6868,11 +7025,20 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         icon: function () { return react_1.default.createElement("div", null); },
                     };
                 });
+                var railSteps = uniqueTabIds_2.map(function (eachTabId) {
+                    var customTabMatch = customTabComponent_1.find(function (eachTab) { return eachTab.tabId === eachTabId; });
+                    return {
+                        id: eachTabId || "Others",
+                        title: eachTabId ? eachTabId : "Others",
+                        completed: (0, utils_1.handleIsTabComplete)(filterModel_1, selectedData, eachTabId),
+                        icon: customTabMatch === null || customTabMatch === void 0 ? void 0 : customTabMatch.icon,
+                    };
+                });
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     props.id && props.id !== "new" && structure.length >= 1 && (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: readQueryHocRef, database: {
                             dbModule: dbModule,
                             dbType: devSettings.server,
-                            dbCollection: (_5 = (_4 = props === null || props === void 0 ? void 0 : props.space) === null || _4 === void 0 ? void 0 : _4.pipelineDefaultSpaceId) !== null && _5 !== void 0 ? _5 : props.collectionId,
+                            dbCollection: (_6 = (_5 = props === null || props === void 0 ? void 0 : props.space) === null || _5 === void 0 ? void 0 : _5.pipelineDefaultSpaceId) !== null && _6 !== void 0 ? _6 : props.collectionId,
                             dbEndpoint: devSettings.dbEndpoint,
                             dbAPIToken: devSettings.dbAPIToken,
                             dbUserToken: devSettings.dbUserToken,
@@ -6880,21 +7046,21 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             type: "get",
                             id: props.id,
                             pipeline: pipeline,
-                        }, offline: ((_6 = props.bareSettings) === null || _6 === void 0 ? void 0 : _6.bareOffline) && isNetworkOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
+                        }, offline: ((_7 = props.bareSettings) === null || _7 === void 0 ? void 0 : _7.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" }, props.title)),
+                            props.title && (react_1.default.createElement("p", { className: "text-xl font-medium ".concat(((_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.darkMode) ? "text-white" : "") }, props.title)),
                             props.description && (react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)))),
-                        !isBottom &&
+                        (!isBottom || hasTabAlign_1 || props.type === "update") &&
                             renderActionButtons(props.type, hasTabAlign_1, uniqueTabIds_2)),
                     hasTabAlign_1 ? (react_1.default.createElement("div", { className: "w-full ".concat(leftTabAlign
                             ? "grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5"
                             : "") },
                         leftTabAlign && uniqueTabIds_2.length >= 1 && (react_1.default.createElement("div", { className: "w-full" },
-                            react_1.default.createElement(bars_1.Bars, { bars: tabBars, selectedId: activeTab || "Others", onClick: function (tabId) {
-                                    handleUpdateTabId(tabId);
-                                }, primaryColor: true }))),
+                            react_1.default.createElement(stepper_1.Stepper, { variant: "checklist", steps: railSteps, stepIndex: uniqueTabIds_2.findIndex(function (tabId) { return tabId === (activeTab || ""); }), onChange: function (stepIndex) {
+                                    handleUpdateTabId(uniqueTabIds_2[stepIndex] || "");
+                                } }))),
                         react_1.default.createElement("div", { className: "w-full ".concat(leftTabAlign ? " md:col-span-2 lg:col-span-3" : "") },
                             topTabAlign && uniqueTabIds_2.length >= 1 && (react_1.default.createElement(bars_1.Bars, { bars: tabBars, selectedId: activeTab || "Others", onClick: function (tabId) {
                                     handleUpdateTabId(tabId);
@@ -6903,11 +7069,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     var tabId = uniqueTabIds_2[stepIndex];
                                     handleUpdateTabId(tabId);
                                 } })),
-                            ((_7 = props.bareSettings) === null || _7 === void 0 ? void 0 : _7.bareUpdateComponentAbove) &&
-                                ((_8 = props.bareSettings) === null || _8 === void 0 ? void 0 : _8.bareUpdateComponent) &&
-                                ((_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.bareUpdateComponent(selectedData)),
+                            ((_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.bareUpdateComponentAbove) &&
+                                ((_10 = props.bareSettings) === null || _10 === void 0 ? void 0 : _10.bareUpdateComponent) &&
+                                ((_11 = props.bareSettings) === null || _11 === void 0 ? void 0 : _11.bareUpdateComponent(selectedData)),
                             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) {
+                                    var _a, _b, _c, _d;
                                     var filterByTab = filterModel_1
                                         .map(function (model, index) { return (__assign(__assign({}, model), { refIndex: index })); })
                                         .filter(function (model) {
@@ -6919,34 +7086,39 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                             ? activeTab === tabId
                                                 ? ""
                                                 : "hidden"
-                                            : "") }, renderDataTemplateFormContent(selectedData, filterByTab, modalFormInputRefs, false, false, undefined, undefined)));
+                                            : "") },
+                                        hasTabAlign_1 && (react_1.default.createElement("div", { className: "col-span-12" },
+                                            react_1.default.createElement("p", { className: "text-lg font-semibold ".concat(((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode) ? "text-white" : "text-gray-900") }, tabId || "Others"),
+                                            ((_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)));
                                 }),
-                                !((_10 = props.bareSettings) === null || _10 === void 0 ? void 0 : _10.bareUpdateComponentAbove) &&
-                                    ((_11 = props.bareSettings) === null || _11 === void 0 ? void 0 : _11.bareUpdateComponent) &&
-                                    ((_12 = props.bareSettings) === null || _12 === void 0 ? void 0 : _12.bareUpdateComponent(selectedData))),
+                                !((_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))),
                             react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(props.type)),
                             react_1.default.createElement("div", { className: "mt-8" }, renderListObject(props.type)),
+                            renderStepBar(uniqueTabIds_2),
                             isBottom &&
+                                props.type !== "update" &&
                                 renderActionButtons(props.type, hasTabAlign_1, uniqueTabIds_2)))) : (react_1.default.createElement("div", null,
-                        ((_13 = props.bareSettings) === null || _13 === void 0 ? void 0 : _13.bareUpdateComponentAbove) &&
-                            ((_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareUpdateComponent) &&
-                            ((_15 = props.bareSettings) === null || _15 === void 0 ? void 0 : _15.bareUpdateComponent(selectedData)),
+                        ((_15 = props.bareSettings) === null || _15 === void 0 ? void 0 : _15.bareUpdateComponentAbove) &&
+                            ((_16 = props.bareSettings) === null || _16 === void 0 ? void 0 : _16.bareUpdateComponent) &&
+                            ((_17 = props.bareSettings) === null || _17 === void 0 ? void 0 : _17.bareUpdateComponent(selectedData)),
                         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),
-                            !((_16 = props.bareSettings) === null || _16 === void 0 ? void 0 : _16.bareUpdateComponentAbove) &&
-                                ((_17 = props.bareSettings) === null || _17 === void 0 ? void 0 : _17.bareUpdateComponent) &&
-                                ((_18 = props.bareSettings) === null || _18 === void 0 ? void 0 : _18.bareUpdateComponent(selectedData))),
+                            !((_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))),
                         react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(props.type)),
                         react_1.default.createElement("div", { className: "mt-8" }, renderListObject(props.type)),
-                        isBottom &&
-                            renderActionButtons(props.type, hasTabAlign_1, uniqueTabIds_2)))));
+                        renderStepBar(uniqueTabIds_2)))));
             case "list":
             case "union":
                 var filterComponent_1 = renderSearchContent();
                 var dataComponent = renderTabContent(tabs, props.type, viewType);
                 var actionComponent = renderActionButtons(props.type);
                 // INFO: Active flex filter count — used by both the filter icon badge and floating search bar
-                var activeFlexFilterCount_1 = ((_19 = props.bareSettings) === null || _19 === void 0 ? void 0 : _19.bareFlexFilters)
+                var activeFlexFilterCount_1 = ((_21 = props.bareSettings) === null || _21 === void 0 ? void 0 : _21.bareFlexFilters)
                     ? flexFilters.filter(function (eachFilter) {
                         return eachFilter.columnId && eachFilter.operator && eachFilter.value;
                     }).length
@@ -6954,14 +7126,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 var listReadQueryHOC = (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: listRQueryHocRef, database: {
                         dbModule: dbModule,
                         dbType: devSettings.server,
-                        dbCollection: (_21 = (_20 = props === null || props === void 0 ? void 0 : props.space) === null || _20 === void 0 ? void 0 : _20.pipelineDefaultSpaceId) !== null && _21 !== void 0 ? _21 : props.collectionId,
+                        dbCollection: (_23 = (_22 = props === null || props === void 0 ? void 0 : props.space) === null || _22 === void 0 ? void 0 : _22.pipelineDefaultSpaceId) !== null && _23 !== void 0 ? _23 : props.collectionId,
                         dbEndpoint: devSettings.dbEndpoint,
                         dbAPIToken: devSettings.dbAPIToken,
                         dbUserToken: devSettings.dbUserToken,
-                    }, cond: handleReadQueryHocCond(), offline: ((_22 = props.bareSettings) === null || _22 === void 0 ? void 0 : _22.bareOffline) && isNetworkOffline, onChangeData: function (data) {
+                    }, cond: handleReadQueryHocCond(), offline: ((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareOffline) && isNetworkOffline, onChangeData: function (data) {
                         handleGetListData(data, "", "");
                     }, onError: handleGetItemError }));
-                if ((_23 = props.renderSettings) === null || _23 === void 0 ? void 0 : _23.renderListUI) {
+                if ((_25 = props.renderSettings) === null || _25 === void 0 ? void 0 : _25.renderListUI) {
                     return (react_1.default.createElement(react_1.default.Fragment, null,
                         listReadQueryHOC,
                         props.renderSettings.renderListUI(actionComponent, filterComponent_1, dataComponent)));
@@ -7008,53 +7180,53 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                 };
                 var renderListActionElements = function () {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+                    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;
                     var actionElementList = [];
                     if (schemaPresent) {
                         actionElementList.push(react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(solid_1.ArrowsUpDownIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white", onClick: function () {
+                            react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(solid_1.ArrowsUpDownIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode) ? "bg-white/10" : "bg-white", onClick: function () {
                                     handlePopUpModal(true, "sort");
                                 } }),
                             react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), onClick: function () {
                                     handlePopUpModal(true, "filter");
-                                }, bgColor: "bg-white" }),
+                                }, bgColor: ((_b = props.organise) === null || _b === void 0 ? void 0 : _b.darkMode) ? "bg-white/10" : "bg-white" }),
                             react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.AdjustmentsHorizontalIcon, { className: "h-7 w-7 text-primary-500" }), onClick: function () {
                                     handlePopUpModal(true, "overview");
-                                }, bgColor: "bg-white" }),
+                                }, bgColor: ((_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkMode) ? "bg-white/10" : "bg-white" }),
                             react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.ArrowPathIcon, { className: "h-7 w-7 text-primary-500" }), onClick: function () {
                                     // INFO - When Refresh Don't Clear Filter
                                     handleRefresh();
-                                }, bgColor: "bg-white" })));
+                                }, bgColor: ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.darkMode) ? "bg-white/10" : "bg-white" })));
                     }
-                    if ((((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterAsPopup) ||
-                        ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode)) &&
-                        !((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareFlexFilters) &&
+                    if ((((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareListFilterAsPopup) ||
+                        ((_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareCompactMode)) &&
+                        !((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareFlexFilters) &&
                         filterComponent_1 &&
                         Array.isArray(filterComponent_1) &&
                         filterComponent_1.length > 0) {
                         // INFO: in compact mode, the search input is rendered inline by
                         // renderListFilterElements, so drop the trailing search element
                         // from the popup to avoid duplication.
-                        var popupFilters = ((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareCompactMode) && !((_e = props.organise) === null || _e === void 0 ? void 0 : _e.hideSearch)
+                        var popupFilters = ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareCompactMode) && !((_j = props.organise) === null || _j === void 0 ? void 0 : _j.hideSearch)
                             ? filterComponent_1.slice(0, -1)
                             : filterComponent_1;
                         if (popupFilters.length > 0) {
-                            actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg p-4 flex flex-col space-y-3 w-[calc(100vw-2rem)] max-w-[320px]" }, popupFilters.map(function (filterEl, index) { return (react_1.default.createElement("div", { key: index }, filterEl)); })), anchor: "right", excludePortalIds: ["datepicker-portal"], lib: { Transition: (_f = props === null || props === void 0 ? void 0 : props.lib) === null || _f === void 0 ? void 0 : _f.Transition } }));
+                            actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { darkMode: (_k = props.organise) === null || _k === void 0 ? void 0 : _k.darkMode, ctaComp: react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: ((_l = props.organise) === null || _l === void 0 ? void 0 : _l.darkMode) ? "bg-white/10" : "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg p-4 flex flex-col space-y-3 w-[calc(100vw-2rem)] max-w-[320px]" }, popupFilters.map(function (filterEl, index) { return (react_1.default.createElement("div", { key: index }, filterEl)); })), anchor: "right", excludePortalIds: ["datepicker-portal"], lib: { Transition: (_m = props === null || props === void 0 ? void 0 : props.lib) === null || _m === void 0 ? void 0 : _m.Transition } }));
                         }
                     }
                     // INFO: User column hiding — the schemaPresent path already exposes
                     // OverviewModal, which writes hide back to the schema in the database.
                     // This one is the client-only counterpart for bare DTWs.
-                    if (!schemaPresent && ((_g = props.organise) === null || _g === void 0 ? void 0 : _g.hideColumnEnabled)) {
+                    if (!schemaPresent && ((_o = props.organise) === null || _o === void 0 ? void 0 : _o.hideColumnEnabled)) {
                         var hiddenColumnCount = getUserHiddenColumnCount();
-                        actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement("div", { className: "relative w-fit h-fit" },
+                        actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { darkMode: (_p = props.organise) === null || _p === void 0 ? void 0 : _p.darkMode, ctaComp: react_1.default.createElement("div", { className: "relative w-fit h-fit" },
                                 hiddenColumnCount > 0 && (react_1.default.createElement("div", { "data-testid": "dtw-hide-columns-count", className: "absolute top-0 right-0 translate-x-1/4 -translate-y-1/4 z-[1] rounded-full bg-primary-500 text-white flex items-center justify-center w-5 h-5 text-[10px]" }, hiddenColumnCount)),
                                 react_1.default.createElement(iconButton_1.IconButton, { testId: "dtw-hide-columns-btn", icon: react_1.default.createElement(outline_1.EyeSlashIcon, { className: "h-7 w-7 ".concat(hiddenColumnCount > 0
                                             ? "text-white"
-                                            : "text-primary-500") }), bgColor: hiddenColumnCount > 0 ? "bg-primary-500" : "bg-white" })), renderComp: renderHideColumnPopupContent(), anchor: "right", lib: { Transition: (_h = props === null || props === void 0 ? void 0 : props.lib) === null || _h === void 0 ? void 0 : _h.Transition } }));
+                                            : "text-primary-500") }), bgColor: hiddenColumnCount > 0 ? "bg-primary-500" : "bg-white" })), renderComp: renderHideColumnPopupContent(), anchor: "right", lib: { Transition: (_q = props === null || props === void 0 ? void 0 : props.lib) === null || _q === void 0 ? void 0 : _q.Transition } }));
                     }
                     // INFO: Flex filter — desktop uses PopUp, mobile uses Modal
-                    if ((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareFlexFilters) {
+                    if ((_r = props.bareSettings) === null || _r === void 0 ? void 0 : _r.bareFlexFilters) {
                         var flexActions = {
                             handleAddFilter: handleFlexFilterAdd,
                             handleRemoveFilter: handleFlexFilterRemove,
@@ -7067,31 +7239,38 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         };
                         // INFO: Search input will only render above flex filters if bareListFilterAsPopup is true
                         var searchInput = !isFirebase &&
-                            ((_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareListFilterAsPopup) &&
-                            !((_l = props.organise) === null || _l === void 0 ? void 0 : _l.hideSearch) &&
+                            ((_s = props.bareSettings) === null || _s === void 0 ? void 0 : _s.bareListFilterAsPopup) &&
+                            !((_t = props.organise) === null || _t === void 0 ? void 0 : _t.hideSearch) &&
                             filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
                             filterComponent_1.length > 0
                             ? filterComponent_1[filterComponent_1.length - 1]
                             : undefined;
                         var flexFilterLength_1 = activeFlexFilterCount_1;
-                        if (!((_m = props.organise) === null || _m === void 0 ? void 0 : _m.hideSearch) &&
-                            ((_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareListFilterAsPopup) &&
+                        if (!((_u = props.organise) === null || _u === void 0 ? void 0 : _u.hideSearch) &&
+                            ((_v = props.bareSettings) === null || _v === void 0 ? void 0 : _v.bareListFilterAsPopup) &&
                             (filterSearchParams === null || filterSearchParams === void 0 ? void 0 : filterSearchParams["search"]))
                             flexFilterLength_1 += 1;
                         var flexFilterIconBtn = function (mobile) {
+                            var _a;
                             return (react_1.default.createElement("div", { className: "relative w-fit h-fit" },
                                 flexFilterLength_1 > 0 && (react_1.default.createElement("div", { className: "absolute top-0 right-0 translate-x-1/4 -translate-y-1/4 z-[1] rounded-full bg-primary-500 text-white flex items-center justify-center w-5 h-5 text-[10px]" }, flexFilterLength_1)),
-                                react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white", onClick: mobile ? function () { return setFlexFilterModalOpen(true); } : undefined })));
+                                react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode) ? "bg-white/10" : "bg-white", onClick: mobile ? function () { return setFlexFilterModalOpen(true); } : undefined })));
                         };
                         // INFO: Desktop — PopUp (hidden on mobile)
                         actionElementList.push(react_1.default.createElement("div", { className: "hidden md:block" },
-                            react_1.default.createElement(popUp_1.PopUp, { ctaComp: flexFilterIconBtn(), renderComp: (0, flexFilter_1.renderFlexFilterPopupContent)(flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, (_p = props.bareSettings) === null || _p === void 0 ? void 0 : _p.bareListFilterQuery, searchInput, (_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareListFilterAddComponent), anchor: "right", excludePortalIds: ["datepicker-portal", "select-portal"], lib: { Transition: (_r = props === null || props === void 0 ? void 0 : props.lib) === null || _r === void 0 ? void 0 : _r.Transition } })));
+                            react_1.default.createElement(popUp_1.PopUp, { darkMode: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.darkMode, ctaComp: flexFilterIconBtn(), renderComp: (0, flexFilter_1.renderFlexFilterPopupContent)(flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, (_x = props.bareSettings) === null || _x === void 0 ? void 0 : _x.bareListFilterQuery, searchInput, (_y = props.bareSettings) === null || _y === void 0 ? void 0 : _y.bareListFilterAddComponent, undefined, {
+                                    darkMode: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.darkMode,
+                                    darkModeBg: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.darkModeBg,
+                                }), anchor: "right", excludePortalIds: ["datepicker-portal", "select-portal"], lib: { Transition: (_1 = props === null || props === void 0 ? void 0 : props.lib) === null || _1 === void 0 ? void 0 : _1.Transition } })));
                         // INFO: Mobile — IconButton that opens a Modal (hidden on desktop)
                         actionElementList.push(react_1.default.createElement("div", { className: "block md:hidden" },
-                            !((_s = props.bareSettings) === null || _s === void 0 ? void 0 : _s.bareListMobileFloatingSearch) &&
+                            !((_2 = props.bareSettings) === null || _2 === void 0 ? void 0 : _2.bareListMobileFloatingSearch) &&
                                 flexFilterIconBtn(true),
-                            (0, flexFilter_1.renderFlexFilterModal)(flexFilterModalOpen, flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, function () { return setFlexFilterModalOpen(false); }, (_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareListFilterQuery, searchInput, (_u = props.bareSettings) === null || _u === void 0 ? void 0 : _u.bareListFilterAddComponent)));
+                            (0, flexFilter_1.renderFlexFilterModal)(flexFilterModalOpen, flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, function () { return setFlexFilterModalOpen(false); }, (_3 = props.bareSettings) === null || _3 === void 0 ? void 0 : _3.bareListFilterQuery, searchInput, (_4 = props.bareSettings) === null || _4 === void 0 ? void 0 : _4.bareListFilterAddComponent, {
+                                darkMode: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkMode,
+                                darkModeBg: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.darkModeBg,
+                            })));
                     }
                     // INFO: bareUpdateActionBottom positions the read/update action bar. The list's own
                     // create and offline-upload buttons stay in the filter row either way — they belong
@@ -7099,14 +7278,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     var actionBtns = renderActionButtons(props.type);
                     if (actionBtns)
                         actionElementList.push(actionBtns);
-                    if (schemaPresent || ((_v = props.organise) === null || _v === void 0 ? void 0 : _v.showExport)) {
-                        actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (
+                    if (schemaPresent || ((_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.showExport)) {
+                        actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { darkMode: (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.darkMode, ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: ((_9 = props.organise) === null || _9 === void 0 ? void 0 : _9.darkMode) ? "bg-white/10" : "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (
                             //TODO: Bug - Crash on Next Js
                             // <Menu.Item>
                             react_1.default.createElement("span", { className: "block w-40 py-3 text-sm text-center text-gray-700 cursor-pointer hover:bg-gray-100", onClick: eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.onClick }, eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.text)
                             // </Menu.Item>
                             ); })), lib: {
-                                Transition: (_w = props === null || props === void 0 ? void 0 : props.lib) === null || _w === void 0 ? void 0 : _w.Transition,
+                                Transition: (_10 = props === null || props === void 0 ? void 0 : props.lib) === null || _10 === void 0 ? void 0 : _10.Transition,
                             } }));
                     }
                     if (actionElementList.length > 0) {
@@ -7149,30 +7328,34 @@ 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(((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareCompactMode)
-                            ? "w-full flex-row flex-wrap sm:flex-nowrap items-end"
+                    react_1.default.createElement("div", { className: "flex py-2 ".concat(((_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.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" }, props.title),
-                                ((_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareSocketName) &&
+                                react_1.default.createElement("p", { className: "text-xl font-medium ".concat(((_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.darkMode) ? "text-white" : "") }, props.title),
+                                ((_28 = props.bareSettings) === null || _28 === void 0 ? void 0 : _28.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")),
-                                ((_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareSocketName) && isLiveOffline && (react_1.default.createElement("span", { className: "inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700" },
+                                ((_29 = props.bareSettings) === null || _29 === void 0 ? void 0 : _29.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: ((_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.bareCompactMode)
+                        react_1.default.createElement("div", { className: ((_30 = props.bareSettings) === null || _30 === void 0 ? void 0 : _30.bareCompactMode)
                                 ? "hidden sm:block grow"
                                 : "grow" }),
-                        renderListFilterElements(),
-                        renderListActionElements()),
+                        react_1.default.createElement("div", { className: "ml-auto flex flex-row items-end" },
+                            renderListFilterElements(),
+                            renderListActionElements())),
                     renderListNewRowFilterElements(),
-                    (schemaPresent || ((_28 = props.bareSettings) === null || _28 === void 0 ? void 0 : _28.bareReadListTabs)) && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.darkMode })),
+                    (schemaPresent || ((_31 = props.bareSettings) === null || _31 === void 0 ? void 0 : _31.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: (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.darkMode })),
                     renderTabContent(tabs, props.type, viewType),
-                    ((_30 = props.bareSettings) === null || _30 === void 0 ? void 0 : _30.bareListMobileFloatingSearch) &&
+                    ((_33 = props.bareSettings) === null || _33 === void 0 ? void 0 : _33.bareListMobileFloatingSearch) && (react_1.default.createElement("div", { className: "h-28 md:hidden", "aria-hidden": "true" })),
+                    ((_34 = props.bareSettings) === null || _34 === void 0 ? void 0 : _34.bareListMobileFloatingSearch) &&
                         (0, listModule_1.renderFloatingMobileSearch)({
                             filterSearch: filterSearch,
                             handleNameSearch: handleNameSearch,
@@ -7185,15 +7368,15 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     handlePopUpModal(true, "filter");
                                 }
                             },
-                            hideSearch: (_31 = props.organise) === null || _31 === void 0 ? void 0 : _31.hideSearch,
-                            darkMode: (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.darkMode,
-                            floatingOffset: (_33 = props.bareSettings) === null || _33 === void 0 ? void 0 : _33.bareListFloatingActionOffset,
-                            hideFilter: !((_34 = props.bareSettings) === null || _34 === void 0 ? void 0 : _34.bareFlexFilters),
-                            activeFilterCount: ((_35 = props.bareSettings) === null || _35 === void 0 ? void 0 : _35.bareFlexFilters)
+                            hideSearch: (_35 = props.organise) === null || _35 === void 0 ? void 0 : _35.hideSearch,
+                            darkMode: (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.darkMode,
+                            floatingOffset: (_37 = props.bareSettings) === null || _37 === void 0 ? void 0 : _37.bareListFloatingActionOffset,
+                            hideFilter: !((_38 = props.bareSettings) === null || _38 === void 0 ? void 0 : _38.bareFlexFilters),
+                            activeFilterCount: ((_39 = props.bareSettings) === null || _39 === void 0 ? void 0 : _39.bareFlexFilters)
                                 ? activeFlexFilterCount_1
                                 : undefined,
                             // INFO: Hides when items are selected so NewTable's multi-action bar takes over.
-                            hidden: selectAll || ((_36 = selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) !== null && _36 !== void 0 ? _36 : 0) > 0,
+                            hidden: selectAll || ((_40 = selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) !== null && _40 !== void 0 ? _40 : 0) > 0,
                         })));
             default:
                 return react_1.default.createElement(react_1.default.Fragment, null);
@@ -7203,7 +7386,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     //SECTION: Render Utils
     //=====================================================================================
     var renderDataTemplateFormContent = function (state, model, ref, isObject, isObjectList, modalInput, parentData) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         return (0, updateModule_1.renderDataTemplateForm)(state, model, ref, {
             handleOnChangeAddress: handleOnChangeAddress,
             handleOnChangeText: handleOnChangeText,
@@ -7225,10 +7408,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             showId: showId,
             remainId: remainId,
             groupIdCollapsible: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.groupIdCollapsible,
+            groupDescriptions: (_d = props.organise) === null || _d === void 0 ? void 0 : _d.groupDescriptions,
+            darkMode: (_e = props.organise) === null || _e === void 0 ? void 0 : _e.darkMode,
+            darkModeBg: (_f = props.organise) === null || _f === void 0 ? void 0 : _f.darkModeBg,
         }, {
             dbModule: dbModule,
             devSettings: devSettings,
-            referencesOptions: referencesOptions,
+            // INFO: the object editor opened from a list cell has no read/update
+            // fetch behind it — the list-load seed is what gives its nested
+            // reference Select a label before the user searches
+            referencesOptions: __assign(__assign({}, listReferencesOptions), referencesOptions),
             referencesDetails: referencesDetails,
             referenceLoading: referenceLoading,
             setReferenceLoading: setReferenceLoading,
@@ -7238,12 +7427,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             imageEndpoint: devSettings.imageEndpoint,
             maxFileSize: devSettings.maxFileSize,
             imageBucketName: devSettings.bucketName,
-            handleCustomDownloadFile: (_d = props.organise) === null || _d === void 0 ? void 0 : _d.handleCustomDownloadFile,
+            handleCustomDownloadFile: (_g = props.organise) === null || _g === void 0 ? void 0 : _g.handleCustomDownloadFile,
         }, {
             selectedObjectId: selectedObjectId,
             selectedObjectStructureId: selectedObjectStructureId,
             parentData: parentData,
-            organiseListObjTableView: ((_e = props.organise) === null || _e === void 0 ? void 0 : _e.listObjectTableView)
+            organiseListObjTableView: ((_h = props.organise) === null || _h === void 0 ? void 0 : _h.listObjectTableView)
                 ? true
                 : false,
             setSelectedObjectStructureId: setSelectedObjectStructureId,
@@ -7253,7 +7442,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             renderObjectTags: renderObjectTags,
             setSelectedData: setSelectedData,
             flexTableRefs: flexTableRefs,
-        }, { signing: signatureSigning, setSigning: setSignatureSigning }, props.onComplete ? true : false, (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareOffline, (_h = (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareUpdateColumnType) !== null && _h !== void 0 ? _h : "two", (_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareUpdateIndividualComponent, (_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareUpdateMobileView);
+        }, { signing: signatureSigning, setSigning: setSignatureSigning }, props.onComplete ? true : false, (_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareOffline, (_l = (_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareUpdateColumnType) !== null && _l !== void 0 ? _l : "two", (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareUpdateIndividualComponent, (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareUpdateMobileView);
     };
     var renderGridAndListData = function (imageTag, type, kanbanGroupId, useColumnName) {
         var _a, _b;
@@ -7555,9 +7744,54 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         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 }));
     };
+    // INFO: for NewTable, groupBy stays inside one table — rows are handed over
+    // as coloured, collapsible bands keyed the same way the legacy split is
+    var handleBuildNewTableGroups = function () {
+        var _a;
+        if (!groupId || !((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW))
+            return undefined;
+        var groupAttributeDS = structure.find(function (eachDS) { return eachDS.id === groupId; });
+        var groups = [];
+        (spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : []).forEach(function (eachData, index) {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            // INFO: key off the raw row — the display row holds a Tag element for a
+            // coloured list value, which would put every row under "Unknown"
+            var rawValue = (_b = (_a = tableData === null || tableData === void 0 ? void 0 : tableData[index]) === null || _a === void 0 ? void 0 : _a[groupId]) !== null && _b !== void 0 ? _b : eachData === null || eachData === void 0 ? void 0 : eachData[groupId];
+            var key;
+            if ((groupAttributeDS === null || groupAttributeDS === void 0 ? void 0 : groupAttributeDS.type) === "date" && rawValue && rawValue !== " - ") {
+                key = (0, dayjs_1.default)(isFirebase ? (rawValue === null || rawValue === void 0 ? void 0 : rawValue._seconds) * 1000 : rawValue)
+                    .startOf("day")
+                    .format("YYYY-MM-DD");
+            }
+            else {
+                key =
+                    rawValue && rawValue !== " - " && typeof rawValue !== "object"
+                        ? String(rawValue)
+                        : "Unknown/No Value";
+            }
+            var rowId = (_d = (_c = tableData === null || tableData === void 0 ? void 0 : tableData[index]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : (_e = tableData === null || tableData === void 0 ? void 0 : tableData[index]) === null || _e === void 0 ? void 0 : _e._id;
+            if (!rowId)
+                return;
+            var group = groups.find(function (eachGroup) { return eachGroup.id === key; });
+            if (!group) {
+                var optionIndex = (_g = (_f = groupAttributeDS === null || groupAttributeDS === void 0 ? void 0 : groupAttributeDS.listSelection) === null || _f === void 0 ? void 0 : _f.indexOf(key)) !== null && _g !== void 0 ? _g : -1;
+                group = {
+                    id: key,
+                    title: key,
+                    colour: optionIndex >= 0
+                        ? (_h = groupAttributeDS === null || groupAttributeDS === void 0 ? void 0 : groupAttributeDS.listSelectionColour) === null || _h === void 0 ? void 0 : _h[optionIndex]
+                        : undefined,
+                    rowIds: [],
+                };
+                groups.push(group);
+            }
+            group.rowIds.push(rowId);
+        });
+        return groups;
+    };
     var renderGroupTable = function (multipleSelect) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34;
-        if (groupId) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36;
+        if (groupId && !((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW)) {
             var groupAttributeDS_1 = structure.find(function (eachDS) { return eachDS.id === groupId; });
             var groupedSpaceTableData = spaceTableData.reduce(function (acc, eachData) {
                 var _a;
@@ -7680,9 +7914,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
         else {
             // INFO: when bareNewDTW is enabled, render NewTable instead of legacy Table
-            if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW) {
-                return (react_1.default.createElement(newTable_1.NewTable, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], referencesOptions: listReferencesOptions, size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_c = (_b = props.organise) === null || _b === void 0 ? void 0 : _b.disableSelectFullData) === null || _c === void 0 ? void 0 : _c.table, maxSelectedCount: (_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareListMaxSelectedCount, mobileView: (_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareListMobileView, mobileTooltip: (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareMobileTooltip, multiActionFloatingBtns: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], (!((_g = props.edit) === null || _g === void 0 ? void 0 : _g.disabledUpdate) &&
-                        !((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareHideTableExtraMultipleAction)
+            if ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareNewDTW) {
+                return (react_1.default.createElement(newTable_1.NewTable, { darkModeBg: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkModeBg, showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], referencesOptions: listReferencesOptions, groups: handleBuildNewTableGroups(), size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.disableSelectFullData) === null || _e === void 0 ? void 0 : _e.table, maxSelectedCount: (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListMaxSelectedCount, mobileView: (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListMobileView, mobileTooltip: (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareMobileTooltip, multiActionFloatingBtns: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], (!((_j = props.edit) === null || _j === void 0 ? void 0 : _j.disabledUpdate) &&
+                        !((_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareHideTableExtraMultipleAction)
                         ? [
                             {
                                 id: "draft",
@@ -7697,7 +7931,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 hide: selectedIds.length === 0,
                             },
                         ]
-                        : []), true), (((_j = props.edit) === null || _j === void 0 ? void 0 : _j.deleteBtn)
+                        : []), true), (((_l = props.edit) === null || _l === void 0 ? void 0 : _l.deleteBtn)
                         ? [
                             {
                                 id: "delete",
@@ -7708,7 +7942,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 },
                             },
                         ]
-                        : []), true), (!isFirebase && !((_k = props.edit) === null || _k === void 0 ? void 0 : _k.disableBatchUpdate)
+                        : []), true), (!isFirebase && !((_m = props.edit) === null || _m === void 0 ? void 0 : _m.disableBatchUpdate)
                         ? [
                             {
                                 id: "update",
@@ -7716,7 +7950,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 onClick: function () { return setBatchUpdateModal(true); },
                             },
                         ]
-                        : []), true), (((_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareListMultipleSelectAddtionalActions)
+                        : []), true), (((_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareListMultipleSelectAddtionalActions)
                         ? props.bareSettings.bareListMultipleSelectAddtionalActions.map(function (eachButton) { return ({
                             id: "dt-list-multi-action-btn-" + eachButton.text,
                             btnText: eachButton.text,
@@ -7725,23 +7959,23 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 return (_a = eachButton.onClick) === null || _a === void 0 ? void 0 : _a.call(eachButton, selectedIds, selectAll, (_b = renderImpSearchFilterConditions()) !== null && _b !== void 0 ? _b : []);
                             },
                         }); })
-                        : []), true), multiActionFloatingOffset: (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareListFloatingActionOffset, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), pageIndex: pageIndex !== null && pageIndex !== void 0 ? pageIndex : 0, onClickRow: function (id) {
+                        : []), true), multiActionFloatingOffset: (_p = props.bareSettings) === null || _p === void 0 ? void 0 : _p.bareListFloatingActionOffset, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), pageIndex: pageIndex !== null && pageIndex !== void 0 ? pageIndex : 0, onClickRow: function (id) {
                         var _a, _b;
                         (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                    }, linkType: props.linkType, custom: props.custom, newTabUrl: (_p = (_o = props.newTabUrl) === null || _o === void 0 ? void 0 : _o.default) !== null && _p !== void 0 ? _p : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_r = (_q = props.newTabUrl) === null || _q === void 0 ? void 0 : _q.addons) !== null && _r !== void 0 ? _r : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                    }, linkType: props.linkType, custom: props.custom, newTabUrl: (_r = (_q = props.newTabUrl) === null || _q === void 0 ? void 0 : _q.default) !== null && _r !== void 0 ? _r : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_t = (_s = props.newTabUrl) === null || _s === void 0 ? void 0 : _s.addons) !== null && _t !== void 0 ? _t : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                         handlePagination(value);
-                    }, className: "mt-5", devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.fixedPagination, advSettings: {
-                        addColumnEnabled: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.addColumnEnabled,
+                    }, className: "mt-5", devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.fixedPagination, advSettings: {
+                        addColumnEnabled: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.addColumnEnabled,
                         renderAddColumnElements: renderAddMathColumn,
-                        dragEnabled: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.advDragEnabled,
-                        sortEnabled: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.advSortEnabled,
-                        filterEnabled: ((_w = props.bareSettings) === null || _w === void 0 ? void 0 : _w.bareFlexFilters)
+                        dragEnabled: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.advDragEnabled,
+                        sortEnabled: (_x = props.organise) === null || _x === void 0 ? void 0 : _x.advSortEnabled,
+                        filterEnabled: ((_y = props.bareSettings) === null || _y === void 0 ? void 0 : _y.bareFlexFilters)
                             ? false
-                            : (_x = props.organise) === null || _x === void 0 ? void 0 : _x.advFilterEnabled,
+                            : (_z = props.organise) === null || _z === void 0 ? void 0 : _z.advFilterEnabled,
                         sortId: activeSortId,
-                        sortOptions: (_z = (_y = props.organise) === null || _y === void 0 ? void 0 : _y.renderReferenceLabelOptions) === null || _z === void 0 ? void 0 : _z.call(_y),
+                        sortOptions: (_1 = (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.renderReferenceLabelOptions) === null || _1 === void 0 ? void 0 : _1.call(_0),
                         onSortColumn: handleSortColumn,
-                        onDragColumn: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.onChangeDrag,
+                        onDragColumn: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.onChangeDrag,
                         filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                             var _a;
                             return {
@@ -7758,7 +7992,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             return renderSearchContent(newQuery);
                         },
                     }, editable: {
-                        active: ((_1 = props.edit) === null || _1 === void 0 ? void 0 : _1.listEditable) && !props.edit.disabledUpdate
+                        active: ((_3 = props.edit) === null || _3 === void 0 ? void 0 : _3.listEditable) && !props.edit.disabledUpdate
                             ? true
                             : false,
                         onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -7772,7 +8006,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             });
                         }); },
                     }, onObjectEdit: handleObjectCellEdit, addable: {
-                        active: ((_2 = props.edit) === null || _2 === void 0 ? void 0 : _2.listAddable) ? true : false,
+                        active: ((_4 = props.edit) === null || _4 === void 0 ? void 0 : _4.listAddable) ? true : false,
                         onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
@@ -7783,27 +8017,27 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 }
                             });
                         }); },
-                    }, darkMode: (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.darkMode, hidePagination: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.disableEllipsisOnLongWord, pinColumns: (_6 = props.bareSettings) === null || _6 === void 0 ? void 0 : _6.bareListTablePinColumns }));
+                    }, darkMode: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkMode, hidePagination: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.disableEllipsisOnLongWord, pinColumns: (_8 = props.bareSettings) === null || _8 === void 0 ? void 0 : _8.bareListTablePinColumns }));
             }
-            return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], referencesOptions: listReferencesOptions, size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_8 = (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.disableSelectFullData) === null || _8 === void 0 ? void 0 : _8.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+            return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], referencesOptions: listReferencesOptions, size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_10 = (_9 = props.organise) === null || _9 === void 0 ? void 0 : _9.disableSelectFullData) === null || _10 === void 0 ? void 0 : _10.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                     selectedIds.length > 0 &&
-                        !((_9 = props.edit) === null || _9 === void 0 ? void 0 : _9.disabledUpdate) &&
-                        !((_10 = props.bareSettings) === null || _10 === void 0 ? void 0 : _10.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
+                        !((_11 = props.edit) === null || _11 === void 0 ? void 0 : _11.disabledUpdate) &&
+                        !((_12 = props.bareSettings) === null || _12 === void 0 ? void 0 : _12.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Change to Draft", disable: loading, onClick: function () {
                                 handleBatchDraftData();
                             } }),
                         react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Clone Items", disable: loading, onClick: function () {
                                 handleCloneSelectedData();
                             } }))),
-                    ((_11 = props.edit) === null || _11 === void 0 ? void 0 : _11.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
+                    ((_13 = props.edit) === null || _13 === void 0 ? void 0 : _13.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
                             handleGenerateDeletePasscode();
                             setDeleteModal(true);
                         } })),
-                    !isFirebase && !((_12 = props.edit) === null || _12 === void 0 ? void 0 : _12.disableBatchUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
+                    !isFirebase && !((_14 = props.edit) === null || _14 === void 0 ? void 0 : _14.disableBatchUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
                             setBatchUpdateModal(true);
                         } })),
-                    ((_13 = props.bareSettings) === null || _13 === void 0 ? void 0 : _13.bareListMultipleSelectAddtionalActions) &&
-                        ((_15 = (_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareListMultipleSelectAddtionalActions) === null || _15 === void 0 ? void 0 : _15.map(function (eachButton) {
+                    ((_15 = props.bareSettings) === null || _15 === void 0 ? void 0 : _15.bareListMultipleSelectAddtionalActions) &&
+                        ((_17 = (_16 = props.bareSettings) === null || _16 === void 0 ? void 0 : _16.bareListMultipleSelectAddtionalActions) === null || _17 === void 0 ? void 0 : _17.map(function (eachButton) {
                             return (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm ".concat(eachButton.className), text: eachButton.text, onClick: function () {
                                     var _a, _b;
                                     (_a = eachButton.onClick) === null || _a === void 0 ? void 0 : _a.call(eachButton, selectedIds, selectAll, (_b = renderImpSearchFilterConditions()) !== null && _b !== void 0 ? _b : []);
@@ -7811,20 +8045,20 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }))), handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), pageIndex: pageIndex !== null && pageIndex !== void 0 ? pageIndex : 0, onClickRow: function (id) {
                     var _a, _b;
                     (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                }, linkType: props.linkType, custom: props.custom, newTabUrl: (_17 = (_16 = props.newTabUrl) === null || _16 === void 0 ? void 0 : _16.default) !== null && _17 !== void 0 ? _17 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_19 = (_18 = props.newTabUrl) === null || _18 === void 0 ? void 0 : _18.addons) !== null && _19 !== void 0 ? _19 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                }, linkType: props.linkType, custom: props.custom, newTabUrl: (_19 = (_18 = props.newTabUrl) === null || _18 === void 0 ? void 0 : _18.default) !== null && _19 !== void 0 ? _19 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_21 = (_20 = props.newTabUrl) === null || _20 === void 0 ? void 0 : _20.addons) !== null && _21 !== void 0 ? _21 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                     handlePagination(value);
-                }, className: "mt-5", lib: { axios: (_20 = props.lib) === null || _20 === void 0 ? void 0 : _20.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_21 = props.organise) === null || _21 === void 0 ? void 0 : _21.fixedPagination, advSettings: {
-                    addColumnEnabled: (_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.addColumnEnabled,
+                }, className: "mt-5", lib: { axios: (_22 = props.lib) === null || _22 === void 0 ? void 0 : _22.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.fixedPagination, advSettings: {
+                    addColumnEnabled: (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.addColumnEnabled,
                     renderAddColumnElements: renderAddMathColumn,
-                    dragEnabled: (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.advDragEnabled,
-                    sortEnabled: (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.advSortEnabled,
-                    filterEnabled: ((_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareFlexFilters)
+                    dragEnabled: (_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.advDragEnabled,
+                    sortEnabled: (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.advSortEnabled,
+                    filterEnabled: ((_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.bareFlexFilters)
                         ? false
-                        : (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.advFilterEnabled,
+                        : (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.advFilterEnabled,
                     sortId: activeSortId,
-                    sortOptions: (_28 = (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.renderReferenceLabelOptions) === null || _28 === void 0 ? void 0 : _28.call(_27),
+                    sortOptions: (_30 = (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.renderReferenceLabelOptions) === null || _30 === void 0 ? void 0 : _30.call(_29),
                     onSortColumn: handleSortColumn,
-                    onDragColumn: (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.onChangeDrag,
+                    onDragColumn: (_31 = props.organise) === null || _31 === void 0 ? void 0 : _31.onChangeDrag,
                     filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                         var _a;
                         return {
@@ -7841,7 +8075,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return renderSearchContent(newQuery);
                     },
                 }, editable: {
-                    active: ((_30 = props.edit) === null || _30 === void 0 ? void 0 : _30.listEditable) && !props.edit.disabledUpdate
+                    active: ((_32 = props.edit) === null || _32 === void 0 ? void 0 : _32.listEditable) && !props.edit.disabledUpdate
                         ? true
                         : false,
                     onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -7855,7 +8089,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         });
                     }); },
                 }, onObjectEdit: handleObjectCellEdit, addable: {
-                    active: ((_31 = props.edit) === null || _31 === void 0 ? void 0 : _31.listAddable) ? true : false,
+                    active: ((_33 = props.edit) === null || _33 === void 0 ? void 0 : _33.listAddable) ? true : false,
                     onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
@@ -7866,11 +8100,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                         });
                     }); },
-                }, darkMode: (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.darkMode, hidePagination: (_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.disableEllipsisOnLongWord }));
+                }, darkMode: (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.darkMode, hidePagination: (_35 = props.organise) === null || _35 === void 0 ? void 0 : _35.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.disableEllipsisOnLongWord }));
         }
     };
     var renderTabContent = function (tabs, dataType, viewType) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32;
+        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;
         var selectedTabData = tabs.find(function (eachTab) {
             if (eachTab.id === viewType) {
                 return eachTab;
@@ -7944,7 +8178,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         });
                         var tabElement = [];
                         sortedGroups.forEach(function (eachKey) {
-                            var _a, _b, _c;
+                            var _a, _b, _c, _d, _e, _f, _g;
                             var listObjModels = groups[eachKey].filter(function (eachModel) {
                                 return eachModel.type === "listObject" && !eachModel.hideRead;
                             });
@@ -7952,13 +8186,20 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             if ((Array.isArray(listData) && (listData === null || listData === void 0 ? void 0 : listData.length) > 0) ||
                                 listObjModels.length > 0) {
                                 tabElement.push(react_1.default.createElement("div", { key: "section-".concat(eachKey) },
-                                    Array.isArray(listData) && (listData === null || listData === void 0 ? void 0 : listData.length) > 0 && (react_1.default.createElement(detailList_1.DetailList, { model: groups[eachKey], referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: eachKey, list: listData, size: ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareCompactMode)
+                                    Array.isArray(listData) && (listData === null || listData === void 0 ? void 0 : listData.length) > 0 && (react_1.default.createElement(detailList_1.DetailList, { darkMode: (_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode, darkModeBg: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.darkModeBg, model: groups[eachKey], referenceModel: referenceModelSchema, className: "mt-5 rounded-md ".concat(((_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkMode) ? "bg-white/5" : "bg-white"), title: eachKey, list: listData, 
+                                        // INFO: a tabbed form is long by definition — its read
+                                        // view uses the dense label : value rows
+                                        size: ((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareCompactMode) || hasTabs_1
                                             ? "compact"
                                             : "default", handleReferenceLink: !schemaPresent &&
-                                            ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareReadReferenceView)
+                                            ((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareReadReferenceView)
                                             ? props.bareSettings.bareReadReferenceView
-                                            : undefined, splitView: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.splitView })),
-                                    listObjModels.length > 0 && (react_1.default.createElement("div", { className: "px-6" }, renderListObject("read", listObjModels.map(function (eachModel) { return eachModel.id; }))))));
+                                            : undefined, splitView: (_f = props.organise) === null || _f === void 0 ? void 0 : _f.splitView })),
+                                    listObjModels.length > 0 && (
+                                    // INFO: same card as the DetailList sections above so a
+                                    // nested table lines up with them instead of sitting
+                                    // indented on the page background
+                                    react_1.default.createElement("div", { className: "mt-5 rounded-md px-4 pb-4 sm:px-6 ".concat(((_g = props.organise) === null || _g === void 0 ? void 0 : _g.darkMode) ? "bg-white/5" : "bg-white") }, renderListObject("read", listObjModels.map(function (eachModel) { return eachModel.id; }))))));
                             }
                         });
                         var allGanttCharts = Object.values(groups)
@@ -7977,15 +8218,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             readElement_1.push(react_1.default.createElement("div", { key: "tab-section-".concat(eachTab), ref: function (el) {
                                     readTabSectionRefs.current[eachTab] = el;
                                 } },
-                                hasTabs_1 && (react_1.default.createElement("div", { className: "bg-primary-500 rounded-lg mt-5 ".concat(((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareCompactMode)
-                                        ? "px-4 py-2"
-                                        : "p-4") },
-                                    react_1.default.createElement("h2", { className: "text-white font-semibold ".concat(((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode)
-                                            ? "text-base"
-                                            : "text-lg") }, eachTab))),
+                                hasTabs_1 && (react_1.default.createElement("div", { className: "bg-primary-500 rounded-lg mt-5 px-4 py-2" },
+                                    react_1.default.createElement("h2", { className: "text-white font-semibold text-base" }, eachTab))),
                                 tabElement,
-                                allGanttCharts.length > 0 && (react_1.default.createElement("div", { className: "px-6" }, renderGanttChart("read", allGanttCharts.map(function (eachModel) { return eachModel.id; })))),
-                                allCanvas.length > 0 && (react_1.default.createElement("div", { className: "px-6" }, renderCanvas("read", allCanvas.map(function (eachModel) { return eachModel.id; }))))));
+                                allGanttCharts.length > 0 && (react_1.default.createElement("div", { className: "mt-5 rounded-md px-4 pb-4 sm:px-6 ".concat(((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode) ? "bg-white/5" : "bg-white") }, renderGanttChart("read", allGanttCharts.map(function (eachModel) { return eachModel.id; })))),
+                                allCanvas.length > 0 && (react_1.default.createElement("div", { className: "mt-5 rounded-md px-4 pb-4 sm:px-6 ".concat(((_b = props.organise) === null || _b === void 0 ? void 0 : _b.darkMode) ? "bg-white/5" : "bg-white") }, renderCanvas("read", allCanvas.map(function (eachModel) { return eachModel.id; }))))));
                         }
                     });
                     var showReadFloatingNav_1 = ((_f = props.organise) === null || _f === void 0 ? void 0 : _f.showReadFloatingNav) && allTabSections_1.length > 1;
@@ -8024,9 +8261,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }
                 else {
                     return (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(detailList_1.DetailList, { model: structure, referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: "General Details", list: renderDetailListData(structure), size: ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareCompactMode) ? "compact" : "default", handleReferenceLink: !schemaPresent && ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareReadReferenceView)
+                        react_1.default.createElement(detailList_1.DetailList, { darkMode: (_g = props.organise) === null || _g === void 0 ? void 0 : _g.darkMode, darkModeBg: (_h = props.organise) === null || _h === void 0 ? void 0 : _h.darkModeBg, model: structure, referenceModel: referenceModelSchema, className: "mt-5 rounded-md ".concat(((_j = props.organise) === null || _j === void 0 ? void 0 : _j.darkMode)
+                                ? ((_l = (_k = props.organise) === null || _k === void 0 ? void 0 : _k.darkModeBg) !== null && _l !== void 0 ? _l : "bg-gray-900")
+                                : "bg-white"), title: "General Details", list: renderDetailListData(structure), size: ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareCompactMode) ? "compact" : "default", handleReferenceLink: !schemaPresent && ((_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareReadReferenceView)
                                 ? props.bareSettings.bareReadReferenceView
-                                : undefined, splitView: (_j = props.organise) === null || _j === void 0 ? void 0 : _j.splitView }),
+                                : undefined, splitView: (_p = props.organise) === null || _p === void 0 ? void 0 : _p.splitView }),
                         react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(dataType)),
                         react_1.default.createElement("div", { className: "mt-8" }, renderListObject(dataType)),
                         react_1.default.createElement("div", { className: "mt-8" }, renderGanttChart(dataType)),
@@ -8035,76 +8274,85 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
         }
         else if (selectedTabData) {
-            if ((_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareListComponent) {
+            if ((_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareListComponent) {
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     props.bareSettings.bareListComponent(tableData, spaceTableData, tableLoading, pageIndex),
-                    !((_l = props.organise) === null || _l === void 0 ? void 0 : _l.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: renderResolvedPaginationType(), handleUpdatePageIndex: function (value) {
+                    !((_r = props.organise) === null || _r === void 0 ? void 0 : _r.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: renderResolvedPaginationType(), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, darkMode: (_m = props.organise) === null || _m === void 0 ? void 0 : _m.darkMode, customPaginationSize: customPaginationSize }))));
+                        }, darkMode: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.darkMode, customPaginationSize: customPaginationSize }))));
             }
             else if (selectedTabData.viewType === "iframe") {
                 if (selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.customComponent) {
                     return selectedTabData.customComponent;
                 }
                 else {
-                    return (react_1.default.createElement("iframe", { id: "blixify-iframe", className: "w-full mt-5", style: { height: "70vh" }, src: (_o = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.iframeSrc) !== null && _o !== void 0 ? _o : "", title: (_p = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.id) !== null && _p !== void 0 ? _p : "", onLoad: props.onLoadIframe }));
+                    return (react_1.default.createElement("iframe", { id: "blixify-iframe", className: "w-full mt-5", style: { height: "70vh" }, src: (_t = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.iframeSrc) !== null && _t !== void 0 ? _t : "", title: (_u = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.id) !== null && _u !== void 0 ? _u : "", onLoad: props.onLoadIframe }));
                 }
             }
             else if (selectedTabData.viewType === "list") {
                 // INFO: when bareNewDTW is enabled, render NewList instead of legacy List
-                if ((_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareNewDTW) {
-                    return (react_1.default.createElement(newList_1.NewList, { paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_s = (_r = props.organise) === null || _r === void 0 ? void 0 : _r.disableSelectFullData) === null || _s === void 0 ? void 0 : _s.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", maxSelectedCount: (_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareListMaxSelectedCount, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
-                            selectedIds.length > 0 && !((_u = props.edit) === null || _u === void 0 ? void 0 : _u.disabledUpdate) && (react_1.default.createElement(react_1.default.Fragment, null,
+                if ((_v = props.bareSettings) === null || _v === void 0 ? void 0 : _v.bareNewDTW) {
+                    return (react_1.default.createElement(newList_1.NewList, { darkModeBg: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.darkModeBg, paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_y = (_x = props.organise) === null || _x === void 0 ? void 0 : _x.disableSelectFullData) === null || _y === void 0 ? void 0 : _y.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", maxSelectedCount: (_z = props.bareSettings) === null || _z === void 0 ? void 0 : _z.bareListMaxSelectedCount, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                            selectedIds.length > 0 && !((_0 = props.edit) === null || _0 === void 0 ? void 0 : _0.disabledUpdate) && (react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Change to Draft", disable: loading, onClick: function () {
                                         handleBatchDraftData();
                                     } }),
                                 react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Clone Items", disable: loading, onClick: function () {
                                         handleCloneSelectedData();
                                     } }))),
-                            ((_v = props.edit) === null || _v === void 0 ? void 0 : _v.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
+                            ((_1 = props.edit) === null || _1 === void 0 ? void 0 : _1.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
                                     handleGenerateDeletePasscode();
                                     setDeleteModal(true);
                                 } })),
-                            !isFirebase && !((_w = props.edit) === null || _w === void 0 ? void 0 : _w.disabledUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
+                            !isFirebase && !((_2 = props.edit) === null || _2 === void 0 ? void 0 : _2.disabledUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
                                     setBatchUpdateModal(true);
                                 } }))), onClickRow: function (id) {
                             var _a, _b;
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_y = (_x = props.newTabUrl) === null || _x === void 0 ? void 0 : _x.default) !== null && _y !== void 0 ? _y : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_0 = (_z = props.newTabUrl) === null || _z === void 0 ? void 0 : _z.addons) !== null && _0 !== void 0 ? _0 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_4 = (_3 = props.newTabUrl) === null || _3 === void 0 ? void 0 : _3.default) !== null && _4 !== void 0 ? _4 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_6 = (_5 = props.newTabUrl) === null || _5 === void 0 ? void 0 : _5.addons) !== null && _6 !== void 0 ? _6 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, darkMode: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.darkMode, className: "mt-5", hidePagination: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.hidePagination, customPaginationSize: customPaginationSize, mobileTooltip: (_3 = props.bareSettings) === null || _3 === void 0 ? void 0 : _3.bareListMobileTooltip }));
+                        }, darkMode: (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.darkMode, className: "mt-5", hidePagination: (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.hidePagination, customPaginationSize: customPaginationSize, mobileTooltip: (_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.bareListMobileTooltip }));
                 }
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(list_1.List, { paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_5 = (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.disableSelectFullData) === null || _5 === void 0 ? void 0 : _5.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
-                            selectedIds.length > 0 && !((_6 = props.edit) === null || _6 === void 0 ? void 0 : _6.disabledUpdate) && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(list_1.List, { darkModeBg: (_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.darkModeBg, paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_12 = (_11 = props.organise) === null || _11 === void 0 ? void 0 : _11.disableSelectFullData) === null || _12 === void 0 ? void 0 : _12.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                            selectedIds.length > 0 && !((_13 = props.edit) === null || _13 === void 0 ? void 0 : _13.disabledUpdate) && (react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Change to Draft", disable: loading, onClick: function () {
                                         handleBatchDraftData();
                                     } }),
                                 react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Clone Items", disable: loading, onClick: function () {
                                         handleCloneSelectedData();
                                     } }))),
-                            ((_7 = props.edit) === null || _7 === void 0 ? void 0 : _7.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
+                            ((_14 = props.edit) === null || _14 === void 0 ? void 0 : _14.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
                                     handleGenerateDeletePasscode();
                                     setDeleteModal(true);
                                 } })),
-                            !isFirebase && !((_8 = props.edit) === null || _8 === void 0 ? void 0 : _8.disabledUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
+                            !isFirebase && !((_15 = props.edit) === null || _15 === void 0 ? void 0 : _15.disabledUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
                                     setBatchUpdateModal(true);
                                 } }))), onClickRow: function (id) {
                             var _a, _b;
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_10 = (_9 = props.newTabUrl) === null || _9 === void 0 ? void 0 : _9.default) !== null && _10 !== void 0 ? _10 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_12 = (_11 = props.newTabUrl) === null || _11 === void 0 ? void 0 : _11.addons) !== null && _12 !== void 0 ? _12 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_17 = (_16 = props.newTabUrl) === null || _16 === void 0 ? void 0 : _16.default) !== null && _17 !== void 0 ? _17 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_19 = (_18 = props.newTabUrl) === null || _18 === void 0 ? void 0 : _18.addons) !== null && _19 !== void 0 ? _19 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, className: "mt-5", hidePagination: (_13 = props.organise) === null || _13 === void 0 ? void 0 : _13.hidePagination, customPaginationSize: customPaginationSize })));
+                        }, className: "mt-5", hidePagination: (_20 = props.organise) === null || _20 === void 0 ? void 0 : _20.hidePagination, customPaginationSize: customPaginationSize })));
             }
             else if (selectedTabData.viewType === "grid") {
                 var isScrollMode = renderCheckScrollMode();
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(grid_1.Grid, { paginationType: renderResolvedPaginationType(), data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, horizontalScroll: isScrollMode, pageIndex: pageIndex, onClickData: function (id) {
+                    react_1.default.createElement(grid_1.Grid, { darkMode: (_21 = props.organise) === null || _21 === void 0 ? void 0 : _21.darkMode, darkModeBg: (_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.darkModeBg, paginationType: renderResolvedPaginationType(), data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, horizontalScroll: isScrollMode, pageIndex: pageIndex, onClickData: function (id) {
                             var _a, _b;
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_15 = (_14 = props.newTabUrl) === null || _14 === void 0 ? void 0 : _14.default) !== null && _15 !== void 0 ? _15 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_17 = (_16 = props.newTabUrl) === null || _16 === void 0 ? void 0 : _16.addons) !== null && _17 !== void 0 ? _17 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_24 = (_23 = props.newTabUrl) === null || _23 === void 0 ? void 0 : _23.default) !== null && _24 !== void 0 ? _24 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_26 = (_25 = props.newTabUrl) === null || _25 === void 0 ? void 0 : _25.addons) !== null && _26 !== void 0 ? _26 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                            handlePagination(value);
+                        }, imgContain: selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.gridContain, gridColClassName: (_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.bareListGridColClassName, className: "mt-5", 
+                        // INFO: under the new DTW the grid keeps the same footer as the
+                        // table and list views instead of its own legacy page buttons
+                        hidePagination: ((_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.hidePagination) ||
+                            !!((_29 = props.bareSettings) === null || _29 === void 0 ? void 0 : _29.bareNewDTW), customPaginationSize: customPaginationSize }),
+                    ((_30 = props.bareSettings) === null || _30 === void 0 ? void 0 : _30.bareNewDTW) &&
+                        !((_31 = props.organise) === null || _31 === void 0 ? void 0 : _31.hidePagination) && (react_1.default.createElement(newPagination_1.NewPagination, { paginationType: renderResolvedPaginationType(), pageIndex: pageIndex, limit: limit, size: size, cursor: cursor, resultCount: renderGridAndListData(selectedTabData.viewImage, "grid")
+                            .length, customPaginationSize: customPaginationSize, darkMode: (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.darkMode, darkModeBg: (_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.darkModeBg, handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, imgContain: selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.gridContain, gridColClassName: (_18 = props.bareSettings) === null || _18 === void 0 ? void 0 : _18.bareListGridColClassName, className: "mt-5", hidePagination: (_19 = props.organise) === null || _19 === void 0 ? void 0 : _19.hidePagination, customPaginationSize: customPaginationSize })));
+                        } }))));
             }
             else if (selectedTabData.viewType === "calendar") {
                 var calendarSettings_1 = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.calendarSettings;
@@ -8204,7 +8452,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return eventAvailabilities;
                 };
                 // INFO: when bareNewDTW is enabled, render NewCalendar instead of legacy Calendar
-                if ((_20 = props.bareSettings) === null || _20 === void 0 ? void 0 : _20.bareNewDTW) {
+                if ((_34 = props.bareSettings) === null || _34 === void 0 ? void 0 : _34.bareNewDTW) {
                     var newCalendarEvents = renderEventAvailabilities().map(function (ev) {
                         var _a, _b, _c, _d;
                         return ({
@@ -8224,13 +8472,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     // INFO: viewSwitch — optional Month/Week/Agenda toggle. The range
                     // query follows via calendarView ("dayGridMonth" ↔ "timeGridWeek");
                     // agenda lists the fetched month chronologically.
-                    var viewSwitchOptions = (_21 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.viewSwitch) !== null && _21 !== void 0 ? _21 : [];
+                    var viewSwitchOptions = (_35 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.viewSwitch) !== null && _35 !== void 0 ? _35 : [];
                     var VIEW_VARIANT_MAP = {
                         month: "fullMonth",
                         week: "weekTimeGrid",
                         agenda: "agenda",
                     };
-                    var activeVariant = (_22 = VIEW_VARIANT_MAP[newCalendarViewMode]) !== null && _22 !== void 0 ? _22 : "fullMonth";
+                    var activeVariant = (_36 = VIEW_VARIANT_MAP[newCalendarViewMode]) !== null && _36 !== void 0 ? _36 : "fullMonth";
                     return (react_1.default.createElement("div", { className: "mt-4" },
                         viewSwitchOptions.length > 1 && (react_1.default.createElement("div", { className: "mb-2 flex justify-end" },
                             react_1.default.createElement("div", { className: "inline-flex rounded-lg border border-gray-200 bg-white p-0.5" }, viewSwitchOptions.map(function (view) { return (react_1.default.createElement("button", { key: view, type: "button", onClick: function () {
@@ -8272,9 +8520,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 var _a, _b;
                                 if (event.id)
                                     (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", event.id, "general");
-                            }, darkMode: (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.darkMode, className: "w-full" }))));
+                            }, darkMode: (_37 = props.organise) === null || _37 === void 0 ? void 0 : _37.darkMode, className: "w-full" }))));
                 }
-                return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement(calendar_1.Calendar, { currentDate: calendarTabMonth, calendarView: (_24 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.defaultView) !== null && _24 !== void 0 ? _24 : calendarView, handleMonthChange: function (date) {
+                return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement(calendar_1.Calendar, { currentDate: calendarTabMonth, calendarView: (_38 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.defaultView) !== null && _38 !== void 0 ? _38 : calendarView, handleMonthChange: function (date) {
                         var startOfMonth = (0, dayjs_1.default)(calendarTabMonth).startOf("month");
                         var endOfMonth = (0, dayjs_1.default)(calendarTabMonth).endOf("month");
                         if (!(0, dayjs_1.default)(date).isBetween(startOfMonth, endOfMonth)) {
@@ -8292,11 +8540,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             else if (selectedTabData.viewType === "feeds") {
                 var contentList_1 = [];
                 var feedsSettings_1 = selectedTabData.feedsSettings;
-                var customFeedsData = (_25 = feedsSettings_1 === null || feedsSettings_1 === void 0 ? void 0 : feedsSettings_1.customFeedsData) === null || _25 === void 0 ? void 0 : _25.call(feedsSettings_1, tableData, spaceTableData);
+                var customFeedsData = (_39 = feedsSettings_1 === null || feedsSettings_1 === void 0 ? void 0 : feedsSettings_1.customFeedsData) === null || _39 === void 0 ? void 0 : _39.call(feedsSettings_1, tableData, spaceTableData);
                 if (customFeedsData && customFeedsData.length > 0) {
                     customFeedsData.map(function (eachData) {
                         var _a, _b, _c, _d;
                         var content = {
+                            id: eachData.id,
                             content: (_a = eachData.title) !== null && _a !== void 0 ? _a : "",
                             addContent: (_b = eachData.content) !== null && _b !== void 0 ? _b : "",
                             step: (react_1.default.createElement("div", { className: "flex flex-col" },
@@ -8319,6 +8568,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         var _a, _b;
                         if (feedsSettings_1 && feedsSettings_1.title && feedsSettings_1.desc) {
                             var content = {
+                                id: eachData.id,
                                 content: (_a = eachData[feedsSettings_1.title || ""]) !== null && _a !== void 0 ? _a : "",
                                 addContent: (react_1.default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, (_b = eachData[feedsSettings_1.content || ""]) !== null && _b !== void 0 ? _b : "")),
                                 step: (react_1.default.createElement("div", { className: "flex flex-col" },
@@ -8332,12 +8582,24 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                     });
                 }
-                return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement("div", { className: "p-4 bg-white rounded-lg" },
-                    react_1.default.createElement(feeds_1.Feeds, { bold: true, content: contentList_1, darkMode: (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.darkMode }),
+                return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement("div", { 
+                    // INFO: NewFeeds is already a card like the table and list, so the new
+                    // DTW renders it bare; the legacy feed still needs its own surface
+                    className: ((_40 = props.bareSettings) === null || _40 === void 0 ? void 0 : _40.bareNewDTW)
+                        ? ""
+                        : "p-4 rounded-lg ".concat(((_41 = props.organise) === null || _41 === void 0 ? void 0 : _41.darkMode) ? "bg-white/5" : "bg-white") },
+                    ((_42 = props.bareSettings) === null || _42 === void 0 ? void 0 : _42.bareNewDTW) ? (react_1.default.createElement(newFeeds_1.NewFeeds, { bold: true, content: contentList_1, darkMode: (_43 = props.organise) === null || _43 === void 0 ? void 0 : _43.darkMode, onClickItem: function (id) { var _a, _b; return (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general"); } })) : (react_1.default.createElement(feeds_1.Feeds, { bold: true, content: contentList_1, darkMode: (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.darkMode })),
                     react_1.default.createElement("div", { className: "my-10" }),
-                    contentList_1.length > 0 && !((_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: renderResolvedPaginationType(), handleUpdatePageIndex: function (value) {
+                    contentList_1.length > 0 &&
+                        !((_45 = props.organise) === null || _45 === void 0 ? void 0 : _45.hidePagination) &&
+                        ((_46 = props.bareSettings) === null || _46 === void 0 ? void 0 : _46.bareNewDTW) && (react_1.default.createElement(newPagination_1.NewPagination, { paginationType: renderResolvedPaginationType(), pageIndex: pageIndex, limit: limit, size: size, cursor: cursor, resultCount: tableData.length, customPaginationSize: customPaginationSize, darkMode: (_47 = props.organise) === null || _47 === void 0 ? void 0 : _47.darkMode, darkModeBg: (_48 = props.organise) === null || _48 === void 0 ? void 0 : _48.darkModeBg, handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, darkMode: (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.darkMode, customPaginationSize: customPaginationSize }))))));
+                        } })),
+                    contentList_1.length > 0 &&
+                        !((_49 = props.organise) === null || _49 === void 0 ? void 0 : _49.hidePagination) &&
+                        !((_50 = props.bareSettings) === null || _50 === void 0 ? void 0 : _50.bareNewDTW) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: renderResolvedPaginationType(), handleUpdatePageIndex: function (value) {
+                            handlePagination(value);
+                        }, darkMode: (_51 = props.organise) === null || _51 === void 0 ? void 0 : _51.darkMode, customPaginationSize: customPaginationSize }))))));
             }
             else if (selectedTabData.viewType === "map") {
                 var mapSettings_1 = selectedTabData.mapSettings;
@@ -8436,7 +8698,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             else if (selectedTabData.viewType === "kanban") {
                 var kanbanSettings = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.kanbanSettings;
-                var kanbanTitle_2 = (_29 = kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.title) !== null && _29 !== void 0 ? _29 : "";
+                var kanbanTitle_2 = (_52 = kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.title) !== null && _52 !== void 0 ? _52 : "";
                 var nullColumn_1 = false;
                 var groupBy_1 = [];
                 var groupLabel_1 = [];
@@ -8457,10 +8719,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 });
                 var kanbanData = renderGridAndListData("", "kanban", kanbanTitle_2, kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.useColumnName);
                 // INFO: when bareNewDTW is enabled, render NewKanban instead of legacy Kanban
-                if ((_30 = props.bareSettings) === null || _30 === void 0 ? void 0 : _30.bareNewDTW) {
+                if ((_53 = props.bareSettings) === null || _53 === void 0 ? void 0 : _53.bareNewDTW) {
                     return (react_1.default.createElement(newKanban_1.NewKanban, { className: "inline-flex", data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
                             ? "Data has exceeded limit, please apply filters"
-                            : "", groupCluster: kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.groupCluster, draggable: true, droppable: kanbanDroppable, mobileView: (_31 = props.bareSettings) === null || _31 === void 0 ? void 0 : _31.bareListMobileView, onUpdateData: function (cardId, _fromCol, toCol) {
+                            : "", groupCluster: kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.groupCluster, draggable: true, droppable: kanbanDroppable, mobileView: (_54 = props.bareSettings) === null || _54 === void 0 ? void 0 : _54.bareListMobileView, onUpdateData: function (cardId, _fromCol, toCol) {
                             var _a;
                             setKanbanDroppable(false);
                             handleSubmitData("update", cardId, kanbanTitle_2, (_a = {},
@@ -8469,7 +8731,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }, onClickData: function (id) {
                             var _a, _b;
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, darkMode: (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.darkMode }));
+                        }, darkMode: (_55 = props.organise) === null || _55 === void 0 ? void 0 : _55.darkMode }));
                 }
                 return (react_1.default.createElement(kanban_1.Kanban, { className: "inline-flex", data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
                         ? "Data has exceeded limit, please apply filters"
@@ -8500,7 +8762,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return null;
     };
     var renderNotification = function (location) {
-        var _a;
+        var _a, _b;
         if (notification) {
             var correctIcon = (react_1.default.createElement(outline_1.CheckCircleIcon, { className: "w-10 h-10 text-primary-600" }));
             var incorrectIcon = (react_1.default.createElement(outline_1.XCircleIcon, { className: "w-10 h-10 text-primary-600" }));
@@ -8508,12 +8770,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 return null;
             if (location === "root" && modalVisible)
                 return null;
-            return (react_1.default.createElement(notification_1.Notification, { icon: notification.type ? correctIcon : incorrectIcon, notificationAttribute: {
+            // INFO: nothing a silent step-change save reports is worth a toast
+            if ((notification === null || notification === void 0 ? void 0 : notification.type) && silentDraftRef.current)
+                return null;
+            return (react_1.default.createElement(notification_1.Notification, { darkMode: (_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode, 
+                // INFO: phones keep the familiar bottom toast, lifted above the
+                // floating action bar / floating search
+                position: "bottom", mobileOffsetClassName: "pb-28", icon: notification.type ? correctIcon : incorrectIcon, notificationAttribute: {
                     title: notification.title,
                     desc: notification.msg,
                     visible: true,
                 }, lib: {
-                    Transition: (_a = props.lib) === null || _a === void 0 ? void 0 : _a.Transition,
+                    Transition: (_b = props.lib) === null || _b === void 0 ? void 0 : _b.Transition,
                 }, onClose: function () {
                     setNotification(null);
                     return "";
@@ -8522,22 +8790,22 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return null;
     };
     var renderModalContent = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        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;
         if (loading) {
             return (react_1.default.createElement("div", { className: "mt-5" },
                 react_1.default.createElement(loading_1.Loading, null),
                 react_1.default.createElement("div", { className: "mt-3 text-center sm:mt-5" },
-                    react_1.default.createElement("h3", { className: "text-lg font-medium leading-6 text-gray-900", id: "modal-title" }, "Loading"),
+                    react_1.default.createElement("h3", { className: "text-lg font-medium leading-6 ".concat(((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode) ? "text-white" : "text-gray-900"), id: "modal-title" }, "Loading"),
                     react_1.default.createElement("div", { className: "mt-2" },
-                        react_1.default.createElement("p", { className: "text-sm text-gray-500" }, "Please wait while we are proccessing your request")))));
+                        react_1.default.createElement("p", { className: "text-sm ".concat(((_b = props.organise) === null || _b === void 0 ? void 0 : _b.darkMode) ? "text-gray-300" : "text-gray-500") }, "Please wait while we are proccessing your request")))));
         }
         if (exportPDFLoading) {
             return (react_1.default.createElement("div", { className: "mt-5" },
                 react_1.default.createElement(loading_1.Loading, null),
                 react_1.default.createElement("div", { className: "mt-3 text-center sm:mt-5" },
-                    react_1.default.createElement("h3", { className: "text-lg font-medium leading-6 text-gray-900", id: "modal-title" }, "Loading"),
+                    react_1.default.createElement("h3", { className: "text-lg font-medium leading-6 ".concat(((_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkMode) ? "text-white" : "text-gray-900"), id: "modal-title" }, "Loading"),
                     react_1.default.createElement("div", { className: "mt-2" },
-                        react_1.default.createElement("p", { className: "text-sm text-gray-500" }, "Please wait while PDF is being generated")))));
+                        react_1.default.createElement("p", { className: "text-sm ".concat(((_d = props.organise) === null || _d === void 0 ? void 0 : _d.darkMode) ? "text-gray-300" : "text-gray-500") }, "Please wait while PDF is being generated")))));
         }
         else if (excelModal) {
             return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -8563,13 +8831,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     react_1.default.createElement(button_1.Button, { text: "".concat(stepCSVIndex < 2 ? "Next" : "Submit"), type: "normal", onClick: handleStepCSV }))))));
         }
         else if (exportExcel || exportQR) {
-            var showEmail = exportType !== "pdf" && !((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.exportSettings) === null || _b === void 0 ? void 0 : _b.disableEmail);
-            return (react_1.default.createElement(react_1.default.Fragment, null, queryForm ? (react_1.default.createElement(queryForm_1.QueryForm, { dbModule: (_c = props.lib) === null || _c === void 0 ? void 0 : _c.axios, model: structure, updateQuery: queryIndex >= 0 ? queryList[queryIndex] : undefined, devSettings: props.devSettings, handleCloseForm: function () {
+            var showEmail = exportType !== "pdf" && !((_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.exportSettings) === null || _f === void 0 ? void 0 : _f.disableEmail);
+            return (react_1.default.createElement(react_1.default.Fragment, null, queryForm ? (react_1.default.createElement(queryForm_1.QueryForm, { dbModule: (_g = props.lib) === null || _g === void 0 ? void 0 : _g.axios, model: structure, updateQuery: queryIndex >= 0 ? queryList[queryIndex] : undefined, devSettings: props.devSettings, handleCloseForm: function () {
                     handleViewQuery(-1);
                 }, handleQueryOnComplete: function (queryData) {
                     handlePushQueryList(queryData, queryIndex);
-                }, renderReferenceLabelOptions: ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.renderReferenceLabelOptions)
-                    ? (_e = props.organise) === null || _e === void 0 ? void 0 : _e.renderReferenceLabelOptions
+                }, renderReferenceLabelOptions: ((_h = props.organise) === null || _h === void 0 ? void 0 : _h.renderReferenceLabelOptions)
+                    ? (_j = props.organise) === null || _j === void 0 ? void 0 : _j.renderReferenceLabelOptions
                     : function () {
                         return [];
                     } })) : (react_1.default.createElement("div", null,
@@ -8582,17 +8850,17 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 : "Export your data to .pdf format to be viewable on Adobe/Browser.",
                             "Filter your data exported based on conditions by creating queries at the table below."),
                         react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(textInput_1.TextInput, { ref: exportCSVEmailInputRef, value: exportCSVEmail, type: "email", label: "Email", subLabel: "A download link will be sent to your email", placeholder: (_g = (_f = props.devSettings.currentUser) === null || _f === void 0 ? void 0 : _f.userEmail) !== null && _g !== void 0 ? _g : "Enter your email", onChange: function (e) { return setExportCSVEmail(e.target.value); } }),
+                            react_1.default.createElement(textInput_1.TextInput, { ref: exportCSVEmailInputRef, value: exportCSVEmail, type: "email", label: "Email", subLabel: "A download link will be sent to your email", placeholder: (_l = (_k = props.devSettings.currentUser) === null || _k === void 0 ? void 0 : _k.userEmail) !== null && _l !== void 0 ? _l : "Enter your email", onChange: function (e) { return setExportCSVEmail(e.target.value); } }),
                             react_1.default.createElement("div", { className: "flex mt-5 items-center justify-end" },
                                 react_1.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_1.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: function () { return setQueryForm(!queryForm); } })))),
                     react_1.default.createElement(table_1.Table, { className: "mt-5", header: dataStateModel_1.queryTableHeader, data: renderQueryData(), loading: false }))) : (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("p", null, "Click the button below to download."),
-                    (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(textInput_1.TextInput, { containerClassName: "mt-5", value: exportPDFTitle, type: "text", label: "Title (Optional)", placeholder: (_k = (_j = (_h = props.organise) === null || _h === void 0 ? void 0 : _h.exportSettings) === null || _j === void 0 ? void 0 : _j.defaultExportPDFName) !== null && _k !== void 0 ? _k : "Enter your report title", onChange: function (e) { return setExportPDFTitle(e.target.value); } })),
-                    (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(select_1.Select, { label: "Sum Attribute", containerClassName: "mt-5", value: exportSumAttributeIds, options: (_o = (_m = (_l = props.organise) === null || _l === void 0 ? void 0 : _l.renderReferenceLabelOptions) === null || _m === void 0 ? void 0 : _m.call(_l, "", false, "number")) !== null && _o !== void 0 ? _o : [], staticDropdown: true, onChange: function (value) {
+                    (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(textInput_1.TextInput, { containerClassName: "mt-5", value: exportPDFTitle, type: "text", label: "Title (Optional)", placeholder: (_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.defaultExportPDFName) !== null && _p !== void 0 ? _p : "Enter your report title", onChange: function (e) { return setExportPDFTitle(e.target.value); } })),
+                    (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(select_1.Select, { label: "Sum Attribute", containerClassName: "mt-5", value: exportSumAttributeIds, options: (_s = (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.renderReferenceLabelOptions) === null || _r === void 0 ? void 0 : _r.call(_q, "", false, "number")) !== null && _s !== void 0 ? _s : [], staticDropdown: true, onChange: function (value) {
                             setExportSumAttributeIds(value);
                         } })))),
                 react_1.default.createElement("div", { className: "mt-5 flex items-center justify-between" },
-                    react_1.default.createElement("label", { className: "text-sm font-medium text-gray-700" }, "Hide Sub Items"),
+                    react_1.default.createElement("label", { className: "text-sm font-medium ".concat(((_t = props.organise) === null || _t === void 0 ? void 0 : _t.darkMode) ? "text-gray-200" : "text-gray-700") }, "Hide Sub Items"),
                     react_1.default.createElement(toggle_1.Toggle, { text: "", direction: "right", value: hideSubItems, onClick: function () { return setHideSubItems(!hideSubItems); } })),
                 react_1.default.createElement("div", { className: "flex justify-end mt-5 " },
                     showEmail && (react_1.default.createElement(button_1.Button, { text: "Send to email", size: "small", type: "normal", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -8612,7 +8880,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         } }))))));
         }
         else if (sortModal) {
-            return (react_1.default.createElement(settingsModal_1.SortModal, { sort: activeSortId, onChangeSort: handleSortColumn, renderReferenceLabelOptions: (_p = props.organise) === null || _p === void 0 ? void 0 : _p.renderReferenceLabelOptions, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.SortModal, { sort: activeSortId, onChangeSort: handleSortColumn, renderReferenceLabelOptions: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.renderReferenceLabelOptions, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
@@ -8627,12 +8895,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 } }));
         }
         else if (filterModal) {
-            return (react_1.default.createElement(settingsModal_1.FilterModal, { server: props.devSettings.server, filter: additionalQuery, model: props.model, onChangeFilter: (_q = props.organise) === null || _q === void 0 ? void 0 : _q.onChangeFilter, renderReferenceLabelOptions: (_r = props.organise) === null || _r === void 0 ? void 0 : _r.renderReferenceLabelOptions, renderReferenceSpaceOptions: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.renderReferenceSpaceOptions, setNotification: setNotification, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.FilterModal, { server: props.devSettings.server, filter: additionalQuery, model: props.model, onChangeFilter: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.onChangeFilter, renderReferenceLabelOptions: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.renderReferenceLabelOptions, renderReferenceSpaceOptions: (_x = props.organise) === null || _x === void 0 ? void 0 : _x.renderReferenceSpaceOptions, setNotification: setNotification, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
         else if (addTabModal) {
-            return (react_1.default.createElement(settingsModal_1.TabModal, { type: props.type, tabs: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.extendedTabs, onChangeTabs: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.onChangeTabs, model: structure, renderReferenceLabelOptions: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.renderReferenceLabelOptions, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.TabModal, { type: props.type, tabs: (_y = props.organise) === null || _y === void 0 ? void 0 : _y.extendedTabs, onChangeTabs: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.onChangeTabs, model: structure, renderReferenceLabelOptions: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.renderReferenceLabelOptions, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
@@ -8694,7 +8962,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 return eachModel.id === selectedObjectStructureId;
             });
             if (filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) {
-                var modalModel_1 = (_w = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _w !== void 0 ? _w : [];
+                var modalModel_1 = (_1 = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _1 !== void 0 ? _1 : [];
                 var handleOnFailValidation = function (refList) {
                     var _a, _b;
                     if ((refList === null || refList === void 0 ? void 0 : refList.length) > 0) {
@@ -8766,16 +9034,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         disabledOnEnter_2 = true;
                     return null;
                 });
-                if ((_x = props.bareSettings) === null || _x === void 0 ? void 0 : _x.bareListObjectHandleData) {
+                if ((_2 = props.bareSettings) === null || _2 === void 0 ? void 0 : _2.bareListObjectHandleData) {
                     var listObjectViewType = props.type === "read"
                         ? "read"
                         : selectedObjectId
                             ? "update"
                             : "new";
-                    (_z = (_y = props.bareSettings) === null || _y === void 0 ? void 0 : _y.bareListObjectHandleData) === null || _z === void 0 ? void 0 : _z.call(_y, listObjectViewType, selectedObjectData);
+                    (_4 = (_3 = props.bareSettings) === null || _3 === void 0 ? void 0 : _3.bareListObjectHandleData) === null || _4 === void 0 ? void 0 : _4.call(_3, listObjectViewType, selectedObjectData);
                 }
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " ").concat(gridGap, " pb-32 mt-6 sm:pb-36"), ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType, disabledOnEnter: disabledOnEnter_2, handleOnFailValidation: handleOnFailValidation }, renderDataTemplateFormContent(selectedObjectData, (_0 = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _0 !== void 0 ? _0 : [], objectFormInputRefs, true, filterObjectModel.type === "listObject", undefined, filterObjectModel.type === "listObject"
+                    react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " ").concat(gridGap, " pb-32 mt-6 sm:pb-36"), ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType, disabledOnEnter: disabledOnEnter_2, handleOnFailValidation: handleOnFailValidation }, renderDataTemplateFormContent(selectedObjectData, (_5 = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _5 !== void 0 ? _5 : [], objectFormInputRefs, true, filterObjectModel.type === "listObject", undefined, filterObjectModel.type === "listObject"
                         ? selectedData
                         : undefined)),
                     react_1.default.createElement("div", { className: "flex justify-end pt-8" },
@@ -8840,13 +9108,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     } }))));
     };
     var renderDeleteModalContent = function () {
+        var _a;
         if (!deleteModal)
             return react_1.default.createElement(react_1.default.Fragment, null);
         else
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("div", { className: "px-3 sm:px-0" },
                     react_1.default.createElement("div", { className: "flex" },
-                        react_1.default.createElement("h2", { className: "mt-2 mb-2 text-xl font-bold text-gray-900" }, "Delete Confirmation")),
+                        react_1.default.createElement("h2", { className: "mt-2 mb-2 text-xl font-bold ".concat(((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode) ? "text-white" : "text-gray-900") }, "Delete Confirmation")),
                     react_1.default.createElement("p", { className: "mt-2 mb-4" },
                         "Are you sure you want to permanently delete",
                         " ",
@@ -8988,7 +9257,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_49 = (_48 = props.renderSettings) === null || _48 === void 0 ? void 0 : _48.renderLoadingUI) === null || _49 === void 0 ? void 0 : _49.call(_48)) && loading ? ((_50 = props.renderSettings) === null || _50 === void 0 ? void 0 : _50.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
+        ((_49 = (_48 = props.renderSettings) === null || _48 === void 0 ? void 0 : _48.renderLoadingUI) === null || _49 === void 0 ? void 0 : _49.call(_48)) && loading ? ((_50 = props.renderSettings) === null || _50 === void 0 ? void 0 : _50.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { darkMode: (_51 = props.organise) === null || _51 === void 0 ? void 0 : _51.darkMode, darkModeBg: (_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.darkModeBg, maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
                 var _a, _b;
                 if (loading)
                     return;
@@ -8999,7 +9268,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, { maxWidth: "2xl", open: referenceCreationModal.id ? true : false, renderContent: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_53 = props.organise) === null || _53 === void 0 ? void 0 : _53.darkMode, darkModeBg: (_54 = props.organise) === null || _54 === void 0 ? void 0 : _54.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];
@@ -9015,19 +9284,19 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }, onClose: function () {
                 setReferenceCreationModal({ id: "", name: "", type: "string" });
             } }),
-        react_1.default.createElement(modal_1.Modal, { maxWidth: "2xl", open: Object.keys(referenceDeleteTableData).length > 0, renderContent: renderReferenceDeleteTable, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_55 = props.organise) === null || _55 === void 0 ? void 0 : _55.darkMode, darkModeBg: (_56 = props.organise) === null || _56 === void 0 ? void 0 : _56.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, { open: deleteModal, renderContent: renderDeleteModalContent, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_57 = props.organise) === null || _57 === void 0 ? void 0 : _57.darkMode, darkModeBg: (_58 = props.organise) === null || _58 === void 0 ? void 0 : _58.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, { open: batchUpdateModal, renderContent: renderBatchUpdateModalContent, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_59 = props.organise) === null || _59 === void 0 ? void 0 : _59.darkMode, darkModeBg: (_60 = props.organise) === null || _60 === void 0 ? void 0 : _60.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, { title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_61 = props.organise) === null || _61 === void 0 ? void 0 : _61.darkMode, darkModeBg: (_62 = props.organise) === null || _62 === void 0 ? void 0 : _62.darkModeBg, title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
                 var _a;
                 if (props.space)
                     return (react_1.default.createElement(authModal_1.AuthModal, { space: props.space, userId: (_a = props.id) !== null && _a !== void 0 ? _a : "", type: selectedAuthMethod, authMethods: authMethods, onComplete: handleAuthComplete }));
@@ -9035,7 +9304,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }, onClose: function () {
                 setSelectedAuthMethod("");
             } }),
-        isActivityLog && (react_1.default.createElement(modal_1.Modal, { open: activityModal, title: "Activity Log", renderContent: function () {
+        isActivityLog && (react_1.default.createElement(modal_1.Modal, { darkMode: (_63 = props.organise) === null || _63 === void 0 ? void 0 : _63.darkMode, darkModeBg: (_64 = props.organise) === null || _64 === void 0 ? void 0 : _64.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