mario-core 2.9.145-up → 2.9.147-level

package/dist/index.modern.js

@@ -21,7 +21,7 @@ import { CgMenuRight } from 'react-icons/cg';
 import { RiLogoutBoxRLine } from 'react-icons/ri';
 import Pusher from 'pusher-js/with-encryption';
 import { BsChevronDown } from 'react-icons/bs';
-import { FaPlus, FaTrashAlt, FaUsersCog, FaRegEdit, FaArrowLeft, FaDownload, FaTrash, FaEdit, FaFolderPlus, FaFileUpload } from 'react-icons/fa';
+import { FaPlus, FaTrashAlt, FaRegEdit, FaArrowLeft, FaDownload, FaTrash, FaEdit, FaFolderPlus, FaFileUpload, FaUsersCog } from 'react-icons/fa';
 import { format } from 'date-fns';
 import { Editor } from '@tinymce/tinymce-react';
 import differenceInCalendarYears from 'date-fns/differenceInCalendarYears';
@@ -32,6 +32,7 @@ import Creatable from 'react-select/creatable';
 import ReactNotification$1 from 'react-notifications-component';
 import 'react-notifications-component/dist/theme.css';
 import { AiOutlineEye } from 'react-icons/ai';
+import 'symbol-observable';
 
 var dashboard = "Dashboard";
 var user = "User";
@@ -2761,7 +2762,7 @@ function _catch(body, recover) {
 	return result;
 }
 
-var styles = {"btn-login-google":"_2HqmH","notification-count":"_2sew7","text-introduction":"_3OgWF","btn-trans-border":"_r9cAh","contact":"_NszFe","learn-more":"_MDjzH","title-quote":"_1Swkw","descriptions-quote":"_gi8vj","box-login":"_38Lo1","block-verification":"_1OzGy","block-login":"_wWIyO","title-login":"_3nuns","title-forgot-password":"_21qb6","btn-close":"_NhW9l","btn-login":"_3IL10","digital-privacy-icon":"_141p1","return-to-login":"_Ce3Kg","recover-account":"_2t6d9","link-to-login":"_3bDsd","remember":"_11FZt","term-and-conditions":"_3LXoI","descriptions-forgot-pass":"_PMcjT","content-icon":"_2rZY6","descriptions-icon":"_3SOdX","title-icon":"_y9lM2","nav-home":"_1TT1q","box-introduction":"_32V6L","icon":"_20YJX","form-user-name":"_39BJD","checkbox-remember":"_2K9b2","block-reset-password":"_23Sua","block-forgot-pass":"_3CWP6","page-not-login":"_3Wmco","content-quote":"_13Rk0","home-page":"_o6HKW","red-background":"_jOY7o","imageAnimation":"_wnn2_","login":"_F-hjL","login-content":"_149oA","logo-home":"_24U3W","img-box":"_2v-L_","img-login":"_3ncTL","img-login-rectangle":"_2kOvJ","c-main":"_39l0X","container-fluid":"_1BMwK","input-file-label":"_1XNpH","delete-avatar-button":"_1z5h9","header-logo":"_Gewcf","box-sidebar":"_2vcmv","sidebar-logo":"_1hXpy","sidebar-nav-links":"_3vb3s","c-active":"_36jSM","sidebar-nav-links-hover":"_DNrus","box-sidebar-header":"_3NEZj","box-logout":"_1wUDG","sidebar-btn-minimized":"_1S7Px","sidebar-logout":"_2P85D","nav-mobile":"_1qjbW","filter-media-file":"_1I62C","div":"_3cLcM","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","logout":"_1_9tV","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi","hide-in-mobile":"_1INnO","hamburger-menu":"_2yRc8","box-content-home-page":"_ABUIP","collapse-box":"_WX97m","hide-in-desktop":"_2LIqK","control-input":"_2Zz97","custom-control":"_3-yp5"};
+var styles = {"btn-login-google":"_2HqmH","notification-count":"_2sew7","text-introduction":"_3OgWF","btn-trans-border":"_r9cAh","contact":"_NszFe","learn-more":"_MDjzH","title-quote":"_1Swkw","descriptions-quote":"_gi8vj","box-login":"_38Lo1","block-verification":"_1OzGy","block-login":"_wWIyO","title-login":"_3nuns","title-forgot-password":"_21qb6","btn-close":"_NhW9l","btn-login":"_3IL10","digital-privacy-icon":"_141p1","return-to-login":"_Ce3Kg","recover-account":"_2t6d9","link-to-login":"_3bDsd","remember":"_11FZt","term-and-conditions":"_3LXoI","descriptions-forgot-pass":"_PMcjT","content-icon":"_2rZY6","descriptions-icon":"_3SOdX","title-icon":"_y9lM2","nav-home":"_1TT1q","box-introduction":"_32V6L","icon":"_20YJX","form-user-name":"_39BJD","checkbox-remember":"_2K9b2","block-reset-password":"_23Sua","block-forgot-pass":"_3CWP6","page-not-login":"_3Wmco","content-quote":"_13Rk0","home-page":"_o6HKW","red-background":"_jOY7o","imageAnimation":"_wnn2_","login":"_F-hjL","login-content":"_149oA","logo-home":"_24U3W","img-box":"_2v-L_","img-login":"_3ncTL","img-login-rectangle":"_2kOvJ","c-main":"_39l0X","container-fluid":"_1BMwK","input-file-label":"_1XNpH","delete-avatar-button":"_1z5h9","header-logo":"_Gewcf","box-sidebar":"_2vcmv","sidebar-logo":"_1hXpy","sidebar-nav-links":"_3vb3s","c-active":"_36jSM","sidebar-nav-links-hover":"_DNrus","box-sidebar-header":"_3NEZj","box-logout":"_1wUDG","sidebar-btn-minimized":"_1S7Px","sidebar-logout":"_2P85D","nav-mobile":"_1qjbW","filter-media-file":"_1I62C","div":"_3cLcM","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","logout":"_1_9tV","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi","hide-in-mobile":"_1INnO","hamburger-menu":"_2yRc8","box-content-home-page":"_ABUIP","collapse-box":"_WX97m","hide-in-desktop":"_2LIqK","control-input":"_2Zz97","custom-control":"_3-yp5","item-select-role":"_1KcY7","item-role-active":"_dOVso","model-switch-roles":"_3ZqxI","title":"_g-p72"};
 
 var style = {
   fontSize: "0.85rem"
@@ -2997,6 +2998,16 @@ var ROLES = {
   SECONDARY_TEACHER: "SecondaryTeacher"
 };
 var NOTIFICATION_ALERT_KEY = "NOTIFICATION_ALERT_KEY";
+var handleUserRole = function handleUserRole(userRoles) {
+  if (userRoles !== null && userRoles !== void 0 && userRoles.includes("Teacher") && userRoles !== null && userRoles !== void 0 && userRoles.includes("Assistant")) {
+    var roles = userRoles.filter(function (r) {
+      return r !== "Teacher" && r !== "Assistant";
+    });
+    roles.push("Teacher/Assistant");
+    return roles;
+  }
+  return userRoles;
+};
 
 var getAccessToken = (function () {
   try {
@@ -3617,7 +3628,7 @@ var BlockLogin = function BlockLogin(_ref) {
     }, React.createElement("div", {
       className: "" + styles["block-form"]
     }, React.createElement("img", {
-      src: "/images/main-blue-logo.svg",
+      src: "/images/horizontal-logo-blue.svg",
       className: "" + styles["img-login-rectangle"]
     }), React.createElement("p", {
       className: "" + styles["title-login"]
@@ -4137,7 +4148,7 @@ var Dashboard = function Dashboard() {
     href: "/",
     className: "" + styles["logo-home"]
   }, React.createElement("img", {
-    src: "/images/logo-v2.svg",
+    src: "/images/horizontal-logo-white.svg",
     alt: "mario"
   })), React.createElement(GiHamburgerMenu, {
     onClick: toggle,
@@ -4370,21 +4381,23 @@ var DEFAULT_USER_AVATAR = "/avatars/default-avatar.png";
 var ADMIN_ROLE = "Admin";
 var TEACHER_ROLE = "Teacher";
 var USER_DETAIL_URL = "/admin/user";
-var TheHeaderDropdown = function TheHeaderDropdown() {
+var TheHeaderDropdown = function TheHeaderDropdown(_ref) {
+  var _handleUserRole;
+  var onToggleModel = _ref.onToggleModel;
   var user = useSelector(function (state) {
     return state.common.user;
   });
   var dispatch = useDispatch();
+  var location = useLocation();
   var history = useHistory();
+  var params = new URLSearchParams(location.search);
+  var isReadOnly = params.get("isReadOnly");
   var email = user.email,
     profileImageFileName = user.profileImageFileName,
     roles = user.roles,
     id = user.id;
   var isAdmin = roles.includes(ADMIN_ROLE);
   var isTeacher = roles.includes(TEACHER_ROLE);
-  var goToTeacherPanel = useCallback(function () {
-    isTeacher && history.push("/home");
-  }, [isTeacher, history]);
   var signOut = useCallback(function () {
     localStorage.removeItem(ACCESS_TOKEN);
     dispatch(reset());
@@ -4422,20 +4435,20 @@ var TheHeaderDropdown = function TheHeaderDropdown() {
     className: styles["content-text"]
   }, React.createElement("h5", null, user.firstName + " " + user.lastName), React.createElement("span", {
     className: "block"
-  }, email), !isDistrict && React.createElement(NavLink, null, isTeacher && React.createElement(Link, {
-    to: "/my-profile"
-  }, "Edit profile"), isAdmin && React.createElement(Link, {
-    to: USER_DETAIL_URL + "/" + id
-  }, "Edit profile")))), isTeacher && React.createElement(DropdownItem, {
-    onClick: goToTeacherPanel,
+  }, email), !isDistrict && React.createElement(NavLink, null, (isAdmin || isTeacher) && React.createElement(Link, {
+    to: "" + (isAdmin ? USER_DETAIL_URL + "/" + id : "/my-profile")
+  }, "Edit profile")))), ((_handleUserRole = handleUserRole((user === null || user === void 0 ? void 0 : user.roles) || [])) === null || _handleUserRole === void 0 ? void 0 : _handleUserRole.length) > 1 && !isReadOnly && React.createElement(DropdownItem, {
+    onClick: function onClick() {
+      onToggleModel === null || onToggleModel === void 0 ? void 0 : onToggleModel();
+    },
     className: styles["dropdown-change"] + " px-0"
   }, React.createElement("div", {
-    className: styles["item-address"] + " d-flex align-items-center w-100"
+    className: styles["item-address"] + " d-flex align-items-center w-100 text-uppercase mb-2"
   }, React.createElement("span", {
     className: "mr-2"
   }, React.createElement("i", {
     className: "fas fa-cogs h6 mb-0"
-  })), "GO TO TEACHER PANEL")), React.createElement(DropdownItem, {
+  })), "Role change")), React.createElement(DropdownItem, {
     onClick: signOut,
     className: styles["dropdown-change"] + " px-0"
   }, React.createElement("div", {
@@ -4516,7 +4529,8 @@ var TheLanguageDropdown = function TheLanguageDropdown() {
   })), "United States"))));
 };
 
-var TheHeader = function TheHeader() {
+var TheHeader = function TheHeader(_ref) {
+  var onToggleModel = _ref.onToggleModel;
   var dispatch = useDispatch();
   var sidebarShow = useSelector(function (state) {
     return state.common.sidebarShow;
@@ -4548,7 +4562,9 @@ var TheHeader = function TheHeader() {
     },
     href: '/privacy-policy',
     target: "blank"
-  }, "Privacy Policy"), !isDistrict && React.createElement(NotificationButton, null), React.createElement(TheHeaderDropdown, null)));
+  }, "Privacy Policy"), !isDistrict && React.createElement(NotificationButton, null), React.createElement(TheHeaderDropdown, {
+    onToggleModel: onToggleModel
+  })));
 };
 
 var TITLE$2 = "Not found";
@@ -4655,6 +4671,54 @@ var canAccess = function canAccess(userRoles, componentRoles) {
   return true;
 };
 
+var ModelSelectRole = function ModelSelectRole(_ref) {
+  var _handleUserRole;
+  var open = _ref.open,
+    onToggleModel = _ref.onToggleModel;
+  var dispatch = useDispatch();
+  var history = useHistory();
+  var pathname = window.location.pathname;
+  var user = useSelector(function (state) {
+    return state.common.user;
+  });
+  var roles = user === null || user === void 0 ? void 0 : user.roles;
+  var handleSelectUserRoles = function handleSelectUserRoles(roles) {
+    if (roles.includes("Admin")) {
+      dispatch(setLoading(true));
+      return history.push("/admin/dashboard");
+    }
+    var roleSelect = roles.includes("Teacher/Assistant") ? ["Teacher", "Assistant"] : roles;
+    dispatch(setUser(_extends({}, user, {
+      roles: roleSelect
+    })));
+    localStorage.setItem("ROLES", roleSelect.toString());
+    onToggleModel();
+    if (roles.includes("Parent")) {
+      history.push("/parent");
+    } else {
+      pathname !== "/home" ? history.push("/home") : window.location.reload();
+    }
+  };
+  return React.createElement(Modal, {
+    isOpen: open,
+    toggle: function toggle() {
+      return onToggleModel();
+    },
+    className: "" + styles["model-switch-roles"],
+    centered: true
+  }, React.createElement("p", {
+    className: "" + styles["title"]
+  }, "Continue as:"), React.createElement("div", null, (_handleUserRole = handleUserRole(user === null || user === void 0 ? void 0 : user.roles)) === null || _handleUserRole === void 0 ? void 0 : _handleUserRole.map(function (r) {
+    return React.createElement("p", {
+      key: r,
+      className: styles["item-select-role"] + " " + styles[roles.includes("Teacher") && roles.includes("Assistant") && r === "Teacher/Assistant" && !roles.includes("Admin") || roles.includes("Admin") && r === "Admin" || roles.includes(r) && !roles.includes("Admin") ? "item-role-active" : ""],
+      onClick: function onClick() {
+        return handleSelectUserRoles([r]);
+      }
+    }, r == "SecondaryTeacher" ? "Support Teacher" : r);
+  })));
+};
+
 var TheLayout = function TheLayout(_ref) {
   var routes = _ref.routes,
     navigation = _ref.navigation;
@@ -4666,11 +4730,17 @@ var TheLayout = function TheLayout(_ref) {
   var language = useSelector(function (state) {
     return state.common.language;
   });
+  var _useState = useState(false),
+    openModelSelectRole = _useState[0],
+    setOpenModelSelectRole = _useState[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var location = useLocation();
   var isNotification = location.pathname.includes("notifications");
   var isDistrict = window.location.host.includes("-district");
+  var handleToggleModel = function handleToggleModel() {
+    setOpenModelSelectRole(!openModelSelectRole);
+  };
   var authRoutes = useMemo(function () {
     return routes.filter(function (route) {
       return canAccess(user === null || user === void 0 ? void 0 : user.roles, route.roles);
@@ -4736,11 +4806,16 @@ var TheLayout = function TheLayout(_ref) {
     navigation: authNavigations
   }), React.createElement("div", {
     className: "c-wrapper"
-  }, !isNotification && React.createElement(TheHeader, null), React.createElement("div", {
+  }, !isNotification && React.createElement(TheHeader, {
+    onToggleModel: handleToggleModel
+  }), React.createElement("div", {
     className: "c-body bg-white"
   }, React.createElement(TheContent$1, {
     routes: authRoutes
-  }))));
+  }))), React.createElement(ModelSelectRole, {
+    open: openModelSelectRole,
+    onToggleModel: handleToggleModel
+  }));
 };
 
 var buttonTextStyle = {
@@ -6824,8 +6899,80 @@ var SkillList = function SkillList() {
   }))));
 };
 
-var setUserList = createAction("users/setUserList");
-var setStudentList = createAction("users/setStudentList");
+var MAX_FILE_SIZE = 20097152;
+var UploadFileButton = function UploadFileButton(_ref) {
+  var fileName = _ref.fileName,
+    maxWidth = _ref.maxWidth,
+    maxHeight = _ref.maxHeight,
+    setFile = _ref.setFile,
+    canDelete = _ref.canDelete,
+    onDelete = _ref.onDelete,
+    isCheckFeedBack = _ref.isCheckFeedBack,
+    onAddImage = _ref.onAddImage;
+  var dispatch = useDispatch();
+  var _useState = useState(""),
+    imagePreviewUrl = _useState[0],
+    setImagePreviewUrl = _useState[1];
+  var imageStyle = {
+    maxWidth: maxWidth || "100%",
+    maxHeight: maxHeight || "100%"
+  };
+  var imageSrc = imagePreviewUrl || getFileUrl(fileName);
+  var handleImageChange = function handleImageChange(e) {
+    e.preventDefault();
+    var reader = new FileReader();
+    var newFile = e.target.files[0];
+    if (newFile.size > MAX_FILE_SIZE) {
+      dispatch(setAlert({
+        type: "danger",
+        message: "File can't be larger than 2MB"
+      }));
+      return;
+    }
+    reader.onloadend = function () {
+      setFile(newFile);
+      setImagePreviewUrl(reader.result);
+    };
+    if (newFile) {
+      reader.readAsDataURL(newFile);
+    }
+    !!onAddImage && onAddImage();
+  };
+  var imagePreviewContainer = imagePreviewUrl || fileName ? React.createElement("img", {
+    style: imageStyle,
+    src: imageSrc,
+    alt: "image"
+  }) : null;
+  return React.createElement("div", {
+    className: "mb-2"
+  }, React.createElement(Form, {
+    className: "mb-2"
+  }, React.createElement(Input, {
+    className: "d-none",
+    type: "file",
+    id: "uploadFile",
+    onChange: handleImageChange,
+    accept: "image/*"
+  }), React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, React.createElement(Label, {
+    htmlFor: "uploadFile",
+    role: "button",
+    tabIndex: 0,
+    className: styles["input-file-label"]
+  }, isCheckFeedBack == true ? React.createElement(MdAttachFile, null) : React.createElement(React.Fragment, null, React.createElement("i", {
+    className: "fa fa-paperclip mr-1",
+    "aria-hidden": "true"
+  }), imagePreviewUrl || fileName ? "Change file" : "Choose file")), canDelete && imagePreviewContainer && React.createElement(Button, {
+    size: "sm",
+    color: "danger",
+    className: styles["delete-avatar-button"] + " ml-2 d-flex align-items-center justify-content-center",
+    onClick: function onClick() {
+      setImagePreviewUrl(null);
+      onDelete && onDelete();
+    }
+  }, React.createElement(FaTrashAlt, null)))), imagePreviewContainer);
+};
 
 var USER_URL$1 = BASE_URL + "/api/user";
 var CHANGE_PASSWORD = BASE_URL + "/api/Account/changePassword";
@@ -6858,54 +7005,65 @@ var switchAccountUser = function switchAccountUser(id) {
   return api.post(EDU_USER_URL + "/switch-user/" + id);
 };
 
-var USER_URL$2 = "/admin/user";
-var CREATE_USER_URL = "/admin/create-user";
-var TITLE$7 = "User list";
-var HOMEPAGE_TEACHER$1 = "/home";
-var HOMEPAGE_STUDENT$1 = "/home";
-var HOMEPAGE_ADMIN$1 = "/admin/dashboard";
-var HOMEPAGE_PARENT$1 = "/parent";
-var HOMEPAGE_DISTRICT$1 = "/admin/schools";
-var HOMEPAGE_EDU_TEACHER$1 = "/list-student";
-var useUserList = function useUserList() {
-  var history = useHistory();
-  var query = new URLSearchParams(location.search);
-  var queryName = query.get("query");
-  var userList = useSelector(function (state) {
-    return state.users.userList;
-  });
-  var totalItems = useSelector(function (state) {
-    return state.users.totalItems;
-  });
-  var _useFilters = useFilters(),
-    filters = _useFilters.filters,
-    changeFilters = _useFilters.changeFilters;
-  var _useState = useState(!!queryName ? queryName : ""),
-    fullName = _useState[0],
-    setFullName = _useState[1];
-  var isDistrict = window.location.host.includes("-district");
+var initValue$3 = {
+  id: "",
+  firstName: "",
+  lastName: "",
+  email: "",
+  dateOfBirth: "",
+  roles: [],
+  isActive: true,
+  profileImageFileName: ""
+};
+var USER_LIST_URL = "/admin/user";
+var TITLE$7 = "User detail";
+var useUserDetail = function useUserDetail(id) {
   var dispatch = useDispatch();
-  var getData = useCallback(function (fullName) {
+  var history = useHistory();
+  var _useState = useState(initValue$3),
+    userDetail = _useState[0],
+    setUserDetail = _useState[1];
+  var _useState2 = useState(null),
+    file = _useState2[0],
+    setFile = _useState2[1];
+  var _useState3 = useState(false),
+    edited = _useState3[0],
+    setEdited = _useState3[1];
+  var setEditedTrue = function setEditedTrue() {
+    try {
+      localStorage.setItem(window.location.href, "true");
+      setEdited(true);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var _useState4 = useState([]),
+    currentRoles = _useState4[0],
+    setCurrentRoles = _useState4[1];
+  useEffect(function () {
+    document.title = TITLE$7;
+    setEdited(false);
+    if (!!localStorage.getItem(window.location.href)) localStorage.removeItem(window.location.href);
+  }, []);
+  useEffect(function () {
+    !!id && getData();
+  }, [id]);
+  var getData = useCallback(function () {
     try {
       var _temp2 = function _temp2() {
         dispatch(setLoading(false));
       };
       dispatch(setLoading(true));
       var _temp = _catch(function () {
-        return Promise.resolve(fullName ? get$5(_extends({}, filters, {
-          searchString: fullName
-        })) : get$5(filters)).then(function (res) {
-          var _res$data = res.data,
-            items = _res$data.items,
-            totalItems = _res$data.totalItems;
-          for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
-            var user = _step.value;
-            user.roles = user.roles.includes("EduTeacher") ? [ROLES.EDUTEACHER] : user.roles;
-          }
-          dispatch(setUserList({
-            userList: items,
-            totalItems: totalItems
+        return Promise.resolve(getById$3(id)).then(function (res) {
+          var _res$data$roles, _res$data, _res$data2;
+          setUserDetail(_extends({}, res.data, {
+            dateOfBirth: format(new Date(res.data.dateOfBirth), DATE_FORMAT),
+            roles: res.data.roles.includes("EduTeacher") ? [ROLES.EDUTEACHER] : res.data.roles
           }));
+          setCurrentRoles((_res$data$roles = res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.roles) != null ? _res$data$roles : []);
+          document.title = (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.fullName;
         });
       }, function (err) {
         var _err$response, _err$response$data;
@@ -6918,664 +7076,184 @@ var useUserList = function useUserList() {
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [dispatch, filters]);
-  useEffect(function () {
-    document.title = TITLE$7;
+  }, [id]);
+  var backToList = useCallback(function (user) {
+    !!user && typeof user === "string" ? history.push(USER_LIST_URL + ("?query=" + user)) : history.push(USER_LIST_URL);
   }, []);
-  useEffect(function () {
-    if (!!fullName) {
-      getData(fullName);
-      setFullName(null);
-    } else {
-      getData();
-    }
-  }, [filters]);
-  var removeData = useCallback(function (id) {
-    dispatch(setLoading(true));
+  var confirmData = useCallback(function (data) {
     try {
-      dispatch(setModal({
-        isOpen: true,
-        type: "warning",
-        message: "Do you want to remove this user?",
-        onConfirm: function () {
-          try {
-            return Promise.resolve(remove$3(id)).then(function () {
-              dispatch(setAlert({
-                type: "success",
-                message: "Remove user successfully"
-              }));
-              changeFilters({
-                currentPage: 1
+      var _temp6 = function _temp6() {
+        dispatch(setLoading(false));
+      };
+      dispatch(setLoading(true));
+      var _temp5 = _catch(function () {
+        function _temp4() {
+          var next = !!id ? update$5 : create$5;
+          !id && delete data.id;
+          return Promise.resolve(next(data)).then(function (result) {
+            if (!!result) {
+              getById$3(result.data.id).then(function (e) {
+                backToList(e.data.fullName);
               });
-            });
-          } catch (e) {
-            return Promise.reject(e);
-          }
+            }
+            if (!id) {
+              alert("Password of " + result.data.email + " is " + ("\"" + result.data.password + "\""));
+            }
+            dispatch(setAlert({
+              type: "success",
+              message: (!!id ? "Update" : "Create") + " user successfully"
+            }));
+          });
         }
-      }));
-    } catch (err) {
-      var _err$response2, _err$response2$data;
-      dispatch(setAlert({
-        type: "danger",
-        message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
-      }));
+        var _temp3 = function () {
+          if (!!file) {
+            var formData = new FormData();
+            var name = file.name;
+            formData.append("file", file, name);
+            return Promise.resolve(systemProfileUpload(formData)).then(function (res) {
+              var _res$data3;
+              var imageUrl = res === null || res === void 0 ? void 0 : (_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : _res$data3.key;
+              data.profileImageFileName = imageUrl;
+            });
+          }
+        }();
+        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+      }, function (err) {
+        var _err$response2, _err$response2$data;
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
+        }));
+      });
+      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+    } catch (e) {
+      return Promise.reject(e);
     }
-    dispatch(setLoading(false));
-  }, [filters]);
-  var redirectLoginUser = function redirectLoginUser(res) {
-    var _res$data2 = res.data,
-      token = _res$data2.token,
-      id = _res$data2.id,
-      firstName = _res$data2.firstName,
-      lastName = _res$data2.lastName,
-      roles = _res$data2.roles,
-      email = _res$data2.email,
-      profileImageFileName = _res$data2.profileImageFileName;
-    localStorage.setItem(ACCESS_TOKEN, token);
-    localStorage.removeItem(NOTIFICATION_ALERT_KEY);
-    dispatch(setUser({
-      id: id,
-      firstName: firstName,
-      lastName: lastName,
-      roles: roles,
-      email: email,
-      profileImageFileName: profileImageFileName
-    }));
-    if (isDistrict) {
-      history.push(HOMEPAGE_DISTRICT$1);
-    } else if (roles.includes("Admin")) {
-      history.push(HOMEPAGE_ADMIN$1);
-    } else if (roles.includes("Teacher") || roles.includes("Assistant")) {
-      history.push(HOMEPAGE_TEACHER$1);
-    } else if (roles.includes("Student")) {
-      history.push(HOMEPAGE_STUDENT$1);
-    } else if (roles.includes("Parent")) {
-      history.push(HOMEPAGE_PARENT$1);
-    } else if (roles.includes("EduTeacher")) {
-      history.push(HOMEPAGE_EDU_TEACHER$1);
-    } else if (roles.includes("Counselor") || roles.includes("SecondaryTeacher")) {
-      history.push(HOMEPAGE_TEACHER$1);
+  }, [id, file]);
+  var handleDisableRoles = function handleDisableRoles(currentRoles) {
+    return ["Student", "Parent", "EduTeacher"].includes(currentRoles);
+  };
+  var confirmChangePassword = function confirmChangePassword(data) {
+    try {
+      var _temp8 = function _temp8() {
+        dispatch(setLoading(false));
+      };
+      dispatch(setLoading(true));
+      var _temp7 = _catch(function () {
+        return Promise.resolve(changePassword(data)).then(function () {
+          dispatch(setAlert({
+            type: "success",
+            message: "Change password successfully"
+          }));
+        });
+      }, function (e) {
+        var _e$response, _e$response$data;
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_e$response = e.response) === null || _e$response === void 0 ? void 0 : (_e$response$data = _e$response.data) === null || _e$response$data === void 0 ? void 0 : _e$response$data.title) || e.message
+        }));
+      });
+      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7));
+    } catch (e) {
+      return Promise.reject(e);
     }
   };
-  var swicthUser = useCallback(function (id) {
+  var forgotPasswordRequest = useCallback(function (data) {
     try {
-      var _temp3 = _catch(function () {
-        return Promise.resolve(switchAccountUser(id)).then(function (res) {
-          var data = res.data;
-          dispatch(setModal({
-            isOpen: true,
-            type: "warning",
-            message: "Do you want to impersonate this user?",
-            onConfirm: function () {
-              try {
-                var _temp5 = function _temp5() {
-                  dispatch(setLoading(false));
-                };
-                dispatch(setLoading(true));
-                var _temp4 = _catch(function () {
-                  var req = {
-                    email: data.email,
-                    password: "default",
-                    accessToken: data.token
-                  };
-                  return Promise.resolve(logIn(req)).then(function (res) {
-                    localStorage.clear();
-                    redirectLoginUser(res);
-                  });
-                }, function (err) {
-                  var _err$response3, _err$response3$data;
-                  setAlert({
-                    type: "danger",
-                    message: ((_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.title) || err.message
-                  });
-                });
-                return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
-              } catch (e) {
-                return Promise.reject(e);
-              }
-            }
+      var _temp10 = function _temp10() {
+        dispatch(setLoading(false));
+      };
+      dispatch(setLoading(true));
+      var _temp9 = _catch(function () {
+        return Promise.resolve(forgotChangePassword(data)).then(function () {
+          dispatch(setAlert({
+            type: "success",
+            message: "Send forgot password link successfully"
           }));
         });
       }, function (err) {
-        var _err$response4, _err$response4$data;
+        var _err$response3, _err$response3$data;
         dispatch(setAlert({
           type: "danger",
-          message: ((_err$response4 = err.response) === null || _err$response4 === void 0 ? void 0 : (_err$response4$data = _err$response4.data) === null || _err$response4$data === void 0 ? void 0 : _err$response4$data.title) || err.message
+          message: ((_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.title) || err.message || "Error occured"
         }));
       });
-      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(_temp10) : _temp10(_temp9));
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [filters]);
-  var reDirectDetailPage = function reDirectDetailPage(id) {
-    var url = !!id ? USER_URL$2 + "/" + id : CREATE_USER_URL;
-    history.push(url);
-  };
+  }, []);
   return {
-    userList: userList,
-    totalItems: totalItems,
-    filters: filters,
-    queryName: queryName,
-    getData: getData,
-    removeData: removeData,
-    changeFilters: changeFilters,
-    reDirectDetailPage: reDirectDetailPage,
-    swicthUser: swicthUser
+    userDetail: userDetail,
+    backToList: backToList,
+    confirmData: confirmData,
+    file: file,
+    setFile: setFile,
+    edited: edited,
+    setEdited: setEdited,
+    setEditedTrue: setEditedTrue,
+    confirmChangePassword: confirmChangePassword,
+    forgotPasswordRequest: forgotPasswordRequest,
+    currentRoles: currentRoles,
+    handleDisableRoles: handleDisableRoles
   };
 };
 
-var SearchBox = function SearchBox(_ref) {
-  var initValue = _ref.initValue,
-    onSearch = _ref.onSearch,
-    placeholder = _ref.placeholder,
-    className = _ref.className,
-    style = _ref.style;
-  var _useState = useState(initValue),
-    searchString = _useState[0],
-    setSearchString = _useState[1];
-  useEffect(function () {
-    setSearchString(initValue);
-  }, [initValue]);
-  var onKeyUp = useCallback(function (e) {
-    e.key === "Enter" && onSearch(searchString);
-  }, [searchString, onSearch]);
-  return React.createElement(Input, {
-    placeholder: placeholder,
-    value: searchString,
-    onChange: function onChange(e) {
-      return setSearchString(e.target.value);
-    },
-    onKeyUp: onKeyUp,
-    className: className,
-    style: style
-  });
-};
-SearchBox.defaultProps = {
-  placeholder: "Type something to search",
-  className: "",
-  style: {}
-};
-var SearchBox$1 = memo(SearchBox);
-
-var searchInputStyle = {
-  height: 38
-};
-var SearchBoxContainer = function SearchBoxContainer(_ref) {
-  var text = _ref.text,
-    initValue = _ref.initValue,
-    onClick = _ref.onClick,
-    onSearch = _ref.onSearch,
-    placeholder = _ref.placeholder;
-  return React.createElement("div", {
-    className: "d-flex align-items-center"
-  }, React.createElement("div", null, React.createElement(AddButton, {
-    text: text,
-    onClick: onClick
-  })), React.createElement("div", {
-    className: "flex-grow-1 ml-2"
-  }, React.createElement(SearchBox$1, {
-    initValue: initValue,
-    onSearch: onSearch,
-    placeholder: placeholder,
-    style: searchInputStyle
-  })));
-};
-SearchBoxContainer.defaultProps = {
-  placeholder: "Type something to search"
-};
+var userSchema = object({
+  firstName: string().required("First name is required"),
+  lastName: string().required("Last name is required"),
+  dateOfBirth: string().required("Date of birth is required"),
+  email: string().email("Email is invalid").required("Email is required"),
+  roles: array().of(string()).min(1, "Role is required")
+});
 
-var utcToLocalTime = (function (time, FORMAT) {
-  if (time === DATE_MIN_VALUE) return "";
-  try {
-    return moment.utc(time).local().format(FORMAT || "yyyy-MM-DD");
-  } catch (_unused) {
-    return "";
-  }
+var changePasswordSchema = object({
+  oldPassword: string().required("Current password is required"),
+  newPassword: string().required("New password is required"),
+  confirmedNewPassword: string().required("Confirm password is required")
 });
 
-var header$2 = "User";
-var UserList = function UserList() {
-  var _useUserList = useUserList(),
-    queryName = _useUserList.queryName,
-    userList = _useUserList.userList,
-    totalItems = _useUserList.totalItems,
-    filters = _useUserList.filters,
-    removeData = _useUserList.removeData,
-    changeFilters = _useUserList.changeFilters,
-    reDirectDetailPage = _useUserList.reDirectDetailPage,
-    swicthUser = _useUserList.swicthUser;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return React.createElement("div", {
-    className: "fadeIn animated"
-  }, React.createElement("h5", {
-    className: "mb-2"
-  }, t("" + header$2)), React.createElement(Row, {
-    className: "my-2"
-  }, React.createElement(Col, {
-    md: 8
-  }, React.createElement(SearchBoxContainer, {
-    text: t("create_user"),
-    onClick: function onClick() {
-      return reDirectDetailPage();
-    },
-    initValue: !!queryName ? queryName : "",
-    onSearch: function onSearch(searchString) {
-      return changeFilters({
-        searchString: searchString
-      });
-    },
-    placeholder: t("type_something_to_search_by_user_name")
-  })), React.createElement(Col, {
-    md: 4,
-    className: "d-flex justify-content-end align-items-center"
-  }, t("total_of_users"), " : ", totalItems)), React.createElement(Row, {
-    className: "mb-2"
-  }, React.createElement(Col, {
-    md: 12
-  }, userList && userList.length > 0 ? React.createElement("div", null, React.createElement(Table, {
-    bordered: true,
-    hover: true,
-    striped: true,
-    responsive: true,
-    size: "sm"
-  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
-    className: "align-top"
-  }, t("name")), React.createElement("th", {
-    className: "align-top"
-  }, t("email")), React.createElement("th", {
-    className: "align-top"
-  }, t("age")), React.createElement("th", {
-    className: "align-top"
-  }, t("role")), React.createElement("th", {
-    className: "align-top"
-  }, t("active_status")), React.createElement("th", {
-    className: "align-top"
-  }, t("created_time")), React.createElement("th", {
-    className: "text-center"
-  }, t("action")))), React.createElement("tbody", null, userList.map(function (record) {
-    return React.createElement("tr", {
-      key: record.id
-    }, React.createElement("td", {
-      className: "align-middle"
-    }, React.createElement(LinkEditButton, {
-      label: "" + record.fullName,
-      onClick: function onClick() {
-        return reDirectDetailPage(record.id);
-      }
-    })), React.createElement("td", {
-      className: "align-middle"
-    }, record.email), React.createElement("td", {
-      className: "align-middle"
-    }, differenceInCalendarYears(new Date(), new Date(record.dateOfBirth))), React.createElement("td", {
-      className: "align-middle"
-    }, !!record.roles && record.roles.map(function (role) {
-      return role === "SecondaryTeacher" ? "SupportTeacher" : role;
-    }).join(", ")), React.createElement("td", {
-      className: "align-middle"
-    }, record.isActive ? t("active") : t("inactive")), React.createElement("td", {
-      className: "align-middle"
-    }, utcToLocalTime(record === null || record === void 0 ? void 0 : record.createTime, "yyyy-MM-DD HH:mm")), React.createElement("td", {
-      className: "text-center align-middle"
-    }, React.createElement(FaUsersCog, {
-      style: {
-        fontSize: "18px",
-        marginRight: "10px",
-        cursor: "pointer"
-      },
-      onClick: function onClick() {
-        return swicthUser(record.id);
-      }
-    }), React.createElement(DeleteButtonIcon, {
-      onClick: function onClick() {
-        return removeData(record.id);
-      }
-    })));
-  })))) : React.createElement(EmptyDataAlert, {
-    label: t("user")
-  })), React.createElement(Col, {
-    md: 12
-  }, React.createElement(CustomPagination, {
-    filters: filters,
-    totalRecordCount: totalItems,
-    changePageSize: function changePageSize(pageSize) {
-      return changeFilters({
-        pageSize: pageSize
-      });
-    },
-    changePage: function changePage(currentPage) {
-      return changeFilters({
-        currentPage: currentPage
-      });
-    }
-  }))));
-};
-
-var MAX_FILE_SIZE = 20097152;
-var UploadFileButton = function UploadFileButton(_ref) {
-  var fileName = _ref.fileName,
-    maxWidth = _ref.maxWidth,
-    maxHeight = _ref.maxHeight,
-    setFile = _ref.setFile,
-    canDelete = _ref.canDelete,
-    onDelete = _ref.onDelete,
-    isCheckFeedBack = _ref.isCheckFeedBack,
-    onAddImage = _ref.onAddImage;
-  var dispatch = useDispatch();
-  var _useState = useState(""),
-    imagePreviewUrl = _useState[0],
-    setImagePreviewUrl = _useState[1];
-  var imageStyle = {
-    maxWidth: maxWidth || "100%",
-    maxHeight: maxHeight || "100%"
+var CREATE_USER = "create_user";
+var EDIT_USER_HEADER = "edit_user";
+var CHANGE_PASSWORD$1 = "change_password";
+var UserDetail = function UserDetail() {
+  var _useParams = useParams(),
+    id = _useParams.id;
+  var user = useSelector(function (state) {
+    return state.common.user;
+  });
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useUserDetail = useUserDetail(id),
+    userDetail = _useUserDetail.userDetail,
+    backToList = _useUserDetail.backToList,
+    confirmData = _useUserDetail.confirmData,
+    file = _useUserDetail.file,
+    setFile = _useUserDetail.setFile,
+    edited = _useUserDetail.edited,
+    setEdited = _useUserDetail.setEdited,
+    setEditedTrue = _useUserDetail.setEditedTrue,
+    confirmChangePassword = _useUserDetail.confirmChangePassword,
+    forgotPasswordRequest = _useUserDetail.forgotPasswordRequest,
+    currentRoles = _useUserDetail.currentRoles,
+    handleDisableRoles = _useUserDetail.handleDisableRoles;
+  var initialValueForm = {
+    oldPassword: "",
+    newPassword: "",
+    confirmedNewPassword: ""
   };
-  var imageSrc = imagePreviewUrl || getFileUrl(fileName);
-  var handleImageChange = function handleImageChange(e) {
-    e.preventDefault();
-    var reader = new FileReader();
-    var newFile = e.target.files[0];
-    if (newFile.size > MAX_FILE_SIZE) {
-      dispatch(setAlert({
-        type: "danger",
-        message: "File can't be larger than 2MB"
-      }));
-      return;
-    }
-    reader.onloadend = function () {
-      setFile(newFile);
-      setImagePreviewUrl(reader.result);
-    };
-    if (newFile) {
-      reader.readAsDataURL(newFile);
-    }
-    !!onAddImage && onAddImage();
+  var header = !!id ? t("" + EDIT_USER_HEADER) : t("" + CREATE_USER);
+  var confirmText = !!id ? t("update") : t("create");
+  var getFile = function getFile() {
+    var url = window.location.origin + "/api/ExportDataUser/" + id;
+    window.open(url);
   };
-  var imagePreviewContainer = imagePreviewUrl || fileName ? React.createElement("img", {
-    style: imageStyle,
-    src: imageSrc,
-    alt: "image"
-  }) : null;
-  return React.createElement("div", {
-    className: "mb-2"
-  }, React.createElement(Form, {
-    className: "mb-2"
-  }, React.createElement(Input, {
-    className: "d-none",
-    type: "file",
-    id: "uploadFile",
-    onChange: handleImageChange,
-    accept: "image/*"
-  }), React.createElement("div", {
-    className: "d-flex align-items-center"
-  }, React.createElement(Label, {
-    htmlFor: "uploadFile",
-    role: "button",
-    tabIndex: 0,
-    className: styles["input-file-label"]
-  }, isCheckFeedBack == true ? React.createElement(MdAttachFile, null) : React.createElement(React.Fragment, null, React.createElement("i", {
-    className: "fa fa-paperclip mr-1",
-    "aria-hidden": "true"
-  }), imagePreviewUrl || fileName ? "Change file" : "Choose file")), canDelete && imagePreviewContainer && React.createElement(Button, {
-    size: "sm",
-    color: "danger",
-    className: styles["delete-avatar-button"] + " ml-2 d-flex align-items-center justify-content-center",
-    onClick: function onClick() {
-      setImagePreviewUrl(null);
-      onDelete && onDelete();
-    }
-  }, React.createElement(FaTrashAlt, null)))), imagePreviewContainer);
-};
-
-var initValue$3 = {
-  id: "",
-  firstName: "",
-  lastName: "",
-  email: "",
-  dateOfBirth: "",
-  roles: [],
-  isActive: true,
-  profileImageFileName: ""
-};
-var USER_LIST_URL = "/admin/user";
-var TITLE$8 = "User detail";
-var useUserDetail = function useUserDetail(id) {
-  var dispatch = useDispatch();
-  var history = useHistory();
-  var _useState = useState(initValue$3),
-    userDetail = _useState[0],
-    setUserDetail = _useState[1];
-  var _useState2 = useState(null),
-    file = _useState2[0],
-    setFile = _useState2[1];
-  var _useState3 = useState(false),
-    edited = _useState3[0],
-    setEdited = _useState3[1];
-  var setEditedTrue = function setEditedTrue() {
+  var onResetPw = function onResetPw(email) {
     try {
-      localStorage.setItem(window.location.href, "true");
-      setEdited(true);
-      return Promise.resolve();
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  var _useState4 = useState([]),
-    currentRoles = _useState4[0],
-    setCurrentRoles = _useState4[1];
-  useEffect(function () {
-    document.title = TITLE$8;
-    setEdited(false);
-    if (!!localStorage.getItem(window.location.href)) localStorage.removeItem(window.location.href);
-  }, []);
-  useEffect(function () {
-    !!id && getData();
-  }, [id]);
-  var getData = useCallback(function () {
-    try {
-      var _temp2 = function _temp2() {
-        dispatch(setLoading(false));
-      };
-      dispatch(setLoading(true));
-      var _temp = _catch(function () {
-        return Promise.resolve(getById$3(id)).then(function (res) {
-          var _res$data$roles, _res$data, _res$data2;
-          setUserDetail(_extends({}, res.data, {
-            dateOfBirth: format(new Date(res.data.dateOfBirth), DATE_FORMAT),
-            roles: res.data.roles.includes("EduTeacher") ? [ROLES.EDUTEACHER] : res.data.roles
-          }));
-          setCurrentRoles((_res$data$roles = res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.roles) != null ? _res$data$roles : []);
-          document.title = (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.fullName;
-        });
-      }, function (err) {
-        var _err$response, _err$response$data;
-        dispatch(setAlert({
-          type: "danger",
-          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
-        }));
-      });
-      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }, [id]);
-  var backToList = useCallback(function (user) {
-    !!user && typeof user === "string" ? history.push(USER_LIST_URL + ("?query=" + user)) : history.push(USER_LIST_URL);
-  }, []);
-  var confirmData = useCallback(function (data) {
-    try {
-      var _temp6 = function _temp6() {
-        dispatch(setLoading(false));
-      };
-      dispatch(setLoading(true));
-      var _temp5 = _catch(function () {
-        function _temp4() {
-          var next = !!id ? update$5 : create$5;
-          !id && delete data.id;
-          return Promise.resolve(next(data)).then(function (result) {
-            if (!!result) {
-              getById$3(result.data.id).then(function (e) {
-                backToList(e.data.fullName);
-              });
-            }
-            if (!id) {
-              alert("Password of " + result.data.email + " is " + ("\"" + result.data.password + "\""));
-            }
-            dispatch(setAlert({
-              type: "success",
-              message: (!!id ? "Update" : "Create") + " user successfully"
-            }));
-          });
-        }
-        var _temp3 = function () {
-          if (!!file) {
-            var formData = new FormData();
-            var name = file.name;
-            formData.append("file", file, name);
-            return Promise.resolve(systemProfileUpload(formData)).then(function (res) {
-              var _res$data3;
-              var imageUrl = res === null || res === void 0 ? void 0 : (_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : _res$data3.key;
-              data.profileImageFileName = imageUrl;
-            });
-          }
-        }();
-        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
-      }, function (err) {
-        var _err$response2, _err$response2$data;
-        dispatch(setAlert({
-          type: "danger",
-          message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
-        }));
-      });
-      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }, [id, file]);
-  var handleDisableRoles = function handleDisableRoles(currentRoles) {
-    return ["Student", "Parent", "EduTeacher"].includes(currentRoles);
-  };
-  var confirmChangePassword = function confirmChangePassword(data) {
-    try {
-      var _temp8 = function _temp8() {
-        dispatch(setLoading(false));
-      };
-      dispatch(setLoading(true));
-      var _temp7 = _catch(function () {
-        return Promise.resolve(changePassword(data)).then(function () {
-          dispatch(setAlert({
-            type: "success",
-            message: "Change password successfully"
-          }));
-        });
-      }, function (e) {
-        var _e$response, _e$response$data;
-        dispatch(setAlert({
-          type: "danger",
-          message: ((_e$response = e.response) === null || _e$response === void 0 ? void 0 : (_e$response$data = _e$response.data) === null || _e$response$data === void 0 ? void 0 : _e$response$data.title) || e.message
-        }));
-      });
-      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  var forgotPasswordRequest = useCallback(function (data) {
-    try {
-      var _temp10 = function _temp10() {
-        dispatch(setLoading(false));
-      };
-      dispatch(setLoading(true));
-      var _temp9 = _catch(function () {
-        return Promise.resolve(forgotChangePassword(data)).then(function () {
-          dispatch(setAlert({
-            type: "success",
-            message: "Send forgot password link successfully"
-          }));
-        });
-      }, function (err) {
-        var _err$response3, _err$response3$data;
-        dispatch(setAlert({
-          type: "danger",
-          message: ((_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.title) || err.message || "Error occured"
-        }));
-      });
-      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(_temp10) : _temp10(_temp9));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }, []);
-  return {
-    userDetail: userDetail,
-    backToList: backToList,
-    confirmData: confirmData,
-    file: file,
-    setFile: setFile,
-    edited: edited,
-    setEdited: setEdited,
-    setEditedTrue: setEditedTrue,
-    confirmChangePassword: confirmChangePassword,
-    forgotPasswordRequest: forgotPasswordRequest,
-    currentRoles: currentRoles,
-    handleDisableRoles: handleDisableRoles
-  };
-};
-
-var userSchema = object({
-  firstName: string().required("First name is required"),
-  lastName: string().required("Last name is required"),
-  dateOfBirth: string().required("Date of birth is required"),
-  email: string().email("Email is invalid").required("Email is required"),
-  roles: array().of(string()).min(1, "Role is required")
-});
-
-var changePasswordSchema = object({
-  oldPassword: string().required("Current password is required"),
-  newPassword: string().required("New password is required"),
-  confirmedNewPassword: string().required("Confirm password is required")
-});
-
-var CREATE_USER = "create_user";
-var EDIT_USER_HEADER = "edit_user";
-var CHANGE_PASSWORD$1 = "change_password";
-var UserDetail = function UserDetail() {
-  var _useParams = useParams(),
-    id = _useParams.id;
-  var user = useSelector(function (state) {
-    return state.common.user;
-  });
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useUserDetail = useUserDetail(id),
-    userDetail = _useUserDetail.userDetail,
-    backToList = _useUserDetail.backToList,
-    confirmData = _useUserDetail.confirmData,
-    file = _useUserDetail.file,
-    setFile = _useUserDetail.setFile,
-    edited = _useUserDetail.edited,
-    setEdited = _useUserDetail.setEdited,
-    setEditedTrue = _useUserDetail.setEditedTrue,
-    confirmChangePassword = _useUserDetail.confirmChangePassword,
-    forgotPasswordRequest = _useUserDetail.forgotPasswordRequest,
-    currentRoles = _useUserDetail.currentRoles,
-    handleDisableRoles = _useUserDetail.handleDisableRoles;
-  var initialValueForm = {
-    oldPassword: "",
-    newPassword: "",
-    confirmedNewPassword: ""
-  };
-  var header = !!id ? t("" + EDIT_USER_HEADER) : t("" + CREATE_USER);
-  var confirmText = !!id ? t("update") : t("create");
-  var getFile = function getFile() {
-    var url = window.location.origin + "/api/ExportDataUser/" + id;
-    window.open(url);
-  };
-  var onResetPw = function onResetPw(email) {
-    try {
-      var data = {
-        email: email
-      };
-      forgotPasswordRequest(data);
+      var data = {
+        email: email
+      };
+      forgotPasswordRequest(data);
       return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
@@ -7961,6 +7639,15 @@ var CommonHeader = function CommonHeader(_ref) {
   }, header))));
 };
 
+var utcToLocalTime = (function (time, FORMAT) {
+  if (time === DATE_MIN_VALUE) return "";
+  try {
+    return moment.utc(time).local().format(FORMAT || "yyyy-MM-DD");
+  } catch (_unused) {
+    return "";
+  }
+});
+
 var NotificationLogoutModal = function NotificationLogoutModal() {
   var _useState = useState(false),
     isOpen = _useState[0],
@@ -8048,6 +7735,39 @@ var CreatableSelector = function CreatableSelector(props) {
   });
 };
 
+var SearchBox = function SearchBox(_ref) {
+  var initValue = _ref.initValue,
+    onSearch = _ref.onSearch,
+    placeholder = _ref.placeholder,
+    className = _ref.className,
+    style = _ref.style;
+  var _useState = useState(initValue),
+    searchString = _useState[0],
+    setSearchString = _useState[1];
+  useEffect(function () {
+    setSearchString(initValue);
+  }, [initValue]);
+  var onKeyUp = useCallback(function (e) {
+    e.key === "Enter" && onSearch(searchString);
+  }, [searchString, onSearch]);
+  return React.createElement(Input, {
+    placeholder: placeholder,
+    value: searchString,
+    onChange: function onChange(e) {
+      return setSearchString(e.target.value);
+    },
+    onKeyUp: onKeyUp,
+    className: className,
+    style: style
+  });
+};
+SearchBox.defaultProps = {
+  placeholder: "Type something to search",
+  className: "",
+  style: {}
+};
+var SearchBox$1 = memo(SearchBox);
+
 var QuestionTypeSelector = function QuestionTypeSelector(props) {
   var id = props.id;
   var initValue = !!id ? QUESTION_TYPES_OPTIONS.find(function (option) {
@@ -8379,7 +8099,7 @@ var defaultFilters = {
   searchString: "",
   isRead: false
 };
-var TITLE$9 = "Notification list";
+var TITLE$8 = "Notification list";
 var NOTIFICATION_CHANNEL$1 = "NOTIFICATION_CHANNEL";
 var NEW_NOTIFICATION$1 = "NEW_NOTIFICATION";
 var useNotificationList = function useNotificationList() {
@@ -8494,7 +8214,7 @@ var useNotificationList = function useNotificationList() {
     }
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$9;
+    document.title = TITLE$8;
   }, []);
   useEffect(function () {
     getData();
@@ -8576,7 +8296,7 @@ var useNotificationList = function useNotificationList() {
   };
 };
 
-var header$3 = "Notification list";
+var header$2 = "Notification list";
 var ICON_SIZE = 20;
 var NotificationList = function NotificationList() {
   var _useNotificationList = useNotificationList(),
@@ -8595,7 +8315,7 @@ var NotificationList = function NotificationList() {
     }
   }, React.createElement("h5", {
     className: "mb-2"
-  }, header$3), React.createElement(Row, {
+  }, header$2), React.createElement(Row, {
     className: "my-2"
   }, React.createElement(Col, {
     md: 8
@@ -8695,12 +8415,39 @@ var NotificationList = function NotificationList() {
   }))));
 };
 
-var CustomTabs = function CustomTabs(props) {
-  var history = useHistory();
-  var location = useLocation();
-  var pathname = location.pathname;
-  var tabs = props.tabs,
-    title = props.title;
+var searchInputStyle = {
+  height: 38
+};
+var SearchBoxContainer = function SearchBoxContainer(_ref) {
+  var text = _ref.text,
+    initValue = _ref.initValue,
+    onClick = _ref.onClick,
+    onSearch = _ref.onSearch,
+    placeholder = _ref.placeholder;
+  return React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, React.createElement("div", null, React.createElement(AddButton, {
+    text: text,
+    onClick: onClick
+  })), React.createElement("div", {
+    className: "flex-grow-1 ml-2"
+  }, React.createElement(SearchBox$1, {
+    initValue: initValue,
+    onSearch: onSearch,
+    placeholder: placeholder,
+    style: searchInputStyle
+  })));
+};
+SearchBoxContainer.defaultProps = {
+  placeholder: "Type something to search"
+};
+
+var CustomTabs = function CustomTabs(props) {
+  var history = useHistory();
+  var location = useLocation();
+  var pathname = location.pathname;
+  var tabs = props.tabs,
+    title = props.title;
   var toggle = function toggle(path) {
     history.push(path);
   };
@@ -9066,7 +8813,7 @@ var get$8 = function get(filter) {
   });
 };
 
-var TITLE$a = "Gallery";
+var TITLE$9 = "Gallery";
 var defaultFilter = {
   searchString: ""
 };
@@ -9275,7 +9022,7 @@ var useGalleryList = function useGalleryList(isLibrary) {
     }
   }, [dispatch, filters]);
   useEffect(function () {
-    document.title = TITLE$a;
+    document.title = TITLE$9;
     dispatch(setTargetMedia({
       targetMedia: undefined
     }));
@@ -9455,7 +9202,7 @@ var MediaDetail = function MediaDetail(_ref) {
 };
 var MediaDetail$1 = React.memo(MediaDetail);
 
-var header$4 = "Gallery";
+var header$3 = "Gallery";
 var GalleryList = function GalleryList(_ref) {
   var isLibrary = _ref.isLibrary;
   var targetMedia = useSelector(function (state) {
@@ -9465,7 +9212,7 @@ var GalleryList = function GalleryList(_ref) {
     className: "fadeIn animated"
   }, !isLibrary && React.createElement("h5", {
     className: "mb-2"
-  }, header$4), React.createElement(Row, {
+  }, header$3), React.createElement(Row, {
     className: "mb-2"
   }, React.createElement(Col, {
     md: 8
@@ -9543,17 +9290,6 @@ var reduxLogger = createCommonjsModule(function (module, exports) {
 
 var logger = unwrapExports(reduxLogger);
 
-/**
- * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
- *
- * Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes
- * during build.
- * @param {number} code
- */
-function formatProdErrorMessage(code) {
-  return "Minified Redux error #" + code + "; visit https://redux.js.org/Errors?code=" + code + " for the full message or " + 'use the non-minified dev environment for full errors. ';
-}
-
 /**
  * These are private action types reserved by Redux.
  * For any unknown actions, you must return the current state.
@@ -9587,65 +9323,6 @@ function isPlainObject(obj) {
   return Object.getPrototypeOf(obj) === proto;
 }
 
-// Inlined / shortened version of `kindOf` from https://github.com/jonschlinkert/kind-of
-function miniKindOf(val) {
-  if (val === void 0) return 'undefined';
-  if (val === null) return 'null';
-  var type = typeof val;
-
-  switch (type) {
-    case 'boolean':
-    case 'string':
-    case 'number':
-    case 'symbol':
-    case 'function':
-      {
-        return type;
-      }
-  }
-
-  if (Array.isArray(val)) return 'array';
-  if (isDate(val)) return 'date';
-  if (isError(val)) return 'error';
-  var constructorName = ctorName(val);
-
-  switch (constructorName) {
-    case 'Symbol':
-    case 'Promise':
-    case 'WeakMap':
-    case 'WeakSet':
-    case 'Map':
-    case 'Set':
-      return constructorName;
-  } // other
-
-
-  return type.slice(8, -1).toLowerCase().replace(/\s/g, '');
-}
-
-function ctorName(val) {
-  return typeof val.constructor === 'function' ? val.constructor.name : null;
-}
-
-function isError(val) {
-  return val instanceof Error || typeof val.message === 'string' && val.constructor && typeof val.constructor.stackTraceLimit === 'number';
-}
-
-function isDate(val) {
-  if (val instanceof Date) return true;
-  return typeof val.toDateString === 'function' && typeof val.getDate === 'function' && typeof val.setDate === 'function';
-}
-
-function kindOf(val) {
-  var typeOfVal = typeof val;
-
-  if (process.env.NODE_ENV !== 'production') {
-    typeOfVal = miniKindOf(val);
-  }
-
-  return typeOfVal;
-}
-
 /**
  * Prints a warning in the console if it exists.
  *
@@ -9669,6 +9346,12 @@ function warning(message) {
 
 }
 
+function getUndefinedStateErrorMessage(key, action) {
+  var actionType = action && action.type;
+  var actionDescription = actionType && "action \"" + String(actionType) + "\"" || 'an action';
+  return "Given " + actionDescription + ", reducer \"" + key + "\" returned undefined. " + "To ignore an action, you must explicitly return the previous state. " + "If you want this reducer to hold no value, you can return null instead of undefined.";
+}
+
 function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
   var reducerKeys = Object.keys(reducers);
   var argumentName = action && action.type === ActionTypes.INIT ? 'preloadedState argument passed to createStore' : 'previous state received by the reducer';
@@ -9678,7 +9361,7 @@ function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, une
   }
 
   if (!isPlainObject(inputState)) {
-    return "The " + argumentName + " has unexpected type of \"" + kindOf(inputState) + "\". Expected argument to be an object with the following " + ("keys: \"" + reducerKeys.join('", "') + "\"");
+    return "The " + argumentName + " has unexpected type of \"" + {}.toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] + "\". Expected argument to be an object with the following " + ("keys: \"" + reducerKeys.join('", "') + "\"");
   }
 
   var unexpectedKeys = Object.keys(inputState).filter(function (key) {
@@ -9702,13 +9385,13 @@ function assertReducerShape(reducers) {
     });
 
     if (typeof initialState === 'undefined') {
-      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(12) : "The slice reducer for key \"" + key + "\" returned undefined during initialization. " + "If the state passed to the reducer is undefined, you must " + "explicitly return the initial state. The initial state may " + "not be undefined. If you don't want to set a value for this reducer, " + "you can use null instead of undefined.");
+      throw new Error("Reducer \"" + key + "\" returned undefined during initialization. " + "If the state passed to the reducer is undefined, you must " + "explicitly return the initial state. The initial state may " + "not be undefined. If you don't want to set a value for this reducer, " + "you can use null instead of undefined.");
     }
 
     if (typeof reducer(undefined, {
       type: ActionTypes.PROBE_UNKNOWN_ACTION()
     }) === 'undefined') {
-      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(13) : "The slice reducer for key \"" + key + "\" returned undefined when probed with a random type. " + ("Don't try to handle '" + ActionTypes.INIT + "' or other actions in \"redux/*\" ") + "namespace. They are considered private. Instead, you must return the " + "current state for any unknown actions, unless it is undefined, " + "in which case you must return the initial state, regardless of the " + "action type. The initial state may not be undefined, but can be null.");
+      throw new Error("Reducer \"" + key + "\" returned undefined when probed with a random type. " + ("Don't try to handle " + ActionTypes.INIT + " or other actions in \"redux/*\" ") + "namespace. They are considered private. Instead, you must return the " + "current state for any unknown actions, unless it is undefined, " + "in which case you must return the initial state, regardless of the " + "action type. The initial state may not be undefined, but can be null.");
     }
   });
 }
@@ -9792,8 +9475,8 @@ function combineReducers(reducers) {
       var nextStateForKey = reducer(previousStateForKey, action);
 
       if (typeof nextStateForKey === 'undefined') {
-        var actionType = action && action.type;
-        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(14) : "When called with an action of type " + (actionType ? "\"" + String(actionType) + "\"" : '(unknown type)') + ", the slice reducer for key \"" + _key + "\" returned undefined. " + "To ignore an action, you must explicitly return the previous state. " + "If you want this reducer to hold no value, you can return null instead of undefined.");
+        var errorMessage = getUndefinedStateErrorMessage(_key, action);
+        throw new Error(errorMessage);
       }
 
       nextState[_key] = nextStateForKey;
@@ -9805,6 +9488,17 @@ function combineReducers(reducers) {
   };
 }
 
+/*
+ * This is a dummy function to check if the function name has been altered by minification.
+ * If the function has been minified and NODE_ENV !== 'production', warn the user.
+ */
+
+function isCrushed() {}
+
+if (process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
+  warning('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
+}
+
 var _localStorage$getItem;
 var initialState = {
   sidebarShow: "responsive",
@@ -10103,6 +9797,9 @@ var commonReducer$8 = createReducer(initialState$e, function (builder) {
   });
 });
 
+var setUserList = createAction("users/setUserList");
+var setStudentList = createAction("users/setStudentList");
+
 var initialState$f = {
   userList: [],
   totalItems: 0,
@@ -10788,5 +10485,332 @@ var generateRandomString = (function () {
 
 var amplitudeClient = amplitude.getInstance();
 
-export { ACCESS_TOKEN, ANSWER_EDITOR_HEIGHT, AcademicClassSelector, AddButton, BASE_URL, CHAT_CHANNEL, CategorySelector, CommonAlert, CommonHeader, CommonModal$1 as CommonModal, CreatableSelector, CustomPagination, CustomSelector, CustomTabs as CustomTab, DATE_FORMAT, DATE_RESULT, DEFAULT_FILTER, Dashboard, DeleteButtonIcon, DetailActionButtons, EMOTIONS, EditButtonIcon, EmailTemplateDetail, EmailTemplateList, EmptyDataAlert, ErrorHandler, FULL_DATE_RESULT, FaqList, InputFile as FileInput, GOOGLE_RECAPTCHA_KEY, GalleryList, INIT_AMPLITUDE_KEY_PROD, INIT_AMPLITUDE_KEY_STAGE, Images, LICENSE_AGGRID, LinkEditButton, Loading, Login, MediaList, NOTIFICATION_ALERT_KEY, NOTIFICATION_CHANNEL, NotFound, NotificationList, NotificationLogoutModal, NotificationModal, QUESTION_TYPES, QUESTION_TYPES_OPTIONS, QuestionCategorySelector, QuestionTypeSelector, QuitPrompt, ReactNotification, RequiredLabel$1 as RequiredLabel, SchoolList, ScrollToTop, SearchBox$1 as SearchBox, SearchBoxContainer, SkillList, StarRatingSelector, SuggestionCategorySelector, TAB_COLORS, TINY_MCE_API_KEY, TheContent$1 as TheContent, TheLayout, ToggleButton, UploadFileButton, UserDetail, UserList, addTab, amplitudeClient, answerQuestion, answerQuestionDataPlayer, api, apiUpload, canAccess as canAccessRoute, changeNote, changeTags, clearTab, closeTab, debounce, editTab, editorConfig, firstCheckToken, generateRandomString, getFileUrl, getInfo, getTextFromHTML, i18n, initAmplitude, isInViewport, isLocalhost, reset, setAlert, setAssessmentList, setAssignmentList, setAssistantList, setBadgeList, setBandScoreList, setCertificateList, setClassList, setConferenceRubricList, setConversationOneToOne, setCurrentStudentId, setCurrentStudentName, setCurrentStudentUserId, setCustomAlertList, setDataPlayer, setEditItemQuesion, setEnableIEP, setEnableSurvey, setFeedbackList, setFilterWidget, setGoalExampleList, setImproveMyClass, setLanguage, setLearningSupportCategoryList, setLoading, setMailCategory, setModal, setMoveItemQuestion, setMyStudent, setQuestionByCategory, setQuestionCateList, setQuestionList, setReflectionList, setReflectionResultList, setResetQuestionList, setSchoolBlankDayList, setSelectQuestion, setSemesterList, setSessionPlayer, setSessionTemplateGeneralClassList, setSessionTemplateList, setStartTime, setStrategyList, setStudentIdSelectedByTeacher, setStudentList, setSubjectList, setSuggestionList, setTurnOffPassWhenChangeMode, setTutorialScreenList, setUser, setUserList, showFontSize, showMenuBar, store, systemCertificateUpload, systemStudentBadge, uploadFile, useFilters, useGalleryList, utcToLocalTime };
+var USER_URL$2 = "/admin/user";
+var CREATE_USER_URL = "/admin/create-user";
+var TITLE$a = "User list";
+var HOMEPAGE_TEACHER$1 = "/home";
+var HOMEPAGE_STUDENT$1 = "/home";
+var HOMEPAGE_ADMIN$1 = "/admin/dashboard";
+var HOMEPAGE_PARENT$1 = "/parent";
+var HOMEPAGE_DISTRICT$1 = "/admin/schools";
+var HOMEPAGE_EDU_TEACHER$1 = "/list-student";
+var useUserList = function useUserList() {
+  var history = useHistory();
+  var query = new URLSearchParams(location.search);
+  var queryName = query.get("query");
+  var userList = useSelector(function (state) {
+    return state.users.userList;
+  });
+  var totalItems = useSelector(function (state) {
+    return state.users.totalItems;
+  });
+  var _useFilters = useFilters(),
+    filters = _useFilters.filters,
+    changeFilters = _useFilters.changeFilters;
+  var _useState = useState(!!queryName ? queryName : ""),
+    fullName = _useState[0],
+    setFullName = _useState[1];
+  var isDistrict = window.location.host.includes("-district");
+  var dispatch = useDispatch();
+  var getData = useCallback(function (fullName) {
+    try {
+      var _temp2 = function _temp2() {
+        dispatch(setLoading(false));
+      };
+      dispatch(setLoading(true));
+      var _temp = _catch(function () {
+        return Promise.resolve(fullName ? get$5(_extends({}, filters, {
+          searchString: fullName
+        })) : get$5(filters)).then(function (res) {
+          var _res$data = res.data,
+            items = _res$data.items,
+            totalItems = _res$data.totalItems;
+          for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
+            var user = _step.value;
+            user.roles = user.roles.includes("EduTeacher") ? [ROLES.EDUTEACHER] : user.roles;
+          }
+          dispatch(setUserList({
+            userList: items,
+            totalItems: totalItems
+          }));
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [dispatch, filters]);
+  useEffect(function () {
+    document.title = TITLE$a;
+  }, []);
+  useEffect(function () {
+    if (!!fullName) {
+      getData(fullName);
+      setFullName(null);
+    } else {
+      getData();
+    }
+  }, [filters]);
+  var removeData = useCallback(function (id) {
+    dispatch(setLoading(true));
+    try {
+      dispatch(setModal({
+        isOpen: true,
+        type: "warning",
+        message: "Do you want to remove this user?",
+        onConfirm: function () {
+          try {
+            return Promise.resolve(remove$3(id)).then(function () {
+              dispatch(setAlert({
+                type: "success",
+                message: "Remove user successfully"
+              }));
+              changeFilters({
+                currentPage: 1
+              });
+            });
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        }
+      }));
+    } catch (err) {
+      var _err$response2, _err$response2$data;
+      dispatch(setAlert({
+        type: "danger",
+        message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
+      }));
+    }
+    dispatch(setLoading(false));
+  }, [filters]);
+  var redirectLoginUser = function redirectLoginUser(res) {
+    var _res$data2 = res.data,
+      token = _res$data2.token,
+      id = _res$data2.id,
+      firstName = _res$data2.firstName,
+      lastName = _res$data2.lastName,
+      roles = _res$data2.roles,
+      email = _res$data2.email,
+      profileImageFileName = _res$data2.profileImageFileName;
+    localStorage.setItem(ACCESS_TOKEN, token);
+    localStorage.removeItem(NOTIFICATION_ALERT_KEY);
+    dispatch(setUser({
+      id: id,
+      firstName: firstName,
+      lastName: lastName,
+      roles: roles,
+      email: email,
+      profileImageFileName: profileImageFileName
+    }));
+    if (isDistrict) {
+      history.push(HOMEPAGE_DISTRICT$1);
+    } else if (roles.includes("Admin")) {
+      history.push(HOMEPAGE_ADMIN$1);
+    } else if (roles.includes("Teacher") || roles.includes("Assistant")) {
+      history.push(HOMEPAGE_TEACHER$1);
+    } else if (roles.includes("Student")) {
+      history.push(HOMEPAGE_STUDENT$1);
+    } else if (roles.includes("Parent")) {
+      history.push(HOMEPAGE_PARENT$1);
+    } else if (roles.includes("EduTeacher")) {
+      history.push(HOMEPAGE_EDU_TEACHER$1);
+    } else if (roles.includes("Counselor") || roles.includes("SecondaryTeacher")) {
+      history.push(HOMEPAGE_TEACHER$1);
+    }
+  };
+  var swicthUser = useCallback(function (id) {
+    try {
+      var _temp3 = _catch(function () {
+        return Promise.resolve(switchAccountUser(id)).then(function (res) {
+          var data = res.data;
+          dispatch(setModal({
+            isOpen: true,
+            type: "warning",
+            message: "Do you want to impersonate this user?",
+            onConfirm: function () {
+              try {
+                var _temp5 = function _temp5() {
+                  dispatch(setLoading(false));
+                };
+                dispatch(setLoading(true));
+                var _temp4 = _catch(function () {
+                  var req = {
+                    email: data.email,
+                    password: "default",
+                    accessToken: data.token
+                  };
+                  return Promise.resolve(logIn(req)).then(function (res) {
+                    localStorage.clear();
+                    redirectLoginUser(res);
+                  });
+                }, function (err) {
+                  var _err$response3, _err$response3$data;
+                  setAlert({
+                    type: "danger",
+                    message: ((_err$response3 = err.response) === null || _err$response3 === void 0 ? void 0 : (_err$response3$data = _err$response3.data) === null || _err$response3$data === void 0 ? void 0 : _err$response3$data.title) || err.message
+                  });
+                });
+                return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
+              } catch (e) {
+                return Promise.reject(e);
+              }
+            }
+          }));
+        });
+      }, function (err) {
+        var _err$response4, _err$response4$data;
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response4 = err.response) === null || _err$response4 === void 0 ? void 0 : (_err$response4$data = _err$response4.data) === null || _err$response4$data === void 0 ? void 0 : _err$response4$data.title) || err.message
+        }));
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [filters]);
+  var reDirectDetailPage = function reDirectDetailPage(id) {
+    var url = !!id ? USER_URL$2 + "/" + id : CREATE_USER_URL;
+    history.push(url);
+  };
+  return {
+    userList: userList,
+    totalItems: totalItems,
+    filters: filters,
+    queryName: queryName,
+    getData: getData,
+    removeData: removeData,
+    changeFilters: changeFilters,
+    reDirectDetailPage: reDirectDetailPage,
+    swicthUser: swicthUser
+  };
+};
+
+var header$4 = "User";
+var UserList = function UserList() {
+  var _useUserList = useUserList(),
+    queryName = _useUserList.queryName,
+    userList = _useUserList.userList,
+    totalItems = _useUserList.totalItems,
+    filters = _useUserList.filters,
+    removeData = _useUserList.removeData,
+    changeFilters = _useUserList.changeFilters,
+    reDirectDetailPage = _useUserList.reDirectDetailPage,
+    swicthUser = _useUserList.swicthUser;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return React.createElement("div", {
+    className: "fadeIn animated"
+  }, React.createElement("h5", {
+    className: "mb-2"
+  }, t("" + header$4)), React.createElement(Row, {
+    className: "my-2"
+  }, React.createElement(Col, {
+    md: 8
+  }, React.createElement(SearchBoxContainer, {
+    text: t("create_user"),
+    onClick: function onClick() {
+      return reDirectDetailPage();
+    },
+    initValue: !!queryName ? queryName : "",
+    onSearch: function onSearch(searchString) {
+      return changeFilters({
+        searchString: searchString
+      });
+    },
+    placeholder: t("type_something_to_search_by_user_name")
+  })), React.createElement(Col, {
+    md: 4,
+    className: "d-flex justify-content-end align-items-center"
+  }, t("total_of_users"), " : ", totalItems)), React.createElement(Row, {
+    className: "mb-2"
+  }, React.createElement(Col, {
+    md: 12
+  }, userList && userList.length > 0 ? React.createElement("div", null, React.createElement(Table, {
+    bordered: true,
+    hover: true,
+    striped: true,
+    responsive: true,
+    size: "sm"
+  }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+    className: "align-top"
+  }, t("name")), React.createElement("th", {
+    className: "align-top"
+  }, t("email")), React.createElement("th", {
+    className: "align-top"
+  }, t("age")), React.createElement("th", {
+    className: "align-top"
+  }, t("role")), React.createElement("th", {
+    className: "align-top"
+  }, t("active_status")), React.createElement("th", {
+    className: "align-top"
+  }, t("created_time")), React.createElement("th", {
+    className: "text-center"
+  }, t("action")))), React.createElement("tbody", null, userList.map(function (record) {
+    return React.createElement("tr", {
+      key: record.id
+    }, React.createElement("td", {
+      className: "align-middle"
+    }, React.createElement(LinkEditButton, {
+      label: "" + record.fullName,
+      onClick: function onClick() {
+        return reDirectDetailPage(record.id);
+      }
+    })), React.createElement("td", {
+      className: "align-middle"
+    }, record.email), React.createElement("td", {
+      className: "align-middle"
+    }, differenceInCalendarYears(new Date(), new Date(record.dateOfBirth))), React.createElement("td", {
+      className: "align-middle"
+    }, !!record.roles && record.roles.map(function (role) {
+      return role === "SecondaryTeacher" ? "SupportTeacher" : role;
+    }).join(", ")), React.createElement("td", {
+      className: "align-middle"
+    }, record.isActive ? t("active") : t("inactive")), React.createElement("td", {
+      className: "align-middle"
+    }, utcToLocalTime(record === null || record === void 0 ? void 0 : record.createTime, "yyyy-MM-DD HH:mm")), React.createElement("td", {
+      className: "text-center align-middle"
+    }, React.createElement(FaUsersCog, {
+      style: {
+        fontSize: "18px",
+        marginRight: "10px",
+        cursor: "pointer"
+      },
+      onClick: function onClick() {
+        return swicthUser(record.id);
+      }
+    }), React.createElement(DeleteButtonIcon, {
+      onClick: function onClick() {
+        return removeData(record.id);
+      }
+    })));
+  })))) : React.createElement(EmptyDataAlert, {
+    label: t("user")
+  })), React.createElement(Col, {
+    md: 12
+  }, React.createElement(CustomPagination, {
+    filters: filters,
+    totalRecordCount: totalItems,
+    changePageSize: function changePageSize(pageSize) {
+      return changeFilters({
+        pageSize: pageSize
+      });
+    },
+    changePage: function changePage(currentPage) {
+      return changeFilters({
+        currentPage: currentPage
+      });
+    }
+  }))));
+};
+
+var amplitudeClient$1 = amplitude.getInstance();
+
+export { ACCESS_TOKEN, ANSWER_EDITOR_HEIGHT, AcademicClassSelector, AddButton, BASE_URL, CHAT_CHANNEL, CategorySelector, CommonAlert, CommonHeader, CommonModal$1 as CommonModal, CreatableSelector, CustomPagination, CustomSelector, CustomTabs as CustomTab, DATE_FORMAT, DATE_RESULT, DEFAULT_FILTER, Dashboard, DeleteButtonIcon, DetailActionButtons, EMOTIONS, EditButtonIcon, EmailTemplateDetail, EmailTemplateList, EmptyDataAlert, ErrorHandler, FULL_DATE_RESULT, FaqList, InputFile as FileInput, GOOGLE_RECAPTCHA_KEY, GalleryList, INIT_AMPLITUDE_KEY_PROD, INIT_AMPLITUDE_KEY_STAGE, Images, LICENSE_AGGRID, LinkEditButton, Loading, Login, MediaList, NOTIFICATION_ALERT_KEY, NOTIFICATION_CHANNEL, NotFound, NotificationList, NotificationLogoutModal, NotificationModal, QUESTION_TYPES, QUESTION_TYPES_OPTIONS, QuestionCategorySelector, QuestionTypeSelector, QuitPrompt, ReactNotification, RequiredLabel$1 as RequiredLabel, SchoolList, ScrollToTop, SearchBox$1 as SearchBox, SearchBoxContainer, SkillList, StarRatingSelector, SuggestionCategorySelector, TAB_COLORS, TINY_MCE_API_KEY, TheContent$1 as TheContent, TheLayout, ToggleButton, UploadFileButton, UserDetail, UserList, addTab, amplitudeClient$1 as amplitudeClient, answerQuestion, answerQuestionDataPlayer, api, apiUpload, canAccess as canAccessRoute, changeNote, changeTags, clearTab, closeTab, debounce, editTab, editorConfig, firstCheckToken, generateRandomString, getFileUrl, getInfo, getTextFromHTML, i18n, initAmplitude, isInViewport, isLocalhost, reset, setAlert, setAssessmentList, setAssignmentList, setAssistantList, setBadgeList, setBandScoreList, setCertificateList, setClassList, setConferenceRubricList, setConversationOneToOne, setCurrentStudentId, setCurrentStudentName, setCurrentStudentUserId, setCustomAlertList, setDataPlayer, setEditItemQuesion, setEnableIEP, setEnableSurvey, setFeedbackList, setFilterWidget, setGoalExampleList, setImproveMyClass, setLanguage, setLearningSupportCategoryList, setLoading, setMailCategory, setModal, setMoveItemQuestion, setMyStudent, setQuestionByCategory, setQuestionCateList, setQuestionList, setReflectionList, setReflectionResultList, setResetQuestionList, setSchoolBlankDayList, setSelectQuestion, setSemesterList, setSessionPlayer, setSessionTemplateGeneralClassList, setSessionTemplateList, setStartTime, setStrategyList, setStudentIdSelectedByTeacher, setStudentList, setSubjectList, setSuggestionList, setTurnOffPassWhenChangeMode, setTutorialScreenList, setUser, setUserList, showFontSize, showMenuBar, store, systemCertificateUpload, systemStudentBadge, uploadFile, useFilters, useGalleryList, utcToLocalTime };
 //# sourceMappingURL=index.modern.js.map