@undp/carbon-library 1.0.274-CARBON-363.48 → 1.0.274-CARBON-347.0

package/dist/cjs/index.js

@@ -5,6 +5,7 @@ var antd = require('antd');
 var React = require('react');
 var luxon = require('luxon');
 var buffer = require('buffer');
+var axios = require('axios');
 var PhoneInput = require('react-phone-number-input');
 var validator = require('validator');
 var classTransformer = require('class-transformer');
@@ -509,9 +510,311 @@ var OrganisationStatus = function (props) {
     return orgState;
 };
 
+function e$1(e){this.message=e;}e$1.prototype=new Error,e$1.prototype.name="InvalidCharacterError";var r="undefined"!=typeof window&&window.atob&&window.atob.bind(window)||function(r){var t=String(r).replace(/=+$/,"");if(t.length%4==1)throw new e$1("'atob' failed: The string to be decoded is not correctly encoded.");for(var n,o,a=0,i=0,c="";o=t.charAt(i++);~o&&(n=a%4?64*n+o:o,a++%4)?c+=String.fromCharCode(255&n>>(-2*a&6)):0)o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".indexOf(o);return c};function t$1(e){var t=e.replace(/-/g,"+").replace(/_/g,"/");switch(t.length%4){case 0:break;case 2:t+="==";break;case 3:t+="=";break;default:throw "Illegal base64url string!"}try{return function(e){return decodeURIComponent(r(e).replace(/(.)/g,(function(e,r){var t=r.charCodeAt(0).toString(16).toUpperCase();return t.length<2&&(t="0"+t),"%"+t})))}(t)}catch(e){return r(t)}}function n$1(e){this.message=e;}function o(e,r){if("string"!=typeof e)throw new n$1("Invalid token specified");var o=!0===(r=r||{}).header?0:1;try{return JSON.parse(t$1(e.split(".")[o]))}catch(e){throw new n$1("Invalid token specified: "+e.message)}}n$1.prototype=new Error,n$1.prototype.name="InvalidTokenError";
+
+var ConnectionContext = React.createContext({});
+var ConnectionContextProvider = function (props) {
+    var _a = React.useState(), token = _a[0], setToken = _a[1];
+    var serverURL = props.serverURL, t = props.t, children = props.children;
+    React.useEffect(function () {
+        var timer = setInterval(function () { return __awaiter(void 0, void 0, void 0, function () {
+            var newToken;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, localStorage.getItem('token')];
+                    case 1:
+                        newToken = _a.sent();
+                        if (token !== newToken) {
+                            setToken(newToken);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); }, 3000);
+        if (token) {
+            clearTimeout(timer);
+        }
+        return function () {
+            clearTimeout(timer);
+        };
+    }, [token]);
+    var send = React.useCallback(function (method, path, data, config, extraUrl) {
+        return new Promise(function (resolve, reject) {
+            var url = "".concat(extraUrl ? extraUrl : serverURL, "/").concat(path);
+            var headers;
+            if (token) {
+                headers = { authorization: "Bearer ".concat(token.toString()) };
+            }
+            else {
+                localStorage.getItem('token');
+                headers = {
+                    authorization: "Bearer ".concat(localStorage.getItem('token')),
+                };
+            }
+            axios(__assign({ method: method, url: url, data: data, headers: headers }, config))
+                .then(function (response) {
+                var _a, _b, _c;
+                if (response.status) {
+                    if (response.status === 200 || response.status === 201) {
+                        resolve({
+                            status: response.status,
+                            data: (_a = response.data.data) !== null && _a !== void 0 ? _a : response.data,
+                            response: response,
+                            statusText: 'SUCCESS',
+                            message: response.data.message,
+                        });
+                    }
+                    else if (response.status === 422) {
+                        reject({
+                            status: response.status,
+                            data: (_b = response.data) === null || _b === void 0 ? void 0 : _b.data,
+                            statusText: 'ERROR',
+                            response: response,
+                            message: response.data.message,
+                            errors: (_c = response.data) === null || _c === void 0 ? void 0 : _c.errors,
+                        });
+                    }
+                }
+                else {
+                    reject({
+                        status: 500,
+                        statusText: 'UNKNOWN',
+                        message: t('common:systemError'),
+                    });
+                }
+            })
+                .catch(function (e) {
+                var _a;
+                if (e.response) {
+                    if (e.response.status) {
+                        if (e.response.data.message === 'jwt expired') {
+                            localStorage.removeItem('token');
+                            window.location.reload();
+                        }
+                        reject({
+                            status: e.response.status,
+                            statusText: 'ERROR',
+                            errors: (_a = e.response.data) === null || _a === void 0 ? void 0 : _a.errors,
+                            message: e.response.data.message,
+                        });
+                    }
+                    else {
+                        reject({
+                            statusText: 'ERROR',
+                            message: t('common:systemError'),
+                        });
+                    }
+                }
+                else {
+                    reject({
+                        statusText: 'ERROR',
+                        message: t('common:networkError'),
+                    });
+                }
+            });
+        });
+    }, [token, serverURL]);
+    var post = React.useCallback(function (path, data, config, extraUrl) {
+        return send('post', path, data, config, extraUrl);
+    }, [send]);
+    var put = React.useCallback(function (path, data, config) {
+        return send('put', path, data, config);
+    }, [send]);
+    var get = React.useCallback(function (path, config) {
+        return send('get', path, undefined, config);
+    }, [send]);
+    var patch = React.useCallback(function (path, data, config) {
+        return send('patch', path, data, config);
+    }, [send]);
+    var del = React.useCallback(function (path, config) {
+        return send('delete', path, config);
+    }, [send]);
+    var updateToken = React.useCallback(function (newToken) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (newToken) {
+                localStorage.setItem('token', newToken);
+                setToken(newToken);
+            }
+            else {
+                localStorage.setItem('token', '');
+                setToken(undefined);
+            }
+            return [2 /*return*/];
+        });
+    }); }, []);
+    var removeToken = function (tkn) {
+        if (tkn) {
+            var exp = o(tkn).exp;
+            if (Date.now() > exp * 1000) {
+                localStorage.setItem('token', '');
+                localStorage.removeItem('userRole');
+                localStorage.removeItem('userId');
+                localStorage.removeItem('companyId');
+                localStorage.removeItem('companyRole');
+            }
+            else {
+                var diff = exp * 1000 - Date.now();
+                setTimeout(function () {
+                    setToken(undefined);
+                    localStorage.setItem('token', '');
+                    localStorage.removeItem('userRole');
+                    localStorage.removeItem('userId');
+                    localStorage.removeItem('companyId');
+                    localStorage.removeItem('companyRole');
+                }, diff);
+                console.log(diff, 'Remaining Token expire time');
+            }
+        }
+    };
+    React.useEffect(function () {
+        removeToken(token);
+    }, [token]);
+    return (React.createElement(ConnectionContext.Provider, { value: {
+            connection: { post: post, put: put, get: get, patch: patch, delete: del, updateToken: updateToken, token: token, removeToken: removeToken },
+        } }, children));
+};
+var useConnection = function () {
+    var context = React.useContext(ConnectionContext);
+    return context.connection;
+};
+
+var UserContext = React.createContext({
+    setUserInfo: function () { },
+    removeUserInfo: function () { },
+    IsAuthenticated: function (tkn) { return false; },
+    isTokenExpired: false,
+    setIsTokenExpired: function (val) { },
+});
+var UserInformationContextProvider = function (_a) {
+    var children = _a.children;
+    var token = useConnection().token;
+    var _b = React.useState(false), isTokenExpired = _b[0], setIsTokenExpired = _b[1];
+    var initialUserProps = {
+        id: localStorage.getItem('userId') ? localStorage.getItem('userId') : '',
+        userRole: localStorage.getItem('userRole') ? localStorage.getItem('userRole') : '',
+        companyRole: localStorage.getItem('companyRole')
+            ? localStorage.getItem('companyRole')
+            : '',
+        companyId: localStorage.getItem('companyId')
+            ? parseInt(localStorage.getItem('companyId'))
+            : -1,
+        companyLogo: localStorage.getItem('companyLogo')
+            ? localStorage.getItem('companyLogo')
+            : '',
+        companyName: localStorage.getItem('companyName')
+            ? localStorage.getItem('companyName')
+            : '',
+        companyState: localStorage.getItem('companyState')
+            ? parseInt(localStorage.getItem('companyState'))
+            : 0,
+    };
+    var _c = React.useState(initialUserProps), userInfoState = _c[0], setUserInfoState = _c[1];
+    var setUserInfo = function (value) {
+        var state = (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyState) === 1 ? userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyState : 0;
+        var id = value.id, userRole = value.userRole, companyId = value.companyId, companyRole = value.companyRole, companyLogo = value.companyLogo, companyName = value.companyName, _a = value.companyState, companyState = _a === void 0 ? state : _a;
+        if (id) {
+            setUserInfoState(function (prev) { return (__assign(__assign({}, prev), { id: id })); });
+            localStorage.setItem('userId', id);
+        }
+        if (userRole) {
+            setUserInfoState(function (prev) { return (__assign(__assign({}, prev), { userRole: userRole })); });
+            localStorage.setItem('userRole', userRole);
+        }
+        if (companyId) {
+            setUserInfoState(function (prev) { return (__assign(__assign({}, prev), { companyId: companyId })); });
+            localStorage.setItem('companyId', companyId + '');
+        }
+        if (companyLogo) {
+            setUserInfoState(function (prev) { return (__assign(__assign({}, prev), { companyLogo: companyLogo })); });
+            localStorage.setItem('companyLogo', companyLogo);
+        }
+        else {
+            setUserInfoState(function (prev) { return (__assign(__assign({}, prev), { companyLogo: '' })); });
+            localStorage.setItem('companyLogo', '');
+        }
+        if (companyName) {
+            setUserInfoState(function (prev) { return (__assign(__assign({}, prev), { companyName: companyName })); });
+            localStorage.setItem('companyName', companyName);
+        }
+        if (userRole) {
+            setUserInfoState(function (prev) { return (__assign(__assign({}, prev), { companyRole: companyRole })); });
+            localStorage.setItem('companyRole', companyRole);
+        }
+        setUserInfoState(function (prev) { return (__assign(__assign({}, prev), { companyState: companyState })); });
+        localStorage.setItem('companyState', companyState + '');
+    };
+    var IsAuthenticated = React.useCallback(function (tokenNew) {
+        var tokenVal;
+        if (tokenNew) {
+            tokenVal = tokenNew;
+        }
+        else if (token) {
+            tokenVal = token;
+        }
+        else {
+            tokenVal = localStorage.getItem('token');
+            if (tokenVal === '') {
+                if (history.length !== 1) {
+                    setIsTokenExpired(true);
+                }
+            }
+        }
+        try {
+            if (tokenVal) {
+                var exp = o(tokenVal).exp;
+                return Date.now() < exp * 1000;
+            }
+            return false;
+        }
+        catch (err) {
+            return false;
+        }
+    }, [token]);
+    var removeUserInfo = function () {
+        localStorage.removeItem('userId');
+        localStorage.removeItem('userRole');
+        localStorage.removeItem('companyId');
+        localStorage.removeItem('companyRole');
+        localStorage.removeItem('companyName');
+        localStorage.removeItem('companyState');
+        localStorage.removeItem('companyLogo');
+        setUserInfoState(initialUserProps);
+    };
+    return (React.createElement(UserContext.Provider, { value: {
+            userInfoState: userInfoState,
+            setUserInfo: setUserInfo,
+            removeUserInfo: removeUserInfo,
+            IsAuthenticated: IsAuthenticated,
+            isTokenExpired: isTokenExpired,
+            setIsTokenExpired: setIsTokenExpired,
+        } }, children));
+};
+var useUserContext = function () {
+    return React.useContext(UserContext);
+};
+
+var SettingsContext = React.createContext({
+    isTransferFrozen: false,
+    setTransferFrozen: function (value) { },
+});
+var SettingsContextProvider = function (_a) {
+    var children = _a.children;
+    var _b = React.useState(false), isTransferFrozen = _b[0], setIsTransferFrozen = _b[1];
+    var setTransferFrozen = function (value) {
+        setIsTransferFrozen(value);
+    };
+    return (React.createElement(SettingsContext.Provider, { value: {
+            isTransferFrozen: isTransferFrozen,
+            setTransferFrozen: setTransferFrozen,
+        } }, children));
+};
+var useSettingsContext = function () {
+    return React.useContext(SettingsContext);
+};
+
 var Search$2 = antd.Input.Search;
 var CompanyManagementComponent = function (props) {
-    var t = props.t, useAbilityContext = props.useAbilityContext, post = props.post, visibleColumns = props.visibleColumns, onNavigateToCompanyProfile = props.onNavigateToCompanyProfile, onClickAddCompany = props.onClickAddCompany;
+    var t = props.t, useAbilityContext = props.useAbilityContext, visibleColumns = props.visibleColumns, onNavigateToCompanyProfile = props.onNavigateToCompanyProfile, onClickAddCompany = props.onClickAddCompany;
     var _a = React.useState(), totalCompany = _a[0], setTotalCompany = _a[1];
     var _b = React.useState(false), loading = _b[0], setLoading = _b[1];
     var _c = React.useState([]), tableData = _c[0], setTableData = _c[1];
@@ -525,6 +828,7 @@ var CompanyManagementComponent = function (props) {
     var _k = React.useState(""), sortOrder = _k[0], setSortOrder = _k[1];
     var _l = React.useState(""), sortField = _l[0], setSortField = _l[1];
     var ability = useAbilityContext();
+    var post = useConnection().post;
     document.addEventListener("mousedown", function (event) {
         var organisationFilterArea1 = document.querySelector(".filter-bar");
         var organisationFilterArea2 = document.querySelector(".filter-dropdown");
@@ -857,7 +1161,7 @@ var CompanyManagementComponent = function (props) {
 var css_248z$s = ".company-details-form-container {\n  width: 100%; }\n  .company-details-form-container .company-details-form .steps-actions {\n    display: flex;\n    flex-direction: row-reverse; }\n    .company-details-form-container .company-details-form .steps-actions .mg-left-1 {\n      margin-left: 1rem; }\n  .company-details-form-container .company-details-form .row .website .ant-input {\n    margin-left: 0.3rem; }\n  .company-details-form-container .company-details-form .row .website .ant-input-group-addon {\n    border: 1px solid #d9d9d9; }\n  .company-details-form-container .company-details-form .row .logo-upload-section {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: start;\n    width: 100%; }\n    .company-details-form-container .company-details-form .row .logo-upload-section .ant-upload {\n      width: 20%; }\n    .company-details-form-container .company-details-form .row .logo-upload-section .ant-upload-list {\n      align-items: center;\n      justify-content: center;\n      width: 75%; }\n      .company-details-form-container .company-details-form .row .logo-upload-section .ant-upload-list .ant-upload-list-item {\n        margin-top: 0; }\n  .company-details-form-container .company-details-form .row .details-part-one .space-container {\n    width: 100%; }\n    .company-details-form-container .company-details-form .row .details-part-one .space-container .ant-space-item {\n      width: 100%; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .certifier-radio-container {\n    width: 30%; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .certifier-radio-container .ant-radio-button-wrapper-checked:not(\n    .ant-radio-button-wrapper-disabled\n) {\n      color: #519e4f !important;\n      border-color: #519e4f !important;\n      box-shadow: none; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .certifier-radio-container .anticon {\n      background: #eeeeee;\n      border-radius: 50px;\n      padding: 0.2rem;\n      color: #519e4f; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .dev-radio-container {\n    width: 30%; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .dev-radio-container .ant-radio-button-wrapper-checked:not(\n    .ant-radio-button-wrapper-disabled\n) {\n      color: #ffa070 !important;\n      border-color: #ffa070 !important;\n      box-shadow: none; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .dev-radio-container .anticon {\n      background: #eeeeee;\n      border-radius: 50px;\n      padding: 0.2rem;\n      color: #ffa070; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .minister-radio-container {\n    width: 30%; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .minister-radio-container .ant-radio-button-wrapper-checked:not(\n    .ant-radio-button-wrapper-disabled\n) {\n      color: #9155fd !important;\n      border-color: #9155fd !important;\n      box-shadow: none; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .minister-radio-container .anticon {\n      background: #eeeeee;\n      border-radius: 50px;\n      padding: 0.2rem;\n      color: #9155fd; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .gov-radio-container {\n    width: 45%; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .gov-radio-container .ant-radio-button-wrapper-checked:not(\n    .ant-radio-button-wrapper-disabled\n) {\n      color: #16b1ff !important;\n      border-color: #16b1ff !important;\n      box-shadow: none; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .gov-radio-container .anticon {\n      background: #eeeeee;\n      border-radius: 50px;\n      padding: 0.2rem;\n      color: #16b1ff; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .observer-radio-container {\n    width: 25%; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .observer-radio-container .ant-radio-button-wrapper-checked:not(\n    .ant-radio-button-wrapper-disabled\n) {\n      color: #707070 !important;\n      border-color: #707070 !important;\n      box-shadow: none; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .observer-radio-container .anticon {\n      background: #eeeeee;\n      border-radius: 50px;\n      padding: 0.2rem;\n      color: #707070; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .ant-radio-button-wrapper::before {\n    background-color: transparent; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .ant-radio-button-wrapper {\n    border: 1px solid #d9d9d9; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .anticon {\n    margin-right: 0.5rem; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .certifier {\n    width: 100%; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .certifier .ant-radio-button-checked {\n      background: rgba(128, 255, 0, 0.12);\n      color: #519e4f; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .dev {\n    width: 100%; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .dev .ant-radio-button-checked {\n      background: rgba(254, 241, 173, 0.5);\n      color: #ffa070; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .gov {\n    width: 100%; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .gov .ant-radio-button-checked {\n      background: rgba(185, 226, 244, 0.56);\n      color: #16b1ff; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .minister {\n    width: 100%; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .minister .ant-radio-button-checked {\n      background: rgba(198, 144, 251, 0.12);\n      color: #9155fd; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .observer {\n    width: 100%; }\n    .company-details-form-container .company-details-form .row .details-part-two .role-group .observer .ant-radio-button-checked {\n      background: rgba(176, 190, 197, 0.23);\n      color: #707070; }\n  .company-details-form-container .company-details-form .row .details-part-two .role-group .role-icons {\n    margin-right: 5px; }\n  .company-details-form-container .company-details-form .row .details-part-two .space-container {\n    width: 100%; }\n    .company-details-form-container .company-details-form .row .details-part-two .space-container .ant-space-item {\n      width: 100%; }\n\n.step-title-container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem; }\n  .step-title-container .step-count {\n    font-size: 2.2rem;\n    font-weight: 800;\n    margin-right: 0.4rem;\n    color: rgba(58, 53, 65, 0.8); }\n  .step-title-container .title {\n    font-size: 1rem;\n    font-weight: 600;\n    color: #3a3541; }\n\n.add-company-main-container {\n  display: flex;\n  flex-direction: column;\n  border-radius: 5px;\n  padding: 0 50px; }\n  .add-company-main-container .title-container {\n    display: flex;\n    flex-direction: column;\n    border-radius: 5px; }\n    .add-company-main-container .title-container .main {\n      font-size: 1.25rem;\n      font-weight: 500;\n      color: #16b1ff; }\n    .add-company-main-container .title-container .sub {\n      font-size: 0.8rem;\n      color: #555657; }\n  .add-company-main-container .adding-section {\n    display: flex;\n    flex-direction: column;\n    background-color: #ffffff;\n    margin: 1rem 0 1rem 0;\n    border-radius: 10px;\n    padding: 2.5rem 1.5rem 2.5rem 1.5rem; }\n    .add-company-main-container .adding-section .form-section {\n      display: flex;\n      margin-bottom: 2rem; }\n      .add-company-main-container .adding-section .form-section .form-one {\n        width: 100%; }\n      .add-company-main-container .adding-section .form-section .steps {\n        width: 15%; }\n      .add-company-main-container .adding-section .form-section .steps-content {\n        width: 85%; }\n    .add-company-main-container .adding-section .steps-action {\n      display: flex;\n      flex-direction: row-reverse; }\n\n.ant-upload-list-picture .ant-upload-list-item-error,\n.ant-upload-list-picture-card .ant-upload-list-item-error {\n  height: auto;\n  max-height: 200px; }\n\n.hide {\n  display: none !important; }\n";
 styleInject(css_248z$s);
 
-var css_248z$r = "body {\n  background-color: #f4f5fa;\n  font-family: \"Inter\";\n  font-weight: 400; }\n\n.ant-menu {\n  background-color: #f4f5fa; }\n\n.ant-layout-header {\n  background-color: #f4f5fa; }\n\n.ant-layout {\n  background-color: #f4f5fa; }\n\n.ant-menu-submenu .ant-menu {\n  background-color: #f4f5fa; }\n\n.ant-menu-item {\n  background-color: #f4f5fa; }\n\n.ant-menu-sub {\n  background-color: #f4f5fa; }\n\n.ant-table-content {\n  font-family: \"Inter\"; }\n\n.ant-input {\n  border-radius: 5px !important; }\n\n.ant-btn {\n  border-radius: 5px !important; }\n\n.ant-input-group-addon:first-child {\n  border-radius: 5px !important; }\n\n.ant-input-group .ant-input {\n  width: 99% !important; }\n\n.ant-radio-group {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between; }\n\n.ant-radio-group-large .ant-radio-button-wrapper {\n  font-size: 0.8rem;\n  width: 25%;\n  border-radius: 5px !important; }\n\n.ant-upload-list-picture .ant-upload-list-item-error,\n.ant-upload-list-picture-card .ant-upload-list-item-error {\n  border-color: #40a9ff;\n  border-radius: 5px;\n  height: 40px; }\n  .ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-name,\n  .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-name {\n    color: #40a9ff !important; }\n\n.ant-upload-list-item-error .ant-upload-list-item-card-actions .anticon {\n  color: #40a9ff; }\n\n.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,\n.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover {\n  border-color: #d9d9d9 !important; }\n\n.ant-input-group-wrapper-status-error .ant-input-group-addon {\n  border-color: #d9d9d9 !important; }\n\n.ant-form-item-explain-error {\n  font-size: 13px;\n  color: rgba(255, 77, 79, 0.8); }\n\n.ant-table-thead\n> tr\n> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {\n  background-color: transparent !important; }\n\n.ant-form-item-label > label {\n  flex-direction: row-reverse !important;\n  color: rgba(58, 53, 65, 0.5); }\n\n.ant-form-item-label\n> label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {\n  margin-left: 0.2rem !important;\n  color: rgba(255, 77, 79, 0.8) !important; }\n\n.ant-picker {\n  border-radius: 5px !important;\n  height: 35px !important; }\n\n.space-container {\n  width: 100%; }\n  .space-container .ant-space-item {\n    width: 100%; }\n\n.PhoneInput .PhoneInputCountry {\n  border: 1px solid #d9d9d9 !important;\n  border-radius: 5px !important;\n  padding: 0 1rem 0 1rem; }\n\n.PhoneInput .PhoneInputInput {\n  flex: 1 1;\n  min-width: 0;\n  border-radius: 5px !important;\n  height: 40px;\n  border: 1px solid #d9d9d9 !important;\n  outline: none; }\n\n.filter-title {\n  color: rgba(58, 53, 65, 0.8);\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-size: 0.875rem; }\n\n.ant-radio-wrapper {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 22px;\n  color: rgba(58, 53, 65, 0.8); }\n\n.ant-list-item {\n  color: rgba(58, 53, 65, 0.8); }\n\n.PhoneInput .PhoneInputInput:focus-visible,\n.PhoneInput .PhoneInputInput:hover {\n  flex: 1 1;\n  min-width: 0;\n  border-radius: 5px !important;\n  height: 40px;\n  border-right: 1px solid #40a9ff !important;\n  outline: 1px solid #40a9ff; }\n\n.layout-content-container {\n  padding-bottom: 100px; }\n  .layout-content-container .ant-btn-primary {\n    background-color: #16b1ff;\n    color: #ffffff;\n    border: none; }\n  .layout-content-container .ant-btn {\n    height: 32px;\n    font-weight: 500;\n    font-size: 0.8rem;\n    border-radius: 0.3rem;\n    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n    min-width: 80px;\n    box-shadow: none; }\n    .layout-content-container .ant-btn span {\n      text-transform: uppercase; }\n\n.content-container {\n  padding: 0px 20px; }\n  .content-container .title-bar {\n    padding: 0px 0px 30px 0px; }\n  .content-container .body-title {\n    color: #16b1ff;\n    font-weight: 500;\n    font-size: 1.2rem; }\n  .content-container .body-sub-title {\n    color: rgba(58, 53, 65, 0.6);\n    font-weight: 400;\n    font-size: 0.8rem; }\n\n.content-card {\n  background-color: #ffffff;\n  border-radius: 10px;\n  width: 100%; }\n  .content-card .action-bar {\n    padding: 1.6rem 1.3rem 1.6rem 1.3rem; }\n    .content-card .action-bar button {\n      width: fit-content; }\n  .content-card .filter-section {\n    padding: 1.4rem 1.3rem 1.6rem 1.3rem;\n    display: flex;\n    width: 100%;\n    flex-direction: row;\n    align-items: center;\n    justify-content: end; }\n    .content-card .filter-section .search-bar {\n      display: flex;\n      flex-direction: row-reverse; }\n    .content-card .filter-section .filter-bar {\n      display: flex;\n      flex-direction: row-reverse;\n      margin-top: 0.8rem;\n      width: 5%; }\n    .content-card .filter-section .ant-input-affix-wrapper {\n      border-radius: 0.313rem 0 0 0.313rem !important; }\n    .content-card .filter-section .ant-input-search\n> .ant-input-group\n> .ant-input-group-addon:last-child\n.ant-input-search-button {\n      padding-top: 0;\n      padding-bottom: 0;\n      border-radius: 0 0.313rem 0.313rem 0 !important; }\n\n.layout-content-container .ant-btn {\n  min-width: 50px !important; }\n\n.table-actions-section {\n  width: 100%;\n  margin-bottom: 1rem; }\n\n.action-menu {\n  min-width: 120px;\n  color: rgba(58, 53, 65, 0.6); }\n  .action-menu .action-icon {\n    margin-right: 12px;\n    display: flex; }\n  .action-menu .anticon-edit {\n    color: #16b1ff; }\n  .action-menu .anticon-delete {\n    color: #f25a29; }\n\n.ant-dropdown-menu {\n  padding: 1rem 2rem 1rem 1rem !important;\n  border-radius: 5px; }\n\n.ant-dropdown-menu-item-active {\n  background-color: transparent !important; }\n\n.ant-popover-inner-content .action-menu {\n  margin: -12px -16px; }\n  .ant-popover-inner-content .action-menu .ant-list-item {\n    padding: 11px 16px;\n    justify-content: flex-start;\n    cursor: pointer; }\n\n.ant-tag {\n  border-radius: 20px; }\n\n.clickable {\n  cursor: pointer; }\n\n.text-center {\n  text-align: center; }\n\n.float-left {\n  float: left; }\n\n.float-right {\n  float: right; }\n\n.apexcharts-canvas {\n  font-family: \"Inter\" !important; }\n\n.apexcharts-legend-text {\n  font-family: \"Inter\" !important; }\n\n.ant-tag {\n  padding: 1px 10px; }\n\n.flex-display {\n  display: flex; }\n\n.ant-modal-footer {\n  border-top: none;\n  text-align: center; }\n  .ant-modal-footer button {\n    margin: 10px 20px;\n    text-transform: uppercase;\n    font-size: 0.8rem; }\n\n.ant-modal-header {\n  border-radius: 15px;\n  border: none; }\n\n.ant-modal-content {\n  border-radius: 15px;\n  border: none; }\n\n.ant-modal-header {\n  border: none; }\n\n.ant-modal-body {\n  text-align: center;\n  color: rgba(58, 53, 65, 0.6);\n  font-size: 0.8rem; }\n  .ant-modal-body .ant-select-selector {\n    text-align: left;\n    border-radius: 5px !important;\n    height: 32px; }\n  .ant-modal-body .form-label {\n    text-align: left; }\n    .ant-modal-body .form-label .req-ast {\n      color: rgba(255, 77, 79, 0.8);\n      padding-left: 5px; }\n  .ant-modal-body .ant-form .ant-input-password {\n    padding: 6.5px 11px;\n    font-size: 16px; }\n  .ant-modal-body .ant-form .ant-form-item-explain-error {\n    text-align: start; }\n\n.popup-header {\n  text-align: center;\n  color: rgba(58, 53, 65, 0.8);\n  font-weight: 600;\n  font-family: \"Inter\";\n  font-size: 0.9rem;\n  margin: 25px 20px -20px 20px; }\n  .popup-header .icon {\n    font-size: 4rem;\n    margin-bottom: 15px;\n    font-weight: 400; }\n  .popup-header img {\n    height: 100px; }\n\n.popup-success .icon {\n  color: #5dc380; }\n\n.popup-success .ant-btn-primary {\n  background: #16b1ff;\n  border-radius: #16b1ff;\n  border: none; }\n\n.popup-success .ant-btn-default {\n  color: rgba(58, 53, 65, 0.6);\n  border-color: rgba(58, 53, 65, 0.6); }\n\n.popup-success .ant-btn-primary[disabled] {\n  border-color: #d9d9d9;\n  background: #f5f5f5; }\n\n.popup-primary .icon {\n  color: #16b1ff; }\n\n.popup-primary .ant-btn-primary {\n  background: #16b1ff;\n  border-radius: #16b1ff;\n  border: none; }\n\n.popup-primary .ant-btn-default {\n  color: rgba(58, 53, 65, 0.6);\n  border-color: rgba(58, 53, 65, 0.6); }\n\n.popup-primary .ant-btn-primary[disabled] {\n  border-color: #d9d9d9;\n  background: #f5f5f5; }\n\n.popup-danger .icon {\n  color: rgba(255, 77, 79, 0.8); }\n\n.popup-danger .ant-btn-primary {\n  background: rgba(255, 77, 79, 0.8);\n  border-radius: rgba(255, 77, 79, 0.8);\n  border: none; }\n\n.popup-danger .ant-btn-primary[disabled] {\n  border-color: #d9d9d9;\n  background: #f5f5f5; }\n\n.popup-danger .ant-btn-default {\n  color: rgba(58, 53, 65, 0.6);\n  border-color: rgba(58, 53, 65, 0.6); }\n\n.ant-modal-footer .ant-btn {\n  height: 32px;\n  border-radius: 4px;\n  padding: 6px 16px;\n  font-weight: 500; }\n\n.ant-modal-footer .ant-btn-default {\n  color: rgba(140, 140, 140, 0.7) !important;\n  border-color: rgba(140, 140, 140, 0.7) !important; }\n\n.ant-tag-processing {\n  color: #16b1ff;\n  background: rgba(185, 226, 244, 0.4); }\n\n.filter-section input {\n  font-family: 'Inter';\n  font-size: 0.8rem !important; }\n\n.pull-right {\n  float: right; }\n\n.disabled {\n  opacity: 0.5; }\n\n.mg-left-3 {\n  margin-left: 3rem; }\n\n.mg-left-2 {\n  margin-left: 2rem !important; }\n\n.mg-left-1 {\n  margin-left: 1rem; }\n\n.mg-top-1 {\n  margin-top: 1rem; }\n\n.mg-top-2 {\n  margin-top: 2rem; }\n\n.mg-bottom-1 {\n  margin-bottom: 1rem !important; }\n\n.transfer-form {\n  padding: 0px 15px;\n  color: rgba(58, 53, 65, 0.6); }\n  .transfer-form .popup-credit-input .ant-form-item-explain-error {\n    width: 200px; }\n  .transfer-form .info-container {\n    display: flex;\n    flex-direction: row;\n    width: 10%;\n    height: 20px;\n    align-items: center;\n    justify-content: start;\n    margin-left: 5px; }\n  .transfer-form .ant-row {\n    align-items: unset; }\n  .transfer-form .sub-text {\n    margin-bottom: 35px;\n    font-size: 0.9rem;\n    font-weight: 500; }\n  .transfer-form .label {\n    text-align: left;\n    font-size: 0.9rem;\n    color: rgba(58, 53, 65, 0.6); }\n  .transfer-form .seperator {\n    font-size: 1.2rem;\n    color: #d9d9d9; }\n  .transfer-form .footer {\n    margin-bottom: 0px;\n    margin-top: 15px; }\n  .transfer-form label {\n    font-size: 0.8rem; }\n  .transfer-form .ant-radio-wrapper {\n    font-size: 0.9rem; }\n  .transfer-form input {\n    color: rgba(58, 53, 65, 0.6); }\n  .transfer-form button {\n    text-transform: uppercase;\n    font-weight: 500; }\n\n.color-error {\n  color: rgba(255, 77, 79, 0.8); }\n\n.color-primary {\n  color: #16b1ff; }\n\n.ant-input-number-input {\n  text-align: right; }\n\n.text-left {\n  text-align: left; }\n\n.ant-form-item .ant-radio-group {\n  text-align: left; }\n\n.loading-center {\n  margin: auto;\n  text-align: center;\n  position: absolute;\n  top: 50%;\n  left: 50%; }\n\n.ant-tag-purple {\n  color: #976ed7; }\n\n.ant-tag-orange {\n  color: #ff8f56; }\n\n.ant-tag-default {\n  color: rgba(58, 53, 65, 0.5); }\n\n.ant-popover-inner {\n  border-radius: 4px; }\n\n.ant-input-number {\n  border-radius: 5px; }\n\n.ret-icon {\n  background-color: rgba(254, 241, 173, 0.5);\n  color: #ff8f56; }\n\n.flag-ret-icon {\n  display: flex !important;\n  background-color: #f4f5fa;\n  font-size: 1.1rem !important;\n  padding: 7px; }\n\n.b-icon {\n  vertical-align: middle; }\n\n.ant-message-notice-content {\n  padding: 0px;\n  border-radius: 5px; }\n  .ant-message-notice-content .ant-message-custom-content {\n    font-size: 0.8rem;\n    border-radius: 5px;\n    padding: 17px 24px; }\n  .ant-message-notice-content .ant-message-error {\n    color: rgba(255, 77, 79, 0.8);\n    border: 1px solid rgba(255, 77, 79, 0.8); }\n  .ant-message-notice-content .ant-message-success {\n    color: #5bce00;\n    border: 1px solid #5bce00; }\n\n.ant-select-selection-item {\n  color: rgba(58, 53, 65, 0.6); }\n\n.sub-text {\n  font-size: 0.9rem;\n  font-weight: 500; }\n\n.search-filter {\n  margin-right: 15px; }\n\n.mg-bottom-0 {\n  margin-bottom: 0px; }\n\n.padding-bottom-0 {\n  padding-bottom: 0px; }\n\n.ellipsis-overflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical; }\n\n.nextline-overflow {\n  overflow-wrap: break-word; }\n\n.ant-message {\n  width: 50%;\n  right: 0px;\n  left: auto;\n  min-width: 400px; }\n";
+var css_248z$r = "body {\n  background-color: #f4f5fa;\n  font-family: \"Inter\";\n  font-weight: 400; }\n  body .ant-menu {\n    background-color: #f4f5fa; }\n  body .ant-layout-header {\n    background-color: #f4f5fa; }\n  body .ant-layout {\n    background-color: #f4f5fa; }\n  body .ant-menu-submenu .ant-menu {\n    background-color: #f4f5fa; }\n  body .ant-menu-item {\n    background-color: #f4f5fa; }\n  body .ant-menu-sub {\n    background-color: #f4f5fa; }\n  body .ant-table-content {\n    font-family: \"Inter\"; }\n  body .ant-input {\n    border-radius: 5px !important; }\n  body .ant-btn {\n    border-radius: 5px !important; }\n  body .ant-input-group-addon:first-child {\n    border-radius: 5px !important; }\n  body .ant-input-group .ant-input {\n    width: 99% !important; }\n  body .ant-radio-group {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between; }\n  body .ant-radio-group-large .ant-radio-button-wrapper {\n    font-size: 0.8rem;\n    width: 25%;\n    border-radius: 5px !important; }\n  body .ant-upload-list-picture .ant-upload-list-item-error,\n  body .ant-upload-list-picture-card .ant-upload-list-item-error {\n    border-color: #40a9ff;\n    border-radius: 5px;\n    height: 40px; }\n    body .ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-name,\n    body .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-name {\n      color: #40a9ff !important; }\n  body .ant-upload-list-item-error .ant-upload-list-item-card-actions .anticon {\n    color: #40a9ff; }\n  body .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,\n  body .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover {\n    border-color: #d9d9d9 !important; }\n  body .ant-input-group-wrapper-status-error .ant-input-group-addon {\n    border-color: #d9d9d9 !important; }\n  body .ant-form-item-explain-error {\n    font-size: 13px;\n    color: rgba(255, 77, 79, 0.8); }\n  body .ant-table-thead\n> tr\n> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {\n    background-color: transparent !important; }\n  body .ant-form-item-label > label {\n    flex-direction: row-reverse !important;\n    color: rgba(58, 53, 65, 0.5); }\n  body .ant-form-item-label\n> label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {\n    margin-left: 0.2rem !important;\n    color: rgba(255, 77, 79, 0.8) !important; }\n  body .ant-picker {\n    border-radius: 5px !important;\n    height: 35px !important; }\n  body .space-container {\n    width: 100%; }\n    body .space-container .ant-space-item {\n      width: 100%; }\n  body .PhoneInput .PhoneInputCountry {\n    border: 1px solid #d9d9d9 !important;\n    border-radius: 5px !important;\n    padding: 0 1rem 0 1rem; }\n  body .PhoneInput .PhoneInputInput {\n    flex: 1 1;\n    min-width: 0;\n    border-radius: 5px !important;\n    height: 40px;\n    border: 1px solid #d9d9d9 !important;\n    outline: none; }\n  body .filter-title {\n    color: rgba(58, 53, 65, 0.8);\n    font-family: 'Inter';\n    font-style: normal;\n    font-weight: 600;\n    font-size: 0.875rem; }\n  body .ant-radio-wrapper {\n    font-family: 'Inter';\n    font-style: normal;\n    font-weight: 400;\n    font-size: 0.875rem;\n    line-height: 22px;\n    color: rgba(58, 53, 65, 0.8); }\n  body .ant-list-item {\n    color: rgba(58, 53, 65, 0.8); }\n  body .PhoneInput .PhoneInputInput:focus-visible,\n  body .PhoneInput .PhoneInputInput:hover {\n    flex: 1 1;\n    min-width: 0;\n    border-radius: 5px !important;\n    height: 40px;\n    border-right: 1px solid #40a9ff !important;\n    outline: 1px solid #40a9ff; }\n  body .layout-content-container {\n    padding-bottom: 100px; }\n    body .layout-content-container .ant-btn-primary {\n      background-color: #16b1ff;\n      color: #ffffff;\n      border: none; }\n    body .layout-content-container .ant-btn {\n      height: 32px;\n      font-weight: 500;\n      font-size: 0.8rem;\n      border-radius: 0.3rem;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n      min-width: 80px;\n      box-shadow: none; }\n      body .layout-content-container .ant-btn span {\n        text-transform: uppercase; }\n  body .content-container {\n    padding: 0px 20px; }\n    body .content-container .title-bar {\n      padding: 0px 0px 30px 0px; }\n    body .content-container .body-title {\n      color: #16b1ff;\n      font-weight: 500;\n      font-size: 1.2rem; }\n    body .content-container .body-sub-title {\n      color: rgba(58, 53, 65, 0.6);\n      font-weight: 400;\n      font-size: 0.8rem; }\n  body .content-card {\n    background-color: #ffffff;\n    border-radius: 10px;\n    width: 100%; }\n    body .content-card .action-bar {\n      padding: 1.6rem 1.3rem 1.6rem 1.3rem; }\n      body .content-card .action-bar button {\n        width: fit-content; }\n    body .content-card .filter-section {\n      padding: 1.4rem 1.3rem 1.6rem 1.3rem;\n      display: flex;\n      width: 100%;\n      flex-direction: row;\n      align-items: center;\n      justify-content: end; }\n      body .content-card .filter-section .search-bar {\n        display: flex;\n        flex-direction: row-reverse; }\n      body .content-card .filter-section .filter-bar {\n        display: flex;\n        flex-direction: row-reverse;\n        margin-top: 0.8rem;\n        width: 5%; }\n      body .content-card .filter-section .ant-input-affix-wrapper {\n        border-radius: 0.313rem 0 0 0.313rem !important; }\n      body .content-card .filter-section .ant-input-search\n> .ant-input-group\n> .ant-input-group-addon:last-child\n.ant-input-search-button {\n        padding-top: 0;\n        padding-bottom: 0;\n        border-radius: 0 0.313rem 0.313rem 0 !important; }\n  body .layout-content-container .ant-btn {\n    min-width: 50px !important; }\n  body .table-actions-section {\n    width: 100%;\n    margin-bottom: 1rem; }\n  body .action-menu {\n    min-width: 120px;\n    color: rgba(58, 53, 65, 0.6); }\n    body .action-menu .action-icon {\n      margin-right: 12px;\n      display: flex; }\n    body .action-menu .anticon-edit {\n      color: #16b1ff; }\n    body .action-menu .anticon-delete {\n      color: #f25a29; }\n  body .ant-dropdown-menu {\n    padding: 1rem 2rem 1rem 1rem !important;\n    border-radius: 5px; }\n  body .ant-dropdown-menu-item-active {\n    background-color: transparent !important; }\n  body .ant-popover-inner-content .action-menu {\n    margin: -12px -16px; }\n    body .ant-popover-inner-content .action-menu .ant-list-item {\n      padding: 11px 16px;\n      justify-content: flex-start;\n      cursor: pointer; }\n  body .ant-tag {\n    border-radius: 20px; }\n  body .clickable {\n    cursor: pointer; }\n  body .text-center {\n    text-align: center; }\n  body .float-left {\n    float: left; }\n  body .float-right {\n    float: right; }\n  body .apexcharts-canvas {\n    font-family: \"Inter\" !important; }\n  body .apexcharts-legend-text {\n    font-family: \"Inter\" !important; }\n  body .ant-tag {\n    padding: 1px 10px; }\n  body .flex-display {\n    display: flex; }\n  body .ant-modal-footer {\n    border-top: none;\n    text-align: center; }\n    body .ant-modal-footer button {\n      margin: 10px 20px;\n      text-transform: uppercase;\n      font-size: 0.8rem; }\n  body .ant-modal-header {\n    border-radius: 15px;\n    border: none; }\n  body .ant-modal-content {\n    border-radius: 15px;\n    border: none; }\n  body .ant-modal-header {\n    border: none; }\n  body .ant-modal-body {\n    text-align: center;\n    color: rgba(58, 53, 65, 0.6);\n    font-size: 0.8rem; }\n    body .ant-modal-body .ant-select-selector {\n      text-align: left;\n      border-radius: 5px !important;\n      height: 32px; }\n    body .ant-modal-body .form-label {\n      text-align: left; }\n      body .ant-modal-body .form-label .req-ast {\n        color: rgba(255, 77, 79, 0.8);\n        padding-left: 5px; }\n    body .ant-modal-body .ant-form .ant-input-password {\n      padding: 6.5px 11px;\n      font-size: 16px; }\n    body .ant-modal-body .ant-form .ant-form-item-explain-error {\n      text-align: start; }\n  body .popup-header {\n    text-align: center;\n    color: rgba(58, 53, 65, 0.8);\n    font-weight: 600;\n    font-family: \"Inter\";\n    font-size: 0.9rem;\n    margin: 25px 20px -20px 20px; }\n    body .popup-header .icon {\n      font-size: 4rem;\n      margin-bottom: 15px;\n      font-weight: 400; }\n    body .popup-header img {\n      height: 100px; }\n  body .popup-success .icon {\n    color: #5dc380; }\n  body .popup-success .ant-btn-primary {\n    background: #16b1ff;\n    border-radius: #16b1ff;\n    border: none; }\n  body .popup-success .ant-btn-default {\n    color: rgba(58, 53, 65, 0.6);\n    border-color: rgba(58, 53, 65, 0.6); }\n  body .popup-success .ant-btn-primary[disabled] {\n    border-color: #d9d9d9;\n    background: #f5f5f5; }\n  body .popup-primary .icon {\n    color: #16b1ff; }\n  body .popup-primary .ant-btn-primary {\n    background: #16b1ff;\n    border-radius: #16b1ff;\n    border: none; }\n  body .popup-primary .ant-btn-default {\n    color: rgba(58, 53, 65, 0.6);\n    border-color: rgba(58, 53, 65, 0.6); }\n  body .popup-primary .ant-btn-primary[disabled] {\n    border-color: #d9d9d9;\n    background: #f5f5f5; }\n  body .popup-danger .icon {\n    color: rgba(255, 77, 79, 0.8); }\n  body .popup-danger .ant-btn-primary {\n    background: rgba(255, 77, 79, 0.8);\n    border-radius: rgba(255, 77, 79, 0.8);\n    border: none; }\n  body .popup-danger .ant-btn-primary[disabled] {\n    border-color: #d9d9d9;\n    background: #f5f5f5; }\n  body .popup-danger .ant-btn-default {\n    color: rgba(58, 53, 65, 0.6);\n    border-color: rgba(58, 53, 65, 0.6); }\n  body .ant-modal-footer .ant-btn {\n    height: 32px;\n    border-radius: 4px;\n    padding: 6px 16px;\n    font-weight: 500; }\n  body .ant-modal-footer .ant-btn-default {\n    color: rgba(140, 140, 140, 0.7) !important;\n    border-color: rgba(140, 140, 140, 0.7) !important; }\n  body .ant-tag-processing {\n    color: #16b1ff;\n    background: rgba(185, 226, 244, 0.4); }\n  body .filter-section input {\n    font-family: 'Inter';\n    font-size: 0.8rem !important; }\n  body .pull-right {\n    float: right; }\n  body .disabled {\n    opacity: 0.5; }\n  body .mg-left-3 {\n    margin-left: 3rem; }\n  body .mg-left-2 {\n    margin-left: 2rem !important; }\n  body .mg-left-1 {\n    margin-left: 1rem; }\n  body .mg-top-1 {\n    margin-top: 1rem; }\n  body .mg-top-2 {\n    margin-top: 2rem; }\n  body .mg-bottom-1 {\n    margin-bottom: 1rem !important; }\n  body .transfer-form {\n    padding: 0px 15px;\n    color: rgba(58, 53, 65, 0.6); }\n    body .transfer-form .popup-credit-input .ant-form-item-explain-error {\n      width: 200px; }\n    body .transfer-form .ant-row {\n      align-items: unset; }\n    body .transfer-form .sub-text {\n      margin-bottom: 35px;\n      font-size: 0.9rem;\n      font-weight: 500; }\n    body .transfer-form .label {\n      text-align: left;\n      font-size: 0.9rem;\n      color: rgba(58, 53, 65, 0.6); }\n    body .transfer-form .seperator {\n      font-size: 1.2rem;\n      color: #d9d9d9; }\n    body .transfer-form .footer {\n      margin-bottom: 0px;\n      margin-top: 15px; }\n    body .transfer-form label {\n      font-size: 0.8rem; }\n    body .transfer-form .ant-radio-wrapper {\n      font-size: 0.9rem; }\n    body .transfer-form input {\n      color: rgba(58, 53, 65, 0.6); }\n    body .transfer-form button {\n      text-transform: uppercase;\n      font-weight: 500; }\n  body .color-error {\n    color: rgba(255, 77, 79, 0.8); }\n  body .color-primary {\n    color: #16b1ff; }\n  body .ant-input-number-input {\n    text-align: right; }\n  body .text-left {\n    text-align: left; }\n  body .ant-form-item .ant-radio-group {\n    text-align: left; }\n  body .loading-center {\n    margin: auto;\n    text-align: center;\n    position: absolute;\n    top: 50%;\n    left: 50%; }\n  body .ant-tag-purple {\n    color: #976ed7; }\n  body .ant-tag-orange {\n    color: #ff8f56; }\n  body .ant-tag-default {\n    color: rgba(58, 53, 65, 0.5); }\n  body .ant-popover-inner {\n    border-radius: 4px; }\n  body .ant-input-number {\n    border-radius: 5px; }\n  body .ret-icon {\n    background-color: rgba(254, 241, 173, 0.5);\n    color: #ff8f56; }\n  body .flag-ret-icon {\n    display: flex !important;\n    background-color: #f4f5fa;\n    font-size: 1.1rem !important;\n    padding: 7px; }\n  body .b-icon {\n    vertical-align: middle; }\n  body .ant-message-notice-content {\n    padding: 0px;\n    border-radius: 5px; }\n    body .ant-message-notice-content .ant-message-custom-content {\n      font-size: 0.8rem;\n      border-radius: 5px;\n      padding: 17px 24px; }\n    body .ant-message-notice-content .ant-message-error {\n      color: rgba(255, 77, 79, 0.8);\n      border: 1px solid rgba(255, 77, 79, 0.8); }\n    body .ant-message-notice-content .ant-message-success {\n      color: #5bce00;\n      border: 1px solid #5bce00; }\n  body .ant-select-selection-item {\n    color: rgba(58, 53, 65, 0.6); }\n  body .info-container {\n    display: flex;\n    flex-direction: row;\n    width: 10%;\n    height: 20px;\n    align-items: center;\n    justify-content: start;\n    margin-left: 5px; }\n  body .ant-row {\n    align-items: unset; }\n  body .sub-text {\n    font-size: 0.9rem;\n    font-weight: 500; }\n  body .search-filter {\n    margin-right: 15px; }\n  body .mg-bottom-0 {\n    margin-bottom: 0px; }\n  body .padding-bottom-0 {\n    padding-bottom: 0px; }\n  body .ellipsis-overflow {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical; }\n  body .nextline-overflow {\n    overflow-wrap: break-word; }\n  body .ant-message {\n    width: 50%;\n    right: 0px;\n    left: auto;\n    min-width: 400px; }\n";
 styleInject(css_248z$r);
 
 exports.UserManagementColumns = void 0;
@@ -929,6 +1233,11 @@ exports.InvestmentCreationType = void 0;
     InvestmentCreationType["EXISTING"] = "Existing";
     InvestmentCreationType["NEW"] = "New";
 })(exports.InvestmentCreationType || (exports.InvestmentCreationType = {}));
+exports.InvestmentOwnershipType = void 0;
+(function (InvestmentOwnershipType) {
+    InvestmentOwnershipType["PROJECT"] = "Project";
+    InvestmentOwnershipType["NATIONAL"] = "National";
+})(exports.InvestmentOwnershipType || (exports.InvestmentOwnershipType = {}));
 exports.InvestmentStream = void 0;
 (function (InvestmentStream) {
     InvestmentStream["CLIMATE_FINANCE"] = "ClimateFinance";
@@ -2047,7 +2356,7 @@ exports.NdcActionStatus = void 0;
     NdcActionStatus["PENDING"] = "Pending";
     NdcActionStatus["APPROVED"] = "Approved";
 })(exports.NdcActionStatus || (exports.NdcActionStatus = {}));
-var getNdcActionStatusEnumVal$1 = function (value) {
+var getNdcActionStatusEnumVal = function (value) {
     var index = Object.keys(exports.NdcActionStatus).indexOf(value);
     if (index < 0) {
         return value;
@@ -2055,7 +2364,7 @@ var getNdcActionStatusEnumVal$1 = function (value) {
     return Object.values(exports.NdcActionStatus)[index];
 };
 var getNdcStatusTagType = function (status) {
-    switch (getNdcActionStatusEnumVal$1(status)) {
+    switch (getNdcActionStatusEnumVal(status)) {
         case exports.NdcActionStatus.PENDING:
             return "processing";
         case exports.NdcActionStatus.APPROVED:
@@ -5754,7 +6063,7 @@ var ProgrammeCertify = /** @class */ (function () {
 
 var AddNewCompanyComponent = function (props) {
     var _a;
-    var t = props.t, onNavigateToCompanyManagement = props.onNavigateToCompanyManagement, maximumImageSize = props.maximumImageSize, useConnection = props.useConnection, useUserContext = props.useUserContext, useLocation = props.useLocation, regionField = props.regionField, isGuest = props.isGuest, onNavigateToHome = props.onNavigateToHome, systemType = props.systemType;
+    var t = props.t, onNavigateToCompanyManagement = props.onNavigateToCompanyManagement, maximumImageSize = props.maximumImageSize, useLocation = props.useLocation, regionField = props.regionField, isGuest = props.isGuest, onNavigateToHome = props.onNavigateToHome, systemType = props.systemType;
     var formOne = antd.Form.useForm()[0];
     var formTwo = antd.Form.useForm()[0];
     var _b = React.useState(), stepOneData = _b[0], setStepOneData = _b[1];
@@ -6543,7 +6852,7 @@ var css_248z$q = ".company-profile {\n  padding: 0px 50px; }\n  .company-profile
 styleInject(css_248z$q);
 
 var CompanyProfileComponent = function (props) {
-    var t = props.t, useAbilityContext = props.useAbilityContext, useLocation = props.useLocation, useConnection = props.useConnection, onNavigateToCompanyManagement = props.onNavigateToCompanyManagement, onNavigateToCompanyEdit = props.onNavigateToCompanyEdit, regionField = props.regionField, systemType = props.systemType;
+    var t = props.t, useAbilityContext = props.useAbilityContext, useLocation = props.useLocation, onNavigateToCompanyManagement = props.onNavigateToCompanyManagement, onNavigateToCompanyEdit = props.onNavigateToCompanyEdit, regionField = props.regionField, systemType = props.systemType;
     var _a = useConnection(), get = _a.get, put = _a.put, post = _a.post;
     var _b = React.useState(undefined), companyDetails = _b[0], setCompanyDetails = _b[1];
     var _c = React.useState(undefined), userDetails = _c[0], setUserDetails = _c[1];
@@ -6976,7 +7285,7 @@ styleInject(css_248z$p);
 
 var Search$1 = antd.Input.Search;
 var ProgrammeManagementComponent = function (props) {
-    var t = props.t, visibleColumns = props.visibleColumns, useUserContext = props.useUserContext, useConnection = props.useConnection, onNavigateToProgrammeView = props.onNavigateToProgrammeView, onClickAddProgramme = props.onClickAddProgramme, enableAddProgramme = props.enableAddProgramme, useAbilityContext = props.useAbilityContext;
+    var t = props.t, visibleColumns = props.visibleColumns, onNavigateToProgrammeView = props.onNavigateToProgrammeView, onClickAddProgramme = props.onClickAddProgramme, enableAddProgramme = props.enableAddProgramme, useAbilityContext = props.useAbilityContext;
     var _a = useConnection(); _a.get; _a.delete; var post = _a.post;
     var _b = React.useState(), totalProgramme = _b[0], setTotalProgramme = _b[1];
     var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
@@ -7361,7 +7670,7 @@ var ProgrammeManagementComponent = function (props) {
                     React.createElement("div", { className: "filter-section" },
                         React.createElement("div", { className: "search-filter" },
                             React.createElement(antd.Checkbox, { className: "label", onChange: function (v) {
-                                    if (userInfoState.companyRole === exports.CompanyRole.MINISTRY) {
+                                    if ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.MINISTRY) {
                                         if (v.target.checked) {
                                             setMinistryLevelFilter(true);
                                         }
@@ -7378,7 +7687,7 @@ var ProgrammeManagementComponent = function (props) {
                                             }
                                             : undefined);
                                     }
-                                } }, userInfoState.companyRole === exports.CompanyRole.MINISTRY
+                                } }, (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.MINISTRY
                                 ? t("view:ministryLevel")
                                 : t("view:seeMine"))),
                         React.createElement("div", { className: "search-bar" },
@@ -13159,7 +13468,7 @@ var sectoralScopes = {
 };
 var ProgrammeCreationComponent = function (props) {
     var _a, _b, _c;
-    var useUserContext = props.useUserContext, useConnection = props.useConnection, useLocation = props.useLocation, onNavigateToProgrammeView = props.onNavigateToProgrammeView, translator = props.translator;
+    var useLocation = props.useLocation, onNavigateToProgrammeView = props.onNavigateToProgrammeView, translator = props.translator;
     var t = translator.t;
     var state = useLocation().state;
     var formOne = antd.Form.useForm()[0];
@@ -14224,7 +14533,7 @@ var ChangePasswordModel = function (props) {
 
 var AddNewUserComponent = function (props) {
     var _a, _b, _c, _d, _e, _f;
-    var t = props.t, onNavigateToUserManagement = props.onNavigateToUserManagement, onNavigateLogin = props.onNavigateLogin, useConnection = props.useConnection, useUserContext = props.useUserContext, useLocation = props.useLocation, useAbilityContext = props.useAbilityContext, themeColor = props.themeColor;
+    var t = props.t, onNavigateToUserManagement = props.onNavigateToUserManagement, onNavigateLogin = props.onNavigateLogin, useLocation = props.useLocation, useAbilityContext = props.useAbilityContext, themeColor = props.themeColor;
     var _g = useConnection(), post = _g.post, put = _g.put, del = _g.delete, get = _g.get;
     var formOne = antd.Form.useForm()[0];
     var state = useLocation().state;
@@ -14642,7 +14951,7 @@ var LanguageSelection = function (props) {
 };
 
 var UserProfileComponent = function (props) {
-    var t = props.t, i18n = props.i18n, useConnection = props.useConnection, onNavigateUpdateUser = props.onNavigateUpdateUser, onNavigateLogin = props.onNavigateLogin, useUserContext = props.useUserContext;
+    var t = props.t, i18n = props.i18n, onNavigateUpdateUser = props.onNavigateUpdateUser, onNavigateLogin = props.onNavigateLogin;
     var get = useConnection().get;
     var _a = React.useState(undefined), organisationDetails = _a[0], setOrganisationDetails = _a[1];
     var _b = React.useState(undefined), userDetails = _b[0], setUserDetails = _b[1];
@@ -14810,7 +15119,7 @@ styleInject(css_248z$k);
 
 var Search = antd.Input.Search;
 var UserManagementComponent = function (props) {
-    var t = props.t, useAbilityContext = props.useAbilityContext, useConnection = props.useConnection, visibleColumns = props.visibleColumns, onNavigateToUpdateUser = props.onNavigateToUpdateUser, onClickAddUser = props.onClickAddUser, userInfoState = props.userInfoState;
+    var t = props.t, useAbilityContext = props.useAbilityContext, visibleColumns = props.visibleColumns, onNavigateToUpdateUser = props.onNavigateToUpdateUser, onClickAddUser = props.onClickAddUser;
     antd.Form.useForm()[0];
     var _a = useConnection(), post = _a.post, del = _a.delete;
     var _b = React.useState(), totalUser = _b[0], setTotalUser = _b[1];
@@ -14832,6 +15141,7 @@ var UserManagementComponent = function (props) {
     var _s = React.useState(""), errorMsg = _s[0], setErrorMsg = _s[1];
     var _t = React.useState(false), openDeleteConfirmationModal = _t[0], setOpenDeleteConfirmationModal = _t[1];
     var ability = useAbilityContext();
+    var userInfoState = useUserContext().userInfoState;
     document.addEventListener("mousedown", function (event) {
         var userFilterArea1 = document.querySelector(".filter-bar");
         var userFilterArea2 = document.querySelector(".filter-dropdown");
@@ -15344,7 +15654,7 @@ var UserManagementComponent = function (props) {
         React.createElement(UserActionConfirmationModel, { t: t, actionInfo: actionInfo, onActionConfirmed: handleOk, onActionCanceled: handleCancel, openModal: openDeleteConfirmationModal, errorMsg: errorMsg, loading: loading })));
 };
 
-var css_248z$j = ".steps-actions {\n  display: flex;\n  flex-direction: row-reverse;\n  margin-right: 1rem;\n  justify-content: flex-start; }\n\n.investment-title-bar {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 0px 0px 30px 0px; }\n  .investment-title-bar .title {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between; }\n  .investment-title-bar .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n  .investment-title-bar .flex-display {\n    margin-left: 15px; }\n\n.ownership-container {\n  padding: 15px 0px; }\n  .ownership-container .label {\n    color: rgba(58, 53, 65, 0.5); }\n\n.separator {\n  padding: 5px;\n  color: #d8d8d8; }\n\n.role-group .ant-col-13 {\n  max-width: 320px; }\n\n.role-group .condition-radio-container {\n  width: 48%;\n  text-align: center; }\n  .role-group .condition-radio-container .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {\n    color: #ffffff !important;\n    border-color: #9155fd !important;\n    box-shadow: none;\n    max-width: 200px; }\n\n.role-group .ant-radio-button-wrapper::before {\n  background-color: transparent; }\n\n.role-group .anticon {\n  margin-right: 0.5rem; }\n\n.role-group .ant-radio-button-wrapper {\n  border: 1px solid #d9d9d9;\n  color: rgba(140, 140, 140, 0.7) !important;\n  width: 100% !important; }\n\n.role-group .condition-radio {\n  width: 100%;\n  text-transform: uppercase; }\n  .role-group .condition-radio .ant-radio-button-checked {\n    background: #9155fd;\n    color: #ffffff; }\n\n.role-group .role-icons {\n  margin-right: 5px; }\n\n.investment-management .role-icon {\n  padding: 0.5rem 0.6rem; }\n\n.investment-management .ant-tag {\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value='Rejected'] + .ant-checkbox-inner {\n  background-color: rgba(237, 77, 71, 0.6);\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value='Cancelled'] + .ant-checkbox-inner {\n  background-color: rgba(58, 53, 65, 0.4);\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value='Accepted'] + .ant-checkbox-inner {\n  background-color: #16b1ff;\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value='Pending'] + .ant-checkbox-inner {\n  background-color: rgba(118, 195, 39, 0.6);\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value='Recognised'] + .ant-checkbox-inner {\n  background-color: #976ed7;\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value='NotRecognised'] + .ant-checkbox-inner {\n  background-color: #ffa070;\n  border: none; }\n";
+var css_248z$j = ".steps-actions {\n  display: flex;\n  flex-direction: row-reverse;\n  margin-right: 1rem;\n  justify-content: flex-start; }\n\n.details-part-two .ant-input-number {\n  width: 50%;\n  margin-left: 15px; }\n\n.investment-title-bar {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 0px 0px 30px 0px; }\n  .investment-title-bar .title {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between; }\n  .investment-title-bar .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n  .investment-title-bar .flex-display {\n    margin-left: 15px; }\n\n.ownership-container {\n  padding: 15px 0px; }\n  .ownership-container .label {\n    color: rgba(58, 53, 65, 0.5); }\n\n.separator {\n  padding: 5px;\n  color: #d8d8d8; }\n\n.role-group .ant-col-13 {\n  max-width: 320px; }\n\n.role-group .condition-radio-container {\n  width: 48%;\n  text-align: center; }\n  .role-group .condition-radio-container .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {\n    color: #ffffff !important;\n    border-color: #9155fd !important;\n    box-shadow: none;\n    max-width: 200px; }\n\n.role-group .ant-radio-button-wrapper::before {\n  background-color: transparent; }\n\n.role-group .anticon {\n  margin-right: 0.5rem; }\n\n.role-group .ant-radio-button-wrapper {\n  border: 1px solid #d9d9d9;\n  color: rgba(140, 140, 140, 0.7) !important;\n  width: 100% !important; }\n\n.role-group .condition-radio {\n  width: 100%;\n  text-transform: uppercase; }\n  .role-group .condition-radio .ant-radio-button-checked {\n    background: #9155fd;\n    color: #ffffff; }\n\n.role-group .role-icons {\n  margin-right: 5px; }\n\n.investment-management .role-icon {\n  padding: 0.5rem 0.6rem; }\n\n.investment-management .ant-tag {\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value=\"Rejected\"] + .ant-checkbox-inner {\n  background-color: rgba(237, 77, 71, 0.6);\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value=\"Cancelled\"] + .ant-checkbox-inner {\n  background-color: rgba(58, 53, 65, 0.4);\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value=\"Accepted\"] + .ant-checkbox-inner {\n  background-color: #16b1ff;\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value=\"Pending\"] + .ant-checkbox-inner {\n  background-color: rgba(118, 195, 39, 0.6);\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value=\"Recognised\"] + .ant-checkbox-inner {\n  background-color: #976ed7;\n  border: none; }\n\n.investment-management .ant-checkbox-checked .ant-checkbox-input[value=\"NotRecognised\"] + .ant-checkbox-inner {\n  background-color: #ffa070;\n  border: none; }\n";
 styleInject(css_248z$j);
 
 var Loading = function () {
@@ -15352,21 +15662,34 @@ var Loading = function () {
 };
 
 var InvestmentCreationComponent = function (props) {
-    var t = props.t, useConnection = props.useConnection, userInfoState = props.userInfoState, useLocation = props.useLocation, onNavigateToProgrammeManagementView = props.onNavigateToProgrammeManagementView, onNavigateToProgrammeView = props.onNavigateToProgrammeView;
+    var t = props.t, useLocation = props.useLocation, onNavigateToProgrammeManagementView = props.onNavigateToProgrammeManagementView, onNavigateToProgrammeView = props.onNavigateToProgrammeView, onNavigateToInvestmentManagementView = props.onNavigateToInvestmentManagementView;
     var state = useLocation().state;
     var _a = React.useState(), data = _a[0], setData = _a[1];
+    var _b = React.useState({}), companyNames = _b[0], setCompanyNames = _b[1];
+    var _c = React.useState({}); _c[0]; var setUserOrganization = _c[1];
+    var _d = React.useState({}), investmentNames = _d[0], setInvestmentNames = _d[1];
+    var _e = React.useState(), projectData = _e[0], setProjectData = _e[1];
+    var _f = React.useState(), investmentData = _f[0], setInvestmentData = _f[1];
+    var _g = React.useState([]), allProjectData = _g[0], setAllProjectData = _g[1];
     var formOne = antd.Form.useForm()[0];
     var formTwo = antd.Form.useForm()[0];
     var post = useConnection().post;
-    var _b = React.useState(false), loading = _b[0], setLoading = _b[1];
-    var _c = React.useState("New"), typeCreation = _c[0], setTypeCreation = _c[1];
-    var _d = React.useState(false), loadingList = _d[0], setLoadingList = _d[1];
-    var _e = React.useState(0), current = _e[0], setCurrent = _e[1];
-    var _f = React.useState(0), currentPercTotal = _f[0], setCurrentPercTotal = _f[1];
-    var _g = React.useState([]), organisationsList = _g[0], setOrganisationList = _g[1];
-    var _h = React.useState([]), instrument = _h[0], setInstrument = _h[1];
-    var _j = React.useState(), stepOneData = _j[0], setStepOneData = _j[1];
-    var _k = React.useState(), govData = _k[0], setGovData = _k[1];
+    var _h = React.useState(false), loading = _h[0], setLoading = _h[1];
+    var _j = React.useState("New"), typeCreation = _j[0], setTypeCreation = _j[1];
+    var _k = React.useState(exports.InvestmentOwnershipType.PROJECT), investmentOwnershipType = _k[0], setInvestmentOwnershipType = _k[1];
+    var _l = React.useState(false), loadingList = _l[0], setLoadingList = _l[1];
+    var _m = React.useState(false), loadingInvestment = _m[0], setLoadingInvestment = _m[1];
+    var _o = React.useState(false), loadingProgData = _o[0], setLoadingProgData = _o[1];
+    var _p = React.useState(0), current = _p[0], setCurrent = _p[1];
+    var _q = React.useState(0), currentPercTotal = _q[0], setCurrentPercTotal = _q[1];
+    var _r = React.useState([]), organisationsList = _r[0], setOrganisationList = _r[1];
+    var _s = React.useState([]), nationalInvestmentList = _s[0], setNationalInvestmentList = _s[1];
+    var _t = React.useState([]), instrument = _t[0], setInstrument = _t[1];
+    var _u = React.useState(), stepOneData = _u[0], setStepOneData = _u[1];
+    var _v = React.useState(), govData = _v[0], setGovData = _v[1];
+    var userInfoState = useUserContext().userInfoState;
+    var _w = React.useState([]), ministrySectoralScope = _w[0], setMinistrySectoralScope = _w[1];
+    var _x = React.useState({}), prevInvestor = _x[0], setPrevInvestor = _x[1];
     var instrumentOptions = Object.keys(exports.Instrument).map(function (k, index) { return ({
         label: addSpaces(Object.values(exports.Instrument)[index]),
         value: Object.values(exports.Instrument)[index],
@@ -15417,52 +15740,215 @@ var InvestmentCreationComponent = function (props) {
             }
         });
     }); };
-    var getOrganisationsDetails = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var filterAnd, _i, _a, c, response, error_2;
+    var getAllProjectData = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoadingProgData(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 5, 6, 7]);
+                    if (!data) return [3 /*break*/, 4];
+                    if (!!(data === null || data === void 0 ? void 0 : data.programmeId)) return [3 /*break*/, 3];
+                    console.log("data non existing", data);
+                    console.log("getting all Project data");
+                    return [4 /*yield*/, post("national/programme/query", {
+                            page: 1,
+                            size: 100,
+                            filterAnd: [
+                                {
+                                    key: "currentStage",
+                                    operation: "!=",
+                                    value: exports.ProgrammeStageUnified.Rejected,
+                                },
+                            ],
+                        })];
+                case 2:
+                    response = _a.sent();
+                    if (response.data) {
+                        setAllProjectData(response === null || response === void 0 ? void 0 : response.data);
+                        console.log("all Project data", response === null || response === void 0 ? void 0 : response.data);
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    console.log("setting current Project data");
+                    setAllProjectData([data]);
+                    _a.label = 4;
+                case 4: return [3 /*break*/, 7];
+                case 5:
+                    error_2 = _a.sent();
+                    console.log("Error in getting all programme data", error_2);
+                    return [3 /*break*/, 7];
+                case 6:
+                    setLoadingProgData(false);
+                    return [7 /*endfinally*/];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    var setSelectedProgramme = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        var _i, allProjectData_1, obj;
+        return __generator(this, function (_a) {
+            console.log("setSelectedProgramme", value);
+            for (_i = 0, allProjectData_1 = allProjectData; _i < allProjectData_1.length; _i++) {
+                obj = allProjectData_1[_i];
+                if (obj.programmeId == value) {
+                    setProjectData(obj);
+                    break;
+                }
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var setSelectedInvestment = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.log("setSelectedInvestment", value);
+            setInvestmentData(investmentNames[value]);
+            return [2 /*return*/];
+        });
+    }); };
+    var getNationalInvestmentDetails = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var filterAnd, response, investmentData_1, _i, _a, investment, error_3;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    setLoadingList(true);
+                    setLoadingInvestment(true);
                     _b.label = 1;
                 case 1:
                     _b.trys.push([1, 3, 4, 5]);
                     filterAnd = [];
                     filterAnd = [
                         {
-                            key: "companyRole",
+                            key: "category",
                             operation: "=",
-                            value: exports.CompanyRole.PROGRAMME_DEVELOPER.toString(),
+                            value: exports.InvestmentOwnershipType.NATIONAL.toString(),
+                        },
+                        {
+                            key: "amount",
+                            operation: ">",
+                            value: 0,
                         },
                     ];
                     if ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.PROGRAMME_DEVELOPER) {
                         filterAnd.push({
-                            key: "companyId",
-                            operation: "!=",
+                            key: "toCompanyId",
+                            operation: "=",
                             value: userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyId,
                         });
                     }
-                    for (_i = 0, _a = data === null || data === void 0 ? void 0 : data.companyId; _i < _a.length; _i++) {
-                        c = _a[_i];
-                        filterAnd.push({
-                            key: "companyId",
-                            operation: "!=",
-                            value: c,
-                        });
-                    }
-                    return [4 /*yield*/, post("national/organisation/queryNames", {
+                    return [4 /*yield*/, post("national/programme/investmentQuery", {
                             page: 1,
                             size: 100,
                             filterAnd: filterAnd,
                         })];
                 case 2:
                     response = _b.sent();
+                    if (response.data) {
+                        setNationalInvestmentList(response === null || response === void 0 ? void 0 : response.data);
+                        investmentData_1 = {};
+                        for (_i = 0, _a = response === null || response === void 0 ? void 0 : response.data; _i < _a.length; _i++) {
+                            investment = _a[_i];
+                            investmentData_1[investment.requestId] = investment;
+                        }
+                        setInvestmentNames(investmentData_1);
+                        console.log(investmentData_1);
+                    }
+                    return [3 /*break*/, 5];
+                case 3:
+                    error_3 = _b.sent();
+                    console.log("Error in getting national Investments list", error_3);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setLoadingInvestment(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var getUserOrganization = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response, error_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, post("national/organisation/query", {
+                            page: 1,
+                            size: 100,
+                            filterAnd: [
+                                { key: "companyId", operation: "=", value: userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyId },
+                            ],
+                        })];
+                case 1:
+                    response = _a.sent();
+                    console.log("getUserOrganization", response.data[0]);
+                    setUserOrganization(response.data[0]);
+                    setMinistrySectoralScope(response.data[0].sectoralScope);
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_4 = _a.sent();
+                    console.log("Error in getting user organization", error_4);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var getOrganisationsDetails = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var filterAnd, filterOr, _i, _a, c, filters, response, companyName, _b, _c, company, error_5;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    setLoadingList(true);
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 3, 4, 5]);
+                    filterAnd = [];
+                    filterOr = [];
+                    filterAnd = [
+                        {
+                            key: "companyRole",
+                            operation: "=",
+                            value: exports.CompanyRole.PROGRAMME_DEVELOPER.toString(),
+                        },
+                    ];
+                    // if (userInfoState?.companyRole === CompanyRole.PROGRAMME_DEVELOPER) {
+                    //   filterAnd.push({
+                    //     key: "companyId",
+                    //     operation: "!=",
+                    //     value: userInfoState?.companyId,
+                    //   });
+                    // }
+                    if (data === null || data === void 0 ? void 0 : data.companyId) {
+                        for (_i = 0, _a = data === null || data === void 0 ? void 0 : data.companyId; _i < _a.length; _i++) {
+                            c = _a[_i];
+                            filterOr.push({
+                                key: "companyId",
+                                operation: "=",
+                                value: c,
+                            });
+                        }
+                    }
+                    filters = void 0;
+                    if (filterOr.length) {
+                        filters.filterOr = filterOr;
+                    }
+                    return [4 /*yield*/, post("national/organisation/queryNames", __assign({ page: 1, size: 100, filterAnd: filterAnd }, filters))];
+                case 2:
+                    response = _d.sent();
                     if (response.data) {
                         setOrganisationList(response === null || response === void 0 ? void 0 : response.data);
+                        companyName = {};
+                        for (_b = 0, _c = response === null || response === void 0 ? void 0 : response.data; _b < _c.length; _b++) {
+                            company = _c[_b];
+                            companyName[Number(company.companyId)] = company.name;
+                        }
+                        setCompanyNames(companyName);
+                        console.log(companyName);
                     }
                     return [3 /*break*/, 5];
                 case 3:
-                    error_2 = _b.sent();
-                    console.log("Error in getting organization list", error_2);
+                    error_5 = _d.sent();
+                    console.log("Error in getting organization list", error_5);
                     return [3 /*break*/, 5];
                 case 4:
                     setLoadingList(false);
@@ -15477,52 +15963,71 @@ var InvestmentCreationComponent = function (props) {
             return;
         }
         if (state === null || state === void 0 ? void 0 : state.record) {
+            console.log("condition 1 data", state === null || state === void 0 ? void 0 : state.record);
             setData(state === null || state === void 0 ? void 0 : state.record);
         }
         else {
+            console.log("condition 2 data", { ownership: true });
             setData({ ownership: true });
         }
     }, []);
     React.useEffect(function () {
-        if (data) {
-            var keys = Object.keys(data);
-            if (keys[0] !== "ownership") {
-                getOrganisationsDetails();
-            }
-        }
+        // if (data) {
+        //   const keys = Object.keys(data);
+        //   if (keys[0] !== "ownership") {
+        //     getOrganisationsDetails();
+        //   }
+        // }
+        getNationalInvestmentDetails();
+        getOrganisationsDetails();
         getGovernmentDetails();
+        getAllProjectData();
+        getUserOrganization();
     }, [data]);
-    if (!data) {
+    if (!data && allProjectData.length == 0) {
         return React.createElement(Loading, null);
     }
-    console.log('data', data);
-    var companyName = {};
+    console.log("data", data);
     if (data && Object.keys(data)[0] !== "ownership") {
-        for (var _i = 0, _l = data === null || data === void 0 ? void 0 : data.company; _i < _l.length; _i++) {
-            var company = _l[_i];
-            companyName[company === null || company === void 0 ? void 0 : company.companyId] = company;
-        }
+        // for (const company of data!?.company) {
+        //   companyName[company?.companyId] = company;
+        // }
         if (!data.proponentPercentage) {
             data.proponentPercentage = [100];
         }
     }
     var nextOne = function (val) {
+        console.log("step 1 values", val);
+        if (val.typeCreation == exports.InvestmentCreationType.EXISTING) {
+            val.toCompanyId = investmentData.toCompanyId;
+        }
         setCurrent(current + 1);
         setStepOneData(val);
+        if (data === null || data === void 0 ? void 0 : data.programmeId)
+            setSelectedProgramme(data.programmeId);
+        if (prevInvestor && prevInvestor != val.toCompanyId && !(data === null || data === void 0 ? void 0 : data.programmeId)) {
+            formTwo.resetFields();
+            setCurrentPercTotal(0);
+            setProjectData(undefined);
+        }
     };
     var prevOne = function () {
         setCurrent(current - 1);
+        setPrevInvestor(stepOneData.toCompanyId);
+        // formTwo.resetFields();
+        // setCurrentPercTotal(0);
+        // setProjectData(undefined);
     };
     var submitInvestment = function (val) { return __awaiter(void 0, void 0, void 0, function () {
-        var payload, response, error_3;
+        var payload, response, error_6;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     console.log(val);
                     console.log(stepOneData);
+                    console.log("OwnershipType", investmentOwnershipType);
                     setLoading(true);
                     payload = stepOneData;
-                    payload.programmeId = data.programmeId;
                     payload.amount = parseFloat(payload.amount);
                     if (payload.interestRate) {
                         payload.interestRate = parseFloat(payload.interestRate);
@@ -15530,15 +16035,27 @@ var InvestmentCreationComponent = function (props) {
                     if (payload.paymentPerMetric) {
                         payload.paymentPerMetric = parseFloat(payload.paymentPerMetric);
                     }
-                    payload.fromCompanyIds = data.companyId.map(function (e) { return Number(e); });
-                    payload.percentage = val.percentage;
                     payload.toCompanyId = Number(payload.toCompanyId);
                     _a.label = 1;
                 case 1:
-                    _a.trys.push([1, 3, 4, 5]);
+                    _a.trys.push([1, 6, 7, 8]);
+                    response = void 0;
+                    if (!(investmentOwnershipType == exports.InvestmentOwnershipType.PROJECT)) return [3 /*break*/, 3];
+                    if (typeCreation == exports.InvestmentCreationType.EXISTING) {
+                        payload.nationalInvestmentId = investmentData.requestId;
+                    }
+                    payload.programmeId = projectData === null || projectData === void 0 ? void 0 : projectData.programmeId;
+                    payload.fromCompanyIds = projectData === null || projectData === void 0 ? void 0 : projectData.companyId.map(function (e) { return Number(e); });
+                    payload.percentage = val.percentage;
                     return [4 /*yield*/, post("national/programme/addInvestment", payload)];
                 case 2:
                     response = _a.sent();
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, post("national/organisation/addInvestment", payload)];
+                case 4:
+                    response = _a.sent();
+                    _a.label = 5;
+                case 5:
                     console.log("investment creation -> ", response);
                     if ((response === null || response === void 0 ? void 0 : response.statusText) === "SUCCESS") {
                         antd.message.open({
@@ -15548,22 +16065,24 @@ var InvestmentCreationComponent = function (props) {
                             style: { textAlign: "right", marginRight: 15, marginTop: 10 },
                         });
                     }
-                    onNavigateToProgrammeView(data.programmeId);
-                    return [3 /*break*/, 5];
-                case 3:
-                    error_3 = _a.sent();
-                    console.log("Error in investment creation - ", error_3);
+                    (data === null || data === void 0 ? void 0 : data.programmeId)
+                        ? onNavigateToProgrammeView(data === null || data === void 0 ? void 0 : data.programmeId)
+                        : onNavigateToInvestmentManagementView();
+                    return [3 /*break*/, 8];
+                case 6:
+                    error_6 = _a.sent();
+                    console.log("Error in investment creation - ", error_6);
                     antd.message.open({
                         type: "error",
-                        content: error_3 === null || error_3 === void 0 ? void 0 : error_3.message,
+                        content: error_6 === null || error_6 === void 0 ? void 0 : error_6.message,
                         duration: 4,
                         style: { textAlign: "right", marginRight: 15, marginTop: 10 },
                     });
-                    return [3 /*break*/, 5];
-                case 4:
+                    return [3 /*break*/, 8];
+                case 7:
                     setLoading(false);
                     return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
+                case 8: return [2 /*return*/];
             }
         });
     }); };
@@ -15575,8 +16094,16 @@ var InvestmentCreationComponent = function (props) {
         }
     };
     var onChangeTypeCreation = function (e) {
-        console.log('radio checked', e.target.value);
+        console.log("radio checked", e.target.value);
         setTypeCreation(e.target.value);
+        formOne.resetFields();
+        formTwo.resetFields();
+        setCurrentPercTotal(0);
+        setProjectData(undefined);
+    };
+    var onChangeInvestmentOwnershipType = function (e) {
+        console.log("investment ownership type radio checked", e.target.value);
+        setInvestmentOwnershipType(e.target.value);
     };
     return (React.createElement("div", { className: "add-programme-main-container" },
         React.createElement("div", { className: "title-container" },
@@ -15601,242 +16128,263 @@ var InvestmentCreationComponent = function (props) {
                                                     ] },
                                                     React.createElement(antd.Radio.Group, { size: "large", defaultValue: typeCreation }, Object.values(exports.InvestmentCreationType).map(function (k, index) { return (React.createElement("div", { className: "condition-radio-container" },
                                                         React.createElement(antd.Radio.Button, { className: "condition-radio", value: k, onChange: onChangeTypeCreation }, t("programme:" + k)))); }))))),
-                                        React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
-                                            React.createElement(antd.Col, { xl: 12, md: 24 },
-                                                React.createElement("div", { className: "details-part-one" },
-                                                    React.createElement(antd.Form.Item, { label: t("programme:investorName"), name: "toCompanyId", wrapperCol: { span: 24 }, className: "organisation", rules: [
-                                                            {
-                                                                required: true,
-                                                                message: "".concat(t("programme:investorName"), " ").concat(t("isRequired")),
-                                                            },
-                                                        ] },
-                                                        React.createElement(antd.Select, { size: "large", loading: loadingList }, organisationsList.map(function (organisation) { return (React.createElement(antd.Select.Option, { key: organisation.companyId, value: organisation.companyId }, organisation.name)); }))))),
-                                            React.createElement(antd.Col, { xl: 12, md: 24 },
-                                                React.createElement("div", { className: "details-part-two" },
-                                                    React.createElement(antd.Form.Item, { label: t("programme:amountInvested"), name: "amount", rules: [
-                                                            {
-                                                                required: true,
-                                                                message: "",
-                                                            },
-                                                            {
-                                                                validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
-                                                                    return __generator(this, function (_a) {
-                                                                        if (String(value).trim() === "" ||
-                                                                            String(value).trim() === undefined ||
-                                                                            value === null ||
-                                                                            value === undefined) {
-                                                                            throw new Error("".concat(t("programme:amountInvested"), " ").concat(t("isRequired")));
-                                                                        }
-                                                                        else if (!isNaN(value) &&
-                                                                            Number(value) > 0) {
-                                                                            return [2 /*return*/, Promise.resolve()];
-                                                                        }
-                                                                        else {
-                                                                            throw new Error("".concat(t("programme:amountInvested"), " ").concat(t("isInvalid")));
-                                                                        }
-                                                                    });
-                                                                }); },
-                                                            },
-                                                        ] },
-                                                        React.createElement(antd.Input, { size: "large" }))))),
-                                        React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
-                                            React.createElement(antd.Col, { xl: 24, md: 24 },
-                                                React.createElement(antd.Form.Item, { label: t("programme:instrument"), name: "instrument", wrapperCol: { span: 24 }, className: "" },
-                                                    React.createElement(antd.Checkbox.Group, { options: instrumentOptions, defaultValue: instrumentOptions.map(function (e) { return e.value; }), onChange: onInstrumentChange })))),
-                                        instrument &&
-                                            instrument.indexOf(exports.Instrument.LOAN) >= 0 && (React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
-                                            React.createElement(antd.Col, { xl: 8, md: 12 },
-                                                React.createElement("div", { className: "details-part-two" },
-                                                    React.createElement(antd.Form.Item, { label: t("programme:interestRate"), name: "interestRate", rules: [
-                                                            {
-                                                                required: true,
-                                                                message: "",
-                                                            },
-                                                            {
-                                                                validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
-                                                                    return __generator(this, function (_a) {
-                                                                        if (String(value).trim() === "" ||
-                                                                            String(value).trim() ===
-                                                                                undefined ||
-                                                                            value === null ||
-                                                                            value === undefined) {
-                                                                            throw new Error("".concat(t("programme:interestRate"), " ").concat(t("isRequired")));
-                                                                        }
-                                                                        else if (!isNaN(value)) {
-                                                                            return [2 /*return*/, Promise.resolve()];
-                                                                        }
-                                                                        else {
-                                                                            throw new Error("".concat(t("programme:interestRate"), " ").concat(t("isInvalid")));
-                                                                        }
-                                                                    });
-                                                                }); },
-                                                            },
-                                                        ] },
-                                                        React.createElement(antd.Input, { size: "large" })))))),
-                                        instrument &&
-                                            instrument.indexOf(exports.Instrument.RESULT_BASED) >= 0 && (React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
-                                            React.createElement(antd.Col, { xl: 12, md: 24 },
-                                                React.createElement("div", { className: "details-part-two" },
-                                                    React.createElement(antd.Form.Item, { label: t("programme:resultMetric"), name: "resultMetric", rules: [
-                                                            {
-                                                                required: true,
-                                                                message: "",
-                                                            },
-                                                            {
-                                                                validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
-                                                                    return __generator(this, function (_a) {
-                                                                        if (String(value).trim() === "" ||
-                                                                            String(value).trim() ===
-                                                                                undefined ||
-                                                                            value === null ||
-                                                                            value === undefined) {
-                                                                            throw new Error("".concat(t("programme:resultMetric"), " ").concat(t("isRequired")));
-                                                                        }
-                                                                        return [2 /*return*/];
-                                                                    });
-                                                                }); },
-                                                            },
-                                                        ] },
-                                                        React.createElement(antd.Input, { size: "large" })))),
-                                            React.createElement(antd.Col, { xl: 12, md: 24 },
-                                                React.createElement("div", { className: "details-part-two" },
-                                                    React.createElement(antd.Form.Item, { label: t("programme:paymentPerMetric"), name: "paymentPerMetric", rules: [
-                                                            {
-                                                                required: true,
-                                                                message: "",
-                                                            },
+                                        typeCreation == exports.InvestmentCreationType.NEW && (React.createElement("div", null,
+                                            React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                    React.createElement("div", { className: "details-part-one" },
+                                                        React.createElement(antd.Form.Item, { label: t("programme:investorName"), name: "toCompanyId", wrapperCol: { span: 24 }, className: "organisation", rules: [
+                                                                {
+                                                                    required: true,
+                                                                    message: "".concat(t("programme:investorName"), " ").concat(t("isRequired")),
+                                                                },
+                                                            ] },
+                                                            React.createElement(antd.Select, { size: "large", loading: loadingList }, organisationsList.map(function (organisation) {
+                                                                if (data === null || data === void 0 ? void 0 : data.programmeId) {
+                                                                    if (data.companyId
+                                                                        .map(function (id) { return Number(id); })
+                                                                        .includes(Number(organisation.companyId))) {
+                                                                        return (React.createElement(antd.Select.Option, { key: organisation.companyId, value: organisation.companyId }, organisation.name));
+                                                                    }
+                                                                }
+                                                                else {
+                                                                    return (React.createElement(antd.Select.Option, { key: organisation.companyId, value: organisation.companyId }, organisation.name));
+                                                                }
+                                                            }))))),
+                                                React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                    React.createElement("div", { className: "details-part-two" },
+                                                        React.createElement(antd.Form.Item, { label: t("programme:amountInvested"), name: "amount", rules: [
+                                                                {
+                                                                    required: true,
+                                                                    message: "",
+                                                                },
+                                                                {
+                                                                    validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
+                                                                        return __generator(this, function (_a) {
+                                                                            if (String(value).trim() === "" ||
+                                                                                String(value).trim() ===
+                                                                                    undefined ||
+                                                                                value === null ||
+                                                                                value === undefined) {
+                                                                                throw new Error("".concat(t("programme:amountInvested"), " ").concat(t("isRequired")));
+                                                                            }
+                                                                            else if (!isNaN(value) &&
+                                                                                Number(value) > 0) {
+                                                                                return [2 /*return*/, Promise.resolve()];
+                                                                            }
+                                                                            else {
+                                                                                throw new Error("".concat(t("programme:amountInvested"), " ").concat(t("isInvalid")));
+                                                                            }
+                                                                        });
+                                                                    }); },
+                                                                },
+                                                            ] },
+                                                            React.createElement(antd.Input, { size: "large" }))))),
+                                            React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                React.createElement(antd.Col, { xl: 24, md: 24 },
+                                                    React.createElement(antd.Form.Item, { label: t("programme:instrument"), name: "instrument", wrapperCol: { span: 24 }, className: "" },
+                                                        React.createElement(antd.Checkbox.Group, { options: instrumentOptions, defaultValue: instrumentOptions.map(function (e) { return e.value; }), onChange: onInstrumentChange })))),
+                                            instrument &&
+                                                instrument.indexOf(exports.Instrument.LOAN) >= 0 && (React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                React.createElement(antd.Col, { xl: 8, md: 12 },
+                                                    React.createElement("div", { className: "details-part-two" },
+                                                        React.createElement(antd.Form.Item, { label: t("programme:interestRate"), name: "interestRate", rules: [
+                                                                {
+                                                                    required: true,
+                                                                    message: "",
+                                                                },
+                                                                {
+                                                                    validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
+                                                                        return __generator(this, function (_a) {
+                                                                            if (String(value).trim() === "" ||
+                                                                                String(value).trim() ===
+                                                                                    undefined ||
+                                                                                value === null ||
+                                                                                value === undefined) {
+                                                                                throw new Error("".concat(t("programme:interestRate"), " ").concat(t("isRequired")));
+                                                                            }
+                                                                            else if (!isNaN(value)) {
+                                                                                return [2 /*return*/, Promise.resolve()];
+                                                                            }
+                                                                            else {
+                                                                                throw new Error("".concat(t("programme:interestRate"), " ").concat(t("isInvalid")));
+                                                                            }
+                                                                        });
+                                                                    }); },
+                                                                },
+                                                            ] },
+                                                            React.createElement(antd.Input, { size: "large" })))))),
+                                            instrument &&
+                                                instrument.indexOf(exports.Instrument.RESULT_BASED) >=
+                                                    0 && (React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                    React.createElement("div", { className: "details-part-two" },
+                                                        React.createElement(antd.Form.Item, { label: t("programme:resultMetric"), name: "resultMetric", rules: [
+                                                                {
+                                                                    required: true,
+                                                                    message: "",
+                                                                },
+                                                                {
+                                                                    validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
+                                                                        return __generator(this, function (_a) {
+                                                                            if (String(value).trim() === "" ||
+                                                                                String(value).trim() ===
+                                                                                    undefined ||
+                                                                                value === null ||
+                                                                                value === undefined) {
+                                                                                throw new Error("".concat(t("programme:resultMetric"), " ").concat(t("isRequired")));
+                                                                            }
+                                                                            return [2 /*return*/];
+                                                                        });
+                                                                    }); },
+                                                                },
+                                                            ] },
+                                                            React.createElement(antd.Input, { size: "large" })))),
+                                                React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                    React.createElement("div", { className: "details-part-two" },
+                                                        React.createElement(antd.Form.Item, { label: t("programme:paymentPerMetric"), name: "paymentPerMetric", rules: [
+                                                                {
+                                                                    required: true,
+                                                                    message: "",
+                                                                },
+                                                                {
+                                                                    validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
+                                                                        return __generator(this, function (_a) {
+                                                                            if (String(value).trim() === "" ||
+                                                                                String(value).trim() ===
+                                                                                    undefined ||
+                                                                                value === null ||
+                                                                                value === undefined) {
+                                                                                throw new Error("".concat(t("programme:paymentPerMetric"), " ").concat(t("isRequired")));
+                                                                            }
+                                                                            else if (!isNaN(value)) {
+                                                                                return [2 /*return*/, Promise.resolve()];
+                                                                            }
+                                                                            else {
+                                                                                throw new Error("".concat(t("programme:paymentPerMetric"), " ").concat(t("isInvalid")));
+                                                                            }
+                                                                        });
+                                                                    }); },
+                                                                },
+                                                            ] },
+                                                            React.createElement(antd.Input, { size: "large" })))))),
+                                            instrument &&
+                                                instrument.indexOf(exports.Instrument.INKIND) >= 0 && (React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                    React.createElement("div", { className: "details-part-two" },
+                                                        React.createElement(antd.Form.Item, { label: t("programme:description"), name: "description", rules: [
+                                                                {
+                                                                    required: false,
+                                                                    message: "",
+                                                                },
+                                                            ] },
+                                                            React.createElement(antd.Input, { size: "large" })))))),
+                                            instrument &&
+                                                instrument.indexOf(exports.Instrument.OTHER) >= 0 && (React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                    React.createElement("div", { className: "details-part-two" },
+                                                        React.createElement(antd.Form.Item, { label: t("programme:comments"), name: "comments", rules: [
+                                                                {
+                                                                    required: true,
+                                                                    message: "",
+                                                                },
+                                                                {
+                                                                    validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
+                                                                        return __generator(this, function (_a) {
+                                                                            if (String(value).trim() === "" ||
+                                                                                String(value).trim() ===
+                                                                                    undefined ||
+                                                                                value === null ||
+                                                                                value === undefined) {
+                                                                                throw new Error("".concat(t("programme:comments"), " ").concat(t("isRequired")));
+                                                                            }
+                                                                            return [2 /*return*/];
+                                                                        });
+                                                                    }); },
+                                                                },
+                                                            ] },
+                                                            React.createElement(antd.Input, { size: "large" })))))),
+                                            React.createElement(antd.Row, { className: "row", gutter: [4, 4] },
+                                                React.createElement(antd.Col, { xl: 8, md: 12 },
+                                                    React.createElement(antd.Form.Item, { label: t("programme:type"), wrapperCol: { span: 13 }, className: "role-group", name: "type", rules: [
                                                             {
-                                                                validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
-                                                                    return __generator(this, function (_a) {
-                                                                        if (String(value).trim() === "" ||
-                                                                            String(value).trim() ===
-                                                                                undefined ||
-                                                                            value === null ||
-                                                                            value === undefined) {
-                                                                            throw new Error("".concat(t("programme:paymentPerMetric"), " ").concat(t("isRequired")));
-                                                                        }
-                                                                        else if (!isNaN(value)) {
-                                                                            return [2 /*return*/, Promise.resolve()];
-                                                                        }
-                                                                        else {
-                                                                            throw new Error("".concat(t("programme:paymentPerMetric"), " ").concat(t("isInvalid")));
-                                                                        }
-                                                                    });
-                                                                }); },
+                                                                required: false,
                                                             },
                                                         ] },
-                                                        React.createElement(antd.Input, { size: "large" })))))),
-                                        instrument &&
-                                            instrument.indexOf(exports.Instrument.INKIND) >= 0 && (React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
-                                            React.createElement(antd.Col, { xl: 12, md: 24 },
-                                                React.createElement("div", { className: "details-part-two" },
-                                                    React.createElement(antd.Form.Item, { label: t("programme:description"), name: "description", rules: [
+                                                        React.createElement(antd.Radio.Group, { size: "large" }, Object.values(exports.InvestmentType).map(function (k, index) { return (React.createElement("div", { className: "condition-radio-container" },
+                                                            React.createElement(antd.Radio.Button, { className: "condition-radio", value: k, onClick: function (e) {
+                                                                    return deselectOnClick(e, "type");
+                                                                } }, t("programme:" + k)))); })))),
+                                                React.createElement(antd.Col, { xl: 8, md: 12 },
+                                                    React.createElement(antd.Form.Item, { label: t("programme:level"), wrapperCol: { span: 13 }, className: "role-group", name: "level", rules: [
                                                             {
                                                                 required: false,
-                                                                message: "",
                                                             },
                                                         ] },
-                                                        React.createElement(antd.Input, { size: "large" })))))),
-                                        instrument &&
-                                            instrument.indexOf(exports.Instrument.OTHER) >= 0 && (React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
-                                            React.createElement(antd.Col, { xl: 12, md: 24 },
-                                                React.createElement("div", { className: "details-part-two" },
-                                                    React.createElement(antd.Form.Item, { label: t("programme:comments"), name: "comments", rules: [
-                                                            {
-                                                                required: true,
-                                                                message: "",
-                                                            },
+                                                        React.createElement(antd.Radio.Group, { size: "large" }, Object.values(exports.InvestmentLevel).map(function (k, index) { return (React.createElement("div", { className: "condition-radio-container" },
+                                                            React.createElement(antd.Radio.Button, { className: "condition-radio", value: k, onClick: function (e) {
+                                                                    return deselectOnClick(e, "level");
+                                                                } }, t("programme:" + k)))); })))),
+                                                React.createElement(antd.Col, { xl: 8, md: 12 },
+                                                    React.createElement(antd.Form.Item, { label: t("programme:stream"), wrapperCol: { span: 13 }, className: "role-group", name: "stream", rules: [
                                                             {
-                                                                validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
-                                                                    return __generator(this, function (_a) {
-                                                                        if (String(value).trim() === "" ||
-                                                                            String(value).trim() ===
-                                                                                undefined ||
-                                                                            value === null ||
-                                                                            value === undefined) {
-                                                                            throw new Error("".concat(t("programme:comments"), " ").concat(t("isRequired")));
-                                                                        }
-                                                                        return [2 /*return*/];
-                                                                    });
-                                                                }); },
+                                                                required: false,
                                                             },
                                                         ] },
-                                                        React.createElement(antd.Input, { size: "large" })))))),
-                                        React.createElement(antd.Row, { className: "row", gutter: [4, 4] },
-                                            React.createElement(antd.Col, { xl: 8, md: 12 },
-                                                React.createElement(antd.Form.Item, { label: t("programme:type"), wrapperCol: { span: 13 }, className: "role-group", name: "type", rules: [
-                                                        {
-                                                            required: false,
-                                                        },
-                                                    ] },
-                                                    React.createElement(antd.Radio.Group, { size: "large" }, Object.values(exports.InvestmentType).map(function (k, index) { return (React.createElement("div", { className: "condition-radio-container" },
-                                                        React.createElement(antd.Radio.Button, { className: "condition-radio", value: k, onClick: function (e) {
-                                                                return deselectOnClick(e, "type");
-                                                            } }, t("programme:" + k)))); })))),
-                                            React.createElement(antd.Col, { xl: 8, md: 12 },
-                                                React.createElement(antd.Form.Item, { label: t("programme:level"), wrapperCol: { span: 13 }, className: "role-group", name: "level", rules: [
-                                                        {
-                                                            required: false,
-                                                        },
-                                                    ] },
-                                                    React.createElement(antd.Radio.Group, { size: "large" }, Object.values(exports.InvestmentLevel).map(function (k, index) { return (React.createElement("div", { className: "condition-radio-container" },
-                                                        React.createElement(antd.Radio.Button, { className: "condition-radio", value: k, onClick: function (e) {
-                                                                return deselectOnClick(e, "level");
-                                                            } }, t("programme:" + k)))); })))),
-                                            React.createElement(antd.Col, { xl: 8, md: 12 },
-                                                React.createElement(antd.Form.Item, { label: t("programme:stream"), wrapperCol: { span: 13 }, className: "role-group", name: "stream", rules: [
-                                                        {
-                                                            required: false,
-                                                        },
-                                                    ] },
-                                                    React.createElement(antd.Radio.Group, { size: "large" }, Object.values(exports.InvestmentStream).map(function (k, index) { return (React.createElement("div", { className: "condition-radio-container" },
-                                                        React.createElement(antd.Radio.Button, { className: "condition-radio", value: k, onClick: function (e) {
-                                                                return deselectOnClick(e, "stream");
-                                                            } }, t("programme:" + k)))); }))))),
-                                        React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
-                                            React.createElement(antd.Col, { xl: 12, md: 24 },
-                                                React.createElement(antd.Form.Item, { label: t("programme:esgType"), name: "esgClassification" },
-                                                    React.createElement(antd.Select, { size: "large" }, Object.values(exports.ESGType).map(function (esg) { return (React.createElement(antd.Select.Option, { value: esg }, esg)); }))))),
-                                        React.createElement(antd.Form.Item, null,
-                                            React.createElement("div", { className: "steps-actions" },
-                                                React.createElement(antd.Button, { type: "primary", htmlType: "submit", loading: loading, onSubmit: nextOne }, t("programme:next")))))))),
-                        },
-                        {
-                            title: (React.createElement("div", { className: "step-title-container" },
-                                React.createElement("div", { className: "step-count" }, "02"),
-                                React.createElement("div", { className: "title" }, t("programme:ownership")))),
-                            description: current === 1 && (React.createElement("div", null,
-                                React.createElement("div", { className: "programme-sought-form-container ownership-container" }, Object.keys(data).length > 0 &&
-                                    React.createElement("div", { className: "programme-sought-form" },
-                                        React.createElement(antd.Form, { labelCol: { span: 20 }, wrapperCol: { span: 24 }, form: formTwo, name: "investment-sought", className: "investment-sought-form", layout: "vertical", requiredMark: true, onChange: onPercentageChange, onFinish: submitInvestment }, data === null || data === void 0 ? void 0 :
-                                            data.companyId.map(function (companyId, index) {
-                                                return (React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
-                                                    React.createElement(antd.Col, { xl: 8, md: 15 },
-                                                        React.createElement("div", { className: "label" },
-                                                            companyName[companyId].name,
-                                                            React.createElement("span", { className: "required-mark" }, "*"))),
-                                                    React.createElement(antd.Col, { xl: 8, md: 9 },
-                                                        React.createElement(antd.Form.Item, { className: "inline", name: ["percentage", index], initialValue: 0, rules: [
+                                                        React.createElement(antd.Radio.Group, { size: "large" }, Object.values(exports.InvestmentStream).map(function (k, index) { return (React.createElement("div", { className: "condition-radio-container" },
+                                                            React.createElement(antd.Radio.Button, { className: "condition-radio", value: k, onClick: function (e) {
+                                                                    return deselectOnClick(e, "stream");
+                                                                } }, t("programme:" + k)))); }))))),
+                                            React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                    React.createElement(antd.Form.Item, { label: t("programme:esgType"), name: "esgClassification" },
+                                                        React.createElement(antd.Select, { size: "large" }, Object.values(exports.ESGType).map(function (esg) { return (React.createElement(antd.Select.Option, { value: esg }, esg)); }))))))),
+                                        typeCreation == exports.InvestmentCreationType.EXISTING && (React.createElement("div", null,
+                                            React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                    React.createElement("div", { className: "details-part-one" },
+                                                        React.createElement(antd.Form.Item, { label: t("programme:existingInvestmentSource"), name: "existinngInvestmentId", wrapperCol: { span: 24 }, rules: [
                                                                 {
-                                                                    pattern: new RegExp(/^[+]?([.]\d+|\d+[.]?\d*)$/g),
-                                                                    message: "Percentage Should be a positive number",
+                                                                    required: true,
+                                                                    message: "".concat(t("programme:existingInvestmentSource"), " ").concat(t("isRequired")),
                                                                 },
+                                                            ] },
+                                                            React.createElement(antd.Select, { size: "large", loading: loadingInvestment, onChange: setSelectedInvestment }, nationalInvestmentList.map(function (investment) { return (React.createElement(antd.Select.Option, { key: investment.requestId, value: investment.requestId }, investment.investmentName)); })))))),
+                                            React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                    React.createElement("div", { className: "details-part-two" },
+                                                        React.createElement(antd.Form.Item, { label: t("programme:amountInvested"), name: "amount", rules: [
                                                                 {
                                                                     required: true,
-                                                                    message: "Required field",
+                                                                    message: "",
+                                                                },
+                                                                {
+                                                                    validator: function (rule, value) { return __awaiter(void 0, void 0, void 0, function () {
+                                                                        return __generator(this, function (_a) {
+                                                                            if (String(value).trim() === "" ||
+                                                                                String(value).trim() ===
+                                                                                    undefined ||
+                                                                                value === null ||
+                                                                                value === undefined) {
+                                                                                throw new Error("".concat(t("programme:amountInvested"), " ").concat(t("isRequired")));
+                                                                            }
+                                                                            else if (!isNaN(value) &&
+                                                                                Number(value) > 0) {
+                                                                                return [2 /*return*/, Promise.resolve()];
+                                                                            }
+                                                                            else {
+                                                                                throw new Error("".concat(t("programme:amountInvested"), " ").concat(t("isInvalid")));
+                                                                            }
+                                                                        });
+                                                                    }); },
                                                                 },
                                                                 function (_a) {
                                                                     var getFieldValue = _a.getFieldValue;
                                                                     return ({
                                                                         validator: function (rule, v) {
-                                                                            if (getFieldValue([
-                                                                                "percentage",
-                                                                                index,
-                                                                            ]) &&
-                                                                                parseFloat(getFieldValue([
-                                                                                    "percentage",
-                                                                                    index,
-                                                                                ])) > data.proponentPercentage[index]) {
+                                                                            if (getFieldValue("amount") &&
+                                                                                investmentData &&
+                                                                                investmentData.amount <
+                                                                                    parseFloat(getFieldValue("amount"))) {
                                                                                 // eslint-disable-next-line prefer-promise-reject-errors
                                                                                 return Promise.reject("Amount > Available");
                                                                             }
@@ -15845,30 +16393,178 @@ var InvestmentCreationComponent = function (props) {
                                                                     });
                                                                 },
                                                             ] },
-                                                            React.createElement(antd.InputNumber, { placeholder: "", controls: false, disabled: govData.companyId == companyId, 
-                                                                // disabled={userInfoState?.companyId === Number(companyId)}
-                                                                onKeyPress: function (event) {
-                                                                    if (!/[0-9\.]/.test(event.key)) {
-                                                                        event.preventDefault();
-                                                                    }
-                                                                } })),
-                                                        React.createElement("div", { className: "inline separator" }, "/"),
-                                                        React.createElement(antd.Form.Item, { className: "inline" },
-                                                            React.createElement(antd.InputNumber, { placeholder: String(data === null || data === void 0 ? void 0 : data.proponentPercentage[index]), disabled: true })))));
-                                            }),
-                                            React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
-                                                React.createElement(antd.Col, { xl: 8, md: 15 },
-                                                    React.createElement("div", { className: "label" }, t("programme:total"))),
-                                                React.createElement(antd.Col, { xl: 8, md: 9 },
-                                                    React.createElement(antd.Form.Item, { className: "inline", name: ["total"] },
-                                                        React.createElement(antd.InputNumber, { placeholder: currentPercTotal + "", controls: false, disabled: true, onKeyPress: function (event) {
-                                                                if (!/[0-9\.]/.test(event.key)) {
-                                                                    event.preventDefault();
-                                                                }
-                                                            } })),
-                                                    React.createElement("div", { className: "inline separator" }, "/"),
-                                                    React.createElement(antd.Form.Item, { className: "inline" },
-                                                        React.createElement(antd.InputNumber, { disabled: true, placeholder: "100" })))),
+                                                            React.createElement(antd.Input, { size: "large" })))),
+                                                React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                    React.createElement("div", { className: "details-part-two" },
+                                                        React.createElement(antd.Form.Item, { label: " ", name: "sourceAmount" },
+                                                            React.createElement("div", null,
+                                                                "/",
+                                                                React.createElement(antd.InputNumber, { size: "large", width: "100%", formatter: function (value) {
+                                                                        return "$".concat(addCommSep(value));
+                                                                    }, disabled: true, value: investmentData
+                                                                        ? investmentData.amount
+                                                                        : 0 })))))))),
+                                        React.createElement(antd.Form.Item, null,
+                                            React.createElement("div", { className: "steps-actions" },
+                                                React.createElement(antd.Button, { type: "primary", htmlType: "submit", loading: loading, onSubmit: nextOne }, t("programme:next")))))))),
+                        },
+                        {
+                            title: (React.createElement("div", { className: "step-title-container" },
+                                React.createElement("div", { className: "step-count" }, "02"),
+                                React.createElement("div", { className: "title" }, t("programme:ownership")))),
+                            description: current === 1 && (React.createElement("div", null,
+                                React.createElement("div", { className: "investment-sought-form-container" },
+                                    React.createElement("div", { className: "investment-sought-form" },
+                                        React.createElement(antd.Form, { labelCol: { span: 20 }, wrapperCol: { span: 24 }, name: "investment-sought", className: "investment-sought-form", layout: "vertical", requiredMark: true },
+                                            React.createElement(antd.Row, { className: "row", gutter: [4, 4] },
+                                                React.createElement(antd.Col, { xl: 8, md: 12 },
+                                                    React.createElement(antd.Form.Item, { label: t("programme:typeCreation"), wrapperCol: { span: 13 }, className: "role-group", name: "investmentOwnershipType", rules: [
+                                                            {
+                                                                required: false,
+                                                            },
+                                                        ] },
+                                                        React.createElement(antd.Radio.Group, { size: "large", defaultValue: typeCreation ==
+                                                                exports.InvestmentCreationType.EXISTING
+                                                                ? exports.InvestmentOwnershipType.PROJECT
+                                                                : investmentOwnershipType }, Object.values(exports.InvestmentOwnershipType).map(function (k, index) {
+                                                            if (!(typeCreation ==
+                                                                exports.InvestmentCreationType.EXISTING &&
+                                                                k == exports.InvestmentOwnershipType.NATIONAL) &&
+                                                                !(k ==
+                                                                    exports.InvestmentOwnershipType.NATIONAL &&
+                                                                    (data === null || data === void 0 ? void 0 : data.programmeId))) {
+                                                                return (React.createElement("div", { className: "condition-radio-container" },
+                                                                    React.createElement(antd.Tooltip, { title: (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) ==
+                                                                            exports.CompanyRole.PROGRAMME_DEVELOPER &&
+                                                                            stepOneData.toCompanyId !=
+                                                                                userInfoState.companyId &&
+                                                                            k ==
+                                                                                exports.InvestmentOwnershipType.NATIONAL
+                                                                            ? "This action is unauthorized due to the selected investor name."
+                                                                            : "", color: TooltipColor, key: TooltipColor },
+                                                                        React.createElement(antd.Radio.Button, { className: "condition-radio", value: k, onChange: onChangeInvestmentOwnershipType, disabled: (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) ==
+                                                                                exports.CompanyRole.PROGRAMME_DEVELOPER &&
+                                                                                stepOneData.toCompanyId !=
+                                                                                    userInfoState.companyId &&
+                                                                                k ==
+                                                                                    exports.InvestmentOwnershipType.NATIONAL }, t("programme:" + k)))));
+                                                            }
+                                                        })))))))),
+                                React.createElement("div", { className: "programme-sought-form-container ownership-container" },
+                                    React.createElement("div", { className: "programme-sought-form" },
+                                        React.createElement(antd.Form, { labelCol: { span: 20 }, wrapperCol: { span: 24 }, form: formTwo, name: "investment-sought", className: "investment-sought-form", layout: "vertical", requiredMark: true, onChange: onPercentageChange, onFinish: submitInvestment },
+                                            allProjectData.length > 0 &&
+                                                investmentOwnershipType ==
+                                                    exports.InvestmentOwnershipType.PROJECT && (React.createElement("div", null,
+                                                React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                    React.createElement(antd.Col, { xl: 12, md: 24 },
+                                                        React.createElement("div", { className: "details-part-one" },
+                                                            React.createElement(antd.Form.Item, { label: t("programme:title"), name: "projectId", wrapperCol: { span: 24 }, initialValue: (data === null || data === void 0 ? void 0 : data.programmeId) != undefined
+                                                                    ? allProjectData[0].programmeId
+                                                                    : null, rules: [
+                                                                    {
+                                                                        required: true,
+                                                                        message: "".concat(t("programme:title"), " ").concat(t("isRequired")),
+                                                                    },
+                                                                ] },
+                                                                React.createElement(antd.Select, { size: "large", loading: loadingProgData, 
+                                                                    // defaultValue={
+                                                                    //   allProjectData.length == 1
+                                                                    //     ? allProjectData[0].programmeId
+                                                                    //     : null
+                                                                    // }
+                                                                    disabled: allProjectData.length == 1 &&
+                                                                        (data === null || data === void 0 ? void 0 : data.programmeId) != undefined, onChange: setSelectedProgramme }, allProjectData.map(function (project) {
+                                                                    if ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) ==
+                                                                        exports.CompanyRole.PROGRAMME_DEVELOPER &&
+                                                                        Number(stepOneData.toCompanyId) !=
+                                                                            userInfoState.companyId) {
+                                                                        if (project.companyId
+                                                                            .map(function (id) { return Number(id); })
+                                                                            .includes(userInfoState.companyId)) {
+                                                                            return (React.createElement(antd.Select.Option, { key: project.programmeId, value: project.programmeId }, project.title));
+                                                                        }
+                                                                    }
+                                                                    else if ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) ===
+                                                                        exports.CompanyRole.MINISTRY) {
+                                                                        if (ministrySectoralScope.includes(project.sectoralScope)) {
+                                                                            return (React.createElement(antd.Select.Option, { key: project.programmeId, value: project.programmeId }, project.title));
+                                                                        }
+                                                                    }
+                                                                    else {
+                                                                        return (React.createElement(antd.Select.Option, { key: project.programmeId, value: project.programmeId }, project.title));
+                                                                    }
+                                                                })))))), projectData === null || projectData === void 0 ? void 0 :
+                                                projectData.companyId.map(function (companyId, index) {
+                                                    if (formTwo.getFieldValue("percentage") &&
+                                                        formTwo.getFieldValue("percentage")[index] &&
+                                                        companyId == stepOneData.toCompanyId) {
+                                                        formTwo.getFieldValue("percentage")[index] = 0;
+                                                    }
+                                                    return (React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                        React.createElement(antd.Col, { xl: 8, md: 15 },
+                                                            React.createElement("div", { className: "label" },
+                                                                companyNames[Number(companyId)],
+                                                                React.createElement("span", { className: "required-mark" }, "*"))),
+                                                        React.createElement(antd.Col, { xl: 8, md: 9 },
+                                                            React.createElement(antd.Form.Item, { className: "inline", name: ["percentage", index], initialValue: 0, rules: [
+                                                                    {
+                                                                        pattern: new RegExp(/^[+]?([.]\d+|\d+[.]?\d*)$/g),
+                                                                        message: "Percentage Should be a positive number",
+                                                                    },
+                                                                    {
+                                                                        required: true,
+                                                                        message: "Required field",
+                                                                    },
+                                                                    function (_a) {
+                                                                        var getFieldValue = _a.getFieldValue;
+                                                                        return ({
+                                                                            validator: function (rule, v) {
+                                                                                if (getFieldValue([
+                                                                                    "percentage",
+                                                                                    index,
+                                                                                ]) &&
+                                                                                    parseFloat(getFieldValue([
+                                                                                        "percentage",
+                                                                                        index,
+                                                                                    ])) >
+                                                                                        projectData
+                                                                                            .proponentPercentage[index]) {
+                                                                                    // eslint-disable-next-line prefer-promise-reject-errors
+                                                                                    return Promise.reject("Amount > Available");
+                                                                                }
+                                                                                return Promise.resolve();
+                                                                            },
+                                                                        });
+                                                                    },
+                                                                ] },
+                                                                React.createElement(antd.InputNumber, { placeholder: "", controls: false, disabled: govData.companyId ==
+                                                                        companyId ||
+                                                                        companyId ==
+                                                                            stepOneData.toCompanyId, value: 0, 
+                                                                    // disabled={userInfoState?.companyId === Number(companyId)}
+                                                                    onKeyPress: function (event) {
+                                                                        if (!/[0-9\.]/.test(event.key)) {
+                                                                            event.preventDefault();
+                                                                        }
+                                                                    } })),
+                                                            React.createElement("div", { className: "inline separator" }, "/"),
+                                                            React.createElement(antd.Form.Item, { className: "inline" },
+                                                                React.createElement(antd.InputNumber, { placeholder: String(projectData === null || projectData === void 0 ? void 0 : projectData.proponentPercentage[index]), disabled: true })))));
+                                                }),
+                                                React.createElement(antd.Row, { className: "row", gutter: [16, 16] },
+                                                    React.createElement(antd.Col, { xl: 8, md: 15 },
+                                                        React.createElement("div", { className: "label" }, t("programme:total"))),
+                                                    React.createElement(antd.Col, { xl: 8, md: 9 },
+                                                        React.createElement(antd.Form.Item, { className: "inline", name: ["total"] },
+                                                            React.createElement(antd.InputNumber, { placeholder: currentPercTotal + "", controls: false, disabled: true, onKeyPress: function (event) {
+                                                                    if (!/[0-9\.]/.test(event.key)) {
+                                                                        event.preventDefault();
+                                                                    }
+                                                                } })),
+                                                        React.createElement("div", { className: "inline separator" }, "/"),
+                                                        React.createElement(antd.Form.Item, { className: "inline" },
+                                                            React.createElement(antd.InputNumber, { disabled: true, placeholder: "100" })))))),
                                             React.createElement(antd.Form.Item, null,
                                                 React.createElement("div", { className: "steps-actions" },
                                                     React.createElement(antd.Button, { type: "primary", htmlType: "submit", loading: loading, onSubmit: submitInvestment }, t("programme:submit")),
@@ -15983,7 +16679,7 @@ var InvestmentActionModel = function (props) {
 };
 
 var InvestmentManagementComponent = function (props) {
-    var translator = props.translator, useConnection = props.useConnection, onNavigateToProgrammeView = props.onNavigateToProgrammeView, useUserContext = props.useUserContext, useSettingsContext = props.useSettingsContext, onClickAddOwnership = props.onClickAddOwnership, enableAddOwnership = props.enableAddOwnership;
+    var translator = props.translator, onNavigateToProgrammeView = props.onNavigateToProgrammeView, onClickAddOwnership = props.onClickAddOwnership, enableAddOwnership = props.enableAddOwnership;
     var t = translator.t;
     var statusOptions = Object.keys(exports.InvestmentStatus).map(function (k, index) { return ({
         label: addSpaces(Object.values(exports.InvestmentStatus)[index]),
@@ -16321,7 +17017,10 @@ var InvestmentManagementComponent = function (props) {
             sorter: true,
             align: "left",
             render: function (item) {
-                return React.createElement("span", { className: "clickable" }, item);
+                if (item) {
+                    return React.createElement("span", { className: "clickable" }, item);
+                }
+                return React.createElement("span", null, "-");
             },
             onCell: function (record, rowIndex) {
                 return {
@@ -16379,6 +17078,12 @@ var InvestmentManagementComponent = function (props) {
             key: "programmeSector",
             sorter: true,
             align: "left",
+            render: function (item) {
+                if (item) {
+                    return React.createElement("span", null, item);
+                }
+                return React.createElement("span", null, "-");
+            },
         },
         {
             title: t("programme:investor"),
@@ -16462,7 +17167,11 @@ var InvestmentManagementComponent = function (props) {
             React.createElement("div", { className: "title-bar" },
                 React.createElement("div", { className: "body-title" }, t("programme:investmentTitle")),
                 React.createElement("div", { className: "body-sub-title" }, t("programme:investmentDesc"))),
-            React.createElement("div", { className: "actions" }, enableAddOwnership && (React.createElement("div", { className: "action-bar" },
+            React.createElement("div", { className: "actions" }, enableAddOwnership &&
+                ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) == exports.CompanyRole.MINISTRY ||
+                    (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) == exports.CompanyRole.GOVERNMENT ||
+                    (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) == exports.CompanyRole.PROGRAMME_DEVELOPER) &&
+                userInfoState.userRole != exports.Role.ViewOnly && (React.createElement("div", { className: "action-bar" },
                 React.createElement(antd.Button, { type: "primary", size: "large", block: true, icon: React.createElement(icons.PlusOutlined, null), onClick: onClickAddOwnership }, t("programme:addOwnership")))))),
         React.createElement("div", { className: "content-card" },
             React.createElement(antd.Row, null,
@@ -16503,7 +17212,7 @@ var InvestmentManagementComponent = function (props) {
                                 return handleTableChange(val, sorter);
                             }, locale: {
                                 emptyText: (React.createElement(antd.Empty, { image: antd.Empty.PRESENTED_IMAGE_SIMPLE, description: tableData.length === 0
-                                        ? t("creditTransfer:noTransfer")
+                                        ? t("programme:noInvestmentData")
                                         : null })),
                             } }))))),
         popupInfo && selectedReq && (React.createElement(InvestmentActionModel, { investment: selectedReq, onCancel: function () {
@@ -16516,7 +17225,7 @@ var css_248z$i = ".steps-actions {\n  display: flex;\n  flex-direction: row-reve
 styleInject(css_248z$i);
 
 var SupportCreationComponent = function (props) {
-    var t = props.t, useConnection = props.useConnection, userInfoState = props.userInfoState, useLocation = props.useLocation; props.onNavigateToProgrammeManagementView; props.onNavigateToProgrammeView;
+    var t = props.t, useLocation = props.useLocation; props.onNavigateToProgrammeManagementView; props.onNavigateToProgrammeView;
     useLocation().state;
     var _a = React.useState(); _a[0]; _a[1];
     var formOne = antd.Form.useForm()[0];
@@ -16529,6 +17238,7 @@ var SupportCreationComponent = function (props) {
     var _f = React.useState([]), organisationsList = _f[0], setOrganisationList = _f[1];
     var _g = React.useState([]), instrument = _g[0], setInstrument = _g[1];
     var _h = React.useState(); _h[0]; var setStepOneData = _h[1];
+    var userInfoState = useUserContext().userInfoState;
     var instrumentOptions = Object.keys(exports.Instrument).map(function (k, index) { return ({
         label: addSpaces(Object.values(exports.Instrument)[index]),
         value: Object.values(exports.Instrument)[index],
@@ -16871,7 +17581,7 @@ var SupportCreationComponent = function (props) {
 };
 
 var SupportManagementComponent = function (props) {
-    var translator = props.translator, useConnection = props.useConnection; props.onNavigateToProgrammeView; var useUserContext = props.useUserContext, useSettingsContext = props.useSettingsContext, enableAddSupport = props.enableAddSupport, onClickAddSupport = props.onClickAddSupport;
+    var translator = props.translator; props.onNavigateToProgrammeView; var enableAddSupport = props.enableAddSupport, onClickAddSupport = props.onClickAddSupport;
     var t = translator.t;
     var statusOptions = Object.keys(exports.InvestmentStatus).map(function (k, index) { return ({
         label: addSpaces(Object.values(exports.InvestmentStatus)[index]),
@@ -17373,7 +18083,7 @@ var css_248z$h = ".ndc-management .ant-checkbox-checked .ant-checkbox-input[valu
 styleInject(css_248z$h);
 
 var NdcActionManagementComponent = function (props) {
-    var t = props.t, useConnection = props.useConnection, useUserContext = props.useUserContext, onNavigateToNdcManagementView = props.onNavigateToNdcManagementView, onNavigateToProgrammeManagementView = props.onNavigateToProgrammeManagementView;
+    var t = props.t, onNavigateToNdcManagementView = props.onNavigateToNdcManagementView, onNavigateToProgrammeManagementView = props.onNavigateToProgrammeManagementView;
     var _a = React.useState(true), checkAll = _a[0], setCheckAll = _a[1];
     var _b = React.useState([]), tableData = _b[0], setTableData = _b[1];
     var _c = React.useState(), totalProgramme = _c[0], setTotalProgramme = _c[1];
@@ -18732,7 +19442,7 @@ var GenderParity = function (props) {
 };
 
 var Assessment = function (props) {
-    var onFormSubmit = props.onFormSubmit, assessmentViewData = props.assessmentViewData, viewOnly = props.viewOnly, useConnection = props.useConnection, translator = props.translator;
+    var onFormSubmit = props.onFormSubmit, assessmentViewData = props.assessmentViewData, viewOnly = props.viewOnly, translator = props.translator;
     translator.setDefaultNamespace("coBenifits");
     var t = translator.t;
     var form1 = antd.Form.useForm()[0];
@@ -21137,7 +21847,7 @@ var SocialEnvironmentalRisk = function (props) {
 };
 
 var CoBenifitsComponent = function (props) {
-    var onClickedBackBtn = props.onClickedBackBtn, onFormSubmit = props.onFormSubmit, coBenefitsDetails = props.coBenefitsDetails, submitButtonText = props.submitButtonText, viewOnly = props.viewOnly, coBenifitsViewDetails = props.coBenifitsViewDetails, _a = props.loading, loading = _a === void 0 ? false : _a, sdgGoalImages = props.sdgGoalImages, translator = props.translator, useConnection = props.useConnection;
+    var onClickedBackBtn = props.onClickedBackBtn, onFormSubmit = props.onFormSubmit, coBenefitsDetails = props.coBenefitsDetails, submitButtonText = props.submitButtonText, viewOnly = props.viewOnly, coBenifitsViewDetails = props.coBenifitsViewDetails, _a = props.loading, loading = _a === void 0 ? false : _a, sdgGoalImages = props.sdgGoalImages, translator = props.translator;
     var _b = React.useState(), coBenefitDetails = _b[0], setCoBenefitDetails = _b[1];
     var _c = React.useState(true), isSocialFormValid = _c[0], setIsSocialFormValid = _c[1];
     var _d = React.useState(true), isAssessmentFormValid = _d[0], setIsAssessmentFormValid = _d[1];
@@ -21211,7 +21921,7 @@ var CoBenifitsComponent = function (props) {
             label: t("coBenifits:assessment"),
             key: "7",
             children: (React.createElement(Assessment, { onFormSubmit: onAssessmentFormSubmit, assessmentViewData: (viewOnly && (coBenifitsViewDetails === null || coBenifitsViewDetails === void 0 ? void 0 : coBenifitsViewDetails.assessmentDetails)) ||
-                    (!viewOnly && (coBenefitsDetails === null || coBenefitsDetails === void 0 ? void 0 : coBenefitsDetails.assessmentDetails)), viewOnly: viewOnly || false, useConnection: useConnection, translator: translator })),
+                    (!viewOnly && (coBenefitsDetails === null || coBenefitsDetails === void 0 ? void 0 : coBenefitsDetails.assessmentDetails)), viewOnly: viewOnly || false, translator: translator })),
         },
         {
             label: t("coBenifits:socialEnvironmentalRisk"),
@@ -21380,7 +22090,7 @@ var CoBenifitsComponent = function (props) {
 };
 
 var AddNdcActionComponent = function (props) {
-    var useConnection = props.useConnection, useLocation = props.useLocation, onNavigateToProgrammeManagementView = props.onNavigateToProgrammeManagementView, onNavigateToProgrammeView = props.onNavigateToProgrammeView, sdgGoalImages = props.sdgGoalImages, translator = props.translator;
+    var useLocation = props.useLocation, onNavigateToProgrammeManagementView = props.onNavigateToProgrammeManagementView, onNavigateToProgrammeView = props.onNavigateToProgrammeView, sdgGoalImages = props.sdgGoalImages, translator = props.translator;
     translator.setDefaultNamespace("ndcAction");
     var t = translator.t;
     var _a = React.useState(1), current = _a[0], setCurrent = _a[1];
@@ -21522,7 +22232,7 @@ var AddNdcActionComponent = function (props) {
             description: (React.createElement("div", { className: current !== 2 ? "hide" : "" },
                 React.createElement(CoBenifitsComponent, { onClickedBackBtn: onClickBackCoBenefits, coBenefitsDetails: ndcActionDetails ? ndcActionDetails.coBenefitsProperties : {}, onFormSubmit: onCoBenefitsSubmit, submitButtonText: isProjectReportsVisible()
                         ? t("ndcAction:next")
-                        : t("ndcAction:submit"), loading: loading, sdgGoalImages: sdgGoalImages, useConnection: useConnection, translator: translator }))),
+                        : t("ndcAction:submit"), loading: loading, sdgGoalImages: sdgGoalImages, translator: translator }))),
         },
     ];
     if (isProjectReportsVisible()) {
@@ -21659,7 +22369,7 @@ var uploadDocUserPermission = function (userInfoState, docType, programmeOwnerId
 var NdcActionViewComponent = function (props) {
     var _a;
     var _b, _c;
-    var useUserContext = props.useUserContext, useConnection = props.useConnection, useLocation = props.useLocation, onNavigateToNdcManagementView = props.onNavigateToNdcManagementView, translator = props.translator, sdgGoalImages = props.sdgGoalImages, Chart = props.Chart;
+    var useLocation = props.useLocation, onNavigateToNdcManagementView = props.onNavigateToNdcManagementView, translator = props.translator, sdgGoalImages = props.sdgGoalImages, Chart = props.Chart;
     translator.setDefaultNamespace("ndcAction");
     var t = translator.t;
     var userInfoState = useUserContext().userInfoState;
@@ -22152,7 +22862,7 @@ var NdcActionViewComponent = function (props) {
                     React.createElement(antd.Card, { className: "card-container" },
                         React.createElement("div", { className: "co-benifits-view" },
                             React.createElement("div", { className: "title" }, t("ndcAction:coBenefitsSubTitle")),
-                            React.createElement(CoBenifitsComponent, { viewOnly: true, coBenifitsViewDetails: (_c = state === null || state === void 0 ? void 0 : state.record) === null || _c === void 0 ? void 0 : _c.coBenefitsProperties, sdgGoalImages: sdgGoalImages, useConnection: useConnection, translator: translator })))))))));
+                            React.createElement(CoBenifitsComponent, { viewOnly: true, coBenifitsViewDetails: (_c = state === null || state === void 0 ? void 0 : state.record) === null || _c === void 0 ? void 0 : _c.coBenefitsProperties, sdgGoalImages: sdgGoalImages, translator: translator })))))))));
 };
 
 var css_248z$b = ".credit-transfer-management .certify-list {\n  width: 110px;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap; }\n  .credit-transfer-management .certify-list .profile-icon {\n    margin-bottom: 4px; }\n\n.credit-transfer-management .table-actions-section {\n  margin-bottom: 0px; }\n  .credit-transfer-management .table-actions-section input {\n    font-family: \"Inter\";\n    font-size: 0.8rem; }\n\n.credit-transfer-management .all-check {\n  margin-right: 10px; }\n  .credit-transfer-management .all-check .ant-checkbox-inner::after {\n    background-color: rgba(58, 53, 65, 0.5); }\n  .credit-transfer-management .all-check .ant-checkbox-checked .ant-checkbox-inner::after {\n    background-color: transparent; }\n  .credit-transfer-management .all-check .ant-checkbox-checked .ant-checkbox-inner {\n    background-color: rgba(58, 53, 65, 0.5);\n    border: none; }\n\n.credit-transfer-management .ant-checkbox-checked .ant-checkbox-input[value='Retired'] + .ant-checkbox-inner {\n  background-color: rgba(58, 53, 65, 0.4);\n  border: none; }\n\n.credit-transfer-management .ant-checkbox-checked .ant-checkbox-input[value='AwaitingAuthorization'] + .ant-checkbox-inner {\n  background-color: rgba(237, 77, 71, 0.6);\n  border: none; }\n\n.credit-transfer-management .ant-checkbox-checked .ant-checkbox-input[value='Rejected'] + .ant-checkbox-inner {\n  background-color: rgba(58, 53, 65, 0.4);\n  border: none; }\n\n.credit-transfer-management .ant-checkbox-checked .ant-checkbox-input[value='Issued'] + .ant-checkbox-inner {\n  background-color: #16b1ff;\n  border: none; }\n\n.credit-transfer-management .ant-checkbox-checked .ant-checkbox-input[value='Transferred'] + .ant-checkbox-inner {\n  background-color: rgba(118, 195, 39, 0.6);\n  border: none; }\n\n.credit-transfer-modal-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  margin: 2rem 0 0 0;\n  width: 100%; }\n  .credit-transfer-modal-container .icon-credit {\n    margin-bottom: 15px; }\n  .credit-transfer-modal-container .credit-transfer-details {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin-bottom: 10px; }\n    .credit-transfer-modal-container .credit-transfer-details .content-credit-transfer {\n      font-family: 'Inter' !important;\n      font-style: normal;\n      font-weight: 600;\n      font-size: 0.9rem;\n      line-height: 1.3rem;\n      padding: 0 1rem 0 1rem;\n      text-align: center;\n      color: rgba(58, 53, 65, 0.8) !important; }\n    .credit-transfer-modal-container .credit-transfer-details .sub-content-credit-transfer {\n      font-family: 'Inter';\n      font-style: normal;\n      font-weight: 600;\n      font-size: 0.8rem;\n      line-height: 1.375rem;\n      text-align: center;\n      color: rgba(58, 53, 65, 0.5); }\n  .credit-transfer-modal-container .remarks-credit-transfer {\n    flex-direction: row;\n    width: 100%;\n    padding: 0.5rem 1rem 0 1rem; }\n    .credit-transfer-modal-container .remarks-credit-transfer .modal-form .ant-form-item-explain-error {\n      display: flex;\n      flex-direction: row; }\n    .credit-transfer-modal-container .remarks-credit-transfer .modal-form .ant-form {\n      width: 100%; }\n      .credit-transfer-modal-container .remarks-credit-transfer .modal-form .ant-form .ant-form-item-label > label {\n        font-size: 0.8rem; }\n    .credit-transfer-modal-container .remarks-credit-transfer .modal-form .modal-credit-transfer-btns {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      margin-top: 1rem; }\n      .credit-transfer-modal-container .remarks-credit-transfer .modal-form .modal-credit-transfer-btns .center {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: space-between; }\n      .credit-transfer-modal-container .remarks-credit-transfer .modal-form .modal-credit-transfer-btns .width-60 {\n        width: 60%; }\n\n.common-table-class .ant-table .ant-table-thead .ant-table-cell {\n  font-size: 0.75rem;\n  font-weight: 600; }\n";
@@ -22305,7 +23015,7 @@ var TransferActionModel = function (props) {
 };
 
 var CreditTransferComponent = function (props) {
-    var useConnection = props.useConnection, useUserContext = props.useUserContext, useSettingsContext = props.useSettingsContext, translator = props.translator, onNavigateToProgrammeView = props.onNavigateToProgrammeView;
+    var translator = props.translator, onNavigateToProgrammeView = props.onNavigateToProgrammeView;
     var userInfoState = useUserContext().userInfoState;
     var t = translator.t;
     var statusOptions = Object.keys(exports.CreditTransferStage).map(function (k, index) { return ({
@@ -23240,7 +23950,7 @@ var MapStatsComponent = function (props) {
 
 var RangePicker$1 = antd.DatePicker.RangePicker;
 var MrvDashboardComponent = function (props) {
-    var useConnection = props.useConnection, useUserContext = props.useUserContext, Link = props.Link, Chart = props.Chart, t = props.t, ButtonGroup = props.ButtonGroup, _a = props.isMultipleDashboardsVisible, isMultipleDashboardsVisible = _a === void 0 ? false : _a;
+    var Link = props.Link, Chart = props.Chart, t = props.t, ButtonGroup = props.ButtonGroup, _a = props.isMultipleDashboardsVisible, isMultipleDashboardsVisible = _a === void 0 ? false : _a;
     var _b = useConnection(); _b.get; var post = _b.post; _b.delete;
     var _c = React.useState({}), data = _c[0], setData = _c[1];
     var _e = React.useState(false), loading = _e[0], setLoading = _e[1];
@@ -24973,7 +25683,7 @@ var RegistryBarChartsStatComponent = function (props) {
 
 var RangePicker = antd.DatePicker.RangePicker;
 var RegistryDashboardComponent = function (props) {
-    var useUserContext = props.useUserContext, useConnection = props.useConnection, Chart = props.Chart, t = props.t, ButtonGroup = props.ButtonGroup, Link = props.Link, _a = props.isMultipleDashboardsVisible, isMultipleDashboardsVisible = _a === void 0 ? false : _a;
+    var Chart = props.Chart, t = props.t, ButtonGroup = props.ButtonGroup, Link = props.Link, _a = props.isMultipleDashboardsVisible, isMultipleDashboardsVisible = _a === void 0 ? false : _a;
     var _b = useConnection(); _b.get; var post = _b.post; _b.delete;
     var userInfoState = useUserContext().userInfoState;
     var _c = React.useState(false), loadingWithoutTimeRange = _c[0], setLoadingWithoutTimeRange = _c[1];
@@ -26675,880 +27385,622 @@ var RegistryDashboardComponent = function (props) {
                                     lastUpdateTransferLocations))))))))) : ("")));
 };
 
-React.createContext(null);
+var EditableContext = React.createContext(null);
+var EditableRow = function (_a) {
+    _a.index; var props = __rest(_a, ["index"]);
+    var form = antd.Form.useForm()[0];
+    return (React.createElement(antd.Form, { form: form, component: false },
+        React.createElement(EditableContext.Provider, { value: form },
+            React.createElement("tr", __assign({}, props)))));
+};
 var EditableCell = function (_a) {
-    var editing = _a.editing, dataIndex = _a.dataIndex, title = _a.title; _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(antd.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(antd.Input, { onBlur: function () { return onBlurHandler(record); }, placeholder: t("ndc:nationalPlanObjectivePlaceHolder") }))) : editing && dataIndex === "kpi" ? (React.createElement(antd.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(antd.Input, { onBlur: function () { return onBlurHandler(record); }, placeholder: t("ndc:kpiPlaceHolder") }))) : (children)));
+    var title = _a.title, editable = _a.editable, children = _a.children, dataIndex = _a.dataIndex, record = _a.record, handleSave = _a.handleSave, restProps = __rest(_a, ["title", "editable", "children", "dataIndex", "record", "handleSave"]);
+    var _b = React.useState(false), editing = _b[0], setEditing = _b[1];
+    var inputRef = React.useRef(null);
+    var form = React.useContext(EditableContext);
+    React.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(antd.Form.Item, { style: { margin: 0 }, name: dataIndex, rules: [
+                {
+                    required: true,
+                    message: "".concat(title, " is required."),
+                },
+            ] },
+            React.createElement(antd.Input, { ref: inputRef, onPressEnter: save, onBlur: save }))) : (React.createElement("div", { className: "editable-cell-value-wrap", style: { paddingRight: 24, minWidth: "100px", minHeight: "20px" }, onClick: toggleEdit }, children));
+    }
+    return React.createElement("td", __assign({}, restProps), childNode);
 };
 
-var css_248z$4 = ".ndc-steps-actions {\n  display: flex;\n  flex-direction: row-reverse;\n  margin-right: 1rem;\n  justify-content: center; }\n  .ndc-steps-actions .action-btn {\n    border: 1px solid #16b1ff;\n    color: #16b1ff;\n    margin-right: 1rem; }\n  .ndc-steps-actions .back-btn {\n    border: 1px solid rgba(140, 140, 140, 0.7);\n    color: rgba(140, 140, 140, 0.7);\n    margin-right: 1rem; }\n  .ndc-steps-actions .mg-left-1 {\n    margin-left: 1rem; }\n\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\n.ndc-details .btnAddNewMainAct {\n  margin-bottom: 16;\n  width: 100%;\n  height: 45px;\n  border-radius: 10px;\n  border: 1px solid rgba(58, 53, 65, 0.5);\n  background: #FFF;\n  color: #16b1ff;\n  text-align: center;\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500; }\n\n.ndc-details .btnAddNewMainAct:disabled {\n  color: rgba(0, 0, 0, 0.25);\n  border-color: #d9d9d9;\n  background: #f5f5f5;\n  text-shadow: none;\n  box-shadow: none; }\n";
+var css_248z$4 = ".ndc-steps-actions {\n  display: flex;\n  flex-direction: row-reverse;\n  margin-right: 1rem;\n  justify-content: center; }\n  .ndc-steps-actions .action-btn {\n    border: 1px solid #16b1ff;\n    color: #16b1ff;\n    margin-right: 1rem; }\n  .ndc-steps-actions .back-btn {\n    border: 1px solid rgba(140, 140, 140, 0.7);\n    color: rgba(140, 140, 140, 0.7);\n    margin-right: 1rem; }\n  .ndc-steps-actions .mg-left-1 {\n    margin-left: 1rem; }\n";
 styleInject(css_248z$4);
 
-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 NdcActionType;
+(function (NdcActionType) {
+    NdcActionType[NdcActionType["main"] = 0] = "main";
+    NdcActionType[NdcActionType["sub"] = 1] = "sub";
+})(NdcActionType || (NdcActionType = {}));
 var NdcDetailsComponent = function (props) {
-    var t = props.t, useConnection = props.useConnection, useUserContext = props.useUserContext;
+    var t = props.t;
     var RangePicker = antd.DatePicker.RangePicker;
-    var _a = React.useState([]), ndcActionsList = _a[0], setNdcActionsList = _a[1];
-    var _b = React.useState(false), loading = _b[0], setLoading = _b[1];
+    var _a = React.useState([]), ndcDetailsData = _a[0], setNdcDetailsData = _a[1];
+    var _b = React.useState(false), loading = _b[0]; _b[1];
+    var periodItemsRef = React.useRef([]);
     var _c = React.useState([]), periodItems = _c[0], setPeriodItems = _c[1];
-    var _d = React.useState({}), selectedPeriod = _d[0], setSelectedPeriod = _d[1];
-    var selectedDateRangeRef = React.useRef({});
+    var _d = React.useState("add_new"), selectedTab = _d[0], setSelectedTab = _d[1];
+    var selectedPeriod = React.useRef({});
+    var addedNdcDetailId = React.useRef(0);
+    var selectedNdcDetail = React.useRef({});
     var _e = React.useState(0), tableKey = _e[0], setTableKey = _e[1];
-    var _f = useConnection(), get = _f.get, post = _f.post, put = _f.put;
-    var _g = React.useState([]), ministryOrgList = _g[0], setMinistryOrgList = _g[1];
-    var _h = React.useState({}), actionInfo = _h[0], setActionInfo = _h[1];
-    var _j = React.useState(false), openConfirmationModal = _j[0], setOpenConfirmationModal = _j[1];
-    var form = antd.Form.useForm()[0];
-    var _k = React.useState(null), editingKey = _k[0], setEditingKey = _k[1];
-    var _l = React.useState(0), nextAvailableActionId = _l[0], setNextAvailableActionId = _l[1];
-    var _m = React.useState([]), expandedRowKeys = _m[0], setExpandedRowKeys = _m[1];
-    var _o = React.useState([]), subNdcActionsForPeriod = _o[0], setSubNdcActionsForPeriod = _o[1];
-    var _p = React.useState(1), currentPage = _p[0], setCurrentPage = _p[1];
-    var _q = React.useState(10), pageSize = _q[0], setPageSize = _q[1];
-    var isEditing = function (record) { return record.id === editingKey; };
-    var isMainActionInEditMode = function () {
-        if (editingKey) {
-            var action = ndcActionsList.find(function (item) { return item.id === editingKey; });
-            if (action && action.actionType === NdcDetailsActionType.MainAction) {
-                return true;
-            }
-        }
-        return false;
-    };
     var userInfoState = useUserContext().userInfoState;
-    React.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) === exports.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) === exports.CompanyRole.MINISTRY
-            ? userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyName
-            : undefined;
-    var isGovernmentUser = (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.GOVERNMENT &&
-        (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== exports.Role.ViewOnly;
-    var isMainNdcActionsEditable = !selectedPeriod.finalized &&
-        (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.GOVERNMENT &&
-        (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== exports.Role.ViewOnly;
-    var isSubNdcActionsEditable = function (record) {
-        return (!selectedPeriod.finalized &&
-            record.status !== NdcDetailsActionStatus.Approved &&
-            ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.GOVERNMENT ||
-                ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.MINISTRY &&
-                    (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyName) === record.ministryName)) &&
+    var isAddRangeVisible = function () {
+        return (((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.MINISTRY ||
+            (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.GOVERNMENT) &&
             (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== exports.Role.ViewOnly);
     };
-    var checkSubNdcActionCreatePermission = function () {
-        return (!selectedPeriod.finalized &&
-            ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.GOVERNMENT ||
-                (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.MINISTRY) &&
+    var isAddNdcActionVisible = function () {
+        return ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.GOVERNMENT &&
             (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== exports.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;
     };
-    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) {
-                        setEditingKey(null);
-                        return [2 /*return*/];
-                    }
-                    else if (updatedFields.kpi === row.kpi &&
-                        updatedFields.nationalPlanObjective === row.nationalPlanObjective) {
-                        setEditingKey(null);
-                        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;
+    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);
+                        }
                     }
                     else {
-                        updatedItem.status = NdcDetailsActionStatus.Pending;
+                        parentItem.subNdcDetails = [row];
                     }
-                    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();
-                    setEditingKey(null);
-                    return [3 /*break*/, 10];
-                case 9:
-                    exception_2 = _a.sent();
-                    setEditingKey(null);
-                    antd.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*/];
+                }
+                newData[parentIndex] = __assign({}, parentItem);
+                setTableKey(function (key) { return key + 1; });
             }
+            return newData;
         });
-    }); };
-    var actionMenu = function (record) {
-        if (record.status === NdcDetailsActionStatus.Pending &&
-            isGovernmentUser &&
-            !selectedPeriod.finalized) {
-            return (React.createElement(antd.List, { className: "action-menu", size: "small", dataSource: [
-                    {
-                        text: t("ndc:approve"),
-                        icon: React.createElement(Icon__namespace.BoxArrowInDown, null),
-                        style: "color-primary",
-                        click: function () {
-                            setActionInfo({
-                                action: "Approve",
-                                headerText: t("ndc:actionApproveTitle"),
-                                type: "primary",
-                                icon: React.createElement(Icon__namespace.BoxArrowInDown, null),
-                                recordId: record.id,
-                            });
-                            setOpenConfirmationModal(true);
-                        },
-                    },
-                    {
-                        text: t("ndc:reject"),
-                        icon: React.createElement(Icon__namespace.XOctagon, null),
-                        style: "color-error",
-                        click: function () {
-                            setActionInfo({
-                                action: "Reject",
-                                headerText: t("ndc:rejectApproveTitle"),
-                                type: "danger",
-                                icon: React.createElement(Icon__namespace.XOctagon, null),
-                                recordId: record.id,
-                            });
-                            setOpenConfirmationModal(true);
-                        },
-                    },
-                ], renderItem: function (item) { return (React.createElement(antd.List.Item, { onClick: item.click },
-                    React.createElement(antd.Typography.Text, { className: "action-icon ".concat(item.style) }, item.icon),
-                    React.createElement("span", null, item.text))); } }));
+    };
+    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;
         }
         else {
-            return null;
+            return [];
         }
     };
     var defaultColumns = [
         {
             title: t("ndc:ndcColumnsNationalPlanObj"),
-            dataIndex: "nationalPlanObjective",
-            key: "nationalPlanObjective",
+            dataIndex: "nationalPlanObj",
+            key: "nationalPlanObj",
             align: "left",
-            width: 400,
             editable: true,
-            render: function (_, record) { return (React.createElement(antd.Space, { size: "middle" }, record.nationalPlanObjective ? (React.createElement(antd.Tooltip, { title: isNdcActionEditable(record) ? "" : t("ndc:ndcUnauthorisedMsg") },
-                React.createElement("span", null, record.nationalPlanObjective))) : (React.createElement(antd.Input, { placeholder: "Enter National Plan Objective" })))); },
+            width: "50%",
+            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(antd.Space, { size: "middle" },
+                React.createElement("span", null, record.nationalPlanObj))) : (React.createElement("input", { placeholder: "Please add Programmes", className: "ant-input", type: "text" })))); },
         },
         {
             title: t("ndc:ndcColumnsKpi"),
             dataIndex: "kpi",
             key: "kpi",
             align: "left",
-            width: 100,
             editable: true,
-            render: function (_, record) { return (React.createElement(antd.Space, { size: "middle" }, record.kpi ? (React.createElement(antd.Tooltip, { title: isNdcActionEditable(record) ? "" : t("ndc:ndcUnauthorisedMsg") },
-                React.createElement("span", null, record.kpi))) : (React.createElement(antd.Input, { placeholder: "Enter Kpi" })))); },
-        },
-        {
-            title: t("ndc:ndcColumnsMinistry"),
-            dataIndex: "ministryName",
-            key: "ministryName",
-            align: "left",
-            width: 300,
-            editable: false,
-            render: function (_, record) { return (React.createElement(antd.Tooltip, { title: isSubNdcActionsEditable(record) ? "" : t("ndc:ndcUnauthorisedMsg") },
-                React.createElement(antd.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 }))); },
+            width: "10%",
+            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(antd.Space, { size: "middle" },
+                React.createElement("span", null, record.kpi))) : (React.createElement("input", { placeholder: "Enter Kpi", className: "ant-input", type: "text" })))); },
         },
         {
-            title: t("ndc:ndcColumnsStatus"),
-            dataIndex: "status",
-            key: "status",
+            title: "Government Department",
+            dataIndex: "ministry",
+            key: "ministry",
             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(antd.Tooltip, { title: record.status, color: TooltipColor, key: TooltipColor },
-                        React.createElement(antd.Tag, { className: "clickable", color: getNdcActionStatusTagType(record.status) }, addSpaces(record.status)))) : (""),
-                    record.actionType === NdcDetailsActionType.SubAction && menu ? (React.createElement(antd.Popover, { placement: "bottomRight", content: menu, trigger: "click" },
-                        React.createElement(icons.EllipsisOutlined, { rotate: 90, style: {
-                                fontWeight: 600,
-                                fontSize: "1rem",
-                                cursor: "pointer",
-                            } }))) : (React.createElement("span", null))));
-            },
+            editable: true,
+            width: "40%",
+            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(antd.Space, { size: "middle" },
+                React.createElement("span", null, record.ministry))) : (React.createElement("input", { placeholder: "Please add the Government Department", className: "ant-input", type: "text" })))); },
         },
     ];
     var columns = defaultColumns.map(function (col) {
         if (!col.editable) {
             return col;
         }
-        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,
-                };
-            } });
+        return __assign(__assign({}, col), { onCell: function (record) { return ({
+                record: record,
+                editable: col.editable,
+                dataIndex: col.dataIndex,
+                title: col.title,
+                handleSave: handleSave,
+            }); } });
     });
-    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*/];
-            });
-        });
+    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));
     }
     var components = {
         body: {
+            row: EditableRow,
             cell: EditableCell,
         },
     };
-    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__namespace.XCircle, null),
-                recordId: selectedPeriod.key,
+    //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);
             });
-            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) {
-                antd.message.open({
-                    type: "error",
-                    content: t("ndc:finalizeNdcEmptyErrorText"),
-                    duration: 3,
-                    style: { textAlign: "right", marginRight: 15, marginTop: 10 },
-                });
-                return [2 /*return*/];
+            if (existingIndex === -1) {
+                setPeriodItems(function (items) { return __spreadArray(__spreadArray([], items, true), [newPeriodItem_1], false); });
+                periodItemsRef.current = __spreadArray(__spreadArray([], periodItemsRef.current, true), [newPeriodItem_1], false);
             }
-            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) {
+            else {
                 antd.message.open({
                     type: "error",
-                    content: t("ndc:finalizeErrorText"),
+                    content: t("ndc:rangeAlreadyExists"),
                     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__namespace.Clipboard2Check, null),
-                    recordId: selectedPeriod.key,
-                });
-                setOpenConfirmationModal(true);
-            }
-            return [2 /*return*/];
-        });
-    }); };
-    var onMainTableRowExpand = function (expanded, record) {
-        var keys = [];
-        if (expanded) {
-            keys.push(record.id);
         }
-        setExpandedRowKeys(keys);
-        setNdcSubActionsForMainAction(record.id);
+    };
+    React.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;
     };
     function addNewPeriodContent() {
         return (React.createElement("div", null,
-            React.createElement(antd.Row, { justify: "start", align: "middle", gutter: [16, 16] },
-                React.createElement(antd.Col, { flex: "340px" },
-                    React.createElement(RangePicker, { disabledDate: function (current) { return moment(current).year() < 1900; }, onChange: onDateRangeChanged, picker: "year" })),
-                React.createElement(antd.Col, { flex: "auto" },
-                    React.createElement(antd.Button, { type: "primary", onClick: onAddNewPeriod, htmlType: "submit", loading: loading }, t("ndc:submit"))))));
+            React.createElement(antd.Row, null,
+                React.createElement(RangePicker, { onChange: onDateRangeChanged, picker: "year" })),
+            React.createElement(antd.Row, { className: "mg-top-1" },
+                React.createElement("div", { className: "ndc-steps-actions" },
+                    React.createElement(antd.Button, { type: "primary", onClick: onAddNewPeriod, htmlType: "submit", loading: loading }, t("ndc:submit")),
+                    React.createElement(antd.Button, { className: "back-btn", onClick: onCancelPeriod, loading: loading }, t("ndc:back"))))));
     }
-    var onChange = function (page, size) {
-        setCurrentPage(page);
-        setPageSize(size);
+    function getSubNdcActionContent(record) {
+        selectedNdcDetail.current = record;
+        return (React.createElement(antd.Table, { components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getSubNdcDetails(record.key), columns: columns, showHeader: false, pagination: false }));
+    }
+    var onTabChange = function (key) {
+        setSelectedTab(key);
     };
-    function mainNdcActionTableContent() {
-        return (React.createElement("div", null,
-            React.createElement(antd.Row, null,
-                React.createElement(antd.Col, { span: 24 },
-                    React.createElement(antd.Form, { form: form, component: false },
-                        React.createElement(antd.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(antd.Row, { justify: "center" },
-                                    React.createElement(antd.Button, { className: "btnAddNewMainAct", disabled: isMainActionInEditMode(), onClick: onClickedAddNewNdcDetail, type: "default" }, t("ndc:addNdcAction"))));
-                            } })))),
-            isGovernmentUser && !selectedPeriod.finalized ? (React.createElement(antd.Row, { justify: "end" },
-                React.createElement(antd.Button, { className: "mg-left-1 btn-danger", onClick: onClickedDeletePeriod, htmlType: "submit", disabled: isMainActionInEditMode(), loading: loading }, t("ndc:delete")),
-                React.createElement(antd.Button, { className: "mg-left-1", type: "primary", onClick: onClickedFinalizePeriod, disabled: isMainActionInEditMode(), htmlType: "submit", loading: loading }, t("ndc:finalize")))) : ("")));
-    }
-    function subNdcActionTableContent(record) {
-        return (React.createElement(antd.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);
-                        }
+    React.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)",
                     },
-                    onMouseLeave: function () {
-                        if (isEditing(record)) {
-                            handleSave(record);
-                        }
+                    {
+                        key: 7,
+                        ndcActionId: 1,
+                        type: NdcActionType.sub,
+                        startDate: new Date("2019-03-25"),
+                        endDate: new Date("2020-03-25"),
+                        nationalPlanObj: "",
+                        kpi: "",
+                        ministry: "",
                     },
-                };
-            }, 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:
-                    antd.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();
-                    antd.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) {
-                antd.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);
+                ],
+            },
+            {
+                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: "",
+                    },
+                ],
+            },
+        ];
+        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(),
+            });
         }
-    };
-    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();
-                    antd.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") {
-                            antd.message.open({
-                                type: "success",
-                                content: t("ndc:deletePeriodSuccessMsg"),
-                                duration: 3,
-                                style: { textAlign: "right", marginRight: 15, marginTop: 10 },
-                            });
-                            fetchNdcDetailPeriods();
-                        }
-                        else if (actionInfo.action === "Finalize") {
-                            antd.message.open({
-                                type: "success",
-                                content: t("ndc:finalizeSuccessMsg"),
-                                duration: 3,
-                                style: { textAlign: "right", marginRight: 15, marginTop: 10 },
-                            });
-                            fetchNdcDetailPeriods();
-                            setExpandedRowKeys([]);
-                            setEditingKey(null);
-                        }
-                        else if (actionInfo.action === "Approve") {
-                            antd.message.open({
-                                type: "success",
-                                content: t("ndc:approveSuccessMsg"),
-                                duration: 3,
-                                style: { textAlign: "right", marginRight: 15, marginTop: 10 },
-                            });
-                            fetchNdcDetailActions();
-                        }
-                        else if (actionInfo.action === "Reject") {
-                            antd.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(icons.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();
-                    antd.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();
-                    antd.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();
-                    antd.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*/];
-            }
-        });
-    }); };
-    React.useEffect(function () {
-        fetchNdcDetailPeriods();
-        fetchNdcDetailActions();
-        fetchMinistries();
+        addedNdcDetailId.current = 20;
+        setPeriodItems(initialPeriods);
+        periodItemsRef.current = initialPeriods;
+        setNdcDetailsData(defaultNdcDetails);
     }, []);
-    return (React.createElement("div", { className: "ndc-details content-container" },
+    return (React.createElement("div", { className: "ndc-management content-container" },
         React.createElement("div", { className: "title-bar" },
             React.createElement(antd.Row, { justify: "space-between", align: "middle" },
                 React.createElement(antd.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(antd.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 })));
+            React.createElement(antd.Tabs, { centered: false, defaultActiveKey: "1", items: periodItems, activeKey: selectedTab, onChange: onTabChange })),
+        selectedTab !== "add_new" && (React.createElement("div", null,
+            React.createElement("div", null,
+                React.createElement(antd.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(antd.Row, { justify: "center" },
+                            React.createElement(antd.Button, { onClick: onAddNewNdcDetail, type: "default", style: {
+                                    marginBottom: 16,
+                                    width: "100%",
+                                } }, t("ndc:addNdcAction"))));
+                    } }))))));
 };
 
 var ImgWithFallback = function (_a) {
@@ -27720,7 +28172,7 @@ var ProgrammeIssueForm = function (props) {
 };
 
 var ProgrammeRetireForm = function (props) {
-    var programme = props.programme, onFinish = props.onFinish, onCancel = props.onCancel, actionBtnText = props.actionBtnText, subText = props.subText, hideType = props.hideType, myCompanyId = props.myCompanyId, translator = props.translator, useConnection = props.useConnection;
+    var programme = props.programme, onFinish = props.onFinish, onCancel = props.onCancel, actionBtnText = props.actionBtnText, subText = props.subText, hideType = props.hideType, myCompanyId = props.myCompanyId, translator = props.translator;
     var t = translator.t;
     var _a = React.useState(undefined), popupError = _a[0], setPopupError = _a[1];
     var _b = React.useState(false), loading = _b[0], setLoading = _b[1];
@@ -28096,7 +28548,7 @@ var ProgrammeRevokeForm = function (props) {
 };
 
 var ProgrammeTransferForm = function (props) {
-    var programme = props.programme, onFinish = props.onFinish, onCancel = props.onCancel, actionBtnText = props.actionBtnText; props.subText; var toCompanyDefault = props.toCompanyDefault, disableToCompany = props.disableToCompany, receiverLabelText = props.receiverLabelText, userCompanyId = props.userCompanyId, companyRole = props.companyRole, translator = props.translator, useConnection = props.useConnection, _a = props.ministryLevelPermission, ministryLevelPermission = _a === void 0 ? false : _a;
+    var programme = props.programme, onFinish = props.onFinish, onCancel = props.onCancel, actionBtnText = props.actionBtnText; props.subText; var toCompanyDefault = props.toCompanyDefault, disableToCompany = props.disableToCompany, receiverLabelText = props.receiverLabelText, userCompanyId = props.userCompanyId, companyRole = props.companyRole, translator = props.translator, _a = props.ministryLevelPermission, ministryLevelPermission = _a === void 0 ? false : _a;
     var t = translator.t;
     var _b = React.useState(undefined), popupError = _b[0], setPopupError = _b[1];
     var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
@@ -28327,7 +28779,7 @@ var css_248z$2 = ".ndc-action-body {\n  display: flex;\n  flex-direction: column
 styleInject(css_248z$2);
 
 var NdcActionBody = function (props) {
-    var data = props.data, programmeId = props.programmeId, canUploadMonitorReport = props.canUploadMonitorReport, programmeOwnerId = props.programmeOwnerId, getProgrammeDocs = props.getProgrammeDocs, ministryLevelPermission = props.ministryLevelPermission, useConnection = props.useConnection, translator = props.translator, useUserContext = props.useUserContext, onFinish = props.onFinish, programme = props.programme;
+    var data = props.data, programmeId = props.programmeId, canUploadMonitorReport = props.canUploadMonitorReport, programmeOwnerId = props.programmeOwnerId, getProgrammeDocs = props.getProgrammeDocs, ministryLevelPermission = props.ministryLevelPermission, translator = props.translator, onFinish = props.onFinish, programme = props.programme;
     var t = translator.t;
     var userInfoState = useUserContext().userInfoState;
     var fileInputMonitoringRef = React.useRef(null);
@@ -28763,7 +29215,7 @@ var css_248z$1 = ".info-view .title-icon {\n  padding-right: 10px; }\n\n.info-vi
 styleInject(css_248z$1);
 
 var ProgrammeDocuments = function (props) {
-    var data = props.data, title = props.title, icon = props.icon, programmeId = props.programmeId, programmeOwnerId = props.programmeOwnerId, getDocumentDetails = props.getDocumentDetails, getProgrammeById = props.getProgrammeById, ministryLevelPermission = props.ministryLevelPermission, useConnection = props.useConnection, useUserContext = props.useUserContext, translator = props.translator, methodologyDocumentUpdated = props.methodologyDocumentUpdated, programmeStatus = props.programmeStatus;
+    var data = props.data, title = props.title, icon = props.icon, programmeId = props.programmeId, programmeOwnerId = props.programmeOwnerId, getDocumentDetails = props.getDocumentDetails, getProgrammeById = props.getProgrammeById, ministryLevelPermission = props.ministryLevelPermission, translator = props.translator, methodologyDocumentUpdated = props.methodologyDocumentUpdated, programmeStatus = props.programmeStatus;
     var t = translator.t;
     var userInfoState = useUserContext().userInfoState;
     var _a = useConnection(); _a.delete; var post = _a.post;
@@ -29270,6 +29722,7 @@ exports.CoBenifitsComponent = CoBenifitsComponent;
 exports.Company = Company;
 exports.CompanyManagementComponent = CompanyManagementComponent;
 exports.CompanyProfileComponent = CompanyProfileComponent;
+exports.ConnectionContextProvider = ConnectionContextProvider;
 exports.CreditTransferComponent = CreditTransferComponent;
 exports.DevBGColor = DevBGColor;
 exports.DevColor = DevColor;
@@ -29312,6 +29765,8 @@ exports.RejectDocumentationConfirmationModel = RejectDocumentationConfirmationMo
 exports.RoleIcon = RoleIcon;
 exports.RootBGColor = RootBGColor;
 exports.RootColor = RootColor;
+exports.SettingsContext = SettingsContext;
+exports.SettingsContextProvider = SettingsContextProvider;
 exports.StasticCard = StasticCard;
 exports.SupportCreationComponent = SupportCreationComponent;
 exports.SupportManagementComponent = SupportManagementComponent;
@@ -29320,6 +29775,8 @@ exports.TooltipColor = TooltipColor;
 exports.TransferActionModel = TransferActionModel;
 exports.UnitField = UnitField;
 exports.User = User;
+exports.UserContext = UserContext;
+exports.UserInformationContextProvider = UserInformationContextProvider;
 exports.UserManagementComponent = UserManagementComponent;
 exports.UserProfileComponent = UserProfileComponent;
 exports.UserRoleIcon = UserRoleIcon;
@@ -29341,7 +29798,7 @@ exports.getCreditStageVal = getCreditStageVal;
 exports.getFinancialFields = getFinancialFields;
 exports.getGeneralFields = getGeneralFields;
 exports.getInvestmentStatusEnumVal = getInvestmentStatusEnumVal;
-exports.getNdcActionStatusEnumVal = getNdcActionStatusEnumVal$1;
+exports.getNdcActionStatusEnumVal = getNdcActionStatusEnumVal;
 exports.getNdcStatusTagType = getNdcStatusTagType;
 exports.getRetirementTypeString = getRetirementTypeString;
 exports.getStageEnumVal = getStageEnumVal;
@@ -29361,4 +29818,7 @@ exports.ndcActionTypeList = ndcActionTypeList;
 exports.sectorMitigationTypesListMapped = sectorMitigationTypesListMapped;
 exports.sumArray = sumArray;
 exports.titleList = titleList;
+exports.useConnection = useConnection;
+exports.useSettingsContext = useSettingsContext;
+exports.useUserContext = useUserContext;
 //# sourceMappingURL=index.js.map