touchstudy-core 0.1.166 → 0.1.168

package/dist/index.js

@@ -16,28 +16,32 @@ var moment = _interopDefault(require('moment'));
 var fa = require('react-icons/fa');
 var io = require('react-icons/io');
 var io5 = require('react-icons/io5');
-var reactRedux = require('react-redux');
+var MButton = _interopDefault(require('@mui/material/Button'));
+var DialogTitle = _interopDefault(require('@mui/material/DialogTitle'));
+var DialogContent = _interopDefault(require('@mui/material/DialogContent'));
+var DialogActions = _interopDefault(require('@mui/material/DialogActions'));
+var IconButton = _interopDefault(require('@mui/material/IconButton'));
+var Typography = _interopDefault(require('@mui/material/Typography'));
+var formik = require('formik');
 var Select = require('react-select');
 var Select__default = _interopDefault(Select);
 var CreatableSelect = _interopDefault(require('react-select/creatable'));
-var axios = _interopDefault(require('axios'));
 var _$8 = _interopDefault(require('lodash'));
+var reactRedux = require('react-redux');
+var axios = _interopDefault(require('axios'));
 var reactGoogleLogin = require('@leecheuk/react-google-login');
 require('moment/locale/ko.js');
 require('moment/locale/en-au.js');
 var reactVirtualized = require('react-virtualized');
-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$e = 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'));
 var CardActions = _interopDefault(require('@mui/material/CardActions'));
 var CardContent = _interopDefault(require('@mui/material/CardContent'));
 var CardMedia = _interopDefault(require('@mui/material/CardMedia'));
-var MButton = _interopDefault(require('@mui/material/Button'));
 var yup = require('yup');
 var colors = require('@mui/material/colors');
 var reactGoogleRecaptchaV3 = require('react-google-recaptcha-v3');
@@ -52,10 +56,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 DialogTitle = _interopDefault(require('@mui/material/DialogTitle'));
-var DialogContent = _interopDefault(require('@mui/material/DialogContent'));
-var DialogActions = _interopDefault(require('@mui/material/DialogActions'));
-var IconButton = _interopDefault(require('@mui/material/IconButton'));
+var cg = require('react-icons/cg');
 var html2pdf = _interopDefault(require('html2pdf.js'));
 var Slider = _interopDefault(require('react-slick'));
 var gr = require('react-icons/gr');
@@ -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({
@@ -5539,6 +5560,31 @@ var NotFound = function NotFound() {
   }, t('the_page_you_are_looking_for_was_not_found')), React__default.createElement("div", null))));
 };
 
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _taggedTemplateLiteralLoose(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
+}
+
 var CommonDialog = function CommonDialog(_ref) {
   var open = _ref.open,
     children = _ref.children,
@@ -5549,6 +5595,9 @@ 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,
+    paperSx = _ref.paperSx,
     onClose = _ref.onClose;
   return React__default.createElement(material.Dialog, {
     open: open,
@@ -5557,13 +5606,13 @@ var CommonDialog = function CommonDialog(_ref) {
     fullWidth: true,
     scroll: "body",
     sx: {
-      zIndex: 1102
+      zIndex: zIndex
     },
     PaperProps: {
-      sx: {
-        overflowY: "unset",
+      sx: _extends({
+        overflowY: "auto",
         minWidth: minWidth
-      }
+      }, paperSx)
     }
   }, isShowHeader ? React__default.createElement(React.Fragment, null, React__default.createElement(material.DialogTitle, {
     className: "border border-start-0 border-end-0 border-top-0 border-1 " + titleClassName,
@@ -5588,31 +5637,6 @@ var CommonDialog = function CommonDialog(_ref) {
   }, title)), children);
 };
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectDestructuringEmpty(t) {
-  if (null == t) throw new TypeError("Cannot destructure " + t);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _taggedTemplateLiteralLoose(e, t) {
-  return t || (t = e.slice(0)), e.raw = t, e;
-}
-
 var confirmDialogTextStyle = {
   color: "#363634",
   fontSize: 16,
@@ -5766,163 +5790,43 @@ var ConfirmDeleteDialog = function ConfirmDeleteDialog(props) {
   return React__default.createElement(ConfirmDialog, Object.assign({}, ConfirmDeleteDialogDefaultProps, props));
 };
 
-var _templateObject;
-var BorderedTextField = material.styled(material.TextField)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    & .MuiOutlinedInput-root {\n        &.Mui-focused fieldset {\n            border-width: 1px;\n            border-color: ", ";\n        }\n    }\n    & .MuiOutlinedInput-root:hover {\n      fieldset {\n          border-width: 1px;\n          border-color: ", ";\n      }\n    }\n"])), styles.dark, styles.less_dark);
-var InputText = function InputText(props) {
-  return React__default.createElement(BorderedTextField, Object.assign({
-    sx: {
-      "& input": {
-        py: "7.5px",
-        px: "12px"
-      },
-      "& > div": {
-        borderColor: "#97A1AF",
-        borderRadius: "4px"
-      }
-    }
-  }, props));
-};
-
-var PassCodeDialog = function PassCodeDialog(_ref) {
-  var open = _ref.open,
-    onClose = _ref.onClose,
-    onSubmit = _ref.onSubmit,
-    academyDomain = _ref.academyDomain;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useState = React.useState(""),
-    passCode = _useState[0],
-    setPassCode = _useState[1];
-  var handleClose = function handleClose(event, reason) {
-    onClose(event, reason);
-  };
-  var handleSubmit = function handleSubmit() {
-    try {
-      var data = {
-        code: passCode,
-        academyDomain: academyDomain
-      };
-      return Promise.resolve(onSubmit(data, handleClose)).then(function () {});
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  var handleChangePassCode = function handleChangePassCode(e) {
-    setPassCode(e.target.value);
-  };
-  var theme = material.useTheme();
-  return React__default.createElement(CommonDialog, {
-    open: open,
-    onClose: handleClose,
-    size: "xs",
-    title: t("join_an_academy")
-  }, React__default.createElement(material.DialogContent, {
-    sx: {
-      overflowY: "unset"
-    }
-  }, React__default.createElement(material.Stack, {
-    direction: "column",
-    spacing: 2,
-    zIndex: 1,
-    position: "relative"
-  }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
-    className: "fw-medium mb-1"
-  }, t("pass_code"), React__default.createElement("span", {
-    className: "text-danger"
-  }, "*")), React__default.createElement(InputText, {
-    id: "pass-code",
-    placeholder: t("enter_pass_code"),
-    value: passCode,
-    onChange: handleChangePassCode
-  })))), React__default.createElement(material.DialogActions, {
-    className: ""
-  }, React__default.createElement(material.Button, {
-    variant: "contained",
-    sx: {
-      bgcolor: theme.palette.grey[700]
-    },
-    onClick: handleClose
-  }, t("cancel")), React__default.createElement(material.Button, {
-    variant: "contained",
-    onClick: handleSubmit,
-    disabled: !passCode.trim().length
-  }, t("confirmation"))));
-};
-
-var loadingStyle = {
-  minWidth: "100vw",
-  minHeight: "100vh",
-  position: "fixed",
-  top: 0,
-  left: 0,
-  zIndex: 999999999,
-  backgroundColor: "rgba(0, 0, 0, 0.4)",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-};
-var Loading = function Loading() {
-  var isLoading = reactRedux.useSelector(function (state) {
-    return state.common.isLoading;
-  });
-  return isLoading ? React__default.createElement("div", {
-    style: loadingStyle
-  }, React__default.createElement("div", {
-    className: "spinner-border text-secondary",
-    role: "status"
-  }, React__default.createElement("span", {
-    className: "sr-only"
-  }))) : null;
+var iconCloseDialog = function iconCloseDialog(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "24" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "25" : _ref$height,
+    color = _ref.color;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 25",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M13.5909 12.5L18.0441 8.04687C18.2554 7.8359 18.3743 7.54962 18.3745 7.25099C18.3748 6.95237 18.2564 6.66587 18.0455 6.45453C17.8345 6.24319 17.5482 6.12431 17.2496 6.12404C16.951 6.12378 16.6645 6.24215 16.4531 6.45312L12 10.9062L7.54687 6.45312C7.33553 6.24178 7.04888 6.12305 6.75 6.12305C6.45111 6.12305 6.16447 6.24178 5.95312 6.45312C5.74178 6.66447 5.62305 6.95111 5.62305 7.25C5.62305 7.54888 5.74178 7.83553 5.95312 8.04687L10.4062 12.5L5.95312 16.9531C5.74178 17.1645 5.62305 17.4511 5.62305 17.75C5.62305 18.0489 5.74178 18.3355 5.95312 18.5469C6.16447 18.7582 6.45111 18.8769 6.75 18.8769C7.04888 18.8769 7.33553 18.7582 7.54687 18.5469L12 14.0937L16.4531 18.5469C16.6645 18.7582 16.9511 18.8769 17.25 18.8769C17.5489 18.8769 17.8355 18.7582 18.0469 18.5469C18.2582 18.3355 18.3769 18.0489 18.3769 17.75C18.3769 17.4511 18.2582 17.1645 18.0469 16.9531L13.5909 12.5Z",
+    fill: "#202B37"
+  }));
 };
 
-var loadingStyle$1 = {
-  minWidth: "100vw",
-  minHeight: "100vh",
-  position: "fixed",
-  top: 0,
-  left: 0,
-  zIndex: 999999999,
-  backgroundColor: "rgba(0, 0, 0, 0.4)",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-};
-var LoadingComponent = function LoadingComponent(_ref) {
-  var isLoading = _ref.isLoading,
-    children = _ref.children,
-    _ref$spinClassName = _ref.spinClassName,
-    spinClassName = _ref$spinClassName === void 0 ? "text-secondary" : _ref$spinClassName,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  return isLoading ? React__default.createElement("div", {
-    style: loadingStyle$1
-  }, React__default.createElement(material.Stack, {
-    direction: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    className: className
-  }, React__default.createElement("div", {
-    className: "spinner-border " + spinClassName,
-    role: "status"
-  }, React__default.createElement("span", {
-    className: "sr-only"
-  })), React__default.createElement("div", null, children))) : null;
+var iconWarning = function iconWarning(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "17" : _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,
+    viewBox: "0 0 17 16",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M14.5335 12.4712L9.20754 2.58062C8.83004 1.87937 7.82441 1.87937 7.4466 2.58062L2.12097 12.4712C2.03901 12.6235 1.99792 12.7944 2.00171 12.9672C2.00549 13.1401 2.05404 13.309 2.14259 13.4575C2.23115 13.606 2.3567 13.729 2.50698 13.8145C2.65726 13.9 2.82714 13.9451 3.00004 13.9453H13.6529C13.8259 13.9453 13.996 13.9005 14.1465 13.8151C14.2969 13.7297 14.4227 13.6067 14.5115 13.4582C14.6002 13.3096 14.6489 13.1406 14.6527 12.9676C14.6566 12.7946 14.6155 12.6236 14.5335 12.4712ZM8.32722 12.4141C8.20361 12.4141 8.08277 12.3774 7.97999 12.3087C7.87721 12.2401 7.7971 12.1424 7.7498 12.0282C7.7025 11.914 7.69012 11.7884 7.71423 11.6671C7.73835 11.5459 7.79787 11.4345 7.88528 11.3471C7.97269 11.2597 8.08405 11.2002 8.20529 11.1761C8.32653 11.152 8.4522 11.1643 8.5664 11.2116C8.6806 11.2589 8.77822 11.3391 8.84689 11.4418C8.91557 11.5446 8.95222 11.6654 8.95222 11.7891C8.95222 11.8711 8.93606 11.9524 8.90465 12.0282C8.87324 12.1041 8.8272 12.173 8.76917 12.231C8.71113 12.289 8.64223 12.3351 8.5664 12.3665C8.49057 12.3979 8.4093 12.4141 8.32722 12.4141ZM9.00597 6.12813L8.8266 9.94063C8.8266 10.0732 8.77392 10.2004 8.68015 10.2942C8.58638 10.3879 8.45921 10.4406 8.3266 10.4406C8.19399 10.4406 8.06681 10.3879 7.97305 10.2942C7.87928 10.2004 7.8266 10.0732 7.8266 9.94063L7.64722 6.12969C7.64319 6.03862 7.65754 5.94768 7.6894 5.86227C7.72127 5.77687 7.77 5.69875 7.8327 5.63259C7.8954 5.56642 7.97078 5.51355 8.05434 5.47713C8.13791 5.44072 8.22795 5.4215 8.3191 5.42063H8.32566C8.41743 5.42058 8.50826 5.43912 8.59267 5.47515C8.67708 5.51117 8.75331 5.56392 8.81677 5.63021C8.88023 5.6965 8.92961 5.77497 8.96191 5.86087C8.99421 5.94676 9.00878 6.03832 9.00472 6.13L9.00597 6.12813Z",
+    fill: "#DB4D4D"
+  }));
 };
 
-var CustomPagination = function CustomPagination(_ref) {
-  var currentPage = _ref.currentPage,
-    totalPage = _ref.totalPage,
-    onChangePage = _ref.onChangePage;
-  var handleChangePage = function handleChangePage(_, page) {
-    onChangePage(page);
-  };
-  return React__default.createElement(material.Pagination, {
-    className: "w-fit",
-    count: totalPage,
-    page: currentPage,
-    onChange: handleChangePage
-  });
-};
+var styles$1 = {"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":"_2mYOt","title":"_1H9qR","point":"_2rTfh","buttonGroup":"_W5dic","btnFeedback":"_FmMYN","btnTerminate":"_3kv6J","myanswer":"_1jZV7","titleMyAnswer1":"_1aYD1","titleMyAnswer2":"_2Oc4x","contentMyAnswer":"__LRYW","myAnswerItem":"_1U-Kx","time":"_2PXiz","timeCol":"_1zcfJ","answer-response":"_18ZNf","answer-response-0":"_3nbRi","answer-response-1":"_3NEHk","answer-response-2":"_Et0ih","answer-response-3":"_5Vc3v","answer-response-4":"_2SMBR","overall-response-1":"_1ImE5","overall-response-2":"_1oVKC","overall-response-3":"_2wXCw","answerCorrect":"_gE8qM","answerIncorrect":"_3kRqE","answerNograss":"_22Pi3","answerEasy":"_1C7aw","answerDiscrimination":"__YGYX","answerTrap":"_3AkGb","answerNoTime":"_3l-yC","questionOrder":"_2mK7U","myTimeLabel":"_3ZOZs","myPoolTime":"_1Gajr","topTimeLabel":"_62PzE","topTime":"_3HUx1","meanTimeLabel":"_Yu8Oq","meanTime":"_18kZu","compareChart":"_2MTOH","prevChart":"_JoHQL","chart":"_29iCQ","nextChart":"_3hjxI","titleChart":"_2Z42z","titleCompareGrass":"_34RN_","tableCompareGrass":"_2lzlQ","thcolumn1":"_2MSIH","tdcolumn1":"_1I06v","tdcolumn3":"_VpMQ5","classification":"_3t41M","wrapperProblem":"_2vh8v","titleProblem":"_3YfGm","titleProblemClose":"_34388","titleTrickyProblem":"_INxbh","wrongQuestions":"_35DcB","question":"_10SAW","assignedQuestions":"_oEGQ_","wrapperContent":"_zhZ1O","content":"_NGHD4","contentColumn1":"_v5SKe","span1":"_28SHT","span2":"_1raLd","contentColumn2":"_-xJ34","duration":"_1YGAg","topDuration":"_3DiyY","overallCorrectRate":"_DnkyV","answer":"_29MTE","contentVulnerable":"_3x1PG","wrappContentProblem":"_2saM2","contentProblem":"_1hTJx","labelProblem":"_3BXO9","name":"_1cUZW","percent":"_3CLEc","slider":"_3LCEY","track":"_3I8mi","noData":"_1oZ-s","loading":"_Nm201","table-responsive":"_3zQL-","form-label":"_3Vpmh","form-control":"_DafKE","form-label-dialog":"_3NjaH","btn-cancel":"_sLxwL","btn-register":"_4ZKQY","pdfBtnBox":"_2zUJf","pdfBtn":"_y_Cr7","form-select":"_HCIxD","loader":"_3aDIU","dot":"_JGCIL","bounce":"_3M62i"};
 
 var DropdownIndicator = function DropdownIndicator(props) {
   return React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), React__default.createElement(fa.FaCaretDown, {
@@ -6089,7 +5993,6 @@ var CustomSelect = function CustomSelect(_ref) {
     value: !isDefault ? initialValues != null ? initialValues : null : undefined,
     defaultValue: isDefault ? initialValues : undefined,
     menuPlacement: scrollBottom ? "top" : "auto",
-    isMulti: isMulti,
     components: {
       IndicatorSeparator: function IndicatorSeparator() {
         return null;
@@ -6159,116 +6062,6 @@ var CustomSelectOption = function CustomSelectOption(_ref) {
   }, rest));
 };
 
-var SCORE_OPTIONS = Array.from({
-  length: 10
-}, function (_, i) {
-  return i + 1;
-});
-var QUESTION_OPTIONS = Array.from({
-  length: 10
-}, function (_, i) {
-  return i + 1;
-});
-var ANSWER_OPTIONS = Array.from({
-  length: 9
-}, function (_, i) {
-  return i + 2;
-});
-var DEFAULT_SCORE = 2;
-
-var AnswerCountSelector = function AnswerCountSelector(_ref) {
-  var id = _ref.id,
-    value = _ref.value,
-    onChange = _ref.onChange,
-    isDisabled = _ref.isDisabled;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var answerOptions = ANSWER_OPTIONS.map(function (i) {
-    return {
-      label: t("number_question", {
-        number: i
-      }),
-      value: i
-    };
-  });
-  return React__default.createElement(CustomSelect, {
-    inputId: id,
-    value: value,
-    options: answerOptions,
-    onChange: onChange,
-    isDisabled: isDisabled
-  });
-};
-
-var ArticleCategorySelector = function ArticleCategorySelector(_ref) {
-  var id = _ref.id,
-    value = _ref.value,
-    optionValue = _ref.optionValue,
-    onChange = _ref.onChange,
-    isDisabled = _ref.isDisabled,
-    options = _ref.options,
-    isMulti = _ref.isMulti,
-    placeholder = _ref.placeholder,
-    rest = _ref.rest;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return React__default.createElement(CustomSelect, Object.assign({
-    isMulti: isMulti,
-    inputId: id,
-    value: value,
-    options: options,
-    onChange: onChange,
-    isDisabled: isDisabled,
-    placeholder: placeholder || t("select_category"),
-    optionValue: optionValue
-  }, rest));
-};
-
-// A type of promise-like that resolves synchronously and supports only one observer
-
-const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
-
-const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
-
-// Asynchronously call a function and send errors to recovery continuation
-function _catch(body, recover) {
-	try {
-		var result = body();
-	} catch(e) {
-		return recover(e);
-	}
-	if (result && result.then) {
-		return result.then(void 0, recover);
-	}
-	return result;
-}
-
-// Asynchronously await a promise and pass the result to a finally continuation
-function _finallyRethrows(body, finalizer) {
-	try {
-		var result = body();
-	} catch (e) {
-		return finalizer(true, e);
-	}
-	if (result && result.then) {
-		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
-	}
-	return finalizer(false, result);
-}
-
-// Asynchronously await a promise and invoke a finally continuation that always overrides the result
-function _finally(body, finalizer) {
-	try {
-		var result = body();
-	} catch (e) {
-		return finalizer();
-	}
-	if (result && result.then) {
-		return result.then(finalizer, finalizer);
-	}
-	return finalizer();
-}
-
 (function (PreparedType) {
   PreparedType[PreparedType["csat_past_questions"] = 1] = "csat_past_questions";
   PreparedType[PreparedType["official_mock_exam"] = 2] = "official_mock_exam";
@@ -6788,6 +6581,119 @@ var useAutoAcademyDomain = function useAutoAcademyDomain(_, history, superUrls,
   }, [pathname, window.location.search, isAuthPage, email, academyDomain]);
 };
 
+// A type of promise-like that resolves synchronously and supports only one observer
+
+const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
+
+const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
+
+// Asynchronously call a function and send errors to recovery continuation
+function _catch(body, recover) {
+	try {
+		var result = body();
+	} catch(e) {
+		return recover(e);
+	}
+	if (result && result.then) {
+		return result.then(void 0, recover);
+	}
+	return result;
+}
+
+// Asynchronously await a promise and pass the result to a finally continuation
+function _finallyRethrows(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer(true, e);
+	}
+	if (result && result.then) {
+		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+	}
+	return finalizer(false, result);
+}
+
+// Asynchronously await a promise and invoke a finally continuation that always overrides the result
+function _finally(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer();
+	}
+	if (result && result.then) {
+		return result.then(finalizer, finalizer);
+	}
+	return finalizer();
+}
+
+var api = axios.create({
+  baseURL: BASE_URL,
+  timeout: 0,
+  headers: {
+    "Content-Type": "application/json"
+  },
+  paramsSerializer: function paramsSerializer(params) {
+    return encodeParams(params);
+  }
+});
+var apiUpload = axios.create({
+  baseURL: BASE_URL,
+  timeout: 60000,
+  headers: {
+    "Content-Type": "multipart/form-data"
+  }
+});
+[api, apiUpload].forEach(function (i) {
+  return i.interceptors.request.use(function (config) {
+    var token = getAccessToken();
+    var searchParams = new URLSearchParams(window.location.search);
+    var paramLang = searchParams.get('lang');
+    var academyDomainStorage = getAcademyDomain();
+    var isLearningSpace = getLearningSpace();
+    var langStorage = getLanguage();
+    var academyDomain = academyDomainStorage;
+    var language = paramLang || langStorage;
+    if (token) {
+      config.headers.Authorization = "Bearer " + token;
+      localStorage.setItem("LAST_TIME_REQUEST", moment().utc().format("YYYY-MM-DD HH:mm:ss"));
+    }
+    if (academyDomain && !isLearningSpace && config.headers[AcademyHeaders] == undefined) config.headers[AcademyHeaders] = "" + academyDomain;
+    if (isLearningSpace && config.headers[NoAcademyHeaders] == undefined) config.headers[NoAcademyHeaders] = "" + isLearningSpace;
+    if (language) config.headers[LanguageHeaders] = "" + language;
+    return config;
+  }, function (error) {
+    return Promise.reject(error);
+  });
+});
+[api, apiUpload].forEach(function (i) {
+  return i.interceptors.response.use(function (response) {
+    return response;
+  }, function (error) {
+    var _error$response, _error$response2, _error$response3;
+    console.log({
+      error: error
+    });
+    if (((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 401) {
+      var _window$location = window.location,
+        pathname = _window$location.pathname,
+        search = _window$location.search;
+      var preRedirectUrl = localStorage.getItem(PRE_REDIRECT_URL);
+      var newRedirectUrl = "" + pathname + search;
+      if (!pathname.startsWith("/login")) {
+        if (preRedirectUrl !== newRedirectUrl) {
+          localStorage.setItem(REDIRECT_URL, newRedirectUrl);
+          localStorage.setItem(PRE_REDIRECT_URL, newRedirectUrl);
+        }
+      }
+    }
+    if (((_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.status) === 401 || ((_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : _error$response3.status) == 403) {
+      localStorage.removeItem(ACCESS_TOKEN);
+      window.location.href = "/login";
+    }
+    return Promise.reject(error);
+  });
+});
+
 var EXAM_SESSION_URL = BASE_URL + "/api/examSession";
 var getCheckStatusExam = function getCheckStatusExam(examCode) {
   return api.get(EXAM_SESSION_URL + "/" + examCode + "/status");
@@ -6914,6 +6820,29 @@ var useGoogleSignOut = function useGoogleSignOut(props) {
   };
 };
 
+var useKeyboardVisible = function useKeyboardVisible() {
+  var theme = material.useTheme();
+  var _useState = React.useState(false),
+    isKeyboardVisible = _useState[0],
+    setIsKeyboardVisible = _useState[1];
+  var isTabletUp = material.useMediaQuery(theme.breakpoints.up('lg'));
+  var isFullScreen = !!document.fullscreenElement;
+  var pageSxProps = _extends({}, !isTabletUp && isKeyboardVisible && isFullScreen && {
+    marginBlock: "3rem 50vh"
+  });
+  var handleInputFocus = function handleInputFocus() {
+    setIsKeyboardVisible(true);
+  };
+  var handleInputBlur = function handleInputBlur() {
+    setIsKeyboardVisible(false);
+  };
+  return {
+    pageSxProps: pageSxProps,
+    handleInputFocus: handleInputFocus,
+    handleInputBlur: handleInputBlur
+  };
+};
+
 var useLanguage = function useLanguage(history, init) {
   if (init === void 0) {
     init = true;
@@ -7553,73 +7482,382 @@ var useVirtualizeList = function useVirtualizeList(totalItems, rowHeight, offset
   OrderBy["DESC"] = "DESC";
 })(exports.OrderBy || (exports.OrderBy = {}));
 
-var api = axios.create({
-  baseURL: BASE_URL,
-  timeout: 0,
-  headers: {
-    "Content-Type": "application/json"
-  },
-  paramsSerializer: function paramsSerializer(params) {
-    return encodeParams(params);
-  }
-});
-var apiUpload = axios.create({
-  baseURL: BASE_URL,
-  timeout: 60000,
-  headers: {
-    "Content-Type": "multipart/form-data"
-  }
-});
-[api, apiUpload].forEach(function (i) {
-  return i.interceptors.request.use(function (config) {
-    var token = getAccessToken();
-    var searchParams = new URLSearchParams(window.location.search);
-    var paramLang = searchParams.get('lang');
-    var academyDomainStorage = getAcademyDomain();
-    var isLearningSpace = getLearningSpace();
-    var langStorage = getLanguage();
-    var academyDomain = academyDomainStorage;
-    var language = paramLang || langStorage;
-    if (token) {
-      config.headers.Authorization = "Bearer " + token;
-      localStorage.setItem("LAST_TIME_REQUEST", moment().utc().format("YYYY-MM-DD HH:mm:ss"));
+function CommonCreateNewQuestionDialog(_ref) {
+  var handleCreateQuestion = _ref.handleCreateQuestion,
+    openDialog = _ref.openDialog,
+    initialValues = _ref.initialValues,
+    onClose = _ref.onClose,
+    options = _ref.options,
+    schema = _ref.schema,
+    labelQuestion = _ref.labelQuestion,
+    nameQuestion = _ref.nameQuestion,
+    labelContent = _ref.labelContent,
+    nameContent = _ref.nameContent;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useKeyboardVisible = useKeyboardVisible(),
+    pageSxProps = _useKeyboardVisible.pageSxProps,
+    handleInputBlur = _useKeyboardVisible.handleInputBlur,
+    handleInputFocus = _useKeyboardVisible.handleInputFocus;
+  return React__default.createElement(material.Dialog, {
+    onClose: onClose,
+    open: openDialog,
+    scroll: "body",
+    PaperProps: {
+      sx: _extends({
+        minWidth: "363px",
+        overflowY: "auto"
+      }, pageSxProps)
     }
-    if (academyDomain && !isLearningSpace && config.headers[AcademyHeaders] == undefined) config.headers[AcademyHeaders] = "" + academyDomain;
-    if (isLearningSpace && config.headers[NoAcademyHeaders] == undefined) config.headers[NoAcademyHeaders] = "" + isLearningSpace;
-    if (language) config.headers[LanguageHeaders] = "" + language;
-    return config;
-  }, function (error) {
-    return Promise.reject(error);
-  });
-});
-[api, apiUpload].forEach(function (i) {
-  return i.interceptors.response.use(function (response) {
-    return response;
-  }, function (error) {
-    var _error$response, _error$response2, _error$response3;
-    console.log({
-      error: error
-    });
-    if (((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 401) {
-      var _window$location = window.location,
-        pathname = _window$location.pathname,
-        search = _window$location.search;
-      var preRedirectUrl = localStorage.getItem(PRE_REDIRECT_URL);
-      var newRedirectUrl = "" + pathname + search;
-      if (!pathname.startsWith("/login")) {
-        if (preRedirectUrl !== newRedirectUrl) {
-          localStorage.setItem(REDIRECT_URL, newRedirectUrl);
-          localStorage.setItem(PRE_REDIRECT_URL, newRedirectUrl);
-        }
+  }, React__default.createElement(DialogTitle, {
+    id: "customized-dialog-title"
+  }, React__default.createElement(Typography, {
+    fontWeight: 700,
+    fontSize: "16px",
+    lineHeight: "19.09px",
+    color: "#202B37"
+  }, t("ask_a_question"))), React__default.createElement(IconButton, {
+    "aria-label": "close",
+    sx: {
+      position: "absolute",
+      right: 8,
+      top: 8,
+      color: function color(theme) {
+        return theme.palette.grey[500];
+      }
+    },
+    onClick: onClose
+  }, React__default.createElement(iconCloseDialog, null)), React__default.createElement(formik.Formik, {
+    initialValues: initialValues,
+    validationSchema: schema,
+    onSubmit: handleCreateQuestion
+  }, function (_ref2) {
+    var values = _ref2.values,
+      errors = _ref2.errors,
+      setFieldValue = _ref2.setFieldValue;
+    return React__default.createElement(formik.Form, null, React__default.createElement(DialogContent, {
+      sx: {
+        padding: 0,
+        overflowY: "auto"
+      }
+    }, React__default.createElement(material.Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      padding: "24px 24px 40px 24px",
+      overflow: "scroll"
+    }, React__default.createElement(material.Stack, null, React__default.createElement("label", {
+      htmlFor: "questions",
+      className: styles["form-label"] + "  " + styles$1["form-label-dialog"]
+    }, labelQuestion || t("questions_to_ask")), React__default.createElement(formik.Field, {
+      id: "questions",
+      name: nameQuestion,
+      render: function render(_ref3) {
+        var field = _ref3.field;
+        return React__default.createElement(CustomSelect, Object.assign({}, field, {
+          id: "questions",
+          menuPlacement: "bottom",
+          maxMenuHeight: 150,
+          options: options,
+          onChange: function onChange(_ref4) {
+            var value = _ref4.value;
+            return setFieldValue(nameQuestion, value);
+          },
+          isClearable: false,
+          onFocus: handleInputFocus,
+          onBlur: handleInputBlur
+        }));
+      }
+    })), React__default.createElement(material.Stack, null, React__default.createElement("label", {
+      htmlFor: "content-question",
+      className: styles["form-label"] + "  " + styles$1["form-label-dialog"]
+    }, labelContent || t("question_content")), React__default.createElement(material.Box, {
+      position: "relative",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center"
+    }, React__default.createElement(formik.Field, {
+      as: "textarea",
+      rows: 3,
+      id: "content-question",
+      style: {
+        paddingRight: "40px"
+      },
+      name: nameContent,
+      placeholder: t("the_problem_is_difficult"),
+      className: styles["form-control"],
+      onFocus: handleInputFocus,
+      onBlur: handleInputBlur
+    }), (errors === null || errors === void 0 ? void 0 : errors[nameContent]) && React__default.createElement(material.Box, {
+      position: "absolute",
+      right: 0,
+      padding: "0 12px",
+      display: "flex",
+      alignItems: "center"
+    }, React__default.createElement(iconWarning, null))), React__default.createElement(material.Box, {
+      marginBottom: "4px"
+    }), React__default.createElement(Typography, {
+      fontWeight: 500,
+      fontSize: "10px",
+      lineHeight: "11.93px",
+      color: !(errors !== null && errors !== void 0 && errors[nameContent]) ? "#97A1AF" : styles$1.red_900
+    }, !(errors !== null && errors !== void 0 && errors[nameContent]) ? t("your_questions_will_be_sent_to_the_counselor") : t("please_enter_your_question"))))), React__default.createElement(DialogActions, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "12px",
+        borderTop: "1px solid #CED2DA"
+      }
+    }, React__default.createElement(MButton, {
+      className: styles$1["btn-cancel"],
+      onClick: onClose
+    }, React__default.createElement(Typography, {
+      sx: {
+        color: styles.dark + " !important"
+      },
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: "16.71px"
+    }, t("cancel"))), React__default.createElement(MButton, {
+      variant: "contained",
+      sx: {
+        bgcolor: styles.dark
+      },
+      className: styles$1["btn-register"],
+      type: "submit",
+      disabled: !values.content.trim().length
+    }, React__default.createElement(Typography, {
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: "16.71px",
+      color: "#FFFFFF"
+    }, t("registration")))));
+  }));
+}
+
+var _templateObject;
+var BorderedTextField = material.styled(material.TextField)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    & .MuiOutlinedInput-root {\n        &.Mui-focused fieldset {\n            border-width: 1px;\n            border-color: ", ";\n        }\n    }\n    & .MuiOutlinedInput-root:hover {\n      fieldset {\n          border-width: 1px;\n          border-color: ", ";\n      }\n    }\n"])), styles.dark, styles.less_dark);
+var InputText = function InputText(props) {
+  return React__default.createElement(BorderedTextField, Object.assign({
+    sx: {
+      "& input": {
+        py: "7.5px",
+        px: "12px"
+      },
+      "& > div": {
+        borderColor: "#97A1AF",
+        borderRadius: "4px"
       }
     }
-    if (((_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.status) === 401 || ((_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : _error$response3.status) == 403) {
-      localStorage.removeItem(ACCESS_TOKEN);
-      window.location.href = "/login";
+  }, props));
+};
+
+var PassCodeDialog = function PassCodeDialog(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit,
+    academyDomain = _ref.academyDomain;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(""),
+    passCode = _useState[0],
+    setPassCode = _useState[1];
+  var handleClose = function handleClose(event, reason) {
+    onClose(event, reason);
+  };
+  var handleSubmit = function handleSubmit() {
+    try {
+      var data = {
+        code: passCode,
+        academyDomain: academyDomain
+      };
+      return Promise.resolve(onSubmit(data, handleClose)).then(function () {});
+    } catch (e) {
+      return Promise.reject(e);
     }
-    return Promise.reject(error);
+  };
+  var handleChangePassCode = function handleChangePassCode(e) {
+    setPassCode(e.target.value);
+  };
+  var theme = material.useTheme();
+  return React__default.createElement(CommonDialog, {
+    open: open,
+    onClose: handleClose,
+    size: "xs",
+    title: t("join_an_academy")
+  }, React__default.createElement(material.DialogContent, {
+    sx: {
+      overflowY: "unset"
+    }
+  }, React__default.createElement(material.Stack, {
+    direction: "column",
+    spacing: 2,
+    zIndex: 1,
+    position: "relative"
+  }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
+    className: "fw-medium mb-1"
+  }, t("pass_code"), React__default.createElement("span", {
+    className: "text-danger"
+  }, "*")), React__default.createElement(InputText, {
+    id: "pass-code",
+    placeholder: t("enter_pass_code"),
+    value: passCode,
+    onChange: handleChangePassCode
+  })))), React__default.createElement(material.DialogActions, {
+    className: ""
+  }, React__default.createElement(material.Button, {
+    variant: "contained",
+    sx: {
+      bgcolor: theme.palette.grey[700]
+    },
+    onClick: handleClose
+  }, t("cancel")), React__default.createElement(material.Button, {
+    variant: "contained",
+    onClick: handleSubmit,
+    disabled: !passCode.trim().length
+  }, t("confirmation"))));
+};
+
+var loadingStyle = {
+  minWidth: "100vw",
+  minHeight: "100vh",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  zIndex: 999999999,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+};
+var Loading = function Loading() {
+  var isLoading = reactRedux.useSelector(function (state) {
+    return state.common.isLoading;
+  });
+  return isLoading ? React__default.createElement("div", {
+    style: loadingStyle
+  }, React__default.createElement("div", {
+    className: "spinner-border text-secondary",
+    role: "status"
+  }, React__default.createElement("span", {
+    className: "sr-only"
+  }))) : null;
+};
+
+var loadingStyle$1 = {
+  minWidth: "100vw",
+  minHeight: "100vh",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  zIndex: 999999999,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+};
+var LoadingComponent = function LoadingComponent(_ref) {
+  var isLoading = _ref.isLoading,
+    children = _ref.children,
+    _ref$spinClassName = _ref.spinClassName,
+    spinClassName = _ref$spinClassName === void 0 ? "text-secondary" : _ref$spinClassName,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  return isLoading ? React__default.createElement("div", {
+    style: loadingStyle$1
+  }, React__default.createElement(material.Stack, {
+    direction: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    className: className
+  }, React__default.createElement("div", {
+    className: "spinner-border " + spinClassName,
+    role: "status"
+  }, React__default.createElement("span", {
+    className: "sr-only"
+  })), React__default.createElement("div", null, children))) : null;
+};
+
+var CustomPagination = function CustomPagination(_ref) {
+  var currentPage = _ref.currentPage,
+    totalPage = _ref.totalPage,
+    onChangePage = _ref.onChangePage;
+  var handleChangePage = function handleChangePage(_, page) {
+    onChangePage(page);
+  };
+  return React__default.createElement(material.Pagination, {
+    className: "w-fit",
+    count: totalPage,
+    page: currentPage,
+    onChange: handleChangePage
   });
+};
+
+var SCORE_OPTIONS = Array.from({
+  length: 10
+}, function (_, i) {
+  return i + 1;
+});
+var QUESTION_OPTIONS = Array.from({
+  length: 40
+}, function (_, i) {
+  return i + 1;
+});
+var ANSWER_OPTIONS = Array.from({
+  length: 9
+}, function (_, i) {
+  return i + 2;
 });
+var DEFAULT_SCORE = 2;
+
+var AnswerCountSelector = function AnswerCountSelector(_ref) {
+  var id = _ref.id,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    isDisabled = _ref.isDisabled;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var answerOptions = ANSWER_OPTIONS.map(function (i) {
+    return {
+      label: t("number_question", {
+        number: i
+      }),
+      value: i
+    };
+  });
+  return React__default.createElement(CustomSelect, {
+    inputId: id,
+    value: value,
+    options: answerOptions,
+    onChange: onChange,
+    isDisabled: isDisabled
+  });
+};
+
+var ArticleCategorySelector = function ArticleCategorySelector(_ref) {
+  var id = _ref.id,
+    value = _ref.value,
+    optionValue = _ref.optionValue,
+    onChange = _ref.onChange,
+    isDisabled = _ref.isDisabled,
+    options = _ref.options,
+    isMulti = _ref.isMulti,
+    placeholder = _ref.placeholder,
+    rest = _ref.rest;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return React__default.createElement(CustomSelect, Object.assign({
+    isMulti: isMulti,
+    inputId: id,
+    value: value,
+    options: options,
+    onChange: onChange,
+    isDisabled: isDisabled,
+    placeholder: placeholder || t("select_category"),
+    optionValue: optionValue
+  }, rest));
+};
 
 var COURSE_URL = BASE_URL + "/api/course";
 var getClassesApi = function getClassesApi(textSearch) {
@@ -7713,22 +7951,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
@@ -8043,7 +8269,7 @@ var SearchInput = function SearchInput(_ref) {
   }));
 };
 
-var styles$1 = {"header__avatar":"_2oGcJ","header__select":"_2y2XV","body":"_ntGyI","list":"_m7Fwt","list__item__header":"_3BM8N","list__item__avatar":"_1ReOK","list__item__avatar-container":"_2qbld","list__item__message":"_3s01i","list__item__message--reply-from":"_2Qxi3","list__item__message--reply-from-right":"_34Vx4","list__item__message--reply":"_3uheq","list__item__message--reply-right":"_2iBr7","reply-text":"_3ZPjO","container-custom":"_38A9k","student-row-col-1":"_Jt5t0","student-row-col-1-active":"_14DKj","row-col-2":"_qHGiR","inputBox":"_2iY67","inputBoxTable":"_3pCw0","background-chat":"_zILbw","wrap-content":"_38gsM","name-sender":"_Lfzyw","content-chat-sender":"_1X73E","content-chat-receiver":"_32V7T","custom-scroll":"_2Uul2","btn-send":"_395lb","btn-chat":"_gDYwm","input-chat":"_22TX5","btn-cancel":"_1u-eg","btn-register":"_22r6_","form-label-dialog":"_jADIA","form-select-width":"_WncPd","padding-content":"_3hz3H","form-label":"_MMQxP","form-control":"_1mJfc"};
+var styles$2 = {"header__avatar":"_2oGcJ","header__select":"_2y2XV","body":"_ntGyI","list":"_m7Fwt","list__item__header":"_3BM8N","list__item__avatar":"_1ReOK","list__item__avatar-container":"_2qbld","list__item__message":"_3s01i","list__item__message--reply-from":"_2Qxi3","list__item__message--reply-from-right":"_34Vx4","list__item__message--reply":"_3uheq","list__item__message--reply-right":"_2iBr7","reply-text":"_3ZPjO","container-custom":"_38A9k","student-row-col-1":"_Jt5t0","student-row-col-1-active":"_14DKj","row-col-2":"_qHGiR","inputBox":"_2iY67","inputBoxTable":"_3pCw0","background-chat":"_zILbw","wrap-content":"_38gsM","name-sender":"_Lfzyw","content-chat-sender":"_1X73E","content-chat-receiver":"_32V7T","custom-scroll":"_2Uul2","btn-send":"_395lb","btn-chat":"_gDYwm","input-chat":"_22TX5","btn-cancel":"_1u-eg","btn-register":"_22r6_","form-label-dialog":"_jADIA","form-select-width":"_WncPd","padding-content":"_3hz3H","form-label":"_MMQxP","form-control":"_1mJfc"};
 
 var iconPersonNoActive = function iconPersonNoActive(_ref) {
   var _ref$width = _ref.width,
@@ -8203,7 +8429,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
     padding: "4px 0"
   }, React__default.createElement(material.Box, null, showName && isStudent && React__default.createElement(material.Box, {
     gap: "8px",
-    className: " " + styles$1["name-sender"],
+    className: " " + styles$2["name-sender"],
     display: "flex",
     alignItems: "center",
     justifyContent: "end",
@@ -8257,7 +8483,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
       objectFit: "contain"
     }
   }) : React__default.createElement("div", {
-    className: styles$1["wrap-content"] + " " + styles$1["content-chat-receiver"],
+    className: styles$2["wrap-content"] + " " + styles$2["content-chat-receiver"],
     style: {
       "float": "inline-end",
       maxWidth: 400,
@@ -8304,7 +8530,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     display: "flex",
     padding: "4px",
     flexDirection: "row",
-    className: "" + styles$1["name-sender"]
+    className: "" + styles$2["name-sender"]
   }, isStudent ? React__default.createElement(React.Fragment, null, React__default.createElement(material.Typography, {
     fontWeight: 500,
     fontSize: 14,
@@ -8340,7 +8566,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
       objectFit: "contain"
     }
   }) : React__default.createElement("div", {
-    className: styles$1["wrap-content"] + " " + styles$1["content-chat-sender"],
+    className: styles$2["wrap-content"] + " " + styles$2["content-chat-sender"],
     style: {
       maxWidth: 400,
       color: styles.gray_700,
@@ -8526,7 +8752,9 @@ var TinyChatEditor = function TinyChatEditor(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onChange = _ref.onChange,
     initValue = _ref.initValue,
-    config = _ref.config;
+    config = _ref.config,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur;
   var isFirstChange = React.useRef(true);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -8558,7 +8786,9 @@ var TinyChatEditor = function TinyChatEditor(_ref) {
     disabled: disabled,
     init: config || options,
     value: initValue,
-    onEditorChange: handleChange
+    onEditorChange: handleChange,
+    onFocus: onFocus,
+    onBlur: onBlur
   });
 };
 
@@ -8579,11 +8809,16 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     }
     return error;
   };
+  var _useKeyboardVisible = useKeyboardVisible(),
+    pageSxProps = _useKeyboardVisible.pageSxProps,
+    handleInputBlur = _useKeyboardVisible.handleInputBlur,
+    handleInputFocus = _useKeyboardVisible.handleInputFocus;
   return React__default.createElement(CommonDialog, {
     open: open,
     onClose: onClose,
     size: "xs",
-    title: t("update_message")
+    title: t("update_message"),
+    paperSx: pageSxProps
   }, React__default.createElement(material.DialogContent, null, !contentType ? React__default.createElement(formik.Formik, {
     enableReinitialize: true,
     initialValues: {
@@ -8597,7 +8832,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     var setFieldValue = _ref2.setFieldValue;
     return React__default.createElement(formik.Form, null, React__default.createElement("label", {
       htmlFor: "content",
-      className: styles$1['form-label'] + "  " + styles$1['form-label-dialog']
+      className: styles$2['form-label'] + "  " + styles$2['form-label-dialog']
     }, t('questions_to_ask')), React__default.createElement(formik.Field, {
       id: "content",
       style: {
@@ -8606,14 +8841,16 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       name: "content",
       validate: validate,
       placeholder: t('the_problem_is_difficult'),
-      className: styles$1['form-control'],
+      className: styles$2['form-control'],
       render: function render(_ref3) {
         var field = _ref3.field;
         return React__default.createElement(TinyChatEditor, {
           initValue: field.value,
           onChange: function onChange(text) {
             return setFieldValue("content", text);
-          }
+          },
+          onFocus: handleInputFocus,
+          onBlur: handleInputBlur
         });
       }
     }), React__default.createElement(material.DialogActions, {
@@ -8627,7 +8864,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       sx: {
         color: styles.dark
       },
-      className: styles$1['btn-cancel'],
+      className: styles$2['btn-cancel'],
       onClick: onClose
     }, React__default.createElement(material.Typography, {
       fontWeight: 700,
@@ -8638,7 +8875,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       sx: {
         bgcolor: styles.dark
       },
-      className: styles$1['btn-register'],
+      className: styles$2['btn-register'],
       type: "submit"
     }, React__default.createElement(material.Typography, {
       fontWeight: 700,
@@ -8685,7 +8922,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       padding: '12px'
     }
   }, React__default.createElement(material.Button, {
-    className: styles$1['btn-cancel'],
+    className: styles$2['btn-cancel'],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -8696,7 +8933,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     lineHeight: '16.71px'
   }, t('cancel'))), React__default.createElement(material.Button, {
     variant: "contained",
-    className: styles$1['btn-register'],
+    className: styles$2['btn-register'],
     sx: {
       bgcolor: !(selectedFile !== null && selectedFile !== void 0 && selectedFile.content) ? styles.light + " !important" : styles.dark
     },
@@ -8803,7 +9040,7 @@ var ChatList = function ChatList(_ref) {
   var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(exports.Role.Student);
   return React__default.createElement("ul", {
     ref: listItemRef,
-    className: styles$1["list"] + " " + styles$1["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
+    className: styles$2["list"] + " " + styles$2["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
   }, !(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && React__default.createElement("li", {
     className: "text-muted text-center fst-italic fs-6"
   }, t('no_message')), !!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && filterMessage.map(function (message) {
@@ -8917,7 +9154,7 @@ var InputChat = function InputChat(_ref) {
   }, React__default.createElement(material.Button, {
     variant: "contained",
     fullWidth: true,
-    className: styles$1["btn-send"],
+    className: styles$2["btn-send"],
     sx: {
       bgcolor: isCompleted ? styles.light + " !important" : styles.less_dark
     },
@@ -9299,7 +9536,7 @@ var ChatContainer = function ChatContainer(_ref) {
     container: true
   }, React__default.createElement(ChatHeader, Object.assign({}, chatHeaderProps)), React__default.createElement("div", {
     ref: listRef,
-    className: "flex-grow-1 " + styles$1["body"],
+    className: "flex-grow-1 " + styles$2["body"],
     style: {
       height: "60vh",
       overflowY: "scroll",
@@ -10029,11 +10266,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$e.alpha(grey[500], 0.08),
+  selected: styles$e.alpha(grey[500], 0.16),
+  disabled: styles$e.alpha(grey[500], 0.8),
+  disabledBackground: styles$e.alpha(grey[500], 0.24),
+  focus: styles$e.alpha(grey[500], 0.24),
   hoverOpacity: 0.08,
   disabledOpacity: 0.48
 };
@@ -10053,7 +10290,7 @@ var base = {
   purple: purple,
   dark_purple: dark_purple,
   dark_red: dark_red,
-  divider: styles$c.alpha(grey[500], 0.2),
+  divider: styles$e.alpha(grey[500], 0.2),
   action: action$2
 };
 
@@ -12886,7 +13123,7 @@ var DEFAULT_USER_FILTERS = {
   sortColumnName: exports.UserSortColumn.CreatedAt
 };
 
-var styles$2 = {"avatar":"_2rJkZ","date-picker":"_1iqE2","time-picker":"_20xtc","teacher-selector-wrapper":"_3L1Oj"};
+var styles$3 = {"avatar":"_2rJkZ","date-picker":"_1iqE2","time-picker":"_20xtc","teacher-selector-wrapper":"_3L1Oj"};
 
 var _excluded$7 = ["teachers", "value"];
 var TeacherSelector = function TeacherSelector(_ref) {
@@ -13092,7 +13329,7 @@ var ClassForm = function ClassForm(_ref) {
   }, React__default.createElement(demo.DemoContainer, {
     components: ["DatePicker"]
   }, React__default.createElement(DatePicker.DatePicker, {
-    className: "" + styles$2["date-picker"],
+    className: "" + styles$3["date-picker"],
     format: t("date_format"),
     maxDate: maxDate,
     value: formikProp.values.startDate,
@@ -13116,7 +13353,7 @@ var ClassForm = function ClassForm(_ref) {
   }, React__default.createElement(demo.DemoContainer, {
     components: ["DatePicker"]
   }, React__default.createElement(DatePicker.DatePicker, {
-    className: "" + styles$2["date-picker"],
+    className: "" + styles$3["date-picker"],
     format: t("date_format"),
     minDate: minDate,
     value: formikProp.values.endDate,
@@ -13152,7 +13389,7 @@ var ClassForm = function ClassForm(_ref) {
   }, t("main_teacher"), " ", React__default.createElement("span", {
     className: "text-danger"
   }, "*")), React__default.createElement("div", {
-    className: "" + styles$2["teacher-selector-wrapper"]
+    className: "" + styles$3["teacher-selector-wrapper"]
   }, React__default.createElement(TeacherSelector, {
     value: formikProp.values.mainTeacherId,
     teachers: teachers,
@@ -13212,7 +13449,7 @@ var ClassForm = function ClassForm(_ref) {
           }
         }
       },
-      className: "" + styles$2["time-picker"],
+      className: "" + styles$3["time-picker"],
       onOpen: function onOpen() {
         return setOpen(index + "-startTime");
       },
@@ -13244,7 +13481,7 @@ var ClassForm = function ClassForm(_ref) {
           }
         }
       },
-      className: "" + styles$2["time-picker"],
+      className: "" + styles$3["time-picker"],
       onOpen: function onOpen() {
         return !disabled && setOpen(index + "-endTime");
       },
@@ -13308,6 +13545,8 @@ var SortIcon = function SortIcon(_ref) {
   }));
 };
 
+var styles$4 = {"date-picker":"_2YMvj","time-picker":"_3exYU"};
+
 var DrawerTab;
 (function (DrawerTab) {
   DrawerTab[DrawerTab["Attendance"] = 0] = "Attendance";
@@ -13323,103 +13562,6 @@ var StudentAttendanceStatus;
   StudentAttendanceStatus[StudentAttendanceStatus["Late"] = 2] = "Late";
 })(StudentAttendanceStatus || (StudentAttendanceStatus = {}));
 
-var USER_URL = BASE_URL + "/api/user";
-var getUserByIdApi = function getUserByIdApi(id) {
-  return api.get(USER_URL + "/GetById/" + id);
-};
-
-var _defaultLoadedTabs;
-var defaultTab = DrawerTab.Attendance;
-var defaultLoadedTabs = (_defaultLoadedTabs = {}, _defaultLoadedTabs[defaultTab] = true, _defaultLoadedTabs);
-var useStudentInfoDrawer = function useStudentInfoDrawer(props) {
-  var open = props.open,
-    inert = props.inert,
-    studentId = props.studentId,
-    onClose = props.onClose;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useState = React.useState(),
-    studentInfo = _useState[0],
-    setStudentInfo = _useState[1];
-  var _useState2 = React.useState(false),
-    isLoading = _useState2[0],
-    setLoading = _useState2[1];
-  var _useState3 = React.useState(defaultTab),
-    selectedTab = _useState3[0],
-    setSelectedTab = _useState3[1];
-  var _useState4 = React.useState(defaultLoadedTabs),
-    loadedTabs = _useState4[0],
-    setLoadingTabs = _useState4[1];
-  var handleClose = function handleClose() {
-    setStudentInfo(undefined);
-    setSelectedTab(defaultTab);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-    setLoadingTabs(defaultLoadedTabs);
-  };
-  var handleChangeTab = function handleChangeTab(_, newValue) {
-    setSelectedTab(newValue);
-    setLoadingTabs(function (state) {
-      var _extends2;
-      return _extends({}, state, (_extends2 = {}, _extends2[newValue] = true, _extends2));
-    });
-  };
-  var debounceChangeTab = _$8.debounce(handleChangeTab, 300);
-  React.useEffect(function () {
-    var getStudent = function getStudent() {
-      try {
-        var _temp2 = function _temp2() {
-          setLoading(false);
-        };
-        if (!studentId) return Promise.resolve();
-        setLoading(true);
-        var _temp = _catch(function () {
-          return Promise.resolve(getUserByIdApi(studentId)).then(function (res) {
-            setStudentInfo(res.data.data);
-          });
-        }, function () {});
-        return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    };
-    getStudent();
-  }, [studentId]);
-  React.useEffect(function () {
-    if (open && inert) {
-      var _document$getElementB;
-      (_document$getElementB = document.getElementById("drawer")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.setAttribute("inert", "true");
-    } else {
-      var _document$getElementB2;
-      (_document$getElementB2 = document.getElementById("drawer")) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.removeAttribute("inert");
-    }
-    return function () {
-      var _document$getElementB3;
-      (_document$getElementB3 = document.getElementById("drawer")) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.removeAttribute("inert");
-    };
-  }, [open, inert]);
-  return {
-    t: t,
-    loadedTabs: loadedTabs,
-    isLoading: isLoading,
-    studentInfo: studentInfo,
-    selectedTab: selectedTab,
-    debounceChangeTab: debounceChangeTab,
-    handleClose: handleClose
-  };
-};
-
-var DrawerContainerStyle = function DrawerContainerStyle(width) {
-  return {
-    flexShrink: 0,
-    display: "flex",
-    flexDirection: "column",
-    "& .MuiDrawer-paper": {
-      width: width,
-      boxSizing: "border-box"
-    }
-  };
-};
-
 var formatGrade = function formatGrade(grade, t, language) {
   return grade ? language === exports.Language.en ? "" + grade + getOrdinalSuffix(grade, language) : "" + t("number_grade", {
     number: grade
@@ -13464,17 +13606,8 @@ var a11yProps = function a11yProps(index) {
   };
 };
 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;
+  var hoursDiff = time1.diff(time2, "hours", false);
+  var minutesDiff = time1.diff(time2, "minutes", false) - hoursDiff * 60;
   if (hoursDiff < 0) {
     hoursDiff += 24;
   }
@@ -13489,9 +13622,472 @@ var subtractTime = function subtractTime(time1, time2, t) {
   }
   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 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$4["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);
+};
+
+var _defaultLoadedTabs;
+var defaultTab = DrawerTab.Attendance;
+var defaultLoadedTabs = (_defaultLoadedTabs = {}, _defaultLoadedTabs[defaultTab] = true, _defaultLoadedTabs);
+var useStudentInfoDrawer = function useStudentInfoDrawer(props) {
+  var open = props.open,
+    inert = props.inert,
+    studentId = props.studentId,
+    onClose = props.onClose;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(),
+    studentInfo = _useState[0],
+    setStudentInfo = _useState[1];
+  var _useState2 = React.useState(false),
+    isLoading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = React.useState(defaultTab),
+    selectedTab = _useState3[0],
+    setSelectedTab = _useState3[1];
+  var _useState4 = React.useState(defaultLoadedTabs),
+    loadedTabs = _useState4[0],
+    setLoadingTabs = _useState4[1];
+  var handleClose = function handleClose() {
+    setStudentInfo(undefined);
+    setSelectedTab(defaultTab);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    setLoadingTabs(defaultLoadedTabs);
+  };
+  var handleChangeTab = function handleChangeTab(_, newValue) {
+    setSelectedTab(newValue);
+    setLoadingTabs(function (state) {
+      var _extends2;
+      return _extends({}, state, (_extends2 = {}, _extends2[newValue] = true, _extends2));
+    });
+  };
+  var debounceChangeTab = _$8.debounce(handleChangeTab, 300);
+  React.useEffect(function () {
+    var getStudent = function getStudent() {
+      try {
+        var _temp2 = function _temp2() {
+          setLoading(false);
+        };
+        if (!studentId) return Promise.resolve();
+        setLoading(true);
+        var _temp = _catch(function () {
+          return Promise.resolve(getUserByIdApi(studentId)).then(function (res) {
+            setStudentInfo(res.data.data);
+          });
+        }, function () {});
+        return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+    getStudent();
+  }, [studentId]);
+  React.useEffect(function () {
+    if (open && inert) {
+      var _document$getElementB;
+      (_document$getElementB = document.getElementById("drawer")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.setAttribute("inert", "true");
+    } else {
+      var _document$getElementB2;
+      (_document$getElementB2 = document.getElementById("drawer")) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.removeAttribute("inert");
+    }
+    return function () {
+      var _document$getElementB3;
+      (_document$getElementB3 = document.getElementById("drawer")) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.removeAttribute("inert");
+    };
+  }, [open, inert]);
+  return {
+    t: t,
+    loadedTabs: loadedTabs,
+    isLoading: isLoading,
+    studentInfo: studentInfo,
+    selectedTab: selectedTab,
+    debounceChangeTab: debounceChangeTab,
+    handleClose: handleClose
+  };
+};
+
+var DrawerContainerStyle = function DrawerContainerStyle(width) {
+  return {
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    "& .MuiDrawer-paper": {
+      width: width,
+      boxSizing: "border-box"
+    }
+  };
 };
 
 var DrawerHeader = function DrawerHeader(_ref) {
@@ -14464,25 +15060,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 iconCloseDialog = function iconCloseDialog(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "24" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "25" : _ref$height,
-    color = _ref.color;
-  return React__default.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 24 25",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M13.5909 12.5L18.0441 8.04687C18.2554 7.8359 18.3743 7.54962 18.3745 7.25099C18.3748 6.95237 18.2564 6.66587 18.0455 6.45453C17.8345 6.24319 17.5482 6.12431 17.2496 6.12404C16.951 6.12378 16.6645 6.24215 16.4531 6.45312L12 10.9062L7.54687 6.45312C7.33553 6.24178 7.04888 6.12305 6.75 6.12305C6.45111 6.12305 6.16447 6.24178 5.95312 6.45312C5.74178 6.66447 5.62305 6.95111 5.62305 7.25C5.62305 7.54888 5.74178 7.83553 5.95312 8.04687L10.4062 12.5L5.95312 16.9531C5.74178 17.1645 5.62305 17.4511 5.62305 17.75C5.62305 18.0489 5.74178 18.3355 5.95312 18.5469C6.16447 18.7582 6.45111 18.8769 6.75 18.8769C7.04888 18.8769 7.33553 18.7582 7.54687 18.5469L12 14.0937L16.4531 18.5469C16.6645 18.7582 16.9511 18.8769 17.25 18.8769C17.5489 18.8769 17.8355 18.7582 18.0469 18.5469C18.2582 18.3355 18.3769 18.0489 18.3769 17.75C18.3769 17.4511 18.2582 17.1645 18.0469 16.9531L13.5909 12.5Z",
-    fill: "#202B37"
-  }));
-};
+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","form-label":"_1jRLX","form-control":"_13KE7","form-label-dialog":"_3mXNM","btn-cancel":"_3bqNl","btn-register":"_3GFnT"};
 
 var NoteTinyEditor = function NoteTinyEditor(_ref) {
   var _ref$disabled = _ref.disabled,
@@ -14592,7 +15170,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$5["form-label-dialog"]
     }, t("student_name")), React__default.createElement(Typography, {
       sx: {
         fontWeight: 700,
@@ -14601,7 +15179,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$5["form-label-dialog"]
     }, t("incorrect_answer_note_contents")), React__default.createElement(material.Box, {
       position: "relative",
       display: "flex",
@@ -14635,7 +15213,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React__default.createElement(MButton, {
-      className: styles$3["btn-cancel"],
+      className: styles$5["btn-cancel"],
       onClick: onClose
     }, React__default.createElement(Typography, {
       sx: {
@@ -14649,7 +15227,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
       sx: {
         bgcolor: styles.dark
       },
-      className: styles$3["btn-register"],
+      className: styles$5["btn-register"],
       type: "submit",
       disabled: !values.content.trim().length
     }, React__default.createElement(Typography, {
@@ -14679,42 +15257,21 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
   var handleSaveNote = function handleSaveNote(content, questionId) {
     onSaveNote(content, questionId);
   };
-  var _useState = React.useState(false),
-    keyboardOpen = _useState[0],
-    setKeyboardOpen = _useState[1];
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      if (window.innerHeight < window.outerHeight) {
-        var _dialogRef$current;
-        (_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 ? void 0 : _dialogRef$current.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center'
-        });
-        setKeyboardOpen(true);
-      } else {
-        setKeyboardOpen(false);
-      }
-    };
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return function () {
-      return window.removeEventListener("resize", handleResize);
-    };
-  }, []);
+  var _useKeyboardVisible = useKeyboardVisible(),
+    pageSxProps = _useKeyboardVisible.pageSxProps,
+    handleInputBlur = _useKeyboardVisible.handleInputBlur,
+    handleInputFocus = _useKeyboardVisible.handleInputFocus;
   return React__default.createElement(material.Dialog, {
     ref: dialogRef,
     onClose: onClose,
     open: open,
     scroll: "body",
     PaperProps: {
-      sx: {
+      sx: _extends({
         maxHeight: "unset",
         minWidth: "363px",
-        overflowY: "unset",
-        position: "relative",
-        bottom: keyboardOpen ? "0" : undefined,
-        transition: "top 0.3s ease"
-      }
+        overflowY: "auto"
+      }, pageSxProps)
     }
   }, React__default.createElement(DialogTitle, {
     id: "customized-dialog-title"
@@ -14758,7 +15315,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$5["form-label-dialog"]
     }, t("problem_number")), selectedQuestion || selectedNote ? React__default.createElement(Typography, {
       sx: {
         fontWeight: 700,
@@ -14780,12 +15337,15 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
             var value = _ref4.value;
             return setFieldValue("questionId", value);
           },
-          isClearable: false
+          maxMenuHeight: 150,
+          isClearable: false,
+          onFocus: handleInputFocus,
+          onBlur: handleInputBlur
         }));
       }
     })), 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$5["form-label-dialog"]
     }, t("incorrect_answer_note_contents")), React__default.createElement(material.Box, {
       position: "relative",
       display: "flex",
@@ -14802,7 +15362,9 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
       },
       name: "content",
       placeholder: t("the_problem_is_difficult"),
-      className: styles["form-control"]
+      className: styles["form-control"],
+      onFocus: handleInputFocus,
+      onBlur: handleInputBlur
     })), React__default.createElement(material.Box, {
       marginBottom: "4px"
     })))), React__default.createElement(DialogActions, {
@@ -14814,7 +15376,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React__default.createElement(MButton, {
-      className: styles$3["btn-cancel"],
+      className: styles$5["btn-cancel"],
       onClick: onClose
     }, React__default.createElement(Typography, {
       sx: {
@@ -14828,7 +15390,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
       sx: {
         bgcolor: styles.dark
       },
-      className: styles$3["btn-register"],
+      className: styles$5["btn-register"],
       type: "submit",
       disabled: !values.content.trim().length
     }, React__default.createElement(Typography, {
@@ -15992,7 +16554,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 +17812,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$6 = {"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 +17981,7 @@ var AnswerItem = function AnswerItem(_ref) {
     },
     key: data.id
   }, React__default.createElement("div", {
-    className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+    className: styles$6["myAnswerItem"] + " " + styles["noGutters"]
   }, React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17430,7 +17991,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$6["questionOrder"]
   }, t("number_question", {
     number: data.questionOrder + 1
   }))), React__default.createElement("div", {
@@ -17441,11 +18002,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$6["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$6["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$6["answerNograss"]
   }, t("no_solution")))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17456,12 +18017,12 @@ var AnswerItem = function AnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$6["answer-response"] + " " + styles$6["answer-response-" + data.answerResponseSignal]
   }, formatTimeSecond(Math.round(data.duration), t)) : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$6["answerNoTime"]
   }, t("no_time"))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17472,13 +18033,13 @@ var AnswerItem = function AnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$6["answer-response"] + " " + styles$6["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$6["answerNoTime"]
   }, "-")), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17489,12 +18050,12 @@ var AnswerItem = function AnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$4)
+    className: styles$6["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$6)
   }, data.overallCorrectRate.toFixed(2) + "%") : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$6["answerNoTime"]
   }, t("no_time"))), isStudent && !isLearningSpace && React__default.createElement(material.Box, {
     className: styles["custom-col-2"]
   }, openContextMenu ? React__default.createElement(material.ClickAwayListener, {
@@ -17561,7 +18122,7 @@ var MyAnswer = function MyAnswer(_ref) {
     }));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["myanswer"]
+    className: "" + styles$6["myanswer"]
   }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
     return React__default.createElement("div", {
       key: item.category.id
@@ -17571,7 +18132,7 @@ var MyAnswer = function MyAnswer(_ref) {
       bgcolor: "#F9FAFB",
       flexDirection: "row",
       padding: "12px",
-      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+      className: styles$6["myAnswerItem"] + " " + styles["noGutters"]
     }, React__default.createElement("div", {
       className: styles["custom-col-2"],
       style: {
@@ -17650,7 +18211,7 @@ var MyAnswer = function MyAnswer(_ref) {
         alignItems: "center"
       }
     }, t("total_correct_rate")))), React__default.createElement("div", {
-      className: styles$4["titleMyAnswer2"]
+      className: styles$6["titleMyAnswer2"]
     }, React__default.createElement(material.Typography, {
       sx: {
         color: "#97A1AF",
@@ -17663,7 +18224,7 @@ var MyAnswer = function MyAnswer(_ref) {
         fontWeight: 700
       }
     }, item.category.name))), React__default.createElement("div", {
-      className: styles$4["contentMyAnswer"]
+      className: styles$6["contentMyAnswer"]
     }, React__default.createElement(ListView, {
       data: item.questions,
       render: function render(question, index) {
@@ -17779,7 +18340,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$6["tdcolumn1"]
       }, t("problem"), " ", item.questionOrder + 1), React__default.createElement("td", {
         style: {
           textAlign: "center",
@@ -17787,9 +18348,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$6["tdcolumn3"],
         style: {
-          color: item.isCorrect ? styles$4.green_support_900 : styles$4.red_900,
+          color: item.isCorrect ? styles$6.green_support_900 : styles$6.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 +18361,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$6["classification"] + " " + printStyles["avoid-break-inside"]
       }, item.problemCategories.map(function (problem, index) {
         return React__default.createElement(material.Stack, {
           flexDirection: "row",
@@ -17843,11 +18404,11 @@ var CompareGrass = function CompareGrass(_ref2) {
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["compareGrass"]
+    className: "" + styles$6["compareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$6["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$6["table-responsive"]
   }, React__default.createElement(material.Table, {
     style: {
       width: "100%"
@@ -17859,7 +18420,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$6["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -17940,37 +18501,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$6["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$6["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$6["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$6["noData"]
     }, t("no_data"))), React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
+      className: styles$6["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$6["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$6["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$6["noData"]
     }, t("no_data"))));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$6["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$6["titleProblemClose"] : styles$6["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
@@ -17982,10 +18543,10 @@ var TrickyProblem = function TrickyProblem(_ref) {
     }
   }, t("tricky_problems")), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, renderProblems()));
 };
 
@@ -18011,9 +18572,9 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
           borderBottom: "1px solid #e4e7ec"
         } : {}
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$6["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$6.gray_900,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18022,22 +18583,22 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
       })), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$6.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
       }, item.duration ? formatTimeSecond(item.duration, t) : ""), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$6["tdcolumn3"],
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$6.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$6.dark : styles$6.red_900,
           fontSize: "13px",
           fontWeight: 600
         }
@@ -18053,15 +18614,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$6["content"] + " " + printStyles["avoid-break-inside"],
         key: item.id
       }, React__default.createElement(material.Box, {
         width: "160px",
-        className: styles$4["contentColumn1"]
+        className: styles$6["contentColumn1"]
       }, React__default.createElement(material.Stack, null, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$6["span1"]
       }, t("problem")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$6["span2"]
       }, t("number_question", {
         number: item.questionOrder + 1
       }))), (category === null || category === void 0 ? void 0 : category.name) && React__default.createElement(material.Typography, {
@@ -18072,22 +18633,22 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
           textAlign: "center"
         }
       }, category.name))), React__default.createElement(material.Box, {
-        className: styles$4["contentColumn2"]
+        className: styles$6["contentColumn2"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$6["span1"]
       }, t("my_time")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$6["span2"]
       }, t("top_time"))), React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["duration"]
+        className: styles$6["duration"]
       }, formatTimeSecond(item.duration, t)), React__default.createElement("span", {
-        className: styles$4["topDuration"]
+        className: styles$6["topDuration"]
       }, formatTimeSecond(item.topDuration, t)))));
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$6["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$6["titleProblemClose"] : styles$6["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
@@ -18103,20 +18664,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$6.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$6.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, data.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$6["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$6["table-responsive"]
   }, React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -18128,7 +18689,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$6["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -18142,7 +18703,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$6["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -18214,39 +18775,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$6["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$6.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, React__default.createElement(material.Typography, {
-        color: styles$4.gray_900,
+        color: styles$6.gray_900,
         fontSize: "13px",
         fontWeight: 600
       }, t("problem") + " " + (item.questionOrder + 1))), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.dark,
+          color: styles$6.dark,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.overallCorrectRate.toFixed(2) ? item.overallCorrectRate.toFixed(2) + "%" : ""), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$6["tdcolumn3"],
         style: {
-          color: styles$4.red_900,
+          color: styles$6.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$6.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$6.gray_700
         }
       }, item.category.name ? item.category.name : ""));
     });
@@ -18257,18 +18818,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$6["content"] + " " + printStyles["avoid-break-inside"],
         key: question.id
       }, React__default.createElement(material.Box, {
         width: "160px",
-        className: styles$4["contentColumn1"]
+        className: styles$6["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$6["span1"]
       }, t("problem_number")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$6["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 +18840,18 @@ var Vulnerable = function Vulnerable(_ref) {
           textAlign: "center"
         }
       }, question.category.name))), React__default.createElement(material.Box, {
-        className: styles$4["contentColumn2"],
+        className: styles$6["contentColumn2"],
         sx: {
           alignItems: "center"
         }
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$6["span1"]
       }, t("total_correct_rate")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$6["span2"]
       }, t("my_wrong_answer"))), React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["overallCorrectRate"]
+        className: styles$6["overallCorrectRate"]
       }, question.overallCorrectRate.toFixed(2), "%"), React__default.createElement("span", {
-        className: styles$4["answer"]
+        className: styles$6["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 +18859,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$6["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$6["titleProblemClose"] : styles$6["titleProblem"]),
     onClick: handleToggle
   }, React__default.createElement(material.Stack, {
     flexDirection: "row",
@@ -18314,20 +18875,20 @@ var Vulnerable = function Vulnerable(_ref) {
     }
   }, t("issues_vulnerable")), React__default.createElement(material.Typography, {
     sx: {
-      color: styles$4.gray_300,
+      color: styles$6.gray_300,
       fontSize: "11px",
       fontWeight: 500
     }
   }, t("vulnerable_detail"))), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, incorrectQuestions.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$6["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$6["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -18339,7 +18900,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$6["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -18357,7 +18918,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$6["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -18408,24 +18969,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$6["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$6.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.name), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_900,
+          color: styles$6.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.percentageAmongStudents.toFixed(2), "%"), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$6["tdcolumn3"],
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$6.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18434,7 +18995,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$6.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18443,7 +19004,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$6.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18456,26 +19017,26 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
         left: item.percentageAmongStudents + "%"
       };
       return React__default.createElement("div", {
-        className: styles$4["contentProblem"] + " " + printStyles["avoid-break-inside"],
+        className: styles$6["contentProblem"] + " " + printStyles["avoid-break-inside"],
         key: item.id
       }, React__default.createElement("div", {
-        className: styles$4["labelProblem"]
+        className: styles$6["labelProblem"]
       }, React__default.createElement("span", {
-        className: styles$4["name"]
+        className: styles$6["name"]
       }, item.name), React__default.createElement("div", {
-        className: styles$4["percent"]
+        className: styles$6["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$6["slider"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["track"],
+        className: styles$6["track"],
         style: trackStyle
       }))));
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$6["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$6["titleProblemClose"] : styles$6["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : ProblemKey.GradesByTerritory);
     }
@@ -18487,14 +19048,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$6.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, formattedData.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$6["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$6["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -18506,7 +19067,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$6["thcolumn1"]
   }, t("categories")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -18524,197 +19085,40 @@ 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$6["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
-var iconWarning = function iconWarning(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "17" : _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,
-    viewBox: "0 0 17 16",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M14.5335 12.4712L9.20754 2.58062C8.83004 1.87937 7.82441 1.87937 7.4466 2.58062L2.12097 12.4712C2.03901 12.6235 1.99792 12.7944 2.00171 12.9672C2.00549 13.1401 2.05404 13.309 2.14259 13.4575C2.23115 13.606 2.3567 13.729 2.50698 13.8145C2.65726 13.9 2.82714 13.9451 3.00004 13.9453H13.6529C13.8259 13.9453 13.996 13.9005 14.1465 13.8151C14.2969 13.7297 14.4227 13.6067 14.5115 13.4582C14.6002 13.3096 14.6489 13.1406 14.6527 12.9676C14.6566 12.7946 14.6155 12.6236 14.5335 12.4712ZM8.32722 12.4141C8.20361 12.4141 8.08277 12.3774 7.97999 12.3087C7.87721 12.2401 7.7971 12.1424 7.7498 12.0282C7.7025 11.914 7.69012 11.7884 7.71423 11.6671C7.73835 11.5459 7.79787 11.4345 7.88528 11.3471C7.97269 11.2597 8.08405 11.2002 8.20529 11.1761C8.32653 11.152 8.4522 11.1643 8.5664 11.2116C8.6806 11.2589 8.77822 11.3391 8.84689 11.4418C8.91557 11.5446 8.95222 11.6654 8.95222 11.7891C8.95222 11.8711 8.93606 11.9524 8.90465 12.0282C8.87324 12.1041 8.8272 12.173 8.76917 12.231C8.71113 12.289 8.64223 12.3351 8.5664 12.3665C8.49057 12.3979 8.4093 12.4141 8.32722 12.4141ZM9.00597 6.12813L8.8266 9.94063C8.8266 10.0732 8.77392 10.2004 8.68015 10.2942C8.58638 10.3879 8.45921 10.4406 8.3266 10.4406C8.19399 10.4406 8.06681 10.3879 7.97305 10.2942C7.87928 10.2004 7.8266 10.0732 7.8266 9.94063L7.64722 6.12969C7.64319 6.03862 7.65754 5.94768 7.6894 5.86227C7.72127 5.77687 7.77 5.69875 7.8327 5.63259C7.8954 5.56642 7.97078 5.51355 8.05434 5.47713C8.13791 5.44072 8.22795 5.4215 8.3191 5.42063H8.32566C8.41743 5.42058 8.50826 5.43912 8.59267 5.47515C8.67708 5.51117 8.75331 5.56392 8.81677 5.63021C8.88023 5.6965 8.92961 5.77497 8.96191 5.86087C8.99421 5.94676 9.00878 6.03832 9.00472 6.13L9.00597 6.12813Z",
-    fill: "#DB4D4D"
-  }));
-};
-
-var schema$3 = yup.object().shape({
-  content: yup.string().required()
-});
 function CreateNewQuestionDialog(_ref) {
-  var handleCreateQuestion = _ref.handleCreateQuestion,
+  var _handleCreateQuestion = _ref.handleCreateQuestion,
     openCreateQuestionDialog = _ref.openCreateQuestionDialog,
     onCloseCreateQuestion = _ref.onCloseCreateQuestion,
     studentTextbookId = _ref.studentTextbookId,
     examSessionId = _ref.examSessionId,
     selectedQuestion = _ref.selectedQuestion,
     questionOptions = _ref.questionOptions;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useState = React.useState(false),
-    keyboardOpen = _useState[0],
-    setKeyboardOpen = _useState[1];
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      if (window.innerHeight < window.outerHeight) {
-        setKeyboardOpen(true);
-      } else {
-        setKeyboardOpen(false);
-      }
-    };
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return function () {
-      return window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  return React__default.createElement(material.Dialog, {
-    onClose: onCloseCreateQuestion,
-    open: openCreateQuestionDialog,
-    PaperProps: {
-      sx: {
-        minWidth: "363px",
-        overflowY: "unset",
-        position: "relative",
-        bottom: keyboardOpen ? "0" : undefined,
-        transition: "top 0.3s ease"
-      }
-    }
-  }, React__default.createElement(DialogTitle, {
-    id: "customized-dialog-title"
-  }, React__default.createElement(Typography, {
-    fontWeight: 700,
-    fontSize: "16px",
-    lineHeight: "19.09px",
-    color: "#202B37"
-  }, t("ask_a_question"))), React__default.createElement(IconButton, {
-    "aria-label": "close",
-    sx: {
-      position: "absolute",
-      right: 8,
-      top: 8,
-      color: function color(theme) {
-        return theme.palette.grey[500];
-      }
-    },
-    onClick: onCloseCreateQuestion
-  }, React__default.createElement(iconCloseDialog, null)), React__default.createElement(formik.Formik, {
-    initialValues: {
-      content: "",
-      questionId: (selectedQuestion === null || selectedQuestion === void 0 ? void 0 : selectedQuestion.id) || 0
-    },
-    validationSchema: schema$3,
-    onSubmit: function onSubmit(values) {
-      handleCreateQuestion(_extends({}, values, {
+  var schema = yup.object().shape({
+    content: yup.string().required()
+  });
+  var initialValues = {
+    content: "",
+    questionId: (selectedQuestion === null || selectedQuestion === void 0 ? void 0 : selectedQuestion.id) || 0
+  };
+  return React__default.createElement(CommonCreateNewQuestionDialog, {
+    handleCreateQuestion: function handleCreateQuestion(values) {
+      return _handleCreateQuestion(_extends({}, values, {
         examSessionId: examSessionId,
         studentTextbookId: studentTextbookId
       }));
-    }
-  }, function (_ref2) {
-    var values = _ref2.values,
-      errors = _ref2.errors,
-      setFieldValue = _ref2.setFieldValue;
-    return React__default.createElement(formik.Form, null, React__default.createElement(DialogContent, {
-      sx: {
-        padding: 0,
-        overflowY: "auto"
-      }
-    }, React__default.createElement(material.Box, {
-      display: "flex",
-      flexDirection: "column",
-      gap: "8px",
-      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"]
-    }, t("questions_to_ask")), React__default.createElement(formik.Field, {
-      id: "questions",
-      name: "questionId",
-      render: function render(_ref3) {
-        var field = _ref3.field;
-        return React__default.createElement(CustomSelect, Object.assign({}, field, {
-          id: "questions",
-          menuPlacement: "bottom",
-          options: questionOptions,
-          onChange: function onChange(_ref4) {
-            var value = _ref4.value;
-            return setFieldValue("questionId", value);
-          },
-          isClearable: false
-        }));
-      }
-    })), React__default.createElement(material.Stack, null, React__default.createElement("label", {
-      htmlFor: "content-question",
-      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
-    }, t("question_content")), React__default.createElement(material.Box, {
-      position: "relative",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center"
-    }, React__default.createElement(formik.Field, {
-      as: "textarea",
-      rows: 3,
-      id: "content-question",
-      style: {
-        paddingRight: "40px"
-      },
-      name: "content",
-      placeholder: t("the_problem_is_difficult"),
-      className: styles["form-control"]
-    }), (errors === null || errors === void 0 ? void 0 : errors.content) && React__default.createElement(material.Box, {
-      position: "absolute",
-      right: 0,
-      padding: "0 12px",
-      display: "flex",
-      alignItems: "center"
-    }, React__default.createElement(iconWarning, null))), React__default.createElement(material.Box, {
-      marginBottom: "4px"
-    }), React__default.createElement(Typography, {
-      fontWeight: 500,
-      fontSize: "10px",
-      lineHeight: "11.93px",
-      color: !(errors !== null && errors !== void 0 && errors.content) ? "#97A1AF" : styles$4.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",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: "12px",
-        borderTop: "1px solid #CED2DA"
-      }
-    }, React__default.createElement(MButton, {
-      className: styles$4["btn-cancel"],
-      onClick: onCloseCreateQuestion
-    }, React__default.createElement(Typography, {
-      sx: {
-        color: styles.dark + " !important"
-      },
-      fontWeight: 700,
-      fontSize: "14px",
-      lineHeight: "16.71px"
-    }, t("cancel"))), React__default.createElement(MButton, {
-      variant: "contained",
-      sx: {
-        bgcolor: styles.dark
-      },
-      className: styles$4["btn-register"],
-      type: "submit",
-      disabled: !values.content.trim().length
-    }, React__default.createElement(Typography, {
-      fontWeight: 700,
-      fontSize: "14px",
-      lineHeight: "16.71px",
-      color: "#FFFFFF"
-    }, t("registration")))));
-  }));
+    },
+    nameContent: "content",
+    nameQuestion: "questionId",
+    openDialog: openCreateQuestionDialog,
+    onClose: onCloseCreateQuestion,
+    options: questionOptions,
+    schema: schema,
+    initialValues: initialValues
+  });
 }
 
 var _excluded$8 = ["children", "value", "index"];
@@ -18761,18 +19165,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$6["compareChart"] + " " + printStyles["avoid-break-inside"]
   }, React__default.createElement("div", {
-    className: "" + styles$4["prevChart"]
+    className: "" + styles$6["prevChart"]
   }), React__default.createElement("div", {
-    className: styles$4["chart"] + " sr-line-chart"
+    className: styles$6["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$6["nextChart"]
   })));
 };
 
@@ -18811,7 +19215,7 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     },
     key: data.id
   }, React__default.createElement("div", {
-    className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+    className: styles$6["myAnswerItem"] + " " + styles["noGutters"]
   }, React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18821,7 +19225,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$6["questionOrder"]
   }, t("number_question", {
     number: data.questionOrder + 1
   }))), React__default.createElement("div", {
@@ -18832,11 +19236,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$6["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$6["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$6["answerNograss"]
   }, t("no_solution")))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18847,12 +19251,12 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$6["answer-response"] + " " + styles$6["answer-response-" + data.answerResponseSignal]
   }, formatTimeSecond(Math.round(data.duration), t)) : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$6["answerNoTime"]
   }, t("no_time"))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18863,13 +19267,13 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$6["answer-response"] + " " + styles$6["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$6["answerNoTime"]
   }, "-")), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18880,12 +19284,12 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$4)
+    className: styles$6["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$6)
   }, data.overallCorrectRate.toFixed(2) + "%") : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$6["answerNoTime"]
   }, t("no_time"))), isStudent && !isLearningSpace && React__default.createElement(material.Box, {
     className: styles["custom-col-2"]
   }, openContextMenu ? React__default.createElement(material.ClickAwayListener, {
@@ -18957,7 +19361,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
     }));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["myanswer"]
+    className: "" + styles$6["myanswer"]
   }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
     var _item$categories;
     return React__default.createElement("div", {
@@ -18968,7 +19372,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
       bgcolor: "#F9FAFB",
       flexDirection: "row",
       padding: "12px",
-      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+      className: styles$6["myAnswerItem"] + " " + styles["noGutters"]
     }, React__default.createElement("div", {
       className: styles["custom-col-2"],
       style: {
@@ -19047,7 +19451,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
         alignItems: "center"
       }
     }, t("total_correct_rate")))), React__default.createElement("div", {
-      className: styles$4["titleMyAnswer2"]
+      className: styles$6["titleMyAnswer2"]
     }, React__default.createElement(material.Typography, {
       sx: {
         color: "#97A1AF",
@@ -19062,7 +19466,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$6["contentMyAnswer"]
     }, React__default.createElement(ListView, {
       data: item.questions,
       render: function render(question, index) {
@@ -19092,24 +19496,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$6["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$6.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.name), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_900,
+          color: styles$6.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.percentageAmongStudents.toFixed(2), "%"), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$6["tdcolumn3"],
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$6.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -19118,7 +19522,7 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$6.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -19127,7 +19531,7 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$6.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -19141,26 +19545,26 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
         left: item.percentageAmongStudents + "%"
       };
       return React__default.createElement("div", {
-        className: styles$4["contentProblem"] + " " + printStyles["avoid-break-inside"],
+        className: styles$6["contentProblem"] + " " + printStyles["avoid-break-inside"],
         key: item.id
       }, React__default.createElement("div", {
-        className: styles$4["labelProblem"]
+        className: styles$6["labelProblem"]
       }, React__default.createElement("span", {
-        className: styles$4["name"]
+        className: styles$6["name"]
       }, item.name), React__default.createElement("div", {
-        className: styles$4["percent"]
+        className: styles$6["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$6["slider"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["track"],
+        className: styles$6["track"],
         style: trackStyle
       }))));
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$6["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$6["titleProblemClose"] : styles$6["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : ProblemKey.GradesByTerritory);
     }
@@ -19172,14 +19576,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$6.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, formattedData.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$6["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$6["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -19191,7 +19595,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$6["thcolumn1"]
   }, t("categories")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -19209,7 +19613,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$6["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -19282,39 +19686,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$6["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$6.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, React__default.createElement(material.Typography, {
-        color: styles$4.gray_900,
+        color: styles$6.gray_900,
         fontSize: "13px",
         fontWeight: 600
       }, t("problem") + " " + (item.questionOrder + 1))), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.dark,
+          color: styles$6.dark,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.overallCorrectRate.toFixed(2) ? item.overallCorrectRate.toFixed(2) + "%" : ""), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$6["tdcolumn3"],
         style: {
-          color: styles$4.red_900,
+          color: styles$6.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$6.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$6.gray_700
         }
       }, item.categories ? item.categories.map(function (i) {
         return i.name;
@@ -19326,31 +19730,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$6["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$6["contentColumn1"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$6["span1"]
       }, t("problem_number")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$6["span2"]
       }, t("number_question", {
         number: question.questionOrder + 1
       })))), React__default.createElement(material.Grid, {
         item: true,
         xs: 10.5,
-        className: styles$4["contentColumn2"]
+        className: styles$6["contentColumn2"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$6["span1"]
       }, t("total_correct_rate")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$6["span2"]
       }, t("my_wrong_answer"))), React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["overallCorrectRate"]
+        className: styles$6["overallCorrectRate"]
       }, question.overallCorrectRate.toFixed(2), "%"), React__default.createElement("span", {
-        className: styles$4["answer"]
+        className: styles$6["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 +19762,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$6["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$6["titleProblemClose"] : styles$6["titleProblem"]),
     onClick: handleToggle
   }, React__default.createElement(material.Stack, {
     flexDirection: "row",
@@ -19374,20 +19778,20 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
     }
   }, t("issues_vulnerable")), React__default.createElement(material.Typography, {
     sx: {
-      color: styles$4.gray_300,
+      color: styles$6.gray_300,
       fontSize: "11px",
       fontWeight: 500
     }
   }, t("vulnerable_detail"))), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.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$6["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$6["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -19399,7 +19803,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$6["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -19417,7 +19821,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$6["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -19437,37 +19841,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$6["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$6["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$6["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$6["noData"]
     }, t("no_data"))), React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
+      className: styles$6["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$6["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$6["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$6["noData"]
     }, t("no_data"))));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$6["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$6["titleProblemClose"] : styles$6["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
@@ -19479,10 +19883,10 @@ var TextbookTrickyProblem = function TextbookTrickyProblem(_ref) {
     }
   }, t("tricky_problems")), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$6.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, renderProblems()));
 };
 
@@ -19904,7 +20308,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 +20366,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 +20396,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 +20440,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 +20611,7 @@ var useExamResultData = function useExamResultData(props) {
           }
         }
       }),
-      colors: [styles$4.dark, styles$4.purple_900],
+      colors: [styles$6.dark, styles$6.purple_900],
       xaxis: _extends({}, DEFAULT_LINE_CHART_OPTIONS.xaxis, {
         categories: ["s"].concat(Array.from({
           length: questionLength
@@ -20660,7 +21071,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 +21086,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 +21154,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 +21309,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 +21622,18 @@ var ExamResultV2 = function ExamResultV2(props) {
     value: selected,
     index: 1
   }, React__default.createElement("div", {
-    className: styles$4["compareChart"]
+    className: styles$6["compareChart"]
   }, React__default.createElement("div", {
-    className: styles$4["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
+    className: styles$6["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
     onClick: handlePrevChart
   }, React__default.createElement(iconBtnPrevChart, null)), React__default.createElement("div", {
-    className: styles$4["chart"] + " sr-line-chart"
+    className: styles$6["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$6["nextChart"] + " " + (dataChartIndex < timelyOrderQuestions.length - 1 && "pointer"),
     onClick: handleNextChart
   }, React__default.createElement(iconBtnNextChart, null)))), React__default.createElement(CustomTabPanel, {
     value: selected,
@@ -21412,13 +21827,13 @@ var LoadingDots = function LoadingDots(_ref) {
     color: "#FFF",
     fontSize: 20
   }, text), React__default.createElement("div", {
-    className: styles$4["loader"]
+    className: styles$6["loader"]
   }, React__default.createElement("div", {
-    className: styles$4["dot"]
+    className: styles$6["dot"]
   }), React__default.createElement("div", {
-    className: styles$4["dot"]
+    className: styles$6["dot"]
   }), React__default.createElement("div", {
-    className: styles$4["dot"]
+    className: styles$6["dot"]
   })));
 };
 
@@ -22260,7 +22675,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$7 = {"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 +22739,7 @@ var ResetFilterDialog = function ResetFilterDialog(_ref) {
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$5["btn-cancel"],
+    className: styles$7["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -22335,7 +22750,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$7["btn-register"],
     type: "submit",
     sx: {
       padding: "12px 47px"
@@ -22754,7 +23169,7 @@ var ChapterProblemSolvingResultsDialog = function ChapterProblemSolvingResultsDi
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$5["btn-cancel"],
+    className: styles$7["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -22773,13 +23188,18 @@ var StartPageDialog = function StartPageDialog(_ref) {
     open = _ref.open,
     options = _ref.options,
     onSubmit = _ref.onSubmit;
+  var _useKeyboardVisible = useKeyboardVisible(),
+    pageSxProps = _useKeyboardVisible.pageSxProps,
+    handleInputFocus = _useKeyboardVisible.handleInputFocus,
+    handleInputBlur = _useKeyboardVisible.handleInputBlur;
   return React__default.createElement(material.Dialog, {
     onClose: onClose,
     open: open,
+    scroll: "body",
     PaperProps: {
-      sx: {
+      sx: _extends({
         minWidth: "363px"
-      }
+      }, pageSxProps)
     }
   }, React__default.createElement(material.DialogTitle, {
     id: "customized-dialog-title"
@@ -22829,12 +23249,16 @@ var StartPageDialog = function StartPageDialog(_ref) {
       render: function render(_ref3) {
         var field = _objectWithoutPropertiesLoose(_ref3, _excluded$9);
         return React__default.createElement(CustomSelectOption, Object.assign({
+          maxMenuHeight: 150,
           menuPosition: "fixed",
           onChange: function onChange(option) {
             return setFieldValue('startPage', option === null || option === void 0 ? void 0 : option.value);
           },
           options: options
-        }, field));
+        }, field, {
+          onBlur: handleInputBlur,
+          onFocus: handleInputFocus
+        }));
       }
     }))), React__default.createElement(material.DialogActions, {
       sx: {
@@ -22845,7 +23269,7 @@ var StartPageDialog = function StartPageDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React__default.createElement(material.Button, {
-      className: styles$5["btn-cancel"],
+      className: styles$7["btn-cancel"],
       onClick: onClose
     }, React__default.createElement(material.Typography, {
       sx: {
@@ -22856,7 +23280,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$7["btn-register"],
       type: "submit",
       sx: {
         padding: "12px 47px"
@@ -23012,7 +23436,7 @@ var Statistic = function Statistic(_ref) {
 };
 
 var TextbookDrawer = function TextbookDrawer(_ref) {
-  var _textbook$chapters, _textbook$chapters2;
+  var _textbook$totalQuesti, _textbook$chapters, _textbook$chapters2;
   var isOpen = _ref.isOpen,
     role = _ref.role,
     width = _ref.width,
@@ -23181,7 +23605,7 @@ var TextbookDrawer = function TextbookDrawer(_ref) {
     fontSize: "13px",
     fontWeight: 700,
     color: styles.gray_900
-  }, (textbook === null || textbook === void 0 ? void 0 : textbook.totalQuestions) + " " + t("questions")))))), React__default.createElement(material.Stack, {
+  }, ((_textbook$totalQuesti = textbook === null || textbook === void 0 ? void 0 : textbook.totalQuestions) != null ? _textbook$totalQuesti : 0) + " " + t("questions")))))), React__default.createElement(material.Stack, {
     flexDirection: "row",
     gap: "24px",
     mx: "24px"
@@ -23433,7 +23857,7 @@ var DeleteTextbookDialog = function DeleteTextbookDialog(_ref) {
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$5["btn-cancel"],
+    className: styles$7["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -23444,7 +23868,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$7["btn-register"],
     type: "submit",
     sx: {
       padding: "12px 47px"
@@ -23556,13 +23980,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$7["drawer-overlay"] + " " + (isOpen && styles$7["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$7["drawer"] + " bg-white " + (isOpen && styles$7["open"])
   }, React__default.createElement(material.Stack, {
     bgcolor: styles.gray_50,
     borderBottom: "1px solid " + styles.gray_100,
@@ -24532,188 +24956,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 +24964,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 +25018,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 +25069,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 +25154,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 +25173,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 +25182,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 +25204,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 +25235,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 +25290,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 +25330,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 +25368,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 +25387,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 +25419,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,
@@ -26613,7 +26891,7 @@ var LessonFormBody = function LessonFormBody(_ref) {
   }, React__default.createElement(demo.DemoContainer, {
     components: ["DatePicker"]
   }, React__default.createElement(DatePicker.DatePicker, {
-    className: "" + styles$2["date-picker"],
+    className: "" + styles$3["date-picker"],
     format: t("date_format"),
     maxDate: endDate ? moment(endDate).local() : undefined,
     minDate: startDate ? moment(startDate).local() : undefined,
@@ -26631,7 +26909,7 @@ var LessonFormBody = function LessonFormBody(_ref) {
   }, t("main_teacher"), " ", React__default.createElement("span", {
     className: "text-danger"
   }, "*")), React__default.createElement("div", {
-    className: "" + styles$2["teacher-selector-wrapper"]
+    className: "" + styles$3["teacher-selector-wrapper"]
   }, React__default.createElement(TeacherSelector, {
     value: formikProp.values.mainTeacherId,
     teachers: teachers,
@@ -26659,7 +26937,7 @@ var LessonFormBody = function LessonFormBody(_ref) {
       return formikProp.setFieldValue("startTime", newValue);
     },
     timezone: "system",
-    className: styles$2["time-picker"] + " w-100",
+    className: styles$3["time-picker"] + " w-100",
     slotProps: {
       textField: {
         onClick: function onClick() {
@@ -26693,7 +26971,7 @@ var LessonFormBody = function LessonFormBody(_ref) {
       return formikProp.setFieldValue("endTime", newValue);
     },
     timezone: "system",
-    className: styles$2["time-picker"] + " w-100",
+    className: styles$3["time-picker"] + " w-100",
     slotProps: {
       textField: {
         onClick: function onClick() {
@@ -27530,7 +27808,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$8 = {"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 +28933,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$8["drop-area"],
     onDrop: handleDrop,
     onDragOver: handleDragOver,
     onClick: handleChooseFile
@@ -28784,10 +29062,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$8["action-btn"] + " bg-warning text-white me-2",
     onClick: handleViewOrUpdate
   }, React__default.createElement(hi.HiOutlinePencilAlt, {
-    className: styles$6["action-btn--pencil"],
+    className: styles$8["action-btn--pencil"],
     size: 16
   })) : React__default.createElement(material.IconButton, {
     color: "default",
@@ -28798,7 +29076,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$8["action-btn"] + " bg-danger text-white"
   }, React__default.createElement(fa6.FaTrashCan, {
     size: 12
   })))));
@@ -28884,7 +29162,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$8["icon-rotate-180"],
       size: 14
     }),
     onClick: handleChooseFile
@@ -28895,7 +29173,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$8["icon-rotate-180"],
       size: 14
     }),
     onClick: handleToggleDeleteUserCsv
@@ -29031,7 +29309,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$9 = {"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 +29382,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$9["question-label"] + " form-label"
         }, t("textual_answer")), React__default.createElement(material.TextField, {
           sx: {
             "& .MuiInputBase-input": {
@@ -29132,7 +29410,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$9["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             onChange: function onChange(e) {
@@ -29163,7 +29441,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$9["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             onChange: function onChange(e) {
@@ -29206,7 +29484,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$9["question-title"] + " me-2 text-nowrap"
   }, t("problem_number_question", {
     number: question.questionOrder + 1
   }))), React__default.createElement(material.Grid, {
@@ -29219,7 +29497,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$9["question-label"] + " form-label"
   }, t("title")), React__default.createElement(material.TextField, {
     fullWidth: true,
     value: question.title,
@@ -29234,7 +29512,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$9["question-label"] + " form-label"
   }, t("author")), React__default.createElement(material.TextField, {
     fullWidth: true,
     value: question.author,
@@ -29249,7 +29527,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$9["question-label"] + " form-label"
   }, t("subject")), React__default.createElement(material.TextField, {
     fullWidth: true,
     value: question.subject,
@@ -29268,7 +29546,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$9["question-label"] + " form-label"
   }, t("type")), React__default.createElement(CustomSelectOption, {
     isTextbook: true,
     valueById: question.type,
@@ -29282,7 +29560,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$9["question-label"] + " form-label"
   }, t("question_answer_type")), React__default.createElement(CustomSelect, {
     isDisabled: isDisabled,
     value: question.questionAnswerType,
@@ -29302,7 +29580,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$9["question-title"] + " me-2 text-nowrap"
   }, t("problem_number_question", {
     number: question.questionOrder + 1
   }))), !isTextbook && React__default.createElement(material.Grid, {
@@ -29315,7 +29593,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$9["question-label"] + " form-label"
   }, t("question_answer_type")), React__default.createElement(CustomSelect, {
     isDisabled: isDisabled,
     value: question.questionAnswerType,
@@ -29449,7 +29727,11 @@ 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$9["question"] + " " + (isActive ? styles$9["question--active"] : ""),
+    style: {
+      maxHeight: "95%",
+      overflow: 'scroll'
+    }
   }, React__default.createElement("div", {
     className: "py-1"
   }, React__default.createElement(pi.PiDotsNineLight, {
@@ -29457,9 +29739,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$9["question-article"]
   }, t("article_number")), React__default.createElement("p", {
-    className: "text-center " + styles$7["question-article"]
+    className: "text-center " + styles$9["question-article"]
   }, article)), React__default.createElement("div", {
     className: "flex-grow-1"
   }, React__default.createElement(material.Grid, {
@@ -29480,7 +29762,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$9["question-label"] + " form-label"
   }, t("questions")), React__default.createElement(QuestionCountSelector, {
     id: "question_count",
     value: questionCount,
@@ -29499,7 +29781,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "category",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$9["question-label"] + " form-label"
   }, t("category")), React__default.createElement(ArticleCategorySelector, {
     style: {
       "div:has(&)": {
@@ -29519,7 +29801,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$9["question-label"] + " form-label"
   }, t("answer_count")), React__default.createElement(AnswerCountSelector, {
     id: "answer_count",
     value: answerCount,
@@ -30044,7 +30326,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$9["question-label"],
     htmlFor: "title"
   }, t("exam_name")), React__default.createElement("input", {
     disabled: isDisabled,
@@ -30058,7 +30340,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$9["question-label"],
     htmlFor: "duration"
   }, t("exam_duration")), React__default.createElement(CustomSelect, {
     inputId: "duration",
@@ -30071,7 +30353,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$9["question-label"],
     htmlFor: "subject"
   }, t("subject")), React__default.createElement(CustomSelect, {
     inputId: "subject",
@@ -30114,7 +30396,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$9["question-btn"] + " mt-3",
     onClick: handleAddArticle
   }, React__default.createElement(fa.FaPlusCircle, {
     className: "me-2"
@@ -31699,7 +31981,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$a = {"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 +31994,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$a["drawer-overlay"] + " " + (isOpen && styles$a["open"]),
     onClick: function onClick() {
       return onClose();
     }
   }), React__default.createElement("div", {
-    className: styles$8["drawer"] + " bg-white " + (isOpen && styles$8["open"]),
+    className: styles$a["drawer"] + " bg-white " + (isOpen && styles$a["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$a["drawer-header"] + " d-flex justify-content-between align-items-center"
   }, React__default.createElement(material.Button, {
     variant: "outlined",
     sx: {
@@ -31741,7 +32023,7 @@ var CreateExamDrawer = function CreateExamDrawer(props) {
   }, React__default.createElement(fa.FaTimes, {
     size: 18
   }))), React__default.createElement("div", {
-    className: "" + styles$8["drawer-form"]
+    className: "" + styles$a["drawer-form"]
   }, React__default.createElement(ExamDetailView, Object.assign({}, examDetailViewProps)))));
 };
 
@@ -32123,7 +32405,7 @@ var ShareToTeacherDialog = function ShareToTeacherDialog(_ref) {
     maxWidth: "md"
   }, React__default.createElement(material.DialogContent, {
     sx: {
-      overflowY: "unset"
+      overflowY: "auto"
     }
   }, React__default.createElement(material.Grid, {
     container: true,
@@ -32857,7 +33139,7 @@ var useNotificationDetail = function useNotificationDetail(_ref) {
   };
 };
 
-var styles$9 = {"avatar":"_8niRT"};
+var styles$b = {"avatar":"_8niRT"};
 
 var _excluded$f = ["value", "disabled", "optionTypeNotification"];
 var TypeSelector = function TypeSelector(_ref) {
@@ -32982,7 +33264,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$b["teacher-selector-wrapper"]
   }, React__default.createElement(TinyEditor, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     initValue: formikProp.values.content,
@@ -33001,7 +33283,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$b["teacher-selector-wrapper"]
   }, React__default.createElement(TypeSelector, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     optionTypeNotification: notificationTypes,
@@ -33019,7 +33301,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$b["teacher-selector-wrapper"]
   }, React__default.createElement(ClassSelector, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     value: classOptions,
@@ -33028,7 +33310,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$b["teacher-selector-wrapper"]
   }, React__default.createElement(StudentSelector, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     value: studentOptions,
@@ -33909,7 +34191,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 +34654,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$c = {"question":"_1_ONI","question-article":"_2FdrR","question-title":"_3mgRf","question-label":"_2h0kA","question-input":"_exAl-","question-btn":"_2ksp8"};
 
 var labelStyle = {
   textOverflow: "ellipsis",
@@ -34399,7 +34680,7 @@ var QuestionCompareType = function QuestionCompareType(_ref) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "compare-type",
-    className: "" + styles$a["question-label"],
+    className: "" + styles$c["question-label"],
     sx: _extends({}, labelStyle, {
       width: "unset"
     })
@@ -34443,7 +34724,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$c["question-title"] + " me-2 text-nowrap",
     sx: questionTitleStyle
   }, isMath ? t("problem_number_question", {
     number: questionOrder + 1
@@ -34668,7 +34949,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$c["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             disabled: disabled,
@@ -34702,7 +34983,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$c["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             onChange: function onChange(e) {
@@ -34768,7 +35049,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$c["question-label"] + " form-label",
     sx: _extends({}, labelStyle, {
       visibility: "hidden"
     })
@@ -34803,7 +35084,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "score",
-    className: styles$a["question-label"] + " form-label",
+    className: styles$c["question-label"] + " form-label",
     sx: labelStyle
   }, t("score")), React__default.createElement(formik.Field, {
     name: path + ".score",
@@ -34823,7 +35104,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "type",
-    className: styles$a["question-label"] + " form-label",
+    className: styles$c["question-label"] + " form-label",
     sx: labelStyle
   }, t("type")), React__default.createElement(formik.Field, {
     name: path + ".questionTypeId",
@@ -34848,7 +35129,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "question_answer_type",
-    className: styles$a["question-label"] + " form-label",
+    className: styles$c["question-label"] + " form-label",
     sx: labelStyle
   }, t("question_answer_type")), React__default.createElement(formik.Field, {
     name: path + ".questionAnswerType",
@@ -35244,8 +35525,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 +37764,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$d = {"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 +37828,7 @@ var DeleteTextbookDialog$1 = function DeleteTextbookDialog(_ref) {
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$b["btn-cancel"],
+    className: styles$d["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -37559,7 +37839,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$d["btn-register"],
     type: "submit",
     sx: {
       padding: "12px 47px"
@@ -37646,12 +37926,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$d["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$d["action-btn--pencil"],
       size: 16
     }))), React__default.createElement(material.Tooltip, {
       title: t("edit")
@@ -37660,7 +37940,7 @@ var PreparedTextbookList = function PreparedTextbookList(_ref) {
         return handleOpenConfirmDialog(i);
       },
       color: "default",
-      className: styles$b["action-btn"] + " bg-danger text-white",
+      className: styles$d["action-btn"] + " bg-danger text-white",
       title: t("delete")
     }, React__default.createElement(fa6.FaTrashCan, {
       size: 12
@@ -38459,8 +38739,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 +39115,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;
@@ -38844,6 +39125,7 @@ exports.ClassDetail = ClassDetail;
 exports.ClassList = ClassList;
 exports.ClassNoteDialog = ClassNoteDialog;
 exports.ClassSelector = ClassSelector;
+exports.CommonCreateNewQuestionDialog = CommonCreateNewQuestionDialog;
 exports.CommonDialog = CommonDialog;
 exports.ConfirmDeleteDialog = ConfirmDeleteDialog;
 exports.ConfirmDialog = ConfirmDialog;
@@ -38873,6 +39155,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;
@@ -38978,6 +39261,7 @@ exports.useAutoAcademyDomain = useAutoAcademyDomain;
 exports.useChatContainer = useChatContainer;
 exports.useCountDownTimer = useCountDownTimer;
 exports.useGoogleSignOut = useGoogleSignOut;
+exports.useKeyboardVisible = useKeyboardVisible;
 exports.useLanguage = useLanguage;
 exports.useList = useList;
 exports.useLoadMore = useLoadMore;