mario-education 2.4.186-level → 2.4.188-level

package/dist/index.js

@@ -12,10 +12,10 @@ var reactRouterDom = require('react-router-dom');
 var ai = require('react-icons/ai');
 var DatePicker = _interopDefault(require('react-datepicker'));
 var format = _interopDefault(require('date-fns/format'));
+var fa = require('react-icons/fa');
 var react = require('@ag-grid-community/react');
 var masterDetail = require('@ag-grid-enterprise/master-detail');
 var clientSideRowModel = require('@ag-grid-community/client-side-row-model');
-var fa = require('react-icons/fa');
 var dateFns = require('date-fns');
 var tinymceReact = require('@tinymce/tinymce-react');
 var fi = require('react-icons/fi');
@@ -12294,6 +12294,505 @@ var SwitchSecondaryTeacherList = function SwitchSecondaryTeacherList() {
   }));
 };
 
+var RosterConfigForm = function RosterConfigForm(_ref) {
+  var rosterConfig = _ref.rosterConfig,
+      updateData = _ref.updateData;
+
+  var _useTranslation = marioCore.useTranslation(),
+      t = _useTranslation.t;
+
+  return React__default.createElement(formik.Formik, {
+    initialValues: rosterConfig,
+    enableReinitialize: true,
+    onSubmit: function onSubmit(values) {
+      updateData(values);
+    }
+  }, function (formikProps) {
+    var values = formikProps.values,
+        handleChange = formikProps.handleChange,
+        handleBlur = formikProps.handleBlur,
+        handleSubmit = formikProps.handleSubmit;
+    return React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
+      md: 12
+    }, React__default.createElement("h6", {
+      className: "mt-4",
+      style: {
+        fontWeight: 700
+      }
+    }, "Roster Config")), React__default.createElement(reactstrap.Col, {
+      md: 12,
+      className: "my-4 mt-2"
+    }, React__default.createElement(reactstrap.Label, {
+      style: {
+        fontWeight: 700
+      }
+    }, "Client Id:"), React__default.createElement(reactstrap.Input, {
+      name: "clientId",
+      placeholder: "Client Id",
+      value: values.clientId,
+      onChange: function onChange(e) {
+        handleChange(e);
+      },
+      onBlur: handleBlur("clientId")
+    })), React__default.createElement(reactstrap.Col, {
+      md: 12,
+      className: "mb-4"
+    }, React__default.createElement(reactstrap.Label, {
+      style: {
+        fontWeight: 700
+      }
+    }, "Client Secret:"), React__default.createElement(reactstrap.Input, {
+      name: "clientSecret",
+      placeholder: "Client Secret",
+      value: values.clientSecret,
+      onChange: function onChange(e) {
+        handleChange(e);
+      },
+      onBlur: handleBlur("clientSecret")
+    })), React__default.createElement(reactstrap.Col, {
+      md: 12,
+      className: "d-flex justify-content-end"
+    }, React__default.createElement(reactstrap.Button, {
+      onClick: function onClick() {
+        return handleSubmit();
+      },
+      color: "success"
+    }, t("save"))));
+  });
+};
+
+var ROSTER_URL = marioCore.BASE_URL + "/api/oneRoster";
+var IMPORT_ZIP_ROSTER_URL = marioCore.BASE_URL + "/api/ImportOneRoster/file";
+var IMPORT_RESTFUL_API_ROSTER_URL = marioCore.BASE_URL + "/api/ImportRestApiRoster/rest";
+var getRosterConfig = function getRosterConfig() {
+  return marioCore.api.get(ROSTER_URL);
+};
+var updateRosterConfig = function updateRosterConfig(data) {
+  return marioCore.api.put("" + ROSTER_URL, data);
+};
+var importRosterFromFile = function importRosterFromFile(body, cb) {
+  return marioCore.api.post(IMPORT_ZIP_ROSTER_URL, body, {
+    onUploadProgress: cb
+  });
+};
+var importRosterFromRestfulApi = function importRosterFromRestfulApi(fileName) {
+  return marioCore.api.post(IMPORT_RESTFUL_API_ROSTER_URL + "?name=" + fileName);
+};
+
+var styles$1 = {"spinner":"_2r0G1","spin":"_2fufb","success-block":"_3gvpw","middle-block":"_u47jo","list-block":"_3OiL8"};
+
+var CSV_FILE_NAMES = ["academicSession", "classes", "resources", "courses", "orgs", "categories", "lineItems", "results", "users", "enrollments", "demographics"];
+var INVALID_CLIENT_ROSTER_CONFIG = "Response status code does not indicate success: 403 ().";
+
+var useImportOneRoster = function useImportOneRoster() {
+  var dispatch = reactRedux.useDispatch();
+  var inputRef = React.useRef(null);
+
+  var _useState = React.useState(0),
+      fileProgress = _useState[0],
+      setFileProgress = _useState[1];
+
+  var _useState2 = React.useState(),
+      uploadInfo = _useState2[0],
+      setUploadInfo = _useState2[1];
+
+  var _useState3 = React.useState(),
+      restApiInfo = _useState3[0],
+      setRestApiInfo = _useState3[1];
+
+  var importRosterRestApi = React.useCallback(function (fileName) {
+    try {
+      var _temp2 = _catch(function () {
+        return Promise.resolve(importRosterFromRestfulApi(fileName)).then(function () {
+          setRestApiInfo(function (state) {
+            var _extends2;
+
+            return _extends({}, state, (_extends2 = {}, _extends2[fileName] = true, _extends2));
+          });
+        });
+      }, function (err) {
+        setRestApiInfo(function (state) {
+          var _err$response, _err$response$data, _extends3;
+
+          return _extends({}, state, (_extends3 = {}, _extends3[fileName] = ((_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, _extends3));
+        });
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [JSON.stringify(restApiInfo)]);
+
+  var handleImportFromRestfulApi = function handleImportFromRestfulApi() {
+    try {
+      setRestApiInfo({});
+      dispatch(marioCore.setLoading(true));
+      return Promise.resolve(Promise.all(CSV_FILE_NAMES.map(function (fileName) {
+        return importRosterRestApi(fileName);
+      }))).then(function () {
+        dispatch(marioCore.setLoading(false));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var importRosterZipFile = React.useCallback(function (file) {
+    try {
+      var _temp5 = function _temp5() {
+        var _inputRef$current;
+
+        if ((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) inputRef.current.value = "";
+        setUploadInfo(function (state) {
+          return _extends({}, state, {
+            isUploading: false
+          });
+        });
+        dispatch(marioCore.setLoading(false));
+      };
+
+      setUploadInfo({
+        error: "",
+        success: false,
+        isUploading: true,
+        importedFiles: "",
+        rejectedFiles: "",
+        comment: ""
+      });
+      dispatch(marioCore.setLoading(true));
+
+      var _temp6 = _catch(function () {
+        var formData = new FormData();
+        formData.append("file", file);
+        return Promise.resolve(importRosterFromFile(formData, handleProgressFile)).then(function (res) {
+          setUploadInfo(function (state) {
+            return _extends({}, state, {
+              success: true,
+              importedFiles: res.data.csvFilesImported || "",
+              rejectedFiles: res.data.cSVFilesRejected || "",
+              comment: res.data.comment || ""
+            });
+          });
+        });
+      }, function (err) {
+        setUploadInfo(function (state) {
+          var _err$response2, _err$response2$data;
+
+          return _extends({}, state, {
+            error: ((_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(_temp5) : _temp5(_temp6));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [JSON.stringify(uploadInfo)]);
+
+  var handleChooseZipFile = function handleChooseZipFile() {
+    var _inputRef$current2;
+
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.click();
+  };
+
+  var handleProgressFile = function handleProgressFile(progressEvent) {
+    var percent = Math.round(progressEvent.loaded / progressEvent.total * 100);
+    setFileProgress(percent);
+  };
+
+  var handleFileChange = React.useCallback(function () {
+    try {
+      var _inputRef$current3, _inputRef$current3$fi;
+
+      setUploadInfo(undefined);
+      setFileProgress(0);
+      var file = (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : (_inputRef$current3$fi = _inputRef$current3.files) === null || _inputRef$current3$fi === void 0 ? void 0 : _inputRef$current3$fi[0];
+      if (!file) return Promise.resolve();
+      return Promise.resolve(importRosterZipFile(file)).then(function () {});
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, []);
+  var uploadIcon = React.useMemo(function () {
+    if (!uploadInfo) return;
+    return uploadInfo.isUploading && fileProgress < 100 ? React__default.createElement(fa.FaSpinner, {
+      color: "#999999",
+      className: "mr-2 " + styles$1["spinner"]
+    }) : !!uploadInfo.success || fileProgress === 100 ? React__default.createElement(fa.FaCheckCircle, {
+      color: "#28a745",
+      className: "mr-2"
+    }) : React__default.createElement(fa.FaTimesCircle, {
+      color: "#dc3545",
+      className: "mr-2"
+    });
+  }, [JSON.stringify(uploadInfo), fileProgress]);
+  var restApiProgress = React.useMemo(function () {
+    if (restApiInfo === undefined) return;
+    var info = CSV_FILE_NAMES.map(function (fileName) {
+      return {
+        name: fileName,
+        status: restApiInfo === null || restApiInfo === void 0 ? void 0 : restApiInfo[fileName]
+      };
+    });
+    return info.map(function (i) {
+      return React__default.createElement("div", null, !i.status ? React__default.createElement(fa.FaSpinner, {
+        color: "#999999",
+        className: "mr-2 " + styles$1["spinner"]
+      }) : i.status == true ? React__default.createElement(fa.FaCheckCircle, {
+        color: "#28a745",
+        className: "mr-2"
+      }) : React__default.createElement(fa.FaTimesCircle, {
+        color: "#dc3545",
+        className: "mr-2"
+      }), React__default.createElement("b", null, i.name + ": "), !i.status ? "Importing..." : i.status == true ? "Import successful" : React__default.createElement("span", null, i.status === INVALID_CLIENT_ROSTER_CONFIG ? "Invalid Client Id and Client Secret" : i.status));
+    });
+  }, [JSON.stringify(restApiInfo)]);
+  var uploadMessage = React.useMemo(function () {
+    if (!uploadInfo) return;
+    return uploadInfo.isUploading && fileProgress < 100 ? React__default.createElement(React__default.Fragment, null, React__default.createElement("b", null, "Uploading: "), " ", fileProgress, "%") : React__default.createElement("b", null, !!uploadInfo.success || fileProgress === 100 ? "Upload success" : "Upload fail");
+  }, [JSON.stringify(uploadInfo), fileProgress]);
+  var importIcon = React.useMemo(function () {
+    if (!uploadInfo) return;
+    return uploadInfo.isUploading ? React__default.createElement(fa.FaSpinner, {
+      color: "#999999",
+      className: "mr-2 " + styles$1["spinner"]
+    }) : !!uploadInfo.success ? React__default.createElement(fa.FaCheckCircle, {
+      color: "#28a745",
+      className: "mr-2"
+    }) : React__default.createElement(fa.FaTimesCircle, {
+      color: "#dc3545",
+      className: "mr-2"
+    });
+  }, [JSON.stringify(uploadInfo)]);
+  var importMessage = React.useMemo(function () {
+    var _uploadInfo$importedF, _uploadInfo$importedF2, _uploadInfo$rejectedF, _uploadInfo$rejectedF2;
+
+    if (!uploadInfo) return;
+    var comment = uploadInfo.comment;
+    var importedFiles = ((_uploadInfo$importedF = uploadInfo.importedFiles) === null || _uploadInfo$importedF === void 0 ? void 0 : (_uploadInfo$importedF2 = _uploadInfo$importedF.split(",")) === null || _uploadInfo$importedF2 === void 0 ? void 0 : _uploadInfo$importedF2.filter(function (i) {
+      var _i$trim;
+
+      return i === null || i === void 0 ? void 0 : (_i$trim = i.trim()) === null || _i$trim === void 0 ? void 0 : _i$trim.length;
+    })) || [];
+    var rejectedFiles = ((_uploadInfo$rejectedF = uploadInfo.rejectedFiles) === null || _uploadInfo$rejectedF === void 0 ? void 0 : (_uploadInfo$rejectedF2 = _uploadInfo$rejectedF.split(",")) === null || _uploadInfo$rejectedF2 === void 0 ? void 0 : _uploadInfo$rejectedF2.filter(function (i) {
+      var _i$trim2;
+
+      return i === null || i === void 0 ? void 0 : (_i$trim2 = i.trim()) === null || _i$trim2 === void 0 ? void 0 : _i$trim2.length;
+    })) || [];
+    return uploadInfo.isUploading ? React__default.createElement("b", null, "Importing to database...") : uploadInfo.success ? React__default.createElement(React__default.Fragment, null, React__default.createElement("b", null, "Import to database successful"), React__default.createElement("div", {
+      className: "" + styles$1["success-block"]
+    }, React__default.createElement("div", null, React__default.createElement("div", {
+      className: "mt-1"
+    }, React__default.createElement("b", null, "List imported csv file: "), importedFiles.length === 0 && React__default.createElement("span", null, "No File")), React__default.createElement("ul", {
+      className: "pl-4 " + styles$1["list-block"]
+    }, importedFiles.map(function (file) {
+      return React__default.createElement("li", null, React__default.createElement(fa.FaCheckCircle, {
+        color: "#28a745",
+        className: "mr-2"
+      }), React__default.createElement("span", null, file));
+    }))), React__default.createElement("div", {
+      className: "" + styles$1["middle-block"]
+    }, React__default.createElement("div", null, React__default.createElement("b", null, "List rejected csv file: "), rejectedFiles.length === 0 && React__default.createElement("span", null, "No File")), React__default.createElement("ul", {
+      className: "pl-4 " + styles$1["list-block"]
+    }, rejectedFiles.map(function (file) {
+      return React__default.createElement("li", null, React__default.createElement(fa.FaTimesCircle, {
+        color: "#dc3545",
+        className: "mr-2"
+      }), React__default.createElement("span", null, file));
+    }))), comment && React__default.createElement("div", null, React__default.createElement("b", null, "Comment: "), React__default.createElement("span", null, comment)))) : React__default.createElement(React__default.Fragment, null, React__default.createElement("b", null, "Import to database fail", !!uploadInfo.error && ": "), uploadInfo.error);
+  }, [JSON.stringify(uploadInfo)]);
+  return {
+    inputRef: inputRef,
+    fileProgress: fileProgress,
+    uploadInfo: uploadInfo,
+    uploadIcon: uploadIcon,
+    uploadMessage: uploadMessage,
+    importIcon: importIcon,
+    importMessage: importMessage,
+    restApiInfo: restApiInfo,
+    restApiProgress: restApiProgress,
+    setFileProgress: setFileProgress,
+    handleFileChange: handleFileChange,
+    importRosterZipFile: importRosterZipFile,
+    handleChooseZipFile: handleChooseZipFile,
+    handleImportFromRestfulApi: handleImportFromRestfulApi
+  };
+};
+
+var ImportOneRoster = function ImportOneRoster(_ref) {
+  var disabledImportRest = _ref.disabledImportRest;
+
+  var _useImportOneRoster = useImportOneRoster(),
+      inputRef = _useImportOneRoster.inputRef,
+      fileProgress = _useImportOneRoster.fileProgress,
+      uploadInfo = _useImportOneRoster.uploadInfo,
+      importIcon = _useImportOneRoster.importIcon,
+      importMessage = _useImportOneRoster.importMessage,
+      uploadIcon = _useImportOneRoster.uploadIcon,
+      uploadMessage = _useImportOneRoster.uploadMessage,
+      restApiProgress = _useImportOneRoster.restApiProgress,
+      handleImportFromRestfulApi = _useImportOneRoster.handleImportFromRestfulApi,
+      handleChooseZipFile = _useImportOneRoster.handleChooseZipFile,
+      handleFileChange = _useImportOneRoster.handleFileChange;
+
+  return React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
+    md: 12
+  }, React__default.createElement("h6", {
+    className: "mt-4",
+    style: {
+      fontWeight: 700
+    }
+  }, "Import One Roster")), React__default.createElement(reactstrap.Col, {
+    md: 6
+  }, React__default.createElement("input", {
+    type: "file",
+    onChange: handleFileChange,
+    ref: inputRef,
+    accept: "zip,application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed",
+    hidden: true
+  }), React__default.createElement(reactstrap.Button, {
+    color: "success",
+    className: "w-100 my-4",
+    onClick: handleChooseZipFile
+  }, "Import from Zip file"), !!uploadInfo && React__default.createElement("div", null, React__default.createElement(reactstrap.Label, {
+    className: "d-block"
+  }, uploadIcon, React__default.createElement("span", {
+    className: "text-wrap"
+  }, uploadMessage)), fileProgress === 100 && React__default.createElement(reactstrap.Label, {
+    className: "d-block mb-0"
+  }, importIcon, React__default.createElement("span", {
+    className: "text-wrap"
+  }, importMessage)), uploadInfo.isUploading && fileProgress < 100 && React__default.createElement(React__default.Fragment, null, React__default.createElement(reactstrap.Label, {
+    className: "w-100 text-right"
+  }, fileProgress, "%"), React__default.createElement(reactstrap.Progress, {
+    value: fileProgress
+  })))), React__default.createElement(reactstrap.Col, {
+    md: 6
+  }, React__default.createElement(reactstrap.Button, {
+    color: "primary",
+    className: "w-100 mt-4 mb-1",
+    disabled: disabledImportRest,
+    onClick: handleImportFromRestfulApi
+  }, "Import from Restful api"), disabledImportRest && React__default.createElement("span", {
+    className: "text-danger"
+  }, "Client Id and Client Secret are required"), React__default.createElement("div", {
+    className: "mt-2"
+  }, restApiProgress)));
+};
+
+var initValue$d = {
+  clientId: "",
+  clientSecret: ""
+};
+
+var useRosterConfigForm = function useRosterConfigForm() {
+  var dispatch = reactRedux.useDispatch();
+
+  var _useState = React.useState(initValue$d),
+      rosterConfig = _useState[0],
+      setRosterConfig = _useState[1];
+
+  var getData = React.useCallback(function (loading) {
+    if (loading === void 0) {
+      loading = true;
+    }
+
+    try {
+      var _temp3 = function _temp3() {
+        if (loading) dispatch(marioCore.setLoading(false));
+      };
+
+      if (loading) dispatch(marioCore.setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(getRosterConfig()).then(function (res) {
+          setRosterConfig(res.data);
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        if (loading) dispatch(marioCore.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 updateData = React.useCallback(function (values) {
+    try {
+      var _temp7 = function _temp7() {
+        dispatch(marioCore.setLoading(false));
+      };
+
+      dispatch(marioCore.setLoading(true));
+
+      var _temp8 = _catch(function () {
+        return Promise.resolve(updateRosterConfig(values)).then(function (res) {
+          setRosterConfig(res.data);
+          return Promise.resolve(getData(false)).then(function () {
+            dispatch(marioCore.setAlert({
+              type: "success",
+              message: "Update Roster config successfully"
+            }));
+          });
+        });
+      }, function (err) {
+        var _err$response2, _err$response2$data;
+
+        dispatch(marioCore.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(_temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, []);
+  var disabledImportRest = React.useMemo(function () {
+    return !rosterConfig.clientId.trim().length || !rosterConfig.clientSecret.trim().length;
+  }, [JSON.stringify(rosterConfig)]);
+  React.useEffect(function () {
+    getData();
+  }, []);
+  return {
+    rosterConfig: rosterConfig,
+    disabledImportRest: disabledImportRest,
+    updateData: updateData
+  };
+};
+
+var OneRoster = function OneRoster() {
+  var _useRosterConfigForm = useRosterConfigForm(),
+      rosterConfig = _useRosterConfigForm.rosterConfig,
+      disabledImportRest = _useRosterConfigForm.disabledImportRest,
+      updateData = _useRosterConfigForm.updateData;
+
+  return React__default.createElement("div", {
+    className: "fadeIn animated"
+  }, React__default.createElement("h5", {
+    className: "mt-4 mb-2 font-weight-bold"
+  }, "One Roster"), React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
+    md: 7
+  }, React__default.createElement(RosterConfigForm, {
+    rosterConfig: rosterConfig,
+    updateData: updateData
+  })), React__default.createElement(reactstrap.Col, {
+    md: 5
+  }), React__default.createElement(reactstrap.Col, {
+    md: 7
+  }, React__default.createElement(ImportOneRoster, {
+    disabledImportRest: disabledImportRest
+  }))));
+};
+
 var tabs = [{
   path: "/admin/set-up/skill",
   title: "Skills",
@@ -12386,6 +12885,10 @@ var tabs = [{
   path: "/admin/set-up/destination",
   title: "Designations",
   component: Destinations
+}, {
+  path: "/admin/set-up/one-roster",
+  title: "One Roster",
+  component: OneRoster
 }];
 var title$1 = "set_up";
 
@@ -13213,7 +13716,7 @@ var remove$d = function remove(id) {
   return marioCore.api["delete"](REFLECTION_URL + "/" + id);
 };
 
-var initValue$d = {
+var initValue$e = {
   id: 0,
   name: "",
   category: "",
@@ -13228,7 +13731,7 @@ var useReflectionFormDetail = function useReflectionFormDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = React.useState(initValue$d),
+  var _useState2 = React.useState(initValue$e),
       reflectionformDetail = _useState2[0],
       setReflectionformDetail = _useState2[1];
 
@@ -13257,14 +13760,14 @@ var useReflectionFormDetail = function useReflectionFormDetail() {
   };
 
   React.useEffect(function () {
-    !!id ? getData() : setReflectionformDetail(initValue$d);
+    !!id ? getData() : setReflectionformDetail(initValue$e);
   }, [id]);
   React.useEffect(function () {
     setEditedFalse();
   }, []);
 
   var reset = function reset() {
-    setReflectionformDetail(initValue$d);
+    setReflectionformDetail(initValue$e);
     setId(0);
   };
 
@@ -13344,7 +13847,7 @@ var useReflectionFormDetail = function useReflectionFormDetail() {
     setId: setId,
     reflectionformDetail: reflectionformDetail,
     confirmData: confirmData,
-    initValue: initValue$d,
+    initValue: initValue$e,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -13694,7 +14197,7 @@ var useReflectionResultList = function useReflectionResultList() {
   };
 };
 
-var initValue$e = {
+var initValue$f = {
   questionResponses: [],
   answerTexts: []
 };
@@ -13706,7 +14209,7 @@ var useReflectionResultDetail = function useReflectionResultDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = React.useState(initValue$e),
+  var _useState2 = React.useState(initValue$f),
       reflectionResultDetail = _useState2[0],
       setReflectionResultDetail = _useState2[1];
 
@@ -14524,7 +15027,7 @@ var removeSurvey = function removeSurvey(id) {
   return marioCore.api["delete"](CATE_SURVEY_URL + "/" + id);
 };
 
-var initValue$f = {
+var initValue$g = {
   type: "",
   text: "",
   isDefaultQuestion: false,
@@ -14552,7 +15055,7 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
   var dispatch = reactRedux.useDispatch();
   var history = reactRouterDom.useHistory();
 
-  var _useState = React.useState(initValue$f),
+  var _useState = React.useState(initValue$g),
       questionDetail = _useState[0],
       setQuestionDetail = _useState[1];
 
@@ -15160,7 +15663,7 @@ var remove$f = function remove(id) {
   return marioCore.api["delete"](ASSESSMENT_URL + "/" + id);
 };
 
-var initValue$g = {
+var initValue$h = {
   name: "",
   beginDate: "",
   endDate: "",
@@ -15177,7 +15680,7 @@ var useAssessmentDetail = function useAssessmentDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = React.useState(initValue$g),
+  var _useState2 = React.useState(initValue$h),
       assessmentDetail = _useState2[0],
       setAssessmentDetail = _useState2[1];
 
@@ -15206,14 +15709,14 @@ var useAssessmentDetail = function useAssessmentDetail() {
   };
 
   React.useEffect(function () {
-    !!id ? getData() : setAssessmentDetail(initValue$g);
+    !!id ? getData() : setAssessmentDetail(initValue$h);
   }, [id]);
   React.useEffect(function () {
     setEditedFalse();
   }, []);
 
   var reset = function reset() {
-    setAssessmentDetail(initValue$g);
+    setAssessmentDetail(initValue$h);
     setId(0);
   };
 
@@ -15293,7 +15796,7 @@ var useAssessmentDetail = function useAssessmentDetail() {
     assessmentDetail: assessmentDetail,
     setAssessmentDetail: setAssessmentDetail,
     confirmData: confirmData,
-    initValue: initValue$g,
+    initValue: initValue$h,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -15785,7 +16288,7 @@ var getById$g = function getById(id) {
   return marioCore.api.get(FEEDBACK_URL + "/" + id);
 };
 
-var initValue$h = {
+var initValue$i = {
   description: ""
 };
 
@@ -15796,12 +16299,12 @@ var useFeedbackDetail = function useFeedbackDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = React.useState(initValue$h),
+  var _useState2 = React.useState(initValue$i),
       feedbackDetail = _useState2[0],
       setFeedbackDetail = _useState2[1];
 
   React.useEffect(function () {
-    !!id ? getData() : setFeedbackDetail(initValue$h);
+    !!id ? getData() : setFeedbackDetail(initValue$i);
   }, [id]);
   var getData = React.useCallback(function () {
     try {
@@ -15833,7 +16336,7 @@ var useFeedbackDetail = function useFeedbackDetail() {
     id: id,
     setId: setId,
     feedbackDetail: feedbackDetail,
-    initValue: initValue$h
+    initValue: initValue$i
   };
 };
 
@@ -16099,7 +16602,7 @@ var TutorialScreenType;
 
 var TutorialScreenType$1 = TutorialScreenType;
 
-var initValue$i = {
+var initValue$j = {
   name: "",
   description: "",
   typeRole: TutorialScreenType$1.Default
@@ -16112,7 +16615,7 @@ var useTutorialScreenDetail = function useTutorialScreenDetail(typeRole) {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = React.useState(_extends({}, initValue$i, {
+  var _useState2 = React.useState(_extends({}, initValue$j, {
     typeRole: typeRole
   })),
       tutorialScreenDetail = _useState2[0],
@@ -16143,7 +16646,7 @@ var useTutorialScreenDetail = function useTutorialScreenDetail(typeRole) {
   };
 
   React.useEffect(function () {
-    !!id ? getData() : setTutorialScreenDetail(_extends({}, initValue$i, {
+    !!id ? getData() : setTutorialScreenDetail(_extends({}, initValue$j, {
       typeRole: typeRole
     }));
   }, [id]);
@@ -16152,7 +16655,7 @@ var useTutorialScreenDetail = function useTutorialScreenDetail(typeRole) {
   }, []);
 
   var reset = function reset() {
-    setTutorialScreenDetail(_extends({}, initValue$i, {
+    setTutorialScreenDetail(_extends({}, initValue$j, {
       typeRole: typeRole
     }));
     setId(0);
@@ -16221,7 +16724,7 @@ var useTutorialScreenDetail = function useTutorialScreenDetail(typeRole) {
     setId: setId,
     tutorialScreenDetail: tutorialScreenDetail,
     confirmData: confirmData,
-    initValue: initValue$i,
+    initValue: initValue$j,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -16608,7 +17111,7 @@ var QuestionCateModal = function QuestionCateModal(props, ref) {
 
 var QuestionCateModal$1 = React.forwardRef(QuestionCateModal);
 
-var initValue$j = {
+var initValue$k = {
   name: "",
   parentCategoryId: null
 };
@@ -16620,7 +17123,7 @@ var useQuestionCateDetail = function useQuestionCateDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = React.useState(initValue$j),
+  var _useState2 = React.useState(initValue$k),
       questionCateDetail = _useState2[0],
       setQuestionCateDetail = _useState2[1];
 
@@ -16649,14 +17152,14 @@ var useQuestionCateDetail = function useQuestionCateDetail() {
   };
 
   React.useEffect(function () {
-    !!id ? getData() : setQuestionCateDetail(initValue$j);
+    !!id ? getData() : setQuestionCateDetail(initValue$k);
   }, [id]);
   React.useEffect(function () {
     setEditedFalse();
   }, []);
 
   var reset = function reset() {
-    setQuestionCateDetail(initValue$j);
+    setQuestionCateDetail(initValue$k);
     setId(0);
   };
 
@@ -16723,7 +17226,7 @@ var useQuestionCateDetail = function useQuestionCateDetail() {
     setId: setId,
     questionCateDetail: questionCateDetail,
     confirmData: confirmData,
-    initValue: initValue$j,
+    initValue: initValue$k,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -17154,7 +17657,7 @@ var QuestionCateModal$2 = function QuestionCateModal(props, ref) {
 
 var TemplateCateModal = React.forwardRef(QuestionCateModal$2);
 
-var initValue$k = {
+var initValue$l = {
   name: "",
   questionIds: []
 };
@@ -17166,7 +17669,7 @@ var useTemplateCateDetail = function useTemplateCateDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = React.useState(initValue$k),
+  var _useState2 = React.useState(initValue$l),
       questionCateDetail = _useState2[0],
       setQuestionCateDetail = _useState2[1];
 
@@ -17207,14 +17710,14 @@ var useTemplateCateDetail = function useTemplateCateDetail() {
   };
 
   React.useEffect(function () {
-    !!id ? getData() : setQuestionCateDetail(initValue$k);
+    !!id ? getData() : setQuestionCateDetail(initValue$l);
   }, [id]);
   React.useEffect(function () {
     setEditedFalse();
   }, []);
 
   var reset = function reset() {
-    setQuestionCateDetail(initValue$k);
+    setQuestionCateDetail(initValue$l);
     setId(0);
   };
 
@@ -17326,7 +17829,7 @@ var useTemplateCateDetail = function useTemplateCateDetail() {
     setId: setId,
     questionCateDetail: questionCateDetail,
     confirmData: confirmData,
-    initValue: initValue$k,
+    initValue: initValue$l,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -18042,7 +18545,7 @@ var getAllSemesters = function getAllSemesters() {
   return marioCore.api.get(marioCore.BASE_URL + "/api/Semester/all");
 };
 
-var initValue$l = {
+var initValue$m = {
   assessmentId: 0,
   assessment: null,
   studentIds: [],
@@ -18062,7 +18565,7 @@ var useAssignmentDetail = function useAssignmentDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = React.useState(initValue$l),
+  var _useState2 = React.useState(initValue$m),
       assignmentDetail = _useState2[0],
       setAssignmentDetail = _useState2[1];
 
@@ -18091,14 +18594,14 @@ var useAssignmentDetail = function useAssignmentDetail() {
   };
 
   React.useEffect(function () {
-    !!id ? getData() : setAssignmentDetail(initValue$l);
+    !!id ? getData() : setAssignmentDetail(initValue$m);
   }, [id]);
   React.useEffect(function () {
     setEditedFalse();
   }, []);
 
   var reset = function reset() {
-    setAssignmentDetail(initValue$l);
+    setAssignmentDetail(initValue$m);
     setId(0);
   };
 
@@ -18213,7 +18716,7 @@ var useAssignmentDetail = function useAssignmentDetail() {
     assignmentDetail: assignmentDetail,
     confirmData: confirmData,
     onRemoveStudent: onRemoveStudent,
-    initValue: initValue$l,
+    initValue: initValue$m,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -18556,7 +19059,7 @@ var useAssignmentResultList = function useAssignmentResultList() {
   };
 };
 
-var initValue$m = {
+var initValue$n = {
   questionResponses: [],
   answerTexts: []
 };
@@ -18568,7 +19071,7 @@ var useReflectionResultDetail$1 = function useReflectionResultDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = React.useState(initValue$m),
+  var _useState2 = React.useState(initValue$n),
       assignmentResultDetail = _useState2[0],
       setAssignmentResultDetail = _useState2[1];
 
@@ -19543,7 +20046,7 @@ var useAddQuestion = function useAddQuestion() {
   };
 };
 
-var initValue$n = {
+var initValue$o = {
   name: "",
   isConference: false,
   conferenceRubricId: null,
@@ -19593,7 +20096,7 @@ var useSessionTemplateDetail = function useSessionTemplateDetail(id) {
       isTeacherQuestion = _useState7[0],
       setIsTeacherQuestion = _useState7[1];
 
-  var _useState8 = React.useState(initValue$n),
+  var _useState8 = React.useState(initValue$o),
       sessionTemplateDetail = _useState8[0],
       setSessionTemplateDetail = _useState8[1];
 
@@ -20184,7 +20687,7 @@ var SubjectSelector = function SubjectSelector(_ref) {
   });
 };
 
-var initValue$o = {
+var initValue$p = {
   name: "",
   subjectId: 0,
   questionTeacherIds: [],
@@ -20235,7 +20738,7 @@ var useSessionTemplateGeneralClassDetail = function useSessionTemplateGeneralCla
       extraStudentMandatory = _useState9[0],
       setExtraStudentMandatory = _useState9[1];
 
-  var _useState10 = React.useState(initValue$o),
+  var _useState10 = React.useState(initValue$p),
       sessionTemplateGeneralClassDetail = _useState10[0],
       setSessionTemplateGeneralClassDetail = _useState10[1];
 
@@ -20935,7 +21438,7 @@ var removeStudent$1 = function removeStudent(customAlertStudentId) {
   return marioCore.api["delete"](CUSTOM_ALERT_URL + "/customAlertStudents/" + customAlertStudentId);
 };
 
-var initValue$p = {
+var initValue$q = {
   learningSupportCategoryId: 0,
   numberOfSessions: 0,
   beginDate: "",
@@ -20950,7 +21453,7 @@ var useCustomAlertDetail = function useCustomAlertDetail() {
       id = _useState[0],
       setId = _useState[1];
 
-  var _useState2 = React.useState(initValue$p),
+  var _useState2 = React.useState(initValue$q),
       customAlertDetail = _useState2[0],
       setCustomAlertDetail = _useState2[1];
 
@@ -20979,14 +21482,14 @@ var useCustomAlertDetail = function useCustomAlertDetail() {
   };
 
   React.useEffect(function () {
-    !!id ? getData() : setCustomAlertDetail(initValue$p);
+    !!id ? getData() : setCustomAlertDetail(initValue$q);
   }, [id]);
   React.useEffect(function () {
     setEditedFalse();
   }, []);
 
   var reset = function reset() {
-    setCustomAlertDetail(initValue$p);
+    setCustomAlertDetail(initValue$q);
     setId(0);
   };
 
@@ -21094,7 +21597,7 @@ var useCustomAlertDetail = function useCustomAlertDetail() {
     customAlertDetail: customAlertDetail,
     confirmData: confirmData,
     onRemoveStudent: onRemoveStudent,
-    initValue: initValue$p,
+    initValue: initValue$q,
     reset: reset,
     edited: edited,
     setEdited: setEdited,
@@ -21688,7 +22191,7 @@ var initItemValue = {
   text: "",
   breakPointCertification: []
 };
-var initValue$q = {
+var initValue$r = {
   name: "",
   description: "",
   imageUrl: "",
@@ -21710,7 +22213,7 @@ var useCertificateDetail = function useCertificateDetail() {
       file = _useState2[0],
       setFile = _useState2[1];
 
-  var _useState3 = React.useState(initValue$q),
+  var _useState3 = React.useState(initValue$r),
       certificateDetail = _useState3[0],
       setCertificateDetail = _useState3[1];
 
@@ -21739,7 +22242,7 @@ var useCertificateDetail = function useCertificateDetail() {
   };
 
   React.useEffect(function () {
-    !!id ? getData() : setCertificateDetail(initValue$q);
+    !!id ? getData() : setCertificateDetail(initValue$r);
   }, [id]);
   React.useEffect(function () {
     setEditedFalse();
@@ -21827,7 +22330,7 @@ var useCertificateDetail = function useCertificateDetail() {
     certificateDetail: certificateDetail,
     initItemValue: initItemValue,
     confirmData: confirmData,
-    initValue: initValue$q,
+    initValue: initValue$r,
     setFile: setFile,
     edited: edited,
     setEdited: setEdited,
@@ -22543,7 +23046,7 @@ var TYPECHART;
   TYPECHART[TYPECHART["DONUT"] = 4] = "DONUT";
 })(TYPECHART || (TYPECHART = {}));
 
-var styles$1 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy","size-icon":"_1WLBo","block-dashboard":"_10Pgm","size-arrow":"_3jPb_","color-down":"_1c43y","color-up":"_F1afY","box-filter":"_1kqUQ","title-card":"_10hbz","value-card":"_2rmw_","deviant-card":"_1tdQu","filter-card":"_2BvFN","box-skill-item":"_2TBTW","numerical-order":"_3XXJp","backoround-top-skill":"_LCuWQ","color-filter":"_3x9D7","btn-filter":"_2In63","block-collapse":"_1Vhg_","form-date-picker":"_6yLxd","bock-filter-left":"_h74SO","bock-filter-right":"_3e2pi","form-filter-right":"_ntUB6","form-filter-left":"_1DlZ4","bock-filter-wrap":"_1tYDM","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-grade":"_3ZX0b","chart-data":"_2asi-","apexcharts-datalabels":"_muT01","apexcharts-pie-label":"_35BzZ","image-custom":"_3pkbc","image-special-need":"_16MpB","title-dashboard":"_CHu-i","box-chart":"_3Y-Dd","block-filter-right":"_1YJnk","shadow-lg":"_2eMbe","chart-header-wrapper":"_6ZvFg","devide-component":"_24CNV","header-chart":"_2vtSi","header-left":"_IpsVf","icon-chart":"_gzxWe","header-right":"_37IcR","header-title":"_2G6Wz","button-export":"_3xpNv","button-content":"_3H5Ly","button-icon":"_J_n-D","icon-config":"_3AALV","cursor-pointer":"_11Xjn","btn-show-chart":"_2htKu","rotate-180":"_q1nUO","header-chart-generate":"_s8xMf","block-header-chart":"_tHUJ_","name-chart":"_3xKHX","title-chart":"_pFFg9","description-chart":"_3hqV3","title-chart-generate":"_3rdqX","expand-icon":"_nwv00","custom-tooltip":"_29aQo","custom-tooltip-month":"_2SJIY","tooltip-data-cursor":"_2lZv_","tooltip-data-box":"_8NzTd","tooltip-data":"_1EP1I","name":"_1J69a","data":"_3-8OW","checkbox-chart":"_1qXAT","column-chart-percent":"_3NgrB","chart-background":"_32fu3","custom-marker":"_DmMzw","mark-custom":"_1eUXn","item-legend":"_3hrrC","label-legend-custom":"_Q-iiW","mark-legend":"_cD4ey","percent":"_2HWhv","listItem":"_2Hdbu","item":"_3RJ2T","item-checkbox":"_3dK0P","box-checkbox":"_1bHgZ","check-box":"_QwDVv","item-detail":"_1QgWc","question":"_348ls","avr-question":"_1VfnR","volatility":"_3eW34","arr":"_1bljF","month-text":"_30y0h","arrow":"_1HtM3","arrow-up":"_3qqQU","percent-text":"_2Fgfn","arrow-down":"_1yXO7","point-custom":"_2JNm-","student-by-age":"_38ikt","total-student":"_1TnWs","pie-chart":"_3BTJi","options-gender":"_1Ws0m","legend":"_2HnO_","text-lengend":"_2BFJw","student-by-grade":"_2az-l","bubble-chart-custom":"_2j8fp","x-axis-custom-wrap":"_1BN5z","axis-content":"_1rYav","chart-buddle":"_TPa6x","legend-wrap":"_3-zAs","label-chart":"_24PRg","list-percent":"_1PPhv","description-chart-dashboard":"_2ZL2A","percent-item":"_1rjWR","chart-custom":"_f-Ti4","title-grade":"_1hZ_V","title-modal":"_3L9WC","header-desc-modal":"_1TFtP","form-checkbox":"_37aqf","checkbox-content":"_1iabV","btn-export":"_1eQAg","image-logo":"_1eqkj","chart-to-canvas":"_2IQ8b","chart-pdf":"_sQ21k","box-top-5-most":"_3Eas5","filter-mobile-block":"_1tKnn","filter-wrapper-mobile":"_1Zuq3","total-card-wrapper":"_1i0El"};
+var styles$2 = {"dashboard-card":"_1Jgr2","quantity-table":"_3Thdy","size-icon":"_1WLBo","block-dashboard":"_10Pgm","size-arrow":"_3jPb_","color-down":"_1c43y","color-up":"_F1afY","box-filter":"_1kqUQ","title-card":"_10hbz","value-card":"_2rmw_","deviant-card":"_1tdQu","filter-card":"_2BvFN","box-skill-item":"_2TBTW","numerical-order":"_3XXJp","backoround-top-skill":"_LCuWQ","color-filter":"_3x9D7","btn-filter":"_2In63","block-collapse":"_1Vhg_","form-date-picker":"_6yLxd","bock-filter-left":"_h74SO","bock-filter-right":"_3e2pi","form-filter-right":"_ntUB6","form-filter-left":"_1DlZ4","bock-filter-wrap":"_1tYDM","title-card-box":"_3hSow","box-item":"_1yuC9","image-no-data":"_2PMoX","image-grade":"_3ZX0b","chart-data":"_2asi-","apexcharts-datalabels":"_muT01","apexcharts-pie-label":"_35BzZ","image-custom":"_3pkbc","image-special-need":"_16MpB","title-dashboard":"_CHu-i","box-chart":"_3Y-Dd","block-filter-right":"_1YJnk","shadow-lg":"_2eMbe","chart-header-wrapper":"_6ZvFg","devide-component":"_24CNV","header-chart":"_2vtSi","header-left":"_IpsVf","icon-chart":"_gzxWe","header-right":"_37IcR","header-title":"_2G6Wz","button-export":"_3xpNv","button-content":"_3H5Ly","button-icon":"_J_n-D","icon-config":"_3AALV","cursor-pointer":"_11Xjn","btn-show-chart":"_2htKu","rotate-180":"_q1nUO","header-chart-generate":"_s8xMf","block-header-chart":"_tHUJ_","name-chart":"_3xKHX","title-chart":"_pFFg9","description-chart":"_3hqV3","title-chart-generate":"_3rdqX","expand-icon":"_nwv00","custom-tooltip":"_29aQo","custom-tooltip-month":"_2SJIY","tooltip-data-cursor":"_2lZv_","tooltip-data-box":"_8NzTd","tooltip-data":"_1EP1I","name":"_1J69a","data":"_3-8OW","checkbox-chart":"_1qXAT","column-chart-percent":"_3NgrB","chart-background":"_32fu3","custom-marker":"_DmMzw","mark-custom":"_1eUXn","item-legend":"_3hrrC","label-legend-custom":"_Q-iiW","mark-legend":"_cD4ey","percent":"_2HWhv","listItem":"_2Hdbu","item":"_3RJ2T","item-checkbox":"_3dK0P","box-checkbox":"_1bHgZ","check-box":"_QwDVv","item-detail":"_1QgWc","question":"_348ls","avr-question":"_1VfnR","volatility":"_3eW34","arr":"_1bljF","month-text":"_30y0h","arrow":"_1HtM3","arrow-up":"_3qqQU","percent-text":"_2Fgfn","arrow-down":"_1yXO7","point-custom":"_2JNm-","student-by-age":"_38ikt","total-student":"_1TnWs","pie-chart":"_3BTJi","options-gender":"_1Ws0m","legend":"_2HnO_","text-lengend":"_2BFJw","student-by-grade":"_2az-l","bubble-chart-custom":"_2j8fp","x-axis-custom-wrap":"_1BN5z","axis-content":"_1rYav","chart-buddle":"_TPa6x","legend-wrap":"_3-zAs","label-chart":"_24PRg","list-percent":"_1PPhv","description-chart-dashboard":"_2ZL2A","percent-item":"_1rjWR","chart-custom":"_f-Ti4","title-grade":"_1hZ_V","title-modal":"_3L9WC","header-desc-modal":"_1TFtP","form-checkbox":"_37aqf","checkbox-content":"_1iabV","btn-export":"_1eQAg","image-logo":"_1eqkj","chart-to-canvas":"_2IQ8b","chart-pdf":"_sQ21k","box-top-5-most":"_3Eas5","filter-mobile-block":"_1tKnn","filter-wrapper-mobile":"_1Zuq3","total-card-wrapper":"_1i0El"};
 
 var CheckboxCustom = function CheckboxCustom(_ref) {
   var _ref$background = _ref.background,
@@ -22613,19 +23116,19 @@ var HeaderChart = function HeaderChart(_ref) {
     onClick: function onClick() {
       return onToggle(index != null ? index : 0);
     },
-    className: "d-flex justify-content-between align-items-center " + (styles$1["header-chart"] + " " + styles$1["cursor-pointer"])
+    className: "d-flex justify-content-between align-items-center " + (styles$2["header-chart"] + " " + styles$2["cursor-pointer"])
   }, React__default.createElement("div", {
-    className: "" + styles$1["header-left"]
+    className: "" + styles$2["header-left"]
   }, React__default.createElement("span", {
-    className: styles$1["header-title"] + " pr-2"
+    className: styles$2["header-title"] + " pr-2"
   }, title), !!description && isOpen && React__default.createElement("p", {
-    className: "" + styles$1["description-chart-dashboard"]
+    className: "" + styles$2["description-chart-dashboard"]
   }, description)), React__default.createElement("div", {
-    className: "" + styles$1["header-right"]
+    className: "" + styles$2["header-right"]
   }, isOpen && isShowChangeChart && (options === null || options === void 0 ? void 0 : options.length) && React__default.createElement("div", {
     className: "d-flex align-items-center d-inline-block pr-4"
   }, React__default.createElement("div", {
-    className: "d-flex align-items-center px-2 " + styles$1["checkbox-chart"]
+    className: "d-flex align-items-center px-2 " + styles$2["checkbox-chart"]
   }, React__default.createElement("div", {
     className: "pr-4 d-flex",
     onClick: function onClick() {
@@ -22640,14 +23143,14 @@ var HeaderChart = function HeaderChart(_ref) {
     isActive: typeChart === options[0].value || typeChart === TYPECHART.BOTH,
     className: "pr-2"
   }), React__default.createElement("label", {
-    className: "" + styles$1["label-chart"],
+    className: "" + styles$2["label-chart"],
     style: {
       color: "#252733",
       marginBottom: 0,
       cursor: "pointer"
     }
   }, "Ridge charts"))), React__default.createElement("div", {
-    className: "d-inline-block px-2  " + styles$1["checkbox-chart"]
+    className: "d-inline-block px-2  " + styles$2["checkbox-chart"]
   }, React__default.createElement("div", {
     className: "pr-4 d-flex",
     onClick: function onClick() {
@@ -22662,20 +23165,20 @@ var HeaderChart = function HeaderChart(_ref) {
     isActive: typeChart === options[1].value || typeChart === TYPECHART.BOTH,
     className: "pr-2"
   }), React__default.createElement("label", {
-    className: "" + styles$1["label-chart"],
+    className: "" + styles$2["label-chart"],
     style: {
       color: "#252733",
       marginBottom: 0,
       cursor: "pointer"
     }
   }, options[1].value === TYPECHART.BAR ? "Bar charts" : "Line charts")))), !!onClickOptions && React__default.createElement("i", {
-    className: "fas fa-ellipsis-v pr-4 " + styles$1["icon-config"] + " " + styles$1["cursor-pointer"],
+    className: "fas fa-ellipsis-v pr-4 " + styles$2["icon-config"] + " " + styles$2["cursor-pointer"],
     onClick: function onClick() {
       return onClickOptions === null || onClickOptions === void 0 ? void 0 : onClickOptions();
     }
   }), React__default.createElement("img", {
     src: "images/arrow-up.png",
-    className: styles$1["btn-show-chart"] + " " + (!isOpen && styles$1["rotate-180"])
+    className: styles$2["btn-show-chart"] + " " + (!isOpen && styles$2["rotate-180"])
   })));
 };
 
@@ -28767,7 +29270,7 @@ var convertDataToSeriesBullderChart = function convertDataToSeriesBullderChart(d
     };
   });
 };
-var optionColumnChartAndPercents = function optionColumnChartAndPercents(months, activeData, isRidgeCharts, colors, dayOfWeek) {
+var optionColumnChartAndPercents = function optionColumnChartAndPercents(months, activeData, isRidgeCharts, colors, maxSeries, dayOfWeek, isCountSeries) {
   return {
     chart: {
       height: 350,
@@ -28831,7 +29334,7 @@ var optionColumnChartAndPercents = function optionColumnChartAndPercents(months,
     yaxis: {
       tickAmount: 5,
       min: 0,
-      max: 100,
+      max: maxSeries > 100 ? maxSeries + 20 : 100,
       axisBorder: {
         show: true
       },
@@ -28848,7 +29351,8 @@ var optionColumnChartAndPercents = function optionColumnChartAndPercents(months,
           cssClass: "apexcharts-yaxis-label"
         },
         formatter: function formatter(value) {
-          return value + "%";
+          var roundedValue = Math.round(value);
+          return !isCountSeries ? roundedValue + "%" : roundedValue.toString();
         },
         offsetX: 0,
         offsetY: 0,
@@ -28980,7 +29484,7 @@ var optionLineChart = function optionLineChart(months, activeData, colors, dayOf
     }
   };
 };
-var overallDonutCHartOptions = function overallDonutCHartOptions(labelNames, colors, textColors) {
+var overallDonutCHartOptions = function overallDonutCHartOptions(labelNames, colors, isCountSeries, textColors) {
   return {
     legend: {
       show: false,
@@ -29008,13 +29512,18 @@ var overallDonutCHartOptions = function overallDonutCHartOptions(labelNames, col
       theme: "palette5",
       y: {
         formatter: function formatter(value) {
-          return value.toFixed(1).toString() + "%";
+          return !isCountSeries ? value.toFixed(1).toString() + "%" : value.toString();
         }
       }
     },
     colors: colors,
     dataLabels: {
       enabled: true,
+      formatter: function formatter(val, opt) {
+        var _opt$w, _opt$w$globals, _opt$w$globals$series;
+
+        return !isCountSeries ? val.toFixed(1) + "%" : opt === null || opt === void 0 ? void 0 : (_opt$w = opt.w) === null || _opt$w === void 0 ? void 0 : (_opt$w$globals = _opt$w.globals) === null || _opt$w$globals === void 0 ? void 0 : (_opt$w$globals$series = _opt$w$globals.series) === null || _opt$w$globals$series === void 0 ? void 0 : _opt$w$globals$series[opt === null || opt === void 0 ? void 0 : opt.seriesIndex];
+      },
       style: {
         colors: textColors || ["#242424", "#242424"],
         fontSize: "12px",
@@ -29657,7 +30166,9 @@ var useChartDatas = function useChartDatas() {
       topLearningStrategies = _useDashboard.topLearningStrategies,
       readinessToLearning = _useDashboard.readinessToLearning,
       handleChangeFilters = _useDashboard.handleChangeFilters,
+      handleChangeAcademicYearFilters = _useDashboard.handleChangeAcademicYearFilters,
       bandScore = _useDashboard.bandScore,
+      academicYear = _useDashboard.academicYear,
       user = _useDashboard.user,
       studentDefault = _useDashboard.studentDefault,
       handleFilterStudent = _useDashboard.handleFilterStudent,
@@ -29732,6 +30243,21 @@ var useChartDatas = function useChartDatas() {
     setSelectedToPrint(updateSelectToPrint);
   };
 
+  var academicYearItem = React.useMemo(function () {
+    if ((academicYear === null || academicYear === void 0 ? void 0 : academicYear.length) > 0) {
+      return academicYear.map(function (item) {
+        return {
+          value: item.id,
+          label: moment(item.startTime).year() + " - " + moment(item.endTime).year(),
+          startTime: item.startTime,
+          endTime: item.endTime,
+          isCurrent: item.isCurrent
+        };
+      });
+    }
+
+    return [];
+  }, [academicYear]);
   var LIST_FILTERS_LEFT = [{
     name: FILTER_NAME.Calendar,
     icon: "/images/calendar.svg",
@@ -29778,6 +30304,13 @@ var useChartDatas = function useChartDatas() {
       value: -1,
       label: "All"
     }].concat(bandScore)
+  }, {
+    name: FILTER_NAME.AcademicYear,
+    icon: "/images/student-icon.svg",
+    handleChangeFilters: handleChangeAcademicYearFilters,
+    option: [].concat(academicYearItem),
+    labelBox: labelBox,
+    setLabelBox: setLabelBox
   }];
   var LIST_FILTERS_RIGHT = [{
     name: FILTER_NAME.StudentName,
@@ -30677,17 +31210,17 @@ var TotalCard = function TotalCard(_ref) {
       title = _ref.title,
       value = _ref.value;
   return React__default.createElement("div", {
-    className: styles$1["title-card-box"] + " " + styles$1["box-item"] + " p-4 mb-2 mb-sm-0 mb-lg-2 shadow-md"
+    className: styles$2["title-card-box"] + " " + styles$2["box-item"] + " p-4 mb-2 mb-sm-0 mb-lg-2 shadow-md"
   }, React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-center"
   }, React__default.createElement("img", {
     src: icon
   }), React__default.createElement("p", {
-    className: styles$1["title-card"] + " m-0 mx-2"
+    className: styles$2["title-card"] + " m-0 mx-2"
   }, title, ":")), React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-center mt-3"
   }, React__default.createElement("p", {
-    className: "" + styles$1["value-card"]
+    className: "" + styles$2["value-card"]
   }, value)));
 };
 
@@ -30696,18 +31229,22 @@ var AreaChart = function AreaChart(_ref) {
       months = _ref.months,
       activeColumn = _ref.activeColumn,
       colors = _ref.colors,
-      dayOfWeek = _ref.dayOfWeek;
-  var options = optionColumnChartAndPercents(months, activeColumn, true, colors, dayOfWeek);
+      dayOfWeek = _ref.dayOfWeek,
+      isCountSeries = _ref.isCountSeries;
+  var maxSeries = series.reduce(function (max, item) {
+    return Math.max.apply(Math, [max].concat(item.data));
+  }, -Infinity) || 0;
+  var options = optionColumnChartAndPercents(months, activeColumn, true, colors, maxSeries, dayOfWeek, isCountSeries);
   options.tooltip = {
     custom: function custom(_ref2) {
       var dataPointIndex = _ref2.dataPointIndex,
           w = _ref2.w;
       var colorsItem = w.config.colors;
       var seriesItem = w.config.series;
-      return "<div class=" + styles$1["custom-tooltip"] + "> \n               <p class=" + styles$1["custom-tooltip-month"] + "> " + dayOfWeek[dataPointIndex] + " </p>\n               " + seriesItem.map(function (r, index) {
+      return "<div class=" + styles$2["custom-tooltip"] + "> \n               <p class=" + styles$2["custom-tooltip-month"] + "> " + dayOfWeek[dataPointIndex] + " </p>\n               " + seriesItem.map(function (r, index) {
         var _r$data$dataPointInde;
 
-        return "<div key={" + index + "} class=" + styles$1["tooltip-data-box"] + ">\n                      <div class=" + styles$1["tooltip-data-cursor"] + " style=\"background: " + colorsItem[index] + "\"></div>\n                      <div class=" + styles$1["tooltip-data"] + ">\n                        <p  class=" + styles$1["name"] + ">" + r.name + ":</p>\n                        <p class=" + styles$1["data"] + ">" + ((_r$data$dataPointInde = r.data[dataPointIndex]) === null || _r$data$dataPointInde === void 0 ? void 0 : _r$data$dataPointInde.toFixed(2)) + "%</p>\n                      </div>\n                    </div>";
+        return "<div key={" + index + "} class=" + styles$2["tooltip-data-box"] + ">\n                      <div class=" + styles$2["tooltip-data-cursor"] + " style=\"background: " + colorsItem[index] + "\"></div>\n                      <div class=" + styles$2["tooltip-data"] + ">\n                        <p  class=" + styles$2["name"] + ">" + r.name + ":</p>\n                        <p class=" + styles$2["data"] + ">" + (!isCountSeries ? ((_r$data$dataPointInde = r.data[dataPointIndex]) === null || _r$data$dataPointInde === void 0 ? void 0 : _r$data$dataPointInde.toFixed(2)) + "%" : r.data[dataPointIndex]) + "</p>\n                      </div>\n                    </div>";
       }) + "\n            </div>";
     }
   };
@@ -30726,8 +31263,11 @@ var BarChart = function BarChart(_ref) {
       activeColumn = _ref.activeColumn,
       colors = _ref.colors,
       dayOfWeek = _ref.dayOfWeek;
+  var maxSeries = series.reduce(function (max, item) {
+    return Math.max.apply(Math, [max].concat(item.data));
+  }, -Infinity) || 0;
   return React__default.createElement(Chart, {
-    options: optionColumnChartAndPercents(months, activeColumn, false, colors, dayOfWeek),
+    options: optionColumnChartAndPercents(months, activeColumn, false, colors, maxSeries, dayOfWeek),
     type: "bar",
     series: series,
     width: "100%",
@@ -30748,10 +31288,10 @@ var LineChart = function LineChart(_ref) {
           w = _ref2.w;
       var colorsItem = w.config.colors;
       var seriesItem = w.config.series;
-      return "<div class=" + styles$1["custom-tooltip"] + "> \n               <p  class=" + styles$1["custom-tooltip-month"] + "> " + dayOfWeek[dataPointIndex] + " </p>\n               " + seriesItem.map(function (r, index) {
+      return "<div class=" + styles$2["custom-tooltip"] + "> \n               <p  class=" + styles$2["custom-tooltip-month"] + "> " + dayOfWeek[dataPointIndex] + " </p>\n               " + seriesItem.map(function (r, index) {
         var _r$data$dataPointInde;
 
-        return "<div class=" + styles$1["tooltip-data-box"] + ">\n                      <div class=" + styles$1["tooltip-data-cursor"] + " style=\"background: " + colorsItem[index] + "\"></div>\n                      <div class=" + styles$1["tooltip-data"] + ">\n                        <p  class=" + styles$1["name"] + ">" + r.name + ":</p>\n                        <p class=" + styles$1["data"] + ">" + ((_r$data$dataPointInde = r.data[dataPointIndex]) === null || _r$data$dataPointInde === void 0 ? void 0 : _r$data$dataPointInde.toFixed(2)) + "%</p>\n                      </div>\n                    </div>";
+        return "<div class=" + styles$2["tooltip-data-box"] + ">\n                      <div class=" + styles$2["tooltip-data-cursor"] + " style=\"background: " + colorsItem[index] + "\"></div>\n                      <div class=" + styles$2["tooltip-data"] + ">\n                        <p  class=" + styles$2["name"] + ">" + r.name + ":</p>\n                        <p class=" + styles$2["data"] + ">" + ((_r$data$dataPointInde = r.data[dataPointIndex]) === null || _r$data$dataPointInde === void 0 ? void 0 : _r$data$dataPointInde.toFixed(2)) + "%</p>\n                      </div>\n                    </div>";
       }) + "\n            </div>";
     }
   };
@@ -30772,9 +31312,10 @@ var OverallDonutChart = function OverallDonutChart(_ref) {
       width = _ref$width === void 0 ? "100%" : _ref$width,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? 250 : _ref$height,
+      isCountSeries = _ref.isCountSeries,
       textColors = _ref.textColors;
   return React__default.createElement(Chart, {
-    options: overallDonutCHartOptions(label, colors, textColors),
+    options: overallDonutCHartOptions(label, colors, isCountSeries, textColors),
     series: series,
     type: "donut",
     width: width,
@@ -30836,20 +31377,20 @@ var GenerateChartData = function GenerateChartData(_ref) {
   }) || [];
   return React__default.createElement("div", {
     key: name,
-    className: "w-100 h-100 " + styles$1["column-chart-percent"]
+    className: "w-100 h-100 " + styles$2["column-chart-percent"]
   }, !isPrint && React__default.createElement("div", {
-    className: "" + styles$1["header-chart-generate"]
+    className: "" + styles$2["header-chart-generate"]
   }, React__default.createElement("p", {
-    className: "" + styles$1["title-chart-generate"]
+    className: "" + styles$2["title-chart-generate"]
   }, name), !!isShowExpandIcon && React__default.createElement("img", {
-    className: "" + styles$1["expand-icon"],
+    className: "" + styles$2["expand-icon"],
     onClick: function onClick() {
       return onExpand === null || onExpand === void 0 ? void 0 : onExpand();
     },
     src: "/images/expand.svg",
     alt: "expand"
   })), React__default.createElement("div", {
-    className: styles$1["listItem"] + " " + (!onActiveColumn && styles$1["ml-10"])
+    className: styles$2["listItem"] + " " + (!onActiveColumn && styles$2["ml-10"])
   }, series.map(function (item, index) {
     var _handleGenerateAvgQue, _Math$abs, _Math$abs2;
 
@@ -30859,59 +31400,60 @@ var GenerateChartData = function GenerateChartData(_ref) {
     if (isPrint && !activeColumn[index]) return null;
     return React__default.createElement("div", {
       hidden: !item.name,
-      className: "" + styles$1["item-checkbox"],
+      className: "" + styles$2["item-checkbox"],
       key: index
     }, !!onActiveColumn && React__default.createElement("div", {
-      className: "" + styles$1["box-checkbox"]
+      className: "" + styles$2["box-checkbox"]
     }, React__default.createElement(CheckboxCustom, {
       isActive: !!activeColumn[index],
       onClick: function onClick() {
         return onActiveColumn === null || onActiveColumn === void 0 ? void 0 : onActiveColumn(index, name);
       }
     })), React__default.createElement("div", {
-      className: "" + styles$1["item-detail"]
+      className: "" + styles$2["item-detail"]
     }, React__default.createElement("div", {
-      className: "" + styles$1["question"]
+      className: "" + styles$2["question"]
     }, React__default.createElement("div", {
-      className: "" + styles$1["point-custom"],
+      className: "" + styles$2["point-custom"],
       style: {
         backgroundColor: colors[index]
       }
     }), React__default.createElement("label", {
-      className: "" + styles$1["label-chart"]
+      className: "" + styles$2["label-chart"]
     }, item.name)), React__default.createElement("p", {
-      className: "" + styles$1["avr-question"]
+      className: "" + styles$2["avr-question"]
     }, "" + ((_handleGenerateAvgQue = handleGenerateAvgQuestion(item.data, avgContent)) != null ? _handleGenerateAvgQue : 0)), React__default.createElement("div", {
       hidden: avgs.length == 0 || !timeOfDay,
-      className: "" + styles$1["volatility"]
+      className: "" + styles$2["volatility"]
     }, avgs[index] < 0 ? React__default.createElement("div", {
-      className: "" + styles$1["arr"]
+      className: "" + styles$2["arr"]
     }, React__default.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       height: "1em",
       viewBox: "0 0 384 512",
-      className: styles$1[classArrowDown] + " " + styles$1["arrow"]
+      className: styles$2[classArrowDown] + " " + styles$2["arrow"]
     }, React__default.createElement("path", {
       d: "M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
     })), React__default.createElement("p", {
-      className: styles$1["percent-text"] + " " + styles$1[classArrowDown]
+      className: styles$2["percent-text"] + " " + styles$2[classArrowDown]
     }, ((_Math$abs = Math.abs(avgs[index] || 0)) === null || _Math$abs === void 0 ? void 0 : _Math$abs.toFixed(2)) + "%")) : React__default.createElement("div", {
-      className: "" + styles$1["arr"]
+      className: "" + styles$2["arr"]
     }, React__default.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       height: "1em",
       viewBox: "0 0 384 512",
-      className: " " + styles$1["rotate-180"] + " " + styles$1[classArrowUp] + " " + styles$1["arrow"]
+      className: " " + styles$2["rotate-180"] + " " + styles$2[classArrowUp] + " " + styles$2["arrow"]
     }, React__default.createElement("path", {
       d: "M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
     })), React__default.createElement("p", {
-      className: styles$1["percent-text"] + " " + styles$1[classArrowUp]
+      className: styles$2["percent-text"] + " " + styles$2[classArrowUp]
     }, ((_Math$abs2 = Math.abs(avgs[index] || 0)) === null || _Math$abs2 === void 0 ? void 0 : _Math$abs2.toFixed(2)) + "%")), React__default.createElement("p", {
-      className: "" + styles$1["month-text"]
+      className: "" + styles$2["month-text"]
     }, "vs last " + timeOfDay))));
   })), React__default.createElement("div", {
     className: "w-100 " + (isPrint && typeChart === TYPECHART.DONUT ? "d-flex justify-content-center" : "")
   }, typeChart === TYPECHART.AREA && React__default.createElement(AreaChart, {
+    isCountSeries: !!avgContent,
     months: months,
     activeColumn: activeColumn,
     series: newSeries,
@@ -30930,6 +31472,7 @@ var GenerateChartData = function GenerateChartData(_ref) {
     dayOfWeek: dayOfWeek,
     colors: colors
   }), typeChart === TYPECHART.DONUT && React__default.createElement(OverallDonutChart, {
+    isCountSeries: !!avgContent,
     series: seriesDonut,
     colors: colors,
     label: label,
@@ -31137,19 +31680,19 @@ var TopLearningStrategy = function TopLearningStrategy(_ref2) {
     left: 110
   };
   return React__default.createElement("div", {
-    className: "h-100 w-100 " + styles$1["chart-background"] + " pl-4"
+    className: "h-100 w-100 " + styles$2["chart-background"] + " pl-4"
   }, React__default.createElement(reactstrap.Row, {
     className: "d-flex"
   }, (!isPrint || isPrint && learningStrategyId) && React__default.createElement(reactstrap.Col, {
     md: isPrint ? 12 : 7
   }, React__default.createElement("div", {
-    className: "" + styles$1["block-header-chart"]
+    className: "" + styles$2["block-header-chart"]
   }, React__default.createElement("div", {
-    className: "" + styles$1["block-header-name"]
+    className: "" + styles$2["block-header-name"]
   }, React__default.createElement("p", {
-    className: "" + styles$1["title-chart"]
+    className: "" + styles$2["title-chart"]
   }, t(topLearningStrategyName)), React__default.createElement("p", {
-    className: "" + styles$1["description-chart"]
+    className: "" + styles$2["description-chart"]
   }, "The Effectiveness of Learning Strategies by Student's feedback"))), React__default.createElement("div", {
     className: "w-100 h-100",
     id: learningStrategyId
@@ -31166,21 +31709,21 @@ var TopLearningStrategy = function TopLearningStrategy(_ref2) {
     width: !isMobileScreen ? "100%" : screenWidth + 370,
     height: !isMobileScreen ? 500 : 700
   })) : React__default.createElement("img", {
-    className: styles$1["image-no-data"] + " " + styles$1["image-custom"],
+    className: styles$2["image-no-data"] + " " + styles$2["image-custom"],
     src: "images/chart-top-learning.png"
   }), React__default.createElement("p", {
-    className: "" + styles$1["name-chart"]
+    className: "" + styles$2["name-chart"]
   }, "Perceived Usefulness"))), (!isPrint || isPrint && topLearningStrategyId) && React__default.createElement(reactstrap.Col, {
     md: isPrint ? 12 : 5,
-    className: "" + styles$1["box-top-5-most"]
+    className: "" + styles$2["box-top-5-most"]
   }, React__default.createElement("div", {
-    className: "" + styles$1["block-header-chart"]
+    className: "" + styles$2["block-header-chart"]
   }, React__default.createElement("div", {
-    className: "" + styles$1["block-header-name"]
+    className: "" + styles$2["block-header-name"]
   }, React__default.createElement("p", {
-    className: "" + styles$1["title-chart"]
+    className: "" + styles$2["title-chart"]
   }, t(topMostUsedStrategiesName)), React__default.createElement("p", {
-    className: "" + styles$1["description-chart"]
+    className: "" + styles$2["description-chart"]
   }, "How many times a strategy has been chosen"))), React__default.createElement("div", {
     className: "w-100 h-100",
     id: topLearningStrategyId
@@ -31223,38 +31766,38 @@ var BubbleChartCustom = function BubbleChartCustom(_ref) {
   }, React__default.createElement("div", null, "No Data"));
   var seriesName = seriesNameBubbleChartCustom(data);
   return React__default.createElement("div", {
-    className: "" + styles$1["size-100"]
+    className: "" + styles$2["size-100"]
   }, !isPrint && React__default.createElement("div", {
-    className: "" + styles$1["block-header-chart"]
+    className: "" + styles$2["block-header-chart"]
   }, React__default.createElement("p", {
-    className: styles$1["title-chart"] + " " + styles$1["ml-10"]
+    className: styles$2["title-chart"] + " " + styles$2["ml-10"]
   }, t(studentDistribution))), React__default.createElement("div", {
-    className: "" + styles$1["bubble-chart-custom"]
+    className: "" + styles$2["bubble-chart-custom"]
   }, React__default.createElement("div", {
-    className: styles$1["chart-custom"]
+    className: styles$2["chart-custom"]
   }, React__default.createElement("div", {
-    className: styles$1["list-percent"]
+    className: styles$2["list-percent"]
   }, PERCENT.map(function (i, index) {
     return React__default.createElement("div", {
-      className: "" + styles$1["percent-item"],
+      className: "" + styles$2["percent-item"],
       key: index
     }, i, "%");
   })), React__default.createElement("div", {
-    className: styles$1["legend-wrap"]
+    className: styles$2["legend-wrap"]
   }, seriesName.map(function (i, index) {
     return React__default.createElement("div", {
-      className: "" + styles$1["item"],
+      className: "" + styles$2["item"],
       key: index
     }, React__default.createElement("div", {
-      className: "" + styles$1["mark-custom"],
+      className: "" + styles$2["mark-custom"],
       style: {
         backgroundColor: COLOR_CHART_BUBBLE[index]
       }
     }), React__default.createElement("label", {
-      className: "" + styles$1["label-legend-custom"]
+      className: "" + styles$2["label-legend-custom"]
     }, i));
   })), React__default.createElement("div", {
-    className: styles$1["chart-buddle"]
+    className: styles$2["chart-buddle"]
   }, React__default.createElement("div", null, React__default.createElement(Chart, {
     options: readinesToLearnoptions(seriesName, data),
     type: "scatter",
@@ -32403,7 +32946,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
   };
 
   return React__default.createElement("div", null, React__default.createElement("div", {
-    className: "" + styles$1["chart-to-canvas"]
+    className: "" + styles$2["chart-to-canvas"]
   }, React__default.createElement("div", {
     id: "safety"
   }, React__default.createElement(GenerateChartData, {
@@ -32504,7 +33047,7 @@ var DashboardToPDF = function DashboardToPDF(props) {
     width: 800,
     isPrint: true
   }))), React__default.createElement("div", {
-    className: "" + styles$1["image-logo"],
+    className: "" + styles$2["image-logo"],
     id: "header-logo"
   }, React__default.createElement("img", {
     src: headerLogo,
@@ -32563,7 +33106,7 @@ var useExportSessionCsv = function useExportSessionCsv() {
     var headers = "Student Name,ID/Email,Question,Answer,Teacher,Start Time";
 
     if (startDate || endDate) {
-      headers = "" + (moment(startDate).isValid() ? moment(startDate).format("DD/MM/YYYY") : '') + (moment(startDate).isValid() && moment(endDate).isValid() ? '-' : '') + moment(endDate).format("DD/MM/YYYY") + "\n" + headers;
+      headers = "\"" + (moment(startDate).isValid() ? 'From: ' + moment(startDate).format("DD/MM/YYYY") : '') + (moment(startDate).isValid() && moment(endDate).isValid() ? ' - ' : '') + (moment(endDate).isValid() ? 'To: ' + moment(endDate).format("DD/MM/YYYY") : '') + "\"\n" + headers;
     }
 
     var questions = data.questions,
@@ -32727,7 +33270,7 @@ var Dashboard = function Dashboard() {
 
   var layoutReadinessToLearn = !isExpandChart ? 6 : 12;
   return React__default.createElement("div", {
-    className: "" + styles$1["block-dashboard"]
+    className: "" + styles$2["block-dashboard"]
   }, React__default.createElement(reactstrap.Modal, {
     isOpen: modal,
     toggle: toggle,
@@ -32736,15 +33279,15 @@ var Dashboard = function Dashboard() {
     },
     centered: true
   }, React__default.createElement(reactstrap.ModalHeader, null, React__default.createElement("p", {
-    className: "" + styles$1["title-modal"]
+    className: "" + styles$2["title-modal"]
   }, t("export_to_pdf")), React__default.createElement("p", {
-    className: "" + styles$1["header-desc-modal"]
+    className: "" + styles$2["header-desc-modal"]
   }, t("the_data_is_taken_from_the_home_screen"), "."), React__default.createElement("p", {
-    className: "" + styles$1["header-desc-modal"]
+    className: "" + styles$2["header-desc-modal"]
   }, t("make_sure_everything_is_set_correctly_before_exporting"))), React__default.createElement(reactstrap.ModalBody, null, chartNames === null || chartNames === void 0 ? void 0 : chartNames.map(function (item) {
     return React__default.createElement(reactstrap.FormGroup, {
       check: true,
-      className: "" + styles$1["form-checkbox"]
+      className: "" + styles$2["form-checkbox"]
     }, React__default.createElement(reactstrap.Input, {
       type: "checkbox",
       checked: selectedToPrint.includes(item),
@@ -32753,7 +33296,7 @@ var Dashboard = function Dashboard() {
       }
     }), React__default.createElement(reactstrap.Label, {
       check: true,
-      className: "" + styles$1["checkbox-content"]
+      className: "" + styles$2["checkbox-content"]
     }, t("" + item)));
   })), React__default.createElement(reactstrap.ModalFooter, null, React__default.createElement(reactstrap.Button, {
     color: "light",
@@ -32787,7 +33330,7 @@ var Dashboard = function Dashboard() {
   }, React__default.createElement("div", {
     className: "d-flex align-items-center mx-3"
   }, React__default.createElement("h4", {
-    className: styles$1["title-dashboard"] + " m-0"
+    className: styles$2["title-dashboard"] + " m-0"
   }, t("hey"), " ", user.firstName, "!"), React__default.createElement("img", {
     className: "mx-2",
     src: "images/waving-hand.png",
@@ -32795,29 +33338,29 @@ var Dashboard = function Dashboard() {
   })), React__default.createElement("div", {
     className: "d-flex mt-2 mt-sm-0"
   }, React__default.createElement("button", {
-    className: styles$1["button-export"] + " d-flex align-items-center border-0 p-0 mr-2",
+    className: styles$2["button-export"] + " d-flex align-items-center border-0 p-0 mr-2",
     onClick: function onClick() {
       return exportSessionsCsv(filter);
     }
   }, React__default.createElement("div", {
-    className: "" + styles$1["button-icon"]
+    className: "" + styles$2["button-icon"]
   }, React__default.createElement("img", {
     src: "images/export-icon.svg",
     alt: ""
   })), React__default.createElement("p", {
-    className: styles$1["button-content"] + " mb-0"
+    className: styles$2["button-content"] + " mb-0"
   }, "Export Check-ins to CSV")), React__default.createElement("button", {
-    className: styles$1["button-export"] + " d-flex align-items-center border-0 p-0",
+    className: styles$2["button-export"] + " d-flex align-items-center border-0 p-0",
     onClick: toggle
   }, React__default.createElement("div", {
-    className: "" + styles$1["button-icon"]
+    className: "" + styles$2["button-icon"]
   }, React__default.createElement("img", {
     src: "images/export-icon.svg",
     alt: ""
   })), React__default.createElement("p", {
-    className: styles$1["button-content"] + " mb-0"
+    className: styles$2["button-content"] + " mb-0"
   }, t("export_to_pdf"))))), React__default.createElement("div", {
-    className: styles$1['filter-mobile-block'] + " p-3 my-4"
+    className: styles$2['filter-mobile-block'] + " p-3 my-4"
   }, React__default.createElement("div", {
     onClick: function onClick() {
       return setIsShowFilterMobile(!isShowFilterMobile);
@@ -32830,9 +33373,9 @@ var Dashboard = function Dashboard() {
   }) : React__default.createElement(fi.FiChevronDown, {
     size: "1.5rem"
   })), isShowFilterMobile ? React__default.createElement("div", {
-    className: "d-flex flex-column " + styles$1["filter-wrapper-mobile"]
+    className: "d-flex flex-column " + styles$2["filter-wrapper-mobile"]
   }, React__default.createElement("div", {
-    className: "d-flex flex-column mt-3 " + styles$1["filter-wrapper-mobile"]
+    className: "d-flex flex-column mt-3 " + styles$2["filter-wrapper-mobile"]
   }, LIST_FILTERS_LEFT.map(function (e) {
     return React__default.createElement(SelectFilter, {
       name: e.name,
@@ -32845,7 +33388,7 @@ var Dashboard = function Dashboard() {
       setLabelBox: e.setLabelBox
     });
   })), React__default.createElement("div", {
-    className: "d-flex flex-column " + styles$1["filter-wrapper-mobile"]
+    className: "d-flex flex-column " + styles$2["filter-wrapper-mobile"]
   }, LIST_FILTERS_RIGHT.map(function (e) {
     return React__default.createElement(SelectFilter, {
       name: e.name,
@@ -32900,7 +33443,7 @@ var Dashboard = function Dashboard() {
       } : {}
     });
   }))), React__default.createElement("div", {
-    className: styles$1["total-card-wrapper"] + " d-flex align-items-center justify-content-center justify-content-lg-between flex-wrap mb-3"
+    className: styles$2["total-card-wrapper"] + " d-flex align-items-center justify-content-center justify-content-lg-between flex-wrap mb-3"
   }, totalCardData.map(function (item) {
     return React__default.createElement(TotalCard, {
       icon: item.icon,
@@ -32911,7 +33454,7 @@ var Dashboard = function Dashboard() {
       filter: item.filter
     });
   })), React__default.createElement("div", {
-    className: "shadow-lg mb-3 " + styles$1["chart-header-wrapper"]
+    className: "shadow-lg mb-3 " + styles$2["chart-header-wrapper"]
   }, React__default.createElement(HeaderChart, {
     title: t(readinessToLearnName),
     onToggle: function onToggle() {
@@ -32996,15 +33539,15 @@ var Dashboard = function Dashboard() {
   }))), React__default.createElement(BubbleChartCustom$1, {
     data: readinessToLearning
   }), React__default.createElement("div", {
-    className: "" + styles$1["mt-15"]
+    className: "" + styles$2["mt-15"]
   }, React__default.createElement("p", {
-    className: "" + styles$1["title-chart"]
+    className: "" + styles$2["title-chart"]
   }, t(studentStressByZone)), React__default.createElement("div", {
-    className: "" + styles$1["box-chart-pressure"]
+    className: "" + styles$2["box-chart-pressure"]
   }, React__default.createElement(StudentPressureChart, {
     studentPressure: studentPressure
   }))))), React__default.createElement("div", {
-    className: "shadow-lg mb-3 " + styles$1["chart-header-wrapper"]
+    className: "shadow-lg mb-3 " + styles$2["chart-header-wrapper"]
   }, React__default.createElement(HeaderChart, {
     title: "Learning Progress",
     onToggle: function onToggle() {
@@ -34246,7 +34789,7 @@ var AdminTraining = function AdminTraining() {
   })));
 };
 
-var styles$2 = {"dashboard-card":"_3U9cF","quantity-table":"_3lYP4","label-chart":"_EIKHR","size-icon":"_3waCS","survey-dashboard-chart":"_Dr0mP","survey-donut-chart":"_2aFDQ","size-arrow":"_36sKX","color-down":"_1TjNf","color-up":"_i4rwq","box-filter":"_BlYR7","title-card":"_3fBK1","value-card":"_2w6yc","deviant-card":"_1aq6C","filter-card":"_2lX51","box-skill-item":"_jGO7A","numerical-order":"_2dXys","backoround-top-skill":"_3-8WB","color-filter":"_5QHKk","btn-filter":"_2UyJG","block-collapse":"_1SL-6","form-date-picker":"_pKQ8e","bock-filter-left":"_2eZGm","bock-filter-right":"_dz04Q","form-filter-right":"_OhjkA","form-filter-left":"_-q4tF","bock-filter-wrap":"_nukn6","title-card-box":"_2ysrj","box-item":"_37HdU","image-no-data":"_-jYtE","image-grade":"_2FOHk","chart-data":"_38Xgv","apexcharts-datalabels":"_3m9ET","apexcharts-pie-label":"_3QJAM","image-custom":"_11W3J","image-special-need":"_2-frJ","title-dashboard":"_1_YyD","box-chart":"_xbK6p","block-filter-right":"_11sYZ","shadow-lg":"_rFfwe","chart-header-wrapper":"_zLI7s","devide-component":"_OoZLR","header-chart":"_3mzht","header-left":"_2gXQT","icon-chart":"_3XABq","header-right":"_1FHsv","header-title":"_2JBD5","button-export":"_2OEd7","button-content":"_2nyRe","button-icon":"_31EdD","icon-config":"_TmymT","cursor-pointer":"_3X_ow","btn-show-chart":"_1qdL4","checkbox-chart":"_PghQI","column-chart-percent":"_12jqi","chart-background":"_2rwg5","custom-marker":"_3iwnG","mark-custom":"_rKYWD","item-legend":"_n_lnI","label-legend-custom":"_3hlTa","mark-legend":"_1LGIl","percent":"_1mr1m","listItem":"_E_ciE","item":"_27ojF","student-by-age":"_2KJYt","total-student":"_hEgnv","pie-chart":"_34-k0","options-gender":"_119UL","legend":"_tlvnI","text-lengend":"_2Ehxf","student-by-grade":"_L1RnZ","bubble-chart-custom":"_18zab","x-axis-custom-wrap":"_1NRsG","axis-content":"_1jDpB","legend-wrap":"_93MRp","list-percent":"_3ipHU","percent-item":"_35mGN","chart-custom":"_1769M","chart-buddle":"_ton1p","title-grade":"_2LTMk","title-modal":"_3f2-D","header-desc-modal":"_19k86","form-checkbox":"_2ZpLB","checkbox-content":"_jLDZ4","btn-export":"_2sMK7","title-chart":"_1E7vX","image-logo":"_3Xggx","chart-to-canvas":"_3zQW_","box-chart-title":"_2HMn5","chart-view-dashboard":"_1qtzK","chart-left":"_g4q-z","chart-right":"_9ibzA","block-header-chart":"_1s7DG","item-checkbox":"_5wSJP","check-box":"_1h1ro","legend-pie-custom":"_2MTrM","legend-item":"_2kriq","color-box":"_jOIdn","filter-mobile-block":"_1bZCU","block-dashboard":"_2n_zv","filter-wrapper-mobile":"_FjhpG","gap-8px":"_4SQcs"};
+var styles$3 = {"dashboard-card":"_3U9cF","quantity-table":"_3lYP4","label-chart":"_EIKHR","size-icon":"_3waCS","survey-dashboard-chart":"_Dr0mP","survey-donut-chart":"_2aFDQ","size-arrow":"_36sKX","color-down":"_1TjNf","color-up":"_i4rwq","box-filter":"_BlYR7","title-card":"_3fBK1","value-card":"_2w6yc","deviant-card":"_1aq6C","filter-card":"_2lX51","box-skill-item":"_jGO7A","numerical-order":"_2dXys","backoround-top-skill":"_3-8WB","color-filter":"_5QHKk","btn-filter":"_2UyJG","block-collapse":"_1SL-6","form-date-picker":"_pKQ8e","bock-filter-left":"_2eZGm","bock-filter-right":"_dz04Q","form-filter-right":"_OhjkA","form-filter-left":"_-q4tF","bock-filter-wrap":"_nukn6","title-card-box":"_2ysrj","box-item":"_37HdU","image-no-data":"_-jYtE","image-grade":"_2FOHk","chart-data":"_38Xgv","apexcharts-datalabels":"_3m9ET","apexcharts-pie-label":"_3QJAM","image-custom":"_11W3J","image-special-need":"_2-frJ","title-dashboard":"_1_YyD","box-chart":"_xbK6p","block-filter-right":"_11sYZ","shadow-lg":"_rFfwe","chart-header-wrapper":"_zLI7s","devide-component":"_OoZLR","header-chart":"_3mzht","header-left":"_2gXQT","icon-chart":"_3XABq","header-right":"_1FHsv","header-title":"_2JBD5","button-export":"_2OEd7","button-content":"_2nyRe","button-icon":"_31EdD","icon-config":"_TmymT","cursor-pointer":"_3X_ow","btn-show-chart":"_1qdL4","checkbox-chart":"_PghQI","column-chart-percent":"_12jqi","chart-background":"_2rwg5","custom-marker":"_3iwnG","mark-custom":"_rKYWD","item-legend":"_n_lnI","label-legend-custom":"_3hlTa","mark-legend":"_1LGIl","percent":"_1mr1m","listItem":"_E_ciE","item":"_27ojF","student-by-age":"_2KJYt","total-student":"_hEgnv","pie-chart":"_34-k0","options-gender":"_119UL","legend":"_tlvnI","text-lengend":"_2Ehxf","student-by-grade":"_L1RnZ","bubble-chart-custom":"_18zab","x-axis-custom-wrap":"_1NRsG","axis-content":"_1jDpB","legend-wrap":"_93MRp","list-percent":"_3ipHU","percent-item":"_35mGN","chart-custom":"_1769M","chart-buddle":"_ton1p","title-grade":"_2LTMk","title-modal":"_3f2-D","header-desc-modal":"_19k86","form-checkbox":"_2ZpLB","checkbox-content":"_jLDZ4","btn-export":"_2sMK7","title-chart":"_1E7vX","image-logo":"_3Xggx","chart-to-canvas":"_3zQW_","box-chart-title":"_2HMn5","chart-view-dashboard":"_1qtzK","chart-left":"_g4q-z","chart-right":"_9ibzA","block-header-chart":"_1s7DG","item-checkbox":"_5wSJP","check-box":"_1h1ro","legend-pie-custom":"_2MTrM","legend-item":"_2kriq","color-box":"_jOIdn","filter-mobile-block":"_1bZCU","block-dashboard":"_2n_zv","filter-wrapper-mobile":"_FjhpG","gap-8px":"_4SQcs"};
 
 var LegalGenderType$1;
 
@@ -34325,17 +34868,17 @@ var TotalCard$1 = function TotalCard(_ref) {
       title = _ref.title,
       value = _ref.value;
   return React__default.createElement("div", {
-    className: styles$2["title-card-box"] + " " + styles$2["box-item"] + " p-4 mb-2 shadow-md mr-0 mr-sm-3"
+    className: styles$3["title-card-box"] + " " + styles$3["box-item"] + " p-4 mb-2 shadow-md mr-0 mr-sm-3"
   }, React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-center"
   }, React__default.createElement("img", {
     src: icon
   }), React__default.createElement("p", {
-    className: styles$2["title-card"] + " m-0 mx-2"
+    className: styles$3["title-card"] + " m-0 mx-2"
   }, title, ":")), React__default.createElement("div", {
     className: "d-flex align-items-center justify-content-center mt-3"
   }, React__default.createElement("p", {
-    className: "" + styles$2["value-card"]
+    className: "" + styles$3["value-card"]
   }, value)));
 };
 
@@ -35003,7 +35546,7 @@ var SurveyDashboard = function SurveyDashboard() {
       monthsSeriesTotal = _useChartDatas.monthsSeriesTotal;
 
   return React__default.createElement("div", {
-    className: styles$2["block-dashboard"] + " mb-5"
+    className: styles$3["block-dashboard"] + " mb-5"
   }, React__default.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: [".survey-donut-chart .apexcharts-tooltip{", "color: #FFFFFF!important;", "}"].join('')
@@ -35013,9 +35556,9 @@ var SurveyDashboard = function SurveyDashboard() {
   }, React__default.createElement("div", {
     className: "d-flex align-items-center mx-3"
   }, React__default.createElement("h4", {
-    className: styles$2["title-dashboard"] + " m-0"
+    className: styles$3["title-dashboard"] + " m-0"
   }, t('survey_dashboard')))), React__default.createElement("div", {
-    className: styles$2['filter-mobile-block'] + " p-3 my-4"
+    className: styles$3['filter-mobile-block'] + " p-3 my-4"
   }, React__default.createElement("div", {
     onClick: function onClick() {
       return setIsShowFilterMobile(!isShowFilterMobile);
@@ -35028,9 +35571,9 @@ var SurveyDashboard = function SurveyDashboard() {
   }) : React__default.createElement(fi.FiChevronDown, {
     size: "1.5rem"
   })), isShowFilterMobile ? React__default.createElement("div", {
-    className: "d-flex flex-column " + styles$2["filter-wrapper-mobile"]
+    className: "d-flex flex-column " + styles$3["filter-wrapper-mobile"]
   }, React__default.createElement("div", {
-    className: "d-flex flex-column mt-3 " + styles$2["filter-wrapper-mobile"]
+    className: "d-flex flex-column mt-3 " + styles$3["filter-wrapper-mobile"]
   }, LIST_FILTERS_LEFT.map(function (e) {
     return React__default.createElement(SelectFilter, {
       name: e.name,
@@ -35043,7 +35586,7 @@ var SurveyDashboard = function SurveyDashboard() {
       setLabelBox: e.setLabelBox
     });
   })), React__default.createElement("div", {
-    className: "d-flex flex-column " + styles$2["filter-wrapper-mobile"]
+    className: "d-flex flex-column " + styles$3["filter-wrapper-mobile"]
   }, LIST_FILTERS_RIGHT.map(function (e) {
     return React__default.createElement(SelectFilter, {
       name: e.name,
@@ -35096,7 +35639,7 @@ var SurveyDashboard = function SurveyDashboard() {
       } : {}
     });
   }))), React__default.createElement("div", {
-    className: "d-flex align-items-center justify-content-center justify-content-sm-start " + styles$2['gap-8px'] + " flex-wrap mb-3"
+    className: "d-flex align-items-center justify-content-center justify-content-sm-start " + styles$3['gap-8px'] + " flex-wrap mb-3"
   }, totalCardData.map(function (item) {
     return React__default.createElement(TotalCard$1, {
       icon: item.icon,
@@ -35107,7 +35650,7 @@ var SurveyDashboard = function SurveyDashboard() {
       filter: item.filter
     });
   })), React__default.createElement("div", {
-    className: "shadow-lg mb-3 py-3 " + styles$2["chart-header-wrapper"] + " " + styles$2["survey-dashboard-chart"] + " survey-dashboard-chart"
+    className: "shadow-lg mb-3 py-3 " + styles$3["chart-header-wrapper"] + " " + styles$3["survey-dashboard-chart"] + " survey-dashboard-chart"
   }, React__default.createElement(reactstrap.Row, null, React__default.createElement(reactstrap.Col, {
     xs: 12,
     sm: 12,
@@ -35126,7 +35669,7 @@ var SurveyDashboard = function SurveyDashboard() {
     xs: 12,
     sm: 12,
     md: 5,
-    className: "survey-donut-chart " + styles$2["survey-donut-chart"]
+    className: "survey-donut-chart " + styles$3["survey-donut-chart"]
   }, React__default.createElement(GenerateChartData, {
     avgContent: "FLAGS",
     colors: ["#C44140", "#FFB04F", "#0F9655"],
@@ -35143,7 +35686,7 @@ var SurveyDashboard = function SurveyDashboard() {
   })), React__default.createElement(reactstrap.Col, {
     md: 12
   }, React__default.createElement(GenerateChartData, {
-    colors: ["#73C8E5", "#F9F871", "#D7B0DE", "#E56362", "#169490", "#D3D3D3", "#316CD9"],
+    colors: ["#73C8E5", "#FFB04F", "#D7B0DE", "#E56362", "#169490", "#D3D3D3", "#316CD9"],
     name: "Survey Results",
     typeChart: TYPECHART$2.AREA,
     activeColumn: activeColumnResult,