@undp/carbon-library 1.0.281 → 1.0.283

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, EyeInvisibleOutlined, GlobalOutlined, FlagOutlined, LineChartOutlined, LikeOutlined, DislikeOutlined, PlusCircleOutlined, LockFilled, DownloadOutlined, CloseCircleOutlined } 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, LockOutlined, EyeInvisibleOutlined, GlobalOutlined, FlagOutlined, LineChartOutlined, LikeOutlined, DislikeOutlined, PlusCircleOutlined, LockFilled, DownloadOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import { Input, Radio, Space, Row, Col, Button, Dropdown, Table, Empty, message, Form, Steps, Upload, InputNumber, Tooltip, Select, Modal, Alert, Skeleton, Card, Tag, Checkbox, DatePicker, Popover, List, Typography, Spin, Tabs, Progress, Collapse } from 'antd';
-import React, { useState, useEffect, useRef, useContext } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { DateTime } from 'luxon';
 import { Buffer } from 'buffer';
 import PhoneInput, { formatPhoneNumberIntl, formatPhoneNumber } from 'react-phone-number-input';
@@ -2030,7 +2030,7 @@ var NdcActionStatus;
     NdcActionStatus["PENDING"] = "Pending";
     NdcActionStatus["APPROVED"] = "Approved";
 })(NdcActionStatus || (NdcActionStatus = {}));
-var getNdcActionStatusEnumVal = function (value) {
+var getNdcActionStatusEnumVal$1 = function (value) {
     var index = Object.keys(NdcActionStatus).indexOf(value);
     if (index < 0) {
         return value;
@@ -2038,7 +2038,7 @@ var getNdcActionStatusEnumVal = function (value) {
     return Object.values(NdcActionStatus)[index];
 };
 var getNdcStatusTagType = function (status) {
-    switch (getNdcActionStatusEnumVal(status)) {
+    switch (getNdcActionStatusEnumVal$1(status)) {
         case NdcActionStatus.PENDING:
             return "processing";
         case NdcActionStatus.APPROVED:
@@ -21777,7 +21777,7 @@ var NdcActionViewComponent = function (props) {
                 (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", 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))));
@@ -21934,13 +21934,15 @@ var NdcActionViewComponent = function (props) {
                     ((_b = ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.agricultureProperties) === null || _b === void 0 ? void 0 : _b.landAreaUnit);
         }
         if ((ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.typeOfMitigation) === MitigationTypes.AGRICULTURE &&
-            (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.subTypeOfMitigation) === MitigationSubTypes.SOIL_ENRICHMENT_BIOCHAR &&
+            (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.subTypeOfMitigation) ===
+                MitigationSubTypes.SOIL_ENRICHMENT_BIOCHAR &&
             (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.creditCalculationProperties)) {
             mitigationDetails[t("ndcAction:viewMitigationWeight")] =
-                addCommSep((_c = ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.creditCalculationProperties) === null || _c === void 0 ? void 0 : _c.weight) + 't';
+                addCommSep((_c = ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.creditCalculationProperties) === null || _c === void 0 ? void 0 : _c.weight) + "t";
         }
         if ((ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.typeOfMitigation) === MitigationTypes.SOLAR &&
-            (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.subTypeOfMitigation) === MitigationSubTypes.SOLAR_PHOTOVOLTAICS_PV &&
+            (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.subTypeOfMitigation) ===
+                MitigationSubTypes.SOLAR_PHOTOVOLTAICS_PV &&
             (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.solarProperties)) {
             mitigationDetails[t("ndcAction:viewMitigationEnergyGeneration")] =
                 addCommSep((_d = ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.solarProperties) === null || _d === void 0 ? void 0 : _d.energyGeneration) +
@@ -21949,15 +21951,17 @@ var NdcActionViewComponent = function (props) {
                 (_f = ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.solarProperties) === null || _f === void 0 ? void 0 : _f.consumerGroup;
         }
         if ((ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.typeOfMitigation) === MitigationTypes.SOLAR &&
-            ((ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.subTypeOfMitigation) === MitigationSubTypes.SOLAR_WATER_PUMPING_OFF_GRID ||
-                (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.subTypeOfMitigation) === MitigationSubTypes.SOLAR_WATER_PUMPING_ON_GRID) &&
+            ((ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.subTypeOfMitigation) ===
+                MitigationSubTypes.SOLAR_WATER_PUMPING_OFF_GRID ||
+                (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.subTypeOfMitigation) ===
+                    MitigationSubTypes.SOLAR_WATER_PUMPING_ON_GRID) &&
             (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.creditCalculationProperties)) {
             mitigationDetails[t("ndcAction:viewMitigationEnergyGeneration")] =
-                addCommSep((_g = ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.creditCalculationProperties) === null || _g === void 0 ? void 0 : _g.energyGeneration) +
-                    ((_h = ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.creditCalculationProperties) === null || _h === void 0 ? void 0 : _h.energyGenerationUnit);
+                addCommSep((_g = ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.creditCalculationProperties) === null || _g === void 0 ? void 0 : _g.energyGeneration) + ((_h = ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.creditCalculationProperties) === null || _h === void 0 ? void 0 : _h.energyGenerationUnit);
         }
         if ((ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.typeOfMitigation) === MitigationTypes.EE_HOUSEHOLDS &&
-            (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.subTypeOfMitigation) === MitigationSubTypes.STOVES_HOUSES_IN_NAMIBIA &&
+            (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.subTypeOfMitigation) ===
+                MitigationSubTypes.STOVES_HOUSES_IN_NAMIBIA &&
             (ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.creditCalculationProperties)) {
             mitigationDetails[t("ndcAction:viewMitigationNoOfDays")] =
                 (_j = ndcActionDetails === null || ndcActionDetails === void 0 ? void 0 : ndcActionDetails.creditCalculationProperties) === null || _j === void 0 ? void 0 : _j.numberOfDays;
@@ -22140,23 +22144,24 @@ var NdcActionViewComponent = function (props) {
                                                     : "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))),
+                                                " ~ " + monitoringReportversion)))),
+                                    React.createElement(Row, null,
                                         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(FileAddOutlined, null)))),
+                                        (monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.url) && (React.createElement(React.Fragment, 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", style: { color: "#3F3A47" } })))))))),
                                 React.createElement("div", { className: "report-details" },
                                     React.createElement("div", { className: "report-type" },
                                         React.createElement("div", { className: "name-time-container" },
@@ -22165,23 +22170,24 @@ var NdcActionViewComponent = function (props) {
                                                     : "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))),
+                                                " ~ " + verificationReportVersion)))),
+                                    React.createElement(Row, null,
                                         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" } })))))))))))),
+                                            React.createElement(FileAddOutlined, null)))),
+                                        (verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.url) && (React.createElement(React.Fragment, 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", 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" },
@@ -26731,622 +26737,891 @@ var RegistryDashboardComponent = function (props) {
                                     lastUpdateTransferLocations))))))))) : ("")));
 };
 
-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)))));
-};
+React.createContext(null);
 var EditableCell = function (_a) {
-    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 editing = _a.editing, dataIndex = _a.dataIndex, title = _a.title; _a.inputType; var record = _a.record; _a.index; var children = _a.children, onBlurHandler = _a.onBlurHandler, t = _a.t, restProps = __rest(_a, ["editing", "dataIndex", "title", "inputType", "record", "index", "children", "onBlurHandler", "t"]);
+    return (React.createElement("td", __assign({}, restProps), editing && dataIndex === "nationalPlanObjective" ? (React.createElement(Form.Item, { name: dataIndex, style: { margin: 0 }, rules: [
+            {
+                validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
+                    var trimValue;
+                    return __generator(this, function (_a) {
+                        trimValue = typeof value === "string" ? value.trim() : value;
+                        if (!trimValue) {
+                            throw new Error("".concat(title, " ").concat(t("ndc:isRequired")));
+                        }
+                        return [2 /*return*/];
+                    });
+                }); },
+            },
+        ] },
+        React.createElement(Input, { onBlur: function () { return onBlurHandler(record); }, placeholder: t("ndc:nationalPlanObjectivePlaceHolder") }))) : editing && dataIndex === "kpi" ? (React.createElement(Form.Item, { name: dataIndex, style: { margin: 0 }, rules: [
+            {
+                validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
+                    var trimValue;
+                    return __generator(this, function (_a) {
+                        trimValue = typeof value === "string" ? value.trim() : value;
+                        if (trimValue) {
+                            if (isNaN(+trimValue)) {
+                                throw new Error(t("ndc:kpiInvalidFormat"));
+                            }
+                            else if (+trimValue <= 0) {
+                                throw new Error(t("ndc:kpiGreaterThanZero"));
+                            }
+                            else if (trimValue.toString().length > 7) {
+                                throw new Error(t("ndc:kpiMaxLength"));
+                            }
+                        }
+                        else {
+                            throw new Error("".concat(title, " ").concat(t("ndc:isRequired")));
+                        }
+                        return [2 /*return*/];
+                    });
+                }); },
+            },
+        ] },
+        React.createElement(Input, { onBlur: function () { return onBlurHandler(record); }, placeholder: t("ndc:kpiPlaceHolder") }))) : (children)));
 };
 
-var css_248z$7 = ".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";
+var css_248z$7 = ".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\n.ndc-details .ant-input-number-input-wrap {\n  margin-right: 10px; }\n\n.ndc-details tbody {\n  vertical-align: top; }\n\n.ndc-details td .ant-space-item {\n  margin-top: 5px; }\n\n.ndc-details .btn-danger {\n  color: #ff4d4f !important;\n  border-color: #ff8183 !important; }\n";
 styleInject(css_248z$7);
 
-var NdcActionType;
-(function (NdcActionType) {
-    NdcActionType[NdcActionType["main"] = 0] = "main";
-    NdcActionType[NdcActionType["sub"] = 1] = "sub";
-})(NdcActionType || (NdcActionType = {}));
+var NdcDetailsActionType;
+(function (NdcDetailsActionType) {
+    NdcDetailsActionType["MainAction"] = "MainAction";
+    NdcDetailsActionType["SubAction"] = "SubAction";
+})(NdcDetailsActionType || (NdcDetailsActionType = {}));
+var NdcDetailsActionStatus;
+(function (NdcDetailsActionStatus) {
+    NdcDetailsActionStatus["New"] = "New";
+    NdcDetailsActionStatus["Pending"] = "Pending";
+    NdcDetailsActionStatus["Approved"] = "Approved";
+    NdcDetailsActionStatus["Rejected"] = "Rejected";
+})(NdcDetailsActionStatus || (NdcDetailsActionStatus = {}));
+var getNdcActionStatusEnumVal = function (value) {
+    var index = Object.keys(NdcDetailsActionStatus).indexOf(value);
+    if (index < 0) {
+        return value;
+    }
+    return Object.values(NdcDetailsActionStatus)[index];
+};
+var getNdcActionStatusTagType = function (status) {
+    switch (getNdcActionStatusEnumVal(status)) {
+        case NdcDetailsActionStatus.Rejected:
+            return "error";
+        case NdcDetailsActionStatus.Pending:
+            return "processing";
+        case NdcDetailsActionStatus.Approved:
+            return "success";
+        default:
+            return "default";
+    }
+};
+
 var NdcDetailsComponent = function (props) {
-    var t = props.t; props.useConnection; var useUserContext = props.useUserContext;
+    var t = props.t, useConnection = props.useConnection, useUserContext = props.useUserContext;
     var RangePicker = DatePicker.RangePicker;
-    var _a = useState([]), ndcDetailsData = _a[0], setNdcDetailsData = _a[1];
-    var _b = useState(false), loading = _b[0]; _b[1];
-    var periodItemsRef = useRef([]);
+    var _a = useState([]), ndcActionsList = _a[0], setNdcActionsList = _a[1];
+    var _b = useState(false), loading = _b[0], setLoading = _b[1];
     var _c = useState([]), periodItems = _c[0], setPeriodItems = _c[1];
-    var _d = useState("add_new"), selectedTab = _d[0], setSelectedTab = _d[1];
-    var selectedPeriod = useRef({});
-    var addedNdcDetailId = useRef(0);
-    var selectedNdcDetail = useRef({});
+    var _d = useState({}), selectedPeriod = _d[0], setSelectedPeriod = _d[1];
+    var selectedDateRangeRef = useRef({});
     var _e = useState(0), tableKey = _e[0], setTableKey = _e[1];
+    var _f = useConnection(), get = _f.get, post = _f.post, put = _f.put;
+    var _g = useState([]), ministryOrgList = _g[0], setMinistryOrgList = _g[1];
+    var _h = useState({}), actionInfo = _h[0], setActionInfo = _h[1];
+    var _j = useState(false), openConfirmationModal = _j[0], setOpenConfirmationModal = _j[1];
+    var form = Form.useForm()[0];
+    var _k = useState(null), editingKey = _k[0], setEditingKey = _k[1];
+    var _l = useState(0), nextAvailableActionId = _l[0], setNextAvailableActionId = _l[1];
+    var _m = useState([]), expandedRowKeys = _m[0], setExpandedRowKeys = _m[1];
+    var _o = useState([]), subNdcActionsForPeriod = _o[0], setSubNdcActionsForPeriod = _o[1];
+    var _p = useState(1), currentPage = _p[0], setCurrentPage = _p[1];
+    var _q = useState(10), pageSize = _q[0], setPageSize = _q[1];
+    var isEditing = function (record) { return record.id === editingKey; };
+    var isMainActionInEditMode = function () {
+        var unsavedMainActions = ndcMainDetailsForPeriod.filter(function (item) {
+            return item.status === NdcDetailsActionStatus.New &&
+                item.actionType === NdcDetailsActionType.MainAction;
+        });
+        return unsavedMainActions.length > 0 ? true : false;
+    };
     var userInfoState = useUserContext().userInfoState;
-    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) &&
+    useEffect(function () {
+        if (expandedRowKeys && expandedRowKeys.length > 0) {
+            var expandedKey = expandedRowKeys[0];
+            setNdcSubActionsForMainAction(expandedKey);
+        }
+    }, ndcActionsList);
+    var loginMinistry = (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT
+        ? process.env.REACT_APP_GOVERNMENT_MINISTRY
+            ? process.env.REACT_APP_GOVERNMENT_MINISTRY
+            : "Ministry Of Environment"
+        : (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.MINISTRY
+            ? userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyName
+            : undefined;
+    var isGovernmentUser = (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT &&
+        (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly;
+    var isMainNdcActionsEditable = !selectedPeriod.finalized &&
+        (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT &&
+        (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly;
+    var isSubNdcActionsEditable = function (record) {
+        return (!selectedPeriod.finalized &&
+            record.status !== NdcDetailsActionStatus.Approved &&
+            ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT ||
+                ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.MINISTRY &&
+                    (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyName) === record.ministryName)) &&
             (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly);
     };
-    var isAddNdcActionVisible = function () {
-        return ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT &&
+    var checkSubNdcActionCreatePermission = function () {
+        return (!selectedPeriod.finalized &&
+            ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT ||
+                (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.MINISTRY) &&
             (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly);
     };
+    var isNdcActionEditable = function (record) {
+        if (record.actionType === NdcDetailsActionType.MainAction) {
+            return isMainNdcActionsEditable;
+        }
+        else if (record.actionType === NdcDetailsActionType.SubAction) {
+            return isSubNdcActionsEditable(record);
+        }
+    };
+    var ndcMainDetailsForPeriod = selectedPeriod.key !== "add_new"
+        ? ndcActionsList.filter(function (ndcDetail) {
+            return (ndcDetail.periodId === parseInt(selectedPeriod.key) &&
+                ndcDetail.actionType === NdcDetailsActionType.MainAction);
+        })
+        : [];
+    var setNdcSubActionsForMainAction = function (mainActionId) {
+        var subNdcDetails = ndcActionsList.filter(function (ndcDetail) {
+            return (ndcDetail.parentActionId === mainActionId &&
+                ndcDetail.actionType === NdcDetailsActionType.SubAction);
+        });
+        var emptySubNdcRow = {
+            id: nextAvailableActionId,
+            actionType: NdcDetailsActionType.SubAction,
+            nationalPlanObjective: "",
+            kpi: "",
+            ministryName: loginMinistry,
+            status: NdcDetailsActionStatus.New,
+            parentActionId: mainActionId,
+        };
+        if (checkSubNdcActionCreatePermission()) {
+            subNdcDetails = __spreadArray(__spreadArray([], subNdcDetails, true), [emptySubNdcRow], false);
+            setEditingKey(nextAvailableActionId);
+            setNextAvailableActionId(function (value) { return value + 1; });
+            form.setFieldsValue({
+                nationalPlanObjective: "",
+                kpi: "",
+            });
+        }
+        setSubNdcActionsForPeriod(subNdcDetails);
+    };
     var inRange = function (num, min, max) {
         return num >= min && num <= max;
     };
-    function onAddNewSubNdcDetail() {
-        var range = selectedTab.split("-");
-        var ndcDetail = ndcDetailsData.find(function (item) { return item.key === selectedNdcDetail.current.key; });
-        var ndcDetailItemIndex = ndcDetailsData.findIndex(function (item) { return item.key === selectedNdcDetail.current.key; });
-        if (ndcDetail) {
-            addedNdcDetailId.current = addedNdcDetailId.current + 1;
-            var newData = {
-                key: addedNdcDetailId.current,
-                startDate: new Date("".concat(Number(range[0]), "-01-24 23:12:00")),
-                endDate: new Date("".concat(Number(range[0]), "-12-24 23:12:00")),
-                ndcActionId: ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.key,
-                nationalPlanObj: "",
-                kpi: "",
-                ministry: "",
-            };
-            if (!ndcDetail.subNdcDetails) {
-                ndcDetail.subNdcDetails = [];
-            }
-            ndcDetail.subNdcDetails.push(newData);
-        }
-        ndcDetailsData[ndcDetailItemIndex] = ndcDetail;
-        setNdcDetailsData(ndcDetailsData);
-        setTableKey(function (key) { return key + 1; });
-    }
-    var handleSave = function (row) {
-        setNdcDetailsData(function (prevData) {
-            var newData = JSON.parse(JSON.stringify(prevData));
-            if (row.type === NdcActionType.main) {
-                var index = newData.findIndex(function (item) { return row.key === item.key; });
-                if (index !== -1) {
-                    newData[index] = __assign(__assign({}, newData[index]), row);
-                }
-            }
-            else {
-                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 {
-                            parentItem.subNdcDetails[itemIndex] = __assign({}, row);
-                        }
+    var ClearEditMode = function () {
+        var unsavedMainActions = ndcActionsList.filter(function (item) {
+            return item.status === NdcDetailsActionStatus.New &&
+                item.actionType === NdcDetailsActionType.MainAction;
+        });
+        if (unsavedMainActions && unsavedMainActions.length) {
+            var updatedActions = ndcActionsList.filter(function (item) { return !unsavedMainActions.includes(item); });
+            setNdcActionsList(updatedActions);
+        }
+        setEditingKey(null);
+    };
+    var handleSave = function (row) { return __awaiter(void 0, void 0, void 0, function () {
+        var updatedFields, updatedItem, exception_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 9, , 10]);
+                    updatedFields = void 0;
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, form.validateFields()];
+                case 2:
+                    updatedFields = (_a.sent());
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a.sent();
+                    return [2 /*return*/];
+                case 4:
+                    if (!updatedFields) {
+                        ClearEditMode();
+                        return [2 /*return*/];
+                    }
+                    else if (updatedFields.kpi === row.kpi &&
+                        updatedFields.nationalPlanObjective === row.nationalPlanObjective) {
+                        ClearEditMode();
+                        return [2 /*return*/];
+                    }
+                    updatedItem = __assign(__assign({}, row), updatedFields);
+                    if (!(updatedItem.status === NdcDetailsActionStatus.New)) return [3 /*break*/, 6];
+                    if (isGovernmentUser &&
+                        updatedItem.actionType === NdcDetailsActionType.SubAction) {
+                        updatedItem.status = NdcDetailsActionStatus.Approved;
                     }
                     else {
-                        parentItem.subNdcDetails = [row];
+                        updatedItem.status = NdcDetailsActionStatus.Pending;
                     }
-                }
-                newData[parentIndex] = __assign({}, parentItem);
-                setTableKey(function (key) { return key + 1; });
+                    return [4 /*yield*/, post("national/programme/addNdcDetailsAction", __assign(__assign({}, updatedItem), { kpi: parseInt(updatedItem.kpi.toString()) }))];
+                case 5:
+                    _a.sent();
+                    return [3 /*break*/, 8];
+                case 6:
+                    updatedItem.status = NdcDetailsActionStatus.Pending;
+                    return [4 /*yield*/, put("national/programme/updateNdcDetailsAction", __assign(__assign({}, updatedItem), { kpi: parseInt(updatedItem.kpi.toString()) }))];
+                case 7:
+                    _a.sent();
+                    _a.label = 8;
+                case 8:
+                    fetchNdcDetailActions();
+                    ClearEditMode();
+                    return [3 /*break*/, 10];
+                case 9:
+                    exception_2 = _a.sent();
+                    ClearEditMode();
+                    message.open({
+                        type: "error",
+                        content: exception_2.message,
+                        duration: 3,
+                        style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                    });
+                    return [3 /*break*/, 10];
+                case 10: return [2 /*return*/];
             }
-            return newData;
         });
-    };
-    var getNdcDetailsForPeriod = function () {
-        var range = selectedTab.split("-");
-        if (range.length > 1) {
-            var filteredData = ndcDetailsData.filter(function (item) {
-                return inRange(Number(moment(item.startDate).year()), Number(range[0]), Number(range[1]));
-            });
-            return filteredData;
-        }
-        else {
-            return [];
-        }
-    };
-    var getSubNdcDetails = function (key) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        var ndcDetail = ndcDetailsData.find(function (item) { return item.key === key; });
-        if (ndcDetail) {
-            if (((_b = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_a = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _a === void 0 ? void 0 : _a.length) - 1]) === null || _b === void 0 ? void 0 : _b.ministry.trim()) !== "" &&
-                ((_d = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_c = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _c === void 0 ? void 0 : _c.length) - 1]) === null || _d === void 0 ? void 0 : _d.ministry) &&
-                ((_f = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_e = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _e === void 0 ? void 0 : _e.length) - 1]) === null || _f === void 0 ? void 0 : _f.nationalPlanObj.trim()) !== "" &&
-                ((_h = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_g = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _g === void 0 ? void 0 : _g.length) - 1]) === null || _h === void 0 ? void 0 : _h.nationalPlanObj) &&
-                String((_k = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_j = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _j === void 0 ? void 0 : _j.length) - 1]) === null || _k === void 0 ? void 0 : _k.kpi).trim() !== "" &&
-                String((_m = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_l = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _l === void 0 ? void 0 : _l.length) - 1]) === null || _m === void 0 ? void 0 : _m.kpi)) {
-                onAddNewSubNdcDetail();
-            }
-            return ndcDetail.subNdcDetails;
+    }); };
+    var actionMenu = function (record) {
+        if (record.status === NdcDetailsActionStatus.Pending &&
+            isGovernmentUser &&
+            !selectedPeriod.finalized) {
+            return (React.createElement(List, { className: "action-menu", size: "small", dataSource: [
+                    {
+                        text: t("ndc:approve"),
+                        icon: React.createElement(Icon.BoxArrowInDown, null),
+                        style: "color-primary",
+                        click: function () {
+                            setActionInfo({
+                                action: "Approve",
+                                headerText: t("ndc:actionApproveTitle"),
+                                type: "primary",
+                                icon: React.createElement(Icon.BoxArrowInDown, null),
+                                recordId: record.id,
+                            });
+                            setOpenConfirmationModal(true);
+                        },
+                    },
+                    {
+                        text: t("ndc:reject"),
+                        icon: React.createElement(Icon.XOctagon, null),
+                        style: "color-error",
+                        click: function () {
+                            setActionInfo({
+                                action: "Reject",
+                                headerText: t("ndc:rejectApproveTitle"),
+                                type: "danger",
+                                icon: React.createElement(Icon.XOctagon, null),
+                                recordId: record.id,
+                            });
+                            setOpenConfirmationModal(true);
+                        },
+                    },
+                ], renderItem: function (item) { return (React.createElement(List.Item, { onClick: item.click },
+                    React.createElement(Typography.Text, { className: "action-icon ".concat(item.style) }, item.icon),
+                    React.createElement("span", null, item.text))); } }));
         }
         else {
-            return [];
+            return null;
         }
     };
     var defaultColumns = [
         {
             title: t("ndc:ndcColumnsNationalPlanObj"),
-            dataIndex: "nationalPlanObj",
-            key: "nationalPlanObj",
+            dataIndex: "nationalPlanObjective",
+            key: "nationalPlanObjective",
             align: "left",
+            width: 400,
             editable: true,
-            width: "50%",
-            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(Space, { size: "middle" },
-                React.createElement("span", null, record.nationalPlanObj))) : (React.createElement("input", { placeholder: "Please add Programmes", className: "ant-input", type: "text" })))); },
+            render: function (_, record) { return (React.createElement(Space, { size: "middle" }, record.nationalPlanObjective ? (React.createElement(Tooltip, { title: isNdcActionEditable(record) ? "" : t("ndc:ndcUnauthorisedMsg") },
+                React.createElement("span", null, record.nationalPlanObjective))) : (React.createElement(Input, { placeholder: t("ndc:nationalPlanObjectivePlaceHolder") })))); },
         },
         {
             title: t("ndc:ndcColumnsKpi"),
             dataIndex: "kpi",
             key: "kpi",
             align: "left",
+            width: 100,
             editable: true,
-            width: "10%",
-            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(Space, { size: "middle" },
-                React.createElement("span", null, record.kpi))) : (React.createElement("input", { placeholder: "Enter Kpi", className: "ant-input", type: "text" })))); },
+            render: function (_, record) { return (React.createElement(Space, { size: "middle" }, record.kpi ? (React.createElement(Tooltip, { title: isNdcActionEditable(record) ? "" : t("ndc:ndcUnauthorisedMsg") },
+                React.createElement("span", null, record.kpi))) : (React.createElement(Input, { placeholder: "Enter Kpi" })))); },
         },
         {
-            title: "Government Department",
-            dataIndex: "ministry",
-            key: "ministry",
+            title: t("ndc:ndcColumnsMinistry"),
+            dataIndex: "ministryName",
+            key: "ministryName",
             align: "left",
-            editable: true,
-            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 Government Department", className: "ant-input", type: "text" })))); },
+            width: 300,
+            editable: false,
+            render: function (_, record) { return (React.createElement(Tooltip, { title: isSubNdcActionsEditable(record) ? "" : t("ndc:ndcUnauthorisedMsg") },
+                React.createElement(Select, { disabled: !(isSubNdcActionsEditable(record) && isEditing(record)), defaultValue: record.ministryName ? record.ministryName : loginMinistry, style: { width: 220 }, onChange: function (value, option) {
+                        record.ministryName = option.label;
+                        handleSave(record);
+                    }, options: ministryOrgList }))); },
+        },
+        {
+            title: t("ndc:ndcColumnsStatus"),
+            dataIndex: "status",
+            key: "status",
+            align: "left",
+            width: 200,
+            editable: false,
+            render: function (_, record) {
+                var menu = actionMenu(record);
+                return (React.createElement("div", { onClick: function (event) { return event.stopPropagation(); } },
+                    record.actionType === NdcDetailsActionType.SubAction &&
+                        record.status !== NdcDetailsActionStatus.New ? (React.createElement(Tooltip, { title: record.status, color: TooltipColor, key: TooltipColor },
+                        React.createElement(Tag, { className: "clickable", color: getNdcActionStatusTagType(record.status) }, addSpaces(record.status)))) : (""),
+                    record.actionType === NdcDetailsActionType.SubAction && menu ? (React.createElement(Popover, { placement: "bottomRight", content: menu, trigger: "click" },
+                        React.createElement(EllipsisOutlined, { rotate: 90, style: {
+                                fontWeight: 600,
+                                fontSize: "1rem",
+                                cursor: "pointer",
+                            } }))) : (React.createElement("span", null))));
+            },
         },
     ];
     var columns = defaultColumns.map(function (col) {
         if (!col.editable) {
             return col;
         }
-        return __assign(__assign({}, col), { onCell: function (record) { return ({
-                record: record,
-                editable: col.editable,
-                dataIndex: col.dataIndex,
-                title: col.title,
-                handleSave: handleSave,
-            }); } });
+        return __assign(__assign({}, col), { onCell: function (record) {
+                return {
+                    record: record,
+                    editing: isEditing(record),
+                    dataIndex: col.dataIndex,
+                    title: col.title,
+                    onBlurHandler: function (record) {
+                        if (isEditing(record)) {
+                            handleSave(record);
+                        }
+                    },
+                    t: t,
+                };
+            } });
     });
-    function onAddNewNdcDetail() {
-        var range = selectedTab.split("-");
-        var ndcActionId = ++addedNdcDetailId.current;
-        var newData = {
-            key: ndcActionId,
-            type: NdcActionType.main,
-            startDate: new Date("".concat(Number(range[0]), "-01-24 23:12:00")),
-            endDate: new Date("".concat(Number(range[0]), "-12-24 23:12:00")),
-            nationalPlanObj: "",
-            kpi: "",
-            ministry: "",
-            subNdcDetails: [
-                {
-                    key: ++addedNdcDetailId.current,
-                    ndcActionId: ndcActionId,
-                    type: NdcActionType.sub,
-                    startDate: new Date("2019-03-25"),
-                    endDate: new Date("2020-03-25"),
-                    nationalPlanObj: "",
-                    kpi: "",
-                    ministry: "",
-                },
-            ],
-        };
-        setNdcDetailsData(__spreadArray(__spreadArray([], ndcDetailsData, true), [newData], false));
+    function onClickedAddNewNdcDetail() {
+        return __awaiter(this, void 0, void 0, function () {
+            var periodId, newData_1, lastPage;
+            return __generator(this, function (_a) {
+                if (selectedPeriod.key !== "add_new") {
+                    form.setFieldsValue({
+                        nationalPlanObjective: "",
+                        kpi: "",
+                    });
+                    periodId = parseInt(selectedPeriod.key);
+                    newData_1 = {
+                        id: nextAvailableActionId,
+                        actionType: NdcDetailsActionType.MainAction,
+                        nationalPlanObjective: "",
+                        kpi: "",
+                        ministryName: loginMinistry,
+                        periodId: periodId,
+                        status: NdcDetailsActionStatus.New,
+                    };
+                    setEditingKey(nextAvailableActionId);
+                    setNextAvailableActionId(function (value) { return value + 1; });
+                    setNdcActionsList(function (ndcActionsList) { return __spreadArray(__spreadArray([], ndcActionsList, true), [
+                        newData_1,
+                    ], false); });
+                    setTableKey(function (key) { return key + 1; });
+                    if (ndcMainDetailsForPeriod.length + 1 > pageSize) {
+                        lastPage = Math.ceil(ndcMainDetailsForPeriod.length / pageSize);
+                        setCurrentPage(lastPage);
+                    }
+                }
+                return [2 /*return*/];
+            });
+        });
     }
     var components = {
         body: {
-            row: EditableRow,
             cell: EditableCell,
         },
     };
-    //commented because rendering issue
-    function ndcDetailsTableContent() {
-        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 () {
-        if (selectedPeriod &&
-            selectedPeriod.current &&
-            selectedPeriod.current.start &&
-            selectedPeriod.current.end) {
-            var newPeriodItem_1 = {
-                key: "".concat(selectedPeriod.current.start, "-").concat(selectedPeriod.current.end),
-                label: "".concat(selectedPeriod.current.start, "-").concat(selectedPeriod.current.end),
-                start: selectedPeriod.current.start,
-                end: selectedPeriod.current.end,
-                children: ndcDetailsTableContent(),
-            };
-            var existingIndex = periodItemsRef.current.findIndex(function (item) {
-                return inRange(newPeriodItem_1.start, item.start, item.end) ||
-                    inRange(newPeriodItem_1.end, item.start, item.end);
+    var onClickedDeletePeriod = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setActionInfo({
+                action: "Delete",
+                headerText: t("ndc:periodDeleteConfirmTitle"),
+                type: "danger",
+                icon: React.createElement(Icon.XCircle, null),
+                recordId: selectedPeriod.key,
             });
-            if (existingIndex === -1) {
-                setPeriodItems(function (items) { return __spreadArray(__spreadArray([], items, true), [newPeriodItem_1], false); });
-                periodItemsRef.current = __spreadArray(__spreadArray([], periodItemsRef.current, true), [newPeriodItem_1], false);
+            setOpenConfirmationModal(true);
+            return [2 /*return*/];
+        });
+    }); };
+    var onClickedFinalizePeriod = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var isPendingActionAvailable;
+        return __generator(this, function (_a) {
+            if (ndcMainDetailsForPeriod.length === 0) {
+                message.open({
+                    type: "error",
+                    content: t("ndc:finalizeNdcEmptyErrorText"),
+                    duration: 3,
+                    style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                });
+                return [2 /*return*/];
             }
-            else {
+            isPendingActionAvailable = false;
+            ndcMainDetailsForPeriod.forEach(function (mainAction) {
+                var pendingActions = ndcActionsList.filter(function (action) {
+                    return (action.status === NdcDetailsActionStatus.Pending &&
+                        action.actionType === NdcDetailsActionType.SubAction &&
+                        action.parentActionId === mainAction.id);
+                });
+                if (pendingActions && pendingActions.length > 0) {
+                    isPendingActionAvailable = true;
+                    return;
+                }
+            });
+            if (isPendingActionAvailable) {
                 message.open({
                     type: "error",
-                    content: t("ndc:rangeAlreadyExists"),
+                    content: t("ndc:finalizeErrorText"),
                     duration: 3,
                     style: { textAlign: "right", marginRight: 15, marginTop: 10 },
                 });
             }
+            else {
+                setActionInfo({
+                    action: "Finalize",
+                    headerText: t("ndc:finalizeApproveTitle"),
+                    text: t("ndc:finalizeApproveSubTitle"),
+                    type: "primary",
+                    icon: React.createElement(Icon.Clipboard2Check, null),
+                    recordId: selectedPeriod.key,
+                });
+                setOpenConfirmationModal(true);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var onMainTableRowExpand = function (expanded, record) {
+        var keys = [];
+        if (expanded) {
+            keys.push(record.id);
         }
-    };
-    useEffect(function () {
-        if (periodItems && periodItems.length > 3) {
-            setSelectedTab(periodItems[periodItems.length - 1].key);
-        }
-    }, [periodItems]);
-    var onDateRangeChanged = function (range) {
-        var period = {
-            start: Number(moment(range[0]).year()),
-            end: Number(moment(range[1]).year()),
-        };
-        selectedPeriod.current = period;
+        setExpandedRowKeys(keys);
+        setNdcSubActionsForMainAction(record.id);
     };
     function addNewPeriodContent() {
         return (React.createElement("div", null,
-            React.createElement(Row, null,
-                React.createElement(RangePicker, { onChange: onDateRangeChanged, picker: "year" })),
-            React.createElement(Row, { className: "mg-top-1" },
-                React.createElement("div", { className: "ndc-steps-actions" },
-                    React.createElement(Button, { type: "primary", onClick: onAddNewPeriod, htmlType: "submit", loading: loading }, t("ndc:submit")),
-                    React.createElement(Button, { className: "back-btn", onClick: onCancelPeriod, loading: loading }, t("ndc:back"))))));
-    }
-    function getSubNdcActionContent(record) {
-        selectedNdcDetail.current = record;
-        return (React.createElement(Table, { components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getSubNdcDetails(record.key), columns: columns, showHeader: false, pagination: false }));
+            React.createElement(Row, { justify: "start", align: "middle", gutter: [16, 16] },
+                React.createElement(Col, { flex: "340px" },
+                    React.createElement(RangePicker, { disabledDate: function (current) { return moment(current).year() < 1900; }, onChange: onDateRangeChanged, picker: "year" })),
+                React.createElement(Col, { flex: "auto" },
+                    React.createElement(Button, { type: "primary", onClick: onAddNewPeriod, htmlType: "submit", loading: loading }, t("ndc:submit"))))));
     }
-    var onTabChange = function (key) {
-        setSelectedTab(key);
+    var onChange = function (page, size) {
+        setCurrentPage(page);
+        setPageSize(size);
     };
-    useEffect(function () {
-        var defaultNdcDetails = [
-            {
-                key: 1,
-                type: NdcActionType.main,
-                startDate: new Date("2019-03-25"),
-                endDate: new Date("2020-03-25"),
-                nationalPlanObj: "Enhance value addition in key growth opportunities",
-                kpi: 25,
-                ministry: "Ministry of Environment",
-                subNdcDetails: [
-                    {
-                        key: 6,
-                        ndcActionId: 1,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "Enhance value addition in key growth opportunities sub details",
-                        kpi: 25,
-                        ministry: "Ministry of Agriculture, Water and Forestry (MAWF)",
-                    },
-                    {
-                        key: 7,
-                        ndcActionId: 1,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "",
-                        kpi: "",
-                        ministry: "",
-                    },
-                ],
-            },
-            {
-                key: 2,
-                type: NdcActionType.main,
-                startDate: new Date("2019-03-25"),
-                endDate: new Date("2019-08-25"),
-                nationalPlanObj: "Strengthen the private sector to create 10,000 jobs",
-                kpi: 10500,
-                ministry: "Ministry of Environment",
-                subNdcDetails: [
-                    {
-                        key: 8,
-                        ndcActionId: 2,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "",
-                        kpi: "",
-                        ministry: "",
-                    },
-                ],
-            },
-            {
-                key: 12,
-                type: NdcActionType.main,
-                startDate: new Date("2019-03-25"),
-                endDate: new Date("2019-08-25"),
-                nationalPlanObj: "Other",
-                kpi: 10500,
-                ministry: "Ministry of Environment",
-                subNdcDetails: [
-                    {
-                        key: 8,
-                        ndcActionId: 12,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "",
-                        kpi: "",
-                        ministry: "",
-                    },
-                ],
-            },
-            {
-                key: 3,
-                type: NdcActionType.main,
-                startDate: new Date("2021-03-25"),
-                endDate: new Date("2022-03-25"),
-                nationalPlanObj: "Consolidate and increase the stock and quality of productive infrastructure by 50%",
-                kpi: 48,
-                ministry: "Ministry of Environment",
-                subNdcDetails: [
-                    {
-                        key: 9,
-                        ndcActionId: 3,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "",
-                        kpi: "",
-                        ministry: "",
-                    },
-                ],
-            },
-            {
-                key: 4,
-                type: NdcActionType.main,
-                startDate: new Date("2022-03-25"),
-                endDate: new Date("2022-05-25"),
-                nationalPlanObj: "Enhance the productivity and social wellbeing of the population",
-                kpi: 20,
-                ministry: "Ministry of Environment",
-                subNdcDetails: [
-                    {
-                        key: 10,
-                        ndcActionId: 4,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "",
-                        kpi: "",
-                        ministry: "",
-                    },
-                ],
-            },
-            {
-                key: 5,
-                type: NdcActionType.main,
-                startDate: new Date("2022-03-25"),
-                endDate: new Date("2023-03-25"),
-                nationalPlanObj: "Strengthen the role of the state in guiding and facilitating development",
-                kpi: 10,
-                ministry: "Ministry of Environment",
-                subNdcDetails: [
-                    {
-                        key: 11,
-                        ndcActionId: 5,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "",
-                        kpi: "",
-                        ministry: "",
-                    },
-                ],
-            },
-            {
-                key: 13,
-                type: NdcActionType.main,
-                startDate: new Date("2022-03-25"),
-                endDate: new Date("2023-03-25"),
-                nationalPlanObj: "Convert to solar energy",
-                kpi: 50000,
-                ministry: "Ministry of Environment",
-                subNdcDetails: [
-                    {
-                        key: 11,
-                        ndcActionId: 13,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "Convert to solar energy",
-                        kpi: "3000",
-                        ministry: "Ministry of Agriculture, Water and Forestry (MAWF)",
-                    },
-                    {
-                        key: 14,
-                        ndcActionId: 13,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "",
-                        kpi: "",
-                        ministry: "",
-                    },
-                ],
-            },
-            {
-                key: 15,
-                type: NdcActionType.main,
-                startDate: new Date("2022-03-25"),
-                endDate: new Date("2023-03-25"),
-                nationalPlanObj: "Strengthen the private sector to create jobs",
-                kpi: 10000,
-                ministry: "Ministry of Environment",
-                subNdcDetails: [
-                    {
-                        key: 16,
-                        ndcActionId: 15,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "Strengthen the private sector to create jobs",
-                        kpi: "7200",
-                        ministry: "Ministry of Tourism (MoT)",
-                    },
-                    {
-                        key: 17,
-                        ndcActionId: 15,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "",
-                        kpi: "",
-                        ministry: "",
-                    },
-                ],
-            },
-            {
-                key: 18,
-                type: NdcActionType.main,
-                startDate: new Date("2022-03-25"),
-                endDate: new Date("2023-03-25"),
-                nationalPlanObj: "Other",
-                kpi: "",
-                ministry: "Ministry of Environment",
-                subNdcDetails: [
-                    {
-                        key: 19,
-                        ndcActionId: 18,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "Strengthen the private sector to create jobs",
-                        kpi: "",
-                        ministry: "Ministry of Agriculture, Water and Forestry (MAWF)",
+    function mainNdcActionTableContent() {
+        return (React.createElement("div", null,
+            React.createElement(Row, null,
+                React.createElement(Col, { span: 24 },
+                    React.createElement(Form, { form: form, component: false },
+                        React.createElement(Table, { tableLayout: "fixed", key: tableKey, className: "common-table-class", rowKey: "id", pagination: {
+                                current: currentPage,
+                                pageSize: pageSize,
+                                total: ndcMainDetailsForPeriod.length,
+                                showQuickJumper: true,
+                                showSizeChanger: true,
+                                onChange: onChange,
+                            }, components: components, rowClassName: function () { return "editable-row"; }, bordered: true, loading: loading, dataSource: ndcMainDetailsForPeriod, columns: columns, expandedRowKeys: expandedRowKeys, onExpand: onMainTableRowExpand, expandable: {
+                                expandedRowRender: function (record) {
+                                    return subNdcActionTableContent();
+                                },
+                                columnWidth: 40,
+                            }, onRow: function (record, rowIndex) {
+                                return {
+                                    onClick: function (event) {
+                                        if (record.id &&
+                                            isNdcActionEditable(record) &&
+                                            !isEditing(record)) {
+                                            form.setFieldsValue(__assign({}, record));
+                                            setEditingKey(record.id);
+                                        }
+                                    },
+                                    onMouseLeave: function () {
+                                        if (isEditing(record)) {
+                                            handleSave(record);
+                                        }
+                                    },
+                                };
+                            }, footer: function () {
+                                return isGovernmentUser &&
+                                    !selectedPeriod.finalized && (React.createElement(Row, { justify: "center" },
+                                    React.createElement(Button, { className: "btnAddNewMainAct", disabled: isMainActionInEditMode(), onClick: onClickedAddNewNdcDetail, type: "default" }, t("ndc:addNdcAction"))));
+                            } })))),
+            isGovernmentUser && !selectedPeriod.finalized ? (React.createElement(Row, { justify: "end" }, isMainActionInEditMode() ? (React.createElement(React.Fragment, null,
+                React.createElement(Button, { className: "mg-left-1", disabled: true }, t("ndc:delete")),
+                React.createElement(Button, { className: "mg-left-1", disabled: true }, t("ndc:finalize")))) : (React.createElement(React.Fragment, null,
+                React.createElement(Button, { className: "mg-left-1 btn-danger", onClick: onClickedDeletePeriod, htmlType: "submit", loading: loading }, t("ndc:delete")),
+                React.createElement(Button, { className: "mg-left-1", type: "primary", onClick: onClickedFinalizePeriod, htmlType: "submit", loading: loading }, t("ndc:finalize")))))) : ("")));
+    }
+    function subNdcActionTableContent(record) {
+        return (React.createElement(Table, { tableLayout: "fixed", rowKey: "id", components: components, rowClassName: function () { return "editable-row"; }, className: "common-table-class", bordered: true, dataSource: subNdcActionsForPeriod, loading: loading, onRow: function (record, rowIndex) {
+                return {
+                    onClick: function (event) {
+                        if (record.id &&
+                            isNdcActionEditable(record) &&
+                            !isEditing(record)) {
+                            form.setFieldsValue(__assign({}, record));
+                            setEditingKey(record.id);
+                        }
                     },
-                    {
-                        key: 20,
-                        ndcActionId: 18,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "",
-                        kpi: "",
-                        ministry: "",
+                    onMouseLeave: function () {
+                        if (isEditing(record)) {
+                            handleSave(record);
+                        }
                     },
-                ],
-            },
-        ];
-        var initialPeriods = [
-            {
-                key: "2019-2020",
-                label: "2019-2020",
-                start: 2019,
-                end: 2020,
-                children: ndcDetailsTableContent(),
-            },
-            {
-                key: "2021-2023",
-                label: "2021-2023",
-                start: 2021,
-                end: 2021,
-                children: ndcDetailsTableContent(),
-            },
-        ];
-        if (isAddRangeVisible()) {
-            initialPeriods.unshift({
-                key: "add_new",
-                label: "Add New",
-                start: 0,
-                end: 0,
-                children: addNewPeriodContent(),
-            });
+                };
+            }, columns: columns, showHeader: false, pagination: false }));
+    }
+    var onAddNewPeriod = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var periodItem_1, existingIndex, response, addedPeriodItem, updatedPeriodItem_1, exception_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 4, , 5]);
+                    if (!(selectedDateRangeRef &&
+                        selectedDateRangeRef.current &&
+                        selectedDateRangeRef.current.startYear &&
+                        selectedDateRangeRef.current.endYear)) return [3 /*break*/, 3];
+                    periodItem_1 = {
+                        startYear: selectedDateRangeRef.current.startYear,
+                        endYear: selectedDateRangeRef.current.endYear,
+                        finalized: false,
+                    };
+                    existingIndex = periodItems.findIndex(function (item) {
+                        return inRange(periodItem_1.startYear, item.startYear, item.endYear) ||
+                            inRange(periodItem_1.endYear, item.startYear, item.endYear);
+                    });
+                    if (!(existingIndex === -1)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, post("national/programme/addNdcDetailsPeriod", __assign({}, periodItem_1))];
+                case 1:
+                    response = _a.sent();
+                    if (response && response.data) {
+                        addedPeriodItem = response.data;
+                        updatedPeriodItem_1 = __assign(__assign({}, addedPeriodItem), { key: addedPeriodItem.id, label: "".concat(addedPeriodItem.startYear, "-").concat(addedPeriodItem.endYear) });
+                        setPeriodItems(function (items) { return __spreadArray(__spreadArray([], items, true), [updatedPeriodItem_1], false); });
+                        setSelectedPeriod(updatedPeriodItem_1);
+                    }
+                    return [3 /*break*/, 3];
+                case 2:
+                    message.open({
+                        type: "error",
+                        content: t("ndc:rangeAlreadyExists"),
+                        duration: 3,
+                        style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                    });
+                    _a.label = 3;
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    exception_3 = _a.sent();
+                    message.open({
+                        type: "error",
+                        content: exception_3.message,
+                        duration: 3,
+                        style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                    });
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var onDateRangeChanged = function (range) {
+        if (range) {
+            var period = {
+                startYear: Number(moment(range[0]).year()),
+                endYear: Number(moment(range[1]).year()),
+            };
+            if (period.startYear === period.endYear) {
+                message.open({
+                    type: "error",
+                    content: t("ndc:sameStartEndDates"),
+                    duration: 3,
+                    style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                });
+            }
+            else {
+                selectedDateRangeRef.current = period;
+            }
+        }
+    };
+    var onTabChange = function (key) {
+        var selectedPeriod = periodItems.find(function (item) { return item.key === key; });
+        if (selectedPeriod) {
+            setSelectedPeriod(selectedPeriod);
         }
-        addedNdcDetailId.current = 20;
-        setPeriodItems(initialPeriods);
-        periodItemsRef.current = initialPeriods;
-        setNdcDetailsData(defaultNdcDetails);
+    };
+    var onActionConfirmed = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var actionResponse, exception_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 10, , 11]);
+                    if (!(actionInfo.action === "Approve")) return [3 /*break*/, 3];
+                    return [4 /*yield*/, post("national/programme/approveNdcDetailsAction", {
+                            id: actionInfo.recordId,
+                        })];
+                case 2:
+                    actionResponse = _a.sent();
+                    return [3 /*break*/, 9];
+                case 3:
+                    if (!(actionInfo.action === "Reject")) return [3 /*break*/, 5];
+                    return [4 /*yield*/, post("national/programme/rejectNdcDetailsAction", {
+                            id: actionInfo.recordId,
+                        })];
+                case 4:
+                    actionResponse = _a.sent();
+                    return [3 /*break*/, 9];
+                case 5:
+                    if (!(actionInfo.action === "Finalize")) return [3 /*break*/, 7];
+                    return [4 /*yield*/, post("national/programme/finalizeNdcDetailsPeriod", {
+                            id: selectedPeriod.key,
+                        })];
+                case 6:
+                    actionResponse = _a.sent();
+                    return [3 /*break*/, 9];
+                case 7:
+                    if (!(actionInfo.action === "Delete")) return [3 /*break*/, 9];
+                    return [4 /*yield*/, post("national/programme/deleteNdcDetailsPeriod", {
+                            id: selectedPeriod.key,
+                        })];
+                case 8:
+                    actionResponse = _a.sent();
+                    _a.label = 9;
+                case 9: return [3 /*break*/, 11];
+                case 10:
+                    exception_4 = _a.sent();
+                    message.open({
+                        type: "error",
+                        content: exception_4.message,
+                        duration: 3,
+                        style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                    });
+                    return [3 /*break*/, 11];
+                case 11:
+                    if (actionResponse) {
+                        if (actionInfo.action === "Delete") {
+                            message.open({
+                                type: "success",
+                                content: t("ndc:deletePeriodSuccessMsg"),
+                                duration: 3,
+                                style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                            });
+                            fetchNdcDetailPeriods();
+                        }
+                        else if (actionInfo.action === "Finalize") {
+                            message.open({
+                                type: "success",
+                                content: t("ndc:finalizeSuccessMsg"),
+                                duration: 3,
+                                style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                            });
+                            fetchNdcDetailPeriods();
+                            setExpandedRowKeys([]);
+                            ClearEditMode();
+                        }
+                        else if (actionInfo.action === "Approve") {
+                            message.open({
+                                type: "success",
+                                content: t("ndc:approveSuccessMsg"),
+                                duration: 3,
+                                style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                            });
+                            fetchNdcDetailActions();
+                        }
+                        else if (actionInfo.action === "Reject") {
+                            message.open({
+                                type: "success",
+                                content: t("ndc:rejectSuccessMsg"),
+                                duration: 3,
+                                style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                            });
+                            fetchNdcDetailActions();
+                        }
+                    }
+                    setOpenConfirmationModal(false);
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var onActionCanceled = function () {
+        setOpenConfirmationModal(false);
+    };
+    var fetchNdcDetailPeriods = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var periods, addNewTab, response, exception_5;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    periods = [];
+                    addNewTab = {
+                        key: "add_new",
+                        label: "Add New",
+                        startYear: 0,
+                        endYear: 0,
+                        finalized: false,
+                        deleted: false,
+                    };
+                    return [4 /*yield*/, get("national/programme/queryNdcDetailsPeriod")];
+                case 2:
+                    response = _a.sent();
+                    if (response && response.data) {
+                        periods = response.data.map(function (period) {
+                            return __assign(__assign({}, period), { key: period.id, label: period.finalized ? (React.createElement("span", null,
+                                    React.createElement(LockOutlined, null),
+                                    " ",
+                                    period.startYear,
+                                    "-",
+                                    period.endYear,
+                                    " ")) : ("".concat(period.startYear, "-").concat(period.endYear)) });
+                        });
+                    }
+                    if (isGovernmentUser) {
+                        periods.unshift(addNewTab);
+                    }
+                    setPeriodItems(periods);
+                    if (isGovernmentUser) {
+                        setSelectedPeriod(addNewTab);
+                    }
+                    else {
+                        setSelectedPeriod(periods[0]);
+                    }
+                    setLoading(false);
+                    return [3 /*break*/, 5];
+                case 3:
+                    exception_5 = _a.sent();
+                    message.open({
+                        type: "error",
+                        content: exception_5.message,
+                        duration: 3,
+                        style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                    });
+                    return [3 /*break*/, 5];
+                case 4:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var fetchNdcDetailActions = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response, maxActionId, exception_6;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, get("national/programme/queryNdcDetailsAction")];
+                case 2:
+                    response = _a.sent();
+                    if (response && response.data) {
+                        maxActionId = Math.max.apply(Math, response.data.map(function (item) { return item.id; }));
+                        setNextAvailableActionId(maxActionId + 1);
+                        setNdcActionsList(response.data);
+                    }
+                    setLoading(false);
+                    return [3 /*break*/, 5];
+                case 3:
+                    exception_6 = _a.sent();
+                    message.open({
+                        type: "error",
+                        content: exception_6.message,
+                        duration: 3,
+                        style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                    });
+                    return [3 /*break*/, 5];
+                case 4:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var fetchMinistries = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response, ministryOrgDetails, exception_7;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, get("national/organisation/getMinistries")];
+                case 2:
+                    response = _a.sent();
+                    if (response && response.data) {
+                        ministryOrgDetails = response.data.map(function (value) {
+                            return {
+                                value: value.company_companyId,
+                                label: value.company_name,
+                            };
+                        });
+                        setMinistryOrgList(ministryOrgDetails);
+                    }
+                    setLoading(false);
+                    return [3 /*break*/, 5];
+                case 3:
+                    exception_7 = _a.sent();
+                    message.open({
+                        type: "error",
+                        content: exception_7.message,
+                        duration: 3,
+                        style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                    });
+                    return [3 /*break*/, 5];
+                case 4:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        fetchNdcDetailPeriods();
+        fetchNdcDetailActions();
+        fetchMinistries();
     }, []);
-    return (React.createElement("div", { className: "ndc-management content-container" },
+    return (React.createElement("div", { className: "ndc-details content-container" },
         React.createElement("div", { className: "title-bar" },
             React.createElement(Row, { justify: "space-between", align: "middle" },
                 React.createElement(Col, { span: 20 },
                     React.createElement("div", { className: "body-title" }, t("ndc:ndcTitle")),
                     React.createElement("div", { className: "body-sub-title" }, t("ndc:ndcSubTitle"))))),
         React.createElement("div", null,
-            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(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(Tabs, { centered: false, defaultActiveKey: "1", items: periodItems, activeKey: selectedPeriod.key, onChange: onTabChange })),
+        React.createElement("div", null, selectedPeriod.key === "add_new"
+            ? addNewPeriodContent()
+            : mainNdcActionTableContent()),
+        React.createElement(UserActionConfirmationModel, { t: t, actionInfo: actionInfo, onActionConfirmed: onActionConfirmed, onActionCanceled: onActionCanceled, openModal: openConfirmationModal, errorMsg: "", loading: loading })));
 };
 
 var ImgWithFallback = function (_a) {
@@ -28121,7 +28396,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$5 = ".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: flex-start;\n    justify-content: space-between; }\n    .ndc-action-body .report-details .report-type {\n      display: flex;\n      flex-direction: row;\n      width: 60%;\n      align-items: flex-start; }\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";
+var css_248z$5 = ".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: flex-start;\n    justify-content: space-between; }\n    .ndc-action-body .report-details .report-type {\n      display: flex;\n      flex-direction: row;\n      width: 60%;\n      align-items: flex-start; }\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        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      justify-content: flex-start;\n      gap: 20px;\n      align-items: start; }\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$5);
 
 var NdcActionBody = function (props) {
@@ -28387,7 +28662,7 @@ var NdcActionBody = function (props) {
                     React.createElement("div", { className: "icon" }, (monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.url) ? (monitoringReportPending ? ((companyRolePermission || ministryLevelPermission) && (React.createElement(React.Fragment, null,
                         React.createElement(LikeOutlined, { onClick: function () {
                                 return docAction(monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.id, DocumentStatus.ACCEPTED, monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.actionId, monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.type);
-                            }, className: "common-progress-icon", style: { color: "#976ED7" } }),
+                            }, className: "common-progress-icon", style: { color: "#976ED7", paddingTop: '3px' } }),
                         React.createElement(DislikeOutlined, { onClick: function () {
                                 setRejectDocData({
                                     id: monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.id,
@@ -28402,8 +28677,8 @@ var NdcActionBody = function (props) {
                                     icon: React.createElement(DislikeOutlined, null),
                                 });
                                 setOpenRejectDocConfirmationModal(true);
-                            }, className: "common-progress-icon margin-left-1", style: { color: "#FD6F70" } })))) : monitoringReportAccepted ? (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380" } })) : (monitoringReportRejected && (React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: t("programme:rejectTip"), overlayClassName: "custom-tooltip" },
-                        React.createElement(ExclamationCircleOutlined, { className: "common-progress-icon", style: { color: "#FD6F70" } }))))) : (React.createElement(React.Fragment, null,
+                            }, className: "common-progress-icon margin-left-1", style: { color: "#FD6F70", paddingTop: '3px' } })))) : monitoringReportAccepted ? (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380", paddingTop: '3px' } })) : (monitoringReportRejected && (React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: t("programme:rejectTip"), overlayClassName: "custom-tooltip" },
+                        React.createElement(ExclamationCircleOutlined, { className: "common-progress-icon", style: { color: "#FD6F70", paddingTop: '3px' } }))))) : (React.createElement(React.Fragment, null,
                         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, ministryLevelPermission)
@@ -28434,7 +28709,7 @@ var NdcActionBody = function (props) {
                             } }))))),
                 (monitoringReportData === null || monitoringReportData === void 0 ? void 0 : monitoringReportData.url) && (React.createElement("div", { className: "report-link" },
                     React.createElement("div", { className: "link" }, 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(BookOutlined, { className: "common-progress-icon margin-right-1", style: { color: "#3F3A47", paddingTop: '3px' } })))),
                     !monitoringReportAccepted && (React.createElement(React.Fragment, null,
                         React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) === Role.ViewOnly
                                 ? t("programme:notAuthToUploadDoc")
@@ -28477,7 +28752,7 @@ var NdcActionBody = function (props) {
                         ministryLevelPermission) && (React.createElement(React.Fragment, null,
                         React.createElement(LikeOutlined, { onClick: function () {
                                 return docAction(verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.id, DocumentStatus.ACCEPTED, verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.actionId, verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.type);
-                            }, className: "common-progress-icon", style: { color: "#976ED7" } }),
+                            }, className: "common-progress-icon", style: { color: "#976ED7", paddingTop: '3px' } }),
                         React.createElement(DislikeOutlined, { onClick: function () {
                                 setRejectDocData({
                                     id: verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.id,
@@ -28492,8 +28767,8 @@ var NdcActionBody = function (props) {
                                     icon: React.createElement(DislikeOutlined, null),
                                 });
                                 setOpenRejectDocConfirmationModal(true);
-                            }, className: "common-progress-icon margin-left-1", style: { color: "#FD6F70" } })))) : verificationReportAccepted ? (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380" } })) : (verifcationReportRejected && (React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: t("programme:rejectTip"), overlayClassName: "custom-tooltip" },
-                        React.createElement(ExclamationCircleOutlined, { className: "common-progress-icon", style: { color: "#FD6F70" } }))))) : (React.createElement(React.Fragment, null,
+                            }, className: "common-progress-icon margin-left-1", style: { color: "#FD6F70", paddingTop: '3px' } })))) : verificationReportAccepted ? (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380", paddingTop: '3px' } })) : (verifcationReportRejected && (React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: t("programme:rejectTip"), overlayClassName: "custom-tooltip" },
+                        React.createElement(ExclamationCircleOutlined, { className: "common-progress-icon", style: { color: "#FD6F70", paddingTop: '3px' } }))))) : (React.createElement(React.Fragment, null,
                         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, ministryLevelPermission)
@@ -28524,7 +28799,7 @@ var NdcActionBody = function (props) {
                             } })))))),
                 (verificationReportData === null || verificationReportData === void 0 ? void 0 : verificationReportData.url) && (React.createElement("div", { className: "report-link" },
                     React.createElement("div", { className: "link" }, 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" } })))),
+                        React.createElement(BookOutlined, { className: "common-progress-icon margin-right-1", style: { color: "#3F3A47", paddingTop: '3px' } })))),
                     !verificationReportAccepted && monitoringReportAccepted && (React.createElement(React.Fragment, null,
                         React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) === Role.ViewOnly
                                 ? t("programme:notAuthToUploadDoc")
@@ -28557,7 +28832,7 @@ var NdcActionBody = function (props) {
         React.createElement(RejectDocumentationConfirmationModel, { actionInfo: actionInfo, onActionConfirmed: handleOk, onActionCanceled: handleCancel, openModal: openRejectDocConfirmationModal, errorMsg: "", loading: loading, translator: translator })));
 };
 
-var css_248z$4 = ".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";
+var css_248z$4 = ".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    align-items: start; }\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$4);
 
 var ProgrammeDocuments = function (props) {
@@ -28804,7 +29079,7 @@ var ProgrammeDocuments = function (props) {
                                 (designDocActionPermission || ministryLevelPermission) && (React.createElement(React.Fragment, null,
                                 React.createElement(LikeOutlined, { onClick: function () {
                                         return docAction(designDocId, DocumentStatus.ACCEPTED);
-                                    }, className: "common-progress-icon", style: { color: "#976ED7" } }),
+                                    }, className: "common-progress-icon", style: { color: "#976ED7", paddingTop: "3px" } }),
                                 React.createElement(DislikeOutlined, { onClick: function () {
                                         setRejectDocData({ id: designDocId });
                                         setActionInfo({
@@ -28815,8 +29090,8 @@ var ProgrammeDocuments = function (props) {
                                             icon: React.createElement(DislikeOutlined, null),
                                         });
                                         setOpenRejectDocConfirmationModal(true);
-                                    }, className: "common-progress-icon margin-left-1", style: { color: "#FD6F70" } }))),
-                            designDocStatus === DocumentStatus.ACCEPTED && (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380" } })),
+                                    }, className: "common-progress-icon margin-left-1", style: { color: "#FD6F70", paddingTop: "3px" } }))),
+                            designDocStatus === DocumentStatus.ACCEPTED && (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380", paddingTop: "3px" } })),
                             designDocStatus === DocumentStatus.REJECTED && (React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: t("programme:rejectTip"), overlayClassName: "custom-tooltip" },
                                 React.createElement(ExclamationCircleOutlined, { className: "common-progress-icon", style: { color: "#FD6F70" } })))),
                         designDocUrl !== "" && (React.createElement("div", { className: "time" },
@@ -28824,15 +29099,23 @@ var ProgrammeDocuments = function (props) {
                             " ~ " + designDocversion))),
                     React.createElement(Col, { span: 6, className: "field-value" }, designDocUrl !== "" ? (React.createElement("div", { className: "link" },
                         linkDocVisible(designDocStatus) && (React.createElement("a", { href: designDocUrl, 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", style: { color: "#3F3A47" } }))),
                         designDocStatus !== DocumentStatus.ACCEPTED && (React.createElement(React.Fragment, null,
                             React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) === Role.ViewOnly ||
                                     (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.CERTIFIER
                                     ? 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", margin: "0px 0px 2.5px 0px" }
-                                        : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
+                                        ? {
+                                            color: "#3F3A47",
+                                            cursor: "pointer",
+                                            margin: "0px 0px 1.5px 0px",
+                                        }
+                                        : {
+                                            color: "#cacaca",
+                                            cursor: "default",
+                                            margin: "0px 0px 1.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) {
@@ -28845,8 +29128,16 @@ 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", margin: "0px 0px 2.5px 0px" }
-                                    : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
+                                    ? {
+                                        color: "#3F3A47",
+                                        cursor: "pointer",
+                                        margin: "0px 0px 1.5px 0px",
+                                    }
+                                    : {
+                                        color: "#cacaca",
+                                        cursor: "default",
+                                        margin: "0px 0px 1.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) {
@@ -28872,7 +29163,7 @@ var ProgrammeDocuments = function (props) {
                                 (companyRolePermission || ministryLevelPermission) && (React.createElement(React.Fragment, null,
                                 React.createElement(LikeOutlined, { onClick: function () {
                                         return docAction(methDocId, DocumentStatus.ACCEPTED);
-                                    }, className: "common-progress-icon", style: { color: "#976ED7" } }),
+                                    }, className: "common-progress-icon", style: { color: "#976ED7", paddingTop: "3px" } }),
                                 React.createElement(DislikeOutlined, { onClick: function () {
                                         setRejectDocData({ id: methDocId });
                                         setActionInfo({
@@ -28883,8 +29174,8 @@ var ProgrammeDocuments = function (props) {
                                             icon: React.createElement(DislikeOutlined, null),
                                         });
                                         setOpenRejectDocConfirmationModal(true);
-                                    }, className: "common-progress-icon margin-left-1", style: { color: "#FD6F70" } }))),
-                            methodDocStatus === DocumentStatus.ACCEPTED && (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380" } })),
+                                    }, className: "common-progress-icon margin-left-1", style: { color: "#FD6F70", paddingTop: "3px" } }))),
+                            methodDocStatus === DocumentStatus.ACCEPTED && (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380", paddingTop: "3px" } })),
                             methodDocStatus === DocumentStatus.REJECTED && (React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: t("programme:rejectTip"), overlayClassName: "custom-tooltip" },
                                 React.createElement(ExclamationCircleOutlined, { className: "common-progress-icon", style: { color: "#FD6F70" } })))),
                         methodologyDocUrl !== "" && (React.createElement("div", { className: "time" },
@@ -28892,15 +29183,22 @@ var ProgrammeDocuments = function (props) {
                             " ~ " + methDocversion))),
                     React.createElement(Col, { span: 6, className: "field-value" }, methodologyDocUrl !== "" ? (React.createElement("div", { className: "link" },
                         linkDocVisible(methodDocStatus) && (React.createElement("a", { href: methodologyDocUrl, 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", style: { color: "#3F3A47" } }))),
                         methodDocStatus !== DocumentStatus.ACCEPTED && (React.createElement(React.Fragment, null,
                             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.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", margin: "0px 0px 2.5px 0px" }
-                                        : { color: "#cacaca", margin: "0px 0px 2.5px 0px" }, onClick: function () {
+                                        ? {
+                                            color: "#3F3A47",
+                                            cursor: "pointer",
+                                            margin: "0px 0px 1.5px 0px",
+                                        }
+                                        : {
+                                            color: "#cacaca",
+                                            margin: "0px 0px 1.5px 0px",
+                                        }, onClick: function () {
                                         return designDocStatus === DocumentStatus.ACCEPTED &&
                                             uploadDocUserPermission(userInfoState, DocType.METHODOLOGY_DOCUMENT, programmeOwnerId, ministryLevelPermission) &&
                                             handleMethodologyFileUpload();
@@ -28919,8 +29217,16 @@ 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", margin: "0px 0px 2.5px 0px" }
-                                    : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
+                                    ? {
+                                        color: "#3F3A47",
+                                        cursor: "pointer",
+                                        margin: "0px 0px 1.5px 0px",
+                                    }
+                                    : {
+                                        color: "#cacaca",
+                                        cursor: "default",
+                                        margin: "0px 0px 1.5px 0px",
+                                    }, onClick: function () {
                                     return designDocStatus === DocumentStatus.ACCEPTED &&
                                         uploadDocUserPermission(userInfoState, DocType.METHODOLOGY_DOCUMENT, programmeOwnerId, ministryLevelPermission) &&
                                         handleMethodologyFileUpload();
@@ -28949,7 +29255,7 @@ var ProgrammeDocuments = function (props) {
                                 (ministryLevelPermission || companyRolePermission) && (React.createElement(React.Fragment, null,
                                 React.createElement(LikeOutlined, { onClick: function () {
                                         return docAction(impactAssessmentId, DocumentStatus.ACCEPTED);
-                                    }, className: "common-progress-icon", style: { color: "#976ED7" } }),
+                                    }, className: "common-progress-icon", style: { color: "#976ED7", paddingTop: "3px" } }),
                                 React.createElement(DislikeOutlined, { onClick: function () {
                                         setRejectDocData({ id: impactAssessmentId });
                                         setActionInfo({
@@ -28960,8 +29266,8 @@ var ProgrammeDocuments = function (props) {
                                             icon: React.createElement(DislikeOutlined, null),
                                         });
                                         setOpenRejectDocConfirmationModal(true);
-                                    }, className: "common-progress-icon margin-left-1", style: { color: "#FD6F70" } }))),
-                            impactAssessmentStatus === DocumentStatus.ACCEPTED && (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380" } })),
+                                    }, className: "common-progress-icon margin-left-1", style: { color: "#FD6F70", paddingTop: "3px" } }))),
+                            impactAssessmentStatus === DocumentStatus.ACCEPTED && (React.createElement(CheckCircleOutlined, { className: "common-progress-icon", style: { color: "#5DC380", paddingTop: "3px" } })),
                             impactAssessmentStatus === DocumentStatus.REJECTED && (React.createElement(Tooltip, { arrowPointAtCenter: true, placement: "top", trigger: "hover", title: t("programme:rejectTip"), overlayClassName: "custom-tooltip" },
                                 React.createElement(ExclamationCircleOutlined, { className: "common-progress-icon", style: { color: "#FD6F70" } })))),
                         impactAssessmentUrl !== "" && (React.createElement("div", { className: "time" },
@@ -28969,13 +29275,22 @@ var ProgrammeDocuments = function (props) {
                             " ~ " + impactAssessmentversion))),
                     React.createElement(Col, { span: 6, className: "field-value" }, impactAssessmentUrl !== "" ? (React.createElement("div", { className: "link" },
                         linkDocVisible(impactAssessmentStatus) && (React.createElement("a", { href: impactAssessmentUrl, target: "_blank", rel: "noopener noreferrer", download: true },
-                            React.createElement(BookOutlined, { className: "common-progress-icon margin-right-1", style: { color: "#3F3A47" } }))),
+                            React.createElement("div", null,
+                                React.createElement(BookOutlined, { className: "common-progress-icon", style: { color: "#3F3A47" } })))),
                         impactAssessmentStatus !== DocumentStatus.ACCEPTED && (React.createElement(React.Fragment, null,
                             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", margin: "0px 0px 2.5px 0px" }
-                                        : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
+                                        ? {
+                                            color: "#3F3A47",
+                                            cursor: "pointer",
+                                            margin: "0px 0px 1.5px 0px",
+                                        }
+                                        : {
+                                            color: "#cacaca",
+                                            cursor: "default",
+                                            margin: "0px 0px 1.5px 0px",
+                                        }, onClick: function () {
                                         return uploadImpactAssessmentDocUserPermission &&
                                             !isProjectRejected &&
                                             handleImpactAssessmentFileUpload();
@@ -28988,8 +29303,16 @@ 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", margin: "0px 0px 2.5px 0px" }
-                                    : { color: "#cacaca", cursor: "default", margin: "0px 0px 2.5px 0px" }, onClick: function () {
+                                    ? {
+                                        color: "#3F3A47",
+                                        cursor: "pointer",
+                                        margin: "0px 0px 1.5px 0px",
+                                    }
+                                    : {
+                                        color: "#cacaca",
+                                        cursor: "default",
+                                        margin: "0px 0px 1.5px 0px",
+                                    }, onClick: function () {
                                     return uploadImpactAssessmentDocUserPermission &&
                                         !isProjectRejected &&
                                         handleImpactAssessmentFileUpload();
@@ -33751,5 +34074,5 @@ var GHGDashboardComponent = function (props) {
             React.createElement(Row, { gutter: [40, 40], className: "statics-card-row" }, row.map(function (item, j) { return getWidgetJSX(item); })))); }))));
 };
 
-export { Action, AddNdcActionComponent, AddNewCompanyComponent, AddNewUserComponent, AdminBGColor, AdminColor, BaseEntity, CarbonSystemType, CertBGColor, CertColor, CoBenifitsComponent, Company, CompanyManagementColumns, CompanyManagementComponent, CompanyProfileComponent, CompanyRole, CompanyState, ConfigurationSettingsType, CreditTransferComponent, CreditTransferStage, DevBGColor, DevColor, DocType, DocumentStatus, ESGType, Emission, EmissionGas, EmissionSector, EmissionSubSectors, EnergyGenerationUnits, FormElementType, GHGDashboardComponent, GHGEmissionsComponent, GHGProjectionsComponent, GhgStatCardTypes, GovBGColor, GovColor, ImgWithFallback, InfoView, Instrument, InvestmentBGColor, InvestmentBody, InvestmentColor, InvestmentCreationComponent, InvestmentCreationType, InvestmentLevel, InvestmentManagementComponent, InvestmentStatus, InvestmentStream, InvestmentType, LandAreaUnits, LegendItem, Loading, ManagerBGColor, ManagerColor, MapComponent, MapTypes, MapboxComponent, MinBGColor, MinColor, MitigationSubTypes, MitigationTypes, MrvDashboardComponent, MrvStatsCardsTypes, NdcActionBody, NdcActionManagementComponent, NdcActionStatus, NdcActionTypes, NdcActionViewComponent, NdcDetailsComponent, OrganisationStatus, ProfileIcon, ProgrammeCertify, ProgrammeCreationComponent, ProgrammeDocuments, ProgrammeEntity, ProgrammeIssueForm, ProgrammeManagementColumns, ProgrammeManagementComponent, ProgrammeRetireForm, ProgrammeRevokeForm, ProgrammeStageLegend, ProgrammeStageMRV, ProgrammeStageR, ProgrammeStageUnified, ProgrammeTransfer, ProgrammeTransferForm, Projection, ProjectionTypes$1 as ProjectionTypes, RadioButtonStatus, RadioButtonStatus2, RegistryDashboardComponent, RejectDocumentationConfirmationModel, RetireType, Role, RoleIcon, RootBGColor, RootColor, SdgGoals$1 as SdgGoals, Sector, SectoralScope, StasticCard, StatsCardsTypes, SubTypeOfMitigation, SupportCreationComponent, SupportManagementComponent, SystemNames, TimelineBody, Titles, TooltipColor, TransferActionModel, TxType, TypeOfMitigation, UnitField, User, UserManagementColumns, UserManagementComponent, UserProfileComponent, UserRoleIcon, ViewBGColor, ViewColor, WidgetType, addCommSep, addCommSepRound$1 as addCommSepRound, addNdcDesc, addRoundNumber, addSpaces, consumerGroupList, creditUnit, dateFormat, dateTimeFormat, energyGenerationUnitList, getBase64, getCompanyBgColor, getCreditStageVal, getFinancialFields, getGeneralFields, getInvestmentStatusEnumVal, getNdcActionStatusEnumVal, getNdcStatusTagType, getRetirementTypeString, getStageEnumVal, getStageTagType, getStageTagTypeMRV, getStageTransferEnumVal, getStatusTagType, getTransferStageTagType, getValidNdcActions, isBase64, landAreaUnitList, methodologyOptions, mitigationSubTypeList, mitigationSubTypesListMapped, mitigationTypeList, ndcActionTypeList, sectorMitigationTypesListMapped, sumArray, titleList };
+export { Action, AddNdcActionComponent, AddNewCompanyComponent, AddNewUserComponent, AdminBGColor, AdminColor, BaseEntity, CarbonSystemType, CertBGColor, CertColor, CoBenifitsComponent, Company, CompanyManagementColumns, CompanyManagementComponent, CompanyProfileComponent, CompanyRole, CompanyState, ConfigurationSettingsType, CreditTransferComponent, CreditTransferStage, DevBGColor, DevColor, DocType, DocumentStatus, ESGType, Emission, EmissionGas, EmissionSector, EmissionSubSectors, EnergyGenerationUnits, FormElementType, GHGDashboardComponent, GHGEmissionsComponent, GHGProjectionsComponent, GhgStatCardTypes, GovBGColor, GovColor, ImgWithFallback, InfoView, Instrument, InvestmentBGColor, InvestmentBody, InvestmentColor, InvestmentCreationComponent, InvestmentCreationType, InvestmentLevel, InvestmentManagementComponent, InvestmentStatus, InvestmentStream, InvestmentType, LandAreaUnits, LegendItem, Loading, ManagerBGColor, ManagerColor, MapComponent, MapTypes, MapboxComponent, MinBGColor, MinColor, MitigationSubTypes, MitigationTypes, MrvDashboardComponent, MrvStatsCardsTypes, NdcActionBody, NdcActionManagementComponent, NdcActionStatus, NdcActionTypes, NdcActionViewComponent, NdcDetailsComponent, OrganisationStatus, ProfileIcon, ProgrammeCertify, ProgrammeCreationComponent, ProgrammeDocuments, ProgrammeEntity, ProgrammeIssueForm, ProgrammeManagementColumns, ProgrammeManagementComponent, ProgrammeRetireForm, ProgrammeRevokeForm, ProgrammeStageLegend, ProgrammeStageMRV, ProgrammeStageR, ProgrammeStageUnified, ProgrammeTransfer, ProgrammeTransferForm, Projection, ProjectionTypes$1 as ProjectionTypes, RadioButtonStatus, RadioButtonStatus2, RegistryDashboardComponent, RejectDocumentationConfirmationModel, RetireType, Role, RoleIcon, RootBGColor, RootColor, SdgGoals$1 as SdgGoals, Sector, SectoralScope, StasticCard, StatsCardsTypes, SubTypeOfMitigation, SupportCreationComponent, SupportManagementComponent, SystemNames, TimelineBody, Titles, TooltipColor, TransferActionModel, TxType, TypeOfMitigation, UnitField, User, UserManagementColumns, UserManagementComponent, UserProfileComponent, UserRoleIcon, ViewBGColor, ViewColor, WidgetType, addCommSep, addCommSepRound$1 as addCommSepRound, addNdcDesc, addRoundNumber, addSpaces, consumerGroupList, creditUnit, dateFormat, dateTimeFormat, energyGenerationUnitList, getBase64, getCompanyBgColor, getCreditStageVal, getFinancialFields, getGeneralFields, getInvestmentStatusEnumVal, getNdcActionStatusEnumVal$1 as getNdcActionStatusEnumVal, getNdcStatusTagType, getRetirementTypeString, getStageEnumVal, getStageTagType, getStageTagTypeMRV, getStageTransferEnumVal, getStatusTagType, getTransferStageTagType, getValidNdcActions, isBase64, landAreaUnitList, methodologyOptions, mitigationSubTypeList, mitigationSubTypesListMapped, mitigationTypeList, ndcActionTypeList, sectorMitigationTypesListMapped, sumArray, titleList };
 //# sourceMappingURL=index.js.map