touchstudy-core 0.1.166 → 0.1.167

package/dist/index.js

@@ -30,7 +30,7 @@ var formik = require('formik');
 var tinymce = _interopDefault(require('tinymce'));
 require('@wiris/mathtype-tinymce6');
 var tinymceReact = require('@tinymce/tinymce-react');
-var styles$c = require('@mui/material/styles');
+var styles$d = require('@mui/material/styles');
 var Grid = _interopDefault(require('@mui/material/Grid'));
 var Typography = _interopDefault(require('@mui/material/Typography'));
 var Card = _interopDefault(require('@mui/material/Card'));
@@ -52,6 +52,7 @@ var Box = _interopDefault(require('@mui/material/Box'));
 var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
 var DatePicker = require('@mui/x-date-pickers/DatePicker');
 var fa6 = require('react-icons/fa6');
+var cg = require('react-icons/cg');
 var DialogTitle = _interopDefault(require('@mui/material/DialogTitle'));
 var DialogContent = _interopDefault(require('@mui/material/DialogContent'));
 var DialogActions = _interopDefault(require('@mui/material/DialogActions'));
@@ -1503,6 +1504,11 @@ var removedteacherfromclass = "교사 수업 제거";
 var addedstudenttoclass = "학생 수업 추가";
 var removedstudentfromclass = "학생 수업 제거";
 var hidden = "숨겨진";
+var current_status = "현재 상태";
+var next_status = "다음 상태";
+var arrival_time = "도착 시간";
+var current_arrival_time = "현재 도착 시간";
+var uppdate_attendance = "출석 현황 수정";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -2643,7 +2649,12 @@ var lang_ko = {
 	removedteacherfromclass: removedteacherfromclass,
 	addedstudenttoclass: addedstudenttoclass,
 	removedstudentfromclass: removedstudentfromclass,
-	hidden: hidden
+	hidden: hidden,
+	current_status: current_status,
+	next_status: next_status,
+	arrival_time: arrival_time,
+	current_arrival_time: current_arrival_time,
+	uppdate_attendance: uppdate_attendance
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -3807,6 +3818,11 @@ var removedteacherfromclass$1 = "Removed teacher from class";
 var addedstudenttoclass$1 = "Added student to class";
 var removedstudentfromclass$1 = "Removed student from class";
 var hidden$1 = "Hidden";
+var current_status$1 = "Current status";
+var next_status$1 = "Next status";
+var arrival_time$1 = "Arrival time";
+var current_arrival_time$1 = "Current arrival time";
+var uppdate_attendance$1 = "Update attendance";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -4949,7 +4965,12 @@ var lang_en = {
 	removedteacherfromclass: removedteacherfromclass$1,
 	addedstudenttoclass: addedstudenttoclass$1,
 	removedstudentfromclass: removedstudentfromclass$1,
-	hidden: hidden$1
+	hidden: hidden$1,
+	current_status: current_status$1,
+	next_status: next_status$1,
+	arrival_time: arrival_time$1,
+	current_arrival_time: current_arrival_time$1,
+	uppdate_attendance: uppdate_attendance$1
 };
 
 i18n__default.use(reactI18next.initReactI18next).init({
@@ -5549,6 +5570,8 @@ var CommonDialog = function CommonDialog(_ref) {
     isShowHeader = _ref$isShowHeader === void 0 ? true : _ref$isShowHeader,
     titleClassName = _ref.titleClassName,
     minWidth = _ref.minWidth,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1102 : _ref$zIndex,
     onClose = _ref.onClose;
   return React__default.createElement(material.Dialog, {
     open: open,
@@ -5557,7 +5580,7 @@ var CommonDialog = function CommonDialog(_ref) {
     fullWidth: true,
     scroll: "body",
     sx: {
-      zIndex: 1102
+      zIndex: zIndex
     },
     PaperProps: {
       sx: {
@@ -6165,7 +6188,7 @@ var SCORE_OPTIONS = Array.from({
   return i + 1;
 });
 var QUESTION_OPTIONS = Array.from({
-  length: 10
+  length: 40
 }, function (_, i) {
   return i + 1;
 });
@@ -7713,22 +7736,10 @@ var QuestionCountSelector = function QuestionCountSelector(_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     isDisabled = _ref.isDisabled,
-    rest = _ref.rest,
-    totalQuestions = _ref.totalQuestions;
+    rest = _ref.rest;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var questionOptions = totalQuestions && totalQuestions > 1 ? Array.from({
-    length: totalQuestions
-  }, function (_, i) {
-    return i + 1;
-  }).map(function (i) {
-    return {
-      label: t("question_count_format", {
-        number: i
-      }),
-      value: i
-    };
-  }) : QUESTION_OPTIONS.map(function (i) {
+  var questionOptions = QUESTION_OPTIONS.map(function (i) {
     return {
       label: t("question_count_format", {
         number: i
@@ -10029,11 +10040,11 @@ var common = {
   white: '#FFFFFF'
 };
 var action$2 = {
-  hover: styles$c.alpha(grey[500], 0.08),
-  selected: styles$c.alpha(grey[500], 0.16),
-  disabled: styles$c.alpha(grey[500], 0.8),
-  disabledBackground: styles$c.alpha(grey[500], 0.24),
-  focus: styles$c.alpha(grey[500], 0.24),
+  hover: styles$d.alpha(grey[500], 0.08),
+  selected: styles$d.alpha(grey[500], 0.16),
+  disabled: styles$d.alpha(grey[500], 0.8),
+  disabledBackground: styles$d.alpha(grey[500], 0.24),
+  focus: styles$d.alpha(grey[500], 0.24),
   hoverOpacity: 0.08,
   disabledOpacity: 0.48
 };
@@ -10053,7 +10064,7 @@ var base = {
   purple: purple,
   dark_purple: dark_purple,
   dark_red: dark_red,
-  divider: styles$c.alpha(grey[500], 0.2),
+  divider: styles$d.alpha(grey[500], 0.2),
   action: action$2
 };
 
@@ -13308,6 +13319,8 @@ var SortIcon = function SortIcon(_ref) {
   }));
 };
 
+var styles$3 = {"date-picker":"_2YMvj","time-picker":"_3exYU"};
+
 var DrawerTab;
 (function (DrawerTab) {
   DrawerTab[DrawerTab["Attendance"] = 0] = "Attendance";
@@ -13323,6 +13336,437 @@ var StudentAttendanceStatus;
   StudentAttendanceStatus[StudentAttendanceStatus["Late"] = 2] = "Late";
 })(StudentAttendanceStatus || (StudentAttendanceStatus = {}));
 
+var formatGrade = function formatGrade(grade, t, language) {
+  return grade ? language === exports.Language.en ? "" + grade + getOrdinalSuffix(grade, language) : "" + t("number_grade", {
+    number: grade
+  }) : "";
+};
+var formatLessonOrder = function formatLessonOrder(index, t, language) {
+  return language === exports.Language.en ? "" + (index + 1) + getOrdinalSuffix(index + 1, language) : "" + t("round", {
+    number: index + 1
+  });
+};
+var formatTime$1 = function formatTime(t, timeInMilliseconds) {
+  var hours = Math.floor(timeInMilliseconds / 3600000);
+  var minutes = Math.floor(timeInMilliseconds % 3600000 / 60000);
+  var seconds = Math.floor(timeInMilliseconds % 60000 / 1000);
+  return timeInMilliseconds < 60 ? "" + timeInMilliseconds + t("seconds") : t("hours_mins_seconds", {
+    hours: hours,
+    mins: minutes,
+    seconds: seconds
+  });
+};
+var a11yProps = function a11yProps(index) {
+  return {
+    id: "info-tab-" + index,
+    "aria-controls": "info-tabpanel-" + index,
+    sx: {
+      position: "relative",
+      fontSize: "13px",
+      fontWeight: 700,
+      padding: "12px 16px",
+      color: grey[500],
+      mx: "8px",
+      "&::after": {
+        content: "''",
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        width: "100%",
+        height: "1px",
+        backgroundColor: grey[500]
+      }
+    }
+  };
+};
+var subtractTime = function subtractTime(time1, time2, t) {
+  var hoursDiff = time1.diff(time2, "hours", false);
+  var minutesDiff = time1.diff(time2, "minutes", false) - hoursDiff * 60;
+  if (hoursDiff < 0) {
+    hoursDiff += 24;
+  }
+  if (minutesDiff < 0) {
+    minutesDiff += 60;
+  }
+  if (hoursDiff === 0) {
+    return minutesDiff + " " + t("minute");
+  }
+  if (minutesDiff === 0) {
+    return "" + (hoursDiff > 1 ? t("hours") : t("hour"));
+  }
+  return hoursDiff + " " + (hoursDiff > 1 ? t("hours") : t("hour")) + " " + minutesDiff + " " + t("minute");
+};
+
+var CalendarFill = function CalendarFill(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "16" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "16" : _ref$height,
+    color = _ref.color;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    fill: color,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M15 3.99998C15 3.46955 14.7893 2.96084 14.4142 2.58577C14.0391 2.2107 13.5304 1.99998 13 1.99998H12.5V1.51405C12.5 1.24498 12.2931 1.01405 12.0241 1.00061C11.9565 0.997353 11.8889 1.00785 11.8255 1.03148C11.762 1.05511 11.7041 1.09136 11.6551 1.13805C11.6061 1.18475 11.5671 1.2409 11.5404 1.30311C11.5138 1.36532 11.5 1.4323 11.5 1.49998V1.99998H4.5V1.51405C4.5 1.24498 4.29313 1.01405 4.02406 1.00061C3.95646 0.997353 3.8889 1.00785 3.82547 1.03148C3.76204 1.05511 3.70407 1.09136 3.65508 1.13805C3.60608 1.18475 3.56707 1.2409 3.54041 1.30311C3.51375 1.36532 3.50001 1.4323 3.5 1.49998V1.99998H3C2.46957 1.99998 1.96086 2.2107 1.58579 2.58577C1.21071 2.96084 1 3.46955 1 3.99998V4.37498C1 4.40814 1.01317 4.43993 1.03661 4.46337C1.06005 4.48682 1.09185 4.49998 1.125 4.49998H14.875C14.9082 4.49998 14.9399 4.48682 14.9634 4.46337C14.9868 4.43993 15 4.40814 15 4.37498V3.99998Z",
+    fill: "#97A1AF"
+  }), React__default.createElement("path", {
+    d: "M1 13C1 13.5304 1.21071 14.0391 1.58579 14.4142C1.96086 14.7893 2.46957 15 3 15H13C13.5304 15 14.0391 14.7893 14.4142 14.4142C14.7893 14.0391 15 13.5304 15 13V5.625C15 5.59185 14.9868 5.56005 14.9634 5.53661C14.9399 5.51317 14.9082 5.5 14.875 5.5H1.125C1.09185 5.5 1.06005 5.51317 1.03661 5.53661C1.01317 5.56005 1 5.59185 1 5.625V13Z",
+    fill: "#97A1AF"
+  }));
+};
+
+var ClockFill = function ClockFill(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "16" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "16" : _ref$height,
+    color = _ref.color;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    fill: color,
+    viewBox: "0 0 14 14",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M7 0.25C3.41031 0.25 0.5 3.16031 0.5 6.75C0.5 10.3397 3.41031 13.25 7 13.25C10.5897 13.25 13.5 10.3397 13.5 6.75C13.5 3.16031 10.5897 0.25 7 0.25ZM10 7.75H7C6.86739 7.75 6.74021 7.69732 6.64645 7.60355C6.55268 7.50979 6.5 7.38261 6.5 7.25V2.75C6.5 2.61739 6.55268 2.49021 6.64645 2.39645C6.74021 2.30268 6.86739 2.25 7 2.25C7.13261 2.25 7.25979 2.30268 7.35355 2.39645C7.44732 2.49021 7.5 2.61739 7.5 2.75V6.75H10C10.1326 6.75 10.2598 6.80268 10.3536 6.89645C10.4473 6.99021 10.5 7.11739 10.5 7.25C10.5 7.38261 10.4473 7.50979 10.3536 7.60355C10.2598 7.69732 10.1326 7.75 10 7.75Z",
+    fill: "#97A1AF"
+  }));
+};
+
+var CheckedCircleFill = function CheckedCircleFill(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "16" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "17" : _ref$height,
+    color = _ref.color;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    fill: color,
+    viewBox: "0 0 16 17",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M8 1.75C4.41594 1.75 1.5 4.66594 1.5 8.25C1.5 11.8341 4.41594 14.75 8 14.75C11.5841 14.75 14.5 11.8341 14.5 8.25C14.5 4.66594 11.5841 1.75 8 1.75ZM11.3828 6.07156L7.18281 11.0716C7.13674 11.1264 7.07941 11.1708 7.01471 11.2016C6.95001 11.2323 6.87945 11.2489 6.80781 11.25H6.79938C6.72929 11.25 6.66 11.2352 6.59599 11.2067C6.53198 11.1782 6.47468 11.1365 6.42781 11.0844L4.62781 9.08438C4.5821 9.03589 4.54654 8.97876 4.52322 8.91633C4.4999 8.85391 4.4893 8.78745 4.49203 8.72087C4.49477 8.65429 4.51078 8.58892 4.53914 8.52862C4.56749 8.46831 4.60761 8.41429 4.65715 8.36971C4.70668 8.32514 4.76463 8.29091 4.82757 8.26905C4.89052 8.24719 4.95721 8.23813 5.02371 8.2424C5.09021 8.24668 5.15518 8.26421 5.21481 8.29396C5.27444 8.3237 5.32752 8.36507 5.37094 8.41562L6.78625 9.98812L10.6172 5.42844C10.7031 5.32909 10.8247 5.26754 10.9556 5.25711C11.0866 5.24668 11.2164 5.28819 11.317 5.37268C11.4175 5.45717 11.4808 5.57784 11.4931 5.70862C11.5055 5.8394 11.4658 5.96977 11.3828 6.07156Z",
+    fill: "#97A1AF"
+  }));
+};
+
+var IconPerson = function IconPerson(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "16" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "16" : _ref$height,
+    color = _ref.color;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    fill: color,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M10.395 2.01813C9.78691 1.36156 8.93753 1 8.00003 1C7.05753 1 6.20534 1.35937 5.60003 2.01187C4.98815 2.67156 4.69003 3.56813 4.76003 4.53625C4.89878 6.44625 6.35222 8 8.00003 8C9.64784 8 11.0988 6.44656 11.2397 4.53687C11.3107 3.5775 11.0107 2.68281 10.395 2.01813Z",
+    fill: "#97A1AF"
+  }), React__default.createElement("path", {
+    d: "M13.4999 15H2.49993C2.35595 15.0019 2.21337 14.9716 2.08255 14.9115C1.95173 14.8513 1.83597 14.7627 1.74368 14.6522C1.54056 14.4094 1.45868 14.0778 1.51931 13.7425C1.78306 12.2794 2.60618 11.0503 3.89993 10.1875C5.04931 9.42156 6.50525 9 7.99993 9C9.49462 9 10.9506 9.42188 12.0999 10.1875C13.3937 11.05 14.2168 12.2791 14.4806 13.7422C14.5412 14.0775 14.4593 14.4091 14.2562 14.6519C14.1639 14.7625 14.0482 14.8511 13.9174 14.9113C13.7865 14.9715 13.6439 15.0018 13.4999 15Z",
+    fill: "#97A1AF"
+  }));
+};
+
+var LessonTooltip = function LessonTooltip(_ref) {
+  var _startTime$format, _endTime$format;
+  var lesson = _ref.lesson,
+    lessonAttendance = _ref.lessonAttendance,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "16px" : _ref$padding;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var endTime = timeSpanToLocalMoment(lesson.endTime, lesson.date);
+  var startTime = timeSpanToLocalMoment(lesson.startTime, lesson.date);
+  return React__default.createElement(material.Stack, {
+    padding: padding
+  }, React__default.createElement(material.Stack, {
+    gap: "20px"
+  }, React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[700]
+    }
+  }, lesson.courseName), React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: "20px"
+  }, React__default.createElement(material.Box, {
+    display: "flex",
+    flexDirection: "row",
+    gap: "4px"
+  }, React__default.createElement(CalendarFill, null), React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[500],
+      fontSize: "13px",
+      fontWeight: "600",
+      whiteSpace: "nowrap"
+    }
+  }, t("class_date"))), React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[700],
+      fontSize: "14px",
+      fontWeight: "600"
+    }
+  }, t("" + moment(lesson === null || lesson === void 0 ? void 0 : lesson.date).format(t("date_format"))))), React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: "20px"
+  }, React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    gap: "4px"
+  }, React__default.createElement(ClockFill, null), React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[500],
+      fontSize: "13px",
+      fontWeight: "600",
+      whiteSpace: "nowrap"
+    }
+  }, t("class_time"))), React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[700],
+      fontSize: "14px",
+      fontWeight: "600"
+    }
+  }, ((_startTime$format = startTime === null || startTime === void 0 ? void 0 : startTime.format("HH:mm")) != null ? _startTime$format : "HH:mm") + " : " + ((_endTime$format = endTime === null || endTime === void 0 ? void 0 : endTime.format("HH:mm")) != null ? _endTime$format : "HH:mm") + " (" + (startTime && endTime && subtractTime(startTime, endTime, t)) + ")")), React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: "20px"
+  }, React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    gap: "4px"
+  }, React__default.createElement(CheckedCircleFill, null), React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[500],
+      fontSize: "13px",
+      fontWeight: "600",
+      whiteSpace: "nowrap"
+    }
+  }, t("attendance"))), React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[700],
+      fontSize: "14px",
+      fontWeight: "600"
+    }
+  }, (lessonAttendance === null || lessonAttendance === void 0 ? void 0 : lessonAttendance.status) === StudentAttendanceStatus.Late ? t("late") : (lessonAttendance === null || lessonAttendance === void 0 ? void 0 : lessonAttendance.status) === StudentAttendanceStatus.Attended ? t("attendance") : t("none_attendance"))), React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: "20px"
+  }, React__default.createElement(material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    gap: "4px"
+  }, React__default.createElement(IconPerson, null), React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[500],
+      fontSize: "13px",
+      fontWeight: "600",
+      whiteSpace: "nowrap"
+    }
+  }, t("teacher_in_charge"))), React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[700],
+      fontSize: "14px",
+      fontWeight: "600"
+    }
+  }, lesson === null || lesson === void 0 ? void 0 : lesson.mainTeacherName))));
+};
+
+var AttendanceFormBody = function AttendanceFormBody(_ref) {
+  var _timeSpanToLocalMomen, _values$attendanceTim;
+  var formikProp = _ref.formikProp,
+    lesson = _ref.lesson,
+    attendance = _ref.attendance,
+    onClose = _ref.onClose;
+  var values = formikProp.values,
+    setFieldValue = formikProp.setFieldValue;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(""),
+    openPicker = _useState[0],
+    setOpenPicker = _useState[1];
+  var maxTime = timeSpanToLocalMoment(lesson.endTime, lesson.date);
+  var minTime = (_timeSpanToLocalMomen = timeSpanToLocalMoment(lesson.startTime, lesson.date)) === null || _timeSpanToLocalMomen === void 0 ? void 0 : _timeSpanToLocalMomen.add("minutes", -30);
+  var handleChangeStatus = function handleChangeStatus() {
+    if (values.status === StudentAttendanceStatus.Attended) setFieldValue("status", StudentAttendanceStatus.Late);else setFieldValue("status", StudentAttendanceStatus.Attended);
+  };
+  return React__default.createElement(React.Fragment, null, React__default.createElement(material.DialogContent, {
+    sx: {
+      overflowY: "unset"
+    }
+  }, React__default.createElement(material.Stack, {
+    direction: "column",
+    spacing: 1
+  }, React__default.createElement(LessonTooltip, {
+    lesson: lesson,
+    lessonAttendance: attendance,
+    padding: 0
+  }), React__default.createElement(material.Divider, null), React__default.createElement(material.Stack, {
+    direction: "row",
+    gap: 2,
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%"
+  }, React__default.createElement(material.Box, null, React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[500],
+      fontSize: "13px",
+      fontWeight: "600",
+      whiteSpace: "nowrap"
+    }
+  }, t("current_status")), React__default.createElement(material.Typography, {
+    sx: {
+      color: green[700],
+      fontSize: "14px",
+      fontWeight: "600"
+    }
+  }, (attendance === null || attendance === void 0 ? void 0 : attendance.status) === StudentAttendanceStatus.Late ? t("late") : (attendance === null || attendance === void 0 ? void 0 : attendance.status) === StudentAttendanceStatus.Attended ? t("attendance") : t("none_attendance"))), React__default.createElement(cg.CgArrowsExchange, {
+    size: 24,
+    color: green[700]
+  }), React__default.createElement(material.Stack, {
+    direction: "row"
+  }, React__default.createElement(material.Stack, {
+    direction: "column"
+  }, React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[500],
+      fontSize: "13px",
+      fontWeight: "600",
+      whiteSpace: "nowrap"
+    }
+  }, t("next_status")), React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[700],
+      fontSize: "14px",
+      fontWeight: "600"
+    }
+  }, values.status === StudentAttendanceStatus.Late ? t("late") : values.status === StudentAttendanceStatus.Attended ? t("attendance") : t("none_attendance"))), React__default.createElement(material.IconButton, {
+    onClick: handleChangeStatus
+  }, React__default.createElement(io.IoMdSync, {
+    size: 24,
+    color: green[700]
+  })))), !!(attendance !== null && attendance !== void 0 && attendance.attendanceTime) && (attendance === null || attendance === void 0 ? void 0 : attendance.attendanceTime) !== DATE_TIME_MIN_VALUE && React__default.createElement(material.Box, null, React__default.createElement(material.Typography, {
+    sx: {
+      color: grey[500],
+      fontSize: "13px",
+      fontWeight: "600",
+      whiteSpace: "nowrap"
+    }
+  }, t("current_arrival_time")), React__default.createElement(material.Typography, null, utcToLocalTime(attendance.attendanceTime, t("date_time_format")))), values.status !== StudentAttendanceStatus.Absent && React__default.createElement(material.Box, null, React__default.createElement("label", null, t("arrival_time")), React__default.createElement(LocalizationProvider.LocalizationProvider, {
+    dateAdapter: AdapterMoment.AdapterMoment
+  }, React__default.createElement(demo.DemoContainer, {
+    components: ["TimePicker"]
+  }, React__default.createElement(xDatePickers.TimePicker, {
+    open: openPicker === "attendanceTime",
+    value: (_values$attendanceTim = values.attendanceTime) != null ? _values$attendanceTim : null,
+    format: "HH:mm",
+    maxTime: maxTime,
+    minTime: minTime,
+    onChange: function onChange(newValue) {
+      setFieldValue("attendanceTime", newValue);
+    },
+    timezone: "system",
+    className: styles$3["time-picker"] + " w-100",
+    slotProps: {
+      textField: {
+        onClick: function onClick() {
+          return setOpenPicker("attendanceTime");
+        }
+      }
+    },
+    closeOnSelect: false,
+    onOpen: function onOpen() {
+      return setOpenPicker("attendanceTime");
+    },
+    onClose: function onClose() {
+      return setOpenPicker("");
+    },
+    ampm: false
+  })))))), React__default.createElement(material.DialogActions, null, React__default.createElement(material.Button, {
+    variant: "contained",
+    className: "bg-secondary mb-2 text-capitalize",
+    onClick: onClose
+  }, t("cancel")), React__default.createElement(material.Button, {
+    variant: "contained",
+    color: "primary",
+    className: "mb-2 me-2 text-capitalize",
+    onClick: function onClick() {
+      return formikProp.handleSubmit();
+    }
+  }, t("continue"))));
+};
+
+var AttendanceFormDialog = function AttendanceFormDialog(_ref) {
+  var lesson = _ref.lesson,
+    studentId = _ref.studentId,
+    attendance = _ref.attendance,
+    open = _ref.open,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1300 : _ref$zIndex,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var convertAttendanceRequest = function convertAttendanceRequest() {
+    return {
+      studentId: studentId,
+      attendanceTime: attendance !== null && attendance !== void 0 && attendance.attendanceTime && attendance.attendanceTime !== DATE_TIME_MIN_VALUE ? moment.utc(attendance.attendanceTime).local() : undefined,
+      status: (attendance === null || attendance === void 0 ? void 0 : attendance.status) === StudentAttendanceStatus.Attended ? StudentAttendanceStatus.Late : (attendance === null || attendance === void 0 ? void 0 : attendance.status) === StudentAttendanceStatus.Late ? StudentAttendanceStatus.Absent : StudentAttendanceStatus.Attended
+    };
+  };
+  var attendanceRequest = React.useMemo(convertAttendanceRequest, [attendance === null || attendance === void 0 ? void 0 : attendance.attendanceTime, studentId]);
+  var handleSubmit = function handleSubmit(values, _) {
+    try {
+      if (!lesson) return Promise.resolve();
+      var attendanceTime = undefined;
+      if (values.attendanceTime) {
+        var minTime = timeSpanToLocalMoment(lesson.startTime, lesson.date).add(-30, "minutes");
+        var attendanceMoment = moment(minTime.format("YYYY-MM-DD") + " " + values.attendanceTime.format("HH:mm:ss"), "YYYY-MM-DD HH:mm:ss");
+        if (attendanceMoment.isBefore(minTime)) attendanceMoment.add(1, "days");
+        attendanceTime = attendanceMoment.utc().format("YYYY-MM-DDTHH:mm:ss.SSS");
+      }
+      return Promise.resolve(onSubmit(lesson, {
+        studentId: values.studentId,
+        status: values.status,
+        attendanceTime: attendanceTime
+      })).then(function () {});
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  if (!lesson) return null;
+  return React__default.createElement(CommonDialog, {
+    open: open,
+    onClose: onClose,
+    size: "sm",
+    title: t("uppdate_attendance"),
+    zIndex: zIndex
+  }, React__default.createElement(formik.Formik, {
+    initialValues: attendanceRequest,
+    enableReinitialize: true,
+    onSubmit: handleSubmit
+  }, function (formikProp) {
+    return React__default.createElement(AttendanceFormBody, {
+      lesson: lesson,
+      attendance: attendance,
+      formikProp: formikProp,
+      onClose: onClose
+    });
+  }));
+};
+
 var USER_URL = BASE_URL + "/api/user";
 var getUserByIdApi = function getUserByIdApi(id) {
   return api.get(USER_URL + "/GetById/" + id);
@@ -13420,80 +13864,6 @@ var DrawerContainerStyle = function DrawerContainerStyle(width) {
   };
 };
 
-var formatGrade = function formatGrade(grade, t, language) {
-  return grade ? language === exports.Language.en ? "" + grade + getOrdinalSuffix(grade, language) : "" + t("number_grade", {
-    number: grade
-  }) : "";
-};
-var formatLessonOrder = function formatLessonOrder(index, t, language) {
-  return language === exports.Language.en ? "" + (index + 1) + getOrdinalSuffix(index + 1, language) : "" + t("round", {
-    number: index + 1
-  });
-};
-var formatTime$1 = function formatTime(t, timeInMilliseconds) {
-  var hours = Math.floor(timeInMilliseconds / 3600000);
-  var minutes = Math.floor(timeInMilliseconds % 3600000 / 60000);
-  var seconds = Math.floor(timeInMilliseconds % 60000 / 1000);
-  return timeInMilliseconds < 60 ? "" + timeInMilliseconds + t("seconds") : t("hours_mins_seconds", {
-    hours: hours,
-    mins: minutes,
-    seconds: seconds
-  });
-};
-var a11yProps = function a11yProps(index) {
-  return {
-    id: "info-tab-" + index,
-    "aria-controls": "info-tabpanel-" + index,
-    sx: {
-      position: "relative",
-      fontSize: "13px",
-      fontWeight: 700,
-      padding: "12px 16px",
-      color: grey[500],
-      mx: "8px",
-      "&::after": {
-        content: "''",
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        width: "100%",
-        height: "1px",
-        backgroundColor: grey[500]
-      }
-    }
-  };
-};
-var subtractTime = function subtractTime(time1, time2, t) {
-  var _time1$split$map = time1.split(":").map(Number),
-    hours1 = _time1$split$map[0],
-    minutes1 = _time1$split$map[1];
-  var _time2$split$map = time2.split(":").map(Number),
-    hours2 = _time2$split$map[0],
-    minutes2 = _time2$split$map[1];
-  var totalMinutes1 = hours1 * 60 + minutes1;
-  var totalMinutes2 = hours2 * 60 + minutes2;
-  var diffMinutes = Math.abs(totalMinutes1 - totalMinutes2);
-  var hoursDiff = Math.floor(diffMinutes / 60);
-  var minutesDiff = diffMinutes % 60;
-  if (hoursDiff < 0) {
-    hoursDiff += 24;
-  }
-  if (minutesDiff < 0) {
-    minutesDiff += 60;
-  }
-  if (hoursDiff === 0) {
-    return minutesDiff + " " + t("minute");
-  }
-  if (minutesDiff === 0) {
-    return "" + (hoursDiff > 1 ? t("hours") : t("hour"));
-  }
-  return hoursDiff + " " + (hoursDiff > 1 ? t("hours") : t("hour")) + " " + minutesDiff + " " + t("minute");
-};
-var formatTimeHHmm = function formatTimeHHmm(time) {
-  var res = time.split(":");
-  return res[0] + ":" + res[1];
-};
-
 var DrawerHeader = function DrawerHeader(_ref) {
   var _BRIEF_GRADE_OPTIONS$;
   var isLoading = _ref.isLoading,
@@ -14464,7 +14834,7 @@ var defaultSeries = function defaultSeries(t) {
   }];
 };
 
-var styles$3 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","form-label":"_1jRLX","form-control":"_13KE7","form-label-dialog":"_3mXNM","btn-cancel":"_3bqNl","btn-register":"_3GFnT"};
+var styles$4 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","form-label":"_1jRLX","form-control":"_13KE7","form-label-dialog":"_3mXNM","btn-cancel":"_3bqNl","btn-register":"_3GFnT"};
 
 var iconCloseDialog = function iconCloseDialog(_ref) {
   var _ref$width = _ref.width,
@@ -14592,7 +14962,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
       padding: "24px 24px 40px 24px"
     }, (selectedNote || studentName) && React__default.createElement(material.Stack, null, React__default.createElement("label", {
       htmlFor: "questions",
-      className: styles["form-label"] + "  " + styles$3["form-label-dialog"]
+      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
     }, t("student_name")), React__default.createElement(Typography, {
       sx: {
         fontWeight: 700,
@@ -14601,7 +14971,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
       }
     }, selectedNote ? selectedNote.fullName : studentName)), React__default.createElement(material.Stack, null, React__default.createElement("label", {
       htmlFor: "content-question",
-      className: styles["form-label"] + "  " + styles$3["form-label-dialog"]
+      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
     }, t("incorrect_answer_note_contents")), React__default.createElement(material.Box, {
       position: "relative",
       display: "flex",
@@ -14635,7 +15005,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React__default.createElement(MButton, {
-      className: styles$3["btn-cancel"],
+      className: styles$4["btn-cancel"],
       onClick: onClose
     }, React__default.createElement(Typography, {
       sx: {
@@ -14649,7 +15019,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
       sx: {
         bgcolor: styles.dark
       },
-      className: styles$3["btn-register"],
+      className: styles$4["btn-register"],
       type: "submit",
       disabled: !values.content.trim().length
     }, React__default.createElement(Typography, {
@@ -14758,7 +15128,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
       padding: "24px 24px 40px 24px"
     }, React__default.createElement(material.Stack, null, React__default.createElement("label", {
       htmlFor: "questions",
-      className: styles["form-label"] + "  " + styles$3["form-label-dialog"]
+      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
     }, t("problem_number")), selectedQuestion || selectedNote ? React__default.createElement(Typography, {
       sx: {
         fontWeight: 700,
@@ -14785,7 +15155,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
       }
     })), React__default.createElement(material.Stack, null, React__default.createElement("label", {
       htmlFor: "content-question",
-      className: styles["form-label"] + "  " + styles$3["form-label-dialog"]
+      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
     }, t("incorrect_answer_note_contents")), React__default.createElement(material.Box, {
       position: "relative",
       display: "flex",
@@ -14814,7 +15184,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React__default.createElement(MButton, {
-      className: styles$3["btn-cancel"],
+      className: styles$4["btn-cancel"],
       onClick: onClose
     }, React__default.createElement(Typography, {
       sx: {
@@ -14828,7 +15198,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
       sx: {
         bgcolor: styles.dark
       },
-      className: styles$3["btn-register"],
+      className: styles$4["btn-register"],
       type: "submit",
       disabled: !values.content.trim().length
     }, React__default.createElement(Typography, {
@@ -15992,7 +16362,6 @@ var TEXTBOOK_DEFAULT_FILTER = {
   sortColumnName: "Name",
   preparedFilterType: "RecentlySolvedQuestions"
 };
-var FormatDate = "YYYY-MM-DD HH:mm:ss";
 
 var EXAM_SESSION_URL$1 = BASE_URL + "/api/examSession";
 var getExamSessionListApi = function getExamSessionListApi(query) {
@@ -17251,7 +17620,7 @@ Object.defineProperty(exports,"__esModule",{value:!0});var _typeof="function"==t
 
 var ReactApexChart = unwrapExports(reactApexcharts_min);
 
-var styles$4 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","titleBox":"_1dveO","title":"_mxRxf","point":"_2fD-F","buttonGroup":"_2DGl3","btnFeedback":"_xGW1x","btnTerminate":"_3mLu2","myanswer":"_eDBpS","titleMyAnswer1":"_2fMq3","titleMyAnswer2":"_3gEYh","contentMyAnswer":"_2K_sx","myAnswerItem":"_2qiLh","time":"_6TCOK","timeCol":"_hmseC","answer-response":"_3GfJt","answer-response-0":"_3ut64","answer-response-1":"_2VtpD","answer-response-2":"_58lQU","answer-response-3":"_1ucMY","answer-response-4":"_1qkxy","overall-response-1":"_1AeGu","overall-response-2":"_1xTB0","overall-response-3":"_3Yu_5","answerCorrect":"_2jIeT","answerIncorrect":"_to2v0","answerNograss":"_1JSte","answerEasy":"_2_uTU","answerDiscrimination":"_1DBoA","answerTrap":"_1q3tD","answerNoTime":"_3iItu","questionOrder":"_1fNkS","myTimeLabel":"_1Z_F3","myPoolTime":"_4KwG0","topTimeLabel":"_245H-","topTime":"_3tZqw","meanTimeLabel":"_PlPLY","meanTime":"_12a7R","compareChart":"_3MW16","prevChart":"_1fNkb","chart":"_3K4oY","nextChart":"_3YKBp","titleChart":"_13BVP","titleCompareGrass":"_o1txm","tableCompareGrass":"_bT5nf","thcolumn1":"_3Umg0","tdcolumn1":"_3dRMF","tdcolumn3":"_2tcBP","classification":"_1AFeb","wrapperProblem":"_oTqG7","titleProblem":"_35eIx","titleProblemClose":"_3t4HO","titleTrickyProblem":"_1-oxK","wrongQuestions":"_2dpMR","question":"_1lSOX","assignedQuestions":"_1ONUt","wrapperContent":"_nPoR0","content":"_2zmZn","contentColumn1":"_334SY","span1":"_3Lf-U","span2":"_ZpMot","contentColumn2":"_16P3l","duration":"_1kT28","topDuration":"_1fVRi","overallCorrectRate":"_3jLGe","answer":"_VsZ0K","contentVulnerable":"_QxKMy","wrappContentProblem":"_nnqpW","contentProblem":"_3Z1nV","labelProblem":"_36Xpx","name":"_3ZJQW","percent":"_2J3MK","slider":"_1MPdO","track":"_3CV_y","noData":"__g-ff","loading":"_3j485","table-responsive":"_2O6RX","form-label":"_1RYOQ","form-control":"_3VRVT","form-label-dialog":"_3oCSh","btn-cancel":"_3USKq","btn-register":"_3y_iD","pdfBtnBox":"_3xZHo","pdfBtn":"_1DtWq","form-select":"_1a_vw","loader":"_2uC7T","dot":"_Xz-Mr","bounce":"_3THgz"};
+var styles$5 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","titleBox":"_1dveO","title":"_mxRxf","point":"_2fD-F","buttonGroup":"_2DGl3","btnFeedback":"_xGW1x","btnTerminate":"_3mLu2","myanswer":"_eDBpS","titleMyAnswer1":"_2fMq3","titleMyAnswer2":"_3gEYh","contentMyAnswer":"_2K_sx","myAnswerItem":"_2qiLh","time":"_6TCOK","timeCol":"_hmseC","answer-response":"_3GfJt","answer-response-0":"_3ut64","answer-response-1":"_2VtpD","answer-response-2":"_58lQU","answer-response-3":"_1ucMY","answer-response-4":"_1qkxy","overall-response-1":"_1AeGu","overall-response-2":"_1xTB0","overall-response-3":"_3Yu_5","answerCorrect":"_2jIeT","answerIncorrect":"_to2v0","answerNograss":"_1JSte","answerEasy":"_2_uTU","answerDiscrimination":"_1DBoA","answerTrap":"_1q3tD","answerNoTime":"_3iItu","questionOrder":"_1fNkS","myTimeLabel":"_1Z_F3","myPoolTime":"_4KwG0","topTimeLabel":"_245H-","topTime":"_3tZqw","meanTimeLabel":"_PlPLY","meanTime":"_12a7R","compareChart":"_3MW16","prevChart":"_1fNkb","chart":"_3K4oY","nextChart":"_3YKBp","titleChart":"_13BVP","titleCompareGrass":"_o1txm","tableCompareGrass":"_bT5nf","thcolumn1":"_3Umg0","tdcolumn1":"_3dRMF","tdcolumn3":"_2tcBP","classification":"_1AFeb","wrapperProblem":"_oTqG7","titleProblem":"_35eIx","titleProblemClose":"_3t4HO","titleTrickyProblem":"_1-oxK","wrongQuestions":"_2dpMR","question":"_1lSOX","assignedQuestions":"_1ONUt","wrapperContent":"_nPoR0","content":"_2zmZn","contentColumn1":"_334SY","span1":"_3Lf-U","span2":"_ZpMot","contentColumn2":"_16P3l","duration":"_1kT28","topDuration":"_1fVRi","overallCorrectRate":"_3jLGe","answer":"_VsZ0K","contentVulnerable":"_QxKMy","wrappContentProblem":"_nnqpW","contentProblem":"_3Z1nV","labelProblem":"_36Xpx","name":"_3ZJQW","percent":"_2J3MK","slider":"_1MPdO","track":"_3CV_y","noData":"__g-ff","loading":"_3j485","table-responsive":"_2O6RX","form-label":"_1RYOQ","form-control":"_3VRVT","form-label-dialog":"_3oCSh","btn-cancel":"_3USKq","btn-register":"_3y_iD","pdfBtnBox":"_3xZHo","pdfBtn":"_1DtWq","form-select":"_1a_vw","loader":"_2uC7T","dot":"_Xz-Mr","bounce":"_3THgz"};
 
 var printStyles = {"page-break":"_35kyG","print-exact-color":"_1PFgl","avoid-break-inside":"_3rPGh"};
 
@@ -17420,7 +17789,7 @@ var AnswerItem = function AnswerItem(_ref) {
     },
     key: data.id
   }, React__default.createElement("div", {
-    className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+    className: styles$5["myAnswerItem"] + " " + styles["noGutters"]
   }, React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17430,7 +17799,7 @@ var AnswerItem = function AnswerItem(_ref) {
       padding: "5px 8px"
     }
   }, data.isStar ? React__default.createElement(iconStarQuestion, null) : React__default.createElement(iconNoStarQuestion, null), React__default.createElement("span", {
-    className: styles$4["questionOrder"]
+    className: styles$5["questionOrder"]
   }, t("number_question", {
     number: data.questionOrder + 1
   }))), React__default.createElement("div", {
@@ -17441,11 +17810,11 @@ var AnswerItem = function AnswerItem(_ref) {
       gap: "4px"
     }
   }, data.isCorrect && data.selectedAnswers !== "" && React__default.createElement(React.Fragment, null, React__default.createElement(iconCorrectAnswer, null), React__default.createElement("span", {
-    className: styles$4["answerCorrect"]
+    className: styles$5["answerCorrect"]
   }, t("correct"))), !data.isCorrect && data.selectedAnswers !== "" && React__default.createElement(React.Fragment, null, React__default.createElement(iconCorrectAnswer$1, null), React__default.createElement("span", {
-    className: styles$4["answerIncorrect"]
+    className: styles$5["answerIncorrect"]
   }, t("incorrect"))), data.selectedAnswers === "" && React__default.createElement(React.Fragment, null, React__default.createElement(iconNoGrass, null), React__default.createElement("span", {
-    className: styles$4["answerNograss"]
+    className: styles$5["answerNograss"]
   }, t("no_solution")))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17456,12 +17825,12 @@ var AnswerItem = function AnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$5["answer-response"] + " " + styles$5["answer-response-" + data.answerResponseSignal]
   }, formatTimeSecond(Math.round(data.duration), t)) : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, t("no_time"))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17472,13 +17841,13 @@ var AnswerItem = function AnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$5["answer-response"] + " " + styles$5["answer-response-" + data.answerResponseSignal]
   }, formatTimeDiff(data.duration, data.topDuration, t)) : React__default.createElement("p", {
     style: {
       margin: 0,
       textAlign: "center"
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, "-")), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17489,12 +17858,12 @@ var AnswerItem = function AnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$4)
+    className: styles$5["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$5)
   }, data.overallCorrectRate.toFixed(2) + "%") : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, t("no_time"))), isStudent && !isLearningSpace && React__default.createElement(material.Box, {
     className: styles["custom-col-2"]
   }, openContextMenu ? React__default.createElement(material.ClickAwayListener, {
@@ -17561,7 +17930,7 @@ var MyAnswer = function MyAnswer(_ref) {
     }));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["myanswer"]
+    className: "" + styles$5["myanswer"]
   }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
     return React__default.createElement("div", {
       key: item.category.id
@@ -17571,7 +17940,7 @@ var MyAnswer = function MyAnswer(_ref) {
       bgcolor: "#F9FAFB",
       flexDirection: "row",
       padding: "12px",
-      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+      className: styles$5["myAnswerItem"] + " " + styles["noGutters"]
     }, React__default.createElement("div", {
       className: styles["custom-col-2"],
       style: {
@@ -17650,7 +18019,7 @@ var MyAnswer = function MyAnswer(_ref) {
         alignItems: "center"
       }
     }, t("total_correct_rate")))), React__default.createElement("div", {
-      className: styles$4["titleMyAnswer2"]
+      className: styles$5["titleMyAnswer2"]
     }, React__default.createElement(material.Typography, {
       sx: {
         color: "#97A1AF",
@@ -17663,7 +18032,7 @@ var MyAnswer = function MyAnswer(_ref) {
         fontWeight: 700
       }
     }, item.category.name))), React__default.createElement("div", {
-      className: styles$4["contentMyAnswer"]
+      className: styles$5["contentMyAnswer"]
     }, React__default.createElement(ListView, {
       data: item.questions,
       render: function render(question, index) {
@@ -17779,7 +18148,7 @@ var CompareGrass = function CompareGrass(_ref2) {
           borderTop: index < effectSize.length - 1 ? "1px solid transparent" : undefined
         }
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"]
+        className: styles$5["tdcolumn1"]
       }, t("problem"), " ", item.questionOrder + 1), React__default.createElement("td", {
         style: {
           textAlign: "center",
@@ -17787,9 +18156,9 @@ var CompareGrass = function CompareGrass(_ref2) {
           maxWidth: "30%"
         }
       }, typeof item.correctAnswers === "string" ? renderAnswer(item.questionAnswerType, item.correctAnswers) : renderTextbookAnswer(item.questionAnswerType, item.correctAnswers, item.correctTextualAnswers, true)), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
-          color: item.isCorrect ? styles$4.green_support_900 : styles$4.red_900,
+          color: item.isCorrect ? styles$5.green_support_900 : styles$5.red_900,
           maxWidth: "30%"
         }
       }, typeof item.selectedAnswers === "string" ? renderAnswer(item.questionAnswerType, item.selectedAnswers) : renderTextbookAnswer(item.questionAnswerType, item.selectedAnswers, item.textualAnswers)), React__default.createElement("td", {
@@ -17800,7 +18169,7 @@ var CompareGrass = function CompareGrass(_ref2) {
       }, renderAnswer(item.questionAnswerType, item.mostSelectedAnswers)), React__default.createElement("td", {
         className: "" + printStyles["avoid-break-inside"]
       }, React__default.createElement("div", {
-        className: styles$4["classification"] + " " + printStyles["avoid-break-inside"]
+        className: styles$5["classification"] + " " + printStyles["avoid-break-inside"]
       }, item.problemCategories.map(function (problem, index) {
         return React__default.createElement(material.Stack, {
           flexDirection: "row",
@@ -17843,11 +18212,11 @@ var CompareGrass = function CompareGrass(_ref2) {
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["compareGrass"]
+    className: "" + styles$5["compareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, React__default.createElement(material.Table, {
     style: {
       width: "100%"
@@ -17859,7 +18228,7 @@ var CompareGrass = function CompareGrass(_ref2) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -17940,37 +18309,37 @@ var TrickyProblem = function TrickyProblem(_ref) {
   });
   var renderProblems = function renderProblems() {
     return React__default.createElement(React.Fragment, null, React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
     }, React__default.createElement(iconX, null), React__default.createElement("span", null, t("incorrect_problem_among_the_starred_problems"))), React__default.createElement("div", {
-      className: styles$4["wrongQuestions"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["wrongQuestions"] + " " + printStyles["avoid-break-inside"]
     }, !!(inCorrectQuestions !== null && inCorrectQuestions !== void 0 && inCorrectQuestions.length) && inCorrectQuestions.map(function (question) {
       return React__default.createElement("span", {
         key: question.id,
-        className: styles$4["question"]
+        className: styles$5["question"]
       }, t("number_question", {
         number: question.questionOrder + 1
       }));
     }), !(data !== null && data !== void 0 && data.questions.length) && React__default.createElement("div", {
-      className: styles$4["noData"]
+      className: styles$5["noData"]
     }, t("no_data"))), React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
     }, React__default.createElement(iconAssignedQuestions, null), React__default.createElement("span", null, t("correct_problem_among_the_starred_problems"))), React__default.createElement("div", {
-      className: styles$4["assignedQuestions"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["assignedQuestions"] + " " + printStyles["avoid-break-inside"]
     }, !!(correctQuestions !== null && correctQuestions !== void 0 && correctQuestions.length) && correctQuestions.map(function (question) {
       return React__default.createElement("div", {
         key: question.id,
-        className: styles$4["question"]
+        className: styles$5["question"]
       }, t("number_question", {
         number: question.questionOrder + 1
       }));
     }), !(data !== null && data !== void 0 && data.questions.length) && React__default.createElement("div", {
-      className: styles$4["noData"]
+      className: styles$5["noData"]
     }, t("no_data"))));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
@@ -17982,10 +18351,10 @@ var TrickyProblem = function TrickyProblem(_ref) {
     }
   }, t("tricky_problems")), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, renderProblems()));
 };
 
@@ -18011,9 +18380,9 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
           borderBottom: "1px solid #e4e7ec"
         } : {}
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$5["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18022,22 +18391,22 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
       })), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
       }, item.duration ? formatTimeSecond(item.duration, t) : ""), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
       }, item.topDuration ? formatTimeSecond(item.topDuration, t) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: isBetter ? styles$4.dark : styles$4.red_900,
+          color: isBetter ? styles$5.dark : styles$5.red_900,
           fontSize: "13px",
           fontWeight: 600
         }
@@ -18053,15 +18422,15 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
       return React__default.createElement(material.Stack, {
         direction: "row",
         flexWrap: "nowrap",
-        className: styles$4["content"] + " " + printStyles["avoid-break-inside"],
+        className: styles$5["content"] + " " + printStyles["avoid-break-inside"],
         key: item.id
       }, React__default.createElement(material.Box, {
         width: "160px",
-        className: styles$4["contentColumn1"]
+        className: styles$5["contentColumn1"]
       }, React__default.createElement(material.Stack, null, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("problem")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("number_question", {
         number: item.questionOrder + 1
       }))), (category === null || category === void 0 ? void 0 : category.name) && React__default.createElement(material.Typography, {
@@ -18072,22 +18441,22 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
           textAlign: "center"
         }
       }, category.name))), React__default.createElement(material.Box, {
-        className: styles$4["contentColumn2"]
+        className: styles$5["contentColumn2"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("my_time")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("top_time"))), React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["duration"]
+        className: styles$5["duration"]
       }, formatTimeSecond(item.duration, t)), React__default.createElement("span", {
-        className: styles$4["topDuration"]
+        className: styles$5["topDuration"]
       }, formatTimeSecond(item.topDuration, t)))));
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
@@ -18103,20 +18472,20 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
     }
   }, t("problems_that_took_a_long_time")), React__default.createElement(material.Typography, {
     sx: {
-      color: styles$4.gray_300,
+      color: styles$5.gray_300,
       fontSize: "11px",
       fontWeight: 500
     }
   }, t("protracted_problem_detail"))), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, data.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -18128,7 +18497,7 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -18142,7 +18511,7 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
       textAlign: "center"
     }
   }, t("time_comparison")))), React__default.createElement("tbody", null, isMyStoryStudent ? renderTableBody(data) : renderQuestions(data))))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -18214,39 +18583,39 @@ var Vulnerable = function Vulnerable(_ref) {
           borderBottom: index < data.length - 1 ? "1px solid #e4e7ec" : undefined
         }
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$5["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, React__default.createElement(material.Typography, {
-        color: styles$4.gray_900,
+        color: styles$5.gray_900,
         fontSize: "13px",
         fontWeight: 600
       }, t("problem") + " " + (item.questionOrder + 1))), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.dark,
+          color: styles$5.dark,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.overallCorrectRate.toFixed(2) ? item.overallCorrectRate.toFixed(2) + "%" : ""), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
-          color: styles$4.red_900,
+          color: styles$5.red_900,
           fontSize: "13px",
           fontWeight: 500
         }
       }, typeof item.selectedAnswers === "string" ? renderAnswer(item.questionAnswerType, item.selectedAnswers) : renderTextbookAnswer(item.questionAnswerType, item.selectedAnswers, item.textualAnswers)), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700
+          color: styles$5.gray_700
         }
       }, typeof item.correctAnswers === "string" ? renderAnswer(item.questionAnswerType, item.correctAnswers) : renderTextbookAnswer(item.questionAnswerType, item.correctAnswers, item.correctTextualAnswers, true)), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700
+          color: styles$5.gray_700
         }
       }, item.category.name ? item.category.name : ""));
     });
@@ -18257,18 +18626,18 @@ var Vulnerable = function Vulnerable(_ref) {
       return React__default.createElement(material.Stack, {
         direction: "row",
         flexWrap: "nowrap",
-        className: styles$4["content"] + " " + printStyles["avoid-break-inside"],
+        className: styles$5["content"] + " " + printStyles["avoid-break-inside"],
         key: question.id
       }, React__default.createElement(material.Box, {
         width: "160px",
-        className: styles$4["contentColumn1"]
+        className: styles$5["contentColumn1"]
       }, React__default.createElement(material.Stack, {
         direction: "column",
         gap: 1
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("problem_number")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("number_question", {
         number: question.questionOrder + 1
       }))), ((_question$category = question.category) === null || _question$category === void 0 ? void 0 : _question$category.name) && React__default.createElement(material.Typography, {
@@ -18279,18 +18648,18 @@ var Vulnerable = function Vulnerable(_ref) {
           textAlign: "center"
         }
       }, question.category.name))), React__default.createElement(material.Box, {
-        className: styles$4["contentColumn2"],
+        className: styles$5["contentColumn2"],
         sx: {
           alignItems: "center"
         }
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("total_correct_rate")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("my_wrong_answer"))), React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["overallCorrectRate"]
+        className: styles$5["overallCorrectRate"]
       }, question.overallCorrectRate.toFixed(2), "%"), React__default.createElement("span", {
-        className: styles$4["answer"]
+        className: styles$5["answer"]
       }, typeof question.selectedAnswers === "string" ? renderAnswer(question.questionAnswerType, question.selectedAnswers) : renderTextbookAnswer(question.questionAnswerType, question.selectedAnswers, question.textualAnswers), " ", t("answer"), " ", typeof question.correctAnswers === "string" ? renderAnswer(question.questionAnswerType, question.correctAnswers) : renderTextbookAnswer(question.questionAnswerType, question.correctAnswers, question.correctTextualAnswers, true)))));
     });
   };
@@ -18298,9 +18667,9 @@ var Vulnerable = function Vulnerable(_ref) {
     changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: handleToggle
   }, React__default.createElement(material.Stack, {
     flexDirection: "row",
@@ -18314,20 +18683,20 @@ var Vulnerable = function Vulnerable(_ref) {
     }
   }, t("issues_vulnerable")), React__default.createElement(material.Typography, {
     sx: {
-      color: styles$4.gray_300,
+      color: styles$5.gray_300,
       fontSize: "11px",
       fontWeight: 500
     }
   }, t("vulnerable_detail"))), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, incorrectQuestions.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -18339,7 +18708,7 @@ var Vulnerable = function Vulnerable(_ref) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -18357,7 +18726,7 @@ var Vulnerable = function Vulnerable(_ref) {
       textAlign: "center"
     }
   }, t("_category")))), React__default.createElement("tbody", null, renderTableBody(incorrectQuestions))), !isMyStoryStudent && renderQuestions(incorrectQuestions))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -18408,24 +18777,24 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
           borderBottom: index < data.length - 1 ? "1px solid #e4e7ec" : undefined
         }
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$5["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.name), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.percentageAmongStudents.toFixed(2), "%"), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18434,7 +18803,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18443,7 +18812,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18456,26 +18825,26 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
         left: item.percentageAmongStudents + "%"
       };
       return React__default.createElement("div", {
-        className: styles$4["contentProblem"] + " " + printStyles["avoid-break-inside"],
+        className: styles$5["contentProblem"] + " " + printStyles["avoid-break-inside"],
         key: item.id
       }, React__default.createElement("div", {
-        className: styles$4["labelProblem"]
+        className: styles$5["labelProblem"]
       }, React__default.createElement("span", {
-        className: styles$4["name"]
+        className: styles$5["name"]
       }, item.name), React__default.createElement("div", {
-        className: styles$4["percent"]
+        className: styles$5["percent"]
       }, React__default.createElement("span", null, item.percentageAmongStudents.toFixed(2), "%"), React__default.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, t("problems")))), React__default.createElement("div", {
-        className: styles$4["slider"]
+        className: styles$5["slider"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["track"],
+        className: styles$5["track"],
         style: trackStyle
       }))));
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : ProblemKey.GradesByTerritory);
     }
@@ -18487,14 +18856,14 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
     }
   }, t("grades_by_area")), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, formattedData.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -18506,7 +18875,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("categories")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -18524,7 +18893,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
       textAlign: "center"
     }
   }, t("total_solve_time")))), React__default.createElement("tbody", null, renderTableBody(formattedData))), !isMyStoryStudent && renderCategories(formattedData))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -18634,7 +19003,7 @@ function CreateNewQuestionDialog(_ref) {
       padding: "24px 24px 40px 24px"
     }, React__default.createElement(material.Stack, null, React__default.createElement("label", {
       htmlFor: "questions",
-      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
+      className: styles["form-label"] + "  " + styles$5["form-label-dialog"]
     }, t("questions_to_ask")), React__default.createElement(formik.Field, {
       id: "questions",
       name: "questionId",
@@ -18653,7 +19022,7 @@ function CreateNewQuestionDialog(_ref) {
       }
     })), React__default.createElement(material.Stack, null, React__default.createElement("label", {
       htmlFor: "content-question",
-      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
+      className: styles["form-label"] + "  " + styles$5["form-label-dialog"]
     }, t("question_content")), React__default.createElement(material.Box, {
       position: "relative",
       display: "flex",
@@ -18681,7 +19050,7 @@ function CreateNewQuestionDialog(_ref) {
       fontWeight: 500,
       fontSize: "10px",
       lineHeight: "11.93px",
-      color: !(errors !== null && errors !== void 0 && errors.content) ? "#97A1AF" : styles$4.red_900
+      color: !(errors !== null && errors !== void 0 && errors.content) ? "#97A1AF" : styles$5.red_900
     }, !(errors !== null && errors !== void 0 && errors.content) ? t("your_questions_will_be_sent_to_the_counselor") : t("please_enter_your_question"))))), React__default.createElement(DialogActions, {
       sx: {
         display: "flex",
@@ -18691,7 +19060,7 @@ function CreateNewQuestionDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React__default.createElement(MButton, {
-      className: styles$4["btn-cancel"],
+      className: styles$5["btn-cancel"],
       onClick: onCloseCreateQuestion
     }, React__default.createElement(Typography, {
       sx: {
@@ -18705,7 +19074,7 @@ function CreateNewQuestionDialog(_ref) {
       sx: {
         bgcolor: styles.dark
       },
-      className: styles$4["btn-register"],
+      className: styles$5["btn-register"],
       type: "submit",
       disabled: !values.content.trim().length
     }, React__default.createElement(Typography, {
@@ -18761,18 +19130,18 @@ var TimeOrderChart = function TimeOrderChart(_ref) {
       color: "#414E62"
     }
   }, t("article_number"), " ", timelyOrderQuestion.article), React__default.createElement("div", {
-    className: styles$4["compareChart"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["compareChart"] + " " + printStyles["avoid-break-inside"]
   }, React__default.createElement("div", {
-    className: "" + styles$4["prevChart"]
+    className: "" + styles$5["prevChart"]
   }), React__default.createElement("div", {
-    className: styles$4["chart"] + " sr-line-chart"
+    className: styles$5["chart"] + " sr-line-chart"
   }, React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
     ref: chartRef,
     height: 389,
     options: chartOptions,
     series: series
   }))), React__default.createElement("div", {
-    className: "" + styles$4["nextChart"]
+    className: "" + styles$5["nextChart"]
   })));
 };
 
@@ -18811,7 +19180,7 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     },
     key: data.id
   }, React__default.createElement("div", {
-    className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+    className: styles$5["myAnswerItem"] + " " + styles["noGutters"]
   }, React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18821,7 +19190,7 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
       padding: "5px 8px"
     }
   }, data.isStar ? React__default.createElement(iconStarQuestion, null) : React__default.createElement(iconNoStarQuestion, null), React__default.createElement("span", {
-    className: styles$4["questionOrder"]
+    className: styles$5["questionOrder"]
   }, t("number_question", {
     number: data.questionOrder + 1
   }))), React__default.createElement("div", {
@@ -18832,11 +19201,11 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
       gap: "4px"
     }
   }, data.isCorrect && (!!((_data$selectedAnswers = data.selectedAnswers) !== null && _data$selectedAnswers !== void 0 && _data$selectedAnswers.length) || !!((_data$textualAnswers = data.textualAnswers) !== null && _data$textualAnswers !== void 0 && _data$textualAnswers.length)) && React__default.createElement(React.Fragment, null, React__default.createElement(iconCorrectAnswer, null), React__default.createElement("span", {
-    className: styles$4["answerCorrect"]
+    className: styles$5["answerCorrect"]
   }, t("correct"))), !data.isCorrect && (!!((_data$selectedAnswers2 = data.selectedAnswers) !== null && _data$selectedAnswers2 !== void 0 && _data$selectedAnswers2.length) || !!((_data$textualAnswers2 = data.textualAnswers) !== null && _data$textualAnswers2 !== void 0 && _data$textualAnswers2.length)) && React__default.createElement(React.Fragment, null, React__default.createElement(iconCorrectAnswer$1, null), React__default.createElement("span", {
-    className: styles$4["answerIncorrect"]
+    className: styles$5["answerIncorrect"]
   }, t("incorrect"))), !((_data$selectedAnswers3 = data.selectedAnswers) !== null && _data$selectedAnswers3 !== void 0 && _data$selectedAnswers3.length) && !((_data$textualAnswers3 = data.textualAnswers) !== null && _data$textualAnswers3 !== void 0 && _data$textualAnswers3.length) && React__default.createElement(React.Fragment, null, React__default.createElement(iconNoGrass, null), React__default.createElement("span", {
-    className: styles$4["answerNograss"]
+    className: styles$5["answerNograss"]
   }, t("no_solution")))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18847,12 +19216,12 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$5["answer-response"] + " " + styles$5["answer-response-" + data.answerResponseSignal]
   }, formatTimeSecond(Math.round(data.duration), t)) : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, t("no_time"))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18863,13 +19232,13 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$5["answer-response"] + " " + styles$5["answer-response-" + data.answerResponseSignal]
   }, formatTimeDiff(data.duration, data.topDuration, t)) : React__default.createElement("p", {
     style: {
       margin: 0,
       textAlign: "center"
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, "-")), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18880,12 +19249,12 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$4)
+    className: styles$5["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$5)
   }, data.overallCorrectRate.toFixed(2) + "%") : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, t("no_time"))), isStudent && !isLearningSpace && React__default.createElement(material.Box, {
     className: styles["custom-col-2"]
   }, openContextMenu ? React__default.createElement(material.ClickAwayListener, {
@@ -18957,7 +19326,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
     }));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["myanswer"]
+    className: "" + styles$5["myanswer"]
   }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
     var _item$categories;
     return React__default.createElement("div", {
@@ -18968,7 +19337,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
       bgcolor: "#F9FAFB",
       flexDirection: "row",
       padding: "12px",
-      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+      className: styles$5["myAnswerItem"] + " " + styles["noGutters"]
     }, React__default.createElement("div", {
       className: styles["custom-col-2"],
       style: {
@@ -19047,7 +19416,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
         alignItems: "center"
       }
     }, t("total_correct_rate")))), React__default.createElement("div", {
-      className: styles$4["titleMyAnswer2"]
+      className: styles$5["titleMyAnswer2"]
     }, React__default.createElement(material.Typography, {
       sx: {
         color: "#97A1AF",
@@ -19062,7 +19431,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
     }, (_item$categories = item.categories) === null || _item$categories === void 0 ? void 0 : _item$categories.map(function (i) {
       return i.name;
     }).join(" / ")))), React__default.createElement("div", {
-      className: styles$4["contentMyAnswer"]
+      className: styles$5["contentMyAnswer"]
     }, React__default.createElement(ListView, {
       data: item.questions,
       render: function render(question, index) {
@@ -19092,24 +19461,24 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
           borderBottom: index < (data === null || data === void 0 ? void 0 : data.length) - 1 ? "1px solid #e4e7ec" : undefined
         }
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$5["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.name), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.percentageAmongStudents.toFixed(2), "%"), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -19118,7 +19487,7 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -19127,7 +19496,7 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -19141,26 +19510,26 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
         left: item.percentageAmongStudents + "%"
       };
       return React__default.createElement("div", {
-        className: styles$4["contentProblem"] + " " + printStyles["avoid-break-inside"],
+        className: styles$5["contentProblem"] + " " + printStyles["avoid-break-inside"],
         key: item.id
       }, React__default.createElement("div", {
-        className: styles$4["labelProblem"]
+        className: styles$5["labelProblem"]
       }, React__default.createElement("span", {
-        className: styles$4["name"]
+        className: styles$5["name"]
       }, item.name), React__default.createElement("div", {
-        className: styles$4["percent"]
+        className: styles$5["percent"]
       }, React__default.createElement("span", null, (_item$percentageAmong = item.percentageAmongStudents) === null || _item$percentageAmong === void 0 ? void 0 : _item$percentageAmong.toFixed(2), "%"), React__default.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, t("problems")))), React__default.createElement("div", {
-        className: styles$4["slider"]
+        className: styles$5["slider"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["track"],
+        className: styles$5["track"],
         style: trackStyle
       }))));
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : ProblemKey.GradesByTerritory);
     }
@@ -19172,14 +19541,14 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
     }
   }, t("grades_by_area")), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, formattedData.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -19191,7 +19560,7 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("categories")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -19209,7 +19578,7 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
       textAlign: "center"
     }
   }, t("total_solve_time")))), React__default.createElement("tbody", null, renderTableBody(formattedData))), !isMyStoryStudent && renderCategories(formattedData))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -19282,39 +19651,39 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
           borderBottom: index < (data === null || data === void 0 ? void 0 : data.length) - 1 ? "1px solid #e4e7ec" : undefined
         }
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$5["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, React__default.createElement(material.Typography, {
-        color: styles$4.gray_900,
+        color: styles$5.gray_900,
         fontSize: "13px",
         fontWeight: 600
       }, t("problem") + " " + (item.questionOrder + 1))), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.dark,
+          color: styles$5.dark,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.overallCorrectRate.toFixed(2) ? item.overallCorrectRate.toFixed(2) + "%" : ""), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
-          color: styles$4.red_900,
+          color: styles$5.red_900,
           fontSize: "13px",
           fontWeight: 500
         }
       }, typeof item.selectedAnswers === "string" ? renderAnswer(item.questionAnswerType, item.selectedAnswers) : renderTextbookAnswer(item.questionAnswerType, item.selectedAnswers, item.textualAnswers)), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700
+          color: styles$5.gray_700
         }
       }, typeof item.correctAnswers === "string" ? renderAnswer(item.questionAnswerType, item.correctAnswers) : renderTextbookAnswer(item.questionAnswerType, item.correctAnswers, item.correctTextualAnswers, true)), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700
+          color: styles$5.gray_700
         }
       }, item.categories ? item.categories.map(function (i) {
         return i.name;
@@ -19326,31 +19695,31 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
       return React__default.createElement(material.Grid, {
         container: true,
         flexWrap: "nowrap",
-        className: styles$4["content"] + " " + printStyles["avoid-break-inside"],
+        className: styles$5["content"] + " " + printStyles["avoid-break-inside"],
         key: question.id
       }, React__default.createElement(material.Grid, {
         item: true,
         xs: 1.5,
         minWidth: "120px",
-        className: styles$4["contentColumn1"]
+        className: styles$5["contentColumn1"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("problem_number")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("number_question", {
         number: question.questionOrder + 1
       })))), React__default.createElement(material.Grid, {
         item: true,
         xs: 10.5,
-        className: styles$4["contentColumn2"]
+        className: styles$5["contentColumn2"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("total_correct_rate")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("my_wrong_answer"))), React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["overallCorrectRate"]
+        className: styles$5["overallCorrectRate"]
       }, question.overallCorrectRate.toFixed(2), "%"), React__default.createElement("span", {
-        className: styles$4["answer"]
+        className: styles$5["answer"]
       }, typeof question.selectedAnswers === "string" ? renderAnswer(question.questionAnswerType, question.selectedAnswers) : renderTextbookAnswer(question.questionAnswerType, question.selectedAnswers, question.textualAnswers), " ", t("answer"), " ", typeof question.correctAnswers === "string" ? renderAnswer(question.questionAnswerType, question.correctAnswers) : renderTextbookAnswer(question.questionAnswerType, question.correctAnswers, question.correctTextualAnswers, true)))));
     });
   };
@@ -19358,9 +19727,9 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
     changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: handleToggle
   }, React__default.createElement(material.Stack, {
     flexDirection: "row",
@@ -19374,20 +19743,20 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
     }
   }, t("issues_vulnerable")), React__default.createElement(material.Typography, {
     sx: {
-      color: styles$4.gray_300,
+      color: styles$5.gray_300,
       fontSize: "11px",
       fontWeight: 500
     }
   }, t("vulnerable_detail"))), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, incorrectQuestions !== null && incorrectQuestions !== void 0 && incorrectQuestions.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -19399,7 +19768,7 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -19417,7 +19786,7 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
       textAlign: "center"
     }
   }, t("_category")))), React__default.createElement("tbody", null, renderTableBody(incorrectQuestions))), !isMyStoryStudent && renderQuestions(incorrectQuestions))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -19437,37 +19806,37 @@ var TextbookTrickyProblem = function TextbookTrickyProblem(_ref) {
   });
   var renderProblems = function renderProblems() {
     return React__default.createElement(React.Fragment, null, React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
     }, React__default.createElement(iconX, null), React__default.createElement("span", null, t("incorrect_problem_among_the_starred_problems"))), React__default.createElement("div", {
-      className: styles$4["wrongQuestions"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["wrongQuestions"] + " " + printStyles["avoid-break-inside"]
     }, !!(inCorrectQuestions !== null && inCorrectQuestions !== void 0 && inCorrectQuestions.length) && (inCorrectQuestions === null || inCorrectQuestions === void 0 ? void 0 : inCorrectQuestions.map(function (question) {
       return React__default.createElement("span", {
         key: question.id,
-        className: styles$4["question"]
+        className: styles$5["question"]
       }, t("number_question", {
         number: question.questionOrder + 1
       }));
     })), !(data !== null && data !== void 0 && data.studentQuestionResults.length) && React__default.createElement("div", {
-      className: styles$4["noData"]
+      className: styles$5["noData"]
     }, t("no_data"))), React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
     }, React__default.createElement(iconAssignedQuestions, null), React__default.createElement("span", null, t("correct_problem_among_the_starred_problems"))), React__default.createElement("div", {
-      className: styles$4["assignedQuestions"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["assignedQuestions"] + " " + printStyles["avoid-break-inside"]
     }, !!(correctQuestions !== null && correctQuestions !== void 0 && correctQuestions.length) && (correctQuestions === null || correctQuestions === void 0 ? void 0 : correctQuestions.map(function (question) {
       return React__default.createElement("div", {
         key: question.id,
-        className: styles$4["question"]
+        className: styles$5["question"]
       }, t("number_question", {
         number: question.questionOrder + 1
       }));
     })), !(data !== null && data !== void 0 && data.studentQuestionResults.length) && React__default.createElement("div", {
-      className: styles$4["noData"]
+      className: styles$5["noData"]
     }, t("no_data"))));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
@@ -19479,10 +19848,10 @@ var TextbookTrickyProblem = function TextbookTrickyProblem(_ref) {
     }
   }, t("tricky_problems")), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, renderProblems()));
 };
 
@@ -19904,7 +20273,8 @@ var useExamResultData = function useExamResultData(props) {
     handleChangeTab = props.handleChangeTab,
     selectedTab = props.selectedTab,
     isPrint = props.isPrint,
-    chapterId = props.chapterId;
+    chapterId = props.chapterId,
+    onLoadingChange = props.onLoadingChange;
   var query = new URLSearchParams(searchParams);
   var user = reactRedux.useSelector(function (state) {
     var _state$common;
@@ -19961,9 +20331,11 @@ var useExamResultData = function useExamResultData(props) {
     try {
       var _temp2 = function _temp2() {
         setIsLoading(false);
+        onLoadingChange === null || onLoadingChange === void 0 ? void 0 : onLoadingChange(false);
       };
       if (!examCode) return Promise.resolve();
       setIsLoading(true);
+      onLoadingChange === null || onLoadingChange === void 0 ? void 0 : onLoadingChange(true);
       var _temp = _catch(function () {
         return Promise.resolve(Promise.all([getResults(examCode), getResultsLongTimeSpend(examCode), getResultsEffectSize(examCode), getResultsTimeOrderQuestion(examCode), getResultsCategories(examCode)])).then(function (result) {
           var _result$0$data, _result$1$data, _result$2$data, _result$3$data, _result$4$data;
@@ -19989,9 +20361,11 @@ var useExamResultData = function useExamResultData(props) {
     try {
       var _temp5 = function _temp5() {
         setIsLoading(false);
+        onLoadingChange === null || onLoadingChange === void 0 ? void 0 : onLoadingChange(false);
       };
       if (!examSessionId || !studentId) return Promise.resolve();
       setIsLoading(true);
+      onLoadingChange === null || onLoadingChange === void 0 ? void 0 : onLoadingChange(true);
       var _temp4 = _catch(function () {
         return Promise.resolve(Promise.all([getResultsTeacher(examSessionId, studentId), getResultsLongTimeSpendTeacher(examSessionId, studentId), getResultsEffectSizeTeacher(examSessionId, studentId), getResultsTimeOrderQuestionTeacher(examSessionId, studentId), getResultsCategoriesTeacher(examSessionId, studentId)])).then(function (result) {
           var _result$0$data2, _result$1$data2, _result$2$data2, _result$3$data2, _result$4$data2;
@@ -20031,10 +20405,12 @@ var useExamResultData = function useExamResultData(props) {
     try {
       var _temp7 = function _temp7() {
         setIsLoading(false);
+        onLoadingChange === null || onLoadingChange === void 0 ? void 0 : onLoadingChange(false);
       };
       if (!chapterId) return Promise.resolve();
       if (!isStudent && !studentId) return Promise.resolve();
       setIsLoading(true);
+      onLoadingChange === null || onLoadingChange === void 0 ? void 0 : onLoadingChange(true);
       var _temp6 = _catch(function () {
         return Promise.resolve(Promise.all([getChapterResultsApi(chapterId, isStudent ? undefined : studentId), getChapterResultsLongTimeSpendApi(chapterId, isStudent ? undefined : studentId), getChapterResultsEffectSizeApi(chapterId, isStudent ? undefined : studentId), getChapterResultsTimeOrderQuestionApi(chapterId, isStudent ? undefined : studentId), getChapterResultsCategoriesApi(chapterId, isStudent ? undefined : studentId)])).then(function (result) {
           var _result$0$data3, _result$1$data3, _result$2$data3, _result$3$data3, _result$4$data3;
@@ -20200,7 +20576,7 @@ var useExamResultData = function useExamResultData(props) {
           }
         }
       }),
-      colors: [styles$4.dark, styles$4.purple_900],
+      colors: [styles$5.dark, styles$5.purple_900],
       xaxis: _extends({}, DEFAULT_LINE_CHART_OPTIONS.xaxis, {
         categories: ["s"].concat(Array.from({
           length: questionLength
@@ -20660,7 +21036,8 @@ var useExamResult = function useExamResult(props) {
     studentId = _props$studentId === void 0 ? 0 : _props$studentId,
     code = props.code,
     chapterId = props.chapterId,
-    onViewQA = props.onViewQA;
+    onViewQA = props.onViewQA,
+    onLoadingChange = props.onLoadingChange;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useTab = useTab(),
@@ -20674,7 +21051,8 @@ var useExamResult = function useExamResult(props) {
     code: code,
     chapterId: chapterId,
     handleChangeTab: handleChangeTab,
-    selectedTab: selected
+    selectedTab: selected,
+    onLoadingChange: onLoadingChange
   });
   var isLoading = examResultData.isLoading,
     timelyOrderQuestions = examResultData.timelyOrderQuestions,
@@ -20741,7 +21119,9 @@ var ExamResultV2 = function ExamResultV2(props) {
     isMyStoryStudent = props.isMyStoryStudent,
     onViewQA = props.onViewQA,
     chapterId = props.chapterId,
-    studentId = props.studentId;
+    studentId = props.studentId,
+    _props$showLoading = props.showLoading,
+    showLoading = _props$showLoading === void 0 ? true : _props$showLoading;
   var isAdminSite = role === exports.Role.Admin;
   var _useExamResult = useExamResult(props),
     t = _useExamResult.t,
@@ -20894,7 +21274,7 @@ var ExamResultV2 = function ExamResultV2(props) {
     onViewQA === null || onViewQA === void 0 ? void 0 : onViewQA(resultData.student.id, resultData.examSessionId);
   };
   return React__default.createElement(React.Fragment, null, React__default.createElement(LoadingComponent, {
-    isLoading: !!isLoading
+    isLoading: showLoading && !!isLoading
   }), timelyOrderQuestions[dataChartIndex] && longTimeSpend && effectSize ? React__default.createElement("div", {
     style: {
       width: "100%"
@@ -21207,18 +21587,18 @@ var ExamResultV2 = function ExamResultV2(props) {
     value: selected,
     index: 1
   }, React__default.createElement("div", {
-    className: styles$4["compareChart"]
+    className: styles$5["compareChart"]
   }, React__default.createElement("div", {
-    className: styles$4["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
+    className: styles$5["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
     onClick: handlePrevChart
   }, React__default.createElement(iconBtnPrevChart, null)), React__default.createElement("div", {
-    className: styles$4["chart"] + " sr-line-chart"
+    className: styles$5["chart"] + " sr-line-chart"
   }, React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
     height: 389,
     options: chartOptions,
     series: series
   }))), React__default.createElement("div", {
-    className: styles$4["nextChart"] + " " + (dataChartIndex < timelyOrderQuestions.length - 1 && "pointer"),
+    className: styles$5["nextChart"] + " " + (dataChartIndex < timelyOrderQuestions.length - 1 && "pointer"),
     onClick: handleNextChart
   }, React__default.createElement(iconBtnNextChart, null)))), React__default.createElement(CustomTabPanel, {
     value: selected,
@@ -21412,13 +21792,13 @@ var LoadingDots = function LoadingDots(_ref) {
     color: "#FFF",
     fontSize: 20
   }, text), React__default.createElement("div", {
-    className: styles$4["loader"]
+    className: styles$5["loader"]
   }, React__default.createElement("div", {
-    className: styles$4["dot"]
+    className: styles$5["dot"]
   }), React__default.createElement("div", {
-    className: styles$4["dot"]
+    className: styles$5["dot"]
   }), React__default.createElement("div", {
-    className: styles$4["dot"]
+    className: styles$5["dot"]
   })));
 };
 
@@ -22260,7 +22640,7 @@ var usePreparedExam = function usePreparedExam(_ref) {
   };
 };
 
-var styles$5 = {"drawer":"_1k4kj","open":"_IB2-g","drawer-overlay":"_xnHGE","drawer-header":"_1gLOh","drawer-form":"_2pLGg","dropdown-content-academy":"_1rR7s","dropdown-change":"_1Hcs4","btn-register":"_37IIN","btn-cancel":"_KDkNh","dropdown-academy-item":"_1-srV","dropdown-content-language":"_88rAE","dropdown-item-language":"_2jjUW","dropdown-item-language-active":"_27lik","item-address":"_tGib4","item-logout":"_1MXIb","title-address":"_A_I15","image-academy":"_3zxbi","slick-dots":"_VlpW7","slick-active":"_1zzu9","slider-container":"_1lCoM","button":"__sLSD","variable-width":"_1AnqW","slick-slide":"_3ZJaN","center":"_jUOZF","slick-center":"_35s6t","content":"_1dQdx","image":"_1feWs","slick-loading":"_FchLZ","slick-slider":"_1T7zW","slick-thumb":"_o2Tkt","slides":"_1FY2k","slick-next":"_23Pi9","slick-prev":"_2g2iD","heroBanner_qdFl":"_2y7lQ","buttons_AeoN":"_KMW2P","mdxPageWrapper_j9I6":"_3dqhE","collapseSidebarButton_PEFL":"_24wBH","expandButton_TmdG":"_2LXBj","announcementBarClose_gvF7":"_32uEE","announcementBarPlaceholder_vyr4":"_2PagL","navbarSearchContainer_Bca1":"_3Uiqm","lastUpdated_vwxv":"_1UNOJ","tocMobile_ITEo":"_qcGlb","collapseSidebarButtonIcon_kv0_":"_2G6Hz","expandButtonIcon_i1dp":"_1IMu8","menuHtmlItem_M9Kj":"_1YUka","menu_SIkG":"_FgMDa","menuWithAnnouncementBar_GW3s":"_zUamI","sidebar_njMd":"_3E4Oo","sidebarWithHideableNavbar_wUlq":"_3xviA","sidebarHidden_VK0M":"_cWHWX","sidebarLogo_isFc":"_UMHGX","docSidebarContainer_YfHR":"_1SwXt","docSidebarContainerHidden_DPk8":"_3h6KW","sidebarViewport_aRkj":"_2OCK_","docMainContainer_TBSr":"_FuxZS","docMainContainerEnhanced_lQrH":"_ZUdP4","docItemWrapperEnhanced_JWYK":"_2AmPG","docItemCol_VOVn":"_3GmBr","container":"_1UB4R","col":"_csNus","footer":"_gceZJ","colorModeToggle_DEke":"_OawS_","footer__link-separator":"_3fzLh","navbar__item":"_1wyV6","tableOfContents_bqdL":"_3tGM4","footer__col":"_3DllA","footer__link-item":"_2ibTz","hero":"_369-d","navbar":"_5LWZt","container-fluid":"_2GcNI","navbar__toggle":"_2YjZl","navbar__search-input":"_3__u0","pills--block":"_2f7GT","tabs--block":"_3xrdo","docItemContainer_F8PC":"_6P_Dr","markdown":"_2xZt0","backToTopButton_sjWU":"_2bUwo","thin-scrollbar":"_1mrmJ","announcementBar_mb4j":"_2oveE","menu":"_14IWx","pagination-nav":"_3S8xG","table-of-contents":"_SnjS9","tabs":"_qpa-q","codeBlockLines_e6Vv":"_2ou2J"};
+var styles$6 = {"drawer":"_1k4kj","open":"_IB2-g","drawer-overlay":"_xnHGE","drawer-header":"_1gLOh","drawer-form":"_2pLGg","dropdown-content-academy":"_1rR7s","dropdown-change":"_1Hcs4","btn-register":"_37IIN","btn-cancel":"_KDkNh","dropdown-academy-item":"_1-srV","dropdown-content-language":"_88rAE","dropdown-item-language":"_2jjUW","dropdown-item-language-active":"_27lik","item-address":"_tGib4","item-logout":"_1MXIb","title-address":"_A_I15","image-academy":"_3zxbi","slick-dots":"_VlpW7","slick-active":"_1zzu9","slider-container":"_1lCoM","button":"__sLSD","variable-width":"_1AnqW","slick-slide":"_3ZJaN","center":"_jUOZF","slick-center":"_35s6t","content":"_1dQdx","image":"_1feWs","slick-loading":"_FchLZ","slick-slider":"_1T7zW","slick-thumb":"_o2Tkt","slides":"_1FY2k","slick-next":"_23Pi9","slick-prev":"_2g2iD","heroBanner_qdFl":"_2y7lQ","buttons_AeoN":"_KMW2P","mdxPageWrapper_j9I6":"_3dqhE","collapseSidebarButton_PEFL":"_24wBH","expandButton_TmdG":"_2LXBj","announcementBarClose_gvF7":"_32uEE","announcementBarPlaceholder_vyr4":"_2PagL","navbarSearchContainer_Bca1":"_3Uiqm","lastUpdated_vwxv":"_1UNOJ","tocMobile_ITEo":"_qcGlb","collapseSidebarButtonIcon_kv0_":"_2G6Hz","expandButtonIcon_i1dp":"_1IMu8","menuHtmlItem_M9Kj":"_1YUka","menu_SIkG":"_FgMDa","menuWithAnnouncementBar_GW3s":"_zUamI","sidebar_njMd":"_3E4Oo","sidebarWithHideableNavbar_wUlq":"_3xviA","sidebarHidden_VK0M":"_cWHWX","sidebarLogo_isFc":"_UMHGX","docSidebarContainer_YfHR":"_1SwXt","docSidebarContainerHidden_DPk8":"_3h6KW","sidebarViewport_aRkj":"_2OCK_","docMainContainer_TBSr":"_FuxZS","docMainContainerEnhanced_lQrH":"_ZUdP4","docItemWrapperEnhanced_JWYK":"_2AmPG","docItemCol_VOVn":"_3GmBr","container":"_1UB4R","col":"_csNus","footer":"_gceZJ","colorModeToggle_DEke":"_OawS_","footer__link-separator":"_3fzLh","navbar__item":"_1wyV6","tableOfContents_bqdL":"_3tGM4","footer__col":"_3DllA","footer__link-item":"_2ibTz","hero":"_369-d","navbar":"_5LWZt","container-fluid":"_2GcNI","navbar__toggle":"_2YjZl","navbar__search-input":"_3__u0","pills--block":"_2f7GT","tabs--block":"_3xrdo","docItemContainer_F8PC":"_6P_Dr","markdown":"_2xZt0","backToTopButton_sjWU":"_2bUwo","thin-scrollbar":"_1mrmJ","announcementBar_mb4j":"_2oveE","menu":"_14IWx","pagination-nav":"_3S8xG","table-of-contents":"_SnjS9","tabs":"_qpa-q","codeBlockLines_e6Vv":"_2ou2J"};
 
 var ResetFilterDialog = function ResetFilterDialog(_ref) {
   var t = _ref.t,
@@ -22324,7 +22704,7 @@ var ResetFilterDialog = function ResetFilterDialog(_ref) {
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$5["btn-cancel"],
+    className: styles$6["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -22335,7 +22715,7 @@ var ResetFilterDialog = function ResetFilterDialog(_ref) {
     lineHeight: "16.71px"
   }, t("close"))), React__default.createElement(material.Button, {
     variant: "contained",
-    className: styles$5["btn-register"],
+    className: styles$6["btn-register"],
     type: "submit",
     sx: {
       padding: "12px 47px"
@@ -22754,7 +23134,7 @@ var ChapterProblemSolvingResultsDialog = function ChapterProblemSolvingResultsDi
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$5["btn-cancel"],
+    className: styles$6["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -22845,7 +23225,7 @@ var StartPageDialog = function StartPageDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React__default.createElement(material.Button, {
-      className: styles$5["btn-cancel"],
+      className: styles$6["btn-cancel"],
       onClick: onClose
     }, React__default.createElement(material.Typography, {
       sx: {
@@ -22856,7 +23236,7 @@ var StartPageDialog = function StartPageDialog(_ref) {
       lineHeight: "16.71px"
     }, t("cancel"))), React__default.createElement(material.Button, {
       variant: "contained",
-      className: styles$5["btn-register"],
+      className: styles$6["btn-register"],
       type: "submit",
       sx: {
         padding: "12px 47px"
@@ -23433,7 +23813,7 @@ var DeleteTextbookDialog = function DeleteTextbookDialog(_ref) {
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$5["btn-cancel"],
+    className: styles$6["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -23444,7 +23824,7 @@ var DeleteTextbookDialog = function DeleteTextbookDialog(_ref) {
     lineHeight: "16.71px"
   }, t("cancel"))), React__default.createElement(material.Button, {
     variant: "contained",
-    className: styles$5["btn-register"],
+    className: styles$6["btn-register"],
     type: "submit",
     sx: {
       padding: "12px 47px"
@@ -23556,13 +23936,13 @@ var TextbookInfoDrawer = function TextbookInfoDrawer(_ref) {
   var theme = material.useTheme();
   var isTabletUp = material.useMediaQuery(theme.breakpoints.up("lg"));
   return React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$5["drawer-overlay"] + " " + (isOpen && styles$5["open"]),
+    className: styles$6["drawer-overlay"] + " " + (isOpen && styles$6["open"]),
     onClick: function onClick() {
       return onClose();
     }
   }), React__default.createElement(material.Stack, {
     width: isTabletUp ? "50vw" : "100%",
-    className: styles$5["drawer"] + " bg-white " + (isOpen && styles$5["open"])
+    className: styles$6["drawer"] + " bg-white " + (isOpen && styles$6["open"])
   }, React__default.createElement(material.Stack, {
     bgcolor: styles.gray_50,
     borderBottom: "1px solid " + styles.gray_100,
@@ -24532,188 +24912,6 @@ var AlertCircleFill = function AlertCircleFill(_ref) {
   }));
 };
 
-var CalendarFill = function CalendarFill(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "16" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "16" : _ref$height,
-    color = _ref.color;
-  return React__default.createElement("svg", {
-    width: width,
-    height: height,
-    fill: color,
-    viewBox: "0 0 16 16",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M15 3.99998C15 3.46955 14.7893 2.96084 14.4142 2.58577C14.0391 2.2107 13.5304 1.99998 13 1.99998H12.5V1.51405C12.5 1.24498 12.2931 1.01405 12.0241 1.00061C11.9565 0.997353 11.8889 1.00785 11.8255 1.03148C11.762 1.05511 11.7041 1.09136 11.6551 1.13805C11.6061 1.18475 11.5671 1.2409 11.5404 1.30311C11.5138 1.36532 11.5 1.4323 11.5 1.49998V1.99998H4.5V1.51405C4.5 1.24498 4.29313 1.01405 4.02406 1.00061C3.95646 0.997353 3.8889 1.00785 3.82547 1.03148C3.76204 1.05511 3.70407 1.09136 3.65508 1.13805C3.60608 1.18475 3.56707 1.2409 3.54041 1.30311C3.51375 1.36532 3.50001 1.4323 3.5 1.49998V1.99998H3C2.46957 1.99998 1.96086 2.2107 1.58579 2.58577C1.21071 2.96084 1 3.46955 1 3.99998V4.37498C1 4.40814 1.01317 4.43993 1.03661 4.46337C1.06005 4.48682 1.09185 4.49998 1.125 4.49998H14.875C14.9082 4.49998 14.9399 4.48682 14.9634 4.46337C14.9868 4.43993 15 4.40814 15 4.37498V3.99998Z",
-    fill: "#97A1AF"
-  }), React__default.createElement("path", {
-    d: "M1 13C1 13.5304 1.21071 14.0391 1.58579 14.4142C1.96086 14.7893 2.46957 15 3 15H13C13.5304 15 14.0391 14.7893 14.4142 14.4142C14.7893 14.0391 15 13.5304 15 13V5.625C15 5.59185 14.9868 5.56005 14.9634 5.53661C14.9399 5.51317 14.9082 5.5 14.875 5.5H1.125C1.09185 5.5 1.06005 5.51317 1.03661 5.53661C1.01317 5.56005 1 5.59185 1 5.625V13Z",
-    fill: "#97A1AF"
-  }));
-};
-
-var ClockFill = function ClockFill(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "16" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "16" : _ref$height,
-    color = _ref.color;
-  return React__default.createElement("svg", {
-    width: width,
-    height: height,
-    fill: color,
-    viewBox: "0 0 14 14",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M7 0.25C3.41031 0.25 0.5 3.16031 0.5 6.75C0.5 10.3397 3.41031 13.25 7 13.25C10.5897 13.25 13.5 10.3397 13.5 6.75C13.5 3.16031 10.5897 0.25 7 0.25ZM10 7.75H7C6.86739 7.75 6.74021 7.69732 6.64645 7.60355C6.55268 7.50979 6.5 7.38261 6.5 7.25V2.75C6.5 2.61739 6.55268 2.49021 6.64645 2.39645C6.74021 2.30268 6.86739 2.25 7 2.25C7.13261 2.25 7.25979 2.30268 7.35355 2.39645C7.44732 2.49021 7.5 2.61739 7.5 2.75V6.75H10C10.1326 6.75 10.2598 6.80268 10.3536 6.89645C10.4473 6.99021 10.5 7.11739 10.5 7.25C10.5 7.38261 10.4473 7.50979 10.3536 7.60355C10.2598 7.69732 10.1326 7.75 10 7.75Z",
-    fill: "#97A1AF"
-  }));
-};
-
-var CheckedCircleFill = function CheckedCircleFill(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "16" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "17" : _ref$height,
-    color = _ref.color;
-  return React__default.createElement("svg", {
-    width: width,
-    height: height,
-    fill: color,
-    viewBox: "0 0 16 17",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M8 1.75C4.41594 1.75 1.5 4.66594 1.5 8.25C1.5 11.8341 4.41594 14.75 8 14.75C11.5841 14.75 14.5 11.8341 14.5 8.25C14.5 4.66594 11.5841 1.75 8 1.75ZM11.3828 6.07156L7.18281 11.0716C7.13674 11.1264 7.07941 11.1708 7.01471 11.2016C6.95001 11.2323 6.87945 11.2489 6.80781 11.25H6.79938C6.72929 11.25 6.66 11.2352 6.59599 11.2067C6.53198 11.1782 6.47468 11.1365 6.42781 11.0844L4.62781 9.08438C4.5821 9.03589 4.54654 8.97876 4.52322 8.91633C4.4999 8.85391 4.4893 8.78745 4.49203 8.72087C4.49477 8.65429 4.51078 8.58892 4.53914 8.52862C4.56749 8.46831 4.60761 8.41429 4.65715 8.36971C4.70668 8.32514 4.76463 8.29091 4.82757 8.26905C4.89052 8.24719 4.95721 8.23813 5.02371 8.2424C5.09021 8.24668 5.15518 8.26421 5.21481 8.29396C5.27444 8.3237 5.32752 8.36507 5.37094 8.41562L6.78625 9.98812L10.6172 5.42844C10.7031 5.32909 10.8247 5.26754 10.9556 5.25711C11.0866 5.24668 11.2164 5.28819 11.317 5.37268C11.4175 5.45717 11.4808 5.57784 11.4931 5.70862C11.5055 5.8394 11.4658 5.96977 11.3828 6.07156Z",
-    fill: "#97A1AF"
-  }));
-};
-
-var IconPerson = function IconPerson(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "16" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "16" : _ref$height,
-    color = _ref.color;
-  return React__default.createElement("svg", {
-    width: width,
-    height: height,
-    fill: color,
-    viewBox: "0 0 16 16",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M10.395 2.01813C9.78691 1.36156 8.93753 1 8.00003 1C7.05753 1 6.20534 1.35937 5.60003 2.01187C4.98815 2.67156 4.69003 3.56813 4.76003 4.53625C4.89878 6.44625 6.35222 8 8.00003 8C9.64784 8 11.0988 6.44656 11.2397 4.53687C11.3107 3.5775 11.0107 2.68281 10.395 2.01813Z",
-    fill: "#97A1AF"
-  }), React__default.createElement("path", {
-    d: "M13.4999 15H2.49993C2.35595 15.0019 2.21337 14.9716 2.08255 14.9115C1.95173 14.8513 1.83597 14.7627 1.74368 14.6522C1.54056 14.4094 1.45868 14.0778 1.51931 13.7425C1.78306 12.2794 2.60618 11.0503 3.89993 10.1875C5.04931 9.42156 6.50525 9 7.99993 9C9.49462 9 10.9506 9.42188 12.0999 10.1875C13.3937 11.05 14.2168 12.2791 14.4806 13.7422C14.5412 14.0775 14.4593 14.4091 14.2562 14.6519C14.1639 14.7625 14.0482 14.8511 13.9174 14.9113C13.7865 14.9715 13.6439 15.0018 13.4999 15Z",
-    fill: "#97A1AF"
-  }));
-};
-
-var LessonTooltip = function LessonTooltip(_ref) {
-  var lesson = _ref.lesson,
-    lessonAttendance = _ref.lessonAttendance;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return React__default.createElement(material.Stack, {
-    padding: "16px"
-  }, React__default.createElement(material.Stack, {
-    gap: "20px"
-  }, React__default.createElement(material.Typography, {
-    sx: {
-      color: grey[700]
-    }
-  }, lesson.courseName), React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    gap: "20px"
-  }, React__default.createElement(material.Box, {
-    display: "flex",
-    flexDirection: "row",
-    gap: "4px"
-  }, React__default.createElement(CalendarFill, null), React__default.createElement(material.Typography, {
-    sx: {
-      color: grey[500],
-      fontSize: "13px",
-      fontWeight: "600",
-      whiteSpace: "nowrap"
-    }
-  }, t("class_date"))), React__default.createElement(material.Typography, {
-    sx: {
-      color: grey[700],
-      fontSize: "14px",
-      fontWeight: "600"
-    }
-  }, t("" + moment(lesson === null || lesson === void 0 ? void 0 : lesson.date).format(t("date_format"))))), React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    gap: "20px"
-  }, React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "row",
-    gap: "4px"
-  }, React__default.createElement(ClockFill, null), React__default.createElement(material.Typography, {
-    sx: {
-      color: grey[500],
-      fontSize: "13px",
-      fontWeight: "600",
-      whiteSpace: "nowrap"
-    }
-  }, t("class_time"))), React__default.createElement(material.Typography, {
-    sx: {
-      color: grey[700],
-      fontSize: "14px",
-      fontWeight: "600"
-    }
-  }, formatTimeHHmm(lesson === null || lesson === void 0 ? void 0 : lesson.startTime) + " : " + formatTimeHHmm(lesson === null || lesson === void 0 ? void 0 : lesson.endTime) + " (" + subtractTime(lesson === null || lesson === void 0 ? void 0 : lesson.endTime, lesson === null || lesson === void 0 ? void 0 : lesson.startTime, t) + ")")), React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    gap: "20px"
-  }, React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "row",
-    gap: "4px"
-  }, React__default.createElement(CheckedCircleFill, null), React__default.createElement(material.Typography, {
-    sx: {
-      color: grey[500],
-      fontSize: "13px",
-      fontWeight: "600",
-      whiteSpace: "nowrap"
-    }
-  }, t("attendance"))), React__default.createElement(material.Typography, {
-    sx: {
-      color: grey[700],
-      fontSize: "14px",
-      fontWeight: "600"
-    }
-  }, (lessonAttendance === null || lessonAttendance === void 0 ? void 0 : lessonAttendance.status) === StudentAttendanceStatus.Late ? t("late") : (lessonAttendance === null || lessonAttendance === void 0 ? void 0 : lessonAttendance.status) === StudentAttendanceStatus.Attended ? t("attendance") : t("none_attendance"))), React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    gap: "20px"
-  }, React__default.createElement(material.Stack, {
-    display: "flex",
-    flexDirection: "row",
-    gap: "4px"
-  }, React__default.createElement(IconPerson, null), React__default.createElement(material.Typography, {
-    sx: {
-      color: grey[500],
-      fontSize: "13px",
-      fontWeight: "600",
-      whiteSpace: "nowrap"
-    }
-  }, t("teacher_in_charge"))), React__default.createElement(material.Typography, {
-    sx: {
-      color: grey[700],
-      fontSize: "14px",
-      fontWeight: "600"
-    }
-  }, lesson === null || lesson === void 0 ? void 0 : lesson.mainTeacherName))));
-};
-
 var AttendanceCourseTable = function AttendanceCourseTable(_ref) {
   var data = _ref.data,
     containerProps = _ref.containerProps,
@@ -24722,23 +24920,17 @@ var AttendanceCourseTable = function AttendanceCourseTable(_ref) {
     mainTeacherName = _ref.mainTeacherName,
     courseName = _ref.courseName,
     courseId = _ref.courseId,
-    studentId = _ref.studentId,
     onCheckInLesson = _ref.onCheckInLesson;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var isAdmin = reactRedux.useSelector(function (state) {
-    var _state$common, _state$common$user, _state$common$user$ro;
-    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : (_state$common$user$ro = _state$common$user.roles) === null || _state$common$user$ro === void 0 ? void 0 : _state$common$user$ro.includes(exports.Role.Admin);
-  });
   var language = reactRedux.useSelector(function (state) {
-    var _state$common2;
-    return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : _state$common2.language;
+    var _state$common;
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.language;
   });
   var dataString = JSON.stringify(data);
   var containerRef = React.useRef(null);
-  var handleCheckInLesson = function handleCheckInLesson(lesson, studentId) {
-    if (isAdmin) return;
-    onCheckInLesson(lesson, studentId);
+  var handleCheckInLesson = function handleCheckInLesson(lesson, attendance) {
+    onCheckInLesson(lesson, attendance);
   };
   var renderItem = function renderItem(rowIndex, columnIndex, _) {
     if (rowIndex === 0) return React__default.createElement(material.Box, {
@@ -24782,9 +24974,8 @@ var AttendanceCourseTable = function AttendanceCourseTable(_ref) {
     }, React__default.createElement(material.IconButton, {
       size: "small",
       className: "d-flex align-items-center ",
-      disabled: isAdmin,
       onClick: function onClick() {
-        return handleCheckInLesson(lesson, studentId);
+        return handleCheckInLesson(lesson, attendance);
       },
       sx: {
         width: "26px",
@@ -24834,8 +25025,7 @@ var AttendanceCourseTable = function AttendanceCourseTable(_ref) {
 };
 
 var CourseAttendanceItem = function CourseAttendanceItem(_ref) {
-  var studentId = _ref.studentId,
-    data = _ref.data,
+  var data = _ref.data,
     onCheckInLesson = _ref.onCheckInLesson,
     onLoad = _ref.onLoad;
   var _useTranslation = reactI18next.useTranslation(),
@@ -24920,7 +25110,6 @@ var CourseAttendanceItem = function CourseAttendanceItem(_ref) {
     data: data.lessons,
     courseId: data.id,
     courseName: data.name,
-    studentId: studentId,
     mainTeacherName: data.mainTeacherName,
     onCheckInLesson: onCheckInLesson,
     listWidth: 0,
@@ -24940,8 +25129,7 @@ var CourseAttendanceItem = function CourseAttendanceItem(_ref) {
 };
 
 var CourseAttendanceList = function CourseAttendanceList(_ref) {
-  var studentId = _ref.studentId,
-    data = _ref.data,
+  var data = _ref.data,
     isLoading = _ref.isLoading,
     listHeight = _ref.listHeight,
     containerProps = _ref.containerProps,
@@ -24950,7 +25138,6 @@ var CourseAttendanceList = function CourseAttendanceList(_ref) {
   var renderItem = function renderItem(item, _, measure) {
     return React__default.createElement(CourseAttendanceItem, {
       key: item.id,
-      studentId: studentId,
       data: item,
       onCheckInLesson: onCheckInLesson,
       onLoad: measure
@@ -24973,13 +25160,11 @@ var getAttendanceByStudentIdApi = function getAttendanceByStudentIdApi(studentId
     params: query
   });
 };
-var getCheckInLessonsApi = function getCheckInLessonsApi(lessonId, studentId) {
-  return api.post(LESSON_URL + "/" + lessonId + "/teacher", {
-    studentId: studentId
-  });
+var getCheckInLessonsApi = function getCheckInLessonsApi(lessonId, attendanceRequest) {
+  return api.post(LESSON_URL + "/" + lessonId + "/teacher", attendanceRequest);
 };
 
-var useDrawerAttendanceTab = function useDrawerAttendanceTab(studentId) {
+var useDrawerAttendanceTab = function useDrawerAttendanceTab(studentId, onUpdatedAttendance) {
   var dispatch = reactRedux.useDispatch();
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -25006,15 +25191,46 @@ var useDrawerAttendanceTab = function useDrawerAttendanceTab(studentId) {
     isLoading = _useVirtualList.isLoading,
     handleLoadMore = _useVirtualList.handleLoadMore,
     setItems = _useVirtualList.setItems;
-  var handleCheckInLesson = function handleCheckInLesson(lesson, studentId) {
+  var _useState = React.useState(),
+    openAttendanceDalog = _useState[0],
+    setOpenAttendanceDialog = _useState[1];
+  var handleOpenAttendanceDialog = function handleOpenAttendanceDialog(lesson, attendance) {
+    setOpenAttendanceDialog({
+      lesson: lesson,
+      attendance: attendance
+    });
+  };
+  var handleCloseAttendanceDialog = function handleCloseAttendanceDialog() {
+    setOpenAttendanceDialog(undefined);
+  };
+  var handleCheckInLesson = function handleCheckInLesson(lesson, attendance) {
+    if (!!attendance && attendance.status !== StudentAttendanceStatus.Absent) handleUpdateStudentAttendance(lesson, {
+      studentId: studentId,
+      attendanceTime: attendance.attendanceTime,
+      status: attendance.status === StudentAttendanceStatus.Attended ? StudentAttendanceStatus.Late : StudentAttendanceStatus.Absent
+    });else handleOpenAttendanceDialog(lesson, attendance);
+  };
+  var handleUpdateStudentAttendance = function handleUpdateStudentAttendance(lesson, attendanceRequest) {
     try {
       var _temp2 = function _temp2() {
         dispatch(setLoading(false));
       };
       dispatch(setLoading(true));
       var _temp = _catch(function () {
-        return Promise.resolve(getCheckInLessonsApi(lesson.id, studentId)).then(function () {
+        return Promise.resolve(getCheckInLessonsApi(lesson.id, attendanceRequest)).then(function () {
+          var attendance = {
+            lessonId: lesson.id,
+            attendanceTime: attendanceRequest.attendanceTime,
+            status: attendanceRequest.status
+          };
+          onUpdatedAttendance === null || onUpdatedAttendance === void 0 ? void 0 : onUpdatedAttendance(attendance, studentId);
+          updateAttendanceData({
+            lessonId: lesson.id,
+            attendanceTime: attendanceRequest.attendanceTime,
+            status: attendanceRequest.status
+          }, lesson.courseId);
           reactToastify.toast.success(t("update_attendance_status_successfully"));
+          handleCloseAttendanceDialog();
         });
       }, function (error) {
         reactToastify.toast.error(getErrorMessage(t, error));
@@ -25030,12 +25246,15 @@ var useDrawerAttendanceTab = function useDrawerAttendanceTab(studentId) {
     var item = JSON.parse(data);
     var lessonAttendance = {
       lessonId: item === null || item === void 0 ? void 0 : (_item$attendance = item.attendance) === null || _item$attendance === void 0 ? void 0 : _item$attendance.lessonId,
-      attendanceTime: moment.utc(item === null || item === void 0 ? void 0 : (_item$attendance2 = item.attendance) === null || _item$attendance2 === void 0 ? void 0 : _item$attendance2.attendanceTime).local().format(FormatDate),
+      attendanceTime: item === null || item === void 0 ? void 0 : (_item$attendance2 = item.attendance) === null || _item$attendance2 === void 0 ? void 0 : _item$attendance2.attendanceTime,
       status: item === null || item === void 0 ? void 0 : (_item$attendance3 = item.attendance) === null || _item$attendance3 === void 0 ? void 0 : _item$attendance3.status
     };
+    updateAttendanceData(lessonAttendance, item.courseId);
+  };
+  var updateAttendanceData = function updateAttendanceData(lessonAttendance, courseId) {
     setItems(function (prev) {
       var newData = prev.map(function (course) {
-        if (item.courseId !== course.id) return course;
+        if (courseId !== course.id) return course;
         return _extends({}, course, {
           lessons: course.lessons.map(function (lesson) {
             if (lesson.id != lessonAttendance.lessonId) return lesson;
@@ -25067,20 +25286,27 @@ var useDrawerAttendanceTab = function useDrawerAttendanceTab(studentId) {
   return {
     items: items,
     isLoading: isLoading,
+    openAttendanceDalog: openAttendanceDalog,
     handleLoadMore: handleLoadMore,
-    handleCheckInLesson: handleCheckInLesson
+    handleCheckInLesson: handleCheckInLesson,
+    handleCloseAttendanceDialog: handleCloseAttendanceDialog,
+    handleUpdateStudentAttendance: handleUpdateStudentAttendance
   };
 };
 
 var DrawerAttendanceTab = function DrawerAttendanceTab(_ref) {
   var studentId = _ref.studentId,
     selectedTab = _ref.selectedTab,
-    value = _ref.value;
-  var _useDrawerAttendanceT = useDrawerAttendanceTab(studentId),
+    value = _ref.value,
+    onUpdatedAttendance = _ref.onUpdatedAttendance;
+  var _useDrawerAttendanceT = useDrawerAttendanceTab(studentId, onUpdatedAttendance),
     items = _useDrawerAttendanceT.items,
     isLoading = _useDrawerAttendanceT.isLoading,
+    openAttendanceDalog = _useDrawerAttendanceT.openAttendanceDalog,
     handleLoadMore = _useDrawerAttendanceT.handleLoadMore,
-    handleCheckInLesson = _useDrawerAttendanceT.handleCheckInLesson;
+    handleCheckInLesson = _useDrawerAttendanceT.handleCheckInLesson,
+    handleCloseAttendanceDialog = _useDrawerAttendanceT.handleCloseAttendanceDialog,
+    handleUpdateStudentAttendance = _useDrawerAttendanceT.handleUpdateStudentAttendance;
   return React__default.createElement(DrawerTabContent, {
     value: value,
     isSelected: selectedTab === value
@@ -25098,10 +25324,16 @@ var DrawerAttendanceTab = function DrawerAttendanceTab(_ref) {
     data: items,
     onLoadMore: handleLoadMore,
     isLoading: isLoading,
-    studentId: studentId,
     onCheckInLesson: handleCheckInLesson,
     listHeight: 0
-  })));
+  })), React__default.createElement(AttendanceFormDialog, {
+    open: !!openAttendanceDalog,
+    onClose: handleCloseAttendanceDialog,
+    attendance: openAttendanceDalog === null || openAttendanceDalog === void 0 ? void 0 : openAttendanceDalog.attendance,
+    lesson: openAttendanceDalog === null || openAttendanceDalog === void 0 ? void 0 : openAttendanceDalog.lesson,
+    studentId: studentId,
+    onSubmit: handleUpdateStudentAttendance
+  }));
 };
 
 var StudentInfoDrawer = function StudentInfoDrawer(props) {
@@ -25111,7 +25343,8 @@ var StudentInfoDrawer = function StudentInfoDrawer(props) {
     width = props.width,
     history = props.history,
     role = props.role,
-    onViewQA = props.onViewQA;
+    onViewQA = props.onViewQA,
+    onUpdatedAttendance = props.onUpdatedAttendance;
   var _useStudentInfoDrawer = useStudentInfoDrawer(props),
     loadedTabs = _useStudentInfoDrawer.loadedTabs,
     isLoading = _useStudentInfoDrawer.isLoading,
@@ -25142,7 +25375,8 @@ var StudentInfoDrawer = function StudentInfoDrawer(props) {
   }), studentId && React__default.createElement(React.Fragment, null, loadedTabs[DrawerTab.Attendance] && React__default.createElement(DrawerAttendanceTab, {
     value: DrawerTab.Attendance,
     selectedTab: selectedTab,
-    studentId: studentId
+    studentId: studentId,
+    onUpdatedAttendance: onUpdatedAttendance
   }), loadedTabs[DrawerTab.Note] && React__default.createElement(DrawerNoteTab, {
     value: DrawerTab.Note,
     selectedTab: selectedTab,
@@ -27530,7 +27764,7 @@ var RECENT_USER_ACTION_HEADERS = [{
 }];
 var CSV_PREFIX = "data:text/csv;charset=utf-8,";
 
-var styles$6 = {"action-btn":"_1jXbz","action-btn--pencil":"_at4xP","icon-rotate-180":"_12gv9","drop-area":"_R4bn5"};
+var styles$7 = {"action-btn":"_1jXbz","action-btn--pencil":"_at4xP","icon-rotate-180":"_12gv9","drop-area":"_R4bn5"};
 
 var _excluded$c = ["text", "isRequired", "className"];
 var LabelRequired = function LabelRequired(_ref) {
@@ -28655,7 +28889,7 @@ var DeleteUserCsvDialog = function DeleteUserCsvDialog(_ref) {
     size: "xs",
     title: t('delete_users_csv')
   }, React__default.createElement(material.DialogContent, null, React__default.createElement("div", {
-    className: "" + styles$6["drop-area"],
+    className: "" + styles$7["drop-area"],
     onDrop: handleDrop,
     onDragOver: handleDragOver,
     onClick: handleChooseFile
@@ -28784,10 +29018,10 @@ var UserRow = function UserRow(_ref) {
     className: "d-flex"
   }, isAdmin || isSuperAdmin ? React__default.createElement(material.IconButton, {
     color: "default",
-    className: styles$6["action-btn"] + " bg-warning text-white me-2",
+    className: styles$7["action-btn"] + " bg-warning text-white me-2",
     onClick: handleViewOrUpdate
   }, React__default.createElement(hi.HiOutlinePencilAlt, {
-    className: styles$6["action-btn--pencil"],
+    className: styles$7["action-btn--pencil"],
     size: 16
   })) : React__default.createElement(material.IconButton, {
     color: "default",
@@ -28798,7 +29032,7 @@ var UserRow = function UserRow(_ref) {
   })), (isAdmin || isSuperAdmin) && React__default.createElement(material.IconButton, {
     onClick: handleDelete,
     color: "default",
-    className: styles$6["action-btn"] + " bg-danger text-white"
+    className: styles$7["action-btn"] + " bg-danger text-white"
   }, React__default.createElement(fa6.FaTrashCan, {
     size: 12
   })))));
@@ -28884,7 +29118,7 @@ var UserList = function UserList(_ref) {
       bgcolor: theme.palette.primary.main
     },
     startIcon: React__default.createElement(md.MdDownload, {
-      className: "" + styles$6["icon-rotate-180"],
+      className: "" + styles$7["icon-rotate-180"],
       size: 14
     }),
     onClick: handleChooseFile
@@ -28895,7 +29129,7 @@ var UserList = function UserList(_ref) {
       bgcolor: theme.palette.error.main
     },
     startIcon: React__default.createElement(md.MdDownload, {
-      className: "" + styles$6["icon-rotate-180"],
+      className: "" + styles$7["icon-rotate-180"],
       size: 14
     }),
     onClick: handleToggleDeleteUserCsv
@@ -29031,7 +29265,7 @@ var UserList = function UserList(_ref) {
   })));
 };
 
-var styles$7 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
+var styles$8 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
 
 var BpIcon = material.styled("span")(function (_ref) {
   var theme = _ref.theme;
@@ -29104,7 +29338,7 @@ var QuestionView = function QuestionView(_ref2) {
           mb: "16px"
         }, React__default.createElement(material.Stack, null, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
           htmlFor: "textual_answer",
-          className: styles$7["question-label"] + " form-label"
+          className: styles$8["question-label"] + " form-label"
         }, t("textual_answer")), React__default.createElement(material.TextField, {
           sx: {
             "& .MuiInputBase-input": {
@@ -29132,7 +29366,7 @@ var QuestionView = function QuestionView(_ref2) {
         }).map(function (i) {
           return React__default.createElement(material.FormControlLabel, {
             key: i,
-            className: styles$7["question-label"] + " w-fit",
+            className: styles$8["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             onChange: function onChange(e) {
@@ -29163,7 +29397,7 @@ var QuestionView = function QuestionView(_ref2) {
         }).map(function (i) {
           return React__default.createElement(material.FormControlLabel, {
             key: i,
-            className: styles$7["question-label"] + " w-fit",
+            className: styles$8["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             onChange: function onChange(e) {
@@ -29206,7 +29440,7 @@ var QuestionView = function QuestionView(_ref2) {
   }, React__default.createElement(material.Grid, {
     container: true
   }, React__default.createElement("div", {
-    className: styles$7["question-title"] + " me-2 text-nowrap"
+    className: styles$8["question-title"] + " me-2 text-nowrap"
   }, t("problem_number_question", {
     number: question.questionOrder + 1
   }))), React__default.createElement(material.Grid, {
@@ -29219,7 +29453,7 @@ var QuestionView = function QuestionView(_ref2) {
     mb: "16px"
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "title",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("title")), React__default.createElement(material.TextField, {
     fullWidth: true,
     value: question.title,
@@ -29234,7 +29468,7 @@ var QuestionView = function QuestionView(_ref2) {
     mb: "16px"
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "author",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("author")), React__default.createElement(material.TextField, {
     fullWidth: true,
     value: question.author,
@@ -29249,7 +29483,7 @@ var QuestionView = function QuestionView(_ref2) {
     mb: "16px"
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "subject",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("subject")), React__default.createElement(material.TextField, {
     fullWidth: true,
     value: question.subject,
@@ -29268,7 +29502,7 @@ var QuestionView = function QuestionView(_ref2) {
     mb: "16px"
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "type",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("type")), React__default.createElement(CustomSelectOption, {
     isTextbook: true,
     valueById: question.type,
@@ -29282,7 +29516,7 @@ var QuestionView = function QuestionView(_ref2) {
     lg: 3
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "question_answer_type",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("question_answer_type")), React__default.createElement(CustomSelect, {
     isDisabled: isDisabled,
     value: question.questionAnswerType,
@@ -29302,7 +29536,7 @@ var QuestionView = function QuestionView(_ref2) {
     xs: 4,
     lg: 4
   }, React__default.createElement("div", {
-    className: styles$7["question-title"] + " me-2 text-nowrap"
+    className: styles$8["question-title"] + " me-2 text-nowrap"
   }, t("problem_number_question", {
     number: question.questionOrder + 1
   }))), !isTextbook && React__default.createElement(material.Grid, {
@@ -29315,7 +29549,7 @@ var QuestionView = function QuestionView(_ref2) {
     lg: 4
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "question_answer_type",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("question_answer_type")), React__default.createElement(CustomSelect, {
     isDisabled: isDisabled,
     value: question.questionAnswerType,
@@ -29449,7 +29683,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     onDelete === null || onDelete === void 0 ? void 0 : onDelete(article);
   };
   return React__default.createElement("div", {
-    className: "d-flex " + styles$7["question"] + " " + (isActive ? styles$7["question--active"] : "")
+    className: "d-flex " + styles$8["question"] + " " + (isActive ? styles$8["question--active"] : "")
   }, React__default.createElement("div", {
     className: "py-1"
   }, React__default.createElement(pi.PiDotsNineLight, {
@@ -29457,9 +29691,9 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
   })), React__default.createElement("div", {
     className: "px-2"
   }, React__default.createElement("p", {
-    className: "mb-0 " + styles$7["question-article"]
+    className: "mb-0 " + styles$8["question-article"]
   }, t("article_number")), React__default.createElement("p", {
-    className: "text-center " + styles$7["question-article"]
+    className: "text-center " + styles$8["question-article"]
   }, article)), React__default.createElement("div", {
     className: "flex-grow-1"
   }, React__default.createElement(material.Grid, {
@@ -29480,7 +29714,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     lg: 3
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "question_count",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("questions")), React__default.createElement(QuestionCountSelector, {
     id: "question_count",
     value: questionCount,
@@ -29499,7 +29733,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "category",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("category")), React__default.createElement(ArticleCategorySelector, {
     style: {
       "div:has(&)": {
@@ -29519,7 +29753,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     lg: 3
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "answer_count",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("answer_count")), React__default.createElement(AnswerCountSelector, {
     id: "answer_count",
     value: answerCount,
@@ -30044,7 +30278,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
     xs: 5,
     className: 'mb-2'
   }, React__default.createElement("label", {
-    className: styles["form-label"] + " " + styles$7["question-label"],
+    className: styles["form-label"] + " " + styles$8["question-label"],
     htmlFor: "title"
   }, t("exam_name")), React__default.createElement("input", {
     disabled: isDisabled,
@@ -30058,7 +30292,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
     xs: 3,
     className: 'mb-2'
   }, React__default.createElement("label", {
-    className: styles["form-label"] + " " + styles$7["question-label"],
+    className: styles["form-label"] + " " + styles$8["question-label"],
     htmlFor: "duration"
   }, t("exam_duration")), React__default.createElement(CustomSelect, {
     inputId: "duration",
@@ -30071,7 +30305,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
     xs: 3,
     className: 'mb-2'
   }, React__default.createElement("label", {
-    className: styles["form-label"] + " " + styles$7["question-label"],
+    className: styles["form-label"] + " " + styles$8["question-label"],
     htmlFor: "subject"
   }, t("subject")), React__default.createElement(CustomSelect, {
     inputId: "subject",
@@ -30114,7 +30348,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
       }
     },
     disabled: isDisabled,
-    className: "w-100 d-flex justify-content-center align-items-center " + styles$7["question-btn"] + " mt-3",
+    className: "w-100 d-flex justify-content-center align-items-center " + styles$8["question-btn"] + " mt-3",
     onClick: handleAddArticle
   }, React__default.createElement(fa.FaPlusCircle, {
     className: "me-2"
@@ -31699,7 +31933,7 @@ var ArticleDialog = function ArticleDialog(_ref) {
   }, t("add")))));
 };
 
-var styles$8 = {"drawer":"_11aYm","open":"_3Ydwm","drawer-overlay":"_3SQDf","drawer-header":"_2BwOx","drawer-form":"_2Zo7R","dropdown-content-academy":"_1lzjD","dropdown-change":"_1y7K9","dropdown-academy-item":"_1Y-55","dropdown-content-language":"_1fBXY","dropdown-item-language":"_3Szun","dropdown-item-language-active":"_2HhLb","item-address":"_3WYHC","item-logout":"_2-9ix","title-address":"_1r4pn","image-academy":"_2ZozT"};
+var styles$9 = {"drawer":"_11aYm","open":"_3Ydwm","drawer-overlay":"_3SQDf","drawer-header":"_2BwOx","drawer-form":"_2Zo7R","dropdown-content-academy":"_1lzjD","dropdown-change":"_1y7K9","dropdown-academy-item":"_1Y-55","dropdown-content-language":"_1fBXY","dropdown-item-language":"_3Szun","dropdown-item-language-active":"_2HhLb","item-address":"_3WYHC","item-logout":"_2-9ix","title-address":"_1r4pn","image-academy":"_2ZozT"};
 
 var _excluded$e = ["isOpen", "onClose", "handleSaveExam"];
 var CreateExamDrawer = function CreateExamDrawer(props) {
@@ -31712,17 +31946,17 @@ var CreateExamDrawer = function CreateExamDrawer(props) {
   var theme = material.useTheme();
   var isTabletUp = material.useMediaQuery(theme.breakpoints.up('lg'));
   return React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$8["drawer-overlay"] + " " + (isOpen && styles$8["open"]),
+    className: styles$9["drawer-overlay"] + " " + (isOpen && styles$9["open"]),
     onClick: function onClick() {
       return onClose();
     }
   }), React__default.createElement("div", {
-    className: styles$8["drawer"] + " bg-white " + (isOpen && styles$8["open"]),
+    className: styles$9["drawer"] + " bg-white " + (isOpen && styles$9["open"]),
     style: {
       width: "" + (isTabletUp ? "70vw" : "100vw")
     }
   }, React__default.createElement("div", {
-    className: styles$8["drawer-header"] + " d-flex justify-content-between align-items-center"
+    className: styles$9["drawer-header"] + " d-flex justify-content-between align-items-center"
   }, React__default.createElement(material.Button, {
     variant: "outlined",
     sx: {
@@ -31741,7 +31975,7 @@ var CreateExamDrawer = function CreateExamDrawer(props) {
   }, React__default.createElement(fa.FaTimes, {
     size: 18
   }))), React__default.createElement("div", {
-    className: "" + styles$8["drawer-form"]
+    className: "" + styles$9["drawer-form"]
   }, React__default.createElement(ExamDetailView, Object.assign({}, examDetailViewProps)))));
 };
 
@@ -32857,7 +33091,7 @@ var useNotificationDetail = function useNotificationDetail(_ref) {
   };
 };
 
-var styles$9 = {"avatar":"_8niRT"};
+var styles$a = {"avatar":"_8niRT"};
 
 var _excluded$f = ["value", "disabled", "optionTypeNotification"];
 var TypeSelector = function TypeSelector(_ref) {
@@ -32982,7 +33216,7 @@ var NotificationForm = function NotificationForm(_ref) {
     className: "fw-bold mb-2",
     htmlFor: "main-teacher"
   }, t('content')), React__default.createElement("div", {
-    className: "" + styles$9["teacher-selector-wrapper"]
+    className: "" + styles$a["teacher-selector-wrapper"]
   }, React__default.createElement(TinyEditor, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     initValue: formikProp.values.content,
@@ -33001,7 +33235,7 @@ var NotificationForm = function NotificationForm(_ref) {
   }, t('type'), " ", React__default.createElement("span", {
     className: "text-danger"
   }, "*")), React__default.createElement("div", {
-    className: "" + styles$9["teacher-selector-wrapper"]
+    className: "" + styles$a["teacher-selector-wrapper"]
   }, React__default.createElement(TypeSelector, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     optionTypeNotification: notificationTypes,
@@ -33019,7 +33253,7 @@ var NotificationForm = function NotificationForm(_ref) {
     className: "fw-bold mb-2",
     htmlFor: "main-teacher"
   }, t('classes')), React__default.createElement("div", {
-    className: "" + styles$9["teacher-selector-wrapper"]
+    className: "" + styles$a["teacher-selector-wrapper"]
   }, React__default.createElement(ClassSelector, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     value: classOptions,
@@ -33028,7 +33262,7 @@ var NotificationForm = function NotificationForm(_ref) {
     className: "fw-bold mb-2",
     htmlFor: "main-teacher"
   }, t('students')), React__default.createElement("div", {
-    className: "" + styles$9["teacher-selector-wrapper"]
+    className: "" + styles$a["teacher-selector-wrapper"]
   }, React__default.createElement(StudentSelector, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     value: studentOptions,
@@ -33909,7 +34143,6 @@ var CompareTypeOptions = [{
   label: "synonym_processing",
   value: exports.QuestionAnswerType.SynonymProcessing
 }];
-var MAX_QUESTIONS_IN_QUESTION_GROUP = 20;
 
 var CustomTextbookTab = function CustomTextbookTab(props) {
   var children = props.children,
@@ -34373,7 +34606,7 @@ var isEqual = function isEqual(prev, next) {
 };
 var ArticleBlock$1 = React.memo(ArticleBlock, isEqual);
 
-var styles$a = {"question":"_1_ONI","question-article":"_2FdrR","question-title":"_3mgRf","question-label":"_2h0kA","question-input":"_exAl-","question-btn":"_2ksp8"};
+var styles$b = {"question":"_1_ONI","question-article":"_2FdrR","question-title":"_3mgRf","question-label":"_2h0kA","question-input":"_exAl-","question-btn":"_2ksp8"};
 
 var labelStyle = {
   textOverflow: "ellipsis",
@@ -34399,7 +34632,7 @@ var QuestionCompareType = function QuestionCompareType(_ref) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "compare-type",
-    className: "" + styles$a["question-label"],
+    className: "" + styles$b["question-label"],
     sx: _extends({}, labelStyle, {
       width: "unset"
     })
@@ -34443,7 +34676,7 @@ var QuestionOrderName = function QuestionOrderName(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   return React__default.createElement(material.Box, {
-    className: styles$a["question-title"] + " me-2 text-nowrap",
+    className: styles$b["question-title"] + " me-2 text-nowrap",
     sx: questionTitleStyle
   }, isMath ? t("problem_number_question", {
     number: questionOrder + 1
@@ -34668,7 +34901,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
           var _data$correctAnswers2;
           return React__default.createElement(material.FormControlLabel, {
             key: i,
-            className: styles$a["question-label"] + " w-fit",
+            className: styles$b["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             disabled: disabled,
@@ -34702,7 +34935,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
           var _data$correctAnswers4;
           return React__default.createElement(material.FormControlLabel, {
             key: i,
-            className: styles$a["question-label"] + " w-fit",
+            className: styles$b["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             onChange: function onChange(e) {
@@ -34768,7 +35001,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     direction: "row",
     gap: 2
   }, isTextAnswerType && React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
-    className: styles$a["question-label"] + " form-label",
+    className: styles$b["question-label"] + " form-label",
     sx: _extends({}, labelStyle, {
       visibility: "hidden"
     })
@@ -34803,7 +35036,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "score",
-    className: styles$a["question-label"] + " form-label",
+    className: styles$b["question-label"] + " form-label",
     sx: labelStyle
   }, t("score")), React__default.createElement(formik.Field, {
     name: path + ".score",
@@ -34823,7 +35056,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "type",
-    className: styles$a["question-label"] + " form-label",
+    className: styles$b["question-label"] + " form-label",
     sx: labelStyle
   }, t("type")), React__default.createElement(formik.Field, {
     name: path + ".questionTypeId",
@@ -34848,7 +35081,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "question_answer_type",
-    className: styles$a["question-label"] + " form-label",
+    className: styles$b["question-label"] + " form-label",
     sx: labelStyle
   }, t("question_answer_type")), React__default.createElement(formik.Field, {
     name: path + ".questionAnswerType",
@@ -35244,8 +35477,7 @@ var QuestionGroupBlock = function QuestionGroupBlock(_ref) {
       var field = _ref2.field;
       return React__default.createElement(QuestionCountSelector, Object.assign({}, field, {
         onChange: handleChangeQuestionCount,
-        isDisabled: disabled,
-        totalQuestions: MAX_QUESTIONS_IN_QUESTION_GROUP
+        isDisabled: disabled
       }));
     }
   }))), isMath && React__default.createElement(material.Grid, {
@@ -37484,7 +37716,7 @@ var useTextbookList$1 = function useTextbookList() {
   };
 };
 
-var styles$b = {"action-btn":"_2Kt_g","action-btn--pencil":"_3T_TG","btn-cancel":"_3j6Kd","btn-register":"_XA4vl"};
+var styles$c = {"action-btn":"_2Kt_g","action-btn--pencil":"_3T_TG","btn-cancel":"_3j6Kd","btn-register":"_XA4vl"};
 
 var DeleteTextbookDialog$1 = function DeleteTextbookDialog(_ref) {
   var t = _ref.t,
@@ -37548,7 +37780,7 @@ var DeleteTextbookDialog$1 = function DeleteTextbookDialog(_ref) {
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$b["btn-cancel"],
+    className: styles$c["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -37559,7 +37791,7 @@ var DeleteTextbookDialog$1 = function DeleteTextbookDialog(_ref) {
     lineHeight: "16.71px"
   }, t("cancel"))), React__default.createElement(material.Button, {
     variant: "contained",
-    className: styles$b["btn-register"],
+    className: styles$c["btn-register"],
     type: "submit",
     sx: {
       padding: "12px 47px"
@@ -37646,12 +37878,12 @@ var PreparedTextbookList = function PreparedTextbookList(_ref) {
       title: t("edit")
     }, React__default.createElement(material.IconButton, {
       color: "default",
-      className: styles$b["action-btn"] + " bg-warning text-white me-2",
+      className: styles$c["action-btn"] + " bg-warning text-white me-2",
       onClick: function onClick() {
         return onNavigateDetail(i);
       }
     }, React__default.createElement(hi.HiOutlinePencilAlt, {
-      className: styles$b["action-btn--pencil"],
+      className: styles$c["action-btn--pencil"],
       size: 16
     }))), React__default.createElement(material.Tooltip, {
       title: t("edit")
@@ -37660,7 +37892,7 @@ var PreparedTextbookList = function PreparedTextbookList(_ref) {
         return handleOpenConfirmDialog(i);
       },
       color: "default",
-      className: styles$b["action-btn"] + " bg-danger text-white",
+      className: styles$c["action-btn"] + " bg-danger text-white",
       title: t("delete")
     }, React__default.createElement(fa6.FaTrashCan, {
       size: 12
@@ -38459,8 +38691,8 @@ var Header = function Header(_ref) {
     justifyContent: "center",
     alignItems: "center"
   }, React__default.createElement(TheAcademyDropdown, {
-    homeAcademyUrl: academyListRoute.path,
-    homeUrl: homeRoute.path,
+    homeAcademyUrl: homeRoute.path,
+    homeUrl: academyListRoute.path,
     registerUrl: registerRoute === null || registerRoute === void 0 ? void 0 : registerRoute.path,
     role: role,
     history: history,
@@ -38835,6 +39067,7 @@ exports.AnswerCountSelector = AnswerCountSelector;
 exports.ArticleCategorySelector = ArticleCategorySelector;
 exports.ArticleDialog = ArticleDialog;
 exports.ArticleGroupView = ArticleGroupView;
+exports.AttendanceFormDialog = AttendanceFormDialog;
 exports.BASE_URL = BASE_URL;
 exports.BRIEF_GRADE_OPTIONS = BRIEF_GRADE_OPTIONS;
 exports.ChapterBox = _ChapterBox;
@@ -38873,6 +39106,7 @@ exports.LANGUAGE = LANGUAGE;
 exports.LEARNING_SPACE = LEARNING_SPACE;
 exports.LanguageHeaders = LanguageHeaders;
 exports.LayoutContext = LayoutContext;
+exports.LessonTooltip = LessonTooltip;
 exports.ListView = ListView;
 exports.Loading = Loading;
 exports.LoadingComponent = LoadingComponent;