mario-core 2.9.415-feedback → 2.9.416-feedback

package/dist/index.js

@@ -22167,6 +22167,12 @@ var LANGUAGES = [{
 var DEFAULT_LANGUAGE_CODE = "en-US";
 var SUPPORTED_LANGUAGES_CODE = ["en-US", "en-GB", "ar", "es", "zh"];
 var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+var CsvImportType;
+
+(function (CsvImportType) {
+  CsvImportType[CsvImportType["Teacher"] = 0] = "Teacher";
+  CsvImportType[CsvImportType["Admin"] = 1] = "Admin";
+})(CsvImportType || (CsvImportType = {}));
 
 var resources$5 = {
   "en-US": {
@@ -41880,212 +41886,6 @@ var TheHeaderDropdown = function TheHeaderDropdown(_ref) {
   })), t("log_out")))));
 };
 
-var apiGetLanguage = function apiGetLanguage() {
-  return api.get(BASE_URL + "/api/language");
-};
-
-var apiUpdateLanguage = function apiUpdateLanguage(lang) {
-  return api.put(BASE_URL + "/api/language?lang=" + lang);
-};
-
-var LANGUAGE_SYSTEM = "LANGUAGE_SYSTEM";
-
-var useLanguages = function useLanguages() {
-  var dispatch = reactRedux.useDispatch();
-
-  var _useTranslation = reactI18next.useTranslation(),
-      i18n = _useTranslation.i18n;
-
-  var language = reactRedux.useSelector(function (state) {
-    return state.common.language;
-  });
-  var defaultLanguage = getCookieValue(LANGUAGE_SYSTEM) != null ? getCookieValue(LANGUAGE_SYSTEM) : DEFAULT_LANGUAGE_CODE;
-
-  var _useState = React.useState([]),
-      languageList = _useState[0],
-      setLanguageList = _useState[1];
-
-  var _useState2 = React.useState(false),
-      dropdownOpen = _useState2[0],
-      setDropdownOpen = _useState2[1];
-
-  var _useState3 = React.useState(defaultLanguage),
-      currentLang = _useState3[0],
-      setCurrentLang = _useState3[1];
-
-  var toggle = function toggle() {
-    return setDropdownOpen(function (prevState) {
-      return !prevState;
-    });
-  };
-
-  var changeLanguageApp = function changeLanguageApp(lang) {
-    try {
-      var _temp3 = function _temp3() {
-        dispatch(setLoading(false));
-      };
-
-      dispatch(setLoading(true));
-
-      var _temp4 = _catch(function () {
-        return Promise.resolve(apiUpdateLanguage(lang)).then(function () {
-          i18n.changeLanguage(lang);
-          setCurrentLang(lang);
-          dispatch(setLanguage(lang));
-        });
-      }, function (err) {
-        var _err$response, _err$response$data;
-
-        dispatch(setAlert({
-          type: "danger",
-          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
-        }));
-      });
-
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  var getListLanguage = function getListLanguage() {
-    try {
-      var _temp6 = _catch(function () {
-        return Promise.resolve(apiGetLanguage()).then(function (res) {
-          setLanguageList(res.data);
-        });
-      }, function (err) {
-        var _err$response2, _err$response2$data;
-
-        dispatch(setAlert({
-          type: "danger",
-          message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
-        }));
-      });
-
-      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  React.useEffect(function () {
-    defaultLanguage != language && changeLanguageApp(defaultLanguage);
-    getListLanguage();
-  }, []);
-  return {
-    languageList: languageList,
-    toggle: toggle,
-    dropdownOpen: dropdownOpen,
-    currentLang: currentLang,
-    changeLanguageApp: changeLanguageApp,
-    setCurrentLang: setCurrentLang
-  };
-};
-
-var TheLanguageDropdown = function TheLanguageDropdown() {
-  var _useLanguages = useLanguages(),
-      languageList = _useLanguages.languageList,
-      toggle = _useLanguages.toggle,
-      dropdownOpen = _useLanguages.dropdownOpen,
-      currentLang = _useLanguages.currentLang,
-      changeLanguageApp = _useLanguages.changeLanguageApp;
-
-  var currentLanguage = React.useMemo(function () {
-    var current = languageList.find(function (i) {
-      return i.code === currentLang;
-    });
-    if (!current) return null;
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("img", {
-      className: "mr-2 " + styles['dropdown-menu-flag'],
-      src: "" + getStaticFileUrl(current.image)
-    }), " ", current.name);
-  }, [currentLang, languageList]);
-  return React__default.createElement(reactstrap.Dropdown, {
-    isOpen: dropdownOpen,
-    toggle: toggle,
-    className: "" + styles["dropdown-menu"]
-  }, React__default.createElement(reactstrap.DropdownToggle, {
-    className: styles["header-avatar"] + " d-flex align-items-center"
-  }, React__default.createElement("span", {
-    style: {
-      color: "#000",
-      textTransform: "capitalize",
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, currentLanguage, React__default.createElement(bs.BsChevronDown, {
-    className: "ml-2",
-    style: {
-      fontSize: '10px'
-    }
-  }))), React__default.createElement(reactstrap.DropdownMenu, {
-    className: styles["dropdown-content-language"]
-  }, !!languageList && languageList.length > 0 && languageList.map(function (lang, index) {
-    return React__default.createElement(reactstrap.DropdownItem, {
-      key: lang.code,
-      className: styles["dropdown-change"] + " px-0 py-0 " + (index === languageList.length - 1 ? "pb-2" : "pt-2"),
-      onClick: function onClick() {
-        return changeLanguageApp(lang.code);
-      }
-    }, React__default.createElement("div", {
-      className: styles["dropdown-item-language"] + " " + styles["item-logout"] + " " + (currentLang == lang.code ? styles['dropdown-item-language-active'] : "") + " d-flex align-items-center w-100"
-    }, React__default.createElement("span", {
-      className: "mr-2 d-flex hover-opacity"
-    }, React__default.createElement("img", {
-      style: {
-        width: "30px",
-        height: "25px",
-        borderRadius: "5px"
-      },
-      src: getStaticFileUrl(lang.image)
-    })), lang.name));
-  })));
-};
-
-var TheHeader = function TheHeader(_ref) {
-  var onToggleModel = _ref.onToggleModel;
-  var dispatch = reactRedux.useDispatch();
-  var sidebarShow = reactRedux.useSelector(function (state) {
-    return state.common.sidebarShow;
-  });
-
-  var _useTranslation = reactI18next.useTranslation(),
-      t = _useTranslation.t;
-
-  var toggleSidebarMobile = function toggleSidebarMobile() {
-    var val = [false, "responsive"].includes(sidebarShow) ? true : "responsive";
-    dispatch(setSidebar(val));
-  };
-
-  var isDistrict = window.location.host.includes("-district");
-  return React__default.createElement(react.CHeader, {
-    withSubheader: true,
-    className: "d-flex align-items-center justify-content-end"
-  }, React__default.createElement(react.CToggler, {
-    inHeader: true,
-    className: "ml-md-3 d-lg-none",
-    onClick: toggleSidebarMobile
-  }), React__default.createElement(react.CHeaderBrand, {
-    className: "mx-auto flex-grow-1 d-lg-none",
-    to: "/"
-  }, React__default.createElement("img", {
-    src: getStaticFileUrl(Images.LOGO_HEADER),
-    className: styles["header-logo"]
-  })), React__default.createElement(react.CHeaderNav, {
-    className: "pr-3"
-  }, React__default.createElement(TheLanguageDropdown, null), React__default.createElement("a", {
-    className: "mr-3",
-    style: {
-      color: '#000'
-    },
-    href: '/privacy-policy',
-    target: "blank"
-  }, t("privacy_policy")), !isDistrict && React__default.createElement(NotificationButton, null), React__default.createElement(TheHeaderDropdown, {
-    onToggleModel: onToggleModel
-  })));
-};
-
 var TITLE$3 = "Not found";
 
 var NotFound = function NotFound() {
@@ -42143,277 +41943,25 @@ var TheContent = function TheContent(_ref) {
 
 var TheContent$1 = React__default.memo(TheContent);
 
-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 buttonTextStyle = {
+  fontWeight: 500
+};
+var buttonStyle = {
+  height: 38
 };
 
-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"
-  }, "Loading..."))) : null;
-};
-
-var firstCheckToken = function firstCheckToken() {
-  return Promise.resolve(_catch(function () {
-    var token = getAccessToken();
-    return token ? Promise.resolve(checkToken(token)).then(function (tokenStatus) {
-      return tokenStatus.data ? true : false;
-    }) : false;
-  }, function () {
-    return false;
-  }));
-};
-
-var canAccess = function canAccess(userRoles, componentRoles) {
-  if (!Array.isArray(userRoles)) {
-    return false;
-  }
-
-  if (Array.isArray(componentRoles)) {
-    var intersects = userRoles.filter(function (i) {
-      return componentRoles.includes(i);
-    });
-    return intersects.length > 0;
-  }
-
-  return true;
-};
-
-var ModelSelectRole = function ModelSelectRole(_ref) {
-  var _handleUserRole;
-
-  var open = _ref.open,
-      onToggleModel = _ref.onToggleModel;
-  var dispatch = reactRedux.useDispatch();
-
-  var _useTranslation = reactI18next.useTranslation(),
-      t = _useTranslation.t;
-
-  var history = reactRouterDom.useHistory();
-  var pathname = window.location.pathname;
-  var user = reactRedux.useSelector(function (state) {
-    return state.common.user;
-  });
-  var roles = user === null || user === void 0 ? void 0 : user.roles;
-
-  var handleSelectUserRoles = function handleSelectUserRoles(roles) {
-    dispatch(setLoading(true));
-    var roleSelect = roles.includes("Teacher/Assistant") ? ["Teacher", "Assistant"] : roles;
-    dispatch(setUser(_extends({}, user, {
-      roles: roleSelect
-    })));
-    localStorage.setItem("ROLES", roleSelect.toString());
-    onToggleModel();
-
-    if (roles.includes("Parent")) {
-      history.push("/parent");
-    } else if (roles.includes("Admin")) {
-      history.push("/admin/home");
-    } else {
-      pathname !== "/home" ? history.push("/home") : window.location.reload();
-    }
-  };
-
-  return React__default.createElement(reactstrap.Modal, {
-    isOpen: open,
-    toggle: function toggle() {
-      return onToggleModel();
-    },
-    className: "" + styles["model-switch-roles"],
-    centered: true
-  }, React__default.createElement("p", {
-    className: "" + styles["title"]
-  }, t("continue_as")), React__default.createElement("div", null, (_handleUserRole = handleUserRole(user === null || user === void 0 ? void 0 : user.roles)) === null || _handleUserRole === void 0 ? void 0 : _handleUserRole.map(function (r) {
-    return React__default.createElement("p", {
-      key: r,
-      className: styles["item-select-role"] + " " + styles[roles.includes("Teacher") && roles.includes("Assistant") && r === "Teacher/Assistant" && !roles.includes("Admin") || roles.includes("Admin") && r === "Admin" || roles.includes(r) && !roles.includes("Admin") ? "item-role-active" : ""],
-      onClick: function onClick() {
-        return handleSelectUserRoles([r]);
-      }
-    }, r == "SecondaryTeacher" ? "Support Teacher" : r);
-  })));
-};
-
-var TheLayout = function TheLayout(_ref) {
-  var routes = _ref.routes,
-      navigation = _ref.navigation;
-  var history = reactRouterDom.useHistory();
-  var dispatch = reactRedux.useDispatch();
-  var user = reactRedux.useSelector(function (state) {
-    return state.common.user;
-  });
-  var language = reactRedux.useSelector(function (state) {
-    return state.common.language;
-  });
-
-  var _useState = React.useState(false),
-      openModelSelectRole = _useState[0],
-      setOpenModelSelectRole = _useState[1];
-
-  var _useTranslation = reactI18next.useTranslation(),
-      t = _useTranslation.t;
-
-  var location = reactRouterDom.useLocation();
-  var isNotification = location.pathname.includes("notifications");
-  var isDistrict = window.location.host.includes("-district");
-
-  var handleToggleModel = function handleToggleModel() {
-    setOpenModelSelectRole(!openModelSelectRole);
-  };
-
-  var authRoutes = React.useMemo(function () {
-    return routes.filter(function (route) {
-      return canAccess(user === null || user === void 0 ? void 0 : user.roles, route.roles);
-    }).filter(function (route) {
-      return !!route.isDistrict === isDistrict;
-    });
-  }, [user, language]);
-  var authNavigations = React.useMemo(function () {
-    return navigation.map(function (item) {
-      var _item$_children, _item$_children2;
-
-      return _extends({}, item, {
-        name: t(item.name),
-        _children: item !== null && item !== void 0 && (_item$_children = item._children) !== null && _item$_children !== void 0 && _item$_children.length ? item === null || item === void 0 ? void 0 : (_item$_children2 = item._children) === null || _item$_children2 === void 0 ? void 0 : _item$_children2.map(function (x) {
-          return _extends({}, x, {
-            name: t(x.name)
-          });
-        }) : undefined
-      });
-    }).filter(function (nav) {
-      return canAccess(user === null || user === void 0 ? void 0 : user.roles, nav.roles);
-    }).filter(function (nav) {
-      return !!nav.isDistrict === isDistrict;
-    });
-  }, [user, language]);
-
-  var getInformationSetting = function getInformationSetting() {
-    try {
-      var _temp2 = _catch(function () {
-        return Promise.resolve(getSchoolSettings()).then(function (res) {
-          dispatch(setSandboxMode(res.data.isSandboxMode));
-        });
-      }, function (err) {
-        console.error(err);
-      });
-
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  React.useEffect(function () {
-    checkAuthentication();
-  }, []);
-  React.useEffect(function () {
-    getInformationSetting();
-  }, [location.pathname]);
-
-  var checkAuthentication = function checkAuthentication() {
-    try {
-      var _temp4 = _catch(function () {
-        return Promise.resolve(firstCheckToken()).then(function (tokenStatus) {
-          tokenStatus ? loadInfo() : resetAuth();
-        });
-      }, function () {
-        resetAuth();
-      });
-
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  var loadInfo = function loadInfo() {
-    try {
-      var _temp6 = _catch(function () {
-        return Promise.resolve(getInfo()).then(function (info) {
-          var _info$data, _info$data$roles;
-
-          if (!info || !(info !== null && info !== void 0 && (_info$data = info.data) !== null && _info$data !== void 0 && (_info$data$roles = _info$data.roles) !== null && _info$data$roles !== void 0 && _info$data$roles.includes("Admin"))) {
-            resetAuth();
-          }
-
-          dispatch(setUser(info.data));
-        });
-      }, function () {
-        resetAuth();
-      });
-
-      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  var resetAuth = function resetAuth() {
-    localStorage.removeItem(ACCESS_TOKEN);
-    sessionStorage.removeItem(ACCESS_TOKEN);
-    localStorage.removeItem("ROLES");
-    history.push("/");
-  };
-
-  if (!user) {
-    return React__default.createElement(Loading, null);
-  }
-
-  return React__default.createElement("div", {
-    className: "c-app c-default-layout"
-  }, !isNotification && React__default.createElement(TheSidebar, {
-    navigation: authNavigations
-  }), React__default.createElement("div", {
-    className: "c-wrapper"
-  }, !isNotification && React__default.createElement(TheHeader, {
-    onToggleModel: handleToggleModel
-  }), React__default.createElement("div", {
-    className: "c-body bg-white"
-  }, React__default.createElement(TheContent$1, {
-    routes: authRoutes
-  }))), React__default.createElement(ModelSelectRole, {
-    open: openModelSelectRole,
-    onToggleModel: handleToggleModel
-  }));
-};
-
-var buttonTextStyle = {
-  fontWeight: 500
-};
-var buttonStyle = {
-  height: 38
-};
-
-var AddButton = function AddButton(_ref) {
-  var text = _ref.text,
-      onClick = _ref.onClick;
-  return React__default.createElement(reactstrap.Button, {
-    onClick: onClick,
-    color: 'success',
-    style: buttonStyle,
-    className: 'd-flex align-items-center'
-  }, React__default.createElement(fa.FaPlus, null), React__default.createElement("span", {
-    className: 'ml-2',
-    style: buttonTextStyle
-  }, text));
+var AddButton = function AddButton(_ref) {
+  var text = _ref.text,
+      onClick = _ref.onClick;
+  return React__default.createElement(reactstrap.Button, {
+    onClick: onClick,
+    color: 'success',
+    style: buttonStyle,
+    className: 'd-flex align-items-center'
+  }, React__default.createElement(fa.FaPlus, null), React__default.createElement("span", {
+    className: 'ml-2',
+    style: buttonTextStyle
+  }, text));
 };
 
 var DeleteButtonIcon = function DeleteButtonIcon(_ref) {
@@ -46299,6 +45847,9 @@ var importUsersCSV = function importUsersCSV(formData) {
 var downloadTemplateFileUser = function downloadTemplateFileUser() {
   return api.get(CSV_FILE_TEACHER + "/download-template-file-user");
 };
+var validateCsvApi = function validateCsvApi(formData, type) {
+  return api.post(CSV_FILE_TEACHER + "/validate-csv-template-student/" + type, formData);
+};
 
 var CSVType;
 
@@ -50095,7 +49646,7 @@ var style$2 = {
   color: "#fff",
   fontWeight: 500,
   fontSize: "14px",
-  height: "100%",
+  height: "56px",
   justifyContent: "center"
 };
 
@@ -50194,15 +49745,19 @@ var useCSVImportTab = function useCSVImportTab() {
       studentDataFile = _useState5[0],
       setStudentDataFile = _useState5[1];
 
+  var _useState6 = React.useState([]),
+      errorsValidate = _useState6[0],
+      setErrorsValidate = _useState6[1];
+
   var isCheckDomainIBS = true;
 
-  var _useState6 = React.useState(0),
-      defaultTeacher = _useState6[0],
-      setDefaultTeacher = _useState6[1];
+  var _useState7 = React.useState(0),
+      defaultTeacher = _useState7[0],
+      setDefaultTeacher = _useState7[1];
 
-  var _useState7 = React.useState(""),
-      fileName = _useState7[0],
-      setFileName = _useState7[1];
+  var _useState8 = React.useState(""),
+      fileName = _useState8[0],
+      setFileName = _useState8[1];
 
   React.useEffect(function () {
     document.title = title$5;
@@ -50247,10 +49802,10 @@ var useCSVImportTab = function useCSVImportTab() {
 
   var upload = React.useCallback(function (file) {
     try {
-      var _exit2 = false;
+      var _exit3 = false;
 
-      var _temp12 = function _temp12(_result2) {
-        if (_exit2) return _result2;
+      var _temp12 = function _temp12(_result) {
+        if (_exit3) return _result;
         dispatch(setLoading(false));
         var inputId = document.getElementById(id$1);
         var input = document.getElementById('import-student');
@@ -50264,103 +49819,114 @@ var useCSVImportTab = function useCSVImportTab() {
       dispatch(setLoading(true));
 
       var _temp13 = _catch(function () {
-        function _temp9(_result) {
-          if (_exit2) return _result;
-          dispatch(setAlert({
-            type: "success",
-            message: "Import CSV successfully"
-          }));
-        }
-
         var formData = new FormData();
         formData.append("file", file, file.name);
+        var typeOfCsv = type === CSVType$1.AllUser ? CsvImportType.Admin : CsvImportType.Teacher;
+        return Promise.resolve(validateCsvApi(formData, typeOfCsv)).then(function (res) {
+          var _exit2 = false;
 
-        var _temp8 = function () {
-          if (type == CSVType$1.AllUser) {
-            return Promise.resolve(file.text()).then(function (fileTextRaw) {
-              var fileText = fileTextRaw.trim();
-              var rows = fileText.split("\n").map(function (row) {
-                return row.trim();
-              });
-              var headerIndex = rows.findIndex(function (row) {
-                return row.split(",").includes("First Name");
-              });
-
-              if (headerIndex === 0) {
-                throw new Error("Invalid CSV: Missing header row.");
-              }
+          function _temp9(_result2) {
+            if (_exit2) return _result2;
+            dispatch(setAlert({
+              type: "success",
+              message: "Import CSV successfully"
+            }));
+          }
 
-              fileText = rows.slice(headerIndex).join("\n");
-              var parsedData = Papa.parse(fileText, {
-                header: true,
-                skipEmptyLines: true
-              });
-              var header = parsedData.meta.fields;
-              var dataRows = parsedData.data;
+          if (res.data && res.data.length > 0) {
+            setErrorsValidate(res.data);
+            dispatch(setLoading(false));
+            _exit3 = true;
+            return;
+          }
 
-              if (!!!dataRows.length) {
-                dispatch(setLoading(false));
-                dispatch(setAlert({
-                  type: "danger",
-                  message: 'The file has no data or some column names are misformed.'
-                }));
-                _exit2 = true;
-                return;
-              }
+          var _temp8 = function () {
+            if (type == CSVType$1.AllUser) {
+              return Promise.resolve(file.text()).then(function (fileTextRaw) {
+                var fileText = fileTextRaw.trim();
+                var rows = fileText.split("\n").map(function (row) {
+                  return row.trim();
+                });
+                var headerIndex = rows.findIndex(function (row) {
+                  return row.split(",").includes("First Name");
+                });
 
-              var chunkSize = 10;
-              var chunks = [];
+                if (headerIndex === 0) {
+                  throw new Error("Invalid CSV: Missing header row.");
+                }
 
-              for (var _i = 0; _i < dataRows.length; _i += chunkSize) {
-                var chunkData = dataRows.slice(_i, _i + chunkSize);
-                var valuesOnly = chunkData.map(function (row) {
-                  return Object.values(row).map(function (v) {
-                    return (v != null ? v : "").toString().trim();
-                  });
+                fileText = rows.slice(headerIndex).join("\n");
+                var parsedData = Papa.parse(fileText, {
+                  header: true,
+                  skipEmptyLines: true
                 });
+                var header = parsedData.meta.fields;
+                var dataRows = parsedData.data;
 
-                if (header) {
-                  valuesOnly.unshift(header);
+                if (!!!dataRows.length) {
+                  dispatch(setLoading(false));
+                  dispatch(setAlert({
+                    type: "danger",
+                    message: 'The file has no data or some column names are misformed.'
+                  }));
+                  _exit3 = true;
+                  return;
                 }
 
-                console.log({
-                  valuesOnly: valuesOnly
-                });
-                chunks.push(valuesOnly);
-              }
+                var chunkSize = 10;
+                var chunks = [];
 
-              var _temp5 = _forTo(chunks, function (i) {
-                return Promise.resolve(importChunkFileUsers({
-                  chunks: chunks[i]
-                })).then(function () {
-                  return Promise.resolve(new Promise(function (res) {
-                    return setTimeout(res, 500);
-                  })).then(function () {});
-                });
-              });
+                for (var _i = 0; _i < dataRows.length; _i += chunkSize) {
+                  var chunkData = dataRows.slice(_i, _i + chunkSize);
+                  var valuesOnly = chunkData.map(function (row) {
+                    return Object.values(row).map(function (v) {
+                      return (v != null ? v : "").toString().trim();
+                    });
+                  });
 
-              if (_temp5 && _temp5.then) return _temp5.then(function () {});
-            });
-          } else {
-            var _temp14 = function () {
-              if (isCheckDomainIBS) {
-                var _temp15 = function () {
-                  if (type == CSVType$1.ClassReflection) {
-                    return Promise.resolve(importClassReflectionCSV$1(formData)).then(function () {});
+                  if (header) {
+                    valuesOnly.unshift(header);
                   }
-                }();
 
-                if (_temp15 && _temp15.then) return _temp15.then(function () {});
-              } else {
-                return Promise.resolve(importCSV$1(formData, type.toString())).then(function () {});
-              }
-            }();
+                  console.log({
+                    valuesOnly: valuesOnly
+                  });
+                  chunks.push(valuesOnly);
+                }
 
-            if (_temp14 && _temp14.then) return _temp14.then(function () {});
-          }
-        }();
+                var _temp5 = _forTo(chunks, function (i) {
+                  return Promise.resolve(importChunkFileUsers({
+                    chunks: chunks[i]
+                  })).then(function () {
+                    return Promise.resolve(new Promise(function (res) {
+                      return setTimeout(res, 500);
+                    })).then(function () {});
+                  });
+                });
 
-        return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
+                if (_temp5 && _temp5.then) return _temp5.then(function () {});
+              });
+            } else {
+              var _temp14 = function () {
+                if (isCheckDomainIBS) {
+                  var _temp15 = function () {
+                    if (type == CSVType$1.ClassReflection) {
+                      return Promise.resolve(importClassReflectionCSV$1(formData)).then(function () {});
+                    }
+                  }();
+
+                  if (_temp15 && _temp15.then) return _temp15.then(function () {});
+                } else {
+                  return Promise.resolve(importCSV$1(formData, type.toString())).then(function () {});
+                }
+              }();
+
+              if (_temp14 && _temp14.then) return _temp14.then(function () {});
+            }
+          }();
+
+          return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
+        });
       }, function (err) {
         var _err$response, _err$response$data;
 
@@ -50515,7 +50081,9 @@ var useCSVImportTab = function useCSVImportTab() {
     defaultTeacher: defaultTeacher,
     fileName: fileName,
     onStudentSubmit: onStudentSubmit,
-    downloadTemplateUser: downloadTemplateUser
+    downloadTemplateUser: downloadTemplateUser,
+    errorsValidate: errorsValidate,
+    setErrorsValidate: setErrorsValidate
   };
 };
 
@@ -50542,7 +50110,8 @@ var CSVImport = function CSVImport() {
       setArrStudent = _useCSVImportTab.setArrStudent,
       buttons = _useCSVImportTab.buttons,
       upload = _useCSVImportTab.upload,
-      downloadTemplateUser = _useCSVImportTab.downloadTemplateUser;
+      downloadTemplateUser = _useCSVImportTab.downloadTemplateUser,
+      errorsValidate = _useCSVImportTab.errorsValidate;
 
   var _useTranslation = reactI18next.useTranslation(),
       t = _useTranslation.t;
@@ -50595,9 +50164,9 @@ var CSVImport = function CSVImport() {
       accept: "text/csv"
     }), React__default.createElement(reactstrap.Col, {
       md: 6,
-      className: "mb-2 d-flex align-items-end"
+      className: "mb-2 d-flex mt-5"
     }, React__default.createElement(reactstrap.Row, {
-      className: "w-100"
+      className: "w-100 flex-column"
     }, React__default.createElement(reactstrap.Col, {
       md: 12,
       className: ""
@@ -50626,7 +50195,9 @@ var CSVImport = function CSVImport() {
     })))), React__default.createElement(reactstrap.Col, {
       md: 6,
       className: "mb-2"
-    }, React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
+    }, React__default.createElement(reactstrap.Row, {
+      className: "flex-column"
+    }, React__default.createElement(reactstrap.Col, {
       md: 12,
       className: "mb-2 text-right"
     }, React__default.createElement(reactstrap.Button, {
@@ -50656,7 +50227,12 @@ var CSVImport = function CSVImport() {
           return setType(button.type);
         }
       });
-    })))));
+    })), (errorsValidate === null || errorsValidate === void 0 ? void 0 : errorsValidate.length) > 0 && errorsValidate.map(function (error, index) {
+      return React__default.createElement(ErrorHandler, {
+        key: index,
+        text: error
+      });
+    }))));
   }))) );
 };
 
@@ -51741,6 +51317,34 @@ var UserDetail = function UserDetail() {
   });
 };
 
+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"
+  }, "Loading..."))) : null;
+};
+
 var ScrollToTop = function ScrollToTop() {
   var _useLocation = reactRouterDom.useLocation(),
       pathname = _useLocation.pathname;
@@ -54764,6 +54368,32 @@ var store = toolkit.configureStore({
   }
 });
 
+var firstCheckToken = function firstCheckToken() {
+  return Promise.resolve(_catch(function () {
+    var token = getAccessToken();
+    return token ? Promise.resolve(checkToken(token)).then(function (tokenStatus) {
+      return tokenStatus.data ? true : false;
+    }) : false;
+  }, function () {
+    return false;
+  }));
+};
+
+var canAccess = function canAccess(userRoles, componentRoles) {
+  if (!Array.isArray(userRoles)) {
+    return false;
+  }
+
+  if (Array.isArray(componentRoles)) {
+    var intersects = userRoles.filter(function (i) {
+      return componentRoles.includes(i);
+    });
+    return intersects.length > 0;
+  }
+
+  return true;
+};
+
 var isInViewport = function isInViewport(el) {
   var rect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
   return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
@@ -54797,6 +54427,410 @@ var generateRandomString = (function () {
   return (Math.random() + 1).toString(36).substring(7);
 });
 
+var apiGetLanguage = function apiGetLanguage() {
+  return api.get(BASE_URL + "/api/language");
+};
+
+var apiUpdateLanguage = function apiUpdateLanguage(lang) {
+  return api.put(BASE_URL + "/api/language?lang=" + lang);
+};
+
+var LANGUAGE_SYSTEM = "LANGUAGE_SYSTEM";
+
+var useLanguages = function useLanguages() {
+  var dispatch = reactRedux.useDispatch();
+
+  var _useTranslation = reactI18next.useTranslation(),
+      i18n = _useTranslation.i18n;
+
+  var language = reactRedux.useSelector(function (state) {
+    return state.common.language;
+  });
+  var defaultLanguage = getCookieValue(LANGUAGE_SYSTEM) != null ? getCookieValue(LANGUAGE_SYSTEM) : DEFAULT_LANGUAGE_CODE;
+
+  var _useState = React.useState([]),
+      languageList = _useState[0],
+      setLanguageList = _useState[1];
+
+  var _useState2 = React.useState(false),
+      dropdownOpen = _useState2[0],
+      setDropdownOpen = _useState2[1];
+
+  var _useState3 = React.useState(defaultLanguage),
+      currentLang = _useState3[0],
+      setCurrentLang = _useState3[1];
+
+  var toggle = function toggle() {
+    return setDropdownOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+
+  var changeLanguageApp = function changeLanguageApp(lang) {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(apiUpdateLanguage(lang)).then(function () {
+          i18n.changeLanguage(lang);
+          setCurrentLang(lang);
+          dispatch(setLanguage(lang));
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var getListLanguage = function getListLanguage() {
+    try {
+      var _temp6 = _catch(function () {
+        return Promise.resolve(apiGetLanguage()).then(function (res) {
+          setLanguageList(res.data);
+        });
+      }, function (err) {
+        var _err$response2, _err$response2$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  React.useEffect(function () {
+    defaultLanguage != language && changeLanguageApp(defaultLanguage);
+    getListLanguage();
+  }, []);
+  return {
+    languageList: languageList,
+    toggle: toggle,
+    dropdownOpen: dropdownOpen,
+    currentLang: currentLang,
+    changeLanguageApp: changeLanguageApp,
+    setCurrentLang: setCurrentLang
+  };
+};
+
+var TheLanguageDropdown = function TheLanguageDropdown() {
+  var _useLanguages = useLanguages(),
+      languageList = _useLanguages.languageList,
+      toggle = _useLanguages.toggle,
+      dropdownOpen = _useLanguages.dropdownOpen,
+      currentLang = _useLanguages.currentLang,
+      changeLanguageApp = _useLanguages.changeLanguageApp;
+
+  var currentLanguage = React.useMemo(function () {
+    var current = languageList.find(function (i) {
+      return i.code === currentLang;
+    });
+    if (!current) return null;
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("img", {
+      className: "mr-2 " + styles['dropdown-menu-flag'],
+      src: "" + getStaticFileUrl(current.image)
+    }), " ", current.name);
+  }, [currentLang, languageList]);
+  return React__default.createElement(reactstrap.Dropdown, {
+    isOpen: dropdownOpen,
+    toggle: toggle,
+    className: "" + styles["dropdown-menu"]
+  }, React__default.createElement(reactstrap.DropdownToggle, {
+    className: styles["header-avatar"] + " d-flex align-items-center"
+  }, React__default.createElement("span", {
+    style: {
+      color: "#000",
+      textTransform: "capitalize",
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, currentLanguage, React__default.createElement(bs.BsChevronDown, {
+    className: "ml-2",
+    style: {
+      fontSize: '10px'
+    }
+  }))), React__default.createElement(reactstrap.DropdownMenu, {
+    className: styles["dropdown-content-language"]
+  }, !!languageList && languageList.length > 0 && languageList.map(function (lang, index) {
+    return React__default.createElement(reactstrap.DropdownItem, {
+      key: lang.code,
+      className: styles["dropdown-change"] + " px-0 py-0 " + (index === languageList.length - 1 ? "pb-2" : "pt-2"),
+      onClick: function onClick() {
+        return changeLanguageApp(lang.code);
+      }
+    }, React__default.createElement("div", {
+      className: styles["dropdown-item-language"] + " " + styles["item-logout"] + " " + (currentLang == lang.code ? styles['dropdown-item-language-active'] : "") + " d-flex align-items-center w-100"
+    }, React__default.createElement("span", {
+      className: "mr-2 d-flex hover-opacity"
+    }, React__default.createElement("img", {
+      style: {
+        width: "30px",
+        height: "25px",
+        borderRadius: "5px"
+      },
+      src: getStaticFileUrl(lang.image)
+    })), lang.name));
+  })));
+};
+
+var TheHeader = function TheHeader(_ref) {
+  var onToggleModel = _ref.onToggleModel;
+  var dispatch = reactRedux.useDispatch();
+  var sidebarShow = reactRedux.useSelector(function (state) {
+    return state.common.sidebarShow;
+  });
+
+  var _useTranslation = reactI18next.useTranslation(),
+      t = _useTranslation.t;
+
+  var toggleSidebarMobile = function toggleSidebarMobile() {
+    var val = [false, "responsive"].includes(sidebarShow) ? true : "responsive";
+    dispatch(setSidebar(val));
+  };
+
+  var isDistrict = window.location.host.includes("-district");
+  return React__default.createElement(react.CHeader, {
+    withSubheader: true,
+    className: "d-flex align-items-center justify-content-end"
+  }, React__default.createElement(react.CToggler, {
+    inHeader: true,
+    className: "ml-md-3 d-lg-none",
+    onClick: toggleSidebarMobile
+  }), React__default.createElement(react.CHeaderBrand, {
+    className: "mx-auto flex-grow-1 d-lg-none",
+    to: "/"
+  }, React__default.createElement("img", {
+    src: getStaticFileUrl(Images.LOGO_HEADER),
+    className: styles["header-logo"]
+  })), React__default.createElement(react.CHeaderNav, {
+    className: "pr-3"
+  }, React__default.createElement(TheLanguageDropdown, null), React__default.createElement("a", {
+    className: "mr-3",
+    style: {
+      color: '#000'
+    },
+    href: '/privacy-policy',
+    target: "blank"
+  }, t("privacy_policy")), !isDistrict && React__default.createElement(NotificationButton, null), React__default.createElement(TheHeaderDropdown, {
+    onToggleModel: onToggleModel
+  })));
+};
+
+var ModelSelectRole = function ModelSelectRole(_ref) {
+  var _handleUserRole;
+
+  var open = _ref.open,
+      onToggleModel = _ref.onToggleModel;
+  var dispatch = reactRedux.useDispatch();
+
+  var _useTranslation = reactI18next.useTranslation(),
+      t = _useTranslation.t;
+
+  var history = reactRouterDom.useHistory();
+  var pathname = window.location.pathname;
+  var user = reactRedux.useSelector(function (state) {
+    return state.common.user;
+  });
+  var roles = user === null || user === void 0 ? void 0 : user.roles;
+
+  var handleSelectUserRoles = function handleSelectUserRoles(roles) {
+    dispatch(setLoading(true));
+    var roleSelect = roles.includes("Teacher/Assistant") ? ["Teacher", "Assistant"] : roles;
+    dispatch(setUser(_extends({}, user, {
+      roles: roleSelect
+    })));
+    localStorage.setItem("ROLES", roleSelect.toString());
+    onToggleModel();
+
+    if (roles.includes("Parent")) {
+      history.push("/parent");
+    } else if (roles.includes("Admin")) {
+      history.push("/admin/home");
+    } else {
+      pathname !== "/home" ? history.push("/home") : window.location.reload();
+    }
+  };
+
+  return React__default.createElement(reactstrap.Modal, {
+    isOpen: open,
+    toggle: function toggle() {
+      return onToggleModel();
+    },
+    className: "" + styles["model-switch-roles"],
+    centered: true
+  }, React__default.createElement("p", {
+    className: "" + styles["title"]
+  }, t("continue_as")), React__default.createElement("div", null, (_handleUserRole = handleUserRole(user === null || user === void 0 ? void 0 : user.roles)) === null || _handleUserRole === void 0 ? void 0 : _handleUserRole.map(function (r) {
+    return React__default.createElement("p", {
+      key: r,
+      className: styles["item-select-role"] + " " + styles[roles.includes("Teacher") && roles.includes("Assistant") && r === "Teacher/Assistant" && !roles.includes("Admin") || roles.includes("Admin") && r === "Admin" || roles.includes(r) && !roles.includes("Admin") ? "item-role-active" : ""],
+      onClick: function onClick() {
+        return handleSelectUserRoles([r]);
+      }
+    }, r == "SecondaryTeacher" ? "Support Teacher" : r);
+  })));
+};
+
+var TheLayout = function TheLayout(_ref) {
+  var routes = _ref.routes,
+      navigation = _ref.navigation;
+  var history = reactRouterDom.useHistory();
+  var dispatch = reactRedux.useDispatch();
+  var user = reactRedux.useSelector(function (state) {
+    return state.common.user;
+  });
+  var language = reactRedux.useSelector(function (state) {
+    return state.common.language;
+  });
+
+  var _useState = React.useState(false),
+      openModelSelectRole = _useState[0],
+      setOpenModelSelectRole = _useState[1];
+
+  var _useTranslation = reactI18next.useTranslation(),
+      t = _useTranslation.t;
+
+  var location = reactRouterDom.useLocation();
+  var isNotification = location.pathname.includes("notifications");
+  var isDistrict = window.location.host.includes("-district");
+
+  var handleToggleModel = function handleToggleModel() {
+    setOpenModelSelectRole(!openModelSelectRole);
+  };
+
+  var authRoutes = React.useMemo(function () {
+    return routes.filter(function (route) {
+      return canAccess(user === null || user === void 0 ? void 0 : user.roles, route.roles);
+    }).filter(function (route) {
+      return !!route.isDistrict === isDistrict;
+    });
+  }, [user, language]);
+  var authNavigations = React.useMemo(function () {
+    return navigation.map(function (item) {
+      var _item$_children, _item$_children2;
+
+      return _extends({}, item, {
+        name: t(item.name),
+        _children: item !== null && item !== void 0 && (_item$_children = item._children) !== null && _item$_children !== void 0 && _item$_children.length ? item === null || item === void 0 ? void 0 : (_item$_children2 = item._children) === null || _item$_children2 === void 0 ? void 0 : _item$_children2.map(function (x) {
+          return _extends({}, x, {
+            name: t(x.name)
+          });
+        }) : undefined
+      });
+    }).filter(function (nav) {
+      return canAccess(user === null || user === void 0 ? void 0 : user.roles, nav.roles);
+    }).filter(function (nav) {
+      return !!nav.isDistrict === isDistrict;
+    });
+  }, [user, language]);
+
+  var getInformationSetting = function getInformationSetting() {
+    try {
+      var _temp2 = _catch(function () {
+        return Promise.resolve(getSchoolSettings()).then(function (res) {
+          dispatch(setSandboxMode(res.data.isSandboxMode));
+        });
+      }, function (err) {
+        console.error(err);
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  React.useEffect(function () {
+    checkAuthentication();
+  }, []);
+  React.useEffect(function () {
+    getInformationSetting();
+  }, [location.pathname]);
+
+  var checkAuthentication = function checkAuthentication() {
+    try {
+      var _temp4 = _catch(function () {
+        return Promise.resolve(firstCheckToken()).then(function (tokenStatus) {
+          tokenStatus ? loadInfo() : resetAuth();
+        });
+      }, function () {
+        resetAuth();
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var loadInfo = function loadInfo() {
+    try {
+      var _temp6 = _catch(function () {
+        return Promise.resolve(getInfo()).then(function (info) {
+          var _info$data, _info$data$roles;
+
+          if (!info || !(info !== null && info !== void 0 && (_info$data = info.data) !== null && _info$data !== void 0 && (_info$data$roles = _info$data.roles) !== null && _info$data$roles !== void 0 && _info$data$roles.includes("Admin"))) {
+            resetAuth();
+          }
+
+          dispatch(setUser(info.data));
+        });
+      }, function () {
+        resetAuth();
+      });
+
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var resetAuth = function resetAuth() {
+    localStorage.removeItem(ACCESS_TOKEN);
+    sessionStorage.removeItem(ACCESS_TOKEN);
+    localStorage.removeItem("ROLES");
+    history.push("/");
+  };
+
+  if (!user) {
+    return React__default.createElement(Loading, null);
+  }
+
+  return React__default.createElement("div", {
+    className: "c-app c-default-layout"
+  }, !isNotification && React__default.createElement(TheSidebar, {
+    navigation: authNavigations
+  }), React__default.createElement("div", {
+    className: "c-wrapper"
+  }, !isNotification && React__default.createElement(TheHeader, {
+    onToggleModel: handleToggleModel
+  }), React__default.createElement("div", {
+    className: "c-body bg-white"
+  }, React__default.createElement(TheContent$1, {
+    routes: authRoutes
+  }))), React__default.createElement(ModelSelectRole, {
+    open: openModelSelectRole,
+    onToggleModel: handleToggleModel
+  }));
+};
+
 var amplitudeClient = amplitude;
 
 Object.defineProperty(exports, 'I18nextProvider', {