mario-core 2.9.107-beta → 2.9.110-beta

package/dist/index.modern.js

@@ -11,6 +11,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { createAction, createReducer, configureStore } from '@reduxjs/toolkit';
 import axios from 'axios';
 import amplitude from 'amplitude-js';
+import moment from 'moment';
 import { useGoogleReCaptcha, GoogleReCaptcha, GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
 import GoogleLogin from 'react-google-login';
 import Select from 'react-select';
@@ -20,11 +21,10 @@ 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';
-import moment from 'moment';
 import DatePicker from 'react-datepicker';
 import toDate from 'date-fns/toDate';
 import { MdAttachFile } from 'react-icons/md';
@@ -213,10 +213,10 @@ var teacher_training = "Teacher training";
 var created_time = "Create time";
 var total_reflections = "Total Reflections";
 var student_training = "Student training";
-var create_destination = "Create Destination";
+var create_designation = "Create Designation";
 var total_of_designation = "Total of Designation";
-var destinations = "Destinations";
-var edit_destination = "Edit Destination";
+var designations = "Designations";
+var edit_designation = "Edit Designation";
 var confirm = "Confirm";
 var hello = "Hello";
 var todays_1_1 = "Today’s 1-1";
@@ -607,6 +607,7 @@ var current_secondary_teacher_name = "Current Secondary Teacher Name";
 var current_secondary_teacher_email = "Current Secondary Teacher Email";
 var remove_secondary_teacher = "Remove Secondary Teacher";
 var select_secondary_teacher_change = "Select Secondary Teacher Change";
+var filter_calendar = "Filter calendar";
 var lang_us = {
 	dashboard: dashboard,
 	user: user,
@@ -791,10 +792,10 @@ var lang_us = {
 	created_time: created_time,
 	total_reflections: total_reflections,
 	student_training: student_training,
-	create_destination: create_destination,
+	create_designation: create_designation,
 	total_of_designation: total_of_designation,
-	destinations: destinations,
-	edit_destination: edit_destination,
+	designations: designations,
+	edit_designation: edit_designation,
 	confirm: confirm,
 	hello: hello,
 	todays_1_1: todays_1_1,
@@ -1189,7 +1190,8 @@ var lang_us = {
 	current_secondary_teacher_name: current_secondary_teacher_name,
 	current_secondary_teacher_email: current_secondary_teacher_email,
 	remove_secondary_teacher: remove_secondary_teacher,
-	select_secondary_teacher_change: select_secondary_teacher_change
+	select_secondary_teacher_change: select_secondary_teacher_change,
+	filter_calendar: filter_calendar
 };
 
 var dashboard$1 = "Dashboard";
@@ -1374,10 +1376,10 @@ var teacher_training$1 = "Teacher training";
 var created_time$1 = "Create time";
 var total_reflections$1 = "Total Reflections";
 var student_training$1 = "Student training";
-var create_destination$1 = "Create Destination";
+var create_designation$1 = "Create Designation";
 var total_of_designation$1 = "Total of Designation";
-var destinations$1 = "Destinations";
-var edit_destination$1 = "Edit Destination";
+var designations$1 = "Designations";
+var edit_designation$1 = "Edit Designation";
 var confirm$1 = "Confirm";
 var hello$1 = "Hello";
 var todays_1_1$1 = "Today’s 1-1";
@@ -1768,6 +1770,7 @@ var current_secondary_teacher_name$1 = "Current Secondary Teacher Name";
 var current_secondary_teacher_email$1 = "Current Secondary Teacher Email";
 var remove_secondary_teacher$1 = "Remove Secondary Teacher";
 var select_secondary_teacher_change$1 = "Select Secondary Teacher Change";
+var filter_calendar$1 = "Filter calendar";
 var lang_uk = {
 	dashboard: dashboard$1,
 	user: user$1,
@@ -1952,10 +1955,10 @@ var lang_uk = {
 	created_time: created_time$1,
 	total_reflections: total_reflections$1,
 	student_training: student_training$1,
-	create_destination: create_destination$1,
+	create_designation: create_designation$1,
 	total_of_designation: total_of_designation$1,
-	destinations: destinations$1,
-	edit_destination: edit_destination$1,
+	designations: designations$1,
+	edit_designation: edit_designation$1,
 	confirm: confirm$1,
 	hello: hello$1,
 	todays_1_1: todays_1_1$1,
@@ -2350,7 +2353,8 @@ var lang_uk = {
 	current_secondary_teacher_name: current_secondary_teacher_name$1,
 	current_secondary_teacher_email: current_secondary_teacher_email$1,
 	remove_secondary_teacher: remove_secondary_teacher$1,
-	select_secondary_teacher_change: select_secondary_teacher_change$1
+	select_secondary_teacher_change: select_secondary_teacher_change$1,
+	filter_calendar: filter_calendar$1
 };
 
 var DEFAULT_LANGUAGE = localStorage.getItem("language") !== null ? localStorage.getItem("language") : "uk";
@@ -2709,6 +2713,7 @@ var apiUpload = axios.create({
 
     if (token) {
       config.headers.Authorization = "Bearer " + token;
+      localStorage.setItem("LAST_TIME_REQUETST", moment().utc().format("YYYY-MM-DD HH:mm:ss"));
     }
 
     return config;
@@ -4378,6 +4383,7 @@ var Loading = function Loading() {
   var isLoading = useSelector(function (state) {
     return state.common.isLoading;
   });
+  localStorage.setItem("LAST_TIME_REQUETST", moment().utc().format("YYYY-MM-DD HH:mm:ss"));
   return isLoading ? React.createElement("div", {
     style: loadingStyle
   }, React.createElement("div", {
@@ -6770,8 +6776,89 @@ 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";
@@ -6804,38 +6891,54 @@ 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 initValue$3 = {
+  id: "",
+  firstName: "",
+  lastName: "",
+  email: "",
+  dateOfBirth: "",
+  roles: [],
+  isActive: true,
+  profileImageFileName: ""
+};
+var USER_LIST_URL = "/admin/user";
+var TITLE$7 = "User detail";
 
-var useUserList = function useUserList() {
+var useUserDetail = function useUserDetail(id) {
+  var dispatch = useDispatch();
   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(initValue$3),
+      userDetail = _useState[0],
+      setUserDetail = _useState[1];
 
-  var _useState = useState(!!queryName ? queryName : ""),
-      fullName = _useState[0],
-      setFullName = _useState[1];
+  var _useState2 = useState(null),
+      file = _useState2[0],
+      setFile = _useState2[1];
 
-  var isDistrict = window.location.host.includes("-district");
-  var dispatch = useDispatch();
-  var getData = useCallback(function (fullName) {
+  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);
+    }
+  };
+
+  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 _temp3 = function _temp3() {
         dispatch(setLoading(false));
@@ -6844,22 +6947,14 @@ var useUserList = function useUserList() {
       dispatch(setLoading(true));
 
       var _temp4 = _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;
-          }
+        return Promise.resolve(getById$3(id)).then(function (res) {
+          var _res$data;
 
-          dispatch(setUserList({
-            userList: items,
-            totalItems: totalItems
+          setUserDetail(_extends({}, res.data, {
+            dateOfBirth: format(new Date(res.data.dateOfBirth), DATE_FORMAT),
+            roles: res.data.roles.includes("EduTeacher") ? [ROLES.EDUTEACHER] : res.data.roles
           }));
+          document.title = (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.fullName;
         });
       }, function (err) {
         var _err$response, _err$response$data;
@@ -6874,688 +6969,171 @@ 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 _temp9 = function _temp9() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp10 = _catch(function () {
+        function _temp6() {
+          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);
-          }
-        }
-      }));
-    } 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
-      }));
-    }
+            if (!id) {
+              alert("Password of " + result.data.email + " is " + ("\"" + result.data.password + "\""));
+            }
 
-    dispatch(setLoading(false));
-  }, [filters]);
+            dispatch(setAlert({
+              type: "success",
+              message: (!!id ? "Update" : "Create") + " user successfully"
+            }));
+          });
+        }
 
-  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
-    }));
+        var _temp5 = 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$data2;
 
-    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 imageUrl = res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.key;
+              data.profileImageFileName = imageUrl;
+            });
+          }
+        }();
 
-  var swicthUser = useCallback(function (id) {
-    try {
-      var _temp6 = _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 _temp9 = function _temp9() {
-                  dispatch(setLoading(false));
-                };
+        return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
+      }, function (err) {
+        var _err$response2, _err$response2$data;
 
-                dispatch(setLoading(true));
+        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 _temp10 = _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;
+      return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [id, file]);
 
-                  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
-                  });
-                });
+  var confirmChangePassword = function confirmChangePassword(data) {
+    try {
+      var _temp13 = function _temp13() {
+        dispatch(setLoading(false));
+      };
 
-                return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
-              } catch (e) {
-                return Promise.reject(e);
-              }
-            }
+      dispatch(setLoading(true));
+
+      var _temp14 = _catch(function () {
+        return Promise.resolve(changePassword(data)).then(function () {
+          dispatch(setAlert({
+            type: "success",
+            message: "Change password successfully"
           }));
         });
-      }, function (err) {
-        var _err$response4, _err$response4$data;
+      }, function (e) {
+        var _e$response, _e$response$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: ((_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(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+      return Promise.resolve(_temp14 && _temp14.then ? _temp14.then(_temp13) : _temp13(_temp14));
     } 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 forgotPasswordRequest = useCallback(function (data) {
+    try {
+      var _temp17 = function _temp17() {
+        dispatch(setLoading(false));
+      };
 
-var SearchBox = function SearchBox(_ref) {
-  var initValue = _ref.initValue,
-      onSearch = _ref.onSearch,
-      placeholder = _ref.placeholder,
-      className = _ref.className,
-      style = _ref.style;
+      dispatch(setLoading(true));
 
-  var _useState = useState(initValue),
-      searchString = _useState[0],
-      setSearchString = _useState[1];
+      var _temp18 = _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;
 
-  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
-  });
-};
+        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"
+        }));
+      });
 
-SearchBox.defaultProps = {
-  placeholder: "Type something to search",
-  className: "",
-  style: {}
+      return Promise.resolve(_temp18 && _temp18.then ? _temp18.then(_temp17) : _temp17(_temp18));
+    } 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
+  };
 };
-var SearchBox$1 = memo(SearchBox);
 
-var searchInputStyle = {
-  height: 38
-};
+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 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
-  })));
-};
+var changePasswordSchema = object({
+  oldPassword: string().required("Current password is required"),
+  newPassword: string().required("New password is required"),
+  confirmedNewPassword: string().required("Confirm password is required")
+});
 
-SearchBoxContainer.defaultProps = {
-  placeholder: "Type something to search"
-};
+var CREATE_USER = "create_user";
+var EDIT_USER_HEADER = "edit_user";
+var CHANGE_PASSWORD$1 = "change_password";
 
-var utcToLocalTime = (function (time, FORMAT) {
-  if (time === DATE_MIN_VALUE) return "";
+var UserDetail = function UserDetail() {
+  var _useParams = useParams(),
+      id = _useParams.id;
 
-  try {
-    return moment.utc(time).local().format(FORMAT || "yyyy-MM-DD");
-  } catch (_unused) {
-    return "";
-  }
-});
+  var user = useSelector(function (state) {
+    return state.common.user;
+  });
 
-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.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 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 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() {
-    try {
-      localStorage.setItem(window.location.href, "true");
-      setEdited(true);
-      return Promise.resolve();
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  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 _temp3 = function _temp3() {
-        dispatch(setLoading(false));
-      };
-
-      dispatch(setLoading(true));
-
-      var _temp4 = _catch(function () {
-        return Promise.resolve(getById$3(id)).then(function (res) {
-          var _res$data;
-
-          setUserDetail(_extends({}, res.data, {
-            dateOfBirth: format(new Date(res.data.dateOfBirth), DATE_FORMAT),
-            roles: res.data.roles.includes("EduTeacher") ? [ROLES.EDUTEACHER] : res.data.roles
-          }));
-          document.title = (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.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(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
-    } 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 _temp9 = function _temp9() {
-        dispatch(setLoading(false));
-      };
-
-      dispatch(setLoading(true));
-
-      var _temp10 = _catch(function () {
-        function _temp6() {
-          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 _temp5 = 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$data2;
-
-              var imageUrl = res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.key;
-              data.profileImageFileName = imageUrl;
-            });
-          }
-        }();
-
-        return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
-      }, 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(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }, [id, file]);
-
-  var confirmChangePassword = function confirmChangePassword(data) {
-    try {
-      var _temp13 = function _temp13() {
-        dispatch(setLoading(false));
-      };
-
-      dispatch(setLoading(true));
-
-      var _temp14 = _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(_temp14 && _temp14.then ? _temp14.then(_temp13) : _temp13(_temp14));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  var forgotPasswordRequest = useCallback(function (data) {
-    try {
-      var _temp17 = function _temp17() {
-        dispatch(setLoading(false));
-      };
-
-      dispatch(setLoading(true));
-
-      var _temp18 = _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(_temp18 && _temp18.then ? _temp18.then(_temp17) : _temp17(_temp18));
-    } 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
-  };
-};
-
-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 _useTranslation = useTranslation(),
+      t = _useTranslation.t;
 
   var _useUserDetail = useUserDetail(id),
       userDetail = _useUserDetail.userDetail,
@@ -7966,21 +7544,96 @@ var headerTextStyle = {
   textAlign: "center"
 };
 
-var CommonHeader = function CommonHeader(_ref) {
-  var header = _ref.header,
-      rootHeader = _ref.rootHeader;
-  return React.createElement("div", {
-    style: headerStyle
-  }, React.createElement(Row, null, rootHeader && React.createElement(Col, {
-    md: 4
-  }, React.createElement("span", {
-    className: "text-muted",
-    style: headerTextStyle
-  }, rootHeader)), React.createElement(Col, {
-    md: 4
-  }, React.createElement("span", {
-    style: headerTextStyle
-  }, header))));
+var CommonHeader = function CommonHeader(_ref) {
+  var header = _ref.header,
+      rootHeader = _ref.rootHeader;
+  return React.createElement("div", {
+    style: headerStyle
+  }, React.createElement(Row, null, rootHeader && React.createElement(Col, {
+    md: 4
+  }, React.createElement("span", {
+    className: "text-muted",
+    style: headerTextStyle
+  }, rootHeader)), React.createElement(Col, {
+    md: 4
+  }, React.createElement("span", {
+    style: headerTextStyle
+  }, 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],
+      setIsOpen = _useState[1];
+
+  var _useState2 = useState({
+    minutes: 0,
+    timeLogout: ""
+  }),
+      objTime = _useState2[0],
+      setObjTime = _useState2[1];
+
+  var checkOpenModalLogout = function checkOpenModalLogout() {
+    var lastTimeOut = localStorage.getItem("LAST_TIME_REQUETST");
+    console.log({
+      lastTimeOut: lastTimeOut
+    });
+    var timeMoment = moment(lastTimeOut, "YYYY-MM-DD HH:mm");
+    var currentTime = moment(moment().utc().format("YYYY-MM-DD HH:mm"));
+    var minutes = currentTime.diff(timeMoment, "minutes");
+    var timeLogout = utcToLocalTime(currentTime.add(16 - minutes, 'minutes').format("YYYY-MM-DD HH:mm"), "HH:mm");
+
+    if (minutes == 13) {
+      var dataTime = {
+        minutes: minutes,
+        timeLogout: timeLogout
+      };
+      setObjTime(dataTime);
+      onToggle();
+    }
+  };
+
+  useEffect(function () {
+    var getAccessToken = localStorage.getItem(ACCESS_TOKEN);
+
+    if (getAccessToken) {
+      var interval = setInterval(function () {
+        checkOpenModalLogout();
+      }, 60 * 1000);
+      return function () {
+        return clearInterval(interval);
+      };
+    }
+
+    return;
+  }, []);
+
+  var onToggle = function onToggle() {
+    setIsOpen(!isOpen);
+  };
+
+  return React.createElement(Modal, {
+    isOpen: isOpen,
+    toggle: onToggle,
+    size: "xs"
+  }, React.createElement(ModalHeader, {
+    toggle: onToggle
+  }, "Notification Logout"), React.createElement(ModalBody, null, "Are you still here? You have had no action for " + (objTime === null || objTime === void 0 ? void 0 : objTime.minutes) + " mins. \n                    Your account could be log out after " + (15 - (objTime === null || objTime === void 0 ? void 0 : objTime.minutes)) + " mins at " + (objTime === null || objTime === void 0 ? void 0 : objTime.timeLogout) + " if you don't action."), React.createElement(ModalFooter, {
+    className: "text-right"
+  }, React.createElement(Button, {
+    color: "primary",
+    onClick: onToggle
+  }, "Confirm")));
 };
 
 var EditButtonIcon = function EditButtonIcon(_ref) {
@@ -8017,6 +7670,42 @@ 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) {
@@ -8378,7 +8067,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";
 
@@ -8503,7 +8192,7 @@ var useNotificationList = function useNotificationList() {
     }
   }, [filters]);
   useEffect(function () {
-    document.title = TITLE$9;
+    document.title = TITLE$8;
   }, []);
   useEffect(function () {
     getData();
@@ -8588,7 +8277,7 @@ var useNotificationList = function useNotificationList() {
   };
 };
 
-var header$3 = "Notification list";
+var header$2 = "Notification list";
 var ICON_SIZE = 20;
 
 var NotificationList = function NotificationList() {
@@ -8609,7 +8298,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
@@ -8709,6 +8398,35 @@ var NotificationList = function NotificationList() {
   }))));
 };
 
+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();
@@ -9113,7 +8831,7 @@ var get$8 = function get(filter) {
   });
 };
 
-var TITLE$a = "Gallery";
+var TITLE$9 = "Gallery";
 var defaultFilter = {
   searchString: ""
 };
@@ -9350,7 +9068,7 @@ var useGalleryList = function useGalleryList(isLibrary) {
     }
   }, [dispatch, filters]);
   useEffect(function () {
-    document.title = TITLE$a;
+    document.title = TITLE$9;
     dispatch(setTargetMedia({
       targetMedia: undefined
     }));
@@ -9542,7 +9260,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;
@@ -9553,7 +9271,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
@@ -10179,6 +9897,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,
@@ -10698,193 +10419,545 @@ var dataPlayer = createReducer(initialState$v, function (builder) {
       return response.questionId === questionId;
     });
 
-    if (!existedResponse) {
-      questionResponseCloner.push({
-        questionId: questionId,
-        text: text
-      });
-    } else {
-      existedResponse.text = text;
+    if (!existedResponse) {
+      questionResponseCloner.push({
+        questionId: questionId,
+        text: text
+      });
+    } else {
+      existedResponse.text = text;
+    }
+
+    return _extends({}, state, {
+      questionResponse: questionResponseCloner
+    });
+  }).addCase(reset, function (_state, _action) {
+    return initialState$v;
+  });
+});
+
+var setCertificateList = createAction("certificates/setCertificateList");
+
+var initialState$w = {
+  certificateList: [],
+  totalItems: 0
+};
+var commonReducer$f = createReducer(initialState$w, function (builder) {
+  builder.addCase(setCertificateList, function (state, action) {
+    state.certificateList = action.payload.certificateList;
+    state.totalItems = action.payload.totalItems;
+  }).addCase(reset, function (_state, _action) {
+    return initialState$w;
+  });
+});
+
+var setImproveMyClass = createAction("improveMyClass/setImproveMyClass");
+
+var initialState$x = {
+  improveMyClassList: []
+};
+var commonReducer$g = createReducer(initialState$x, function (builder) {
+  builder.addCase(setImproveMyClass, function (state, action) {
+    state.improveMyClassList = action.payload;
+  }).addCase(reset, function (_state, _action) {
+    return initialState$x;
+  });
+});
+
+var setFilterWidget = createAction("setFilterWidget");
+
+var initialState$y = {
+  filterWidget: "Year"
+};
+var widgetReducer = createReducer(initialState$y, function (builder) {
+  builder.addCase(setFilterWidget, function (state, action) {
+    state.filterWidget = action.payload.filterWidget;
+  }).addCase(reset, function (_state, _action) {
+    return initialState$y;
+  });
+});
+
+var setBandScoreList = createAction("bandScores/setBandScoreList");
+
+var initialState$z = {
+  bandScoreList: [],
+  totalItems: 0
+};
+var commonReducer$h = createReducer(initialState$z, function (builder) {
+  builder.addCase(setBandScoreList, function (state, action) {
+    state.bandScoreList = action.payload.bandScoreList;
+    state.totalItems = action.payload.totalItems;
+  }).addCase(reset, function (_state, _action) {
+    return initialState$z;
+  });
+});
+
+var setSchoolBlankDayList = createAction("schoolBlankDays/setSchoolBlankDayList");
+
+var initialState$A = {
+  schoolBlankDayList: [],
+  totalItems: 0
+};
+var commonReducer$i = createReducer(initialState$A, function (builder) {
+  builder.addCase(setSchoolBlankDayList, function (state, action) {
+    state.schoolBlankDayList = action.payload.schoolBlankDayList;
+    state.totalItems = action.payload.totalItems;
+  }).addCase(reset, function (_state, _action) {
+    return initialState$A;
+  });
+});
+
+var setStudentIdSelectedByTeacher = createAction("navMobile/setStudentIdSelectedByTeacher");
+
+var initialState$B = {
+  studentIdSelectedByTeacher: 0
+};
+var navMobileReducer = createReducer(initialState$B, function (builder) {
+  builder.addCase(setStudentIdSelectedByTeacher, function (state, action) {
+    state.studentIdSelectedByTeacher = action.payload;
+  }).addCase(reset, function (_state, _action) {
+    return initialState$B;
+  });
+});
+
+var rootReducer = combineReducers({
+  common: commonReducer,
+  classes: classReducer,
+  conferenceRubrics: conferenceRubricReducer,
+  faqs: commonReducer$1,
+  skills: commonReducer$2,
+  emailTemplate: emailTemplateReducer,
+  suggestionBank: suggestionBankReducer,
+  learningStrategy: learningStrategyReducer,
+  subjects: commonReducer$3,
+  learningSupportCategories: commonReducer$4,
+  questionBank: questionBankReducer,
+  badges: commonReducer$5,
+  semester: commonReducer$6,
+  goalExamples: commonReducer$8,
+  users: commonReducer$9,
+  reflections: reflectionReducer,
+  reflectionResults: reflectionReducer$1,
+  feedbacks: commonReducer$a,
+  assessments: commonReducer$b,
+  questionByCategory: questionCategoryReducer,
+  mailCategory: questionBankReducer$1,
+  questionCate: questionCateReducer,
+  notification: questionBankReducer$2,
+  myStudent: commonReducer$c,
+  assignments: commonReducer$7,
+  assistants: assistantReducer,
+  sesstionTemplates: sessionTemplateReducer,
+  sessionTemplateGeneralClasses: sessionTemplateGeneralClassReducer,
+  tutorialScreens: tutorialScreenReducer,
+  customAlerts: commonReducer$d,
+  gallery: commonReducer$e,
+  dashboard: dashboardReducer,
+  sessionPlayer: sessionPlayerReducer,
+  dataPlayer: dataPlayer,
+  certificate: commonReducer$f,
+  improveMyClass: commonReducer$g,
+  widget: widgetReducer,
+  bandScores: commonReducer$h,
+  schoolBlankDays: commonReducer$i,
+  navMobileReducer: navMobileReducer
+});
+
+var store = configureStore({
+  reducer: rootReducer,
+  middleware: function middleware(getDefaultMiddleware) {
+    return getDefaultMiddleware({
+      serializableCheck: false
+    }).concat(logger);
+  }
+});
+
+var isInViewport = function isInViewport(el) {
+  var rect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
+  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+};
+
+var debounce = function debounce(callback, wait) {
+  var timeout = null;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
-    return _extends({}, state, {
-      questionResponse: questionResponseCloner
-    });
-  }).addCase(reset, function (_state, _action) {
-    return initialState$v;
-  });
-});
+    var next = function next() {
+      return callback.apply(void 0, args);
+    };
 
-var setCertificateList = createAction("certificates/setCertificateList");
+    clearTimeout(timeout);
+    timeout = setTimeout(next, wait);
+  };
+};
 
-var initialState$w = {
-  certificateList: [],
-  totalItems: 0
+var getTextFromHTML = function getTextFromHTML(htmlString) {
+  var p = document.createElement("p");
+  p.innerHTML = htmlString;
+  var text = p.innerText;
+  p.remove();
+  return text;
 };
-var commonReducer$f = createReducer(initialState$w, function (builder) {
-  builder.addCase(setCertificateList, function (state, action) {
-    state.certificateList = action.payload.certificateList;
-    state.totalItems = action.payload.totalItems;
-  }).addCase(reset, function (_state, _action) {
-    return initialState$w;
-  });
+
+var generateRandomString = (function () {
+  return (Math.random() + 1).toString(36).substring(7);
 });
 
-var setImproveMyClass = createAction("improveMyClass/setImproveMyClass");
+var amplitudeClient = amplitude.getInstance();
 
-var initialState$x = {
-  improveMyClassList: []
-};
-var commonReducer$g = createReducer(initialState$x, function (builder) {
-  builder.addCase(setImproveMyClass, function (state, action) {
-    state.improveMyClassList = action.payload;
-  }).addCase(reset, function (_state, _action) {
-    return initialState$x;
+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 setFilterWidget = createAction("setFilterWidget");
+  var _useFilters = useFilters(),
+      filters = _useFilters.filters,
+      changeFilters = _useFilters.changeFilters;
 
-var initialState$y = {
-  filterWidget: "Year"
-};
-var widgetReducer = createReducer(initialState$y, function (builder) {
-  builder.addCase(setFilterWidget, function (state, action) {
-    state.filterWidget = action.payload.filterWidget;
-  }).addCase(reset, function (_state, _action) {
-    return initialState$y;
-  });
-});
+  var _useState = useState(!!queryName ? queryName : ""),
+      fullName = _useState[0],
+      setFullName = _useState[1];
 
-var setBandScoreList = createAction("bandScores/setBandScoreList");
+  var isDistrict = window.location.host.includes("-district");
+  var dispatch = useDispatch();
+  var getData = useCallback(function (fullName) {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
 
-var initialState$z = {
-  bandScoreList: [],
-  totalItems: 0
-};
-var commonReducer$h = createReducer(initialState$z, function (builder) {
-  builder.addCase(setBandScoreList, function (state, action) {
-    state.bandScoreList = action.payload.bandScoreList;
-    state.totalItems = action.payload.totalItems;
-  }).addCase(reset, function (_state, _action) {
-    return initialState$z;
-  });
-});
+      dispatch(setLoading(true));
 
-var setSchoolBlankDayList = createAction("schoolBlankDays/setSchoolBlankDayList");
+      var _temp4 = _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;
 
-var initialState$A = {
-  schoolBlankDayList: [],
-  totalItems: 0
-};
-var commonReducer$i = createReducer(initialState$A, function (builder) {
-  builder.addCase(setSchoolBlankDayList, function (state, action) {
-    state.schoolBlankDayList = action.payload.schoolBlankDayList;
-    state.totalItems = action.payload.totalItems;
-  }).addCase(reset, function (_state, _action) {
-    return initialState$A;
-  });
-});
+          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(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } 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 _temp6 = _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 _temp9 = function _temp9() {
+                  dispatch(setLoading(false));
+                };
 
-var setStudentIdSelectedByTeacher = createAction("navMobile/setStudentIdSelectedByTeacher");
+                dispatch(setLoading(true));
 
-var initialState$B = {
-  studentIdSelectedByTeacher: 0
-};
-var navMobileReducer = createReducer(initialState$B, function (builder) {
-  builder.addCase(setStudentIdSelectedByTeacher, function (state, action) {
-    state.studentIdSelectedByTeacher = action.payload;
-  }).addCase(reset, function (_state, _action) {
-    return initialState$B;
-  });
-});
+                var _temp10 = _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;
 
-var rootReducer = combineReducers({
-  common: commonReducer,
-  classes: classReducer,
-  conferenceRubrics: conferenceRubricReducer,
-  faqs: commonReducer$1,
-  skills: commonReducer$2,
-  emailTemplate: emailTemplateReducer,
-  suggestionBank: suggestionBankReducer,
-  learningStrategy: learningStrategyReducer,
-  subjects: commonReducer$3,
-  learningSupportCategories: commonReducer$4,
-  questionBank: questionBankReducer,
-  badges: commonReducer$5,
-  semester: commonReducer$6,
-  goalExamples: commonReducer$8,
-  users: commonReducer$9,
-  reflections: reflectionReducer,
-  reflectionResults: reflectionReducer$1,
-  feedbacks: commonReducer$a,
-  assessments: commonReducer$b,
-  questionByCategory: questionCategoryReducer,
-  mailCategory: questionBankReducer$1,
-  questionCate: questionCateReducer,
-  notification: questionBankReducer$2,
-  myStudent: commonReducer$c,
-  assignments: commonReducer$7,
-  assistants: assistantReducer,
-  sesstionTemplates: sessionTemplateReducer,
-  sessionTemplateGeneralClasses: sessionTemplateGeneralClassReducer,
-  tutorialScreens: tutorialScreenReducer,
-  customAlerts: commonReducer$d,
-  gallery: commonReducer$e,
-  dashboard: dashboardReducer,
-  sessionPlayer: sessionPlayerReducer,
-  dataPlayer: dataPlayer,
-  certificate: commonReducer$f,
-  improveMyClass: commonReducer$g,
-  widget: widgetReducer,
-  bandScores: commonReducer$h,
-  schoolBlankDays: commonReducer$i,
-  navMobileReducer: navMobileReducer
-});
+                  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
+                  });
+                });
 
-var store = configureStore({
-  reducer: rootReducer,
-  middleware: function middleware(getDefaultMiddleware) {
-    return getDefaultMiddleware({
-      serializableCheck: false
-    }).concat(logger);
-  }
-});
+                return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
+              } catch (e) {
+                return Promise.reject(e);
+              }
+            }
+          }));
+        });
+      }, function (err) {
+        var _err$response4, _err$response4$data;
 
-var isInViewport = function isInViewport(el) {
-  var rect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
-  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
-};
+        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
+        }));
+      });
 
-var debounce = function debounce(callback, wait) {
-  var timeout = null;
-  return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
     }
+  }, [filters]);
 
-    var next = function next() {
-      return callback.apply(void 0, args);
-    };
+  var reDirectDetailPage = function reDirectDetailPage(id) {
+    var url = !!id ? USER_URL$2 + "/" + id : CREATE_USER_URL;
+    history.push(url);
+  };
 
-    clearTimeout(timeout);
-    timeout = setTimeout(next, wait);
+  return {
+    userList: userList,
+    totalItems: totalItems,
+    filters: filters,
+    queryName: queryName,
+    getData: getData,
+    removeData: removeData,
+    changeFilters: changeFilters,
+    reDirectDetailPage: reDirectDetailPage,
+    swicthUser: swicthUser
   };
 };
 
-var getTextFromHTML = function getTextFromHTML(htmlString) {
-  var p = document.createElement("p");
-  p.innerHTML = htmlString;
-  var text = p.innerText;
-  p.remove();
-  return text;
-};
+var header$4 = "User";
 
-var generateRandomString = (function () {
-  return (Math.random() + 1).toString(36).substring(7);
-});
+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 amplitudeClient = amplitude.getInstance();
+  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.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, 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 };
+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