phx-uikit 1.0.70 → 1.0.71

package/dist/esm/components/LoginV3/LoginV3.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoginV3.js","sourceRoot":"","sources":["../../../../src/components/LoginV3/LoginV3.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,iBAAiB,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,oBAAoB,MAAM,sBAAsB,CAAA;AACvD,OAAO,OAAO,MAAM,WAAW,CAAA;AAU/B,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,KAAsB;IACvC,IAAA,IAAI,GAAgD,KAAK,KAArD,EAAE,MAAM,GAAwC,KAAK,OAA7C,EAAE,MAAM,GAAgC,KAAK,OAArC,EAAE,YAAY,GAAkB,KAAK,aAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAU;IAC3D,IAAA,KAA0B,QAAQ,CAAU,IAAI,CAAC,EAAhD,QAAQ,QAAA,EAAE,WAAW,QAA2B,CAAA;IACjD,IAAA,KAA8B,QAAQ,CAAU,KAAK,CAAC,EAArD,UAAU,QAAA,EAAE,aAAa,QAA4B,CAAA;IACtD,IAAA,KAAwB,QAAQ,CAAU,KAAK,CAAC,EAA/C,OAAO,QAAA,EAAE,UAAU,QAA4B,CAAA;IACtD,IAAM,aAAa,GAAG,oBAAoB,EAAE,CAAA;IAE5C,IAAM,UAAU,GAAG,MAAM,CAAC,4BAA4B,EAAE,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAA;IAEzF,IAAA,KAIF,OAAO,EAAE,EAHX,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACK,MAAM,sBACR,CAAA;IAEb,IAAM,GAAG,GAAG,MAAM,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;IAElF,IAAM,YAAY,GAAG,UAAO,KAAa,EAAE,QAAgB;;;;;;oBAEtC,qBAAM,KAAK,CAAC,UAAG,GAAG,qBAAkB,EAAE;4BACrD,OAAO,EAAE;gCACP,cAAc,EAAE,kBAAkB;6BACnC;4BACD,MAAM,EAAE,MAAM;4BACd,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;gCACnB,KAAK,OAAA;gCACL,QAAQ,UAAA;6BACT,CAAC;yBACH,CAAC,EAAA;;oBATI,QAAQ,GAAG,SASf;oBACF,IAAI,CAAC,QAAQ,CAAC,EAAE;wBAAE,sBAAM;oBAEjB,qBAAM,QAAQ,CAAC,IAAI,EAAE,EAAA;wBAA5B,sBAAO,SAAqB,EAAA;;;oBAE5B,OAAO,CAAC,KAAK,CAAC,OAAK,CAAC,CAAA;oBACpB,sBAAO,IAAI,EAAA;;;;SAEd,CAAA;IAED,IAAM,YAAY,GAAG,UAAO,MAAW;;;;;oBAC7B,KAAK,GAAe,MAAM,MAArB,EAAE,QAAQ,GAAK,MAAM,SAAX,CAAW;oBAClC,UAAU,CAAC,IAAI,CAAC,CAAA;oBAEO,qBAAM,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC;wBAC1D,0BAA0B;sBADgC;;oBAApD,SAAS,GAAQ,SAAmC;oBAC1D,0BAA0B;oBAC1B,IAAI,CAAC,SAAS,KAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAA,EAAE;wBACpC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;wBACxB,aAAa,CAAC,IAAI,CAAC,CAAA;wBACnB,UAAU,CAAC,KAAK,CAAC,CAAA;wBACjB,sBAAM;qBACP;oBACD,oBAAoB;oBACpB,qBAAM,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,EAAA;;oBADpE,oBAAoB;oBACpB,SAAoE,CAAA;oBAC5D,QAAQ,GAAK,SAAS,SAAd,CAAc;yBAE1B,CAAA,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA,EAAvC,wBAAuC;oBACnC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;oBACjD,qBAAM,iBAAiB,CAAC,cAAc,EAAE,gBAAgB,EAAE,IAAI,CAAC,EAAA;;oBAA/D,SAA+D,CAAA;oBAC/D,UAAU,CAAC,KAAK,CAAC,CAAA;oBACjB,aAAa,CAAC,KAAK,CAAC,CAAA;oBACpB,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;;;oBAEzB,aAAa,CAAC,IAAI,CAAC,CAAA;oBACnB,UAAU,CAAC,KAAK,CAAC,CAAA;;;;;SAEpB,CAAA;IAED,IAAM,WAAW,GAAG,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;IAE7E,6CAA6C;IAC7C,SAAS,CAAC;QACR,IAAI,aAAa,IAAI,WAAW,EAAE;YAChC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;SACtC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL;QACE,oBAAC,UAAU,IAAC,WAAW,EAAE,WAAW,GAAI;QACxC,8BAAM,SAAS,EAAC,iBAAiB;YAC/B,6BAAK,SAAS,EAAC,2DAA2D;gBACxE,6BAAK,SAAS,EAAC,uFAAuF;oBACpG,6BAAK,SAAS,EAAC,wBAAwB;wBACrC,6BAAK,SAAS,EAAC,eAAe;4BAC5B,6BAAK,SAAS,EAAC,oBAAoB,EAAC,GAAG,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,UAAG,UAAU,CAAE,EAAE,GAAG,EAAC,MAAM,GAAG;4BAC/E,4BAAI,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,SAAS,EAAC,sDAAsD,kDAE7F;4BACJ,UAAU,IAAI,CACb,6BAAK,SAAS,EAAC,QAAQ;gCACrB,oBAAC,SAAS,IACR,IAAI,EAAE,UAAU,EAChB,SAAS,EAAC,WAAW,EACrB,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,EACnC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,6CAAoB,EAC1B,WAAW,EAAC,oEAAsC,GAClD,CACE,CACP;4BACD,8BAAM,QAAQ,EAAE,YAAY,CAAC,YAAY,CAAC;gCACxC,6BAAK,SAAS,EAAC,WAAW;oCACxB,6BAAK,SAAS,EAAC,MAAM;wCACnB,oBAAC,QAAQ,IACP,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAC,OAAO;4CACb,YAAY;4CACZ,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,QAAQ,CAAC,OAAO,EAAE;gDAC1B,QAAQ,EAAE,IAAI;6CACf,CAAC,EACF,kBAAkB,EAAC,+BAAqB,GACxC,CACE;oCACN,oBAAC,QAAQ,IACP,SAAS,EAAC,gBAAgB;wCAC1B,YAAY;wCACZ,KAAK,EAAE,MAAM,CAAC,QAAQ,EACtB,kBAAkB,EAAC,4CAAwB,EAC3C,QAAQ,EAAE,QAAQ,CAAC,UAAU,EAAE;4CAC7B,QAAQ,EAAE,IAAI;yCACf,CAAC,EACF,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,UAAU,GACb;oCACF,oBAAC,WAAW,IACV,cAAc,EAAE,QAAQ,EACxB,KAAK,EAAC,kCAAmB,EACzB,QAAQ,EAAE,UAAC,CAAM,IAAK,OAAA,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAA7B,CAA6B,GACnD;oCACF,oBAAC,SAAS,IACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,yPAAyP,EACnQ,OAAO,QACP,MAAM,QACN,IAAI,EAAC,OAAO,+BAGF,CACR,CACD,CACH,CACF,CACF;gBACN,6BAAK,SAAS,EAAC,+CAA+C;oBAC5D,6BACE,SAAS,EAAC,6CAA6C,EACvD,GAAG,EACD,MAAM,aAAN,MAAM,cAAN,MAAM,GACN,wIAAwI,EAE1I,GAAG,EAAC,QAAQ,GACZ,CACE,CACF,CACD,CACN,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"LoginV3.js","sourceRoot":"","sources":["../../../../src/components/LoginV3/LoginV3.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/MainWrapV3/MainWrapV3.d.ts

@@ -9,4 +9,4 @@ export interface MainWrapProps {
     getDataCookies?: any;
     multipleMenu?: boolean;
 }
-export declare const PHXMainWrapV3: ({ children, params, pathName, router, hiddenLeftMenu, logoHeight, getDataCookies, multipleMenu, }: MainWrapProps) => React.JSX.Element;
+export declare const PHXMainWrapV3: ({ children, getDataCookies, hiddenLeftMenu, logoHeight, multipleMenu, params, pathName, router, }: MainWrapProps) => React.JSX.Element;

package/dist/esm/components/MainWrapV3/MainWrapV3.js

@@ -7,7 +7,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { PHXModal } from '../Modal';
 import { PHXSkeleton } from '../Skeleton';
 import Cookies from 'js-cookie';
-import { admin, AUTH_TOKEN, DEFAULT_AVATAR, DEFAULT_LOGO_DASHBOARD, DEFAULT_LOGO_LOGIN, DF_HEADER_BG_COLOR, DF_MENU_BG_ACTIVE_COLOR, DF_MENU_BG_COLOR, DF_MENU_HOVER_BG_COLOR, DF_MENU_ICON_ACTICE_COLOR, DF_MENU_ICON_AND_TEXT_HOVER_COLOR, DF_MENU_ICON_COLOR, DF_MENU_ICON_HOVER_COLOR, DF_MENU_TEXT_COLOR, DF_SEARCH_BG_COLOR, DF_SEARCH_BORDER_COLOR, DF_SEARCH_BORDER_HOVER_COLOR, DF_SEARCH_ICON_COLOR, DF_SEARCH_TEXT_COLOR, DF_SKELETON_COLOR, isLoggedCookie, KEY_SETTING, superAdmin, switchSchool, } from '../../utils/constants';
+import { ACTION_PERMISSION, AUTH_TOKEN, DEFAULT_AVATAR, DEFAULT_LOGO_DASHBOARD, DEFAULT_LOGO_LOGIN, DF_HEADER_BG_COLOR, DF_MENU_BG_ACTIVE_COLOR, DF_MENU_BG_COLOR, DF_MENU_HOVER_BG_COLOR, DF_MENU_ICON_ACTICE_COLOR, DF_MENU_ICON_AND_TEXT_HOVER_COLOR, DF_MENU_ICON_COLOR, DF_MENU_ICON_HOVER_COLOR, DF_MENU_TEXT_COLOR, DF_SEARCH_BG_COLOR, DF_SEARCH_BORDER_COLOR, DF_SEARCH_BORDER_HOVER_COLOR, DF_SEARCH_ICON_COLOR, DF_SEARCH_TEXT_COLOR, DF_SKELETON_COLOR, isLoggedCookie, KEY_SETTING, switchSchool, } from '../../utils/constants';
 import { ArrowLeftIcon } from '@heroicons/react/20/solid';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import SearchDetail from './search/search-bar';
@@ -15,12 +15,17 @@ import { PHXBanner } from '../Banner';
 import { CheckIcon } from '@heroicons/react/24/solid';
 import PHXFuncGetLoggedInfo from '../Func/getLoginInfo';
 import PHXClientQueryV3 from '../Func/clientQueryV3';
-import { styles } from '../MainWrap/style/sub-menu-style';
-import NavMobile from '../MainWrap/navigator/nav-mobile';
-import StyledCustomeLayout from '../MainWrap/appearance/appearance-styled';
 import { GET_PERMISSION_DETAIL_USER_V3, GET_SCHOOL_V3, getCampaignNameV3, queryGetProfileV3 } from '../../query';
 import { PHXCard } from '../Card';
 import PHXGetEnvPublicV3 from '../Func/getEnvPublic';
+import saveCookiesClient from '../Func/saveCookiesClient';
+import { encryptDataSync } from '../Func/getActionPermission';
+import { useLoading } from '../LoadingProvider';
+import StyledCustomeLayout from './appearance/appearance-styled';
+import NavMobile from './navigator/nav-mobile';
+import { styles } from './style/sub-menu-style';
+import { Icons } from './assets/Icon';
+import Image from 'next/image';
 library.add(fas);
 function classNames() {
     var classes = [];
@@ -31,7 +36,7 @@ function classNames() {
 }
 export var PHXMainWrapV3 = function (_a) {
     var _b, _c, _d, _e;
-    var children = _a.children, params = _a.params, pathName = _a.pathName, router = _a.router, _f = _a.hiddenLeftMenu, hiddenLeftMenu = _f === void 0 ? false : _f, _g = _a.logoHeight, logoHeight = _g === void 0 ? '28px' : _g, getDataCookies = _a.getDataCookies, _h = _a.multipleMenu, multipleMenu = _h === void 0 ? false : _h;
+    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 pid = (params ? params : {}).pid;
     var _j = useState(false), modal = _j[0], setModal = _j[1];
     var _k = useState(true), openSubMenu = _k[0], setOpenSubMenu = _k[1];
@@ -55,9 +60,7 @@ export var PHXMainWrapV3 = function (_a) {
     var locationPathname = typeof window !== 'undefined' ? window.location.pathname : '';
     var pathArr = locationPathname.split('/');
     var pathNameWithBasePath = "/".concat(pathArr[1]).concat(pathName);
-    function checkRole(role, arr) {
-        return arr === null || arr === void 0 ? void 0 : arr.some(function (item) { return (item === null || item === void 0 ? void 0 : item.toLowerCase()) === (role === null || role === void 0 ? void 0 : role.toLowerCase()); });
-    }
+    var setGlobalLoading = useLoading().setLoading;
     function enablePer(code, arr) {
         if (!code)
             return true;
@@ -67,7 +70,7 @@ export var PHXMainWrapV3 = function (_a) {
         path: '',
         height: logoHeight
     }), logo = _3[0], setLogo = _3[1];
-    var cookie = Cookies.get(isLoggedCookie);
+    var cookie = typeof window !== 'undefined' ? localStorage.getItem(isLoggedCookie) : null;
     var authen = Cookies.get(AUTH_TOKEN);
     function compareObjects(settingQuery, settingCookies) {
         var keysSettingQuery = Object.keys(settingQuery);
@@ -138,6 +141,7 @@ export var PHXMainWrapV3 = function (_a) {
                         Object.keys(Cookies.get()).forEach(function (cookieName) {
                             Cookies.remove(cookieName);
                         });
+                        localStorage.removeItem(isLoggedCookie);
                     }
                     return [3 /*break*/, 3];
                 case 2:
@@ -150,6 +154,7 @@ export var PHXMainWrapV3 = function (_a) {
     }); };
     useEffect(function () {
         getProfileData();
+        Cookies.remove(isLoggedCookie);
     }, []);
     useEffect(function () {
         var _a;
@@ -160,7 +165,7 @@ export var PHXMainWrapV3 = function (_a) {
         else {
             var data = JSON.parse(cookie);
             var allRoleCodes = (_a = data === null || data === void 0 ? void 0 : data.user_roles) === null || _a === void 0 ? void 0 : _a.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; });
-            var _b = data.school, group_id_1 = _b.school_name.group_id, school_name_id_1 = _b.school_name_id, school_id_1 = data.school_id, id_1 = data.id;
+            var id_1 = data.id, _b = data.school, group_id_1 = _b.school_name.group_id, school_name_id_1 = _b.school_name_id, school_id_1 = data.school_id;
             setRoleCode(allRoleCodes);
             setSchoolId(data === null || data === void 0 ? void 0 : data.school_id);
             var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -224,34 +229,39 @@ export var PHXMainWrapV3 = function (_a) {
             var allRoleCodesLength = allRoleCodes === null || allRoleCodes === void 0 ? void 0 : allRoleCodes.length;
             if (allRoleCodes && allRoleCodesLength > 0) {
                 var fetchDataPer = function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var res, userPermission, rolePermission, dataCodePermissionRole, dataCodePermissionUser, allCodes, uniqueValues, error_3;
-                    var _a, _b;
-                    return __generator(this, function (_c) {
-                        switch (_c.label) {
+                    var res, userPermission, rolePermission, dataPermissionUser, permissionRouter, permissionAction, objPermissionAction, encryptedData, uniqueValues, error_3;
+                    var _a, _b, _c, _d;
+                    return __generator(this, function (_e) {
+                        switch (_e.label) {
                             case 0:
-                                _c.trys.push([0, 2, 3, 4]);
+                                _e.trys.push([0, 3, 4, 5]);
                                 return [4 /*yield*/, PHXClientQueryV3({
                                         query: GET_PERMISSION_DETAIL_USER_V3,
                                         variables: { id: id_1, school_id: school_id_1 }
                                     })];
                             case 1:
-                                res = _c.sent();
+                                res = _e.sent();
                                 userPermission = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.permission_user;
                                 rolePermission = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.permission_role;
-                                dataCodePermissionRole = rolePermission === null || rolePermission === void 0 ? void 0 : rolePermission.map(function (item) { var _a; return (_a = item === null || item === void 0 ? void 0 : item.permission) === null || _a === void 0 ? void 0 : _a.code; });
-                                dataCodePermissionUser = userPermission === null || userPermission === void 0 ? void 0 : userPermission.map(function (item) { var _a; return (_a = item === null || item === void 0 ? void 0 : item.permission) === null || _a === void 0 ? void 0 : _a.code; });
-                                allCodes = __spreadArray(__spreadArray([], dataCodePermissionRole, true), dataCodePermissionUser, true);
-                                uniqueValues = Array.from(new Set(allCodes));
-                                setPerCode(uniqueValues);
-                                return [3 /*break*/, 4];
+                                dataPermissionUser = __spreadArray(__spreadArray([], userPermission, true), rolePermission, true);
+                                permissionRouter = (_c = dataPermissionUser === null || dataPermissionUser === void 0 ? void 0 : dataPermissionUser.filter(function (value) { var _a; return !((_a = value === null || value === void 0 ? void 0 : value.permission) === null || _a === void 0 ? void 0 : _a.is_action); })) === null || _c === void 0 ? void 0 : _c.map(function (item) { var _a; return (_a = item === null || item === void 0 ? void 0 : item.permission) === null || _a === void 0 ? void 0 : _a.code; });
+                                permissionAction = (_d = dataPermissionUser === null || dataPermissionUser === void 0 ? void 0 : dataPermissionUser.filter(function (value) { var _a; return (_a = value === null || value === void 0 ? void 0 : value.permission) === null || _a === void 0 ? void 0 : _a.is_action; })) === null || _d === void 0 ? void 0 : _d.map(function (item) { var _a; return (_a = item === null || item === void 0 ? void 0 : item.permission) === null || _a === void 0 ? void 0 : _a.code; });
+                                objPermissionAction = Object.fromEntries(permissionAction.map(function (key) { return [key, true]; }));
+                                encryptedData = encryptDataSync(objPermissionAction);
+                                return [4 /*yield*/, saveCookiesClient(ACTION_PERMISSION, JSON.stringify(encryptedData), true)];
                             case 2:
-                                error_3 = _c.sent();
-                                console.error('Error fetching school data:', error_3);
-                                return [3 /*break*/, 4];
+                                _e.sent();
+                                uniqueValues = Array.from(new Set(permissionRouter));
+                                setPerCode(uniqueValues);
+                                return [3 /*break*/, 5];
                             case 3:
+                                error_3 = _e.sent();
+                                console.error('Error fetching school data:', error_3);
+                                return [3 /*break*/, 5];
+                            case 4:
                                 setIsLoadingPermission(false);
                                 return [7 /*endfinally*/];
-                            case 4: return [2 /*return*/];
+                            case 5: return [2 /*return*/];
                         }
                     });
                 }); };
@@ -269,8 +279,8 @@ export var PHXMainWrapV3 = function (_a) {
                         case 0: return [4 /*yield*/, PHXGetEnvPublicV3()];
                         case 1:
                             envPublic = _a.sent();
-                            menuUrl = envPublic === null || envPublic === void 0 ? void 0 : envPublic['SCHOOL_MENU'];
-                            logoMenuTop = envPublic === null || envPublic === void 0 ? void 0 : envPublic['SCHOOL_TOP_MENU_LOGO'];
+                            menuUrl = envPublic === null || envPublic === void 0 ? void 0 : envPublic.SCHOOL_MENU;
+                            logoMenuTop = envPublic === null || envPublic === void 0 ? void 0 : envPublic.SCHOOL_TOP_MENU_LOGO;
                             if (!menuUrl || !logoMenuTop) {
                                 console.error('menu or logo not found');
                             }
@@ -389,8 +399,9 @@ export var PHXMainWrapV3 = function (_a) {
                         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))
+                            if (isBelongParent(subChild.path, path) || isBelongParent(childItem.path, path)) {
                                 childItem.showChild = true;
+                            }
                             subChild.path === childItem.path ? (childItem.current = false) : null;
                         }
                     }
@@ -484,6 +495,7 @@ export var PHXMainWrapV3 = function (_a) {
         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));
@@ -492,7 +504,7 @@ export var PHXMainWrapV3 = function (_a) {
             router.push(item.path);
         }
     };
-    var path = logo.path, height = logo.height;
+    var height = logo.height, path = logo.path;
     var handleModalSignOut = function () { return setModalSignOut(true); };
     var handleRedirectRouter = function (path) {
         var currentURL = window.location.href;
@@ -505,6 +517,7 @@ export var PHXMainWrapV3 = function (_a) {
         Object.keys(Cookies.get()).forEach(function (cookieName) {
             Cookies.remove(cookieName);
         });
+        localStorage.removeItem(isLoggedCookie);
         console.log('Đăng xuất tài khoản');
         handleRedirectRouter('login-sso');
     };
@@ -515,9 +528,6 @@ export var PHXMainWrapV3 = function (_a) {
         router.push('/campaign/list');
         loadParentNavigation('/admissions/campaign/list');
     };
-    var handleClickPageAdmin = function () {
-        window.location.replace('/permission/role/list');
-    };
     var checkChildBefore = function (item, currentItem) {
         var currentIndexActive = item.find(function (s) { return s.current; });
         return currentIndexActive ? currentIndexActive.id > currentItem.id : false;
@@ -537,8 +547,8 @@ export var PHXMainWrapV3 = function (_a) {
                     var newSchoolId = selected;
                     if (newSchoolId && newSchoolId !== data.school_id) {
                         data.school_id = newSchoolId;
-                        var updatedCookie = encodeURIComponent(JSON.stringify(data));
-                        document.cookie = "".concat(isLoggedCookie, "=").concat(updatedCookie, ";path=/");
+                        var updatedCookie = JSON.stringify(data);
+                        localStorage.setItem(isLoggedCookie, updatedCookie);
                         window.location.replace('/');
                     }
                 }
@@ -581,34 +591,28 @@ export var PHXMainWrapV3 = function (_a) {
     var checkLogoHeader = settingLength === 0 ? df_logo_dashboard : logo_dashboard || path;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: 'flex min-h-full flex-col' },
-            React.createElement(StyledCustomeLayout, { defaultSettingLayout: defaultSettingLayout, data: dataSchool, configLayout: configLayout, settingLocal: getDataCookies }),
-            React.createElement("header", { className: 'fixed top-0 z-50 min-w-full border-gray-200 bg-white header-color-styled' },
-                React.createElement("div", { className: 'mx-auto flex h-14 items-center justify-between pr-4 bg-[#1a1a1a] header-styled' },
-                    React.createElement("div", { className: 'flex items-center lg:w-32 gap-x-3' },
-                        React.createElement("a", { href: '/', className: 'w-full flex items-center' }, path ? (React.createElement(React.Fragment, null, isLoading ? (React.createElement("div", { className: 'animate-pulse w-full h-8 ml-3 header-loading-logo' })) : (React.createElement("img", { alt: 'Logo', className: 'w-auto ml-3', src: checkLogoHeader, style: { height: height } })))) : (React.createElement(React.Fragment, null))),
-                        React.createElement("div", { className: 'lg:hidden flex items-center' },
-                            React.createElement("button", { className: 'bg-grey-100 mr-3 inline-flex p-1 items-center justify-center rounded-md 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.createElement(StyledCustomeLayout, { configLayout: configLayout, data: dataSchool, defaultSettingLayout: defaultSettingLayout, settingLocal: getDataCookies }),
+            React.createElement("header", { className: 'header-color-styled fixed top-0 z-50 min-w-full border-gray-200 bg-white' },
+                React.createElement("div", { className: 'header-styled mx-auto flex h-14 items-center justify-between bg-[#1a1a1a] pr-4' },
+                    React.createElement("div", { className: 'flex items-center gap-x-3 lg:w-32' },
+                        React.createElement("a", { className: 'flex w-full items-center', href: '/' }, path ? (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: 'ml-3 w-auto', src: checkLogoHeader, style: { height: height } })))) : (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-600 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white', 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", { "aria-hidden": true, className: 'hidden sm:block w-[30%] h-8 bg-indigo-700 rounded-lg border border-indigo-500 relative hover:border-gray-200 cursor-pointer search-box-styled', onClick: function () { return setShowSearchBar(true); } },
-                        React.createElement("div", { className: 'relative text-indigo-400 flex items-center gap-x-3 text-xs top-1.5 left-2.5' },
-                            React.createElement("div", { className: 'flex items-center' },
-                                React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', strokeWidth: '1.5', stroke: 'currentColor', className: 'w-4 h-4' },
-                                    React.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' })),
-                                React.createElement("p", { className: 'ml-2' }, "T\u00ECm ki\u1EBFm")))),
-                    React.createElement(SearchDetail, { open: showSearchBar, onClose: function () { return setShowSearchBar(false); } }),
+                    React.createElement(SearchDetail, { onClose: function () { return setShowSearchBar(false); }, open: showSearchBar }),
                     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: 'animate-pulse flex' },
-                                            React.createElement("div", { className: 'rounded-full h-8 w-8 header-loading-avatar' }))) : (React.createElement("img", { alt: '', className: 'h-8 w-8 rounded-full', src: sourceAvatar })))),
+                                        isLoading ? (React.createElement("div", { className: 'flex animate-pulse' },
+                                            React.createElement("div", { className: 'header-loading-avatar h-8 w-8 rounded-full' }))) : (React.createElement("img", { alt: '', className: 'h-8 w-8 rounded-full', src: 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: ' px-2 absolute right-0 z-10 mt-2 w-[340px] origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none' },
+                                    React.createElement(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.createElement(Menu.Item, null,
-                                            React.createElement("div", { "aria-hidden": true, className: 'px-2 pt-4 pb-2 font-semibold text-gray-900 text-sm ' }, "Ch\u1ECDn tr\u01B0\u1EDDng")),
+                                            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")),
                                         !loadingSchool ? (React.createElement(React.Fragment, null, infoSchool
                                             .filter(function (val) {
                                             if (!enablePer(switchSchool, perCode)) {
@@ -622,30 +626,28 @@ export var PHXMainWrapV3 = function (_a) {
                                             React.createElement("div", { "aria-hidden": true, className: "".concat(item.id === schoolId &&
                                                     infoSchool.length > 1 &&
                                                     !enablePer(switchSchool, perCode) === false
-                                                    ? 'rounded-lg bg-zinc-200 text-gray-900 font-semibold '
+                                                    ? 'rounded-lg bg-zinc-200 font-semibold text-gray-900 '
                                                     : 'font-normal   ', " \n                                  ").concat(item.id !== schoolId &&
                                                     (infoSchool.length === 1 || !enablePer(switchSchool, perCode)) === false
-                                                    ? 'hover:bg-gray-100 hover:rounded-lg cursor-pointer'
-                                                    : '', "\n                              py-1.5 relative  px-2 mb-1 text-gray-900 text-sm  flex justify-between items-center"), onClick: function () { return handleOpenModal(item.id); } },
-                                                React.createElement("p", { className: 'truncate max-w-[95%]' }, item.name),
+                                                    ? '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 === schoolId &&
                                                     infoSchool.length > 1 &&
-                                                    !enablePer(switchSchool, perCode) === false && (React.createElement(CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))))); }))) : (React.createElement(PHXSkeleton, { className: 'flex-1 py-2 px-2', type: 'single' })),
+                                                    !enablePer(switchSchool, 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: 'pt-4 px-2 pb-2  font-semibold text-gray-900 text-sm' }, "T\u00F9y ch\u1ECDn")),
+                                            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: 'py-1.5 px-2 cursor-pointer text-gray-900 text-sm hover:bg-gray-100 hover:rounded-lg', onClick: handleProfilePage }, "Th\u00F4ng tin c\u00E1 nh\u00E2n")),
-                                        (checkRole(admin, roleCode) || checkRole(superAdmin, roleCode)) && (React.createElement(Menu.Item, null,
-                                            React.createElement("div", { "aria-hidden": true, className: 'py-1.5  px-2 cursor-pointer  text-gray-900 text-sm hover:bg-gray-100 hover:rounded-lg', onClick: handleClickPageAdmin }, "Qu\u1EA3n tr\u1ECB \u0111\u0103ng nh\u1EADp portal"))),
+                                            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: 'py-1.5 px-2 mb-2.5 cursor-pointer text-[#8e1f0c] text-sm hover:bg-gray-100 hover:rounded-lg', onClick: handleModalSignOut }, "\u0110\u0103ng xu\u1EA5t")))))))))),
+                                            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-gray-700 text-sm' }, "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); }, primaryActionText: 'X\u00E1c nh\u1EADn', show: modal, onPrimaryClick: handlePrimaryModal, title: 'X\u00E1c nh\u1EADn thay \u0111\u1ED5i tr\u01B0\u1EDDng' },
+                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-[#f1f1f1]' },
+        React.createElement("div", { className: 'relative flex min-h-screen bg-gray-100' },
             React.createElement(Transition.Root, { as: Fragment, show: sidebarOpen },
                 React.createElement(Dialog, { as: 'div', className: 'relative z-40 lg:hidden', onClose: setSidebarOpen },
                     React.createElement(Transition.Child, { as: Fragment, enter: 'transition-opacity ease-linear duration-300', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'transition-opacity ease-linear duration-300', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
@@ -659,77 +661,82 @@ export var PHXMainWrapV3 = function (_a) {
                                             React.createElement("span", { className: 'sr-only' }, "Close sidebar"),
                                             React.createElement(XMarkIcon, { "aria-hidden": 'true', className: 'h-6 w-6 text-white' })))),
                                 React.createElement("div", { className: 'mt-8 h-0 flex-1 overflow-y-auto pb-4 pt-5' },
-                                    React.createElement(NavMobile, { setSideBarOpen: function () { return setSidebarOpen(false); }, permission: perCode, menu: menu, path: pathNameWithBasePath, router: router })))),
+                                    React.createElement(NavMobile, { menu: menu, path: pathNameWithBasePath, permission: perCode, router: router, setSideBarOpen: function () { return setSidebarOpen(false); } })))),
                         React.createElement("div", { "aria-hidden": 'true', className: 'w-14 flex-shrink-0' })))),
             React.createElement("div", { className: 'hidden lg:flex lg:flex-shrink-0' },
                 React.createElement("div", { className: 'flex' },
                     React.createElement("div", { className: 'mt-14 flex lg:inset-y-0' },
-                        React.createElement("div", { "aria-hidden": true, className: "".concat(openNavName ? 'w-64' : 'w-14', " transition-all duration-300 z-10 flex h-full flex-col justify-between border-r bg-[#f1f1f1] lg:fixed menu-styled"), onMouseOver: function () { return setOpenNavName(true); }, onMouseOut: function () { return setOpenNavName(false); } },
-                            React.createElement("div", { className: classNames('#ebebeb flex flex-1 flex-col', openNavName ? 'overflow-y-auto' : 'overflow-y-hidden') },
-                                React.createElement("div", { className: 'flex-1 relative' },
-                                    React.createElement("div", { "aria-label": 'Sidebar', className: 'hidden md:block md:flex-shrink-0 md:overflow-y-auto overflow-x-hidden' }, !hiddenLeftMenu && (React.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.createElement("div", { key: index, className: 'w-full' }, (roleCode === null || roleCode === void 0 ? void 0 : roleCode.length) > 0 ? (React.createElement(React.Fragment, null, enablePer(item.code, perCode) && (React.createElement("a", { className: "".concat(classNames(item.current && !openNavName
-                                            ? 'font-semibold menu-bg-color-icon-active-styled' // màu background của icon đang active của menu
-                                            : 'font-medium menu-icon-color-styled', // màu icon của menu
+                        React.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.createElement("div", { className: classNames('flex flex-1 flex-col', openNavName ? 'overflow-y-auto' : 'overflow-y-hidden') },
+                                React.createElement("div", { className: 'relative flex-1' },
+                                    React.createElement("div", { "aria-label": 'Sidebar', className: 'hidden overflow-x-hidden md:block md:flex-shrink-0 md:overflow-y-auto' }, !hiddenLeftMenu && (React.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.createElement("div", { key: index, className: 'w-full' }, (roleCode === null || roleCode === void 0 ? void 0 : roleCode.length) > 0 ? (React.createElement(React.Fragment, null, enablePer(item.code, perCode) && (React.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
                                             ? 'mb-1.5 inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg'
-                                            : 'mb-1.5 inline-flex h-8 flex-shrink-0 items-center rounded-lg min-w-full', openNavName && item.current
-                                            ? 'rounded-lg menu-bg-color-icon-active-styled'
-                                            : 'hover:rounded-lg hover:bg-opacity-50 menu-hover-bg')), href: item.path, onClick: function () { return handleClicked(item.path); }, onMouseOver: function () { return setOpenNavName(true); } },
+                                            : 'mb-1.5 inline-flex h-8 min-w-full flex-shrink-0 items-center rounded-lg', openNavName && item.current
+                                            ? 'menu-bg-color-icon-active-styled rounded-lg'
+                                            : 'menu-hover-bg hover:rounded-lg hover:bg-opacity-50')), href: item.path, onClick: function () { return handleClicked(item.path); }, onMouseOver: function () { return setOpenNavName(true); } },
                                         React.createElement("span", { className: 'sr-only' }, item.name),
                                         React.createElement("span", { className: classNames(!openNavName
-                                                ? 'group cursor-pointer hover:fixed hover:z-10 focus-visible:outline-none mt-0.5'
+                                                ? 'group cursor-pointer hover:z-10 focus-visible:outline-none'
                                                 : "flex gap-x-2 ".concat(item.menuIconSL ? 'pl-[3px] pt-[2px]' : 'pl-[0.45rem]')) },
-                                            item.menuIconSL ? (React.createElement("img", { src: item.menuIconSL, className: 'w-[1.6rem]', alt: 'icon' })) : (React.createElement(FontAwesomeIcon, { className: 'h-[1.125rem] w-[1.125rem] mt-1', icon: item.image })),
+                                            item.menuIconSL ? (React.createElement("img", { alt: 'icon', className: 'w-[1.6rem]', src: item.menuIconSL })) : (
+                                            // <FontAwesomeIcon
+                                            //   className="mt-1 h-[1.125rem] w-[1.125rem]"
+                                            //   icon={item.image}
+                                            // />
+                                            React.createElement(Image, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem] text-gray-950', openNavName && 'mt-[0.2rem]'), height: 0, src: item.current ? Icons["".concat(item.code, "_SOLID")] : Icons[item.code], width: 0 })),
                                             openNavName && (React.createElement("div", { className: 'h-6' },
-                                                React.createElement("p", { className: "transition-all h-full duration-300 text-[0.86rem] mt-0.5 ".concat(openNavName ? 'opacity-100' : 'opacity-0', " ").concat(item.current ? 'font-semibold' : '') }, item.name)))))))) : (React.createElement("a", { className: classNames(item.current && !openNavName
-                                            ? 'text-indigo-900 font-semibold menu-bg-color-icon-active-styled' // màu background của icon đang active trong menu
-                                            : 'text-gray-700 font-medium menu-icon-color-styled', // màu icon
+                                                React.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.createElement("a", { className: classNames(item.current && !openNavName
+                                            ? 'menu-bg-color-icon-active-styled font-semibold text-indigo-900' // màu background của icon đang active trong menu
+                                            : 'menu-icon-color-styled font-medium text-gray-700', // màu icon
                                         !openNavName
                                             ? 'mb-1.5 inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg'
-                                            : 'mb-1.5 inline-flex h-8 flex-shrink-0 items-center rounded-lg min-w-full', openNavName && item.current
-                                            ? 'rounded-lg text-indigo-900 menu-bg-color-icon-active-styled' // màu background của icon đang active
-                                            : 'hover:rounded-lg hover:bg-opacity-50 menu-hover-bg'), href: item.path, onClick: function () { return handleClicked(item.path); }, onMouseOver: function () { return setOpenNavName(true); } },
+                                            : 'mb-1.5 inline-flex h-8 min-w-full flex-shrink-0 items-center rounded-lg', openNavName && item.current
+                                            ? 'menu-bg-color-icon-active-styled rounded-lg text-indigo-900' // màu background của icon đang active
+                                            : 'menu-hover-bg hover:rounded-lg hover:bg-opacity-50'), href: item.path, onClick: function () { return handleClicked(item.path); }, onMouseOver: function () { return setOpenNavName(true); } },
                                         React.createElement("span", { className: classNames(!openNavName
-                                                ? 'group cursor-pointer hover:fixed hover:z-10 focus-visible:outline-none mt-0.5'
+                                                ? 'group mt-0.5 cursor-pointer hover:z-10 focus-visible:outline-none'
                                                 : "flex gap-x-2 ".concat(item.menuIconSL ? 'pl-[3px] pt-[2px]' : 'pl-[0.45rem]')) },
-                                            item.menuIconSL ? (React.createElement("img", { src: item.menuIconSL, className: 'w-[1.6rem]', alt: 'icon' })) : (React.createElement(FontAwesomeIcon, { className: 'h-[1.125rem] w-[1.125rem] mt-1', icon: item.image })),
+                                            item.menuIconSL ? (React.createElement("img", { alt: 'icon', className: 'w-[1.6rem]', src: item.menuIconSL })) : (React.createElement(FontAwesomeIcon, { className: 'mt-1 h-[1.125rem] w-[1.125rem]', icon: item.image })),
                                             openNavName && (React.createElement("div", { className: 'h-6' },
-                                                React.createElement("p", { className: "transition-all h-full duration-300 text-[0.86rem] mt-0.5 ".concat(openNavName ? 'opacity-100' : 'opacity-0', " ").concat(item.current ? 'font-semibold' : '', " ") }, item.name)))))))); })))))),
+                                                React.createElement("p", { className: "mt-0.5 h-full text-[0.86rem] transition-all duration-300 ".concat(openNavName ? 'opacity-100' : 'opacity-0', " ").concat(item.current ? 'font-semibold' : '', " ") }, item.name)))))))); })))))),
                             React.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.createElement("div", { className: "mb-14 space-y- flex ".concat(openNavName ? 'w-64' : 'w-12', " overflow-hidden p-3") },
-                                    React.createElement("a", { className: classNames('text-gray-700 font-medium', !openNavName
+                                React.createElement("div", { className: "mb-14 flex ".concat(openNavName ? 'w-64' : 'w-12', " overflow-hidden p-3") },
+                                    React.createElement("a", { className: classNames('z-0', !openNavName
                                             ? 'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg'
-                                            : 'inline-flex h-8 flex-shrink-0 items-center rounded-lg hover:rounded-lg hover:bg-opacity-50 min-w-full', isSettings() && !openNavName
-                                            ? 'text-indigo-900 font-semibold setting-bg-icon-active' // màu background của icon đang active trong menu
-                                            : 'text-gray-700 font-medium setting-icon-color', // màu icon
+                                            : 'inline-flex h-8 min-w-full flex-shrink-0 items-center rounded-lg hover:rounded-lg hover:bg-opacity-50', isSettings() && !openNavName
+                                            ? 'setting-bg-icon-active' // màu background của icon đang active trong menu
+                                            : 'setting-icon-color font-medium', // màu icon
                                         openNavName && isSettings()
-                                            ? 'rounded-lg text-indigo-900 setting-bg-icon-active' // màu background của icon đang active trong menu
-                                            : 'hover:rounded-lg hover:bg-opacity-50 setting-hover-bg'), href: '/setting', 
+                                            ? 'setting-bg-icon-active rounded-lg' // màu background của icon đang active trong menu
+                                            : 'setting-hover-bg hover:rounded-lg hover:bg-opacity-50'), href: '/setting', 
                                         // onClick={() => handleClicked(item.path)}
                                         onMouseOver: function () { return setOpenNavName(true); } },
                                         React.createElement("span", { className: 'sr-only' }, "setting"),
                                         React.createElement("span", { className: classNames(!openNavName
-                                                ? 'group cursor-pointer p-4 hover:fixed hover:z-10 focus-visible:outline-none mt-0.5'
+                                                ? 'cursor-pointer hover:z-10 focus-visible:outline-none'
                                                 : 'flex gap-x-2 pl-[0.45rem]') },
-                                            React.createElement(FontAwesomeIcon, { className: 'h-[1.125rem] w-[1.125rem] mt-1', icon: 'fa-solid fa-gear' }),
+                                            React.createElement(Image, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem]', openNavName ? 'mt-[0.2rem]' : ''), height: 0, src: isSettings() ? Icons.SETTING_SOLID : Icons.SETTING, width: 0 }),
                                             openNavName && (React.createElement("div", { className: 'h-6' },
-                                                React.createElement("p", { className: "transition-all h-full duration-300 text-[0.86rem] setting-text-color mt-0.5 ".concat(openNavName ? 'opacity-100' : 'opacity-0', " ").concat(isSettings() ? 'font-semibold' : '', " ") }, "C\u00E0i \u0111\u1EB7t")))))))),
+                                                React.createElement("p", { className: "setting-text-color mt-0.5 h-full text-[0.86rem] font-normal text-[#353A44] transition-all duration-300 hover:cursor-pointer ".concat(openNavName ? 'opacity-100' : 'opacity-0') }, "C\u00E0i \u0111\u1EB7t")))))))),
                         !hiddenLeftMenu && (React.createElement(Transition, { as: Fragment, enter: 'transition ease-in-out duration-300 transform', enterFrom: '-translate-x-full', enterTo: 'translate-x-0', leave: 'transition ease-in-out duration-300 transform', leaveFrom: 'translate-x-0', leaveTo: '-translate-x-full', show: openSubMenu },
-                            React.createElement("aside", { className: 'z-9 fixed ml-[3.438rem] hidden h-full bg-[#ebebeb] lg:block lg:flex-shrink-0' },
-                                React.createElement("div", { className: 'relative flex h-full w-64 flex-col overflow-y-auto border-r border-gray-200 bg-[#ebebeb]' },
+                            React.createElement("aside", { className: 'z-9 fixed ml-[3.438rem] hidden h-full bg-gray-200/20 lg:block lg:flex-shrink-0' },
+                                React.createElement("div", { className: 'relative flex h-full w-64 flex-col overflow-y-auto bg-gray-200/20' },
                                     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: 'inline-flex items-center rounded-lg border-gray-300 bg-transparent mr-1 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("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: 'font-medium text-sm text-slate-600' }, campaignName))),
+                                        React.createElement("p", { className: 'text-sm font-medium text-slate-600' }, campaignName))),
                                     React.createElement("div", { className: 'flex-1 overflow-y-auto pt-3' }, subNavigation.map(function (item, subNavIndex) { return (React.createElement("div", { key: subNavIndex }, (roleCode === null || roleCode === void 0 ? void 0 : roleCode.length) > 0 ? (React.createElement(React.Fragment, null, enablePer(item.code, perCode) ? (React.createElement(React.Fragment, null,
-                                        React.createElement("div", { "aria-hidden": true, "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, className: classNames((item === null || item === void 0 ? void 0 : item.current)
+                                        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-1 flex cursor-pointer border-slate-200 p-2'), onClick: function () { return subNavigationTriggerClicked(item); } }, !loadingMenu ? (React.createElement("div", { className: 'ml-1 text-[0.84rem] flex items-center' },
+                                            'mx-3 flex cursor-pointer border-slate-200 p-2'), onClick: function () { return subNavigationTriggerClicked(item); } }, !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-semibold' : 'font-medium text-gray-800') }, item === null || item === void 0 ? void 0 : item.name)),
+                                                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(function (children, childIndex) { return (React.createElement("div", { key: childIndex, className: classNames('relative') },
                                             React.createElement("div", { style: (children === null || children === void 0 ? void 0 : children.current)
@@ -737,9 +744,9 @@ export var PHXMainWrapV3 = function (_a) {
                                                     : checkChildBefore(item.child, children)
                                                         ? styles.childMenuBefBefore
                                                         : {} }),
-                                            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' // màu chữ menu con khi active
-                                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50 hover:text-gray-900'), onClick: enablePer(children.code, perCode)
+                                            React.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.createElement("div", { className: 'flex items-center gap-x-3' },
@@ -747,8 +754,8 @@ export var PHXMainWrapV3 = function (_a) {
                                                     React.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-semibold'
-                                                                : 'font-normal text-gray-500') }, children.name))),
+                                                                ? ''
+                                                                : 'font-normal text-[#353A44]') }, children.name))),
                                             React.createElement("div", { style: (children === null || children === void 0 ? void 0 : children.current)
                                                     ? styles.childMenuActiveAfter
                                                     : checkChildBefore(item.child, children)
@@ -756,15 +763,15 @@ export var PHXMainWrapV3 = function (_a) {
                                                         : {} }))); }))))) : (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-1 flex cursor-pointer border-slate-200 p-2') }, !loadingMenu ? (React.createElement("div", { className: 'ml-1 text-[0.84rem] flex items-center' },
+                                        'mx-3 flex cursor-pointer border-slate-200 p-2') }, !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('leading-5 font-medium text-gray-300') }, item === null || item === void 0 ? void 0 : item.name)),
+                                            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,
-                                        React.createElement("div", { "aria-hidden": true, "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, className: classNames((item === null || item === void 0 ? void 0 : item.current)
+                                        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'
-                                                : '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.createElement("div", { className: 'ml-3 text-[0.84rem] flex items-center' },
+                                                : '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.createElement("div", { className: 'ml-3 flex items-center text-[0.84rem]' },
                                             React.createElement("div", { className: 'flex items-center gap-x-3 text-gray-700' },
-                                                React.createElement("p", { className: classNames('leading-5 font-normal text-gray-500') }, item === null || item === void 0 ? void 0 : item.name)),
+                                                React.createElement("p", { className: classNames('font-normal leading-5 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 (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') },
                                             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)
@@ -772,12 +779,12 @@ export var PHXMainWrapV3 = function (_a) {
                                                     : '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('ml-3 leading-5 my-[0.05rem]', (children === null || children === void 0 ? void 0 : children.current) ? 'font-semibold' : 'text-gray-500 font-normal') }, children.name))))); }))))))); }))))))))),
+                                                    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-500') }, children.name))))); }))))))); }))))))))),
             React.createElement("div", { className: 'flex min-w-0 flex-1 flex-col overflow-hidden' },
                 React.createElement("main", { className: 'flex flex-1 overflow-hidden' },
                     React.createElement("section", { "aria-labelledby": 'primary-heading', className: 'flex h-full min-w-0 flex-1 flex-col lg:order-last' },
-                        React.createElement("div", { className: 'bg-bgcl-50 sticky top-0 z-10 flex h-14 flex-shrink-0 border-b border-l px-4 sm:px-6 lg:px-4' }),
-                        React.createElement("div", { className: "".concat(openSubMenu ? 'lg:ml-[20.063rem]' : 'lg:ml-[5.063rem]', " bg-[#f1f1f1] px-6") },
+                        React.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.createElement("div", { className: "".concat(openSubMenu ? 'lg:ml-[20.063rem]' : 'lg:ml-[5.063rem]', " bg-gray-100 px-6") },
                             React.createElement("div", { className: 'py-4' }, isLoadingPermission ? ('') : enablePer(currentCode, perCode) ? (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' },