blixify-ui-web 0.4.207 → 0.4.209

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

@@ -272,55 +272,56 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var _85 = (0, react_1.useState)(((_f = props.devSettings.currentUser) === null || _f === void 0 ? void 0 : _f.userEmail) || ""), exportCSVEmail = _85[0], setExportCSVEmail = _85[1];
     var _86 = (0, react_1.useState)(((_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.exportSettings) === null || _h === void 0 ? void 0 : _h.defaultExportPDFName) || ""), exportPDFTitle = _86[0], setExportPDFTitle = _86[1];
     var _87 = (0, react_1.useState)(false), exportPDFLoading = _87[0], setExportPDFLoading = _87[1];
-    var _88 = (0, react_1.useState)((_l = (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.sumColumnId) !== null && _l !== void 0 ? _l : []), exportSumAttributeIds = _88[0], setExportSumAttributeIds = _88[1];
-    var _89 = (0, react_1.useState)([]), importTableData = _89[0], setImportTableData = _89[1];
-    var _90 = (0, react_1.useState)([]), queryList = _90[0], setQueryList = _90[1];
-    var _91 = (0, react_1.useState)(undefined), allQueryList = _91[0], setAllQueryList = _91[1];
-    var _92 = (0, react_1.useState)(-1), queryIndex = _92[0], setQueryIndex = _92[1];
-    var _93 = (0, react_1.useState)((_m = props.organise) === null || _m === void 0 ? void 0 : _m.groupBy), groupId = _93[0], setGroupId = _93[1];
-    var _94 = (0, react_1.useState)(""), readTabSection = _94[0], setReadTabSection = _94[1];
-    var _95 = (0, react_1.useState)(false), readFloatingNav = _95[0], setReadFloatingNav = _95[1];
+    var _88 = (0, react_1.useState)(false), exportReadPDFLoading = _88[0], setExportReadPDFLoading = _88[1];
+    var _89 = (0, react_1.useState)((_l = (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.sumColumnId) !== null && _l !== void 0 ? _l : []), exportSumAttributeIds = _89[0], setExportSumAttributeIds = _89[1];
+    var _90 = (0, react_1.useState)([]), importTableData = _90[0], setImportTableData = _90[1];
+    var _91 = (0, react_1.useState)([]), queryList = _91[0], setQueryList = _91[1];
+    var _92 = (0, react_1.useState)(undefined), allQueryList = _92[0], setAllQueryList = _92[1];
+    var _93 = (0, react_1.useState)(-1), queryIndex = _93[0], setQueryIndex = _93[1];
+    var _94 = (0, react_1.useState)((_m = props.organise) === null || _m === void 0 ? void 0 : _m.groupBy), groupId = _94[0], setGroupId = _94[1];
+    var _95 = (0, react_1.useState)(""), readTabSection = _95[0], setReadTabSection = _95[1];
+    var _96 = (0, react_1.useState)(false), readFloatingNav = _96[0], setReadFloatingNav = _96[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _96 = (0, react_1.useState)(false), modalVisible = _96[0], setModalVisible = _96[1];
-    var _97 = (0, react_1.useState)(false), deleteModal = _97[0], setDeleteModal = _97[1];
-    var _98 = (0, react_1.useState)(false), excelModal = _98[0], setExcelModal = _98[1];
-    var _99 = (0, react_1.useState)(false), exportExcel = _99[0], setExportExcel = _99[1];
-    var _100 = (0, react_1.useState)(""), exportType = _100[0], setExportType = _100[1];
-    var _101 = (0, react_1.useState)(false), exportQR = _101[0], setExportQR = _101[1];
-    var _102 = (0, react_1.useState)(function () {
+    var _97 = (0, react_1.useState)(false), modalVisible = _97[0], setModalVisible = _97[1];
+    var _98 = (0, react_1.useState)(false), deleteModal = _98[0], setDeleteModal = _98[1];
+    var _99 = (0, react_1.useState)(false), excelModal = _99[0], setExcelModal = _99[1];
+    var _100 = (0, react_1.useState)(false), exportExcel = _100[0], setExportExcel = _100[1];
+    var _101 = (0, react_1.useState)(""), exportType = _101[0], setExportType = _101[1];
+    var _102 = (0, react_1.useState)(false), exportQR = _102[0], setExportQR = _102[1];
+    var _103 = (0, react_1.useState)(function () {
         var _a, _b;
         var firstTabId = (_b = (_a = structure.find(function (item) { return item.tabId; })) === null || _a === void 0 ? void 0 : _a.tabId) !== null && _b !== void 0 ? _b : "";
         return firstTabId;
-    }), activeTab = _102[0], setActiveTab = _102[1];
-    var _103 = (0, react_1.useState)(false), signatureSigning = _103[0], setSignatureSigning = _103[1];
-    var _104 = (0, react_1.useState)({}), selectedData = _104[0], setSelectedData = _104[1];
-    var _105 = (0, react_1.useState)(""), selectedObjectStructureId = _105[0], setSelectedObjectStructureId = _105[1];
-    var _106 = (0, react_1.useState)(""), selectedObjectId = _106[0], setSelectedObjectId = _106[1];
-    var _107 = (0, react_1.useState)(""), selectedListAddressId = _107[0], setSelectedListAddressId = _107[1];
-    var _108 = (0, react_1.useState)(-1), selectedListAddressIndex = _108[0], setSelectedListAddressIndex = _108[1];
-    var _109 = (0, react_1.useState)({
+    }), activeTab = _103[0], setActiveTab = _103[1];
+    var _104 = (0, react_1.useState)(false), signatureSigning = _104[0], setSignatureSigning = _104[1];
+    var _105 = (0, react_1.useState)({}), selectedData = _105[0], setSelectedData = _105[1];
+    var _106 = (0, react_1.useState)(""), selectedObjectStructureId = _106[0], setSelectedObjectStructureId = _106[1];
+    var _107 = (0, react_1.useState)(""), selectedObjectId = _107[0], setSelectedObjectId = _107[1];
+    var _108 = (0, react_1.useState)(""), selectedListAddressId = _108[0], setSelectedListAddressId = _108[1];
+    var _109 = (0, react_1.useState)(-1), selectedListAddressIndex = _109[0], setSelectedListAddressIndex = _109[1];
+    var _110 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _109[0], setSelectedListAddress = _109[1];
-    var _110 = (0, react_1.useState)({}), selectedObjectData = _110[0], setSelectedObjectData = _110[1];
-    var _111 = (0, react_1.useState)(false), referenceLoading = _111[0], setReferenceLoading = _111[1];
-    var _112 = (0, react_1.useState)({}), referencesOptions = _112[0], setReferencesOptions = _112[1];
-    var _113 = (0, react_1.useState)({}), referencesDetails = _113[0], setReferencesDetails = _113[1];
-    var _114 = (0, react_1.useState)({}), referenceDeleteTableData = _114[0], setReferenceDeleteTableData = _114[1];
-    var _115 = (0, react_1.useState)(0), referenceDeleteIndex = _115[0], setReferenceDeleteIndex = _115[1];
-    var _116 = (0, react_1.useState)({
+    }), selectedListAddress = _110[0], setSelectedListAddress = _110[1];
+    var _111 = (0, react_1.useState)({}), selectedObjectData = _111[0], setSelectedObjectData = _111[1];
+    var _112 = (0, react_1.useState)(false), referenceLoading = _112[0], setReferenceLoading = _112[1];
+    var _113 = (0, react_1.useState)({}), referencesOptions = _113[0], setReferencesOptions = _113[1];
+    var _114 = (0, react_1.useState)({}), referencesDetails = _114[0], setReferencesDetails = _114[1];
+    var _115 = (0, react_1.useState)({}), referenceDeleteTableData = _115[0], setReferenceDeleteTableData = _115[1];
+    var _116 = (0, react_1.useState)(0), referenceDeleteIndex = _116[0], setReferenceDeleteIndex = _116[1];
+    var _117 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _116[0], setReferenceCreationModal = _116[1];
-    var _117 = (0, react_1.useState)({}), referenceModelSchema = _117[0], setReferenceSchema = _117[1];
-    var _118 = (0, react_1.useState)([]), kanbanChecked = _118[0], setKanbanChecked = _118[1];
+    }), referenceCreationModal = _117[0], setReferenceCreationModal = _117[1];
+    var _118 = (0, react_1.useState)({}), referenceModelSchema = _118[0], setReferenceSchema = _118[1];
+    var _119 = (0, react_1.useState)([]), kanbanChecked = _119[0], setKanbanChecked = _119[1];
     //INFO : Offline
-    var _119 = (0, react_1.useState)(0), offlineDataLength = _119[0], setOfflineDataLength = _119[1];
-    var _120 = (0, react_1.useState)(false), offlineModal = _120[0], setOfflineModal = _120[1];
+    var _120 = (0, react_1.useState)(0), offlineDataLength = _120[0], setOfflineDataLength = _120[1];
+    var _121 = (0, react_1.useState)(false), offlineModal = _121[0], setOfflineModal = _121[1];
     var previousType = (0, react_1.useRef)();
     var previousSelectedData = (0, react_1.useRef)();
     var formRef = (0, react_1.createRef)();
@@ -1341,23 +1342,53 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     //=====================================================================================
     var handleRemoveObjectListData = function () {
         var clonedSelectedData = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server);
+        var index = -1;
         if (selectedObjectId) {
-            var index = clonedSelectedData[selectedObjectStructureId].findIndex(function (eachData) { return eachData.id === selectedObjectId; });
-            if (index !== -1) {
-                clonedSelectedData[selectedObjectStructureId].splice(index, 1);
-            }
+            index = clonedSelectedData[selectedObjectStructureId].findIndex(function (eachData) { return eachData.id === selectedObjectId; });
+        }
+        if (index === -1 && selectedObjectData) {
+            index = clonedSelectedData[selectedObjectStructureId].findIndex(function (eachData) {
+                return JSON.stringify(eachData) === JSON.stringify(selectedObjectData);
+            });
+        }
+        if (index !== -1) {
+            clonedSelectedData[selectedObjectStructureId].splice(index, 1);
             setSelectedObjectId("");
             setSelectedData(clonedSelectedData);
             handlePopUpModal(false);
         }
     };
     var handleSubmitObjectDataType = function () {
-        var _a, _b;
+        var _a, _b, _c;
         var clonedSelectedData = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, false, showId);
         var filterObjectModel = structure.find(function (eachModel) {
             return eachModel.id === selectedObjectStructureId;
         });
         var clonedSelectedObjectData = (0, updateModule_1.handleClonedDataAttribute)(selectedObjectData, (_a = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _a !== void 0 ? _a : [], props.devSettings.server, true, true);
+        // Clean up canvas background images that were unselected or cleared
+        // If a canvas has backgroundImage with _cleared flag, clear it when modal closes
+        (_b = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) === null || _b === void 0 ? void 0 : _b.forEach(function (eachAttribute) {
+            if (eachAttribute.type === "canvas" &&
+                eachAttribute.enableImageUpload &&
+                clonedSelectedObjectData[eachAttribute.id] &&
+                !Array.isArray(clonedSelectedObjectData[eachAttribute.id]) &&
+                clonedSelectedObjectData[eachAttribute.id].backgroundImage) {
+                var bgImage = clonedSelectedObjectData[eachAttribute.id]
+                    .backgroundImage;
+                // If it has _cleared flag and no token, it means it was cleared/unselected
+                // Clear it when modal closes
+                if (bgImage._cleared && !bgImage.token) {
+                    clonedSelectedObjectData[eachAttribute.id] = __assign(__assign({}, clonedSelectedObjectData[eachAttribute.id]), { backgroundImage: null });
+                }
+                else if (bgImage._cleared && bgImage.token) {
+                    // Has token but also _cleared flag - remove the flag (shouldn't happen, but safe)
+                    clonedSelectedObjectData[eachAttribute.id] = __assign(__assign({}, clonedSelectedObjectData[eachAttribute.id]), { backgroundImage: {
+                            fileName: bgImage.fileName,
+                            token: bgImage.token,
+                        } });
+                }
+            }
+        });
         if (!clonedSelectedObjectData["id"]) {
             clonedSelectedObjectData["id"] = (0, uuid_1.v4)();
         }
@@ -1388,7 +1419,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
         else {
             //INFO: [UPDATE] Updating an object field
-            var clonedSelectedObjectData_1 = (0, updateModule_1.handleClonedDataAttribute)(selectedObjectData, (_b = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _b !== void 0 ? _b : [], props.devSettings.server, true);
+            var clonedSelectedObjectData_1 = (0, updateModule_1.handleClonedDataAttribute)(selectedObjectData, (_c = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _c !== void 0 ? _c : [], props.devSettings.server, true);
             clonedSelectedData[selectedObjectStructureId] = clonedSelectedObjectData_1;
             setSelectedData(clonedSelectedData);
         }
@@ -1543,18 +1574,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
      * Multi Image - imageColl/dataId/token${imageFileExtension} - Applies to the same to object & listObject
      */
     var handleParseImageField = function (dataId, selectedData, model, objectId, listObject) { return __awaiter(void 0, void 0, void 0, function () {
-        var uploadAsset_1, removeAsset_1, imageAttribute, multiImageAttribute, err_4;
+        var uploadAsset_1, removeAsset_1, imageAttribute, multiImageAttribute, canvasAttribute, err_4;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    _a.trys.push([0, 3, , 4]);
+                    _a.trys.push([0, 4, , 5]);
                     uploadAsset_1 = function (eachImage, selectedField, listObjectId, multiple) { return __awaiter(void 0, void 0, void 0, function () {
-                        var uploadedData_1, imageValue, imageCollectionName, imageParentId, responseData, err_5;
-                        var _a, _b, _c;
-                        return __generator(this, function (_d) {
-                            switch (_d.label) {
+                        var uploadedData_1, imageValue, imageCollectionName, imageParentId, fileName, responseData, err_5;
+                        var _a, _b;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
                                 case 0:
-                                    _d.trys.push([0, 9, , 10]);
+                                    _c.trys.push([0, 9, , 10]);
                                     if (!(typeof selectedField === "string" &&
                                         eachImage.type !== "signature")) return [3 /*break*/, 1];
                                     return [2 /*return*/, selectedField];
@@ -1587,7 +1618,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                                                 : "";
                                                         fileName = eachImage.filePreserveName && originalFileName
                                                             ? (eachImage.filePrefix || "") + originalFileName
-                                                            : (0, uuid_1.v4)() + (eachImage.imageFileName || "");
+                                                            : eachImage.imageFileName
+                                                                ? (0, uuid_1.v4)() + eachImage.imageFileName
+                                                                : eachField.fileName instanceof File
+                                                                    ? (0, uuid_1.v4)() + "-" + eachField.fileName.name
+                                                                    : (0, uuid_1.v4)() + "-" + (originalFileName || "");
                                                         return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachImage), imageParentId, imageCollectionName, fileName, eachField.fileName, (_c = devSettings.bucketName) !== null && _c !== void 0 ? _c : "")];
                                                     case 1:
                                                         responseData = _d.sent();
@@ -1601,7 +1636,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                             });
                                         }); }))];
                                 case 2:
-                                    _d.sent();
+                                    _c.sent();
                                     return [2 /*return*/, selectedField["data"].concat(uploadedData_1)];
                                 case 3: return [2 /*return*/, selectedField];
                                 case 4: return [3 /*break*/, 8];
@@ -1623,9 +1658,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         imageParentId += "/".concat(listObjectId);
                                     }
                                     if (!imageValue) return [3 /*break*/, 7];
-                                    return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachImage), imageParentId, imageCollectionName, (_b = eachImage.imageFileName) !== null && _b !== void 0 ? _b : "", imageValue, (_c = devSettings.bucketName) !== null && _c !== void 0 ? _c : "")];
+                                    fileName = eachImage.imageFileName
+                                        ? eachImage.imageFileName
+                                        : imageValue instanceof File
+                                            ? (0, uuid_1.v4)() + imageValue.name
+                                            : "";
+                                    return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachImage), imageParentId, imageCollectionName, fileName, imageValue, (_b = devSettings.bucketName) !== null && _b !== void 0 ? _b : "")];
                                 case 6:
-                                    responseData = _d.sent();
+                                    responseData = _c.sent();
                                     if (responseData.data) {
                                         return [2 /*return*/, responseData.data.data];
                                     }
@@ -1635,7 +1675,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 case 7: return [2 /*return*/, ""];
                                 case 8: return [3 /*break*/, 10];
                                 case 9:
-                                    err_5 = _d.sent();
+                                    err_5 = _c.sent();
                                     return [3 /*break*/, 10];
                                 case 10: return [2 /*return*/];
                             }
@@ -1802,16 +1842,118 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }); }))];
                 case 2:
                     _a.sent();
-                    return [2 /*return*/, selectedData];
+                    canvasAttribute = model.filter(function (eachAttribute) {
+                        return (eachAttribute.type === "canvas" && eachAttribute.enableImageUpload);
+                    });
+                    return [4 /*yield*/, Promise.all(canvasAttribute.map(function (eachCanvas) { return __awaiter(void 0, void 0, void 0, function () {
+                            var canvasData, imageCollectionName, imageParentId, originalFileName, fileName, responseData, err_6;
+                            var _a, _b;
+                            return __generator(this, function (_c) {
+                                switch (_c.label) {
+                                    case 0:
+                                        if (!(listObject && objectId)) return [3 /*break*/, 3];
+                                        if (!Array.isArray(selectedData[objectId])) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, Promise.all(selectedData[objectId].map(function (eachListItem, index) { return __awaiter(void 0, void 0, void 0, function () {
+                                                var selectedObjectId, canvasData, imageCollectionName, imageParentId, originalFileName, fileName, responseData, err_7;
+                                                var _a, _b, _c;
+                                                return __generator(this, function (_d) {
+                                                    switch (_d.label) {
+                                                        case 0:
+                                                            selectedObjectId = (_a = eachListItem.id) !== null && _a !== void 0 ? _a : (0, uuid_1.v4)();
+                                                            canvasData = eachListItem[eachCanvas.id];
+                                                            if (!(canvasData &&
+                                                                !Array.isArray(canvasData) &&
+                                                                canvasData.backgroundImage &&
+                                                                canvasData.backgroundImage.file &&
+                                                                canvasData.backgroundImage.file instanceof File)) return [3 /*break*/, 4];
+                                                            imageCollectionName = (_b = eachCanvas.imageCollectionName) !== null && _b !== void 0 ? _b : "";
+                                                            if (objectId) {
+                                                                imageCollectionName += "/".concat(dataId);
+                                                            }
+                                                            imageParentId = "".concat(objectId, "/").concat(selectedObjectId, "/").concat(eachCanvas.id);
+                                                            originalFileName = canvasData.backgroundImage.fileName;
+                                                            fileName = eachCanvas.filePreserveName && originalFileName
+                                                                ? (eachCanvas.filePrefix || "") + originalFileName
+                                                                : (0, uuid_1.v4)() + (eachCanvas.imageFileName || ".png");
+                                                            _d.label = 1;
+                                                        case 1:
+                                                            _d.trys.push([1, 3, , 4]);
+                                                            return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachCanvas), imageParentId, imageCollectionName, fileName, canvasData.backgroundImage.file, (_c = devSettings.bucketName) !== null && _c !== void 0 ? _c : "")];
+                                                        case 2:
+                                                            responseData = _d.sent();
+                                                            if (responseData.data) {
+                                                                // Replace file with token
+                                                                selectedData[objectId][index][eachCanvas.id] = __assign(__assign({}, canvasData), { backgroundImage: {
+                                                                        fileName: fileName,
+                                                                        token: responseData.data.data,
+                                                                    } });
+                                                            }
+                                                            return [3 /*break*/, 4];
+                                                        case 3:
+                                                            err_7 = _d.sent();
+                                                            return [3 /*break*/, 4];
+                                                        case 4: return [2 /*return*/, null];
+                                                    }
+                                                });
+                                            }); }))];
+                                    case 1:
+                                        _c.sent();
+                                        _c.label = 2;
+                                    case 2: return [3 /*break*/, 7];
+                                    case 3:
+                                        canvasData = selectedData[eachCanvas.id];
+                                        if (!canvasData || Array.isArray(canvasData))
+                                            return [2 /*return*/, null];
+                                        if (!(canvasData.backgroundImage &&
+                                            canvasData.backgroundImage.file &&
+                                            canvasData.backgroundImage.file instanceof File)) return [3 /*break*/, 7];
+                                        imageCollectionName = (_a = eachCanvas.imageCollectionName) !== null && _a !== void 0 ? _a : "";
+                                        if (objectId) {
+                                            imageCollectionName += "/".concat(dataId);
+                                        }
+                                        imageParentId = objectId ? objectId : dataId;
+                                        if (listObject && objectId) {
+                                            imageParentId += "/".concat(eachCanvas.id);
+                                        }
+                                        originalFileName = canvasData.backgroundImage.fileName;
+                                        fileName = eachCanvas.filePreserveName && originalFileName
+                                            ? (eachCanvas.filePrefix || "") + originalFileName
+                                            : (0, uuid_1.v4)() + (eachCanvas.imageFileName || ".png");
+                                        _c.label = 4;
+                                    case 4:
+                                        _c.trys.push([4, 6, , 7]);
+                                        return [4 /*yield*/, handleUploadAxios(handleUploadEndpoint(eachCanvas), imageParentId + "/baseCanvas", imageCollectionName, fileName, canvasData.backgroundImage.file, (_b = devSettings.bucketName) !== null && _b !== void 0 ? _b : "")];
+                                    case 5:
+                                        responseData = _c.sent();
+                                        if (responseData.data) {
+                                            // Replace file with token
+                                            selectedData[eachCanvas.id] = __assign(__assign({}, canvasData), { backgroundImage: {
+                                                    fileName: fileName,
+                                                    token: responseData.data.data,
+                                                } });
+                                        }
+                                        return [3 /*break*/, 7];
+                                    case 6:
+                                        err_6 = _c.sent();
+                                        console.error("[Canvas Upload] Upload error:", err_6);
+                                        return [3 /*break*/, 7];
+                                    case 7: return [2 /*return*/, null];
+                                }
+                            });
+                        }); }))];
                 case 3:
+                    _a.sent();
+                    return [2 /*return*/, selectedData];
+                case 4:
                     err_4 = _a.sent();
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+                    console.error("[Canvas Upload] Error in handleParseImageField:", err_4);
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
             }
         });
     }); };
     var handleRemoveImageAxios = function (imageEndpoint, assetParentId, assetCollectionName, assetFileName, bucketName) { return __awaiter(void 0, void 0, void 0, function () {
-        var dataForm, err_6;
+        var dataForm, err_8;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -1833,14 +1975,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _b.sent();
                     return [3 /*break*/, 3];
                 case 2:
-                    err_6 = _b.sent();
+                    err_8 = _b.sent();
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
         });
     }); };
     var handleRemoveImage = function (bucketName) { return __awaiter(void 0, void 0, void 0, function () {
-        var data, uploadEndpoint, err_7;
+        var data, uploadEndpoint, err_9;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -1864,7 +2006,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _c.sent();
                     return [3 /*break*/, 3];
                 case 2:
-                    err_7 = _c.sent();
+                    err_9 = _c.sent();
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
@@ -1886,7 +2028,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         setDeletePasscode(passcode);
     };
     var handleMultipleRemoveSelectedData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var passcodeMatch, offlineDataResp, offlineData, filteredData, ids, notReferenceId, query, responseData, responseData, data, uploadEndpoint, err_8;
+        var passcodeMatch, offlineDataResp, offlineData, filteredData, ids, notReferenceId, query, responseData, responseData, data, uploadEndpoint, err_10;
         var _a, _b, _c, _d, _e;
         return __generator(this, function (_f) {
             switch (_f.label) {
@@ -1986,7 +2128,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return [2 /*return*/];
                 case 15: return [3 /*break*/, 17];
                 case 16:
-                    err_8 = _f.sent();
+                    err_10 = _f.sent();
                     return [3 /*break*/, 17];
                 case 17:
                     setDeletePasscodeInput("");
@@ -1996,7 +2138,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleRemoveSelectedData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var deletable, selectedId_1, deleteIds, res, offlineDataResp, offlineData, selectedIndex_2, err_9;
+        var deletable, selectedId_1, deleteIds, res, offlineDataResp, offlineData, selectedIndex_2, err_11;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return __generator(this, function (_k) {
             switch (_k.label) {
@@ -2065,7 +2207,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _k.label = 12;
                 case 12: return [3 /*break*/, 14];
                 case 13:
-                    err_9 = _k.sent();
+                    err_11 = _k.sent();
                     setDeleteModal(false);
                     setDeleteFeedId("");
                     return [3 /*break*/, 14];
@@ -2078,7 +2220,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleCheckDeleteReference = function (selectedData, multipleDelete) { return __awaiter(void 0, void 0, void 0, function () {
-        var existDataIds, existsData, handleFindReference_1, collectionIdList_1, columnIdList_1, collectionNameList_1, refStructureList_1, schemaQuery, schemaRes, spaceList, err_10;
+        var existDataIds, existsData, handleFindReference_1, collectionIdList_1, columnIdList_1, collectionNameList_1, refStructureList_1, schemaQuery, schemaRes, spaceList, err_12;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -2283,7 +2425,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _c.label = 9;
                 case 9: return [3 /*break*/, 11];
                 case 10:
-                    err_10 = _c.sent();
+                    err_12 = _c.sent();
                     return [3 /*break*/, 11];
                 case 11:
                     setReferenceDeleteTableData(existsData);
@@ -2296,7 +2438,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleCloneSelectedData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var responseData, newDataList_1, res, err_11;
+        var responseData, newDataList_1, res, err_13;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2333,7 +2475,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _a.label = 3;
                 case 3: return [3 /*break*/, 5];
                 case 4:
-                    err_11 = _a.sent();
+                    err_13 = _a.sent();
                     return [3 /*break*/, 5];
                 case 5:
                     setLoading(false);
@@ -2342,7 +2484,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleBatchDraftData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var res, err_12;
+        var res, err_14;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2366,7 +2508,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         handleRefresh(false, true);
                     return [3 /*break*/, 3];
                 case 2:
-                    err_12 = _a.sent();
+                    err_14 = _a.sent();
                     return [3 /*break*/, 3];
                 case 3:
                     setLoading(false);
@@ -2375,7 +2517,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleBatchUpdateData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var model_1, columnId_1, dataToSubmit_1, isFile, res, updateQuery, selectAllQuery, batchUpdateConfig, res, err_13;
+        var model_1, columnId_1, dataToSubmit_1, isFile, res, updateQuery, selectAllQuery, batchUpdateConfig, res, err_15;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2457,12 +2599,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _a.label = 6;
                 case 6: return [3 /*break*/, 8];
                 case 7:
-                    err_13 = _a.sent();
-                    if (err_13.response && err_13.response.status === 400) {
+                    err_15 = _a.sent();
+                    if (err_15.response && err_15.response.status === 400) {
                         setNotification({
                             type: false,
                             title: "Error",
-                            msg: err_13.response.data.err,
+                            msg: err_15.response.data.err,
                         });
                     }
                     return [3 /*break*/, 8];
@@ -2473,7 +2615,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleUploadOfflineData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var dataUploadedId, offlineDataResp, offlineData, offlineDataIds, updateDataRes, updateDataList, _loop_1, i, err_14, success, filteredData;
+        var dataUploadedId, offlineDataResp, offlineData, offlineDataIds, updateDataRes, updateDataList, _loop_1, i, err_16, success, filteredData;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -2538,7 +2680,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return [3 /*break*/, 4];
                 case 7: return [3 /*break*/, 9];
                 case 8:
-                    err_14 = _b.sent();
+                    err_16 = _b.sent();
                     return [3 /*break*/, 9];
                 case 9:
                     success = dataUploadedId.length === offlineData.length;
@@ -2564,7 +2706,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleSubmitData = function (type, rowId, columnId, data, offlineId, isOfflineUpdate, isDraft) { return __awaiter(void 0, void 0, void 0, function () {
-        var selectedId_2, id, createSelectedData_1, uniqueDataStructure, uniqueColumnId, res, offlineDataResp, offlineData, tempData, err_15, offlineDataResp, tempData, selectedIndex_3, offlineData, err_16, dataToSubmit, operationType, selectedIndex_4, dataId, err_17;
+        var selectedId_2, id, createSelectedData_1, uniqueDataStructure, uniqueColumnId, res, offlineDataResp, offlineData, tempData, err_17, offlineDataResp, tempData, selectedIndex_3, offlineData, err_18, dataToSubmit, operationType, selectedIndex_4, dataId, err_19;
         var _a, _b;
         var _c, _d, _e, _f, _g, _h;
         return __generator(this, function (_j) {
@@ -2639,7 +2781,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     res = true;
                     return [3 /*break*/, 8];
                 case 7:
-                    err_15 = _j.sent();
+                    err_17 = _j.sent();
                     return [3 /*break*/, 8];
                 case 8: return [3 /*break*/, 11];
                 case 9: return [4 /*yield*/, writeServerQuery.call("create", {
@@ -2681,7 +2823,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     res = true;
                     return [3 /*break*/, 17];
                 case 16:
-                    err_16 = _j.sent();
+                    err_18 = _j.sent();
                     return [3 /*break*/, 17];
                 case 17: return [3 /*break*/, 20];
                 case 18:
@@ -2759,14 +2901,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     dataId = res ? id : "";
                     return [2 /*return*/, dataId];
                 case 31:
-                    err_17 = _j.sent();
-                    console.log("error", err_17);
-                    if (err_17.response && err_17.response.status === 400) {
-                        if (typeof ((_h = err_17.response.data) === null || _h === void 0 ? void 0 : _h.err) === "string")
+                    err_19 = _j.sent();
+                    console.log("error", err_19);
+                    if (err_19.response && err_19.response.status === 400) {
+                        if (typeof ((_h = err_19.response.data) === null || _h === void 0 ? void 0 : _h.err) === "string")
                             setNotification({
                                 type: false,
                                 title: "Error",
-                                msg: err_17.response.data.err,
+                                msg: err_19.response.data.err,
                             });
                         else
                             setNotification({
@@ -2819,7 +2961,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleSubmit = function (isDraft) { return __awaiter(void 0, void 0, void 0, function () {
-        var preComplete, res, err_18;
+        var preComplete, res, err_20;
         var _a;
         var _b, _c, _d, _e, _f, _g, _h;
         return __generator(this, function (_j) {
@@ -2869,7 +3011,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     setLoading(false);
                     return [3 /*break*/, 10];
                 case 9:
-                    err_18 = _j.sent();
+                    err_20 = _j.sent();
                     setModalVisible(false);
                     setLoading(false);
                     return [3 /*break*/, 10];
@@ -3103,7 +3245,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         handleUpdateChangeData(clonedData);
     };
     var handleOnChangeSelect = function (id, value) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, data, model, clonedData, refetchReference, currentSchema, allowedWatchedColumnTypes_1, watchedColumns, _i, watchedColumns_1, eachWatched, dependency, referenceRQ, valueRes, err_19;
+        var _a, data, model, clonedData, refetchReference, currentSchema, allowedWatchedColumnTypes_1, watchedColumns, _i, watchedColumns_1, eachWatched, dependency, referenceRQ, valueRes, err_21;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -3166,7 +3308,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return [3 /*break*/, 3];
                 case 6: return [3 /*break*/, 8];
                 case 7:
-                    err_19 = _b.sent();
+                    err_21 = _b.sent();
                     return [3 /*break*/, 8];
                 case 8:
                     clonedData[id] = value;
@@ -3244,7 +3386,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     var handleStepCSV = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var csvList_1, _loop_2, _i, _a, _b, eachKey, eachValue, valid_1, errorValue_1, excelFormData, updateFields, response, open_1, err_20;
+        var csvList_1, _loop_2, _i, _a, _b, eachKey, eachValue, valid_1, errorValue_1, excelFormData, updateFields, response, open_1, err_22;
         var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         return __generator(this, function (_p) {
             switch (_p.label) {
@@ -3392,12 +3534,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     _p.label = 5;
                 case 5: return [3 /*break*/, 7];
                 case 6:
-                    err_20 = _p.sent();
+                    err_22 = _p.sent();
                     setLoading(false);
                     setNotification({
                         type: false,
                         title: "Import Error",
-                        msg: err_20.message,
+                        msg: err_22.message,
                     });
                     return [3 /*break*/, 7];
                 case 7: return [2 /*return*/];
@@ -3405,7 +3547,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleExportCSVData = function (downloadLinkOnly, printOnly) { return __awaiter(void 0, void 0, void 0, function () {
-        var exportQueryList, baseUrl, apiEndpoint, reqData, res, dataList, csvDownloadLink, notificaitonMsg, err_21;
+        var exportQueryList, baseUrl, apiEndpoint, reqData, res, dataList, csvDownloadLink, notificaitonMsg, err_23;
         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;
         return __generator(this, function (_1) {
             switch (_1.label) {
@@ -3479,7 +3621,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     setExportCSVEmail((_0 = (_z = props.devSettings.currentUser) === null || _z === void 0 ? void 0 : _z.userEmail) !== null && _0 !== void 0 ? _0 : "");
                     return [3 /*break*/, 6];
                 case 5:
-                    err_21 = _1.sent();
+                    err_23 = _1.sent();
                     setNotification({
                         type: true,
                         title: "Export Failed",
@@ -3491,34 +3633,198 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
         });
     }); };
-    var handleExportReadPDF = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var canvas, pdf, pageWidth, pageHeight, margin, usableWidth, imgHeight, usableHeight, heightLeft, page, sourceY, sourceHeight, pageCanvas, ctx, pageData, err_22;
+    var handleLoadImageAsDataURL = function (src, imageConfig) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            switch (_a.label) {
+            return [2 /*return*/, new Promise(function (resolve, reject) {
+                    if (src.startsWith("data:")) {
+                        resolve(src);
+                        return;
+                    }
+                    var targetWidth = imageConfig === null || imageConfig === void 0 ? void 0 : imageConfig.width;
+                    var targetHeight = imageConfig === null || imageConfig === void 0 ? void 0 : imageConfig.height;
+                    var img = new Image();
+                    img.onload = function () {
+                        try {
+                            var canvas = document.createElement("canvas");
+                            // Use provided dimensions or original image dimensions
+                            if (targetWidth && targetHeight) {
+                                canvas.width = targetWidth;
+                                canvas.height = targetHeight;
+                            }
+                            else {
+                                canvas.width = img.width;
+                                canvas.height = img.height;
+                            }
+                            var ctx = canvas.getContext("2d");
+                            if (targetWidth && targetHeight) {
+                                // Resize image to target dimensions
+                                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
+                            }
+                            else {
+                                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0);
+                            }
+                            resolve(canvas.toDataURL("image/png"));
+                        }
+                        catch (err) {
+                            reject(err);
+                        }
+                    };
+                    img.onerror = function () {
+                        reject(new Error("Failed to load image"));
+                    };
+                    img.src = src;
+                })];
+        });
+    }); };
+    var handleExportReadPDF = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var elementToExport, canvas, pdf, pageWidth, pageHeight, margin, headerConfig_1, headerHeight, imageDataURL, imageWidth_1, imageHeight_1, hasImage, hasText, img_1, err_24, textHeight, usableWidth, imgHeight, usableHeight, heightLeft, page, currentY, imgX, imgY, imgW, imgH, finalX, textY, textX, sourceY, sourceHeight, pageCanvas, ctx, pageData, pdfBlob, err_25;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        return __generator(this, function (_p) {
+            switch (_p.label) {
                 case 0:
                     if (!exportReadPDFRef.current)
                         return [2 /*return*/];
+                    elementToExport = exportReadPDFRef.current;
                     setModalVisible(true);
                     setExportPDFLoading(true);
-                    _a.label = 1;
+                    setExportReadPDFLoading(true);
+                    _p.label = 1;
                 case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, (0, html2canvas_1.default)(exportReadPDFRef.current, {
+                    _p.trys.push([1, 12, 13, 14]);
+                    // Wait for DOM to update and hide floating navigation before capturing
+                    return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 100); })];
+                case 2:
+                    // Wait for DOM to update and hide floating navigation before capturing
+                    _p.sent();
+                    // Verify element is still in the DOM
+                    if (!document.contains(elementToExport)) {
+                        throw new Error("Export element is not in the DOM");
+                    }
+                    return [4 /*yield*/, (0, html2canvas_1.default)(elementToExport, {
                             scale: 2,
                             useCORS: true,
                         })];
-                case 2:
-                    canvas = _a.sent();
+                case 3:
+                    canvas = _p.sent();
                     pdf = new jspdf_1.default("p", "mm", "a4");
                     pageWidth = pdf.internal.pageSize.getWidth();
                     pageHeight = pdf.internal.pageSize.getHeight();
                     margin = 5;
+                    headerConfig_1 = (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.exportSettings) === null || _b === void 0 ? void 0 : _b.exportReadPDFHeader;
+                    headerHeight = 0;
+                    imageDataURL = null;
+                    imageWidth_1 = 0;
+                    imageHeight_1 = 0;
+                    if (!headerConfig_1) return [3 /*break*/, 11];
+                    hasImage = !!((_c = headerConfig_1.image) === null || _c === void 0 ? void 0 : _c.src);
+                    hasText = !!((_d = headerConfig_1.text) === null || _d === void 0 ? void 0 : _d.value);
+                    if (!hasImage) return [3 /*break*/, 10];
+                    _p.label = 4;
+                case 4:
+                    _p.trys.push([4, 9, , 10]);
+                    return [4 /*yield*/, handleLoadImageAsDataURL(headerConfig_1.image.src)];
+                case 5:
+                    imageDataURL = _p.sent();
+                    if (!(!((_e = headerConfig_1.image) === null || _e === void 0 ? void 0 : _e.width) || !((_f = headerConfig_1.image) === null || _f === void 0 ? void 0 : _f.height))) return [3 /*break*/, 7];
+                    img_1 = new Image();
+                    img_1.src = imageDataURL;
+                    return [4 /*yield*/, new Promise(function (resolve) {
+                            img_1.onload = function () {
+                                var _a, _b, _c, _d;
+                                // Convert pixels to mm (assuming 96 DPI: 1mm = 3.779527559 pixels)
+                                var pixelsToMm = 3.779527559;
+                                imageWidth_1 =
+                                    (_b = (_a = headerConfig_1.image) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : img_1.width / pixelsToMm;
+                                imageHeight_1 =
+                                    (_d = (_c = headerConfig_1.image) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : img_1.height / pixelsToMm;
+                                // Ensure minimum size
+                                if (imageWidth_1 < 10)
+                                    imageWidth_1 = 30;
+                                if (imageHeight_1 < 5)
+                                    imageHeight_1 = 10;
+                                resolve(null);
+                            };
+                            img_1.onerror = function () {
+                                var _a, _b, _c, _d;
+                                // Use defaults if image fails to load dimensions
+                                imageWidth_1 = (_b = (_a = headerConfig_1.image) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 30;
+                                imageHeight_1 = (_d = (_c = headerConfig_1.image) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 10;
+                                resolve(null);
+                            };
+                        })];
+                case 6:
+                    _p.sent();
+                    return [3 /*break*/, 8];
+                case 7:
+                    imageWidth_1 = headerConfig_1.image.width;
+                    imageHeight_1 = headerConfig_1.image.height;
+                    _p.label = 8;
+                case 8:
+                    headerHeight = imageHeight_1 + 2;
+                    return [3 /*break*/, 10];
+                case 9:
+                    err_24 = _p.sent();
+                    console.error("Failed to load PDF header image:", err_24);
+                    console.error("Image source:", headerConfig_1.image.src);
+                    return [3 /*break*/, 10];
+                case 10:
+                    if (hasText) {
+                        textHeight = hasImage ? 5 : 10;
+                        headerHeight += textHeight;
+                    }
+                    headerHeight = Math.max(headerHeight, 2);
+                    _p.label = 11;
+                case 11:
                     usableWidth = pageWidth - margin * 2;
                     imgHeight = (canvas.height * usableWidth) / canvas.width;
-                    usableHeight = pageHeight - margin * 2;
+                    usableHeight = pageHeight - margin * 2 - headerHeight;
                     heightLeft = imgHeight;
                     page = 0;
                     while (heightLeft > 0) {
+                        if (headerConfig_1) {
+                            currentY = margin;
+                            // Only show image on first page
+                            if (page === 0 &&
+                                imageDataURL &&
+                                headerConfig_1.image &&
+                                imageWidth_1 > 0 &&
+                                imageHeight_1 > 0) {
+                                imgX = (_g = headerConfig_1.image.x) !== null && _g !== void 0 ? _g : margin;
+                                imgY = (_h = headerConfig_1.image.y) !== null && _h !== void 0 ? _h : currentY;
+                                imgW = imageWidth_1;
+                                imgH = imageHeight_1;
+                                finalX = imgX;
+                                if (headerConfig_1.image.alignment === "center") {
+                                    finalX = (pageWidth - imgW) / 2;
+                                }
+                                else if (headerConfig_1.image.alignment === "right") {
+                                    finalX = pageWidth - margin - imgW;
+                                }
+                                pdf.addImage(imageDataURL, "PNG", finalX, imgY, imgW, imgH);
+                                currentY = imgY + imgH + 2;
+                            }
+                            if (page === 0 && ((_j = headerConfig_1.text) === null || _j === void 0 ? void 0 : _j.value)) {
+                                pdf.setFontSize(12);
+                                pdf.setFont("helvetica", "bold");
+                                textY = (_k = headerConfig_1.text.y) !== null && _k !== void 0 ? _k : currentY + 3;
+                                textX = (_l = headerConfig_1.text.x) !== null && _l !== void 0 ? _l : margin;
+                                if (headerConfig_1.text.alignment === "center") {
+                                    textX = pageWidth / 2;
+                                    pdf.text(headerConfig_1.text.value, textX, textY, {
+                                        align: "center",
+                                    });
+                                }
+                                else if (headerConfig_1.text.alignment === "right") {
+                                    textX = pageWidth - margin;
+                                    pdf.text(headerConfig_1.text.value, textX, textY, {
+                                        align: "right",
+                                    });
+                                }
+                                else {
+                                    pdf.text(headerConfig_1.text.value, textX, textY);
+                                }
+                            }
+                        }
                         sourceY = page * usableHeight * (canvas.width / usableWidth);
                         sourceHeight = usableHeight * (canvas.width / usableWidth);
                         pageCanvas = document.createElement("canvas");
@@ -3527,31 +3833,40 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         ctx = pageCanvas.getContext("2d");
                         ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(canvas, 0, sourceY, canvas.width, sourceHeight, 0, 0, canvas.width, sourceHeight);
                         pageData = pageCanvas.toDataURL("image/png");
-                        pdf.addImage(pageData, "PNG", margin, margin, usableWidth, usableHeight, undefined, "FAST");
+                        pdf.addImage(pageData, "PNG", margin, margin + headerHeight, usableWidth, usableHeight, undefined, "FAST");
                         heightLeft -= usableHeight;
                         page++;
                         if (heightLeft > 0)
                             pdf.addPage();
                     }
-                    pdf.save("ExportReadPDF-".concat((0, moment_1.default)().format("YYYY-MM-DD-HH-mm-ss"), ".pdf"));
+                    if ((_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.onExportReadPDFBlob) {
+                        pdfBlob = pdf.output("blob");
+                        props.organise.exportSettings.onExportReadPDFBlob(pdfBlob);
+                    }
+                    else {
+                        pdf.save("ExportReadPDF-".concat((0, moment_1.default)().format("YYYY-MM-DD-HH-mm-ss"), ".pdf"));
+                    }
                     setNotification({
                         type: true,
                         title: "Success",
                         msg: "PDF generated successfully",
                     });
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_22 = _a.sent();
+                    return [3 /*break*/, 14];
+                case 12:
+                    err_25 = _p.sent();
+                    console.error("PDF export error:", err_25);
                     setNotification({
                         type: false,
                         title: "Error",
                         msg: "Failed to generate PDF",
                     });
-                    return [3 /*break*/, 4];
-                case 4:
+                    return [3 /*break*/, 14];
+                case 13:
                     setModalVisible(false);
                     setExportPDFLoading(false);
-                    return [2 /*return*/];
+                    setExportReadPDFLoading(false);
+                    return [7 /*endfinally*/];
+                case 14: return [2 /*return*/];
             }
         });
     }); };
@@ -4085,10 +4400,26 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
         var clonedSelectedData = (0, updateModule_1.handleClonedDataAttribute)(selectedData, structure, props.devSettings.server, false, remainId);
         isCanvas.map(function (eachCanvas) {
-            var _a;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             canvasElement.push(react_1.default.createElement("div", { key: eachCanvas.id, className: "w-full my-6" },
                 react_1.default.createElement("h3", { className: "text-lg font-medium text-gray-900 mb-4" }, eachCanvas.name),
-                react_1.default.createElement(canvas_1.Canvas, { label: eachCanvas.name, texts: (_a = clonedSelectedData[eachCanvas.id]) !== null && _a !== void 0 ? _a : [], backgroundImageUrl: eachCanvas.canvasImage, disabled: true })));
+                react_1.default.createElement(canvas_1.Canvas, { label: eachCanvas.name, texts: eachCanvas.enableDraw || eachCanvas.enableImageUpload
+                        ? Array.isArray(clonedSelectedData[eachCanvas.id]) ||
+                            !clonedSelectedData[eachCanvas.id]
+                            ? (_a = clonedSelectedData[eachCanvas.id]) !== null && _a !== void 0 ? _a : []
+                            : (_b = clonedSelectedData[eachCanvas.id].texts) !== null && _b !== void 0 ? _b : []
+                        : Array.isArray(clonedSelectedData[eachCanvas.id])
+                            ? clonedSelectedData[eachCanvas.id]
+                            : (_d = (_c = clonedSelectedData[eachCanvas.id]) === null || _c === void 0 ? void 0 : _c.texts) !== null && _d !== void 0 ? _d : [], drawings: eachCanvas.enableDraw
+                        ? Array.isArray(clonedSelectedData[eachCanvas.id]) ||
+                            !clonedSelectedData[eachCanvas.id]
+                            ? []
+                            : (_e = clonedSelectedData[eachCanvas.id].drawings) !== null && _e !== void 0 ? _e : []
+                        : [], backgroundImageUrl: eachCanvas.enableImageUpload &&
+                        ((_g = (_f = clonedSelectedData[eachCanvas.id]) === null || _f === void 0 ? void 0 : _f.backgroundImage) === null || _g === void 0 ? void 0 : _g.token)
+                        ? // If backgroundImage has token, construct URL from token and fileName
+                            (0, blobModule_1.renderImageUrlFromPath)(devSettings.imageEndpoint, (_h = eachCanvas.imageCollectionName) !== null && _h !== void 0 ? _h : "", ((_j = props.id) !== null && _j !== void 0 ? _j : "") + "%2FbaseCanvas", clonedSelectedData[eachCanvas.id].backgroundImage.fileName, clonedSelectedData[eachCanvas.id].backgroundImage.token, devSettings.bucketName)
+                        : eachCanvas.canvasImage, readOnly: true })));
             return null;
         });
         return canvasElement;
@@ -5264,7 +5595,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }
                     };
                     var renderFloatingGroupNav = function () {
-                        if (!showReadFloatingNav_1 || allTabSections_1.length === 0)
+                        if (!showReadFloatingNav_1 ||
+                            allTabSections_1.length === 0 ||
+                            exportReadPDFLoading)
                             return null;
                         return (react_1.default.createElement(react_1.default.Fragment, null,
                             !readFloatingNav && (react_1.default.createElement("div", { className: "fixed bottom-24 right-2 p-2 flex flex-col gap-y-2 bg-white/10 backdrop-blur-md rounded-md text-right z-[100] sm:bottom-10 md:gap-y-4 max-h-[33vh] overflow-y-auto" }, allTabSections_1.map(function (tabKey, index) {
@@ -5860,7 +6193,6 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         : undefined)),
                     react_1.default.createElement("div", { className: "flex justify-end pt-8" },
                         filterObjectModel.type === "listObject" &&
-                            selectedObjectId &&
                             props.type !== "read" && (react_1.default.createElement(button_1.Button, { className: "mr-5", text: "Delete", type: "danger", onClick: handleRemoveObjectListData })),
                         react_1.default.createElement(button_1.Button, { text: "".concat(props.type === "read" ? "Close" : "Submit"), type: "normal", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
                                 var _a;