acsi-core 0.1.66 → 0.1.68

package/dist/index.js

@@ -11,12 +11,12 @@ var Cookies = _interopDefault(require('js-cookie'));
 var reactRouterDom = require('react-router-dom');
 var reactRedux = require('react-redux');
 var google = require('@react-oauth/google');
+var ReactSelect = require('react-select');
+var ReactSelect__default = _interopDefault(ReactSelect);
+var reactToastify = require('react-toastify');
 var reactGoogleLogin = require('@leecheuk/react-google-login');
 var material = require('@mui/material');
-var reactToastify = require('react-toastify');
 var amplitude = require('@amplitude/analytics-browser');
-var ReactSelect = require('react-select');
-var ReactSelect__default = _interopDefault(ReactSelect);
 var fa = require('react-icons/fa');
 var CreatableSelect = _interopDefault(require('react-select/creatable'));
 
@@ -93,7 +93,7 @@ var COLORS = {
 var ORGANIZATION_TENANT = "ORGANIZATION_TENANT";
 var ORGANIZATION_TEAM = "ORGANIZATION_TEAM";
 
-var styleGlobal = {"signup_wrap":"_1KLz9","box-signin":"_2Jo1o","signin_title":"_3egBO","signup_link":"_1DoIT","google_button":"_34hK_","box-field":"_2e9xO","box-input":"_3zXRp","box-text":"_8NJga","box-button-email":"_21FPk","box-signin-container":"_1QERu","box-signin-text":"_2-znH","box-signin-logo":"_1aB2m","box-right":"_3qndF","box-right-body":"_JzdCr","box-right-footer":"_19aCA","pr-30":"_2HB5r"};
+var styleGlobal = {"signup_wrap":"_1KLz9","box-signin":"_2Jo1o","signin_title":"_3egBO","signup_link":"_1DoIT","google_button":"_34hK_","box-field":"_2e9xO","box-input":"_3zXRp","box-text":"_8NJga","box-button-email":"_21FPk","box-signin-container":"_1QERu","box-signin-text":"_2-znH","box-signin-logo":"_1aB2m","box-right":"_3qndF","box-right-body":"_JzdCr","box-right-footer":"_19aCA","pr-30":"_2HB5r","width-400":"_4ehXP"};
 
 var api = axios.create({
   baseURL: BASE_URL,
@@ -212,1331 +212,916 @@ var CookieService = /*#__PURE__*/function () {
   AmplitudeEvent["USER_USAGE"] = "user_usage";
 })(exports.AmplitudeEvent || (exports.AmplitudeEvent = {}));
 
-var BlockLogin = function BlockLogin(_ref) {
-  var onNavigate = _ref.onNavigate,
-    role = _ref.role,
-    hiddenSignup = _ref.hiddenSignup,
-    email = _ref.email,
-    setEmail = _ref.setEmail,
-    loginWithEmail = _ref.loginWithEmail,
-    code = _ref.code,
-    setCode = _ref.setCode,
-    isScreenCode = _ref.isScreenCode,
-    formatTime = _ref.formatTime,
-    loginWithEmailCode = _ref.loginWithEmailCode,
-    trackEvent = _ref.trackEvent;
-  var dispatch = reactRedux.useDispatch();
-  var googleLogin = google.useGoogleLogin({
-    onSuccess: function (tokenResponse) {
-      try {
-        return Promise.resolve(axios.get("https://www.googleapis.com/oauth2/v3/userinfo", {
-          headers: {
-            Authorization: "Bearer " + tokenResponse.access_token
-          }
-        })).then(function (userInfo) {
-          return function () {
-            if (userInfo && userInfo.data) {
-              var _userInfo$data = userInfo.data,
-                _email = _userInfo$data.email,
-                picture = _userInfo$data.picture,
-                family_name = _userInfo$data.family_name,
-                given_name = _userInfo$data.given_name,
-                name = _userInfo$data.name,
-                sub = _userInfo$data.sub;
-              var accessToken = tokenResponse.access_token;
-              var infoLogin = {
-                imageUrl: picture,
-                fullName: name,
-                firstName: family_name,
-                lastName: given_name,
-                email: _email,
-                token: accessToken,
-                googleId: sub,
-                role: role,
-                type: TypeLogin.Google
-              };
-              dispatch(setLoading(true));
-              return Promise.resolve(apiLoginGoogle(infoLogin)).then(function (authResult) {
-                var _authResult$data;
-                if (((_authResult$data = authResult.data) === null || _authResult$data === void 0 ? void 0 : _authResult$data.id) == null) {
-                  dispatch(setLoading(false));
-                  alert("Please contact admin.");
-                  return;
-                }
-                localStorage.clear();
-                var tokenJWT = authResult.data.token;
-                trackEvent === null || trackEvent === void 0 ? void 0 : trackEvent({
-                  eventName: exports.AmplitudeEvent.LOGIN,
-                  eventProperties: {
-                    email: _email,
-                    login_method: 'google',
-                    user_role: authResult.data.role,
-                    success: true,
-                    timestamp: new Date().toISOString()
-                  }
-                });
-                if (role === "LandingPage") {
-                  CookieService.setAuthCookie({
-                    token: tokenJWT,
-                    expiresAt: Date.now() + 24 * 60 * 60 * 1000
-                  });
-                  var getRedirectUrl = function getRedirectUrl(role) {
-                    switch (role) {
-                      case "Admin":
-                        return ADMIN_ORIGIN;
-                      case "Teacher":
-                        return TEACHER_ORIGIN;
-                      default:
-                        return role + "." + REQUEST_ORIGIN;
-                    }
-                  };
-                  var redirectUrl = getRedirectUrl(authResult.data.role);
-                  window.location.href = redirectUrl + "/dashboard";
-                  dispatch(setLoading(false));
-                }
-                localStorage.setItem(ACCESS_TOKEN, tokenJWT);
-                onNavigate("/dashboard");
-                dispatch(setLoading(false));
-              });
-            }
-          }();
-        });
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    },
-    onError: function onError(errorResponse) {
-      return console.log(errorResponse);
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-  });
-  return React__default.createElement(reactstrap.Row, {
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+var styles = {"core-button":"_xvNBN","primary":"_U9Qyp","secondary":"_1VzMy","text":"_pZNuj","danger":"_2uYm1","light":"_wxH5S"};
+
+var _excluded = ["type", "children", "onClick", "icon", "disabled", "htmlType"];
+var CoreButton = function CoreButton(props) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? "primary" : _props$type,
+    children = props.children,
+    onClick = props.onClick,
+    icon = props.icon,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$htmlType = props.htmlType,
+    htmlType = _props$htmlType === void 0 ? "button" : _props$htmlType,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  return React__default.createElement("button", Object.assign({
+    className: styles["core-button"] + " " + styles[type],
+    onClick: onClick,
+    disabled: disabled,
+    type: htmlType
+  }, rest), icon && icon, children);
+};
+
+var styles$1 = {"core-input":"_1WdX2","outline":"_3X2RJ","no-outline":"_bVYtv","error":"_n7n3Q"};
+
+var styles$2 = {"core-error":"_1Mmxr"};
+
+var CoreError = function CoreError(props) {
+  var message = props.message;
+  return React__default.createElement("div", {
+    className: "" + styles$2["core-error"]
+  }, React__default.createElement("p", null, message));
+};
+
+var CoreInput = function CoreInput(props) {
+  var name = props.name,
+    value = props.value,
+    _onChange = props.onChange,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "outline" : _props$type,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    label = props.label,
+    width = props.width,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Type here" : _props$placeholder,
+    error = props.error,
+    _props$errorMessage = props.errorMessage,
+    errorMessage = _props$errorMessage === void 0 ? "" : _props$errorMessage,
+    fontSize = props.fontSize,
+    fontWeight = props.fontWeight,
+    _onKeyDown = props.onKeyDown,
+    ref = props.ref,
+    maxLength = props.maxLength,
+    className = props.className,
+    onKeyFocus = props.onKeyFocus;
+  return React__default.createElement("div", {
+    className: styles$1["core-input"] + "  " + styles$1[type] + " " + (error ? styles$1["error"] : ""),
     style: {
-      height: "100%"
+      width: width != null ? width : "100%"
     }
-  }, React__default.createElement(reactstrap.Col, {
-    sm: 12,
-    lg: role != "Admin" ? 7 : 12
-  }, React__default.createElement("div", {
-    className: "" + styleGlobal["box-signin-container"]
-  }, React__default.createElement("div", {
-    className: styleGlobal["box-signin-logo"] + " "
-  }, React__default.createElement(reactRouterDom.Link, {
-    to: "/",
-    className: "d-flex"
-  }, React__default.createElement("img", {
-    src: "/images/Logo.png",
-    alt: "",
-    height: 37,
-    width: 155,
-    className: "my-auto"
-  }))), React__default.createElement("div", {
-    className: styleGlobal["box-signin"] + " "
-  }, React__default.createElement("div", {
-    className: "" + styleGlobal["signin_title"]
-  }, React__default.createElement("span", null, "Welcome to Edusfere")), !hiddenSignup && React__default.createElement("div", {
-    className: "" + styleGlobal["signup_link"]
-  }, React__default.createElement("span", null, "Don't have an account?", " ", React__default.createElement(reactRouterDom.Link, {
-    to: "/",
+  }, label && React__default.createElement("label", null, label), React__default.createElement("input", Object.assign({
     style: {
-      color: "#00A0DA"
+      fontSize: fontSize,
+      fontWeight: fontWeight
     },
-    className: "text-decoration-none"
-  }, "Sign up"))), React__default.createElement("div", {
-    className: "" + styleGlobal["google_button"]
-  }, React__default.createElement("button", {
-    onClick: function onClick() {
-      return googleLogin();
-    }
-  }, React__default.createElement("img", {
-    width: 24,
-    height: 24,
-    alt: "Google sign-in",
-    src: "/images/icons/Google__G__logo.png"
-  }), "Sign in with Google")), React__default.createElement("span", {
-    className: "" + styleGlobal["box-field"]
-  }, "OR"), isScreenCode ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: "" + styleGlobal["box-input"]
-  }, React__default.createElement("input", {
-    type: "text",
-    placeholder: "Code OTP",
-    value: code,
-    onChange: function onChange(event) {
-      setCode(event.target.value);
-    }
-  }), React__default.createElement("p", {
-    className: styleGlobal["box-text"]
-  }, "Your code will expire: ", React__default.createElement("span", null, formatTime()))), React__default.createElement("button", {
-    onClick: function onClick() {
-      return loginWithEmailCode(role);
+    name: name,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(name, e.target.value);
     },
-    className: "" + styleGlobal["box-button-email"]
-  }, React__default.createElement("img", {
-    width: 20,
-    height: 20,
-    alt: "Email sign-in",
-    src: "/images/icons/Login_icon.png"
-  }), "Login")) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: "" + styleGlobal["box-input"]
-  }, React__default.createElement("input", {
-    type: "email",
-    placeholder: "Email",
-    value: email,
-    onChange: function onChange(event) {
-      setEmail(event.target.value.trim());
-    }
-  })), React__default.createElement("button", {
-    onClick: function onClick() {
-      !!email && loginWithEmail(role);
+    disabled: disabled,
+    placeholder: placeholder,
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
     },
-    className: "" + styleGlobal["box-button-email"]
-  }, React__default.createElement("img", {
-    width: 20,
-    height: 20,
-    alt: "Email sign-in",
-    src: "/images/icons/Login_icon.png"
-  }), "Sign in with Email"))), React__default.createElement("div", {
-    className: styleGlobal["box-signin-text"] + " "
-  }, React__default.createElement("span", {
-    style: {
-      fontSize: "13px",
-      color: "#A6A6AD"
-    }
-  }, "By signing in, you agree to our Terms & Privacy Policy")))), role != "Admin" && role != 'LandingPage' && React__default.createElement(reactstrap.Col, {
-    sm: 12,
-    lg: 5,
-    className: "d-none d-lg-block " + styleGlobal["pr-30"]
-  }, React__default.createElement("div", {
-    className: "" + styleGlobal["box-right"],
-    style: {
-      backgroundImage: "url('/images/bg_login.png')"
-    }
-  }, React__default.createElement("div", {
-    className: "" + styleGlobal["box-right-body"]
-  }, React__default.createElement("span", {
-    style: {
-      fontSize: "24px",
-      fontWeight: "700"
-    }
-  }, "As a teacher, your time and energy are too valuable to waste"), React__default.createElement("p", {
-    className: " fw-normal ",
-    style: {
-      marginTop: "12px",
-      marginBottom: "24px",
-      color: "#03191F"
-    }
-  }, "So we\u2019re building a curriculum hub and and workspace that puts everything you need to plan and prep within reach."), React__default.createElement("ul", null, itemLogin.map(function (item, it) {
-    return React__default.createElement("li", {
-      key: it,
-      className: "mb-2 ",
-      style: {
-        color: "#212126"
-      }
-    }, item);
-  })), React__default.createElement("div", {
-    className: "" + styleGlobal["box-right-footer"]
-  }, React__default.createElement("img", {
-    className: "img-fluid",
-    alt: "",
-    src: "/images/image_login.png",
-    style: {
-      width: "15vw"
-    }
-  }), React__default.createElement("div", null, React__default.createElement("p", null, "As one of our earliest users,", React__default.createElement("br", null), "you are a vital part of this process"), React__default.createElement("div", null, React__default.createElement("span", {
-    className: "d-block"
-  }, "Thank you!"), React__default.createElement("img", {
-    style: {
-      marginTop: "-15px"
-    },
-    alt: "",
-    src: "/images/icons/Vector 22.png"
-  }))))))), role === "LandingPage" && React__default.createElement(reactstrap.Col, {
-    sm: 12,
-    lg: 5,
-    className: "d-none d-lg-block " + styleGlobal["pr-30"]
-  }, React__default.createElement("div", {
-    className: "" + styleGlobal["box-right"],
-    style: {
-      backgroundImage: "url('/images/bg_login.png')"
-    }
-  }, React__default.createElement("div", {
-    className: "" + styleGlobal["box-right-body"]
-  }, React__default.createElement("span", {
-    style: {
-      fontSize: "24px",
-      fontWeight: "700"
-    }
-  }, "Get ready to manage your realm!"), React__default.createElement("p", {
-    className: " fw-normal ",
-    style: {
-      marginTop: "12px",
-      marginBottom: "24px",
-      color: "#03191F"
-    }
-  }, "So we\u2019re building a curriculum hub and and workspace that puts everything you need to plan and prep within reach."), React__default.createElement("ul", null, itemLogin.map(function (item, it) {
-    return React__default.createElement("li", {
-      key: it,
-      className: "mb-2 ",
-      style: {
-        color: "#212126"
-      }
-    }, item);
-  })), React__default.createElement("div", {
-    className: "" + styleGlobal["box-right-footer"]
-  }, React__default.createElement("img", {
-    className: "img-fluid",
-    alt: "",
-    src: "/images/image_login.png",
-    style: {
-      width: "15vw"
+    onFocus: function onFocus(e) {
+      return onKeyFocus === null || onKeyFocus === void 0 ? void 0 : onKeyFocus(name, e.target.value);
     }
-  }), React__default.createElement("div", null, React__default.createElement("p", null, "As one of our earliest users,", React__default.createElement("br", null), "you are a vital part of this process"), React__default.createElement("div", null, React__default.createElement("span", {
-    className: "d-block"
-  }, "Thank you!"), React__default.createElement("img", {
-    style: {
-      marginTop: "-15px"
-    },
-    alt: "",
-    src: "/images/icons/Vector 22.png"
-  }))))))));
+  }, ref, {
+    maxLength: maxLength,
+    className: className
+  })), error && React__default.createElement(CoreError, {
+    message: errorMessage
+  }));
 };
 
-// A type of promise-like that resolves synchronously and supports only one observer
-
-const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
-
-const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
-
-// Asynchronously call a function and send errors to recovery continuation
-function _catch(body, recover) {
-	try {
-		var result = body();
-	} catch(e) {
-		return recover(e);
-	}
-	if (result && result.then) {
-		return result.then(void 0, recover);
-	}
-	return result;
-}
+var styles$3 = {"core-select":"_2sg12","label":"_1-XBo"};
 
-var defaultInfo = {
-  email: "",
-  password: "",
-  captcha: "",
-  rememberMe: false
+var Option = function Option(props) {
+  return React__default.createElement("div", null, React__default.createElement(ReactSelect.components.Option, Object.assign({}, props), React__default.createElement(CoreInput$1, {
+    checked: props.isSelected,
+    onChange: function onChange() {
+      return null;
+    },
+    name: "",
+    label: props.label
+  })));
 };
-var minutes = 15;
-var useLogin = function useLogin(onNavigate, trackEvent) {
-  var _useState = React.useState(false),
-    openLogin = _useState[0],
-    setOpenLogin = _useState[1];
-  var _useState2 = React.useState(),
-    infoUser = _useState2[0],
-    setInfoUser = _useState2[1];
-  var dispatch = reactRedux.useDispatch();
-  var toggle = React.useCallback(function () {
-    setOpenLogin(!openLogin);
-  }, [openLogin]);
-  var _useState3 = React.useState(""),
-    email = _useState3[0],
-    setEmail = _useState3[1];
-  var _useState4 = React.useState(""),
-    code = _useState4[0],
-    setCode = _useState4[1];
-  var _useState5 = React.useState(false),
-    isScreenCode = _useState5[0],
-    setIsScreenCode = _useState5[1];
-  var _useState6 = React.useState(minutes * 60),
-    timeLeft = _useState6[0],
-    setTimeLeft = _useState6[1];
-  var loginWithEmail = function loginWithEmail(role) {
-    try {
-      var _temp2 = function _temp2() {
-        dispatch(setLoading(false));
-      };
-      dispatch(setLoading(true));
-      var _temp = _catch(function () {
-        var body = {
-          email: email,
-          role: role
-        };
-        return Promise.resolve(apiSendEmailCode(body)).then(function (res) {
-          var data = res.data;
-          if (data.status == 1) {
-            if (data.data.token != null) {
-              var tokenJWT = data.data.token;
-              localStorage.setItem(ACCESS_TOKEN, tokenJWT);
-              trackEvent === null || trackEvent === void 0 ? void 0 : trackEvent({
-                eventName: exports.AmplitudeEvent.LOGIN,
-                eventProperties: {
-                  email: email,
-                  login_method: 'email',
-                  timestamp: new Date().toISOString()
-                }
-              });
-              onNavigate("/dashboard");
-            } else {
-              setIsScreenCode(true);
-            }
-          } else {
-            dispatch(setLoading(false));
-            alert("Please contact admin.");
-          }
-        });
-      }, function (e) {
-        console.log(e);
-      });
-      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-    } catch (e) {
-      return Promise.reject(e);
-    }
+var CoreSelect = function CoreSelect(props) {
+  var name = props.name,
+    options = props.options,
+    value = props.value,
+    onChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    label = props.label,
+    width = props.width,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Select" : _props$placeholder,
+    error = props.error,
+    _props$errorMessage = props.errorMessage,
+    errorMessage = _props$errorMessage === void 0 ? "" : _props$errorMessage,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "outline" : _props$type,
+    _props$isMulti = props.isMulti,
+    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
+    _props$closeMenuOnSel = props.closeMenuOnSelect,
+    closeMenuOnSelect = _props$closeMenuOnSel === void 0 ? true : _props$closeMenuOnSel,
+    _props$hideSelectedOp = props.hideSelectedOptions,
+    hideSelectedOptions = _props$hideSelectedOp === void 0 ? true : _props$hideSelectedOp;
+  var handleChange = function handleChange(e) {
+    var newValue = isMulti ? e.map(function (item) {
+      return item.value;
+    }) : e === null || e === void 0 ? void 0 : e.value;
+    onChange(name, newValue);
   };
-  var loginWithEmailCode = function loginWithEmailCode(role) {
-    try {
-      var _temp4 = function _temp4() {
-        dispatch(setLoading(false));
-      };
-      dispatch(setLoading(true));
-      var _temp3 = _catch(function () {
-        return Promise.resolve(apiCheckEmailCode({
-          email: email,
-          code: code,
-          role: role
-        })).then(function (res) {
-          var data = res.data;
-          if (data.status == 1) {
-            localStorage.clear();
-            var tokenJWT = data.data.token;
-            localStorage.setItem(ACCESS_TOKEN, tokenJWT);
-            trackEvent === null || trackEvent === void 0 ? void 0 : trackEvent({
-              eventName: exports.AmplitudeEvent.LOGIN,
-              eventProperties: {
-                email: email,
-                login_method: 'email',
-                timestamp: new Date().toISOString()
-              }
-            });
-            onNavigate("/dashboard");
-          } else {
-            dispatch(setLoading(false));
-            alert("The code is not correct. Please check again.");
-          }
-        });
-      }, function (e) {
-        console.log(e);
-      });
-      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
-    } catch (e) {
-      return Promise.reject(e);
+  var controlStyle = function controlStyle(base, state) {
+    var styles = _extends({}, base, {
+      fontSize: "14px",
+      fontWeight: "400",
+      padding: "0 4px",
+      borderRadius: "8px",
+      backgroundColor: state.isDisabled ? COLORS.lightGrayBg : COLORS.white,
+      border: state.isFocused ? "2px solid " + (!error ? COLORS.brandBlue : COLORS.red) : "1px solid " + (!error ? COLORS.grayLines : COLORS.red),
+      height: isMulti ? undefined : "32px",
+      minHeight: 0,
+      boxShadow: "none"
+    });
+    switch (type) {
+      case "outline":
+        styles.overflow = "hidden";
+        styles[":hover"] = {
+          backgroundColor: COLORS.lightBlueHover
+        };
+        break;
+      case "no-outline":
+        styles.border = "none";
+        styles.padding = 0;
+        styles["&>div"] = {
+          padding: 0
+        };
+        break;
     }
+    return styles;
   };
-  var formatTime = function formatTime() {
-    var m = Math.floor(timeLeft / 60);
-    var s = timeLeft % 60;
-    return m.toString().padStart(2, '0') + ":" + s.toString().padStart(2, '0');
+  var inputStyles = function inputStyles(base) {
+    var styles = _extends({}, base, {
+      margin: "0",
+      padding: "0",
+      color: "inherit"
+    });
+    return styles;
   };
-  React.useEffect(function () {
-    if (isScreenCode) {
-      var timer = setInterval(function () {
-        setTimeLeft(function (prev) {
-          if (prev <= 1) {
-            clearInterval(timer);
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-      return function () {
-        return clearInterval(timer);
-      };
-    }
-    return;
-  }, [isScreenCode]);
-  return {
-    defaultInfo: defaultInfo,
-    openLogin: openLogin,
-    toggle: toggle,
-    email: email,
-    setEmail: setEmail,
-    loginWithEmail: loginWithEmail,
-    infoUser: infoUser,
-    setInfoUser: setInfoUser,
-    code: code,
-    setCode: setCode,
-    isScreenCode: isScreenCode,
-    formatTime: formatTime,
-    loginWithEmailCode: loginWithEmailCode
+  var placeholderStyles = function placeholderStyles(base) {
+    var styles = _extends({}, base, {
+      color: COLORS.lightGray
+    });
+    return styles;
+  };
+  var dropdownIndicatorStyles = function dropdownIndicatorStyles(base) {
+    var styles = _extends({}, base, {
+      position: "relative",
+      top: "-4px",
+      padding: "8px 0"
+    });
+    return styles;
+  };
+  var valueContainerStyles = function valueContainerStyles(base) {
+    var styles = _extends({}, base, {
+      height: isMulti ? undefined : "32px",
+      position: "relative",
+      top: "-3px"
+    });
+    return styles;
+  };
+  var singleValueStyles = function singleValueStyles(base) {
+    var styles = _extends({}, base);
+    return styles;
+  };
+  var optionStyles = function optionStyles(base, state) {
+    var styles = _extends({}, base, {
+      padding: "8px",
+      borderRadius: "8px",
+      cursor: "pointer",
+      fontSize: "14px",
+      fontWeight: 400,
+      backgroundColor: state.isSelected ? COLORS.lightBlueHover : "transparent",
+      "&:hover": {
+        backgroundColor: COLORS.lightBlueHover
+      }
+    });
+    return styles;
+  };
+  var indicatorsContainerStyles = function indicatorsContainerStyles(base) {
+    var styles = _extends({}, base, {
+      display: type === "no-outline" ? "none" : "block"
+    });
+    return styles;
+  };
+  var multiValueStyles = function multiValueStyles(base) {
+    var styles = _extends({}, base, {
+      backgroundColor: COLORS.lightBlue,
+      borderRadius: "4px",
+      padding: "2px 8px",
+      display: "flex",
+      alignItems: "center",
+      fontSize: "13px",
+      color: COLORS.blackText
+    });
+    return styles;
+  };
+  var multiValueRemoveStyles = function multiValueRemoveStyles(base) {
+    var styles = _extends({}, base, {
+      color: COLORS.lightGray,
+      cursor: "pointer"
+    });
+    return styles;
+  };
+  var multiValueLabelStyles = function multiValueLabelStyles(base) {
+    var styles = _extends({}, base, {
+      color: COLORS.blackText,
+      fontWeight: "400",
+      fontSize: "13px",
+      padding: 0
+    });
+    return styles;
   };
-};
-
-var Login = function Login(props) {
-  var onNavigate = props.onNavigate,
-    role = props.role,
-    hiddenSignup = props.hiddenSignup,
-    trackEvent = props.trackEvent;
-  var _useLogin = useLogin(onNavigate, trackEvent),
-    defaultInfo = _useLogin.defaultInfo,
-    email = _useLogin.email,
-    setEmail = _useLogin.setEmail,
-    loginWithEmail = _useLogin.loginWithEmail,
-    code = _useLogin.code,
-    setCode = _useLogin.setCode,
-    isScreenCode = _useLogin.isScreenCode,
-    formatTime = _useLogin.formatTime,
-    loginWithEmailCode = _useLogin.loginWithEmailCode;
   return React__default.createElement("div", {
-    className: styleGlobal["signup_wrap"] + " container-fluid font-family-lato"
-  }, React__default.createElement(BlockLogin, {
-    defaultInfo: defaultInfo,
-    email: email,
-    hiddenSignup: hiddenSignup,
-    setEmail: setEmail,
-    loginWithEmail: loginWithEmail,
-    code: code,
-    setCode: setCode,
-    formatTime: formatTime,
-    isScreenCode: isScreenCode,
-    onNavigate: onNavigate,
-    loginWithEmailCode: loginWithEmailCode,
-    role: role,
-    trackEvent: trackEvent
-  }));
-};
-
-// src/utils/formatProdErrorMessage.ts
-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. `;
-}
-
-// src/utils/actionTypes.ts
-var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
-var ActionTypes = {
-  INIT: `@@redux/INIT${/* @__PURE__ */ randomString()}`,
-  REPLACE: `@@redux/REPLACE${/* @__PURE__ */ randomString()}`,
-  PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`
-};
-var actionTypes_default = ActionTypes;
-
-// src/utils/isPlainObject.ts
-function isPlainObject(obj) {
-  if (typeof obj !== "object" || obj === null)
-    return false;
-  let proto = obj;
-  while (Object.getPrototypeOf(proto) !== null) {
-    proto = Object.getPrototypeOf(proto);
-  }
-  return Object.getPrototypeOf(obj) === proto || Object.getPrototypeOf(obj) === null;
-}
-
-// src/utils/kindOf.ts
-function miniKindOf(val) {
-  if (val === void 0)
-    return "undefined";
-  if (val === null)
-    return "null";
-  const type = typeof val;
-  switch (type) {
-    case "boolean":
-    case "string":
-    case "number":
-    case "symbol":
-    case "function": {
-      return type;
+    className: "" + styles$3["core-select"],
+    style: {
+      width: width != null ? width : "100%"
     }
-  }
-  if (Array.isArray(val))
-    return "array";
-  if (isDate(val))
-    return "date";
-  if (isError(val))
-    return "error";
-  const constructorName = ctorName(val);
-  switch (constructorName) {
-    case "Symbol":
-    case "Promise":
-    case "WeakMap":
-    case "WeakSet":
-    case "Map":
-    case "Set":
-      return constructorName;
-  }
-  return Object.prototype.toString.call(val).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) {
-  let typeOfVal = typeof val;
-  if (process.env.NODE_ENV !== "production") {
-    typeOfVal = miniKindOf(val);
-  }
-  return typeOfVal;
-}
-
-// src/utils/warning.ts
-function warning(message) {
-  if (typeof console !== "undefined" && typeof console.error === "function") {
-    console.error(message);
-  }
-  try {
-    throw new Error(message);
-  } catch (e) {
-  }
-}
-
-// src/combineReducers.ts
-function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
-  const reducerKeys = Object.keys(reducers);
-  const argumentName = action && action.type === actionTypes_default.INIT ? "preloadedState argument passed to createStore" : "previous state received by the reducer";
-  if (reducerKeys.length === 0) {
-    return "Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.";
-  }
-  if (!isPlainObject(inputState)) {
-    return `The ${argumentName} has unexpected type of "${kindOf(inputState)}". Expected argument to be an object with the following keys: "${reducerKeys.join('", "')}"`;
-  }
-  const unexpectedKeys = Object.keys(inputState).filter((key) => !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key]);
-  unexpectedKeys.forEach((key) => {
-    unexpectedKeyCache[key] = true;
-  });
-  if (action && action.type === actionTypes_default.REPLACE)
-    return;
-  if (unexpectedKeys.length > 0) {
-    return `Unexpected ${unexpectedKeys.length > 1 ? "keys" : "key"} "${unexpectedKeys.join('", "')}" found in ${argumentName}. Expected to find one of the known reducer keys instead: "${reducerKeys.join('", "')}". Unexpected keys will be ignored.`;
-  }
-}
-function assertReducerShape(reducers) {
-  Object.keys(reducers).forEach((key) => {
-    const reducer = reducers[key];
-    const initialState = reducer(void 0, {
-      type: actionTypes_default.INIT
-    });
-    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.`);
-    }
-    if (typeof reducer(void 0, {
-      type: actionTypes_default.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_default.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.`);
-    }
-  });
-}
-function combineReducers(reducers) {
-  const reducerKeys = Object.keys(reducers);
-  const finalReducers = {};
-  for (let i = 0; i < reducerKeys.length; i++) {
-    const key = reducerKeys[i];
-    if (process.env.NODE_ENV !== "production") {
-      if (typeof reducers[key] === "undefined") {
-        warning(`No reducer provided for key "${key}"`);
-      }
-    }
-    if (typeof reducers[key] === "function") {
-      finalReducers[key] = reducers[key];
-    }
-  }
-  const finalReducerKeys = Object.keys(finalReducers);
-  let unexpectedKeyCache;
-  if (process.env.NODE_ENV !== "production") {
-    unexpectedKeyCache = {};
-  }
-  let shapeAssertionError;
-  try {
-    assertReducerShape(finalReducers);
-  } catch (e) {
-    shapeAssertionError = e;
-  }
-  return function combination(state = {}, action) {
-    if (shapeAssertionError) {
-      throw shapeAssertionError;
-    }
-    if (process.env.NODE_ENV !== "production") {
-      const warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);
-      if (warningMessage) {
-        warning(warningMessage);
-      }
-    }
-    let hasChanged = false;
-    const nextState = {};
-    for (let i = 0; i < finalReducerKeys.length; i++) {
-      const key = finalReducerKeys[i];
-      const reducer = finalReducers[key];
-      const previousStateForKey = state[key];
-      const nextStateForKey = reducer(previousStateForKey, action);
-      if (typeof nextStateForKey === "undefined") {
-        const 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.`);
-      }
-      nextState[key] = nextStateForKey;
-      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
-    }
-    hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length;
-    return hasChanged ? nextState : state;
-  };
-}
-
-var initialState = {
-  isLoading: false,
-  isLoadingPage: false,
-  alert: {
-    type: "",
-    message: ""
-  },
-  user: null,
-  academy: null,
-  menuCollapse: false,
-  isRefetchSidebar: false
-};
-var commonReducer = toolkit.createReducer(initialState, function (builder) {
-  builder.addCase(setLoading, function (state, action) {
-    state.isLoading = action.payload;
-  }).addCase(setLoadingPage, function (state, action) {
-    state.isLoadingPage = action.payload;
-  }).addCase(setAlert, function (state, action) {
-    state.alert = action.payload;
-  }).addCase(setUser, function (state, action) {
-    state.user = action.payload;
-  }).addCase(setLanguage, function (state, action) {
-    state.language = action.payload;
-  }).addCase(reset, function (_state, _action) {
-    return initialState;
-  }).addCase(setMenuCollapse, function (state, action) {
-    state.menuCollapse = action.payload;
-  }).addCase(setIsRefetchSidebar, function (state) {
-    state.isRefetchSidebar = !state.isRefetchSidebar;
-  }).addCase(setTenant, function (state, action) {
-    state.user.currentTenantId = action.payload;
-  }).addCase(setAddTenant, function (state, action) {
-    state.user.tenantInfo = action.payload;
-  }).addCase(setTeam, function (state, action) {
-    state.user.currentTeamId = action.payload;
-  });
-});
-
-var rootReducer = combineReducers({
-  common: commonReducer
-});
-
-var store = toolkit.configureStore({
-  reducer: rootReducer,
-  middleware: function middleware(getDefaultMiddleware) {
-    return getDefaultMiddleware({
-      serializableCheck: false
-    });
-  }
-});
-
-var getAccessToken$1 = (function () {
-  try {
-    return localStorage.getItem(ACCESS_TOKEN);
-  } catch (err) {
-    return null;
-  }
-});
-
-var encodeParams$1 = (function (params) {
-  return Object.keys(params).filter(function (key) {
-    return params[key] || params[key] === 0 || params[key] === false;
-  }).map(function (key) {
-    if (Array.isArray(params[key])) {
-      return params[key].map(function (i) {
-        return encodeURIComponent(key) + "=" + encodeURIComponent(i);
-      }).join('&');
-    }
-    return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
-  }).join('&');
-});
-
-var api$1 = axios.create({
-  baseURL: BASE_URL,
-  timeout: 0,
-  headers: {
-    "Content-Type": "application/json"
-  },
-  paramsSerializer: function paramsSerializer(params) {
-    return encodeParams$1(params);
-  }
-});
-var apiUpload$1 = axios.create({
-  baseURL: BASE_URL,
-  timeout: 60000,
-  headers: {
-    "Content-Type": "multipart/form-data"
-  }
-});
-[api$1, apiUpload$1].forEach(function (i) {
-  return i.interceptors.request.use(function (config) {
-    var token = getAccessToken$1();
-    if (token) {
-      config.headers.Authorization = "Bearer " + token;
-    }
-    return config;
-  }, function (error) {
-    return Promise.reject(error);
-  });
-});
-[api$1, apiUpload$1].forEach(function (i) {
-  return i.interceptors.response.use(function (response) {
-    return response;
-  }, function (error) {
-    if (error.response.status === 401) {
-      window.location.href = "/login";
-    }
-    if (error.response.status == 403) {
-      var hostname = window.location.hostname;
-      var parts = hostname.split('.');
-      var domain = parts.slice(-2).join('.');
-      localStorage.removeItem(ACCESS_TOKEN);
-      localStorage.removeItem(ORGANIZATION_TENANT);
-      localStorage.removeItem(ORGANIZATION_TEAM);
-      Cookies.remove('auth', {
-        path: '/',
-        domain: "." + domain
-      });
-      localStorage.removeItem("USER_EMAIL");
-      window.location.href = "/login";
-    }
-    return Promise.reject(error);
-  });
-});
-
-var AUTH_URL = BASE_URL + "/api/auth";
-var checkToken = function checkToken(token) {
-  return api$1.post(AUTH_URL + "/checktoken", {
-    token: token
-  });
-};
-
-var firstCheckToken = function firstCheckToken() {
-  return Promise.resolve(_catch(function () {
-    var token = getAccessToken$1();
-    return token ? Promise.resolve(checkToken(token)).then(function (tokenStatus) {
-      return tokenStatus.data ? true : false;
-    }) : false;
-  }, function () {
-    return false;
+  }, label && React__default.createElement("span", {
+    className: styles$3["label"]
+  }, label), React__default.createElement(ReactSelect__default, {
+    name: name,
+    value: options.filter(function (i) {
+      return value && (isMulti ? value.includes(i.value) : i.value === value);
+    }),
+    onChange: handleChange,
+    placeholder: placeholder,
+    isDisabled: disabled,
+    isMulti: isMulti,
+    closeMenuOnSelect: closeMenuOnSelect,
+    hideSelectedOptions: hideSelectedOptions,
+    options: options,
+    components: isMulti ? {
+      Option: Option
+    } : undefined,
+    styles: {
+      control: controlStyle,
+      input: inputStyles,
+      placeholder: placeholderStyles,
+      dropdownIndicator: dropdownIndicatorStyles,
+      indicatorSeparator: function indicatorSeparator() {
+        return {
+          display: "none"
+        };
+      },
+      indicatorsContainer: indicatorsContainerStyles,
+      valueContainer: valueContainerStyles,
+      singleValue: singleValueStyles,
+      option: optionStyles,
+      multiValue: multiValueStyles,
+      multiValueRemove: multiValueRemoveStyles,
+      multiValueLabel: multiValueLabelStyles
+    }
+  }), error && React__default.createElement(CoreError, {
+    message: errorMessage
   }));
 };
 
-var getImageUrl = function getImageUrl(imageUrl) {
-  try {
-    if (!!imageUrl) {
-      var imageTrimmed = imageUrl.trim();
-      if (imageTrimmed.startsWith('http://') || imageTrimmed.startsWith('https://')) {
-        return imageTrimmed;
-      }
-      return BASE_URL + "/images/" + imageTrimmed;
-    }
-    return "/images/avatar-default.png";
-  } catch (err) {
-    return "/images/avatar-default.png";
-  }
-};
+var styles$4 = {"core-checkbox":"_3HY4f"};
 
-var NotFound = function NotFound() {
+var CoreInput$1 = function CoreInput(props) {
+  var name = props.name,
+    checked = props.checked,
+    _onChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    label = props.label;
   return React__default.createElement("div", {
-    className: "not-found"
-  }, React__default.createElement("div", {
-    className: "clearfix"
-  }, React__default.createElement("h1", {
-    className: "float-left display-3 mr-4"
-  }, "404"), React__default.createElement("div", {
-    className: "float-left"
-  }, React__default.createElement("h4", {
-    className: "pt-3"
-  }, "Oops! You are lost."), React__default.createElement("p", {
-    className: "text-muted mb-2"
-  }, "The page you are looking for was not found."), React__default.createElement("div", null))));
+    className: "" + styles$4["core-checkbox"]
+  }, React__default.createElement(reactstrap.FormGroup, {
+    check: true,
+    inline: true
+  }, React__default.createElement(reactstrap.Input, {
+    id: "core-checkbox-" + name,
+    type: "checkbox",
+    name: name,
+    checked: checked,
+    onChange: function onChange(e) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(name, e.target.checked);
+    },
+    disabled: disabled
+  }), React__default.createElement(reactstrap.Label, {
+    htmlFor: "core-checkbox-" + name,
+    check: true
+  }, label)));
 };
 
-var loadingStyle = {
-  minWidth: "100vw",
-  minHeight: "100vh",
-  position: "fixed",
-  top: 0,
-  left: 0,
-  zIndex: 999999999,
-  backgroundColor: "rgba(0, 0, 0, 0.4)",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-};
-var Loading = function Loading() {
-  var isLoading = reactRedux.useSelector(function (state) {
-    return state.common.isLoading;
-  });
-  localStorage.setItem("LAST_TIME_REQUETST", moment().utc().format("YYYY-MM-DD HH:mm:ss"));
-  return isLoading ? React__default.createElement("div", {
-    style: loadingStyle
-  }, React__default.createElement("div", {
-    className: "spinner-border text-secondary",
-    role: "status"
-  }, React__default.createElement("span", {
-    className: "sr-only"
-  }))) : null;
+var styles$5 = {"core-radio":"_kvUpe","form-check":"_3ToPe"};
+
+var CoreRadio = function CoreRadio(props) {
+  var name = props.name,
+    value = props.value,
+    options = props.options,
+    onChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+  return React__default.createElement("div", {
+    className: "" + styles$5["core-radio"]
+  }, React__default.createElement(reactstrap.FormGroup, {
+    check: true
+  }, options.map(function (i) {
+    return React__default.createElement("div", {
+      key: i.value
+    }, React__default.createElement(reactstrap.Input, {
+      id: "core-radio-" + i.value,
+      type: "radio",
+      checked: value === i.value,
+      onClick: function onClick() {
+        onChange(name, i.value);
+      },
+      onChange: function onChange() {
+        return;
+      },
+      disabled: disabled || i.disabled
+    }), React__default.createElement(reactstrap.Label, {
+      htmlFor: "core-radio-" + i.value
+    }, i.label));
+  })));
 };
 
-var useGoogleSignOut = function useGoogleSignOut(props) {
-  var dispatch = reactRedux.useDispatch();
-  var onLogoutSuccess = props.onLogoutSuccess,
-    onFailure = props.onFailure;
-  var handleLogoutSuccess = function handleLogoutSuccess() {
-    onLogoutSuccess === null || onLogoutSuccess === void 0 ? void 0 : onLogoutSuccess();
-  };
-  var handleLogoutFailure = function handleLogoutFailure() {
-    onFailure === null || onFailure === void 0 ? void 0 : onFailure();
-  };
-  var _useGoogleLogout = reactGoogleLogin.useGoogleLogout({
-      clientId: GOOGLE_CLIENT_ID,
-      onLogoutSuccess: handleLogoutSuccess,
-      onFailure: handleLogoutFailure
-    }),
-    signOut = _useGoogleLogout.signOut,
-    loaded = _useGoogleLogout.loaded;
-  var handleSignOut = function handleSignOut() {
-    localStorage.clear();
-    try {
-      signOut();
-    } catch (error) {
-      console.log({
-        error: error
-      });
+var styles$6 = {"core-modal-header":"_2y5ln"};
+
+var CoreModal = function CoreModal(props) {
+  var open = props.open,
+    onClose = props.onClose,
+    children = props.children,
+    title = props.title,
+    footer = props.footer,
+    handleSubmit = props.handleSubmit,
+    onSubmit = props.onSubmit,
+    _props$bodyPadding = props.bodyPadding,
+    bodyPadding = _props$bodyPadding === void 0 ? "24px" : _props$bodyPadding,
+    className = props.className;
+  return React__default.createElement(reactstrap.Modal, {
+    isOpen: open,
+    toggle: onClose,
+    centered: true,
+    modalClassName: className
+  }, React__default.createElement("form", {
+    onSubmit: onSubmit ? handleSubmit(onSubmit) : undefined,
+    className: "" + styles$6["core-modal-container"]
+  }, React__default.createElement(reactstrap.ModalHeader, {
+    toggle: onClose,
+    className: styles$6["core-modal-header"]
+  }, title), React__default.createElement(reactstrap.ModalBody, {
+    style: {
+      padding: bodyPadding
     }
-    dispatch(reset());
-    window.location.href = "/login";
-  };
-  return {
-    handleSignOut: handleSignOut,
-    loaded: loaded
-  };
+  }, children), footer && React__default.createElement(reactstrap.ModalFooter, null, footer)));
 };
 
-var LayoutContext = function LayoutContext(_ref) {
-  var children = _ref.children,
-    onNavigate = _ref.onNavigate;
-  var _useGoogleSignOut = useGoogleSignOut({
-      onNavigate: onNavigate
-    }),
-    handleSignOut = _useGoogleSignOut.handleSignOut;
-  var resetAuth = function resetAuth() {
-    handleSignOut();
-  };
-  var loadInfo = function loadInfo() {
-    try {
-      var token = firstCheckToken();
-      !token && resetAuth();
-      return Promise.resolve();
-    } catch (e) {
-      return Promise.reject(e);
+var styles$7 = {"core-range":"_1dzD7"};
+
+var CoreRange = function CoreRange(props) {
+  var name = props.name,
+    value = props.value,
+    _onChange = props.onChange,
+    label = props.label,
+    width = props.width,
+    min = props.min,
+    max = props.max,
+    step = props.step;
+  return React__default.createElement("div", {
+    className: "" + styles$7["core-range"],
+    style: {
+      width: width != null ? width : "100%"
     }
-  };
-  React.useEffect(function () {
-    loadInfo();
-  }, []);
-  return React__default.createElement(React.Fragment, null, children);
+  }, label && React__default.createElement("label", null, label), React__default.createElement("input", {
+    type: "range",
+    name: name,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(name, +e.target.value);
+    },
+    min: min,
+    max: max,
+    step: step
+  }));
+};
+
+var styles$8 = {"editor":"_3TUh3","label":"_15n2K","optional":"_1fHZB","icon":"_38AfS","error":"_DaofN","no-border":"_2JOcF","small-height":"_1EXev"};
+
+var Search = function Search(props) {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 16 : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? "#A6A6AD" : _props$color;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.40376 9.40352C9.63808 9.1692 10.018 9.1692 10.2523 9.40352L13.4243 12.5755C13.6586 12.8098 13.6586 13.1897 13.4243 13.424C13.19 13.6584 12.8101 13.6584 12.5758 13.424L9.40376 10.252C9.16945 10.0177 9.16945 9.63783 9.40376 9.40352Z",
+    fill: color
+  }), React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.9999 3.5999C5.12213 3.5999 3.5999 5.12213 3.5999 6.9999C3.5999 8.87767 5.12213 10.3999 6.9999 10.3999C8.87767 10.3999 10.3999 8.87767 10.3999 6.9999C10.3999 5.12213 8.87767 3.5999 6.9999 3.5999ZM2.3999 6.9999C2.3999 4.45939 4.45939 2.3999 6.9999 2.3999C9.54041 2.3999 11.5999 4.45939 11.5999 6.9999C11.5999 9.54041 9.54041 11.5999 6.9999 11.5999C4.45939 11.5999 2.3999 9.54041 2.3999 6.9999Z",
+    fill: color
+  }));
 };
 
-var ConfirmDialog = function ConfirmDialog(_ref) {
-  var open = _ref.open,
-    text = _ref.text,
-    _ref$cancelText = _ref.cancelText,
-    cancelText = _ref$cancelText === void 0 ? "No" : _ref$cancelText,
-    _ref$okText = _ref.okText,
-    okText = _ref$okText === void 0 ? "Yes" : _ref$okText,
-    isDelete = _ref.isDelete,
-    toggle = _ref.toggle,
-    onClose = _ref.onClose,
-    onConfirm = _ref.onConfirm;
-  return React__default.createElement(reactstrap.Modal, {
-    isOpen: open,
-    toggle: !!onClose ? onClose : toggle,
-    centered: true
-  }, React__default.createElement(reactstrap.ModalHeader, {
-    toggle: toggle
-  }, "Confirmation"), React__default.createElement(reactstrap.ModalBody, null, text), React__default.createElement(reactstrap.ModalFooter, null, React__default.createElement(reactstrap.Button, {
-    color: "secondary",
-    onClick: toggle
-  }, cancelText), React__default.createElement(reactstrap.Button, {
-    color: isDelete ? "danger" : "primary",
-    onClick: onConfirm
-  }, okText)));
+var Close = function Close(props) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? "#A6A6AD" : _props$color,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 16 : _props$size;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("g", {
+    clipPath: "url(#clip0_1060_48455)"
+  }, React__default.createElement("rect", {
+    x: "2.48438",
+    y: "3.61597",
+    width: "1.6",
+    height: "14",
+    rx: "0.8",
+    transform: "rotate(-45 2.48438 3.61597)",
+    fill: color
+  }), React__default.createElement("rect", {
+    x: "12.2427",
+    y: "2.34326",
+    width: "1.6",
+    height: "14",
+    rx: "0.8",
+    transform: "rotate(45 12.2427 2.34326)",
+    fill: color
+  })), React__default.createElement("defs", null, React__default.createElement("clipPath", {
+    id: "clip0_1060_48455"
+  }, React__default.createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  }))));
 };
 
-var CommonDialog = function CommonDialog(_ref) {
-  var open = _ref.open,
-    children = _ref.children,
-    centered = _ref.centered,
-    title = _ref.title,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "xs" : _ref$size,
-    _ref$isShowHeader = _ref.isShowHeader,
-    isShowHeader = _ref$isShowHeader === void 0 ? true : _ref$isShowHeader,
-    onClose = _ref.onClose,
-    backdrop = _ref.backdrop;
-  return React__default.createElement(reactstrap.Modal, {
-    backdrop: backdrop,
-    isOpen: open,
-    toggle: onClose,
-    centered: centered,
-    size: size,
-    zIndex: 1102
-  }, isShowHeader ? React__default.createElement(reactstrap.ModalHeader, {
-    toggle: onClose
-  }, title) : React__default.createElement(material.Box, {
-    className: "p-3"
-  }, React__default.createElement(material.Typography, {
-    className: "fs-5 text-center fw-bold"
-  }, title)), children);
+var Info = function Info() {
+  return React__default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.0002 2.1002C3.84628 2.1002 2.1002 3.84628 2.1002 6.0002C2.1002 8.15411 3.84628 9.9002 6.0002 9.9002C8.15411 9.9002 9.9002 8.15411 9.9002 6.0002C9.9002 3.84628 8.15411 2.1002 6.0002 2.1002ZM1.2002 6.0002C1.2002 3.34923 3.34923 1.2002 6.0002 1.2002C8.65116 1.2002 10.8002 3.34923 10.8002 6.0002C10.8002 8.65116 8.65116 10.8002 6.0002 10.8002C3.34923 10.8002 1.2002 8.65116 1.2002 6.0002Z",
+    fill: "#A6A6AD"
+  }), React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.9998 5.1001C6.24833 5.1001 6.4498 5.30157 6.4498 5.5501V8.2915C6.4498 8.54003 6.24833 8.7415 5.9998 8.7415C5.75128 8.7415 5.5498 8.54003 5.5498 8.2915V5.5501C5.5498 5.30157 5.75128 5.1001 5.9998 5.1001Z",
+    fill: "#A6A6AD"
+  }), React__default.createElement("path", {
+    d: "M5.9999 4.6502C5.6687 4.6502 5.3999 4.3808 5.3999 4.0502C5.3999 3.7196 5.6687 3.4502 5.9999 3.4502C6.3311 3.4502 6.5999 3.7196 6.5999 4.0502C6.5999 4.3808 6.3311 4.6502 5.9999 4.6502Z",
+    fill: "#A6A6AD"
+  }));
 };
 
-var AuthenticationMessage;
-(function (AuthenticationMessage) {
-  AuthenticationMessage["NotAllowedToRegister"] = "NotAllowedToRegister";
-  AuthenticationMessage["InvalidGoogleToken"] = "InvalidGoogleToken";
-})(AuthenticationMessage || (AuthenticationMessage = {}));
-(function (Role) {
-  Role["Student"] = "Student";
-  Role["Teacher"] = "Teacher";
-  Role["Admin"] = "Admin";
-})(exports.Role || (exports.Role = {}));
-
-var CustomPagination = function CustomPagination(_ref) {
-  var currentPage = _ref.currentPage,
-    totalPage = _ref.totalPage,
-    onChangePage = _ref.onChangePage;
-  return React__default.createElement(reactstrap.Pagination, {
-    className: "w-fit"
-  }, React__default.createElement(reactstrap.PaginationItem, {
-    disabled: currentPage <= 1
-  }, React__default.createElement(reactstrap.PaginationLink, {
-    onClick: function onClick(e) {
-      e.preventDefault();
-      onChangePage(currentPage - 1);
-    },
-    previous: true,
-    href: "#"
-  })), React__default.createElement(reactstrap.PaginationItem, {
-    active: 1 === currentPage,
-    key: 1
-  }, React__default.createElement(reactstrap.PaginationLink, {
-    onClick: function onClick(e) {
-      e.preventDefault();
-      onChangePage(1);
-    },
-    href: "#"
-  }, 1)), totalPage > 2 && React__default.createElement(reactstrap.PaginationItem, {
-    active: 2 === currentPage,
-    key: 1
-  }, React__default.createElement(reactstrap.PaginationLink, {
-    onClick: function onClick(e) {
-      e.preventDefault();
-      onChangePage(2);
-    },
-    href: "#"
-  }, 2)), currentPage > 4 && currentPage !== totalPage && totalPage !== 5 && React__default.createElement(reactstrap.PaginationItem, {
-    disabled: true,
-    key: "first"
-  }, React__default.createElement(reactstrap.PaginationLink, {
-    href: "#"
-  }, "...")), (currentPage === 1 || currentPage === totalPage) && totalPage === 5 && React__default.createElement(reactstrap.PaginationItem, {
-    key: 3
-  }, React__default.createElement(reactstrap.PaginationLink, {
-    onClick: function onClick(e) {
-      e.preventDefault();
-      onChangePage(3);
-    },
-    href: "#"
-  }, "3")), [currentPage - 1, currentPage, currentPage + 1].filter(function (page) {
-    return page > 2 && page < totalPage - 1;
-  }).map(function (page) {
-    return React__default.createElement(reactstrap.PaginationItem, {
-      active: page === currentPage,
-      key: page
-    }, React__default.createElement(reactstrap.PaginationLink, {
-      onClick: function onClick(e) {
-        e.preventDefault();
-        onChangePage(page);
-      },
-      href: "#"
-    }, page));
-  }), totalPage - currentPage > 4 && React__default.createElement(reactstrap.PaginationItem, {
-    disabled: true,
-    key: "last"
-  }, React__default.createElement(reactstrap.PaginationLink, {
-    href: "#"
-  }, "...")), totalPage > 3 && React__default.createElement(reactstrap.PaginationItem, {
-    active: totalPage - 1 === currentPage,
-    key: totalPage - 1
-  }, React__default.createElement(reactstrap.PaginationLink, {
-    onClick: function onClick(e) {
-      e.preventDefault();
-      onChangePage(totalPage - 1);
+var _excluded$1 = ["name", "value", "onChange", "placeholder", "error", "label", "isOptional", "tooltip", "noBorder", "smallHeight", "cols", "rows", "minHeight", "className", "onKeyDown", "onKeyFocus", "autoResize", "width", "onClick", "onBlur", "isDisabled"];
+var CoreTextArea = function CoreTextArea(props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
+    value = props.value,
+    _onChange = props.onChange,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Type here..." : _props$placeholder,
+    _props$error = props.error,
+    error = _props$error === void 0 ? false : _props$error,
+    label = props.label,
+    _props$isOptional = props.isOptional,
+    isOptional = _props$isOptional === void 0 ? false : _props$isOptional,
+    tooltip = props.tooltip,
+    _props$noBorder = props.noBorder,
+    noBorder = _props$noBorder === void 0 ? false : _props$noBorder,
+    _props$smallHeight = props.smallHeight,
+    smallHeight = _props$smallHeight === void 0 ? false : _props$smallHeight,
+    cols = props.cols,
+    rows = props.rows,
+    minHeight = props.minHeight,
+    className = props.className,
+    _onKeyDown = props.onKeyDown,
+    onKeyFocus = props.onKeyFocus,
+    autoResize = props.autoResize,
+    width = props.width,
+    onClick = props.onClick,
+    onBlur = props.onBlur,
+    isDisabled = props.isDisabled,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$1);
+  var _useState = React.useState(false),
+    isOpenTooltip = _useState[0],
+    setIsOpenTooltip = _useState[1];
+  var toggleTooltip = function toggleTooltip() {
+    return setIsOpenTooltip(!isOpenTooltip);
+  };
+  var textareaRef = React.useRef(null);
+  React.useEffect(function () {
+    if (autoResize && textareaRef.current) {
+      var el = textareaRef.current;
+      requestAnimationFrame(function () {
+        el.style.height = "auto";
+        el.style.height = el.scrollHeight + "px";
+      });
+    }
+  }, [value, autoResize]);
+  return React__default.createElement("div", {
+    className: styles$8["editor"] + " " + (error ? styles$8["error"] : "") + " " + (noBorder ? styles$8["no-border"] : "") + " " + (smallHeight ? styles$8["small-height"] : ""),
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, label && React__default.createElement("span", {
+    className: styles$8["label"]
+  }, React__default.createElement("div", {
+    className: styles$8["label-content"]
+  }, label), isOptional && React__default.createElement("div", {
+    className: styles$8["optional"]
+  }, "(optional)"), tooltip && React__default.createElement("div", {
+    id: name,
+    className: styles$8["icon"]
+  }, React__default.createElement(Info, null), React__default.createElement(reactstrap.Tooltip, {
+    target: name,
+    isOpen: isOpenTooltip,
+    toggle: toggleTooltip
+  }, tooltip))), React__default.createElement("textarea", Object.assign({
+    ref: textareaRef,
+    placeholder: placeholder,
+    style: {
+      whiteSpace: "pre-wrap",
+      width: "100%",
+      minHeight: minHeight ? minHeight : "123px",
+      resize: "none",
+      overflow: "hidden"
     },
-    href: "#"
-  }, totalPage - 1)), totalPage > 1 && React__default.createElement(reactstrap.PaginationItem, {
-    active: totalPage === currentPage,
-    key: totalPage
-  }, React__default.createElement(reactstrap.PaginationLink, {
-    onClick: function onClick(e) {
-      e.preventDefault();
-      onChangePage(totalPage);
+    value: value,
+    cols: cols,
+    rows: rows,
+    onChange: function onChange(e) {
+      return _onChange(name, e.target.value);
     },
-    href: "#"
-  }, totalPage)), React__default.createElement(reactstrap.PaginationItem, {
-    disabled: currentPage >= totalPage
-  }, React__default.createElement(reactstrap.PaginationLink, {
-    onClick: function onClick(e) {
-      e.preventDefault();
-      onChangePage(currentPage + 1);
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
     },
-    next: true,
-    href: "#"
-  })));
+    onFocus: function onFocus(e) {
+      return onKeyFocus === null || onKeyFocus === void 0 ? void 0 : onKeyFocus(name, e.target.value);
+    },
+    className: className,
+    onClick: onClick,
+    onBlur: onBlur,
+    disabled: isDisabled
+  }, rest)));
 };
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
+var styles$9 = {"core-search":"_wyI1K","input":"_9XW-D","icon":"_2iDm7","clear":"_1nhXy"};
 
-var useAmplitude = function useAmplitude() {
-  var _useState = React.useState(null),
-    userId = _useState[0],
-    setUserIdState = _useState[1];
-  var _useState2 = React.useState(true),
-    isTabActive = _useState2[0],
-    setIsTabActive = _useState2[1];
-  var sessionStartTime = React.useRef(null);
-  var currentSessionStart = React.useRef(null);
-  var savedUserProperties = React.useRef({});
-  var hasTrackedInitialSession = React.useRef(false);
-  var setUserProperties = React.useCallback(function (properties) {
-    savedUserProperties.current = _extends({}, savedUserProperties.current, properties);
-    var identify = new amplitude.Identify();
-    Object.entries(properties).forEach(function (_ref) {
-      var key = _ref[0],
-        value = _ref[1];
-      identify.set(key, value);
-    });
-    amplitude.identify(identify);
-  }, []);
-  var trackEvent = React.useCallback(function (_ref2) {
-    var eventName = _ref2.eventName,
-      eventProperties = _ref2.eventProperties;
-    amplitude.track(eventName, _extends({}, savedUserProperties.current, eventProperties, {
-      timestamp: new Date().toISOString()
-    }));
-  }, []);
-  var setUserId = React.useCallback(function (newUserId) {
-    var prevUserId = userId;
-    setUserIdState(newUserId);
-    if (newUserId) {
-      var prefixedUserId = "edusfere:" + newUserId;
-      amplitude.setUserId(prefixedUserId);
-      if (prevUserId !== newUserId && !hasTrackedInitialSession.current) {
-        hasTrackedInitialSession.current = true;
-        sessionStartTime.current = new Date();
-        currentSessionStart.current = new Date();
-        trackEvent({
-          eventName: exports.AmplitudeEvent.SESSION_START,
-          eventProperties: {
-            start_time: new Date().toISOString()
-          }
-        });
+var CoreSearch = function CoreSearch(props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
+    value = props.value,
+    _onChange = props.onChange,
+    width = props.width,
+    onPressEnter = props.onPressEnter,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Search..." : _props$placeholder;
+  var handleClear = function handleClear() {
+    _onChange(name, "");
+    onPressEnter && onPressEnter("");
+  };
+  return React__default.createElement("div", {
+    className: styles$9["core-search"],
+    style: {
+      width: width != null ? width : "100%"
+    },
+    tabIndex: 1
+  }, React__default.createElement("div", {
+    className: styles$9["icon"]
+  }, React__default.createElement(Search, null)), React__default.createElement("input", {
+    className: styles$9["input"],
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(name, e.target.value);
+    },
+    placeholder: placeholder,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter") {
+        onPressEnter && onPressEnter(value);
       }
     }
-  }, [userId, trackEvent]);
-  var reset = React.useCallback(function () {
-    amplitude.reset();
-    setUserIdState(null);
-    sessionStartTime.current = null;
-    currentSessionStart.current = null;
-    savedUserProperties.current = {};
-    hasTrackedInitialSession.current = false;
-  }, []);
-  var trackTabActivity = React.useCallback(function (isActive) {
-    if (!userId) return;
-    var now = new Date();
-    if (isActive) {
-      currentSessionStart.current = now;
-      trackEvent({
-        eventName: exports.AmplitudeEvent.SESSION_START,
-        eventProperties: {
-          start_time: now.toISOString()
-        }
-      });
-    } else {
-      if (currentSessionStart.current) {
-        var sessionDuration = now.getTime() - currentSessionStart.current.getTime();
-        trackEvent({
-          eventName: exports.AmplitudeEvent.SESSION_END,
-          eventProperties: {
-            session_duration_seconds: Math.round(sessionDuration / 1000),
-            start_time: currentSessionStart.current.toISOString(),
-            end_time: now.toISOString()
-          }
-        });
-        currentSessionStart.current = null;
+  }), value.length ? React__default.createElement("div", {
+    className: styles$9["clear"],
+    onClick: handleClear
+  }, React__default.createElement(Close, null)) : null);
+};
+
+var styles$a = {"core-select-compact":"_3ql5D","label":"_3fPQC"};
+
+var Option$1 = function Option(props) {
+  return React__default.createElement("div", null, React__default.createElement(ReactSelect.components.Option, Object.assign({}, props), React__default.createElement(CoreInput$1, {
+    checked: props.isSelected,
+    onChange: function onChange() {
+      return null;
+    },
+    name: "",
+    label: props.label
+  })));
+};
+var CoreSelectCompact = function CoreSelectCompact(props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
+    options = props.options,
+    value = props.value,
+    onChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    label = props.label,
+    width = props.width,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Select" : _props$placeholder,
+    _props$isMulti = props.isMulti,
+    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
+    _props$isShowDropdown = props.isShowDropdown,
+    isShowDropdown = _props$isShowDropdown === void 0 ? false : _props$isShowDropdown,
+    _props$error = props.error,
+    error = _props$error === void 0 ? false : _props$error,
+    _noOptionsMessage = props.noOptionsMessage;
+  var handleChange = function handleChange(value) {
+    var newValue = isMulti ? value === null || value === void 0 ? void 0 : value.map(function (item) {
+      return item.value;
+    }) : value === null || value === void 0 ? void 0 : value.value;
+    onChange(name, newValue);
+  };
+  var controlStyle = function controlStyle(base, state) {
+    var styles = _extends({}, base, {
+      fontSize: "14px",
+      fontWeight: "400",
+      padding: "0",
+      backgroundColor: state.isDisabled ? "transparent" : error ? COLORS.lightYellow : COLORS.white,
+      border: "none",
+      height: isMulti ? undefined : "26px",
+      minHeight: "26px",
+      boxShadow: "none",
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: COLORS.lightBlueHover
+      },
+      "&>div": {
+        padding: "0 2px"
       }
-    }
-  }, [userId, trackEvent]);
-  var trackPageUnload = React.useCallback(function () {
-    if (!userId || !currentSessionStart.current) return;
-    var now = new Date();
-    var sessionDuration = now.getTime() - currentSessionStart.current.getTime();
-    trackEvent({
-      eventName: exports.AmplitudeEvent.SESSION_END,
-      eventProperties: {
-        session_duration_seconds: Math.round(sessionDuration / 1000),
-        start_time: currentSessionStart.current.toISOString(),
-        end_time: now.toISOString(),
-        end_reason: 'page_unload'
+    });
+    return styles;
+  };
+  var inputStyles = function inputStyles(base) {
+    var styles = _extends({}, base, {
+      margin: "0",
+      padding: "0",
+      color: "inherit",
+      position: "relative",
+      top: "-2px"
+    });
+    return styles;
+  };
+  var placeholderStyles = function placeholderStyles(base) {
+    var styles = _extends({}, base, {
+      color: COLORS.lightGray
+    });
+    return styles;
+  };
+  var dropdownIndicatorStyles = function dropdownIndicatorStyles(base) {
+    var styles = _extends({}, base, {
+      position: "relative",
+      padding: "2px 0"
+    });
+    return styles;
+  };
+  var indicatorsContainerStyles = function indicatorsContainerStyles(base) {
+    var styles = _extends({}, base, {
+      display: isShowDropdown && !isMulti ? "block" : "none"
+    });
+    return styles;
+  };
+  var valueContainerStyles = function valueContainerStyles(base) {
+    var styles = _extends({}, base, {
+      height: isMulti ? undefined : "26px",
+      position: "relative"
+    });
+    return styles;
+  };
+  var singleValueStyles = function singleValueStyles(base) {
+    var styles = _extends({}, base);
+    return styles;
+  };
+  var optionStyles = function optionStyles(base, state) {
+    var styles = _extends({}, base, {
+      padding: "8px",
+      borderRadius: "8px",
+      cursor: "pointer",
+      fontSize: "14px",
+      fontWeight: 400,
+      color: COLORS.blackText,
+      backgroundColor: state.isSelected ? COLORS.lightBlueHover : "transparent",
+      "&:hover": {
+        backgroundColor: COLORS.lightBlueHover
       }
     });
-  }, [userId, trackEvent]);
-  React.useEffect(function () {
-    var handleVisibilityChange = function handleVisibilityChange() {
-      var isVisible = !document.hidden;
-      setIsTabActive(isVisible);
-      trackTabActivity(isVisible);
-    };
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    return function () {
-      return document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, [trackTabActivity]);
-  React.useEffect(function () {
-    var handleFocus = function handleFocus() {
-      setIsTabActive(true);
-      trackTabActivity(true);
-    };
-    var handleBlur = function handleBlur() {
-      setIsTabActive(false);
-      trackTabActivity(false);
-    };
-    window.addEventListener('focus', handleFocus);
-    window.addEventListener('blur', handleBlur);
-    return function () {
-      window.removeEventListener('focus', handleFocus);
-      window.removeEventListener('blur', handleBlur);
-    };
-  }, [trackTabActivity]);
-  React.useEffect(function () {
-    var handleBeforeUnload = function handleBeforeUnload() {
-      trackPageUnload();
-    };
-    window.addEventListener('beforeunload', handleBeforeUnload);
-    return function () {
-      return window.removeEventListener('beforeunload', handleBeforeUnload);
-    };
-  }, [trackPageUnload]);
-  return {
-    setUserId: setUserId,
-    setUserProperties: setUserProperties,
-    trackEvent: trackEvent,
-    reset: reset,
-    userId: userId,
-    isTabActive: isTabActive,
-    sessionStartTime: sessionStartTime.current,
-    currentSessionStart: currentSessionStart.current
+    return styles;
   };
-};
-
-var initializeAmplitude = function initializeAmplitude(apiKey) {
-  amplitude.init(apiKey, {
-    defaultTracking: {
-      pageViews: true,
-      sessions: true,
-      formInteractions: true
+  var multiValueStyles = function multiValueStyles(base) {
+    var styles = _extends({}, base, {
+      backgroundColor: COLORS.lightBlue,
+      borderRadius: "4px",
+      padding: "0 4px",
+      display: "flex",
+      alignItems: "center",
+      fontSize: "13px",
+      color: COLORS.blackText
+    });
+    return styles;
+  };
+  var multiValueRemoveStyles = function multiValueRemoveStyles(base) {
+    var styles = _extends({}, base, {
+      color: COLORS.lightGray,
+      cursor: "pointer"
+    });
+    return styles;
+  };
+  var multiValueLabelStyles = function multiValueLabelStyles(base) {
+    var styles = _extends({}, base, {
+      color: COLORS.blackText,
+      fontWeight: "400",
+      fontSize: "13px",
+      padding: 0
+    });
+    return styles;
+  };
+  return React__default.createElement("div", {
+    className: "" + styles$a["core-select-compact"],
+    style: {
+      width: width != null ? width : "100%"
     }
-  });
+  }, label && React__default.createElement("div", {
+    className: styles$a["label"]
+  }, React__default.createElement("label", null, label), React__default.createElement(Info, null)), React__default.createElement(ReactSelect__default, {
+    name: name,
+    value: options.filter(function (i) {
+      return value && (isMulti ? value.includes(i.value) : i.value === value);
+    }),
+    onChange: handleChange,
+    placeholder: placeholder,
+    isDisabled: disabled,
+    isMulti: isMulti,
+    closeMenuOnSelect: !isMulti,
+    hideSelectedOptions: false,
+    options: options,
+    noOptionsMessage: function noOptionsMessage() {
+      return _noOptionsMessage ? _noOptionsMessage : "No options";
+    },
+    components: isMulti ? {
+      Option: Option$1
+    } : undefined,
+    styles: {
+      control: controlStyle,
+      input: inputStyles,
+      placeholder: placeholderStyles,
+      dropdownIndicator: dropdownIndicatorStyles,
+      indicatorSeparator: function indicatorSeparator() {
+        return {
+          display: "none"
+        };
+      },
+      indicatorsContainer: indicatorsContainerStyles,
+      valueContainer: valueContainerStyles,
+      singleValue: singleValueStyles,
+      option: optionStyles,
+      multiValue: multiValueStyles,
+      multiValueRemove: multiValueRemoveStyles,
+      multiValueLabel: multiValueLabelStyles
+    }
+  }));
 };
 
-var styles = {"core-button":"_xvNBN","primary":"_U9Qyp","secondary":"_1VzMy","text":"_pZNuj","danger":"_2uYm1","light":"_wxH5S"};
+var styles$b = {"core-input-compact":"_1qmXW","label":"_1argp","icon":"_3DPRG"};
 
-var _excluded = ["type", "children", "onClick", "icon", "disabled", "htmlType"];
-var CoreButton = function CoreButton(props) {
-  var _props$type = props.type,
-    type = _props$type === void 0 ? "primary" : _props$type,
-    children = props.children,
-    onClick = props.onClick,
-    icon = props.icon,
+var _excluded$2 = ["name", "value", "onChange", "disabled", "label", "width", "placeholder", "error", "tooltip", "onKeyDown"];
+var CoreInputCompact = function CoreInputCompact(props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
+    value = props.value,
+    _onChange = props.onChange,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$htmlType = props.htmlType,
-    htmlType = _props$htmlType === void 0 ? "button" : _props$htmlType,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  return React__default.createElement("button", Object.assign({
-    className: styles["core-button"] + " " + styles[type],
-    onClick: onClick,
+    label = props.label,
+    width = props.width,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Type here" : _props$placeholder,
+    error = props.error,
+    tooltip = props.tooltip,
+    _onKeyDown = props.onKeyDown,
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2);
+  var _useState = React.useState(false),
+    isOpenTooltip = _useState[0],
+    setIsOpenTooltip = _useState[1];
+  var toggleTooltip = function toggleTooltip() {
+    return setIsOpenTooltip(!isOpenTooltip);
+  };
+  return React__default.createElement("div", {
+    className: "" + styles$b["core-input-compact"],
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, label && React__default.createElement("div", {
+    className: styles$b["label"]
+  }, React__default.createElement("label", null, label), tooltip ? React__default.createElement("div", {
+    id: name,
+    className: styles$b["icon"]
+  }, React__default.createElement(Info, null)) : null), React__default.createElement("input", Object.assign({
+    style: {
+      backgroundColor: error ? COLORS.lightYellow : "transparent"
+    },
+    name: name,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(name, e.target.value);
+    },
     disabled: disabled,
-    type: htmlType
-  }, rest), icon && icon, children);
+    placeholder: placeholder,
+    onKeyDown: function onKeyDown(e) {
+      _onKeyDown && _onKeyDown(e);
+    }
+  }, rest)), tooltip && React__default.createElement(reactstrap.Tooltip, {
+    target: name,
+    isOpen: isOpenTooltip,
+    toggle: toggleTooltip
+  }, tooltip));
 };
 
-var styles$1 = {"core-input":"_1WdX2","outline":"_3X2RJ","no-outline":"_bVYtv","error":"_n7n3Q"};
-
-var styles$2 = {"core-error":"_1Mmxr"};
-
-var CoreError = function CoreError(props) {
-  var message = props.message;
-  return React__default.createElement("div", {
-    className: "" + styles$2["core-error"]
-  }, React__default.createElement("p", null, message));
-};
+var styles$c = {"core-label-input":"_2YqZu","size-h1":"_23-uu","size-h2":"_16lQL"};
 
-var CoreInput = function CoreInput(props) {
-  var name = props.name,
+var CoreTitleInput = function CoreTitleInput(props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
     value = props.value,
     _onChange = props.onChange,
-    _props$type = props.type,
-    type = _props$type === void 0 ? "outline" : _props$type,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
-    label = props.label,
     width = props.width,
     _props$placeholder = props.placeholder,
     placeholder = _props$placeholder === void 0 ? "Type here" : _props$placeholder,
     error = props.error,
-    _props$errorMessage = props.errorMessage,
-    errorMessage = _props$errorMessage === void 0 ? "" : _props$errorMessage,
-    fontSize = props.fontSize,
-    fontWeight = props.fontWeight,
-    _onKeyDown = props.onKeyDown,
-    ref = props.ref,
-    maxLength = props.maxLength,
-    className = props.className,
-    onKeyFocus = props.onKeyFocus;
+    _props$size = props.size,
+    size = _props$size === void 0 ? "h1" : _props$size,
+    maxLength = props.maxLength;
   return React__default.createElement("div", {
-    className: styles$1["core-input"] + "  " + styles$1[type] + " " + (error ? styles$1["error"] : ""),
+    className: "" + styles$c["core-label-input"],
     style: {
       width: width != null ? width : "100%"
     }
-  }, label && React__default.createElement("label", null, label), React__default.createElement("input", Object.assign({
+  }, React__default.createElement("input", {
+    className: "" + styles$c["size-" + size],
     style: {
-      fontSize: fontSize,
-      fontWeight: fontWeight
+      backgroundColor: error ? COLORS.lightYellow : "transparent"
     },
     name: name,
     value: value,
@@ -1545,879 +1130,1407 @@ var CoreInput = function CoreInput(props) {
     },
     disabled: disabled,
     placeholder: placeholder,
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
-    },
-    onFocus: function onFocus(e) {
-      return onKeyFocus === null || onKeyFocus === void 0 ? void 0 : onKeyFocus(name, e.target.value);
-    }
-  }, ref, {
-    maxLength: maxLength,
-    className: className
-  })), error && React__default.createElement(CoreError, {
-    message: errorMessage
+    maxLength: maxLength
   }));
 };
 
-var styles$3 = {"core-select":"_2sg12","label":"_1-XBo"};
+var styles$d = {"core-tooltip":"_1Bmhs"};
 
-var Option = function Option(props) {
-  return React__default.createElement("div", null, React__default.createElement(ReactSelect.components.Option, Object.assign({}, props), React__default.createElement(CoreInput$1, {
-    checked: props.isSelected,
-    onChange: function onChange() {
-      return null;
-    },
-    name: "",
-    label: props.label
-  })));
-};
-var CoreSelect = function CoreSelect(props) {
-  var name = props.name,
-    options = props.options,
-    value = props.value,
-    onChange = props.onChange,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    label = props.label,
-    width = props.width,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "Select" : _props$placeholder,
-    error = props.error,
-    _props$errorMessage = props.errorMessage,
-    errorMessage = _props$errorMessage === void 0 ? "" : _props$errorMessage,
-    _props$type = props.type,
-    type = _props$type === void 0 ? "outline" : _props$type,
-    _props$isMulti = props.isMulti,
-    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
-    _props$closeMenuOnSel = props.closeMenuOnSelect,
-    closeMenuOnSelect = _props$closeMenuOnSel === void 0 ? true : _props$closeMenuOnSel,
-    _props$hideSelectedOp = props.hideSelectedOptions,
-    hideSelectedOptions = _props$hideSelectedOp === void 0 ? true : _props$hideSelectedOp;
-  var handleChange = function handleChange(e) {
-    var newValue = isMulti ? e.map(function (item) {
-      return item.value;
-    }) : e === null || e === void 0 ? void 0 : e.value;
-    onChange(name, newValue);
-  };
-  var controlStyle = function controlStyle(base, state) {
-    var styles = _extends({}, base, {
-      fontSize: "14px",
-      fontWeight: "400",
-      padding: "0 4px",
-      borderRadius: "8px",
-      backgroundColor: state.isDisabled ? COLORS.lightGrayBg : COLORS.white,
-      border: state.isFocused ? "2px solid " + (!error ? COLORS.brandBlue : COLORS.red) : "1px solid " + (!error ? COLORS.grayLines : COLORS.red),
-      height: isMulti ? undefined : "32px",
-      minHeight: 0,
-      boxShadow: "none"
-    });
-    switch (type) {
-      case "outline":
-        styles.overflow = "hidden";
-        styles[":hover"] = {
-          backgroundColor: COLORS.lightBlueHover
-        };
-        break;
-      case "no-outline":
-        styles.border = "none";
-        styles.padding = 0;
-        styles["&>div"] = {
-          padding: 0
-        };
-        break;
+var CoreTooltip = function CoreTooltip(props) {
+  var id = props.id,
+    content = props.content,
+    children = props.children,
+    placement = props.placement,
+    isDelay = props.isDelay,
+    _props$timeDelay = props.timeDelay,
+    timeDelay = _props$timeDelay === void 0 ? 1500 : _props$timeDelay,
+    innerClassName = props.innerClassName;
+  var timeoutRef = React.useRef(null);
+  var _useState = React.useState(false),
+    isOpenTooltip = _useState[0],
+    setIsOpenTooltip = _useState[1];
+  var handleMouseEnter = function handleMouseEnter() {
+    if (isDelay) {
+      timeoutRef.current = setTimeout(function () {
+        setIsOpenTooltip(true);
+      }, timeDelay);
+    } else {
+      setIsOpenTooltip(true);
     }
-    return styles;
-  };
-  var inputStyles = function inputStyles(base) {
-    var styles = _extends({}, base, {
-      margin: "0",
-      padding: "0",
-      color: "inherit"
-    });
-    return styles;
-  };
-  var placeholderStyles = function placeholderStyles(base) {
-    var styles = _extends({}, base, {
-      color: COLORS.lightGray
-    });
-    return styles;
-  };
-  var dropdownIndicatorStyles = function dropdownIndicatorStyles(base) {
-    var styles = _extends({}, base, {
-      position: "relative",
-      top: "-4px",
-      padding: "8px 0"
-    });
-    return styles;
   };
-  var valueContainerStyles = function valueContainerStyles(base) {
-    var styles = _extends({}, base, {
-      height: isMulti ? undefined : "32px",
-      position: "relative",
-      top: "-3px"
-    });
-    return styles;
-  };
-  var singleValueStyles = function singleValueStyles(base) {
-    var styles = _extends({}, base);
-    return styles;
+  var handleMouseLeave = function handleMouseLeave() {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsOpenTooltip(false);
   };
-  var optionStyles = function optionStyles(base, state) {
-    var styles = _extends({}, base, {
-      padding: "8px",
-      borderRadius: "8px",
-      cursor: "pointer",
-      fontSize: "14px",
-      fontWeight: 400,
-      backgroundColor: state.isSelected ? COLORS.lightBlueHover : "transparent",
-      "&:hover": {
-        backgroundColor: COLORS.lightBlueHover
+  return React__default.createElement("div", {
+    id: id,
+    className: styles$d["core-tooltip"],
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, React__default.createElement("div", {
+    className: styles$d["icon"]
+  }, children), content && React__default.createElement(reactstrap.Tooltip, {
+    target: id,
+    isOpen: isOpenTooltip,
+    placement: placement,
+    innerClassName: innerClassName
+  }, content));
+};
+
+var BlockLogin = function BlockLogin(_ref) {
+  var onNavigate = _ref.onNavigate,
+    role = _ref.role,
+    hiddenSignup = _ref.hiddenSignup,
+    email = _ref.email,
+    setEmail = _ref.setEmail,
+    loginWithEmail = _ref.loginWithEmail,
+    code = _ref.code,
+    setCode = _ref.setCode,
+    formatTime = _ref.formatTime,
+    loginWithEmailCode = _ref.loginWithEmailCode,
+    trackEvent = _ref.trackEvent;
+  var dispatch = reactRedux.useDispatch();
+  var _useState = React.useState(false),
+    isOTPModalOpen = _useState[0],
+    setIsOTPModalOpen = _useState[1];
+  var _useState2 = React.useState(""),
+    otpCode = _useState2[0],
+    setOtpCode = _useState2[1];
+  var _useState3 = React.useState(0),
+    resendCooldown = _useState3[0],
+    setResendCooldown = _useState3[1];
+  var _useState4 = React.useState(null),
+    resendTimer = _useState4[0],
+    setResendTimer = _useState4[1];
+  var googleLogin = google.useGoogleLogin({
+    onSuccess: function (tokenResponse) {
+      try {
+        return Promise.resolve(axios.get("https://www.googleapis.com/oauth2/v3/userinfo", {
+          headers: {
+            Authorization: "Bearer " + tokenResponse.access_token
+          }
+        })).then(function (userInfo) {
+          return function () {
+            if (userInfo && userInfo.data) {
+              var _userInfo$data = userInfo.data,
+                _email = _userInfo$data.email,
+                picture = _userInfo$data.picture,
+                family_name = _userInfo$data.family_name,
+                given_name = _userInfo$data.given_name,
+                name = _userInfo$data.name,
+                sub = _userInfo$data.sub;
+              var accessToken = tokenResponse.access_token;
+              var infoLogin = {
+                imageUrl: picture,
+                fullName: name,
+                firstName: family_name,
+                lastName: given_name,
+                email: _email,
+                token: accessToken,
+                googleId: sub,
+                role: role,
+                type: TypeLogin.Google
+              };
+              dispatch(setLoading(true));
+              return Promise.resolve(apiLoginGoogle(infoLogin)).then(function (authResult) {
+                var _authResult$data;
+                if (((_authResult$data = authResult.data) === null || _authResult$data === void 0 ? void 0 : _authResult$data.id) == null) {
+                  dispatch(setLoading(false));
+                  alert("Please contact admin.");
+                  return;
+                }
+                localStorage.clear();
+                var tokenJWT = authResult.data.token;
+                trackEvent === null || trackEvent === void 0 ? void 0 : trackEvent({
+                  eventName: exports.AmplitudeEvent.LOGIN,
+                  eventProperties: {
+                    email: _email,
+                    login_method: 'google',
+                    user_role: authResult.data.role,
+                    success: true,
+                    timestamp: new Date().toISOString()
+                  }
+                });
+                if (role === "LandingPage") {
+                  CookieService.setAuthCookie({
+                    token: tokenJWT,
+                    expiresAt: Date.now() + 24 * 60 * 60 * 1000
+                  });
+                  var getRedirectUrl = function getRedirectUrl(role) {
+                    switch (role) {
+                      case "Admin":
+                        return ADMIN_ORIGIN;
+                      case "Teacher":
+                        return TEACHER_ORIGIN;
+                      default:
+                        return role + "." + REQUEST_ORIGIN;
+                    }
+                  };
+                  var redirectUrl = getRedirectUrl(authResult.data.role);
+                  window.location.href = redirectUrl + "/dashboard";
+                  dispatch(setLoading(false));
+                }
+                localStorage.setItem(ACCESS_TOKEN, tokenJWT);
+                onNavigate("/dashboard");
+                dispatch(setLoading(false));
+              });
+            }
+          }();
+        });
+      } catch (e) {
+        return Promise.reject(e);
       }
-    });
-    return styles;
+    },
+    onError: function onError(errorResponse) {
+      return console.log(errorResponse);
+    }
+  });
+  React__default.useEffect(function () {
+    return function () {
+      if (resendTimer) {
+        clearInterval(resendTimer);
+      }
+    };
+  }, [resendTimer]);
+  var handleEmailLogin = function handleEmailLogin() {
+    if (!email.trim()) {
+      alert("Please enter your email");
+      return;
+    }
+    loginWithEmail(role);
+    setIsOTPModalOpen(true);
   };
-  var indicatorsContainerStyles = function indicatorsContainerStyles(base) {
-    var styles = _extends({}, base, {
-      display: type === "no-outline" ? "none" : "block"
-    });
-    return styles;
+  var startResendCooldown = function startResendCooldown() {
+    setResendCooldown(300);
+    if (resendTimer) {
+      clearInterval(resendTimer);
+    }
+    var timer = setInterval(function () {
+      setResendCooldown(function (prev) {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    setResendTimer(timer);
   };
-  var multiValueStyles = function multiValueStyles(base) {
-    var styles = _extends({}, base, {
-      backgroundColor: COLORS.lightBlue,
-      borderRadius: "4px",
-      padding: "2px 8px",
-      display: "flex",
-      alignItems: "center",
-      fontSize: "13px",
-      color: COLORS.blackText
-    });
-    return styles;
+  var handleResend = function handleResend() {
+    if (resendCooldown > 0) {
+      return;
+    }
+    if (!email.trim()) {
+      alert("Please enter your email");
+      return;
+    }
+    loginWithEmail(role);
+    startResendCooldown();
   };
-  var multiValueRemoveStyles = function multiValueRemoveStyles(base) {
-    var styles = _extends({}, base, {
-      color: COLORS.lightGray,
-      cursor: "pointer"
-    });
-    return styles;
+  var formatResendTime = function formatResendTime(seconds) {
+    var mins = Math.floor(seconds / 60);
+    var secs = seconds % 60;
+    return mins + ":" + secs.toString().padStart(2, '0');
   };
-  var multiValueLabelStyles = function multiValueLabelStyles(base) {
-    var styles = _extends({}, base, {
-      color: COLORS.blackText,
-      fontWeight: "400",
+  React__default.useEffect(function () {
+    return function () {
+      if (resendTimer) {
+        clearInterval(resendTimer);
+      }
+    };
+  }, [resendTimer]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(reactstrap.Row, {
+    style: {
+      height: "100%"
+    }
+  }, React__default.createElement(reactstrap.Col, {
+    sm: 12,
+    lg: role != "Admin" ? 7 : 12
+  }, React__default.createElement("div", {
+    className: "" + styleGlobal["box-signin-container"]
+  }, React__default.createElement("div", {
+    className: styleGlobal["box-signin-logo"] + " "
+  }, React__default.createElement(reactRouterDom.Link, {
+    to: "/",
+    className: "d-flex"
+  }, React__default.createElement("img", {
+    src: "/images/Logo.png",
+    alt: "",
+    height: 37,
+    width: 155,
+    className: "my-auto"
+  }))), React__default.createElement("div", {
+    className: styleGlobal["box-signin"] + " "
+  }, React__default.createElement("div", {
+    className: "" + styleGlobal["signin_title"]
+  }, React__default.createElement("span", null, "Welcome to Edusfere")), !hiddenSignup && React__default.createElement("div", {
+    className: "" + styleGlobal["signup_link"]
+  }, React__default.createElement("span", null, "Don't have an account?", " ", React__default.createElement(reactRouterDom.Link, {
+    to: "/",
+    style: {
+      color: "#00A0DA"
+    },
+    className: "text-decoration-none"
+  }, "Sign up"))), React__default.createElement("div", {
+    className: "" + styleGlobal["google_button"]
+  }, React__default.createElement("button", {
+    onClick: function onClick() {
+      return googleLogin();
+    }
+  }, React__default.createElement("img", {
+    width: 24,
+    height: 24,
+    alt: "Google sign-in",
+    src: "/images/icons/Google__G__logo.png"
+  }), "Sign in with Google")), React__default.createElement("span", {
+    className: "" + styleGlobal["box-field"]
+  }, "OR"), React__default.createElement("div", {
+    className: "" + styleGlobal["box-input"]
+  }, React__default.createElement("input", {
+    type: "email",
+    placeholder: "Email",
+    value: email,
+    onChange: function onChange(event) {
+      setEmail(event.target.value.trim());
+    }
+  })), React__default.createElement("button", {
+    onClick: handleEmailLogin,
+    className: "" + styleGlobal["box-button-email"],
+    disabled: !email.trim()
+  }, React__default.createElement("img", {
+    width: 20,
+    height: 20,
+    alt: "Email sign-in",
+    src: "/images/icons/Login_icon.png"
+  }), "Sign in with Email")), React__default.createElement("div", {
+    className: styleGlobal["box-signin-text"] + " "
+  }, React__default.createElement("span", {
+    style: {
       fontSize: "13px",
-      padding: 0
-    });
-    return styles;
-  };
-  return React__default.createElement("div", {
-    className: "" + styles$3["core-select"],
+      color: "#A6A6AD"
+    }
+  }, "By signing in, you agree to our Terms & Privacy Policy")))), role != "Admin" && role != 'LandingPage' && React__default.createElement(reactstrap.Col, {
+    sm: 12,
+    lg: 5,
+    className: "d-none d-lg-block " + styleGlobal["pr-30"]
+  }, React__default.createElement("div", {
+    className: "" + styleGlobal["box-right"],
     style: {
-      width: width != null ? width : "100%"
+      backgroundImage: "url('/images/bg_login.png')"
     }
-  }, label && React__default.createElement("span", {
-    className: styles$3["label"]
-  }, label), React__default.createElement(ReactSelect__default, {
-    name: name,
-    value: options.filter(function (i) {
-      return value && (isMulti ? value.includes(i.value) : i.value === value);
-    }),
-    onChange: handleChange,
-    placeholder: placeholder,
-    isDisabled: disabled,
-    isMulti: isMulti,
-    closeMenuOnSelect: closeMenuOnSelect,
-    hideSelectedOptions: hideSelectedOptions,
-    options: options,
-    components: isMulti ? {
-      Option: Option
-    } : undefined,
-    styles: {
-      control: controlStyle,
-      input: inputStyles,
-      placeholder: placeholderStyles,
-      dropdownIndicator: dropdownIndicatorStyles,
-      indicatorSeparator: function indicatorSeparator() {
-        return {
-          display: "none"
-        };
+  }, React__default.createElement("div", {
+    className: "" + styleGlobal["box-right-body"]
+  }, React__default.createElement("span", {
+    style: {
+      fontSize: "24px",
+      fontWeight: "700"
+    }
+  }, "As a teacher, your time and energy are too valuable to waste"), React__default.createElement("p", {
+    className: " fw-normal ",
+    style: {
+      marginTop: "12px",
+      marginBottom: "24px",
+      color: "#03191F"
+    }
+  }, "So we\u2019re building a curriculum hub and and workspace that puts everything you need to plan and prep within reach."), React__default.createElement("ul", null, itemLogin.map(function (item, it) {
+    return React__default.createElement("li", {
+      key: it,
+      className: "mb-2 ",
+      style: {
+        color: "#212126"
+      }
+    }, item);
+  })), React__default.createElement("div", {
+    className: "" + styleGlobal["box-right-footer"]
+  }, React__default.createElement("img", {
+    className: "img-fluid",
+    alt: "",
+    src: "/images/image_login.png",
+    style: {
+      width: "15vw"
+    }
+  }), React__default.createElement("div", null, React__default.createElement("p", null, "As one of our earliest users,", React__default.createElement("br", null), "you are a vital part of this process"), React__default.createElement("div", null, React__default.createElement("span", {
+    className: "d-block"
+  }, "Thank you!"), React__default.createElement("img", {
+    style: {
+      marginTop: "-15px"
+    },
+    alt: "",
+    src: "/images/icons/Vector 22.png"
+  }))))))), role === "LandingPage" && React__default.createElement(reactstrap.Col, {
+    sm: 12,
+    lg: 5,
+    className: "d-none d-lg-block " + styleGlobal["pr-30"]
+  }, React__default.createElement("div", {
+    className: "" + styleGlobal["box-right"],
+    style: {
+      backgroundImage: "url('/images/bg_login.png')"
+    }
+  }, React__default.createElement("div", {
+    className: "" + styleGlobal["box-right-body"]
+  }, React__default.createElement("span", {
+    style: {
+      fontSize: "24px",
+      fontWeight: "700"
+    }
+  }, "Get ready to manage your realm!"), React__default.createElement("p", {
+    className: " fw-normal ",
+    style: {
+      marginTop: "12px",
+      marginBottom: "24px",
+      color: "#03191F"
+    }
+  }, "So we\u2019re building a curriculum hub and and workspace that puts everything you need to plan and prep within reach."), React__default.createElement("ul", null, itemLogin.map(function (item, it) {
+    return React__default.createElement("li", {
+      key: it,
+      className: "mb-2 ",
+      style: {
+        color: "#212126"
+      }
+    }, item);
+  })), React__default.createElement("div", {
+    className: "" + styleGlobal["box-right-footer"]
+  }, React__default.createElement("img", {
+    className: "img-fluid",
+    alt: "",
+    src: "/images/image_login.png",
+    style: {
+      width: "15vw"
+    }
+  }), React__default.createElement("div", null, React__default.createElement("p", null, "As one of our earliest users,", React__default.createElement("br", null), "you are a vital part of this process"), React__default.createElement("div", null, React__default.createElement("span", {
+    className: "d-block"
+  }, "Thank you!"), React__default.createElement("img", {
+    style: {
+      marginTop: "-15px"
+    },
+    alt: "",
+    src: "/images/icons/Vector 22.png"
+  })))))))), React__default.createElement(CoreModal, {
+    open: isOTPModalOpen,
+    onClose: function onClose() {
+      setIsOTPModalOpen(false);
+      setResendCooldown(0);
+      if (resendTimer) {
+        clearInterval(resendTimer);
+      }
+    },
+    title: "Enter OTP Code",
+    footer: React__default.createElement(React__default.Fragment, null, React__default.createElement(CoreButton, {
+      onClick: function onClick() {
+        setIsOTPModalOpen(false);
+        setResendCooldown(0);
+        if (resendTimer) {
+          clearInterval(resendTimer);
+        }
       },
-      indicatorsContainer: indicatorsContainerStyles,
-      valueContainer: valueContainerStyles,
-      singleValue: singleValueStyles,
-      option: optionStyles,
-      multiValue: multiValueStyles,
-      multiValueRemove: multiValueRemoveStyles,
-      multiValueLabel: multiValueLabelStyles
+      type: "text"
+    }, "Cancel"), React__default.createElement(CoreButton, {
+      type: "primary",
+      htmlType: "submit",
+      onClick: function onClick() {
+        if (!otpCode.trim()) {
+          alert("Please enter the OTP code");
+          return;
+        }
+        loginWithEmailCode(role);
+        setIsOTPModalOpen(false);
+        setResendCooldown(0);
+        if (resendTimer) {
+          clearInterval(resendTimer);
+        }
+      }
+    }, "Login"))
+  }, React__default.createElement("div", {
+    className: "mx-auto",
+    style: {
+      maxWidth: 400,
+      width: 400
     }
-  }), error && React__default.createElement(CoreError, {
-    message: errorMessage
-  }));
+  }, React__default.createElement("p", {
+    className: "text-sm text-muted mb-2"
+  }, "A one-time verification code has just been sent to your registered email. Please enter it below."), React__default.createElement("div", {
+    className: "" + styleGlobal["box-input"]
+  }, React__default.createElement(CoreInput, {
+    name: "otpCode",
+    value: code,
+    onChange: function onChange(event) {
+      setCode(event.target.value);
+      setOtpCode(event.target.value);
+    },
+    placeholder: "Code OTP"
+  }), React__default.createElement("p", {
+    className: "mt-1 text-muted"
+  }, "Your code will expire: ", React__default.createElement("span", {
+    className: "text-danger"
+  }, formatTime()))), React__default.createElement("p", {
+    className: "mt-3 text-muted mb-0"
+  }, "Didn't receive the code?", " ", resendCooldown > 0 ? React__default.createElement("span", {
+    className: "text-muted"
+  }, "Resend available in ", formatResendTime(resendCooldown)) : React__default.createElement("span", {
+    className: "text-primary cursor-pointer",
+    style: {
+      cursor: "pointer"
+    },
+    onClick: handleResend
+  }, "Click here to resend"), " ", "or check your spam inbox."))));
 };
 
-var styles$4 = {"core-checkbox":"_3HY4f"};
+// A type of promise-like that resolves synchronously and supports only one observer
 
-var CoreInput$1 = function CoreInput(props) {
-  var name = props.name,
-    checked = props.checked,
-    _onChange = props.onChange,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    label = props.label;
-  return React__default.createElement("div", {
-    className: "" + styles$4["core-checkbox"]
-  }, React__default.createElement(reactstrap.FormGroup, {
-    check: true,
-    inline: true
-  }, React__default.createElement(reactstrap.Input, {
-    id: "core-checkbox-" + name,
-    type: "checkbox",
-    name: name,
-    checked: checked,
-    onChange: function onChange(e) {
-      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(name, e.target.checked);
-    },
-    disabled: disabled
-  }), React__default.createElement(reactstrap.Label, {
-    htmlFor: "core-checkbox-" + name,
-    check: true
-  }, label)));
-};
+const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
 
-var styles$5 = {"core-radio":"_kvUpe","form-check":"_3ToPe"};
+const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
 
-var CoreRadio = function CoreRadio(props) {
-  var name = props.name,
-    value = props.value,
-    options = props.options,
-    onChange = props.onChange,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled;
+// Asynchronously call a function and send errors to recovery continuation
+function _catch(body, recover) {
+	try {
+		var result = body();
+	} catch(e) {
+		return recover(e);
+	}
+	if (result && result.then) {
+		return result.then(void 0, recover);
+	}
+	return result;
+}
+
+var defaultInfo = {
+  email: "",
+  password: "",
+  captcha: "",
+  rememberMe: false
+};
+var minutes = 15;
+var useLogin = function useLogin(onNavigate, trackEvent) {
+  var _useState = React.useState(false),
+    openLogin = _useState[0],
+    setOpenLogin = _useState[1];
+  var _useState2 = React.useState(),
+    infoUser = _useState2[0],
+    setInfoUser = _useState2[1];
+  var dispatch = reactRedux.useDispatch();
+  var toggle = React.useCallback(function () {
+    setOpenLogin(!openLogin);
+  }, [openLogin]);
+  var _useState3 = React.useState(""),
+    email = _useState3[0],
+    setEmail = _useState3[1];
+  var _useState4 = React.useState(""),
+    code = _useState4[0],
+    setCode = _useState4[1];
+  var _useState5 = React.useState(false),
+    isScreenCode = _useState5[0],
+    setIsScreenCode = _useState5[1];
+  var _useState6 = React.useState(minutes * 60),
+    timeLeft = _useState6[0],
+    setTimeLeft = _useState6[1];
+  var loginWithEmail = function loginWithEmail(role) {
+    try {
+      var _temp2 = function _temp2() {
+        dispatch(setLoading(false));
+      };
+      dispatch(setLoading(true));
+      var _temp = _catch(function () {
+        var body = {
+          email: email,
+          role: role
+        };
+        return Promise.resolve(apiSendEmailCode(body)).then(function (res) {
+          var data = res.data;
+          if (data.status == 1) {
+            if (data.data.token != null) {
+              var tokenJWT = data.data.token;
+              localStorage.setItem(ACCESS_TOKEN, tokenJWT);
+              trackEvent === null || trackEvent === void 0 ? void 0 : trackEvent({
+                eventName: exports.AmplitudeEvent.LOGIN,
+                eventProperties: {
+                  email: email,
+                  login_method: 'email',
+                  timestamp: new Date().toISOString()
+                }
+              });
+              onNavigate("/dashboard");
+            } else {
+              setIsScreenCode(true);
+            }
+          } else {
+            dispatch(setLoading(false));
+            alert("Please contact admin.");
+          }
+        });
+      }, function (e) {
+        reactToastify.toast.error("An error occurred while sending the code. Please try again later.");
+        console.log(e);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var loginWithEmailCode = function loginWithEmailCode(role) {
+    try {
+      var _temp4 = function _temp4() {
+        dispatch(setLoading(false));
+      };
+      dispatch(setLoading(true));
+      var _temp3 = _catch(function () {
+        return Promise.resolve(apiCheckEmailCode({
+          email: email,
+          code: code,
+          role: role
+        })).then(function (res) {
+          var data = res.data;
+          if (data.status == 1) {
+            localStorage.clear();
+            var tokenJWT = data.data.token;
+            localStorage.setItem(ACCESS_TOKEN, tokenJWT);
+            trackEvent === null || trackEvent === void 0 ? void 0 : trackEvent({
+              eventName: exports.AmplitudeEvent.LOGIN,
+              eventProperties: {
+                email: email,
+                login_method: 'email',
+                timestamp: new Date().toISOString()
+              }
+            });
+            onNavigate("/dashboard");
+          } else {
+            dispatch(setLoading(false));
+            alert("The code is not correct. Please check again.");
+          }
+        });
+      }, function (e) {
+        console.log(e);
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var formatTime = function formatTime() {
+    var m = Math.floor(timeLeft / 60);
+    var s = timeLeft % 60;
+    return m.toString().padStart(2, '0') + ":" + s.toString().padStart(2, '0');
+  };
+  React.useEffect(function () {
+    if (isScreenCode) {
+      var timer = setInterval(function () {
+        setTimeLeft(function (prev) {
+          if (prev <= 1) {
+            clearInterval(timer);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+      return function () {
+        return clearInterval(timer);
+      };
+    }
+    return;
+  }, [isScreenCode]);
+  return {
+    defaultInfo: defaultInfo,
+    openLogin: openLogin,
+    toggle: toggle,
+    email: email,
+    setEmail: setEmail,
+    loginWithEmail: loginWithEmail,
+    infoUser: infoUser,
+    setInfoUser: setInfoUser,
+    code: code,
+    setCode: setCode,
+    isScreenCode: isScreenCode,
+    formatTime: formatTime,
+    loginWithEmailCode: loginWithEmailCode
+  };
+};
+
+var Login = function Login(props) {
+  var onNavigate = props.onNavigate,
+    role = props.role,
+    hiddenSignup = props.hiddenSignup,
+    trackEvent = props.trackEvent;
+  var _useLogin = useLogin(onNavigate, trackEvent),
+    defaultInfo = _useLogin.defaultInfo,
+    email = _useLogin.email,
+    setEmail = _useLogin.setEmail,
+    loginWithEmail = _useLogin.loginWithEmail,
+    code = _useLogin.code,
+    setCode = _useLogin.setCode,
+    isScreenCode = _useLogin.isScreenCode,
+    formatTime = _useLogin.formatTime,
+    loginWithEmailCode = _useLogin.loginWithEmailCode;
   return React__default.createElement("div", {
-    className: "" + styles$5["core-radio"]
-  }, React__default.createElement(reactstrap.FormGroup, {
-    check: true
-  }, options.map(function (i) {
-    return React__default.createElement("div", {
-      key: i.value
-    }, React__default.createElement(reactstrap.Input, {
-      id: "core-radio-" + i.value,
-      type: "radio",
-      checked: value === i.value,
-      onClick: function onClick() {
-        onChange(name, i.value);
-      },
-      onChange: function onChange() {
-        return;
-      },
-      disabled: disabled || i.disabled
-    }), React__default.createElement(reactstrap.Label, {
-      htmlFor: "core-radio-" + i.value
-    }, i.label));
-  })));
+    className: styleGlobal["signup_wrap"] + " container-fluid font-family-lato"
+  }, React__default.createElement(BlockLogin, {
+    defaultInfo: defaultInfo,
+    email: email,
+    hiddenSignup: hiddenSignup,
+    setEmail: setEmail,
+    loginWithEmail: loginWithEmail,
+    code: code,
+    setCode: setCode,
+    formatTime: formatTime,
+    isScreenCode: isScreenCode,
+    onNavigate: onNavigate,
+    loginWithEmailCode: loginWithEmailCode,
+    role: role,
+    trackEvent: trackEvent
+  }));
 };
 
-var styles$6 = {"core-modal-header":"_2y5ln"};
+// src/utils/formatProdErrorMessage.ts
+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. `;
+}
 
-var CoreModal = function CoreModal(props) {
-  var open = props.open,
-    onClose = props.onClose,
-    children = props.children,
-    title = props.title,
-    footer = props.footer,
-    handleSubmit = props.handleSubmit,
-    onSubmit = props.onSubmit,
-    _props$bodyPadding = props.bodyPadding,
-    bodyPadding = _props$bodyPadding === void 0 ? "24px" : _props$bodyPadding,
-    className = props.className;
-  return React__default.createElement(reactstrap.Modal, {
-    isOpen: open,
-    toggle: onClose,
-    centered: true,
-    modalClassName: className
-  }, React__default.createElement("form", {
-    onSubmit: onSubmit ? handleSubmit(onSubmit) : undefined,
-    className: "" + styles$6["core-modal-container"]
-  }, React__default.createElement(reactstrap.ModalHeader, {
-    toggle: onClose,
-    className: styles$6["core-modal-header"]
-  }, title), React__default.createElement(reactstrap.ModalBody, {
-    style: {
-      padding: bodyPadding
-    }
-  }, children), footer && React__default.createElement(reactstrap.ModalFooter, null, footer)));
+// src/utils/actionTypes.ts
+var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
+var ActionTypes = {
+  INIT: `@@redux/INIT${/* @__PURE__ */ randomString()}`,
+  REPLACE: `@@redux/REPLACE${/* @__PURE__ */ randomString()}`,
+  PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`
 };
+var actionTypes_default = ActionTypes;
 
-var styles$7 = {"core-range":"_1dzD7"};
+// src/utils/isPlainObject.ts
+function isPlainObject(obj) {
+  if (typeof obj !== "object" || obj === null)
+    return false;
+  let proto = obj;
+  while (Object.getPrototypeOf(proto) !== null) {
+    proto = Object.getPrototypeOf(proto);
+  }
+  return Object.getPrototypeOf(obj) === proto || Object.getPrototypeOf(obj) === null;
+}
 
-var CoreRange = function CoreRange(props) {
-  var name = props.name,
-    value = props.value,
-    _onChange = props.onChange,
-    label = props.label,
-    width = props.width,
-    min = props.min,
-    max = props.max,
-    step = props.step;
-  return React__default.createElement("div", {
-    className: "" + styles$7["core-range"],
-    style: {
-      width: width != null ? width : "100%"
+// src/utils/kindOf.ts
+function miniKindOf(val) {
+  if (val === void 0)
+    return "undefined";
+  if (val === null)
+    return "null";
+  const type = typeof val;
+  switch (type) {
+    case "boolean":
+    case "string":
+    case "number":
+    case "symbol":
+    case "function": {
+      return type;
     }
-  }, label && React__default.createElement("label", null, label), React__default.createElement("input", {
-    type: "range",
-    name: name,
-    value: value,
-    onChange: function onChange(e) {
-      return _onChange(name, +e.target.value);
-    },
-    min: min,
-    max: max,
-    step: step
-  }));
+  }
+  if (Array.isArray(val))
+    return "array";
+  if (isDate(val))
+    return "date";
+  if (isError(val))
+    return "error";
+  const constructorName = ctorName(val);
+  switch (constructorName) {
+    case "Symbol":
+    case "Promise":
+    case "WeakMap":
+    case "WeakSet":
+    case "Map":
+    case "Set":
+      return constructorName;
+  }
+  return Object.prototype.toString.call(val).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) {
+  let typeOfVal = typeof val;
+  if (process.env.NODE_ENV !== "production") {
+    typeOfVal = miniKindOf(val);
+  }
+  return typeOfVal;
+}
+
+// src/utils/warning.ts
+function warning(message) {
+  if (typeof console !== "undefined" && typeof console.error === "function") {
+    console.error(message);
+  }
+  try {
+    throw new Error(message);
+  } catch (e) {
+  }
+}
+
+// src/combineReducers.ts
+function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
+  const reducerKeys = Object.keys(reducers);
+  const argumentName = action && action.type === actionTypes_default.INIT ? "preloadedState argument passed to createStore" : "previous state received by the reducer";
+  if (reducerKeys.length === 0) {
+    return "Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.";
+  }
+  if (!isPlainObject(inputState)) {
+    return `The ${argumentName} has unexpected type of "${kindOf(inputState)}". Expected argument to be an object with the following keys: "${reducerKeys.join('", "')}"`;
+  }
+  const unexpectedKeys = Object.keys(inputState).filter((key) => !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key]);
+  unexpectedKeys.forEach((key) => {
+    unexpectedKeyCache[key] = true;
+  });
+  if (action && action.type === actionTypes_default.REPLACE)
+    return;
+  if (unexpectedKeys.length > 0) {
+    return `Unexpected ${unexpectedKeys.length > 1 ? "keys" : "key"} "${unexpectedKeys.join('", "')}" found in ${argumentName}. Expected to find one of the known reducer keys instead: "${reducerKeys.join('", "')}". Unexpected keys will be ignored.`;
+  }
+}
+function assertReducerShape(reducers) {
+  Object.keys(reducers).forEach((key) => {
+    const reducer = reducers[key];
+    const initialState = reducer(void 0, {
+      type: actionTypes_default.INIT
+    });
+    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.`);
+    }
+    if (typeof reducer(void 0, {
+      type: actionTypes_default.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_default.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.`);
+    }
+  });
+}
+function combineReducers(reducers) {
+  const reducerKeys = Object.keys(reducers);
+  const finalReducers = {};
+  for (let i = 0; i < reducerKeys.length; i++) {
+    const key = reducerKeys[i];
+    if (process.env.NODE_ENV !== "production") {
+      if (typeof reducers[key] === "undefined") {
+        warning(`No reducer provided for key "${key}"`);
+      }
+    }
+    if (typeof reducers[key] === "function") {
+      finalReducers[key] = reducers[key];
+    }
+  }
+  const finalReducerKeys = Object.keys(finalReducers);
+  let unexpectedKeyCache;
+  if (process.env.NODE_ENV !== "production") {
+    unexpectedKeyCache = {};
+  }
+  let shapeAssertionError;
+  try {
+    assertReducerShape(finalReducers);
+  } catch (e) {
+    shapeAssertionError = e;
+  }
+  return function combination(state = {}, action) {
+    if (shapeAssertionError) {
+      throw shapeAssertionError;
+    }
+    if (process.env.NODE_ENV !== "production") {
+      const warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);
+      if (warningMessage) {
+        warning(warningMessage);
+      }
+    }
+    let hasChanged = false;
+    const nextState = {};
+    for (let i = 0; i < finalReducerKeys.length; i++) {
+      const key = finalReducerKeys[i];
+      const reducer = finalReducers[key];
+      const previousStateForKey = state[key];
+      const nextStateForKey = reducer(previousStateForKey, action);
+      if (typeof nextStateForKey === "undefined") {
+        const 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.`);
+      }
+      nextState[key] = nextStateForKey;
+      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
+    }
+    hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length;
+    return hasChanged ? nextState : state;
+  };
+}
+
+var initialState = {
+  isLoading: false,
+  isLoadingPage: false,
+  alert: {
+    type: "",
+    message: ""
+  },
+  user: null,
+  academy: null,
+  menuCollapse: false,
+  isRefetchSidebar: false
 };
+var commonReducer = toolkit.createReducer(initialState, function (builder) {
+  builder.addCase(setLoading, function (state, action) {
+    state.isLoading = action.payload;
+  }).addCase(setLoadingPage, function (state, action) {
+    state.isLoadingPage = action.payload;
+  }).addCase(setAlert, function (state, action) {
+    state.alert = action.payload;
+  }).addCase(setUser, function (state, action) {
+    state.user = action.payload;
+  }).addCase(setLanguage, function (state, action) {
+    state.language = action.payload;
+  }).addCase(reset, function (_state, _action) {
+    return initialState;
+  }).addCase(setMenuCollapse, function (state, action) {
+    state.menuCollapse = action.payload;
+  }).addCase(setIsRefetchSidebar, function (state) {
+    state.isRefetchSidebar = !state.isRefetchSidebar;
+  }).addCase(setTenant, function (state, action) {
+    state.user.currentTenantId = action.payload;
+  }).addCase(setAddTenant, function (state, action) {
+    state.user.tenantInfo = action.payload;
+  }).addCase(setTeam, function (state, action) {
+    state.user.currentTeamId = action.payload;
+  });
+});
 
-var styles$8 = {"editor":"_3TUh3","label":"_15n2K","optional":"_1fHZB","icon":"_38AfS","error":"_DaofN","no-border":"_2JOcF","small-height":"_1EXev"};
+var rootReducer = combineReducers({
+  common: commonReducer
+});
 
-var Search = function Search(props) {
-  var _props$size = props.size,
-    size = _props$size === void 0 ? 16 : _props$size,
-    _props$color = props.color,
-    color = _props$color === void 0 ? "#A6A6AD" : _props$color;
-  return React__default.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9.40376 9.40352C9.63808 9.1692 10.018 9.1692 10.2523 9.40352L13.4243 12.5755C13.6586 12.8098 13.6586 13.1897 13.4243 13.424C13.19 13.6584 12.8101 13.6584 12.5758 13.424L9.40376 10.252C9.16945 10.0177 9.16945 9.63783 9.40376 9.40352Z",
-    fill: color
-  }), React__default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M6.9999 3.5999C5.12213 3.5999 3.5999 5.12213 3.5999 6.9999C3.5999 8.87767 5.12213 10.3999 6.9999 10.3999C8.87767 10.3999 10.3999 8.87767 10.3999 6.9999C10.3999 5.12213 8.87767 3.5999 6.9999 3.5999ZM2.3999 6.9999C2.3999 4.45939 4.45939 2.3999 6.9999 2.3999C9.54041 2.3999 11.5999 4.45939 11.5999 6.9999C11.5999 9.54041 9.54041 11.5999 6.9999 11.5999C4.45939 11.5999 2.3999 9.54041 2.3999 6.9999Z",
-    fill: color
-  }));
-};
+var store = toolkit.configureStore({
+  reducer: rootReducer,
+  middleware: function middleware(getDefaultMiddleware) {
+    return getDefaultMiddleware({
+      serializableCheck: false
+    });
+  }
+});
 
-var Close = function Close(props) {
-  var _props$color = props.color,
-    color = _props$color === void 0 ? "#A6A6AD" : _props$color,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 16 : _props$size;
-  return React__default.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("g", {
-    clipPath: "url(#clip0_1060_48455)"
-  }, React__default.createElement("rect", {
-    x: "2.48438",
-    y: "3.61597",
-    width: "1.6",
-    height: "14",
-    rx: "0.8",
-    transform: "rotate(-45 2.48438 3.61597)",
-    fill: color
-  }), React__default.createElement("rect", {
-    x: "12.2427",
-    y: "2.34326",
-    width: "1.6",
-    height: "14",
-    rx: "0.8",
-    transform: "rotate(45 12.2427 2.34326)",
-    fill: color
-  })), React__default.createElement("defs", null, React__default.createElement("clipPath", {
-    id: "clip0_1060_48455"
-  }, React__default.createElement("rect", {
-    width: "16",
-    height: "16",
-    fill: "white"
-  }))));
-};
+var getAccessToken$1 = (function () {
+  try {
+    return localStorage.getItem(ACCESS_TOKEN);
+  } catch (err) {
+    return null;
+  }
+});
 
-var Info = function Info() {
-  return React__default.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 12 12",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M6.0002 2.1002C3.84628 2.1002 2.1002 3.84628 2.1002 6.0002C2.1002 8.15411 3.84628 9.9002 6.0002 9.9002C8.15411 9.9002 9.9002 8.15411 9.9002 6.0002C9.9002 3.84628 8.15411 2.1002 6.0002 2.1002ZM1.2002 6.0002C1.2002 3.34923 3.34923 1.2002 6.0002 1.2002C8.65116 1.2002 10.8002 3.34923 10.8002 6.0002C10.8002 8.65116 8.65116 10.8002 6.0002 10.8002C3.34923 10.8002 1.2002 8.65116 1.2002 6.0002Z",
-    fill: "#A6A6AD"
-  }), React__default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M5.9998 5.1001C6.24833 5.1001 6.4498 5.30157 6.4498 5.5501V8.2915C6.4498 8.54003 6.24833 8.7415 5.9998 8.7415C5.75128 8.7415 5.5498 8.54003 5.5498 8.2915V5.5501C5.5498 5.30157 5.75128 5.1001 5.9998 5.1001Z",
-    fill: "#A6A6AD"
-  }), React__default.createElement("path", {
-    d: "M5.9999 4.6502C5.6687 4.6502 5.3999 4.3808 5.3999 4.0502C5.3999 3.7196 5.6687 3.4502 5.9999 3.4502C6.3311 3.4502 6.5999 3.7196 6.5999 4.0502C6.5999 4.3808 6.3311 4.6502 5.9999 4.6502Z",
-    fill: "#A6A6AD"
-  }));
-};
+var encodeParams$1 = (function (params) {
+  return Object.keys(params).filter(function (key) {
+    return params[key] || params[key] === 0 || params[key] === false;
+  }).map(function (key) {
+    if (Array.isArray(params[key])) {
+      return params[key].map(function (i) {
+        return encodeURIComponent(key) + "=" + encodeURIComponent(i);
+      }).join('&');
+    }
+    return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
+  }).join('&');
+});
 
-var _excluded$1 = ["name", "value", "onChange", "placeholder", "error", "label", "isOptional", "tooltip", "noBorder", "smallHeight", "cols", "rows", "minHeight", "className", "onKeyDown", "onKeyFocus", "autoResize", "width", "onClick", "onBlur", "isDisabled"];
-var CoreTextArea = function CoreTextArea(props) {
-  var _props$name = props.name,
-    name = _props$name === void 0 ? "" : _props$name,
-    value = props.value,
-    _onChange = props.onChange,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "Type here..." : _props$placeholder,
-    _props$error = props.error,
-    error = _props$error === void 0 ? false : _props$error,
-    label = props.label,
-    _props$isOptional = props.isOptional,
-    isOptional = _props$isOptional === void 0 ? false : _props$isOptional,
-    tooltip = props.tooltip,
-    _props$noBorder = props.noBorder,
-    noBorder = _props$noBorder === void 0 ? false : _props$noBorder,
-    _props$smallHeight = props.smallHeight,
-    smallHeight = _props$smallHeight === void 0 ? false : _props$smallHeight,
-    cols = props.cols,
-    rows = props.rows,
-    minHeight = props.minHeight,
-    className = props.className,
-    _onKeyDown = props.onKeyDown,
-    onKeyFocus = props.onKeyFocus,
-    autoResize = props.autoResize,
-    width = props.width,
-    onClick = props.onClick,
-    onBlur = props.onBlur,
-    isDisabled = props.isDisabled,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$1);
-  var _useState = React.useState(false),
-    isOpenTooltip = _useState[0],
-    setIsOpenTooltip = _useState[1];
-  var toggleTooltip = function toggleTooltip() {
-    return setIsOpenTooltip(!isOpenTooltip);
-  };
-  var textareaRef = React.useRef(null);
-  React.useEffect(function () {
-    if (autoResize && textareaRef.current) {
-      var el = textareaRef.current;
-      requestAnimationFrame(function () {
-        el.style.height = "auto";
-        el.style.height = el.scrollHeight + "px";
-      });
+var api$1 = axios.create({
+  baseURL: BASE_URL,
+  timeout: 0,
+  headers: {
+    "Content-Type": "application/json"
+  },
+  paramsSerializer: function paramsSerializer(params) {
+    return encodeParams$1(params);
+  }
+});
+var apiUpload$1 = axios.create({
+  baseURL: BASE_URL,
+  timeout: 60000,
+  headers: {
+    "Content-Type": "multipart/form-data"
+  }
+});
+[api$1, apiUpload$1].forEach(function (i) {
+  return i.interceptors.request.use(function (config) {
+    var token = getAccessToken$1();
+    if (token) {
+      config.headers.Authorization = "Bearer " + token;
     }
-  }, [value, autoResize]);
-  return React__default.createElement("div", {
-    className: styles$8["editor"] + " " + (error ? styles$8["error"] : "") + " " + (noBorder ? styles$8["no-border"] : "") + " " + (smallHeight ? styles$8["small-height"] : ""),
-    style: {
-      width: width != null ? width : "100%"
+    return config;
+  }, function (error) {
+    return Promise.reject(error);
+  });
+});
+[api$1, apiUpload$1].forEach(function (i) {
+  return i.interceptors.response.use(function (response) {
+    return response;
+  }, function (error) {
+    if (error.response.status === 401) {
+      window.location.href = "/login";
     }
-  }, label && React__default.createElement("span", {
-    className: styles$8["label"]
-  }, React__default.createElement("div", {
-    className: styles$8["label-content"]
-  }, label), isOptional && React__default.createElement("div", {
-    className: styles$8["optional"]
-  }, "(optional)"), tooltip && React__default.createElement("div", {
-    id: name,
-    className: styles$8["icon"]
-  }, React__default.createElement(Info, null), React__default.createElement(reactstrap.Tooltip, {
-    target: name,
-    isOpen: isOpenTooltip,
-    toggle: toggleTooltip
-  }, tooltip))), React__default.createElement("textarea", Object.assign({
-    ref: textareaRef,
-    placeholder: placeholder,
-    style: {
-      whiteSpace: "pre-wrap",
-      width: "100%",
-      minHeight: minHeight ? minHeight : "123px",
-      resize: "none",
-      overflow: "hidden"
-    },
-    value: value,
-    cols: cols,
-    rows: rows,
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.value);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
-    },
-    onFocus: function onFocus(e) {
-      return onKeyFocus === null || onKeyFocus === void 0 ? void 0 : onKeyFocus(name, e.target.value);
-    },
-    className: className,
-    onClick: onClick,
-    onBlur: onBlur,
-    disabled: isDisabled
-  }, rest)));
+    if (error.response.status == 403) {
+      var hostname = window.location.hostname;
+      var parts = hostname.split('.');
+      var domain = parts.slice(-2).join('.');
+      localStorage.removeItem(ACCESS_TOKEN);
+      localStorage.removeItem(ORGANIZATION_TENANT);
+      localStorage.removeItem(ORGANIZATION_TEAM);
+      Cookies.remove('auth', {
+        path: '/',
+        domain: "." + domain
+      });
+      localStorage.removeItem("USER_EMAIL");
+      window.location.href = "/login";
+    }
+    return Promise.reject(error);
+  });
+});
+
+var AUTH_URL = BASE_URL + "/api/auth";
+var checkToken = function checkToken(token) {
+  return api$1.post(AUTH_URL + "/checktoken", {
+    token: token
+  });
 };
 
-var styles$9 = {"core-search":"_wyI1K","input":"_9XW-D","icon":"_2iDm7","clear":"_1nhXy"};
+var firstCheckToken = function firstCheckToken() {
+  return Promise.resolve(_catch(function () {
+    var token = getAccessToken$1();
+    return token ? Promise.resolve(checkToken(token)).then(function (tokenStatus) {
+      return tokenStatus.data ? true : false;
+    }) : false;
+  }, function () {
+    return false;
+  }));
+};
 
-var CoreSearch = function CoreSearch(props) {
-  var _props$name = props.name,
-    name = _props$name === void 0 ? "" : _props$name,
-    value = props.value,
-    _onChange = props.onChange,
-    width = props.width,
-    onPressEnter = props.onPressEnter;
-  var handleClear = function handleClear() {
-    _onChange(name, "");
-    onPressEnter && onPressEnter("");
-  };
-  return React__default.createElement("div", {
-    className: styles$9["core-search"],
-    style: {
-      width: width != null ? width : "100%"
-    },
-    tabIndex: 1
-  }, React__default.createElement("div", {
-    className: styles$9["icon"]
-  }, React__default.createElement(Search, null)), React__default.createElement("input", {
-    className: styles$9["input"],
-    value: value,
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.value);
-    },
-    placeholder: "Search...",
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === "Enter") {
-        onPressEnter && onPressEnter(value);
+var getImageUrl = function getImageUrl(imageUrl) {
+  try {
+    if (!!imageUrl) {
+      var imageTrimmed = imageUrl.trim();
+      if (imageTrimmed.startsWith('http://') || imageTrimmed.startsWith('https://')) {
+        return imageTrimmed;
       }
+      return BASE_URL + "/images/" + imageTrimmed;
     }
-  }), value.length ? React__default.createElement("div", {
-    className: styles$9["clear"],
-    onClick: handleClear
-  }, React__default.createElement(Close, null)) : null);
+    return "/images/avatar-default.png";
+  } catch (err) {
+    return "/images/avatar-default.png";
+  }
 };
 
-var styles$a = {"core-select-compact":"_3ql5D","label":"_3fPQC"};
+var NotFound = function NotFound() {
+  return React__default.createElement("div", {
+    className: "not-found"
+  }, React__default.createElement("div", {
+    className: "clearfix"
+  }, React__default.createElement("h1", {
+    className: "float-left display-3 mr-4"
+  }, "404"), React__default.createElement("div", {
+    className: "float-left"
+  }, React__default.createElement("h4", {
+    className: "pt-3"
+  }, "Oops! You are lost."), React__default.createElement("p", {
+    className: "text-muted mb-2"
+  }, "The page you are looking for was not found."), React__default.createElement("div", null))));
+};
 
-var Option$1 = function Option(props) {
-  return React__default.createElement("div", null, React__default.createElement(ReactSelect.components.Option, Object.assign({}, props), React__default.createElement(CoreInput$1, {
-    checked: props.isSelected,
-    onChange: function onChange() {
-      return null;
-    },
-    name: "",
-    label: props.label
-  })));
+var loadingStyle = {
+  minWidth: "100vw",
+  minHeight: "100vh",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  zIndex: 999999999,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
 };
-var CoreSelectCompact = function CoreSelectCompact(props) {
-  var _props$name = props.name,
-    name = _props$name === void 0 ? "" : _props$name,
-    options = props.options,
-    value = props.value,
-    onChange = props.onChange,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    label = props.label,
-    width = props.width,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "Select" : _props$placeholder,
-    _props$isMulti = props.isMulti,
-    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
-    _props$isShowDropdown = props.isShowDropdown,
-    isShowDropdown = _props$isShowDropdown === void 0 ? false : _props$isShowDropdown,
-    _props$error = props.error,
-    error = _props$error === void 0 ? false : _props$error,
-    _noOptionsMessage = props.noOptionsMessage;
-  var handleChange = function handleChange(value) {
-    var newValue = isMulti ? value === null || value === void 0 ? void 0 : value.map(function (item) {
-      return item.value;
-    }) : value === null || value === void 0 ? void 0 : value.value;
-    onChange(name, newValue);
-  };
-  var controlStyle = function controlStyle(base, state) {
-    var styles = _extends({}, base, {
-      fontSize: "14px",
-      fontWeight: "400",
-      padding: "0",
-      backgroundColor: state.isDisabled ? "transparent" : error ? COLORS.lightYellow : COLORS.white,
-      border: "none",
-      height: isMulti ? undefined : "26px",
-      minHeight: "26px",
-      boxShadow: "none",
-      cursor: "pointer",
-      "&:hover": {
-        backgroundColor: COLORS.lightBlueHover
-      },
-      "&>div": {
-        padding: "0 2px"
-      }
-    });
-    return styles;
-  };
-  var inputStyles = function inputStyles(base) {
-    var styles = _extends({}, base, {
-      margin: "0",
-      padding: "0",
-      color: "inherit",
-      position: "relative",
-      top: "-2px"
-    });
-    return styles;
-  };
-  var placeholderStyles = function placeholderStyles(base) {
-    var styles = _extends({}, base, {
-      color: COLORS.lightGray
-    });
-    return styles;
-  };
-  var dropdownIndicatorStyles = function dropdownIndicatorStyles(base) {
-    var styles = _extends({}, base, {
-      position: "relative",
-      padding: "2px 0"
-    });
-    return styles;
-  };
-  var indicatorsContainerStyles = function indicatorsContainerStyles(base) {
-    var styles = _extends({}, base, {
-      display: isShowDropdown && !isMulti ? "block" : "none"
-    });
-    return styles;
-  };
-  var valueContainerStyles = function valueContainerStyles(base) {
-    var styles = _extends({}, base, {
-      height: isMulti ? undefined : "26px",
-      position: "relative"
-    });
-    return styles;
-  };
-  var singleValueStyles = function singleValueStyles(base) {
-    var styles = _extends({}, base);
-    return styles;
-  };
-  var optionStyles = function optionStyles(base, state) {
-    var styles = _extends({}, base, {
-      padding: "8px",
-      borderRadius: "8px",
-      cursor: "pointer",
-      fontSize: "14px",
-      fontWeight: 400,
-      color: COLORS.blackText,
-      backgroundColor: state.isSelected ? COLORS.lightBlueHover : "transparent",
-      "&:hover": {
-        backgroundColor: COLORS.lightBlueHover
-      }
-    });
-    return styles;
-  };
-  var multiValueStyles = function multiValueStyles(base) {
-    var styles = _extends({}, base, {
-      backgroundColor: COLORS.lightBlue,
-      borderRadius: "4px",
-      padding: "0 4px",
-      display: "flex",
-      alignItems: "center",
-      fontSize: "13px",
-      color: COLORS.blackText
-    });
-    return styles;
-  };
-  var multiValueRemoveStyles = function multiValueRemoveStyles(base) {
-    var styles = _extends({}, base, {
-      color: COLORS.lightGray,
-      cursor: "pointer"
-    });
-    return styles;
-  };
-  var multiValueLabelStyles = function multiValueLabelStyles(base) {
-    var styles = _extends({}, base, {
-      color: COLORS.blackText,
-      fontWeight: "400",
-      fontSize: "13px",
-      padding: 0
-    });
-    return styles;
+var Loading = function Loading() {
+  var isLoading = reactRedux.useSelector(function (state) {
+    return state.common.isLoading;
+  });
+  localStorage.setItem("LAST_TIME_REQUETST", moment().utc().format("YYYY-MM-DD HH:mm:ss"));
+  return isLoading ? React__default.createElement("div", {
+    style: loadingStyle
+  }, React__default.createElement("div", {
+    className: "spinner-border text-secondary",
+    role: "status"
+  }, React__default.createElement("span", {
+    className: "sr-only"
+  }))) : null;
+};
+
+var useGoogleSignOut = function useGoogleSignOut(props) {
+  var dispatch = reactRedux.useDispatch();
+  var onLogoutSuccess = props.onLogoutSuccess,
+    onFailure = props.onFailure;
+  var handleLogoutSuccess = function handleLogoutSuccess() {
+    onLogoutSuccess === null || onLogoutSuccess === void 0 ? void 0 : onLogoutSuccess();
   };
-  return React__default.createElement("div", {
-    className: "" + styles$a["core-select-compact"],
-    style: {
-      width: width != null ? width : "100%"
-    }
-  }, label && React__default.createElement("div", {
-    className: styles$a["label"]
-  }, React__default.createElement("label", null, label), React__default.createElement(Info, null)), React__default.createElement(ReactSelect__default, {
-    name: name,
-    value: options.filter(function (i) {
-      return value && (isMulti ? value.includes(i.value) : i.value === value);
+  var handleLogoutFailure = function handleLogoutFailure() {
+    onFailure === null || onFailure === void 0 ? void 0 : onFailure();
+  };
+  var _useGoogleLogout = reactGoogleLogin.useGoogleLogout({
+      clientId: GOOGLE_CLIENT_ID,
+      onLogoutSuccess: handleLogoutSuccess,
+      onFailure: handleLogoutFailure
     }),
-    onChange: handleChange,
-    placeholder: placeholder,
-    isDisabled: disabled,
-    isMulti: isMulti,
-    closeMenuOnSelect: !isMulti,
-    hideSelectedOptions: false,
-    options: options,
-    noOptionsMessage: function noOptionsMessage() {
-      return _noOptionsMessage ? _noOptionsMessage : "No options";
-    },
-    components: isMulti ? {
-      Option: Option$1
-    } : undefined,
-    styles: {
-      control: controlStyle,
-      input: inputStyles,
-      placeholder: placeholderStyles,
-      dropdownIndicator: dropdownIndicatorStyles,
-      indicatorSeparator: function indicatorSeparator() {
-        return {
-          display: "none"
-        };
-      },
-      indicatorsContainer: indicatorsContainerStyles,
-      valueContainer: valueContainerStyles,
-      singleValue: singleValueStyles,
-      option: optionStyles,
-      multiValue: multiValueStyles,
-      multiValueRemove: multiValueRemoveStyles,
-      multiValueLabel: multiValueLabelStyles
+    signOut = _useGoogleLogout.signOut,
+    loaded = _useGoogleLogout.loaded;
+  var handleSignOut = function handleSignOut() {
+    localStorage.clear();
+    try {
+      signOut();
+    } catch (error) {
+      console.log({
+        error: error
+      });
     }
-  }));
+    dispatch(reset());
+    window.location.href = "/login";
+  };
+  return {
+    handleSignOut: handleSignOut,
+    loaded: loaded
+  };
 };
 
-var styles$b = {"core-input-compact":"_1qmXW","label":"_1argp","icon":"_3DPRG"};
-
-var _excluded$2 = ["name", "value", "onChange", "disabled", "label", "width", "placeholder", "error", "tooltip", "onKeyDown"];
-var CoreInputCompact = function CoreInputCompact(props) {
-  var _props$name = props.name,
-    name = _props$name === void 0 ? "" : _props$name,
-    value = props.value,
-    _onChange = props.onChange,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    label = props.label,
-    width = props.width,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "Type here" : _props$placeholder,
-    error = props.error,
-    tooltip = props.tooltip,
-    _onKeyDown = props.onKeyDown,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2);
-  var _useState = React.useState(false),
-    isOpenTooltip = _useState[0],
-    setIsOpenTooltip = _useState[1];
-  var toggleTooltip = function toggleTooltip() {
-    return setIsOpenTooltip(!isOpenTooltip);
+var LayoutContext = function LayoutContext(_ref) {
+  var children = _ref.children,
+    onNavigate = _ref.onNavigate;
+  var _useGoogleSignOut = useGoogleSignOut({
+      onNavigate: onNavigate
+    }),
+    handleSignOut = _useGoogleSignOut.handleSignOut;
+  var resetAuth = function resetAuth() {
+    handleSignOut();
   };
-  return React__default.createElement("div", {
-    className: "" + styles$b["core-input-compact"],
-    style: {
-      width: width != null ? width : "100%"
+  var loadInfo = function loadInfo() {
+    try {
+      var token = firstCheckToken();
+      !token && resetAuth();
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
     }
-  }, label && React__default.createElement("div", {
-    className: styles$b["label"]
-  }, React__default.createElement("label", null, label), tooltip ? React__default.createElement("div", {
-    id: name,
-    className: styles$b["icon"]
-  }, React__default.createElement(Info, null)) : null), React__default.createElement("input", Object.assign({
-    style: {
-      backgroundColor: error ? COLORS.lightYellow : "transparent"
+  };
+  React.useEffect(function () {
+    loadInfo();
+  }, []);
+  return React__default.createElement(React.Fragment, null, children);
+};
+
+var ConfirmDialog = function ConfirmDialog(_ref) {
+  var open = _ref.open,
+    text = _ref.text,
+    _ref$cancelText = _ref.cancelText,
+    cancelText = _ref$cancelText === void 0 ? "No" : _ref$cancelText,
+    _ref$okText = _ref.okText,
+    okText = _ref$okText === void 0 ? "Yes" : _ref$okText,
+    isDelete = _ref.isDelete,
+    toggle = _ref.toggle,
+    onClose = _ref.onClose,
+    onConfirm = _ref.onConfirm;
+  return React__default.createElement(reactstrap.Modal, {
+    isOpen: open,
+    toggle: !!onClose ? onClose : toggle,
+    centered: true
+  }, React__default.createElement(reactstrap.ModalHeader, {
+    toggle: toggle
+  }, "Confirmation"), React__default.createElement(reactstrap.ModalBody, null, text), React__default.createElement(reactstrap.ModalFooter, null, React__default.createElement(reactstrap.Button, {
+    color: "secondary",
+    onClick: toggle
+  }, cancelText), React__default.createElement(reactstrap.Button, {
+    color: isDelete ? "danger" : "primary",
+    onClick: onConfirm
+  }, okText)));
+};
+
+var CommonDialog = function CommonDialog(_ref) {
+  var open = _ref.open,
+    children = _ref.children,
+    centered = _ref.centered,
+    title = _ref.title,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "xs" : _ref$size,
+    _ref$isShowHeader = _ref.isShowHeader,
+    isShowHeader = _ref$isShowHeader === void 0 ? true : _ref$isShowHeader,
+    onClose = _ref.onClose,
+    backdrop = _ref.backdrop;
+  return React__default.createElement(reactstrap.Modal, {
+    backdrop: backdrop,
+    isOpen: open,
+    toggle: onClose,
+    centered: centered,
+    size: size,
+    zIndex: 1102
+  }, isShowHeader ? React__default.createElement(reactstrap.ModalHeader, {
+    toggle: onClose
+  }, title) : React__default.createElement(material.Box, {
+    className: "p-3"
+  }, React__default.createElement(material.Typography, {
+    className: "fs-5 text-center fw-bold"
+  }, title)), children);
+};
+
+var AuthenticationMessage;
+(function (AuthenticationMessage) {
+  AuthenticationMessage["NotAllowedToRegister"] = "NotAllowedToRegister";
+  AuthenticationMessage["InvalidGoogleToken"] = "InvalidGoogleToken";
+})(AuthenticationMessage || (AuthenticationMessage = {}));
+(function (Role) {
+  Role["Student"] = "Student";
+  Role["Teacher"] = "Teacher";
+  Role["Admin"] = "Admin";
+})(exports.Role || (exports.Role = {}));
+
+var CustomPagination = function CustomPagination(_ref) {
+  var currentPage = _ref.currentPage,
+    totalPage = _ref.totalPage,
+    onChangePage = _ref.onChangePage;
+  return React__default.createElement(reactstrap.Pagination, {
+    className: "w-fit"
+  }, React__default.createElement(reactstrap.PaginationItem, {
+    disabled: currentPage <= 1
+  }, React__default.createElement(reactstrap.PaginationLink, {
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onChangePage(currentPage - 1);
     },
-    name: name,
-    value: value,
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.value);
+    previous: true,
+    href: "#"
+  })), React__default.createElement(reactstrap.PaginationItem, {
+    active: 1 === currentPage,
+    key: 1
+  }, React__default.createElement(reactstrap.PaginationLink, {
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onChangePage(1);
+    },
+    href: "#"
+  }, 1)), totalPage > 2 && React__default.createElement(reactstrap.PaginationItem, {
+    active: 2 === currentPage,
+    key: 1
+  }, React__default.createElement(reactstrap.PaginationLink, {
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onChangePage(2);
+    },
+    href: "#"
+  }, 2)), currentPage > 4 && currentPage !== totalPage && totalPage !== 5 && React__default.createElement(reactstrap.PaginationItem, {
+    disabled: true,
+    key: "first"
+  }, React__default.createElement(reactstrap.PaginationLink, {
+    href: "#"
+  }, "...")), (currentPage === 1 || currentPage === totalPage) && totalPage === 5 && React__default.createElement(reactstrap.PaginationItem, {
+    key: 3
+  }, React__default.createElement(reactstrap.PaginationLink, {
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onChangePage(3);
+    },
+    href: "#"
+  }, "3")), [currentPage - 1, currentPage, currentPage + 1].filter(function (page) {
+    return page > 2 && page < totalPage - 1;
+  }).map(function (page) {
+    return React__default.createElement(reactstrap.PaginationItem, {
+      active: page === currentPage,
+      key: page
+    }, React__default.createElement(reactstrap.PaginationLink, {
+      onClick: function onClick(e) {
+        e.preventDefault();
+        onChangePage(page);
+      },
+      href: "#"
+    }, page));
+  }), totalPage - currentPage > 4 && React__default.createElement(reactstrap.PaginationItem, {
+    disabled: true,
+    key: "last"
+  }, React__default.createElement(reactstrap.PaginationLink, {
+    href: "#"
+  }, "...")), totalPage > 3 && React__default.createElement(reactstrap.PaginationItem, {
+    active: totalPage - 1 === currentPage,
+    key: totalPage - 1
+  }, React__default.createElement(reactstrap.PaginationLink, {
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onChangePage(totalPage - 1);
     },
-    disabled: disabled,
-    placeholder: placeholder,
-    onKeyDown: function onKeyDown(e) {
-      _onKeyDown && _onKeyDown(e);
-    }
-  }, rest)), tooltip && React__default.createElement(reactstrap.Tooltip, {
-    target: name,
-    isOpen: isOpenTooltip,
-    toggle: toggleTooltip
-  }, tooltip));
-};
-
-var styles$c = {"core-label-input":"_2YqZu","size-h1":"_23-uu","size-h2":"_16lQL"};
-
-var CoreTitleInput = function CoreTitleInput(props) {
-  var _props$name = props.name,
-    name = _props$name === void 0 ? "" : _props$name,
-    value = props.value,
-    _onChange = props.onChange,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    width = props.width,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "Type here" : _props$placeholder,
-    error = props.error,
-    _props$size = props.size,
-    size = _props$size === void 0 ? "h1" : _props$size,
-    maxLength = props.maxLength;
-  return React__default.createElement("div", {
-    className: "" + styles$c["core-label-input"],
-    style: {
-      width: width != null ? width : "100%"
-    }
-  }, React__default.createElement("input", {
-    className: "" + styles$c["size-" + size],
-    style: {
-      backgroundColor: error ? COLORS.lightYellow : "transparent"
+    href: "#"
+  }, totalPage - 1)), totalPage > 1 && React__default.createElement(reactstrap.PaginationItem, {
+    active: totalPage === currentPage,
+    key: totalPage
+  }, React__default.createElement(reactstrap.PaginationLink, {
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onChangePage(totalPage);
     },
-    name: name,
-    value: value,
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.value);
+    href: "#"
+  }, totalPage)), React__default.createElement(reactstrap.PaginationItem, {
+    disabled: currentPage >= totalPage
+  }, React__default.createElement(reactstrap.PaginationLink, {
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onChangePage(currentPage + 1);
     },
-    disabled: disabled,
-    placeholder: placeholder,
-    maxLength: maxLength
-  }));
+    next: true,
+    href: "#"
+  })));
 };
 
-var styles$d = {"core-tooltip":"_1Bmhs"};
-
-var CoreTooltip = function CoreTooltip(props) {
-  var id = props.id,
-    content = props.content,
-    children = props.children,
-    placement = props.placement,
-    isDelay = props.isDelay,
-    _props$timeDelay = props.timeDelay,
-    timeDelay = _props$timeDelay === void 0 ? 1500 : _props$timeDelay,
-    innerClassName = props.innerClassName;
-  var timeoutRef = React.useRef(null);
-  var _useState = React.useState(false),
-    isOpenTooltip = _useState[0],
-    setIsOpenTooltip = _useState[1];
-  var handleMouseEnter = function handleMouseEnter() {
-    if (isDelay) {
-      timeoutRef.current = setTimeout(function () {
-        setIsOpenTooltip(true);
-      }, timeDelay);
+var useAmplitude = function useAmplitude() {
+  var _useState = React.useState(null),
+    userId = _useState[0],
+    setUserIdState = _useState[1];
+  var _useState2 = React.useState(true),
+    isTabActive = _useState2[0],
+    setIsTabActive = _useState2[1];
+  var sessionStartTime = React.useRef(null);
+  var currentSessionStart = React.useRef(null);
+  var savedUserProperties = React.useRef({});
+  var hasTrackedInitialSession = React.useRef(false);
+  var setUserProperties = React.useCallback(function (properties) {
+    savedUserProperties.current = _extends({}, savedUserProperties.current, properties);
+    var identify = new amplitude.Identify();
+    Object.entries(properties).forEach(function (_ref) {
+      var key = _ref[0],
+        value = _ref[1];
+      identify.set(key, value);
+    });
+    amplitude.identify(identify);
+  }, []);
+  var trackEvent = React.useCallback(function (_ref2) {
+    var eventName = _ref2.eventName,
+      eventProperties = _ref2.eventProperties;
+    amplitude.track(eventName, _extends({}, savedUserProperties.current, eventProperties, {
+      timestamp: new Date().toISOString()
+    }));
+  }, []);
+  var setUserId = React.useCallback(function (newUserId) {
+    var prevUserId = userId;
+    setUserIdState(newUserId);
+    if (newUserId) {
+      var prefixedUserId = "edusfere:" + newUserId;
+      amplitude.setUserId(prefixedUserId);
+      if (prevUserId !== newUserId && !hasTrackedInitialSession.current) {
+        hasTrackedInitialSession.current = true;
+        sessionStartTime.current = new Date();
+        currentSessionStart.current = new Date();
+        trackEvent({
+          eventName: exports.AmplitudeEvent.SESSION_START,
+          eventProperties: {
+            start_time: new Date().toISOString()
+          }
+        });
+      }
+    }
+  }, [userId, trackEvent]);
+  var reset = React.useCallback(function () {
+    amplitude.reset();
+    setUserIdState(null);
+    sessionStartTime.current = null;
+    currentSessionStart.current = null;
+    savedUserProperties.current = {};
+    hasTrackedInitialSession.current = false;
+  }, []);
+  var trackTabActivity = React.useCallback(function (isActive) {
+    if (!userId) return;
+    var now = new Date();
+    if (isActive) {
+      currentSessionStart.current = now;
+      trackEvent({
+        eventName: exports.AmplitudeEvent.SESSION_START,
+        eventProperties: {
+          start_time: now.toISOString()
+        }
+      });
     } else {
-      setIsOpenTooltip(true);
+      if (currentSessionStart.current) {
+        var sessionDuration = now.getTime() - currentSessionStart.current.getTime();
+        trackEvent({
+          eventName: exports.AmplitudeEvent.SESSION_END,
+          eventProperties: {
+            session_duration_seconds: Math.round(sessionDuration / 1000),
+            start_time: currentSessionStart.current.toISOString(),
+            end_time: now.toISOString()
+          }
+        });
+        currentSessionStart.current = null;
+      }
     }
+  }, [userId, trackEvent]);
+  var trackPageUnload = React.useCallback(function () {
+    if (!userId || !currentSessionStart.current) return;
+    var now = new Date();
+    var sessionDuration = now.getTime() - currentSessionStart.current.getTime();
+    trackEvent({
+      eventName: exports.AmplitudeEvent.SESSION_END,
+      eventProperties: {
+        session_duration_seconds: Math.round(sessionDuration / 1000),
+        start_time: currentSessionStart.current.toISOString(),
+        end_time: now.toISOString(),
+        end_reason: 'page_unload'
+      }
+    });
+  }, [userId, trackEvent]);
+  React.useEffect(function () {
+    var handleVisibilityChange = function handleVisibilityChange() {
+      var isVisible = !document.hidden;
+      setIsTabActive(isVisible);
+      trackTabActivity(isVisible);
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return function () {
+      return document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [trackTabActivity]);
+  React.useEffect(function () {
+    var handleFocus = function handleFocus() {
+      setIsTabActive(true);
+      trackTabActivity(true);
+    };
+    var handleBlur = function handleBlur() {
+      setIsTabActive(false);
+      trackTabActivity(false);
+    };
+    window.addEventListener('focus', handleFocus);
+    window.addEventListener('blur', handleBlur);
+    return function () {
+      window.removeEventListener('focus', handleFocus);
+      window.removeEventListener('blur', handleBlur);
+    };
+  }, [trackTabActivity]);
+  React.useEffect(function () {
+    var handleBeforeUnload = function handleBeforeUnload() {
+      trackPageUnload();
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return function () {
+      return window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [trackPageUnload]);
+  return {
+    setUserId: setUserId,
+    setUserProperties: setUserProperties,
+    trackEvent: trackEvent,
+    reset: reset,
+    userId: userId,
+    isTabActive: isTabActive,
+    sessionStartTime: sessionStartTime.current,
+    currentSessionStart: currentSessionStart.current
   };
-  var handleMouseLeave = function handleMouseLeave() {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
+};
+
+var initializeAmplitude = function initializeAmplitude(apiKey) {
+  amplitude.init(apiKey, {
+    defaultTracking: {
+      pageViews: true,
+      sessions: true,
+      formInteractions: true
     }
-    setIsOpenTooltip(false);
-  };
-  return React__default.createElement("div", {
-    id: id,
-    className: styles$d["core-tooltip"],
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, React__default.createElement("div", {
-    className: styles$d["icon"]
-  }, children), content && React__default.createElement(reactstrap.Tooltip, {
-    target: id,
-    isOpen: isOpenTooltip,
-    placement: placement,
-    innerClassName: innerClassName
-  }, content));
+  });
 };
 
 var getErrorMessage = function getErrorMessage(error, defaultErrorMessage) {