mario-core 2.9.145-up → 2.9.147-level

package/dist/index.js

@@ -34,6 +34,7 @@ var Creatable = _interopDefault(require('react-select/creatable'));
 var ReactNotification$1 = _interopDefault(require('react-notifications-component'));
 require('react-notifications-component/dist/theme.css');
 var ai = require('react-icons/ai');
+require('symbol-observable');
 
 var dashboard = "Dashboard";
 var user = "User";
@@ -2763,7 +2764,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"
@@ -2999,6 +3000,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 {
@@ -3619,7 +3630,7 @@ var BlockLogin = function BlockLogin(_ref) {
     }, React__default.createElement("div", {
       className: "" + styles["block-form"]
     }, React__default.createElement("img", {
-      src: "/images/main-blue-logo.svg",
+      src: "/images/horizontal-logo-blue.svg",
       className: "" + styles["img-login-rectangle"]
     }), React__default.createElement("p", {
       className: "" + styles["title-login"]
@@ -4139,7 +4150,7 @@ var Dashboard = function Dashboard() {
     href: "/",
     className: "" + styles["logo-home"]
   }, React__default.createElement("img", {
-    src: "/images/logo-v2.svg",
+    src: "/images/horizontal-logo-white.svg",
     alt: "mario"
   })), React__default.createElement(gi.GiHamburgerMenu, {
     onClick: toggle,
@@ -4372,21 +4383,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 = reactRedux.useSelector(function (state) {
     return state.common.user;
   });
   var dispatch = reactRedux.useDispatch();
+  var location = reactRouterDom.useLocation();
   var history = reactRouterDom.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 = React.useCallback(function () {
-    isTeacher && history.push("/home");
-  }, [isTeacher, history]);
   var signOut = React.useCallback(function () {
     localStorage.removeItem(ACCESS_TOKEN);
     dispatch(reset());
@@ -4424,20 +4437,20 @@ var TheHeaderDropdown = function TheHeaderDropdown() {
     className: styles["content-text"]
   }, React__default.createElement("h5", null, user.firstName + " " + user.lastName), React__default.createElement("span", {
     className: "block"
-  }, email), !isDistrict && React__default.createElement(reactstrap.NavLink, null, isTeacher && React__default.createElement(reactRouterDom.Link, {
-    to: "/my-profile"
-  }, "Edit profile"), isAdmin && React__default.createElement(reactRouterDom.Link, {
-    to: USER_DETAIL_URL + "/" + id
-  }, "Edit profile")))), isTeacher && React__default.createElement(reactstrap.DropdownItem, {
-    onClick: goToTeacherPanel,
+  }, email), !isDistrict && React__default.createElement(reactstrap.NavLink, null, (isAdmin || isTeacher) && React__default.createElement(reactRouterDom.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__default.createElement(reactstrap.DropdownItem, {
+    onClick: function onClick() {
+      onToggleModel === null || onToggleModel === void 0 ? void 0 : onToggleModel();
+    },
     className: styles["dropdown-change"] + " px-0"
   }, React__default.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__default.createElement("span", {
     className: "mr-2"
   }, React__default.createElement("i", {
     className: "fas fa-cogs h6 mb-0"
-  })), "GO TO TEACHER PANEL")), React__default.createElement(reactstrap.DropdownItem, {
+  })), "Role change")), React__default.createElement(reactstrap.DropdownItem, {
     onClick: signOut,
     className: styles["dropdown-change"] + " px-0"
   }, React__default.createElement("div", {
@@ -4518,7 +4531,8 @@ var TheLanguageDropdown = function TheLanguageDropdown() {
   })), "United States"))));
 };
 
-var TheHeader = function TheHeader() {
+var TheHeader = function TheHeader(_ref) {
+  var onToggleModel = _ref.onToggleModel;
   var dispatch = reactRedux.useDispatch();
   var sidebarShow = reactRedux.useSelector(function (state) {
     return state.common.sidebarShow;
@@ -4550,7 +4564,9 @@ var TheHeader = function TheHeader() {
     },
     href: '/privacy-policy',
     target: "blank"
-  }, "Privacy Policy"), !isDistrict && React__default.createElement(NotificationButton, null), React__default.createElement(TheHeaderDropdown, null)));
+  }, "Privacy Policy"), !isDistrict && React__default.createElement(NotificationButton, null), React__default.createElement(TheHeaderDropdown, {
+    onToggleModel: onToggleModel
+  })));
 };
 
 var TITLE$2 = "Not found";
@@ -4657,6 +4673,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 = reactRedux.useDispatch();
+  var history = reactRouterDom.useHistory();
+  var pathname = window.location.pathname;
+  var user = reactRedux.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__default.createElement(reactstrap.Modal, {
+    isOpen: open,
+    toggle: function toggle() {
+      return onToggleModel();
+    },
+    className: "" + styles["model-switch-roles"],
+    centered: true
+  }, React__default.createElement("p", {
+    className: "" + styles["title"]
+  }, "Continue as:"), React__default.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__default.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;
@@ -4668,11 +4732,17 @@ var TheLayout = function TheLayout(_ref) {
   var language = reactRedux.useSelector(function (state) {
     return state.common.language;
   });
+  var _useState = React.useState(false),
+    openModelSelectRole = _useState[0],
+    setOpenModelSelectRole = _useState[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var location = reactRouterDom.useLocation();
   var isNotification = location.pathname.includes("notifications");
   var isDistrict = window.location.host.includes("-district");
+  var handleToggleModel = function handleToggleModel() {
+    setOpenModelSelectRole(!openModelSelectRole);
+  };
   var authRoutes = React.useMemo(function () {
     return routes.filter(function (route) {
       return canAccess(user === null || user === void 0 ? void 0 : user.roles, route.roles);
@@ -4738,11 +4808,16 @@ var TheLayout = function TheLayout(_ref) {
     navigation: authNavigations
   }), React__default.createElement("div", {
     className: "c-wrapper"
-  }, !isNotification && React__default.createElement(TheHeader, null), React__default.createElement("div", {
+  }, !isNotification && React__default.createElement(TheHeader, {
+    onToggleModel: handleToggleModel
+  }), React__default.createElement("div", {
     className: "c-body bg-white"
   }, React__default.createElement(TheContent$1, {
     routes: authRoutes
-  }))));
+  }))), React__default.createElement(ModelSelectRole, {
+    open: openModelSelectRole,
+    onToggleModel: handleToggleModel
+  }));
 };
 
 var buttonTextStyle = {
@@ -6826,8 +6901,80 @@ var SkillList = function SkillList() {
   }))));
 };
 
-var setUserList = toolkit.createAction("users/setUserList");
-var setStudentList = toolkit.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 = reactRedux.useDispatch();
+  var _useState = React.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__default.createElement("img", {
+    style: imageStyle,
+    src: imageSrc,
+    alt: "image"
+  }) : null;
+  return React__default.createElement("div", {
+    className: "mb-2"
+  }, React__default.createElement(reactstrap.Form, {
+    className: "mb-2"
+  }, React__default.createElement(reactstrap.Input, {
+    className: "d-none",
+    type: "file",
+    id: "uploadFile",
+    onChange: handleImageChange,
+    accept: "image/*"
+  }), React__default.createElement("div", {
+    className: "d-flex align-items-center"
+  }, React__default.createElement(reactstrap.Label, {
+    htmlFor: "uploadFile",
+    role: "button",
+    tabIndex: 0,
+    className: styles["input-file-label"]
+  }, isCheckFeedBack == true ? React__default.createElement(md.MdAttachFile, null) : React__default.createElement(React__default.Fragment, null, React__default.createElement("i", {
+    className: "fa fa-paperclip mr-1",
+    "aria-hidden": "true"
+  }), imagePreviewUrl || fileName ? "Change file" : "Choose file")), canDelete && imagePreviewContainer && React__default.createElement(reactstrap.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__default.createElement(fa.FaTrashAlt, null)))), imagePreviewContainer);
+};
 
 var USER_URL$1 = BASE_URL + "/api/user";
 var CHANGE_PASSWORD = BASE_URL + "/api/Account/changePassword";
@@ -6860,54 +7007,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 = reactRouterDom.useHistory();
-  var query = new URLSearchParams(location.search);
-  var queryName = query.get("query");
-  var userList = reactRedux.useSelector(function (state) {
-    return state.users.userList;
-  });
-  var totalItems = reactRedux.useSelector(function (state) {
-    return state.users.totalItems;
-  });
-  var _useFilters = useFilters(),
-    filters = _useFilters.filters,
-    changeFilters = _useFilters.changeFilters;
-  var _useState = React.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 = reactRedux.useDispatch();
-  var getData = React.useCallback(function (fullName) {
+  var history = reactRouterDom.useHistory();
+  var _useState = React.useState(initValue$3),
+    userDetail = _useState[0],
+    setUserDetail = _useState[1];
+  var _useState2 = React.useState(null),
+    file = _useState2[0],
+    setFile = _useState2[1];
+  var _useState3 = React.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 = React.useState([]),
+    currentRoles = _useState4[0],
+    setCurrentRoles = _useState4[1];
+  React.useEffect(function () {
+    document.title = TITLE$7;
+    setEdited(false);
+    if (!!localStorage.getItem(window.location.href)) localStorage.removeItem(window.location.href);
+  }, []);
+  React.useEffect(function () {
+    !!id && getData();
+  }, [id]);
+  var getData = React.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: dateFns.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;
@@ -6920,664 +7078,184 @@ var useUserList = function useUserList() {
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [dispatch, filters]);
-  React.useEffect(function () {
-    document.title = TITLE$7;
+  }, [id]);
+  var backToList = React.useCallback(function (user) {
+    !!user && typeof user === "string" ? history.push(USER_LIST_URL + ("?query=" + user)) : history.push(USER_LIST_URL);
   }, []);
-  React.useEffect(function () {
-    if (!!fullName) {
-      getData(fullName);
-      setFullName(null);
-    } else {
-      getData();
-    }
-  }, [filters]);
-  var removeData = React.useCallback(function (id) {
-    dispatch(setLoading(true));
+  var confirmData = React.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 = React.useCallback(function (id) {
+  var forgotPasswordRequest = React.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 = React.useState(initValue),
-    searchString = _useState[0],
-    setSearchString = _useState[1];
-  React.useEffect(function () {
-    setSearchString(initValue);
-  }, [initValue]);
-  var onKeyUp = React.useCallback(function (e) {
-    e.key === "Enter" && onSearch(searchString);
-  }, [searchString, onSearch]);
-  return React__default.createElement(reactstrap.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 = React.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__default.createElement("div", {
-    className: "d-flex align-items-center"
-  }, React__default.createElement("div", null, React__default.createElement(AddButton, {
-    text: text,
-    onClick: onClick
-  })), React__default.createElement("div", {
-    className: "flex-grow-1 ml-2"
-  }, React__default.createElement(SearchBox$1, {
-    initValue: initValue,
-    onSearch: onSearch,
-    placeholder: placeholder,
-    style: searchInputStyle
-  })));
-};
-SearchBoxContainer.defaultProps = {
-  placeholder: "Type something to search"
-};
+var userSchema = yup.object({
+  firstName: yup.string().required("First name is required"),
+  lastName: yup.string().required("Last name is required"),
+  dateOfBirth: yup.string().required("Date of birth is required"),
+  email: yup.string().email("Email is invalid").required("Email is required"),
+  roles: yup.array().of(yup.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 = yup.object({
+  oldPassword: yup.string().required("Current password is required"),
+  newPassword: yup.string().required("New password is required"),
+  confirmedNewPassword: yup.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 = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return React__default.createElement("div", {
-    className: "fadeIn animated"
-  }, React__default.createElement("h5", {
-    className: "mb-2"
-  }, t("" + header$2)), React__default.createElement(reactstrap.Row, {
-    className: "my-2"
-  }, React__default.createElement(reactstrap.Col, {
-    md: 8
-  }, React__default.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__default.createElement(reactstrap.Col, {
-    md: 4,
-    className: "d-flex justify-content-end align-items-center"
-  }, t("total_of_users"), " : ", totalItems)), React__default.createElement(reactstrap.Row, {
-    className: "mb-2"
-  }, React__default.createElement(reactstrap.Col, {
-    md: 12
-  }, userList && userList.length > 0 ? React__default.createElement("div", null, React__default.createElement(reactstrap.Table, {
-    bordered: true,
-    hover: true,
-    striped: true,
-    responsive: true,
-    size: "sm"
-  }, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: "align-top"
-  }, t("name")), React__default.createElement("th", {
-    className: "align-top"
-  }, t("email")), React__default.createElement("th", {
-    className: "align-top"
-  }, t("age")), React__default.createElement("th", {
-    className: "align-top"
-  }, t("role")), React__default.createElement("th", {
-    className: "align-top"
-  }, t("active_status")), React__default.createElement("th", {
-    className: "align-top"
-  }, t("created_time")), React__default.createElement("th", {
-    className: "text-center"
-  }, t("action")))), React__default.createElement("tbody", null, userList.map(function (record) {
-    return React__default.createElement("tr", {
-      key: record.id
-    }, React__default.createElement("td", {
-      className: "align-middle"
-    }, React__default.createElement(LinkEditButton, {
-      label: "" + record.fullName,
-      onClick: function onClick() {
-        return reDirectDetailPage(record.id);
-      }
-    })), React__default.createElement("td", {
-      className: "align-middle"
-    }, record.email), React__default.createElement("td", {
-      className: "align-middle"
-    }, differenceInCalendarYears(new Date(), new Date(record.dateOfBirth))), React__default.createElement("td", {
-      className: "align-middle"
-    }, !!record.roles && record.roles.map(function (role) {
-      return role === "SecondaryTeacher" ? "SupportTeacher" : role;
-    }).join(", ")), React__default.createElement("td", {
-      className: "align-middle"
-    }, record.isActive ? t("active") : t("inactive")), React__default.createElement("td", {
-      className: "align-middle"
-    }, utcToLocalTime(record === null || record === void 0 ? void 0 : record.createTime, "yyyy-MM-DD HH:mm")), React__default.createElement("td", {
-      className: "text-center align-middle"
-    }, React__default.createElement(fa.FaUsersCog, {
-      style: {
-        fontSize: "18px",
-        marginRight: "10px",
-        cursor: "pointer"
-      },
-      onClick: function onClick() {
-        return swicthUser(record.id);
-      }
-    }), React__default.createElement(DeleteButtonIcon, {
-      onClick: function onClick() {
-        return removeData(record.id);
-      }
-    })));
-  })))) : React__default.createElement(EmptyDataAlert, {
-    label: t("user")
-  })), React__default.createElement(reactstrap.Col, {
-    md: 12
-  }, React__default.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 = reactRedux.useDispatch();
-  var _useState = React.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 = reactRouterDom.useParams(),
+    id = _useParams.id;
+  var user = reactRedux.useSelector(function (state) {
+    return state.common.user;
+  });
+  var _useTranslation = reactI18next.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__default.createElement("img", {
-    style: imageStyle,
-    src: imageSrc,
-    alt: "image"
-  }) : null;
-  return React__default.createElement("div", {
-    className: "mb-2"
-  }, React__default.createElement(reactstrap.Form, {
-    className: "mb-2"
-  }, React__default.createElement(reactstrap.Input, {
-    className: "d-none",
-    type: "file",
-    id: "uploadFile",
-    onChange: handleImageChange,
-    accept: "image/*"
-  }), React__default.createElement("div", {
-    className: "d-flex align-items-center"
-  }, React__default.createElement(reactstrap.Label, {
-    htmlFor: "uploadFile",
-    role: "button",
-    tabIndex: 0,
-    className: styles["input-file-label"]
-  }, isCheckFeedBack == true ? React__default.createElement(md.MdAttachFile, null) : React__default.createElement(React__default.Fragment, null, React__default.createElement("i", {
-    className: "fa fa-paperclip mr-1",
-    "aria-hidden": "true"
-  }), imagePreviewUrl || fileName ? "Change file" : "Choose file")), canDelete && imagePreviewContainer && React__default.createElement(reactstrap.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__default.createElement(fa.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 = reactRedux.useDispatch();
-  var history = reactRouterDom.useHistory();
-  var _useState = React.useState(initValue$3),
-    userDetail = _useState[0],
-    setUserDetail = _useState[1];
-  var _useState2 = React.useState(null),
-    file = _useState2[0],
-    setFile = _useState2[1];
-  var _useState3 = React.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 = React.useState([]),
-    currentRoles = _useState4[0],
-    setCurrentRoles = _useState4[1];
-  React.useEffect(function () {
-    document.title = TITLE$8;
-    setEdited(false);
-    if (!!localStorage.getItem(window.location.href)) localStorage.removeItem(window.location.href);
-  }, []);
-  React.useEffect(function () {
-    !!id && getData();
-  }, [id]);
-  var getData = React.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: dateFns.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 = React.useCallback(function (user) {
-    !!user && typeof user === "string" ? history.push(USER_LIST_URL + ("?query=" + user)) : history.push(USER_LIST_URL);
-  }, []);
-  var confirmData = React.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 = React.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 = yup.object({
-  firstName: yup.string().required("First name is required"),
-  lastName: yup.string().required("Last name is required"),
-  dateOfBirth: yup.string().required("Date of birth is required"),
-  email: yup.string().email("Email is invalid").required("Email is required"),
-  roles: yup.array().of(yup.string()).min(1, "Role is required")
-});
-
-var changePasswordSchema = yup.object({
-  oldPassword: yup.string().required("Current password is required"),
-  newPassword: yup.string().required("New password is required"),
-  confirmedNewPassword: yup.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 = reactRouterDom.useParams(),
-    id = _useParams.id;
-  var user = reactRedux.useSelector(function (state) {
-    return state.common.user;
-  });
-  var _useTranslation = reactI18next.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);
@@ -7963,6 +7641,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 = React.useState(false),
     isOpen = _useState[0],
@@ -8050,6 +7737,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 = React.useState(initValue),
+    searchString = _useState[0],
+    setSearchString = _useState[1];
+  React.useEffect(function () {
+    setSearchString(initValue);
+  }, [initValue]);
+  var onKeyUp = React.useCallback(function (e) {
+    e.key === "Enter" && onSearch(searchString);
+  }, [searchString, onSearch]);
+  return React__default.createElement(reactstrap.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 = React.memo(SearchBox);
+
 var QuestionTypeSelector = function QuestionTypeSelector(props) {
   var id = props.id;
   var initValue = !!id ? QUESTION_TYPES_OPTIONS.find(function (option) {
@@ -8381,7 +8101,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() {
@@ -8496,7 +8216,7 @@ var useNotificationList = function useNotificationList() {
     }
   }, [filters]);
   React.useEffect(function () {
-    document.title = TITLE$9;
+    document.title = TITLE$8;
   }, []);
   React.useEffect(function () {
     getData();
@@ -8578,7 +8298,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(),
@@ -8597,7 +8317,7 @@ var NotificationList = function NotificationList() {
     }
   }, React__default.createElement("h5", {
     className: "mb-2"
-  }, header$3), React__default.createElement(reactstrap.Row, {
+  }, header$2), React__default.createElement(reactstrap.Row, {
     className: "my-2"
   }, React__default.createElement(reactstrap.Col, {
     md: 8
@@ -8697,12 +8417,39 @@ var NotificationList = function NotificationList() {
   }))));
 };
 
-var CustomTabs = function CustomTabs(props) {
-  var history = reactRouterDom.useHistory();
-  var location = reactRouterDom.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__default.createElement("div", {
+    className: "d-flex align-items-center"
+  }, React__default.createElement("div", null, React__default.createElement(AddButton, {
+    text: text,
+    onClick: onClick
+  })), React__default.createElement("div", {
+    className: "flex-grow-1 ml-2"
+  }, React__default.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 = reactRouterDom.useHistory();
+  var location = reactRouterDom.useLocation();
+  var pathname = location.pathname;
+  var tabs = props.tabs,
+    title = props.title;
   var toggle = function toggle(path) {
     history.push(path);
   };
@@ -9068,7 +8815,7 @@ var get$8 = function get(filter) {
   });
 };
 
-var TITLE$a = "Gallery";
+var TITLE$9 = "Gallery";
 var defaultFilter = {
   searchString: ""
 };
@@ -9277,7 +9024,7 @@ var useGalleryList = function useGalleryList(isLibrary) {
     }
   }, [dispatch, filters]);
   React.useEffect(function () {
-    document.title = TITLE$a;
+    document.title = TITLE$9;
     dispatch(setTargetMedia({
       targetMedia: undefined
     }));
@@ -9457,7 +9204,7 @@ var MediaDetail = function MediaDetail(_ref) {
 };
 var MediaDetail$1 = React__default.memo(MediaDetail);
 
-var header$4 = "Gallery";
+var header$3 = "Gallery";
 var GalleryList = function GalleryList(_ref) {
   var isLibrary = _ref.isLibrary;
   var targetMedia = reactRedux.useSelector(function (state) {
@@ -9467,7 +9214,7 @@ var GalleryList = function GalleryList(_ref) {
     className: "fadeIn animated"
   }, !isLibrary && React__default.createElement("h5", {
     className: "mb-2"
-  }, header$4), React__default.createElement(reactstrap.Row, {
+  }, header$3), React__default.createElement(reactstrap.Row, {
     className: "mb-2"
   }, React__default.createElement(reactstrap.Col, {
     md: 8
@@ -9545,17 +9292,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.
@@ -9589,65 +9325,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.
  *
@@ -9671,6 +9348,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';
@@ -9680,7 +9363,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) {
@@ -9704,13 +9387,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.");
     }
   });
 }
@@ -9794,8 +9477,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;
@@ -9807,6 +9490,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",
@@ -10105,6 +9799,9 @@ var commonReducer$8 = toolkit.createReducer(initialState$e, function (builder) {
   });
 });
 
+var setUserList = toolkit.createAction("users/setUserList");
+var setStudentList = toolkit.createAction("users/setStudentList");
+
 var initialState$f = {
   userList: [],
   totalItems: 0,
@@ -10790,6 +10487,333 @@ var generateRandomString = (function () {
 
 var amplitudeClient = amplitude.getInstance();
 
+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 = reactRouterDom.useHistory();
+  var query = new URLSearchParams(location.search);
+  var queryName = query.get("query");
+  var userList = reactRedux.useSelector(function (state) {
+    return state.users.userList;
+  });
+  var totalItems = reactRedux.useSelector(function (state) {
+    return state.users.totalItems;
+  });
+  var _useFilters = useFilters(),
+    filters = _useFilters.filters,
+    changeFilters = _useFilters.changeFilters;
+  var _useState = React.useState(!!queryName ? queryName : ""),
+    fullName = _useState[0],
+    setFullName = _useState[1];
+  var isDistrict = window.location.host.includes("-district");
+  var dispatch = reactRedux.useDispatch();
+  var getData = React.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]);
+  React.useEffect(function () {
+    document.title = TITLE$a;
+  }, []);
+  React.useEffect(function () {
+    if (!!fullName) {
+      getData(fullName);
+      setFullName(null);
+    } else {
+      getData();
+    }
+  }, [filters]);
+  var removeData = React.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 = React.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return React__default.createElement("div", {
+    className: "fadeIn animated"
+  }, React__default.createElement("h5", {
+    className: "mb-2"
+  }, t("" + header$4)), React__default.createElement(reactstrap.Row, {
+    className: "my-2"
+  }, React__default.createElement(reactstrap.Col, {
+    md: 8
+  }, React__default.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__default.createElement(reactstrap.Col, {
+    md: 4,
+    className: "d-flex justify-content-end align-items-center"
+  }, t("total_of_users"), " : ", totalItems)), React__default.createElement(reactstrap.Row, {
+    className: "mb-2"
+  }, React__default.createElement(reactstrap.Col, {
+    md: 12
+  }, userList && userList.length > 0 ? React__default.createElement("div", null, React__default.createElement(reactstrap.Table, {
+    bordered: true,
+    hover: true,
+    striped: true,
+    responsive: true,
+    size: "sm"
+  }, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
+    className: "align-top"
+  }, t("name")), React__default.createElement("th", {
+    className: "align-top"
+  }, t("email")), React__default.createElement("th", {
+    className: "align-top"
+  }, t("age")), React__default.createElement("th", {
+    className: "align-top"
+  }, t("role")), React__default.createElement("th", {
+    className: "align-top"
+  }, t("active_status")), React__default.createElement("th", {
+    className: "align-top"
+  }, t("created_time")), React__default.createElement("th", {
+    className: "text-center"
+  }, t("action")))), React__default.createElement("tbody", null, userList.map(function (record) {
+    return React__default.createElement("tr", {
+      key: record.id
+    }, React__default.createElement("td", {
+      className: "align-middle"
+    }, React__default.createElement(LinkEditButton, {
+      label: "" + record.fullName,
+      onClick: function onClick() {
+        return reDirectDetailPage(record.id);
+      }
+    })), React__default.createElement("td", {
+      className: "align-middle"
+    }, record.email), React__default.createElement("td", {
+      className: "align-middle"
+    }, differenceInCalendarYears(new Date(), new Date(record.dateOfBirth))), React__default.createElement("td", {
+      className: "align-middle"
+    }, !!record.roles && record.roles.map(function (role) {
+      return role === "SecondaryTeacher" ? "SupportTeacher" : role;
+    }).join(", ")), React__default.createElement("td", {
+      className: "align-middle"
+    }, record.isActive ? t("active") : t("inactive")), React__default.createElement("td", {
+      className: "align-middle"
+    }, utcToLocalTime(record === null || record === void 0 ? void 0 : record.createTime, "yyyy-MM-DD HH:mm")), React__default.createElement("td", {
+      className: "text-center align-middle"
+    }, React__default.createElement(fa.FaUsersCog, {
+      style: {
+        fontSize: "18px",
+        marginRight: "10px",
+        cursor: "pointer"
+      },
+      onClick: function onClick() {
+        return swicthUser(record.id);
+      }
+    }), React__default.createElement(DeleteButtonIcon, {
+      onClick: function onClick() {
+        return removeData(record.id);
+      }
+    })));
+  })))) : React__default.createElement(EmptyDataAlert, {
+    label: t("user")
+  })), React__default.createElement(reactstrap.Col, {
+    md: 12
+  }, React__default.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();
+
 Object.defineProperty(exports, 'I18nextProvider', {
     enumerable: true,
     get: function () {
@@ -10870,7 +10894,7 @@ exports.UploadFileButton = UploadFileButton;
 exports.UserDetail = UserDetail;
 exports.UserList = UserList;
 exports.addTab = addTab;
-exports.amplitudeClient = amplitudeClient;
+exports.amplitudeClient = amplitudeClient$1;
 exports.answerQuestion = answerQuestion;
 exports.answerQuestionDataPlayer = answerQuestionDataPlayer;
 exports.api = api;