blixify-ui-web 1.2.59 → 1.2.63

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

@@ -166,6 +166,18 @@ 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 intialiseDefaultFilterValues = function () {
@@ -238,6 +250,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     }), 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];
+    // 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];
@@ -405,25 +425,26 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     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)({}), referenceDeleteTableData = _139[0], setReferenceDeleteTableData = _139[1];
-    var _140 = (0, react_1.useState)(0), referenceDeleteIndex = _140[0], setReferenceDeleteIndex = _140[1];
-    var _141 = (0, react_1.useState)({
+    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)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _141[0], setReferenceCreationModal = _141[1];
-    var _142 = (0, react_1.useState)({}), referenceModelSchema = _142[0], setReferenceSchema = _142[1];
-    var _143 = (0, react_1.useState)([]), kanbanChecked = _143[0], setKanbanChecked = _143[1];
+    }), 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];
     //INFO : Offline
-    var _144 = (0, react_1.useState)(0), offlineDataLength = _144[0], setOfflineDataLength = _144[1];
-    var _145 = (0, react_1.useState)(false), offlineModal = _145[0], setOfflineModal = _145[1];
+    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];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    var _146 = (0, react_1.useState)(false), isLive = _146[0], setIsLive = _146[1];
-    var _147 = (0, react_1.useState)(false), isLiveOffline = _147[0], setIsLiveOffline = _147[1];
+    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];
     // 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 _148 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _148[0], setIsNetworkOffline = _148[1];
+    var _149 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _149[0], setIsNetworkOffline = _149[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -461,6 +482,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)();
@@ -1467,7 +1492,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;
                     });
@@ -1554,7 +1579,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                             (0, listModule_1.handleDataEditButton)(tempData, (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate, (_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareListActionBtns);
                                             return tempData;
                                         })];
-                                case 2: return [2 /*return*/, (0, listModule_1.handleListDataBasedOnModel)(records, props.devSettings, (_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios, structure, (_b = props.organise) === null || _b === void 0 ? void 0 : _b.handleNavigate, ((_c = props.organise) === null || _c === void 0 ? void 0 : _c.viewId) === "general", setActivityModal, setActivityId, isActivityLog ? (_d = props.edit) === null || _d === void 0 ? void 0 : _d.activityLog : undefined, (_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareListActionBtns, (_f = props.edit) === null || _f === void 0 ? void 0 : _f.disabledUpdate)];
+                                case 2: return [2 /*return*/, (0, listModule_1.handleListDataBasedOnModel)(records, props.devSettings, (_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios, structure, (_b = props.organise) === null || _b === void 0 ? void 0 : _b.handleNavigate, ((_c = props.organise) === null || _c === void 0 ? void 0 : _c.viewId) === "general", setActivityModal, setActivityId, isActivityLog ? (_d = props.edit) === null || _d === void 0 ? void 0 : _d.activityLog : undefined, (_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareListActionBtns, (_f = props.edit) === null || _f === void 0 ? void 0 : _f.disabledUpdate, undefined, handleSeedListReferenceOptions)];
                             }
                         });
                     }); };
@@ -1939,6 +1964,38 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, props.type, props.id, id);
         }
     };
+    // INFO: the list already fetches every referenced document once per page to
+    // print labels. Re-shaping those docs into Select options and handing them
+    // to the table renderers lets an inline-editable reference cell show its
+    // current label immediately — otherwise the cell's Select has no options
+    // until the user types into it, and renders blank.
+    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];
+            // 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) {
+                var _a, _b, _c;
+                var option = {
+                    key: eachDoc[serverId],
+                    label: (_b = eachDoc[(_a = model.referenceLabel) !== null && _a !== void 0 ? _a : ""]) !== null && _b !== void 0 ? _b : (0, moduleUtils_1.renderReferenceStringAttribute)(eachDoc),
+                };
+                if (model.referenceSecondaryLabel)
+                    option.secondaryLabel = (_c = eachDoc[model.referenceSecondaryLabel]) !== null && _c !== void 0 ? _c : "-";
+                return option;
+            });
+        });
+        setListReferencesOptions(function (prev) { return (__assign(__assign({}, prev), seeded)); });
+    };
     var handleSetListData = function (newTableData, newSpaceTableData) {
         var _a, _b, _c, _d, _e;
         setTableData(newTableData);
@@ -1995,7 +2052,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     });
                     prettierDataList = dummyPrettierDataList_1;
                     return [3 /*break*/, 5];
-                case 3: return [4 /*yield*/, (0, listModule_1.handleListDataBasedOnModel)(responseData === null || responseData === void 0 ? void 0 : responseData.data, props.devSettings, (_b = props.lib) === null || _b === void 0 ? void 0 : _b.axios, structure, (_c = props.organise) === null || _c === void 0 ? void 0 : _c.handleNavigate, ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.viewId) === "general", setActivityModal, setActivityId, isActivityLog ? (_e = props.edit) === null || _e === void 0 ? void 0 : _e.activityLog : undefined, (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListActionBtns, (_g = props.edit) === null || _g === void 0 ? void 0 : _g.disabledUpdate)];
+                case 3: return [4 /*yield*/, (0, listModule_1.handleListDataBasedOnModel)(responseData === null || responseData === void 0 ? void 0 : responseData.data, props.devSettings, (_b = props.lib) === null || _b === void 0 ? void 0 : _b.axios, structure, (_c = props.organise) === null || _c === void 0 ? void 0 : _c.handleNavigate, ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.viewId) === "general", setActivityModal, setActivityId, isActivityLog ? (_e = props.edit) === null || _e === void 0 ? void 0 : _e.activityLog : undefined, (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListActionBtns, (_g = props.edit) === null || _g === void 0 ? void 0 : _g.disabledUpdate, undefined, handleSeedListReferenceOptions)];
                 case 4:
                     prettierDataList = _o.sent();
                     if (props.groupId) {
@@ -2134,20 +2191,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:
@@ -2998,7 +3055,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;
@@ -4405,15 +4462,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 : "";
@@ -4639,11 +4700,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.
@@ -4741,7 +4807,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;
@@ -5199,13 +5265,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),
@@ -5229,7 +5297,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),
@@ -6137,7 +6206,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; });
@@ -6405,90 +6476,186 @@ 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.
+    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: "sticky bottom-3 z-20 -mx-2 mt-6 flex flex-row items-center gap-2 whitespace-nowrap rounded-2xl border border-gray-200 bg-white/95 px-3 py-2 shadow-lg backdrop-blur sm:mx-0 sm:px-4" },
+            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: "sticky bottom-3 z-20 -mx-2 mt-6 flex flex-row items-center justify-end gap-2 whitespace-nowrap rounded-2xl border border-gray-200 bg-white/95 px-3 py-2 shadow-lg backdrop-blur sm:mx-0 sm:px-4" },
+            ((_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 = [];
@@ -6498,7 +6665,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;
@@ -6630,7 +6797,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;
         var isBottom = ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionBottom) ? true : false;
         var tabs = renderTabs();
         var pages = [
@@ -6669,7 +6836,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 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.description && (react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)))),
-                                !isBottom && renderActionButtons(props.type))),
+                                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" &&
                             renderBareReadComp(),
@@ -6678,9 +6845,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             !((_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" &&
                                 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({
@@ -6824,9 +6989,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }
                 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 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,
@@ -6842,6 +7009,15 @@ 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,
@@ -6860,15 +7036,15 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         (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.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);
@@ -6882,6 +7058,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 ((_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.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;
                                     var filterByTab = filterModel_1
                                         .map(function (model, index) { return (__assign(__assign({}, model), { refIndex: index })); })
                                         .filter(function (model) {
@@ -6893,14 +7070,20 @@ 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 text-gray-900" }, tabId || "Others"),
+                                            ((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.tabDescriptions) === null || _b === void 0 ? void 0 : _b[tabId]) && (react_1.default.createElement("p", { className: "text-sm text-gray-500 mt-0.5" }, 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))),
                             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) &&
@@ -6912,8 +7095,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 ((_18 = props.bareSettings) === null || _18 === void 0 ? void 0 : _18.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();
@@ -7124,7 +7306,9 @@ 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"
+                            ? // 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" },
@@ -7141,12 +7325,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         react_1.default.createElement("div", { className: ((_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.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 })),
                     renderTabContent(tabs, props.type, viewType),
-                    ((_30 = props.bareSettings) === null || _30 === void 0 ? void 0 : _30.bareListMobileFloatingSearch) &&
+                    ((_30 = props.bareSettings) === null || _30 === void 0 ? void 0 : _30.bareListMobileFloatingSearch) && (react_1.default.createElement("div", { className: "h-28 md:hidden", "aria-hidden": "true" })),
+                    ((_31 = props.bareSettings) === null || _31 === void 0 ? void 0 : _31.bareListMobileFloatingSearch) &&
                         (0, listModule_1.renderFloatingMobileSearch)({
                             filterSearch: filterSearch,
                             handleNameSearch: handleNameSearch,
@@ -7159,15 +7345,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: (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.hideSearch,
+                            darkMode: (_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.darkMode,
+                            floatingOffset: (_34 = props.bareSettings) === null || _34 === void 0 ? void 0 : _34.bareListFloatingActionOffset,
+                            hideFilter: !((_35 = props.bareSettings) === null || _35 === void 0 ? void 0 : _35.bareFlexFilters),
+                            activeFilterCount: ((_36 = props.bareSettings) === null || _36 === void 0 ? void 0 : _36.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 || ((_37 = selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) !== null && _37 !== void 0 ? _37 : 0) > 0,
                         })));
             default:
                 return react_1.default.createElement(react_1.default.Fragment, null);
@@ -7177,7 +7363,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;
         return (0, updateModule_1.renderDataTemplateForm)(state, model, ref, {
             handleOnChangeAddress: handleOnChangeAddress,
             handleOnChangeText: handleOnChangeText,
@@ -7199,10 +7385,14 @@ 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,
         }, {
             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,
@@ -7212,12 +7402,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: (_e = props.organise) === null || _e === void 0 ? void 0 : _e.handleCustomDownloadFile,
         }, {
             selectedObjectId: selectedObjectId,
             selectedObjectStructureId: selectedObjectStructureId,
             parentData: parentData,
-            organiseListObjTableView: ((_e = props.organise) === null || _e === void 0 ? void 0 : _e.listObjectTableView)
+            organiseListObjTableView: ((_f = props.organise) === null || _f === void 0 ? void 0 : _f.listObjectTableView)
                 ? true
                 : false,
             setSelectedObjectStructureId: setSelectedObjectStructureId,
@@ -7227,7 +7417,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, (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareOffline, (_j = (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareUpdateColumnType) !== null && _j !== void 0 ? _j : "two", (_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareUpdateIndividualComponent, (_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareUpdateMobileView);
     };
     var renderGridAndListData = function (imageTag, type, kanbanGroupId, useColumnName) {
         var _a, _b;
@@ -7529,9 +7719,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;
+        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;
@@ -7569,7 +7804,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         react_1.default.createElement("div", { className: "font-semibold text-md mt-5" },
                             "Group By ",
                             eachKey),
-                        react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: filterTableData, spaceData: dataList !== null && dataList !== void 0 ? dataList : [], size: (_b = dataList.length) !== null && _b !== void 0 ? _b : 0, limit: 5, cursor: "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.disableSelectFullData) === null || _d === void 0 ? void 0 : _d.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                        react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: filterTableData, spaceData: dataList !== null && dataList !== void 0 ? dataList : [], referencesOptions: listReferencesOptions, size: (_b = dataList.length) !== null && _b !== void 0 ? _b : 0, limit: 5, cursor: "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.disableSelectFullData) === null || _d === void 0 ? void 0 : _d.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                                 selectedIds.length > 0 &&
                                     !((_e = props.edit) === null || _e === void 0 ? void 0 : _e.disabledUpdate) &&
                                     !((_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -7654,9 +7889,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 : [], 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, { 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: (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.disableSelectFullData) === null || _d === void 0 ? void 0 : _d.table, maxSelectedCount: (_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareListMaxSelectedCount, mobileView: (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListMobileView, mobileTooltip: (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareMobileTooltip, multiActionFloatingBtns: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], (!((_h = props.edit) === null || _h === void 0 ? void 0 : _h.disabledUpdate) &&
+                        !((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareHideTableExtraMultipleAction)
                         ? [
                             {
                                 id: "draft",
@@ -7671,7 +7906,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), (((_k = props.edit) === null || _k === void 0 ? void 0 : _k.deleteBtn)
                         ? [
                             {
                                 id: "delete",
@@ -7682,7 +7917,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 && !((_l = props.edit) === null || _l === void 0 ? void 0 : _l.disableBatchUpdate)
                         ? [
                             {
                                 id: "update",
@@ -7690,7 +7925,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), (((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareListMultipleSelectAddtionalActions)
                         ? props.bareSettings.bareListMultipleSelectAddtionalActions.map(function (eachButton) { return ({
                             id: "dt-list-multi-action-btn-" + eachButton.text,
                             btnText: eachButton.text,
@@ -7699,23 +7934,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: (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.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: (_q = (_p = props.newTabUrl) === null || _p === void 0 ? void 0 : _p.default) !== null && _q !== void 0 ? _q : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_s = (_r = props.newTabUrl) === null || _r === void 0 ? void 0 : _r.addons) !== null && _s !== void 0 ? _s : "&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: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.fixedPagination, advSettings: {
+                        addColumnEnabled: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.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: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.advDragEnabled,
+                        sortEnabled: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.advSortEnabled,
+                        filterEnabled: ((_x = props.bareSettings) === null || _x === void 0 ? void 0 : _x.bareFlexFilters)
                             ? false
-                            : (_x = props.organise) === null || _x === void 0 ? void 0 : _x.advFilterEnabled,
+                            : (_y = props.organise) === null || _y === void 0 ? void 0 : _y.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: (_0 = (_z = props.organise) === null || _z === void 0 ? void 0 : _z.renderReferenceLabelOptions) === null || _0 === void 0 ? void 0 : _0.call(_z),
                         onSortColumn: handleSortColumn,
-                        onDragColumn: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.onChangeDrag,
+                        onDragColumn: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.onChangeDrag,
                         filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                             var _a;
                             return {
@@ -7732,7 +7967,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: ((_2 = props.edit) === null || _2 === void 0 ? void 0 : _2.listEditable) && !props.edit.disabledUpdate
                             ? true
                             : false,
                         onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -7746,7 +7981,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: ((_3 = props.edit) === null || _3 === void 0 ? void 0 : _3.listAddable) ? true : false,
                         onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
@@ -7757,27 +7992,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: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.darkMode, hidePagination: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.disableEllipsisOnLongWord, pinColumns: (_7 = props.bareSettings) === null || _7 === void 0 ? void 0 : _7.bareListTablePinColumns }));
             }
-            return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_8 = (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.disableSelectFullData) === null || _8 === void 0 ? void 0 : _8.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+            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: (_9 = (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.disableSelectFullData) === null || _9 === void 0 ? void 0 : _9.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,
+                        !((_10 = props.edit) === null || _10 === void 0 ? void 0 : _10.disabledUpdate) &&
+                        !((_11 = props.bareSettings) === null || _11 === void 0 ? void 0 : _11.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 () {
+                    ((_12 = props.edit) === null || _12 === void 0 ? void 0 : _12.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 && !((_13 = props.edit) === null || _13 === void 0 ? void 0 : _13.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) {
+                    ((_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareListMultipleSelectAddtionalActions) &&
+                        ((_16 = (_15 = props.bareSettings) === null || _15 === void 0 ? void 0 : _15.bareListMultipleSelectAddtionalActions) === null || _16 === void 0 ? void 0 : _16.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 : []);
@@ -7785,20 +8020,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: (_18 = (_17 = props.newTabUrl) === null || _17 === void 0 ? void 0 : _17.default) !== null && _18 !== void 0 ? _18 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_20 = (_19 = props.newTabUrl) === null || _19 === void 0 ? void 0 : _19.addons) !== null && _20 !== void 0 ? _20 : "&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: (_21 = props.lib) === null || _21 === void 0 ? void 0 : _21.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.fixedPagination, advSettings: {
+                    addColumnEnabled: (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.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: (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.advDragEnabled,
+                    sortEnabled: (_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.advSortEnabled,
+                    filterEnabled: ((_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareFlexFilters)
                         ? false
-                        : (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.advFilterEnabled,
+                        : (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.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: (_29 = (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.renderReferenceLabelOptions) === null || _29 === void 0 ? void 0 : _29.call(_28),
                     onSortColumn: handleSortColumn,
-                    onDragColumn: (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.onChangeDrag,
+                    onDragColumn: (_30 = props.organise) === null || _30 === void 0 ? void 0 : _30.onChangeDrag,
                     filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                         var _a;
                         return {
@@ -7815,7 +8050,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: ((_31 = props.edit) === null || _31 === void 0 ? void 0 : _31.listEditable) && !props.edit.disabledUpdate
                         ? true
                         : false,
                     onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -7829,7 +8064,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: ((_32 = props.edit) === null || _32 === void 0 ? void 0 : _32.listAddable) ? true : false,
                     onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
@@ -7840,7 +8075,7 @@ 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: (_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.darkMode, hidePagination: (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_35 = props.organise) === null || _35 === void 0 ? void 0 : _35.disableEllipsisOnLongWord }));
         }
     };
     var renderTabContent = function (tabs, dataType, viewType) {
@@ -7907,7 +8142,6 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }
                     });
                     sortedTabs.forEach(function (eachTab) {
-                        var _a, _b;
                         var groups = groupedStructures_1[eachTab];
                         var sortedGroups = Object.keys(groups).sort(function (a, b) {
                             if (a === "Others")
@@ -7926,13 +8160,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, { model: groups[eachKey], referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: eachKey, list: listData, 
+                                        // INFO: a tabbed form is long by definition — its read
+                                        // view uses the dense label : value rows
+                                        size: ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareCompactMode) || hasTabs_1
                                             ? "compact"
                                             : "default", handleReferenceLink: !schemaPresent &&
                                             ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.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; }))))));
+                                    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 bg-white px-4 pb-4 sm:px-6" }, renderListObject("read", listObjModels.map(function (eachModel) { return eachModel.id; }))))));
                             }
                         });
                         var allGanttCharts = Object.values(groups)
@@ -7951,15 +8192,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 bg-white px-4 pb-4 sm:px-6" }, renderGanttChart("read", allGanttCharts.map(function (eachModel) { return eachModel.id; })))),
+                                allCanvas.length > 0 && (react_1.default.createElement("div", { className: "mt-5 rounded-md bg-white px-4 pb-4 sm:px-6" }, 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;
@@ -8482,7 +8719,16 @@ 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
+            // INFO: phones keep the familiar bottom toast, lifted above the
+            // floating action bar / floating search
+            , { 
+                // 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,