phx-uikit 1.0.249 → 1.0.251

package/dist/cjs/components/MainWrapV3/MainWrapV3.js

@@ -20,7 +20,6 @@ var query_1 = require("../../query");
 var Card_1 = require("../Card");
 var getEnvPublic_1 = tslib_1.__importDefault(require("../Func/getEnvPublic"));
 var saveCookiesClient_1 = tslib_1.__importDefault(require("../Func/saveCookiesClient"));
-var LoadingProvider_1 = require("../LoadingProvider");
 var appearance_styled_1 = tslib_1.__importDefault(require("./appearance/appearance-styled"));
 var nav_mobile_1 = tslib_1.__importDefault(require("./navigator/nav-mobile"));
 var sub_menu_style_1 = require("./style/sub-menu-style");
@@ -28,7 +27,7 @@ var Icon_1 = require("./assets/Icon");
 var image_1 = tslib_1.__importDefault(require("next/image"));
 var axios_1 = tslib_1.__importDefault(require("axios"));
 var getCookieSession_1 = tslib_1.__importDefault(require("../Func/getCookieSession"));
-var helpers_1 = require("../../helpers/helpers");
+var LoadingProvider_1 = require("../LoadingProvider");
 fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.fas);
 function classNames() {
     var classes = [];
@@ -38,60 +37,48 @@ function classNames() {
     return classes.filter(Boolean).join(' ');
 }
 var PHXMainWrapV3 = function (_a) {
-    var _b, _c, _d, _e;
-    var children = _a.children, getDataCookies = _a.getDataCookies, _f = _a.hiddenLeftMenu, hiddenLeftMenu = _f === void 0 ? false : _f, _g = _a.logoHeight, logoHeight = _g === void 0 ? '28px' : _g, _h = _a.multipleMenu, multipleMenu = _h === void 0 ? false : _h, params = _a.params, pathName = _a.pathName, router = _a.router;
+    var _b, _c, _d, _e, _f;
+    var children = _a.children, _g = _a.hiddenLeftMenu, hiddenLeftMenu = _g === void 0 ? false : _g, _h = _a.logoHeight, logoHeight = _h === void 0 ? '28px' : _h, _j = _a.multipleMenu, multipleMenu = _j === void 0 ? false : _j, params = _a.params, pathName = _a.pathName, router = _a.router;
     var pid = (params ? params : {}).pid;
-    var _j = (0, react_2.useState)(false), modal = _j[0], setModal = _j[1];
-    var _k = (0, react_2.useState)(true), openSubMenu = _k[0], setOpenSubMenu = _k[1];
-    var _l = (0, react_2.useState)(''), campaignName = _l[0], setCampaignName = _l[1];
-    var _m = (0, react_2.useState)(false), sidebarOpen = _m[0], setSidebarOpen = _m[1];
-    var _o = (0, react_2.useState)([]), subNavigation = _o[0], setSubNavigation = _o[1];
-    var _p = (0, react_2.useState)([]), navigation = _p[0], setNavigation = _p[1];
-    var _q = (0, react_2.useState)([]), menu = _q[0], setMenu = _q[1];
-    var _r = (0, react_2.useState)(true), loadingSchool = _r[0], setLoadingSchool = _r[1];
-    var _s = (0, react_2.useState)(true), loadingMenu = _s[0], setLoadingMenu = _s[1];
-    var _t = (0, react_2.useState)(false), modalSignOut = _t[0], setModalSignOut = _t[1];
-    var _u = (0, react_2.useState)([]), listSchool = _u[0], setListSchool = _u[1];
-    var _v = (0, react_2.useState)([]), roleCode = _v[0], setRoleCode = _v[1];
-    var _w = (0, react_2.useState)([]), perCode = _w[0], setPerCode = _w[1];
-    var _x = (0, react_2.useState)(null), schoolId = _x[0], setSchoolId = _x[1];
-    var _y = (0, react_2.useState)(true), showBanner = _y[0], setShowBanner = _y[1];
-    var _z = (0, react_2.useState)({}), configLayout = _z[0], setConfigLayout = _z[1];
-    var _0 = (0, react_2.useState)(true), isLoading = _0[0], setIsLoading = _0[1];
-    var _1 = (0, react_2.useState)(true), isLoadingPermission = _1[0], setIsLoadingPermission = _1[1];
-    var locationPathname = typeof window !== 'undefined' ? window.location.pathname : '';
-    var pathArr = locationPathname.split('/');
-    var pathNameWithBasePath = "/".concat(pathArr[1]).concat(pathName);
+    var _k = (0, react_2.useState)(false), modal = _k[0], setModal = _k[1];
+    var _l = (0, react_2.useState)(true), openSubMenu = _l[0], setOpenSubMenu = _l[1];
+    var _m = (0, react_2.useState)(''), campaignName = _m[0], setCampaignName = _m[1];
+    var _o = (0, react_2.useState)(false), sidebarOpen = _o[0], setSidebarOpen = _o[1];
+    var _p = (0, react_2.useState)([]), subNavigation = _p[0], setSubNavigation = _p[1];
+    var _q = (0, react_2.useState)([]), navigation = _q[0], setNavigation = _q[1];
+    var _r = (0, react_2.useState)(false), modalSignOut = _r[0], setModalSignOut = _r[1];
+    var _s = (0, react_2.useState)(true), showBanner = _s[0], setShowBanner = _s[1];
+    var _t = (0, react_2.useState)(true), isLoading = _t[0], setIsLoading = _t[1];
+    var sessionCookie = (0, react_2.useRef)((0, getCookieSession_1["default"])());
+    var userSessionInfo = (_b = sessionCookie.current) === null || _b === void 0 ? void 0 : _b.user_info;
+    var schoolInfoId = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.school_id;
+    var userId = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.id;
     var setGlobalLoading = (0, LoadingProvider_1.useLoading)().setLoading;
+    var _u = (0, react_2.useState)({
+        loadingMenu: true,
+        loadingSchool: true,
+        listSchool: [],
+        logo: {
+            path: '',
+            height: logoHeight
+        },
+        menu: [],
+        schoolId: null,
+        configLayout: undefined,
+        perCode: [],
+        roleCode: [],
+        isLoadingPermission: true,
+        sourceAvatar: ((_c = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.user_avatar) === null || _c === void 0 ? void 0 : _c.size_small) || (userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.avatar) || constants_1.DEFAULT_AVATAR
+    }), dataInitMain = _u[0], setDataInitMain = _u[1];
+    var locationPathname = typeof window !== 'undefined' ? window.location.pathname : '';
+    var locationArr = locationPathname.split('/').filter(Boolean);
+    var basePath = locationArr.slice(0, locationArr.length - pathName.split('/').filter(Boolean).length).join('/');
+    var pathNameWithBasePath = "".concat(basePath ? "".concat('/' + basePath) : '').concat(pathName);
     function enablePer(code, arr) {
         if (!code)
             return true;
         return arr === null || arr === void 0 ? void 0 : arr.some(function (item) { return item === code; });
     }
-    var _2 = (0, react_2.useState)({
-        path: '',
-        height: logoHeight
-    }), logo = _2[0], setLogo = _2[1];
-    var sessionCookie = (0, react_2.useRef)((0, getCookieSession_1["default"])());
-    var userSessionInfo = (_b = sessionCookie.current) === null || _b === void 0 ? void 0 : _b.user_info;
-    var schoolInfoId = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.school_id;
-    var userId = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.id;
-    function compareObjects(settingQuery, settingCookies) {
-        var keysSettingQuery = Object.keys(settingQuery);
-        if (keysSettingQuery.length !== Object.keys(settingCookies).length) {
-            return false;
-        }
-        for (var _i = 0, keysSettingQuery_1 = keysSettingQuery; _i < keysSettingQuery_1.length; _i++) {
-            var key = keysSettingQuery_1[_i];
-            if (!Object.prototype.hasOwnProperty.call(settingCookies, key)) {
-                return false;
-            }
-            if (settingQuery[key] !== settingCookies[key]) {
-                return false;
-            }
-        }
-        return true;
-    }
     // Lấy code phân quyền trong menu từ path hiện tại
     function getCodesByPath(dataMenu, currentPath) {
         var lastMatchingCode = null;
@@ -119,6 +106,12 @@ var PHXMainWrapV3 = function (_a) {
     }
     // code phân quyền path hiện tại
     var currentCode = getCodesByPath(navigation, locationPathname);
+    var requireLoginValidation = function () {
+        var currentURL = window.location.href;
+        var url = currentURL.split('/');
+        var loginPush = "".concat(url[0], "//").concat(url[2], "/login-sso");
+        window.location.replace(loginPush);
+    };
     var checkIsQuitJob = function (_a) {
         var profileStaff = _a.profileStaff, profileTeacher = _a.profileTeacher;
         try {
@@ -143,7 +136,7 @@ var PHXMainWrapV3 = function (_a) {
         return tslib_1.__generator(this, function (_e) {
             switch (_e.label) {
                 case 0:
-                    _e.trys.push([0, 2, 3, 4]);
+                    _e.trys.push([0, 2, , 3]);
                     return [4 /*yield*/, (0, clientQueryV3_1["default"])({
                             query: query_1.GET_PERMISSION_DETAIL_USER_V3,
                             variables: { id: userId, school_id: schoolInfoId }
@@ -157,117 +150,98 @@ var PHXMainWrapV3 = function (_a) {
                     routePermissions = permissionCodes.filter(function (p) { return !p.is_action; }).map(function (p) { return p.code; });
                     actionPermissions = permissionCodes.filter(function (p) { return p.is_action; }).map(function (p) { return p.code; });
                     actionPermissionMap = Object.fromEntries(actionPermissions.map(function (code) { return [code, true]; }));
-                    // Mã hoá và lưu vào cookie
-                    (0, saveCookiesClient_1["default"])({ value: tslib_1.__assign(tslib_1.__assign({}, sessionCookie.current), { action_permission: actionPermissionMap }) });
                     uniqueRoutePermissions = Array.from(new Set(routePermissions));
-                    setPerCode(uniqueRoutePermissions);
-                    return [3 /*break*/, 4];
+                    return [2 /*return*/, { uniqueRoutePermissions: uniqueRoutePermissions, actionPermissionMap: actionPermissionMap }];
                 case 2:
                     error_1 = _e.sent();
                     console.error('Error fetching school data:', error_1);
-                    return [3 /*break*/, 4];
-                case 3:
-                    setIsLoadingPermission(false);
-                    return [7 /*endfinally*/];
-                case 4: return [2 /*return*/];
+                    return [2 /*return*/, { uniqueRoutePermissions: null, actionPermissionMap: null }];
+                case 3: return [2 /*return*/];
             }
         });
     }); };
     var getProfileByUser = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-        var response, profileUser, profile_staff, profile_teacher, user_roles, allRoleCodes, userInfoNew, allRoleCodesLength, error_2;
+        var response, profileUser, avatar, email, full_name, profile_staff, profile_teacher, user_avatar, user_roles, error_2;
         return tslib_1.__generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!userSessionInfo)
-                        return [2 /*return*/];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
+                    _a.trys.push([0, 2, , 3]);
                     return [4 /*yield*/, (0, clientQueryV3_1["default"])({
                             query: query_1.QUERY_GET_PROFILE_USER,
                             variables: {
                                 user_id: userId
                             }
                         })];
-                case 2:
+                case 1:
                     response = _a.sent();
                     profileUser = response.data.users_by_pk;
-                    profile_staff = profileUser.profile_staff, profile_teacher = profileUser.profile_teacher, user_roles = profileUser.user_roles;
+                    avatar = profileUser.avatar, email = profileUser.email, full_name = profileUser.full_name, profile_staff = profileUser.profile_staff, profile_teacher = profileUser.profile_teacher, user_avatar = profileUser.user_avatar, user_roles = profileUser.user_roles;
                     // check user is quit job
-                    checkIsQuitJob({ profileStaff: profile_staff, profileTeacher: profile_teacher });
-                    allRoleCodes = user_roles.map(function (userRole) { var _a; return (_a = userRole === null || userRole === void 0 ? void 0 : userRole.role) === null || _a === void 0 ? void 0 : _a.role_code; }) || [];
-                    userInfoNew = tslib_1.__assign(tslib_1.__assign({}, userSessionInfo), { user_roles: user_roles });
-                    (0, saveCookiesClient_1["default"])({ value: tslib_1.__assign(tslib_1.__assign({}, sessionCookie.current), { user_info: userInfoNew }) });
-                    setRoleCode(allRoleCodes);
-                    allRoleCodesLength = allRoleCodes === null || allRoleCodes === void 0 ? void 0 : allRoleCodes.length;
-                    if (allRoleCodes && allRoleCodesLength > 0) {
-                        fetchDataPer()["catch"](console.error);
-                    }
-                    return [3 /*break*/, 4];
-                case 3:
+                    checkIsQuitJob({
+                        profileStaff: profile_staff,
+                        profileTeacher: profile_teacher
+                    });
+                    // renew list role in cookie
+                    return [2 /*return*/, {
+                            avatar: avatar,
+                            user_avatar: user_avatar,
+                            full_name: full_name,
+                            email: email,
+                            user_roles: user_roles
+                        }];
+                case 2:
                     error_2 = _a.sent();
                     console.log(error_2);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+                    return [2 /*return*/];
+                case 3: return [2 /*return*/];
             }
         });
     }); };
-    var fetchDataSchool = function () {
-        if (!userSessionInfo)
-            return;
-        var id = userSessionInfo.id, _a = userSessionInfo.school, group_id = _a.school_name.group_id, school_name_id = _a.school_name_id, school_id = userSessionInfo.school_id;
-        setSchoolId(school_id);
-        var fetchData = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-            var res, listSchool_1, settingFetchData, cleanedJsonString, jsonObjectSetting, settingSiteCookie, error_3;
-            var _a, _b, _c, _d, _e;
-            return tslib_1.__generator(this, function (_f) {
-                switch (_f.label) {
-                    case 0:
-                        setIsLoading(true);
-                        _f.label = 1;
-                    case 1:
-                        _f.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, (0, clientQueryV3_1["default"])({
-                                query: query_1.GET_SCHOOL_V3,
-                                variables: { group_id: group_id, school_name_id: school_name_id, user_id: id },
-                                isDelay: false
-                            })];
-                    case 2:
-                        res = _f.sent();
-                        listSchool_1 = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.school_name[0]) === null || _b === void 0 ? void 0 : _b.schools;
-                        if ((listSchool_1 === null || listSchool_1 === void 0 ? void 0 : listSchool_1.length) > 0) {
-                            setLoadingSchool(false);
-                            setListSchool(listSchool_1);
-                        }
-                        setIsLoading(false);
-                        settingFetchData = (_d = (_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.setting_site[0]) === null || _d === void 0 ? void 0 : _d.value_setting;
-                        if (settingFetchData) {
-                            cleanedJsonString = settingFetchData.replace(/^"(.*)"$/, '$1');
-                            jsonObjectSetting = JSON.parse(cleanedJsonString);
-                            setConfigLayout(jsonObjectSetting);
-                            settingSiteCookie = (_e = sessionCookie.current) === null || _e === void 0 ? void 0 : _e.setting_site;
-                            // Nếu chưa có trong cookie hoặc data trong cookie và db khác nhau
-                            if (!settingSiteCookie || !compareObjects(jsonObjectSetting, settingSiteCookie)) {
-                                (0, saveCookiesClient_1["default"])({ value: tslib_1.__assign(tslib_1.__assign({}, sessionCookie.current), { setting_site: jsonObjectSetting }) });
-                            }
-                        }
+    var fetchDataSchool = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var id, _a, group_id, school_name_id, school_id, settingSiteDb, res, dataSchool, settingFetchData, cleanedJsonString, error_3;
+        var _b, _c, _d, _e;
+        return tslib_1.__generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    if (!userSessionInfo)
                         return [2 /*return*/];
-                    case 3:
-                        error_3 = _f.sent();
-                        setIsLoading(false);
-                        console.error('Error fetching school data:', error_3);
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchData()["catch"](function (err) {
-            console.log(err);
-            setIsLoading(false);
+                    id = userSessionInfo.id, _a = userSessionInfo.school, group_id = _a.school_name.group_id, school_name_id = _a.school_name_id, school_id = userSessionInfo.school_id;
+                    setIsLoading(true);
+                    settingSiteDb = undefined;
+                    _f.label = 1;
+                case 1:
+                    _f.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, (0, clientQueryV3_1["default"])({
+                            query: query_1.GET_SCHOOL_V3,
+                            variables: { group_id: group_id, school_name_id: school_name_id, user_id: id },
+                            isDelay: false
+                        })];
+                case 2:
+                    res = _f.sent();
+                    dataSchool = (_c = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.school_name[0]) === null || _c === void 0 ? void 0 : _c.schools;
+                    settingFetchData = (_e = (_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.setting_site[0]) === null || _e === void 0 ? void 0 : _e.value_setting;
+                    if (settingFetchData) {
+                        cleanedJsonString = settingFetchData.replace(/^"(.*)"$/, '$1');
+                        settingSiteDb = JSON.parse(cleanedJsonString);
+                    }
+                    setIsLoading(false);
+                    return [2 /*return*/, {
+                            settingSiteDb: settingSiteDb,
+                            loadingSchool: dataSchool.length === 0,
+                            listSchool: dataSchool,
+                            schoolId: school_id
+                        }];
+                case 3:
+                    error_3 = _f.sent();
+                    setIsLoading(false);
+                    console.error('Error fetching school data:', error_3);
+                    return [2 /*return*/];
+                case 4: return [2 /*return*/];
+            }
         });
-    };
+    }); };
     var fetchDataMenu = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-        var envPublic, menuUrl, logoMenuTop, data, json;
+        var envPublic, menuUrl, logoMenuTop, data, menuJson;
         return tslib_1.__generator(this, function (_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, (0, getEnvPublic_1["default"])()];
@@ -284,10 +258,53 @@ var PHXMainWrapV3 = function (_a) {
                     data = _a.sent();
                     return [4 /*yield*/, data.json()];
                 case 3:
-                    json = _a.sent();
-                    setMenu(json);
-                    setLogo({ path: logoMenuTop, height: logoHeight });
-                    setLoadingMenu(false);
+                    menuJson = _a.sent();
+                    return [2 /*return*/, {
+                            loadingMenu: false,
+                            logo: { path: logoMenuTop, height: logoHeight },
+                            menu: menuJson
+                        }];
+            }
+        });
+    }); };
+    var fetchInitData = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var _a, loadingMenu, logo, menu, profileNew, dataPer, dataSchool, actionPermissionMap, uniqueRoutePermissions;
+        var _b;
+        return tslib_1.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, fetchDataMenu()];
+                case 1:
+                    _a = _c.sent(), loadingMenu = _a.loadingMenu, logo = _a.logo, menu = _a.menu;
+                    return [4 /*yield*/, getProfileByUser()];
+                case 2:
+                    profileNew = _c.sent();
+                    return [4 /*yield*/, fetchDataPer()];
+                case 3:
+                    dataPer = _c.sent();
+                    return [4 /*yield*/, fetchDataSchool()];
+                case 4:
+                    dataSchool = _c.sent();
+                    actionPermissionMap = dataPer.actionPermissionMap, uniqueRoutePermissions = dataPer.uniqueRoutePermissions;
+                    setDataInitMain({
+                        logo: logo,
+                        menu: menu,
+                        loadingMenu: loadingMenu,
+                        schoolId: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.schoolId) || null,
+                        loadingSchool: !!(dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.loadingSchool),
+                        listSchool: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.listSchool) || [],
+                        isLoadingPermission: false,
+                        perCode: uniqueRoutePermissions,
+                        roleCode: (profileNew === null || profileNew === void 0 ? void 0 : profileNew.user_roles.map(function (userRole) { var _a; return (_a = userRole === null || userRole === void 0 ? void 0 : userRole.role) === null || _a === void 0 ? void 0 : _a.role_code; })) || [],
+                        configLayout: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.settingSiteDb) || undefined,
+                        sourceAvatar: ((_b = profileNew === null || profileNew === void 0 ? void 0 : profileNew.user_avatar) === null || _b === void 0 ? void 0 : _b.size_small) || (profileNew === null || profileNew === void 0 ? void 0 : profileNew.avatar) || constants_1.DEFAULT_AVATAR
+                    });
+                    (0, saveCookiesClient_1["default"])({
+                        value: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, sessionCookie.current), (actionPermissionMap && {
+                            action_permission: actionPermissionMap || []
+                        })), { setting_site: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.settingSiteDb) || {} }), (profileNew && {
+                            user_info: tslib_1.__assign(tslib_1.__assign({}, userSessionInfo), profileNew)
+                        }))
+                    });
                     return [2 /*return*/];
             }
         });
@@ -298,21 +315,13 @@ var PHXMainWrapV3 = function (_a) {
             requireLoginValidation();
             return;
         }
-        fetchDataMenu()["catch"](console.error);
-        getProfileByUser();
-        fetchDataSchool();
+        fetchInitData();
     }, []);
-    var requireLoginValidation = function () {
-        var currentURL = window.location.href;
-        var url = currentURL.split('/');
-        var loginPush = "".concat(url[0], "//").concat(url[2], "/login-sso");
-        window.location.replace(loginPush);
-    };
-    var isEqualUrl = function (parentHref, pathName) {
-        if (!parentHref || !pathName) {
+    var isEqualUrl = function (parentHref, pathNameCompare) {
+        if (!parentHref || !pathNameCompare) {
             return false;
         }
-        var pathNameSplit = pathName.split('/');
+        var pathNameSplit = pathNameCompare.split('/');
         var hrefSplit = parentHref.split('/');
         if (!pathNameSplit || !hrefSplit) {
             return false;
@@ -329,9 +338,25 @@ var PHXMainWrapV3 = function (_a) {
         }
         return urlRouter === currentMenu;
     };
-    var isBelongParent = function (parentUrl, pathName) {
+    var isBelongParentWithMicroservice = function (parentSplit, pathNameSplit) {
+        if (parentSplit.length > 2) {
+            var compareLength = parentSplit.length;
+            for (var i = 1; i < compareLength; i++) {
+                if (parentSplit[i] !== pathNameSplit[i])
+                    return false;
+            }
+            return true;
+        }
+        else {
+            return parentSplit[1] === pathNameSplit[3];
+        }
+    };
+    var isBelongParent = function (parentUrl, pathNameCompare, isMicroservice) {
         var parentSplit = parentUrl.split('/');
-        var pathNameSplit = pathName.split('/');
+        var pathNameSplit = pathNameCompare.split('/');
+        if (isMicroservice) {
+            return isBelongParentWithMicroservice(parentSplit, pathNameSplit);
+        }
         if (parentSplit.length > 2 && !parentSplit.includes('list')) {
             return parentSplit[1] === pathNameSplit[2] && parentSplit[2] === pathNameSplit[3];
         }
@@ -344,7 +369,7 @@ var PHXMainWrapV3 = function (_a) {
         return pathNameSplit[1] === 'admissions';
     };
     var loadParentNavigation = function (path) {
-        var mainNavigation = menu;
+        var mainNavigation = dataInitMain.menu;
         var naviSize = mainNavigation.length;
         for (var i = 0; i < naviSize; i++) {
             var item = mainNavigation[i];
@@ -357,18 +382,22 @@ var PHXMainWrapV3 = function (_a) {
                 for (var j = 0; j < itemLength; j++) {
                     var childItem = item.child[j];
                     // Active child item
-                    childItem.current = isBelongParent(childItem.path, path);
+                    childItem.current = isBelongParent(childItem.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice));
                     if (childItem.child) {
                         var childItemLength = childItem.child.length;
                         var count = 0;
                         for (var k = 0; k < childItemLength; k++) {
                             var subChild = childItem.child[k];
-                            subChild.current = isBelongParent(subChild.path, path);
-                            if (isBelongParent(subChild.path, path) || isBelongParent(childItem.path, path)) {
+                            subChild.current = isBelongParent(subChild.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice));
+                            if (isBelongParent(subChild.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice)) ||
+                                isBelongParent(childItem.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice))) {
                                 count++;
                             }
+                            var isPathInternal = (childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice)
+                                ? subChild.path === (childItem === null || childItem === void 0 ? void 0 : childItem.pathInternal)
+                                : subChild.path === childItem.path;
                             count > 0 ? (childItem.showChild = true) : (childItem.showChild = false);
-                            subChild.path === childItem.path ? (childItem.current = false) : null;
+                            isPathInternal ? (childItem.current = false) : null;
                         }
                     }
                     listChildren.push(childItem);
@@ -379,7 +408,7 @@ var PHXMainWrapV3 = function (_a) {
         setNavigation(mainNavigation);
     };
     var loadChildrenCampaign = function (path) {
-        var mainNavigation = menu;
+        var mainNavigation = dataInitMain.menu;
         var naviSize = mainNavigation.length;
         for (var i = 0; i < naviSize; i++) {
             var item = mainNavigation[i];
@@ -395,13 +424,13 @@ var PHXMainWrapV3 = function (_a) {
                 for (var j = 0; j < itemLength; j++) {
                     var childItem = listCampaign === null || listCampaign === void 0 ? void 0 : listCampaign.childrenByParentDetail[j];
                     // Active child item
-                    childItem.current = isBelongParent(childItem.path, path);
+                    childItem.current = isBelongParent(childItem.path, path, false);
                     if (childItem.child) {
                         var childItemLength = childItem.child.length;
                         for (var k = 0; k < childItemLength; k++) {
                             var subChild = childItem.child[k];
-                            subChild.current = isBelongParent(subChild.path, path);
-                            if (isBelongParent(subChild.path, path) || isBelongParent(childItem.path, path)) {
+                            subChild.current = isBelongParent(subChild.path, path, false);
+                            if (isBelongParent(subChild.path, path, false) || isBelongParent(childItem.path, path, false)) {
                                 childItem.showChild = true;
                             }
                             subChild.path === childItem.path ? (childItem.current = false) : null;
@@ -415,10 +444,11 @@ var PHXMainWrapV3 = function (_a) {
         setNavigation(mainNavigation);
     };
     var checkChildrenCampaign = function (path) {
-        var campaignMenu = menu === null || menu === void 0 ? void 0 : menu.find(function (item) { return item.path === '/admissions/campaign/list'; });
+        var _a;
+        var campaignMenu = (_a = dataInitMain.menu) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item.path === '/admissions/campaign/list'; });
         var campaignChild = campaignMenu === null || campaignMenu === void 0 ? void 0 : campaignMenu.child;
         var listChild = campaignChild === null || campaignChild === void 0 ? void 0 : campaignChild.find(function (item) { return item.path === '/campaign/list'; });
-        var isChild = listChild === null || listChild === void 0 ? void 0 : listChild.childrenByParentDetail.find(function (item) { return isBelongParent(item.path, path); });
+        var isChild = listChild === null || listChild === void 0 ? void 0 : listChild.childrenByParentDetail.find(function (item) { return isBelongParent(item.path, path, false); });
         return isChild !== undefined;
     };
     (0, react_2.useEffect)(function () {
@@ -447,7 +477,7 @@ var PHXMainWrapV3 = function (_a) {
             loadParentNavigation(pathNameWithBasePath);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [menu, pid, pathNameWithBasePath]);
+    }, [dataInitMain, pid, pathNameWithBasePath]);
     (0, react_2.useEffect)(function () {
         var isAdmissions = checkAdmissions(pathNameWithBasePath);
         if (isAdmissions) {
@@ -464,7 +494,7 @@ var PHXMainWrapV3 = function (_a) {
         else {
             setOpenSubMenu(true);
         }
-    }, [pathNameWithBasePath, menu]);
+    }, [pathNameWithBasePath, dataInitMain]);
     var loadSubNavigation = function (path, isChild, childPath) {
         var subLength = subNavigation.length;
         var newSub = [];
@@ -506,7 +536,7 @@ var PHXMainWrapV3 = function (_a) {
             router.push(item.path);
         }
     };
-    var height = logo.height, topMenuLogoFromEnv = logo.path;
+    var topMenuLogoFromEnv = dataInitMain.logo.path;
     var handleModalSignOut = function () { return setModalSignOut(true); };
     var handleRedirectRouter = function (path) {
         var currentURL = window.location.href;
@@ -560,11 +590,11 @@ var PHXMainWrapV3 = function (_a) {
         var currentIndexActive = item.find(function (s) { return s.current; });
         return currentIndexActive ? currentIndexActive.id > currentItem.id : false;
     };
-    var _3 = (0, react_2.useState)(false), openNavName = _3[0], setOpenNavName = _3[1];
-    var _4 = (0, react_2.useState)(false), showSearchBar = _4[0], setShowSearchBar = _4[1];
-    var _5 = (0, react_2.useState)(null), selected = _5[0], setSelected = _5[1];
+    var _v = (0, react_2.useState)(false), openNavName = _v[0], setOpenNavName = _v[1];
+    var _w = (0, react_2.useState)(false), showSearchBar = _w[0], setShowSearchBar = _w[1];
+    var _x = (0, react_2.useState)(null), selected = _x[0], setSelected = _x[1];
     var handleOpenModal = function (id) {
-        setModal(id !== schoolId);
+        setModal(id !== dataInitMain.schoolId);
         setSelected(id);
     };
     var handlePrimaryModal = function () {
@@ -574,7 +604,9 @@ var PHXMainWrapV3 = function (_a) {
                 var schoolIdCurrent = userSessionInfo.school_id;
                 if (newSchoolId && newSchoolId !== schoolIdCurrent) {
                     var userInfoNew = tslib_1.__assign(tslib_1.__assign({}, userSessionInfo), { school_id: newSchoolId });
-                    (0, saveCookiesClient_1["default"])({ value: tslib_1.__assign(tslib_1.__assign({}, sessionCookie.current), { user_info: userInfoNew }) });
+                    (0, saveCookiesClient_1["default"])({
+                        value: tslib_1.__assign(tslib_1.__assign({}, sessionCookie.current), { user_info: userInfoNew })
+                    });
                     window.location.replace(constants_1.ROUTE_DASHBOARD);
                 }
             }
@@ -584,20 +616,19 @@ var PHXMainWrapV3 = function (_a) {
         }
         setModal(false);
     };
-    var sourceAvatar = ((_c = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.user_avatar) === null || _c === void 0 ? void 0 : _c.size_small) || (userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.avatar) || constants_1.DEFAULT_AVATAR;
     // settings page
     var isSettings = function () {
         var pathNameSplit = pathNameWithBasePath.split('/');
         return pathNameSplit[1] === 'setting';
     };
-    var checkLogoHeader = (configLayout === null || configLayout === void 0 ? void 0 : configLayout.logo_dashboard) || topMenuLogoFromEnv || constants_1.DEFAULT_LOGO_DASHBOARD;
+    var checkLogoHeader = ((_d = dataInitMain.configLayout) === null || _d === void 0 ? void 0 : _d.logo_dashboard) || topMenuLogoFromEnv || constants_1.DEFAULT_LOGO_DASHBOARD;
     return (react_2["default"].createElement(react_2["default"].Fragment, null,
         react_2["default"].createElement("div", { className: 'flex min-h-full flex-col' },
-            react_2["default"].createElement(appearance_styled_1["default"], { configLayout: configLayout, settingSiteCookie: getDataCookies ? (_d = (0, helpers_1.decryptCookie)(getDataCookies)) === null || _d === void 0 ? void 0 : _d.setting_site : null }),
+            react_2["default"].createElement(appearance_styled_1["default"], { configLayout: dataInitMain === null || dataInitMain === void 0 ? void 0 : dataInitMain.configLayout, settingSiteCookie: (_e = sessionCookie.current) === null || _e === void 0 ? void 0 : _e.setting_site }),
             react_2["default"].createElement("header", { className: 'header-color-styled fixed top-0 z-50 min-w-full border-gray-200 bg-white' },
                 react_2["default"].createElement("div", { className: 'header-styled mx-auto flex h-14 items-center justify-between bg-[#1a1a1a] pr-4' },
-                    react_2["default"].createElement("div", { className: 'flex items-center gap-x-3 lg:w-32' },
-                        react_2["default"].createElement("a", { className: 'flex w-full items-center', href: '/' }, topMenuLogoFromEnv ? (react_2["default"].createElement(react_2["default"].Fragment, null, isLoading ? (react_2["default"].createElement("div", { className: 'header-loading-logo ml-3 h-8 w-full animate-pulse' })) : (react_2["default"].createElement("img", { alt: 'Logo', className: 'ml-3 w-auto', src: checkLogoHeader, style: { height: height } })))) : (react_2["default"].createElement(react_2["default"].Fragment, null))),
+                    react_2["default"].createElement("div", { className: 'flex items-center gap-x-3' },
+                        react_2["default"].createElement("a", { className: 'flex w-full items-center', href: '/' }, topMenuLogoFromEnv ? (react_2["default"].createElement(react_2["default"].Fragment, null, isLoading ? (react_2["default"].createElement("div", { className: 'header-loading-logo ml-3 h-8 w-full animate-pulse' })) : (react_2["default"].createElement("img", { alt: 'Logo', className: 'ml-3 h-auto max-w-48 w-auto max-h-7', src: checkLogoHeader, style: { maxWidth: '12rem' } })))) : (react_2["default"].createElement(react_2["default"].Fragment, null))),
                         react_2["default"].createElement("div", { className: 'flex items-center lg:hidden' },
                             react_2["default"].createElement("button", { className: 'bg-grey-100 mr-3 inline-flex items-center justify-center rounded-md p-1 text-gray-600 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white', onClick: function () { return setSidebarOpen(true); }, type: 'button' },
                                 react_2["default"].createElement("span", { className: 'sr-only' }, "Open sidebar"),
@@ -610,33 +641,34 @@ var PHXMainWrapV3 = function (_a) {
                                     react_2["default"].createElement(react_1.Menu.Button, { className: 'flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800' },
                                         react_2["default"].createElement("span", { className: 'sr-only' }, "Open user menu"),
                                         isLoading ? (react_2["default"].createElement("div", { className: 'flex animate-pulse' },
-                                            react_2["default"].createElement("div", { className: 'header-loading-avatar h-8 w-8 rounded-full' }))) : (react_2["default"].createElement("img", { alt: '', className: 'h-8 w-8 rounded-full', src: sourceAvatar })))),
+                                            react_2["default"].createElement("div", { className: 'header-loading-avatar h-8 w-8 rounded-full' }))) : (react_2["default"].createElement("img", { alt: '', className: 'h-8 w-8 rounded-full', src: dataInitMain.sourceAvatar })))),
                                 react_2["default"].createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
                                     react_2["default"].createElement(react_1.Menu.Items, { className: ' absolute right-0 z-10 mt-2 w-[340px] origin-top-right rounded-md bg-white px-2 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none' },
                                         react_2["default"].createElement(react_1.Menu.Item, null,
                                             react_2["default"].createElement("div", { "aria-hidden": true, className: 'px-2 pb-2 pt-4 text-sm font-semibold text-gray-900 ' }, "Ch\u1ECDn tr\u01B0\u1EDDng")),
-                                        !loadingSchool ? (react_2["default"].createElement(react_2["default"].Fragment, null, listSchool
+                                        !dataInitMain.loadingSchool ? (react_2["default"].createElement(react_2["default"].Fragment, null, dataInitMain.listSchool
                                             .filter(function (val) {
-                                            if (!enablePer(constants_1.switchSchool, perCode)) {
-                                                return val.id === schoolId;
+                                            if (!enablePer(constants_1.switchSchool, dataInitMain.perCode)) {
+                                                return val.id === dataInitMain.schoolId;
                                             }
                                             else {
                                                 return true;
                                             }
                                         })
                                             .map(function (item) { return (react_2["default"].createElement(react_1.Menu.Item, { key: item.id },
-                                            react_2["default"].createElement("div", { "aria-hidden": true, className: "".concat(item.id === schoolId &&
-                                                    listSchool.length > 1 &&
-                                                    !enablePer(constants_1.switchSchool, perCode) === false
+                                            react_2["default"].createElement("div", { "aria-hidden": true, className: "".concat(item.id === dataInitMain.schoolId &&
+                                                    dataInitMain.listSchool.length > 1 &&
+                                                    !enablePer(constants_1.switchSchool, dataInitMain.perCode) === false
                                                     ? 'rounded-lg bg-zinc-200 font-semibold text-gray-900 '
-                                                    : 'font-normal   ', " \n                                  ").concat(item.id !== schoolId &&
-                                                    (listSchool.length === 1 || !enablePer(constants_1.switchSchool, perCode)) === false
+                                                    : 'font-normal   ', " \n                                  ").concat(item.id !== dataInitMain.schoolId &&
+                                                    (dataInitMain.listSchool.length === 1 ||
+                                                        !enablePer(constants_1.switchSchool, dataInitMain.perCode)) === false
                                                     ? 'cursor-pointer hover:rounded-lg hover:bg-gray-100'
                                                     : '', "\n                              relative mb-1  flex items-center justify-between px-2  py-1.5 text-sm text-gray-900"), onClick: function () { return handleOpenModal(item.id); } },
                                                 react_2["default"].createElement("p", { className: 'max-w-[95%] truncate' }, item.name),
-                                                item.id === schoolId &&
-                                                    listSchool.length > 1 &&
-                                                    !enablePer(constants_1.switchSchool, perCode) === false && (react_2["default"].createElement(solid_2.CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))))); }))) : (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { className: 'flex-1 px-2 py-2', type: 'single' })),
+                                                item.id === dataInitMain.schoolId &&
+                                                    dataInitMain.listSchool.length > 1 &&
+                                                    !enablePer(constants_1.switchSchool, dataInitMain.perCode) === false && (react_2["default"].createElement(solid_2.CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))))); }))) : (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { className: 'flex-1 px-2 py-2', type: 'single' })),
                                         react_2["default"].createElement("div", { className: 'border-b pt-1.5' }),
                                         react_2["default"].createElement(react_1.Menu.Item, null,
                                             react_2["default"].createElement("div", { "aria-hidden": true, className: 'px-2 pb-2 pt-4  text-sm font-semibold text-gray-900' }, "T\u00F9y ch\u1ECDn")),
@@ -663,7 +695,7 @@ var PHXMainWrapV3 = function (_a) {
                                             react_2["default"].createElement("span", { className: 'sr-only' }, "Close sidebar"),
                                             react_2["default"].createElement(outline_1.XMarkIcon, { "aria-hidden": 'true', className: 'h-6 w-6 text-white' })))),
                                 react_2["default"].createElement("div", { className: 'mt-8 h-0 flex-1 overflow-y-auto pb-4 pt-5' },
-                                    react_2["default"].createElement(nav_mobile_1["default"], { menu: menu, path: pathNameWithBasePath, permission: perCode, router: router, setSideBarOpen: function () { return setSidebarOpen(false); } })))),
+                                    react_2["default"].createElement(nav_mobile_1["default"], { menu: dataInitMain.menu, path: pathNameWithBasePath, permission: dataInitMain.perCode, router: router, setSideBarOpen: function () { return setSidebarOpen(false); } })))),
                         react_2["default"].createElement("div", { "aria-hidden": 'true', className: 'w-14 flex-shrink-0' })))),
             react_2["default"].createElement("div", { className: 'hidden lg:flex lg:flex-shrink-0' },
                 react_2["default"].createElement("div", { className: 'flex' },
@@ -671,7 +703,7 @@ var PHXMainWrapV3 = function (_a) {
                         react_2["default"].createElement("div", { "aria-hidden": true, className: "".concat(openNavName ? 'w-64' : 'w-14', " menu-styled z-10 flex h-full flex-col justify-between border-r !bg-gray-200 transition-all duration-300 lg:fixed"), onMouseOut: function () { return setOpenNavName(false); }, onMouseOver: function () { return setOpenNavName(true); } },
                             react_2["default"].createElement("div", { className: classNames('flex flex-1 flex-col', openNavName ? 'overflow-y-auto' : 'overflow-y-hidden') },
                                 react_2["default"].createElement("div", { className: 'relative flex-1' },
-                                    react_2["default"].createElement("div", { "aria-label": 'Sidebar', className: 'hidden overflow-x-hidden md:block md:flex-shrink-0 md:overflow-y-auto' }, !hiddenLeftMenu && (react_2["default"].createElement("div", { className: "space-y- flex ".concat(openNavName ? 'w-64' : 'w-12', " flex-col overflow-hidden p-3") }, navigation.map(function (item, index) { return (react_2["default"].createElement("div", { key: index, className: 'w-full' }, enablePer(item.code, perCode) && (react_2["default"].createElement("a", { className: "".concat(classNames(item.current && !openNavName
+                                    react_2["default"].createElement("div", { "aria-label": 'Sidebar', className: 'hidden overflow-x-hidden md:block md:flex-shrink-0 md:overflow-y-auto' }, !hiddenLeftMenu && (react_2["default"].createElement("div", { className: "space-y- flex ".concat(openNavName ? 'w-64' : 'w-12', " flex-col overflow-hidden p-3") }, navigation.map(function (item, index) { return (react_2["default"].createElement("div", { key: index, className: 'w-full' }, enablePer(item.code, dataInitMain.perCode) && (react_2["default"].createElement("a", { className: "".concat(classNames(item.current && !openNavName
                                             ? 'menu-bg-color-icon-active-styled font-semibold' // màu background của icon đang active của menu
                                             : 'menu-icon-color-styled', // màu icon của menu
                                         !openNavName
@@ -693,7 +725,7 @@ var PHXMainWrapV3 = function (_a) {
                                             react_2["default"].createElement(image_1["default"], { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem] text-gray-950', openNavName && 'mt-[0.2rem]'), height: 0, src: item.current ? Icon_1.Icons["".concat(item.code, "_SOLID")] : Icon_1.Icons[item.code], width: 0 })),
                                             openNavName && (react_2["default"].createElement("div", { className: 'h-6' },
                                                 react_2["default"].createElement("p", { className: "mt-0.5 h-full text-[0.86rem] text-[#353A44] transition-all duration-300 ".concat(openNavName ? 'opacity-100' : 'opacity-0') }, item.name)))))))); })))))),
-                            react_2["default"].createElement("div", { className: classNames('border-t', navigation.length > 0 && ((_e = navigation[0]) === null || _e === void 0 ? void 0 : _e.isSchoolink) ? 'border-[#1c222b]' : 'border-indigo-100') },
+                            react_2["default"].createElement("div", { className: classNames('border-t', navigation.length > 0 && ((_f = navigation[0]) === null || _f === void 0 ? void 0 : _f.isSchoolink) ? 'border-[#1c222b]' : 'border-indigo-100') },
                                 react_2["default"].createElement("div", { className: "mb-14 flex ".concat(openNavName ? 'w-64' : 'w-12', " overflow-hidden p-3") },
                                     react_2["default"].createElement("a", { className: classNames('z-0', !openNavName
                                             ? 'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg'
@@ -721,62 +753,78 @@ var PHXMainWrapV3 = function (_a) {
                                         react_2["default"].createElement("button", { className: 'mr-1 inline-flex items-center rounded-lg border-gray-300 bg-transparent px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200 active:bg-gray-300 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', onClick: function () { return handleBackMenu(); }, type: 'button' },
                                             react_2["default"].createElement(solid_1.ArrowLeftIcon, { className: 'h-5 w-5' })),
                                         react_2["default"].createElement("p", { className: 'text-sm font-medium text-slate-600' }, campaignName))),
-                                    react_2["default"].createElement("div", { className: 'flex-1 overflow-y-auto pt-3' }, subNavigation.map(function (item, subNavIndex) { return (react_2["default"].createElement("div", { key: subNavIndex }, (roleCode === null || roleCode === void 0 ? void 0 : roleCode.length) > 0 ? (react_2["default"].createElement(react_2["default"].Fragment, null, enablePer(item.code, perCode) ? (react_2["default"].createElement(react_2["default"].Fragment, null,
-                                        react_2["default"].createElement("div", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames((item === null || item === void 0 ? void 0 : item.current)
-                                                ? 'rounded-lg bg-white' // màu background menu cha khi active
-                                                : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // màu background khi hover vào menu cha
-                                            'mx-3 flex cursor-pointer border-slate-200 p-2'), onClick: function () { return subNavigationTriggerClicked(item); } }, !loadingMenu ? (react_2["default"].createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
-                                            react_2["default"].createElement("div", { className: 'flex items-center gap-x-3' },
-                                                react_2["default"].createElement("p", { className: classNames('leading-5', (item === null || item === void 0 ? void 0 : item.current) ? '' : 'font-normal text-[#353A44]') }, item === null || item === void 0 ? void 0 : item.name)),
-                                            react_2["default"].createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' }))),
-                                        item.showChild && item.child && (react_2["default"].createElement(react_2["default"].Fragment, null, item.child.map(function (children, childIndex) { return (react_2["default"].createElement("div", { key: childIndex, className: classNames('relative') },
-                                            react_2["default"].createElement("div", { style: (children === null || children === void 0 ? void 0 : children.current)
-                                                    ? sub_menu_style_1.styles.childMenuActiveBefore
-                                                    : checkChildBefore(item.child, children)
-                                                        ? sub_menu_style_1.styles.childMenuBefBefore
-                                                        : {} }),
-                                            react_2["default"].createElement("div", { "aria-hidden": true, className: classNames('mx-3 flex cursor-pointer border-slate-200 p-2 text-[0.84rem]', (children === null || children === void 0 ? void 0 : children.current)
-                                                    ? 'rounded-lg bg-white text-[#353A44]' // màu chữ menu con khi active
-                                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50 hover:text-[#353A44]'), onClick: enablePer(children.code, perCode)
-                                                    ? function () { return subNavigationTriggerClicked(children, item); }
-                                                    : undefined },
+                                    react_2["default"].createElement("div", { className: 'flex-1 overflow-y-auto pt-3' }, subNavigation.map(function (item, subNavIndex) {
+                                        var _a;
+                                        return (react_2["default"].createElement("div", { key: subNavIndex }, ((_a = dataInitMain.roleCode) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (react_2["default"].createElement(react_2["default"].Fragment, null, enablePer(item.code, dataInitMain.perCode) ? (react_2["default"].createElement(react_2["default"].Fragment, null,
+                                            (item === null || item === void 0 ? void 0 : item.isMicroservice) ? (react_2["default"].createElement("a", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames((item === null || item === void 0 ? void 0 : item.current)
+                                                    ? 'rounded-lg bg-white' // màu background menu cha khi active
+                                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // màu background khi hover vào menu cha
+                                                'mx-3 flex cursor-pointer border-slate-200 p-2'), href: item.path }, !dataInitMain.loadingMenu ? (react_2["default"].createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
                                                 react_2["default"].createElement("div", { className: 'flex items-center gap-x-3' },
-                                                    react_2["default"].createElement("div", { className: 'w-3' }),
-                                                    react_2["default"].createElement("p", { className: classNames('my-[0.05rem] ml-3 leading-5', !enablePer(children.code, perCode)
-                                                            ? 'font-normal text-gray-300'
-                                                            : (children === null || children === void 0 ? void 0 : children.current)
-                                                                ? ''
-                                                                : 'font-normal text-[#353A44]') }, children.name))),
-                                            react_2["default"].createElement("div", { style: (children === null || children === void 0 ? void 0 : children.current)
-                                                    ? sub_menu_style_1.styles.childMenuActiveAfter
-                                                    : checkChildBefore(item.child, children)
-                                                        ? sub_menu_style_1.styles.childMenuBefAfter
-                                                        : {} }))); }))))) : (react_2["default"].createElement("div", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, className: classNames((item === null || item === void 0 ? void 0 : item.current)
-                                            ? 'rounded-lg bg-white '
-                                            : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // hover:bg-white
-                                        'mx-3 flex cursor-pointer border-slate-200 p-2') }, !loadingMenu ? (react_2["default"].createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
-                                        react_2["default"].createElement("div", { className: 'flex items-center gap-x-3 text-gray-700' },
-                                            react_2["default"].createElement("p", { className: classNames('font-normal leading-5 text-gray-300') }, item === null || item === void 0 ? void 0 : item.name)),
-                                        react_2["default"].createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))))) : (react_2["default"].createElement(react_2["default"].Fragment, null,
-                                        react_2["default"].createElement("div", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames((item === null || item === void 0 ? void 0 : item.current)
-                                                ? 'rounded-lg bg-white'
-                                                : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', 'mx-1 flex cursor-pointer border-slate-200 p-2'), onClick: function () { return subNavigationTriggerClicked(item); } }, !loadingMenu ? (react_2["default"].createElement("div", { className: 'ml-3 flex items-center text-[0.84rem]' },
+                                                    react_2["default"].createElement("p", { className: classNames('leading-5', (item === null || item === void 0 ? void 0 : item.current) ? '' : 'font-normal text-[#353A44]') }, item === null || item === void 0 ? void 0 : item.name)),
+                                                react_2["default"].createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))) : (react_2["default"].createElement("div", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames((item === null || item === void 0 ? void 0 : item.current)
+                                                    ? 'rounded-lg bg-white' // màu background menu cha khi active
+                                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // màu background khi hover vào menu cha
+                                                'mx-3 flex cursor-pointer border-slate-200 p-2'), onClick: function () { return subNavigationTriggerClicked(item); } }, !dataInitMain.loadingMenu ? (react_2["default"].createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
+                                                react_2["default"].createElement("div", { className: 'flex items-center gap-x-3' },
+                                                    react_2["default"].createElement("p", { className: classNames('leading-5', (item === null || item === void 0 ? void 0 : item.current) ? '' : 'font-normal text-[#353A44]') }, item === null || item === void 0 ? void 0 : item.name)),
+                                                react_2["default"].createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))),
+                                            item.showChild && item.child && (react_2["default"].createElement(react_2["default"].Fragment, null, item.child.map(function (children, childIndex) { return (react_2["default"].createElement("div", { key: childIndex, className: classNames('relative') },
+                                                react_2["default"].createElement("div", { style: (children === null || children === void 0 ? void 0 : children.current)
+                                                        ? sub_menu_style_1.styles.childMenuActiveBefore
+                                                        : checkChildBefore(item.child, children)
+                                                            ? sub_menu_style_1.styles.childMenuBefBefore
+                                                            : {} }),
+                                                react_2["default"].createElement("div", { "aria-hidden": true, className: classNames('mx-3 flex cursor-pointer border-slate-200 p-2 text-[0.84rem]', (children === null || children === void 0 ? void 0 : children.current)
+                                                        ? 'rounded-lg bg-white text-[#353A44]' // màu chữ menu con khi active
+                                                        : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50 hover:text-[#353A44]'), onClick: enablePer(children.code, dataInitMain.perCode)
+                                                        ? function () { return subNavigationTriggerClicked(children, item); }
+                                                        : undefined },
+                                                    react_2["default"].createElement("div", { className: 'flex items-center gap-x-3' },
+                                                        react_2["default"].createElement("div", { className: 'w-3' }),
+                                                        react_2["default"].createElement("p", { className: classNames('my-[0.05rem] ml-3 leading-5', !enablePer(children.code, dataInitMain.perCode)
+                                                                ? 'font-normal text-gray-300'
+                                                                : (children === null || children === void 0 ? void 0 : children.current)
+                                                                    ? ''
+                                                                    : 'font-normal text-[#353A44]') }, children.name))),
+                                                react_2["default"].createElement("div", { style: (children === null || children === void 0 ? void 0 : children.current)
+                                                        ? sub_menu_style_1.styles.childMenuActiveAfter
+                                                        : checkChildBefore(item.child, children)
+                                                            ? sub_menu_style_1.styles.childMenuBefAfter
+                                                            : {} }))); }))))) : (react_2["default"].createElement("div", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, className: classNames((item === null || item === void 0 ? void 0 : item.current)
+                                                ? 'rounded-lg bg-white '
+                                                : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // hover:bg-white
+                                            'mx-3 flex cursor-pointer border-slate-200 p-2') }, !dataInitMain.loadingMenu ? (react_2["default"].createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
                                             react_2["default"].createElement("div", { className: 'flex items-center gap-x-3 text-gray-700' },
-                                                react_2["default"].createElement("p", { className: classNames('font-normal leading-5 text-gray-600') }, item === null || item === void 0 ? void 0 : item.name)),
-                                            react_2["default"].createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' }))),
-                                        item.showChild && item.child && (react_2["default"].createElement(react_2["default"].Fragment, null, item.child.map(function (children, index) { return (react_2["default"].createElement("div", { key: index, className: classNames('relative', (children === null || children === void 0 ? void 0 : children.current) && 'child-menu-active', checkChildBefore(item.child, children) && 'child-menu-bef') },
-                                            react_2["default"].createElement("div", { "aria-hidden": true, className: classNames('mx-1 flex cursor-pointer border-slate-200 p-2 text-[0.84rem]', (children === null || children === void 0 ? void 0 : children.current)
-                                                    ? 'rounded-lg bg-white text-gray-900 '
-                                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50 hover:text-gray-900'), onClick: function () { return subNavigationTriggerClicked(children, item); } },
+                                                react_2["default"].createElement("p", { className: classNames('font-normal leading-5 text-gray-300') }, item === null || item === void 0 ? void 0 : item.name)),
+                                            react_2["default"].createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))))) : (react_2["default"].createElement(react_2["default"].Fragment, null,
+                                            (item === null || item === void 0 ? void 0 : item.isMicroservice) ? (react_2["default"].createElement("a", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames((item === null || item === void 0 ? void 0 : item.current)
+                                                    ? 'rounded-lg bg-white' // màu background menu cha khi active
+                                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // màu background khi hover vào menu cha
+                                                'mx-3 flex cursor-pointer border-slate-200 p-2'), href: item.path }, !dataInitMain.loadingMenu ? (react_2["default"].createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
+                                                react_2["default"].createElement("div", { className: 'flex items-center gap-x-3' },
+                                                    react_2["default"].createElement("p", { className: classNames('leading-5', (item === null || item === void 0 ? void 0 : item.current) ? '' : 'font-normal text-[#353A44]') }, item === null || item === void 0 ? void 0 : item.name)),
+                                                react_2["default"].createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))) : (react_2["default"].createElement("div", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames((item === null || item === void 0 ? void 0 : item.current)
+                                                    ? 'rounded-lg bg-white' // màu background menu cha khi active
+                                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // màu background khi hover vào menu cha
+                                                'mx-3 flex cursor-pointer border-slate-200 p-2'), onClick: function () { return subNavigationTriggerClicked(item); } }, !dataInitMain.loadingMenu ? (react_2["default"].createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
                                                 react_2["default"].createElement("div", { className: 'flex items-center gap-x-3' },
-                                                    react_2["default"].createElement("div", { className: 'w-3' }),
-                                                    react_2["default"].createElement("p", { className: classNames('my-[0.05rem] ml-3 leading-5', (children === null || children === void 0 ? void 0 : children.current) ? 'font-semibold' : 'font-normal text-gray-600') }, children.name))))); }))))))); }))))))))),
+                                                    react_2["default"].createElement("p", { className: classNames('leading-5', (item === null || item === void 0 ? void 0 : item.current) ? '' : 'font-normal text-[#353A44]') }, item === null || item === void 0 ? void 0 : item.name)),
+                                                react_2["default"].createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (react_2["default"].createElement(Skeleton_1.PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))),
+                                            item.showChild && item.child && (react_2["default"].createElement(react_2["default"].Fragment, null, item.child.map(function (children, index) { return (react_2["default"].createElement("div", { key: index, className: classNames('relative', (children === null || children === void 0 ? void 0 : children.current) && 'child-menu-active', checkChildBefore(item.child, children) && 'child-menu-bef') },
+                                                react_2["default"].createElement("div", { "aria-hidden": true, className: classNames('mx-1 flex cursor-pointer border-slate-200 p-2 text-[0.84rem]', (children === null || children === void 0 ? void 0 : children.current)
+                                                        ? 'rounded-lg bg-white text-gray-900 '
+                                                        : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50 hover:text-gray-900'), onClick: function () { return subNavigationTriggerClicked(children, item); } },
+                                                    react_2["default"].createElement("div", { className: 'flex items-center gap-x-3' },
+                                                        react_2["default"].createElement("div", { className: 'w-3' }),
+                                                        react_2["default"].createElement("p", { className: classNames('my-[0.05rem] ml-3 leading-5', (children === null || children === void 0 ? void 0 : children.current) ? 'font-semibold' : 'font-normal text-gray-600') }, children.name))))); })))))));
+                                    }))))))))),
             react_2["default"].createElement("div", { className: 'flex min-w-0 flex-1 flex-col overflow-hidden' },
                 react_2["default"].createElement("main", { className: 'flex flex-1 overflow-hidden' },
                     react_2["default"].createElement("section", { "aria-labelledby": 'primary-heading', className: 'flex h-full min-w-0 flex-1 flex-col lg:order-last' },
                         react_2["default"].createElement("div", { className: 'sticky top-0 z-10 flex h-14 flex-shrink-0 border-b border-l bg-bgcl-50 px-4 sm:px-6 lg:px-4' }),
                         react_2["default"].createElement("div", { className: "".concat(openSubMenu ? 'lg:ml-[20.063rem]' : 'lg:ml-[5.063rem]', " bg-gray-100 px-6") },
-                            react_2["default"].createElement("div", { className: 'py-4' }, isLoadingPermission ? ('') : enablePer(currentCode, perCode) ? (children) : (react_2["default"].createElement(Card_1.PHXCard, null,
+                            react_2["default"].createElement("div", { className: 'py-4' }, dataInitMain.isLoadingPermission ? ('') : enablePer(currentCode, dataInitMain.perCode) ? (children) : (react_2["default"].createElement(Card_1.PHXCard, null,
                                 react_2["default"].createElement("div", { className: 'mb-10 mt-10 sm:mb-20 sm:mt-20 lg:mb-32 lg:mt-32' },
                                     react_2["default"].createElement("div", { className: 'flex items-center justify-center' },
                                         react_2["default"].createElement(outline_1.LockClosedIcon, { className: 'text-gray-400', height: 70, width: 70 })),