phx-react 1.3.1288 → 1.3.1290

package/dist/esm/components/MainWrapV4/MainWrapV4.js

@@ -0,0 +1,875 @@
+import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { Menu, Transition } from '@headlessui/react';
+import { ArrowLeftIcon } from '@heroicons/react/20/solid';
+import { Bars3Icon, LockClosedIcon } from '@heroicons/react/24/outline';
+import { CheckIcon } from '@heroicons/react/24/solid';
+import axios from 'axios';
+import Cookies from 'js-cookie';
+import Image from 'next/image';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+import PHXClientQueryV3 from '../Func/clientQueryV3';
+import PHXFuncGetCookieSession from '../Func/getCookieSession';
+import PHXGetEnvPublicV3 from '../Func/getEnvPublic';
+import { clearSession } from '../Func/sessionStore';
+import { DEFAULT_AVATAR, MENU_ACTIVITY_HISTORY_CHILD, PATH_ACTIVITY_HISTORY, switchSchool } from '../../utils/constants';
+import StyledCustomLayoutProps from './appearance/appearance-styled';
+import { IconV2 } from './assets/Icon';
+import SideBarDesktop from './components/side-bar';
+import NavMobile from './navigator/nav-mobile';
+import { useLoading } from '../LoadingProvider';
+import { GET_PERMISSION_DETAIL_USER_V3, GET_SCHOOL_V3, getCampaignNameV3, QUERY_GET_PROFILE_USER } from '../../query';
+import saveCookiesClient from '../Func/saveCookiesClient';
+import { PageTracker } from '../../stores/page-tracker/page-tracker';
+import { decryptCookie } from '../../helpers/helpers';
+import { PHXSkeleton } from '../Skeleton';
+import { PHXModal } from '../Modal';
+import PHXTooltip from '../ToolTip/ToolTip';
+import { PHXBanner } from '../Banner';
+import { classNames } from '../types';
+import { PHXCard } from '../Card';
+library.add(fas);
+export var PHXMainWrapV4 = function (_a) {
+    var _b, _c, _d;
+    var children = _a.children, getDataCookies = _a.getDataCookies, _e = _a.logoHeight, logoHeight = _e === void 0 ? '28px' : _e, _f = _a.multipleMenu, multipleMenu = _f === void 0 ? false : _f, params = _a.params, pathName = _a.pathName, router = _a.router;
+    var pid = (params ? params : {}).pid;
+    var _g = useState(false), modal = _g[0], setModal = _g[1];
+    var _h = useState(true), setOpenSubMenu = _h[1];
+    var _j = useState(''), campaignName = _j[0], setCampaignName = _j[1];
+    var _k = useState(false), sidebarOpen = _k[0], setSidebarOpen = _k[1];
+    var _l = useState([]), subNavigation = _l[0], setSubNavigation = _l[1];
+    var _m = useState([]), navigation = _m[0], setNavigation = _m[1];
+    var _o = useState(false), modalSignOut = _o[0], setModalSignOut = _o[1];
+    var _p = useState(true), showBanner = _p[0], setShowBanner = _p[1];
+    var _q = useState(true), isLoading = _q[0], setIsLoading = _q[1];
+    var sessionCookie = useRef(PHXFuncGetCookieSession());
+    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 = useLoading().setLoading;
+    var _r = useState(true), showSubMenu = _r[0], setShowSubMenu = _r[1];
+    var _s = useState({
+        menuDefault: [],
+        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) || DEFAULT_AVATAR,
+    }), dataInitMain = _s[0], setDataInitMain = _s[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; });
+    }
+    // Lấy code phân quyền trong menu từ path hiện tại
+    function getCodesByPath(dataMenu, currentPath) {
+        var lastMatchingCode = null;
+        var normalizedPath = currentPath.replace(/\/$/, '');
+        function traverse(items, prefix) {
+            for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+                var item = items_1[_i];
+                var fullPath = item.path.startsWith('/') ? prefix + item.path : item.path;
+                var normalizedFullPath = fullPath.replace(/\/$/, '');
+                if (normalizedPath === normalizedFullPath || normalizedPath.startsWith(normalizedFullPath + '/')) {
+                    lastMatchingCode = item.code;
+                }
+                if (item.child) {
+                    traverse(item.child, prefix);
+                }
+            }
+        }
+        for (var _i = 0, dataMenu_1 = dataMenu; _i < dataMenu_1.length; _i++) {
+            var rootItem = dataMenu_1[_i];
+            var rootPath = rootItem.path;
+            var prefix = rootPath.split('/').slice(0, 2).join('/');
+            traverse([rootItem], prefix);
+        }
+        return lastMatchingCode ? lastMatchingCode : null;
+    }
+    // code phân quyền path hiện tại
+    var currentCode = getCodesByPath(dataInitMain.menuDefault, locationPathname);
+    var currentMenuByPath = navigation === null || navigation === void 0 ? void 0 : navigation.find(function (nav) { var _a; return (_a = nav === null || nav === void 0 ? void 0 : nav.child) === null || _a === void 0 ? void 0 : _a.some(function (c) { var _a; return (c === null || c === void 0 ? void 0 : c.code) === currentCode || ((_a = c === null || c === void 0 ? void 0 : c.child) === null || _a === void 0 ? void 0 : _a.some(function (x) { return (x === null || x === void 0 ? void 0 : x.code) === currentCode; })); }); });
+    var requireLoginValidation = function () {
+        clearSession();
+        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 {
+            // xóa cookies với những tài khoản giáo viên, nhân viên đã nghỉ việc
+            var staffIsQuitJob = profileStaff === null || profileStaff === void 0 ? void 0 : profileStaff.is_quit_job;
+            var teacherIsQuitJob = profileTeacher === null || profileTeacher === void 0 ? void 0 : profileTeacher.is_quit_job;
+            if (staffIsQuitJob || teacherIsQuitJob) {
+                console.log('Phiên đăng nhập đã hết hạn');
+                Object.keys(Cookies.get()).forEach(function (cookieName) {
+                    Cookies.remove(cookieName);
+                });
+                requireLoginValidation();
+            }
+        }
+        catch (error) {
+            console.log(error);
+        }
+    };
+    var fetchDataPer = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res, userPermissions, rolePermissions, allPermissions, permissionCodes, routePermissions, actionPermissions, actionPermissionMap, uniqueRoutePermissions, error_1;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    _e.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, PHXClientQueryV3({
+                            query: GET_PERMISSION_DETAIL_USER_V3,
+                            variables: { id: userId, school_id: schoolInfoId },
+                        })];
+                case 1:
+                    res = _e.sent();
+                    userPermissions = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.permission_user) !== null && _b !== void 0 ? _b : [];
+                    rolePermissions = (_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.permission_role) !== null && _d !== void 0 ? _d : [];
+                    allPermissions = __spreadArray(__spreadArray([], userPermissions, true), rolePermissions, true);
+                    permissionCodes = allPermissions.map(function (p) { return p.permission; });
+                    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]; }));
+                    uniqueRoutePermissions = Array.from(new Set(routePermissions));
+                    return [2 /*return*/, { uniqueRoutePermissions: uniqueRoutePermissions, actionPermissionMap: actionPermissionMap }];
+                case 2:
+                    error_1 = _e.sent();
+                    console.error('Error fetching school data:', error_1);
+                    return [2 /*return*/, { uniqueRoutePermissions: null, actionPermissionMap: null }];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var getProfileByUser = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response, profileUser, avatar, email, full_name, profile_staff, profile_teacher, user_avatar, user_roles, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, PHXClientQueryV3({
+                            query: QUERY_GET_PROFILE_USER,
+                            variables: {
+                                user_id: userId,
+                            },
+                        })];
+                case 1:
+                    response = _a.sent();
+                    profileUser = response.data.users_by_pk;
+                    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,
+                    });
+                    // renew list role in cookie
+                    return [2 /*return*/, {
+                            avatar: avatar,
+                            user_avatar: user_avatar,
+                            full_name: full_name,
+                            email: email,
+                            user_code: (profile_staff === null || profile_staff === void 0 ? void 0 : profile_staff.user_code) || (profile_teacher === null || profile_teacher === void 0 ? void 0 : profile_teacher.user_code) || '',
+                            user_roles: user_roles,
+                        }];
+                case 2:
+                    error_2 = _a.sent();
+                    console.log(error_2);
+                    return [2 /*return*/];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var fetchDataSchool = function () { return __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 __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    if (!userSessionInfo)
+                        return [2 /*return*/];
+                    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*/, PHXClientQueryV3({
+                            query: 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 __awaiter(void 0, void 0, void 0, function () {
+        var envPublic, menuUrl, logoMenuTop, data, menuJson;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, PHXGetEnvPublicV3()];
+                case 1:
+                    envPublic = _a.sent();
+                    menuUrl = envPublic === null || envPublic === void 0 ? void 0 : envPublic.SCHOOL_MENU_V2;
+                    logoMenuTop = envPublic === null || envPublic === void 0 ? void 0 : envPublic.SCHOOL_TOP_MENU_LOGO;
+                    if (!menuUrl || !logoMenuTop) {
+                        console.error('menu or logo not found');
+                    }
+                    return [4 /*yield*/, fetch(menuUrl)];
+                case 2:
+                    data = _a.sent();
+                    return [4 /*yield*/, data.json()];
+                case 3:
+                    menuJson = _a.sent();
+                    return [2 /*return*/, {
+                            loadingMenu: false,
+                            logo: { path: logoMenuTop, height: logoHeight },
+                            menu: menuJson,
+                        }];
+            }
+        });
+    }); };
+    var detectEnvByDomain = function (domain, configEnv) {
+        for (var _i = 0, _a = Object.entries(configEnv); _i < _a.length; _i++) {
+            var _b = _a[_i], env = _b[0], pattern = _b[1];
+            if (env.startsWith('_comment'))
+                continue; // bỏ qua comment
+            var regex = new RegExp(pattern.replace(/\\\\/g, '\\'));
+            if (regex.test(domain))
+                return env;
+        }
+        return 'stg';
+    };
+    var getEnvByConfig = function (configEnv) {
+        var domain = window.location.hostname;
+        var env = detectEnvByDomain(domain, configEnv);
+        return "config_menu_".concat(env, ":disable");
+    };
+    var isConfigEnvValid = function (code, configDisable) {
+        return configDisable.length === 0 || !(configDisable === null || configDisable === void 0 ? void 0 : configDisable.includes(code));
+    };
+    var funcMenuByConfigEnv = function (menuJson, configDisable) {
+        var menuWithConfigEnv = [];
+        for (var _i = 0, menuJson_1 = menuJson; _i < menuJson_1.length; _i++) {
+            var item = menuJson_1[_i];
+            if (!isConfigEnvValid(item === null || item === void 0 ? void 0 : item.code, configDisable))
+                continue;
+            var menuItem = __assign(__assign({}, item), { child: [] });
+            var menuSecondLevel = (item === null || item === void 0 ? void 0 : item.child) || [];
+            for (var _a = 0, _b = menuSecondLevel || []; _a < _b.length; _a++) {
+                var childItem = _b[_a];
+                if (!isConfigEnvValid(childItem === null || childItem === void 0 ? void 0 : childItem.code, configDisable))
+                    continue;
+                var childMenuItem = __assign(__assign({}, childItem), { child: [] });
+                var menuThirdLevel = (childItem === null || childItem === void 0 ? void 0 : childItem.child) || [];
+                for (var _c = 0, menuThirdLevel_1 = menuThirdLevel; _c < menuThirdLevel_1.length; _c++) {
+                    var subChildItem = menuThirdLevel_1[_c];
+                    if (!isConfigEnvValid(subChildItem === null || subChildItem === void 0 ? void 0 : subChildItem.code, configDisable))
+                        continue;
+                    childMenuItem.child.push(subChildItem);
+                }
+                menuItem.child.push(childMenuItem);
+            }
+            menuWithConfigEnv.push(menuItem);
+        }
+        return menuWithConfigEnv;
+    };
+    var fetchInitData = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, loadingMenu, logo, menu, profileNew, dataPer, dataSchool, actionPermissionMap, uniqueRoutePermissions, config_env, enviromentByDomainConfig, menuJson, configDisable, currentSession;
+        var _b;
+        return __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;
+                    config_env = menu.config_env;
+                    enviromentByDomainConfig = getEnvByConfig(config_env);
+                    menuJson = menu.menu;
+                    configDisable = menu[enviromentByDomainConfig];
+                    setDataInitMain({
+                        menuDefault: menuJson,
+                        logo: logo,
+                        menu: funcMenuByConfigEnv(menuJson, configDisable),
+                        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) || DEFAULT_AVATAR,
+                    });
+                    currentSession = PHXFuncGetCookieSession();
+                    saveCookiesClient({
+                        value: __assign(__assign(__assign(__assign({}, currentSession), (actionPermissionMap && {
+                            action_permission: actionPermissionMap || [],
+                        })), { setting_site: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.settingSiteDb) || {} }), (profileNew && {
+                            user_info: __assign(__assign({}, userSessionInfo), profileNew),
+                        })),
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        if (!userSessionInfo) {
+            // Require login if production mode
+            requireLoginValidation();
+            return;
+        }
+        fetchInitData();
+    }, []);
+    var isEqualUrl = function (parentHref, pathNameCompare) {
+        if (!parentHref || !pathNameCompare) {
+            return false;
+        }
+        var pathNameSplit = pathNameCompare.split('/');
+        var hrefSplit = parentHref.split('/');
+        if (!pathNameSplit || !hrefSplit) {
+            return false;
+        }
+        var urlRouter;
+        var currentMenu;
+        if (multipleMenu) {
+            urlRouter = pathNameSplit[1] + pathNameSplit[2];
+            currentMenu = hrefSplit[1] + hrefSplit[2];
+        }
+        else {
+            urlRouter = pathNameSplit[1];
+            currentMenu = hrefSplit[1];
+        }
+        return urlRouter === currentMenu;
+    };
+    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 = pathNameCompare.split('/');
+        if (isMicroservice) {
+            return isBelongParentWithMicroservice(parentSplit, pathNameSplit);
+        }
+        if (parentSplit.length > 2 && !parentSplit.includes('list')) {
+            return parentSplit[1] === pathNameSplit[2] && parentSplit[2] === pathNameSplit[3];
+        }
+        else {
+            return parentSplit[1] === pathNameSplit[2];
+        }
+    };
+    var checkAdmissions = function (path) {
+        var pathNameSplit = path.split('/');
+        return pathNameSplit[1] === 'admissions';
+    };
+    var loadParentNavigation = function (path) {
+        var mainNavigation = dataInitMain.menu;
+        var naviSize = mainNavigation.length;
+        for (var i = 0; i < naviSize; i++) {
+            var item = mainNavigation[i];
+            item.current = false;
+            if (item.path === path || isEqualUrl(item.path, path)) {
+                item.current = true;
+                // Find sub modules
+                var itemLength = item.child.length;
+                var listChildren = [];
+                for (var j = 0; j < itemLength; j++) {
+                    var childItem = item.child[j];
+                    // Active child item
+                    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, !!(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 isSameSubChildPath = (subChild === null || subChild === void 0 ? void 0 : subChild.isMicroservice)
+                                ? subChild.path === (childItem === null || childItem === void 0 ? void 0 : childItem.path)
+                                : subChild.path === (childItem === null || childItem === void 0 ? void 0 : childItem.pathInternal);
+                            var isPathInternal = (childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice) ? isSameSubChildPath : subChild.path === childItem.path;
+                            childItem.showChild = count > 0;
+                            if (isPathInternal)
+                                childItem.current = false;
+                        }
+                    }
+                    listChildren.push(childItem);
+                }
+                setSubNavigation(listChildren);
+            }
+        }
+        setNavigation(mainNavigation);
+    };
+    var loadChildrenCampaign = function (path) {
+        var mainNavigation = dataInitMain.menu;
+        var naviSize = mainNavigation.length;
+        for (var i = 0; i < naviSize; i++) {
+            var item = mainNavigation[i];
+            item.current = false;
+            if (item.path === path || isEqualUrl(item.path, path)) {
+                item.current = true;
+                // Find sub modules
+                // const itemLength = item.child.length;
+                var campaign = item.child.filter(function (child) { return child.path === '/campaign/list'; });
+                var listCampaign = campaign[0];
+                var itemLength = listCampaign === null || listCampaign === void 0 ? void 0 : listCampaign.childrenByParentDetail.length;
+                var listChildren = [];
+                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, 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, false);
+                            if (isBelongParent(subChild.path, path, false) || isBelongParent(childItem.path, path, false)) {
+                                childItem.showChild = true;
+                            }
+                            childItem.current = subChild.path !== childItem.path;
+                        }
+                    }
+                    listChildren.push(childItem);
+                }
+                setSubNavigation(listChildren);
+            }
+        }
+        setNavigation(mainNavigation);
+    };
+    var checkChildrenCampaign = function (path) {
+        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, false); });
+        return isChild !== undefined;
+    };
+    useEffect(function () {
+        var isAdmissions = checkAdmissions(pathNameWithBasePath);
+        if (isAdmissions && checkChildrenCampaign(pathNameWithBasePath)) {
+            if (pathNameWithBasePath.includes('/admissions/overview/list/') && pid) {
+                PHXClientQueryV3({
+                    query: getCampaignNameV3,
+                    variables: { id: pid },
+                    isDelay: false,
+                }).then(function (res) {
+                    var data = res.data.admissions_campaigns_by_pk;
+                    setCampaignName(data.campaign_name);
+                    Cookies.set('campaign_name', JSON.stringify(data.campaign_name));
+                });
+                loadChildrenCampaign(pathNameWithBasePath);
+            }
+            else if (pathNameWithBasePath === '/admissions/campaign/list') {
+                loadParentNavigation(pathNameWithBasePath);
+            }
+            else {
+                loadChildrenCampaign(pathNameWithBasePath);
+            }
+        }
+        else {
+            loadParentNavigation(pathNameWithBasePath);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dataInitMain, pid, pathNameWithBasePath]);
+    useEffect(function () {
+        var isAdmissions = checkAdmissions(pathNameWithBasePath);
+        if (isAdmissions) {
+            if (pathNameWithBasePath === '/admissions/campaign/list' || !checkChildrenCampaign(pathNameWithBasePath)) {
+                setOpenSubMenu(true);
+            }
+            else {
+                setOpenSubMenu(true);
+                var campaign_name = Cookies.get('campaign_name');
+                setCampaignName(campaign_name ? JSON.parse(campaign_name) : campaignName);
+                loadChildrenCampaign(pathNameWithBasePath);
+            }
+        }
+        else {
+            setOpenSubMenu(true);
+        }
+    }, [pathNameWithBasePath, dataInitMain]);
+    var loadSubNavigation = function (path, isChild, childPath) {
+        var subLength = subNavigation.length;
+        var newSub = [];
+        for (var i = 0; i < subLength; i++) {
+            var item = subNavigation[i];
+            item.current = item.path === path && !isChild;
+            if (item.child) {
+                item.showChild = item.path === path;
+                for (var j = 0; j < item.child.length; j++) {
+                    var child = item.child[j];
+                    child.current = child.path === childPath;
+                    if (child.path === item.path) {
+                        item.current = false;
+                        child.current = childPath ? child.path === childPath : child.path === path;
+                    }
+                }
+            }
+            newSub.push(item);
+        }
+        setSubNavigation(newSub);
+    };
+    var subNavigationTriggerClicked = function (item, parent) {
+        if (parent) {
+            loadSubNavigation(parent.path, true, item.path);
+        }
+        else {
+            loadSubNavigation(item.path, false);
+        }
+        var queryString = window.location.search;
+        var urlParams = new URLSearchParams(queryString);
+        var campaign = Number(urlParams.get('campaignId'));
+        setGlobalLoading(true);
+        // handle for admissions
+        if (campaign) {
+            router.push("".concat(item.path, "?campaignId=").concat(campaign));
+        }
+        else {
+            router.push(item.path);
+        }
+    };
+    var topMenuLogoFromEnv = dataInitMain.logo.path;
+    var handleModalSignOut = function () { return setModalSignOut(true); };
+    var handleRedirectRouter = function (path) {
+        var currentURL = window.location.href;
+        var url = currentURL.split('/');
+        var pushPath = "".concat(url[0], "//").concat(url[2], "/").concat(path);
+        window.location.replace(pushPath);
+    };
+    var callApiLogoutToken = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var error_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, axios.post("/api/authenticate/logout", {}, {
+                            withCredentials: true,
+                        })];
+                case 1: return [2 /*return*/, _a.sent()];
+                case 2:
+                    error_4 = _a.sent();
+                    console.error(error_4);
+                    return [2 /*return*/];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleSignOut = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setModalSignOut(false);
+                    Object.keys(Cookies.get()).forEach(function (cookieName) {
+                        Cookies.remove(cookieName);
+                    });
+                    return [4 /*yield*/, callApiLogoutToken()];
+                case 1:
+                    _a.sent();
+                    console.log('Đăng xuất tài khoản');
+                    handleRedirectRouter('login-sso');
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleProfilePage = function () {
+        handleRedirectRouter('profile');
+    };
+    var handleBackMenu = function () {
+        router.push('/campaign/list');
+        loadParentNavigation('/admissions/campaign/list');
+    };
+    var checkChildBefore = function (item, currentItem) {
+        var currentIndexActive = item.find(function (s) { return s.current; });
+        return currentIndexActive ? currentIndexActive.id > currentItem.id : false;
+    };
+    var _t = useState(null), selected = _t[0], setSelected = _t[1];
+    var handleOpenModal = function (id) {
+        setModal(id !== dataInitMain.schoolId);
+        setSelected(id);
+    };
+    var handlePrimaryModal = function () {
+        var currentSession = PHXFuncGetCookieSession();
+        var userInfo = currentSession === null || currentSession === void 0 ? void 0 : currentSession.user_info;
+        if (userInfo) {
+            try {
+                var newSchoolId = selected;
+                var schoolIdCurrent = userInfo.school_id;
+                if (newSchoolId && newSchoolId !== schoolIdCurrent) {
+                    var userInfoNew = __assign(__assign({}, userInfo), { school_id: newSchoolId });
+                    saveCookiesClient({
+                        value: __assign(__assign({}, currentSession), { user_info: userInfoNew }),
+                    });
+                    window.location.reload();
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        setModal(false);
+    };
+    // settings page
+    var isSettings = function () {
+        var pathNameSplit = pathNameWithBasePath.split('/');
+        return pathNameSplit[1] === 'setting';
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // const checkLogoHeader = dataInitMain.configLayout?.logo_dashboard || topMenuLogoFromEnv || DEFAULT_LOGO_DASHBOARD
+    var isActivityHistory = function () {
+        var pathNameSplit = pathNameWithBasePath.split('/');
+        return pathNameSplit[1] === PATH_ACTIVITY_HISTORY;
+    };
+    var _u = useState(MENU_ACTIVITY_HISTORY_CHILD), activityHistoryChild = _u[0], setActivityHistoryChild = _u[1];
+    var handleClickActivityHistoryChild = function (clickedItem) {
+        var updated = activityHistoryChild.map(function (item) { return (__assign(__assign({}, item), { current: item.code === clickedItem.code })); });
+        setActivityHistoryChild(updated);
+    };
+    useEffect(function () {
+        if (basePath === PATH_ACTIVITY_HISTORY) {
+            setActivityHistoryChild(function (prev) {
+                return prev.map(function (item) { return (__assign(__assign({}, item), { current: pathNameWithBasePath.endsWith(item.path) })); });
+            });
+        }
+        else {
+            setActivityHistoryChild([]);
+        }
+    }, [pathNameWithBasePath, basePath]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PageTracker, null),
+        React.createElement("div", { className: 'flex min-h-full flex-col' },
+            React.createElement(StyledCustomLayoutProps, { configLayout: dataInitMain === null || dataInitMain === void 0 ? void 0 : dataInitMain.configLayout, settingSiteCookie: getDataCookies ? (_d = decryptCookie(getDataCookies)) === null || _d === void 0 ? void 0 : _d.setting_site : null }),
+            React.createElement("header", { className: 'fixed top-0 z-50 flex h-10 min-w-full items-center  justify-between bg-gray-100 pl-1.5 pr-2 ' },
+                React.createElement("div", { className: 'flex items-center gap-x-3' },
+                    React.createElement("a", { className: 'flex w-full items-center', href: '/' }, topMenuLogoFromEnv ? (React.createElement(React.Fragment, null, isLoading ? (React.createElement("div", { className: 'header-loading-logo ml-3 h-8 w-full animate-pulse' })) : (React.createElement("img", { alt: 'Logo', className: ' h-5  w-auto', 
+                        // src={checkLogoHeader}
+                        src: 'https://sisv2-cdn.phx-smartschool.com/library/book-copy/11-17-2025/22cef182-c958-4e1c-b4a0-66eede72166a-logo.png', style: { maxWidth: '12rem' } })))) : (React.createElement(React.Fragment, null))),
+                    React.createElement("div", { className: 'flex items-center lg:hidden' },
+                        React.createElement("button", { className: 'bg-grey-100 mr-3 inline-flex items-center justify-center rounded-md p-1 text-gray-200 hover:bg-white hover:text-gray-600', onClick: function () { return setSidebarOpen(true); }, type: 'button' },
+                            React.createElement("span", { className: 'sr-only' }, "Open sidebar"),
+                            React.createElement(Bars3Icon, { "aria-hidden": 'true', className: 'h-6 w-6' })))),
+                React.createElement("div", { className: 'flex items-center gap-x-8' },
+                    React.createElement("div", { className: '-m-1.5 p-1.5' },
+                        React.createElement(Menu, { as: 'div', className: 'relative ml-3' },
+                            React.createElement("div", null,
+                                React.createElement(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.createElement("span", { className: 'sr-only' }, "Open user menu"),
+                                    isLoading ? (React.createElement("div", { className: 'flex animate-pulse' },
+                                        React.createElement("div", { className: 'header-loading-avatar h-6 w-6 rounded-full' }))) : (React.createElement("img", { alt: '', className: 'h-6 w-6 rounded-full', src: dataInitMain.sourceAvatar })))),
+                            React.createElement(Transition, { as: 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.createElement(Menu.Items, { className: ' shadow-lg absolute right-0 z-10 mt-2 w-[340px] origin-top-right rounded-md bg-white px-2 ring-1 ring-black ring-opacity-5 focus:outline-none' },
+                                    React.createElement(Menu.Item, null,
+                                        React.createElement("div", { "aria-hidden": true, className: 'px-2 pb-2 pt-4 text-sm font-semibold text-gray-900 ' }, "Ch\u1ECDn tr\u01B0\u1EDDng")),
+                                    !dataInitMain.loadingSchool ? (React.createElement(React.Fragment, null, dataInitMain.listSchool
+                                        .filter(function (val) {
+                                        if (!enablePer(switchSchool, dataInitMain.perCode)) {
+                                            return val.id === dataInitMain.schoolId;
+                                        }
+                                        else {
+                                            return true;
+                                        }
+                                    })
+                                        .map(function (item) { return (React.createElement(Menu.Item, { key: item.id },
+                                        React.createElement("div", { "aria-hidden": true, className: "".concat(item.id === dataInitMain.schoolId &&
+                                                dataInitMain.listSchool.length > 1 &&
+                                                !enablePer(switchSchool, dataInitMain.perCode) === false
+                                                ? 'rounded-lg bg-zinc-200 font-semibold text-gray-900 '
+                                                : 'font-normal   ', " \n                                  ").concat(item.id !== dataInitMain.schoolId &&
+                                                (dataInitMain.listSchool.length === 1 ||
+                                                    !enablePer(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.createElement("p", { className: 'max-w-[95%] truncate' }, item.name),
+                                            item.id === dataInitMain.schoolId &&
+                                                dataInitMain.listSchool.length > 1 &&
+                                                !enablePer(switchSchool, dataInitMain.perCode) === false && (React.createElement(CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))))); }))) : (React.createElement(PHXSkeleton, { className: 'flex-1 px-2 py-2', type: 'single' })),
+                                    React.createElement("div", { className: 'border-b pt-1.5' }),
+                                    React.createElement(Menu.Item, null,
+                                        React.createElement("div", { "aria-hidden": true, className: 'px-2 pb-2 pt-4  text-sm font-semibold text-gray-900' }, "T\u00F9y ch\u1ECDn")),
+                                    React.createElement(Menu.Item, null,
+                                        React.createElement("div", { "aria-hidden": true, className: 'cursor-pointer px-2 py-1.5 text-sm text-gray-900 hover:rounded-lg hover:bg-gray-100', onClick: handleProfilePage }, "Th\u00F4ng tin c\u00E1 nh\u00E2n")),
+                                    React.createElement(Menu.Item, null,
+                                        React.createElement("div", { "aria-hidden": true, className: 'mb-2.5 cursor-pointer px-2 py-1.5 text-sm text-[#8e1f0c] hover:rounded-lg hover:bg-gray-100', onClick: handleModalSignOut }, "\u0110\u0103ng xu\u1EA5t"))))))))),
+        React.createElement("div", null,
+            React.createElement(PHXModal, { dangerActionText: '\u0110\u0103ng xu\u1EA5t', onDangerClick: handleSignOut, onHide: function () { return setModalSignOut(false); }, primaryActionText: '', show: modalSignOut, title: '\u0110\u0103ng xu\u1EA5t' },
+                React.createElement("div", { className: 'text-sm text-gray-700' }, "Khi th\u1EF1c hi\u1EC7n thao t\u00E1c n\u00E0y b\u1EA1n s\u1EBD tho\u00E1t kh\u1ECFi trang qu\u1EA3n tr\u1ECB v\u00E0 tr\u1EDF v\u1EC1 trang \u0111\u0103ng nh\u1EADp"))),
+        React.createElement(PHXModal, { onHide: function () { return setModal(false); }, onPrimaryClick: handlePrimaryModal, primaryActionText: 'X\u00E1c nh\u1EADn', show: modal, title: 'X\u00E1c nh\u1EADn thay \u0111\u1ED5i tr\u01B0\u1EDDng' },
+            React.createElement(PHXBanner, { description: 'Khi thay \u0111\u1ED5i tr\u01B0\u1EDDng t\u1EA5t c\u1EA3 d\u1EEF li\u1EC7u s\u1EBD hi\u1EC3n th\u1ECB theo tr\u01B0\u1EDDng v\u1EEBa \u0111\u01B0\u1EE3c ch\u1ECDn', onClose: function () { return setShowBanner(false); }, show: showBanner, title: 'L\u01B0u \u00FD', type: 'warning' })),
+        React.createElement("div", { className: 'relative flex min-h-screen bg-gray-100' },
+            React.createElement(NavMobile, { hiddenSideBar: function () { return setSidebarOpen(false); }, menu: dataInitMain.menu, path: pathNameWithBasePath, pathNameWithBasePath: pathNameWithBasePath, permission: dataInitMain.perCode, router: router, setSidebarOpen: setSidebarOpen, sidebarOpen: sidebarOpen }),
+            React.createElement(SideBarDesktop, { currentMenuCode: (currentMenuByPath === null || currentMenuByPath === void 0 ? void 0 : currentMenuByPath.code) || '', dataInitMain: dataInitMain, enablePer: enablePer, isActivityHistory: isActivityHistory(), isSettings: isSettings(), navigation: navigation, setShowSubMenu: setShowSubMenu, showSubMenu: showSubMenu }),
+            React.createElement(Transition, { as: Fragment, enter: 'transition ease-in-out duration-[350ms] transform', enterFrom: '-translate-x-[10rem] opacity-0', enterTo: 'translate-x-0', leave: 'transition ease-in-out duration-[350ms] transform', leaveFrom: 'translate-x-0', leaveTo: '-translate-x-[10rem] opacity-0', show: showSubMenu },
+                React.createElement("aside", { className: "fixed left-[4.35rem] top-10  z-10 hidden h-[calc(100vh-3.1rem)] border-gray-300     lg:block lg:flex-shrink-0 ".concat(showSubMenu && 'border-r') },
+                    React.createElement("div", { className: 'relative flex h-full w-64 flex-col overflow-y-auto bg-gray-200/20' },
+                        React.createElement("div", { className: 'mt-3 flex w-full items-center justify-between pl-5 pr-3' },
+                            React.createElement("h1", { className: 'text-base font-semibold text-gray-900' }, currentMenuByPath === null || currentMenuByPath === void 0 ? void 0 : currentMenuByPath.name),
+                            showSubMenu && (React.createElement("button", { className: 'inline-blockk flex h-7 w-7 items-center justify-center rounded-md  hover:bg-white  ', onClick: function () { return setShowSubMenu(false); }, type: 'button' },
+                                React.createElement(PHXTooltip, { content: '\u0110\u00F3ng thanh b\u00EAn' },
+                                    React.createElement(Image, { alt: 'icon', height: 18, quality: 100, src: IconV2.CLOSE_SIDEBAR, width: 18 }))))),
+                        checkAdmissions(pathNameWithBasePath) &&
+                            checkChildrenCampaign(pathNameWithBasePath) &&
+                            pathNameWithBasePath !== '/admissions/campaign/list' && (React.createElement("div", { className: 'mx-1 flex items-center p-2 pb-0' },
+                            React.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.createElement(ArrowLeftIcon, { className: 'h-5 w-5' })),
+                            React.createElement("p", { className: 'text-sm font-medium text-slate-600' }, campaignName))),
+                        React.createElement("div", { className: ' mt-2 overflow-y-auto' },
+                            subNavigation.map(function (item, subNavIndex) {
+                                var _a;
+                                var activeChildIndex = item.child.findIndex(function (c) { return c.current; });
+                                var isChildActive = activeChildIndex !== -1;
+                                return (React.createElement("div", { key: subNavIndex }, ((_a = dataInitMain.roleCode) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (React.createElement(React.Fragment, null, enablePer(item.code, dataInitMain.perCode) ? (React.createElement(React.Fragment, null,
+                                    (item === null || item === void 0 ? void 0 : item.isMicroservice) ? (React.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.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
+                                        React.createElement("div", { className: 'flex items-center gap-x-3' },
+                                            React.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.createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))) : (React.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.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
+                                        React.createElement("div", { className: 'flex items-center gap-x-2' },
+                                            React.createElement(Image, { alt: 'icon', height: 16, quality: 100, src: 
+                                                // @ts-ignore
+                                                IconV2["".concat(currentMenuByPath === null || currentMenuByPath === void 0 ? void 0 : currentMenuByPath.code, "_OUTLINE")], width: 16 }),
+                                            React.createElement("p", { className: classNames('font-[450] leading-5', isChildActive || item.current ? 'text-gray-900' : ' text-gray-500') }, item === null || item === void 0 ? void 0 : item.name)),
+                                        React.createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))),
+                                    item.showChild && item.child && (React.createElement(React.Fragment, null, item.child.map(function (
+                                    // eslint-disable-next-line @typescript-eslint/no-shadow
+                                    children, childIndex) { return (React.createElement("div", { key: childIndex, className: classNames('relative') },
+                                        childIndex <= activeChildIndex && (React.createElement("div", { className: "absolute  left-8 z-10  w-[1px] bg-gray-400 ".concat((children === null || children === void 0 ? void 0 : children.current) ? 'h-3' : 'bottom-0', " ").concat(childIndex === 0 ? '-top-1' : ' top-0') })),
+                                        React.createElement("div", { className: "".concat(childIndex === activeChildIndex ? 'block' : 'hidden') },
+                                            React.createElement(Image, { alt: 'icon', className: 'absolute left-8 top-0 h-6 w-3', height: 1, 
+                                                // @ts-ignore
+                                                src: IconV2.ARROW_RIGHT_SUB_MENU, width: 1 }),
+                                            React.createElement("div", { className: 'absolute left-[33px]  top-0 z-10 h-4 w-[1px]  bg-white' })),
+                                        (children === null || children === void 0 ? void 0 : children.isMicroservice) ? (React.createElement("a", { "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]'), href: children.path, onClick: enablePer(children.code, dataInitMain.perCode)
+                                                ? undefined
+                                                : function (e) { return e.preventDefault(); } },
+                                            React.createElement("div", { className: 'flex items-center gap-x-3' },
+                                                React.createElement("div", { className: 'w-3' }),
+                                                React.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.createElement("button", { "aria-hidden": true, className: classNames('ml-4 w-[90%]', (children === null || children === void 0 ? void 0 : children.current)
+                                                ? 'rounded-lg bg-white text-[#353A44]'
+                                                : '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, type: 'button' },
+                                            React.createElement("p", { className: classNames('px-6 py-2 pl-[2.2rem] text-left text-xs', !enablePer(children.code, dataInitMain.perCode)
+                                                    ? 'font-normal text-gray-300'
+                                                    : (children === null || children === void 0 ? void 0 : children.current)
+                                                        ? 'font-semibold text-gray-900'
+                                                        : 'font-normal text-gray-500') }, children.name))))); }))))) : (React.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.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
+                                    React.createElement("div", { className: 'flex items-center gap-x-3 text-gray-700' },
+                                        React.createElement("p", { className: classNames('font-normal leading-5 text-gray-300') }, item === null || item === void 0 ? void 0 : item.name)),
+                                    React.createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))))) : (React.createElement(React.Fragment, null,
+                                    (item === null || item === void 0 ? void 0 : item.isMicroservice) ? (React.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.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
+                                        React.createElement("div", { className: 'flex items-center gap-x-3' },
+                                            React.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.createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))) : (React.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.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
+                                        React.createElement("div", { className: 'flex items-center gap-x-3' },
+                                            React.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.createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))),
+                                    item.showChild && item.child && (React.createElement(React.Fragment, null, item.child.map(
+                                    // eslint-disable-next-line @typescript-eslint/no-shadow
+                                    function (children, index) { return (React.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') }, (children === null || children === void 0 ? void 0 : children.isMicroservice) ? (React.createElement("a", { "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'), href: item.path },
+                                        React.createElement("div", { className: 'flex items-center gap-x-3' },
+                                            React.createElement("div", { className: 'w-3' }),
+                                            React.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.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.createElement("div", { className: 'flex items-center gap-x-3' },
+                                            React.createElement("div", { className: 'w-3' }),
+                                            React.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)))))); })))))));
+                            }),
+                            activityHistoryChild.map(function (item, subNavIndex) { return (React.createElement("div", { key: subNavIndex },
+                                React.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) && !dataInitMain.loadingMenu
+                                        ? '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 () {
+                                        handleClickActivityHistoryChild(item);
+                                        subNavigationTriggerClicked(item);
+                                    } }, !dataInitMain.loadingMenu ? (React.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
+                                    React.createElement("div", { className: 'flex items-center gap-x-3' },
+                                        React.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.createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : ('')))); }))))),
+            React.createElement("main", { className: 'w-full pb-2.5 pt-10 lg:pl-[4.5rem] lg:pr-[0.5rem]' },
+                React.createElement("div", { className: 'h-full w-full border-gray-300  lg:overflow-y-auto lg:rounded-2xl lg:border-[0.75px]' }, dataInitMain.isLoadingPermission ? ('') : enablePer(currentCode, dataInitMain.perCode) ? (React.createElement("div", { className: "h-full bg-gray-50 ".concat(showSubMenu ? 'pl-4 lg:pl-[16.9rem]' : 'pl-4', " py-4 pr-4 transition-all duration-300") }, children)) : (React.createElement(PHXCard, null,
+                    React.createElement("div", { className: 'mb-10 mt-10 sm:mb-20 sm:mt-20 lg:mb-32 lg:mt-32' },
+                        React.createElement("div", { className: 'flex items-center justify-center' },
+                            React.createElement(LockClosedIcon, { className: 'text-gray-400', height: 70, width: 70 })),
+                        React.createElement("div", { className: 'mt-5 flex select-none items-center justify-center text-base font-bold text-gray-800' }, "B\u1EA1n kh\u00F4ng c\u00F3 quy\u1EC1n truy c\u1EADp")))))))));
+};
+//# sourceMappingURL=MainWrapV4.js.map