@undp/carbon-library 1.0.16-CARBON-363.46 → 1.0.16-CARBON-363.57

package/dist/esm/index.js

@@ -24678,7 +24678,7 @@ var EditableRow = function (_a) {
             React.createElement("tr", __assign({}, props)))));
 };
 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"]);
+    _a.title; var 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);
@@ -24714,12 +24714,7 @@ var EditableCell = function (_a) {
     }); };
     var childNode = children;
     if (editable) {
-        childNode = editing ? (React.createElement(Form.Item, { style: { margin: 0 }, name: dataIndex, rules: [
-                {
-                    required: true,
-                    message: "".concat(title, " is required."),
-                },
-            ] },
+        childNode = editing ? (React.createElement(Form.Item, { style: { margin: 0 }, name: dataIndex },
             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);
@@ -24730,9 +24725,15 @@ styleInject(css_248z$4);
 
 var NdcActionType;
 (function (NdcActionType) {
-    NdcActionType[NdcActionType["main"] = 0] = "main";
-    NdcActionType[NdcActionType["sub"] = 1] = "sub";
+    NdcActionType[NdcActionType["mainAction"] = 0] = "mainAction";
+    NdcActionType[NdcActionType["subAction"] = 1] = "subAction";
 })(NdcActionType || (NdcActionType = {}));
+var NdcDetailsActionStatus;
+(function (NdcDetailsActionStatus) {
+    NdcDetailsActionStatus[NdcDetailsActionStatus["pending"] = 0] = "pending";
+    NdcDetailsActionStatus[NdcDetailsActionStatus["approved"] = 1] = "approved";
+})(NdcDetailsActionStatus || (NdcDetailsActionStatus = {}));
+
 var NdcDetailsComponent = function (props) {
     var t = props.t, useConnection = props.useConnection, useUserContext = props.useUserContext;
     var RangePicker = DatePicker.RangePicker;
@@ -24741,14 +24742,23 @@ var NdcDetailsComponent = function (props) {
     var _c = useState([]), periodItems = _c[0], setPeriodItems = _c[1];
     var _d = useState({}), selectedPeriod = _d[0], setSelectedPeriod = _d[1];
     var selectedDateRangeRef = useRef({});
-    var addedNdcDetailId = useRef(0);
+    useRef(0);
     var selectedNdcDetail = useRef({});
     var _e = useState(0), tableKey = _e[0], setTableKey = _e[1];
-    var _f = useConnection(), get = _f.get, post = _f.post;
+    var _f = useConnection(), get = _f.get, post = _f.post, put = _f.put;
     var userInfoState = useUserContext().userInfoState;
+    var governmentMinistry = process.env.REACT_APP_GOVERNMENT_MINISTRY
+        ? process.env.REACT_APP_GOVERNMENT_MINISTRY
+        : "Test ministryName";
     var isAddRangeVisible = ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.MINISTRY ||
         (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT) &&
         (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly;
+    var ndcMainDetailsForPeriod = selectedPeriod.key !== "add_new"
+        ? ndcDetailsData.filter(function (ndcDetail) {
+            return (ndcDetail.periodId === parseInt(selectedPeriod.key) &&
+                ndcDetail.actionType === NdcActionType.mainAction);
+        })
+        : [];
     var isAddNdcActionVisible = function () {
         return ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT &&
             (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly);
@@ -24756,104 +24766,98 @@ var NdcDetailsComponent = function (props) {
     var inRange = function (num, min, max) {
         return num >= min && num <= max;
     };
-    function onAddNewSubNdcDetail() {
-        //const range = selectedPeriod.split("-");
-        var range = [];
-        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);
-                        }
-                    }
-                    else {
-                        parentItem.subNdcDetails = [row];
-                    }
-                }
-                newData[parentIndex] = __assign({}, parentItem);
-                setTableKey(function (key) { return key + 1; });
+    var handleSave = function (row) { return __awaiter(void 0, void 0, void 0, function () {
+        var updatedItemIndex, response, response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("handleSave", row);
+                    updatedItemIndex = ndcDetailsData.findIndex(function (item) { return item.id === row.id; });
+                    if (!(updatedItemIndex === -1)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, post("national/programme/addNdcDetailsAction", __assign(__assign({}, row), { kpi: parseInt(row.kpi) }))];
+                case 1:
+                    response = _a.sent();
+                    console.log("handleSave created", response);
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, put("national/programme/updateNdcDetailsAction", __assign(__assign({}, row), { kpi: parseInt(row.kpi) }))];
+                case 3:
+                    response = _a.sent();
+                    console.log("handleSave updated", response);
+                    _a.label = 4;
+                case 4:
+                    fetchNdcDetailActions();
+                    return [2 /*return*/];
             }
-            return newData;
         });
-    };
-    var getNdcDetailsForPeriod = function () {
-        //const range = selectedPeriod.split("-");
-        var range = [];
-        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;
-        }
-        else {
-            return [];
-        }
+    }); };
+    // const getNdcDetailsForPeriod = () => {
+    //   //const range = selectedPeriod.split("-");
+    //   const range: any = [];
+    //   if (range.length > 1) {
+    //     const filteredData = ndcDetailsData.filter((item: NdcDetail) => {
+    //       return inRange(
+    //         Number(moment(item.startDate).year()),
+    //         Number(range[0]),
+    //         Number(range[1])
+    //       );
+    //     });
+    //     return filteredData;
+    //   } else {
+    //     return [];
+    //   }
+    // };
+    var getSubNdcDetailsForPeriod = function (id) {
+        ndcDetailsData.find(function (item) { return item.id === id; });
+        var subNdcDetails = ndcDetailsData.filter(function (ndcDetail) {
+            return (ndcDetail.parentActionId === id &&
+                ndcDetail.actionType === NdcActionType.subAction);
+        });
+        var emptySubNdcRow = {
+            actionType: NdcActionType.subAction,
+            nationalPlanObjective: "",
+            kpi: 0,
+            ministryName: governmentMinistry,
+            status: NdcDetailsActionStatus.pending,
+            parentActionId: id,
+        };
+        return __spreadArray(__spreadArray([], subNdcDetails, true), [emptySubNdcRow], false);
+        // if (ndcDetail) {
+        //   if (
+        //     ndcDetail?.subNdcDetails[
+        //       ndcDetail?.subNdcDetails?.length - 1
+        //     ]?.ministryName.trim() !== "" &&
+        //     ndcDetail?.subNdcDetails[ndcDetail?.subNdcDetails?.length - 1]
+        //       ?.ministryName &&
+        //     ndcDetail?.subNdcDetails[
+        //       ndcDetail?.subNdcDetails?.length - 1
+        //     ]?.nationalPlanObjective.trim() !== "" &&
+        //     ndcDetail?.subNdcDetails[ndcDetail?.subNdcDetails?.length - 1]
+        //       ?.nationalPlanObjective &&
+        //     String(
+        //       ndcDetail?.subNdcDetails[ndcDetail?.subNdcDetails?.length - 1]?.kpi
+        //     ).trim() !== "" &&
+        //     String(
+        //       ndcDetail?.subNdcDetails[ndcDetail?.subNdcDetails?.length - 1]?.kpi
+        //     )
+        //   ) {
+        //     onAddNewSubNdcDetail();
+        //   }
+        //   return ndcDetail.subNdcDetails;
+        // } else {
+        //   return [];
+        // }
+        //return [];
     };
     var defaultColumns = [
         {
             title: t("ndc:ndcColumnsNationalPlanObj"),
-            dataIndex: "nationalPlanObj",
-            key: "nationalPlanObj",
+            dataIndex: "nationalPlanObjective",
+            key: "nationalPlanObjective",
             align: "left",
             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 the National Plan Objective", className: "ant-input", type: "text" })))); },
+            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObjective ? (React.createElement(Space, { size: "middle" },
+                React.createElement("span", null, record.nationalPlanObjective))) : (React.createElement("input", { placeholder: "Please add the National Plan Objective", className: "ant-input", type: "text" })))); },
         },
         {
             title: t("ndc:ndcColumnsKpi"),
@@ -24862,18 +24866,18 @@ var NdcDetailsComponent = function (props) {
             align: "left",
             editable: true,
             width: "10%",
-            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(Space, { size: "middle" },
+            render: function (_, record) { return (React.createElement(React.Fragment, null, record.kpi ? (React.createElement(Space, { size: "middle" },
                 React.createElement("span", null, record.kpi))) : (React.createElement("input", { placeholder: "Enter Kpi", className: "ant-input", type: "text" })))); },
         },
         {
-            title: "Ministry",
-            dataIndex: "ministry",
-            key: "ministry",
+            title: "ministryName",
+            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 Ministry name", className: "ant-input", type: "text" })))); },
+            render: function (_, record) { return (React.createElement(React.Fragment, null, record.ministryName ? (React.createElement(Space, { size: "middle" },
+                React.createElement("span", null, record.ministryName))) : (React.createElement("input", { placeholder: "Please add the ministryName name", className: "ant-input", type: "text" })))); },
         },
     ];
     var columns = defaultColumns.map(function (col) {
@@ -24888,32 +24892,38 @@ var NdcDetailsComponent = function (props) {
                 handleSave: handleSave,
             }); } });
     });
-    function onAddNewNdcDetail() {
-        //const range = selectedPeriod.split("-");
-        var range = [];
-        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, response, newlyCreatedNdcAction_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(selectedPeriod.key !== "add_new")) return [3 /*break*/, 2];
+                        periodId = parseInt(selectedPeriod.key);
+                        newData = {
+                            actionType: NdcActionType.mainAction,
+                            nationalPlanObjective: "",
+                            kpi: 0,
+                            ministryName: governmentMinistry,
+                            periodId: periodId,
+                            status: NdcDetailsActionStatus.pending,
+                        };
+                        return [4 /*yield*/, post("national/programme/addNdcDetailsAction", __assign({}, newData))];
+                    case 1:
+                        response = _a.sent();
+                        if (response && response.data) {
+                            newlyCreatedNdcAction_1 = response.data;
+                            newlyCreatedNdcAction_1.key = newlyCreatedNdcAction_1.id;
+                            setNdcDetailsData(function (ndcDetailsData) { return __spreadArray(__spreadArray([], ndcDetailsData, true), [
+                                newlyCreatedNdcAction_1,
+                            ], false); });
+                            setTableKey(function (key) { return key + 1; });
+                        }
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
     }
     var components = {
         body: {
@@ -24926,7 +24936,7 @@ var NdcDetailsComponent = function (props) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, post("national/programme/deleteNdcDetailsPeriod", {
-                        id: selectedPeriod.id,
+                        id: selectedPeriod.key,
                     })];
                 case 1:
                     result = _a.sent();
@@ -24944,21 +24954,20 @@ var NdcDetailsComponent = function (props) {
         return (React.createElement("div", null,
             React.createElement(Row, null,
                 React.createElement(Col, { span: 24 },
-                    React.createElement(Table, { key: tableKey, components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getNdcDetailsForPeriod(), columns: columns, expandable: {
+                    React.createElement(Table, { key: tableKey, components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: ndcMainDetailsForPeriod, columns: columns, expandable: {
                             expandedRowRender: function (record) { return getSubNdcActionContent(record); },
                             indentSize: 0,
-                            defaultExpandedRowKeys: [selectedNdcDetail.current.key],
+                            //defaultExpandedRowKeys: [parseInt(selectedNdcDetail.current.id)],
                         }, footer: function () {
                             return isAddNdcActionVisible() && (React.createElement(Row, { justify: "center" },
-                                React.createElement(Button, { onClick: onAddNewNdcDetail, type: "default", style: {
+                                React.createElement(Button, { onClick: onClickedAddNewNdcDetail, type: "default", style: {
                                         marginBottom: 16,
                                         width: "100%",
                                     } }, t("ndc:addNdcAction"))));
                         } }))),
-            React.createElement(Row, null,
-                React.createElement(Col, { span: 24 },
-                    React.createElement(Button, { type: "primary", onClick: onDeletePeriod, htmlType: "submit", loading: loading }, t("ndc:delete")),
-                    React.createElement(Button, { type: "primary", onClick: onFinalizePeriod, htmlType: "submit", loading: loading }, t("ndc:finalize"))))));
+            React.createElement(Row, { justify: "end" },
+                React.createElement(Button, { className: "mg-left-1", type: "primary", onClick: onDeletePeriod, htmlType: "submit", loading: loading }, t("ndc:delete")),
+                React.createElement(Button, { className: "mg-left-1", type: "primary", onClick: onFinalizePeriod, htmlType: "submit", loading: loading }, t("ndc:finalize")))));
     }
     var onAddNewPeriod = function () { return __awaiter(void 0, void 0, void 0, function () {
         var periodItem_1, existingIndex, response, addedPeriodItem, updatedPeriodItem_1;
@@ -25015,11 +25024,13 @@ var NdcDetailsComponent = function (props) {
     }
     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 }));
+        return (React.createElement(Table, { components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getSubNdcDetailsForPeriod(record.id), columns: columns, showHeader: false, pagination: false }));
     }
     var onTabChange = function (key) {
         var selectedPeriod = periodItems.find(function (item) { return item.key === key; });
-        setSelectedPeriod(selectedPeriod);
+        if (selectedPeriod) {
+            setSelectedPeriod(selectedPeriod);
+        }
     };
     var fetchNdcDetailPeriods = function () { return __awaiter(void 0, void 0, void 0, function () {
         var periods, addNewTab, response;
@@ -25028,11 +25039,12 @@ var NdcDetailsComponent = function (props) {
                 case 0:
                     periods = [];
                     addNewTab = {
-                        id: "add_new",
                         key: "add_new",
                         label: "Add New",
                         startYear: 0,
                         endYear: 0,
+                        finalized: false,
+                        deleted: false,
                     };
                     return [4 /*yield*/, get("national/programme/queryNdcDetailsPeriod")];
                 case 1:
@@ -25051,241 +25063,26 @@ var NdcDetailsComponent = function (props) {
             }
         });
     }); };
+    var fetchNdcDetailActions = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response, updatedData;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, get("national/programme/queryNdcDetailsAction")];
+                case 1:
+                    response = _a.sent();
+                    if (response && response.data) {
+                        updatedData = response.data.map(function (item) {
+                            return __assign(__assign({}, item), { key: item.id });
+                        });
+                        setNdcDetailsData(updatedData);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     useEffect(function () {
         fetchNdcDetailPeriods();
-        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)",
-                    },
-                    {
-                        key: 20,
-                        ndcActionId: 18,
-                        type: NdcActionType.sub,
-                        startDate: new Date("2019-03-25"),
-                        endDate: new Date("2020-03-25"),
-                        nationalPlanObj: "",
-                        kpi: "",
-                        ministry: "",
-                    },
-                ],
-            },
-        ];
-        addedNdcDetailId.current = 20;
-        setNdcDetailsData(defaultNdcDetails);
+        fetchNdcDetailActions();
     }, []);
     return (React.createElement("div", { className: "ndc-management content-container" },
         React.createElement("div", { className: "title-bar" },
@@ -25294,8 +25091,8 @@ var NdcDetailsComponent = function (props) {
                     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: selectedPeriod, onChange: onTabChange })),
-        React.createElement("div", null, selectedPeriod.id === "add_new"
+            React.createElement(Tabs, { centered: false, defaultActiveKey: "1", items: periodItems, activeKey: selectedPeriod.key, onChange: onTabChange })),
+        React.createElement("div", null, selectedPeriod.key === "add_new"
             ? addNewPeriodContent()
             : ndcDetailsTableContent())));
 };