@undp/carbon-library 1.0.160 → 1.0.163

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-import { PlusOutlined, FilterOutlined, BankOutlined, SafetyOutlined, AuditOutlined, ExperimentOutlined, UploadOutlined, UserOutlined, MinusCircleOutlined, StarOutlined, ToolOutlined, EyeOutlined, SearchOutlined, EllipsisOutlined, EditOutlined, DeleteOutlined, FileAddOutlined, CheckCircleOutlined, ExclamationCircleOutlined, BookOutlined, CaretDownOutlined, SaveOutlined, EyeInvisibleOutlined, GlobalOutlined, FlagOutlined, LineChartOutlined, LikeOutlined, DislikeOutlined } from '@ant-design/icons';
+import { PlusOutlined, FilterOutlined, BankOutlined, SafetyOutlined, AuditOutlined, ExperimentOutlined, UploadOutlined, UserOutlined, MinusCircleOutlined, StarOutlined, ToolOutlined, EyeOutlined, SearchOutlined, EllipsisOutlined, EditOutlined, DeleteOutlined, FileAddOutlined, CheckCircleOutlined, ExclamationCircleOutlined, BookOutlined, CaretDownOutlined, EyeInvisibleOutlined, GlobalOutlined, FlagOutlined, LineChartOutlined, LikeOutlined, DislikeOutlined } from '@ant-design/icons';
 import { Input, Radio, Space, Row, Col, Button, Dropdown, Table, Empty, message, Form, Steps, Upload, Tooltip, Select, Modal, Alert, Skeleton, Card, Tag, Checkbox, DatePicker, InputNumber, Popover, List, Typography, Spin, Tabs, Progress } from 'antd';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useContext } from 'react';
 import { DateTime } from 'luxon';
 import { Buffer } from 'buffer';
 import PhoneInput, { formatPhoneNumberIntl, formatPhoneNumber } from 'react-phone-number-input';
@@ -19444,7 +19444,7 @@ var AddNdcActionComponent = function (props) {
                 React.createElement(Steps, { progressDot: true, direction: "vertical", current: current, items: stepItems })))));
 };
 
-var css_248z$d = ".ndc-details-view .card-container {\n  margin-bottom: 16px;\n  width: 100%;\n  border-radius: 10px; }\n  .ndc-details-view .card-container .co-benifits-view .title {\n    color: rgba(58, 53, 65, 0.8);\n    font-weight: 600;\n    margin-left: 0.5rem; }\n  .ndc-details-view .card-container .action-btns {\n    margin-top: 25px;\n    margin-bottom: -15px;\n    justify-content: end; }\n\n.ndc-details-view .fix-height {\n  height: 350px; }\n";
+var css_248z$d = ".ndc-details-view .card-container {\n  margin-bottom: 16px;\n  width: 100%;\n  border-radius: 10px; }\n  .ndc-details-view .card-container .co-benifits-view .title {\n    color: rgba(58, 53, 65, 0.8);\n    font-weight: 600;\n    margin-left: 0.5rem; }\n  .ndc-details-view .card-container .action-btns {\n    margin-top: 25px;\n    margin-bottom: -15px;\n    justify-content: end; }\n\n.ndc-details-view .fix-height {\n  height: 350px; }\n\n.title-icon {\n  padding-right: 10px; }\n\n.title-text {\n  color: rgba(58, 53, 65, 0.8);\n  font-weight: 600; }\n\n.title {\n  margin-bottom: 5px; }\n\n.ndc-action-report-body {\n  display: flex;\n  flex-direction: column;\n  width: 100%; }\n  .ndc-action-report-body .report-details {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    align-items: center;\n    justify-content: space-between;\n    margin: 5px 25px;\n    font-size: 0.8rem; }\n    .ndc-action-report-body .report-details .report-type {\n      display: flex;\n      flex-direction: row;\n      width: 60%; }\n      .ndc-action-report-body .report-details .report-type .name-time-container {\n        display: flex;\n        flex-direction: column;\n        width: 70%;\n        margin-bottom: 0.5rem; }\n      .ndc-action-report-body .report-details .report-type .name {\n        font-weight: 500;\n        color: rgba(58, 53, 65, 0.6); }\n      .ndc-action-report-body .report-details .report-type .time {\n        color: rgba(58, 53, 65, 0.5);\n        width: max-content; }\n      .ndc-action-report-body .report-details .report-type .icon {\n        display: flex;\n        align-items: center;\n        width: 30%;\n        color: rgba(58, 53, 65, 0.6); }\n      .ndc-action-report-body .report-details .report-type .empty {\n        font-weight: 500;\n        color: rgba(58, 53, 65, 0.6); }\n    .ndc-action-report-body .report-details .ant-row {\n      margin: 0px 30px auto; }\n    .ndc-action-report-body .report-details .report-link {\n      display: flex;\n      flex-direction: row;\n      width: 40%; }\n      .ndc-action-report-body .report-details .report-link .version {\n        font-weight: 600;\n        color: #cacaca; }\n      .ndc-action-report-body .report-details .report-link .link {\n        margin-left: 1rem; }\n";
 styleInject(css_248z$d);
 
 var css_248z$c = ".info-view .title-icon {\n  padding-right: 10px; }\n\n.info-view .title-text {\n  color: rgba(58, 53, 65, 0.8);\n  font-weight: 600; }\n\n.info-view .title {\n  margin-bottom: 5px; }\n\n.info-view .field-key {\n  color: rgba(58, 53, 65, 0.6);\n  font-weight: 500;\n  text-overflow: ellipsis;\n  overflow: hidden; }\n\n.info-view .field-value {\n  color: rgba(58, 53, 65, 0.6);\n  text-overflow: ellipsis;\n  overflow: hidden; }\n  .info-view .field-value .row {\n    display: flex;\n    width: 40%;\n    align-items: center;\n    justify-content: space-between; }\n    .info-view .field-value .row .key {\n      display: flex;\n      width: 50%;\n      align-items: center;\n      justify-content: flex-start; }\n    .info-view .field-value .row .data {\n      display: flex;\n      width: 50%;\n      align-items: center;\n      justify-content: flex-start; }\n\n.info-view .field {\n  margin: 15px 25px;\n  font-size: 0.8rem; }\n";
@@ -19539,15 +19539,19 @@ var NdcActionViewComponent = function (props) {
     var userInfoState = useUserContext().userInfoState;
     var post = useConnection().post;
     var state = useLocation().state;
-    var _d = useState({}), ndcActionReportDetails = _d[0], setNdcActionReportDetails = _d[1];
+    var _d = useState({}); _d[0]; var setNdcActionReportDetails = _d[1];
     var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
-    var _f = useState(), ndcActionDetails = _f[0], setNdcActionDetails = _f[1];
-    var _g = useState(); _g[0]; var setCoBenifitsComponentnDetails = _g[1];
-    var _h = useState(0), emissionsReductionExpected = _h[0], setEmissionsReductionExpected = _h[1];
-    var _j = useState(0), emissionsReductionAchieved = _j[0], setEmissionsReductionAchieved = _j[1];
-    var _k = useState([]), programmeOwnerId = _k[0], setProgrammeOwnerId = _k[1];
-    var _l = useState(false), canUploadMonitorReport = _l[0], setCanUploadMonitorReport = _l[1];
-    var _m = useState(false), monitoringReportAccepted = _m[0], setMonitoringReportAccepted = _m[1];
+    var _f = useState(), monitoringReportData = _f[0], setMonitoringReportData = _f[1];
+    var _g = useState(""), monitoringReportversion = _g[0], setMonitoringReportversion = _g[1];
+    var _h = useState(), verificationReportData = _h[0], setVerificationReportData = _h[1];
+    var _j = useState(""), verificationReportVersion = _j[0], setVerificationReportversion = _j[1];
+    var _k = useState(), ndcActionDetails = _k[0], setNdcActionDetails = _k[1];
+    var _l = useState(); _l[0]; var setCoBenifitsComponentnDetails = _l[1];
+    var _m = useState(0), emissionsReductionExpected = _m[0], setEmissionsReductionExpected = _m[1];
+    var _o = useState(0), emissionsReductionAchieved = _o[0], setEmissionsReductionAchieved = _o[1];
+    var _p = useState([]), programmeOwnerId = _p[0], setProgrammeOwnerId = _p[1];
+    var _q = useState(false), canUploadMonitorReport = _q[0], setCanUploadMonitorReport = _q[1];
+    var _r = useState(false), monitoringReportAccepted = _r[0], setMonitoringReportAccepted = _r[1];
     var getProgrammeById = function (programmeId) { return __awaiter(void 0, void 0, void 0, function () {
         var response, error_1;
         var _a, _b, _c;
@@ -19589,13 +19593,16 @@ var NdcActionViewComponent = function (props) {
             }
         });
     }); };
-    var getProjectReportActions = function (reportData) {
+    var getProjectReportActions = function (reportData, reportVersion) {
         return (React.createElement(Row, null,
             React.createElement("div", { className: "icon" },
                 (reportData === null || reportData === void 0 ? void 0 : reportData.status) === DocumentStatus.ACCEPTED && (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380" } })),
                 (reportData === null || reportData === void 0 ? void 0 : reportData.status) === DocumentStatus.REJECTED && (React.createElement(ExclamationCircleOutlined, { className: "common-progress-icon", style: { color: "#FD6F70" } }))),
             React.createElement("div", { className: "link mg-left-1" }, (reportData === null || reportData === void 0 ? void 0 : reportData.url) && linkDocVisible(reportData === null || reportData === void 0 ? void 0 : reportData.status) && (React.createElement("a", { href: reportData === null || reportData === void 0 ? void 0 : reportData.url, target: "_blank", rel: "noopener noreferrer", download: true },
-                React.createElement(BookOutlined, { className: "common-progress-icon margin-right-1", style: { color: "#3F3A47" } }))))));
+                React.createElement(BookOutlined, { className: "common-progress-icon margin-right-1", style: { color: "#3F3A47" } })))),
+            (reportData === null || reportData === void 0 ? void 0 : reportData.txTime) && (React.createElement("div", { className: "time" },
+                moment(parseInt(reportData === null || reportData === void 0 ? void 0 : reportData.txTime)).format("DD MMMM YYYY @ HH:mm"),
+                " ~ " + reportVersion))));
     };
     var getProjectReports = function () { return __awaiter(void 0, void 0, void 0, function () {
         var reportDetails, response, exception_1;
@@ -19643,12 +19650,24 @@ var NdcActionViewComponent = function (props) {
                                 if ((item === null || item === void 0 ? void 0 : item.status) === DocumentStatus.ACCEPTED) {
                                     setMonitoringReportAccepted(true);
                                 }
+                                var versionfull = (item === null || item === void 0 ? void 0 : item.url).split("_")[(item === null || item === void 0 ? void 0 : item.url).split("_").length - 1];
+                                var version = versionfull ? versionfull.split(".")[0] : "1";
+                                var moniteringVersion = version.startsWith("V") ? version : "V1";
                                 reportDetails[t("ndcAction:viewMoniteringReport")] =
-                                    getProjectReportActions(item);
+                                    getProjectReportActions(item, moniteringVersion);
+                                setMonitoringReportData(item);
+                                setMonitoringReportversion(moniteringVersion);
                             }
                             else if ((_b = item === null || item === void 0 ? void 0 : item.url) === null || _b === void 0 ? void 0 : _b.includes("VERIFICATION_REPORT")) {
+                                var versionfull = (item === null || item === void 0 ? void 0 : item.url).split("_")[(item === null || item === void 0 ? void 0 : item.url).split("_").length - 1];
+                                var version = versionfull ? versionfull.split(".")[0] : "1";
+                                var verificationVersion = version.startsWith("V")
+                                    ? version
+                                    : "V1";
                                 reportDetails[t("ndcAction:viewVerificationReport")] =
-                                    getProjectReportActions(item);
+                                    getProjectReportActions(item, verificationVersion);
+                                setVerificationReportData(item);
+                                setVerificationReportversion(verificationVersion);
                             }
                         });
                     }
@@ -19902,8 +19921,60 @@ var NdcActionViewComponent = function (props) {
                 React.createElement(Col, { lg: 8, md: 24 },
                     React.createElement(Skeleton, { loading: isLoading, active: true },
                         React.createElement(Card, { className: "card-container fix-height" },
-                            React.createElement("div", null,
-                                React.createElement(InfoView, { data: ndcActionReportDetails, title: t("ndcAction:viewReportsTitle"), icon: React.createElement(Icon.FileEarmarkText, null) })))))),
+                            React.createElement("div", { className: "title" },
+                                React.createElement("span", { className: "title-icon" }, React.createElement(Icon.FileEarmarkText, null)),
+                                React.createElement("span", { className: "title-text" }, t("ndcAction:viewReportsTitle"))),
+                            React.createElement("div", { className: "ndc-action-report-body" },
+                                React.createElement("div", { className: "report-details" },
+                                    React.createElement("div", { className: "report-type" },
+                                        React.createElement("div", { className: "name-time-container" },
+                                            React.createElement("div", { className: canUploadMonitorReport && monitoringReportAccepted
+                                                    ? "name"
+                                                    : "empty" }, t("programme:monitoringReport")),
+                                            (monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.txTime) && (React.createElement("div", { className: "time" },
+                                                moment(parseInt(monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.txTime)).format("DD MMMM YYYY @ HH:mm"),
+                                                " ~ " + monitoringReportversion))),
+                                        React.createElement("div", { className: "icon" }, !(monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.url) && (React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) === Role.ViewOnly
+                                                ? t("programme:notAuthToUploadDoc")
+                                                : uploadDocUserPermission(userInfoState, DocType.MONITORING_REPORT, programmeOwnerId)
+                                                    ? !canUploadMonitorReport &&
+                                                        t("programme:programmeNotAuth")
+                                                    : t("programme:orgNotAuth"), overlayClassName: "custom-tooltip" },
+                                            React.createElement(FileAddOutlined, null))))),
+                                    (monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.url) && (React.createElement(Row, null,
+                                        React.createElement("div", { className: "icon" },
+                                            (monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.status) ===
+                                                DocumentStatus.ACCEPTED && (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380" } })),
+                                            (monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.status) ===
+                                                DocumentStatus.REJECTED && (React.createElement(ExclamationCircleOutlined, { className: "common-progress-icon", style: { color: "#FD6F70" } }))),
+                                        React.createElement("div", { className: "link mg-left-1" }, (monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.url) &&
+                                            linkDocVisible(monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.status) && (React.createElement("a", { href: monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.url, target: "_blank", rel: "noopener noreferrer", download: true },
+                                            React.createElement(BookOutlined, { className: "common-progress-icon margin-right-1", style: { color: "#3F3A47" } }))))))),
+                                React.createElement("div", { className: "report-details" },
+                                    React.createElement("div", { className: "report-type" },
+                                        React.createElement("div", { className: "name-time-container" },
+                                            React.createElement("div", { className: canUploadMonitorReport && monitoringReportAccepted
+                                                    ? "name"
+                                                    : "empty" }, t("programme:verificationReport")),
+                                            (verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.txTime) && (React.createElement("div", { className: "time" },
+                                                moment(parseInt(verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.txTime)).format("DD MMMM YYYY @ HH:mm"),
+                                                " ~ " + verificationReportVersion))),
+                                        React.createElement("div", { className: "icon" }, !(verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.url) && (React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) === Role.ViewOnly
+                                                ? t("programme:notAuthToUploadDoc")
+                                                : uploadDocUserPermission(userInfoState, DocType.VERIFICATION_REPORT, programmeOwnerId)
+                                                    ? !monitoringReportAccepted &&
+                                                        t("programme:monitoringRepNotApproved")
+                                                    : t("programme:notAuthToUploadDoc"), overlayClassName: "custom-tooltip" },
+                                            React.createElement(FileAddOutlined, null))))),
+                                    (verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.url) && (React.createElement(Row, null,
+                                        React.createElement("div", { className: "icon" },
+                                            (verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.status) ===
+                                                DocumentStatus.ACCEPTED && (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380" } })),
+                                            (verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.status) ===
+                                                DocumentStatus.REJECTED && (React.createElement(ExclamationCircleOutlined, { className: "common-progress-icon", style: { color: "#FD6F70" } }))),
+                                        React.createElement("div", { className: "link mg-left-1" }, (verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.url) &&
+                                            linkDocVisible(verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.status) && (React.createElement("a", { href: verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.url, target: "_blank", rel: "noopener noreferrer", download: true },
+                                            React.createElement(BookOutlined, { className: "common-progress-icon margin-right-1", style: { color: "#3F3A47" } })))))))))))),
             ((ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.action) === NdcActionTypes.Mitigation ||
                 (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.action) === NdcActionTypes.CrossCutting) && (React.createElement(Row, null,
                 React.createElement(Col, { lg: 24, className: "gutter-row" },
@@ -24435,16 +24506,60 @@ var RegistryDashboardComponent = function (props) {
                                     lastUpdateTransferLocations))))))))) : ("")));
 };
 
-React.createContext(null);
+var EditableContext = React.createContext(null);
+var EditableRow = function (_a) {
+    _a.index; var props = __rest(_a, ["index"]);
+    var form = Form.useForm()[0];
+    return (React.createElement(Form, { form: form, component: false },
+        React.createElement(EditableContext.Provider, { value: form },
+            React.createElement("tr", __assign({}, props)))));
+};
 var EditableCell = function (_a) {
-    var editing = _a.editing, dataIndex = _a.dataIndex, title = _a.title, inputType = _a.inputType; _a.record; _a.index; var children = _a.children, restProps = __rest(_a, ["editing", "dataIndex", "title", "inputType", "record", "index", "children"]);
-    var inputNode = inputType === "number" ? React.createElement(InputNumber, null) : React.createElement(Input, null);
-    return (React.createElement("td", __assign({}, restProps), editing ? (React.createElement(Form.Item, { name: dataIndex, style: { margin: 0 }, rules: [
-            {
-                required: true,
-                message: "Please Input ".concat(title, "!"),
-            },
-        ] }, inputNode)) : (children)));
+    var title = _a.title, editable = _a.editable, children = _a.children, dataIndex = _a.dataIndex, record = _a.record, handleSave = _a.handleSave, restProps = __rest(_a, ["title", "editable", "children", "dataIndex", "record", "handleSave"]);
+    var _b = useState(false), editing = _b[0], setEditing = _b[1];
+    var inputRef = useRef(null);
+    var form = useContext(EditableContext);
+    useEffect(function () {
+        if (editing) {
+            inputRef.current.focus();
+        }
+    }, [editing]);
+    var toggleEdit = function () {
+        var _a;
+        setEditing(!editing);
+        form.setFieldsValue((_a = {}, _a[dataIndex] = record[dataIndex], _a));
+    };
+    var save = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var values, errInfo_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, form.validateFields()];
+                case 1:
+                    values = _a.sent();
+                    toggleEdit();
+                    handleSave(__assign(__assign({}, record), values));
+                    return [3 /*break*/, 3];
+                case 2:
+                    errInfo_1 = _a.sent();
+                    console.log("Save failed:", errInfo_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var childNode = children;
+    if (editable) {
+        childNode = editing ? (React.createElement(Form.Item, { style: { margin: 0 }, name: dataIndex, rules: [
+                {
+                    required: true,
+                    message: "".concat(title, " is required."),
+                },
+            ] },
+            React.createElement(Input, { ref: inputRef, onPressEnter: save, onBlur: save }))) : (React.createElement("div", { className: "editable-cell-value-wrap", style: { paddingRight: 24, minWidth: "100px", minHeight: "20px" }, onClick: toggleEdit }, children));
+    }
+    return React.createElement("td", __assign({}, restProps), childNode);
 };
 
 var css_248z$4 = ".ndc-steps-actions {\n  display: flex;\n  flex-direction: row-reverse;\n  margin-right: 1rem;\n  justify-content: center; }\n  .ndc-steps-actions .action-btn {\n    border: 1px solid #16b1ff;\n    color: #16b1ff;\n    margin-right: 1rem; }\n  .ndc-steps-actions .back-btn {\n    border: 1px solid rgba(140, 140, 140, 0.7);\n    color: rgba(140, 140, 140, 0.7);\n    margin-right: 1rem; }\n  .ndc-steps-actions .mg-left-1 {\n    margin-left: 1rem; }\n";
@@ -24467,17 +24582,7 @@ var NdcDetailsComponent = function (props) {
     var addedNdcDetailId = useRef(0);
     var selectedNdcDetail = useRef({});
     var _e = useState(0), tableKey = _e[0], setTableKey = _e[1];
-    var form = Form.useForm()[0];
-    var _f = useState(""), editingKey = _f[0], setEditingKey = _f[1];
     var userInfoState = useUserContext().userInfoState;
-    var isEditing = function (record) { return record.key === editingKey; };
-    var onEditRow = function (record) {
-        form.setFieldsValue(__assign({ nationalPlanObj: "", kpi: "", ministry: "" }, record));
-        setEditingKey(record.key);
-    };
-    var onEditCancel = function () {
-        setEditingKey("");
-    };
     var isAddRangeVisible = function () {
         return (((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.MINISTRY ||
             (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT) &&
@@ -24490,63 +24595,37 @@ var NdcDetailsComponent = function (props) {
     var inRange = function (num, min, max) {
         return num >= min && num <= max;
     };
-    var onHandleSave = function (record) { return __awaiter(void 0, void 0, void 0, function () {
-        var updatedNdcDetails, editedData, index, parentIndex, parentItem, itemIndex, errInfo_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    updatedNdcDetails = __spreadArray([], ndcDetailsData, true);
-                    return [4 /*yield*/, form.validateFields()];
-                case 1:
-                    editedData = (_a.sent());
-                    if (record) {
-                        if (record.type === NdcActionType.main) {
-                            index = updatedNdcDetails.findIndex(function (item) { return record.key === item.key; });
-                            updatedNdcDetails.splice(index, 1, __assign(__assign({}, record), editedData));
-                            setNdcDetailsData(updatedNdcDetails);
-                        }
-                        else {
-                            parentIndex = updatedNdcDetails.findIndex(function (item) { return record.ndcActionId === item.key; });
-                            parentItem = updatedNdcDetails[parentIndex];
-                            if (parentItem) {
-                                if (parentItem.subNdcDetails) {
-                                    itemIndex = parentItem.subNdcDetails.findIndex(function (item) { return record.key === item.key; });
-                                    if (itemIndex !== -1) {
-                                        parentItem.subNdcDetails.splice(itemIndex, 1, __assign(__assign({}, record), editedData));
-                                    }
-                                    if (itemIndex + 1 === parentItem.subNdcDetails.length) {
-                                        parentItem.subNdcDetails.push({
-                                            key: ++addedNdcDetailId.current,
-                                            ndcActionId: parentItem.key,
-                                            type: NdcActionType.sub,
-                                            startDate: new Date("2019-03-25"),
-                                            endDate: new Date("2020-03-25"),
-                                            nationalPlanObj: "",
-                                            kpi: "",
-                                            ministry: "",
-                                        });
-                                    }
-                                }
-                                updatedNdcDetails.splice(parentIndex, 1, __assign({}, parentItem));
-                                setNdcDetailsData(updatedNdcDetails);
-                            }
-                        }
-                        setEditingKey("");
-                        setTableKey(function (key) { return key + 1; });
+    var handleSave = function (row) {
+        if (row.type === NdcActionType.main) {
+            var newData = __spreadArray([], ndcDetailsData, true);
+            var index = newData.findIndex(function (item) { return row.key === item.key; });
+            var item = newData[index];
+            newData.splice(index, 1, __assign(__assign({}, item), row));
+            setNdcDetailsData(newData);
+        }
+        else {
+            var newData = __spreadArray([], ndcDetailsData, true);
+            var parentIndex = newData.findIndex(function (item) { return row.ndcActionId === item.key; });
+            var parentItem = newData[parentIndex];
+            if (parentItem) {
+                if (parentItem.subNdcDetails) {
+                    var itemIndex = parentItem.subNdcDetails.findIndex(function (item) { return row.key === item.key; });
+                    if (itemIndex === -1) {
+                        parentItem.subNdcDetails.push(row);
                     }
                     else {
-                        throw new Error("Save failed");
+                        parentItem.subNdcDetails.splice(itemIndex, 1, __assign({}, row));
                     }
-                    return [3 /*break*/, 3];
-                case 2:
-                    errInfo_1 = _a.sent();
-                    console.log("Validate Failed:", errInfo_1);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
+                }
+                else {
+                    parentItem.subNdcDetails = [row];
+                }
             }
-        });
-    }); };
+            newData.splice(parentIndex, 1, __assign({}, parentItem));
+            setNdcDetailsData(newData);
+            setTableKey(function (key) { return key + 1; });
+        }
+    };
     var getNdcDetailsForPeriod = function () {
         var range = selectedTab.split("-");
         if (range.length > 1) {
@@ -24595,27 +24674,10 @@ var NdcDetailsComponent = function (props) {
             key: "ministry",
             align: "left",
             editable: true,
-            width: "30%",
+            width: "40%",
             render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(Space, { size: "middle" },
                 React.createElement("span", null, record.ministry))) : (React.createElement("input", { placeholder: "Please add the Ministry name", className: "ant-input", disabled: true, type: "text" })))); },
         },
-        {
-            title: "Action",
-            dataIndex: "operation",
-            width: "10%",
-            render: function (_, record) {
-                var editable = isEditing(record);
-                return editable ? (React.createElement("span", null,
-                    React.createElement(Tooltip, { title: "Save" },
-                        React.createElement(Typography.Link, { onClick: function () { return onHandleSave(record); }, style: { marginRight: 20 } },
-                            React.createElement(SaveOutlined, null))),
-                    React.createElement(Tooltip, { title: "Cancel" },
-                        React.createElement(Typography.Link, { onClick: onEditCancel, style: { marginRight: 8 } },
-                            React.createElement(ExclamationCircleOutlined, null))))) : (React.createElement(Tooltip, { title: "Edit" },
-                    React.createElement(Typography.Link, { disabled: editingKey !== "", onClick: function () { return onEditRow(record); } },
-                        React.createElement(EditOutlined, null))));
-            },
-        },
     ];
     var columns = defaultColumns.map(function (col) {
         if (!col.editable) {
@@ -24626,7 +24688,7 @@ var NdcDetailsComponent = function (props) {
                 editable: col.editable,
                 dataIndex: col.dataIndex,
                 title: col.title,
-                editing: isEditing(record),
+                handleSave: handleSave,
             }); } });
     });
     function onAddNewNdcDetail() {
@@ -24657,11 +24719,32 @@ var NdcDetailsComponent = function (props) {
     }
     var components = {
         body: {
+            row: EditableRow,
             cell: EditableCell,
         },
     };
+    //commented because rendering issue
     function ndcDetailsTableContent() {
-        return React.createElement("div", null);
+        return (React.createElement("div", null)
+        // <div>
+        //   <Button
+        //     onClick={onAddNewNdcDetail}
+        //     type="primary"
+        //     style={{
+        //       marginBottom: 16,
+        //     }}
+        //   >
+        //     Add a row
+        //   </Button>
+        //   <Table
+        //     components={components}
+        //     rowClassName={() => 'editable-row'}
+        //     bordered
+        //     dataSource={ndcDetailsData}
+        //     columns={columns}
+        //   />
+        // </div>
+        );
     }
     var onCancelPeriod = function () { };
     var onAddNewPeriod = function () {
@@ -24718,7 +24801,6 @@ var NdcDetailsComponent = function (props) {
     }
     var onTabChange = function (key) {
         setSelectedTab(key);
-        setEditingKey("");
     };
     useEffect(function () {
         var defaultNdcDetails = [
@@ -24992,18 +25074,17 @@ var NdcDetailsComponent = function (props) {
             React.createElement(Tabs, { centered: false, defaultActiveKey: "1", items: periodItems, activeKey: selectedTab, onChange: onTabChange })),
         selectedTab !== "add_new" && (React.createElement("div", null,
             React.createElement("div", null,
-                React.createElement(Form, { form: form, component: false },
-                    React.createElement(Table, { key: tableKey, components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getNdcDetailsForPeriod(), columns: columns, expandable: {
-                            expandedRowRender: function (record) { return getSubNdcActionContent(record); },
-                            indentSize: 0,
-                            defaultExpandedRowKeys: [selectedNdcDetail.current.key],
-                        }, footer: function () {
-                            return isAddNdcActionVisible() && (React.createElement(Row, { justify: "center" },
-                                React.createElement(Button, { onClick: onAddNewNdcDetail, type: "default", style: {
-                                        marginBottom: 16,
-                                        width: "100%",
-                                    } }, t("ndc:addNdcAction"))));
-                        } })))))));
+                React.createElement(Table, { key: tableKey, components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getNdcDetailsForPeriod(), columns: columns, expandable: {
+                        expandedRowRender: function (record) { return getSubNdcActionContent(record); },
+                        indentSize: 0,
+                        defaultExpandedRowKeys: [selectedNdcDetail.current.key],
+                    }, footer: function () {
+                        return isAddNdcActionVisible() && (React.createElement(Row, { justify: "center" },
+                            React.createElement(Button, { onClick: onAddNewNdcDetail, type: "default", style: {
+                                    marginBottom: 16,
+                                    width: "100%",
+                                } }, t("ndc:addNdcAction"))));
+                    } }))))));
 };
 
 var ImgWithFallback = function (_a) {
@@ -25659,7 +25740,7 @@ var RejectDocumentationConfirmationModel = function (props) {
                 React.createElement(Button, { className: "mg-left-2", type: "primary", danger: true, htmlType: "submit", loading: loading, disabled: actionInfo.type === "reject" && comment === "" }, "REJECT")))));
 };
 
-var css_248z$2 = ".ndc-action-body {\n  display: flex;\n  flex-direction: column;\n  width: 100%; }\n  .ndc-action-body .report-details {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    align-items: center;\n    justify-content: space-between; }\n    .ndc-action-body .report-details .report-type {\n      display: flex;\n      flex-direction: row;\n      width: 60%; }\n      .ndc-action-body .report-details .report-type .name-time-container {\n        display: flex;\n        flex-direction: column;\n        width: 70%;\n        margin-bottom: 0.5rem; }\n      .ndc-action-body .report-details .report-type .name {\n        font-weight: 600;\n        color: rgba(58, 53, 65, 0.8); }\n      .ndc-action-body .report-details .report-type .icon {\n        display: flex;\n        align-items: center;\n        width: 30%; }\n      .ndc-action-body .report-details .report-type .empty {\n        font-weight: 600;\n        color: #cacaca; }\n    .ndc-action-body .report-details .report-link {\n      display: flex;\n      flex-direction: row;\n      width: 40%; }\n      .ndc-action-body .report-details .report-link .version {\n        font-weight: 600;\n        color: #cacaca; }\n      .ndc-action-body .report-details .report-link .link {\n        margin-left: 1rem; }\n";
+var css_248z$2 = ".ndc-action-body {\n  display: flex;\n  flex-direction: column;\n  width: 100%; }\n  .ndc-action-body .report-details {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    align-items: center;\n    justify-content: space-between; }\n    .ndc-action-body .report-details .report-type {\n      display: flex;\n      flex-direction: row;\n      width: 60%; }\n      .ndc-action-body .report-details .report-type .name-time-container {\n        display: flex;\n        flex-direction: column;\n        width: 70%;\n        margin-bottom: 0.5rem; }\n      .ndc-action-body .report-details .report-type .name {\n        font-weight: 600;\n        color: rgba(58, 53, 65, 0.8); }\n      .ndc-action-body .report-details .report-type .icon {\n        display: flex;\n        align-items: center;\n        width: 30%; }\n      .ndc-action-body .report-details .report-type .empty {\n        font-weight: 600;\n        color: #cacaca; }\n    .ndc-action-body .report-details .report-link {\n      display: flex;\n      flex-direction: row;\n      width: 40%;\n      align-items: center;\n      justify-content: flex-start;\n      gap: 20px; }\n      .ndc-action-body .report-details .report-link .version {\n        font-weight: 600;\n        color: #cacaca; }\n      .ndc-action-body .report-details .report-link .link {\n        margin-left: 1rem; }\n";
 styleInject(css_248z$2);
 
 var NdcActionBody = function (props) {
@@ -25877,8 +25958,8 @@ var NdcActionBody = function (props) {
                                     : t("programme:orgNotAuth"), overlayClassName: "custom-tooltip" },
                             React.createElement(FileAddOutlined, { className: "common-progress-icon", style: canUploadMonitorReport &&
                                     uploadDocUserPermission(userInfoState, DocType.MONITORING_REPORT, programmeOwnerId, ministryLevelPermission)
-                                    ? { color: "#3F3A47", cursor: "pointer" }
-                                    : { color: "#cacaca", cursor: "default" }, onClick: function () {
+                                    ? { color: "#3F3A47", cursor: "pointer", margin: "0px 0px 2.5px 0px" }
+                                    : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
                                     if (canUploadMonitorReport &&
                                         uploadDocUserPermission(userInfoState, DocType.MONITORING_REPORT, programmeOwnerId, ministryLevelPermission)) {
                                         handleFileUploadMonitor();
@@ -25901,8 +25982,8 @@ var NdcActionBody = function (props) {
                                     : t("programme:orgNotAuth"), overlayClassName: "custom-tooltip" },
                             React.createElement(FileAddOutlined, { className: "common-progress-icon", style: canUploadMonitorReport &&
                                     uploadDocUserPermission(userInfoState, DocType.MONITORING_REPORT, programmeOwnerId, ministryLevelPermission)
-                                    ? { color: "#3F3A47", cursor: "pointer" }
-                                    : { color: "#cacaca", cursor: "default" }, onClick: function () {
+                                    ? { color: "#3F3A47", cursor: "pointer", margin: "0px 0px 2.5px 0px" }
+                                    : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
                                     if (canUploadMonitorReport &&
                                         uploadDocUserPermission(userInfoState, DocType.MONITORING_REPORT, programmeOwnerId, ministryLevelPermission)) {
                                         handleFileUploadMonitor();
@@ -25951,8 +26032,8 @@ var NdcActionBody = function (props) {
                                     : t("programme:notAuthToUploadDoc"), overlayClassName: "custom-tooltip" },
                             React.createElement(FileAddOutlined, { className: "common-progress-icon", style: monitoringReportAccepted &&
                                     uploadDocUserPermission(userInfoState, DocType.VERIFICATION_REPORT, programmeOwnerId, ministryLevelPermission)
-                                    ? { color: "#3F3A47", cursor: "pointer" }
-                                    : { color: "#cacaca", cursor: "default" }, onClick: function () {
+                                    ? { color: "#3F3A47", cursor: "pointer", margin: "0px 0px 2.5px 0px" }
+                                    : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
                                     if (monitoringReportAccepted &&
                                         uploadDocUserPermission(userInfoState, DocType.VERIFICATION_REPORT, programmeOwnerId, ministryLevelPermission)) {
                                         handleFileUploadVerification();
@@ -25975,8 +26056,8 @@ var NdcActionBody = function (props) {
                                     : t("programme:notAuthToUploadDoc"), overlayClassName: "custom-tooltip" },
                             React.createElement(FileAddOutlined, { className: "common-progress-icon", style: monitoringReportAccepted &&
                                     uploadDocUserPermission(userInfoState, DocType.VERIFICATION_REPORT, programmeOwnerId, ministryLevelPermission)
-                                    ? { color: "#3F3A47", cursor: "pointer" }
-                                    : { color: "#cacaca", cursor: "default" }, onClick: function () {
+                                    ? { color: "#3F3A47", cursor: "pointer", margin: "0px 0px 2.5px 0px" }
+                                    : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
                                     if (monitoringReportAccepted &&
                                         uploadDocUserPermission(userInfoState, DocType.VERIFICATION_REPORT, programmeOwnerId, ministryLevelPermission)) {
                                         handleFileUploadVerification();
@@ -25990,7 +26071,7 @@ var NdcActionBody = function (props) {
         React.createElement(RejectDocumentationConfirmationModel, { actionInfo: actionInfo, onActionConfirmed: handleOk, onActionCanceled: handleCancel, openModal: openRejectDocConfirmationModal, errorMsg: "", loading: loading, translator: translator })));
 };
 
-var css_248z$1 = ".info-view .title-icon {\n  padding-right: 10px; }\n\n.info-view .title-text {\n  color: rgba(58, 53, 65, 0.8);\n  font-weight: 600; }\n\n.info-view .title {\n  margin-bottom: 5px; }\n\n.info-view .field-key {\n  color: rgba(58, 53, 65, 0.6);\n  font-weight: 500;\n  text-overflow: ellipsis;\n  overflow: hidden; }\n  .info-view .field-key .label-container {\n    display: flex;\n    flex-direction: row; }\n  .info-view .field-key .label {\n    width: 70%; }\n  .info-view .field-key .label-uploaded {\n    color: rgba(58, 53, 65, 0.8);\n    width: 70%; }\n\n.info-view .field-value {\n  color: rgba(58, 53, 65, 0.6);\n  text-overflow: ellipsis;\n  overflow: hidden; }\n  .info-view .field-value .link {\n    display: flex;\n    flex-direction: row; }\n\n.info-view .field {\n  margin: 15px 25px;\n  font-size: 0.8rem; }\n";
+var css_248z$1 = ".info-view .title-icon {\n  padding-right: 10px; }\n\n.info-view .title-text {\n  color: rgba(58, 53, 65, 0.8);\n  font-weight: 600; }\n\n.info-view .title {\n  margin-bottom: 5px; }\n\n.info-view .field-key {\n  color: rgba(58, 53, 65, 0.6);\n  font-weight: 500;\n  text-overflow: ellipsis;\n  overflow: hidden; }\n  .info-view .field-key .label-container {\n    display: flex;\n    flex-direction: row; }\n  .info-view .field-key .label {\n    width: 70%; }\n  .info-view .field-key .label-uploaded {\n    color: rgba(58, 53, 65, 0.8);\n    width: 70%; }\n\n.info-view .field-value {\n  color: rgba(58, 53, 65, 0.6);\n  text-overflow: ellipsis;\n  overflow: hidden; }\n  .info-view .field-value .link {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 20px; }\n\n.info-view .field {\n  margin: 15px 25px;\n  font-size: 0.8rem; }\n";
 styleInject(css_248z$1);
 
 var ProgrammeDocuments = function (props) {
@@ -26264,8 +26345,8 @@ var ProgrammeDocuments = function (props) {
                                     ? t("programme:notAuthToUploadDoc")
                                     : !uploadDocUserPermission(userInfoState, DocType.DESIGN_DOCUMENT, programmeOwnerId, ministryLevelPermission) && t("programme:orgNotAuth"), overlayClassName: "custom-tooltip" },
                                 React.createElement(FileAddOutlined, { className: "common-progress-icon", style: uploadDocUserPermission(userInfoState, DocType.DESIGN_DOCUMENT, programmeOwnerId, ministryLevelPermission)
-                                        ? { color: "#3F3A47", cursor: "pointer" }
-                                        : { color: "#cacaca", cursor: "default" }, onClick: function () {
+                                        ? { color: "#3F3A47", cursor: "pointer", margin: "0px 0px 2.5px 0px" }
+                                        : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
                                         return uploadDocUserPermission(userInfoState, DocType.DESIGN_DOCUMENT, programmeOwnerId, ministryLevelPermission) && handleDesignDocFileUpload();
                                     } })),
                             React.createElement("input", { type: "file", ref: fileInputRef, style: { display: "none" }, accept: ".xls, .xlsx, .ppt, .pptx, .csv, .doc, .docx, .pdf, .png, .jpg", onChange: function (e) {
@@ -26278,8 +26359,8 @@ var ProgrammeDocuments = function (props) {
                                 ? t("programme:notAuthToUploadDoc")
                                 : !uploadDocUserPermission(userInfoState, DocType.DESIGN_DOCUMENT, programmeOwnerId, ministryLevelPermission) && t("programme:orgNotAuth"), overlayClassName: "custom-tooltip" },
                             React.createElement(FileAddOutlined, { className: "common-progress-icon", style: uploadDocUserPermission(userInfoState, DocType.DESIGN_DOCUMENT, programmeOwnerId, ministryLevelPermission)
-                                    ? { color: "#3F3A47", cursor: "pointer" }
-                                    : { color: "#cacaca", cursor: "default" }, onClick: function () {
+                                    ? { color: "#3F3A47", cursor: "pointer", margin: "0px 0px 2.5px 0px" }
+                                    : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
                                     return uploadDocUserPermission(userInfoState, DocType.DESIGN_DOCUMENT, programmeOwnerId, ministryLevelPermission) && handleDesignDocFileUpload();
                                 } })),
                         React.createElement("input", { type: "file", ref: fileInputRef, style: { display: "none" }, accept: ".xls, .xlsx, .ppt, .pptx, .csv, .doc, .docx, .pdf, .png, .jpg", onChange: function (e) {
@@ -26332,8 +26413,8 @@ var ProgrammeDocuments = function (props) {
                                     : !uploadDocUserPermission(userInfoState, DocType.METHODOLOGY_DOCUMENT, programmeOwnerId, ministryLevelPermission) && t("programme:orgNotAuth"), overlayClassName: "custom-tooltip" },
                                 React.createElement(FileAddOutlined, { className: "common-progress-icon", style: designDocStatus === DocumentStatus.ACCEPTED &&
                                         uploadDocUserPermission(userInfoState, DocType.METHODOLOGY_DOCUMENT, programmeOwnerId, ministryLevelPermission)
-                                        ? { color: "#3F3A47", cursor: "pointer" }
-                                        : { color: "#cacaca" }, onClick: function () {
+                                        ? { color: "#3F3A47", cursor: "pointer", margin: "0px 0px 2.5px 0px" }
+                                        : { color: "#cacaca", margin: "0px 0px 2.5px 0px" }, onClick: function () {
                                         return designDocStatus === DocumentStatus.ACCEPTED &&
                                             uploadDocUserPermission(userInfoState, DocType.METHODOLOGY_DOCUMENT, programmeOwnerId, ministryLevelPermission) &&
                                             handleMethodologyFileUpload();
@@ -26352,8 +26433,8 @@ var ProgrammeDocuments = function (props) {
                                     : t("programme:orgNotAuth"), overlayClassName: "custom-tooltip" },
                             React.createElement(FileAddOutlined, { className: "common-progress-icon", style: designDocStatus === DocumentStatus.ACCEPTED &&
                                     uploadDocUserPermission(userInfoState, DocType.METHODOLOGY_DOCUMENT, programmeOwnerId, ministryLevelPermission)
-                                    ? { color: "#3F3A47", cursor: "pointer" }
-                                    : { color: "#cacaca", cursor: "default" }, onClick: function () {
+                                    ? { color: "#3F3A47", cursor: "pointer", margin: "0px 0px 2.5px 0px" }
+                                    : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
                                     return designDocStatus === DocumentStatus.ACCEPTED &&
                                         uploadDocUserPermission(userInfoState, DocType.METHODOLOGY_DOCUMENT, programmeOwnerId, ministryLevelPermission) &&
                                         handleMethodologyFileUpload();
@@ -26407,8 +26488,8 @@ var ProgrammeDocuments = function (props) {
                             React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: impactAssessmentToolTipTitle, overlayClassName: "custom-tooltip" },
                                 React.createElement(FileAddOutlined, { className: "common-progress-icon", style: uploadImpactAssessmentDocUserPermission &&
                                         !isProjectRejected
-                                        ? { color: "#3F3A47", cursor: "pointer" }
-                                        : { color: "#cacaca", cursor: "default" }, onClick: function () {
+                                        ? { color: "#3F3A47", cursor: "pointer", margin: "0px 0px 2.5px 0px" }
+                                        : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
                                         return uploadImpactAssessmentDocUserPermission &&
                                             !isProjectRejected &&
                                             handleImpactAssessmentFileUpload();
@@ -26421,8 +26502,8 @@ var ProgrammeDocuments = function (props) {
                         React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: impactAssessmentToolTipTitle, overlayClassName: "custom-tooltip" },
                             React.createElement(FileAddOutlined, { className: "common-progress-icon", style: uploadImpactAssessmentDocUserPermission &&
                                     !isProjectRejected
-                                    ? { color: "#3F3A47", cursor: "pointer" }
-                                    : { color: "#cacaca", cursor: "default" }, onClick: function () {
+                                    ? { color: "#3F3A47", cursor: "pointer", margin: "0px 0px 2.5px 0px" }
+                                    : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
                                     return uploadImpactAssessmentDocUserPermission &&
                                         !isProjectRejected &&
                                         handleImpactAssessmentFileUpload();